/* ════════════════════════════════════════════════════════════════
   Digicheck · Whitelabel-Frontend
   Drei Designs, welches gilt, entscheidet die Domain (theme-init.js
   setzt data-design am <html>):

   kfzdeal24  Schwarz und Weiß im Stil von screenflow, Aufbau in der
              Art von Apple. Farbe trägt nur der Kopf: Markenrot mit einer
              schwarzen Fläche daneben. Die Bausteine sind darauf gebaut;
              Töne, Radien und alles, was nur kfzdeal24 am Aufbau anders
              macht, steht im Block „Design kfzdeal24" vor dem von
              screenflow.
   kraft-ehrlich  Aufbau und Regeln von kfzdeal24, der Kopf in Blau
              statt Rot. Nur Farben und Wortmarke weichen ab, alles im
              WHITELABEL-Block und bei .brand__logo.
   screenflow Stil von screen-flow.de: Weiß und Hellgrau, Text in
              Logo-Marine, eine Farbe (Logo-Blau), Figtree, Haarlinien
              statt Schatten. Steht als eigener Block am Dateiende und
              überschreibt nur, was abweicht.
   ════════════════════════════════════════════════════════════════ */

/* ═══════════ WHITELABEL: hier anpassen ═══════════
   Diese Farben je Design, das Logo im Kopf und die Links im Fuß sind
   alles, was ein anderer Mandant tauschen muss.
   ═════════════════════════════════════════════════ */
/* kfzdeal24: Rot nur im Kopf, alles andere Schwarz und Weiß. */
:root {
  --brand:        #1d1d1f;   /* Fortschritt, Haken, aktive Schritte */
  --brand-deep:   #000000;
  --brand-ink:    #1d1d1f;   /* Links und Hervorhebungen im Text */
  --action:       #1d1d1f;   /* Handlung: Schaltflächen */
  --action-hover: #3a3a3c;
  --action-ink:   #ffffff;   /* Schrift auf der Handlungsfarbe */
  --bar:          #961616;   /* Kopf, rote Fläche; Logo trägt helle Schrift */
  --bar-hell:     #ac1b1f;   /* oberer Rand des Verlaufs darin */
  --bar-schwarz:  #0b0b0c;   /* Kopf, schwarze Fläche */
}
:root[data-theme="dark"] {
  --brand:        #f5f5f7;
  --brand-deep:   #d2d2d7;
  --brand-ink:    #f5f5f7;
  --action:       #f5f5f7;
  --action-hover: #ffffff;
  --action-ink:   #000000;
}

/* Kraft & Ehrlich: Aufbau wie kfzdeal24, das Rot im Kopf wird zum Blau
   von kraft-ehrlich.de. Werte aus einem Bildschirmfoto der Startseite
   abgelesen, siehe docs/whitelabel.md. Im Kopf steht die Wortmarke auf
   Blau: Schrift weiß, im Zeichen Grün und Weiß, weil die blauen Felder
   auf dem blauen Balken verschwänden. Der Balken bleibt im Dunkeln
   gleich, wie bei kfzdeal24. */
:root[data-design="kraft-ehrlich"] {
  --bar:          #225398;   /* Blau aus dem Zeichen im Logo */
  --bar-hell:     #265699;   /* Blau der Kopfleisten auf kraft-ehrlich.de */
  --zeichen-schrift: #ffffff;
  --zeichen-a:    #ffffff;   /* im Original Blau, auf dem Balken Weiß */
  --zeichen-b:    #84b542;   /* Grün aus dem Zeichen im Logo */
}
:root[data-design="kraft-ehrlich"][data-theme="dark"] {
  --bar:          #225398;   /* Balken und Zeichen wie hell */
  --bar-hell:     #265699;
}

/* screenflow: eine Farbe für Marke und Handlung, Werte aus DESIGN.md
   der screenflow-Website. Weiß auf Logo-Blau 6,3:1, dunkel 4,9:1. */
:root[data-design="screenflow"] {
  --brand:        #024af6;
  --brand-deep:   #0039cf;
  --brand-ink:    #024af6;
  --action:       #024af6;
  --action-hover: #0039cf;
  --action-ink:   #ffffff;
}
:root[data-design="screenflow"][data-theme="dark"] {
  --brand:        #2a62f5;
  --brand-deep:   #1f4fd0;
  --brand-ink:    #7ea6f2;
  --action:       #2a62f5;
  --action-hover: #4677f7;
  --action-ink:   #ffffff;
}

:root {
  /* warmes Weiß wie Papier */
  --bg:         #fbfaf7;
  --bg-deep:    #f4f1ec;
  --surface:    #ffffff;
  --surface-2:  #faf8f5;

  --ink:        #1c1917;
  --ink-soft:   #4b4540;
  --ink-faint:  #6b645d;

  --line:       #e6e1d9;
  --line-strong:#d2cbc0;

  --fill:        rgba(28, 25, 23, 0.045);
  --fill-strong: rgba(28, 25, 23, 0.075);
  --input-bg:    #ffffff;
  --focus-ring:  rgba(185, 26, 26, 0.25);
  --field-border:#958d84;

  color-scheme: light;

  --ok:   #14804a;
  --warn: #b3400c;
  --soon: #8a6100;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* leichtes Ueberschwingen, nur fuer Piktogramme und Marken */
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);

  --shell: 1080px;
  --pad-x: clamp(1.1rem, 4vw, 2.5rem);

  --radius: 12px;
  --r-sm:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(40, 30, 20, .05), 0 2px 6px rgba(40, 30, 20, .04);
  --sh-md: 0 1px 2px rgba(40, 30, 20, .05), 0 10px 26px rgba(40, 30, 20, .07);
  /* Formularkarte und Musterbericht: kurz am Fuß, weich nach unten */
  --sh-lg: 0 1px 1px rgba(40, 30, 20, .04), 0 18px 40px -26px rgba(40, 30, 20, .35);

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:         #12110f;
  --bg-deep:    #191714;
  --surface:    #1c1a17;
  --surface-2:  #221f1b;

  --ink:        #f0ece6;
  --ink-soft:   #c0b8ae;
  --ink-faint:  #9e958a;

  --line:       #2f2b26;
  --line-strong:#423c35;

  --fill:        rgba(255, 255, 255, 0.05);
  --fill-strong: rgba(255, 255, 255, 0.08);
  --input-bg:    #12110f;
  --focus-ring:  rgba(217, 54, 54, 0.35);
  --field-border:#7a7168;

  --ok:   #4ade80;
  --warn: #fb923c;
  --soon: #fbbf24;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --sh-md: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .45);
  --sh-lg: 0 18px 40px -26px rgba(0, 0, 0, .8);
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
strong { font-weight: 600; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Honigtopf gegen Formular-Bots: für Menschen unsichtbar und nicht
   erreichbar, für Skripte ein gewöhnliches Feld. Nicht display:none,
   das überspringen manche Bots. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Kopfleiste: dunkelrot, weil das Logo helle Schrift trägt ── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bar);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 66px;
}

/* 42 px Höhe: das Logo ist 100 px hoch, damit bleibt es auch auf
   Bildschirmen mit doppelter Pixeldichte scharf und der Zusatz
   unter dem Schriftzug lesbar. */
.brand { flex-shrink: 0; }
.brand__logo { height: 42px; width: auto; }
.brand__link { display: block; }

/* Je Design ein Logo, die übrigen bleiben aus und werden nicht geladen. */
.brand__logo--screenflow-hell,
.brand__logo--screenflow-dunkel { display: none; }
:root[data-design="screenflow"] .brand__logo--kfzdeal24,
:root[data-design="kraft-ehrlich"] .brand__logo--kfzdeal24 { display: none; }
:root[data-design="screenflow"]:not([data-theme="dark"]) .brand__logo--screenflow-hell,
:root[data-design="screenflow"][data-theme="dark"] .brand__logo--screenflow-dunkel { display: block; }

/* Kraft & Ehrlich als Wortmarke in Figtree, nachgebaut nach dem Logo
   auf kraft-ehrlich.de: „Kraft“ fett, das Zeichen aus vier Feldern,
   „Ehrlich“ normal. Farben aus dem WHITELABEL-Block. */
.brand__logo--kraft-ehrlich { display: none; }
:root[data-design="kraft-ehrlich"] .brand__logo--kraft-ehrlich {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  height: auto;
  font-family: "Figtree", system-ui, sans-serif;
  /* schrumpft auf schmalen Handys, damit der Hinweis daneben ganz bleibt */
  font-size: clamp(1.1rem, 4.6vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--zeichen-schrift);
  white-space: nowrap;
}
.wortmarke-ke__kraft { font-weight: 700; }
.wortmarke-ke__ehrlich { font-weight: 400; }
.wortmarke-ke__zeichen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.07em;
  width: 0.78em;
  height: 0.78em;
}
.wortmarke-ke__zeichen i { display: block; background: var(--zeichen-a); }
.wortmarke-ke__zeichen i:nth-child(2),
.wortmarke-ke__zeichen i:nth-child(3) { background: var(--zeichen-b); }

/* Texte je Design: kfzdeal24 siezt, screenflow duzt und bleibt
   branchenneutral. Ohne data-design (kein JavaScript) gilt kfzdeal24,
   wie beim Rest der Gestaltung. */
:root:not([data-design="screenflow"]) .nur-screenflow,
:root[data-design="screenflow"] .nur-kfzdeal24 { display: none; }

/* Was nur zur Kfz-Branche passt, steht allein bei kfzdeal24. Kraft &
   Ehrlich siezt wie kfzdeal24, seine Kunden kommen aber aus Handel und
   Handwerk; dort steht die branchenneutrale Fassung. */
:root:is([data-design="screenflow"], [data-design="kraft-ehrlich"]) .nur-kfz,
:root:not([data-design="screenflow"]):not([data-design="kraft-ehrlich"]) .ohne-kfz { display: none; }

.site-header__claim {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.82);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  padding-left: 1.1rem;
}
/* Name des Angebots und wer es bereitstellt, auf jeder Breite sichtbar. */
.site-header__produkt { font-size: 1.06rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.site-header__anbieter { white-space: nowrap; }
.site-header__actions { margin-left: auto; }

.theme-switch { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.theme-switch__track {
  position: relative;
  display: block;
  width: 50px;
  height: 28px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.theme-switch__ico {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  stroke: rgba(255, 255, 255, 0.6);
  fill: none;
}
.theme-switch__ico[data-ico="sun"]  { left: 6px; }
.theme-switch__ico[data-ico="moon"] { right: 6px; }
:root[data-theme="light"] .theme-switch__ico[data-ico="sun"]  { stroke: #fff; }
:root[data-theme="dark"]  .theme-switch__ico[data-ico="moon"] { stroke: #fff; }
.theme-switch__knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transform: translate(0, -50%);
  transition: transform 0.3s var(--ease);
}
:root[data-theme="dark"] .theme-switch__knob { transform: translate(21px, -50%); }

/* ── Schaltflächen ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.74rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.25s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* flach: die Farbe trägt den Knopf, kein Verlauf, kein Schein */
.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--primary:hover { background: var(--action-hover); }

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

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Einstieg ─────────────────────────────────────────────── */

.hero { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.hero__inner { text-align: center; }

.hero__title {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.05rem);
  margin-bottom: 0.75rem;
}
.hero__lead {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0 auto clamp(1.6rem, 3vw, 2.3rem);
}

/* ── Panel: die Formularkarte ─────────────────────────────── */

.panel {
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.steps {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
}
.steps__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-faint);
  padding-right: 0.5rem;
}
.steps__item + .steps__item::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--line-strong);
  margin-right: 0.5rem;
}
.steps__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.73rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.steps__item.is-current { color: var(--ink); }
.steps__item.is-current .steps__dot {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.steps__item.is-done .steps__dot { background: var(--fill-strong); color: var(--ink-soft); }

.panel__body { padding: clamp(1.2rem, 2.5vw, 1.7rem); }

.stage { display: none; }
.stage.is-active { display: block; animation: stage-in 0.35s var(--ease) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.stage__title { font-size: 1.3rem; margin-bottom: 0.35rem; }
/* Der Titel bekommt beim Schrittwechsel programmatisch den Fokus,
   damit Vorleseprogramme mitkommen. Sichtbar sein muss der Ring dort nicht. */
.stage__title:focus { outline: none; }

.stage__hint { color: var(--ink-soft); font-size: 0.93rem; margin-bottom: 1.15rem; }
.stage__url {
  font-weight: 600;
  color: var(--ink);
  background: var(--fill);
  border-radius: 6px;
  padding: 0.08em 0.38em;
  overflow-wrap: anywhere;
}
.stage__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
/* display aus einer Klasse schlägt sonst das hidden-Attribut */
.stage__actions[hidden] { display: none; }
.stage__actions .btn { flex: 1 1 auto; }

.turnstile { margin-top: 1rem; min-height: 65px; }
.turnstile[hidden] { display: none; }

.panel__note { margin-top: 0.95rem; font-size: 0.83rem; line-height: 1.5; color: var(--ink-faint); }
html:not(.js) .panel__body,
html:not(.js) .steps,
html:not(.js) .theme-switch { display: none; }
.panel__noscript { padding: 1.2rem 1.4rem; font-size: 0.93rem; line-height: 1.55; color: var(--ink); }

/* Felder */

.field { margin-bottom: 1rem; }
.field__label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.42rem;
}
.field__opt { font-weight: 400; color: var(--ink-faint); }
.field__error { margin-top: 0.4rem; font-size: 0.84rem; color: var(--warn); }

.input, .urlfield {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input { padding: 0.75rem 0.9rem; font: inherit; color: var(--ink); }
.input::placeholder, .urlfield__input::placeholder { color: var(--ink-faint); }
.input:hover, .urlfield:hover { border-color: var(--ink-faint); }
.input:focus, .urlfield:focus-within {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Adresse und Schaltfläche in einem Block, das ist der Kern der Seite */
.urlfield {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0.32rem 0.32rem 0.9rem;
}
.urlfield__ico { flex-shrink: 0; width: 19px; height: 19px; color: var(--ink-faint); }
.urlfield__ico svg { display: block; width: 19px; height: 19px; }
.urlfield__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0.62rem 0;
  font: inherit;
  font-size: 1.06rem;
  color: var(--ink);
}
.urlfield__input:focus { outline: none; }
.urlfield__btn { flex-shrink: 0; padding-block: 0.7rem; }

.field.has-error .input,
.field.has-error .urlfield { border-color: var(--warn); }
.field.has-error .check__box { border-color: var(--warn); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }

.check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex-shrink: 0;
  margin-top: 0.12rem;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  border: 1px solid var(--field-border);
  background: var(--input-bg);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.check__box svg { display: block; width: 13px; height: 13px; }
.check input:checked + .check__box { background: var(--brand); border-color: var(--brand); color: #fff; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 4px var(--focus-ring); }
.check__text { font-size: 0.87rem; line-height: 1.5; color: var(--ink-soft); }
.check__text a { color: var(--brand-ink); }

/* Lauf */

.run { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.15rem; }
.run__bar {
  flex: 1;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--fill-strong);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.run__fill {
  position: relative;
  display: block;
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), #e0501f 60%, var(--action));
  transition: width 0.5s var(--ease);
  overflow: hidden;
}
.run__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  animation: sheen 1.8s var(--ease) infinite;
}
@keyframes sheen { to { transform: translateX(100%); } }
.run__pct {
  font-size: 0.89rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  min-width: 3.2rem;
  text-align: right;
}

.run__list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.run__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  font-size: 0.91rem;
  color: var(--ink-faint);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.run__ico {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  position: relative;
}
.run__item.is-running { background: var(--surface-2); color: var(--ink); }
.run__item.is-running .run__ico {
  border-color: var(--brand);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.run__item.is-done { color: var(--ink-soft); }
.run__item.is-done .run__ico {
  border-color: var(--ok);
  background: var(--ok);
  animation: marke-pop 0.4s var(--ease-pop);
}
.run__item.is-done .run__ico::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: zeichen-ein 0.35s var(--ease-pop) 0.08s backwards;
  background: no-repeat center/9px 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l3.6 3.6L16 5.8'/%3E%3C/svg%3E");
}

/* Ein Schritt, der nicht durchlief. Die übrigen laufen weiter. */
.run__item.is-error { color: var(--ink-soft); }
.run__item.is-error .run__ico {
  border-color: var(--warn);
  background: var(--warn);
  animation: marke-pop 0.4s var(--ease-pop);
}
.run__item.is-error .run__ico::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: zeichen-ein 0.35s var(--ease-pop) 0.08s backwards;
  background: no-repeat center/9px 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");
}

/* Der ganze Lauf ist gescheitert */
.run__fehler {
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--warn);
}

/* Abschluss */

.done__hinweis {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.stage--done { text-align: center; }
.done__seal {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0.2rem auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ok);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px -12px rgba(20, 128, 74, 0.9);
  animation: siegel-pop 0.5s var(--ease-pop) both;
}
.done__seal svg { display: block; width: 25px; height: 25px; }
/* Eine einzige Welle nach aussen, danach ist Ruhe. */
.done__seal::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--ok);
  animation: siegel-welle 0.9s var(--ease) 0.14s both;
}
.done__seal svg path { stroke-dasharray: 1; animation: haken-zeichnen 0.45s var(--ease) 0.2s both; }
@keyframes siegel-pop    { from { opacity: 0; transform: scale(0.55); } }
@keyframes siegel-welle  { from { opacity: 0.5; transform: scale(0.85); } to { opacity: 0; transform: scale(1.55); } }
@keyframes haken-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.done__provider {
  margin-top: 1.15rem;
  padding: 0.9rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: left;
}
.done__provider a { color: var(--brand-ink); font-weight: 600; }

/* ── Abschnitte ───────────────────────────────────────────── */

.section { padding-block: clamp(2.4rem, 4vw, 3.6rem); }
.section--tint { background: var(--bg-deep); border-block: 1px solid var(--line); }
.section__title {
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.8rem);
  margin-bottom: clamp(1.15rem, 2vw, 1.7rem);
}
/* Erst die Designs blenden diese ein: screenflow den Satz unter dem
   Titel, die Bilder und den Abschnitt zu den Gründern, beide die Seite
   aus dem Bericht. Ausgeblendet laden die Bilder nicht. */
.section__lead,
.section__bild,
.section--team,
.beleg { display: none; }

/* Prüfumfang */

.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.checks__item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  transition: background 0.25s var(--ease);
}
.checks__item:hover { background: var(--surface-2); }
.checks__item:hover .checks__ico {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  transform: scale(1.07);
}
.checks__item--ai:hover .checks__ico { background: linear-gradient(160deg, var(--brand), var(--brand-deep)); }
.checks__text { display: block; font-size: 0.89rem; color: var(--ink-soft); line-height: 1.5; }
.checks__text strong { display: block; font-size: 0.97rem; color: var(--ink); margin-bottom: 0.14rem; }
.checks__ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand-ink);
  transition: background 0.25s var(--ease), transform 0.3s var(--ease-pop);
}
.checks__ico svg { display: block; width: 19px; height: 19px; }
.checks__item--ai { grid-column: 1 / -1; }
.checks__item--ai .checks__ico {
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Ablauf */

.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 1.1rem;
}
.flow li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.89rem;
  color: var(--ink-soft);
}
.flow__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  color: #fff;
  font-size: 0.81rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Fragen */

.faq {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq__item { background: var(--surface); transition: background 0.25s var(--ease); }
.faq__item:hover { background: var(--surface-2); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 2.8rem 0.9rem 1.1rem;
  position: relative;
  font-weight: 600;
  font-size: 0.97rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__body { padding: 0 1.1rem 1rem; color: var(--ink-soft); font-size: 0.91rem; }

/* Fußbereich */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 1.5rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer__provider { font-size: 0.86rem; color: var(--ink-faint); }
.site-footer__provider a { color: var(--brand-ink); font-weight: 600; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.86rem; }
.site-footer__nav a { color: var(--ink-faint); text-decoration: none; }
.site-footer__nav a:hover { color: var(--brand-ink); }

/* ════════════════════════════════════════════════════════════════
   Bewegung der Piktogramme

   Alles hier ruehrt nur transform und opacity an, das erledigt der
   Compositor ohne neues Zeichnen. Keine Dauerschleife: jede Regung
   haengt an einem Zustand, dauert unter einer halben Sekunde und ist
   danach vorbei. Die einzigen Endlosanimationen der Seite bleiben
   spin und sheen, und die laufen nur waehrend eines Prueflaufs.
   Wer weniger Bewegung eingestellt hat, bekommt keine: der Block
   am Dateiende schaltet sie ab.
   ════════════════════════════════════════════════════════════════ */

@keyframes zeichen-ein { from { opacity: 0; transform: scale(0.5); } }
@keyframes marke-pop  { 0% { transform: scale(0.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes marke-druck { 0% { transform: scale(1); } 45% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* Globus im Adressfeld: faerbt und waechst, solange das Feld den Fokus hat */
.urlfield__ico { transition: color 0.25s var(--ease), transform 0.3s var(--ease-pop); }
.urlfield:focus-within .urlfield__ico { color: var(--brand-ink); transform: scale(1.12); }

/* Schrittpunkte oben im Panel */
.steps__item.is-current .steps__dot { animation: marke-pop 0.4s var(--ease-pop); }

/* Haken der Einwilligung */
.check input:checked + .check__box { animation: marke-druck 0.32s var(--ease-pop); }
.check input:checked + .check__box svg { animation: zeichen-ein 0.3s var(--ease-pop) 0.06s backwards; }

/* Sonne und Mond im Umschalter: das jeweils stille Zeichen tritt zurueck */
.theme-switch__ico { transition: transform 0.35s var(--ease-pop), stroke 0.25s var(--ease); }
:root[data-theme="light"] .theme-switch__ico[data-ico="moon"] { transform: translateY(-50%) scale(0.8) rotate(20deg); }
:root[data-theme="dark"]  .theme-switch__ico[data-ico="sun"]  { transform: translateY(-50%) scale(0.8) rotate(-45deg); }

/* ── Rechtstexte: Impressum und Datenschutz ───────────────── */

.legal { max-width: 74ch; }
.legal__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 0.5rem;
}
.legal__title {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.legal__lead { color: var(--ink-soft); margin-bottom: 1.6rem; }
.legal h2 {
  font-size: 1.15rem;
  margin-top: 2.2rem;
  margin-bottom: 0.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.legal h3 {
  font-size: 0.98rem;
  margin-top: 1.4rem;
  margin-bottom: 0.45rem;
}
.legal p,
.legal li { color: var(--ink-soft); font-size: 0.94rem; }
.legal p { margin-bottom: 0.8rem; }
.legal ul { margin: 0 0 0.9rem 1.15rem; padding-left: 0.35rem; list-style: disc; }
.legal li { margin-bottom: 0.35rem; }
.legal a { color: var(--brand-ink); }
.legal address { font-style: normal; line-height: 1.75; color: var(--ink-soft); font-size: 0.94rem; }

.legal dl { margin: 0 0 1.1rem; }
.legal dt { font-weight: 600; color: var(--ink); font-size: 0.94rem; margin-top: 0.9rem; }
.legal dd { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.94rem; }

/* Übersicht der Daten und Fristen. Schmale Fenster scrollen die Tabelle,
   der Seitenkörper bleibt unverschoben. */
.legal__scroll { overflow-x: auto; margin-bottom: 1.1rem; }
.legal__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.89rem;
}
.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
.legal__table th { color: var(--ink); font-weight: 600; }
.legal__table td { color: var(--ink-soft); }
.legal__table tbody tr:last-child td { border-bottom: none; }

/* Kasten für das, was der Text zusagt oder ausdrücklich verneint. */
.legal__box {
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.legal__box p:last-child,
.legal__box ul:last-child { margin-bottom: 0; }

/* Offener Punkt, noch vom Betreiber zu füllen. Fällt im Text auf,
   damit er vor dem Livegang nicht stehen bleibt. */
.legal__todo {
  background: transparent;
  color: var(--warn);
  font-weight: 600;
}

.legal__meta { color: var(--ink-faint); font-size: 0.84rem; margin-top: 2rem; }
.legal__back { display: inline-block; margin-top: 1.6rem; font-size: 0.9rem; }
.fehlerseite__aktionen { margin-top: 1.8rem; }

/* ── Schmale Fenster ──────────────────────────────────────── */

@media (max-width: 860px) {
  .site-header__inner { gap: 0.8rem; }
  .site-header__claim { padding-left: 0.8rem; font-size: 0.75rem; }
  .site-header__produkt { font-size: 0.95rem; }
  .checks { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; }
  .steps__label { display: none; }
  .stage__actions .btn { flex: 1 1 100%; }
  .urlfield { flex-wrap: wrap; padding: 0.55rem; }
  .urlfield__ico { display: none; }
  .urlfield__input { flex: 1 1 100%; padding-inline: 0.35rem; }
  .urlfield__btn { flex: 1 1 100%; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .done__seal,
  .done__seal::after,
  .done__seal svg path { animation: none; opacity: 1; transform: none; }
  .done__seal svg path { stroke-dasharray: none; }
  .checks__item:hover .checks__ico { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   Design kfzdeal24

   Schwarz und Weiß im Stil von screenflow, Aufbau in der Art von
   Apple: viel Weiß, große Schrift, hellgraue Kacheln ohne Rahmen,
   Knöpfe als schwarze Pillen. Farbe trägt nur der Kopf: links die
   rote Fläche unter dem Logo, schräg abgesetzt gegen Schwarz.

   Von oben nach unten: Kopf, die Frage und darunter das Adressfeld
   über die ganze Breite, zwei Sätze zum Ablauf, zwei Kacheln (sieben
   Bereiche mit grünen Haken, erste Seite eines Berichts), Fragen, Fuß. Unten links schwebt der
   Hinweis „Umgesetzt durch screenflow“.

   Ab Schritt 2 wird das Formular zur Karte. Das hängt an :has(); wo
   der Browser das nicht kennt, bleibt es ohne Karte und tut dasselbe.

   Beim Laden und beim Scrollen erscheint nichts nacheinander, die
   Seite steht sofort da. Bewegt wird nur, was auf eine Handlung
   antwortet. Wer weniger Bewegung eingestellt hat, bekommt auch das
   nicht: der Block für reduzierte Bewegung weiter oben gilt für beide
   Designs.

   Jede Regel hängt an :root:not([data-design="screenflow"]), wie
   bei den Texten je Design: ohne data-design gilt kfzdeal24.
   ════════════════════════════════════════════════════════════════ */

/* ── Töne, Radien, Schrift ── */

:root:not([data-design="screenflow"]) {
  --bg:          #ffffff;
  --bg-deep:     #f5f5f7;
  --surface:     #ffffff;
  --surface-2:   #f5f5f7;
  --kachel:      #f5f5f7;

  --ink:         #1d1d1f;
  --ink-soft:    #424245;
  --ink-faint:   #6e6e73;   /* 4,7:1 auf #f5f5f7, 5,1:1 auf Weiß */

  --line:        #e8e8ed;
  --line-strong: #d2d2d7;
  --trenner:     rgb(0 0 0 / 0.08);

  --fill:        rgb(0 0 0 / 0.04);
  --fill-strong: rgb(0 0 0 / 0.07);
  --input-bg:    #ffffff;
  --focus-ring:  rgb(0 0 0 / 0.1);
  --field-border:#86868b;   /* 3,6:1 auf Weiß */

  /* Haken grün, Fehler rot: beides muss auffallen */
  --ok:   #248a3d;
  --warn: #c4161c;
  --soon: #86868b;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 18px;
  --r-sm:   12px;
  --r-lg:   28px;

  --sh-sm: none;
  --sh-lg: 0 1px 2px rgb(0 0 0 / 0.04), 0 24px 48px -28px rgb(0 0 0 / 0.28);

  --shell: 1120px;
  --kachel-abstand: 20px;

  --font: "Figtree", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}
:root:not([data-design="screenflow"])[data-theme="dark"] {
  --bg:          #000000;
  --bg-deep:     #0b0b0c;
  --surface:     #161617;
  --surface-2:   #1d1d1f;
  --kachel:      #161617;

  --ink:         #f5f5f7;
  --ink-soft:    #c7c7cc;
  --ink-faint:   #98989d;   /* 6,2:1 auf #161617 */

  --line:        #2a2a2d;
  --line-strong: #3a3a3d;
  --trenner:     rgb(255 255 255 / 0.09);

  --fill:        rgb(255 255 255 / 0.05);
  --fill-strong: rgb(255 255 255 / 0.09);
  --input-bg:    #161617;
  --focus-ring:  rgb(255 255 255 / 0.18);
  --field-border:#7c7c80;

  --ok:   #30d158;
  --warn: #ff6961;
  --soon: #8e8e93;

  --sh-lg: 0 0 0 1px rgb(255 255 255 / 0.06);
}

:root:not([data-design="screenflow"]) body { font-size: 1.0625rem; line-height: 1.55; }
:root:not([data-design="screenflow"]) :is(h1, h2, h3) { font-weight: 700; letter-spacing: -0.03em; }
:root:not([data-design="screenflow"]) strong { font-weight: 650; }
:root:not([data-design="screenflow"]) :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ── Kopf: Rot unter dem Logo, schräg abgesetzt gegen Schwarz ──
   Die rote Fläche hängt als ::before am Logo und reicht nach links
   bis über den Rand. So steht die Schräge immer gleich weit hinter
   dem Logo, egal wie breit das Fenster ist. */

:root:not([data-design="screenflow"]) .site-header {
  background: var(--bar-schwarz);
  overflow: hidden;
}
:root:not([data-design="screenflow"]) .site-header__inner { min-height: 60px; gap: 0; }
:root:not([data-design="screenflow"]) .brand {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: clamp(1.9rem, 4vw, 3rem);
  margin-right: clamp(0.9rem, 2.5vw, 1.6rem);
}
:root:not([data-design="screenflow"]) .brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  background: linear-gradient(180deg, var(--bar-hell), var(--bar));
  transform: skewX(-18deg);
  transform-origin: center;
}
:root:not([data-design="screenflow"]) .brand__logo { height: 38px; }
:root:not([data-design="screenflow"]) .site-header__claim {
  border-left: 0;
  padding-left: 0;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.62);
}
:root:not([data-design="screenflow"]) .site-header__produkt {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ── Knöpfe: Pillen, flach, schwarz ── */

:root:not([data-design="screenflow"]) .btn {
  min-height: 48px;
  padding: 0 1.45rem;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
:root:not([data-design="screenflow"]) .btn:active { transform: scale(0.97); }
:root:not([data-design="screenflow"]) .btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
}
:root:not([data-design="screenflow"]) .btn--ghost:hover { background: var(--fill); border-color: var(--field-border); }
:root:not([data-design="screenflow"]) .linkbtn { font-weight: 650; text-decoration-thickness: 1px; }

/* ── Einstieg: die Frage, darunter das Adressfeld über die ganze Breite ── */

:root:not([data-design="screenflow"]) .hero {
  padding-block: clamp(2.25rem, 6vw, 4.75rem) clamp(3rem, 7vw, 5.5rem);
}
:root:not([data-design="screenflow"]) .hero__inner { text-align: center; }
:root:not([data-design="screenflow"]) .hero__title {
  max-width: 15ch;
  margin: 0 auto clamp(1.6rem, 3.5vw, 2.6rem);
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.75rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
/* Der Satz darunter steht hier als zwei Punkte unter dem Feld */
:root:not([data-design="screenflow"]) .hero__lead { display: none; }

/* Formular: in Schritt 1 nur das Feld, ohne Karte und Schrittleiste */
:root:not([data-design="screenflow"]) .panel {
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
:root:not([data-design="screenflow"]) .panel__body { padding: 0; }
:root:not([data-design="screenflow"]) .panel:has([data-stage="1"].is-active) .steps { display: none; }
:root:not([data-design="screenflow"]) [data-stage="1"] .field { margin-bottom: 0; }
:root:not([data-design="screenflow"]) [data-stage="1"] .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:root:not([data-design="screenflow"]) [data-stage="1"] .panel__note { display: none; }
:root:not([data-design="screenflow"]) [data-stage="1"] .field__error { text-align: left; padding-left: 1.5rem; }

/* Ab Schritt 2 wird das Formular zur Karte */
:root:not([data-design="screenflow"]) .panel:has(.stage.is-active:not([data-stage="1"])) {
  max-width: 760px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
:root:not([data-design="screenflow"]) .panel:has(.stage.is-active:not([data-stage="1"])) .panel__body {
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}

/* Adressfeld: die größte Fläche der Seite */
:root:not([data-design="screenflow"]) .urlfield {
  min-height: 76px;
  gap: 0.9rem;
  padding: 8px 8px 8px 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 44px -26px rgb(0 0 0 / 0.32);
  transition: border-color 0.25s var(--ease), box-shadow 0.4s var(--ease);
}
:root:not([data-design="screenflow"]) .urlfield:hover { border-color: var(--field-border); }
:root:not([data-design="screenflow"]) .urlfield:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 5px var(--focus-ring), 0 22px 54px -26px rgb(0 0 0 / 0.4);
}
:root:not([data-design="screenflow"])[data-theme="dark"] .urlfield { box-shadow: none; }
:root:not([data-design="screenflow"])[data-theme="dark"] .urlfield:focus-within { box-shadow: 0 0 0 5px var(--focus-ring); }
:root:not([data-design="screenflow"]) .urlfield__ico,
:root:not([data-design="screenflow"]) .urlfield__ico svg { width: 22px; height: 22px; }
:root:not([data-design="screenflow"]) .urlfield:focus-within .urlfield__ico { color: var(--ink); transform: none; }
:root:not([data-design="screenflow"]) .urlfield__input {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  padding-block: 0.6rem;
}
:root:not([data-design="screenflow"]) .urlfield__btn {
  align-self: stretch;
  min-height: 58px;
  padding-inline: clamp(1.4rem, 2.5vw, 2rem);
  font-size: 1.0625rem;
}

/* Zwei Punkte zum Ablauf, nebeneinander unter dem Feld */
:root:not([data-design="screenflow"]) .ablauf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.75rem);
  max-width: 920px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: left;
}
:root:not([data-design="screenflow"]) .ablauf__punkt {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
:root:not([data-design="screenflow"]) .ablauf__punkt strong { display: block; color: var(--ink); margin-bottom: 0.15rem; }
:root:not([data-design="screenflow"]) .ablauf__ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
}
:root:not([data-design="screenflow"]) .ablauf__ico svg { width: 14px; height: 14px; }

/* Schritte als Segmentschalter: graue Schiene, der aktive liegt weiß darauf */
:root:not([data-design="screenflow"]) .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.6rem) 0;
  padding: 3px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-strong);
}
:root:not([data-design="screenflow"]) .steps__item {
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.4rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
:root:not([data-design="screenflow"]) .steps__item + .steps__item::before { display: none; }
:root:not([data-design="screenflow"]) .steps__item.is-current {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.1);
}
:root:not([data-design="screenflow"])[data-theme="dark"] .steps__item.is-current { background: #3a3a3c; }
:root:not([data-design="screenflow"]) .steps__item.is-done { color: var(--ink-soft); }
:root:not([data-design="screenflow"]) .steps__dot {
  width: 20px;
  height: 20px;
  border: 0;
  font-size: 0.72rem;
  background: var(--fill-strong);
}
:root:not([data-design="screenflow"]) .steps__item.is-current .steps__dot {
  background: var(--brand);
  color: var(--action-ink);
  animation: none;
}

/* Erledigte Schritte bekommen einen grünen Haken statt der Ziffer */
:root:not([data-design="screenflow"]) .steps__item.is-done .steps__dot {
  background: var(--ok) no-repeat center / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l3.6 3.6L16 5.8'/%3E%3C/svg%3E");
  color: transparent;
}
:root:not([data-design="screenflow"]) .check input:checked + .check__box { color: var(--action-ink); }
:root:not([data-design="screenflow"]) .check__box { border-radius: 7px; }

/* Felder */
:root:not([data-design="screenflow"]) .stage__title { font-size: 1.5rem; letter-spacing: -0.025em; }
:root:not([data-design="screenflow"]) .field__label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
:root:not([data-design="screenflow"]) .input {
  min-height: 50px;
  padding: 0.75rem 1rem;
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
}
:root:not([data-design="screenflow"]) .input:hover { border-color: var(--field-border); }
:root:not([data-design="screenflow"]) .input:focus { border-color: var(--ink); }
:root:not([data-design="screenflow"]) .stage__url { border-radius: 8px; }
:root:not([data-design="screenflow"]) .check__text a { color: var(--ink); }

/* Lauf: schmaler Balken, Schritte als gruppierte Liste */
:root:not([data-design="screenflow"]) .run__bar { height: 6px; box-shadow: none; }
:root:not([data-design="screenflow"]) .run__fill { background: var(--brand); }
:root:not([data-design="screenflow"]) .run__pct { color: var(--ink); font-weight: 650; }
:root:not([data-design="screenflow"]) .run__list {
  gap: 0;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius);
}
:root:not([data-design="screenflow"]) .run__item { padding: 0.72rem 1rem; background-color: transparent; }
:root:not([data-design="screenflow"]) .run__item + .run__item {
  background-image: linear-gradient(var(--trenner), var(--trenner));
  background-size: calc(100% - 2.75rem) 1px;
  background-position: right top;
  background-repeat: no-repeat;
}
:root:not([data-design="screenflow"]) .run__item.is-running { color: var(--ink); background-color: var(--fill); }
:root:not([data-design="screenflow"]) .run__fehler { border-radius: var(--r-sm); }

/* Abschluss */
:root:not([data-design="screenflow"]) .done__seal { color: #fff; box-shadow: none; }
:root:not([data-design="screenflow"]) .done__provider {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius);
}
:root:not([data-design="screenflow"]) .done__provider a { color: var(--ink); }

/* ── Zwei Kacheln: sieben Bereiche und der Bericht ── */

:root:not([data-design="screenflow"]) .kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kachel-abstand);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
:root:not([data-design="screenflow"]) .kacheln > .section {
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  background: var(--kachel);
  border: 0;
  border-radius: var(--r-lg);
}
:root:not([data-design="screenflow"]) .kacheln .shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: none;
  padding: 0;
}
:root:not([data-design="screenflow"]) .section__title {
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
/* Titel sind Sätze und enden mit Punkt, wie auf screen-flow.de */
:root:not([data-design="screenflow"]) .section__title::after { content: "."; }
:root:not([data-design="screenflow"]) .kacheln .section__title {
  max-width: 16ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Den Ablauf erzählen schon die zwei Punkte unter dem Feld */
:root:not([data-design="screenflow"]) .flow { display: none; }

/* Sieben Bereiche: grüner Haken, Name, darunter grau der Inhalt */
:root:not([data-design="screenflow"]) .checks {
  grid-template-columns: 1fr;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
:root:not([data-design="screenflow"]) .checks__item,
:root:not([data-design="screenflow"]) .checks__item:hover {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 0.95rem;
  padding: 0.8rem 0;
  background: none;
}
:root:not([data-design="screenflow"]) .checks__item + .checks__item { border-top: 1px solid var(--trenner); }
:root:not([data-design="screenflow"]) :is(.checks__item, .checks__item--ai, .checks__item:hover, .checks__item--ai:hover) .checks__ico {
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  box-shadow: none;
  transform: none;
}
:root:not([data-design="screenflow"]) .checks__ico svg { width: 13px; height: 13px; }
:root:not([data-design="screenflow"]) .checks__text { font-size: 0.875rem; line-height: 1.4; color: var(--ink-faint); }
:root:not([data-design="screenflow"]) .checks__text strong {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 0.1rem;
}

/* Bericht: die erste Seite eines echten Berichts mit Beispieldaten,
   dasselbe Bild wie bei screenflow. Jeder Bericht läuft unter dem
   Mandanten screenflow, so sieht er auch hier aus. Unten blendet das
   Blatt aus, der Rest der Seite ist leer. */
:root:not([data-design="screenflow"]) .beleg { display: block; margin: auto 0 0; }
:root:not([data-design="screenflow"]) .beleg__buehne {
  aspect-ratio: 210 / 236;
  overflow: hidden;
  padding: 4px 4px 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
          mask-image: linear-gradient(#000 70%, transparent);
}
:root:not([data-design="screenflow"]) .beleg__blatt {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.07), 0 2px 6px rgb(0 0 0 / 0.05);
}
:root:not([data-design="screenflow"])[data-theme="dark"] .beleg__blatt { box-shadow: none; }
:root:not([data-design="screenflow"]) .beleg figcaption {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* ── Fragen: Titel links, Haarlinien rechts ── */

:root:not([data-design="screenflow"]) #datenschutz { padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) {
  :root:not([data-design="screenflow"]) #datenschutz > .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
  }
  :root:not([data-design="screenflow"]) #datenschutz .section__title { position: sticky; top: 96px; margin: 0; }
}
:root:not([data-design="screenflow"]) .faq {
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: visible;
}
:root:not([data-design="screenflow"]) .faq__item,
:root:not([data-design="screenflow"]) .faq__item:hover {
  background: none;
  border-bottom: 1px solid var(--line-strong);
}
:root:not([data-design="screenflow"]) .faq__item summary {
  padding: 1.3rem 2.5rem 1.3rem 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}
:root:not([data-design="screenflow"]) .faq__item summary:hover { color: var(--ink-soft); }
:root:not([data-design="screenflow"]) .faq__item summary::after {
  right: 0.4rem;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}
:root:not([data-design="screenflow"]) .faq__body {
  max-width: 62ch;
  padding: 0 2.5rem 1.4rem 0;
  font-size: 1rem;
  color: var(--ink-faint);
}
:root:not([data-design="screenflow"]) .faq__body a { color: var(--ink); }
:root:not([data-design="screenflow"]) .faq__item[open] .faq__body { animation: stage-in 0.4s var(--ease) both; }

/* Rechtstexte: keine Versalien-Dachzeile, wie bei screenflow */
:root:not([data-design="screenflow"]) .legal__kicker {
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

/* ── Fuß: hellgrau, klein, rechts der Umschalter ── */

:root:not([data-design="screenflow"]) .site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding-block: 1.75rem 2.25rem;
}
:root:not([data-design="screenflow"]) .site-footer__provider,
:root:not([data-design="screenflow"]) .site-footer__nav { font-size: 0.8125rem; }
:root:not([data-design="screenflow"]) .site-footer__provider a { color: var(--ink); }
:root:not([data-design="screenflow"]) .site-footer__nav a { color: var(--ink-soft); }
:root:not([data-design="screenflow"]) .site-footer__nav a:hover { color: var(--ink); text-decoration: underline; }

/* Umschalter wie in iOS, an in der Gegenfarbe */
:root:not([data-design="screenflow"]) .theme-switch--fuss {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--ink-faint);
}
:root:not([data-design="screenflow"]) .theme-switch--fuss .theme-switch__track {
  width: 46px;
  height: 28px;
  border: 0;
  background: var(--fill-strong);
  transition: background 0.2s var(--ease);
}
:root:not([data-design="screenflow"])[data-theme="dark"] .theme-switch--fuss .theme-switch__track { background: var(--ink); }
:root:not([data-design="screenflow"]) .theme-switch--fuss .theme-switch__knob {
  left: 2px;
  width: 24px;
  height: 24px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2), 0 0 0 0.5px rgb(0 0 0 / 0.04);
  transition-duration: 0.25s;
}
:root:not([data-design="screenflow"])[data-theme="dark"] .theme-switch--fuss .theme-switch__knob {
  background: #1d1d1f;
  transform: translate(18px, -50%);
}
/* Ohne JavaScript schaltet nichts um, wie beim Umschalter im Kopf */
:root:not(.js) .theme-switch.theme-switch--fuss { display: none; }

/* ── Hinweis unten links: „Umgesetzt durch screenflow“ ──
   Schwebt über allem und führt zu screen-flow.de. Das Kreuz ist mit
   Absicht klein, es sitzt halb über dem Rand der Pille. Im Design
   screenflow aus (.nur-kfzdeal24). */

:root:not([data-design="screenflow"]) .umgesetzt {
  position: fixed;
  z-index: 60;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  transition: opacity 0.25s var(--ease);
}
:root:not([data-design="screenflow"]) .umgesetzt[hidden] { display: none; }
:root:not([data-design="screenflow"]) .umgesetzt.is-zu { opacity: 0; }

:root:not([data-design="screenflow"]) .umgesetzt__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem 0.55rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgb(11 11 12 / 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 10px 28px -12px rgb(0 0 0 / 0.5);
  color: rgb(255 255 255 / 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
:root:not([data-design="screenflow"]) .umgesetzt__link:hover { background: #000; }
:root:not([data-design="screenflow"]) .umgesetzt__logo { height: 11px; width: auto; }

:root:not([data-design="screenflow"]) .umgesetzt__zu {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #3a3a3c;
  color: rgb(255 255 255 / 0.75);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s var(--ease);
}
:root:not([data-design="screenflow"]) .umgesetzt__zu:hover { opacity: 1; }
:root:not([data-design="screenflow"]) .umgesetzt__zu svg { width: 7px; height: 7px; }
html:not(.js) .umgesetzt__zu { display: none; }

/* ── Bewegung ──
   Die Seite steht beim Laden und beim Scrollen sofort da, nichts
   erscheint nacheinander. Bewegt wird nur, was auf eine Handlung
   antwortet: Schrittwechsel, aufgeklappte Fragen, die Einwilligung,
   der Fortschritt einer laufenden Prüfung. */

@keyframes scharf-kurz { from { opacity: 0; filter: blur(4px); } }
@keyframes einblenden  { from { opacity: 0; } }

/* Schrittwechsel, Fragen, Formular: kurz scharf werden */
:root:not([data-design="screenflow"]) .stage.is-active { animation-name: scharf-kurz; }
/* Schritt 1 steht schon beim Laden da, er blendet nicht ein */
:root:not([data-design="screenflow"]) .stage[data-stage="1"].is-active { animation: none; }
:root:not([data-design="screenflow"]) .faq__item[open] .faq__body { animation: scharf-kurz 0.4s var(--ease) both; }
:root:not([data-design="screenflow"]) .check input:checked + .check__box,
:root:not([data-design="screenflow"]) .check input:checked + .check__box svg { animation: einblenden 0.25s var(--ease); }
:root:not([data-design="screenflow"]) .run__item.is-done .run__ico,
:root:not([data-design="screenflow"]) .run__item.is-error .run__ico,
:root:not([data-design="screenflow"]) :is(.run__item.is-done, .run__item.is-error) .run__ico::after { animation: einblenden 0.35s var(--ease) backwards; }
:root:not([data-design="screenflow"]) .done__seal { animation: einblenden 0.5s var(--ease) both; }
:root:not([data-design="screenflow"]) .done__seal::after { display: none; }

/* ── Schmale Fenster ── */

@media (max-width: 860px) {
  :root:not([data-design="screenflow"]) .kacheln { grid-template-columns: 1fr; }
  :root:not([data-design="screenflow"]) .kacheln > .section { padding-block: clamp(1.6rem, 5vw, 2.25rem); }
}

@media (max-width: 720px) {
  :root:not([data-design="screenflow"]) .ablauf { grid-template-columns: 1fr; max-width: 30rem; }
}

@media (max-width: 560px) {
  :root:not([data-design="screenflow"]) .site-header__inner { min-height: 54px; }
  :root:not([data-design="screenflow"]) .brand__logo { height: 32px; }
  :root:not([data-design="screenflow"]) .brand { padding-right: 1.6rem; margin-right: 0.8rem; }
  :root:not([data-design="screenflow"]) .site-header__claim { font-size: 0.75rem; }
  :root:not([data-design="screenflow"]) .site-header__produkt { font-size: 0.9375rem; }

  :root:not([data-design="screenflow"]) .steps__label { display: inline; }
  :root:not([data-design="screenflow"]) .steps__item { gap: 0.35rem; font-size: 0.8rem; }

  /* Knopf unter die Eingabe, eine Pille passt dann nicht mehr */
  :root:not([data-design="screenflow"]) .urlfield {
    min-height: 0;
    padding: 8px;
    border-radius: 24px;
  }
  :root:not([data-design="screenflow"]) .urlfield__input { padding: 0.75rem 0.75rem; }
  :root:not([data-design="screenflow"]) .urlfield__btn { min-height: 52px; }
  :root:not([data-design="screenflow"]) [data-stage="1"] .field__error { padding-left: 0.75rem; }

  :root:not([data-design="screenflow"]) .faq__body { padding-right: 0; }

  /* Der Hinweis unten links darf das Ende der Seite nicht verdecken */
  :root:not([data-design="screenflow"]) .site-footer { padding-bottom: 4.5rem; }
}

/* ════════════════════════════════════════════════════════════════
   Design screenflow

   Gilt, wenn theme-init.js data-design="screenflow" setzt. Werte aus
   DESIGN.md und sf.css der screenflow-Website: Weiß und Hellgrau als
   Flächen, Text in Logo-Marine, Logo-Blau nur für Handlung, Links,
   Fortschritt und Fokus. Haarlinien statt Schatten, kein Glas, keine
   Verläufe, keine Icon-Kacheln, keine Versalien. Knöpfe als Pillen,
   Gewichte 400, 500, 650, 750.

   Die Markenfarben stehen oben im WHITELABEL-Block. Hier stehen die
   neutralen Töne und alles, was am Aufbau anders ist. Jede Regel hängt
   an :root[data-design="screenflow"] und ist damit spezifischer als
   die Grundregel, egal wo sie steht.
   ════════════════════════════════════════════════════════════════ */

:root[data-design="screenflow"] {
  color-scheme: light;

  --bg:          #ffffff;
  --bg-deep:     #f4f5f7;
  --surface:     #ffffff;
  --surface-2:   #f4f5f7;

  --ink:         #000e32;   /* Logo-Marine */
  --ink-soft:    #4a5368;   /* 8,1:1 auf Weiß */
  --ink-faint:   #5a6275;   /* 6,1:1 auf Weiß */

  --line:        #e4e6eb;
  --line-strong: #cfd3db;

  --fill:        rgb(0 14 50 / 0.05);
  --fill-strong: rgb(0 14 50 / 0.08);
  --input-bg:    #ffffff;
  --focus-ring:  rgb(2 74 246 / 0.16);
  --field-border:#868d9d;   /* 3,3:1 auf Weiß */

  --ok:   #14804a;
  --warn: #b42318;
  --soon: #8a6100;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 14px;
  --r-sm:   10px;
  --r-lg:   18px;

  --sh-sm: 0 0 #0000;
  --sh-md: 0 0 #0000;
  --sh-lg: 0 0 #0000;

  --shell: 1200px;

  --shot-stage:  #e8ebf1;   /* Bühne hinter Bildschirmansichten */

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Dunkel: reines Schwarz, neutrale Flächen ohne Blaustich */
:root[data-design="screenflow"][data-theme="dark"] {
  color-scheme: dark;

  --bg:          #000000;
  --bg-deep:     #0e0e10;
  --surface:     #161618;
  --surface-2:   #1c1c1f;

  --ink:         #f5f5f7;
  --ink-soft:    #a9adb8;   /* 9,4:1 auf Schwarz */
  --ink-faint:   #8d919c;   /* 6,5:1 auf Schwarz */

  --line:        #26262b;
  --line-strong: #3a3a41;

  --fill:        rgb(255 255 255 / 0.05);
  --fill-strong: rgb(255 255 255 / 0.08);
  --input-bg:    #161618;
  --focus-ring:  rgb(126 166 242 / 0.26);
  --field-border:#73767f;

  --ok:   #4ade80;
  --warn: #ff8a80;
  --soon: #fbbf24;

  --shot-stage:  #1b1c20;
}

/* ── Grundlagen ── */

:root[data-design="screenflow"] body { font-size: 1.0625rem; line-height: 1.55; }
:root[data-design="screenflow"] :is(h1, h2, h3) { font-weight: 750; letter-spacing: -0.028em; }
:root[data-design="screenflow"] strong { font-weight: 650; }
:root[data-design="screenflow"] ::selection { background: var(--focus-ring); }

/* Eingabefelder zeigen den Fokus über Rahmen und Aura, nicht hier */
:root[data-design="screenflow"] :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}

/* ── Kopf: deckend, Haarlinie unten, kein Glas ── */

:root[data-design="screenflow"] .site-header {
  background: var(--bg);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
:root[data-design="screenflow"] .site-header__inner { min-height: 64px; }
:root[data-design="screenflow"] .brand__logo { height: 28px; }
:root[data-design="screenflow"] .site-header__claim {
  font-size: 0.9063rem;
  color: var(--ink-soft);
  border-left-color: var(--line-strong);
}
:root[data-design="screenflow"] .site-header__produkt { color: var(--ink); }
@media (max-width: 860px) {
  :root[data-design="screenflow"] .site-header__claim { font-size: 0.75rem; }
}
@media (max-width: 560px) {
  :root[data-design="screenflow"] .brand__logo { height: 20px; }
}
@media (max-width: 400px) {
  :root[data-design="screenflow"] .site-header__anbieter { white-space: normal; }
}
@media (max-width: 340px) {
  :root[data-design="screenflow"] .brand__logo { height: 16px; }
}

/* Umschalter als Pille 44 × 26, aktiv in Logo-Blau */
:root[data-design="screenflow"] .theme-switch__track {
  width: 44px;
  height: 26px;
  border: 0;
  background: var(--line-strong);
  transition: background-color 0.2s var(--ease);
}
:root[data-design="screenflow"][data-theme="dark"] .theme-switch__track { background: var(--action); }
:root[data-design="screenflow"] .theme-switch__knob { width: 20px; height: 20px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
:root[data-design="screenflow"][data-theme="dark"] .theme-switch__knob { transform: translate(18px, -50%); }
:root[data-design="screenflow"] .theme-switch__ico[data-ico] { stroke: var(--ink-soft); }
:root[data-design="screenflow"][data-theme="dark"] .theme-switch__ico[data-ico] { stroke: #fff; }

/* ── Knöpfe: Pillen, flach ── */

:root[data-design="screenflow"] .btn {
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.9688rem;
  font-weight: 650;
  line-height: 1;
}
:root[data-design="screenflow"] .btn:hover { transform: none; }
:root[data-design="screenflow"] .btn:active { transform: scale(0.98); }

:root[data-design="screenflow"] .btn--primary,
:root[data-design="screenflow"] .btn--primary:hover { box-shadow: none; color: var(--action-ink); }
:root[data-design="screenflow"] .btn--primary { background: var(--action); }
:root[data-design="screenflow"] .btn--primary:hover { background: var(--action-hover); }

:root[data-design="screenflow"] .btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
}
:root[data-design="screenflow"] .btn--ghost:hover { background: var(--bg-deep); border-color: var(--ink-faint); }

:root[data-design="screenflow"] .linkbtn {
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ── Einstieg: hellgraue Bühne, darauf die weiße Formularkarte ── */

:root[data-design="screenflow"] .hero {
  background: var(--bg-deep);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}
:root[data-design="screenflow"] .hero__title {
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.033em;
}
:root[data-design="screenflow"] .hero__lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

:root[data-design="screenflow"] .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}

:root[data-design="screenflow"] .steps__item { font-size: 0.875rem; }
:root[data-design="screenflow"] .steps__dot { font-weight: 650; }
:root[data-design="screenflow"] .steps__item.is-current .steps__dot {
  color: var(--action-ink);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

:root[data-design="screenflow"] .stage__title { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.015em; }

/* Felder: 48 px, 10 px Radius, Fokus mit Rahmen und Aura */
:root[data-design="screenflow"] .field__label { font-size: 0.9375rem; font-weight: 650; color: var(--ink); }
:root[data-design="screenflow"] .input { min-height: 48px; padding: 12px 14px; }
:root[data-design="screenflow"] .input:focus,
:root[data-design="screenflow"] .urlfield:focus-within {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Adressfeld als Pille, der Knopf sitzt darin */
:root[data-design="screenflow"] .urlfield {
  border-radius: var(--r-pill);
  padding: 5px 5px 5px 18px;
  box-shadow: none;
}
:root[data-design="screenflow"] .urlfield__btn { min-height: 46px; padding-inline: 22px; }

:root[data-design="screenflow"] .check__box { border-radius: 6px; }

/* Lauf */
:root[data-design="screenflow"] .run__bar { height: 6px; box-shadow: none; }
:root[data-design="screenflow"] .run__fill { background: var(--brand); }
:root[data-design="screenflow"] .run__pct { font-weight: 650; }

/* Abschluss: blauer Kreis mit Haken */
:root[data-design="screenflow"] .done__seal { background: var(--action); box-shadow: none; }
:root[data-design="screenflow"] .done__seal::after { border-color: var(--action); }
:root[data-design="screenflow"] .done__provider {
  background: var(--bg-deep);
  border: 0;
  border-radius: var(--radius);
}
:root[data-design="screenflow"] .done__provider a { font-weight: 650; }

/* ── Abschnitte: Titel links, Inhalt rechts ──
   Das 5:7-Paar von screen-flow.de (Vorteile, FAQ). Weiß und Hellgrau im
   Wechsel, keine Linie zwischen den Abschnitten. Der Ablauf 1-2-3 fällt
   weg, die Schrittleiste im Formular zeigt dasselbe. */

:root[data-design="screenflow"] .section { padding-block: clamp(4rem, 8vw, 7rem); }
:root[data-design="screenflow"] .section--tint { border-block: 0; }
:root[data-design="screenflow"] .section > .shell:has(> .section__title) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
:root[data-design="screenflow"] .section__title {
  grid-column: 1;
  max-width: 12em;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  margin-bottom: 0;
}
/* Abschnittstitel sind Sätze und enden mit Punkt wie auf screen-flow.de.
   Der Punkt kommt von hier, damit der Text für kfzdeal24 gleich bleibt. */
:root[data-design="screenflow"] .section__title::after { content: "."; }
:root[data-design="screenflow"] .section__lead {
  display: block;
  grid-column: 1;
  grid-row: 2;
  max-width: 24rem;
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}
:root[data-design="screenflow"] :is(.checks, .beleg, .team, .faq) {
  grid-column: 2;
  grid-row: 1 / span 2;
}
:root[data-design="screenflow"] .flow { display: none; }

/* Prüfumfang als Zeilen zwischen Haarlinien: Bereich links, Inhalt rechts */
:root[data-design="screenflow"] .checks {
  grid-template-columns: 1fr;
  gap: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
}
:root[data-design="screenflow"] .checks__item,
:root[data-design="screenflow"] .checks__item:hover {
  padding: 1.1rem 0;
  background: none;
  border-top: 1px solid var(--line-strong);
}
:root[data-design="screenflow"] .checks__item--ai { grid-column: auto; }
:root[data-design="screenflow"] .checks__ico { display: none; }
:root[data-design="screenflow"] .checks__text {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.5;
}
:root[data-design="screenflow"] .checks__text strong {
  margin: 0;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

/* Bericht: die erste Seite eines echten Berichts, als ganzes A4-Blatt
   auf der Bühne wie die Produktbilder von screen-flow.de. Papier hat
   keine runden Ecken, Ring statt Schatten. */
:root[data-design="screenflow"] .beleg { display: block; margin: 0; }
:root[data-design="screenflow"] .beleg__buehne {
  padding: 32px;
  background: var(--shot-stage);
  border-radius: var(--r-lg);
}
:root[data-design="screenflow"] .beleg__blatt {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* Bildunterschriften: Caption aus DESIGN.md, unter dem Bild, nie darin */
:root[data-design="screenflow"] :is(.beleg, .team) figcaption {
  max-width: 60ch;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* Gründer: echtes Foto, groß und gerundet */
:root[data-design="screenflow"] .section--team { display: block; }
:root[data-design="screenflow"] .team { margin: 0; }
:root[data-design="screenflow"] .team img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  background: var(--line);
}
:root[data-design="screenflow"] .section__more {
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--brand-ink);
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:root[data-design="screenflow"] .section__more:hover { text-decoration-thickness: 2px; }

/* Foto neben den Fragen, links unter dem Titel */
:root[data-design="screenflow"] .section__bild {
  display: block;
  grid-column: 1;
  grid-row: 2;
  max-width: 26rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
:root[data-design="screenflow"] .section__bild img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--line);
}

/* Fragen auf Hellgrau, damit Weiß und Hellgrau weiter wechseln */
:root[data-design="screenflow"] #datenschutz { background: var(--bg-deep); }

/* Fragen: Haarlinien, Frage färbt sich beim Überfahren */
:root[data-design="screenflow"] .faq {
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
}
:root[data-design="screenflow"] .faq__item,
:root[data-design="screenflow"] .faq__item:hover {
  background: none;
  border-bottom: 1px solid var(--line-strong);
}
:root[data-design="screenflow"] .faq__item summary {
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}
:root[data-design="screenflow"] .faq__item summary:hover { color: var(--brand-ink); }
:root[data-design="screenflow"] .faq__item summary::after {
  right: 0.4rem;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}
:root[data-design="screenflow"] .faq__body { max-width: 62ch; padding: 0 0 1.5rem; font-size: 1rem; }
:root[data-design="screenflow"] .faq__body a { color: var(--brand-ink); }

/* Fuß: hellgrau mit Haarlinie oben */
:root[data-design="screenflow"] .site-footer { background: var(--bg-deep); padding-block: 2rem; }
:root[data-design="screenflow"] .site-footer__provider { font-size: 0.9375rem; }
:root[data-design="screenflow"] .site-footer__provider a { font-weight: 650; }
:root[data-design="screenflow"] .site-footer__nav { font-size: 0.9375rem; }
:root[data-design="screenflow"] .site-footer__nav a { color: var(--ink-soft); }
:root[data-design="screenflow"] .site-footer__nav a:hover { color: var(--ink); text-decoration: underline; }

/* Rechtstexte: keine Versalien-Dachzeile */
:root[data-design="screenflow"] .legal__kicker {
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

/* Paare stapeln wie auf screen-flow.de unter 900 px */
@media (max-width: 900px) {
  :root[data-design="screenflow"] .section > .shell:has(> .section__title) { display: block; }
  :root[data-design="screenflow"] .section__title { margin-bottom: clamp(1.5rem, 4vw, 2rem); }
  :root[data-design="screenflow"] .section__lead { margin: -0.5rem 0 clamp(1.5rem, 4vw, 2rem); }
  :root[data-design="screenflow"] .section__bild { max-width: none; }
  :root[data-design="screenflow"] .beleg__buehne { padding: 24px; }
  /* Auf dem Tablet sonst über tausend Pixel hoch */
  :root[data-design="screenflow"] .beleg__blatt { max-width: 34rem; margin-inline: auto; }
}

@media (max-width: 560px) {
  :root[data-design="screenflow"] .checks__text { display: block; }
  :root[data-design="screenflow"] .checks__text strong { margin-bottom: 0.2rem; }

  /* Knopf rutscht unter die Eingabe, eine Pille passt dann nicht mehr */
  :root[data-design="screenflow"] .urlfield { border-radius: var(--r-lg); padding: 8px; }
  :root[data-design="screenflow"] .urlfield__input { padding-inline: 10px; }
}

/* ── Druck ──────────────────────────────────────────────────────
   Gedruckt werden vor allem Impressum und Datenschutzerklärung.
   Schwarz auf Weiß, ohne Bedienelemente und ohne Animation. Der
   Kopfbalken bleibt farbig, weil das Logo helle Schrift trägt. */
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; }
  .site-header {
    position: static;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .site-header__actions,
  .umgesetzt,
  .skip-link,
  .panel,
  .hero__lead,
  .stage__actions,
  .fehlerseite__aktionen,
  .legal__back,
  .site-footer__nav { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; }
  .section, .section--tint { background: none !important; padding-block: 1rem; }
  .legal, .legal * { color: #000 !important; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  p, li, dd, address { orphans: 3; widows: 3; }
}