/* ==========================================================================
   PORTIERT AUS handoff/web/css/components.css am 12.09.2026 — INHALT UNVERAENDERT.
   Die Klassennamen sind der Vertrag aus handoff/CONTRACT.md. Lanes B/C/D
   schreiben Block-Markup GEGEN GENAU DIESE NAMEN — Umbenennen bricht sie still.
   SPRiCH — components.css   (Agent A · Fundament)
   Jede Klasse aus dem Klassen-Vertrag. Laedt nach base.css, vor <seite>.css.
   Alle Bausteine lesen die semantischen Variablen aus base.css
   (--surface, --line, --fg, --fg-strong, --fg-muted, --ok, --bg),
   damit sie in .section--paper automatisch auf hellen Grund kippen.
   ========================================================================== */

:root {
  --card-pad: clamp(20px, 2vw, 28px);
  --ring-strong: inset 0 0 0 999px rgba(255, 255, 255, .10);
}

/* ==========================================================================
   1. MARKE — Wortzeichen
   Geometrie gemessen aus out/review2/v2_3-03-Wortzeichen.png:
   Versalhoehe 89 px, Punkt 22 x 22 px, Punktunterkante 76 px ueber der
   Grundlinie, Punktmitte exakt auf der Mitte des i-Stamms.
   In em (Inter Versalhoehe 0.7275 em, also Schriftgrad = 89/0.7275 = 122.3 px):
     Punktdurchmesser 22/122.3 = 0.18 em  (= genau die Stammbreite des i)
     Punktunterkante   76/122.3 = 0.62 em ueber der Grundlinie
     optische Luft ueber der x-Hoehe (0.546 em) = 0.075 em
   Der Punkt haengt an .brandmark__i (position:relative, inline). Dessen
   Kastenunterkante liegt Grundlinie + Unterlaenge; die betraegt bei Inter
   wie bei allen System-Fallbacks 0.24-0.25 em, deshalb ist der Anker stabil.
   ========================================================================== */
.brandmark {
  --bm-dot-size: .18em;   /* Durchmesser = Stammbreite des i        */
  --bm-dot-rise: .62em;   /* Unterkante Punkt ueber der Grundlinie  */
  --bm-descent:  .245em;  /* Unterlaenge Inter / System-Fallback    */
  --bm-dot-color: var(--c-red);

  display: inline-block;
  font-family: var(--f-ui);
  font-weight: 900;
  font-size: 30px;                 /* ~107 px Breite, ueber dem Minimum 88 px */
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fg-strong);
  white-space: nowrap;
  font-synthesis: none;
  font-style: normal;
  text-transform: none;
}

.brandmark__i {
  position: relative;
  font-style: normal;
}

.brandmark__dot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bm-dot-rise) + var(--bm-descent));
  width: var(--bm-dot-size);
  height: var(--bm-dot-size);
  margin-left: calc(var(--bm-dot-size) / -2);   /* mittig, ohne transform */
  border-radius: 50%;
  background: var(--bm-dot-color);
  pointer-events: none;
}

.brandmark--sm { font-size: 25px; }   /* = 88 px Breite, digitale Mindestgroesse */
.brandmark--lg { font-size: 48px; }

/* Weiss auf ZIS-Rot: der Punkt wird weiss. */
.brandmark--on-red {
  color: var(--c-white);
  --bm-dot-color: var(--c-white);
}

/* Schutzraum = 2 x Punktdurchmesser ringsum. */
.brandmark--clear { padding: .36em; }

/* ==========================================================================
   2. CHROME — Kopfleiste, Eilmeldungsleiste, Fuss
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: var(--topbar-h);
  background: var(--c-blue-900);
  color: var(--c-light);
}

/* Funktioniert mit <header class="topbar"><div class="wrap"> ... und ohne. */
.topbar > .wrap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--topbar-h);
}
.topbar:not(:has(> .wrap)) {
  gap: var(--s3);
  padding-inline: var(--gutter);
}

.topbar .brandmark { color: var(--c-white); flex: none; }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-inline: auto;
}

.topbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--c-light);
  white-space: nowrap;
  transition: color .16s ease;
}
.topbar__link:hover { color: var(--c-white); }

.topbar__link.is-active { color: var(--c-white); font-weight: 600; }
.topbar__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-orange);
}

.topbar__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.topbar__lang a,
.topbar__lang button { color: inherit; transition: color .16s ease; }
.topbar__lang a:hover,
.topbar__lang button:hover { color: var(--c-white); }
.topbar__lang .is-active,
.topbar__lang [aria-current] { color: var(--c-white); }

.topbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-orange);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .16s ease;
}
.topbar__cta:hover { box-shadow: var(--ring-strong); }

/* Burger — drei leere <span>. Nur unter 900 px sichtbar. */
.topbar__burger {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: var(--r-control);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.topbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-white);
  transition: transform .22s ease, opacity .16s ease;
}
body[data-nav-open="true"] .topbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body[data-nav-open="true"] .topbar__burger span:nth-child(2) { opacity: 0; }
body[data-nav-open="true"] .topbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* — Eilmeldungsleiste — */
.ticker {
  display: flex;
  align-items: center;
  min-height: var(--ticker-h);
  background: var(--c-red);
  color: var(--c-white);
  overflow: hidden;
}
.ticker > .wrap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--ticker-h);
}
.ticker:not(:has(> .wrap)) {
  gap: var(--s3);
  padding-inline: var(--gutter);
}

.ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-right: var(--s3);
  border-right: 1px solid rgba(255, 255, 255, .3);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-white);
}
.ticker__label .livedot { --dot: var(--c-white); }

.ticker__text {
  min-width: 0;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* — Fuss — */
.footer {
  margin-top: auto;
  background: var(--c-blue-800);
  border-top: 1px solid var(--c-blue-600);
  color: var(--c-light);
  padding-block: var(--s6) var(--s4);
}
.footer .brandmark { color: var(--c-white); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s5) var(--s4);
  align-items: start;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}
.footer__col--brand { flex: 1 1 260px; gap: var(--s2); }

.footer__col > :is(h2, h3, h4, .t-label, .footer__head) {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.333;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 4px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: var(--fs-small);
  color: var(--c-light);
  text-decoration: none;
  transition: color .16s ease;
}
.footer__col a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--c-blue-600);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ==========================================================================
   3. BEDIENELEMENTE
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-strong);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .16s ease, border-color .16s ease, color .16s ease;
}

.btn--primary { background: var(--c-orange); color: var(--c-ink); }
.btn--primary:hover { box-shadow: var(--ring-strong); }

.btn--ghost { background: transparent; border-color: var(--fg-muted); color: var(--fg-strong); }
.btn--ghost:hover { border-color: var(--fg-strong); box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .06); }
.section--paper .btn--ghost:hover,
.on-paper .btn--ghost:hover { box-shadow: inset 0 0 0 999px rgba(16, 20, 28, .05); }

.btn--danger { background: var(--c-red); color: var(--c-white); }
.btn--danger:hover { box-shadow: var(--ring-strong); }

.btn--disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--surface);
  border-color: transparent;
  color: var(--fg-muted);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.btn--lg { min-height: 56px; padding: 0 var(--s4); font-size: 17px; }
.btn--block { display: flex; width: 100%; }

/* ── Mehrsprachigkeit: eine Schaltflaechen-Beschriftung ist UEBERSETZTER TEXT ──
   Die deutsche Beschriftung ist die KUERZESTE der drei. Gemessen am 23.09.2026
   bei 360px Fensterbreite, Spaltenbreite 320px:

       DE  „Kostenlose Schnupperstunde buchen"              347px
       UA  „Записатися на безкоштовне пробне заняття"       407px

   `white-space: nowrap` oben plus die Flex-Vorgabe `min-width: auto`
   verhinderten beides — Umbrechen und Schrumpfen. Die Schaltflaeche wurde
   breiter als ihre Spalte, und `body { overflow-x: clip }` hat sie dann
   ABGESCHNITTEN: die Seite scrollt nicht seitwaerts (gemessen: scrollTo(99999,0)
   bewegt 0px), aber das Ende der Beschriftung war auf jedem Handy unsichtbar.
   Deutsch war mit 27px Ueberhang schon betroffen, Ukrainisch mit 87px.

   Eine Schaltflaeche, die die ganze Zeile einnimmt, darf umbrechen — sie kann
   dabei nicht mit einem Nachbarn kollidieren. Eine Schaltflaeche im Fliesstext
   behaelt nowrap und darf stattdessen schrumpfen. */
.btn {
  min-width: 0;   /* Flex-/Grid-Kinder schrumpfen sonst nie unter ihren Inhalt. */
  max-width: 100%;
}
.btn--block,
.l-hero__actions > .btn,
.sp-nav__cta,
.sp-stickycta .btn {
  white-space: normal;
  line-height: 1.2;
  padding-block: 10px;   /* min-height traegt eine Zeile; zwei brauchen Luft. */
  hyphens: auto;
}

/* — Eingabefelder — */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field__label {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--fg-muted);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  color: var(--fg-strong);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease;
  appearance: none;
}
textarea.field__input { min-height: 120px; resize: vertical; }

.field__input::placeholder { color: var(--fg-muted); opacity: 1; }

.field__input:hover { border-color: var(--fg-muted); }

.field__input:focus-visible,
.field__input.is-focus,
.field.is-focus .field__input { border-color: var(--c-orange); }
.field__input.is-focus,
.field.is-focus .field__input { box-shadow: 0 0 0 1px var(--c-orange); }

.field__input.is-error,
.field.is-error .field__input { border-color: var(--c-red); }
.field__input.is-error::placeholder,
.field.is-error .field__input::placeholder { color: var(--c-red); opacity: .95; }
.field.is-error .field__label { color: var(--c-red); }

/* — Reiter — */
.tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-control) + 5px);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
/* Tippziel auf 44 px, ohne die gezeichnete Hoehe zu veraendern. */
.tab::after { content: ""; position: absolute; inset: -2px 0; }

.tab:hover { color: var(--fg-strong); }

.tab--active,
.tab[aria-selected="true"] { background: var(--c-orange); color: var(--c-ink); }

/* — Auswahlchips — */
.choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  color: var(--fg);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.choice:hover { border-color: var(--fg-muted); color: var(--fg-strong); }

.choice--active,
.choice[aria-pressed="true"],
.choice[aria-checked="true"],
.choice:has(input:checked) {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-ink);
}

/* ==========================================================================
   4. SIGNALE
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.badge--red     { background: var(--c-red);    color: var(--c-white); }
.badge--green   { background: var(--c-green);  color: var(--c-ink); }
.badge--orange  { background: var(--c-orange); color: var(--c-ink); }
/* --line (Blau 600) statt --surface: neutrale Badges sitzen oft AUF einer
   .card (= --surface) und waeren sonst unsichtbar. Entspricht dem Artboard. */
.badge--neutral { background: var(--line);     color: var(--fg); border-color: transparent; }

/* Rot mit eingebautem weissem Punkt — "● EILMELDUNG". */
.badge--live { background: var(--c-red); color: var(--c-white); }
.badge--live::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
/* Falls jemand zusaetzlich einen .livedot setzt: keinen zweiten Punkt zeichnen. */
.badge--live:has(.livedot)::before { display: none; }
.badge--red .livedot,
.badge--live .livedot { --dot: var(--c-white); }
.badge--green .livedot,
.badge--orange .livedot { --dot: var(--c-ink); }

/* — Live-Punkt — */
.livedot {
  --dot: var(--c-red);
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  vertical-align: middle;
}

.livedot--green  { --dot: var(--c-green); }
.livedot--muted  { --dot: var(--fg-muted); }
.livedot--white  { --dot: var(--c-white); }
.livedot--orange { --dot: var(--c-orange); }

.livedot--ring {
  box-shadow: 0 0 0 4px rgba(208, 28, 32, .24);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 26%, transparent);
  animation: sprich-pulse 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes sprich-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--dot) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--dot) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--dot) 0%,  transparent); }
}

/* — Kicker — */
.kicker {
  display: block;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.333;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  /* Semantisch, nicht roh: kippt mit der Sektion (siehe base.css). */
  color: var(--kicker, var(--c-red));
}
.kicker:has(.livedot) { display: inline-flex; align-items: center; gap: 8px; }

.kicker--orange { color: var(--c-orange); }
.kicker--green  { color: var(--ok); }

/* ==========================================================================
   5. BLOECKE
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  color: var(--fg);
  min-width: 0;
}

/* Auch ohne .card verwendbar — laesst sich auf .fact, .slot, .step ... legen. */
.card--outline-orange { border-color: var(--c-orange); }
.card--outline-green  { border-color: var(--ok); }
.card--outline-red    { border-color: var(--c-red); }
.card--flat           { border-color: transparent; }

/* — Faktenkarte — */
.fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  min-width: 0;
}
.fact__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--c-orange);
}
.fact__label {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg);
}

/* — Sprechzeit-Balken · der Kerngraph —
   Spur --c-blue-600, Vergleichsbalken --c-muted, SPRiCH-Balken ZIS-Orange.
   Die feste Wertspalte haelt beide Spuren exakt gleich lang.
   Breite kommt aus style="--pct: 22". */
.speakbar {
  --sb-value-w: 88px;
  --sb-track-h: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  min-width: 0;
}
.speakbar > :is(h2, h3, h4, .speakbar__title) {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-strong);
}
.speakbar > :is(p, .speakbar__note):last-child {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-muted);
}

.speakbar__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sb-value-w);
  grid-template-areas:
    "label label"
    "track value";
  column-gap: var(--s3);
  row-gap: 10px;
  align-items: center;
}

.speakbar__label {
  grid-area: label;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--fg);
}

.speakbar__track {
  grid-area: track;
  height: var(--sb-track-h);
  border-radius: var(--r-pill);
  background: var(--c-blue-600);
  overflow: hidden;
}
.section--paper .speakbar__track,
.on-paper .speakbar__track { background: var(--line); }

.speakbar__fill {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--c-orange);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.speakbar__fill--muted { background: var(--c-muted); }

.speakbar__value {
  grid-area: value;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--c-orange);
  white-space: nowrap;
}
.speakbar__value--muted { color: var(--fg-muted); }

/* Bequemlichkeit: faerbt Balken und Wert in einem Rutsch. */
.speakbar__row--muted .speakbar__fill  { background: var(--c-muted); }
.speakbar__row--muted .speakbar__value { color: var(--fg-muted); }

/* — Vorher / Nachher —
   .ba__arrow wird mit Rand-Offsets zentriert, NICHT mit transform.
   transform bleibt damit frei fuer die Seiten-CSS (Drehung auf Mobil). */
.ba {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.ba__item {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  min-width: 0;
}

.ba__media {
  position: relative;
  border-radius: var(--r-image);
  overflow: hidden;
  background: var(--surface-2);
}
.ba__media > img { width: 100%; height: auto; display: block; }
.ba__media > .badge { position: absolute; top: var(--s2); left: var(--s2); z-index: 1; }

.ba__caption { display: flex; flex-direction: column; gap: 6px; }
.ba__caption > :last-child {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-body-l);
  line-height: 1.35;
  color: var(--fg-strong);
}

.ba__arrow {
  position: absolute;
  left: 50%;
  top: var(--ba-arrow-y, 30%);
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}

/* — Stimme / Review — */
.review {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  min-width: 0;
}

/* Nimmt wortwoertlich "●●●●●" entgegen. */
.review__stars {
  color: var(--c-orange);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .3em;
  white-space: nowrap;
}

.review__quote {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-strong);
}

.review__who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s1);
  font-family: var(--f-display);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--fg-muted);
}
.review__who > :first-child { color: var(--c-orange); }

/* — Termin-Kachel — */
.slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.slot:hover { border-color: var(--c-orange); }

.slot__day {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--fg-strong);
}
.slot__date {
  font-family: var(--f-display);
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--fg-muted);
}
.slot__time {
  margin-top: 8px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--fg-strong);
}
.slot__free {
  margin-top: 6px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ok);
}

.slot--active,
.slot[aria-checked="true"],
.slot[aria-pressed="true"],
.slot:has(input:checked) {
  border-color: var(--c-orange);
  box-shadow: inset 0 0 0 1px var(--c-orange);
}

.slot--full {
  cursor: not-allowed;
  border-color: var(--line);
  opacity: .6;
}
.slot--full:hover { border-color: var(--line); }
.slot--full .slot__day,
.slot--full .slot__time,
.slot--full .slot__free { color: var(--fg-muted); }

/* Waagrechte Variante (Buchungsliste, Mobil). */
.slot--row {
  flex-direction: row;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
}
.slot--row .slot__time { margin: 0; font-size: 18px; font-weight: 700; }
.slot--row .slot__free { margin: 0 0 0 auto; }

/* — Schritt — */
.step {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  min-width: 0;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

/* — Tabellenzeile — */
.tablerow {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s1) var(--s3);
  min-height: 48px;
  padding: 12px var(--s3);
  background: var(--surface);
  border-radius: var(--r-control);
  color: var(--fg);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.tablerow + .tablerow { margin-top: 6px; }

.tablerow > :first-child {
  font-family: var(--f-ui);
  font-weight: 600;
  color: var(--fg-strong);
  white-space: nowrap;
}
.tablerow > :last-child {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* — Fortschritt — Breite aus style="--pct: 30" */
.progress {
  width: 100%;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--ok);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

/* — Avatar — */
.avatar {
  --avatar-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-blue-600);
  color: var(--c-white);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(var(--avatar-size) * .34);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --avatar-size: 32px; }
.avatar--lg { --avatar-size: 96px; }

/* ==========================================================================
   6. HALTEPUNKTE  1200 / 900 / 640
   ========================================================================== */
@media (max-width: 1200px) {
  .topbar__nav { gap: var(--s3); }
}

@media (max-width: 900px) {
  /* Navigation wird zur Schublade unter der Kopfleiste. */
  .topbar__burger { display: inline-flex; }

  .topbar__nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--topbar-h);
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s1) var(--gutter) var(--s3);
    max-height: calc(100dvh - var(--topbar-h));
    overflow-y: auto;
    background: var(--c-blue-800);
    border-bottom: 1px solid var(--c-blue-600);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  body[data-nav-open="true"] .topbar__nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  body[data-nav-open="true"] { overflow: hidden; }

  .topbar__link {
    width: 100%;
    min-height: 52px;
    font-size: 17px;
    border-bottom: 1px solid var(--c-blue-600);
  }
  .topbar__link.is-active::after { left: 0; right: auto; width: 20px; bottom: 14px; }

  .topbar__cta { order: 3; }

  .ba { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .ba__arrow { top: 50%; }

  .footer__cols { gap: var(--s4); }
}

@media (max-width: 640px) {
  .topbar__lang { display: none; }
  .topbar__cta { padding: 0 var(--s2); font-size: 14px; }

  .speakbar { --sb-value-w: 66px; --sb-track-h: 16px; }
  .speakbar__value { font-size: 18px; }

  .slot__time { font-size: 28px; }

  .tablerow {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }
  .tablerow > :nth-child(2) { grid-column: 1 / -1; order: 3; }

  .btn { width: auto; }
  .btn--lg { min-height: 50px; padding: 0 var(--s3); font-size: 16px; }

  .avatar--lg { --avatar-size: 72px; }
}