/* Wetter Neububach – Layout: Kopf, Hinweisleiste, Kachelraster (Übersicht) bzw. Detailansicht mit Diagrammen */
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#f4f7f9; --panel:#ffffff; --fg:#17232c; --muted:#5b6b76; --line:#d5dee4; --accent:#1f6f8b;
  --c1:#1f6f8b; --c2:#c0662b; --c3:#6f8f2f; --band:rgba(31,111,139,.16);
  --ok:#2f7d4f; --warn:#b7791f; --crit:#b23b3b; --chip:#e8eef2;
  --b2:#7cc0d6; --b3:#3a93b5; --b4:#1d5f86; --b5:#0d3357;
  --night:#1c2b45; --tw3:#33507a; --tw2:#5878a8; --tw1:#9db7d8; --day:#f3d27a; --moon:#e9e4d4; --moondark:#3a4552;
  --display:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0f171d; --panel:#16222a; --fg:#e4edf2; --muted:#93a6b2; --line:#2a3a45; --accent:#6cc3e0;
  --c1:#6cc3e0; --c2:#f0a066; --c3:#a8cc6a; --band:rgba(108,195,224,.18);
  --ok:#6cc58f; --warn:#e7b85a; --crit:#ef7d7d; --chip:#203039;
  --b2:#1f4a5c; --b3:#2e7393; --b4:#4aa3c6; --b5:#8ccfe6;
  --night:#0b1322; --tw3:#1d3150; --tw2:#36557f; --tw1:#7392bb; --day:#d9b45a; --moondark:#26303a;
  color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding-block:24px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 20px}
#app{display:flex;flex-direction:column;gap:14px;min-width:0}
header a{color:inherit;text-decoration:none}
h1{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1.1;margin:0;letter-spacing:.01em;text-wrap:balance}
h2{font-family:var(--display);font-weight:600;font-size:1.5rem;margin:0;line-height:1.15}
.sub{color:var(--muted);margin:0}
.stand{font-family:var(--mono);font-size:.82rem;color:var(--muted);text-align:right}
.lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.alerts{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--chip);font-size:.82rem}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}
.chip.warn i{background:var(--warn)} .chip.crit i{background:var(--crit)} .chip.ok i{background:var(--ok)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:inherit;text-decoration:none;min-width:0;transition:border-color .15s}
a.tile:hover{border-color:var(--accent)} a.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tile .go{font-size:.78rem;color:var(--accent)}
.big{font-family:var(--mono);font-weight:500;font-size:2.1rem;line-height:1.05;font-variant-numeric:tabular-nums}
.big small{font-size:.95rem;color:var(--muted);margin-left:4px;font-weight:400}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:.88rem}
.kv span:nth-child(odd){color:var(--muted)}
.kv span:nth-child(even){font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.trend{font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.row{display:flex;align-items:center;gap:14px}
.wide{grid-column:span 2} @media (max-width:560px){.wide{grid-column:auto}}
.batt{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:.86rem;align-items:center}
.state{font-size:.78rem;padding:1px 8px;border-radius:999px;background:var(--chip);font-family:var(--mono)}
.state.ok{color:var(--ok)} .state.warn{color:var(--warn)}
nav.back a{color:var(--accent);text-decoration:none} nav.back a:hover{text-decoration:underline}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs a{font-size:.86rem;padding:4px 10px;border-radius:6px;border:1px solid var(--line);color:var(--fg);text-decoration:none;background:var(--panel)}
.tabs a[aria-current="page"]{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.seg button{font:inherit;border:0;background:transparent;color:var(--fg);padding:5px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--bg);font-weight:600}
.seg button:focus-visible,.tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.panel .head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--muted)}
.legend b{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.chart{position:relative;width:100%;min-height:120px}
.chart svg{display:block;width:100%;height:auto}
.tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-family:var(--mono);font-size:.78rem;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:2}
.charts{display:flex;flex-direction:column;gap:14px}
.summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px}
.summary .v{font-family:var(--mono);font-size:1.15rem;font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:.85rem;margin:0;max-width:70ch}
.leer{color:var(--muted);padding:24px 0;text-align:center}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}@media (max-width:760px){.two{grid-template-columns:1fr}}
.moonrow{display:flex;flex-wrap:wrap;gap:6px}
.moonrow div{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--mono);font-size:.7rem;color:var(--muted);width:40px}
.moonrow div.today{color:var(--fg);font-weight:600}
.phases{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 18px}
footer{color:var(--muted);font-size:.82rem;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}
/* Warnungen und Vorhersage */
:root{--w1:#f2c94c;--w2:#f2994a;--w3:#e0524f;--w4:#9b51e0}
.warnungen{display:flex;flex-direction:column;gap:8px}
.warnbox{display:block;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--w1);border-radius:8px;padding:10px 14px;color:inherit;text-decoration:none}
.warnbox.w2{border-left-color:var(--w2)}.warnbox.w3{border-left-color:var(--w3)}.warnbox.w4{border-left-color:var(--w4)}
.warnbox summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;list-style:none}
.warnbox summary::-webkit-details-marker{display:none}
.warnbox summary::after{content:"Details ▾";margin-left:auto;font-size:.78rem;color:var(--accent)}
.warnbox[open] summary::after{content:"schließen ▴"}
a.warnbox{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.warnbox p{margin:8px 0 0;max-width:75ch}
.wart{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--muted)}
.wzeit{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.vkurz{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.vkurz div{display:flex;flex-direction:column;align-items:center;gap:2px}
.vt{font-family:var(--mono);font-size:1.1rem;font-weight:500}.vt small{color:var(--muted);font-weight:400;font-size:.85rem}
.vliste{display:flex;flex-direction:column}
.vtag{display:grid;grid-template-columns:7.5em 40px minmax(0,1fr) 6.5em 9em 7.5em 6em;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.vtag:last-child{border-bottom:0}.vname{font-weight:600}.vtext{color:var(--muted);font-size:.88rem}
@media (max-width:760px){.vtag{grid-template-columns:5.5em 40px 1fr auto;row-gap:0}.vtag .vtext{display:none}.vtag .trend{grid-column:3/5;font-size:.78rem}.vtag .vt{grid-column:3;grid-row:1}}
@media (prefers-color-scheme: dark){:root{--w1:#d9b445;--w2:#e0874a;--w3:#e06a66;--w4:#b07ae8}}
/* Wisch-Navigation zwischen den Verlaufsseiten (nur Touch/schmale Bildschirme) */
.swipenav{display:none;justify-content:space-between;align-items:center;gap:8px;font-size:.88rem}
.swipenav a{color:var(--accent);text-decoration:none;padding:6px 0}
@media (max-width:760px),(pointer:coarse){.swipenav{display:flex}}
/* Kachel "Wetter jetzt" */
.jetzt{gap:8px;background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.jkopf{display:flex;align-items:center;gap:16px}
.jt{font-size:2.6rem}
.jtext{font-family:var(--display);font-weight:600;font-size:1.25rem}
.jsatz{margin:0;color:var(--muted);font-size:.9rem}
.jwerte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;border-top:1px solid var(--line);padding-top:10px}
.jwerte div{display:flex;flex-direction:column;gap:1px;min-width:0}
.jv{font-family:var(--mono);font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.jwerte{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pegel-Kennwerte */
.ptab{width:100%;border-collapse:collapse;font-size:.88rem}
.ptab th{text-align:left;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);padding:4px 6px}
.ptab td{border-bottom:1px solid var(--line);padding:5px 6px;vertical-align:top}
.ptab td:nth-child(2),.ptab th:nth-child(2){text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ptab td:first-child{white-space:nowrap}
.ptab tr.ms td{font-weight:600}
.msf{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.msf.w1{background:var(--w1)}.msf.w2{background:var(--w2)}.msf.w3{background:var(--w3)}.msf.w4{background:var(--w4)}
#pegelinfo:empty{display:none}
.ptab .quelle{color:var(--muted);font-size:.8rem;margin-top:2px}

/* Textseiten (Impressum, Datenschutz) */
.rtext{gap:4px;max-width:78ch}
.rtext h2{font-family:var(--display);font-weight:600;font-size:1.6rem;margin:0 0 6px}
.rtext h3{font-size:1rem;margin:16px 0 2px}
.rtext p,.rtext ul{margin:0 0 6px}
.rtext ul{padding-left:1.2em}
.rtext a{color:var(--accent)}
.rtext code{font-family:var(--mono);font-size:.85em}