/* ==========================================================================
   Pölzl Fire Campus – Komponenten
   Wiederverwendbare Bausteine der einzelnen Seiten
   ========================================================================== */

/* ── Seitenkopf für Unterseiten ─────────────────────────────────────────── */
.page-head { padding: var(--sp-6) 0 var(--sp-6); }
.page-head.on-white { background: var(--white); border-bottom: 1px solid var(--surface); }
.crumbs { font-size: var(--fs-xs); color: var(--ink-45); margin-bottom: 18px; }
.crumbs a { color: var(--ink-45); text-decoration: none; }
.crumbs a:hover { color: var(--campus-dark); }
.page-head h1 { margin-bottom: var(--sp-3); }
.page-head .lead { max-width: 620px; }
/* Seitenkopf mit Kontaktkasten rechts (Löschübung: KUK Brandschutz); schmal darunter. */
.page-head-kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--sp-6); align-items: end; }
.page-head-kontakt .panel { margin: 0; padding: 20px 24px; }
.page-head-kontakt .contact-block { margin-bottom: 10px; }
.page-head-kontakt .contact-block h4 { margin-bottom: 2px; }
@media (max-width: 960px) { .page-head-kontakt { grid-template-columns: minmax(0, 1fr); } }
/* Logo von KUK Brandschutz auf der Löschübung (weißer Grund wie der Abschnitt). */
.kuk-logo { display: flex; justify-content: center; }
.kuk-logo img { width: 100%; max-width: 420px; height: auto; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 84px 0 76px; position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; bottom: -200px; inset-inline-end: -160px;
  width: 500px; height: 500px; border-radius: 50%;
  background: var(--campus); opacity: .05; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.hero-trust { display: flex; gap: 10px; flex-wrap: wrap; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid var(--surface);
  padding: 7px 13px; border-radius: var(--r);
}
.trust-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--campus); flex-shrink: 0; }
.trust-pill .dot.org { background: var(--blaze); }

/* Vertrauensleiste */
.trustbar { background: var(--white); border-top: 1px solid var(--surface); border-bottom: 1px solid var(--surface); }
.trustbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 24px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-70); }
.trust-item svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ── Dashboard-Karte im Hero ────────────────────────────────────────────── */
.hero-card {
  background: var(--white); border: 1px solid var(--surface); border-radius: var(--r);
  overflow: hidden; box-shadow: 0 20px 48px rgba(26,26,46,.10);
  max-width: 420px; width: 100%; justify-self: center;
}
.hcard-head { background: var(--ink); padding: 15px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hcard-brand { font-size: var(--fs-sm); font-weight: 800; color: var(--white); }
.hcard-brand .fire { color: var(--campus); }
.hcard-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-45); }
.hcard-body { padding: 22px; }
.team-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 11px; }
.team-rows { display: flex; flex-direction: column; gap: 10px; }
.team-row { display: flex; align-items: center; gap: 10px; }
.team-initials { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.team-initials.grn { background: var(--mint); color: var(--campus-dark); }
.team-name { font-size: var(--fs-xs); font-weight: 600; width: 86px; flex-shrink: 0; }
.pbar-wrap { flex: 1; height: 5px; background: var(--surface); border-radius: var(--r-pill); overflow: hidden; }
.pbar { height: 100%; border-radius: var(--r-pill); }
.pbar-pct { font-size: 10.5px; font-weight: 700; width: 30px; text-align: end; flex-shrink: 0; }

/* ── Zertifikat ─────────────────────────────────────────────────────────── */
.cert {
  background: var(--white); border: 1px solid var(--surface); border-radius: var(--r);
  padding: 30px 32px 26px; box-shadow: var(--shadow-raise);
}
.cert-mini { background: var(--linen); border: 1px solid var(--surface); border-radius: var(--r); padding: 18px 20px; margin-bottom: 18px; cursor: pointer; display: block; text-decoration: none; color: inherit; }
.cert-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; }
.cert-logo-name { font-size: var(--fs-xs); font-weight: 800; line-height: 1.15; }
.cert-logo-name .fire { color: var(--campus); }
.cert-badge { font-size: 10.5px; font-weight: 700; color: var(--campus-dark); background: var(--mint); padding: 4px 10px; border-radius: var(--r); white-space: nowrap; }
.cert-badge-muster { color: var(--blaze); background: var(--blaze-soft); }
.cert-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 8px; }
.cert-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 20px; }
.cert-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--linen); font-size: var(--fs-xs); }
.cert-row dt { color: var(--ink-45); }
.cert-row dd { font-weight: 600; text-align: end; }
.cert-row dd.name { color: var(--blaze); font-weight: 700; }
.cert-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--surface); }
.cert-sig { font-size: 10.5px; color: var(--ink-45); line-height: 1.5; }
.cert-sig strong { display: block; color: var(--ink); font-size: 11.5px; }
.cert-qr { width: 56px; height: 56px; flex-shrink: 0; }
.cert-person { font-size: 14px; font-weight: 700; color: var(--blaze); }
.cert-meta { font-size: 10.5px; color: var(--ink-45); }
.cert-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--surface); margin-top: 12px; }
.cert-id { font-size: 9.5px; color: var(--ink-45); font-family: var(--font-mono); }
.cert-mini-title { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 10px; }

/* ── Branchen ───────────────────────────────────────────────────────────── */
.branchen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.branche {
  border: 1px solid var(--surface); border-radius: var(--r); padding: 26px;
  background: var(--white); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 12px; transition: border-color .15s;
}
.branche:hover { border-color: var(--campus); }
.branche:hover .branche-cta { color: var(--campus-dark); }
.branche-icon { width: 44px; height: 44px; border-radius: var(--r); background: var(--mint); display: flex; align-items: center; justify-content: center; }
.branche-icon svg { width: 22px; height: 22px; }
.branche h2, .branche h3, .branche h4 { font-size: 16.5px; }
/* Farblos seit 10.09.2026. Die Schlagworte einer Branche sind eine
   Beschriftung, kein Link und keine Statusaussage – Gruen hat hier nichts
   zu melden und nimmt dem echten Link darunter ("Zur Branche") die
   Aufmerksamkeit. */
.branche-focus { font-size: 10.5px; font-weight: 700; color: var(--ink-45); letter-spacing: 0.07em; text-transform: uppercase; }
.branche p { font-size: var(--fs-sm); color: var(--ink-70); }
.branche-cta { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-45); margin-top: auto; transition: color .15s; }
.branche-sonder { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 22px; background: var(--linen); border-style: dashed; }
.branche-sonder:hover { border-color: var(--blaze); }
.branche-sonder:hover .branche-cta { color: var(--blaze); }
.branche-sonder .branche-icon { background: var(--blaze-soft); }
.branche-sonder .txt { flex: 1; max-width: var(--textmax); }
.branche-sonder h2, .branche-sonder h3, .branche-sonder h4 { margin-bottom: var(--sp-1); }
.branche-sonder .branche-cta { margin: 0; white-space: nowrap; }

/* ── Prozessschritte ────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { border-top: 2px solid var(--ink-line); padding-top: 26px; position: relative; }
.step::before {
  content: attr(data-num); position: absolute; top: -19px; inset-inline-start: 0;
  background: var(--ink); padding-inline-end: 14px;
  font-size: 28px; font-weight: 800; color: var(--campus); letter-spacing: -0.02em;
}
/* Alle drei Schritte gleich – die Nummer ordnet, sie warnt nicht. */
.step h2, .step h3, .step h4 { color: var(--white); margin-bottom: 10px; }
.step p { font-size: 14px; color: var(--on-ink-70); margin-bottom: 16px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r); border: 1px solid var(--ink-line); color: #B9B9C6; }
.chip.hot { border-color: var(--ink-line); color: #B9B9C6; }   /* frueher orange, siehe Farbregel */
.chip.green { border-color: rgba(0,196,110,.4); color: var(--campus); }

/* ── Nachhaltigkeit ─────────────────────────────────────────────────────── */
.nach-quote { margin: 28px 0 22px; padding: 24px 28px; background: var(--white); border-radius: var(--r); border-inline-start: 4px solid var(--campus); }
.nach-quote-text { font-size: 21px; font-weight: 800; line-height: 1.35; letter-spacing: -0.015em; }
.nach-quote-text em { color: var(--campus); font-style: normal; }   /* auf Mint: Markengruen, nicht der Textton */
.nach-tagline { font-size: 14px; font-weight: 700; color: var(--ink-70); }

/* ── Zweispalter mit Merkmalsliste ──────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.split-wide { grid-template-columns: 1.05fr .95fr; }
.feat-list { display: flex; flex-direction: column; margin-top: var(--sp-5); }
.feat { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--surface); }
.feat svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.feat h2, .feat h3, .feat h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.feat p { font-size: var(--fs-sm); color: var(--ink-70); }

/* ── Panel & Tabellen ───────────────────────────────────────────────────── */
.panel { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 26px 28px; box-shadow: var(--shadow-card); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.panel-title { font-size: var(--fs-sm); font-weight: 700; }
.panel-meta { font-size: 11.5px; color: var(--ink-45); }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--surface); font-size: var(--fs-xs); color: var(--ink-45); flex-wrap: wrap; }
.panel-foot a { color: var(--campus-dark); font-weight: 700; text-decoration: none; font-size: var(--fs-xs); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th {
  text-align: start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-45); padding-block: 0 10px; padding-inline: 0 10px;
  border-bottom: 1px solid var(--surface);
}
table.data td { padding-block: 12px; padding-inline: 0 10px; border-bottom: 1px solid var(--linen); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data td:last-child, table.data th:last-child { padding-inline-end: 0; text-align: end; }

.status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r); display: inline-block; white-space: nowrap; }
.status.done { background: var(--mint); color: var(--campus-dark); }
.status.run  { background: var(--surface); color: var(--ink-70); }
.status.open { background: var(--linen); color: var(--ink-45); }

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat { background: var(--linen); border: 1px solid var(--surface); border-radius: var(--r); padding: 24px; }
.stat.green { background: var(--mint); border-color: var(--mint-mid); }
.stat-num { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; }
.stat p { font-size: var(--fs-sm); color: var(--ink-70); line-height: 1.45; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 20px 22px; }
.tile-num { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.tile-label { font-size: var(--fs-xs); color: var(--ink-70); margin-top: 3px; }

/* ── Sprachen ───────────────────────────────────────────────────────────── */
.lang-row { display: flex; gap: 7px; flex-wrap: wrap; }
.lang { font-size: var(--fs-xs); font-weight: 600; padding: 6px 13px; border-radius: var(--r); border: 1px solid var(--surface); color: var(--ink-70); }
.lang.active { background: var(--mint); color: var(--campus-dark); border-color: var(--mint-mid); font-weight: 700; }

/* ── Zitat ──────────────────────────────────────────────────────────────── */
blockquote { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.45; border-inline-start: 3px solid var(--campus); padding-inline-start: 24px; margin: 26px 0 22px; }
.person-role { font-size: var(--fs-sm); color: var(--ink-70); max-width: 460px; margin-top: 2px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faq { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 22px 24px; transition: border-color .15s; }
.faq:hover { border-color: var(--campus); }
.faq h2, .faq h3, .faq h4 { font-size: 15px; margin-bottom: 8px; }
.faq p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta { background: var(--ink); padding: 80px 0; }
.cta-grid { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.cta-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--campus); margin-bottom: var(--sp-3); }
.cta h2 { color: var(--white); margin-bottom: var(--sp-2); }
.cta p { font-size: 15.5px; color: var(--on-ink-70); }
.cta-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; min-width: 240px; }

/* ── Modulliste & Kaufbox ───────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: var(--sp-6); align-items: start; }
/* Beide Spalten der Kursaufteilung sind gleich hoch. Damit die kürzere
   Liste unten nicht ins Leere läuft, wachsen ihre Einträge mit. */
.panel:has(> .module-list) { display: flex; flex-direction: column; }
.module-list { display: flex; flex-direction: column; flex: 1; }
.module-list > .module-item { flex: 1 1 auto; }
.module-item { display: flex; align-items: center; gap: 18px; padding: 16px 18px; background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); margin-bottom: 8px; }
.module-num { width: 34px; height: 34px; border-radius: var(--r); flex-shrink: 0; background: var(--linen); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 800; color: var(--ink-70); }
.module-item.test .module-num { background: var(--mint); color: var(--campus-dark); }
.module-name { flex: 1; font-size: 14.5px; font-weight: 600; }
.module-name small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-45); }
.module-dur { font-size: var(--fs-xs); color: var(--ink-45); white-space: nowrap; }

.buy-box { position: sticky; top: 100px; }
.buy-card { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 28px; box-shadow: var(--shadow-card); }
.buy-price { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.buy-price small { font-size: 14px; font-weight: 500; color: var(--ink-45); letter-spacing: 0; }
.buy-note { font-size: var(--fs-xs); color: var(--ink-45); margin: 4px 0 20px; }
.buy-feats { list-style: none; margin-bottom: 22px; }
.buy-feats li { font-size: var(--fs-sm); color: var(--ink-70); padding-block: 8px; padding-inline: 26px 0; border-top: 1px solid var(--linen); position: relative; }
.buy-feats li::before { content: '✓'; position: absolute; inset-inline-start: 2px; color: var(--campus); font-weight: 800; }
.buy-alt { text-align: center; font-size: var(--fs-xs); color: var(--ink-45); margin-top: 14px; }
.buy-alt a { color: var(--campus-dark); font-weight: 700; text-decoration: none; }

/* ── Formulare & Kasse ──────────────────────────────────────────────────── */
.checkout-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: var(--sp-6); align-items: start; }
.co-steps { display: flex; gap: 8px; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.co-step { font-size: var(--fs-xs); font-weight: 700; padding: 7px 14px; border-radius: var(--r); background: var(--white); border: 1px solid var(--surface); color: var(--ink-45); }
.co-step.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.form-card { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 30px; margin-bottom: 16px; }
.form-card h2, .form-card h3, .form-card h4 { font-size: 16px; margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row.one { grid-template-columns: 1fr; }
.field label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-70); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--surface); border-radius: var(--r); background: var(--white);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--campus); outline-offset: -1px; border-color: var(--campus); }
.field .hint { font-size: 11px; color: var(--ink-45); margin-top: 5px; }
/* Die Hinweise unter Feldern der Kasse setzt WooCommerce als .description (pfc-kauf: Betrieb, Anmeldung); sie sehen aus wie .hint. */
.field .description { display: block; font-size: 11px; line-height: 1.5; color: var(--ink-45); margin-top: 5px; }
.field .description a { color: var(--campus-dark); font-weight: 600; }
.seg { display: flex; border: 1px solid var(--surface); border-radius: var(--r); overflow: hidden; margin-bottom: 18px; }
.seg button { flex: 1; font-family: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 11px; border: none; background: var(--white); color: var(--ink-45); cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--white); }
.payrow { display: flex; flex-direction: column; gap: 8px; }
.pay { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--surface); border-radius: var(--r); cursor: pointer; font-size: 14px; font-weight: 600; }
.pay input { accent-color: var(--campus); }
.pay.sel { border-color: var(--campus); background: var(--mint); }
.pay small { margin-inline-start: auto; font-size: 11.5px; font-weight: 500; color: var(--ink-45); }
/* Die Bestelluebersicht bleibt beim Ausfuellen sichtbar. Frueher stand hier nur
   position: sticky – wirkungslos, weil die Karte hoeher als das Fenster ist.
   Jetzt scrollt die Aufstellung in sich, Gesamtbetrag, Pflichterklaerungen und
   Bestellknopf stehen fest am Kartenfuss. Die gesetzliche Reihenfolge
   AGB – Widerruf – Zustimmung – Knopf bleibt dabei unveraendert. */
/* Nicht mehr klebend und ohne Innen-Scrollbereich: Die Karte ist mit den
   drei Pflichtkaestchen rund 1.370 px hoch. Als klebende Karte mit
   max-height blieben fuer die Bestellung selbst 23 px Sichtfenster – die
   Bestellung war praktisch unsichtbar. Sie laeuft jetzt mit der Seite. */
.order-card {
  background: var(--white); border: 1px solid var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.order-card h2, .order-card h3, .order-card h4 { font-size: 15px; margin-bottom: 16px; }

/* Kopf: macht auf einen Blick sichtbar, was hier bestellt wird. */
.order-kopf { background: var(--linen); border-bottom: 1px solid var(--surface); padding: 22px 28px; }
.order-kopf-marke {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-45); margin-bottom: 8px;
}
.order-kopf h2 { font-size: 19px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -0.01em; }
.order-kopf-meta { font-size: var(--fs-xs); color: var(--ink-45); }

/* Die drei Teile der Karte: Posten, Summen, Bestaetigung. */
.order-block { padding: 18px 28px; border-bottom: 1px solid var(--surface); }
.order-block-titel {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-45); margin-bottom: 4px;
}
.order-block .order-row:first-of-type { border-top: none; }

/* Der Gesamtbetrag ist die Zahl, die zaehlt – er bekommt eine eigene Flaeche. */
.order-total {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--ink); color: var(--on-ink); padding: 18px 28px;
}
.order-total .small { color: var(--on-ink-70); font-weight: 400; }
.order-total strong { font-size: 24px; letter-spacing: -0.02em; white-space: nowrap; }
.order-row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-sm); padding: 9px 0; border-top: 1px solid var(--linen); color: var(--ink-70); }
.order-row strong { color: var(--ink); white-space: nowrap; }
.order-row.total { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 12px; font-size: 15px; }
.order-row.total strong { font-size: 18px; }
.order-hint { font-size: 11.5px; color: var(--ink-45); margin: 14px 28px 24px; line-height: 1.5; }

/* ── Kursplayer ─────────────────────────────────────────────────────────── */
.player-wrap { display: grid; grid-template-columns: 300px 1fr; background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); overflow: hidden; }
.player-side { border-inline-end: 1px solid var(--surface); background: var(--linen); padding: 22px 0; max-height: 760px; overflow-y: auto; }
.player-side h2, .player-side h3, .player-side h4 { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); padding: 0 22px 12px; }
.side-mod { display: flex; align-items: center; gap: 12px; padding: 11px 22px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-70); cursor: pointer; border-inline-start: 3px solid transparent; text-decoration: none; }
.side-mod:hover { background: rgba(255,255,255,.7); }
.side-mod.done .side-dot { background: var(--campus); border-color: var(--campus); }
.side-mod.done .side-dot::after { content: '✓'; color: #fff; font-size: 9px; font-weight: 800; }
.side-mod.now { background: var(--white); border-inline-start-color: var(--ink); color: var(--ink); font-weight: 700; }
.side-mod.now .side-dot { border-color: var(--ink); background: var(--ink); }
.side-mod.lock { opacity: .5; }
.side-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-45); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.side-time { margin-inline-start: auto; font-size: 11px; font-weight: 500; color: var(--ink-45); }
.player-main { padding: 30px 34px; }
.player-video { aspect-ratio: 16/9; background: var(--ink); border-radius: var(--r); display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 24px; }
.play-btn { width: 74px; height: 74px; border-radius: 50%; background: var(--campus); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.play-btn svg { width: 26px; height: 26px; margin-inline-start: 4px; }
/* Dauerhafte KI-Kennzeichnung im Player – muss lesbar bleiben, ohne zu dominieren */
.ki-tag {
  position: absolute; inset-inline-start: 18px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  color: #fff; background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.3);
  padding: 6px 12px; border-radius: var(--r);
  backdrop-filter: blur(2px);
}
.ki-tag svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 620px) {
  .ki-tag { inset-inline-start: 10px; bottom: 10px; font-size: 10.5px; padding: 5px 9px; }
}

/* Nach rechts unten: links unten steht jetzt die KI-Kennzeichnung. */
.video-tag { position: absolute; inset-inline-end: 18px; bottom: 16px; font-size: 11.5px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); padding: 5px 11px; border-radius: var(--r); }
.player-prog { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.prog-track { flex: 1; height: 6px; background: var(--linen); border-radius: var(--r-pill); overflow: hidden; }
.prog-fill { height: 100%; background: var(--campus); border-radius: var(--r-pill); }
.prog-label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-70); white-space: nowrap; }
.player-main h2 { font-size: 26px; }
.player-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── Test & Fragen ──────────────────────────────────────────────────────── */
.quiz-card { background: var(--linen); border: 1px solid var(--surface); border-radius: var(--r); padding: 24px; margin-bottom: 26px; }
.quiz-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 8px; }
.quiz-q { font-size: 15.5px; font-weight: 700; margin-bottom: 14px; }
.quiz-a { display: flex; align-items: center; gap: 11px; background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 11px 15px; font-size: var(--fs-sm); margin-bottom: 7px; cursor: pointer; }
.quiz-a:hover { border-color: var(--ink-45); }
.quiz-a.right { border-color: var(--campus); background: var(--mint); font-weight: 600; }
.quiz-a .mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.quiz-a.right .mark { background: var(--campus); border-color: var(--campus); }

.test-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 18px 24px; margin-bottom: 18px; flex-wrap: wrap; }
.test-counter { font-size: var(--fs-sm); font-weight: 700; }
.test-counter span { color: var(--ink-45); font-weight: 500; }
.test-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.test-dot { width: 22px; height: 6px; border-radius: var(--r-pill); background: var(--surface); }
.test-dot.done { background: var(--campus); }
.test-dot.now { background: var(--ink); }

/* ── Ergebnisseite ──────────────────────────────────────────────────────── */
.result-hero { text-align: center; padding: var(--sp-7) 0 var(--sp-6); }
.result-badge { width: 92px; height: 92px; border-radius: 50%; background: var(--mint); border: 2px solid var(--mint-mid); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4); }
.result-badge svg { width: 44px; height: 44px; }
.result-badge.fail { background: var(--linen); border-color: var(--surface); }
.result-score { display: flex; justify-content: center; gap: var(--sp-6); margin: var(--sp-5) 0; flex-wrap: wrap; }
.score-item { text-align: center; }
.score-num { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.score-label { font-size: var(--fs-xs); color: var(--ink-45); margin-top: 4px; }

/* ── Hinweisboxen ───────────────────────────────────────────────────────── */
.note { border-radius: var(--r); padding: 16px 18px; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-70); display: flex; gap: 12px; align-items: flex-start; }
.note > span { max-width: var(--textmax); }
.note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.note strong { color: var(--ink); }
.note-mint { background: var(--mint); border: 1px solid var(--mint-mid); }
.note-orange { background: var(--blaze-soft); border: 1px solid #FFD9C7; }
.note-linen { background: var(--linen); border: 1px solid var(--surface); }

/* ── Verifikation ───────────────────────────────────────────────────────── */
.verify-badge { display: flex; align-items: center; gap: 14px; background: var(--mint); border: 1px solid var(--mint-mid); border-radius: var(--r); padding: 20px 24px; margin-bottom: var(--sp-4); }
.verify-badge svg { width: 34px; height: 34px; flex-shrink: 0; }
.verify-badge h2 { font-size: 20px; margin: 0; color: var(--campus-dark); }
.verify-badge p { font-size: var(--fs-xs); color: var(--ink-70); }

/* ── Konto & Listen ─────────────────────────────────────────────────────── */
.acc-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-5); align-items: start; }
.acc-nav { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 10px; position: sticky; top: 100px; }
.acc-nav a { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-70); text-decoration: none; padding: 10px 14px; border-radius: var(--r); }
.acc-nav a:hover { background: var(--linen); color: var(--ink); }
.acc-nav a.on { background: var(--ink); color: var(--white); }
/* Die Knöpfe springen zu ihrem Abschnitt (#220): er landet unter der festen Navigation, nicht dahinter. */
.acc-grid .panel[id], .acc-grid h2[id] { scroll-margin-top: 88px; }

.course-card { display: flex; gap: 22px; background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 24px; align-items: center; flex-wrap: wrap; }
.course-thumb { width: 132px; height: 84px; border-radius: var(--r); background: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.course-thumb svg { width: 30px; height: 30px; }
.course-body { flex: 1; min-width: 200px; }
.course-body h2, .course-body h3, .course-body h4 { font-size: 17px; margin-bottom: 4px; }
.course-meta { font-size: var(--fs-xs); color: var(--ink-45); margin-bottom: 12px; }

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.contact-block { margin-bottom: var(--sp-5); }
.contact-block h2, .contact-block h3, .contact-block h4 { font-size: var(--fs-sm); font-weight: 800; margin-bottom: 6px; }
.contact-block p { font-size: var(--fs-sm); color: var(--ink-70); }

/* ── Rechtsseiten & Fehlerseite (Platzhalter) ───────────────────────────── */
.legal-tabs { display: flex; gap: 8px; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.legal-tab { font-size: var(--fs-xs); font-weight: 700; padding: 8px 16px; border-radius: var(--r); background: var(--white); border: 1px solid var(--surface); color: var(--ink-45); cursor: pointer; }
.legal-tab.on { background: var(--ink); border-color: var(--ink); color: var(--white); }

.error-page { text-align: center; padding: 120px 0; }
.error-code { font-size: 96px; font-weight: 800; letter-spacing: -0.05em; color: var(--campus); line-height: 1; }

/* Vierspaltiges Raster (Ablauf-Schritte) */
.branchen-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Responsiv ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .branchen-grid.grid-4 { grid-template-columns: 1fr 1fr; }
}

/* Tabellen dürfen die Seite nicht aufspannen – sie scrollen in ihrer Karte.
   min-width:0 ist nötig, weil Raster- und Flexkinder sonst auf ihrer
   Inhaltsbreite bestehen und der Scrollbereich gar nicht greift. */
@media (max-width: 760px) {
  .panel, .form-card, .buy-card, .order-card, .course-body { min-width: 0; }
  .order-card { overflow-x: hidden; }
  /* Auch die Rasterzellen selbst, sonst wächst die Spalte auf die Inhaltsbreite */
  .hero-grid > *, .split > *, .split-wide > *,
  .detail-grid > *, .checkout-grid > *, .contact-grid > *, .acc-grid > * { min-width: 0; }
  /* Jede Karte, die eine Tabelle tragen kann, bekommt den Scrollbereich –
     sonst spannt die Tabelle die Seite auf (aufgefallen auf der Preisseite
     bei 390 px, wo die Staffeltabelle in einer buy-card steht). */
  .panel, .buy-card, .form-card, .legal-doc { overflow-x: auto; }
  /* Sehr lange Komposita – „Auftragsverarbeitungsvereinbarung“ – sind auf
     320 px breiter als der Bildschirm. Trennen statt überstehen lassen. */
  h1, h2 { overflow-wrap: break-word; hyphens: auto; }
  /* 460 px Mindestbreite waren als "Tabellen scrollen lieber, als zu
     zerbrechen" gedacht. In einer 356 px breiten Karte heisst das aber: die
     RECHTE Spalte steht ausserhalb – und dort steht bei fast allen dieser
     Tabellen die Antwort (Preis, Status, Wert). Der Fehler fiel nie auf,
     weil nicht die Seite ueberlaeuft, sondern die Karte innen scrollt.
     Jetzt duerfen die Tabellen schmal werden; erst wenn zwei Spalten
     wirklich nicht mehr nebeneinanderpassen, stapeln sie (Regel unten). */
  /* Die Kennzeichnungen erzwingen sonst ueber white-space:nowrap eine
     Mindestbreite, die zusammen mit einer langen Beschriftung wieder ueber
     die Kartenbreite hinausgeht. */
  table.data .status, .fakt-zeile .status { white-space: normal; }
  table.data { min-width: 0; }
  /* Drei Spalten passen auf einem Telefon nicht nebeneinander – die vier
     Tabellen, bei denen das vorkommt, stapeln ihre Zellen. Die Kopfzeile
     entfaellt dabei, sie beschriebe Spalten, die es nicht mehr gibt.
     Die Mitarbeitertabelle ist ausgenommen: sie blendet stattdessen zwei
     Spalten aus und bleibt eine Tabelle, weil dort Auswahlkaestchen stehen. */
  table.data:not(.data-auswahl):has(tbody td:nth-child(3)) thead { display: none; }
  table.data:not(.data-auswahl):has(tbody td:nth-child(3)) tr { display: block; padding: 11px 0; border-bottom: 1px solid var(--linen); }
  table.data:not(.data-auswahl):has(tbody td:nth-child(3)) tr:last-child { border-bottom: none; }
  table.data:not(.data-auswahl):has(tbody td:nth-child(3)) td { display: block; padding: 0; border: none; text-align: start; }
  table.data:not(.data-auswahl):has(tbody td:nth-child(3)) td + td { margin-top: 5px; }
  table.data:not(.data-auswahl):has(tbody td:nth-child(3)) td:last-child { padding-inline-end: 0; text-align: start; }
  .course-card { flex-direction: column; align-items: flex-start; }
  .course-thumb { width: 100%; height: 100px; }
}

@media (max-width: 960px) {
  .hero-grid, .split, .split-wide, .detail-grid,
  .checkout-grid, .contact-grid, .acc-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .branchen-grid { grid-template-columns: 1fr 1fr; }
  .branche-sonder { flex-direction: column; align-items: flex-start; }
  .preis-zwei-rechts { padding-block-start: 0; }
  .steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  .faq-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .player-wrap { grid-template-columns: 1fr; }
  .player-side { max-height: none; border-inline-end: none; border-bottom: 1px solid var(--surface); }
  .buy-box, .acc-nav { position: static; }
  .cta-actions { min-width: 0; width: 100%; }
}
@media (max-width: 620px) {
  .branchen-grid, .branchen-grid.grid-4, .stats, .tiles { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .player-main { padding: 22px 18px; }
  .form-card, .buy-card, .panel { padding: 20px; }
  .order-kopf, .order-block, .order-leistung, .order-total { padding-inline: 20px; }
  .co-pflicht { padding: 18px 20px 0; }
  .order-hint { margin-inline: 20px; }
  .order-card .btn-block { margin-inline: 20px; width: calc(100% - 40px); }
  .result-score { gap: var(--sp-4); }
  .cert { padding: 22px 20px; }
  .cert-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  blockquote { font-size: 18px; padding-inline-start: 16px; }
}


/* Express-Bezahlen: Rechnungsdaten und Zahlung in einem Schritt */
.co-express { background: var(--mint); border-color: var(--mint-mid); }
.co-express .btn-row { flex-wrap: nowrap; }
.co-express .btn-row .btn { background: var(--white); }
@media (max-width: 760px) {
  /* Drei Zahlarten nebeneinander passen auf schmalen Geräten nicht mehr */
  .co-express .btn-row { flex-wrap: wrap; }
}

/* Angebotshinweis bei großen Mengen – bewusst grün, nicht orange:
   der Kunde macht nichts falsch, er bekommt ein besseres Angebot.
   Seit 15.10.2026 ein Tooltip über „Anzahl Lizenzen“ (#664): Er schwebt im freien Raum neben der Kartenüberschrift
   und reicht dafür 110 px in die Nachbarspalte, damit er zweizeilig bleibt; kein Abstand der Karte ändert sich.
   Stehen die Felder untereinander (bis 620 px), ist dort kein freier Raum: Dann steht er zwischen „Branche“ und „Anzahl“. */
.field:has(> .gross-hinweis) { position: relative; }
.gross-hinweis {
  position: absolute; inset-inline: -110px 0; bottom: calc(100% + 8px); z-index: 5;
  display: flex; gap: 9px; align-items: flex-start;
  padding-block: 8px; padding-inline: 11px 30px;
  background: var(--mint); border: 1px solid var(--mint-mid);
  border-radius: var(--r); box-shadow: 0 8px 20px rgba(26, 26, 46, 0.10);
  font-size: 12px; line-height: 1.45; color: var(--ink-70);
}
/* Ohne diese Zeile hebt display: flex das Attribut hidden auf, und der Hinweis stand bei jeder Anzahl da (#664). */
.gross-hinweis[hidden] { display: none; }
/* Der Pfeil zeigt auf die Beschriftung „Anzahl Lizenzen“. */
.gross-hinweis::after {
  content: ""; position: absolute; bottom: -7px; inset-inline-start: 132px;
  width: 12px; height: 12px; background: var(--mint);
  border-inline-end: 1px solid var(--mint-mid); border-bottom: 1px solid var(--mint-mid);
  transform: rotate(45deg);
}
.gross-hinweis svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.gross-hinweis strong { color: var(--ink); }
.gross-hinweis a { color: var(--campus-dark); font-weight: 700; }
.gross-hinweis-zu {
  position: absolute; top: 4px; inset-inline-end: 6px; padding: 4px;
  border: none; background: none; font: inherit; font-size: 15px; line-height: 1; color: var(--ink-45); cursor: pointer;
}
/* Ist die Karte dafür zu schmal (zweispaltige Kasse unter rund 1180 px, einspaltige unter 700 px), träfe der Hinweis
   die Überschrift: Dann bekommt die Zeile oben Platz für ihn, nur solange er zu sehen ist. */
@media (min-width: 961px) and (max-width: 1180px), (min-width: 621px) and (max-width: 700px) {
  .form-row:has(> .field > .gross-hinweis:not([hidden])) { padding-top: 84px; }
}
@media (max-width: 620px) {
  .gross-hinweis { position: relative; inset-inline: 0; bottom: auto; margin-bottom: 12px; }
  .gross-hinweis::after { inset-inline-start: 22px; }
}

/* Trenner zwischen Express-Bezahlen und manueller Eingabe */
.co-or {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs); color: var(--ink-45);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.co-or::before, .co-or::after {
  content: ''; flex: 1; height: 1px; background: var(--surface);
}


/* ── Portrait & Vita (Übernahme aus der Landingpage) ─────────────────── */
.portrait{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);margin:0}
.portrait img{width:300px;height:300px;max-width:100%;border-radius:50%;display:block}
.vita{display:flex;flex-direction:column;gap:11px;margin-top:var(--sp-4)}
.vita-row{display:flex;gap:14px;font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.vita-row b{flex:0 0 130px;color:var(--ink);font-weight:700}
.vita-row span{color:var(--ink-70)}
@media (max-width:760px){
  .vita-row{flex-direction:column;gap:2px}
  .vita-row b{flex:none}
}


/* ── Rechtsseite: Fließtext der Rechtstexte ─────────────────────────── */
.legal-doc { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); padding: 40px 44px; }
.legal-doc.is-off { display: none; }
.legal-doc h2 { font-size: 19px; margin: 34px 0 10px; letter-spacing: -0.01em; font-weight: 800; }
.legal-doc h3:first-child { margin-top: 0; }
.legal-doc h3 { font-size: 15px; margin: 22px 0 8px; color: var(--ink); font-weight: 700; }
.legal-doc h5 { font-size: 14px; margin: 18px 0 6px; font-weight: 700; }
.legal-doc p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); margin-bottom: 11px; max-width: var(--textmax); }
.legal-doc ul { margin: 0 0 14px 0; padding-inline-start: 20px; }
.legal-doc li { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); margin-bottom: 4px; }
.legal-doc a { color: var(--campus-dark); font-weight: 600; }
.legal-doc .legal-stand { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--surface); color: var(--ink-45); font-size: var(--fs-xs); }
.legal-tab { font-family: inherit; }
@media (max-width: 760px) { .legal-doc { padding: 26px 20px; } }


/* ── Checkout: Pflichterklärungen vor dem Bestellbutton ─────────────── */
.order-leistung { padding: 18px 28px; border-bottom: 1px solid var(--surface); }
.order-leistung-titel { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 8px; }
.order-leistung p { font-size: var(--fs-xs); color: var(--ink-70); line-height: var(--lh-relaxed); margin-bottom: 6px; }
.co-pflicht { padding: 18px 28px 0; }
.co-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.co-check input { margin-top: 2px; flex: 0 0 auto; }
.co-check span { font-size: var(--fs-xs); color: var(--ink-70); line-height: var(--lh-relaxed); }
.co-check a { color: var(--campus-dark); font-weight: 700; }
.order-card .btn-block { margin-inline: 28px; width: calc(100% - 56px); }
.co-ds { font-size: var(--fs-xs); color: var(--ink-45); line-height: var(--lh-relaxed); margin-top: 4px; }
.co-ds a { color: var(--campus-dark); font-weight: 700; }
/* Hinweis „nur Unternehmen“ über den Häkchen (#664). */
.co-pflicht .co-b2b { margin: 0 0 12px; }


/* ── Cookie-Zustimmung ──────────────────────────────────────────────── */
.cookie-bar {
  position: fixed; z-index: 60;
  inset-inline-start: 16px; inset-inline-end: 16px; bottom: calc(var(--proto-h) + 16px);
  max-width: 720px; margin: 0 auto;
  display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow-raise); padding: 20px 24px;
}
.cookie-text { flex: 1 1 320px; font-size: var(--fs-xs); color: var(--ink-70); line-height: var(--lh-relaxed); }
.cookie-text strong { display: block; color: var(--ink); font-size: var(--fs-sm); margin-bottom: 4px; }
.cookie-text a { color: var(--campus-dark); font-weight: 700; text-decoration: none; }
.cookie-btns { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 620px) {
  .cookie-bar { padding: 16px 18px; }
  .cookie-btns { width: 100%; }
  .cookie-btns .btn { flex: 1; }
}


/* ── Kursbegleiter ──────────────────────────────────────────────────── */
.kursteam { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
/* Die Portraits der Kursbegleiter haben rund 250 px Kantenlaenge. Grosser
   dargestellt wirken sie weich, deshalb stehen sie als kleines rundes Bild
   ueber dem Text statt bildschirmbreit im Kartenkopf. */
.kursteam-karte { background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); overflow: hidden; padding: 26px 24px 24px; }
.kursteam-foto { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 18px; }
.kursteam-name { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 2px; }
.kursteam-rolle { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-45); margin: 0 0 10px; }
.kursteam-text { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); margin: 0 0 14px; }
.kursteam-merkmale { font-size: var(--fs-xs); color: var(--ink-45); margin: 0; }

@media (max-width: 900px) {
  .kursteam { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kursteam { grid-template-columns: 1fr; }
}


/* ── Fotos in Episodenvorschau und Branchenkacheln ──────────────────── */
.player-video.mit-bild { background-size: cover; background-position: center; }
.player-video.mit-bild::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}
.player-video.mit-bild .play-btn,
.player-video.mit-bild .video-tag,
.player-video.mit-bild .ki-tag { position: relative; z-index: 1; }
.player-video.mit-bild .video-tag { position: absolute; }

/* Oben ohne Rahmenlinie: das Bild schliesst buendig mit der Kachel ab. */
.branche.mit-foto { padding-top: 0; overflow: hidden; border-block-start-width: 0; }
/* Feste Hoehe statt aspect-ratio: als Flex-Element zieht ein Bild sonst seine
   volle Eigenhoehe heran und macht die ganze Kachelreihe unnoetig hoch.
   Die negativen Seitenraender heben das Kartenpolster auf, damit der Streifen
   bis an die Kartenkante laeuft. */
.branche-foto { width: calc(100% + 54px); margin: 0 -27px 18px; height: 150px; flex: 0 0 auto; object-fit: cover; display: block; }


/* ── Kennzeichnung KI-erzeugter Bilder ──────────────────────────────────
   Artikel 50 KI-VO verlangt die Offenlegung klar und erkennbar, spätestens
   beim ersten Betrachten. Der Bildnachweis allein genügt dafür nicht –
   deshalb steht die Marke am Bild selbst. */
/* Links unten, nicht rechts oben: Die Kennzeichnung gehoert an den Rand des
   Bildes, den das Auge zuletzt erreicht – sie soll auffindbar sein, nicht
   das Bild anfuehren. Einheitlich mit der Kennzeichnung im Kursplayer. */
.bild-ki {
  position: absolute; inset-inline-start: 16px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  color: #fff; background: rgba(0,0,0,.55);
  padding: 5px 11px; border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
}
.bild-ki svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Auf der Branchenkarte sitzt das Bild OBEN in der Karte, nicht als Grund
   dahinter. "Unten links" heisst hier: unten links am Bild, nicht am Ende
   der Karte. Das Bild ist ueber .branche-foto fest 150 px hoch. */
.bild-ki-still { top: calc(150px - 36px); bottom: auto; inset-inline-start: 12px; }
.bild-ki-foto { background: rgba(0,196,110,.85); }
.branche.mit-foto { position: relative; }

/* ── Nachweis auf der Startseite ────────────────────────────────────────
   Das Dokument steht mittig und groß. Bewusst ein anderes Muster als die
   übrigen Abschnitte, die alle Text links und Karte rechts zeigen. */
.nachweis-blatt { max-width: 560px; margin: 0 auto var(--sp-6); }
.nachweis-blatt .cert { box-shadow: 0 18px 48px rgba(26,26,46,.10); }
/* Das echte Blatt als Muster (#223): A4 im Seitenverhältnis, die Vorlage in Originalgröße (794 × 1123 px = 210 × 297 mm)
   im iframe, theme.js setzt --skala auf die Breite. Immer von links nach rechts wie das PDF; das Blatt selbst ist ein Link. */
.nachweis-muster { max-width: 560px; }
.muster-rahmen { position: relative; direction: ltr; aspect-ratio: 210 / 297; overflow: hidden; background: var(--white);
  border-radius: var(--r); box-shadow: 0 18px 48px rgba(26,26,46,.12), 0 0 0 1px var(--surface); }
.muster-blatt { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 794px; block-size: 1123px; border: 0;
  transform: scale(var(--skala, 0.6)); transform-origin: 0 0; pointer-events: none; }
.muster-link { position: absolute; inset: 0; border-radius: var(--r); transition: box-shadow .15s; }
.muster-link:hover, .muster-link:focus-visible { box-shadow: inset 0 0 0 2px var(--campus); }
.nachweis-muster figcaption { margin-block-start: var(--sp-3); text-align: center; font-size: var(--fs-xs); color: var(--ink-45); }
/* Faktenkärtchen auf farbigem Grund (Preisseite, Wiederholungs-Kasten).
   Eine <table class="data"> taugt dafür nicht: sie kann ihre Ecken nicht
   runden, hat keinen Innenabstand – der Text klebt an der Kante – und
   bekommt unter 620 px eine Mindestbreite von 460 px. Dann steht die
   Antwortspalte außerhalb des Bildschirms und der Kasten zeigt drei
   Fragen ohne Antworten. Drei Frage-Antwort-Zeilen brauchen keine
   Tabelle; als Flexzeilen brechen sie am Telefon einfach um. */
.fakt-karte {
  background: var(--white); border: 1px solid var(--mint-mid);
  border-radius: var(--r); padding: 4px 20px;
}
.fakt-zeile {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; padding: 13px 0;
  border-top: 1px solid var(--linen);
  font-size: var(--fs-sm); color: var(--ink-70);
}
.fakt-zeile:first-child { border-top: none; }
.fakt-fuss { margin: 12px 0 0; font-size: var(--fs-sm); }
.fakt-fuss a { color: var(--campus-dark); font-weight: 700; text-decoration: none; }
.fakt-fuss a:hover { text-decoration: underline; }


.nachweis-fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); max-width: 960px; margin: 0 auto var(--sp-5); }
.nachweis-fakt { display: flex; gap: 14px; align-items: flex-start; }
.nachweis-fakt svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.nachweis-fakt strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.nachweis-fakt p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); }
.nachweis-pruefen {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: center;
  background: var(--mint); border: 1px solid var(--mint-mid); border-radius: var(--r);
  padding: 26px 28px; max-width: 960px; margin: 0 auto;
}
.nachweis-pruefen h3 { font-size: 19px; margin-bottom: 6px; }
.nachweis-pruefen p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); max-width: var(--textmax); }
.nachweis-form label { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-45); margin-bottom: 7px; }
.nachweis-form-row { display: flex; gap: 8px; }
.nachweis-form input {
  font: inherit; font-size: var(--fs-sm); font-family: var(--font-mono);
  padding: 11px 14px; border: 1px solid var(--surface); border-radius: var(--r);
  background: var(--white); color: var(--ink); width: 200px;
}
.nachweis-form input:focus { outline: 2px solid var(--campus); outline-offset: -1px; }

/* ── Anreißer ───────────────────────────────────────────────────────────
   Für Themen, die eine eigene Seite haben und auf der Startseite nur
   angerissen werden. */
.anreisser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.anreiss {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--surface); border-radius: var(--r); padding: 26px;
  background: var(--white); text-decoration: none; color: inherit; transition: border-color .15s;
}
.anreiss:hover { border-color: var(--campus); }
.anreiss:hover .anreiss-cta { color: var(--campus-dark); }
.anreiss-kopf { display: flex; gap: 12px; align-items: flex-start; }
.anreiss-kopf svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.anreiss h2, .anreiss h3, .anreiss h4 { font-size: 16.5px; }
.anreiss p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); flex: 1; }
.anreiss-cta { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-45); transition: color .15s; }

/* Gesichter in den Anreissern: ein Portraet oder eine Reihe kleiner runder
   Bilder, darunter Name und Funktion. Die Kachel ohne Gesichter behaelt ihren
   Platz, weil der Absatz darueber mit flex:1 die Hoehe ausgleicht. */
/* Gesichter stehen als eigener Fuss der Kachel, mit Trennlinie darueber –
   nebeneinander mit der Beschriftung bricht in einer 280 px breiten Kachel
   jede Zeile um. Die dritte Kachel hat keinen Fuss, weil es dort niemanden
   abzubilden gibt; durch die Linie liest sich das als Absicht. */
.anreiss-gesichter {
  display: block; margin-top: 4px; padding-top: 14px;
  border-top: 1px solid var(--surface);
  /* Feste Mindesthoehe, damit Linie und Bilder auch dann auf derselben Hoehe
     sitzen, wenn eine Beschriftung in einer anderen Schrift oder Breite doch
     zweizeilig umbricht. Ohne sie haengt die Ausrichtung an der Zeilenzahl,
     und die ist nicht in unserer Hand. 14 Innenabstand + 56 Bild + 8 +
     zwei Zeilen Beschriftung. */
  min-height: 130px;
}
/* Bildplatz und Fusshoehe sind fest, damit Trennlinie und Bilder in beiden
   Kacheln auf derselben Hoehe sitzen. Ohne das richtet der Absatz mit flex:1
   nur die Unterkante aus, und die Linien springen um knapp 40 px. */
.anreiss-bild { display: flex; align-items: center; height: 56px; margin-bottom: 8px; }
.anreiss-bild > img {
  display: block; width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; background: var(--surface);
}
.anreiss-gesichter-txt { display: block; font-size: 11.5px; color: var(--ink-45); line-height: 1.5; }
.anreiss-gesichter-txt strong { display: block; color: var(--ink); font-size: var(--fs-xs); margin-bottom: 2px; }
.gesichter-reihe { display: flex; }
.gesichter-reihe img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--white); background: var(--surface);
}
.gesichter-reihe img + img { margin-inline-start: -13px; }
/* Leise Kennzeichnung auf hellem Grund – der dunkle .ki-tag ist fuer die
   Ueberlagerung auf dem Video gemacht und waere hier ein Fremdkoerper. */
.ki-hinweis { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-45); }
.ki-hinweis svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* ── Anreisser fuer die Loeschuebung ─────────────────────────────────────
   Das zweite Produkt stand auf der Startseite nur als Nebensatz. Dieser
   Block gibt ihm Preis, Symbol und einen Weg zur eigenen Seite. */
.loeschanreiss {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: var(--sp-4); padding: 20px 22px;
  background: var(--white); border: 1px solid #FFD9C7; border-radius: var(--r);
  text-decoration: none; color: inherit; transition: border-color .15s;
}
.loeschanreiss:hover { border-color: var(--blaze); }
.loeschanreiss:hover .loeschanreiss-cta { color: var(--blaze-dark); }
.loeschanreiss-sym {
  width: 42px; height: 42px; border-radius: var(--r); background: var(--blaze-soft);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.loeschanreiss-sym svg { width: 21px; height: 21px; }
.loeschanreiss-txt { display: block; font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); }
.loeschanreiss-txt strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.loeschanreiss-cta { display: block; margin-top: 8px; font-weight: 700; color: var(--ink-45); transition: color .15s; }

/* ── Loeschuebungs-Band auf der Startseite ───────────────────────────────
   Ein schmaler eigener Abschnitt statt eines Kastens im Preisabsatz: das
   zweite Produkt bekommt einen Rahmen, ohne den Onlinekurs zu unterbrechen. */
/* Das Band sitzt jetzt INNERHALB des Preisabschnitts, nicht in einer eigenen
   Sektion. Der Aussenabstand kommt daher von oben. */
.loesch-band-inner { margin-top: var(--sp-5); }
.loesch-band-inner {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5);
  align-items: center;
  background: var(--white); border: 1px solid #FFD9C7; border-radius: var(--r);
  padding: 26px 30px;
}
.loesch-band-sym {
  width: 52px; height: 52px; border-radius: var(--r); background: var(--blaze-soft);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  align-self: start; margin-top: 2px;
}
.loesch-band-sym svg { width: 26px; height: 26px; }
.loesch-band-txt h2, .loesch-band-txt h3 { font-size: 20px; margin: 8px 0 6px; }
.loesch-band-txt p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); max-width: var(--textmax); margin: 0; }
.loesch-band-preis { text-align: end; flex: 0 0 auto; }
/* Preiskarte der Übungen (#574): rechts beginnt die Tabelle auf Höhe des Preises (unter dem Kicker), Knopf und Hinweis schließen
   unten mit der Liste links ab. Untereinander (≤ 960 px) ohne Versatz. */
.preis-zwei { align-items: stretch; }
.preis-zwei .buy-feats { margin-block-end: 0; }
.preis-zwei-rechts { display: flex; flex-direction: column; padding-block-start: 40px; }
.preis-zwei-rechts .btn { margin-block-start: auto; }
.preis-zwei-rechts .data { margin-block-end: 20px; }
.loesch-band-preis .buy-price { margin: 0; }

/* Fusszeile innerhalb einer Kaufkarte – gleiche Rolle wie .panel-foot,
   aber fuer .buy-card, wo unter dem Knopf noch ein Weg weiterfuehrt. */
.karte-fuss {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--surface);
  font-size: var(--fs-xs); color: var(--ink-45);
}
.karte-fuss a { color: var(--blaze-dark); font-weight: 700; text-decoration: none; }
.karte-fuss a:hover { text-decoration: underline; }

/* ── Kompakte Branchenkacheln ───────────────────────────────────
   Auf der Startseite reichen Symbol, Name und Schwerpunkt. Die
   ausführlichen Karten mit Beschreibung stehen auf branchen.html – sonst
   doppelt die Startseite eine ganze Unterseite. */
.branche.kompakt { padding: 20px; gap: 8px; }
.branche.kompakt .branche-icon { width: 38px; height: 38px; }
.branche.kompakt .branche-icon svg { width: 19px; height: 19px; }
.branche.kompakt h2, .branche.kompakt h3, .branche.kompakt h4 { font-size: 15px; }
.branche.kompakt .branche-focus { font-size: 10.5px; letter-spacing: 0.05em; }

/* ── Preisrechner ───────────────────────────────────────────────────────
   Steht vor der Staffeltabelle: die Frage ist „was kosten 14 Leute",
   nicht „wie ist die Staffel gebaut". */
.rechner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.rechner-feld { display: flex; align-items: baseline; gap: 12px; }
.rechner-feld input {
  font: inherit; font-size: 34px; font-weight: 800; letter-spacing: -0.02em;
  width: 132px; padding: 10px 14px; text-align: center;
  border: 1px solid var(--surface); border-radius: var(--r); background: var(--white); color: var(--ink);
}
.rechner-feld input:focus { outline: 2px solid var(--campus); outline-offset: -1px; }
.rechner-feld span { font-size: var(--fs-body); color: var(--ink-45); font-weight: 600; }
.rechner-schnell { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.rechner-schnell button {
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-70);
  background: var(--white); border: 1px solid var(--surface); border-radius: var(--r);
  padding: 7px 16px; cursor: pointer; transition: border-color .15s, color .15s;
}
.rechner-schnell button:hover { border-color: var(--campus); color: var(--ink); }

/* ── Stand im Firmen-Dashboard ─────────────────────────────────────
   Eine Aussage statt vier gleich großer Kennzahlen. */
.stand {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center;
  background: var(--white); border: 1px solid var(--surface); border-radius: var(--r);
  padding: 26px 28px; margin-bottom: var(--sp-4);
}
.stand-ring { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
.stand-ring svg { width: 120px; height: 120px; display: block; }
.stand-ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stand-ring-txt strong { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stand-ring-txt span { font-size: var(--fs-xs); color: var(--ink-45); margin-top: 2px; }
.stand-txt h2 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 8px; }
.stand-txt p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); max-width: var(--textmax); }
.stand-zeilen { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-70); }
.stand-zeilen span { display: inline-flex; align-items: center; gap: 7px; }
.pkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pkt.done { background: var(--campus); }
.pkt.run  { background: var(--ink-45); }
.pkt.open { background: var(--ink-25); }
.stand-tun { display: flex; flex-direction: column; gap: 8px; min-width: 210px; }

/* ── Sammelaktionen in Tabellen ─────────────────────────────────────── */
.massen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--linen); border: 1px solid var(--surface); border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 12px; }
.massen-zahl { font-size: var(--fs-sm); color: var(--ink-45); }
.massen-zahl strong { color: var(--ink); }
.massen-tun { display: flex; gap: 8px; flex-wrap: wrap; }
.massen-tun .btn[disabled] { opacity: .45; pointer-events: none; }
.data-auswahl .sp-check { width: 38px; padding-inline-end: 12px; }
.data-auswahl input[type="checkbox"] { accent-color: var(--campus); width: 15px; height: 15px; }
/* Feste Breiten fuer die schmalen Spalten: sonst teilt der Browser den Platz
   nach Textlaenge auf, die Aktionsspalte wird zu eng und "Erneut senden"
   bricht um. Der Name bekommt den Rest. */
.data-auswahl th:nth-child(2), .data-auswahl td:nth-child(2) { width: auto; }
.data-auswahl th:nth-child(3), .data-auswahl td:nth-child(3) { width: 130px; }
.data-auswahl th:nth-child(4), .data-auswahl td:nth-child(4) { width: 110px; }
.data-auswahl th:nth-child(5), .data-auswahl td:nth-child(5) { width: 130px; }
.data-auswahl th:last-child,  .data-auswahl td:last-child  { width: 130px; white-space: nowrap; }
.data-auswahl td:nth-child(2) { min-width: 190px; }

/* Drei gleich breite Nebenkarten unter der Tabelle. */
/* Suchen und Filter ueber einer breiten Tabelle: ohne Deckelung werden aus
   zwei Feldern zwei 500-px-Bloecke. */
.filter-row { grid-template-columns: 1fr 220px; max-width: 720px; }

.neben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.neben-grid > * { margin: 0 !important; min-width: 0; }

/* Fortschritt in der Kopfzeile der Kursansicht */
.kopf-prog { margin-top: 12px; max-width: 420px; }

/* Zertifikatsprüfung auf der Fehlerseite */
.fehler-pruefen { margin: var(--sp-6) auto 0; padding-top: var(--sp-5); border-top: 1px solid var(--surface); max-width: 520px; text-align: start; }
.fehler-pruefen h2 { font-size: 20px; margin-bottom: 8px; }
.fehler-pruefen p { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); margin-bottom: 16px; max-width: var(--textmax); }
.fehler-pruefen .nachweis-form-row { justify-content: flex-start; }

/* ── Mitlaufender Aktionsbalken am Telefon ──────────────────────────────
   Branchen- und Preisseite sind 5.000 bis 10.000 px lang. Ein Kaufknopf,
   den es nur ganz oben und ganz unten gibt, ist praktisch nicht da. */
.kauf-balken { display: none; }
@media (max-width: 900px) {
  .kauf-balken {
    display: flex; align-items: center; gap: 12px;
    position: fixed; inset-inline: 0; bottom: var(--proto-h, 0);
    z-index: 90; background: var(--white); border-top: 1px solid var(--surface);
    padding: 10px var(--gutter); box-shadow: 0 -6px 20px rgba(26,26,46,.08);
  }
  .kauf-balken-txt { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--ink-45); line-height: 1.35; }
  .kauf-balken-txt strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
  .kauf-balken .btn { white-space: nowrap; }
  body.hat-kauf-balken { padding-bottom: 74px; }
}

/* ── Responsiv für die neuen Bausteine ──────────────────────────────────
   Steht am Ende der Datei, weil die Grundregeln dieser Bausteine unterhalb
   der übrigen Medienabfragen stehen – sonst gewinnt die spätere Regel. */
@media (max-width: 900px) {
  .neben-grid { grid-template-columns: 1fr; }
  .loesch-band-inner { grid-template-columns: auto 1fr; row-gap: var(--sp-4); }
  .loesch-band-preis { grid-column: 1 / -1; text-align: start; }
  .nachweis-pruefen { grid-template-columns: 1fr; }
  .nachweis-form input { width: 100%; }
  .stand { grid-template-columns: auto 1fr; row-gap: var(--sp-4); }
  .stand-tun { grid-column: 1 / -1; min-width: 0; }
  .rechner { grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (max-width: 620px) {
  .nachweis-fakten { grid-template-columns: 1fr; gap: var(--sp-3); }
  .anreisser { grid-template-columns: 1fr; }
  .stand { grid-template-columns: 1fr; }
  .massen { flex-direction: column; align-items: flex-start; }
  .neben-grid { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr; }
  /* Die festen Spaltenbreiten der Mitarbeitertabelle gelten nur am
     Schreibtisch. Am Telefon soll die Tabelle so schmal werden, wie sie
     kann, statt auf 728 px zu bestehen. */
  .data-auswahl th, .data-auswahl td { width: auto !important; }
  /* Am Telefon zeigt die Tabelle, was man dort tut: wer, wie weit, was
     zu tun ist. Gruppe und Fortschritt fallen weg – sonst muesste die
     Tabelle seitlich gescrollt werden und die Aktionsspalte, die man
     eigentlich braucht, staende ausserhalb des Bildschirms. */
  table.data-auswahl { min-width: 0; }   /* schlaegt table.data { min-width: 460px } */
  .data-auswahl th:last-child, .data-auswahl td:last-child { white-space: normal; }
  .data-auswahl th:nth-child(3), .data-auswahl td:nth-child(3),
  .data-auswahl th:nth-child(4), .data-auswahl td:nth-child(4) { display: none; }
  .data-auswahl td:nth-child(2) { min-width: 0; }
  /* Nebeneinander bricht nur die laengste Zeile um – das sieht ungewollt
     aus. Am Telefon stehen deshalb alle Antworten unter ihrer Frage. */
  .fakt-zeile { flex-direction: column; align-items: flex-start; gap: 7px; }
  .loesch-band-inner { grid-template-columns: 1fr; gap: var(--sp-3); padding: 22px; }
  .loesch-band-preis { text-align: start; }
}

/* KI-Ethik: zwölf Leitlinien (#224) – Karten wie .branche, Nummer neben dem Symbol */
.leitlinie { cursor: default; }
.leitlinie:hover { border-color: var(--surface); }
.leitlinie-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leitlinie-nr { font-size: var(--fs-sm); font-weight: 800; color: var(--campus-dark); letter-spacing: 0.04em; }

/* Partner auf der Startseite (#472): Kacheln wie die Anreißer „Drei Dinge, die wir anders machen“ (.anreiss), Logo und eine Zeile; der
   Name steht im Logo und im aria-label des Links. Die Fußzeile nennt dieselben Partner. */
.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.partner-karte { display: flex; align-items: center; gap: 24px; padding: 26px; background: var(--white); border: 1px solid var(--surface); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.partner-karte:hover, .partner-karte:focus-visible { border-color: var(--campus); }
.partner-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.partner-logo-innolab img { inline-size: 80px; block-size: 80px; }
.partner-logo-ph svg { inline-size: 160px; block-size: 60px; }
.partner-text { font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-relaxed); }
@media (max-width: 900px) { .partner-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .partner-karte { flex-direction: column; align-items: flex-start; } }