/* ==========================================================================
   Lead-Erfassung, NEXUS Corporate Design
   Farben nach Corporate Design Manual (Vault: Vertrieb/NEXUS Corporate Design).
   Rot ist Akzent, nicht Fläche. Dunkelblau trägt die Struktur, Eisblau den Grund.
   Formensprache aus dem DGTI-Deck übernommen: 4 px Radius, Kicker mit Linie,
   Zahlen leicht und tabellarisch.
   ========================================================================== */

:root {
  --rot:        #B80F2E;
  --rot-tief:   #8E0B23;
  --hellrot:    #BA4C61;
  --dunkelblau: #1F2336;
  --grau:       #9C9D9F;
  --blau:       #35628B;
  --eisblau:    #E8ECF0;

  --grund:      #E7EBF0;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #F3F5F9;
  --linie:      rgba(31, 35, 54, 0.22);
  --linie-zart: rgba(31, 35, 54, 0.09);
  --text:       #1F2336;
  --text-weich: rgba(31, 35, 54, 0.76);
  --text-leise: rgba(31, 35, 54, 0.58);
  --rot-hauch:  rgba(184, 15, 46, 0.07);
  --akzent-text: #B80F2E;
  --schatten:   0 1px 3px rgba(31, 35, 54, 0.06);

  --sans: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r: 4px;
  --kopf-h: 3.5rem;
  color-scheme: light;
}

/* Drei Zustände: hell, dunkel, und "wie das Gerät". Der Umschalter setzt
   data-thema am html-Element, theme.js im head noch vor dem ersten Zeichnen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="light"]) {
    color-scheme: dark;
    --grund:      #10121A;
    --flaeche:    #1A1D28;
    --flaeche-2:  #12141C;
    --linie:      rgba(232, 236, 240, 0.20);
    --linie-zart: rgba(232, 236, 240, 0.10);
    --text:       #EDF0F4;
    --text-weich: rgba(237, 240, 244, 0.80);
    --text-leise: rgba(237, 240, 244, 0.62);
    --rot-hauch:  rgba(184, 15, 46, 0.20);
    --akzent-text: #F58199;
    --schatten:   0 1px 3px rgba(0, 0, 0, 0.45);
  }
}
:root[data-thema="dark"] {
    color-scheme: dark;
    --grund:      #10121A;
    --flaeche:    #1A1D28;
    --flaeche-2:  #12141C;
    --linie:      rgba(232, 236, 240, 0.20);
    --linie-zart: rgba(232, 236, 240, 0.10);
    --text:       #EDF0F4;
    --text-weich: rgba(237, 240, 244, 0.80);
    --text-leise: rgba(237, 240, 244, 0.62);
    --rot-hauch:  rgba(184, 15, 46, 0.20);
    --akzent-text: #F58199;
    --schatten:   0 1px 3px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
/* Klassen mit eigenem display schlagen sonst die UA-Regel für [hidden]. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.5 var(--sans);
  letter-spacing: -0.008em;
}

/* Der Bogen füllt genau einen Bildschirm. Gescrollt wird nur die Bühne,
   damit auf dem Tablet immer Kopf, Leitsystem und Aktionsleiste stehen. */
body.buehnenmodus {
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 0; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.45rem; }
a { color: inherit; }

/* --------------------------------------------------------------- Bausteine */

.kicker {
  display: flex; align-items: center; gap: 0.75em;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--akzent-text); margin: 0 0 0.6rem;
}
.kicker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184,15,46,.42), transparent); }
.kicker.klein { font-size: 0.62rem; margin: 0.9rem 0 0.45rem; }
.kicker.klein:first-child { margin-top: 0; }

.lead { color: var(--text-weich); margin: 0.35rem 0 0; font-size: 0.95rem; }
.hinweis { color: var(--text-leise); font-size: 0.8rem; margin: 0.28rem 0 0; line-height: 1.4; }
.leise { color: var(--text-leise); }
.luecke { flex: 1; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Pflichtfelder tragen ein lesbares Etikett. Ein einzelnes Zeichen wird am
   Stand übersehen, und dann fehlt beim Speichern genau das Feld. */
.pflicht {
  font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--akzent-text); background: var(--rot-hauch);
  border-radius: 2px; padding: 0.1rem 0.3rem; margin-left: 0.45em; vertical-align: 0.08em;
}

/* ------------------------------------------------------------------- Kopf */

.kopf {
  display: flex; align-items: center; gap: 1.5rem;
  height: calc(var(--kopf-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 1.25rem 0;
  /* Das Logo ist schwarz/rot und gehört laut CD auf hellen Grund. Der Kopf
     bleibt deshalb auch im dunklen Modus hell, wie ein Briefkopf. */
  background: #fff;
  border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: baseline; gap: 0.9rem; text-decoration: none; min-width: 0; }
.marke img { height: 20px; width: auto; display: block; }
.veranstaltung {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(31, 35, 54, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.haupt { display: flex; gap: 1.5rem; }
.haupt a {
  font-size: 0.9rem; font-weight: 500; text-decoration: none; color: rgba(31, 35, 54, 0.62);
  padding: 0.3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; flex: none;
}
.haupt a:hover { color: var(--dunkelblau); }
.haupt a[aria-current] { color: var(--dunkelblau); font-weight: 700; border-bottom-color: var(--rot); }
.wer { font-size: 0.82rem; color: rgba(31, 35, 54, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 12rem; }
.abmelden { margin: 0; }
/* Der Kopf bleibt hell, alles darunter folgt dem Thema. Die feste Farbe gilt
   deshalb nur im Briefkopf, sonst verschwindet der Knopf im Dunkeln. */
.verweis {
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.82rem;
  color: var(--text-leise); text-decoration: underline; cursor: pointer;
}
.kopf .verweis { color: rgba(31, 35, 54, 0.5); }
.verweis:hover { color: var(--rot); }

/* Segmentierter Umschalter. Sitzt auch vor der Anmeldung in der Kopfzeile:
   wer am Stand ein Tablet aufnimmt, soll lesen können, bevor er eingeloggt ist. */
.thema { display: flex; border: 1px solid rgba(31, 35, 54, 0.18); border-radius: 999px; padding: 2px; }
.thema button {
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem; min-height: 0; color: rgba(31, 35, 54, 0.55);
}
.thema button:hover { color: #1F2336; }
.thema button[aria-pressed="true"] { background: #1F2336; color: #fff; }
/* iPad quer (64rem) und schmaler: das Veranstaltungslabel weicht zuerst. */
@media (max-width: 64rem) {
  .kopf { gap: 1rem; }
  .veranstaltung { display: none; }
  .haupt { gap: 1.1rem; }
}
/* iPad hoch (768px = 48rem) liegt hier: Nutzername raus, alles enger, damit
   Navigation und Umschalter nebeneinander bleiben. */
@media (max-width: 52rem) {
  .kopf { gap: 0.7rem; padding-inline: 0.85rem; }
  .wer { display: none; }
  .haupt { gap: 0.85rem; }
  .haupt a { font-size: 0.84rem; }
  .thema button { padding-inline: 0.5rem; font-size: 0.7rem; }
}
/* Telefonbreite: der Abmelden-Text weicht dem Umschalter. */
@media (max-width: 40rem) {
  .kopf { gap: 0.55rem; padding-inline: 0.7rem; }
  .haupt { gap: 0.7rem; }
  .haupt a { font-size: 0.8rem; }
}

/* ------------------------------------------------------------ Seitengerüst */

main { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
main.mitte { max-width: 26rem; padding-top: 4rem; }

.seiten-kopf { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.seiten-kopf .kicker { margin-bottom: 0.35rem; }
.knopfreihe { display: flex; gap: 0.5rem; margin-left: auto; }

.tafel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 1.25rem; box-shadow: var(--schatten);
}
.anmeldung .feld { margin-bottom: 1rem; }
.anmeldung h1 { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ Felder */

/* Ein Schritt zerfällt in Blöcke. Der Block ist das, was das Auge zuerst
   findet, das Feld erst danach. */
.bloecke { display: flex; flex-direction: column; gap: 0.85rem; }
.block {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 0.9rem 1rem 1rem;
}
.block-kopf {
  margin: -0.15rem 0 0.8rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--akzent-text);
  display: flex; align-items: center; gap: 0.7em;
}
.block-kopf::after { content: ""; flex: 1; height: 1px; background: var(--linie-zart); }

.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 0.85rem 1.35rem; align-items: start; }
[data-block="Am Stand"] > .felder { grid-template-columns: 1fr 1fr; }
[data-block="Am Stand"] > .felder > .feld { grid-column: auto; }
/* "Am Stand" trägt keine Kartenumrandung: zwei leichte Klappmenüs als Kopfzeile
   des Schritts, damit die inhaltlichen Blöcke darunter das Gewicht tragen. */
[data-block="Am Stand"] { background: none; border: 0; padding: 0 0 0.2rem; }
[data-block="Am Stand"] .block-kopf { display: none; }
@media (max-width: 40rem) { [data-block="Am Stand"] > .felder { grid-template-columns: 1fr; } }
.feld.weit { grid-column: 1 / -1; }
.feld.halb { grid-column: span 2; }
@media (max-width: 60rem) { .feld.halb { grid-column: 1 / -1; } }
.gruppe { grid-column: 1 / -1; margin: 0.25rem 0 -0.4rem; }
.gruppe:first-child { margin-top: 0; }

label { display: block; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.005em; margin-bottom: 0.3rem; color: var(--text); }
legend { font-size: 0.88rem; font-weight: 700; padding: 0; margin-bottom: 0.4rem; color: var(--text); }
fieldset { border: 0; margin: 0; padding: 0; }

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
select, textarea {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; font-weight: 500; color: var(--text);
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r);
  min-height: 46px;
}
textarea { resize: vertical; line-height: 1.45; min-height: 4.5rem; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
  linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.7rem center; background-size: 6px 6px; background-repeat: no-repeat;
  padding-right: 2.2rem; }

:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
input:focus, textarea:focus, select:focus { border-color: var(--blau); }

/* --------------------------------------------------------------- Auswahlen */

.wahlen { display: flex; flex-direction: column; gap: 0.4rem; }
/* Über die volle Breite fließen die Optionen in Spalten, statt eine lange
   Säule zu bilden, die den Bildschirm sprengt. */
.feld.weit > fieldset > .wahlen:not(.stufen) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.wahlen.fluss { flex-flow: row wrap; }
.wahlen.kurz { flex-flow: row wrap; }
.wahlen.kurz .wahl { flex: 1 1 auto; }
.wahlen.fluss .wahl { flex: 1 1 14rem; }

.wahl {
  display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; cursor: pointer;
  padding: 0.6rem 0.75rem; min-height: 46px; font-weight: 500; font-size: 0.98rem;
  background: var(--flaeche-2); border: 1.5px solid var(--linie); border-radius: var(--r);
  transition: border-color .12s, background .12s, color .12s;
}
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl .marker {
  flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.12rem;
  border: 1.5px solid var(--grau); border-radius: 2px; position: relative;
}
.wahl:has(input[type=radio]) .marker { border-radius: 50%; }
.wahl .text { display: block; }
.wahl:hover { border-color: var(--grau); }
.wahl:has(input:checked) {
  border-color: var(--rot); background: var(--rot); color: #fff; font-weight: 700;
}
.wahl:has(input:checked) .marker { border-color: #fff; background: transparent; }
.wahl:has(input:checked) .marker::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.3rem; height: 0.55rem; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}
.wahl:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }
.wahl.einzeln { display: inline-flex; align-items: center; }
/* Freitext in derselben Reihe wie die Haken: die Zeile bleibt eine Zeile.
   Das rote Plus ist das NEXUS-Aufzählungszeichen aus dem CD. */
.wahl.frei { cursor: text; border-style: dashed; }
.wahl.frei .plus { flex: none; width: 1.1rem; color: var(--rot); font-weight: 700; text-align: center; }
.wahl.frei input { border: 0; padding: 0; min-height: 0; background: none; }
.wahl.frei input::placeholder { color: var(--text-leise); opacity: 1; }
.wahl.frei:focus-within { border-color: var(--blau); border-style: solid; }
.wahl.einzeln .marker { margin-top: 0; }

/* Priorität: drei Stufen mit ihrer Bedeutung, damit A nicht Auslegungssache ist. */
.wahlen.stufen { flex-flow: row wrap; }
.wahlen.stufen .wahl { flex: 1 1 13rem; align-items: center; gap: 0.85rem; padding: 0.85rem; }
.wahl.erklaert .marker {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1.5px solid var(--grau);
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; color: var(--text-weich);
}
.wahl.erklaert .marker::after { content: none; }
.wahl.erklaert .text { font-size: 0.82rem; color: var(--text-weich); line-height: 1.4; }
.wahl.erklaert:has(input:checked) .marker { background: #fff; border-color: #fff; color: var(--rot); }
.wahl.erklaert:has(input:checked) .text { color: rgba(255, 255, 255, 0.92); }

 /* "zurücksetzen" ist nur interessant, wenn etwas ausgewählt ist. Sonst kostet
    es je Auswahl eine Zeile, die am Stand niemand braucht. */
.verweis.leer { margin-top: 0.4rem; font-size: 0.74rem; display: none; }
fieldset:has(input:checked) .verweis.leer { display: inline-block; }

.pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pille {
  display: inline-flex; align-items: center; margin: 0; cursor: pointer;
  padding: 0.5rem 0.95rem; min-height: 42px; font-size: 0.93rem; font-weight: 500;
  border: 1.5px solid var(--linie); border-radius: 999px; background: var(--flaeche-2);
}
.pille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pille:has(input:checked) { border-color: var(--rot); background: var(--rot); color: #fff; font-weight: 700; }
.pille:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Die Kette am Stand: dieselbe nummerierte Folge wie das Leitsystem im Gang. */
.weg { display: flex; flex-direction: column; gap: 0; position: relative; }
.weg .wahl {
  border-radius: 0; border-left-width: 3px; margin-bottom: -1px;
  align-items: center; gap: 0.8rem; padding: 0.35rem 0.7rem; min-height: 42px;
}
.weg .text { display: flex; align-items: baseline; gap: 0.7rem; flex: 1; flex-wrap: wrap; }
.weg .wahl:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.weg .wahl:last-child { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); margin-bottom: 0; }
.weg .nr {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.88rem; font-weight: 700;
  color: var(--text-weich); border: 1.5px solid var(--linie); background: var(--flaeche);
  font-variant-numeric: tabular-nums; position: relative; z-index: 1;
}
.weg .wahl:has(input:checked) .nr { background: #fff; border-color: #fff; color: var(--rot); }
.weg .wahl:has(input:checked) .text em { color: rgba(255, 255, 255, 0.7); }
.weg .text b { font-weight: 700; font-size: 0.92rem; }
.weg .text em { font-style: normal; font-size: 0.68rem; color: var(--text-leise);
  letter-spacing: 0.08em; text-transform: uppercase; margin-left: auto; }

/* ------------------------------------------------------------------ Knöpfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.7rem 1.15rem; min-height: 46px; font: inherit; font-size: 0.92rem; font-weight: 700;
  border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche);
  color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knopf:hover { border-color: var(--grau); }
.knopf.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.haupt:hover { background: var(--rot-tief); border-color: var(--rot-tief); }
.knopf.breit { width: 100%; }
.knopf.schmal { padding: 0.45rem 0.8rem; min-height: 38px; font-size: 0.82rem; }
.knopf:active { transform: translateY(1px); }

/* --------------------------------------------------------------- Meldungen */

.meldung {
  padding: 0.7rem 0.95rem; border-radius: var(--r); margin: 0; font-size: 0.9rem;
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--text-weich);
}
.meldung.fehler { border-left: 3px solid var(--rot); color: var(--text); }
.meldung.gut { border-left: 3px solid var(--blau); color: var(--text); }
.meldung.streifen { margin: 0.75rem 1.25rem 0; }
.meldung b { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }

/* =============================================================== Der Bogen */

.bogen { display: flex; flex-direction: column; min-height: 0; }

.bogen-kopf {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1.25rem 0;
}
.beleg {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-leise);
  font-variant-numeric: tabular-nums; border: 1px solid var(--linie);
  border-radius: var(--r); padding: 0.25rem 0.5rem; white-space: nowrap;
}
/* Netzstatus. Steht nur da, wenn es etwas zu sagen gibt: kein Netz, oder
   Bögen warten auf das Nachsenden. */
.netz {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap;
  border: 1.5px solid var(--linie); color: var(--text-weich); background: var(--flaeche);
}
.netz::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.netz[data-stand="offline"] { border-color: var(--rot); color: var(--rot); background: var(--rot-hauch); }
.netz[data-stand="warten"] { border-color: var(--blau); color: var(--blau); }

.kontext-schalter {
  display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0;
  background: none; border: 0; padding: 0.25rem 0; font: inherit; font-size: 0.85rem;
  color: var(--text-weich); cursor: pointer; text-align: left;
}
.kontext-schalter:hover { color: var(--text); }
.kontext-schalter #kontext-zeile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfeil { flex: none; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor;
  margin-top: 4px; transition: transform .15s; }
.kontext-schalter[aria-expanded=true] .pfeil { transform: rotate(180deg); margin-top: -4px; }
.kontext { padding: 0.85rem 1.25rem 0; }
.kontext .felder { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 1rem; }

/* Signatur: das Leitsystem. Der Stand ist ein nummerierter Weg mit Bodenstreifen,
   der Bogen ist derselbe Weg. Der rote Streifen läuft mit. */
.leitsystem {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  list-style: none; margin: 0.8rem 0 0; padding: 0 1.25rem 0.7rem;
}
.leitsystem li { display: flex; justify-content: center; }
.stopp {
  display: flex; align-items: center; gap: 0.6rem; background: none; border: 0;
  padding: 0.2rem 0.5rem 0.7rem; font: inherit; color: var(--text-leise); cursor: pointer;
}
.stopp .nr {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.88rem; font-weight: 700;
  border: 1.5px solid var(--linie); background: var(--flaeche);
  font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, color .15s;
}
.stopp .name { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.stopp:hover { color: var(--text-weich); }
/* Ein erledigter Stopp zeigt einen Haken. Die Nummer sagt nichts mehr, sobald
   der Schritt steht, der Haken sagt alles. */
.stopp[data-stand=voll] .nr {
  border-color: var(--dunkelblau); background-color: var(--dunkelblau); font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-repeat: no-repeat;
  background-position: center; background-size: 0.95rem;
}
:root[data-thema="dark"] .stopp[data-stand=voll] .nr,
:root:not([data-thema="light"]) .stopp[data-stand=voll] .nr { border-color: var(--grau); background-color: var(--grau); }
@media (prefers-color-scheme: light) { :root:not([data-thema="dark"]) .stopp[data-stand=voll] .nr { border-color: var(--dunkelblau); background-color: var(--dunkelblau); } }
.stopp[aria-selected=true] { color: var(--text); }
.stopp[aria-selected=true] .nr { border-color: var(--rot); background: var(--rot); color: #fff; }
.stopp[aria-selected=true] .name { font-weight: 700; }

.streifen-bahn {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0.5rem;
  height: 3px; background: var(--linie-zart); border-radius: 3px; overflow: hidden;
}
.streifen-bahn i { display: block; height: 100%; width: 20%; background: var(--rot); transition: width .28s ease; }

@media (max-width: 42rem) {
  .stopp .name { display: none; }
  .stopp { justify-content: center; padding-inline: 0; }
}

.buehne { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem 1rem; }
.schritt { max-width: 58rem; margin: 0 auto; }
/* Kicker, Titel und Zeile stehen nebeneinander: die Kopfzeile eines Schritts
   kostet damit eine Zeile statt dreier. Das Leitsystem oben sagt schon, wo man
   steht; der Kopf nennt nur noch Titel und eine Zeile Orientierung. */
.schritt-kopf { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: 0.15rem 0 0.9rem; }
.schritt-kopf h2 { font-size: 1.45rem; }
.schritt-kopf .lead { margin: 0; }

.aktionsleiste {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 1.25rem calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--flaeche); border-top: 1px solid var(--linie);
}

/* CRM-Karte: was VEMAS über das Haus weiß, allen voran der Key Account. */
.crm-karte {
  border: 1px solid var(--linie); border-left: 3px solid var(--blau); border-radius: var(--r);
  background: var(--flaeche); padding: 0.75rem 0.9rem; margin-bottom: 1rem;
}
.crm-karte b.haus { display: block; font-size: 1.08rem; letter-spacing: -0.02em; }
/* Sieben Zeilen untereinander kosten den halben Schritt. Die Paare laufen
   deshalb nebeneinander: zwei je Reihe, auf breiter Bühne drei. */
.crm-karte dl {
  display: grid; grid-template-columns: auto 1fr auto 1fr;
  gap: 0.25rem 1rem; margin: 0.6rem 0 0; font-size: 0.9rem;
}
@media (min-width: 64rem) { .crm-karte dl { grid-template-columns: auto 1fr auto 1fr auto 1fr; } }
@media (max-width: 46rem) { .crm-karte dl { grid-template-columns: auto 1fr; } }
/* Verknüpft steht die Einrichtung in der Karte, nicht mehr in drei Feldern.
   "Ändern" holt sie zurück, ohne die CRM-Verknüpfung zu lösen. */
.crm-karte .knoepfe { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 0.7rem; }
.crm-karte .knoepfe .verweis { margin-top: 0; }
.crm-karte dt { color: var(--text-leise); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; align-self: center; }
.crm-karte dd { margin: 0; }
.crm-karte dd.ka { font-weight: 700; font-size: 1.05rem; color: var(--rot); letter-spacing: -0.01em; }

.karte-reihe { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.karte-feld .hinweis { margin-top: 0.3rem; }
.karte-bild { display: block; max-width: min(100%, 26rem); margin-top: 0.7rem;
  border: 1px solid var(--linie); border-radius: var(--r); }
.karte-bild img { display: block; max-width: 100%; border-radius: var(--r); }

/* ------------------------------------------------------- Vorschlagslisten */

.vorschlag-huelle { position: relative; }
.vorschlaege {
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 4px);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(31, 35, 54, 0.16); max-height: 19rem; overflow: auto; padding: 0.25rem;
}
.vorschlag {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 0.6rem 0.65rem; border-radius: 2px; cursor: pointer; font: inherit;
  color: var(--text); border-left: 3px solid transparent;
}
.vorschlag:hover, .vorschlag[aria-selected=true] { background: var(--rot-hauch); border-left-color: var(--rot); }
.vorschlag b { display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.vorschlag small { display: block; color: var(--text-leise); font-size: 0.78rem; margin-top: 0.1rem; }

/* ------------------------------------------------------------------ Liste */

.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1.25rem; }
.filter .feld { margin: 0; }
.filter .knopfreihe { margin-left: 0; }

.zeilen { display: flex; flex-direction: column; gap: 0.4rem; }
.zeile {
  display: flex; gap: 0.9rem; align-items: center; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid transparent;
  border-radius: var(--r); padding: 0.75rem 0.9rem;
}
.zeile:hover { border-left-color: var(--rot); }
.zeile-kern { flex: 1; min-width: 0; }
.zeile-kern b { display: block; font-size: 0.95rem; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-kern small, .zeile-rand small { display: block; color: var(--text-weich); font-size: 0.78rem; }
.zeile-rand { flex: none; text-align: right; max-width: 42%; }
.zeile-rand .beleg { border: 0; padding: 0; font-size: 0.68rem; }
.prio {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 0.88rem; border: 1.5px solid var(--linie); color: var(--text-leise);
}
.prio.p-a { background: var(--rot); border-color: var(--rot); color: #fff; }
.prio.p-b { background: var(--dunkelblau); border-color: var(--dunkelblau); color: #fff; }
.prio.p-c { border-color: var(--grau); color: var(--text-weich); }
.leer-hinweis { color: var(--text-leise); text-align: center; padding: 3rem 0; }

/* ------------------------------------------------------------- Auswertung */

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; }
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--linie); border-top: 2px solid var(--rot);
  border-radius: var(--r); padding: 0.9rem 1rem;
}
.kennzahl b { display: block; font-size: 2.1rem; font-weight: 300; letter-spacing: -0.045em;
  line-height: 1; color: var(--dunkelblau); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="light"]) .kennzahl b { color: var(--text); } }
:root[data-thema="dark"] .kennzahl b { color: var(--text); }
.kennzahl span { display: block; color: var(--text-weich); font-size: 0.78rem; margin-top: 0.5rem; line-height: 1.35; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; align-items: start; }
.raster .tafel h2 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 0.9rem; }
.balken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.balken li { display: grid; grid-template-columns: 1fr 5rem 2rem; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.balken .was { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken .bahn { height: 6px; background: var(--linie-zart); border-radius: 3px; overflow: hidden; }
.balken .bahn i { display: block; height: 100%; background: var(--rot); }
.balken .zahl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------- Flache Bildschirme

   Ein Schritt soll auf einen Bildschirm passen, ohne zu scrollen. Quer
   gehalten bleiben einem iPad nach Kopfzeile, Schrittstreifen und
   Aktionsleiste nur rund 534px (4:3) bis 586px (11 Zoll) für den Inhalt.
   Gemessen mit dem DevTools-Protokoll: Schritt 1, 4 und 5 liefen dort über.
   Also wird ab einer flachen Höhe die Luft aus Köpfen, Blöcken und Feldern
   genommen, die Schriftgrößen der Werte bleiben. Die Tastenhöhe bleibt bei
   44px, das ist die Grenze, unter der am Stand danebengetippt wird. */

/* Hochkant wird der Schritt aus der anderen Richtung zu lang: die schmale
   Breite drückt die Felder untereinander. Dieselbe Kompression hilft dort. */
@media (max-height: 58rem), (max-width: 52rem) {
  .schritt-kopf { margin: 0.1rem 0 0.5rem; }
  .schritt-kopf h2 { font-size: 1.3rem; }
  .schritt-kopf .lead { font-size: 0.88rem; }

  .bloecke { gap: 0.55rem; }
  .block { padding: 0.6rem 0.9rem 0.65rem; }
  .block-kopf { margin: -0.1rem 0 0.5rem; }
  .felder { gap: 0.55rem 1.2rem; }
  .gruppe { margin: 0.15rem 0 -0.3rem; }

  label, legend { margin-bottom: 0.2rem; }
  .hinweis { margin-top: 0.18rem; font-size: 0.76rem; }
  .crm-karte { padding: 0.6rem 0.8rem; margin-bottom: 0.7rem; }
  .crm-karte dl { margin-top: 0.45rem; gap: 0.2rem 0.9rem; }

  /* "Am Stand" sind zwei schnelle Klappmenüs, die brauchen wenig Höhe. */
  [data-block="Am Stand"] > .felder { gap: 0.5rem 1rem; }
  /* Die Fotozeile in Schritt 1 sitzt enger, der Hinweis darunter kleiner. */
  .karte-feld .hinweis { margin-top: 0.15rem; }
  .karte-reihe { gap: 0.5rem; }
}

@media (max-height: 52rem) {
  .schritt-kopf { margin: 0 0 0.4rem; }

  .bloecke { gap: 0.5rem; }
  .block { padding: 0.55rem 0.8rem 0.6rem; }
  .block-kopf { margin-bottom: 0.45rem; }
  .felder { gap: 0.45rem 1.1rem; }

  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
  select, textarea { min-height: 44px; padding: 0.45rem 0.7rem; }
  textarea { min-height: 3.5rem; }
  .hinweis { font-size: 0.72rem; line-height: 1.3; }

  /* Die Karte trägt hier die ganze Einrichtung und muss selbst schmal bleiben. */
  .crm-karte { padding: 0.45rem 0.7rem; margin-bottom: 0.4rem; }
  .crm-karte b.haus { font-size: 1rem; line-height: 1.25; }
  .crm-karte dl { margin-top: 0.3rem; gap: 0.1rem 0.9rem; font-size: 0.85rem; }
  .crm-karte dd.ka { font-size: 1rem; }
  .crm-karte .knoepfe { margin-top: 0.35rem; gap: 0.9rem; }

  /* Die Hakenreihen sind auf Schritt 4 der ganze Schritt. Sie tragen die
     Kompression deshalb mit, bleiben aber über 40px hoch. */
  .wahlen { gap: 0.3rem; }
  .wahl { min-height: 40px; padding: 0.42rem 0.7rem; font-size: 0.92rem; gap: 0.55rem; }
  .feld.weit > fieldset > .wahlen:not(.stufen) { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .wahlen.stufen .wahl { padding: 0.6rem; gap: 0.7rem; }
  .wahl.erklaert .marker { width: 1.9rem; height: 1.9rem; }
}

/* ------------------------------------------------------- Erstkontakt-Mail */

.mail-dialog {
  width: min(46rem, 92vw); border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--flaeche); color: var(--text); padding: 1.25rem; box-shadow: var(--schatten);
}
.mail-dialog::backdrop { background: rgba(16, 18, 26, 0.55); }
.mail-kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 0.5rem; }
.mail-kopfzeile h2 { font-size: 1.3rem; }
.mail-kopfzeile .kicker { margin-bottom: 0.2rem; }
#mail-empfaenger { margin: 0 0 0.9rem; }
.mail-feld { display: block; margin-bottom: 0.85rem; }
.mail-feld span { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.3rem; }
.mail-feld textarea { line-height: 1.5; }
.mail-feld input[readonly], .mail-feld textarea[readonly] { background: var(--flaeche-2); }
.mail-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.mail-aktionen .knopf.gesperrt { opacity: 0.5; pointer-events: none; }
#mail-fuss { margin-top: 0.7rem; }
#mail-stand { margin: 0 0 0.85rem; }

/* --------------------------------------------------------- Gefahr / Löschen */

.knopf.gefahr { color: var(--akzent-text); border-color: color-mix(in srgb, var(--rot) 45%, var(--linie)); }
.knopf.gefahr:hover { border-color: var(--rot); background: var(--rot-hauch); }
.knopf.gefahr.voll { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.gefahr.voll:hover { background: var(--rot-tief); border-color: var(--rot-tief); }
.schmal-dialog { width: min(30rem, 92vw); }
.schmal-dialog .lead { margin: 0.5rem 0 1.1rem; }
.schmal-dialog .mail-aktionen { justify-content: flex-end; }