/* ============================================================================
   Deutschkurse — Review-Build. Kanon D-66 (vier Seiten), D-67 (Anmeldestatus).
   ============================================================================

   Zwei Dinge stehen hier, die sonst nirgends stehen.

   1. DIE MARKIERUNG IST ROT. Der Bestand kennt drei Zustaende fuer eine
      unsichere Angabe: `data-verify` (echte Angabe, technisch nachzupruefen —
      im Produktionsstand unsichtbar), `ai-unconfirmed` (vom Build ergaenzt,
      gelb) und `conflict` (Geld/Zulassung/Zusage, rot). Fuer diesen
      Review-Build hat der Operator am 11. September 2026 entschieden: JEDE
      Angabe, die nicht von Mundwerk bestaetigt ist, wird rot. Auch die
      `data-verify`-Werte. Begruendung: der Leser dieses Builds ist nicht der
      Kursinteressent, sondern die Person, die bestaetigen soll — und die soll
      nicht zwischen zwei Gelbtoenen unterscheiden muessen.

      Die drei Zustaende bleiben im Markup unterscheidbar (Attribut
      `data-content-status` bzw. `data-verify`), damit Registry und Gate
      weiterarbeiten. Nur die Farbe ist vereinheitlicht; die Kante und das
      Wortlabel trennen sie weiter:

          conflict         durchgezogen   „Konflikt“
          ai-unconfirmed   gestrichelt    „ungeprüft“
          data-verify      gepunktet      „unbestätigt“

      Dies gilt AUSSCHLIESSLICH fuer den Review-Build dieser vier Seiten.
      `assets/css/content-review.css` im Wurzeldemo bleibt unveraendert, und
      04_CONTENT_AND_COMPLIANCE.md §1 gilt fuer den Produktionsstand weiter:
      dort rendert `data-verify` nichts Sichtbares.

   2. Die Komponenten, die es in styles.css nicht gibt: die zwei Kurskarten im
      Hero, der Kursvergleich, die Niveau-Stationen und die Ankerleiste. Alles
      andere benutzt die vorhandenen Klassen (.hero .facts .card .checklist
      .scenarios .timeline .faq .contact-panel .group-list .table-wrap).
   ========================================================================= */

/* ---------------------------------------------------------------- Marker -- */

.cr {
  border-radius: 3px;
  padding: 0 .18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(214, 69, 58, .13);
}

.cr::after {
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .15em;
  white-space: nowrap;
  color: #9C2B20;
  margin-left: .25em;
}

.cr--conflict {
  background: rgba(214, 69, 58, .18);
  border-bottom: 2px solid rgba(160, 40, 30, .8);
}
.cr--conflict::after { content: "Konflikt"; }

.cr--unconfirmed { border-bottom: 2px dashed rgba(180, 55, 45, .75); }
.cr--unconfirmed::after { content: "ungeprüft"; }

.cr--verify {
  background: rgba(214, 69, 58, .09);
  border-bottom: 2px dotted rgba(180, 55, 45, .75);
}
.cr--verify::after { content: "unbestätigt"; }

/* Ein ganzer Block, der unbestaetigt ist — nicht ein Wert darin. Selten:
   nur wo wirklich die Aussage als ganze offen ist. */
.cr-block {
  border-left: 4px solid rgba(180, 55, 45, .8);
  background: rgba(214, 69, 58, .08);
  padding: var(--s-4, 1rem) var(--s-5, 1.25rem);
  border-radius: var(--radius, 8px);
}
.cr-block > .cr-flag {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9C2B20;
  margin-bottom: .35rem;
}

/* Review-Banner. Erklaert die drei Kanten, nicht drei Farben. */
.review-banner {
  border: 1px solid rgba(180, 55, 45, .4);
  border-left: 5px solid rgba(200, 60, 48, .9);
  background: rgba(214, 69, 58, .07);
  border-radius: var(--radius, 8px);
  padding: var(--s-4, 1rem) var(--s-5, 1.25rem);
  margin-block: var(--s-6, 1.5rem);
}
.review-banner b { display: block; margin-bottom: .3rem; }
.review-banner p { margin: 0 0 .35rem; max-width: 80ch; }
.review-banner p:last-child { margin-bottom: 0; }
.review-banner .key {
  display: inline-block;
  min-width: 7.5em;
  font-weight: 600;
  border-bottom: 2px solid rgba(180, 55, 45, .75);
}
.review-banner .key--c { border-bottom-style: solid; }
.review-banner .key--u { border-bottom-style: dashed; }
.review-banner .key--v { border-bottom-style: dotted; }

@media print {
  .cr, .cr-block, .review-banner { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (forced-colors: active) {
  .cr { border-bottom: 2px dashed CanvasText; }
  .cr-block { border-left: 3px solid CanvasText; }
}

/* ----------------------------------------------------------- Ankerleiste -- */

.anchor-nav {
  border-top: 1px solid var(--line, #DCE2E8);
  border-bottom: 1px solid var(--line, #DCE2E8);
  margin-top: var(--s-6, 1.5rem);
  padding-block: var(--s-3, .75rem);
}
.anchor-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}
.anchor-nav a {
  display: inline-block;
  padding: .35rem 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-2, #4A5560);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.anchor-nav a:hover,
.anchor-nav a:focus-visible { color: var(--navy, #003366); border-bottom-color: var(--accent, #2D6FA3); }

/* ------------------------------------------------------ Zwei Kurskarten --- */

.choice-cards {
  display: grid;
  gap: var(--s-4, 1rem);
  grid-template-columns: 1fr;
  margin-top: var(--s-6, 1.5rem);
}
@media (min-width: 720px) { .choice-cards { grid-template-columns: 1fr 1fr; } }

.choice-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--s-5, 1.25rem);
  border: 1px solid var(--line, #DCE2E8);
  border-top: 3px solid var(--accent, #2D6FA3);
  border-radius: var(--radius, 8px);
  background: #fff;
}
.choice-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.choice-card .official { margin: 0; font-size: .875rem; color: var(--ink-3, #6B7580); }
.choice-card p { margin: 0; }
.choice-card .go { margin-top: auto; padding-top: .5rem; }

/* ----------------------------------------------------------- Vergleich ---- */

.compare th { text-align: left; vertical-align: bottom; }
.compare td, .compare th { padding: .6rem .7rem; }
.compare tbody th { font-weight: 700; color: var(--navy, #003366); }

/* ------------------------------------------------------ Niveau-Stationen -- */

.path {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .5rem;
  margin: var(--s-5, 1.25rem) 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.path li {
  flex: 1 1 9rem;
  min-width: 0;
  position: relative;
  padding: var(--s-4, 1rem);
  border: 1px solid var(--line, #DCE2E8);
  border-radius: var(--radius, 8px);
  background: #fff;
}
.path li:last-child { border-color: var(--accent, #2D6FA3); background: rgba(45, 111, 163, .06); }
.path .st { display: block; font-family: var(--font-head, inherit); font-weight: 700; font-size: 1.125rem; color: var(--navy, #003366); }
.path .sd { display: block; font-size: .9375rem; color: var(--ink-2, #4A5560); margin-top: .2rem; }

/* --------------------------------------------------------- Ankuendigung --- */

.ann-status {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.ann-status[data-status="laeuft"]      { color: #1F6B45; background: rgba(31, 107, 69, .08); }
.ann-status[data-status="angekuendigt"]{ color: #1F5C86; background: rgba(31, 92, 134, .08); }
.ann-status[data-status="folgt"]       { color: #6B5A1F; background: rgba(107, 90, 31, .10); }

.stand-line {
  margin-top: var(--s-5, 1.25rem);
  font-size: 1rem;
  color: var(--ink-2, #4A5560);
}

/* ------------------------------------------------------- Einfache Sprache - */

/* Nur der Inhalt wird groesser, NICHT die Wurzel. Auf der Wurzel hat dieselbe
   Regel am 11. September 2026 die Hauptnavigation mitvergroessert und die Seite
   bei 1440 px um 37 px ueber den Rand geschoben — gemessen, nicht vermutet. */
.dk-simple main { font-size: 1.1875rem; }
.dk-simple main p,
.dk-simple main li { max-width: 58ch; line-height: 1.7; }
.dk-simple main h1 { line-height: 1.15; }
.dk-simple main h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.dk-simple main .lead { font-size: 1.3125rem; }
.dk-simple main .btn { min-height: 52px; font-size: 1.0625rem; }
.dk-simple main .facts dd { font-size: 1.0625rem; }
.dk-simple main .checklist li { margin-bottom: .55rem; }

/* Im dunklen Kontaktpanel traegt Navy auf Navy nichts — gemessen 1.27:1. */
.contact-panel .phone-big { color: #fff; border-bottom-color: rgba(255, 255, 255, .65); }

.phone-big {
  display: inline-block;
  font-family: var(--font-head, inherit);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem);
  font-weight: 700;
  color: var(--navy, #003366);
  text-decoration: none;
  border-bottom: 3px solid var(--accent, #2D6FA3);
  padding-bottom: .1rem;
}

/* ------------------------------------------------------------- Quellen ---- */

.source-note {
  font-size: .875rem;
  color: var(--ink-3, #6B7580);
  margin-top: var(--s-4, 1rem);
}
.source-note a { color: inherit; }

/* ------------------------------------------------- Anfrageformular --------- */
/* Die Praesentationskopie von styles.css ist aelter als die Formularkomponente
   und kennt .anfrage-form / .form-grid nicht — gemessen am 11. September 2026 an
   einem Formular, dessen Felder in einer Zeile durcheinanderliefen. Die Regeln
   stehen hier statt in der Kopie von styles.css, damit die uebrigen 26 Seiten
   der Praesentation von diesem Build unberuehrt bleiben. */

.anfrage-form {
  margin-top: var(--s-8, 2rem);
  border: 1px solid var(--border, #DCE2E8);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, #fff);
  padding: var(--s-6, 1.5rem);
}
.anfrage-form h3 { margin: 0 0 var(--s-4, 1rem); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4, 1rem); }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label {
  display: flex; flex-direction: column; gap: var(--s-2, .5rem);
  font-size: .9375rem; font-weight: 600; color: var(--charcoal, #2B3138);
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  font: inherit; font-weight: 400;
  color: var(--charcoal, #2B3138);
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, var(--border, #C6CFD8));
  border-radius: var(--radius, 8px);
  padding: var(--s-3, .75rem);
  min-height: 44px;            /* Touch-Ziel aus der Barrierefreiheits-Baseline */
}
.form-grid textarea { min-height: 88px; resize: vertical; }
.form-grid input:focus-visible,
.form-grid select:focus-visible,
.form-grid textarea:focus-visible {
  outline: 3px solid var(--focus-ring, #2D6FA3); outline-offset: 2px;
  border-color: var(--navy, #003366);
}
.form-note {
  margin: var(--s-4, 1rem) 0;
  font-size: .9375rem;
  color: var(--charcoal-soft, #4A5560);
  border-left: 3px solid var(--border-strong, #C6CFD8);
  padding-left: var(--s-3, .75rem);
}
.form-demo-hint { margin: var(--s-3, .75rem) 0 0; font-size: .875rem; color: var(--charcoal-soft, #4A5560); }

/* --------------------------------------------- Kostenblock, Variante B ---- */
/* Operatorwahl 11. September 2026 aus vier gerenderten Varianten
   (deutschkurse/kosten-varianten.html): Figur ordnet ein, Tabelle traegt die
   Zahlen. Die Figur spricht nicht ueber Geld. */

.kosten { display: grid; gap: var(--s-5, 1.25rem); grid-template-columns: 1fr; align-items: start; margin-top: var(--s-4, 1rem); }
@media (min-width: 760px) { .kosten { grid-template-columns: 180px 1fr; } }

.kosten-side { display: flex; flex-direction: column; gap: .6rem; align-items: center; text-align: center; }
@media (max-width: 759px) { .kosten-side { flex-direction: row; text-align: left; align-items: center; } }

/* Kein Kreis. Der runde Kopfausschnitt ist auf dieser Site das Portraet neben einem
   Namen (Arbeit, D-65) — im Kostenblock las er sich als Avatar einer Person (Operator,
   11. September 2026). Hier steht die Figur wie auf Arbeit: Bueste auf einem weichen
   Fleck in der Bereichsfarbe, darunter eine Sprechzeile — eine Linie, ein Satz. */
.dk-scene { position: relative; width: 11rem; max-width: 100%; }
.dk-blob { position: absolute; inset: 12% 4% 0 0; z-index: 0;
           background: rgba(45, 111, 163, .12);
           border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%; }
.dk-figure { position: relative; z-index: 1; width: 100%; aspect-ratio: 310 / 330; overflow: hidden; }
/* height:auto ist Pflicht — mit dem height-Attribut der Datei zeichnet der Browser die
   Figur in eine 565 px hohe Box und der Ausschnitt zeigt nur Leere (gemessen). */
.dk-figure :is(img, svg) { width: 100%; height: auto; display: block; }


@media (max-width: 560px) { .dk-guide--row .dk-scene { width: 5.5rem; } }

.ktab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line, #DCE2E8);
        border-radius: var(--radius, 8px); overflow: hidden; }
.ktab th { text-align: left; font-family: var(--font-head, inherit); font-size: 1rem; font-weight: 600;
           color: var(--navy, #003366); padding: .7rem .9rem; vertical-align: top; }
.ktab td { padding: .7rem .9rem; text-align: right; vertical-align: top; }
.ktab tr + tr th, .ktab tr + tr td { border-top: 1px solid var(--line, #DCE2E8); }
.ktab .sub { display: block; font-family: var(--font-body, inherit); font-weight: 400; font-size: .875rem;
             color: var(--ink-3, #6B7580); margin-top: .15rem; }
.amt { font-family: var(--font-head, inherit); font-weight: 700; color: var(--navy, #003366);
       font-size: 1.375rem; line-height: 1.15; white-space: nowrap; }
.amt--free { font-size: 1.125rem; color: #1F6B45; white-space: normal; }
.amt .sub { white-space: normal; }

.pay { font-size: .9375rem; color: var(--ink-2, #4A5560); margin: var(--s-4, 1rem) 0 var(--s-3, .75rem); }

/* Kompakte Schritte: eine Zeile je Schritt, kein Absatz darunter. */
.steps-compact { margin: 0; padding-left: 1.4rem; }
.steps-compact li { margin-bottom: .55rem; padding-left: .25rem; }
.steps-compact b { color: var(--navy, #003366); }

.choice-card .facts-line { font-size: .875rem; color: var(--ink-2, #4A5560); }
.path-line { margin-top: var(--s-5, 1.25rem); max-width: 78ch; }


/* ==========================================================================
   Umbau 11. September 2026 — Konzept D-69, Reihenfolge A, Bloecke 1A · 2B · 3B,
   Figuren F1 C · F2 B (DEUTSCHKURSE_HUB_CONTENT.md §3–§6). Werte der kompakten
   Stimme aus PRESENTATION_CANON.md §4, Figurenrollen aus §6. Gilt nur fuer die
   vier Seiten mit data-section="kurse"; die gemeinsame Ebene (styles.css) bleibt
   unveraendert — die Vereinheitlichung der drei Bereiche ist eine eigene Sitzung.
   ========================================================================== */

/* --- kompakte Stimme, nur hier ------------------------------------------ */
[data-section="kurse"] .container { max-width: 68rem; padding-inline: 32px; }   /* 1088 + 32, wie Arbeit — PRESENTATION_CANON §4 */
@media (max-width: 699px) { [data-section="kurse"] .container { padding-inline: 24px; } }
[data-section="kurse"] main h1 { font-size: clamp(2rem, 3.4vw, 2.625rem); line-height: 1.12; font-weight: 700; color: #003366; text-wrap: balance; }
[data-section="kurse"] main h2 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.2; font-weight: 700; color: #003366; }
[data-section="kurse"] main h3 { font-size: 1.1875rem; font-weight: 700; color: #003366; }
[data-section="kurse"] main .lead { font-size: 1.125rem; line-height: 1.5; max-width: 42rem; }
[data-section="kurse"] main p, [data-section="kurse"] main li { text-wrap: pretty; }
[data-section="kurse"] main section { padding-block: clamp(3rem, 6vw, 5rem); }
[data-section="kurse"] :is(.choice-card, .card, .review-banner, .note, .fact, .anfrage-form) { border-radius: 12px; }
.dk-textlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy, #003366); font-weight: 600; text-decoration: none; }
.dk-textlink:hover, .dk-textlink:focus-visible { text-decoration: underline; }

/* --- A1 Hero 1A mit Figur F1 C: Figur links, Text rechts ------------------ */
.dk-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 760px) { .dk-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; } }
.dk-guide--hero { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: .75rem; align-items: start; }
.dk-guide--hero .dk-scene { width: 100%; max-width: 17rem; }
.dk-guide--hero .dk-figure { aspect-ratio: 310 / 460; }            /* Rolle Hero: ¾, 240–320 px */
@media (max-width: 759px) {
  .dk-hero-grid > .dk-hero-fig { order: 2; }
  .dk-guide--hero { grid-template-columns: min(16rem, 58vw) minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .dk-guide--hero { grid-template-columns: 1fr; }
  .dk-guide--hero .dk-scene { max-width: min(16rem, 58vw); }
}
.dk-hero-text .eyebrow { color: var(--accent, #2D6FA3); font-weight: 600; font-size: .9375rem; letter-spacing: .02em; margin: 0 0 .5rem; }
.dk-hero-text .btn-row { align-items: center; }

/* Karten und Weg */
.choice-card .go a { color: var(--navy, #003366); font-weight: 600; text-decoration: none; }
.choice-card .go a:hover, .choice-card .go a:focus-visible { text-decoration: underline; }
.path-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--sp-group, 2rem); font-weight: 600; color: var(--navy, #003366); }
.path-line .path-st { background: #E8F0F7; padding: .2rem .7rem; border-radius: 999px; }
.path-line i { width: 1.4rem; height: 2px; background: var(--accent, #2D6FA3); }
.path-line small { flex-basis: 100%; font-weight: 400; color: var(--ink-2, #4A5560); font-size: .9375rem; }

/* --- A2 Wochentabelle 2B ------------------------------------------------- */
.dk-a2 { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 760px) { .dk-a2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; } }
.wk-wrap { overflow-x: auto; }                     /* auf 375 px scrollt die Tabelle im eigenen Rahmen, nie die Seite */
.wk-table { border-collapse: collapse; width: 100%; max-width: 40rem; min-width: 19rem; background: #fff;
            border: 1px solid var(--line, #DCE2E8); border-radius: 12px; overflow: hidden; }
.wk-table th { background: var(--navy, #003366); color: #fff; padding: .7rem .4rem; font-size: 1.125rem; text-align: center; }
.wk-table td { text-align: center; padding: .9rem .4rem; font-weight: 600; color: var(--navy, #003366);
               border-right: 1px solid var(--line-soft, #E7ECF2); font-size: 1.0625rem; }
.wk-table th.open { background: #fff; color: #9C2B20; border: 2px dashed #B3261E; border-bottom: none; }
.wk-table td.open { border: 2px dashed #B3261E; border-top: none; font-weight: 400; }
.wk-note { margin: .75rem 0 0; color: var(--ink-2, #4A5560); }
.facts3 { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-width: 42rem; }
.facts3 li { padding-left: 1rem; border-left: 3px solid var(--accent, #2D6FA3); }
.facts3 b { color: var(--navy, #003366); }

/* Thematische Aufklappung — ein Baustein, drei Orte (A2, A3, A4) */
.disc { margin-top: 1.75rem; border-top: 1px solid var(--line, #DCE2E8); }
.disc details { border-bottom: 1px solid var(--line, #DCE2E8); }
.disc summary { cursor: pointer; padding: .8rem 0; font-weight: 600; color: var(--navy, #003366); list-style: none;
                display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; align-items: center; }
.disc summary::-webkit-details-marker { display: none; }
.disc summary::after { content: "+"; color: var(--accent, #2D6FA3); font-weight: 700; font-size: 1.25rem; }
.disc details[open] summary::after { content: "–"; }
.disc summary:focus-visible { outline: 3px solid var(--focus-ring, #2D6FA3); outline-offset: 2px; }
.disc-body { padding-bottom: 1rem; }
.disc-body p, .disc-body ul { margin: 0 0 .9rem; max-width: 42rem; }
.disc-body p:last-child, .disc-body ul:last-child { margin-bottom: 0; }
.disc-body .ktab { max-width: 42rem; margin: .5rem 0 .7rem; }
.disc-body .note--legal { max-width: 42rem; }

/* --- A3 vier Karten 3B, Figur F2 B rechts, Zeile darunter ---------------- */
.dk-a3 { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 960px) { .dk-a3 { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); } }
.wcards { display: grid; gap: .9rem; }
@media (min-width: 560px) { .wcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wcard { border: 1px solid var(--line, #DCE2E8); border-top: 4px solid var(--accent, #2D6FA3); border-radius: 12px;
         padding: .9rem 1rem; background: #fff; display: grid; gap: .2rem; }
.wcard b { color: var(--navy, #003366); font-family: var(--font-head, inherit); }
.wcard span { color: var(--ink-2, #4A5560); font-size: .95rem; }
.wcard.w2 { border-top-color: #4A8AC0; } .wcard.w3 { border-top-color: #1F6B45; } .wcard.w4 { border-top-color: #8A94A0; }
.dk-guide--side .dk-scene { width: 11rem; }                        /* Rolle neben Block: Bueste, 150–200 px */
.dk-guide--side .dk-figure { aspect-ratio: 310 / 352; }
.dk-a3-fig { width: min(22rem, 100%); justify-self: end; }
.dk-a3-fig .dk-guide { margin-left: 1rem; }
.dk-a3-fig .mw-say { width: 100%; margin-top: .75rem; }
@media (max-width: 959px) { .dk-a3-fig { justify-self: start; } }
.dk-sent { margin: 1rem 0 0; color: var(--ink-2, #4A5560); max-width: 42rem; }

/* --- A5 Kontaktpanel mit Formular zuerst -------------------------------- */
.contact-panel--form { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .contact-panel--form { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.contact-panel--form .anfrage-form { margin-top: 0; }
.contact-panel--form .contact-info h2 { margin-top: 0; }
.contact-panel--form .persons { margin: 1rem 0 0; opacity: .9; }
.contact-panel--form .form-note { color: var(--charcoal-soft, #4A5560); }

/* Liegende Figur der alten Reihe wird nicht mehr gebraucht */
.dk-guide--row { display: none; }

/* Im dunklen Panel bleiben Ueberschrift und Text hell; im weissen Formular darin dunkel —
   gemessen am 11. September 2026: 1,27:1 Navy auf Navy, 1,35:1 Hinweis auf Weiss. */
[data-section="kurse"] main .contact-panel h2 { color: #fff; }
.contact-panel--form .anfrage-form, .contact-panel--form .anfrage-form p, .contact-panel--form .anfrage-form label,
.contact-panel--form .anfrage-form h3 { color: var(--charcoal, #2B3138); }
.contact-panel--form .anfrage-form .form-note, .contact-panel--form .anfrage-form .form-demo-hint { color: #4A5560; }

/* 375 px: das Gitterkind darf nicht breiter als die Spalte werden, sonst scrollt die Seite statt
   des Tabellenrahmens — gemessen 388 px bei 375 (11. September 2026). */
.dk-a2 > div, .dk-a3 > div, .dk-hero-grid > div { min-width: 0; }
.wk-table .cr { white-space: normal; }
.wk-table .cr::after { display: block; margin-left: 0; }

/* cta.sticky ist mobil (course.json: mobile only). Ab 900 px steht der Hero-Button im Blick;
   die feste Leiste lag im Ganzseiten-Screenshot auf der Figur (11. September 2026). */
@media (min-width: 900px) { [data-section="kurse"] .sticky-cta { display: none; } }

/* Besuchszeit und der eine Kanalsatz statt der Kanalliste (Operator, 11. September 2026). */
.visit-window { margin: 1rem 0; }
[data-section="kurse"] .contact-panel address { font-style: normal; margin: 1rem 0 .5rem; line-height: 1.5; }
[data-section="kurse"] .contact-panel .channels { margin: 0; }
[data-section="kurse"] .contact-panel .channels a { color: #fff; text-decoration: underline; }
[data-section="kurse"] .contact-panel .channels a:hover { text-decoration: none; }
[data-section="kurse"] .contact-panel .panel-note { margin: 1rem 0 0; font-size: .9375rem; opacity: .92; }

/* Terminbuchung statt Kontaktformular (D-72). Der Hinweis zur Dauer steht ueber der Schaltflaeche,
   damit er vor dem Klick gelesen wird, nicht danach. */
.form-slot-note { margin: var(--s-4, 1rem) 0 0; font-size: .9375rem; color: var(--charcoal-soft, #4A5560); }
.form-grid input[type="date"] { min-height: 44px; }

/* Tag- und Uhrzeitwahl als Chips (Operatorwunsch 11. September 2026: einfach, schnell, mit Tagwahl).
   Es sind echte Radiogruppen — Tastatur und Ansage kommen vom Element, nicht von ARIA. Ohne
   JavaScript stehen hier das Datumsfeld und die Auswahlliste, und der Block bleibt bedienbar. */
.form-when { margin-bottom: var(--s-2, .5rem); }
.form-when > label { display: flex; flex-direction: column; gap: var(--s-2, .5rem); font-size: .9375rem;
                     font-weight: 600; color: var(--charcoal, #2B3138); margin-bottom: var(--s-4, 1rem); }
.chips { border: 0; padding: 0; margin: 0 0 var(--s-4, 1rem); min-width: 0; }
.chips legend { padding: 0; font-size: .9375rem; font-weight: 600; color: var(--charcoal, #2B3138);
                margin-bottom: var(--s-2, .5rem); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; flex-direction: column; align-items: center;
        justify-content: center; gap: .1rem; min-width: 3.75rem; min-height: 48px; padding: .4rem .7rem;
        border: 1px solid var(--border-strong, #C6CFD8); border-radius: 999px; background: #fff;
        cursor: pointer; line-height: 1.15;
        transition: transform 140ms cubic-bezier(.23,1,.32,1), background-color 140ms cubic-bezier(.23,1,.32,1), border-color 140ms cubic-bezier(.23,1,.32,1); }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-main { font-weight: 700; color: var(--navy, #003366); font-size: 1rem; }
.chip-sub { font-size: .75rem; color: var(--charcoal-soft, #4A5560); }
.chip:has(input:checked) { background: var(--navy, #003366); border-color: var(--navy, #003366); }
.chip:has(input:checked) .chip-main, .chip:has(input:checked) .chip-sub { color: #fff; }
.chip:has(input:focus-visible) { outline: 3px solid var(--focus-ring, #2D6FA3); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--navy, #003366); background: var(--accent-surface, #E8F0F7); transform: translateY(-1px); }
}
.chip:active { scale: .96; transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } .chip:hover { transform: none; } .chip:active { scale: 1; } }
.booking-summary { margin: 0 0 var(--s-4, 1rem); font-weight: 600; color: var(--navy, #003366); }
.form-grid--small label { font-size: .875rem; }