/* ============================================================
   eyedee – geteilte CSS-Ebene (alle 9 Seiten) · Stand 07/2026
   Quelle der Wahrheit für alle wiederkehrenden Seitenbausteine:
   Basis (Tokens, Grundraster, Header/Nav/Overlay, BFSG, Kontakt,
   Footer), Unterseiten-Bausteine, Subnav, Bundle-2/3-Gemeingut
   (inkl. FAQ v2 + Möwen 24/25). Wird VOR dem Seiten-CSS geladen.
   Die mobilen Verdichtungs-/E-Regeln liegen in eyedee-mobile.css
   und werden NACH dem Seiten-CSS geladen – zusammen ergibt das
   exakt die bisherige Kaskadenordnung (Basis -> Seite -> mobil).
   Eine Änderung hier gilt auf allen Seiten. Audit: check_segments.py
   (Segmente CSS_SHARED + CSS_SHARED_MOBILE, byte-genau gegen
   segments_ref/). Selbst gehostet, kein CDN (DSGVO). Kirby: beide
   Dateien als Assets einbinden; Seiten-CSS bleibt im Template
   zwischen den PAGE-CSS-Markern.
   ============================================================ */
/* ============================================================
   Basis (Design-Showcase Revision 10) – kanonischer Stand der
   Leistungsseiten inkl. Zertifikate-Hover-Fix (Rev 6/11.2) und
   a11y-gray-Superset. Zieht die offenen Nachzüge auf ws/md und
   projekte automatisch nach.
   ============================================================ */
:root{
  --bg:#fbfaf7;
  --bg-warm:#f6f3ee; /* nur noch für Einzelflächen, kein Body-Wechsel */
  --dark:#131315;
  --dark-2:#1a1a1d;
  --ink:#1c1c1e;
  --ink-soft:#4c4a47;
  --muted:#6e6a64;
  --paper:#ffffff;
  --brand:#D70E54;
  --brand-deep:#b30c47;
  --violet:#5f1aa8;
  --amber:#ff7a3c;
  --petrol:#0e6e7a;
  --line:rgba(28,28,30,.14);
  --line-light:rgba(255,255,255,.16);
  --grad:linear-gradient(120deg,#ff4d8c 0%,var(--brand) 55%,#b30c47 100%);
  --grad-warm:linear-gradient(120deg,var(--amber) 0%,var(--brand) 100%);
  --r-card:16px;
  --r-soft:12px;
  --r-btn:10px;
  --max:1200px;
  --gutter:clamp(1.25rem,4vw,3rem);
}

/* Typo-Entscheidung: Editorial (Fraunces + Inter) */
:root{
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --disp-weight:340;
  --disp-tracking:-0.015em;
  --disp-leading:1.05;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;
  /* Chris R42: weisser Rand beim iPad-Ueberscrollen - der Gummiband-Bereich
     zeigt den html-Hintergrund; oben Seitenfarbe, unten Footer-Dunkel */
  background:linear-gradient(var(--paper,#fff) 0 50%,var(--dark,#131315) 50% 100%)}
body{
  font-family:var(--font-body);font-weight:400;
  color:var(--ink);background:var(--bg);
  line-height:var(--lh,1.65);font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--brand);color:#fff}
img,svg{display:block;max-width:100%}
/* Runde 12 (Konsistenz-Sweep): Off-Canvas-Transforms (Marquee, Möwen,
   Scrub-Exits, Einflüge) erzeugten transienten H-Scroll. clip statt
   hidden (kein Scroll-Container) und auf BODY statt html: am Root
   bricht Chromium das sticky der Legal-Möwen (A/B-getestet). */
body{overflow-x:clip}
a{color:var(--brand-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

h1,h2,h3,.disp{
  font-family:var(--font-display);font-weight:var(--disp-weight);
  letter-spacing:var(--disp-tracking);line-height:var(--disp-leading);
  text-wrap:balance;
}
h1,h2{text-wrap:balance}
/* Chris R34: die farbigen Schriftteile CHANGIEREN - der Verlauf wandert
   langsam durch (mal Rosa-, mal Magenta-Anteil sichtbar, nie statisch
   blass). background-size schafft die Laufstrecke. */
h1 em,h2 em,.disp em,.gem{
  font-style:italic;
  background:var(--grad);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-right:.04em;
  animation:emShift 7.5s ease-in-out infinite alternate;
}
@keyframes emShift{from{background-position:0% 0}to{background-position:100% 0}}
body.a11y-motion :is(h1,h2,.disp) em,body.a11y-motion .gem,body.a11y-motion .footer-claim em{animation:none}
@media (prefers-reduced-motion:reduce){h1 em,h2 em,.disp em,.gem,.footer-claim em{animation:none}}
h1{font-size:clamp(2.6rem,1.4rem + 5.2vw,6.6rem)}
h2{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.6rem)}
h3{font-size:clamp(1.2rem,1rem + .8vw,1.55rem)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.eyebrow::before{content:"";width:2rem;height:1px;background:var(--brand)}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--ink-soft);max-width:46ch}

.is-dark{color:#f1efec}
.is-dark .eyebrow{color:rgba(241,239,236,.55)}
.is-dark .lead{color:rgba(241,239,236,.72)}
.is-dark a{color:#ff5c93}

/* --- Buttons: kantiger, kontraststark ----------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-weight:500;font-size:.95rem;
  padding:.95rem 1.8rem;border-radius:var(--r-btn);cursor:pointer;
  border:1px solid transparent;
  background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;
  color:#fff;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 32px -14px rgba(215,14,84,.5)}
.btn--brand{
  background:var(--brand);border-color:var(--brand);
  box-shadow:0 10px 26px -12px rgba(215,14,84,.55);
}
.btn--brand:hover{filter:brightness(1.06)}
.textlink{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;color:var(--ink)}
.textlink::after{
  content:"\2192";display:grid;place-items:center;flex-shrink:0;
  width:1.75em;height:1.75em;border-radius:50%;font-size:.9em;
  border:1px solid var(--line);color:var(--brand-deep);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.textlink:hover{text-decoration:none;color:var(--brand-deep)}
.textlink:hover::after{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateX(4px)}
.is-dark .textlink,.advisory .textlink{color:#f1efec}
.is-dark .textlink::after,.advisory .textlink::after{border-color:var(--line-light);color:#ff5c93}

/* --- Header + Navigation -------------------------------------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--gutter);
  transition:background .4s ease,box-shadow .4s ease;
}
.site-head.scrolled{background:rgba(251,250,247,.85);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.logo{color:var(--ink);display:block;transition:color .6s ease}
.site-head.logo-accent .logo{color:var(--brand)}
.logo svg{height:92px;width:auto;aspect-ratio:1667.25/800.98;transition:height .35s ease}
.site-head.scrolled .logo svg{height:58px}
.logo:hover{text-decoration:none;color:var(--brand)}
.main-nav{display:flex;gap:2.2rem}
.main-nav a{
  font-size:.9rem;font-weight:500;color:var(--ink);position:relative;padding:.3rem 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.main-nav a:hover{text-decoration:none;color:var(--brand-deep)}
.main-nav a:hover::after{transform:scaleX(1)}
.head-right{display:flex;align-items:center;gap:1rem}
.head-cta{font-size:.85rem;font-weight:500;color:#fff;background:var(--brand);border-radius:var(--r-btn);padding:.55rem 1.15rem}
.head-cta:hover{text-decoration:none;filter:brightness(1.07)}
.head-phone{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-btn);padding:.55rem 1.1rem;transition:border-color .25s ease,color .25s ease}
.head-phone svg{width:15px;height:15px;flex-shrink:0;color:var(--brand)}
.head-phone:hover{text-decoration:none;border-color:var(--brand);color:var(--brand-deep)}
@media (max-width:1280px){.head-phone span{display:none}}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-btn);width:42px;height:42px;cursor:pointer;position:relative;z-index:70}
.burger span,.burger span::before,.burger span::after{
  content:"";position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:all .3s ease;
}
.burger span{top:50%}
.burger span::before{top:-7px;left:0;right:0}
.burger span::after{top:7px;left:0;right:0}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0;transform:rotate(45deg);background:#f1efec}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg);background:#f1efec}
.nav-overlay{
  position:fixed;inset:0;z-index:65;background:rgba(19,19,21,.97);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
body.nav-open .nav-overlay{opacity:1;pointer-events:auto}
.nav-overlay a{
  font-family:var(--font-display);font-size:clamp(2rem,8vw,3.4rem);color:#f1efec;
  padding:.5rem 0;border-bottom:1px solid var(--line-light);
}
.nav-overlay a:hover{color:var(--brand);text-decoration:none}

/* --- Hero: abstrakte Hamburg-Skyline ---------------------------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:9rem var(--gutter) 4rem;overflow:hidden;
}
.hero-inner{max-width:var(--max);margin-inline:auto;width:100%;position:relative;z-index:2}
.hero h1{max-width:16ch;margin:1.4rem 0 1.8rem}
.hero .lead{margin-bottom:2.4rem}
.hero-ctas{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.skyline{
  /* Feinschliff Rev 2 (Bugfix Startseite): auf breiten Viewports war die
     Zeichnung hoeher als der Container - "xMidYMax slice" hat dann OBEN
     beschnitten (fehlendes Wolkenstueck). Der Container nimmt jetzt
     mindestens die natuerliche Hoehe der Zeichnung an (45vw = 720/1600),
     damit oben nichts mehr fehlt; hochkant bleibt das bisherige Verhalten
     (seitlicher Beschnitt). GETEILTES HEAD-Segment: nach dieser Aenderung
     wurde segments_ref neu eingefroren. */
  position:absolute;inset:auto 0 0 0;height:max(74vh,45vw);min-height:420px;z-index:0;pointer-events:none;
}
.skyline svg{width:100%;height:100%;object-fit:cover}
.sky-back{color:rgba(28,28,30,.055)}
.sky-front{color:rgba(28,28,30,.17)}
#skyBirds{color:rgba(28,28,30,.17)}
#skyClouds{color:rgba(28,28,30,.13)}
.sky-accent{color:var(--brand)}
.netfx{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:40%;z-index:0;pointer-events:none}
.hero-fade{
  position:absolute;inset:auto 0 0 0;height:18vh;z-index:1;pointer-events:none;
  background:linear-gradient(transparent,var(--bg) 85%);
}
.hero-inner .eyebrow{position:relative}
.gull-h1{position:absolute;bottom:calc(100% - 2px);left:0;width:64px;height:48px;color:rgba(28,28,30,.5);pointer-events:none;opacity:0}
.gull-h1 svg{width:100%;height:100%;overflow:visible}
.gull-fly{position:absolute;top:4%;left:0;width:128px;height:64px;color:rgba(241,239,236,.55);pointer-events:none;z-index:0}
.gull-pair{position:absolute;top:10px;left:0;width:200px;height:78px;color:rgba(241,239,236,.55);pointer-events:none;z-index:0}
.gull-pair svg{width:100%;height:100%;overflow:visible}
.gull-fly svg{width:100%;height:100%;overflow:visible}
.gull-ice-wrap{position:absolute;top:-69px;right:2.2rem;width:108px;height:70px;overflow:hidden;pointer-events:none}
.gull-abseil{position:absolute;width:84px;height:150px;overflow:hidden;color:rgba(28,28,30,.55);pointer-events:none;z-index:1}
.gull-abseil svg{width:100%;height:100%;display:block}
.gull-ice{position:absolute;left:0;bottom:-34px;width:108px;height:94px;color:rgba(28,28,30,.5);transform:translateY(76px)}
.scroll-hint{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);z-index:2;
}
.scroll-hint::before{content:"";width:1px;height:3rem;background:linear-gradient(transparent,var(--muted))}
.trust{margin-top:4rem;display:flex;flex-wrap:wrap;gap:.8rem}
.badge{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.62rem 1.05rem;border-radius:var(--r-btn);
  font-size:.8rem;font-weight:500;color:var(--ink-soft);
  background:rgba(255,255,255,.85);border:1px solid var(--line);
  box-shadow:0 4px 14px -10px rgba(28,28,30,.25);backdrop-filter:blur(3px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.badge:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(28,28,30,.3);border-color:rgba(28,28,30,.25)}
.badge svg{width:17px;height:17px;flex-shrink:0}
.badge-stars svg{width:28px;height:19px}
.fbadge-stars svg{width:20px;height:14px}
.badge b{font-weight:600;color:var(--ink)}
.badge-seal{padding:.42rem 1.05rem .42rem .55rem}
.seal{width:40px;height:40px;flex-shrink:0}
.seal svg{width:100%;height:100%;overflow:visible}
.seal .ring-text{font-family:var(--font-body);font-size:6.1px;font-weight:600;letter-spacing:1.6px;fill:var(--muted)}
.seal .core{font-family:var(--font-display);font-size:12.5px;font-weight:600;fill:var(--brand)}

/* --- Statement: Anapher-Zeilen ------------------------------------ */
.statement{padding:12rem 0 10rem;position:relative}
.statement h2{max-width:24ch;margin:1.4rem 0 2.4rem}
.statement-cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:66rem}
.statement-cols p{color:var(--ink-soft)}
.trio{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:6.5rem;text-align:center}
.trio-line{position:absolute;top:56px;left:10%;right:10%;height:2px;pointer-events:none}
.trio-line svg{width:100%;height:100%;overflow:visible}
.trio-item{transition:transform .3s ease}
.trio-item:hover{transform:translateY(-4px)}
.trio-item:hover .medal{box-shadow:0 22px 44px -22px rgba(215,14,84,.6)}
.trio-item:hover .medal svg{color:var(--brand)}
.medal svg{transition:color .3s ease}
.medal{
  transition:box-shadow .3s ease;
  width:112px;height:112px;border-radius:50%;margin:0 auto 1.6rem;
  display:grid;place-items:center;position:relative;z-index:1;
  background:linear-gradient(var(--bg-warm),var(--bg-warm)) padding-box,var(--grad) border-box;
  border:1px solid transparent;
  box-shadow:0 14px 34px -22px rgba(215,14,84,.45);
}
.medal svg{width:52px;height:52px;color:var(--ink)}
.trio-item .disp{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);margin-bottom:.8rem}
.trio-item p{color:var(--ink-soft);font-size:.95rem;max-width:34ch;margin-inline:auto}

/* --- Leistungen ----------------------------------------------------- */
.services{padding:9rem 0 3.5rem;position:relative;overflow:hidden;z-index:2}
.cases{z-index:1}
.deco{position:absolute;pointer-events:none;color:rgba(28,28,30,.3);z-index:0}
.deco--light{color:rgba(241,239,236,.22)}
.deco svg{width:100%;height:100%;overflow:visible}
.statement,.contact{position:relative;overflow:hidden}
.statement>.wrap,.contact>.wrap{position:relative;z-index:1}
.services .wrap{position:relative;z-index:1}
.main-nav .nav-home{display:inline-flex;align-items:center;padding:.2rem .1rem}
.main-nav .nav-home svg{width:17px;height:16px;display:block}
.services-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:3.5rem}
@media (min-width:1001px){.services-head h2{max-width:14ch}} /* Runde 14: Deckel nur neben dem Crossfade */
.xfade{position:relative;min-width:28ch;text-align:right;padding-bottom:.4rem}
.xdots{height:26px;margin-bottom:.5rem}
.xdots svg{height:100%;width:auto;margin-left:auto;display:block;overflow:visible}
.xtext{position:relative;min-height:1.5em;font-family:var(--font-display);font-size:clamp(1.35rem,1.1rem + 1vw,2rem);
  color:rgba(28,28,30,.55)} /* Runde 13 (Chris): weniger Kontrast */
.xtext em{color:rgba(215,14,84,.7)}
.xtext span{position:absolute;right:0;top:0;white-space:nowrap}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.svc{
  --acc:var(--brand);
  position:relative;border-radius:var(--r-card);padding:2.5rem 2.3rem 2.3rem;
  /* Feedback-Runde Kontakt 2 (Chris, siteweit): kein Magenta-Balken mehr -
     die Umrandung selbst läuft oben in der Akzentfarbe an und nach unten
     ins Linien-Grau aus (Gradient-Border über border-box). */
  border:1px solid transparent;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
    linear-gradient(180deg,var(--acc),var(--line) 46%) border-box;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  overflow:hidden;
}
.svc::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%);
  opacity:0;transition:opacity .4s ease;
}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 52px -30px rgba(28,28,30,.3);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.svc:hover::after{opacity:1}
.svc[data-acc="violet"]{--acc:#34558f}
.svc[data-acc="amber"]{--acc:#ff7a3c}
.svc[data-acc="petrol"]{--acc:#0e6e7a}
.svc-visual{
  height:130px;border-radius:var(--r-soft);margin-bottom:1.6rem;position:relative;overflow:hidden;
  background:linear-gradient(140deg,color-mix(in srgb,var(--acc) 7%,#fff),color-mix(in srgb,var(--acc) 20%,#fff));
  display:grid;place-items:center;
}
.svc-visual .scene{position:absolute;inset:0;width:100%;height:100%;color:color-mix(in srgb,var(--acc) 52%,var(--ink))}
.svb-aa{font-family:var(--font-display);font-size:30px}
.svw-badge-t{font:600 12px var(--font-body)}
.svs-num{font:600 10px var(--font-body)}
.svs-cap{font:500 10.5px var(--font-body);letter-spacing:.08em}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.3rem}
.tag{
  font-size:.72rem;font-weight:500;padding:.3rem .65rem;border-radius:6px;
  border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);
  color:color-mix(in srgb,var(--acc) 70%,var(--ink));background:color-mix(in srgb,var(--acc) 5%,#fff);
}
.svc h3{margin:0 0 .8rem}
.svc p{color:var(--ink-soft);font-size:.98rem;margin-bottom:1.4rem}
.svc .icon{width:52px;height:52px;color:var(--acc)}
.svc a{font-size:.92rem;font-weight:500}

/* --- Beratungs-Panel: dunkler Kontrastanker ---------------------------- */
.advisory{
  margin-top:6rem;border-radius:20px;padding:3.2rem;
  display:grid;grid-template-columns:1.2fr .8fr;gap:3.5rem;align-items:center;
  background:
    linear-gradient(rgba(26,26,29,1),rgba(26,26,29,1)) padding-box,
    linear-gradient(150deg,rgba(215,14,84,.4),rgba(14,110,122,.28)) border-box;
  border:1px solid transparent;color:#f1efec;border-radius:26px;
  box-shadow:0 40px 80px -50px rgba(19,19,21,.6);position:relative;overflow:hidden;
}
.advisory::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 82% 30%,rgba(215,14,84,.14),transparent 65%);
}
.advisory>div{position:relative}
.advisory h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);margin-bottom:1.2rem}
.advisory p{color:rgba(241,239,236,.72)}
.advisory-lead{max-width:52ch}
.advisory-points{list-style:none;margin:1.9rem 0 2.1rem;padding:0;display:grid;gap:1.3rem}
.advisory-points li{display:grid;grid-template-columns:44px 1fr;gap:1rem;align-items:start}
.ap-ic{width:40px;height:40px;color:rgba(241,239,236,.75);display:block;margin-top:.2rem}
.ap-ic svg{width:100%;height:100%;overflow:visible}
.advisory-points b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.22rem;color:#f1efec;margin-bottom:.15rem;letter-spacing:.01em}
.advisory-points li span{color:rgba(241,239,236,.7);font-size:.95rem}
.advisory-close{font-family:var(--font-display);font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.45}
.advisory p.advisory-close{color:#f1efec}
.advisory .gem{background:linear-gradient(120deg,#ff6d9e,var(--brand));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;white-space:nowrap}
@media (max-width:560px){.advisory .gem{white-space:normal}}
.advisory-visual{align-self:stretch;min-height:280px;position:relative}
.advisory-visual figcaption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.7rem;color:rgba(241,239,236,.45);letter-spacing:.05em}
.advisory-visual svg{position:absolute;inset:0;width:100%;height:100%}

/* --- Cases (gepinnt horizontal) ------------------------------------------ */
.cases{position:relative;overflow:hidden}
/* Regel 13 (Feinschliff Rev 5): normierte Pin-Abstaende - oben Luft unter
   dem fixierten Header, unten endet die Sektion vor der Viewport-Kante,
   damit sichtbar bleibt, dass die Seite weitergeht. */
.cases-head{padding:clamp(7rem,12vh,8.5rem) var(--gutter) 2.5rem;max-width:var(--max);margin-inline:auto}
.cases-track{display:flex;gap:2rem;padding:0 var(--gutter) clamp(4.5rem,7vh,5.5rem);width:max-content;align-items:stretch}  /* Rev 14: Vorgriff entfallen, Peek der echten Folgesektion */
/* Regel 13 Stufe 3 (Rev 14): Vorgriff-Duplikat entfernt - die ECHTE
   Folgesektion wird an den Pin-Timelines per Scrub vorgezogen (JS). */
.case{
  width:min(80vw,540px);flex-shrink:0;border-radius:20px;padding:2.4rem 2.3rem;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(160deg,rgba(215,14,84,.45),rgba(14,110,122,.3)) border-box;
  border:1px solid transparent;display:flex;flex-direction:column;
}
.case-tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.case-note{margin-top:1.1rem;font-size:.78rem;color:var(--muted);font-style:italic}
.case-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1.3rem}
.ctag{--tacc:var(--brand);font-size:.62rem;font-weight:500;letter-spacing:.05em;padding:.14rem .5rem;border-radius:99px;border:1px solid color-mix(in srgb,var(--tacc) 40%,transparent);color:color-mix(in srgb,var(--tacc) 85%,var(--ink))}
.ctag--brand{--tacc:#D70E54}
.ctag--violet{--tacc:#34558f}
.ctag--amber{--tacc:#c85a1e}
.ctag--petrol{--tacc:#0e6e7a}
.ctag--ink{--tacc:#6b6b70}
.case-link{margin-top:1.2rem}
.case-link a{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--brand-deep)}
.case-link a svg{transition:transform .25s ease}
.case-link a:hover svg{transform:translateX(4px)}
.case-link a:hover{text-decoration:none}
.case-brand{font-family:var(--font-display);font-size:1.05rem;color:var(--brand-deep);margin-bottom:1.2rem;font-style:italic}
.case h3{margin-bottom:1.6rem;max-width:22ch;font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}
.case-visual{border-radius:var(--r-soft);height:170px;margin-bottom:.55rem;position:relative;overflow:hidden;border:1px solid var(--line)}
.case dl{display:grid;gap:.9rem;font-size:.9rem}
.case dt{font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep)}
.case dd{color:var(--ink-soft)}
.case-cta{
  justify-content:center;text-align:center;color:#f1efec;
  background:linear-gradient(var(--dark),var(--dark)) padding-box,var(--grad) border-box;
}
.case-cta .disp{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);margin-bottom:1.6rem}
.case-note{font-size:.75rem;color:var(--muted);margin-top:1rem}
.cv-1{background:linear-gradient(150deg,#faf6f1,#f2e7dc)}
.cv-2{background:linear-gradient(150deg,#f4f1fa,#e6def3)}
.cv-3{background:linear-gradient(150deg,#f7f4ef,#efe6d8)}
.cv-4{background:linear-gradient(150deg,#eef4f3,#dcebe9)}
.case-visual svg{position:absolute;inset:0;width:100%;height:100%}

/* --- Erklärfilm: schlanker Teaser + Lightbox ----------------------------------- */
.film{padding:0 0 2.5rem}
.film-teaser{
  display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:2.6rem;align-items:center;
  border-radius:20px;padding:1.4rem 2rem 1.4rem 1.4rem;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(160deg,rgba(215,14,84,.45),rgba(14,110,122,.3)) border-box;
  border:1px solid transparent;
  box-shadow:0 24px 54px -34px rgba(28,28,30,.35);
}
.film-thumb{
  position:relative;border:0;padding:0;cursor:pointer;border-radius:14px;overflow:hidden;
  aspect-ratio:16/9;background:#131315;display:block;
}
.film-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.film-thumb:hover img{transform:scale(1.04)}
.film-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(215,14,84,.92);box-shadow:0 16px 40px -14px rgba(215,14,84,.7);
  transition:transform .25s ease;
}
.film-play svg{width:22px;height:22px;margin-left:3px}
.film-thumb:hover .film-play,.film-thumb:focus-visible .film-play{transform:translate(-50%,-50%) scale(1.1)}
.film-thumb:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.film-copy h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.2rem);margin:.6rem 0 .8rem;max-width:22ch}
.film-copy p{color:var(--ink-soft);max-width:44ch;margin-bottom:1.1rem}
.film-copy .textlink{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:500}
@media (max-width:760px){.film-teaser{grid-template-columns:1fr;gap:1.4rem}}
@media (max-width:760px){
  /* kompaktere Rhythmen auf kleinen Screens */
  .services-head h2{max-width:none}
  .services-head{margin-bottom:2rem}
  .statement{padding:6.5rem 0 5.5rem}
  .services{padding:5.5rem 0 2.5rem}
  .quote{padding:6rem 0 3.5rem}
  .stats{padding:1.2rem 0 4rem} /* Chris R35 */
  .stats-band{gap:2.2rem 2rem}
  .cases-head{padding-top:3.5rem}
  .contact{padding-top:6rem}
  .tsm-head{margin-bottom:3rem}
  .tsm-list{gap:4rem}
  .case{padding:1.8rem 1.5rem}
}

.film-lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}
.film-lightbox[hidden]{display:none}
.film-lb-note{position:absolute;inset:auto 0 18%;margin:0 auto;max-width:44ch;text-align:center;
  color:rgba(241,239,236,.85);font-size:.95rem;line-height:1.6;padding:0 1rem}
.film-lb-backdrop{position:absolute;inset:0;background:rgba(12,12,14,.86);backdrop-filter:blur(6px)}
.film-lb-inner{position:relative;width:min(1100px,100%);z-index:1}
.film-lb-inner video{width:100%;display:block;border-radius:14px;background:#131315;box-shadow:0 60px 120px -50px rgba(0,0,0,.8)}
.film-lb-close{
  position:absolute;right:0;top:-52px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(19,19,21,.7);color:#f1efec;cursor:pointer;
  display:grid;place-items:center;transition:border-color .25s ease,transform .25s ease;
}
.film-lb-close svg{width:18px;height:18px}
.film-lb-close:hover{border-color:var(--brand);transform:scale(1.06)}
.film-lb-close:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* --- Zitat + Portrait ------------------------------------------------------ *//* --- Zitat + Portrait ------------------------------------------------------ */
.quote{padding:10rem 0 5rem}
.quote-grid{
  position:relative;z-index:1;
  max-width:66rem;margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:.75fr 1.5fr;gap:4rem;align-items:center;
}
.portrait{
  /* Feinschliff Rev 4: der Rahmen traegt einen ganz leichten Magenta-
     Verlauf statt der grauen Haarlinie (padding-box/border-box-Muster
     wie bei Karten und Formular). GETEILTES HEAD-Segment: nach dieser
     Aenderung wurde segments_ref neu eingefroren. */
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/4;
  background:linear-gradient(160deg,#232327,#1a1a1d 60%,rgba(215,14,84,.25) 140%) padding-box,
             linear-gradient(160deg,rgba(215,14,84,.55),rgba(255,92,147,.14) 55%,rgba(215,14,84,.42)) border-box;
  border:1px solid transparent;
}
.portrait svg{position:absolute;inset:0;width:100%;height:100%}
.portrait-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait-fade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,transparent 58%,rgba(19,19,21,.5) 100%),
  linear-gradient(115deg,rgba(19,19,21,.22),transparent 35%)}
.portrait figcaption{
  position:absolute;bottom:0;left:0;right:0;padding:1rem 1.2rem;
  font-size:.72rem;color:rgba(241,239,236,.55);letter-spacing:.05em;
}
.quote p.qt{
  font-family:var(--font-display);font-weight:var(--disp-weight);
  font-size:clamp(1.5rem,1.1rem + 2.2vw,2.9rem);line-height:1.28;
}
.quote .word{display:inline-block;margin-right:.28em}
.quote-sig{height:64px;margin-top:2.6rem;color:var(--brand)}
.quote-sig svg{height:100%;width:auto}
.quote footer{margin-top:.9rem;font-size:.9rem;color:rgba(241,239,236,.6);display:flex;align-items:center;gap:1rem}
.quote footer::before{content:"";width:3rem;height:1px;background:var(--brand)}

/* --- Stats -------------------------------------------------------------------- */
.stats{padding:2rem 0 6rem} /* Chris R35: oben/unten kleiner */
.stats-band{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:3rem 2rem;align-items:flex-end}
.stat{flex:1 1 168px;position:relative}
.stat .val{
  font-family:var(--font-display);font-size:clamp(3rem,2.2rem + 3.2vw,5.6rem);
  font-weight:var(--disp-weight);line-height:1;color:var(--ink);
  position:relative;display:inline-block;padding:1rem 1.4rem;
}
.stat .val small{font-size:.42em;color:var(--brand)}
.stat .scribble{position:absolute;inset:0;pointer-events:none;color:var(--brand);overflow:visible}
.stat .scribble svg{width:100%;height:100%;overflow:visible}
.stat p{font-size:.88rem;color:rgba(241,239,236,.62);margin-top:.7rem;max-width:26ch}
/* Runde 20b (Chris): Kennzahlen folgen dem Body-Zustand - hell NUR
   wenn der dunkle Hintergrund wirklich eingeblendet ist (die Kennzahlen
   liegen auf Startseite + Agentur in Body-Dunkelzonen). */
.stats .val{color:var(--ink);transition:color .6s ease}
body.bg-dark .stats .val{color:#f1efec}
.stat-line{display:block;height:8px;margin-top:1rem;max-width:210px;color:rgba(241,239,236,.28)}
.stat-line svg{width:100%;height:100%;overflow:visible}

/* --- Arbeitsweise: Orbit um das Symbol ----------------------------------------- */
.process{padding:5rem 0 2rem;position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.process-intro{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);margin-bottom:3.5rem;width:100%}
.process-intro h2{max-width:18ch;margin-top:1.4rem}
.process-orbit{
  width:100%; /* Flex-Item mit margin-inline:auto schrumpft sonst auf Inhaltsbreite */
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:5rem;align-items:center;
  padding-block:1rem 2rem;
}
.orbit-visual{position:relative;aspect-ratio:1/1;max-width:420px;width:100%}
.orbit-visual svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-marker text{font-family:var(--font-body);font-size:13px;font-weight:600;fill:var(--muted)}
.orbit-marker.on text{fill:#fff}
.orbit-steps{position:relative;min-height:19rem}
.pstep{position:absolute;top:0;left:0;right:0}
.pstep .pmeta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.pstep h3{margin-bottom:.9rem;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.2rem)}
.pstep p{color:var(--ink-soft);max-width:46ch}
.pdots{position:absolute;bottom:0;left:0;display:flex;gap:.5rem;margin:0}
.pdots i{width:2.4rem;height:3px;border-radius:2px;background:var(--line);transition:background .3s ease}
.pdots i.on{background:var(--brand)}

/* --- Marquee ------------------------------------------------------------------------ */
.marquee{position:relative;border-block:1px solid rgba(255,255,255,.08);background:#131315;overflow:visible}
/* Chris R38: der Sheen (wirkte weiterhin bordeaux, weil der Kreis-
   Gradient durch background-size 160%x300% zur duennen Ellipse gestreckt
   wurde) ist ersetzt - .marquee-clip traegt jetzt das ECHTE geteilte
   .cta-glow-Element + Drift-Tween, exakt wie der horizontale Scroller. */
.marquee-clip .cta-glow{z-index:0}
.marquee-track{position:relative;z-index:1}
.marquee-clip{position:relative;z-index:1;overflow:hidden;white-space:nowrap;padding:2.6rem 0}
.gull-ride{position:absolute;top:-45px;left:0;width:62px;height:48px;color:rgba(28,28,30,.5);pointer-events:none;opacity:0;z-index:1}
.shrimp{position:absolute;top:-25px;left:0;width:29px;height:22px;pointer-events:none;opacity:0;z-index:1}
.shrimp svg{width:100%;height:100%;overflow:visible}
.gull-ride svg{width:100%;height:100%;overflow:visible}
.marquee-track{display:inline-flex;gap:3.5rem;will-change:transform;animation:mq 36s linear infinite}
.marquee span{
  font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);
  color:rgba(241,239,236,.85);display:inline-flex;align-items:center;gap:3.5rem;
}
.marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex-shrink:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* --- Kundenstimmen (wiederverwendbares Modul, 1–2 Stimmen pro Instanz) ------------------- */
.tsm{padding:9rem 0 7rem;position:relative;overflow-x:clip}  /* Runde 17: Deko ragte 90px rechts raus; normalizeScroll hebelt das html-clip aus - an der Sektion einhegen */
.tsm-head{margin-bottom:3rem}
.tsm-head h2,.tsm-head .tsm-sub{max-width:52ch}
.tsm-head h2{margin:1.4rem 0 1rem}
.tsm-head .tsm-sub{color:var(--ink-soft);font-size:1.05rem}
.tsm-head{position:relative}
.tsm-nav{display:flex;justify-content:flex-end;gap:.5rem;margin:0 0 9rem}
.tsm-arrow{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:border-color .25s ease,color .25s ease,transform .15s ease}
.tsm-arrow:hover{border-color:var(--brand);color:var(--brand-deep)}
.tsm-arrow:active{transform:scale(.92)}
@media (max-width:760px){.tsm-nav{justify-content:flex-start;margin-bottom:7rem}}
.tsm-list{display:grid;gap:6rem}
.tsm-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;max-width:58rem}
.tsm-item.has-portrait{grid-template-columns:200px minmax(0,1fr);align-items:start}
.tsm-item:nth-child(even){margin-left:auto}
.tsm-mark{position:absolute;top:-5.2rem;left:-1rem;width:96px;height:74px;color:var(--brand);opacity:.85;pointer-events:none}
.tsm-item.has-portrait .tsm-mark{left:calc(200px + 1.6rem)}
.tsm-quote{font-family:var(--font-display);font-weight:340;font-size:clamp(1.35rem,1.05rem + 1.4vw,2.05rem);line-height:1.42;color:var(--ink);text-wrap:pretty}
.tsm-cite{display:flex;align-items:baseline;gap:.7rem;margin-top:1.4rem;font-style:normal}
.tsm-cite .tsm-name{font-size:.95rem;font-weight:600;letter-spacing:.02em}
.tsm-cite .tsm-city{font-size:.85rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tsm-cite::before{content:"";width:34px;height:1px;background:var(--brand);align-self:center;flex-shrink:0}
.tsm-portrait{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 48px -28px rgba(28,28,30,.35)}
.tsm-portrait img{display:block;width:100%;height:auto;filter:saturate(.92)}
.tsm-portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(28,28,30,.08)}
@media (max-width:760px){
  .tsm{padding:6rem 0 5rem}
  .tsm-item.has-portrait{grid-template-columns:1fr}
  .tsm-item.has-portrait .tsm-portrait{width:150px}
  .tsm-item.has-portrait .tsm-mark{left:-.4rem}
  .tsm-item:nth-child(even){margin-left:0}
}

/* --- Kontakt ---------------------------------------------------------------------------- */
.contact{padding:10rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start}
.contact h2{margin:1.4rem 0 1.6rem}
.contact-side p{color:var(--ink-soft);margin-bottom:1.6rem;max-width:40ch}
.contact-phone{font-family:var(--font-display);font-size:1.5rem;color:var(--ink)}
.contact-phone:hover{color:var(--brand-deep);text-decoration:none}
.contact-mail{font-size:1.02rem;color:var(--ink-soft)}
.contact-mail:hover{color:var(--brand-deep)}
.contact-en{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.6rem;font-size:.9rem;color:var(--ink-soft);max-width:34ch}
.flag-uk{width:22px;height:14px;flex-shrink:0;margin-top:.22em;border-radius:2px;box-shadow:0 0 0 1px rgba(28,28,30,.12)}
.certs{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.form .certs{border-top:0;padding-top:.3rem} /* Runde 17 (Chris): Linie über "Google-zertifiziert" im Formular raus */
.certs-cap{font-size:.72rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem;white-space:nowrap}
.certs-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.certs-row img{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;transition:transform .25s ease}
.certs-row img:nth-child(odd){transform:translateY(2px)}
.certs-row img:nth-child(even){transform:translateY(-2px)}
.certs-row img:hover{transform:translateY(-4px) scale(1.28);box-shadow:0 8px 18px -10px rgba(28,28,30,.4);position:relative;z-index:1}
.form{
  position:relative;border-radius:20px;padding:2.6rem;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(150deg,rgba(215,14,84,.5),rgba(14,110,122,.35)) border-box;
  border:1px solid transparent;
}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:.82rem;font-weight:500;letter-spacing:.04em;margin-bottom:.45rem;color:var(--ink)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea,.field select{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:.6rem 2px;transition:border-color .25s ease;border-radius:0;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--brand)}
.field .err{display:none;font-size:.8rem;color:var(--brand-deep);margin-top:.4rem}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-bottom-color:var(--brand-deep)}
.radios{display:flex;gap:1.8rem;flex-wrap:wrap;padding-top:.2rem}
.radios label,.check label{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:400;cursor:pointer;margin:0}
.radios input,.check input{accent-color:var(--brand);width:1.05rem;height:1.05rem;flex-shrink:0}
.check label{align-items:flex-start;line-height:1.5}
.check input{margin-top:.2rem}
#fenster-wrap{display:none}
#fenster-wrap.show{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-trust{margin-top:1.6rem;display:flex;flex-wrap:nowrap;gap:.5rem} /* Runde 12: eine Reihe (Desktop) */
.form-trust .fbadge{white-space:nowrap;flex:0 1 auto;min-width:0}
.form-privacy{margin:.7rem auto 0;font-size:.82rem;color:var(--ink-soft);text-align:center} /* Runde 17 (Chris): mittig über dem Button */
.fbadge{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:500;color:var(--ink-soft);padding:.38rem .75rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7)}
.fbadge svg{width:13px;height:13px;flex-shrink:0}
.form-success{display:none;text-align:center;padding:3rem 1rem}
.form-success.show{display:block}
.form-success .disp{font-size:1.6rem;margin-bottom:.8rem}
/* Möwe 42 (Chris R40): die Winke-Möwe - Standardbestätigung aller Formulare.
   Farbe via currentColor; dunkle Formulare setzen sie hell (LP-CSS). */
.fd-gull{width:96px;margin:0 auto .9rem;color:var(--ink)}
.fd-gull svg{display:block;width:100%;height:auto;overflow:visible}
.fd-gull .fdw{transform-box:fill-box;transform-origin:12% 92%;animation:fdWave 1.05s ease-in-out infinite alternate}
@keyframes fdWave{from{transform:rotate(-2deg)}to{transform:rotate(-26deg)}}
@media (prefers-reduced-motion:reduce){.fd-gull .fdw{animation:none}}
.form.sent form{display:none}

/* --- Footer mit gezeichneter Karte --------------------------------------------------------- */
.footer{position:relative;padding:6rem 0 2.5rem;overflow:hidden;background:var(--dark)}
.footer-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center;padding-bottom:3.5rem;border-bottom:1px solid var(--line-light)}
.footer .logo{color:#f1efec}
.footer-copy{font-size:.78rem;color:rgba(241,239,236,.55)}
.footer-copy a{color:rgba(241,239,236,.75)}
.footer .logo svg{height:58px;width:auto;aspect-ratio:1667.25/800.98}
.footer-claim{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:clamp(1.3rem,1.05rem + 1vw,1.8rem);line-height:1.22;color:rgba(241,239,236,.85);max-width:24ch;margin:1.6rem 0 2.2rem;text-wrap:balance}
/* Chris R36: das "eine" changiert wie die em-Woerter - heller
   Pink-Verlauf, damit auf dem dunklen Footer nichts absaeuft */
.footer-claim em{font-style:italic;background:linear-gradient(120deg,#ffd3e2,#ff5c93 30%,#d70e54 58%,#ffb0ca 92%) /* Chris R38: hell<->satt, sichtbarer Hub */;
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-right:.04em;
  animation:emShift 7.5s ease-in-out infinite alternate}
.footer-address{font-style:normal;font-size:.85rem;color:rgba(241,239,236,.55);line-height:1.9}
.footer-address a{color:rgba(241,239,236,.8)}
.map-visual{position:relative;aspect-ratio:16/8;color:rgba(241,239,236,.55)}
.map-visual svg{position:absolute;inset:0;width:100%;height:100%}
.map-label{font-family:var(--font-body);font-size:13px;letter-spacing:.06em;fill:rgba(241,239,236,.85)}
.map-sub{font-family:var(--font-body);font-size:11px;fill:rgba(241,239,236,.5)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:2rem;font-size:.8rem;color:rgba(241,239,236,.5)}
.footer-bottom a{color:rgba(241,239,236,.75)}
.credit .heart{color:var(--brand)}
.credit a{color:inherit}

.a11y-btn{
  position:fixed;left:18px;bottom:18px;z-index:80;width:52px;height:52px;border-radius:50%;
  color:#fff;border:1px solid transparent;cursor:pointer;
  background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;
  display:grid;place-items:center;box-shadow:0 12px 32px -12px rgba(19,19,21,.55);
  transition:transform .25s ease;
}
.a11y-btn:hover{transform:scale(1.07)}
.a11y-btn svg{width:26px;height:26px}
/* Panel bewusst komplett in px: bleibt bei aktivierter Schriftvergrößerung (html font-size) konstant lesbar und bedienbar */
.a11y-panel{
  position:fixed;left:18px;bottom:84px;z-index:80;width:min(350px,calc(100vw - 36px));
  max-height:min(560px,calc(100vh - 112px));overflow-y:auto;
  border-radius:18px;padding:16px 20px 13px;
  font-size:14px;line-height:1.5;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(150deg,rgba(215,14,84,.4),rgba(14,110,122,.28)) border-box;
  border:1px solid transparent;
  box-shadow:0 30px 70px -28px rgba(19,19,21,.45);display:none;
}
.a11y-panel.open{display:block}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:9px}
.a11y-head h2{font-size:16px;font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.3}
.a11y-reset{font-size:11.5px;font-weight:500;color:var(--muted);background:none;border:1px solid var(--line);border-radius:7px;padding:5px 10px;cursor:pointer}
.a11y-reset:hover{color:var(--brand-deep);border-color:var(--brand-deep)}
.a11y-group{padding:9px 0;border-top:1px solid var(--line)}
.a11y-cap{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:3px 0;font-size:14px;color:var(--ink)}
.a11y-row>label:first-child{cursor:pointer;flex:1}
.sw{position:relative;display:inline-block;width:42px;height:23px;flex:0 0 auto;cursor:pointer}
.sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:1}
.sw i{position:absolute;inset:0;border-radius:999px;background:rgba(28,28,30,.18);transition:background .25s ease;pointer-events:none}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .25s ease}
.sw input:checked + i{background:var(--brand)}
.sw input:checked + i::after{transform:translateX(19px)}
.sw input:focus-visible + i{outline:2px solid var(--brand);outline-offset:2px}
.a11y-range{display:grid;grid-template-columns:1fr auto;gap:1px 14px;align-items:center;padding:3px 0;font-size:14px}
.a11y-range label{grid-column:1 / -1;cursor:pointer}
.a11y-range output{font-size:12.5px;font-weight:600;color:var(--brand-deep);min-width:42px;text-align:right}
.a11y-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:0}
.a11y-range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(28,28,30,.16)}
.a11y-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brand);margin-top:-6px;border:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.a11y-range input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(28,28,30,.16)}
.a11y-range input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand);border:none}
.a11y-range input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.a11y-select{width:100%;font-family:var(--font-body);font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);margin-top:2px}
.a11y-note{font-size:11px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
body.a11y-contrast{--ink:#000;--ink-soft:#17171a;--muted:#3f3d3a;--line:rgba(0,0,0,.45);--brand-deep:#9c0a3e}
body.a11y-contrast .deco{display:none}
body.a11y-contrast .sky-front{color:rgba(0,0,0,.3)}
body.a11y-gray .netfx{filter:grayscale(1)}
body.a11y-contrast .badge{background:#fff}
/* Graustufen gezielt pro Sektion – ein Filter auf main würde position:fixed der gepinnten Sektionen brechen */
body.a11y-gray :is(.hero,.statement,.services,.film,.quote,.stats,.contact,.marquee,.site-head,.footer,.a11y-btn,.tsm,.nav-overlay,.subhero,.subsec,.model,.mbh,.abgr,.band,.honest,.cta-band,.faq){filter:grayscale(1)}
body.a11y-gray .cases>*,body.a11y-gray .process>*{filter:grayscale(1)}
body.cb-rg{--brand:#0f62d6;--brand-deep:#0b4da8;--violet:#0e6e7a;--amber:#4f88ff}
body.cb-by{--violet:#b3123f;--petrol:#8a1538;--amber:#e8590c}
body.a11y-links a{text-decoration:underline;text-underline-offset:3px}
body.a11y-motion .marquee-track{animation:none}
body{line-height:var(--lh,1.65)}
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:100;padding:.7rem 1.2rem;border-radius:var(--r-btn);
  background:var(--ink);color:#fff;font-size:.85rem;transition:top .2s ease;
}
.skip-link:focus{top:1rem;text-decoration:none}
noscript .js-note{display:block;font-size:.8rem;color:var(--muted);padding:.5rem var(--gutter)}

@media (max-width:1000px){
  .logo svg{height:54px}
  .site-head.scrolled .logo svg{height:46px}
  .main-nav{display:none}
  .burger{display:block}
}
@media (max-width:900px){
  .statement-cols,.svc-grid,.contact-grid,.advisory,.quote-grid,.footer-grid{grid-template-columns:1fr}
  .ana-row{grid-template-columns:1fr;gap:.8rem}
  .ana-row .disp{white-space:normal}
  .trio{grid-template-columns:1fr;gap:3.5rem}
  .trio-line{display:none}
  .process{min-height:0;display:block}
  .process-orbit{grid-template-columns:1fr;gap:3rem}
  .orbit-visual{margin-inline:auto}
  .orbit-steps{min-height:0}
  .pstep{position:relative;margin-bottom:2.6rem}
  .pdots{display:none}
  .portrait{max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .marquee-track{animation:none}
}

/* ============================================================
   Unterseiten (Bundle 1): Subhero, Kachel-Raster, Beratung
   ============================================================ */
.subhero{padding:11.5rem 0 5.5rem;position:relative;overflow:hidden}
.subhero h1{font-size:clamp(2.5rem,1.5rem + 4vw,5.2rem);max-width:22ch}
.subhero .eyebrow{margin-bottom:1.5rem}
.subhero .lead{margin-top:1.9rem;max-width:58ch}
.subhero .btn{margin-top:2.4rem}
.subhero-line{width:min(260px,42vw);height:26px;margin-top:2.8rem;color:var(--brand)}
.subhero-line svg{width:100%;height:100%;overflow:visible}
@media (max-width:760px){.subhero{padding:9rem 0 4rem}}

/* Möwe 8: fliegt mit der Projektrolle über den Seitenkopf */
.gull-plan{position:absolute;top:14%;left:0;width:150px;height:70px;color:var(--ink);opacity:.8;pointer-events:none;z-index:0;will-change:transform}

/* Kachel-Raster der Projekte-Übersicht (statt gepinntem Horizontal-Track) */
.cases-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;max-width:var(--max);margin-inline:auto;padding:1rem var(--gutter) 8rem}
.cases-grid .case{width:auto}
.case-teaser{color:var(--ink-soft);font-size:.95rem}
.cases-grid .case-link{margin-top:auto;padding-top:1.5rem}
@media (max-width:900px){.cases-grid{grid-template-columns:1fr}}
.cv-5{background:linear-gradient(150deg,#f2f6ee,#e3ecd8)}
.cv-6{background:linear-gradient(150deg,#f0f3f7,#dde6f0)}
.cv-7{background:linear-gradient(150deg,#f7f1f3,#efdfe6)}
.cv-8{background:linear-gradient(150deg,#f1f3f6,#e0e4ec)}
.cv-9{background:linear-gradient(150deg,#f8f4ec,#efe4d2)} /* R30: Metzler (Farbenhandel, warmes Ocker) */

/* Marketing-Beratung: bewusst die nüchternste Seite des Auftritts */
.subsec{padding:7.5rem 0;position:relative;overflow:hidden}
.prose{max-width:62ch;color:var(--ink-soft)}
.prose p+p{margin-top:1.15rem}
.subsec h2{max-width:24ch;margin-bottom:2rem}

/* Ausgangslage: große scrollgebundene Grafik neben dem Text */
.og-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center;margin-top:3.2rem}
.og-fig{position:relative;min-height:460px}
.og-fig svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:860px){.og-grid{grid-template-columns:1fr}.og-fig{min-height:340px;order:2}}

/* Leistungsumfang: gepinnter Horizontal-Scroller */
.mbh{position:relative;overflow:hidden}
.mbh-head{padding:clamp(7rem,12vh,8.5rem) var(--gutter) 2.5rem;max-width:var(--max);margin-inline:auto;position:relative}  /* Regel 13 (Rev 5) */
.mbh-track{display:flex;gap:2rem;padding:0 var(--gutter) clamp(6.5rem,9vh,7.5rem);width:max-content;align-items:stretch}  /* Rev 14: Vorgriff entfallen; Watschel-Streifen (ws/md) behaelt Raum */
.mb-card{
  width:min(78vw,500px);flex-shrink:0;border-radius:20px;padding:2.4rem 2.2rem;
  background:var(--paper);border:1px solid var(--line);position:relative;
  display:flex;flex-direction:column;
}
.mb-card .num{font-family:var(--font-display);font-style:italic;font-size:2.7rem;color:rgba(215,14,84,.26);line-height:1}
.mb-card h3{margin:1rem 0 1rem;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);max-width:28ch}  /* Feinschliff Rev 3: Karte 01 zweizeilig statt dreizeilig */
.mb-card p{color:var(--ink-soft);font-size:.95rem}
.mb-ico{position:absolute;top:2.2rem;right:2rem;width:72px;height:54px;color:var(--ink);opacity:.85}
@media (max-width:560px){.mb-ico{width:58px;height:44px;right:1.4rem}}

/* Möwe 12: watschelt als Fortschrittsanzeige unter den Karten mit */
.mbh-base{position:absolute;left:0;right:0;bottom:1.8rem;height:74px;pointer-events:none}
.mbh-baseline{position:absolute;left:var(--gutter);right:var(--gutter);bottom:8px;height:6px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 6' preserveAspectRatio='none'><path d='M0 3.4 C22 2.2 44 4.4 66 3.2 C92 1.8 118 4.6 144 3.1 C168 1.9 196 4.2 220 3.3' fill='none' stroke='rgba(28,28,30,0.2)' stroke-width='1.5' stroke-linecap='round'/></svg>") repeat-x;background-size:220px 6px} /* Chris R39: handgezeichnete hellgraue Linie statt weissem Strich */
.gull-walk{position:absolute;bottom:10px;left:var(--gutter);width:64px;height:60px;color:var(--ink);opacity:.9;will-change:transform}
@media (max-width:700px){.mbh-base{display:none}}

/* Das Modell: der eine dunkle Moment der Seite */
.model{background:var(--dark);padding:8.5rem 0;position:relative;overflow:hidden}
.model h2{margin-bottom:3.2rem}
.model .prose{color:rgba(241,239,236,.72)}
.model-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:5rem}
.model-card{border:1px solid var(--line-light);border-radius:var(--r-card);padding:1.9rem 1.7rem;background:rgba(255,255,255,.02);will-change:transform,opacity}
.model-card h3{font-size:1.08rem;margin-bottom:.65rem;color:#f1efec}
.model-card p{font-size:.93rem;color:rgba(241,239,236,.68)}
.mv{width:74px;height:56px;color:rgba(241,239,236,.8);margin-bottom:1.2rem}
@media (max-width:900px){.model-cards{grid-template-columns:1fr}}
.gull-wheel{position:absolute;right:clamp(1rem,7vw,6rem);bottom:-4px;width:160px;height:128px;color:rgba(241,239,236,.72);pointer-events:none}
@media (max-width:700px){.gull-wheel{display:none}}

/* Kundenstimmen: Möwe 13 lauscht auf dem Anführungszeichen */
.tsm-item{position:relative}
.gull-listen{position:absolute;top:-46px;left:20px;width:56px;height:50px;color:var(--ink);opacity:.85;pointer-events:none}


/* Schaufenster: frei schwebende Referenzen (Projekte) – nutzt die volle Breite */
.flt{position:relative;padding:8rem 0 1rem;overflow:hidden}
.flt-stage{position:relative;height:1300px;  /* Rev 11: enger */margin-top:4.5rem;padding-inline:clamp(1rem,3vw,3.5rem)}
@media (max-width:900px){.flt-stage{height:1750px}}

/* Möwe 14: fliegt Slalom um die Referenzen */
.gull-slalom{position:absolute;top:0;left:0;width:112px;height:66px;color:var(--ink);opacity:.8;pointer-events:none;z-index:24;will-change:transform}
@media (prefers-reduced-motion: reduce){.gull-slalom{display:none}}

/* Lightbox für Referenz-Objekte (Muster analog zur Video-Lightbox der Startseite) */
.flb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.4rem}
.flb[hidden]{display:none}
.flb-back{position:absolute;inset:0;background:rgba(19,19,21,.74);cursor:pointer}
.flb-panel{position:relative;background:#fff;border-radius:16px;padding:2rem 2rem 1.4rem;
  width:min(720px,94vw);max-height:88vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35);margin:0}
.flb-panel svg{display:block;width:100%;height:auto}
.flb-cap{margin-top:1rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.flb-close{position:absolute;top:.7rem;right:.7rem;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer}
.flb-close:hover{border-color:#D70E54;color:#D70E54}
.flb-close:focus-visible{outline:2px solid #D70E54;outline-offset:2px}
.flt-par{position:absolute;will-change:transform}
.flt-in{will-change:transform,opacity}
.flt-obj{position:relative;display:block;margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 28px rgba(28,28,30,.09);padding:.9rem .9rem .7rem;cursor:pointer;
  transition:box-shadow .35s ease;will-change:transform;outline-offset:4px}
.flt-obj:focus-visible{outline:2px solid #D70E54}
.flt-obj.is-big{box-shadow:0 26px 64px rgba(28,28,30,.2)}
.flt-obj svg{display:block;width:100%;height:auto}
.flt-obj figcaption{margin-top:.6rem;font-size:.62rem;letter-spacing:.06em;line-height:1.5;text-transform:uppercase;color:var(--ink-soft);overflow-wrap:anywhere}
.flt-note{font-family:var(--font-display);font-style:italic;color:#D70E54;
  font-size:clamp(1.15rem,1rem + .9vw,1.55rem);max-width:12ch;line-height:1.3;transform:rotate(-3deg);
  position:relative;padding:.3em .5em}  /* Rev 11: Raum fuer den Kreis */
/* Rev 11 (Chris): USP-Notizen mit locker handgezeichnetem Kreis statt
   Unterstrich - Skizzen-Ellipse, zeichnet sich scrollgebunden. */
.flt-note .note-ring{position:absolute;inset:-14% -9%;fill:none;stroke:#D70E54;
  stroke-width:1.7;stroke-linecap:round;pointer-events:none}
/* Rev 13: ruhiges Raster auch MOBIL - die absolute Buehne liess die
   vergroesserten Referenzen auf schmalen Breiten uebereinanderkleben */
@media (prefers-reduced-motion: reduce),(max-width:700px){
  .flt-stage{height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2.2rem;align-items:start}
  .flt-par{position:static!important;transform:none!important;width:auto!important}
  .flt-in{transform:none!important;opacity:1!important}
}
/* Rev 14 (Chris): Referenzen mobil kleiner + Masonry-Anordnung -
   zweispaltige CSS-Columns statt einspaltigem Grid */
@media (max-width:700px){
  .flt-stage{display:block;columns:2;column-gap:1rem}
  .flt-par{break-inside:avoid;margin:0 0 1rem}
  .flt-obj figcaption{font-size:.56rem;margin-top:.4rem}
  .flt-note{font-size:1.02rem;max-width:none}
}



/* Abgrenzung: heller Abschluss – die Beratungs-Karte ist der eine dunkle Akzent */
.abgr{padding:8.5rem 0 3.5rem;position:relative;overflow:hidden}
.abgr h2{max-width:24ch;margin-bottom:2rem}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:3.4rem}
.split-card{border-radius:var(--r-card);padding:2.3rem 2.1rem;border:1px solid var(--line);background:var(--paper);overflow:hidden}
.split-card h3{margin-bottom:.95rem;font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}
.split-card p{color:var(--ink-soft);font-size:.96rem}
.split-card.is-accent{background:linear-gradient(var(--dark),var(--dark)) padding-box,var(--grad) border-box;border:1px solid transparent;overflow:hidden} /* Chris R37: mb-cta-Anatomie - Magenta statt Petrol, Glow bleibt in der Karte */
.split-card.is-accent h3{color:#f1efec}
.split-card.is-accent p{color:rgba(241,239,236,.76)}
.split-visual{height:210px;position:relative;margin:0 0 1.7rem}
.split-visual svg{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.abgr-close{margin:4.6rem auto 0;max-width:36ch;text-align:center;
  font-size:clamp(1.15rem,1rem + .9vw,1.6rem);line-height:1.6;color:var(--ink)}
.abgr-close::before{content:"";display:block;width:44px;height:2px;background:#D70E54;margin:0 auto 1.7rem;border-radius:2px}

/* Kundenstimmen: Herkunftsnachweis (V5.1) */
.tsm-src{margin-top:4rem;font-size:.78rem;color:var(--muted)}

/* Aktiver Menüpunkt (Unterseiten) */
.main-nav a[aria-current="page"]{color:var(--brand-deep)}
.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav-overlay a[aria-current="page"]{color:var(--brand)}

/* ============================================================
   Subnavigation "Leistungen": Desktop-Flyout + Overlay-Gruppe
   (Disclosure-Muster; BFSG: Tastatur, Escape, aria-expanded)
   ============================================================ */
.nav-item{position:relative}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:500;color:var(--ink);position:relative;padding:.3rem 0;
}
.nav-drop-btn::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{color:var(--brand-deep)}
.nav-drop-btn:hover::after,.nav-drop-btn[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-drop-btn.is-section{color:var(--brand-deep)}
.nav-drop-btn.is-section::after{transform:scaleX(1)}
.nav-drop-btn .chev{width:10px;height:6px;flex-shrink:0;transition:transform .25s ease}
.nav-drop-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.subnav{
  position:absolute;top:calc(100% + .85rem);left:50%;min-width:236px;padding:.55rem;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(28,28,30,.13);z-index:70;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.subnav::before{content:"";position:absolute;left:0;right:0;top:-.9rem;height:.9rem}
.subnav.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s ease,transform .22s ease}
.main-nav .subnav a{display:block;padding:.58rem .9rem;border-radius:9px;white-space:nowrap}
.main-nav .subnav a::after{content:none}
.main-nav .subnav a:hover{background:rgba(215,14,84,.06);color:var(--brand-deep)}
.main-nav .subnav a[aria-current="page"]{background:rgba(215,14,84,.06)}
.main-nav .subnav a[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:2px;
  border-radius:2px;background:var(--brand);
}
.ov-group{border-bottom:1px solid var(--line-light)}
.ov-label{
  font-family:var(--font-display);font-size:clamp(2rem,8vw,3.4rem);
  color:rgba(241,239,236,.55);padding:.5rem 0 .2rem;margin:0;
}
.nav-overlay .ov-sub{display:flex;flex-direction:column;padding:0 0 .9rem 1.3rem}
.nav-overlay .ov-sub a{
  font-size:clamp(1.3rem,4.5vw,1.8rem);padding:.3rem 0;border-bottom:0;
  color:rgba(241,239,236,.88);
}
@media (prefers-reduced-motion:reduce){
  .subnav,.subnav.open,.nav-drop-btn::after,.nav-drop-btn .chev{transition:none}
}

/* Haus-Symbol: Startseiten-Link am Nav-Anfang */
.nav-home{display:inline-flex;align-items:center;padding:.3rem 0}
.main-nav .nav-home{color:var(--ink-soft)}  /* Runde 22: einen Tick heller -
  .main-nav a (0-1-1) schlug die klassenreine Regel, daher hochspezifiziert */
.nav-home svg{width:17px;height:17px;
  transform:translateY(-1.5px)}  /* Runde 22: optische Korrektur - Messung war
  exakt mittig, die Glyphe füllt die Box aber unten stärker */
.nav-home::after{content:none}
.nav-home:hover{color:var(--brand-deep)}
.main-nav .nav-home[aria-current="page"]{color:var(--brand-deep)}  /* aktiv auf der Startseite */
/* Overlay geoeffnet: Header ueber das Overlay heben, nur das Schliessen-X sichtbar.
   Grund: .site-head bildet einen eigenen Stacking-Context (z 60) unter dem
   Overlay (z 65) - der Burger war dadurch verdeckt. */
body.nav-open .site-head{z-index:70;background:transparent;box-shadow:none;backdrop-filter:none}
body.nav-open .site-head .logo,body.nav-open .head-phone,body.nav-open .head-cta{visibility:hidden}
body.nav-open .burger{border-color:rgba(241,239,236,.35)}

/* ============================================================
   Bundle 3 gemeinsam (aus Bundle 2 übernommen, Rev-9-Stand)
   ============================================================ */
/* Subhero mit Leitmotiv-Szene */
.subhero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.lm-scene{position:relative;min-height:340px;color:#4c4a47}
.lm-scene svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@media (max-width:900px){.subhero-grid{grid-template-columns:1fr}.lm-scene{min-height:260px;order:2}}

/* getönte Flächen: neutrales Hellgrau (Regel 9) */
.tint-b3{background:#f1f1f0}

/* Pin-Karten: Kopfzeile (Regel 5), Szenen-Anatomie (Regel 3) */
.mbh .mb-card .svc-visual{margin:1.2rem 0 0;background:linear-gradient(140deg,#fbfbfa,#e9e9e8)}
.mbh .mb-card .scene{color:#3c3a38}
.mb-card .card-head{display:flex;align-items:baseline;gap:.9rem;margin:1.7rem 0 .95rem}
.mb-card .card-head .num{font-size:1.45rem;color:var(--brand-deep);line-height:1;flex-shrink:0}
.mb-card .card-head h3{margin:0}

/* Hingucker (Regel 4): Aufleuchten beim Eintreffen + Hover nur Rahmen/Schatten */
.tint-b3 .mb-card{transition:box-shadow .3s ease,border-color .3s ease}
.tint-b3 .mb-card:hover{border-color:rgba(215,14,84,.5);box-shadow:0 22px 46px -26px rgba(28,28,30,.35)}
.card-flash{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  border:1px solid rgba(215,14,84,.65);box-shadow:0 24px 48px -20px rgba(215,14,84,.35)}

/* CTA-Karte am Track-Ende (Regel 6) mit wanderndem Magenta-Schein */
.mb-cta{justify-content:center;align-items:center;text-align:center;overflow:hidden;
  color:#f1efec;background:linear-gradient(var(--dark),var(--dark)) padding-box,var(--grad) border-box;
  border:1px solid transparent}
.mb-cta .disp{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);margin-bottom:1.7rem;color:#f1efec;max-width:15ch}
.mb-cta .disp,.mb-cta .btn{position:relative;z-index:1}
.cta-glow{position:absolute;inset:-45%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 35% 35%,rgba(215,14,84,.62),rgba(215,14,84,.18) 46%,transparent 66%)}  /* Feedback Bundle 6 F2 (Chris): kräftiger Richtung Brand-Magenta */

/* CTA-Band (Regel 7): schlank, flach, volle Breite, Gradient-Haarlinie oben */
.cta-band{margin:5.5rem 0 3rem;background:var(--dark);color:#f1efec;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad)}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;
  padding:2rem var(--gutter);max-width:var(--max);margin-inline:auto}
.cta-row .disp{font-size:clamp(1.25rem,1.05rem + 1vw,1.8rem);color:#f1efec;margin:0}
@media (max-width:640px){.cta-row{justify-content:flex-start;padding:1.7rem var(--gutter)}}

/* Zertifikate: Transform-Transition des Showcase neutralisieren – sie
   verschleppt die GSAP-Inline-Transforms (Schwebe-Segment schreibt jeden
   Frame), der Hover-Zoom käme nie am Zielwert an */
.certs-row img{transition:box-shadow .25s ease}

/* Ruhiges Schluss-Statement */
.honest{padding:8rem 0 3rem;position:relative}
.honest .abgr-close{max-width:44ch}

/* FAQ-Baustein v2 (Feinschliff Rev 1, GETEILTER Baustein: seo-ki +
   websites-shops; Schritt 4: Wiederverwendung auf der Kontaktseite,
   FAQPage-Schema). Volle Inhaltsbreite, Hairline-Raster mit Zeilen-
   nummern, großzügige Frage-Zeilen (Fraunces), Magenta-Indikator am
   offenen Antwort-Zustand. Einspaltig bleibt gesetzt (Rev-6-Entschei-
   dung). A11y unverändert: Button mit aria-expanded, Antworten als
   Regionen, ohne JS sind alle Antworten offen lesbar. */
.faq{padding:7.5rem 0 3.5rem;position:relative;overflow-x:clip;overflow-y:visible} /* Chris R40: overflow:hidden schnitt die fliegenden FAQ-Moewen oben ab (top negativ); X bleibt eingehegt */
.faq h2{max-width:24ch}
.faq-list{margin-top:3.4rem;border-top:1px solid var(--line);position:relative}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:grid;grid-template-columns:3.4rem minmax(0,1fr) 42px;align-items:center;gap:1.2rem;
  padding:1.9rem .2rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:var(--disp-weight);letter-spacing:var(--disp-tracking);
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);color:var(--ink);transition:color .25s ease}
.faq-q:hover{color:var(--brand-deep)}
.faq-num{font-family:Inter,sans-serif;font-size:.75rem;font-weight:500;letter-spacing:.14em;color:var(--brand-deep)}
.faq-q .faq-ico{flex-shrink:0;justify-self:end;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--brand-deep);transition:transform .3s ease,background .25s ease,color .25s ease,border-color .25s ease}
.faq-q[aria-expanded="true"] .faq-ico{transform:rotate(45deg);background:var(--brand);border-color:var(--brand);color:#fff}
.faq-a{overflow:hidden}
/* Feinschliff Rev 2: der Abstand nach unten liegt als margin AUSSERHALB
   der Linie – die Magenta-Linie endet damit bündig mit dem Text
   (.faq-a hat overflow:hidden, der margin bleibt eingeschlossen). */
.faq-a>p{margin:0 0 1.9rem calc(3.4rem + 1.2rem);padding:.2rem 0 0 1.4rem;
  border-left:2px solid rgba(215,14,84,.55);color:var(--ink-soft);max-width:66ch}
.js .faq-a[data-closed]{display:none}
@media (max-width:700px){
  .faq-q{grid-template-columns:minmax(0,1fr) 38px;gap:1rem;font-size:clamp(1.12rem,1rem + .8vw,1.4rem);padding:1.55rem .2rem}
  .faq-num{display:none}
  .faq-q .faq-ico{width:38px;height:38px}
  .faq-a>p{margin-left:0}
}
/* Möwen 24 & 25 (Feinschliff Rev 2, GETEILT mit dem FAQ v2): das
   FAQ-Pärchen im Überflug – Nr. 24 voran (Fragezeichen), Nr. 25
   hinterher (Ausrufezeichen). Ersetzt die sitzende Möwe 18 (Regel:
   keine reinen Sitz-Möwen). Ohne JS bleiben beide unsichtbar
   (opacity 0), erst der Flug setzt die Deckkraft. */
.faq-gulls{position:absolute;inset:0;pointer-events:none}
.faq-gull{position:absolute;top:34px;left:0;width:96px;color:var(--ink);opacity:0}
.faq-gull.fg-e{width:82px}
.faq-gull svg{display:block;width:100%;height:auto;overflow:visible}
.fg-mark{font:600 26px/1 var(--font-display);fill:var(--brand)}
/* Feedback Mobil-Runde: Pärchen fliegt mobil höher und kleiner - die
   Wissende kreuzte sonst die H2 (y-Versatz zusätzlich im Flug-JS responsiv) */
@media (max-width:700px){.faq-gull{width:56px;top:4px}.faq-gull.fg-e{width:48px}}

/* ============================================================
   Artikel-/Text-Template (Schritt 4): geteilter Baustein für den
   Insights-Artikel UND die textlastigen Seiten (Impressum,
   Datenschutz, Barrierefreiheit). Quelle der Wahrheit hier;
   Insights-Spezifisches (art-hero, art-author, art-gulls, art-chip)
   bleibt im Seiten-CSS des Insights-Bundles.
   ============================================================ */
.art{padding-block:11rem 3rem}
.backlink{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;
  color:var(--brand-deep);text-decoration:none;margin-bottom:2.2rem}
.backlink:hover{text-decoration:underline}
.art h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem);max-width:24ch;margin-top:1.2rem}
.art-meta{margin-top:1.4rem;font-size:.85rem;color:var(--ink-soft);display:flex;gap:.6rem;flex-wrap:wrap}
.art-meta span::after{content:"·";margin-left:.6rem;opacity:.5}
.art-meta span:last-child::after{content:""}
.art .teaser{margin-top:1.9rem;max-width:58ch;font-size:1.1rem;color:var(--ink-soft)}
.art-body{max-width:62ch;margin-top:3rem;color:var(--ink-soft)}
.art-body h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.8rem);color:var(--ink);
  max-width:28ch;margin:2.8rem 0 1rem}
.art-body p+p{margin-top:1.1rem}
.art-body ul{margin:1.1rem 0;padding-left:1.2rem}
.art-body li{margin:.5rem 0}
.art-body strong{color:var(--ink)}
.art{position:relative}
/* Abgrenzung Beitrag -> Kontakt (Feedback-Runde Legal 2, Chris): KEIN
   Verlauf mehr - ab hier steht der Rest der Seite (inkl. Kontaktblock)
   auf ruhigem Hellgrau. Gilt genau auf der Text-Vorlage (Artikel +
   Legal), weil nur dort die Trenn-Fläche existiert. */
.art-contact-sep{height:3.5rem;margin-top:2.2rem;background:#f7f6f4}
.art-contact-sep + .contact{background:#f7f6f4}
@media (min-width:1001px){.art-contact-sep + .contact{padding-top:5rem}} /* Runde 17 (Chris): 10rem farbige Leere; nur Desktop - Tablet/Phone regelt die Mobile-Ebene (4rem) */
.art-note{border-left:2px solid var(--brand);background:#f7f6f4;border-radius:0 10px 10px 0;
  padding:1rem 1.3rem;margin:1.8rem 0}
/* Rechte Animationszone der Text-Vorlage (Artikel: Ballon-Möwen 30;
   Legal-Seiten: Möwen 34-36). Innenleben je Seite im Seiten-CSS. */
.art-gulls{position:absolute;top:110px;right:0;width:260px;height:calc(100% - 200px);pointer-events:none;color:var(--ink);z-index:1}
.art-gulls svg{width:100%;height:auto;overflow:visible}
@media (max-width:1280px){.art-gulls{display:none}}

/* Runde 18 (Chris, iPad): Einblicke im Tablet-Band als ruhiges, versetzt
   gestaffeltes 3er-Raster mit height:auto - die absolute Bühne erzeugte
   fünf starre Reihen und viel Leerraum bis zum Kontaktblock. */
@media (min-width:701px) and (max-width:1000px){
  .flt-stage{height:auto;display:grid;grid-template-columns:repeat(3,1fr);
    gap:2.6rem 1.6rem;align-items:start}
  .flt-par{position:static!important;transform:none!important;width:auto!important}
  .flt-in{transform:none!important;opacity:1!important}
  .flt-par:nth-child(3n+2){margin-top:2.6rem}
  .flt-par:nth-child(3n){margin-top:1.1rem}
}

/* Runde 19b (Chris): Übergangs-Sicherheit der Dunkel-Momente - solange
   der Seitenhintergrund dunkel ist (body.bg-dark), werden Überschriften,
   Eyebrows und Leads hell, die DIREKT auf dem Seitenhintergrund liegen;
   andersherum beim Zurückblenden. Elemente mit eigener Fläche (Karten,
   Bänder, Formular, Kontaktblock, Artikel) bleiben unangetastet. */
h1,h2,h3,.eyebrow,.lead{transition:color .6s ease}
.stat .val{font-variant-numeric:tabular-nums}  /* Runde 19b: kein Breiten-Mikroruckeln beim Hochzählen */
body.bg-dark :is(h1,h2,h3,.eyebrow,.lead):not(:is(.svc,.case,.mb-card,
  .split-card,.form,.contact,.band,[class*="tint-"],.flb,.art,.faq-item,
  .advisory,.og-grid,.gp-card) *){color:#f1efec} /* Chris R48: gp-card ist eigene Flaeche (LP5-Dunkelpassage) */

/* Runde 20b (Chris): Hell-auf-Hell-Schutz, Rückrichtung. Blöcke, die für
   die Body-Dunkelmomente gestaltet sind (Zitat Startseite, Inhaber-Block
   Agentur, Kennzahlen-Texte), zeigen ihre helle Farbe erst, wenn der
   dunkle Hintergrund eingeblendet ist - vorher Standard-Tinte. Das Zitat
   wird ab dem ersten Trigger vom bestehenden Farb-Tween (Inline-Stil)
   weitergeführt; diese Regeln sichern den Zustand DAVOR ab. */
.quote .qt,.quote footer,.quote figcaption,.quote .quote-sig,
.stats .stat p,.stats .stat{transition:color .6s ease}
/* !important: setzt sich auch gegen den Inline-Farbtween durch, wenn beim
   schnellen Hochscrollen der .8s-Tween dem Hintergrund hinterherläuft -
   im hellen Zustand ist NIE heller Text erlaubt (Chris-Regel). */
body:not(.bg-dark) .quote :is(.qt,footer,figcaption){color:var(--ink)!important}
body:not(.bg-dark) .quote .quote-sig{color:var(--ink)!important}
body:not(.bg-dark) .stats :is(.stat,.stat p){color:var(--ink-soft)}
/* Aktivfarbe der Overlay-Unterpunkte: die Seitenregel .nav-overlay .ov-sub a
   war gleichspezifisch zur Aktivregel und gewann per Kaskade (Runde 20b). */
.nav-overlay .ov-sub a[aria-current="page"]{color:var(--brand)}

/* Kundenlogo-Band (Runde 21): ruhiger Endloslauf, Graustufen mit
   Farb-Hover, weiche Kantenmaske; Hover pausiert; reduced-motion =
   statisch umgebrochen. Der Keyframe fährt exakt eine Set-Breite. */
.logoband{padding:4.5rem 0 4rem;overflow:hidden}
.lb-cap{text-align:center;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 var(--gutter) 2.4rem}
.lb-track{display:flex;width:max-content;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  /* Runde 21c: Lauf per rAF-Ticker (greifbar), keine Hover-Pause mehr */
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lb-track.is-drag{cursor:grabbing}
.lb-set{display:flex;align-items:center;gap:clamp(2.6rem,6vw,5.2rem);
  padding-right:clamp(2.6rem,6vw,5.2rem)}
.lb-set img{height:44px;width:auto;max-width:200px;object-fit:contain;
  /* Runde 22c (Chris): kontrastreicher - Deckkraft .62 -> .82 + contrast(1.12) */
  filter:grayscale(1) contrast(1.12);opacity:.82;transition:filter .35s ease,opacity .35s ease}
.lb-set img:hover{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .lb-track{width:auto;flex-wrap:wrap;justify-content:center;
    -webkit-mask-image:none;mask-image:none}
  .lb-track .lb-set[aria-hidden]{display:none}
}