/* ============================================================
   MANOBERG - Redesign
   Leitmotiv: Farbauszüge. Das Logo ist ein rot/blaues Monogramm
   mit versetzten Druckplatten. Die ganze Seite arbeitet damit:
   Überschriften bestehen aus drei Auszügen, die einrasten.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Farbauszüge */
  --red:      #C42020;   /* Markenrot (Magenta-Platte) */
  --red-hot:  #E8352F;   /* aufgehellt für dunklen Grund */
  --blue:     #3B62D4;   /* Logo-Blau (Cyan-Platte) */
  --navy:     #000057;   /* Marken-Navy */

  /* Bogenseiten */
  --ink:      #080A14;   /* Nachtseite */
  --ink-2:    #10131F;
  --ink-3:    #1A1E2D;
  --paper:    #EDEEF2;   /* Tagseite, kalt wie Druckpapier */
  --paper-2:  #E2E4EC;
  --paper-3:  #D3D7E2;

  --fog:      #878EA6;
  --fog-2:    #5C6480;

  /* Kontextfarben, pro Sektion umgeschaltet */
  --bg:       var(--ink);
  --fg:       #F4F5F9;
  --fg-soft:  var(--fog);
  --line:     rgba(255,255,255,.10);
  --line-2:   rgba(255,255,255,.06);
  --accent:   var(--red-hot);
  --accent-2: #6E8CF0;
  --surface:  rgba(255,255,255,.035);

  /* Typografie */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Raster */
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --sec: clamp(88px, 11vw, 168px);
  --r: 18px;
  --r-lg: 26px;
  --dock-h: 68px;

  /* Bewegung */
  --e-out:   cubic-bezier(.22,.85,.24,1);
  --e-back:  cubic-bezier(.34,1.56,.44,1);
  --e-soft:  cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--dock-h) + 34px);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14.5px,17px);
  line-height:1.62;
  font-feature-settings:"ss01","cv01";
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: "hidden" macht den body zum Scroll-Container,
     und position:sticky im Inhalt klebt dann nicht mehr am Fenster.
     "clip" schneidet genauso ab, ohne einen Scroll-Container zu oeffnen. */
  overflow-x:clip;
}

img{ max-width:100%; height:auto; display:block; }
svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:var(--red-hot); color:#fff; }

:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.skiplink{
  position:fixed; top:-100px; left:14px; z-index:200;
  background:var(--red); color:#fff; padding:12px 20px; border-radius:12px;
  font-weight:600;
}
.skiplink:focus{ top:14px; }

/* ---------- 2. Bogenseiten ---------- */
.sheet{ position:relative; }

.sheet--night{
  --bg:var(--ink); --fg:#F4F5F9; --fg-soft:var(--fog);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.05);
  --accent:var(--red-hot); --accent-2:#7E99F2;
  --surface:rgba(255,255,255,.035);
  background:var(--ink); color:var(--fg);
}
.sheet--paper{
  --bg:var(--paper); --fg:#0B0E1A; --fg-soft:var(--fog-2);
  --line:rgba(10,14,30,.13); --line-2:rgba(10,14,30,.07);
  --accent:var(--red); --accent-2:var(--blue);
  --surface:rgba(255,255,255,.72);
  background:var(--paper); color:var(--fg);
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:880px; }
.section{ padding-block:var(--sec); }
.section--tight{ padding-top:0; }

/* Filmkorn - hält die dunklen Flächen davon ab, flach zu wirken */
.grain{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.wrap{ position:relative; z-index:1; }

/* Farbkontrollstreifen - echte Druckbögen tragen ihn am Rand */
.colorbar{
  position:absolute; left:0; right:0; bottom:0; height:5px; display:flex; z-index:2;
}
.colorbar::before,.colorbar::after{ content:""; }
.colorbar::before{ flex:0 0 22%; background:var(--red); }
.colorbar::after{ flex:0 0 14%; background:var(--blue); }
.colorbar{ background:linear-gradient(90deg,transparent 36%,rgba(255,255,255,.08) 36%); }

/* Passermarken */
.regmark{
  position:absolute; width:26px; height:26px; opacity:.75;
  background:
    linear-gradient(var(--red),var(--red)) center/1px 100% no-repeat,
    linear-gradient(var(--blue),var(--blue)) center/100% 1px no-repeat;
}
.regmark::after{
  content:""; position:absolute; inset:7px; border:1px solid var(--red); border-radius:50%;
}

/* ---------- 3. Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.028em;
  margin:0;
  font-variation-settings:"wdth" 92;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-soft); margin:0 0 22px;
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);
  animation:ping 2.6s var(--e-soft) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); }
  70%,100%{ box-shadow:0 0 0 11px transparent; }
}

/* --- Das Signature: Farbauszug-Überschriften --- */
.offset{
  position:relative; display:inline-block; isolation:isolate;
}
.offset::before,.offset::after{
  content:attr(data-text);
  position:absolute; inset:0; z-index:-1;
  pointer-events:none; user-select:none;
  transition:transform .9s var(--e-out), opacity .9s var(--e-out);
}
.offset::before{ color:var(--blue); transform:translate3d(-.115em,.035em,0); opacity:.8; }
.offset::after{  color:var(--red);  transform:translate3d(.10em,-.03em,0);  opacity:.8; }
.offset--hot{ color:var(--accent); }

/* eingerastet */
.offset.is-registered::before,
.offset.is-registered::after{
  transform:translate3d(0,0,0); opacity:0;
}
/* Blick-Kontakt: Auszüge fahren wieder auseinander */
.offset:hover::before{ transform:translate3d(-.16em,.03em,0); opacity:.6; }
.offset:hover::after{  transform:translate3d(.14em,-.03em,0); opacity:.6; }

/* ---------- 4. Preloader ---------- */
.boot{
  position:fixed; inset:0; z-index:300;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .6s var(--e-soft), visibility .6s;
  /* Unsichtbar, solange man auf der Seite ist. Sichtbar wird das Overlay
     einzig beim Verlassen (.is-leaving) - die ankommende Seite zeigt keines
     mehr, siehe Kommentar in app.js. Damit haengt nichts mehr davon ab,
     wie schnell ein Browser Stylesheet und Skript abarbeitet. */
  opacity:0; visibility:hidden;
}
@keyframes bootFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__marks{ position:absolute; inset:clamp(18px,4vw,42px); }
.regmark--tl{ top:0; left:0; }
.regmark--tr{ top:0; right:0; }
.regmark--bl{ bottom:0; left:0; }
.regmark--br{ bottom:0; right:0; }
.boot__marks .regmark{ opacity:0; animation:markIn .5s var(--e-out) forwards; }
.regmark--tl{ animation-delay:.05s; }
.regmark--tr{ animation-delay:.13s; }
.regmark--bl{ animation-delay:.21s; }
.regmark--br{ animation-delay:.29s; }
@keyframes markIn{ from{ opacity:0; transform:scale(.4) rotate(-25deg);} to{ opacity:.75; transform:none; } }

.boot__logo{
  position:relative;
  width:min(60vw,540px);
  aspect-ratio:900 / 415;
}
/* Die beiden Druckplatten des echten Logos, getrennt und wieder zusammengefuehrt */
.boot__plate{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  will-change:transform,opacity;
}
/* Kurz gehalten: der Vorspann haelt die Seite zurueck, er laedt nichts.
   Die Zeiten muessen unter der Anzeigedauer in app.js (600ms) bleiben,
   sonst brechen die Platten mitten in der Bewegung ab. */
.boot__plate--blue{ animation:plateBlue .52s .04s var(--e-out) both; }
.boot__plate--red{  animation:plateRed  .52s .04s var(--e-out) both; }

@keyframes plateBlue{
  0%{   transform:translate3d(-13%,4.5%,0) rotate(-2.2deg); opacity:0; }
  28%{  opacity:1; }
  100%{ transform:translate3d(-1.1%,.35%,0) rotate(0deg);   opacity:1; }
}
@keyframes plateRed{
  0%{   transform:translate3d(13%,-4.5%,0) rotate(2.2deg); opacity:0; }
  28%{  opacity:1; }
  100%{ transform:translate3d(.8%,-.25%,0) rotate(0deg);   opacity:1; }
}

/* Beim Verlassen der Seite laufen die Platten wieder auseinander. Sie bleiben
   dabei sichtbar und halten genau dort, wo die neue Seite sie aufnimmt,    dadurch wirkt der Wechsel wie eine durchgehende Bewegung. */
/* Ohne Uebergang: ein Einblenden ueber 200ms laesst die Seite waehrend
   dieser Zeit durch das halbdurchsichtige Overlay scheinen - genau das
   Aufblitzen, das der Uebergang verhindern soll. */
.boot.is-leaving{
  opacity:1; visibility:visible; transition:none;
  /* Rueckfallebene: kommt die naechste Seite nicht, raeumt sich das Overlay
     nach fuenf Sekunden selbst weg statt den Besucher auszusperren. */
  animation:bootFailsafe .01s 5s forwards;
}
.boot.is-leaving .boot__plate--blue{ animation:plateBlueOut .34s .12s var(--e-out) both; }
.boot.is-leaving .boot__plate--red{  animation:plateRedOut  .34s .12s var(--e-out) both; }
.boot.is-leaving .boot__bar{ opacity:0; transition:opacity .18s; }
.boot.is-leaving .boot__marks .regmark{ animation:none; opacity:.75; }

@keyframes plateBlueOut{
  from{ transform:translate3d(-1.1%,.35%,0) rotate(0deg); }
  to{   transform:translate3d(-13%,4.5%,0) rotate(-2.2deg); }
}
@keyframes plateRedOut{
  from{ transform:translate3d(.8%,-.25%,0) rotate(0deg); }
  to{   transform:translate3d(13%,-4.5%,0) rotate(2.2deg); }
}

.boot__bar{
  position:absolute; bottom:clamp(52px,9vw,90px); left:50%; transform:translateX(-50%);
  width:min(220px,42vw); height:2px; background:rgba(255,255,255,.13); overflow:hidden;
}
.boot__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue),var(--red));
  animation:bootBar .54s .03s var(--e-soft) forwards;
}
@keyframes bootBar{ to{ width:100%; } }

/* ---------- 5. Dock (Navigation) ---------- */
.dock{
  position:fixed; z-index:120;
  top:16px; left:50%; transform:translateX(-50%);
  width:min(calc(100vw - 28px), 1300px);
  height:var(--dock-h);
  display:flex; align-items:center; gap:14px;
  padding:0 10px 0 20px;
  border-radius:999px;
  background:rgba(10,13,24,.62);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 20px 46px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
  color:#F4F5F9;
  transition:background .5s var(--e-soft), color .5s var(--e-soft),
             border-color .5s var(--e-soft), box-shadow .5s var(--e-soft),
             transform .5s var(--e-out), opacity .35s;
}
/* Wenn das Dock über einer hellen Sektion schwebt, kippt es die Farbwelt */
.dock[data-tone="light"]{
  background:rgba(255,255,255,.74);
  border-color:rgba(10,14,30,.09);
  color:#0B0E1A;
  box-shadow:0 20px 44px -24px rgba(20,26,50,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
/* .is-hidden entfaellt: der Header bleibt stehen */

.dock__brand{ flex:0 0 auto; display:flex; align-items:center; gap:11px; }
.dock__brand img{
  height:30px; width:auto;
  filter:brightness(1.28) saturate(1.05);
  transition:filter .5s var(--e-soft), transform .5s var(--e-back);
}
.dock[data-tone="light"] .dock__brand img{ filter:none; }
.dock__brand:hover img{ transform:rotate(-2.5deg) scale(1.04); }
.dock__word{
  font-family:var(--f-display); font-weight:800; font-size:15px;
  letter-spacing:.02em; text-transform:uppercase;
  font-variation-settings:"wdth" 78;
}
@media (max-width:1180px){ .dock__word{ display:none; } }

/* Schiene */
.rail{
  position:relative; flex:1 1 auto;
  display:flex; align-items:flex-end; justify-content:center; gap:18px;
  height:100%;
}
/* --- Der Indikator: eine durchgehende Linie mit einer Kuppel über dem Ziel.
   Kein Hintergrund-Chip, damit nur eine Markierung im Spiel ist. --- */
.rail__curve{
  position:absolute; left:0; bottom:1px; z-index:0;
  width:100%; height:64px;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--e-soft);
}
.rail__curve.is-live{ opacity:1; }
/* Die Enden der Linie verlaufen weich aus, statt hart abzubrechen */
.rail__curve{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}

.rail__curve .line{
  stroke:var(--red-hot); stroke-width:2.1; fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
}
.rail__curve .glow{
  stroke:var(--red-hot); stroke-width:7; fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.3; filter:blur(5px);
}
.dock[data-rail-tone="light"] .rail__curve .line{ stroke:var(--red); stroke-width:2; }
.dock[data-rail-tone="light"] .rail__curve .glow{ opacity:.14; }

.rail__item{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:80px; height:46px; padding:0 14px 8px;
  border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  color:color-mix(in srgb,currentColor 58%,transparent);
  transition:color .34s var(--e-soft), transform .45s var(--e-back);
  white-space:nowrap;
}
.rail__item svg{ width:19px; height:19px; stroke-width:1.75; transition:transform .45s var(--e-back); }

/* ---------- Aufklappmenü "Leistungen" ----------
   Der Wrapper nimmt genau die Groesse des Menuepunkts an, damit die
   bewegliche Kuppel der Schiene (centerOf) weiterhin auf dem <a> misst und
   nicht auf einem breiteren Kasten. */
.rail__group{ position:relative; display:flex; align-items:center; }

.rail__more{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-left:-6px;
  border:0; background:transparent; color:inherit; cursor:pointer;
  opacity:.55; border-radius:50%;
  transition:opacity .3s, transform .35s var(--e-back), background .3s;
}
.rail__more svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.rail__more:hover{ opacity:1; background:color-mix(in srgb,currentColor 10%,transparent); }
.rail__group.is-open .rail__more{ opacity:1; transform:rotate(180deg); }

.rail__menu{
  position:absolute; z-index:20; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%);
  width:max-content; max-width:min(92vw, 340px);
  display:flex; flex-direction:column; gap:1px;
  padding:8px;
  border-radius:18px;
  background:rgba(12,15,27,.93);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.9);
  animation:menuIn .2s var(--e-out);
}
/* hidden muss gewinnen: eine eigene display-Regel wuerde das Menue sonst
   dauerhaft offen halten. */
.rail__menu[hidden]{ display:none; }
.dock[data-tone="light"] .rail__menu,
.dock[data-rail-tone="light"] .rail__menu{
  background:rgba(255,255,255,.95); border-color:rgba(10,14,30,.10);
  box-shadow:0 26px 50px -24px rgba(20,26,50,.5);
  color:#0B0E1A;
}
@keyframes menuIn{ from{ opacity:0; transform:translateX(-50%) translateY(-7px); } }

.rail__menu a{
  display:flex; flex-direction:column; gap:1px;
  padding:9px 13px; border-radius:12px;
  font-size:13.5px; font-weight:600; line-height:1.25;
  color:inherit; white-space:normal;
  transition:background .25s, color .25s;
}
.rail__menu a small{
  font-size:11.5px; font-weight:500; letter-spacing:.005em;
  color:color-mix(in srgb,currentColor 58%,transparent);
}
.rail__menu a:hover,
.rail__menu a:focus-visible{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--red-hot); }
.rail__menu a:hover small,
.rail__menu a:focus-visible small{ color:color-mix(in srgb,var(--red-hot) 72%,transparent); }
.rail__menu a[aria-current="page"]{ color:var(--red-hot); }
.rail__menu-alle{
  font-size:12px !important; text-transform:uppercase; letter-spacing:.08em;
  opacity:.72; padding-block:8px !important;
  border-bottom:1px solid color-mix(in srgb,currentColor 13%,transparent);
  border-radius:12px 12px 0 0 !important; margin-bottom:3px;
}

/* Das Leuchten in der Kuppel */
.rail__item::before{
  content:""; position:absolute; z-index:-1;
  left:50%; bottom:-10px; width:100%; min-width:84px; height:46px;
  transform:translateX(-50%) scaleY(.55);
  transform-origin:50% 100%;
  /* Ein diffuser Schein, der von der Grundlinie nach oben ausläuft.
     Er darf die Kuppel nicht füllen, sonst liest sie sich als Kreis. */
  background:radial-gradient(42% 62% at 50% 100%,
              color-mix(in srgb,var(--red-hot) 34%,transparent), transparent 92%);
  filter:blur(9px);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--e-soft), transform .55s var(--e-out);
}
.rail__item.is-target::before{ opacity:.85; }
.dock[data-rail-tone="light"] .rail__item::before{
  background:radial-gradient(42% 62% at 50% 100%,
              color-mix(in srgb,var(--red) 18%,transparent), transparent 92%);
  filter:blur(10px);
}

/* is-target ist das Item, unter dem die Kuppel gerade steht, beim Zeigen das
   gehoverte, sonst das aktive. So ist immer genau eines hervorgehoben. */
.rail__item.is-target{ color:var(--red-hot); }
.dock[data-rail-tone="light"] .rail__item.is-target{ color:var(--red); }
.rail__item.is-target::before{ transform:translateX(-50%) scaleY(1); }
.rail__item.is-target svg{ transform:translateY(-2px); }
.rail__item:hover{ color:var(--red-hot); }
.dock[data-rail-tone="light"] .rail__item:hover{ color:var(--red); }

.rail__dot{
  position:absolute; top:7px; right:12px;
  width:6px; height:6px; border-radius:50%;
  background:var(--blue); border:1.5px solid var(--ink);
}
.dock[data-rail-tone="light"] .rail__dot{ border-color:var(--paper); }
.rail__item.is-target .rail__dot{ background:var(--red-hot); border-color:transparent; }

.dock__end{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }

/* Verweis auf das Abo-Angebot: bewusst abgesetzt vom uebrigen Dock - eigene
   helle Flaeche mit Trennstrich davor, damit es als Fremdmarke lesbar ist und
   nicht wie ein weiterer Menuepunkt wirkt. Die Wortmarke ist dunkel gesetzt
   und braucht die helle Flaeche ohnehin, sonst verschwindet sie im dunklen Dock. */
.dock__miete{
  position:relative; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin-left:12px; padding:6px 13px 7px;
  border-radius:14px;
  background:#fff; border:1px solid rgba(10,14,30,.10);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
  transition:transform .35s var(--e-back), box-shadow .35s var(--e-soft), border-color .35s;
}
.dock__miete::before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:1px; height:24px; background:currentColor; opacity:.16;
}
.dock__miete-kicker{
  font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#7A8194; line-height:1;
}
.dock__miete img{ height:13px; width:auto; display:block; }
.dock__miete:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.55);
}
@media (max-width:1180px){
  .dock__miete-kicker{ display:none; }
  .dock__miete{ padding:7px 12px; }
}
@media (max-width:520px){ .dock__miete{ display:none; } }

.dock__icon{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line); background:transparent;
  cursor:pointer; transition:background .3s, border-color .3s, transform .4s var(--e-back);
  border-color:color-mix(in srgb,currentColor 18%,transparent);
}
.dock__icon svg{ width:18px; height:18px; }
.dock__icon:hover{ background:color-mix(in srgb,currentColor 9%,transparent); transform:scale(1.07); }

/* ---------- 6. Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  font-weight:650; font-size:14.5px; letter-spacing:-.005em;
  cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform .4s var(--e-back), box-shadow .4s var(--e-out), background .3s, color .3s, border-color .3s;
}
.btn svg{ width:17px; height:17px; transition:transform .4s var(--e-back); }
.btn:hover svg{ transform:translateX(4px); }
.btn span{ position:relative; z-index:1; }

.btn--solid{
  background:var(--red); color:#fff;
  box-shadow:0 12px 30px -14px rgba(196,32,32,.85);
}
.btn--solid::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--blue);
  transform:translateY(101%);
  transition:transform .45s var(--e-out);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(59,98,212,.75); }
.btn--solid:hover::before{ transform:translateY(0); }
.btn--solid svg{ position:relative; z-index:1; }

.btn--ghost{
  border-color:color-mix(in srgb,currentColor 26%,transparent);
  color:inherit; background:transparent;
}
.btn--ghost:hover{
  background:color-mix(in srgb,currentColor 8%,transparent);
  border-color:color-mix(in srgb,currentColor 45%,transparent);
  transform:translateY(-2px);
}
.btn--lg{ padding:16px 30px; font-size:15.5px; }
.btn--block{ width:100%; }
.dock__cta{ padding:11px 20px; font-size:13.5px; }

/* ---------- 7. Suche ---------- */
.search{
  position:fixed; inset:0; z-index:140;
  background:rgba(6,8,16,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; align-items:start; justify-items:center;
  padding:clamp(80px,14vh,150px) var(--gut) var(--gut);
  opacity:0; transition:opacity .3s var(--e-soft);
}
.search[hidden]{ display:none; }
.search.is-open{ opacity:1; }

.search__sheet{
  width:min(660px,100%);
  transform:translateY(-14px) scale(.97);
  opacity:0;
  transition:transform .45s var(--e-back), opacity .3s;
}
.search.is-open .search__sheet{ transform:none; opacity:1; }

.search__field{
  display:flex; align-items:center; gap:14px;
  padding:0 8px 0 22px; height:64px;
  border-radius:999px;
  background:#14172440; background:rgba(20,23,36,.9);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 60px -24px #000;
}
.search__field > svg{ width:20px; height:20px; color:var(--red-hot); flex:0 0 auto; }
.search__field input{
  flex:1; height:100%; border:0; background:transparent; outline:none;
  font-size:16.5px; color:#F4F5F9;
}
.search__field input::placeholder{ color:#6B7391; }
.search__field button{
  width:44px; height:44px; flex:0 0 auto; border:0; border-radius:50%;
  background:rgba(255,255,255,.07); color:#C9CEE0; cursor:pointer;
  display:grid; place-items:center; transition:background .25s, transform .3s var(--e-back);
}
.search__field button svg{ width:16px; height:16px; }
.search__field button:hover{ background:rgba(255,255,255,.14); transform:rotate(90deg); }

.search__results{ margin-top:12px; max-height:min(46vh,420px); overflow:auto; }
.search__results:empty{ display:none; }
.sres{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 20px; border-radius:14px; cursor:pointer;
  color:#E7E9F2; transition:background .2s;
}
.sres:hover,.sres.is-cursor{ background:rgba(255,255,255,.075); }
.sres strong{ font-family:var(--f-display); font-weight:700; font-size:16px; }
.sres em{ font-style:normal; color:#7C8399; font-size:13.5px; }
.sres mark{ background:transparent; color:var(--red-hot); font-weight:700; }
.sres__cat{
  margin-left:auto; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#5F6782;
}
.search__empty{ padding:22px; color:#7C8399; text-align:center; }

.search__hint{
  margin:18px 0 0; text-align:center;
  font-family:var(--f-mono); font-size:11px; color:#5F6782; letter-spacing:.06em;
}
.search__hint kbd{
  display:inline-block; padding:2px 6px; margin-right:3px;
  border:1px solid rgba(255,255,255,.16); border-radius:5px; font-size:10px;
}

/* ---------- 8. Hero ---------- */
.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--dock-h) + 70px) 110px;
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 85% at 22% 34%,#000 8%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 85% at 22% 34%,#000 8%,transparent 72%);
  animation:gridDrift 34s linear infinite;
}
@keyframes gridDrift{ to{ background-position:64px 64px, 64px 64px; } }

.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:62vw; height:62vw; max-width:820px; max-height:820px;
  right:-12vw; top:-8vw;
  background:radial-gradient(circle,rgba(196,32,32,.22),transparent 62%);
  will-change:transform;
  animation:auroraA 24s var(--e-soft) infinite alternate;
}
.hero__inner::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:48vw; height:48vw; max-width:640px; max-height:640px;
  left:-18vw; bottom:-24vw;
  background:radial-gradient(circle,rgba(59,98,212,.22),transparent 62%);
  will-change:transform;
  animation:auroraB 29s var(--e-soft) infinite alternate;
}
/* Läuft nur, solange der Hero im Bild ist */
.hero:not(.is-live)::after,
.hero:not(.is-live) .hero__inner::before{ animation-play-state:paused; }
@keyframes auroraA{ to{ transform:translate3d(-5vw,4vw,0) scale(1.14); } }
@keyframes auroraB{ to{ transform:translate3d(6vw,-5vw,0) scale(1.18); } }

.hero__inner{ position:relative; }

.hero__title{
  font-size:clamp(40px,8.4vw,112px);
  font-weight:850;
  line-height:.94;
  letter-spacing:-.038em;
  margin:0 0 30px;
  max-width:15ch;
}
.hero__title .line{
  display:block; overflow:hidden;
  padding-block:.16em; margin-block:-.11em;
}
.hero__title .offset{
  transform:translateY(102%);
  animation:lineUp 1s var(--e-out) forwards;
  animation-play-state:paused;
}
body.is-ready .hero__title .offset{ animation-play-state:running; }
.hero__title .line:nth-child(1) .offset{ animation-delay:.10s; }
.hero__title .line:nth-child(2) .offset{ animation-delay:.20s; }
.hero__title .line:nth-child(3) .offset{ animation-delay:.30s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.hero__lead{
  max-width:56ch; margin:0 0 38px;
  font-size:clamp(16.5px,1.15vw + 13px,19.5px);
  color:#B7BDD2; line-height:1.66;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:64px; }

.hero__stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; margin:0;
  border-top:1px solid var(--line);
}
.hero__stats > div{
  padding:22px 18px 4px;
  border-left:1px solid var(--line-2);
}
.hero__stats > div:first-child{ border-left:0; padding-left:0; }
@media (max-width:680px){
  .hero__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__stats > div:nth-child(odd){ border-left:0; padding-left:0; }
  .hero__stats > div:nth-child(n+3){ margin-top:20px; padding-top:20px; border-top:1px solid var(--line-2); }
}
.hero__stats dt{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fog); margin-bottom:8px;
}
.hero__stats dd{
  margin:0; font-family:var(--f-display); font-weight:800;
  font-size:clamp(30px,3.4vw,44px); letter-spacing:-.03em; line-height:1;
  font-variation-settings:"wdth" 86;
}
.hero__stats dd.is-word{ font-size:clamp(22px,2.3vw,30px); color:var(--red-hot); }

/* ---------- 9. Laufband ---------- */
.ticker{
  padding-block:20px; overflow:hidden;
  border-bottom:1px solid var(--line);
  --gap:0px;
}
.ticker__track{ display:flex; width:max-content; animation:march 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__set{ display:flex; align-items:center; flex:0 0 auto; }
.ticker__set span{
  font-family:var(--f-display); font-weight:750;
  font-size:clamp(19px,2.1vw,28px); letter-spacing:-.02em;
  padding-inline:26px; color:#0B0E1A;
  font-variation-settings:"wdth" 88;
}
.ticker__set i{ width:7px; height:7px; border-radius:50%; background:var(--red); flex:0 0 auto; }
@keyframes march{ to{ transform:translateX(-50%); } }

/* ---------- 10. Sektionskopf ---------- */
.shead{ margin-bottom:clamp(44px,5.5vw,76px); max-width:1000px; }
.shead__title{
  font-size:clamp(32px,5.2vw,66px);
  line-height:1.02; letter-spacing:-.034em; margin:0 0 22px;
}
.shead__lead{
  max-width:62ch; margin:0;
  font-size:clamp(15.5px,.7vw + 13.5px,18.5px);
  color:var(--fg-soft); line-height:1.68;
}
.shead--split{
  display:grid; gap:clamp(26px,4vw,64px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end; max-width:none;
}
@media (max-width:900px){ .shead--split{ grid-template-columns:minmax(0,1fr); align-items:start; } }

/* ---------- 11. Leistungen ---------- */
.bento{
  display:grid; gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.card{
  position:relative; grid-column:span 3;
  display:flex; flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .55s var(--e-out), box-shadow .55s var(--e-out), border-color .4s;
}
.card.card--wide{ grid-column:span 6; }
@media (min-width:1060px){
  .card{ grid-column:span 2; }
  .card.card--wide{ grid-column:span 4; }
}
@media (max-width:720px){
  .bento{ grid-template-columns:minmax(0,1fr); }
  /* Die Auswahl muss `.card.card--wide` von oben ueberbieten. Mit dem
     kuerzeren `.card--wide` bleibt dort `span 6` stehen, das Raster legt
     stillschweigend sechs Spalten an und die Karten werden unterschiedlich
     breit. Eine Medienabfrage aendert an der Spezifitaet nichts. */
  .card,
  .card.card--wide{ grid-column:1 / -1; }
}

.card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:0 26px 54px -30px rgba(12,18,44,.5);
}

/* Ein weicher Schein folgt der Maus. Er liegt ueber dem Bild, nicht ueber
   dem Text: gemessen senkt er den Kontrast des Fliesstextes von 5.6 auf 2.9
   und damit unter den Mindestwert. Im Bildbereich stoert er niemanden.
   Die Stelle kommt aus --gx/--gy, die das Skript beim Zeigen setzt; ohne
   Skript steht der Schein in der Mitte und faellt nicht auf.
   pointer-events:none ist Pflicht, sonst faengt die Flaeche Klicks ab. */
.card__media::before{
  content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none;
  opacity:0; transition:opacity .4s var(--e-soft);
  background:radial-gradient(circle 260px at var(--gx,50%) var(--gy,50%),
             color-mix(in srgb,var(--accent) 42%,transparent) 0%,
             color-mix(in srgb,var(--accent) 20%,transparent) 34%,
             color-mix(in srgb,var(--accent) 6%,transparent) 58%,
             transparent 76%);
}
.card:hover .card__media::before{ opacity:1; }
/* Ohne Zeigegeraet gibt es kein Darueberfahren. */
@media (hover:none){ .card__media::before{ display:none; } }
@media (prefers-reduced-motion:reduce){ .card__media::before{ transition:none; } }

.card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-2); }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--e-out), filter .6s;
  filter:saturate(.82) contrast(1.04);
}
.card:hover .card__media img{ transform:scale(1.055); filter:saturate(1) contrast(1.06); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,var(--bg) 2%,transparent 58%);
}

.card__body{ padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; flex:1; }
.card__tag{
  align-self:flex-start; margin-bottom:14px;
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
}
.card h3{
  font-size:clamp(23px,2.1vw,31px); margin:0 0 12px; letter-spacing:-.03em;
}
.card p{ margin:0 0 18px; color:var(--fg-soft); font-size:15.4px; }

/* Farbauszug-Trennung bei Hover - der Marken-Trick, klein dosiert */
.card[data-plate] h3{ position:relative; }
.card[data-plate] h3::before,
.card[data-plate] h3::after{
  content:attr(data-t); position:absolute; inset:0; opacity:0;
  transition:transform .5s var(--e-out), opacity .4s;
  pointer-events:none;
}
.card[data-plate]:hover h3::before{ color:var(--blue); transform:translate(-3px,1px); opacity:.55; }
.card[data-plate]:hover h3::after{  color:var(--red);  transform:translate(3px,-1px); opacity:.55; }

.ticks{ list-style:none; margin:auto 0 0; padding:0; display:grid; gap:9px; }
.ticks li{
  position:relative; padding-left:26px;
  font-size:14.4px; color:var(--fg-soft); line-height:1.5;
}
.ticks li::before{
  content:""; position:absolute; left:2px; top:.5em;
  width:11px; height:6px; border-left:1.8px solid var(--accent); border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}

.minigrid{
  /* Feste zwei Spalten: vier Punkte gehen dadurch immer als 2x2 auf. */
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
}
.minigrid > div{ padding:16px 18px; }
.minigrid > div:nth-child(odd){ border-right:1px solid var(--line-2); }
.minigrid > div:nth-child(-n+2){ border-bottom:1px solid var(--line-2); }
@media (max-width:520px){
  .minigrid{ grid-template-columns:minmax(0,1fr); }
  .minigrid > div{ border-right:0 !important; }
  .minigrid > div:not(:last-child){ border-bottom:1px solid var(--line-2); }
}
.minigrid strong{ display:block; font-size:14.5px; margin-bottom:4px; }
.minigrid span{ font-size:13.4px; color:var(--fg-soft); line-height:1.45; }

.card__pulse{
  position:absolute; inset:auto 0 0 0; height:52px; opacity:.28; pointer-events:none;
}
.card__pulse svg{ width:100%; height:100%; }
.card__pulse path{
  stroke:var(--accent); stroke-width:1.6;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:heartbeat 4.5s var(--e-soft) infinite;
}
@keyframes heartbeat{
  0%{ stroke-dashoffset:340; } 45%,100%{ stroke-dashoffset:-340; }
}

/* ---------- 12. Sichtbarkeit ---------- */
.vis{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
.vis__card{
  position:relative; padding:clamp(26px,2.8vw,38px);
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .55s var(--e-out), border-color .4s, background .4s;
  overflow:hidden;
}
.vis__card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--blue),var(--red-hot));
  transition:width .8s var(--e-out);
}
.vis__card.is-in::before{ width:100%; }
.vis__card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.2); }
.vis__num{
  display:inline-block; margin-bottom:20px;
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:.22em; color:var(--fog);
}
.vis__card--hot .vis__num{ color:var(--red-hot); }
.vis__card h3{ font-size:clamp(22px,2vw,28px); margin:0 0 14px; letter-spacing:-.028em; }
.vis__card > p{ color:var(--fg-soft); font-size:15.4px; margin:0 0 20px; }
.vis__note{
  margin-top:20px; padding-top:18px; border-top:1px dashed var(--line);
  font-size:13.6px; color:var(--fog); font-style:italic;
}
.vis__card--hot{
  background:linear-gradient(158deg,rgba(232,53,47,.10),rgba(59,98,212,.06));
  border-color:rgba(232,53,47,.28);
}

/* ---------- 13. Arbeiten ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(26px,3vw,40px); }
.chip{
  padding:9px 19px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--fg-soft);
  font-size:13.6px; font-weight:600;
  transition:all .35s var(--e-out);
}
.chip:hover{ color:var(--fg); border-color:color-mix(in srgb,var(--fg) 30%,transparent); }
.chip.is-on{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

.works{
  display:grid; gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  grid-auto-flow:dense;
}
.work{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out),
             border-color .4s, opacity .4s, filter .4s;
}
.work.is-out{ display:none; }
.work:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:0 30px 60px -34px rgba(12,18,44,.55);
}
.work figure{ margin:0; aspect-ratio:16/10; overflow:hidden; background:#0C0F1A; }
.work figure img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform 1.05s var(--e-out);
}
.work:hover figure img{ transform:scale(1.05); }
.work__meta{ padding:22px 24px 26px; }
.work__meta h3{ font-size:20px; margin:0 0 6px; letter-spacing:-.025em; }
.work__meta p{ margin:0 0 14px; font-size:14.2px; color:var(--fg-soft); }

.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tags li{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px;
  background:color-mix(in srgb,var(--fg) 7%,transparent); color:var(--fg-soft);
}

.work--flat .work__it{ display:flex; align-items:center; gap:20px; padding:26px 24px; }
.work--flat img{ width:78px; height:auto; flex:0 0 auto; }
.work__initials{
  width:62px; height:62px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--red));
  color:#fff; font-family:var(--f-display); font-weight:800; font-size:22px; letter-spacing:-.03em;
}
.work--flat h3{ font-size:18px; margin:0 0 4px; }
.work--flat p{ margin:0 0 10px; font-size:13.8px; color:var(--fg-soft); }

/* ---------- 14. Ablauf ---------- */
.steps{
  position:relative; list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.steps__line{
  position:absolute; left:0; right:0; top:12px; height:1px;
  background:var(--line); overflow:hidden;
}
@media (max-width:820px){ .steps__line{ display:none; } }
.steps__line i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue),var(--red-hot));
  transition:width 1.4s var(--e-out);
}
.steps.is-in .steps__line i{ width:100%; }

.step{ position:relative; padding-top:40px; }
.step::before{
  content:""; position:absolute; left:0; top:6px;
  width:13px; height:13px; border-radius:50%;
  background:var(--ink); border:2px solid var(--red-hot);
  transition:transform .5s var(--e-back), background .4s;
}
.step:hover::before{ transform:scale(1.35); background:var(--red-hot); }
@media (max-width:820px){ .step{ padding-left:30px; padding-top:0; } .step::before{ top:7px; } }

.step__no{
  display:block; margin-bottom:10px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog);
}
.step h3{ font-size:clamp(20px,1.8vw,25px); margin:0 0 10px; letter-spacing:-.027em; }
.step p{ margin:0 0 14px; font-size:14.8px; color:var(--fg-soft); }
.step__when{
  display:inline-block; font-family:var(--f-mono); font-size:11px;
  padding:4px 10px; border-radius:6px;
  border:1px solid var(--line); color:var(--fog);
}

/* ---------- 15. Studio ---------- */
.team{
  display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
@media (min-width:980px){
  .team{ grid-template-columns:1fr 1fr 1.35fr; }
}
.person{
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .55s var(--e-out), border-color .4s;
}
.person:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 34%,transparent); }
.person figure{ margin:0; aspect-ratio:4/5; overflow:hidden; background:#14171F; }
.person figure img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  /* Die Portraits bleiben farbig. Der Hover ist allein eine Annaeherung,
     kein Farbwechsel - deshalb darf der Zoom etwas deutlicher ausfallen. */
  transform-origin:center 30%;
  transition:transform 1.1s var(--e-out);
}
.person:hover figure img,
.person:focus-within figure img{ transform:scale(1.08); }
.person__body{ padding:22px 24px 26px; }
.person h3{ font-size:21px; margin:0 0 3px; letter-spacing:-.027em; }
.person__role{
  margin:0 0 14px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.person__lines{ margin:0; display:grid; gap:4px; font-size:14px; }
.person__lines a{ color:var(--fg-soft); transition:color .25s; width:fit-content; }
.person__lines a:hover{ color:var(--accent); }

.milestones{
  padding:clamp(24px,2.6vw,34px);
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
}
.milestones__title{
  font-family:var(--f-mono); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fog);
  margin:0 0 22px;
}
.milestones ul{ list-style:none; margin:0; padding:0; }
.milestones li{
  position:relative; padding:0 0 22px 28px;
  border-left:1px solid var(--line);
}
.milestones li:last-child{ padding-bottom:0; border-left-color:transparent; }
.milestones li::before{
  content:""; position:absolute; left:-5px; top:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent-2);
  transition:background .4s, transform .4s var(--e-back);
}
.milestones li:hover::before{ background:var(--accent-2); transform:scale(1.3); }
.milestones strong{ display:block; font-family:var(--f-display); font-size:16.5px; font-weight:750; margin-bottom:3px; letter-spacing:-.02em; }
.milestones span{ font-size:14px; color:var(--fg-soft); line-height:1.5; }

/* ---------- 16. FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:20px;
  padding:22px 4px;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(16.5px,1.2vw,20px); letter-spacing:-.024em;
  transition:color .3s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--accent); }
.qa summary span{ flex:1; }
.qa summary i{
  position:relative; width:19px; height:19px; flex:0 0 auto;
  transition:transform .45s var(--e-back);
}
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%);
}
.qa summary i::before{ width:15px; height:1.8px; }
.qa summary i::after{ width:1.8px; height:15px; transition:opacity .35s, transform .45s var(--e-back); }
.qa[open] summary i{ transform:rotate(180deg); color:var(--accent); }
.qa[open] summary i::after{ opacity:0; transform:translate(-50%,-50%) scaleY(0); }
.qa__body{
  padding:0 60px 26px 4px;
  color:var(--fg-soft); font-size:15.4px; line-height:1.68;
  animation:qaIn .45s var(--e-out);
}
.qa__body p{ margin:0; }
.qa__body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-8px); } }

/* ---------- 17. Kontakt ---------- */
.contact{
  display:grid; gap:clamp(34px,4.5vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:start;
}
@media (max-width:900px){ .contact{ grid-template-columns:minmax(0,1fr); } }

.contact__title{
  font-size:clamp(34px,5.4vw,68px); line-height:1.0;
  letter-spacing:-.036em; margin:0 0 22px;
}
.contact__lead{ max-width:44ch; color:var(--fg-soft); margin:0 0 40px; font-size:17px; }

.contact__facts{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.contact__facts li{
  padding:16px 2px;
  border-bottom:1px solid var(--line-2);
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
}
.contact__facts li:last-child{ border-bottom:0; }
.contact__k{
  flex:0 0 108px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog);
}
.contact__v{
  font-family:var(--f-display); font-weight:700; font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.024em; transition:color .3s;
}
a.contact__v:hover{ color:var(--red-hot); }

.form{
  display:grid; gap:14px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:clamp(24px,3vw,38px);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.035); border:1px solid var(--line);
}
@media (max-width:520px){ .form{ grid-template-columns:minmax(0,1fr); } }
.field{ position:relative; }
.field--full{ grid-column:1 / -1; }
.field > input,.field > textarea{
  width:100%; padding:22px 16px 9px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.03); outline:none;
  font-size:15px; color:var(--fg);
  transition:border-color .3s, background .3s, box-shadow .3s;
  resize:vertical;
}
.field > textarea{ padding-top:26px; min-height:112px; }
/* Nur direkte Kinder: die Auswahl-Chips sind selbst <label> und stecken
   eine Ebene tiefer. Ohne den Kindselektor legt diese Regel sie alle
   uebereinander auf dieselbe Koordinate. */
.field > label{
  position:absolute; left:17px; top:15px;
  font-size:14.5px; color:var(--fog); pointer-events:none;
  transform-origin:left top;
  transition:transform .28s var(--e-out), color .28s;
}
.field > label em{ font-style:normal; opacity:.6; }
.field > input:focus,.field > textarea:focus{
  border-color:var(--red-hot);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(232,53,47,.13);
}
.field > input:focus + label,
.field > input:not(:placeholder-shown) + label,
.field > textarea:focus + label,
.field > textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.76);
  color:var(--red-hot);
}
.field > textarea:focus + label,
.field > textarea:not(:placeholder-shown) + label{ transform:translateY(-7px) scale(.76); }

.picks{ border:0; margin:0; padding:0; }
.picks legend{
  padding:0 0 11px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog);
}
.picks__row{ display:flex; flex-wrap:wrap; gap:8px; }
.pick{ position:relative; display:inline-flex; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick span{
  display:inline-block; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); font-size:13.4px; color:var(--fg-soft);
  cursor:pointer; transition:all .3s var(--e-out);
}
.pick span:hover{ border-color:rgba(255,255,255,.3); color:var(--fg); }
.pick input:checked + span{
  background:var(--red); border-color:var(--red); color:#fff;
  transform:translateY(-1px);
}
.pick input:focus-visible + span{ outline:2.5px solid var(--red-hot); outline-offset:2px; }

.form__note{
  grid-column:1 / -1; margin:2px 0 0;
  font-size:12.6px; color:var(--fog); line-height:1.5;
}

/* ---------- 18. Footer ---------- */
.foot{
  background:var(--ink); color:#F4F5F9;
  --fg-soft:var(--fog); --line:rgba(255,255,255,.09);
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:clamp(52px,6vw,84px) 30px;
}
.foot__top{
  display:grid; gap:clamp(30px,4vw,52px);
  grid-template-columns:1.5fr 1fr 1fr 1.15fr;
}
@media (max-width:900px){ .foot__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:520px){ .foot__top{ grid-template-columns:minmax(0,1fr); } }
.foot__brand img{ height:44px; width:auto; margin-bottom:20px; }
.foot__brand p{ margin:0; max-width:38ch; font-size:14.4px; color:var(--fog); line-height:1.6; }
.foot__col{ display:flex; flex-direction:column; gap:9px; }
.foot__col h3{
  font-family:var(--f-mono); font-weight:500; font-size:10.5px;
  letter-spacing:.17em; text-transform:uppercase; color:#5F6782;
  margin:0 0 6px;
}
.foot__col a,.foot__col span{ font-size:14.4px; color:#AEB4C8; line-height:1.5; }
.foot__col a{ width:fit-content; position:relative; transition:color .25s; }
.foot__col a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--red-hot); transition:width .35s var(--e-out);
}
.foot__col a:hover{ color:#fff; }
.foot__col a:hover::after{ width:100%; }

.foot__social{ display:flex; gap:9px; margin-top:12px; }
.foot__social a{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  transition:background .3s, border-color .3s, transform .4s var(--e-back);
}
.foot__social a::after{ display:none; }
.foot__social svg{ width:17px; height:17px; }
.foot__social a:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }

.foot__bar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  margin-top:clamp(38px,4.5vw,60px); padding-top:24px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:13px; color:#5F6782;
}
.foot__bar p{ margin:0; }
.foot__bar nav{ display:flex; gap:22px; }
.foot__bar a{ transition:color .25s; }
.foot__bar a:hover{ color:#fff; }

/* ---------- 20. Reveal ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--e-out), transform .75s var(--e-out);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 21. Mobile Dock ---------- */
@media (max-width:900px){
  :root{ --dock-h:56px; }
  html{ scroll-padding-top:80px; }

  .dock{
    top:12px; width:calc(100vw - 20px);
    padding:0 8px 0 14px; gap:8px;
  }
  .rail{
    position:fixed; left:50%; bottom:14px; top:auto;
    transform:translateX(-50%);
    width:calc(100vw - 20px); max-width:520px;
    height:62px; padding:0 6px; gap:0;
    border-radius:999px;
    background:rgba(10,13,24,.82);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
    justify-content:space-around;
    transition:background .5s var(--e-soft), border-color .5s var(--e-soft), color .5s;
  }
  .dock[data-rail-tone="light"] .rail{
    background:rgba(255,255,255,.86);
    border-color:rgba(10,14,30,.09);
    color:#0B0E1A;
    box-shadow:0 18px 38px -20px rgba(20,26,50,.4);
  }
  .rail__item{ min-width:0; flex:1; padding:0 4px; font-size:10.5px; }
  /* Der Wrapper muss den Platz des Menuepunkts einnehmen, sonst schrumpft er
     neben den anderen Punkten zusammen. */
  .rail__group{ flex:1; min-width:0; }
  .rail__group .rail__item{ width:100%; }
  .rail__more{ display:none; }
  /* Fest zum Fenster statt zum Menuepunkt: der Punkt ist hier nur ein
     Fuenftel der Breite, ein daran zentriertes Menue haengt links heraus. */
  .rail__menu{
    position:fixed; top:auto; left:14px; right:14px; bottom:88px;
    width:auto; max-width:none; transform:none;
    /* Ueber der ganzen Seitenbreite muss die Flaeche dichter sein, sonst
       liest sich der Inhalt dahinter durch die Eintraege. */
    background:rgba(12,15,27,.985);
  }
  .dock[data-rail-tone="light"] .rail__menu{ background:rgba(255,255,255,.985); }
  @keyframes menuIn{ from{ opacity:0; transform:translateY(7px); } }
  .rail__item svg{ width:20px; height:20px; }
  .rail__curve{ bottom:8px; }
  .dock__cta span{ display:none; }
  .dock__cta{ width:42px; height:42px; padding:0; border-radius:50%; }
  .dock__cta svg{ width:17px; height:17px; }
  .dock__cta:hover svg{ transform:none; }

  body{ padding-bottom:86px; }
  .hero{ padding-block:calc(var(--dock-h) + 54px) 90px; min-height:auto; }
  .qa__body{ padding-right:14px; }
}

@media (max-width:400px){
  .rail__item span{ font-size:9.5px; }
}

/* ---------- 22. Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .offset{ transform:none; }
  .offset::before,.offset::after{ opacity:0; transform:none; }
  .ticker__track{ animation:none; }
  .boot.is-leaving{ display:none !important; }
  .steps.is-in .steps__line i{ width:100%; }
  .boot{ display:none; }
}

/* ---------- 23. Druck ---------- */
@media print{
  .dock,.search,.boot,.colorbar,.grain,.hero__grid{ display:none !important; }
  body{ background:#fff; color:#000; }
  .sheet--night{ background:#fff; color:#000; }
  .offset::before,.offset::after{ display:none; }
}

/* ============================================================
   24. Nachträge
   ============================================================ */

/* Im Hero bleiben die Auszüge als Geisterbild stehen und folgen der Maus -
   das Logo rastet ebenfalls nicht auf null ein, sondern knapp daneben. */
.hero__title .offset.is-registered::before{
  opacity:.30;
  transform:translate3d(calc(-.055em + var(--px,0px)), calc(.012em + var(--py,0px)), 0);
}
.hero__title .offset.is-registered::after{
  opacity:.30;
  transform:translate3d(calc(.045em - var(--px,0px)), calc(-.010em - var(--py,0px)), 0);
}
.hero__title .offset::before,
.hero__title .offset::after{ transition:transform .5s var(--e-out), opacity .9s var(--e-out); }

/* Suchtreffer kurz markieren */
.is-flash{ animation:flash 1.4s var(--e-soft); }
@keyframes flash{
  0%,100%{ box-shadow:0 0 0 0 transparent; }
  18%{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent); }
}
.qa.is-flash{ border-radius:10px; }

/* ---------- Dock auf kleinen Schirmen ----------
   Die Schiene wandert nach unten wie im Vorschlag. Damit ihr
   position:fixed am Viewport hängt und nicht am Dock, darf das
   Dock hier weder transform noch backdrop-filter tragen - beides
   würde einen eigenen Bezugsrahmen aufspannen. Der Glaseffekt
   sitzt deshalb auf den Kindern. */
@media (max-width:900px){
  .dock{
    left:10px; right:10px; width:auto; transform:none;
    background:transparent; border-color:transparent; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:0; gap:8px; height:auto; top:10px;
  }
  .dock.is-hidden{ transform:none; opacity:1; }
  .dock.is-hidden .dock__brand,
  .dock.is-hidden .dock__end{ opacity:0; transform:translateY(-18px); pointer-events:none; }

  .dock__brand,.dock__end{
    transition:opacity .4s var(--e-soft), transform .5s var(--e-out);
  }
  .dock__end{ margin-left:auto; }

  .dock__brand{
    padding:9px 16px; border-radius:999px;
    /* Deutlich deckender als das Dock: dort tauscht data-tone die ganze
     Farbwelt, die Leiste bleibt dagegen immer dunkel. Bei .72 wird sie
     ueber hellen Abschnitten mittelgrau und der Text darin unlesbar. */
  background:rgba(10,13,24,.93); border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    box-shadow:0 12px 28px -16px rgba(0,0,0,.8);
  }
  .dock[data-tone="light"] .dock__brand{
    background:rgba(255,255,255,.8); border-color:rgba(10,14,30,.09);
    box-shadow:0 12px 26px -18px rgba(20,26,50,.4);
  }
  .dock__brand img{ height:22px; }

  .dock__icon{
    /* Deutlich deckender als das Dock: dort tauscht data-tone die ganze
     Farbwelt, die Leiste bleibt dagegen immer dunkel. Bei .72 wird sie
     ueber hellen Abschnitten mittelgrau und der Text darin unlesbar. */
  background:rgba(10,13,24,.93); border-color:rgba(255,255,255,.10);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  }
  .dock[data-tone="light"] .dock__icon{
    background:rgba(255,255,255,.8); border-color:rgba(10,14,30,.09);
  }
  .dock__cta{ box-shadow:0 12px 28px -16px rgba(196,32,32,.9); }
}

/* Ganz schmal: Logo weg, die Schiene trägt die Orientierung */
@media (max-width:380px){
  .dock__brand img{ height:20px; }
  .dock__brand{ padding:8px 12px; }
}

/* ============================================================
   25. Weiterleitung aus den Leistungskarten
   ============================================================ */
.card__more{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--line);
  font-family:var(--f-display); font-weight:700; font-size:14.5px;
  letter-spacing:-.015em; color:var(--accent);
  transition:gap .35s var(--e-out);
}
.card__more svg{ width:16px; height:16px; transition:transform .4s var(--e-back); }
.card:hover .card__more{ gap:13px; }
.card__more:hover svg{ transform:translateX(3px); }
/* Die ganze Karte klickt sich mit, ohne den Link zu verstecken */
.card__more::after{ content:""; position:absolute; inset:0; z-index:3; }
.card{ position:relative; }

/* Freigestelltes Motiv statt Vollbild - nur die Sichtbarkeit-Karte */
.card__media--plain{
  aspect-ratio:16/10;
  display:grid; place-items:center;
  padding:26px;
  background:
    radial-gradient(120% 120% at 70% 20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),
    linear-gradient(160deg,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 70%);
}
.card__media--plain::after{ display:none; }
.card__media--plain img{
  width:auto; height:78%; max-width:70%; object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.35));
  transition:transform .9s var(--e-out);
}
.card:hover .card__media--plain img{ transform:translateY(-6px) rotate(-4deg) scale(1.04); }

/* ============================================================
   26. Startup-Banner
   ============================================================ */
.promo{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch; gap:0;
  margin-top:clamp(14px,1.5vw,20px);
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .4s;
}
.promo:hover{ border-color:color-mix(in srgb,var(--accent) 34%,transparent); }
@media (max-width:820px){ .promo{ grid-template-columns:minmax(0,1fr); } }
.promo__media{ position:relative; overflow:hidden; min-height:230px; background:var(--ink-2); }
.promo__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--e-out);
}
.promo:hover .promo__media img{ transform:scale(1.05); }
.promo__body{ padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; align-items:flex-start; }
.promo__body h3{ font-size:clamp(26px,2.7vw,40px); margin:0 0 14px; letter-spacing:-.032em; }
.promo__body p{ margin:0 0 26px; max-width:46ch; color:var(--fg-soft); font-size:15.6px; }

/* ============================================================
   27. Referenz-Detailkarte
   ============================================================ */
.work{ position:relative; }
.work{ display:flex; flex-direction:column; }
.work__meta{ flex:1; }
.work__open{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 24px 24px; padding:14px 0 0;
  border:0; border-top:1px solid var(--line);
  background:transparent; cursor:pointer; text-align:left;
  font-family:var(--f-display); font-weight:700; font-size:14px;
  letter-spacing:-.015em; color:var(--accent);
  transition:gap .35s var(--e-out), color .3s;
}
.work__open svg{
  width:15px; height:15px;
  transition:transform .45s var(--e-back);
}
.work:hover .work__open{ gap:13px; }
.work:hover .work__open svg{ transform:rotate(90deg); }
.work--flat .work__open{ margin-top:-6px; }

.sheetcard{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(5,7,14,.76);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transition:opacity .32s var(--e-soft);
}
.sheetcard[hidden]{ display:none; }
.sheetcard.is-open{ opacity:1; }

.sheetcard__inner{
  position:relative;
  width:min(880px,100%); max-height:88vh; overflow:auto;
  border-radius:var(--r-lg);
  background:#10131F; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 110px -40px #000;
  transform:translateY(20px) scale(.97); opacity:0;
  transition:transform .48s var(--e-back), opacity .3s;
  color:#F4F5F9;
  --fg-soft:#9AA1B8; --accent:var(--red-hot); --line:rgba(255,255,255,.11);
}
.sheetcard.is-open .sheetcard__inner{ transform:none; opacity:1; }

.sheetcard__x{
  position:absolute; top:14px; right:14px; z-index:4;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  /* Deutlich deckender als das Dock: dort tauscht data-tone die ganze
     Farbwelt, die Leiste bleibt dagegen immer dunkel. Bei .72 wird sie
     ueber hellen Abschnitten mittelgrau und der Text darin unlesbar. */
  background:rgba(10,13,24,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff;
  transition:background .3s, transform .4s var(--e-back);
}
.sheetcard__x svg{ width:16px; height:16px; }
.sheetcard__x:hover{ background:var(--red); border-color:var(--red); transform:rotate(90deg); }

.sheetcard__media{
  margin:0; position:relative; aspect-ratio:16/9; overflow:hidden; background:#0B0E18;
}
.sheetcard__media img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.sheetcard__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,#10131F 1%,transparent 46%);
}
/* Logos werden nicht beschnitten, sondern gestellt */
.sheetcard--logo .sheetcard__media{ aspect-ratio:21/9; display:grid; place-items:center; padding:34px; }
.sheetcard--logo .sheetcard__media img{
  width:auto; height:auto; max-height:100%; max-width:64%; object-fit:contain;
}

.sheetcard__body{ padding:clamp(22px,2.6vw,36px) clamp(22px,2.8vw,40px) clamp(28px,3vw,40px); }
.sheetcard__body h3{
  font-size:clamp(26px,3vw,38px); margin:0 0 6px; letter-spacing:-.032em;
}
.sheetcard__branche{
  margin:0 0 18px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--red-hot);
}
.sheetcard__claim{
  margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--line);
  font-size:clamp(16px,1.3vw,19px); color:#C7CCDD; line-height:1.55;
}
.sheetcard__body h4{
  font-family:var(--f-mono); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#7C8399;
  margin:0 0 14px;
}
.sheetcard__body .ticks{ margin:0 0 28px; }
.sheetcard__body .ticks li{ color:#B4BACE; font-size:15px; }
.sheetcard__link{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  background:var(--red); color:#fff;
  font-weight:650; font-size:14.5px;
  box-shadow:0 14px 32px -16px rgba(196,32,32,.9);
  transition:background .3s, transform .4s var(--e-back), box-shadow .4s;
}
.sheetcard__link svg{ width:16px; height:16px; transition:transform .4s var(--e-back); }
.sheetcard__link:hover{
  background:var(--blue); transform:translateY(-2px);
  box-shadow:0 18px 38px -16px rgba(59,98,212,.8);
}
.sheetcard__link:hover svg{ transform:translate(3px,-3px); }

/* ============================================================
   28. Unterseiten
   ============================================================ */
.subhero{
  padding-block:calc(var(--dock-h) + 76px) clamp(60px,7vw,104px);
  overflow:hidden;
}
.subhero__grid{
  display:grid; gap:clamp(30px,4vw,66px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;
}
@media (max-width:900px){ .subhero__grid{ grid-template-columns:minmax(0,1fr); } }

.crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:0 0 26px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fog);
}
.crumbs a{ transition:color .25s; }
.crumbs a:hover{ color:var(--red-hot); }
.crumbs span[aria-current]{ color:#E4E7F0; }
.crumbs i{ width:12px; height:1px; background:currentColor; opacity:.45; }

.subhero__title{
  font-size:clamp(34px,5.4vw,68px); line-height:1.0;
  letter-spacing:-.036em; margin:0 0 24px;
}
.subhero__lead{
  max-width:52ch; margin:0 0 34px;
  font-size:clamp(16.5px,1.1vw + 13px,19.5px);
  color:#B7BDD2; line-height:1.66;
}
.subhero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.subhero__art{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 44px 90px -46px #000;
  aspect-ratio:4/3;
  background:var(--ink-2);
}
.subhero__art img{ width:100%; height:100%; object-fit:cover; }
.subhero__art--plain{
  display:grid; place-items:center; padding:clamp(26px,4vw,56px);
  background:
    radial-gradient(120% 120% at 72% 18%,rgba(232,53,47,.18),transparent 60%),
    radial-gradient(100% 100% at 20% 90%,rgba(59,98,212,.16),transparent 62%),
    var(--ink-2);
}
.subhero__art--plain img{
  width:auto; height:auto; max-height:82%; max-width:74%; object-fit:contain;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.5));
  animation:hover 7s var(--e-soft) infinite alternate;
}
@keyframes hover{ to{ transform:translateY(-16px) rotate(-3deg); } }

/* Wechsel zu den anderen Leistungen */
.subnav{
  /* Bleibt beim Scrollen unter dem Dock stehen. Der Farbbalken sitzt oben
     in der Leiste und faehrt deshalb mit. z-index unter dem Dock (120),
     damit dessen Aufklappmenue darueber liegt. */
  position:sticky; z-index:110;
  top:calc(var(--dock-h) + 24px);
  border-block:1px solid var(--line);
  padding-block:21px 16px;   /* oben Platz fuer den 5px-Balken */
  overflow-x:auto; scrollbar-width:none;
  box-shadow:0 14px 28px -24px rgba(0,0,0,.9);
  /* Der Wechsel zur Pille aendert nur Breite, Rundung und Flaeche - nie die
     Hoehe. Sonst rutscht der Inhalt darunter im Moment des Umschaltens. */
  width:100%; margin-inline:auto;
  border-radius:0;
  transition:width .45s var(--e-out), border-radius .45s var(--e-out),
             background-color .45s var(--e-soft), box-shadow .45s var(--e-soft),
             border-color .45s var(--e-soft);
}

/* Geklebt: schwebt als Pille unter dem Dock, in derselben Sprache */
.subnav.is-bubble{
  /* Gleiche Breite wie das Dock, damit beide fluchten. */
  width:min(calc(100vw - 28px), 1300px);
  border-radius:999px;
  border-block-color:transparent;
  /* Deutlich deckender als das Dock: dort tauscht data-tone die ganze
     Farbwelt, die Leiste bleibt dagegen immer dunkel. Bei .72 wird sie
     ueber hellen Abschnitten mittelgrau und der Text darin unlesbar. */
  background:rgba(10,13,24,.93);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 20px 46px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
}
/* In der Pille sitzt der Balken innen an der Oberkante und wird von der
   Rundung beschnitten - deshalb etwas schmaler und mittig. */
.subnav.is-bubble > .colorbar{ left:12%; right:12%; }
@media (max-width:900px){
  .subnav.is-bubble{ width:calc(100vw - 20px); }
}
/* Der Balken lag vorher am Fuss der Hero-Sektion. Jetzt gehoert er zur
   Leiste und sitzt an deren Oberkante. */
.subnav > .colorbar{ top:0; bottom:auto; }
/* Nur wo die Leiste wirklich klebt, darf der Ankerabstand groesser sein -
   auf der Startseite gibt es sie nicht. */
/* Der Wert deckt Dock, Abstand und die ganze Leiste ab (rund 78px hoch),
   plus etwas Luft - sonst landet das Ankerziel knapp darunter. */
html:has(.subnav){ scroll-padding-top:calc(var(--dock-h) + 112px); }
@media (max-width:900px){
  html:has(.subnav){ scroll-padding-top:calc(var(--dock-h) + 110px); }
}
.subnav::-webkit-scrollbar{ display:none; }
.subnav__row{ display:flex; gap:8px; width:max-content; min-width:100%; }
.subnav a{
  flex:0 0 auto;
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-soft);
  font-size:13.6px; font-weight:600; white-space:nowrap;
  transition:all .35s var(--e-out);
}
.subnav a:hover{ color:var(--fg); border-color:color-mix(in srgb,var(--fg) 30%,transparent); }
.subnav a[aria-current="page"]{
  background:var(--red); border-color:var(--red); color:#fff;
}

/* Leistungsdetails, Spalten statt Kästchen.
   Vorher war der Rahmen der durchscheinende Container-Hintergrund; blieb in der
   letzten Reihe eine Zelle leer, stand dort eine graue Fläche. Jetzt trägt jede
   Spalte ihre eigene Kopflinie, und leere Rasterplätze sind einfach nichts. */
.detail{
  display:grid;
  gap:clamp(28px,3.2vw,46px) clamp(28px,3.4vw,54px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
@media (min-width:1040px){
  /* Sechs Punkte ergeben so zwei volle Reihen. */
  .detail{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.detail > div{ position:relative; padding-top:22px; }
.detail > div::before,
.detail > div::after{
  content:""; position:absolute; top:0; left:0; height:2px;
}
.detail > div::before{ width:100%; background:var(--line); }
.detail > div::after{
  width:0; background:var(--accent);
  transition:width .8s var(--e-out);
}
.detail.is-in > div::after{ width:100%; }
.detail > div:nth-child(1)::after{ transition-delay:0ms; }
.detail > div:nth-child(2)::after{ transition-delay:90ms; }
.detail > div:nth-child(3)::after{ transition-delay:180ms; }
.detail > div:nth-child(4)::after{ transition-delay:270ms; }
.detail > div:nth-child(5)::after{ transition-delay:360ms; }
.detail > div:nth-child(6)::after{ transition-delay:450ms; }

.detail h3{ font-size:19.5px; margin:0 0 10px; letter-spacing:-.026em; }
.detail p{ margin:0; font-size:14.8px; color:var(--fg-soft); line-height:1.55; }
.detail__no{
  display:block; margin-bottom:14px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; color:var(--accent);
}
.detail > div:hover .detail__no{ color:var(--fg); transition:color .3s; }

/* Fliesstext-Block */
.prose{
  display:grid; gap:clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
}
@media (max-width:900px){ .prose{ grid-template-columns:minmax(0,1fr); } }
.prose h2{ font-size:clamp(28px,3.6vw,46px); letter-spacing:-.032em; margin:0; }
.prose__text > p{ margin:0 0 18px; color:var(--fg-soft); font-size:16px; line-height:1.7; }
.prose__text > p:last-child{ margin-bottom:0; }
.prose__text .ticks{ margin-top:26px; }

/* Preis-/Paketkarten */
.plans{
  display:grid; gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(26px,2.8vw,38px);
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .55s var(--e-out), border-color .4s;
}
.plan:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 36%,transparent); }
.plan--hot{
  background:linear-gradient(158deg,rgba(232,53,47,.10),rgba(59,98,212,.06));
  border-color:rgba(232,53,47,.3);
}
.plan__flag{
  position:absolute; top:-1px; right:22px;
  padding:5px 12px; border-radius:0 0 8px 8px;
  background:var(--red); color:#fff;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
}
.plan h3{ font-size:clamp(22px,2vw,28px); margin:0 0 10px; letter-spacing:-.03em; }
.plan__for{
  margin:0 0 22px; padding-bottom:20px; border-bottom:1px solid var(--line);
  font-size:14.8px; color:var(--fg-soft);
}
.plan .ticks{ margin-bottom:26px; }
.plan .btn{ margin-top:auto; align-self:flex-start; }

@media (max-width:900px){
  .subhero{ padding-block:calc(var(--dock-h) + 54px) clamp(48px,8vw,72px); }
}

/* ============================================================
   29. Der Header bleibt: kompakter statt weg
   ============================================================ */
.dock.is-compact{
  height:62px;
  box-shadow:0 16px 40px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
}
.dock[data-tone="light"].is-compact{
  box-shadow:0 16px 38px -24px rgba(20,26,50,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
.dock.is-compact .dock__brand img{ height:25px; }
.dock.is-compact .rail__item{ height:42px; }
.dock.is-compact .rail__curve{ height:58px; }
.dock.is-compact .dock__icon{ width:38px; height:38px; }
.dock.is-compact .dock__cta{ padding:9px 17px; }
.dock__brand img,.rail__item,.dock__icon,.dock__cta{
  transition:height .4s var(--e-out), padding .4s var(--e-out),
             width .4s var(--e-out), color .3s var(--e-soft),
             transform .45s var(--e-back), background .3s, border-color .3s;
}
@media (max-width:900px){
  .dock.is-compact{ height:auto; }
  .dock.is-compact .rail__item{ height:46px; padding-bottom:0; }
}

/* ============================================================
   30. Nachtrag: Probe aufs Exempel
   ============================================================ */
.vis__aside{
  margin:clamp(20px,2.4vw,30px) 0 0;
  padding:22px 26px;
  border-radius:var(--r);
  border:1px dashed var(--line);
  background:var(--surface);
  font-size:15px; color:var(--fg-soft); line-height:1.6;
}
.vis__aside strong{ color:var(--fg); }

/* ============================================================
   31. Nachtrag: Leerraum in den Karten sammelt sich vor dem Link,
   nicht mitten im Text
   ============================================================ */
.card__body .ticks{ margin:0 0 22px; }
.card__body .minigrid{ margin-top:0; margin-bottom:22px; }
.card__more{ margin-top:auto; }

/* Ober- und Unterlaengen auch auf den Unterseiten nicht abschneiden */
.subhero__title .line{
  display:block; overflow:hidden;
  padding-block:.16em; margin-block:-.11em;
}
.subhero__title .offset{
  transform:translateY(102%);
  animation:lineUp 1s var(--e-out) forwards;
  animation-play-state:paused;
}
body.is-ready .subhero__title .offset{ animation-play-state:running; }

/* ============================================================
   32. Auf dem Handy ohne Welle: die Leiste allein traegt die
   Orientierung, der aktive Punkt ist rot. Eine Kurve auf so
   wenig Breite wuerde ueber die Nachbarn greifen.
   ============================================================ */
@media (max-width:900px){
  .rail__curve{ display:none; }
  .rail__item::before{ display:none; }
  .rail__item{ color:color-mix(in srgb,currentColor 62%,transparent); }
  .rail__item.is-target{ color:var(--red-hot); }
  .dock[data-rail-tone="light"] .rail__item.is-target{ color:var(--red); }
  /* Kein Punkt: er sass mitten in der Beschriftung, und die rote Faerbung
     markiert den aktiven Punkt schon deutlich genug. */
}

/* Ohne Welle sitzt der Inhalt der Leiste wieder mittig */
@media (max-width:900px){
  .rail{ align-items:center; }
  .rail__item{ padding-bottom:0; }
}

/* ============================================================
   33. Sehr schmale Schirme (Galaxy Fold zugeklappt, 280px)
   ============================================================ */
@media (max-width:360px){
  /* Knopftexte duerfen umbrechen, statt den Rahmen zu sprengen */
  .btn{ white-space:normal; text-align:center; }
  .btn--lg{ padding:15px 22px; }

  /* Logo und Text der IT-Referenzen untereinander */
  .work--flat .work__it{ flex-wrap:wrap; gap:14px; }
  .work--flat .work__it > div{ min-width:0; flex:1 1 100%; }
  .work--flat img{ width:64px; }

  /* Lange Fachwoerter nicht ueber den Rand schieben */
  .card h3,.vis__card h3,.detail h3,.plan h3,.work__meta h3{ hyphens:auto; }
  .contact__v{ word-break:break-word; }
}

/* ============================================================
   34. Tab-Leiste auf schmalen Schirmen
   Fuenf Punkte auf 320px lassen den Beschriftungen kaum Luft.
   Erst wird die Schrift knapper, ab 330px zeigt nur noch der
   aktive Punkt seinen Namen - so wie es Android-Leisten tun.
   ============================================================ */
@media (max-width:360px){
  .rail__item{ padding:0 2px; }
  .rail__item span{ font-size:9px; letter-spacing:-.005em; }
  .rail__item svg{ width:19px; height:19px; }
  .rail__dot{ top:5px; right:6px; width:5px; height:5px; }
}
@media (max-width:330px){
  .rail{ height:58px; }
  .rail__item{ height:44px; gap:0; }
  .rail__item svg{ width:21px; height:21px; }
  .rail__item span{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .3s var(--e-out), opacity .25s var(--e-soft), margin-top .3s var(--e-out);
  }
  .rail__item.is-target span{ max-height:13px; opacity:1; margin-top:3px; }
  /* Der Punkt unter dem Namen entfaellt, das Symbol traegt die Markierung */
  .rail__item.is-target::after{ display:none; }
}

/* ============================================================
   35. Kachel, die nach draussen fuehrt (DeinEntwurf)
   ============================================================ */
.promo--extern .promo__body h3{ max-width:22ch; }
.promo__marke{ margin:14px 0 12px; }
.promo__marke img{ height:26px; width:auto; display:block; }
/* Die Wortmarke ist dunkelgrau gesetzt. Auf dunklem Grund kehrt sie um,
   sonst verschwindet sie in der Flaeche. */
[data-tone="dark"] .promo__marke img{ filter:invert(1) hue-rotate(180deg) saturate(1.25); }
.promo__ticks{ margin:0 0 26px; }
.promo__ticks li{ font-size:14.6px; }
.promo__hinweis{
  margin:18px 0 0; font-size:13.6px; color:var(--fg-soft);
}
.promo__hinweis a{
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.promo__hinweis a:hover{ text-decoration-thickness:2px; }
/* Der Pfeil zeigt nach draussen: keine Seitwaertsbewegung, sondern hinaus */
.promo--extern .btn:hover svg{ transform:translate(3px,-3px); }

/* ============================================================
   36. Jahreszahlen an den Meilensteinen
   Die Zahl steht als eigene Marke ueber dem Titel. Fehlt sie,
   sieht die Liste genauso aus wie ohne - das <time> entsteht
   nur, wenn ein Jahr hinterlegt ist.
   ============================================================ */
.milestones time{
  display:block; margin-bottom:3px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; color:var(--accent);
}
.milestones li:hover time{ color:var(--fg); transition:color .3s; }