/* Layout: Kopf mit Revier/Tag/Zeit, dann Jetzt-Leiste, Briefing, Tagesverlauf, zwei Karten (Großwetterlage + Revier), Lernteil. Seekarten-Farben: Land sandgelb, Wasser blassblau. */
:root{
  color-scheme:light;
  --bg:#eef2f0; --surface:#ffffff; --ink:#06141f; --ink2:#465c6b; --muted:#75889a; --line:#d3dde4;
  --accent:#0b6e8f; --accent-soft:#d9edf3; --sea:#dcebf3; --land:#f0e4bd; --coast:#9a8a55; --iso:#27475f;
  --cloud:92,104,116; --high:#1f5fb0; --low:#c0392b; --warn:#a85508; --good:#256d45; --window:#fbe9a8;
  --w0:#b9dbe4; --w1:#86c3d3; --w2:#4ea6bf; --w3:#2289a8; --w4:#126a89; --w5:#08445c;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#06141f; --surface:#0b2132; --ink:#eef3f1; --ink2:#abbdc9; --muted:#7f95a3; --line:#1f3a50;
  --accent:#55b9d6; --accent-soft:#173646; --sea:#0a2236; --land:#33372a; --coast:#7d8058; --iso:#a8c6da;
  --cloud:200,210,220; --high:#74abf2; --low:#f08273; --warn:#f0a652; --good:#70c796; --window:#3a3413;
  --w0:#1f4a5a; --w1:#246a80; --w2:#2e8ca6; --w3:#4aadc6; --w4:#86cfdf; --w5:#cdeff6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#06141f; --surface:#0b2132; --ink:#eef3f1; --ink2:#abbdc9; --muted:#7f95a3; --line:#1f3a50;
  --accent:#55b9d6; --accent-soft:#173646; --sea:#0a2236; --land:#33372a; --coast:#7d8058; --iso:#a8c6da;
  --cloud:200,210,220; --high:#74abf2; --low:#f08273; --warn:#f0a652; --good:#70c796; --window:#3a3413;
  --w0:#1f4a5a; --w1:#246a80; --w2:#2e8ca6; --w3:#4aadc6; --w4:#86cfdf; --w5:#cdeff6; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body)}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:20px 48px;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(1.9rem,8vw,3rem);line-height:1;font-weight:400;text-transform:uppercase}
h2{font-size:19px;text-transform:uppercase;letter-spacing:.02em}
h3{font-size:16px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:13px}
header.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{font:600 14px var(--mono);letter-spacing:.02em;padding:8px 12px;border:0;background:transparent;color:var(--ink2);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--surface)}
.seg button[data-ev]{box-shadow:inset 0 -3px 0 var(--warn)}
.areas{margin:0;padding:0;list-style:none;font-size:14px;display:flex;flex-direction:column;gap:4px}
.areas b{font-family:var(--mono);font-weight:600}
button.act{font:600 14px var(--mono);letter-spacing:.02em;padding:8px 14px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);cursor:pointer}
button.ghost{background:var(--surface);color:var(--accent)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.55;cursor:default}
select{font:500 14px var(--body);padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.status{font-size:13px;color:var(--ink2);min-height:20px}
.status.err{color:var(--warn);font-weight:500}
section.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.phead{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between}
.now{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 20px}
.now .v{font:600 30px/1.05 var(--mono);font-variant-numeric:tabular-nums}
.now .v small{font-size:15px;font-weight:500;color:var(--ink2);margin-left:3px}
.q15{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px}
.q15 div{border-top:3px solid var(--line);padding:4px 2px 2px;text-align:center;font-size:12px;color:var(--ink2)}
.q15 b{display:block;font:600 18px/1.1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.q15 svg{display:block;margin:2px auto}
.q15 div.w{background:rgba(11,58,143,.07)}
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 28px;margin:0;padding:0;list-style:none}
.brief li{display:grid;grid-template-columns:92px 1fr;gap:10px;min-width:0}
.brief .k{font:600 12.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pill{display:inline-block;font:600 12.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:1px 8px;border-radius:99px;border:1px solid currentColor}
.pill.good{color:var(--good)} .pill.mid{color:var(--warn)} .pill.bad{color:var(--low)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink2)}
.legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:5px;border-top:2.5px solid var(--accent)}
.legend i.g{border-top:2px dashed var(--ink2)} .legend i.b{height:10px;border:0;background:var(--accent-soft)} .legend i.w{height:10px;border:0;background:var(--window)}
#chartbox{position:relative;min-width:0}
#chart{display:block;width:100%;touch-action:pan-y;cursor:crosshair}
#tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.45;box-shadow:0 4px 14px rgba(0,0,0,.14);min-width:170px;z-index:2}
#tip b{font:600 15px var(--mono)}
#tip table{border-collapse:collapse;margin-top:4px} #tip td{padding:0 8px 0 0;font-variant-numeric:tabular-nums}
.scrub{display:flex;gap:12px;align-items:center}
.scrub input{flex:1;min-width:0;accent-color:var(--accent)}
.scrub output{font:600 18px var(--mono);min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.maps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
@media (max-width:820px){.maps{grid-template-columns:minmax(0,1fr)}}
canvas{display:block;width:100%;border-radius:6px;border:1px solid var(--line)}
.read{font-size:14px;border-left:3px solid var(--accent);padding-left:12px}
.scale{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--ink2);align-items:center}
.scale span{display:inline-flex;align-items:center;gap:4px}
.scale i{width:14px;height:10px;display:inline-block;border-radius:2px}
.tablewrap{overflow-x:auto}
table.data{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
table.data th,table.data td{padding:3px 9px;text-align:right;border-bottom:1px solid var(--line)}
table.data th{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.data tr.win td{background:var(--window)}
summary{cursor:pointer;font:600 14px var(--mono);color:var(--accent)}
.learn{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px 28px}
.learn article{min-width:0}
.learn p{margin:4px 0 0;font-size:14px;color:var(--ink2);max-width:62ch}
.learn h3 span{color:var(--accent);margin-right:6px}
ol.check{margin:0;padding-left:20px;font-size:14px;color:var(--ink2);max-width:70ch}
footer{font-size:12.5px;color:var(--muted);max-width:80ch}
a{color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Anschluss ans Designsystem */
.bar{border-bottom-color:var(--line)}
.brand{color:var(--ink)}
.bar-meta{color:var(--muted)}
.brand::before{background:var(--accent)}
.foot{border-top-color:var(--line);color:var(--muted)}
.foot strong{color:var(--ink2)}
.scale i.free{background:var(--sea);border:1px solid var(--line)}
section.panel{border-radius:6px}
.seg,button.act,select{border-radius:4px}
.seg button,button.act{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
:focus-visible{outline-color:var(--accent)}