/* ═════════════════════════════════════════════════════════════════════════
   Referenzbereich — Systematlas
   Geladen von: projekte, projekt-lindenthal, projekt-herzberg,
                projekt-folientechnik

   VISUELLE THESE
   Eine Case Study zeigt hier nicht „eine schoene Website", sondern den Weg,
   den ein Mensch durch das gebaute System nimmt — und die Stelle, an der
   dieser Weg heute endet. Deshalb gibt es genau drei Bauteile:

     .sysspur   der Weg               (Station fuer Station, mit Zustand)
     .ttmap     die Konfiguration     (ein Feld je real gemessener Terminart)
     .stufe     der Horizont          (aktiv / vorbereitet / nicht aktiv)

   Alle drei sind Datenbilder. Kein Geraet, kein Dashboard, keine erfundene
   Oberflaeche: Was hier eine Kachel bekommt, wurde vorher gemessen.

   BEWEGUNG
   Ausschliesslich ueber die bestehende `.reveal` -> `.is-in`-Mechanik aus
   assets/js/main.js. Kein eigenes JavaScript. Jede Bewegung laeuft genau
   einmal, nutzt nur transform und opacity und hat eine Aufgabe: die
   Leserichtung des Ablaufs zu zeigen. Keine Schleifen, kein Parallax.

   Ohne JavaScript bleibt alles lesbar — `html.no-js .reveal` in main.css
   setzt Deckkraft und Position zurueck; die Staffelung unten haengt an
   `.is-in` und bleibt dann schlicht aus.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Gemeinsame Staffelung ───────────────────────────────────────────────
   Die Kinder eines .reveal-Blocks kommen der Reihe nach herein, damit die
   Leserichtung sichtbar wird. --i traegt den Index, --schritt den Abstand. */
.staffel > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease) calc(var(--i, 0) * var(--schritt, 70ms)),
    transform 620ms var(--ease) calc(var(--i, 0) * var(--schritt, 70ms));
}
.reveal.is-in .staffel > *,
.staffel.is-in > * { opacity: 1; transform: none; }


/* ═══ 1. Sysspur — der Weg durch das System ═══════════════════════════════
   Stationen nebeneinander, dazwischen eine Haarlinie, die beim Hereinkommen
   einmal von links nach rechts durchlaeuft. Die Linie ist der Grund, warum
   das Bauteil existiert: Sie zeigt, dass die Stationen zusammenhaengen, und
   sie hoert dort auf, wo das System heute aufhoert. */
/* `ol` traegt die Reihenfolge fuer Vorlesegeraete. Die sichtbare Nummer steht
   aber in `.sysspur__nr` — ohne diese Zuruecksetzung stuende an jeder Station
   zweimal eine Zahl („2. 02"). */
.sysspur {
  --schritt: 90ms;
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 30px;
  list-style: none;
  padding-inline-start: 0;
  margin-inline: 0;
}
.sysspur > li::marker { content: none; }
@media (min-width: 860px) {
  .sysspur { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
}

/* Die Spur selbst. Sie sitzt hinter den Stationen und waechst aus dem
   Startpunkt heraus. transform-origin links, damit sie laeuft und nicht
   aufblendet. */
.sysspur::before {
  content: "";
  position: absolute;
  inset-inline: 6px;
  top: 13px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--line-2) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--ease) 120ms;
}
.reveal.is-in .sysspur::before,
.sysspur.is-in::before { transform: scaleX(1); }
@media (max-width: 859px) {
  .sysspur::before {
    inset-inline: auto;
    inset-block: 6px 6px;
    left: 13px;
    top: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--accent) 0%, var(--line-2) 100%);
    transform: scaleY(0);
    transform-origin: top center;
  }
  .reveal.is-in .sysspur::before,
  .sysspur.is-in::before { transform: scaleY(1); }
}

.sysspur__halt {
  position: relative;
  padding-top: 0;
  padding-inline-start: 0;
}
@media (max-width: 859px) {
  .sysspur__halt { padding-inline-start: 38px; }
}

/* Der Knoten auf der Spur. Gefuellt = belegt, offen = nicht aktiv. */
.sysspur__punkt {
  position: absolute;
  top: -30px;
  inset-inline-start: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--canvas);
}
@media (max-width: 859px) {
  .sysspur__punkt { top: 0; inset-inline-start: 6px; }
}
.sysspur__punkt::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.sysspur__nr {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.sysspur__titel {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.14;
  color: var(--ink);
}
.sysspur__text {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 28ch;
}

/* Station, die ohne Handgriff laeuft. Der zweite Ring markiert einen aktiven
   Systemschritt; Buchungsbestaetigung und Erinnerungen teilen sich ihn. */
.sysspur__halt--auto .sysspur__punkt {
  box-shadow: 0 0 0 4px rgba(9, 112, 120, 0.14);
}

/* Station, die es heute NICHT gibt. Offener Knoten, gestrichelte Spur,
   gedaempfte Schrift. Eine Ausbaustufe kann so nicht wie eine Live-Funktion
   aussehen — sie sieht sichtbar unfertig aus, und das ist Absicht. */
.sysspur__halt--offen .sysspur__punkt {
  border-style: dashed;
  border-color: var(--line-2);
}
.sysspur__halt--offen .sysspur__punkt::after { display: none; }
.sysspur__halt--offen .sysspur__nr { color: var(--muted); }
.sysspur__halt--offen .sysspur__titel { color: var(--muted); }


/* ═══ 2. TTmap — ein Feld je buchbarer Terminart ══════════════════════════
   Vierzehn Felder: neun gefuellt fuer Praxis und fuenf als Ring fuer Video.
   Die Darstellung zeigt nur die oeffentlich buchbaren Terminarten. */
.ttmap {
  --schritt: 34ms;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  max-width: 340px;
}
@media (max-width: 560px) {
  .ttmap { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 260px; }
}

.ttmap__feld {
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
}
/* Video: derselbe Rahmen, keine Fuellung — sichtbar dieselbe Familie, aber
   ein anderer Ort. */
.ttmap__feld--online { background: transparent; }

.ttlegende {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--muted);
}
.ttlegende__eintrag { display: flex; align-items: center; gap: 9px; }
.ttlegende__probe {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent);
  flex: 0 0 auto;
}
.ttlegende__probe--online { background: transparent; }
.ttlegende__eintrag b { color: var(--ink); font-weight: 500; }


/* ═══ 3. Stufe — aktiv und moegliche Erweiterung ══════════════════════════
   Aktive Schritte tragen den Akzent. Eine spaetere Erweiterung bleibt sichtbar
   gedämpft, damit sie nicht wie eine gelieferte Funktion wirkt. */
.stufen {
  --schritt: 90ms;
  display: grid;
  gap: 2px;
  margin-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.stufe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 22px 0 22px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
@media (min-width: 760px) {
  .stufe { grid-template-columns: 210px minmax(0, 1fr); gap: 8px 32px; align-items: baseline; }
}
.stufe__stand {
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.stufe__text { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.stufe__text code {
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--canvas-2);
}

.stufe--offen { border-left-style: dotted; border-left-color: var(--line-2); }
.stufe--offen .stufe__stand { color: var(--muted); }
.stufe--offen .stufe__text { color: var(--muted); }


/* ═══ 4. Fallbild als Durchlauf ═══════════════════════════════════════════
   Die Langaufnahmen sind bis zu 1600x11183 gross. Bei 940 px Breite ergibt
   das ueber 6500 px Hoehe — die Seite bestand an dieser Stelle aus einem
   einzigen Bild. Jetzt steht die Aufnahme in einem Rahmen fester Hoehe und
   wird darin gescrollt.

   `tabindex="0"` am Element macht den Bereich mit der Tastatur bedienbar;
   ohne ihn erreicht man einen Scrollcontainer per Tab nicht. */
.fallbild--lauf {
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  cursor: ns-resize;
}
.fallbild--lauf:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ═══ 4b. Fallbild aufgerollt — die ganze Seite, ohne inneren Scroller ═════
   Der Durchlauf oben loest das Hoehenproblem, erkauft es sich aber teuer: bei
   Lindenthal standen 4772 px Bild in einem 618 px hohen Rahmen. Sichtbar
   waren 13 Prozent der Seite; den Rest musste man im Rahmen suchen, und der
   Rahmen brauchte dafuer `tabindex="0"`, um ueberhaupt bedienbar zu sein.

   Diese Fassung legt die Seite stattdessen AUF DEN TISCH: sie wird
   aufgerollt und in mehrere Bahnen nebeneinander gelegt. Alle Bahnen
   zusammen zeigen 100 Prozent der Aufnahme — nichts beschnitten, nichts
   skaliert weg, kein `object-fit`, kein Scrollcontainer, keine Tastaturfalle.
   Gelesen wird wie ein Faltplan: erste Bahn oben links, letzte unten rechts.

   Zwei Werte kommen aus dem Markup, weil sie zum Bild gehoeren und nicht zum
   Bauteil: `--fb-ar` das Seitenverhaeltnis (Hoehe/Breite) und `--fb-spalten`
   die Zahl der Bahnen.

   Der Durchlauf `--lauf` bleibt bestehen: projekt-herzberg.html und
   projekt-folientechnik.html laufen unveraendert damit und gehoeren nicht zum
   Umfang dieser Aenderung. */
.fallbild--ganz {
  --fb-spalt: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
}
.fallbild__bahnen {
  display: grid;
  grid-template-columns: repeat(var(--fb-spalten), minmax(0, 1fr));
  gap: var(--fb-spalt);
}
.fallbild__bahn {
  position: relative;
  display: block;
  overflow: hidden;
  /* Hoehe einer Bahn = Gesamthoehe des Bildes geteilt durch die Bahnenzahl,
     also Bahnbreite * `--fb-ar` / `--fb-spalten`. Als `aspect-ratio`
     geschrieben, NICHT als calc mit `100%`: eine Prozentbreite in einer
     Custom Property wird beim Einsetzen in `height` gegen die HOEHE des
     Elternelements aufgeloest, nicht gegen die Breite. Der erste Bau tat
     genau das — gemessen kamen 2 px Bahnhoehe heraus, bei 1557 px Bildhoehe.
     `aspect-ratio` rechnet immer aus der Breite. */
  aspect-ratio: var(--fb-spalten) / var(--fb-ar);
  /* Rechtwinklig: eine scharfe Ecke ist ein Blatt Papier, eine runde ein
     Display. Drei hochformatige Rechtecke mit Radius lesen sich sonst wie
     drei Telefone.

     Als `outline` nach innen statt als `border`: `aspect-ratio` rechnet die
     Bahnhoehe aus der BORDER-Box, das Bild mit `width: 100%` aber aus der
     Inhaltsbox. Mit echtem Rahmen liefen die beiden 0,65 % auseinander —
     gemessen 10 px Leerstreifen unter der letzten Bahn. Ohne Rahmen sind
     beide identisch. */
  outline: 1px solid var(--line);
  outline-offset: -1px;
  background: var(--canvas-2);
  line-height: 0;
}
.fallbild__bahn picture { display: contents; }
/* Schlaegt `.fallbild img` aus main.css:2552 (`width:100%; height:auto`). */
.fallbild__bahn img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
/* `top` in Prozent loest gegen die Hoehe des Containing Block auf — und das
   ist exakt die Bahnhoehe von oben. Zwei Bahnen weiter sind also -200 %.
   Derselbe Wert auf beiden Seiten der Rechnung: kein Rundungsversatz an den
   Naehten, unabhaengig von der Fensterbreite. */
.fallbild__bahn:nth-child(2) img { top: -100%; }
.fallbild__bahn:nth-child(3) img { top: -200%; }
.fallbild__bahn:nth-child(4) img { top: -300%; }

/* Die Bahnenzahl bleibt in jeder Fenstergroesse dieselbe. Sie steht im
   Markup und die Bildversaetze haengen an ihr — eine per Media Query
   geaenderte Spaltenzahl wuerde die Rechnung zerreissen und Bahn drei ins
   Leere schieben. Am Telefon werden die Bahnen deshalb schmal (rund 110 px):
   die Seite ist dort eine Miniatur, aber eine vollstaendige. Denselben Weg
   geht die Startseite in referenz-zeitstrahl.css. */
@media (max-width: 700px) {
  .fallbild--ganz { --fb-spalt: 5px; }
}

.fallbild__hinweis {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}


/* ═══ 4c. Buchbild — der gebaute Buchungsweg, direkt gezeigt ══════════════
   Eine echte Aufnahme aus dem gebauten System, kein eingebettetes
   Fremd-Widget und keine nachgebaute Oberflaeche. Sie steht dort, wo die
   Sysspur den Ablauf beschreibt, und belegt Schritt 02.

   Bewusst kein Geraeterahmen darum: der Screenshot IST der Beleg, ein
   Telefon- oder Browserchrom davor waere Dekoration ueber einem Nachweis. */
.buchbild {
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: 0;
}
.buchbild img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--canvas-2);
}
.buchbild__unter {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  max-width: 62ch;
}
.buchbild__zeile { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.buchbild__zeile:first-child { letter-spacing: 0.04em; }
.buchbild__zeile b { color: var(--ink); font-weight: 500; }

/* Der Weg nach draussen. Er ist als solcher gekennzeichnet, und die
   Kennzeichnung steht VOR dem Klick, nicht in einer Fussnote. Ohne Klick
   laedt von cal.eu nichts — deshalb steht hier ein Link und kein Embed. */
.buchbild__weg {
  display: grid;
  gap: 6px;
  margin-top: clamp(22px, 2.4vw, 32px);
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.buchbild__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-weight: 500;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.buchbild__link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.buchbild__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.buchbild__fremd {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}


/* ── Datenpunkt mit Wort statt Zahl ──────────────────────────────────────
   `.datapoint strong` steht bei mindestens 34 px. Das traegt „24/7" und „0",
   aber kein ganzes Wort: „bundesweit" ist bei 375 px Bildbreite rund 190 px
   breit, die Rasterzelle nur etwa 156 — gemessen als 5 px Querscroll auf der
   Herzberg-Seite. Wortwerte bekommen deshalb ihre eigene Groesse und duerfen
   umbrechen. */
.datapoint--wort strong {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}


/* ═══ 5. Statuszeile auf den Projektkarten ════════════════════════════════
   Die Uebersicht muss drei Faelle unterscheiden. Das darf nicht nur im Text
   stehen, sonst liest es niemand. */
.rf__stand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rf__stand::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent);
  flex: 0 0 auto;
}
.rf__stand--live::before { background: var(--accent); }
.rf__stand--gebaut::before { background: transparent; }
.rf__stand--ohne { color: var(--muted); }
.rf__stand--ohne::before { border-color: var(--line-2); border-style: dashed; background: transparent; }


/* ═══ Bewegung reduzieren ═════════════════════════════════════════════════
   Eine ruhige Fassung, keine schnellere: Alles steht sofort an seinem Platz,
   nichts laeuft, nichts blendet auf. Die Spur ist dann einfach da.

   Dieser Block deckt auch `.reveal` selbst ab. main.css definiert die
   Klasse ohne eigene Reduced-Motion-Regel; auf den vier Referenzseiten wird
   das hier nachgeholt. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .staffel > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sysspur::before {
    transform: none !important;
    transition: none !important;
  }
  .fallbild--lauf { scroll-behavior: auto; }
}