/* talenttaucher.de, Variante B: Die Kandidatensicht. Stand 25.09.2026.
 *
 * Die Seite zeigt dem Inhaber seinen Betrieb durch die Augen eines
 * Kandidaten. Ein gezeichnetes Handy steht auf breiten Bildschirmen still,
 * sein Bildschirm wechselt mit den Kapiteln. Schmal oder bei reduzierter
 * Bewegung steht jedes Kapitel mit seinem eigenen Handy da.
 *
 * Farben aus der Marke: Violett #0F6B7E, Navy #0B2E36, sehr dunkel #061A1F,
 * hell #F4F7F6, dazu abgeleitete Töne. Systemschrift, kein Webfont.
 */

:root {
  --violett:        #0F6B7E;
  --violett-tief:   #0F6B7E;   /* kleine violette Schrift auf Hell, 5,6:1 */
  --violett-hell:   #4FDCE2;   /* Violett auf Dunkel */
  --violett-zart:   #E6F1F1;
  --violett-rand:   #C7E1E4;
  --navy:           #0B2E36;
  --nacht:          #061A1F;
  --hell:           #F4F7F6;
  --weiss:          #FFFFFF;

  --text:           #0B2E36;
  --text-weich:     #4F6166;   /* 7,6:1 auf Hell */
  --text-still:     #5F7176;   /* 5,7:1 auf Hell */
  --linie:          #DCE5E4;
  --linie-stark:    #C3D0CF;
  --skelett:        #E3EBEA;

  --verlauf:        linear-gradient(135deg, #0F6B7E, #0B2E36);
  --schatten-weich: 0 1px 2px rgba(11, 46, 54,.05), 0 10px 30px -14px rgba(11, 46, 54,.18);
  --schatten-knopf: 0 2px 4px rgba(11, 46, 54,.08), 0 12px 28px -12px rgba(15, 107, 126,.55);

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --kopf-h: 68px;
  --breite: 1200px;
  --rand: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --handy-b: clamp(236px, 78vw, 280px);

  color-scheme: light;
  accent-color: var(--violett);
  scrollbar-color: #BACBCA var(--hell);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 16px);
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--hell);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  caret-color: var(--violett);
}

::selection { background: #CDE6E8; color: var(--navy); }

a { color: var(--violett-tief); text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--violett); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { margin: 0; color: var(--navy); text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.3vw, 44px); line-height: 1.1; font-weight: 780; letter-spacing: -0.028em; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.012em; }
p  { margin: 0 0 1em; text-wrap: pretty; }

.vorsatz { color: var(--violett-tief); }

.vorspann { font-size: clamp(18px, 1.5vw, 20px); color: var(--text-weich); max-width: 60ch; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: 12px 18px; background: var(--navy); color: #fff; border-radius: 0 0 10px 0;
}
.zum-inhalt:focus { left: 0; }
.zum-inhalt:hover { color: #fff; }

/* ---------- Logo ---------- */
.logo { display: block; width: 150px; height: auto; }
.logo-hell { margin-bottom: 18px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 650; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.knopf.haupt { background: var(--verlauf); color: #fff; box-shadow: var(--schatten-knopf); }
.knopf.haupt:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 3px 6px rgba(11, 46, 54,.1), 0 18px 36px -14px rgba(15, 107, 126,.7); }
.knopf.still { background: var(--weiss); color: var(--navy); border-color: var(--linie-stark); }
.knopf.still:hover { border-color: var(--violett); color: var(--violett-tief); }
.knopf.hell { background: #fff; color: var(--navy); box-shadow: 0 2px 4px rgba(6, 26, 31,.12), 0 14px 30px -12px rgba(6, 26, 31,.45); }
.knopf.hell:hover { transform: translateY(-1px); color: var(--navy); }
.knopf.klein { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.knopf:active { transform: translateY(0); }

.knopf-zeile { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.marken { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.marken li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--weiss); border: 1px solid var(--linie);
  font-size: 14px; font-weight: 550; color: var(--text-weich);
}
.marken li::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: var(--violett);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kleingedruckt { font-size: 14px; color: var(--text-still); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 247, 246,.94);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(1px)) {
  .kopf { background: rgba(244, 247, 246,.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
  height: var(--kopf-h); display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.kopf-marke { display: inline-flex; align-items: center; min-height: 44px; }
.kopf-menue { display: flex; align-items: center; gap: 4px; }
.kopf-menue a:not(.knopf) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--text-weich); font-size: 15px; font-weight: 550; text-decoration: none; border-radius: 8px;
}
.kopf-menue a:not(.knopf):hover { color: var(--navy); background: rgba(11, 46, 54,.05); }
.kopf-menue .knopf { margin-left: 10px; }
.kopf-menue-knopf {
  display: none; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linie-stark); border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--navy); cursor: pointer;
}

@media (max-width: 940px) {
  .kopf-menue-knopf { display: inline-flex; align-items: center; }
  .kopf-menue {
    display: none; position: absolute; left: 0; right: 0; top: var(--kopf-h);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--rand) 20px; background: var(--hell); border-bottom: 1px solid var(--linie);
    box-shadow: 0 20px 30px -20px rgba(11, 46, 54,.25);
  }
  .kopf-menue.offen { display: flex; }
  .kopf-menue a:not(.knopf) { font-size: 17px; padding: 0 4px; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .kopf-menue .knopf { margin: 16px 0 0; }
}

/* =====================================================================
   Die Kandidatensicht
   ===================================================================== */
.ks {
  position: relative; isolation: isolate;
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
}
.ks-handy { display: none; }

.kapitel { position: relative; padding: clamp(56px, 9vw, 96px) 0; }
.kapitel-text { max-width: 620px; }
.kapitel h2 { margin-bottom: 20px; }

.kapitel-hero { padding-top: clamp(40px, 7vw, 88px); }
.kapitel-hero h1 { margin-bottom: 24px; }
.akzent { color: var(--violett); }   /* große Schrift, 4,4:1 auf Hell */
.leistungszeile {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--linie);
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--text-still);
}

/* Problem */
.probleme { list-style: none; margin: 32px 0 0; padding: 0; }
.probleme li {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 12px;
  padding: 22px 0; border-top: 1px solid var(--linie);
}
.probleme li:last-child { border-bottom: 1px solid var(--linie); }
.probleme .nr {
  grid-row: span 2; padding-top: 2px;
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--violett-tief);
  font-variant-numeric: tabular-nums;
}
.probleme h3 { margin-bottom: 6px; }
.probleme p { margin: 0; color: var(--text-weich); }

/* 83 Prozent: die gesättigte Fläche, randlos über die ganze Breite */
.kapitel-farbe { color: #fff; background: var(--violett); }
.kapitel-farbe::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: -100vw; right: -100vw;
  background: var(--violett);
}
.kapitel-farbe h2, .kapitel-farbe .vorsatz { color: #fff; }
.kapitel-farbe .vorsatz { opacity: 1; font-weight: 500; }
.kapitel-farbe .kapitel-text p { color: #fff; font-size: 19px; max-width: 58ch; }
.betrag {
  margin: 0 0 8px;
  font-size: clamp(96px, 14vw, 184px); line-height: .9; font-weight: 800; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.kapitel-farbe .kapitel-text p.betrag { font-size: clamp(96px, 14vw, 184px); }
.kapitel-farbe .handy-bild figcaption { color: #fff; }

/* Ablauf */
.schritt { position: relative; padding-left: 64px; margin-top: 36px; }
.kapitel-schritt .schritt { margin-top: 0; }
.schritt-nr {
  position: absolute; left: 0; top: -4px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 750; font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--violett-tief); background: var(--weiss);
  border: 1.5px solid var(--violett-rand);
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.schritt h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.schritt-marke {
  font-size: 13px; font-weight: 650; letter-spacing: .01em; color: var(--violett-tief);
  padding: 3px 10px; border-radius: 999px; background: var(--violett-zart);
}
.schritt p { color: var(--text-weich); margin: 0; max-width: 52ch; }
/* Ohne stehendes Handy stehen alle Schritte gleich da */
.kapitel .schritt-nr { background: var(--violett); color: #fff; border-color: var(--violett); }

/* Leistungen */
.leistungen {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;
}
.leistungen li { padding: 20px 0 22px; border-top: 1px solid var(--linie); }
.leistungen h3 { font-size: 17px; margin-bottom: 6px; }
.leistungen p { margin: 0; font-size: 16px; color: var(--text-weich); }
@media (max-width: 560px) { .leistungen { grid-template-columns: 1fr; } }

/* ---------- Das Handy ---------- */
.handy-bild { margin: 44px auto 0; width: var(--handy-b); }
.handy-bild figcaption { margin-top: 16px; text-align: center; font-size: 14px; font-weight: 550; color: var(--text-still); }

.handy { position: relative; container-type: inline-size; width: 100%; }
.handy::after {
  content: "Beispiel";
  position: absolute; top: 16%; right: -12px; z-index: 6;
  padding: 5px 11px; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 6px 16px -6px rgba(6, 26, 31,.5);
}
.handy-rahmen {
  aspect-ratio: 300 / 630;
  padding: 3.2cqw;
  border-radius: 14cqw;
  background: var(--nacht);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 2px 4px rgba(6, 26, 31,.12),
    0 40px 70px -30px rgba(11, 46, 54,.55),
    0 18px 30px -18px rgba(11, 46, 54,.35);
}
.bildschirm {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 11cqw; background: #fff; color: var(--navy);
  font-size: 5.4cqw; line-height: 1.35;
}
.bildschirm::before {   /* Kamerainsel */
  content: ""; position: absolute; z-index: 5; top: .5em; left: 50%;
  width: 5.2em; height: 1.4em; border-radius: 1em; background: var(--nacht);
  transform: translateX(-50%);
}
.bildschirm p { margin: 0; }
.bildschirm svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bs { position: absolute; inset: 0; padding: 2.6em .95em 1em; display: flex; flex-direction: column; }
.statusleiste {
  position: absolute; top: .72em; left: 1.5em; right: 1.35em;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .68em; font-weight: 700; font-variant-numeric: tabular-nums;
}
.status-symbole { display: flex; gap: .3em; }
.status-symbole i { display: block; width: .9em; height: .62em; border-radius: .15em; background: var(--navy); }
.status-symbole i:first-child { width: .7em; }
.status-symbole i:last-child { width: 1.35em; border-radius: .22em; }

.z { display: block; height: .46em; width: var(--w, 80%); margin: .38em 0; border-radius: .23em; background: var(--skelett); }

/* Suche */
.suchfeld {
  display: flex; align-items: center; gap: .45em;
  margin-top: .5em; padding: .6em .8em; border-radius: 1.4em;
  background: #EFF4F4; font-size: .8em; font-weight: 550;
}
.suchfeld svg { width: 1.1em; height: 1.1em; flex: none; color: var(--text-still); }
.tipp { display: inline-block; vertical-align: bottom; max-width: 14em; white-space: nowrap; overflow: hidden; }
.caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--violett); margin-left: 1px; }
.reiter { display: flex; gap: 1em; margin: .8em .2em .4em; font-size: .66em; font-weight: 600; color: var(--text-still); border-bottom: 1px solid var(--linie); }
.reiter span { padding-bottom: .5em; }
.reiter .an { color: var(--violett-tief); box-shadow: inset 0 -2px 0 var(--violett); }
.treffer { padding: .7em .2em; border-bottom: 1px solid #EEF3F3; }
.t-url { font-size: .6em; color: var(--text-still); }
.t-titel { font-size: .78em; font-weight: 650; color: var(--violett-tief); margin: .1em 0 .15em !important; }
.treffer.blass { opacity: .55; }

/* Standardanzeige als PDF */
.bs-pdf { background: #E7EDED; }
.pdf-kopf {
  display: flex; align-items: center; gap: .4em;
  margin: .3em -.95em 0; padding: .55em 1em;
  background: #fff; border-bottom: 1px solid var(--linie);
  font-size: .66em; font-weight: 600; color: var(--text-weich);
}
.pdf-kopf svg { width: 1.3em; height: 1.3em; }
.pdf-flaeche { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 1.1em; }
.pdf-seite {
  width: 88%; aspect-ratio: 1 / 1.414; padding: 1.1em .9em;
  background: #fff; box-shadow: 0 1px 3px rgba(11, 46, 54,.12);
}
.pdf-seite .z { height: .28em; margin: .3em 0; background: #D6E0DF; }
.pdf-titel { font-size: .62em; font-weight: 700; }
.pdf-sub { font-size: .46em; color: var(--text-still); margin-bottom: .8em !important; }
.pdf-luecke { display: block; height: .5em; }
.pdf-seitenzahl { margin-top: .8em !important; font-size: .55em; color: var(--text-still); font-variant-numeric: tabular-nums; }

/* Die Stellenseite */
.bs-stelle { padding: 0; }
.bs-stelle .statusleiste { z-index: 4; color: #fff; }
.bs-stelle .status-symbole i { background: #fff; }
.stelle-rolle { transition: transform .9s var(--ease); will-change: transform; }
.bs-stelle[data-pos="2"] .stelle-rolle { transform: translateY(-11.4em); }
.bs-stelle[data-pos="3"] .stelle-rolle { transform: translateY(-16.2em); }
.bs-stelle::before {   /* Statusleiste bekommt Grund, sobald die Seite rollt */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.35em; z-index: 3;
  background: rgba(255,255,255,.96); box-shadow: 0 1px 0 var(--linie);
  opacity: 0; transition: opacity .5s var(--ease);
}
.bs-stelle .statusleiste, .bs-stelle .status-symbole i { transition: color .5s var(--ease), background-color .5s var(--ease); }
.bs-stelle:not([data-pos="1"])::before { opacity: 1; }
.bs-stelle:not([data-pos="1"]) .statusleiste { color: var(--navy); }
.bs-stelle:not([data-pos="1"]) .status-symbole i { background: var(--navy); }
.stelle-medien {
  position: relative; height: 12.5em; overflow: hidden;
  background: linear-gradient(160deg, #0F6B7E 0%, #1590A2 45%, #0B2E36 100%);
}
.medien-kreis { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }
.medien-kreis.k1 { width: 16em; height: 16em; left: -5em; top: 1.2em; }
.medien-kreis.k2 { width: 9em; height: 9em; right: -2.5em; top: -2em; border-color: rgba(79, 220, 226,.5); }
.medien-kreis.k3 { width: 5em; height: 5em; left: 55%; top: 7.5em; background: rgba(255,255,255,.08); border: 0; }
.medien-play {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 3em; height: 3em; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--violett-tief);
  box-shadow: 0 .4em 1.2em rgba(6, 26, 31,.35);
}
.medien-play svg { width: 1.3em; height: 1.3em; fill: currentColor; stroke: none; margin-left: .15em; }
.medien-marke {
  position: absolute; left: .9em; bottom: .8em;
  padding: .2em .6em; border-radius: 1em; background: rgba(6, 26, 31,.45);
  color: #fff; font-size: .62em; font-weight: 650; letter-spacing: .02em;
}
.stelle-kopf { padding: .9em .95em .6em; }
.st-titel { font-size: 1.12em; font-weight: 780; letter-spacing: -0.02em; line-height: 1.15; }
.st-ort { font-size: .7em; color: var(--text-still); margin-top: .2em !important; }
.st-chips, .job-chips { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .6em !important; }
.st-chips span, .job-chips span {
  font-size: .6em; font-weight: 650; padding: .25em .65em; border-radius: 1em;
  background: var(--violett-zart); color: var(--violett-tief);
}
.st-block { padding: .75em .95em; border-top: 1px solid #EEF3F3; }
.st-h { font-size: .74em; font-weight: 750; margin-bottom: .35em !important; }
.st-zeile { display: flex; align-items: center; gap: .5em; }
.st-zeile b { width: .85em; height: .85em; flex: none; border-radius: 50%; background: var(--violett); box-shadow: inset 0 0 0 .22em #fff, 0 0 0 1px var(--violett); }
.st-zeile .z { flex: 1; max-width: var(--w); }
.st-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.st-kacheln span { padding: .55em .6em .4em; border-radius: .6em; background: #EEF6F6; color: var(--violett-tief); }
.st-kacheln svg { width: 1.25em; height: 1.25em; display: block; margin-bottom: .1em; }
.st-kacheln .z { margin: .3em 0 .1em; }
.st-team { display: flex; gap: .4em; }
.st-team span { width: 2.1em; height: 2.1em; border-radius: 50%; background: linear-gradient(135deg, #4FDCE2, #1590A2); }
.st-team span:nth-child(2) { background: linear-gradient(135deg, #9ED9DD, #0F6B7E); }
.st-team span:nth-child(3) { background: linear-gradient(135deg, #6E70EB, #0B2E36); }
.st-team span:nth-child(4) { background: #E3EBEA; }
.st-knopf, .form-knopf {
  position: absolute; left: .95em; right: .95em; bottom: 1em; z-index: 3;
  display: grid; place-items: center; height: 2.6em; border-radius: .75em;
  background: var(--verlauf); color: #fff; font-size: .8em; font-weight: 700;
  box-shadow: 0 .5em 1.2em -.4em rgba(15, 107, 126,.8);
}
.bs-stelle::after {  /* weicher Übergang über dem Knopf */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5em; z-index: 2;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 55%);
}

/* Google Jobs */
.jobs-kopf { font-size: .74em; font-weight: 750; margin: .6em .2em .5em !important; }
.job {
  display: grid; grid-template-columns: 2.3em 1fr; gap: .6em; align-items: start;
  padding: .7em; margin-bottom: .45em; border-radius: .8em; border: 1px solid var(--linie);
}
.job-deine { border-color: var(--violett); box-shadow: 0 0 0 .2em var(--violett-zart); }
.job-logo {
  width: 2.3em; height: 2.3em; border-radius: .55em; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: .72em; font-weight: 750; letter-spacing: .02em;
}
.job.blass { opacity: .55; }
.job.blass .job-logo { background: var(--skelett); }
.job-titel { font-size: .8em; font-weight: 750; line-height: 1.2; }
.job-ort { font-size: .62em; color: var(--text-still); margin-top: .15em !important; }

/* Formular */
.form-kopf { display: flex; align-items: center; gap: .3em; margin-top: .3em; font-size: .68em; font-weight: 600; color: var(--text-weich); }
.form-kopf svg { width: 1.3em; height: 1.3em; }
.form-titel { font-size: 1.2em; font-weight: 780; letter-spacing: -0.02em; margin: .7em 0 .5em !important; }
.form-schritte { display: flex; gap: .3em; margin-bottom: 1em; }
.form-schritte i { flex: 1; height: .28em; border-radius: .2em; background: var(--skelett); }
.form-schritte i.an { background: var(--violett); }
.feld { margin-bottom: .75em; }
.feld-name { display: block; font-size: .62em; font-weight: 650; color: var(--text-weich); margin-bottom: .3em; }
.feld-eingabe {
  display: flex; align-items: center; height: 2.3em; padding: 0 .7em;
  border-radius: .6em; border: 1px solid var(--linie-stark); background: #fff;
}
.feld:nth-child(1 of .feld) .feld-eingabe { border-color: var(--violett); box-shadow: 0 0 0 .2em var(--violett-zart); }
.feld-eingabe .caret { height: 1em; }
.feld-datei { gap: .5em; border-style: dashed; color: var(--violett-tief); }
.feld-datei svg { width: 1.2em; height: 1.2em; }

/* ---------- Breit, aber ohne stehendes Handy (kein JS oder reduzierte Bewegung) ---------- */
@media (min-width: 960px) {
  :root { --handy-b: 280px; }
  .kapitel {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--handy-b);
    gap: clamp(48px, 7vw, 120px); align-items: center;
  }
  .handy-bild { margin: 0; }
}

/* ---------- Das stehende Handy ---------- */
@media (min-width: 960px) {
  .ks-an {
    --handy-b: clamp(250px, calc((100vh - var(--kopf-h) - 110px) / 2.1), 320px);
  }
  .ks-an .ks {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--handy-b);
    gap: clamp(48px, 7vw, 120px);
  }
  .ks-an .kapitel {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 88vh; padding: 12vh 0;
  }
  .ks-an .kapitel-hero { min-height: calc(100vh - var(--kopf-h)); padding: 8vh 0 12vh; }
  .ks-an .kapitel-schritt { min-height: 64vh; padding: 6vh 0; }
  .ks-an .kapitel-ablauf { padding-bottom: 6vh; }
  .ks-an .kapitel .handy-bild { display: none; }

  .ks-an .ks-handy { display: block; position: relative; z-index: 2; }
  .ks-an .ks-handy-steh {
    --steh-top: max(calc(var(--kopf-h) + 20px), calc((100vh + var(--kopf-h) - var(--handy-b) * 2.1 - 48px) / 2));
    position: sticky;
    top: var(--steh-top);
    margin-top: calc(var(--steh-top) - var(--kopf-h));
  }
  .handy-titel {
    margin: 18px 0 0; text-align: center; min-height: 1.5em;
    font-size: 14px; font-weight: 600; color: var(--text-still);
    transition: color .5s var(--ease);
  }
  .ks-handy.auf-farbe .handy-titel { color: #fff; }

  /* Der Bildschirmwechsel */
  .handy-fest .bs {
    opacity: 0; visibility: hidden;
    transform: translateY(1.4em) scale(.985);
    filter: blur(6px);
    transition: opacity .45s var(--ease), transform .8s var(--ease), filter .5s var(--ease), visibility 0s linear .5s;
  }
  .handy-fest .bs.an {
    opacity: 1; visibility: visible; transform: none; filter: none;
    transition: opacity .55s var(--ease) .08s, transform .8s var(--ease) .08s, filter .55s var(--ease) .08s, visibility 0s;
  }
  .handy-fest .bs.weg { transform: translateY(-1em) scale(.985); }

}

@keyframes blinken { 50% { opacity: 0; } }

/* =====================================================================
   Nach der Kandidatensicht
   ===================================================================== */
.sektion { padding: clamp(72px, 10vw, 128px) 0; }
.kopfzeile { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.kopfzeile h2 { margin-bottom: 18px; }

/* Versprechen */
.versprechen { padding: clamp(80px, 11vw, 140px) 0 clamp(24px, 4vw, 48px); }
.versprechen figure { margin: 0; max-width: 980px; }
.versprechen blockquote { margin: 0; position: relative; }
.versprechen blockquote p {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 48px); line-height: 1.16; font-weight: 700; letter-spacing: -0.028em;
  color: var(--navy); text-wrap: balance;
}
.versprechen blockquote p::before { content: "„"; color: var(--violett); }
.versprechen blockquote p::after  { content: "“"; color: var(--violett); }
.versprechen figcaption {
  margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--text-still);
  display: flex; align-items: center; gap: 12px;
}
.versprechen figcaption::before { content: ""; width: 32px; height: 2px; background: var(--violett); flex: none; }

/* Flywheel */
.flywheel-raster {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.flywheel-bild { margin: 0; }
.flywheel-bild .rollbar { overflow-x: auto; }
.hero-flywheel { display: block; width: 100%; height: auto; }
.flywheel-bild figcaption { margin-top: 14px; font-size: 14px; color: var(--text-still); max-width: 60ch; }
.stufen { list-style: none; margin: 0; padding: 0; }
.stufen li {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--linie);
}
.stufen li:last-child { border-bottom: 1px solid var(--linie); }
.stufen .chip {
  grid-row: span 2; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 750; font-size: 15px;
}
.stufen h3 { font-size: 17px; }
.stufen h3 span { font-size: 14px; font-weight: 500; color: var(--text-still); margin-left: 4px; }
.stufen p { margin: 4px 0 0; font-size: 15px; color: var(--text-weich); }

.flywheel-fuss {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--linie-stark);
}
.flywheel-fuss h3 { font-size: 20px; margin-bottom: 10px; }
.flywheel-fuss p { margin: 0; color: var(--text-weich); max-width: 62ch; }

@media (max-width: 900px) {
  .flywheel-raster, .flywheel-fuss { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hero-flywheel { min-width: 460px; }
}

/* Pakete */
.pakete-abschnitt { padding-top: 0; }
.pakete {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch;
}
.paket {
  display: flex; flex-direction: column;
  padding: 30px 28px 28px; border-radius: var(--radius);
  background: #fff; box-shadow: var(--schatten-weich);
}
.paket h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 8px; }
.paket-satz { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.paket .kleingedruckt { margin-bottom: 22px; }
.paket .knopf { margin-top: auto; align-self: flex-start; }
.liste-haken { list-style: none; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid var(--linie); }
.liste-haken li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 16px; color: var(--text-weich); }
.liste-haken li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px;
  background: var(--violett);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.paket-hervor { background: var(--navy); color: #fff; box-shadow: 0 30px 60px -30px rgba(11, 46, 54,.6); }
.paket-hervor h3, .paket-hervor .paket-satz { color: #fff; }
.paket-hervor .kleingedruckt { color: #B4CACD; }
.paket-hervor .liste-haken { border-color: rgba(255,255,255,.14); }
.paket-hervor .liste-haken li { color: #CFE3E6; }
.paket-hervor .liste-haken li::before { background: var(--violett-hell); }
.paket-hervor .knopf.haupt, .paket-hervor .knopf.haupt:hover { background: linear-gradient(135deg, #0F6B7E, #0F6B7E); box-shadow: 0 2px 4px rgba(6, 26, 31,.3), 0 10px 22px -10px rgba(6, 26, 31,.6); }
@media (max-width: 900px) { .pakete { grid-template-columns: 1fr; } }

/* Erstgespräch: die zweite gesättigte Fläche */
.kontakt { padding: 0 0 clamp(72px, 10vw, 120px); }
.kontakt-flaeche {
  position: relative; overflow: hidden;
  padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 80px);
  border-radius: 20px; background: var(--violett); color: #fff;
}
.kontakt-flaeche::after {  /* ein Ring als Echo des Handy-Bildschirms, reine Geometrie */
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 60px rgba(255,255,255,.05), 0 0 0 130px rgba(255,255,255,.035);
  pointer-events: none;
}
.kontakt-flaeche h2 { color: #fff; font-size: clamp(32px, 4.4vw, 56px); margin-bottom: 18px; max-width: 16ch; }
.kontakt-flaeche .vorspann { color: #fff; max-width: 56ch; }
.kontakt-flaeche .marken { margin: 22px 0 30px; }
.kontakt-flaeche .marken li { background: rgba(6, 26, 31,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.kontakt-flaeche .marken li::before { background: #fff; }
.kontakt-flaeche .knopf:focus-visible { outline-color: #fff; }

/* Fuß */
.fuss { background: var(--nacht); color: #B4CACD; padding: 64px 0 28px; font-size: 15px; }
.fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 32px; }
.fuss h3 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 6px; }
.fuss a { color: #9ED9DD; display: inline-block; padding: 2px 0; min-height: 24px; }
.fuss a:hover { color: #fff; }
.fuss .kleingedruckt { color: #8FA8AA; }
.fuss-zeile { margin: 44px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #8FA8AA; }
@media (max-width: 800px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fuss-raster { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
  body { font-size: 17px; }
  .knopf-zeile .knopf { width: 100%; }
}

/* ---------- Werte im Formular ---------- */
.wert { display: block; height: .5em; width: var(--w, 60%); border-radius: .25em; background: #B6D7DA; transform-origin: left center; }
.feld-eingabe .caret { margin-left: .2em; }

/* ---------- Die Linie im Ablauf ---------- */
.ks-texte { position: relative; }
.ablauf-linie {
  position: absolute; z-index: 0; width: 2px; margin-left: -1px;
  background: var(--violett-rand); border-radius: 2px; pointer-events: none;
}
.ablauf-fuell {
  position: absolute; inset: 0; background: var(--violett); border-radius: 2px;
  transform-origin: top center; transform: scaleY(var(--fortschritt, 1));
}
.schritt-nr { z-index: 1; }

/* ---------- Hover ---------- */
.probleme li, .leistungen li, .stufen li { transition: border-color .3s var(--ease); }
.probleme li:hover, .leistungen li:hover { border-top-color: var(--violett); }
.leistungen li h3, .probleme li h3 { transition: color .3s var(--ease); }
.leistungen li:hover h3, .probleme li:hover h3 { color: var(--violett-tief); }
.stufen .chip { transition: transform .35s var(--ease); }
.stufen li:hover .chip { transform: scale(1.12); }
.paket { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.paket:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(11, 46, 54,.06), 0 24px 44px -20px rgba(11, 46, 54,.3); }
.paket-hervor:hover { box-shadow: 0 36px 70px -30px rgba(11, 46, 54,.7); }

/* =====================================================================
   Bewegung. Alles hier gilt nur mit der Klasse .bewegt, die seite.js
   setzt, wenn Bewegung erlaubt ist. Ohne Skript oder bei reduzierter
   Bewegung bleibt jeder Zustand sichtbar und still.
   Die Keyframes haben meist kein "to": Das Ziel ist der normale Zustand.
   ===================================================================== */
@keyframes rein      { from { opacity: 0; transform: translateY(.8em); } }
@keyframes rein-gross{ from { opacity: 0; transform: translateY(18px); } }
@keyframes auftauchen{ from { opacity: 0; } }
@keyframes tippen    { from { max-width: 0; } }
@keyframes blinken   { 50% { opacity: 0; } }
@keyframes seite-rein{ from { opacity: 0; transform: translateY(1.2em) scale(.96); } }
@keyframes verblassen{ to   { opacity: .5; filter: saturate(.2) contrast(.85); } }
@keyframes einfahren { from { opacity: .2; transform: translateX(115%); } }
@keyframes ring      { 0% { box-shadow: 0 0 0 0 rgba(15, 107, 126,.5); } 100% { box-shadow: 0 0 0 1em rgba(15, 107, 126,0); } }
@keyframes fuellen   { from { transform: scaleX(0); } }
@keyframes puls      { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.05); } }
@keyframes treiben   { from { transform: translate(0, 0); } to { transform: translate(1.6em, -1.1em); } }
@keyframes rollen1   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5em); } }
@keyframes rollen2   { from { transform: translateY(0); } }
@keyframes rollen3   { from { transform: translateY(-11.4em); } }
@keyframes leuchten  { from { opacity: .16; } }

/* Kapitel-Handys: der Bildschirm geht an, sobald das Handy ins Bild kommt */
.bewegt .handy-bild .bs { transition: opacity .45s var(--ease); }
.bewegt .handy-bild .bs.bereit:not(.spielt) { opacity: 0; }

/* Suche und Google Jobs: die Anfrage tippt sich ein */
.bewegt .bs.spielt .tipp  { animation: tippen 1.1s steps(22, end) .35s backwards; }
.bewegt .bs.spielt .caret { animation: blinken .9s steps(1) 5; }
.bewegt .bs-suche.spielt .reiter { animation: rein .5s var(--ease) 1.4s backwards; }
.bewegt .bs-suche.spielt .treffer { animation: rein .55s var(--ease) backwards; }
.bewegt .bs-suche.spielt .treffer:nth-child(1 of .treffer) { animation-delay: 1.6s; }
.bewegt .bs-suche.spielt .treffer:nth-child(2 of .treffer) { animation-delay: 1.78s; }
.bewegt .bs-suche.spielt .treffer:nth-child(3 of .treffer) { animation-delay: 1.96s; }
.bewegt .bs-suche.spielt .treffer:nth-child(4 of .treffer) { animation-delay: 2.14s; }

/* Standardanzeige: kommt, und wird dann blass */
.bewegt .bs-pdf.spielt .pdf-kopf { animation: auftauchen .4s ease .1s backwards; }
.bewegt .bs-pdf.spielt .pdf-seite { animation: seite-rein .7s var(--ease) .25s backwards, verblassen 1.6s ease 1.3s forwards; }
.bewegt .bs-pdf.spielt .pdf-seitenzahl { animation: auftauchen .4s ease .8s backwards; }

/* Stellenseite: Einblicke, Chips, sanftes Durchscrollen */
.bewegt .bs-stelle .medien-kreis.k3 { animation: treiben 9s ease-in-out infinite alternate; }  /* die eine ruhige Schleife */
.bewegt .bs-stelle.spielt .medien-play { animation: ring 1.3s ease-out .5s 2; }
.bewegt .bs-stelle.spielt .st-titel,
.bewegt .bs-stelle.spielt .st-ort { animation: rein .55s var(--ease) .25s backwards; }
.bewegt .bs-stelle.spielt .st-chips span { animation: rein .45s var(--ease) backwards; }
.bewegt .bs-stelle.spielt .st-chips span:nth-child(1) { animation-delay: .55s; }
.bewegt .bs-stelle.spielt .st-chips span:nth-child(2) { animation-delay: .68s; }
.bewegt .bs-stelle.spielt .st-chips span:nth-child(3) { animation-delay: .81s; }
.bewegt .bs-stelle.spielt .st-kacheln span { animation: rein .5s var(--ease) backwards; }
.bewegt .bs-stelle.spielt .st-kacheln span:nth-child(2) { animation-delay: .1s; }
.bewegt .bs-stelle.spielt .st-kacheln span:nth-child(3) { animation-delay: .2s; }
.bewegt .bs-stelle.spielt .st-kacheln span:nth-child(4) { animation-delay: .3s; }
.bewegt .bs-stelle.spielt[data-pos="3"] .st-knopf { animation: puls .8s var(--ease) 1.4s 1; }
.bewegt .handy-bild .bs-stelle.spielt[data-pos="1"] .stelle-rolle { animation: rollen1 3.4s cubic-bezier(.45, 0, .25, 1) 1.2s both; }
.bewegt .handy-bild .bs-stelle.spielt[data-pos="2"] .stelle-rolle { animation: rollen2 1.9s cubic-bezier(.45, 0, .25, 1) .5s backwards; }
.bewegt .handy-bild .bs-stelle.spielt[data-pos="3"] .stelle-rolle { animation: rollen3 1.5s cubic-bezier(.45, 0, .25, 1) .4s backwards; }
.bewegt .handy-bild .bs-stelle.spielt[data-pos="2"] .st-kacheln span { animation-delay: 1.5s; }

/* Google Jobs: die eigene Karte fährt ein */
.bewegt .bs-jobs.spielt .jobs-kopf { animation: auftauchen .4s ease 1.3s backwards; }
.bewegt .bs-jobs.spielt .job-deine { animation: einfahren .8s var(--ease) 1.5s backwards, ring 1.2s ease-out 2.4s 1; }
.bewegt .bs-jobs.spielt .job.blass { animation: rein .5s var(--ease) backwards; }
.bewegt .bs-jobs.spielt .job.blass:nth-child(1 of .job.blass) { animation-delay: 1.8s; }
.bewegt .bs-jobs.spielt .job.blass:nth-child(2 of .job.blass) { animation-delay: 1.95s; }
.bewegt .bs-jobs.spielt .job.blass:nth-child(3 of .job.blass) { animation-delay: 2.1s; }

/* Formular: Felder füllen sich, der Knopf pulsiert einmal */
.bewegt .bs-formular.spielt .form-titel { animation: rein .5s var(--ease) .15s backwards; }
.bewegt .bs-formular.spielt .wert { animation: fuellen .6s var(--ease) backwards; }
.bewegt .bs-formular.spielt .feld:nth-child(1 of .feld) .wert { animation-delay: .6s; }
.bewegt .bs-formular.spielt .feld:nth-child(2 of .feld) .wert { animation-delay: 1.1s; }
.bewegt .bs-formular.spielt .feld:nth-child(3 of .feld) .wert { animation-delay: 1.6s; }
.bewegt .bs-formular.spielt .feld:nth-child(4 of .feld) .wert { animation-delay: 2.1s; }
.bewegt .bs-formular.spielt .form-schritte i:nth-child(2) { transform-origin: left center; animation: fuellen .5s var(--ease) 2.6s backwards; }
.bewegt .bs-formular.spielt .form-knopf { animation: puls .8s var(--ease) 3.1s 1; }

/* Außerhalb der Handys: gestaffelte Listen */
.bewegt .staffel:not(.sichtbar) > li { opacity: 0; }
.bewegt .staffel.sichtbar > li { animation: rein-gross .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

/* Flywheel: die Stationen leuchten nacheinander auf */
.bewegt .flywheel-raster:not(.sichtbar) .fw-teil { opacity: .16; }
.bewegt .flywheel-raster:not(.sichtbar) .stufen li { opacity: 0; }
.bewegt .flywheel-raster.sichtbar .fw-teil { animation: leuchten .7s ease backwards; }
.bewegt .flywheel-raster.sichtbar .fw-teil[data-teil="1"] { animation-delay: .35s; }
.bewegt .flywheel-raster.sichtbar .fw-teil[data-teil="2"] { animation-delay: .7s; }
.bewegt .flywheel-raster.sichtbar .fw-teil[data-teil="3"] { animation-delay: 1.05s; }
.bewegt .flywheel-raster.sichtbar .fw-teil[data-teil="4"] { animation-delay: 1.4s; }
.bewegt .flywheel-raster.sichtbar .stufen li { animation: rein-gross .6s var(--ease) backwards; }
.bewegt .flywheel-raster.sichtbar .stufen li:nth-child(2) { animation-delay: .35s; }
.bewegt .flywheel-raster.sichtbar .stufen li:nth-child(3) { animation-delay: .7s; }
.bewegt .flywheel-raster.sichtbar .stufen li:nth-child(4) { animation-delay: 1.05s; }
.bewegt .flywheel-raster.sichtbar .stufen li:nth-child(5) { animation-delay: 1.4s; }

/* Ablauf: Nummern zünden, sobald die Linie sie erreicht */
.bewegt .kapitel .schritt-nr { background: var(--weiss); color: var(--violett-tief); border-color: var(--violett-rand); }
.bewegt .kapitel .schritt-nr.an {
  background: var(--violett); color: #fff; border-color: var(--violett);
  box-shadow: 0 0 0 6px var(--violett-zart);
}

/* =====================================================================
   dirkfuhrmann.com im Talenttaucher-Design. Stand 28.09.2026.
   Alles unterhalb ergänzt die Kandidatensicht um die Bausteine der
   dirkfuhrmann-Startseite. Farben nur aus den Tokens oben.
   ===================================================================== */

/* Kopf: Bildmarke plus Name */
.df-marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 780; font-size: 18px; letter-spacing: -0.02em; color: var(--navy); text-decoration: none; }
.df-marke img { width: 27px; height: 30px; }
.df-marke span { color: var(--violett-tief); }
.fuss .df-marke { color: #fff; margin-bottom: 18px; }
.fuss .df-marke span { color: var(--violett-hell); }

.kapitel-hero .leistungszeile.oben { margin: 0 0 18px; }

/* Ausgangslage: acht Sätze in zwei Spalten */
.saetze-acht { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.saetze-acht li:nth-last-child(2) { border-bottom: 1px solid var(--linie); }
@media (max-width: 560px) { .saetze-acht { grid-template-columns: 1fr; } .saetze-acht li:nth-last-child(2) { border-bottom: 0; } }
.saetze-acht li { padding: 16px 0; }
.saetze-acht h3 { font-size: 17px; margin: 0; }
.kapitel-text .fazit { margin-top: 28px; font-weight: 600; color: var(--navy); }
.pruef { margin-top: 12px !important; font-size: 15px; color: var(--text-still) !important; }
.pruef b { color: var(--violett-tief); font-weight: 700; }

/* Zahlen im Farbkapitel */
.betrag .einheit { font-size: .32em; font-weight: 700; letter-spacing: -0.01em; margin-left: .15em; }
.kapitel-farbe .quelle { font-size: 14px !important; opacity: .85; }
.zweit-zahl { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); }
.zweit-zahl strong { display: block; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }

/* Handy: Posteingang */
.bs-mail { background: #fff; }
.mail-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: .4em .1em .7em; }
.mail-kopf b { font-size: 1.15em; font-weight: 780; letter-spacing: -0.02em; }
.mail-kopf span { font-size: .6em; color: var(--text-still); }
.mail { display: flex; gap: .6em; padding: .7em .2em; border-bottom: 1px solid #EEF3F3; }
.mail-punkt { width: 2em; height: 2em; flex: none; border-radius: 50%; background: var(--skelett); }
.mail-deine .mail-punkt { background: var(--verlauf); }
.mail > div { flex: 1; min-width: 0; }
.mail-von { font-size: .66em; font-weight: 750; }
.mail-betreff { font-size: .62em; color: var(--text-weich); margin-top: .1em !important; }
.mail.blass { opacity: .5; }
.mail-warten { margin-top: auto; display: flex; align-items: center; gap: .5em; padding: .7em .8em; border-radius: .8em; background: var(--violett-zart); color: var(--violett-tief); font-size: .64em; font-weight: 700; }
.mail-warten svg { width: 1.4em; height: 1.4em; flex: none; }

/* Handy: Kalender nach dem Gespräch */
.bs-termin { background: #fff; }
.tag-kopf { margin: .4em .1em .8em; }
.tag-kopf b { display: block; font-size: 1.15em; font-weight: 780; letter-spacing: -0.02em; }
.tag-kopf span { font-size: .6em; color: var(--text-still); }
.termin { display: grid; grid-template-columns: 2.6em 1fr; gap: .5em; margin-bottom: .55em; }
.termin-zeit { font-size: .56em; color: var(--text-still); padding-top: .6em; font-variant-numeric: tabular-nums; }
.termin-karte { padding: .6em .7em; border-radius: .6em; background: #EEF6F6; border-left: .25em solid var(--skelett); }
.termin-karte .z { margin: .25em 0; }
.termin-gespraech .termin-karte { background: var(--violett-zart); border-left-color: var(--violett); }
.termin-titel { font-size: .7em; font-weight: 750; color: var(--navy); }
.termin-sub { font-size: .56em; color: var(--text-weich); margin-top: .1em !important; }
.termin-offen .termin-karte { background: #fff; border: 1.5px dashed var(--violett-rand); border-left-width: 1.5px; text-align: center; color: var(--violett-tief); font-size: .8em; font-weight: 750; padding: .9em; }

/* Handy: Nachricht vor dem ersten Arbeitstag */
.bs-start { background: #EEF6F6; }
.chat-kopf { display: flex; align-items: center; gap: .5em; margin: .3em 0 .9em; padding-bottom: .6em; border-bottom: 1px solid var(--linie); }
.chat-kopf .mail-punkt { width: 1.8em; height: 1.8em; background: var(--verlauf); }
.chat-kopf b { font-size: .72em; }
.blase { max-width: 82%; padding: .55em .75em; border-radius: 1em 1em 1em .3em; background: #fff; font-size: .66em; line-height: 1.35; color: var(--navy); margin-bottom: .45em; box-shadow: 0 1px 2px rgba(11, 46, 54,.06); }
.blase.ich { margin-left: auto; border-radius: 1em 1em .3em 1em; background: var(--violett); color: #fff; }
.start-karte { margin-top: auto; padding: .8em; border-radius: .8em; background: var(--navy); color: #fff; }
.start-karte p { font-size: .6em; color: #9ED9DD; }
.start-karte b { display: block; font-size: 1.05em; letter-spacing: -0.01em; margin-top: .15em; }

/* Animationen der neuen Bildschirme */
.bewegt .bs-mail.spielt .mail { animation: rein .5s var(--ease) backwards; }
.bewegt .bs-mail.spielt .mail:nth-child(1 of .mail) { animation-delay: .3s; }
.bewegt .bs-mail.spielt .mail:nth-child(2 of .mail) { animation-delay: .45s; }
.bewegt .bs-mail.spielt .mail:nth-child(3 of .mail) { animation-delay: .6s; }
.bewegt .bs-mail.spielt .mail:nth-child(4 of .mail) { animation-delay: .75s; }
.bewegt .bs-mail.spielt .mail-warten { animation: rein .6s var(--ease) 1.6s backwards, ring 1.2s ease-out 2.2s 1; }
.bewegt .bs-termin.spielt .termin { animation: rein .5s var(--ease) backwards; }
.bewegt .bs-termin.spielt .termin:nth-child(2 of .termin) { animation-delay: .25s; }
.bewegt .bs-termin.spielt .termin:nth-child(3 of .termin) { animation-delay: .5s; }
.bewegt .bs-termin.spielt .termin-offen { animation: rein .6s var(--ease) 1.3s backwards; }
.bewegt .bs-termin.spielt .termin-offen .termin-karte { animation: puls .8s var(--ease) 2s 1; }
.bewegt .bs-start.spielt .blase { animation: rein .45s var(--ease) backwards; }
.bewegt .bs-start.spielt .blase:nth-child(1 of .blase) { animation-delay: .4s; }
.bewegt .bs-start.spielt .blase:nth-child(2 of .blase) { animation-delay: 1.1s; }
.bewegt .bs-start.spielt .blase:nth-child(3 of .blase) { animation-delay: 1.8s; }
.bewegt .bs-start.spielt .start-karte { animation: rein .6s var(--ease) 2.4s backwards; }

/* Angebot: drei Wege als Karten, Themen als Hakenliste */
.wege-karten .paket h3 { font-size: 22px; }
.wege-karten .nr-marke { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--violett-tief); margin-bottom: 14px; }
.paket-hervor .nr-marke { color: var(--violett-hell); }
.paket p.paket-text { color: var(--text-weich); font-size: 16px; }
.paket-hervor p.paket-text { color: #CFE3E6; }
.beratung-zeile { margin-top: clamp(40px, 5vw, 64px); }

/* Praxisbeispiel */
.praxis-raster { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1040px; }
.praxis-zahl { font-size: clamp(96px, 14vw, 180px); font-weight: 800; line-height: .9; letter-spacing: -0.05em; color: var(--violett); }
.praxis-zahl small { display: block; font-size: 16px; font-weight: 650; letter-spacing: 0; color: var(--navy); margin-top: 14px; }
.praxis-raster dl { margin: 18px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.praxis-raster dt { font-weight: 700; color: var(--navy); }
.praxis-raster dd { margin: 0; color: var(--text-weich); }
@media (max-width: 720px) { .praxis-raster { grid-template-columns: 1fr; } .praxis-raster dl { grid-template-columns: 1fr; gap: 2px; } .praxis-raster dd { margin-bottom: 10px; } }

/* Ablauf der Zusammenarbeit: vier Schritte nebeneinander */
.vier-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.vier-schritte li { border-top: 2px solid var(--violett); padding-top: 18px; }
.vier-schritte .nr { display: block; font-family: var(--mono); font-size: 13px; color: var(--violett-tief); margin-bottom: 10px; }
.vier-schritte h3 { font-size: 18px; margin-bottom: 8px; }
.vier-schritte p { margin: 0; font-size: 16px; color: var(--text-weich); }
@media (max-width: 900px) { .vier-schritte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vier-schritte { grid-template-columns: 1fr; } }
.ablauf-hinweis { margin-top: 28px; color: var(--text-still); }

/* Umsetzung mit Wachstumsfundament */
.umsetzung { background: var(--navy); color: #CFE3E6; border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); }
.umsetzung h2 { color: #fff; max-width: 22ch; margin-bottom: 16px; }
.umsetzung .vorspann { color: #CFE3E6; }
.umsetzung .vorsatz { color: var(--violett-hell); }
.umsetzung .leistungen li { border-color: rgba(255,255,255,.14); }
.umsetzung .leistungen h3 { color: #fff; }
.umsetzung .leistungen p { color: #B4CACD; }
.umsetzung .leistungen li:hover h3 { color: var(--violett-hell); }
.umsetzung a { color: var(--violett-hell); font-weight: 650; }

/* Über mich */
.person { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.portraet { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--violett-zart); box-shadow: var(--schatten-weich); }
.portraet img { display: block; width: 100%; height: auto; }
.person .zitat { font-size: clamp(32px, 4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--navy); margin-bottom: 22px; }
.person .zitat span { color: var(--violett); }
.person p { color: var(--text-weich); max-width: 56ch; }
.person p b { color: var(--navy); }
@media (max-width: 800px) { .person { grid-template-columns: 1fr; } .portraet { max-width: 360px; } }
.zertifikate { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 28px 0 0; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.zertifikate img { display: block; height: 72px; width: auto; }
.zert-kopf { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--text-still); margin: clamp(40px, 6vw, 72px) 0 0; }
.zert-kopf + .zertifikate { margin-top: 14px; }

/* Artikel */
.artikel-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.artikel-karte { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); box-shadow: 0 2px 4px rgba(11, 46, 54,.05), 0 14px 32px -14px rgba(11, 46, 54,.22); text-decoration: none; color: var(--text); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.artikel-karte:hover { transform: translateY(-4px); border-color: var(--violett-rand); box-shadow: 0 4px 8px rgba(11, 46, 54,.06), 0 24px 48px -18px rgba(11, 46, 54,.32); color: var(--text); }
.artikel-karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.artikel-karte span { padding: 0 20px; }
.artikel-karte .datum { font-family: var(--mono); font-size: 12px; color: var(--text-still); margin-top: 18px; }
.artikel-karte .a-titel { font-weight: 750; font-size: 18px; line-height: 1.3; color: var(--navy); margin: 8px 0; }
.artikel-karte .a-text { font-size: 15px; color: var(--text-weich); }
.artikel-karte .a-mehr { margin: auto 0 0; padding-top: 16px; padding-bottom: 20px; font-weight: 650; font-size: 15px; color: var(--violett-tief); }
@media (max-width: 900px) { .artikel-liste { grid-template-columns: 1fr; max-width: 560px; } }
.artikel-alle { margin-top: 28px; }

/* Fragen */
.faq { max-width: 860px; border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font-weight: 700; font-size: 18px; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--violett); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--violett-tief); }
.faq .antwort { margin: 0 0 22px; color: var(--text-weich); max-width: 70ch; }

/* Vier Fragen vor dem Gespräch */
.vier-fragen { list-style: none; counter-reset: f; margin: 0 0 clamp(40px, 6vw, 72px); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vier-fragen li { counter-increment: f; position: relative; padding: 22px 22px 22px 64px; border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); font-weight: 600; color: var(--navy); }
.vier-fragen li::before { content: "0" counter(f); position: absolute; left: 22px; top: 22px; font-family: var(--mono); font-size: 14px; color: var(--violett-tief); }
@media (max-width: 720px) { .vier-fragen { grid-template-columns: 1fr; } }

.kontakt-flaeche .kontakt-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; margin: 36px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.3); position: relative; z-index: 1; }
.kontakt-daten p { margin: 0; color: #fff; font-size: 15px; }
.kontakt-daten b { display: block; font-size: 13px; font-weight: 650; opacity: .85; margin-bottom: 4px; }
.kontakt-daten a { color: #fff; }
.kontakt-flaeche .knopf-zeile { position: relative; z-index: 1; }
.knopf.rand-hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.knopf.rand-hell:hover { color: #fff; border-color: #fff; }

/* Bernstein aus dem Logo, nur auf dunklem Grund (dort 7:1 und mehr) */
.fuss .df-marke span,
.umsetzung .vorsatz,
.paket-hervor .nr-marke { color: #E9A23B; }
.paket-hervor .liste-haken li::before { background: #E9A23B; }
.umsetzung .leistungen li:hover { border-top-color: #E9A23B; }

/* =====================================================================
   Neustruktur 01.10.2026: Startseite, vier Themenseiten, Consulting, Coaching
   Gleiche Variablen wie oben, die Farben werden beim Bau auf die Palette
   von dirkfuhrmann.com umgeschrieben.
   ===================================================================== */

.augenbraue {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-size: 14px; font-weight: 650; letter-spacing: .02em; color: var(--violett-tief);
}
.augenbraue::before { content: ""; width: 24px; height: 2px; background: var(--violett); }

/* ---------- Kopf einer Seite ---------- */
.seite-hero { padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 96px); }
.seite-hero .innen {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
.seite-hero h1 { margin-bottom: 24px; }
.seite-hero.schmal h1 { font-size: clamp(34px, 4.4vw, 58px); }
.seite-hero .vorspann { margin-bottom: 0; }
@media (max-width: 900px) { .seite-hero .innen { grid-template-columns: minmax(0, 1fr); } }

/* Der Kreislauf auf der Startseite */
.kreislauf { margin: 0; }
.kreislauf svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.kreislauf .k-teil { fill: none; stroke-width: 34; stroke-linecap: butt; }
.kreislauf a { text-decoration: none; }
.kreislauf a:hover .k-name, .kreislauf a:focus-visible .k-name { fill: var(--violett-tief); }
.bewegt .kreislauf .k-teil { stroke-dasharray: 176; stroke-dashoffset: 176; animation: k-zeichnen 1s var(--ease) forwards; }
.bewegt .kreislauf .k-teil:nth-of-type(2) { animation-delay: .25s; }
.bewegt .kreislauf .k-teil:nth-of-type(3) { animation-delay: .5s; }
.bewegt .kreislauf .k-teil:nth-of-type(4) { animation-delay: .75s; }
@keyframes k-zeichnen { to { stroke-dashoffset: 0; } }

/* ---------- Szene: kurze Geschichte auf dunkler Fläche ---------- */
.szene { background: var(--navy); color: #CFE3E6; padding: clamp(64px, 9vw, 120px) 0; }
.szene .augenbraue { color: var(--violett-hell); }
.szene .augenbraue::before { background: var(--violett-hell); }
.szene-zeilen { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.szene-zeilen li {
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.14; font-weight: 750; letter-spacing: -0.028em;
  color: #fff; margin-bottom: .32em; text-wrap: balance;
}
.szene-zeilen li:last-child { color: var(--violett-hell); margin-bottom: 0; }
.szene-folge { margin: clamp(32px, 4vw, 48px) 0 0; max-width: 62ch; font-size: clamp(18px, 1.5vw, 20px); color: #CFE3E6; }
.szene-folge b { color: #fff; }
.verluste { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 900px; }
.verluste li { padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.verluste b { display: block; color: #fff; font-size: 20px; letter-spacing: -0.01em; }
.verluste span { font-size: 15px; color: #B4CACD; }
@media (max-width: 760px) { .verluste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Szene auf hellem Grund, innerhalb einer Themenseite */
.szene-hell { padding: clamp(28px, 4vw, 44px); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten-weich); max-width: 900px; }
.szene-hell .szene-zeilen li { color: var(--navy); font-size: clamp(22px, 2.6vw, 34px); }
.szene-hell .szene-zeilen li:last-child { color: var(--violett-tief); }
.szene-hell .szene-folge { color: var(--text-weich); font-size: 17px; margin-top: 22px; }
.szene-hell .szene-folge b { color: var(--navy); }

/* ---------- Vier Themen ---------- */
.themen-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.themen-karte {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px); border-radius: var(--radius);
  background: #fff; box-shadow: var(--schatten-weich); border-top: 4px solid var(--farbe, var(--violett));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.themen-karte:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(11, 46, 54,.06), 0 24px 48px -18px rgba(11, 46, 54,.3); }
.themen-karte .nr-marke { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--violett-tief); margin: 0 0 12px; }
.themen-karte h3 { font-size: clamp(22px, 2.2vw, 27px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.themen-karte p { color: var(--text-weich); margin-bottom: 22px; }
.themen-karte a.weiter { margin-top: auto; font-weight: 650; text-decoration: none; }
.themen-karte a.weiter::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.themen-karte a.weiter:focus-visible::after { outline: 2px solid var(--violett); outline-offset: 3px; }
@media (max-width: 760px) { .themen-karten { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Leistungen als Karten ---------- */
.leistungs-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.leistungs-raster li { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--linie); transition: border-color .3s, transform .3s var(--ease); }
.leistungs-raster li:hover { border-color: var(--violett-rand); transform: translateY(-2px); }
.leistungs-raster h3 { font-size: 18px; margin-bottom: 8px; }
.leistungs-raster p { font-size: 16px; color: var(--text-weich); margin-bottom: 16px; }
.leistungs-raster a { margin-top: auto; font-weight: 650; font-size: 15px; text-decoration: none; }
.leistungs-raster a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.leistungs-raster .produkt { background: var(--navy); border-color: var(--navy); }
.leistungs-raster .produkt h3 { color: #fff; }
.leistungs-raster .produkt p { color: #B4CACD; }
.leistungs-raster .produkt a { color: var(--violett-hell); }
.marke-klein { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; background: var(--violett-zart); color: var(--violett-tief); align-self: flex-start; }
.produkt .marke-klein { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 900px) { .leistungs-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .leistungs-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Zwei Rollen ---------- */
.rollen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rolle { padding: clamp(26px, 3vw, 36px); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten-weich); }
.rolle-wf { background: var(--navy); color: #CFE3E6; }
.rolle h3 { font-size: 24px; margin-bottom: 6px; }
.rolle-wf h3 { color: #fff; }
.rolle .rolle-was { font-weight: 650; color: var(--violett-tief); margin-bottom: 14px; }
.rolle-wf .rolle-was { color: var(--violett-hell); }
.rolle p:last-child { margin-bottom: 0; }
.rolle-wf a { color: var(--violett-hell); font-weight: 650; }
@media (max-width: 760px) { .rollen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Zeitleiste ---------- */
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; position: relative; }
.zeitleiste li { position: relative; padding: 34px 18px 0 0; }
.zeitleiste li::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: var(--farbe, var(--violett-rand)); }
.zeitleiste li::after { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--farbe, var(--violett)); }
.zeitleiste b { display: block; font-size: 17px; color: var(--navy); margin-bottom: 4px; }
.zeitleiste span { display: block; font-size: 15px; color: var(--text-weich); }
.zeitleiste .dauer { font-family: var(--mono); font-size: 13px; color: var(--violett-tief); margin-bottom: 6px; }
@media (max-width: 760px) {
  .zeitleiste { grid-template-columns: minmax(0, 1fr); }
  .zeitleiste li { padding: 0 0 22px 36px; }
  .zeitleiste li::before { left: 7px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .zeitleiste li::after { top: 2px; }
}

/* ---------- Fragen und Ansatz ---------- */
.fragen-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: f; }
.fragen-raster li { border-top: 2px solid var(--violett); padding-top: 18px; counter-increment: f; }
.fragen-raster li::before { content: counter(f, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 13px; color: var(--violett-tief); margin-bottom: 10px; }
.fragen-raster h3 { font-size: 19px; margin-bottom: 8px; }
.fragen-raster p { margin: 0; font-size: 16px; color: var(--text-weich); }
@media (max-width: 900px) { .fragen-raster { grid-template-columns: minmax(0, 1fr); } }

.themen-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.themen-chips li { padding: 6px 12px; border-radius: 999px; background: var(--violett-zart); color: var(--violett-tief); font-size: 14px; font-weight: 600; }

/* ---------- Zahl mit Quelle ---------- */
.zahl-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.zahl-karte { padding: clamp(26px, 3vw, 36px); border-radius: var(--radius); background: var(--violett); color: #fff; }
.zahl-karte.dunkel { background: var(--navy); }
.zahl-karte strong { display: block; font-size: clamp(56px, 7vw, 88px); line-height: .95; letter-spacing: -0.04em; font-weight: 800; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.zahl-karte p { margin: 0 0 10px; font-size: 18px; }
.zahl-karte .quelle { font-size: 13px; opacity: .85; margin: 0; }
@media (max-width: 760px) { .zahl-zeile { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Empfehlungsprogramm ---------- */
.empfehlung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(28px, 5vw, 56px); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten-weich); }
.empfehlung h2 { margin-bottom: 10px; }
.empfehlung .unterzeile { font-size: clamp(19px, 1.8vw, 23px); font-weight: 650; color: var(--violett-tief); margin-bottom: 18px; }
.empfehlung p { color: var(--text-weich); }
.empf-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.empf-tabelle caption { text-align: left; font-family: var(--mono); font-size: 12px; color: var(--text-still); margin-bottom: 8px; }
.empf-tabelle th, .empf-tabelle td { padding: 11px 8px; border-bottom: 1px solid var(--linie); text-align: right; }
.empf-tabelle th:first-child, .empf-tabelle td:first-child { text-align: left; }
.empf-tabelle thead th { font-size: 13px; color: var(--text-still); font-weight: 600; }
.empf-tabelle td:first-child { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 600; }
.empf-tabelle .kreis { width: 26px; height: 26px; border-radius: 50%; background: var(--violett-zart); flex: none; }
.empf-tabelle .treffer-zahl { color: var(--violett-tief); font-weight: 750; }
.empf-bild figcaption { margin-top: 10px; font-size: 13px; color: var(--text-still); }
@media (max-width: 900px) { .empfehlung { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kleinigkeiten ---------- */
.mittig-schmal { max-width: 760px; }
.abschnitt-weiter { margin-top: 28px; }
.hell-flaeche { background: #fff; }
/* Sektionen optisch trennen (Dirk, 01.10.2026): voller Abstand oben,
   jede zweite Sektion auf getoenter Flaeche mit Trennlinien */
.sektion.eng { padding: clamp(56px, 7vw, 96px) 0; }
main > .sektion:nth-of-type(even) { background: #E6F1F1; border-top: 1px solid #DCE5E4; border-bottom: 1px solid #DCE5E4; }
.seite-hero h1.schmal-h1 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; }

/* ---------- Sketchnote (01.10.2026, ersetzt den Kreislauf) ---------- */
@font-face { font-family: "Caveat"; src: url("/schrift/caveat-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
.sketch { margin: 0; }
.sketch svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; overflow: visible; }
.sketch .sk-schrift { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 600; }
.sketch .sk-akzent { stroke: #0F6B7E; }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bewegt .sketch .sk-station, .bewegt .sketch .sk-pfeile, .bewegt .sketch .sk-schrift, .bewegt .sketch .sk-marker { opacity: 0; transform: translateY(6px); transform-box: fill-box; animation: sk-zeigen .7s var(--ease) forwards; }
.bewegt .sketch .sk-station:nth-child(2) { animation-delay: .25s; }
.bewegt .sketch .sk-station:nth-child(3) { animation-delay: .5s; }
.bewegt .sketch .sk-station:nth-child(4) { animation-delay: .75s; }
.bewegt .sketch .sk-station:nth-child(5) { animation-delay: 1s; }
.bewegt .sketch .sk-pfeile { animation-delay: 1.2s; }
.bewegt .sketch .sk-marker { animation-delay: 1.3s; }
.bewegt .sketch .sk-schrift { animation-delay: 1.4s; }
@keyframes sk-zeigen { to { opacity: 1; transform: none; } }

/* Breiterer Textbereich (Dirk, 01.10.2026) */
@media (min-width: 901px) { .seite-hero .innen { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); } }
.vorspann { max-width: 68ch; }
.kopfzeile { max-width: 900px; }
.szene-zeilen, .szene-hell, .verluste { max-width: 1000px; }
.szene-folge { max-width: 72ch; }
.sketch .sk-text { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 600; }
.seite-hero .sketch svg { max-width: 540px; }
.leistungs-raster p.nutzen { font-weight: 650; color: var(--navy); margin-bottom: 8px; }
.leistungs-raster .produkt p.nutzen { color: #fff; }

/* =====================================================================
   Navigation mit zwei Gruppen (Neustruktur 01.10.2026)
   Gilt für beide Kopfzeilen: .kopf-menue (Startseite und Themenseiten)
   und .nav (Unterseiten aus der Live-Quelle). Breiter als vorher, deshalb
   klappt das Menü schon unter 1080px ein.
   ===================================================================== */
.navgruppe { position: relative; }
.navgruppe-knopf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--navy);
}
.navgruppe-knopf::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.navgruppe-knopf:hover { background: rgba(11, 46, 54,.05); }
.navgruppe-liste { display: none; flex-direction: column; }
.navgruppe-liste a { white-space: nowrap; }
.navgruppe.aktuell > .navgruppe-knopf { color: var(--violett-tief); }

@media (min-width: 1081px) {
  .navgruppe-liste {
    position: absolute; top: 100%; left: 0; z-index: 120; min-width: 270px;
    padding: 8px; margin-top: 6px; border-radius: 14px;
    background: #fff; border: 1px solid var(--linie);
    box-shadow: 0 2px 4px rgba(11, 46, 54,.05), 0 24px 48px -18px rgba(11, 46, 54,.3);
  }
  .navgruppe-liste::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .navgruppe:hover > .navgruppe-liste,
  .navgruppe:focus-within > .navgruppe-liste,
  .navgruppe-knopf[aria-expanded="true"] + .navgruppe-liste { display: flex; }
  .navgruppe:hover > .navgruppe-knopf::after,
  .navgruppe-knopf[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
  .navgruppe-liste a,
  .kopf-menue .navgruppe-liste a:not(.knopf),
  .nav .navgruppe-liste a:not(.knopf) {
    display: flex; min-height: 42px; padding: 0 12px; border-radius: 8px;
    font-size: 15px; font-weight: 550; color: var(--navy); text-decoration: none;
  }
  .navgruppe-liste a:hover { background: rgba(11, 46, 54,.05); }
  .navgruppe-liste a[aria-current="page"] { color: var(--violett-tief); background: rgba(11, 46, 54,.04); }
}

@media (max-width: 1080px) {
  /* Startseite und Themenseiten */
  .kopf-menue-knopf { display: inline-flex; align-items: center; }
  .kopf-menue {
    display: none; position: absolute; left: 0; right: 0; top: var(--kopf-h);
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--kopf-h)); overflow-y: auto;
    padding: 8px var(--rand) 20px; background: var(--hell); border-bottom: 1px solid var(--linie);
    box-shadow: 0 20px 30px -20px rgba(11, 46, 54,.25);
  }
  .kopf-menue.offen { display: flex; }
  .kopf-menue a:not(.knopf) { font-size: 17px; padding: 0 4px; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .kopf-menue .knopf { margin: 16px 0 0; }
  /* Unterseiten */
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 2px;
    max-height: calc(100vh - 68px); overflow-y: auto;
    padding: 10px var(--rand) 20px; background: rgba(244, 247, 246, .98); border-bottom: 1px solid var(--linie);
  }
  .menue-offen .nav { display: flex; }
  .nav .knopf { margin: 10px 0 0; }
  .menue-knopf { display: inline-flex; }
  /* Gruppen stehen offen untereinander */
  .navgruppe-knopf { pointer-events: none; padding: 14px 4px 4px; min-height: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-still, #5F7176); }
  .navgruppe-knopf::after { display: none; }
  .navgruppe-liste { display: flex; padding-left: 12px; }
  .navgruppe-liste a { white-space: normal; }
}