/* ============================================================
   DIETRICH AKADEMIE - Entwurf 2
   Tokens: eine Palette (kühle Stahl-Neutrals + Markenrot)
   Ein Akzent: #CE1F2E. Ein Radius: 6px. Ein Theme mit Auto-Dark.
   Ausgelagert aus dem ursprünglich inline eingebetteten <style>-Block,
   damit alle Seiten (Startseite, Leistungs-Unterseiten, Rechtstexte)
   eine einzige Quelle für Design-Tokens und Komponenten teilen.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Flächen und Text */
  --bg:          #F7F8F9;
  --surface:     #FFFFFF;
  --surface-2:   #ECEEF0;
  --line:        #DDE1E5;
  --line-strong: #C4CBD2;
  --ink:         #1B2530;
  --ink-2:       #566270;
  --ink-3:       #7E8B97;

  /* Akzent (Markenrot aus dem Logo) */
  --accent:      #CE1F2E;
  --accent-hov:  #A81826;
  --accent-text: #CE1F2E;
  --accent-soft: rgba(206, 31, 46, 0.07);
  --on-accent:   #FFFFFF;

  /* Der eine dunkle Farbblock (Kontakt + Footer) */
  --deep:        #17202A;
  --deep-2:      #1F2A36;
  --deep-line:   rgba(255,255,255,0.13);
  --on-deep:     #F1F4F6;
  --on-deep-2:   #A3AFBA;
  --on-deep-3:   #7E8B97;
  --deep-accent: #F2606B;

  /* System */
  --r: 6px;
  --shell: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #12181E;
    --surface:     #18212B;
    --surface-2:   #1D2732;
    --line:        #2A3541;
    --line-strong: #3A4855;
    --ink:         #EDF1F4;
    --ink-2:       #A9B4BF;
    --ink-3:       #7E8B97;
    --accent-text: #F2606B;
    --accent-soft: rgba(242, 96, 107, 0.10);
    --deep:        #0C1116;
    --deep-2:      #141C24;
    --on-deep:     #EDF1F4;
    --focus:       #F2606B;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

/* ---------- Typo-Skala ---------- */
/* Obergrenze bewusst niedrig gehalten. text-wrap: balance (siehe unten bei
   h1-h4) übernimmt den Zeilenumbruch der Hero-Headline automatisch, auch
   wenn die Slogan-Zeile "Praxisnah. Rechtssicher. Direkt." länger ist als
   der frühere Titeltext. */
.h1 { font-size: clamp(2.1rem, 3.7vw, 3.2rem); line-height: 1.06; font-weight: 800; overflow-wrap: break-word; }
.h2 { font-size: clamp(1.75rem, 3.3vw, 2.7rem); }
.h3 { font-size: 1.1875rem; letter-spacing: -0.012em; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--ink-2); max-width: 52ch; }
.body { color: var(--ink-2); max-width: 62ch; }
.small { font-size: 0.9375rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: currentColor; flex: none;
}

/* ---------- Layout ---------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(32px, 4.5vw, 58px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9688rem;
  letter-spacing: -0.005em;
  padding: 13px 24px; border-radius: var(--r);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .12s var(--ease);
}
.btn i { font-size: 1.05em; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hov); }

.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }

.btn-on-deep { border-color: rgba(255,255,255,0.28); color: var(--on-deep); background: transparent; }
.btn-on-deep:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }

.btn-block { width: 100%; }

/* ---------- Header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.masthead[data-stuck="true"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.masthead-in {
  height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 56px; width: auto; }
@media (prefers-color-scheme: dark) {
  /* Der Logo-Schriftzug ist dunkel eingefärbt - auf dunklem Grund bleibt
     die helle Platte, damit er lesbar bleibt. */
  .brand { background: #FFFFFF; padding: 6px 10px; border-radius: var(--r); }
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-2);
  padding: 6px 0; position: relative; white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0; background: var(--accent);
  transition: width .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.nav a.ext { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.nav a.ext i { font-size: 0.85em; }

/* Nicht-klickbarer "Bald verfügbar"-Hinweis (z. B. Lernportal), bis eine echte
   Ziel-URL existiert - bewusst kein href="#", damit kein toter Link entsteht. */
.nav-soon { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); cursor: default; }
.tile-badge.nav-soon-badge { position: static; font-size: 0.625rem; padding: 3px 8px; }
.mobile-panel .nav-soon { justify-content: space-between; width: 100%; padding: 15px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }

/* Buttons in Navigationskontexten: Buttonfarben müssen die Link-Defaults schlagen */
.nav a.btn-primary,
.mobile-panel a.btn-primary { color: var(--on-accent); }
.nav a.btn::after,
.mobile-panel a.btn::after { display: none; }
.mobile-panel a.btn { border-bottom: 1.5px solid transparent; justify-content: center; }

.nav-toggle {
  display: none; background: transparent; border: 1.5px solid var(--line-strong);
  border-radius: var(--r); width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center; font-size: 1.25rem; color: var(--ink);
}

.mobile-panel {
  display: none;
  position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 1;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 8px var(--gut) 24px;
}
.mobile-panel[data-open="true"] { display: block; }
.mobile-panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}
.mobile-panel .btn { margin-top: 20px; }
body.menu-open { overflow: hidden; }
body.menu-open .sticky-bar { display: none; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Hero (asymmetrischer Split) ---------- */
.hero { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-grid > div { min-width: 0; }
.hero h1 { margin-bottom: 22px; }
.h1 em, .h2 em { font-style: normal; color: var(--accent-text); }
.hero .lead { margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.media {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--surface-2);
}
.media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-media { aspect-ratio: 4 / 3.35; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 16 / 10; order: -1; }
}

/* ---------- Faktenband ---------- */
.facts { border-block: 1px solid var(--line); background: var(--surface); }
.facts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.fact {
  padding: 30px clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--line);
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact:last-child { padding-right: 0; }
.fact i { font-size: 1.5rem; color: var(--accent-text); display: block; margin-bottom: 14px; }
.fact strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.012em; margin-bottom: 4px;
}
.fact span { display: block; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 900px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .fact { padding: 24px 20px; border-top: 1px solid var(--line); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fact:nth-child(even) { padding-right: 0; }
}
@media (max-width: 520px) {
  .facts-grid { grid-template-columns: 1fr; }
  .fact { border-left: 0; padding: 22px 0; }
  .fact:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .fact:first-child { border-top: 0; }
}

/* ---------- Leistungen (Bento, 8 Zellen) ---------- */
.sec-head { max-width: 640px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.sec-head .h2 { margin-bottom: 14px; }

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.tile {
  position: relative; overflow: hidden;
  grid-column: span 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 216px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tile:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(27, 37, 48, 0.45);
}
.tile-3 { grid-column: span 3; min-height: 300px; }
.tile-4 { grid-column: span 4; min-height: 280px; }

.tile i.tile-icon { font-size: 1.5rem; color: var(--accent-text); margin-bottom: auto; }
.tile h3 { margin: 20px 0 8px; }
.tile p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.55; }
.tile .go {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.875rem;
  color: var(--ink);
}
.tile .go i { transition: transform .22s var(--ease); }
.tile:hover .go i { transform: translateX(4px); }

/* Gleiche Optik wie .tile .go, aber frei einsetzbar außerhalb von Kacheln
   (z. B. "Mehr über mich"-Link im Über-uns-Teaser) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.875rem;
  color: var(--ink);
}
.link-arrow i { transition: transform .22s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* Neu-Kennzeichnung für frisch aufgenommene Leistungen */
.tile-badge {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  padding: 4px 9px; border-radius: 999px;
}

/* Bildkacheln: Foto + Scrim, Text immer kontraststark */
.tile-photo { border-color: transparent; color: #FFFFFF; }
.tile-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: contrast(1.03);
  z-index: 0;
}
.tile-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,21,28,0.74) 0%, rgba(15,21,28,0.62) 34%, rgba(15,21,28,0.88) 72%, rgba(15,21,28,0.96) 100%);
}
.tile-photo > * { position: relative; z-index: 2; }
.tile-photo i.tile-icon { color: #FF8A93; }
.tile-photo p { color: rgba(255,255,255,0.82); }
.tile-photo .go { color: #FFFFFF; }
.tile-photo:hover { border-color: var(--accent); }

@media (max-width: 1040px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .tile, .tile-3 { grid-column: span 2; }
  .tile-4 { grid-column: span 4; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile-3, .tile-4 { grid-column: span 1; min-height: 0; }
  .tile-3, .tile-photo { min-height: 240px; }
}

/* ---------- Zweisprachigkeit (Aussageband) ---------- */
/* ---------- Partner ---------- */
.partner-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.partner-card {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 96px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
}
.partner-card img { max-height: 68px; width: auto; max-width: 100%; }
.partner-card img.partner-logo-lg { max-height: 92px; }
.partner-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.3; }
.partner-name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 760px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Bewertungen (Karussell: manuell per Pfeil/Punkte/Swipe) ---------- */
.reviews-carousel { overflow: hidden; }
.reviews-track {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  margin: -2px; padding: 2px;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  position: relative; scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * 14px) / 3);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 22px;
}
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.review-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; }
.review-source { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--ink-3); }
.review-stars { color: var(--accent-text); letter-spacing: 2px; margin-bottom: 8px; }
.review-quote { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 1040px) { .review-card { flex: 0 0 calc((100% - 14px) / 2); } }
@media (max-width: 680px) { .review-card { flex: 0 0 100%; } }

.reviews-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.reviews-arrow {
  flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.reviews-arrow:hover { border-color: var(--ink); background: var(--surface-2); }
.reviews-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.reviews-dots { display: flex; align-items: center; gap: 8px; }
.reviews-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--line-strong); cursor: pointer; }
.reviews-dot.is-active { background: var(--accent); }

.bilingual { background: var(--surface-2); border-block: 1px solid var(--line); }
/* Die Aussage steht zweimal nebeneinander: das Prinzip der Sektion als Layout */
.bi-statement {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.bi-statement .h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); max-width: 19ch; }
.bi-echo {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink-3);
  max-width: 19ch;
}
.bi-rule { height: 1px; background: var(--line-strong); margin: clamp(34px, 4.5vw, 52px) 0; }
.bi-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.bi-cols p { color: var(--ink-2); max-width: 46ch; }
.bi-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.bi-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 7px 14px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent-text) 24%, transparent);
}
@media (max-width: 760px) {
  .bi-cols, .bi-statement { grid-template-columns: 1fr; }
  .bi-statement .h2, .bi-echo { max-width: 100%; }
}

/* ---------- Ablauf (vertikale Timeline) ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.steps { border-left: 2px solid var(--line); }
.step { position: relative; padding: 0 0 clamp(32px, 4vw, 44px) clamp(24px, 3vw, 38px); }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ''; position: absolute; left: -7px; top: 8px;
  width: 12px; height: 12px; border-radius: 2px;
  background: var(--accent);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 0.9688rem; max-width: 54ch; }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
}

/* ---------- Ausbilder (Portraitsplit) ---------- */
.trainer { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 68px); align-items: center; }
.trainer-media { aspect-ratio: 4 / 5; }
.trainer-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--accent-text); margin-top: 8px; }
.pull {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.28; letter-spacing: -0.02em;
  border-left: 3px solid var(--accent);
  padding-left: 22px; margin: 30px 0;
  max-width: 34ch;
}
.trainer-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.trainer-meta div { font-size: 0.9375rem; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.trainer-meta i { color: var(--accent-text); }
@media (max-width: 860px) {
  .trainer { grid-template-columns: 1fr; }
  .trainer-media { aspect-ratio: 3 / 2; max-height: 380px; }
}

/* ---------- Kontakt + Footer: der eine Farbblock ---------- */
.deep { background: var(--deep); color: var(--on-deep); }
.deep .eyebrow { color: var(--deep-accent); }
.deep .h2 { color: var(--on-deep); }
.deep .body { color: var(--on-deep-2); }
.deep select { color-scheme: dark; }

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 76px); align-items: start;
}

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.005em; color: var(--on-deep);
}
.field label .req { color: var(--deep-accent); }
.field .hint { font-size: 0.8125rem; color: var(--on-deep-3); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.055);
  border: 1.5px solid var(--deep-line);
  border-radius: var(--r);
  padding: 12px 14px;
  color: var(--on-deep);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
/* Native <select>-Dropdowns rendern das Popup browserabhängig oft weiß,
   egal was die transparente .field-Fläche vorgibt - solide Farbe statt
   Transparenz behebt das zuverlässig. */
.field select { background-color: #24303D; }
.field select option { background-color: #24303D; color: var(--on-deep); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-deep-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,0.3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--deep-accent); outline-offset: 2px;
  background: rgba(255,255,255,0.09);
}
.field .err {
  display: none; font-size: 0.8125rem; color: var(--deep-accent);
  align-items: center; gap: 6px;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--deep-accent); }
.field[data-invalid="true"] .err { display: flex; }

/* Honeypot-Feld gegen Formular-Spam-Bots: für Menschen unsichtbar, aber im
   DOM vorhanden und ausfüllbar - das reicht, um simple Bots zu entlarven,
   ohne echte Nutzer mit einem Captcha zu belasten. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.consent label { font-size: 0.875rem; color: var(--on-deep-2); font-family: var(--font-body); font-weight: 400; line-height: 1.5; }
.consent a { color: var(--on-deep); text-decoration: underline; text-underline-offset: 3px; }

.form-status {
  display: none; gap: 10px; align-items: flex-start;
  border: 1.5px solid var(--deep-line); border-radius: var(--r);
  padding: 16px 18px; margin-top: 18px; font-size: 0.9375rem; color: var(--on-deep-2);
}
.form-status[data-state="success"] { display: flex; border-color: rgba(110,200,140,0.5); }
.form-status[data-state="error"] { display: flex; border-color: var(--deep-accent); }
.form-status i { font-size: 1.2rem; flex: none; margin-top: 1px; }
.form-status[data-state="success"] i { color: #6EC88C; }
.form-status[data-state="error"] i { color: var(--deep-accent); }

.btn-primary[data-loading="true"] { pointer-events: none; opacity: 0.75; }
.btn-primary[data-loading="true"] .spin { display: inline-block; }
.spin { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary[data-loading="true"] .spin { animation: rot 0.9s linear infinite; }
}
@keyframes rot { to { transform: rotate(360deg); } }

.direct { border-top: 1px solid var(--deep-line); }
.direct li { list-style: none; display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--deep-line); }
.direct i { font-size: 1.25rem; color: var(--deep-accent); flex: none; margin-top: 2px; }
.direct b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; margin-bottom: 2px; }
.direct span, .direct a { color: var(--on-deep-2); font-size: 0.9375rem; }
.direct a:hover { color: var(--on-deep); }

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

/* ---------- Footer ---------- */
.foot { background: var(--deep-2); color: var(--on-deep-2); border-top: 1px solid var(--deep-line); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(44px, 5vw, 64px);
}
.foot-brand {
  display: inline-block; background: #FFFFFF;
  padding: 8px 12px; border-radius: var(--r); margin-bottom: 20px;
}
.foot-brand img { height: 48px; width: auto; }
.foot p { font-size: 0.9375rem; max-width: 36ch; }
.foot h4 {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-deep-3); margin-bottom: 16px; font-weight: 700;
}
.foot li { list-style: none; margin-bottom: 11px; }
.foot li a { font-size: 0.9375rem; }
.foot li a:hover { color: var(--on-deep); }
.foot-bottom {
  border-top: 1px solid var(--deep-line);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 0.875rem; color: var(--on-deep-3);
}
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-grid > :first-child { grid-column: span 2; }
}

/* ---------- Mobile Sticky CTA ---------- */
.sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 55;
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-sizing: border-box;
  gap: 10px;
}
.sticky-bar .btn-primary { flex: 1; min-width: 0; height: 48px; }
.sticky-bar .btn-whatsapp {
  flex: none; width: 48px; height: 48px; padding: 0;
  background: #25D366; color: #FFFFFF; border-radius: var(--r);
  font-size: 1.35rem;
}
.sticky-bar .btn-whatsapp:hover { background: #1FBF5C; }
@media (max-width: 1040px) {
  .sticky-bar { display: flex; }
  body { padding-bottom: 84px; }
}

/* ---------- Cookie-Consent ---------- */
.consent-banner {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--deep); color: var(--on-deep);
  border-top: 1px solid var(--deep-line);
  padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom));
}
.consent-banner[data-open="true"] { display: block; }
.consent-banner-in {
  max-width: var(--shell); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
}
.consent-text { flex: 1 1 380px; font-size: 0.9375rem; color: var(--on-deep-2); }
.consent-text b { color: var(--on-deep); }
.consent-text a { color: var(--on-deep); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; max-width: 100%; }
.btn-outline-deep { border-color: rgba(255,255,255,0.28); color: var(--on-deep); background: transparent; }
.btn-outline-deep:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }

.consent-modal {
  display: none;
  position: fixed; inset: 0; z-index: 310;
  background: rgba(12,17,22,0.6);
  align-items: center; justify-content: center;
  padding: var(--gut);
}
.consent-modal[data-open="true"] { display: flex; }
.consent-panel {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r); max-width: 520px; width: 100%;
  padding: clamp(24px, 4vw, 36px);
  max-height: 88vh; overflow-y: auto;
}
.consent-panel h3 { margin-bottom: 8px; }
.consent-panel > p { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: 24px; }
.consent-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.consent-row:last-of-type { border-bottom: 1px solid var(--line); }
.consent-row-text b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9688rem; margin-bottom: 4px; }
.consent-row-text span { display: block; font-size: 0.875rem; color: var(--ink-2); }
.consent-row-text .locked { font-size: 0.8125rem; color: var(--ink-3); font-style: italic; }

.switch { position: relative; flex: none; width: 44px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line-strong); transition: background .2s var(--ease);
}
.switch-track::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
  transition: transform .2s var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked ~ .switch-track { background: var(--accent); }
.switch input:checked ~ .switch-track::before { transform: translateX(18px); }
.switch input:disabled ~ .switch-track { background: var(--ink-3); opacity: 0.5; cursor: not-allowed; }
.switch input:focus-visible ~ .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }

.consent-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ---------- Draft-Hinweis ---------- */
.draft { padding-block: 28px; border-top: 1px solid var(--line); }
.draft p { font-size: 0.8125rem; color: var(--ink-3); max-width: 92ch; }

/* ---------- Rechtstext-Layout (Impressum/Datenschutz) ---------- */
.legal { padding-block: clamp(48px, 7vw, 88px); }
.legal-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 52px); }
.legal-body { max-width: 74ch; }
.legal-body h2 { font-size: 1.3rem; margin: 40px 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; margin: 22px 0 10px; }
.legal-body p { color: var(--ink-2); margin-bottom: 14px; }
.legal-body ul { margin: 0 0 14px 20px; color: var(--ink-2); }
.legal-body li { margin-bottom: 6px; }
.legal-body strong { color: var(--ink); font-weight: 700; }
.legal-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Rechtstext-/Inhalts-Platzhalter (gleiches Muster wie Impressum) ---------- */
.legal-placeholder { display: inline-block; background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent-text) 45%, transparent); border-radius: 4px; padding: 1px 8px; color: var(--accent-text); font-weight: 600; font-size: 0.92em; }

/* ---------- Scroll-Reveal (Motion 4/10) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ============================================================
   Leistungs-Unterseiten (Breadcrumb, Detailkopf, Rechts-/Preisblock, CTA)
   ============================================================ */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.875rem; color: var(--ink-3);
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumb i { font-size: 0.75rem; }

.service-hero { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); }
.service-hero .eyebrow { margin-bottom: 16px; }
.service-hero .h1 { font-size: clamp(2rem, 3.4vw, 2.85rem); margin-bottom: 18px; }
.service-hero .lead { max-width: 60ch; }
.service-hero .hero-actions { margin-top: 28px; }

.service-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.service-body h2 { margin-bottom: 14px; }
.service-body > div:first-child > * + * { margin-top: 18px; }

.service-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.service-card {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 24px;
}
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--ink-2); font-size: 0.9375rem; }
.service-card .btn { margin-top: 16px; }

/* "Das könnte Sie auch interessieren" - interne Verlinkung am Ende des Fließtexts */
.related { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.related h3 { margin-bottom: 14px; }
.related-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }

/* Einfache Inhaltsliste (Kursinhalte etc.) außerhalb von .legal-body */
.body-list { margin: 0 0 14px 20px; color: var(--ink-2); max-width: 62ch; }
.body-list li { margin-bottom: 6px; }

/* Kurze FAQ-Paare innerhalb von "Was Sie erwartet" */
.faq-item { margin-top: 18px; }
.faq-item h3 { font-size: 1rem; margin-bottom: 4px; }
.faq-item p { color: var(--ink-2); }

/* Aufklappbare FAQ-Sektion auf der Startseite */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-inline: auto; }
.faq-accordion {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.faq-accordion summary {
  list-style: none; cursor: pointer; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary i {
  flex: none; color: var(--accent-text);
  transition: transform .22s var(--ease);
}
.faq-accordion[open] summary i { transform: rotate(45deg); }
.faq-accordion .faq-answer { padding: 0 24px 22px; color: var(--ink-2); }
.faq-accordion .faq-answer p + p { margin-top: 12px; }
.service-body .faq-list { max-width: none; margin-inline: 0; }

@media (max-width: 900px) {
  .service-body { grid-template-columns: 1fr; }
  .service-aside { position: static; }
}