/* ==========================================================================
   mittendrin – Mode für Sie · Laupheim
   ---------------------------------------------------------------------------
   Aufbau:
     00  Schriften (lokal eingebunden)
     01  Design-Tokens (Farben, Typo-Skala, Abstände)
     02  Reset & Grundlagen
     03  Typografie-System
     04  Atmosphäre (Korn, Cursor, Preloader)
     05  Navigation
     06  Hero (Bildsequenz)
     07  Intro / Manifest
     08  Säulen
     09  Kollektion (Galerie-Karussell)
     10  Über uns
     11  Marken-Ticker
     12  Besuch / Kontaktdaten
     13  Footer
     14  Unterseiten, Prosa, Lightbox
   Mobile First: Basis = Handy, Media Queries erweitern nach oben.
   ========================================================================== */

/* ==========================================================================
   00  Schriften – lokal eingebunden
   --------------------------------------------------------------------------
   Die Schriften liegen bewusst auf dem eigenen Server (assets/fonts/) statt
   bei Google. Beim Einbinden über fonts.googleapis.com holt der Browser die
   Dateien bei Google ab und überträgt dabei ungefragt die IP-Adresse des
   Besuchers. Genau das hat das LG München I am 20.01.2022 als Verstoß gegen
   die DSGVO gewertet (Az. 3 O 17493/20). Selbst gehostet entsteht dieser
   Datenabfluss gar nicht erst, und die Seite braucht dafür keine Einwilligung.

   Beide Schriften stehen unter der SIL Open Font License, die das Mitliefern
   ausdrücklich erlaubt. Werden sie je erneuert: Dateien bei fonts.google.com
   herunterladen, nach assets/fonts/ legen, hier die Namen anpassen.

   Geladen werden nur die Zeichensätze latin und latin-ext; für Deutsch und
   die Markennamen reicht das. Kommt einmal ein Zeichen außerhalb davon vor,
   springt der Browser auf die Ersatzschrift der jeweiligen Familie.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-normal-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   01  Design-Tokens
   ========================================================================== */

:root {
  /* --- Farben ------------------------------------------------------------ */
  --bg:          #faf8f4;   /* warmes Off-White, Basis */
  --bg-soft:     #f3ece1;   /* abgesetzte Sektionen */
  --espresso:    #221f1c;   /* dunkle Sektionen, Footer */
  --espresso-up: #2c2825;   /* dunkel, eine Stufe heller */

  /* Kontrastwerte gegen --bg / --bg-soft in Klammern (WCAG AA ab 4,5:1) */
  --ink:         #1f1d1b;   /* Fließtext dunkel        (15,8 / 14,3) */
  --ink-soft:    #55504a;   /* Sekundärtext            ( 7,5 /  6,8) */
  --ink-faint:   #6b6459;   /* Labels, Meta            ( 5,5 /  5,0) */

  --gold:        #f1bc63;   /* Markenfarbe – Flächen, Linien, dunkler Grund */
  --gold-ink:    #8a5d13;   /* Gold als Textfarbe auf hellem Grund ( 5,4 / 4,9) */
  --gold-warm:   #e0a744;   /* Hover, Verläufe */
  --gold-veil:   rgba(241, 188, 99, 0.18);

  --line:        rgba(31, 29, 27, 0.12);
  --line-strong: rgba(31, 29, 27, 0.26);
  --line-light:  rgba(250, 248, 244, 0.16);

  /* --- Schriften --------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-sans:    "Montserrat", system-ui, -apple-system, sans-serif;

  /* --- Typo-Skala (fluid) ------------------------------------------------ */
  --t-micro: 0.6875rem;                                  /* 11px – Labels */
  --t-small: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem);
  --t-body:  clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --t-lead:  clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  --t-h4:    clamp(1.1rem, 1.02rem + 0.36vw, 1.3rem);
  --t-h3:    clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-h2:    clamp(1.85rem, 1.45rem + 1.9vw, 3.1rem);
  --t-h1:    clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);
  --t-hero:  clamp(3rem, 1.9rem + 5.6vw, 6.6rem);

  --track-label: 0.26em;   /* Laufweite für Versalien-Labels */

  /* --- Raster & Abstände -------------------------------------------------- */
  --gutter:  clamp(20px, 5.5vw, 40px);
  --measure: 62ch;
  --sp-section: clamp(52px, 7vw, 104px);
  --sp-block:   clamp(28px, 4vw, 52px);
  --radius: 4px;

  --nav-h: 68px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-soft: 0 18px 50px -24px rgba(60, 45, 25, 0.4);
  --shadow-lift: 0 30px 70px -30px rgba(60, 45, 25, 0.55);
}

@media (min-width: 900px) {
  :root { --nav-h: 88px; }
}

/* ==========================================================================
   02  Reset & Grundlagen
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }

ul, ol { padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lenis (sanftes Scrollen) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Skip-Link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--espresso);
  color: var(--bg);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  transition: top 0.25s var(--ease);
}

.skip-link:focus { top: 12px; }

/* ---------- Layout-Helfer ---------- */

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-wide {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--sp-section); }

.section--tight { padding-block: clamp(40px, 5.5vw, 72px); }

/* schließt direkt an den Seitenkopf an */
.section--flush { padding-top: 0; }

.section--soft  { background: var(--bg-soft); }
.section--dark  { background: var(--espresso); color: rgba(250, 248, 244, 0.82); }

.section--dark .h-display,
.section--dark .h-section { color: #faf8f4; }

.section--dark .lead { color: rgba(250, 248, 244, 0.72); }

.section--dark .eyebrow { color: rgba(250, 248, 244, 0.62); }

/* ==========================================================================
   03  Typografie-System
   ---------------------------------------------------------------------------
   Fraunces  = Überschriften, Zitate, Zahlen mit Charakter
   Montserrat = Fließtext, Navigation, Labels, Buttons
   ========================================================================== */

.h-display,
.h-section,
.h-sub {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}

.h-display {
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.h-section {
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.h-sub {
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 500;
}

.h-display em,
.h-section em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-ink);
}

.section--dark .h-display em,
.section--dark .h-section em { color: var(--gold); }

.h-display strong,
.h-section strong { font-weight: 600; }

/* Label über Überschriften */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(18px, 3vw, 28px);
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--plain::before { display: none; }

/* Fließtext */
.lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lead p + p { margin-top: 1.1em; }

/* Abstand zwischen Überschrift und folgendem Fließtext */
.h-section + .lead,
.h-display + .lead,
.h-section + .body-text { margin-top: clamp(20px, 3vw, 32px); }

.body-text {
  color: var(--ink-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}

.body-text p + p { margin-top: 1.1em; }

.meta {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.gold-rule { width: 56px; height: 2px; background: var(--gold); border: 0; margin: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 15px 30px;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-align: center;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.btn::after { content: "→"; font-size: 1.1em; line-height: 1; transition: transform 0.4s var(--ease); }

.btn:hover::after { transform: translateX(5px); }

.btn--primary {
  background: var(--gold);
  color: #2a1f0c;
  border-color: var(--gold);
}

.btn--primary:hover { background: var(--gold-warm); border-color: var(--gold-warm); }

.btn--outline {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.btn--light {
  border-color: rgba(250, 248, 244, 0.45);
  color: #faf8f4;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.btn--light:hover { background: rgba(250, 248, 244, 0.95); border-color: transparent; color: var(--ink); }

/* Textlink mit wachsender Goldlinie */
.link-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.link-line::after { content: "→"; transition: transform 0.4s var(--ease); }
.link-line:hover::after { transform: translateX(6px); }

.link-line span { position: relative; }

.link-line span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.link-line:hover span::after,
.link-line:focus-visible span::after { transform: scaleX(1); }

.section--dark .link-line { color: #faf8f4; }

/* ---------- Instagram ---------- */

.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  transition: color 0.3s ease;
}

.ig-link svg {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform 0.4s var(--ease);
}

.ig-link:hover { color: var(--gold-ink); }
.ig-link:hover svg { transform: scale(1.08); }

/* unter dem Karussell: führt zu mehr Looks */
.k-foot .ig-link {
  flex: none;
  margin-left: 4px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.k-foot .ig-link span { display: none; }

@media (min-width: 620px) {
  .k-foot .ig-link span { display: inline; }
}

/* im dunklen Footer */
.footer .ig-link {
  color: rgba(250, 248, 244, 0.82);
  margin-top: 18px;
  letter-spacing: 0.16em;
}

.footer .ig-link:hover { color: var(--gold); }

/* ==========================================================================
   04  Atmosphäre: Korn, Cursor, Preloader
   ========================================================================== */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.32;
  mix-blend-mode: multiply;
}

.grain::before {
  content: "";
  position: absolute;
  inset: -120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 700px) {
  .grain { display: none; }   /* Handy: unnötige Last, kaum sichtbar */
}

/* ---------- Goldener Cursor (nur Zeigegerät mit Hover) ---------- */

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  will-change: transform;
}

.cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--gold); }

.cursor-ring {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid var(--gold);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
    margin 0.35s var(--ease), opacity 0.35s var(--ease), background-color 0.35s var(--ease);
}

.cursor-ring .cursor-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.cursor-hover .cursor-ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; opacity: 0.5; }

.cursor-media .cursor-ring {
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  opacity: 1;
  background: rgba(250, 248, 244, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.cursor-media .cursor-ring .cursor-label { opacity: 1; transform: none; }

.cursor-hidden .cursor-dot, .cursor-hidden .cursor-ring { opacity: 0; }

.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor] { cursor: none; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .has-cursor, .has-cursor a, .has-cursor button { cursor: auto; }
}

/* ---------- Preloader ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.preloader.done { display: none; }

.preloader-mark {
  width: clamp(150px, 38vw, 210px);
  opacity: 0;
}

.preloader-line {
  width: min(160px, 44vw);
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.preloader-sub {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
}

/* ==========================================================================
   05  Navigation
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  /* Muss über dem mobilen Overlay liegen, sonst ist der Schließen-Button
     nicht mehr erreichbar (.nav bildet einen eigenen Stapelkontext). */
  z-index: 8600;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: transform 0.5s var(--ease), background-color 0.4s ease,
    box-shadow 0.4s ease, height 0.4s ease;
}

.nav-inner {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Über dem Hero: transparent, helle Schrift */
.nav--over { --nav-fg: #faf8f4; }
.nav--solid, .nav.is-solid { --nav-fg: var(--ink); }

/* Bei offenem Menü liegt heller Grund unter der Leiste */
.nav.is-menu-open { --nav-fg: var(--ink); background: transparent; box-shadow: none; }
.nav--over.is-menu-open .nav-logo img { filter: none; }

.nav.is-solid {
  height: 64px;
  background: rgba(250, 248, 244, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}

.nav.is-hidden { transform: translateY(-102%); }

/* Verwendet wird "mittendrin-schriftzug.svg": der reine Gold-Schriftzug ohne
   die weiße Unterzeile, dadurch auf hellem wie dunklem Grund gleich gut. */
.nav-logo { display: inline-flex; align-items: center; flex: none; }

.nav-logo img {
  height: 42px;
  width: auto;
  transition: height 0.4s ease, filter 0.4s ease;
}

/* Über dem Foto braucht das Gold ein wenig Halt */
.nav--over:not(.is-solid) .nav-logo img {
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6));
}

.nav.is-solid .nav-logo img { height: 36px; }

@media (min-width: 900px) {
  .nav-logo img { height: 54px; }
  .nav.is-solid .nav-logo img { height: 44px; }
}

.nav-links { display: none; }

@media (min-width: 900px) {
  .nav-links { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 42px); }
}

.nav-link {
  position: relative;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nav-fg, var(--ink));
  padding-block: 8px;
  transition: color 0.4s ease;
}

.nav--over:not(.is-solid) .nav-link { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

/* Instagram in der Kopfleiste – bewusst nur als Zeichen, ohne Beschriftung */
.nav-ig {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  color: var(--nav-fg, var(--ink));
  opacity: 0.85;
  transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s var(--ease);
}

.nav-ig svg { width: 21px; height: 21px; }

.nav-ig:hover { opacity: 1; color: var(--gold); transform: scale(1.06); }

.nav--over:not(.is-solid) .nav-ig { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.55)); }
.nav--over.is-menu-open .nav-ig { filter: none; }

@media (min-width: 900px) {
  /* neben den Menüpunkten, nicht mehr am rechten Rand angeheftet */
  .nav-ig { margin-left: 4px; }
  .nav-links { margin-left: auto; }
}

/* Burger */
.nav-burger {
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
}

@media (min-width: 900px) { .nav-burger { display: none; } }

.nav-burger span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-fg, var(--ink));
  transition: transform 0.4s var(--ease), background-color 0.4s ease;
}

.nav--over:not(.is-solid) .nav-burger span { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }

.nav-burger[aria-expanded="true"] span {
  background: var(--ink);
  box-shadow: none;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- Mobiles Overlay ---------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  overflow-y: auto;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}

.overlay-links { display: flex; flex-direction: column; gap: clamp(4px, 1.6vh, 12px); }

.overlay-link {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.nav-overlay.is-open .overlay-link { opacity: 1; transform: none; }

.overlay-link i {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
}

.overlay-foot {
  margin-top: clamp(28px, 5vh, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 2;
}

.overlay-foot a { border-bottom: 1px solid var(--gold-veil); }

/* ==========================================================================
   06  Hero – Bildsequenz aus der Boutique
   --------------------------------------------------------------------------
   Alle Textelemente liegen im normalen Fluss (Grid), nichts ist absolut
   über etwas anderes gelegt. Dadurch kann sich auf keiner Bildschirmgröße
   etwas überlagern.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  background: var(--espresso);
  overflow: clip;
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease-soft);
  will-change: opacity;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.06);
}

/* Langsame Kamerafahrt, Richtung wechselt pro Bild */
/* Dauer bewusst länger als der Bildwechsel (5,6 s in js/main.js),
   damit die Fahrt nie stehenbleibt, bevor überblendet wird. */
.hero-slide.is-active img { animation: heroPan 8s linear forwards; }
.hero-slide:nth-child(even).is-active img { animation-name: heroPanAlt; }

@keyframes heroPan {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1%, -1.6%, 0); }
}

@keyframes heroPanAlt {
  from { transform: scale(1.15) translate3d(1%, -1%, 0); }
  to   { transform: scale(1.04) translate3d(0, 0, 0); }
}

/* Abdunklung: garantiert Lesbarkeit über jedem Bild */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20, 16, 12, 0.62) 0%,
      rgba(20, 16, 12, 0.24) 22%,
      rgba(20, 16, 12, 0.30) 48%,
      rgba(20, 16, 12, 0.72) 82%,
      rgba(20, 16, 12, 0.88) 100%);
}

.hero-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(18, 14, 10, 0.66) 0%, rgba(18, 14, 10, 0.24) 45%, transparent 72%);
}

@media (max-width: 899px) {
  /* Hochkant: der Verlauf von unten trägt die Schrift */
  .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(20, 16, 12, 0.58) 0%,
        rgba(20, 16, 12, 0.28) 26%,
        rgba(20, 16, 12, 0.52) 58%,
        rgba(20, 16, 12, 0.86) 100%);
  }
  .hero-veil::after { background: none; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  grid-row: 1;
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(40px, 9vh, 90px)) var(--gutter) clamp(28px, 5vh, 48px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #faf8f4;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.92);
  margin-bottom: clamp(14px, 2.4vh, 22px);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.hero-kicker::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.hero-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fffaf2;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(20, 14, 6, 0.55), 0 1px 3px rgba(20, 14, 6, 0.35);
}

.hero-title .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; will-change: transform; }

.hero-lead {
  margin-top: clamp(16px, 2.6vh, 26px);
  max-width: 44ch;
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(250, 248, 244, 0.9);
  text-shadow: 0 1px 18px rgba(20, 14, 6, 0.6);
}

.hero-actions {
  margin-top: clamp(24px, 4vh, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions .btn { flex: 1 1 auto; min-width: 0; }

@media (min-width: 560px) {
  .hero-actions .btn { flex: 0 0 auto; }
}

/* ---------- Hero-Fußzeile: Adresse, Zeiten, Punkte, Scroll-Hinweis ---------- */

.hero-bar {
  position: relative;
  z-index: 2;
  grid-row: 2;
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(250, 248, 244, 0.18);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.82);
}

.hero-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.hero-bar-item svg { width: 14px; height: 14px; flex: none; opacity: 0.85; }

/* Zusatzangaben erst einblenden, wenn sie ohne Umbruch in die Reihe passen –
   so bleibt die Fußzeile auf jeder Breite eine saubere Zeile. */
.hero-bar-item--hours { display: none; }

@media (min-width: 860px) {
  .hero-bar-item--hours { display: inline-flex; }
}

/* Punkte-Navigation der Bildsequenz */
.hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.hero-dot {
  width: 26px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
}

.hero-dot::before {
  content: "";
  width: 100%;
  height: 2px;
  background: rgba(250, 248, 244, 0.3);
  transition: background-color 0.4s ease;
}

.hero-dot[aria-current="true"]::before { background: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active img { animation: none; transform: scale(1.02); }
}

/* ==========================================================================
   07  Intro / Manifest
   ========================================================================== */

.intro { background: var(--bg); }

.intro-grid { display: grid; gap: clamp(28px, 5vw, 60px); }

@media (min-width: 900px) {
  .intro-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 5vw, 80px); }
}

.intro-statement {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.9rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.intro-statement em { font-style: italic; color: var(--gold-ink); }

.intro-side { padding-top: clamp(0px, 1vw, 12px); }

.intro-side > .intro-facts:first-child { margin-top: 0; }

.intro-facts {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  border-top: 1px solid var(--line);
  padding-top: clamp(22px, 3vw, 32px);
}

.fact-num {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-ink);
  letter-spacing: -0.02em;
}

.fact-label {
  margin-top: 8px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* Wort-für-Wort-Enthüllung */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; margin-bottom: -0.18em; padding-bottom: 0.18em; }
.word > .wi { display: inline-block; will-change: transform; }

/* ==========================================================================
   08  Säulen: Trends · Beratung · Qualität
   ========================================================================== */

.pillars-grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(36px, 5vw, 64px);
}

@media (min-width: 760px) {
  .pillars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); }
}

.pillar {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.pillar-line {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
}

.pillar-num {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--gold-ink);
  line-height: 1;
}

.pillar h3 { margin: 12px 0 10px; }

.pillar p { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.8; max-width: 38ch; }

/* ==========================================================================
   09  Kollektion – Galerie-Karussell
   --------------------------------------------------------------------------
   Ein Gleis, das per Wischen (Handy) bzw. Pfeilen/Ziehen (Desktop) läuft.
   Alle Bilder werden im gleichen Format 3:4 beschnitten – dadurch sieht die
   Galerie auch dann aufgeräumt aus, wenn die Fotos direkt vom Handy kommen.
   Die Bildliste steht ausschließlich in  js/kollektion.js .
   ========================================================================== */

.collection { overflow: clip; }

.collection-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

@media (min-width: 900px) {
  .collection-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 32px;
  }
}

.collection-note { color: var(--ink-soft); font-size: var(--t-small); max-width: 46ch; margin-top: 14px; }

/* Pfeile – nur wo es ein Zeigegerät gibt */
.k-controls { display: none; gap: 10px; }

@media (min-width: 900px) {
  .k-controls { display: flex; }
}

.k-arrow {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
    color 0.35s var(--ease), opacity 0.35s ease;
}

.k-arrow:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.k-arrow:disabled { opacity: 0.28; cursor: default; }

.k-arrow svg { width: 17px; height: 17px; }

/* Gleis */
.k-rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Einrastpunkte am Seitenrand ausrichten, nicht an der Fensterkante –
     sonst springt das Gleis beim Laden um die Breite des Innenabstands. */
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* Aus dem .wrap-Innenabstand ausbrechen, damit das Gleis randlos läuft */
  margin-inline: calc(var(--gutter) * -1);
}

.k-rail::-webkit-scrollbar { display: none; }

.k-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.k-rail.is-dragging .k-frame { pointer-events: none; }

.k-track {
  display: flex;
  gap: clamp(10px, 1.6vw, 20px);
  padding-inline: var(--gutter);
  width: max-content;
}

.k-slide {
  flex: 0 0 auto;
  /* Nächste Kachel bleibt angeschnitten sichtbar – das lädt zum Wischen ein */
  width: clamp(230px, 74vw, 320px);
  scroll-snap-align: start;
}

@media (min-width: 620px) {
  .k-slide { width: clamp(240px, 40vw, 320px); }
}

@media (min-width: 1000px) {
  .k-slide { width: clamp(280px, 26vw, 400px); }
}

.k-frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  /* neutraler Platzhalter, passt auf hellen wie abgesetzten Grund */
  background: rgba(31, 29, 27, 0.06);
}

.k-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
  transition: transform 1s var(--ease);
}

@media (hover: hover) {
  .k-frame:hover img { transform: scale(1.05); }
}

/* Zoom-Hinweis – auf Touch immer sichtbar, sonst beim Hover */
.k-frame::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d1b' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 17px no-repeat;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease);
}

@media (hover: hover) {
  .k-frame:hover::after, .k-frame:focus-visible::after { opacity: 1; transform: none; }
}

@media (hover: none) {
  .k-frame::after { opacity: 0.92; transform: none; }
}

/* Fußzeile des Karussells: Fortschritt + Zähler */
.k-foot {
  margin-top: clamp(20px, 3vw, 30px);
  display: flex;
  align-items: center;
  gap: 18px;
}

.k-progress {
  flex: 1;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.k-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 22%;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-soft), width 0.25s var(--ease-soft);
}

.k-count {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.k-empty {
  padding: clamp(32px, 6vw, 60px) var(--gutter);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-small);
}

/* ==========================================================================
   10  Über uns
   ========================================================================== */

.about { background: var(--bg); }

.about-grid { display: grid; gap: clamp(32px, 5vw, 56px); }

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 6vw, 100px);
    align-items: start;
  }
}

.about-figure { position: relative; }

@media (min-width: 900px) {
  .about-figure { position: sticky; top: calc(var(--nav-h) + 28px); }
}

.about-figure .frame {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-soft);
}

.about-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

.about-figure figcaption {
  margin-top: 14px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Akrostichon M-I-T-T-E-N-D-R-I-N */
.acrostic {
  margin: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
}

.acrostic li {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 32px);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.acrostic .letter {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  font-weight: 600;
  color: var(--gold-ink);
  width: 1.3em;
  flex: none;
  text-align: center;
  line-height: 1;
}

.acrostic .word-out {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-sign { margin-top: clamp(28px, 4vw, 44px); }

.about-sign .sign-label {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.about-sign .sign-name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   11  Marken-Ticker (bleibt: läuft durchgehend von rechts nach links)
   ========================================================================== */

/* Der Ticker bringt eigenen Innenabstand mit, darunter darf es enger sein.
   --marquee-bg muss dem Sektionsgrund entsprechen, damit die seitlichen
   Verläufe sauber ausblenden. */
.brands {
  --marquee-bg: var(--bg-soft);
  overflow: clip;
  padding-bottom: clamp(48px, 7vw, 90px);
}

.brands-head { text-align: center; max-width: 620px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 64px); }

.brands-head .lead { margin-inline: auto; }

.marquee {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(26px, 4vw, 48px);
  overflow: hidden;
}

.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(36px, 9vw, 150px);
  z-index: 2;
  pointer-events: none;
}

.marquee::before { left: 0; background: linear-gradient(to right, var(--marquee-bg, var(--bg)), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left, var(--marquee-bg, var(--bg)), transparent); }

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* gleicher Abstand zwischen allen Logos */
  gap: clamp(46px, 6vw, 96px);
  padding-right: clamp(46px, 6vw, 96px);
  animation: marquee 52s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  to { transform: translateX(calc(-50% - clamp(22px, 3.5vw, 60px))); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px;
    padding-right: 0;
  }
  .marquee-track > *[aria-hidden="true"] { display: none; }
}

/* Jede Bühne ist genau so breit wie ihr Logo. Dadurch ist der Abstand
   ZWISCHEN den Logos überall gleich (der Flex-Gap), statt dass unterschiedlich
   breite Schriftzüge in gleich breiten Kästen unterschiedlich große Lücken
   erzeugen.
   Pro Marke werden Höhe und Höchstbreite gesetzt, damit alle optisch gleich
   schwer wirken – ein sehr breiter Schriftzug braucht weniger Höhe als ein
   hohes Signet. Die Höchstbreite verhindert außerdem, dass eine Datei ohne
   eigene Maße die Reihe sprengt. */
.brand {
  flex: none;
  display: grid;
  place-items: center;
  height: 80px;
}

.brand img {
  width: auto;
  height: auto;
  max-height: var(--logo-h, 42px);
  max-width: var(--logo-w, 160px);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

/* Optische Feinjustierung je Marke (Seitenverhältnis in Klammern) */
/* Jane Lushka bringt viel Leerraum in der Datei mit (Zeichnung füllt nur 67 %
   der Höhe) und braucht deshalb mehr Platz als das Seitenverhältnis vermuten lässt */
.brand--jane     img { --logo-h: 78px; --logo-w: 165px; }   /* 2,0 : 1  */
.brand--nile     img { --logo-h: 58px; --logo-w:  60px; }   /* 0,6 : 1  */
.brand--cerises  img { --logo-h: 58px; --logo-w: 130px; }   /* 1,8 : 1  */
.brand--jcsophie img { --logo-h: 34px; --logo-w: 150px; }   /* 4,2 : 1  */
.brand--narcisa  img { --logo-h: 62px; --logo-w: 150px; }   /* 2,0 : 1  */
.brand--italy    img { --logo-h: 44px; --logo-w: 145px; }   /* 3,0 : 1  */
.brand--herzens  img { --logo-h: 30px; --logo-w: 165px; }   /* 5,7 : 1  */
.brand--rossi    img { --logo-h: 26px; --logo-w: 190px; }   /* 9,1 : 1  */
.brand--ania     img { --logo-h: 20px; --logo-w: 205px; }   /* 12,9 : 1 */

.brand:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   12  Besuch / Kontaktdaten
   ========================================================================== */

.visit { background: var(--bg-soft); }

.visit-grid { display: grid; gap: clamp(32px, 5vw, 56px); }

@media (min-width: 900px) {
  .visit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 90px); align-items: start; }
}

.visit-list { margin-top: clamp(26px, 4vw, 44px); border-top: 1px solid var(--line); }

/* Variante ohne Vorlauf – z. B. als erstes Element einer Spalte */
.visit-list--plain { margin-top: 0; border-top: 0; }
.visit-list--plain .visit-row:first-child { padding-top: 0; }

.visit-row {
  display: grid;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 560px) {
  .visit-row { grid-template-columns: 152px minmax(0, 1fr); gap: 20px; }
}

.visit-row dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 4px;
}

.visit-row dd { margin: 0; color: var(--ink-soft); }

.visit-row a { border-bottom: 1px solid var(--gold-veil); transition: border-color 0.3s ease, color 0.3s ease; }
.visit-row a:hover { color: var(--gold-ink); border-bottom-color: var(--gold); }

.visit-list + .btn { margin-top: clamp(26px, 4vw, 40px); }

.map-shell {
  position: relative;
  aspect-ratio: 4 / 3.2;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-shell--spaced { margin-top: clamp(28px, 4vw, 44px); }

.map-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.7) sepia(0.12); }

.map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}

.map-consent p { max-width: 40ch; font-size: var(--t-small); color: var(--ink-soft); }

/* ==========================================================================
   13  Footer  (Qualitätsreferenz – bewusst nah am Bestand belassen)
   ========================================================================== */

.footer {
  background: var(--espresso);
  color: #cfc9bf;
  padding-block: clamp(56px, 8vw, 110px) 32px;
}

.footer a { transition: color 0.3s ease; }
.footer a:hover { color: var(--gold); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--line-light);
}

@media (min-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.footer-brand img { height: 50px; width: auto; }

.footer-brand p { margin-top: 18px; font-size: var(--t-small); max-width: 32ch; color: rgba(250, 248, 244, 0.66); }

.footer h4 {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.footer li { margin-bottom: 8px; font-size: var(--t-small); }

.footer li a { display: inline-block; padding-block: 3px; }

.footer address { font-style: normal; font-size: var(--t-small); line-height: 2; }

.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: var(--t-small);
  color: rgba(250, 248, 244, 0.55);
}

/* ==========================================================================
   14  Unterseiten, Prosa, Lightbox
   ========================================================================== */

.page-hero {
  padding-top: calc(var(--nav-h) + clamp(44px, 8vw, 100px));
  padding-bottom: clamp(36px, 6vw, 72px);
  background: var(--bg);
}

.page-hero .h-display { max-width: 18ch; }
.page-hero .lead { margin-top: clamp(20px, 3vw, 32px); }

.prose { max-width: 68ch; }

.prose h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 1.9em 0 0.6em;
}

.prose h3 {
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
}

.prose p, .prose li { color: var(--ink-soft); }

.prose p { margin-bottom: 1.1em; }

.prose > p:first-child { font-size: var(--t-lead); line-height: 1.8; }

.prose ul { margin-bottom: 1.3em; }

.prose ul li { position: relative; padding-left: 24px; margin-bottom: 0.45em; }

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 12px;
  height: 2px;
  background: var(--gold);
}

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose a { border-bottom: 1px solid var(--gold-veil); transition: border-color 0.3s ease, color 0.3s ease; }
.prose a:hover { color: var(--gold-ink); border-bottom-color: var(--gold); }

/* ---------- Kontakt ---------- */

.contact-grid { display: grid; gap: clamp(32px, 5vw, 56px); }

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
}

/* Anrufen / E-Mail schreiben – auf dem Handy die wichtigsten Wege */
.contact-actions {
  margin-top: clamp(26px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-actions .btn { flex: 1 1 auto; }
.contact-actions .btn::after { content: none; }
.contact-actions .btn svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 560px) {
  .contact-actions .btn { flex: 0 0 auto; }
}

/* ---------- CTA-Band ---------- */

.cta-band { background: var(--espresso); color: rgba(250, 248, 244, 0.8); text-align: center; }

.cta-band .h-display { margin-inline: auto; max-width: 18ch; color: #faf8f4; }
.cta-band .eyebrow { justify-content: center; color: rgba(250, 248, 244, 0.62); }
.cta-band .lead { margin-inline: auto; color: rgba(250, 248, 244, 0.72); }
.cta-band .cta-actions { margin-top: clamp(26px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Öffnungszeiten: auf schmalen Geräten Zeile für Zeile.
   In einer Zeile bräche sonst mitten in der Uhrzeit um ("Sa 09:00 –" /
   "14:00 Uhr"). Der Trennpunkt ergibt gestapelt keinen Sinn und entfällt. */
.hours-line { display: block; }
.hours-sep  { display: none; }

@media (min-width: 560px) {
  .hours-line { display: inline; }
  .hours-sep  { display: inline; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9300;
  background: rgba(20, 17, 13, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 8vw, 72px) clamp(12px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }

.lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-height: 100%; }

.lightbox img {
  max-width: min(94vw, 720px);
  max-height: 74svh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.lightbox-cap {
  color: rgba(250, 248, 244, 0.72);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(250, 248, 244, 0.28);
  color: #faf8f4;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.lightbox-close:hover, .lightbox-nav:hover { background: rgba(250, 248, 244, 0.95); border-color: transparent; color: var(--ink); }

.lightbox-close { top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); }
.lightbox-close svg, .lightbox-nav svg { width: 18px; height: 18px; }

.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav--prev { left: clamp(8px, 2vw, 26px); }
.lightbox-nav--next { right: clamp(8px, 2vw, 26px); }

@media (max-width: 620px) {
  .lightbox-nav { top: auto; bottom: clamp(12px, 4vw, 24px); transform: none; }
  .lightbox-nav--prev { left: 50%; margin-left: -60px; }
  .lightbox-nav--next { right: 50%; margin-right: -60px; }
  .lightbox { padding-bottom: 88px; }
}

/* ---------- Reveal-Grundzustände ----------------------------------------
   Wichtig gegen das kurze Aufblitzen beim Laden:
   Der Startzustand steht HIER, nicht erst im JavaScript. Sonst wäre der
   Inhalt zwischen dem ersten Zeichnen der Seite und dem Start von GSAP
   kurz sichtbar und würde dann wegspringen.

   `js-anim` setzt ein winziges Skript im <head>, also noch bevor irgendetwas
   gezeichnet wird. Kommt GSAP nicht zustande (kein JavaScript, blockiertes
   CDN, reduzierte Bewegung), wird die Klasse wieder entfernt und alles ist
   normal sichtbar.
   ------------------------------------------------------------------------ */

.js-anim [data-reveal] { opacity: 0; transform: translateY(30px); }
.js-anim [data-split]  { opacity: 0; }
.js-anim .pillar       { opacity: 0; transform: translateY(28px); }
.js-anim .acrostic li  { opacity: 0; transform: translateX(-18px); }
.js-anim [data-clip]   { clip-path: inset(0 0 100% 0); }

.js-anim .hero-kicker,
.js-anim .hero-lead,
.js-anim .hero-actions > *,
.js-anim .hero-bar > *          { opacity: 0; }
.js-anim .hero-title .line > span { transform: translateY(105%); }

.js [data-reveal] { will-change: transform, opacity; }

/* ---------- Druck ---------- */

@media print {
  .nav, .nav-overlay, .footer, .grain, .cursor-dot, .cursor-ring,
  .hero-bar, .preloader, .k-controls, .k-foot, .marquee { display: none !important; }
  .hero { min-height: auto; }
  body { color: #000; background: #fff; }
}