/* ═══════════════════════════════════════════════════════════════
   DIENSTPLANBAUER IM VITALDESK-DESIGN: Unterseiten
   Ergaenzt vitaldesk-basis.css um die Bausteine der Fachseiten.
   Farben kommen bereits umgestellt aus tools\bauen.js.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --radius: 4px;
  --shadow: none;
  --font-display: var(--fineliner);
}

/* ── Kopf ───────────────────────────────────────────────────── */
.brand { font-family: var(--pinsel) !important; font-weight: 400 !important; letter-spacing: .02em; color: var(--navy); }
.brand span { color: var(--navy) !important; background: var(--marker); padding: 0 .08em; }
footer .brand, .footer .brand { color: #fff; }
footer .brand span, .footer .brand span { color: var(--gelb) !important; background: none; }
.nav { background: #fff; }
.btn-secondary, .btn-secondary:hover { background: #fff !important; color: var(--navy) !important; }
/* Rechtliches: schlanker Kopf mit Termin-Knopf */
.top .cta {
  background: var(--gelb) !important;
  color: var(--navy) !important;
  border: 2px solid var(--navy) !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 var(--navy) !important;
  font-weight: 800;
}

/* ── Ueberschriften: Navy auf hellem Grund, Pinsel im Hero ───── */
h1, h2, h3 { color: var(--navy); }
/* Dunkle Heros (Ablaufanalyse, Podcast) behalten weisse Schrift */
.hero:has(#hero-title) h1, body:has(.podcast-video) .hero h1, body:has(.podcast-video) .hero h2.as-h1 { color: #fff; }
h1, h2.as-h1 {
  font-family: var(--pinsel) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4.2vw, 3.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: .01em !important;
  transform: rotate(-1deg);
  transform-origin: left center;
}
h1 em, h2.as-h1 em { font-style: normal !important; color: var(--gelb) !important; text-shadow: 3px 3px 0 var(--navy); }
.eyebrow, .kicker, .hero .label {
  color: var(--navy) !important;
  background: var(--gelb-blass) !important;
  border: 1px solid var(--gelb) !important;
  border-radius: 4px !important;
}

/* Podcast-Seite: Titel mit langem Wort muss neben das Video passen */
.podcast-video h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem) !important; }

h2.as-h1 em { background: none; }

/* ── Abschnitte ─────────────────────────────────────────────── */
h2 em, .section-title em { font-style: normal; background: var(--marker); }
/* Volles Gelb statt Marker: lesbar auf hellen und dunklen Flaechen */
.section-label, .section-kicker, .eyebrow, .kicker { width: fit-content; }
.section-label, .section-kicker { color: var(--navy) !important; background: var(--gelb) !important; padding: .12rem .45rem !important; border-radius: 3px; }