/* ═══════════════════════════════════════════════════════════════════════════
   Schrift — Instrument Sans, selbst ausgeliefert
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ Die Datei liegt BEI UNS. Ein Einbinden von fremden Servern schickt die IP
   jedes Besuchers zu einem Dritten — ohne Einwilligung nicht zulässig, und
   außerdem eine Ladeverzögerung, die niemand braucht.
*/
@font-face{
  font-family:'Instrument'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('lib/schrift/instrument-latin.woff2') format('woff2');
  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:'Instrument'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('lib/schrift/instrument-latin-ext.woff2') format('woff2');
  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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gestaltung — Aurora auf Papier
   ═══════════════════════════════════════════════════════════════════════════
   WARUM DIESE RICHTUNG

   Der Maßstab sind die besten Verbrauchermarken (Lovable, Linear, Stripe):
   warmes Fastweiß, sehr fette, sehr enge Tinten-Typografie — und als
   Unterschrift ein AURORA-LICHTFELD aus den DREI MARKENFARBEN (MARKE.json):
   Cyan, Violett und Bernstein als weiche, langsam treibende Lichtflecken.
   Das Licht rahmt die Seite (Kopf und Schluss), die Mitte bleibt ruhig.

   Die eine Handlung der Seite sitzt IM Kopf: eine große weiße Startkarte
   („Was machen Sie?") mit Branchen-Chips — die Branche eintippen und drei
   Minuten später steht das Büro. Kein Zieren, kein Prospekt.

   Regeln:
   · Aurora-Farben sind LICHT, nie Text- oder Flächenfarbe. UI-Akzent bleibt
     das eine Violett (#6D4AFF) — identisch mit Strecke und Produkt.
   · KEIN Rosé/Pink — das ist die Signatur anderer Marken (Lovable). Unsere
     Handschrift ist Cyan → Violett → Bernstein, sonst nichts.
   · Radien: Karten 24–32, Knöpfe und Chips voll rund (999px).
   · Bewegung: treibendes Licht (20–40s), ein Auftritt beim Laden, sanfte
     Scroll-Enthüllungen — sonst Ruhe.
*/

:root{
  /* Grund — warm, kein kaltes #FFF als Seitenfarbe */
  --grund:     #FBFAF7;
  --flaeche:   #FFFFFF;
  --flaeche-2: #F4F3EF;
  --linie:     rgba(15,15,22,.08);
  --linie-2:   rgba(15,15,22,.05);
  --kante:     rgba(15,15,22,.08);   /* Altname — index.html nutzt ihn inline */

  /* Schrift — alle drei Stufen bestehen WCAG AA (≥ 4,5:1 auf --grund). */
  --ink:   #0D0D13;
  --ink-2: #4E4E5A;
  --ink-3: #6C6C78;

  /* Licht — die Aurora-Palette. Violett ist der EINZIGE UI-Akzent. */
  --violett:  #6D4AFF;
  --violett-tief:#5636E0;
  --cyan:     #0EA5E9;
  --cyan-hell:#45D9FF;
  --bernstein:#FF8A3D;
  --gruen:  #0E9F6E;
  --licht: linear-gradient(115deg, var(--violett), var(--cyan));
  --marke-verlauf: linear-gradient(135deg, #45D9FF 0%, #6D4AFF 48%, #FF8A3D 100%);

  --schrift-text:'Instrument',ui-sans-serif,-apple-system,'Segoe UI',system-ui,sans-serif;
  --r:   18px;
  --r-l: 24px;
  --r-weich: 28px;
  --schatten-1:0 1px 2px rgba(15,15,22,.05);
  --schatten-2:0 1px 2px rgba(15,15,22,.04), 0 28px 70px -30px rgba(15,15,22,.18);
  --e: cubic-bezier(.16,1,.3,1);

  /* Körnung gegen Verlaufsstreifen — liegt NUR über Aurora-Flächen. */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{
  /* KEIN scroll-behavior:smooth — fluss.js rollt selbst. Beides zusammen
     animiert Ankersprünge doppelt. */
  background:var(--grund);
}
body{
  margin:0; background:var(--grund); color:var(--ink);
  font:400 16.5px/1.6 'Instrument',ui-sans-serif,-apple-system,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
p{max-width:58ch; color:var(--ink-2)}
a{color:inherit}

h1,h2,h3{
  margin:0; font-weight:700; letter-spacing:-.048em; line-height:1.0;
  color:var(--ink); text-wrap:balance; font-feature-settings:'ss01' 1;
}
h1{font-size:clamp(3.1rem, 8vw, 6.9rem)}
h2{font-size:clamp(2.1rem, 4.6vw, 3.7rem); line-height:1.03}
h3{font-size:1.12rem; letter-spacing:-.015em; line-height:1.3; font-weight:600}

.mitte{max-width:1240px; margin:0 auto; padding:0 28px}
.eng{max-width:820px; margin:0 auto; padding:0 28px}

.braue{
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 20px;
}

/* Abstände unter H2s: zwei Stufen, keine Gefühlswerte im Markup. */
.h2-eng{margin-bottom:12px}
.h2-weit{margin-bottom:40px}
.vorlauf{margin:0 0 36px}
.fein{font-size:13px; color:var(--ink-3)}
.preise + .fein{margin-top:18px}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
/* Volle Rundung, EIN Handlungs-Verlauf: Blau → Violett → Orange (Entscheid
   30.08. — statt flachem Lila) mit Innenlicht-Kante und leichtem Textschatten
   für die Lesbarkeit auf den hellen Verlaufsenden. */
.knopf{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:999px; border:0; cursor:pointer;
  font:inherit; font-size:15.5px; font-weight:600; line-height:1.25;
  letter-spacing:-.01em; text-decoration:none;
  color:#fff; text-shadow:0 1px 2px rgba(20,16,50,.28);
  background:linear-gradient(105deg, #2E7FF2 0%, #6D4AFF 46%, #9A54E8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
    0 1px 2px hsl(255 60% 30% / .28), 0 2px 10px rgba(109,74,255,.28),
    0 4px 16px -6px rgba(242,107,29,.35);
  transition:transform .18s var(--e), box-shadow .18s var(--e),
    background .18s var(--e), filter .18s var(--e);
}
.knopf:hover{transform:translateY(-1px); filter:brightness(1.07) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
    0 2px 4px hsl(255 60% 30% / .24), 0 8px 22px rgba(109,74,255,.32),
    0 10px 26px -8px rgba(242,107,29,.4)}
.knopf:active{transform:none; filter:brightness(.94)}
.knopf.leer{
  text-shadow:none;
  background:rgba(255,255,255,.8); color:var(--ink);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--linie), var(--schatten-1);
}
.knopf.leer:hover{background:#fff; color:var(--ink); transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(15,15,22,.14), var(--schatten-2)}
:focus-visible{outline:2px solid var(--violett); outline-offset:3px}

/* ── Markenzeichen: das M aus zwei Torbögen ─────────────────────────────────
   Zwei Türen unter einem Dach — der Betrieb und sein Büro. Getragen wird es
   vom Aurora-Verlauf: die EINZIGE Stelle, an der alle vier Lichtfarben als
   Fläche vorkommen. */
.marke-wort{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:650; letter-spacing:-.04em; font-size:19px;
  text-decoration:none; color:var(--ink);
}
.marke-zeichen{flex:none; width:27px; height:27px; border-radius:8.5px; display:block;
  box-shadow:0 1px 2px rgba(109,74,255,.25), 0 3px 10px rgba(255,138,61,.16)}
/* Seiten ohne eingebettetes SVG (Rechtsseiten, 404) bekommen das Zeichen
   aus dem Stylesheet — sonst stünde die Wortmarke dort nackt. */
.marke-wort:not(:has(.marke-zeichen))::before{
  content:''; flex:none; width:27px; height:27px; border-radius:8.5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2345D9FF'/%3E%3Cstop offset='.5' stop-color='%236D4AFF'/%3E%3Cstop offset='1' stop-color='%23FF8A3D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Cpath d='M6 22V12.2l4 5.4 4-5.4V22M19 11v11M26 11v11M19 16.5h7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 1px 2px rgba(109,74,255,.25), 0 3px 10px rgba(255,138,61,.16)}

/* ── Kopfleiste — schwebend, beim Rollen als Glas ───────────────────────── */
.leiste{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:rgba(251,250,247,0); border-bottom:1px solid rgba(15,15,22,0);
  transition:background .4s var(--e), border-color .4s var(--e),
    backdrop-filter .4s var(--e);
}
.leiste.fest{
  background:rgba(251,250,247,.85);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border-bottom-color:var(--linie-2);
}
.leiste .innen{display:flex; align-items:center; gap:26px; height:74px}
.leiste nav{display:flex; gap:24px; margin-left:auto; align-items:center}
.leiste nav a{color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500;
  transition:color .2s}
.leiste nav a:hover{color:var(--ink)}
.knopf.klein{padding:10px 18px; font-size:13.5px; gap:7px}
.leiste nav a.knopf{color:#fff}
/* ⚠️ Der leere Knopf hat WEISSEN Grund — mit weisser Schrift ist er
   unsichtbar. Die Regel darüber (0,2,2) schlägt `.knopf.leer` (0,2,0),
   deshalb hier ausdrücklich dagegenhalten. Genau das war der „Anmelden"-
   Knopf, der am 01.09.2026 als leere Pille in der Kopfleiste stand. */
.leiste nav a.knopf.leer{color:var(--ink)}
@media (max-width:560px){.leiste nav .knopf.klein{display:none}}

/* ── Aurora: das Lichtfeld ──────────────────────────────────────────────────
   Vier Lichtflecken, stark weichgezeichnet, treiben in 20–40s-Bahnen.
   Reines CSS auf dem Kompositor — keine Bibliothek, kein WebGL, kein Byte
   von Dritten. Fällt Bewegung aus (reduced motion), steht das Licht still
   und die Seite verliert nichts. */
.aurora{position:absolute; inset:-14% -10%; z-index:0; pointer-events:none;
  filter:blur(clamp(46px,6vw,84px)) saturate(1.2)}
.aurora i{position:absolute; border-radius:50%; will-change:transform}
.aurora .a1{left:2%;  top:16%; width:52%; height:56%;
  background:radial-gradient(closest-side, rgba(109,74,255,.5), transparent 70%);
  animation:treiben1 27s ease-in-out infinite alternate}
.aurora .a2{right:-4%; top:6%;  width:48%; height:52%;
  background:radial-gradient(closest-side, rgba(69,217,255,.44), transparent 70%);
  animation:treiben2 33s ease-in-out infinite alternate}
.aurora .a3{left:24%; bottom:-14%; width:54%; height:58%;
  background:radial-gradient(closest-side, rgba(255,138,61,.4), transparent 70%);
  animation:treiben3 39s ease-in-out infinite alternate}
.aurora .a4{right:2%; bottom:-8%; width:42%; height:46%;
  background:radial-gradient(closest-side, rgba(86,54,224,.3), transparent 70%);
  animation:treiben4 30s ease-in-out infinite alternate}
@keyframes treiben1{from{transform:translate3d(-4%,2%,0) scale(1)}    to{transform:translate3d(9%,-7%,0) scale(1.18)}}
@keyframes treiben2{from{transform:translate3d(3%,-3%,0) scale(1.1)}  to{transform:translate3d(-9%,9%,0) scale(.94)}}
@keyframes treiben3{from{transform:translate3d(5%,3%,0) scale(.96)}   to{transform:translate3d(-8%,-8%,0) scale(1.16)}}
@keyframes treiben4{from{transform:translate3d(-5%,-4%,0) scale(1.12)}to{transform:translate3d(7%,6%,0) scale(.92)}}
.korn{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--korn); background-size:180px; opacity:.05}

/* ── Kopfbereich ────────────────────────────────────────────────────────── */
.kopf{position:relative; min-height:96svh; display:grid; align-items:center;
  overflow:hidden; text-align:center}
/* Ein Schleier oben hält Leiste und Braue auf ruhigem Grund; nach unten darf
   das Licht voll stehen. */
.kopf::after{
  content:''; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(251,250,247,.9) 0%, rgba(251,250,247,.4) 26%, rgba(251,250,247,0) 52%);
}
.kopf .innen{position:relative; z-index:2; padding-block:160px 96px;
  will-change:transform,opacity; display:grid; justify-items:center}
.kopf h1{max-width:14ch}
.kopf .unter{
  font-size:clamp(1.08rem,1.7vw,1.3rem); color:var(--ink-2);
  margin:26px auto 40px; max-width:46ch;
}
.kopf .fein{font-size:13px; color:var(--ink-2); margin-top:22px}

/* Die Startkarte — die eine Handlung der Seite. Eine große weiße Karte auf
   dem Licht, wie ein Werkzeug, nicht wie ein Formular. */
.start-karte{width:100%; max-width:680px; border-radius:26px; background:var(--flaeche);
  box-shadow:0 0 0 1px var(--linie),
    0 2px 6px hsl(255 30% 20% / .06),
    0 24px 60px -18px hsl(255 40% 30% / .25),
    0 60px 120px -40px rgba(255,138,61,.22);
  padding:10px; text-align:left;
  transition:box-shadow .3s var(--e)}
.start-karte:focus-within{
  box-shadow:0 0 0 2px var(--violett),
    0 2px 6px hsl(255 30% 20% / .06),
    0 24px 60px -18px hsl(255 40% 30% / .28),
    0 60px 120px -40px rgba(255,138,61,.26)}
.start-zeile{display:flex; align-items:center; gap:10px; padding-left:16px}
.start-zeile > svg{flex:none; width:19px; height:19px; stroke:var(--ink-3); fill:none;
  stroke-width:2; stroke-linecap:round}
.start-zeile input{
  flex:1; min-width:0; border:0; outline:none; background:none;
  font:inherit; font-size:16.5px; color:var(--ink); padding:16px 0;
}
.start-zeile input::placeholder{color:var(--ink-3)}
.start-los{flex:none}
.start-los svg{width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
/* Chips in der Karte: die häufigsten Branchen als Abkürzung. Beim Tippen
   werden daraus live die Treffer. */
.start-chips{display:flex; flex-wrap:wrap; gap:7px; padding:12px 8px 6px;
  border-top:1px solid var(--linie-2); margin-top:8px}
.start-chip{
  display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:500; letter-spacing:-.01em;
  padding:8px 14px; border-radius:999px; text-decoration:none;
  background:var(--flaeche-2); color:var(--ink-2);
  transition:transform .2s var(--e), background .2s, color .2s, box-shadow .2s;
}
.start-chip svg{width:13px; height:13px; flex:none; color:var(--ink-3);
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.start-chip:hover{transform:translateY(-1px); background:#EDEBFF; color:var(--violett-tief);
  box-shadow:0 2px 8px rgba(109,74,255,.14)}
.start-chip:hover svg{color:var(--violett)}
@media (max-width:640px){
  .start-zeile{flex-wrap:wrap; padding:2px 2px 0; gap:8px}
  .start-zeile > svg{display:none}
  /* Am Handy braucht das Feld eine sichtbare Feld-Anmutung — ohne Rahmen
     liest es sich als Fließtext über dem Knopf. */
  .start-zeile input{flex:1 1 100%; padding:14px 16px; border-radius:16px;
    background:var(--flaeche-2)}
  .start-los{width:100%; justify-content:center; margin-top:2px}
  .start-chips{padding-top:10px}
}

/* Ein inszenierter Auftritt: die Kopfzeilen treten nacheinander ein —
   einmal, beim Laden, in unter einer Sekunde. Danach ist Ruhe. */
.kopf .braue,.kopf h1,.kopf .unter,.kopf .start-karte,.kopf .fein{
  animation:auftreten .7s var(--e) both}
.kopf h1{animation-delay:.06s}
.kopf .unter{animation-delay:.14s}
.kopf .start-karte{animation-delay:.22s}
.kopf .fein{animation-delay:.32s}
@keyframes auftreten{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .kopf .braue,.kopf h1,.kopf .unter,.kopf .start-karte,.kopf .fein{animation:none}
  /* !important: die .a1–.a4-Regeln sind spezifischer und gewännen sonst —
     wer Bewegung reduziert hat, bekommt ein STEHENDES Licht, kein treibendes. */
  .aurora i{animation:none !important}
}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
section{position:relative; padding:clamp(80px,9vw,140px) 0}
.trenn{border-top:1px solid var(--linie-2)}
/* Der Kopf läuft ohne Naht in den ersten Abschnitt. */
.kopf + .trenn{border-top:0}
.papier{background:var(--grund)}

/* ── Werbebilder: das Versprechen als Bild ──────────────────────────────────
   Große, warme 3D-Illustrationen in Markenfarben — je EINE je Aussage,
   nie als Deko gestreut. */
.sortiert-buehne{padding-block:clamp(64px,7vw,104px)}
.sortiert-kopf .vorlauf{margin-bottom:32px}
.werbebild{margin:0; max-width:1080px; margin-inline:auto;
  border-radius:var(--r-weich); overflow:hidden;
  background:var(--flaeche);
  box-shadow:0 0 0 1px var(--linie),
    0 2px 6px hsl(250 25% 15% / .05),
    0 30px 60px -18px hsl(250 25% 15% / .16),
    0 60px 120px -44px rgba(109,74,255,.2)}
.werbebild img{display:block; width:100%; height:auto}
.panel-bild{margin:0; border-radius:18px; overflow:hidden;
  box-shadow:0 0 0 1px var(--linie),
    0 2px 6px hsl(250 25% 15% / .05),
    0 24px 48px -12px hsl(250 25% 15% / .14)}
.panel-bild img{display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:16/10}
.panel.ton-g{background:linear-gradient(140deg,#E7F3EC 0%,#F3FAF5 50%,#EAF2FE 100%)}

/* ── Schaufenster: die begehbare Branchen-Vorschau ──────────────────────────
   Statt einer Pillen-Wolke: EINE rollbare Chip-Bahn über einem großen,
   echten Produktfenster. Suchen rechts, wischen unten, klicken überall. */
.gw-kopfzeile{display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px 28px; flex-wrap:wrap; margin-bottom:8px}
.gw-kopfzeile .vorlauf{margin-bottom:0}
.gw-suchbox{position:relative; display:block; flex:0 1 330px; min-width:240px}
.gw-suchbox svg{position:absolute; left:17px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--ink-3); fill:none; stroke-width:2;
  stroke-linecap:round; pointer-events:none}
.gw-suche{
  width:100%; border:0; border-radius:999px; -webkit-appearance:none; appearance:none;
  background:var(--flaeche); color:var(--ink); font:inherit; font-size:14.5px;
  padding:13px 18px 13px 42px;
  box-shadow:inset 0 0 0 1px var(--linie), var(--schatten-1);
  transition:box-shadow .3s var(--e);
}
.gw-suche:focus{outline:none;
  box-shadow:inset 0 0 0 1.5px var(--violett), 0 0 0 4px rgba(109,74,255,.12)}
.gw-suche::placeholder{color:var(--ink-3)}
.gw-leer{font-size:13.5px; color:var(--ink-3); margin:8px 0 0; padding:2px 4px}

/* Die Chip-Bahn: eine Zeile, rollt seitlich, Kante blendet ehrlich aus. */
.gw-liste{display:flex; gap:8px; overflow-x:auto; padding:18px 4px 18px 2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 110px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 110px),transparent)}
.gw-liste::-webkit-scrollbar{display:none}
.gw-knopf{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  border:0; cursor:pointer; font:inherit; font-size:13.5px; font-weight:500;
  letter-spacing:-.01em; white-space:nowrap;
  padding:11px 17px; border-radius:999px; background:var(--flaeche); color:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(15,15,22,.09), var(--schatten-1);
  transition:transform .22s var(--e), box-shadow .22s var(--e), color .22s, background .22s;
}
.gw-knopf:hover{transform:translateY(-1px); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(109,74,255,.36), var(--schatten-1)}
.gw-knopf[hidden]{display:none}
.gw-knopf svg{width:14px; height:14px; flex:none; color:var(--ink-3)}
.gw-knopf:hover svg{color:var(--ink-2)}
.gw-knopf.an{background:#F1EDFF; color:var(--violett-tief); font-weight:600;
  box-shadow:inset 0 0 0 1.5px var(--violett), 0 4px 14px -4px rgba(109,74,255,.4)}
.gw-knopf.an svg{color:var(--violett)}
/* Der alte „Alle zeigen"-Knopf: die Bahn zeigt immer alle — er bleibt nur
   für schau.js im Baum. */
.gw-alle{display:none}
.gw-liste.gefiltert,.gw-liste.alles{-webkit-mask-image:none; mask-image:none}

/* Das Fenster: frontal, groß, mit Markenlicht unter dem Schatten. */
.gw-schau{display:grid; gap:26px; justify-items:center; margin-top:8px}
.gw-schau .k-rahmen{max-width:1120px;
  box-shadow:0 0 0 1px var(--linie),
    0 2px 6px hsl(250 25% 15% / .05),
    0 30px 60px -16px hsl(250 25% 15% / .16),
    0 60px 120px -40px rgba(109,74,255,.22),
    0 80px 160px -60px rgba(255,138,61,.14)}
.gw-start{align-self:center}

/* Im Startseiten-Schaufenster bestimmt die lange Seitenleiste die Höhe —
   Inhalte strecken sich, damit nichts als totes Weiß hängt. */
.gw-schau .k-leib{display:flex; flex-direction:column}
.gw-schau .k-leib .k-morgen{margin-top:auto}
.gw-schau .k-bahnen{flex:1; align-items:stretch}
.gw-schau .k-bahnen .k-bahn{height:auto}
.gw-schau .k-zeilen{flex:1}
@media (min-width:901px){
  .gw-schau .k-app{min-height:640px}
}

/* ── Produktzeilen: jede auf ihrer eigenen Lichtbühne ───────────────────────
   Drei getönte Panels — Violett, Cyan, Bernstein — geben der Mitte die
   Abwechslung, die vorher fehlte, ohne die Ruhe zu brechen. */
.mitte.prod{display:grid; gap:clamp(20px,2.6vw,28px)}
.panel{border-radius:var(--r-weich); padding:clamp(26px,4vw,56px);
  position:relative; overflow:hidden}
.panel.ton-v{background:linear-gradient(140deg,#EFE9FF 0%,#F8F4FF 55%,#EAF5FE 100%)}
.panel.ton-c{background:linear-gradient(140deg,#E3F4FD 0%,#F1FAFF 50%,#F3F0FF 100%)}
.panel.ton-b{background:linear-gradient(140deg,#FFEFDF 0%,#FFF8F1 50%,#F1EEFF 100%)}
/* Brauen auf getönten Panels: eine Kontraststufe höher, sonst reißt die
   11,5px-Zeile auf dem Violett-Ton unter WCAG AA. */
.panel .braue,.schluss .braue{color:var(--ink-2)}
.raster{display:grid;gap:22px}
.raster.prod-r{grid-template-columns:.82fr 1.18fr; align-items:center;
  gap:clamp(28px,4.5vw,64px)}
.raster.prod-r.kehr{grid-template-columns:1.18fr .82fr}
.raster.prod-r.kehr .prod-text{order:2}
.raster.prod-r.kehr .bild{order:1}
.prod-text h2{margin:0}
.prod-sub{margin:16px 0 0; font-size:15.5px; color:var(--ink-2); max-width:30ch}
@media(max-width:860px){
  /* .kehr hat (0,3,0) — ohne eigene Zeile gewinnt die Basisregel und der
     Mock wird gequetscht. */
  .raster.prod-r,.raster.prod-r.kehr{grid-template-columns:1fr}
  .raster.prod-r.kehr .prod-text{order:1}
  .raster.prod-r.kehr .bild{order:2}
}

/* ── Produktbilder: echte Oberfläche, im selben Chrome wie das Produkt ──── */
.bild{
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--flaeche);
  box-shadow:0 0 0 1px var(--linie),
    0 2px 6px hsl(250 25% 15% / .05),
    0 24px 48px -12px hsl(250 25% 15% / .14);
  will-change:transform;
}
.bild-leib{padding:20px}

/* Mail-Zeilen wie im echten Produkt: Zeichen-Chip, Text, Wert als Pille —
   keine nackten Punkte, das ist die Handschrift jeder Baukasten-Seite. */
.zeile{display:flex; gap:13px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--linie-2)}
.zeile:last-child{border-bottom:0}
.zeile .mz-ic{flex:none; width:32px; height:32px; border-radius:10px; margin-top:1px;
  display:grid; place-items:center; background:rgba(255,138,61,.14)}
.zeile .mz-ic svg{width:16px; height:16px; stroke:#DE6A1C; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.zeile .mz-ic.gut{background:rgba(14,159,110,.12)}
.zeile .mz-ic.gut svg{stroke:#0A7A52}
.zeile p{margin:0;flex:1;font-size:14px;color:var(--ink);max-width:none}
.zeile small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}
.zeile > em{flex:none; align-self:center; font-style:normal; white-space:nowrap;
  font-size:11.5px; font-weight:600; letter-spacing:.01em; padding:5px 11px;
  border-radius:999px; background:var(--flaeche-2); color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.zeile > em.gut{background:rgba(14,159,110,.1); color:#0A7A52}

/* Pipeline-Vorschau */
.spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.spalte{background:var(--flaeche-2);border-radius:14px;padding:12px}
.spalte b{display:block;font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.kachel{background:var(--flaeche);border-radius:10px;padding:10px 11px;margin-bottom:7px;
  font-size:12.5px;line-height:1.4;box-shadow:var(--schatten-1)}
.kachel span{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px}

/* Postfach-Vorschau */
.post{display:grid; gap:9px}
.post-z{display:grid; grid-template-columns:1fr auto; gap:2px 14px;
  align-items:center; padding:12px 13px; border-radius:13px; background:var(--flaeche-2)}
.post-z b{font-size:13.5px; font-weight:560; color:var(--ink)}
.post-z span{grid-column:1; font-size:12.5px; color:var(--ink-3)}
.post-z em{grid-row:1/3; grid-column:2; font-style:normal; font-size:11px;
  font-weight:560; letter-spacing:.02em; padding:4px 9px; border-radius:999px;
  color:var(--ink-2); background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--linie-2)}
.post-z.neu em{color:var(--ink-2); background:rgba(15,15,22,.05); box-shadow:none}

/* Die Morgenmeldung als das, was sie ist: eine Mail — mit der einzigen
   Verlaufs-Haarlinie der Mitte. */
.mail{position:relative; border-radius:18px; background:var(--flaeche);
  padding:4px 0 6px;
  box-shadow:0 2px 6px hsl(250 25% 15% / .05),
    0 24px 48px -12px hsl(250 25% 15% / .14)}
.mail::before{content:''; position:absolute; inset:0; border-radius:18px;
  padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(109,74,255,.45), rgba(14,165,233,.32));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}
.mail-kopf{display:flex; align-items:center; gap:11px; padding:16px 20px 0}
.mail-avatar{flex:none; width:34px; height:34px; border-radius:50%; font-style:normal;
  display:grid; place-items:center; font-size:12px; font-weight:640; color:#fff;
  background:var(--marke-verlauf)}
.mail-kopf b{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.01em}
.mail-kopf span{display:block; font-size:12px; color:var(--ink-3); margin-top:1px}
.mail-kopf em{margin-left:auto; font-style:normal; white-space:nowrap; font-size:10px; font-weight:640;
  letter-spacing:.05em; text-transform:uppercase; color:var(--violett-tief);
  background:rgba(109,74,255,.10); border-radius:999px; padding:4px 10px;
  display:inline-flex; align-items:center; gap:6px}
/* Der lebendige Punkt: das Badge atmet — die Meldung LÄUFT wirklich. */
.mail-kopf em::before{content:''; width:6px; height:6px; border-radius:50%;
  background:var(--gruen); animation:atmen 2.2s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.35; transform:scale(.75)} 50%{opacity:1; transform:scale(1)}}
.mail-betreff{font-size:15.5px; font-weight:600; letter-spacing:-.015em;
  color:var(--ink); padding:12px 20px 0; max-width:none}

/* ── Der Unterschied: drei Karten, jede mit eigener Lichtfarbe ──────────── */
.drei{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.drei-k{background:var(--flaeche);border-radius:var(--r-l);padding:30px 28px 28px;
  box-shadow:inset 0 0 0 1px var(--linie), var(--schatten-1);
  transition:transform .35s var(--e), box-shadow .35s var(--e)}
.drei-k:hover{transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px var(--linie), var(--schatten-2)}
.drei-k .glyph{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  margin-bottom:18px}
.drei-k .glyph svg{width:20px;height:20px;fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drei-k:nth-child(1) .glyph{background:rgba(109,74,255,.1); color:var(--violett)}
.drei-k:nth-child(2) .glyph{background:rgba(14,165,233,.12); color:#0284C7}
.drei-k:nth-child(3) .glyph{background:rgba(255,138,61,.14); color:#DE6A1C}
.drei-k h3{margin-bottom:10px}
.drei-k p{font-size:14.5px;margin:0;color:var(--ink-2)}

/* ── Preise ─────────────────────────────────────────────────────────────── */
.preise{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:stretch}
.preis{background:var(--flaeche);border-radius:var(--r-l);padding:34px 30px;
  box-shadow:inset 0 0 0 1px var(--linie), var(--schatten-1);
  display:flex;flex-direction:column;
  transition:transform .4s var(--e), box-shadow .4s var(--e)}
.preis:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--linie), var(--schatten-2)}
.preis.betont{
  position:relative; overflow:visible;
  background:linear-gradient(170deg, rgba(109,74,255,.06), rgba(69,217,255,.04) 45%, var(--flaeche) 80%);
  box-shadow:0 30px 70px -30px rgba(109,74,255,.45), 0 20px 60px -30px rgba(255,138,61,.26);
}
/* Verlaufs-Haarlinie um die Empfehlung — dieselbe Technik wie an der Mail. */
.preis.betont::before{content:''; position:absolute; inset:0; border-radius:var(--r-l);
  padding:1.5px; pointer-events:none;
  background:var(--marke-verlauf);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}
.preis.betont::after{content:'Unsere Empfehlung'; position:absolute; top:-13px; left:26px;
  font-size:10.5px; font-weight:640; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:linear-gradient(105deg,#2E7FF2,#6D4AFF 55%,#9A54E8);
  padding:5px 12px; border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 10px rgba(109,74,255,.4)}
.preis.betont:hover{transform:translateY(-3px)}
.preis .n{font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.preis .z{font-size:3rem;font-weight:680;letter-spacing:-.05em;margin:12px 0 2px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.preis .z small{font-size:.9rem;font-weight:400;color:var(--ink-3);letter-spacing:0}
.preis ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px}
.preis li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
/* Häkchen statt Punkte — Leistungen sind zugesagt, nicht aufgezählt. */
.preis li::before{content:'';flex:none;width:15px;height:15px;margin-top:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D4AFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.preis li.aus{color:var(--ink-3)}
.preis li.aus::before{background:none;width:5px;height:5px;border-radius:50%;
  margin:8px 5px 0;background-color:rgba(15,15,22,.16)}
.preis .knopf{margin-top:auto;justify-content:center}

/* ── Ehrliche Fragen (FAQ) ──────────────────────────────────────────────── */
/* Die ganze Sektion läuft schmaler — Überschrift und Liste bündig, statt
   einer 820px-Liste unter einer 1240px-Überschrift mit totem Drittel rechts. */
.fragen-mitte{max-width:880px}
.fragen{display:grid; gap:10px}
.frage{background:var(--flaeche); border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--linie);
  transition:box-shadow .2s ease}
.frage[open]{box-shadow:inset 0 0 0 1px rgba(15,15,22,.12), var(--schatten-1)}
.frage summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  gap:16px; align-items:center; padding:17px 22px; font-weight:580; font-size:15px}
.frage summary::-webkit-details-marker{display:none}
.frage summary{transition:color .15s ease}
.frage summary:hover{color:var(--violett)}
.frage summary::after{content:'+'; font-size:19px; color:var(--ink-3); flex:none;
  transition:transform .3s var(--e)}
.frage[open] summary::after{transform:rotate(45deg)}
.frage p{padding:0 22px 17px; margin:0; font-size:14.5px; color:var(--ink-2); max-width:none}

/* ── Rechtsseiten (Impressum, AGB …) ────────────────────────────────────── */
.blatt{padding-top:76px}

/* ── Schlussbühne: das Licht kehrt zurück ───────────────────────────────── */
.schluss{padding-top:0}
.schluss-panel{position:relative; overflow:hidden; border-radius:36px;
  background:#FFFDFB; text-align:center;
  padding:clamp(70px,9vw,130px) 28px;
  box-shadow:0 0 0 1px var(--linie), 0 40px 100px -40px rgba(109,74,255,.3)}
.schluss-panel .aurora{inset:-8% -4%; filter:blur(clamp(40px,5vw,70px)) saturate(1.25)}
.schluss-inhalt{position:relative; z-index:2}
.schluss-panel p{margin-inline:auto}
.schluss .fein{color:var(--ink-2)}

/* ── Fuß ───────────────────────────────────────────────────────────────── */
footer{padding:80px 0 50px;font-size:14px;
  color:var(--ink-3);background:var(--grund)}
footer a{text-decoration:none;color:var(--ink-2)}
footer a:hover{color:var(--ink)}
footer .reihen{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:44px}
footer .spalte-f{display:grid;gap:11px;align-content:start}
footer .spalte-f b{color:var(--ink);font-size:13px;font-weight:560;margin-bottom:2px}
footer .marke-f{max-width:300px;margin-right:auto}
footer .marke-f p{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin:0}

/* ── Bewegung ───────────────────────────────────────────────────────────── */
/* ⚠️ `.auf` wird von bewegung.js freigegeben (Klasse `da`). Die Klasse `js`
   am <html> setzt ein Inline-Skript im Kopf von index.html — fehlt sie,
   greift diese Regel nicht und die ganze Seite steht bewegungslos da.
   Genau so war es bis zum 30.08.2026. */
.js .auf{
  opacity:0; transform:translate3d(0,32px,0) scale(.978); filter:blur(5px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1),
             filter .55s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform}
.js .auf.da{opacity:1;transform:none;filter:none}
/* Überschriften kommen weiter — sie führen den Abschnitt an. */
.js h2.auf{transform:translate3d(0,44px,0) scale(.985)}
.js .braue.auf{transform:translate3d(0,18px,0)}

/* Leben in den Lichtbühnen: wird ein Panel sichtbar, treten seine Inhalte
   GESTAFFELT ein — Mail-Zeilen, Kanban-Karten, Postfach-Zeilen. Eine Bühne,
   die sich aufbaut, statt eines Bildes, das herumsteht. */
.js .panel .zeile,.js .panel .kachel,.js .panel .post-z{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--e), transform .6s var(--e)}
.js .panel.da .zeile,.js .panel.da .kachel,.js .panel.da .post-z{opacity:1; transform:none}
.js .panel.da .zeile:nth-child(1){transition-delay:.25s}
.js .panel.da .zeile:nth-child(2){transition-delay:.45s}
.js .panel.da .zeile:nth-child(3){transition-delay:.65s}
.js .panel.da .spalte:nth-child(1) .kachel{transition-delay:.2s}
.js .panel.da .spalte:nth-child(2) .kachel{transition-delay:.35s}
.js .panel.da .spalte:nth-child(3) .kachel{transition-delay:.5s}
.js .panel.da .spalte:nth-child(3) .kachel + .kachel{transition-delay:.62s}
.js .panel.da .spalte:nth-child(4) .kachel{transition-delay:.75s}
.js .panel.da .post-z:nth-child(1){transition-delay:.2s}
.js .panel.da .post-z:nth-child(2){transition-delay:.4s}
.js .panel.da .post-z:nth-child(3){transition-delay:.6s}

@media (prefers-reduced-motion:reduce){
  /* !important, weil `.js .auf` spezifischer ist als `.auf` — ohne das bliebe
     die Seite für genau die Menschen unsichtbar, die keine Bewegung wollen. */
  .js .auf,.auf{opacity:1 !important;transform:none !important;
    filter:none !important;transition:none !important}
  .js .panel .zeile,.js .panel .kachel,.js .panel .post-z,
  .panel .zeile,.panel .kachel,.panel .post-z{
    opacity:1 !important;transform:none !important;transition:none !important}
  .mail-kopf em::before{animation:none}
}

@media (max-width:820px){
  .leiste .innen{gap:16px}
  .leiste nav{gap:16px}
  .leiste nav a{font-size:13.5px}
  .spalten{grid-template-columns:repeat(2,1fr)}
  .kopf .innen{padding-block:130px 70px}
  .schluss-panel{border-radius:26px}
}

/* Tablet-Zwischenbreite: aus 2+1-Waisenkarten wird eine ruhige Spalte —
   ein leeres Feld rechts liest sich als Fehler, nicht als Luft. */
@media (min-width:561px) and (max-width:900px){
  .drei, .preise{grid-template-columns:1fr; max-width:560px; margin-inline:auto}
}

/* Nur-schmal-Elemente: sichtbar erst, wo der Kopfleisten-CTA fehlt. */
.nur-schmal{display:none}
@media (max-width:560px){ .nur-schmal{display:block} }

/* Daumen-Ziel: unter 901px wachsen die Branchen-Chips auf Tipp-Höhe. */
@media (max-width:900px){
  .gw-knopf{padding-block:12px; min-height:44px}
}

/* ══ Umfang: Bild + Bereiche ══════════════════════════════════════════════ */
.ablauf-bild{margin:38px 0 0; padding:0}
/* ⚠️ Deckel. Ohne height wuchs das Bild auf die volle Spaltenbreite und
   damit über einen ganzen Bildschirm — man scrollte an einer Illustration
   vorbei, statt das Produkt zu sehen. */
.ablauf-bild img{display:block; width:100%; height:320px; object-fit:cover;
  object-position:center 58%; border-radius:20px;
  box-shadow:0 1px 2px rgba(11,11,16,.06), 0 34px 80px -40px rgba(11,11,16,.4)}
.ablauf-bild figcaption{margin-top:12px; text-align:center; font-size:12.5px;
  letter-spacing:.05em; color:#8C8C97}

.bereiche{display:grid; gap:10px; margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.ber{position:relative; display:block; padding:20px 20px 18px; border-radius:16px;
  background:#FFF; text-decoration:none; color:inherit; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); transition:transform .3s var(--e), box-shadow .3s var(--e)}
.ber::before{content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#7C5CFF,#45D9FF); opacity:0; transition:opacity .3s var(--e)}
.ber:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.3), 0 18px 40px -22px rgba(11,11,16,.35)}
.ber:hover::before{opacity:1}
.ber b{display:block; font-size:16px; font-weight:560; letter-spacing:-.018em; color:#0B0B10}
.ber span{display:block; margin-top:7px; font-size:13.5px; line-height:1.55; color:#55555F}
.ber em{display:inline-block; margin-top:12px; font-style:normal; font-size:11px;
  font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#5B3FD9;
  background:rgba(124,92,255,.10); padding:4px 9px; border-radius:999px}

.unterschied{display:grid; gap:10px; margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.unt{padding:18px 20px; border-radius:16px;
  background:linear-gradient(150deg,rgba(124,92,255,.10),rgba(69,217,255,.06));
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.18)}
.unt b{display:block; font-size:15px; font-weight:560; letter-spacing:-.015em; color:#0B0B10}
.unt span{display:block; margin-top:6px; font-size:13px; line-height:1.55; color:#55555F}

/* Bilder in den Unterschied-Karten: sie tragen die Aussage, nicht nur Deko. */
.unt{padding:0; overflow:hidden; display:flex; flex-direction:column}
/* ⚠️ Deckel in Pixeln, nicht nur Seitenverhältnis. Bei drei Spalten wird die
   Karte breit, und 4:3 machte daraus ein Bild, das die ganze Höhe frisst —
   die Aussage der Karte stand dann unterhalb des Bildschirms. */
.unt img{display:block; width:100%; height:186px; object-fit:cover;
  object-position:center 46%; background:#F1EFF6}
@media(max-width:900px){.unt img{height:150px}}
.unt b{margin:18px 20px 0}
.unt span{margin:6px 20px 20px}

@media(max-width:760px){.ablauf-bild img{height:200px}}

/* Zeichen in den Bereichskarten
   ⚠️ `.ber .ber-z`, nicht `.ber-z`: die Beschreibungszeile wird über
   `.ber span{display:block}` gesetzt, und `.ber-z` IST ein span. Eine Klasse
   plus Element schlägt eine Klasse allein — das Feld blieb `display:block`
   und das Zeichen klebte oben links. Zweites Mal dieselbe Falle. */
.ber .ber-z{display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(140deg,rgba(124,92,255,.14),rgba(69,217,255,.12));
  margin-bottom:12px; transition:background .3s var(--e)}
.ber .ber-z svg{display:block; width:19px; height:19px; flex:none;
  fill:none; stroke:#5B3FD9; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.ber:hover .ber-z{background:linear-gradient(140deg,#7C5CFF,#45D9FF)}
.ber:hover .ber-z svg{stroke:#fff}

/* ══ Fuß-Abschluss ═══════════════════════════════════════════════════════ */
.fuss-schluss{border-top:1px solid var(--kante); padding-top:24px; display:flex;
  align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.fuss-netz{display:flex; gap:8px; order:2}
.fuss-netz a{display:grid; place-items:center; width:38px; height:38px;
  border-radius:11px; color:var(--hell-2); background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--kante); transition:.22s var(--e)}
.fuss-netz a:hover{color:#fff; background:linear-gradient(140deg,#7C5CFF,#45D9FF);
  box-shadow:none; transform:translateY(-2px)}
.fuss-netz svg{width:18px; height:18px; fill:currentColor}
/* Was es noch nicht gibt, sieht auch so aus — statt einen toten Link zu tarnen. */
.fuss-netz a[data-bald]{opacity:.45}
.fuss-netz a[data-bald]:hover{opacity:1}
.fuss-recht{font-size:13px; color:var(--hell-2); max-width:64ch; line-height:1.6}
.fuss-recht a{color:var(--hell); text-decoration:none}
.fuss-recht a:hover{text-decoration:underline}
@media(max-width:640px){.fuss-netz{order:0}}

/* ══ Hilfe-Knopf ══════════════════════════════════════════════════════════ */
.hi-knopf{position:fixed; right:20px; bottom:20px; z-index:150; display:flex;
  align-items:center; gap:8px; padding:11px 17px 11px 14px; border-radius:999px;
  background:#12121A; color:#fff; font:520 14px/1 'Instrument',-apple-system,sans-serif;
  box-shadow:0 8px 24px -8px rgba(18,18,26,.5); transition:.2s cubic-bezier(.22,1,.36,1)}
.hi-knopf:hover{transform:translateY(-2px); background:#000}
.hi-knopf svg{width:18px; height:18px}
.hi-kasten{position:fixed; right:20px; bottom:74px; z-index:151; width:min(330px,calc(100vw - 40px));
  padding:20px; border-radius:18px; background:#fff; color:#12121A;
  box-shadow:0 24px 60px -18px rgba(18,18,26,.42), 0 0 0 1px rgba(18,18,26,.08);
  opacity:0; transform:translateY(8px); transition:.2s cubic-bezier(.22,1,.36,1);
  font:400 14px/1.55 'Instrument',-apple-system,sans-serif}
.hi-kasten.an{opacity:1; transform:none}
.hi-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px}
.hi-kopf b{font-size:16px; font-weight:560; letter-spacing:-.02em}
.hi-zu{width:28px; height:28px; border-radius:8px; font-size:19px; line-height:1;
  color:#8E8E9C; background:none; border:0; cursor:pointer}
.hi-zu:hover{background:rgba(18,18,26,.06); color:#12121A}
.hi-text{margin:8px 0 14px; font-size:13px; color:#585866}
.hi-weg{display:block; padding:12px 14px; border-radius:12px; margin-bottom:8px;
  text-decoration:none; color:inherit; background:#F6F5F8; transition:.18s}
.hi-weg:hover{background:#EFEDF5; transform:translateY(-1px)}
.hi-weg b{display:block; font-size:14px; font-weight:560}
.hi-weg span{display:block; margin-top:2px; font-size:12.5px; color:#585866}
.hi-fein{margin:10px 0 0; font-size:11.5px; line-height:1.5; color:#9A9AA6}
@media print{.hi-knopf,.hi-kasten{display:none !important}}


/* Netzwerke in ihren eigenen Farben — ein graues LinkedIn erkennt niemand. */
.fuss-netz a[aria-label*="LinkedIn"]:hover{background:#0A66C2; box-shadow:none}
.fuss-netz a[aria-label*="Instagram"]:hover{
  background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%);
  box-shadow:none}
.fuss-netz a[aria-label*="TikTok"]:hover{background:#000; box-shadow:none}
.fuss-netz a[aria-label*="TikTok"]:hover svg{color:#25F4EE}
.fuss-netz a{opacity:1}
.fuss-netz a[data-bald]{opacity:.55}
.fuss-netz a[data-bald]:hover{opacity:1}

/* Das Ablaufbild war zu kräftig gegen den ruhigen Rest der Seite. */
.ablauf-bild img{filter:saturate(.82) contrast(.96)}
.ablauf-bild{position:relative}
.ablauf-bild::after{content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(180deg,rgba(250,249,246,.10),rgba(250,249,246,.34));
  pointer-events:none}

/* ══ Bewegung beim Scrollen ═══════════════════════════════════════════════
   ⚠️ Nur wenn JavaScript läuft (.bewegt). Ohne das Skript wäre alles auf
   opacity:0 gesetzt — eine leere Seite ist der schlimmste Ausfall. */
.bewegt .ein{
  opacity:0; transform:translate3d(0,34px,0) scale(.975);
  filter:blur(6px);
  transition:opacity .78s cubic-bezier(.16,1,.3,1),
             transform .78s cubic-bezier(.16,1,.3,1),
             filter .6s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.bewegt .ein.da{opacity:1; transform:none; filter:none}

/* Überschriften kommen etwas weiter und eine Spur länger — sie führen den
   Abschnitt an, also sollen sie auch zuerst auffallen. */
.bewegt h2.ein{transform:translate3d(0,46px,0)}
.bewegt .braue.ein{transform:translate3d(0,20px,0)}

/* Parallaxe: das Bild sitzt in einem Rahmen mit Überstand, damit der Versatz
   keine Kante freilegt. */
.ablauf-bild,.unt{overflow:hidden}
.ablauf-bild img,.unt img{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .bewegt .ein{opacity:1 !important; transform:none !important; filter:none !important}
  .ablauf-bild img,.unt img{transform:none !important}
}


/* Netzwerke tragen ihre Farbe dauerhaft, nicht erst beim Überfahren —
   ein graues LinkedIn erkennt niemand im Vorbeiscrollen. */
.fuss-netz a{background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fuss-netz a[aria-label*="LinkedIn"] svg{fill:#0A66C2; color:#0A66C2}
.fuss-netz a[aria-label*="TikTok"] svg{fill:#111; color:#111}
.fuss-netz a[aria-label*="Instagram"] svg{fill:url(#ig-verlauf); color:#D6249F}
.fuss-netz a:hover{transform:translateY(-2px); background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 8px 20px -10px rgba(11,11,16,.4)}
.fuss-netz a[data-bald]{opacity:1}