@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"); }

:root {
  --petrol: #123a4a;
  --petrol-hell: #2b5a6d;
  --blech: #e6ebee;
  --linie: #b9c6cd;
  --papier: #f7f9fa;
  --text: #15252d;
  --grau: #52656f;
  --kran: #f5b800;
  --rot: #a8231b;
  --gruen: #1e6b4a;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--blech); color: var(--text); font-family: Barlow, Arial, sans-serif; line-height: 1.45; }
a { color: var(--petrol-hell); }
:focus-visible { outline: 3px solid var(--kran); outline-offset: 2px; }

.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; padding: .7rem max(16px, calc((100vw - 1120px) / 2)); background: var(--petrol); border-bottom: 5px solid var(--kran); color: #fff; }
.marke { font-family: "Barlow Condensed", Arial, sans-serif; font-size: 1.65rem; font-weight: 500; color: #fff; text-decoration: none; letter-spacing: .01em; }
.marke b { font-weight: 700; color: var(--kran); }
.kopf nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-left: auto; }
.kopf nav a { color: #fff; text-decoration: none; font-weight: 500; }
.kopf nav a:hover { text-decoration: underline; }
.abmelden { margin: 0; }
.kopf > .abmelden:nth-child(2) { margin-left: auto; }

main { flex: 1; width: 100%; max-width: 1152px; margin: 0 auto; padding: 1.5rem 16px 2.5rem; }
.fuss { padding: 1rem max(16px, calc((100vw - 1120px) / 2)); color: var(--grau); font-size: .82rem; }

h1, h2, legend { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; line-height: 1.12; }
h1 { font-size: 2.3rem; margin: 0 0 .3rem; color: var(--petrol); }
h2 { font-size: 1.6rem; margin: 2.2rem 0 .6rem; color: var(--petrol); }
.bv-gross { display: inline-block; padding: 0 .35em; background: var(--kran); color: var(--petrol); }
.adresse { margin: .25rem 0 0; color: var(--grau); }
.kopfzeile { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.kopfzeile form { margin: 0; }

button, .knopf { display: inline-block; font: inherit; font-weight: 600; padding: .55rem 1rem; border: 2px solid var(--petrol); cursor: pointer; text-decoration: none; }
.haupt { background: var(--petrol); color: #fff; }
.haupt:hover { background: var(--petrol-hell); border-color: var(--petrol-hell); }
.neben { background: transparent; color: var(--petrol); }
.neben:hover { background: #fff; }
.link, .link-hell { padding: 0; border: 0; background: none; font-weight: 500; text-decoration: underline; }
.link { color: var(--petrol-hell); }
.link-hell { color: #fff; }
.unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

.tabelle-rahmen { overflow-x: auto; background: var(--papier); border-top: 3px solid var(--petrol); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--grau); font-size: .85rem; }
th, td { padding: .6rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.bv a { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--petrol); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.offen { font-weight: 600; color: #8a5a00; }
.klein-tabelle { font-size: .9rem; }
.nebenlink { margin-top: 1.4rem; }

.formular label { display: block; margin-bottom: .85rem; font-weight: 500; }
.formular input, .formular select, select { width: 100%; font: inherit; font-weight: 400; padding: .5rem .6rem; background: #fff; border: 1px solid var(--grau); color: var(--text); margin-top: .15rem; }
.formular small, .messgroesse legend small { display: block; font-weight: 400; color: var(--grau); }
.formular.breit { max-width: 760px; }
fieldset { border: 0; border-top: 3px solid var(--petrol); margin: 0 0 1.4rem; padding: .8rem 0 0; }
legend { font-size: 1.35rem; padding: 0 .5rem 0 0; color: var(--petrol); }
.reihe { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.f1 { flex: 1 1 9rem; } .f2 { flex: 2 1 12rem; } .f3 { flex: 3 1 16rem; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .6rem; }
.mit-fehler input { border: 2px solid var(--rot); }
.fehlertext, .formular .fehlertext { color: var(--rot); font-weight: 500; }
.klein { font-size: .88rem; color: var(--grau); }

.schmal { max-width: 26rem; margin: 2rem auto; }
.schmal-links { max-width: 26rem; }
.hinweis, .fehler, .offen-hinweis { padding: .6rem .8rem; margin: 0 0 1rem; border-left: 5px solid var(--gruen); background: var(--papier); }
.fehler { border-color: var(--rot); }
.offen-hinweis { border-color: var(--kran); }

.treffer { margin-bottom: 1rem; }
.treffer p { margin: 0 0 .3rem; }
.treffer-zeile { display: block; width: 100%; margin-bottom: .3rem; text-align: left; font-weight: 400; background: #fff; border: 1px solid var(--grau); }
.treffer-zeile:hover { border-color: var(--petrol); box-shadow: inset 4px 0 0 var(--kran); }

.stationen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.stationen h2 { margin-top: .4rem; }
.messgroesse { margin-bottom: 1rem; }
.messgroesse label { display: block; margin-bottom: .45rem; font-size: .9rem; font-weight: 500; }
.messgroesse legend small { display: inline; margin-left: .5rem; font-family: Barlow, Arial, sans-serif; font-size: .85rem; }
.messgroesse select { margin-top: .1rem; }

.lageplan { position: sticky; top: 1rem; margin: 0; padding: .6rem; background: var(--petrol); color: #dbe6ea; }
.lageplan svg { display: block; width: 100%; height: auto; }
.lageplan figcaption { padding: .2rem .4rem .3rem; 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: Barlow, Arial, sans-serif; }
.himmel { fill: var(--kran); font: 700 19px "Barlow Condensed", Arial, sans-serif; }
.station { fill: #fff; stroke: #fff; stroke-width: 2; }
.station.ersatz { fill: var(--petrol); }
.station-text { fill: #fff; font: 500 12.5px Barlow, Arial, sans-serif; paint-order: stroke; stroke: var(--petrol); stroke-width: 3px; }
.baustelle { fill: var(--kran); stroke: var(--petrol); stroke-width: 1.5; }

.haken label { display: block; margin-bottom: .3rem; }
.haken small { color: var(--grau); }

@media (max-width: 860px) {
  .stationen { grid-template-columns: minmax(0, 1fr); }
  .lageplan { position: static; order: -1; }
  h1 { font-size: 1.95rem; }
}

.vorbehalt { margin: 0 0 1.1rem; color: var(--grau); font-size: .9rem; }
.lage { margin-bottom: 1.5rem; background: var(--papier); border-top: 3px solid var(--petrol); }
.lage-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; padding: .55rem .9rem .45rem; }
.lage-bv { font-family: "Barlow Condensed", Arial, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--petrol); }
.lage-name { font-weight: 600; }
.lage-ort { margin-left: auto; color: var(--grau); font-size: .9rem; }
.lage-offen { margin: 0; padding: .3rem .9rem .8rem; }
.lage-raster { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-top: 1px solid var(--linie); }
.lage-raster > section { padding: .65rem .9rem .8rem; }
.lage-raster h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.lage-raster h2 small { font-family: Barlow, Arial, sans-serif; font-size: .85rem; font-weight: 400; color: var(--grau); }
.jetzt { border-right: 1px solid var(--linie); }
.lage dl { margin: 0; font-size: .9rem; }
.lage dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .12rem 0; }
.lage dt { color: var(--grau); }
.lage dd { margin: 0; text-align: right; }
.lage dd small, .spitze small { display: block; color: var(--grau); font-size: .8rem; }
.ersatz-hinweis { color: #8a5a00 !important; }
.jetzt b, .spitze b { font-size: 1.15rem; font-weight: 600; }
.tag { border-left: 7px solid var(--linie); }
.tag + .tag { border-right: 0; }
.sonne { margin: -.2rem 0 .35rem; color: var(--grau); font-size: .85rem; }
.stufe { margin: 0; font-family: "Barlow Condensed", Arial, sans-serif; font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.spitze { margin: .1rem 0 .4rem; }
.stufe-ok { border-left-color: var(--gruen); }
.stufe-ok .stufe { color: var(--gruen); }
.stufe-review { border-left-color: var(--kran); background: #fdf6dc; }
.stufe-review .stufe { color: #6f4b00; }
.stufe-stop { border-left-color: var(--rot); background: #fbe9e7; }
.stufe-stop .stufe { color: var(--rot); }
.lage-fuss { margin: 0; padding: .4rem .9rem .5rem; border-top: 1px solid var(--linie); color: var(--grau); font-size: .82rem; }
.lage-fuss.veraltet { color: var(--rot); font-weight: 500; }

@media (max-width: 860px) {
  .lage-raster { grid-template-columns: minmax(0, 1fr); }
  .jetzt { border-right: 0; border-bottom: 1px solid var(--linie); }
  .tag + .tag { border-top: 1px solid var(--linie); }
  .lage-ort { margin-left: 0; flex-basis: 100%; }
}
.nachweis-form { margin-bottom: 1.2rem; }