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

   kfzdeal24  Marke Rot #b91a1a, Handlung Orange #f5a623, beide aus dem
              Stylesheet der Kundenseite ausgelesen. Weiche Kanten, ein
              Hauch Glas (Blur, feine Lichtkanten). Das ist die Grundlage
              dieser Datei, alle Bausteine sind darauf gebaut.
   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.
   ═════════════════════════════════════════════════ */
:root {
  --brand:        #b91a1a;   /* Marke: Kopfbalken, Fortschritt, Akzente */
  --brand-deep:   #8f1414;
  --brand-ink:    #a81818;   /* Marke als Text auf hellem Grund */
  --action:       #f5a623;   /* Handlung: Schaltflächen */
  --action-hover: #ffb63f;
  --action-ink:   #2b1c00;   /* Schrift auf der Handlungsfarbe */
}
:root[data-theme="dark"] {
  --brand:        #d93636;
  --brand-deep:   #a01818;
  --brand-ink:    #ff8f8f;
  --action:       #f5a623;
  --action-hover: #ffbf50;
  --action-ink:   #2b1c00;
}

/* 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 {
  --bg:         #f6f6f7;
  --bg-deep:    #efeff1;
  --surface:    #ffffff;
  --surface-2:  #fafafb;

  /* Glasflächen: halbtransparent, mit Lichtkante oben */
  --glass:      rgba(255, 255, 255, 0.74);
  --glass-line: rgba(255, 255, 255, 0.85);
  --glass-top:  inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --blur:       saturate(180%) blur(20px);

  --ink:        #1b1b1f;
  --ink-soft:   #45454d;
  --ink-faint:  #6a6a73;

  --line:       #e4e4e8;
  --line-strong:#d0d0d6;

  --fill:        rgba(27, 27, 31, 0.045);
  --fill-strong: rgba(27, 27, 31, 0.075);
  --input-bg:    rgba(255, 255, 255, 0.9);
  --focus-ring:  rgba(185, 26, 26, 0.25);
  --field-border:#9a9aa2;

  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: 16px;
  --r-sm:   12px;
  --r-lg:   22px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(16, 16, 20, .05), 0 2px 6px rgba(16, 16, 20, .04);
  --sh-md: 0 1px 2px rgba(16, 16, 20, .05), 0 10px 26px rgba(16, 16, 20, .07);
  --sh-lg: 0 2px 6px rgba(16, 16, 20, .06), 0 26px 60px rgba(16, 16, 20, .14);

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

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

  --bg:         #0c0c0d;
  --bg-deep:    #08080a;
  --surface:    #161618;
  --surface-2:  #1c1c1f;

  --glass:      rgba(28, 28, 31, 0.62);
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-top:  inset 0 1px 0 rgba(255, 255, 255, 0.07);

  --ink:        #ededed;
  --ink-soft:   #b8b8bc;
  --ink-faint:  #9a9a9e;

  --line:       #2a2a2d;
  --line-strong:#3a3a40;

  --fill:        rgba(255, 255, 255, 0.05);
  --fill-strong: rgba(255, 255, 255, 0.08);
  --input-bg:    rgba(12, 12, 13, 0.7);
  --focus-ring:  rgba(217, 54, 54, 0.35);
  --field-border:#6a6a72;

  --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 2px 6px rgba(0, 0, 0, .5), 0 26px 60px rgba(0, 0, 0, .55);
}

/* ── 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;
}

/* getönter Grund, damit die Glasflächen etwas zu brechen haben */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  transform: translateZ(0);
  background:
    radial-gradient(56% 44% at 82% -8%, rgba(245, 166, 35, 0.16), transparent 70%),
    radial-gradient(50% 40% at 4% 0%, rgba(185, 26, 26, 0.11), transparent 72%);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(56% 44% at 82% -8%, rgba(245, 166, 35, 0.10), transparent 70%),
    radial-gradient(50% 40% at 4% 0%, rgba(217, 54, 54, 0.12), transparent 72%);
}

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 600;
  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: dunkles Glas, weil das Logo helle Schrift trägt ── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(150, 22, 22, 0.92), rgba(116, 16, 16, 0.88));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 74px;
}

/* 46 px Höhe: das Logo ist 100 px hoch, damit bleibt es auch auf
   Bildschirmen mit doppelter Pixeldichte fast nativ und der
   Zusatz unter dem Schriftzug lesbar. */
.brand__logo { height: 46px; 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 { 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; }

.site-header__claim {
  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;
}
.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: 14px;
  font-size: 0.97rem;
  font-weight: 600;
  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:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(180deg, var(--action-hover), var(--action));
  color: var(--action-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 20px -12px rgba(245, 166, 35, 0.9);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #ffc35e, var(--action-hover));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 26px -12px rgba(245, 166, 35, 0.95);
}

.btn--ghost {
  background: var(--glass);
  border-color: var(--line-strong);
  color: var(--ink);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.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 Glasfläche der Seite ──────────────────────── */

.panel {
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  text-align: left;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg), var(--glass-top);
  overflow: hidden;
}

/* warmer Schein hinter der Karte, gibt ihr Abstand vom Grund */
.panel::before {
  content: "";
  position: absolute;
  inset: -14% -6% -22%;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 40%, rgba(185, 26, 26, 0.14), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.steps {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
:root[data-theme="dark"] .steps {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}
.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;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent),
              0 4px 10px -5px rgba(185, 26, 26, 0.9);
}
.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;
  box-shadow: var(--glass-top);
}
.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-left: 3px solid var(--brand);
  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);
}
/* Nur das Design screenflow zeigt diese: Satz unter dem Titel, Bilder,
   Abschnitt zu den Gründern. 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);
}

/* Bericht */

.report {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.report__score { display: flex; align-items: baseline; gap: 0.45rem; }
.report__score strong {
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.report__score span { font-size: 0.86rem; color: var(--ink-faint); }
.report__cap {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.report__rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row__dot { width: 9px; height: 9px; border-radius: 50%; }
.row--warn .row__dot { background: var(--warn); }
.row--soon .row__dot { background: var(--soon); }
.row--ok   .row__dot { background: var(--ok); }
.row__body strong { display: block; font-size: 0.95rem; }
.row__body span { display: block; color: var(--ink-soft); font-size: 0.87rem; }
.row__tag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.24rem 0.65rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  color: var(--ink-faint);
  background: var(--fill);
}
.row--warn .row__tag { color: #fff; background: var(--warn); }
.row--soon .row__tag { color: var(--ink); background: color-mix(in srgb, var(--soon) 30%, transparent); }
.row--ok   .row__tag { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
/* im Dunkelmodus ist --warn ein helles Orange, weiße Schrift wäre dort zu schwach */
:root[data-theme="dark"] .row--warn .row__tag { color: #1c1c1e; }

/* 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); }

/* ── Einblenden beim Scrollen ─────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════
   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 pikto-ein  { from { opacity: 0; transform: scale(0.55) rotate(-10deg); } }
@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); } }

/* Piktogramme der sieben Bereiche, die Nummern im Ablauf und die
   Punkte im Musterbericht ziehen nach ihrer Karte nach. */
.checks__item.is-in .checks__ico,
.flow li.is-in .flow__num {
  animation: pikto-ein 0.45s var(--ease-pop) backwards;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.13s);
}
.report.is-in .row__dot { animation: zeichen-ein 0.4s var(--ease-pop) backwards; }
.report.is-in .row:nth-child(2) .row__dot { animation-delay: 0.08s; }
.report.is-in .row:nth-child(3) .row__dot { animation-delay: 0.16s; }
.report.is-in .row:nth-child(4) .row__dot { animation-delay: 0.24s; }

/* 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__claim { display: none; }
  .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%; }
  .row { grid-template-columns: 9px minmax(0, 1fr); }
  .row__tag { grid-column: 2; justify-self: start; }
  .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;
  }
  .reveal { opacity: 1; transform: none; }
  .checks__item.is-in .checks__ico,
  .flow li.is-in .flow__num,
  .report.is-in .row__dot,
  .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 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;

  --glass:       var(--surface);
  --glass-line:  var(--line);
  --glass-top:   0 0 #0000;
  --blur:        none;

  --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"] body::before { display: none; }
: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);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  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);
}

/* 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);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
: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);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
:root[data-design="screenflow"] .panel::before { display: none; }

:root[data-design="screenflow"] .steps,
:root[data-design="screenflow"][data-theme="dark"] .steps { background: 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, .report, .beleg, .team, .faq) {
  grid-column: 2;
  grid-row: 1 / span 2;
}
:root[data-design="screenflow"] .flow { display: none; }

/* Ruhe beim Scrollen: nichts blendet ein, alles steht sofort da */
:root[data-design="screenflow"] .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
:root[data-design="screenflow"] .report.is-in .row__dot { animation: 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: statt der nachgebauten Musteransicht 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"] .report { display: none; }
: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;
    backdrop-filter: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .site-header__actions,
  .skip-link,
  .panel,
  .hero__lead,
  .stage__actions,
  .fehlerseite__aktionen,
  .legal__back,
  .site-footer__nav { display: none !important; }
  .reveal { opacity: 1 !important; transform: 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; }
}