/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#05070a;
  --ink-2:#0a0e14;
  --panel:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.09);
  --text:#f2f4f7;
  --muted:#98a2b0;
  --accent:#4fc8e8;
  --accent-2:#f0b27a;
  --paper:#f5f5f7;
  --paper-ink:#1d1d1f;
  --paper-muted:#6e6e73;
  --r:20px;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,64px);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* z-index-Stufen an einer Stelle, damit sich Leiste, Balken und Knopf nicht
   gegenseitig verdecken:  Kopfleiste 70 | Fortschritt 80 | Sprunglink 100 */
body{
  background:var(--ink);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.6;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#04252e}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.kicker{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.6}
/* balance verteilt die Zeilen einer Ueberschrift gleichmaessig, statt die letzte
   Zeile mit einem einzelnen Wort stehen zu lassen. Die gesetzten <br> bleiben
   davon unberuehrt - sie sind gewollte Umbrueche, keine Zufallsumbrueche. */
h1,h2,h3,.claim{text-wrap:balance}
.lead,.card p,.check span,.row-txt p{text-wrap:pretty}
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1.05}
h2{font-size:clamp(30px,4.6vw,54px)}
h3{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.025em;line-height:1.2}
.lead{font-size:clamp(17px,1.55vw,20px);color:var(--muted);line-height:1.62;max-width:60ch}
.muted{color:var(--muted)}
section{position:relative}
.pad{padding-block:clamp(72px,9vw,120px)}
/* Sprungmarken halten Abstand zur festen Kopfleiste, sonst rutscht die
   Ueberschrift eines Abschnitts darunter. Mobil ist die Leiste zweizeilig
   und damit rund 78 px hoch - der Abstand muss dort groesser sein. */
section[id],div[id]{scroll-margin-top:72px}
@media(max-width:760px){section[id],div[id]{scroll-margin-top:92px}}

/* Sichtbarer Fokus fuer die Tastaturbedienung */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.light :focus-visible{outline-color:#0062c4}

/* Sprunglink: erste Station der Tabulatortaste, sichtbar nur bei Fokus.
   Erspart Tastatur- und Screenreader-Nutzern die fuenf Navigationspunkte
   auf jedem Seitenaufruf. */
.skip{position:fixed;left:-9999px;top:0;z-index:100}
.skip:focus{left:var(--pad);top:10px;padding:11px 20px;border-radius:999px;
  background:var(--text);color:#05070a;font-size:14px;font-weight:500}

/* ---------- Reveal-Animationen ----------
   Nur aktiv, wenn JavaScript laeuft (.js). Ohne JS bleibt alles sichtbar. */
.js .r{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .r.in{opacity:1;transform:none}
.js .r-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease),transform 1.3s var(--ease);transform:scale(1.04)}
.js .r-img.in{clip-path:inset(0 0 0 0);transform:none}

/* ---------- Fortschrittsbalken ---------- */
#bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .1s linear}

/* ---------- Navigation ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:70;transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s}
header::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line);opacity:0;transition:opacity .5s}
header.stuck{background:rgba(5,7,10,.62);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px)}
header.stuck::after{opacity:1}
/* Ueber der hellen Sektion dreht die Leiste ihre Farben um. Ohne das steht ein
   dunkler Glasbalken auf weissem Grund und die Navigationsschrift faellt auf
   ein Kontrastverhaeltnis von rund 2,3:1 - deutlich unter dem lesbaren Wert. */
header.on-light{background:rgba(245,245,247,.72)}
header.on-light .brand{color:var(--paper-ink)}
header.on-light .nav-links{color:#55555a}
header.on-light .nav-links a:hover,header.on-light .nav-links a.active{color:var(--paper-ink)}
header.on-light .nav-links a::after{background:#0062c4}
header.on-light .dot{background:#0062c4;box-shadow:0 0 14px rgba(0,98,196,.45)}
header.on-light::after{background:rgba(0,0,0,.12)}
header.on-light :focus-visible{outline-color:#0062c4}
nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1180px;margin:0 auto;padding:16px var(--pad);transition:padding .5s var(--ease)}
header.stuck nav{padding-block:11px}
/* Der Name steht nur am Seitenanfang. Sobald gescrollt wird, blendet er aus und
   die Leiste reduziert sich auf die Navigation. */
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.02em;font-size:15px;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
header.nobrand .brand{opacity:0;transform:translateY(-7px);pointer-events:none}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);flex:none;
  animation:pulse 3.2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
.nav-links{display:flex;gap:30px;font-size:14px;color:var(--muted)}
.nav-links a{position:relative;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--accent);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
/* Aktueller Abschnitt wird in der Leiste mitgefuehrt */
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{width:100%}

/* Mobil: Die Leiste bleibt sichtbar. Der Name steht oben, darunter die Links
   in einer eigenen Zeile - bei sehr schmalen Geraeten seitlich schiebbar. */
@media(max-width:760px){
  nav{flex-direction:column;align-items:stretch;gap:9px;padding-block:11px}
  header.stuck nav{padding-block:9px}
  /* Mobil gibt der Name seine Zeile frei, die Leiste wird wieder einzeilig */
  .brand{font-size:14px;height:20px;overflow:hidden;
    transition:opacity .45s var(--ease),transform .45s var(--ease),height .45s var(--ease),margin-bottom .45s var(--ease)}
  header.nobrand .brand{height:0;margin-bottom:-9px}
  .nav-links{
    gap:20px;font-size:13.5px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--pad) * -1);padding:1px var(--pad) 4px;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
  .nav-links a::after{bottom:-3px}
  /* Vergroessert die Tippflaeche auf rund 44 px, ohne die Leiste hoeher zu machen */
  .nav-links a::before{content:"";position:absolute;left:-7px;right:-7px;top:-11px;bottom:-11px}
}
@media(max-width:360px){.nav-links{gap:16px;font-size:13px}}

/* ---------- Hero ---------- */
/* 90svh statt voller Hoehe: Das spart dem Kopfbild rund ein Zehntel Streckung
   und laesst zugleich die Kennzahlen darunter anlesen. */
.hero{min-height:90svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
/* will-change setzt das Skript nur, solange wirklich verschoben wird - sonst
   haelt der Browser dauerhaft eine eigene Ebene je Bild im Speicher.
   Der Ueberstand fuer den Parallax liegt bei 4 statt 8 Prozent: Jeder Prozent
   Uebergroesse wird auf grossen Schirmen als zusaetzliche Streckung bezahlt.
   Eine Luecke kann dadurch nicht entstehen - sie waechst langsamer, als der
   Hero nach oben aus dem Bild laeuft. */
.hero-media{position:absolute;inset:-4% 0 -4% 0;z-index:-2}
/* Feines Korn ueber dem Bewegtbild. Die Weichheit eines hochgezogenen Films
   liest sich damit als Korn und nicht als fehlende Aufloesung. */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.11;mix-blend-mode:overlay;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23k)'/%3E%3C/svg%3E")}
/* Standbild liegt immer darunter: Es erscheint sofort und bleibt die Rueckfallebene,
   falls der Browser das Video nicht abspielt. Das Video blendet sich darueber. */
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;
/* Der Ausschnitt haelt sich an den rechten Bildrand. Die Turnerin steht im
   Film links der Mitte und rueckt dadurch nach aussen - dorthin, wo auf breiten
   Schirmen kein Text liegt. */
  object-fit:cover;object-position:80% 50%;
  transition:opacity 1.6s var(--ease),transform 2.4s var(--ease)}
.hero-media video{opacity:0}
.hero-media video.ready{opacity:1}
/* Schmale Geraete schneiden seitlich stark zu und tragen den Text ueber die
   ganze Breite. Dort rueckt der Ausschnitt so, dass die Turnerin in der rechten
   Haelfte steht - also auf der Seite, auf der der Schleier duenner ist. */
@media(max-width:700px){.hero-media img,.hero-media video{object-position:24% 50%}}
/* Vignette als eigene Ebene, damit sie nicht in jeder Verlaufsvariante des
   Schleiers mitgepflegt werden muss. Sie nimmt den Raendern die Schaerfe-
   erwartung und fuehrt den Blick zur Mitte. */
.hero-veil::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%,transparent 42%,rgba(5,7,10,.55) 100%)}
.hero-veil{position:absolute;inset:0;z-index:-1;
  transition:opacity 1.2s var(--ease);
  background:
    linear-gradient(90deg,var(--ink) 4%,rgba(5,7,10,.86) 34%,rgba(5,7,10,.32) 62%,rgba(5,7,10,.55) 100%),
    linear-gradient(to top,var(--ink) 2%,transparent 42%)}
.hero .wrap{width:100%;padding-block:120px 96px}
/* Ohne Breitenbremse: Den Umbruch des Claims setzt das <br>, nicht der Zufall
   der Fensterbreite. Begrenzt wird stattdessen der Textblock (siehe unten).
   Der doppelte Schatten faengt die hellen Stellen des Motivs ab: eng und
   schwach fuer die Kanten der Buchstaben, weit und weich als Abdunklung der
   Flaeche dahinter. Ohne ihn faellt der Kontrast im Gegenlicht der Hallen-
   fenster unter das, was fuer grosse Schrift gefordert ist. */
.hero h1{font-size:clamp(42px,5.6vw,74px);max-width:none;
  text-shadow:0 1px 3px rgba(5,7,10,.4),0 4px 30px rgba(5,7,10,.6)}

/* ---------- Kopffilm ----------
   Solange der Film laeuft, liegt der Schleier nur halb auf, das Bild steht
   leicht herangezogen und der Hero-Text fehlt noch: Der erste Bildschirm
   gehoert dem Film. Mit seinem letzten Bild ("claim") faehrt das Bild ruhig
   auf seinen Ausschnitt zurueck, der Schleier schliesst sich und der Claim
   erscheint - der Film laeuft also auf die Ueberschrift zu.
   Ohne die Klasse "kino" (Bewegung reduzieren, Datensparmodus, langsames Netz,
   schmale Geraete) greift nichts davon und alles steht wie bisher sofort. */
.kino:not(.claim) .hero-veil{opacity:.5}
.kino:not(.claim) .hero .scroll-hint{opacity:0}
.kino .hero .scroll-hint{transition:opacity 1s var(--ease) .3s}
/* Der Text faehrt von rechts ein - aus der Richtung, in der er stehenbleibt.
   Das Bild bewegt sich dabei bewusst nicht mehr: Zwei Bewegungen gleichzeitig
   liessen die Einblendung unruhig wirken. */
.kino .hero .wrap .r{transform:translateX(54px)}
.kino .hero .wrap .r.in{transform:none}
/* Ist der Film durch, blendet er auf das Standbild darunter ab. Beide zeigen
   dasselbe Bild, das Standbild aber in hoeherer Aufloesung - der Blick ruht am
   Ende also auf der schaerferen Fassung, nicht auf einem angehaltenen Film. */
.kino.claim .hero-media video{opacity:0;transition:opacity 1s var(--ease)}
/* Laeuft der Film auf Wunsch noch einmal - dann mit Ton -, kommt er wieder nach
   vorn. Der Claim bleibt dabei stehen: Er ist gesagt und muss nicht neu
   erscheinen, nur weil das Bild dahinter wieder in Bewegung geraet. */
.kino.claim.wieder .hero-media video{opacity:1}
/* Das erste Bild des Films liegt nur solange oben, bis der Film selbst da ist.
   Es blendet nicht ab, sondern wird vom Film ueberdeckt - so bleibt der
   Uebergang ohne Sprung. "display:none" ausserhalb des Kopffilm-Modus ist der
   Punkt: Nur so holt der Browser die Datei dort gar nicht erst. */
.intro-start{position:absolute;inset:0;display:none;
  background:url(img/intro-start.jpg) 80% 50%/cover no-repeat;
  background-image:image-set(url(img/intro-start.avif) type("image/avif"),
                             url(img/intro-start.webp) type("image/webp"),
                             url(img/intro-start.jpg) type("image/jpeg"))}
.kino:not(.claim) .intro-start{display:block}
/* Die zweite Zeile traegt ihren Verlauf als Hintergrund, der auf die Schrift
   zugeschnitten wird. Ein text-shadow wuerde dabei ueber diesem Verlauf landen
   und ihn zudecken - deshalb hier der Umweg ueber drop-shadow, der auf das
   fertig gezeichnete Ergebnis wirkt. */
.hero h1 .gl{
  background:linear-gradient(100deg,var(--accent),#a9d8ea 45%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:sheen 9s ease-in-out infinite;
  text-shadow:none;
  filter:drop-shadow(0 1px 3px rgba(5,7,10,.45)) drop-shadow(0 4px 26px rgba(5,7,10,.6))}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero .lead{margin-top:26px;font-size:clamp(16px,1.55vw,19px);color:#c3ccd8;max-width:52ch}
/* Folgeabsaetze ruecken enger zusammen - sie gehoeren zum selben Gedanken. */
.hero .lead + .lead{margin-top:13px}
/* Die Schlusszeile traegt den Gedanken und steht deshalb heller und fester. */
.hero .lead-hl{margin-top:20px;color:var(--text);font-weight:500;
  font-size:clamp(17px,1.7vw,21px);letter-spacing:-.01em}

/* Ab dieser Breite trennen sich Bild und Schrift sauber: Der Text sammelt sich
   rechts, die Turnerin bleibt links frei stehen - und der Schleier dreht sich
   mit, damit die dunkle Seite unter dem Text liegt und nicht ueber ihr.
   Der Block steht bewusst hier unten: Er muss die Breiten der Absaetze
   ueberschreiben, die weiter oben gesetzt werden. */
@media(min-width:900px){
  /* Etwas knapper als sonst: Der Hero traegt jetzt vier Absaetze und soll auf
     flachen Bildschirmen trotzdem samt Knoepfen in den ersten Blick passen. */
  .hero .wrap{display:flex;flex-direction:column;align-items:flex-end;padding-block:104px 84px}
  /* Eine gemeinsame Kante fuer alles - ohne das aufgehobene max-width fingen
     die Absaetze weiter rechts an als Kicker und Knoepfe. */
  .hero .wrap > *{width:min(660px,58%);max-width:none}
  /* Der Claim darf nach links ueber den Textblock hinausragen: rechts fluchtet
     er mit ihm, links bleibt er vor der Turnerin stehen. */
  .hero .wrap > h1{width:min(780px,66%)}
  /* Der Text steht zwischen 13 und 64 Prozent dieser Achse (sie laeuft von
     rechts nach links). Der dichte Teil reicht deshalb bis 70 Prozent - vorher
     war er bei 62 Prozent schon auf ein Drittel abgefallen, mitten im Text.
     Ab dort oeffnet er sich zur Turnerin hin. */
  .hero-veil{background:
    linear-gradient(270deg,var(--ink) 4%,rgba(5,7,10,.9) 40%,rgba(5,7,10,.58) 70%,rgba(5,7,10,.45) 100%),
    linear-gradient(to top,var(--ink) 2%,transparent 42%)}
}
.cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;
  font-size:15px;font-weight:500;border:1px solid transparent;
  transition:transform .35s var(--ease),background .35s,border-color .35s,box-shadow .35s}
.btn-p{background:var(--text);color:#05070a}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,255,255,.16)}
.btn-g{border-color:rgba(255,255,255,.22);color:var(--text)}
.btn-g:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
/* ---------- Ton-Knopf ----------
   Sitzt in derselben Zeile wie der Rollhinweis, nur am Rand. Gleiches Glas wie
   der Knopf zum Seitenanfang, damit er nicht wie ein Fremdkoerper wirkt. */
.ton{position:absolute;right:var(--pad);bottom:26px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:50%;
  color:rgba(255,255,255,.78);cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             color .35s var(--ease),opacity .6s var(--ease),transform .35s var(--ease)}
.ton[hidden]{display:none}
.ton:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);color:#fff;transform:translateY(-2px)}
.ton svg{flex:none}
/* Stummschaltung: Wellen aus, Kreuz an. Mit Ton genau andersherum. */
.ton .w{opacity:0;transition:opacity .3s}
.ton .x{opacity:.9;transition:opacity .3s}
.ton.an{color:#fff;border-color:rgba(79,200,232,.45);background:rgba(79,200,232,.14)}
.ton.an .w{opacity:1}
.ton.an .x{opacity:0}
/* Ohne Beschriftung traegt das Zeichen die Bedeutung allein: Lautsprecher,
   solange der Film laeuft - danach das Abspielzeichen fuer "noch einmal, mit
   Ton". Was ein Druck bewirkt, sagen aria-label und title. */
.ton .i-ton,.ton .i-play{transition:opacity .3s var(--ease)}
.ton .i-play{opacity:0}
.ton.nochmal .i-ton{opacity:0}
.ton.nochmal .i-play{opacity:1}
/* Beim Abspielzeichen faellt die Hervorhebung weg: Dort geht es nicht mehr um
   an oder aus, sondern um eine einzelne Handlung. */
.ton.nochmal{color:rgba(255,255,255,.78);background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16)}
.ton.nochmal:hover{color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
@media(max-width:700px){.ton{right:50%;transform:translateX(50%);bottom:22px}
  .ton:hover{transform:translateX(50%) translateY(-2px)}}

.scroll-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{width:1px;height:42px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
  animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Kennzahlen ---------- */
.stats{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:38px 30px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:clamp(34px,4vw,46px);font-weight:600;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(180deg,#fff,#9fb0c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{display:block;margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.45}
/* Mittlere Breiten: zwei nebeneinander, die dritte Kachel nimmt die volle
   Breite - so bleibt keine halbe Kachel allein stehen. */
@media(max-width:860px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:28px 20px;border-top:1px solid var(--line)}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(odd){border-left:0}
  .stat:last-child{grid-column:1 / -1}
}
/* Handy: untereinander, sonst wird der Text zu schmal */
@media(max-width:560px){
  .stats-grid{grid-template-columns:1fr}
  .stat:nth-child(n){border-left:0;border-top:1px solid var(--line);padding:24px 20px}
  .stat:first-child{border-top:0}
}

/* ---------- Profil ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,80px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:26px}}
.split p+p{margin-top:20px}

/* Breites Bild mit Parallax */
.band{position:relative;height:clamp(260px,46vw,520px);overflow:hidden;margin-top:clamp(50px,7vw,90px)}
.band img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,7,10,.55),rgba(5,7,10,.1) 40%,var(--ink))}
.band-cap{position:absolute;z-index:2;left:0;right:0;bottom:clamp(22px,4vw,44px)}
.band-cap p{font-size:clamp(19px,2.6vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.15;max-width:18ch}

/* ---------- Leistungen ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5.5vw,76px);align-items:center;
  padding-block:clamp(48px,7vw,86px)}
.row+.row{border-top:1px solid var(--line)}
/* Bild nach rechts. Im Quelltext steht .row-media vor .row-txt, ein negatives
   order haette es also dort gelassen, wo es ohnehin schon stand. */
.row.flip .row-media{order:1}
@media(max-width:900px){
  .row{grid-template-columns:1fr;gap:28px}
  .row.flip .row-media{order:0}
}
.row-media{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2);box-shadow:0 24px 60px rgba(0,0,0,.45)}
/* 3:2 statt 4:3 - flacher, dadurch weniger Leerraum neben dem Text und
   eine spuerbar kuerzere Seite. */
.row-media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.1s var(--ease)}
.row-media:hover img{transform:scale(1.035)}
.row-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);border-radius:var(--r)}
.row-txt h3{margin-bottom:14px}
.row-txt .claim{font-size:clamp(24px,3.1vw,36px);font-weight:600;letter-spacing:-.035em;line-height:1.12;margin-bottom:16px}
.row-txt p{color:var(--muted);max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
/* Schlagworte sind Beschriftung, kein Bedienelement. Deshalb bewusst ohne
   Anheben und ohne Schatten: Beides ist die Gebaerde eines Knopfes und
   verspricht eine Aktion, die es hier nicht gibt. Ein leiser Farbwechsel
   genuegt, damit die Flaeche unter dem Zeiger nicht tot wirkt. */
.tag{font-size:12.5px;color:#b9c3cf;padding:6px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);transition:border-color .35s,color .35s}
.tag:hover{border-color:rgba(79,200,232,.5);color:#fff}
/* Deckkraft bewusst nicht unter .85: darunter faellt der Kontrast dieser
   kleinen Schrift unter den lesbaren Wert. */
.num{font-size:12px;letter-spacing:.14em;color:var(--muted);opacity:.85;margin-bottom:10px;display:block}

/* ---------- Projekt-Highlight ---------- */
.feature{background:linear-gradient(180deg,#080b11,#05070a);border-block:1px solid var(--line)}
.feature-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
@media(max-width:900px){.feature-in{grid-template-columns:1fr}}
.feature img{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.checks{margin-top:26px;display:grid;gap:13px}
.check{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:15.5px}
.check svg{flex:none;margin-top:4px;color:var(--accent)}

/* ---------- Helle Sektion ---------- */
/* Die helle Sektion setzt oben eine weiche Kante, damit sie nicht als harter
   Schnitt aus dem Dunkeln kommt. Unten uebernimmt das Band diese Aufgabe. */
.light{background:var(--paper);color:var(--paper-ink);position:relative}
.light::before{content:"";position:absolute;inset:auto 0 100% 0;height:clamp(40px,6vw,80px);
  background:linear-gradient(to bottom,var(--ink),var(--paper));pointer-events:none}
/* #0071e3 ergab auf #f5f5f7 nur 4,31:1 und lag damit unter dem Mindestwert
   von 4,5:1 fuer kleine Schrift. #0062c4 kommt auf 5,3:1. */
.light .kicker{color:#0062c4}
.light .kicker::before{background:#0062c4}
.light .lead,.light p{color:var(--paper-muted)}
.light .pill{background:#fff;border:1px solid rgba(0,0,0,.08);color:var(--paper-ink)}
.light-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,72px);align-items:center}
@media(max-width:900px){.light-grid{grid-template-columns:1fr}}
.light-grid img{border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.14)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pill{padding:9px 17px;border-radius:999px;font-size:14px;font-weight:500;transition:border-color .35s}
.pill:hover{border-color:rgba(0,98,196,.45)}

/* ---------- Arbeitsweise ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(38px,5vw,58px)}
@media(max-width:880px){.cards{grid-template-columns:1fr}}
.card{position:relative;padding:32px 28px 34px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s,background .5s}
.card:hover{transform:translateY(-5px);border-color:rgba(79,200,232,.35)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:var(--r);pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(79,200,232,.16),transparent 62%);
  transition:opacity .5s}
.card:hover::before{opacity:1}
.card .step{font-size:12px;letter-spacing:.16em;color:var(--accent);margin-bottom:16px}
.card p{color:var(--muted);margin-top:12px;font-size:15.5px}

/* ---------- Werkzeuge ---------- */
.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
/* Gleiche Pillenform wie die Schlagworte in den Leistungen - eine Listenform weniger */
.tool{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font-size:14.5px;color:#c8d1dc;transition:background .4s,border-color .4s,color .4s}
.tool:hover{background:rgba(79,200,232,.1);border-color:rgba(79,200,232,.42);color:#fff}

/* ---------- Kontakt ---------- */
.contact{text-align:center;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;left:50%;top:-40%;width:min(900px,120vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(79,200,232,.14),transparent 62%)}
.contact h2{max-width:16ch;margin-inline:auto;position:relative}
.contact .lead{margin:22px auto 0;text-align:center}
.mail{display:inline-flex;align-items:center;gap:11px;margin-top:36px;padding:16px 32px;border-radius:999px;
  background:var(--text);color:#05070a;font-weight:500;font-size:16px;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s}
.mail:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,255,255,.18)}
/* Zweiter und dritter Weg neben der Mailadresse: Ein mailto: laeuft bei
   Webmail-Nutzern haeufig ins Leere, und wer lieber anruft, soll nicht erst
   eine Mail schreiben muessen. */
.contact-alt{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;position:relative}
.contact-alt a{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);font-size:14.5px;color:#c8d1dc;
  transition:background .35s,border-color .35s,color .35s}
.contact-alt a:hover{background:rgba(79,200,232,.1);border-color:rgba(79,200,232,.42);color:#fff}
.contact-alt svg{flex:none;color:var(--accent)}

/* ---------- Zurueck nach oben ----------
   Erscheint erst nach dem ersten Bildschirm, weil vorher der Name oben steht. */
.totop{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:60;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,20,.72);border:1px solid var(--line);color:var(--text);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,
             background .35s,border-color .35s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:rgba(79,200,232,.16);border-color:rgba(79,200,232,.5);transform:translateY(-2px)}

footer{border-top:1px solid var(--line);padding-block:30px;font-size:13.5px;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{position:relative;transition:color .3s}
.foot-links a:hover{color:var(--text)}
/* Tippflaeche auf rund 44 px vergroessern, ohne die Fusszeile hoeher zu machen */
.foot-links a::before{content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-12px}

/* ---------- Impressum / Datenschutz ---------- */
.legal{padding-block:clamp(96px,11vw,150px) clamp(56px,7vw,90px)}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:10px}
.legal h2{font-size:clamp(20px,2.4vw,26px);margin-top:clamp(38px,5vw,54px);margin-bottom:14px}
.legal h3{font-size:17px;font-weight:600;margin-top:26px;margin-bottom:8px;letter-spacing:-.015em}
.legal p,.legal li{color:var(--muted);max-width:70ch}
.legal p+p{margin-top:14px}
.legal ul{margin-top:12px;padding-left:20px;display:grid;gap:8px}
.legal a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(79,200,232,.45);transition:text-decoration-color .3s}
.legal a:not(.btn):hover{text-decoration-color:var(--accent)}
.legal address{font-style:normal;color:var(--muted);margin-top:12px;line-height:1.75}
.legal .back{margin-top:clamp(48px,6vw,72px)}
/* Noch auszufuellende Angaben sind bewusst auffaellig markiert, damit keine
   Platzhalter versehentlich online gehen. */
.todo{background:rgba(240,178,122,.14);border:1px dashed rgba(240,178,122,.55);
  color:var(--accent-2);border-radius:6px;padding:1px 7px;font-size:.92em;white-space:nowrap}
.legal-note{margin-top:clamp(40px,5vw,60px);padding:20px 22px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);font-size:14.5px}
.legal-note p{color:var(--muted);max-width:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .r,.js .r-img{opacity:1;transform:none;clip-path:none}
}