/* Projekt-CSS 26FS_I4DS27 — laedt NACH dem offiziellen FHNW-Stylesheet.
 *
 * Regeln:
 *   1. Jeder Selektor beginnt mit .p6-i4ds27- .
 *   2. Keine Regel trifft einen offiziellen Selektor (.container, .row, .col,
 *      .space, .grow, .responsive, .materialboxed, .keyterms, .nobullet,
 *      Farbklassen, header, footer, body, h1-h4).
 *   3. Keine FHNW-Grau-/Schwarzwerte hart kodieren — Oberflaechen kommen von
 *      den offiziellen Klassen (grey-1/2/3, black) am Element.
 *
 * Bestaetigung zum fhnw-web-Validator: Die verbleibenden Hexwerte sind
 * KEINE kopierten FHNW-Flaechenwerte. Knopfflaechen muessen #000 selbst
 * setzen: das offizielle Stylesheet gestaltet button-Elemente eigenstaendig
 * und ueberstimmt .black dort. #fff ist Schriftfarbe auf Schwarz (Weiss ist
 * kein Grauwert des Styleguides). Datenfarben (Atlas-Domaenen) kommen aus
 * js/atlasdata.js und bleiben in der Medienkomponente. #fde70e ist das
 * Web-Gelb des Abbildungsprofils und erscheint ausschliesslich als
 * Fuellflaeche INNERHALB der Weg-Szenen (Ueberlappungsband, Punchlines,
 * Referenz-Overlay) — nie als Text- oder Konturfarbe und nie als
 * Seiten-Chrome. #111/#7a7a7a/#dadada/#f4f4f4/#0072b2/#cc7000 sind die
 * dokumentierten Buehnen-/Datenrollen des Abbildungsprofils (fhnw-slim),
 * nicht die offiziellen Flaechengrautoene. */

/* --- Sprunglink und Seitennavigation ------------------------------------- */

.p6-i4ds27-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  background: #000;
  color: #fff;
  padding: 0.6em 1em;
  font-weight: 600;
  text-decoration: none;
}

.p6-i4ds27-skip:focus,
.p6-i4ds27-skip:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
  outline: 3px solid #000;
  outline-offset: 3px;
}

/* --- Hero ------------------------------------------------------------------ */

.p6-i4ds27-claim {
  border-left: 4px solid currentColor;
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 1rem 0;
  font-size: 1.05rem;
}

.p6-i4ds27-claim p { margin: 0; }

/* --- Begriffs-Ledger (Schluesselbegriffe) ---------------------------------- */
/* Begriff links, Erklaerung rechts, feste Rinne dazwischen — lange
   Begriffe brechen in ihrer Spalte um, statt in den Text zu laufen.
   Ersetzt die offizielle keyterms-Liste (die duerfen wir nicht
   umgestalten) durch eine projektpraefixierte Fassung. */
.p6-i4ds27-terms {
  list-style: none;
  margin: 0.75rem 0 1.5rem;
  padding: 0;
  border-top: 2px solid #111;
}

.p6-i4ds27-terms > li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  column-gap: 1.5rem;
  padding: 0.6rem 0;
  margin: 0;
  border-bottom: 1px solid #dadada;
}

.p6-i4ds27-terms > li > span:first-child {
  font-weight: 600;
  line-height: 1.4;
}

@media only screen and (max-width: 600px) {
  .p6-i4ds27-terms > li {
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
  }
}

/* --- Statusansage (aria-live) --------------------------------------------- */

.p6-i4ds27-status { min-height: 1.4em; margin: 0; }

/* --- Sichtbar nur fuer Hilfsmittel ----------------------------------------- */

.p6-i4ds27-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Abbildungen in voller Containerbreite ---------------------------------
 * Die Inhaltsspalte misst 820 px, die Abbildungen sind auf 1200 px Leinwand
 * gezeichnet. Der Rahmen bricht symmetrisch bis an den Rand des Containers
 * aus und bleibt exakt konzentrisch zur Textspalte.
 *
 * Herleitung aus der offiziellen Grid-Formel: bei .l8 ist die Spalte
 * R/12*8 - 20, die volle Zeile R - 20; die Differenz betraegt R/3, also
 * (Spaltenbreite + 20px)/2 — je Seite ein Viertel davon. Negative Margins
 * statt transform: ein transform wuerde zum Containing-Block fuer
 * position:fixed-Overlays. */

.p6-i4ds27-figure {
  position: relative;   /* Anker fuer die Erklaerkarte am Element */
  margin: 0 0 0.5rem;
}

/* EIN gemeinsames Flex-Zeilen-Muster fuer alle Nebeneinander-Layouts
   des Blocks: Abbildungspaare (Ergebnisse), Architektur-Vergleich und
   Metrik-Spalten teilen Rinne und Umbruchverhalten. */
.p6-i4ds27-figrow,
.p6-i4ds27-arch-views,
.p6-i4ds27-metric-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}

.p6-i4ds27-figrow { margin-bottom: 0.75rem; }

.p6-i4ds27-figrow .p6-i4ds27-figure {
  flex: 1 1 22rem;
  min-width: 0;
  margin: 0;
}

/* Die Dateneffizienz-Kurven (links) tragen mehr Information als die
   VRAM-Balken — sie erhalten den groesseren Anteil der Zeile. */
.p6-i4ds27-figrow .p6-i4ds27-figure:first-child {
  flex: 1.45 1 26rem;
}

@media only screen and (min-width: 601px) and (max-width: 980px) {
  .p6-i4ds27-bleed {            /* Spalte .m10 */
    width: calc(120% + 4px);
    margin-left: calc(-10% - 2px);
  }
}

@media only screen and (min-width: 981px) {
  .p6-i4ds27-bleed {            /* Spalte .l8 */
    width: calc(150% + 10px);
    margin-left: calc(-25% - 5px);
  }
}

/* --- Erkundbare Abbildungen (figure-explore.js) -----------------------------
 * Der Rahmen ist EIN Tab-Stopp (role=button). Enter/Space oeffnet die
 * Erkundung: das SVG wird inline eingesetzt, data-p6x-Gruppen bekommen
 * rovendes tabindex. Escape schliesst und stellt das <img> wieder her. */

.p6-i4ds27-figure[role="button"] { cursor: pointer; }

.p6-i4ds27-figure[role="button"]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.p6-i4ds27-figsvg {
  display: block;
  width: 100%;
  height: auto;
}

.p6-i4ds27-figsvg [data-p6x] { cursor: pointer; }

.p6-i4ds27-figsvg [tabindex]:focus:not(:focus-visible) { outline: none; }

.p6-i4ds27-figsvg [tabindex]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.p6-i4ds27-fig-active [data-p6x] { opacity: 0.25; }

.p6-i4ds27-fig-active .p6-i4ds27-hot,
.p6-i4ds27-fig-active .p6-i4ds27-rel { opacity: 1; }

/* Fotos vertragen das Abdunkeln nicht: Rasterbilder nur leicht zuruecknehmen. */
.p6-i4ds27-fig-active image { opacity: 0.55; }

.p6-i4ds27-fig-active .p6-i4ds27-hot image,
.p6-i4ds27-fig-active .p6-i4ds27-rel image { opacity: 1; }

/* Erklaerfeld unter der Abbildung: gestrichelt = leer, durchgezogen = aktiv. */

.p6-i4ds27-figpanel {
  border: 2px dashed currentColor;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
}

.p6-i4ds27-figpanel-active { border-style: solid; }

.p6-i4ds27-figpanel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.35rem;
  margin-bottom: 0.1rem;
}

.p6-i4ds27-figpanel-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid currentColor;
  margin: 0;
}

.p6-i4ds27-figpanel-row:last-child { border-bottom: none; }

.p6-i4ds27-figpanel-row > strong { flex: 0 0 9em; }

.p6-i4ds27-figpanel-row > span { flex: 1 1 auto; min-width: 0; }

.p6-i4ds27-figpanel-hint { margin: 0; }

@media (max-width: 600px) {
  .p6-i4ds27-figpanel-row { display: block; }
}

/* Erklaerkarte am Element (nur fuer echte Zeiger). */

.p6-i4ds27-pop {
  position: absolute;
  z-index: 20;
  width: 19rem;
  max-width: 80%;
  padding: 0.6rem 0.75rem;
  border: 2px solid currentColor;
  background: #fff;
  box-shadow: 4px 4px 0 currentColor;
  pointer-events: none;
}

.p6-i4ds27-pop[hidden] { display: none; }

.p6-i4ds27-pop-title {
  display: block;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25rem;
  margin-bottom: 0.35rem;
}

.p6-i4ds27-pop p { margin: 0 0 0.3rem; }
.p6-i4ds27-pop p:last-child { margin-bottom: 0; }

@media (hover: none), (pointer: coarse) {
  .p6-i4ds27-pop { display: none; }
}

/* Beleg-Zeile unter Abbildungen (aus P6X_EVIDENCE). */

.p6-i4ds27-evidence {
  font-size: 0.8rem;
  margin: 0.25rem 0 0.75rem;
}

.p6-i4ds27-evidence strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

/* In Vollbreiten-Abbildungen rueckt die Beleg-Zeile zurueck in die
 * Textspalte (Umkehrung der bleed-Formel: 1/12 bzw. 1/6 der
 * Vollbreite je Seite), statt am linken Ausbruchsrand zu haengen. */
@media only screen and (min-width: 601px) and (max-width: 980px) {
  .p6-i4ds27-bleed .p6-i4ds27-evidence {
    margin-left: 8.3334%;
    margin-right: 8.3334%;
  }
}

@media only screen and (min-width: 981px) {
  .p6-i4ds27-bleed .p6-i4ds27-evidence {
    margin-left: 16.6667%;
    margin-right: 16.6667%;
  }
}

/* --- Schwarzes Knopf-Idiom der Seite --------------------------------------- */

.p6-i4ds27-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #000;   /* Knopfflaeche explizit: das offizielle Stylesheet
                         styltet button selbst und schlaegt .black. */
  color: #fff;
  border: 0;
  padding: 0.55em 1em;   /* >= 36 px Zielhoehe */
  min-height: 36px;
  cursor: pointer;
}

.p6-i4ds27-btn:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

.p6-i4ds27-btn[aria-pressed="true"] {
  background: #fff;
  color: #000;
  outline: 2px solid #000;
  outline-offset: -2px;
}

.p6-i4ds27-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* --- Der Weg vom Bild zur Maske (weg.js) ------------------------------------
 * Zehn Schritte mit Inline-SVG-Szenen, jede im Endzustand geautort. Ohne
 * JavaScript: alle Szenen als Standbilder untereinander, keine
 * Bedienelemente. Mit JavaScript (Wurzel traegt .p6-i4ds27-weg-enhanced):
 * klebende Leiste mit Zurueck/Weiter, Ziffern-Reiterleiste auf gelbem Band
 * (Ziffern weiss auf #111-Chips, nie direkt auf Gelb), Pause-Knopf;
 * sichtbar ist genau ein Schritt (hidden-Attribut wie datasets.js). */

.p6-i4ds27-wstep {
  margin: 0 0 2.5rem;
  scroll-margin-top: 72px;   /* landet unterhalb der klebenden Leiste */
}

.p6-i4ds27-weg-enhanced .p6-i4ds27-wstep { margin-bottom: 1rem; }

.p6-i4ds27-wstep .p6-i4ds27-figure { margin-top: 0.5rem; }

/* Szenen-SVG: Typo- und Linienrollen der Buehne. */

.p6-i4ds27-wsvg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

/* Auf der Buehne (Titel + Einleitung kleben mit): Szene so kappen, dass
 * die ganze Komposition samt Beleg-Zeile in den Viewport passt — aber
 * nie kleiner als noetig: die Beschriftungen muessen lesbar bleiben. */
.p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg {
  aspect-ratio: 1200 / 448;
  width: min(100%, max(420px, calc((100vh - 512px) * 1200 / 520)));
  margin-left: auto;
  margin-right: auto;
}

/* Kurze Viewports (Laptops): Buehnen-Moebel verdichten, damit die Szene
 * gross genug bleibt — Einleitung weicht, der Titel bleibt. */
@media (max-height: 880px) {
  .p6-i4ds27-weg-scrolly .p6-i4ds27-weg-sticky { padding-top: 2vh; }
  .p6-i4ds27-weg-scrolly .p6-i4ds27-weg-sticky > p { display: none; }
  .p6-i4ds27-weg-scrolly .p6-i4ds27-weg-bar { margin-bottom: 0.5rem; }
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg {
    width: min(100%, max(420px, calc((100vh - 424px) * 1200 / 520)));
  }
}

.p6-i4ds27-weg-released .p6-i4ds27-weg-progress { display: none; }

/* Textrollen: bewusst MIT .p6-i4ds27-wsvg qualifiziert, damit sie die
 * Grundregel (Tinte) sicher ueberstimmen — Pillen-Text ist weiss. */
.p6-i4ds27-wsvg text { fill: #111; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-label { font-size: 14px; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-sub { font-size: 12.5px; fill: #7a7a7a; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-num { font-size: 17px; font-weight: 600; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-big { font-size: 28px; font-weight: 600; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-punch { font-size: 14.5px; font-weight: 600; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-caps { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-pill { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; fill: #fff; }
.p6-i4ds27-wsvg .p6-i4ds27-wt-prompt { font-size: 12.5px; fill: #0072b2; }
.p6-i4ds27-wl-box { fill: none; stroke: #111; stroke-width: 1.4; }
.p6-i4ds27-wl-arrow { stroke: #111; stroke-width: 1.8; fill: none; }
.p6-i4ds27-wl-hair { stroke: #7a7a7a; stroke-width: 1; fill: none; }
.p6-i4ds27-pixel { image-rendering: pixelated; }

/* Sticky Buehne des Scrollytellings: die Wurzel liefert Scrollraum
 * (Hoehe setzt weg.js inline, nur bei erlaubter Bewegung), die Buehne
 * bleibt stehen und traegt Leiste + aktive Szene. */

.p6-i4ds27-weg-enhanced { position: relative; }

.p6-i4ds27-weg-sticky {
  position: sticky;
  top: 0;
  background: #fff;
}

/* Im Scrolly-Modus fuellt die Buehne den Viewport als FESTE Ebene:
 * konstanter Kopfraum oben, Inhalt oben verankert — kein Nachzentrieren,
 * wenn Text- oder Szenenhoehen zwischen Schritten variieren. */
.p6-i4ds27-weg-scrolly .p6-i4ds27-weg-sticky {
  height: 100vh;
  box-sizing: border-box;
  padding-top: 6vh;
}

/* Konstante Szenen-Ebene: der Lehrtext reserviert immer drei Zeilen,
 * damit die Szene bei jedem Schritt auf derselben Hoehe sitzt. Der
 * Textblock rueckt naeher an die Animation heran. */
.p6-i4ds27-weg-scrolly .p6-i4ds27-wstep > p:first-of-type {
  min-height: 5.5em;
}

.p6-i4ds27-weg-scrolly .p6-i4ds27-wstep {
  padding-top: 2rem;   /* Textblock rueckt zur Animation, ohne bare-h4-Regel */
}

/* Gesamtfortschritt durch den Abschnitt: 16 px hoher Balken über die
 * VOLLE Viewportbreite (fixed statt 100vw: kein Scrollbalken-Überlauf),
 * ohne graue Spur — nur der gelbe Fluss. Nur per JS im Scrolly-Modus
 * erzeugt; ausserhalb des Abschnitts ausgeblendet. */
.p6-i4ds27-weg-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 60;
  pointer-events: none;
}

.p6-i4ds27-weg-offscreen .p6-i4ds27-weg-progress { display: none; }

.p6-i4ds27-weg-progress-fill {
  height: 100%;
  width: 0;
  background: #fde70e;
}

/* Unsichtbare Snap-Punkte (nur per JS, nur im Scrolly-Modus): einer am
 * fertigen Zustand jedes Schritts — proximity-Snap macht die Lesezone
 * sanft klebrig. */
.p6-i4ds27-weg-snap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  scroll-snap-align: start;
}

/* Wizard-Leiste (nur per JS erzeugt): Pfeil — Stationen — Pfeil. */

.p6-i4ds27-weg-bar {
  position: sticky;   /* im Klick-Modus (mobil) bleibt die Leiste oben */
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;   /* Pfeile exakt auf der Chip-Linie */
  gap: 0.6rem;
  padding: 0.6rem 0 0.4rem;
  background: #fff;   /* Papierflaeche der Inhaltsspalte, kein FHNW-Grau */
  margin-bottom: 0.75rem;
}

.p6-i4ds27-weg-arrow {
  flex: 0 0 auto;
  width: 40px;
  padding: 0.55em 0;
  font-size: 0.95rem;
  margin: 0;   /* offizielle button-Margen wuerden die Mitte verschieben */
}

.p6-i4ds27-weg-count {
  display: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Stationen: eckige FHNW-Chips auf einer Fortschrittslinie. Namen
 * alternieren (1 unten, 2 oben, …) fuer genug Platz. Der gelbe Fluss
 * waechst kontinuierlich mit dem Scroll-Fortschritt (Breite via JS).
 * Gelb erscheint hier als Fuellflaeche der Weg-Medienkomponente —
 * bewusster Gestaltungsentscheid des Projekts. */

.p6-i4ds27-weg-rail {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  height: 76px;
}

.p6-i4ds27-weg-track {
  position: absolute;
  left: 5%;
  right: 5%;
  top: calc(50% - 1px);
  height: 2px;
  background: #dadada;
}

.p6-i4ds27-weg-flow {
  position: absolute;
  left: 5%;
  top: calc(50% - 2px);
  height: 4px;
  width: 0;
  background: #fde70e;
}

.p6-i4ds27-weg-dot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;   /* offizielle button-Marge staucht sonst die Zellhoehe */
  font: inherit;
  color: #111;   /* das offizielle Stylesheet faerbt button-Text weiss */
  cursor: pointer;
}

.p6-i4ds27-weg-dot:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
}

/* Das offizielle Stylesheet faerbt button:hover flaechig ein — die
 * Station selbst bleibt transparent, nur der Chip reagiert. */
.p6-i4ds27-weg-dot:hover,
.p6-i4ds27-weg-dot:focus {
  background: none;
}

.p6-i4ds27-weg-num {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  margin: -13px 0 0 -13px;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 2px solid #111;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* Besuchte Stationen: gelb gefuellt — der gegangene Pfad traegt
 * durchgehend Gelb. Haken und Rand in Tinte, damit besucht/aktuell
 * unterscheidbar bleiben (aktuell = gelb randlos mit weisser Ziffer). */
.p6-i4ds27-weg-done .p6-i4ds27-weg-num {
  background: #fde70e;
  border-color: #111;
  color: #111;
}

.p6-i4ds27-weg-dot:hover:not([aria-selected="true"]) .p6-i4ds27-weg-num {
  background: #fff;
  border-color: #fde70e;
  color: #111;
}

.p6-i4ds27-weg-dot[aria-selected="true"] .p6-i4ds27-weg-num {
  margin: -16px 0 0 -16px;
  width: 32px;
  height: 32px;
  background: #fde70e;
  border-color: #fde70e;
  color: #fff;
  font-size: 14px;
  line-height: 28px;
}

.p6-i4ds27-weg-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Dank der Alternierung liegen Reihen-Nachbarn zwei Zellen auseinander:
   * jeder Name darf fast zwei Zellbreiten nutzen, bevor er kollidiert. */
  max-width: 190%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
}

/* Alternierung: Schritt 1 unten beginnend, dann oben, dann unten … */
.p6-i4ds27-weg-dot:nth-child(odd) .p6-i4ds27-weg-name { top: calc(50% + 22px); }
.p6-i4ds27-weg-dot:nth-child(even) .p6-i4ds27-weg-name { bottom: calc(50% + 22px); }

.p6-i4ds27-weg-dot[aria-selected="true"] .p6-i4ds27-weg-name {
  font-weight: 700;
}

@media only screen and (max-width: 600px) {
  .p6-i4ds27-weg-name { display: none; }
  .p6-i4ds27-weg-bar { flex-wrap: wrap; }
  .p6-i4ds27-weg-count {
    display: block;
    flex: 1 1 100%;
    order: 4;
    padding-bottom: 0.3rem;
  }
  .p6-i4ds27-weg-rail { height: 44px; }
  .p6-i4ds27-weg-num {
    margin: -9px 0 0 -9px;
    width: 18px;
    height: 18px;
    line-height: 14px;
    font-size: 10px;
  }
  .p6-i4ds27-weg-dot[aria-selected="true"] .p6-i4ds27-weg-num {
    margin: -11px 0 0 -11px;
    width: 22px;
    height: 22px;
    line-height: 18px;
    font-size: 11px;
  }
}

/* Sehr schmale Viewports: zehn Chips passen nicht nebeneinander —
 * Pfeile (40 px Ziele) und Zaehlerzeile tragen die Navigation allein. */
@media only screen and (max-width: 480px) {
  .p6-i4ds27-weg-rail { display: none; }
}

/* Der Architektur-Unterblock atmet: Abstand zum letzten Schritt. */
.p6-i4ds27-archhead { margin-top: 3rem; }

.p6-i4ds27-stepnum {
  display: inline-block;
  background: #000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15em 0.55em;
  margin-right: 0.4rem;
}

@media only screen and (max-width: 600px) {
  .p6-i4ds27-wstep {
    border: 1px solid currentColor;
    padding: 0.75rem 0.9rem;
  }
}

/* --- Architektur-Auswahl ---------------------------------------------------- */

.p6-i4ds27-panel {
  border: 1px solid currentColor;
  padding: 1rem 1.25rem 1.25rem;
}

.p6-i4ds27-panel label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Eigenes Erscheinungsbild statt Systemgrau: weisse Flaeche, schwarzer
   Rahmen, eigener Chevron (Inline-SVG, keine externe Ressource). Die
   aufgeklappte Liste bleibt nativ — die optgroup-Ebenen liefern dort
   Fettdruck und Einzug. */
.p6-i4ds27-select {
  display: block;
  width: 100%;
  max-width: 24rem;
  padding: 0.5rem 2.4rem 0.5rem 0.6rem;   /* >= 36 px Zielhoehe */
  margin-bottom: 0.9rem;
  font: inherit;
  font-weight: 600;
  color: #111;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.75rem;
  cursor: pointer;
}

.p6-i4ds27-select optgroup { font-weight: 600; font-style: normal; }

.p6-i4ds27-select option { font-weight: 400; }

.p6-i4ds27-select:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Kurzfakten je Architektur: kennzeichnender Baustein als schwarze
   Marke (wie die Delta-Chips der Abbildungen) + Parameterzeile. */
.p6-i4ds27-archfacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #3a3a3a;
  margin: 0.25rem 0 0.6rem;
}

.p6-i4ds27-archchip {
  background: #000;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
}

.p6-i4ds27-panel-figure { margin: 0.25rem 0 0.9rem; }

/* Vergleichsansicht: zwei Architektur-Schemata nebeneinander, unter
   ~980 px untereinander; das Panel weitet sich per .p6-i4ds27-bleed.
   Flex-Zeile: siehe Sammelregel bei .p6-i4ds27-figrow. */
.p6-i4ds27-arch-view { flex: 1 1 26rem; min-width: 0; }

#p6-i4ds27-arch-compare { margin-bottom: 0.25rem; }

.p6-i4ds27-panel-figure img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
}

.p6-i4ds27-modelref {
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

/* --- Metrik-Erklaerer (metric.js) ------------------------------------------ */

/* Längsschreibweise, NICHT margin-Kurzform: die Kurzform würde das
   margin-left der Bleed-Zentrierung (-25%) auf 0 zurücksetzen und der
   Block liefe nur nach rechts aus statt symmetrisch. */
.p6-i4ds27-metric-app {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.p6-i4ds27-metric-grids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 0.25rem 0;
}

/* Gedeckelt: zwei 22-rem-Raster statt voller Spaltenbreite — die vier
   Raster samt Formelblock sollen auf einen Laptopbildschirm passen. */
.p6-i4ds27-metric-grid { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }

.p6-i4ds27-metric-grid svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid currentColor;
}

.p6-i4ds27-metric-grid p {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Überlagerungen in EXAKT derselben Grösse wie Referenz und Vorhersage:
   gleiche Rasterfläche heisst «gleiches Raster, nur übereinandergelegt».
   Dazwischen ein Pfeil mit knapper Beschriftung statt Erklärtext. */
.p6-i4ds27-metric-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  /* Symmetrisch: Etikettzeile -> Pfeil und Pfeil -> untere Box tragen
     denselben Abstand (je 0.4rem hier + 0.5rem der Rasterzeilen). */
  margin: 0.2rem 0 1.8rem;
}

.p6-i4ds27-metric-connector svg {
  width: 1rem;
  height: 1.65rem;
  flex: 0 0 auto;
}

/* Formelblock: der Rechenweg TP/FP/FN -> IoU -> fg-Makro-mIoU. */
.p6-i4ds27-metric-formula {
  border: 1px solid currentColor;
  background: #fff;
  padding: 0.6rem 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.p6-i4ds27-metric-formula p { margin: 0 0 0.3rem; }

/* Formelkopf als echter Bruch: «IoU =» neben Zähler/Bruchstrich/Nenner. */
.p6-i4ds27-metric-formula-head {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.p6-i4ds27-metric-frac-lhs { font-size: 1.15rem; font-weight: 700; }

.p6-i4ds27-metric-frac {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
}

.p6-i4ds27-metric-frac-top {
  border-bottom: 2px solid #111;
  padding: 0 0.5rem 0.2rem;
}

.p6-i4ds27-metric-frac-bot { padding: 0.2rem 0.5rem 0; }

.p6-i4ds27-metric-formula-fg {
  font-weight: 600;
  background: #fde70e;
  display: inline-block;
  padding: 0.05em 0.35em;
}

.p6-i4ds27-metric-formula-bg { color: #3a3a3a; }

.p6-i4ds27-metric-formula p:last-child { margin-bottom: 0; }

.p6-i4ds27-metric-legend {
  font-size: 0.8rem;
  display: inline-block;
  margin: 0.1rem 1.25rem 0.3rem 0;
}

.p6-i4ds27-metric-markchip {
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
}

.p6-i4ds27-metric-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 1rem;
}

.p6-i4ds27-metric-chip {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border: 1px solid currentColor;
}

/* Varianten-Strahl: Zahlenstrahl 0 → 1,0; jede Variante sitzt an ihrem
   fg-Makro-mIoU-Wert. Beschriftungen wechseln oben/unten (Formensprache
   der Weg-Schrittleiste), Marken mit schwarzem Rand, aktive Marke gelb;
   der gelbe Balken füllt bis zum gewählten Wert. */
.p6-i4ds27-metric-rail {
  position: relative;
  height: 7rem;
  margin: 0 0 0.25rem;
  touch-action: none;      /* Ziehen auf dem Strahl statt Seitenscroll */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.p6-i4ds27-metric-rail-dragging { cursor: grabbing; }

/* Sichtbarer Regler-Griff auf der Achse: lädt zum Ziehen ein und zeigt
   die aktive Position; zwei Griffrillen als Schiebe-Affordanz. */
.p6-i4ds27-metric-rail-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 32px;
  background: #fde70e;
  border: 2px solid #111;
  pointer-events: none;
  transition: left 150ms ease-out;
  z-index: 1;
}

.p6-i4ds27-metric-rail-thumb::before,
.p6-i4ds27-metric-rail-thumb::after {
  content: '';
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: #111;
}

.p6-i4ds27-metric-rail-thumb::before { left: 4px; }
.p6-i4ds27-metric-rail-thumb::after { right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .p6-i4ds27-metric-rail-thumb { transition: none; }
}

.p6-i4ds27-metric-rail-track {
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #111;
}

.p6-i4ds27-metric-rail-fill {
  position: absolute;
  left: 2rem;
  top: calc(50% - 5px);
  height: 10px;
  background: #fde70e;
  transition: width 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .p6-i4ds27-metric-rail-fill { transition: none; }
}

.p6-i4ds27-metric-rail-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 700;
}

.p6-i4ds27-metric-rail-end-l { left: 0; }
.p6-i4ds27-metric-rail-end-r { right: 0; }

.p6-i4ds27-metric-rail-stop {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font: inherit;
  color: #111;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.p6-i4ds27-metric-rail-above { bottom: 50%; }
.p6-i4ds27-metric-rail-below { top: 50%; }

/* Runde Haltepunkte: bewusst NICHT die Form des rechteckigen Reglers —
   Kreise sind Stationen auf dem Strahl, das Rechteck ist der Griff. */
.p6-i4ds27-metric-rail-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  flex: 0 0 auto;
}

.p6-i4ds27-metric-rail-tick {
  width: 2px;
  height: 8px;
  background: #111;
  flex: 0 0 auto;
}

.p6-i4ds27-metric-rail-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 8rem;
  text-align: center;
  line-height: 1.2;
  padding: 0.15rem 0;
}

.p6-i4ds27-metric-rail-edge-l .p6-i4ds27-metric-rail-label {
  transform: translateX(25%);
}

.p6-i4ds27-metric-rail-edge-r .p6-i4ds27-metric-rail-label {
  transform: translateX(-25%);
}

/* Das offizielle Stylesheet legt Buttons im Hover eine gelbe Fläche
   unter — auf dem Strahl wäre das ein gelber Block hinter dem Etikett.
   Neutralisieren (wie bei den Weg-Schrittknöpfen); der Hover lebt
   stattdessen auf dem runden Haltepunkt. */
.p6-i4ds27-metric-rail-stop:hover,
.p6-i4ds27-metric-rail-stop:focus,
.p6-i4ds27-metric-rail-stop:active {
  background: none;
}

.p6-i4ds27-metric-rail-stop:hover .p6-i4ds27-metric-rail-mark {
  background: #fde70e;
}

/* Wo der Griff steht, verschwinden Haltepunkt und Verbindungsstrich —
   auch bei einer zweiten Station mit demselben Wert (die beiden
   0,0-Varianten), damit nichts unter dem Griff hervorlugt. */
.p6-i4ds27-metric-rail-covered .p6-i4ds27-metric-rail-mark,
.p6-i4ds27-metric-rail-covered .p6-i4ds27-metric-rail-tick {
  visibility: hidden;
}

/* Die GEWÄHLTE Variante trägt ihr Etikett gelb hinterlegt — eindeutig
   auch dann, wenn zwei Etiketten dieselbe Achsenposition teilen. */
.p6-i4ds27-metric-rail-stop[aria-checked="true"]
  .p6-i4ds27-metric-rail-label {
  background: #fde70e;
  padding: 0.15rem 0.35rem;
  font-weight: 800;
}

/* Fokusring am ETIKETT statt um den ganzen hohen Knopf (Etikett + Punkt
   + Strich ergäben ein seltsam grosses Rechteck über die Achse). */
.p6-i4ds27-metric-rail-stop:focus-visible { outline: none; }

.p6-i4ds27-metric-rail-stop:focus-visible .p6-i4ds27-metric-rail-label {
  outline: 3px solid #111;
  outline-offset: 2px;
}

/* Unter 601 px sind die Etiketten ausgeblendet — dort umrahmt der Ring
   den kompakten Knopf selbst (Punkt + Strich, klein genug). */
@media (max-width: 600px) {
  .p6-i4ds27-metric-rail-stop:focus-visible {
    outline: 3px solid #111;
    outline-offset: 2px;
  }
}

/* Aktive Variante als Textzeile — sichtbar nur dort, wo die
   Strahl-Beschriftungen keinen Platz haben. */
.p6-i4ds27-metric-rail-active {
  display: none;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

@media (max-width: 600px) {
  .p6-i4ds27-metric-rail { height: 4.5rem; }
  .p6-i4ds27-metric-rail-label { display: none; }
  .p6-i4ds27-metric-rail-active { display: block; }
}

/* Zwei Spalten unter dem Strahl: links das Bild (Raster + Überlagerungen),
   rechts Formelblock und Tabelle — die Zahlen stehen NEBEN dem Bild, in
   der vollen Bleed-Breite; die Raster selbst bleiben gleich gross. */
/* EIN gemeinsames Mass für alle Rinnen des Blocks: Raster↔Raster und
   Raster↔Zahlenspalte tragen exakt denselben Abstand, auf jeder
   Breite. Flex-Zeile: siehe Sammelregel bei .p6-i4ds27-figrow. */
.p6-i4ds27-metric-main {
  flex: 1.4 1 30rem;
  min-width: 0;
}

/* Im Spaltenlayout beginnen die Raster an der linken Spaltenkante —
   die Oberkanten von Bild (links) und Formelblock (rechts) fluchten.
   KEINE Maximalbreite: das Rasterpaar füllt die Spalte exakt aus, so
   ist die Rinne zum Zahlenblock dieselbe wie zwischen den Rastern. */
.p6-i4ds27-metric-main .p6-i4ds27-metric-grids {
  justify-content: flex-start;
  margin-top: 0;
}

.p6-i4ds27-metric-main .p6-i4ds27-metric-grid { max-width: none; }

.p6-i4ds27-metric-side {
  flex: 1 1 17rem;
  min-width: 0;
}

.p6-i4ds27-metric-side .p6-i4ds27-metric-formula { margin-top: 0; }

/* Datensatz-Tooltip im Atlas: folgt dem Zeiger ueber den Marken. */
.p6-i4ds27-atlas-tip {
  position: absolute;
  background: #111;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2em 0.55em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}

/* Zell-Inspektor: eine Zeile, die die gezeigte Zelle benennt. */
.p6-i4ds27-metric-inspect {
  font-size: 0.8rem;
  min-height: 1.4em;
  margin: 0.15rem 0 0.25rem;
  color: #3a3a3a;
}

.p6-i4ds27-metric-grids:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.p6-i4ds27-table-wrap { overflow-x: auto; }

.p6-i4ds27-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

.p6-i4ds27-table caption {
  text-align: left;
  font-size: 0.85rem;
  padding: 0.3rem 0;
}

.p6-i4ds27-table th,
.p6-i4ds27-table td {
  border: 1px solid currentColor;
  padding: 0.35rem 0.55rem;
  text-align: left;
}

/* --- Atlas (atlas.js) -------------------------------------------------------- */

/* Kompakter Vertikalrhythmus im Abschnitt: Text (~25 % Fensterhoehe)
   und ganzer Atlas sollen einen Viewport teilen. */
.p6-i4ds27-daten-head { margin-bottom: 0.5rem; }
.p6-i4ds27-daten-text { margin: 0 0 0.6rem; }

.p6-i4ds27-atlas-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.25rem 0 0.5rem;
}

/* Kompakt genug, dass alle neun Filter auf Desktopbreite in EINER
   Zeile stehen; auf schmalen Viewports bricht flex-wrap weiterhin um. */
.p6-i4ds27-atlas-toolbar button {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.4em 0.5em;   /* >= 32 px; primäre Knoepfe unten groesser */
  min-height: 32px;
  background: #fff;
  color: currentColor;
  border: 1px solid currentColor;
  cursor: pointer;
}

.p6-i4ds27-atlas-toolbar button[aria-pressed="true"] {
  background: #000;
  color: #fff;
}

.p6-i4ds27-atlas-toolbar button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.p6-i4ds27-atlas-stage {
  position: relative;               /* Canvas-Wolke unter der SVG-Ebene */
  aspect-ratio: 1000 / 620;
  border: 1px solid currentColor;
  background: #fff;
  touch-action: none;               /* Ziehen rotiert die 3D-Ansicht */
  /* Text und GANZER Atlas teilen einen Viewport: die Buehnenhoehe wird
     ueber die Breite auf ~48vh gedeckelt (1000/620 = 1,6129), das
     Seitenverhaeltnis und damit die Canvas/SVG-Deckung bleiben exakt. */
  max-width: calc(42vh * 1.6129);
  margin-inline: auto;
}

.p6-i4ds27-atlas-stage:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.p6-i4ds27-atlas-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p6-i4ds27-atlas-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.p6-i4ds27-atlas-svg [data-ds] { cursor: pointer; }

.p6-i4ds27-atlas-detail {
  display: none;
  border: 2px dashed currentColor;
  padding: 0.45rem 0.7rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.p6-i4ds27-atlas-detail-active {
  display: block; border-style: solid; }

.p6-i4ds27-atlas-detail p { margin: 0; }

.p6-i4ds27-atlas-note {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}

/* --- Bewegung: Rueckmeldung statt Schnitt, nie ohne Einwilligung ------------ */

@media (prefers-reduced-motion: no-preference) {
  .p6-i4ds27-figsvg [data-p6x] { transition: opacity 120ms ease; }

  .p6-i4ds27-pop { animation: p6-i4ds27-ankunft 150ms cubic-bezier(0.16, 1, 0.3, 1); }

  .p6-i4ds27-atlas-toolbar button { transition: background-color 150ms ease, color 150ms ease; }

  /* Ambient-Loops der Weg-Buehne: langsam, bedeutungstragend, doppelt
   * gegated (enhanced-Klasse kommt nur per JS, dieser Block nur bei
   * erlaubter Bewegung). Offscreen-Zustand und verborgenes Dokument
   * halten sie an. */

  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="lupe"] circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: p6-i4ds27-weg-atmen-skala 6s ease-in-out infinite;
  }

  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="band"] rect[fill="#fde70e"],
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="lora"] rect,
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="schwelle"] path,
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="prompt"] rect[stroke="#0072b2"] {
    animation: p6-i4ds27-weg-atmen 7s ease-in-out infinite;
  }

  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="ref"] image {
    animation: p6-i4ds27-weg-atmen 10s ease-in-out infinite;
  }

  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="pred"] image {
    animation: p6-i4ds27-weg-atmen 10s ease-in-out infinite;
    animation-delay: 5s;
  }

  #p6-i4ds27-weg.p6-i4ds27-weg-offscreen .p6-i4ds27-wsvg * {
    animation-play-state: paused;
  }

  @keyframes p6-i4ds27-weg-atmen {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
  }

  @keyframes p6-i4ds27-weg-atmen-skala {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  @keyframes p6-i4ds27-ankunft {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

}

@media (prefers-reduced-motion: reduce) {
  .p6-i4ds27-figsvg [data-p6x],
  .p6-i4ds27-atlas-toolbar button,
  .p6-i4ds27-pop,
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="lupe"] circle,
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="band"] rect[fill="#fde70e"],
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="lora"] rect,
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="schwelle"] path,
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="prompt"] rect[stroke="#0072b2"],
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="ref"] image,
  .p6-i4ds27-weg-enhanced .p6-i4ds27-wsvg [data-anim="pred"] image {
    transition: none;
    animation: none;
  }
}