/* PenknerProduction — Stylesheet der neuen Seiten.
   Zwei Sprachen in einer Datei: die neuen Bausteine oben, darunter die
   übernommenen Blöcke aus dem ersten Entwurf, gekapselt unter .legacy. */
:root{
  --bg:#0a0a0a; --bg-2:#101010; --line:#242424;
  --text:#f5f5f3; --dim:#8a8a85;
  --font-display:"Archivo",sans-serif;
  --font-accent:"Fraunces",serif;
  --font-body:"Inter",sans-serif;
  --pad:clamp(20px,5vw,64px);
  /* Gleiche Textkante wie der alte .container: min(100%,1280px) zentriert + 48px */
  --pad-o:48px;
  --gutter:calc(max(0px,(100% - 1280px) / 2) + var(--pad-o));
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--text);color:var(--bg)}

/* ---------- Loader (aus Variante 1) ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad)}
.loader__word{font-family:var(--font-display);font-variation-settings:"wdth" 78;font-weight:800;font-size:clamp(12px,1.4vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.loader__num{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:800;font-size:clamp(72px,16vw,220px);line-height:.8;letter-spacing:-.03em}
.loader__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);height:1px;background:#1e1e1e}
.loader__bar i{display:block;height:100%;width:0%;background:var(--text)}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);mix-blend-mode:difference}
.brand{font-family:var(--font-display);font-variation-settings:"wdth" 78;font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.brand em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.nav{display:flex;gap:28px;align-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav a{position:relative}
/* Nur die Textlinks bekommen das Polster für den Unterstrich — die Pille nicht:
   `.nav a` ist spezifischer als `.nav__cta`, das padding-bottom:2px hat den 9px
   der Pille überschrieben und den Text nach unten gedrückt. */
.nav a:not(.nav__cta){padding-bottom:2px}
.nav a:not(.nav__cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav a:not(.nav__cta):hover::after{width:100%}
@media(max-width:760px){.nav a:not(.nav__cta){display:none}}
.nav__cta{border:1px solid currentColor;border-radius:999px;padding:9px 18px}

@media(max-width:520px){
  .header{padding:15px var(--gutter)}
  .brand{font-size:12px;letter-spacing:.12em}
  .nav__cta{padding:8px 13px;font-size:11px}
}

/* ---------- Hero (Video aus Variante 1) ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(28px,5vh,56px);overflow:hidden}
.hero__media{position:absolute;inset:-8% 0;z-index:-2}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,10,.96) 0%,rgba(10,10,10,.55) 42%,rgba(10,10,10,.35) 70%,rgba(10,10,10,.7) 100%)}
.grain{position:absolute;inset:0;z-index:-1;opacity:.32;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:auto;padding-top:clamp(96px,14vh,160px)}
.hero__meta span{display:flex;align-items:center;gap:10px}
.hero__meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text);opacity:.8}
/* Die Überschrift wird an der Spaltenbreite gemessen, nicht am Fenster.
   Oberhalb von 1280 px wächst das Fenster weiter, die Spalte aber nicht mehr —
   mit vw lief „WEGSCROLLT." deshalb aus der Zeile und wurde vom overflow:hidden
   der Maskenzeile abgeschnitten. cqw misst die Spalte selbst.
   Der zweite Term begrenzt die Höhe: drei Zeilen à 0,86 plus Beiwerk müssen
   in den Bildschirm passen, sonst schiebt justify-content:flex-end die
   Kopfzeile nach oben aus dem Bild. */
.hero{container-type:inline-size}
.hero h1{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:clamp(28px,min(12cqw,(100svh - 320px) / 2.6),168px);
  line-height:.86;letter-spacing:-.035em;text-transform:uppercase;margin-bottom:clamp(24px,4vh,44px)}
.hero h1 em{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}
.line{overflow:hidden;display:block;padding-bottom:.1em;margin-bottom:-.1em}
.line > span{display:block}
.hero__bottom{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,72px);align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:26px}
.hero__lead{max-width:44ch;color:#cfcfca;font-size:clamp(14px,1.15vw,16.5px);font-weight:300}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid #3a3a3a;border-radius:999px;padding:14px 26px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--solid:hover{background:transparent;color:var(--text);border-color:#3a3a3a}
.arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--dim),transparent);animation:cue 2.2s infinite var(--ease)}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.scrollcue{display:none}}
@media(max-height:700px){.scrollcue{display:none}}
@media(max-width:980px){:root{--pad-o:24px}}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;white-space:nowrap;background:var(--bg)}
.marquee__track{display:inline-flex;gap:44px;align-items:center;will-change:transform}
.marquee span{font-family:var(--font-display);font-variation-settings:"wdth" 96;font-weight:700;font-size:clamp(15px,2.1vw,26px);letter-spacing:.06em;text-transform:uppercase}
.marquee b{color:#3a3a3a;font-weight:400;font-size:.8em}

/* ---------- Statement (aus Variante 2) ---------- */
.stmt{padding:clamp(70px,11vw,150px) var(--gutter)}
.stmt p{font-family:var(--font-display);font-variation-settings:"wdth" 88;font-weight:600;
  font-size:clamp(22px,3.7vw,54px);line-height:1.12;letter-spacing:-.025em;max-width:20ch}
.stmt .w{display:inline-block;color:#3a3a3a;transition:color .4s var(--ease)}

/* ---------- Sections ---------- */
.section{padding:clamp(60px,9vw,120px) var(--gutter)}
.sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(30px,4vw,52px);border-bottom:1px solid var(--line);padding-bottom:22px}
.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--dim)}
.sechead h2{font-family:var(--font-display);font-variation-settings:"wdth" 104;font-weight:800;font-size:clamp(28px,4.6vw,62px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.sechead h2 em{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}

/* ---------- Fotowand als Arbeiten-Band (aus Variante 2) ---------- */
.wallband{position:relative;overflow:hidden;height:clamp(660px,132vh,1480px)}
.wall{position:absolute;inset:-16% 0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px)}
@media(max-width:1000px){.wall{grid-template-columns:repeat(3,1fr)}.wall__col:nth-child(n+4){display:none}}
@media(max-width:600px){.wall{grid-template-columns:repeat(2,1fr)}.wall__col:nth-child(n+3){display:none}}
.wall__col{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);will-change:transform}
.wall figure{position:relative;flex:0 0 auto;aspect-ratio:3/4;overflow:hidden;background:var(--bg-2)}
.wall img{width:100%;height:100%;object-fit:cover;filter:grayscale(.62) brightness(.82);transition:filter .6s var(--ease),transform 1.2s var(--ease)}
.wall figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:2px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.5s var(--ease);
  text-shadow:0 1px 14px rgba(0,0,0,.95)}
.wall figcaption b{font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:none}
@media(hover:hover){
  .wall figure:hover img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
  .wall figure:hover figcaption{opacity:1;transform:none}
}
/* Weiche Kanten oben/unten, damit die Wand ins Schwarz läuft */
.wallband::before,.wallband::after{content:"";position:absolute;left:0;right:0;height:clamp(60px,12vh,130px);z-index:2;pointer-events:none}
.wallband::before{top:0;background:linear-gradient(to bottom,var(--bg),transparent)}
.wallband::after{bottom:0;background:linear-gradient(to top,var(--bg),transparent)}
.wallfoot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;padding:clamp(26px,3.4vw,44px) var(--pad) 0}
.wallfoot p{color:var(--dim);font-size:13.5px;font-weight:300;max-width:46ch}

/* ---------- CTA ---------- */
.cta{padding:clamp(80px,13vw,180px) var(--gutter);border-top:1px solid var(--line);text-align:center}
/* Der Abbinder war mit 11vw bis 180px schlicht zu groß: vier Zeilen füllten
   den halben Schirm, und lange Wörter wie FESTHALTEN liefen aus der Zeile,
   wo die Maske sie abschnitt. Jetzt an der Spalte gemessen (cqw) und auf
   ein lesbares Maß gedeckelt. Zeilenabstand .95 statt .85, weil deutsche
   Versalien mit Umlaut sonst in die Zeile darüber stoßen. */
.cta{container-type:inline-size}
.cta h2{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:clamp(30px,min(8cqw,96px),96px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase}
.cta h2 em{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}
.cta p{color:var(--dim);margin:26px auto 34px;max-width:46ch;font-weight:300}
.footer{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:26px var(--pad);border-top:1px solid var(--line);font-size:12px;color:var(--dim);letter-spacing:.05em}

/* ============================================================
   Bereiche aus dem bisherigen Entwurf — Regeln 1:1 aus css/style.css,
   gekapselt unter .legacy, damit sie mit den neuen Teilen nicht kollidieren.
   ============================================================ */
.legacy{
  --pad:48px;
  --text-dim:#9a9a94; --bg-3:#1a1a1a;
  --accent:#ffffff; --accent-contrast:#0a0a0a;
  --container:1280px; --radius:2px;
}
@media(max-width:980px){.legacy{--pad:24px}}

.legacy .container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
/* Abschnittsabstände wachsen mit dem Fenster — dieselbe Kurve wie bei den
   neuen Bausteinen (.section), damit die Seite auf dem Handy nicht aus
   Leerraum besteht. */
.legacy .section{padding:clamp(60px,9vw,120px) 0}
.legacy .section--tight{padding:clamp(44px,6.4vw,80px) 0}
.legacy h1,.legacy h2,.legacy h3{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-0.02em;text-wrap:balance}
.legacy .h-lg{font-size:clamp(40px,5vw,72px);text-transform:uppercase}
/* Große Überschriften am Handy: lange Wörter (z. B. ANSPRECHPARTNER) sprengten die Breite (Prüfung 14.09.) */
@media(max-width:480px){.legacy .h-lg{font-size:clamp(30px,8.2vw,40px);hyphens:auto;overflow-wrap:break-word}}

.legacy .accent-word{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}
.legacy .eyebrow{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:12px;margin-bottom:28px}
.legacy .eyebrow::before{content:"";width:32px;height:1px;background:var(--text-dim)}
.legacy .lead{font-size:clamp(17px,1.4vw,20px);color:var(--text-dim);max-width:66ch}
/* Überschrift und Link nebeneinander — auf schmalen Schirmen untereinander,
   sonst rutscht der Link rechts aus dem Bild und die Seite wird breiter als das Fenster. */
.legacy .section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 40px}
.legacy .section-head .lead{margin-top:20px}
.legacy .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;padding:16px 30px;border:1px solid var(--text);border-radius:100px;background:transparent;color:var(--text);transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.legacy .btn:hover{background:var(--accent);color:var(--accent-contrast);transform:translateY(-2px)}
.legacy .btn .arrow{transition:transform .35s var(--ease)}
.legacy .btn:hover .arrow{transform:translateX(4px)}
.legacy .link-underline{position:relative;padding-bottom:2px}
.legacy .link-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.legacy .link-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* Bild-Platzhalter */
.legacy .ph{position:relative;background:var(--bg-3);
  background-image:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.025) 14px 15px);
  border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.legacy .ph::after{content:attr(data-label);font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);opacity:.7}
.legacy .ph--16x9{aspect-ratio:16/9}
.legacy .ph--4x3{aspect-ratio:4/3}
.legacy .ph--3x4{aspect-ratio:3/4}

/* Services (1:1 aus css/style.css) */
.legacy .media{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--bg-3)}
.legacy .media img{display:block;width:100%;height:100%;object-fit:cover}
.legacy .media--16x9{aspect-ratio:16/9}
.legacy .media--4x3{aspect-ratio:4/3}
.legacy .media--3x4{aspect-ratio:3/4}
.legacy .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:64px}
.legacy .service-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:52px;background:var(--bg-2);display:flex;flex-direction:column;gap:24px;transition:border-color .4s,transform .4s var(--ease)}
.legacy .service-card:hover{border-color:var(--text-dim);transform:translateY(-4px)}
.legacy .service-card--featured{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.legacy .service-card--featured .ph{margin:0}
.legacy .service-card--featured > div:first-child{display:flex;flex-direction:column;gap:26px}
.legacy .service-num{font-family:var(--font-display);font-style:normal;font-weight:400;font-variation-settings:"wdth" 96;letter-spacing:0;font-size:15px;color:var(--text-dim);margin-bottom:-12px}
.legacy .service-card h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15;text-transform:uppercase}
.legacy .service-card--featured h3{font-size:clamp(28px,3vw,42px);line-height:1.12}
.legacy .services-grid .service-card:not(.service-card--featured) h3{min-height:2.3em}
.legacy .service-card p{color:var(--text-dim);line-height:1.7;max-width:60ch}
.legacy .service-tags{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.legacy .service-tags li{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--line);border-radius:100px;padding:7px 14px}
.legacy .service-link{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin-top:auto}

/* Stats */
.legacy .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:80px}
.legacy .stat{padding:40px 24px;border-left:1px solid var(--line);text-align:center}
.legacy .stat:first-child{border-left:none}
.legacy .stat-value{font-family:var(--font-display);font-size:clamp(40px,4vw,64px);font-weight:700;line-height:1}
.legacy .stat-value em{font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em}
.legacy .stat-label{color:var(--text-dim);font-size:14px;margin-top:10px}

/* About-Teaser */
.legacy .about-split{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.legacy .about-split .ph,
.legacy .about-split .media{position:sticky;top:120px}
/* Seitenverhältnis der Datei, damit vom Porträt nichts beschnitten wird */
.legacy .media--portraet{aspect-ratio:1600/1908}
/* Auf der Startseite füllt das Porträt die ganze Zeile, damit es unten mit dem Knopf abschließt */
.legacy .about-split .media--portraet{align-self:stretch;aspect-ratio:auto;position:relative;top:auto}
.legacy .about-text p{color:var(--text-dim);margin-bottom:24px}
.legacy .about-text p strong{color:var(--text);font-weight:600}

/* Kundenlogos */
/* Kundenband (Variante B, 21.09.): zwei gegenläufige Reihen, jede Firma eine verlinkte Karte mit
   Name und Leistung. Wie breit eine Runde ist, misst js/seite.js und legt es als --lauf ab; ohne
   Skript bleiben 50 % als Rückfallwert. Die Dauer hängt an der Strecke (gleiches Tempo bei mehr Kunden). */
.legacy .logo-marquee{overflow:hidden;white-space:nowrap;margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.legacy .logo-marquee + .logo-marquee{margin-top:0;border-top:0}
.legacy .logo-track{display:inline-flex;align-items:stretch;animation:marquee var(--dauer,60s) linear infinite;will-change:transform}
.legacy .logo-marquee--zurueck .logo-track{animation-direction:reverse}
.legacy .logo-marquee:hover .logo-track{animation-play-state:paused}
.legacy .logo-item{display:inline-flex;flex-direction:column;gap:10px;flex-shrink:0;padding:26px clamp(24px,3.4vw,56px) 28px;border-left:1px solid var(--line);transition:background .4s var(--ease)}
.legacy .logo-item b{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.7vw,40px);line-height:1;letter-spacing:-.015em;text-transform:uppercase;color:#bdbdb8;transition:color .4s var(--ease)}
.legacy .logo-item span{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.legacy .logo-item span::after{content:"  ↗";opacity:0;transition:opacity .3s}
@media(hover:hover){
  .legacy .logo-item:hover{background:var(--bg-2)}
  .legacy .logo-item:hover b{color:var(--text)}
  .legacy .logo-item:hover span::after{opacity:1}
}
@media(max-width:560px){.legacy .logo-item{padding:20px 22px 22px;gap:8px}.legacy .logo-item span{font-size:10px;letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){.legacy .logo-track{animation:none}}
@keyframes marquee{to{transform:translateX(calc(-1 * var(--lauf,50%)))}}

/* Testimonials */
.legacy .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.legacy .testimonial{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:40px 36px;display:flex;flex-direction:column;gap:26px;transition:border-color .4s,transform .4s var(--ease)}
.legacy .testimonial:hover{border-color:var(--text-dim);transform:translateY(-4px)}
.legacy .testimonial-mark{font-family:var(--font-accent);font-style:italic;font-size:60px;line-height:.4;color:var(--text-dim);opacity:.5}
.legacy .testimonial-quote{font-family:var(--font-accent);font-style:italic;font-size:19px;line-height:1.55;color:var(--text)}
.legacy .testimonial-author{margin-top:auto;display:flex;align-items:center;gap:14px}
.legacy .testimonial-avatar{width:46px;height:46px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-dim)}
.legacy .testimonial-author .name{font-family:var(--font-display);font-weight:600;font-size:14px}
.legacy .testimonial-author .role{font-size:13px;color:var(--text-dim);margin-top:3px}
.legacy .form-note{font-size:13px;color:var(--text-dim)}

/* FAQ */
.legacy .faq-list{margin-top:64px;border-top:1px solid var(--line)}
.legacy .faq-item{border-bottom:1px solid var(--line)}
.legacy .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-family:var(--font-display);font-size:18px;font-weight:600}
.legacy .faq-item summary::-webkit-details-marker{display:none}
.legacy .faq-item summary::after{content:"+";font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em;font-size:24px;color:var(--text-dim);flex-shrink:0;transition:transform .3s var(--ease)}
.legacy .faq-item[open] summary::after{transform:rotate(45deg)}
.legacy .faq-item p{color:var(--text-dim);max-width:74ch;padding-bottom:26px}

/* Footer */
.legacy .logo{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.legacy .logo span{color:var(--text-dim);font-weight:500}
.legacy .site-footer{border-top:1px solid var(--line);padding:80px 0 40px;margin-top:40px}
.legacy .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:72px}
.legacy .footer-brand p{color:var(--text-dim);max-width:32ch;margin-top:16px;font-size:14px}
.legacy .footer-col h4{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:20px}
.legacy .footer-col{min-width:0}
.legacy .footer-col li{margin-bottom:12px}

.legacy .footer-col a{font-size:14px;color:var(--text-dim);transition:color .3s}
.legacy .footer-col a:hover{color:var(--text)}
.legacy .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--line);font-size:13px;color:var(--text-dim)}
.legacy .footer-bottom .legal{display:flex;gap:24px}
.legacy .footer-bottom a:hover{color:var(--text)}

@media(max-width:980px){
  .legacy .services-grid,.legacy .service-card--featured{grid-template-columns:1fr}
  .legacy .service-card{padding:36px}
  .legacy .about-split{grid-template-columns:1fr}
  .legacy .about-split .media--portraet{aspect-ratio:1600/1908}
  .legacy .testimonials-grid{grid-template-columns:1fr}
  .legacy .stats{grid-template-columns:1fr}
  .legacy .stat{border-left:none;padding-left:0;border-top:1px solid var(--line)}
  .legacy .footer-grid{grid-template-columns:1fr 1fr}
}

/* Der alte Entwurf ist Desktop-first; unter 560px würde der Footer sonst
   die Seite aufschieben (lange E-Mail). Desktop bleibt unverändert. */
@media(max-width:560px){
  .legacy .footer-grid{grid-template-columns:1fr;gap:36px;margin-bottom:48px}
  .legacy .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

/* Kopfleiste: über dem Hero transparent, danach echte Leiste mit Blur */
.header{border-bottom:1px solid transparent;will-change:transform;
  transition:transform .5s var(--ease),background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease)}
/* Beim Runterscrollen fährt die Leiste weg, beim Hochscrollen wieder ein */
.header.is-hidden{transform:translateY(-101%)}
.header.menu-open{transform:none}
.header.is-stuck{mix-blend-mode:normal;background:rgba(10,10,10,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);padding-top:14px;padding-bottom:14px}

.anim .fade,.anim .reveal{opacity:0;transform:translateY(22px)}
/* Seitenwechsel: die Seite blendet beim Laden ein und vor dem Verlassen aus,
   statt hart umzuschalten. Ohne JS bleibt alles sofort sichtbar. */
.anim body{opacity:0;transition:opacity .6s ease}
.anim.ist-da body{opacity:1}
.anim.geht body{opacity:0;transition:opacity .3s ease}
/* Intro (Zähler, Balken) nur beim ersten Seitenaufruf der Sitzung; danach lädt die Startseite wie jede andere Seite */
.ohne-intro .loader{display:none}

/* ══ Wortmarke ═══════════════════════════════════════════════════════════════
   Das Monogramm führt durch die Seite — Kopf und Fußzeile.
   Die Signatur unterschreibt nur Inhalte: Ladebild, „Über mich", Abbinder. */

.brand--logo{display:inline-flex;align-items:center;gap:6px;line-height:0}
.brand--logo .logo-wort{transform:translateY(1px)}
.brand--logo .logo-mono{height:30px;width:auto}
@media(max-width:760px){.brand--logo .logo-mono{height:24px}}

.logo-wort{font-family:var(--font-display);font-weight:800;font-variation-settings:"wdth" 78;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;font-style:normal}
.logo-wort i{display:block;font-style:normal;font-weight:600;font-size:9px;
  letter-spacing:.3em;opacity:.72;margin-top:1px}

.legacy .footer-brand .logo{display:inline-flex;align-items:center;gap:18px;line-height:0;margin-bottom:6px}
.legacy .footer-brand .logo .logo-mono{height:64px;width:auto}
.logo-wort--gross{font-size:20px;letter-spacing:.18em}
.logo-wort--gross i{font-size:13px;margin-top:3px}
@media(max-width:760px){
  .legacy .footer-brand .logo .logo-mono{height:48px}
  .logo-wort--gross{font-size:16px}
}

/* Unterschrift unter „Über mich" */
.logo-unterschrift{display:block;margin:2px 0 34px;line-height:0;color:var(--text)}
.logo-unterschrift svg{height:124px;width:auto;opacity:.92}
@media(max-width:760px){.logo-unterschrift svg{height:96px}}

/* Abbinder unter dem Kontakt-Block. Die Seite setzt svg{display:block},
   damit greift text-align:center nicht mehr — also selbst mittig legen. */
.logo-abbinder{line-height:0;margin-top:clamp(52px,7vw,96px);display:flex;justify-content:center}
.logo-abbinder svg{height:clamp(88px,11vw,140px);width:auto;opacity:.8}

/* Ladebild: der Schriftzug schreibt sich von links nach rechts.
   js/seite.js nimmt die Animation ab, sobald sie steht — „forwards" hält nur
   den Endwert, beendet die Animation aber nicht, und ein Neuaufbau der Ebene
   würde sie sonst ein zweites Mal anstoßen. */
.logo-lader{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  pointer-events:none;line-height:0;color:var(--text)}
.logo-lader svg{height:min(30vh,220px);width:auto;
  clip-path:inset(0 100% 0 0);animation:logo-schreiben 1.15s cubic-bezier(.55,0,.2,1) .12s forwards}
@keyframes logo-schreiben{to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.logo-lader svg{clip-path:none;animation:none}}

/* ── Mobiles Menü ─────────────────────────────────────────────────────────
   Unter 760 px verschwinden die Textlinks aus der Kopfzeile. Bisher gab es
   dann keine Navigation außer der Fußzeile. Der Knopf klappt die Links als
   Liste unter die Leiste; die Pille „Projekt anfragen" bleibt immer sichtbar. */
.nav__toggle{display:none;width:40px;height:40px;margin-left:6px;padding:0;border:0;
  background:transparent;color:inherit;cursor:pointer;position:relative;flex:none}
.nav__toggle span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),top .3s var(--ease),opacity .3s}
.nav__toggle span:first-child{top:15px}
.nav__toggle span:last-child{top:24px}
.header.menu-open .nav__toggle span:first-child{top:19.5px;transform:rotate(45deg)}
.header.menu-open .nav__toggle span:last-child{top:19.5px;transform:rotate(-45deg)}
@media(max-width:760px){
  .header{flex-wrap:wrap}
  .nav__toggle{display:block}
  .header.menu-open{mix-blend-mode:normal;background:rgba(10,10,10,.96);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .header.menu-open .nav{order:3;flex-basis:100%;flex-direction:column;align-items:flex-start;
    gap:0;padding:14px 0 6px;border-top:1px solid rgba(255,255,255,.12);margin-top:12px}
  .header.menu-open .nav a:not(.nav__cta){display:block;padding:14px 0;font-size:15px;
    letter-spacing:.14em;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .header.menu-open .nav a:not(.nav__cta)::after{display:none}
  .header.menu-open .nav .nav__cta{margin-top:16px;align-self:flex-start}
}

@media(max-width:980px){.header.is-stuck{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,10,.96)}}