/* ════════════════════════════════════════════════════════════════
   Digi-Check · Whitelabel-Frontend
   Beispielmandant kfzdeal24: Marke Rot #b91a1a, Handlung Orange #f5a623,
   beide aus dem Stylesheet der Kundenseite ausgelesen.
   Ton: modern, weiche Kanten, ein Hauch Glas (Blur, feine Lichtkanten).
   ════════════════════════════════════════════════════════════════ */

/* ═══════════ WHITELABEL: hier anpassen ═══════════
   Diese vier Farben, 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;
}

: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; }

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

.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); }

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

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

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