/* KGVWS Gartler-App (PWA), ticket 1565.
   Version 1.1, 2026-10-13, Claude for Alex Bartl.
   Version 2.0, 2026-10-13, Claude for Alex Bartl: bottom navigation and all views.
   Version 2.5, 2026-10-14, Claude for Alex Bartl: layout picture cards (.layoutwahl).
   Version 2.6, 2026-10-14, Claude for Alex Bartl: live slide preview (.foliev), 16:9 above 9:16 on a phone.
   Version 2.15, 2026-10-22, Claude for Alex Bartl: delete button in the water readings.
   Version 2.14, 2026-10-22, Claude for Alex Bartl: water meter block with photo and folded readings.
   Version 2.13, 2026-10-22, Claude for Alex Bartl: slide approval (.folie-kopf, .folie-ansicht).
   Version 2.12, 2026-10-22, Claude for Alex Bartl: water meter cards (.zaehler-kopf, .zaehler-feld).
   Version 2.10, 2026-10-22, Claude for Alex Bartl: version badge (.version-marke) instead of the test badge.
   Version 2.9, 2026-10-22, Claude for Alex Bartl: unread list on the start page, channel copies, device rename, weather review. */
:root{--bg:#f5f6f2;--fl:#fff;--tx:#1d241f;--lei:#5d6660;--li:#dfe3dc;--ak:#3f6b4f;--ak2:#8fb63c;--fehler:#b3261e;--gruen-h:#e3f1dc;--warn:#8a5a00;--warn-h:#fff4d6;--nav:72px}
@media (prefers-color-scheme:dark){:root{--bg:#121512;--fl:#1c211d;--tx:#e9ede8;--lei:#a0a99f;--li:#2e352f;--ak:#8fc79e;--ak2:#a9cf5a;--fehler:#ff8a80;--gruen-h:#22331f;--warn:#ffcf70;--warn-h:#3a2f12}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(var(--nav) + env(safe-area-inset-bottom)) env(safe-area-inset-left)}
a{color:var(--ak)}
.kopf{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--fl);border-bottom:1px solid var(--li);position:sticky;top:0;z-index:5}
.kopf .marke{display:flex;align-items:center;gap:10px;flex:1;text-decoration:none;color:inherit;min-width:0}
.kopf img{border-radius:8px}.kopf .marke div{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.kopf #wer{font-size:13px;color:var(--lei);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.version-marke{font:600 12px/1 system-ui,sans-serif;color:#fff;background:var(--ak);border:0;border-radius:6px;padding:5px 8px;white-space:nowrap}
.version-marke.alt{color:#5a3d00;background:#ffd25e;cursor:pointer}
main{max-width:620px;margin:0 auto;padding:12px 16px 24px}
h1{font-size:24px;margin:8px 0 6px}h2{font-size:17px;margin:22px 0 8px}h3{font-size:16px;margin:0 0 4px}
.leise{color:var(--lei);font-size:14px}
form{display:flex;flex-direction:column;gap:12px;margin:12px 0}
label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600}
label small{font-weight:400;color:var(--lei)}
label.haken{flex-direction:row;align-items:center;gap:8px;font-weight:400}
input,textarea,select{font:inherit;padding:11px 12px;border:1px solid var(--li);border-radius:10px;background:var(--fl);color:var(--tx);width:100%}
input[type=checkbox],input[type=radio]{width:auto}
textarea{min-height:90px;resize:vertical}
.layoutwahl{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.layoutwahl legend{font-size:14px;font-weight:600;padding:0;margin-bottom:4px}
.layoutwahl label{gap:6px;padding:6px;border:2px solid var(--li);border-radius:12px;background:var(--fl);font-weight:400;font-size:13px;line-height:1.25;cursor:pointer;position:relative}
.layoutwahl label:has(input:checked){border-color:var(--ak);background:var(--gruen-h)}
.layoutwahl input{position:absolute;opacity:0;pointer-events:none}
.layoutwahl input:focus-visible+img{outline:2px solid var(--ak);outline-offset:2px}
.foliev{font-size:14px}
.foliev-paar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin-top:6px}
.foliev-box{position:relative;overflow:hidden;border:1px solid var(--li);border-radius:8px;background:#eef3e6}
.foliev-box.q{flex:1 1 300px;aspect-ratio:16/9}
.foliev-box.h{width:min(45%,180px);aspect-ratio:9/16}
.foliev-box iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none}
.foliev-box.q iframe{width:1920px;height:1080px}.foliev-box.h iframe{width:1080px;height:1920px}
.layoutwahl img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px}
input:focus,textarea:focus{outline:2px solid var(--ak);outline-offset:1px}
button,.knopf{font:inherit;font-weight:600;padding:12px 16px;border:0;border-radius:10px;background:var(--ak);color:#fff;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
button:disabled{opacity:.6}
button.zweit,.knopf.zweit{background:transparent;color:var(--ak);border:1px solid var(--ak)}
button.leer{background:transparent;color:var(--lei);border:1px solid var(--li);width:100%;margin-top:24px}
button.klein,.knopf.klein{padding:7px 12px;font-size:14px}
.reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fehler{color:var(--fehler);font-size:14px;margin:0}
.ok{color:var(--ak);font-size:14px;margin:0}
.karte{display:block;background:var(--fl);border:1px solid var(--li);border-radius:14px;padding:12px 14px;margin:10px 0;color:inherit;text-decoration:none}
a.karte:active{background:var(--gruen-h)}
.karte.neu{border-left:4px solid var(--ak2)}
.karte .meta{font-size:13px;color:var(--lei);margin-bottom:2px}
.karte p{margin:6px 0 0}
.abgesagt{text-decoration:line-through;opacity:.7}
.marke-abgesagt{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--fehler);border-radius:4px;padding:0 6px;margin-left:6px;text-decoration:none}
.hinweis{background:var(--warn-h);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:14px;margin:10px 0}
.leer-text{color:var(--lei);text-align:center;padding:30px 10px}
.text{white-space:pre-line;overflow-wrap:anywhere}
img.bild{display:block;max-width:100%;border-radius:12px;margin-top:10px}
.zurueck{display:inline-block;margin:4px 0 8px;text-decoration:none;font-size:15px}
/* bottom navigation */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;background:var(--fl);border-top:1px solid var(--li);padding-bottom:env(safe-area-inset-bottom)}
.leiste a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;font-size:11px;color:var(--lei);text-decoration:none;position:relative}
.leiste svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.leiste a.aktiv{color:var(--ak)}
.zahl{position:absolute;top:2px;left:calc(50% + 6px);background:var(--fehler);color:#fff;font-size:11px;border-radius:9px;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 5px}
/* start */
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kacheln a{background:var(--fl);border:1px solid var(--li);border-radius:14px;padding:14px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px}
.kacheln a b{font-size:15px}.kacheln a span{font-size:13px;color:var(--lei)}
.kacheln svg{width:26px;height:26px;fill:none;stroke:var(--ak);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
/* weather */
.wetter{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.wetter .tag{display:block;color:inherit;text-decoration:none;flex:0 0 108px;background:var(--fl);border:1px solid var(--li);border-radius:14px;padding:10px 8px;text-align:center;scroll-snap-align:start}
.wetter .tag.heute{border-color:var(--ak);border-width:2px}.wetter .tag.alt{opacity:.6}
.wetter .tag b{display:block;font-size:14px}.wetter .tag .t{font-size:15px;font-weight:600}
.wetter .tag .klein{font-size:12px;color:var(--lei)}
.wetter svg.wetter-icon{width:52px;height:52px}
/* messages */
.verlauf{display:flex;flex-direction:column;gap:8px;margin:10px 0 16px}
.blase{max-width:84%;padding:9px 12px;border-radius:16px;background:var(--fl);border:1px solid var(--li);align-self:flex-start}
.blase.ich{align-self:flex-end;background:var(--gruen-h);border-color:transparent}
.blase .von{font-size:12px;color:var(--lei);margin-bottom:2px}
.blase img{display:block;max-width:100%;border-radius:10px;margin-top:6px}
.gelesen{align-self:flex-end;font-size:12px;color:var(--lei);margin-top:-4px}
.schreiben{flex-direction:row;position:sticky;bottom:calc(var(--nav) + env(safe-area-inset-bottom));background:var(--bg);padding:8px 0;display:flex;gap:8px;align-items:flex-end}
.schreiben textarea{min-height:44px;height:44px;flex:1}
.schreiben label.foto{flex-direction:row;font-size:20px;flex:0 0 44px;height:44px;border:1px solid var(--li);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--fl)}
.schreiben label.foto input{display:none}
.schreiben button{flex:0 0 auto;height:44px;padding:0 14px}
.tabs{display:flex;gap:6px;margin:6px 0 10px}.tabs button{flex:1;background:var(--fl);color:var(--ak);border:1px solid var(--li);padding:8px}.tabs button.aktiv{background:var(--ak);color:#fff;border-color:var(--ak)}
/* gate */
.tor-knopf{width:100%;padding:28px 16px;font-size:22px;border-radius:18px;margin:16px 0}
/* water */
.zaehler{background:var(--fl);border:1px solid var(--li);border-left:6px solid var(--ak);border-radius:14px;padding:12px 14px;margin:16px 0;display:flex;flex-direction:column;gap:10px}
.zaehler-foto{font-weight:600;font-size:14px}.zaehler td{padding:6px 10px 6px 0;vertical-align:middle}.zaehler td:nth-child(3){white-space:nowrap;padding-right:0}
.zaehler td.loesch-zelle{text-align:right;width:1%;padding:4px 0 4px 10px}.zaehler td.loesch-zelle button{padding:5px 9px;font-size:13px}.zaehler details summary{cursor:pointer;color:var(--ak);font-size:14px;font-weight:600;padding:2px 0}
.zaehler-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}.zaehler-kopf b{font-size:18px}
.zaehler-feld{flex-direction:row;align-items:center;gap:6px;font-weight:600;flex:0 0 auto}.zaehler-feld input{width:8.5em;text-align:right}
.zaehler table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}.zaehler td{padding:3px 0;border-top:1px solid var(--li)}
.zaehler td:last-child{text-align:right}
/* list of settings rows */
.zeilen .z{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--li)}
.eintrag .besch{font-size:14px;padding:8px 10px}.eintrag .rechnung{margin-top:6px;font-size:14px}
.eintrag button.weg:disabled{opacity:.35}
/* pull to refresh: the usual round arrow, turns while pulling, spins while loading */
#zieh{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 34px);margin-left:-20px;width:40px;height:40px;border-radius:50%;
  background:var(--fl);box-shadow:0 2px 8px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;z-index:4;opacity:0;
  transform:translateY(0);pointer-events:none}
#zieh svg{width:22px;height:22px;fill:none;stroke:var(--lei);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#zieh.bereit svg{stroke:var(--ak)}
#zieh.dreht svg{stroke:var(--ak);animation:kgvdreh .8s linear infinite}
@keyframes kgvdreh{to{transform:rotate(360deg)}}
.tabs.bretter{overflow-x:auto;flex-wrap:nowrap;margin-top:2px}
.tabs.bretter a{flex:0 0 auto;padding:7px 12px;border:1px solid var(--li);border-radius:18px;background:var(--fl);color:var(--ak);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.tabs.bretter a.aktiv{background:var(--ak);color:#fff;border-color:var(--ak)}
.zahl-klein{display:inline-block;background:var(--fehler);color:#fff;border-radius:9px;font-size:11px;padding:0 6px;margin-left:2px}
.blase .loesch{color:var(--lei);text-decoration:none;margin-left:4px}
table.stunden{width:100%;border-collapse:collapse;font-size:14px;background:var(--fl);border-radius:12px;overflow:hidden}
table.stunden th{font-size:12px;color:var(--lei);text-align:left;padding:6px 6px;border-bottom:1px solid var(--li)}
table.stunden td{padding:5px 6px;border-bottom:1px solid var(--li);white-space:nowrap}
table.stunden td.balken{width:30%}table.stunden td.balken span{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#8fb63c,#e0a020)}
/* start page: signage slides like on the screen at the club house */
.signage{position:relative;margin-top:14px;background:transparent;border:0;border-radius:16px;overflow:hidden;min-height:360px}
.signage .folie{position:absolute;inset:0 0 26px 0;opacity:0;transition:opacity .6s;background:var(--bg);display:flex;flex-direction:column}
.signage .folie.an{opacity:1;position:relative;inset:auto}
.signage .folie img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover}
.signage .folie-text{padding:12px 14px}.signage .folie-text b{font-size:18px}
.signage .folie-text p{margin:6px 0 0;white-space:pre-line;font-size:15px}
.signage .punkte{display:flex;justify-content:center;gap:6px;padding:8px 0 10px}
.signage .punkte i{width:7px;height:7px;border-radius:50%;background:var(--li);cursor:pointer}.signage .punkte i.an{background:var(--ak)}
.folie-html{font-size:15px;margin-top:6px}.folie-html h1,.folie-html h2,.folie-html h3,.folie-html h4{font-size:17px;margin:4px 0}
.folie-html p{margin:6px 0}.folie-html span[style*="background"]{padding:1px 6px;border-radius:4px;display:inline-block;margin:2px 0}
.wetter .tag.gewaehlt{background:rgba(106,154,78,.22);box-shadow:inset 0 0 0 2px var(--ak)}
.stunden td.wind{white-space:nowrap}.stunden .wetter-pfeil{vertical-align:-3px}
.stunden td.balken.sonne{width:22%}.stunden td.balken.sonne span{background:#f2b632}
.stunden td.min{white-space:nowrap;font-size:13px;color:var(--lei)}
.testknoepfe{display:flex;flex-direction:column;gap:8px}
.version{text-align:center;margin-top:28px}

/* 2.9: unread on the start page, copies in the board channel, device rename, weather review */
.verpasst h2{margin-top:6px}
.karte.gross{padding:16px}.karte.gross b{font-size:18px}
.blase.kopie{border-style:dashed}
.kopie-kopf{display:block;font-size:12px;font-weight:600;color:var(--warn);text-decoration:none;margin-bottom:2px}
.geraete .z{gap:8px}.geraete .gname{min-width:0;overflow-wrap:anywhere}
form.umbenennen{width:100%;margin:4px 0}
.rb-jahre{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0}
.rb-farbe{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--li)}
.rb-diagramm{width:100%;height:auto;background:var(--fl);border:1px solid var(--li);border-radius:12px;margin:8px 0}
.rb-diagramm text{font-size:10px;fill:var(--lei)}.rb-diagramm .gitter{stroke:var(--li);stroke-width:1}
.rb-tabelle{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0}
.rb-tabelle th,.rb-tabelle td{padding:5px 8px;border-bottom:1px solid var(--li);text-align:right}
.rb-tabelle td:first-child,.rb-tabelle th:first-child{text-align:left}
.rb-tabelle tr.summe td{font-weight:700;border-top:2px solid var(--li)}

/* 2.13: slide approval in the channel Vorstand */
.folie-kopf{display:block;font-size:12px;font-weight:600;text-decoration:none;margin-bottom:2px;color:var(--warn)}
.folie-kopf.frei{color:var(--ak)}.folie-kopf.weg{color:var(--lei)}
.folie-ansicht h2{margin:8px 0 4px}.folie-ansicht .bild{width:100%;border-radius:10px}