/*
Theme Name: B&U Ziviltechniker
Theme URI: https://www.bu-zt.at
Author: Bodner & Unterluggauer Ziviltechniker GmbH
Description: Maßgeschneidertes Theme — One-Pager-Startseite mit Leistungs-Unterseiten. Anthrazit/Weiß mit ZT-Rot, League Spartan, technische Designsprache (Maßlinien, Planraster, Plankopf).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: buzt
*/

/* ============ Schrift (lokal gehostet — keine Übertragung an Google) ============ */
@font-face{
  font-family:'League Spartan';
  src:url('assets/fonts/league-spartan.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ============ Basis ============ */
:root{
  --ink:#1b1b1a;
  --ink-2:#232322;
  --ink-3:#141413;
  --paper:#f2f3f5; /* kühles Hellgrau — bewusst kein warmer Beige-Ton */
  --white:#ffffff;
  --red:#c01633;
  --red-dark:#9e1129;
  --line-d:rgba(255,255,255,.16);
  --line-l:rgba(27,27,26,.16);
  --mut-d:rgba(255,255,255,.62);
  --mut-l:rgba(27,27,26,.62);
  --max:1240px;
  --pad:clamp(20px,4vw,56px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'League Spartan',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--red);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Tastaturbedienung */
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{
  position:fixed;top:-64px;left:16px;z-index:100;background:var(--red);color:#fff;
  padding:13px 22px;font-size:.8rem;letter-spacing:.08em;font-weight:600;
  transition:top .25s;
}
.skip:focus{top:16px}

/* Kicker + Maßlinie (Vermaßungs-Optik) */
.kicker{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--red);display:flex;align-items:center;gap:16px;
}
.kicker::after{content:"";flex:0 0 72px;height:1px;background:currentColor}
.dim{position:relative;height:1px;background:var(--line-l);margin:26px 0 0}
.dim::before,.dim::after{
  content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--line-l);
}
.dim::before{left:0}.dim::after{right:0}
.on-dark .dim{background:var(--line-d)}
.on-dark .dim::before,.on-dark .dim::after{background:var(--line-d)}

h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
.sec-head{display:grid;gap:22px;margin-bottom:clamp(40px,6vw,72px)}
.sec-head p.lead{max-width:62ch;color:var(--mut-l);font-size:1.06rem}
.on-dark .sec-head p.lead{color:var(--mut-d)}
/* Saubere Zeilenumbrüche: keine einzelnen Wörter allein am Zeilenende */
h1,h2,h3,.sec-head p.lead,p.sub,.phase-desc,blockquote{text-wrap:balance}
.about-text p,.career-pitch p,.svc-lead,.contact-grid p,.job .meta{text-wrap:pretty}

section{padding:clamp(72px,10vw,128px) 0;position:relative}

/* Buttons — eckig, kein Radius */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:17px 30px;border:1px solid transparent;cursor:pointer;background:none;
  transition:background .25s,color .25s,border-color .25s;
}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(5px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-ghost-w{border-color:var(--line-d);color:#fff}
.btn-ghost-w:hover{border-color:#fff}
.btn-ghost-d{border-color:var(--line-l);color:var(--ink)}
.btn-ghost-d:hover{border-color:var(--ink)}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .hero-meta .scroll-hint::after{animation:none}
}

/* ============ Header ============ */
header.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .35s,box-shadow .35s;
}
body.admin-bar header.site-head{top:32px}
@media (max-width:782px){body.admin-bar header.site-head{top:46px}}
.head-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:height .35s;
}
header.site-head .logo{display:block;flex:0 1 300px;min-width:200px}
header.site-head .logo img{width:100%;height:auto}
header.site-head .logo .l-dark{display:none}
header.site-head.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line-l)}
header.site-head.scrolled .head-in{height:68px}
header.site-head.scrolled .logo .l-dark{display:block}
header.site-head.scrolled .logo .l-light{display:none}
nav.main{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
nav.main a{
  font-size:.92rem;font-weight:500;color:#fff;position:relative;padding:6px 0;white-space:nowrap;
}
nav.main a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .25s;
}
nav.main a:hover::after{width:100%}
header.site-head.scrolled nav.main a{color:var(--ink)}
nav.main .cta{
  border:1px solid var(--line-d);padding:9px 15px;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  transition:background .25s,border-color .25s,color .25s;
}
nav.main .cta:hover{background:var(--red);border-color:var(--red);color:#fff}
nav.main .cta::after{display:none}
header.site-head.scrolled nav.main .cta{border-color:var(--line-l)}
header.site-head.scrolled nav.main .cta:hover{border-color:var(--red);color:#fff}

/* Header auf hellen Unterseiten: immer dunkler Kopf dahinter (page-head), gleiche Logik wie Startseite */

/* Burger */
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative;z-index:80}
.burger span{position:absolute;left:7px;right:7px;height:2px;background:#fff;transition:transform .3s,opacity .3s,background .3s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
header.site-head.scrolled .burger span{background:var(--ink)}
body.menu-open .burger span{background:#fff}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;background:var(--ink-3);z-index:55;display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open header.site-head{background:transparent;box-shadow:none;backdrop-filter:none}
body.menu-open header.site-head .logo .l-dark{display:none}
body.menu-open header.site-head .logo .l-light{display:block}
.mobile-menu a{
  color:#fff;font-size:clamp(1.6rem,6.4vw,2.4rem);font-weight:600;padding:14px 0;
  border-bottom:1px solid var(--line-d);
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-menu a .no{font-size:.8rem;color:var(--red);font-weight:600;letter-spacing:.08em}
.mobile-menu .mm-foot{margin-top:36px;color:var(--mut-d);font-size:.82rem;letter-spacing:.06em;font-weight:500}

@media (max-width:1080px){
  nav.main{display:none}
  .burger{display:block}
}
@media (max-width:560px){
  .kicker{font-size:.66rem;gap:10px}
  .kicker::after{flex:1 1 20px}
}

/* ============ Hero ============ */
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:0;
}
/* ZT-Rot fällt auf Foto-Hintergründen unter 4,5:1 — auf dunklen Köpfen hellerer Rotton */
.hero .kicker,.page-head .kicker{color:var(--red)}
.hero-bg{position:absolute;inset:0}
.hero-bg .slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.05) brightness(.9);
  opacity:0;transition:opacity 1.8s ease;
}
.hero-bg .slide.active{opacity:.42}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,27,26,.55) 0%,rgba(27,27,26,.25) 45%,rgba(27,27,26,.92) 100%);
}

/* Start-Intro + Ken-Burns (nur ohne reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .hero-bg .slide.active,.ph-bg .slide.active{animation:kb 9.5s ease-out forwards}
  @keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}}
  .hero .kicker,.hero h1,.hero p.sub,.hero p.sub-faden,.hero-actions{
    transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1);
  }
  body:not(.loaded) .hero .kicker,
  body:not(.loaded) .hero h1,
  body:not(.loaded) .hero p.sub,
  body:not(.loaded) .hero p.sub-faden,
  body:not(.loaded) .hero-actions{opacity:0;transform:translateY(34px)}
  body.loaded .hero .kicker{transition-delay:.15s}
  body.loaded .hero h1{transition-delay:.32s}
  body.loaded .hero p.sub{transition-delay:.5s}
  body.loaded .hero p.sub-faden{transition-delay:.62s}
  body.loaded .hero-actions{transition-delay:.74s}
  .hero-grid{transition:opacity 1.8s ease .5s}
  .hero-meta .wrap{transition:opacity 1.1s ease .95s}
  body:not(.loaded) .hero-grid,
  body:not(.loaded) .hero-meta .wrap{opacity:0}
  header.site-head{transition:background .35s,box-shadow .35s,opacity .9s ease .85s}
  body:not(.loaded) header.site-head{opacity:0}
}

/* Planraster */
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:96px 96px;
}

/* 3D-Partikel-Logo: das B&U-Logosymbol als rotierende Punktwolke. Ein roter Faden verbindet
   markante Knoten, an denen nacheinander die Fachsparten erscheinen. Größer, nach links-unten. */
.amp-logo{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(8px,5vw,96px);top:13vh;top:13svh;
  width:min(52vw,820px);height:80vh;height:80svh;
}
.amp-canvas{display:block;width:100%;height:100%}
@media (prefers-reduced-motion: no-preference){
  .amp-logo{transition:opacity 1.6s ease .9s}
  body:not(.loaded) .amp-logo{opacity:0}
}
@media (max-width:1000px){.amp-logo{display:none}}
.hero-content{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:160px var(--pad) 56px;
}
.hero .kicker{margin-bottom:30px}
.hero h1{
  font-size:clamp(2.7rem,6.4vw,5rem);font-weight:600;color:#fff;
  max-width:18ch;line-height:1.05;
}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.hero p.sub{margin-top:26px;max-width:54ch;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--mut-d)}
/* "Der rote Faden …" als eigene Zeile (Tagline) mit roter Maßlinie davor */
.hero p.sub-faden{margin-top:16px;display:flex;align-items:center;gap:14px}
.hero p.sub-faden::before{content:"";flex:0 0 36px;height:1px;background:var(--red)}
.hero p.sub-faden em{
  font-style:normal;color:var(--red);font-weight:600;
  font-size:clamp(1rem,1.45vw,1.22rem);letter-spacing:.01em;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:42px}
.hero-meta{position:relative;z-index:2;border-top:1px solid var(--line-d)}
.hero-meta .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:20px;padding-bottom:20px;flex-wrap:wrap;
}
.hero-meta .coord,.hero-meta .scroll-hint{
  font-size:.76rem;letter-spacing:.12em;color:var(--mut-d);text-transform:uppercase;font-weight:500;
}
.hero-meta .coord{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.hero-meta .coord .cseg{white-space:nowrap}
.hero-meta .coord .sep{opacity:.5}
.hero-meta .coord .brk{display:none}
@media (max-width:560px){
  .hero-meta .coord{justify-content:flex-start;text-align:left}
  .hero-meta .coord .sep{display:none}
  .hero-meta .coord .brk{display:block;flex:0 0 100%;height:0}
}
.hero-meta .scroll-hint{display:flex;align-items:center;gap:10px}
.hero-meta .scroll-hint::after{content:"";width:1px;height:26px;background:var(--red);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{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}}

/* ============ Marquee ============ */
.marquee{
  background:var(--ink-3);color:#fff;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  overflow:hidden;padding:18px 0;
}
.marquee-track{display:flex;width:max-content;animation:mq 56s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-size:.86rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--mut-d);padding:0 18px;white-space:nowrap;display:flex;align-items:center;gap:36px;
}
.marquee span::after{content:"";width:7px;height:7px;background:var(--red);flex:none}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

/* ============ Über uns ============ */
.about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(36px,5vw,72px);align-items:start}
.about-photo .frame.has-img{cursor:pointer}
.about-text p{margin-bottom:22px;font-size:1.06rem;color:#33332f}
.about-text p strong{font-weight:600;color:var(--ink)}
.signature{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line-l);
  display:flex;flex-direction:column;gap:4px;
}
.signature .names{font-weight:600;font-size:1.05rem}
.signature .role{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l);font-weight:600}
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;
  border:1px solid var(--line-l);
}
.facts > div{padding:22px 18px;border-right:1px solid var(--line-l)}
.facts > div:last-child{border-right:0}
.facts b{display:block;font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:650;line-height:1;white-space:nowrap}
.facts small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-l);display:block;margin-top:10px;font-weight:600}
.about-photo{position:relative}
.about-photo .frame{position:relative}
.about-photo img{width:100%;height:auto;filter:contrast(1.02)}
.about-photo .frame::before{
  content:"";position:absolute;top:-14px;left:-14px;width:64px;height:64px;
  border-top:2px solid var(--red);border-left:2px solid var(--red);
}
.about-photo .frame::after{
  content:"";position:absolute;bottom:-14px;right:-14px;width:64px;height:64px;
  border-bottom:2px solid var(--red);border-right:2px solid var(--red);
}
.about-photo figcaption{
  margin-top:16px;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut-l);font-weight:600;
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts > div:nth-child(2){border-right:0}
  .facts > div:nth-child(-n+2){border-bottom:1px solid var(--line-l)}
}

/* ============ Zitat ============ */
.quote{background:var(--white);padding-top:0}
.quote .inner{
  border-top:1px solid var(--line-l);
  padding-top:clamp(56px,8vw,96px);text-align:center;
}
.quote blockquote{
  font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:350;
  line-height:1.25;max-width:26ch;margin:0 auto;letter-spacing:.01em;
}
.quote cite{
  display:block;margin-top:26px;font-style:normal;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;
}

/* ============ Leistungen ============ */
.services{background:var(--white)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line-l)}
.svc{
  padding:clamp(28px,3.4vw,46px);position:relative;
  border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  transition:background .3s;display:flex;flex-direction:column;
}
.svc:nth-child(2n){border-right:0}
.svc:nth-last-child(-n+2){border-bottom:0}
.svc::before{
  content:"";position:absolute;top:-1px;left:0;height:3px;width:0;background:var(--red);transition:width .45s cubic-bezier(.2,.6,.2,1);
}
.svc:hover{background:var(--paper)}
.svc:hover::before{width:100%}
.svc .no{
  font-size:.78rem;letter-spacing:.14em;color:var(--red);display:block;margin-bottom:18px;font-weight:600;
}
.svc h3{font-size:clamp(1.25rem,1.9vw,1.55rem);font-weight:600;max-width:22ch}
.svc p.svc-lead{margin-top:14px;color:var(--mut-l);font-size:.98rem;max-width:52ch}
.svc ul{margin-top:22px;display:grid;gap:10px;list-style:none}
.svc li{position:relative;padding-left:22px;font-size:.93rem;color:#3a3a36}
.svc li::before{
  content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;
  border:1px solid var(--red);
}
.svc li b,.svc li strong{font-weight:600;color:var(--ink)}
.svc .more{
  margin-top:auto;padding-top:26px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--ink);display:inline-flex;align-items:center;gap:10px;width:fit-content;
}
.svc .more .arr{transition:transform .25s;color:var(--red)}
.svc .more:hover .arr{transform:translateX(5px)}
@media (max-width:860px){
  .svc-grid{grid-template-columns:1fr}
  .svc{border-right:0 !important;border-bottom:1px solid var(--line-l) !important}
  .svc:last-child{border-bottom:0 !important}
}

/* ============ Der rote Faden (Projektablauf) ============ */
.process{background:var(--ink);color:#fff}
.process .kicker{color:var(--red)}
.flow-ends{display:flex;justify-content:space-between;margin-bottom:16px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--red)}
/* Adler fliegt dem Mauszeiger hinterher (leicht rechts-unterhalb); nur der hintere Flügel schlägt */
.cursor-bird{position:fixed;top:0;left:0;width:24px;height:30px;pointer-events:none;z-index:70;opacity:0;transition:opacity .45s ease;will-change:transform;filter:drop-shadow(0 0 3px rgba(192,22,51,.3))}
.cursor-bird.on{opacity:.9}
.cursor-bird img{position:absolute;top:0;left:0;width:100%;height:auto;display:block}
.cursor-bird .cb-wing{transform-origin:62% 58%;animation:wingbeat .6s ease-in-out infinite;will-change:transform}
@keyframes wingbeat{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-24deg)}65%{transform:rotate(13deg)}}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor-bird{display:none}}
.flow-ends .start,.flow-ends .end{display:flex;align-items:center;gap:9px}
.flow-ends .start::before,.flow-ends .end::after{content:"";width:9px;height:9px;background:var(--red);flex:none}
.flow-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.phase{border-top:2px solid var(--red);border-right:1px solid var(--line-d);padding:22px clamp(13px,1.3vw,24px) 30px}
.phase:last-child{border-right:0}
.phase-name{display:flex;align-items:flex-start;gap:9px;font-size:clamp(1rem,1.1vw,1.08rem);font-weight:600;line-height:1.18;min-height:2.6rem}
.phase-name::before{content:"";width:11px;height:11px;background:var(--red);flex:none;margin-top:5px}
.phase-desc{margin-top:10px;color:var(--mut-d);font-size:.86rem;line-height:1.4;max-width:26ch;min-height:2.5rem}
.phase-list{list-style:none;margin-top:18px;display:grid;gap:10px}
.phase-list li{display:flex;gap:9px;align-items:baseline;font-size:.93rem;color:rgba(255,255,255,.9)}
.phase-list .no{color:var(--red);font-weight:600;font-size:.7rem;letter-spacing:.04em;min-width:1.9em;flex:none}
/* lange Sparten-Begriffe sauber (mit Bindestrich) umbrechen statt mitten im Wort */
.phase-list li > span:last-child{min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (max-width:1120px){
  .flow-cols{grid-template-columns:repeat(3,1fr)}
  .phase:nth-child(3n){border-right:0}
}
@media (max-width:760px){
  .flow-cols{grid-template-columns:repeat(2,1fr)}
  .phase:nth-child(3n){border-right:1px solid var(--line-d)}
  .phase:nth-child(2n){border-right:0}
}
@media (max-width:500px){
  /* "Der rote Faden": auf dem Handy vertikal neben den gestapelten Phasen */
  .flow{display:flex;flex-direction:column}
  .flow-ends{display:contents}
  .flow-ends .start{order:0;position:relative;padding-left:28px;margin-bottom:2px}
  .flow-cols{order:1;grid-template-columns:1fr;position:relative}
  .flow-ends .end{order:2;position:relative;padding-left:28px;margin-top:2px}
  .flow-cols::before{content:"";position:absolute;left:5px;top:-12px;bottom:-12px;width:2px;background:var(--red)}
  .flow-ends .start::before,.flow-ends .end::after{position:absolute;left:0;top:50%;transform:translateY(-50%);width:11px;height:11px}
  .phase{border-top:0;border-right:0;padding:16px 0 14px 28px;position:relative}
  .phase-name{min-height:0}
  .phase-name::before{position:absolute;left:0;top:18px;margin-top:0}
  .phase-desc{min-height:0;max-width:none}
}

/* ============ Projekte (Foto-Stream, volle Breite) ============ */
.projects{background:var(--paper);overflow:hidden}
.projects .sec-head{margin-bottom:clamp(32px,5vw,56px)}
.stream{display:grid;gap:14px}
.stream-row{overflow:hidden}
.stream-track{display:flex;width:max-content;animation:slide 70s linear infinite}
.stream-row.rev .stream-track{animation:slide-r 90s linear infinite}
/* leicht unterschiedliche Tempi, damit die 3 Reihen nicht synchron wirken */
.stream-row:nth-child(3) .stream-track{animation-duration:58s}
.stream-row:hover .stream-track{animation-play-state:paused}
.stream.js-scrub .stream-track,.logo-stream.js-scrub .stream-track{animation:none !important;will-change:transform}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slide-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.card{
  position:relative;height:clamp(190px,24vw,258px);flex:none;overflow:hidden;
  margin-right:14px;border:1px solid var(--line-l);background:var(--white);
}
.card img{height:100%;width:auto;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.card.crop{width:clamp(285px,36vw,387px)}
.card.crop img{width:100%;object-fit:cover}
.card.has-img{cursor:pointer}
.card.has-img:hover img{transform:scale(1.05)}
.card .cap{
  position:absolute;left:0;right:0;bottom:0;padding:28px 16px 13px;
  background:linear-gradient(transparent,rgba(20,20,19,.8));color:#fff;
  font-size:.85rem;font-weight:600;letter-spacing:.01em;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
  pointer-events:none;
}
.card.has-img:hover .cap{opacity:1;transform:none}
.card.ph{
  width:clamp(200px,22vw,280px);
  background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(27,27,26,.06) 9px 10px);
  display:flex;align-items:center;justify-content:center;
}
.card.ph span{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--mut-l);border:1px solid var(--line-l);padding:8px 13px;background:var(--paper);
  text-align:center;line-height:1.7;
}
.proj-note{
  margin-top:30px;font-size:.74rem;letter-spacing:.06em;color:var(--mut-l);font-weight:500;
}
@media (prefers-reduced-motion: reduce){
  .stream-track{animation:none !important}
  .stream-row{overflow-x:auto}
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;background:rgba(20,20,19,.92);
  display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);
}
.lightbox.open{display:flex}
.lightbox figure{max-width:min(1100px,94vw);max-height:90vh;display:flex;flex-direction:column}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain}
.lightbox figcaption{
  padding:16px 2px;color:#fff;display:flex;justify-content:space-between;gap:18px;align-items:baseline;
}
.lightbox figcaption b{font-weight:600}
.lightbox figcaption span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d);font-weight:600}
.lightbox .lb-close{
  position:absolute;top:18px;right:18px;width:48px;height:48px;background:none;border:1px solid var(--line-d);
  color:#fff;font-size:1.3rem;cursor:pointer;transition:border-color .25s;
}
.lightbox .lb-close:hover{border-color:#fff}
.lightbox .lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;
  background:rgba(20,20,19,.4);border:1px solid var(--line-d);color:#fff;
  font-size:1.9rem;line-height:1;cursor:pointer;transition:border-color .25s,background .25s;
}
.lightbox .lb-nav:hover{border-color:#fff;background:rgba(20,20,19,.7)}
.lightbox .lb-prev{left:clamp(8px,2vw,24px)}
.lightbox .lb-next{right:clamp(8px,2vw,24px)}
@media (max-width:560px){.lightbox .lb-nav{width:40px;height:54px;font-size:1.5rem}}

/* ============ Team ============ */
.team{background:var(--ink);color:#fff}
.gf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:64px}
/* Option: ein gemeinsames GF-Foto (beide drauf) statt der Einzelporträts —
   Hochformat-Foto links (~40%, natives 2:3 = kein Beschnitt), Namen-Karten rechts gestapelt */
.gf-block{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;margin-bottom:64px;align-items:stretch}
.gf-combined{position:relative;margin:0;border:1px solid var(--line-d);background:var(--ink-2);aspect-ratio:2/3}
.gf-combined.has-img{cursor:pointer}
.gf-combined.has-img:focus-visible{outline:none}
.gf-combined img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15);transition:filter .3s}
.gf-combined:hover img{filter:grayscale(0)}
/* rote Eckwinkel wie bei den Mitarbeiterfotos – erscheinen beim Hover */
.gf-combined::before,.gf-combined::after{
  content:"";position:absolute;width:40px;height:40px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
.gf-combined::before{top:-9px;left:-9px;border-top:2px solid var(--red);border-left:2px solid var(--red)}
.gf-combined::after{bottom:-9px;right:-9px;border-bottom:2px solid var(--red);border-right:2px solid var(--red)}
.gf-combined:hover::before,.gf-combined:hover::after{opacity:1}
.gf-grid--names{grid-template-columns:1fr;grid-auto-rows:1fr;margin-bottom:0}
.gf{
  border:1px solid var(--line-d);padding:clamp(26px,3vw,40px);
  display:flex;gap:26px;align-items:flex-start;background:var(--ink-2);
  transition:border-color .3s;
}
.gf:hover{border-color:rgba(255,255,255,.4)}
/* Porträts — Platzhalter mit Initialen; echtes Foto ersetzt automatisch */
.portrait{
  flex:none;width:clamp(104px,11vw,136px);aspect-ratio:3/4;border:1px solid var(--line-d);
  background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.portrait span{font-size:1.2rem;letter-spacing:.08em;color:var(--red);font-weight:600}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.portrait-s{
  width:100%;aspect-ratio:1/1;border:1px solid var(--line-d);margin-bottom:16px;
  background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.portrait-s span{font-size:1.3rem;letter-spacing:.08em;color:var(--red);font-weight:600}
.portrait-s img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.gf h3{font-size:1.3rem;font-weight:600}
.gf .role{
  margin-top:6px;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut-d);line-height:1.7;font-weight:600;
}
.gf .gf-links{margin-top:18px;display:grid;gap:4px}
.gf .gf-links a{
  font-size:.92rem;color:rgba(255,255,255,.85);width:fit-content;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
}
.gf .gf-links a:hover{color:#fff;border-color:var(--red)}
.staff-label{
  font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut-d);margin-bottom:18px;font-weight:600;
}
/* Projektteam: querformatige Foto-Karten mit Hover-Wechsel (Foto 1 -> Foto 2) */
.staff{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.staff > div{display:flex;flex-direction:column}
.staff-photo{
  position:relative;aspect-ratio:3/2;margin-bottom:14px;
  border:1px solid var(--line-d);background:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
}
.staff-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.18);transition:opacity .55s ease;
}
.staff-photo.has-img{cursor:pointer}
.staff-photo.has-img:focus-visible,.about-photo .frame.has-img:focus-visible{outline:none}
.staff-photo .p2{opacity:0}
.staff > div:hover .staff-photo .p2{opacity:1}
.staff > div:hover .staff-photo img{filter:grayscale(0)}
/* rote Eckwinkel wie beim Gruppenfoto – erscheinen beim Hover */
.staff-photo.has-img::before,.staff-photo.has-img::after{
  content:"";position:absolute;width:40px;height:40px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
.staff-photo.has-img::before{top:-9px;left:-9px;border-top:2px solid var(--red);border-left:2px solid var(--red)}
.staff-photo.has-img::after{bottom:-9px;right:-9px;border-bottom:2px solid var(--red);border-right:2px solid var(--red)}
.staff > div:hover .staff-photo.has-img::before,.staff > div:hover .staff-photo.has-img::after{opacity:1}
.staff-photo span{font-size:1.5rem;letter-spacing:.08em;color:var(--red);font-weight:600}
.staff b{font-weight:600;font-size:1.02rem;display:block}
.staff a{
  display:block;font-size:.8rem;letter-spacing:.02em;font-weight:500;
  color:var(--mut-d);margin-top:4px;transition:color .2s;word-break:break-word;
}
.staff a:hover{color:#fff}
@media (max-width:1020px){.staff{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .gf-grid{grid-template-columns:1fr}
  .gf-block{grid-template-columns:1fr}
  .gf-combined{aspect-ratio:2/3}
}
@media (max-width:560px){.staff{grid-template-columns:1fr}}

/* ============ Karriere ============ */
.career{background:var(--white)}
.career-grid .jobs{display:grid;gap:clamp(22px,3vw,34px);align-content:start}

/* ============ 404 ============ */
.err404{background:var(--ink);color:#fff;padding:clamp(150px,18vw,220px) 0 clamp(70px,10vw,120px)}
.err404 .kicker{color:var(--red)}
.err404 h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;margin:8px 0 18px;max-width:18ch}
.err404 .lead{color:var(--mut-d);max-width:52ch;font-size:1.06rem}
.err404-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:28px 0 34px}
.err404-links a{color:#fff;font-weight:600;border-bottom:2px solid var(--red);padding-bottom:3px;transition:color .2s}
.err404-links a:hover{color:var(--red)}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line-l)}
.faq-item{border-bottom:1px solid var(--line-l)}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-size:clamp(1.04rem,1.6vw,1.2rem);font-weight:600;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:2px;top:16px;font-size:1.6rem;font-weight:400;line-height:1;color:var(--red);transition:transform .25s}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:hover{color:var(--red)}
.faq-a{padding:0 0 24px;max-width:70ch;color:#3a3a36;line-height:1.65}
.faq-a a{color:var(--red);border-bottom:1px solid currentColor}
.career-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,80px);align-items:start}
.career-pitch p{color:#33332f;font-size:1.05rem;margin-top:20px;max-width:46ch}
.career-pitch .claim{
  margin-top:30px;font-size:1.25rem;font-weight:600;line-height:1.4;max-width:24ch;
}
.career-pitch .claim em{font-style:normal;color:var(--red)}
.job{background:var(--white);border:1px solid var(--line-l);padding:clamp(28px,3.4vw,44px);position:relative}
.job::before{content:"";position:absolute;top:-1px;left:-1px;width:64px;height:64px;border-top:3px solid var(--red);border-left:3px solid var(--red)}
.job .tag{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600}
.job h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:12px}
.job .meta{
  margin-top:10px;font-size:.8rem;letter-spacing:.08em;color:var(--mut-l);font-weight:500;
}
.job-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px;padding-top:30px;border-top:1px solid var(--line-l)}
.job-cols h4{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--mut-l);margin-bottom:14px;
}
.job-cols ul{display:grid;gap:10px;list-style:none}
.job-cols li{position:relative;padding-left:20px;font-size:.92rem;color:#3a3a36}
.job-cols li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border:1px solid var(--red)}
.job .btn{margin-top:34px}
@media (max-width:900px){.career-grid{grid-template-columns:1fr}.job-cols{grid-template-columns:1fr}}

/* ============ Kontakt ============ */
.contact-sec{background:var(--ink);color:#fff}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px)}
.c-block{padding:24px 0;border-top:1px solid var(--line-d)}
.c-block:first-child{border-top:0;padding-top:0}
.c-block h3{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--mut-d);margin-bottom:12px;
}
.c-block p,.c-block a{font-size:1.02rem;color:rgba(255,255,255,.88)}
.c-block a{border-bottom:1px solid var(--line-d);transition:border-color .2s}
.c-block a:hover{border-color:var(--red)}
.hours{display:grid;gap:6px}
.hours > div{display:flex;justify-content:space-between;gap:18px;font-size:.95rem;color:rgba(255,255,255,.88)}
.hours > div span:last-child{font-size:.88rem;color:var(--mut-d);font-weight:500}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px;margin-bottom:20px}
.field label{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d);font-weight:600;
}
.field label em{color:var(--red);font-style:normal}
.field input,.field textarea{
  background:transparent;border:1px solid var(--line-d);color:#fff;
  padding:15px 16px;font-family:'League Spartan',sans-serif;font-size:1rem;
  transition:border-color .25s;border-radius:0;appearance:none;
}
.field input:focus,.field textarea:focus{border-color:var(--red)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-color:var(--red)}
.field textarea{min-height:150px;resize:vertical}
.hp-feld{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.check{
  display:flex;gap:12px;align-items:flex-start;margin:4px 0 24px;
  font-size:.88rem;color:var(--mut-d);line-height:1.5;cursor:pointer;
}
.check input{
  appearance:none;flex:none;width:18px;height:18px;border:1px solid var(--line-d);background:transparent;
  cursor:pointer;position:relative;margin-top:2px;
}
.check input:checked{background:var(--red);border-color:var(--red)}
.check input:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check a{border-bottom:1px solid var(--line-d);transition:border-color .2s;color:rgba(255,255,255,.85)}
.check a:hover{border-color:var(--red)}
.form-note{font-size:.74rem;color:var(--mut-d);margin-top:16px;letter-spacing:.04em;font-weight:500}
.form-ok{
  border:1px solid var(--red);padding:18px 22px;margin-bottom:26px;
  color:#fff;font-size:.95rem;background:rgba(192,22,51,.12);
}
.form-err{
  border:1px solid var(--red);padding:18px 22px;margin-bottom:26px;
  color:#fff;font-size:.95rem;background:rgba(192,22,51,.2);
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}form .row{grid-template-columns:1fr}}

/* Standortkarte */
.map-box{
  margin-top:clamp(40px,6vw,72px);border:1px solid var(--line-d);position:relative;
  height:clamp(300px,40vw,440px);background:var(--ink-2);
  scroll-margin-top:92px; /* Anker #standort: fixer Header darf die Karte nicht überdecken */
}
.map-box .leaflet-container{cursor:pointer} /* ganze Karte ist Link zu Google Maps */
#map-canvas{position:absolute;inset:0;background:var(--ink-2)}
.map-box .leaflet-tile-pane{filter:grayscale(.55) contrast(1.05)}
.map-box .leaflet-container{font-family:'League Spartan',sans-serif;background:var(--ink-2)}
.map-box .leaflet-popup-content{font-size:.92rem;line-height:1.5}
.map-box .leaflet-popup-content a{color:var(--red);font-weight:600}
.map-box .leaflet-control-attribution{font-size:10px}
.map-box .leaflet-marker-icon{cursor:pointer}

/* ============ Nach-oben-Button ============ */
.to-top{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:50;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;border:0;cursor:pointer;font-size:1.45rem;line-height:1;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,transform .3s,background .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red-dark)}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .3s}}

/* ============ Footer (Plankopf) ============ */
footer.site-foot{background:var(--ink-3);color:#fff;border-top:1px solid var(--line-d)}
.foot-top{
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
  padding:42px 0 34px;
}
.foot-top img{width:min(400px,72vw);height:auto}
.foot-top .insta{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line-d);padding:12px 20px;transition:border-color .25s,color .25s;
}
.foot-top .insta:hover{border-color:#fff}
.plankopf{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line-d)}
.plankopf small.mt{margin-top:12px}
.plankopf > div{padding:18px;border-right:1px solid var(--line-d)}
.plankopf > div:last-child{border-right:0}
.plankopf small{
  display:block;font-size:.66rem;letter-spacing:.14em;font-weight:600;
  text-transform:uppercase;color:var(--mut-d);margin-bottom:8px;
}
.plankopf span{font-size:.85rem;color:rgba(255,255,255,.85);line-height:1.5;display:block}
.foot-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 0 40px;
  font-size:.76rem;letter-spacing:.06em;color:var(--mut-d);font-weight:500;
}
.foot-bottom nav{display:flex;gap:24px;flex-wrap:wrap}
.foot-bottom a,.foot-bottom button{
  background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:0;transition:color .2s;
}
.foot-bottom a:hover,.foot-bottom button:hover{color:#fff}
@media (max-width:1020px){.plankopf{grid-template-columns:repeat(2,1fr)}
  .plankopf > div{border-bottom:1px solid var(--line-d)}
  .plankopf > div:nth-child(2n){border-right:0}
}
@media (max-width:560px){.plankopf{grid-template-columns:1fr}.plankopf > div{border-right:0}}

/* ============ Unterseiten (Leistungen, Impressum, Datenschutz) ============ */
.page-head{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:clamp(150px,18vw,210px) 0 clamp(40px,5vw,64px);
}
.page-head .hero-grid{opacity:1}
.page-head .kicker{margin-bottom:24px}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:24ch;position:relative;z-index:2}
.page-head .wrap{position:relative;z-index:2}

/* Kopf-Fotos der Leistungsseiten: Crossfade-Slider wie im Hero, kräftig abgedunkelt für Lesbarkeit */
.ph-bg{position:absolute;inset:0;overflow:hidden}
.ph-bg .slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.05) brightness(.85);
  opacity:0;transition:opacity 1.8s ease;
}
.ph-bg .slide.active{opacity:.38}
.ph-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,27,26,.72) 0%,rgba(27,27,26,.45) 55%,rgba(27,27,26,.85) 100%);
}
.page-head .dim{background:var(--line-d);margin-top:34px}
.page-head .dim::before,.page-head .dim::after{background:var(--line-d)}
.content-body{padding:clamp(48px,7vw,88px) 0}
.content-body .inner{max-width:820px}
.content-body h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:38px 0 14px;color:var(--ink)}
.content-body h2:first-child{margin-top:0}
.content-body h3{font-size:1.15rem;margin:28px 0 10px}
.content-body p{margin-bottom:14px;color:#33332f;font-size:1.02rem}
.content-body ul,.content-body ol{margin:0 0 18px;padding-left:0;display:grid;gap:10px;list-style:none}
.content-body li{position:relative;padding-left:22px;color:#3a3a36;font-size:.98rem}
.content-body li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;border:1px solid var(--red)}
.content-body a{border-bottom:1px solid var(--line-l)}
.content-body a:hover{border-color:var(--red)}
.content-body strong{font-weight:600;color:var(--ink)}
.page-cta{
  margin-top:clamp(40px,6vw,64px);border:1px solid var(--line-l);padding:clamp(26px,3.4vw,44px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  position:relative;background:var(--paper);
}
.page-cta::before{content:"";position:absolute;top:-1px;left:-1px;width:56px;height:56px;border-top:3px solid var(--red);border-left:3px solid var(--red)}
.page-cta b{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;max-width:28ch}
.back-link{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--mut-l);
  transition:color .2s;position:relative;z-index:2;
}
.page-head .back-link{color:var(--mut-d)}
.back-link:hover{color:var(--red)}

/* ============ Auftraggeber (eine Leiste, alphabetisch) ============ */
.clients{background:var(--paper);padding:clamp(64px,9vw,110px) 0;border-bottom:1px solid var(--line-l)}
.clients .sec-head{margin-bottom:clamp(30px,4.5vw,48px)}

/* Zähler-Leiste: gleicher Aufbau wie die Über-uns-Kennzahlen (.facts), 3 Spalten */
.ag-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line-l);
}
.ag-facts > div{padding:22px 18px;border-right:1px solid var(--line-l)}
.ag-facts > div:last-child{border-right:0}
.ag-facts b{display:block;font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:650;line-height:1;white-space:nowrap}
.ag-facts small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-l);display:block;margin-top:10px;font-weight:600}
@media (max-width:640px){
  .ag-facts{grid-template-columns:1fr}
  .ag-facts > div{border-right:0;border-bottom:1px solid var(--line-l)}
  .ag-facts > div:last-child{border-bottom:0}
}

/* Logo-Slider: laufende Bänder (Reihenfolge pro Aufruf zufällig), einfärbig grau, Farbe bei Hover.
   Nutzt die Marquee-Mechanik der .stream-Reihen (slide/slide-r), aber per CSS statt Maus-Scrub. */
.logo-stream{display:grid;gap:clamp(26px,3.5vw,40px);margin-top:clamp(34px,5vw,56px)}
/* Tempo ans Fotoband darüber angeglichen (langsamer); feste Kartenbreite -> stabile Track-Breite trotz Lazy-Loading */
.logo-stream .stream-track{animation-duration:385s}
.logo-stream .stream-row.rev .stream-track{animation-duration:410s}
.logo-card{
  flex:none;width:clamp(120px,13vw,168px);height:72px;
  display:flex;align-items:center;justify-content:center;
  margin-right:clamp(30px,3vw,48px);
}
.logo-card img{
  max-height:62px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .35s,opacity .35s;
}
.logo-card:hover img{filter:none;opacity:1}
.logo-card.logo-text{
  font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mut-l);white-space:nowrap;transition:color .35s;
}
.logo-card.logo-text:hover{color:var(--ink)}