/* ============================================================
   NeuralFlow – verständliches Produkt, ruhige Flächen, präzise Typografie
   ============================================================ */

:root {
  --bg:        #F7F7F5;
  --surface:   #FFFFFF;
  --surface-2: #F0F0EC;
  --ink:       #14161C;
  --ink-2:     #3F434D;
  --ink-3:     #666B76;
  --line:      #E2E3E0;
  --line-2:    #CBCDC8;
  --accent:    #2F4BD9;
  --accent-ink:#2038B0;
  --accent-soft: #E9EDFB;
  --ok:        #1F7A4D; --ok-bg: #E4F3EA;
  --warn:      #8A5200; --warn-bg: #FBEFD9;
  --alert:     #B42318; --alert-bg: #FCE8E6;
  --fehler:    #B42318;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --nav-h: 68px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(20,22,28,0.05), 0 10px 30px rgba(20,22,28,0.06);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
}

/* ── Grundlagen ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); background: var(--bg); overflow-x: clip; }
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
strong { color: var(--ink); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-soft); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-3); }

.skip { position: absolute; top: 8px; left: 8px; z-index: 2000; padding: 0.6rem 1rem; background: var(--ink); color: #fff; font-size: 0.9rem; border-radius: 6px; transform: translateY(-200%); transition: transform var(--t-fast); }
.skip:focus { transform: none; }

/* ── Typografie ────────────────────────────────────────────── */
.eyebrow { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.9rem; }
.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.12; }
.section-sub { max-width: 420px; font-size: 0.95rem; color: var(--ink-3); line-height: 1.6; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; margin-bottom: 2.5rem; }
.section-head--stack { display: block; }
.section-head--stack .section-sub { margin-top: 1rem; }

/* ── Knöpfe, Links, Chips ──────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.35rem; font-size: 0.92rem; font-weight: 500; border-radius: 8px; border: 1px solid transparent; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: #2A2D36; border-color: #2A2D36; }
.btn--outline { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--ink); }
.btn--ghost { color: var(--ink-3); }
.btn--ghost:hover { color: var(--ink); }
.btn--lg { padding: 0.95rem 1.6rem; font-size: 1rem; }
.btn--sm { padding: 0.6rem 1rem; font-size: 0.86rem; }
.btn--full { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
.link-arrow::after { content: '→'; transition: transform var(--t-fast); }
.link-arrow:hover { border-bottom-color: var(--ink); }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--sm { font-size: 0.85rem; }

.chip { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.chip--info { background: var(--accent-soft); color: var(--accent-ink); }
.chip--ok { background: var(--ok-bg); color: var(--ok); }
.chip--warn { background: var(--warn-bg); color: var(--warn); }
.chip--alert { background: var(--alert-bg); color: var(--alert); }
.chip--neutral { background: var(--surface-2); color: var(--ink-2); }

.balken { display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: 0.5rem; }
.balken span { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); border-radius: inherit; transition: width 600ms var(--ease); }

/* ── Einblendungen (ein System) ────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js [data-reveal].revealed { opacity: 1; transform: none; }

/* ── NAVIGATION ────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(247,247,245,0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-base); }
.nav.scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 2rem; height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--accent); flex-shrink: 0; }
.logo__text { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.nav__links { display: none; margin-left: 0.5rem; }
.nav__links ul { display: flex; gap: 0.25rem; }
@media (min-width: 900px) { .nav__links { display: block; } }
.nav__link { display: block; padding: 0.45rem 0.8rem; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); border-radius: 6px; transition: color var(--t-fast), background var(--t-fast); }
.nav__link:hover, .nav__link--active { color: var(--ink); background: rgba(20,22,28,0.05); }
.nav__cta { margin-left: auto; display: none; }
@media (min-width: 900px) { .nav__cta { display: inline-flex; } }
.nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; margin-left: auto; margin-right: -10px; }
@media (min-width: 900px) { .nav__toggle { display: none; } }
.nav__toggle span { display: block; width: 22px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform var(--t-base) var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.8px) rotate(-45deg); }
.nav__mobile { display: flex; flex-direction: column; padding: 0.5rem var(--gutter) 1.25rem; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nav__mobile[hidden] { display: none; }
.nav__mobile-link { padding: 0.9rem 0; font-size: 1.05rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.nav__mobile-cta { margin-top: 1rem; }

/* ── EINSTIEG ──────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__inner { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.hero__headline { font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 1.25rem; max-width: 12ch; }
.hero__sub { font-size: 1.125rem; max-width: 520px; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-bottom: 2rem; }
.hero__punkte { display: grid; gap: 0.45rem; font-size: 0.92rem; color: var(--ink-3); }
.hero__punkte li { position: relative; padding-left: 1.25rem; }
.hero__punkte li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 1px; background: var(--accent); }

.vorgang { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem 1.4rem; }
.vorgang__kopf { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.vorgang__text { font-size: 0.98rem; color: var(--ink); line-height: 1.55; padding: 1rem 0; }
.vorgang__ergebnis { display: grid; gap: 0.6rem; padding: 0.9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vorgang__ergebnis div { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.vorgang__ergebnis dt { font-size: 0.72rem; font-family: var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.vorgang__ergebnis dd { color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.vorgang__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding-top: 0.9rem; font-size: 0.88rem; color: var(--ink-3); }

/* ── FUNKTIONSWEISE / DEMO ─────────────────────────────────── */
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.ablauf { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.demo { display: grid; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
@media (min-width: 900px) { .demo { grid-template-columns: 320px 1fr; gap: 0; } }
.demo__eingaben { padding: 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface); }
@media (min-width: 900px) { .demo__eingaben { border-bottom: 0; border-right: 1px solid var(--line); } }
.demo__label { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
.beispiele { display: grid; gap: 0.5rem; }
@media (min-width: 560px) and (max-width: 899px) { .beispiele { grid-template-columns: 1fr 1fr; } }
.beispiel { display: grid; gap: 0.2rem; text-align: left; padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color var(--t-fast), background var(--t-fast); }
.beispiel:hover { border-color: var(--line-2); background: var(--bg); }
.beispiel[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.beispiel__kanal { font-size: 0.7rem; }
.beispiel__titel { font-weight: 600; color: var(--ink); font-size: 0.95rem; line-height: 1.3; }
.beispiel__text { font-size: 0.85rem; color: var(--ink-3); line-height: 1.4; }
.demo__steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.25rem; }
.demo__hinweis { font-size: 0.8rem; color: var(--ink-3); }

.demo__ablauf { padding: 1.5rem; display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 900px) { .demo__ablauf { padding: 1.75rem 2rem; } }
.eingang { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem; }
.eingang__kopf { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.eingang__text { font-size: 0.95rem; color: var(--ink); line-height: 1.55; }

.schritte { display: grid; gap: 0; position: relative; }
.schritt { position: relative; padding: 1rem 0 1rem 2rem; border-left: 1px solid var(--line); margin-left: 0.55rem; opacity: 0.45; transition: opacity var(--t-base); }
.schritt:last-child { padding-bottom: 0.5rem; }
.schritt__marke { position: absolute; left: -0.55rem; top: 1.25rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-2); transition: background var(--t-base), border-color var(--t-base); }
.schritt.is-aktiv, .schritt.is-fertig { opacity: 1; }
.schritt.is-aktiv { border-left-color: var(--accent); }
.schritt.is-fertig { border-left-color: var(--accent); }
.schritt.is-aktiv .schritt__marke { border-color: var(--accent); background: var(--surface); }
.schritt.is-aktiv .schritt__marke::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); animation: puls 1s ease-in-out infinite; }
.schritt.is-fertig .schritt__marke { background: var(--accent); border-color: var(--accent); }
.schritt.is-fertig .schritt__marke::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); }
@keyframes puls { 0%, 100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } }
.schritt__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.schritt__kopf h3 { font-size: 1rem; }
.schritt__status { font-size: 0.72rem; }
.schritt__was { font-size: 0.86rem; color: var(--ink-3); margin-top: 0.2rem; }
.schritt [data-inhalt] { margin-top: 0.75rem; }
.schritt [data-inhalt]:empty { display: none; }

.schritt__felder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.25rem; padding: 0.85rem 1rem; background: var(--surface-2); border-radius: var(--radius); }
@media (min-width: 640px) { .schritt__felder { grid-template-columns: repeat(3, 1fr); } }
.schritt__felder div { min-width: 0; }
.schritt__felder dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.schritt__felder dd { font-size: 0.9rem; color: var(--ink); overflow-wrap: anywhere; }

.schritt__einordnung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.schritt__einordnung .konfidenz { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.85rem; color: var(--ink-2); }
.schritt__einordnung .konfidenz .balken { margin: 0; }

.schritt__quellen { display: grid; gap: 0.4rem; }
.schritt__quellen li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; font-size: 0.88rem; color: var(--ink); background: var(--surface); }
.schritt__quellen li .quelle__art { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.schritt__quellen li .quelle__rel { display: inline-flex; align-items: center; gap: 0.4rem; }
.schritt__quellen li .quelle__rel .balken { width: 60px; margin: 0; }

.schritt__entwurf .entwurf { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.9rem 1.1rem; font-size: 0.92rem; color: var(--ink); line-height: 1.6; white-space: pre-line; }
.schritt__entwurf .entwurf__quellen { margin-top: 0.5rem; font-size: 0.78rem; color: var(--ink-3); }

.ergebnis { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.ergebnis[hidden] { display: none; }
.ergebnis__zeile { display: grid; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .ergebnis__zeile { grid-template-columns: auto auto 1fr; } }
.ergebnis__label { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ergebnis__zeile strong { font-size: 0.92rem; }
.ergebnis__aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ergebnis__rueckmeldung { font-size: 0.88rem; color: var(--ok); margin-top: 0.75rem; min-height: 1.4em; }
.ergebnis__rueckmeldung:empty { display: none; }

/* ── FUNKTIONEN ────────────────────────────────────────────── */
.funktionen__grid { display: grid; gap: 1rem; }
@media (min-width: 640px)  { .funktionen__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .funktionen__grid { grid-template-columns: repeat(3, 1fr); } }
.funktion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; transition: border-color var(--t-fast); }
.funktion:hover { border-color: var(--line-2); }
.funktion__nr { display: block; margin-bottom: 1.5rem; color: var(--accent-ink); }
.funktion h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.funktion p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.6; }

/* ── AUSWERTUNG ────────────────────────────────────────────── */
.auswertung { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.auswertung__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .auswertung__grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.auswertung__text p { margin-top: 1rem; }
.auswertung__liste { display: grid; gap: 0.6rem; margin-top: 1.5rem; font-size: 0.93rem; }
.auswertung__liste li { padding-left: 1.1rem; position: relative; }
.auswertung__liste li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 0.5rem; height: 1px; background: var(--accent); }

.diagramm { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem; }
.diagramm figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1.25rem; }
.diagramm__titel { font-weight: 600; color: var(--ink); }
.balkenliste { display: grid; gap: 0.7rem; }
.balkenliste li { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.balkenliste__name { color: var(--ink); }
.balkenliste__balken { height: 12px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.balkenliste__balken span { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: inherit; transform-origin: left; }
.balkenliste__balken--offen span { background: var(--warn); }
.balkenliste__wert { text-align: right; }
.js .balkenliste__balken span { transform: scaleX(0); transition: transform 900ms var(--ease); }
.js .revealed .balkenliste__balken span { transform: scaleX(1); }
.diagramm__kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.diagramm__kennzahlen dt { font-size: 0.78rem; color: var(--ink-3); line-height: 1.3; }
.diagramm__kennzahlen dd { font-size: 1.3rem; color: var(--ink); margin-top: 0.2rem; }

/* ── PREISE ────────────────────────────────────────────────── */
.preise__umschalter { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 2.5rem; }
.preise__label { font-size: 0.92rem; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 0.5rem; }
.preise__label--aktiv { color: var(--ink); }
.umschalter { width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background var(--t-base); flex-shrink: 0; }
.umschalter[aria-checked="true"] { background: var(--ink); }
.umschalter__knopf { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--t-base) var(--ease); }
.umschalter[aria-checked="true"] .umschalter__knopf { transform: translateX(20px); }

.preise__grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px) { .preise__grid { grid-template-columns: repeat(3, 1fr); } }
.tarif { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; }
.tarif--empfohlen { border-color: var(--ink); box-shadow: var(--shadow); }
.tarif__badge { position: absolute; top: -0.75rem; left: 1.75rem; padding: 0.2rem 0.6rem; background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 500; border-radius: 999px; }
.tarif__name { font-size: 1.05rem; margin-bottom: 0.75rem; }
.tarif__preis { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.6rem; min-height: 2.6rem; }
.tarif__betrag { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; transition: opacity var(--t-fast); }
.tarif__betrag--text { font-size: 1.5rem; }
.tarif__einheit { font-size: 0.9rem; color: var(--ink-3); }
.tarif__text { font-size: 0.9rem; color: var(--ink-3); margin-bottom: 1.25rem; }
.tarif__liste { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); flex: 1; }
.tarif__liste li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; color: var(--ink-2); }
.tarif__liste li::before { content: ''; position: absolute; left: 0.2rem; top: 0.45em; width: 5px; height: 9px; border: 1.6px solid var(--accent); border-top: 0; border-left: 0; transform: rotate(45deg); }

/* ── FRAGEN ────────────────────────────────────────────────── */
.faq { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq__inner { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .faq__inner { grid-template-columns: 1fr 2fr; gap: 4rem; } }
.faq__link { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item h3 { font-size: 1rem; }
.faq-item__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; text-align: left; font-size: 1rem; font-weight: 600; color: var(--ink); transition: color var(--t-fast); }
.faq-item__trigger:hover { color: var(--accent-ink); }
.faq-item__icon { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); flex-shrink: 0; transition: transform var(--t-base) var(--ease), background var(--t-fast); }
.faq-item__icon::before, .faq-item__icon::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.faq-item__icon::before { width: 10px; height: 1.5px; }
.faq-item__icon::after { width: 1.5px; height: 10px; transition: opacity var(--t-fast); }
.faq-item__trigger[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); background: var(--surface); }
.faq-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease); }
.faq-item__body.open { grid-template-rows: 1fr; }
.faq-item__body > p { overflow: hidden; font-size: 0.95rem; color: var(--ink-2); line-height: 1.65; padding-bottom: 0; transition: padding var(--t-base) var(--ease); }
.faq-item__body.open > p { padding-bottom: 1.25rem; }

/* ── DEMO ANFORDERN ────────────────────────────────────────── */
.kontakt__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .kontakt__grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.kontakt__text p { margin-top: 1rem; }
.kontakt__ablauf { counter-reset: schritt; display: grid; gap: 0.6rem; margin-top: 1.5rem; font-size: 0.93rem; }
.kontakt__ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; }
.kontakt__ablauf li::before { content: counter(schritt); font-family: var(--mono); font-size: 0.74rem; color: var(--accent-ink); padding-top: 0.2rem; }
.kontakt__daten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.kontakt__daten div:first-child { grid-column: span 2; }
.kontakt__daten dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.25rem; }
.kontakt__daten dd { font-size: 0.93rem; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kontakt__daten { grid-template-columns: 1fr; } .kontakt__daten div:first-child { grid-column: auto; } }

.kontakt__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2rem); }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__group { margin-bottom: 1rem; }
.form__group label { display: block; font-size: 0.86rem; font-weight: 500; color: var(--ink); margin-bottom: 0.4rem; }
.form__group label span { color: var(--ink-3); font-weight: 400; }
.form__group input:not([type="checkbox"]), .form__group select, .form__group textarea { width: 100%; padding: 0.75rem 0.9rem; font-size: 1rem; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.form__group input:focus, .form__group select:focus, .form__group textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.form__group [aria-invalid="true"] { border-color: var(--fehler); }
.form__group textarea { resize: vertical; min-height: 110px; }
.form__group select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314161C' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; }
.form__group--check { display: flex; align-items: flex-start; gap: 0.7rem; }
.form__group--check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.form__group--check label { font-weight: 400; font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.form__group--check a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.form__fehler { font-size: 0.9rem; color: var(--fehler); margin-bottom: 1rem; }
.form__hinweis { font-size: 0.8rem; color: var(--ink-3); text-align: center; margin-top: 0.8rem; }
.form__ergebnis h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.form__zusammenfassung { display: grid; gap: 0.5rem; }
.form__zusammenfassung div { display: grid; grid-template-columns: 140px 1fr; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.form__zusammenfassung dt { color: var(--ink-3); }
.form__zusammenfassung dd { color: var(--ink); overflow-wrap: anywhere; }
.form__ergebnis-text { font-size: 0.9rem; color: var(--ink-3); margin: 1.25rem 0 1.25rem; }

/* ── FUSS ──────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); background: var(--bg); }
.footer__grid { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 2fr 1fr 1.2fr 1.2fr; } }
.footer__brand p { font-size: 0.9rem; color: var(--ink-3); max-width: 300px; margin-top: 1rem; line-height: 1.6; }
.footer h4 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.footer__col ul { display: grid; gap: 0.5rem; }
.footer__col a { font-size: 0.92rem; color: var(--ink-2); border-bottom: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.footer__col a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.footer address { font-size: 0.92rem; color: var(--ink-2); line-height: 1.7; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding-top: 1.25rem; padding-bottom: 1.5rem; border-top: 1px solid var(--line); }
.nfl-demo { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.nfl-demo a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.footer__top { font-size: 0.86rem; color: var(--ink-2); }

/* ── Reduzierte Bewegung ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .balkenliste__balken span { transform: none; transition: none; }
  .schritt, .schritt__marke, .balken span, .faq-item__body, .faq-item__body > p, .umschalter, .umschalter__knopf, .nav__toggle span { transition: none; }
  .schritt.is-aktiv .schritt__marke::after { animation: none; }
}