@charset "UTF-8";
/* ==========================================================================
   ElbeDeals – Webdesign Hamburg
   Ein Stylesheet, keine Frameworks, keine Build-Kette. Die Seite ist selbst
   der Beleg für den Satz, den sie verkauft: handcodiert.

   Aufbau:  0 Schriften · 1 Tokens · 2 Grundlage · 3 Raster & Linien
            4 Kopf · 5 Hero · 6 Kennzahlen · 7 Leistungen · 8 Referenzen
            9 Prozess · 10 Unterschied · 11 FAQ · 12 Kontakt · 13 Fuß
            14 Bewegung beim Scrollen · 15 Kleine Seiten
            16 Zahlen im Orbit · 17 Mehr Bewegung beim Scrollen
            18 Angehefteter Ablauf · 19 Stapelnde Karten
            20 Zoom-Einstieg · 21 Laufband
   ========================================================================== */

/* ── 0 Schriften ──────────────────────────────────────────────────────────
   Selbst gehostet statt von Google geladen: keine Besucher-IP an einen
   Dritten (DSGVO) und ein Verbindungsaufbau weniger vor dem ersten Text. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 85% 125%; font-display: swap; src: url('fonts/Archivo-400-800-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; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 85% 125%; font-display: swap; src: url('fonts/Archivo-400-800-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: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('fonts/IBMPlexSans-400-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; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('fonts/IBMPlexSans-400-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/JetBrainsMono-400-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; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/JetBrainsMono-400-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; }

/* ── 1 Tokens ─────────────────────────────────────────────────────────────
   Die Blau-Cyan-Rampe ist nicht ausgedacht: sie steckt im Logo. Gemessen
   wurden #002050 (Grundton), #0050E0 und #00C0E0 als hellste Kante. */
:root{
  /* Grund – blaustichiges Tiefschwarz, kein reines #000 */
  --ink-900:#07080B;
  --ink-850:#0B0D12;
  --ink-800:#10131A;
  --ink-700:#171B25;
  --navy:#002050;

  /* Marke */
  --blue:#1a6ee0;          /* Markenblau, Bestand */
  --blue-hi:#3D8EF5;       /* 6,09:1 auf --ink-900 – trägt Text */
  --cyan:#00C0E0;          /* helle Kante des Logo-Verlaufs */

  /* Text – explizite Farben, nie Deckkraft auf Text */
  --fg:#EDEFF4;            /* 17,4:1 */
  --fg-2:#A7AEBE;          /*  9,0:1 */
  --fg-3:#7B8396;          /*  5,1:1 */

  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);
  --line-blue:rgba(61,142,245,.35);

  --ok:#3DBE7A; --warn:#E0A100; --err:#FF6B6B;

  /* Raum – 4er-Basis */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --abschnitt:clamp(5rem,11vw,9rem);
  --breite:1280px;

  /* Typo */
  --disp:'Archivo','Archivo Expanded',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.0625rem;
  --t-lg:1.25rem; --t-xl:1.5rem;
  --t-h3:clamp(1.25rem,2vw,1.5rem);
  --t-h2:clamp(2rem,5.5vw,4.25rem);
  --t-hero:clamp(2.75rem,10.5vw,8.5rem);

  --r1:2px; --r2:6px; --r3:14px; --r-pill:999px;

  /* Bewegung */
  --aus:cubic-bezier(.22,1,.36,1);
  --weich:cubic-bezier(.4,0,.2,1);
  --t-druck:130ms; --t-zustand:200ms; --t-flaeche:320ms; --t-auftritt:620ms;

  --schatten:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.9);
  --schatten-hoch:0 2px 4px rgba(0,0,0,.4), 0 28px 60px -28px rgba(0,0,0,1);
}

/* ── 2 Grundlage ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  font-size:17px;
  scroll-behavior:smooth;
  scroll-padding-top:96px;          /* der schwebende Kopf darf Ziele nicht verdecken (WCAG 2.4.11) */
  -webkit-text-size-adjust:100%;
}
@media (max-width:640px){ html{font-size:16px} }

body{
  font-family:var(--body);
  font-size:var(--t-md);
  line-height:1.65;
  color:var(--fg);
  background:var(--ink-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

::selection{background:var(--blue);color:#fff}
:root{scrollbar-color:#242a36 var(--ink-900);scrollbar-width:thin;accent-color:var(--blue-hi);caret-color:var(--blue-hi)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:#242a36;border:3px solid var(--ink-900);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#333c4d}

:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px;border-radius:var(--r1)}
:focus:not(:focus-visible){outline:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:-100px;left:var(--gutter);z-index:200;
  background:var(--blue);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r2);
  font:500 var(--t-sm)/1 var(--body);transition:top var(--t-zustand) var(--aus);
}
.skip:focus{top:1rem}

/* Typo-Rollen */
.disp{
  font-family:var(--disp);
  font-weight:800;
  font-stretch:112%;
  letter-spacing:-.035em;
  line-height:.92;
  text-wrap:balance;
  text-transform:uppercase;
}
.mono{
  font-family:var(--mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
p{text-wrap:pretty;overflow-wrap:anywhere}

/* Deutsche Komposita in Versalien sprengen sonst schmale Spalten:
   "CARBONVEREDELUNG" misst als ein Wort 356 px und ein Rasterkind
   schrumpft nicht unter seine min-content-Breite. */
h1,h2,h3,.disp{overflow-wrap:break-word;hyphens:auto}

/* ── 3 Raster & Linien ────────────────────────────────────────────────────
   Das Signaturelement: ein sichtbares Baumaß. Sechs Haarlinien laufen als
   feste Spalten durch die ganze Seite – wie die Hilfslinien einer Zeichnung,
   nach der gebaut wird. Sie sind Struktur, keine Dekoration: alle Abschnitte
   richten sich an denselben Spalten aus. */
.rahmen{
  width:min(100% - 2*var(--gutter), var(--breite));
  margin-inline:auto;
}

.raster{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  width:min(100% - 2*var(--gutter), var(--breite));
  margin-inline:auto;
  background-image:repeating-linear-gradient(to right,
    var(--line) 0 1px, transparent 1px calc(100% / 6));
  background-size:calc(100% / 6 * 6) 100%;
  opacity:.55;
}
@media (max-width:860px){ .raster{background-image:repeating-linear-gradient(to right,
    var(--line) 0 1px, transparent 1px calc(100% / 3));opacity:.4} }

main,header,footer{position:relative;z-index:1}

section{
  padding-block:var(--abschnitt);
  border-top:1px solid var(--line);
  position:relative;
}
#home{border-top:0;padding-block:0}

/* Abschnittskopf: Marke links, Titel darunter – eine Ordnung für alle */
.kopf{display:grid;gap:var(--s5);margin-bottom:var(--s16)}
.kopf-marke{
  display:flex;align-items:center;gap:var(--s3);
  color:var(--cyan);
}
.kopf-marke::before{
  content:"";width:28px;height:1px;background:var(--cyan);flex:none;
}
.kopf h2{font-size:var(--t-h2)}
.kopf-satz{
  max-width:52ch;color:var(--fg-2);font-size:var(--t-lg);line-height:1.55;
}

/* Knöpfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--t-base);letter-spacing:-.005em;
  cursor:pointer;text-align:center;
  transition:background var(--t-zustand) var(--weich),
             border-color var(--t-zustand) var(--weich),
             color var(--t-zustand) var(--weich),
             transform var(--t-druck) var(--aus);
}
.knopf svg{flex:none;transition:transform var(--t-zustand) var(--aus)}
.knopf-primaer{background:var(--blue);color:#fff}   /* 4,83:1 – gemessen */
.knopf-zweit{border-color:var(--line-2);color:var(--fg);background:transparent}
@media (hover:hover) and (pointer:fine){
  .knopf-primaer:hover{background:#2f80ee}
  .knopf-primaer:hover svg{transform:translateX(4px)}
  .knopf-zweit:hover{border-color:var(--blue-hi);color:var(--blue-hi);background:rgba(61,142,245,.07)}
}
.knopf:active{transform:scale(.975)}
.knopf[disabled]{opacity:1;background:var(--ink-700);color:var(--fg-3);cursor:not-allowed;border-color:var(--line)}

/* Fortschrittslinie ganz oben – zeigt, wie weit die Seite gelesen ist */
.fortschritt{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:150;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform-origin:0 50%;transform:scaleX(0);
  pointer-events:none;
}
@supports (animation-timeline:scroll()){
  .fortschritt{
    animation:fortschritt linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes fortschritt{ to{transform:scaleX(1)} }

/* ── 4 Kopf ──────────────────────────────────────────────────────────────
   Schwebende Leiste, die beim Scrollen enger wird. Kein scroll-Listener:
   ein unsichtbarer Wächter oben auf der Seite meldet per Observer. */
.kopfleiste{
  position:fixed;inset:var(--s4) 0 auto 0;z-index:100;
  transition:inset-block-start var(--t-flaeche) var(--aus);
}
.kopfleiste-innen{
  width:min(100% - 2*var(--gutter), var(--breite));
  margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s6);
  padding:.7rem .75rem .7rem 1.25rem;
  background:rgba(11,13,18,.72);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:padding var(--t-flaeche) var(--aus),
             background var(--t-flaeche) var(--weich),
             border-color var(--t-flaeche) var(--weich),
             box-shadow var(--t-flaeche) var(--weich);
}
body.gescrollt .kopfleiste{inset-block-start:var(--s2)}
body.gescrollt .kopfleiste-innen{
  padding:.45rem .55rem .45rem 1rem;
  background:rgba(7,8,11,.9);
  border-color:var(--line-2);
  box-shadow:var(--schatten-hoch);
}
.kopf-logo{
  display:flex;align-items:center;min-height:44px;
  /* Das Logo ist fuer helle Untergruende gezeichnet: sein dunkler Teil
     (#002050) steht auf #07080B bei 1,28:1. Statt die Datei zu aendern,
     bekommt sie hier die Flaeche, auf der sie funktioniert. */
  background:#F2F4F8;border-radius:var(--r-pill);
  padding:.4rem .85rem;
  transition:padding var(--t-flaeche) var(--aus);
}
.kopf-logo img{
  width:auto;height:38px;
  transition:height var(--t-flaeche) var(--aus);
}
body.gescrollt .kopf-logo{padding:.3rem .7rem}
body.gescrollt .kopf-logo img{height:32px}

.navi{display:flex;justify-content:center}
.navi ul{display:flex;gap:.35rem;align-items:center}
.navi a{
  display:inline-block;padding:.5rem .75rem;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;color:var(--fg-2);
  transition:color var(--t-zustand) var(--weich),background var(--t-zustand) var(--weich);
}
@media (hover:hover) and (pointer:fine){ .navi a:hover{color:var(--fg);background:rgba(255,255,255,.06)} }
.navi a[aria-current="true"]{color:var(--fg);background:rgba(61,142,245,.14)}

/* Der Anfragen-Knopf steckt auf kleinen Geraeten im Menue: dort ist er
   der einzige Weg zur Anfrage, sobald der Hero durchgescrollt ist. */
.navi-anfrage{display:none}
.navi-anfrage a{color:#fff}

.kopf-rechts{display:flex;align-items:center;gap:var(--s2)}
.kopf-rechts .knopf{min-height:44px;padding:.6rem 1.2rem;font-size:var(--t-sm)}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);
  border-radius:var(--r-pill);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:16px;height:1.5px;background:var(--fg);border-radius:2px;
  transition:transform var(--t-zustand) var(--aus),opacity var(--t-zustand) var(--weich)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:980px){
  /* Auf dem Handy gibt es keine Pille mit leerer Mitte, sondern zwei
     schwebende Elemente: Logo links, Schalter rechts. */
  .kopfleiste-innen{
    grid-template-columns:auto auto;justify-content:space-between;
    gap:var(--s3);padding:0;
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.gescrollt .kopfleiste-innen{
    padding:0;background:none;border:0;box-shadow:none;
  }
  .kopf-logo{padding:.35rem .7rem;box-shadow:var(--schatten-hoch)}
  .kopf-logo img{height:30px}
  body.gescrollt .kopf-logo img{height:26px}
  .burger{
    background:rgba(11,13,18,.82);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:var(--schatten-hoch);
  }

  /* Das Menue sitzt buendig unter der Leiste, gleiche Breite, gleiche
     Rundung - es wirkt wie eine Schublade der Leiste, nicht wie ein
     fremder Kasten. */
  .navi{
    position:fixed;
    inset-block-start:calc(var(--s4) + 56px);
    inset-inline:var(--gutter);
    display:block;padding:var(--s2);
    background:rgba(7,8,11,.97);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid var(--line-2);border-radius:var(--r3);
    box-shadow:var(--schatten-hoch);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
    transform-origin:top center;
    transition:opacity var(--t-flaeche) var(--weich),
               transform var(--t-flaeche) var(--aus),
               visibility var(--t-flaeche),
               inset-block-start var(--t-flaeche) var(--aus);
  }
  body.gescrollt .navi{inset-block-start:calc(var(--s2) + 52px)}
  .navi[data-offen="true"]{opacity:1;visibility:visible;transform:none}
  .navi ul{flex-direction:column;align-items:stretch;gap:2px}
  .navi a{
    display:flex;align-items:center;min-height:48px;
    padding:.75rem .9rem;font-size:var(--t-base);border-radius:var(--r2);
  }
  .navi a[aria-current="true"]{background:rgba(61,142,245,.16)}
  .kopf-rechts .knopf{display:none}
  .burger{display:flex;width:46px;height:46px}
  .navi-anfrage{display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
  .navi-anfrage a{display:flex;justify-content:center;width:100%;color:#fff;background:var(--blue)}
  .navi-anfrage a[aria-current="true"]{background:var(--blue)}
}

/* ── 5 Hero ──────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:min(100svh,940px);
  display:grid;align-content:center;
  padding-block:clamp(9rem,17vh,12rem) clamp(3rem,7vh,5rem);
  overflow:clip;
}

/* Strömung: dieselben Kurven wie in der React-Vorlage, einmal ausgerechnet
   und als Pfade eingebettet. Die Farben kommen aus dem Logo-Verlauf. */
.stroemung{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  color:var(--blue-hi);
}
.stroemung svg{width:100%;height:100%}
.stroemung path{
  fill:none;
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  animation:zeichnen 2.6s var(--aus) both, fliessen 22s linear infinite;
  animation-delay:calc(var(--i) * 45ms), calc(var(--i) * 260ms);
}
@keyframes zeichnen{ to{stroke-dashoffset:0} }
@keyframes fliessen{ from{stroke-dashoffset:0} to{stroke-dashoffset:-3200} }

/* Lichtfächer – Atmosphäre aus dem Markenverlauf, nicht aus einem Filter */
.licht{
  position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 44% at 20% 30%, rgba(26,110,224,.46), transparent 70%),
    radial-gradient(46% 36% at 80% 20%, rgba(0,192,224,.26), transparent 68%),
    radial-gradient(34% 26% at 34% 52%, rgba(61,142,245,.20), transparent 70%),
    radial-gradient(76% 62% at 50% 102%, rgba(0,32,80,.62), transparent 76%);
  filter:blur(6px);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:36%;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--ink-900));
}

.hero-inhalt{position:relative;z-index:2}
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
  color:var(--fg-3);margin-bottom:var(--s8);
}
.hero-meta .punkt{
  width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 0 4px rgba(0,192,224,.14);
}
.hero-meta span{color:var(--fg-2)}

.hero h1{
  font-family:var(--disp);font-weight:800;font-stretch:118%;
  font-size:var(--t-hero);line-height:.85;letter-spacing:-.045em;
  text-transform:uppercase;
  margin-bottom:var(--s8);
}
.hero h1 .zeile{display:block}
.hero h1 .amp{
  font-weight:400;font-stretch:88%;
  background:linear-gradient(100deg,var(--blue-hi),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-satz{
  max-width:46ch;font-size:clamp(1.0625rem,1.6vw,1.375rem);
  color:var(--fg-2);line-height:1.55;margin-bottom:var(--s5);
}
.hero-satz strong{color:var(--fg);font-weight:600}
.hero-nachsatz{
  max-width:46ch;color:var(--fg-3);font-size:var(--t-base);margin-bottom:var(--s12);
}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ── 7 Leistungen ────────────────────────────────────────────────────── */
.leistungen-liste{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:820px){ .leistungen-liste{grid-template-columns:minmax(0,1fr)} }

.leistung{
  position:relative;background:var(--ink-850);
  padding:var(--s10) var(--s8) var(--s10);
  display:grid;gap:var(--s4);align-content:start;
  transition:background var(--t-flaeche) var(--weich);
}
.leistung::before{
  content:"";position:absolute;inset:0 auto auto 0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t-flaeche) var(--aus);
}
@media (hover:hover) and (pointer:fine){
  .leistung:hover{background:var(--ink-800)}
  .leistung:hover::before{transform:scaleX(1)}
  .leistung:hover .leistung-symbol{color:var(--cyan);border-color:var(--line-blue)}
}
.leistung:focus-within::before{transform:scaleX(1)}
.leistung-symbol{
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:var(--r2);
  color:var(--blue-hi);
  transition:color var(--t-zustand) var(--weich),border-color var(--t-zustand) var(--weich);
}
.leistung h3{font-family:var(--disp);font-weight:700;font-stretch:108%;
  font-size:var(--t-xl);letter-spacing:-.025em;text-transform:uppercase}
.leistung p{color:var(--fg-2);max-width:42ch}
.leistung-marken{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.leistung-marken li{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--fg-3);border:1px solid var(--line);border-radius:var(--r1);
  padding:.3rem .55rem;
}

/* ── 8 Referenzen ─────────────────────────────────────────────────────── */
#portfolio{overflow:clip}
.referenzen-liste{display:grid;gap:var(--s16);grid-template-columns:minmax(0,1fr)}
.referenz{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--s12);align-items:center;min-width:0;
}
.referenz > *{min-width:0}
.referenz:nth-child(even) .referenz-bild{order:2}
@media (max-width:900px){
  .referenz{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .referenz:nth-child(even) .referenz-bild{order:0}
}

.referenz-bild{
  position:relative;border:1px solid var(--line);border-radius:var(--r3);
  overflow:hidden;background:var(--ink-800);
  aspect-ratio:16/10;
  box-shadow:var(--schatten);
}
.referenz-bild img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform var(--t-flaeche) var(--weich),filter var(--t-flaeche) var(--weich);
  filter:saturate(.92);
}
@media (hover:hover) and (pointer:fine){
  .referenz-bild:hover img{transform:scale(1.02);filter:saturate(1)}
}
.referenz-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,8,11,.5),transparent 45%);
}

.referenz-text{display:grid;gap:var(--s4);align-content:center}
.referenz-meta{display:flex;align-items:center;gap:var(--s3);color:var(--fg-3);flex-wrap:wrap}
.referenz-meta .strich{width:18px;height:1px;background:var(--line-2)}
.referenz-text h3{
  font-family:var(--disp);font-weight:800;font-stretch:112%;
  font-size:clamp(1.75rem,3.2vw,2.75rem);letter-spacing:-.035em;
  text-transform:uppercase;line-height:.95;
}
.referenz-text p{color:var(--fg-2);max-width:44ch}
.referenz-link{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  color:var(--blue-hi);font-weight:600;width:fit-content;
  border-bottom:1px solid transparent;
  transition:border-color var(--t-zustand) var(--weich),gap var(--t-zustand) var(--aus);
}
@media (hover:hover) and (pointer:fine){
  .referenz-link:hover{border-color:var(--blue-hi);gap:.8rem}
}

/* Karte ohne Bild: gestaltete Fläche statt kaputtes Bild */
.referenz-platz{
  position:relative;display:grid;place-items:center;gap:var(--s4);
  width:100%;height:100%;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(26,110,224,.15), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px);
  color:var(--fg-3);text-align:center;padding:var(--s8);
}
.referenz-platz svg{color:var(--blue-hi)}
.referenz-platz .mono{color:var(--fg-2)}
.platz-punkte{display:flex;gap:6px}
.platz-punkte span{
  width:5px;height:5px;border-radius:50%;background:var(--blue-hi);
  animation:tippen 1.5s var(--weich) infinite;
}
.platz-punkte span:nth-child(2){animation-delay:.2s}
.platz-punkte span:nth-child(3){animation-delay:.4s}
@keyframes tippen{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ── 11 FAQ ──────────────────────────────────────────────────────────── */
.faq-liste{display:grid;gap:0;max-width:960px}
.frage{border-top:1px solid var(--line)}
.frage:last-child{border-bottom:1px solid var(--line)}
.frage summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding:var(--s6) 0;cursor:pointer;list-style:none;
  font-size:var(--t-lg);font-weight:600;line-height:1.4;
  min-height:56px;
  transition:color var(--t-zustand) var(--weich);
}
.frage summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){ .frage summary:hover{color:var(--blue-hi)} }
.frage-kreuz{
  flex:none;width:28px;height:28px;position:relative;
  border:1px solid var(--line-2);border-radius:50%;
  transition:border-color var(--t-zustand) var(--weich),transform var(--t-flaeche) var(--aus);
}
.frage-kreuz::before,.frage-kreuz::after{
  content:"";position:absolute;inset:50% auto auto 50%;
  width:11px;height:1.5px;background:var(--fg-2);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform var(--t-flaeche) var(--aus),background var(--t-zustand) var(--weich);
}
.frage-kreuz::after{transform:translate(-50%,-50%) rotate(90deg)}
.frage[open] .frage-kreuz{border-color:var(--blue-hi);transform:rotate(135deg)}
.frage[open] .frage-kreuz::before,.frage[open] .frage-kreuz::after{background:var(--blue-hi)}
.frage-antwort{padding:0 0 var(--s8);max-width:70ch;color:var(--fg-2)}
.frage[open] .frage-antwort{animation:aufklappen var(--t-flaeche) var(--aus) both}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 12 Kontakt ──────────────────────────────────────────────────────── */
#contact{overflow:clip}
#contact::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 40% at 78% 18%, rgba(26,110,224,.20), transparent 70%),
    radial-gradient(40% 34% at 12% 92%, rgba(0,192,224,.09), transparent 72%);
}
#contact > .rahmen{position:relative;z-index:1}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,34ch) minmax(0,1fr);gap:var(--s16)}
@media (max-width:900px){ .kontakt-raster{grid-template-columns:1fr;gap:var(--s12)} }

.kontakt-daten{display:grid;gap:var(--s8);align-content:start}
.kontakt-block{display:grid;gap:var(--s2)}
.kontakt-block dt{color:var(--fg-3);font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase}
.kontakt-block dd{font-size:var(--t-lg);line-height:1.45}
.kontakt-block a{
  border-bottom:1px solid var(--line-2);
  transition:color var(--t-zustand) var(--weich),border-color var(--t-zustand) var(--weich);
  display:inline-block;min-height:32px;
}
@media (hover:hover) and (pointer:fine){
  .kontakt-block a:hover{color:var(--blue-hi);border-color:var(--blue-hi)}
}
.kontakt-zusage{
  display:flex;gap:var(--s3);align-items:flex-start;
  border:1px solid var(--line-blue);border-radius:var(--r2);
  background:rgba(26,110,224,.07);padding:var(--s4) var(--s5);
  color:var(--fg-2);font-size:var(--t-base);
}
.kontakt-zusage svg{color:var(--blue-hi);flex:none;margin-top:3px}

/* Formular */
.formular{
  display:grid;gap:var(--s5);
  background:var(--ink-800);border:1px solid var(--line-2);border-radius:var(--r3);
  padding:clamp(1.5rem,4vw,2.75rem);
  box-shadow:var(--schatten);
}
.feldpaar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
@media (max-width:620px){ .feldpaar{grid-template-columns:1fr} }
.feld{display:grid;gap:var(--s2)}
.feld label{font-size:var(--t-sm);font-weight:600;color:var(--fg-2)}
.feld label .pflicht{color:var(--blue-hi)}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;
  background:var(--ink-900);border:1px solid var(--line-2);border-radius:var(--r2);
  font-size:1rem;color:var(--fg);
  transition:border-color var(--t-zustand) var(--weich),background var(--t-zustand) var(--weich);
}
.feld textarea{min-height:150px;resize:vertical;line-height:1.6}
.feld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A7AEBE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.75rem}
.feld input::placeholder,.feld textarea::placeholder{color:var(--fg-3)}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--blue-hi);background:var(--ink-800)}
.feld-fehler{
  display:none;color:var(--err);font-size:var(--t-sm);
  align-items:center;gap:.4rem;
}
.feld[data-fehler="true"] .feld-fehler{display:flex}
.feld[data-fehler="true"] input,
.feld[data-fehler="true"] textarea{border-color:var(--err)}

.formular-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);justify-content:space-between}
.formular-hinweis{color:var(--fg-3);font-size:var(--t-sm);max-width:44ch}
.formular-hinweis a{
  color:var(--fg-2);border-bottom:1px solid var(--line-2);
  display:inline-block;min-height:24px;line-height:24px;  /* WCAG 2.5.8 */
  transition:color var(--t-zustand) var(--weich),border-color var(--t-zustand) var(--weich);
}
@media (hover:hover) and (pointer:fine){
  .formular-hinweis a:hover{color:var(--blue-hi);border-color:var(--blue-hi)}
}
.senden{min-width:220px;position:relative}
.senden .laeuft{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:dreht .7s linear infinite}
.senden[aria-busy="true"] .laeuft{display:block}
@keyframes dreht{to{transform:rotate(360deg)}}

.melde{
  display:none;gap:var(--s3);align-items:flex-start;
  border-radius:var(--r2);padding:var(--s4) var(--s5);font-size:var(--t-base);
}
.melde[data-art]{display:flex}
.melde[data-art="ok"]{border:1px solid rgba(61,190,122,.4);background:rgba(61,190,122,.09);color:#BDEBD1}
.melde[data-art="fehler"]{border:1px solid rgba(255,107,107,.4);background:rgba(255,107,107,.09);color:#FFD2D2}
.melde svg{flex:none;margin-top:3px}

/* ── 13 Fuß ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding-block:var(--s20) var(--s8)}
.fuss-raster{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s12);
  padding-bottom:var(--s16);
}
@media (max-width:900px){ .fuss-raster{grid-template-columns:1fr 1fr;gap:var(--s10)} }
@media (max-width:520px){ .fuss-raster{grid-template-columns:1fr} }
.fuss-marke{display:grid;gap:var(--s4);align-content:start;max-width:38ch}
.fuss-marke img{height:44px;width:auto}
.fuss-marke .fuss-platte{
  background:#F2F4F8;border-radius:var(--r2);padding:.5rem .8rem;width:fit-content;
}
.fuss-marke p{color:var(--fg-2);font-size:var(--t-base)}
.fuss-marke address{color:var(--fg-3);font-style:normal;font-size:var(--t-sm);line-height:1.8}
.fuss-spalte{display:grid;gap:var(--s3);align-content:start}
.fuss-titel{color:var(--fg);font-weight:600;font-size:var(--t-sm);margin-bottom:var(--s1)}
.fuss-spalte a{
  color:var(--fg-3);font-size:var(--t-sm);display:inline-block;min-height:32px;line-height:32px;
  transition:color var(--t-zustand) var(--weich);
}
@media (hover:hover) and (pointer:fine){ .fuss-spalte a:hover{color:var(--blue-hi)} }
.fuss-unten{
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  border-top:1px solid var(--line);padding-top:var(--s6);
  color:var(--fg-3);font-size:var(--t-sm);
}

/* ── 14 Bewegung beim Scrollen ────────────────────────────────────────────
   Die Seite soll beim Scrollen weiterlaufen – aber nichts darf NUR über
   eine Animation sichtbar werden. Deshalb ist der Ruhezustand sichtbar;
   den Auftritt setzt erst JavaScript (Klasse js) und nur, wenn der Nutzer
   Bewegung zulässt. */
@media (prefers-reduced-motion: no-preference){
  .js .auftritt{opacity:0;transform:translateY(22px)}
  .js .auftritt.da{
    opacity:1;transform:none;
    transition:opacity var(--t-auftritt) var(--weich),transform var(--t-auftritt) var(--aus);
    transition-delay:var(--verzug,0ms);
  }
}

/* Bildtiefe beim Scrollen: die Aufnahme wandert langsamer als die Seite.
   Über scroll-driven animations, ganz ohne scroll-Listener. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion: no-preference){
    .referenz-bild img{
      animation:wandern linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 100%;
    }
    @keyframes wandern{
      from{transform:translateY(-3.5%) scale(1.09)}
      to{transform:translateY(3.5%) scale(1.09)}
    }

    /* Die Karte richtet sich auf, waehrend sie ins Bild laeuft - nach dem
       Muster "Container Scroll Animation" (21st.dev, id 1081). Die Drehung
       sitzt auf dem Rahmen, nicht auf dem Bild: dort laeuft schon die
       Parallaxe, und zwei Animationen auf transform loeschen einander. */
    @media (min-width:900px){
      .referenz-bild{
        transform-origin:50% 100%;
        animation:karte-richtet-sich-auf linear both;
        animation-timeline:view(block);
        animation-range:entry 0% cover 46%;
      }
      @keyframes karte-richtet-sich-auf{
        from{transform:perspective(1500px) rotateX(15deg) translateY(28px) scale(.955)}
        to{transform:perspective(1500px) rotateX(0deg) translateY(0) scale(1)}
      }
    }
    .licht{
      animation:licht-treibt linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 100%;
    }
    @keyframes licht-treibt{
      from{transform:translateY(-4%)}
      to{transform:translateY(9%)}
    }
    .hero h1,.hero-satz,.hero-nachsatz,.hero-knoepfe,.hero-meta{
      animation:hero-hoch linear both;
      animation-timeline:view(block);
      animation-range:exit 0% exit 90%;
    }
    @keyframes hero-hoch{
      from{opacity:1;transform:none}
      to{opacity:.15;transform:translateY(-52px)}
    }
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .stroemung path{stroke-dashoffset:0}
}
@media (prefers-reduced-transparency: reduce){
  .kopfleiste-innen{background:var(--ink-900);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast: more){
  :root{--line:rgba(255,255,255,.2);--line-2:rgba(255,255,255,.4);--fg-2:#D4D9E4;--fg-3:#AEB6C6}
  .kopfleiste-innen{background:var(--ink-900)}
}
@media (forced-colors: active){
  .knopf{border:1px solid ButtonText}
  .knopf-primaer{background:ButtonFace;color:ButtonText;forced-color-adjust:none}
  .stroemung,.licht,.raster,.fortschritt{display:none}
  .leistung,.formular,.referenz-bild{border:1px solid CanvasText}
  .frage-kreuz::before,.frage-kreuz::after{background:CanvasText}
}

/* ── 15 Kleine Seiten (Danke, 404) ────────────────────────────────────── */
.mini{
  min-height:100svh;display:grid;align-content:center;justify-items:start;
  padding-block:clamp(7rem,16vh,10rem) var(--s20);position:relative;
  /* Der Lichtfaecher steht mit inset:-10% ueber beide Seitenraender
     hinaus. Im Kopfbereich schneidet die Sektion ihn ab, hier fehlte
     das - gemessen 144 Bildpunkte Querueberlauf bei 1440 px. */
  overflow:clip;
}
.mini .licht{opacity:.7}
.mini-inhalt{position:relative;z-index:2;display:grid;gap:var(--s6);max-width:60ch}
.mini h1{
  font-family:var(--disp);font-weight:800;font-stretch:115%;
  font-size:clamp(2.5rem,8vw,6rem);line-height:.9;letter-spacing:-.04em;
  text-transform:uppercase;
}
.mini p{color:var(--fg-2);font-size:var(--t-lg);max-width:52ch}
.mini-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.mini-liste{display:grid;gap:var(--s2);margin-top:var(--s4)}
.mini-liste a{
  color:var(--blue-hi);font-weight:600;min-height:40px;display:inline-flex;align-items:center;
  width:fit-content;border-bottom:1px solid transparent;
}
@media (hover:hover) and (pointer:fine){ .mini-liste a:hover{border-color:var(--blue-hi)} }
.mini-haken{
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(61,190,122,.45);background:rgba(61,190,122,.1);color:#5FD597;
}

/* ── 16 Zahlen im Orbit ───────────────────────────────────────────────────
   Ramis zweite Komponente (CommunityOrbit), von React auf CSS übertragen.
   Gleiche Bühne 1200×490, gleicher Mittelpunkt (600, 620), gleiche Radien
   492 und 404 – nur ohne framer-motion: die Bögen zeichnen sich über
   stroke-dashoffset, das Schweben läuft über die translate-Eigenschaft und
   kollidiert deshalb nicht mit dem transform des Auftritts. */
.orbit{
  padding-block:clamp(2rem,5vw,3.5rem) var(--abschnitt);
  overflow:clip;
}
.orbit-buehne{
  position:relative;width:100%;max-width:1200px;margin-inline:auto;
  height:calc(490px * var(--skala,1));
  overflow:hidden;
}
.orbit-feld{
  position:absolute;left:50%;top:0;width:1200px;height:490px;
  transform:translateX(-50%) scale(var(--skala,1));
  transform-origin:top center;
}
.orbit-boegen{
  position:absolute;inset:0;width:1200px;height:490px;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
}
.bogen{
  fill:none;stroke-linecap:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;
}
.orbit.da .bogen{animation:bogen-ziehen 1.7s var(--aus) both}
.orbit.da .bogen-2{animation-delay:.14s}
@keyframes bogen-ziehen{ to{stroke-dashoffset:0} }

.orbit-stueck{position:absolute;transform:translate(-50%,-50%)}
.orbit-stueck > *{opacity:0;transform:scale(.72)}
.orbit.da .orbit-stueck > *{
  animation:stueck-auf .55s var(--aus) both, schweben 4.8s ease-in-out infinite;
  animation-delay:calc(.45s + var(--i) * 70ms), calc(1.1s + var(--i) * 380ms);
}
@keyframes stueck-auf{ to{opacity:1;transform:scale(1)} }
@keyframes schweben{ 0%,100%{translate:0 0} 50%{translate:0 -5px} }
@media (hover:hover) and (pointer:fine){
  .orbit-stueck > *{transition:scale var(--t-zustand) var(--aus)}
  .orbit-stueck:hover > *{scale:1.07}
}

.orbit-chip{
  display:inline-flex;align-items:center;min-height:30px;padding:6px 13px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:rgba(16,19,26,.9);
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.09em;
  color:var(--fg-2);white-space:nowrap;box-shadow:var(--schatten);
}
.orbit-status{
  display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 14px;
  border-radius:var(--r-pill);
  border:1px solid rgba(0,192,224,.45);background:rgba(0,192,224,.13);
  color:#96E7F6;font-size:.82rem;font-weight:600;white-space:nowrap;
  box-shadow:var(--schatten);
}
.orbit-kachel{
  position:relative;display:grid;place-items:center;width:56px;height:56px;
  border-radius:14px;border:1px solid var(--line-2);background:var(--ink-800);
  color:var(--blue-hi);box-shadow:var(--schatten);
}
.orbit-marke{
  position:absolute;right:-12px;bottom:-9px;
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.05em;
  color:var(--fg-2);background:var(--ink-700);border:1px solid var(--line-2);
  border-radius:5px;padding:2px 7px;white-space:nowrap;
}
.orbit-haken{
  display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(61,142,245,.5);background:rgba(26,110,224,.18);
  color:var(--blue-hi);box-shadow:var(--schatten);
}

.orbit-zahlen{
  position:absolute;left:50%;top:372px;transform:translateX(-50%);
  display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:64px;
  text-align:center;
}
.orbit-zahl b{
  display:block;font-family:var(--disp);font-weight:700;font-stretch:112%;
  font-size:52px;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;   /* "100 %" darf nie zwischen Zahl und Zeichen brechen */
}
.orbit-zahl i{font-style:normal;color:var(--blue-hi)}
.orbit-zahl > span.mono{display:block;margin-top:15px;color:var(--fg-3)}

.orbit-satz{
  margin:clamp(1.25rem,3vw,2.25rem) auto 0;max-width:36ch;text-align:center;
  font-family:var(--body);font-weight:400;
  font-size:clamp(1.2rem,2.5vw,1.9rem);line-height:1.28;letter-spacing:-.015em;
  color:var(--fg);text-wrap:balance;
}
.orbit-satz em{font-style:normal;font-weight:600;color:var(--blue-hi)}

.orbit-wege{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
.orbit-weg{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:6px 18px 6px 6px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--ink-850);
  font-size:var(--t-sm);font-weight:600;color:var(--fg-2);
  transition:color var(--t-zustand) var(--weich),
             border-color var(--t-zustand) var(--weich),
             transform var(--t-zustand) var(--aus);
}
.orbit-weg > span{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(26,110,224,.2);color:var(--blue-hi);flex:none;
  transition:background var(--t-zustand) var(--weich),color var(--t-zustand) var(--weich);
}
.orbit-weg--stark{border-color:var(--line-blue);color:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .orbit-weg:hover{color:var(--fg);border-color:var(--blue-hi);transform:translateY(-2px)}
  .orbit-weg:hover > span{background:var(--blue);color:#fff}
}

/* Auf dem Handy trägt der Bogen nicht: bei 390 px müsste die Bühne auf 0,33
   schrumpfen, dann ist kein Wort mehr lesbar. Dort stehen die Zahlen als
   Raster – gezählt wird trotzdem. */
@media (max-width:820px){
  .orbit-buehne{height:auto;overflow:visible}
  .orbit-feld{position:static;width:auto;height:auto;transform:none}
  .orbit-boegen,.orbit-stueck{display:none}
  .orbit-zahlen{
    position:static;transform:none;
    grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:var(--s10) var(--s4);
  }
  .orbit-zahl b{font-size:clamp(2.25rem,11vw,3rem)}
}

/* ── 17 Mehr Bewegung beim Scrollen ───────────────────────────────────────
   Rami am 15.09.2026: "ich möchte mehr auf meiner website animation haben
   und auch dieses interaktive scrollen das sich beim scrollen etwas bewegt".
   Alles hier ist an den Scrollfortschritt gekoppelt, nicht an eine Uhr –
   die Seite bewegt sich also mit dem Finger, nicht von allein. */

/* Überschriften wortweise. Die Wörter setzt JavaScript in <span>. */
/* Jedes Wort sitzt in einer Huelle, die abschneidet - das Wort schiebt
   sich heraus, statt durchsichtig aufzutauchen. Muster "Text Reveal
   (Mask)" (21st.dev, id 19257). Die Huelle traegt etwas Luft nach unten,
   sonst schneidet sie Unterlaengen ab. */
.js .worthuelle{
  display:inline-block;overflow:hidden;
  padding-bottom:.12em;margin-bottom:-.12em;
  vertical-align:bottom;
}
.js .wort{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .js .wortzeile .wort{transform:translateY(105%)}
  .js .wortzeile.da .wort{
    transform:none;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
    transition-delay:calc(var(--w) * 60ms);
  }
}

/* Die Haarlinie vor der Abschnittsmarke wächst beim Hereinscrollen. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion: no-preference){
    .kopf-marke::before{
      animation:strich-waechst linear both;
      animation-timeline:view(block);
      animation-range:entry 10% cover 28%;
    }
    @keyframes strich-waechst{ from{width:0} to{width:28px} }

    /* Leistungskarten heben sich, während sie durchs Bild laufen. */
    .leistung{
      animation:karte-hebt linear both;
      animation-timeline:view(block);
      animation-range:entry 0% cover 45%;
    }
    @keyframes karte-hebt{
      from{transform:translateY(34px);opacity:.45}
      to{transform:none;opacity:1}
    }

    /* Die Textspalte einer Referenz zieht seitlich nach - nur im
       zweispaltigen Layout. Einspaltig wuerde der Versatz die Seite
       breiter machen (gemessen: 14 px Ueberhang bei 390 px). */
    @media (min-width:900px){
      .referenz:nth-child(odd) .referenz-text{--seite:34px}
      .referenz:nth-child(even) .referenz-text{--seite:-34px}
      .referenz-text{
        animation:text-zieht linear both;
        animation-timeline:view(block);
        animation-range:entry 5% cover 42%;
      }
    }
    @keyframes text-zieht{
      from{transform:translateX(var(--seite,30px));opacity:.35}
      to{transform:none;opacity:1}
    }



    /* Der Fuß steigt zum Schluss auf. */
    .fuss-raster{
      animation:fuss-steigt linear both;
      animation-timeline:view(block);
      animation-range:entry 0% entry 90%;
    }
    @keyframes fuss-steigt{
      from{transform:translateY(40px);opacity:.3}
      to{transform:none;opacity:1}
    }
  }
}

/* Das Licht im Hero folgt dem Zeiger – nur mit echter Maus, nie auf
   Touch (dort gäbe es keinen Zeiger, nur Ruckeln). JavaScript setzt
   --zx und --zy zwischen -1 und 1. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .hero .licht{
    translate:calc(var(--zx,0) * 26px) calc(var(--zy,0) * 18px);
    transition:translate 700ms cubic-bezier(.22,1,.36,1);
  }
  .stroemung{
    translate:calc(var(--zx,0) * -12px) calc(var(--zy,0) * -8px);
    transition:translate 900ms cubic-bezier(.22,1,.36,1);
  }
}

@media (prefers-reduced-motion: reduce){
  .orbit .bogen{stroke-dashoffset:0}
  .orbit-stueck > *{opacity:1;transform:none}
  .js .wortzeile .wort{opacity:1;transform:none}
}
@media (forced-colors: active){
  .orbit-boegen{display:none}
  .orbit-chip,.orbit-status,.orbit-kachel,.orbit-haken,.orbit-weg{border:1px solid CanvasText}
}

/* ── 18 Prozess: angehefteter Ablauf ──────────────────────────────────────
   Das eigentliche Scroll-Kino. Die Bahn ist vier Bildschirme hoch, die
   Bühne bleibt darin stehen (position:sticky), und der Schrittwechsel hängt
   am Scrollfortschritt – nicht an einer Uhr. Wer zurückscrollt, sieht den
   Ablauf rückwärts.

   Ohne JavaScript bleibt data-aktiv auf 1; damit das dann nicht drei Blätter
   verschluckt, schaltet .ablauf-buehne:not([data-bereit]) auf die Liste um. */
.ablauf{padding-block:0;border-top:1px solid var(--line)}

.ablauf-bahn{position:relative;height:calc(4 * 92svh);min-height:calc(4 * 620px)}
.ablauf-buehne{
  position:sticky;top:0;height:100svh;min-height:640px;
  display:grid;align-content:center;overflow:clip;
}
.ablauf-buehne::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 78% 26%, rgba(26,110,224,.16), transparent 70%),
    radial-gradient(38% 34% at 14% 82%, rgba(0,192,224,.08), transparent 72%);
}
.ablauf-raster{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:center;
}

.ablauf-links{display:grid;gap:var(--s4);align-content:center}
.ablauf-links h2{font-size:clamp(1.9rem,4vw,3.25rem)}
.ablauf-vorwort{color:var(--fg-2);max-width:34ch;margin-bottom:var(--s4)}

.ablauf-punkte{display:grid;gap:var(--s1)}
.ablauf-punkte li{
  display:flex;align-items:center;gap:var(--s4);
  padding:.55rem .75rem;border-radius:var(--r2);
  color:var(--fg-3);
  transition:color var(--t-flaeche) var(--weich),background var(--t-flaeche) var(--weich);
}
.ablauf-punkt-nr{
  font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.ablauf-punkt-text{font-weight:600;font-size:var(--t-base)}
.ablauf-buehne[data-aktiv="1"] .ablauf-punkte li[data-punkt="1"],
.ablauf-buehne[data-aktiv="2"] .ablauf-punkte li[data-punkt="2"],
.ablauf-buehne[data-aktiv="3"] .ablauf-punkte li[data-punkt="3"],
.ablauf-buehne[data-aktiv="4"] .ablauf-punkte li[data-punkt="4"]{
  color:var(--fg);background:rgba(61,142,245,.12);
}
.ablauf-buehne[data-aktiv="1"] .ablauf-punkte li[data-punkt="1"] .ablauf-punkt-nr,
.ablauf-buehne[data-aktiv="2"] .ablauf-punkte li[data-punkt="2"] .ablauf-punkt-nr,
.ablauf-buehne[data-aktiv="3"] .ablauf-punkte li[data-punkt="3"] .ablauf-punkt-nr,
.ablauf-buehne[data-aktiv="4"] .ablauf-punkte li[data-punkt="4"] .ablauf-punkt-nr{
  color:var(--cyan);
}

.ablauf-schiene{
  position:relative;height:2px;background:var(--line-2);border-radius:2px;
  margin-top:var(--s6);overflow:hidden;
}
.ablauf-schiene i{
  position:absolute;inset:0 auto 0 0;display:block;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform-origin:0 50%;transform:scaleX(var(--p,0));
}

/* Die vier Blätter liegen übereinander; nur das aktive steht im Bild. */
.ablauf-rechts{position:relative;display:grid;min-height:26rem}
.ablauf-blatt{
  grid-area:1/1;position:relative;
  display:grid;gap:var(--s4);align-content:center;
  background:var(--ink-850);border:1px solid var(--line-2);border-radius:var(--r3);
  padding:clamp(1.75rem,4vw,3rem);
  box-shadow:var(--schatten-hoch);
  opacity:0;visibility:hidden;transform:translateY(26px) scale(.985);
  transition:opacity var(--t-flaeche) var(--weich),
             transform 520ms var(--aus),
             visibility var(--t-flaeche);
}
.ablauf-buehne[data-aktiv="1"] .ablauf-blatt[data-schritt="1"],
.ablauf-buehne[data-aktiv="2"] .ablauf-blatt[data-schritt="2"],
.ablauf-buehne[data-aktiv="3"] .ablauf-blatt[data-schritt="3"],
.ablauf-buehne[data-aktiv="4"] .ablauf-blatt[data-schritt="4"]{
  opacity:1;visibility:visible;transform:none;
}
.ablauf-zeit{color:var(--cyan)}
.ablauf-gross{
  position:absolute;inset:auto var(--s6) var(--s4) auto;
  font-family:var(--disp);font-weight:800;font-stretch:118%;
  font-size:clamp(5rem,13vw,10rem);line-height:.8;letter-spacing:-.06em;
  color:rgba(255,255,255,.035);pointer-events:none;user-select:none;
}
.ablauf-blatt h3{
  font-family:var(--disp);font-weight:700;font-stretch:110%;
  font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:-.03em;text-transform:uppercase;
}
.ablauf-blatt > p{color:var(--fg-2);max-width:56ch}
.ablauf-liste{display:grid;gap:var(--s2);margin-top:var(--s2)}
.ablauf-liste li{
  position:relative;padding-left:1.6rem;color:var(--fg-2);font-size:var(--t-base);
}
.ablauf-liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--blue-hi);background:rgba(26,110,224,.25);
}

/* Fallback: solange JavaScript die Bühne nicht übernommen hat, ist das
   Anheften aus und alle vier Blätter stehen untereinander. Kein Inhalt
   darf hinter einem Scrollzustand verschwinden. */
.ablauf-buehne:not([data-bereit]){
  position:static;height:auto;min-height:0;overflow:visible;
  padding-block:var(--abschnitt);
}
.ablauf-buehne:not([data-bereit]) ~ *,
.ablauf-bahn:has(.ablauf-buehne:not([data-bereit]))
  {height:auto;min-height:0}
.ablauf-buehne:not([data-bereit]) .ablauf-raster{align-items:start}
.ablauf-buehne:not([data-bereit]) .ablauf-rechts{gap:var(--s6);min-height:0}
.ablauf-buehne:not([data-bereit]) .ablauf-blatt{
  grid-area:auto;opacity:1;visibility:visible;transform:none;
}
.ablauf-buehne:not([data-bereit]) .ablauf-schiene{display:none}

/* Schmal, aber hoch genug: der Ablauf bleibt angeheftet, nur enger
   gesetzt. Die Schritte stehen als Reihe statt als Liste. */
@media (max-width:900px) and (min-height:720px){
  .ablauf-bahn{height:calc(4 * 88svh)}
  .ablauf-buehne{min-height:0}
  .ablauf-raster{
    grid-template-columns:minmax(0,1fr);
    gap:var(--s5);align-items:stretch;align-content:center;
  }
  .ablauf-links{gap:var(--s3)}
  .ablauf-links h2{font-size:clamp(1.6rem,7vw,2.1rem)}
  .ablauf-vorwort{display:none}
  .ablauf-punkte{
    display:flex;gap:var(--s1);overflow:hidden;
  }
  .ablauf-punkte li{
    flex:1;flex-direction:column;align-items:flex-start;gap:2px;
    padding:.4rem .5rem;min-width:0;
  }
  .ablauf-punkt-text{
    font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    max-width:100%;
  }
  .ablauf-schiene{margin-top:var(--s3)}
  .ablauf-rechts{min-height:0}
  .ablauf-blatt{padding:var(--s6) var(--s5)}
  .ablauf-blatt h3{font-size:clamp(1.4rem,6vw,1.9rem)}
  .ablauf-blatt > p{font-size:.94rem;line-height:1.5}
  .ablauf-liste li{font-size:.88rem;padding-left:1.35rem}
  .ablauf-gross{font-size:clamp(3.5rem,20vw,6rem);inset:auto var(--s4) var(--s2) auto}
}

/* Zu niedrig fuer eine angeheftete Buehne: dort wuerde der Text
   abgeschnitten, und abgeschnittener Text ist schlimmer als kein
   Effekt. Dann steht alles untereinander. */
@media (max-width:900px) and (max-height:719px), (max-width:339px){
  .ablauf-bahn{height:auto;min-height:0}
  .ablauf-buehne{
    position:static;height:auto;min-height:0;overflow:visible;
    padding-block:var(--abschnitt);
  }
  .ablauf-raster{grid-template-columns:minmax(0,1fr);gap:var(--s10);align-items:start}
  .ablauf-rechts{gap:var(--s5);min-height:0}
  .ablauf-blatt{
    grid-area:auto;opacity:1;visibility:visible;transform:none;
  }
  .ablauf-schiene{display:none}
  .ablauf-punkte{display:none}
}

/* ── 19 Unterschied: stapelnde Karten ─────────────────────────────────────
   Jede Karte bleibt kurz oben stehen, die nächste schiebt sich darüber.
   Reines position:sticky – funktioniert in jedem Browser, auch ohne
   scroll-driven animations. */
.stapel{display:grid;gap:var(--s6)}
.stapel-karte{
  position:sticky;
  top:calc(96px + var(--k) * 16px);
  display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  background:var(--ink-850);
  border:1px solid var(--line-2);border-radius:var(--r3);
  padding:clamp(1.75rem,4vw,3rem);
  box-shadow:var(--schatten-hoch);
}
.stapel-karte:nth-child(2){background:var(--ink-800)}
.stapel-karte:nth-child(3){background:#12161e}
.stapel-kopf{display:grid;gap:var(--s3);align-content:start}
.stapel-nr{color:var(--cyan)}
.stapel-kopf h3{
  font-family:var(--disp);font-weight:800;font-stretch:112%;
  font-size:clamp(1.4rem,2.5vw,2.05rem);letter-spacing:-.035em;
  text-transform:uppercase;line-height:1;
  hyphens:manual;   /* "HANDCODIERT" wurde sonst zu "HANDCO-DIERT" */
}
.stapel-text{display:grid;gap:var(--s4)}
.stapel-text p{color:var(--fg-2);max-width:60ch;font-size:var(--t-md)}
.stapel-liste{display:grid;gap:var(--s2);margin-top:var(--s1)}
.stapel-liste li{
  position:relative;padding-left:1.6rem;color:var(--fg-3);font-size:var(--t-base);
}
.stapel-liste li::before{
  content:"";position:absolute;left:0;top:.66em;width:8px;height:1.5px;
  background:var(--blue-hi);
}
@media (max-width:820px){
  .stapel-karte{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .stapel{gap:var(--s4)}
  .stapel-kopf{
    display:flex;align-items:baseline;gap:var(--s3);
  }
  .stapel-kopf h3{font-size:clamp(1.3rem,5.5vw,1.8rem)}
  .stapel-text p{font-size:.98rem}
}
/* Sticky kann jedes Handy - nur bei sehr niedrigen Fenstern steht es
   im Weg. */
@media (max-width:820px) and (max-height:599px){
  .stapel-karte{position:static}
}
@media (max-width:820px) and (min-height:600px){
  .stapel-karte{top:calc(74px + var(--k) * 12px)}
}
/* Die unteren Karten treten beim Überdecken leicht zurück. */
@supports (animation-timeline:view()){
  @media (min-width:821px) and (prefers-reduced-motion: no-preference){
    .stapel-karte{
      animation:karte-tritt-zurueck linear both;
      animation-timeline:view(block);
      animation-range:exit 0% exit 100%;
    }
    @keyframes karte-tritt-zurueck{
      from{transform:none;filter:none}
      to{transform:scale(.955);filter:brightness(.72)}
    }
  }
}

/* ── 20 Zoom-Einstieg in die Referenzen ───────────────────────────────────
   Nach dem Muster "Immersive Scroll Gallery" (21st.dev, ishamsu, id 2025),
   dort mit framer-motion. Hier rechnet ein einziger rAF-Aufruf den
   Fortschritt --p aus, und die Kacheln lesen ihn aus dem CSS. Jede Kachel
   trägt ihr eigenes Ziel --s; die Skalierung ist also gescrubbt, nicht
   abgespielt: wer zurückscrollt, zoomt zurück.

   Ohne JavaScript bleibt --p bei 0, die Kacheln stehen in Originalgröße
   und der Text ist sichtbar – kein Inhalt hängt am Scrollzustand. */
.zoom{padding:0;border-top:1px solid var(--line)}
.zoom-bahn{position:relative;height:230svh;min-height:1500px}
.zoom-buehne{
  position:sticky;top:0;height:100svh;min-height:600px;
  overflow:hidden;background:var(--ink-900);
}
.zoom-buehne::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(82% 68% at 50% 50%, transparent 46%, rgba(7,8,11,.78) 100%);
}
/* Waehrend der Text kommt, legt sich der Grund darueber - sonst steht die
   Ueberschrift quer ueber einem Bildschirmfoto und ist unlesbar. */
.zoom-buehne::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:var(--ink-900);
  opacity:calc(max(0, (var(--p, 0) - .6)) * 2.6);
}

.zoom-kachel{
  position:absolute;inset:0;z-index:var(--z, 1);
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
  transform:scale(calc(1 + (var(--s) - 1) * var(--p, 0)));
  /* Deckend bleiben, sonst mischen sich acht Bilder zu einer grauen
     Flaeche. Erst am Ende ausblenden, damit der Text frei steht. */
  opacity:calc(1 - max(0, (var(--p, 0) - .56)) * 3.1);
}
.zoom-rahmen{
  position:relative;display:block;
  width:var(--b);height:var(--h);
  translate:var(--x) var(--y);
  border-radius:8px;overflow:hidden;background:var(--ink-800);
  box-shadow:0 18px 60px -22px rgba(0,0,0,1);
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;
}
.zoom-rahmen picture{display:block;width:100%;height:100%}
.zoom-rahmen img{width:100%;height:100%;object-fit:cover;object-position:top center}

.zoom-text{
  position:absolute;inset:0;z-index:4;
  display:grid;align-content:center;justify-items:start;
  width:min(100% - 2*var(--gutter), var(--breite));margin-inline:auto;
  gap:var(--s5);pointer-events:none;
}
.zoom-text h2{font-size:var(--t-h2)}
.zoom-text > *{
  opacity:calc((var(--p, 0) - .74) * 4.4);
  translate:0 calc((1 - var(--p, 0)) * 26px);
}
/* Ohne JavaScript steht --p auf 0 – dann wäre der Text unsichtbar.
   Diese Regel hebt das auf, sobald die Szene NICHT übernommen wurde. */
.zoom-bahn:not([data-bereit]) .zoom-text > *{opacity:1;translate:none}
.zoom-bahn:not([data-bereit]) .zoom-kachel{transform:none;opacity:1}
.zoom-bahn:not([data-bereit]){height:auto;min-height:0}
.zoom-bahn:not([data-bereit]) .zoom-buehne{position:static;height:auto;min-height:0;padding-block:var(--abschnitt)}

@media (max-width:820px){
  .zoom-bahn{height:190svh;min-height:1200px}
  /* Drei der acht Kacheln bleiben draussen - acht waeren auf 390 px
     nur noch Krumen. */
  .zoom-kachel:nth-child(6),
  .zoom-kachel:nth-child(7),
  .zoom-kachel:nth-child(8){display:none}
  /* Hoehe aus der Breite ableiten: die Aufnahmen sind 16:10, sonst
     werden daraus hochkante Ausschnitte. */
  .zoom-rahmen{
    width:calc(var(--b) * 2.6);
    height:calc(var(--b) * 2.6 * 0.625);
  }
  .zoom-text{justify-items:start}
  .zoom-text h2{font-size:clamp(1.9rem,9vw,2.8rem)}
}
@media (prefers-reduced-motion: reduce){
  .zoom-bahn{height:auto;min-height:0}
  .zoom-buehne{position:static;height:auto;min-height:0;padding-block:var(--abschnitt)}
  .zoom-kachel{position:relative;inset:auto;transform:none;opacity:1;display:none}
  .zoom-text{position:static;pointer-events:auto}
  .zoom-text > *{opacity:1;translate:none}
}

/* Der Referenzabschnitt trägt seine Überschrift jetzt in der Zoom-Szene. */
#portfolio{padding-top:clamp(3rem,7vw,5rem)}

/* ── 22 Weiches Scrollen ──────────────────────────────────────────────────
   Lenis setzt diese Klassen selbst. Das eigene scroll-behavior muss weg,
   sonst kaempfen beide um dieselbe Bewegung. */
html.lenis, html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ── 23 KI-Automatisierung: Bento-Raster ─────────────────────────────────
   Nach dem Muster aus Ramis Referenz (arfazrll-portfolio: BentoHero +
   MagneticEffect). Eine grosse Kachel traegt die Hauptsache, die kleinen
   die einzelnen Anwendungen.

   Die magnetische Bewegung setzt JavaScript ueber --mx/--my; ohne
   JavaScript stehen die Kacheln still und alles ist trotzdem lesbar. */
#ki{overflow:clip;position:relative}
#ki::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 38% at 82% 12%, rgba(0,192,224,.14), transparent 70%),
    radial-gradient(40% 34% at 8% 88%, rgba(26,110,224,.16), transparent 72%);
}
#ki > .rahmen{position:relative;z-index:1}

.bento{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s4);
}
.bento-kachel{
  position:relative;
  display:grid;gap:var(--s3);align-content:start;
  background:var(--ink-850);
  border:1px solid var(--line);
  border-radius:var(--r3);
  padding:clamp(1.25rem,2.6vw,2rem);
  transition:border-color var(--t-flaeche) var(--weich),
             background var(--t-flaeche) var(--weich);
}
.bento-kachel h3{
  font-family:var(--disp);font-weight:700;font-stretch:108%;
  font-size:var(--t-lg);letter-spacing:-.02em;text-transform:uppercase;
  line-height:1.05;
}
.bento-kachel p{color:var(--fg-2);font-size:var(--t-base);max-width:46ch}
.bento-symbol{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:var(--r2);
  color:var(--blue-hi);flex:none;
  transition:color var(--t-zustand) var(--weich),
             border-color var(--t-zustand) var(--weich);
}
.bento-kopf{display:flex;align-items:center;gap:var(--s4)}
.bento-kopf h3{font-size:var(--t-xl)}

.bento-kachel--gross{
  grid-column:span 2;grid-row:span 2;
  background:var(--ink-800);
}
.bento-kachel--ruf{
  background:linear-gradient(150deg, rgba(26,110,224,.16), rgba(0,192,224,.07));
  border-color:var(--line-blue);
}
.bento-kachel--ruf .knopf{margin-top:var(--s2);width:fit-content}

@media (hover:hover) and (pointer:fine){
  .bento-kachel{
    will-change:transform;
    transform:translate3d(calc(var(--mx,0) * 1px), calc(var(--my,0) * 1px), 0);
    transition:border-color var(--t-flaeche) var(--weich),
               background var(--t-flaeche) var(--weich),
               transform 420ms cubic-bezier(.22,1,.36,1);
  }
  .bento-kachel:hover{border-color:var(--line-blue);background:var(--ink-800)}
  .bento-kachel:hover .bento-symbol{color:var(--cyan);border-color:var(--line-blue)}
}

/* Der kleine Gespraechsverlauf in der grossen Kachel. Er zeigt, wie sich
   das anfuehlt, statt es zu behaupten. */
.chat{
  margin-top:auto;display:grid;gap:var(--s2);
  background:var(--ink-900);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s4);
}
.chat-zeile{display:flex}
.chat-zeile span{
  display:inline-block;max-width:84%;
  padding:.55rem .85rem;border-radius:14px;
  font-size:.92rem;line-height:1.45;
}
.chat-zeile--du{justify-content:flex-end}
.chat-zeile--du span{
  background:var(--blue);color:#fff;border-bottom-right-radius:4px;
}
.chat-zeile--ki span{
  background:var(--ink-700);color:var(--fg-2);border-bottom-left-radius:4px;
}
.chat-tipp{display:flex;gap:5px;padding:.5rem .2rem}
.chat-tipp i{
  width:6px;height:6px;border-radius:50%;background:var(--fg-3);
  animation:tippt 1.4s ease-in-out infinite;
}
.chat-tipp i:nth-child(2){animation-delay:.18s}
.chat-tipp i:nth-child(3){animation-delay:.36s}
@keyframes tippt{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2, minmax(0,1fr))}
  .bento-kachel--gross{grid-column:span 2;grid-row:auto}
}
@media (max-width:620px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento-kachel--gross{grid-column:auto}
  .bento-kopf{flex-direction:column;align-items:flex-start;gap:var(--s3)}
}
@media (prefers-reduced-motion: reduce){
  .chat-tipp i{animation:none;opacity:.5}
  .bento-kachel{transform:none !important}
}
/* ── 24 Referenzen: angeheftete Querschiene ───────────────────────────────
   Nach HorizontalScrollCarousel aus Ramis Referenz (Arfazrll/PersonalBlog,
   MIT). Dort ein fester Weg von -68 % über eine Bahn von 350vh; hier ein
   gemessener Weg, damit die letzte Karte bei jeder Fensterbreite genau
   bündig steht und nicht mal zu früh, mal zu spät.

   RUHEZUSTAND ist die Wischleiste. Das Anheften kommt erst dazu, wenn
   JavaScript läuft, das Fenster hoch genug ist und ein echter Zeiger da
   ist. Auf dem Handy bleibt es beim Wischen - eine nachgebaute
   Trägheit fühlt sich dort immer falsch an. */
.schiene{position:relative;padding-block:0}
.schiene-bahn{position:relative}
.schiene-buehne{
  display:flex;flex-direction:column;gap:var(--s8);
  padding-block:var(--abschnitt);
}
.schiene-hinweis{
  flex:none;color:var(--fg-3);font-size:var(--t-xs);
  letter-spacing:.18em;text-transform:uppercase;
  padding-inline:var(--gutter);
}

.schiene-fenster{
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.schiene-fenster::-webkit-scrollbar{display:none}
.schiene-reihe{
  display:flex;gap:var(--s6);width:max-content;
  padding-inline:var(--gutter);list-style:none;margin:0;
}

/* Angeheftet: die Bahn ist hoch, die Bühne klebt darin, die Reihe wandert. */
.js .schiene-bahn[data-bereit]{height:var(--bahnhoehe,320vh)}
.js .schiene-bahn[data-bereit] .schiene-buehne{
  position:sticky;top:0;height:100svh;justify-content:center;
  padding-block:calc(var(--kopfhoehe,96px) + var(--s8)) var(--s10);
  overflow:clip;
}
.js .schiene-bahn[data-bereit] .schiene-fenster{
  overflow:visible;scroll-snap-type:none;
}
.js .schiene-bahn[data-bereit] .schiene-reihe{
  transform:translate3d(calc(var(--p,0) * var(--weg,0px) * -1),0,0);
  will-change:transform;
}

.werk{flex:0 0 auto;width:min(420px,80vw);scroll-snap-align:center;display:flex}
/* Auf dem Handy breiter und mit weniger Innenrand: sonst bricht ein
   deutsches Kompositum wie "Carbonveredelung" mitten im Wort um. Die
   naechste Karte lugt trotzdem noch hervor - das ist das Zeichen, dass
   es seitwaerts weitergeht. */
@media (max-width:620px){
  .werk{width:min(420px,86vw)}
  .werk-inhalt{padding:var(--s5)}
  .werk-inhalt h3{font-size:1.25rem;hyphens:auto}
}
.werk-flaeche{
  position:relative;display:flex;flex-direction:column;width:100%;
  background:var(--ink-850);border:1px solid var(--line);
  border-radius:var(--r3);overflow:hidden;
  transition:border-color var(--t-flaeche) var(--weich),
             background var(--t-flaeche) var(--weich);
}
.werk-bild{position:relative;aspect-ratio:16/10;flex:none;background:var(--ink-800);overflow:hidden}
.werk-bild img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:saturate(.9);
  transition:transform 700ms var(--aus),filter var(--t-flaeche) var(--weich);
}
.werk-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--ink-850) 2%,rgba(11,13,18,.35) 40%,transparent 75%);
}
/* Spalte statt Raster: nur so schiebt `margin-top:auto` den Link an den
   Kartenboden, egal wie lang der Text darueber ist. */
.werk-inhalt{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);flex:1}
.werk-zeile{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  color:var(--fg-3);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
}
.werk-nr{color:var(--blue-hi);font-weight:700}
.werk-punkt{width:3px;height:3px;border-radius:50%;background:var(--fg-3);flex:none}
.werk-inhalt h3{
  font-family:var(--disp);font-weight:800;font-stretch:112%;
  font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.03em;
  text-transform:uppercase;line-height:1;
}
.werk-satz{color:var(--fg-2);font-size:var(--t-base)}
.werk-ruf{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  color:var(--blue-hi);font-weight:600;width:fit-content;margin-top:auto;
  border-bottom:1px solid transparent;
  transition:border-color var(--t-zustand) var(--weich),gap var(--t-zustand) var(--aus);
}
/* Die ganze Karte wird über diesen einen Link anklickbar - ein Link je
   Karte, nicht zwei ineinander. */
.werk-ruf::after{content:"";position:absolute;inset:0}

/* Ecken wie in der Vorlage: erst beim Überfahren, und nur dort, wo es
   einen Zeiger gibt. */
.werk-ecken{position:absolute;inset:10px;pointer-events:none}
.werk-ecken i{
  position:absolute;width:14px;height:14px;
  border:0 solid var(--blue-hi);opacity:0;
  transition:opacity var(--t-zustand) var(--weich),transform var(--t-zustand) var(--aus);
}
.werk-ecken i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px;transform:translate(-4px,-4px)}
.werk-ecken i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px;transform:translate(4px,-4px)}
.werk-ecken i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;transform:translate(-4px,4px)}
.werk-ecken i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;transform:translate(4px,4px)}

@media (hover:hover) and (pointer:fine){
  .werk-flaeche:hover{border-color:var(--line-blue);background:var(--ink-800)}
  .werk-flaeche:hover .werk-bild img{transform:scale(1.03);filter:saturate(1)}
  .werk-flaeche:hover .werk-ecken i{opacity:1;transform:none}
  .werk-ruf:hover{border-color:var(--blue-hi);gap:.8rem}
}
.werk-flaeche:focus-within{border-color:var(--line-blue)}
.werk-flaeche:focus-within .werk-ecken i{opacity:1;transform:none}

.schiene-fuss{
  display:flex;align-items:center;gap:var(--s6);flex:none;
}
.schiene-zaehler{color:var(--fg-3);font-size:var(--t-xs);letter-spacing:.14em;flex:none}
.schiene-zaehler b{color:var(--fg-2);font-weight:600}
.schiene-leiste{
  position:relative;height:2px;flex:1;
  background:var(--line-2);border-radius:2px;overflow:hidden;
}
.schiene-leiste i{
  position:absolute;inset:0 auto 0 0;display:block;
  width:calc(var(--p,0) * 100%);min-width:24px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
/* Ohne Anheftung sagt die Leiste nichts - dann zeigt sie sich nicht. */
.schiene-fuss{display:none}
.js .schiene-bahn[data-bereit] .schiene-fuss{display:flex}

/* ── 27 Kontakt: Felder, die man sieht ───────────────────────────────────
   Gemessen am ausgelieferten Bild: die Feldränder lagen bei rgba(255,255,255,.14)
   auf #07080B - auf dem Bildschirm des Kunden waren die Eingabefelder
   kaum vom Untergrund zu unterscheiden. Ein Formular, dessen Felder man
   suchen muss, wird nicht ausgefüllt. */
.feld input,.feld select,.feld textarea{
  border-color:rgba(255,255,255,.22);
  /* NUR die Farbe, nicht die Kurzform: `background` wuerde das
     Pfeilzeichen im Auswahlfeld mitloeschen, das als Daten-URI in
     `background-image` steckt. */
  background-color:rgba(7,8,11,.72);
}
@media (hover:hover) and (pointer:fine){
  .feld input:hover,.feld select:hover,.feld textarea:hover{
    border-color:rgba(255,255,255,.34);
  }
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-color:var(--blue-hi);background:var(--ink-800);
  box-shadow:0 0 0 3px rgba(61,142,245,.14);
}

@media (prefers-reduced-motion: reduce){
  .js .schiene-bahn[data-bereit]{height:auto}
  .js .schiene-bahn[data-bereit] .schiene-buehne{position:static;height:auto;overflow:visible}
  .js .schiene-bahn[data-bereit] .schiene-fenster{overflow-x:auto;scroll-snap-type:x mandatory}
  .js .schiene-bahn[data-bereit] .schiene-reihe{transform:none}
  .grund::before{transition:none}
}
/* ── 28 Wuchtkopf und getönte Kacheln ────────────────────────────────────
   Nach "Feature Velocity" (21st.dev, id 18901). Aus der Vorschau
   abgelesen, nicht erfunden:

     · feines diagonales Streifenmuster im Grund, sehr leise
     · Überschrift in sehr schmalen Versalien, zwei Zeilen, links
     · rechts daneben eine kurze Notiz in Schreibmaschinenschrift,
       Versalien, weit gesperrt, an der Grundlinie des Titels
     · darunter eine Haarlinie über die volle Breite
     · darunter getönte Kacheln, Inhalt am KACHELBODEN, oben nur das
       Symbolfeld und viel Ruhe

   Die Vorlage tönt Violett, Grün und Blau. Hier drei Abstufungen der
   eigenen Marke - ein fremdes Grün wäre auf dieser Seite ein Fremdkörper. */
.streifen{position:relative;overflow:clip}
.streifen::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 9px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0 55%,transparent 100%);
}
.streifen > .rahmen,
.streifen > .ablauf-bahn{position:relative;z-index:1}

.wucht{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  gap:var(--s10);align-items:end;
  padding-bottom:var(--s8);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s16);
}
.wucht-titel{
  font-size:clamp(2.25rem,6.4vw,5.25rem);
  line-height:.92;letter-spacing:-.045em;
  font-weight:800;font-stretch:88%;text-transform:uppercase;
  text-wrap:balance;
}
.wucht-notiz{
  color:var(--fg-3);font-size:var(--t-xs);line-height:1.9;
  letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:.4rem;
}
@media (max-width:820px){
  .wucht{grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:start;margin-bottom:var(--s12)}
  .wucht-notiz{line-height:1.7}
}

.wucht-kacheln{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);
}
.wkachel{
  position:relative;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s16);
  min-height:26rem;
  padding:clamp(1.5rem,2.6vw,2.25rem);
  border:1px solid var(--line-2);border-radius:18px;
  overflow:hidden;isolation:isolate;
}
/* Der Farbverlauf liegt hinter dem Inhalt, nicht als Hintergrund der
   Kachel - so kann er beim Überfahren stärker werden, ohne dass der Text
   mitwandert. */
.wkachel::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transition:opacity var(--t-flaeche) var(--weich);
}
.wkachel--a::before{background:linear-gradient(158deg,#1a2550 0%,#0C1020 58%,#080A11 100%)}
.wkachel--b::before{background:linear-gradient(158deg,#0d3350 0%,#0A1622 58%,#080A11 100%)}
.wkachel--c::before{background:linear-gradient(158deg,#123a4a 0%,#0A1820 58%,#080A11 100%)}
.wkachel-symbol{
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.14);border-radius:11px;
  background:rgba(255,255,255,.05);color:var(--fg);
}
.wkachel-fuss{display:grid;gap:var(--s3)}
.wkachel-marke{
  color:var(--fg-3);font-size:.6875rem;
  letter-spacing:.22em;text-transform:uppercase;
}
.wkachel h3{
  font-family:var(--disp);font-weight:800;font-stretch:88%;
  font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;
  text-transform:uppercase;line-height:1;
}
.wkachel-satz{color:var(--fg-2);font-size:var(--t-base)}

@media (hover:hover) and (pointer:fine){
  .wkachel{
    transform:translate3d(calc(var(--mx,0) * 1px), calc(var(--my,0) * 1px), 0);
    transition:border-color var(--t-flaeche) var(--weich),
               transform 420ms cubic-bezier(.22,1,.36,1);
  }
  .wkachel:hover{border-color:var(--line-blue)}
  .wkachel:hover::before{opacity:.72}
}
@media (max-width:980px){
  .wucht-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wkachel{min-height:22rem;gap:var(--s10)}
}
@media (max-width:640px){
  .wucht-kacheln{grid-template-columns:minmax(0,1fr)}
  .wkachel{min-height:0;gap:var(--s8)}
}

/* Der Wuchtkopf im Prozess sitzt in der angehefteten Bühne und muss dort
   schmaler bleiben - sonst passt er nicht neben die Schrittliste. */
.ablauf-links .wucht{
  grid-template-columns:minmax(0,1fr);gap:var(--s4);
  margin-bottom:var(--s8);padding-bottom:var(--s5);
}
.ablauf-links .wucht-titel{font-size:clamp(1.9rem,3.4vw,3rem)}
.ablauf-links .wucht-notiz{line-height:1.75}

/* ── 29 FAQ mit Pillen ───────────────────────────────────────────────────
   Nach "FAQ tabs" (21st.dev, id 4200): Kopf mittig, darunter eine Reihe
   Pillen, darunter die Fragen als abgerundete Zeilen mit Plus rechts.
   Die aktive Pille ist hell gefüllt mit dunkler Schrift - der einzige
   helle Fleck in der ganzen zweiten Hälfte, und deshalb wirksam.

   Ohne JavaScript stehen alle vier Gruppen untereinander; die Pillen
   werden dann gar nicht erst gezeigt. Kein Inhalt hängt an einem Klick. */
.faq-mitte{display:grid;gap:var(--s10);justify-items:center}
.faq-kopf{display:grid;gap:var(--s4);text-align:center;max-width:46rem}
.faq-kopf h2{
  font-size:clamp(2rem,5vw,3.75rem);line-height:1;
  letter-spacing:-.04em;font-weight:800;font-stretch:96%;
  text-transform:uppercase;
}
.faq-kopf .kopf-satz{margin-inline:auto;max-width:44ch}

.faq-pillen{display:none;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.js .faq-pillen{display:flex}
.faq-pille{
  min-height:44px;padding:.55rem 1.15rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:transparent;color:var(--fg-2);
  font-family:var(--body);font-size:var(--t-sm);font-weight:600;
  cursor:pointer;
  transition:background var(--t-zustand) var(--weich),
             color var(--t-zustand) var(--weich),
             border-color var(--t-zustand) var(--weich);
}
@media (hover:hover) and (pointer:fine){
  .faq-pille:hover{border-color:var(--line-blue);color:var(--fg)}
}
.faq-pille[aria-selected="true"]{
  background:linear-gradient(180deg,#FFFFFF,#D9DEE8);
  color:#0A0C11;border-color:transparent;   /* 19,56:1 – am 16.09.2026 an der Live-Seite gemessen */
}

.faq-gruppen{width:100%;max-width:56rem}
.faq-gruppe{display:grid;gap:var(--s3)}
.faq-gruppe + .faq-gruppe{margin-top:var(--s3)}
/* Erst die Browservorgabe `[hidden]{display:none}` aufheben, dann sie
   mit `.js` wieder herstellen. Andersherum bleiben ohne JavaScript drei
   der vier Gruppen verborgen - gemessen am 16.09.2026: sieben von zehn
   Fragen waren weg. */
.faq-gruppe[hidden]{display:grid}
.js .faq-gruppe[hidden]{display:none}

/* Die Fragen als eigene Flächen statt als Liste mit Trennlinien - das ist
   der sichtbarste Unterschied zur Vorlage von vorher. */
.faq-gruppe .frage{
  border:1px solid var(--line);border-radius:14px;
  background:var(--ink-850);
  padding-inline:clamp(1rem,2.2vw,1.75rem);
  transition:border-color var(--t-zustand) var(--weich),
             background var(--t-zustand) var(--weich);
}
.faq-gruppe .frage:last-child{border-bottom:1px solid var(--line)}
.faq-gruppe .frage[open]{border-color:var(--line-blue);background:var(--ink-800)}
@media (hover:hover) and (pointer:fine){
  .faq-gruppe .frage:hover{border-color:var(--line-2)}
}
.faq-gruppe .frage summary{padding-block:var(--s5)}
.faq-gruppe .frage-antwort{padding-bottom:var(--s5);max-width:66ch}

.faq-fuss{color:var(--fg-3);text-align:center}
.faq-fuss a{
  color:var(--blue-hi);border-bottom:1px solid var(--line-blue);
  display:inline-block;min-height:24px;line-height:24px;
  transition:border-color var(--t-zustand) var(--weich);
}
@media (hover:hover) and (pointer:fine){
  .faq-fuss a:hover{border-color:var(--blue-hi)}
}

@media (prefers-reduced-motion: reduce){
  .wkachel{transform:none !important}
}

/* Die beiden Fusslinks auf Danke und 404 waren 19 Bildpunkte hoch.
   WCAG 2.5.8 verlangt 24. */
.mini ~ footer .fuss-unten a,
footer .fuss-unten a{
  display:inline-block;min-height:24px;line-height:24px;
}