/* NEWSEED Recyclingportal – Oberfläche
 *
 * Setzt auf den Tokens des NEWSEED Design Systems auf (_ds/…/tokens/*.css):
 * --paper --dust --ink --orange --blue --acid --sheet --muted --hairline
 * sowie die Schriftrollen --display --statement --body --mono.
 * Hier steht nur, was das Portal zusätzlich braucht.
 *
 * Grundlage ist Variante B (dunkle Kopfleiste, Orange als Zone „Sammeln“,
 * Bildkacheln als Duotone) – entschieden am 2026-08-13.
 */

/* --------------------------------------------------------------- Signale --
 * Aus dem Vorschlag in Screen 1f. Orange ist im Design System die Zone
 * „Sammeln“ und darf deshalb NICHT die Warnung tragen – die Warnung ist
 * Ocker, der Fehler Karmin. Regel: Zustände nie allein über Farbe zeigen,
 * immer zusätzlich als Text.
 */
:root {
  --erfolg:         #1E7A3C;
  --erfolg-flaeche: #E6EDD8;
  --warnung:        #8F6300;
  --warnung-flaeche:#F3E7C6;
  --fehler:         #B01E28;
  --fehler-flaeche: #F3DCD6;

  --radius-box:   30px;
  --radius-karte: 16px;
  --radius-feld:  14px;
  --linie:        1.5px solid rgba(14, 14, 14, .14);
  --linie-stark:  2px solid var(--ink);
}

/* ----------------------------------------------------------- Grundlagen -- */
* { box-sizing: border-box; }

/* Das hidden-Attribut muss immer stechen: Sonst überschreibt eine Klasse mit
 * eigener display-Angabe es klaglos, und ein ausgeblendetes Element bleibt
 * sichtbar (gesehen an „Keine Halle gefunden", 2026-08-14). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
}

a { color: var(--blue); }
a:hover { color: var(--orange); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- Kopfleiste --
 * Dunkel, damit das Orange der Zone trägt. Das Logo ist schwarz auf
 * transparent und wird invertiert – eine weiße Logodatei ist nicht nötig.
 */
.kopf { background: var(--ink); }

.kopf-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.kopf-logo {
  width: 200px;
  height: auto;
  display: block;
  filter: invert(1);
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 20px;
}

.zone {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  white-space: nowrap;
}

.angemeldet {
  text-align: right;
  color: var(--paper);
}

.angemeldet .halle { font-size: 15px; font-weight: 700; }
.angemeldet a { color: var(--paper); font-weight: 400; }
.angemeldet a:hover { color: var(--orange); }

/* --------------------------------------------------------------- Inhalt -- */
.inhalt {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 40px 88px;
}

.inhalt--breit  { max-width: 1120px; }
.inhalt--schmal { max-width: 640px; }

h1, .titel {
  font-family: var(--display);
  font-size: 96px;
  line-height: .86;
  margin: 0 0 14px;
}

.untertitel {
  font-family: var(--statement);
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.02;
  margin: 0 0 12px;
}

.stufe {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.lead {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 16px;
}

/* Wird als <p> und als <span> unter Feldern verwendet – deshalb explizit block,
 * sonst hängt der Hinweis am Feld statt darunter zu stehen. */
.hinweis {
  display: block;
  color: var(--muted);
  font-size: 14.5px;
  margin: 10px 0 0;
}

.feld .hinweis { margin-top: 6px; font-size: 14px; }

/* Fließtext innerhalb der Box, z. B. die Abhol- und Abgabehinweise. */
.absatz { margin: 20px 0 0; }

/* Hinweiszeile, die zu der Überschrift DARÜBER gehört statt zum Feld davor. */
.hinweis--oben { margin: 0 0 12px; }

/* Weiterführender Link unter einem Block – auf den PIN-Seiten der Ausweg
 * „andere Halle / neue PIN". Mittig und in Schwarz: Er schließt die Box ab wie
 * der Knopf darüber, und in Blau zöge er mehr Blick als der eigentliche Weg. */
.nachtrag { margin: 20px 0 0; font-size: 15px; text-align: center; }
.nachtrag a { color: var(--ink); }
.nachtrag a:hover { color: var(--orange); }

/* Im Portal ist „andere Halle wählen" ein Formular-Knopf (er verwirft die
 * angefangene Anmeldung serverseitig), sehen soll er aber aus wie der Link
 * aus dem Entwurf. */
.nachtrag button {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.nachtrag button:hover { color: var(--orange); }

.nowrap { white-space: nowrap; }

.pille {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: var(--linie) ;
  border-color: var(--ink);
  background: var(--sheet);
  display: inline-block;
}

/* ----------------------------------------------------------------- Box -- */
.box {
  background: var(--sheet);
  border: var(--linie-stark);
  border-radius: var(--radius-box);
  padding: 32px;
}

.box + .box { margin-top: 24px; }

.abschnitt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 32px 0 12px;
}

/* Kontaktzeile am Ende einer Box: „Schreibt uns · 08001 …“ */
.kontakt { margin: 24px 0 0; }
.kontakt a { font-weight: 700; }
.kontakt .trenner { color: var(--muted); }

/* Zwei gleichrangige Wege nebeneinander (Schreiben oder Anrufen) – als Knöpfe
 * statt als Textlinks, damit sie auf einer Sackgassen-Seite auch gesehen
 * werden. Umbruch auf schmalen Schirmen untereinander. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
}

/* Nur die erste Überschrift IN der Box steht ohne Vorabstand. Die Regel darf
 * nicht auf <legend> greifen: die ist immer erstes Kind ihres <fieldset>. */
.box > .abschnitt:first-child { margin-top: 0; }

/* --------------------------------------------------------------- Felder -- */
.feld { display: block; }
.feld + .feld { margin-top: 20px; }
.feld--abstand { margin-top: 24px; }

.feld-name {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 8px;
}

.feld-name--klein {
  font-family: var(--body);
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
}

input[type="text"],
input[type="tel"],
input[type="date"],
input[type="number"],
select {
  font-family: var(--body);
  font-size: 16px;
  width: 100%;
  padding: 13px 16px;
  border: var(--linie-stark);
  border-radius: var(--radius-feld);
  background: #fff;
  color: var(--ink);
}

select.schmal { width: 220px; }

.feldreihe {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.feldreihe > * { flex: 1 1 240px; min-width: 0; }

/* Der Abstand von .feld + .feld gilt nur untereinander – nebeneinander in der
 * Feldreihe würde er das zweite Feld nach unten versetzen. */
.feldreihe > .feld + .feld { margin-top: 0; }

.menge { display: flex; gap: 10px; }
.menge input { flex: 1; min-width: 0; }
.menge select { flex: 0 0 110px; padding-left: 12px; padding-right: 12px; }

/* Zu wenig geschätzte Menge (entschieden 2026-09-18, Probe in
 * `prototyp/probe-menge-warnung.html`). Das Feld meint die GESAMTmenge über alle
 * Pakete, deshalb prüft das Skript zwei Fälle – unter 20 kg gesamt und unter
 * 20 kg × Paketanzahl. Unterschiedlich ist nur der **Text**; eingefärbt wird in
 * beiden Fällen **Karmin** (Entscheidung Michi: „alles rot"). Bewusste Ausnahme
 * von der Regel oben, dass die Warnung Ocker trägt: Zwei Rottöne nebeneinander
 * lesen sich als Abstufung, die hier keine ist – zu wenig ist zu wenig.
 * Gesperrt wird nichts – das Feld ist freiwillig und der Wert eine Schätzung.
 * Deshalb steht die Meldung immer auch als Text da (Regel oben: nie nur Farbe). */
.menge--fehler input[type="number"] { border-color: var(--fehler); background: var(--fehler-flaeche); }

.mengen-meldung {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 500;
}

.mengen-meldung--fehler { color: var(--fehler); }

.mengen-meldung-zeichen {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
  margin-top: 1px;
}

.mengen-meldung--fehler .mengen-meldung-zeichen { background: var(--fehler); }

/* ------------------------------------------------------------ Versandweg --
 * Echte Radios, visuell als Karten. Die Folge jeder Wahl steht ausgeschrieben
 * in der Option selbst – der Kostenhinweis der Abholung gehört an die Option,
 * nicht ins Kleingedruckte (Projekt.md §14).
 */
/* Der Abstand sitzt am fieldset, nicht an der legend – margin an <legend>
 * verhält sich je nach Browser unterschiedlich. */
.wege { border: 0; margin: 32px 0 0; padding: 0; }
.wege > .abschnitt { margin: 0 0 12px; }

.weg {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: var(--linie);
  border-color: rgba(14, 14, 14, .3);
  border-radius: var(--radius-karte);
  padding: 18px 20px;
  background: #fff;
  cursor: pointer;
}

.weg + .weg { margin-top: 16px; }

.weg input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  border: var(--linie-stark);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.weg input[type="radio"]:checked {
  border-color: var(--orange);
  background: var(--orange)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

.weg:has(input:checked) {
  border: var(--linie-stark);
  border-color: var(--orange);
  background: #FDE7DC;
}

.weg-titel { font-size: 17px; font-weight: 700; }

.weg-marke {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-left: 6px;
}

.weg-text {
  display: block;
  color: var(--muted);
  font-size: 15px;
  margin-top: 4px;
}

.weg-warnung {
  display: block;
  color: var(--warnung);
  font-size: 15px;
  font-weight: 700;
  margin-top: 8px;
}

/* Die Abholfelder stehen direkt unter der Abholung-Option und rücken auf
 * deren Textspalte ein. Die Selbstabgabe folgt darunter als zweite Option.
 * Ohne JavaScript blendet der :has()-Fallback sie aus, sobald Selbstabgabe
 * gewählt ist; mit JavaScript übernimmt das hidden-Attribut. */
.abholfelder {
  margin: 16px 0 0 58px;
}

.wege:not(:has(#weg-abholung:checked)) .abholfelder { display: none; }
.abholfelder[hidden] { display: none; }

.weg--zweit { margin-top: 24px; }

/* --------------------------------------------------------------- Aktion -- */
/* Steht als Abschluss der Box mittig – der Knopf beendet das Formular und
 * gehört nicht an den linken Rand der Feldspalte. */
.aktion {
  display: block;
  margin: 32px auto 0;
  font-family: var(--statement);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 15px 30px;
  border: 2px solid var(--orange);
  background: var(--orange);
  color: #fff;
  cursor: pointer;
}

.aktion:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.aktion[disabled] {
  border-color: var(--dust);
  background: var(--dust);
  color: var(--muted);
  cursor: not-allowed;
}

/* ------------------------------------------------------ Netzwerk-Kasten --
 * Blauer Duotone-Kasten (Kletterbild) am Fuß der Anmeldeseite: fasst die
 * (vorerst deaktivierte) Netzwerk-Bilanz in einer Zahl zusammen, ohne Link.
 * Überschrift und Zahl laufen in der Display-Schrift (Stellost) – wie auf
 * der NEWSEED-Website. Der Abstand (16px) entspricht dem Kachel-Raster:
 * oben, zwischen und unter den Kästen überall dasselbe Maß.
 */
.netzstreifen {
  margin: 16px 0 0;
  padding: 24px 26px;
  border: var(--linie-stark);
  border-radius: var(--radius-karte);
  color: #fff;
}

.netzstreifen .verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 133, 186, .95), rgba(0, 155, 216, .45));
}

.netzstreifen .text { position: relative; }

.netzstreifen-titel {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.02;
  letter-spacing: .01em;
}

.netzstreifen-zahl {
  margin: 8px 0 2px;
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: .01em;
}

.netzstreifen-text {
  margin: 0;
  color: rgba(255, 255, 255, .88);
}

/* -------------------------------------------------------------- Kacheln --
 * Partnerschaft: seit 2026-08-19 auf allen Seiten inklusive Anmeldung, und
 * in Grün (Acid) mit dunkler Schrift – Blau gehört dem Netzwerk-Kasten.
 * Abstand nach oben = Abstand zwischen den Kacheln (16px), damit alle
 * Kästen im selben Raster sitzen.
 */
.kacheln {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.kachel {
  flex: 1 1 280px;
  border: var(--linie-stark);
  border-radius: var(--radius-karte);
  padding: 24px;
  color: var(--ink);
  /* Bild-Duotone: Schatten laufen ins Dunkelgrün statt Schwarz, Lichter
   * bleiben Acid (Michis Entscheidung 2026-08-19 nach dem Acid-zu-Weiß-
   * Vergleich, der zu subtil war). */
  --sh: #8CAA00; /* Rezept „acid-soft" (finale Fassung 2026-08-19) */
}

.kachel .verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(216, 255, 61, .95), rgba(216, 255, 61, .45));
}

.kachel .text { position: relative; }

/* Der Kacheltitel steht weiter unten (Abschnitt „Kacheltitel in der
 * Display-Schrift"). Die frühere Fassung an dieser Stelle war vollständig
 * wirkungslos und ist deshalb raus (2026-08-17). */

.kachel p { font-size: 15px; color: rgba(14, 14, 14, .85); margin: 0 0 12px; }
.kachel a { color: var(--ink); font-weight: 700; font-size: 15px; }
.kachel a:hover { color: var(--blue); }

/* ------------------------------------------------------------------ Fuß -- */
.fuss { background: var(--ink); color: var(--paper); }

.fuss-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.claim {
  font-family: var(--statement);
  font-style: italic;
  text-transform: uppercase;
  font-size: 15px;
}

.fuss a { color: var(--paper); }
.fuss a:hover { color: var(--orange); }

/* --------------------------------------------------------- Hallensuche --
 * Über 50 Hallen passen in kein Dropdown: Suchfeld plus scrollende
 * Trefferliste. Links daneben das Duotone-Bild (Screen 2a).
 */
.suchbereich {
  border: var(--linie-stark);
  border-radius: var(--radius-box);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: var(--sheet);
}

.suchbild {
  flex: 0 0 40%;
  position: relative;
  min-height: 620px;
}

.suchbild .verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(233, 68, 10, .92), rgba(255, 90, 31, 0) 55%);
}

.suchbild .text {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  color: #fff;
}

.suchbild .marke {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.suchbild .spruch {
  font-family: var(--statement);
  font-style: italic;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.02;
}

.suchspalte { flex: 1; padding: 32px 36px; }

.zaehler {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 6px;
}

.trefferliste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 288px;
  overflow-y: auto;
  border: var(--linie);
  border-radius: var(--radius-karte);
  background: #fff;
}

.trefferliste li + li { border-top: var(--linie); }

/* Die Trefferzeile ist im Portal ein <label> mit verstecktem Radio statt eines
 * Knopfes wie im Entwurf: So funktioniert die Auswahl auch ohne JavaScript,
 * und die Tastaturbedienung (Pfeiltasten in der Radiogruppe) kommt gratis. */
.treffer input { position: absolute; opacity: 0; width: 0; height: 0; }
.treffer:has(input:checked) { background: var(--dust); font-weight: 700; }
.treffer:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }

.treffer {
  font-family: var(--body);
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
}

.treffer:hover { background: var(--dust); }

.treffer-ort {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------- PIN-Feld -- */
.pin {
  font-family: var(--mono);
  font-size: 34px;
  letter-spacing: .3em;
  text-align: center;
  padding: 14px 16px;
}

.aktion--dunkel {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  margin-left: 0;
}

.aktion--dunkel:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* Weiterführende Aktion nach getaner Sache – als Knopf erkennbar, aber
 * zurückhaltend: Orange bleibt dem eigentlichen Absenden vorbehalten. */
.aktion--ruhig {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  margin: 0;
}

.aktion--ruhig:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.weiter { margin: 28px 0 0; text-align: center; }

/* ---------------------------------------------------------- Zustandsbox --
 * Zustände immer mit Text, nie allein über Farbe (Signalfarben, Screen 1f).
 */
.status {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 2px solid var(--erfolg);
  background: var(--erfolg-flaeche);
  border-radius: var(--radius-karte);
  padding: 16px 18px;
}

/* Zustandsbox, die nicht in einer Box steckt, sondern frei über dem Formular
 * steht – braucht eigenen Abstand nach unten. */
.status--frei { margin: 0 0 28px; }

.status--warnung { border-color: var(--warnung); background: var(--warnung-flaeche); }
.status--fehler  { border-color: var(--fehler);  background: var(--fehler-flaeche); }

.status-zeichen {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--erfolg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 1px;
}

/* Eingabefeld nach einem Fehlversuch – der Rahmen greift die Signalfarbe auf,
 * die Aussage steht aber in der Zustandsbox darüber, nicht in der Farbe. */
.pin--fehler { border-color: var(--fehler); }

.status--warnung .status-zeichen { background: var(--warnung); }
.status--fehler .status-zeichen  { background: var(--fehler); }

.status .zusatz { display: block; font-size: 15px; margin-top: 2px; }

/* ------------------------------------------------------------- Datenblatt -- */
.daten { margin: 24px 0 0; border-top: var(--linie); }

/* Ohne obere Linie und ohne Abschlusslinie – für Listen, die unter einer
 * eigenen Überschrift stehen (z. B. die bisherigen Anforderungen). */
.daten--offen { border-top: 0; margin-top: 8px; }
.daten--offen .daten-zeile:last-child { border-bottom: 0; }

.daten dt.klein {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: none;
}

.daten-zeile {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: var(--linie);
}

.daten dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  align-self: center;
}

.daten dd { margin: 0; font-weight: 700; }
.daten dd.referenz { font-family: var(--mono); font-size: 16px; letter-spacing: .05em; }

/* ------------------------------------------------------------ Labelliste --
 * label.php liefert EIN PDF je Aufruf – deshalb ein Link je Paket und kein
 * Sammeldownload (Projekt.md §14, Überarbeitung 03.08.).
 */
.labelliste { display: flex; flex-direction: column; gap: 10px; }

.label-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: var(--linie);
  border-color: rgba(14, 14, 14, .3);
  border-radius: var(--radius-karte);
  padding: 14px 18px;
  background: #fff;
}

.sendungsnummer {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .05em;
}

.label-zeile .offen {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------- Bilanz -- */
.bilanz {
  border: var(--linie-stark);
  border-radius: var(--radius-box);
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.bilanz .verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(233, 68, 10, .95) 45%, rgba(255, 90, 31, .25));
}

.bilanz .text { position: relative; padding: 32px; color: #fff; max-width: 62%; }

.bilanz .marke {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 10px;
}

.bilanz-zahl {
  font-family: var(--statement);
  font-style: italic;
  text-transform: uppercase;
  font-size: 40px;
  line-height: 1.02;
  margin: 0;
}

/* :not() nötig – .bilanz p wäre spezifischer als .bilanz-zahl und würde die
 * große Zahl auf Fließtextgröße zurückstellen. */
.bilanz p:not(.bilanz-zahl) { font-size: 15px; margin: 12px 0 0; }

/* ------------------------------------------------------- Netzwerk-Bilanz --
 * Die Balkenbreite steht als Prozentwert am Element – sie ist Datum, nicht
 * Gestaltung, und kommt im Portal aus der Auswertung.
 */
.grossbilanz { border: var(--linie-stark); border-radius: var(--radius-box); overflow: hidden; }

.grossbilanz .verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(233, 68, 10, .92), rgba(255, 90, 31, .1) 70%);
}

.grossbilanz .text { position: relative; padding: 44px; color: #fff; }

.grossbilanz .marke {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.grossbilanz .summe {
  font-family: var(--display);
  font-size: 140px;
  line-height: .86;
  margin: 0 0 10px;
}

.grossbilanz .unterzeile {
  font-family: var(--statement);
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.02;
  margin: 0;
}

.spalten { display: flex; gap: 24px; margin-top: 24px; align-items: stretch; flex-wrap: wrap; }
.spalten > * { flex: 1 1 300px; }

.jahr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: var(--linie);
}

.jahr:last-child { border-bottom: 0; }
.jahr-name { font-family: var(--mono); font-size: 13px; flex: 0 0 90px; }
.jahr-balken { flex: 1; }
.jahr-balken span { display: block; height: 24px; border-radius: 999px; background: var(--blue); }
.jahr-wert { font-family: var(--mono); font-size: 14px; font-weight: 700; text-align: right; }

.eigenwert {
  font-family: var(--display);
  font-size: 64px;
  line-height: .9;
  margin: 8px 0 12px;
}

/* ===================================================== Verwaltung (5a–5e) ==
 * Eigener Bereich: blaue Zone statt Orange, sachlichere Typografie, eigener
 * Fuß. Wird am eigenen Rechner benutzt, nicht am Hallentresen.
 */
.zone--verwaltung { background: var(--blue); }

.titel-verwaltung {
  font-family: var(--statement);
  font-style: italic;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1.02;
  margin: 0 0 20px;
}

.reiter { display: flex; gap: 10px; margin: 0 0 28px; flex-wrap: wrap; }

.reiter a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  border: var(--linie);
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.reiter a:hover { background: var(--ink); color: var(--paper); }

.reiter a.aktiv {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  border-color: var(--ink);
}

/* ------------------------------------------------------------ Filterleiste -- */
.filter { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

.filter .feld { flex: 0 0 150px; }
.filter .feld--breit { flex: 1 1 200px; }

.filter .feld-name {
  font-size: 11px;
  letter-spacing: .15em;
  margin-bottom: 6px;
}

.filter input,
.filter select {
  font-size: 15px;
  padding: 11px 12px;
  border-radius: 12px;
}

.filter .aktion { margin: 0; }

.zusammenfassung {
  margin: 20px 0 0;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.zusammenfassung a { font-weight: 700; }

/* ----------------------------------------------------------------- Tabelle -- */
.tabellenrahmen { overflow-x: auto; margin-top: 20px; }

table.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

table.liste th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 700;
  padding: 0 12px 10px 0;
  border-bottom: var(--linie);
  white-space: nowrap;
}

table.liste td {
  padding: 12px 12px 12px 0;
  border-bottom: var(--linie);
  vertical-align: top;
}

table.liste tr.hervor td { background: rgba(143, 99, 0, .07); }
table.liste td.ref { font-family: var(--mono); letter-spacing: .04em; white-space: nowrap; }
table.liste td.zahl { font-weight: 700; white-space: nowrap; }
table.liste .labels a { margin-right: 8px; font-weight: 700; }

.chip {
  display: inline-block;
  font-size: 11px;
  border: var(--linie);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.chip--erfolg  { color: var(--erfolg);  border-color: var(--erfolg); }
.chip--warnung { color: var(--warnung); border-color: var(--warnung); }
.chip--fehler  { color: var(--fehler);  border-color: var(--fehler); }

/* --------------------------------------------------------------- Kennzahlen -- */
.kennzahlen { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }

.kennzahl {
  flex: 1 1 200px;
  background: var(--sheet);
  border: var(--linie-stark);
  border-radius: var(--radius-karte);
  padding: 22px 24px;
}

.kennzahl-wert {
  font-family: var(--statement);
  font-style: italic;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.02;
  margin: 0 0 6px;
}

.kennzahl-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------- Fehlerauszug -- */
.fehlertext {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  background: #fff;
  border: var(--linie);
  border-color: rgba(14, 14, 14, .3);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 10px 0 0;
}

/* -------------------------------------------------------- Personenauswahl -- */
.person { display: flex; gap: 14px; align-items: center; }
.person + .person { margin-top: 12px; }
.person .adresse { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------- Fuß der Verwaltung -- */
.fuss--verwaltung {
  background: var(--ink);
  color: rgba(242, 237, 227, .65);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  padding: 22px 20px;
}

/* ------------------------------------------------------------ Schmaler --
 * Desktop zuerst (Büro-PC der Hallenleitung), mobil als Absicherung.
 */
@media (max-width: 700px) {
  .inhalt { padding: 40px 20px 64px; }
  h1, .titel { font-size: 56px; }
  .kopf-innen, .fuss-innen { padding: 16px 20px; }
  .box { padding: 22px; border-radius: 22px; }
  .abholfelder { margin-left: 0; }
  .kopf-rechts { gap: 12px; }
  .angemeldet { text-align: left; }

  /* Auf dem schmalen Schirm nutzen die Auswahlfelder die volle Breite –
   * eine feste Feldbreite wirkt neben dem umbrechenden Hilfstext verloren. */
  select.schmal { width: 100%; }
  .menge select { flex: 0 0 40%; }

  /* Das Bild neben der Hallensuche würde die Liste auf Briefmarkengröße
   * drücken – es wandert über die Suche und wird flacher. */
  .suchbereich { flex-direction: column; }
  .suchbild { flex: 0 0 auto; min-height: 200px; }
  .suchspalte { padding: 22px; }
  .bilanz .text { max-width: none; padding: 22px; }
  .bilanz-zahl { font-size: 30px; }
  .pin { font-size: 26px; letter-spacing: .2em; }
}

/* Nachtrag Netzwerk-Bilanz: Die Riesenzahl braucht Platz. Auf schmalen
   Schirmen wird sie kleiner, sonst bricht sie mitten im Wort um. */
@media (max-width: 900px) {
  .grossbilanz .summe { font-size: 86px; }
  .grossbilanz .text { padding: 30px; }
  .eigenwert { font-size: 48px; }
  .jahr-name { flex: 0 0 72px; font-size: 12px; }
  .jahr-wert { font-size: 13px; }
}

@media (max-width: 560px) {
  .grossbilanz .summe { font-size: 56px; }
  .grossbilanz .unterzeile { font-size: 17px; }
  .eigenwert { font-size: 38px; }
}

/* Fließtext direkt unter einer Abschnittsüberschrift – dort sitzt der Abstand
   schon an der Überschrift. */
.absatz--eng { margin-top: 0; }

/* Schalter mit erklärendem Text (Verwaltung: „aktiv", „Zahlen zeigen").
 * Die Klasse stammt aus dem alten Markup, im Entwurf gab es sie nicht – ohne
 * eigene Regel liefen zwei davon in einer Zeile ineinander (2026-08-14). */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

.check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--orange);
}

/* Kleinerer Outline-Knopf für Nebenaktionen in Kopfzeilen („als CSV
 * herunterladen"). Ersetzt die früheren blauen Textlinks: In einer Zeile mit
 * Zahlen ist ein Knopf als Aktion erkennbar, ein langer Link liest sich wie
 * Fließtext. */
.aktion--klein {
  font-size: 13px;
  padding: 9px 18px;
}

/* Knopfreihe linksbündig statt mittig – in einem Formular gehören die Knöpfe
 * an die Kante der Felder darüber. Der Abstand nach oben fehlte ganz. */
.knopfreihe--links { justify-content: flex-start; margin-top: 20px; }

/* Feld, das nach einem Knopf folgt und sonst an ihm klebt. */
.feld--abgesetzt { margin-top: 24px; }

/* Die beiden Spalten der Netzwerk-Bilanz auf gleiche Höhe bringen: Sonst hängt
 * die kürzere Karte in der Luft und die Seite wirkt schief.
 *
 * Der eigentliche Übeltäter war `.box + .box { margin-top: 24px }`: Die Regel
 * gilt für gestapelte Karten, greift in der Reihe aber genauso – die zweite
 * Karte stand dadurch 24 px tiefer und wurde entsprechend kürzer. Hier also
 * zurücknehmen. */
.spalten { align-items: stretch; }
.spalten > .box { display: flex; flex-direction: column; }
.spalten > .box + .box { margin-top: 0; }
.spalten > .box > .hinweis:last-child,
.spalten > .box > .nachtrag:last-child { margin-top: auto; padding-top: 12px; }

/* Merksatz unter dem Absenden-Knopf: Die Packregel ist der häufigste Grund,
 * warum sich eine Retoure nicht rechnet – sie darf nicht wie Kleingedrucktes
 * aussehen. Ocker wie die Warnung, aber ohne Alarmton. */
.merksatz {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 24px 0 0;
  padding: 16px 18px;
  background: var(--warnung-flaeche);
  border: 1.5px solid var(--warnung);
  border-radius: var(--radius-feld);
  font-size: 15px;
  line-height: 1.5;
}

.merksatz-zeichen {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--warnung);
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 24px;
}

/* Kacheltitel in der Display-Schrift – der blaue Kasten ist Werbefläche und
 * darf den Auftritt der Marke tragen.
 *
 * ⚠️ Der Vorsatz `.kachel` gehört zum Selektor: Der Titel ist ein <p>, und
 * `.kachel p` (15px) ist spezifischer als `.kachel-titel` allein. Ohne den
 * Vorsatz griff hier weder die Größe noch die Schrift – der Titel lief in
 * Fließtextgröße mit, obwohl im Stylesheet 30px standen (gefunden 2026-08-17).
 * Aus demselben Grund ist die frühere `@media`-Verkleinerung entfallen: Sie war
 * ebenfalls wirkungslos, und bei 20px braucht es sie nicht. */
.kachel .kachel-titel {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: none;
  font-style: normal;
  margin: 0 0 8px;
}