/* salecomex.com, Fassung 4 "Leitlinie". Tokens aus dem Design-Manifest v4. */

:root {
  --navy-900: #080F1A;
  --navy-800: #0B1B32;
  --navy-700: #0C2146;
  --navy-650: #0C2553;
  --line-quiet: #2A384C;
  --line-strong: #636D7D;
  --blue: #1458FF;
  --blue-dark: #0E4AE0;
  --violet: #6A4CFF;
  --blue-light: #5C8BFF;
  --white: #FFFFFF;
  --text: #E6E8EE;
  --text-muted: #A4AAB6;
  --fehler: #FF6B6B;
  --grad: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
  --grad-line: linear-gradient(180deg, var(--blue), var(--violet));
  --grad-x: linear-gradient(90deg, var(--blue), var(--violet));

  --lf-hero: 0.73;
  --lf-mitte: 0.53;
  --lf-flacker: 0.27;

  --s-1: 5px; --s-2: 10px; --s-3: 15px; --s-4: 20px; --s-5: 25px;
  --s-6: 30px; --s-8: 40px; --s-12: 60px; --s-16: 80px; --s-24: 120px;
  --sektion: var(--s-24);
  --rand: 25px;
  --inhalt-max: 1200px;
  --anker-oben: 80px;

  --r-knopf: 6px; --r-feld: 8px; --r-karte: 12px; --r-chip: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-hover: ease;

  --d-press: 140ms; --d-hover: 180ms; --d-ui: 220ms; --d-move: 260ms;
  --d-flash: 300ms; --d-reveal: 320ms; --d-draw: 600ms; --d-story: 900ms;
  --d-long: 1400ms;

  --f-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Space Mono", "Courier New", monospace;
  --fs-h1: clamp(40px, 5vw, 68px);
  --fs-h2: clamp(32px, 3.6vw, 48px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-statement: clamp(40px, 6vw, 88px);
  --fs-wort: clamp(56px, 7vw, 96px);
  --fs-intro: clamp(17px, 1.4vw, 19px);
  --fs-text: clamp(16px, 1.2vw, 17px);
  --fs-mono: 13px;
  --lh-head: 1.05;
  --lh-text: 1.6;

  --leitlinie-links: 12px;
  --kopf-hoehe: 64px;
}
@media (max-width: 767px) { :root { --sektion: 72px; } }
@media (min-width: 1024px) { :root { --rand: 40px; } }

/* ------------------------------------------------------------ Grund */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy-900);
  color: var(--text);
  font-family: var(--f-head);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::after {
  /* Korn gegen Banding, statisch */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='512' height='512' filter='url(%23k)'/></svg>");
  background-size: 512px 512px;
  contain: strict;
}
img, svg { max-width: 100%; }
a { color: var(--white); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: var(--white); }

.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 60; padding: var(--s-2) var(--s-3); background: var(--blue); color: var(--white); border-radius: var(--r-knopf); text-decoration: none; }
.skip:focus { top: var(--s-4); }
.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.inhalt { width: 100%; max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.haupt { position: relative; z-index: 1; }
.sektion { position: relative; padding: var(--sektion) 0; scroll-margin-top: var(--anker-oben); }
.sektion + .sektion { padding-top: 0; }
#anfrage { scroll-margin-top: var(--anker-oben); }

/* ------------------------------------------------------------ Typo */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.02em; color: var(--white); margin: 0; }
.h1-zeile { display: block; overflow: hidden; }
.h1-zeile > span { display: block; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; color: var(--white); margin: 0 0 var(--s-4); max-width: 22ch; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; color: var(--white); margin: 0 0 var(--s-2); }
.text { font-size: var(--fs-text); line-height: var(--lh-text); color: var(--text); max-width: 62ch; margin: 0 0 var(--s-4); }
.intro { font-size: var(--fs-intro); }
.mono { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow-linie { display: inline-block; width: 24px; height: 1px; background: var(--blue-light); transform-origin: left center; }
.eyebrow-nr { color: var(--blue-light); }
.hinweis { margin-top: var(--s-4); }
.cta-zeile { margin-top: var(--s-6); }

/* ------------------------------------------------------------ Knopf, Textlink, Chip */
.knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5);
  background: var(--blue); color: var(--white);
  font-weight: 500; font-size: 16px; line-height: 1; text-decoration: none;
  border: 0; border-radius: var(--r-knopf); cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: background-color var(--d-hover) var(--ease-hover), transform var(--d-press) var(--ease-out);
}
.knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 42%, transparent 48%, transparent 54%, rgba(255,255,255,0.16) 62%, transparent 72%);
  transform: translateX(-120%);
  transition: transform var(--d-flash) var(--ease-out);
}
.knopf:hover { background: var(--blue-dark); }
.knopf:hover::after { transform: translateX(120%); }
.knopf:active { transform: scale(0.97); }
.knopf-klein { min-height: 44px; padding: 0 var(--s-4); font-size: 15px; }
.knopf-breit { width: 100%; }
.knopf-text { position: relative; }

.textlink {
  display: inline-flex; align-items: center; gap: var(--s-2);
  position: relative; padding: var(--s-2) 0; min-height: 44px;
  color: var(--white); font-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer;
}
.textlink .pfeil { width: 16px; height: 16px; color: var(--blue-light); transition: transform var(--d-hover) var(--ease-out); }
.textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform var(--d-hover) var(--ease-out); }
.textlink:hover::after { transform: scaleX(1); }
.textlink:hover .pfeil { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-chip);
  background: transparent; color: var(--text);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-hover), border-color var(--d-hover), transform var(--d-hover) var(--ease-out), color var(--d-hover);
}
.chip .haken { width: 14px; height: 14px; color: var(--blue-light); display: none; }
.chip:hover { border-color: var(--text-muted); transform: translateY(-2px); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] {
  border: 1px solid transparent;
  background: linear-gradient(var(--navy-700), var(--navy-700)) padding-box, var(--grad) border-box;
  color: var(--white);
}
.chip[aria-pressed="true"] .haken, .chip[aria-checked="true"] .haken { display: inline-block; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-entfernen { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 -8px 0 0; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.chip-entfernen svg { width: 14px; height: 14px; }
.chip-entfernen:hover { color: var(--white); background: rgba(255,255,255,0.08); }

/* ------------------------------------------------------------ Karte */
.karte {
  position: relative;
  background: var(--navy-700);
  border: 1px solid var(--line-quiet);
  border-radius: var(--r-karte);
  padding: var(--s-6);
  transition: background-color 150ms var(--ease-hover);
}
.karte-kante { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad-x); border-radius: 2px 2px 0 0; transform-origin: left; }
.karte .text:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ Grids */
.grid-5-7, .grid-4-8, .grid-7-5 { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) {
  .grid-5-7 { grid-template-columns: 5fr 7fr; gap: var(--s-12); }
  .grid-4-8 { grid-template-columns: 4fr 8fr; gap: var(--s-12); }
  .grid-7-5 { grid-template-columns: 7fr 5fr; gap: var(--s-12); }
  .haft { position: sticky; top: 120px; align-self: start; }
}

/* ------------------------------------------------------------ Lichtfelder */
.lichtfelder { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.lichtfeld { position: absolute; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; opacity: var(--lf-hero); transition: opacity 600ms ease, transform 600ms var(--ease-out); will-change: opacity; }
.lichtfeld-a { left: 22%; top: 42%; }
.lichtfeld-b { left: 78%; top: 58%; }
.lichtfeld-drift { width: 100%; height: 100%; border-radius: 50%; }
.lichtfeld-a .lichtfeld-drift { background: radial-gradient(circle, rgba(20,88,255,0.30) 0%, rgba(20,88,255,0.12) 35%, rgba(20,88,255,0) 70%); animation: drift-a 28s ease-in-out infinite alternate; }
.lichtfeld-b .lichtfeld-drift { background: radial-gradient(circle, rgba(106,76,255,0.30) 0%, rgba(106,76,255,0.12) 35%, rgba(106,76,255,0) 70%); animation: drift-b 36s ease-in-out infinite alternate; }
body[data-zone="mitte"] .lichtfeld { opacity: var(--lf-mitte); }
body[data-zone="kontakt"] .lichtfeld-a { left: 24%; top: 62%; }
body[data-zone="kontakt"] .lichtfeld-b { left: 84%; top: 30%; }
body[data-zone="mitte"] .lichtfeld-a { top: 55%; }
.lichtfeld.flackert { opacity: calc(var(--lf-hero) + var(--lf-flacker)); transition: opacity 200ms var(--ease-out); }
body[data-zone="mitte"] .lichtfeld.flackert { opacity: calc(var(--lf-mitte) + var(--lf-flacker)); }
@keyframes drift-a { from { transform: translate(-6vw, -4vh); } to { transform: translate(6vw, 4vh); } }
@keyframes drift-b { from { transform: translate(5vw, 3vh); } to { transform: translate(-6vw, -4vh); } }
@media (max-width: 767px) {
  .lichtfeld { width: max(100vw, 600px); height: max(100vw, 600px); margin: calc(max(100vw, 600px) / -2) 0 0 calc(max(100vw, 600px) / -2); }
  .lichtfeld-b { display: none; }
  .lichtfeld-a { left: 60%; top: 30%; }
}

/* ------------------------------------------------------------ Kopfzeile */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--kopf-hoehe); transition: background-color 200ms ease; }
.kopf.fest { background: rgba(12, 33, 70, 0.9); backdrop-filter: none; }
@media (max-width: 1023px) { .kopf.fest { background: var(--navy-800); border-bottom: 1px solid var(--line-quiet); } }
.kopf-inhalt { height: 100%; max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); display: flex; align-items: center; gap: var(--s-4); }
.kopf-marke { display: inline-flex; align-items: center; height: 44px; color: var(--white); }
.wortmarke { height: 24px; width: auto; display: block; }
.kopf-nav { display: none; margin-left: auto; }
.kopf-nav ul { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.kopf-nav a { position: relative; display: inline-block; padding: 12px 0; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.kopf-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--grad-x); transform: scaleX(0); transform-origin: left; transition: transform var(--d-hover) var(--ease-out); }
.kopf-nav a.aktiv::after, .kopf-nav a:hover::after { transform: scaleX(1); }
.kopf-cta { margin-left: auto; }
.kopf-cta-lang { display: none; }
.kopf-menue { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; min-width: 44px; height: 44px; padding: 0 10px; flex: none; background: transparent; border: 0; cursor: pointer; }
.kopf-menue span { display: block; height: 2px; background: var(--white); border-radius: 1px; transition: transform var(--d-ui) var(--ease-out), opacity var(--d-ui); }
.kopf-menue[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf-menue[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf-menue[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menue { position: fixed; inset: var(--kopf-hoehe) 0 0 0; z-index: 45; background: var(--navy-900); padding: var(--s-6) var(--rand); opacity: 0; transform: translateY(8px); transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out); }
.menue.offen { opacity: 1; transform: none; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue a { display: flex; align-items: center; min-height: 56px; font-size: 22px; font-weight: 500; color: var(--white); text-decoration: none; border-bottom: 1px solid var(--line-quiet); }
.menue .menue-cta { color: var(--blue-light); }
@media (min-width: 1024px) {
  .kopf-nav { display: block; }
  .kopf-cta { margin-left: 0; }
  .kopf-cta-lang { display: inline; }
  .kopf-cta-kurz { display: none; }
  .kopf-menue, .menue { display: none; }
}

/* ------------------------------------------------------------ Hero */
.hero { position: relative; overflow: clip; padding: calc(var(--kopf-hoehe) + var(--s-6)) 0 var(--s-8); scroll-margin-top: 0; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.claim { margin: 0; letter-spacing: 0.12em; }
.hero-knopf { margin-top: var(--s-2); }
.hero-intro { font-size: var(--fs-intro); line-height: 1.55; color: var(--text); max-width: 52ch; margin: 0; }
.hero-richtung { margin: 0; letter-spacing: 0.12em; }
.hero-links { display: flex; }
.kugelbox { position: relative; width: min(70vw, 300px); aspect-ratio: 1 / 1; margin: var(--s-4) auto; }
.halo { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(106,76,255,0.32) 0%, rgba(20,88,255,0.22) 45%, rgba(20,88,255,0) 70%);
  animation: halo-atmen 4000ms ease-in-out infinite alternate; }
@keyframes halo-atmen { from { opacity: 0.82; } to { opacity: 1; } }
.kugel { position: relative; display: block; width: 100%; height: 100%; touch-action: pan-y; }
@media (min-width: 1024px) {
  .hero { min-height: min(100dvh, 900px); display: flex; align-items: center; padding-bottom: var(--s-12); }
  .hero-grid {
    grid-template-columns: 6fr 6fr;
    grid-template-areas: "claim kugel" "h1 kugel" "intro kugel" "knopf kugel" "links kugel" "richtung kugel";
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: var(--s-8); row-gap: var(--s-4);
    align-items: start;
  }
  .claim { grid-area: claim; }
  .h1 { grid-area: h1; }
  .hero-intro { grid-area: intro; }
  .hero-knopf { grid-area: knopf; margin-top: var(--s-2); }
  .hero-links { grid-area: links; }
  .hero-richtung { grid-area: richtung; align-self: end; }
  .kugelbox { grid-area: kugel; width: min(46vw, 640px); margin: 0 0 0 auto; transform: translateX(10%); align-self: center; }
  .knopf-breit { width: auto; }
}

/* ------------------------------------------------------------ Ausgangslage */
.probleme { display: flex; flex-direction: column; }
.problem { position: relative; }
.problem-linie { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-quiet); transform-origin: left; }
.problem:first-child .problem-linie { display: none; }
.problem-kopf {
  position: relative; display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 64px; padding: var(--s-3) 0; background: none; border: 0; text-align: left; cursor: pointer;
}
.problem-kopf::before { content: ""; position: absolute; left: -16px; top: 12px; bottom: 12px; width: 3px; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform var(--d-hover) var(--ease-out); }
.problem-kopf:hover::before, .problem.trifft .problem-kopf::before { transform: scaleY(1); }
.problem-nr { color: var(--white); transition: color var(--d-flash) ease; }
.problem-nr.blitz { color: var(--blue-light); }
.problem-satz { font-size: 18px; line-height: 1.4; color: var(--white); }
.problem-plus { position: relative; width: 24px; height: 24px; }
.problem-plus::before, .problem-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--blue-light); transform: translate(-50%, -50%); transition: transform 200ms var(--ease-in-out); }
.problem-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.problem-kopf[aria-expanded="true"] .problem-plus::before { transform: translate(-50%, -50%) rotate(45deg); }
.problem-kopf[aria-expanded="true"] .problem-plus::after { transform: translate(-50%, -50%) rotate(-45deg); }
.problem-erkl { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-ui) var(--ease-out); }
.problem-erkl-innen { overflow: hidden; opacity: 0; transition: opacity var(--d-ui) ease; }
.problem-erkl.offen { grid-template-rows: 1fr; }
.problem-erkl.offen .problem-erkl-innen { opacity: 1; }
.problem-erkl-innen .text { padding-left: 51px; margin-bottom: var(--s-3); }
.problem-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: 0 0 var(--s-5) 51px; }
.wende { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 500; margin: var(--s-12) 0 var(--s-4); }
.wende-hell { color: var(--text-muted); transition: color 400ms ease; }
.wende.aktiv .wende-hell { color: var(--white); }
.wende-dim { color: var(--text-muted); }
@media (min-width: 1024px) { .problem-satz { font-size: 22px; } }
@media (max-width: 1023px) { .problem-kopf::before { left: -12px; } }

/* ------------------------------------------------------------ Leistungen */
.leistungen-grid { margin-top: var(--s-8); }
.wort-haft { display: none; }
.wort-maske { position: relative; height: 1.1em; font-size: var(--fs-wort); line-height: 1.1; font-weight: 700; color: var(--white); overflow: hidden; letter-spacing: -0.02em; }
.wort { position: absolute; left: 0; top: 0; display: block; transform: translateY(100%); opacity: 0; transition: transform var(--d-move) var(--ease-out), opacity var(--d-move) ease; }
.wort.aktiv { transform: none; opacity: 1; }
.wort.weg { transform: translateY(-100%); opacity: 0; }
.wort-station { margin: var(--s-3) 0 0; position: relative; height: 1.6em; }
.wort-station span { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--d-move) ease; }
.wort-station span.aktiv { opacity: 1; }
.karten { display: flex; flex-direction: column; gap: var(--s-4); }
.chip-zeile { display: flex; justify-content: flex-end; }
.saeule { overflow: hidden; transition: background-color 150ms var(--ease-hover), opacity 200ms ease; }
.saeule:hover { background: var(--navy-650); }
.saeule.gedimmt { opacity: 0.6; }
.saeule-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.saeule-meta { margin: 0; }
.wort-mobil { font-size: 56px; line-height: 1; font-weight: 700; color: var(--white); letter-spacing: -0.02em; margin: 0 0 var(--s-3); }
.saeule-unter { color: var(--blue-light); font-weight: 500; margin: 0 0 var(--s-3); max-width: 62ch; }
.saeule .chip { margin-top: var(--s-2); }
.mini-strecke { width: 120px; height: 24px; flex: none; }
.mini-strecke .ms-linie { stroke: var(--line-strong); stroke-width: 1.5; }
.mini-strecke .ms-ring { fill: var(--navy-700); fill-opacity: 1; stroke-width: 1.5; }
.mini-market .ms-linie, .mini-market .ms-ring { stroke: var(--blue); }
.mini-sales .ms-linie, .mini-sales .ms-ring { stroke: var(--blue-light); }
.mini-growth .ms-linie, .mini-growth .ms-ring { stroke: var(--violet); }
.saeule[data-gewaehlt="true"] .ms-ring { fill: var(--blue-light); transition: fill 200ms ease; }
.saeule-market .karte-kante { background: var(--blue); }
.saeule-growth .karte-kante { background: var(--violet); }
@media (max-width: 767px) { .mini-strecke { width: 96px; } .saeule-meta { display: none; } .saeule-kopf { margin-bottom: var(--s-2); } .karte { padding: var(--s-5); } .chip-zeile { justify-content: flex-start; } }
@media (min-width: 1024px) { .wort-haft { display: block; } .wort-mobil { display: none; } }

/* ------------------------------------------------------------ Ablauf, Strecke */
.strecke-rahmen { position: relative; width: 100%; max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: var(--s-8) auto 0; padding: 0 var(--rand); }
.strecke { position: relative; }
.strecke-phasen { display: grid; grid-template-columns: 2fr 4fr 3fr; gap: var(--s-2); margin-bottom: var(--s-4); }
.strecke-phase { border-top: 1px solid var(--line-quiet); padding-top: var(--s-2); }
.strecke-phase .mono { display: block; color: var(--white); }
.strecke-gloss { display: block; font-size: 14px; color: var(--text-muted); }
.strecke-phase.phase-0 { border-color: var(--blue); }
.strecke-phase.phase-1 { border-image: var(--grad-x) 1; }
.strecke-phase.phase-2 { border-color: var(--violet); }
.strecke-linien { position: absolute; left: 0; right: 0; top: var(--linie-y, 96px); height: 2px; pointer-events: none; }
.strecke-linie { position: absolute; inset: 0; background: var(--line-quiet); transform-origin: left; }
.strecke-linie-kunde { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--text); }
.strecke-linie-scx { position: absolute; top: -1px; height: 4px; width: 0; background: var(--grad-x); border-radius: 2px; box-shadow: 0 0 8px rgba(92,139,255,0.7); }
.strecke-x { position: absolute; top: 1px; width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0; pointer-events: none; }
.strecke-x span { position: absolute; left: 50%; top: 50%; width: 64px; height: 3px; margin: -1.5px 0 0 -32px; background: var(--grad-x); border-radius: 2px; }
.strecke-x span:first-child { transform: rotate(35deg) translateX(-40px); }
.strecke-x span:last-child { transform: rotate(-35deg) translateX(40px); }
.strecke-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(92,139,255,0.5) 40%, rgba(92,139,255,0) 70%); opacity: 0; }
.strecke-x.sichtbar { opacity: 1; transition: transform 240ms var(--ease-in-out); }
.strecke-x.sichtbar span:first-child { transform: rotate(35deg); transition: transform var(--d-reveal) var(--ease-out); }
.strecke-x.sichtbar span:last-child { transform: rotate(-35deg); transition: transform var(--d-reveal) var(--ease-out); }
.strecke-x.sichtbar::after { animation: x-blitz 400ms var(--ease-out); }
.strecke-x.beispiel { animation: x-puls 2000ms ease-in-out infinite alternate; }
@keyframes x-blitz { 0% { opacity: 1; transform: scale(2.6); } 100% { opacity: 0; transform: scale(1); } }
@keyframes x-puls { from { opacity: 0.5; } to { opacity: 1; } }
.stationen { display: grid; grid-template-columns: repeat(9, 1fr); }
.station { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-6) 0 var(--s-4); background: none; border: 0; cursor: pointer; min-height: 44px; }
.station-punkt { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--navy-900); transition: border-color var(--d-hover), background-color var(--d-hover), transform var(--d-hover) var(--ease-out); }
.station:hover .station-punkt { border-color: var(--blue-light); transform: scale(1.15); }
.station[aria-checked="true"] .station-punkt { border-color: var(--white); background: var(--white); }
.station.scx .station-punkt { border-color: var(--blue-light); }
.station-nr { color: var(--text-muted); font-size: 12px; }
.station-name { font-size: 14px; line-height: 1.4; color: var(--white); text-align: center; }
.strecke-zeile { margin: var(--s-4) 0 var(--s-8); min-height: 1.6em; }
.strecke-phase-mobil { display: none; }
.uebergabe { margin-top: var(--s-4); }
.zwischenruf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line-quiet); }
.zwischenruf-satz { font-size: clamp(20px, 2vw, 24px); line-height: 1.4; font-weight: 500; color: var(--white); margin: 0; max-width: 32ch; }
@media (max-width: 767px) {
  .strecke-rahmen { padding: 0; }
  .strecke-phasen { display: none; }
  .strecke-phase-mobil { display: block; position: relative; height: 1.6em; margin: 0 var(--rand) var(--s-3); color: var(--white); }
  .strecke-phase-mobil span { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 200ms ease; }
  .strecke-phase-mobil span.aktiv { opacity: 1; }
  .strecke-bahn { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .strecke-bahn::-webkit-scrollbar { display: none; }
  .strecke { width: max-content; padding: 0 33vw; }
  .strecke-linien { left: 33vw; right: 33vw; top: var(--linie-y, 36px); }
  .strecke-linie { background: var(--line-strong); }
  .stationen { display: flex; }
  .station { width: 34vw; scroll-snap-align: center; padding: var(--s-6) 6px var(--s-4); gap: 6px; }
  .station-name { font-size: 14px; }
  .station[aria-checked="true"] .station-name { color: var(--white); }
  .station:not([aria-checked="true"]) .station-name { color: var(--text-muted); }
  .strecke-zeile { margin: var(--s-4) var(--rand) var(--s-8); }
}

/* ------------------------------------------------------------ Horizont */
.horizont { position: relative; overflow: clip; background: var(--navy-800); padding: var(--s-12) 0 0; display: flex; align-items: flex-start; isolation: isolate; }
.horizont-kappe { position: absolute; left: 50%; top: 64%; width: 320vw; height: 320vw; margin-left: -160vw; border-radius: 50%; z-index: -1; border: 3px solid transparent;
  background: radial-gradient(circle at 50% 0%, var(--navy-800) 0%, var(--navy-900) 60%) padding-box, var(--grad-x) border-box; }
.horizont-bogen { position: absolute; left: 50%; top: -1px; width: min(100vw, 1000px); height: 40vw; max-height: 400px; margin-left: min(-50vw, -500px); overflow: visible; }
.horizont-pfad { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.wasserzeichen { position: absolute; left: 50%; top: 50%; width: 800px; height: 567px; margin: -284px 0 0 -400px; z-index: -1; opacity: 0.06; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 78'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%231458FF'/><stop offset='1' stop-color='%236A4CFF'/></linearGradient></defs><path d='M0 0H24L55 28L86 0H110L67 39L110 78H86L55 50L24 78H0L43 39Z' fill='url(%23g)'/></svg>") center / contain no-repeat; }
.horizont-inhalt { position: relative; text-align: center; padding: 60px 0 150px; }
@media (min-width: 768px) { .horizont { min-height: 560px; } .horizont-inhalt { padding: 90px 0 210px; } }
.statement { font-size: var(--fs-statement); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--white); margin: 0 auto var(--s-6); max-width: 14ch; }
.statement-dim { color: var(--text-muted); }
@media (max-width: 767px) { .statement { font-size: 40px; } .horizont { padding-top: var(--s-8); } .horizont-inhalt { padding: 40px 0 110px; } .horizont-kappe { top: 72%; } .wasserzeichen { width: 420px; height: 298px; margin: -149px 0 0 -210px; } }

/* ------------------------------------------------------------ Netzwerk */
.abzweig { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-6) 0 var(--s-4); }
.abzweig-linie { display: inline-block; width: 40px; height: 1px; background: var(--blue-light); transform-origin: left; }
.netz-chips { max-width: 560px; }
.partner { align-self: start; }
.partner:hover { background: var(--navy-650); }
@media (max-width: 767px) { .netz-chips { display: grid; grid-template-columns: 1fr 1fr; } .netz-chips .chip { justify-content: center; padding: 0 var(--s-2); } }

/* ------------------------------------------------------------ Beginn */
.schritte { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: schritt; }
.schritt { position: relative; padding-top: var(--s-4); }
.schritt-verbindung { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--line-quiet); transform-origin: left; }
.schritt-nr { display: block; font-size: 32px; letter-spacing: 0; color: var(--blue-light); margin-bottom: var(--s-2); }
.schritt-erster { padding: var(--s-6); }
.schritt-erster .schritt-verbindung { display: none; }
.schritt-vor { margin: var(--s-4) 0 var(--s-2); }
#beginn-cta { transition: box-shadow var(--d-flash) var(--ease-out), background-color var(--d-hover), transform var(--d-press) var(--ease-out); }
#beginn-cta.leuchtet { box-shadow: 0 0 16px 4px rgba(20,88,255,0.55); }
.schluss-vor { margin-top: var(--s-8); margin-bottom: var(--s-3); }
.schluss { margin-top: var(--s-4); }
.voraussetzungen .chip[aria-pressed="true"] { color: var(--white); }
@media (min-width: 768px) { .schritte { grid-template-columns: repeat(4, 1fr); align-items: start; } .schritt { padding-top: var(--s-6); } .schritt-verbindung { top: 12px; left: -15px; width: calc(100% + 30px); } .schritt:first-child .schritt-verbindung { left: 0; } }

/* ------------------------------------------------------------ FAQ */
.akkordeons { display: flex; flex-direction: column; }
.akk { border-top: 1px solid var(--line-quiet); }
.akk:last-child { border-bottom: 1px solid var(--line-quiet); }
.akk-h { margin: 0; font-size: inherit; }
.akk-kopf { display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-3) 0; background: none; border: 0; text-align: left; cursor: pointer; }
.akk-nr { color: var(--blue-light); }
.akk-frage { font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--white); }
.akk-plus { position: relative; width: 24px; height: 24px; }
.akk-plus::before, .akk-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--blue-light); transform: translate(-50%, -50%); transition: transform 200ms var(--ease-in-out); }
.akk-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.akk-kopf[aria-expanded="true"] .akk-plus::before { transform: translate(-50%, -50%) rotate(45deg); }
.akk-kopf[aria-expanded="true"] .akk-plus::after { transform: translate(-50%, -50%) rotate(-45deg); }
.akk-antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-ui) var(--ease-out); }
.akk-innen { overflow: hidden; opacity: 0; transition: opacity var(--d-ui) ease; }
.akk-antwort.offen { grid-template-rows: 1fr; }
.akk-antwort.offen .akk-innen { opacity: 1; }
.akk-innen .text { padding: 0 0 var(--s-5) 51px; }
.faq .haft .knopf { margin-top: var(--s-2); }

/* ------------------------------------------------------------ Kontakt */
.kontakt { background: var(--navy-800); padding-top: var(--sektion) !important; }
.kontakt-grid { display: grid; gap: var(--s-6); }
.kontakt-text-kurz { display: none; }
.paneel-leer { margin: 0; text-transform: none; letter-spacing: 0.02em; font-size: 14px; }
.paneel { overflow: hidden; }
.paneel-titel { margin: 0 0 var(--s-3); color: var(--white); }
.paneel-leiste { display: none; }
.paneel-innen-wrap { display: flex; flex-direction: column; gap: var(--s-3); }
.paneel-zeile { display: grid; gap: var(--s-2); }
.paneel-label { display: block; }
.paneel-reset { align-self: flex-start; }
.wasserzeichen-klein { width: 400px; height: 284px; margin: -142px 0 0 -200px; opacity: 0.08; z-index: 0; }
.paneel > * { position: relative; z-index: 1; }
.paneel .wasserzeichen-klein { z-index: 0; }
.ansprech-titel, .prozess-titel { margin: 0 0 var(--s-2); }
.prozess-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.prozess-liste li { display: grid; grid-template-columns: 14px 36px 1fr; align-items: baseline; gap: var(--s-2); }
.prozess-liste .text { margin: 0; }
.prozess-knoten { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); transform: translateY(2px); }
.prozess-liste li.leuchtet .prozess-knoten { border-color: var(--blue-light); background: var(--blue-light); }

.formularkarte { padding: var(--s-5); }
.formularkarte.rand { border: 1px solid transparent; background: linear-gradient(var(--navy-700), var(--navy-700)) padding-box, var(--grad) border-box; }
.formular { position: relative; display: grid; gap: var(--s-4); }
.feld-reihe { display: grid; gap: var(--s-4); }
.feld { display: grid; gap: 6px; position: relative; }
.feld label { font-size: 14px; color: var(--text-muted); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--navy-900); color: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--r-feld);
  font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color var(--d-hover) ease;
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23A4AAB6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.feld select:invalid, .feld select option[value=""] { color: var(--text-muted); }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--blue-light); outline: 2px solid var(--blue-light); outline-offset: 2px; }
.feld::after { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 2px; background: var(--blue-light); transform: scaleY(0); transform-origin: top; transition: transform 160ms var(--ease-out); pointer-events: none; }
.feld:focus-within::after { transform: scaleY(1); }
.feld-haken::after { display: none; }
.feld.fehler input, .feld.fehler select, .feld.fehler textarea { border-color: var(--fehler); }
.feld-fehler { margin: 0; font-size: 14px; color: var(--fehler); min-height: 0; }
.feld-fehler:empty { display: none; }
.haken-label { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); align-items: start; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.haken-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.haken-box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--navy-900); color: var(--white); margin-top: 1px; }
.haken-box .haken { width: 14px; height: 14px; opacity: 0; }
.haken-label input:checked + .haken-box { background: var(--blue); border-color: var(--blue); }
.haken-label input:checked + .haken-box .haken { opacity: 1; }
.haken-label input:focus-visible + .haken-box { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.haken-text a { color: var(--white); }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp input { height: 44px; }
.knopf-senden { width: 100%; }
.senden-ring { position: absolute; inset: -3px; border-radius: calc(var(--r-knopf) + 3px); border: 2px solid var(--blue-light); opacity: 0.4; animation: ring-atmen 2000ms ease-in-out infinite alternate; pointer-events: none; }
@keyframes ring-atmen { from { opacity: 0.4; } to { opacity: 0.8; } }
.knopf-senden.sendet .senden-ring, .knopf-senden.fertig .senden-ring { animation: none; opacity: 0; }
.senden-x { display: none; position: relative; width: 18px; height: 18px; }
.senden-x span { position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--white); border-radius: 1px; }
.senden-x span:first-child { transform: rotate(45deg); }
.senden-x span:last-child { transform: rotate(-45deg); }
.knopf-senden.sendet .senden-x { display: block; animation: x-dreht 900ms linear infinite; }
@keyframes x-dreht { to { transform: rotate(360deg); } }
.formular-status { margin: 0; font-size: 15px; color: var(--text); }
.formular-status:empty { display: none; }
.formular-status.fehler { color: var(--fehler); }
.formular-status a { color: var(--white); }
.erfolg-x { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; opacity: 0; pointer-events: none; }
.erfolg-x span { position: absolute; left: 50%; top: 50%; width: 160px; height: 6px; margin: -3px 0 0 -80px; background: var(--grad-x); border-radius: 3px; }
.erfolg-x span:first-child { transform: rotate(35deg); }
.erfolg-x span:last-child { transform: rotate(-35deg); }
.erfolg-x.zeigt { animation: erfolg-x 1600ms var(--ease-out) forwards; }
@keyframes erfolg-x { 0% { opacity: 0; transform: scale(0.94); } 25% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }

@media (min-width: 640px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .kontakt-grid { grid-template-columns: 5fr 7fr; grid-template-areas: "kopf form" "paneel form" "ansprech form" "prozess form"; grid-template-rows: auto auto auto 1fr; column-gap: var(--s-12); }
  .kontakt-kopf { grid-area: kopf; }
  .paneel-platz { grid-area: paneel; }
  .formularkarte { grid-area: form; align-self: start; padding: var(--s-8); }
  .ansprech { grid-area: ansprech; }
  .prozess { grid-area: prozess; }
}
@media (max-width: 1023px) {
  .kontakt-grid { display: flex; flex-direction: column; }
  .kontakt-kopf { order: 1; }
  .paneel-platz { order: 2; }
  .formularkarte { order: 3; }
  .ansprech { order: 4; }
  .prozess { order: 5; }
  .kontakt-text-lang { display: none; }
  .kontakt-text-kurz { display: block; }
  .paneel-leer { display: none; }
  .paneel { padding: 0; }
  .paneel-titel { display: none; }
  .paneel-leiste { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 var(--s-4); background: none; border: 0; color: var(--white); text-align: left; cursor: pointer; }
  .paneel-leiste::after { content: "+"; font-size: 18px; color: var(--blue-light); }
  .paneel-leiste[aria-expanded="true"]::after { content: "\2013"; }
  .paneel-innen { display: grid; grid-template-rows: 0fr; gap: 0; transition: grid-template-rows var(--d-ui) var(--ease-out); }
  .paneel-innen > * { min-height: 0; overflow: hidden; }
  .paneel-innen.offen { grid-template-rows: 1fr; }
  .paneel-innen-wrap { display: flex; flex-direction: column; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
  .wasserzeichen-klein { display: none; }
}

/* ------------------------------------------------------------ Fuss */
.fuss { position: relative; z-index: 1; background: var(--navy-900); padding: var(--s-12) 0 var(--s-8); border-top: 1px solid var(--line-quiet); }
.fuss-grid { display: grid; gap: var(--s-6); }
.fuss-marke { color: var(--white); }
.fuss-anschrift { font-style: normal; margin: 0; }
.fuss-anschrift a { display: inline-block; padding: 10px 0; }
.fuss-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.fuss-links a { display: inline-block; padding: 10px 0; color: var(--text); text-decoration: none; }
.fuss-links a:hover { color: var(--white); text-decoration: underline; }
.fuss-zeile { margin: 0; }
@media (min-width: 768px) { .fuss-grid { grid-template-columns: 1fr 1fr; align-items: start; } .fuss-zeile { grid-column: 1 / -1; padding-top: var(--s-4); border-top: 1px solid var(--line-quiet); } }

/* ------------------------------------------------------------ Leitlinie */
.leitlinie { position: absolute; left: var(--leitlinie-links); top: var(--ll-oben, 0); height: var(--ll-hoehe, 0); width: 1px; z-index: 0; pointer-events: none; }
.leitlinie-grund { position: absolute; inset: 0; background: var(--line-quiet); }
.leitlinie-licht { position: absolute; left: -1px; top: 0; width: 3px; height: 100%; background: var(--grad-line); transform: scaleY(0); transform-origin: top; will-change: transform; }
.leitlinie-licht::before { content: ""; position: absolute; left: -22px; top: 0; width: 48px; height: 100%; background: linear-gradient(90deg, rgba(20,88,255,0) 0%, rgba(20,88,255,0.32) 50%, rgba(20,88,255,0) 100%); }
.leitlinie-kopf { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(92,139,255,0.35), 0 0 20px 8px rgba(20,88,255,0.55); will-change: transform; }
.leitlinie-impuls { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--white); box-shadow: 0 0 14px 6px rgba(92,139,255,0.7); opacity: 0; }
.leitlinie-knoten { position: absolute; inset: 0; }
.ll-knoten { position: absolute; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--navy-900); transition: border-color var(--d-flash) var(--ease-out), background-color var(--d-flash) var(--ease-out); }
.ll-knoten.an { border-color: var(--blue-light); background: var(--blue-light); }
.ll-knoten .ll-nr { position: absolute; left: 20px; top: -3px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; }
.ll-antwort { position: absolute; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 8px 2px rgba(92,139,255,0.6); transform: scale(0); animation: antwort-punkt 240ms var(--ease-out) forwards; }
@keyframes antwort-punkt { to { transform: scale(1); } }
@media (max-width: 1023px) {
  .leitlinie { display: none; }
  .leitlinie-licht { width: 1.5px; left: -0.25px; }
  .leitlinie-licht::before { left: -4px; width: 9px; background: linear-gradient(90deg, rgba(20,88,255,0), rgba(20,88,255,0.35), rgba(20,88,255,0)); }
  .leitlinie-kopf { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 0 3px rgba(92,139,255,0.3), 0 0 12px 4px rgba(20,88,255,0.45); }
  .ll-knoten { display: none; }
  .ll-antwort { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
}
@media (min-width: 1024px) {
  .leitlinie { left: max(12px, calc((100% - var(--inhalt-max)) / 2 - 40px)); }
}

/* ------------------------------------------------------------ Leiste mobil */
.leiste-mobil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--navy-800); border-top: 1px solid var(--line-quiet); transform: translateY(100%); transition: transform var(--d-ui) var(--ease-out); }
.leiste-mobil.sichtbar { transform: none; }
.leiste-mobil .knopf { flex: 1; }
.leiste-zaehler { flex: none; white-space: nowrap; }
.leiste-zaehler:empty { display: none; }
@media (min-width: 1024px) { .leiste-mobil { display: none; } }

/* ------------------------------------------------------------ Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lichtfeld-drift, .halo, .senden-ring, .strecke-x.beispiel { animation: none !important; }
  .senden-ring { opacity: 0.6; }
  .knopf::after { display: none; }
  .knopf:active { transform: none; }
  .chip:hover { transform: none; }
  .leitlinie-licht { transition: opacity 200ms ease; }
  * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ Mobil: weniger Wiederholung */
@media (max-width: 1023px) {
  .ausgangslage .cta-zeile, .leistungen .cta-zeile, .zwischenruf, .horizont-inhalt .knopf { display: none; }
  .ablauf .cta-zeile:not([data-gewaehlt="true"]) { display: none; }
  .fuss-links ul { flex-direction: column; gap: 0; }
  .hero { padding-bottom: var(--s-4); }
  .horizont-inhalt { padding-bottom: 90px; }
  .fuss { padding-bottom: calc(var(--s-8) + 60px); }
}