/* ═══════════════════════════════════════════════════════════════
   concave.systems — "BRENNPUNKT"
   Ein optisches System: gestreute Aufmerksamkeit → gebündelte Anfrage.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────── */
:root{
  /* Substrat */
  --void:#060607;
  --ink-1:#0A0B0D;
  --ink-2:#101116;
  --ink-3:#181A20;
  --ink-4:#22242C;

  /* Licht */
  --bone:#F2F3F5;
  --bone-2:#C9CCD3;
  --mute:#878C96;
  --dim:#565B65;

  /* Signal */
  --ember:#FF4A17;
  --ember-2:#FF8A3D;
  --ember-soft:rgba(255,74,23,.10);
  --spect-c:#28E0FF;
  --spect-m:#FF3DA6;

  /* Linien */
  --line:rgba(242,243,245,.09);
  --line-2:rgba(242,243,245,.16);
  --line-3:rgba(242,243,245,.28);

  /* Typo */
  --ff-d:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-s:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ff-m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Raum */
  --shell:1320px;
  --gutter:clamp(20px,4vw,64px);
  --sec-y:clamp(96px,14vh,190px);

  /* Bewegung */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-snap:cubic-bezier(.2,.9,.2,1);

  --nav-h:74px;
}

/* ── 2. RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--ff-d);
  font-variation-settings:"wdth" 100;
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a[href^="tel:"],.phone-number{white-space:nowrap}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none}
ul{list-style:none}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.pulse{
  width:6px;height:6px;border-radius:50%;background:var(--ember);display:inline-block;
  box-shadow:0 0 0 0 rgba(255,74,23,.65);animation:pulse 2.4s var(--e-out) infinite;flex:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,74,23,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,74,23,0)}
  100%{box-shadow:0 0 0 0 rgba(255,74,23,0)}
}

/* ── 3. TYPO-SYSTEM ───────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--ff-d);font-weight:800;
  line-height:.92;letter-spacing:-.045em;
  text-wrap:balance;
}
h1 em,h2 em,h3 em,.serif{
  font-family:var(--ff-s);font-style:italic;font-weight:400;
  letter-spacing:-.02em;
}
h1 em,h2 em{font-size:1.07em;line-height:1}

.sec__title{font-size:clamp(2.3rem,5.6vw,4.6rem)}
.sec__idx{
  display:block;color:var(--ember);margin-bottom:clamp(18px,2vw,28px);
  position:relative;padding-left:20px;
}
.sec__idx::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:1px;background:var(--ember);
}
/* Breite immer an der Überschriftgröße messen — nie an der Grundschrift,
   sonst quetscht sich die Zeile auf ein Wort zusammen. */
.sec__head{margin-bottom:clamp(48px,7vw,96px)}
.sec__head .sec__title{max-width:22ch}
.sec__head--split{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);
  align-items:end;
}
.sec__head--split .sec__title{max-width:17ch}
.sec__sub{color:var(--mute);font-size:clamp(1rem,1.15vw,1.13rem);max-width:44ch;padding-bottom:.4em}
.sec__sub--wide{max-width:56ch;margin-top:24px}
.sec{padding-block:var(--sec-y);position:relative}

/* ── 4. BUTTONS ───────────────────────────────────────────────── */
.btn{
  --btn-fg:var(--void); --btn-bg:var(--bone);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 26px;border-radius:100px;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  color:var(--btn-fg);cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .45s var(--e-out),border-color .45s var(--e-out),transform .5s var(--e-out);
  will-change:transform;
}
.btn > span{position:relative;z-index:2;white-space:nowrap}
.btn__arrow{width:17px;height:17px;position:relative;z-index:2;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e-out)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--lg{padding:19px 34px;font-size:1rem}
.btn--sm{padding:11px 20px;font-size:.85rem}
.btn--full{width:100%}

.btn--solid{background:var(--btn-bg)}
.btn--solid::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--ember);
  transform:translateY(101%);transition:transform .58s var(--e-out);
}
.btn--solid:hover{color:#fff}
.btn--solid:hover::before{transform:translateY(0)}

.btn--ghost{color:var(--bone);border:1px solid var(--line-2);background:transparent}
.btn--ghost::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--bone);
  transform:translateY(101%);transition:transform .58s var(--e-out);
}
.btn--ghost:hover{color:var(--void);border-color:var(--bone)}
.btn--ghost:hover::before{transform:translateY(0)}

.btn--invert{background:var(--void);color:var(--bone)}
.btn--invert::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--ember);
  transform:translateY(101%);transition:transform .58s var(--e-out);
}
.btn--invert:hover::before{transform:translateY(0)}

.tag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 15px;border-radius:100px;border:1px solid var(--line-2);
  color:var(--bone-2);background:rgba(255,255,255,.03);
}
.tag--ghost{color:var(--dim)}

/* ── 7. GRAIN / VIGNETTE ──────────────────────────────────────── */
/* Bewusst nur leicht übergroß: eine 400%-Fläche zu animieren kostet
   ein Vielfaches an Füllrate und war die Hauptursache für Ruckeln. */
.grain{
  position:fixed;inset:-22%;z-index:8000;pointer-events:none;opacity:.045;
  will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(9) infinite;
}
@keyframes grain{
  0%,100%{transform:translate3d(0,0,0)} 12%{transform:translate3d(-4%,-2%,0)} 25%{transform:translate3d(-7%,3%,0)}
  37%{transform:translate3d(3%,-6%,0)} 50%{transform:translate3d(-3%,7%,0)} 62%{transform:translate3d(6%,0,0)}
  75%{transform:translate3d(0,6%,0)} 87%{transform:translate3d(-5%,-5%,0)}
}
.edge-vignette{
  position:fixed;inset:0;z-index:7999;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%);
}

/* ── 8. NAV ───────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gutter);gap:24px;
  transition:transform .55s var(--e-out),background .5s,border-color .5s,backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,7,.72);backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav__brand{display:flex;align-items:center;gap:11px}
.nav__mark{width:19px;fill:var(--bone);transition:transform .7s var(--e-out),fill .4s}
.nav__brand:hover .nav__mark{transform:rotate(180deg)}
.nav__word{font-weight:700;font-size:.98rem;letter-spacing:-.03em}
.nav__word i{font-style:normal;color:var(--ember)}

.nav__links{display:flex;gap:2px;margin-left:auto}
.nav__links a{
  position:relative;padding:9px 15px;font-size:.88rem;font-weight:500;color:var(--bone-2);
  transition:color .3s;
}
.nav__links a span{display:block}
.nav__links a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--e-out);
}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links a.is-active{color:var(--ember)}
.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left}

.nav__right{display:flex;align-items:center;gap:16px}
.nav__burger{display:none;width:36px;height:36px;position:relative}
.nav__burger i{
  position:absolute;left:8px;width:20px;height:1.5px;background:var(--bone);
  transition:transform .45s var(--e-out),opacity .3s;
}
.nav__burger i:first-child{top:15px}
.nav__burger i:last-child{top:21px}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* Nav-Inversion über heller Sektion */
body.nav-invert .nav.is-stuck{background:rgba(242,243,245,.78);border-bottom-color:rgba(6,6,7,.1)}
body.nav-invert .nav__mark{fill:var(--void)}
body.nav-invert .nav__word,body.nav-invert .nav__links a:hover{color:var(--void)}
body.nav-invert .nav__links a{color:rgba(6,6,7,.62)}
body.nav-invert .btn--solid{background:var(--void);color:var(--bone)}
body.nav-invert .nav__burger i{background:var(--void)}

/* Drawer */
.drawer{
  position:fixed;inset:0;z-index:890;background:var(--ink-1);
  display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:var(--nav-h) var(--gutter) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e-out);
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer__links{display:flex;flex-direction:column;gap:6px}
.drawer__links a{
  font-size:clamp(2rem,9vw,3.2rem);font-weight:800;letter-spacing:-.045em;line-height:1.1;
  display:flex;align-items:baseline;gap:16px;opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out),color .3s;
}
.drawer.is-open .drawer__links a{opacity:1;transform:none}
.drawer__links a:nth-child(1){transition-delay:.10s}
.drawer__links a:nth-child(2){transition-delay:.16s}
.drawer__links a:nth-child(3){transition-delay:.22s}
.drawer__links a:nth-child(4){transition-delay:.28s}
.drawer__links a:nth-child(5){transition-delay:.34s}
.drawer__links a:nth-child(6){transition-delay:.40s}
.drawer__links a em{font-family:var(--ff-m);font-size:.7rem;font-style:normal;color:var(--ember);letter-spacing:.1em}
.drawer__links a:active{color:var(--ember)}
.drawer__links a.is-active{color:var(--ember)}
.drawer__foot{display:flex;flex-direction:column;gap:8px;color:var(--mute);font-size:.95rem;border-top:1px solid var(--line);padding-top:26px}

/* Progress */
.progress{position:fixed;top:0;left:0;right:0;height:1.5px;z-index:950;background:transparent;pointer-events:none}
.progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--ember),var(--ember-2));will-change:transform;
}

/* ── 9. HERO ──────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(20px,4vh,54px));padding-bottom:clamp(60px,9vh,100px);
  overflow:hidden;
}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,var(--void) 2%,rgba(6,6,7,.55) 26%,transparent 62%),
    linear-gradient(to right,rgba(6,6,7,.72) 0%,transparent 55%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(28px,4vw,60px);align-items:center;
}
.hero__lead-col{min-width:0}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:12px;max-width:100%;
  margin-bottom:clamp(16px,2vw,24px);padding:5px 14px 5px 5px;
  border:1px solid var(--line-2);border-radius:100px;
  background:rgba(255,255,255,.025);
}
.hero__eyebrow .tag{padding:6px 9px;border:0;background:transparent}
.hero__rating{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.04em;color:var(--dim)
}
.hero__rating::before{content:"";width:1px;height:16px;margin-right:4px;background:var(--line-2)}
.hero__rating b{color:var(--bone-2);font-weight:500}
.hero__stars{color:var(--ember);letter-spacing:.08em;font-size:.72rem}

.hero__title{
  font-size:clamp(2.4rem,5.2vw,5rem);
  line-height:.92;margin-bottom:clamp(24px,2.6vw,36px);
  overflow-wrap:break-word;
}
.hero__title .line{display:block;overflow:hidden}

/* Rotierendes Ergebniswort */
.hero__rotline{display:flex;flex-wrap:wrap;align-items:baseline}
.js .hero__rotline{
  opacity:0;transform:translateY(.34em) rotate(.7deg);
  transition:opacity .58s ease,transform .82s var(--e-out);
}
.js .hero__rotline.is-intro-in{opacity:1;transform:none}
.rotator{position:relative;display:inline-block;vertical-align:baseline}
.rotator__sizer{visibility:hidden;font-family:var(--ff-s);font-style:italic;font-weight:400}
.rotator__word{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-family:var(--ff-s);font-style:italic;font-weight:400;color:var(--ember);
  opacity:0;transform:translateY(.42em) rotate(1.5deg);
  transition:opacity .5s ease,transform .6s var(--e-out);
}
.rotator__word.is-active{opacity:1;transform:none}
.rotator__word.is-exit{opacity:0;transform:translateY(-.42em) rotate(-1.5deg)}

.hero__lead{color:var(--bone-2);font-size:clamp(1rem,1.15vw,1.14rem);max-width:46ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px)}

.hero__proof{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);
  margin-top:clamp(28px,3.6vw,44px);padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid var(--line);
}
.hero__proof li{display:flex;flex-direction:column;gap:3px}
.hero__proof b{font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:800;letter-spacing:-.03em;color:var(--bone)}
.hero__proof span{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* Showcase: schwebender Browser-Rahmen mit wechselnden Projekten */
.hero__showcase{position:relative;justify-self:end;width:100%;max-width:600px}
.frame{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--ink-2);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02);
  transition:transform .5s var(--e-out);will-change:transform;
}
.frame__bar{
  display:flex;align-items:center;gap:12px;padding:0 16px;height:38px;
  background:var(--ink-3);border-bottom:1px solid var(--line);
}
.frame__dots{display:flex;gap:6px}
.frame__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-3)}
.frame__dots i:first-child{background:var(--ember)}
.frame__url{
  flex:1;text-align:center;font-family:var(--ff-m);font-size:.66rem;color:var(--mute);
  letter-spacing:.02em;background:var(--ink-1);border-radius:100px;padding:5px 14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%;margin-inline:auto;
}
.frame__view{position:relative;aspect-ratio:16/10.4;overflow:hidden;background:var(--ink-1)}
.frame__view img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.04);transition:opacity .9s var(--e-out),transform 1.2s var(--e-out);
}
.frame__view img.is-active{opacity:1;transform:scale(1)}

.hero__chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  background:rgba(10,11,13,.82);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-radius:12px;padding:12px 16px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.9);
  animation:chipFloat 6s var(--e-io) infinite;
}
.hero__chip--speed{left:-22px;bottom:38px;flex-direction:row;align-items:center}
.hero__chip--speed b{font-size:1.6rem;font-weight:800;letter-spacing:-.04em;color:var(--bone);line-height:1}
.hero__chip--speed span{font-family:var(--ff-m);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);line-height:1.3}
.hero__chip--live{right:-16px;top:26px;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.06em;color:var(--bone-2);animation-delay:-3s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero__scroll{
  position:absolute;left:var(--gutter);bottom:clamp(22px,4vh,40px);z-index:3;
  display:none;flex-direction:column;align-items:center;gap:12px;color:var(--dim);
}
.hero__scroll .mono{writing-mode:vertical-rl;font-size:.58rem}
.hero__scroll-line{width:1px;height:46px;background:var(--line-2);position:relative;overflow:hidden}
.hero__scroll-line i{position:absolute;inset:0;background:var(--ember);animation:scrollLine 2.2s var(--e-io) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* ── 10. TICKER ───────────────────────────────────────────────── */
.ticker{
  overflow:hidden;border-block:1px solid var(--line);padding-block:20px;
  background:var(--ink-1);position:relative;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:14vw;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-1),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink-1),transparent)}
.ticker__track{
  display:flex;align-items:center;gap:26px;white-space:nowrap;width:max-content;
  will-change:transform;
}
.ticker__track span{
  font-size:clamp(1.3rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(242,243,245,.34);
  transition:color .4s,-webkit-text-stroke-color .4s;
}
.ticker__track span:hover{color:var(--bone);-webkit-text-stroke-color:transparent}
.ticker__track i{color:var(--ember);font-size:.85rem;font-style:normal;transform:translateY(-2px)}

/* ── 11. DIAGNOSE ─────────────────────────────────────────────── */
.diagnose{background:var(--void)}
.diag__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.diag{
  position:relative;background:var(--ink-1);padding:clamp(26px,3vw,40px);
  min-height:clamp(320px,34vw,400px);display:flex;flex-direction:column;
  overflow:hidden;transition:background .5s var(--e-out);
  transform-style:preserve-3d;
}
.diag:hover{background:var(--ink-2)}
.diag__num{
  font-size:clamp(3rem,6vw,5.2rem);font-weight:800;letter-spacing:-.055em;line-height:1;
  color:var(--bone);margin-bottom:16px;font-variant-numeric:tabular-nums;
  position:relative;z-index:2;
}
.diag h3{font-size:1.16rem;font-weight:700;letter-spacing:-.03em;margin-bottom:12px;line-height:1.25;position:relative;z-index:2}
.diag p{color:var(--mute);font-size:.94rem;position:relative;z-index:2}
.diag__src{color:var(--dim);font-size:.58rem;margin-top:auto;padding-top:22px;position:relative;z-index:2}
.diag__viz{position:absolute;right:0;bottom:0;width:100%;height:56%;opacity:.5;z-index:1;pointer-events:none}

.diag__verdict{
  margin-top:clamp(48px,6vw,80px);display:flex;align-items:flex-start;gap:clamp(20px,3vw,40px);
  max-width:74ch;
}
.diag__verdict p{font-size:clamp(1.2rem,2.4vw,1.85rem);font-weight:600;letter-spacing:-.03em;line-height:1.32}
.diag__verdict em{font-family:var(--ff-s);font-style:italic;font-weight:400;color:var(--ember);font-size:1.1em}
.diag__arrow{
  flex:none;width:clamp(40px,6vw,74px);height:1px;background:var(--ember);margin-top:.9em;position:relative;
}
.diag__arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--ember);border-right:1px solid var(--ember);transform:rotate(45deg)}

/* ── 12. LEISTUNGEN ───────────────────────────────────────────── */
.svc{border-top:1px solid var(--line)}
.svc__row{
  position:relative;display:grid;
  grid-template-columns:56px minmax(0,1.05fr) minmax(0,1fr) 56px;
  grid-template-areas:
    "idx name desc go"
    "idx tags desc go";
  align-items:center;column-gap:clamp(16px,3vw,44px);row-gap:0;
  padding:clamp(30px,4.4vw,58px) var(--gutter);
  max-width:var(--shell);margin-inline:auto;
  border-bottom:1px solid var(--line);overflow:hidden;
  transition:color .5s var(--e-out);
}
.svc__idx{grid-area:idx}
.svc__name{grid-area:name}
.svc__desc{grid-area:desc}
.svc__tags{grid-area:tags}
.svc__go{grid-area:go}
.svc__row::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,var(--ink-2),var(--ink-1));
  transform:scaleY(0);transform-origin:bottom;transition:transform .62s var(--e-out);
}
.svc__row:hover::before{transform:scaleY(1)}
.svc__idx{color:var(--dim);position:relative;z-index:2;align-self:start;padding-top:.5em;transition:color .4s}
.svc__row:hover .svc__idx{color:var(--ember)}
.svc__name{
  font-size:clamp(1.9rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.045em;line-height:.95;
  position:relative;z-index:2;display:block;
}
.svc__desc{color:var(--mute);font-size:.98rem;position:relative;z-index:2;max-width:46ch;transition:color .4s}
.svc__row:hover .svc__desc{color:var(--bone-2)}
.svc__tags{display:none;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:2}
.svc__tags i{
  font-style:normal;font-family:var(--ff-m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--line-2);border-radius:100px;color:var(--mute);
}
.svc__go{
  position:relative;z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;justify-self:end;
  transition:background .45s var(--e-out),border-color .45s,transform .45s var(--e-out);
}
.svc__go svg{width:16px;height:16px;fill:none;stroke:var(--bone);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.svc__row:hover .svc__go{background:var(--ember);border-color:var(--ember);transform:rotate(-45deg) scale(1.06)}
.svc__row:hover .svc__go svg{stroke:#fff}
.svc__canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;opacity:0;transition:opacity .28s var(--e-out);pointer-events:none}
.svc__row:hover .svc__canvas{opacity:.85}
.svc__row:hover .svc__canvas[data-viz="build"]{opacity:.68}
.svc__row:hover .svc__canvas[data-viz="grid"],
.svc__row:hover .svc__canvas[data-viz="uptime"]{opacity:.86}

/* ── 13. ARBEITEN / ARC ───────────────────────────────────────── */
.work{overflow:hidden}
.arc{position:relative;margin-top:clamp(20px,3vw,40px);padding-block:clamp(30px,5vw,60px)}
.arc__track{
  display:flex;gap:clamp(20px,2.6vw,40px);padding-inline:var(--gutter);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  cursor:grab;touch-action:pan-y;
  padding-block:clamp(40px,6vw,86px);
}
.arc__track::-webkit-scrollbar{display:none}
.arc__track.is-drag{cursor:grabbing}
.arc__card{
  flex:none;width:clamp(300px,34vw,470px);
  will-change:transform;transform-origin:center bottom;
}
.arc__thumb{
  position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-2);
  transition:border-color .5s var(--e-out);
}
.arc__thumb img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  /* Fremde Markenwelten werden gedämpft, damit die Seite ein Ton bleibt —
     unter dem Zeiger kommt die echte Farbe zurück. */
  filter:grayscale(.55) contrast(1.04) brightness(.72);
  transform:scale(1.01);
  transition:filter .6s var(--e-out),transform .9s var(--e-out);
}
.arc__card:hover .arc__thumb{border-color:var(--line-3)}
.arc__card:hover .arc__thumb img{filter:none;transform:scale(1.045)}
.arc__link{display:block}
.arc__url{
  color:var(--dim);font-size:.58rem;margin-top:4px;
  transition:color .35s;
}
.arc__card:hover .arc__url{color:var(--ember)}
.arc__glare{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.09) 45%,transparent 60%);
  transform:translateX(-60%);transition:transform .9s var(--e-out);
}
.arc__card:hover .arc__glare{transform:translateX(60%)}
.arc__meta{padding-top:18px;display:flex;flex-direction:column;gap:7px}
.arc__meta .mono{color:var(--ember);font-size:.6rem}
.arc__meta h3{font-size:1.32rem;font-weight:700;letter-spacing:-.035em}
.arc__meta p{color:var(--mute);font-size:.88rem;line-height:1.5;max-width:38ch}
.arc__hint{
  position:absolute;right:var(--gutter);top:0;color:var(--dim);font-size:.58rem;
  display:flex;align-items:center;gap:8px;
}
.arc__hint::before{content:"";width:26px;height:1px;background:var(--line-2)}

/* Ein warmer Schleier legt die fremden Screenshots auf die Palette der Seite */
.arc__thumb::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,74,23,.10),transparent 45%,rgba(6,6,7,.55));
  opacity:1;transition:opacity .6s var(--e-out);
}
.arc__card:hover .arc__thumb::after{opacity:.25}

/* ── 14. PROZESS ──────────────────────────────────────────────── */
.proc{position:relative;padding-left:clamp(28px,6vw,90px)}
.proc__path{position:absolute;left:0;top:8px;bottom:0;width:2px;height:calc(100% - 8px);overflow:visible}
.proc__rail{stroke:var(--line-2);stroke-width:1}
.proc__beam{stroke:var(--ember);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 6px rgba(255,74,23,.8))}
.proc__step{position:relative;padding-bottom:clamp(48px,6vw,86px)}
.proc__step:last-child{padding-bottom:0}
.proc__dot{
  position:absolute;left:calc(clamp(28px,6vw,90px) * -1 - 4px);top:6px;
  width:9px;height:9px;border-radius:50%;background:var(--void);border:1px solid var(--line-3);
  transition:background .5s,border-color .5s,box-shadow .5s;
}
.proc__step.is-in .proc__dot{background:var(--ember);border-color:var(--ember);box-shadow:0 0 0 5px rgba(255,74,23,.14)}
.proc__idx{color:var(--dim);display:block;margin-bottom:12px;font-size:.62rem}
.proc__step h3{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.04em;margin-bottom:14px}
.proc__step p{color:var(--mute);max-width:56ch;font-size:1rem}
.proc__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.proc__list li{
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px;border:1px solid var(--line);border-radius:100px;color:var(--mute);
  background:rgba(255,255,255,.02);
}

/* ── 15. PROOF ────────────────────────────────────────────────── */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-block:1px solid var(--line);
  counter-reset:stat;
}
.stat{
  position:relative;background:var(--void);overflow:hidden;counter-increment:stat;
  padding:clamp(26px,3vw,40px) clamp(20px,2vw,32px);
  min-height:clamp(158px,17vw,216px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  transition:background .5s var(--e-out);
}
/* Index oben links */
.stat::before{
  content:"0" counter(stat);position:absolute;top:clamp(18px,2vw,24px);left:clamp(20px,2vw,32px);
  font-family:var(--ff-m);font-size:.58rem;letter-spacing:.16em;color:var(--dim);
  transition:color .4s;
}
/* Ember-Linie oben, läuft beim Einblenden ein */
.stat::after{
  content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--ember),var(--ember-2));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e-out);
}
.stat.is-in::after{transform:scaleX(1)}
.stat:hover{background:var(--ink-1)}
.stat:hover::before{color:var(--ember)}

.stat b{
  font-size:clamp(2.6rem,5.6vw,4.8rem);font-weight:800;letter-spacing:-.06em;line-height:.92;
  font-variant-numeric:tabular-nums;
  background-image:linear-gradient(165deg,var(--bone) 30%,var(--mute));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transition:opacity .4s;
}
.stat:hover b{background-image:linear-gradient(165deg,var(--ember-2),var(--ember))}
.stat b span{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
/* nur die direkte Beschriftungszeile — nicht die Ziffern im <b> */
.stat > span{
  display:flex;align-items:center;gap:9px;
  color:var(--mute);font-family:var(--ff-m);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
}
.stat > span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex:none;
  box-shadow:0 0 0 3px var(--ember-soft);
}

.quote{margin-top:clamp(56px,8vw,110px);max-width:82ch}
.quote blockquote{
  font-size:clamp(1.4rem,3.4vw,2.65rem);font-weight:600;letter-spacing:-.035em;line-height:1.24;
  text-wrap:balance;
}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:clamp(24px,3vw,38px)}
.quote__who{font-weight:700;font-size:1rem;letter-spacing:-.02em}
.quote__what{color:var(--dim);font-size:.62rem}

/* ── 16. ANGEBOT (INVERSION) ──────────────────────────────────── */
.offer{background:var(--bone);color:var(--void);position:relative;z-index:2}
.offer .sec__idx{color:var(--ember)}
.offer .sec__idx::before{background:var(--ember)}
.offer .sec__title em{color:var(--ember)}
.offer .sec__sub{color:rgba(6,6,7,.6)}
.offer__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
.offer__label{color:rgba(6,6,7,.45);display:block;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid rgba(6,6,7,.14)}
.check{display:flex;flex-direction:column}
.check li{
  position:relative;padding:15px 0 15px 34px;border-bottom:1px solid rgba(6,6,7,.09);
  font-size:.98rem;line-height:1.5;
}
.check li::before{
  content:"";position:absolute;left:2px;top:24px;width:11px;height:6px;
  border-left:1.6px solid var(--ember);border-bottom:1.6px solid var(--ember);
  transform:rotate(-45deg);
}
.check--alt li{color:rgba(6,6,7,.66)}
.check--alt li b{color:var(--void);font-weight:700}
.offer__cta{margin-top:34px}
.offer .btn--invert{background:var(--void);color:var(--bone)}

/* ── 17. FAQ ──────────────────────────────────────────────────── */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item summary{
  display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:16px;
  padding:clamp(20px,2.4vw,30px) 0;cursor:pointer;list-style:none;
  transition:color .35s;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary .mono{color:var(--dim);font-size:.62rem;transition:color .35s}
.acc__q{font-size:clamp(1.02rem,1.9vw,1.42rem);font-weight:700;letter-spacing:-.03em;line-height:1.3}
.acc__ico{position:relative;width:14px;height:14px;justify-self:end}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--bone-2);
  transition:transform .45s var(--e-out),background .35s;
}
.acc__ico::before{width:14px;height:1.4px;margin:-.7px 0 0 -7px}
.acc__ico::after{width:1.4px;height:14px;margin:-7px 0 0 -.7px}
.acc__item[open] .acc__ico::after{transform:rotate(90deg)}
.acc__item[open] summary .mono,.acc__item:hover summary .mono{color:var(--ember)}
.acc__item[open] .acc__ico::before,.acc__item[open] .acc__ico::after{background:var(--ember)}
.acc__a{overflow:hidden}
.acc__a p{
  color:var(--mute);max-width:66ch;font-size:1rem;
  padding:0 44px clamp(24px,3vw,34px) 60px;
}

/* ── 18. KONTAKT ──────────────────────────────────────────────── */
.contact{position:relative;overflow:hidden;background:var(--ink-1);border-top:1px solid var(--line)}
.contact__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.contact__inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px);align-items:start;
}
.contact__title{font-size:clamp(2.4rem,6vw,4.9rem);line-height:.9;margin-bottom:28px}
.contact__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.contact__title em{color:var(--ember)}
.contact__lead{color:var(--bone-2);max-width:44ch;font-size:1.05rem}
.contact__direct{display:flex;flex-direction:column;margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line)}
.direct{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);transition:padding-left .45s var(--e-out),color .35s;
}
.direct:hover{padding-left:12px}

/* Angebotsbox im Artikel — sichtbar, aber ohne den Lesefluss zu zerreißen. */
.acta{
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,38px);align-items:center;
  margin-block:clamp(30px,4vw,46px);padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line-2);border-radius:12px;background:var(--ink-1);
  position:relative;overflow:hidden;
}
.acta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ember)}
.acta__title{color:var(--bone);font-weight:650;font-size:1.02rem;letter-spacing:-.01em;margin:0 0 6px}
.acta__text{color:var(--mute);font-size:.92rem;line-height:1.6;margin:0;max-width:52ch}
/* Die Box sitzt in der Lesespalte — die rechte Spalte darf den Text nicht
   zusammenquetschen, deshalb eng an der Schaltflächenbreite halten. */
.acta__side{display:flex;flex-direction:column;align-items:flex-start;gap:9px;max-width:15rem}
.acta__meta{font-family:var(--ff-m);font-size:.58rem;letter-spacing:.05em;color:var(--dim)}
@media (max-width:760px){
  .acta{grid-template-columns:1fr}
  .acta__side{align-items:stretch}
  .acta__side .btn{justify-content:center}
  .acta__meta{text-align:center}
}

/* Ortsspezifische Bedarfslagen auf den Regional-Seiten. */
.needs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:clamp(30px,4vw,48px);
}
.need{
  background:var(--ink-1);padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;gap:11px;
}
.need__idx{color:var(--ember);font-size:.62rem;letter-spacing:.14em}
.need h3{font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.02em;line-height:1.2}
.need p{color:var(--mute);font-size:.92rem;line-height:1.62}
/* Vier Punkte als 2×2 — im Dreierraster bliebe die letzte Karte allein
   in einer eigenen Zeile stehen. Muss vor der Mobil-Regel stehen, damit
   diese bei gleicher Spezifität gewinnt. */
.needs--quad{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.needs{grid-template-columns:1fr}}

/* Schlanker Conversion-Punkt in der Mitte langer Seiten. */
.ctainline{
  border-block:1px solid var(--line);
  padding-block:clamp(34px,4.4vw,56px);
  background:linear-gradient(90deg,rgba(255,74,23,.05),transparent 60%);
}
.ctainline__inner{
  display:grid;grid-template-columns:1fr auto;gap:clamp(22px,4vw,60px);align-items:center;
}
.ctainline__eyebrow{
  display:block;color:var(--ember);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:12px;
}
.ctainline__title{
  font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.035em;line-height:1.06;max-width:20ch;
}
.ctainline__side{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ctainline__meta{
  font-family:var(--ff-m);font-size:.62rem;letter-spacing:.05em;color:var(--dim);max-width:34ch;
}
@media (max-width:760px){
  .ctainline__inner{grid-template-columns:1fr}
  .ctainline__side{align-items:stretch}
  .ctainline__side .btn{justify-content:center}
  .ctainline__meta{text-align:center}
}

/* Vertrauensblock am Formular — dort fällt die Entscheidung. */
.ctrust{margin-top:clamp(30px,3.6vw,44px);display:flex;flex-direction:column;gap:20px}
.ctrust__rating{display:flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:.78rem;color:var(--mute)}
.ctrust__rating .st{color:var(--ember);letter-spacing:.1em}
.ctrust__rating b{color:var(--bone);font-weight:500}
.ctrust__quote{
  margin:0;padding:20px 22px;border:1px solid var(--line);border-radius:10px;
  background:var(--ink-1);position:relative;
}
.ctrust__quote::before{
  content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;background:var(--ember);
}
.ctrust__quote blockquote{margin:0;font-size:.95rem;line-height:1.6;color:var(--bone-2)}
.ctrust__quote figcaption{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.ctrust__quote figcaption span:first-child{color:var(--bone);font-weight:600;font-size:.88rem}
.ctrust__quote figcaption .mono{color:var(--dim);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.ctrust__list{display:flex;flex-direction:column;gap:9px}
.ctrust__list li{position:relative;padding-left:24px;font-size:.88rem;color:var(--mute)}
.ctrust__list li::before{
  content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;
  border-left:1.6px solid var(--ember);border-bottom:1.6px solid var(--ember);transform:rotate(-45deg);
}
.direct--static:hover{padding-left:0}
.direct .mono{color:var(--dim);font-size:.6rem;transition:color .35s}
.direct:hover .mono{color:var(--ember)}
.direct b{font-size:1.05rem;font-weight:600;letter-spacing:-.02em}

/* Form */
.form{
  background:rgba(9,10,12,.82);
  border:1px solid var(--line);border-radius:10px;
  padding:clamp(24px,3.2vw,42px);display:flex;flex-direction:column;gap:22px;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{position:relative;padding-top:28px}
.field input,.field textarea{
  width:100%;padding:8px 0 12px;font-size:1rem;color:var(--bone);
  border-bottom:1px solid var(--line-2);transition:border-color .4s;resize:none;
}
/* Fokus-Ring nah am Feld halten, damit er das schwebende Label nicht bedrängt */
.field input:focus-visible,.field textarea:focus-visible{outline-offset:2px}
.field label{
  position:absolute;left:0;top:34px;color:var(--mute);font-size:1rem;pointer-events:none;
  transition:transform .45s var(--e-out),font-size .45s var(--e-out),color .35s;transform-origin:left top;
}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-34px);font-size:.68rem;color:var(--ember);letter-spacing:.1em;text-transform:uppercase;
}
.field__line{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out)}
.field input:focus ~ .field__line,.field textarea:focus ~ .field__line{transform:scaleX(1)}
.field.is-error input,.field.is-error textarea{border-bottom-color:var(--ember)}
.field.is-error label{color:var(--ember)}
.field__error,.consent__error{display:block;color:var(--ember);font-size:.76rem;line-height:1.45;margin-top:8px}
.field__error[hidden],.consent__error[hidden]{display:none}

.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:none}
.chips legend{color:var(--dim);width:100%;margin-bottom:12px;font-size:.6rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:9px 16px;border-radius:100px;border:1px solid var(--line-2);
  font-size:.82rem;color:var(--mute);transition:all .35s var(--e-out);
}
.chip:hover span{border-color:var(--line-3);color:var(--bone-2)}
.chip input:checked + span{background:var(--bone);border-color:var(--bone);color:var(--void);font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--ember);outline-offset:2px}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:.82rem;color:var(--mute);line-height:1.5;cursor:pointer}
/* Pflichtfeld direkt vor dem Absenden — muss sicher treffbar sein.
   Das Kästchen bleibt optisch zurückhaltend, die Trefferfläche wächst
   über ein Pseudo-Element auf 44px, ohne das Layout zu verschieben. */
.consent input{
  appearance:none;width:22px;height:22px;flex:none;margin-top:0;border:1px solid var(--line-2);border-radius:4px;
  transition:all .3s;position:relative;
}
.consent input::before{
  content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);
}
.consent input:checked{background:var(--ember);border-color:var(--ember)}
.consent input:checked::after{
  content:"";position:absolute;left:7.5px;top:3px;width:5px;height:11px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg);
}
.consent a{color:var(--bone-2);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
.consent-wrap{display:flex;flex-direction:column;gap:8px}
.form__note{color:var(--dim);font-size:.58rem;text-align:center}
.form__status{font-size:.88rem;text-align:center;min-height:1.2em;transition:color .3s}
.form__status.ok{color:#4ADE80}
.form__status.err{color:var(--ember)}

/* ── 19. FOOTER ───────────────────────────────────────────────── */
.foot{background:var(--void);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,90px);overflow:hidden}
.foot__top{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px)}
.foot__col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.foot__lbl{color:var(--dim);margin-bottom:6px;font-size:.6rem}
.foot__col a{color:var(--bone-2);font-size:.95rem;position:relative;transition:color .3s}
.foot__col a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--ember);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out);
}
.foot__col a:hover{color:var(--bone)}
.foot__col a:hover::after{transform:scaleX(1);transform-origin:left}

.foot__word{margin-top:clamp(50px,7vw,90px);position:relative;line-height:.78}
.foot__wordtext{
  display:block;font-size:clamp(2.4rem,10.4vw,9.4rem);font-weight:800;letter-spacing:-.055em;
  color:transparent;-webkit-text-stroke:1px rgba(242,243,245,.16);white-space:nowrap;
  transition:-webkit-text-stroke-color .6s;
}
.foot__wordtext i{font-style:normal;-webkit-text-stroke-color:var(--ember)}
.foot__word:hover .foot__wordtext{-webkit-text-stroke-color:rgba(242,243,245,.42)}
.foot__logo{display:none}

.foot__bar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:26px;margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--line);color:var(--dim);
}
.foot__bar .mono{font-size:.6rem}
.foot__live{display:flex;align-items:center;gap:8px}

/* ── 20. ANIMATIONS-PRIMITIVE ─────────────────────────────────── */
[data-split] .wd{display:inline-block;overflow:hidden;padding-bottom:.09em}
[data-split] .wd__in{display:inline-block;white-space:nowrap}
.js [data-split] .ch{display:inline-block;transform:translateY(110%) rotate(2deg);opacity:0}
[data-split].is-in .ch{
  transform:translateY(0) rotate(0);opacity:1;
  transition:transform .9s var(--e-out),opacity .55s ease;
}
.js [data-reveal]{opacity:0;transform:translateY(26px);will-change:transform,opacity}
[data-reveal].is-in{opacity:1;transform:none;will-change:auto;transition:opacity .9s var(--e-out),transform 1.05s var(--e-out)}
[data-tilt]{transition:transform .5s var(--e-out)}

/* ── 21. RESPONSIVE ───────────────────────────────────────────── */
@media (min-width:900px){
  .hero__scroll{display:flex}
  .svc__tags{display:flex}
}
@media (max-width:1100px){
  .diag__grid{grid-template-columns:1fr 1fr}
  .diag:last-child{grid-column:1/-1;min-height:280px}
  .stats{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .hero__inner{grid-template-columns:1fr;gap:clamp(40px,7vw,64px)}
  .hero__showcase{justify-self:start;max-width:520px;margin-inline:auto}
  .hero{align-items:flex-start}
  .contact__inner{grid-template-columns:1fr}
  .offer__grid{grid-template-columns:1fr}
  .svc__row{grid-template-columns:44px 1fr 40px;grid-template-areas:"idx name go" ". desc ." ". tags .";row-gap:14px}
  .svc__idx{grid-area:idx}.svc__name{grid-area:name}.svc__desc{grid-area:desc}
  .svc__tags{grid-area:tags}.svc__go{grid-area:go}
}
@media (max-width:680px){
  :root{--sec-y:clamp(72px,11vh,110px);--nav-h:66px}
  .nav__right{gap:8px}
  .nav__right .btn--sm{padding:10px 16px;font-size:.8rem}
  .tag--ghost{display:none}
  .hero__eyebrow{gap:8px;margin-bottom:16px;padding-right:10px}
  .hero__eyebrow .tag{gap:7px;padding-inline:7px;font-size:.6rem;letter-spacing:.1em}
  .hero__rating{gap:5px;font-size:.62rem}
  .hero__rating::before{margin-right:2px}
  .hero__stars{font-size:.66rem;letter-spacing:.04em}
  .hero{padding-bottom:44px;min-height:auto}
  .hero__title{font-size:clamp(2.5rem,10.5vw,4rem)}
  /* Vier Kennzahlen sauber als 2×2 statt 3+1 mit verwaister letzter Zeile */
  .hero__proof{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
  .hero__chip--speed{left:-8px;bottom:24px;padding:10px 13px}
  .hero__chip--speed b{font-size:1.3rem}
  /* Unter die Adressleiste des Rahmens setzen, sonst überdeckt der Chip die URL */
  .hero__chip--live{right:-4px;top:auto;bottom:22px}
  .hero__scroll{display:none}
  .diag__grid{grid-template-columns:1fr}
  .diag:last-child{grid-column:auto}
  .form__row{grid-template-columns:1fr}
  .sec__head--split{grid-template-columns:1fr;align-items:start}
  .stats{grid-template-columns:1fr 1fr}
  .acc__item summary{grid-template-columns:30px 1fr 24px;gap:10px}
  .acc__a p{padding-left:40px;padding-right:0}
  .proc{padding-left:26px}
  .foot__top{grid-template-columns:1fr;gap:26px}
  .direct{flex-direction:column;gap:4px;align-items:flex-start}
}
@media (max-width:420px){
  .hero__chip--speed{display:none}
}

/* Screenreader-only */
.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}

/* ── 22. MOTION-REDUKTION ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-split] .ch,[data-split] .wd,[data-reveal],.hero__rotline{opacity:1!important;transform:none!important}
  .grain{display:none}
  .hero__gl,.contact__gl{opacity:.4}
}

/* ═══════════════════════════════════════════════════════════════
   23. UNTERSEITEN — geteiltes System für alle Detailseiten
   ═══════════════════════════════════════════════════════════════ */

/* Seiten-Hero (kompakter als der Start-Hero) */
.phero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + clamp(48px,8vh,96px)) 0 clamp(52px,8vw,104px);
}
.phero__gl{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.phero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--void),transparent 70%),
             linear-gradient(to right,rgba(6,6,7,.72),transparent 60%);
}
.phero .shell{position:relative;z-index:2}
.phero h1{font-size:clamp(2.3rem,6vw,5rem);letter-spacing:-.045em;line-height:.94;max-width:17ch}
.phero h1 em{font-family:var(--ff-s);font-style:italic;font-weight:400;color:var(--ember)}
.phero__lead{color:var(--bone-2);font-size:clamp(1.04rem,1.35vw,1.24rem);max-width:58ch;margin-top:clamp(22px,3vw,30px)}
.phero__actions{display:flex;gap:12px;margin-top:clamp(28px,3.5vw,40px);flex-wrap:wrap}
.phero--error{min-height:70vh;display:flex;align-items:center}

/* Brotkrumen */
.crumb{
  margin-bottom:clamp(22px,3vw,32px);
  font-family:var(--ff-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.crumb ol{display:flex;gap:10px;align-items:center}
.crumb li{display:contents}
.crumb a{color:var(--mute);transition:color .3s}
.crumb a:hover{color:var(--ember)}
.crumb i{font-style:normal;color:var(--dim)}

/* Proof-Zeile (wie im Start-Hero, wiederverwendbar) */
.metabar{
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,38px);
  margin-top:clamp(34px,4.5vw,54px);padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--line);
}
.metabar span{display:flex;align-items:center;gap:9px;font-family:var(--ff-m);font-size:.78rem;color:var(--mute);letter-spacing:.02em}
.metabar b{color:var(--bone);font-weight:500}
.metabar .st{color:var(--ember);letter-spacing:.1em;font-size:.8rem}
/* Vier Angaben brechen sonst als 3+1 mit verwaister Zeile um */
@media (max-width:860px){
  .metabar{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
}
@media (max-width:420px){
  .metabar{grid-template-columns:1fr}
}

/* Prosa / Textabschnitte */
.prose{padding-block:var(--sec-y)}
.prose__kicker{color:var(--ember);font-family:var(--ff-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:20px}
.prose h2{font-size:clamp(1.9rem,3.8vw,3.1rem);letter-spacing:-.04em;line-height:1.02;max-width:20ch}
.prose h2 em{font-family:var(--ff-s);font-style:italic;font-weight:400;color:var(--ember)}
.prose__lead{color:var(--bone-2);font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:62ch;margin-top:22px}
.prose p{color:var(--mute);font-size:1.02rem;max-width:66ch;margin-top:18px}
.prose p a,.prose__lead a{color:var(--bone-2);text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.prose p a:hover,.prose__lead a:hover{color:var(--ember)}

/* Wechselnde Feature-Reihen (Text + Bild) */
.feat{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,88px);align-items:center;
  padding-block:clamp(44px,7vw,96px);border-bottom:1px solid var(--line);
}
.feat--flip .feat__media{order:2}
.feat__eyebrow{color:var(--ember);font-family:var(--ff-m);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:20px}
.feat__eyebrow b{color:var(--dim);font-weight:400}
.feat h3{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.035em;line-height:1.05;margin-bottom:16px}
.feat p{color:var(--mute);font-size:1.02rem;max-width:48ch}
.feat__list{display:flex;flex-direction:column;margin-top:22px}
.feat__list li{position:relative;padding:11px 0 11px 28px;border-top:1px solid var(--line);color:var(--bone-2);font-size:.95rem}
.feat__list li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:6px;border-left:1.6px solid var(--ember);border-bottom:1.6px solid var(--ember);transform:rotate(-45deg)}
.feat__media{
  position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);
}
.feat__media img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(.4) brightness(.82) contrast(1.03)}
.feat__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,74,23,.08),transparent 50%,rgba(6,6,7,.5))}

/* Leistungs-/Argument-Karten im Raster */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--spaced{margin-top:clamp(36px,5vw,56px)}
.cards--spaced-wide{margin-top:clamp(36px,5vw,60px)}
.card{
  position:relative;background:var(--ink-1);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:12px;
  overflow:hidden;transition:background .5s var(--e-out);min-height:clamp(200px,20vw,260px);
}
.card:hover{background:var(--ink-2)}
.card__idx{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.14em;color:var(--dim)}
.card h3{font-size:clamp(1.2rem,1.8vw,1.55rem);letter-spacing:-.03em;line-height:1.15}
.card p{color:var(--mute);font-size:.95rem}
.card__link{margin-top:auto;padding-top:16px;color:var(--ember);font-family:var(--ff-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.card__link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e-out)}
.card:hover .card__link svg{transform:translateX(4px)}
.card::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out)}
.card:hover::before,.card.is-in::before{transform:scaleX(1)}

/* Gegenüberstellung: ohne vs. mit uns */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.versus__col{background:var(--ink-1);padding:clamp(26px,3.4vw,44px)}
.versus__col--good{background:var(--ink-2)}
.versus__lbl{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:22px;display:flex;align-items:center;gap:9px}
.versus__col--good .versus__lbl{color:var(--ember)}
.versus li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--line);color:var(--mute);font-size:.98rem}
.versus li:last-child{border-bottom:0}
.versus__col--bad li::before{content:"–";position:absolute;left:6px;color:var(--dim);font-weight:700}
.versus__col--good li{color:var(--bone-2)}
.versus__col--good li::before{content:"";position:absolute;left:2px;top:19px;width:11px;height:6px;border-left:1.6px solid var(--ember);border-bottom:1.6px solid var(--ember);transform:rotate(-45deg)}

/* Preis-/Paket-Karten */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pkgs--spaced{margin-top:clamp(36px,5vw,56px)}
.pkg{background:var(--ink-1);padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;gap:18px;position:relative}
.pkg--feature{background:var(--ink-2)}
.pkg__badge{position:absolute;top:clamp(28px,3vw,42px);right:clamp(28px,3vw,42px);font-family:var(--ff-m);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);border:1px solid rgba(255,74,23,.4);padding:5px 10px;border-radius:100px}
.pkg__name{font-size:1.3rem;font-weight:700;letter-spacing:-.03em}
.pkg__for{color:var(--dim);font-family:var(--ff-m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.pkg__price{font-size:clamp(2rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.pkg__price small{display:block;font-size:.72rem;font-weight:400;color:var(--mute);letter-spacing:0;margin-top:8px;font-family:var(--ff-m)}
.pkg ul{display:flex;flex-direction:column;gap:0;margin-top:4px}
.pkg li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line);color:var(--bone-2);font-size:.92rem}
.pkg li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:5px;border-left:1.5px solid var(--ember);border-bottom:1.5px solid var(--ember);transform:rotate(-45deg)}
.pkg .btn{margin-top:auto}
.pkg__note{color:var(--dim);font-family:var(--ff-m);font-size:.58rem;letter-spacing:.06em;text-align:center;margin-top:26px}

/* Großer Abschluss-CTA */
.ctaband{position:relative;overflow:hidden;border-top:1px solid var(--line);padding-block:clamp(72px,11vw,150px)}
.ctaband__gl{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.ctaband__scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(80% 120% at 50% 120%,rgba(255,74,23,.10),transparent 60%)}
.ctaband .shell{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.ctaband h2{font-size:clamp(2.1rem,5.4vw,4.4rem);letter-spacing:-.045em;line-height:.96;max-width:18ch}
.ctaband h2 em{font-family:var(--ff-s);font-style:italic;font-weight:400;color:var(--ember)}
.ctaband p{color:var(--bone-2);font-size:clamp(1.02rem,1.3vw,1.18rem);max-width:52ch;margin-top:22px}
.ctaband__actions{display:flex;gap:12px;margin-top:clamp(30px,4vw,44px);flex-wrap:wrap;justify-content:center}
.ctaband__meta{margin-top:32px;color:var(--dim);font-family:var(--ff-m);font-size:.62rem;letter-spacing:.1em}

/* Rechtstext */
.legal{padding:calc(var(--nav-h) + clamp(56px,9vh,110px)) 0 var(--sec-y)}
.legal__head{max-width:60ch;margin-bottom:clamp(40px,6vw,72px)}
.legal h1{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.04em;line-height:1}
.legal__intro{color:var(--mute);margin-top:20px;font-size:1.05rem;max-width:64ch}
.legal__body{max-width:76ch}
.legal h2{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.02em;margin-top:2.6em;padding-top:1.2em;border-top:1px solid var(--line)}
.legal h3{font-size:1.02rem;margin-top:1.6em;color:var(--bone)}
.legal__body p,.legal__body li{color:var(--mute);font-size:1rem;line-height:1.7;margin-top:.9em}
.legal__body ul{padding-left:1.2em;list-style:disc}
.legal__body li{margin-top:.4em}
.legal__body a{color:var(--bone-2);text-decoration:underline;text-underline-offset:3px}
.legal__body a:hover{color:var(--ember)}
.legal strong{color:var(--bone)}
.legal .ph{color:var(--ember);background:var(--ember-soft);padding:1px 7px;border-radius:4px;font-family:var(--ff-m);font-size:.85em}
.legal__updated{margin-top:2.4em;color:var(--dim);font-size:.9rem}

/* Projekt-Raster (Projekte-Seite) */
.grid-work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.5vw,36px)}
.wcard{position:relative;display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--ink-1)}
.wcard__shot{position:relative;aspect-ratio:16/10;overflow:hidden}
.wcard__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(.5) brightness(.72) contrast(1.04);transform:scale(1.01);transition:filter .6s var(--e-out),transform .9s var(--e-out)}
.wcard:hover .wcard__shot img{filter:none;transform:scale(1.05)}
.wcard__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,74,23,.10),transparent 45%,rgba(6,6,7,.55));opacity:1;transition:opacity .6s}
.wcard:hover .wcard__shot::after{opacity:.3}
.wcard__body{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:9px}
.wcard__tag{color:var(--ember);font-family:var(--ff-m);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
.wcard__body h3{font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.03em}
.wcard__body p{color:var(--mute);font-size:.92rem;max-width:46ch}
.wcard__url{margin-top:6px;color:var(--dim);font-family:var(--ff-m);font-size:.58rem;letter-spacing:.06em;transition:color .3s;display:inline-flex;gap:7px}
.wcard:hover .wcard__url{color:var(--ember)}

/* Kontakt-Seite */
.kpage{padding:calc(var(--nav-h) + clamp(48px,7vh,90px)) 0 var(--sec-y)}
.contact--standalone{border:0}

/* Wiederkehrende Abstandsvarianten */
.sec--flush-top,.prose--flush-top{padding-top:0}
.sec--compact-top{padding-top:clamp(40px,5vw,70px)}
.sec--article-list{padding-top:clamp(50px,7vw,90px)}
.sec--project-list{padding-top:clamp(60px,8vw,110px)}
.sec--case-shot{padding-top:clamp(40px,5vw,70px);padding-bottom:0}
.work__footer{margin-top:clamp(30px,4vw,52px)}
.process__footer{margin-top:clamp(24px,3vw,44px)}
.related-links{margin-top:clamp(38px,5vw,60px)}
.action-spaced{margin-top:clamp(30px,4vw,48px)}
.action-spaced--compact{margin-top:clamp(28px,3.5vw,44px)}
.region-more{padding-bottom:0}
.region-more .prose__kicker{margin-top:8px}
.faq__phone{color:var(--bone-2);text-decoration:underline;text-underline-offset:3px}

@media (max-width:960px){
  .feat{grid-template-columns:1fr;gap:26px}
  .feat--flip .feat__media{order:0}
  .cards,.cards--4{grid-template-columns:1fr 1fr}
  .pkgs{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .grid-work{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cards,.cards--2,.cards--4{grid-template-columns:1fr}
  .metabar{gap:14px}
}

/* ═══════════════════════════════════════════════════════════════
   24. BARRIEREFREIHEIT, LOCAL-SEKTION & PRODUKTIONS-FEINSCHLIFF
   ═══════════════════════════════════════════════════════════════ */

/* Kontrast: sekundäre Mikrotypografie auf mind. AA anheben (war 4:1 -> jetzt >=4.5:1) */
:root{ --dim:#7C828C; }

/* Skip-Link — erster Fokuspunkt für Tastatur & Screenreader */
.skip{
  position:fixed;top:10px;left:10px;z-index:10000;
  background:var(--bone);color:var(--void);padding:12px 20px;border-radius:8px;
  font-weight:650;font-size:.9rem;transform:translateY(-160%);
  transition:transform .28s var(--e-out);
}
.skip:focus{transform:translateY(0);outline:2px solid var(--ember);outline-offset:3px}

/* Fokus sichtbar auf allen interaktiven Flächen */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,.chip input:focus-visible + span{
  outline:2px solid var(--ember);outline-offset:3px;border-radius:3px;
}
.acc__item summary:focus-visible{outline:2px solid var(--ember);outline-offset:-3px}
.btn:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

/* Tap-Targets >= 44px (WCAG 2.5.5) */
.nav__burger{width:44px;height:44px}
.nav__burger i{left:12px}
.nav__burger i:first-child{top:19px}
.nav__burger i:last-child{top:25px}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* Fehlerzustand für Formularfelder (aria-invalid) */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:var(--ember)}

/* Local-Sektion */
.local .sec__head{margin-bottom:clamp(28px,3.6vw,44px)}
.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.towns li{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.05em;color:var(--bone-2);
  padding:9px 16px;border:1px solid var(--line-2);border-radius:100px;background:rgba(255,255,255,.02);
  transition:border-color .3s,color .3s;
}
.towns li:hover{border-color:var(--line-3);color:var(--bone)}
.towns__cta{margin-top:clamp(26px,3.4vw,44px)}
/* Verlinkte Ortschips: Klickfläche liegt auf dem Link (44px Tap-Target) */
.towns--links li{padding:0}
.towns--links li a{
  display:flex;align-items:center;min-height:44px;padding:0 18px;
  color:inherit;text-decoration:none;border-radius:100px;
}
.towns--links li:hover a{color:var(--bone)}

/* Kontrast im hellen Angebot-Bereich: Ember abdunkeln, damit kleine
   Texte und Häkchen auf Weiß AA erreichen. */
.offer{ --ember:#C4340D; --ember-2:#C4340D; }

@media print{
  .grain,.edge-vignette,.progress,.hero__gl,.phero__gl,.ctaband__gl,.contact__gl{display:none!important}
  *{color:#000!important;background:#fff!important}
}

/* ═══════════════════════════════════════════════════════════════
   25. TEXTBESCHNITT BEHEBEN
   Die Einblende-Masken dürfen im Ruhezustand keine Unterlängen
   (g, j, p, y) oder Kursiv-Überhänge abschneiden.
   ═══════════════════════════════════════════════════════════════ */
[data-split] .wd{
  padding:.04em .04em .16em;
  margin:-.04em -.04em -.16em;
}
[data-split].is-in .wd{overflow:visible}
.hero__title .line,.contact__title .line{
  padding:.03em .03em .18em;
  margin:-.03em -.03em -.18em;
}
.hero__title .line.is-in,.contact__title .line.is-in{overflow:visible}
/* etwas Luft nach unten, damit Unterlängen der letzten Zeile Platz haben */
.rotator__sizer,.rotator__word{line-height:1;padding-bottom:.1em}
.sec__title,.hero__title,.contact__title,.prose h2,.ctaband h2,.phero h1,.feat h3,.proc__step h3,.quote blockquote{padding-bottom:.12em}

/* ═══════════════════════════════════════════════════════════════
   26. KUNDENSTIMMEN · ÜBER MICH · STICKY MOBILE CTA
   ═══════════════════════════════════════════════════════════════ */

/* ── Kundenstimmen ─────────────────────────────────────────── */
.stimmen__badge{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--mute);padding-bottom:.3em}
.stimmen__badge b{color:var(--bone);font-weight:600}
.stimmen__stars{color:var(--ember);letter-spacing:.1em;font-size:1rem}
.stimmen__grid{columns:3;column-gap:clamp(16px,2vw,26px);margin-top:clamp(10px,2vw,24px)}
.rev{
  break-inside:avoid;margin-bottom:clamp(16px,2vw,26px);
  background:var(--ink-1);border:1px solid var(--line);border-radius:12px;
  padding:clamp(22px,2.4vw,30px);transition:border-color .4s var(--e-out),transform .5s var(--e-out),background .4s;
}
.rev:hover{border-color:var(--line-3);background:var(--ink-2);transform:translateY(-3px)}
.rev__stars{color:var(--ember);letter-spacing:.12em;font-size:.82rem;margin-bottom:14px}
.rev blockquote{font-size:.98rem;line-height:1.55;color:var(--bone-2);letter-spacing:-.01em}
.rev figcaption{display:flex;flex-direction:column;gap:3px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rev__who{font-weight:650;font-size:.95rem;letter-spacing:-.02em}
.rev__role{color:var(--dim);font-size:.58rem}
.stimmen__all{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,3vw,38px);
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);
}
.stimmen__all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e-out)}
.stimmen__all:hover svg{transform:translateX(4px)}

/* ── Über mich ─────────────────────────────────────────────── */
.about__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,90px);align-items:center}
.about__media,.about__text{min-width:0}
.about__text h2{overflow-wrap:break-word}
.about__media{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.about__avatar{
  aspect-ratio:1;border-radius:20px;overflow:hidden;position:relative;
  background:var(--ink-2);border:1px solid var(--line-2);
}
.about__avatar picture,.about__avatar img{display:block;width:100%;height:100%}
.about__avatar img{object-fit:cover;object-position:center 20%;filter:grayscale(.15) contrast(1.03)}
.about__avatar::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,transparent 55%,rgba(6,6,7,.5)),radial-gradient(80% 80% at 75% 95%,rgba(255,74,23,.14),transparent 60%)}
.about__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.about__facts div{background:var(--ink-1);padding:16px 12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.about__facts b,.about__facts span{max-width:100%;overflow-wrap:break-word}
.about__facts b{font-size:1.3rem;font-weight:800;letter-spacing:-.03em}
.about__facts span{font-family:var(--ff-m);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.about__text h2{font-size:clamp(1.9rem,3.8vw,3.1rem);letter-spacing:-.04em;line-height:1.02;margin-bottom:22px}
.about__text h2 em{font-family:var(--ff-s);font-style:italic;font-weight:400;color:var(--ember)}
.about__lead{color:var(--bone-2);font-size:clamp(1.02rem,1.3vw,1.18rem);max-width:56ch}
.about__lead b{color:var(--bone);font-weight:650}
.about__text p{color:var(--mute);max-width:58ch;margin-top:16px;font-size:1rem}
.about__sign{display:flex;flex-direction:column;gap:3px;margin-top:26px}
.about__name{font-family:var(--ff-s);font-style:italic;font-size:1.5rem;color:var(--bone)}
.about__role{color:var(--dim);font-size:.6rem}
.about__actions{margin-top:28px}

/* ── Sticky Mobile CTA ─────────────────────────────────────── */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:800;display:none;gap:10px;
  padding:12px clamp(14px,4vw,20px) calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(6,6,7,.9);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .45s var(--e-out);
}
.mcta.is-on{transform:none}
/* Die wichtigste Conversion-Fläche auf dem Handy — 48px sicher treffbar. */
.mcta__call{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:62px;min-height:48px;flex:none;border:1px solid var(--line-2);border-radius:12px;color:var(--bone-2);
  font-family:var(--ff-m);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;
}
.mcta__call svg{width:19px;height:19px;fill:var(--ember)}
.mcta__btn{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--bone);color:var(--void);border-radius:12px;font-weight:650;font-size:.98rem;
}

/* Kleinstschrift auf schmalen Displays anheben: 0.58rem sind rund 9px und
   auf dem Handy kaum lesbar. Betrifft nur Fußnoten- und Label-Texte. */
@media (max-width:640px){
  .form__note,.diag__src,.pkg__note{font-size:.72rem;line-height:1.5}
}

/* ── Trefferflächen auf Touch-Geräten ──────────────────────────
   Nur für grobe Zeiger: Mit Maus bleibt die dichtere Optik erhalten,
   auf dem Handy wachsen Links auf eine sicher treffbare Höhe. */
@media (pointer:coarse),(max-width:760px){
  .foot__col a,
  .stimmen__all,
  .nav__brand,
  .card__link,
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .foot__col{gap:2px}
  .drawer__links a{min-height:48px;display:flex;align-items:center}
  .drawer__foot a{display:inline-flex;align-items:center;min-height:44px}
  .direct{min-height:56px}
  .nav__right .btn--sm{min-height:44px}
}

@media (max-width:900px){.stimmen__grid{columns:2}}
@media (max-width:760px){
  .about__inner{grid-template-columns:1fr;gap:32px}
  .about__media{flex-direction:row;align-items:center;gap:18px}
  .about__avatar{width:120px;flex:none}
  .about__facts{flex:1}
}
@media (max-width:600px){
  .stimmen__grid{columns:1}
  .mcta{display:flex}
  body{--mcta-pad:76px}
  .foot{padding-bottom:var(--mcta-pad)}
}

/* ═══════════════════════════════════════════════════════════════
   27. RATGEBER-ARTIKEL & VERLINKTE KARTEN
   ═══════════════════════════════════════════════════════════════ */
.article__meta{display:block;color:var(--ember);margin-bottom:18px;font-size:.62rem}
.article .legal__body{max-width:72ch}
.article__lead{font-size:clamp(1.1rem,1.6vw,1.35rem)!important;line-height:1.5;color:var(--bone-2)!important;margin-top:0!important}
.article .legal__body p{font-size:1.05rem;line-height:1.75}
.article__cta{
  margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:72ch;
}
.article__cta p{color:var(--bone-2);font-size:1.1rem;max-width:44ch}

/* Karte als Link (Städte, Ratgeber) */
.card--link{cursor:pointer;text-decoration:none}
.rcard{background:var(--ink-1)}
.rcard .wcard__body{padding:clamp(24px,3vw,38px);min-height:clamp(180px,16vw,220px);justify-content:space-between}
.rcard:hover{border-color:var(--line-3)}

/* Honeypot gegen Spam — für Menschen unsichtbar, für Bots verlockend */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ═══════════════════════════════════════════════════════════════
   28. PROJEKT-DETAILSEITEN (Case Studies)
   ═══════════════════════════════════════════════════════════════ */
.case__shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.case__shot img{display:block;width:100%;height:auto;object-fit:cover;object-position:top center}
.case__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.case__grid .prose__lead{margin-top:18px}
@media (max-width:820px){.case__grid{grid-template-columns:1fr;gap:clamp(28px,6vw,48px)}}