/* =========================================================================
   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{
  /* Styleguide-Basisfarben (Feedback 08.07.) – alle Schattierungen davon abgeleitet */
  --c-dark:#025259;   /* Teal    */
  --c-blue:#c0dfeb;   /* Hellblau */
  --c-coral:#ff947a;  /* Korall  */
  --c-white:#ffffff;
  /* abgeleitete Töne (aus den drei Basisfarben gemischt) */
  --c-coral-light:color-mix(in srgb,var(--c-coral) 58%,#fff);
  --c-coral-2:color-mix(in srgb,var(--c-coral) 88%,#000);
  --c-blue-deep:color-mix(in srgb,var(--c-blue) 72%,var(--c-dark));
  --c-ink:color-mix(in srgb,var(--c-dark) 80%,#000);

  /* 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(96px,8.6vw,120px);

  --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");
  /* app.js ersetzt --grain zur Laufzeit durch eine echte Farbrausch-Kachel
     (Vorlage Boris), 0 Byte; das feTurbulence oben bleibt No-JS-Fallback. */

  /* ── Coral-Hintergrund „Boris" (Feedback 4b) ──────────────────────────────
     Warmes Coral-Feld: hell unten-links + linke/untere Kante, tiefer oben-rechts.
     Als eine Variable, damit ALLE Coral-Flächen dasselbe Feld zeigen; per
     background-attachment:fixed wirken die gestapelten Flächen als ein Feld. */
  --coral-base:#e2966f;
  /* Boris-Coral-Feld. Der fixe Header sitzt immer OBEN im Viewport → zeigt den
     oben-/links-Bloom → wirkte im Header wie eine helle „Farbüberlagerung".
     Darum oben-links (Radial .8→.24) + links-Linear (.5→.2) gedämpft; das
     Haupt-Boris-Licht UNTEN-links (Radial .95) bleibt. Werte hier feinjustieren. */
  --coral-field:
    radial-gradient(52% 44% at -2% 104%, rgba(250,241,234,.95) 0%, rgba(250,241,234,0) 66%),
    radial-gradient(84% 48% at -6% -8%, rgba(249,234,226,.24) 0%, rgba(249,234,226,0) 76%),
    linear-gradient(90deg, rgba(248,235,228,.2) 0%, rgba(248,235,228,0) 70%),
    linear-gradient(0deg, rgba(247,226,214,.58) 0%, rgba(247,226,214,0) 56%);
}
/* Gemeinsames Coral-Feld für alle Coral-Flächen (überschreibt die alten
   flachen/radialen Coral-Hintergründe weiter unten – steht bewusst früh, die
   surface-spezifischen Regeln setzen NUR noch Position/Layer, nicht die Farbe) */
.bg-coral,.site-header,.hero,.section--emotion,.cat-intro,.site-footer__bar{
  background-color:var(--coral-base);
  background-image:var(--coral-field);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* ── 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.3;
  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}
/* Fokus feiner (Feedback S1): dünner + gedämpft, bleibt für A11y sichtbar */
:focus-visible{outline:2px solid color-mix(in srgb,var(--c-dark) 55%,transparent);outline-offset:2px;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{color:var(--c-dark)} /* Coral-Feld via gemeinsame Regel oben */
.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:180px;opacity:.90;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.bg-blue::before{opacity:.65}
.bg-teal::before{opacity:.5} /* Feedback: auf Grün (Teal) Korn deutlich leichter (stach hervor) */
.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{font-style:italic;font-family:var(--font-sans)}
/* h3 (.h-md/.h-sm): kein Kursiv-Akzent (Feedback T4) */
.h-md em,.h-sm em{font-style:normal}
/* 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)} /* Feedback: kein globaler 15ch-Umbruch mehr (Eyebrows wie „Konzeption & Gestaltung" einzeilig) */
/* Design-Detail: Topline "hängt" links vor dem Textblock (LO9/V5-Vorlage) —
   Jonas 12.07.: wieder hängend statt bündig (Team-Wunsch „bündig" revertiert) */
.topline--hang{margin-left:clamp(-56px,-3.6vw,0px)}
.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.3;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 = Teil des durchgehenden Coral-Felds (Hintergrund via .site-header oben) */
/* ⚠️ KEIN will-change:transform / transform am Header! Das macht den Header zum
   Containing-Block → background-attachment:fixed haftet dann am Header-Kasten
   (Verlauf in den dünnen Streifen gequetscht) statt am Viewport → sichtbare Kante
   zum Hero. Ohne will-change haftet das Feld am Viewport = nahtlos zum Hero. */
/* Ein-/Ausblenden über OPACITY (FB 20.07.: auf iOS blieb beim Scrollen ein
   leerer Header-Rest stehen)! Begründung:
   – KEIN transform: macht den Header zum Containing-Block →
     background-attachment:fixed haftet am Header-Kasten statt am Viewport.
   – KEIN top: top animiert auf dem Main-Thread; iOS friert das während des
     Momentum-Scrolls ein → Header bleibt halb ausgefahren stehen (leerer
     Streifen). Opacity läuft auf dem Compositor und erzeugt (anders als
     transform) KEINEN Containing-Block → Coral-Feld bleibt nahtlos. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100}
.site-header.is-hidden{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s .3s,padding-bottom .25s ease}
/* Offenes Mobile-Menü: immer sichtbar */
body.nav-open .site-header{opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--coral-base);background-image:none}
/* Feedback: KEIN abweichender Scroll-Hintergrund mehr (das erzeugte die sichtbare
   Kante + „komische Verläufe" im Menübereich). Der Header zeigt in ALLEN Zuständen
   dasselbe Coral-Feld wie der Hero darunter → nahtlos. */
/* 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:180px;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:opacity .3s ease,visibility 0s 0s,padding-bottom .25s ease}
.site-header:has(.nav__item--sub:hover),
.site-header:has(.nav__item--sub:focus-within){padding-bottom:52px}
/* Feedback J1 (08.07.): Logo ~10% kleiner + etwas mehr Luft unten →
   Logo leicht nach oben gerückt (weniger padding-top), damit unter der
   Wortmarke mehr Abstand zur Header-Unterkante bleibt. */
.logo{display:flex;align-items:flex-start;gap:.9rem;color:var(--c-dark);padding-top:0}
/* Lockup (Wortmarke + Claim, Version 07.07. mit größerem Claim):
   viewBox 653.1 breit, Wortmarke darin 276.6 → Faktor 2,36× zur reinen
   Wortmarke, damit „ping" optisch gleich groß bleibt wie vorher.
   J1 (08.07.): ~10% kleiner skaliert (244→220 / 22.4→20.2vw / 308→277). */
.logo__mark{display:block;width:clamp(220px,20.2vw,277px)}
.logo__mark svg{width:100%;height:auto}
/* Claim steckt jetzt in der Lockup-Grafik; Tagline nur unsichtbar im DOM
   (für SEO/Screenreader), ohne visuelle Wirkung */
.logo__claim-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.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:clamp(.82rem,1.24vw,1.0625rem);color:var(--c-dark)}
/* N-e (Doc 3e): kein Hover-Ausblenden; langer Pfeil erscheint vor aktivem/gehovertem Punkt.
   :not(.nav__sub) → die aktive Unterzeile „→ MUSEEN" erbt NICHT den Top-Level-Pfeil
   (sie bekommt ihren eigenen Inline-Pfeil, s.u.). */
.nav__list>li>a{position:relative}
/* Feedback 10.07.: Top-Level-Pfeil (Projekte/Studio) verhält sich GENAU wie im
   Submenu – er wächst INLINE vor dem Wort und schiebt es nach rechts (statt
   absolut daneben zu erscheinen). mask-size fix + overflow:hidden = Reveal von links. */
.nav__list>li>a:not(.nav__sub)::before{content:"";display:inline-block;vertical-align:middle;
  width:0;height:.62em;margin-right:0;opacity:0;overflow:hidden;background:currentColor;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='66' y2='12'/%3E%3Cpolyline points='57 4 69 12 57 20'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center/2em .62em;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='66' y2='12'/%3E%3Cpolyline points='57 4 69 12 57 20'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center/2em .62em;
  transition:width .2s ease,margin-right .2s ease,opacity .16s ease}
.nav__list>li>a:not(.nav__sub):hover::before{width:2em;margin-right:.5em;opacity:1}
/* Fester Slot wie im Submenu: der Pfeil-Platz ist rechts RESERVIERT und schrumpft
   beim Hover auf 0 – das Wort rutscht in den Platz, der Nachbar (Studio/DE-EN)
   bleibt stehen. Netto-Breite des Menüpunkts konstant. */
.nav__list>li>a:not(.nav__sub){padding-right:2.5em;transition:padding-right .2s ease,color .15s ease}
.nav__list>li>a:not(.nav__sub):hover{padding-right:0}
/* Aktive Seite (Feedback 16.07.): Pfeil bleibt wie im Hover-Zustand stehen,
   damit man sieht, wo man ist. Auf Kategorie-Landingpages greift weiterhin
   die is-cat-active-Ausnahme (!important oben) – dort markiert der Pfeil
   die aktive Zielgruppe statt „Projekte". */
.nav__list>li>a[aria-current]:not(.nav__sub)::before{width:2em;margin-right:.5em;opacity:1}
.nav__list>li>a[aria-current]:not(.nav__sub){padding-right:0}
/* N-e (Doc 3e): Auf Kategorie-Landingpages KEIN Pfeil vor „Projekte" – der Pfeil
   steht stattdessen vor der aktiven Zielgruppe (→ MUSEEN via .nav__sub bzw. im Dropdown). */
.nav__item--sub.is-cat-active>a:not(.nav__sub)::before{width:0!important;margin-right:0!important;opacity:0!important}
/* Pfeil unterdrückt → Slot behalten (Wort bleibt links, Nachbar stabil) */
.nav__item--sub.is-cat-active>a:not(.nav__sub){padding-right:2.5em!important}
/* 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:500;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:2.2em;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 80 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='66' y2='12'/%3E%3Cpolyline points='57 4 69 12 57 20'/%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 80 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='66' y2='12'/%3E%3Cpolyline points='57 4 69 12 57 20'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
/* Dropdown-Pfeil erscheint nur bei Hover/aktiv (Doc 3c/3e).
   B1 (08.07.): Der Text „springt" mit dem Pfeil nach rechts – der Pfeil wächst
   von Breite 0 auf volle Breite (mask-size fix + overflow:hidden = sauberes
   Reveal von links), der nachfolgende Text rückt entsprechend nach. */
.nav__dropdown a::before{width:0;margin-right:0;opacity:0;overflow:hidden;
  -webkit-mask-size:2.2em .62em;mask-size:2.2em .62em;
  -webkit-mask-position:left center;mask-position:left center;
  transition:width .2s ease,margin-right .2s ease,opacity .16s ease}
.nav__dropdown a:hover::before,.nav__dropdown a[aria-current]::before{width:2.2em;margin-right:.5em;opacity:1}
.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}
/* Feedback 12.07.: Der Pfeil schiebt „PROJEKTE" nach rechts (wie im Submenu).
   Damit das Dropdown nicht „links am Pfeil" hängen bleibt, folgt es dem Wort:
   left = exakte Pfeil-Breite (2em + .5em margin in Top-Level-Font). NICHT auf
   Kategorie-Seiten (dort ist der „PROJEKTE"-Pfeil unterdrückt, Wort bleibt links). */
.nav__item--sub:hover:not(.is-cat-active) .nav__dropdown{
  left:calc(2.5 * clamp(.82rem,1.24vw,1.0625rem))}
.lang{display:flex;gap:.5rem;font-size:clamp(.82rem,1.24vw,1.0625rem);font-weight:700;letter-spacing:.2em}
.lang a{opacity:.5}
.lang a.is-active{opacity:1} /* aktive Sprache nur ausgegraut-Unterschied, keine Unterlinie (Feedback 13.07.) */

.nav-toggle{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;z-index:60}
/* 3 Punkte übereinander statt Burger (FB 19.07., Vergleich); beim Öffnen
   morphen die äußeren Punkte zu Balken und bilden das X */
.nav-toggle span{display:block;height:6px;width:6px;background:var(--c-dark);border-radius:50%;
  transition:transform .3s,opacity .2s,width .3s,height .3s,border-radius .3s}

/* ── Buttons / Pills ────────────────────────────────────────────────────── */
/* Buttons in Futura Demi (weight 600) – braucht den Demi-Schnitt im Adobe-Kit */
/* Buttons: gleiche Typo wie Topline/Nav (T5): 700 · .2em · clamp(.82…) */
.btn{display:inline-flex;align-items:center;gap:1.15rem;padding:.74em 1.85em;border-radius:999px; /* gap .8→1.15rem: Luft für den nach rechts wachsenden Pfeil (FB 20.07. PDF #1) */
  font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.82rem,1.24vw,1.0625rem);line-height:1;
  white-space:nowrap}
.btn__arrow{display:inline-flex;align-items:center;width:clamp(30px,2.9vw,42px);flex:0 0 auto;overflow:visible}
.btn__arrow svg{width:100%;height:auto;display:block;overflow:visible}
.btn__arrow-line{transform-box:fill-box;transform-origin:left center;transition:transform .25s ease}
.btn__arrow-head{transition:transform .25s ease}
/* Hover (B1): KEIN Farbwechsel, KEIN Springen – nur der Pfeil wird etwas
   länger, und zwar nach RECHTS (FB 20.07. PDF #1) */
.btn:hover .btn__arrow-line{transform:scaleX(1.32)}
.btn:hover .btn__arrow-head{transform:translateX(8px)}
/* Pfeile im 52er-Koordinatenraum (Studio-/Kategorie-/Projekt-Buttons):
   gleiche optische Verlängerung wie die 24.5er-svgs (Einheiten ≈ ×2.12) */
.btn:hover svg[viewBox="0 0 52 12"] .btn__arrow-line{transform:scaleX(1.45)}
.btn:hover svg[viewBox="0 0 52 12"] .btn__arrow-head{transform:translateX(17px)}
/* Teal-Button: Textfarbe Hellblau (B2) */
.btn--teal{background:var(--c-dark);color:var(--c-blue)}
.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 reicht UNTER den fixen Header (zieht sich um die Header-Höhe nach oben und
   polstert den Inhalt wieder herunter → netto gleiche Position, aber das Coral-Feld
   füllt den Bereich hinter dem Header. Verhindert den weißen Streifen (body-Padding),
   der beim Hochscrollen kurz auftauchte, bevor der Header wieder einblendet. */
.hero{position:relative;margin-top:calc(-1 * var(--header-h));padding-top:var(--header-h)}
/* 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:180px;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}
/* Kategorie-Heros: etwas breiter, damit die längeren Titel mit den gesetzten
   Umbrüchen sauber 3-zeilig bleiben (Home-Hero bleibt bei 15ch unberührt). */
.t-category .hero__headline{max-width:26ch}

/* 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}
/* Coral-Feld + Korn sind viewport-fixiert (gemeinsame Regel oben) → Hero und
   Emotion zeigen dasselbe Feld, die Naht ist ohne Extra-Verlauf nahtlos. */
/* 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,60s) linear infinite;will-change:transform} /* Feedback: halbe Geschwindigkeit (30s→60s) */
.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}
/* Feedback: Bilder liefen randlos = viel zu groß. Jetzt im Raster enthalten,
   Bildspalte schmaler, Textspalte breiter, Bildgröße gedeckelt. */
.content-block .grid-2{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,5.5rem)}
.content-block .section__media{margin:0}
.content-block .media-stack img{width:100%;max-width:420px}
.content-block.is-left  .media-stack{margin-right:auto}   /* Bild an die Innenkante */
.content-block.is-right .media-stack{margin-left:auto}
@media (max-width:900px){
  .content-block .grid-2{grid-template-columns:1fr}
  .content-block .media-stack img{max-width:none}
}
.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}

/* ── Projekte-Übersicht: klassisches Kachel-Grid, 2-spaltig (Vorlage 13.07.) ──
   Bild (3:2) · Kicker (Client, Versal) · Sans-Bold-Headline · Kurztext ·
   „Projekt ansehen →". Ganze Kachel klickbar. Text = --c-dark auf Weiß.
   Stellschrauben: Spaltenzahl (grid-template-columns), Bild-Ratio, Headline. */
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.6rem,4.5vw,4.6rem) clamp(2rem,4vw,3.6rem);margin-top:clamp(.5rem,1.5vw,1.4rem)}
.proj-card{position:relative;display:flex;flex-direction:column;color:var(--c-dark);text-decoration:none}
.proj-card__media{overflow:hidden;background:var(--c-blue);aspect-ratio:3/2;
  margin-bottom:clamp(1.1rem,1.9vw,1.5rem)}
.proj-card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.proj-card:hover .proj-card__media img{transform:scale(1.04)}
.proj-card__ph{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--c-blue),color-mix(in srgb,var(--c-blue) 55%,#fff))}
.proj-card__kicker{font-family:var(--font-sans-bold);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--c-dark);margin:0 0 .7rem}
.proj-card__title{font-family:var(--font-sans-bold);font-weight:700;line-height:1.12;
  font-size:clamp(1.3rem,1.9vw,1.7rem);color:var(--c-dark);margin:0 0 .75rem;overflow-wrap:break-word}
.proj-card__title em{font-style:italic}
.proj-card__text{font-size:clamp(.95rem,1.08vw,1.05rem);line-height:1.4;color:var(--c-dark);
  opacity:.9;margin:0 0 1.15rem;max-width:46ch}
.proj-card__more{font-family:var(--font-sans-bold);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:var(--c-dark);
  display:inline-flex;align-items:center;gap:.6rem;margin-top:auto}
.proj-card__more::after{content:"";position:absolute;inset:0} /* ganze Kachel klickbar */
.proj-card__arrow{display:inline-block;width:1.75em;height:.62em;background:currentColor;flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='66' y2='12'/%3E%3Cpolyline points='57 4 69 12 57 20'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='66' y2='12'/%3E%3Cpolyline points='57 4 69 12 57 20'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center/contain;
  transition:transform .25s ease}
.proj-card:hover .proj-card__arrow{transform:translateX(5px)}
.proj-card:focus-visible{outline:2px solid var(--c-coral-2);outline-offset:5px}
@media (max-width:640px){.proj-grid{grid-template-columns:1fr;gap:clamp(2.2rem,7vw,3rem)}}

.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}
/* Feedback: Karten-Kopf (Eyebrow+Heading+Intro) und „weitere Projekte"-Button zentriert */
.cat-projects__head{text-align:center;max-width:46ch;margin:0 auto clamp(2rem,3.6vw,3rem)}
.cat-projects__head .topline{margin-bottom:.9rem}
.cat-projects__more{margin-top:clamp(1.8rem,3.4vw,2.8rem);display:flex;justify-content:center}
/* 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);max-width:15ch} /* nur DIESE Eyebrow bewusst 2-zeilig */
.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}
/* Coral-Feld + Korn viewport-fixiert (gemeinsame Regel oben) → nahtlos zum Hero. */
/* 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%;
  /* Feedback: linke Fade-Kante endet direkt rechts der Journey-Schleife (Faktor .42),
     rechte Fade-Kante etwas weiter innen (91→97%). */
  --ej-edge:calc(var(--gutter) + clamp(238px,25vw,338px)*.42 - 1vw);
  -webkit-mask:linear-gradient(90deg,transparent calc(var(--ej-edge) + 6px),#000 calc(var(--ej-edge) + 96px),#000 91%,transparent 97%);
          mask:linear-gradient(90deg,transparent calc(var(--ej-edge) + 6px),#000 calc(var(--ej-edge) + 96px),#000 91%,transparent 97%)}
@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 – im zentrierten Kopf */
.cat-projects__head .cat-projects__heading{max-width:none}
.cat-projects__intro{margin:.9rem auto 0;
  font-size:clamp(.95rem,1.32vw,1.125rem);line-height:1.6;max-width:52ch}
.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)}
/* Feedback: Eyebrow „KONTAKT" nicht mehr weit weghängen – Mitte des Wortes auf
   der Linie mit dem Anfang der Headline („Planen") = translateX(-50%). */
.end-cta .topline{margin-left:0;display:inline-block;width:max-content;transform:translateX(-50%)}
.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 (Feedback: Block MITTIG – nur das Bild sitzt links
   außerhalb der Mitte, Text linksbündig; Coral-Schleife gespiegelt + höher,
   rechts angeschnitten aus dem Bild laufend, keine offenen Enden sichtbar) */
.testimonial--person{text-align:left;overflow:hidden;z-index:1}
.testimonial--person .testimonial__loop{top:50%;bottom:auto;
  right:clamp(-190px,-11vw,-90px);transform:translateY(-52%) scaleX(-1);
  width:clamp(230px,25vw,340px);height:auto}
.testimonial--person .testimonial__inner{margin-inline:auto;max-width:58rem}
.testimonial__grid{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center;max-width:none}
.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 entfernt — wirkte halbtransparent (FB 20.07. PDF #3) */
/* 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)}
/* Team-Eyebrow „TEAM" hängt (V5: Mitte über Heading-Anfang, wie end-cta) */
.studio-team .topline{display:inline-block;width:max-content;transform:translateX(-50%)}
.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-team .topline{transform:none}
  .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:180px;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:15px;letter-spacing:.16em;fill:var(--c-dark);dominant-baseline:central} /* Feedback: deutlich kleiner (25→15px) */

/* 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}

/* Werkstatt-Foto: rechts oben, ragt über die Welle (Unterseiten – Home liefert
   das Foto via studio__img--2). Position/Größe per #method-photo justierbar
   (tweaks.css). Mehr hellblauer Vorlauf, damit das Foto über der Welle Platz hat. */
/* höhere Spezifität als body:not(.is-home) .methodology__wave (0,2,1) */
.methodology.methodology--has-photo .methodology__wave{padding-top:clamp(6rem,15vw,13rem)}
.methodology__photo{position:absolute;z-index:3;top:clamp(1.5rem,3vw,3rem);
  right:clamp(0px,2.5vw,28px);width:clamp(220px,31vw,430px);margin:0;line-height:0}
.methodology__photo img{width:100%;height:auto;display:block;border-radius:0}
@media (max-width:820px){
  .methodology.methodology--has-photo .methodology__wave{padding-top:clamp(2.5rem,6vw,5rem)}
  .methodology__photo{display:none}
}

.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:.35rem} /* Feedback: keine Leerzeile unter „ping design" */
.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} /* Coral-Feld via gemeinsame Regel oben */
.site-footer__bar::before{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:180px;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}
}
/* Tablet-Bereich: Header nicht auf die Desktop-Mindesthöhe (96px)
   aufblasen — schlanker Balken wie mobil (FB 20.07.) */
@media (max-width:820px) and (min-width:681px){
  :root{--header-h:clamp(64px,8.6vw,96px)}
  .logo__mark{width:180px} /* sonst füllt das Desktop-Logo (220px+) den Balken ohne Luft */
}
@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-color:var(--coral-base);background-image:var(--coral-field);background-attachment:fixed;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}
  /* Aktive Zielgruppe steht mobil schon als aktiver Dropdown-Punkt (mit Pfeil) im
     ausgeklappten Menü → die separate „→ MUSEEN"-Unterzeile ausblenden.
     Spezifität muss .nav__list a.nav__sub{display:block} schlagen (sonst sichtbar). */
  .nav__list a.nav__sub{display:none}
  /* Toggle-Chevron neben PROJEKTE */
  /* Mobil: schlanker Header — nur wenig Luft über/unter dem Logo
     (FB 20.07.: 64px → 60px, Logo mittig statt .2rem nach unten) */
  :root{--header-h:60px}
  .logo__mark{width:162px} /* J1: ~10% kleiner (180→162) */
  .logo{padding-top:0;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{width:26px;height:3px;border-radius:3px}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(11px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
  .cards,.team-grid,.service-grid,.value-grid{grid-template-columns:1fr}
  .site-footer__main{grid-template-columns:auto 1fr;gap:1.4rem;align-items:center}  /* Pfeil neben Adresse (FB 19.07. #2) */
  .site-footer__contact{grid-template-columns:1fr;gap:.3rem}
  .site-footer__chevron{width:76px}
  .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,.btn-circle,
.site-footer__name,.site-footer__legal a,
.prose h2,.prose h3{
  font-family:var(--font-sans-bold);
}

/* ── Hover-Video auf Projekt-Kacheln (FB 18.07. #1/#6) ── */
.proj-card__media{position:relative}
.card-hover-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:0;transition:opacity .35s ease;
  pointer-events:none;z-index:1}
.card-hover-video.is-on{opacity:1}

/* ── Projekte-Übersicht auf Teal (FB 18.07. #6): weißer Text,
      „Projekt ansehen" als Coral-Akzent ── */
.bg-teal .proj-card,
.bg-teal .proj-card__kicker,
.bg-teal .proj-card__title,
.bg-teal .proj-card__text{color:#fff}
.bg-teal .proj-card__more{color:var(--c-coral)}
.bg-teal .proj-card:focus-visible{outline-color:#fff}
/* Text näher ans Bild: halber Abstand (FB 18.07. Nachtrag); +10px Luft (FB 20.07. #1) */
.bg-teal .proj-card__media{margin-bottom:calc(clamp(.55rem,.95vw,.75rem) + 10px)}

/* ── Platzhalter-Basis für Alt-Seiten ohne layout-ref.css
      (Testimonial-Foto auf space/teutolabs, FB 18.07. Nachtrag) ── */
.ph{position:relative;background:#CFD1D6;display:grid;place-items:center;overflow:hidden}
.ph__label{font:500 12px/1.35 var(--font-sans);color:rgba(20,20,20,.55);
  text-align:center;padding:0 1.2em}
.testimonial__ph-box{width:100%;aspect-ratio:313.24/349.73}
/* Befüllter Zustand auch ohne layout-ref.css (space/teutolabs, FB 20.07. #4) */
.ph--filled{padding:0}
.ph--filled .ph__label{display:none}
.ph.ph--filled > .ph__img{width:100%;height:100%;max-width:none;margin:0;
  object-fit:cover;object-position:center;display:block}
.ph.ph--filled.ph--contain{background:transparent}
.ph.ph--filled.ph--contain > .ph__img{object-fit:contain}

/* ── Projekt-Bildslider v2 (FB 20.07. #3): echtes Sliden statt Überblenden.
      Vor- und Nachbild bleiben als schmaler Anriss am Viewport-Rand sichtbar
      (Layout-Vorschau); Autoplay + Steuerung in app.js. Die Box-Geometrie
      kommt aus layout-ref.css (Referenzseiten) bzw. --flow (space/teutolabs,
      Alt-Layout im normalen Fluss). --o = Slide-Versatz (-1/0/+1, JS). ── */
.proj-slider{--slider-gap:clamp(20px,4.39vw,60px)}
.proj-slider__track{position:absolute;inset:0}
/* transform (translateX-Ziel) setzt app.js inline; die Transition hier
   animiert den Wechsel. .no-anim = Teleport (Wrap-Sprünge, Initialaufbau) */
.proj-slider__slide{position:absolute;inset:0;
  transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.proj-slider__slide.no-anim{transition:none}
.proj-slider__ph{width:100%;height:100%}
/* Fluss-Variante: zentriert in Referenz-Proportion, Pfeile im Bild */
.proj-slider--flow{position:relative;margin:clamp(2.8rem,6vw,5.2rem) auto;
  width:min(80.34vw,1097.42px)}
.proj-slider--flow .proj-slider__track{position:relative;inset:auto;
  aspect-ratio:1097.42/742.14}
.proj-slider--flow .proj-slider__btn{position:absolute;z-index:2;margin:0;padding:0;
  border:0;background:transparent;color:#fff;cursor:pointer;
  width:clamp(20px,2.62vw,36px);height:clamp(58px,7.63vw,105px);
  top:50%;transform:translateY(-50%)}
.proj-slider--flow .proj-slider__btn svg{width:100%;height:100%;display:block}
.proj-slider--flow .proj-slider__btn:hover{color:#C1DFEB}
.proj-slider--flow .proj-slider__btn--prev{left:clamp(14px,4.55vw,63px)}
.proj-slider--flow .proj-slider__btn--next{right:clamp(14px,3.9vw,54px)}
/* FB 20.07.: ab Desktop-Breite sitzen die Pfeile mittig im Anschnitt-Bild
   (Peek-Sliver = Abstand Box→Viewportrand minus Lücke) */
@media (min-width:821px){
  .proj-slider--flow .proj-slider__btn--prev{
    left:calc((100% - 100vw) / 4 - (var(--slider-gap) + clamp(20px,2.62vw,36px)) / 2)}
  .proj-slider--flow .proj-slider__btn--next{
    right:calc((100% - 100vw) / 4 - (var(--slider-gap) + clamp(20px,2.62vw,36px)) / 2)}
}
/* Teal-Luft unter dem Fluss-Slider: das margin-bottom collabierte aus dem
   Container (weißer Streifen unterm Slider, FB 20.07.) → Luft als Padding */
.content-sections:has(> .proj-slider--flow){padding-bottom:clamp(2.8rem,6vw,5.2rem)}
.proj-slider--flow{margin-bottom:0}

/* ── Mini-Videoplayer im Slider (FB 20.07. #9): nur Play/Pause + Zeitleiste,
      kein Autoplay. Leiste liegt unten im Bild; sichtbar solange pausiert,
      beim Abspielen nur bei Hover/Fokus. ── */
.proj-video video{cursor:pointer}
.proj-video__ui{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:linear-gradient(transparent,rgba(2,32,37,.6));color:#fff;
  opacity:0;transition:opacity .25s ease}
.proj-video.is-paused .proj-video__ui,
.proj-video:hover .proj-video__ui,
.proj-video__ui:focus-within{opacity:1}
.proj-video__play{flex:none;width:34px;height:34px;display:grid;place-items:center;
  margin:0;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}
.proj-video__play svg{width:22px;height:22px;display:block}
.proj-video__play:hover{color:#C1DFEB}
.proj-video .proj-video__ic-pause{display:none}
.proj-video.is-playing .proj-video__ic-pause{display:block}
.proj-video.is-playing .proj-video__ic-play{display:none}
.proj-video__seek{flex:1;-webkit-appearance:none;appearance:none;height:3px;
  margin:0;background:rgba(255,255,255,.35);cursor:pointer}
.proj-video__seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;background:#fff;border:0}
.proj-video__seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:#fff;border:0}
.proj-video__seek::-moz-range-progress{background:#fff;height:3px}
.proj-video__time{flex:none;font-family:var(--font-sans-bold);font-weight:700;
  font-size:.72rem;letter-spacing:.08em;min-width:4.5ch;text-align:right;
  font-variant-numeric:tabular-nums}

/* ── Badge mobil (FB 19.07. #3): kompakt, immer über den Sektionen —
      das Desktop-„Auftauchen" hinter Farbsektionen wirkt mobil zufällig ── */
@media (max-width:820px){
  .badge--float,.badge--page{width:104px;right:10px;bottom:10px;z-index:40}
}

/* ── Cookie-Einwilligung (27.07.) ──────────────────────────────────────────
   Schlichtes Teal-Band unten, in der Designsprache: Farbfläche + Typo +
   bestehende Pill-Buttons. Keine Rahmen/Radien, die es sonst nicht gibt. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--c-dark);color:#fff;
  box-shadow:0 -12px 32px rgba(2,82,89,.18)}
.consent__inner{max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1rem,2vw,1.4rem) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap}
.consent__text{font-size:clamp(.88rem,1.05vw,1rem);line-height:1.45;margin:0;
  max-width:64ch;color:#fff}
.consent__link{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.consent__link:hover{opacity:.8}
.consent__actions{display:flex;gap:.7rem;flex:0 0 auto}
.consent__btn{padding:.62em 1.6em;font-size:clamp(.72rem,.95vw,.82rem)}
@media (max-width:640px){
  .consent__inner{flex-direction:column;align-items:flex-start;gap:.9rem}
  .consent__actions{width:100%}
  .consent__btn{flex:1 1 0;justify-content:center}
}