/* Schaltzentrale Alle an Deck – Grundgestaltung. Systemschriften (keine Google Fonts, DSGVO). */
:root,[data-schema="glas"]{
  --akzent:#4C63E6; --akzent-hell:rgba(76,99,230,.12); --text:#1A1F36; --leise:#4E5668; --blass:#7D8597;
  --karte:rgba(255,255,255,.74); --menue:rgba(255,255,255,.80); --feld:rgba(255,255,255,.85);
  --rand:rgba(255,255,255,.55); --linie:rgba(26,31,54,.10); --hover:rgba(255,255,255,.6);
  --unschaerfe:blur(18px) saturate(140%);
  --rot:#D92D20; --rot-hell:rgba(254,228,226,.85); --rot-rand:rgba(217,45,32,.25);
  --gelb:#C77A06; --gelb-hell:rgba(255,243,214,.85); --gelb-rand:rgba(199,122,6,.25);
  --gruen:#0B6B4F; --gruen-hell:rgba(220,244,234,.85);
  --radius:18px; --schatten:0 10px 30px rgba(16,24,40,.18);
}
[data-schema="sand"]{
  --akzent:#1F6E7E; --akzent-hell:#E2EEEF; --text:#2B2620; --leise:#6B6257; --blass:#A0968A;
  --karte:#FAF6F0; --menue:#FAF6F0; --feld:#FFFDF9;
  --rand:#ECE3D6; --linie:#ECE3D6; --hover:#F1EADF; --unschaerfe:none;
  --rot:#C4442F; --rot-hell:#FBEAE4; --rot-rand:#F2CFC4;
  --gelb:#B9770B; --gelb-hell:#FBF1DC; --gelb-rand:#F0DDB4;
  --gruen:#2F7A55; --gruen-hell:#E4F1E8;
}
[data-schema="abend"]{
  --akzent:#8FA2FF; --akzent-hell:rgba(143,162,255,.18); --text:#F3F5FB; --leise:#C3C9D9; --blass:#8E96AC;
  --karte:rgba(20,26,50,.58); --menue:rgba(20,26,50,.66); --feld:rgba(255,255,255,.10);
  --rand:rgba(255,255,255,.14); --linie:rgba(255,255,255,.12); --hover:rgba(255,255,255,.10);
  --unschaerfe:blur(18px) saturate(140%);
  --rot:#FF8A7A; --rot-hell:rgba(217,45,32,.22); --rot-rand:rgba(255,138,122,.35);
  --gelb:#FFC861; --gelb-hell:rgba(220,139,11,.20); --gelb-rand:rgba(255,200,97,.30);
  --gruen:#6FD3A8; --gruen-hell:rgba(11,107,79,.30);
  --schatten:0 10px 30px rgba(0,0,0,.30); --m-aktiv-text:#141A32;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);background:#1d2540;font-size:15px;line-height:1.45}
a{color:var(--akzent)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Hintergrundfoto mit leichter Abdunklung */
.foto{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--foto-oben,rgba(15,20,40,.25)),var(--foto-unten,rgba(15,20,40,.55))),var(--foto) center/cover no-repeat}

.rahmen{display:flex;min-height:100vh;gap:20px;padding:20px}

/* Menue links */
.menue{width:248px;flex:none;background:var(--menue);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);
  border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);display:flex;flex-direction:column;padding:18px 14px;
  position:sticky;top:20px;height:calc(100vh - 40px);overflow-y:auto}
.marke{display:flex;align-items:center;gap:10px;padding:2px 6px 16px}
.marke strong{display:block;font-size:16px}
.marke span{display:block;font-size:12px;color:var(--leise)}
.marke-zeichen{width:36px;height:36px;border-radius:10px;background:var(--akzent);color:#fff;display:grid;place-items:center;font-weight:700}
.menue nav{display:flex;flex-direction:column;gap:2px;flex:1}
.menue nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:500}
.menue nav a:hover{background:var(--hover)}
.menue nav a.aktiv{background:var(--akzent);color:#fff}
.menue nav a.bald{color:var(--blass)}
.menue-trenner{margin:14px 12px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--blass)}
.menue-fuss{border-top:1px solid var(--linie);padding-top:12px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.person{display:flex;align-items:center;gap:10px;min-width:0}
.person strong{display:block;font-size:14px}
.person span{display:block;font-size:12px;color:var(--leise)}
.kreis{width:34px;height:34px;border-radius:50%;background:var(--akzent-hell);color:var(--akzent);display:grid;place-items:center;font-weight:700}
.menue-zu,.menue-auf{display:none}

/* Inhalt */
.inhalt{flex:1;min-width:0}
.kopf{display:flex;align-items:center;gap:16px;color:#fff;padding:6px 4px 18px}
.kopf-text{flex:1}
.kopf h1{margin:0;font-size:28px;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.kopf p{margin:2px 0 0;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.webcam-mini{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:12px;padding:6px 12px 6px 6px;cursor:pointer;backdrop-filter:blur(8px);font:inherit}
.webcam-mini img{width:56px;height:34px;object-fit:cover;border-radius:8px}
.webcam-mini svg{width:34px;height:26px;padding:3px}
.webcam-mini:hover{background:rgba(255,255,255,.28)}

.karte{background:var(--karte);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);
  border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:20px}
.karte-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.karte h2{margin:0;font-size:17px}
.leise{color:var(--leise);font-size:13px}

.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.zahl span{display:block;color:var(--leise);font-size:13px}
.zahl strong{display:block;font-size:32px;line-height:1.15;margin:4px 0}
.zahl small{color:var(--leise)}
.zahl.warn strong{color:var(--rot)}
.zahl.leer strong{color:var(--blass)}

.raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:16px}
.aufgaben{display:flex;flex-direction:column}
.aufgaben .alles-klar{flex:1;display:grid;place-items:center}

/* Aufgaben */
.marke-zahl{background:var(--akzent-hell);color:var(--akzent);font-weight:700;border-radius:20px;padding:2px 10px;font-size:13px}
.aufgabenliste{list-style:none;margin:0;padding:0}
.aufgabenliste li{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;margin-bottom:6px;border:1px solid var(--linie)}
.aufgabenliste li.stufe-rot{background:var(--rot-hell);border-color:var(--rot-rand)}
.aufgabenliste li.stufe-gelb{background:var(--gelb-hell);border-color:var(--gelb-rand)}
.aufgabenliste form{margin:0}
.aufgabe-text{flex:1;min-width:0}
.aufgabe-text strong{display:block;font-weight:600}
.aufgabe-text small{color:var(--leise)}
.aufgabe-text em{color:var(--rot);font-style:normal;font-weight:600}
.punkt{width:10px;height:10px;border-radius:50%;flex:none}
.stufe-rot .punkt{background:var(--rot)}
.stufe-gelb .punkt{background:var(--gelb)}
.haken{width:26px;height:26px;border-radius:8px;border:2px solid var(--blass);background:var(--feld);cursor:pointer;padding:0;display:grid;place-items:center}
.haken:hover:not(:disabled){border-color:var(--gruen);background:var(--gruen-hell)}
.haken:hover:not(:disabled) span{width:10px;height:6px;border-left:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:rotate(-45deg) translate(1px,-1px)}
.haken:disabled{opacity:.45;cursor:not-allowed}
.alles-klar{padding:22px;text-align:center;color:var(--gruen);background:var(--gruen-hell);border-radius:12px;font-weight:600}
details{margin-top:14px}
summary{cursor:pointer;color:var(--akzent);font-weight:600}
.erledigt ul{list-style:none;padding:0;margin:8px 0 0}
.erledigt li{padding:4px 0;color:var(--leise)}
.neu-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.neu-form input{flex:1 1 220px}
input,select{font:inherit;padding:9px 11px;border:1px solid var(--rand);border-radius:10px;background:var(--feld);color:var(--text)}
input:focus,select:focus{outline:2px solid var(--akzent);outline-offset:-1px}

.knopf{display:inline-block;background:var(--akzent);color:#fff;border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.knopf:hover{filter:brightness(1.08)}
.knopf.breit{width:100%}
.knopf-leise{background:none;border:1px solid var(--rand);border-radius:10px;padding:6px 10px;font:inherit;font-size:13px;color:var(--leise);cursor:pointer}
.knopf-leise:hover{background:var(--hover)}

/* Webcam */
.webcam-karte{cursor:pointer}
.cam-bild{border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#0f1630}
.cam-bild img{width:100%;height:100%;object-fit:cover;display:block}
.cam-leer{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#AEB7D0;font-size:14px;
  background:linear-gradient(180deg,rgba(15,20,40,.35),rgba(15,20,40,.7)),var(--foto) center/cover}
.cam-leer svg{width:36px;height:36px}

.schnell{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.schnell a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1px solid var(--linie);border-radius:14px;background:var(--feld);color:var(--text);text-align:center;text-decoration:none;font-weight:500;font-size:14px}
.schnell a:hover{border-color:var(--akzent);color:var(--akzent)}
.schnell svg{width:24px;height:24px}

/* Meldungen */
.meldungen{margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.meldung{padding:10px 14px;border-radius:12px;background:var(--karte);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);box-shadow:var(--schatten);border-left:4px solid var(--akzent)}
.meldung.success{border-left-color:var(--gruen)}
.meldung.error{border-left-color:var(--rot);background:var(--rot-hell)}

.bald-karte{max-width:560px}
.bald-karte p{color:var(--leise)}
.system-karte{max-width:560px}
.system-karte table{width:100%;border-collapse:collapse}
.system-karte td{padding:8px 0;border-bottom:1px solid var(--linie)}
.system-karte td:first-child{color:var(--leise);width:45%}
.gut{color:var(--gruen);font-weight:600}.schlecht{color:var(--rot);font-weight:600}

/* Anmeldung */
.anmelde-rahmen{min-height:100vh;display:grid;place-items:center;padding:20px}
.anmelde-karte{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;padding:28px}
.anmelde-karte label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}

/* Vollbild: Webcam und Bildschirmschoner */
.vollbild{position:fixed;inset:0;z-index:100;background:linear-gradient(180deg,rgba(10,14,30,.35),rgba(10,14,30,.75)),var(--foto) center/cover;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;color:#fff;cursor:pointer;padding:24px}
.vollbild[hidden]{display:none}
.vollbild-uhr{text-align:center;text-shadow:0 2px 16px rgba(0,0,0,.5)}
#uhr{font-size:72px;font-weight:700;letter-spacing:.02em;line-height:1}
#uhr-datum{font-size:20px;opacity:.9;margin-top:6px}
.vollbild-cam{width:min(960px,92vw);aspect-ratio:16/9;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.vollbild-cam img{width:100%;height:100%;object-fit:cover;display:block}
.vollbild-hinweis{opacity:.75;font-size:14px}
.vollbild-cam{position:relative;background:#0f1630;cursor:default}
.standbild,.live{position:absolute;inset:0}
.standbild[hidden],.live[hidden]{display:none}
.standbild{cursor:pointer}
.live > div,.live [data-player]{width:100%!important;height:100%!important}
.live video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.vollbild.mit-video{gap:14px}
.vollbild.mit-video .vollbild-cam{width:min(1400px,94vw,calc((100vh - 170px) * 16 / 9))}
.vollbild.mit-video #uhr{font-size:40px}
.vollbild.mit-video #uhr-datum{font-size:15px}
.vollbild-zu{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.3);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.vollbild-zu:hover{background:rgba(0,0,0,.5)}

/* Tablet und Handy */
@media (max-width:1100px){.kennzahlen{grid-template-columns:repeat(2,1fr)}.raster{grid-template-columns:minmax(0,1fr)}.schnell{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .rahmen{padding:12px;gap:0}
  .menue{position:fixed;left:12px;top:12px;bottom:12px;height:auto;z-index:50;transform:translateX(-120%);transition:transform .2s}
  body.menue-offen .menue{transform:none}
  .menue-zu{display:block;margin-left:auto;background:none;border:0;font-size:26px;color:var(--leise);cursor:pointer}
  .menue-auf{display:block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;font-size:20px;padding:4px 10px;cursor:pointer}
  .kopf h1{font-size:22px}
  .webcam-mini span{display:none}
  #uhr{font-size:52px}
}
@media (max-width:480px){.schnell{grid-template-columns:repeat(2,minmax(0,1fr))}.kennzahlen{gap:10px}.zahl strong{font-size:26px}.karte{padding:16px}}
.webcam-karte{display:flex;flex-direction:column}
.webcam-karte .cam-bild{flex:1;min-height:200px}

/* Weitere Farbschemata: Menue mit eigener Farbe */
[data-schema="ostufer"]{
  --akzent:#17697A; --akzent-hell:#E1EFF1; --text:#1F2A30; --leise:#5D6970; --blass:#9AA5AB;
  --karte:#FFFCF7; --menue:#134E5E; --feld:#FFFFFF; --rand:rgba(255,255,255,.6); --linie:#EAE3D8; --hover:#F3EEE6;
  --unschaerfe:none; --rot:#C8102E; --rot-hell:#FDECEC; --rot-rand:#F5C9CE;
  --gelb:#C27A0E; --gelb-hell:#FDF3DF; --gelb-rand:#F2DDB2; --gruen:#1E7A57; --gruen-hell:#E3F2EA;
  --m-text:#EAF4F6; --m-leise:#A9C6CC; --m-blass:#7FA3AB; --m-hover:rgba(255,255,255,.10); --m-linie:rgba(255,255,255,.15);
  --m-aktiv:#E8604C; --m-aktiv-text:#FFFFFF; --m-zeichen:#C8102E; --m-kreis:rgba(255,255,255,.15); --m-kreis-text:#FFFFFF;
}
[data-schema="hafen"]{
  --akzent:#2479B5; --akzent-hell:#E3EEF7; --text:#162236; --leise:#56627A; --blass:#98A2B6;
  --karte:#F4F7FB; --menue:#14233F; --feld:#FFFFFF; --rand:rgba(255,255,255,.7); --linie:#DFE6EF; --hover:#E9EFF6;
  --unschaerfe:none; --rot:#D23B2B; --rot-hell:#FCEBE8; --rot-rand:#F4CBC5;
  --gelb:#C98510; --gelb-hell:#FDF4E1; --gelb-rand:#F2DDB0; --gruen:#1B7A5A; --gruen-hell:#E2F3EB;
  --m-text:#E6ECF7; --m-leise:#9FB0CC; --m-blass:#7184A6; --m-hover:rgba(255,255,255,.08); --m-linie:rgba(255,255,255,.12);
  --m-aktiv:#3BA3DE; --m-aktiv-text:#FFFFFF; --m-zeichen:#3BA3DE; --m-kreis:rgba(59,163,222,.25); --m-kreis-text:#FFFFFF;
  --foto-oben:rgba(8,25,55,.32); --foto-unten:rgba(8,25,55,.12);
}
[data-schema="sonne"]{
  --akzent:#D3602A; --akzent-hell:rgba(211,96,42,.12); --text:#2A1E1B; --leise:#6E5A54; --blass:#A8938C;
  --karte:rgba(255,247,240,.82); --menue:rgba(46,28,42,.74); --feld:rgba(255,255,255,.85);
  --rand:rgba(255,255,255,.55); --linie:rgba(80,40,30,.10); --hover:rgba(255,255,255,.55);
  --unschaerfe:blur(18px) saturate(140%); --rot:#C8382A; --rot-hell:rgba(253,228,222,.9); --rot-rand:rgba(200,56,42,.25);
  --gelb:#B97808; --gelb-hell:rgba(255,240,210,.9); --gelb-rand:rgba(185,120,8,.25); --gruen:#1E7552; --gruen-hell:rgba(222,243,232,.9);
  --m-text:#FBEDE6; --m-leise:#D6B9B0; --m-blass:#A98B86; --m-hover:rgba(255,255,255,.10); --m-linie:rgba(255,255,255,.14);
  --m-aktiv:#E8743B; --m-aktiv-text:#FFFFFF; --m-zeichen:#E8743B; --m-kreis:rgba(232,116,59,.25); --m-kreis-text:#FFFFFF;
  --foto-oben:rgba(40,15,20,.15); --foto-unten:rgba(40,15,30,.45);
}
[data-schema="see"]{
  --akzent:#0F8A8A; --akzent-hell:rgba(15,138,138,.12); --text:#12302F; --leise:#4D6766; --blass:#8EA6A5;
  --karte:rgba(240,250,249,.80); --menue:rgba(8,48,56,.76); --feld:rgba(255,255,255,.88);
  --rand:rgba(255,255,255,.55); --linie:rgba(15,60,60,.10); --hover:rgba(255,255,255,.55);
  --unschaerfe:blur(18px) saturate(140%); --rot:#CF3A2C; --rot-hell:rgba(253,229,225,.9); --rot-rand:rgba(207,58,44,.25);
  --gelb:#BA7A0A; --gelb-hell:rgba(255,242,212,.9); --gelb-rand:rgba(186,122,10,.25); --gruen:#16775A; --gruen-hell:rgba(220,243,234,.9);
  --m-text:#E4F4F3; --m-leise:#9CC4C2; --m-blass:#6E9B99; --m-hover:rgba(255,255,255,.09); --m-linie:rgba(255,255,255,.13);
  --m-aktiv:#2BB3A8; --m-aktiv-text:#FFFFFF; --m-zeichen:#2BB3A8; --m-kreis:rgba(43,179,168,.25); --m-kreis-text:#FFFFFF;
}
.menue{color:var(--m-text,var(--text))}
.menue nav a{color:var(--m-text,var(--text))}
.menue nav a:hover{background:var(--m-hover,var(--hover))}
.menue nav a.aktiv{background:var(--m-aktiv,var(--akzent));color:var(--m-aktiv-text,#fff)}
.menue nav a.bald,.menue .menue-trenner{color:var(--m-blass,var(--blass))}
.menue .marke span,.menue .person span{color:var(--m-leise,var(--leise))}
.menue .menue-fuss{border-top-color:var(--m-linie,var(--linie))}
.menue .knopf-leise{color:var(--m-leise,var(--leise));border-color:var(--m-linie,var(--rand))}
.menue .knopf-leise:hover{background:var(--m-hover,var(--hover))}
.menue .kreis{background:var(--m-kreis,var(--akzent-hell));color:var(--m-kreis-text,var(--akzent))}
.menue .marke-zeichen{background:var(--m-zeichen,var(--akzent))}
.menue .menue-zu{color:var(--m-leise,var(--leise))}

/* Globale Suche */
.suchfeld{position:relative;display:flex;align-items:center;width:min(380px,40vw)}
.suchfeld svg{position:absolute;left:12px;color:var(--leise);pointer-events:none}
.suchfeld input{width:100%;padding:10px 12px 10px 40px;border-radius:12px;border:1px solid var(--rand);
  background:var(--karte);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);box-shadow:var(--schatten)}
.suche-vorschau{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--karte);
  border:1px solid var(--rand);border-radius:14px;box-shadow:var(--schatten);padding:6px;max-height:70vh;overflow-y:auto;
  backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);color:var(--text)}
.suche-vorschau[hidden]{display:none}
.suche-vorschau a{display:block;padding:8px 10px;border-radius:10px;color:var(--text);text-decoration:none}
.suche-vorschau a:hover,.suche-vorschau a:focus{background:var(--hover);outline:none}
.suche-vorschau strong{display:block;font-weight:600;font-size:14px}
.suche-vorschau small{display:block;color:var(--leise);font-size:12px}
.vorschau-gruppe{padding:8px 10px 2px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--blass)}
.vorschau-leer{padding:10px;color:var(--leise)}
.suche-vorschau .vorschau-alle{margin-top:4px;border-top:1px solid var(--linie);border-radius:0 0 10px 10px;color:var(--akzent);font-weight:600;font-size:14px}
.suchseite{display:flex;flex-direction:column;gap:16px;max-width:900px}
.suchgruppe ul{list-style:none;margin:0;padding:0}
.suchgruppe li a{display:block;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none}
.suchgruppe li a:hover{background:var(--hover)}
.suchgruppe li strong{display:block;font-weight:600}
.suchgruppe li small{color:var(--leise)}
mark{background:rgba(255,200,60,.45);color:inherit;border-radius:3px;padding:0 1px}
.aufgabenliste li:target{outline:3px solid var(--akzent);outline-offset:2px}
@media (max-width:860px){.kopf{flex-wrap:wrap}.suchfeld{width:100%;order:3}}
.kachel-link{text-decoration:none;color:var(--text)}
.kachel-link:hover{outline:2px solid var(--akzent);outline-offset:-2px}
.live-hinweis{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;background:var(--karte);color:var(--text);
  border:1px solid var(--rand);border-radius:20px;padding:7px 14px;font-size:13px;box-shadow:var(--schatten)}
.live-hinweis[hidden]{display:none}

/* Hilfe-Blasen (tipps.js) */
.tipp-blase{position:fixed;z-index:9000;max-width:280px;padding:8px 11px;border-radius:9px;background:#1f2933;color:#fff;
  font-size:13px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.28);pointer-events:none;text-align:left}
.tipp-blase[hidden]{display:none}
.tipp-blase::after{content:"";position:absolute;left:var(--pfeil,50%);bottom:-5px;width:10px;height:10px;margin-left:-5px;
  background:#1f2933;transform:rotate(45deg)}
.tipp-blase.unten::after{bottom:auto;top:-5px}
.fuss-knoepfe{display:flex;align-items:center;gap:6px}
.tipp-schalter{width:32px;padding-left:0;padding-right:0;font-weight:700}
.tipp-schalter.aus{opacity:.45;text-decoration:line-through}
@media (hover:none){.tipp-schalter{display:none}}

/* Startseite: Tagesaufgaben | Auf dem Wasser | Webcam (Ralf 15.10.2026) */
.raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.raster.vier .webcam-karte{grid-column:span 2}
.wasser-karte{display:flex;flex-direction:column}
.wasser-karte .alles-klar{flex:1;display:grid;place-items:center;text-align:center}
.wasser-karte.aktiv{border:2px solid var(--akzent)}
.wasserliste{list-style:none;margin:0;padding:0}
.wasserliste li{margin-bottom:6px}
.wasserliste a{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:12px;border:1px solid var(--linie);
  background:var(--akzent-hell);text-decoration:none;color:var(--text)}
.wasserliste a:hover{outline:2px solid var(--akzent);outline-offset:-2px}
.wasserliste span{font-size:13px;color:var(--leise)}
.wasserliste small{font-size:12px;color:var(--akzent);font-weight:600}
.wasserliste li.alt a{background:var(--rot-hell);border-color:var(--rot-rand)}
.wasserliste li.alt small em{color:var(--rot);font-style:normal}
.wasser-link{margin-top:auto;padding-top:8px;align-self:flex-end}
.raster.vier .neu-form{flex-wrap:wrap}
.raster.vier .neu-form input{min-width:0;width:100%}
@media (max-width:1100px){.raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.raster.vier{grid-template-columns:minmax(0,1fr)}.raster.vier .webcam-karte{grid-column:auto}}

/* „?“ oben rechts → Anleitung zu dieser Seite */
.hilfe-knopf{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--akzent);color:#fff;
  font-weight:800;font-size:21px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.2);margin-left:auto}
.hilfe-knopf:hover{filter:brightness(1.1)}
.menue-zahl{margin-left:auto;background:var(--rot);color:#fff;font-weight:700;font-size:12px;border-radius:999px;padding:1px 8px;line-height:18px}