/* =============================================================================
   STUFENKARTE — Stil des Fahrplans der Fussleiste.

   Liegt AUF `zz-fuss.css`: Behaelter (`.wrap`), Kopfzeile, Wechsler, Fokus,
   Geruest und Meldung stehen dort einmal und werden hier nicht wiederholt.
   Diese Datei traegt nur, was der Fahrplan zusaetzlich braucht: Stufenblock,
   Zaehlbalken, Verweiszeile, Merkmal.

   ZWEI ACHSEN, ZWEI DARSTELLUNGEN — und keine davon ist nur Farbe (R28d):
     Stufe   = Ziffer und Ordnung. Steht als Zahl da, nicht als Ton.
     Bestand = Wort und Form. Voller Kreis (steht), Ring (extern),
               Raute (Werkstatt), Grundstrich (geplant), gepunkteter Rahmen
               (unbekannt). In Graustufen bleibt jede Aussage erhalten.

   Telefon zuerst (R6): eine Spalte ab 360 px, Erweiterung erst ab 720/1100 px.
   ============================================================================= */

:root{
  --s-zeile-y:var(--zz-s-3);
  --s-marke:.75rem;
}

/* ------------------------------------------------------------- Uebersicht --- */
.suebersicht{ padding-block:var(--f-luft-m) var(--f-luft-s);
  border-block-end:1px solid var(--f-linie); }
.sbalken{ display:flex; block-size:var(--zz-s-3); margin-block:var(--zz-s-4);
  border:1px solid var(--f-linie-stark); overflow:hidden; }
.sbalken-teil{ min-inline-size:2px; }
.sbalken-teil[data-art="steht"]{ background:var(--zz-ink); }
.sbalken-teil[data-art="luecke"]{ background:repeating-linear-gradient(
    135deg, var(--f-linie) 0 3px, transparent 3px 7px); }
.slegende{ display:flex; flex-wrap:wrap; gap:var(--zz-s-3) var(--zz-s-5);
  margin:0; padding:0; list-style:none; font-size:var(--f-klein);
  color:var(--zz-ink-dim); }

/* Die vier Faelle der Regel. Kein Aufzaehlungszeichen, sondern die Ordnung
   selbst: erst der Zustand, dann was daraus folgt. */
.sregel{ display:grid; gap:var(--zz-s-3); margin:var(--zz-s-5) 0 0; padding:0;
  max-inline-size:78ch; }
.sregel div{ display:grid; gap:var(--zz-s-1); padding-inline-start:var(--zz-s-4);
  border-inline-start:2px solid var(--f-linie); }
.sregel dt{ font-weight:500; color:var(--zz-ink); font-size:var(--f-klein); }
.sregel dd{ margin:0; color:var(--zz-ink-dim); font-size:var(--f-klein);
  text-wrap:pretty; }

/* ------------------------------------------------------------ Stufenblock --- */
.sstufe{ padding-block:var(--f-luft-m);
  border-block-start:1px solid var(--f-linie); }
.skopf{ display:grid; gap:var(--zz-s-3); }
.sziffer{ font-family:var(--zz-display); font-weight:200; line-height:.8;
  font-size:clamp(3.5rem,12vw,6rem); color:var(--zz-ink-dim);
  font-variant-numeric:tabular-nums; }
.sh2{ font-family:var(--zz-display); font-weight:400; letter-spacing:-.03em;
  font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.1; margin:0;
  color:var(--zz-ink); text-wrap:balance; }
.sen{ display:block; font-family:var(--zz-sans); font-weight:400;
  font-size:var(--f-klein); letter-spacing:.14em; text-transform:uppercase;
  color:var(--zz-ink-dim); margin-block-start:var(--zz-s-2); }
.sverspr{ font-family:var(--zz-display); font-weight:400;
  font-size:clamp(1.15rem,2.6vw,1.5rem); line-height:1.25; margin:0;
  color:var(--zz-ink); max-inline-size:34ch; text-wrap:balance; }
.ssatz{ margin:0; max-inline-size:62ch; color:var(--zz-ink-dim);
  font-size:var(--f-klein); text-wrap:pretty; }

/* Ausloeser, Anzeige, Folge — drei Angaben, gleicher Feldsatz (R77). */
.sfakten{ display:grid; gap:var(--zz-s-4); margin:var(--zz-s-5) 0 0;
  padding-block:var(--zz-s-4); border-block:1px solid var(--f-linie); }
.sfakt dt{ font-size:var(--f-klein); letter-spacing:.12em; text-transform:uppercase;
  color:var(--zz-ink-dim); }
.sfakt dd{ margin:var(--zz-s-2) 0 0; color:var(--zz-ink); font-size:var(--f-klein);
  max-inline-size:62ch; text-wrap:pretty; }

.szahl{ display:flex; flex-wrap:wrap; gap:var(--zz-s-2) var(--zz-s-4);
  margin:var(--zz-s-4) 0 0; padding:0; list-style:none;
  font-size:var(--f-klein); color:var(--zz-ink-dim); }
.szahl b{ font-weight:500; color:var(--zz-ink); font-variant-numeric:tabular-nums; }

/* ----------------------------------------------------------- Verweisliste --- */
.sliste{ margin:var(--zz-s-5) 0 0; padding:0; list-style:none; }
.szeile{ display:grid; gap:var(--zz-s-1) var(--zz-s-3);
  padding-block:var(--s-zeile-y); border-block-start:1px solid var(--f-linie); }
.szeile:first-child{ border-block-start:0; }
.st{ color:var(--zz-ink); font-size:1rem; }
.st a{ color:inherit; display:inline-flex; align-items:center;
  min-block-size:24px; min-inline-size:24px; }
.spfad{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--f-klein); color:var(--zz-ink-dim); overflow-wrap:anywhere; }
.sorte{ font-size:var(--f-klein); color:var(--zz-ink-dim); text-wrap:pretty; }

/* Bestand: Wort UND Form. Die Form traegt die Aussage allein. */
.sbest{ display:inline-flex; align-items:center; gap:var(--zz-s-2);
  font-size:var(--f-klein); color:var(--zz-ink-dim); white-space:nowrap; }
.sform{ inline-size:var(--s-marke); block-size:var(--s-marke); flex:0 0 auto;
  border:1.5px solid currentColor; }
.sbest[data-best="steht"]{ color:var(--zz-ink); }
.sbest[data-best="steht"] .sform{ border-radius:50%; background:currentColor; }
.sbest[data-best="extern"] .sform{ border-radius:50%; }
.sbest[data-best="werkstatt"] .sform{ rotate:45deg; }
.sbest[data-best="geplant"] .sform{ border:0; border-block-end:1.5px solid currentColor;
  block-size:auto; }
.sbest[data-best="unbekannt"] .sform{ border-style:dotted; }

/* Pflicht: keine Farbe als Traeger, sondern ein Wort in einem Rahmen. */
.spfl{ display:inline-block; font-size:var(--f-klein); letter-spacing:.1em;
  text-transform:uppercase; padding:.1em .5em; border:1px solid currentColor;
  color:var(--zz-ink); }
.spfl[data-grund="recht"]{ background:var(--zz-ink); color:var(--f-grund); }

@media (min-width:720px){
  .szeile{ grid-template-columns:minmax(0,1fr) auto auto;
    align-items:baseline; }
  .st{ grid-column:1; }
  .spfad{ grid-column:1; }
  .sorte{ grid-column:1; }
  .sbest{ grid-column:2; grid-row:1/3; }
  .spfl{ grid-column:3; grid-row:1/3; justify-self:end; }
  .sfakten{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1100px){
  .skopf{ grid-template-columns:auto minmax(0,1fr) minmax(0,24ch);
    align-items:start; column-gap:var(--zz-s-6); }
  .sziffer{ grid-row:1/3; }
  .sverspr{ grid-column:3; grid-row:1/3; }
}