/* ============ INTRO ANIMATIONS ============
   Elements start translated off their nearest edge. body.page-ready
   removes the offset → single GPU-accelerated transform animation per element.
*/
.intro{
  transition:transform .85s cubic-bezier(0.16,1,0.3,1), opacity .65s ease;
  will-change:transform,opacity;
}
body:not(.page-ready) .intro{opacity:0;}
body:not(.page-ready) .intro-top   {transform:translateY(-30px);}
body:not(.page-ready) .intro-bottom{transform:translateY(30px);}
body:not(.page-ready) .intro-left  {transform:translateX(-40px);}
body:not(.page-ready) .intro-right {transform:translateX(40px);}
body.page-ready .intro{transform:none;opacity:1;}
/* Stagger delays for nicer cascading entry */
body.page-ready .intro-d1{transition-delay:.08s}
body.page-ready .intro-d2{transition-delay:.16s}
body.page-ready .intro-d3{transition-delay:.24s}
body.page-ready .intro-d4{transition-delay:.32s}
body.page-ready .intro-d5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .intro{transition:none !important;transform:none !important;opacity:1 !important;}
}

/* ============ LOADER ============ */
#siteLoader{
  position:fixed;inset:0;z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:#0a0a0a;
  transition:opacity .5s ease, visibility .5s ease;
}
#siteLoader.is-done{opacity:0;visibility:hidden;pointer-events:none;}
.loader-label{
  font-family:"JetBrains Mono","SFMono-Regular",Menlo,monospace;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
@keyframes loader-letter-in{
  from{opacity:0;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}
.loader-label span{
  display:inline-block;
  opacity:0;
  animation:loader-letter-in 0.4s ease forwards;
}
.loader-label span:nth-child(1){animation-delay:0s}
.loader-label span:nth-child(2){animation-delay:.18s}
.loader-label span:nth-child(3){animation-delay:.36s}
.loader-label span:nth-child(4){animation-delay:.54s}
.loader-label span:nth-child(5){animation-delay:.72s}
.loader-label span:nth-child(6){animation-delay:.90s}
.loader-label span:nth-child(7){animation-delay:1.08s}
@keyframes square-animation{
  0%{left:0;top:0}
  10.5%{left:0;top:0}
  12.5%{left:32px;top:0}
  23%{left:32px;top:0}
  25%{left:64px;top:0}
  35.5%{left:64px;top:0}
  37.5%{left:64px;top:32px}
  48%{left:64px;top:32px}
  50%{left:32px;top:32px}
  60.5%{left:32px;top:32px}
  62.5%{left:32px;top:64px}
  73%{left:32px;top:64px}
  75%{left:0;top:64px}
  85.5%{left:0;top:64px}
  87.5%{left:0;top:32px}
  98%{left:0;top:32px}
  100%{left:0;top:0}
}
.loader{position:relative;width:96px;height:96px;transform:rotate(45deg);}
.loader-square{
  position:absolute;top:0;left:0;
  width:28px;height:28px;margin:2px;
  border-radius:0;
  background:#fff;
  animation:square-animation 10s ease-in-out infinite both;
}
.loader-square:nth-of-type(1){animation-delay:0s}
.loader-square:nth-of-type(2){animation-delay:-1.4285714286s}
.loader-square:nth-of-type(3){animation-delay:-2.8571428571s}
.loader-square:nth-of-type(4){animation-delay:-4.2857142857s;background:#8B2222!important}
.loader-square:nth-of-type(5){animation-delay:-5.7142857143s}
.loader-square:nth-of-type(6){animation-delay:-7.1428571429s}
.loader-square:nth-of-type(7){animation-delay:-8.5714285714s}
@media(prefers-reduced-motion:reduce){#siteLoader{display:none}}

/* ============ TOKENS ============ */
:root{
  interpolate-size:allow-keywords;
  --bg:#0a0a0a;
  --bg-elev:#141414;
  --bg-elev-2:#1d1d1d;
  --fg:#f4f4f4;
  --fg-dim:#9a9a9a;
  --fg-mute:#5a5a5a;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.18);

  --red:#8B2222;
  --red-bright:#8B2222;
  --red-glow:rgba(139,34,34,0.35);

  /* Light section — weißer Grund, Flächen über Tokens statt dunkler Elev-Klötze */
  --bg-light:#ffffff;
  --bg-light-surface:#fafaf8;
  --bg-light-elev:#ecebe8;
  --bg-light-elev-2:#e2e1dd;
  --fg-light:#242424;
  --fg-light-dim:#5c5c5c;
  --fg-light-mute:#8a8a8a;
  --line-light:rgba(0,0,0,0.09);
  --line-light-strong:rgba(0,0,0,0.18);

  /* Type */
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
  --headline:"JetBrains Mono","SF Mono",ui-monospace,monospace;
  --prose:"Montserrat",ui-sans-serif,system-ui,sans-serif;

  --pad:clamp(20px,4vw,60px);
  --max:1400px;
  /* Nur Hero-H1: Faktor 1 / 1.25 / 1.5 / 1.75 (per JS, Tasten 1–3) */
  --dm-font-scale:1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  scroll-behavior:smooth;
  background:var(--bg);
  min-height:100%;
}
body{
  background:transparent;
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Volle Seite über Parallax-Hintergrund heben (Nav ausgenommen: bleibt fixed oben) */
body > *:not(.site-parallax-bg):not(.nav):not(.nav-lang):not(.nav-overlay):not(.dm-page-wipe){
  position:relative;
  z-index:1;
}

/* Sanfte „Tiefe“: große Fläche, bewegt sich langsamer als der Scroll */
.site-parallax-bg{
  position:fixed;
  left:0;
  width:100%;
  height:150vh;
  top:-25vh;
  z-index:0;
  pointer-events:none;
  backface-visibility:hidden;
  background:
    radial-gradient(ellipse 75% 58% at 10% 18%, rgba(139,34,34,0.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 92% 72%, rgba(139,34,34,0.09), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(255,255,255,0.02), transparent 45%),
    linear-gradient(168deg,#0b0b0b 0%,var(--bg) 42%,#060606 100%);
}
body.page-home .site-parallax-bg{
  background:#000;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}

/* ============ NAVBAR ============ */
/* Oben ohne „Kasten“: Inhalt schwebt auf dem Hero: Rahmen/Glas erst mit .is-scrolled */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px var(--pad);
  margin:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid transparent;
  border-radius:0;
  box-shadow:none;
  transition:top .55s cubic-bezier(.7,0,.3,1),left .55s cubic-bezier(.7,0,.3,1),right .55s cubic-bezier(.7,0,.3,1),padding .55s cubic-bezier(.7,0,.3,1),border-radius .55s cubic-bezier(.7,0,.3,1),box-shadow .55s ease,background-color .5s ease,border-color .5s ease,color .5s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease;
}
.nav.is-scrolled{
  top:14px;
  left:clamp(14px, 2vw, 28px);
  right:clamp(14px, 2vw, 28px);
  padding:10px 22px;
  border-radius:0;
  background:rgb(52,52,56);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:rgba(255,255,255,0.10);
  box-shadow:0 14px 40px rgba(0,0,0,0.28),0 2px 8px rgba(0,0,0,0.18);
}
.nav.is-scrolled.on-light{
  background:rgb(228,228,232);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:rgba(0,0,0,0.10);
  box-shadow:0 14px 40px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.05);
}
.nav.on-light{
  color:var(--fg-light);
}
.nav-brand{
  display:flex;align-items:center;gap:14px;justify-self:start;
  transition:transform .55s cubic-bezier(.7,0,.3,1);
}
.nav.is-scrolled .nav-brand{transform:translateX(28px)}
.nav-brand img{height:40px;width:auto;transition:filter .3s ease}
.nav-brand:hover img{filter:brightness(1.1)}

/* In-navbar section indicator: slides in from left mit Sektionsname + N° (N° darf nie abgeschnitten werden) */
.nav-section{
  display:flex;align-items:center;gap:10px;
  padding-left:14px;
  border-left:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--fg-dim);
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
  transition:opacity .45s ease,transform .55s cubic-bezier(.7,0,.3,1),border-color .5s ease,color .5s ease,max-width .55s cubic-bezier(.7,0,.3,1);
  max-width:0;
  overflow:hidden;
  min-width:0;
}
.nav-section.is-on{
  opacity:1;
  transform:translateX(0);
  max-width:min(560px,calc(100vw - 200px));
}
.nav.on-light .nav-section{border-left-color:var(--line-light);color:var(--fg-light-dim)}
.nav-section .ns-dot{
  width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0;
  transform:scale(0);
  transition:transform .35s cubic-bezier(.7,0,.3,1) .15s;
}
.nav-section.is-on .ns-dot{transform:scale(1)}
.nav-section .ns-label{
  font-weight:600;color:var(--fg);
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav.on-light .nav-section .ns-label{color:var(--fg-light)}
.nav-section .ns-of{
  opacity:0.55;margin-left:2px;
  flex-shrink:0;
  white-space:nowrap;
}

@media(max-width:880px){
  .nav-section{display:none}
}

/* Legacy / Stub: horizontale Link-Leiste wird nicht mehr genutzt */
.nav-menu{display:none !important}

/* ============ Hamburger + Fullscreen-Overlay ============ */
.nav-burger{
  justify-self:center;
  align-self:center;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 6px;
  color:inherit;
  border:none;
  outline:none;
  box-shadow:none;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.nav-burger:hover,
.nav-burger:active{
  border:none;
  outline:none;
  box-shadow:none;
  background:transparent;
}
.nav-burger:hover .nav-burger-lines i{
  opacity:0.5;
}
.nav-burger:hover .nav-burger-label{
  opacity:0.45;
}
.nav-burger:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}
.nav-burger-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  opacity:0.7;
  transition:opacity .25s ease;
  user-select:none;
}
.nav-burger-lines{
  width:22px;
  display:flex;
  flex-direction:column;
  gap:5px;
  pointer-events:none;
}
.nav-burger-lines i{
  display:block;
  height:2px;
  width:100%;
  border-radius:2px;
  background:currentColor;
  transform-origin:center;
  transition:transform .28s cubic-bezier(.7,0,.3,1),opacity .2s ease,background .25s ease;
}
body.nav-overlay-open .nav-burger-lines i:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
body.nav-overlay-open .nav-burger-lines i:nth-child(2){
  opacity:0;
  transform:scaleX(0.15);
}
body.nav-overlay-open .nav-burger-lines i:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.nav-overlay{
  position:fixed;
  inset:0;
  z-index:110;
  display:flex;
  align-items:stretch;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.nav-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.nav-overlay-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(8,8,8,0.72);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
}
.nav-overlay-panel{
  position:relative;
  z-index:1;
  flex:1;
  width:100%;
  max-width:min(720px,100%);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(36px,var(--pad),80px);
  transform:translateY(14px);
  opacity:0;
  transition:transform .34s cubic-bezier(.7,0,.3,1),opacity .28s ease;
}
.nav-overlay.is-open .nav-overlay-panel{
  transform:translateY(0);
  opacity:1;
}
.nav-overlay-close{
  display:none;
}
.nav-overlay-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(8px,1.8vmin,16px);
  text-align:center;
}
.nav-overlay-links a{
  font-family:var(--serif);
  font-size:clamp(26px,5vmin,46px);
  font-weight:400;
  letter-spacing:-0.02em;
  color:rgba(248,248,248,0.96);
  padding:12px 22px;
  border-radius:14px;
  opacity:0.94;
  transition:opacity .2s ease,color .2s ease,transform .26s cubic-bezier(.7,0,.3,1);
}
.nav-overlay-links a:hover{
  opacity:1;
  color:var(--red-bright);
  transform:translateX(5px);
}

html.nav-overlay-open,
body.nav-overlay-open{
  overflow:hidden;
  overscroll-behavior:none;
}
/* Navbar + Burger müssen über dem Overlay liegen, sonst kein Toggle per erneutem Klick */
body.nav-overlay-open .nav{
  z-index:120;
}

@media (prefers-reduced-motion: reduce){
  .nav-overlay,
  .nav-overlay-panel,
  .nav-burger-lines i{
    transition:none !important;
  }
  .nav-overlay-panel{
    transform:none;
  }
  .nav-overlay:not(.is-open) .nav-overlay-panel{
    opacity:0;
  }
  body.nav-overlay-open .nav-burger-lines i:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  body.nav-overlay-open .nav-burger-lines i:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
}

.nav-right{
  justify-self:end;display:flex;align-items:center;gap:18px;
  transition:transform .55s cubic-bezier(.7,0,.3,1);
}
.nav.is-scrolled .nav-right{transform:translateX(-28px)}
.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  background:var(--red);color:#fff;
  border:1px solid var(--red);
  transition:background .25s ease,transform .25s ease;
}
.nav-cta:hover{background:var(--red-bright);transform:translateX(2px)}
.nav-cta::after{content:"→";transition:transform .25s ease}
.nav-cta:hover::after{transform:translateX(3px)}

.nav-lang{
  position:fixed;top:90px;right:var(--pad);z-index:99;
  transition:top .55s cubic-bezier(.7,0,.3,1),right .55s cubic-bezier(.7,0,.3,1),background-color .5s ease,border-color .5s ease,color .5s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease;
  display:flex;gap:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.15em;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid transparent;
  padding:4px;
}
body.is-scrolled .nav-lang{
  background:rgb(52,52,56);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:rgba(255,255,255,0.10);
}
.nav-lang.on-light{
  color:var(--fg-light);
}
body.is-scrolled .nav-lang.on-light{
  background:rgb(228,228,232);
  border-color:rgba(0,0,0,0.10);
}
.nav-lang button{
  padding:4px 10px;letter-spacing:0.15em;opacity:0.55;transition:opacity .2s,background .2s;
}
.nav-lang button.is-on{opacity:1;background:var(--red);color:#fff}
.nav-lang button:hover{opacity:1}

.nav-font{
  position:fixed;top:128px;right:var(--pad);z-index:99;
  transition:top .55s cubic-bezier(.7,0,.3,1),right .55s cubic-bezier(.7,0,.3,1),background-color .5s ease,border-color .5s ease,color .5s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease;
  display:flex;gap:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.15em;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid transparent;
  padding:4px;
}
body.is-scrolled .nav-font{
  background:rgb(52,52,56);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:rgba(255,255,255,0.10);
}
.nav-font.on-light{
  color:var(--fg-light);
}
body.is-scrolled .nav-font.on-light{
  background:rgb(228,228,232);
  border-color:rgba(0,0,0,0.10);
}
.nav-font button{
  padding:4px 10px;letter-spacing:0.15em;opacity:0.55;transition:opacity .2s,background .2s;
}
.nav-font button.is-on{opacity:1;background:var(--red);color:#fff}
.nav-font button:hover{opacity:1}

/* Font 2: Poppins — geometrisch, modern, durchgängig */
body.font-2{
  --sans:"Poppins","Helvetica Neue",Arial,sans-serif;
  --serif:"Poppins","Helvetica Neue",Arial,sans-serif;
}
body.font-2 .hero-headline{
  line-height:1.18;
}
body.font-2 .hero-headline .wipe-title{
  padding-bottom:0.44em;
  padding-inline-end:0.55em;
}
/* Poppins: nach den Größenstufen — Hero nur in Großbuchstaben (zwei Skalen über --dm-font-scale) */
body.font-2.hero-headline-caps .hero-headline{
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:1.12;
}
body.font-2.hero-headline-caps .hero-headline em{
  font-style:normal;
}
@supports (font-size:1cqi){
  body.font-2 .hero-headline{
    font-size:calc(clamp(18px,2.85cqi + 0.95vmin + 0.34vw,64px) * var(--dm-font-scale, 1));
  }
}
/* Font 3: IBM Plex — für digitales Enterprise-Wissensmanagement entworfen */
body.font-3{
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --serif:"IBM Plex Serif","Times New Roman",serif;
}
body.font-3 .hero-headline .wipe-title{
  padding-bottom:0.42em;
  padding-inline-end:0.52em;
}

/* ============ SHARED SECTION ============ */
section{
  position:relative;
  padding:140px var(--pad);
  border-top:1px solid var(--line);
  transition:background-color .8s ease,color .8s ease,border-color .8s ease;
}
section.light{
  background:var(--bg-light);
  color:var(--fg-light);
  border-top-color:var(--line-light);
}
section.light .sec-kicker,section.light .sec-meta,section.light .muted{color:var(--fg-light-dim)}

.wrap{max-width:var(--max);margin:0 auto}

.sec-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--fg-dim);
  display:none;
  align-items:center;gap:14px;
  margin-bottom:32px;
}
.sec-kicker::before{
  content:"";width:32px;height:1px;background:var(--red);
}
.sec-kicker .of{opacity:0.45;margin-left:6px}

/* Big editorial section number — vertical, anchored to left edge */
.sec-num{
  position:absolute;
  top:140px;left:var(--pad);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  pointer-events:none;
  z-index:0;
}
.sec-num .roman{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(72px,9vw,140px);
  line-height:0.98;
  letter-spacing:-0.03em;
  color:var(--red);
  opacity:0.10;
  user-select:none;
}
section.light .sec-num .roman{opacity:0.13}
.sec-num .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--fg-dim);
  display:flex;align-items:center;gap:10px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  margin-left:18px;
}
.sec-num .tag::before{content:"";width:1px;height:24px;background:var(--red)}
section.light .sec-num .tag{color:var(--fg-light-dim)}

/* Make sure the section content sits above the giant number */
section .wrap{position:relative;z-index:1}

@media(max-width:880px){
  .sec-num{top:90px}
  .sec-num .roman{font-size:64px}
  .sec-num .tag{display:none}
}

.sec-title{
  font-family:var(--headline);
  font-weight:600;
  font-size:clamp(40px,6vw,84px);
  line-height:1.14;
  letter-spacing:-0.02em;
  margin:0 0 24px;
  text-wrap:balance;
}
/* Genug Innenabstand: Unterlängen (g,q,y) + Kursiv nicht von overflow/clip abschneiden */
.sec-title .wipe-title{
  padding:0.06em 0.12em 0.34em 0.05em;
  box-sizing:content-box;
  display:inline-block;
}
body.font-2 .sec-title .wipe-title{
  padding-bottom:0.4em;
  padding-right:0.14em;
}
body.font-3 .sec-title .wipe-title{
  padding-bottom:0.38em;
  padding-right:0.14em;
}
.sec-title em{font-style:italic;color:var(--red)}
.sec-motto{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(13px,1.05vw,16px);
  color:var(--fg-dim);
  margin:10px 0 0;
  letter-spacing:0.01em;line-height:1.55;
}
.sec-motto em{color:var(--red);font-style:italic;}
section.light .sec-motto{color:var(--fg-light-dim)}
.sec-lead{
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.55;
  color:var(--fg-dim);
  max-width:62ch;
  margin:0 0 60px;
}
section.light .sec-lead{color:var(--fg-light-dim)}

/* ============ WIPE-HEADLINES (zwei Balken links→rechts, Text per clip-path) ============ */
.wipe-title{
  position:relative;
  display:block;
  overflow:hidden;
  --wipe-bar-a:#1a1a1a;
  --wipe-bar-b:var(--red);
}
section.light .wipe-title{
  --wipe-bar-a:#141414;
}
.wipe-title > span{
  display:inline-block;
  position:relative;
  z-index:1;
  max-width:100%;
  clip-path:inset(0 100% 0 0);
  color:var(--fg);
  /* Zusatzfläche im Span, damit Endzustand des Wipes keine Glyphen beschneidet */
  padding:0.03em 0 0.18em 0;
  box-sizing:border-box;
}
section.light .wipe-title > span{
  color:var(--fg-light);
}
.wipe-title em{
  font-style:italic;
  color:var(--red);
}
.wipe-title::before,
.wipe-title::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-105%);
  z-index:2;
  pointer-events:none;
}
.wipe-title::before{background:var(--wipe-bar-a)}
.wipe-title::after{background:var(--wipe-bar-b)}
.wipe-title.is-in::before{
  animation:dmWipeBar 1s cubic-bezier(.77,0,.18,1) forwards;
}
.wipe-title.is-in::after{
  animation:dmWipeBar 1s cubic-bezier(.77,0,.18,1) forwards;
  animation-delay:0.15s;
}
.wipe-title.is-in > span{
  animation:dmWipeText 0.65s ease forwards;
  animation-delay:0.5s;
}
@keyframes dmWipeBar{
  0%{transform:translateX(-105%);opacity:0}
  8%{opacity:1}
  45%{transform:translateX(0);opacity:1}
  88%{opacity:1}
  100%{transform:translateX(105%);opacity:0}
}
@keyframes dmWipeText{
  to{clip-path:inset(-0.08em -0.16em -0.46em -0.14em)}
}
@media (prefers-reduced-motion: reduce){
  .wipe-title::before,
  .wipe-title::after{display:none}
  .wipe-title > span{
    clip-path:inset(0 0 0 0) !important;
    animation:none !important;
  }
}

/* ============ HERO — exakt eine Viewport-Höhe (svh), Inhalt skaliert mit ============ */
.hero{
  /* Höhe: mit Viewport (svh/vmin) wachsen, oben weniger „Leerluft“ unter der Nav */
  --hero-logo-h:72px;
  --hero-logo-pad-b:clamp(20px,2.8vh,36px);
  --hero-fig-h:min(min(1040px,calc(100vh - 3.5rem)),92vmin);
  /* Portrait-Bounding-Box relativ zu --hero-fig-h (2 = doppelte Darstellung) */
  --hero-fig-scale:2;
  /* Max. sichtbare Portrait-Höhe: nie über Hero/Viewport (sonst clip durch overflow-y + „hängt“ unten) */
  --hero-fig-cap-v:82vh;
  --hero-max:min(1480px,calc(100vw - var(--pad) * 2));
  container-name:hero;
  container-type:inline-size;
  position:relative;
  z-index:0;
  box-sizing:border-box;
  display:grid;
  width:100%;
  max-width:var(--hero-max);
  margin-inline:auto;
  /* Eine Zeile: linker Block (Überschrift + Text), rechts Portrait */
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  column-gap:clamp(14px,2.5vmin,40px);
  align-items:stretch;
  /* Genug Luft unter fixer Nav + rechten Steuerleisten (Sprache/Schrift) */
  padding-top:max(env(safe-area-inset-top,0px),clamp(96px,12vmin,154px));
  padding-bottom:var(--hero-logo-h,72px);
  padding-left:var(--pad);
  padding-right:var(--pad);
  border-top:0;
  /* overflow-y:hidden macht overflow-x effektiv zu „auto“ und schneidet lange Headlines ab */
  overflow:visible;
  min-height:100vh;
  height:100vh;
  max-height:100vh;
}
@supports (height:100svh){
  .hero{
    --hero-fig-h:min(min(1040px,calc(100svh - 3.5rem)),92vmin);
    --hero-fig-cap-v:82svh;
    min-height:100svh;
    height:100svh;
    max-height:100svh;
  }
}
.hero-copy{
  grid-column:1;
  grid-row:1;
  min-width:0;
  align-self:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(18px,2.8vmin,36px);
  position:relative;
  z-index:12;
  padding-bottom:clamp(8px,2vmin,32px);
}
@media (min-width:881px){
  .hero-copy{
    width:100%;
    max-width:none;
    justify-self:start;
  }
}
.hero-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:visible;
  padding:0;
  margin:0;
  flex-shrink:0;
}
/* Genau zwei Zeilen: je eine Wipe-Zeile, kein Umbruch — Breite kommt aus der Headline-Zeile (volle Hero-Breite) */
.hero-headline .wipe-title{
  overflow:visible;
  padding-inline-end:0.52em;
  padding-inline-start:0.06em;
  padding-bottom:0.38em;
}
.hero-headline .wipe-title > span{
  white-space:nowrap;
  max-width:none;
  display:block;
}
.hero-headline{
  flex-shrink:0;
  margin:0;
  position:relative;
  z-index:1;
  font-family:var(--headline);font-weight:600;
  font-size:calc(clamp(26px,min(4.9vw + 0.55vmin,6.2vh + 0.45vmin),78px) * var(--dm-font-scale, 1));
  line-height:1.12;
  letter-spacing:-0.028em;
  overflow:visible;
  max-width:none;
  width:100%;
  box-sizing:border-box;
}
@supports (font-size:1cqi){
  .hero-headline{
    font-size:calc(clamp(22px,3.35cqi + 1.1vmin + 0.42vw,76px) * var(--dm-font-scale, 1));
  }
}
.hero-headline em,.hero-headline .wipe-title em{
  font-style:italic;
  color:#8B2222;
  /* Weißer Dropschatten getrennt vom Fill: reines CI-Rot (#8B2222), kein text-shadow-Mix */
  text-shadow:none;
  filter:drop-shadow(1px 1px 0 rgba(255,255,255,0.34)) drop-shadow(2px 2px 0 rgba(255,255,255,0.16));
}
.hero-sub{
  font-size:clamp(15px,min(1.5vw,1.75vmin),21px);line-height:1.45;color:var(--fg-dim);
  max-width:52ch;margin:0 0 clamp(10px,1.8vmin,22px);
}
.hero-actions{display:flex;gap:clamp(12px,2vmin,18px);flex-wrap:wrap}
.hero .btn{
  padding:clamp(14px,1.65vw,18px) clamp(18px,2.4vw,28px);
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 24px;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0.02em;
  border:1px solid;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateX(2px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
section.light .btn-ghost{color:var(--fg-light);border-color:var(--line-light-strong)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* Hero visual: rechte Spalte; konkrete Variante ergänzt unten. */
.hero-figure{
  grid-column:2;
  grid-row:1;
  position:relative;
  place-self:end end;
  /* min: skalierte Zielgröße; max: bleibt im Hero unten bündig, nicht unter die Section geschoben */
  --hero-fig-box-h:min(calc(var(--hero-fig-h) * var(--hero-fig-scale)),min(var(--hero-fig-cap-v),1040px));
  height:var(--hero-fig-box-h);
  width:min(calc(100vw - var(--pad) * 2),calc(var(--hero-fig-box-h) * 1.36));
  max-width:none;
  background:transparent;
  border:none;
  /* Skalierung des <pre> (transform-origin unten rechts) ragt nach oben/links — abschneiden, kein Überdecken der H1 */
  overflow:hidden;
  flex-shrink:0;
  z-index:1;
  margin-bottom:0;
}
/* ============ LOGO TICKER ============ */
.logo-ticker{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:10;
  display:flex;
  align-items:flex-end;
  gap:0;
  min-height:var(--hero-logo-h,72px);
  padding-top:clamp(40px,8vh,96px);
  padding-bottom:max(env(safe-area-inset-bottom,0px),var(--hero-logo-pad-b,24px));
  border-top:none;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.35) 24%,
    rgba(0,0,0,0.82) 58%,
    #000 100%
  );
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.logo-ticker-label{
  flex-shrink:0;
  width:clamp(180px,22vw,340px);
  padding:0 24px 0 var(--pad);
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  line-height:1.5;
  color:rgba(255,255,255,0.52);
}
.logo-ticker-label em{
  font-style:normal;
  color:var(--red);
}
.logo-ticker-line1{
  display:block;
  white-space:nowrap;
}
.logo-ticker-scroll{
  overflow:hidden;
  display:flex;
  align-items:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 88%,transparent 100%);
}
.logo-ticker-track{
  display:flex;
  flex-shrink:0;
  align-items:center;
  width:max-content;
  animation:logoTicker 38s linear infinite;
  will-change:transform;
}
.logo-ticker-set{
  display:flex;
  align-items:center;
  gap:56px;
  padding:0 28px;
}
.logo-ticker-set img{
  height:clamp(28px,3.8vmin,42px);
  width:auto;
  display:block;
  flex-shrink:0;
  opacity:0.82;
  filter:invert(1) brightness(1.15);
  transition:opacity .35s ease;
  user-select:none;
  pointer-events:none;
}
@keyframes logoTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .logo-ticker-track{animation:none}
}
@media(max-width:880px){
  .logo-ticker{
    overflow:visible;
    isolation:isolate;
  }
  .logo-ticker-label{
    position:absolute;
    inset:0 auto 0 0;
    z-index:12;
    width:auto;
    max-width:min(88vw,480px);
    padding:0 clamp(48px,14vw,80px) 0 var(--pad);
    font-size:11px;
    display:flex;
    align-items:center;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(8,8,8,0.94) 0%,rgba(8,8,8,0.82) 62%,transparent 100%);
  }
  .logo-ticker-scroll{
    position:relative;
    z-index:1;
    flex:1;
    min-width:0;
    width:100%;
  }
}

/* ============ TRUST STRIP ============ */
.trust{
  padding:100px var(--pad);
  text-align:center;
  border-top:1px solid var(--line);
}
/* Hell über Hero: margin-top wird per Scroll gesteuert (siehe IIFE trustScrollOverlap). */
.trust.trust--over-hero{
  position:relative;
  z-index:4;
  background:var(--bg-light);
  color:var(--fg-light);
  margin-top:0;
  padding:80px var(--pad) 72px;
  border-top:none;
  box-shadow:0 -24px 48px rgba(0,0,0,0.18);
}
.trust.trust--over-hero .trust-lead{
  max-width:1100px;
  margin:0 auto;
}
.trust.trust--over-hero h2{color:var(--fg-light)}
.trust.trust--over-hero .trust-grid{
  border-color:var(--line-light-strong);
  background:var(--bg-light);
}
.trust.trust--over-hero .trust-grid .cell{
  background:var(--bg-light-surface);
  border-right-color:var(--line-light);
  border-bottom-color:var(--line-light);
}
.trust h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.6vw,52px);
  line-height:1.2;letter-spacing:-0.02em;
  margin:0 0 80px;
  padding-bottom:0.08em;
  text-wrap:balance;
}
.trust h2 em{font-style:italic;color:var(--red)}
.trust-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  max-width:1100px;margin:0 auto;
  /* Geschlossener Rahmen; --line (~8% weiß) war auf dem dunklen Grund kaum sichtbar */
  border:1px solid var(--line-strong);
}
.trust-grid .cell{
  display:grid;place-items:center;
  background:var(--bg);
  height:120px;
  border-right:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  padding:20px 16px;
  opacity:0;transform:translateY(12px);
  transition:opacity .8s ease,transform .3s ease;
}
.trust-grid .cell.is-in{opacity:1;transform:translateY(0)}
/* Kein multiply: dunkle Logos würden auf dunklem Grund verschwinden.
   Am besten: weiße oder helle Markenzeichen als PNG/SVG mit echtem Alpha (ohne weiße Fläche). */
.trust-grid .cell img{
  max-height:54px;
  max-width:min(168px,100%);
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  mix-blend-mode:normal;
  opacity:0.92;
  transition:transform .35s ease,opacity .35s ease,filter .35s ease;
}
.trust-grid .cell:hover img{
  transform:scale(1.04);
  opacity:1;
  filter:brightness(1.08);
}

@media(max-width:880px){
  .trust-grid{grid-template-columns:repeat(3,1fr)}
  .trust-grid .cell:nth-child(-n+5){border-top:none}
  .trust-grid .cell:nth-child(-n+3){border-top:1px solid var(--line-strong)}
}
@media(max-width:520px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid .cell:nth-child(-n+3){border-top:none}
  .trust-grid .cell:nth-child(-n+2){border-top:1px solid var(--line-strong)}
}

/* ============ LEISTUNGEN — SCROLL TELESCOPE ============ */
.svc-wrap{margin-top:0}

.svc-scroll-spacer{
  position:relative;
  display:grid;grid-template-columns:minmax(340px,1fr) 1.5fr;
  gap:80px;align-items:start;
}

/* LEFT — sticky rail now includes section header + list */
.svc-rail{
  position:sticky;top:clamp(64px,7vh,88px);
  align-self:start;
  display:flex;flex-direction:column;gap:0;
}
.svc-rail-header{
  padding-bottom:clamp(10px,1.8vh,22px);
  flex-shrink:0;
}
.svc-rail-header .sec-kicker{margin-bottom:6px;font-size:11px}
.svc-rail-header .sec-title{
  font-size:clamp(30px,min(3.5vw,5.5svh),60px);
  margin:0 0 clamp(6px,1vh,14px);
  line-height:1.02;
}
.svc-rail-header .sec-title .wipe-title{
  padding-bottom:0.14em;
}
.svc-rail-header .sec-lead{
  font-size:clamp(12px,min(0.85vw,1.2svh),15px);
  line-height:1.45;
  margin:0;
  max-width:48ch;
}
/* Verstecke Lead-Text wenn Viewport-Höhe zu klein für alle 5 Einträge */
@media(max-height:640px){
  .svc-rail-header .sec-lead{display:none}
  .svc-rail-header{padding-bottom:8px}
}
.svc-list{display:flex;flex-direction:column;position:relative}

/* Roter Quadrat-Indicator — gleitet zum aktiven Eintrag, dreht sich dabei */
.svc-indicator{
  position:absolute;
  left:4px;top:0;
  width:9px;height:9px;
  background:var(--red);
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:transform .55s cubic-bezier(.65,0,.35,1.15), opacity .3s;
}
.svc-indicator.is-ready{opacity:1}

.svc-list .item{
  display:flex;align-items:center;gap:16px;
  padding:18px 0;
  border-top:1px solid var(--line-light);
  cursor:pointer;
  position:relative;
  transition:transform .55s cubic-bezier(.65,0,.35,1.15);
}
.svc-list .item:last-child{border-bottom:1px solid var(--line-light)}
.svc-list .item .num{
  font-family:var(--mono);font-size:12px;letter-spacing:0.2em;
  color:rgba(0,0,0,0.28);
  width:30px;flex-shrink:0;
  transition:color .3s;
}
.svc-list .item .label{
  font-family:var(--serif);
  font-size:clamp(26px,3vw,40px);
  line-height:1.1;letter-spacing:-0.015em;
  font-weight:400;
  position:relative;
  transition:color .3s;
  padding-bottom:12px;
}
/* Magic-Underline entfernt */
.svc-list .item .label::after,.svc-list .item .label::before{display:none}

/* Nicht-aktiv: hellgrau */
.svc-list .item .num{color:rgba(0,0,0,0.28);transition:color .5s cubic-bezier(.65,0,.35,1)}
.svc-list .item .label{color:rgba(0,0,0,0.28);transition:color .5s cubic-bezier(.65,0,.35,1)}
/* Aktiv: schwarz, Item rutscht per transform nach rechts (macht Platz für Dot) */
.svc-list .item.is-active{transform:translateX(30px)}
.svc-list .item.is-active .num{color:rgba(0,0,0,0.85)}
.svc-list .item.is-active .label{color:rgba(0,0,0,0.85)}
/* Hover: etwas dunkler */
.svc-list .item:hover .num{color:rgba(0,0,0,0.55)}
.svc-list .item:hover .label{color:rgba(0,0,0,0.55)}
.svc-list .item .arr{
  margin-left:auto;font-family:var(--mono);font-size:14px;color:rgba(0,0,0,0.3);
  opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;
}
.svc-list .item.is-active .arr{opacity:1;transform:translateX(0)}

/* Progress bar shows position within the section */
.svc-progress{
  height:2px;background:rgba(0,0,0,0.08);
  position:relative;overflow:hidden;
}
.svc-progress-bar{
  position:absolute;left:0;top:0;bottom:0;
  width:0%;
  background:var(--red);
  transition:width .15s linear;
}

/* RIGHT — sticky stage: 5 Fotos, vertikaler Wipe zwischen den Bildern */
.svc-stage{
  --tip-x:50%;
  --tip-y:50%;
  position:sticky;top:clamp(210px,calc(7vh + 155px),270px);
  align-self:start;
  display:block;
  aspect-ratio:16/9;
  min-height:min(52vw,520px);
  background:var(--bg-light-elev);border:1px solid var(--line-light);
  overflow:hidden;
  padding:0;
  margin:0;
  font:inherit;color:inherit;
  cursor:pointer;
  transition:border-color .3s;
  text-decoration:none;text-align:left;
}
button.svc-stage{-webkit-appearance:none;appearance:none}
.svc-stage:hover{border-color:var(--line-light-strong)}

/* Strip: alle 5 Bilder vertikal aneinander, translateY scrollt durch */
.svc-strip{
  position:absolute;inset:0;
  height:500%;
  transition:transform .65s cubic-bezier(.77,0,.18,1);
  will-change:transform;
}
.svc-tile{
  position:relative;
  width:100%;height:20%;
  opacity:1;
  pointer-events:none;
  background-size:cover;
  background-position:center;
}
@media (prefers-reduced-motion:reduce){
  .svc-list .item .label::before{
    transition:opacity .2s ease;
    transform:translate(0,0) scale(1);
  }
  .svc-list .item:not(:hover):not(.is-active) .label::before{
    opacity:0;
    left:0;
    transform:translate(-40%,0) scale(0.35);
  }
  .svc-tile,
  .svc-tile.is-active:not(.svc-tile--in):not(.svc-tile--out):not(.svc-tile--in-rev):not(.svc-tile--out-rev){
    animation:none!important;
    transition:opacity .35s ease;
  }
  .svc-tile.is-active:not(.svc-tile--in):not(.svc-tile--out):not(.svc-tile--in-rev):not(.svc-tile--out-rev){
    clip-path:none;
    opacity:1;
  }
  .svc-tile:not(.is-active){
    opacity:0;
    clip-path:none;
  }
  .svc-tile.svc-tile--in,
  .svc-tile.svc-tile--out,
  .svc-tile.svc-tile--in-rev,
  .svc-tile.svc-tile--out-rev{animation:none!important}
}



/* Stage overlay — service title (left), counter (right) */
.svc-stage-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:24px 26px;
  pointer-events:none;
}
.svc-stage-overlay .meta{
  display:flex;flex-direction:column;gap:6px;
  background:rgba(250,250,248,0.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:14px 18px;
  max-width:60%;
}
.svc-stage-overlay .kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--fg-light-dim);
  display:flex;align-items:center;gap:10px;
}
.svc-stage-overlay .kicker::before{content:"";width:18px;height:1px;background:var(--red)}
.svc-stage-overlay .ttl{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2vw,28px);line-height:1.1;letter-spacing:-0.01em;
  color:var(--fg-light);
}
.svc-stage-overlay .counter{
  font-family:var(--mono);font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--fg-light);
  background:rgba(250,250,248,0.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:10px 14px;
}
.svc-stage-overlay .counter span{color:var(--red);font-weight:600}
.svc-stage-overlay .counter em{color:var(--fg-light-dim);font-style:normal;margin-left:2px}

/* corner ticks on stage hover */
.svc-stage::before{
  content:"";position:absolute;inset:14px;z-index:11;pointer-events:none;
  background:
    linear-gradient(to right, var(--red) 26px, transparent 26px) top left/100% 1px no-repeat,
    linear-gradient(to bottom, var(--red) 26px, transparent 26px) top left/1px 100% no-repeat,
    linear-gradient(to left, var(--red) 26px, transparent 26px) top right/100% 1px no-repeat,
    linear-gradient(to bottom, var(--red) 26px, transparent 26px) top right/1px 100% no-repeat,
    linear-gradient(to right, var(--red) 26px, transparent 26px) bottom left/100% 1px no-repeat,
    linear-gradient(to top, var(--red) 26px, transparent 26px) bottom left/1px 100% no-repeat,
    linear-gradient(to left, var(--red) 26px, transparent 26px) bottom right/100% 1px no-repeat,
    linear-gradient(to top, var(--red) 26px, transparent 26px) bottom right/1px 100% no-repeat;
  opacity:0;
  transition:opacity .3s ease;
}
.svc-stage:hover::before{opacity:1}

/* "Mehr erfahren" — folgt der Maus, sitzt oberhalb des Zeigers (--tip-x/y per JS) */
.svc-stage-tip{
  position:absolute;left:var(--tip-x);top:var(--tip-y);
  transform:translate(-50%,calc(-100% - 12px)) scale(0.92);
  z-index:12;pointer-events:none;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  padding:10px 16px;white-space:nowrap;
  opacity:0;
  transition:opacity .22s ease,transform .12s ease-out;
}
.svc-stage:hover .svc-stage-tip{opacity:1;transform:translate(-50%,calc(-100% - 14px)) scale(1)}

/* Leistungen — Detail-Inhalt nach Klick (Dialog) */
dialog.svc-dialog{
  padding:0;border:none;background:transparent;max-width:min(940px,calc(100vw - var(--pad) * 2));
  width:100%;margin:auto;
}
dialog.svc-dialog::backdrop{
  background:rgba(8,9,11,0.58);
  backdrop-filter:saturate(1.05) blur(10px);-webkit-backdrop-filter:saturate(1.05) blur(10px);
}
.svc-dialog-sheet{
  background:var(--bg-light-surface);color:var(--fg-light);
  border:1px solid var(--line-light);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 28px 72px rgba(0,0,0,0.28);
}
.svc-dialog-head{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding:16px 20px;border-bottom:1px solid var(--line-light);
  background:var(--bg-light-surface);flex-shrink:0;
}
.svc-dialog-title{margin:6px 0 0;font-family:var(--serif);font-weight:400;line-height:1.12;
  font-size:clamp(21px,2.9vw,32px);}
.svc-dialog-close{
  appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;
  flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;line-height:1;
  border:1px solid var(--line-light);border-radius:6px;color:var(--fg-light);background:rgba(139,34,34,0.06);
  font-size:26px;font-family:inherit;transition:border-color .2s,background .2s,color .2s;
}
.svc-dialog-close:hover{border-color:var(--red);background:rgba(139,34,34,0.12);color:var(--red)}
.svc-dialog-scroll{overflow:auto;-webkit-overflow-scrolling:touch;
  max-height:min(78vh,calc(100dvh - 120px));}
.svc-dialog-body{padding:18px 22px 44px;font-family:var(--sans)}
.svc-fetch-err{color:var(--red);font-family:var(--sans);margin:0}

/* Prosa in Detail-Overlay */
.svc-dialog-body .svc-prose--detail h3{margin:0;font-size:13px;color:var(--red);
  letter-spacing:.18em;text-transform:uppercase;font-family:var(--mono);font-weight:500;}
.svc-prose--detail .svc-deck{margin:12px 0 16px;line-height:1.35;font-family:var(--serif)}
.svc-prose--detail .svc-note{margin:12px 0;font-size:15px;line-height:1.55;color:var(--fg-light-dim)}
.svc-video-kicker{font-size:12px;color:var(--red);margin-top:28px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);}
.svc-video-placeholders{display:grid;gap:14px;margin:12px 0 20px;}
.svc-video-placeholder{
  aspect-ratio:16/9;border:2px dashed var(--line-light-strong);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:20px 16px;background:rgba(139,34,34,0.04);outline:none;text-align:center;
}
.svc-video-placeholder:focus-visible{outline:2px solid var(--red);outline-offset:4px;}
.svc-video-ph-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.svc-video-ph-hint{font-size:13px;color:var(--fg-light-dim);font-family:var(--sans);}
.svc-prose--detail h4{margin:24px 0 10px;font-family:var(--serif);font-weight:400;
  font-size:clamp(16px,1.45vw,19px);}
.svc-prose--detail ul{margin:0 0 12px;padding-left:1.2em;line-height:1.62;color:var(--fg-light-dim);}
.svc-prose--detail p{margin:0 0 12px;line-height:1.65;color:var(--fg-light-dim);}
.svc-detail-img{margin:0 0 24px;padding:0;border-radius:8px;overflow:hidden;line-height:0;}
.svc-detail-img img{width:100%;height:auto;display:block;}
.svc-dialog-body:last-child{border-radius:0 0 12px 12px}

@media(max-width:880px){
  .svc-scroll-spacer{grid-template-columns:1fr;gap:40px}
  .svc-rail{position:static}
  .svc-stage{position:static;min-height:240px}
  .svc-stage-overlay .ttl{font-size:18px}
}

/* ============ ÜBER UNS / FILM ============ */
.about{position:relative}
.about-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:center;
}
.about-text p{
  font-size:17px;line-height:1.65;color:var(--fg-dim);max-width:48ch;
}
.about-text p + p{margin-top:18px}
section.light .about-text p{color:var(--fg-light-dim)}
section.light .film{border-color:var(--line-light)}
.film{
  position:relative;aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--line);
  cursor:pointer;
  overflow:hidden;
}
.film .poster{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(139,34,34,0.22),transparent 65%),
    linear-gradient(135deg,#1a1a1a,#0a0a0a);
}
.film .poster::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    transparent 0,transparent 3px,
    rgba(255,255,255,0.015) 3px,rgba(255,255,255,0.015) 4px);
}
.film .play{
  position:absolute;inset:0;display:grid;place-items:center;
  z-index:2;
}
.film .play .ring{
  width:96px;height:96px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.7);
  display:grid;place-items:center;
  transition:transform .4s ease,border-color .25s ease,background .25s ease;
}
.film:hover .play .ring{border-color:var(--red);background:rgba(139,34,34,0.15);transform:scale(1.06)}
.film .play .ring::after{
  content:"";width:0;height:0;
  border-left:18px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  margin-left:5px;
}
.film .meta{
  position:absolute;bottom:24px;left:24px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}
.film .meta span{color:var(--red);margin-right:8px}
.film.is-playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

@media(max-width:880px){
  .about-grid{grid-template-columns:1fr;gap:40px}
}

/* ============ TESTIMONIALS ============ */
.testi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.tcard{
  background:var(--bg-elev);
  border:1px solid var(--line);
  padding:36px;
  display:flex;flex-direction:column;gap:24px;
  transition:border-color .3s,transform .3s;
}
.tcard:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.tcard .quote{
  font-family:var(--serif);font-size:21px;line-height:1.45;
  color:var(--fg);
  position:relative;padding-left:18px;
}
.tcard .quote::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--red);
}
.tcard .who{display:flex;align-items:center;gap:14px;margin-top:auto}
.tcard .who .pic{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a);
  border:1px solid var(--line-strong);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;color:var(--fg-dim);
}
.tcard .who .name{font-weight:600;font-size:14px}
.tcard .who .role{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-dim);margin-top:3px}

/* Testimonials auf hellem Grund: weiße Karten, schwarze Schrift */
section.light .tcard{
  background:#fff;
  border-color:var(--line-light);
}
section.light .tcard:hover{border-color:var(--line-light-strong)}
section.light .tcard .quote{color:var(--fg-light)}
section.light .tcard .who .name{color:var(--fg-light)}
section.light .tcard .who .role{color:var(--fg-light-dim)}
section.light .tcard .who .pic{
  background:linear-gradient(135deg,#f2f2f0,#e6e6e4);
  border-color:var(--line-light-strong);
  color:var(--fg-light-dim);
}

.testi-more{margin-top:28px;text-align:center}
.testi-extra{
  display:none;
  grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px;
}
.testi-extra.is-open{display:grid;animation:teFade .5s ease}
@keyframes teFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:760px){
  .testi-grid,.testi-extra{grid-template-columns:1fr}
}

/* ============ BLOG ============ */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.bcard{
  display:flex;flex-direction:column;gap:18px;
  text-decoration:none;color:inherit;
  transition:transform .3s ease;
}
.bcard:hover{transform:translateY(-3px)}
.bcard .cover{
  aspect-ratio:4/3;
  background:var(--bg-elev);
  border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.bcard .cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,34,34,0.0),rgba(139,34,34,0.2));
  transition:opacity .3s;
  opacity:0;
}
.bcard:hover .cover::after{opacity:1}
.bcard .cover .num{
  position:absolute;top:18px;left:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.25em;
  color:var(--fg-dim);
}
.bcard .cover .glyph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-size:120px;color:rgba(255,255,255,0.05);
}
.bcard .meta{
  font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--fg-dim);
  display:flex;gap:14px;
}
.bcard .meta .dot{color:var(--red)}
.bcard h3{
  font-family:var(--serif);font-weight:400;
  font-size:24px;line-height:1.25;letter-spacing:-0.01em;
  margin:0;text-wrap:balance;
}
.bcard p{
  font-size:14.5px;line-height:1.55;color:var(--fg-dim);margin:0;
}
.bcard .read{
  font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--red);display:inline-flex;gap:8px;align-items:center;
}
.bcard .read::after{content:"→";transition:transform .25s}
.bcard:hover .read::after{transform:translateX(4px)}

/* Blog auf hellem Grund: keine dunklen „Kacheln“, Metatext nicht mit Dark-Token */
section.light .bcard .cover{
  background:linear-gradient(155deg,var(--bg-light-surface) 0%,var(--bg-light-elev) 100%);
  border-color:var(--line-light);
}
section.light .bcard .cover .num{color:var(--fg-light-mute)}
section.light .bcard .cover .glyph{color:rgba(36,36,36,0.06)}
section.light .bcard .meta{color:var(--fg-light-mute)}
section.light .bcard p{color:var(--fg-light-dim)}

@media(max-width:880px){
  .blog-grid{grid-template-columns:1fr}
}

/* ============ Blog-Artikel (Unterseiten) ============ */
body.blog-post-page{
  background:var(--bg-light);
  color:var(--fg-light);
  min-height:100vh;
}
body.blog-post-page .site-parallax-bg{display:none;}
.blog-post-topbar{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line-light);
}
.blog-post-topbar .inner{
  max-width:var(--max);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.blog-post-topbar a.brand img{height:28px;width:auto;display:block}
.blog-post-topbar .back{
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--red);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
}
.blog-post-topbar .back:hover{text-decoration:underline}
.blog-post-hero{padding:clamp(32px,6vw,80px) var(--pad) clamp(24px,4vw,48px);}
.blog-post-hero .wrap{max-width:min(72ch,var(--max));}
.blog-post-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--fg-light-mute);margin:0 0 20px;
}
.blog-post-hero h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.2vw,48px);
  line-height:1.18;letter-spacing:-0.02em;margin:0 0 24px;padding-bottom:0.06em;color:var(--fg-light);
}
.blog-post-deck{
  font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--fg-light-dim);margin:0;max-width:62ch;
}
.blog-post-body{padding:0 var(--pad) clamp(80px,12vw,120px);}
.blog-prose{
  max-width:min(68ch,var(--max));margin:0 auto;
  font-size:17px;line-height:1.7;color:var(--fg-light);
}
.blog-prose h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,30px);
  margin:2.2em 0 0.65em;padding-bottom:0.08em;line-height:1.2;letter-spacing:-0.02em;color:var(--fg-light);
}
.blog-prose h2:first-child{margin-top:0;}
.blog-prose p{margin:0 0 1.1em;}
.blog-prose ul{margin:0 0 1.2em;padding-left:1.2em;}
.blog-prose li{margin:0.35em 0;}
.blog-prose strong{font-weight:600;}
.blog-prose-figure{
  margin:1.6em 0 1.8em;
  border:1px solid var(--line-light);
  border-radius:2px;
  overflow:hidden;
  background:#111;
}
.blog-prose-figure--lead{margin-top:0;}
.blog-prose-figure img{
  display:block;width:100%;height:auto;
}
.blog-prose-figure figcaption{
  padding:10px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  color:var(--fg-light-mute);border-top:1px solid var(--line-light);
}
.blog-prose-cta{
  margin-top:2.4em;padding-top:1.6em;
  border-top:1px solid var(--line-light);
}
.blog-prose-cta__text{
  margin:0 0 1.25em;
  color:var(--fg-light-dim);
  line-height:1.65;
  max-width:62ch;
}
.blog-prose-cta__btn{
  display:inline-flex;align-items:center;gap:0.65em;
  padding:14px 22px;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
}
.blog-prose-cta__btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}
.blog-prose-cta__btn-text{line-height:1;}
.blog-prose-cta__btn-icon{
  font-size:1.05em;font-weight:500;line-height:1;
  opacity:0.82;transform:translateY(-0.04em);
  transition:opacity .15s ease, transform .15s ease;
}
.blog-prose-cta__btn:hover .blog-prose-cta__btn-icon{
  opacity:1;transform:translate(1px, -0.04em);
}
.blog-prose-sources{
  margin-top:2.4em;padding-top:1.4em;
  border-top:1px solid var(--line-light);
}
.blog-prose-sources h2{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--fg-light-mute);margin:0 0 0.9em;
}
.blog-prose-sources ul{
  margin:0;padding:0;list-style:none;
  font-size:14px;line-height:1.55;color:var(--fg-light-dim);
}
.blog-prose-sources li{margin:0.55em 0;}
.blog-prose-sources a{color:var(--red);text-decoration:none;word-break:break-word;}
.blog-prose-sources a:hover{text-decoration:underline}
.blog-post-foot{
  border-top:1px solid var(--line-light);padding:28px var(--pad);
  font-family:var(--mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--fg-light-mute);text-align:center;
}
.blog-post-foot a{color:var(--red);text-decoration:none;font-weight:500}
.blog-post-foot a:hover{text-decoration:underline}

/* Blog: „Wipe“-Transition (horizontal, zwei Flächen wie klassischer Bildwechsel) */
.dm-page-wipe{
  position:fixed;
  inset:0;
  z-index:100000;
  pointer-events:none;
  visibility:hidden;
}
.dm-page-wipe.is-out-active,
.dm-page-wipe.is-out-active--rev,
.dm-page-wipe.is-in-cover,
.dm-page-wipe.is-in-active,
.dm-page-wipe.is-in-active--rev{
  visibility:visible;
}
.dm-page-wipe.is-out-active,
.dm-page-wipe.is-out-active--rev,
.dm-page-wipe.is-in-cover{
  pointer-events:auto;
}
.dm-page-wipe__bar{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
  backface-visibility:hidden;
}
.dm-page-wipe__bar--dark{
  top:0;
  background:var(--bg);
}
.dm-page-wipe__bar--red{
  top:50%;
  background:var(--red);
}
.dm-page-wipe.is-in-cover .dm-page-wipe__bar{
  transform:scaleX(1);
  animation:none;
}
@keyframes dmPageWipeCover{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes dmPageWipeReveal{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}
.dm-page-wipe.is-out-active .dm-page-wipe__bar--dark{
  animation:dmPageWipeCover 0.48s cubic-bezier(.77,0,.18,1) forwards;
}
.dm-page-wipe.is-out-active .dm-page-wipe__bar--red{
  animation:dmPageWipeCover 0.48s cubic-bezier(.77,0,.18,1) 0.12s forwards;
}
/* Blog → Start: Bildschirm von rechts zu (spiegelverkehrt zum Hinweg) */
.dm-page-wipe.is-out-active--rev .dm-page-wipe__bar--red{
  transform-origin:right center;
  animation:dmPageWipeCover 0.48s cubic-bezier(.77,0,.18,1) forwards;
}
.dm-page-wipe.is-out-active--rev .dm-page-wipe__bar--dark{
  transform-origin:right center;
  animation:dmPageWipeCover 0.48s cubic-bezier(.77,0,.18,1) 0.12s forwards;
}
.dm-page-wipe.is-in-active .dm-page-wipe__bar--red{
  animation:dmPageWipeReveal 0.48s cubic-bezier(.77,0,.18,1) 0.08s forwards;
  transform-origin:right center;
}
.dm-page-wipe.is-in-active .dm-page-wipe__bar--dark{
  animation:dmPageWipeReveal 0.48s cubic-bezier(.77,0,.18,1) 0.22s forwards;
  transform-origin:right center;
}
/* Startseite nach Rückkehr: Balken nach links wegziehen (Spiegel zur Artikel-Enthüllung) */
.dm-page-wipe.is-in-active--rev .dm-page-wipe__bar--dark{
  animation:dmPageWipeReveal 0.48s cubic-bezier(.77,0,.18,1) 0.08s forwards;
  transform-origin:left center;
}
.dm-page-wipe.is-in-active--rev .dm-page-wipe__bar--red{
  animation:dmPageWipeReveal 0.48s cubic-bezier(.77,0,.18,1) 0.22s forwards;
  transform-origin:left center;
}
@media (prefers-reduced-motion:reduce){
  .dm-page-wipe{display:none!important}
}

/* ============ FAQ ============ */
.faq-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 1.6fr;
  gap:80px;
  align-items:start;
}
.faq-headline{
  margin:0;
  text-align:left;
}
.faq-list{max-width:none;margin:0}
.faq-item{
  border-top:1px solid var(--line);
}
.faq-item:last-child{border-bottom:1px solid var(--line)}
section.light .faq-item{border-top-color:var(--line-light)}
section.light .faq-item:last-child{border-bottom-color:var(--line-light)}
/* Sanftes Auf-/Zuklappen (moderne Browser) */
.faq-item::details-content{
  block-size:0;
  overflow:hidden;
  opacity:0;
  transition:
    block-size .48s cubic-bezier(0.16,1,0.3,1),
    opacity .36s ease,
    content-visibility .48s allow-discrete;
  transition-behavior:allow-discrete;
}
.faq-item[open]::details-content{
  block-size:auto;
  opacity:1;
}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
  font-weight:500;
  transition:color .28s ease,padding-left .35s cubic-bezier(.7,0,.3,1);
}
section.light .faq-item summary{color:var(--fg-light-dim)}
/* FAQ-Fragen: Glitch-Generierung — nur aktives Zeichen rot, danach Originalfarbe */
.faq-item summary .faq-q-type{
  color:inherit;
}
.faq-item summary .faq-q-char--done{
  color:inherit;
  transition:transform 0.12s ease, color 0.12s ease;
}
.faq-item summary .faq-q-char--active{
  display:inline-block;
  color:var(--red);
  transform:scale(1.32);
  transform-origin:left center;
  vertical-align:-0.05em;
  text-shadow:0 0 14px rgba(139,34,34,0.5);
  transition:transform 0.1s cubic-bezier(0.34,1.25,0.64,1), color 0.1s ease;
}
.faq-item summary:hover .faq-q-char--done,
.faq-item[open] summary .faq-q-char--done,
.faq-item.is-opening summary .faq-q-char--done{
  color:inherit;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover{color:var(--red);padding-left:6px}
.faq-item[open] summary,
.faq-item.is-opening summary{color:var(--fg)}
section.light .faq-item[open] summary,
section.light .faq-item.is-opening summary{color:var(--fg-light)}
.faq-item summary .ico{
  font-family:var(--mono);font-size:16px;color:var(--fg-dim);
  transition:transform .42s cubic-bezier(0.16,1,0.3,1),color .25s;
  flex-shrink:0;
  font-weight:300;
}
section.light .faq-item summary .ico{color:var(--fg-light-dim)}
.faq-item summary:hover .ico{color:var(--red)}
.faq-item[open] summary .ico,
.faq-item.is-opening summary .ico{transform:rotate(45deg);color:var(--red)}
.faq-item .ans{
  padding:0 0 28px;
  font-size:15.5px;line-height:1.65;color:var(--fg-dim);max-width:64ch;
  font-family:var(--sans);letter-spacing:0;text-transform:none;
}
/* JS-Fallback: Höhen-Animation wenn ::details-content nicht greift */
.faq-item.is-js-animated .ans{
  overflow:hidden;
  will-change:height,opacity;
}
.faq-item.is-js-animated:not([open]) .ans{
  padding-bottom:0;
}
.faq-item .ans p{margin:0 0 14px}
.faq-item .ans p:last-child{margin-bottom:0}
.faq-item .ans ul{
  margin:0 0 16px;padding-left:1.25em;
  list-style:disc;
}
.faq-item .ans li{margin-bottom:8px;line-height:1.55}
.faq-item .ans li:last-child{margin-bottom:0}
section.light .faq-item .ans{color:var(--fg-light-dim)}
@keyframes faqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.faq-item[open] .ans,
.faq-item.is-opening .ans{
  animation:faqIn .42s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion:reduce){
  .faq-item::details-content{transition:none}
  .faq-item[open] .ans,
  .faq-item.is-opening .ans{animation:none}
}

@media(max-width:880px){
  .faq-grid{grid-template-columns:1fr;gap:40px}
  .faq-headline{position:static}
}

/* ============ KONTAKT ============ */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);
  align-items:stretch;
}
.contact-left{display:flex;flex-direction:column}
.contact-left .sec-kicker{margin-bottom:16px}
.contact-left .sec-title{margin-bottom:clamp(12px,2vh,20px)}
.contact-left .sec-lead{margin-bottom:clamp(24px,3vh,40px);max-width:48ch}
.contact-channels{display:flex;flex-direction:column;gap:12px}
.ch{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:18px 22px;
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:0;
  text-decoration:none;color:inherit;
  transition:border-color .25s,box-shadow .25s,transform .25s,background .25s;
}
.ch:hover{border-color:var(--red);transform:translateX(4px);box-shadow:0 4px 20px rgba(139,34,34,0.1)}
.ch .ic{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(139,34,34,0.12);color:var(--red);
  flex-shrink:0;
}
.ch .ic svg{width:22px;height:22px}
.ch.wa .ic{background:rgba(37,211,102,0.15);color:#1fae57}
.ch .body .lead{font-weight:600;font-size:15px;letter-spacing:-0.01em}
.ch .body .sub{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--fg-dim);margin-top:4px}
.ch .arr{font-family:var(--mono);font-size:16px;color:var(--fg-dim);transition:color .25s,transform .25s;flex-shrink:0}
.ch:hover .arr{color:var(--red);transform:translateX(4px)}

/* Kontakt: helle Sektion */
#kontakt .ch{
  background:#fff;
  border-color:rgba(0,0,0,0.09);
  color:var(--fg-light);
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
#kontakt .ch .body .lead{color:var(--fg-light)}
#kontakt .ch .body .sub{color:rgba(0,0,0,0.45)}
#kontakt .ch .arr{color:rgba(0,0,0,0.35)}
#kontakt .ch:hover{box-shadow:0 6px 24px rgba(139,34,34,0.12);border-color:var(--red)}
#kontakt .ch:hover .arr{color:var(--red)}

.contact-form{
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:0;
  padding:clamp(28px,4vw,44px);
  display:flex;flex-direction:column;
  box-sizing:border-box;
}
#kontakt .contact-form{
  background:#fff;
  border-color:rgba(0,0,0,0.09);
  color:var(--fg-light);
  box-shadow:0 2px 16px rgba(0,0,0,0.07),0 1px 0 rgba(0,0,0,0.04);
}
#kontakt .contact-form h3{color:var(--fg-light)}

.contact-form h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,1.8vw,26px);
  margin:0 0 28px;letter-spacing:-0.01em;
}

/* ── Floating-label fields ── */
.field{position:relative;margin-bottom:16px}
.field input,.field textarea,.field select{
  width:100%;
  background:#fff;
  border:1.5px solid rgba(0,0,0,0.14);
  border-radius:0;
  color:var(--fg-light);
  padding:22px 18px 8px;
  font:inherit;font-size:15px;
  font-family:var(--sans);
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:none;
}
.field label{
  position:absolute;
  left:18px;top:15px;
  font-family:var(--sans);font-size:15px;font-weight:400;
  color:rgba(0,0,0,0.4);
  pointer-events:none;
  transform-origin:left top;
  transition:top .15s ease,font-size .15s ease,color .15s ease,letter-spacing .15s ease,font-family .15s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:7px;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-family:var(--mono);
  color:var(--red);
}
.field textarea{resize:none;min-height:130px;padding-top:24px;height:100%}
.field textarea + label{top:18px}
/* Nachrichtenfeld wächst und füllt verbleibende Formularhöhe */
.contact-form .field:has(textarea){flex:1;display:flex;flex-direction:column;margin-bottom:0}
.contact-form .field:has(textarea) textarea{flex:1;height:auto}
.field-error{
  font-family:var(--mono);font-size:11px;color:#8B2222;
  margin-top:5px;padding-left:4px;display:none;
}
.field.is-error input,.field.is-error textarea{border-color:#8B2222;box-shadow:0 0 0 3px rgba(139,34,34,0.08)}
.field.is-error .field-error{display:block}
.form-submit{width:100%;justify-content:center;border-radius:0}
.form-submit-wrap{margin-top:16px}
.form-submit-wrap{
  position:relative;
  width:100%;
  min-height:52px;
}
.form-send-stage{
  width:100%;
  max-width:100%;
  line-height:0;
}
.form-submit-wrap.is-animating .form-send-stage{
  background:#291d89;
  border-radius:12px;
  overflow:hidden;
}
.form-send-stage[hidden]{display:none!important;}
.form-send-stage .dm-form-send-svg-full{
  display:block;
  width:100%;
  height:auto;
  max-height:min(32vw,220px);
}
.form-submit-wrap.is-animating .form-submit{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media(max-width:880px){
  .contact-grid{grid-template-columns:1fr}
  .contact-left .sec-lead{margin-bottom:24px}
}

/* ============ FOOTER ============ */
.footer-marquee{
  padding:80px 0 0;overflow:hidden;border-top:1px solid var(--line);
}
.footer-marquee .t{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(64px,12vw,180px);letter-spacing:-0.03em;line-height:1;
  display:flex;gap:60px;white-space:nowrap;
  animation:fmScroll 22s linear infinite;
}
.footer-marquee em{font-style:italic;color:var(--red);font-weight:400}
@keyframes fmScroll{to{transform:translateX(-50%)}}
/* ── CANVAS FOOTER ── */
footer.canvas-footer{
  position:relative;width:100%;height:500px;
  background:#000;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.1);
  isolation:isolate;
}
footer.canvas-footer .footer-ascii-motion.footer-ascii-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:5;
  pointer-events:none;
  overflow:visible;
}
.footer-content{
  position:relative;z-index:20;
  padding:80px var(--pad) 0;
  display:flex;justify-content:space-between;align-items:flex-start;
  pointer-events:none;
}
/* Kinder erben pointer-events nicht — ohne * blockiert z. B. .footer-brand-name den ASCII-Hover oben */
.footer-content *{
  pointer-events:none;
}
.footer-content a,
.footer-content button{
  position:relative;
  z-index:40;
  pointer-events:auto;
}
.footer-brand-name{
  font-family:var(--sans);font-size:clamp(2rem,5vw,4rem);
  font-weight:200;letter-spacing:-0.02em;
  margin:0;color:#fff;text-transform:lowercase;
}
.footer-brand-sub{
  font-size:1rem;font-weight:300;letter-spacing:0.1em;
  color:#a0a0a0;margin:10px 0 0 4px;text-transform:uppercase;
}
.footer-ascii{
  font-family:var(--mono);font-size:clamp(13px,1.1vw,17px);line-height:1.8;
  color:rgba(255,255,255,0.22);text-align:right;
  letter-spacing:0.04em;
}
.footer-ascii span{display:block}
.footer-meta{
  position:relative;z-index:70;
  padding:0 var(--pad) 40px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:0.75rem;
  text-transform:uppercase;letter-spacing:0.1em;color:#555;
  flex-wrap:wrap;gap:20px;
  pointer-events:auto;
}
.footer-meta *{
  pointer-events:none;
}
.footer-meta a,
.footer-meta .footer-socials,
.footer-meta .footer-socials li,
.footer-meta .footer-socials a,
.footer-meta .footer-links,
.footer-meta .footer-links a{
  position:relative;
  z-index:71;
  pointer-events:auto;
}
.footer-links{display:flex;gap:clamp(16px,3vw,40px);}
.footer-links a{color:#777;text-decoration:none;transition:color .25s;}
.footer-links a:hover{color:#8B2222 !important;}
.footer-copyright{color:#555;}
/* Social Icons */
ul.footer-socials{
  list-style:none;padding:0;margin:0;
  display:flex;align-items:center;gap:6px;
}
.footer-socials .icon-content{position:relative;}
.footer-socials .icon-content .tooltip{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  color:#fff;padding:5px 10px;border-radius:4px;
  background:rgba(255,255,255,0.1);
  opacity:0;visibility:hidden;
  font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  transition:all .3s ease;pointer-events:none;white-space:nowrap;
}
.footer-socials .icon-content:hover .tooltip{opacity:1;visibility:visible;top:-42px;}
.footer-socials .icon-content a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  color:#888;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  text-decoration:none;overflow:hidden;position:relative;
  transition:all .3s ease;
}
.footer-socials .icon-content a:hover{color:#fff;border-color:transparent;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.footer-socials .icon-content a svg{position:relative;z-index:1;width:20px;height:20px;}
.footer-socials .icon-content a .filled{
  position:absolute;bottom:0;left:0;width:100%;height:0;
  background:#000;transition:height .3s ease;
}
.footer-socials .icon-content a:hover .filled{height:100%;}
.footer-socials .icon-content a[data-social="facebook"]  .filled{background:#1877f2;}
.footer-socials .icon-content a[data-social="whatsapp"]  .filled{background:#128c7e;}
.footer-socials .icon-content a[data-social="linkedin"]  .filled{background:#0a66c2;}
.footer-socials .icon-content a[data-social="instagram"] .filled{background:linear-gradient(45deg,#405de6,#b33ab4,#e1306c,#fd1f1f);}
.footer-socials .icon-content a[data-social="youtube"]   .filled{background:#ff0000;}
@media(max-width:768px){
  .footer-content{flex-direction:column;gap:32px;}
  .footer-ascii{text-align:left;}
  .footer-meta{flex-direction:column;align-items:flex-start;}
  .footer-links{flex-wrap:wrap;gap:16px;}
}
@media(prefers-reduced-motion:reduce){
  footer.canvas-footer .footer-ascii-motion{display:none;}
}

/* ============ REVEAL ON SCROLL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.is-in{opacity:1;transform:translateY(0)}

@media(max-width:880px){
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    gap:clamp(12px,3vmin,28px);
    padding-top:max(env(safe-area-inset-top,0px),clamp(92px,16vmin,148px));
    --hero-fig-h:min(min(760px,calc(100svh - 8.5rem)),86vmin);
    --hero-fig-cap-v:72vh;
  }
  .hero-copy{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:100%;
    align-self:start;
    justify-content:flex-start;
    gap:clamp(14px,2.5vmin,28px);
    padding-bottom:clamp(12px,3vmin,40px);
  }
  .hero-figure{
    grid-column:1;
    grid-row:2;
    justify-self:center;
    align-self:end;
    --hero-fig-box-h:min(calc(var(--hero-fig-h) * var(--hero-fig-scale)),min(var(--hero-fig-cap-v),760px));
    height:var(--hero-fig-box-h);
    width:min(calc(100vw - var(--pad) * 2),calc(var(--hero-fig-box-h) * 1.12));
    max-width:none;
  }
  .hero-headline{
    max-width:100%;
  }
  .hero-headline .wipe-title > span{
    white-space:nowrap;
    max-width:none;
  }
  .nav{grid-template-columns:1fr auto 1fr}
  section{padding:90px var(--pad)}
}
@supports (height:100svh){
  @media(max-width:880px){
    .hero{--hero-fig-cap-v:72svh}
  }
}

/* ============ PERFORMANCE + HERO REFRESH (2026) ============ */
:root{
  /* System stacks remove three render-blocking Google Font stylesheets and still keep a premium editorial feel. */
  --serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sans:"Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular","Cascadia Code","Liberation Mono",Menlo,Consolas,monospace;
  --headline:"JetBrains Mono","SFMono-Regular","Cascadia Code","Liberation Mono",Menlo,Consolas,monospace;
  --prose:"Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hero-accent-soft:rgba(139,34,34,0.18);
}

.nav.is-scrolled,
body.is-scrolled .nav-lang,
body.is-scrolled .nav-font,
.logo-ticker{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.hero{
  isolation:isolate;
  background:#000;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
}
.hero::before{
  inset:clamp(86px,12vmin,150px) var(--pad) 112px var(--pad);
  border:none;
  background:none;
}
.hero::after{
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:none;
  -webkit-mask-image:none;
}
.hero-eyebrow{
  width:max-content;
  max-width:100%;
  margin:0 0 -0.35rem;
  padding:0.48rem 0.72rem;
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.74);
  background:rgba(255,255,255,0.045);
  font-family:var(--mono);
  font-size:clamp(10px,0.84vw,12px);
  font-weight:650;
  letter-spacing:0.16em;
  line-height:1.35;
  text-transform:uppercase;
}
.hero-headline{
  font-family:var(--headline);
  font-weight:600;
  font-size:clamp(44px,7.2vw,112px);
  line-height:0.96;
  letter-spacing:-0.04em;
  text-wrap:balance;
  font-variant-ligatures:none;
}
.sec-title{
  font-family:var(--headline);
  font-weight:600;
  letter-spacing:-0.035em;
  font-variant-ligatures:none;
}
.hero-headline .wipe-title,
.hero-headline .wipe-title > span,
.sec-title .wipe-title,
.sec-title .wipe-title > span{
  font-family:inherit;
}
.hero-headline em,
.hero-headline .wipe-title em{
  font-style:normal;
  color:#fff;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  filter:none;
}
.hero-sub{
  font-family:var(--prose);
  color:rgba(255,255,255,0.74);
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.55;
  max-width:58ch;
}
.hero-text{font-family:var(--prose);}
.hero .btn{
  border-radius:0;
  min-height:52px;
}
.hero .btn-primary{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
.hero .btn-primary:hover{
  background:var(--red-bright);
  border-color:var(--red-bright);
}
.hero .btn-ghost{
  background:rgba(255,255,255,0.035);
  border-color:rgba(255,255,255,0.18);
}
.hero-concept-card{
  position:absolute;
  right:calc(var(--pad) + min(27vw,390px));
  bottom:118px;
  z-index:6;
  display:grid;
  gap:4px;
  min-width:min(270px,42vw);
  padding:16px 18px;
  border:1px solid rgba(255,255,255,0.13);
  background:rgba(12,12,12,0.72);
  box-shadow:0 20px 42px rgba(0,0,0,0.22);
  transform:translate3d(0,0,0);
}
.hero-concept-card__kicker,
.hero-concept-card__meta{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.52);
}
.hero-concept-card__title{
  font-size:clamp(18px,1.5vw,24px);
  line-height:1.1;
  letter-spacing:-0.035em;
}
.hero-figure{
  opacity:0.92;
  contain:none;
  overflow:visible;
}
body.hero-concept-1 .hero{
  --hero-accent-soft:rgba(139,34,34,0.16);
}
body.hero-concept-1 .hero-concept-card__kicker::after{content:" 01"}
body.hero-concept-1 .hero-concept-card__title{font-family:var(--serif);font-weight:600;letter-spacing:-0.025em}
body.hero-concept-1 .hero-concept-card__title::after{content:""}

body.hero-concept-2 .hero{
  background:#000;
}
body.hero-concept-2 .hero::before{
  transform:skewY(-3deg);
  border:none;
}
body.hero-concept-2 .hero-headline{
  text-transform:uppercase;
  letter-spacing:-0.055em;
}
body.hero-concept-2 .hero-concept-card{
  border-color:rgba(139,34,34,0.32);
  background:linear-gradient(135deg, rgba(139,34,34,0.58), rgba(15,15,15,0.8));
}
body.hero-concept-2 .hero-concept-card__kicker::after{content:" 02"}
body.hero-concept-2 .hero-concept-card__title::before{content:"Momentum für Wissensarbeit"}
body.hero-concept-2 .hero-concept-card__title{font-size:0;color:transparent}
body.hero-concept-2 .hero-concept-card__title::before{font-size:clamp(18px,1.5vw,24px);color:#fff}

body.hero-concept-3 .hero{
  background:#000;
}
body.hero-concept-3 .hero-headline{
  max-width:none;
}
body.hero-concept-3 .hero-sub{
  max-width:50ch;
  color:rgba(255,255,255,0.82);
}
body.hero-concept-3 .hero-concept-card{
  background:#f5f1ed;
  color:#171717;
  border-color:rgba(255,255,255,0.2);
}
body.hero-concept-3 .hero-concept-card__kicker,
body.hero-concept-3 .hero-concept-card__meta{color:rgba(0,0,0,0.55)}
body.hero-concept-3 .hero-concept-card__kicker::after{content:" 03"}
body.hero-concept-3 .hero-concept-card__title{font-size:0;color:transparent}
body.hero-concept-3 .hero-concept-card__title::before{content:"Pilot in 6–10 Wochen";font-size:clamp(18px,1.5vw,24px);color:#171717}
body.hero-concept-3 .hero-pedestal-img{display:none}

@media(max-width:1100px){
  .hero-concept-card{right:var(--pad);bottom:92px;min-width:230px}
}
@media(max-width:880px){
  .hero{
    height:auto;
    max-height:none;
    min-height:100svh;
    padding-bottom:92px;
  }
  .hero::before{inset:84px var(--pad) 92px var(--pad)}
  .hero-headline{
    font-size:clamp(42px,14.5vw,68px);
    line-height:0.98;
    letter-spacing:-0.058em;
  }
  .hero-headline .wipe-title > span{white-space:normal}
  .hero-copy{gap:18px}
  .hero-concept-card{
    position:relative;
    right:auto;
    bottom:auto;
    grid-column:1;
    grid-row:2;
    justify-self:start;
    width:min(100%,360px);
    margin-top:-10px;
  }
  .hero-figure{grid-row:3;opacity:0.72}
}
@media(max-width:560px){
  .hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .hero .btn{justify-content:center;width:100%}
  .hero-eyebrow{width:100%;font-size:10px}
  .logo-ticker-label{
    font-size:10px;
    letter-spacing:0.18em;
    max-width:min(92vw,420px);
    padding-right:clamp(40px,12vw,64px);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero::after{animation:none!important;background-position:0 0!important}
  .hero::after,
  .site-parallax-bg,
  .logo-ticker-track,
  .footer-marquee .t{animation:none!important;transform:none!important;will-change:auto!important}
  .reveal{transition:none!important;transform:none!important;opacity:1!important}
}

/* ============ 2026-05 fluid hero + services corrective pass ============ */
.hero{
  --hero-fig-h:min(min(960px,calc(100svh - 6rem)),82vmin);
  --hero-fig-cap-v:78svh;
  --hero-max:none;
  max-width:none;
  margin-inline:0;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,0.92fr);
  column-gap:clamp(18px,4vw,72px);
  padding-top:clamp(92px,12svh,144px);
  padding-bottom:clamp(54px,8svh,92px);
  min-height:100svh;
  height:100svh;
  max-height:100svh;
  overflow:hidden;
}
.hero-copy{
  align-self:center;
  justify-content:center;
  gap:clamp(16px,2.4vmin,30px);
  max-width:min(960px,calc(100vw - var(--pad) * 2));
  padding-bottom:0;
}
@media (min-width:881px){
  .hero-copy{
    width:min(1050px,calc(100vw - var(--pad) * 2));
  }
}
.hero-headline{
  font-size:clamp(44px,7.1vw,118px);
  line-height:0.98;
  letter-spacing:-0.06em;
  text-wrap:balance;
}
@supports (font-size:1cqi){
  .hero-headline{font-size:clamp(42px,7.2cqi,112px)}
}
.hero-headline .wipe-title{
  display:block;
  padding-inline-start:0;
  padding-inline-end:0.08em;
  padding-bottom:0.14em;
}
.hero-headline .wipe-title > span{
  white-space:normal;
}
.hero-sub{
  max-width:min(58ch,100%);
  margin-bottom:clamp(10px,2vmin,20px);
}
.hero-figure{
  place-self:end end;
  width:min(48vw,calc(var(--hero-fig-box-h) * 1.28));
  opacity:0.74;
  z-index:0;
  pointer-events:none;
}
.hero::before{
  inset:clamp(86px,12svh,132px) var(--pad) clamp(66px,9svh,100px) var(--pad);
  opacity:0;
  border:none;
  background:none;
}
.hero-concept-card{
  right:var(--pad);
  bottom:clamp(76px,9svh,118px);
  max-width:min(320px,34vw);
}
body.hero-concept-2 .hero-headline{
  font-size:clamp(38px,6.3vw,96px);
  line-height:1.02;
  letter-spacing:-0.045em;
  text-transform:none;
  max-width:100%;
  text-shadow:none;
}
body.hero-concept-2 .hero-headline .wipe-title > span{
  white-space:nowrap;
}
/* V1/V2: „der Fortschritt.“ bleibt zusammen (text-wrap/balance bricht sonst „der“ ab) */
body.hero-concept-1 .hero-headline .hero-der-fortschritt,
body.hero-concept-2 .hero-headline .hero-der-fortschritt{
  white-space:nowrap;
}
body.hero-concept-2 .hero-copy::before{
  display:none;
}
body.hero-concept-3 .hero-concept-card__title::before{content:"Vom Wissen zur Wirkung"}
@media(max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(240px,0.72fr)}
  .hero-concept-card{display:none}
}
@media(max-width:880px){
  .hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:clamp(92px,15svh,124px);
    padding-bottom:clamp(56px,10svh,84px);
    gap:clamp(22px,5vw,34px);
  }
  .hero::before{inset:76px var(--pad) 62px var(--pad)}
  .hero-copy{width:100%;max-width:none;gap:18px}
  .hero-headline,
  body.hero-concept-2 .hero-headline,
  body.hero-concept-3 .hero-headline{
    max-width:100%;
    font-size:clamp(42px,13.2vw,72px);
    line-height:1;
    letter-spacing:-0.055em;
  }
  .hero-figure{
    position:absolute;
    right:0;
    bottom:0;
    width:min(92vw,620px);
    height:min(48svh,430px);
    opacity:0.38;
  }
  .hero-sub{font-size:clamp(16px,4.2vw,19px)}
}
@media(max-width:560px){
  .hero{justify-content:flex-start}
  .hero-eyebrow{font-size:9.5px;line-height:1.45;letter-spacing:0.13em}
  body.hero-concept-2 .hero-copy::before{inset:-18px -12px -14px -12px}
}

.svc-scroll-spacer{
  grid-template-columns:minmax(280px,0.86fr) minmax(420px,1.28fr);
  gap:clamp(32px,5vw,72px);
}
.svc-rail{top:clamp(64px,7vh,88px)}
.svc-stage{top:clamp(210px,calc(7vh + 155px),270px)}
.svc-list .item{padding:clamp(9px,1.2vh,15px) 0}
.svc-list .item .label{font-size:clamp(20px,min(2.1vw,3.5svh),34px)}
.svc-list .item{padding:clamp(13px,1.55vw,18px) 0}
.svc-list .item .label{font-size:clamp(24px,2.55vw,38px)}
.svc-tile{
  clip-path:none;
  opacity:1;
  transform:none;
}
.svc-tile.is-active{
  clip-path:none!important;
  opacity:1;
  transform:none;
  z-index:2;
}
.svc-tile.svc-tile--in,
.svc-tile.svc-tile--out,
.svc-tile.svc-tile--in-rev,
.svc-tile.svc-tile--out-rev{animation:none!important}
.svc-stage-overlay .meta,.svc-stage-overlay .counter{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:880px){
  .svc-wrap{margin-top:28px}
  .svc-scroll-spacer{display:flex;flex-direction:column;gap:24px;min-height:auto!important}
  .svc-rail{position:static;gap:16px;max-height:none;overflow:visible}
  .svc-rail-header{padding-bottom:16px}
  .svc-list{gap:0;border-bottom:1px solid var(--line-light)}
  .svc-indicator{display:none}
  .svc-list .item.is-active{transform:none}
  .svc-list .item{padding:15px 0;align-items:center}
  .svc-list .item .label{font-size:clamp(23px,7vw,34px);padding-bottom:8px}
  .svc-list .item .arr{opacity:1;transform:none}
  .svc-progress{display:none}
  .svc-stage{position:relative;top:auto;min-height:0;aspect-ratio:4/3;width:100%}
  .svc-stage::before,.svc-stage-tip{display:none}
  .svc-stage-overlay{padding:16px;gap:10px}
  .svc-stage-overlay .meta{max-width:100%;padding:12px 13px}
  .svc-stage-overlay .kicker{font-size:9px;letter-spacing:0.16em}
  .svc-stage-overlay .counter{display:none}
}
@media(max-width:520px){
  .svc-stage{aspect-ratio:1/1}
  .svc-stage-overlay{align-items:flex-start;top:0;bottom:auto}
  .svc-stage-overlay .meta{background:rgba(250,250,248,0.9)}
}
@media (prefers-reduced-motion:reduce){
  .svc-tile{transition:none!important;transform:none!important}
}

html{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
.logo-ticker-scroll{overflow:hidden;contain:paint}
.logo-ticker{overflow:hidden}
@media(max-width:880px){
  .logo-ticker{overflow:visible;contain:none}
}
/* Nur Mobil — Desktop braucht aspect-ratio + min-height für den Bild-Streifen */
@media(max-width:880px){
  .svc-stage{width:100%;min-height:0;height:auto;max-width:100%}
}
.svc-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image:linear-gradient(135deg,rgba(0,0,0,0.32),rgba(139,34,34,0.24) 50%,rgba(8,10,14,0.2));
}
.svc-tile::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(135deg,rgba(0,0,0,0.1),rgba(139,34,34,0.18) 48%,rgba(255,255,255,0.12));
  mix-blend-mode:multiply;
}

@media(max-width:560px){
  .nav-lang{top:94px;right:116px;background:rgb(10,10,10);border-color:rgba(255,255,255,0.08)}
  .nav-font{top:94px;right:20px;background:rgb(10,10,10);border-color:rgba(255,255,255,0.08)}
  body.is-scrolled .nav-lang,body.is-scrolled .nav-font{top:82px}
  .hero{padding-top:clamp(146px,18svh,168px)}
  .hero-headline,
  body.hero-concept-2 .hero-headline,
  body.hero-concept-3 .hero-headline{
    font-size:clamp(28px,7.85vw,38px);
    letter-spacing:-0.05em;
  }
}

/* ============ Text-only Aristotle hero (no binary assets in PR diff) ============ */
.hero{
  grid-template-columns:minmax(0,0.88fr) minmax(420px,1.12fr);
  column-gap:clamp(28px,5vw,96px);
  align-items:center;
  background:#000;
}
.hero-copy{max-width:min(760px,calc(100vw - var(--pad) * 2))}
@media (min-width:881px){.hero-copy{width:min(760px,calc(54vw - var(--pad)))} }
.hero-headline,
body.hero-concept-2 .hero-headline,
body.hero-concept-3 .hero-headline{
  max-width:none;
  font-size:clamp(56px,6.7vw,132px);
  line-height:0.92;
  letter-spacing:-0.068em;
  text-transform:none;
}
.hero .wipe-title{overflow:visible}
.hero .wipe-title::before,
.hero .wipe-title::after{display:none!important}
.hero .wipe-title > span{clip-path:none!important;animation:none!important}
.hero-sub{max-width:52ch;color:rgba(255,255,255,0.72);font-family:var(--prose);font-size:clamp(14px,1.05vw,17px);line-height:1.75;font-weight:400;letter-spacing:0.01em;}
.hero-text{font-family:var(--prose);}
.hero-concept-card{display:none}
.hero-figure.hero-figure--aristotle{
  grid-column:2;
  grid-row:1;
  position:relative;
  place-self:end center;
  width:min(62vw,980px);
  height:min(82svh,820px);
  min-height:560px;
  margin:0;
  overflow:visible !important;
  background:none !important;
  border:none !important;
  contain:none !important;
  z-index:2;
  pointer-events:auto;
}
/* Konzept 3: Grid-Muster ausblenden (bleibt bei Konzept 4 erhalten) */
body.hero-concept-3:not(.hero-concept-4) .hero::after{display:none}
/* Konzept 3: immer Viewport-Höhe, kompaktere Typo + Figur (1080p & dynamisch) */
body.hero-concept-3 .hero{
  container-type:inline-size;
  container-name:hero-v3;
  min-height:100svh;
  height:100svh;
  max-height:100svh;
  align-items:stretch;
  padding-top:clamp(64px,8.5svh,104px);
  --hero-ticker-stack:calc(
    var(--hero-logo-h,72px) + var(--hero-logo-pad-b,24px) + clamp(40px,8vh,96px)
  );
  padding-bottom:var(--hero-ticker-stack);
  overflow:visible;
}
@supports (height:100dvh){
  body.hero-concept-3 .hero{
    min-height:100dvh;
    height:100dvh;
    max-height:100dvh;
  }
}
body.hero-concept-3 .hero-copy{
  align-self:center;
}
body.hero-concept-3 .hero{
  grid-template-columns:minmax(0,1.05fr) minmax(340px,0.95fr);
  --hero-fig-rail-w:min(58vw,calc(100% - var(--pad) - 36%));
  --hero-fig-rail-left:max(
    calc(var(--pad) + 34%),
    calc(100% - var(--pad) - var(--hero-fig-rail-w))
  );
}
/* Logo-Leiste nur linke Hälfte — rechts beginnt die ASCII-Spalte */
body.hero-concept-3 .logo-ticker{
  z-index:12;
  left:0;
  right:calc(var(--pad) + var(--hero-fig-rail-w));
  padding-bottom:max(env(safe-area-inset-bottom,0px),var(--hero-logo-pad-b,24px));
  border-right:none;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.42) 20%,
    rgba(0,0,0,0.88) 52%,
    #000 100%
  );
}
body.hero-concept-3 .hero::before{
  content:"";
  position:absolute;
  left:0;
  right:calc(var(--pad) + var(--hero-fig-rail-w));
  bottom:0;
  top:auto;
  width:auto;
  height:clamp(120px,18vh,220px);
  z-index:8;
  opacity:1;
  pointer-events:none;
  border:none;
  background:linear-gradient(180deg,transparent 0%,#000 88%);
}
/* ASCII: rechte Spalte (ab Mitte), direkt im Hero — ohne Figure-Clip */
body.hero-concept-3 .hero-figure.hero-figure--aristotle{
  display:none !important;
}
body.hero-concept-3 .hero-ascii-layer{
  position:absolute !important;
  z-index:15;
  left:var(--hero-fig-rail-left);
  right:var(--pad);
  bottom:0 !important;
  top:auto !important;
  width:auto;
  height:var(--hero-ascii-zone-h) !important;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  overflow:visible;
  clip-path:none;
  /* Layer darf Leistungen nicht überdecken — nur die Canvas ist interaktiv */
  pointer-events:none;
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  background:none;
  border:none;
  --hero-ascii-scale:1;
  --hero-ascii-zone-h:calc(
    100svh - clamp(64px,8.5svh,104px) - 12px
  );
}
body.hero-concept-3 .hero-headline{
  max-width:min(22ch,96%);
  font-size:clamp(28px,min(3.8vw,6.2svh),82px);
  line-height:0.93;
  letter-spacing:-0.056em;
}
@supports (font-size:1cqi){
  body.hero-concept-3 .hero-headline{
    font-size:clamp(26px,7cqi,78px);
  }
}
body.hero-concept-3 .hero-sub{
  font-size:clamp(14px,min(1.1vw,1.55svh),19px);
  max-width:min(52ch,100%);
  padding-inline-start:clamp(14px,1.8vw,22px);
  margin-bottom:0;
}
body.hero-concept-3 .hero-text{
  gap:clamp(16px,2.4vmin,30px);
}
/* V4: Figur im Grid; V3 nutzt absolute Positionierung oben */
body.hero-concept-3.hero-concept-4 .hero-figure.hero-figure--aristotle{
  width:min(51cqw,44vw,calc(100svh * 0.46));
  place-self:stretch center;
  height:auto;
  min-height:0;
  max-height:none;
  clip-path:inset(0 -50vw 0 -50vw);
}
body.hero-concept-3 .hero-code-steps{
  font-size:clamp(8px,min(0.62vw,0.95svh),11px);
  right:clamp(32px,6cqw,80px);
}
.hero-aristotle{
  position:absolute;
  inset:0;
  background:transparent;
  z-index:2;
}
.hero-pedestal-img{
  position:absolute;
  left:50%;
  bottom:var(--hero-logo-h,72px);
  z-index:25;
  width:min(93.5%,765px);
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
}
.hero-bust-wrap{
  position:absolute;
  left:50%;
  /* Büste am unteren Rand des Figure-Containers (Logo-Abstand steckt in .hero / .hero-figure bottom) */
  bottom:0;
  z-index:30;
  width:min(96%,920px);
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  min-height:0;
}
body.hero-concept-3 .hero-bust-wrap,
body.hero-concept-3 .hero-pedestal-img,
body.hero-concept-3 .hero-aristotle{
  display:none !important;
}
.hero-bust-img{
  display:block;
  width:100%;
  mix-blend-mode:screen;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,0.55));
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
/* Originalfarben: kein Screen-Blend (verfälscht Graubraun); kein roter Drop-Glow wie bei Raster-Büste */
.hero-bust-img.hero-bust-ascii-root{
  mix-blend-mode:normal;
  filter:none;
}
/* ASCII-Büste (Inline — skaliert; absolut am Sockel ausgerichtet, damit die riesige Layout-Box der <pre> den Hero nicht verschiebt) */
.hero-bust-ascii-root{
  position:relative;
  min-height:clamp(260px,40vh,560px);
  overflow:visible;
  pointer-events:auto;
}
body:not(.hero-concept-3) .hero-bust-ascii-root{
  --hero-ascii-scale:0.44;
}
/* Hero-Wobble: ascii-motion.css (container über #heroAsciiMount) */
@media(min-width:1400px){
  body:not(.hero-concept-3) .hero-bust-ascii-root{--hero-ascii-scale:0.50}
}
@media(min-width:1800px){
  body:not(.hero-concept-3) .hero-bust-ascii-root{--hero-ascii-scale:0.54}
}
@media(max-width:1100px){
  body:not(.hero-concept-3) .hero-bust-ascii-root{--hero-ascii-scale:0.38}
}
@media(max-width:880px){
  body:not(.hero-concept-3) .hero-bust-ascii-root{--hero-ascii-scale:0.32}
}
@media(max-width:560px){
  body:not(.hero-concept-3) .hero-bust-ascii-root{--hero-ascii-scale:0.26}
}
body.hero-concept-3 .hero-ascii-layer.hero-ascii-motion-mount,
body.hero-concept-3 #heroAsciiRoot{
  position:absolute !important;
  bottom:0 !important;
  top:auto !important;
  min-height:0 !important;
  height:var(--hero-ascii-zone-h) !important;
  max-height:none !important;
  width:auto;
  overflow:visible;
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
}
body.hero-concept-3 .hero-ascii-layer #heroAsciiMount,
body.hero-concept-3 #heroAsciiMount{
  position:relative;
  inset:auto;
  width:max-content;
  height:auto;
  pointer-events:none;
}
body.hero-concept-3 .hero-ascii-layer .ascii-motion,
body.hero-concept-3 .hero-ascii-motion-mount .ascii-motion{
  width:max-content;
  height:auto;
  margin:0;
  display:block;
  transform:none;
  transform-origin:center bottom;
}
body.hero-concept-3 .hero-ascii-layer .ascii-motion__canvas,
body.hero-concept-3 .hero-ascii-motion-mount .ascii-motion__canvas{
  position:relative;
  width:max-content;
  line-height:0.72;
  pointer-events:auto;
  cursor:crosshair;
  font-size:clamp(
    0.52rem,
    calc(var(--hero-ascii-zone-h, 720px) / 58),
    1.85rem
  ) !important;
}
body.hero-concept-3 .hero-ascii-layer .ascii-motion__row,
body.hero-concept-3 .hero-ascii-motion-mount .ascii-motion__row{
  line-height:0.72;
  white-space:pre;
}
@media(max-width:880px){
  body.hero-concept-3 .hero{
    overflow:visible;
  }
  body.hero-concept-3 .hero-ascii-layer,
  body.hero-concept-3 #heroAsciiRoot{
    left:0;
    right:0;
    bottom:0 !important;
  }
}
.hero-code-steps{
  position:absolute;right:clamp(18px,6%,64px);top:32%;z-index:6;display:grid;gap:8px;
  margin:0;padding:12px 14px;list-style:none;font-family:var(--mono);font-size:clamp(10px,0.8vw,13px);
  font-weight:700;letter-spacing:0.18em;line-height:1.2;text-transform:uppercase;
  border-left:1px solid rgba(139,34,34,0.34);
  background:none;
  text-shadow:0 0 10px rgba(139,34,34,0.36);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.hero-code-steps li{
  color:transparent;
  background:linear-gradient(135deg, rgba(231,74,63,0.9) 0%, rgba(180,40,20,0.6) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-matrix{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:1;mask-image:linear-gradient(180deg,transparent 0%,#000 6%,#000 58%,transparent 100%)}
.hero-matrix span{position:absolute;top:-120%;display:block;width:1.4em;font-family:var(--mono);font-size:clamp(6px,0.48vw,8px);line-height:1.35;letter-spacing:0.12em;color:rgba(139,34,34,0.92);writing-mode:vertical-rl;text-orientation:mixed;text-shadow:0 0 5px rgba(139,34,34,0.85),0 0 12px rgba(139,34,34,0.45),0 0 22px rgba(139,34,34,0.35);animation:matrixFall linear infinite}
.hero-matrix span:nth-child(1) {left:3%;  animation-duration:14.3s; animation-delay:-3.1s}
.hero-matrix span:nth-child(2) {left:11%; animation-duration:19.7s; animation-delay:-11.4s}
.hero-matrix span:nth-child(3) {left:23%; animation-duration:16.1s; animation-delay:-7.8s}
.hero-matrix span:nth-child(4) {left:34%; animation-duration:22.5s; animation-delay:-2.3s}
.hero-matrix span:nth-child(5) {left:47%; animation-duration:13.8s; animation-delay:-15.6s}
.hero-matrix span:nth-child(6) {left:58%; animation-duration:18.2s; animation-delay:-6.9s}
.hero-matrix span:nth-child(7) {left:69%; animation-duration:21.4s; animation-delay:-13.2s}
.hero-matrix span:nth-child(8) {left:79%; animation-duration:15.6s; animation-delay:-4.5s}
.hero-matrix span:nth-child(9) {left:88%; animation-duration:17.9s; animation-delay:-9.7s}
.hero-matrix span:nth-child(10){left:95%; animation-duration:12.3s; animation-delay:-18.1s}
/* Konzept 3 (+ Variante 4): Spalten höher starten, längerer Fall */
body.hero-concept-3 .hero-matrix span{
  top:-248%;
  animation-name:matrixFallLong;
}
body.hero-concept-3.hero-concept-4 .hero-matrix span{
  letter-spacing:0.22em;
  animation-timing-function:cubic-bezier(0.42,0.01,0.58,0.99);
}
/* Variante 4: langsamer, stark unterschiedliche Geschwindigkeit & „Ruckeln“ pro Spalte */
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(1){
  animation-duration:52s;
  animation-delay:-6.8s;
  animation-timing-function:cubic-bezier(0.2,0.9,0.3,0.08);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(2){
  animation-duration:36s;
  animation-delay:-19.2s;
  animation-timing-function:cubic-bezier(0.55,0.02,0.25,0.98);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(3){
  animation-duration:44s;
  animation-delay:-4.1s;
  animation-timing-function:cubic-bezier(0.35,0.65,0.6,0.35);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(4){
  animation-duration:61s;
  animation-delay:-27.5s;
  animation-timing-function:cubic-bezier(0.15,0.35,0.85,0.72);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(5){
  animation-duration:33s;
  animation-delay:-11.3s;
  animation-timing-function:cubic-bezier(0.7,0.05,0.2,0.95);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(6){
  animation-duration:48s;
  animation-delay:-33s;
  animation-timing-function:cubic-bezier(0.25,0.1,0.75,0.9);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(7){
  animation-duration:56s;
  animation-delay:-2.7s;
  animation-timing-function:cubic-bezier(0.5,0.35,0.45,0.65);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(8){
  animation-duration:39s;
  animation-delay:-24.8s;
  animation-timing-function:cubic-bezier(0.08,0.82,0.92,0.18);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(9){
  animation-duration:47s;
  animation-delay:-14.6s;
  animation-timing-function:cubic-bezier(0.62,0.12,0.38,0.88);
}
body.hero-concept-3.hero-concept-4 .hero-matrix span:nth-child(10){
  animation-duration:58s;
  animation-delay:-40.2s;
  animation-timing-function:cubic-bezier(0.3,0.2,0.7,0.8);
}
@keyframes matrixFall{from{transform:translateY(0)}to{transform:translateY(220%)}}
@keyframes matrixFallLong{from{transform:translateY(0)}to{transform:translateY(380%)}}
@keyframes heroGridDrift{from{background-position:0 0}to{background-position:72px 72px}}
@media(max-width:1100px){.hero{grid-template-columns:minmax(0,.94fr) minmax(330px,.96fr)}.hero-headline,body.hero-concept-2 .hero-headline,body.hero-concept-3 .hero-headline{font-size:clamp(48px,6.7vw,92px)}.hero-figure.hero-figure--aristotle{width:min(54vw,760px);min-height:460px;height:min(68svh,680px)}.hero-code-steps{right:0;top:30%}}
@media(max-width:880px){.hero{display:flex;min-height:100svh;gap:10px;overflow:hidden}.hero-copy{position:relative;z-index:6;max-width:none;width:100%}.hero-headline,body.hero-concept-2 .hero-headline,body.hero-concept-3 .hero-headline{max-width:min(12ch,100%);font-size:clamp(43px,13.5vw,74px);line-height:.94}.hero-figure.hero-figure--aristotle{position:absolute;right:-16%;bottom:0;width:min(96vw,680px);height:min(56svh,480px);min-height:360px;opacity:.66}.hero-code-steps{right:8%;top:26%;font-size:9px;opacity:.82}.hero-matrix{inset:0 8% 8% 0;opacity:.4}.hero-bust-img{width:min(90%,680px)}.hero-pedestal-img{width:min(120%,700px)}}
@media(max-width:560px){.hero{padding-top:clamp(132px,17svh,158px)}.hero-headline,body.hero-concept-2 .hero-headline,body.hero-concept-3 .hero-headline{max-width:12ch;font-size:clamp(36px,11.2vw,48px)}.hero-sub{max-width:30ch;background:linear-gradient(90deg,rgba(5,5,5,.72),rgba(5,5,5,.18) 88%,transparent);padding:2px 0}.hero-figure.hero-figure--aristotle{right:-46%;bottom:-9%;height:42svh;min-height:280px;opacity:.38}.hero-code-steps{display:none}.hero-bust-img{width:min(92%,480px)}.hero-pedestal-img{width:min(130%,520px)}}
@media (prefers-reduced-motion:reduce){.hero-aristotle,.hero-bust-img,.hero-matrix span{animation:none!important;transition:none!important;transform:none!important}}
@media(max-width:1100px){
  body.hero-concept-3 .hero-headline{
    font-size:clamp(24px,min(3.5vw,4.9svh),54px);
  }
  body.hero-concept-3 .hero-figure.hero-figure--aristotle,
  body.hero-concept-3.hero-concept-4 .hero-figure.hero-figure--aristotle{
    width:min(48cqw,90vw,480px);
    place-self:stretch center;
    height:auto;
    min-height:0;
    max-height:none;
  }
}
@media(max-width:880px){
  body.hero-concept-3 .hero{
    min-height:100svh;
    height:auto;
    max-height:none;
    padding-bottom:calc(var(--hero-logo-h,72px) + var(--hero-logo-pad-b,24px));
  }
  @supports (height:100dvh){
    body.hero-concept-3 .hero{min-height:100dvh}
  }
  body.hero-concept-3 .logo-ticker{
    padding-bottom:max(env(safe-area-inset-bottom,0px),clamp(16px,2.2vh,28px));
  }
  body.hero-concept-3 .hero-headline{
    max-width:min(20ch,100%);
    font-size:clamp(28px,min(8.5vw,5.5svh),52px);
    line-height:0.96;
  }
  body.hero-concept-3 .hero-ascii-layer{
    opacity:0.52;
  }
}
@media(max-width:560px){
  body.hero-concept-3 .hero-headline{
    max-width:100%;
    font-size:clamp(22px,7.5vw,38px);
  }
  body.hero-concept-3 .hero-ascii-layer{
    opacity:0.36;
  }
}
@media (prefers-reduced-motion:reduce){.hero-aristotle,.hero-bust-img,.hero-matrix span{animation:none!important;transition:none!important;transform:none!important}}


/* Überschriften Startseite + Sektionen: JetBrains Mono */
.hero-headline,
.hero-headline .wipe-title,
.hero-headline .wipe-title > span,
body.hero-concept-2 .hero-headline,
body.hero-concept-3 .hero-headline,
body.font-2 .hero-headline,
body.font-3 .hero-headline,
.sec-title,
.sec-title .wipe-title,
.sec-title .wipe-title > span,
.svc-rail-header .sec-title{
  font-family:var(--headline);
  font-variant-ligatures:none;
  font-feature-settings:normal;
}

/* Final base: Variante 3 ist fest; die frühere Variantensteuerung ist in final-drehmoment entfernt. */
.nav-font{display:none!important}

/* Konzept 3: globaler Hero darf ASCII nicht clippen (überschreibt .hero{overflow:hidden}) */
body.hero-concept-3 .hero{
  overflow:visible !important;
}
body.hero-concept-3 .hero-ascii-layer,
body.hero-concept-3 #heroAsciiRoot,
body.hero-concept-3 #heroAsciiMount,
body.hero-concept-3 .hero-ascii-layer .ascii-motion,
body.hero-concept-3 .hero-ascii-layer .ascii-motion__canvas{
  overflow:visible !important;
  max-height:none !important;
  clip-path:none !important;
}
body.hero-concept-3 #heroAsciiMount{
  flex:0 0 auto;
  margin-top:auto;
}

/* ============ COOKIE CONSENT (DSGVO) ============ */
.cookie-consent{
  --cc-bg:rgba(12,12,12,0.94);
  --cc-border:rgba(255,255,255,0.1);
  --cc-fg:rgba(255,255,255,0.92);
  --cc-muted:rgba(255,255,255,0.58);
  --cc-shadow:0 24px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.04) inset;
  position:fixed;
  inset:auto 0 0 0;
  z-index:100010;
  pointer-events:none;
  padding:clamp(12px,2.5vw,24px);
  padding-bottom:max(env(safe-area-inset-bottom,0px),clamp(12px,2.5vw,24px));
}
.cookie-consent.is-visible{pointer-events:auto}
.cookie-consent__bar{
  position:relative;
  max-width:min(1120px,100%);
  margin:0 auto;
  border-radius:2px;
  background:var(--cc-bg);
  border:1px solid var(--cc-border);
  box-shadow:var(--cc-shadow);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  overflow:hidden;
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .45s cubic-bezier(0.16,1,0.3,1),
    transform .45s cubic-bezier(0.16,1,0.3,1);
}
.cookie-consent.is-visible .cookie-consent__bar{
  opacity:1;
  transform:translateY(0);
}
.cookie-consent__accent{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--red-bright) 0%,var(--red) 55%,rgba(139,34,34,0.35) 100%);
}
.cookie-consent__inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px,3vw,40px);
  padding:clamp(20px,2.8vw,28px) clamp(22px,3vw,32px);
  padding-left:calc(clamp(22px,3vw,32px) + 6px);
}
.cookie-consent__kicker{
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red-bright);
}
.cookie-consent__title{
  margin:0 0 10px;
  font-family:var(--headline);
  font-size:clamp(18px,2.2vw,22px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.15;
  color:var(--cc-fg);
}
.cookie-consent__lead{
  margin:0;
  max-width:52ch;
  font-family:var(--prose);
  font-size:clamp(13px,1.05vw,15px);
  line-height:1.65;
  color:var(--cc-muted);
}
.cookie-consent__link{
  color:var(--cc-fg);
  text-decoration:underline;
  text-decoration-color:rgba(139,34,34,0.55);
  text-underline-offset:3px;
}
.cookie-consent__link:hover{color:var(--red-bright)}
.cookie-consent__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}
.cookie-consent__btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:2px;
  padding:11px 18px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease;
}
.cookie-consent__btn--primary{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}
.cookie-consent__btn--primary:hover{
  background:var(--red-bright);
  border-color:var(--red-bright);
  transform:translateY(-1px);
}
.cookie-consent__btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,0.22);
  color:var(--cc-fg);
}
.cookie-consent__btn--ghost:hover{
  border-color:rgba(255,255,255,0.42);
  color:#fff;
}
.cookie-consent__panel{
  position:fixed;
  inset:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:clamp(12px,2.5vw,24px);
  padding-bottom:max(env(safe-area-inset-bottom,0px),clamp(12px,2.5vw,24px));
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease,visibility .32s ease;
}
.cookie-consent.is-settings .cookie-consent__panel{
  opacity:1;
  visibility:visible;
}
.cookie-consent.is-settings .cookie-consent__bar{
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
}
.cookie-consent__panel-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.62);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.cookie-consent__panel-sheet{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  max-height:min(78vh,640px);
  overflow:auto;
  border-radius:2px;
  background:var(--cc-bg);
  border:1px solid var(--cc-border);
  box-shadow:var(--cc-shadow);
  transform:translateY(12px);
  transition:transform .35s cubic-bezier(0.16,1,0.3,1);
}
.cookie-consent.is-settings .cookie-consent__panel-sheet{
  transform:translateY(0);
}
.cookie-consent__panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.cookie-consent__panel-title{
  margin:0;
  font-family:var(--headline);
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.03em;
  color:var(--cc-fg);
}
.cookie-consent__panel-close{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--cc-muted);
  font-size:28px;
  line-height:1;
  padding:4px 8px;
  cursor:pointer;
}
.cookie-consent__panel-close:hover{color:var(--cc-fg)}
.cookie-consent__categories{
  display:grid;
  gap:0;
  padding:8px 0;
}
.cookie-consent__cat{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 22px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.cookie-consent__cat:last-child{border-bottom:0}
.cookie-consent__cat-label{
  display:block;
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  color:var(--cc-fg);
}
.cookie-consent__cat-desc{
  margin:0;
  font-family:var(--prose);
  font-size:13px;
  line-height:1.55;
  color:var(--cc-muted);
}
.cookie-consent__cat-badge{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cc-muted);
  padding-top:4px;
}
.cookie-consent__switch{
  position:relative;
  flex-shrink:0;
  width:44px;
  height:26px;
  cursor:pointer;
}
.cookie-consent__switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.cookie-consent__switch-ui{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.18);
  transition:background .22s ease,border-color .22s ease;
}
.cookie-consent__switch-ui::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  transition:transform .22s cubic-bezier(0.16,1,0.3,1);
}
.cookie-consent__switch input:checked + .cookie-consent__switch-ui{
  background:var(--red);
  border-color:var(--red);
}
.cookie-consent__switch input:checked + .cookie-consent__switch-ui::after{
  transform:translateX(18px);
}
.cookie-consent__switch input:focus-visible + .cookie-consent__switch-ui{
  outline:2px solid var(--red-bright);
  outline-offset:2px;
}
.cookie-consent__panel-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 22px 20px;
  border-top:1px solid rgba(255,255,255,0.08);
}
body.cookie-consent-open{overflow:hidden}
body.cookie-consent-open.cookie-consent-open--allow-scroll{overflow:auto}

/* Legal pages (hell) */
.cookie-consent--light{
  --cc-bg:rgba(255,255,255,0.97);
  --cc-border:rgba(0,0,0,0.1);
  --cc-fg:var(--fg-light);
  --cc-muted:var(--fg-light-dim);
  --cc-shadow:0 24px 64px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.04) inset;
}
.cookie-consent--light .cookie-consent__btn--ghost{
  border-color:var(--line-light-strong);
  color:var(--fg-light);
}
.cookie-consent--light .cookie-consent__btn--ghost:hover{
  border-color:var(--red);
  color:var(--red);
}

@media(max-width:880px){
  .cookie-consent__inner{
    flex-direction:column;
    align-items:stretch;
  }
  .cookie-consent__actions{
    justify-content:stretch;
  }
  .cookie-consent__btn{
    flex:1 1 auto;
    text-align:center;
  }
}
@media(prefers-reduced-motion:reduce){
  .cookie-consent__bar,
  .cookie-consent__panel,
  .cookie-consent__panel-sheet,
  .cookie-consent__switch-ui,
  .cookie-consent__switch-ui::after{
    transition:none !important;
  }
}