/* ============================================================
   MC-GRAVUR — Designsystem "Gravierte Platte" (DUNKEL)
   Graphit + Signalrot. Technische Werkstatt-Ästhetik:
   Registermarken, Hairlines, Monospace-Kennzeichnung,
   Gravur/Prägung statt Glaskarten.
   Helle Variante: style-light.css (identisches Markup).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Material: eloxierte / gestrahlte Platte */
  --paper:      #1C1917;   /* Grund — warmes Graphit */
  --paper-2:    #272321;   /* Aufliegend / Karte */
  --paper-3:    #151312;   /* Vertiefung (graviert) */
  --paper-4:    #35302C;   /* Hover / angehoben */

  /* Farbe */
  --ink:        #F5F1EC;   /* Lichtfarbe: Text, starke Linien */
  --ink-2:      #CBC2B8;
  --ink-3:      #988D82;
  --edge:       #635A52;   /* gezeichnete Kastenkante */
  --red:        #E0233F;
  --red-d:      #B0142C;
  --red-l:      #451219;
  --red-xl:     #2A0F14;

  /* Linien */
  --line:       #3B342E;
  --line-2:     #564D45;
  --line-ink:   rgba(245,241,236,.16);

  /* Layout */
  --maxw:       1320px;
  --gutter:     clamp(20px,4.5vw,72px);
  --frame:      clamp(10px,1.4vw,22px);

  /* Typo */
  --sans: "Archivo","Inter Tight","Helvetica Neue",Helvetica,-apple-system,
          BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono: "JetBrains Mono","IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Motion */
  --ease:   cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink);
  background:var(--paper);
  background-image:repeating-linear-gradient(90deg,rgba(245,241,236,.018) 0 1px,transparent 1px 3px);
  font-family:var(--sans); font-size:clamp(15.5px,.35vw + 14.8px,17px);
  line-height:1.62; letter-spacing:-.005em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--sans); font-weight:800; line-height:1.02;
  letter-spacing:-.035em; margin:0 0 .55em; text-wrap:balance; }
h1{ font-size:clamp(2.5rem,6.4vw,5.6rem); letter-spacing:-.045em; }
h2{ font-size:clamp(1.9rem,3.9vw,3.35rem); letter-spacing:-.04em; }
h3{ font-size:clamp(1.15rem,1.45vw,1.45rem); letter-spacing:-.025em; }
h4{ font-size:1rem; letter-spacing:-.02em; }
p{ margin:0 0 1.05em; color:var(--ink-2); }
ul{ margin:0 0 1.05em; padding-left:1.1em; color:var(--ink-2); }
li{ margin-bottom:.35em; }
strong{ color:var(--ink); font-weight:700; }
::selection{ background:var(--red); color:#fff; }

/* ---------- 3. Technischer Rahmen (Bogenkante) ---------- */
.sheet{
  position:fixed; inset:0 var(--frame) var(--frame); z-index:940; pointer-events:none;
  border:1px solid var(--line-2); border-top:0;
}
.sheet::before,.sheet::after{
  content:""; position:absolute; bottom:-5px; width:10px; height:10px;
  border:1px solid var(--red); border-radius:50%;
}
.sheet::before{ left:-5px; }
.sheet::after{ right:-5px; }
.sheet i{
  position:absolute; font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); padding:0 8px; opacity:.75;
  text-shadow:0 0 5px var(--paper), 0 0 5px var(--paper);
  mix-blend-mode:luminosity;
}
.sheet i:nth-child(1){ bottom:-7px; left:24px; }
.sheet i:nth-child(2){ bottom:-7px; right:24px; }
.sheet i:nth-child(3){
  top:26%; right:-1px; transform-origin:100% 0; transform:rotate(90deg) translate(0,-100%);
  white-space:nowrap;
}
@media(max-width:860px){ .sheet{ display:none; } }
body{ --pad: calc(var(--frame) + 1px); }
@media(min-width:861px){ .page{ padding-inline:0; } }

/* ---------- 4. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding:clamp(64px,7.5vw,124px) 0; }
.section--tight{ padding:clamp(46px,5vw,84px) 0; }
.section--line::before{
  content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px; background:var(--line);
}
.grid{ display:grid; gap:clamp(1px,.15vw,1px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4.5vw,76px); align-items:center; }
.split--rev > *:first-child{ order:2; }
@media(max-width:980px){
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--rev > *:first-child{ order:0; }
}
@media(max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

/* ---------- 5. Typo-Bausteine ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.7em; margin:0 0 1.5em;
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red);
}
.eyebrow::before{
  content:""; width:9px; height:9px; border:1px solid var(--red); flex-shrink:0;
  background:linear-gradient(var(--red),var(--red)) no-repeat center/9px 1px,
             linear-gradient(var(--red),var(--red)) no-repeat center/1px 9px;
  border-radius:50%;
}
.eyebrow--center{ justify-content:center; }
.lead{ font-size:clamp(1.05rem,1.2vw,1.28rem); line-height:1.55; color:var(--ink-2); max-width:60ch; }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mw-58{ max-width:58ch; } .mw-72{ max-width:72ch; }
.mb-0{ margin-bottom:0; }
.accent,.gold{ color:var(--red); }

/* Gravierter Text (Deboss) — kein Verlauf, echte Prägung */
.gtext{
  color:var(--red); position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.09);
}
.gtext--gold{ color:var(--red-d); }
.deboss{
  color:var(--paper-4);
  text-shadow:0 1px 0 rgba(255,255,255,.10), 0 -1px 1px rgba(0,0,0,.9);
}

/* Nummern-Kennzeichnung */
.no{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--red); }

/* Ornamente aus dem alten System stilllegen */
.orb{ display:none !important; }
.gridlines{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(46px,5vw,74px) clamp(46px,5vw,74px);
  mask-image:linear-gradient(180deg,#000,transparent 82%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
}
.grain{
  position:fixed; inset:0; z-index:930; pointer-events:none; opacity:.45;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
.section > .wrap{ position:relative; z-index:2; }

/* Halbton-Raster (Siebdruck-Referenz) */
.halftone{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(var(--red) 1.1px,transparent 1.2px);
  background-size:9px 9px; opacity:.16;
}

/* ---------- 6. Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.75em;
  padding:1.02em 1.7em; border:1px solid var(--ink); background:var(--ink); color:var(--paper-2);
  font-weight:650; font-size:.92rem; letter-spacing:-.01em; cursor:pointer; border-radius:0;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
  will-change:transform;
}
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }

.btn--primary{ background:var(--red); border-color:var(--red); color:#fff;
  box-shadow:5px 5px 0 0 var(--ink); }
.btn--primary:hover{ transform:translate(3px,3px); box-shadow:2px 2px 0 0 var(--ink); }
.btn--primary:active{ transform:translate(5px,5px); box-shadow:0 0 0 0 var(--ink); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2);
  box-shadow:5px 5px 0 0 transparent; }
.btn--ghost:hover{ border-color:var(--ink); box-shadow:5px 5px 0 0 var(--red); transform:translate(-1px,-1px); }
.btn--sm{ padding:.68em 1.1em; font-size:.83rem; box-shadow:4px 4px 0 0 var(--ink); }
.btn--sm:hover{ box-shadow:2px 2px 0 0 var(--ink); }
.btn--ghost.btn--sm{ box-shadow:4px 4px 0 0 transparent; }
.btn--ghost.btn--sm:hover{ box-shadow:4px 4px 0 0 var(--red); }
.btn--block{ width:100%; justify-content:center; }

/* Textlink */
.tlink{
  display:inline-flex; align-items:center; gap:.55em; font-weight:650; font-size:.9rem;
  color:var(--ink); position:relative; padding-bottom:3px;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }
.tlink svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.tlink:hover svg{ transform:translateX(5px); }

/* ---------- 7. Laser-Fadenkreuz (Cursor) ---------- */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; opacity:0; }
.cursor{
  width:38px; height:38px; transition:opacity .3s, width .28s var(--ease), height .28s var(--ease);
}
.cursor::before,.cursor::after{
  content:""; position:absolute; background:var(--red); opacity:.85;
}
.cursor::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.cursor::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.cursor.is-hover{ width:66px; height:66px; }
.cursor-dot{ width:6px; height:6px; background:var(--red); border-radius:50%; }
.cursor__co{
  position:absolute; left:calc(100% + 8px); top:calc(100% + 4px); white-space:nowrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--red);
}
@media(hover:hover) and (pointer:fine){ .cursor,.cursor-dot{ opacity:1; } }
@media(max-width:1024px){ .cursor,.cursor-dot{ display:none; } }

.progress{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:9997;
  transform:scaleX(0); transform-origin:left; background:var(--red);
}

/* ---------- 8. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  background:var(--paper); transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.pre-inner{ text-align:center; width:min(360px,74vw); }
.pre-mark{
  font-family:var(--sans); font-weight:850; letter-spacing:-.05em;
  font-size:clamp(1.9rem,5.4vw,3rem); color:var(--ink); position:relative; display:inline-block;
  padding:0 2px;
}
.pre-laser{
  position:absolute; left:-8%; width:116%; height:2px; background:var(--red);
  box-shadow:0 0 14px 2px rgba(224,35,63,.7); animation:scan 1.5s var(--ease-io) infinite;
}
@keyframes scan{ 0%{top:0;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }
.pre-bar{ height:2px; margin:1.4rem 0 0; background:var(--line); }
.pre-bar i{ display:block; height:100%; width:0; background:var(--red); }
.pre-meta{
  display:flex; justify-content:space-between; gap:14px; margin-top:.75rem;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.pre-pct{ color:var(--red); font-variant-numeric:tabular-nums; }
.pre-cap{ margin-top:1.5rem; padding-top:.9rem; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-3); }

/* ---------- 9. Header ---------- */
.topbar{
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.topbar__in{ display:flex; gap:24px; align-items:center; justify-content:space-between;
  padding-block:9px; }
.topbar span{ display:flex; align-items:center; gap:.6em; white-space:nowrap; }
.topbar a:hover{ color:var(--red); }
.topbar__dot{ width:6px; height:6px; background:var(--red); border-radius:50%; flex-shrink:0; }
@media(max-width:880px){ .topbar__in > *:nth-child(1){ display:none; }
  .topbar__in{ justify-content:flex-end; } }
@media(max-width:620px){
  .topbar{ font-size:.6rem; letter-spacing:.07em; overflow:hidden; }
  .topbar__in{ padding-block:8px; }
  .topbar__in > *:nth-child(1){ display:none; }
  .topbar__reach{ width:100%; justify-content:flex-end; gap:.6em; min-width:0; white-space:nowrap; }
}
/* Sehr schmale Geräte: nur die Rufnummer — sonst läuft die Zeile über den Rand */
@media(max-width:480px){
  .topbar{ font-size:.58rem; letter-spacing:.05em; }
  .topbar .topbar__sep,.topbar .topbar__mail{ display:none; }
}

.header{
  position:sticky; top:0; z-index:900; background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s var(--ease), transform .45s var(--ease);
}
.header.is-stuck{ box-shadow:0 1px 0 0 var(--line-2), 0 18px 40px -24px #000; }
.header.is-hidden{ transform:translateY(-101%); }
.header__in{ display:flex; align-items:stretch; justify-content:space-between; gap:20px; }

.logo{ display:flex; align-items:center; gap:11px; padding:14px 0; flex-shrink:0; }
.logo__mark{
  width:38px; height:38px; background:var(--red); display:grid; place-items:center;
  position:relative; flex-shrink:0; transition:transform .45s var(--ease);
}
.logo__mark::after{
  content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.4);
}
.logo:hover .logo__mark{ transform:rotate(-90deg); }
.logo__mark span{ font-weight:850; font-size:.92rem; letter-spacing:-.05em; color:#fff; position:relative; z-index:2; }
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-weight:850; font-size:1.02rem; letter-spacing:-.045em; }
.logo__sub{ font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin-top:5px; }

.nav{ display:flex; align-items:stretch; }
.nav a{
  display:inline-flex; align-items:center; padding:0 1.05em; font-size:.9rem; font-weight:550;
  color:var(--ink-2); position:relative; transition:color .25s;
}
.nav a::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--red);
  transform:scaleX(0); transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::before,.nav a.is-active::before{ transform:scaleX(1); }
.nav a.is-active{ color:var(--ink); font-weight:650; }
.nav__item{ position:relative; display:flex; }
.nav__item > a > svg{ width:10px; height:10px; margin-left:.4em; flex-shrink:0;
  transition:transform .3s var(--ease); }
.nav__item:hover > a > svg{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:100%; left:0; min-width:238px; background:var(--paper-2);
  border:1px solid var(--edge); box-shadow:8px 8px 0 0 rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__item:hover .dropdown,.nav__item:focus-within .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{
  display:flex; align-items:center; gap:.75em; width:100%; padding:.82em 1em; font-size:.87rem;
  border-bottom:1px solid var(--line);
}
.dropdown a:last-child{ border-bottom:0; }
.dropdown a::before{ display:none; }
.dropdown a i{ width:5px; height:5px; background:var(--red); flex-shrink:0; transition:transform .3s var(--ease); }
.dropdown a:hover{ background:var(--red-xl); color:var(--red); }
.dropdown a:hover i{ transform:scale(2); }

.header__cta{ display:flex; align-items:center; gap:10px; padding:11px 0; }
.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line-2); background:transparent;
  cursor:pointer; padding:0; place-items:center; position:relative;
}
.burger i{ position:absolute; left:12px; width:18px; height:1.5px; background:var(--ink);
  transition:all .38s var(--ease); }
.burger i:nth-child(1){ top:15px } .burger i:nth-child(2){ top:20.5px } .burger i:nth-child(3){ top:26px }
.burger.is-open i:nth-child(1){ top:20.5px; transform:rotate(45deg) }
.burger.is-open i:nth-child(2){ opacity:0 }
.burger.is-open i:nth-child(3){ top:20.5px; transform:rotate(-45deg) }
@media(max-width:1120px){ .nav{ display:none } .burger{ display:grid } .header__cta .btn{ display:none } }

.mnav{
  position:fixed; inset:0; z-index:890; background:var(--paper);
  padding:96px var(--gutter) 40px; overflow-y:auto;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-io); visibility:hidden;
}
.mnav.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.mnav a{
  display:flex; align-items:baseline; gap:.8em; font-size:clamp(1.6rem,7vw,2.3rem); font-weight:800;
  letter-spacing:-.04em; padding:.4em 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(18px);
}
.mnav.is-open a{ animation:mIn .55s var(--ease) forwards; }
.mnav.is-open a:nth-child(1){animation-delay:.1s} .mnav.is-open a:nth-child(2){animation-delay:.14s}
.mnav.is-open a:nth-child(3){animation-delay:.18s} .mnav.is-open a:nth-child(4){animation-delay:.22s}
.mnav.is-open a:nth-child(5){animation-delay:.26s} .mnav.is-open a:nth-child(6){animation-delay:.30s}
.mnav.is-open a:nth-child(7){animation-delay:.34s} .mnav.is-open a:nth-child(8){animation-delay:.38s}
.mnav.is-open a:nth-child(9){animation-delay:.42s} .mnav.is-open a:nth-child(10){animation-delay:.46s}
@keyframes mIn{ to{ opacity:1; transform:none } }
.mnav__sub{ font-size:1rem!important; color:var(--ink-2); font-weight:550!important;
  padding-left:1.4em!important; }
.mnav__foot{ margin-top:2.2rem; display:grid; gap:.45rem; font-family:var(--mono);
  font-size:.78rem; color:var(--ink-2); }

/* ---------- 10. Hero ---------- */
.hero{
  position:relative; padding:clamp(50px,7vw,96px) 0 clamp(44px,6vw,84px); overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__canvas{ display:none; }
.hero__in{
  position:relative; z-index:3; display:grid; grid-template-columns:1.16fr .84fr;
  gap:clamp(28px,4vw,64px); align-items:end; width:100%;
}
@media(max-width:1080px){ .hero__in{ grid-template-columns:1fr; align-items:start; } }

.hero__badge{
  display:inline-flex; align-items:center; gap:.7em; padding:.45em .9em;
  border:1px solid var(--line-2); background:var(--paper-2);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:1.7rem;
}
.hero__badge b{ color:var(--red); font-weight:600; }
.pulse{ width:6px; height:6px; background:var(--red); position:relative; flex-shrink:0; }
.pulse::after{ content:""; position:absolute; inset:-4px; border:1px solid var(--red);
  animation:ring 2s var(--ease) infinite; }
@keyframes ring{ 0%{transform:scale(.5);opacity:1} 100%{transform:scale(1.7);opacity:0} }

.hero h1{ font-size:clamp(2.15rem,5vw,4.7rem); margin-bottom:.5em; letter-spacing:-.048em; line-height:.98; }
.hero__line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em;
  white-space:nowrap; }
@media(max-width:560px){ .hero__line{ white-space:normal; overflow:visible; } }
.hero__line > span{ display:block; transform:translateY(102%); animation:lineUp .95s var(--ease) forwards; }
.hero__line:nth-child(1)>span{ animation-delay:.12s }
.hero__line:nth-child(2)>span{ animation-delay:.22s }
.hero__line:nth-child(3)>span{ animation-delay:.32s }
.hero__line:nth-child(4)>span{ animation-delay:.42s }
@keyframes lineUp{ to{ transform:none } }
@keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

.hero__lead{ max-width:52ch; opacity:0; animation:fadeUp .8s var(--ease) .5s forwards; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.9rem;
  opacity:0; animation:fadeUp .8s var(--ease) .6s forwards; }
.hero__facts{
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:2.6rem;
  border-top:1px solid var(--ink); opacity:0; animation:fadeUp .8s var(--ease) .72s forwards;
}
.fact{ padding:16px 18px 4px 0; border-right:1px solid var(--line); }
.fact:last-child{ border-right:0; }
.fact b{ display:block; font-size:clamp(1.35rem,2vw,1.85rem); font-weight:850;
  letter-spacing:-.045em; line-height:1; margin-bottom:.5em; }
.fact span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
@media(max-width:560px){ .hero__facts{ grid-template-columns:1fr; }
  .fact{ border-right:0; border-bottom:1px solid var(--line); padding:14px 0; } }

/* Hero-Maschine: Lasergravur in Echtzeit (SVG, kein GIF) */
.stack{
  position:relative; perspective:1400px; opacity:0;
  animation:fadeUp 1s var(--ease) .45s forwards;
}
.rig{
  position:relative; margin:0; background:var(--paper-2); border:1px solid var(--edge);
  box-shadow:14px 14px 0 0 var(--red), 0 34px 80px -34px #000;
  transform-style:preserve-3d; transition:transform .5s var(--ease);
}
.rig__hud{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--line-2);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.rig__hud span{ display:flex; align-items:center; gap:.6em; }
.rig__co b{ color:var(--red); font-weight:500; font-variant-numeric:tabular-nums; }
.rig__led{
  width:6px; height:6px; background:var(--red); flex-shrink:0;
  animation:rigLed 1.6s steps(1) infinite;
}
@keyframes rigLed{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

.rig__svg{ display:block; width:100%; height:auto; background:var(--paper-3); }

/* Rahmen & Werkstück */
.rig__frame rect{ fill:var(--paper-4); }
.rig__top{ fill:#2E2A26; }
.rig__side{ fill:#1B1816; }
.rig__side--b{ fill:#15130F; }

/* Messkanten */
.rig__ticks path{ stroke:var(--ink-3); stroke-width:1; fill:none; opacity:.55; }

/* Gravur (freigelegt) */
.rig__art circle{ fill:none; stroke:#EDE7DF; stroke-width:2; }
.rig__art .rig__mark{ fill:#F5F1EC; font-family:var(--sans); font-size:40px; font-weight:800;
  letter-spacing:-.04em; }
.rig__art .rig__word{ fill:#CFC5BA; font-family:var(--mono); font-size:13px; letter-spacing:.42em; }
.rig__art .rig__sub{ fill:var(--ink-3); font-family:var(--mono); font-size:8.5px; letter-spacing:.3em; }
.rig__art .rig__bar{ fill:var(--red); }
.rig__art{ animation:rigArt 11s linear infinite; }
@keyframes rigArt{ 0%,88%{opacity:1} 96%,100%{opacity:0} }

/* Zeilenweise Freilegung — folgt dem Portal */
.rig__reveal{
  transform-box:fill-box; transform-origin:top; transform:scaleY(0);
  animation:rigReveal 11s linear infinite;
}
@keyframes rigReveal{ 0%{transform:scaleY(0)} 70%,99%{transform:scaleY(1)} 100%{transform:scaleY(0)} }

/* Portal */
.rig__gantry{ animation:rigGantry 11s linear infinite; }
@keyframes rigGantry{
  0%{ transform:translateY(96px) } 70%{ transform:translateY(286px) }
  88%{ transform:translateY(286px) } 99%,100%{ transform:translateY(96px) }
}
.rig__rail{ fill:var(--paper-4); stroke:var(--edge); stroke-width:1; }
.rig__cut{ fill:var(--red); opacity:.5; }

/* Laserkopf */
.rig__head{ animation:rigScan .9s linear infinite alternate; }
@keyframes rigScan{ from{ transform:translateX(70px) } to{ transform:translateX(318px) } }
.rig__carriage{ fill:var(--ink); }
.rig__nozzle{ fill:var(--red); }
.rig__spot{ fill:#fff; animation:rigSpot .18s steps(2) infinite; }
@keyframes rigSpot{ 0%{opacity:1;r:3} 100%{opacity:.55;r:2} }
.rig__glow{ animation:rigSpot .3s steps(2) infinite; }
.rig__sparks circle{ fill:var(--red); }
.rig__sparks circle:nth-child(1){ animation:rigSpark .55s linear infinite; }
.rig__sparks circle:nth-child(2){ animation:rigSpark .7s linear infinite .12s; }
.rig__sparks circle:nth-child(3){ animation:rigSpark .62s linear infinite .28s; }
.rig__sparks circle:nth-child(4){ animation:rigSpark .8s linear infinite .4s; }
@keyframes rigSpark{
  0%{ transform:translate(0,0); opacity:1 }
  100%{ transform:translate(var(--dx,-9px),-16px); opacity:0 }
}
.rig__sparks circle:nth-child(2){ --dx:7px }
.rig__sparks circle:nth-child(3){ --dx:-4px }
.rig__sparks circle:nth-child(4){ --dx:11px }

/* Fußzeile der Maschine */
.rig__cap{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:11px 16px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.rig__prog{ flex:1; height:2px; background:var(--line-2); min-width:40px; }
.rig__prog i{ display:block; height:100%; width:0; background:var(--red);
  animation:rigProg 11s linear infinite; }
@keyframes rigProg{ 0%{width:0} 70%,99%{width:100%} 100%{width:0} }

.rig__list{
  margin:16px 0 0; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.95; text-wrap:balance;
}
@media(max-width:1080px){
  .rig{ box-shadow:10px 10px 0 0 var(--red); }
  .rig__list{ display:none; }
}

.scrollcue{
  display:flex; align-items:center; gap:10px; margin-top:2.4rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3);
}
.scrollcue i{ width:46px; height:1px; background:var(--line-2); position:relative; overflow:hidden; }
.scrollcue i::after{ content:""; position:absolute; inset:0; background:var(--red);
  transform:translateX(-100%); animation:cue 2.2s var(--ease-io) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* Seiten-Hero */
.phero{ position:relative; padding:clamp(46px,5.5vw,86px) 0 clamp(34px,4vw,60px);
  border-bottom:1px solid var(--line); overflow:hidden; }
.phero h1{ font-size:clamp(2.1rem,5.2vw,4.4rem); max-width:17ch; margin-bottom:.4em; }

/* Seitenkopf mit Animation: Text links, Szene rechts */
.phero--vis{ padding-bottom:clamp(40px,4.5vw,68px); }
.phero__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4vw,64px); align-items:center; }
.phero--vis h1{ font-size:clamp(2rem,4vw,3.4rem); max-width:16ch; }
.phero--vis .lead{ max-width:48ch; }
.phero__vis .visual{ margin:0; }
@media(max-width:980px){
  .phero__in{ grid-template-columns:1fr; }
  .phero--vis h1{ max-width:17ch; }
  .phero__vis{ max-width:520px; }
}
.phero .lead{ max-width:62ch; }
.crumbs{ display:flex; flex-wrap:wrap; gap:.45em; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.7rem; }
.crumbs a:hover{ color:var(--red); }
.crumbs span{ color:var(--line-2); }

/* ---------- 11. Laufband ---------- */
.marquee{
  position:relative; overflow:hidden; background:var(--red); color:#fff;
  border-block:1px solid var(--red-d); padding:13px 0;
}
.marquee__track{ display:flex; width:max-content; animation:mq 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes mq{ to{ transform:translateX(-50%) } }
.marquee__item{
  display:flex; align-items:center; gap:1.5rem; padding-inline:1.5rem;
  font-family:var(--mono); font-size:.78rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; white-space:nowrap;
}
.marquee__item i{ width:5px; height:5px; background:#fff; flex-shrink:0; }

/* ---------- 12. Karten / Raster ---------- */
.grid.g-2,.grid.g-3,.grid.g-4{ background:var(--line); border:1px solid var(--line); }
.card{
  position:relative; padding:clamp(24px,2.4vw,34px); background:var(--paper-2);
  overflow:hidden; isolation:isolate; display:block;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.card:hover{ background:var(--paper-4); }
.card:hover::after{ transform:scaleX(1); }
.card h3{ margin-bottom:.5em; }
.card p:last-child{ margin-bottom:0; }
.card__no{ position:absolute; top:22px; right:26px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; color:var(--line-2); transition:color .4s; }
.card:hover .card__no{ color:var(--red); }

.ico{
  width:48px; height:48px; display:grid; place-items:center; margin-bottom:1.4rem;
  border:1px solid var(--ink); color:var(--ink); background:var(--paper);
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.ico svg{ width:22px; height:22px; }
.card:hover .ico{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); }
.ico--gold{ border-color:var(--red); color:var(--red); }

/* 3D-Tilt: dezent, physisch */
.tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .45s var(--ease); }
.tilt__inner{ transform:translateZ(18px); transform-style:preserve-3d; }

/* Produkt-Kachel */
.pcard{
  position:relative; background:var(--paper-2); padding:clamp(24px,2.5vw,34px);
  min-height:clamp(250px,26vw,330px); display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; isolation:isolate;
  transition:background .4s var(--ease);
}
.pcard__bg{
  position:absolute; inset:0; z-index:-2; background:var(--paper-2);
  transition:background .4s var(--ease);
}
.pcard__art{
  position:absolute; top:0; right:0; width:62%; aspect-ratio:1; z-index:-1;
  display:grid; place-items:center; color:var(--red); opacity:.13;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.pcard__art svg{ width:70%; height:auto; }
.pcard:hover{ background:var(--paper-4); }
.pcard:hover .pcard__art{ opacity:.24; transform:translate(6px,-6px) rotate(-4deg); }
.pcard::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.pcard:hover::after{ transform:scaleX(1); }
.pcard__tag{
  position:absolute; top:24px; left:clamp(24px,2.5vw,34px); font-family:var(--mono);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red);
}
.pcard h3{ margin-bottom:.4em; }
.pcard p{ font-size:.88rem; margin-bottom:1.1em; }

/* Produktkachel mit Animation neben dem Namen */
.pcard--anim{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:center; gap:clamp(18px,2vw,28px); min-height:0; padding:clamp(20px,2.2vw,28px);
}
.pcard--anim .pcard__tag{ position:static; display:block; margin-bottom:.85em; }
.pcard--anim h3{ margin-bottom:.45em; }
.pcard--anim p{ margin-bottom:1em; }
.pcard__scene{
  position:relative; display:grid; place-items:center; align-self:stretch;
  min-height:clamp(150px,15vw,196px);
  background:var(--paper-3); border:1px solid var(--line-2); overflow:hidden;
  background-image:linear-gradient(rgba(242,237,231,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,237,231,.045) 1px,transparent 1px);
  background-size:26px 26px;
  transition:border-color .4s var(--ease);
}
.pcard--anim:hover .pcard__scene{ border-color:var(--red); }
.pcard__scene::before,.pcard__scene::after{
  content:""; position:absolute; width:10px; height:10px; border:1px solid var(--red); opacity:.7;
}
.pcard__scene::before{ top:8px; left:8px; border-right:0; border-bottom:0; }
.pcard__scene::after{ bottom:8px; right:8px; border-left:0; border-top:0; }
.pcard__scene .sc{ width:92%; }
.pcard__body{ display:block; min-width:0; }
@media(max-width:620px){
  .pcard--anim{ grid-template-columns:1fr; }
  .pcard__scene{ min-height:170px; }
}

/* Panel */
.panel{ position:relative; background:var(--paper-2); border:1px solid var(--edge);
  padding:clamp(24px,2.8vw,40px); }
.panel__glow{ display:none; }
.panel > h3:first-child,.panel > h2:first-child{ margin-top:0; }

/* Technische Ansicht: gravierte Platte */
.visual{
  position:relative; aspect-ratio:1/.9; overflow:hidden; background:var(--paper-3);
  border:1px solid var(--edge); display:grid; place-items:center; perspective:900px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 70px rgba(0,0,0,.4);
}
.visual__grid{
  position:absolute; inset:0; opacity:.9;
  background-image:linear-gradient(rgba(242,237,231,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,237,231,.05) 1px,transparent 1px);
  background-size:34px 34px;
}
.visual__scan{
  position:absolute; left:0; right:0; height:1px; background:var(--red);
  box-shadow:0 0 14px 2px rgba(224,35,63,.7); animation:scan 4s var(--ease-io) infinite;
}
.visual::before,.visual::after{
  content:""; position:absolute; width:14px; height:14px; border:1px solid var(--red); opacity:.8;
}
.visual::before{ top:14px; left:14px; border-right:0; border-bottom:0; }
.visual::after{ bottom:14px; right:14px; border-left:0; border-top:0; }
/* ---------- Szenen: themenbezogene Animationen ---------- */
.sc{ width:88%; height:auto; overflow:visible; }
.sc .mt{ fill:#2E2A26 }                 /* Material */
.sc .mt2{ fill:#3C3630 }                /* Material, hell */
.sc .dk{ fill:#141211 }                 /* Vertiefung */
.sc .lt{ fill:#EFEAE3 }                 /* Maschinenteil */
.sc .rd{ fill:var(--red) }
.sc .ln{ fill:none; stroke:var(--ink-3); stroke-width:1; opacity:.75 }
.sc .lnl{ fill:none; stroke:#EFEAE3; stroke-width:2 }
.sc .lnr{ fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round }
.sc .sc-big{ fill:#F5F1EC; font-family:var(--sans); font-size:38px; font-weight:800; letter-spacing:-.04em }
.sc .sc-mid{ fill:#F5F1EC; font-family:var(--sans); font-size:22px; font-weight:800; letter-spacing:-.03em }
.sc .sc-tag{ fill:var(--ink-3); font-family:var(--mono); font-size:9px; letter-spacing:.28em }
.sc .sc-tag--dark{ fill:#1C1917; font-size:12px; letter-spacing:.2em }
.sc .sc-plate{ fill:#F5F1EC; font-family:var(--mono); font-size:9px; letter-spacing:.16em }
.sc .sc-plate--sm{ font-size:8px; letter-spacing:.1em }
.sc-glow{ fill:var(--red); opacity:.22 }
.sc-spot{ animation:scBlink .22s steps(2) infinite }
@keyframes scBlink{ 0%{opacity:1} 100%{opacity:.5} }

/* — Lasergravur: Kopf umkreist und graviert — */
.sc-ring{
  fill:none; stroke:#EFEAE3; stroke-width:2; stroke-dasharray:277; stroke-dashoffset:277;
  transform-origin:180px 154px; transform:rotate(-90deg);
  animation:scRing 7s linear infinite;
}
@keyframes scRing{ 0%{stroke-dashoffset:277} 68%,94%{stroke-dashoffset:0} 100%{stroke-dashoffset:277} }
.sc-orbit{ animation:scOrbit 7s linear infinite }
@keyframes scOrbit{ 0%{transform:rotate(0)} 68%,100%{transform:rotate(360deg)} }
.sc-fade{ opacity:0; animation:scFade 7s linear infinite }
@keyframes scFade{ 0%,68%{opacity:0} 76%,92%{opacity:1} 98%,100%{opacity:0} }

/* — UV-Druck: Artikel laufen unter dem Kopf durch — */
.sc-uvhead{ animation:scBob 6s linear infinite }
@keyframes scBob{ 0%,48%{transform:translateY(0)} 56%{transform:translateY(7px)} 66%,100%{transform:translateY(0)} }
.sc-drops circle{ opacity:0 }
.sc-drops circle:nth-child(1){ animation:scDrop 6s linear infinite }
.sc-drops circle:nth-child(2){ animation:scDrop 6s linear infinite .06s }
.sc-drops circle:nth-child(3){ animation:scDrop 6s linear infinite .12s }
@keyframes scDrop{ 0%,52%{opacity:0;transform:translateY(0)} 56%{opacity:1} 62%{opacity:0;transform:translateY(46px)} 100%{opacity:0} }
.sc-item{ animation:scPass 6s linear infinite }
.sc-item--2{ animation-delay:-2s } .sc-item--3{ animation-delay:-4s }
@keyframes scPass{ from{ transform:translateX(-70px) } to{ transform:translateX(430px) } }
.sc-print{ opacity:0; animation:scPrint 6s linear infinite }
.sc-item--2 .sc-print{ animation-delay:-2s } .sc-item--3 .sc-print{ animation-delay:-4s }
@keyframes scPrint{ 0%,55%{opacity:0} 60%,100%{opacity:1} }
.sc-belt line{ stroke:var(--ink-3); stroke-width:1.4; opacity:.7 }
.sc-beltdash{ stroke-dasharray:10 8; animation:scBelt .8s linear infinite }
@keyframes scBelt{ to{ stroke-dashoffset:-18 } }

/* — Textildruck: Presse senkt sich — */
.sc-press{ animation:scPress 6s var(--ease-io) infinite }
@keyframes scPress{ 0%,12%{transform:translateY(0)} 34%,56%{transform:translateY(112px)} 78%,100%{transform:translateY(0)} }
.sc-motif{ opacity:0; animation:scMotif 6s linear infinite }
@keyframes scMotif{ 0%,54%{opacity:0} 66%,92%{opacity:1} 99%,100%{opacity:0} }
.sc-heat path{ opacity:0 }
.sc-heat path:nth-child(1){ animation:scHeat 6s linear infinite .1s }
.sc-heat path:nth-child(2){ animation:scHeat 6s linear infinite .3s }
.sc-heat path:nth-child(3){ animation:scHeat 6s linear infinite .5s }
@keyframes scHeat{ 0%,56%{opacity:0;transform:translateY(0)} 64%{opacity:.9} 80%{opacity:0;transform:translateY(-26px)} 100%{opacity:0} }

/* — Bestickung: Stichbild baut sich auf — */
.sc-stitch{ fill:none; stroke:#EFEAE3; stroke-width:3; stroke-dasharray:5 4; stroke-linecap:round }
.sc-sweep{ transform-box:fill-box; transform-origin:top; transform:scaleY(0);
  animation:scSweep 6.5s linear infinite }
@keyframes scSweep{ 0%{transform:scaleY(0)} 62%,94%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
.sc-sweep--x{ transform-origin:left; transform:scaleX(0); animation-name:scSweepX }
@keyframes scSweepX{ 0%{transform:scaleX(0)} 62%,94%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
.sc-needlebar{ animation:scNeedleBar 6.5s linear infinite }
@keyframes scNeedleBar{ 0%{transform:translate(0,0)} 62%{transform:translate(0,112px)} 94%{transform:translate(0,112px)} 100%{transform:translate(0,0)} }
.sc-needle{ animation:scNeedle .28s linear infinite alternate }
@keyframes scNeedle{ from{ transform:translateY(0) } to{ transform:translateY(9px) } }

/* — Tassendruck: Presse schließt sich — */
.sc-wrap-l{ animation:scWrapL 6s var(--ease-io) infinite }
.sc-wrap-r{ animation:scWrapR 6s var(--ease-io) infinite }
@keyframes scWrapL{ 0%,10%{transform:translateX(-46px)} 32%,60%{transform:translateX(18px)} 84%,100%{transform:translateX(-46px)} }
@keyframes scWrapR{ 0%,10%{transform:translateX(46px)} 32%,60%{transform:translateX(-18px)} 84%,100%{transform:translateX(46px)} }
.sc-mugart{ opacity:0; animation:scMotif 6s linear infinite }

/* — Pokale: Drehteller + Laserarm — */
.sc-turndash{ fill:none; stroke:var(--ink-3); stroke-width:1; stroke-dasharray:8 10;
  animation:scTurn 4s linear infinite }
@keyframes scTurn{ to{ stroke-dashoffset:-72 } }
.sc-beam{ stroke:var(--red); stroke-width:1.6; opacity:0; animation:scBeam 7s linear infinite }
.sc--medaille .sc-beam{ animation:scBeamM 6.5s linear infinite }
@keyframes scBeamM{ 0%,3%{opacity:0} 8%,60%{opacity:.9} 66%,100%{opacity:0} }
@keyframes scBeam{ 0%,14%{opacity:0} 20%,66%{opacity:.9} 74%,100%{opacity:0} }
.sc-shield{ opacity:0; animation:scShield 7s linear infinite }
@keyframes scShield{ 0%,30%{opacity:0} 44%,92%{opacity:1} 98%,100%{opacity:0} }
.sc-laserarm{ animation:scArm 7s var(--ease-io) infinite }
@keyframes scArm{ 0%,14%{transform:translateY(-14px)} 24%,66%{transform:translateY(0)} 80%,100%{transform:translateY(-14px)} }

/* — Medaillen: Pendel am Band — */
.sc-swing{ transform-origin:180px 34px; animation:scSwing 5s ease-in-out infinite alternate }
@keyframes scSwing{ from{ transform:rotate(-4deg) } to{ transform:rotate(4deg) } }
.sc-arc{ fill:none; stroke:var(--red); stroke-width:2.5 }
.sc-mspot{ opacity:0; animation:scMspot 6.5s linear infinite }
@keyframes scMspot{ 0%,4%{opacity:0} 10%,60%{opacity:1} 66%,100%{opacity:0} }
.sc-mlaser{ animation:scMlaser 6.5s var(--ease-io) infinite }
@keyframes scMlaser{ 0%{transform:translateX(-141px)} 62%,94%{transform:translateX(-9px)} 100%{transform:translateX(-141px)} }

.visual__label{
  position:absolute; bottom:14px; left:14px; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- Vorher-Nachher-Regler ---------- */
.ba{ margin:0; background:var(--paper-3); border:1px solid var(--edge); --ba:50%; }
.ba__stage{
  position:relative; overflow:hidden; touch-action:pan-y; cursor:ew-resize;
}
.ba__img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.ba__img--base{ position:relative; z-index:1; }
.ba__clip{
  position:absolute; top:0; left:0; bottom:0; z-index:2; overflow:hidden;
  width:var(--ba); will-change:width;
}
/* Gleiche Bildhöhe erzwingen, damit beide Aufnahmen deckungsgleich liegen */
.ba__clip .ba__img{ position:absolute; top:0; left:0; height:100%; width:auto; max-width:none; }

/* Trennlinie und Griff */
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--ba); z-index:4;
  width:44px; margin-left:-22px; padding:0; border:0; background:transparent;
  cursor:ew-resize; display:grid; place-items:center;
}
.ba__handle::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:var(--red); box-shadow:0 0 14px 1px rgba(224,35,63,.55);
}
.ba__grip{
  position:relative; width:42px; height:42px; background:var(--red);
  border:1px solid var(--paper); box-shadow:0 0 0 1px var(--red);
  display:grid; place-items:center;
  transition:transform .25s var(--ease);
}
.ba__grip::before,.ba__grip::after{
  content:""; position:absolute; width:0; height:0; border-block:5px solid transparent;
}
.ba__grip::before{ border-right:7px solid #fff; left:8px; }
.ba__grip::after{ border-left:7px solid #fff; right:8px; }
.ba__handle:hover .ba__grip,.ba__handle:focus-visible .ba__grip{ transform:scale(1.12); }
.ba__handle:focus-visible{ outline:none; }
.ba__handle:focus-visible .ba__grip{ outline:2px solid #fff; outline-offset:3px; }

/* Beschriftungen */
.ba__tag{
  position:absolute; top:14px; z-index:3; padding:.4em .8em;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(28,25,23,.82); border:1px solid var(--edge); color:var(--ink-2);
  backdrop-filter:blur(4px); pointer-events:none;
}
.ba__tag--before{ left:14px; }
.ba__tag--after{ right:14px; color:#fff; border-color:var(--red); background:rgba(176,20,44,.85); }

.ba__cap{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--edge); background:var(--paper-2);
  font-size:.9rem; color:var(--ink-2);
}
.ba__cap-tag{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red);
}
@media(max-width:620px){
  .ba__tag{ top:10px; font-size:.55rem; }
  .ba__tag--before{ left:10px; } .ba__tag--after{ right:10px; }
  .ba__grip{ width:38px; height:38px; }
}
@media(prefers-reduced-motion:reduce){
  .ba__handle::before{ box-shadow:none; }
}

/* ---------- 13. Prozess ---------- */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink); }
@media(max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .steps{ grid-template-columns:1fr } }
.step{ position:relative; padding:26px 26px 8px 0; border-right:1px solid var(--line); }
.step:last-child{ border-right:0 }
.step::before{
  content:""; position:absolute; top:-1px; left:0; width:34%; height:3px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.step:hover::before{ transform:scaleX(1) }
.step b{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  color:var(--red); margin-bottom:1.1em; }
.step h4{ margin-bottom:.5em }
.step p{ font-size:.88rem; margin:0; padding-right:8px }

/* ---------- 14. Accordion ---------- */
.acc{ border-top:1px solid var(--ink) }
.acc__item{ border-bottom:1px solid var(--line) }
.acc__item.is-open{ background:var(--paper-2) }
.acc__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:0; padding:1.25em 0; cursor:pointer; text-align:left;
  font-weight:700; font-size:clamp(.98rem,1.35vw,1.15rem); letter-spacing:-.025em;
  color:var(--ink); transition:color .25s, padding-left .35s var(--ease);
}
.acc__item.is-open .acc__head,.acc__head:hover{ color:var(--red) }
.acc__item.is-open .acc__head{ padding-left:10px }
.acc__sign{ position:relative; width:20px; height:20px; flex-shrink:0 }
.acc__sign::before,.acc__sign::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transition:transform .4s var(--ease);
}
.acc__sign::after{ transform:rotate(90deg) }
.acc__item.is-open .acc__sign::after{ transform:rotate(0) }
.acc__body{ overflow:hidden; height:0; transition:height .45s var(--ease) }
.acc__body > div{ padding:0 0 1.5em 10px; max-width:76ch; border-left:2px solid var(--red); }
.acc__body p:last-child{ margin-bottom:0 }

/* ---------- 15. Formular ---------- */
.form{ display:grid; gap:16px }
.field label{
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.6em;
}
.field input,.field select,.field textarea{
  width:100%; padding:.88em 1em; background:var(--paper-3); border:1px solid var(--line-2);
  color:var(--ink); outline:none; border-radius:0; font-size:.95rem;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ min-height:150px; resize:vertical }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23786D64' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--red); background:var(--paper-4); box-shadow:4px 4px 0 0 var(--red-l) }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); opacity:.65 }
.check{ display:flex; gap:.8em; align-items:flex-start; font-size:.85rem; color:var(--ink-2) }
.check input{ width:17px; height:17px; margin-top:.28em; accent-color:var(--red); flex-shrink:0 }
.check a{ color:var(--red); text-decoration:underline; text-underline-offset:3px }
.req{ color:var(--red) }
.formnote{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); letter-spacing:.04em }

.contactlist{ display:grid; list-style:none; padding:0; margin:0; border-top:1px solid var(--ink) }
.contactlist li{ margin:0 }
.contactlist a,.contactlist div{
  display:flex; align-items:center; gap:16px; padding:16px 0;
  border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease) }
.contactlist a:hover{ padding-left:10px }
.contactlist i{
  width:38px; height:38px; display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--line-2); color:var(--red); transition:background .3s,color .3s,border-color .3s }
.contactlist a:hover i{ background:var(--red); color:#fff; border-color:var(--red) }
.contactlist svg{ width:17px; height:17px }
.contactlist b{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:3px }
.contactlist span{ font-size:.97rem; color:var(--ink) }

.mapbox{
  position:relative; overflow:hidden; border:1px solid var(--edge); min-height:300px;
  display:grid; place-items:center; text-align:center; padding:32px; background:var(--paper-3);
  background-image:linear-gradient(rgba(242,237,231,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,237,231,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
.mapbox__pin{
  width:18px; height:18px; background:var(--red); margin:0 auto 18px;
  clip-path:polygon(50% 100%,0 38%,50% 0,100% 38%);
  animation:bob 2.6s var(--ease-io) infinite }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

/* ---------- 16. CTA ---------- */
.cta{
  position:relative; overflow:hidden; text-align:center; background:var(--red); color:#fff;
  padding:clamp(44px,6vw,88px) clamp(24px,4vw,64px); border:1px solid var(--red-d);
  box-shadow:12px 12px 0 0 var(--ink);
}
.cta .halftone{ background-image:radial-gradient(#fff 1.1px,transparent 1.2px); opacity:.12 }
.cta > *{ position:relative; z-index:2 }
.cta h2{ max-width:19ch; margin-inline:auto; color:#fff }
.cta .eyebrow{ color:#fff; justify-content:center }
.cta .eyebrow::before{ border-color:#fff;
  background:linear-gradient(#fff,#fff) no-repeat center/9px 1px,
             linear-gradient(#fff,#fff) no-repeat center/1px 9px }
.cta .lead{ color:rgba(255,255,255,.88); margin-inline:auto }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:2rem }
.cta .btn--primary{ background:var(--ink); border-color:var(--ink); color:var(--paper);
  box-shadow:5px 5px 0 0 var(--paper) }
.cta .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5) }
.cta .btn--ghost:hover{ border-color:#fff; box-shadow:5px 5px 0 0 var(--paper) }
@media(max-width:700px){ .cta{ box-shadow:8px 8px 0 0 var(--ink) } }

/* ---------- 17. Footer ---------- */
.footer{ position:relative; background:var(--paper-3); color:var(--ink); overflow:hidden;
  border-top:1px solid var(--red) }
.footer__top{ position:relative; z-index:2; display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.15fr; gap:clamp(28px,4vw,54px);
  padding:clamp(48px,5.5vw,84px) 0 clamp(34px,4vw,54px) }
@media(max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .footer__top{ grid-template-columns:1fr } }
.footer .logo__name{ color:var(--ink) }
.footer .logo__sub{ color:var(--ink-3) }
.footer h4{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; margin-bottom:1.4em }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7em; color:inherit }
.footer ul a,.footer ul li{ font-size:.9rem; color:var(--ink-2) }
.footer ul a{ transition:color .25s, padding-left .3s var(--ease) }
.footer ul a:hover{ color:#fff; padding-left:6px }
.footer__about p{ font-size:.9rem; max-width:40ch; margin-top:1.3rem; color:var(--ink-2) }
.footer__bottom{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px 26px;
  align-items:center; justify-content:space-between; padding:20px 0 26px;
  border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  color:var(--ink-3) }
.footer__bottom a:hover{ color:var(--red) }
.footer__legal{ display:flex; flex-wrap:wrap; gap:20px }

/* Feste Schaltflächen unten rechts: WhatsApp und Seitenanfang */
.dock{
  position:fixed; right:calc(var(--frame) + 14px); bottom:calc(var(--frame) + 14px); z-index:880;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.dock__wa{
  display:flex; align-items:center; gap:10px; padding:13px; cursor:pointer;
  background:#1FA855; border:1px solid #14532B; color:#fff;
  box-shadow:5px 5px 0 0 var(--ink);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.dock__wa svg{ width:22px; height:22px; flex-shrink:0; }
.dock__label{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-weight:650; font-size:.88rem; letter-spacing:-.01em;
  transition:max-width .38s var(--ease), opacity .28s var(--ease);
}
.dock__wa:hover,.dock__wa:focus-visible{
  background:#25D366; transform:translate(3px,3px); box-shadow:2px 2px 0 0 var(--ink);
}
.dock__wa:hover .dock__label,.dock__wa:focus-visible .dock__label{ max-width:120px; opacity:1; }
/* Puls, damit die Schaltfläche einmal auffällt, ohne zu blinken */
.dock__wa::after{
  content:""; position:absolute; inset:0; border:1px solid #25D366; pointer-events:none;
  animation:dockPulse 3.2s var(--ease) 2s 3;
}
.dock__wa{ position:relative; }
@keyframes dockPulse{
  0%{ transform:scale(1); opacity:.9 } 70%,100%{ transform:scale(1.5); opacity:0 }
}

.totop{
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  background:var(--paper-4); border:1px solid var(--edge); color:var(--ink);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s }
.totop.is-on{ opacity:1; visibility:visible; transform:none }
.totop:hover{ background:var(--red); border-color:var(--red) }
.totop svg{ width:17px; height:17px }

@media(max-width:620px){
  .dock{ right:12px; bottom:12px; gap:8px; }
  .dock__wa{ padding:12px; box-shadow:4px 4px 0 0 var(--ink); }
  .dock__label{ display:none; }
}
@media(prefers-reduced-motion:reduce){ .dock__wa::after{ display:none } }

/* ---------- 18. Scroll-Reveal: Laser-Wipe ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .75s var(--ease), transform .75s var(--ease) }
[data-reveal].is-in{ opacity:1; transform:none }
[data-reveal="left"]{ transform:translateX(-24px) }
[data-reveal="right"]{ transform:translateX(24px) }
[data-reveal="scale"]{ transform:scale(.965) }
[data-reveal="3d"]{ transform:perspective(900px) rotateX(9deg) translateY(26px); transform-origin:top }
[data-reveal="scale"].is-in,[data-reveal="3d"].is-in{ transform:none }

/* ---------- 19. Kennzahlen / Chips / Listen ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--edge) }
@media(max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .stats{ grid-template-columns:1fr } }
.stat{ padding:clamp(22px,2.4vw,32px); border-right:1px solid var(--line);
  background:var(--paper-2); transition:background .35s }
.stat:last-child{ border-right:0 }
.stat:hover{ background:var(--paper-4) }
.stat b{ display:block; font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:850;
  letter-spacing:-.045em; line-height:1; margin-bottom:.5em; color:var(--red) }
.stat span{ font-size:.85rem; color:var(--ink-2) }
@media(max-width:820px){ .stat:nth-child(2){ border-right:0 } }

.chips{ display:flex; flex-wrap:wrap; gap:0; list-style:none; padding:0; margin:0 0 1.2em;
  border-top:1px solid var(--line); border-left:1px solid var(--line) }
.chips li{ margin:0; padding:.62em 1.05em; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  transition:background .3s, color .3s }
.chips li:hover{ background:var(--red); color:#fff }

.ticks{ list-style:none; padding:0; display:grid; gap:0; border-top:1px solid var(--line) }
.ticks li{ display:flex; gap:.9em; align-items:flex-start; margin:0; font-size:.93rem;
  padding:.75em 0; border-bottom:1px solid var(--line); color:var(--ink-2) }
.ticks svg{ width:17px; height:17px; flex-shrink:0; margin-top:.22em; color:var(--red) }

/* ---------- 20. Rechtstexte ---------- */
.legal{ max-width:76ch }
.legal h2{ font-size:clamp(1.2rem,2vw,1.6rem); margin-top:2.3em;
  padding-top:.9em; border-top:1px solid var(--line) }
.legal h2:first-child{ margin-top:0; border-top:0; padding-top:0 }
.legal h3{ font-size:1.02rem; margin-top:1.7em }
.legal ul{ padding-left:1.15em }
.legal a{ color:var(--red); text-decoration:underline; text-underline-offset:3px }
.legal .box{ border:1px solid var(--edge); padding:clamp(20px,2.4vw,30px);
  background:var(--paper-2); margin-bottom:1.6em }
.legal .box p:last-child{ margin-bottom:0 }

/* ---------- 21. Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important }
  [data-reveal]{ opacity:1!important; transform:none!important; clip-path:none!important }
  .hero__line > span{ transform:none }
  .hero__badge,.hero__lead,.hero__actions,.hero__facts,.stack{ opacity:1 }
  .rig__reveal{ transform:scaleY(1)!important }
  .rig__gantry{ transform:translateY(286px)!important }
  .rig__head{ transform:translateX(194px)!important }
  .rig__prog i{ width:100%!important }
  .rig__sparks,.rig__glow{ display:none }
  .sc-ring{ stroke-dashoffset:0!important }
  .sc-fade,.sc-motif,.sc-mugart,.sc-shield,.sc-print{ opacity:1!important }
  .sc-sweep{ transform:scaleY(1)!important }
  .sc-sweep--x{ transform:scaleX(1)!important }
  .sc-drops,.sc-heat,.sc-mspot,.sc-beam{ display:none }
}

/* ---------- 22. A11y ---------- */
:focus-visible{ outline:2px solid var(--red); outline-offset:3px }
.skip{ position:absolute; left:-9999px; top:0; z-index:10001; padding:.9em 1.4em;
  background:var(--red); color:#fff; font-weight:650 }
.skip:focus{ left:0 }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }