@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

/* Designsystem. Prinzip: durchgezogen ist gemessen, gestrichelt ist Prognose. */
:root {
  --primaer: #0e4a5a;
  --primaer-tief: #0a3743;
  --akzent: #f2b705;
  --grund: #f2f4f5;
  --flaeche: #ffffff;
  --flaeche-leise: #f7f8f9;
  --linie: #dbe1e5;
  --linie-stark: #a9b6bd;
  --text: #15252d;
  --text-leise: #4e5f69;
  --prognose: #1a5a9e;
  --prognose-grund: #eef4fb;
  --messung: #33424b;
  --ok: #1a6647;      --ok-grund: #e6f3ec;
  --ueber: #a0231b;   --ueber-grund: #fbe9e7;
  --unsicher: #775000; --unsicher-grund: #fdf2d8;
  --schrift: Barlow, Arial, sans-serif;
  --schrift-kopf: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --gr-klein: .875rem;
  --gr-basis: 1rem;
  --gr-h3: 1.125rem;
  --gr-h2: 1.375rem;
  --gr-h1: 1.75rem;
  --gr-wert: 2.125rem;
  --zeile: 1.45;
  --abstand-1: .25rem; --abstand-2: .5rem; --abstand-3: .75rem; --abstand-4: 1rem; --abstand-5: 1.5rem; --abstand-6: 2.25rem;
  --radius: 10px;
  --radius-klein: 6px;
  --schatten: 0 -1px 0 var(--linie);
  --rahmen: 1px solid var(--linie);
  --touch: 44px;
  --nav-hoehe: 62px;
}

* { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--grund); color: var(--text); font-family: var(--schrift); line-height: var(--zeile); overflow-wrap: break-word; }
a { color: var(--primaer); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--schrift-kopf); font-weight: 700; line-height: 1.15; color: var(--primaer-tief); }
h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }
p { margin: 0 0 var(--abstand-3); }
p:last-child { margin-bottom: 0; }
.klein { font-size: var(--gr-klein); color: var(--text-leise); }
.unterzeile { margin: var(--abstand-1) 0 0; color: var(--text-leise); }
.einheit { font-size: .72em; font-weight: 500; }
.fehlt { font-size: var(--gr-klein); font-weight: 400; color: var(--text-leise); }
.unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

/* Kopf und Navigation: am Telefon liegt die Navigation unten in Daumennaehe. */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); padding: var(--abstand-2) 16px; padding-top: max(var(--abstand-2), env(safe-area-inset-top)); background: var(--flaeche); border-bottom: var(--rahmen); }
.marke { display: inline-flex; align-items: center; min-height: var(--touch); font-family: var(--schrift-kopf); font-size: 1.5rem; font-weight: 500; color: var(--primaer-tief); text-decoration: none; }
.marke b { margin-right: 2px; padding: 0 .28em; background: var(--akzent); border-radius: 3px; font-weight: 700; }
.abmelden { margin: 0; }
.nav { position: fixed; z-index: 10; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--flaeche); box-shadow: var(--schatten); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--nav-hoehe); font-size: .78rem; font-weight: 500; color: var(--text-leise); text-decoration: none; }
.nav svg, .zurueck svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current] { color: var(--primaer-tief); font-weight: 600; box-shadow: inset 0 3px 0 var(--akzent); }

main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: var(--abstand-4) 16px var(--abstand-6); }
main.mit-nav { padding-bottom: var(--abstand-5); }
.fuss { padding: var(--abstand-3) 16px var(--abstand-4); font-size: .8rem; color: var(--text-leise); text-align: center; }
.fuss.mit-nav { padding-bottom: calc(var(--nav-hoehe) + var(--abstand-4) + env(safe-area-inset-bottom)); }

.seitenkopf { display: flex; flex-wrap: wrap; gap: var(--abstand-3); justify-content: space-between; align-items: flex-start; margin-bottom: var(--abstand-4); }
.seitenkopf form { margin: 0; }
.zurueck { margin: 0 0 var(--abstand-2); }
.zurueck a { display: inline-flex; align-items: center; gap: 2px; min-height: var(--touch); font-weight: 500; text-decoration: none; }
.zurueck svg { width: 18px; height: 18px; }
.abschnitt { margin-top: var(--abstand-5); }
.abschnitt > h2 { margin-bottom: var(--abstand-3); }
.unterkopf { margin: var(--abstand-5) 0 var(--abstand-2); }
.randlink { margin: var(--abstand-5) 0 0; }
.liste.abschnitt { margin-top: var(--abstand-4); }
.unterzeile + .formular { margin-top: var(--abstand-4); }
.schmal { width: 100%; max-width: 30rem; margin: 0 auto; }
.schmal-links { max-width: 30rem; }

/* Knoepfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: var(--abstand-2) var(--abstand-4); border: 1.5px solid transparent; border-radius: var(--radius-klein); font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.knopf-haupt { background: var(--primaer); color: #fff; }
.knopf-haupt:hover { background: var(--primaer-tief); }
.knopf-neben { background: var(--flaeche); border-color: var(--primaer); color: var(--primaer); }
.knopf-neben:hover { background: var(--grund); }
.knopf-still { padding-inline: var(--abstand-2); background: none; color: var(--text-leise); font-weight: 500; text-decoration: underline; }
.knopf-breit { width: 100%; }
[aria-busy=true] { opacity: .65; cursor: progress; }

/* Karten */
.karte { padding: var(--abstand-4); background: var(--flaeche); border: var(--rahmen); border-radius: var(--radius); }
.karte > h1, .karte > h2 { margin-bottom: var(--abstand-3); }

/* Datenart und Status */
.art { display: inline-block; flex: none; padding: 1px var(--abstand-2); border: 1.5px solid; border-radius: var(--radius-klein); font-size: .72rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.art-prognose { border-style: dashed; color: var(--prognose); background: var(--prognose-grund); }
.art-messung { border-color: var(--messung); background: var(--messung); color: #fff; }
.art-alt { border-color: var(--linie-stark); color: var(--text-leise); }
.datenart { margin-bottom: var(--abstand-4); padding: var(--abstand-4); border-radius: var(--radius); }
.datenart h1 { color: inherit; }
.datenart p { margin: var(--abstand-1) 0 0; }
.datenart-prognose { border: 2px dashed var(--prognose); background: var(--prognose-grund); color: var(--prognose); }
.datenart-messung { border: 2px solid var(--messung); background: var(--messung); color: #fff; }
.status { display: inline-flex; align-items: center; gap: .35em; padding: 1px var(--abstand-2); border-radius: var(--radius-klein); font-size: var(--gr-klein); font-weight: 600; }
.status::before { font-weight: 700; }
.status-innerhalb { background: var(--ok-grund); color: var(--ok); }
.status-innerhalb::before { content: "\2713"; }
.status-ueber { background: var(--ueber-grund); color: var(--ueber); }
.status-ueber::before { content: "!"; }
.status-unsicher { background: var(--unsicher-grund); color: var(--unsicher); }
.status-unsicher::before { content: "?"; }

/* Projekt auf der Startseite */
.projekt { margin-bottom: var(--abstand-5); background: var(--flaeche); border: var(--rahmen); border-radius: var(--radius); overflow: hidden; }
.projekt-kopf { padding: var(--abstand-3) var(--abstand-4); border-bottom: var(--rahmen); }
.projekt-kopf a { display: flex; align-items: center; gap: var(--abstand-2); min-height: var(--touch); color: inherit; text-decoration: none; }
.projekt-kopf p { margin: 2px 0 0; font-size: var(--gr-klein); color: var(--text-leise); }
.projekt-name { font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.bv { display: inline-block; padding: 0 .3em; background: var(--akzent); border-radius: 3px; font-family: var(--schrift-kopf); font-weight: 700; color: var(--primaer-tief); }
.tage { display: grid; grid-template-columns: minmax(0, 1fr); }
.tag { padding: var(--abstand-4); border-bottom: 1.5px dashed var(--linie-stark); }
.tag-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--abstand-1) var(--abstand-2); margin-bottom: var(--abstand-2); }
.tag-kopf p { margin: 0; font-weight: 600; }
.tag-kopf h2 small { font-family: var(--schrift); font-size: var(--gr-klein); font-weight: 400; color: var(--text-leise); }
.tag-temp { margin: 0; font-family: var(--schrift-kopf); font-size: var(--gr-wert); font-weight: 700; line-height: 1.1; }
.wetterart { margin: 2px 0 var(--abstand-3); font-size: var(--gr-klein); font-weight: 500; }
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-2); margin: 0 0 var(--abstand-2); }
.werte:last-child { margin-bottom: 0; }
.werte dt { font-size: .8rem; color: var(--text-leise); }
.werte dd { margin: 0; font-size: 1.15rem; font-weight: 600; }
.jetzt { padding: var(--abstand-3) var(--abstand-4); border-bottom: 1.5px solid var(--messung); background: var(--flaeche-leise); }
.vergleich-block { padding: var(--abstand-4); border-bottom: var(--rahmen); }
.vergleich-block h3 { margin-bottom: var(--abstand-2); }
.vergleich-block > .klein { margin-bottom: var(--abstand-1); }
.vergleich { margin: 0; padding: 0; list-style: none; }
.vergleich li { padding: var(--abstand-2) 0; border-top: var(--rahmen); }
.vergleich li:first-child { border-top: 0; }
.vergleich-titel { margin: 0 0 2px; font-weight: 500; }
.vergleich .klein { margin: 2px 0 0; }
.projekt-fuss { display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-4); }
.leer { padding: var(--abstand-3) var(--abstand-4); background: var(--flaeche-leise); border-radius: var(--radius-klein); color: var(--text-leise); }
.leer-block { padding: var(--abstand-5) var(--abstand-4); background: var(--flaeche); border: var(--rahmen); border-radius: var(--radius); text-align: center; }

/* Listen */
.liste { margin: 0; padding: 0; list-style: none; background: var(--flaeche); border: var(--rahmen); border-radius: var(--radius); overflow: hidden; }
.liste li + li { border-top: var(--rahmen); }
.liste a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-3); min-height: 56px; padding: var(--abstand-3) var(--abstand-4); color: inherit; text-decoration: none; }
.liste a:hover { background: var(--flaeche-leise); }
.liste-text { flex: 1 1 12rem; display: flex; flex-direction: column; min-width: 0; }
.liste-text b { font-weight: 600; }
.liste-status { flex: 1 1 100%; }

/* Tabellen: am Telefon wird jede Zeile zum Block, damit nichts abgeschnitten wird. */
.tabelle { background: var(--flaeche); border: var(--rahmen); border-radius: var(--radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); }
th, td { padding: var(--abstand-2) var(--abstand-3); border-bottom: var(--rahmen); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
table.stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
table.stapel, table.stapel tbody, table.stapel tr { display: block; }
table.stapel tr { padding: var(--abstand-2) var(--abstand-4); border-bottom: var(--rahmen); }
table.stapel tr:last-child { border-bottom: 0; }
table.stapel td { display: block; padding: 3px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
table.stapel td::before { content: attr(data-feld); float: left; max-width: 45%; margin-right: var(--abstand-4); color: var(--text-leise); font-size: var(--gr-klein); text-align: left; }
/* Wertetabellen sind lang: am Telefon drei Spalten je Eintrag statt einer Zeile je Wert. */
table.werte-tabelle tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-1) var(--abstand-2); }
table.werte-tabelle td { display: block; padding: 0; text-align: left; font-weight: 500; }
table.werte-tabelle td::before { display: block; float: none; max-width: none; margin: 0; font-size: .78rem; font-weight: 400; }
table.werte-tabelle td:first-child { grid-column: 1 / -1; font-weight: 600; }
table.werte-tabelle td:first-child::before { content: none; }
.fakten { margin: 0; padding: var(--abstand-2) var(--abstand-4); background: var(--flaeche); border: var(--rahmen); border-radius: var(--radius); }
.fakten > div { padding: var(--abstand-2) 0; border-top: var(--rahmen); }
.fakten > div:first-child { border-top: 0; }
.fakten dt { font-size: var(--gr-klein); color: var(--text-leise); }
.fakten dd { margin: 0; overflow-wrap: anywhere; }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: var(--abstand-3); }
fieldset { margin: 0; min-width: 0; }
legend { padding: 0 var(--abstand-2); font-family: var(--schrift-kopf); font-size: var(--gr-h3); font-weight: 700; color: var(--primaer-tief); }
fieldset.karte { display: flex; flex-direction: column; gap: var(--abstand-3); }
fieldset.gruppe { margin-bottom: var(--abstand-3); padding: var(--abstand-3); border: var(--rahmen); border-radius: var(--radius-klein); }
fieldset.gruppe legend small { display: block; font-family: var(--schrift); font-size: var(--gr-klein); font-weight: 400; color: var(--text-leise); }
fieldset.gruppe label { margin-bottom: var(--abstand-2); }
label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 500; }
label small { font-size: .8rem; font-weight: 400; color: var(--text-leise); }
input, select { width: 100%; min-width: 0; min-height: var(--touch); padding: var(--abstand-2) var(--abstand-3); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); color: var(--text); font: inherit; font-size: max(16px, 1rem); -webkit-appearance: none; appearance: none; }
select { padding-right: 2rem; text-overflow: ellipsis; background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%), linear-gradient(135deg, var(--text-leise) 50%, transparent 50%); background-position: right 1rem center, right .7rem center; background-size: .3rem .3rem; background-repeat: no-repeat; }
input[type=checkbox] { flex: none; width: 1.5rem; min-height: 0; height: 1.5rem; padding: 0; -webkit-appearance: auto; appearance: auto; accent-color: var(--primaer); }
input[type=date], input[type=time] { display: block; }
.eingabe { display: flex; align-items: center; gap: var(--abstand-2); }
.einheit-feld { flex: none; font-size: var(--gr-klein); font-weight: 400; color: var(--text-leise); }
.reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); align-items: start; }
.mit-fehler input { border: 2px solid var(--ueber); }
.fehlertext { color: var(--ueber); font-size: var(--gr-klein); font-weight: 500; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); }
.haken { display: flex; flex-direction: column; gap: var(--abstand-2); }
.haken label { flex-direction: row; align-items: center; gap: var(--abstand-2); min-height: var(--touch); }
.treffer { display: flex; flex-direction: column; gap: var(--abstand-2); }
.treffer-zeile { min-height: var(--touch); padding: var(--abstand-2) var(--abstand-3); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); font: inherit; text-align: left; cursor: pointer; }
.nachweise { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-3); }
.karte-prognose { border: 1.5px dashed var(--prognose); }
.hinweistext { color: var(--unsicher); font-weight: 500; }

/* Meldungen */
.meldung { padding: var(--abstand-3) var(--abstand-4); background: var(--prognose-grund); border-left: 4px solid var(--primaer); border-radius: var(--radius-klein); }
.meldung-fehler { background: var(--ueber-grund); border-left-color: var(--ueber); color: var(--ueber); }

/* Aufklappbereiche */
.aufklapp { margin-top: var(--abstand-3); background: var(--flaeche); border: var(--rahmen); border-radius: var(--radius); }
.aufklapp summary { display: flex; align-items: center; min-height: var(--touch); padding: var(--abstand-2) var(--abstand-4); font-family: var(--schrift-kopf); font-size: var(--gr-h3); font-weight: 700; color: var(--primaer-tief); cursor: pointer; }
.aufklapp-inhalt { padding: 0 var(--abstand-4) var(--abstand-4); }
.aufklapp-inhalt .tabelle { border: 0; }
.aufklapp-inhalt table.stapel tr { padding-inline: 0; }

/* Lageskizze */
.lageplan { max-width: 460px; margin: 0; padding: var(--abstand-2); background: var(--primaer-tief); border-radius: var(--radius-klein); color: #dbe6ea; }
.lageplan svg { display: block; width: 100%; height: auto; }
.lageplan figcaption { padding: var(--abstand-1); font-size: .82rem; }
.ring { fill: none; stroke: #5f8392; stroke-width: 1; }
.achse { stroke: #3e6778; stroke-width: 1; }
.ring-text { fill: #a9c0ca; font-size: 11px; font-family: var(--schrift); }
.himmel { fill: var(--akzent); font: 700 19px var(--schrift-kopf); }
.station { fill: #fff; stroke: #fff; stroke-width: 2; }
.station.ersatz { fill: var(--primaer-tief); }
.station-text { fill: #fff; font: 500 12.5px var(--schrift); paint-order: stroke; stroke: var(--primaer-tief); stroke-width: 3px; }
.baustelle { fill: var(--akzent); stroke: var(--primaer-tief); stroke-width: 1.5; }

/* Ab Tablet: Tabellen als Tabellen, Tage nebeneinander, Navigation oben. */
@media (min-width: 768px) {
  :root { --gr-h1: 2rem; }
  .kopf { padding-inline: max(16px, calc((100vw - 1008px) / 2)); }
  .nav { position: static; display: flex; gap: var(--abstand-2); margin-right: auto; padding: 0; box-shadow: none; background: none; }
  .nav a { flex-direction: row; gap: var(--abstand-1); min-height: var(--touch); padding: 0 var(--abstand-3); font-size: 1rem; }
  .nav svg { width: 18px; height: 18px; }
  .nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--akzent); }
  .fuss.mit-nav { padding-bottom: var(--abstand-4); }
  .tage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tage .tag + .tag { border-left: var(--rahmen); }
  .projekt-fuss { flex-direction: row; align-items: center; justify-content: space-between; }
  .projekt-fuss .knopf { flex: none; }
  .vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--abstand-5); }
  .vergleich li:nth-child(2) { border-top: 0; }
  .nachweise { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .knopf-breit { width: auto; }
  .liste-status { flex: 0 1 auto; }
  .fakten > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--abstand-3); }
}
/* Tablet hochkant: Zeilenbloecke in zwei Spalten, acht Tabellenspalten passen erst ab 900 px. */
@media (min-width: 768px) and (max-width: 899px) {
  table.stapel tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--abstand-6); }
  table.stapel.werte-tabelle tr { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--abstand-1) var(--abstand-3); }
}
@media (min-width: 900px) {
  table.stapel { display: table; }
  table.stapel thead { position: static; display: table-header-group; width: auto; height: auto; clip-path: none; }
  table.stapel tbody { display: table-row-group; }
  table.stapel tr, .aufklapp-inhalt table.stapel tr { display: table-row; padding: 0; }
  table.stapel td { display: table-cell; padding: var(--abstand-2) var(--abstand-3); border-bottom: var(--rahmen); font-size: .94rem; text-align: left; overflow-wrap: break-word; }
  td[data-feld=Tag], td[data-feld=Grenzwert], td[data-feld=Wert] { white-space: nowrap; }
  table.stapel tr:last-child td { border-bottom: 0; }
  table.stapel td::before { content: none; }
  table.werte-tabelle tr { display: table-row; }
  table.werte-tabelle td, table.werte-tabelle td:first-child { display: table-cell; font-weight: 400; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .nav, .abmelden, .knopf { display: none; } body { background: #fff; } }