/* 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 #6264E8, Navy #131B3C, sehr dunkel #07071A,
 * hell #F7F7F7, dazu abgeleitete Töne. Systemschrift, kein Webfont.
 */

:root {
  --violett:        #6264E8;
  --violett-tief:   #4F51D6;   /* kleine violette Schrift auf Hell, 5,6:1 */
  --violett-hell:   #9295F5;   /* Violett auf Dunkel */
  --violett-zart:   #ECECFD;
  --violett-rand:   #D5D6FA;
  --navy:           #131B3C;
  --nacht:          #07071A;
  --hell:           #F7F7F7;
  --weiss:          #FFFFFF;

  --text:           #131B3C;
  --text-weich:     #464D6B;   /* 7,6:1 auf Hell */
  --text-still:     #5A6178;   /* 5,7:1 auf Hell */
  --linie:          #E1E2EC;
  --linie-stark:    #CFD1DF;
  --skelett:        #E4E5EF;

  --verlauf:        linear-gradient(135deg, #6264E8, #131B3C);
  --schatten-weich: 0 1px 2px rgba(19,27,60,.05), 0 10px 30px -14px rgba(19,27,60,.18);
  --schatten-knopf: 0 2px 4px rgba(19,27,60,.08), 0 12px 28px -12px rgba(98,100,232,.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: #B9BBD4 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: #D9DAFB; 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(19,27,60,.1), 0 18px 36px -14px rgba(98,100,232,.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(7,7,26,.12), 0 14px 30px -12px rgba(7,7,26,.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(247,247,247,.94);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(1px)) {
  .kopf { background: rgba(247,247,247,.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(19,27,60,.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(19,27,60,.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(7,7,26,.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(7,7,26,.12),
    0 40px 70px -30px rgba(19,27,60,.55),
    0 18px 30px -18px rgba(19,27,60,.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: #F1F2F7; 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 #F0F1F6; }
.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: #E9EAF0; }
.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(19,27,60,.12);
}
.pdf-seite .z { height: .28em; margin: .3em 0; background: #D9DAE3; }
.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, #6264E8 0%, #3B3DBE 45%, #131B3C 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(146,149,245,.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(7,7,26,.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(7,7,26,.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 #F0F1F6; }
.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: #F4F4FB; 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, #9295F5, #3B3DBE); }
.st-team span:nth-child(2) { background: linear-gradient(135deg, #C9CAF7, #6264E8); }
.st-team span:nth-child(3) { background: linear-gradient(135deg, #6E70EB, #131B3C); }
.st-team span:nth-child(4) { background: #E4E5EF; }
.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(98,100,232,.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(19,27,60,.6); }
.paket-hervor h3, .paket-hervor .paket-satz { color: #fff; }
.paket-hervor .kleingedruckt { color: #C3C6E4; }
.paket-hervor .liste-haken { border-color: rgba(255,255,255,.14); }
.paket-hervor .liste-haken li { color: #DDDFF3; }
.paket-hervor .liste-haken li::before { background: var(--violett-hell); }
.paket-hervor .knopf.haupt, .paket-hervor .knopf.haupt:hover { background: linear-gradient(135deg, #6264E8, #4F51D6); box-shadow: 0 2px 4px rgba(7,7,26,.3), 0 10px 22px -10px rgba(7,7,26,.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(7,7,26,.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: #B9BCD6; 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: #C9CBF7; display: inline-block; padding: 2px 0; min-height: 24px; }
.fuss a:hover { color: #fff; }
.fuss .kleingedruckt { color: #9A9EBE; }
.fuss-zeile { margin: 44px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #9A9EBE; }
@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: #C4C6EA; 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(19,27,60,.06), 0 24px 44px -20px rgba(19,27,60,.3); }
.paket-hervor:hover { box-shadow: 0 36px 70px -30px rgba(19,27,60,.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(98,100,232,.5); } 100% { box-shadow: 0 0 0 1em rgba(98,100,232,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);
}