/* smart2index.de – Designsystem „Smart2Index · SmartPulse-Familie“, Richtung A „Pulse Index“ (25.10.2026).
   Tokens aus Redesign-SmartToIndex-20261025/briefing/DESIGN-BRIEFING.md; Kontraste dort berechnet (Text ≥ 4,5 : 1).
   Bewegung nach Davids Apple-Regel: „Bewegung reduzieren“ = Überblenden statt Bewegung, nie „aus“. */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --seite: #fafafa;
  --flaeche: #ffffff;
  --kachel: #f1f1f1;
  --linie: #e6e6e6;
  --rand: #8c8c8c;
  --h: #1a1a1a;
  --t: #333333;
  --t2: #666666;
  --nb: #14304f;
  --nb-2: #1d4068;
  --hb: #e6eef6;
  --mb: #3f6e9e;
  --or: #ff8a00;
  --ok: #1f7a4d;
  --okh: #e7f3ec;
  --warn: #8a5300;
  --warnh: #fff4db;
  --err: #b42318;
  --errh: #fdecea;
  --auf-nb: #c9d6e3;
  --schrift: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --breite: 1200px;
  --rand-x: clamp(16px, 4vw, 40px);
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--seite);
  color: var(--t);
  font: 400 17px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--nb); text-underline-offset: 3px; }
a:hover { color: var(--nb-2); }
h1, h2, h3 { color: var(--h); font-weight: 650; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--nb); outline-offset: 3px; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand-x); }
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font: 500 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2); }
.sprunglink { position: absolute; left: 12px; top: -60px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--nb); color: #fff; border-radius: 999px; }
.sprunglink:focus { top: 12px; color: #fff; }

/* ── Knöpfe ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--schrift); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.knopf svg { width: 18px; height: 18px; flex: none; transition: transform 0.2s var(--ease); }
.knopf:hover svg { transform: translateX(3px); }
.knopf--primaer { background: var(--nb); color: #fff; }
.knopf--primaer:hover { background: var(--nb-2); color: #fff; }
.knopf--sekundaer { background: var(--flaeche); color: var(--h); border-color: var(--rand); }
.knopf--sekundaer:hover { border-color: var(--h); color: var(--h); }
.knopf--hell { background: #fff; color: var(--nb); }
.knopf--hell:hover { background: var(--hb); color: var(--nb); }
.knopf--klein { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ── Logo ── */
.marke { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 44px; text-decoration: none; color: var(--h); }
.marke__zeile { display: inline-flex; align-items: center; gap: 9px; font: 650 22px/1 var(--schrift); letter-spacing: -0.03em; }
.marke__zeile svg { width: 40px; height: 20px; fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marke__zeile b { color: var(--or); font-weight: 700; }
.marke__by { margin-left: 49px; font: 500 9.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--t2); }

/* ── Kopf ── */
.kopf { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--linie); }
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .kopf { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); }
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.kopf__nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.kopf__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--t); text-decoration: none; font-weight: 500; border-radius: 999px; }
.kopf__nav a:hover { color: var(--h); background: var(--kachel); }
.kopf__rechts { display: flex; align-items: center; gap: 10px; }
/* Kunden-Login: ruhiger Textlink neben dem Hauptknopf; am Handy steht er im Menü */
.kopf__login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--t); text-decoration: none; font-weight: 500; border-radius: 999px; white-space: nowrap; }
.kopf__login:hover { color: var(--h); background: var(--kachel); }
.menue__panel .menue__login { margin-top: 4px; border-top: 1px solid var(--linie); border-radius: 0 0 10px 10px; padding-top: 4px; }
.menue { position: relative; display: none; }
.menue summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie); background: #fff; cursor: pointer; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary svg { width: 20px; height: 20px; stroke: var(--h); stroke-width: 2; stroke-linecap: round; }
.menue__panel { position: absolute; right: 0; top: 52px; min-width: 220px; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px -20px rgba(20, 48, 79, 0.35); }
.menue__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--h); text-decoration: none; font-weight: 500; }
.menue__panel a:hover { background: var(--kachel); }
@media (max-width: 900px) {
  .kopf__nav { display: none; }
  .menue { display: block; }
  .kopf__cta-lang { display: none; }
  .kopf__login { display: none; }
}
@media (min-width: 901px) { .kopf__cta-kurz { display: none; } }
/* Kurze Knopfbeschriftung immer einzeilig: „AI check“ brach auf dem Handy (375 px) sonst in zwei Zeilen um */
.kopf__cta-kurz { white-space: nowrap; }
/* ── Sprachschalter DE | EN (seit 31.10.2026, wie auf smart2results.com): im Kopf ab 901 px, darunter im Handy-Menü. Jedes
   Ziel mindestens 44 × 44 px; die aktive Sprache in Nachtblau mit orangem Strich (nicht nur über die Farbe), aria-current
   für Screenreader ── */
.sprache { display: inline-flex; align-items: center; flex: none; }
.sprache__link {
  position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 999px;
  color: var(--t2); font: 600 13.5px/1 var(--schrift); letter-spacing: 0.06em; text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.sprache__link:hover { color: var(--h); background: var(--kachel); }
.sprache__link[aria-current] { color: var(--nb); }
.sprache__link[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--or); }
.sprache__link[aria-current]:hover { background: transparent; }
.sprache__trenner { width: 1px; height: 16px; background: var(--linie); }
.menue__panel .menue__sprache { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; padding: 12px 4px 4px 14px; border-top: 1px solid var(--linie); }
.sprache--menue { padding: 3px; border: 1px solid var(--linie); border-radius: 999px; background: var(--seite); }
.menue__panel .sprache--menue .sprache__link { display: inline-grid; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--t2); font: 600 15px/1 var(--schrift); letter-spacing: 0; }
.menue__panel .sprache--menue .sprache__link:hover { color: var(--h); background: var(--kachel); }
.menue__panel .sprache--menue .sprache__link[aria-current] { color: var(--nb); background: var(--flaeche); box-shadow: 0 1px 3px rgba(20, 48, 79, 0.18); }
.sprache--menue .sprache__link[aria-current]::after { bottom: 7px; }
@media (max-width: 900px) { .kopf__rechts > .sprache { display: none; } }
@media (prefers-reduced-motion: reduce) { .sprache__link { transition: none; } }
/* Platz für den Schalter, damit die Navigation einzeilig bleibt (gemessen in WebKit und Chromium, DE und EN): 901–1023 px
   steht der Kunden-Login nur in der Fußzeile, 1024–1099 px trägt der Hauptknopf die kurze Beschriftung */
@media (min-width: 901px) and (max-width: 1023px) { .kopf__login { display: none; } }
@media (min-width: 1024px) and (max-width: 1099px) { .kopf__cta-lang { display: none; } .kopf__cta-kurz { display: inline; } }
/* Kleinste Handys (320 px): Logo, Knopf und Menü passen in die Zeile (vorher 0,6 px breiter als der Bildschirm, 29.10.2026) */
@media (max-width: 360px) { .kopf__innen { gap: 10px; } .kopf__rechts { gap: 8px; } }
/* Bis 350 px: Seit die kurze Knopfbeschriftung einzeilig bleibt (31.10.2026), war der Kopf bei 320 px 317 statt 288 px
   breit und die Seite scrollte 13 px seitlich (Seitentest „Formular 320 px“, 03.11.2026); bis 349 px ragte er in den
   rechten Rand. Etwas kleineres Logo, schmalerer Knopf, engere Abstände; Knopf und Menü bleiben 44 px hoch. Ab 351 px passt
   der Kopf ohne das und bleibt unverändert. */
@media (max-width: 350px) {
  .kopf__innen { gap: 6px; }
  .kopf__rechts { gap: 6px; }
  .marke__zeile { font-size: 20px; }
  .kopf__rechts .knopf--klein { padding: 0 10px; font-size: 14px; }
}
/* Hauptmenüpunkt „Ratgeber“ (04.11.2026): Mit fünf Punkten bliebe der Kopf zwischen 901 und 1176 px nicht einzeilig. Die
   Regeln gelten nur, wo der Punkt im Kopf steht (die englischen Seiten haben ihn nicht): 901–1199 px rückt die Navigation
   zusammen und der Hauptknopf trägt die kurze Beschriftung; 1024–1099 px bleibt der Kunden-Login im Kopf, sichtbar nur
   „Login“ (Screenreader lesen „Kunden-Login“), und die Punkte rücken noch etwas enger. Gemessen in Chromium und WebKit, auch
   mit 17-px-Scrollleiste: Kopf 73 px hoch, bei 1024 px mindestens 10 px Luft; ohne Leiste ab 937 px ohne Stauchen (901–936 px
   brach „So arbeiten wir“ schon vorher um, dort bricht jetzt nur noch dieser Punkt und nicht mehr der Knopf). */
@media (min-width: 901px) and (max-width: 1199px) {
  .kopf:has(a[href="/ratgeber/"]) .kopf__nav ul { gap: 0; }
  .kopf:has(a[href="/ratgeber/"]) .kopf__nav a { padding: 0 10px; }
  .kopf:has(a[href="/ratgeber/"]) .kopf__cta-lang { display: none; }
  .kopf:has(a[href="/ratgeber/"]) .kopf__cta-kurz { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .kopf:has(a[href="/ratgeber/"]) .kopf__nav a { padding: 0 8px; }
  .kopf:has(a[href="/ratgeber/"]) .kopf__login-vor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* Das geöffnete Menü liegt über dem Datenschutz-Hinweis (z-index 60): Mit „Ratgeber“ ist es 44 px länger, und auf kleinen
   Handys verdeckte der Hinweis beim ersten Besuch schon vorher die unteren Einträge (375 × 667 px ab „FAQ“). */
.kopf:has(a[href="/ratgeber/"]):has(details.menue[open]) { z-index: 61; }

/* ── Abschnitte ── */
.abschnitt { padding: clamp(64px, 9vw, 112px) 0; }
.abschnitt--weiss { background: var(--flaeche); }
.abschnitt--seite { background: var(--seite); }
.abschnitt__kopf { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.abschnitt__kopf--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.abschnitt__kopf h2 { font-size: clamp(32px, 4.4vw, 52px); margin-top: 14px; }
.abschnitt__kopf .lead { margin-top: 16px; font-size: clamp(17px, 1.5vw, 19px); color: var(--t); }
.abschnitt-titel { font-size: clamp(32px, 4.4vw, 52px); margin-top: 14px; }
.lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--t); }
.abschnitt-titel + .lead { margin-top: 18px; max-width: 540px; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .zwei-spalten { grid-template-columns: 1fr; } }

/* ── Hero ── */
.hero { position: relative; overflow: hidden; background: var(--seite); padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.hero__raster {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#efefef 1px, transparent 1px), linear-gradient(90deg, #efefef 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
}
.hero__innen { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.hero__inhalt { container-type: inline-size; }
/* Immer drei Zeilen; die Schrift richtet sich nach der Textspalte, damit auch „Perplexity fragen.“ in eine Zeile passt */
.hero h1 { font-size: clamp(34px, 6.2vw, 72px); font-size: min(72px, 13cqi); letter-spacing: -0.035em; line-height: 1.02; margin-top: 18px; }
.hero__zeile { display: block; white-space: nowrap; }
.hero h1 .punkt { color: var(--nb); }
/* Das alte Wort hält beim Wechsel keinen Platz mehr: Die Breite gleitet sofort zum neuen Wort und „fragen.“ rückt direkt
   mit. Rechts wird abgeschnitten, damit ein längeres altes Wort beim Ausblenden nicht in „fragen.“ hineinragt. */
.wortwechsel { position: relative; display: inline-block; vertical-align: baseline; white-space: nowrap; transition: width 0.35s var(--ease); clip-path: inset(-0.6em -0.02em -0.6em -0.3em); }
.wortwechsel__wort { position: relative; display: inline-block; white-space: nowrap; transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
/* Orange Linie unter dem wechselnden KI-Wort, zeichnet sich bei jedem Wechsel von links */
.wortwechsel__wort::after {
  content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.11em; height: 0.075em; border-radius: 0.04em;
  background: var(--or); transform-origin: left center; transition: transform 0.6s var(--ease) 0.2s;
}
.wortwechsel__wort.ist-raus { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(-0.4em); }
.wortwechsel__wort.ist-rein { opacity: 0; transform: translateY(0.4em); }
.wortwechsel__wort.ist-rein::after { transform: scaleX(0); }
.hero__unterzeile { margin-top: 22px; font-size: clamp(19px, 1.9vw, 23px); font-weight: 600; color: var(--h); letter-spacing: -0.01em; }
.hero__text { margin-top: 12px; max-width: 560px; font-size: clamp(17px, 1.5vw, 19px); }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__belege { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 26px 0 0; font-size: 15px; color: var(--t2); }
.hero__belege li { display: inline-flex; align-items: center; gap: 8px; }
.hero__belege svg { width: 18px; height: 18px; stroke: var(--nb); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .hero__innen { grid-template-columns: 1fr; }
}

/* ── Netz (Signatur von Richtung A) ── */
.buehne { position: relative; }
.netz { position: relative; aspect-ratio: 560 / 440; width: 100%; }
.netz__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.netz__linien line { stroke: #dedede; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke 0.5s var(--ease); }
.netz__linien line.an { stroke: var(--nb); }
.netz__kern {
  position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #c9d6e3;
  box-shadow: 0 0 0 12px rgba(230, 238, 246, 0.55);
}
.netz__kern svg { width: 58%; fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.netz__puls { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease), opacity 0.6s ease; }
.js .netz:not(.zeichnet) .netz__puls { stroke-dashoffset: 100; }
.netz__knoten { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 7px; transform: translate(-50%, -50%); }
.netz__knoten--1 { left: 26%; top: 13%; }
.netz__knoten--2 { left: 74%; top: 13%; }
.netz__knoten--3 { left: 9%; top: 50%; }
.netz__knoten--4 { left: 91%; top: 50%; }
.netz__knoten--5 { left: 26%; top: 87%; }
.netz__knoten--6 { left: 74%; top: 87%; }
.netz__logo {
  position: relative; display: grid; place-items: center; width: clamp(52px, 6vw, 68px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; border: 1px solid var(--linie);
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.netz__logo svg { width: 46%; height: 46%; }
.netz__knoten .netz__logo { color: var(--h); }
.netz__name { padding: 3px 5px; border-radius: 4px; background: var(--seite); font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t2); white-space: nowrap; }
.netz__haken {
  position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--nb);
  display: grid; place-items: center; opacity: 0; transform: scale(0.5);
  transition: opacity 0.35s var(--ease), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.netz__haken svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.netz__knoten.an .netz__logo { border-color: var(--nb); box-shadow: 0 0 0 6px var(--hb); }
.netz__knoten.an .netz__haken { opacity: 1; transform: none; }
.no-js .netz__knoten .netz__logo { border-color: var(--nb); }
.netz__signal { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--nb); opacity: 0; }

.antwortkarte {
  position: relative; z-index: 2; margin: 14px 0 0 auto; max-width: 440px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 24px 48px -28px rgba(20, 48, 79, 0.3);
}
.antwortkarte__kopf { display: flex; align-items: center; gap: 10px; color: var(--h); font-weight: 650; }
.antwortkarte__kopf svg { width: 26px; height: 26px; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip--ok { background: var(--okh); color: var(--ok); }
.chip--blau { background: var(--hb); color: var(--nb); }
.chip--warn { background: var(--warnh); color: var(--warn); }
.antwortkarte__text { margin-top: 12px; font-size: 16px; }
.marker { font-weight: 650; color: var(--h); background: linear-gradient(var(--hb), var(--hb)) no-repeat 0 100% / 100% 100%; border-radius: 4px; padding: 0 3px; }
.antwortkarte__quelle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; color: var(--nb); }
.antwortkarte__quelle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Sobald die Signale im Netz ankommen, wird „Ihre Firma“ markiert und die Empfehlung leuchtet auf */
.bereit .antwortkarte .marker { background-size: 0% 100%; transition: background-size 0.7s var(--ease); }
.bereit .antwortkarte.an .marker { background-size: 100% 100%; }
.bereit .antwortkarte .chip--ok { opacity: 0.35; transition: opacity 0.45s ease; }
.bereit .antwortkarte.an .chip--ok { opacity: 1; }
@media (max-width: 900px) {
  .antwortkarte { margin: 8px 0 0; max-width: none; }
}


/* ── Plattformen und Ausgangslage ── */
.logoleiste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.logoleiste li { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 84px; padding: 0 12px; font-weight: 650; color: var(--h); }
.logoleiste li + li { border-left: 1px solid var(--linie); }
.logoleiste svg { width: 28px; height: 28px; flex: none; }
.logoleiste__hinweis { margin-top: 14px; text-align: center; font-size: 15px; color: var(--t2); }
@media (max-width: 1020px) {
  .logoleiste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logoleiste li:nth-child(4) { border-left: 0; }
  .logoleiste li:nth-child(n + 4) { border-top: 1px solid var(--linie); }
}
@media (max-width: 560px) {
  .logoleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logoleiste li { flex-direction: column; gap: 8px; min-height: 104px; text-align: center; font-size: 15px; }
  .logoleiste li:nth-child(n) { border-left: 0; border-top: 0; }
  .logoleiste li:nth-child(even) { border-left: 1px solid var(--linie); }
  .logoleiste li:nth-child(n + 3) { border-top: 1px solid var(--linie); }
}
.lage { margin-top: clamp(56px, 7vw, 88px); }
.lage h2 { font-size: clamp(32px, 4.4vw, 52px); margin-top: 14px; }
.lage p.lead { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19px); max-width: 520px; }
.ki-antwort { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; }
.ki-antwort__frage { margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--kachel); color: var(--h); font-weight: 500; }
.ki-antwort ol { list-style: none; margin: 18px 0 0; padding: 0; }
.ki-antwort li { display: flex; gap: 16px; align-items: baseline; padding: 9px 0; font-weight: 650; color: var(--h); }
.ki-antwort li .mono { min-width: 14px; }
.ki-antwort__fehlt { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px dashed #d4d4d4; color: var(--t2); }
.ki-antwort__fehlt i { width: 10px; height: 10px; border-radius: 50%; background: var(--or); flex: none; }
/* Tipp-Animation: Frage tippt sich ein, die KI denkt, nennt drei Wettbewerber, „Ihre Firma“ fehlt */
.ki-antwort .ki-antwort__denkt { display: none; gap: 6px; padding: 14px 0 6px; }
.ki-antwort.denkt .ki-antwort__denkt { display: flex; }
.ki-antwort__denkt i { width: 8px; height: 8px; border-radius: 50%; background: var(--rand); animation: denken 1s ease-in-out infinite; }
.ki-antwort__denkt i:nth-child(2) { animation-delay: 0.15s; }
.ki-antwort__denkt i:nth-child(3) { animation-delay: 0.3s; }
.tipp-platz { display: inline-grid; }
.tipp-platz > * { grid-area: 1 / 1; }
.tipp-schatten { visibility: hidden; }
.tippt::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.14em; background: var(--nb); animation: blinken 1s steps(1) infinite; }
.ki-antwort.tippbereit [data-zeile] { opacity: 0; transition: opacity 0.35s ease; }
.ki-antwort.tippbereit [data-zeile].ist-an { opacity: 1; }
.ki-antwort__fehlt.ist-an i { animation: pulsieren 1.4s ease-in-out 3; }
.pulslinie { width: 100%; height: 28px; margin-top: 18px; fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Stufen ── */
.stufen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 56px 0 0; }
.stufen__linie { position: absolute; left: 0; right: 0; top: -44px; width: 100%; height: 40px; fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stufe { position: relative; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px 24px 28px; }
.stufe--ziel { background: var(--hb); border-color: #d5e1ee; }
.stufe__nr { position: absolute; top: -22px; left: 24px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--nb); font: 500 13px var(--mono); color: var(--h); }
.stufe__ikon { width: 30px; height: 30px; margin-top: 10px; stroke: var(--nb); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stufe h3 { font-size: 24px; margin-top: 16px; }
.stufe p { margin-top: 10px; }
.stufe .chip { position: absolute; top: 18px; right: 18px; background: var(--nb); color: #fff; }
@media (max-width: 860px) {
  .stufen { grid-template-columns: 1fr; gap: 36px; }
  .stufen__linie { display: none; }
}

/* ── Ergebnis-Grafik (Klicks und Impressionen je Tag, statisches SVG aus bauen.py) ── */
.erg__kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.erg__titel { font-size: clamp(32px, 4.6vw, 58px); margin-top: 14px; }
.erg__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 34px; }
.erg__zahlen b { display: block; font: 650 clamp(36px, 4.4vw, 56px)/1 var(--schrift); letter-spacing: -0.03em; color: var(--h); font-variant-numeric: tabular-nums; }
.erg__zahlen span { display: block; margin-top: 10px; font-size: 15px; color: var(--t2); }
.erg__legende { display: flex; gap: 22px; margin-top: clamp(28px, 4vw, 44px); font-size: 15px; color: var(--h); }
.erg__legende span { display: inline-flex; align-items: center; gap: 8px; }
.erg__legende span::before { content: ""; width: 22px; height: 3px; border-radius: 2px; }
.erg__leg-klicks::before { background: var(--nb); }
.erg__leg-impr::before { background: #9a9a9a; }
.erg__grafik { margin: 12px 0 0; }
.erg__grafik svg { width: 100%; height: auto; overflow: visible; }
.erg__gitter { stroke: #e3e3e3; stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.erg__achse { font: 500 13px var(--schrift); fill: var(--t2); }
.erg__start { stroke: var(--or); stroke-width: 1.5; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.erg__start-punkt { fill: var(--or); }
.erg__start-text { font: 600 14px var(--schrift); fill: var(--h); }
.erg__impr, .erg__klicks { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.erg__impr { stroke: #9a9a9a; stroke-width: 1.4; }
.erg__klicks { stroke: var(--nb); stroke-width: 2.6; }
/* Linien decken sich beim Einblenden von links nach rechts auf (clip-path statt Strichlänge: Chromium misst
   Strichmuster mit non-scaling-stroke in Bildpunkten, dort würde sich nichts sichtbar zeichnen) */
.js .erg__grafik .erg__linien { clip-path: inset(-12px 100% -12px -12px); transition: clip-path 2.4s var(--ease) 0.2s; }
.js .erg__grafik.ist-da .erg__linien { clip-path: inset(-12px -12px -12px -12px); }
.erg__hinweis { margin-top: 10px; font-size: 13px; color: var(--t2); }
@media (max-width: 760px) {
  .erg__kopf { grid-template-columns: 1fr; }
  .erg__zahlen { padding-top: 0; }
  .erg__achse { font-size: 30px; }
  .erg__start-text { font-size: 30px; }
}

/* ── Leistungen ── */
.leistungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.leistung { padding: 28px 28px 30px 0; border-bottom: 1px solid var(--linie); }
.leistung:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--linie); }
.leistung:nth-last-child(-n + 3) { border-bottom: 0; }
.leistung__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hb); }
.leistung__ikon svg { width: 22px; height: 22px; stroke: var(--nb); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.leistung h3 { font-size: 19px; letter-spacing: -0.015em; margin-top: 16px; }
.leistung p { margin-top: 8px; color: var(--t2); font-size: 16px; }
.leistung--hervor .leistung__ikon { background: var(--nb); }
.leistung--hervor .leistung__ikon svg { stroke: #fff; }
.leistung__kopf { display: flex; align-items: center; gap: 12px; }
@media (max-width: 960px) {
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistung, .leistung:not(:nth-child(3n + 1)) { padding: 24px 22px 26px 0; border-left: 0; }
  .leistung:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--linie); }
  .leistung:nth-last-child(-n + 3) { border-bottom: 1px solid var(--linie); }
  .leistung:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .leistungen { grid-template-columns: 1fr; }
  .leistung, .leistung:nth-child(even) { padding: 22px 0; border-left: 0; }
  .leistung__kopf { gap: 14px; }
  .leistung h3 { margin-top: 0; }
  .leistung { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  .leistung > p { grid-column: 2; }
  .leistung > .leistung__ikon { grid-row: span 2; }
}

/* ── Ablauf ── */
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.kennzahl { padding: 0 clamp(12px, 2vw, 24px); border-left: 1px solid var(--linie); }
.kennzahl:first-child { padding-left: 0; border-left: 0; }
.kennzahl b { display: block; font: 500 clamp(28px, 3.4vw, 44px)/1 var(--mono); color: var(--h); letter-spacing: -0.02em; white-space: nowrap; }
.kennzahl span { display: block; margin-top: 10px; font-size: 15px; color: var(--t2); }
.schritte { list-style: none; margin: 0; padding: 0; position: relative; }
.schritte::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 1px; background: var(--linie); }
.schritt { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 0 0 26px; }
.schritt:last-child { padding-bottom: 0; }
.schritt__nr { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--linie); font: 500 13px var(--mono); color: var(--h); }
.schritt--an .schritt__nr { background: var(--nb); border-color: var(--nb); color: #fff; }
.schritt h3 { font-size: 19px; margin-top: 10px; letter-spacing: -0.015em; }
.schritt p { margin-top: 4px; color: var(--t2); font-size: 16px; }

/* ── Portal-Einblick ── */
.fenster { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(20, 48, 79, 0.35); }
.fenster__leiste { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.fenster__leiste i { width: 10px; height: 10px; border-radius: 50%; background: #dcdcdc; }
.fenster__inhalt { padding: clamp(18px, 3vw, 28px); }
.fenster h3 { font-size: clamp(20px, 2.3vw, 26px); margin-top: 14px; }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.vergleich .mono { display: block; margin-bottom: 8px; font-size: 11px; }
.vergleich__vorher, .vergleich__nachher { padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.vergleich__vorher { background: var(--kachel); color: var(--t2); text-decoration: line-through; text-decoration-color: #9a9a9a; }
.vergleich__nachher { background: var(--okh); color: var(--h); }
.siegel { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--ok); font-weight: 600; font-size: 15px; }
.siegel svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fenster__aktionen { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); }
.fenster__aktionen span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; white-space: nowrap; border-radius: 999px; font-weight: 600; font-size: 15px; }
.fenster__aktionen .attrappe-sek { border: 1px solid var(--rand); color: var(--h); }
.fenster__aktionen .attrappe-prim { background: var(--nb); color: #fff; }
.haken-liste { list-style: none; margin: 24px 0 0; padding: 0; }
.haken-liste li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; color: var(--h); }
.haken-liste svg { width: 20px; height: 20px; margin-top: 3px; stroke: var(--nb); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 560px) { .vergleich { grid-template-columns: 1fr; } }

/* ── Preise ── */
.preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }
.preis { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 30px 28px 28px; }
.preis--empfohlen { border: 1.5px solid var(--nb); box-shadow: 0 30px 60px -40px rgba(20, 48, 79, 0.45); }
.preis__marke { position: absolute; top: -14px; left: 28px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--nb); color: #fff; font-size: 13px; font-weight: 650; }
.preis h3 { font-size: 22px; }
.preis__zusatz { margin-top: 6px; color: var(--t2); font-size: 15px; min-height: 46px; }
.preis__betrag { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.preis__betrag b { font-size: clamp(40px, 5vw, 52px); font-weight: 650; letter-spacing: -0.035em; color: var(--h); font-variant-numeric: tabular-nums; }
.preis__betrag span { color: var(--t2); }
.preis ul { list-style: none; margin: 18px 0 26px; padding: 0; flex: 1; }
.preis li { display: flex; gap: 12px; padding: 7px 0; color: var(--t); font-size: 16px; }
.preis li svg { width: 18px; height: 18px; margin-top: 4px; stroke: var(--nb); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.preis .knopf { width: 100%; }
.preise__vergleich { max-width: 920px; margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--t); }
.preise__vergleich b { color: var(--h); font-weight: 650; }
.preise__fuss { margin-top: 10px; text-align: center; font-size: 14px; color: var(--t2); }
/* Gründer-Kästchen: David und Stephan nebeneinander, Porträts 4:5 wie auf smart2results.com (Davids Wunsch 27.10.2026) */
.gruender { max-width: 920px; margin: 36px auto 0; padding: 20px 24px 22px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.gruender__frage { margin: 0 0 16px; color: var(--t); }
.gruender__frage b { color: var(--h); font-size: 18px; font-weight: 650; }
.gruender__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(20px, 3vw, 32px); margin: 0; padding: 0; list-style: none; }
.gruender__liste li { display: flex; align-items: center; gap: 18px; min-width: 0; }
.gruender picture { display: block; flex: none; }
.gruender img { width: 88px; height: 110px; border-radius: 16px; object-fit: cover; background: #e9e9e9; }
.gruender__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gruender__text b { color: var(--h); font-size: 17px; font-weight: 650; }
.gruender__rolle { color: var(--t2); font-size: 14px; }
/* Klickfläche gut 44 px hoch, ohne den Abstand zu verändern */
.gruender__text a { align-self: flex-start; padding: 9px 0; margin: -5px 0 -9px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 640px) { .gruender__liste { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .preise { grid-template-columns: 1fr; gap: 28px; } .preis__zusatz { min-height: 0; } }
@media (max-width: 420px) { .gruender { padding: 16px; } .gruender__liste li { gap: 14px; } .gruender img { width: 80px; height: 100px; } }

/* ── So geht es los ── */
.start-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.start-schritt { padding: 30px 28px 6px 0; }
.start-schritt + .start-schritt { padding-left: 28px; border-left: 1px solid var(--linie); }
.start-schritt__nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nb); color: #fff; font: 500 13px var(--mono); }
.start-schritt .mono { display: block; margin-top: 22px; }
.start-schritt h3 { font-size: 24px; margin-top: 10px; }
.start-schritt p { margin-top: 10px; color: var(--t2); }
@media (max-width: 860px) {
  .start-schritte { grid-template-columns: 1fr; }
  .start-schritt, .start-schritt + .start-schritt { padding: 26px 0; border-left: 0; }
  .start-schritt + .start-schritt { border-top: 1px solid var(--linie); }
}

/* ── KI-Check ── */
.check { position: relative; overflow: hidden; background: var(--nb); color: var(--auf-nb); }
.check__netz { position: absolute; right: -4%; top: -6%; width: 46%; max-width: 560px; opacity: 0.55; pointer-events: none; }
.check__netz line { stroke: #2a4a6e; stroke-width: 1; }
.check__netz circle { fill: #3f6e9e; }
.check .mono { color: var(--auf-nb); }
.check h2 { color: #fff; }
.check .pulslinie { position: absolute; left: 0; right: 0; bottom: 40px; width: 100%; height: 30px; stroke-width: 1.4; margin: 0; }
/* So funktioniert der KI-Check: drei Schritte leuchten nacheinander auf */
.check-ablauf { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 960px; margin: 0 auto 22px; padding: 0; list-style: none; }
.check-schritt { padding: 18px 18px 20px; border: 1px solid rgba(201, 214, 227, 0.22); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); transition: background-color 0.5s ease, border-color 0.5s ease; }
.check-schritt__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(201, 214, 227, 0.4); color: var(--auf-nb); transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; }
.check-schritt__ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.check-schritt .mono { display: block; margin-top: 14px; }
.check-schritt h3 { margin-top: 6px; font-size: 19px; letter-spacing: -0.015em; color: #fff; }
.check-schritt p { margin-top: 6px; font-size: 15px; color: var(--auf-nb); }
.check-schritt.an { background: rgba(255, 255, 255, 0.08); border-color: rgba(201, 214, 227, 0.5); }
.check-schritt.an .check-schritt__ikon { background: #fff; border-color: #fff; color: var(--nb); }
.check-schritt__logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.check-schritt__logos i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; opacity: 0.2; transition: opacity 0.4s ease; }
.check-schritt__logos svg { width: 16px; height: 16px; color: var(--h); }
.check-schritt.an .check-schritt__logos i, .no-js .check-schritt__logos i { opacity: 1; }
.check-schritt.an .check-schritt__logos i:nth-child(2) { transition-delay: 0.12s; }
.check-schritt.an .check-schritt__logos i:nth-child(3) { transition-delay: 0.24s; }
.check-schritt.an .check-schritt__logos i:nth-child(4) { transition-delay: 0.36s; }
.check-schritt.an .check-schritt__logos i:nth-child(5) { transition-delay: 0.48s; }
@media (max-width: 760px) {
  .check-ablauf { grid-template-columns: 1fr; gap: 10px; }
  .check-schritt { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 16px; }
  .check-schritt__ikon { grid-row: span 4; }
  .check-schritt > :not(.check-schritt__ikon) { grid-column: 2; }
  .check-schritt .mono { margin-top: 2px; }
}
.formkarte { position: relative; max-width: 960px; margin: 0 auto; background: #fff; color: var(--t); border-radius: 22px; padding: clamp(22px, 4vw, 40px); }
.satz { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.9; color: var(--h); font-weight: 500; }
.satz label { display: inline; }
.satz input { margin: 4px 0; }
.luecke { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld__label { font-size: 15px; font-weight: 600; color: var(--h); }
.eingabe {
  min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--rand); background: #fff;
  font: 400 17px/1.3 var(--schrift); color: var(--h); width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.eingabe::placeholder { color: #737373; } /* 4,7 : 1 auf Weiß: die Platzhalter erklären die Lücken im Satz */
.eingabe:focus { outline: 2px solid var(--nb); outline-offset: 2px; border-color: var(--nb); }
.eingabe[aria-invalid="true"], .eingabe[aria-invalid="true"]:focus { border-color: var(--err); outline-color: var(--err); }
.satz .eingabe { display: inline-block; width: auto; vertical-align: middle; font-size: clamp(16px, 1.6vw, 18px); }
/* feste Breiten statt Prozent: in der inline-flex-Lücke wären Prozente zirkulär und das Komma rutscht in „muss“ */
.satz .eingabe--frage { width: 23.5em; }
.satz .eingabe--domain { width: 11em; }
.form__unten { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; margin-top: 26px; }
.form__hinweis { margin-top: 14px; font-size: 14px; color: var(--t2); }
.feld__fehler { margin-top: 6px; color: var(--err); font-size: 15px; font-weight: 500; }
.form__status { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.form__status--ok { background: var(--okh); color: var(--ok); }
.form__status--fehler { background: var(--errh); color: var(--err); }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .form__unten { grid-template-columns: 1fr; }
  .satz { line-height: 1.6; }
  .luecke { display: flex; width: 100%; white-space: normal; }
  .satz .eingabe { width: 100%; min-width: 0; }
}

/* ── FAQ ── */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq__liste { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 650; color: var(--h); font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 16px; height: 16px; flex: none; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--h); transition: transform 0.25s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details p { padding: 0 40px 22px 0; color: var(--t); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ── Fuß ── */
.fuss { background: #fff; border-top: 1px solid var(--linie); padding: 48px 0 36px; }
.fuss__oben { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.fuss__claim { margin-top: 14px; color: var(--t2); font-size: 15px; }
.fuss nav ul { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.fuss nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--t); text-decoration: none; }
.fuss nav a:hover { color: var(--h); text-decoration: underline; }
.fuss__knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; background: none; font: inherit; color: var(--t); cursor: pointer; }
.fuss__knopf:hover { color: var(--h); text-decoration: underline; }
.no-js .fuss__knopf { display: none; }

/* ── Datenschutz-Einstellungen (Einwilligung) ── */
.einwilligung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0 var(--rand-x) max(16px, env(safe-area-inset-bottom)); pointer-events: none; }
.einwilligung[hidden] { display: none; }
/* Nie höher als der Bildschirm (aufgeklappt auf kleinen Handys): die Karte scrollt in sich, alle Knöpfe bleiben erreichbar */
.einwilligung__karte { max-width: 760px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 24px - max(16px, env(safe-area-inset-bottom))); overflow-y: auto; overscroll-behavior: contain; margin: 0 auto; padding: 20px 22px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 24px 60px -24px rgba(20, 48, 79, 0.45); pointer-events: auto; }
.einwilligung.ist-da .einwilligung__karte { animation: einblenden-hoch 0.5s var(--ease) both; }
.einwilligung__titel { font-size: 19px; letter-spacing: -0.015em; }
.einwilligung__titel:focus { outline: none; }
.einwilligung__karte > p { margin-top: 8px; font-size: 15px; }
.einwilligung__optionen { display: grid; gap: 10px; margin-top: 14px; }
.einwilligung__optionen[hidden] { display: none; }
.einwilligung__option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; font-size: 14px; color: var(--t2); cursor: pointer; }
.einwilligung__option input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--nb); }
.einwilligung__option b { display: block; color: var(--h); font-size: 15px; }
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.einwilligung__knoepfe .knopf { flex: 1 1 auto; }
.fuss__unten { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linie); font: 500 12px/1.6 var(--mono); letter-spacing: 0.06em; color: var(--t2); }

/* ── Rechtstexte ── */
.recht { padding: clamp(48px, 7vw, 88px) 0; background: #fff; }
.recht__innen { max-width: 760px; }
.recht h1 { font-size: clamp(34px, 4.5vw, 48px); margin-top: 12px; overflow-wrap: break-word; }
.recht h2 { font-size: 22px; margin-top: 36px; }
.recht h3 { font-size: 18px; line-height: 1.3; margin-top: 26px; }
.recht p, .recht li { margin-top: 12px; }
.recht ul { padding-left: 20px; }
.recht a { overflow-wrap: anywhere; }
.recht .recht__aktion { margin-top: 28px; }
/* Englische Rechtstexte: Hinweis, dass nur die deutsche Fassung verbindlich ist */
.recht .recht__hinweis { margin-top: 20px; padding: 14px 18px; border: 1px solid var(--auf-nb); border-radius: 12px; background: var(--hb); color: var(--h); font-size: 16px; line-height: 1.55; }

/* ── Einblenden beim Scrollen (Apple-Regel: bei „Bewegung reduzieren“ nur Deckkraft) ── */
.js [data-zeigen] { opacity: 0; transform: translateY(20px); transition: opacity 0.85s var(--ease), transform 0.95s var(--ease); }
.js [data-zeigen].ist-da { opacity: 1; transform: none; }
.js [data-zeigen="2"] { transition-delay: 0.08s; }
.js [data-zeigen="3"] { transition-delay: 0.16s; }
/* ── Handy: Schrift überall einen Pixel größer (Davids Wunsch 25.10.2026); die Überschrift im Hero richtet sich nach der Spalte ── */
@media (max-width: 600px) {
  body { font-size: 18px; }
  .mono { font-size: 13px; }
  .knopf { font-size: 17px; }
  .knopf--klein { font-size: 16px; }
  .marke__zeile { font-size: 23px; }
  .marke__by { font-size: 10.5px; }
  .abschnitt__kopf h2, .abschnitt-titel, .lage h2 { font-size: 33px; }
  .abschnitt__kopf .lead, .lead, .lage p.lead, .hero__text { font-size: 18px; }
  .hero__unterzeile { font-size: 20px; }
  .hero__belege { font-size: 16px; }
  .netz__name { font-size: 11.5px; }
  .chip { font-size: 14px; }
  .antwortkarte__text { font-size: 17px; }
  .antwortkarte__quelle, .logoleiste li, .logoleiste__hinweis { font-size: 16px; }
  .stufe h3, .start-schritt h3 { font-size: 25px; }
  .leistung h3, .schritt h3, .check-schritt h3 { font-size: 20px; }
  .leistung p, .schritt p, .preis li { font-size: 17px; }
  .kennzahl span, .check-schritt p, .preis__zusatz, .preise__vergleich { font-size: 16px; }
  .vergleich .mono { font-size: 12px; }
  .vergleich__vorher, .vergleich__nachher, .siegel, .fenster__aktionen span { font-size: 16px; }
  .preis h3 { font-size: 23px; }
  .preise__fuss, .gruender__rolle, .form__hinweis, .einwilligung__option { font-size: 15px; }
  .gruender__frage b { font-size: 19px; }
  .gruender__text b { font-size: 18px; }
  .satz { font-size: 20px; }
  .eingabe { font-size: 18px; }
  .satz .eingabe { font-size: 17px; }
  .feld__label, .feld__fehler, .fuss__claim, .einwilligung__karte > p, .einwilligung__option b { font-size: 16px; }
  .faq summary { font-size: 19px; }
  .fuss__unten { font-size: 13px; }
  .einwilligung__titel { font-size: 20px; }
  .recht h2 { font-size: 23px; }
}

@keyframes denken { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes blinken { 50% { opacity: 0; } }
@keyframes pulsieren { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(255, 138, 0, 0); } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes einblenden-hoch { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-zeigen] { transform: none; transition: opacity 0.8s ease; }
  .wortwechsel__wort.ist-raus, .wortwechsel__wort.ist-rein { transform: none; }
  .wortwechsel__wort.ist-rein::after { transform: none; }
  .wortwechsel { transition: none; }
  .bereit .antwortkarte .marker { background-size: 100% 100%; transition: none; }
  .ki-antwort__fehlt.ist-an i { animation: denken 1.2s ease-in-out 3; }
  .einwilligung.ist-da .einwilligung__karte { animation-name: einblenden; }
  .js .erg__grafik .erg__linien { clip-path: none; opacity: 0; transition: opacity 1.2s ease 0.2s; }
  .js .erg__grafik.ist-da .erg__linien { opacity: 1; }
  .netz__haken { transform: none; }
  .js .netz:not(.zeichnet) .netz__puls { stroke-dashoffset: 0; opacity: 0; }
  .netz__puls { transition: opacity 0.8s ease; }
  .knopf:hover svg { transform: none; }
}
.notfall [data-zeigen] { opacity: 1 !important; transform: none !important; transition: none !important; }