/* Schriften lokal ausgeliefert - keine Verbindung zu Google.
   Newsreader Variable (SIL OFL), Atkinson Hyperlegible (SIL OFL), IBM Plex Mono (SIL OFL).
   Lizenztexte liegen in /schrift/. Latin-Teilmenge, deutsche Umlaute enthalten. */
@font-face{font-family:"Newsreader";src:url(/schrift/newsreader-var.woff2) format("woff2-variations");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/schrift/atkinson-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/schrift/atkinson-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/schrift/plexmono-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/schrift/plexmono-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* seewettervorhersage.de
   Komplementaerpaar: Markenorange #FF9500 gegen Seeblau #0B6FA4.
   Kartenmagenta bleibt als Warn- und Hinweisfarbe (Seekartenkonvention). */
:root{
  --himmel:#D9EAF4; --flach:#B9DCEE; --blatt:#FFFDF7; --papier:#F5E9D2;
  --linie:#B9CFDC; --linie-warm:#DCC9A6;
  --tinte:#0E2C3D; --tinte-leise:#4B6B7C;
  --blau:#0B6FA4; --blau-tief:#08517A;
  --magenta:#B81E7D; --sonne:#FFCC00; --brandung:#FF9500;
  --stark:#A8352A; --gruen:#2E7D32; --maxw:800px;
}
html[data-nacht]{
  --himmel:#08151D; --flach:#123043; --blatt:#0F2532; --papier:#18291F;
  --linie:#20404F; --linie-warm:#2E4038;
  --tinte:#E2EDF2; --tinte-leise:#87A4B2;
  --blau:#5FB4DC; --blau-tief:#8ECBEB; --magenta:#F06CB8;
  --stark:#F0857A; --gruen:#7CC47F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--himmel);color:var(--tinte);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.62}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
a{color:var(--blau-tief)}
img{max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--magenta);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important;animation:none!important}}

.kopfleiste{background:var(--tinte)}
html[data-nacht] .kopfleiste{background:#050F15}
.kopfinhalt{display:flex;align-items:center;gap:12px;padding:10px 0}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none}
.marke img{width:36px;height:36px;display:block;border-radius:8px}
.marke .wort{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:19px;color:#F5E9D2;line-height:1.1}
.marke .wort small{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sonne);font-weight:400}
nav{margin-left:auto;display:flex;gap:16px;font-size:14.5px;flex-wrap:wrap}
nav a{color:rgba(245,233,210,.74);text-decoration:none;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--sonne)}
.nachtknopf{margin-left:8px;border:1px solid rgba(245,233,210,.28);background:none;color:#F5E9D2;
  border-radius:999px;width:32px;height:32px;cursor:pointer;font-size:14px;line-height:1;flex:none}
.nachtknopf:hover{border-color:var(--sonne);color:var(--sonne)}

.hero{position:relative;background:linear-gradient(177deg,var(--sonne) 0%,var(--brandung) 100%);overflow:hidden}
html[data-nacht] .hero{background:linear-gradient(177deg,#8A5A10 0%,#6B3A05 100%)}
.hero-sonne{position:absolute;right:-50px;top:-80px;width:330px;height:330px;border-radius:50%;
  background:rgba(255,255,255,.2);pointer-events:none}
.hero-inhalt{position:relative;padding:36px 0 72px}
.hero h1{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(29px,6vw,46px);
  line-height:1.08;letter-spacing:-.015em;margin:0 0 12px;color:#5A2E00;max-width:17ch}
html[data-nacht] .hero h1{color:#FFE9BE}
.hero p{margin:0 0 18px;max-width:48ch;color:#6A3200;font-size:17.5px}
html[data-nacht] .hero p{color:#FFDFA4}
.stand{display:flex;flex-wrap:wrap;gap:4px 22px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;color:#6E2F00}
html[data-nacht] .stand{color:#FFDFA3}
.stand b{font-weight:600}
.hero-welle{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:52px;display:block;color:var(--himmel)}

.krume{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--tinte-leise);padding:14px 0 0;margin:0}
.krume a{color:var(--tinte-leise);text-decoration:none}
.krume a:hover{color:var(--magenta)}

.leiste{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 18px}
.umschalter{display:inline-flex;border:1.5px solid var(--tinte);border-radius:3px;overflow:hidden;background:var(--blatt)}
.umschalter button{border:0;background:none;cursor:pointer;padding:7px 15px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.04em;
  color:var(--tinte-leise);text-transform:uppercase}
.umschalter button[aria-pressed="true"]{background:var(--tinte);color:var(--blatt)}
html[data-nacht] .umschalter button[aria-pressed="true"]{color:#08151D}

.warnung{display:flex;gap:13px;align-items:flex-start;background:var(--blatt);
  border:1.5px solid var(--magenta);border-radius:3px;padding:13px 16px;margin-bottom:26px}
.warnung svg{flex:none;color:var(--magenta);margin-top:2px}
.warnung b{color:var(--magenta)}

.tag{margin-bottom:4px}
.tagkopf{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--tinte);padding-bottom:5px}
.tagkopf h2{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:26px;margin:0}
.tagkopf .gueltig{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--tinte-leise);margin-left:auto}
.liste{background:var(--blatt);border:1px solid var(--linie);border-top:0}
.gebiet{display:grid;grid-template-columns:1fr auto;gap:3px 18px;padding:15px 18px;border-top:1px solid var(--linie)}
.gebiet:first-child{border-top:0}
.gebiet:hover{background:var(--flach)}
.gname{grid-column:1;align-self:center;font-size:17px;font-weight:700}
.gname a{color:var(--tinte);text-decoration:none;border-bottom:1.5px solid transparent}
.gname a:hover{border-bottom-color:var(--magenta)}
.gwind{grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;align-items:center;gap:12px}
.feder{width:44px;height:44px;flex:none;color:var(--blau)}
.feder.stark{color:var(--stark)}
.bft{font-family:"IBM Plex Mono",ui-monospace,monospace;text-align:right;min-width:80px}
.bft .zahl{font-size:22px;font-weight:600;line-height:1.1;color:var(--blau)}
.bft.stark .zahl{color:var(--stark)}
.bft .ri{font-size:10.5px;color:var(--tinte-leise);letter-spacing:.05em;text-transform:uppercase;display:block}
.gdetail{grid-column:1;font-size:15px;color:var(--tinte-leise)}
.gdetail span{white-space:nowrap}
.gdetail span+span::before{content:"·";margin:0 7px;opacity:.55}
.gdetail .boe{color:var(--magenta);font-weight:700}

.wellenblock{margin:0 0 28px;padding-top:12px}
.welle{display:block;width:100%;height:50px;color:var(--blau)}
.welle-bu{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--tinte-leise);
  letter-spacing:.05em;text-transform:uppercase;margin:2px 0 0}

.lage{background:var(--blatt);border-left:4px solid var(--blau);padding:14px 17px;margin:0 0 24px;font-size:16px}
.lage b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blau-tief);display:block;margin-bottom:4px;font-weight:600}

#original{display:none}
#original .bericht,#original pre{background:var(--blatt);border:1px solid var(--linie);padding:20px;overflow-x:auto;
  white-space:pre-wrap;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;line-height:1.6;margin:0 0 28px}

.anzeige{margin:0 0 32px;min-height:104px}
.anzeige.geladen{border:0;min-height:0;display:block;padding:0}
.anzeige ins{display:block}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:13px;margin-bottom:34px}
.kachel{background:var(--blatt);border:1px solid var(--linie);border-left:4px solid var(--magenta);
  padding:15px 17px;text-decoration:none;color:var(--tinte);display:block}
.kachel:hover{background:var(--flach)}
.kachel .label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinte-leise);margin-bottom:5px}
.kachel .wert{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:28px;font-weight:600;line-height:1.1}
.kachel .zusatz{font-size:13px;color:var(--tinte-leise);margin-top:3px}

.abschnitt{margin-bottom:36px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--magenta);margin:0 0 5px}
.abschnitt h2{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:29px;margin:0 0 6px;line-height:1.15}
.abschnitt .intro{color:var(--tinte-leise);margin:0 0 20px;max-width:58ch}

.kartenrahmen{border:1px solid var(--linie);background:var(--flach)}
#karte{height:360px;width:100%}
.kartenladen{height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:24px;background:var(--flach)}
.kartenladen p{margin:0;font-size:14.5px;color:var(--tinte-leise);max-width:46ch}
.kartenknopf{border:1.5px solid var(--tinte);background:var(--blatt);color:var(--tinte);cursor:pointer;
  padding:9px 20px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.kartenknopf:hover{background:var(--tinte);color:var(--blatt)}
.kartenquelle{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;color:var(--tinte-leise);
  padding:7px 10px;border-top:1px solid var(--linie);background:var(--blatt);line-height:1.5}

.ratgeber{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie)}
.ratgeber a{background:var(--blatt);padding:16px 18px;text-decoration:none;color:var(--tinte);display:block}
.ratgeber a:hover{background:var(--flach)}
.ratgeber .nr{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;color:var(--magenta);
  letter-spacing:.09em;display:block;margin-bottom:5px;text-transform:uppercase}
.ratgeber h3{font-size:16.5px;margin:0 0 3px;font-weight:700;line-height:1.3}
.ratgeber p{font-size:13.5px;color:var(--tinte-leise);margin:0;line-height:1.5}

.text{max-width:67ch}
.text h2{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:26px;margin:34px 0 8px;line-height:1.2}
.text h3{font-size:18.5px;margin:24px 0 4px}
.text p{margin:0 0 16px}
.text ul,.text ol{margin:0 0 16px;padding-left:22px}
.text li{margin-bottom:7px}
.definition{background:var(--papier);border-left:4px solid var(--brandung);padding:15px 18px;
  margin:0 0 26px;font-size:17.5px}
.hinweis{background:var(--blatt);border-left:4px solid var(--blau);padding:13px 17px;margin:0 0 24px;font-size:15.5px}
.tabelle{width:100%;border-collapse:collapse;background:var(--blatt);border:1px solid var(--linie);
  margin:0 0 24px;font-size:15px}
.tabelle th,.tabelle td{padding:9px 12px;text-align:left;border-top:1px solid var(--linie)}
.tabelle thead th{background:var(--tinte);color:var(--blatt);border:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
html[data-nacht] .tabelle thead th{color:#08151D}
.tabelle tbody tr:hover{background:var(--flach)}
.tabelle .bf{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;color:var(--blau);width:1%}
.tabelle tr[data-stark] .bf{color:var(--stark)}
.tabelle td.zahl{font-family:"IBM Plex Mono",ui-monospace,monospace;white-space:nowrap}
.tabellenrolle{overflow-x:auto;margin:0 0 24px}
.tabellenrolle .tabelle{margin:0;min-width:520px}

.schein{background:var(--blatt);border:1.5px solid var(--tinte)}
.schein-kopf{background:var(--tinte);color:#F5E9D2;padding:13px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html[data-nacht] .schein-kopf{background:#050F15}
.schein-kopf b{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:19px}
.schein-kopf .fortschritt{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;opacity:.82}
.themenwahl{display:flex;flex-wrap:wrap;gap:6px;padding:14px 20px;background:var(--papier);border-bottom:1px solid var(--linie-warm)}
.themenwahl button{border:1.5px solid var(--linie-warm);background:var(--blatt);cursor:pointer;
  padding:6px 13px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--tinte-leise)}
.themenwahl button[aria-pressed="true"]{background:var(--tinte);color:var(--blatt);border-color:var(--tinte)}
html[data-nacht] .themenwahl button[aria-pressed="true"]{color:#08151D}
.schein-koerper{padding:20px}
.frage{font-size:18.5px;font-weight:700;margin:0 0 16px;line-height:1.45}
.antworten{display:grid;gap:8px;margin-bottom:14px}
.antwort{display:block;width:100%;text-align:left;border:1.5px solid var(--linie);background:var(--himmel);
  padding:12px 15px;cursor:pointer;font-family:inherit;font-size:15.5px;color:var(--tinte);line-height:1.4}
.antwort:hover{border-color:var(--tinte)}
.antwort.richtig{border-color:var(--gruen);background:#E7F3E7;color:#1B4D1F}
.antwort.falsch{border-color:var(--stark);background:#FBEAE8;color:#7A241B}
html[data-nacht] .antwort.richtig{background:#17311A;color:#B7DFB8}
html[data-nacht] .antwort.falsch{background:#3A1A16;color:#F5BDB6}
.antwort .marke-a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;margin-right:10px;color:var(--magenta)}
.rueckmeldung{font-size:15px;color:var(--tinte-leise);margin:0;min-height:1.6em;line-height:1.55}
.schein-fuss{display:flex;gap:12px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--linie);
  padding:14px 20px;background:var(--papier)}
.schein-fuss .hinweis{font-size:13px;color:var(--tinte-leise);margin:0;flex:1;min-width:210px;background:none;border:0;padding:0}
.knopf{border:0;background:var(--blau-tief);color:#fff;cursor:pointer;padding:10px 20px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.knopf:hover{filter:brightness(1.15)}
html[data-nacht] .knopf{color:#08151D}

footer{background:var(--tinte);color:rgba(245,233,210,.76);margin-top:44px;padding:30px 0 38px}
html[data-nacht] footer{background:#050F15;color:rgba(226,237,242,.7)}
footer p{font-size:13.5px;margin:0 0 10px;max-width:68ch}
footer a{color:var(--sonne)}
footer b{color:#F5E9D2}
.fussnav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:14px;font-size:14px}

body.appmodus .kopfleiste,body.appmodus footer,body.appmodus .hero,
body.appmodus .anzeige,body.appmodus .krume{display:none!important}
body.appmodus{background:var(--blatt)}
body.appmodus main{padding-top:14px}

@media (max-width:640px){
  .kopfinhalt{flex-wrap:wrap}
  nav{order:3;width:100%;margin:6px -22px 0;padding:8px 22px 2px;gap:18px;
      overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  .marke .wort{font-size:17px}
  .gebiet{padding:13px 15px}
  .feder{width:38px;height:38px}
  .tagkopf .gueltig{display:none}
}

/* Schalter, mit dem sich Googles Einwilligungsdialog erneut oeffnen laesst */
.widerruf{background:none;border:0;color:var(--sonne);cursor:pointer;font:inherit;
  text-decoration:underline;padding:0}

/* ── Schlanke App-Ansicht: nur der Originalbericht ── */
.app-titel{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:23px;margin:2px 0 2px}
.app-stand{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  color:var(--tinte-leise);margin:0 0 14px}
.bericht{background:var(--blatt);border:1px solid var(--linie);border-radius:3px;
  padding:16px 17px;margin:0 0 16px;white-space:pre-wrap;overflow-wrap:break-word;
  font-size:16px;line-height:1.62}
.bericht b{font-weight:700;color:var(--tinte)}
.app-fuss{font-size:12.5px;color:var(--tinte-leise);margin:0 0 26px;line-height:1.55}

.fussapp{margin-bottom:12px}
.fussapp a{white-space:nowrap}

.mailto{display:inline-flex;align-items:center;gap:6px}
.mailicon{flex:none;vertical-align:-2px}

.kartenbild{margin:0 0 26px;background:var(--blatt);border:1px solid var(--linie);padding:10px}
.kartenbild img{display:block;width:100%;height:auto;background:#fff}
.kartenbild figcaption{font-size:12.5px;color:var(--tinte-leise);margin-top:9px;line-height:1.5}

/* ── Fragentrainer: Quellenwahl und Abbildungen ── */
.quellwahl{display:flex;gap:6px;padding:14px 20px 0;background:var(--papier);flex-wrap:wrap}
.quellwahl button{border:1.5px solid var(--linie-warm);background:var(--blatt);cursor:pointer;
  padding:8px 14px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  color:var(--tinte-leise);min-height:40px}
.quellwahl button[aria-pressed="true"]{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.fragebild{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.fragebild img{max-height:120px;width:auto;background:#fff;border:1px solid var(--linie);padding:6px}

/* ── Mobil: größere Tippflächen, ruhigere Tabellen, weniger Gedränge ── */
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  nav a{padding:6px 0;min-height:34px;display:inline-flex;align-items:center}
  .hero-inhalt{padding:26px 0 60px}
  .hero p{font-size:16.5px}
  .antwort{padding:14px 15px;min-height:52px}
  .themenwahl button,.quellwahl button{min-height:42px;padding:9px 13px}
  .knopf,.kartenknopf,.umschalter button{min-height:44px}
  .kachel{padding:14px 15px}
  .ratgeber a{padding:15px 16px}
  .tabelle{font-size:14.5px}
  .tabelle th,.tabelle td{padding:8px 9px}
  .tabellenrolle .tabelle{min-width:0}
  .tabellenrolle{margin-left:-16px;margin-right:-16px;padding:0 16px}
  .text{max-width:none}
  .bericht{padding:14px 13px;font-size:15.5px}
  .fragebild img{max-height:96px}
  footer{padding:24px 0 30px}
  .fussnav{gap:8px 14px}
}
@media (max-width:400px){
  .bft{min-width:66px}
  .bft .zahl{font-size:19px}
  .gname{font-size:15.5px}
}