/* ==========================================================================
   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%; }

/* — 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; }
}