/* ============================================================================
   youbooth — TEIL 3: Bausteine (Primitives)
   Quelle: entwurf/design_handoff_youbooth/BUILD_SPEC.md, Teil 3.1 - 3.11.

   Eine Seite darf AUSSCHLIESSLICH aus diesen Bausteinen bestehen. Kein
   eigenes Styling in Seitendateien. Braucht eine Seite etwas, das es hier
   nicht gibt, wird es HIER ergaenzt - nicht dort erfunden.

   Setzt tokens.css voraus.
   ========================================================================= */


/* ── 3.1 Section ────────────────────────────────────────────────────────
   Senkrechter Abschnitt. Traegt die Flaechenfarbe und schaltet die
   Vordergrund-Aliase um, damit Bausteine nicht wissen muessen, worauf sie
   liegen.                                                                */

.yb-sec {
  --yb-sec-pad: 80px;
  background: var(--yb-flaeche);
  color: var(--yb-vordergrund);
  padding-block: var(--yb-sec-pad);
}

.yb-sec--kompakt { --yb-sec-pad: 70px; }
.yb-sec--eng     { --yb-sec-pad: 56px; }
.yb-sec--nahtlos { --yb-sec-pad: 0px; }

.yb-sec--paper {
  --yb-flaeche: var(--yb-paper);
  --yb-karte-grund: var(--yb-white);
}

.yb-sec--white {
  --yb-flaeche: var(--yb-white);
  --yb-karte-grund: var(--yb-paper);
}

.yb-sec--ink {
  --yb-flaeche:       var(--yb-ink);
  --yb-vordergrund:   var(--yb-on-dark);
  --yb-gedaempft:     var(--yb-on-dark-muted);
  --yb-rahmen:        var(--yb-line-dark);
  --yb-karte-grund:   var(--yb-ink-soft);
  --yb-eyebrow-farbe: var(--yb-amber);   /* gemessen 10,5:1 auf ink */
}

/* Inhaltsbahn: max. 1240px, seitlich der Seitenrand. */
.yb-sec__in {
  max-width: var(--yb-breite);
  margin-inline: auto;
  padding-inline: var(--yb-rand);
  display: flex;
  flex-direction: column;
  gap: var(--yb-sec-gap, 32px);
}

@media (max-width: 900px) {
  .yb-sec { --yb-sec-pad: 56px; }
  .yb-sec__in { padding-inline: 20px; }
}


/* ── 3.2 SectionHead ────────────────────────────────────────────────────
   Kopf eines Abschnitts. Jeder Abschnitt beginnt damit - kein nacktes h2. */

.yb-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.yb-kopf__links  { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.yb-kopf__rechts { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; }

.yb-kopf__note {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yb-gedaempft);
  max-width: 320px;
}

.yb-kopf__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--yb-gedaempft);
  max-width: 440px;
  text-align: right;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .yb-kopf__rechts { align-items: flex-start; text-align: left; }
  .yb-kopf__lead   { text-align: left; }
}


/* ── 3.3 Card ──────────────────────────────────────────────────────────── */

.yb-karte {
  position: relative;
  background: var(--yb-karte-grund);
  border: 1px solid var(--yb-rahmen);
  border-radius: var(--yb-r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: var(--yb-schatten-karte);
  color: var(--yb-vordergrund);
}

/* Karte auf dunkler Flaeche, auch innerhalb einer hellen Section. */
.yb-karte--ink {
  --yb-vordergrund:   var(--yb-on-dark);
  --yb-gedaempft:     var(--yb-on-dark-muted);
  --yb-rahmen:        var(--yb-line-dark);
  --yb-eyebrow-farbe: var(--yb-amber);
  background: var(--yb-ink-soft);
  border-color: var(--yb-line-dark);
  color: var(--yb-on-dark);
}

.yb-karte--weiss {
  background: var(--yb-white);
  border-color: var(--yb-line);
  --yb-vordergrund:   var(--yb-text);
  --yb-gedaempft:     var(--yb-text-muted);
  --yb-rahmen:        var(--yb-line);
  --yb-eyebrow-farbe: var(--yb-ink-soft);
  color: var(--yb-text);
}

.yb-karte--gross { border-radius: var(--yb-r-card-lg); }

.yb-karte--klick {
  transition: transform var(--yb-t-weg), box-shadow var(--yb-t-weg);
}
.yb-karte--klick:hover,
.yb-karte--klick:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--yb-schatten-hebung);
}

/* Ecken-Kennzeichnung. Amber = "das ist Software", Ink = "das ist eure
   Hardware / eure Seite". */
.yb-karte__ecke {
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px 16px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: inherit;
  font-family: var(--yb-font-mono);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}
.yb-karte__ecke--amber { background: var(--yb-amber); color: var(--yb-amber-ink); }
.yb-karte__ecke--ink   { background: var(--yb-ink);   color: var(--yb-on-dark); }


/* ── 3.4 Button ────────────────────────────────────────────────────────── */

.yb-btn {
  --yb-btn-h: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--yb-btn-h);
  padding-inline: 18px;
  border: 1px solid transparent;
  border-radius: var(--yb-r-btn);
  font-family: var(--yb-font-ui);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: inherit;
  transition: background-color var(--yb-t-farbe), border-color var(--yb-t-farbe),
              color var(--yb-t-farbe), transform var(--yb-t-weg), box-shadow var(--yb-t-weg);
}

.yb-btn--sm    { --yb-btn-h: 36px; padding-inline: 14px; font-size: 12.5px; }
/* Beruehrungskontexte (Booth, Tablet): nie unter 44px. */
.yb-btn--touch { --yb-btn-h: 44px; padding-inline: 22px; font-size: 15px; }

.yb-btn--primary {
  background: var(--yb-amber);
  color: var(--yb-amber-ink);
  box-shadow: var(--yb-schatten-cta);
}
.yb-btn--primary:hover {
  color: var(--yb-amber-ink);
  transform: translateY(-1px);
  box-shadow: var(--yb-schatten-cta-an);
}

.yb-btn--ghost {
  border-color: var(--yb-line);
  color: var(--yb-vordergrund);
}
.yb-btn--ghost:hover {
  color: var(--yb-vordergrund);
  background: rgba(0,0,0,.06);
}
/* Auf dunkler Flaeche */
.yb-sec--ink .yb-btn--ghost,
.yb-karte--ink .yb-btn--ghost,
.yb-btn--ghost.yb-btn--auf-dunkel {
  border-color: rgba(244,242,238,.2);
  color: var(--yb-on-dark);
}
.yb-sec--ink .yb-btn--ghost:hover,
.yb-karte--ink .yb-btn--ghost:hover,
.yb-btn--ghost.yb-btn--auf-dunkel:hover {
  background: rgba(244,242,238,.08);
}

.yb-btn--link {
  height: auto;
  /* WCAG 2.2 SC 2.5.8: freistehendes Ziel nicht unter 24px. */
  min-height: 24px;
  padding: 0;
  font-size: 14px;
  color: var(--yb-link);
  border: 0;
  background: none;
}
.yb-btn--link:hover { color: var(--yb-link-hover); }
/* Auf Dunkel traegt das Rostrot nicht: gemessen 3,24:1 auf ink.
   Dort uebernimmt Amber (10,5:1). */
.yb-sec--ink .yb-btn--link,
.yb-karte--ink .yb-btn--link { color: var(--yb-amber); }
.yb-sec--ink .yb-btn--link:hover,
.yb-karte--ink .yb-btn--link:hover { color: var(--yb-amber); }
.yb-btn--link::after { content: '\2192'; transition: transform var(--yb-t-weg); }
.yb-btn--link:hover::after { transform: translateX(3px); }

.yb-btn[disabled], .yb-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

@media (max-width: 640px) {
  .yb-btn { --yb-btn-h: 38px; font-size: 12.5px; }
  .yb-btn--touch { --yb-btn-h: 44px; font-size: 15px; }
}


/* ── 3.5 Chip ──────────────────────────────────────────────────────────
   Die tragende Interaktion der Website. Kein Chip ohne Wirkung.          */

.yb-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Form: Pille, nicht Radius 12. BUILD_SPEC 3.5 nennt radius:chip, die
   Handoff-Screenshots (06-vorlagen) zeigen aber eindeutig eine Pille;
   gemessene Aussenhoehe dort 36 px. Sichtbarer Entwurf schlaegt Prosa. */
.yb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding-inline: 16px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-full);
  background: var(--yb-white);
  color: var(--yb-text-muted);
  font-family: var(--yb-font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--yb-t-farbe), border-color var(--yb-t-farbe), color var(--yb-t-farbe);
}
.yb-chip:hover { background: rgba(0,0,0,.04); color: var(--yb-text); }

/* Wertchips stehen in Versalien, der Zuruecksetz-Chip ("Alle …") nicht. */
.yb-chip--versal { text-transform: uppercase; letter-spacing: .04em; }

.yb-chip[aria-pressed="true"] {
  background: var(--yb-ink);
  color: var(--yb-on-dark);
  border-color: transparent;
  font-weight: 700;
}
.yb-chip[aria-pressed="true"]:hover { background: var(--yb-ink); color: var(--yb-on-dark); }

/* Chips auf dunkler Flaeche */
.yb-sec--ink .yb-chip {
  background: transparent;
  border-color: var(--yb-line-dark);
  color: var(--yb-on-dark-muted);
}
.yb-sec--ink .yb-chip:hover { background: rgba(244,242,238,.08); color: var(--yb-on-dark); }
.yb-sec--ink .yb-chip[aria-pressed="true"] {
  background: var(--yb-amber);
  color: var(--yb-amber-ink);
  border-color: transparent;
}

.yb-chip__zahl {
  font-family: var(--yb-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  opacity: .7;
}


/* ── 3.6 Accordion ─────────────────────────────────────────────────────
   Immer nur eine Zeile offen. Ausnahme: keine.                           */

.yb-akk { display: flex; flex-direction: column; }

.yb-akk__zeile { border-top: 1px solid var(--yb-rahmen); }
.yb-akk__zeile:last-child { border-bottom: 1px solid var(--yb-rahmen); }

.yb-akk__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: var(--yb-font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  transition: color var(--yb-t-farbe);
}
.yb-akk__kopf:hover { color: var(--yb-amber); }

.yb-akk__zeichen {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  transition: transform var(--yb-t-weg);
}
.yb-akk__zeichen::before,
.yb-akk__zeichen::after {
  content: '';
  position: absolute;
  inset: 50% 2px auto 2px;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  border-radius: 1px;
}
.yb-akk__zeichen::after { transform: rotate(90deg); }
.yb-akk__kopf[aria-expanded="true"] .yb-akk__zeichen { transform: rotate(45deg); }

.yb-akk__inhalt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--yb-t-klapp);
}
.yb-akk__kopf[aria-expanded="true"] + .yb-akk__inhalt { grid-template-rows: 1fr; }

.yb-akk__inhalt > div {
  overflow: hidden;
  min-height: 0;
}
.yb-akk__kopf[aria-expanded="true"] + .yb-akk__inhalt > div { padding-bottom: 20px; }

.yb-akk__text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--yb-gedaempft);
  max-width: var(--yb-textbreite);
  text-wrap: pretty;
}


/* ── 3.7 Stat ──────────────────────────────────────────────────────────── */

.yb-stat { display: flex; flex-direction: column; gap: 6px; }

.yb-stat__wert {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--yb-vordergrund);
  font-variant-numeric: tabular-nums;
}

.yb-stat__label {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-gedaempft);
}


/* ── 3.8 Bullet ────────────────────────────────────────────────────────── */

.yb-punkte {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.yb-punkte--eng { gap: 9px; }

.yb-punkt {
  display: flex;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--yb-gedaempft);
  max-width: var(--yb-textbreite);
}
.yb-punkt::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: var(--yb-r-full);
  background: var(--yb-ink-soft);
}
.yb-sec--ink .yb-punkt::before,
.yb-karte--ink .yb-punkt::before { background: var(--yb-amber); }


/* ── 3.9 Figure ────────────────────────────────────────────────────────
   Ersatz fuer <image-slot>. Bild IMMER object-fit:contain - Screenshots
   werden nie angeschnitten.                                              */

.yb-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  margin: 0;
}
.yb-sec--ink .yb-bild,
.yb-karte--ink .yb-bild { background: rgba(244,242,238,.06); }

.yb-bild--16-9  { aspect-ratio: 16 / 9; }
.yb-bild--16-10 { aspect-ratio: 16 / 10; }
.yb-bild--3-2   { aspect-ratio: 3 / 2; }
.yb-bild--hoch  { aspect-ratio: 3 / 4; }
.yb-bild--4-3   { aspect-ratio: 4 / 3; }
.yb-bild--4-5   { aspect-ratio: 4 / 5; }
.yb-bild--9-16  { aspect-ratio: 9 / 16; }
.yb-bild--1-1   { aspect-ratio: 1; }
.yb-bild--rund  { aspect-ratio: 1; border-radius: var(--yb-r-full); }

.yb-bild > img,
.yb-bild > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fehlt das Foto: Flaeche + Motivtext. Kein gezeichnetes Ersatzmotiv. */
.yb-bild__motiv {
  padding: 16px;
  font-family: var(--yb-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--yb-gedaempft);
  max-width: 28ch;
}


/* ── 3.10 EmptyState ───────────────────────────────────────────────────
   Pflicht fuer jede Filterflaeche.                                       */

.yb-leer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 44px 0;
}
.yb-leer__marke {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  /* Fest auf Amber gesetzt misst diese Zeile auf weisser Karte 1,87:1 und
     ist damit unlesbar — derselbe Fehler wie beim Eyebrow. Die Farbe haengt
     an der Flaeche: ink-soft auf Hell, Amber auf Dunkel. */
  color: var(--yb-eyebrow-farbe);
}
.yb-leer__satz {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--yb-gedaempft);
  max-width: var(--yb-textbreite);
}


/* ── 3.11 Bewegung ─────────────────────────────────────────────────────
   Einflug: opacity 0->1 + translateY(10px->0), 600ms, ease.open,
   fill-mode backwards. Listen gestaffelt index*40ms, Deckel bei 12.      */

/* Der Ruhezustand IST der sichtbare Zustand. Ohne .yb-js auf <html> —
   also ohne laufendes Skript — steht hier gar nichts, der Inhalt ist
   einfach da. Erst das Skript darf verstecken, und es blendet dann beim
   Sichtwerden ein. Eine reine CSS-Keyframe-Loesung mit
   animation-fill-mode:backwards war hier falsch: laeuft die Animation
   nicht (eingebettete Ansicht ohne Bildaufbau, Hintergrund-Tab), bleibt
   die Deckkraft auf 0 — gemessen 8 von 8 Elementen unsichtbar. */

.yb-js .yb-flug {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms cubic-bezier(.22,.61,.36,1) calc(var(--yb-i, 0) * 40ms),
              transform 600ms cubic-bezier(.22,.61,.36,1) calc(var(--yb-i, 0) * 40ms);
}

.yb-js .yb-flug.is-da {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .yb-js .yb-flug { opacity: 1; transform: none; transition: none; }
}


/* ── Hilfsraster, ausschliesslich aus Teil-2-Werten ────────────────────── */

.yb-raster        { display: grid; gap: 16px; }
/* Karten sollen in einer Reihe gleich hoch sein — Bilder nicht: die
   werden sonst auf die Reihenhoehe gedehnt und verlieren ihr
   Seitenverhaeltnis. Bildraster deshalb oben ausrichten. */
.yb-raster--oben  { align-items: start; }
.yb-raster--220   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.yb-raster--240   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.yb-raster--180   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.yb-raster--2     { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

.yb-reihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.yb-spalte { display: flex; flex-direction: column; gap: 12px; }


/* ============================================================================
   ERWEITERUNG — Bausteine, die der Entwurf voraussetzt, aber nicht ausformt.

   BUILD_SPEC Teil 3 listet 11 Bausteine. Das Kontaktformular (5.9) und das
   ganze Cockpit (6.2) brauchen mehr: Eingabefelder, Dialoge, Meldungen,
   Zustandspunkte. Statt sie in den Seitendateien zu erfinden, stehen sie
   hier — nach denselben Regeln, nur aus Teil-2-Werten gebaut.
   ========================================================================= */


/* ── E1 Formularfeld ───────────────────────────────────────────────────── */

.yb-feld {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.yb-feld__label {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-gedaempft);
}

.yb-feld__eingabe,
.yb-feld select,
.yb-feld textarea {
  width: 100%;
  min-height: 44px;                       /* Beruehrungsziel */
  padding: 11px 14px;
  border: 1px solid var(--yb-rahmen);
  border-radius: var(--yb-r-btn);
  background: var(--yb-karte-grund);
  color: var(--yb-vordergrund);
  font-family: var(--yb-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color var(--yb-t-farbe), background-color var(--yb-t-farbe);
}
.yb-feld textarea { min-height: 120px; resize: vertical; }

.yb-feld__eingabe::placeholder,
.yb-feld textarea::placeholder { color: var(--yb-gedaempft); opacity: .75; }

.yb-feld__eingabe:hover,
.yb-feld select:hover,
.yb-feld textarea:hover { border-color: rgba(0,0,0,.2); }
.yb-sec--ink .yb-feld__eingabe:hover,
.yb-karte--ink .yb-feld__eingabe:hover { border-color: rgba(244,242,238,.28); }

.yb-feld__eingabe:focus-visible,
.yb-feld select:focus-visible,
.yb-feld textarea:focus-visible { border-color: var(--yb-amber); }

/* Kennung, Schluessel, Codes: Mono, gesperrt, Versalien. */
.yb-feld__eingabe--kennung {
  font-family: var(--yb-font-mono);
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

/* Fehler erst NACH dem Absenden zeigen (BUILD_SPEC 5.9). */
.yb-feld--fehler .yb-feld__eingabe,
.yb-feld--fehler select,
.yb-feld--fehler textarea { border-color: var(--yb-zustand-warn); }

.yb-feld__fehler {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--yb-zustand-warn);
}
.yb-feld__hinweis {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--yb-gedaempft);
}
.yb-feld__zaehler {
  align-self: flex-end;
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--yb-gedaempft);
  font-variant-numeric: tabular-nums;
}

/* Ankreuzfeld */
.yb-ankreuz {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  color: var(--yb-vordergrund);
}
.yb-ankreuz input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--yb-amber);
  cursor: pointer;
}

/* Eigenes display noetig: der Behaelter traegt nur den Modifikator,
   nicht .yb-feld selbst. */
.yb-feld--reihe { display: flex; flex-direction: row; gap: 14px; align-items: flex-end; }
.yb-feld--reihe > * { flex: 1; }

.yb-feld__eingabe[type="color"] { padding: 5px; cursor: pointer; }
.yb-feld--farbe { flex: 0 0 84px; }


/* ── E2 Dialog ─────────────────────────────────────────────────────────
   Als natives <dialog>: Tastatur, Escape und Fokusfang kommen vom Browser. */

.yb-dialog {
  width: min(460px, calc(100vw - 40px));
  max-height: calc(100dvh - 80px);
  padding: 0;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card-lg);
  background: var(--yb-white);
  color: var(--yb-text);
  box-shadow: var(--yb-schatten-hebung);
  overflow: visible;
}
.yb-dialog::backdrop { background: rgba(11,11,13,.6); }
/* showModal() setzt den Fokus auf den Dialog selbst. Ein Ring um die ganze
   Flaeche sagt nichts — die Ringe gehoeren an die Bedienelemente darin. */
.yb-dialog:focus, .yb-dialog:focus-visible { outline: none; }

.yb-dialog__in {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
}
.yb-dialog__kopf { display: flex; flex-direction: column; gap: 8px; }
.yb-dialog__fuss { display: flex; gap: 10px; margin-top: 4px; }
.yb-dialog__fuss > .yb-btn { flex: 1; }
.yb-dialog--breit { width: min(620px, calc(100vw - 40px)); }


/* ── E3 Meldung ────────────────────────────────────────────────────────
   Kurze Rueckmeldung nach einer Handlung. Nicht fuer Dauerzustaende.     */

.yb-meldungen {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

/* Der Zustand haengt am Punkt, nicht an einem Seitenbalken — dieses System
   kennzeichnet ueberall mit Punkt (E4) oder Ecke (3.3), nirgends mit Band. */
.yb-meldung {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 12px 20px;
  border-radius: var(--yb-r-btn);
  border: 1px solid var(--yb-line-dark);
  background: var(--yb-ink);
  color: var(--yb-on-dark);
  font-family: var(--yb-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--yb-schatten-hebung);
  pointer-events: auto;
}
.yb-meldung::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--yb-r-full);
  background: var(--yb-amber);
}
.yb-meldung--gut::before     { background: var(--yb-ok); }   /* Meldung liegt auf ink */
.yb-meldung--warnung::before { background: var(--yb-warn); }

.yb-js .yb-meldung {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--yb-t-farbe), transform var(--yb-t-weg);
}
.yb-js .yb-meldung.is-da { opacity: 1; transform: none; }


/* ── E4 Zustandspunkt ──────────────────────────────────────────────────
   ok und warn sind Zustand, nie Schmuck. Farbe allein traegt die Aussage
   nicht — der Text daneben ist Pflicht.                                  */

.yb-zustand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-gedaempft);
  white-space: nowrap;
}
.yb-zustand::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--yb-r-full);
  background: currentColor;
}
.yb-zustand--laeuft   { color: var(--yb-zustand-ok); }
.yb-zustand--eingriff { color: var(--yb-zustand-warn); }
.yb-zustand--aus      { color: var(--yb-gedaempft); }
.yb-zustand--pruefe::before { animation: yb-puls 1.1s ease-in-out infinite; }

@keyframes yb-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }


/* ── E5 Ladeschirm ─────────────────────────────────────────────────────── */

.yb-laden {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--yb-ink);
  color: var(--yb-on-dark);
  transition: opacity .5s ease;
}
.yb-laden.is-weg { opacity: 0; pointer-events: none; }
.yb-laden__ring {
  width: 56px;
  height: 56px;
  border-radius: var(--yb-r-full);
  border: 5px solid rgba(244,242,238,.15);
  border-top-color: var(--yb-amber);
  animation: yb-dreh .9s linear infinite;
}
.yb-laden__text {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-on-dark-muted);
}
@keyframes yb-dreh { to { transform: rotate(360deg); } }


/* ── E6 Hinzufuegen-Kachel ─────────────────────────────────────────────── */

.yb-kachel-plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  padding: 24px;
  border: 1.5px dashed var(--yb-rahmen);
  border-radius: var(--yb-r-card);
  background: transparent;
  color: var(--yb-gedaempft);
  cursor: pointer;
  transition: border-color var(--yb-t-farbe), color var(--yb-t-farbe), background-color var(--yb-t-farbe);
}
.yb-kachel-plus:hover {
  border-color: var(--yb-amber);
  color: var(--yb-vordergrund);
  background: rgba(242,178,62,.06);
}
.yb-kachel-plus__zeichen {
  position: relative;
  width: 26px;
  height: 26px;
  color: var(--yb-amber);
}
.yb-kachel-plus__zeichen::before,
.yb-kachel-plus__zeichen::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  border-radius: 1px;
}
.yb-kachel-plus__zeichen::after { transform: rotate(90deg); }
.yb-kachel-plus__text {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* ── E7 Aktionsraster ──────────────────────────────────────────────────
   Die Knopfreihe am Fuss einer Arbeitskarte: zweispaltig, erste Handlung
   ueber die volle Breite.                                                */

.yb-aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.yb-aktionen > .yb-btn { width: 100%; }
.yb-aktionen > .yb-btn--primary { grid-column: 1 / -1; }
.yb-aktionen .yb-btn--ghost { justify-content: flex-start; font-weight: 500; }


/* Zustandsfarben auf dunkler Flaeche: dort tragen die Originaltoene
   aus Teil 2 (ok 7,19:1 · warn 4,83:1 auf ink). */
.yb-sec--ink, .yb-karte--ink, .yb-meldung, .yb-laden {
  --yb-zustand-ok:   var(--yb-ok);
  --yb-zustand-warn: var(--yb-warn-dunkel);
}


/* ============================================================================
   ERWEITERUNG II — was TEIL 5 (Seiten) zusaetzlich braucht.

   Alles aus Teil-2-Werten gebaut, keine neue Farbe, keine neue Groesse.
   Begruendung je Baustein steht in ENTWURF-STAND.md.
   ========================================================================= */


/* ── E8 Akzentband ─────────────────────────────────────────────────────
   Amber-Streifen mit Kennzahlen, wie auf der Startseite unter dem Hero.
   Amber ist Akzent, keine Grundflaeche — das Band bleibt deshalb schmal
   und traegt nur Zahlen. Text darauf ist immer amber-ink (Teil 2).     */

.yb-band {
  background: var(--yb-amber);
  color: var(--yb-amber-ink);
}

.yb-band__in {
  max-width: var(--yb-breite);
  margin: 0 auto;
  padding: var(--yb-s6) var(--yb-rand);
  display: flex;
  flex-wrap: wrap;
  gap: var(--yb-s9);
  align-items: baseline;
}

.yb-band__posten {
  display: flex;
  align-items: baseline;
  gap: var(--yb-s3);
}

.yb-band__zahl {
  font-family: var(--yb-font-display);
  font-weight: 900;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.yb-band__label {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .yb-band__in { gap: var(--yb-s5) var(--yb-s7); }
}


/* ── E9 Blitz ──────────────────────────────────────────────────────────
   Einmaliger weisser Aufschlag ueber dem Hero-Bild, 700 ms, Deckkraft
   1 → 0 (BUILD_SPEC 5.1). Einmalig, nicht in Schleife — Teil 3.11
   verbietet Endlosbewegung ausserhalb des Booth-Attract.
   Der Ruhezustand ist unsichtbar: faellt das Skript aus, liegt keine
   weisse Flaeche ueber dem Bild.                                       */

.yb-blitz {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}
.yb-js .yb-blitz { animation: yb-blitz .7s linear 1 both; }

@keyframes yb-blitz { from { opacity: 1; } to { opacity: 0; } }


/* ── E10 Symbol ────────────────────────────────────────────────────────
   Die 26 Strich-Icons liegen als SVG mit `currentColor`. Als <img>
   eingebunden erben sie die Textfarbe NICHT und werden auf dunkler
   Flaeche unsichtbar. Deshalb als Maske: die Flaeche ist currentColor,
   das SVG gibt nur die Form. Groessen laut 13_BILDPLAETZE: 17 px in
   Listen, 21 px in Leisten, 24 px auf Kacheln.                         */

.yb-symbol {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--yb-symbol) center / contain no-repeat;
          mask: var(--yb-symbol) center / contain no-repeat;
}
.yb-symbol--17 { width: 17px; height: 17px; }
.yb-symbol--21 { width: 21px; height: 21px; }

/* Auf Kacheln steht das Symbol in Amber — ein Akzent, keine Zustandsfarbe. */
.yb-symbol--amber { color: var(--yb-amber); }
.yb-sec--ink .yb-symbol--amber,
.yb-karte--ink .yb-symbol--amber { color: var(--yb-amber); }


/* ── E11 Nummernkarte ──────────────────────────────────────────────────
   Karte mit vorangestellter Ziffer in Mono (Phasen, Schritte, Aufbau).
   Nutzt Karte und Badge aus Teil 3, ergaenzt nur die Ziffernzeile.     */

.yb-nummer {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-amber);
}
.yb-sec--paper .yb-nummer,
.yb-sec--white .yb-nummer,
.yb-karte--weiss .yb-nummer { color: var(--yb-ink-soft); }
/* Eine dunkle Karte in einem hellen Abschnitt: dort traegt ink-soft nicht
   (gemessen 1:1 auf ink-soft). Die Karte gewinnt gegen den Abschnitt. */
.yb-karte--ink .yb-nummer,
.yb-sec--ink .yb-nummer { color: var(--yb-amber); }

.yb-karte__zeile {
  display: flex;
  align-items: center;
  gap: var(--yb-s3);
  min-width: 0;
}


/* ── E12 Fotobox-Zeichnung ─────────────────────────────────────────────
   Reine CSS-Formen laut 06_GRAFIKEN Abschnitt 7: Ringlicht, Objektiv,
   Screen, Druckerschlitz mit Streifen. Keine Bilddatei, keine neue
   Farbe — alles aus Teil 2.                                           */

.yb-boxbild {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  border-radius: var(--yb-r-hero);
  border: 1px solid var(--yb-rahmen);
  background: var(--yb-karte-grund);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--yb-s3);
  padding: var(--yb-s5);
  box-sizing: border-box;
}
.yb-sec--ink .yb-boxbild { background: var(--yb-ink-soft); border-color: var(--yb-line-dark); }

.yb-boxbild__licht {
  width: 62px; height: 62px;
  border-radius: var(--yb-r-full);
  border: 4px solid var(--yb-amber);
  display: grid;
  place-items: center;
  flex: none;
}
.yb-boxbild__objektiv {
  width: 24px; height: 24px;
  border-radius: var(--yb-r-full);
  background: var(--yb-ink);
}
.yb-sec--ink .yb-boxbild__objektiv { background: var(--yb-on-dark); }

.yb-boxbild__screen {
  width: 100%;
  flex: 1;
  border-radius: var(--yb-r-card);
  background: var(--yb-ink);
  color: var(--yb-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--yb-s2);
  padding: var(--yb-s4);
  box-sizing: border-box;
  text-align: center;
}
.yb-sec--ink .yb-boxbild__screen { background: var(--yb-ink); border: 1px solid var(--yb-line-dark); }

.yb-boxbild__schlitz {
  width: 74%;
  height: 8px;
  border-radius: var(--yb-r-full);
  background: var(--yb-rahmen);
  flex: none;
}
.yb-boxbild__streifen {
  width: 42px;
  height: 62px;
  border-radius: 3px;
  background: var(--yb-white);
  border: 1px solid var(--yb-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  box-sizing: border-box;
  flex: none;
}
.yb-boxbild__streifen span {
  flex: 1;
  display: block;
  background: rgba(0,0,0,.12);
  border-radius: 1px;
}
.yb-boxbild__marke {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;
}


/* ── E13 Textstreifen ──────────────────────────────────────────────────
   Schmales Mono-Band zwischen zwei Abschnitten. Steht still: Teil 3.11
   verbietet Endlosbewegung auf der Website.                            */

.yb-streifen {
  background: var(--yb-ink-soft);
  color: var(--yb-on-dark-muted);
  border-block: 1px solid var(--yb-line-dark);
  overflow: hidden;
}
.yb-streifen__in {
  max-width: var(--yb-breite);
  margin: 0 auto;
  padding: var(--yb-s4) var(--yb-rand);
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.yb-streifen__in::-webkit-scrollbar { display: none; }


/* ── E14 Zweispalter ───────────────────────────────────────────────────
   Text links, Bild rechts (und umgekehrt). Auf der Startseite, den
   Modul- und Anlassseiten der haeufigste Aufbau. Masse aus 5.1.       */

.yb-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  align-items: center;
}
.yb-duo > * { min-width: 0; }
.yb-duo__text  { flex: 1 1 460px; display: flex; flex-direction: column; gap: var(--yb-s6); }
.yb-duo__bild  { flex: 1 1 480px; position: relative; }
.yb-duo--kehr  { flex-direction: row-reverse; }

/* Im Hero braucht der Text mehr Grundbreite als in einem Inhaltsabschnitt.
   Gemessen gegen `Start.dc.html`: dort steht die H1 in DREI Zeilen bei
   628 px Textspalte. Mit der Grundbreite 460 px blieben hier 528 px, und
   "DIE SOFTWARE, DIE DEN GANZEN ABEND TRÄGT" lief ueber vier Zeilen. */
.yb-duo--hero .yb-duo__text { flex: 1 1 600px; }
.yb-duo--hero .yb-duo__bild { flex: 1 1 440px; }

@media (max-width: 900px) {
  .yb-duo { gap: var(--yb-s7); }
  .yb-duo--kehr { flex-direction: row; }
}


/* ── E15 Arbeitsspalte ─────────────────────────────────────────────────
   Breite Hauptspalte, schmale Nebenspalte, die ab 1020 px mitlaeuft
   (Kostenuebersicht auf /preise, Ergebnis auf /rechner). Reine Anordnung,
   keine neue Farbe und keine neue Groesse.                             */

.yb-arbeitspalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--yb-s7);
  align-items: start;
}

@media (min-width: 1020px) {
  .yb-arbeitspalten { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); }
  .yb-neben { position: sticky; top: calc(var(--yb-kopfhoehe) + var(--yb-s5)); }
}

/* Unter bp.md steht das Ergebnis oben (BUILD_SPEC 5.7). */
@media (max-width: 900px) {
  .yb-arbeitspalten--ergebnis-zuerst .yb-neben { order: -1; }
}

.yb-neben { display: flex; flex-direction: column; gap: var(--yb-s4); }


/* ── E16 Zaehler ───────────────────────────────────────────────────────
   Minus, Wert, Plus. Beide Ziele 44 px (Teil 3.4).                     */

.yb-zaehler {
  display: inline-flex;
  align-items: center;
  gap: var(--yb-s2);
  border: 1px solid var(--yb-rahmen);
  border-radius: var(--yb-r-btn);
  background: var(--yb-karte-grund);
  padding: 4px;
}
.yb-zaehler__knopf {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--yb-r-pill);
  background: transparent;
  color: var(--yb-vordergrund);
  font: 600 20px/1 var(--yb-font-ui);
  cursor: pointer;
  transition: background var(--yb-t-farbe);
}
.yb-zaehler__knopf:hover { background: rgba(0,0,0,.06); }
.yb-sec--ink .yb-zaehler__knopf:hover { background: rgba(244,242,238,.1); }
.yb-zaehler__knopf[disabled] { opacity: .35; cursor: default; }
.yb-zaehler__wert {
  min-width: 56px;
  text-align: center;
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}


/* ── E17 Postenzeile ───────────────────────────────────────────────────
   Beschriftung links, Betrag rechts. Fuer Kostenuebersicht und Rechner. */

.yb-posten {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--yb-s4);
  padding-block: 7px;
  font-size: 14.5px;
  line-height: 1.5;
}
.yb-posten + .yb-posten { border-top: 1px solid var(--yb-rahmen); }
.yb-posten__betrag {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.yb-posten--summe {
  border-top: 1px solid var(--yb-rahmen);
  margin-top: var(--yb-s2);
  padding-top: var(--yb-s4);
  font-weight: 700;
}


/* ── E18 Umschalter ────────────────────────────────────────────────────
   Zwei Zustaende nebeneinander (monatlich / jaehrlich). Kein Chip: hier
   ist immer genau einer an, und beide Ziele sind gleich breit.         */

.yb-umschalter {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--yb-rahmen);
  border-radius: var(--yb-r-btn);
  background: var(--yb-karte-grund);
}
.yb-umschalter__knopf {
  min-height: 40px;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--yb-r-pill);
  background: transparent;
  color: var(--yb-gedaempft);
  font: 600 13.5px/1 var(--yb-font-ui);
  cursor: pointer;
  transition: background var(--yb-t-farbe), color var(--yb-t-farbe);
}
.yb-umschalter__knopf:hover { color: var(--yb-vordergrund); }
.yb-umschalter__knopf[aria-pressed="true"] {
  background: var(--yb-ink);
  color: var(--yb-on-dark);
}
.yb-sec--ink .yb-umschalter__knopf[aria-pressed="true"] {
  background: var(--yb-amber);
  color: var(--yb-amber-ink);
}


/* ── E19 Regler ────────────────────────────────────────────────────────
   Schieberegler mit sichtbarem Wert, Tastatur bedienbar (5.7).         */

.yb-regler { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.yb-regler__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--yb-s3); }
.yb-regler__label {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-gedaempft);
}
.yb-regler__wert {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.yb-regler input[type="range"] {
  width: 100%;
  height: 44px;                              /* Beruehrungsziel */
  margin: 0;
  background: transparent;
  accent-color: var(--yb-amber);
  cursor: pointer;
}


/* ── E20 Vergleichstafel ───────────────────────────────────────────────
   Drei bis vier Spalten, jede Zeile aufklappbar. Unter bp.md stapeln die
   Werte mit ihrem Spaltennamen (BUILD_SPEC 5.8).                       */

.yb-tafel {
  border: 1px solid var(--yb-rahmen);
  border-radius: var(--yb-r-card);
  overflow: hidden;
  background: var(--yb-karte-grund);
}

.yb-tafel__kopf {
  display: grid;
  gap: var(--yb-s4);
  padding: var(--yb-s4) var(--yb-s6);
  background: var(--yb-ink);
  color: var(--yb-on-dark);
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.yb-tafel__zeile {
  border-top: 1px solid var(--yb-rahmen);
}
.yb-tafel__zeile:first-child { border-top: 0; }

.yb-tafel__knopf {
  display: grid;
  gap: var(--yb-s4);
  width: 100%;
  padding: var(--yb-s4) var(--yb-s6);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-items: start;
  transition: background var(--yb-t-farbe);
}
.yb-tafel__knopf:hover { background: rgba(0,0,0,.03); }
.yb-tafel__knopf[aria-expanded="true"] { background: rgba(242,178,62,.07); }

.yb-tafel__kriterium {
  display: flex;
  align-items: baseline;
  gap: var(--yb-s2);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
}
.yb-tafel__pfeil {
  /* Amber misst auf weisser Tafel 1,87:1. Der Pfeil ist das einzige
     sichtbare Zeichen fuer offen/zu und muss lesbar sein — deshalb die
     flaechenabhaengige Farbe. */
  color: var(--yb-eyebrow-farbe);
  font-weight: 600;
  transition: transform var(--yb-t-weg);
  display: inline-block;
}
.yb-tafel__knopf[aria-expanded="true"] .yb-tafel__pfeil { transform: rotate(90deg); }

.yb-tafel__wert {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--yb-gedaempft);
}
.yb-tafel__wert--uns { color: var(--yb-vordergrund); font-weight: 500; }

.yb-tafel__spalte {
  display: none;
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yb-gedaempft);
  margin-bottom: 3px;
}

.yb-tafel__grund {
  padding: 0 var(--yb-s6);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--yb-t-klapp);
}
.yb-tafel__knopf[aria-expanded="true"] + .yb-tafel__grund { grid-template-rows: 1fr; }
.yb-tafel__grund > div { overflow: hidden; }
.yb-tafel__knopf[aria-expanded="true"] + .yb-tafel__grund > div { padding-bottom: var(--yb-s5); }

/* Unter bp.md: eine Spalte, jeder Wert mit seinem Spaltennamen. */
@media (max-width: 900px) {
  .yb-tafel__kopf { display: none; }
  .yb-tafel__knopf { grid-template-columns: 1fr !important; gap: var(--yb-s3); }
  .yb-tafel__spalte { display: block; }
}


/* ── E21 Bahn ──────────────────────────────────────────────────────────
   Ein Punkt laeuft von links nach rechts: "Link geteilt → Gutschrift"
   (BUILD_SPEC 5.9, /partner). Einzige laufende Bewegung ausserhalb des
   Booth-Attract — sie zeigt einen Vorgang, nicht Dekoration, und steht
   bei prefers-reduced-motion still (Regel in tokens.css).            */

.yb-bahn {
  position: relative;
  height: 4px;
  border-radius: var(--yb-r-full);
  background: var(--yb-rahmen);
  overflow: visible;
}
.yb-sec--ink .yb-bahn { background: var(--yb-line-dark); }

.yb-bahn__punkt {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: var(--yb-r-full);
  background: var(--yb-amber);
  box-shadow: var(--yb-schatten-cta);
}
.yb-js .yb-bahn__punkt { animation: yb-bahn 3.2s cubic-bezier(.22,.61,.36,1) infinite; }

@keyframes yb-bahn {
  0%        { left: 0;              opacity: 0; }
  8%        { opacity: 1; }
  88%       { opacity: 1; }
  100%      { left: calc(100% - 12px); opacity: 0; }
}


/* ── E22 Saeulen ───────────────────────────────────────────────────────
   Balkendiagramm, das beim Sichtwerden gestaffelt waechst (5.9 /partner
   und /team). Die Hoehe kommt je Saeule aus --h.                      */

.yb-saeulen {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 88px;
}
.yb-saeule {
  flex: 1;
  display: block;
  border-radius: 3px 3px 0 0;
  background: rgba(242,178,62,.45);
  height: var(--h, 4%);
  transition: height var(--yb-t-klapp);
}
.yb-saeule--voll { background: var(--yb-amber); }

.yb-saeulen--beschriftet { align-items: stretch; height: auto; }
.yb-saeulen--beschriftet .yb-saeulen__spalte {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.yb-saeulen__wert {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.yb-saeulen__jahr {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .08em;
  text-align: center;
  color: var(--yb-gedaempft);
}
.yb-saeulen--beschriftet .yb-saeule { height: var(--h, 4%); min-height: 4px; }


/* ── E23 Schreibmaschine ───────────────────────────────────────────────
   Standortzeile auf /team: Text laeuft ein, dahinter ein pulsierender
   Punkt. Ohne Skript steht der vollstaendige Text da (Ruhezustand ist
   der sichtbare Zustand).                                             */

.yb-tippen { display: inline-flex; align-items: center; gap: 8px; }
.yb-tippen__punkt {
  width: 8px; height: 8px;
  border-radius: var(--yb-r-full);
  background: var(--yb-amber);
  flex: none;
}
.yb-js .yb-tippen__punkt { animation: yb-puls 1.1s ease-in-out infinite; }


/* ── E24 Haken ─────────────────────────────────────────────────────────
   Bestaetigung nach dem Absenden (BUILD_SPEC 5.9, /kontakt). Der Haken
   zeichnet sich einmal. Ohne Skript steht er fertig da.               */

.yb-haken {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--yb-r-full);
  background: var(--yb-amber);
  position: relative;
}
.yb-haken::after {
  content: '';
  position: absolute;
  left: 15px; top: 11px;
  width: 10px; height: 18px;
  border: 3px solid var(--yb-amber-ink);
  border-top: 0; border-left: 0;
  transform: rotate(42deg);
  transform-origin: center;
}
.yb-js .yb-haken::after { animation: yb-haken .38s cubic-bezier(.22,.61,.36,1) both; }

@keyframes yb-haken {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}