/*
  Reifenhotel — Erscheinung der sutter carrosserie ag (Tokens aus dem
  Website-Repo, DESIGN.md dort), zugeschnitten auf ein Arbeitswerkzeug am
  Regal: einhaendig am Handy, daneben am Buero-Bildschirm.
  Kein Fremdcode, Schriften lokal ausgeliefert (SIL OFL).
*/

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Archivo Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/archivo-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  /* Farben — Namen und Werte wie auf suttercarrosserie.ch */
  --marke: #004394;
  --marke-tief: #00224C;
  --akzent: #FFB735;
  --akzent-dunkel: #8A5A00;
  --text: #1A1D21;
  --grund: #FFFFFF;
  --flaeche: #F5F2EC;
  --kante: #E6E0D7;
  --kante-stark: #8C8279;
  --kante-auf-marke: #265FA4;
  --kante-auf-tief: #204672;
  --auf-tief: #CFE0F5;
  --platzhalter: #6B655E;
  /* Ergaenzungen fuer das Werkzeug (nicht auf der Website): */
  --text-neben: #5C574F;   /* nachgeordneter Text auf hellem Grund, 7.0:1 */
  --fehler: #A8321F;       /* Fehlermeldung, ungueltiges Feld, Loeschen, Abbrechen, 6.6:1 */
  --fehler-tief: #7E2517;  /* Hover des gefuellten Loeschen-Knopfs, 9.6:1 */
  /* Gruen ist nicht Teil des Markenfarbsatzes. Es traegt eine einzige
     Bedeutung: dieser Knopf aendert etwas. Siehe /anleitung, Abschnitt
     Knoepfe, und die Spec vom 29.08.2026. */
  --handlung: #1B6B3A;     /* Knopf, der etwas veraendert, 6.6:1 */
  --handlung-tief: #124726; /* Hover, 10.7:1 */

  --schrift-titel: "Archivo Variable", system-ui, sans-serif;
  --schrift-text: "Inter Variable", system-ui, sans-serif;

  --radius-klein: 0.5rem;
  --radius-gross: 1.25rem;
  --radius-voll: 9999px;

  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --schatten-karte: 0 10px 28px -6px rgb(26 20 12 / 0.14);

  /* Die Bahn traegt drei Regalkarten nebeneinander. Die Regalwand ist der
     breiteste Inhalt der Anwendung, also gibt sie das Mass:
     3 x 20.375 rem (Karte, siehe .regale) + 2 x 1 rem Fuge
     + 2 x 1.5 rem Rand = 66.125 rem, aufs Pixel gefuellt.
     Mit 64 rem blieben 976 px fuer 1010 px Karten - die dritte Karte fiel
     in die naechste Zeile, und die Wand war um die Haelfte laenger zu
     scrollen (Bueroschirm, 09.09.2026). Wer --fach oder --spalten-max
     aendert, rechnet hier nach; testBahnTraegtDreiRegalkarten haelt die
     Rechnung fest. */
  --bahn: 66.125rem;
  --rand: 1rem;

  /* Mass der Regalwand. Ein Fach ist ein Fach, keine dehnbare Spalte: die
     Zelle ist --fach breit (2.75rem, die Daumen-Untergrenze von 44 px).
     --spalten-max ist $spaltenMax aus views/regalkarte.php. --regal-breite
     steht bewusst nicht hier, sondern auf .regale: ein var() wird auf dem
     Element aufgeloest, das es deklariert - auf :root gerechnet, traege die
     Belegung mit ihrem eigenen --fach trotzdem das Kartenmass der Karte. */
  --fach: 2.75rem;
  --fach-fuge: 0.375rem;
  --spalten-max: 6;

  /* Die Platzspalte (Code, Ort, Mini-Regal) ist ein festes Mass, keine
     Spalte, die mit ihrem Inhalt waechst: sonst richtet jeder Ortsname die
     Textspalte daneben neu aus - in der Saisonliste sprang sie zwischen 92
     und 105 px, Zeile fuer Zeile (gemessen am 09.09.2026). 6.75 rem
     (108 px) traegt den grossen Platzcode (A11.12: 97 px), das Mini-Regal
     (82 px) und die heutigen Ortsnamen (laengster: «Estrich Werkstatt»,
     105 px); ein laengerer Ortsname traegt die Ellipse wie bisher. */
  --platzspalte: 6.75rem;
}

/* ---- Grundlagen ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.625 var(--schrift-text);
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: 1.75rem; margin-bottom: 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.125rem; }
/* h4 traegt den Regalnamen in der Wand. Ohne diese Zeile stuende er mit
   den Standardabstaenden des Browsers da - gemessen 42 px je Regalkarte,
   auf der Startseite ueber 27 Karten hinweg (10.09.2026). */
h4 { font-size: 1.125rem; }
p  { margin: 0 0 0.75rem; }

a { color: var(--marke); text-decoration: underline; text-underline-offset: 4px; }

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

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Sprung ueber die Navigation in den Inhalt. Er steht als erstes im
   Dokument und liegt ausserhalb des Bildes, bis er den Fokus bekommt -
   nach oben geschoben, nicht nach links: seitlich erzeugte er den
   waagrechten Scroll, den die Fremdtext-Regel gerade verbietet. */
.sprung {
  position: absolute;
  left: var(--rand);
  top: 0;
  z-index: 20;
  translate: 0 -120%;
  padding: 0.75rem 1rem;
  background: var(--grund);
  color: var(--marke);
  border: 1px solid var(--marke);
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  font-family: var(--schrift-titel);
  font-weight: 600;
  text-decoration: none;
  transition: translate 0.2s var(--weich);
}
.sprung:focus-visible { translate: 0 0; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---- Umbruch von Fremdtext -------------------------------------------- */
/* Kundenname, Firma, Ortsname, Marke und Modell kommen aus der Eingabe und
   duerfen jede Laenge und jede Form haben - auch ein Wort ohne Trennstelle,
   das laenger ist als der Bildschirm. Ein solches Wort ragt bei
   overflow-wrap: normal aus seinem Kasten heraus und schiebt die ganze Seite
   in den waagrechten Scroll; gemessen am 04.09.2026 mit einem 80 Zeichen
   langen Nachnamen: Startseite 410 px, Satzansicht 322 px, Saisonliste
   319 px zu breit, am Desktop schrumpfte die Textspalte der Trefferkarte auf
   15 px. "anywhere" bricht solche Woerter und - wichtiger noch - laesst den
   Kasten im Raster auf die verfuegbare Breite schrumpfen (im Gegensatz zu
   break-word, das die min-content-Breite unangetastet laesst).
   Es gilt nur den Stellen, die Fremdtext tragen; Beschriftungen und
   Platzcodes der Anwendung sind bekannt und bleiben unangetastet. */
h1, h2, h3,
.satzkopf__neben, .satzkopf__kunde,
.karte__kz, .karte__zeile,
.eintrag__name, .eintrag__neben,
.platzcode, .platzort, .platzkarte__ort,
.regal__name, .zwischenstand, .kontext,
.meldung, .leer, .hinweis {
  overflow-wrap: anywhere;
}

/* Die Wortmarke laeuft ueber eine Maske und nimmt currentColor an:
   weiss im Kopfband, blau auf hellem Grund. Eine Datei, zwei Zustaende. */
.logo {
  display: inline-block;
  width: 4rem; height: 1.4125rem;
  background: currentColor;
  -webkit-mask: url("/assets/logo-sutter-carrosserie.svg") no-repeat center / contain;
          mask: url("/assets/logo-sutter-carrosserie.svg") no-repeat center / contain;
}

/* ---- Kopfband --------------------------------------------------------- */

.kopf {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 3.5rem;
  padding: 0.5rem var(--rand);
  background: var(--marke);
  color: var(--grund);
}
.kopf__marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  padding: 0.25rem 0;
}
.kopf__trenner { width: 1px; height: 1.25rem; background: var(--kante-auf-marke); }
.kopf__titel {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.kopf__nav { display: none; }
.abmelden { margin-left: auto; }
.abmelden__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--auf-tief);
  font: inherit;
  cursor: pointer;
}
.abmelden__knopf:hover { color: var(--grund); }
.abmelden__knopf:focus-visible { outline-color: var(--akzent); }
.abmelden__knopf:disabled { color: var(--kante-auf-marke); cursor: default; }
/* Der Benutzername wartet auf Platz. Bei 48 rem schaltet das Kopfband die
   Navigation ein; Wortmarke (186 px), sechs Punkte (422 px), Raender und
   Abstaende fuellen die 768 px des Umbruchs bereits bis auf 752 px aus. Der
   Name daneben machte die Zeile 862 px breit und schob damit jede Seite in
   den waagrechten Scroll. Er kommt darum erst ab 60 rem, und auch dann
   gekappt: der Anzeigename ist frei gewaehlt und darf keine Laenge haben,
   die das Kopfband sprengt. Wer den Namen nicht sieht, verliert nichts --
   er steht im title des Knopfs und als verstecktes Wort fuer die Vorlesehilfe. */
.abmelden__name {
  display: none;
  min-width: 0;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  /* Das Kopfband klebt, sobald es die Navigation traegt: die Belegung ist
     ueber 3700 px hoch, und wer unten im dritten Ort steht, kommt so ohne
     Rueckweg zur naechsten Ansicht. Am Handy klebt es bewusst nicht - dort
     steht die Navigation in der Daumenleiste, und Kopf plus Leiste wuerden
     zusammen ein Fuenftel der Bildschirmhoehe belegen.
     Die Haarlinie haelt die Kante, wo ein belegtes Fach ans Band stoesst:
     beide tragen --marke, ohne den Strich verschwimmen sie. Ein Schatten
     waere deutlicher, aber der erste im ganzen Erscheinungsbild - der
     Layout-Vertrag sagt 1-px-Kanten und flache Flaechen. */
  .kopf {
    padding: 0.5rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--marke-tief);
  }
  /* Sprungziele landen unter dem Band, nicht dahinter - die Anleitung hat
     vierzehn davon. 3.75 rem ist die tatsaechliche Kopfhoehe (min-height
     3.5 rem wird vom Inhalt ueberstimmt: Navigationslink 2.75 rem plus
     zweimal 0.5 rem Innenabstand), dazu die Haarlinie; auf 4 rem gerundet.
     Die Luft ueber der Ueberschrift kommt von deren scroll-margin-top. */
  html { scroll-padding-top: 4rem; }
  .kopf__nav {
    display: flex;
    gap: 0.25rem;
    margin-left: 1rem;
  }
  .kopf__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-klein);
    color: var(--auf-tief);
    text-decoration: none;
    font-family: var(--schrift-titel);
    font-weight: 600;
    font-size: 0.9375rem;
  }
  .kopf__nav a:hover { color: var(--grund); }
  .kopf__nav a:focus-visible { outline-color: var(--akzent); }
  .kopf__nav a.ist-aktiv { color: var(--grund); }
  .kopf__nav a.ist-aktiv::after {
    content: "";
    position: absolute;
    left: 0.75rem; right: 0.75rem; bottom: 0.25rem;
    height: 2px;
    background: var(--akzent);
  }
}

@media (min-width: 60rem) {
  .abmelden__name { display: block; }
}

/* ---- Leiste (Handy, Daumenreichweite) --------------------------------- */

.leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: grid;
  /* so viele Spalten, wie die Navigation Eintraege hat */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--grund);
  border-top: 1px solid var(--kante);
  padding-bottom: env(safe-area-inset-bottom);
}
.leiste a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-height: 3.75rem;
  padding: 0.5rem 0 0.5rem;
  color: var(--text-neben);
  text-decoration: none;
  font-family: var(--schrift-titel);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Ganzzahlige Hoehe (8 + 24 + 4 + 16 + 8 = 60 px): sonst liegt die Leiste
     auf einer Bruchkoordinate und der 2-px-Marker verschwimmt mit der Kante. */
  line-height: 1rem;
}
.leiste a.ist-aktiv { color: var(--marke); }
.leiste a.ist-aktiv::before {
  content: "";
  position: absolute;
  top: -1px;                     /* liegt auf der Haarlinie der Leiste */
  left: calc(50% - 0.75rem);
  width: 1.5rem; height: 2px;
  background: var(--akzent);
}
@media (min-width: 48rem) { .leiste { display: none; } }

/* ---- Fusszeile -------------------------------------------------------- */
/* Traegt den Verweis auf die Anleitung. Am Handy ist sie der einzige Weg
   dorthin (das Kopfband ist unter 48rem ausgeblendet, die Leiste bleibt bei
   fuenf Arbeitspunkten) und haelt zugleich den Abstand zur Leiste. */
.fuss {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 0 var(--rand) 6rem;
}
.fuss a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--text-neben);
  text-decoration: none;
  font-size: 0.9375rem;
}
.fuss a:hover { color: var(--marke); text-decoration: underline; }
@media (min-width: 48rem) { .fuss { padding: 0 1.5rem 2.5rem; } }

/* ---- Inhalt und Meldungen -------------------------------------------- */

.inhalt {
  max-width: var(--bahn);
  margin: 0 auto;
  /* Der Abstand zur festen Leiste sitzt in .fuss, die immer darunter steht.
     Ohne Anmeldung gibt es beide nicht - dann genuegt der kleine Wert. */
  padding: 1.25rem var(--rand) 2rem;
}
/* Ziel des Sprungs: der Ring gehoert nach innen. Aussen (die uebliche
   2 px Offset) laege er ueber der Bahnkante und schoebe die Seite in den
   waagrechten Scroll. */
.inhalt:focus-visible { outline-offset: -3px; }
.meldungen {
  max-width: var(--bahn);
  margin: 1rem auto 0;
  padding: 0 var(--rand);
}
.meldung {
  position: relative;
  margin: 0 0 0.5rem;
  padding: 0.875rem 1rem 0.875rem 3rem;
  background: var(--flaeche);
  border-radius: var(--radius-klein);
}
/* Markierungsstrich 24 x 2 px — das Einsatzzeichen der Marke */
.meldung::before {
  content: "";
  position: absolute;
  left: 1rem; top: calc(50% - 1px);
  width: 1.5rem; height: 2px;
  background: var(--akzent);
}
.meldung--erfolg::before { background: var(--marke); }
.meldung--fehler { color: var(--fehler); font-weight: 500; }
.meldung--fehler::before { background: var(--fehler); }

@media (min-width: 48rem) {
  .inhalt { padding: 2rem 1.5rem 2rem; }
  .meldungen { padding: 0 1.5rem; margin-top: 1.5rem; }
}

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1rem;
}
.seitenkopf h1 { margin: 0; }
/* Ein Knopf in der Kopfzeile (Filter zuruecksetzen) haengt sonst an der
   Schriftlinie der Ueberschrift und steht dadurch zu tief. */
.seitenkopf .knopf { align-self: center; }
.zwischenstand { color: var(--text-neben); margin: 0; }
.kontext { color: var(--text-neben); margin: -0.5rem 0 1.25rem; }
.kontext strong { color: var(--text); font-family: var(--schrift-titel); }

.leer {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-neben);
  background: var(--flaeche);
  border-radius: var(--radius-gross);
}
.leer code { font-family: ui-monospace, monospace; font-size: 0.9em; }

/* ---- Knoepfe ---------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius-klein);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--weich), color 0.2s var(--weich);
}
/* Blau traegt nur noch die reine Abfrage ("Suchen") - es aendert nichts. */
.knopf--primaer { background: var(--marke); color: var(--grund); }
.knopf--primaer:hover { background: var(--marke-tief); }
/* Gruen heisst: dieser Knopf aendert etwas - einlagern, speichern, anlegen.
   Die Legende dazu steht in /anleitung, Abschnitt "Knoepfe". */
.knopf--handlung { background: var(--handlung); color: var(--grund); }
.knopf--handlung:hover { background: var(--handlung-tief); }
/* Umriss-Gewicht: drei Farben, eine Geometrie. Es traegt die zweite Aktion
   neben der ersten, nie die einzige - sonst geht die Rangfolge verloren.
   border-color steht je Farbe fest, damit der Rand beim Fuellen bleibt. */
.knopf--umriss,
.knopf--handlung-umriss,
.knopf--abbruch {
  background: var(--grund);
  border: 1px solid currentColor;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
}
.knopf--umriss { color: var(--marke); border-color: var(--marke); }
.knopf--umriss:hover { background: var(--flaeche); }
.knopf--handlung-umriss { color: var(--handlung); border-color: var(--handlung); }
.knopf--handlung-umriss:hover { background: var(--handlung); color: var(--grund); }
.knopf--abbruch { color: var(--fehler); border-color: var(--fehler); }
.knopf--abbruch:hover { background: var(--fehler); color: var(--grund); }
.knopf--breit { width: 100%; }
.knopf--klein { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.knopf:disabled { background: var(--kante); color: var(--text-neben); cursor: default; }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 1.5rem; }
/* Das Auslagern-Formular ist nur Huelle - seine Knoepfe zaehlen. */
.aktionen form { display: contents; }
/* In der Platzkarte sitzt die Knopfreihe schon in einem Kasten. */
.aktionen--karte { margin: 0; }
.aktionen .knopf { flex: 1 1 12rem; }
@media (min-width: 48rem) { .aktionen .knopf { flex: 0 0 auto; min-width: 12rem; } }

/* ---- Formulare -------------------------------------------------------- */

.formular { max-width: 36rem; }
/* Einlagern: Profil und Platzfeld bleiben in der Formularspalte, die
   Regalwand darunter nimmt die ganze Bahn - sie ist die Karte, kein Feld. */
.formular--einlagern { max-width: none; }
.formular--einlagern .radstand,
.formular--einlagern .hinweis,
.formular--einlagern .platzfeld { max-width: 36rem; }
/* Eine Zeile: am Handy klebt der Block ueber der Leiste und darf nicht zwei
   Knopfhoehen hoch werden, sonst bleibt von der Regalwand nichts uebrig. */
.senden { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.senden .knopf--breit { margin-top: 0; max-width: 36rem; }
.senden .abbrechen { margin: 0; }
@media (max-width: 47.99rem) {
  /* Am Handy klebt der Sende-Knopf ueber der Daumenleiste: Fach antippen
     und Einlagern liegen zusammen, ohne unter drei Regalen zu scrollen. */
  .senden {
    position: sticky;
    bottom: calc(3.75rem + 1px + env(safe-area-inset-bottom)); /* Leiste 60 px + Haarlinie */
    z-index: 5;
    margin: 1rem calc(-1 * var(--rand)) 0;
    padding: 0.75rem var(--rand);
    background: var(--grund);
    border-top: 1px solid var(--kante);
  }
}
label { display: block; font-weight: 600; font-size: 0.875rem; margin: 1rem 0 0.375rem; }
label:first-child { margin-top: 0; }
input, select {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--kante-stark);
  border-radius: var(--radius-klein);
  background: var(--grund);
  color: var(--text);
  font: inherit;
}
input::placeholder { color: var(--platzhalter); opacity: 1; }
input[aria-invalid="true"] { border-color: var(--fehler); }
select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1D21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
}
fieldset { border: 0; padding: 0; margin: 1.75rem 0 0; min-width: 0; }
legend {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.125rem;
  padding: 0;
  margin-bottom: 0.25rem;
}
.hinweis { color: var(--text-neben); font-size: 0.875rem; margin: 0 0 0.75rem; }
.formular .knopf--breit { margin-top: 1.75rem; }
/* Die Zeile hat bewusst keinen Zeilenabstand (gap: 0 1rem) - den Abstand
   traegt der obere Rand der Beschriftung, wie in jedem anderen Feld auch.
   In der Zeile ist jedes Label erstes Kind seines Kaestchens, sonst nimmt
   ihm label:first-child den Rand: einspaltig gestapelt klebten am Handy Ort
   und Telefon aneinander. Die Regel muss darum hier stehen und nicht in der
   Media-Query - und nach label:first-child, denn beide wiegen gleich (0,1,1). */
.zeile { display: grid; gap: 0 1rem; }
.zeile label { margin-top: 1rem; }
@media (min-width: 30rem) { .zeile { grid-template-columns: 1fr 1fr; } }

.masseinheit { display: flex; align-items: center; gap: 0.5rem; }
.masseinheit input { flex: 1; min-width: 0; }
.masseinheit span { color: var(--text-neben); font-weight: 600; font-size: 0.875rem; }

/* Suche: ein grosses Feld, das Symbol sitzt im Feld */
.suchformular { display: flex; gap: 0.5rem; }
.suchformular .knopf { min-height: 3.5rem; flex: none; }
.suchfeld { position: relative; flex: 1; min-width: 0; }
.suchfeld .icon {
  position: absolute;
  left: 0.875rem; top: 50%;
  translate: 0 -50%;
  color: var(--text-neben);
  pointer-events: none;
}
.suchfeld input {
  min-height: 3.5rem;
  padding-left: 3rem;
  font-size: 1.125rem;
}

/* Filterzeile: klappbar unter dem Suchfeld, nimmt im Flex-Formular die volle Breite.
   Die Begrenzung auf 36 rem sitzt am Felderraster, NICHT am Flex-Element:
   beim Zeilenumbruch zaehlt die hypothetische Hauptgroesse, und ein
   max-width am Element deckelt sie - dann bricht flex-basis: 100% nicht
   mehr um und der Filter setzt sich neben Suchfeld und Knopf, die
   align-items: stretch auf seine Hoehe zieht. */
.suchformular { flex-wrap: wrap; }
.filter { flex: 1 0 100%; }
.filter__felder { max-width: 36rem; }
.filter summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-neben);
  padding: 0.5rem 0;
  list-style-position: inside;
}
.filter[open] summary { color: var(--text); }
/* Gelb markiert, es fuellt nicht: «aktiv» traegt den 2-px-Markierungsstrich
   der Marke, nicht eine gelbe Flaeche. Die gefuellte Pille stand ausserhalb
   der vier erlaubten Faelle (Strich, markiertes Fach, aktuelle Schrittnummer,
   Legendenpunkt) - gefunden von der Design-Kritik vom 09.09.2026. */
.filter__aktiv {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: 0.5rem;
  color: var(--text);
  font-size: 0.75rem;
}
.filter__aktiv::before {
  content: "";
  width: 1.5rem; height: 2px;
  background: var(--akzent);
}
.filter__felder { display: grid; gap: 0 1rem; padding-bottom: 0.5rem; }
@media (min-width: 30rem) { .filter__felder { grid-template-columns: 1fr 1fr; } .filter__felder .kaestchen { margin-top: 2.5rem; } }
.filter__felder label { margin-top: 0.75rem; }

/* Kaestchen: Beschriftung neben dem Haken, nicht darueber */
.kaestchen { display: flex; align-items: center; gap: 0.625rem; min-height: 3rem; }
.kaestchen input[type="checkbox"] {
  width: 1.375rem;
  height: 1.375rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--marke);
}

.karte__zustand { color: var(--text); font-weight: 500; }

.saisonwahl { max-width: 20rem; margin-bottom: 0.75rem; }
.saisonwahl select { font-family: var(--schrift-titel); font-weight: 600; }

/* ---- Regalwand-Karte -------------------------------------------------- */

/* Die Karte ist mindestens so breit, dass ihre Faecher ihr Mass behalten:
   vorher stand dasselbe Fach bei 1280 px in einer Karte 42 px, in der Karte
   daneben 469 px breit - eine Wand in einem Dutzend Massen (Design-Kritik
   vom 09.09.2026). Bleibt Platz uebrig, bleibt er als Flaeche stehen.
   --regal-breite folgt aus --fach dieser Wand (siehe .regale--gross). */
.regale {
  --regal-breite: calc(
    var(--spalten-max) * var(--fach)
    + (var(--spalten-max) - 1) * var(--fach-fuge)
    + 2rem
  );
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--regal-breite)), 1fr));
  margin: 0.5rem 0 1rem;
}
/* Leere Spuren bleiben stehen (auto-fill): hat ein Ort weniger Regale, als
   nebeneinander passen, behalten seine Karten trotzdem das Mass der Wand.
   Mit auto-fit kollabierten die leeren Spuren und die Breite ging an die
   uebrigen - «Gestell Werkstatt» (ein Regal, zwei Faecher) trug so eine
   Karte ueber die ganze Bahn, die zwei Faecher links und den Stand ganz
   rechts (10.09.2026). Die Karte zu deckeln waere der falsche Hebel: dann
   stuenden in einer Zeile Karten zu 476 und zu 497 px nebeneinander.
   Kollabieren duerfen die Spuren nur dort, wo ein Regal die gewonnene Breite
   auch braucht - dann fuellt es sie mit Faechern (siehe .regal--umlauf).
   Ohne :has() bleibt es bei auto-fill: die Wand steht dann wie vor dem
   10.09.2026, nichts bricht. */
.regale:has(> .regal--umlauf) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--regal-breite)), 1fr));
}
.regal {
  background: var(--flaeche);
  border-radius: var(--radius-gross);
  padding: 1rem;
}
.regal__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.regal__name {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--marke);
}
.regal__stand { color: var(--text-neben); font-size: 0.875rem; }

/* Volles Regal auf der Startseite: zu, bis jemand es aufklappt. Das Lager
   ist strukturell fast voll - je Fahrzeug liegt immer einer der beiden
   Saetze -, und ausgeschrieben trug die Wand dort 171 gleich blaue Kacheln
   ueber 2719 px, ohne mehr zu sagen als «voll» (Design-Kritik vom
   10.09.2026). Die Karte bleibt eine Karte an ihrem Ort in der Wand: der
   Balken ist das Regal in der Farbe, die «hier liegt etwas» heisst, nicht
   eine Listenzeile. Der Kopf wird dabei zum Raster, weil der Balken unter
   Name und Stand gehoert und nicht daneben. */
.regal--voll > .regal__kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem 1rem;
  cursor: pointer;
  list-style: none;
}
.regal--voll > .regal__kopf::-webkit-details-marker { display: none; }
.regal--voll .regal__stand { display: inline-flex; align-items: center; gap: 0.375rem; }
.regal--voll .regal__stand .icon {
  width: 1rem;
  height: 1rem;
  rotate: 90deg;
  transition: rotate 0.2s var(--weich);
}
.regal--voll[open] .regal__stand .icon { rotate: 270deg; }
.regal__balken {
  grid-column: 1 / -1;
  height: 1.75rem;
  border-radius: var(--radius-klein);
  background: var(--marke);
  transition: background-color 0.2s var(--weich);
}
.regal--voll > .regal__kopf:hover .regal__balken { background: var(--marke-tief); }
.regal--voll[open] .regal__balken { display: none; }
/* Die Faecher eines Regals in einer Reihe. Das Raster hat --faecher Spalten
   (hoechstens --spalten-max); Bodenflaechen mit mehr Plaetzen laufen darin
   um. Die Spalte ist --fach breit und schrumpft nur, wenn die Karte selbst
   zu schmal wird (sehr kleine Geraete) - sie dehnt sich nie darueber. */
.regal__faecher {
  display: grid;
  grid-template-columns: repeat(var(--faecher), minmax(0, var(--fach)));
  gap: var(--fach-fuge);
}
/* Ein Regal, das ohnehin umlaeuft, richtet sich nach der Breite seiner
   Karte statt nach --spalten-max: hat ein Ort nur ein Regal, kollabiert
   auto-fit in .regale die leeren Spuren und zieht die Karte auf die ganze
   Bahn - mit sechs festen Spalten blieben zwei Drittel davon leer («Schopf
   oben», 31 Boden-Faecher, 10.09.2026). Das Fach behaelt sein Mass:
   auto-fill zaehlt die Spalten, es dehnt sie nicht (darum var(--fach) und
   nicht 1fr). Bis --spalten-max Faecher bleibt es beim festen Raster - dort
   steht jedes Fach in seiner Nummernspalte, damit Luecken sichtbar sind. */
.regal--umlauf .regal__faecher {
  grid-template-columns: repeat(auto-fill, var(--fach));
}
.fach {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.25rem;
  border-radius: var(--radius-klein);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s var(--weich), color 0.2s var(--weich), border-color 0.2s var(--weich);
}
.fach--frei {
  background: var(--grund);
  color: var(--text-neben);
  border: 1px solid var(--kante-stark);
}
.fach--belegt { background: var(--marke); color: var(--grund); }
a.fach--belegt:hover { background: var(--marke-tief); }
.fach--markiert, a.fach--markiert:hover { background: var(--akzent); color: var(--text); border-color: var(--akzent); }
.fach__wer {
  display: none;
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Belegung: im Fach steht ein Name, also ist dort das Fach breiter - und mit
   ihm die Karte, die sechs davon traegt (29.75 rem, zwei je Zeile statt
   drei). Ein Mass, aus dem das andere folgt: --fach ist der einzige Hebel,
   die Spaltenzahl der zweite (views/belegung.php). Das breitere Fach gilt
   erst ab 40 rem - genau dort erscheint der Name. Darunter bleibt das
   Kartenmass der Wand, sonst schrumpfte ein Regal mit sechs Faechern in
   einer Karte, die fuer sechs breite zu schmal ist, waehrend das Regal
   daneben mit zwei Faechern seine Breite behielte.
   4.3125rem (69 px) statt 4.375: bei 70 px wird die Karte 482 px breit, und
   zwei davon brauchten 980 px - vier mehr, als die Bahn damals (976 px)
   hatte. Seit die Bahn drei Karten der Wand traegt (1010 px), gingen auch
   70 px; das Mass bleibt, weil es nichts gewinnt - fuer drei Karten je
   Zeile braeuchte es 1460 px. */
.regale--gross .fach { min-height: 3.25rem; }
@media (min-width: 40rem) {
  .regale--gross { --fach: 4.3125rem; }
  .regale--gross .fach { min-height: 3.5rem; }
  .regale--gross .fach__wer { display: block; }
}

/* Lagerort: ein Abschnitt je Ort, darunter seine Regale */
.lagerort + .lagerort { margin-top: 1.5rem; }
.seitenkopf--ort { margin-top: 0.5rem; }
.seitenkopf--ort h2, .seitenkopf--ort h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
/* Ort zum Platzcode: leise, unter oder neben dem Code. Einzeilig mit Ellipse
   wie der Name im Fach (.fach__wer) - der Code ist die Kennung, der Ort nur
   die Einordnung, und ein Ortsname darf 60 Zeichen lang sein. */
.platzort, .platzkarte__ort {
  display: block;
  color: var(--text-neben);
  font-size: 0.8125rem;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platzkarte__ort { margin: 0.125rem 0 0; }

/* Waehlen: freie Faecher sind Knoepfe, das Textfeld bleibt der Rueckfall */
button.fach { font: inherit; font-family: var(--schrift-titel); font-weight: 700; cursor: pointer; }
button.fach--waehlbar:hover { border-color: var(--marke); color: var(--marke); }
button.fach--markiert:hover { color: var(--text); border-color: var(--akzent); }
.platzwahl { margin-top: 0.75rem; }

/* Mini: das Regal als Fingerabdruck neben dem Platzcode - dieselbe Regel,
   eigenes Mass (--fach), keine Karte darunter.
   Der Fingerabdruck bleibt hoechstens drei Reihen hoch: die Spaltenzahl
   rechnet views/regalkarte.php aus der Faecherzahl, und die Zelle schrumpft
   von 0.75 rem herunter, bis alle Spalten in --platzspalte passen. Vorher
   zaehlte er dieselben sechs Spalten wie die Wand und wuchs nach unten - ein
   Boden mit 31 Faechern ergab 82 px Fingerabdruck neben 12 px bei einem
   Zweier-Regal, und die Trefferkarte schwankte dadurch in derselben Liste
   zwischen 103 und 173 px Hoehe (Design-Kritik vom 10.09.2026). Die Zelle
   bleibt quadratisch (aspect-ratio), weil sie jetzt in der Breite variiert. */
.regal--mini {
  --fach: 0.75rem;
  --fach-fuge: 2px;
  width: 100%;
  max-width: var(--platzspalte);
  background: none;
  padding: 0;
  border-radius: 0;
}
.regal--mini .fach {
  min-height: 0;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 0;
  font-size: 0;
}
.regal--mini .fach--frei { border-color: var(--kante-stark); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin: 0.5rem 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--text-neben);
  font-size: 0.875rem;
}
.legende li { display: inline-flex; align-items: center; gap: 0.5rem; }
.legende__farbe { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 2px; }
.legende__farbe--belegt { background: var(--marke); }
.legende__farbe--frei { background: var(--grund); border: 1px solid var(--kante-stark); }
.legende__farbe--markiert { background: var(--akzent); }
/* Der Balken eines vollen Regals ist blau wie ein belegtes Fach, fuehrt
   aber nicht zum Satz, sondern klappt das Regal auf - darum steht er als
   eigener Punkt in der Legende (nur auf der Startseite). Halb so hoch wie
   breit: der Punkt ist der Balken im Kleinen, nicht ein zweites Fach. */
.legende__farbe--voll { background: var(--marke); height: 0.4375rem; border-radius: 1px; }

/* ---- Suchtreffer ------------------------------------------------------ */

.lagerstand { margin-top: 1.5rem; }
.lagerstand .seitenkopf { margin-bottom: 0.25rem; }
.lagerstand h2 { margin: 0; }

/* Wartezustand des Live-Filters. Er erscheint erst nach 200 ms (app.js) -
   die Antwort ist meist schneller da, und eine aufblitzende Deckkraft
   liest sich als Fehler statt als beschaeftigt. */
.ist-ladend { opacity: 0.6; transition: opacity 0.2s var(--weich); }

.treffer {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 48rem) { .treffer { grid-template-columns: 1fr 1fr; } }

.karte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  background: var(--grund);
  border: 1px solid var(--kante);
  border-radius: var(--radius-gross);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 0.25s var(--weich), border-color 0.2s var(--weich);
}
.karte:hover { box-shadow: var(--schatten-karte); border-color: var(--kante-stark); }
/* Die linke Spalte traegt Platzcode, Ort und Mini-Regal - in der Karte, in
   der Saisonliste und in der Fachliste dasselbe Mass (--platzspalte), damit
   die Textspalte daneben in jeder Zeile an derselben Kante beginnt. Vorher
   war sie "auto" und wuchs mit ihrem breitesten Kind: ein langer Ortsname
   zog sie ueber die halbe Karte und presste den Text rechts zu einer Spalte
   aus Einzelwoertern (gemessen: 15 px), ein Deckel von 9 rem fing das ab -
   und liess den Versatz von Zeile zu Zeile stehen. Fest heisst auch: die
   Spalte schrumpft nicht (flex-shrink 0), sonst holte sich der Text am
   Handy zurueck, was hier ausgerichtet wird. */
.karte__platz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  flex: 0 0 var(--platzspalte);
  width: var(--platzspalte);
}
/* Der Fingerabdruck bekommt in der Trefferkarte seine drei Reihen
   reserviert (3 x 0.75 rem plus zwei Fugen), auch wenn das Regal nur eine
   braucht. Damit ist jede Karte mit Platz gleich hoch - vorher sprang die
   Zeile in derselben Liste zwischen 103 und 173 px, je nachdem in welchem
   Lagerort der Kunde liegt. */
.karte .regal--mini { min-height: 2.5rem; }
.karte__text { min-width: 0; }
.karte__kz {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
}
.karte__zeile {
  display: block;
  color: var(--text-neben);
  font-size: 0.9375rem;
  line-height: 1.4;
}
/* Die Saison ist das Merkmal, das vor dem falschen Satz eines Kunden
   schuetzt (Sommer- statt Winterraeder) - sie bleibt darum in der grauen
   Nebenzeile, tritt aber wie eine kleine Radposition-Etikette hervor statt
   im gleichen Gewicht wie "Kompletträder" unterzugehen. */
.karte__saison {
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--marke);
}

.platzcode {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--marke);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.platzcode--leer {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--text-neben);
}
.platzcode--klein { font-size: 1.25rem; } /* Breite kommt von --platzspalte */

/* ---- Satz ------------------------------------------------------------- */

.satzkopf { margin-bottom: 1.25rem; }
.satzkopf__neben { color: var(--text-neben); margin: 0; }
.satzkopf__kunde { margin: 0.25rem 0 0; }
.satzkopf__kunde a { display: inline-flex; align-items: center; gap: 0.375rem; vertical-align: bottom; }
.satzkopf__kunde .icon { width: 1.125rem; height: 1.125rem; }

/* Leise Verweise "Bearbeiten": Nebenfarbe, kleines Symbol, kein Knopf */
.link--leise {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-neben);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.5rem;
  vertical-align: bottom;
}
.link--leise:hover { color: var(--marke); text-decoration: underline; }
.link--leise .icon { width: 1rem; height: 1rem; }
.seitenkopf--abschnitt { margin-top: 2rem; }
.seitenkopf--abschnitt h2 { margin: 0; }

textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--kante-stark);
  border-radius: var(--radius-klein);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
/* Abbrechen ist ein Knopf (.knopf--abbruch). Es bleibt schmal und mittig
   unter dem breiten gruenen Speichern - zweite Wahl, nicht zweite Haelfte. */
.abbrechen { display: flex; width: fit-content; margin: 0.75rem auto 0; }

.platzkarte {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--flaeche);
  border-radius: var(--radius-gross);
  margin: 0 0 1rem;
}
/* Eine 1fr-Spalte ist mindestens so breit wie ihr min-content - und das ist
   bei einem einzeiligen Ortsnamen der ganze Name. Ohne min-width: 0 schiebt
   ein langer Ort die Karte samt Mini-Regal aus dem Bildschirm; gemessen am
   04.09.2026: 185 px zu breit am Handy. Dieselbe Vorsichtsmassnahme traegt
   .karte__text im Suchtreffer. */
.platzkarte > * { min-width: 0; }
.platzkarte .platzcode { font-size: 3rem; margin-top: 0.25rem; }
.platzkarte .platzcode--leer { font-size: 1.25rem; }
.platzkarte__seit { color: var(--text-neben); margin: 0.375rem 0 0; }
.platzkarte .knopf { align-self: center; }

.radstand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  max-width: 36rem; /* der Radstand eines Autos, nicht die ganze Bahn */
}
.rad {
  padding: 0.75rem 1rem;
  background: var(--grund);
  border: 1px solid var(--kante);
  border-radius: var(--radius-klein);
  min-width: 0;
}
.rad--reserve { grid-column: 1 / -1; }
.rad__pos {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--marke);
}
.rad__dim { font-weight: 600; margin: 0.125rem 0 0; line-height: 1.4; overflow-wrap: anywhere; }
.rad__dot { color: var(--text-neben); font-size: 0.875rem; }
/* Marke eines auffaelligen Reifens: zu wenig Profil oder zu alt.
   akzent-dunkel ist das CI-Token fuer Gelb als Zeichen auf hellem Grund -
   Gelb markiert, und die Eine-Warnfarbe-Regel bleibt unangetastet: fehler
   ist weiterhin die einzige Warnfarbe (DESIGN.md). */
.rad__marke {
  display: block;
  margin-top: 0.25rem;
  color: var(--akzent-dunkel);
  font-weight: 500;
  font-size: 0.8125rem;
}
.rad--eingabe label { margin: 0 0 0.5rem; display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.rad--eingabe .rad__dot { font-weight: 400; }
.rad--eingabe input { margin: 0; }
.rad--eingabe input + label { margin-top: 0.75rem; }

.tabelle { overflow-x: auto; margin: 0.5rem 0 1rem; }
.tabelle--schmal { max-width: 36rem; } /* vier Zahlenspalten gehoeren neben das Datum, nicht 500 px weit weg */
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--kante-stark);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-neben);
  white-space: nowrap;
}
td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--kante); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
/* ---- Kundenblatt ------------------------------------------------------ */

/* Je Fahrzeug ein Block; die Saetze darunter in der Listengrammatik der
   Saisonliste. Kein Regal-Fingerabdruck: das Blatt beantwortet «welche
   Saetze», nicht «wo genau im Regal». */
.fahrzeugblock { margin-bottom: 1.5rem; }
.liste--leise .eintrag__name { color: var(--text-neben); font-weight: 600; }

/* Nachgeordneter Abschnitt am Seitenende - abgesetzt, aber nicht versteckt.
   Traegt das Aufloesen: eine seltene Handlung, die nicht neben den
   Alltagshandgriffen stehen soll. */
.abschnitt-leise {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kante);
}
.abschnitt-leise h2 { margin-top: 0; }

.zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Profiltiefe unter der Schwelle - dieselbe Marke wie an der Radkarte. */
.zahl--marke { color: var(--akzent-dunkel); font-weight: 500; }
td.zahl { font-family: var(--schrift-titel); font-weight: 600; }
tbody tr:first-child td.zahl { color: var(--marke); }

/* ---- Listen (Saison, Aufnahme) ---------------------------------------- */

.liste {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--kante);
}
.formular + .liste, .formular + .leer { max-width: 36rem; }
.liste__eintrag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--kante);
}
.eintrag__haupt {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  color: var(--text);
  text-decoration: none;
}
.eintrag__haupt:hover .eintrag__name { color: var(--marke); }
.eintrag__text { flex: 1; min-width: 0; }
.eintrag__name { display: block; font-weight: 600; line-height: 1.4; }
.eintrag__neben { display: block; color: var(--text-neben); font-size: 0.875rem; line-height: 1.4; }
.eintrag__haupt .icon--weiter { color: var(--kante-stark); }
.anrufen span { display: none; }
@media (min-width: 30rem) { .anrufen span { display: inline; } }

/* Anrufliste: bereits angerufen. Gedaempft ueber die Textfarbe, nicht ueber
   opacity - Deckkraft naehme auch dem Platzcode und dem Fokusring den
   Kontrast, und der Rueckweg muss antippbar bleiben. */
.liste__eintrag--erledigt .eintrag__name,
.liste__eintrag--erledigt .platzcode,
.liste__eintrag--erledigt .platzort { color: var(--text-neben); }
.liste__eintrag--erledigt .eintrag__neben .icon { vertical-align: -0.2em; width: 1rem; height: 1rem; }

/* Am Handy stehen die Knoepfe **unter** dem Eintrag, nicht daneben. Mit
   «anrufen» und «Angerufen» in derselben Zeile blieb fuer Name und Fahrzeug
   eine Spalte von rund 100 px, in der jedes Wort einzeln umbrach - gesehen
   am 10.09.2026 bei 375 px. Der Querscroll-Test schlaegt darauf nicht an,
   die Zeile laeuft ja nicht ueber; sichtbar wird es nur beim Hinsehen.
   Ab 30 rem ist Platz, dort stehen sie wieder rechts.
   Kollabieren darf die Zeile nur dort, wo Knoepfe stehen - dieselbe
   Vorsicht wie bei .regale:has(> .regal--umlauf). */
.liste__eintrag:has(.eintrag__knoepfe) { flex-wrap: wrap; }
.eintrag__knoepfe {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 100%;
  justify-content: flex-end;
}
@media (min-width: 30rem) {
  .eintrag__knoepfe { flex: 0 0 auto; }
}
.listentrenner {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  color: var(--text-neben);
}

/* ---- Neuaufnahme: Schritte -------------------------------------------- */

.schritte {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: 36rem; /* gleiche Breite wie das Formular darunter */
  counter-reset: schritt;
}
.schritte li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  font-family: var(--schrift-titel);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-neben);
}
.schritte li::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-voll);
  background: var(--kante);
  color: var(--text);
  font-weight: 700;
}
.schritte .ist-erledigt::before { background: var(--marke); color: var(--grund); }
.schritte .ist-aktuell { color: var(--marke); }
.schritte .ist-aktuell::before { background: var(--akzent); color: var(--text); }
.schritte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 30rem) {
  .schritte li:not(.ist-aktuell) { flex: 0 0 auto; }
  .schritte li:not(.ist-aktuell) span { display: none; }
}

/* ---- Anmeldung, Fehler ------------------------------------------------ */

.anmeldung { max-width: 24rem; margin: 1.5rem auto 0; }
.anmeldung__karte {
  padding: 1.5rem;
  background: var(--flaeche);
  border-radius: var(--radius-gross);
}
.anmeldung h1 { margin-bottom: 0.25rem; }
.anmeldung .hinweis { margin-bottom: 1.25rem; }
.anmeldung .knopf--breit { margin-top: 1.5rem; }

.einzelheit {
  overflow-x: auto;
  padding: 1rem;
  background: var(--flaeche);
  border-radius: var(--radius-klein);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Absicherung fuer Elemente, die app.js aus- und einblendet: traegt ein
   solches Element eine Klasse mit eigenem display (etwa .radstand), schlaegt
   diese sonst den Browser-Standard fuer [hidden]. */
[hidden] { display: none !important; }

/* Was aus dem Fach herauskommt - eine Zeile, gleiche Hoehe wie .kontext. */
.wechselrichtung {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.5rem 0 1.25rem;
  color: var(--text-neben);
}

/* Beschriftung eines Profilblocks, wenn mehrere Radsaetze zur Wahl stehen. */
.hinweis--satz { font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }

/* Rot traegt zwei Bedeutungen, getrennt durch das Gewicht: die gefuellte
   Flaeche loescht, der Rand (.knopf--abbruch) bricht nur ab. */
.knopf--gefahr {
  background: var(--fehler);
  color: var(--grund);
  border: 1px solid var(--fehler);
}
.knopf--gefahr:hover { background: var(--fehler-tief); border-color: var(--fehler-tief); }

/* Der Sperrschalter sitzt rechts neben dem Fach. */
.fachschalter { display: flex; align-items: center; }

/* Aufklappbarer Block: die Faecherliste ist die haeufige Ansicht, das
   Anlegen die seltene - bei 56 Faechern waere es sonst unerreichbar weit
   unten. <details> braucht kein JavaScript und faellt nicht unter die CSP. */
.klappe {
  margin: 0 0 1.5rem;
  border: 1px solid var(--kante);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.klappe > summary {
  padding: 0.85rem 1rem;
  font-family: var(--schrift-titel);
  font-weight: 600;
  cursor: pointer;
}
.klappe[open] > summary { border-bottom: 1px solid var(--kante); }
.klappe > .formular { max-width: none; padding: 1rem; margin: 0; }
.klappe > .formular + .formular { border-top: 1px solid var(--kante); }

/* ---- Fachseite (Landung eines Etikett-Scans) --------------------------- */
/* Zwei leise Wege nebeneinander, damit die Seite nicht in einer Sackgasse
   endet: zurueck zum Lagerort und zum Bearbeiten des Fachs. */
.fachwege { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; }

/* ---- Anleitung -------------------------------------------------------- */
/* Lesetext, nicht Werkzeug: schmalere Bahn als der Rest der App, damit die
   Zeile nicht ueber die halbe Bildschirmbreite laeuft. */

.anleitung { max-width: 44rem; }
.anleitung__lead {
  font-size: 1.0625rem;
  color: var(--text-neben);
  margin-bottom: 1.5rem;
}
/* Der Einsatzstrich der Marke setzt die Abschnitte ab. */
.anleitung h2 {
  scroll-margin-top: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kante);
}
.anleitung h2::before {
  content: "";
  display: block;
  width: 1.5rem; height: 2px;
  margin-bottom: 0.75rem;
  background: var(--akzent);
}
.anleitung code {
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--flaeche);
  border-radius: 3px;
}

.anleitung__inhalt {
  background: var(--flaeche);
  border-radius: var(--radius-gross);
  padding: 1.25rem 1.5rem;
}
.anleitung__inhalt ol {
  margin: 0;
  padding-left: 1.25rem;
  columns: 1;
  font-family: var(--schrift-titel);
  font-weight: 600;
}
.anleitung__inhalt li { margin-bottom: 0.35rem; break-inside: avoid; }
@media (min-width: 40rem) { .anleitung__inhalt ol { columns: 2; column-gap: 2rem; } }

.anleitung__liste, .anleitung__schritte { padding-left: 1.25rem; }
.anleitung__liste li, .anleitung__schritte li { margin-bottom: 0.6rem; }

/* Die drei Zustaende der Regalwand, mit denselben Farbtupfern wie dort. */
.anleitung__zustaende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--text-neben);
}
.anleitung__zustaende li { display: flex; align-items: center; gap: 0.5rem; }

/* Knopf-Legende: die Muster sind echte .knopf-Elemente, keine Nachbildung -
   aendert sich das Stylesheet, aendert sich die Legende mit. */
.knopflegende { margin: 1rem 0 0; }
.knopflegende dt { margin-top: 1.25rem; }
.knopflegende dd { margin: 0.4rem 0 0; color: var(--text-neben); }
@media (min-width: 40rem) {
  .knopflegende {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1rem 1.5rem;
    align-items: center;
  }
  .knopflegende dt, .knopflegende dd { margin: 0; }
}

/* Meldungen im Wortlaut, damit sie sich auf dem Bildschirm wiedererkennen. */
.anleitung__meldungen dt {
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--fehler);
}
.anleitung__meldungen dd { margin: 0.25rem 0 0; }