/* ZahnPrüf Website — main.css
   Keine Inline-Styles, keine style-Attribute: die CSP in vercel.json erlaubt nur style-src 'self'.
   Nur logische CSS-Eigenschaften (margin-inline, padding-inline, inset-inline, text-align:start),
   damit die spaeter geplanten RTL-Sprachen ohne Umbau funktionieren. */

/* ── Schriften ─────────────────────────────────────────────────────────────── */
/* Selbst gehostet aus assets/fonts/ (WOFF2, Subsets latin und latin-ext).
   Die ?v=-Hashes setzt build.js beim Kopieren ein — die Assets werden unveraenderlich
   gecacht (vercel.json), ohne Hash bliebe eine ausgetauschte Schrift ein Jahr lang alt. */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-400-normal.woff2?v=918b7dc3') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-ext-400-normal.woff2?v=8b9fc973') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-400-italic.woff2?v=bca1d88a') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-ext-400-italic.woff2?v=077a69d5') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-latin-700-normal.woff2?v=c447dd76') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-latin-ext-700-normal.woff2?v=3a5797f4') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-600-normal.woff2?v=5d228694') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-ext-600-normal.woff2?v=cf968562') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-700-normal.woff2?v=28453852') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-ext-700-normal.woff2?v=edb9f5d8') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────────── */

:root {
  --bg: #f4f3ef;
  --ink: #1a2433;
  --head: #0d2137;
  --muted: #4d5866;
  --panel: #ebe8e0;
  --line: #d5d1c6;
  --gold: #d9b863;
  --gold-text: #80611a;
  --gold-tint: #f7efd9;
  --navy: #0d2137;
  --navy-2: #16304d;
  --navy-deep: #0a1a2c;
  --on-navy: #ffffff;
  --on-navy-muted: #d6dde7;
  --fund: #2a62a0;
  --fsp: #0b6e65;
  --kp: #3e3a6b;
  --pt: #8f6119;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-text: 'Lato', 'Segoe UI', Roboto, sans-serif;
  --measure: 680px;
  --gutter: 20px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b29;
    --ink: #e4e8ee;
    --head: #ffffff;
    --muted: #a9b4c2;
    --panel: #172638;
    --line: #2c3e55;
    --gold-text: #d9b863;
    --gold-tint: #1d2a33;
    --fund: #7fb0e6;
    --fsp: #5fc4b8;
    --kp: #b1acdf;
    --pt: #d9a95c;
  }
}

/* Navy-Flaechen (Kopf, Hero, Fuss) bleiben in beiden Modi navy — --navy, --navy-2,
   --navy-deep, --on-navy und --on-navy-muted werden im Dunkelmodus bewusst NICHT
   ueberschrieben. */

/* Vorbereitung fuer spaetere Sprachen: keine arabischen oder kyrillischen Schriften
   laden, sondern die Systemschrift nutzen. */
:lang(ar) {
  --font-text: system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-head: system-ui, 'Segoe UI', Tahoma, sans-serif;
}
:lang(ru) {
  --font-text: 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── Grundlagen ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  text-align: start;
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--head);
  line-height: 1.25;
  margin-block: 0 0.5em;
  /* Deutsche Komposita wie "Fachsprachenprüfung" sind in 32px breiter als eine
     Handy-Spalte und bringen sonst die ganze Seite zum Querscrollen. break-word
     bricht nur dann, wenn das Wort wirklich nicht passt. */
  overflow-wrap: break-word;
}

p { margin-block: 0 1em; }
p:last-child { margin-block-end: 0; }

a { color: var(--gold-text); }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.wrap {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ico {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--gutter);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: 16px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { inset-block-start: 10px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: var(--tap);
  padding-inline: 18px;
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.btn-ghost {
  border: 2px solid var(--gold);
  color: var(--on-navy);
}
.btn-ghost:hover { background: rgba(217, 184, 99, 0.16); }

.btn-primary {
  min-block-size: 54px;
  inline-size: 100%;
  background: var(--gold);
  color: var(--navy);
  font-size: 18px;
}
.btn-primary:hover { background: #e3c77d; }

.btn-social {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--on-navy);
  font-size: 15px;
}
.btn-social:hover { background: rgba(255, 255, 255, 0.1); }

/* ── Kopf ──────────────────────────────────────────────────────────────────── */

.site-head {
  background: var(--navy);
  color: var(--on-navy);
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 64px;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: var(--tap);
  color: var(--on-navy);
  text-decoration: none;
}

.brand-mark {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 8px;
}

.brand-word {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: 40px 44px;
}

.eyebrow {
  margin-block-end: 12px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-title {
  margin-block-end: 16px;
  color: var(--on-navy);
  font-size: 40px;
  font-weight: 700;
}

.hero-text {
  margin-block-end: 24px;
  color: var(--on-navy-muted);
  font-size: 18px;
}

.hero-actions { margin-block-end: 14px; }

/* .hero-more gilt NUR auf Navy-Flaechen: --gold hat dort 8,52:1, auf der hellen
   Seitenflaeche dagegen 1,72:1 und waere unlesbar. Fuer denselben Link auf heller
   Flaeche gibt es .weiter-link mit --gold-text (5,19:1 hell, 9,07:1 dunkel). */
.hero-more,
.weiter-link {
  margin-block-end: 26px;
  font-size: 16px;
}
.hero-more a,
.weiter-link a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  text-decoration: underline;
}
.hero-more a { color: var(--gold); }
.weiter-link a { color: var(--gold-text); }

.points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-navy);
  font-size: 16px;
}
.ico-check { color: var(--gold); }

@media (min-width: 768px) {
  .hero { padding-block: 56px 60px; }
  .hero-title { font-size: 52px; }
  .btn-primary { inline-size: auto; min-inline-size: 260px; max-inline-size: 360px; }
}

/* ── Rechtsseiten und 404 ──────────────────────────────────────────────────── */

.legal {
  padding-block: 32px 48px;
}

.legal-title {
  font-size: 32px;
  font-weight: 700;
  margin-block-end: 20px;
}

.legal-lead { font-size: 18px; }

.legal-body h2 {
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin-block: 28px 8px;
}

@media (prefers-color-scheme: dark) {
  .legal-body h2 { color: var(--head); }
}

.legal-body p { color: var(--ink); }

/* Links im Rechtstext stehen mitten im Fliesstext und sind ohne Zutun nur so hoch wie
   die Schrift (gemessen 21 px). Senkrechtes Polster an einem INLINE-Element vergroessert
   die Trefferflaeche auf ueber 44 px, ohne den Zeilenfall zu veraendern — anders als
   display:inline-block, das einen langen Link nicht mehr umbrechen liesse. Die
   Rechtstexte fuehren hoechstens einen Link je Absatz, ueberlappende Trefferflaechen
   benachbarter Zeilen sind hier also kein Thema. */
.legal-body a { padding-block: 12px; }

.legal-stand {
  margin-block-start: 32px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

/* ── Fuss ──────────────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding-block: 32px 36px;
}

.foot-word {
  margin-block-end: 4px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  color: var(--on-navy);
}

.foot-tagline {
  margin-block-end: 20px;
  color: var(--on-navy-muted);
  font-size: 15px;
}

.foot-links,
.foot-social {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: var(--on-navy);
  font-size: 16px;
}

.foot-contact {
  margin-block-end: 18px;
  color: var(--on-navy-muted);
  font-size: 16px;
}
.foot-contact a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: var(--gold);
}

.foot-note {
  margin-block-start: 6px;
  color: var(--on-navy-muted);
  font-size: 14px;
}

/* ── Bewegung ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STARTSEITE — Abschnitte
   Alles ohne JavaScript: Auf- und Zuklappen über <details>/<summary>, der
   Bilderstreifen über overflow-x + scroll-snap.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Abschnittsgerüst ──────────────────────────────────────────────────────── */

.sec { padding-block: 44px; }
.sec--panel { background: var(--panel); }
.sec--navy { background: var(--navy); color: var(--on-navy); }
.sec--navy .sec-title { color: var(--on-navy); }

.sec-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 10px;
}

.sec-sub {
  margin-block-end: 26px;
  color: var(--muted);
  font-size: 17px;
}

.note {
  margin-block-start: 20px;
  color: var(--muted);
  font-size: 14px;
}

.credit {
  margin-block-start: 14px;
  color: var(--muted);
  font-size: 13px;
}

/* ── a) Hero-Ausschnitt ────────────────────────────────────────────────────── */

/* Unten bündig mit der Navy-Fläche: der Hero verliert sein unteres Polster, der
   Rahmen hat unten keinen Rand und keine runden Ecken. */
.hero { padding-block-end: 0; }

.hero-shot {
  display: flex;
  justify-content: center;
  margin-block-start: 34px;
}

.hero-shot img {
  inline-size: 250px;
  block-size: 330px;
  object-fit: cover;
  object-position: top;
  border: 7px solid #2a4566;
  border-block-end: 0;
  border-start-start-radius: 30px;
  border-start-end-radius: 30px;
  background: var(--navy-2);
}

/* ── b) Weg ───────────────────────────────────────────────────────────────── */

.weg {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.weg-item {
  position: relative;
  padding-inline-start: 46px;
  padding-block-end: 26px;
}
.weg-item:last-child { padding-block-end: 0; }

.weg-marker {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 3px;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
}

/* Die Verbindungslinie hängt am Element und läuft von der Unterkante des Markers
   bis zum Marker der nächsten Station. */
.weg-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 12.5px;
  inset-block-start: 35px;
  inset-block-end: -3px;
  inline-size: 3px;
}
.weg-item:last-child::before { content: none; }

.weg-item--fund .weg-marker { background: var(--fund); }
.weg-item--fsp  .weg-marker { background: var(--fsp); }
.weg-item--kp   .weg-marker { background: var(--kp); }

.weg-item--fund .weg-title { color: var(--fund); }
.weg-item--fsp  .weg-title { color: var(--fsp); }
.weg-item--kp   .weg-title { color: var(--kp); }
.weg-item--ziel .weg-title { color: var(--gold-text); }

.weg-item--fund::before { background: linear-gradient(var(--fund), var(--fsp)); }
.weg-item--fsp::before  { background: linear-gradient(var(--fsp), var(--kp)); }

/* Zwischen Kenntnisprüfung und Approbation gestrichelt: der Schritt ist nicht Teil
   des Übens, sondern das Verfahren danach. */
.weg-item--kp::before {
  background: none;
  inline-size: 0;
  border-inline-start: 3px dashed var(--line);
}

/* Die Zielstation trägt ein Schild statt eines Punktes. Beide liegen im Markup;
   welches sichtbar ist, entscheidet die Klasse — so braucht die Inhalts-JSON kein
   zusätzliches Feld. */
.weg-shield { display: none; }
.weg-item--ziel .weg-marker { background: none; }
.weg-item--ziel .weg-shield {
  display: block;
  inline-size: 28px;
  block-size: 28px;
  color: var(--gold);
}

.weg-title {
  font-size: 22px;
  font-weight: 700;
  margin-block-end: 6px;
}

.weg-text { margin-block-end: 0; }

/* ── Kasten „Außerdem in der App" ──────────────────────────────────────────── */

.box {
  background: var(--panel);
  border-radius: 14px;
  padding: 20px 18px;
}

.box-title {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 700;
  margin-block-end: 12px;
}

.box-dl { margin: 0; }
.box-dl dt {
  font-weight: 700;
  margin-block-start: 12px;
}
.box-dl dt:first-child { margin-block-start: 0; }
.box-dl dd {
  margin-inline-start: 0;
  color: var(--muted);
}
.box-dl dd a { padding-block: 12px; }

/* ── c) Praxisteam ────────────────────────────────────────────────────────── */

.pt-card {
  border: 1.5px solid var(--pt);
  border-radius: 16px;
  padding: 22px 18px;
}

.pt-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block-end: 10px;
  color: var(--pt);
  font-size: 15px;
  font-weight: 700;
}

.pt-dot {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--pt);
  flex: none;
}

.pt-title {
  font-size: 26px;
  font-weight: 700;
  margin-block-end: 12px;
}

.pt-steps {
  margin: 18px 0;
  padding: 0;
  list-style: none;
  counter-reset: pt;
}
.pt-steps li {
  counter-increment: pt;
  position: relative;
  padding-inline-start: 32px;
  margin-block-end: 8px;
}
.pt-steps li::before {
  content: counter(pt) ".";
  position: absolute;
  inset-inline-start: 0;
  color: var(--pt);
  font-weight: 700;
}

.pt-note {
  margin-block: 16px;
  color: var(--muted);
  font-size: 14px;
}

.btn-pt {
  inline-size: 100%;
  min-block-size: 50px;
  border: 2px solid var(--pt);
  color: var(--pt);
}
.btn-pt:hover { background: var(--gold-tint); }

/* ── d) So funktioniert’s ─────────────────────────────────────────────────── */

.how {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: how;
}
.how li {
  counter-increment: how;
  position: relative;
  padding-inline-start: 46px;
  margin-block-end: 18px;
}
.how li:last-child { margin-block-end: 0; }
.how li::before {
  content: counter(how);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -6px;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-text);
}
.how p { margin-block-end: 0; }

/* ── e) Einblick ──────────────────────────────────────────────────────────── */

/* Der Streifen liegt außerhalb von .wrap und bringt sein eigenes seitliches Polster
   mit, damit die erste und die letzte Karte am Rand nicht anstoßen. */
.strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  padding-block-end: 6px;
  -webkit-overflow-scrolling: touch;
}

.shot {
  margin: 0;
  flex: none;
  inline-size: 220px;
  scroll-snap-align: start;
}

.shot img {
  inline-size: 220px;
  block-size: 404px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.shot figcaption {
  margin-block-start: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ── f) Gut zu wissen ─────────────────────────────────────────────────────── */

.fakt {
  padding-block: 18px;
  border-block-start: 1px solid var(--line);
}
.fakt:first-child { border-block-start: 0; padding-block-start: 0; }

.fakt-title {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 700;
  margin-block-end: 6px;
}

.fakt-source {
  margin-block-end: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.fakt-link { margin-block-end: 8px; }
.fakt-link a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: var(--gold-text);
  font-weight: 700;
}

/* ── g) Wer steckt dahinter ───────────────────────────────────────────────── */

.team-img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 900 / 757;
  object-fit: cover;
  border-radius: 16px;
  margin-block-end: 22px;
}

.team-text p {
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.7;
}

.team-sign {
  margin-block-start: 18px;
  font-style: italic;
  color: var(--muted);
}

/* Auf- und Zuklappen ohne JavaScript. Das Pluszeichen dreht sich beim Öffnen um
   45 Grad und wird dadurch zum ×; bei prefers-reduced-motion entfällt nur die
   Bewegung, nicht das Zeichen (s. Block am Dateiende). */
.mehr { margin-block-start: 8px; }

.mehr > summary,
.frage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-weight: 700;
}
.mehr > summary::-webkit-details-marker,
.frage > summary::-webkit-details-marker { display: none; }

.mehr > summary::after,
.frage > summary::after {
  content: "+";
  flex: none;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-text);
  transition: transform .18s ease;
}
.mehr[open] > summary::after,
.frage[open] > summary::after { transform: rotate(45deg); }

.mehr > summary {
  min-block-size: var(--tap);
  font-size: 17px;
  color: var(--gold-text);
}

.mehr-body { padding-block-start: 6px; }

/* ── h) Qualität ──────────────────────────────────────────────────────────── */

.qual-item { margin-block-end: 20px; }
.qual-item:last-child { margin-block-end: 0; }

.qual-title {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
  margin-block-end: 4px;
}

.qual-text {
  margin-block-end: 0;
  color: var(--on-navy-muted);
}

/* ── i) Preise ────────────────────────────────────────────────────────────── */

.tabelle-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.preise {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: start;
}

.preise th,
.preise td {
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
}

.preise thead th {
  background: var(--panel);
  color: var(--head);
  font-weight: 700;
  white-space: nowrap;
}
/* Dritte Spalte ist „Pro". nth-child zählt in Dokumentreihenfolge und bleibt
   deshalb auch in RTL die richtige Spalte. */
.preise thead th:nth-child(3) { color: var(--gold-text); }

.preise tbody tr { border-block-start: 1px solid var(--line); }
.preise tbody td:first-child { font-weight: 700; }

.passes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-block-start: 18px;
}

.pass {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
}

.pass--gold {
  border: 2px solid var(--gold);
  background: var(--gold-tint);
}

.pass-label {
  margin-block-end: 6px;
  color: var(--muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pass-price {
  margin-block-end: 4px;
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 700;
  color: var(--head);
  line-height: 1.1;
}

.pass-days {
  margin-block-end: 0;
  color: var(--muted);
  font-size: 14px;
}

/* ── j) Persönliche Unterstützung ─────────────────────────────────────────── */

.ber-list {
  margin: 18px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ber-list li {
  display: flex;
  align-items: start;
  gap: 10px;
}
/* Der Vorgabewert #8f6119 ist der Goldbraun-Ton des Hellmodus. Auf der dunklen
   Panel-Fläche käme er auf 2,84:1 und wäre selbst als Grafik (WCAG 1.4.11, 3:1)
   zu schwach; im Dunkelmodus greift deshalb --pt (#d9a95c, 7,13:1). Im Hellmodus
   bleibt der vorgegebene Wert unverändert. */
.ico-check--pt { color: #8f6119; }

@media (prefers-color-scheme: dark) {
  .ico-check--pt { color: var(--pt); }
}

.ber-price {
  margin-block: 18px 10px;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--head);
}

.btn-navy {
  inline-size: 100%;
  min-block-size: 50px;
  margin-block-start: 18px;
  background: var(--navy);
  color: var(--on-navy);
}
.btn-navy:hover { background: var(--navy-2); }

/* ── k) Ratgeber ──────────────────────────────────────────────────────────── */

.artikel {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.artikel li { border-block-start: 1px solid var(--line); }
.artikel li:first-child { border-block-start: 0; }
.artikel a {
  display: block;
  padding-block: 16px;
  color: var(--ink);
  text-decoration: none;
}
.artikel a:hover .artikel-title { text-decoration: underline; }

.artikel-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.artikel-sub {
  display: block;
  margin-block-start: 4px;
  color: var(--muted);
  font-size: 15px;
}

/* ── l) Stimmen ───────────────────────────────────────────────────────────── */

.stimmen {
  margin: 0;
  padding: 0;
  list-style: none;
}
.stimme { margin-block-end: 20px; }
.stimme blockquote { margin: 0; }
.stimme-wer {
  margin-block-end: 0;
  color: var(--muted);
  font-size: 15px;
}

/* ── m) Häufige Fragen ────────────────────────────────────────────────────── */

.frage { border-block-start: 1px solid var(--line); }
.frage:first-child { border-block-start: 0; }

.frage > summary {
  min-block-size: 56px;
  padding-block: 12px;
  font-size: 17px;
  color: var(--ink);
}

.frage-body { padding-block-end: 14px; }
.frage-body p { margin-block-end: 0; }

/* ── n) Schluss ───────────────────────────────────────────────────────────── */

.sec--ende { text-align: center; }
.sec--ende .btn-primary { margin-inline: auto; }

.ende-text {
  margin-block-end: 22px;
  color: var(--on-navy-muted);
  font-size: 18px;
}

/* ── Ab 768 px ────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .sec { padding-block: 48px; }
  .btn-pt,
  .btn-navy { inline-size: auto; min-inline-size: 260px; }
}

/* ── Ratgeber ─────────────────────────────────────────────────────────────── */

/* Textbreite bleibt bei --measure (680px); die Regel dafuer steht an .wrap. Tabellen
   im Artikeltext liegen in .tabelle-wrap und scrollen dort in sich — dieselbe Klasse
   wie die Preistabelle, scripts/markdown.js erzeugt sie. */

.artikel-stand {
  display: block;
  margin-block-start: 4px;
  color: var(--muted);
  font-size: 13px;
}

.krumen {
  margin-block-end: 14px;
  font-size: 15px;
}
.krumen a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
}

.artikel-h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 10px;
}

.artikel-meta {
  margin-block-end: 26px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.artikel-body h2 {
  font-size: 24px;
  font-weight: 700;
  margin-block: 32px 10px;
}
.artikel-body h3 {
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 700;
  margin-block: 24px 8px;
}

.artikel-body ul,
.artikel-body ol {
  margin-block: 0 1em;
  padding-inline-start: 22px;
}
.artikel-body li { margin-block-end: 6px; }

.artikel-body a { padding-block: 12px; }

.artikel-body blockquote {
  margin: 20px 0;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--gold);
  color: var(--muted);
  font-style: italic;
}

.artikel-body .tabelle-wrap { margin-block: 20px; }
.artikel-body table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.artikel-body th,
.artikel-body td {
  padding: 10px 12px;
  text-align: start;
  vertical-align: top;
}
.artikel-body thead th {
  background: var(--panel);
  color: var(--head);
  font-weight: 700;
  white-space: nowrap;
}
.artikel-body tbody tr { border-block-start: 1px solid var(--line); }

/* Fussnoten-Verweis: klein und hochgestellt, aber mit genug Flaeche zum Tippen.
   line-height 0 haelt die Zeilenhoehe des Absatzes stabil, obwohl das senkrechte
   Polster die Trefferflaeche vergroessert. */
.artikel-body sup {
  font-size: 12px;
  line-height: 0;
}
/* 15px Polster, nicht 14: bei 12px Schrift ergaben 14px genau 43px Trefferflaeche und
   damit einen Pixel zu wenig. Nachgemessen im Browser, nicht gerechnet. */
.artikel-body sup a {
  padding-inline: 2px;
  padding-block: 15px;
  font-weight: 700;
  text-decoration: none;
}
.artikel-body sup a:hover { text-decoration: underline; }

.artikel-body ol.quellen {
  font-size: 14px;
  color: var(--muted);
}
.artikel-body ol.quellen li { margin-block-end: 8px; }
/* Quellenangaben tragen lange URLs. anywhere bricht sie notfalls mitten im Wort um,
   statt den Container zu sprengen — bei 360 px passt sonst keine Fundstelle hinein. */
.artikel-body ol.quellen,
.artikel-body ol.quellen a { overflow-wrap: anywhere; }
/* Die Quellenliste steht in 14px; das Polster aus .artikel-body a reichte dort nur fuer
   41px Trefferflaeche. */
.artikel-body ol.quellen a { padding-block: 15px; }

/* Ein angesprungener Quelleneintrag wird kurz hervorgehoben, damit man ihn findet. */
.artikel-body ol.quellen li:target {
  background: var(--gold-tint);
  border-radius: 6px;
}

.artikel-disclaimer {
  margin-block-start: 32px;
  padding: 14px 16px;
  border-inline-start: 3px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.artikel-cta {
  margin-block-start: 28px;
  padding: 22px 18px;
  background: var(--panel);
  border-radius: 14px;
  text-align: center;
}
.artikel-cta .btn-primary { margin-inline: auto; }