/* =========================================================================
   ping design – Stylesheet
   Marke: 3301 Designagentur · Umsetzung: Web
   Farben: Blauschwarz #00555a · Lachs #f2917b · Blau #bedfec · Weiß #fff
   ========================================================================= */

/* ── Fonts (self-hosted, DSGVO-konform) ─────────────────────────────────── */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/poppins-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/poppins-500-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/poppins-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/poppins-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:700;font-display:swap;
  src:url('../fonts/poppins-700i.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:700;font-display:swap;
  src:url('../fonts/poppins-700i-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Optionale Display-Schrift (Ciclo-Display-Ersatz). Wird NUR geladen,
   wenn --font-display unten auf 'Playfair Display' gesetzt wird. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/playfair-900.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:900;font-display:swap;
  src:url('../fonts/playfair-900i.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}

/* ── Design-Tokens ──────────────────────────────────────────────────────── */
:root{
  --c-dark:#00545a;
  --c-coral:#ff8d73;
  --c-coral-2:#fb7c61;
  --c-coral-light:#ffcdbe;
  --c-blue:#c1dfeb;
  --c-blue-deep:#9fd0e2;
  --c-white:#ffffff;
  --c-ink:#00373b;

  /* Futura PT (Adobe Fonts, Kit lsn8azc). Adobe liefert die Familie GETEILT:
     'futura-pt'      = normale Schnitte  → Book (400) + Medium (500)
     'futura-pt-bold' = eigene Familie    → Bold (700)
     Darum zwei Variablen. Fließtext nutzt --font-sans + weight 500 (Medium),
     alles Fette nutzt --font-sans-bold (700). Fallback: Poppins (self-hosted). */
  --font-sans:'futura-pt','Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-sans-bold:'futura-pt-bold','futura-pt','Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* Ciclo Display Black (Adobe Fonts) für große H1/Hero-Headlines.
     Fallback Playfair Display (self-hosted) – greift lokal, falls die Typekit-Domain nicht freigegeben ist. */
  --font-display:"ciclo-display","Playfair Display",Georgia,serif;

  --wrap:1240px;
  --gutter:clamp(1.25rem,4vw,4rem);
  --section-y:clamp(3.5rem,8vw,7rem);
  --radius:14px;
  --radius-sm:8px;
  --header-h:clamp(84px,7.8vw,106px);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reset / Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Deko-Ebenen (Journey, Band, Schleifen) dürfen keinen Seitwärts-Scroll
   erzeugen (Mobile-Feedback: Seite ließ sich horizontal verschieben) */
html,body{overflow-x:hidden;overflow-x:clip}
body{
  font-family:var(--font-sans);font-weight:500;line-height:1.65;
  color:var(--c-dark);background:var(--c-white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:var(--header-h);
}
#main,#kontakt{scroll-margin-top:var(--header-h)}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--c-dark);outline-offset:3px;border-radius:2px}
.bg-teal :focus-visible,.hero :focus-visible{outline-color:var(--c-blue)}

.skiplink{position:absolute;left:-9999px;top:0;background:var(--c-dark);color:#fff;
  padding:.8rem 1.2rem;z-index:1000;border-radius:0 0 8px 0}
.skiplink:focus{left:0}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:760px}
.section{padding-block:var(--section-y);position:relative}
main{display:block}

.bg-coral{background:radial-gradient(125% 125% at 0% 0%,var(--c-coral-light) 0%,var(--c-coral) 45%,var(--c-coral-2) 100%);color:var(--c-dark)}
.bg-teal{background:var(--c-dark);color:#fff}
.bg-blue{background:var(--c-blue);color:var(--c-dark)}
.bg-white{background:var(--c-white);color:var(--c-dark)}

/* Korn-Textur über farbigen Flächen (sichtbares, farbig wirkendes Filmkorn) */
.bg-coral::before,.bg-teal::before,.bg-blue::before{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:90px;opacity:.90;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.bg-blue::before{opacity:.65}
.bg-coral>*,.bg-teal>*,.bg-blue>*{position:relative;z-index:1}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}

/* ── Typografie ─────────────────────────────────────────────────────────── */
.h-xl,.h-lg,.h-md,.h-sm{font-weight:700;line-height:1.05;letter-spacing:-.01em;font-family:var(--font-sans)}
/* Große Display-Headlines (H1/„Auszeichnung") in Ciclo Display Black */
.h-xl{font-size:clamp(2.7rem,7vw,5.4rem);font-family:var(--font-display);font-weight:900;letter-spacing:0;line-height:1.02}
.h-lg{font-size:clamp(1.9rem,3.95vw,3.375rem);line-height:1.08;text-wrap:balance}
.h-md{font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.12}
.h-sm{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.2;letter-spacing:0}
/* Sektions-Headlines: Akzentwort = Poppins Bold Italic */
.h-lg em,.h-md em,.h-sm em{font-style:italic;font-family:var(--font-sans)}
/* Ciclo hat keinen Kursivschnitt → Akzent in Display-Headlines bleibt aufrecht */
.h-xl em{font-style:normal;font-family:var(--font-display);font-weight:900}
.h-xl strong,.h-lg strong,.h-md strong{font-weight:inherit}

.topline{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.82rem,1.24vw,1.0625rem);
  margin-bottom:1.3rem;color:var(--c-dark)}
/* Design-Detail: Topline "hängt" links vor dem Textblock (Emotion ~52px, Studio ~40px) */
/* Feedback: Eyebrows bündig mit dem Text (hing vorher 48px raus) */
.topline--hang{margin-left:0}
.topline--light{color:var(--c-coral)}
.bg-coral .topline{color:var(--c-dark)}
.bg-teal .topline{color:#fff}

.lead{font-size:clamp(1.02rem,1.76vw,1.5rem);line-height:1.62;max-width:46ch}
.lead--wide{max-width:62ch;margin-top:1.4rem}
.lead p+p{margin-top:1rem}
.lead a{text-decoration:underline;text-underline-offset:3px}
.lead ul{margin:1rem 0;display:grid;gap:.55rem}
.lead li{padding-left:1.4rem;position:relative}
.lead li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
  background:var(--c-coral);border-radius:50%}
.bg-teal .lead li::before{background:var(--c-blue)}
.lead h2,.lead h3{margin:1.4rem 0 .6rem;font-size:1.15rem}

.h-lg+.lead,.h-md+.lead,.h-xl+.lead{margin-top:1.4rem}

/* ── Header / Navigation ────────────────────────────────────────────────── */
/* Header = einheitliches Coral wie der oberste Block (kein abgesetzter Verlauf) */
.site-header{background:var(--c-coral);
  position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .35s ease;will-change:transform}
.site-header.is-hidden{transform:translateY(-100%)}
/* Offenes Mobile-Menü: Filter/Transform am Header aufheben, sonst wird das
   fixed-Fullscreen-Menü im Header-Kasten eingesperrt (Containing-Block-Falle) */
body.nav-open .site-header{transform:none!important;will-change:auto;
  -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--c-coral)}
.site-header.is-scrolled{background:color-mix(in srgb,var(--c-coral) 80%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
/* Grain – viewport-fixiert, damit er nahtlos in den Hero-Streifen darunter übergeht */
.site-header::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:90px;background-attachment:fixed;opacity:.9;mix-blend-mode:overlay;pointer-events:none;z-index:0}
/* Header (Design-Proportionen): hoher Balken, großes Logo, Menü mit weiten
   Abständen und leicht vom rechten Rand eingerückt.
   Beim Scrollen: halbtransparent mit Blur (oben nahtlos opak zum Hero). */
/* Feedback: Abstände links/rechts gleich, ca. 7% vom Rand (volle Breite) */
.site-header .wrap{max-width:none;padding-inline:max(1.1rem,7vw)}
.site-header__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h)}
/* Submenu offen → NUR der Balken wächst nach unten (Padding am Header selbst);
   Logo & Menü bleiben in ihrer Zeile unverändert stehen */
.site-header{padding-bottom:0;transition:transform .35s ease,padding-bottom .25s ease}
.site-header:has(.nav__item--sub:hover),
.site-header:has(.nav__item--sub:focus-within){padding-bottom:52px}
.logo{display:flex;align-items:flex-start;gap:.9rem;color:var(--c-dark);padding-top:.4rem}
.logo__mark{display:block;width:clamp(92px,8.4vw,116px)}
.logo__mark svg{width:100%;height:auto}
/* Claim = offizielles Lockup: kleingeschrieben, Futura PT Medium (500),
   dreizeilig „studio für / crossmediale / raumgestaltung" (max-width unter der
   Breite von „crossmediale raumgestaltung" → deterministischer 3-Zeilen-Umbruch) */
.logo__tag{font-size:.76rem;line-height:1.3;font-weight:500;text-transform:lowercase;max-width:8.5em;padding-top:.55rem}

.nav{display:flex;align-items:center;gap:clamp(1.5rem,4vw,4.5rem)}
.nav__list{display:flex;align-items:baseline;gap:clamp(1.6rem,5.5vw,6.8rem)}
.nav__list li{position:relative}
.nav__list a{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:1.01rem;color:var(--c-dark);transition:opacity .2s}
.nav__list a:hover{opacity:.6}
.nav__list a[aria-current]{position:relative}
/* Unterzeile absolut – Menüpunkte bleiben stabil auf einer Linie */
/* Spezifität .nav__list a.nav__sub schlägt .nav__list a (sonst erbt es 1.01rem);
   Größe = Dropdown-Items (.78rem), damit Aktiv-Zustand nicht größer wirkt als Hover */
.nav__list a.nav__sub{position:absolute;left:0;top:100%;margin-top:.34rem;white-space:nowrap;display:block;font-size:.78rem;letter-spacing:.16em;font-weight:700;color:var(--c-dark);opacity:.75;text-transform:uppercase}
a.nav__sub:hover{opacity:1}
.nav__item--sub:hover .nav__sub,.nav__item--sub:focus-within .nav__sub{opacity:0}

/* Dropdown unter PROJEKTE: Museen / Institute / Marken */
.nav__item--sub{position:relative}
.nav__expand{display:none}
.nav__dropdown{position:absolute;top:100%;left:0;padding-top:.55rem;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:130}
.nav__dropdown-inner{display:grid;gap:.42rem}
.nav__dropdown a{display:block;color:var(--c-dark);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;white-space:nowrap;opacity:.78;transition:opacity .15s}
/* Pfeil mit langem Strich vor Museen/Institute/Marken (Feedback: längere Striche) */
.nav__dropdown a::before,.nav__sub::before{content:"";display:inline-block;width:1.7em;height:.62em;
  margin-right:.5em;vertical-align:baseline;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='50' y2='12'/%3E%3Cpolyline points='41 3.5 52 12 41 20.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='50' y2='12'/%3E%3Cpolyline points='41 3.5 52 12 41 20.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
.nav__dropdown a:hover{opacity:1}
.nav__dropdown a[aria-current]{opacity:1}
.nav__item--sub:hover .nav__dropdown,.nav__item--sub:focus-within .nav__dropdown{
  opacity:1;pointer-events:auto}
.lang{display:flex;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.1em}
.lang a{opacity:.5}
.lang a.is-active{opacity:1;text-decoration:underline;text-underline-offset:3px}

.nav-toggle{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;z-index:60}
.nav-toggle span{display:block;height:3px;width:26px;background:var(--c-dark);border-radius:3px;transition:transform .3s,opacity .2s}

/* ── Buttons / Pills ────────────────────────────────────────────────────── */
/* Buttons in Futura Demi (weight 600) – braucht den Demi-Schnitt im Adobe-Kit */
.btn{display:inline-flex;align-items:center;gap:.8rem;padding:.74em 1.85em;border-radius:999px;
  font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.9rem,1.24vw,1.0625rem);line-height:1;
  transition:transform .2s,background .2s,color .2s;white-space:nowrap}
.btn__arrow{display:inline-flex;align-items:center;width:clamp(24px,2.4vw,34px);flex:0 0 auto}
.btn__arrow svg{width:100%;height:auto;display:block}
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn__arrow svg{transform:translateX(2px);transition:transform .2s}
a.btn:hover{filter:brightness(1.06)}
.btn--teal{background:var(--c-dark);color:#fff}
.btn--blue{background:var(--c-blue);color:var(--c-dark)}
.btn--ghost{background:transparent;border:2px solid currentColor}
/* Button-Gruppe: alle gleich breit (= breitester Button), Inhalt linksbündig */
.pill-row{display:flex;flex-direction:column;align-items:flex-start;gap:.95rem;margin-top:2rem;width:max-content}
.pill-row .btn{min-width:clamp(230px,21vw,288px)}
.pill-row .btn{width:100%;justify-content:flex-start}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--c-coral);}
/* Grain hinterm Video – gleicher viewport-fixierter Grain wie im Header → nahtloser Übergang */
.hero::before{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:90px;background-attachment:fixed;opacity:.9;mix-blend-mode:overlay;pointer-events:none;z-index:0}
/* KEIN z-index: würde einen Stacking-Context bilden und das Float-Badge
   einsperren (es muss im Root-Context liegen, damit Bilder es verdecken).
   Grain (::before, z0) bleibt trotzdem hinter dem Frame (DOM-Reihenfolge). */
.hero .hero__frame{position:relative;padding-inline:var(--gutter)}
.hero--full .hero__frame{max-width:none;padding:0}
.hero--card .hero__frame{max-width:none;padding:0}
.hero__media{position:relative;overflow:hidden;isolation:isolate;background:var(--c-ink)}
/* 80px Coral-/Grain-Streifen rechts neben dem Video (responsiv, auf Mobil schmaler) */
.hero--full .hero__media{height:clamp(380px,52.2vw,720px);border-radius:0;margin-right:clamp(1.75rem,5.9vw,80px)}
.hero--card .hero__media{height:clamp(380px,54.5vw,745px);border-radius:0;
  margin-right:clamp(1.75rem,5.9vw,80px)}
/* Feedback: Hero skaliert bis zur unteren Bildschirmkante (~980px bei 1080p),
   responsive über die Viewport-Höhe statt fester Pixel */
@media (min-width:821px){
  .hero--full .hero__media,.hero--card .hero__media{
    height:calc(100vh - var(--header-h));
    height:calc(100svh - var(--header-h));
    min-height:520px}
}
/* Mobil kein Streifen (Team-Feedback) + Hero-Badge mobil ausblenden –
   das schwebende Badge übernimmt dort den Kontakt-Einstieg */
@media (max-width:820px){
  .hero--full .hero__media,.hero--card .hero__media{margin-right:0}
  .hero .badge:not(.badge--float){display:none}
}
.hero__video,.hero__img,.hero__placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__placeholder{background:linear-gradient(120deg,#013b40,#02585f)}
.hero__shade{position:absolute;inset:0;background:linear-gradient(to top right,rgba(0,40,44,.7) 0%,rgba(0,40,44,.15) 45%,transparent 70%);z-index:1}
.hero__content{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(1.5rem,4vw,3.2rem)}
.hero__headline{color:var(--c-blue);font-weight:900;font-family:var(--font-display);line-height:1.02;
  font-size:clamp(2.2rem,5.42vw,4.625rem);letter-spacing:0;max-width:15ch;text-wrap:balance}
.hero__headline em{font-family:var(--font-sans);font-weight:700;font-style:italic}

/* Rotierendes Badge – sitzt auf der Video-Kante, ragt weit in den 80px-Streifen
   (Feedback: 32px weiter rechts an den Rand) */
.badge{position:absolute;right:clamp(2px,3.3vw - 32px,16px);bottom:clamp(1.1rem,3vw,2.6rem);z-index:4;
  width:clamp(128px,14vw,190px);aspect-ratio:1;display:grid;place-items:center;color:var(--c-blue)}
.badge__svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.badge,.badge__text,.badge__arrow{transition:color .3s ease,fill .3s ease}
.badge__text{font-family:var(--font-sans);font-weight:700;font-size:11.7px;letter-spacing:1.7px;fill:var(--c-blue)}
.badge__arrow{position:relative;width:46%;color:var(--c-blue)}
.badge__arrow svg{width:100%;height:auto;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
/* Adaptiv: auf hellen Abschnitten (blau/weiß) wechselt das Badge auf Teal */
.badge--dark{color:var(--c-dark)}
.badge--dark .badge__text{fill:var(--c-dark)}
.badge--dark .badge__arrow{color:var(--c-dark)}
/* Nach dem Hero wandert das Badge als schwebender Kontakt-Button mit.
   z-index 2: Sektionen/Bilder mit höherem z (Emotion-Sektion, Logo-Slider,
   Studio-Fotos, Team-Block) VERDECKEN das Badge – es taucht dahinter auf
   und läuft hinter den Bildern weiter (Feedback 11 + 28) */
.badge--float{position:fixed;right:clamp(.9rem,2vw,1.8rem);bottom:clamp(.9rem,2vw,1.8rem);
  width:clamp(118px,11vw,150px);z-index:2;animation:badge-in .45s cubic-bezier(.22,1,.36,1)}
/* sanfter Abgang beim Hochscrollen (Feedback: verschwand vorher abrupt) */
.badge--float.badge--leaving{animation:badge-out .3s cubic-bezier(.55,0,.55,.2) forwards}
@keyframes badge-out{to{transform:translateY(16px) scale(.82);opacity:0}}
/* bewusst ohne opacity: in gedrosselten Tabs frieren CSS-Animationen am
   ersten Frame ein – mit opacity:0 wäre das Badge dann unsichtbar */
@keyframes badge-in{from{transform:translateY(16px) scale(.82)}to{transform:none}}
/* Seiten ohne Hero-Badge (Studio, Projekte, Kategorien): Button existiert
   nur als schwebende Variante – unsichtbar, bis JS .badge--float setzt */
.badge--page{position:fixed;right:clamp(.9rem,2vw,1.8rem);bottom:clamp(.9rem,2vw,1.8rem);
  width:clamp(96px,9.5vw,128px);visibility:hidden;z-index:2}
.badge--page.badge--float{visibility:visible}

/* ── EMOTIONEN-Sektion ──────────────────────────────────────────────────── */
/* z4: über Logo-Slider (z3) – die Journey-Linie zeichnet über den weißen
   Streifen – und über dem Float-Badge (z2), das erst danach hervortaucht */
.section--emotion{overflow:visible;z-index:4;
  /* nahtloser Anschluss an den Hero: oben exakt Hero-Coral, weich in den
     Sektions-Verlauf blendend (Feedback: sichtbare Kante unter dem Hero) */
  background:linear-gradient(180deg,var(--c-coral) 0,rgba(255,141,115,0) 260px),
    radial-gradient(125% 125% at 0% 0%,var(--c-coral-light) 0%,var(--c-coral) 45%,var(--c-coral-2) 100%)}
/* Korn viewport-fixiert wie im Hero → kein Korn-Versatz an der Naht */
.section--emotion::before{background-attachment:fixed}
/* Design: Textblock deutlich eingerückt (x≈230), Topline hängt davor (x≈178);
   Text-Spalte breiter als Foto-Spalte (Design ≈ 1.55:1) */
.section--emotion .grid-2{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.section--emotion .section__text{padding-left:clamp(0px,7.5vw,103px)}
@media (max-width:900px){
  .section--emotion .grid-2{grid-template-columns:1fr}
  .section--emotion .section__text{padding-left:0}
  .topline--hang{margin-left:0}}
/* Textblock endet an der Lead-Kante (46ch@1.18rem ≈ 30.1rem) – Pills exakt
   rechtsbündig zum Text via margin-left:auto im selben Block */
.section--emotion .section__text{max-width:calc(36rem + clamp(0px,7.5vw,103px))}
.section--emotion .lead{max-width:none}
.section--emotion .section__text .pill-row{width:max-content;margin-left:auto;margin-top:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:900px){
  .section--emotion .section__text{max-width:none}
  .section--emotion .section__text .pill-row{margin-left:0}
}
.pill-row--center{align-items:flex-start;margin-top:0}
/* Journey-Linie ragt aus der Coral-Sektion nach unten über den weißen
   Logo-Streifen bis ins Teal („Emotion"), exakt wie im Layout. */
.section--emotion .emo-journey{position:absolute;left:var(--gutter);bottom:-215px;
  width:clamp(238px,25vw,338px);z-index:1;pointer-events:none;margin:0}
.section--emotion .emo-journey__svg{max-width:none}
/* Logo-Slider über dem Float-Badge (z2): das Badge taucht dahinter auf */
.logos{position:relative;z-index:3}
/* KEIN z-index (weder Sektion noch Grid): sie dürfen keinen Stacking-Context
   bilden, damit die Studio-Fotos (z4) das Float-Badge (z2) verdecken (Feedback 11).
   Das Grain (::before, z0) bleibt per DOM-Reihenfolge trotzdem hinten. */
.section--studio{position:relative}
.section--studio>.studio__grid{z-index:auto}
@media (max-width:820px){
  /* Die sektionsübergreifende Journey ist ein Desktop-Layoutelement – auf
     Mobil ausgeblendet (sonst läge „Emotion" coral auf coral). */
  .section--emotion .emo-journey{display:none}
}
.founder{align-self:start;justify-self:end;width:min(100%,440px)}
.founder img,.founder__ph{width:100%;border-radius:0;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9)}
.founder__ph{background:#cf6f5a}
.founder figcaption{margin-top:.9rem;font-size:clamp(.85rem,1.24vw,1.0625rem);line-height:1.4;color:var(--c-dark)}
.founder figcaption strong{font-weight:700}

/* ── Kundenlogos: durchlaufender Slider (≈3 sichtbar), monochrom Blauschwarz ── */
.logos{background:#fff;padding-block:clamp(1.7rem,3.2vw,2.7rem);overflow:hidden}
/* Unterseiten: Slider läuft fast bis an den linken Rand */
.logos__viewport{overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 2.5%,#000 96%,transparent);
          mask:linear-gradient(90deg,transparent,#000 2.5%,#000 96%,transparent)}
/* Startseite: Logos laufen bis kurz vor die Journey-Schleife und faden dort
   aus. Kante = rechte Außenkante der Schleife (Journey: left gutter, Breite
   clamp, Schleifen-max-x 167.7/360 = .466) minus den 1%-Viewport-Versatz. */
.is-home .logos__viewport{margin-left:1%;
  --ej-edge:calc(var(--gutter) + clamp(238px,25vw,338px)*.466 - 1vw);
  -webkit-mask:linear-gradient(90deg,transparent calc(var(--ej-edge) + 6px),#000 calc(var(--ej-edge) + 116px),#000 95%,transparent);
          mask:linear-gradient(90deg,transparent calc(var(--ej-edge) + 6px),#000 calc(var(--ej-edge) + 116px),#000 95%,transparent)}
@media (max-width:820px){
  .logos__viewport{margin-left:0}
  /* keine Journey auf Mobil → normale Randmaske statt Linien-Kante */
  .is-home .logos__viewport{
    -webkit-mask:linear-gradient(90deg,transparent,#000 2.5%,#000 96%,transparent);
            mask:linear-gradient(90deg,transparent,#000 2.5%,#000 96%,transparent)}
}
.logos__track{display:flex;width:max-content;align-items:center;
  animation:logos-scroll var(--logos-dur,30s) linear infinite;will-change:transform}
.logos:hover .logos__track,.logos:focus-within .logos__track{animation-play-state:paused}
.logos__group{display:flex;align-items:center}
/* Gleich breite Slots → ~4 sichtbar; Logo wird mittig eingepasst (contain) */
.logos__item{flex:0 0 auto;display:block;
  width:clamp(120px,15vw,190px);height:clamp(36px,4.4vw,52px);
  margin-inline:clamp(1.5rem,3vw,3rem);opacity:.9;
  background-color:var(--c-dark);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logos__viewport{-webkit-mask:none;mask:none}
  .logos__track{animation:none;flex-wrap:wrap;justify-content:center;width:100%;row-gap:1.4rem}
  .logos__group{flex-wrap:wrap;justify-content:center}
  .logos__group[aria-hidden]{display:none}
}
.logos__names{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem 1.5rem;
  list-style:none;max-width:1060px;margin-inline:auto}
.logos__names li{font-weight:700;font-size:clamp(.76rem,1vw,.92rem);color:var(--c-dark);opacity:.68;
  letter-spacing:.02em;white-space:nowrap}

/* ── Media stacks ───────────────────────────────────────────────────────── */
.media-stack{display:grid;gap:1.2rem}
.media-stack img{width:100%;border-radius:0;object-fit:cover}
.section--studio .section__media{align-self:stretch}
/* Studio (Design-exakt): Bild 1 randlos LINKS (x 0–427), beginnt auf Fließtext-Höhe;
   Text-Spalte ab 39.3% Breite; Bild 2 randlos RECHTS (893–1366), ragt unten
   über die Sektionskante in den Wellen-Streifen (liegt ÜBER der Welle). */
.section--studio{overflow:visible;padding-bottom:0}
@media (max-width:820px){.section--studio{padding-bottom:var(--section-y)}}
.studio__grid{display:grid;grid-template-columns:31.3% minmax(0,1fr);
  column-gap:clamp(2rem,8vw,110px);align-items:start}
.studio__img{margin:0}
.studio__img img{width:100%;border-radius:0;object-fit:cover;display:block}
/* z4: die Studio-Fotos verdecken das Float-Badge (z2) beim Vorbeiscrollen */
.studio__img--1{grid-column:1;grid-row:1;margin-top:clamp(120px,14.6vw,200px);position:relative;z-index:4}
.studio__img--1 img{aspect-ratio:427/520}
/* Feedback: Text läuft breiter, wie im Layout */
.studio__text{grid-column:2;grid-row:1;max-width:800px;padding-right:var(--gutter)}
.studio__img--2{grid-column:1/-1;grid-row:2;justify-self:end;width:34.6%;
  margin-top:clamp(2rem,5vw,4.5rem);margin-bottom:-10.4vw;
  position:relative;z-index:4}
.studio__img--2 img{aspect-ratio:473/320}
@media (max-width:820px){
  .studio__grid{display:block}
  .studio__img--1{margin-top:1.6rem}
  .studio__text{padding-inline:var(--gutter);max-width:none}
  .studio__img--2{width:78%;margin-left:auto;margin-top:1.6rem;margin-bottom:0;display:block}
}

/* ── PROJEKT: Intro + Eckdaten ──────────────────────────────────────────── */
.project-intro__grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,6vw,6.5rem);align-items:start}
.project-intro .h-lg{font-size:clamp(1.7rem,3.1vw,2.55rem)}
.result{margin-top:1.6rem;font-weight:700;line-height:1.5;font-size:clamp(1.02rem,1.76vw,1.5rem)}
.result span{text-decoration:underline;text-underline-offset:3px}
/* Eckdaten starten auf Höhe des Intro-Fließtexts (Design), nicht der H2 */
.spec{padding-top:clamp(3.2rem,6vw,5.4rem)}
.spec-table{display:grid;gap:1.1rem;font-size:.92rem}
.spec-row{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:.55rem 1.6rem;align-items:start}
.spec-row dt{font-weight:500;color:var(--c-dark)}
.spec-row dd{font-weight:700}
.spec-list{display:grid;gap:.3rem}
.bg-coral .spec-row dt{color:var(--c-dark)}

/* ── PROJEKT: Inhalts-Abschnitte ────────────────────────────────────────── */
.content-sections{position:relative}
.content-block{padding-block:clamp(2.5rem,5vw,4.5rem);overflow:hidden}
/* Bilder laufen randlos zur Außenkante (links- bzw. rechtsbündige Module) */
.content-block.is-left  .section__media{margin-left:calc(50% - 50vw)}
.content-block.is-right .section__media{margin-right:calc(50% - 50vw)}
@media (max-width:900px){
  .content-block.is-left .section__media,
  .content-block.is-right .section__media{margin-left:0;margin-right:0}
}
.content-block.is-right .grid-2{direction:rtl}
.content-block.is-right .grid-2>*{direction:ltr}
/* Sektion ohne Bild → Text einspaltig, lesbare Breite (keine leere Bild-Box) */
.content-block.is-textonly .grid-2{display:block}
.content-block.is-textonly .section__text{max-width:52ch}
/* Großes, zentriertes Bild zwischen Sektionen (natürliches Verhältnis,
   Transparenz bleibt – schwebt auf dem Teal-Grund wie in der Vorlage) */
.content-full{margin:0;padding-block:clamp(1.5rem,4vw,4rem);text-align:center}
.content-full img{width:min(92%,1200px);height:auto;max-width:none;display:inline-block;margin-inline:auto}
/* Großes Zwischenbild rechts-randlos (Design-Slot: ab ~37 % bis Außenkante) */
.content-wide{margin:0;padding-block:clamp(1.5rem,4vw,4rem);display:flex;justify-content:flex-end}
.content-wide img{width:min(63vw,880px);height:auto;max-width:none;display:block}
@media (max-width:900px){.content-wide img{width:92vw}}
/* Sektion „Text links, kleines Bild mittig darunter" (Design-Muster Sek 2) */
.content-block.is-below .section__text{max-width:52ch}
.content-below__img{margin:clamp(2rem,4.5vw,4rem) 0 0 clamp(0px,32vw,440px);width:min(44vw,600px)}
.content-below__img img{width:100%;height:auto;display:block}
@media (max-width:900px){.content-below__img{margin-left:0;width:100%}}

/* ── TESTIMONIAL (hellblau, zentriert, Coral-Schleife angeschnitten) ─────── */
.testimonial{text-align:center;position:relative;overflow:hidden}
.testimonial__loop{position:absolute;right:clamp(-140px,-9vw,-80px);top:50%;
  transform:translateY(-46%);width:clamp(200px,24vw,330px);height:auto;pointer-events:none}
.testimonial__inner{position:relative}
.testimonial__inner{max-width:52rem;margin-inline:auto}
.testimonial__quote{font-family:var(--font-sans);font-weight:700;font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.18;letter-spacing:-.01em;color:var(--c-dark)}
.testimonial__cite{margin-top:clamp(1.4rem,2.6vw,2.1rem);font-size:clamp(.82rem,1.05vw,.95rem);
  letter-spacing:.14em;line-height:1.7;color:var(--c-dark)}
.testimonial__label{text-transform:uppercase;font-weight:700;letter-spacing:.2em}
.testimonial__cite strong{font-weight:700}

/* ── PROJEKT/STUDIO: CTA ────────────────────────────────────────────────── */
.project-cta__inner{max-width:640px;margin-left:clamp(0px,28vw,485px)}
.project-cta .h-lg{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.project-cta .lead,.studio-cta .lead{max-width:48ch}
.project-cta__btn{margin-top:2rem}
.feature-video__el{width:100%;border-radius:0;background:#000}

/* ── PROJEKTE-Übersicht ─────────────────────────────────────────────────── */
.projects-head .h-xl{max-width:14ch}
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.4rem}
/* Filter über dem Karten-Grid (weiße Sektion) */
.filter--cards{margin-top:0;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.filter--cards .filter__btn{background:rgba(0,84,90,.08)}
.filter--cards .filter__btn:hover{background:rgba(0,84,90,.16)}
.filter--cards .filter__btn.is-active{background:var(--c-dark);color:#fff}
.filter__btn{padding:.6em 1.3em;border-radius:999px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;background:rgba(0,55,59,.12);color:var(--c-dark);transition:.2s}
.filter__btn:hover{background:rgba(0,55,59,.22)}
.filter__btn.is-active{background:var(--c-dark);color:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.card{display:block;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card__media{position:relative;aspect-ratio:4/3;border-radius:0;overflow:hidden;background:var(--c-blue)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card__media img{transform:scale(1.04)}
.card__ph{position:absolute;inset:0;background:linear-gradient(120deg,var(--c-blue),var(--c-blue-deep))}
.card__cat{position:absolute;left:.8rem;top:.8rem;background:var(--c-dark);color:#fff;font-size:.66rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.35em .8em;border-radius:999px}
.card__body{padding-top:1rem}
.card__title{font-size:1.25rem;font-weight:700;line-height:1.15}
.card .topline{margin-bottom:.4rem;font-size:.7rem}
.card[hidden]{display:none}
.muted{opacity:.6}

/* ── STUDIO ─────────────────────────────────────────────────────────────── */
.studio-intro .h-xl{max-width:16ch}
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,4vw,3rem)}
.value h2{margin-bottom:.6rem}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin-top:2.5rem}
.member img,.member__ph{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0;filter:saturate(.9)}
.member__ph{background:var(--c-blue-deep)}
.member figcaption{margin-top:.9rem;display:grid;gap:.15rem}
.member figcaption strong{font-size:1.1rem}
.member__role{font-weight:700;color:var(--c-dark);opacity:.85;font-size:.9rem}
.member__qual{font-size:.82rem;opacity:.7}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3rem)}
.service__num{font-weight:700;color:var(--c-coral);font-size:1rem;letter-spacing:.1em}
.service h2{margin:.6rem 0}
.process{display:grid;gap:clamp(1.4rem,3vw,2.2rem);counter-reset:step}
.process__step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;
  padding-bottom:clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid rgba(0,55,59,.15)}
.process__num{font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--c-coral);line-height:1;font-family:var(--font-display)}
.process__step h2{margin-bottom:.4rem}

/* ── Kategorie-Landingpages (Museen / Institute / Marken) ──────────────── */
.cat-intro__heading{max-width:22ch}
.cat-intro__heading+.lead{margin-top:1.2rem}
/* Logos-Leiste mit Label „Kunden, die uns vertrauen" */
.logos--labeled{padding-top:clamp(1.4rem,2.6vw,2.2rem)}
.logos__label{margin-bottom:clamp(1rem,2vw,1.6rem)}
/* Kuratierte Projekt-Karten (Bild + Kurzbeschreibung, ohne Titel) */
.cat-projects .topline--hang{margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.cat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.cat-card{display:block;color:inherit;text-decoration:none}
.cat-card img,.cat-card__ph{width:100%;aspect-ratio:64/42;object-fit:cover;display:block;background:var(--c-blue)}
.cat-card__text{margin-top:1rem;font-size:clamp(.92rem,1.24vw,1.0625rem);line-height:1.55}
.cat-card:hover img{opacity:.88}
.cat-projects__more{margin-top:clamp(1.6rem,3vw,2.4rem);display:flex;justify-content:flex-end}
/* Themen-Blöcke: breiter Auftakt + Titel nicht kursiv-uppercase */
/* Bilder in Themen-Blöcken IMMER 4:3-Querformat (srcset liefert sonst
   ungecroppte Hochformate, z. B. das DLR-Standfoto) */
.cat-themes .media-stack img{aspect-ratio:4/3;object-fit:cover;height:auto}
/* Themen-Auftakt (Feedback 18): Block eingerückt (~35 %), Topline hängt davor,
   Großbild bündig zur Text-Kante und randlos bis zur rechten Außenkante */
.cat-theme--bigwrap{padding-inline:0}
.cat-theme--big{margin-left:35vw;max-width:none;padding-right:var(--gutter)}
.cat-theme--big .topline{margin-left:clamp(-96px,-6.4vw,0px)}
.cat-theme--big .h-md{max-width:20ch}
.cat-theme--big .lead{max-width:52ch}
.cat-themes .content-wide img{width:65vw;max-width:none}
.cat-theme__title{margin-bottom:1rem}
/* CTA „Von der Idee bis zur fertigen Installation" (Feedback 19):
   dunkelgrün, Bild links, Text + Bullet-Liste rechts */
.cat-cta__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,6.5vw,7rem);align-items:center}
.cat-cta__text .lead{max-width:48ch}
.cat-cta__img{margin:0}
.cat-cta__ph{display:block;width:100%;aspect-ratio:3/4;background:#cfd3d4}
@media (max-width:900px){
  .cat-cards{grid-template-columns:1fr}
  .cat-cta__grid{grid-template-columns:1fr}
  .cat-theme--big{margin-left:0;padding-inline:var(--gutter)}
  .cat-theme--big .topline{margin-left:0}
  .cat-themes .content-wide img{width:92vw}
}

/* ── V2-Landing-Layout: Intro mit Foto, Karten-Varianten, CTA, End-CTA ─── */
/* z4 wie die Emotion-Sektion: Journey über dem Logo-Slider, Badge dahinter */
.cat-intro{position:relative;overflow:visible;z-index:4;
  /* nahtloser Anschluss an den Hero – wie auf der Startseite (Feedback 14):
     oben exakt Hero-Coral, weich in den Sektions-Verlauf blendend */
  background:linear-gradient(180deg,var(--c-coral) 0,rgba(255,141,115,0) 260px),
    radial-gradient(125% 125% at 0% 0%,var(--c-coral-light) 0%,var(--c-coral) 45%,var(--c-coral-2) 100%)}
/* Korn viewport-fixiert wie im Hero → kein Korn-Versatz an der Naht */
.cat-intro::before{background-attachment:fixed}
.cat-intro__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,5.5rem);align-items:start}
.cat-intro__img img{width:100%;height:auto;display:block}
/* Journey 1:1 wie auf der Startseite (Feedback 16): gleiche Größe/Position.
   Die Intro-Sektion bekommt unten Luft, damit die Linie nicht in den Text läuft */
.cat-intro:has(.cat-intro__journey){padding-bottom:clamp(240px,26vw,360px)}
.cat-intro__journey{position:absolute;left:var(--gutter);bottom:-215px;
  width:clamp(238px,25vw,338px);z-index:1;pointer-events:none;margin:0}
.cat-intro__journey .emo-journey__svg{max-width:none}
/* Logo-Slider neben der Journey-Schleife: gleiche Fade-Kante wie Startseite */
.logos--journey .logos__viewport{margin-left:1%;
  --ej-edge:calc(var(--gutter) + clamp(238px,25vw,338px)*.466 - 1vw);
  -webkit-mask:linear-gradient(90deg,transparent calc(var(--ej-edge) + 6px),#000 calc(var(--ej-edge) + 116px),#000 95%,transparent);
          mask:linear-gradient(90deg,transparent calc(var(--ej-edge) + 6px),#000 calc(var(--ej-edge) + 116px),#000 95%,transparent)}
@media (max-width:900px){
  .logos--journey .logos__viewport{margin-left:0;
    -webkit-mask:linear-gradient(90deg,transparent,#000 2.5%,#000 96%,transparent);
            mask:linear-gradient(90deg,transparent,#000 2.5%,#000 96%,transparent)}
}
/* Karten auf Hellblau (Museen-Muster): Headline + Intro-Zeile */
.cat-projects__heading{max-width:24ch}
.cat-projects__intro{margin-top:.9rem;margin-bottom:clamp(1.8rem,3.4vw,2.6rem);
  font-size:clamp(.95rem,1.32vw,1.125rem);line-height:1.6;max-width:60ch}
.bg-blue .cat-card__text{color:var(--c-dark)}
/* Feedback 17: Farben getauscht – weißer Hintergrund, grüne Schrift */
.bg-blue .cat-projects__more .btn{background:#fff;color:var(--c-dark)}
/* CTA-Bild links (Hochformat-Anschnitt wie im Layout) */
.cat-cta__img img{width:100%;height:auto;display:block}
.cat-cta__list{margin-top:1.4rem}
/* Abschluss-CTA: KONTAKT-Topline hängt weit vor dem Textblock (Layout 20) */
.end-cta__inner{max-width:640px;margin-left:clamp(0px,28vw,485px)}
.end-cta .topline{margin-left:clamp(-160px,-10.5vw,0px)}
.end-cta .lead{max-width:48ch}
.end-cta__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,6vw,6rem);align-items:center}
/* runder Kontakt-Button (Studio-Abschluss) */
.btn-circle{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:clamp(120px,13vw,168px);aspect-ratio:1;border-radius:50%;background:var(--c-dark);
  color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.78rem,1vw,.9rem);transition:transform .3s ease,background .3s ease}
.btn-circle:hover{transform:scale(1.06)}
/* Testimonial mit Porträt (Layout 20): Block eingerückt, Topline hängt,
   Coral-Schleife rechts über die Sektionskante in den Kontakt-Block */
.testimonial--person{text-align:left;overflow:visible;z-index:1}
.testimonial--person .testimonial__loop{top:auto;transform:none;
  bottom:clamp(-300px,-17vw,-150px);right:clamp(-120px,-7vw,-60px);
  width:clamp(240px,27vw,380px)}
.testimonial--person .testimonial__inner{margin-left:clamp(0px,7vw,120px);max-width:none}
.testimonial__topline{margin-bottom:clamp(1.6rem,3vw,2.6rem);margin-left:clamp(0px,14vw,240px)}
.testimonial__grid{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center;max-width:56rem}
.testimonial__photo{margin:0;width:clamp(140px,16vw,210px)}
.testimonial__photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block}
.testimonial--person .testimonial__quote{text-align:left}
.testimonial--person .testimonial__cite{text-align:left;margin-top:1.2rem}
/* Studio V2: Warum-Block (Feedback 25: Schleife LINKS, Block eingerückt) */
.studio-why{position:relative;overflow:hidden}
.studio-why__loop{position:absolute;left:clamp(-110px,-6.5vw,-55px);top:auto;bottom:clamp(-70px,-3vw,-24px);
  transform:none;width:clamp(180px,21vw,300px);height:auto;pointer-events:none}
.studio-why__inner{position:relative;max-width:none;margin-left:clamp(0px,17vw,290px)}
.studio-why__inner .h-md{max-width:20ch}
.studio-why__inner .facts-list{margin-top:clamp(1.4rem,2.6vw,2.2rem)}
/* z2: verdeckt das Float-Badge – es taucht erst im Abschluss-CTA
   („Sie planen eine Ausstellung…") wieder hervor (Feedback 28) */
.studio-team{z-index:2}
.studio-team__heading{max-width:22ch;margin-top:.6rem}
.studio-team__text{max-width:62ch;margin-top:1rem}
.studio-team__photo{margin:clamp(1.8rem,3.6vw,3rem) 0 0}
.studio-team__photo img{width:100%;height:auto;display:block}
.studio-team__names{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(1.8rem,3.6vw,3rem)}
.studio-team__name{display:grid;gap:.2rem}
.studio-team__name strong{font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(.85rem,1.1vw,.95rem)}
.studio-team__name span{font-size:clamp(.78rem,1vw,.88rem);letter-spacing:.08em;
  text-transform:uppercase;opacity:.75}
/* E-Mail unter dem Arbeitsbereich (Feedback 27) */
.studio-team__mail{font-size:clamp(.78rem,1vw,.88rem);letter-spacing:.04em;opacity:.85;
  text-decoration:underline;text-underline-offset:3px;width:max-content}
.studio-team__mail:hover{opacity:1}
@media (max-width:900px){
  .cat-intro__grid,.end-cta__grid,.testimonial__grid,.cat-cta__grid{grid-template-columns:1fr}
  .cat-intro__journey{display:none}
  .studio-team__names{grid-template-columns:1fr 1fr}
  .end-cta__inner{margin-left:0}
}

/* Studio: Sprungmarken-Pills unter dem Intro */
.studio-intro__jump{margin-top:clamp(1.6rem,3vw,2.4rem)}
/* Studio-Leistungen (Feedback 24, Layout-exakt): schmalere Bild-Spalten,
   Bilder vertikal versetzt, Textblöcke eingerückt, Topline hängt vor dem Text */
.studio-leistung__title{margin-bottom:1.1rem}
.studio-leistungen .content-block{padding-block:clamp(3rem,6.5vw,6rem)}
.studio-leistungen .grid-2{align-items:start}
.studio-leistungen .section__text{max-width:46ch}
.studio-leistungen .topline{margin-left:clamp(-56px,-3.6vw,0px)}
.studio-leistungen .is-left .grid-2{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.studio-leistungen .is-left .section__media{margin-top:clamp(2.5rem,6vw,5.5rem)}
.studio-leistungen .is-left .section__text{padding-left:clamp(0px,6vw,90px)}
.studio-leistungen .is-right .grid-2{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.studio-leistungen .is-right .section__media{margin-top:clamp(2.5rem,6vw,5.5rem)}
.studio-leistungen .is-right .section__text{padding-left:clamp(0px,7vw,110px)}
.studio-leistungen .is-textonly .section__text{margin-left:clamp(0px,26vw,440px)}
@media (max-width:900px){
  .studio-leistungen .section__text{padding-left:0}
  .studio-leistungen .is-textonly .section__text{margin-left:0}
  .studio-leistungen .topline{margin-left:0}
  .studio-why__inner{margin-left:0}
}
/* Studio-Facts: Label + Liste */
.studio-facts__inner{display:grid;gap:clamp(1.4rem,3vw,2.4rem)}
.studio-facts__label{margin-bottom:0}
.facts-list{list-style:none;display:grid;gap:.9rem;max-width:58ch;font-size:clamp(1.02rem,1.55vw,1.3rem);line-height:1.4}
/* Bullet-Points statt Bindestriche (Feedback 19 + 25) */
.facts-list li{position:relative;padding-left:1.5rem;color:var(--c-dark)}
.facts-list li::before{content:"\2022";position:absolute;left:0;color:var(--c-dark);opacity:.85;font-weight:700}
.bg-teal .facts-list li{color:#fff}
.bg-teal .facts-list li::before{color:#fff}

/* ── Methodik-Sektion (Welle + Schleife + Wordmark + Journey) ────────────── */
.methodology{position:relative;background:var(--c-blue);overflow:hidden}
/* gemeinsame Band-Optik (Welle + Schleife) */
.methodology__band{fill:none;stroke:var(--c-coral);stroke-width:27;stroke-linecap:round;stroke-linejoin:round}

/* Wellen-Band: teal Streifen (oben), nahtlos an teal-Sektion darüber */
/* z-index:0 — bleibt über dem statischen Methodik-BG, aber UNTER den
   Sektionen mit z-index:1 (Studio-Bild 2 ragt über das Band, Design) */
.methodology__wave{position:relative;z-index:0;background:transparent;line-height:0;margin-bottom:-1px}
/* Unterseiten: mehr hellblauer Vorlauf über dem Band (Feedback 5e) */
body:not(.is-home) .methodology__wave{padding-top:clamp(2.5rem,6vw,5rem)}
.is-home .methodology__wave{background:var(--c-dark)}
.is-home .methodology__wave::before{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:90px;opacity:.9;mix-blend-mode:overlay;pointer-events:none}
.methodology__wave-svg{display:block;width:100%;height:auto;position:relative}
/* letter-spacing in em: px würde auf Mobil in Device-Pixeln gerechnet,
   der Text wächst über den Pfad hinaus und bricht aus der Kurve */
.methodology__ribbon-text{font-family:var(--font-sans);font-weight:700;font-size:25px;letter-spacing:.08em;fill:var(--c-dark);dominant-baseline:central}

/* Schleife: links, läuft links aus dem Bild */
/* proportional (vw) – bleibt auf JEDER Breite im Verhältnis zu Welle & Kante */
.methodology__loop{position:absolute;top:28.9vw;left:0;width:27.2vw;z-index:1;pointer-events:none}
.methodology__loop-svg{width:100%;height:auto;display:block}

.methodology__inner{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,5rem);padding-bottom:calc(clamp(2.5rem,6vw,5rem) + 15px)}
.methodology__wordmark{width:min(60%,556px);margin:0 auto clamp(1rem,2.5vw,2rem)}
.methodology__wordmark svg{width:100%;height:auto;display:block}

/* Body: Heading links, Journey rechts/zentriert (überlappen vertikal) */
.methodology__body{position:relative;min-height:clamp(380px,36vw,520px)}
/* Feedback: max-width 15ch → Heading bricht dreizeilig */
.methodology__heading{position:relative;z-index:2;max-width:15ch;font-size:clamp(1.6rem,3.07vw,2.625rem);
  padding-top:clamp(2rem,7vw,5.5rem)}
.journey{position:absolute;top:0;left:0;right:0;z-index:1;display:flex;justify-content:center;pointer-events:none}
/* overflow:visible – end-verankerte EN-Labels (Understanding) ragen über die viewBox */
.journey__svg{display:block;width:clamp(280px,40vw,420px);height:auto;overflow:visible}
.journey__path{fill:none}
.journey__txt{font-family:var(--font-sans);font-weight:700;font-size:17px;fill:var(--c-dark)}

/* Cross-Section-Journey (Emotionen-Sektion oben) */
.emo-journey{margin-top:clamp(1.5rem,3vw,2.5rem)}
/* overflow:visible – Labels (z.B. „Prototyping") dürfen über die viewBox ragen */
.emo-journey__svg{width:100%;max-width:460px;height:auto;display:block;overflow:visible}
.emo-journey__txt text{font-family:var(--font-sans);font-weight:700;font-size:19px}
/* Scroll-Scrub (Klasse setzt app.js): Wörter blenden ein, sobald die
   Linienspitze sie erreicht; ohne JS/mit reduced-motion bleibt alles statisch */
.emo-journey__svg.is-scrub .ej-label{opacity:0;transform:translateY(7px);
  transform-box:fill-box;transition:opacity .5s ease,transform .5s ease}
.emo-journey__svg.is-scrub .ej-label.is-on{opacity:1;transform:none}

/* Methodik schmal: gestapelt statt überlagert (Journey wird sonst geclippt) */
@media (max-width:1080px){
  .methodology__body{min-height:0}
  .methodology__heading{padding-top:0}
  .journey{position:static;margin-top:2.5rem}
  .journey__svg{margin-inline:auto}
}
@media (max-width:820px){
  .methodology__loop{width:31vw;top:24vw;left:-9vw}
  .methodology__wordmark{width:min(78%,420px)}
  .methodology__body{min-height:0}
  .methodology__heading{padding-top:0;max-width:none;text-align:center;margin-inline:auto}
  .journey{position:static;margin-top:2.5rem}
  .journey__svg{width:min(94%,360px);margin-inline:auto}
}

/* ── Wordmark-Animation "ping" V2 – das Signal ────────────────────────────
   Konzept: Das Logo ist ein Schaltkreis, der erwacht. Beim Scroll-in läuft
   die Sequenz P→I→N→G; der i-Punkt sendet ein RADAR-PING (expandierende
   Ringe) – die Marke selbst. Jeder Buchstabe reagiert einzeln auf Hover.
   Idle: alle ~7s ein dezenter Ping (JS toggelt .wm-idle). Replay beim
   erneuten Scroll-in (JS toggelt .is-visible). */

.methodology__wordmark{opacity:1;transform:none}
.methodology__wordmark svg{overflow:visible}
.methodology__wordmark .wm-p,.methodology__wordmark .wm-i,
.methodology__wordmark .wm-n,.methodology__wordmark .wm-g{cursor:pointer}
.methodology__wordmark .wm-hit{fill:transparent}
.methodology__wordmark .wm-g-hatch{stroke-dasharray:1}
.methodology__wordmark .wm-p{transform-box:fill-box;transform-origin:16% 96%}
.methodology__wordmark .wm-i-dot,.methodology__wordmark .wm-inode{transform-box:fill-box;transform-origin:center}

/* —— P: kippt federnd 18° (Overshoot beim Zurückschwingen) —— */
.methodology__wordmark.is-visible .wm-p{animation:pg-rot 1s cubic-bezier(.45,.05,.35,1) backwards}
.methodology__wordmark .wm-p:hover{animation:pg-rotH 1s cubic-bezier(.45,.05,.35,1)}
@keyframes pg-rot {0%{transform:rotate(0)}36%{transform:rotate(18deg)}52%{transform:rotate(18deg)}78%{transform:rotate(-3.2deg)}91%{transform:rotate(1.1deg)}100%{transform:rotate(0)}}
@keyframes pg-rotH{0%{transform:rotate(0)}36%{transform:rotate(18deg)}52%{transform:rotate(18deg)}78%{transform:rotate(-3.2deg)}91%{transform:rotate(1.1deg)}100%{transform:rotate(0)}}

/* —— I: Knoten verbinden → Strom steigt → Punkt zündet —— */
.methodology__wordmark .wm-i-node{transform-box:fill-box;transform-origin:center}
.methodology__wordmark.is-visible .wm-i-node{animation:pg-node .55s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:.5s}
.methodology__wordmark .wm-i:hover .wm-i-node{animation:pg-nodeH .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes pg-node {0%{transform:scale(.2);opacity:.15}60%{transform:scale(1.45)}100%{transform:scale(1);opacity:1}}
@keyframes pg-nodeH{0%{transform:scale(.2);opacity:.15}60%{transform:scale(1.45)}100%{transform:scale(1);opacity:1}}

.methodology__wordmark .wm-i-seg{transform-box:fill-box;transform-origin:center}
.methodology__wordmark.is-visible .wm-i-seg{animation:pg-cur .42s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.78s + var(--si)*.085s)}
.methodology__wordmark .wm-i:hover .wm-i-seg{animation:pg-curH .42s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.12s + var(--si)*.085s)}
@keyframes pg-cur {0%{opacity:.12;transform:scaleY(.4)}55%{opacity:1;transform:scaleY(1.25)}100%{opacity:1;transform:scaleY(1)}}
@keyframes pg-curH{0%{opacity:.12;transform:scaleY(.4)}55%{opacity:1;transform:scaleY(1.25)}100%{opacity:1;transform:scaleY(1)}}

.methodology__wordmark.is-visible .wm-i-dot{animation:pg-dot .75s cubic-bezier(.34,1.56,.64,1);animation-delay:1.18s}
.methodology__wordmark .wm-i:hover .wm-i-dot{animation:pg-dotH .75s cubic-bezier(.34,1.56,.64,1);animation-delay:.5s}
@keyframes pg-dot {0%{transform:scale(1)}38%{transform:scale(1.3);filter:brightness(1.75)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes pg-dotH{0%{transform:scale(1)}38%{transform:scale(1.3);filter:brightness(1.75)}100%{transform:scale(1);filter:brightness(1)}}

/* —— Der PING: Ringe expandieren vom i-Punkt —— */
.methodology__wordmark .wm-ping-ring{opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.methodology__wordmark.is-visible .wm-ping-ring--1{animation:pg-ring 1.3s cubic-bezier(.17,.55,.35,1) backwards;animation-delay:1.3s}
.methodology__wordmark.is-visible .wm-ping-ring--2{animation:pg-ring 1.3s cubic-bezier(.17,.55,.35,1) backwards;animation-delay:1.52s}
.methodology__wordmark .wm-i:hover .wm-ping-ring--1{animation:pg-ringH 1.2s cubic-bezier(.17,.55,.35,1);animation-delay:.6s}
.methodology__wordmark .wm-i:hover .wm-ping-ring--2{animation:pg-ringH 1.2s cubic-bezier(.17,.55,.35,1);animation-delay:.82s}
/* Idle-Ping (JS toggelt .wm-idle alle ~7s, nur im Viewport) */
.methodology__wordmark.wm-idle .wm-ping-ring--1{animation:pg-ringI 1.4s cubic-bezier(.17,.55,.35,1)}
.methodology__wordmark.wm-idle .wm-ping-ring--2{animation:pg-ringI 1.4s cubic-bezier(.17,.55,.35,1);animation-delay:.22s}
.methodology__wordmark.wm-idle .wm-i-dot{animation:pg-dotI 1s ease}
@keyframes pg-ring {0%{transform:scale(.3);opacity:0}10%{opacity:.85}100%{transform:scale(3.4);opacity:0}}
@keyframes pg-ringH{0%{transform:scale(.3);opacity:0}10%{opacity:.85}100%{transform:scale(3.4);opacity:0}}
@keyframes pg-ringI{0%{transform:scale(.3);opacity:0}10%{opacity:.55}100%{transform:scale(3);opacity:0}}
@keyframes pg-dotI {0%{transform:scale(1)}30%{transform:scale(1.16);filter:brightness(1.45)}100%{transform:scale(1);filter:brightness(1)}}

/* —— N: Outline immer sichtbar, Füllung FLIESST dem Buchstaben entlang ——
   dicke Stroke auf der n-Mittellinie (in die n-Form geclippt), dashoffset-
   Animation: linker Strich hoch → über den Bogen → rechter Strich runter */
.methodology__wordmark .wm-n-flow{stroke-dasharray:100 100;stroke-dashoffset:100;
  transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1)}
.methodology__wordmark .wm-n:hover .wm-n-flow{stroke-dashoffset:0}
/* Scroll-in: einmal durchfließen (füllen → halten → nach rechts rausfließen) */
.methodology__wordmark.is-visible .wm-n-flow{animation:pg-flow 2.4s cubic-bezier(.65,0,.35,1) backwards;animation-delay:1.5s}
@keyframes pg-flow{0%{stroke-dashoffset:100}42%{stroke-dashoffset:0}68%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}

/* —— G: schraffiert sich (Linien zeichnen sich gestaffelt) —— */
.methodology__wordmark.is-visible .wm-g-hatch{animation:pg-hatch .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(2.15s + var(--hi)*.022s)}
.methodology__wordmark .wm-g:hover .wm-g-hatch{animation:pg-hatchH .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--hi)*.02s)}
@keyframes pg-hatch {from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pg-hatchH{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.methodology__wordmark.is-visible .wm-g-dot{animation:pg-node .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:2.6s}
.methodology__wordmark .wm-g-dot{transform-box:fill-box;transform-origin:center}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer{background:#fff}
.site-footer__main{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,7vw,8rem);align-items:center;
  padding-block:clamp(3.5rem,8.5vw,8.25rem)}
/* Doppel-Chevron (hochkant, Feedback 3) */
.site-footer__chevron{width:clamp(90px,10.5vw,145px);color:var(--c-blue)}
.site-footer__contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 3rem;align-content:center;align-items:start;max-width:640px}
.site-footer__name{grid-column:1/-1;font-weight:700;font-size:clamp(1.1rem,1.76vw,1.5rem);margin-bottom:clamp(1rem,1.9vw,1.6rem)}
.site-footer__addr{font-style:normal;line-height:1.55;font-size:clamp(1rem,1.76vw,1.5rem)}
.site-footer__links{font-size:clamp(1rem,1.76vw,1.5rem)}
.site-footer__links a{text-decoration:underline;text-underline-offset:3px;line-height:1.55}
/* Abschluss-Bar: flaches Coral mit Grain (wie Header), hoch, Links rechts */
/* z-index über dem Float-Badge (95): der Kontakt-Button taucht am Seitenende
   hinter dem coral Balken ab – dort übernimmt das große CTA-Badge */
.site-footer__bar{position:relative;z-index:96;background:var(--c-coral)}
.site-footer__bar::before{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:90px;opacity:.9;mix-blend-mode:overlay;pointer-events:none}
.site-footer__bar-inner{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:1rem;
  padding-block:clamp(2.6rem,5.8vw,5rem);flex-wrap:wrap}
.site-footer__copy{font-size:.8rem;margin-right:auto;opacity:.85}
.site-footer__legal{display:flex;gap:clamp(1.5rem,3vw,2.2rem)}
.site-footer__legal a{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.85rem,1.24vw,1.0625rem)}
.site-footer__legal a:hover{opacity:.6}

/* ── Error ──────────────────────────────────────────────────────────────── */
.error-page__inner{text-align:center;max-width:30ch;margin-inline:auto}
.error-page__btn{margin-top:2rem;display:flex;justify-content:center}

/* ── Prose (Rechtstexte) ────────────────────────────────────────────────── */
.prose{max-width:70ch;line-height:1.7;margin-top:1.5rem}
.prose h2{margin:2rem 0 .6rem;font-size:1.4rem;font-weight:700}
.prose h3{margin:1.4rem 0 .4rem;font-size:1.1rem;font-weight:700}
.prose p{margin-bottom:1rem}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose ul{list-style:disc;padding-left:1.4rem;margin-bottom:1rem}

/* ── Reveal-Animation ───────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
/* Bild-Container nur faden – translate während des Bild-Decodings kann in
   Chrome halb gerenderte Bilder hinterlassen */
figure.reveal{transform:none}


/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .grid-2,.project-intro__grid{grid-template-columns:1fr;gap:2.2rem}
  .content-block.is-right .grid-2{direction:ltr}
  .cards,.team-grid,.service-grid,.value-grid{grid-template-columns:1fr 1fr}
  .section--studio .grid-2{grid-template-columns:1fr}
  .section--studio .section__media{order:2}
}
@media (max-width:680px){
  :root{--section-y:clamp(2.8rem,9vw,4rem)}
  .nav-toggle{display:flex}
  .site-header__inner{align-items:center}
  .nav{position:fixed;inset:0;background:var(--c-coral);flex-direction:column;justify-content:center;
    align-items:flex-start;gap:2.2rem;transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);
    z-index:50;padding:clamp(2rem,9vw,3.5rem);overflow:hidden}
  /* Marken-Grain + große Deko-Schleife im Hintergrund */
  .nav::before{content:"";position:absolute;inset:0;background-image:var(--grain);
    background-size:110px;opacity:.9;mix-blend-mode:overlay;pointer-events:none}
    /* (Ring-Deko entfernt – Team-Feedback: wirkte wie ein Fremdkörper) */
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;align-items:flex-start;gap:1.9rem;text-align:left}
  .nav__list a{font-size:clamp(1.9rem,8.5vw,2.6rem);letter-spacing:.06em}
  .nav__list>li{position:relative}
  /* Stagger: Punkte gleiten nacheinander rein */
  .nav__list>li,.nav .lang{opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1)}
  .nav.is-open .nav__list>li:nth-child(1){transition-delay:.10s}
  .nav.is-open .nav__list>li:nth-child(2){transition-delay:.17s}
  .nav.is-open .nav .lang,.nav.is-open .lang{transition-delay:.26s}
  .nav.is-open .nav__list>li,.nav.is-open .lang{opacity:1;transform:none}
  /* Submenu: eingeklappt, öffnet per Tap auf den Pfeil-Toggle */
  .nav__item--sub .nav__dropdown{position:static;opacity:1;pointer-events:auto;padding-top:0;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
  .nav__item--sub.is-expanded .nav__dropdown{grid-template-rows:1fr}
  .nav__item--sub .nav__dropdown-inner{overflow:hidden;gap:.55rem;padding-left:.15em}
  .nav__item--sub .nav__dropdown a{font-size:1.02rem;opacity:.85;letter-spacing:.16em}
  .nav__item--sub.is-expanded .nav__dropdown-inner{padding-top:.9rem}
  .nav__sub{display:none}
  /* Toggle-Chevron neben PROJEKTE */
  /* Mobil: kompakter Header (Feedback: viel zu groß) */
  :root{--header-h:64px}
  .logo__mark{width:76px}
  .logo__tag{font-size:.62rem;padding-top:.3rem;max-width:8.5em}
  .logo{padding-top:.2rem;gap:.65rem}
  /* Studio-Teaser-Bild nicht zu klein (Feedback) */
  .studio__img--2{width:100%;margin-left:0}
  /* Lange Button-Labels (z. B. „Exponat- & Ausstellungsbau") duerfen den
     Viewport nicht sprengen - Pills mobil auf volle Breite, Text bricht um */
  .pill-row{width:100%;max-width:100%}
  .pill-row .btn{min-width:0;white-space:normal;line-height:1.3;text-align:left}
  /* Projekt-CTA ohne Desktop-Einzug – Text lief rechts raus (Feedback) */
  .project-cta__inner{margin-left:0}
  .nav__expand{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;
    margin-left:.55rem;vertical-align:middle;color:var(--c-dark)}
  .nav__expand svg{width:1.5rem;height:auto;transition:transform .3s ease}
  .nav__item--sub.is-expanded .nav__expand svg{transform:rotate(180deg)}
  .lang{font-size:1.02rem}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .cards,.team-grid,.service-grid,.value-grid{grid-template-columns:1fr}
  .site-footer__main{grid-template-columns:1fr;gap:1.5rem}
  .site-footer__contact{grid-template-columns:1fr;gap:.3rem}
  .site-footer__chevron{width:90px}
  .process__step{grid-template-columns:auto 1fr;gap:1rem}
  .hero--full .hero__media{height:clamp(360px,68vh,520px)}
  .journey__label--2{right:0}
  .journey__label--3{left:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .badge__svg{animation:none}
  .methodology__wordmark .wm-g-hatch{animation:none!important;stroke-dashoffset:0!important}
  .methodology__wordmark .wm-p,.methodology__wordmark .wm-i-seg,.methodology__wordmark .wm-i-dot,
  .methodology__wordmark .wm-i-node,.methodology__wordmark .wm-g-dot,
  .methodology__wordmark .wm-n-flow{animation:none!important;transition:none!important;stroke-dashoffset:0!important}
  .methodology__wordmark .wm-ping-ring{animation:none!important;opacity:0!important}
}

/* ── Futura-Fett: Adobe trennt Bold in die Familie 'futura-pt-bold' ───────
   Alle fett (700) gesetzten Elemente MÜSSEN diese Familie nennen, sonst
   bleibt es beim Book-Schnitt von 'futura-pt' (zu dünn). Fließtext/Buttons
   bleiben bei 'futura-pt' (Book/Medium). Nur font-family wird gesetzt –
   die font-weight:700 der Ursprungsregeln bleibt unangetastet. */
strong,b,
.h-lg,.h-md,.h-sm,
.h-lg em,.h-md em,.h-sm em,
.hero__headline em,
.topline,
.nav__list a,.nav__dropdown a,.lang,
.badge__text,
.result,.spec-row dd,
.testimonial__quote,.testimonial__label,.testimonial__cite strong,
.filter__btn,.card__cat,.card__title,
.member__role,.service__num,
.studio-team__name strong,
.logos__names li,.founder figcaption strong,
.methodology__ribbon-text,.journey__txt,.emo-journey__txt text,
.btn-circle,
.site-footer__name,.site-footer__legal a,
.prose h2,.prose h3{
  font-family:var(--font-sans-bold);
}