/* ═══════════════════════════════════════════════════════════
   LE COMPTOIR · Website Styles
   Stand: Vorschlag 21.09.2026 (Typo + Farben nach Partner-Deck / Press Kit)
═══════════════════════════════════════════════════════════ */

/* ── Self-hosted Fonts ── */
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/noto-sans-v42-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/noto-sans-v42-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/noto-sans-v42-latin-700.woff2') format('woff2'); }   /* Figma: Versalzeilen (Kicker, CTA, Labels) in Bold */
@font-face { font-family: 'Baskervville'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/baskervville-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Baskervville'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/baskervville-v20-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Baskervville'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/baskervville-v20-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Baskervville'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/baskervville-v20-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Baskervville'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('fonts/baskervville-v20-latin-600italic.woff2') format('woff2'); }   /* Figma: Coucou, #connectionculture */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   Farben 1:1 aus dem Partner-Deck / Press Kit gesampelt
═══════════════════════════════════════════════════════════ */
:root {
  --white:    #FFFFFF;
  --beige:    #FAF7F2;   /* das eine helle Beige für alle Flächen */
  --offwhite: var(--beige);
  --cream:    var(--beige);
  --gold:     #C4975B;   /* Akzent, Kicker, Highlights in Headlines */
  --ink:      #332A2D;   /* Fließtext + Headlines (warmes Dunkel, nicht Schwarz) */
  --ink-60:   rgba(51,42,45,0.6);
  --ink-35:   rgba(51,42,45,0.35);
  --ink-15:   rgba(51,42,45,0.15);
  --dark:     #1E1E1E;
  --teal:     #3F5860;
  --sage:     #94B8AC;

  --serif: 'Baskervville', 'Libre Baskerville', Georgia, serif;
  --sans:  'Noto Sans', 'Helvetica Neue', Arial, sans-serif;

  --pad-x: clamp(24px, 6vw, 96px);
  --pad-y: clamp(72px, 9vw, 140px);
  --measure: 62ch;

  /* Typo-System nach Figma "Homepage NEU" (23.09.2026): 46 / 28 / 17 / 14 */
  --fs-headline: clamp(40px, 3.993vw, 57.5px); /* alle Headlines (H1/H2): 57,5 px bei 1440 (+25 %, 29.09.) */
  --fs-claim:    28px;                       /* Baskervville SemiBold Italic (Coucou, Hashtag, À bientôt) */
  --fs-body:     17px;                       /* Fließtext Noto Sans Light, Zeile 1.5 */
  --fs-small:    14px;                       /* Kicker, CTA, Buttons, Labels: Noto Sans Bold, Versalien */
  --ls-caps:     0;                          /* Figma: keine Laufweite in Versalzeilen */

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1680px;                                              /* Obergrenze: bis hier skalieren Fotos mit, darüber zentriert */
  --edge: max(0px, calc((100vw - var(--maxw)) / 2));          /* Rand neben dem Inhalt; beige Flächen laufen bis zum Fenster */
  --gutter: calc(var(--edge) + 0.05556 * min(100vw, var(--maxw)));
  --gap-end: clamp(56px, 8.33vw, 120px);                     /* Unterseiten: Abstand letzter Inhalt → Streifentrenner (120 px bei 1440) */   /* Kontentkante (80 px bei 1440) */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* Kompositionen enden exakt am Rand, Rundungsreste erzeugen keinen Querscroll */
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 600; }
::selection { background: var(--gold); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAFIE
═══════════════════════════════════════════════════════════ */

/* Kicker: Noto Sans Bold 14 in Gold, Hairline 10 px unter dem Text über die Spaltenbreite, 50 px bis zur Headline (Figma) */
.kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 19px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  padding-bottom: 10px;
  margin-bottom: 50px;
  position: relative;
}
.kicker::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease) 0.15s;
}
.is-visible .kicker::after,
.kicker.is-visible::after { transform: scaleX(1); }

/* Headline: Baskervville Regular, Satzschrift (nicht mehr Versalien), Gold-Highlights */
.h-display,
.h-section {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-headline);
  line-height: 1.05;           /* Ober- und Unterlängen berühren sich gerade nicht (29.09.) */
  letter-spacing: -0.03em;     /* Figma: -1,38 px bei 46 px */
  color: var(--ink);
  text-wrap: balance;
}
.h-claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;            /* Figma: Baskervville SemiBold Italic 28 */
  font-size: var(--fs-claim);
  line-height: 1.283;
  color: var(--gold);
}
.h-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--gold);
  margin-bottom: 10px;
}
.gold { color: var(--gold); }
.textlink { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.textlink:hover { color: var(--gold); }
.h-sub a:hover { text-decoration: underline; text-underline-offset: 3px; }
.closing .h-display { max-width: 30ch; }

.lead {
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: var(--measure);
}
.body { max-width: var(--measure); }
.body p + p, .lead + .body { margin-top: 1.5em; }   /* Leerzeile wie im Figma */
.h-display + .body, .h-section + .body, .h-display + .lead, .h-section + .lead { margin-top: 50px; }   /* Figma: 50 px Headline -> Text */
.body p strong { font-weight: 600; }

/* CTA: Noto Sans Bold 14, Versalien, unterstrichen (Figma), 50 px unter dem Text */
.cta {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 19px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .3s var(--ease);
}
.cta:hover { color: var(--gold); }
.cta-row { display: flex; flex-wrap: wrap; gap: 20px 44px; margin-top: 50px; }

/* Button (Newsletter, Kontakt) */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn--solid { background: var(--ink); color: var(--cream); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   Über dem Hero transparent + weiß, nach dem Scrollen weiß mit Ink
═══════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 40px max(24px, var(--gutter)) 20px;   /* seitlich auf der Rasterkante (80 px bei 1440), wie Fotos und Flächen */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #fff;
  transition: background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid {
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  padding: 12px max(24px, var(--gutter));
  box-shadow: 0 1px 0 var(--ink-15);
}
.site-header--static {
  position: relative;
  background: var(--white);
  color: var(--ink);
  padding: 14px var(--pad-x);
  box-shadow: 0 1px 0 var(--ink-15);
}
.brand {
  display: block;
  line-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.site-header.is-solid .brand,
.site-header--static .brand { opacity: 1; transform: none; }
.brand img { height: 38px; width: auto; }   /* 5 % kleiner als zuvor (40px) */
@media (max-width: 900px) { .brand img { height: 30px; } }
.nav { grid-column: 2; justify-self: center; display: flex; gap: 40px; }   /* zentriert (Sandra 28.09.) */   /* Figma: 40 px Abstand; vorerst nur Showroom, weitere Seiten folgen */
.nav a {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;          /* Figma: Noto Sans Light 14 */
  line-height: 19px;
  letter-spacing: 0;
  position: relative;
  padding: 6px 0;
}
.nav a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-spacer { justify-self: end; }
/* Social-Icons rechts in der Navi (Gegengewicht zum Logo) · Icons als Maske, damit sie Weiß/Ink mitwechseln */
.nav-social { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav-social a { display: block; line-height: 0; opacity: .9; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.nav-social a:hover { opacity: 1; transform: translateY(-1px); }
.nav-social .icon { display: block; width: 20px; height: 20px; }   /* Inline-SVG, fill = currentColor (weiß über dem Hero, Ink danach) */

/* Mobile: Burger */
.nav-toggle {
  display: none;
  justify-self: end;
  width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
  color: inherit;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 8px; right: 8px; height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto auto auto; gap: 20px; padding: 18px var(--pad-x); }
  .nav-toggle { display: block; }
  .header-spacer { display: none; }
  .nav-social { gap: 14px; }
  .nav-social .icon { width: 18px; height: 18px; }
  .nav {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    background: var(--white);
    color: var(--ink);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    gap: 28px;
    opacity: 0; pointer-events: none;
    transition: opacity .4s var(--ease);
    z-index: 90;                      /* unter dem Header (100), damit X und Icons oben bleiben */
  }
  .nav a { font-family: var(--serif); font-size: clamp(34px, 3.194vw, 46px); letter-spacing: 0; line-height: 1.2; }
  body.nav-open .nav { opacity: 1; pointer-events: auto; }
  body.nav-open .site-header {
    color: var(--ink); background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;   /* Backdrop-Filter würde das fixe Menü auf den Header begrenzen */
  }
  body.nav-open .brand { opacity: 1; transform: none; }
  .brand, .nav-social, .nav-toggle { position: relative; z-index: 95; }   /* über dem weißen Menü */
  body.nav-open .nav-toggle span { background: var(--ink); }
  body.nav-open { overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════
   HERO · Blur-Video bleibt
═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
}
.hero .video-wrapper { position: absolute; inset: 0; z-index: 0; }
.hero .video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 1.5s ease-in-out;
}
.hero .v1 { opacity: 1; }
.hero .v2 { opacity: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.5) 100%); }

/* Hero-Inhalt · Positionen nach Figma (1440 x 810): Logo oben 33,8 %, Coucou oben 81,6 %, Scroll-Linie 31 px über der Kante */
.hero-center { position: absolute; inset: 0; z-index: 2; text-align: center; }
.hero-logo-full {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  top: 33.8%;
  width: clamp(220px, 30.35vw, 437px);   /* Wortmarke 437 px breit bei 1440 (Figma-Box 438) */
  opacity: 0;
  animation: heroIn 1.8s var(--ease) .2s forwards;
}
.hero-coucou {
  position: absolute; left: 0; right: 0;
  top: 81.6%;
  font-family: var(--serif);
  font-style: italic; font-weight: 600;   /* Figma: Baskervville SemiBold Italic 28 */
  font-size: 28px; line-height: 1.283; letter-spacing: 0;
  color: #fff;
  opacity: 0;
  animation: heroIn 1.6s var(--ease) .7s forwards;
}
.hero-bottom {
  position: absolute; left: 0; right: 0; bottom: 31px; z-index: 2;
  display: flex; justify-content: center;
  opacity: 0;
  animation: heroIn 1.6s var(--ease) 1.8s forwards;
}
.hero-scroll {                       /* feiner Pfeil: 1 px Linie + Spitze, sanftes Nicken */
  display: flex; flex-direction: column; align-items: center;
  width: 16px; height: 40px;
  color: rgba(255,255,255,.9);
  animation: scrollHint 2.4s ease-in-out infinite;
}
.hero-scroll__line { width: 1px; height: 32px; background: currentColor; }
.hero-scroll__tip  { width: 9px; height: 9px; margin-top: -6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
@keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes heroBlurIn { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes scrollHint { 0%,100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(6px); opacity: .55; } }

/* ═══════════════════════════════════════════════════════════
   LAYOUT-BAUSTEINE
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   TRENNERSTREIFEN · unter dem Hero, 40 px bei 1440 (Figma), object-fit cover
═══════════════════════════════════════════════════════════ */
.divider-strip { height: clamp(24px, 2.78vw, 40px); line-height: 0; overflow: hidden; background: var(--white); }
.divider-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ═══════════════════════════════════════════════════════════
   INTRO · Scrollwege 1–3 nach Figma "Homepage NEU" (1440er Raster)
   Spalten @1440: 80 | 571 (links) | 138 | 513 (Text) | 138
   Desktop ≥ 1100 px: JS pinnt die Bühne (.is-pinned) und steuert die Bewegung
   Sonst (Mobile, reduced motion, zu kleine Höhe): alles untereinander im Fluss
═══════════════════════════════════════════════════════════ */
.intro { position: relative; background: var(--white); }
.intro__stage { position: relative; }
.intro__grid {
  position: relative;
  width: 100%; max-width: var(--maxw); margin: 0 auto;   /* skaliert bis 1680, darüber zentriert */
  display: grid;
  grid-template-columns: 5.556% 39.653% 9.583% 35.625% 9.583%;
  align-content: center;
  padding: clamp(56px, 6.74vw, 97px) 0 clamp(64px, 8vw, 120px);   /* 97 px Abstand zum Streifen (Figma) */
}
.intro__left  { grid-column: 2; align-self: start; position: relative; }
.intro__right { grid-column: 4 / -1; justify-self: start; width: 513px; max-width: calc(100% - 0.05556 * min(100vw, 1680px)); align-self: start; position: relative; }   /* Textblock 513 px (Figma), endet an der Kontentkante */

.intro__headline {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-headline);           /* wie alle Headlines */
  line-height: 1.05;
  letter-spacing: -0.03em;                 /* -1.38 px @46 px */
  color: var(--ink);
}
.intro__h1 { text-align: right; }          /* Figma: rechtsbündig an der Spaltenkante */
.intro__text { font-size: 17px; line-height: 1.5; font-weight: 300; color: var(--ink); }   /* Figma: Noto Sans Light 17 / 1.5 */
.intro__text p + p { margin-top: 1.5em; }  /* Leerzeile wie im Layout */
.intro__text .intro__p--strong { font-weight: 600; }

.intro__figure { position: relative; width: 100%; margin: clamp(48px, 6vw, 96px) 0 0; }
.intro__img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.intro__box {                              /* Figma: 592 x 274 bei -58/1201, #EFE6D6 zu 50 % */
  position: absolute; z-index: 0;
  left: -24.2%; top: 59.35%; width: 103.7%; height: 64%;
  background: rgba(239,230,214,.5);
}
.intro__claim { width: 100%; white-space: nowrap; margin-top: clamp(48px, 6vw, 96px); }   /* Zeilen sind fest umbrochen, bleibt innerhalb der Kontentkante */
.intro__hashtag {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 28px; line-height: 1.283;
  margin-top: 50px; color: var(--ink);
}

/* gepinnte Bühne (nur per JS gesetzt) */
.intro.is-pinned { height: 360vh; }                       /* 100vh Bühne + 260vh Scrollweg */
.intro.is-pinned .intro__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.intro.is-pinned .intro__grid { height: 100%; padding: 0; }
.intro.is-pinned .intro__left, .intro.is-pinned .intro__right, .intro.is-pinned .intro__box { will-change: transform; }
.intro.is-pinned .intro__figure { position: absolute; top: 100vh; left: 0; margin: 0; opacity: 0; }
.intro.is-pinned .intro__claim  { position: absolute; top: 100vh; left: 0; margin: 0; opacity: 0; }
.intro.is-pinned .intro__img { will-change: transform, filter; }

@media (max-width: 1099px) {
  /* Mobile + Tablet: alles untereinander in Lesereihenfolge H1 → Text → Foto → Claim (Spalten aufgelöst) */
  .intro__grid { grid-template-columns: 1fr; padding-left: var(--pad-x); padding-right: var(--pad-x); row-gap: 0; }
  .intro__left, .intro__right { display: contents; }
  .intro__h1 { order: 1; text-align: left; }
  .intro__right > div:first-child { order: 2; margin-top: 40px; }
  .intro__figure { order: 3; margin: 56px calc(-1 * var(--pad-x)) 0; width: auto; }   /* Mobile: Foto vollflächig bis zum Displayrand, ohne beige Fläche */
  .intro__box { display: none; }
  .intro__claim { order: 4; width: 100%; margin-top: 32px; }
  .intro__hashtag { font-size: 24px; margin-top: 32px; }
  .intro__grid { padding-bottom: 56px; }   /* Abstand Hashtag → Trenner = Abstand Trenner → Showroom */
}

/* ═══════════════════════════════════════════════════════════
   HOME-SEKTIONEN nach Figma-Strang (Michi, 24.09.2026) · 1440er Raster 80 | 571 | 138 | 513 | 138
   Bildkompositionen in Prozent der Spaltenbreite, damit sie mit dem Viewport skalieren
═══════════════════════════════════════════════════════════ */
.fx {
  position: relative;
  width: 100%; max-width: var(--maxw); margin: 0 auto;   /* Fotos skalieren bis 1680, darüber zentriert */
  display: grid;
  grid-template-columns: 5.556% 39.653% 9.583% 35.625% 9.583%;
  align-items: start;
}
.fx__text { grid-column: 2; grid-row: 1; position: relative; z-index: 2; max-width: 573px; }   /* Textblöcke wie in Figma 573 px, wachsen nicht mit */
.fx__media { grid-column: 4; grid-row: 1; position: relative; }
.fx--flip .fx__text { grid-column: 4 / -1; justify-self: start; width: 100%; max-width: min(573px, calc(100% - 0.05556 * min(100vw, 1680px))); }   /* endet nie hinter der Kontentkante */   /* rechte Textblöcke enden an der Kontentkante (Icon-Seite), wie in Figma bei x=1362 */
.closing-dark .fx--flip .fx__text { grid-column: 4; justify-self: start; margin-right: 0; }
.fx--flip .fx__media { grid-column: 2; }
.fx__media img { display: block; width: 100%; height: auto; object-fit: cover; }
.fx__el { position: absolute; }
.fx__box { position: absolute; background: rgba(239,230,214,.5); }
.fx__img { transform: scale(1.04); filter: blur(3px); transition: transform 2.2s var(--ease), filter 1.4s var(--ease); }
.is-visible .fx__img { transform: none; filter: none; }

/* Showroom (Figma 24.09., Strang NEU): Foto 630x840 ab x=730, beige Fläche 533x400 hinter dem Foto, bis zum rechten Rand */
.fx--showroom .fx__media { margin-left: -11.5%; width: 122.8%; aspect-ratio: 630 / 840; }
.fx--showroom .fx__photo { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 630 / 840; }
.fx--showroom .fx__box { left: 28.1%; top: 64.29%; width: calc(84.6% + var(--edge)); height: 47.62%; }   /* Figma 19:20 Uhr: Fläche 533x400 ab y=540 hinter dem Foto, ragt 100 px darunter */

/* Brands: Komposition 710x622 ab x=730, Fläche 580x404 bis zum rechten Rand */
.fx--brands .fx__media { margin-left: -11.5%; width: 138.4%; aspect-ratio: 710 / 622; }
.fx--brands .fx__box { left: 18.28%; top: 17.53%; width: calc(81.72% + var(--edge)); height: 64.9%; }
.fx--brands .fx__a { left: 45.47%; top: 0; width: 42.4%; z-index: 1; }
.fx--brands .fx__b { left: 0; top: 35.34%; width: 42.45%; z-index: 1; }

/* Interior Design: Komposition über die volle Rasterbreite (1440x1569), Text rechts in Spalte 4 */
.fx--interior .fx__media { grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 1440 / 720; }
.fx--interior .fx__box { left: calc(0.07% - var(--edge)); top: 15.14%; width: calc(40.28% + var(--edge)); height: 121.25%; }   /* 580x873 ab x=1, läuft unter das Lounge-Foto */
.fx--interior .fx__b { left: 5.97%; top: 0; width: 20.97%; z-index: 1; }
.fx--interior .fx__a { left: 28.4%; top: 30.28%; width: 20.9%; z-index: 1; }
.fx-wide { position: relative; z-index: 1; line-height: 0; }                         /* Lounge-Foto 1438x901, volle Browserbreite */
.fx-wide img { width: 100%; height: auto; display: block; }

/* Events: Foto 514x685 um 59 px versetzt, Fläche 710x500 dahinter bis zum rechten Rand */
.fx--events .fx__media { margin-left: 11.5%; width: 100.2%; aspect-ratio: 514 / 685; }
.fx--events .fx__box { left: -22.96%; top: 41.6%; width: calc(138.1% + var(--edge)); height: 73%; }
.fx--events .fx__photo { position: relative; z-index: 1; }

/* Abschluss: dunkles Panel 960 px, Foto 769x577 ab x=0 mit beiger Fläche 533x311, Text ab x=848, Gold-Button */
.closing-dark { background: #221C19; color: #fff;   /* Figma Rectangle 35 */ padding: clamp(96px, 16.8vw, 242px) 0 clamp(64px, 9.8vw, 141px); }
.closing-dark .fx__text { padding-left: 11.5%; }
.closing-dark .fx__media { margin-left: -14%; width: 134.7%; aspect-ratio: 769 / 577; }
.closing-dark .fx__box { left: calc(0px - var(--edge)); top: 54.8%; width: calc(69.3% + var(--edge)); height: 53.9%; background: rgba(255,255,255,.1); }   /* Figma: Weiß 10 % */
.closing-dark .fx__photo { position: relative; z-index: 1; }
.closing-dark .h-display { color: #fff; }
.closing-dark .h-display span { display: block; }

.closing-dark p { margin-top: 50px; }
.btn--gold {
  display: inline-block; margin-top: 50px;
  background: var(--gold); color: #fff; border-color: var(--gold);
  padding: 0 50px; height: 40px; line-height: 40px;
}
.btn--gold:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Trenner-Visuals (Exporte 24.09., 2000 px breit, transparent) */
.trenner { line-height: 0; overflow: hidden; }   /* volle Browserbreite, wie die Streifen */
.trenner img { width: 100%; height: auto; display: block; }
.trenner--over { position: relative; z-index: 2; }
.trenner--after-intro { position: relative; z-index: 3; }   /* darf über den leeren Fuß der Intro-Bühne rutschen (JS setzt margin-top) */                                   /* Trenner 2 liegt über der beigen Showroom-Fläche */
.trenner--overlap { position: relative; z-index: 2; margin-bottom: -7.78vw; }   /* Trenner 4 skaliert mit der Fensterbreite, daher auch der Überlapp: 112 px bei 1440 */   /* Trenner 4 ragt 112 px in das dunkle Panel */

/* Abstände (Figma bei 1440, darunter proportional) */
.fx-gap--200 { height: clamp(64px, 13.89vw, 200px); }
.fx-gap--109 { height: clamp(40px, 7.57vw, 109px); }   /* Brands → Trenner 3 */
.fx-gap--209 { height: clamp(64px, 14.51vw, 209px); }  /* Trenner 3 → Interior */


@media (max-width: 1100px) {
  .fx { display: block; padding: 0 var(--pad-x); }
  .fx__media { margin-top: 40px; }
  .fx--showroom .fx__media, .fx--brands .fx__media, .fx--events .fx__media, .fx--interior .fx__media, .closing-dark .fx__media { width: 100%; margin-left: 0; }
  .fx--showroom .fx__box { top: 64%; height: 48%; left: 40%; width: calc(60% + var(--pad-x)); }
  .fx--showroom { padding-bottom: 24px; }
  .fx--brands .fx__box, .fx--events .fx__box { width: calc(100% + var(--pad-x)); left: 0; }
  .fx--interior .fx__media { aspect-ratio: 1 / 0.9; }
  .fx--interior .fx__box { left: calc(-1 * var(--pad-x)); top: 12%; width: calc(66% + var(--pad-x)); height: 115%; }
  .fx--interior .fx__b { left: 5%; top: 0; width: 42%; }
  .fx--interior .fx__a { left: 52%; top: 24%; width: 42%; }
  .closing-dark .fx__text { padding-left: 0; }
  .closing-dark .fx__box { left: calc(-1 * var(--pad-x)); }
  .fx-gap--200, .fx-gap--109, .fx-gap--209 { height: 56px; }
  .fx-gap--109 { height: 66px; }   /* Brands → Trenner 3: 10 px mehr */
  .closing-dark { padding: clamp(64px, 12vw, 120px) 0; }
}

/* Browser-Autofill (Firefox gelb, Chrome blau) im Newsletter-Feld neutralisieren */
.mc-form input:-webkit-autofill,
.mc-form input:-webkit-autofill:hover,
.mc-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--offwhite) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}
.mc-form input:autofill, .mc-form input:-moz-autofill, .mc-form input:-moz-autofill-preview {
  filter: none;
  background-color: transparent;
  color: var(--ink);
}

.section { padding: var(--pad-y) var(--pad-x); position: relative; }
.section--tight { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.section--white { background: var(--white); }
.section--offwhite { background: var(--offwhite); }
.section--cream { background: var(--cream); }
.wrap { max-width: 1320px; margin: 0 auto; }
.wrap--narrow { max-width: 860px; margin: 0 auto; }

/* Einordnung: große Serif-Aussage, Text eingerückt (Press-Kit-Seite 2) */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 50px; }
.intro-grid .h-display + .body, .intro-grid .h-display + .lead { margin-top: 0; }
.intro-grid .body { margin-left: clamp(0px, 8vw, 120px); }
.intro-tag { margin-top: clamp(40px, 5vw, 72px); text-align: right; }
/* Hashtag unter dem Claim (Skript: #connectionculture) */
.hashtag {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-small);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--gold); margin-top: 14px;
}

/* Split-Panel: Text links auf Off-White, Bild rechts randabfallend (Deck-Layout) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 80vh;
}
.split--flip .split__media { order: -1; }
.split__text {
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-direction: column; justify-content: center;
}
.split__media { position: relative; overflow: hidden; min-height: 420px; }
.split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: blur(3px);                       /* dezenter (vorher 10 px) */
  transition: transform 2.2s var(--ease), filter 1.4s var(--ease);
}
.is-visible .split__media img { transform: scale(1); filter: blur(0); }
.split__caption {
  position: absolute; left: 24px; bottom: 20px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split--flip .split__media { order: 0; }
  .split__media { min-height: 62vw; }
}

/* Name / Lautschrift: das visuelle Element */
.name-block { text-align: left; }
.name-word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.name-ipa {
  font-family: Georgia, 'Times New Roman', serif; /* IPA-Zeichen: Baskervville-Subset hat sie nicht */
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 34px);
  color: var(--gold);
  margin-top: 18px;
}
.name-meaning {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(24px, 5vw, 80px);
  max-width: 900px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  text-align: left;
}
.name-meaning .rule { background: var(--ink-15); }
.name-meaning .h-sub { margin-bottom: 6px; }
@media (max-width: 700px) {
  .name-meaning { grid-template-columns: 1fr; text-align: center; }
  .name-meaning .rule { height: 1px; width: 60px; margin: 0 auto; }
}

/* Marken-Laufband: Baskervville, langsam, dezent */
.marquee {
  --mq-bg: var(--beige);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ink-15);
  border-bottom: 1px solid var(--ink-15);
  padding: 22px 0;
  background: var(--mq-bg);
}
/* weiche Kanten in der jeweiligen Hintergrundfarbe */
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--mq-bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--mq-bg), transparent); }
.marquee__track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 70s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  color: var(--ink);
  white-space: nowrap;
  padding: 0 28px;
  position: relative;
}
.marquee__track span::after {
  content: '·'; color: var(--gold);
  position: absolute; right: -6px;
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* Variante A: dunkles Braun */
.marquee--dark { --mq-bg: var(--ink); border-color: var(--ink); }
.marquee--dark .marquee__track span { color: var(--beige); }
.marquee--dark .marquee__track span::after { color: var(--gold); }
/* Variante B: Gold */
.marquee--gold { --mq-bg: var(--gold); border-color: var(--gold); }
.marquee--gold .marquee__track span { color: #fff; }
.marquee--gold .marquee__track span::after { color: rgba(255,255,255,.55); }

/* Dunkles Panel (Deck: "What makes us unique") */
.panel-dark {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--dark);
}
.panel-dark__bg {
  position: absolute; inset: -40px;
  background-size: cover; background-position: center;
  filter: blur(22px) brightness(.55) saturate(.9);
  transform: scale(1.05);
}
.panel-dark__inner { position: relative; z-index: 1; }
.panel-dark .kicker { color: rgba(255,255,255,.85); }
.panel-dark .kicker::after { background: var(--gold); }
.panel-dark .h-section { color: #fff; }
.panel-dark .cta { color: #fff; }
.panel-dark .cta:hover { color: var(--gold); }
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 72px);
}
.facts__item { padding-top: 18px; border-top: 1px solid var(--gold); }
.facts__item .h-sub { color: #fff; font-size: 17px; margin-bottom: 6px; }
.facts__item p { font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.6; }
.facts--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.facts__item .cta { margin-top: 14px; color: #fff; font-size: 12px; }
.facts__item .cta:hover { color: var(--gold); }
@media (max-width: 1000px) { .facts--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .facts, .facts--4 { grid-template-columns: 1fr; } }

/* Brands-Grid: 3 Spalten, Hairline oben in Gold */
.brands { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 48px); }
.brands .brand { border-top: 1px solid var(--gold); padding-top: 20px; }
.brand__name { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
.brand__facts { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold); line-height: 1.5; margin-bottom: 16px; }
.brand__text { font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) { .brands { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .brands { grid-template-columns: 1fr; } }

/* Showroom at a glance */
.glance { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.glance__addr { margin-top: 18px; color: var(--ink-60); }
.glance__addr a:hover { color: var(--gold); }
.glance__list { list-style: none; border-top: 1px solid var(--gold); }
.glance__list li { padding: 12px 0; border-bottom: 1px solid var(--ink-15); }
@media (max-width: 800px) { .glance { grid-template-columns: 1fr; } }

/* Bildstrecke (Showroom): 3 Spalten, Hochformat, Blur-Reveal wie Split-Bilder */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(36px, 4vw, 56px);
}
.gallery figure { position: relative; overflow: hidden; aspect-ratio: 3 / 4; margin: 0; }
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); filter: blur(3px);
  transition: transform 2.2s var(--ease), filter 1.4s var(--ease);
}
.is-visible .gallery img { transform: scale(1); filter: blur(0); }
.gallery figcaption {
  position: absolute; left: 16px; bottom: 12px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Zitat-Kachel mit versetzter Cream-Fläche (Press Kit, Key Facts) */
.quote {
  position: relative;
  padding: clamp(48px, 6vw, 96px) var(--pad-x);
}
.quote__tile {
  position: absolute;
  left: var(--pad-x); top: 0;
  width: min(48%, 520px); height: 100%;
  background: var(--cream);
  transform: translateX(-24px);
  transition: transform 1.4s var(--ease);
}
.is-visible .quote__tile { transform: none; }
.quote__text {
  position: relative;
  margin-left: clamp(24px, 8vw, 120px);
  max-width: 24ch;
}
.quote__by { position: relative; margin-left: clamp(24px, 8vw, 120px); margin-top: 28px; font-size: 14px; color: var(--ink-60); }
.quote__by b { font-weight: 600; color: var(--ink); }

/* Abschluss: Drei Sätze, Kontakt-CTA */
.closing { text-align: center; }
.closing .h-display { margin: 0 auto; }
.closing .h-display span { display: block; }
.closing p { margin: clamp(24px, 3vw, 40px) auto 0; max-width: 40ch; }
.closing .btn { margin-top: clamp(28px, 3vw, 44px); }
.closing__bientot { margin-top: clamp(40px, 5vw, 72px); }

/* Signet-Divider */
.signet-divider { display: flex; justify-content: center; }
.signet-divider img { width: 48px; opacity: .9; }

/* Newsletter (Mailchimp, funktionsfähig ohne JS) */
.newsletter { background: var(--white); scroll-margin-top: 90px; }
.newsletter__grid {
  width: 100%; max-width: var(--maxw); margin: 0 auto; min-height: 300px;
  display: grid; grid-template-columns: 5.556% 39.653% 9.583% 35.625% 9.583%; align-items: start;
  padding: clamp(48px, 5.7vw, 82px) 0 clamp(40px, 4.3vw, 62px);
}
.newsletter__text { grid-column: 2; }   /* auf der Kontentkante wie alle linken Textblöcke */
.newsletter__form { grid-column: 4 / -1; justify-self: start; align-self: center; width: 570px; max-width: calc(100% + 33px - 0.05556 * min(100vw, 1680px)); margin-left: -33px; transform: translateY(-10px); }   /* vertikal mittig im weißen Band (Grid-Padding oben/unten ist ungleich) */   /* Figma: 570 px breit, endet an der Kontentkante; 11 px über der Headline-Oberkante */
.newsletter .h-section { margin-bottom: 25px; }
.newsletter__sub { color: var(--ink); max-width: 572px; }
.mc-form { display: flex; width: 100%; }
@media (max-width: 1100px) {
  .newsletter__grid { display: block; padding: 56px var(--pad-x); min-height: 0; }
  .newsletter__form { margin: 32px 0 0; width: 100%; max-width: none; transform: none; }
}
.mc-form input[type="email"] {
  flex: 1;
  padding: 16px 20px;
  font-family: var(--sans); font-weight: 300; font-size: 15px;
  background: transparent;
  border: 1px solid var(--ink-35); border-right: 0;
  color: var(--ink);
  outline: none; border-radius: 0; -webkit-appearance: none;
}
.mc-form input[type="email"]::placeholder { color: var(--ink-35); }
.mc-form input[type="email"]:focus { border-color: var(--ink); }
.mc-form .btn { border-radius: 0; background: var(--gold); border-color: var(--gold); color: #fff; }   /* Subscribe in Gold wie der Visit-us-Button */
.mc-form .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.mc-legal { font-size: 12px; color: var(--ink-60); max-width: 60ch; margin: 18px 0 0; line-height: 1.6; }
.mc-legal a { text-decoration: underline; text-underline-offset: 3px; }
.mc-legal a:hover { color: var(--gold); }
@media (max-width: 520px) {
  .mc-form { flex-direction: column; }
  .mc-form input[type="email"] { border-right: 1px solid var(--ink-35); border-bottom: 0; }
}

/* Materialstreifen (Deck-Fußzeile) */
.material-strip { line-height: 0; background: var(--white); overflow: hidden; }
.material-strip img { width: 100%; height: clamp(120px, 18vw, 260px); object-fit: cover; object-position: center bottom; }
.material-strip--offwhite { background: var(--offwhite); }

/* ═══════════════════════════════════════════════════════════
   FOOTER · nach Susannes Skizze (weiße Karte, Gold-Labels)
═══════════════════════════════════════════════════════════ */
.footer {
  background: #F7F3EB;                                /* Figma: #EFE6D6 zu 50 % */
  padding: 50px max(24px, var(--gutter)) 13px;
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: 64.61% 18.52% 1fr;           /* Figma: LE COMPTOIR x=80, Overview x=907, Connect x=1144 */
}
.footer__brand, .footer__label {
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-small); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--gold); margin-bottom: 13px;   /* halbe Leerzeile nach den Überschriften */
}
.footer__contact { margin-top: 13px; }   /* halbe Leerzeile zwischen Adresse und Telefon */
.footer p, .footer a { font-size: var(--fs-small); line-height: 1.9; }   /* 5 % enger als Figma */
.footer address { font-style: normal; font-size: var(--fs-small); line-height: 1.9; color: var(--ink); }
@media (min-width: 801px) { .footer address, .footer address a { line-height: 1.55; } }   /* Desktop: Adresse enger, Links bleiben */
.footer address a:hover { color: var(--gold); }
.footer__contact a { font-weight: 600; }
.footer ul { list-style: none; }
.footer li a { display: inline-block; position: relative; }
.footer li a::after { content:''; position:absolute; left:0; bottom:4px; width:100%; height:1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.footer li a:hover::after { transform: scaleX(1); transform-origin: left; }
/* ═══════════════════════════════════════════════════════════
   KONTAKT-SEITE
═══════════════════════════════════════════════════════════ */
.contact-visual { position: relative; overflow: hidden; line-height: 0; }
.contact-visual img { width: 100%; height: clamp(320px, 52vw, 720px); object-fit: cover; object-position: center 60%; }
.contact-visual .split__caption { line-height: 1.4; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.contact-card { border-top: 1px solid var(--gold); padding-top: 22px; }
.contact-card .h-sub { margin-bottom: 4px; }
.contact-card__role { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-60); margin-bottom: 18px; }
.contact-card address { font-style: normal; color: var(--ink-60); line-height: 1.7; }
.contact-card ul { list-style: none; margin-top: 14px; }
.contact-card li a, .contact-card address a { position: relative; display: inline-block; }
.contact-card li a::after, .contact-card address a::after, .contact-note a::after {
  content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.contact-card li a:hover::after, .contact-card address a:hover::after, .contact-note a:hover::after { transform: scaleX(1); transform-origin: left; }
.contact-card__site { margin-top: 10px; }
.contact-card__site a { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold); }
.contact-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 104px);
}
.contact-note { border-top: 1px solid var(--ink-15); padding-top: 22px; }
.contact-note .h-sub { margin-bottom: 12px; }
.contact-note p { max-width: 44ch; }
.contact-note a { position: relative; display: inline-block; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 700px) { .contact-more { grid-template-columns: 1fr; gap: 36px; } }

.footer__social { margin-top: 18px; }
.footer__bottom {
  margin: 21px 0 0; padding-top: 12px;
  border-top: 1px solid var(--ink-15);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; line-height: 2; color: var(--ink);
}
.footer__bottom a { margin-right: 18px; font-size: inherit; line-height: inherit; }
.footer__bottom a:hover { color: var(--gold); }
.scroll-top {
  position: absolute; right: 0; bottom: 0;
  width: 48px; height: 48px;
  background: var(--sage); color: #fff;
  border: 0; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.scroll-top:hover { background: var(--teal); }
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { padding-right: 64px; }   /* Platz für den Nach-oben-Pfeil, Copyright wird nicht überdeckt */
  .footer p, .footer a, .footer address { line-height: 1.6; }
  .footer__brand, .footer__label { margin-bottom: 6px; }
  .footer__contact { margin-top: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-REVEAL · dezent: Blur + Fade + 24px nach oben
═══════════════════════════════════════════════════════════ */
.reveal {                                  /* Wunsch Chefin 24.09.: kein Blur mehr über Texten, nur Fade + 24 px */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-coucou, .hero-logo-full, .hero-bottom { opacity: 1; transform: none; filter: none; }
  .split__media img, .gallery img { transform: none; filter: none; }
  .kicker::after, .quote__tile { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   PRESSE-SEITE
═══════════════════════════════════════════════════════════ */
.page-head { padding: clamp(64px, 8vw, 120px) var(--pad-x) clamp(40px, 5vw, 72px); }
.downloads { list-style: none; border-top: 1px solid var(--ink-15); }
.downloads li { border-bottom: 1px solid var(--ink-15); }
.downloads a {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 24px;
  padding: 26px 0;
  transition: padding-left .4s var(--ease);
}
.downloads a:hover { padding-left: 12px; }
.downloads .dl-title { font-family: var(--serif); font-size: var(--fs-claim); line-height: 1.2; }
.downloads .dl-meta { font-size: var(--fs-small); color: var(--ink-60); letter-spacing: .04em; margin-top: 4px; }
.downloads .dl-action { font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.press-contact { margin-top: clamp(48px, 6vw, 88px); padding: clamp(28px, 3vw, 40px); background: var(--offwhite); max-width: 560px; }
.press-contact a { text-decoration: underline; text-underline-offset: 3px; }
.press-contact a:hover { color: var(--gold); }
.press-note { margin-top: 20px; font-size: 13px; color: var(--ink-60); }

/* ═══════════════════════════════════════════════════════════
   STRUKTURENTWURF (Unterseiten) · bewusst ohne Layout
═══════════════════════════════════════════════════════════ */
.wf-head { padding: clamp(56px, 7vw, 100px) var(--pad-x) clamp(40px, 5vw, 64px); }
.wf-soon { margin-top: clamp(16px, 2vw, 24px); }
.wf-hint { margin-top: 18px; font-size: 13px; color: var(--ink-60); max-width: 60ch; }
.wf-block { padding: clamp(40px, 5vw, 72px) var(--pad-x); border-top: 1px solid var(--ink-15); }
.wf-block .kicker { margin-bottom: 20px; }
.wf-note {
  font-family: var(--serif);
  font-size: var(--fs-claim);
  line-height: 1.4;
  color: var(--ink);
  max-width: 44ch;
  margin-bottom: 20px;
}
.wf-block .body p { color: var(--ink-60); }
.wf-img {
  margin-top: 24px;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--ink-35);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-35);
  max-width: 720px;
}
.wf-img--logo { aspect-ratio: 3 / 2; margin-top: 0; margin-bottom: 14px; }
.wf-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 24px; }
.wf-grid .wf-img { max-width: none; margin-top: 0; }
.wf-grid--brands { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.wf-tile p { font-size: var(--fs-body); color: var(--ink-60); margin-bottom: 10px; }
.wf-tile .wf-facts { font-size: var(--fs-small); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.wf-tile .wf-name { font-family: var(--serif); font-size: var(--fs-claim); color: var(--ink); margin-bottom: 8px; }
@media (max-width: 800px) { .wf-grid, .wf-grid--brands { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .wf-grid, .wf-grid--brands { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   RECHTSTEXTE (Impressum, Datenschutz) · schlicht, gebrandet
═══════════════════════════════════════════════════════════ */
.legal { padding: clamp(56px, 7vw, 100px) var(--pad-x) var(--gap-end); }
.legal__wrap { max-width: 720px; margin: 0 auto; }
.legal .h-display { margin-bottom: clamp(40px, 5vw, 64px); }
.legal__block { padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--ink-15); }
.legal__block:last-child { border-bottom: 1px solid var(--ink-15); }
.legal__label {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px;
}
.legal__block p { margin-bottom: 12px; }
.legal__block p:last-child { margin-bottom: 0; }
.legal__block ul { margin: 8px 0 12px 20px; }
.legal__block a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-35); }
.legal__block a:hover { color: var(--gold); }
.legal__meta { margin-top: 20px; font-size: var(--fs-small); color: var(--ink-60); }

/* ═══════════════════════════════════════════════════════════
   STORY · Gründer, Name
═══════════════════════════════════════════════════════════ */
.founders__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px, 5vw, 80px); max-width: 1100px; }
.founders__col .h-sub { margin-bottom: 2px; }
.founders__role { font-size: var(--fs-small); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-60); margin-bottom: 16px; }
.founders__col p + p { margin-bottom: 20px; }
@media (max-width: 700px) { .founders__grid { grid-template-columns: 1fr; } }
.name-block .kicker { margin-bottom: clamp(24px, 3vw, 40px); }
.name-body { margin: clamp(32px, 4vw, 56px) auto 0; text-align: left; max-width: 62ch; }
.closing .h-display { max-width: 34ch; }

/* Name-Block zweispaltig: links Lautschrift, rechts Auflösung; mobil untereinander */
.name-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.name-grid .name-ipa { margin-top: 12px; }
.name-grid__text { max-width: 52ch; }
@media (max-width: 800px) {
  .name-grid { grid-template-columns: 1fr; gap: 28px; }
}


/* ═══════════════════════════════════════════════════════════
   CTA ohne Link (Home, Events: "More to come")
═══════════════════════════════════════════════════════════ */
.cta--static { cursor: default; }   /* unterstrichen wie alle CTAs, aber ohne Link */
.cta--static:hover { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════
   HEADER über Foto-Hero (Unterseiten): Logo weiß ab Start, nach dem Scrollen Ink
═══════════════════════════════════════════════════════════ */
.brand .logo-light { display: none; }
.site-header--photo .brand { opacity: 1; transform: none; }
.site-header--photo:not(.is-solid) .brand .logo-light { display: block; }
.site-header--photo:not(.is-solid) .brand .logo-dark { display: none; }
body.nav-open .site-header--photo .brand .logo-light { display: none; }
body.nav-open .site-header--photo .brand .logo-dark { display: block; }

/* ═══════════════════════════════════════════════════════════
   SEITEN-HERO (Showroom): Foto volle Breite, 1440 x 902 (Figma), höchstens Fensterhöhe
═══════════════════════════════════════════════════════════ */
.page-hero { position: relative; height: min(62.64vw, 100svh); min-height: 320px; overflow: hidden; background: #d9d2c7; }
.page-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: heroBlurIn .8s var(--ease) both; }   /* 50 % schneller (Sandra 25.09.) */
.page-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 100%); }   /* nur für die Lesbarkeit von Logo, Navi und Icons */
@media (max-width: 800px) { .page-hero { height: 62svh; } }

/* ═══════════════════════════════════════════════════════════
   SHOWROOM-SEITE nach Figma "Showroom" (58:236), gleiches 1440er Raster wie Home
═══════════════════════════════════════════════════════════ */
/* Fließtext mit goldener Zwischenzeile und Liste: Leerzeilen wie im Figma (1 Leerzeile = 1.5em) */
.body .sub-gold { margin-top: 3em; font-weight: 700; color: var(--gold); }   /* zwei Leerzeilen davor */
.body .sub-gold + * { margin-top: 1.5em; }
.body ul + p { margin-top: 1.5em; }
.glance-list { list-style: disc; padding-left: 38px; font-weight: 600; line-height: 1.5; margin-bottom: -0.25em; }   /* Figma: SemiBold, Einzug 25.5, Zeilenraster 34 px */
.glance-list li { padding: 0.25em 0; }   /* 25.5 + 8.5 = 34 px je Punkt; umbrochene Punkte bleiben kompakt (Mobile) */
.glance-list li::marker { color: var(--ink); }
.sub-gold + .glance-list { margin-top: 1.25em; }

/* Abschnitt 2 "Rooted in France": Foto 630x840 ab x=79, Fläche 532x370 links bis zum Fensterrand, Text rechts */
.fx--rooted .fx__media { width: 110.33%; aspect-ratio: 630 / 840; }
.fx--rooted .fx__photo { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 630 / 840; }
.fx--rooted .fx__box { left: calc(-12.54% - var(--edge)); top: 68.45%; width: calc(84.44% + var(--edge)); height: 44.05%; }

/* Abschnitt 3 "From presence to impact": Foto 394x526 ab x=967, Fläche 651x370 bis zum rechten Rand */
.fx--impact .fx__media { width: 100%; }
.fx--impact .fx__photo { position: relative; z-index: 1; margin-left: 34.7%; width: 76.8%; height: auto; aspect-ratio: 394 / 526; }
.fx--impact .fx__box { left: 0; top: 64.83%; width: calc(126.9% + var(--edge)); height: 70.34%; }

.fx-gap--205 { height: clamp(64px, 14.24vw, 205px); }   /* Foto "Rooted" → Trenner */
.fx-gap--240 { height: var(--gap-end); }   /* Unterseiten: letzter Inhalt → Streifen, überall gleich */

@media (max-width: 1100px) {
  .fx--rooted .fx__media { width: 100%; }
  .fx--rooted .fx__box { left: calc(-1 * var(--pad-x)); top: 64%; width: calc(66% + var(--pad-x)); height: 48%; }
  .fx--rooted { padding-bottom: 24px; }
  .fx--impact .fx__photo { margin-left: 23.2%; }
  .fx--impact .fx__box { left: 0; top: 60%; width: calc(100% + var(--pad-x)); height: 55%; }
  .fx--impact { padding-bottom: 24px; }
  .fx-gap--205 { height: 56px; }
}
.fx__text .h-section--564 { max-width: 564px; }   /* Figma-Textrahmen 564 px, bricht wie im Layout dreizeilig um */

/* Intro: "Bienvenue!" mit der Oberkante an der ersten Textzeile rechts ausgerichtet (Chefin 25.09.) */
@media (min-width: 1100px) { .intro__h1 .intro__headline { margin-top: calc(6px - 0.15em); } }
/* Intro-Foto: Blur und Zoom lösen sich wie bei den anderen Bildern zügig per Transition auf, nicht mehr über den ganzen Scrollweg */
.intro.is-pinned .intro__img { transform: scale(1.04); filter: blur(3px); transition: transform 2.2s var(--ease), filter 1.4s var(--ease); }
.intro.is-pinned .intro__img.is-in { transform: none; filter: none; }

/* ═══════════════════════════════════════════════════════════
   BRANDS-SEITE nach Figma "Brands" (58:420)
   Kontentbreite wie überall: 80 px Rand bei 1440 (5,556 %), bis 1680 mitwachsend
═══════════════════════════════════════════════════════════ */
.page-top { padding-top: 101px; }                              /* Figma: Kicker bei y=101, Header liegt darüber */
.page-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 5.556%; }
.brands-title { max-width: 1008px; }
.brands-list { margin-top: 100px; }                            /* Headline → erste Marke */
.brand-row { display: grid; grid-template-columns: 200px minmax(0, 927px); column-gap: 60px; align-items: start; }
.brand-row + .brand-row { margin-top: 60px; }
.brand-logo {                                                  /* Logo-Kachel 200 x 120, Logos in Ink, einheitliche optische Größe */
  display: block; width: 200px; aspect-ratio: 5 / 3; background: #F7F3EB; line-height: 0; overflow: hidden;
  transition: background .35s var(--ease);
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
a.brand-logo:hover { background: #EFE6D6; }
.brand-logo--missing {                                         /* PLATZHALTER magenta: Logo bzw. Foto fehlt noch */
  background: #FF00FF; color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 11px; line-height: 1.3; text-transform: uppercase; text-align: center; padding: 0 12px;
}
a.brand-logo--missing:hover { background: #E000E0; }
.brand-row__text { font-size: 17px; line-height: 1.5; }
.brand-row__name { font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--gold); margin-top: -4px; }
.brand-row__name a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s var(--ease); }
.brand-row__name a:hover { color: var(--ink); }
.brand-row__meta { font-weight: 600; line-height: 1.5; padding: 0.25em 0; }   /* Figma: 34 px Zeile; bei Umbruch (Mobile) kompakt */
.brands-closing { margin-top: 110px; }
.brands-closing .h-section { max-width: 868px; }
.cta-col { display: flex; flex-direction: column; align-items: flex-start; gap: 33px; margin-top: 50px; }
@media (max-width: 700px) {
  .page-top { padding-top: 110px; }
  .page-wrap { padding: 0 var(--pad-x); }
  .brands-list { margin-top: 56px; }
  .brand-row { grid-template-columns: 1fr; row-gap: 18px; }
  .brand-logo { width: 160px; }
  .brand-row + .brand-row { margin-top: 48px; }
  .brands-closing { margin-top: 72px; }
}

/* ═══════════════════════════════════════════════════════════
   KONTAKT-SEITE nach Figma "Contact" (67:1140)
═══════════════════════════════════════════════════════════ */
.fx--contact .fx__text h1.kicker { font-size: var(--fs-small); }
.contact-list { font-size: 17px; line-height: 1.5; }
.contact-block + .contact-block { margin-top: 3em; }             /* zwei Leerzeilen */
.contact-block__title { font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.5; }
.contact-block__addr { margin-top: 0.25em; }
.contact-block__reach { margin-top: 0.5em; }
.contact-list a {                                              /* Kontaktdaten: ohne Unterstreichung, goldene Linie beim Hover (wie Footer) */
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .35s var(--ease);
}
.contact-list a:hover { background-size: 100% 1px; }
.contact-list a.u { background: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s var(--ease); }   /* E-Mails im Fließtext (Press, Application) */
.contact-list a.u:hover { color: var(--gold); }
.ph { color: #FF00FF; font-weight: 700; }                       /* PLATZHALTER: Angabe fehlt noch */
/* Foto 452x678 ab x=908, Fläche 592x370 bis zum rechten Rand */
.fx--contact .fx__photo { position: relative; z-index: 1; margin-left: -11.5%; width: 122.8%; max-width: none; height: auto; aspect-ratio: 452 / 678; }   /* größer: 630 px breit ab x=730 wie die anderen großen Bilder (Chefin 25.09.) */
.fx--contact .fx__box { left: 23%; top: 62%; width: calc(104% + var(--edge)); height: 46%; }
@media (max-width: 1100px) {
  .fx--contact .fx__media { margin-top: 56px; }
  .fx--contact .fx__photo { margin-left: 0; width: 100%; max-width: 100%; }   /* volle Inhaltsbreite wie die anderen großen Bilder (Chefin 25.09.) */
  .fx--contact .fx__box { left: 30%; top: 60%; width: calc(70% + var(--pad-x)); height: calc(40% + 24px); }
  .fx--contact { padding-bottom: 24px; }
}
@media (max-width: 700px) { .page-top .fx { padding-top: 9px; } }

@media (max-width: 1099px) { .br-desk { display: none; } }   /* gesetzte Umbrüche nur auf Desktop */

@media (min-width: 901px) { .site-header { grid-template-columns: 1fr auto 1fr; } }   /* Logo links, Navi mittig, Icons rechts */

.brand-logo--photo img { object-fit: cover; }   /* Künstler: Porträtfoto füllt die Kachel */

/* ═══════════════════════════════════════════════════════════
   28.09.: Brands ohne Fotos, Künstler typografisch auf der beigen Kachel
═══════════════════════════════════════════════════════════ */
.brand-logo--type { display: flex; align-items: center; justify-content: center; padding: 0 16px; text-align: center; }
.brand-logo--type span { font-family: var(--serif); font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
@media (max-width: 700px) { .brand-logo--type span { font-size: 18px; } }

/* Hero-Logo mobil größer (Chefin 28.09.) */
@media (max-width: 700px) { .hero-logo-full { width: min(68vw, 300px); } }

/* ═══════════════════════════════════════════════════════════
   STORY-SEITE nach Figma "Story" (58:36)
═══════════════════════════════════════════════════════════ */
.fx--story1 .fx__media { aspect-ratio: 1440 / 620; }
.fx--story1 .fx__box { left: calc(0% - var(--edge)); top: 17.58%; width: calc(40.35% + var(--edge)); height: 65.19%; }   /* 581x404 ab Fensterrand */
.fx--story1 .fx__b { left: 5.92%; top: 0; width: 20.96%; }      /* München 302x403 ab x=85 */
.fx--story1 .fx__a { left: 28.37%; top: 35.24%; width: 20.94%; } /* Paris 301x402 ab x=408 */
.fx--story2 .fx__box { top: 60.53%; height: 54.09%; }           /* 710x370, 414 px unter der Fotokante */
.founder { margin-top: 50px; font-size: 14px; line-height: 1.5; max-width: 572px; }
.founder__name { font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--gold); }
.founder__name a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s var(--ease); }
.founder__name a:hover { color: var(--ink); }
.founder__role { font-weight: 600; }
.founder__role + p { margin-top: 1.5em; }
.body a.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s var(--ease); }
.body a.u:hover { color: var(--gold); }
.body p.semi { font-weight: 600; }
.body p.tight { margin-top: 0; }
.story-cta { margin-top: 50px; font-size: 17px; line-height: 1.5; font-weight: 600; }
.story-cta a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s var(--ease); }
.story-cta a:hover { color: var(--gold); }
@media (max-width: 1100px) {
  .fx--story1 .fx__media { aspect-ratio: 1 / 0.9; margin-top: 56px; }
  .fx--story1 .fx__box { left: calc(-1 * var(--pad-x)); top: 14%; width: calc(66% + var(--pad-x)); height: 72%; }
  .fx--story2 .fx__box { top: 58%; height: 50%; }
  .fx--story1 .fx__b { left: 0; top: 0; width: 47%; }             /* Siegestor ab der Kontentkante */
  .fx--story1 .fx__a { left: 53%; top: 24%; width: 47%; }           /* Eiffelturm bis zur rechten Kontentkante */
  .fx--story1 .fx__media { aspect-ratio: 1 / 0.88; }
  .fx--story3 .fx__media { aspect-ratio: 1 / 0.95; }
  .fx--story3 .fx__b { left: 0; top: 33%; width: 47%; }
  .fx--story3 .fx__a { left: 53%; top: 0; width: 47%; }
  .fx--story3 .fx__box { left: calc(-1 * var(--pad-x)); width: calc(100% + 2 * var(--pad-x)); }   /* Fläche über die ganze Bildschirmbreite */
}

/* ═══════════════════════════════════════════════════════════
   28.09. Korrekturen Story + Footer mobil
═══════════════════════════════════════════════════════════ */
.page-top--story { padding-top: 181px; }                          /* 80 px mehr Luft unter der Navi */
.fx-gap--s1 { height: clamp(56px, 9.72vw, 140px); }               /* Abschnitt 1 → Trenner: 60 px weniger */
.fx-gap--s2 { height: clamp(56px, 6.94vw, 100px); }               /* Gründer → Trenner: 100 px weniger */
@media (max-width: 1100px) {
  .fx-gap--s1 { height: 56px; }
  .fx-gap--s2 { height: 96px; }                                   /* mobil 40 px mehr unter dem Gründerfoto */
}
@media (max-width: 700px) { .page-top--story { padding-top: 110px; } }

/* Footer mobil: Overview und Connect nebeneinander, Adresse darunter; LE COMPTOIR fett schwarz */
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__grid > div:first-child { grid-column: 1 / -1; order: 3; }
  .footer__brand { color: var(--ink); }
}

/* Mobil: ruhigerer Flattersatz durch Silbentrennung und ausgeglichene Zeilen (nur Handy) */
/* Mobil-Satz: "Le Comptoir" nie getrennt (geschütztes Leerzeichen im HTML) */
@media (max-width: 700px) {
  .body p, .founder p, .contact-list p, .brand-row__text p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty; }   /* Story, Showroom, Brands: so bleibt es (Sandra 28.09.) */
  .page-home .body p, .page-home .intro__p, .page-home .newsletter__sub { hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }   /* Home: ohne Silbentrennung */
  .nb { white-space: nowrap; }   /* Home: kurze Wörter und Satzanfänge kleben am Folgewort */
  .hero-logo-full { width: min(74.8vw, 330px); }   /* Logo mobil +10 % (28.09.) */
  .hero-coucou { font-size: 26.6px; }             /* Coucou mobil -5 % */
}

/* ═══════════════════════════════════════════════════════════
   29.09. Home, Story, Showroom
═══════════════════════════════════════════════════════════ */
.body strong { font-weight: 600; }

/* Home Intro: "Bienvenue!" linksbündig an der Kontentkante, Dreizeiler bleibt */
.intro__h1 { text-align: left; }
.intro__h1 .intro__headline { white-space: nowrap; }
/* Home Intro: Foto hängt links am Browserfenster (bis 1680), rechts eine Spalte näher am Text; verhält sich wie das Bürofoto unten */
@media (min-width: 1100px) {
  .intro__figure, .intro.is-pinned .intro__figure { left: auto; margin-left: -14.01%; width: 134.7%; }
  .intro.is-pinned .intro__figure { left: -14.01%; margin-left: 0; }
  .intro__box { left: calc(0px - var(--edge)); top: 59.35%; width: calc(69.4% + var(--edge)); height: 47.5%; }
}

/* Story: Gründerfoto bis zum rechten Browserrand, linke Kante bleibt; bleibt stehen, bis der Text unten angekommen ist */
@media (min-width: 1100px) {
  .fx--story2 .fx__media { width: calc(100% + var(--gutter)); position: sticky; top: 90px; align-self: start; }
  .fx--story2 .fx__box { left: -19.9%; right: calc(0px - var(--edge)); width: auto; top: 60.53%; height: 46.8%; }
}

/* Story: Lautschrift-Block nach Figma "Story NEU" (109:93): 1440 x 500, #EFE6D6 */
.lexicon { background: #EFE6D6; text-align: center; padding: clamp(72px, 8.4vw, 121px) var(--pad-x); }
.lexicon__inner { max-width: 572px; margin: 0 auto; }
.lexicon__word { line-height: 0; }
.lexicon__word img { width: min(374px, 78vw); height: auto; display: inline-block; }
.lexicon__ipa { margin-top: 25px; font-weight: 600; font-size: 17px; line-height: 1.5; color: var(--gold); }
.lexicon__type { font-style: italic; font-weight: 300; font-size: 14px; line-height: 1.5; color: var(--ink); }
.lexicon__type::after { content: ''; display: block; width: 73.5px; height: 1px; background: var(--gold); margin: 50px auto; }
.lexicon__def { font-size: 17px; line-height: 1.5; font-weight: 300; }
.lexicon__def strong { font-weight: 600; }
.lexicon__def .gold { color: var(--gold); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   30.09. Korrekturen Home, About
═══════════════════════════════════════════════════════════ */
/* Home Intro: Textblock eine Spalte nach rechts, Breite bleibt (Abstand Foto → Text wie beim Showroom) */
@media (min-width: 1100px) {
  .intro__right { margin-left: 7.55%; max-width: none; }   /* 30.09. Nachtrag: Abstand Foto → Text halbiert (ca. 69 px bei 1440) */
}
/* Home: Trenner 7 zwischen Events und Art de Vivre, liegt im Fuß der beigen Fläche */
/* Trenner mittig zwischen Events (inkl. beiger Fläche, die 14,6 % der Fotohöhe unter das Foto ragt) und Art de Vivre:
   Abstand = Überstand der Fläche + gleicher Abstand wie danach (fx-gap--200) */
.fx-gap--events-trenner { height: calc(0.0695 * min(100vw, 1680px) + clamp(64px, 13.89vw, 200px)); }
@media (max-width: 1100px) { .fx-gap--events-trenner { height: calc(0.1946 * (100vw - 2 * var(--pad-x)) + 56px); } }
.trenner--events { margin-top: calc(-1 * var(--ev-overlap, 0px)); }

/* About: Gründerfoto schließt bis 1680 am rechten Fensterrand ab und löst sich darüber (wie die Fotos auf der Home) */
@media (min-width: 1100px) {
  .fx--story2 .fx__media { width: 115.37%; }
}
/* About: Vitae etwas eingerückt, Fließtextgröße */
.founder { font-size: 17px; }
.founder__name { font-size: 17px; }
@media (min-width: 1100px) {
  .founder { padding-left: clamp(24px, 3.47vw, 50px); }
}

/* Serifen-Headlines: Ligaturen (fi, fl, ff …) trotz negativer Laufweite einschalten, sonst stößt der i-Punkt ans f */
.h-display, .h-section, .h-claim, .intro__headline, .intro__hashtag, .name-word, .brand__name, .brand-logo--type span, .nav a {
  font-variant-ligatures: common-ligatures; font-feature-settings: "liga" 1, "kern" 1;
}
.founder strong { font-weight: 600; }   /* erster Satz der Vita fett */

/* About mobil: Gründerfoto über den Text (30.09.) */
@media (max-width: 1100px) {
  .fx--story2 { display: flex; flex-direction: column; }
  .fx--story2 .fx__media { order: -1; margin-top: 0; margin-bottom: calc(0.107 * (100vw - 2 * var(--pad-x)) + 48px); }
}
/* About mobil: gleicher Abstand über und unter dem Lautschrift-Block, je 20 px mehr (Text → Block = Block → Kicker) */
@media (max-width: 1100px) {
  .fx-gap--lex-before { height: 76px; }
  .fx-gap--lex-after { height: 67px; }   /* + 9 px Innenabstand des Kickers = 76 px bis zur Schrift */
}

/* ═══════════════════════════════════════════════════════════
   30.09. Presseseite + Footer-Spalte „Press“
═══════════════════════════════════════════════════════════ */
/* Footer: neue Spalte Press links neben Overview; Overview (x=907) und Connect (x=1144) bleiben stehen */
@media (min-width: 801px) {
  .footer__grid { grid-template-columns: 46.09% 18.52% 18.52% 1fr; }
}
/* Presseseite: Typo und Abstände wie Brands/Contact */
.page-press h1.kicker { font-size: var(--fs-small); }
.press-downloads { margin-top: 100px; }                        /* Text → Downloads wie Headline → erste Marke (Brands) */
.page-press .downloads { max-width: 1008px; border-top: 1px solid var(--ink-15); }
.page-press .downloads a { padding: 24px 0; gap: 44px; }
.page-press .downloads a:hover { padding-left: 0; }
.page-press .dl-text { display: block; }
.page-press .dl-title { display: block; font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--ink); transition: color .3s var(--ease); }
.page-press .dl-meta { display: block; font-size: 17px; line-height: 1.5; font-weight: 300; color: var(--ink); letter-spacing: 0; margin-top: 0.25em; }
.page-press .dl-action { font-size: var(--fs-small); line-height: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .3s var(--ease); }   /* wie CTA */
.page-press .downloads a:hover .dl-title, .page-press .downloads a:hover .dl-action { color: var(--gold); }
.press-contact-block { margin-top: 100px; font-size: 17px; line-height: 1.5; }
.press-contact-block a.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s var(--ease); }
.press-contact-block a.u:hover { color: var(--gold); }
.press-facts { margin-top: 3em; max-width: var(--measure); }  /* zwei Leerzeilen wie zwischen den Kontaktblöcken */
@media (max-width: 700px) {
  .press-downloads, .press-contact-block { margin-top: 56px; }
  .page-press .downloads a { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .page-press .dl-action { justify-self: start; }
  .page-press .body p, .page-press .dl-meta, .press-facts { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
}

/* ═══════════════════════════════════════════════════════════
   01.10. Footer mobil: Press, Overview, Connect in einer Reihe, LE COMPTOIR darunter
═══════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; }
  .footer__grid > div:first-child { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 359px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* sehr schmale Geräte: zwei Spalten */
}

/* 01.10. Home Intro: im ersten Absatz nur der Anfang fett (bis „come together.“), Rest Light */
.intro__text strong { font-weight: 600; }

/* 01.10. Footer Desktop: Press, Overview, Connect enger zusammen, als Gruppe rechtsbündig an der Kontentkante */
@media (min-width: 801px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: clamp(48px, 5.56vw, 96px); }
}

/* ═══════════════════════════════════════════════════════════
   01.10. INTERIOR DESIGN (MHI) nach Figma "Interior Design" (67:957)
═══════════════════════════════════════════════════════════ */
.page-hero--top img { object-position: center top; }          /* Hero unten beschnitten (wie Showroom-Höhe) */
.fx-gap--100 { height: clamp(56px, 6.94vw, 100px); }

/* 1 · Text links, rechts Komposition über Spalte 4 + Rand (651 x 1175 bei 1440): Porträt bis zum Rand, zwei Fotos darunter */
.fx--mhi .fx__text { padding-top: calc(0.0632 * min(100vw, 1680px)); }   /* Kicker 91 px unter der Fotokante */
.fx--mhi .fx__media { grid-column: 4 / -1; aspect-ratio: 651 / 1175; }
.fx--mhi .fx__media img { position: absolute; height: auto; }
.fx--mhi .fx__a { left: 21.2%; top: 0; width: 78.8%; z-index: 1; }
.fx--mhi .fx__b { left: 0; top: 68.68%; width: 42.4%; z-index: 1; }
.fx--mhi .fx__c { left: 45.47%; top: 68.68%; width: 42.4%; z-index: 1; }
.fx--mhi .fx__box { left: 9.06%; top: 42.47%; width: calc(90.94% + var(--edge)); height: 31.49%; }

/* 2 · Galerie (1440 x 1205): Küche ab Fensterrand links, Flächen laufen bis zum Fensterrand */
.mhi-gallery { position: relative; }
.mhi-gallery__inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; aspect-ratio: 1440 / 1205; }
.mhi-gallery img { position: absolute; display: block; height: auto; z-index: 1; }
.mhi-gallery__kitchen { left: 0; top: 0; width: 61.667%; }
.mhi-gallery__dining  { left: 75.347%; top: 0; width: 19.167%; }
.mhi-gallery__teal    { left: 5.556%; top: 56.763%; width: 43.819%; }
.mhi-gallery__view    { left: 50.694%; top: 56.763%; width: 43.819%; }
.mhi-gallery__box { position: absolute; background: rgba(239,230,214,.5); height: 30.705%; }
.mhi-gallery__box--1 { left: calc(0px - var(--edge)); top: 5.726%; width: calc(83.542% + var(--edge)); }
.mhi-gallery__box--2 { left: 16.458%; top: 69.295%; width: calc(83.542% + var(--edge)); }

@media (max-width: 1100px) {
  .fx--mhi .fx__text { padding-top: 0; }
  .fx--mhi .fx__media { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 24px; }
  .fx--mhi .fx__media img { position: relative; left: auto; top: auto; width: 100%; }
  .fx--mhi .fx__a { grid-column: 1 / -1; }
  .fx--mhi .fx__box { left: 20%; top: 45%; width: calc(80% + var(--pad-x)); height: auto; bottom: 0; }
  .mhi-gallery__inner { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 var(--pad-x) 24px; }
  .mhi-gallery img { position: relative; left: auto; top: auto; width: 100%; }
  .mhi-gallery__kitchen { grid-column: 1 / -1; margin-left: calc(-1 * var(--pad-x)); width: calc(100% + var(--pad-x)) !important; }   /* bis zum Displayrand links */
  .mhi-gallery__dining { grid-column: 2; }
  .mhi-gallery__teal, .mhi-gallery__view { grid-column: 1 / -1; }
  .mhi-gallery__box--1 { left: 0; top: 4%; width: 85%; height: 28%; }
  .mhi-gallery__box--2 { left: 20%; top: auto; bottom: 0; width: 80%; height: 30%; }
}
/* 01.10. Nachtrag MHI: Kicker auf Oberkante Porträt; Abstand Bilder → „Up for a change?“ halbiert (300 → 150 px bei 1440, gemessen ab Bildunterkante) */
.fx--mhi .fx__text { padding-top: 0; }
.fx-gap--mhi-end { height: clamp(24px, 3.47vw, 58px); }
@media (max-width: 1100px) { .fx-gap--mhi-end { height: 28px; } }

/* ═══════════════════════════════════════════════════════════
   04.10. Home Intro mobil (nur Handy ≤ 700 px, Tablet bleibt)
═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* lief rechts raus: 1fr wuchs auf die nowrap-Headline (~399 px); minmax(0,1fr) hält die Spalte in der Kontentbreite.
     Rechter Rand halb so breit wie sonst (12 px statt 24 px bei 390), damit der Text weniger lang wird */
  .intro__grid { grid-template-columns: minmax(0, 1fr); padding-right: calc(var(--pad-x) / 2); }
  .intro__figure { margin-right: calc(var(--pad-x) / -2); }   /* Foto bleibt randlos */
  /* Headline läuft direkt hinter „Bienvenue!“ weiter und bricht frei um (390: „Bienvenue! Come for | the design, stay for | the Savoir Vivre.“) */
  .intro__h1 .intro__headline { white-space: normal; text-wrap: pretty; }   /* pretty: kein einzelnes „Vivre.“ in der letzten Zeile (Samsung 360) */
  .intro__h1 .intro__headline br { display: none; }
  /* Claim: drei feste Zeilen bleiben; Schrift wird nur so weit kleiner, dass „ideas and Savoir Vivre“ in die Kontentbreite passt
     (unter ~412 px, z. B. 384: 38,5 px, 360: 35,8 px). ponytail: 9.05 = Zeilenbreite / Schriftgröße (gemessen 04.10.), bei Textänderung neu messen */
  .intro__claim .intro__headline { font-size: min(var(--fs-headline), calc((100vw - 1.5 * var(--pad-x)) / 9.05)); }
}