:root {
  /* Grundton "Papier auf Stein": kuehles, helles Grau als Flaeche,
     dunkles Blaugrau als Text - ruhig und amtlich, nicht bunt. */
  --bg: #eef1f5;
  --fg: #1b2634;
  --muted: #5a6575;
  --border: #d3d9e2;
  --card: #ffffff;

  /* Primaerfarbe "Amtsblau": dunkles, gedecktes Blau fuer Kopf,
     Schritte und Primaeraktionen. Traegt die Seriositaet der Seite. */
  --accent: #1f3a63;
  --accent-hover: #16294a;
  --accent-soft: #e9eef6;

  /* Zurueckhaltendes Messing als zweite Kennfarbe: nur als schmale
     Linie im Kopf und fuer Hervorhebungen mit Gewicht. */
  --brass: #b08d3e;

  /* Wasser-Blau — reserviert für HGW/Sickerwasser, bewusst heller
     und kuehler als das Amtsblau, damit beide unterscheidbar bleiben. */
  --water: #1a7fd4;
  --water-soft: #ddedfa;

  /* Status — gedeckt, klar unterscheidbar */
  --ok: #1e6038;
  --ok-bg: #e9f3ec;
  --ok-border: #b4d4bf;
  --warn: #96610f;
  --warn-bg: #faf2e1;
  --warn-border: #e6c88e;
  --exceed: #8c2626;
  --exceed-bg: #f7e8e8;
  --exceed-border: #d8a8a8;
  --unknown: #5f6673;
  --unknown-bg: #eaecef;
  --unknown-border: #c5cad3;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  /* Blick ins Wasser: unter dem Kopf liegt die Oberflaeche, nach unten
     wird es tiefer und blauer - wie in ruhigem, klarem Wasser. Feine
     Wellenlinien als zweite Ebene. Alle Inhalte liegen auf weissen
     Karten, die Tiefe traegt nur der Grund. Lagen bewusst in EINER
     background-Deklaration (ein ::before mit z-index -1 laege hinter
     dem eigenen Body-Hintergrund und bliebe unsichtbar - gemessen). */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 Q 30 22 60 30 T 120 30 T 180 30 T 240 30' fill='none' stroke='%231a7fd4' stroke-opacity='0.07' stroke-width='1.5'/%3E%3C/svg%3E") repeat,
    linear-gradient(180deg,
      #f2f7fb 0%,
      #e2edf7 24%,
      #cfe1f1 50%,
      #b5cfe7 76%,
      #9cbddd 100%);
  background-size: 240px 60px, auto;
  background-attachment: fixed;
  color: var(--fg);
  margin: 0;
  padding: 0;
  line-height: 1.45;
}

/* ============================================================
   HEADER
   ============================================================ */

/* Masthead im Behoerden-Duktus: dunkles Amtsblau, darunter eine
   schmale Messinglinie als einzige Zierde. Kein Verlauf, kein Schatten
   - die Wuerde kommt aus Ruhe und Ordnung. */
.app-header {
  background: var(--accent);
  color: white;
  border-bottom: 3px solid var(--brass);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Monogramm als "Siegel": quadratisch, feiner Doppelrahmen. */
.header-icon {
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.85);
  outline: 1px solid rgba(255,255,255,0.25);
  outline-offset: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.header-brand h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.header-brand .subtitle {
  margin: 4px 0 0;
  color: rgba(255,255,255,0.75);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

.header-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.header-badge {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

main {
  max-width: 1280px;
  margin: 24px auto;
  padding: 0 24px 80px;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(27,38,52,0.06);
}

/* Kartenkopf: praeziser Titel in gesetzter Groesse, darunter (im
   Markup dahinter) der Klartext-Untertitel. Die Trennlinie bleibt
   duenn - Ordnung statt Dekoration. */
.card h2 {
  margin: 0 0 16px 0;
  font-size: 16.5px;
  font-weight: 650;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--fg);
  letter-spacing: 0.005em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.card-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 650;
}

.card-subtitle {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
  letter-spacing: 0.01em;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  gap: 5px;
}

input, select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
  background: white;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,58,99,0.15);
}

/* Sichtbarer Tastatur-Fokus fuer alle interaktiven Elemente
   (Barrierefreiheit: Fokus-Reihenfolge nachvollziehbar machen). */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.grid { display: grid; gap: 14px; }
/* minmax(0, 1fr) statt 1fr (11.09.2026, Befund Gerion "das sieht scheisse
   aus"): 1fr laesst eine Spalte nicht unter die Inhaltsbreite schrumpfen.
   In der halbbreiten Bauwerksspalte ragte das dritte Filterfeld 37 px ueber
   die Zone, und die drei Spalten waren 153/187/234 px statt gleich breit. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid > * { min-width: 0; }
.grid label > select,
.grid label > input:not([type=checkbox]):not([type=radio]) { width: 100%; box-sizing: border-box; }
/* Formularraster auf schmalen Breiten (Smartphone/geteiltes Fenster) auf
   eine Spalte kollabieren; min-width:0 laesst Felder unter ihre Inhaltsbreite
   schrumpfen, statt die Seite horizontal zu ueberlaufen. */
@media (max-width: 640px) {
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
  .grid > * { min-width: 0; }
  /* Kopfzeile umbrechen statt ueberlaufen */
  .header-inner { flex-wrap: wrap; padding: 12px 16px; }
  .header-badges { flex-wrap: wrap; }
}

.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

.hint.warn-hint {
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  padding: 7px 11px;
}

/* ── Ablauf-Leiste: die drei Stationen der Pruefung ──────────── */
.flow-nav {
  max-width: 1280px;
  margin: 18px auto 0;
  padding: 0 28px;
}
.flow-intro {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.flow-steps {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.flow-step {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  padding: 12px 16px;
  cursor: pointer;
  font: inherit;
  color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.flow-step:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(31,58,99,0.12);
  transform: translateY(-1px);
}
.flow-step:disabled { opacity: 0.5; cursor: not-allowed; }
.flow-step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-step-text { display: flex; flex-direction: column; min-width: 0; }
.flow-step-name { font-weight: 700; }
.flow-step-sub  { font-size: 12px; color: var(--muted); line-height: 1.4; }
.flow-arrow {
  align-self: center;
  color: var(--muted);
  font-size: 18px;
  flex: 0 0 auto;
}
@media (max-width: 760px) {
  .flow-arrow { display: none; }
  .flow-step { flex-basis: 100%; }
}

/* ── Gefuehrte Ansicht: eine Station zur Zeit ─────────────────── */
.station-verborgen { display: none !important; }

.station-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 14px;
}
.station-nav .station-weiter { margin-left: auto; padding: 10px 20px; }
.station-nav-hint {
  font-size: 12px;
  color: var(--muted);
  max-width: 60%;
}
@media (max-width: 640px) {
  .station-nav-hint { max-width: 100%; }
  .station-nav .station-weiter { width: 100%; justify-content: center; margin-left: 0; }
  .station-nav .station-zurueck { width: 100%; justify-content: center; }
}

/* Aktive Station in der Ablauf-Leiste */
.flow-step[aria-current="step"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 2px 8px rgba(31,58,99,0.14);
}
.flow-step[aria-current="step"] .flow-step-num {
  /* dunkleres Messing: weisse Ziffer erreicht damit WCAG-AA-Kontrast */
  background: #8a6c2a;
}

.flow-mode-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
/* Der Rueckweg zur Wegewahl steht links, die Ansichtsumschaltung
   rechts - beide zurueckhaltend, es sind Nebenwege. */
.flow-weg-zurueck {
  border: none; background: none; font: inherit; font-size: 12px;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 2px 4px;
}
.flow-weg-zurueck:hover { color: var(--accent); }

/* ============================================================
   WEGEWAHL AM START (28.08.2026, nach design/Start.dc.html)
   Die einzige neue Entscheidung des Umbaus. Zwei Karten, eine
   davon vorgewaehlt - erst "Weiter" springt in den Ablauf,
   damit man beide in Ruhe lesen kann.
   ============================================================ */

.weg-wahl-intro { color: var(--muted); font-size: 13.5px; margin: 0 0 18px;
  max-width: 62ch; }
.weg-karten { display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch; }
.weg-karte {
  flex: 1 1 320px; text-align: left; font: inherit; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  padding: 20px 22px; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(27,38,52,0.06);
  transition: box-shadow 0.12s, border-color 0.12s;
}
.weg-karte:hover { border-color: var(--accent); }
.weg-karte.gewaehlt {
  border: 2px solid var(--accent); margin: -1px;
  box-shadow: 0 2px 10px rgba(31,58,99,0.16);
}
.weg-kopf { display: flex; align-items: flex-start; gap: 12px; }
.weg-marke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-width: 34px; border-radius: 6px;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--border);
}
.weg-karte.gewaehlt .weg-marke { background: var(--accent); color: #fff;
  border-color: var(--accent); }
.weg-titel { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.weg-titel strong { font-size: 15px; color: var(--fg); }
.weg-untertitel { font-size: 12.5px; color: var(--muted); }
.weg-haken {
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok); color: #fff; font-size: 13px;
}
.weg-karte.gewaehlt .weg-haken { display: inline-flex; }
.weg-abschnitt {
  display: block; margin-top: 16px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.weg-fragen { margin: 7px 0 0; padding-left: 18px; font-size: 13px;
  line-height: 1.65; color: var(--fg); }
.weg-ergebnis {
  display: block; margin-top: 8px; padding: 12px 14px; border-radius: 6px;
  font-size: 13px; line-height: 1.55;
  background: #f5f7fa; border: 1px solid #e3e8ef; color: var(--muted);
}
.weg-karte.gewaehlt .weg-ergebnis {
  background: var(--accent-soft); border-color: var(--border); color: var(--accent);
}
.weg-hinweis { display: block; font-size: 11.5px; color: var(--muted);
  line-height: 1.5; margin-top: 12px; }
.weg-wahl-fuss { color: var(--muted); font-size: 12.5px; margin: 18px 0 0;
  max-width: 68ch; }
.weg-warum { margin-top: 16px; border-top: 1px solid var(--border);
  padding-top: 12px; }
.weg-warum > summary { cursor: pointer; font-size: 13px; color: var(--accent);
  font-weight: 600; }
.weg-warum p { font-size: 13px; line-height: 1.6; color: var(--muted);
  max-width: 72ch; margin: 10px 0 0; }

@media (max-width: 760px) {
  .weg-karten { flex-direction: column; }
}
.flow-mode-toggle {
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 2px 4px;
}
.flow-mode-toggle:hover { color: var(--accent); }

/* ── Wasser-Licht: Aquarium-Kaustik hinter dem Inhalt ─────────── */
/* Weiche, langsam treibende Lichtflecken - wie Lichtbrechung in
   ruhigem Wasser. Liegt unter Kopf und Inhalt (z-index), beruehrt
   keine Interaktion (pointer-events) und respektiert
   prefers-reduced-motion. */
.wasser-licht {
  position: fixed;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 30% at 22% 24%, rgba(26,127,212,0.15), transparent 70%),
    radial-gradient(34% 26% at 74% 12%, rgba(129,196,245,0.18), transparent 70%),
    radial-gradient(46% 34% at 58% 78%, rgba(26,127,212,0.13), transparent 72%),
    radial-gradient(30% 22% at 8% 82%, rgba(31,58,99,0.10), transparent 70%);
  filter: blur(26px);
  animation: wasser-licht-drift 52s ease-in-out infinite alternate;
}

/* Lichtstrahlen: fallen schraeg von der Oberflaeche ein und laufen
   in der Tiefe aus (Maske) - das Sonnenlicht der Referenzbilder,
   auf Fachanwendungs-Lautstaerke gedimmt. */
.wasser-licht::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(104deg, transparent 22%, rgba(255,255,255,0.75) 27.5%, transparent 34%),
    linear-gradient(104deg, transparent 42%, rgba(255,255,255,0.50) 47%, transparent 54%),
    linear-gradient(104deg, transparent 59%, rgba(255,255,255,0.65) 64%, transparent 71%),
    linear-gradient(104deg, transparent 77%, rgba(255,255,255,0.45) 81.5%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0.55) 55%, transparent 95%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0.55) 55%, transparent 95%);
  filter: blur(10px);
  animation: wasser-strahlen-schwenk 38s ease-in-out infinite alternate;
}

@keyframes wasser-licht-drift {
  0%   { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  50%  { transform: translate3d(1.5%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}
@keyframes wasser-strahlen-schwenk {
  0%   { transform: translateX(-1.5%) skewX(0.4deg); opacity: 0.85; }
  50%  { transform: translateX(1%)   skewX(-0.3deg); opacity: 1; }
  100% { transform: translateX(2%)   skewX(0.5deg); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .wasser-licht, .wasser-licht::before, .app-header::after { animation: none; }
}
/* Inhalt liegt ueber der Licht-Ebene */
.app-header, main { position: relative; z-index: 1; }

/* Wasseroberflaeche: eine sanft treibende Wellenkante direkt unter
   dem Masthead - die Trennlinie "ueber Wasser / unter Wasser" aus
   den Referenzbildern, als schmales, ruhiges Band. */
.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 16px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='16' viewBox='0 0 180 16'%3E%3Cpath d='M0 6 Q 22 1 45 6 T 90 6 T 135 6 T 180 6 L 180 16 L 0 16 Z' fill='%231a7fd4' fill-opacity='0.20'/%3E%3Cpath d='M0 6 Q 22 1 45 6 T 90 6 T 135 6 T 180 6' fill='none' stroke='%231a7fd4' stroke-opacity='0.55' stroke-width='1.6'/%3E%3Cpath d='M0 9 Q 22 5 45 9 T 90 9 T 135 9 T 180 9' fill='none' stroke='%231a7fd4' stroke-opacity='0.25' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x;
  background-size: 180px 16px;
  animation: wasser-oberflaeche-drift 26s linear infinite;
}
@keyframes wasser-oberflaeche-drift {
  from { background-position-x: 0; }
  to   { background-position-x: 180px; }
}

/* ── Datenbestand-Leiste in der Zulaessigkeitspruefung ────────── */
/* ============================================================
   Beantwortete Fragen (28.08.2026)
   Hat die Standortabfrage Schritt 1 oder Schritt 3 beantwortet,
   steht statt der Auswahl nur noch das Ergebnis da - mit seiner
   Herkunft und einem Knopf, der die Auswahl zurueckholt.
   ============================================================ */

.ebv-beantwortet {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--ok-bg); border: 1px solid var(--ok-border);
  border-radius: 6px; padding: 11px 13px; margin-bottom: 4px;
}
/* Von Hand geaendert: dann ist es keine Landesauskunft mehr, und das
   muss man sehen, ohne den Text zu lesen. */
.ebv-beantwortet.abweichend {
  background: var(--warn-bg); border-color: var(--warn-border);
}
.ebv-beantwortet-marke {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 1px;
  background: var(--ok); color: #fff;
}
.ebv-beantwortet.abweichend .ebv-beantwortet-marke { background: var(--warn); }
.ebv-beantwortet-text {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px;
  min-width: 0; font-size: 14px; color: var(--fg);
}
.ebv-beantwortet-quelle { font-size: 11.5px; color: var(--muted);
  font-weight: 400; line-height: 1.45; }
.ebv-beantwortet-knopf {
  flex: 0 0 auto; border: 1px solid var(--border); background: var(--card);
  border-radius: 5px; font: inherit; font-size: 12px; color: var(--accent);
  padding: 4px 11px; cursor: pointer; margin-top: 1px;
}
.ebv-beantwortet-knopf:hover { background: var(--accent); color: #fff;
  border-color: var(--accent); }

.ebv-datenbestand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 14px;
}
.ebv-datenbestand .btn { padding: 4px 12px; font-size: 12px; }

/* ── Verortungskarte (Leaflet) ────────────────────────────────── */
#standort-karte {
  height: 320px;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* Ueber der Karte liegende UI (Stepper aria-Zustand etc.) nicht
     von Leaflet-Panes ueberdecken lassen. */
  position: relative;
  z-index: 0;
}

/* ── Adress-Vorschlaege (Treffervorwahl beim Tippen) ──────────── */
.adresse-vorschlag {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  margin: 4px 0;
  cursor: pointer;
}
.adresse-vorschlag:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.adresse-vorschlag .hint-inline { display: block; margin-top: 1px; }

/* ── Stations-Marker: verknuepfen Sektionen mit der Ablauf-Leiste ── */
.station-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
  margin-left: auto;
}
.station-landmark {
  max-width: 1280px;
  margin: 26px auto 0;
  padding: 0 28px;
}
.station-landmark .hint { margin-top: 6px; max-width: 720px; }

/* ── Standort-Ergebnis: Karten statt Textwurst ───────────────── */
.standort-karte {
  border: 1px solid var(--border);
  border-left: 4px solid var(--unknown-border);
  border-radius: 8px;
  background: var(--card);
  padding: 10px 14px;
  margin: 8px 0;
}
.standort-karte.ok      { border-left-color: var(--ok); }
.standort-karte.warnung { border-left-color: var(--warn); background: var(--warn-bg); }
.standort-karte.kontext { border-left-color: var(--water); }
.standort-karte-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.standort-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.standort-badge.ok      { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-border); }
.standort-badge.warnung { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
.standort-badge.kontext { background: var(--water-soft); color: #10659f; border: 1px solid #10659f; }
.standort-karte-body { font-size: 13px; line-height: 1.55; }
.standort-karte-body ul { margin: 6px 0 4px 20px; }
.quelle-zeile {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--muted);
}
.quelle-zeile::before { content: "Quelle: "; font-weight: 700; }

/* Kurzes Aufleuchten der Schichten-Tabelle nach der Uebernahme aus
   dem Standort-Panel - macht sichtbar, WO der Klick gewirkt hat. */
.uebernahme-blitz {
  animation: uebernahme-blitz 2.6s ease-out;
}
@keyframes uebernahme-blitz {
  0%   { box-shadow: 0 0 0 4px var(--ok-border); background: var(--ok-bg); }
  60%  { box-shadow: 0 0 0 4px var(--ok-border); background: var(--ok-bg); }
  100% { box-shadow: none; background: transparent; }
}

/* ── Analyse-Import (Laborbericht MantelV-Excel) ─────────────── */
.analyse-import-box {
  border: 1px dashed var(--border, #c8c8c8);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  background: var(--accent-soft);
}
.analyse-import-head { margin-bottom: 8px; }
.analyse-import-head .muted {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.analyse-import-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.analyse-import-controls input[type="file"] { max-width: 320px; }
.analyse-import-proben {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
/* Die Probenwahl zeigt die Messwerte, nicht nur den Namen: wo zwei
   Proben verschieden einstufen, entscheidet der Klick ueber die
   Materialklasse (Befund 01.09.2026). */
.proben-wahl-kopf,
.proben-wahl-fuss {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.proben-wahl-fuss { font-size: 11.5px; }
.proben-karte {
  flex: 1 1 240px;
  min-width: 240px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 11px 13px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  background: #fff;
}
.proben-karte:hover,
.proben-karte:focus-visible {
  border-color: var(--accent, #2f6fb0);
  box-shadow: 0 0 0 3px rgba(47, 111, 176, 0.14);
}
.proben-karte-name { font-weight: 600; font-size: 14px; }
.proben-karte-kennung { font-size: 11.5px; color: var(--muted); }
.proben-karte-klasse {
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
}
.proben-karte-klasse.offen {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn);
}
.proben-karte-werte {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  font-size: 12px;
}
.proben-karte-werte li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--border, #e0e0e0);
}
.proben-karte-werte li:last-child { border-bottom: none; }
.proben-karte-fuss { font-size: 11.5px; color: var(--muted); }
.proben-karte-warnung {
  font-size: 11.5px;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  padding: 4px 8px;
}
.analyse-import-info {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  border-top: 1px solid var(--border, #e0e0e0);
  padding-top: 8px;
}
.analyse-import-info .warn {
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  padding: 5px 9px;
  margin: 6px 0;
}
.analyse-import-info details { margin: 6px 0; }
.analyse-import-info summary { cursor: pointer; color: var(--accent); }
.analyse-import-info ul { margin: 6px 0 6px 20px; }
.analyse-import-info .muted { color: var(--muted); font-size: 12px; margin: 3px 0; }

.eluate-restrict-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 12px;
  text-transform: none;
  letter-spacing: normal;
  flex-wrap: wrap;
}

/* ── Projektablage (Speichern/Laden): eingeklappte Zeile ─────── */
/* Die Funktion bleibt (Fallakten-Persistenz), draengt sich aber
   nicht mehr auf: eine schmale Zeile, die erst auf Klick aufgeht. */
/* Wiederhergestellter Entwurf: sichtbar dort, wo gearbeitet wird -
   die Projektablage darunter ist zugeklappt (Befund 31.08.2026). */
.entwurf-hinweis {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 6px;
  background: var(--exceed-bg); border-left: 3px solid var(--exceed);
}
.entwurf-hinweis[hidden] { display: none; }
.entwurf-hinweis-text { flex: 1 1 260px; font-size: 13px; }
.entwurf-hinweis .btn { white-space: nowrap; }

.project-bar {
  margin: 0 0 14px;
  padding: 0;
  border: none;
  background: none;
}
.project-bar > summary {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 2px 4px;
  list-style: none;
}
.project-bar > summary::-webkit-details-marker { display: none; }
.project-bar > summary:hover { color: var(--accent); }
.project-bar[open] > summary { color: var(--accent); margin-bottom: 8px; }
.project-bar[open] .project-bar-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
}
.project-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.project-bar-label {
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
#project-select {
  min-width: 0;
  max-width: 320px;
  flex: 1 1 220px;
}
.project-bar .btn { white-space: nowrap; }
.project-bar-status {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.eluate-restrict-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.eluate-restrict-label .muted {
  color: var(--muted);
  font-style: italic;
}

.hint-inline {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  margin-bottom: 2px;
}

/* Ausklappbarer Erklaerblock fuer Bodenparameter (theta_e, rho_b, ...) */
.param-help {
  background: #f0f3f7;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  margin: 10px 0 14px;
  font-size: 12.5px;
}
.param-help > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 0;
  list-style: none;
}
.param-help > summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  transition: transform 0.15s;
}
.param-help[open] > summary::before { transform: rotate(90deg); }
.param-help-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.param-help-table th {
  text-align: left;
  width: 110px;
  padding: 6px 10px 6px 4px;
  vertical-align: top;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.param-help-table td {
  padding: 6px 4px;
  vertical-align: top;
  color: var(--fg);
  line-height: 1.5;
  border-top: 1px solid var(--border);
}
.param-help-table tr:first-child td { border-top: none; }
.param-unit { color: var(--muted); font-weight: 400; font-size: 11px; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: white;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  font-family: inherit;
}
.btn:hover { background: var(--accent-soft); }
.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(31,58,99,0.3);
}
.btn.primary:hover { background: var(--accent-hover); box-shadow: 0 2px 6px rgba(31,58,99,0.35); }
.btn.secondary { background: white; color: var(--accent); border-color: var(--accent); }
.btn.secondary:hover { background: var(--accent-soft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn.row-del { color: var(--exceed); border-color: var(--exceed-border); padding: 4px 10px; font-weight: 600; font-size: 12px; }
.btn.row-del:hover { background: var(--exceed-bg); }
.row-actions { white-space: nowrap; display: flex; gap: 4px; }
.btn.row-move { padding: 4px 7px; font-size: 11px; color: var(--muted); border-color: var(--border); line-height: 1; }
.btn.row-move:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* Loading spinner on primary button */
.btn.loading {
  pointer-events: none;
  opacity: 0.85;
}
.btn.loading::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.actions {
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ============================================================
   ERROR BOX
   ============================================================ */

.error-box {
  background: var(--exceed-bg);
  border: 1px solid var(--exceed-border);
  color: #8b1f1f;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  white-space: pre-wrap;
}

.hidden { display: none !important; }

/* ============================================================
   EBV-EINBAUCHECK (Anlage 2 der ErsatzbaustoffV)
   ============================================================ */

.ebv-card {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, #fbfcff 0%, #f3f6fc 100%);
}
.ebv-header h2 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.ebv-badge {
  background: var(--accent);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ebv-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 0 0;
  border-bottom: 2px solid #d6dde8;
}
.ebv-tab {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.ebv-tab:hover { color: var(--accent); }
.ebv-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ebv-tab-panel { padding: 18px 0 8px; }

.ebv-step {
  margin-bottom: 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ebv-step-head {
  background: #f4f7fc;
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--accent);
}
.ebv-step-num {
  background: var(--accent);
  color: white;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.ebv-step-title { font-size: 14px; }
.ebv-step-body { padding: 14px; }
/* Katalogvariante: erscheint nur bei den sechs mehrdeutigen Einbauweisen */
.ebv-variante {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: #f7f9fc; border: 1px solid var(--border);
}
.ebv-variante > label { display: block; font-size: 12.5px; }
.ebv-variante select { width: 100%; margin-top: 4px; }
.ebv-variante .hint { margin-top: 6px; }

/* 2-Spalten-Layout in Schritt 2: links Eingaben, rechts Querschnittsskizze */
.ebv-step-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}
@media (max-width: 920px) {
  .ebv-step-2col { grid-template-columns: 1fr; }
}
.ebv-step-controls { min-width: 0; }
.ebv-sketch-wrap {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
}
.ebv-sketch-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
#ebv-sketch svg { display: block; width: 100%; height: auto; }

/* DIN-18196-Hilfstabelle */
.ebv-din-table th, .ebv-din-table td {
  border: 1px solid #e5e8ec;
  padding: 5px 8px;
  font-size: 12px;
  vertical-align: middle;
  text-align: left;
}
.ebv-din-table th {
  background: var(--accent-soft);
  color: var(--accent);
  width: auto;
}
.ebv-din-table td.cell-yes {
  background: #e8f6ea;
  color: #1f5d1f;
  font-weight: 700;
  text-align: center;
}
.ebv-din-table td.cell-no {
  background: #fdf0f0;
  color: #8a1f1f;
  font-weight: 700;
  text-align: center;
}

.ebv-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ebv-options-2 { grid-template-columns: repeat(2, 1fr); }
.ebv-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: white;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  padding-left: 32px;
}
.ebv-option:hover { border-color: var(--accent); background: #f7faff; }
.ebv-option input[type="radio"] {
  position: absolute;
  left: 10px;
  top: 12px;
  margin: 0;
}
/* Gewaehlte Option deutlich hinterlegen. Doppelt abgesichert:
   :has(input:checked) rein per CSS UND die JS-Klasse .ist-gewaehlt -
   letztere greift auch in Browsern ohne :has()-Unterstuetzung und
   nach programmatischer Vorbelegung durch die Standort-Abfrage. */
.ebv-option:has(input:checked),
.ebv-option.ist-gewaehlt {
  border-color: var(--accent);
  background: #dfe9f5;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ebv-option:has(input:checked) .ebv-option-label,
.ebv-option.ist-gewaehlt .ebv-option-label {
  color: var(--accent);
}
.ebv-option-label { font-weight: 600; font-size: 13px; color: var(--fg); }
.ebv-option-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.ebv-warn-hint {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  color: var(--warn);
  font-size: 12px;
}

/* Standortkontext zur Sickerwasserrate (Paket 4).
   Bewusst ruhig gehalten: Der Kontext steht NEBEN dem Regelwert und darf
   ihn optisch nicht verdraengen. Keine Warnfarbe — es ist kein Befund,
   sondern eine Einordnung. */
#wasserhaushalt-kontext:empty { display: none; }

#wasserhaushalt-kontext {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #2f6f9f);
  border-radius: 6px;
  background: var(--panel, #f7fafc);
  font-size: 12px;
  line-height: 1.55;
}

#wasserhaushalt-kontext .whk-titel {
  font-weight: 600;
  margin-bottom: 6px;
}

#wasserhaushalt-kontext .whk-zeile { margin: 2px 0; }

#wasserhaushalt-kontext .whk-name {
  display: inline-block;
  min-width: 15.5em;
  color: var(--muted);
}

#wasserhaushalt-kontext .whk-trend {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

#wasserhaushalt-kontext .whk-einordnung {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

#wasserhaushalt-kontext .whk-vorbehalt {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

/* Abgleich Station 2 <-> Station 3 (Bauwerk und Einbauweise).
   Die Warnung nutzt bewusst dieselbe Optik wie .ebv-warn-hint - es ist
   derselbe Rang von Befund: hier stimmt etwas nicht zusammen. */
#bauwerk-zuordnung-hinweis:empty { display: none; }

#bauwerk-zuordnung-hinweis .hinweis-warnung,
#bauwerk-zuordnung-hinweis.hinweis-warnung {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  color: var(--warn);
  font-size: 12px;
}

#bauwerk-zuordnung-hinweis.hinweis-ok {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}

.ebv-deckschicht-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px;
  background: #f4f7fc;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ebv-deckschicht-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ebv-deckschicht-value { font-size: 16px; font-weight: 700; color: var(--accent); }
.ebv-deckschicht-value.guenstig    { color: #1f5d1f; }
.ebv-deckschicht-value.unguenstig  { color: var(--warn); }
.ebv-deckschicht-value.unzulaessig { color: #8a1f1f; }
.ebv-deckschicht-reason { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Ergebnis und Prinzipskizze in einer Reihe (28.08.2026).
   Die Skizze bringt ihre eigene Breite mit (viewBox 540 px) und liess
   rechts 636 px leer, waehrend das Ergebnis darueber stand. Beide sind
   fast gleich hoch, also nebeneinander - und untereinander, sobald der
   Platz nicht mehr fuer beide reicht. Ist keine Skizze geladen, nimmt
   das Ergebnis die volle Breite; das macht flex von selbst. */
.ebv-ergebnis-reihe {
  display: flex;
  gap: 14px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ebv-ergebnis-reihe > .ebv-result-box {
  flex: 1 1 420px;
  margin-top: 0;
  min-width: 0;
}
.ebv-ergebnis-reihe > .ebv-einbauweise-svg {
  flex: 0 1 564px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
@media (max-width: 1050px) {
  .ebv-ergebnis-reihe > .ebv-result-box,
  .ebv-ergebnis-reihe > .ebv-einbauweise-svg { flex-basis: 100%; }
}

/* Ergebnis-Box */
.ebv-result-box {
  background: white;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-top: 14px;
}
.ebv-result-box.zulaessig            { border-color: var(--ok-border);     background: var(--ok-bg); }
.ebv-result-box.zulaessig_mit_fussnote { border-color: var(--warn-border); background: var(--warn-bg); }
.ebv-result-box.unzulaessig          { border-color: var(--exceed-border); background: var(--exceed-bg); }
.ebv-result-box.nicht_relevant       { border-color: #c5cad3; background: #eef0f3; }
.ebv-result-placeholder { color: var(--muted); font-style: italic; font-size: 13px; }
.ebv-result-headline {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ebv-result-headline.zulaessig            { color: #1f5d1f; }
.ebv-result-headline.zulaessig_mit_fussnote { color: var(--warn); }
.ebv-result-headline.unzulaessig          { color: #8a1f1f; }
.ebv-result-headline.nicht_relevant       { color: var(--unknown); }
.ebv-result-detail {
  font-size: 13px;
  line-height: 1.6;
  color: #2a2f3a;
}
.ebv-result-detail strong { color: var(--accent); }
.ebv-result-footnotes {
  margin-top: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn);
  border-radius: 4px;
}
.ebv-result-footnotes h4 { margin: 0 0 6px 0; font-size: 13px; color: var(--warn); }
.ebv-result-footnotes ol { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.5; }

/* MTSE-Panel (Bauweisen A-E nach FGSV M TS E 2017) */
.ebv-mtse-panel {
  margin-top: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
}
.ebv-mtse-panel h4 { margin: 0 0 6px 0; font-size: 13px; color: var(--accent); }
.ebv-mtse-panel .ebv-mtse-modus { margin: 0 0 6px 0; }
.ebv-mtse-bauweisen { margin: 6px 0; padding-left: 20px; }
.ebv-mtse-bauweisen li { margin-bottom: 6px; }
.ebv-mtse-select { margin: 8px 0 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ebv-mtse-select label { font-weight: 600; font-size: 12.5px; }
.ebv-mtse-select select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; }
.ebv-mtse-select-state { color: #1f5d1f; font-weight: 600; font-size: 12.5px; }
.ebv-mtse-pflichten { margin-top: 6px; }
.ebv-mtse-pflichten summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--accent); }
.ebv-mtse-pflichten ol { margin: 6px 0 0 0; padding-left: 22px; font-size: 12.5px; }

/* Matrix (Material-Steckbrief) */
.ebv-steckbrief-meta {
  background: #f4f7fc;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.ebv-matrix-wrap { overflow-x: auto; max-width: 100%; }
/* Breite Datentabellen auf schmalen Breiten horizontal scrollbar halten,
   statt die ganze Seite zu ueberlaufen. */
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.ebv-matrix {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}
/* Material-Auswahl des Steckbriefs nie breiter als die Card (sonst
   horizontaler Ueberlauf auf schmalen Breiten). Der Select steht in einem
   CSS-Grid; ohne min-width:0 blaeht die laengste Option die Spalte auf. */
#ebv-steckbrief-material {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ebv-tab-panel .grid > label,
.ebv-tab-panel .grid > * {
  min-width: 0;
}
.ebv-matrix th, .ebv-matrix td {
  border: 1px solid #d6dde8;
  padding: 5px 7px;
  text-align: center;
  vertical-align: middle;
  background: white;
}
.ebv-matrix th { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ebv-matrix th.ebv-h-group-aussen { background: #d8e5f4; }
.ebv-matrix th.ebv-h-group-wsg3a  { background: #e6dbf0; }
.ebv-matrix th.ebv-h-group-wsg3b  { background: #f0dbe0; }
.ebv-matrix th.ebv-h-group-vorrang{ background: #dbf0e2; }
.ebv-matrix th.ebv-h-row {
  text-align: left;
  font-weight: 500;
  background: #f0f3f7;
  max-width: 380px;
  white-space: normal;
  line-height: 1.35;
}
.ebv-matrix td.ebv-cell {
  font-weight: 700;
  cursor: default;
  font-size: 14px;
}
.ebv-matrix td.ebv-cell-plus  { background: #e8f6ea; color: #1f5d1f; }
.ebv-matrix td.ebv-cell-minus { background: #fdf0f0; color: #8a1f1f; }
.ebv-matrix td.ebv-cell-fn    { background: #fff5d8; color: var(--warn); cursor: pointer; }
.ebv-matrix td.ebv-cell-fn:hover { background: #ffe9a8; }
.ebv-matrix td.ebv-cell-na    { background: #eef0f3; color: #8a919c; }
.ebv-matrix td.ebv-cell-fnfail { background: #fbe3e3; color: #8a1f1f; }
.ebv-matrix td.ebv-cell-fnfail:hover { background: #f5cccc; }
/* bautechnisch ungeeignet: rote Schraffur, damit klar von Umwelt-rot unterscheidbar */
.ebv-matrix td.ebv-cell-tech {
  color: #7a2a2a;
  background:
    repeating-linear-gradient(45deg, #f0d2c8 0, #f0d2c8 4px, #e6b8ab 4px, #e6b8ab 8px);
}
.ebv-tech-badge {
  display: inline-block; font-size: 10px; font-weight: 700; color: #8c2626;
  background: #f5dede; border-radius: 10px; padding: 1px 7px; margin-left: 6px;
}

/* ── Steckbrief-Blöcke: Checkliste + Messwerte ─────────────────────────── */
.ebv-sb-block {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
  margin-bottom: 14px; background: #f7f9fc;
}
.ebv-sb-block > summary {
  font-weight: 700; cursor: pointer; color: var(--accent); font-size: 14px;
}
.ebv-func-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px; margin-top: 10px;
}
.ebv-func-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 7px 10px; background: white; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
}
.ebv-func-item input { width: 16px; height: 16px; }
.ebv-mess-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px; margin-top: 10px;
}
.ebv-mess-item {
  background: white; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
}
.ebv-mess-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ebv-mess-name { font-weight: 700; font-size: 13px; }
.ebv-mess-limit { font-size: 11px; color: var(--muted); }
.ebv-mess-fn { color: var(--accent); font-style: italic; }
.ebv-mess-inputrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ebv-mess-input { width: 110px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; }
.ebv-mess-unit { font-size: 12px; color: var(--muted); }
.ebv-mess-flag { font-size: 11.5px; font-weight: 700; margin-left: auto; }
.ebv-mess-flag.ok { color: #1e5631; }
.ebv-mess-flag.fail { color: #8c2626; }
.ebv-mess-summary { margin-top: 10px; }
.ebv-conform { font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.ebv-conform.ok { color: #1e5631; background: #e5efe4; }
.ebv-conform.fail { color: #8c2626; background: #f7dfdf; }

/* Matrix-Legende */
/* Zwei Leserichtungen im Steckbrief (31.08.2026): nach Material oder
   nach Einbauweise. Umschalter im Stil der Tabs darueber. */
.ebv-sb-richtung {
  display: inline-flex; gap: 0; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.ebv-sb-richtung-knopf {
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted); font-family: inherit;
}
.ebv-sb-richtung-knopf + .ebv-sb-richtung-knopf {
  border-left: 1px solid var(--border);
}
.ebv-sb-richtung-knopf:hover { color: var(--accent); }
.ebv-sb-richtung-knopf.active {
  background: var(--accent); color: #fff;
}

/* Die Lieferbedingungen je Anwendung - eine Einbauweise deckt mehrere. */
.ebv-sb-anf-titel {
  font-size: 13px; font-weight: 700; margin-bottom: 6px;
}
.ebv-sb-anf-liste {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px; padding: 10px 12px; border-radius: 6px;
  background: var(--panel-alt, rgba(0,0,0,0.03));
  border-left: 3px solid var(--accent);
}
.ebv-sb-anf-zeile { font-size: 13px; }
.ebv-sb-anf-merkmale { color: var(--text-muted); }
.ebv-sb-anf-offen { color: var(--text-muted); font-style: italic; }

.ebv-matrix-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 10px; font-size: 12px; }
.ebv-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.ebv-leg-sw { width: 16px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); display: inline-block; }
.ebv-leg-sw.plus  { background: #e8f6ea; }
.ebv-leg-sw.fn    { background: #fff5d8; }
.ebv-leg-sw.fnfail{ background: #fbe3e3; }
.ebv-leg-sw.minus { background: #fdf0f0; }
.ebv-leg-sw.tech  { background: repeating-linear-gradient(45deg,#f0d2c8 0,#f0d2c8 3px,#e6b8ab 3px,#e6b8ab 6px); }
.ebv-leg-sw.na    { background: #eef0f3; }

/* Fußnoten-Status-Badges */
.fn-badge { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 10px;
            padding: 1px 7px; margin: 0 6px; }
.fn-badge.ok { background: #e5efe4; color: #1e5631; }
.fn-badge.fail { background: #f7dfdf; color: #8c2626; }
.fn-badge.manual { background: #fdf3da; color: #a8651c; }
.ebv-sb-actions { margin: 12px 0; }
.ebv-matrix td.ebv-cell-highlight {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.ebv-matrix th.ebv-h-highlight {
  background: var(--accent) !important;
  color: white;
}
/* ── Station 4: Ergebnis-Übersicht ("Ergebnis & Gutachten") ───────────── */
.ueberblick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.ueberblick-block {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; background: #f7f9fc;
  min-width: 0;
}
.ueberblick-block-breit { grid-column: 1 / -1; }
.ueberblick-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px;
}
.ueberblick-head > strong { color: var(--accent); font-size: 14px; }
.ueberblick-edit { font-size: 11.5px; padding: 3px 10px; }
.ueberblick-karte {
  height: 200px; border-radius: 6px; margin-bottom: 10px;
  border: 1px solid var(--border); overflow: hidden;
}
.ueberblick-zeile {
  display: flex; gap: 10px; padding: 3px 0; font-size: 12.5px;
  line-height: 1.5; align-items: baseline;
}
.ueberblick-begriff { flex: 0 0 150px; color: var(--muted); font-weight: 600; }
.ueberblick-wert { flex: 1 1 auto; min-width: 0; }
.ueberblick-zeile-block { flex-direction: column; gap: 4px; }
/* In der Spalten-Variante darf die 150px-flex-basis nicht zur HOEHE werden */
.ueberblick-zeile-block .ueberblick-begriff { flex: 0 0 auto; }
.ueberblick-zeile-block .ueberblick-wert { width: 100%; }
.ueberblick-status {
  display: inline-block; font-weight: 700; border-radius: 10px;
  padding: 1px 10px; font-size: 12px;
}
.ueberblick-status.zulaessig               { background: #e5efe4; color: #1e5631; }
.ueberblick-status.zulaessig_mit_fussnote  { background: #fdf3da; color: #a8651c; }
.ueberblick-status.unzulaessig             { background: #f7dfdf; color: #8c2626; }
.ueberblick-status.nicht_relevant,
.ueberblick-status.unbekannt               { background: #eef0f3; color: #8a919c; }
.ueberblick-messwerte {
  border-collapse: collapse; font-size: 12px; min-width: 100%;
  background: white;
}
.ueberblick-messwerte th, .ueberblick-messwerte td {
  border: 1px solid #d6dde8; padding: 4px 8px; text-align: left;
}
.ueberblick-messwerte th { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ueberblick-messwerte td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ueberblick-notiz { color: var(--muted); font-size: 11px; }

/* ── Eingebettete Einbautabelle im Wizard (Station 2) ─────────────────── */
.ebv-wizard-matrix {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin-top: 14px; background: #f7f9fc;
}
.ebv-wizard-matrix > summary {
  font-weight: 700; cursor: pointer; color: var(--accent); font-size: 14px;
}
.ebv-wizard-matrix-actions { margin-top: 10px; }
/* Gewaehlte Einbauweise (Schritt 4) in der Matrix umranden */
.ebv-matrix tr.ebv-row-active th,
.ebv-matrix tr.ebv-row-active td {
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.ebv-matrix tr.ebv-row-active th.ebv-h-row {
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
}
.ebv-matrix tr.ebv-row-active td:last-child {
  border-right: 2px solid var(--accent);
}

/* ── Verbleibende Einbauweisen nach Analysenbewertung (Station 3) ─────── */
.ew-verbleib {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; margin-top: 16px; background: #f7f9fc;
}
.ew-verbleib-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.ew-verbleib-head > strong { font-size: 14px; color: var(--accent); }
.ew-verbleib-matwahl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ew-verbleib-matwahl select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; }
.ew-verbleib-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ewv-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 10px; border-radius: 6px; font-size: 12.5px;
  background: white; border: 1px solid var(--border);
}
.ewv-badge { font-weight: 700; width: 16px; text-align: center; flex: none; }
.ewv-nr { font-weight: 700; width: 20px; text-align: right; flex: none; }
.ewv-bez { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.ewv-verdict { flex: none; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ewv-item.ok   { border-left: 4px solid #1f7a2d; }
.ewv-item.ok   .ewv-badge, .ewv-item.ok   .ewv-verdict { color: #1e5631; }
.ewv-item.warn { border-left: 4px solid #c47f00; background: #fffaf0; }
.ewv-item.warn .ewv-badge, .ewv-item.warn .ewv-verdict { color: #a8651c; }
.ewv-item.fail { border-left: 4px solid #a52626; background: #fdf5f5; }
.ewv-item.fail .ewv-badge, .ewv-item.fail .ewv-verdict { color: #8c2626; }
.ewv-item.tech { border-left: 4px solid #8c5a4a; background: #faf4f1; }
.ewv-item.tech .ewv-badge, .ewv-item.tech .ewv-verdict { color: #7a2a2a; }
.ewv-item.na   { border-left: 4px solid #b6bcc6; color: #8a919c; }
.ewv-item.na   .ewv-badge, .ewv-item.na   .ewv-verdict { color: #8a919c; }
.ewv-gruende { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ew-verbleib-summary { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
.ewv-conform-warn { color: #8c2626; font-weight: 600; }
/* Messwertbedingter Bautechnik-Ausschluss: eigene Farbe, damit er sich
   von der klassenbedingten Sperre (tech) unterscheidet. */
.ewv-item.techmw { border-left: 4px solid #6b4fa8; background: #f7f4fc; }
.ewv-item.techmw .ewv-badge, .ewv-item.techmw .ewv-verdict { color: #55407f; }

/* Eingabemaske bautechnische Chargen-Kennwerte (Paket 8c) */
.btk-box {
  margin-top: 12px; padding: 10px 14px; border-radius: 6px;
  background: white; border: 1px solid var(--border);
}
.btk-box > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.btk-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 16px; margin-top: 10px;
}
.btk-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.btk-feld > span { color: var(--muted); }
.btk-feld input, .btk-feld select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 12.5px;
}
.btk-siebe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px; margin-top: 12px;
}
.btk-siebe:empty { display: none; }
.btk-siebe .btk-feld > span { font-variant-numeric: tabular-nums; }
.btk-hinweis { margin-top: 10px; }
.btk-befund { margin-top: 10px; font-size: 12px; }
.btk-befund ul { margin: 4px 0 0 18px; padding: 0; }

.ebv-footnotes {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
}
.ebv-footnotes h4 { margin: 0 0 8px 0; font-size: 13px; color: var(--warn); }
.ebv-footnotes .fn-item { padding: 3px 0; }
.ebv-footnotes .fn-item.active {
  background: #ffe9a8;
  border-left: 3px solid #c8941d;
  padding-left: 8px;
  border-radius: 2px;
}
.ebv-footnotes .fn-nr {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #c8941d;
  color: white;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  margin-right: 8px;
  font-size: 12px;
  line-height: 22px;
}

/* ============================================================
   FAZIT-BLOCK (Schlussbewertung im Ergebnis)
   ============================================================ */

.fazit-box {
  background: linear-gradient(135deg, #f4f7fc 0%, #eaf0f8 100%);
  border: 2px solid var(--accent);
  border-left: 8px solid var(--accent);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 10px 0 20px;
  box-shadow: 0 2px 8px rgba(26,48,96,0.08);
}
.fazit-headline {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
}
.fazit-headline.fazit-ok { color: #1f5d1f; }
.fazit-headline.fazit-warn { color: var(--warn); }
.fazit-headline.fazit-stufe2 { color: #b5541c; }
.fazit-headline.fazit-exceed { color: #8a1f1f; }
.fazit-context { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.fazit-list { margin: 6px 0 10px 22px; padding: 0; }
.fazit-list li { margin: 3px 0; font-size: 13px; line-height: 1.5; }
.fazit-list li.fazit-ok { color: #1f5d1f; }
.fazit-list li.fazit-warn { color: var(--warn); }
.fazit-list li.fazit-stufe2 { color: #b5541c; }
.fazit-list li.fazit-exceed { color: #8a1f1f; }
.fazit-conclusion {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
  color: #2a2f3a;
}

/* ============================================================
   TABLES (Layers, Samples, Receptors)
   ============================================================ */

.layers-table, .samples-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12.5px;
}

.layers-table th, .samples-table th {
  background: #f0f3f7;
  text-align: left;
  padding: 7px 8px;
  border-bottom: 2px solid var(--border);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.layers-table td, .samples-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}
.layers-table tr:last-child td,
.samples-table tr:last-child td {
  border-bottom: none;
}

.layers-table input, .samples-table input, .layers-table select, .samples-table select {
  width: 100%;
  min-width: 60px;
  padding: 5px 7px;
  font-size: 12px;
  border-radius: 4px;
}
.layers-table input.name {
  min-width: 110px;
}

/* ============================================================
   SOIL COLUMN PANEL
   ============================================================ */

.layers-and-column {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}

.layers-left {
  min-width: 0;
}

.soil-column-panel {
  background: #f5f7fa;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px 14px;
  text-align: center;
  position: sticky;
  top: 16px;
}

.soil-column-panel-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}

#soil-column-wrap {
  display: flex;
  justify-content: center;
  min-height: 40px;
}

#soil-column-wrap svg {
  max-width: 100%;
}

/* ============================================================
   STANDORT-VORSCHAU (Live-Hero)
   ============================================================ */

.standort-vorschau {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  min-height: 80px;
  position: relative;
}
.standort-vorschau svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.standort-vorschau.loading { opacity: 0.5; transition: opacity 0.15s; }
.vorschau-placeholder {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 40px 12px;
}

.soil-empty {
  font-size: 11px;
  color: var(--muted);
  padding: 12px 0;
}

/* ============================================================
   FLOW PREVIEW
   ============================================================ */

#flow-preview {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
#flow-preview strong {
  color: var(--fg);
}

/* ============================================================
   SICKERSTRECKE HINT
   ============================================================ */

#sickerstrecke-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
#sickerstrecke-hint strong {
  color: var(--accent);
}

/* ============================================================
   STATUS BADGES
   ============================================================ */

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.status-badge.ok           { background: var(--ok);      color: white; }
.status-badge.warnung      { background: var(--warn);    color: white; }
.status-badge.ueberschreitung { background: var(--exceed); color: white; }
.status-badge.gfs_ueberschritten_bm_eingehalten { background: #b5541c; color: white; }
.status-badge.unbekannt    { background: var(--unknown); color: white; }

/* ============================================================
   RESULTS — SUMMARY STRIP
   ============================================================ */

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
}
.results-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.summary-strip {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.summary-overall {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-overall .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.summary-overall .status-badge {
  font-size: 13px;
  padding: 5px 16px;
}

.summary-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

.summary-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   RESULTS — SUBSTANCE CARDS
   ============================================================ */

.section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 20px 0 10px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 6px;
}

/* ── GFS-Ausschöpfung auf einen Blick ────────────────────────────────── */
.gfs-overview-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 6px;
  box-shadow: 0 1px 3px rgba(27, 38, 52, 0.06);
  margin-bottom: 6px;
}
.gfs-overview-svg {
  width: 100%;
  height: auto;
  display: block;
}
.gfs-overview-svg rect[rx] { transition: opacity 0.15s ease; }
.gfs-overview-svg:hover rect[fill^="#1e"],
.gfs-overview-svg:hover rect[fill^="#a8"],
.gfs-overview-svg:hover rect[fill^="#8c"] { opacity: 0.92; }

.substance-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s, transform 0.15s;
}
.substance-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  transform: translateY(-1px);
}
.substance-card.ok           { border-left-color: var(--ok); }
.substance-card.warnung      { border-left-color: var(--warn); }
.substance-card.ueberschreitung { border-left-color: var(--exceed); }
.substance-card.gfs_ueberschritten_bm_eingehalten { border-left-color: #b5541c; }
.substance-card.unbekannt    { border-left-color: var(--unknown); }

.substance-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.substance-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.substance-card-kd {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.substance-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
  margin-bottom: 14px;
}
.metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.metric-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.ratio-bar-track {
  height: 6px;
  background: #eef1f5;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ratio-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ratio-bar-fill.ok           { background: var(--ok); }
.ratio-bar-fill.warnung      { background: var(--warn); }
.ratio-bar-fill.ueberschreitung { background: var(--exceed); }
.ratio-bar-fill.gfs_ueberschritten_bm_eingehalten { background: #b5541c; }
.massstab-zeile { font-size: 11px; color: #6a6055; margin-top: 4px; }
.fazit-stufe2 { color: #b5541c; }
.ratio-bar-fill.unbekannt    { background: var(--unknown); }

.ratio-label {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ratio-label .exceed-flag {
  color: var(--exceed);
  font-weight: 700;
}

/* ============================================================
   RESULTS — BTC CHARTS
   ============================================================ */

#btc-charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.chart-container {
  background: white;
  border: 1px solid var(--border);
  border-left: 6px solid var(--unknown);
  border-radius: 10px;
  padding: 16px 16px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
}
.chart-container[data-status="ok"]              { border-left-color: var(--ok); }
.chart-container[data-status="warnung"]         { border-left-color: var(--warn); }
.chart-container[data-status="ueberschreitung"] { border-left-color: var(--exceed); }
.chart-container[data-status="unbekannt"]       { border-left-color: var(--unknown); }

.chart-container h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.chart-stats {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  display: inline-flex;
  gap: 14px;
}
.chart-stats .stat-label { color: var(--muted); margin-right: 4px; }
.chart-stats .stat-value { font-weight: 700; color: var(--fg); }

.chart-canvas-wrap {
  position: relative;
  height: 240px;
}

/* Badge in der Plot-Ecke wenn GFS/MW oberhalb des Datenbereichs liegt */
.chart-out-of-range-badge {
  position: absolute;
  top: 10px;
  right: 16px;
  background: white;
  border: 1.2px solid var(--warn);
  color: var(--warn);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
  font-variant-numeric: tabular-nums;
}

/* Linear/Log-Toggle + Zoom-Reset im Chart-Header */
.chart-controls {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
}
.chart-btn {
  background: white;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1.2;
}
.chart-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.chart-btn[data-active="1"] {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.chart-btn.chart-zoom-in,
.chart-btn.chart-zoom-out,
.chart-btn.chart-reset {
  font-size: 13px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
.chart-controls-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

/* Hinweis, wenn die GFS weit außerhalb der BTC-Skala liegt */
.chart-gfs-out {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 8px;
  background: #f0f3f7;
  border-left: 3px solid var(--warn);
  border-radius: 3px;
}

/* ============================================================
   Brücke EBV-Wizard → Verbleibeanalyse
   ============================================================ */

.ebv-result-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ebv-result-actions .btn {
  align-self: flex-start;
  font-size: 15px;
  padding: 9px 18px;
}
.ebv-result-actions .hint {
  color: var(--muted);
  font-size: 12px;
}

.va-bridge-banner {
  position: relative;
  margin-bottom: 16px;
  padding: 14px 40px 14px 16px;
  border: 1px solid #1a6fcc;
  background: linear-gradient(180deg, #eaf3fc 0%, #d8e9f8 100%);
  border-radius: 6px;
  color: #0b3a6b;
  font-size: 14px;
}
.va-bridge-banner-headline {
  font-weight: 700;
  margin-bottom: 4px;
}
.va-bridge-banner-summary {
  font-size: 13px;
  color: #1a3a5e;
  margin-bottom: 6px;
}
.va-bridge-banner-hints {
  margin: 6px 0 0 16px;
  padding: 0;
  font-size: 12.5px;
  color: #1a3a5e;
}
.va-bridge-banner-hints li {
  margin: 2px 0;
}
.va-bridge-banner-unmapped {
  margin-top: 6px;
  font-size: 12px;
  color: var(--warn);
}
.va-bridge-banner-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #0b3a6b;
  line-height: 1;
}
.va-bridge-banner-close:hover {
  color: #8a1f1f;
}

.ebv-einbauweise-svg {
  margin-top: 14px;
  padding: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
}
.ebv-einbauweise-svg svg {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Anreicherungskriterium / Filterkapazität (UBA Tab. 6-1)
   ============================================================ */

.fk-block {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  border-left: 3px solid #999;
  background: #f0f3f7;
}
.fk-block.fk-ok      { border-left-color: #1f7a2d; background: #eef8f0; }
.fk-block.fk-warn    { border-left-color: #c47f00; background: #fcf6e6; }
.fk-block.fk-exceed  { border-left-color: #a52626; background: #fbecec; }
.fk-block.fk-unknown { border-left-color: #999;    background: #f4f4f4; }

.fk-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.fk-label    { color: #444; font-weight: 600; }
.fk-value    { color: #1b2634; font-variant-numeric: tabular-nums; }

.fk-bar-track {
  width: 100%;
  height: 6px;
  background: #e2e6ec;
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0;
}
.fk-bar-fill           { height: 100%; transition: width 0.3s; }
.fk-bar-fill.fk-ok     { background: #1f7a2d; }
.fk-bar-fill.fk-warn   { background: #c47f00; }
.fk-bar-fill.fk-exceed { background: #a52626; }
.fk-bar-track { position: relative; }
.fk-bar-grenze { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #a52626; }

.fk-ratio {
  color: #555;
  font-size: 11px;
  font-style: italic;
}

/* Standortdaten-Panel (Schritt 0 des EBV-Checks) */
.standort-zeile { margin: 6px 0; font-size: 0.92em; line-height: 1.45; }
.standort-zeile ul { margin: 4px 0 4px 18px; }
.standort-warnung { color: #b45309; }
.standort-text {
  white-space: pre-wrap;
  font-size: 0.82em;
  background: rgba(0, 0, 0, 0.04);
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
}

.standort-echtbild {
  border-left: 3px solid #2563eb;
  padding-left: 10px;
  margin: 10px 0;
}

/* ============================================================
   HGW-Herleitung & Laengsschnitt (Station 2, 18.08.2026)
   Umbau 28.08.2026 nach design/Main.dc.html: der Block war ein
   zugeklapptes <details> und ist jetzt die Hauptsache von
   Station 2. Deshalb bekommt er einen eigenen Rahmen mit
   Titelzeile statt der Aufklapp-Optik von .ebv-wizard-matrix.
   ============================================================ */

.ls-block { border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 14px 16px 16px; margin-top: 18px;
  background: #f7f9fc; }
.ls-block-titel { margin: 0; font-size: 17px; font-weight: 700;
  color: var(--accent); letter-spacing: -0.01em; }
.ls-block-frage { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }

.ls-zone { border: 1px solid var(--border, #d8dee6); border-radius: 8px;
  padding: 12px 14px; margin: 12px 0; background: var(--card); }
.ls-zone-titel { font-weight: 600; margin-bottom: 6px; }
/* Der HGW-Ansatz sitzt jetzt als Unterteil in Bereich 1 - abgesetzt
   durch eine Trennlinie, nicht durch einen zweiten Rahmen. */
.ls-zone-teil { margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border); }
.ls-zone-untertitel { font-weight: 600; font-size: 13px; color: var(--accent);
  margin-bottom: 6px; }
/* Erklaerung eines Bereichs (28.08.2026): Warum - wie - was kommt
   heraus. Abgesetzt vom Rest, damit man sie einmal liest und dann
   ueberspringt. */
.ls-erklaerung {
  background: var(--accent-soft); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 12px 15px; margin: 8px 0 14px; font-size: 13px;
  line-height: 1.6; max-width: 96ch;
}
.ls-erklaerung p { margin: 0; }
.ls-erklaerung-warum { color: var(--fg); }
.ls-erklaerung-schritte {
  margin: 10px 0; padding-left: 20px; color: var(--fg);
}
.ls-erklaerung-schritte li { margin: 5px 0; }
.ls-erklaerung-ergebnis {
  color: var(--fg); padding-top: 9px;
  border-top: 1px solid var(--border);
}
.ls-btnrow { display: flex; align-items: center; gap: 12px; margin-top: 8px;
  flex-wrap: wrap; }
.ls-koordpaar { display: flex; gap: 8px; }
.ls-koordpaar input { width: 50%; }

.ls-schichten { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ls-schichten th { text-align: left; font-size: 12px; padding: 4px 6px; }
.ls-schichten td { padding: 3px 6px; }
.ls-schichten input[type=text] { width: 100%; }
.ls-schichten input[type=number] { width: 90px; }
.ls-s-meb-zelle { text-align: center; }
.ls-s-weg { border: none; background: none; color: var(--exceed);
  font-size: 16px; cursor: pointer; padding: 2px 8px; }

.ls-meldung { border-radius: 6px; padding: 9px 12px; margin: 10px 0;
  font-size: 13px; background: var(--warn-bg); border-left: 4px solid var(--warn); }
.ls-meldung.ok { background: var(--ok-bg); border-left-color: var(--ok); }
.ls-meldung.warn { background: var(--exceed-bg); border-left-color: var(--exceed); }
.ls-hgw-wert { font-size: 15px; margin: 8px 0 2px; }
.ls-herleitung { font-size: 13px; margin: 8px 0; line-height: 1.55; }
.ls-protokoll { font-size: 12px; color: var(--muted, #5a6572); margin-top: 4px;
  font-variant-numeric: tabular-nums; }

.ls-tabelle { width: 100%; border-collapse: collapse; margin-top: 10px;
  font-variant-numeric: tabular-nums; }
.ls-tabelle th { text-align: right; font-size: 12px; padding: 5px 8px;
  border-bottom: 2px solid var(--border, #d8dee6); }
.ls-tabelle th:first-child { text-align: left; }
.ls-tabelle td { text-align: right; padding: 4px 8px;
  border-bottom: 1px solid var(--border, #e6eaef); }
.ls-tabelle td:first-child { text-align: left; }
.ls-zeile-kritisch td { background: var(--exceed-bg); }

.ls-marke { display: inline-block; border-radius: 10px; padding: 1px 9px;
  font-size: 12px; }
.ls-guenstig { background: var(--ok-bg); color: var(--ok);
  border: 1px solid var(--ok-border); }
.ls-unguenstig { background: var(--warn-bg); color: var(--warn);
  border: 1px solid var(--warn-border); }
.ls-unzulaessig { background: var(--exceed-bg); color: var(--exceed);
  border: 1px solid var(--exceed-border); }
.ls-offen { background: #eef1f4; color: #5a6572; border: 1px solid #cdd5dd; }

/* ============================================================
   Bauwerks-Querschnitt (Station 2, 20.08.2026)
   Karte im Stil der ZDB-Einbauweisen-Blaetter: dunkler Kopfbalken,
   Schichtstapel mit MEB-Punktraster, HGW-Marke, H-Pfeil.
   ============================================================ */

.ls-qs { border: 1px solid var(--border); border-radius: 8px;
  margin-top: 14px; max-width: 640px; overflow: hidden;
  background: var(--card); }
/* Herausgeloest aus Zone C (28.08.2026): die Zeichnung ist der Punkt
   des Werkzeugs und darf nicht mehr wie eine Randnotiz aussehen. */
.ls-qs-gross { max-width: 100%; margin: 16px 0;
  border: 1px solid var(--accent); box-shadow: 0 1px 4px rgba(31,58,99,0.10); }
.ls-qs-gross svg { max-height: 460px; }
.ls-qs-kopf { display: flex; justify-content: space-between;
  align-items: baseline; background: var(--accent); color: #fff;
  padding: 7px 12px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; }
.ls-qs-tag { font-size: 11px; font-weight: 400; letter-spacing: 0.02em;
  text-transform: none; opacity: 0.85; max-width: 55%; text-align: right; }
.ls-qs svg { display: block; width: 100%; height: auto; }
.ls-qs-legende { font-size: 11px; color: var(--muted);
  padding: 6px 12px 9px; border-top: 1px solid var(--border); }

/* ============================================================
   WAS DARAUS FOLGT (28.08.2026, nach design/Main.dc.html)
   Die Kette unter dem Querschnitt: Gelaende -> Unterkante ->
   Sickerstrecke -> Fall der Verordnung. Jede Zeile traegt ihre
   Herkunft, weil eine Zahl ohne Fundstelle in diesem Programm
   nichts wert ist.
   ============================================================ */

.ls-folgen { margin: 16px 0 4px; }
.ls-folgen-kopf {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.ls-folgen-kette {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.ls-folge {
  flex: 1 1 170px; background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: 11px 13px; min-width: 0;
}
.ls-folge-frage { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.ls-folge-wert {
  font-size: 18px; font-weight: 650; margin-top: 4px;
  font-variant-numeric: tabular-nums; line-height: 1.25;
  overflow-wrap: break-word;
}
.ls-folge-wert.ton-normal { color: var(--fg); }
.ls-folge-wert.ton-ok     { color: var(--ok); }
.ls-folge-wert.ton-warn   { color: var(--warn); }
.ls-folge-wert.ton-exceed { color: var(--exceed); }
/* Was fehlt, sieht aus wie eine Luecke - nicht wie ein Ergebnis. */
.ls-folge-offen {
  font-size: 13px; font-weight: 400; font-style: italic; color: var(--unknown);
}
.ls-folge-quelle { font-size: 11px; color: var(--muted); margin-top: 5px;
  line-height: 1.45; }
.ls-folge-pfeil {
  display: flex; align-items: center; color: var(--border);
  font-size: 17px; flex: 0 0 auto;
}
.ls-folgen-urteil {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 6px;
  font-size: 13px; line-height: 1.6; max-width: 92ch;
}
.ls-folgen-urteil.ok {
  background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok);
}
.ls-folgen-urteil.warn {
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  color: var(--warn);
}
.ls-folgen-urteil.neutral {
  background: var(--unknown-bg); border: 1px solid var(--unknown-border);
  color: var(--unknown);
}

@media (max-width: 900px) {
  .ls-folge-pfeil { display: none; }
  .ls-folge { flex-basis: 100%; }
}

/* Stationen-Eingabe der Gradiente: ein lesbares Textfeld, kein Guckloch */
#ls-stationen-text { width: 100%; min-height: 140px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; resize: vertical; }

/* Schichteditor: Reihenfolge-Pfeile neben dem Entfernen-Kreuz */
.ls-s-werkzeuge { white-space: nowrap; }
.ls-s-hoch, .ls-s-runter { border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 2px 5px; }
.ls-s-hoch:hover, .ls-s-runter:hover { color: var(--accent); }

/* ============================================================
   Gefuehrter Ablauf: Checkliste des Laengsschnitt-Blocks (21.08.2026)
   Zeigt vor dem Rechnen, welche der fuenf Angaben stehen, woher sie
   kommen und was fehlt - statt einer roten Meldung danach.
   ============================================================ */

#ls-rechnen-grund { margin-top: 6px; }


/* ============================================================
   Wie belastbar ist das Urteil? (Sensitivitaet, 24.08.2026)
   ============================================================ */

.sens-reihe { border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin: 12px 0; background: var(--card); }
.sens-titel { font-weight: 600; margin-bottom: 2px; }
.sens-reihe .ls-tabelle { margin-top: 8px; }
.sens-reihe tr.sens-basis td { background: var(--accent-soft); }
#sens-panel { margin-bottom: 8px; }

/* ---------- Die Wahl je Schicht (Umkehrung, 28.08.2026) ---------- */
.ls-umk-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 6px 0 10px; }
.ls-umk-kopf .btn { margin-left: auto; }
.ls-umk-fuge { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); }
/* Zugeklappt nur Kurzbegriff und Klassen; die Einzelheiten auf Klick
   (Festlegung Gerion, 10.09.2026). */
.umk-schicht { border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; margin: 6px 0; background: var(--card); }
.umk-schicht > summary { cursor: pointer; list-style: none; display: flex;
  flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; }
.umk-schicht > summary::-webkit-details-marker { display: none; }
.umk-schicht > summary::before { content: "▶"; font-size: 10px;
  color: var(--muted); transition: transform 0.15s; }
.umk-schicht[open] > summary::before { transform: rotate(90deg); }
.umk-kurz { font-size: 13px; font-weight: 700; min-width: 3.2em;
  text-align: center; padding: 1px 8px; border-radius: 6px;
  color: var(--accent); border: 1px solid var(--accent); }
.umk-dicke, .umk-leer, .umk-offen-label { font-size: 12px; color: var(--muted); }
.umk-dicke { margin-right: 4px; }
.umk-chip { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ok);
  background: var(--ok-bg); border: 1px solid var(--ok-border); cursor: help; }
.umk-chip.bedingt { color: var(--warn); background: var(--warn-bg);
  border-color: var(--warn-border); }
.umk-chip.offen { color: var(--muted); background: transparent;
  border-color: var(--border); font-weight: 500; }
.umk-body { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.umk-titel { font-size: 12px; font-weight: 700; color: var(--muted); margin: 8px 0 2px; }
.umk-anf { margin: 2px 0 6px; padding-left: 18px; font-size: 13px; }
.umk-anf li { margin: 1px 0; }
.umk-fund { font-size: 11.5px; color: var(--muted); }
.umk-wegfall { font-size: 13px; color: var(--exceed); background: var(--exceed-bg);
  border: 1px solid var(--exceed-border); border-radius: 6px;
  padding: 5px 9px; margin: 5px 0; }
.umk-klein { font-size: 12px; color: var(--muted); margin-top: 5px; }
/* Gemischanforderungen nach TL SoB-StB in der aufgeklappten Schicht (12.09.2026) */
.umk-gemische { margin-top: 5px; }
.umk-gemische > summary { cursor: pointer; list-style: revert; }
.umk-gemische .umk-mehr { text-decoration: underline dotted; }
.umk-gemische[open] .umk-mehr { display: none; }
.umk-tabelle-scroll { overflow-x: auto; margin: 4px 0 2px; }
.umk-tabelle { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.umk-tabelle th, .umk-tabelle td { text-align: left; vertical-align: top; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--border, #e3e3e3); white-space: nowrap; }
.umk-tabelle th { font-weight: 600; color: var(--muted); }
.umk-tabelle td:nth-child(2) { white-space: normal; min-width: 220px; }
.umk-tabelle tr.umk-bedingt td { color: var(--muted); }
.umk-offen { font-size: 13px; color: var(--warn); margin-top: 5px; }

/* ---------- Ergebnisvorschau-Leiste (28.08.2026) ---------- */
.flow-stand { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 10px 2px 2px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); }
.fs-titel { font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.fs-chip { display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
  font-size: 12px; background: var(--card); color: var(--fg); cursor: pointer; }
.fs-chip.ok { border-color: var(--ok-border); background: var(--ok-bg); }
.fs-chip.ok .fs-marke { color: var(--ok); font-weight: 700; }
.fs-chip.halb { border-color: var(--warn-border); background: var(--warn-bg); }
.fs-chip.offen { color: var(--muted); border-style: dashed; }
.fs-chip:hover { border-color: var(--accent); }
.fs-wert { font-weight: 600; }
.fs-wert.offen { font-weight: 400; font-style: italic; color: var(--muted); }
.fs-pfeil { color: var(--muted); font-size: 11px; }

/* ---------- Einbauort-Karte in Station 3 (28.08.2026) ---------- */
.station3-ort-zeile { display: flex; gap: 14px; align-items: stretch;
  flex-wrap: wrap; }
#station3-karte { height: 240px; flex: 1 1 380px; min-width: 280px;
  border: 1px solid var(--border); border-radius: 6px;
  position: relative; z-index: 0; }
.station3-ort-info { flex: 1 1 220px; display: flex;
  flex-direction: column; gap: 10px; justify-content: flex-start; }
.station3-ort-info .btn { align-self: flex-start; }

/* ---------- Adress-Vorschlaege als Dropdown (28.08.2026) ---------- */
#standort-adresse-treffer { border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 30, 50, 0.12); max-height: 280px;
  overflow-y: auto; }
#standort-adresse-treffer .adresse-vorschlag { display: block; width: 100%;
  text-align: left; border: 0; border-bottom: 1px solid var(--border);
  background: var(--card); padding: 8px 12px; font-size: 13px;
  cursor: pointer; color: var(--fg); }
#standort-adresse-treffer .adresse-vorschlag:hover,
#standort-adresse-treffer .adresse-vorschlag.aktiv {
  background: var(--accent-soft); }
#standort-adresse-treffer .av-haupt { font-weight: 600; }
#standort-adresse-treffer .adresse-lizenz { margin: 6px 12px; }

/* ---------- Bautechnik-Ueberlagerung, zwei getrennte Sperren (28.08.2026) --- */
/* Deklarierte Eignung passt nicht: Angabe des Nutzers, kein Verbot des
   Regelwerks - gedaempft statt Alarm-Schraffur. */
.ebv-matrix td.ebv-cell-techdecl { background: #efece6; color: #9a917f; }
.ebv-leg-sw.techdecl { background: #efece6; }
.ebv-matrix tr.ebv-row-techblock th.ebv-h-row { color: #8a8171; }
/* Klassensperre der Regelbasis: rotes Badge, Zeile klar als gesperrt lesbar */
.ebv-tech-badge.klasse { background: #f3c9c9; color: #7a1414; }
.ebv-matrix tr.ebv-row-klassensperre th.ebv-h-row { color: #7a2a2a; }

/* ── Station 2 in Weg B: das Bauwerk (11.09.2026) ──────────────────────
   Befund Gerion 11.09.: zu voll, zu viel Scrollen, unklar was zu tun ist.
   Links die Angaben, rechts der Querschnitt (laeuft beim Scrollen mit);
   eine Zeile "Als Naechstes"; Strecke und Erklaerungen eingeklappt. */
#station-bauwerk .ls-block { border: none; background: none; padding: 0;
  margin-top: 6px; }
.bauwerk-raster { display: grid; gap: 18px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bauwerk-eingaben > .ls-zone:first-child { margin-top: 0; }
.bauwerk-bild { position: sticky; top: 12px; }
.bauwerk-bild .ls-qs-gross { margin: 0; }
/* Beschriftung ueber dem Feld wie bei allen anderen (display:block hob
   die Spalte der label-Regel auf - das Feld hing neben dem Text). */
.bauwerk-vorlage { margin-top: 10px; }
.bauwerk-vorlage > select { width: 100%; box-sizing: border-box; }
@media (max-width: 1050px) {
  .bauwerk-raster { grid-template-columns: 1fr; }
  .bauwerk-bild { position: static; }
}

.naechster-schritt { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 9px 14px; margin: 4px 0 12px; border-radius: 6px;
  font-size: 13.5px; line-height: 1.5; border: 1px solid var(--border);
  background: var(--accent-soft); }
.naechster-schritt:empty { display: none; }
.ns-titel { font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.ns-text { flex: 1 1 320px; }
.naechster-schritt.ok { background: var(--ok-bg); border-color: var(--ok-border); }
.naechster-schritt.ok .ns-titel { color: var(--ok); }
.naechster-schritt.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.naechster-schritt.warn .ns-titel { color: var(--warn); }
.ns-sprung { border: 1px solid var(--accent); background: var(--card);
  color: var(--accent); border-radius: 5px; font-size: 12.5px; padding: 3px 12px;
  cursor: pointer; white-space: nowrap; }
.ns-sprung:hover { background: var(--accent); color: #fff; }

.ls-schichten-details { margin-top: 10px; }
.ls-schichten-details > summary,
.ls-herleitung-details > summary { cursor: pointer; font-size: 13px;
  color: var(--accent); font-weight: 600; }
.ls-schichten-details[open] > summary { margin-bottom: 6px; }
.ls-herleitung-details { margin-top: 8px; }
.ls-quelle-feld { display: block; margin-top: 8px; }

.ls-strecke { border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin: 12px 0; background: var(--card); }
.ls-strecke > summary { cursor: pointer; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.ls-strecke > summary .ls-zone-titel { margin: 0; }
.ls-strecke[open] > summary { margin-bottom: 10px; }

.erklaer { margin: 10px 0 0; font-size: 13px; }
.erklaer > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.erklaer ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.6;
  color: var(--fg); max-width: 92ch; }
.erklaer li { margin: 4px 0; }

/* ── Station 3 und 4 (11.09.2026): Material und Analytik, Projekt ─────
   In Weg B zeigt Station 2 den echten Querschnitt - die Prinzipskizzen
   der EBV-Pruefung (Schritt 2 und neben dem Ergebnis) entfallen dort. */
body[data-weg="B"] .ebv-step-2col { grid-template-columns: 1fr; }
body[data-weg="B"] .ebv-ergebnis-reihe > .ebv-einbauweise-svg { display: none; }
body[data-weg="B"] .ebv-ergebnis-reihe > .ebv-result-box { flex-basis: 100%; }
.projekt-angaben { display: grid; gap: 12px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bauwerk-weitere, #beurteilung-details { margin-top: 10px; }

/* Station 3, Nachschaerfung (11.09.2026): Beantwortetes einklappen.
   Die DIN-18196-Zuordnung braucht nur, wer die Bodenart selbst waehlt. */
#ebv-beantwortet-bodenart:not(.hidden) ~ #ebv-optionen-bodenart.hidden ~ .param-help {
  display: none; }
/* "Rechnerischen Nachweis führen" ersetzt Untergrund und Eluatwerte der
   Station darunter - in Weg B genau die Uebertragung, die entfallen soll. */
body[data-weg="B"] .ebv-result-actions { display: none; }
.eluat-quellen { display: grid; gap: 12px; margin: 10px 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.eluat-quellen > .analyse-import-box { margin: 0; }

/* ── Kopfleiste (11.09.2026) ───────────────────────────────────────────
   Ist der Weg gewaehlt, steht die Einleitung nicht mehr ueber jeder
   Station, und die Ablaufschritte tragen nur Nummer und Namen - was die
   Station tut, sagt ihre eigene Ueberschrift. Die Leiste wird damit von
   einem Block zur Orientierungszeile. */
body[data-weg] #flow-intro { display: none; }
body[data-weg] .flow-step-sub { display: none; }
body[data-weg] .flow-step { padding: 8px 14px; }

/* Befunde vom 11.09.2026 (Durchklicken Gerion)
   Die Fugen-Frage erbte die allgemeine label-Regel (Spalte, Grossbuchstaben):
   das Kaestchen stand ueber einem Text in Versalien. */
.ls-umk-fuge { flex-direction: row; text-transform: none; letter-spacing: normal;
  font-weight: 500; }
/* Die Trasse wird auf einer eigenen Karte gesetzt. */
.ls-trasse-karte { height: 280px; margin-top: 10px; border: 1px solid var(--border);
  border-radius: 6px; }
.ls-trasse-karte.leaflet-container { cursor: crosshair; }
.ls-trasse .ls-btnrow { justify-content: space-between; }

/* ── Mehrere MEB-Schichten (11.09.2026) ────────────────────────────────
   Befund Gerion: STS und FSS als MEB brauchen je eigenes Material und
   eigene Analytik. Die Zeile der Schicht in Bearbeitung ist hervorgehoben;
   Material, Eluat und Verbleibeanalyse darunter gelten fuer sie. */
.meb-schichten { border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 14px; background: var(--card); }
.meb-schichten-kopf { display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap; margin-bottom: 8px; }
.meb-zeile { display: grid; align-items: center; gap: 10px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 6px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, 1.1fr)
    minmax(0, 1.3fr) minmax(0, .8fr); }
.meb-zeile + .meb-zeile { margin-top: 4px; }
.meb-zeile.aktiv { border-color: var(--accent); background: rgba(26, 111, 204, 0.06); }
.meb-wahl { display: flex; flex-direction: row; align-items: center; gap: 8px;
  margin: 0; cursor: pointer; font-size: 13px; font-weight: 500;
  text-transform: none; letter-spacing: normal; color: var(--fg); }
.meb-wahl input { width: auto; margin: 0; }
.meb-zeile select { width: 100%; min-width: 0; }
.meb-ew, .meb-analytik { font-size: 12.5px; color: var(--muted); }
.meb-ergebnis { font-size: 12.5px; font-weight: 600; }
.meb-ergebnis.zulaessig { color: var(--ok); }
.meb-ergebnis.zulaessig_mit_fussnote { color: var(--warn); }
.meb-ergebnis.unzulaessig, .meb-ergebnis.nicht_relevant { color: var(--exceed); }
.meb-ergebnis.offen, .meb-ergebnis.unbekannt { color: var(--muted); font-weight: 500; }
.meb-eluat-fuer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 6px 0 10px; font-size: 13px; }
.meb-knopf { border: 1px solid var(--border); background: var(--card);
  border-radius: 999px; padding: 2px 10px; font-size: 12.5px; cursor: pointer;
  color: var(--fg); }
.meb-knopf.aktiv { border-color: var(--accent); color: var(--accent); font-weight: 600; }
@media (max-width: 900px) {
  .meb-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Die Wahl-Liste zeigt je Schicht ihren Abstand zum Grundwasser. */
.umk-h { font-size: 12px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.umk-h.ok { color: var(--ok); border-color: var(--ok-border); }
.umk-h.warn { color: var(--warn); border-color: var(--warn-border); }
.umk-h.exceed { color: var(--exceed); border-color: var(--exceed); }
.umk-mehr { font-size: 12px; color: var(--accent); white-space: nowrap; }
/* Kontoanzeige und Abmelden im Kopf (Betrieb mit Konten, 16.09.2026) */
.header-konto { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.header-badge-button { cursor: pointer; font-family: inherit; }
.header-badge-button:hover { background: rgba(255,255,255,0.18); }

/* Standortergebnis waehrend einer neuen Abfrage: bleibt stehen, abgeblendet
   (16.09.2026) - kein Verstecken, sonst schrumpft die Seite und springt. */
#standort-ergebnis.wird-aktualisiert {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}