/* ==========================================================================
   HÖHENWERK Gerüstbau GmbH — Design System
   Handgeschrieben, ohne Framework. HTML + CSS + JS.
   Erstellt von Mediencenter Essen · Demo
   --------------------------------------------------------------------------
   INHALT
   01 Tokens & Theme            06 Buttons & Links
   02 Reset & Basis             07 Karten & Komponenten
   03 Typografie                08 Hero
   04 Layout & Grid             09 Sektionen
   05 Header & Navigation       10 Formulare, Tools, Footer, Utilities
   ========================================================================== */

/* ============ 01 · TOKENS =============================================== */
:root{
  color-scheme: light;

  /* Farben — Light */
  --c-bg:            #ffffff;
  --c-bg-soft:       #f4f5f7;
  --c-bg-softer:     #fafbfc;
  --c-ink:           #0b1015;
  --c-ink-2:         #121a22;
  --c-ink-3:         #1b2530;
  --c-text:          #10161c;
  --c-text-soft:     #4d5a67;
  --c-text-mute:     #7c8794;
  --c-line:          #e2e6ea;
  --c-line-strong:   #cfd5db;

  --c-accent:        #f5a524;
  --c-accent-h:      #ffb845;
  --c-accent-d:      #d98904;
  --c-accent-ink:    #1c1305;
  --c-steel:         #33465b;
  --c-steel-soft:    #5d7186;
  --c-ok:            #1f9d55;
  --c-warn:          #e8590c;

  --c-on-ink:        #eef2f5;
  --c-on-ink-soft:   #a6b3c0;
  --c-on-ink-line:   rgba(255,255,255,.12);

  /* Flächen */
  --surface:         var(--c-bg);
  --surface-2:       var(--c-bg-soft);
  --glass:           rgba(255,255,255,.72);
  --glass-ink:       rgba(12,17,22,.62);

  /* Typo */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  --fs-eyebrow: clamp(.68rem, .62rem + .18vw, .78rem);
  --fs-small:   clamp(.82rem, .78rem + .16vw, .9rem);
  --fs-body:    clamp(1rem, .96rem + .2vw, 1.075rem);
  --fs-lead:    clamp(1.1rem, 1rem + .55vw, 1.35rem);
  --fs-h4:      clamp(1.1rem, 1.02rem + .4vw, 1.35rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3.35rem);
  --fs-h1:      clamp(2.35rem, 1.5rem + 3.4vw, 4.5rem);
  --fs-mega:    clamp(3rem, 1rem + 9vw, 9rem);

  /* Raster & Abstände */
  --wrap:       1280px;
  --wrap-wide:  1560px;
  --wrap-text:  760px;
  --gutter:     clamp(1.15rem, .6rem + 2.2vw, 2.75rem);
  --sec-y:      clamp(4rem, 2.4rem + 6vw, 8.5rem);
  --sec-y-sm:   clamp(2.75rem, 1.8rem + 3.6vw, 5rem);

  /* Radien, Schatten, Bewegung */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(11,16,21,.05), 0 2px 8px rgba(11,16,21,.04);
  --sh-2: 0 2px 6px rgba(11,16,21,.06), 0 12px 28px -8px rgba(11,16,21,.12);
  --sh-3: 0 6px 14px rgba(11,16,21,.08), 0 32px 60px -20px rgba(11,16,21,.24);
  --sh-accent: 0 14px 34px -12px rgba(245,165,36,.55);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --t-fast: .18s var(--ease);
  --t-base: .34s var(--ease);
  --t-slow: .68s var(--ease-out);

  --header-h: 76px;
}

/* Fix für Tippfehler-Sicherheit */
:root{ --c-steel-soft:#5d7186; }

[data-theme="dark"]{
  color-scheme: dark;
  --c-bg:          #0a0e12;
  --c-bg-soft:     #0f151b;
  --c-bg-softer:   #0c1217;
  --c-ink:         #05080b;
  --c-ink-2:       #0b1116;
  --c-ink-3:       #131c25;
  --c-text:        #e9edf1;
  --c-text-soft:   #a8b4c0;
  --c-text-mute:   #7d8a97;
  --c-line:        #1e262f;
  --c-line-strong: #2c3740;
  --glass:         rgba(10,14,18,.72);
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 28px -8px rgba(0,0,0,.6);
  --sh-3: 0 6px 14px rgba(0,0,0,.45), 0 32px 60px -20px rgba(0,0,0,.7);
}

/* ============ 02 · RESET =============================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background:var(--surface); color:var(--c-text);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.68;
  font-feature-settings:"kern","liga","calt"; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
img{ background:var(--c-bg-soft); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure,blockquote{ margin:0; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--c-line); margin:0; }
::selection{ background:var(--c-accent); color:var(--c-accent-ink); }
:focus-visible{ outline:3px solid var(--c-accent); outline-offset:3px; border-radius:var(--r-xs); }
.skip-link{
  position:absolute; left:1rem; top:-999px; z-index:9999; background:var(--c-ink); color:#fff;
  padding:.85rem 1.3rem; border-radius:var(--r-sm); font-weight:600;
}
.skip-link:focus{ top:1rem; }
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============ 03 · TYPOGRAFIE ========================================== */
h1,h2,h3,h4,h5{
  font-family:var(--f-display); font-weight:700; line-height:1.06;
  letter-spacing:-.022em; margin:0; color:var(--c-text); text-wrap:balance;
}
h1{ font-size:var(--fs-h1); letter-spacing:-.032em; }
h2{ font-size:var(--fs-h2); letter-spacing:-.028em; }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); line-height:1.24; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:650; color:var(--c-text); }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--c-text-soft); font-weight:380; text-wrap:pretty; }
.small{ font-size:var(--fs-small); }
.mute{ color:var(--c-text-mute); }
.soft{ color:var(--c-text-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-display); font-size:var(--fs-eyebrow); font-weight:650;
  letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent-d); margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:currentColor; flex:0 0 auto; border-radius:2px;
  transform-origin:left; animation:eyebrowIn .8s var(--ease-out) both;
}
[data-theme="dark"] .eyebrow{ color:var(--c-accent); }
.on-ink .eyebrow{ color:var(--c-accent); }
@keyframes eyebrowIn{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

.display-xl{ font-size:var(--fs-mega); line-height:.92; letter-spacing:-.045em; font-weight:800; }
.txt-accent{ color:var(--c-accent-d); }
[data-theme="dark"] .txt-accent, .on-ink .txt-accent{ color:var(--c-accent); }
.underline-brush{
  background-image:linear-gradient(transparent 62%, rgba(245,165,36,.42) 62%);
  background-size:0% 100%; background-repeat:no-repeat;
  transition:background-size .9s var(--ease-out) .15s;
}
.is-in .underline-brush{ background-size:100% 100%; }

.rich h2{ margin:2.4em 0 .7em; font-size:var(--fs-h3); }
.rich h3{ margin:2em 0 .55em; font-size:var(--fs-h4); }
.rich > :first-child{ margin-top:0; }
.rich ul{ margin:0 0 1.4em; display:grid; gap:.6rem; }
.rich ul li{ position:relative; padding-left:1.7rem; color:var(--c-text-soft); }
.rich ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:2px;
  background:var(--c-accent); transform:rotate(45deg);
}
.rich ol{ counter-reset:ri; display:grid; gap:.7rem; margin:0 0 1.4em; }
.rich ol li{ counter-increment:ri; position:relative; padding-left:2.4rem; color:var(--c-text-soft); }
.rich ol li::before{
  content:counter(ri,decimal-leading-zero); position:absolute; left:0; top:.1em;
  font-family:var(--f-display); font-weight:700; font-size:.82em; color:var(--c-accent-d);
}
.rich a:not(.btn){ color:var(--c-accent-d); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1.5px; }
.rich a:not(.btn):hover{ color:var(--c-text); }
[data-theme="dark"] .rich a:not(.btn){ color:var(--c-accent); }
.rich blockquote{
  margin:2em 0; padding:1.6rem 1.9rem; border-left:3px solid var(--c-accent);
  background:var(--c-bg-soft); border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:var(--fs-lead); line-height:1.5; font-weight:420;
}

/* ============ 04 · LAYOUT ============================================== */
.wrap{ width:min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline:auto; }
.wrap-wide{ width:min(100% - (var(--gutter) * 2), var(--wrap-wide)); margin-inline:auto; }
.wrap-text{ width:min(100% - (var(--gutter) * 2), var(--wrap-text)); margin-inline:auto; }
.section{ padding-block:var(--sec-y); position:relative; }
.section-sm{ padding-block:var(--sec-y-sm); }
.section-tight{ padding-block:clamp(2rem,1.2rem + 2.4vw,3.25rem); }
.bg-soft{ background:var(--c-bg-soft); }
.bg-softer{ background:var(--c-bg-softer); }
.on-ink{ background:var(--c-ink); color:var(--c-on-ink); }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{ color:#fff; }
.on-ink .lead,.on-ink .soft{ color:var(--c-on-ink-soft); }
.on-ink .mute{ color:#7f8d9b; }
.on-ink hr{ border-color:var(--c-on-ink-line); }

.grid{ display:grid; gap:clamp(1.1rem,.7rem + 1.4vw,2rem); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,1rem + 3.4vw,4.5rem); align-items:center; }
.split-40{ grid-template-columns:minmax(0,.78fr) minmax(0,1fr); }
.split-60{ grid-template-columns:minmax(0,1fr) minmax(0,.78fr); }
@media (max-width: 1080px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px){
  .split,.split-40,.split-60{ grid-template-columns:minmax(0,1fr); }
  .g-2,.g-3,.g-4{ grid-template-columns:minmax(0,1fr); }
  .g-12{ grid-template-columns:repeat(6,minmax(0,1fr)); }
}
.stack{ display:grid; gap:1rem; }
.stack-lg{ display:grid; gap:1.6rem; }
.flex{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.flex-between{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.mw-60{ max-width:60ch; } .mw-52{ max-width:52ch; } .mw-44{ max-width:44ch; }
.center .mw-60,.center .mw-52,.center .mw-44{ margin-inline:auto; }

.sec-head{ margin-bottom:clamp(2rem,1.2rem + 2.6vw,3.6rem); }
.sec-head.with-action{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.sec-head .lead{ margin-top:1.1rem; }
.sec-num{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; color:var(--c-text-mute);
  border:1px solid var(--c-line); padding:.28rem .6rem; border-radius:var(--r-pill);
}

/* ============ 05 · HEADER ============================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--header-h);
  display:flex; align-items:center;
  transition:background-color .38s var(--ease), box-shadow .38s var(--ease),
             backdrop-filter .38s var(--ease), height .38s var(--ease), border-color .38s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(6,10,14,.72), rgba(6,10,14,0));
  opacity:1; transition:opacity .38s var(--ease); pointer-events:none;
}
.site-header.is-stuck{
  background:var(--glass); -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px); box-shadow:var(--sh-1);
  border-bottom-color:var(--c-line); height:66px;
}
.site-header.is-stuck::before{ opacity:0; }
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header{ transition:transform .45s var(--ease), background-color .38s var(--ease), height .38s var(--ease), box-shadow .38s var(--ease); }
.header-inner{ width:min(100% - (var(--gutter)*2), var(--wrap-wide)); margin-inline:auto; display:flex; align-items:center; gap:1.2rem; }

/* Logo */
.logo{ display:flex; align-items:center; gap:.72rem; flex:0 0 auto; position:relative; z-index:2; }
.logo-mark{ width:38px; height:38px; flex:0 0 auto; }
.logo-mark rect,.logo-mark path{ transition:all .5s var(--ease-out); }
.logo:hover .logo-mark .lm-bar{ transform:translateY(-1.5px); }
.logo-type{ display:grid; line-height:1; }
.logo-name{
  font-family:var(--f-display); font-weight:800; font-size:1.16rem; letter-spacing:-.02em;
  color:#fff; transition:color .38s var(--ease);
}
.logo-sub{
  font-family:var(--f-display); font-size:.575rem; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--c-accent); margin-top:.28rem;
}
.is-stuck .logo-name, .header-light .logo-name{ color:var(--c-text); }
.is-stuck .logo-sub, .header-light .logo-sub{ color:var(--c-accent-d); }
[data-theme="dark"] .is-stuck .logo-name{ color:#fff; }
[data-theme="dark"] .is-stuck .logo-sub{ color:var(--c-accent); }

/* Hauptnavigation */
.nav{ margin-left:auto; display:flex; align-items:center; gap:.15rem; }
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:.35rem; padding:.6rem .78rem; border-radius:var(--r-sm);
  font-size:.925rem; font-weight:520; color:rgba(255,255,255,.9); white-space:nowrap;
  transition:color var(--t-fast), background-color var(--t-fast);
}
.nav-link .caret{ width:9px; height:9px; transition:transform var(--t-base); opacity:.7; }
.nav-item:hover .caret, .nav-item.is-open .caret{ transform:rotate(180deg); }
.is-stuck .nav-link, .header-light .nav-link{ color:var(--c-text-soft); }
.nav-link:hover{ color:var(--c-accent); }
.is-stuck .nav-link:hover, .header-light .nav-link:hover{ color:var(--c-text); background:var(--c-bg-soft); }
.nav-link[aria-current="page"]{ color:var(--c-accent); }
.is-stuck .nav-link[aria-current="page"], .header-light .nav-link[aria-current="page"]{ color:var(--c-accent-d); }

/* Mega-Menü */
.mega{
  position:absolute; top:calc(100% + .55rem); left:50%; translate:-50% 0;
  width:min(92vw, 780px); background:var(--c-bg); color:var(--c-text);
  border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:1.35rem; opacity:0; visibility:hidden; transform:translateY(10px) scale(.985);
  transition:opacity .28s var(--ease), transform .28s var(--ease-out), visibility .28s;
  z-index:50;
}
.nav-item.is-open .mega{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.mega-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; }
.mega-link{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding:.72rem .8rem; border-radius:var(--r-md); transition:background-color var(--t-fast), transform var(--t-fast);
}
.mega-link:hover{ background:var(--c-bg-soft); transform:translateX(3px); }
.mega-ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(145deg, rgba(245,165,36,.18), rgba(245,165,36,.06));
  color:var(--c-accent-d); border:1px solid rgba(245,165,36,.24);
}
[data-theme="dark"] .mega-ico{ color:var(--c-accent); }
.mega-ico svg{ width:19px; height:19px; }
.mega-t{ font-weight:640; font-size:.94rem; line-height:1.3; display:block; }
.mega-d{ font-size:.815rem; color:var(--c-text-mute); line-height:1.45; display:block; margin-top:.12rem; }
.mega-foot{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

.header-cta{ display:flex; align-items:center; gap:.55rem; margin-left:.5rem; }
.theme-toggle{
  width:38px; height:38px; border-radius:var(--r-pill); display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9);
  transition:all var(--t-base); flex:0 0 auto;
}
.theme-toggle:hover{ border-color:var(--c-accent); color:var(--c-accent); transform:rotate(18deg); }
.is-stuck .theme-toggle, .header-light .theme-toggle{ border-color:var(--c-line-strong); color:var(--c-text-soft); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .ico-moon{ display:none; }
[data-theme="dark"] .theme-toggle .ico-moon{ display:block; }
[data-theme="dark"] .theme-toggle .ico-sun{ display:none; }

/* Burger */
.burger{
  display:none; width:42px; height:42px; border-radius:var(--r-sm); position:relative; z-index:1002;
  border:1px solid rgba(255,255,255,.2);
}
.is-stuck .burger, .header-light .burger{ border-color:var(--c-line-strong); }
.burger span{
  position:absolute; left:11px; width:20px; height:2px; background:#fff; border-radius:2px;
  transition:transform .38s var(--ease-out), opacity .2s var(--ease), background-color .3s;
}
.is-stuck .burger span, .header-light .burger span{ background:var(--c-text); }
.burger span:nth-child(1){ top:14px; } .burger span:nth-child(2){ top:20px; } .burger span:nth-child(3){ top:26px; }
body.nav-open .burger span{ background:#fff; }
body.nav-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; transform:scaleX(.3); }
body.nav-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:1120px){ .nav{ display:none; } .burger{ display:block; margin-left:auto; } .header-cta{ display:none; } }

/* Mobile Overlay */
.mobile-nav{
  position:fixed; inset:0; z-index:1000; background:var(--c-ink); color:#fff;
  display:grid; grid-template-rows:var(--header-h) 1fr auto; padding-bottom:2rem;
  clip-path:circle(0% at calc(100% - 42px) 38px); visibility:hidden;
  transition:clip-path .72s var(--ease-out), visibility .72s;
}
body.nav-open .mobile-nav{ clip-path:circle(150% at calc(100% - 42px) 38px); visibility:visible; }
.mobile-nav-inner{ overflow-y:auto; padding:1.4rem var(--gutter) 1rem; }
.m-list{ display:grid; }
.m-item{ border-bottom:1px solid rgba(255,255,255,.09); }
.m-link{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem .2rem;
  font-family:var(--f-display); font-size:1.5rem; font-weight:650; letter-spacing:-.02em; color:#fff;
  opacity:0; transform:translateY(18px);
}
body.nav-open .m-link{ animation:mIn .6s var(--ease-out) forwards; }
.m-item:nth-child(1) .m-link{ animation-delay:.16s } .m-item:nth-child(2) .m-link{ animation-delay:.22s }
.m-item:nth-child(3) .m-link{ animation-delay:.28s } .m-item:nth-child(4) .m-link{ animation-delay:.34s }
.m-item:nth-child(5) .m-link{ animation-delay:.40s } .m-item:nth-child(6) .m-link{ animation-delay:.46s }
.m-item:nth-child(7) .m-link{ animation-delay:.52s } .m-item:nth-child(8) .m-link{ animation-delay:.58s }
@keyframes mIn{ to{ opacity:1; transform:none; } }
.m-link .num{ font-family:var(--f-mono); font-size:.72rem; color:var(--c-accent); opacity:.8; }
.m-sub{ display:grid; gap:.1rem; padding:0 0 1rem .2rem; }
.m-sub a{ padding:.5rem 0; color:var(--c-on-ink-soft); font-size:1rem; }
.m-sub a:hover{ color:var(--c-accent); }
.mobile-foot{ padding:1.2rem var(--gutter) 0; border-top:1px solid rgba(255,255,255,.09); display:grid; gap:.9rem; }

/* Scroll-Fortschritt */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--c-accent), #ffd27a); z-index:950; pointer-events:none;
}

/* ============ 06 · BUTTONS ============================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.6rem; border-radius:var(--r-pill); font-family:var(--f-display);
  font-weight:640; font-size:.94rem; letter-spacing:-.005em; line-height:1;
  border:1px solid transparent; cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base), color var(--t-base), border-color var(--t-base);
  will-change:transform;
}
.btn svg{ width:17px; height:17px; flex:0 0 auto; transition:transform var(--t-base); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 70%);
  transition:opacity var(--t-base);
}
.btn:hover::after{ opacity:1; }

.btn-primary{ background:var(--c-accent); color:var(--c-accent-ink); box-shadow:var(--sh-accent); }
.btn-primary:hover{ background:var(--c-accent-h); box-shadow:0 18px 40px -12px rgba(245,165,36,.7); }
.btn-primary svg{ transition:transform var(--t-base); }
.btn-primary:hover svg{ transform:translateX(3px); }

.btn-ink{ background:var(--c-ink); color:#fff; }
.btn-ink:hover{ background:var(--c-ink-3); box-shadow:var(--sh-2); }

.btn-ghost{ background:transparent; color:var(--c-text); border-color:var(--c-line-strong); }
.btn-ghost:hover{ border-color:var(--c-text); background:var(--c-bg-soft); }
.on-ink .btn-ghost, .btn-ghost-light{ color:#fff; border-color:rgba(255,255,255,.28); }
.on-ink .btn-ghost:hover, .btn-ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.btn-lg{ padding:1.12rem 2rem; font-size:1.02rem; }
.btn-sm{ padding:.66rem 1.1rem; font-size:.86rem; }
.btn-block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:640;
  font-size:.94rem; color:var(--c-text); position:relative; padding-bottom:2px;
}
.link-arrow::before{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .42s var(--ease-out);
}
.link-arrow:hover::before{ transform:scaleX(1); transform-origin:left; }
.link-arrow svg{ width:15px; height:15px; transition:transform var(--t-base); }
.link-arrow:hover svg{ transform:translateX(4px); }
.on-ink .link-arrow{ color:var(--c-accent); }

/* Badge / Pill */
.badge{
  display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem; border-radius:var(--r-pill);
  font-size:.76rem; font-weight:620; letter-spacing:.04em; background:var(--c-bg-soft);
  border:1px solid var(--c-line); color:var(--c-text-soft);
}
.badge-accent{ background:rgba(245,165,36,.14); border-color:rgba(245,165,36,.32); color:var(--c-accent-d); }
[data-theme="dark"] .badge-accent{ color:var(--c-accent-h); }
.badge-live{ background:rgba(31,157,85,.12); border-color:rgba(31,157,85,.3); color:#178048; }
.badge-live .dot{ width:7px; height:7px; border-radius:50%; background:#1f9d55; animation:pulseDot 1.8s infinite; }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(31,157,85,.6);} 60%{ box-shadow:0 0 0 7px rgba(31,157,85,0);} }
.on-ink .badge{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:var(--c-on-ink-soft); }

/* ============ 07 · KARTEN & KOMPONENTEN =============================== */
.card{
  position:relative; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.1vw,2.1rem); overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(245,165,36,.12), transparent 62%);
  transition:opacity .5s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); border-color:var(--c-line-strong); }
.card:hover::before{ opacity:1; }
.card-flat{ box-shadow:none; }
.card-soft{ background:var(--c-bg-soft); border-color:transparent; }
.on-ink .card{ background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.1); }
.on-ink .card:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }

/* Leistungskarte */
.svc{
  display:flex; flex-direction:column; gap:1rem; text-decoration:none; height:100%;
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:var(--c-bg); border:1px solid var(--c-line);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--c-accent); }
.svc-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--c-bg-soft); }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out), filter .6s; }
.svc:hover .svc-media img{ transform:scale(1.07); }
.svc-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,12,16,.62), rgba(8,12,16,.06) 55%);
}
.svc-num{
  position:absolute; top:.9rem; left:1rem; z-index:2; font-family:var(--f-mono); font-size:.72rem;
  color:#fff; background:rgba(0,0,0,.42); backdrop-filter:blur(6px); padding:.28rem .55rem; border-radius:var(--r-xs);
  letter-spacing:.1em;
}
.svc-ico{
  position:absolute; right:1rem; bottom:1rem; z-index:2; width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; background:var(--c-accent); color:var(--c-accent-ink);
  transform:translateY(6px) scale(.9); opacity:0; transition:all .5s var(--ease-out);
}
.svc:hover .svc-ico{ transform:none; opacity:1; }
.svc-ico svg{ width:22px; height:22px; }
.svc-body{ padding:0 clamp(1.15rem,.8rem + 1vw,1.7rem) clamp(1.3rem,.9rem + 1vw,1.8rem); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.svc-title{ font-family:var(--f-display); font-size:1.22rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.svc-text{ font-size:.925rem; color:var(--c-text-soft); line-height:1.6; flex:1; }
.svc-meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.tag{
  font-size:.72rem; font-weight:560; padding:.28rem .6rem; border-radius:var(--r-xs);
  background:var(--c-bg-soft); color:var(--c-text-mute); border:1px solid var(--c-line);
}
.svc-more{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.65rem;
  font-family:var(--f-display); font-weight:640; font-size:.88rem; color:var(--c-accent-d);
}
.svc-more svg{ width:14px; height:14px; transition:transform var(--t-base); }
.svc:hover .svc-more svg{ transform:translateX(4px); }
[data-theme="dark"] .svc-more{ color:var(--c-accent); }

/* Feature-Kachel */
.feat{ display:grid; gap:.9rem; }
.feat-ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(150deg, rgba(245,165,36,.2), rgba(245,165,36,.05));
  border:1px solid rgba(245,165,36,.26); color:var(--c-accent-d);
  transition:transform .5s var(--ease-out), background .4s;
}
.feat:hover .feat-ico{ transform:translateY(-3px) rotate(-5deg); }
.feat-ico svg{ width:25px; height:25px; }
.on-ink .feat-ico, [data-theme="dark"] .feat-ico{ color:var(--c-accent); }
.feat-t{ font-family:var(--f-display); font-size:1.08rem; font-weight:680; letter-spacing:-.015em; }
.feat-d{ font-size:.925rem; color:var(--c-text-soft); line-height:1.62; }
.on-ink .feat-d{ color:var(--c-on-ink-soft); }

/* Statistik / Zähler */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:var(--r-lg); overflow:hidden; }
.on-ink .stats{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1); }
.stat{ background:var(--c-bg); padding:clamp(1.4rem,1rem + 1.2vw,2.2rem); display:grid; gap:.35rem; }
.on-ink .stat{ background:var(--c-ink); }
.stat-num{
  font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  line-height:1; letter-spacing:-.04em; color:var(--c-text);
  display:flex; align-items:baseline; gap:.1em;
}
.on-ink .stat-num{ color:#fff; }
.stat-num .suffix{ font-size:.52em; color:var(--c-accent-d); }
.on-ink .stat-num .suffix, [data-theme="dark"] .stat-num .suffix{ color:var(--c-accent); }
.stat-label{ font-size:.85rem; color:var(--c-text-mute); line-height:1.4; }
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Prozess / Zeitstrahl */
.steps{ display:grid; gap:0; counter-reset:st; }
.step{
  counter-increment:st; display:grid; grid-template-columns:auto 1fr; gap:clamp(1.1rem,.6rem + 1.6vw,2.4rem);
  padding:clamp(1.4rem,1rem + 1.4vw,2.3rem) 0; border-top:1px solid var(--c-line); position:relative;
}
.step:last-child{ border-bottom:1px solid var(--c-line); }
.on-ink .step{ border-color:rgba(255,255,255,.12); }
.step-num{
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,1rem + 2vw,2.8rem);
  line-height:1; letter-spacing:-.04em; color:var(--c-line-strong); min-width:2.4ch;
  transition:color .5s var(--ease);
}
.step:hover .step-num{ color:var(--c-accent); }
.on-ink .step-num{ color:rgba(255,255,255,.22); }
.step-body{ display:grid; gap:.5rem; align-content:start; }
.step-t{ font-family:var(--f-display); font-size:clamp(1.15rem,1rem + .5vw,1.5rem); font-weight:700; letter-spacing:-.02em; }
.step-d{ color:var(--c-text-soft); max-width:62ch; }
.on-ink .step-d{ color:var(--c-on-ink-soft); }
.step-tag{ font-family:var(--f-mono); font-size:.72rem; color:var(--c-accent-d); letter-spacing:.1em; text-transform:uppercase; }
.on-ink .step-tag{ color:var(--c-accent); }

/* Zeitleiste (Historie) */
.timeline{ position:relative; display:grid; gap:0; padding-left:clamp(1.6rem,1rem + 2vw,3rem); }
.timeline::before{
  content:""; position:absolute; left:6px; top:.6rem; bottom:.6rem; width:2px;
  background:linear-gradient(to bottom, var(--c-accent), var(--c-line) 22%, var(--c-line));
}
.on-ink .timeline::before{ background:linear-gradient(to bottom, var(--c-accent), rgba(255,255,255,.14) 22%, rgba(255,255,255,.14)); }
.tl-item{ position:relative; padding:0 0 clamp(1.6rem,1rem + 1.6vw,2.6rem); }
.tl-item::before{
  content:""; position:absolute; left:calc(-1 * clamp(1.6rem,1rem + 2vw,3rem) + 1px); top:.55rem;
  width:13px; height:13px; border-radius:50%; background:var(--c-bg); border:3px solid var(--c-accent);
  transition:transform .4s var(--ease-out), box-shadow .4s;
}
.on-ink .tl-item::before{ background:var(--c-ink); }
.tl-item:hover::before{ transform:scale(1.35); box-shadow:0 0 0 6px rgba(245,165,36,.18); }
.tl-year{ font-family:var(--f-display); font-weight:800; font-size:1.25rem; color:var(--c-accent-d); letter-spacing:-.01em; }
.on-ink .tl-year,[data-theme="dark"] .tl-year{ color:var(--c-accent); }
.tl-t{ font-family:var(--f-display); font-weight:680; font-size:1.06rem; margin:.2rem 0 .35rem; }
.tl-d{ color:var(--c-text-soft); font-size:.94rem; max-width:58ch; }
.on-ink .tl-d{ color:var(--c-on-ink-soft); }

/* Team */
.person{ display:grid; gap:.9rem; }
.person-media{ position:relative; aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden; background:var(--c-bg-soft); }
.person-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.03); transition:transform 1s var(--ease-out), filter .6s var(--ease); }
.person:hover .person-media img{ transform:scale(1.05); filter:grayscale(0) contrast(1); }
.person-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to top, rgba(8,12,16,.78), transparent); opacity:.9;
}
.person-badge{
  position:absolute; z-index:2; left:1rem; bottom:1rem; right:1rem; color:#fff;
  transform:translateY(6px); opacity:0; transition:all .5s var(--ease-out);
}
.person:hover .person-badge{ transform:none; opacity:1; }
.person-badge a{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:#fff; }
.person-n{ font-family:var(--f-display); font-size:1.1rem; font-weight:700; letter-spacing:-.015em; }
.person-r{ font-size:.86rem; color:var(--c-text-mute); }

/* Testimonials */
.quote-card{
  display:grid; gap:1.4rem; padding:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);
  border-radius:var(--r-lg); background:var(--c-bg); border:1px solid var(--c-line); height:100%;
}
.on-ink .quote-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.stars{ display:flex; gap:.18rem; color:var(--c-accent); }
.stars svg{ width:16px; height:16px; }
.quote-txt{ font-size:clamp(1rem,.95rem + .3vw,1.14rem); line-height:1.62; color:var(--c-text); font-weight:420; }
.on-ink .quote-txt{ color:#e9eef2; }
.quote-by{ display:flex; align-items:center; gap:.85rem; margin-top:auto; }
.avatar{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--c-ink); color:#fff; font-family:var(--f-display); font-weight:700; font-size:.9rem;
}
.on-ink .avatar{ background:var(--c-accent); color:var(--c-accent-ink); }

/* Slider */
.slider{ position:relative; }
.slider-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(min(88vw,420px),1fr);
  gap:clamp(1rem,.6rem + 1.2vw,1.6rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.2rem; scrollbar-width:none; -ms-overflow-style:none;
}
.slider-track::-webkit-scrollbar{ display:none; }
.slider-track > *{ scroll-snap-align:start; }
.slider-nav{ display:flex; gap:.5rem; }
.s-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--c-line-strong); display:grid; place-items:center;
  transition:all var(--t-base); color:var(--c-text);
}
.s-btn:hover:not(:disabled){ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-accent-ink); transform:scale(1.06); }
.s-btn:disabled{ opacity:.32; cursor:not-allowed; }
.s-btn svg{ width:17px; height:17px; }
.on-ink .s-btn{ border-color:rgba(255,255,255,.25); color:#fff; }

/* Akkordeon */
.acc{ border-top:1px solid var(--c-line); }
.acc-item{ border-bottom:1px solid var(--c-line); }
.acc-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; text-align:left;
  padding:clamp(1.1rem,.8rem + .7vw,1.5rem) 0; font-family:var(--f-display);
  font-size:clamp(1rem,.94rem + .35vw,1.2rem); font-weight:640; letter-spacing:-.015em; color:var(--c-text);
  transition:color var(--t-base);
}
.acc-btn:hover{ color:var(--c-accent-d); }
[data-theme="dark"] .acc-btn:hover{ color:var(--c-accent); }
.acc-ico{
  position:relative; width:30px; height:30px; border-radius:50%; border:1px solid var(--c-line-strong);
  flex:0 0 auto; transition:all var(--t-base);
}
.acc-ico::before,.acc-ico::after{
  content:""; position:absolute; inset:50% auto auto 50%; translate:-50% -50%;
  background:currentColor; border-radius:2px; transition:transform .38s var(--ease-out), opacity .3s;
}
.acc-ico::before{ width:12px; height:1.8px; }
.acc-ico::after{ width:1.8px; height:12px; }
.acc-btn[aria-expanded="true"] .acc-ico{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-accent-ink); }
.acc-btn[aria-expanded="true"] .acc-ico::after{ transform:rotate(90deg); opacity:0; }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .48s var(--ease-out); }
.acc-panel > div{ overflow:hidden; }
.acc-item.is-open .acc-panel{ grid-template-rows:1fr; }
.acc-inner{ padding:0 0 1.5rem; max-width:74ch; color:var(--c-text-soft); }
.acc-inner p:not(:last-child){ margin-bottom:.9rem; }

/* Projekt-/Referenzkachel */
.proj{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--c-ink); aspect-ratio:4/3; isolation:isolate;
}
.proj img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out), filter .6s; }
.proj:hover img{ transform:scale(1.08); }
.proj::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(6,10,14,.9) 4%, rgba(6,10,14,.35) 45%, rgba(6,10,14,.05));
  transition:opacity .5s;
}
.proj-body{ position:absolute; z-index:2; inset:auto 0 0 0; padding:clamp(1.1rem,.8rem + 1vw,1.7rem); color:#fff; }
.proj-cat{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent); }
.proj-t{ font-family:var(--f-display); font-size:clamp(1.1rem,1rem + .5vw,1.42rem); font-weight:700; letter-spacing:-.02em; margin:.3rem 0 .1rem; }
.proj-meta{ font-size:.84rem; color:rgba(255,255,255,.72); display:flex; gap:.9rem; flex-wrap:wrap; }
.proj-open{
  position:absolute; z-index:2; top:1rem; right:1rem; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.24);
  display:grid; place-items:center; color:#fff; opacity:0; transform:scale(.85) rotate(-25deg);
  transition:all .45s var(--ease-out);
}
.proj:hover .proj-open{ opacity:1; transform:none; background:var(--c-accent); color:var(--c-accent-ink); border-color:transparent; }
.proj-open svg{ width:18px; height:18px; }
.proj.is-tall{ aspect-ratio:3/4; }
.proj.is-wide{ aspect-ratio:16/9; }

/* Filter-Chips */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  padding:.55rem 1.05rem; border-radius:var(--r-pill); border:1px solid var(--c-line-strong);
  font-size:.875rem; font-weight:560; color:var(--c-text-soft); transition:all var(--t-base); white-space:nowrap;
}
.chip:hover{ border-color:var(--c-text); color:var(--c-text); }
.chip.is-active{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }
[data-theme="dark"] .chip.is-active{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-accent-ink); }
.chip .n{ font-size:.75rem; opacity:.6; margin-left:.25rem; }

/* Logo-Leiste / Marquee */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width:max-content; gap:clamp(2rem,1rem + 3vw,4.5rem); animation:marquee 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee-item{
  display:flex; align-items:center; gap:.75rem; font-family:var(--f-display); font-weight:650;
  font-size:clamp(.95rem,.9rem + .4vw,1.15rem); letter-spacing:-.01em; color:var(--c-text-mute);
  white-space:nowrap; transition:color .3s;
}
.marquee-item:hover{ color:var(--c-text); }
.marquee-item svg{ width:18px; height:18px; color:var(--c-accent); flex:0 0 auto; }
.on-ink .marquee-item{ color:rgba(255,255,255,.55); }
.on-ink .marquee-item:hover{ color:#fff; }

/* Vorher/Nachher */
.ba{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; user-select:none; touch-action:pan-y; cursor:ew-resize; background:var(--c-bg-soft); }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; background:#fff; z-index:3;
  box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 0 24px rgba(0,0,0,.35);
}
.ba-knob{
  position:absolute; top:50%; left:50%; translate:-50% -50%; width:50px; height:50px; border-radius:50%;
  background:#fff; display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.28); color:var(--c-ink);
  transition:transform .3s var(--ease-out);
}
.ba:hover .ba-knob{ transform:translate(-50%,-50%) scale(1.08); }
.ba-knob svg{ width:22px; height:22px; }
.ba-tag{
  position:absolute; z-index:2; top:1rem; padding:.35rem .75rem; border-radius:var(--r-pill);
  background:rgba(8,12,16,.62); backdrop-filter:blur(8px); color:#fff; font-size:.75rem;
  font-weight:620; letter-spacing:.08em; text-transform:uppercase;
}
.ba-tag.l{ left:1rem; } .ba-tag.r{ right:1rem; background:var(--c-accent); color:var(--c-accent-ink); }

/* ============ 08 · HERO =============================================== */
.hero{
  position:relative; min-height:min(100svh, 940px); display:grid; align-items:end;
  padding-top:calc(var(--header-h) + 3rem); padding-bottom:clamp(2.5rem,1.5rem + 4vw,5rem);
  overflow:hidden; background:var(--c-ink); isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-3; overflow:hidden; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.12); animation:kenburns 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  0%{ transform:scale(1.12) translate3d(0,0,0); }
  100%{ transform:scale(1.24) translate3d(-1.6%,-2.2%,0); }
}
.hero-veil{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(105deg, rgba(6,10,14,.94) 0%, rgba(6,10,14,.8) 38%, rgba(6,10,14,.34) 68%, rgba(6,10,14,.55) 100%),
    linear-gradient(to top, rgba(6,10,14,.95) 0%, rgba(6,10,14,0) 45%);
}
.hero-grain{
  position:absolute; inset:0; z-index:-1; opacity:.055; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* animiertes Gerüst-Raster */
.hero-scaffold{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5; }
.hero-scaffold line, .hero-scaffold rect, .hero-scaffold circle{
  stroke:rgba(245,165,36,.55); fill:none; stroke-width:1;
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  animation:draw 2.6s var(--ease-out) forwards;
}
.hero-scaffold circle{ fill:rgba(245,165,36,.5); stroke:none; opacity:0; animation:nodeIn .5s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes nodeIn{ to{ opacity:1; } }

.hero-inner{ position:relative; z-index:2; width:min(100% - (var(--gutter)*2), var(--wrap-wide)); margin-inline:auto; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2rem,1rem + 4vw,5rem); align-items:end; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:minmax(0,1fr); } }

.hero-kicker{
  display:inline-flex; align-items:center; gap:.7rem; padding:.5rem .95rem .5rem .55rem;
  border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); color:#fff; font-size:.82rem; font-weight:520; margin-bottom:1.6rem;
}
.hero-kicker .pill{
  background:var(--c-accent); color:var(--c-accent-ink); font-family:var(--f-display); font-weight:700;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.28rem .6rem; border-radius:var(--r-pill);
}
.hero h1{
  color:#fff; font-size:var(--fs-h1); letter-spacing:-.04em; line-height:.98; font-weight:800;
  margin-bottom:1.5rem;
}
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{
  display:block; transform:translateY(105%); opacity:0;
  animation:lineUp 1.05s var(--ease-out) forwards;
}
.hero h1 .ln:nth-child(1) > span{ animation-delay:.12s; }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.24s; }
.hero h1 .ln:nth-child(3) > span{ animation-delay:.36s; }
@keyframes lineUp{ to{ transform:none; opacity:1; } }
.hero-lead{
  font-size:var(--fs-lead); color:rgba(255,255,255,.82); max-width:56ch; line-height:1.55;
  opacity:0; animation:fadeUp .9s var(--ease-out) .55s forwards;
}
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem; opacity:0; animation:fadeUp .9s var(--ease-out) .72s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.hero-panel{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(18px);
  border-radius:var(--r-lg); padding:clamp(1.3rem,1rem + 1vw,1.9rem); color:#fff;
  opacity:0; animation:fadeUp 1s var(--ease-out) .9s forwards;
}
.hero-panel h2{ font-size:1.02rem; letter-spacing:0; font-weight:700; color:#fff; margin-bottom:1rem; }
.hero-panel-list{ display:grid; gap:.9rem; }
.hp-row{ display:grid; grid-template-columns:auto 1fr auto; gap:.85rem; align-items:center; padding-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.1); }
.hp-row:last-child{ border-bottom:0; padding-bottom:0; }
.hp-ico{ width:34px; height:34px; border-radius:10px; background:rgba(245,165,36,.18); color:var(--c-accent); display:grid; place-items:center; }
.hp-ico svg{ width:17px; height:17px; }
.hp-t{ font-weight:600; font-size:.92rem; }
.hp-s{ font-size:.78rem; color:rgba(255,255,255,.6); }
.hp-v{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--c-accent); }

.hero-scroll{
  position:absolute; left:50%; bottom:1.4rem; translate:-50% 0; z-index:3; display:grid; justify-items:center; gap:.5rem;
  color:rgba(255,255,255,.55); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-family:var(--f-display);
}
.hero-scroll .line{ width:1px; height:44px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.6)); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:""; position:absolute; inset:0; background:var(--c-accent); animation:scrollLine 2.2s var(--ease-in-out) infinite; }
@keyframes scrollLine{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }
@media (max-width:700px){ .hero-scroll{ display:none; } }

/* Kompakt-Hero für Unterseiten */
.phero{
  position:relative; padding-top:calc(var(--header-h) + clamp(3rem,2rem + 4vw,6rem));
  padding-bottom:clamp(2.5rem,1.8rem + 3vw,4.5rem); background:var(--c-ink); color:#fff; overflow:hidden; isolation:isolate;
}
.phero-bg{ position:absolute; inset:0; z-index:-2; }
.phero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; transform:scale(1.06); animation:kenburns 26s ease-in-out infinite alternate; }
.phero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(6,10,14,.94), rgba(6,10,14,.72) 55%, rgba(6,10,14,.5));
}
.phero h1{ color:#fff; max-width:20ch; margin-bottom:1.1rem; }
.phero .lead{ color:rgba(255,255,255,.8); max-width:60ch; }
.phero-actions{ margin-top:2rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.phero-facts{ display:flex; gap:clamp(1.4rem,.8rem + 2vw,3rem); flex-wrap:wrap; margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.14); }
.pf{ display:grid; gap:.15rem; }
.pf-v{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,1rem + 1vw,1.8rem); color:var(--c-accent); letter-spacing:-.02em; }
.pf-l{ font-size:.8rem; color:rgba(255,255,255,.6); }

/* Brotkrumen */
.crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.8rem; color:rgba(255,255,255,.6); margin-bottom:1.4rem; }
.crumbs a{ color:rgba(255,255,255,.75); transition:color var(--t-fast); }
.crumbs a:hover{ color:var(--c-accent); }
.crumbs .sep{ opacity:.45; }
.crumbs-light{ color:var(--c-text-mute); }
.crumbs-light a{ color:var(--c-text-soft); }
.crumbs-light a:hover{ color:var(--c-accent-d); }

/* ============ 09 · SEKTIONEN ========================================== */
.media-frame{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--c-bg-soft); }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-frame.ar-43{ aspect-ratio:4/3; } .media-frame.ar-11{ aspect-ratio:1/1; }
.media-frame.ar-169{ aspect-ratio:16/9; } .media-frame.ar-34{ aspect-ratio:3/4; }
.media-tag{
  position:absolute; left:1.1rem; bottom:1.1rem; z-index:2; padding:.6rem 1rem; border-radius:var(--r-md);
  background:var(--glass); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.4);
  font-size:.82rem; font-weight:580; color:var(--c-text); box-shadow:var(--sh-2);
}
[data-theme="dark"] .media-tag{ border-color:rgba(255,255,255,.14); }
.float-card{
  position:absolute; z-index:3; background:var(--c-bg); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:1.1rem 1.3rem; box-shadow:var(--sh-3); display:grid; gap:.3rem;
}
.float-card.br{ right:-1.2rem; bottom:-1.2rem; }
.float-card.bl{ left:-1.2rem; bottom:-1.2rem; }
@media (max-width:600px){ .float-card.br,.float-card.bl{ right:.6rem; left:auto; bottom:.6rem; } }
.fc-v{ font-family:var(--f-display); font-weight:800; font-size:1.6rem; letter-spacing:-.03em; color:var(--c-accent-d); }
[data-theme="dark"] .fc-v{ color:var(--c-accent); }
.fc-l{ font-size:.8rem; color:var(--c-text-mute); }

.checklist{ display:grid; gap:.75rem; }
.checklist li{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; color:var(--c-text-soft); }
.checklist .ck{
  width:21px; height:21px; border-radius:50%; background:rgba(245,165,36,.16); color:var(--c-accent-d);
  display:grid; place-items:center; flex:0 0 auto; margin-top:.18em;
}
.checklist .ck svg{ width:12px; height:12px; }
.on-ink .checklist li{ color:var(--c-on-ink-soft); }
.on-ink .checklist .ck,[data-theme="dark"] .checklist .ck{ color:var(--c-accent); }

.data-table{ font-size:.94rem; }
.data-table th,.data-table td{ padding:.9rem 1rem; text-align:left; border-bottom:1px solid var(--c-line); vertical-align:top; }
.data-table thead th{ font-family:var(--f-display); font-weight:680; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-mute); border-bottom-width:2px; }
.data-table tbody tr{ transition:background-color var(--t-fast); }
.data-table tbody tr:hover{ background:var(--c-bg-soft); }
.data-table td:first-child{ font-weight:580; color:var(--c-text); }
.table-scroll{ overflow-x:auto; border:1px solid var(--c-line); border-radius:var(--r-lg); }
.table-scroll .data-table th:first-child,.table-scroll .data-table td:first-child{ padding-left:1.3rem; }

/* CTA-Band */
.cta-band{ position:relative; overflow:hidden; background:var(--c-ink); color:#fff; isolation:isolate; }
.cta-band::before{
  content:""; position:absolute; inset:-40% -10% auto; height:180%; z-index:-1;
  background:radial-gradient(closest-side, rgba(245,165,36,.22), transparent 70%);
  animation:floatGlow 14s var(--ease-in-out) infinite alternate;
}
@keyframes floatGlow{ from{ transform:translate3d(-8%,0,0) scale(1);} to{ transform:translate3d(10%,6%,0) scale(1.15);} }
.cta-band .wrap{ position:relative; z-index:2; }
.cta-mega{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.045em; line-height:.94;
  font-size:clamp(2.2rem,1.2rem + 5vw,5.2rem); color:#fff;
}

/* Notdienst-Band */
.alert-band{
  background:var(--c-accent); color:var(--c-accent-ink);
  padding:.85rem 0; font-weight:580; font-size:.92rem;
}
.alert-band .wrap{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; text-align:center; }
.alert-band a{ font-weight:700; text-decoration:underline; text-underline-offset:.2em; }

/* ============ 10 · FORMULARE ========================================== */
.field{ display:grid; gap:.42rem; }
.field label,.legend-t{ font-size:.86rem; font-weight:600; color:var(--c-text); }
.field .hint{ font-size:.78rem; color:var(--c-text-mute); }
.input,.select,.textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-md); border:1px solid var(--c-line-strong);
  background:var(--c-bg); color:var(--c-text); font-size:.96rem; transition:border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}
.textarea{ min-height:140px; resize:vertical; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c8794' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 4px rgba(245,165,36,.16); }
.input::placeholder,.textarea::placeholder{ color:var(--c-text-mute); }
.input.is-error,.textarea.is-error,.select.is-error{ border-color:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.12); }
.err-msg{ font-size:.79rem; color:#dc2626; display:none; }
.field.has-error .err-msg{ display:block; }

.check{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; cursor:pointer; font-size:.88rem; color:var(--c-text-soft); }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{
  width:21px; height:21px; border-radius:6px; border:1.5px solid var(--c-line-strong); background:var(--c-bg);
  display:grid; place-items:center; flex:0 0 auto; margin-top:.1em; transition:all var(--t-base); color:transparent;
}
.check .box svg{ width:12px; height:12px; }
.check input:checked + .box{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-accent-ink); }
.check input:focus-visible + .box{ box-shadow:0 0 0 4px rgba(245,165,36,.25); }

/* Auswahlkarten (Wizard) */
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; }
.opt{ position:relative; cursor:pointer; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt-box{
  display:grid; gap:.5rem; padding:1.15rem 1.2rem; border:1.5px solid var(--c-line); border-radius:var(--r-md);
  background:var(--c-bg); transition:all var(--t-base); height:100%;
}
.opt-box .oi{ width:34px; height:34px; border-radius:10px; background:var(--c-bg-soft); display:grid; place-items:center; color:var(--c-text-soft); transition:all var(--t-base); }
.opt-box .oi svg{ width:18px; height:18px; }
.opt-t{ font-family:var(--f-display); font-weight:660; font-size:.98rem; letter-spacing:-.01em; }
.opt-d{ font-size:.8rem; color:var(--c-text-mute); line-height:1.5; }
.opt:hover .opt-box{ border-color:var(--c-line-strong); transform:translateY(-2px); }
.opt input:checked + .opt-box{ border-color:var(--c-accent); background:rgba(245,165,36,.07); box-shadow:0 0 0 3px rgba(245,165,36,.14); }
.opt input:checked + .opt-box .oi{ background:var(--c-accent); color:var(--c-accent-ink); }
.opt input:focus-visible + .opt-box{ outline:3px solid var(--c-accent); outline-offset:2px; }

/* Wizard */
.wizard{ border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-bg); overflow:hidden; box-shadow:var(--sh-2); }
.wiz-head{ padding:clamp(1.2rem,1rem + 1vw,1.8rem) clamp(1.2rem,1rem + 1.4vw,2.2rem); border-bottom:1px solid var(--c-line); background:var(--c-bg-soft); }
.wiz-steps{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.wiz-dot{ display:flex; align-items:center; gap:.55rem; font-size:.83rem; color:var(--c-text-mute); font-weight:560; }
.wiz-dot .n{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--c-line-strong); display:grid; place-items:center;
  font-family:var(--f-display); font-size:.8rem; font-weight:700; transition:all var(--t-base); flex:0 0 auto;
}
.wiz-dot.is-active{ color:var(--c-text); }
.wiz-dot.is-active .n{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-accent-ink); }
.wiz-dot.is-done .n{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }
.wiz-sep{ flex:1; min-width:14px; height:1.5px; background:var(--c-line); }
.wiz-bar{ height:4px; background:var(--c-line); border-radius:var(--r-pill); overflow:hidden; margin-top:1.1rem; }
.wiz-bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--c-accent),#ffd27a); border-radius:inherit; transition:width .5s var(--ease-out); }
.wiz-body{ padding:clamp(1.4rem,1.1rem + 1.4vw,2.4rem); }
.wiz-panel{ display:none; animation:panelIn .45s var(--ease-out); }
.wiz-panel.is-active{ display:grid; gap:1.5rem; }
@keyframes panelIn{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} }
.wiz-foot{ display:flex; justify-content:space-between; gap:1rem; padding:1.2rem clamp(1.2rem,1rem + 1.4vw,2.4rem); border-top:1px solid var(--c-line); background:var(--c-bg-soft); flex-wrap:wrap; }

/* Rechner */
.calc{ display:grid; gap:1.4rem; }
.calc-row{ display:grid; gap:.55rem; }
.calc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.calc-val{ font-family:var(--f-display); font-weight:750; font-size:1.05rem; color:var(--c-accent-d); }
[data-theme="dark"] .calc-val{ color:var(--c-accent); }
input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:var(--r-pill); background:var(--c-line); outline:none; }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--c-accent);
  border:3px solid var(--c-bg); box-shadow:0 2px 10px rgba(245,165,36,.5); cursor:grab; transition:transform .2s;
}
input[type="range"]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.12); }
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--c-accent); border:3px solid var(--c-bg);
  box-shadow:0 2px 10px rgba(245,165,36,.5); cursor:grab;
}
.calc-out{
  display:grid; gap:1rem; padding:clamp(1.3rem,1rem + 1.2vw,2rem); border-radius:var(--r-lg);
  background:var(--c-ink); color:#fff;
}
.calc-out .big{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); letter-spacing:-.04em; line-height:1; color:var(--c-accent); }
.calc-lines{ display:grid; gap:.5rem; font-size:.88rem; }
.calc-line{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.1); color:var(--c-on-ink-soft); }
.calc-line:last-child{ border-bottom:0; padding-bottom:0; }
.calc-line b{ color:#fff; font-weight:620; }

/* ============ FOOTER ================================================== */
.site-footer{ background:var(--c-ink); color:var(--c-on-ink-soft); padding-top:clamp(3.5rem,2.4rem + 4vw,6rem); position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--c-accent), transparent);
}
.f-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.35fr; gap:clamp(1.8rem,1rem + 3vw,4rem); }
@media (max-width:1000px){ .f-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .f-grid{ grid-template-columns:1fr; } }
.f-h{ font-family:var(--f-display); font-size:.82rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:1.15rem; }
.f-list{ display:grid; gap:.62rem; font-size:.92rem; }
.f-list a{ color:var(--c-on-ink-soft); transition:color var(--t-fast), transform var(--t-fast); display:inline-block; }
.f-list a:hover{ color:var(--c-accent); transform:translateX(3px); }
.f-contact{ display:grid; gap:.9rem; font-size:.92rem; }
.f-contact .row{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; }
.f-contact svg{ width:17px; height:17px; color:var(--c-accent); margin-top:.2em; flex:0 0 auto; }
.f-bottom{
  margin-top:clamp(2.5rem,1.6rem + 3vw,4rem); border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 0 2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem;
}
.f-bottom a:hover{ color:var(--c-accent); }
.f-legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.f-demo{
  margin-top:1rem; padding:1rem 1.2rem; border:1px dashed rgba(245,165,36,.4); border-radius:var(--r-md);
  font-size:.82rem; color:#c7d1da; background:rgba(245,165,36,.05);
}
.f-demo b{ color:var(--c-accent); }
.socials{ display:flex; gap:.5rem; }
.socials a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; transition:all var(--t-base); }
.socials a:hover{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-accent-ink); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; }

/* ============ FLOATERS ================================================ */
.to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:800; width:48px; height:48px; border-radius:50%;
  background:var(--c-ink); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:all .4s var(--ease-out);
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--c-accent); color:var(--c-accent-ink); transform:translateY(-3px); }
.to-top svg{ width:19px; height:19px; }
.quick-call{
  position:fixed; left:1.2rem; bottom:1.2rem; z-index:800; display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.15rem; border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-accent-ink);
  font-family:var(--f-display); font-weight:680; font-size:.9rem; box-shadow:var(--sh-accent);
  transform:translateY(120%); transition:transform .5s var(--ease-out);
}
.quick-call.is-on{ transform:none; }
.quick-call svg{ width:17px; height:17px; }
@media (max-width:520px){ .quick-call span{ display:none; } .quick-call{ padding:.85rem; } }

/* Cookie-Banner */
.cookie{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:1200; max-width:520px;
  background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:1.4rem 1.5rem; display:none; gap:1rem; grid-template-columns:1fr;
}
.cookie.is-on{ display:grid; animation:fadeUp .6s var(--ease-out); }
.cookie h3{ font-size:1.05rem; }
.cookie p{ font-size:.86rem; color:var(--c-text-soft); }
.cookie-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1500; background:rgba(5,8,11,.94); display:none;
  place-items:center; padding:clamp(1rem,3vw,3rem); backdrop-filter:blur(6px);
}
.lightbox.is-on{ display:grid; animation:lbIn .35s var(--ease-out); }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox figure{ max-width:min(1200px,92vw); display:grid; gap:1rem; }
.lightbox img{ max-height:76vh; width:auto; margin-inline:auto; border-radius:var(--r-md); box-shadow:0 30px 80px rgba(0,0,0,.6); animation:lbZoom .45s var(--ease-out); }
@keyframes lbZoom{ from{ transform:scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
.lightbox figcaption{ color:#c9d3dc; font-size:.9rem; text-align:center; }
.lb-close,.lb-prev,.lb-next{
  position:absolute; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; transition:all var(--t-base);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:var(--c-accent); color:var(--c-accent-ink); border-color:transparent; }
.lb-close{ top:1.2rem; right:1.2rem; } .lb-prev{ left:1.2rem; top:50%; translate:0 -50%; } .lb-next{ right:1.2rem; top:50%; translate:0 -50%; }
.lb-close svg,.lb-prev svg,.lb-next svg{ width:20px; height:20px; }

/* ============ ANIMATIONS / UTILITIES ================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); will-change:opacity,transform; }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="clip"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--ease-out); }
[data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0); }
[data-reveal].is-in{ transform:none; }
[data-delay="1"]{ transition-delay:.09s } [data-delay="2"]{ transition-delay:.18s }
[data-delay="3"]{ transition-delay:.27s } [data-delay="4"]{ transition-delay:.36s }
[data-delay="5"]{ transition-delay:.45s } [data-delay="6"]{ transition-delay:.54s }
[data-delay="7"]{ transition-delay:.63s } [data-delay="8"]{ transition-delay:.72s }

.parallax{ will-change:transform; }
.tilt{ transform-style:preserve-3d; transition:transform .35s var(--ease-out); }

.noise-bg{ position:relative; }
.noise-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hide-mob{ display:initial; } .only-mob{ display:none; }
@media (max-width:760px){ .hide-mob{ display:none !important; } .only-mob{ display:initial; } }
.mt-0{ margin-top:0 } .mt-1{ margin-top:.6rem } .mt-2{ margin-top:1.2rem } .mt-3{ margin-top:2rem } .mt-4{ margin-top:3rem }
.mb-0{ margin-bottom:0 } .mb-2{ margin-bottom:1.2rem } .mb-3{ margin-bottom:2rem }
.rel{ position:relative } .ovh{ overflow:hidden }

/* Sticky Sidebar */
.sticky-col{ position:sticky; top:calc(var(--header-h) + 1.5rem); align-self:start; }
@media (max-width:860px){ .sticky-col{ position:static; } }

/* Inhaltsverzeichnis */
.toc{ border-left:2px solid var(--c-line); padding-left:1.1rem; display:grid; gap:.55rem; font-size:.9rem; }
.toc a{ color:var(--c-text-mute); transition:color var(--t-fast); }
.toc a:hover,.toc a.is-active{ color:var(--c-accent-d); font-weight:580; }
[data-theme="dark"] .toc a:hover,[data-theme="dark"] .toc a.is-active{ color:var(--c-accent); }

/* Druck */
@media print{
  .site-header,.mobile-nav,.to-top,.quick-call,.cookie,.hero-scroll,.progress-bar{ display:none !important; }
  body{ background:#fff; color:#000; }
  .on-ink,.cta-band,.site-footer{ background:#fff !important; color:#000 !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555; }
}

/* ============ KORREKTUREN & FEINSCHLIFF ================================ */
[hidden]{ display:none !important; }
.hp-t,.hp-s{ display:block; }
.hp-s{ margin-top:.1rem; }
.hero-panel input[type="date"]{ color-scheme:dark; }
.svc-media img,.proj img,.person-media img,.media-frame img{ background:var(--c-bg-soft); }
.sec-head h2{ text-wrap:balance; }
.split > .rich{ min-width:0; }
.marquee-track{ align-items:center; }
.stat-num > span{ display:inline-block; font-variant-numeric:tabular-nums; }
.wiz-foot > span{ flex:1; }
.acc-btn > span.acc-ico{ align-self:flex-start; margin-top:.15rem; }
.opt-box{ align-content:start; }
.f-list a{ text-wrap:pretty; }
@media (max-width:520px){
  .hero h1{ font-size:clamp(2.1rem,1.2rem + 5.6vw,3rem); }
  .stats{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .hero-actions .btn,.phero-actions .btn,.cookie-actions .btn{ width:auto; }
  .flex-between{ gap:1rem; }
}
html{ overflow-x:clip; }
body{ overflow-x:clip; }
.hero,.phero,.cta-band,.site-footer{ max-width:100vw; }
.split-media{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(1.2rem,.8rem + 1.6vw,1.9rem); align-items:center; }
@media (max-width:820px){ .split-media{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:820px){
  [data-reveal="left"],[data-reveal="right"]{ transform:translateY(24px); }
}
.badge svg{ width:15px; height:15px; flex:0 0 auto; }
.badge .dot{ flex:0 0 auto; }
.phero-facts{ gap:clamp(1.6rem,1rem + 2.6vw,3.4rem) clamp(1.8rem,1rem + 3vw,4rem); }
.pf-l{ white-space:nowrap; }
@media (max-width:560px){ .pf-l{ white-space:normal; } }
.hero-kicker svg{ width:15px; height:15px; }
.person-media img{ filter:none; }
.person:hover .person-media img{ filter:none; transform:scale(1.04); }
@media (max-width:1620px){ .float-card.br{ right:.9rem; } .float-card.bl{ left:.9rem; } }

/* ============ HEADER-TELEFON, HERO-KENNZAHLEN, USP-LEISTE ============== */
.header-phone{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:var(--r-pill);
  font-family:var(--f-display); font-weight:660; font-size:.92rem; color:#fff; white-space:nowrap;
  transition:color var(--t-fast), background-color var(--t-fast);
}
.header-phone svg{ width:16px; height:16px; color:var(--c-accent); }
.header-phone:hover{ background:rgba(255,255,255,.1); }
.is-stuck .header-phone, .header-light .header-phone{ color:var(--c-text); }
.is-stuck .header-phone:hover{ background:var(--c-bg-soft); }
@media (max-width:1340px){ .header-phone span{ display:none; } }
@media (max-width:1220px){ .header-phone{ display:none; } }

.hero-rating{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin:1.4rem 0 0;
  font-size:.88rem; color:rgba(255,255,255,.72);
  opacity:0; animation:fadeUp .9s var(--ease-out) .85s forwards;
}
.hero-rating b{ color:#fff; font-family:var(--f-display); font-weight:700; }
.hero-rating .stars{ color:var(--c-accent); }
.hero-rating .stars svg{ width:15px; height:15px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.6rem, .3rem + .8vw, 1rem);
  margin-top:clamp(1.8rem, 1rem + 2.6vw, 3.2rem);
  opacity:0; animation:fadeUp 1s var(--ease-out) 1.05s forwards;
}
.hstat{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-radius:var(--r-md); padding:clamp(.9rem, .6rem + .7vw, 1.3rem) clamp(1rem, .7rem + .8vw, 1.5rem);
  display:grid; gap:.2rem; transition:transform .4s var(--ease-out), background-color .4s;
}
.hstat:hover{ transform:translateY(-3px); background:rgba(255,255,255,.11); }
.hstat .hv{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.035em; line-height:1;
  font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); color:var(--c-accent);
}
.hstat .hv em{ font-style:normal; font-size:.7em; }
.hstat .hl{ font-size:.78rem; color:rgba(255,255,255,.68); line-height:1.35; }
@media (max-width:860px){ .hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.usp-strip{ background:var(--c-ink-2); border-block:1px solid rgba(255,255,255,.08); padding-block:1.35rem; }
.usp-list{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.8rem, .4rem + 1.2vw, 2rem);
}
.usp-list li{ display:flex; align-items:center; gap:.75rem; position:relative; }
.usp-list li + li::before{
  content:""; position:absolute; left:calc(-1 * clamp(.4rem, .2rem + .6vw, 1rem)); top:12%; bottom:12%;
  width:1px; background:rgba(255,255,255,.12);
}
.usp-ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(245,165,36,.14); color:var(--c-accent); border:1px solid rgba(245,165,36,.22);
}
.usp-ico svg{ width:19px; height:19px; }
.usp-list li > span:last-child{ display:grid; line-height:1.3; min-width:0; }
.usp-list b{ color:#fff; font-size:.9rem; font-weight:620; }
.usp-list li span span{ font-size:.78rem; color:#8f9daa; }
@media (max-width:1080px){ .usp-list{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:1.2rem; }
  .usp-list li + li::before{ display:none; } }
@media (max-width:640px){ .usp-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .usp-list{ grid-template-columns:1fr; } }
.hero{ align-items:center; }
.hero-inner{ padding-block:1rem; }
.hero{ padding-top:calc(var(--header-h) + 1.6rem); padding-bottom:clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.hero h1{ margin-bottom:1.2rem; }
.hero-actions{ margin-top:1.8rem; }
.hero-grid{ align-items:center; }