/* ═══════════════════════════════════════════════════════════════════
   /seminare/<slug> — Kursdetail und Buchungs-Assistent
   Register wie der Katalog (DESIGN §6): Weiß, Haarlinien, ein Cream-
   Feld für den Assistenten. Wiederverwendet: .pill .h1 .h2 .chip
   .field .opt .btn .ticks .tag--demo .sec-head .page-head
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopf ─────────────────────────────────────────────────────────── */
.sd-back{margin-bottom:var(--s-6);font-size:var(--t-sm);font-weight:var(--fw-strong)}
.sd-back a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--c-muted);
  transition:color var(--dur-ui)}
.sd-back a:hover{color:var(--c-signal)}
.sd-back__arrow{width:1.1rem;height:1.1rem;transition:transform var(--dur-ui) var(--ease)}
.sd-back a:hover .sd-back__arrow{transform:translateX(-3px)}
.sd-eyebrow__sep{margin-inline:.5em;color:var(--c-muted)}
.sd-title{max-width:20ch}

.sd-facts{display:flex;flex-wrap:wrap;gap:var(--s-10);margin-top:var(--s-8);
  padding-top:var(--s-6);border-top:1px solid var(--c-line)}
.sd-facts__k{display:block;font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-muted)}
.sd-facts__v{display:block;margin-top:.2rem;font-size:var(--t-md);font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums}

/* ── Text + Buchungskarte ─────────────────────────────────────────── */
.sd-body{padding-block:var(--s-12) var(--section-y)}
/* 2026-08-17 (Simon): die Textspalte war `minmax(0,1fr)` und damit so
   breit wie der Rest der Zeile — der Text darin hört aber bei 68ch auf.
   Zwischen Textende und Buchungskarte standen deshalb ~460px Leere (nach
   der Shell-Verengung noch ~270px), und das Auge musste diese Strecke bei
   jedem Blickwechsel überspringen. Jetzt begrenzt die SPALTE auf dasselbe
   Mass, und `justify-content:start` packt beide nach links — bündig unter
   dem Seitenkopf, die Restluft steht rechts, wo nicht gelesen wird.
   (Zentrieren wäre die Alternative gewesen, hätte aber H1 und Fliesstext
   gegeneinander verschoben.) */
.sd-grid{display:grid;grid-template-columns:minmax(0,68ch) 26rem;gap:var(--s-16);
  align-items:start;justify-content:start}
.sd-text{max-width:68ch}
.sd-lead{font-size:var(--t-md);line-height:1.6}
.sd-block{margin-top:var(--s-10)}
.sd-h2{font-size:var(--t-lg);font-weight:var(--fw-title);letter-spacing:-.02em;
  margin-bottom:var(--s-3)}
.sd-block p{color:var(--c-muted)}
.sd-venue strong{color:var(--c-ink)}
.sd-venue__note{margin-top:var(--s-3);font-size:var(--t-sm)}
.sd-venue__links{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-3);
  font-size:var(--t-sm);font-weight:var(--fw-strong)}
.sd-venue__links a{color:var(--c-signal);border-bottom:1px solid transparent;
  transition:border-color var(--dur-ui)}
.sd-venue__links a:hover{border-color:var(--c-signal)}

/* ── Akkordeon (native <details>) ─────────────────────────────────── */
.sd-acc{margin-top:var(--s-12);border-top:1px solid var(--c-line)}
.sd-acc__item{border-bottom:1px solid var(--c-line)}
.sd-acc__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;font-size:var(--t-md);font-weight:var(--fw-title);cursor:pointer;
  list-style:none;transition:color var(--dur-ui)}
.sd-acc__sum::-webkit-details-marker{display:none}
.sd-acc__sum:hover{color:var(--c-signal)}
.sd-acc__ic{flex:none;width:1.4rem;height:1.4rem;color:var(--c-signal);
  transition:transform var(--dur-ui) var(--ease)}
.sd-acc__item[open] .sd-acc__ic{transform:rotate(180deg)}
.sd-acc__body{padding-bottom:var(--s-5);font-size:var(--t-sm);color:var(--c-muted);
  max-width:64ch}

/* ── Buchungskarte, klebend ───────────────────────────────────────── */
/* Sticky ist hier richtig — anders als beim Gruppen-Verzeichnis
   (DESIGN §13, 16.08.): die linke Spalte ist deutlich länger als die
   Karte, es gibt also tatsächlich etwas vorbeizuscrollen. */
.sd-book{position:sticky;top:6.5rem}
.sd-book__in{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-8)}
.sd-book .pill{margin-bottom:var(--s-5)}
.sd-price{width:100%;border-collapse:collapse}
.sd-price th{text-align:left;font-weight:var(--fw-body);font-size:var(--t-sm);color:var(--c-muted);
  padding:var(--s-3) 0;vertical-align:top}
.sd-price td{text-align:right;font-size:var(--t-sm);font-variant-numeric:tabular-nums;
  padding:var(--s-3) 0;white-space:nowrap}
.sd-price tr + tr th,.sd-price tr + tr td{border-top:1px solid var(--c-line)}
.sd-price__hint{display:block;margin-top:.2rem;font-size:var(--t-xs);color:var(--c-muted);
  max-width:22ch}
.sd-price .is-total th{color:var(--c-ink);font-weight:var(--fw-title);font-size:var(--t-md)}
.sd-price .is-total td{font-weight:var(--fw-title);font-size:var(--t-md)}
.sd-book__vat{margin-top:var(--s-2);font-size:var(--t-xs);color:var(--c-muted)}
.sd-book__incl{margin-top:var(--s-6)}
.sd-book__cta{margin-top:var(--s-8)}
.sd-book__open{font-size:var(--t-md);font-weight:var(--fw-title)}
.sd-book__note{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--c-muted)}
.sd-book__seats{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  margin-top:var(--s-5);font-size:var(--t-xs);color:var(--c-muted)}
.sd-book__seats.is-scarce{color:var(--c-signal);font-weight:var(--fw-strong)}
.sd-book__seats.is-scarce .semcard__dot{background:var(--c-signal)}
/* .semcard__dot lebt in seminare.css, die hier nicht geladen ist. */
.semcard__dot{flex:none;width:.45rem;height:.45rem;border-radius:var(--r-pill);
  background:var(--c-muted-d)}

/* ═══ BUCHUNGS-ASSISTENT — im Modal ═══════════════════════════════════
   Seit 17.08. läuft die Anmeldung in einem Dialog (Komponente .modal in
   components.css) statt in einem Cream-Feld unter der Seite. Damit ist
   das Cream-Feld hier weg: die Betonung trägt der abgedunkelte Grund,
   nicht eine zweite Fläche (DESIGN §6).

   Aufbau im Dialog: stehender Kopf · Schiene links (Schritte, Summe,
   Entwurfshilfe) · scrollende Formularspalte rechts · stehende
   Fußleiste. Nur die Mitte bewegt sich — die Summe bleibt im Blick,
   wenn ein Teilnehmer dazukommt.

   ACHTUNG, seit 2026-08-17 geteilt: die Hülle des Assistenten (Spalten,
   Schiene, Stepper, Panels, Prüfen, Erfolgsbildschirm, Fassung ohne JS,
   Druck) steht in components.css — der Bewerbungsfluss der Phase 4
   benutzt dieselben Klassen (DESIGN §9). Hier bleibt nur, was NUR die
   Seminaranmeldung braucht: die mitlaufende Summe, die Teilnehmerzahl,
   die Teilnehmerblöcke, der Brandschutzpass und die Portal-Brücke.
   ═══════════════════════════════════════════════════════════════════ */

/* Zeilenmaße, die nur die Teilnehmer- und Rechnungsfelder brauchen
   (die Namenszeile --name steht bei der Komponente, sie trägt auch die
   Bewerbung). */
.wiz__row--plz{grid-template-columns:8rem minmax(0,1fr)}
.wiz__row--adr{grid-template-columns:minmax(0,1fr) 7rem 10rem}
.wiz__add{margin-top:var(--s-5)}

/* ── Schnellwahl der Teilnehmerzahl ───────────────────────────────── */
.wcount{margin-bottom:var(--s-6);padding-bottom:var(--s-6);
  border-bottom:1px solid var(--c-line)}
.wcount[hidden]{display:none}
.wcount__label{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-3)}
.wcount__opts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
/* 2,6rem = 41,6px, über der 40px-Schwelle (DESIGN §12). Zustand wie
   überall: Haarlinie → rot umrandet (Hover) → rot gefüllt (gewählt). */
.wcount__btn{width:2.6rem;height:2.6rem;border-radius:var(--r-pill);
  border:1px solid var(--c-field);font-size:var(--t-sm);font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-ui),background var(--dur-ui),color var(--dur-ui)}
.wcount__btn:hover{border-color:var(--c-signal);color:var(--c-signal)}
.wcount__btn.is-active{background:var(--c-signal);border-color:transparent;color:#fff}
/* Freie Zahl daneben. Sie steht nur da, wenn mehr Plätze frei sind, als
   die Schaltflächen abdecken — sonst wäre sie ein Feld ohne Spielraum. */
.wcount__or{font-size:var(--t-xs);color:var(--c-muted);margin-inline:var(--s-1)}
.wcount__free{display:block}
.wcount__num{width:4.4rem;height:2.6rem;padding:0 .6rem;text-align:center;
  font:inherit;font-size:var(--t-sm);font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums;color:var(--c-ink);background:var(--c-white);
  border:1px solid var(--c-field);border-radius:var(--r-pill);
  transition:border-color var(--dur-ui)}
.wcount__num:hover{border-color:var(--c-muted)}
/* Die Kante bleibt im Fokus neutral — das Rot gehört dem Fokus-Umriss
   (dieselbe Regel wie bei .field, components.css). */
.wcount__num:focus{border-color:var(--c-muted)}
.wcount__num::placeholder{color:var(--c-muted)}
/* Die Systempfeile sind in 4,4rem nicht bedienbar und stehen dem
   getippten Wert im Weg; min/max und die Zifferntastatur bleiben. */
.wcount__num{appearance:textfield;-moz-appearance:textfield}
.wcount__num::-webkit-outer-spin-button,
.wcount__num::-webkit-inner-spin-button{appearance:none;margin:0}
.wcount__hint{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
  margin-top:var(--s-3);font-size:var(--t-xs);color:var(--c-muted)}
.wcount__hint[hidden]{display:none}

/* ── Teilnehmerblock ──────────────────────────────────────────────── */
.wperson + .wperson{margin-top:var(--s-6);padding-top:var(--s-6);
  border-top:1px solid var(--c-line)}
.wperson__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);margin-bottom:var(--s-5)}
.wperson__title{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-signal)}
.wperson__remove{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);
  border-bottom:1px solid transparent;transition:color var(--dur-ui),border-color var(--dur-ui)}
.wperson__remove:hover{color:var(--c-signal);border-color:var(--c-signal)}
.wperson__remove[hidden]{display:none}
.wpass__fee{color:var(--c-signal);font-weight:var(--fw-strong);white-space:nowrap}
.wpass__note{margin-top:var(--s-2);font-size:var(--t-xs);color:var(--c-muted);
  max-width:60ch}
.wpass__note[hidden]{display:none}

/* ── Prüfen ───────────────────────────────────────────────────────── */
/* .wiz__review, .wiz-rev__* und .wiz__terms stehen in components.css.
   Hier nur der Stornotext, den es allein bei der Anmeldung gibt. */
.wiz__storno{font-size:var(--t-xs);color:var(--c-muted);margin-bottom:var(--s-4);
  max-width:70ch}

/* ── Mitlaufende Summe ────────────────────────────────────────────── */
/* Keine eigene Karte mehr: sie steht schon in der Schiene, eine Box in
   der Box wäre eine Betonung zu viel (DESIGN §6). `margin-top:auto`
   schiebt sie ans untere Ende — die Schritte oben, das Geld unten.
   Kein `sticky`: die Schiene scrollt in aller Regel gar nicht. */
.wiz__sum{margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--c-line)}
.wiz__sumhead{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-signal);margin-bottom:var(--s-4)}
.wiz__sumtable{width:100%;border-collapse:collapse}
.wiz__sumtable td{font-size:var(--t-sm);padding:var(--s-2) 0;vertical-align:top}
.wiz__sumtable td.is-num{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.wiz__sumtable .is-total td{border-top:1px solid var(--c-line);padding-top:var(--s-3);
  font-weight:var(--fw-title);font-size:var(--t-md)}
.wiz__sumnote{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--c-muted)}

/* ── Fußleiste ────────────────────────────────────────────────────── */
.wiz__navsum{margin-right:auto;display:flex;align-items:baseline;gap:var(--s-2);
  font-size:var(--t-md);font-weight:var(--fw-title);
  font-variant-numeric:tabular-nums}
.wiz__navvat{font-size:var(--t-xs);font-weight:var(--fw-body);color:var(--c-muted)}

/* ── Erfolgsbildschirm ────────────────────────────────────────────── */
/* Die Hülle (.wiz__done, __donemark, __donetitle, __doneref, __donebody,
   __donenext, __donedraft) steht in components.css. Hier nur die
   Brücke zum Kundenportal — die gibt es allein am Ende einer Anmeldung. */
/* Brücke zum Kundenportal (Phase 6). Weiß mit Haarlinie, keine getönte
   Fläche (DESIGN §2/§6) — sie ist ein Ausblick, keine Warnung. */
.wiz__doneportal{display:flex;align-items:flex-start;gap:var(--s-4);
  margin-top:var(--s-5);padding:var(--s-5);border:1px solid var(--c-line);
  border-radius:var(--r-card);font-size:var(--t-sm);color:var(--c-muted);
  max-width:64ch}
.wiz__doneportal-ic{flex:none;width:1.6rem;height:1.6rem;color:var(--c-signal)}
.wiz__doneportal a{color:var(--c-signal);font-weight:var(--fw-strong);
  border-bottom:1px solid transparent;transition:border-color var(--dur-ui)}
.wiz__doneportal a:hover{border-color:var(--c-signal)}

/* ── Responsive ───────────────────────────────────────────────────── */
/* Die Umbrüche der Assistenten-Hülle (Schiene waagrecht, Dialog
   vollflächig am Handy) stehen bei der Komponente in components.css.
   Hier nur, was seminarspezifisch mitziehen muss. */
@media (max-width:1140px){
  .sd-grid{grid-template-columns:minmax(0,1fr) 22rem;gap:var(--s-10)}
  /* Die Summe fällt aus der waagrechten Schiene — sie steht in der
     Fußleiste ohnehin als Betrag. */
  .wiz__sum{display:none}
}
@media (max-width:900px){
  .sd-grid{grid-template-columns:1fr;gap:var(--s-10)}
  .sd-book{position:static}
  .sd-facts{gap:var(--s-8)}
}
@media (max-width:760px){
  .wiz__row--plz,.wiz__row--adr{grid-template-columns:1fr}
  .wiz__navsum{flex:1 1 100%;margin-bottom:var(--s-2)}
}