/* ============================================================
   VisionWerk — Neudesign
   ============================================================ */

/* ── Fonts (lokal gehostet, DSGVO-konform) ─────────────────── */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("../fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ── Tokens ────────────────────────────────────────────────── */
:root{
  --ink:#0B0B0C;
  --ink-70:rgba(11,11,12,.62);
  --ink-40:rgba(11,11,12,.38);
  --ink-12:rgba(11,11,12,.12);
  --paper:#FBFAF8;
  --paper-2:#F2F0EC;
  --light:#FFFFFF;
  --light-60:rgba(255,255,255,.6);
  --light-35:rgba(255,255,255,.35);
  --light-14:rgba(255,255,255,.14);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"InterVar","Inter","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(1.25rem,4.5vw,5.5rem);
  --gap:clamp(2.5rem,6vw,7rem);
  --sec:clamp(6rem,14vh + 6vw,13rem);

  --ease:cubic-bezier(.16,1,.3,1);
  /* weicher als --ease: kein Schnappen am Anfang, für Hover-Zustände */
  --ease-soft:cubic-bezier(.32,.72,.29,1);
  --hdr-h:5.25rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:350;
  font-size:clamp(1rem,.94rem + .3vw,1.125rem);
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:700}
p{margin:0}

::selection{background:var(--ink);color:var(--paper)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

/* ── Display type ──────────────────────────────────────────── */
.h2,.hero__title,.cta__title,.ftr__big{
  font-family:var(--display);
  font-weight:700;
  font-stretch:118%;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.h2{font-size:clamp(2.4rem,1.2rem + 5.2vw,6rem)}
.h2--light{color:var(--light)}

.lbl{
  font-family:var(--display);
  font-size:.6875rem;
  font-weight:600;
  font-stretch:112%;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-40);
  margin:0 0 1.25rem;
}
.lbl--light{color:var(--light-35)}

.kicker{
  font-family:var(--display);
  font-size:clamp(.7rem,.65rem + .2vw,.8125rem);
  font-weight:600;font-stretch:112%;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--light-60);
  margin:0 0 clamp(1.1rem,2.1vw,2rem);
}

/* ── Grain ─────────────────────────────────────────────────── */
.grain-svg{position:fixed;width:0;height:0}
.grain{
  position:fixed;inset:-50%;z-index:9998;pointer-events:none;
  filter:url(#grain);opacity:.028;mix-blend-mode:multiply;
}

/* ── Header ────────────────────────────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--hdr-h);
  display:flex;align-items:center;gap:2rem;
  padding:0 var(--pad);
  color:var(--light);
  /* invertiert sich automatisch über hellen wie dunklen Sektionen */
  mix-blend-mode:difference;
  transition:transform .5s var(--ease);
}
.hdr.is-hidden{transform:translateY(-100%)}

.hdr__brand{display:flex;align-items:center}
.hdr__brand img{
  height:clamp(3rem,4.8vw,3.9rem);width:auto;
  /* Die weiße Wortmarke kippt über das difference-Blending des Headers
     über hellen Sektionen automatisch ins Dunkle. */
}

.hdr__inline{display:none;gap:2.25rem;margin-left:auto}
.hdr__inline a{
  font-size:.8125rem;letter-spacing:.02em;position:relative;padding:.25rem 0;
}
.hdr__inline a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.hdr__inline a:hover::after{transform:scaleX(1);transform-origin:left}

.hdr__right{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.25rem);margin-left:auto}

/* Telefon-Button. Umrandet statt gefüllt, weil der Header per
   mix-blend-mode invertiert — eine Fläche würde über hellen Sektionen
   umschlagen, Kontur und Text kippen dagegen sauber mit. */
.hdr__phone{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem;
  border:1px solid currentColor;border-radius:999px;
  font-family:var(--display);
  font-size:.75rem;font-weight:600;font-stretch:110%;
  letter-spacing:.08em;
  white-space:nowrap;
  transition:transform .45s var(--ease-soft),opacity .45s var(--ease-soft);
}
.hdr__phone:hover{transform:translateY(-2px)}
.hdr__phone:active{transform:translateY(0)}
.hdr__phone-ic{
  width:1.05em;height:1.05em;flex:0 0 auto;
  fill:currentColor;
}
/* Auf schmalen Displays nur das Symbol — die Nummer sprengt die Kopfzeile */
.hdr__phone-nr{display:none}
.hdr__phone-sr{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.burger{display:flex;align-items:center;gap:.75rem}
.burger__lines{display:block;width:26px}
.burger__lines i{
  display:block;height:1.5px;background:currentColor;
  transition:transform .5s var(--ease),opacity .3s;
}
.burger__lines i:first-child{margin-bottom:6px}
.burger__label{
  font-family:var(--display);font-size:.72rem;font-weight:600;
  font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;
}
.burger[aria-expanded="true"] .burger__lines i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__lines i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ── Menu overlay ──────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:90;
  background:var(--ink);color:var(--light);
  display:flex;flex-direction:column;
  /* Nicht justify-content:flex-end — bei hohem Inhalt liefe der Überlauf
     nach oben unter den Header und wäre nicht scrollbar. Der auto-Rand
     hält die Ausrichtung unten und fällt bei Platzmangel auf 0 zurück. */
  justify-content:flex-start;
  padding:calc(var(--hdr-h) + 2rem) var(--pad) clamp(2rem,5vw,4rem);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  overflow-y:auto;
}
/* Inline-Navigation ausblenden, solange das Menü offen ist */
.is-locked .hdr__inline,
.is-locked .hdr__phone{opacity:0;pointer-events:none;transition:opacity .25s}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0 0 0 0)}

.menu__inner{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,5rem);width:100%;margin-top:auto}

.menu__nav{display:flex;flex-direction:column}
.menu__nav a{
  font-family:var(--display);
  font-size:clamp(1.9rem,min(6.2vw,7.6svh),6rem);
  font-weight:700;font-stretch:118%;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.03em;
  overflow:hidden;display:block;
  border-bottom:1px solid var(--light-14);
  padding:.15em 0;
}
.menu__nav a span{
  display:block;
  transform:translateY(110%);
  transition:transform .7s var(--ease),color .4s;
}
.menu.is-open .menu__nav a span{transform:translateY(0)}
.menu.is-open .menu__nav a:nth-child(1) span{transition-delay:.10s}
.menu.is-open .menu__nav a:nth-child(2) span{transition-delay:.16s}
.menu.is-open .menu__nav a:nth-child(3) span{transition-delay:.22s}
.menu.is-open .menu__nav a:nth-child(4) span{transition-delay:.28s}
.menu.is-open .menu__nav a:nth-child(5) span{transition-delay:.34s}
.menu.is-open .menu__nav a:nth-child(6) span{transition-delay:.40s}
.menu__nav a:hover span{color:var(--light-35)}

.menu__meta{
  display:grid;gap:2rem clamp(2rem,5vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  color:var(--light-60);font-size:.9375rem;
  opacity:0;transform:translateY(1rem);
  transition:opacity .6s .45s var(--ease),transform .6s .45s var(--ease);
}
.menu.is-open .menu__meta{opacity:1;transform:none}
.menu__meta .lbl{color:var(--light-35)}
.menu__link{display:block;color:var(--light)}
.menu__link:hover{color:var(--light-60)}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--hdr-h) + .35rem) var(--pad) clamp(1rem,2vw,1.75rem);
  background:#08080A;color:var(--light);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(70px);
  will-change:transform;
}
.orb--1{
  width:78vw;height:78vw;left:-18vw;top:-26vw;
  background:radial-gradient(circle at 45% 45%,rgba(138,156,200,1),rgba(126,142,182,.42) 40%,transparent 70%);
  animation:drift1 26s ease-in-out infinite alternate;
}
.orb--2{
  width:64vw;height:64vw;right:-14vw;top:10vh;
  background:radial-gradient(circle at 50% 50%,rgba(224,208,184,.95),rgba(214,201,182,.3) 44%,transparent 72%);
  animation:drift2 32s ease-in-out infinite alternate;
}
.orb--3{
  width:58vw;height:58vw;left:26vw;bottom:-26vw;
  background:radial-gradient(circle at 50% 50%,rgba(78,100,158,1),rgba(74,92,140,.35) 44%,transparent 72%);
  animation:drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(12vw,8vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-14vw,-6vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(8vw,-12vh,0) scale(.9)}}

.scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);
  mix-blend-mode:overlay;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 55%,transparent 30%,rgba(8,8,10,.55) 100%),
    linear-gradient(to top,rgba(8,8,10,.9) 0%,rgba(8,8,10,.12) 50%,rgba(8,8,10,.38) 100%);
}

.hero__grid{
  /* Freiraum gleichmäßig über und unter den Inhalt verteilen — sonst sammelt
     er sich per justify-content:flex-end komplett oben an, während der Button
     fast auf der Trennlinie klebt. */
  margin-block:auto;
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.5rem,4.5vw,4rem);
  align-items:center;
}
.hero__inner{max-width:min(100%,72rem)}
.hero__title{
  font-size:clamp(2.55rem,min(6.4vw,8.7svh),8.5rem);
  margin:0 0 clamp(1.25rem,2.4vw,2rem);
}
.line{display:block;overflow:hidden}
.line>span{
  display:block;
  transform:translateY(105%);
  animation:lineUp 1.05s var(--ease) forwards;
}
@keyframes lineUp{to{transform:translateY(0)}}
.hero__title .line:nth-child(1)>span{animation-delay:.15s}
.hero__title .line:nth-child(2)>span{animation-delay:.26s}
.hero__title .line:nth-child(3)>span{animation-delay:.37s}
/* im CTA erst beim Scrollen in den Blick (nur mit JS) */
.js .cta__title .line>span{animation-play-state:paused}
.js .cta.on .line>span{animation-play-state:running}

.hero__sub{
  max-width:44ch;color:var(--light-60);
  font-size:clamp(1rem,.9rem + .5vw,1.375rem);
  line-height:1.55;
  margin-bottom:clamp(1.25rem,2.4vw,2.25rem);
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem clamp(1.25rem,3vw,2.25rem)}
/* Mobil ein weißer Button, ab 1100 px die ursprüngliche Kombination.
   Spezifität über .hero__cta, sonst gewinnt die spätere .btn-Regel. */
.hero__cta .cta--desktop{display:none}
.textlink{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-size:.8125rem;font-weight:600;font-stretch:110%;
  letter-spacing:.13em;text-transform:uppercase;color:var(--light-60);
  padding:.4rem 0;
  transition:color .4s var(--ease-soft);
}
.textlink span{transition:transform .5s var(--ease-soft)}
.textlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-soft);
}
.textlink:hover{color:var(--light)}
.textlink:hover span{transform:translateX(4px)}
.textlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ── Hero: Referenz-Karte ─────────────────────────────────── */
.showcase{display:grid;justify-items:stretch}

/* Vier Karten im selben Rasterfeld — die hinteren schauen unten heraus,
   der Stapel rotiert und lässt das Portfolio tiefer wirken als vier Projekte. */
.showcase__deck{display:grid}
/* Angedeutete Stapeltiefe: dekorative Kanten hinter den vier echten Karten.
   Sie lassen das Portfolio nach vielen Projekten aussehen, ohne 60 Bilder
   in den Hero zu laden. */
.showcase__pile{grid-area:1/1;position:relative;z-index:0;width:72%;pointer-events:none}
.showcase__pile i{
  position:absolute;inset:0;
  border-radius:16px;
  background:#17171c;
  border:1px solid rgba(255,255,255,.14);
  transform-origin:left center;
}
.showcase__card{grid-area:1/1;position:relative;width:72%;pointer-events:none}
.showcase__card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(8,8,10,.62);pointer-events:none;
  transition:opacity .9s var(--ease);
}
/* Alle sechs Referenzen sind gleichzeitig sichtbar; dahinter deutet ein
   dichter Kartenstapel an, dass noch viele weitere Projekte folgen.
   Die Karten stehen bewusst eng, damit für die Tiefe Platz bleibt. */
.showcase__card[data-pos="0"]{z-index:20;transform:translateX(0.0%) scale(1.000);pointer-events:auto}
.showcase__card[data-pos="0"]::after{opacity:0}
.showcase__card[data-pos="1"]{z-index:19;transform:translateX(5.6%) scale(0.978)}
.showcase__card[data-pos="1"]::after{opacity:0.28}
.showcase__card[data-pos="2"]{z-index:18;transform:translateX(11.2%) scale(0.956)}
.showcase__card[data-pos="2"]::after{opacity:0.45}
.showcase__card[data-pos="3"]{z-index:17;transform:translateX(16.8%) scale(0.934)}
.showcase__card[data-pos="3"]::after{opacity:0.6}
.showcase__card[data-pos="4"]{z-index:16;transform:translateX(22.4%) scale(0.912)}
.showcase__card[data-pos="4"]::after{opacity:0.7}
.showcase__card[data-pos="5"]{z-index:15;transform:translateX(28.0%) scale(0.890)}
.showcase__card[data-pos="5"]::after{opacity:0.79}
.showcase__card[data-pos="6"]{z-index:14;transform:translateX(28.0%) scale(0.890)}
.showcase__card[data-pos="6"]::after{opacity:.79}
.showcase__card[data-pos="7"]{z-index:14;transform:translateX(28.0%) scale(0.890)}
.showcase__card[data-pos="7"]::after{opacity:.79}
.showcase__card[data-pos="8"]{z-index:14;transform:translateX(28.0%) scale(0.890)}
.showcase__card[data-pos="8"]::after{opacity:.79}

/* Stapelkanten — schließen dicht an die sechste Karte an */
.showcase__pile i:nth-child(1){z-index:13;transform:translateX(32.40%) scale(0.8800);opacity:0.47}
.showcase__pile i:nth-child(2){z-index:12;transform:translateX(34.30%) scale(0.8740);opacity:0.45}
.showcase__pile i:nth-child(3){z-index:11;transform:translateX(36.20%) scale(0.8680);opacity:0.42}
.showcase__pile i:nth-child(4){z-index:10;transform:translateX(38.10%) scale(0.8620);opacity:0.40}
.showcase__pile i:nth-child(5){z-index:9;transform:translateX(40.00%) scale(0.8560);opacity:0.37}
.showcase__pile i:nth-child(6){z-index:8;transform:translateX(41.90%) scale(0.8500);opacity:0.34}
.showcase__pile i:nth-child(7){z-index:7;transform:translateX(43.80%) scale(0.8440);opacity:0.32}
.showcase__pile i:nth-child(8){z-index:6;transform:translateX(45.70%) scale(0.8380);opacity:0.29}
.showcase__pile i:nth-child(9){z-index:5;transform:translateX(47.60%) scale(0.8320);opacity:0.27}
.showcase__pile i:nth-child(10){z-index:4;transform:translateX(49.50%) scale(0.8260);opacity:0.24}
.showcase__pile i:nth-child(11){z-index:3;transform:translateX(51.40%) scale(0.8200);opacity:0.21}
.showcase__pile i:nth-child(12){z-index:2;transform:translateX(53.30%) scale(0.8140);opacity:0.19}
.showcase__pile i:nth-child(13){z-index:1;transform:translateX(55.20%) scale(0.8080);opacity:0.16}
.showcase__pile i:nth-child(14){z-index:0;transform:translateX(57.10%) scale(0.8020);opacity:0.14}

.showcase__card{
  display:block;overflow:hidden;
  border-radius:16px;
  border:1px solid var(--light-14);
  background:#141417;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);
  transition:transform .9s var(--ease),
             border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.showcase__card[data-pos="0"]:hover{
  border-color:var(--light-35);transform:translateY(-4px);
  box-shadow:0 36px 70px -22px rgba(0,0,0,.9);
}
.showcase__media{display:block;overflow:hidden;aspect-ratio:16/9;background:#141416}
.showcase__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
.showcase__card[data-pos="0"]:hover .showcase__media img{transform:scale(1.05);filter:grayscale(0)}

.showcase__body{
  display:grid;gap:.3rem;
  padding:clamp(.85rem,1.7vw,1.15rem) clamp(1.1rem,2.2vw,1.5rem) clamp(.95rem,1.9vw,1.25rem);
}
.showcase__label{
  font-family:var(--display);font-size:.625rem;font-weight:600;font-stretch:112%;
  letter-spacing:.22em;text-transform:uppercase;color:var(--light-35);
}
.showcase__name{
  font-family:var(--display);font-weight:700;font-stretch:114%;
  text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.2rem,1rem + .8vw,1.6rem);line-height:1.1;
}
.showcase__tags{font-size:.8125rem;color:var(--light-60)}
.showcase__result{
  margin-top:.7rem;padding-top:.7rem;
  border-top:1px solid var(--light-14);
  font-size:.8125rem;color:var(--light-35);
  text-decoration:underline dashed;text-underline-offset:4px;
}

.hero__foot{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1rem,2.5vw,2.25rem);
  width:100%;
  margin-top:clamp(.6rem,1.4vh,1.25rem);
  padding-top:clamp(.7rem,1.4vw,1.1rem);border-top:1px solid var(--light-14);
}
.hero__foot .marquee--hero{min-width:0}
/* die rechte Strecke läuft gegenläufig — sonst wirkt das Band einseitig */
.marquee--right .marquee__track{animation-direction:reverse}
.hero__seal{display:flex;align-items:center;justify-content:center}

/* ── Google-Siegel (eigenes Bauteil, kein Fremd-Widget) ────── */
.rating{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem 1rem .5rem .75rem;
  border:1px solid var(--light-14);border-radius:999px;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  white-space:nowrap;
  transition:border-color .45s var(--ease-soft),background .45s var(--ease-soft);
}
.rating:hover{border-color:var(--light-35);background:rgba(255,255,255,.09)}
.rating__g{width:1.15rem;height:1.15rem;flex:0 0 auto}
.rating__score{
  font-family:var(--display);font-weight:700;font-stretch:112%;
  font-size:1rem;letter-spacing:-.01em;color:var(--light);
}
.rating__stars{color:#F5B428;font-size:.9rem;letter-spacing:.06em}
/* Inline-Variante steht mobil unter der Headline, im Fußband nur auf Desktop */
.rating--inline{margin:0 0 clamp(1.1rem,3vw,1.5rem)}
.rating__count{
  padding-left:.7rem;margin-left:.1rem;
  border-left:1px solid var(--light-14);
  font-size:.78rem;color:var(--light-60);
}

.scrollcue{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--display);font-size:.72rem;font-weight:600;
  font-stretch:112%;letter-spacing:.22em;text-transform:uppercase;
  color:var(--light-60);
}
.scrollcue__line{
  width:56px;height:1px;background:var(--light-35);position:relative;overflow:hidden;
}
.scrollcue__line::after{
  content:"";position:absolute;inset:0;background:var(--light);
  animation:sweep 2.4s var(--ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.scrollcue:hover{color:var(--light)}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.05em 2.1em;border-radius:999px;
  font-family:var(--display);
  font-size:.8125rem;font-weight:600;font-stretch:110%;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bg);
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--fg);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--bg)}
.btn--solid{--bg:var(--light);--fg:var(--ink)}
.btn--ghost{--bg:transparent;--fg:var(--light);border-color:var(--light-35);color:var(--light)}
.btn--ghost::before{background:var(--light)}
.btn--ghost:hover{color:var(--ink);border-color:var(--light)}
.btn--light{--bg:var(--light);--fg:var(--ink);margin-top:2rem}
.btn--full{width:100%;margin-top:1rem}

/* ── Statement ─────────────────────────────────────────────── */
.statement{padding:var(--sec) var(--pad)}
.statement__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
.statement__text{
  font-family:var(--display);
  font-weight:500;font-stretch:105%;
  font-size:clamp(1.5rem,.9rem + 2.6vw,3.4rem);
  line-height:1.14;letter-spacing:-.02em;
  max-width:22ch;
  text-wrap:pretty;
}
.statement__text .w{
  display:inline-block;
  opacity:.12;
  transition:opacity .5s var(--ease);
}
.statement__text .w.on{opacity:1}
.statement__text .w.dim.on{opacity:.45}

.facts{
  display:grid;gap:2rem clamp(1.5rem,4vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:clamp(4rem,9vw,8rem);
  padding-top:2.5rem;border-top:1px solid var(--ink-12);
}
.fact b{
  display:block;
  font-family:var(--display);font-weight:700;font-stretch:115%;
  font-size:clamp(2.4rem,1.4rem + 3vw,4.25rem);
  line-height:.95;letter-spacing:-.03em;
}
.fact span{display:block;margin-top:.5rem;color:var(--ink-40);font-size:.875rem}

/* ── Section heads ─────────────────────────────────────────── */
.sec-head{margin-bottom:clamp(3rem,7vw,6rem)}
.sec-head--split{
  display:grid;gap:2rem clamp(2rem,6vw,6rem);
  grid-template-columns:1fr;align-items:end;
}
.sec-head__note{max-width:38ch;color:var(--ink-70)}

/* ── Services ──────────────────────────────────────────────── */
.services{padding:var(--sec) var(--pad);background:var(--paper-2)}
.svc{border-top:1px solid var(--ink-12)}
.svc__row{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
  padding:clamp(2rem,4vw,3.25rem) 0;
  border-bottom:1px solid var(--ink-12);
  position:relative;
}
/* Die Füllung wächst per scaleX statt per width, der Inhalt rückt per
   translateX statt per padding — beides ohne Layout-Neuberechnung. */
.svc__row::before{
  /* blutet in den Sektionsrand aus, damit der eingerückte Inhalt
     vollständig auf der Füllung liegt */
  content:"";position:absolute;inset:0 calc(var(--pad) * -1);
  background:var(--ink);z-index:0;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .62s var(--ease-soft);
}
.svc__row>*{
  position:relative;z-index:1;
  transition:color .5s var(--ease-soft) .06s,
             transform .62s var(--ease-soft);
}
.svc__no{
  font-family:var(--display);font-size:.75rem;font-weight:600;
  font-stretch:112%;letter-spacing:.18em;color:var(--ink-40);
}
.svc__title{
  font-family:var(--display);font-weight:700;font-stretch:115%;
  text-transform:uppercase;line-height:.95;letter-spacing:-.025em;
  font-size:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);
}
.svc__text{color:var(--ink-70);max-width:46ch}
.svc__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.svc__tags li{
  font-size:.75rem;letter-spacing:.04em;
  border:1px solid var(--ink-12);border-radius:999px;
  padding:.35em 1em;color:var(--ink-40);
  transition:border-color .5s var(--ease-soft) .06s,
             color .5s var(--ease-soft) .06s;
}

/* ── Work ──────────────────────────────────────────────────── */
.work{padding:var(--sec) var(--pad)}
.cases{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
}
.case__media{
  display:block;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/3;
  border-radius:2px;
}
.case__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.02);
  filter:grayscale(1) contrast(1.02);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
.case:hover .case__media img{transform:scale(1.07);filter:grayscale(0)}
.case__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  padding-top:1.15rem;
}
.case__meta h3{
  font-family:var(--display);font-weight:700;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1rem + .8vw,1.75rem);
}
.case__meta h3 a{display:inline-flex;align-items:baseline;gap:.4rem}
/* Pfeil zeigt an, dass die Kundenseite in einem neuen Tab öffnet */
.case__ext{
  font-size:.6em;color:var(--ink-40);
  /* Mobile Browser zeigen U+2197 sonst als farbiges Emoji statt als Glyphe */
  font-variant-emoji:text;
  transition:transform .5s var(--ease-soft),color .4s var(--ease-soft);
}
.case:hover .case__ext{transform:translate(2px,-2px);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case__meta p{color:var(--ink-70);font-size:.9375rem}
.case__yr{
  margin-left:auto;color:var(--ink-40);font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;
}

/* ── Marquee ───────────────────────────────────────────────── */
.marquee{
  margin-top:clamp(4rem,9vw,8rem);padding-top:2.5rem;
  border-top:1px solid var(--ink-12);
  overflow:hidden;
  -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;animation:scroll 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;gap:clamp(3rem,7vw,7rem);padding-right:clamp(3rem,7vw,7rem)}
.marquee__set img{
  height:clamp(34px,4.5vw,54px);width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:opacity .4s,filter .4s;
}
.marquee__set img:hover{opacity:1;filter:grayscale(0)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Variante im Hero: kompakter, invertiert für dunklen Grund */
.marquee--hero{min-width:0;margin:0;padding:0;border:0}
.marquee--hero .marquee__set{gap:clamp(2.5rem,5vw,5.5rem);padding-right:clamp(2.5rem,5vw,5.5rem)}
/* Die Logodateien sind gemischt: die meisten sind dunkel gezeichnet und
   müssen für den dunklen Hero invertiert werden, eines ist bereits hell
   gezeichnet und bleibt unangetastet. Deshalb pro Logo gesteuert. */
.marquee--hero .marquee__set img{
  height:clamp(24px,2.4vw,30px);
  filter:grayscale(1);
  mix-blend-mode:screen;
  opacity:.7;
  transition:opacity .4s var(--ease);
}
.marquee--hero .marquee__set img.inv{filter:grayscale(1) invert(1) brightness(1.5)}
.marquee--hero .marquee__set img:hover{opacity:1}

/* ── Studio ────────────────────────────────────────────────── */
.studio{
  padding:var(--sec) var(--pad);
  background:var(--ink);color:var(--light);
}
.studio__grid{
  display:grid;gap:clamp(3rem,7vw,7rem);
  grid-template-columns:1fr;
}
.studio__text{color:var(--light-60);max-width:46ch;margin-top:1.75rem}

/* Porträt zum Versprechen „Du sprichst mit dem, der deine Website baut" */
.founder{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;
  display:flex;align-items:center;gap:1.15rem;
}
.founder img{
  width:clamp(5rem,9vw,6.5rem);height:auto;
  aspect-ratio:1;object-fit:cover;object-position:center 22%;
  border-radius:50%;
  border:1px solid var(--light-14);
  flex:0 0 auto;
}
.founder figcaption{font-size:.875rem;line-height:1.5;color:var(--light-60)}
.founder figcaption b{
  display:block;color:var(--light);font-weight:600;
  font-family:var(--display);font-stretch:110%;
  font-size:.9375rem;letter-spacing:.01em;
}

/* Große Variante im Statement — füllt dort die leere rechte Hälfte.
   Erscheint erst im zweispaltigen Layout; darunter trägt das Porträt
   in der Studio-Sektion. */
.founder--big{display:none}
.founder--big figcaption{color:var(--ink-70)}
.founder--big figcaption b{color:var(--ink)}
.studio .lbl{color:var(--light-35)}

.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.5rem;
  padding:1.75rem 0;border-top:1px solid var(--light-14);
}
.step:last-child{border-bottom:1px solid var(--light-14)}
.step span{
  grid-row:span 2;
  font-family:var(--display);font-size:.75rem;font-weight:600;
  font-stretch:112%;letter-spacing:.16em;color:var(--light-35);
  padding-top:.45rem;
}
.step h3{
  font-family:var(--display);font-weight:700;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(1.05rem,.95rem + .6vw,1.4rem);
}
.step p{color:var(--light-60);font-size:.9375rem;max-width:44ch}

/* ── Voices ────────────────────────────────────────────────── */
.voices{padding:var(--sec) var(--pad)}
.rating{display:flex;flex-wrap:wrap;align-items:baseline;gap:.65rem 1rem}
.rating__num{
  font-family:var(--display);font-weight:700;font-stretch:115%;
  font-size:clamp(2.4rem,1.8rem + 2vw,3.5rem);line-height:.9;letter-spacing:-.03em;
}
.rating__stars{letter-spacing:.15em;font-size:1.05rem}
.rating__src{color:var(--ink-40);font-size:.875rem;width:100%}

/* ── Stimmen: Carousel ────────────────────────────────────── */
.quotes-wrap{position:relative}
.quotes{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(min(100%,20rem),1fr);
  gap:clamp(1rem,2.5vw,1.75rem);
  align-items:start;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.quotes::-webkit-scrollbar{display:none}
.quote{
  scroll-snap-align:start;
  margin:0;padding:clamp(1.5rem,2.6vw,2rem);
  background:var(--paper-2);border-radius:4px;
  display:flex;flex-direction:column;gap:1.1rem;
  transition:background .5s var(--ease-soft);
}
.quote:hover{background:#EDEAE4}
.quote__stars{color:#F5B428;font-size:.85rem;letter-spacing:.12em}
.quote blockquote{
  margin:0;
  font-size:clamp(1rem,.96rem + .3vw,1.15rem);
  line-height:1.5;letter-spacing:-.01em;text-wrap:pretty;
  /* Vorschau auf sechs Zeilen begrenzt, per Button ausklappbar */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;
}
/* display zurücksetzen statt nur line-clamp: sonst behält der Box-Modus
   seine Höhe und der Text läuft aus der Karte heraus. */
.quote.is-open blockquote{display:block;overflow:visible}
.quote__more{
  align-self:flex-start;margin-top:-.35rem;
  font-family:var(--display);font-size:.6875rem;font-weight:600;
  font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-40);
  border-bottom:1px solid var(--ink-12);padding-bottom:.2rem;
  transition:color .4s var(--ease-soft),border-color .4s var(--ease-soft);
}
.quote__more:hover{color:var(--ink);border-color:var(--ink-40)}
.quote figcaption{margin-top:auto}
.quote figcaption{
  font-size:.8125rem;color:var(--ink-40);
  padding-top:1rem;border-top:1px solid var(--ink-12);
}
.quote figcaption b{
  display:block;color:var(--ink);font-weight:600;
  font-family:var(--display);font-stretch:110%;
  font-size:.875rem;letter-spacing:.01em;margin-bottom:.15rem;
}

.quotes__nav{display:flex;gap:.6rem;margin-top:clamp(1.25rem,2.5vw,1.75rem)}
.quotes__btn{
  width:2.9rem;height:2.9rem;border-radius:999px;
  border:1px solid var(--ink-12);
  display:grid;place-items:center;font-size:1rem;
  transition:border-color .4s var(--ease-soft),background .4s var(--ease-soft),
             color .4s var(--ease-soft),opacity .3s;
}
.quotes__btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.quotes__btn[disabled]{opacity:.3;pointer-events:none}

/* Bewertungsblock verweist auf das Google-Profil */
.rating-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:.65rem 1rem}
.rating-big .rating__num{
  font-family:var(--display);font-weight:700;font-stretch:115%;
  font-size:clamp(2.4rem,1.8rem + 2vw,3.5rem);line-height:.9;letter-spacing:-.03em;
}
.rating-big .rating__stars{color:#F5B428;font-size:1.05rem;letter-spacing:.15em}
.rating-big .rating__src{
  color:var(--ink-40);font-size:.875rem;width:100%;
  transition:color .4s var(--ease-soft);
}
/* Pfeil wie beim Textlink: rückt beim Überfahren nach rechts */
.rating__arrow{
  display:inline-block;margin-left:.55rem;
  transition:transform .5s var(--ease-soft);
}
.rating-big:hover .rating__src{color:var(--ink)}
.rating-big:hover .rating__arrow{transform:translateX(4px)}

/* ── CTA ───────────────────────────────────────────────────── */
.cta{
  padding:var(--sec) var(--pad);
  background:var(--ink);color:var(--light);
}
.cta__title{
  font-size:clamp(2.2rem,1rem + 6vw,7rem);
  margin-top:.25rem;
}
.cta__head{margin-bottom:clamp(3rem,7vw,6rem)}
.cta__grid{
  display:grid;gap:clamp(3rem,6vw,6rem);
  grid-template-columns:1fr;
}
.cta__text{color:var(--light-60);max-width:40ch}
.cta__list{margin-top:2.5rem;display:grid;gap:1.5rem}
.cta__list li{display:grid;gap:.3rem;padding-bottom:1.25rem;border-bottom:1px solid var(--light-14)}
.cta__list .lbl{margin:0}
.cta__list a,.cta__list li>span:last-child{
  font-family:var(--display);font-weight:600;font-stretch:110%;
  font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);letter-spacing:-.015em;
  line-height:1.35;
}
.cta__list a{position:relative;display:inline-block;width:fit-content}
.cta__list a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.cta__list a:hover::after{transform:scaleX(1);transform-origin:left}

/* ── Form ──────────────────────────────────────────────────── */
.form{display:grid;gap:1.5rem;align-content:start}
.field{position:relative}
.field input,.field textarea{
  width:100%;background:transparent;color:var(--light);
  border:0;border-bottom:1px solid var(--light-14);
  padding:1.4rem 0 .7rem;font:inherit;border-radius:0;
  transition:border-color .4s;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--light)}
.field label{
  position:absolute;left:0;top:1.4rem;
  color:var(--light-35);pointer-events:none;
  transition:transform .4s var(--ease),font-size .4s var(--ease),color .4s;
  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(-1.35rem) scale(.72);
  color:var(--light-60);
}
.check{display:flex;gap:.8rem;align-items:flex-start;font-size:.8125rem;color:var(--light-60)}
.check input{
  appearance:none;width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.25rem;
  border:1px solid var(--light-35);border-radius:2px;cursor:pointer;
  transition:background .3s,border-color .3s;
}
/* appearance:none entfernt auch das native Häkchen, deshalb ein eigenes
   als SVG. Ohne das ist im angekreuzten Zustand nur ein weißes Feld zu
   sehen, was bei einer Einwilligung nicht eindeutig genug ist. */
.check input:checked{
  background:var(--light)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.3 3.3L12.8 5.2' fill='none' stroke='%230B0B0C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / .78rem no-repeat;
  border-color:var(--light);
}
.check input:focus-visible{outline:2px solid var(--light);outline-offset:3px}
.check a{text-decoration:underline;text-underline-offset:3px}
.form__note{font-size:.75rem;color:var(--light-35);text-align:center}

/* ── Footer ────────────────────────────────────────────────── */
.ftr{background:var(--ink);color:var(--light);padding:0 var(--pad) clamp(2rem,4vw,3rem)}
.ftr__big{
  font-size:min(11.4vw,15rem);
  line-height:.82;
  color:transparent;
  -webkit-text-stroke:1px var(--light-14);
  letter-spacing:-.04em;
  text-align:center;
  padding-bottom:.1em;
  user-select:none;
}
.ftr__row{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  justify-content:space-between;align-items:center;
  padding-top:1.75rem;border-top:1px solid var(--light-14);
  font-size:.8125rem;color:var(--light-35);
}
.ftr__nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.ftr__nav a:hover{color:var(--light)}

/* ── Reveal (nur wenn JS aktiv ist) ────────────────────────── */
.js .reveal{
  opacity:0;transform:translateY(2rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.js .reveal.on{opacity:1;transform:none}

/* ── Touch: Scroll ersetzt Hover ───────────────────────────────
   Auf Geräten ohne Zeigegerät gibt es kein :hover. Damit die
   Leistungszeilen und Referenzen dort nicht tot wirken, setzt
   main.js .is-near auf das Element in der Bildschirmmitte —
   die Zustände darunter spiegeln exakt die Hover-Regeln. */
@media (hover:none){
  .svc__row.is-near::before{transform:scaleX(1)}
  .svc__row.is-near>*{color:var(--paper);transform:translateX(1rem)}
  .svc__row.is-near .svc__no,
  .svc__row.is-near .svc__text{color:rgba(251,250,248,.65)}
  .svc__row.is-near .svc__tags li{
    border-color:rgba(251,250,248,.28);color:rgba(251,250,248,.65)
  }
  .case.is-near .case__media img{transform:scale(1.07);filter:grayscale(0)}
  .case.is-near .case__ext{transform:translate(2px,-2px);color:var(--ink)}
}
@media (hover:none) and (min-width:900px){
  .svc__row.is-near>*{transform:translateX(1.5rem)}
}

/* ── Breakpoints ───────────────────────────────────────────── */

/* Unterhalb des zweispaltigen Layouts entfällt die Referenz-Karte;
   die Projekte kommen weiter unten ohnehin in voller Größe.
   Die Bewertungszeile bleibt — sie kostet eine Zeile und trägt viel. */
@media (max-width:1099px){
  /* Mobiles Hero-Layout: Headline, Siegel, kurze Beschreibung, Button,
     verkleinerter Kartenstapel, darunter die Logoleiste. */
  .kicker{display:none}
  .sub-more{display:none}
  /* Hero mittig. Beim Stapel wird nicht die Box zentriert, sondern die
     vorderste Karte: der Fächer läuft nach rechts, sonst säße sie links
     der Mitte. Versatz (14 %) + halbe Kartenbreite (36 %) = 50 %. */
  .hero__inner{text-align:center}
  .hero__sub{margin-inline:auto}
  .showcase{display:block;max-width:19rem;margin:.35rem auto 0}
  .showcase__deck{transform:translateX(14%)}
  /* Der Button steht in der Karte an der Stelle der Platzhalter-Zeile.
     Weil Versatz (14 %) und halbe Kartenbreite (36 %) zusammen 50 % ergeben,
     zentriert left:50% ihn exakt auf der Hauptkarte. */
  .showcase{position:relative}
  .showcase__result{display:none}
  .showcase__body{padding-bottom:3.9rem}
  /* Der Link sitzt im Textbereich der vordersten Karte, deshalb der
     gleiche 14-%-Versatz wie beim Stapel. */
  .cta--mobil{
    position:absolute;z-index:20;
    left:calc(14% + 1.1rem);bottom:1rem;
    width:calc(72% - 2.2rem);
    justify-content:space-between;
    margin:0;padding:.7rem 0 0;
    border-top:1px solid var(--light-14);
    /* muss einzeilig bleiben — die Karte ist entsprechend breit bemessen */
    white-space:nowrap;gap:.5rem;letter-spacing:.1em;
  }
  .hero__seal{display:none}
  /* Siegel umschließt seinen Inhalt statt die volle Spaltenbreite */
  .hero__seal{justify-self:center;width:fit-content}
  .hero__foot{gap:1.25rem}
  /* schmalere Maske: auf kleinen Displays fraß die Ausblendung sonst
     das äußere Logo fast vollständig */
  .marquee--hero{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  /* Nebeneinander bleibt für die Strecken kein Platz — eine Zeile reicht,
     das Siegel rückt darunter. */
  .hero__foot{grid-template-columns:1fr;gap:.9rem}
  .marquee--right{display:none}
  .hero__grid{gap:1.5rem}
}


/* Schmale Telefone: der Button unter dem Stapel braucht Platz, sonst
   läuft der Hero über den Viewport hinaus. */
@media (max-width:420px){
  .hero__title{font-size:clamp(2.25rem,min(6.4vw,8.7svh),8.5rem)}
  .hero__grid{gap:.85rem}
  .rating--inline{margin-bottom:.8rem}
  .hero__sub{margin-bottom:1rem}
  .showcase{max-width:18.5rem}
}

@media (min-width:640px){
  .cases{grid-template-columns:repeat(2,1fr)}
  /* rechte Spalte versetzt für editorialen Rhythmus */
  .case:nth-child(even){margin-top:clamp(2rem,5vw,5rem)}
}

@media (min-width:900px){
  .hdr__phone{padding:.55rem 1.1rem .55rem .95rem}
  .hdr__phone-nr{display:inline}
  .hdr__phone-sr{display:none}
  .sec-head--split{grid-template-columns:1.1fr .9fr}
  .svc__row{
    grid-template-columns:5rem minmax(0,1.05fr) minmax(0,1.15fr);
    gap:2rem clamp(1.5rem,4vw,4rem);
    align-items:start;
  }
  .svc__no{padding-top:.6rem}
  .svc__tags{grid-column:3;margin-top:-.75rem}
  .svc__row:hover::before{transform:scaleX(1)}
  .svc__row:hover>*{color:var(--paper);transform:translateX(1.5rem)}
  .svc__row:hover .svc__no,
  .svc__row:hover .svc__text{color:rgba(251,250,248,.65)}
  .svc__row:hover .svc__tags li{border-color:rgba(251,250,248,.28);color:rgba(251,250,248,.65)}

  .studio__grid{grid-template-columns:1fr 1fr;align-items:start}
  .cta__grid{grid-template-columns:1fr 1fr}
  .cases{gap:clamp(2rem,3vw,3rem) clamp(2rem,4vw,4.5rem)}
  .rating-big{justify-content:flex-end;text-align:right}
}

@media (min-width:1100px){
  .hdr__inline{display:flex}
  .cta--mobil{display:none}
  .hero__cta .cta--desktop{display:inline-flex}
  /* erst wenn die Navigation sichtbar ist, darf sie den Abstand übernehmen */
  .hdr__inline+.hdr__right{margin-left:0}
  .rating--inline{display:none}
  /* Porträt im Statement statt in der Studio-Sektion */
  .statement__grid{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .founder--big{display:block;margin:0;justify-self:end}
  .founder--big img{
    width:clamp(14rem,20vw,19rem);height:auto;
    aspect-ratio:4/5;object-position:center 18%;
    border-radius:3px;border:0;
  }
  .founder--big figcaption{margin-top:1.1rem}
  .studio .founder{display:none}
  .hero__title{letter-spacing:-.035em}
  /* Aussage links, Beleg rechts */
  .hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .showcase{max-width:30rem;justify-self:end}

}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
  .line>span{transform:none;animation:none}
  .statement__text .w{opacity:1}
  .statement__text .w.dim{opacity:.5}
}