/* ============================================
   JOE'S MÖBELBOUTIQUE - Frontpage v3.1
   ALL-CORMORANT / Premium Editorial
   Single source of truth: joes_frontpage_v3_1.html (approved 06.06.2026)
   ============================================
   COLOR SYSTEM - STRICT
   Backgrounds:  ink #0E0E10 | cream #FAF7F2 | yellow #F4CE5A | white #FFFFFF
   - Cream BG    Ink text, Teal-dark accents, INK logos
   - Ink BG      Cream text, Teal accents, Yellow micro-akzent, CREAM logos
   - Yellow BG   Ink text only (NEVER cream/white)
   - Logos NEVER on matching color (no black-on-black, no cream-on-cream)
   ============================================ */
/* ============================================
   DESIGN TOKENS (v3.17), single source of truth
   SPACING  8px-grid: --space-1..16  (8/16/24/32/40/48/64/80/96/128)
   SECTION  --section-pad-sm/md/lg (responsive clamp)
            --section-pad / --section-pad-tight = Aliase auf md / sm
   TYPE     --text-xs..8xl (modular, clamp = fluid)
   LEADING  --leading-tight/snug/normal/relaxed
   COLOR    --ink/-soft · --cream/-soft · --yellow · --teal/-dark · --line/-light
   ============================================ */
:root {
  /* COLOR */
  --ink: #0E0E10;
  --ink-soft: #2A2A2D;
  --cream: #FAF7F2;
  --cream-soft: #EFEAE0;
  --yellow: #F4CE5A;
  --teal: #7BBCB5;
  --teal-dark: #3D6E69;
  --line: rgba(14,14,16,0.12);
  --line-light: rgba(250,247,242,0.18);

  /* FONTS */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;

  /* SPACING, 8px grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* SECTION-LEVEL */
  --section-pad-sm: clamp(60px, 6vw, 80px);
  --section-pad-md: clamp(80px, 8vw, 120px);
  --section-pad-lg: clamp(100px, 10vw, 160px);
  --section-pad: var(--section-pad-md);
  --section-pad-tight: var(--section-pad-sm);

  /* TYPE SCALE (v3.19 moderat hochgesetzt; xs/sm bleiben = Editorial-Distinktion) */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 19px;
  --text-lg: 21px;
  --text-xl: 23px;
  --text-2xl: clamp(24px, 2.2vw, 27px);
  --text-3xl: clamp(28px, 2.8vw, 34px);
  --text-4xl: clamp(34px, 3.8vw, 46px);
  --text-5xl: clamp(40px, 4.5vw, 56px);
  --text-6xl: clamp(48px, 5.5vw, 72px);
  --text-7xl: clamp(56px, 7vw, 96px);
  --text-8xl: clamp(72px, 9vw, 128px);

  /* LINE HEIGHT */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* LAYOUT */
  --container: 1280px;
  /* CONTENT-WIDTHS (v3.28 hochgesetzt, Text nutzt mehr Page-Breite) */
  --content-narrow: 920px;   /* Article-Bodies, Legal, Über-uns */
  --content-medium: 1180px;  /* Sub-Page Listings */
  --content-wide: 1320px;    /* Grids/Galleries */
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--cream); color: var(--ink); overflow-x: hidden; max-width: 100vw; }
img, video, iframe { max-width: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  cursor: none;
  overflow-x: hidden;
}

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

/* WP integration   neutral main wrapper, sections are full-bleed */
.site-main { display: block; }
img { max-width: 100%; }

/* FIX1 - Brand-Logos NIE strecken (Aspect-Ratio bleibt erhalten, egal welcher Container) */
img[src*="/logos/"] { object-fit: contain; object-position: center; }

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor {
  position: fixed;
  width: 14px;
  height: 14px;
  background: var(--yellow);          /* Yellow Dot */
  border: 1.5px solid var(--ink);     /* Ink Border */
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, background 0.25s, border-color 0.25s;
  mix-blend-mode: normal;             /* kein difference mehr - immer sichtbar */
}
.cursor.hover {
  width: 44px;
  height: 44px;
  background: var(--teal);            /* Teal beim Hover */
  border-color: var(--cream);
}
/* Dark-Section Override (Cursor über dunklem BG) */
.cursor.on-dark {
  background: var(--cream);
  border-color: var(--yellow);
}
.cursor.on-dark.hover {
  background: var(--yellow);
  border-color: var(--cream);
}

/* ============================================
   TYPOGRAPHY   ALL CORMORANT
   ============================================ */
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.eyebrow-light { color: var(--teal); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.08;
}

/* FIX6 - clean text wrapping (v3.36 erweitert: Orphans site-wide vermeiden) */
h1, h2, h3, h4, .display-xl, .display-lg, .display-md, .display-sm { text-wrap: balance; }
p, blockquote, .lead, .hero-sub, .step-body, .news-excerpt, .anreise-card p,
.brand-card-body p, .cta-statement, .cta-line, .pull-quote, .faq-answer-inner p,
.faq-question span, article p, .single-content p, .process-lead, .category-lead,
.news-archive-item .news-excerpt { text-wrap: pretty; }

.display-xl { font-size: clamp(64px, 10vw, 160px); font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; }
.display-lg { font-size: clamp(48px, 6.5vw, 96px); font-weight: 400; }
.display-md { font-size: clamp(36px, 4.5vw, 64px); font-weight: 400; }
.display-sm { font-size: clamp(28px, 3vw, 40px); font-weight: 500; }

.italic { font-style: italic; font-weight: 400; }

p { font-family: var(--font-body); font-weight: 400; font-size: 21px; line-height: 1.6; max-width: 70ch; }

.lead { font-family: var(--font-body); font-size: 24px; line-height: 1.5; font-weight: 500; max-width: 28ch; }

/* ============================================
   LAYOUT HELPERS
   ============================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 120px 0; position: relative; }
.section-tight { padding: var(--space-10) 0; }

.bg-cream { background: var(--cream); color: var(--ink); }
.bg-ink { background: var(--ink); color: var(--cream); }
.bg-yellow { background: var(--yellow); color: var(--ink); }
.bg-cream-soft { background: var(--cream-soft); color: var(--ink); }

/* ============================================
   NAVIGATION
   ============================================ */
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(250,247,242,0.95), rgba(250,247,242,0.85));
  backdrop-filter: blur(8px);
  transition: background 0.4s ease;
}
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { height: 56px; width: auto; display: block; transition: opacity 0.3s; }
.brand-logo:hover img { opacity: 0.75; }
/* v3.49: Logo auf kleinen Screens etwas kompakter (greift auch für die
   freigestellten Transparent-SVGs, sobald vorhanden). */
@media (max-width: 900px) { nav.top .brand-logo img { height: 44px; } }
@media (max-width: 500px) { nav.top .brand-logo img { height: 38px; } }
/* logo variants - subpages show the dark logo by default */
.brand-logo .logo-light { display: none; }
.brand-logo .logo-dark { display: block; }

/* HOME: nav starts transparent over the dark hero (light logo + cream links),
   switches to cream bg / ink text after 100px scroll (.scrolled via main.js). */
body.home nav.top { background: linear-gradient(to bottom, rgba(14,14,16,0.4), rgba(14,14,16,0)); }
body.home nav.top a { color: var(--cream); }
body.home nav.top a::after { background: var(--cream); }
body.home .brand-logo .logo-light { display: block; }
body.home .brand-logo .logo-dark { display: none; }
body.home nav.top.scrolled { background: linear-gradient(to bottom, rgba(250,247,242,0.95), rgba(250,247,242,0.85)); }
body.home nav.top.scrolled a { color: var(--ink); }
body.home nav.top.scrolled a::after { background: var(--ink); }
body.home nav.top.scrolled .brand-logo .logo-light { display: none; }
body.home nav.top.scrolled .brand-logo .logo-dark { display: block; }

/* Mobile burger + fullscreen overlay nav (FIX6) - colour follows nav state */
.burger { display: none; background: none; border: none; cursor: pointer; padding: 12px; color: var(--ink); }
.burger span { display: block; width: 26px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform 0.3s, opacity 0.3s; }
body.home .burger { color: var(--cream); }
body.home nav.top.scrolled .burger { color: var(--ink); }
.mobile-nav {
  position: fixed; top: 0; right: 0;
  width: 100%; height: 100vh;
  background: var(--cream);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.mobile-nav.open { transform: translateX(0); }
.burger-close { position: absolute; top: 24px; right: 28px; background: none; border: none; font-size: 40px; line-height: 1; color: var(--ink); cursor: pointer; }
.mobile-nav ul { list-style: none; padding: 0; text-align: center; }
.mobile-nav li { margin: var(--space-3) 0; }
.mobile-nav a { font-family: var(--font-display); font-size: 36px; font-style: italic; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
nav.top ul {
  display: flex;
  gap: 52px;
  list-style: none;
}
nav.top a {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.04em;
  position: relative;
}
nav.top a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width 0.3s;
}
nav.top a:hover::after { width: 100%; }

/* ============================================
   HERO with SHADER
   ============================================ */
.hero {
  height: 88vh;
  min-height: 640px;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  padding: 120px var(--gutter) var(--space-10);
}

/* SHADER STRATEGY (Stand v3.54):
 * , Full WebGL:   Frontpage Hero (#shader-canvas; Desktop 16+14, Mobil 10+8 Shapes)
 * , Subtle WebGL: Frontpage Quote (#quote-shader) + Über-uns Quote
 *                  (#ueber-uns-quote-shader), je 7+6 Shapes
 * , Aus:          prefers-reduced-motion (alle Canvas) sowie ohne WebGL-Support
 *                  (JS-Fallback -> Gradient im Hero)
 * , Enqueue:      nur Front-Page + /ueber-uns (inc/enqueue.php)
 * , CSS-only:     Brand-Shapes (Yellow+Teal) auf .rundgang + .site-footer
 *                  (v3.55, ROUND 54-MAIN), kein WebGL, Performance-schonend.
 */
#shader-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,14,16,0.2) 0%, rgba(14,14,16,0.6) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--cream);
  opacity: 0.5;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 144px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--cream);
  margin-bottom: var(--space-5);
  max-width: 18ch;
}
.hero h1 em { font-style: italic; font-weight: 400; }

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  flex-wrap: wrap;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.9;
  max-width: 34ch;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--cream);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cream);
  transition: gap 0.3s;
}
.hero-cta:hover { gap: 22px; }
.hero-cta::after { content: '\2192'; font-style: normal; }

.hero-since {
  position: absolute;
  bottom: 90px;
  right: var(--gutter);
  z-index: 3;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.5;
  writing-mode: vertical-rl;
}

/* ============================================
   INTRO SECTION
   ============================================ */
.intro {
  padding: var(--section-pad) var(--gutter);
  text-align: center;
}
.intro .eyebrow { margin-bottom: var(--space-5); }
.intro h2 {
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 400;
  line-height: 1.15;
  max-width: 32ch;
  margin: 0 auto var(--space-6);
  letter-spacing: -0.015em;
}
.intro h2 em { font-style: italic; }
.intro .signature {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--teal-dark);
  letter-spacing: 0.05em;
}

/* ============================================
   PROCESS / WIE-WIR-ARBEITEN, v3.30 Premium Redesign
   Hero-Intro (animiert) + typografische 2x2 Cards, keine Fotos
   ============================================ */
.process-section {
  padding: calc(var(--section-pad-lg) * 1.3) var(--gutter) var(--section-pad-lg);
  background: var(--cream-soft);
  position: relative;
  overflow: hidden;
}

/* dezenter floating Background, Yellow-Square + Teal-Rectangle */
.process-section::before {
  content: '';
  position: absolute;
  top: 10%;
  right: -100px;
  width: 300px;
  height: 300px;
  background: var(--yellow);
  opacity: 0.05;
  z-index: 0;
  animation: floatA 20s ease-in-out infinite;
}
.process-section::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: -150px;
  width: 200px;
  height: 400px;
  background: var(--teal);
  opacity: 0.04;
  z-index: 0;
  animation: floatB 25s ease-in-out infinite;
}
@keyframes floatA {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-30px, -20px) rotate(15deg); }
}
@keyframes floatB {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(20px, -30px) rotate(-10deg); }
}

/* INTRO */
.process-intro {
  max-width: 1100px;
  margin: 0 auto var(--space-16);
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal-dark);
  display: block;
  margin-bottom: var(--space-5);
  opacity: 0;
  animation: fadeInUp 0.8s 0.2s forwards;
}
.process-headline {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 144px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: fadeInUp 1s 0.4s forwards;
}
.process-headline em {
  font-style: italic;
  position: relative;
  display: inline-block;
}
/* Yellow Underline-Effekt unter dem italic-Wort */
.process-headline .word-accent::after {
  content: '';
  position: absolute;
  bottom: 0.08em;
  left: 0;
  right: 0;
  height: 0.15em;
  background: var(--yellow);
  opacity: 0.45;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: drawUnderline 1.2s 1s forwards cubic-bezier(0.22, 1, 0.36, 1);
}
.process-lead {
  font-family: var(--font-body);
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto var(--space-8);
  opacity: 0;
  animation: fadeInUp 1s 0.7s forwards;
}
.process-lead .lead-emphasis {
  display: block;
  margin-top: var(--space-2);
  font-style: italic;
  color: var(--teal-dark);
  font-weight: 500;
}
.process-divider {
  max-width: 200px;
  margin: 0 auto;
  height: 4px;
}
.process-divider svg { width: 100%; height: 100%; display: block; }
.divider-line { animation: drawLine 1.5s 1.2s forwards; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drawUnderline { to { transform: scaleX(1); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* CARDS, typografische 2x2 Cards mit riesiger italic-Background-Nummer */
.process-cards {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  position: relative;
  z-index: 1;
}
.process-card {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.6s, background 0.6s;
  cursor: default;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Riesige Italic-Nummer im Background */
.card-number-bg {
  position: absolute;
  top: -10px;
  right: 20px;          /* v3.49: von -10px nach innen -> Zahl bleibt in der Card */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(160px, 18vw, 280px);   /* v3.49: etwas kleiner, kein Abschnitt rechts */
  line-height: 0.85;
  color: var(--yellow);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  transition: opacity 0.6s, transform 0.6s;
}
/* Hover-Effekte nur für echte Pointer (Touch: deaktiviert) */
@media (hover: hover) and (pointer: fine) {
  .process-card:hover {
    transform: translateY(-4px);
    border-color: var(--teal-dark);
  }
  .process-card:hover .card-number-bg {
    opacity: 0.32;
    transform: scale(1.05);
  }
}
.card-content {
  position: relative;
  z-index: 1;
  max-width: 440px;
}
.card-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  display: block;
  margin-bottom: var(--space-3);
}
.card-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.card-title em { font-style: italic; }
.card-body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 48ch;
}

@media (max-width: 900px) {
  .process-cards { grid-template-columns: 1fr; gap: var(--space-4); }
  .process-card { min-height: auto; padding: var(--space-8) var(--space-6); }
  .card-number-bg { font-size: 120px; top: -5px; right: 15px; }   /* v3.49: nach innen */
  .process-headline { font-size: clamp(48px, 12vw, 80px); }
  .process-lead { font-size: 20px; }
}

@media (max-width: 500px) {
  .card-number-bg { font-size: 90px; right: 10px; }   /* v3.49: klein, aber sichtbar in der Card */
}

/* ============================================
   BRAND MASTHEAD   UNIFORM LOGO BOXES
   ============================================ */
.marken {
  padding: var(--section-pad) var(--gutter);
  background: var(--cream);
  text-align: center;
}
.marken .eyebrow { margin-bottom: 28px; }
.marken h2 {
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 auto var(--space-3);
  max-width: 30ch;
}
.marken h2 em { font-style: italic; }
.marken .lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto var(--space-10);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* UNIFORM LOGO BOX   all logos same visual size */
.logo-cell {
  aspect-ratio: 9 / 5;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) 28px;
  background: var(--cream);
  transition: background 0.4s;
}
.logo-cell:hover { background: var(--cream-soft); }

.logo-cell img {
  /* SAME MAX-HEIGHT for all, object-fit ensures uniform visual size */
  max-height: 38px;
  max-width: 75%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.4s;
}
.logo-cell:hover img { opacity: 1; }

.marken-cta {
  margin-top: var(--space-8);
}
.marken-cta a {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  letter-spacing: 0.02em;
}

/* ============================================
   STORY / SEIT 1977
   ============================================ */
.story {
  padding: var(--section-pad) var(--gutter);
  background: var(--cream-soft);
}
.story-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.story-meta { grid-column: 1; }
.story-body { grid-column: 2; }
.story-photo {
  grid-column: 3;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--cream-soft);
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FIX3 centering: Story is the one split-layout section → explicitly left */
.story-meta, .story-body { text-align: left; }
.story-stats > div { text-align: left; }
.story-meta .eyebrow { margin-bottom: var(--space-4); }
.story-meta h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.story-meta h2 em { font-style: italic; }

.story-body {
  font-family: var(--font-display);
  padding-top: 12px;
}
.story-body p {
  font-size: 21px;
  line-height: 1.65;
  margin-bottom: 28px;
}
.story-body p:last-child { margin-bottom: 0; }
.story-body p em { font-style: italic; color: var(--teal-dark); }

.story-stats {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.stat-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

/* FIX11.3 - full-bleed photo band */
.fullbleed-photo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 70vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  background: var(--ink);
}
.fullbleed-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   PROJEKTE / RÄUME   PREMIUM PHOTO GRID on CREAM
   ============================================ */
.projekte {
  padding: var(--section-pad) var(--gutter);
  background: var(--cream);
}
.projekte-header {
  max-width: var(--container);
  margin: 0 auto var(--space-10);
  text-align: center;
}
.projekte-header .eyebrow { margin-bottom: 28px; }
.projekte-header h2 {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 auto var(--space-3);
  max-width: 24ch;
}
.projekte-header h2 em { font-style: italic; }
.projekte-header .lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

/* v3.26: uniformes 3-col-Grid (4/3), keine per-Slot editorial spans mehr */
.projekte-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.projekte-grid > div {
  overflow: hidden;
  background: var(--cream-soft);
  aspect-ratio: 4/3;
}
.projekte-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.projekte-grid > div:hover img {
  transform: scale(1.04);
}

.projekte-cta {
  margin-top: var(--space-8);
  text-align: center;
}
.projekte-cta a {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  letter-spacing: 0.02em;
}

/* ============================================
   BIG QUOTE   DARK BG with subtle shader
   ============================================ */
.quote {
  padding: var(--section-pad) var(--gutter);
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ============================================
   3D-RUNDGANG EMBED-PAGE
   ============================================ */
.rundgang-page { background: var(--cream); }
.rundgang-intro {
  padding: var(--section-pad) var(--gutter) 60px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.rundgang-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-4);
}
.rundgang-intro h1 em { font-style: italic; color: var(--teal-dark); }
.rundgang-intro .lead {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 55ch;
  margin: 0 auto;
}
.rundgang-embed { padding: 0 var(--gutter) var(--section-pad); }
.iframe-wrap {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: var(--ink);
  overflow: hidden;
}
.iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
@media (max-width: 900px) { .iframe-wrap { aspect-ratio: 4/5; } }
#quote-shader {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.55;
}
.quote-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-6);
  color: var(--cream);
}
.quote-author {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ============================================
   WERTE   3-COLUMN ON CREAM
   ============================================ */
.werte {
  padding: var(--section-pad) var(--gutter);
  background: var(--cream);
}
.werte-header {
  max-width: var(--container);
  margin: 0 auto 100px;
  text-align: center;
}
.werte-header .eyebrow { margin-bottom: var(--space-4); }
.werte-header h2 {
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 30ch;
  margin: 0 auto;
}
.werte-header h2 em { font-style: italic; }

.werte-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}
.wert {
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink);
}
/* .wert-num removed (FIX7) */
.wert h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.wert h3 em { font-style: italic; }
.wert p {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ============================================
   SCHAURAUM INVITATION   YELLOW
   ============================================ */
.schauraum {
  padding: var(--section-pad) var(--gutter);
  background: var(--yellow);
  color: var(--ink);  /* INK on yellow - never cream/white */
  text-align: center;
}
.schauraum .eyebrow { color: var(--ink); margin-bottom: var(--space-4); opacity: 0.7; }
.schauraum h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 56px;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.schauraum h2 em { font-style: italic; }
.schauraum-details {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto 56px;
}
.schauraum-details strong { font-weight: 500; }
.schauraum-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 18px 38px;
  border: 1px solid var(--ink);
  transition: background 0.3s, color 0.3s;
}
.schauraum-cta:hover { background: var(--ink); color: var(--cream); }

/* ============================================
   NEWS TEASER - 3-CARD on CREAM
   ============================================ */
.news-teaser {
  padding: var(--section-pad) var(--gutter);
  background: var(--cream);
}
.news-header {
  max-width: var(--container);
  margin: 0 auto var(--space-10);
  text-align: center;
}
.news-header h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: var(--space-3);
}
.news-header h2 em { font-style: italic; }

.news-grid {
  /* v3.87.0: 2-up statt 3-up. Container auf 880px begrenzt, damit die zwei
     Cards groesser + gewollt zentriert wirken (nicht leer auf 1440). */
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.news-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card:hover { transform: translateY(-4px); }

.news-thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream-soft);
  margin-bottom: var(--space-3);
}
.news-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card:hover .news-thumb img { transform: scale(1.04); }

.news-date {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-dark);
  display: block;
  margin-bottom: 12px;
}
.news-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.news-excerpt {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.news-cta {
  text-align: center;
  margin-top: var(--space-8);
}
.news-cta a {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

/* ============================================
   FOOTER   INK BG, CREAM LOGOS
   ============================================ */
footer.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 100px var(--gutter) var(--space-5);
}

.footer-brands {
  max-width: var(--container);
  margin: 0 auto var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--line-light);
}
.footer-brands .eyebrow {
  color: var(--teal);
  text-align: center;
  margin-bottom: var(--space-6);
}

.footer-logo-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.footer-logo-cell {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-logo-cell img {
  max-height: 28px;
  max-width: 90%;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.footer-logo-cell:hover img { opacity: 1; }

.footer-main {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 28px;
}
.footer-col p, .footer-col a {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
  display: block;
}
.footer-col a:hover { opacity: 1; border-bottom: 1px solid var(--cream); }

.footer-brand-logo img { height: 50px; width: auto; display: block; margin-bottom: var(--space-3); }
.footer-tagline {
  font-style: italic;
  font-size: 17px;
  color: var(--teal);
  margin-bottom: var(--space-3);
  opacity: 1;
}

.footer-legal {
  max-width: var(--container);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-light);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--cream);
  opacity: 0.6;
  letter-spacing: 0.05em;
}
.footer-legal a { color: var(--cream); text-decoration: none; }
.footer-legal a:hover { border-bottom: 1px solid var(--cream); }

/* ============================================
   KONTAKT (/termin) - HERO PHOTO + FAQ ACCORDION
   ============================================ */
.kontakt-hero {
  height: 50vh;
  min-height: 360px;
  max-height: 540px;
  overflow: hidden;
  background: var(--cream-soft);
}
.kontakt-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.faq-section { padding: var(--section-pad) var(--gutter); background: var(--cream); }
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.3s;
}
.faq-question:hover { color: var(--teal-dark); }
.faq-icon { width: 24px; height: 24px; position: relative; flex-shrink: 0; margin-left: var(--space-3); }
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-answer-inner {
  padding-bottom: 28px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
}
.faq-item.open .faq-answer { max-height: 600px; }

/* ============================================
   PROJEKTE - VISUAL-FIRST ARCHIVE + DETAIL
   (eigene Klassen; .projekte-grid ist die Frontpage-Foto-Sektion)
   ============================================ */
.projekt-archive { padding: var(--section-pad) var(--gutter); }
.projekt-archive-head { max-width: var(--container); margin: 0 auto 56px; }
.projekt-archive-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.projekt-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink);
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.projekt-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.92;
}
.projekt-card:hover img { transform: scale(1.05); opacity: 1; }
.projekt-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,14,16,0.92) 0%, rgba(14,14,16,0.35) 50%, rgba(14,14,16,0) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.projekt-card-meta { color: var(--cream); width: 100%; }
.projekt-card-location {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
  display: block;
}
.projekt-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: var(--space-1);
  text-wrap: balance;
}
.projekt-card-tags {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--cream);
  opacity: 0.75;
}
/* placeholder card (kein Titelbild vorhanden) */
.projekt-card--placeholder .projekt-card-overlay {
  background: linear-gradient(to top, rgba(14,14,16,0.10) 0%, rgba(14,14,16,0) 60%);
}
.projekt-card--placeholder .projekt-card-location { color: var(--teal-dark); }
.projekt-card--placeholder .projekt-card-title { color: var(--ink); }
.projekt-card--placeholder .projekt-card-tags { color: var(--ink-soft); opacity: 1; }

/* DETAIL */
.projekt-hero {
  height: 80vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--cream-soft);
}
.projekt-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.projekt-header {
  padding: var(--section-pad) var(--gutter);
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.projekt-header h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.projekt-meta {
  display: flex;
  flex-wrap: wrap;                 /* bricht auf schmalen Screens sauber um */
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-3) auto var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.projekt-meta-item { position: relative; }
.projekt-meta-item + .projekt-meta-item::before {
  content: '·';
  margin-right: var(--space-4);
  color: rgba(14,14,16,0.3);
}
/* v3.45: ohne Beschreibung gibt der Header der Galerie sauberen Abstand */
.projekt-header:has(+ .projekt-gallery) { padding-bottom: var(--space-12); }
.projekt-description + .projekt-gallery { margin-top: var(--space-8); }  /* Fallback ohne :has */
.projekt-description {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.55;
  max-width: 55ch;
  margin: 0 auto;
  color: var(--ink-soft);
}
.projekt-description p { max-width: none; margin-bottom: 20px; }
/* v3.26: uniformes 3-col-Grid (4/3) */
.projekt-gallery {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.projekt-gallery .gallery-img { overflow: hidden; background: var(--cream-soft); aspect-ratio: 4/3; }
.projekt-gallery .gallery-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.projekt-gallery .gallery-img:hover img { transform: scale(1.04); }

.projekt-back {
  display: block;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--teal-dark);
  text-decoration: none;
}
.projekt-back:hover { color: var(--ink); }
.projekt-related { padding: var(--section-pad) var(--gutter); background: var(--cream-soft); }
.projekt-related-head { text-align: center; margin: 0 auto 56px; }
.projekt-related-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}

@media (max-width: 900px) {
  .projekt-archive-grid { grid-template-columns: 1fr; }
  .projekt-related-grid { grid-template-columns: 1fr; }
  .projekt-gallery { grid-template-columns: 1fr; }
  .projekt-gallery .gallery-img { grid-column: 1 / -1 !important; aspect-ratio: 4/3 !important; }
}

/* ============================================
   INLINE-CTA (editorial, ersetzt boxed CTA-Kacheln)
   ============================================ */
.inline-cta {
  max-width: 60ch;
  margin: var(--space-10) auto;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.inline-cta p {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.inline-cta em { font-style: italic; color: var(--teal-dark); }
.inline-cta a {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.inline-cta a:hover { color: var(--teal-dark); border-color: var(--teal-dark); }

/* ============================================
   3D-RUNDGANG - DARK SECTION + PLAY-PREVIEW
   ============================================ */
.rundgang { padding: var(--section-pad) var(--gutter); background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
.rundgang-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-10);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ============================================
   v3.55 CSS BRAND-SHAPES (ROUND 54-MAIN), statische/leicht animierte
   Yellow+Teal-Akzente für Mid-Tier-Dark-Sections OHNE WebGL (Performance).
   WebGL bleibt exklusiv für Hero + die beiden Quote-Sections.
   ============================================ */
.rundgang::before {
  content: ''; position: absolute; top: 8%; right: 4%;
  width: 80px; height: 80px; background: var(--yellow); opacity: 0.08;
  transform: rotate(15deg); animation: brandFloatA 16s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.rundgang::after {
  content: ''; position: absolute; bottom: 12%; left: 6%;
  width: 60px; height: 100px; background: var(--teal); opacity: 0.07;
  transform: rotate(-8deg); animation: brandFloatB 22s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}

.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; top: 40px; right: -30px;
  width: 120px; height: 80px; background: var(--yellow); opacity: 0.05;
  transform: rotate(8deg); pointer-events: none; z-index: 0;
}
.site-footer::after {
  content: ''; position: absolute; top: 120px; left: -40px;
  width: 70px; height: 130px; background: var(--teal); opacity: 0.04;
  transform: rotate(-5deg); pointer-events: none; z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }

@keyframes brandFloatA {
  0%, 100% { transform: rotate(15deg) translate(0, 0); }
  50%      { transform: rotate(20deg) translate(-15px, -10px); }
}
@keyframes brandFloatB {
  0%, 100% { transform: rotate(-8deg) translate(0, 0); }
  50%      { transform: rotate(-12deg) translate(10px, -20px); }
}
@media (prefers-reduced-motion: reduce) {
  .rundgang::before, .rundgang::after { animation: none !important; }
}
.rundgang .eyebrow { color: var(--teal); margin-bottom: var(--space-3); }
.rundgang h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: var(--space-3);
}
.rundgang h2 em { font-style: italic; }
.rundgang .lead {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.85;
  max-width: 40ch;
  margin-bottom: var(--space-5);
}
.rundgang-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cream);
  transition: gap 0.3s, color 0.3s, border-color 0.3s;
}
.rundgang-cta:hover { gap: 22px; color: var(--yellow); border-color: var(--yellow); }
.rundgang-preview {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ink-soft);
  display: block;
}
.rundgang-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rundgang-preview:hover img { transform: scale(1.04); }
.play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(244, 206, 90, 0.95);
  border: 2px solid var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background 0.3s;
}
/* v3.51: CSS-Dreieck statt Emoji ▶, rendert auf iOS nicht mehr als Emoji. */
.play-icon::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 20px solid var(--ink);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;            /* optischer Ausgleich zur Kreismitte */
}
.rundgang-preview:hover .play-icon { transform: translate(-50%, -50%) scale(1.1); background: var(--yellow); }
@media (max-width: 900px) { .rundgang-inner { grid-template-columns: 1fr; gap: var(--space-6); } }

/* FIX3.2 - column widths */
.process-intro .lead { max-width: 50ch; }
.story-body p { max-width: 56ch; }
.hero-sub { max-width: 38ch; }

/* ============================================
   BRAND-TRIO - 3 Marken auf INK, uniform aligned
   ============================================ */
.brand-trio { background: var(--ink); color: var(--cream); padding: var(--section-pad) var(--gutter); }
.brand-trio-header { max-width: var(--container); margin: 0 auto var(--space-10); text-align: center; }
.brand-trio-header .eyebrow { color: var(--teal); margin-bottom: var(--space-3); }
.brand-trio-header h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.15;
  max-width: 32ch;
  margin: 0 auto;
}
.brand-trio-header h2 em { font-style: italic; }
.brand-trio-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.brand-trio-card {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(250,247,242,0.18);
  padding-top: var(--space-5);
  align-items: flex-start;
}
.brand-trio-card .logo-wrap { height: 56px; display: flex; align-items: center; margin-bottom: var(--space-4); }
.brand-trio-card .logo-wrap img { max-height: 100%; max-width: 180px; width: auto; height: auto; object-fit: contain; }
.brand-trio-card .eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}
.brand-trio-card h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: var(--space-3);
  min-height: 2.6em;
}
.brand-trio-card p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.82;
  max-width: 40ch;
}

/* ============================================
   SCHAURAUM PAGE
   ============================================ */
/* v3.66 (FIX 11): Schauraum-Hero, Logo sichtbar.
   DESKTOP: Container breiter als 2:1 -> cover croppt VERTIKAL, also wirkt
   object-position Y. center 18% zeigt die obere Fassade inkl. JOE'S-Logo.
   MOBILE: Container ~1:1 (schmaler als 2:1) -> cover croppt HORIZONTAL, Y ist
   wirkungslos. Das Logo liegt rechts im Bild, daher X nach rechts (80%).
   (Die im Briefing vorgeschlagenen mobilen center 12%/8% hätten nichts bewegt.) */
.schauraum-hero { height: 60vh; min-height: 420px; max-height: 640px; overflow: hidden; background: var(--cream-soft); }
.schauraum-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
@media (max-width: 900px) {
  .schauraum-hero { height: 50vh; min-height: 380px; }
  .schauraum-hero img { object-position: 80% center; }
}
@media (max-width: 500px) {
  .schauraum-hero { height: 45vh; min-height: 340px; }
}
.schauraum-intro { padding: var(--section-pad) var(--gutter); max-width: 1100px; margin: 0 auto; text-align: center; }
.schauraum-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 500;
  margin: var(--space-3) 0 var(--space-4);
  letter-spacing: -0.02em;
}
.schauraum-intro h1 em { font-style: italic; }
.schauraum-meta { margin-top: var(--space-10); display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; text-align: left; }
.meta-block h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 20px;
}
.meta-block p, .meta-block a { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink); text-decoration: none; }
.meta-block a:hover { color: var(--teal-dark); }
.anreise { background: var(--cream-soft); padding: var(--section-pad) var(--gutter); }
.anreise h2 { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px); font-weight: 500; text-align: center; margin-bottom: var(--space-10); }
.anreise-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.anreise-card h3 { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--teal-dark); margin-bottom: var(--space-3); }
.anreise-card p { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink); }
.schauraum-gallery { padding: var(--section-pad) var(--gutter); }
.gallery-header { text-align: center; margin-bottom: var(--space-10); }
.gallery-header h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 500; margin-top: var(--space-3); }
.gallery-header h2 em { font-style: italic; }
/* v3.26: uniformes 3-col-Grid (4/3) */
.gallery-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.gallery-grid .gallery-img { overflow: hidden; background: var(--cream-soft); aspect-ratio: 4/3; }
.gallery-grid .gallery-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.gallery-grid .gallery-img:hover img { transform: scale(1.04); }

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .burger { display: block; }
  .story-inner { grid-template-columns: 1fr; gap: 60px; }
  /* v3.29: grid-column 2/3 zurücksetzen, sonst implizite Spalten -> Mobile-Overflow */
  .story-meta, .story-body, .story-photo { grid-column: auto; }
  /* v3.29: 56px Stat-Zahlen in 3 Spalten zwingen story-inner sonst auf 383px -> Rest-Overflow */
  .story-stats { gap: var(--space-3); }
  .story-stats .stat-num { font-size: 36px; }
  .werte-grid { grid-template-columns: 1fr; gap: 56px; }
  .news-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .brand-trio-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .brand-trio-card h3 { min-height: auto; }
  .schauraum-meta, .anreise-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .gallery-img { grid-column: 1 !important; aspect-ratio: 4/3 !important; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .projekte-grid { grid-template-columns: 1fr; }
  .projekte-grid > div { grid-column: 1; aspect-ratio: 4/3 !important; }
  .footer-logo-row { grid-template-columns: repeat(4, 1fr); gap: var(--space-4) var(--space-2); }
  .footer-main { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-legal { flex-direction: column; gap: var(--space-2); }
  nav.top ul { display: none; }
  body { cursor: auto; }
  .cursor { display: none; }
}

/* ============================================
   CENTERING-NORMALIZATION SITE-WIDE
   Alle centered Sections garantieren auch centered Sub-Texte
   ============================================ */
.intro,
.marken,
.werte-header,
.schauraum,
.schauraum-intro,
.news-header,
.process-intro,
.gallery-header,
.kontakt-section,
.kontakt-form-header,
.faq-header,
.rundgang-intro,
.werte,
.brand-trio-header,
.anreise,
.team-section,
section[class*="-intro"],
section[class*="-header"] {
  text-align: center;
}

.intro p, .intro .lead,
.marken p, .marken .lead,
.werte-header p,
.schauraum p, .schauraum-intro p, .schauraum .schauraum-details,
.news-header p,
.process-intro p, .process-intro .lead,
.gallery-header p,
.kontakt-section p, .kontakt-form-header p,
.faq-header p,
.rundgang-intro p, .rundgang-intro .lead,
.brand-trio-header p,
.anreise p,
section[class*="-intro"] p, section[class*="-header"] p,
section[class*="-intro"] .lead, section[class*="-header"] .lead {
  margin-left: auto;
  margin-right: auto;
}

.intro h1, .intro h2, .intro h3,
.marken h1, .marken h2, .marken h3,
.werte-header h1, .werte-header h2,
.schauraum h1, .schauraum h2,
.schauraum-intro h1, .schauraum-intro h2,
.news-header h1, .news-header h2,
.process-intro h1, .process-intro h2,
.gallery-header h1, .gallery-header h2,
.faq-header h1, .faq-header h2,
.rundgang-intro h1, .rundgang-intro h2,
.brand-trio-header h1, .brand-trio-header h2,
.anreise h1, .anreise h2,
section[class*="-intro"] h1, section[class*="-intro"] h2,
section[class*="-header"] h1, section[class*="-header"] h2 {
  margin-left: auto;
  margin-right: auto;
}

.intro a.cta, .marken-cta, .news-cta, .schauraum-cta-wrap,
.schauraum-cta, .rundgang-cta-wrap,
section[class*="-intro"] .cta,
section[class*="-header"] .cta {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
}

.inline-cta {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.inline-cta p, .inline-cta a {
  margin-left: auto;
  margin-right: auto;
}

/* SPLIT-LAYOUTS BLEIBEN LEFT-ALIGNED */
.story-meta, .story-body, .story-meta *, .story-body * { text-align: left; }
.story-meta h2, .story-body p { margin-left: 0; margin-right: 0; }

/* v3.28: Process-Steps sind jetzt zentriert (full-width Foto + Text darunter) */

.rundgang-inner .rundgang-text, .rundgang-inner .rundgang-text * { text-align: left; }
.rundgang-inner .rundgang-text h2, .rundgang-inner .rundgang-text .lead { margin-left: 0; margin-right: 0; }

.anreise-grid .anreise-card, .anreise-grid .anreise-card * { text-align: left; }
.anreise-grid .anreise-card h3, .anreise-grid .anreise-card p { margin-left: 0; margin-right: 0; }

/* Footer: Spaltenlayout, nicht zentrieren */
footer, footer * { text-align: left; }
.footer-brands { text-align: center; }
.footer-brands .eyebrow { margin-left: auto; margin-right: auto; }

/* Schutz: Daten-Grids in zentrierten Sections bleiben LINKS (sonst brechen Adress-/Werte-Spalten) */
.schauraum-meta, .schauraum-meta * { text-align: left; }
.schauraum-meta p, .schauraum-meta a, .meta-block h4 { margin-left: 0; margin-right: 0; }
.werte-grid, .werte-grid * { text-align: left; }
.werte-grid h3, .werte-grid p { margin-left: 0; margin-right: 0; }

/* ============================================
   QUOTE-SECTION KOMPAKTER (override)
   ============================================ */
.quote,
.pull-quote-section,
section[class*="testimonial"],
section[class*="zitat"] {
  padding: clamp(80px, 8vh, 120px) var(--gutter);
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.quote-content {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--yellow);
  opacity: 0.95;
  margin: 0;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 38px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--cream);
  max-width: 30ch;
  margin: 0;
}
.quote-author {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: var(--space-1);
}

/* ============================================
   KLICKBARE LOGOS + MARKEN-ANCHORS + HERSTELLER-LINK
   ============================================ */
.logo-cell, .footer-logo-cell { text-decoration: none; }
#siematic, #haecker, #cor, #anrei, #gaggenau, #miele, #bosch, #quooker { scroll-margin-top: 110px; }
.brand-external-link { margin-top: var(--space-4); }
.brand-external-link a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--teal-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-dark);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.brand-external-link a:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================
   LEGAL PAGES (Impressum / Datenschutz / AGB)
   ============================================ */
.legal-page { background: var(--cream); color: var(--ink); }
.legal-hero {
  padding: calc(var(--section-pad) * 1.2) var(--gutter) 80px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.legal-hero .eyebrow { color: var(--teal-dark); margin-bottom: var(--space-3); }
.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}
.legal-hero .lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}
.legal-content { max-width: var(--content-narrow); margin: 0 auto; padding: 100px var(--gutter); }
.legal-block { padding: var(--space-8) 0; border-bottom: 1px solid var(--line); }
.legal-block:last-child { border-bottom: none; }
.legal-block h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-5);
}
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.legal-block h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: var(--space-2);
}
.legal-block p, .legal-block a {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  text-decoration: none;
}
.legal-block a:hover { color: var(--teal-dark); border-bottom: 1px solid var(--teal-dark); }
.legal-block strong { font-weight: 600; }
.legal-credit { text-align: center; padding-top: var(--space-10); }
.legal-credit h2 {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.legal-credit p { font-family: var(--font-display); font-style: italic; font-size: 19px; }

/* Datenschutz/AGB: bestehender the_content() editorial gestylt */
.legal-richtext h2, .legal-richtext h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  margin: var(--space-6) 0 20px;
}
.legal-richtext h2:first-child, .legal-richtext h3:first-child { margin-top: 0; }
.legal-richtext p, .legal-richtext li {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--space-2);
  max-width: 70ch;
}
.legal-richtext a { color: var(--teal-dark); }
.legal-richtext ul { margin: 0 0 var(--space-2) 1.2em; }

@media (max-width: 700px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .legal-block { padding: var(--space-6) 0; }
}

/* ============================================
   NEWS-ARCHIVE (/aktuelles) - alternating spreads
   ============================================ */
.news-archive { background: var(--cream); }
.news-archive-hero {
  padding: calc(var(--section-pad) * 1.1) var(--gutter) 80px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.news-archive-hero .eyebrow { color: var(--teal-dark); margin-bottom: var(--space-3); }
.news-archive-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}
.news-archive-hero h1 em { font-style: italic; }
.news-archive-hero .lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 auto;
}
.news-archive-list { max-width: var(--content-medium); margin: 0 auto; padding: 100px var(--gutter); }
.news-archive-item {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--line);
}
.news-archive-item:nth-child(even) { grid-template-columns: 1fr 1.2fr; }
.news-archive-item:nth-child(even) .news-img { order: 2; }
.news-archive-item:nth-child(even) .news-text { order: 1; }
.news-archive-item:last-child { border-bottom: none; }
.news-archive-item .news-img { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-soft); }
.news-archive-item .news-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.news-archive-item:hover .news-img img { transform: scale(1.04); }
.news-archive-item .news-date {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: var(--space-2);
  display: block;
}
.news-archive-item h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.news-archive-item h2 a { color: inherit; text-decoration: none; }
.news-archive-item h2 a:hover { color: var(--teal-dark); }
.news-archive-item .news-excerpt {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 28px;
  max-width: 50ch;
}
.news-archive-item .news-readmore {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  letter-spacing: 0.02em;
  display: inline-block;
  transition: color 0.3s, border-color 0.3s;
}
.news-archive-item .news-readmore:hover { color: var(--teal-dark); border-color: var(--teal-dark); }
@media (max-width: 900px) {
  .news-archive-item, .news-archive-item:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-4); }
  .news-archive-item:nth-child(even) .news-img, .news-archive-item:nth-child(even) .news-text { order: initial; }
}

/* Blue default-link fix: default <a> ohne Klasse erbt Textfarbe */
a:not([class]) { color: inherit; }
article h1 a, article h2 a, article h3 a, .news-archive-item a { color: inherit; }

/* ============================================
   NEWS-DETAIL: Intro · External-Link · Pull-Quote
   ============================================ */
.news-intro {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--teal-dark);
  border-left: 2px solid var(--yellow);
  padding-left: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}
.news-external-link {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  margin: var(--space-4) 0;
  transition: color 0.3s, border-color 0.3s;
}
.news-external-link:hover { color: var(--teal-dark); border-color: var(--teal-dark); }
article .pull-quote {
  margin: 60px 0;
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  max-width: 28ch;
}
article .pull-quote cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

/* ============================================
   FIX2, ARTICLE-BODY WIDTH (News-Detail breiter, Pull-Quotes brechen aus)
   ============================================ */
article.news-detail .single-content,
.single-content {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.single-content > p {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.7;
  margin-bottom: var(--space-4);
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
.single-content h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.2;
  margin: var(--space-12) auto var(--space-4);
  max-width: 28ch;
}
.single-content h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  font-style: italic;
  margin: var(--space-10) auto var(--space-3);
  color: var(--teal-dark);
  max-width: 32ch;
}
/* Pull-Quote bricht aus der Lesespalte (breiter als 70ch Body) */
.single-content .pull-quote {
  max-width: 760px;
  margin: var(--space-12) auto;
  padding: 0 0 0 var(--space-4);
  border-left: 3px solid var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.single-content .pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.single-content .news-intro {
  max-width: 760px;
  margin: var(--space-4) auto var(--space-6);
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  line-height: 1.5;
  color: var(--teal-dark);
  border-left: 2px solid var(--yellow);
  padding: 0 0 0 var(--space-4);
}
.single-content .news-external-link {
  display: block;
  text-align: center;
  margin: var(--space-6) auto;
  max-width: max-content;
}

/* ============================================
   v3.19 TYPE-SCALE BUMP, Body etwas größer (Lesbarkeit)
   Eyebrows / Dates / Captions (13-15px) bleiben bewusst klein.
   ============================================ */
html { font-size: 100%; }   /* respektiert User-Browser-Einstellung */
body { font-size: 22px; }
p { font-size: 22px; line-height: 1.6; }
.lead { font-size: 26px; line-height: 1.5; }
.hero-sub { font-size: 23px; }
.step-body, .news-excerpt, .anreise-card p { font-size: 20px; line-height: 1.6; }
.footer-col p, .footer-col a { font-size: 20px; }
article.news-detail .single-content > p, .single-content > p { font-size: 23px; line-height: 1.7; }

/* ============================================
   v3.20 CONTENT-CONTAINER STANDARDS (scoped, kein pauschales article{})
   Text-Content zentriert mit Whitespace rundherum, nicht links-gepresst.
   ============================================ */
/* Narrow: Text-heavy (Legal, Article) */
.content-narrow,
.legal-content,
.single-content,
article.news-detail .single-content {
  max-width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.content-narrow p,
.legal-content p,
.single-content > p {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
/* Headings in narrow text-content zentriert (NICHT news-archive-item!) */
.content-narrow h2, .content-narrow h3,
.legal-richtext h2, .legal-richtext h3,
.single-content h2, .single-content h3 {
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Medium: Listings */
.content-medium,
.news-archive-list,
.faq-list {
  max-width: var(--content-medium);
  margin-left: auto;
  margin-right: auto;
}
/* Full-bleed Utility */
.fullbleed { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }

/* ============================================
   v3.21, Redaktionelle Pages (page.php: article.section.container):
   farbige Inline-Sections aus dem 1280px-Container ausbrechen -> full-bleed
   (Background edge-to-edge, Content innen via eigenem max-width zentriert).
   body{overflow-x:hidden} verhindert Scroll durch 100vw.
   ============================================ */
.entry-content > section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ============================================
   v3.22, UNIVERSELLE SUB-PAGE-STRUKTUR
   page-hero · content-section · section-header · content-body ·
   einheitlich editorial-zentriert wie die Frontpage. Wird von
   page-ueber-uns.php (und ggf. weiteren Sub-Pages) genutzt.
   ============================================ */

/* PAGE-HERO (oben auf Sub-Pages) */
.page-hero {
  padding: calc(var(--section-pad-lg) * 1.05) var(--gutter) var(--space-12);
  background: var(--cream);
  text-align: center;
}
.page-hero-inner { max-width: 1000px; margin: 0 auto; }
.page-hero .eyebrow {
  display: block;
  font-size: 15px;
  letter-spacing: 0.22em;
  margin-bottom: var(--space-3);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 88px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 20ch;
}
.page-hero h1 em { font-style: italic; }
.page-hero .lead {
  max-width: 46ch;
  margin: var(--space-5) auto 0;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* CONTENT-SECTION (Header + Body) */
.content-section { padding: var(--section-pad-md) var(--gutter); }
.content-section + .content-section { padding-top: 0; }

.section-header {
  max-width: 900px;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.section-header .eyebrow {
  display: block;
  font-size: 15px;
  letter-spacing: 0.22em;
  margin-bottom: var(--space-3);
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
  max-width: 26ch;
  margin: 0 auto;
}
.section-header h2 em { font-style: italic; }

.content-body { max-width: var(--content-narrow); margin: 0 auto; }
.content-body p {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 auto var(--space-5);
  max-width: 70ch;
}
.content-body p:last-child { margin-bottom: 0; }
.content-body a {
  color: var(--teal-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-dark);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.content-body a:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================
   v3.51 ÜBER-UNS EDITORIAL, gegen "Powerpoint/E-Reader"-Gefühl.
   Mehr Atemluft + Drop-Cap + betonter Lead-Absatz + Stat-Break im Fließtext.
   Scoped auf .ueber-uns-page, damit andere content-sections unberührt bleiben.
   ============================================ */
.ueber-uns-page .content-body p { line-height: 1.75; letter-spacing: 0.005em; }
.ueber-uns-page .content-body p:first-of-type { font-size: 24px; font-weight: 500; }
/* Drop-Cap nur im ersten Story-Absatz (Section mit .has-dropcap) */
.ueber-uns-page .has-dropcap .content-body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 4.4em;
  float: left;
  line-height: 0.74;
  margin: 0.06em 0.12em 0 0;
  color: var(--teal-dark);
}
/* Stat-Break: großer Zahl-Akzent als visueller Trenner zwischen Absätzen */
.ueber-uns-page .text-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  max-width: var(--content-narrow);
  margin: var(--space-7) auto;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ueber-uns-page .text-stat .stat-big {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(64px, 9vw, 96px);
  line-height: 0.85;
  color: var(--teal-dark);
  flex-shrink: 0;
}
.ueber-uns-page .text-stat .stat-text {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .ueber-uns-page .content-body p:first-of-type { font-size: 21px; }
  .ueber-uns-page .has-dropcap .content-body p:first-of-type::first-letter { font-size: 3.4em; }
  .ueber-uns-page .text-stat { gap: var(--space-3); padding: var(--space-5) 0; margin: var(--space-6) auto; }
  .ueber-uns-page .text-stat .stat-big { font-size: 56px; }
}

/* PULL-QUOTE in Content-Sections */
.content-section .pull-quote {
  max-width: 860px;
  margin: var(--space-12) auto 0;
  padding: 0 0 0 var(--space-5);
  border-left: 3px solid var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.content-section .pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

/* FAQ in Content-Section zentriert (Items links = Standard-Akkordeon) */
.content-section .faq-list { max-width: var(--content-narrow); margin: 0 auto; }

/* STATS-BAND (Zahlen-Reihe) */
.ueber-stats { padding: var(--section-pad-sm) var(--gutter); background: var(--cream-soft); }
.ueber-stats-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  text-align: center;
}
.ueber-stats .stat-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.6vw, 64px);
  font-weight: 400; color: var(--teal-dark);
  line-height: 1; margin: 0 0 var(--space-2);
}
.ueber-stats .stat-label {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.55; color: var(--ink-soft);
  max-width: 28ch; margin: 0 auto;
}

/* DARK QUOTE-BAND */
.quote-band {
  padding: var(--section-pad-md) var(--gutter);
  background: var(--ink); color: var(--cream); text-align: center;
}
.quote-band-inner { max-width: 900px; margin: 0 auto; }
.quote-band .quote-mark {
  font-family: var(--font-display);
  font-size: 64px; line-height: 1; color: var(--yellow); margin: 0 0 var(--space-2);
}
.quote-band blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400; line-height: 1.32; margin: 0 0 var(--space-3);
}
.quote-band cite {
  display: block; font-style: normal;
  font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
}
/* v3.54: Subtiler WebGL-Shader in der Über-uns-Quote (wie Frontpage-Quote).
   Scoped via .ueber-uns-quote, damit die geteilte .quote-band (z.B. Marken)
   unberührt bleibt. Canvas hinter dem Text, Text klar lesbar (z-index 2). */
.quote-band.ueber-uns-quote { position: relative; overflow: hidden; }
.quote-band.ueber-uns-quote > .quote-band-inner { position: relative; z-index: 2; }
#ueber-uns-quote-shader { position: absolute; inset: 0; z-index: 1; opacity: 0.55; }

/* TEAM-GRID + CARDS */
.team-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6);
}
.team-card { background: #fff; }
.team-card .team-photo { width: 100%; height: 460px; object-fit: cover; object-position: center top; display: block; }
.team-card .team-info { padding: var(--space-5); }
.team-card .team-name { font-family: var(--font-display); font-size: 26px; line-height: 1.15; margin: 0 0 var(--space-1); }
.team-card .team-role {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-dark); margin: 0 0 var(--space-3);
}
.team-card .team-bio { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* QUICKFACTS-BAND (dunkel, dl) */
.facts-band { padding: var(--section-pad-md) var(--gutter); background: var(--ink); color: var(--cream); }
.facts-band-inner { max-width: 1000px; margin: 0 auto; }
.facts-band .eyebrow { color: var(--teal); display: block; margin-bottom: var(--space-8); }
.facts-band dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-8); margin: 0; }
.facts-band dt {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 var(--space-1);
}
.facts-band dd { margin: 0; font-family: var(--font-body); font-size: 19px; line-height: 1.55; }

@media (max-width: 800px) {
  .ueber-stats-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .team-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .facts-band dl { grid-template-columns: 1fr; }
}

/* ============================================
   v3.23, TERMIN (page-termin.php)
   page-hero + CTA-Buttons · Kontakt-Grid · Map ·
   Anfrage-Formular · FAQ · Anreise · Foto. Editorial-zentriert.
   ============================================ */

/* HERO-CTA-BUTTONS (auch generisch nutzbar) */
.hero-cta-row {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2); margin-top: var(--space-8);
}
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 18px 36px; text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: var(--teal-dark); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: #e8bf3f; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

/* KONTAKT-INFO-GRID */
.kontakt-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
}
.kontakt-col .eyebrow { display: block; margin-bottom: var(--space-3); font-size: 15px; }
.kontakt-col .kontakt-lines {
  font-family: var(--font-display); font-size: 23px; line-height: 1.45;
  color: var(--ink); margin: 0 0 var(--space-2);
}
.kontakt-col .kontakt-note { font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); margin: 0; }
.kontakt-col a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--yellow); }
.kontakt-col a:hover { border-color: var(--ink); }

/* GOOGLE-MAP (full-bleed) */
.kontakt-map { width: 100vw; margin-left: calc(50% - 50vw); height: 480px; background: var(--cream-soft); }
.kontakt-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ANFRAGE-FORMULAR */
.termin-form-wrapper { max-width: 720px; margin: 0 auto; }
.termin-form { display: grid; gap: var(--space-3); background: #fff; padding: var(--space-6); }
.termin-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.termin-form label { display: block; }
.termin-form label > span {
  display: block; font-family: var(--font-display); font-style: italic;
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal-dark); margin-bottom: var(--space-1);
}
.termin-form input, .termin-form select, .termin-form textarea {
  width: 100%; padding: 14px; border: 1px solid var(--line);
  font-size: 16px; font-family: var(--font-body); background: var(--cream); color: var(--ink);
}
.termin-form input:hover, .termin-form select:hover, .termin-form textarea:hover {
  border-color: var(--yellow);
}
.termin-form input:focus, .termin-form select:focus, .termin-form textarea:focus {
  border-color: var(--teal-dark);
}
/* WCAG: sichtbarer Fokus-Ring (focus-visible), nicht nur Border-Wechsel. */
.termin-form input:focus-visible, .termin-form select:focus-visible, .termin-form textarea:focus-visible {
  outline: 2px solid var(--teal-dark); outline-offset: 2px; border-color: var(--teal-dark);
}
.termin-form .form-consent { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); margin: 0; }
.termin-form .form-consent a { color: var(--ink); }
.termin-form button { justify-self: center; border: none; cursor: pointer; margin-top: var(--space-2); min-height: 44px; }

/* Honeypot: visuell und fuer Screenreader versteckt, bleibt aber befuellbar. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Statusmeldung nach Formular-Submit (Erfolg / Fehler). */
.form-status { max-width: 720px; margin: 0 auto var(--space-5); padding: 18px 22px; border-left: 4px solid; font-family: var(--font-body); }
.form-status p { margin: 0; font-size: 16px; line-height: 1.6; }
.form-status--ok { background: #eef5f3; border-color: var(--teal-dark); color: var(--ink); }
.form-status--error { background: #fbf1e6; border-color: #b4541f; color: var(--ink); }
.form-status--error a { color: #b4541f; font-weight: 600; }

@media (max-width: 800px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .termin-form .form-row { grid-template-columns: 1fr; }
}

/* ============================================
   v3.24, MARKEN (page-marken.php)
   page-hero · Kategorie-Bänder · zentrierte Brand-Blocks · Trio (dark) ·
   COR-Modelle · Service-Steps · Quote-Band · FAQ · Yellow-CTA · Facts.
   Anchor-IDs (#siematic..#quooker, #geraete) bleiben für Frontpage-Logo-Links.
   ============================================ */

.page-hero .heritage-stamp { display: block; height: 84px; width: auto; margin: 0 auto var(--space-5); }

/* KATEGORIE-NAV (zentriert, nicht sticky, kein Konflikt mit fixed Header) */
.marken-nav {
  background: var(--ink); color: var(--cream);
  padding: var(--space-3) var(--gutter);
}
.marken-nav-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center;
}
.marken-nav a {
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color 0.3s;
}
.marken-nav a:hover { border-color: var(--yellow); }

/* KATEGORIE-BAND */
.cat-band { padding: var(--section-pad-md) var(--gutter) var(--space-6); text-align: center; }
.cat-band-inner { max-width: 760px; margin: 0 auto; }
.cat-band .eyebrow { display: block; font-size: 15px; margin-bottom: var(--space-3); }
.cat-band h2 {
  font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 var(--space-4);
}
.cat-band h2 em { font-style: italic; }
.cat-band p { font-family: var(--font-body); font-size: 22px; line-height: 1.65; color: var(--ink-soft); margin: 0 auto; max-width: 60ch; }
.cat-band--dark { background: var(--ink); color: var(--cream); }
.cat-band--dark p { color: #B8B5AE; }
.cat-band--dark .eyebrow { color: var(--teal); }

/* BRAND-BLOCK (zentriert editorial) */
.brand-block { padding: var(--space-12) var(--gutter); }
.brand-block-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.brand-block .brand-logo { display: block; height: 46px; width: auto; margin: 0 auto var(--space-4); object-fit: contain; }
.brand-block .eyebrow { display: block; font-size: 15px; margin-bottom: var(--space-3); }
.brand-block .brand-subhead {
  font-family: var(--font-display); font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 500; line-height: 1.14; letter-spacing: -0.015em;
  margin: 0 auto var(--space-5); max-width: 22ch;
}
.brand-block .brand-subhead em { font-style: italic; }
.brand-block .brand-body { font-family: var(--font-body); font-size: 22px; line-height: 1.7; color: var(--ink); margin: 0 auto; max-width: 62ch; }
.brand-block .brand-body p { margin: 0 0 var(--space-4); }
.brand-block .brand-body p:last-child { margin-bottom: 0; }
.brand-block .brand-external-link { margin-top: var(--space-5); }
.brand-block .brand-cta { margin-top: var(--space-6); }

/* v3.77.0: SieMatic Modell-Pills (.brand-chips) entfernt. Spacing nach Lead scoped, andere Brand-Blocks unberuehrt. */
#siematic .brand-external-link { margin-top: clamp(32px, 3vw, 48px); }
#siematic .brand-cta { margin-top: clamp(32px, 3vw, 48px); }

/* BRAND-GALLERY (4 Bilder) */
.brand-gallery { max-width: var(--container); margin: var(--space-8) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.brand-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* BRAND-IMAGE (einzelnes Detailbild) */
.brand-image { max-width: var(--container); margin: var(--space-8) auto 0; }
.brand-image img { width: 100%; height: auto; display: block; max-height: 560px; object-fit: cover; }

/* DARK BRAND-BLOCK (Anrei) */
.brand-block--dark { background: var(--ink); color: var(--cream); }
.brand-block--dark .brand-subhead { color: var(--cream); }
.brand-block--dark .brand-body { color: #D8D4CC; }
.brand-block--dark .eyebrow { color: var(--yellow); }
.brand-block--dark .brand-external-link a,
.cat-band--dark .brand-external-link a { color: var(--teal); border-color: var(--teal); }

/* QUOOKER-STAT */
.quooker-stat { font-family: var(--font-display); font-size: clamp(96px, 12vw, 150px); line-height: 0.95; font-weight: 400; color: var(--teal-dark); margin: var(--space-4) auto var(--space-2); }
.quooker-stat-label { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.4; color: var(--ink); margin: 0 auto var(--space-5); max-width: 24ch; }

/* COR-MODELLE */
.cor-models { max-width: var(--container); margin: var(--space-10) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.model-card { background: #fff; padding: var(--space-6); text-align: left; }
.model-card .eyebrow { display: block; margin-bottom: var(--space-2); }
.model-card .model-name { font-family: var(--font-display); font-size: 34px; font-weight: 500; margin: 0 0 var(--space-3); }
.model-card .model-text { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.model-card .model-quote {
  border-left: 3px solid var(--yellow); padding-left: var(--space-4); margin: var(--space-4) 0 0;
  font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink);
}
.model-card .model-quote cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); }

/* SERVICE-STEPS */
.service-steps { padding: var(--section-pad-md) var(--gutter); background: var(--cream-soft); text-align: center; }
.service-steps-inner { max-width: 1100px; margin: 0 auto; }
.service-steps .section-header { margin-bottom: var(--space-12); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: left; }
.service-step .step-num { font-family: var(--font-display); font-size: 36px; color: var(--teal-dark); margin: 0 0 var(--space-2); }
.service-step .step-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 0 0 var(--space-1); }
.service-step .step-desc { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ============================================
   v3.51 VALUE-CARDS, wiederverwendbares Card-Grid (ersetzt flache
   Aufzählungen: Marken Service-Steps + facts-band, Über-uns facts-band).
   Hell = default. .value-cards--dark = helle Akzent-Cards auf Ink-Band.
   ============================================ */
.value-cards-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  text-align: left;
}
.value-cards-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.value-card {
  padding: var(--space-7) var(--space-5);
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.4s, transform 0.4s;
}
@media (hover: hover) and (pointer: fine) {
  .value-card:hover { border-left-color: var(--teal-dark); transform: translateY(-3px); }
}
.value-card-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.value-card p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
/* Dunkle Variante: helle Akzent-Cards mit subtiler Erhebung auf dem Ink-Band
   (behält den dunklen Section-Rhythmus, gibt aber Card-Struktur). */
.value-cards--dark .value-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--yellow);   /* gelben Akzent auf Dunkel erhalten */
}
.value-cards--dark .value-card h3 { color: var(--cream); }
.value-cards--dark .value-card p { color: rgba(250,247,242,0.72); }
.value-cards--dark .value-card-num { color: var(--teal); }
@media (max-width: 700px) {
  .value-cards-grid, .value-cards-grid.grid-3 { grid-template-columns: 1fr; gap: var(--space-3); }
  .value-card { padding: var(--space-5) var(--space-4); }
}

/* ============================================
   v3.57 SCHAURAUM EDITORIAL POLISH, Drop-Cap, Stat-Block, Pull-Quote,
   Anreise-Cards, verfeinerte Lead-Typo. Generische Stat-Klassen unter
   .schauraum-stats gescoped (sonst Kollision mit ueber-uns .text-stat).
   ============================================ */

/* FIX 5, Lead-Typo. BEWUSST nicht blanket .schauraum-intro p: das träfe auch
   die Adress-/Öffnungszeiten-Absätze im Meta-Block (würde 18px -> 21px blähen). */
.schauraum-intro .lead { font-size: 24px; line-height: 1.55; font-weight: 500; color: var(--ink); }
@media (max-width: 700px) { .schauraum-intro .lead { font-size: 21px; } }

/* FIX 1, Drop-Cap BEWUSST NICHT umgesetzt: der Schauraum-Intro-Lead ist
   (anders als die linksbündige Über-uns-Story) zentriert; ein float:left-
   Initial sieht dort gebrochen aus (großer Buchstabe links, Resttext als
   schmale zentrierte Spalte daneben). Editorial-Wirkung kommt hier stattdessen
   aus Stat-Block + Pull-Quote + Anreise-Cards. */

/* FIX 2, Stat-Block (eigene Section nach dem Intro) */
.schauraum-stats { padding: var(--space-12) var(--gutter) var(--space-10); max-width: 1100px; margin: 0 auto; }
.schauraum-stats-inner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-8) 0; }
.schauraum-stats .text-stat-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-6); align-items: center; }
.schauraum-stats .text-stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.schauraum-stats .stat-big { font-family: var(--font-display); font-size: clamp(56px, 7vw, 96px); font-weight: 500; line-height: 1; letter-spacing: -0.025em; color: var(--ink); }
.schauraum-stats .stat-unit { font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--teal-dark); margin-top: var(--space-1); }
.schauraum-stats .stat-text { font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: 0.05em; color: var(--ink-soft); margin-top: var(--space-3); max-width: 22ch; }
.schauraum-stats .stat-divider { width: 1px; height: 80px; background: var(--line); justify-self: center; }
@media (max-width: 700px) {
  .schauraum-stats .text-stat-row { grid-template-columns: 1fr; gap: var(--space-6); }
  .schauraum-stats .stat-divider { width: 60px; height: 1px; margin: 0 auto; }
  .schauraum-stats .stat-big { font-size: 52px; }
}

/* FIX 3, Pull-Quote zwischen Anreise und Rundgang */
.schauraum-pullquote { padding: var(--space-12) var(--gutter); background: var(--cream); }
.pullquote-inner { max-width: 880px; margin: 0 auto; text-align: center; position: relative; }
.pullquote-inner::before { content: '\201C'; display: block; font-family: var(--font-display); font-size: 96px; line-height: 0.5; color: var(--yellow); opacity: 0.7; margin-bottom: var(--space-4); }
.pullquote-inner blockquote { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); font-style: italic; font-weight: 400; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); margin: 0 auto var(--space-5); max-width: 32ch; }
/* Gelbe Highlighter-Unterlegung, die beim Scrollen (.reveal.in) einwächst.
   background-size statt ::after+z-index:-1, mehrzeilensicher (box-decoration-
   break:clone) und kein Verschwinden hinter dem Section-Hintergrund. */
.pullquote-inner blockquote em {
  font-style: italic;
  background-image: linear-gradient(rgba(244,206,90,0.45), rgba(244,206,90,0.45));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.2em;
  transition: background-size 1s cubic-bezier(0.22,1,0.36,1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.reveal.in .pullquote-inner blockquote em { background-size: 100% 0.2em; }
.pullquote-inner cite { font-family: var(--font-display); font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-dark); }

/* FIX 4, Anreise-Cards: Card-Chrome + italic Nummer-Label (nth-child, kein
   HTML-Eingriff). Höhere Spezifität (.anreise-grid ...) übersteuert die
   bestehenden .anreise-card-Regeln zuverlässig. */
.anreise-grid .anreise-card { position: relative; padding: var(--space-8) var(--space-6) var(--space-7); background: var(--cream); overflow: hidden; box-shadow: 0 1px 0 rgba(14,14,16,0.04), 0 12px 32px rgba(14,14,16,0.04); transition: transform 0.5s, box-shadow 0.5s; }
@media (hover: hover) and (pointer: fine) {
  .anreise-grid .anreise-card:hover { transform: translateY(-4px); box-shadow: 0 2px 0 rgba(14,14,16,0.06), 0 20px 40px rgba(14,14,16,0.08); }
}
.anreise-grid .anreise-card::before { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--teal-dark); display: block; margin-bottom: var(--space-3); }
.anreise-grid .anreise-card:nth-child(1)::before { content: '01'; }
.anreise-grid .anreise-card:nth-child(2)::before { content: '02'; }
.anreise-grid .anreise-card:nth-child(3)::before { content: '03'; }
.anreise-grid .anreise-card h3 { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--ink); margin-bottom: var(--space-4); }
.anreise-grid .anreise-card p { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink); }

/* YELLOW-CTA (full-bleed; im dedizierten Template sind Sections ohnehin
   container-frei = volle Breite, hier nur Hintergrund + zentrierter Inhalt) */
.marken-cta-yellow { padding: var(--section-pad-lg) var(--gutter); background: var(--yellow); color: var(--ink); text-align: center; }
.marken-cta-yellow-inner { max-width: 780px; margin: 0 auto; }
.marken-cta-yellow h2 { font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 60px); font-weight: 500; line-height: 1.1; margin: 0 0 var(--space-4); }
.marken-cta-yellow h2 em { font-style: italic; }
.marken-cta-yellow p { font-family: var(--font-body); font-size: 22px; line-height: 1.6; margin: 0 auto var(--space-8); max-width: 52ch; }

@media (max-width: 900px) {
  .brand-gallery { grid-template-columns: repeat(2, 1fr); }
  .cor-models { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ============================================
   v3.26, PHOTO-GRIDS (wiederverwendbare Utilities)
   Uniforme Aspect-Ratios + object-fit:cover statt editorial spans.
   .photo-grid-3 (4/3, default) · .photo-grid-4 (1/1) · .photo-grid-feature.
   HTML: <div class="photo-grid-3"><div class="photo-item"><img></div>…</div>
   ============================================ */
.photo-grid-3, .photo-grid-4 { max-width: var(--container); margin: 0 auto; display: grid; gap: var(--space-3); }
.photo-grid-3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid-4 { grid-template-columns: repeat(4, 1fr); }
.photo-grid-3 .photo-item, .photo-grid-4 .photo-item { overflow: hidden; background: var(--cream-soft); }
.photo-grid-3 .photo-item { aspect-ratio: 4/3; }
.photo-grid-4 .photo-item { aspect-ratio: 1/1; }
.photo-grid-3 .photo-item img, .photo-grid-4 .photo-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.photo-grid-3 .photo-item:hover img, .photo-grid-4 .photo-item:hover img { transform: scale(1.04); }

.photo-grid-feature {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: var(--space-3); aspect-ratio: 2/1;
}
.photo-grid-feature .photo-feature { grid-row: span 2; overflow: hidden; background: var(--cream-soft); }
.photo-grid-feature .photo-item { overflow: hidden; background: var(--cream-soft); }
.photo-grid-feature img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.photo-grid-feature .photo-feature:hover img, .photo-grid-feature .photo-item:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .photo-grid-3 { grid-template-columns: 1fr; }
  .photo-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .photo-grid-feature { grid-template-columns: 1fr; aspect-ratio: auto; }
  .photo-grid-feature .photo-feature { grid-row: 1; aspect-ratio: 4/3; }
  .photo-grid-feature .photo-item { aspect-ratio: 4/3; }
}
@media (max-width: 500px) {
  .photo-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================
   v3.31 HEADLINE EFFECTS, Yellow-Underline · Word-Reveal ·
   Brand-Stripe · Weight-Variation.
   OPT-IN per Klasse, damit nicht jede Headline alles bekommt
   (keine Effekt-Inflation / kein Disco). Faustregel:
   H1 voll · H2 Underline(+Reveal) · H3 nur Underline · H4 nur italic.
   ============================================ */

/* --- EFFEKT 1: Yellow-Underline auf akzentuierte italic-Wörter ---
   Wird beim Scrollen ins View "gemalt" (.reveal.in). */
h1 em.word-accent, h2 em.word-accent, h3 em.word-accent,
.heading-accent em, em.highlight {
  font-style: italic;
  position: relative;
  /* inline (nicht inline-block): sonst entsteht eine Umbruch-Chance vor
     der nachfolgenden Satz-Punktuation -> verwaister Punkt am Zeilenanfang */
  display: inline;
}
h1 em.word-accent::after, h2 em.word-accent::after, h3 em.word-accent::after,
.heading-accent em::after, em.highlight::after {
  content: '';
  position: absolute;
  bottom: 0.12em;
  left: 0;
  right: 0;
  height: 0.18em;
  background: var(--yellow);
  opacity: 0.4;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in h1 em.word-accent::after,
.reveal.in h2 em.word-accent::after,
.reveal.in h3 em.word-accent::after,
.reveal.in .heading-accent em::after,
.reveal.in em.highlight::after {
  transform: scaleX(1);
}
/* Hero / Page-Hero haben kein .reveal, Underline animiert beim Laden
   (Hero: Yellow auf Dunkel = brand-ok; Page-Hero: Yellow auf Cream, dezent) */
.hero h1 em.word-accent::after { animation: drawUnderline 1.1s 1.5s forwards; }
.page-hero h1 em.word-accent::after { animation: drawUnderline 1.1s 0.6s forwards; }

/* --- EFFEKT 2: Word-by-Word Reveal ---
   JS wrappt Wörter in span.word und setzt .words-split. Ohne JS bleibt
   die Headline sichtbar (Guard verhindert FOUC / verschwundene Headline). */
.words-split .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.words-split .word.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* --- EFFEKT 3: dezenter Yellow-Brand-Strich über Section-Headern --- */
.section-header::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--yellow);
  margin: 0 auto var(--space-4);
}

/* --- EFFEKT 4: Weight-Variation / Size-Contrast (.headline-display) ---
   Substantive dünn+grau (.thin), Verben/Akzente stark+italic.
   Moderater Clamp als spec'd 128px: bei voller Hero-Größe erschlägt es
   eine Mid-Page-Section (Marken). Hochdrehen jederzeit möglich. */
h1.headline-display, h2.headline-display {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.headline-display em { font-style: italic; font-weight: 500; }
.headline-display .thin { font-weight: 300; color: var(--ink-soft); }

/* --- REDUCED MOTION: alle Headline-Effekte statisch sichtbar --- */
@media (prefers-reduced-motion: reduce) {
  h1 em.word-accent::after, h2 em.word-accent::after, h3 em.word-accent::after,
  .heading-accent em::after, em.highlight::after,
  .hero h1 em.word-accent::after {
    transform: scaleX(1); transition: none; animation: none;
  }
  .words-split .word { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================
   v3.33 PAGE-CTA, Statement-CTA statt "Lust auf ein Gespräch".
   Kollabiert mit der vorherigen Section (kein Riesen-Leerraum).
   ============================================ */
.page-cta {
  max-width: 700px;
  margin: 0 auto;
  /* FIX 2: kein Top-Padding/Margin -> kein addierter Leerraum vor dem CTA */
  padding: 0 var(--gutter) var(--section-pad-md);
  text-align: center;
  position: relative;
}
/* Yellow Brand-Stripe oben, gibt Atem ohne den alten Riesen-Leerraum */
.page-cta::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--yellow);
  margin: var(--space-12) auto var(--space-6);
}
/* Letzte Section/Block vor dem CTA: Bottom-Padding kollabieren,
   damit nur der ::before-Stripe (space-12) Atem gibt, kein addierter Leerraum.
   Deckt die real vorkommenden Vorgänger-Sections aller CTA-Pages ab. */
.content-section:has(+ .page-cta),
.schauraum-gallery:has(+ .page-cta),
.rundgang-embed:has(+ .page-cta),
.single-content:has(+ .page-cta) { padding-bottom: 0; }

.cta-statement {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 auto var(--space-4);
  max-width: 22ch;
}
.cta-statement em {
  font-style: italic;
  position: relative;
  display: inline;
}
.cta-statement em::after {
  content: '';
  position: absolute;
  bottom: 0.12em;
  left: 0;
  right: 0;
  height: 0.18em;
  background: var(--yellow);
  opacity: 0.45;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in .cta-statement em::after { transform: scaleX(1); }

.cta-line {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 auto var(--space-8);
  max-width: 50ch;
}
.cta-button {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.cta-button:hover {
  background: transparent;
  color: var(--ink);
  transform: translateY(-2px);
}
.cta-button::after { content: ' →'; display: inline; }

@media (prefers-reduced-motion: reduce) {
  .cta-statement em::after { transform: scaleX(1); transition: none; }
  .cta-button:hover { transform: none; }
}

/* ============================================
   v3.34 MARKEN HYBRID-LAYOUT, Category-Header + Brand-Cards
   Featured Spreads (SieMatic/Häcker) bleiben; Rest als Cards.
   ============================================ */
.marken-category-header {
  max-width: 900px;
  margin: 0 auto;                                          /* v3.35: kein Bottom-Margin mehr */
  text-align: center;
  padding: var(--space-12) var(--gutter) var(--space-4);   /* v3.35: Top 16->12, Bottom 6->4 */
}
.marken-category-header::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--yellow);
  margin: 0 auto var(--space-3);                           /* v3.35: 5->3 */
}
.category-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal-dark);
  display: block;
  margin-bottom: var(--space-2);                           /* v3.35: 3->2 */
}
.marken-category-header h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 auto var(--space-3);                           /* v3.35: 4->3 */
  max-width: 22ch;
}
.marken-category-header h2 em {
  font-style: italic;
  position: relative;
  display: inline;
}
.marken-category-header h2 em::after {
  content: '';
  position: absolute;
  bottom: 0.12em;
  left: 0;
  right: 0;
  height: 0.18em;
  background: var(--yellow);
  opacity: 0.45;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in .marken-category-header h2 em::after { transform: scaleX(1); }
.category-lead {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

/* Card-Grids */
.brand-cards-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-5);
  padding: 0 var(--gutter);
}
.grid-2col { grid-template-columns: repeat(2, 1fr); }
.grid-4col { grid-template-columns: repeat(4, 1fr); }

.brand-card {
  padding: var(--space-10) var(--space-8);
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: border-color 0.4s, transform 0.4s, background 0.4s;
  scroll-margin-top: 100px;   /* Anchor-Sprünge nicht unter sticky-Nav */
}
@media (hover: hover) and (pointer: fine) {
  .brand-card:hover { border-color: var(--teal-dark); transform: translateY(-2px); }
}
.brand-card-logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.brand-card-logo img {
  max-height: 100%;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}
.brand-card-body p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 50ch;
}
.brand-card-link { margin-top: auto; }
.brand-card-link a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--teal-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-dark);
  padding-bottom: 2px;
}
.brand-card-link a:hover { color: var(--ink); border-color: var(--ink); }

/* Compact-Variante (Geräte-Slider), v3.41 Editorial Premium-Card:
   refined kleine Logos, Teal-Border links, subtiler Teal-Schatten, Hover->Yellow. */
.brand-card-compact {
  height: 300px;
  padding: 32px 32px 24px;
  background: var(--cream);
  border: none;
  border-left: 3px solid var(--teal-dark);     /* Teal-Akzent als Brand-Element */
  box-shadow: 0 1px 0 rgba(14,14,16,0.04), 0 12px 32px rgba(123,188,181,0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-card-compact::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(123,188,181,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .brand-card-compact:hover {
    transform: translateY(-4px);
    border-left-color: var(--yellow);
    box-shadow: 0 2px 0 rgba(14,14,16,0.06), 0 24px 48px rgba(123,188,181,0.16);
  }
  .brand-card-compact:hover .brand-card-link a { color: var(--ink); gap: 14px; }
  .brand-card-compact:hover .brand-card-link a::after { transform: translateX(4px); }
}
.brand-card-compact > * { position: relative; z-index: 1; }

/* Logo refined, klein (max 32px hoch / 120px breit), links */
.brand-card-compact .brand-card-logo {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}
.brand-card-compact .brand-card-logo img {
  max-height: 100%;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0.85) contrast(1.05);
}
.brand-card-compact .brand-card-logo::after { content: none !important; }  /* alter Yellow-Stripe raus */

/* Brand-Eyebrow über dem Body */
.brand-card-compact .brand-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 8px 0 4px;
  display: block;
}

/* Body */
.brand-card-compact .brand-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.brand-card-compact .brand-card-body p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

/* Link premium, uppercase italic teal, animierter Pfeil */
.brand-card-compact .brand-card-link {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(14,14,16,0.08);
}
.brand-card-compact .brand-card-link a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--teal-dark);
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s, color 0.3s;
}
.brand-card-compact .brand-card-link a::after {
  content: '→';
  font-style: normal;
  font-size: 16px;
  transition: transform 0.3s;
}

@media (max-width: 1024px) {
  .grid-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-2col, .grid-4col { grid-template-columns: 1fr; }
}

/* ============================================
   v3.35 GERÄTE-SLIDER (Auto-Marquee) + MARKEN SPACING-TRIM
   ============================================ */
/* Featured-Blocks/Grids/Slider direkt nach Category-Header ohne Riesen-Margin */
.brand-block,
.brand-cards-grid,
.marken-slider { margin-top: var(--space-8); }

/* Section-zu-Section-Übergänge auf der Marken-Page tighten */
.marken-page .brand-block + .marken-category-header,
.marken-page .brand-cards-grid + .marken-category-header,
.marken-page .brand-cards-wohnen + .brand-cards-geraete .marken-category-header,
.marken-page .marken-slider + .marken-category-header { padding-top: var(--space-8); }

/* Page-CTA am Ende der Marken-Page kompakter */
.marken-page .page-cta { padding-top: var(--space-8); margin-top: 0; }

/* SLIDER */
.marken-slider {
  width: 100%;
  overflow: hidden;
  padding: var(--space-6) 0;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
}
.marken-slider-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: slideRTL 45s linear infinite;
  will-change: transform;
}
.marken-slider:hover .marken-slider-track { animation-play-state: paused; }
.marken-slider .brand-card { flex: 0 0 340px; min-width: 340px; }

@keyframes slideRTL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - var(--space-2))); }
}

@media (max-width: 700px) {
  .marken-slider .brand-card { flex: 0 0 290px; min-width: 290px; }
  .marken-slider-track { animation-duration: 35s; }
}

/* Reduced-Motion: Slider hält an, manuelles horizontales Scrollen */
@media (prefers-reduced-motion: reduce) {
  .marken-slider-track { animation: none; }
  .marken-slider { overflow-x: auto; }
}

/* ============================================
   v3.43 COMPREHENSIVE MOBILE-OPTIMIZATION (320px–1366px)
   ============================================ */

/* --- Geräte-Slider auf Touch: Auto-Marquee AUS, manueller Swipe AN --- */
@media (max-width: 700px) {
  .marken-slider {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;            /* Fade-Maske weg, sonst wirken Ränder abgeschnitten beim Swipe */
    mask-image: none;
  }
  .marken-slider-track { animation: none !important; width: max-content; }
  /* Duplikate (nur für die Auto-Loop nötig) im manuellen Swipe ausblenden -> keine Wiederholungen */
  .marken-slider-track [aria-hidden="true"] { display: none; }
  .marken-slider .brand-card { flex: 0 0 280px; min-width: 280px; scroll-snap-align: start; }
}
@media (max-width: 400px) {
  .marken-slider .brand-card { flex: 0 0 260px; min-width: 260px; }
}

/* --- v3.52: Shader läuft jetzt auf ALLEN Größen (mobil mit reduzierter
   Komplexität + gecapptem PixelRatio, siehe shader.js). Abschaltung nur noch
   bei prefers-reduced-motion und als JS-Fallback ohne WebGL-Support.
   Der frühere #shader-canvas display:none @max-500px + Gradient-Fallback ist
   bewusst entfernt, .hero hat als Basis background:var(--ink), der Canvas
   clear-t opak auf Ink, also nie leer. --- */

/* --- Touch-Targets >= 44px + iOS-Auto-Zoom verhindern (Inputs >= 16px) --- */
@media (max-width: 900px) {
  nav.top a, .faq-question,
  .cta-button, .schauraum-cta, .brand-card-link a, .marken-cta a, .hero-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* v3.49: Burger NICHT inline-flex, sonst liegen die 3 Spans nebeneinander
     (flex-row) und ergeben EINE Linie statt drei. display:block (s.o.) lässt
     die Spans stapeln; Touch-Target separat absichern. */
  .burger { min-height: 44px; min-width: 44px; }
  .faq-question { min-height: 56px; padding-top: 18px; padding-bottom: 18px; }
  input, textarea, select {
    min-height: 48px;
    font-size: 16px !important;   /* iOS zoomt sonst beim Fokus */
  }
  textarea { min-height: 120px; }
}

/* --- Section-Paddings + Gutter auf kleinen Screens straffen --- */
@media (max-width: 700px) {
  :root {
    --section-pad-sm: 48px;
    --section-pad-md: 64px;
    --section-pad-lg: 80px;
    --gutter: 20px;
  }
}
@media (max-width: 400px) {
  :root {
    --section-pad-md: 56px;
    --gutter: 16px;
  }
}

/* --- Reduced-Motion vollständig respektieren --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #shader-canvas, #quote-shader, #ueber-uns-quote-shader { display: none !important; }
  /* v3.48: Reveal-/Word-Inhalte sofort sichtbar (kein JS-/Scroll-Gate),
     Auto-Marquee aus, Underline-Accents im Endzustand. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .words-split .word, .word { opacity: 1 !important; transform: none !important; }
  .marken-slider-track { animation: none !important; }
  h1 em::after, h2 em::after, h3 em::after { transform: scaleX(1) !important; }
}

/* ============================================
   v3.36 TEXT-WRAP, Quote-Strategie + Body-Max-Width-Audit
   ============================================ */
/* Kurze Quotes: balance (symmetrische Verteilung, kein Orphan).
   Lange Quotes (per JS data-long markiert): pretty + breiterer Container. */
.quote blockquote, .pull-quote { text-wrap: balance; }
/* Generische lange Quotes (z.B. Article-Pull-Quotes): pretty + breiter */
blockquote[data-long] {
  text-wrap: pretty;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
/* Zentrierte Display-Quotes (quote-band): balance verteilt symmetrisch,
   kein kurzer Schluss-Rest ("wäre es Dein." statt "es Dein." -> ganze Zeile) */
.quote-band blockquote { text-wrap: balance; }
.quote-band blockquote[data-long] { text-wrap: balance; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Zentrierte, kurze Leads: balance verteilt symmetrisch und vermeidet den
   kurzen Schluss-Rest besser als pretty (verifiziert: "kennen sie." -> volle Zeile).
   Gilt nur für die zentrierten Display-Leads, nicht für lange Body-Absätze. */
.marken .lead, .intro .lead, .process-lead, .category-lead { text-wrap: balance; }

/* Body-Container etwas breiter → mehr Spielraum für sauberen Umbruch */
.intro p, .intro .lead { max-width: 60ch; }   /* statt 50ch */
.step-body { max-width: 50ch; }                /* statt 42ch */
.brand-card-body p { max-width: 55ch; }        /* statt 50ch (compact bleibt none) */
.category-lead { max-width: 56ch; }            /* statt 50ch */

/* ============================================
   v3.48 PRE-LAUNCH TECH, Skip-Link (A11y) + Cookie-Banner
   ============================================ */

/* Skip-Link: visuell versteckt, beim Tab-Fokus sichtbar (WCAG 2.4.1) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  padding: 16px 24px; background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Cookie-Hinweis (unten links, erst nach JS-Opt-in versteckt) */
.cookie-banner {
  position: fixed; bottom: 24px; left: 24px; right: 24px;
  max-width: 460px; background: var(--ink); color: var(--cream);
  padding: 20px 24px; z-index: 200;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  display: none; border-left: 3px solid var(--yellow);
}
.cookie-banner.show { display: block; }
.cookie-banner p { margin: 0 0 12px; color: var(--cream); }
.cookie-banner a { color: var(--yellow); }
.cookie-btn {
  background: var(--yellow); color: var(--ink); border: none;
  padding: 10px 20px; font-family: var(--font-display);
  font-style: italic; font-size: 15px; cursor: pointer;
  min-height: 44px; min-width: 100px;
}
@media (max-width: 500px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 20px; }
}

/* ============================================
   v3.59 BRAND-PROMISE CARDS, Premium-Editorial-Karten (neue Klassenfamilie,
   bewusst KEIN Override von .value-card -> kein Specificity-Kampf; .value-card
   bleibt für Über-uns erhalten). Großer Italic-BG-Number (attr(data-num)),
   Cream-Gradient, Teal-Top-Border -> Yellow auf Hover, Tiefen-Shadow + Lift.
   ============================================ */
.brand-promise-section { padding: var(--section-pad-md) var(--gutter); }
.brand-promise-header { max-width: 900px; margin: 0 auto var(--space-12); text-align: center; }
.brand-promise-header::before { content: ''; display: block; width: 40px; height: 2px; background: var(--yellow); margin: 0 auto var(--space-5); }
.brand-promise-header .eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: var(--space-4); display: block; }
.brand-promise-header h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
/* Yellow-Highlighter unter dem em, background-size statt ::after+z-index:-1
   (das verschwände hinter dem Section-BG); mehrzeilensicher. */
.brand-promise-header h2 em {
  font-style: italic;
  background-image: linear-gradient(rgba(244,206,90,0.4), rgba(244,206,90,0.4));
  background-repeat: no-repeat; background-position: 0 90%; background-size: 0% 0.16em;
  transition: background-size 1s cubic-bezier(0.22,1,0.36,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.reveal.in .brand-promise-header h2 em { background-size: 100% 0.16em; }

.brand-promise-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.brand-promise-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.brand-promise-card {
  position: relative; padding: 40px 32px 36px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
  overflow: hidden; display: flex; flex-direction: column; min-height: 320px;
  border: 1px solid rgba(14,14,16,0.06); border-top: 3px solid var(--teal-dark);
  box-shadow: 0 2px 0 rgba(14,14,16,0.02), 0 16px 40px rgba(14,14,16,0.05);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s cubic-bezier(0.22,1,0.36,1), border-top-color 0.6s, background 0.6s;
}
@media (hover: hover) and (pointer: fine) {
  .brand-promise-card:hover {
    transform: translateY(-8px); border-top-color: var(--yellow);
    background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
    box-shadow: 0 3px 0 rgba(14,14,16,0.03), 0 32px 64px rgba(14,14,16,0.10);
  }
  .brand-promise-card:hover::after { opacity: 0.28; transform: scale(1.08); }
}
.brand-promise-card::after {
  content: attr(data-num); position: absolute; top: 8px; right: 16px;   /* v3.61: INSIDE (war -30/-10 -> von overflow:hidden abgeschnitten) */
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 140px; line-height: 0.85; color: var(--yellow); opacity: 0.18;
  pointer-events: none; user-select: none; letter-spacing: -0.05em; z-index: 0;
  transition: opacity 0.6s;
}
.bpc-meta { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; font-family: var(--font-display); }
.bpc-num { font-style: italic; font-weight: 600; font-size: 18px; color: var(--teal-dark); letter-spacing: 0.1em; }
.bpc-label { font-style: italic; font-weight: 500; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-soft); }
.bpc-title { position: relative; z-index: 1; font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 16px; }
.brand-promise-card .bpc-title:first-child { padding-top: var(--space-2); }
.bpc-body { position: relative; z-index: 1; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 90%; flex: 1; }
@media (max-width: 1100px) { .brand-promise-grid, .brand-promise-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
@media (max-width: 600px) {
  .brand-promise-grid, .brand-promise-grid.cols-3 { grid-template-columns: 1fr; }
  .brand-promise-card { min-height: 240px; padding: 32px 24px 28px; }
  .brand-promise-card::after { font-size: 140px; top: -20px; right: -5px; }
  .bpc-title { font-size: 26px; }
}

/* ============================================
   v3.58 MARKEN EDITORIAL, Stat-Block + Pull-Quote + Lead-Typo (.marken-* scoped)
   ============================================ */
.marken-stats { padding: var(--space-12) var(--gutter) var(--space-10); max-width: 1100px; margin: 0 auto; }
.marken-stats-inner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-8) 0; }
.marken-stat-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-6); align-items: center; }
.marken-stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.marken-stat-item .stat-big { font-family: var(--font-display); font-size: clamp(56px, 7vw, 96px); font-weight: 500; line-height: 1; letter-spacing: -0.025em; color: var(--ink); }
.marken-stat-item .stat-unit { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--teal-dark); margin-top: var(--space-1); }
.marken-stat-item .stat-text { font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: 0.05em; color: var(--ink-soft); margin-top: var(--space-3); max-width: 22ch; }
.marken-stats .stat-divider { width: 1px; height: 80px; background: var(--line); justify-self: center; }
@media (max-width: 700px) {
  .marken-stat-row { grid-template-columns: 1fr; gap: var(--space-6); }
  .marken-stats .stat-divider { width: 60px; height: 1px; margin: 0 auto; }
  .marken-stat-item .stat-big { font-size: 52px; }
}

/* Marken-Pull-Quote: nutzt die globale .pullquote-inner (v3.57), nur Section-BG
   abweichend (cream-soft statt cream). Highlighter erbt von .pullquote-inner em. */
.marken-pullquote { padding: var(--space-12) var(--gutter); background: var(--cream-soft); }

/* Lead-Typo Marken */
.marken-page .page-hero .lead, .marken-page .category-lead { font-size: clamp(20px, 2.3vw, 26px); line-height: 1.55; font-weight: 500; color: var(--ink); }
@media (max-width: 700px) { .marken-page .page-hero .lead, .marken-page .category-lead { font-size: 19px; } }

/* ============================================
   v3.60 ANREISE-PREMIUM CARDS, neue Klassenfamilie (kein Override der alten
   .anreise-card). SVG-Icons + 200px Italic-BG-Number + Premium-Card-Treatment.
   ============================================ */
.anreise-section { padding: var(--section-pad-md) var(--gutter); background: var(--cream-soft); }
.anreise-header { max-width: 900px; margin: 0 auto var(--space-12); text-align: center; }
.anreise-header::before { content: ''; display: block; width: 40px; height: 2px; background: var(--yellow); margin: 0 auto var(--space-5); }
.anreise-header .eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: var(--space-4); display: block; }
.anreise-header h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.anreise-header h2 em {
  font-style: italic;
  background-image: linear-gradient(rgba(244,206,90,0.4), rgba(244,206,90,0.4));
  background-repeat: no-repeat; background-position: 0 90%; background-size: 0% 0.16em;
  transition: background-size 1s cubic-bezier(0.22,1,0.36,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.reveal.in .anreise-header h2 em { background-size: 100% 0.16em; }

.anreise-premium-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.anreise-premium-card {
  position: relative; padding: 48px 36px 40px;
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  border: 1px solid rgba(14,14,16,0.06); border-top: 3px solid var(--teal-dark);
  overflow: hidden; display: flex; flex-direction: column; min-height: 380px;
  box-shadow: 0 2px 0 rgba(14,14,16,0.02), 0 16px 40px rgba(14,14,16,0.05);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s cubic-bezier(0.22,1,0.36,1), border-top-color 0.6s;
}
@media (hover: hover) and (pointer: fine) {
  .anreise-premium-card:hover { transform: translateY(-8px); border-top-color: var(--yellow); box-shadow: 0 3px 0 rgba(14,14,16,0.03), 0 32px 64px rgba(14,14,16,0.10); }
  .anreise-premium-card:hover::after { opacity: 0.28; transform: scale(1.08); }
  .anreise-premium-card:hover .apc-icon { color: var(--ink); transform: translateY(-2px); }
}
.anreise-premium-card::after {
  content: attr(data-num); position: absolute; top: -30px; right: -10px;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 200px; line-height: 0.85; color: var(--yellow); opacity: 0.13;
  pointer-events: none; user-select: none; letter-spacing: -0.08em; z-index: 0;
  transition: opacity 0.6s, transform 0.6s;
}
.apc-icon { position: relative; z-index: 1; width: 56px; height: 56px; color: var(--teal-dark); margin-bottom: 32px; transition: color 0.5s, transform 0.5s; }
.apc-icon svg { width: 100%; height: 100%; }
.apc-meta { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; font-family: var(--font-display); }
.apc-num { font-style: italic; font-weight: 600; font-size: 18px; color: var(--teal-dark); letter-spacing: 0.08em; }
.apc-label { font-style: italic; font-weight: 500; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-soft); }
.apc-title { position: relative; z-index: 1; font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 20px; }
.apc-body { position: relative; z-index: 1; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; flex: 1; }
@media (max-width: 1100px) {
  .anreise-premium-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .anreise-premium-card { min-height: auto; }
}
@media (max-width: 600px) {
  .anreise-premium-card { padding: 36px 28px 32px; }
  .anreise-premium-card::after { font-size: 140px; }
  .apc-icon { width: 48px; height: 48px; margin-bottom: 24px; }
  .apc-title { font-size: 24px; }
}

/* ============================================
   v3.61 ROUND-61 FIXES, Stats kompakt Mobile + Play-Button Hardening
   ============================================ */

/* FIX 1: Schauraum-/Marken-Stats auf Mobile 3-spaltig kompakt (statt langes
   1-Col-Stacking). Scoped auf die -row/-stats-Kontexte -> Über-uns .text-stat
   (ohne -row) bleibt unberührt. */
@media (max-width: 700px) {
  .schauraum-stats .text-stat-row, .marken-stat-row {
    grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-3); align-items: center;
  }
  .schauraum-stats .stat-divider, .marken-stats .stat-divider {
    width: 1px; height: 60px; margin: 0; justify-self: center;
  }
  .text-stat-row .stat-big, .marken-stat-row .stat-big { font-size: 42px; line-height: 1; }
  .text-stat-row .stat-unit, .marken-stat-row .stat-unit { font-size: 18px; }
  .text-stat-row .stat-text, .marken-stat-row .stat-text { font-size: 11px; letter-spacing: 0.04em; margin-top: var(--space-2); }
}
@media (max-width: 400px) {
  .text-stat-row .stat-big, .marken-stat-row .stat-big { font-size: 36px; }
  .text-stat-row .stat-text, .marken-stat-row .stat-text { font-size: 10px; }
  .schauraum-stats .stat-divider, .marken-stats .stat-divider { height: 50px; }
}

/* FIX 2: Play-Button, Emoji ist aus dem HTML raus (front-page + schauraum),
   Triangle kommt aus ::before (v3.51). ::after defensiv leeren, Mobile kleiner. */
.play-icon::after { content: none; }
@media (max-width: 700px) {
  .play-icon { width: 64px; height: 64px; }
  .play-icon::before { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
}

/* ============================================
   v3.62 GLANCE CARDS, Premium-Dark "Auf einen Blick" (neue Klassenfamilie,
   ersetzt die alten .value-cards--dark). Subtle Gradient, Yellow-Top-Border
   -> Teal auf Hover, italic Eyebrow-Label, Body cream 78%.
   ============================================ */
.glance-section { padding: var(--section-pad-md) var(--gutter); background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
.glance-section::before { content: ''; position: absolute; top: 10%; right: -100px; width: 200px; height: 200px; background: var(--yellow); opacity: 0.04; transform: rotate(20deg); pointer-events: none; }
.glance-section::after { content: ''; position: absolute; bottom: 15%; left: -80px; width: 140px; height: 220px; background: var(--teal); opacity: 0.03; transform: rotate(-12deg); pointer-events: none; }
.glance-header { max-width: 900px; margin: 0 auto var(--space-12); text-align: center; position: relative; z-index: 1; }
.glance-header::before { content: ''; display: block; width: 40px; height: 2px; background: var(--yellow); margin: 0 auto var(--space-5); }
.glance-header .eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--space-4); display: block; }
.glance-header h2 { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--cream); margin: 0; }
.glance-header h2 em {
  font-style: italic;
  background-image: linear-gradient(rgba(244,206,90,0.4), rgba(244,206,90,0.4));
  background-repeat: no-repeat; background-position: 0 90%; background-size: 0% 0.16em;
  transition: background-size 1s cubic-bezier(0.22,1,0.36,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.reveal.in .glance-header h2 em { background-size: 100% 0.16em; }
.glance-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); position: relative; z-index: 1; }
.glance-card {
  position: relative; padding: 36px 32px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(244,206,90,0.15); border-top: 2px solid var(--yellow);
  overflow: hidden; display: flex; flex-direction: column; min-height: 220px;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-top-color 0.5s, border-color 0.5s, background 0.5s, box-shadow 0.5s;
}
@media (hover: hover) and (pointer: fine) {
  .glance-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    border-top-color: var(--teal); border-color: rgba(123,188,181,0.25);
    box-shadow: 0 24px 48px rgba(0,0,0,0.3);
  }
}
.glance-card-label { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--teal); opacity: 0.8; display: block; margin-bottom: 14px; }
.glance-card h3 { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; color: var(--cream); margin: 0 0 14px; }
.glance-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(250,247,242,0.78); margin: 0; flex: 1; text-wrap: pretty; }
@media (max-width: 1024px) { .glance-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
@media (max-width: 600px) {
  .glance-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .glance-card { min-height: auto; padding: 28px 24px 24px; }
  .glance-card h3 { font-size: 22px; }
}

/* ============================================
   v3.63 CARD-NUMBERS DEFINITIV IM CARD, width-begrenzt + text-align:right,
   damit mehrstellige Numbers (04) nicht rechts aus der Card laufen (overflow:
   hidden schnitt sie sonst ab). Autoritativer Override beider Card-Familien.
   ============================================ */
.brand-promise-card::after,
.anreise-premium-card::after {
  position: absolute !important;
  top: 12px !important; right: 24px !important; bottom: auto !important;
  width: 160px !important; text-align: right !important;
  font-family: var(--font-display) !important; font-style: italic !important;
  font-weight: 300 !important; font-size: 110px !important; line-height: 0.85 !important;
  color: var(--yellow) !important; opacity: 0.20 !important;
  pointer-events: none !important; user-select: none !important;
  letter-spacing: -0.05em !important; z-index: 0 !important;
  transition: opacity 0.6s !important;
}
.brand-promise-card:hover::after,
.anreise-premium-card:hover::after { opacity: 0.35 !important; transform: none !important; }
@media (max-width: 700px) {
  .brand-promise-card::after, .anreise-premium-card::after { width: 120px !important; font-size: 90px !important; top: 10px !important; right: 20px !important; }
}
@media (max-width: 400px) {
  .brand-promise-card::after, .anreise-premium-card::after { width: 100px !important; font-size: 76px !important; top: 8px !important; right: 16px !important; }
}
/* Content über der Number halten + nicht in die Number-Zone laufen */
.brand-promise-card .bpc-title, .anreise-premium-card .apc-title { max-width: 75%; position: relative; z-index: 1; }
.brand-promise-card .bpc-body, .anreise-premium-card .apc-body { max-width: 90%; position: relative; z-index: 1; }

/* ============================================
   v3.66 FIX 16, MARKEN ANTI-POWERPOINT: Breathing-Moment + BG-Rhythmus
   ============================================ */
.marken-breathing {
  background: var(--ink); color: var(--cream);
  padding: var(--space-12) var(--gutter); text-align: center;
  width: 100vw; margin-left: calc(50% - 50vw);
  position: relative; overflow: hidden;
}
.marken-breathing::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, rgba(244,206,90,0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(123,188,181,0.06) 0%, transparent 50%);
}
.marken-breathing .pullquote-inner { position: relative; z-index: 1; max-width: 34ch; margin: 0 auto; }
.marken-breathing .pullquote-inner::before { color: var(--yellow); }
.marken-breathing .pullquote-inner blockquote { color: var(--cream); font-size: clamp(28px, 4vw, 46px); }
.marken-breathing .pullquote-inner cite { color: var(--teal); }
@media (max-width: 700px) { .marken-breathing { padding: var(--space-8) var(--gutter); } }
/* BG-Rhythmus zwischen den Kategorien (Auge bekommt Wechsel statt Monotonie) */
.brand-block { background: var(--cream); }
.brand-cards-wohnen { background: var(--cream-soft); }
.brand-cards-geraete { background: var(--cream); }

/* ============================================
   v3.66 FIX 14, SPACING TIGHTENING (Section-Paddings runter, kompakter)
   ============================================ */
:root {
  --section-pad-sm: clamp(40px, 4vw, 60px);
  --section-pad-md: clamp(56px, 5vw, 80px);
  --section-pad-lg: clamp(72px, 6vw, 100px);
}
@media (max-width: 700px) {
  :root { --section-pad-sm: 32px; --section-pad-md: 48px; --section-pad-lg: 60px; --gutter: 18px; }
}
@media (max-width: 400px) {
  :root { --section-pad-sm: 28px; --section-pad-md: 40px; --section-pad-lg: 52px; --gutter: 16px; }
}
.intro, .process-intro, .marken-category-header, .brand-promise-header,
.glance-header, .anreise-header, .werte-header, .gallery-header, .news-header, .section-header {
  margin-bottom: var(--space-8) !important;
}
@media (max-width: 700px) {
  .intro, .process-intro, .marken-category-header, .brand-promise-header,
  .glance-header, .anreise-header, .werte-header, .gallery-header, .news-header, .section-header {
    margin-bottom: var(--space-6) !important;
  }
}
.text-stat, .marken-stats, .schauraum-stats, .story-stats {
  margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important;
}
@media (max-width: 700px) {
  .text-stat, .marken-stats, .schauraum-stats, .story-stats {
    margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important;
  }
}
.brand-block { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
@media (max-width: 700px) {
  .brand-block { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
}
.pull-quote, .schauraum-pullquote, article .pull-quote {
  margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important;
}
@media (max-width: 700px) {
  .pull-quote, .schauraum-pullquote { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
}

/* v3.66 FIX 15, VERWORFEN nach visuellem Test: Der kurze Hero (max-height
   180–280, 16/9) zeigt das Logo NICHT, sondern eine schmale Glas-/Auto-Zone.
   Grund unverändert: Mobile-Crop ist horizontal (Y wirkungslos) UND die fixe
   Nav überlagert die oberen ~117px, wo das Logo sitzt, das löst weder cover
   noch contain noch ein kürzerer Hero. Es bleibt bei der besten erreichbaren
   Rahmung (FIX 11: 50vh/380, object-position 80% center, "JOE'S möbelboutique"
   lesbar). Echte Lösung = Post-Launch <picture> mit echtem 4:5-Portrait-Crop,
   Logo zentriert (in FIX 13c Decision 5 bereits so vereinbart). */

/* ============================================
   v3.66.1 FIX 15-FINAL, SCHAURAUM MOBILE: komplettes Foto (contain) statt Crop.
   object-fit:contain zeigt das ganze Bild (Logo immer drin), padding-top schiebt
   es unter die fixe Nav. Kleine Cream-Streifen oben/unten sind bewusst akzeptiert.
   Überschreibt alle vorherigen .schauraum-hero-Mobile-Regeln.
   ============================================ */
@media (max-width: 700px) {
  .schauraum-hero {
    height: auto !important;
    min-height: 240px !important;
    max-height: 380px !important;
    background: var(--cream-soft) !important;
    overflow: hidden;
    padding-top: 118px !important;
  }
  .schauraum-hero img, .schauraum-hero-img,
  .schauraum-hero picture, .schauraum-hero figure {
    width: 100% !important;
    height: auto !important;
    max-height: 260px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }
}
@media (max-width: 500px) {
  .schauraum-hero { padding-top: 114px !important; min-height: 240px !important; max-height: 360px !important; }
  .schauraum-hero img, .schauraum-hero-img { max-height: 200px !important; }
}

/* ============================================
   v3.67 FIX 17, SCHAURAUM INFO-BLOCK: Premium-Cards (Adresse/Zeiten/Kontakt)
   gleiches Pattern wie Anreise-Premium (SVG-Icon + BG-Number + Hover-Lift).
   ============================================ */
.schauraum-info { padding: var(--section-pad-md) var(--gutter); background: var(--cream-soft); }
.schauraum-info-header { max-width: 900px; margin: 0 auto var(--space-10); text-align: center; }
.schauraum-info-header::before { content: ''; display: block; width: 40px; height: 2px; background: var(--yellow); margin: 0 auto var(--space-5); }
.schauraum-info-header .eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: var(--space-4); display: block; }
.schauraum-info-header h2 { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px); font-weight: 500; line-height: 1.1; margin: 0; }
.schauraum-info-header h2 em {
  font-style: italic;
  background-image: linear-gradient(rgba(244,206,90,0.4), rgba(244,206,90,0.4));
  background-repeat: no-repeat; background-position: 0 90%; background-size: 0% 0.16em;
  transition: background-size 1s cubic-bezier(0.22,1,0.36,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.reveal.in .schauraum-info-header h2 em { background-size: 100% 0.16em; }
.schauraum-info-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.schauraum-info-card {
  position: relative; padding: 40px 32px 32px;
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  border: 1px solid rgba(14,14,16,0.06); border-top: 3px solid var(--teal-dark);
  overflow: hidden; display: flex; flex-direction: column; min-height: 340px;
  box-shadow: 0 2px 0 rgba(14,14,16,0.02), 0 16px 40px rgba(14,14,16,0.05);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s, border-top-color 0.6s;
}
@media (hover: hover) and (pointer: fine) {
  .schauraum-info-card:hover { transform: translateY(-6px); border-top-color: var(--yellow); box-shadow: 0 3px 0 rgba(14,14,16,0.03), 0 32px 64px rgba(14,14,16,0.10); }
  .schauraum-info-card:hover::after { opacity: 0.32; }
  .schauraum-info-card:hover .sic-icon { color: var(--ink); }
}
.schauraum-info-card::after {
  content: attr(data-num); position: absolute; top: 12px; right: 24px; width: 160px; text-align: right;
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 130px; line-height: 0.85;
  color: var(--yellow); opacity: 0.18; pointer-events: none; user-select: none; letter-spacing: -0.05em; z-index: 0; transition: opacity 0.6s;
}
.sic-icon { position: relative; z-index: 1; width: 52px; height: 52px; color: var(--teal-dark); margin-bottom: 28px; transition: color 0.5s; }
.sic-icon svg { width: 100%; height: 100%; }
.sic-eyebrow { position: relative; z-index: 1; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-dark); display: block; margin-bottom: 12px; }
.schauraum-info-card h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 16px; max-width: 80%; }
.schauraum-info-card p { position: relative; z-index: 1; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 20px; flex: 1; max-width: 90%; }
.schauraum-info-card p strong { font-weight: 600; color: var(--ink); }
.sic-contact-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(14,14,16,0.15); transition: border-color 0.3s, color 0.3s; }
.sic-contact-link:hover { color: var(--teal-dark); border-color: var(--teal-dark); }
.sic-link { position: relative; z-index: 1; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal-dark); text-decoration: none; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(14,14,16,0.08); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s, color 0.3s; }
.sic-link::after { content: '→'; font-style: normal; transition: transform 0.3s; }
.sic-link:hover { color: var(--ink); gap: 14px; }
@media (max-width: 1024px) {
  .schauraum-info-grid { grid-template-columns: 1fr; gap: var(--space-3); max-width: 600px; }
  .schauraum-info-card { min-height: auto; padding: 32px 28px; }
}
@media (max-width: 500px) {
  .schauraum-info-card { padding: 28px 24px; }
  .schauraum-info-card::after { font-size: 100px; }
  .sic-icon { width: 44px; height: 44px; margin-bottom: 20px; }
  .schauraum-info-card h3 { font-size: 22px; }
}

/* ============================================
   v3.68, COHESION / "AUS EINEM GUSS": engere + KONSISTENTE Section-Abstände
   (Desktop spürbar enger; Outlier-Sections auf den Token normalisiert).
   ============================================ */
:root {
  --section-pad-sm: clamp(32px, 2.6vw, 44px);
  --section-pad-md: clamp(40px, 3.4vw, 54px);
  --section-pad-lg: clamp(52px, 4.4vw, 72px);
}
@media (max-width: 700px) {
  :root { --section-pad-sm: 28px; --section-pad-md: 40px; --section-pad-lg: 52px; }
}
@media (max-width: 400px) {
  :root { --section-pad-sm: 24px; --section-pad-md: 34px; --section-pad-lg: 44px; }
}
/* Outlier-Sections (waren hart 96px Padding + Extra-Margin) auf den Token ziehen */
.schauraum-stats, .marken-stats {
  padding-top: var(--section-pad-md) !important; padding-bottom: var(--section-pad-md) !important;
  margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important;
}
.schauraum-pullquote, .marken-breathing {
  padding-top: var(--section-pad-md) !important; padding-bottom: var(--section-pad-md) !important;
}
.schauraum-intro { padding-top: var(--section-pad-md) !important; padding-bottom: var(--section-pad-sm) !important; }
/* Header-zu-Content-Gap konsistent enger */
.section-header, .schauraum-info-header, .anreise-header, .brand-promise-header,
.glance-header, .marken-category-header, .gallery-header {
  margin-bottom: var(--space-6) !important;
}

/* Pull-Quote-Margins enger (waren 64px -> Baukasten-Lücke) */
.schauraum-pullquote, .pull-quote, article .pull-quote {
  margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important;
}

/* v3.68, Schauraum DESKTOP-Hero: mehr vom Foto zeigen (näher an 2:1 statt
   2.67:1 Band-Crop), volle Breite, Logo bleibt im Frame. */
@media (min-width: 701px) {
  .schauraum-hero {
    height: auto !important; min-height: 0 !important;
    aspect-ratio: 2.15 / 1; max-height: 680px !important;
  }
  .schauraum-hero img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center 28% !important;
  }
}

/* ============================================
   v3.70, DEMO-PASS (FIX 18/19/20 Kern): Hero-Desktop, Slider, Quote-Center,
   Headline-Gaps, Marken-Editorial, Kontakt-Cards (reuse .schauraum-info).
   ============================================ */

/* FIX 19 P1, Schauraum DESKTOP-Hero: cover (Mobile contain bleibt ≤700) */
@media (min-width: 701px) {
  .schauraum-hero {
    aspect-ratio: 21 / 9; max-height: 80vh; height: auto !important;
    min-height: 0 !important; padding-top: 0 !important;
  }
  .schauraum-hero img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center 32% !important;
  }
}

/* FIX 18 P1, Geräte-Slider: sauberer seamless Loop (Cards sind im PHP 2x),
   exakt -50% (kein Fudge -> kein Sprung), Dauer moderater, Pause-on-Hover. */
.marken-slider-track { animation: slideRTL 28s linear infinite !important; }
@keyframes slideRTL { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 700px) { .marken-slider-track { animation-duration: 22s !important; } }

/* FIX 19 P3, Frontpage-Quote zentriert (war nach rechts verrutscht) */
.quote .quote-content, .quote-band .quote-band-inner {
  margin-left: auto !important; margin-right: auto !important; text-align: center;
}

/* FIX 19 P5, Headline -> Lead -> Content Gaps eng + konsistent */
.section-header .eyebrow + h2, .section-header h2,
.marken-category-header h2, .brand-promise-header h2, .glance-header h2,
.anreise-header h2, .schauraum-info-header h2 { margin-top: 12px; }
.section-header .lead, .category-lead, .page-hero .lead { margin-top: 14px; }

/* FIX 18 P4/P5, Marken Kategorie-Header linksbündig (Editorial), Lead 540px */
.marken-category-header { text-align: left !important; max-width: var(--container); margin-left: auto; margin-right: auto; }
.marken-category-header .category-eyebrow { letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--teal-dark); }
.marken-category-header .category-lead { max-width: 540px; margin-left: 0; margin-right: 0; }
.marken-category-header::before { margin-left: 0 !important; }   /* Yellow-Bar links statt zentriert */
.marken-page .brand-body p, .marken-page .brand-card-body p, .marken-page .category-lead { line-height: 1.65; }

/* FIX 20 P2a, Brand-Logos größer auf Desktop */
.brand-block .brand-logo { height: clamp(48px, 5vw, 80px) !important; }

/* FIX 20 P2e, Brand-Cards subtle Hover-Lift */
@media (hover: hover) and (pointer: fine) {
  .brand-card { transition: transform 0.4s ease, box-shadow 0.4s ease; }
  .brand-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(20,30,40,0.08); }
}

/* FIX 20 P2d, Section-Trenner: Yellow-Accent-Linie zwischen Marken-Kategorien */
.marken-page .brand-cards-wohnen, .marken-page .brand-cards-geraete { position: relative; }
.marken-page .brand-cards-wohnen::before, .marken-page .brand-cards-geraete::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 1px; background: var(--yellow);
}

/* ============================================
   v3.71, FIX 22 Bug-Fixes (B1/B2/B4)
   ============================================ */

/* B1, Schauraum-Hero Desktop full-bleed + kein horizontaler Overflow-Fragment.
   overflow-x:hidden am Body kappt etwaige 100vw-Überläufe (Fragment rechts). */
html, body { overflow-x: hidden; }
@media (min-width: 701px) {
  .schauraum-hero {
    width: 100vw !important; max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    aspect-ratio: 21 / 9; max-height: 80vh; overflow: hidden; position: relative;
  }
  .schauraum-hero img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center 35% !important;
  }
}

/* B2, Kontakt/Page-Hero Headline auf Mobile nicht abschneiden (italic-Glyph
   "S" überhing den Rand). Innen-Padding + weniger negatives Tracking. */
@media (max-width: 700px) {
  .page-hero-inner { padding-inline: clamp(16px, 5vw, 28px); overflow: visible; }
  .page-hero h1 { letter-spacing: -0.012em; max-width: none; overflow: visible; text-wrap: balance; }
}

/* B4, Marken-Kategorie-Header EINHEITLICH linksbündig: die Headline war intern
   noch zentriert (margin:auto/max-width), Eyebrow+Lead links -> wirkte verrutscht. */
.marken-category-header { text-align: left !important; }
.marken-category-header .category-eyebrow,
.marken-category-header h2,
.marken-category-header .category-lead {
  text-align: left !important; margin-left: 0 !important; margin-right: 0 !important;
}
.marken-category-header h2 { max-width: none !important; }
.marken-category-header .category-lead { max-width: 540px !important; }
.marken-category-header .category-eyebrow + h2 { margin-top: 20px !important; }
.marken-category-header h2 + .category-lead { margin-top: 14px !important; }
.marken-category-header::before { margin-left: 0 !important; margin-right: 0 !important; }

/* ============================================
   v3.72 (FIX 23), KONTAKT-FORM (WPForms-ready) Brand-Styling
   ============================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.kontakt-form-section { padding-block: var(--section-pad-md); background: var(--cream); }
.kontakt-form-section .container { max-width: 720px; margin-inline: auto; padding-inline: clamp(24px, 5vw, 48px); }
.kontakt-form-section .form-header { text-align: center; margin-bottom: clamp(40px, 4vw, 64px); }
.kontakt-form-section .form-header .eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-dark); display: block; }
.kontakt-form-section .form-header h2 { margin-top: 14px; text-wrap: balance; }
.kontakt-form-section .lead { max-width: 540px; margin-inline: auto; margin-top: 14px; line-height: 1.65; }
/* Fallback-Formular Consent-Checkbox */
.form-consent-row { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.form-consent-row input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--teal-dark); }
.form-consent-row a { color: var(--teal-dark); }

/* WPForms Override (greift sobald das Plugin rendert) */
.wpforms-container { font-family: inherit !important; }
.wpforms-container .wpforms-field-label, .wpforms-container label { font-family: inherit !important; font-size: 12px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--ink) !important; margin-bottom: 10px !important; font-weight: 500 !important; }
.wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container textarea, .wpforms-container select {
  background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; padding: 14px 16px !important;
  font-family: inherit !important; font-size: 16px !important; color: var(--ink) !important; transition: border-color 0.3s ease !important; width: 100% !important; box-shadow: none !important;
}
.wpforms-container input:focus, .wpforms-container textarea:focus, .wpforms-container select:focus { border-color: var(--teal) !important; outline: none !important; box-shadow: none !important; }
.wpforms-container textarea { min-height: 140px; resize: vertical; }
.wpforms-container button[type="submit"], .wpforms-container .wpforms-submit {
  background: var(--ink) !important; color: var(--cream) !important; padding: 16px 36px !important; text-transform: uppercase !important; letter-spacing: 0.18em !important; font-size: 13px !important;
  border: none !important; border-radius: 0 !important; cursor: pointer !important; transition: background 0.3s ease, color 0.3s ease !important; font-family: inherit !important;
}
.wpforms-container button[type="submit"]:hover, .wpforms-container .wpforms-submit:hover { background: var(--yellow) !important; color: var(--ink) !important; }
.wpforms-container .wpforms-field { margin-bottom: 24px !important; }
.wpforms-container .wpforms-required-label { color: var(--teal); }
.wpforms-confirmation-container-full { background: var(--cream); border: 1px solid var(--teal); border-left: 4px solid var(--teal); padding: 32px; color: var(--ink); font-size: 17px; line-height: 1.65; }
/* Consent-Satz lesbar (nicht uppercase/italic wie die Feld-Labels) */
.kontakt-form-section .form-consent-row, .kontakt-form-section .form-consent-row span,
.kontakt-form-section .form-consent-row a { text-transform: none !important; letter-spacing: normal !important; font-style: normal !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; }

/* ============================================================
   PROJEKT-LIGHTBOX (v3.81.0) - Vanilla, nur Single-Projekt
   ============================================================ */
.projekt-image-link { display: block; cursor: zoom-in; transition: opacity 0.3s ease; }
.projekt-image-link:hover { opacity: 0.92; }

.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 30, 40, 0.94);
  z-index: 9999;
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.lightbox-overlay.open { display: flex; opacity: 1; }
.lightbox-image {
  max-width: 90vw; max-height: 90vh; object-fit: contain;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
  position: absolute; top: 24px; right: 24px;
  background: transparent; border: 1px solid var(--cream); color: var(--cream);
  width: 44px; height: 44px; cursor: pointer; font-size: 20px; line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
.lightbox-close:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: transparent; border: 1px solid var(--cream); color: var(--cream);
  width: 48px; height: 48px; cursor: pointer; font-size: 24px; line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
.lightbox-nav:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: var(--cream); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
}
@media (max-width: 768px) {
  .lightbox-close { top: 16px; right: 16px; }
  .lightbox-nav { display: none; } /* Mobile: Swipe statt Buttons */
}
@media (prefers-reduced-motion: reduce) {
  .projekt-image-link, .lightbox-overlay, .lightbox-close, .lightbox-nav { transition-duration: 0.1s; }
}

/* ============================================================
   STORY-CINEMA (v3.82.0) - Video-BG + Foto + Quote, nur Frontpage
   ============================================================ */
.story-cinema {
  position: relative;
  padding-block: clamp(60px, 6vw, 100px); /* v3.84.0: kompakter (vorher 80/8vw/140) */
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
}
@media (min-width: 769px) {
  .story-cinema-photo img { aspect-ratio: 3/4; max-height: 540px; } /* v3.84.0: kompaktere Hoehe */
}
.story-cinema-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.story-cinema-video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.story-cinema-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(20,30,40,0.78) 0%, rgba(20,30,40,0.62) 50%, rgba(20,30,40,0.78) 100%);
}
.story-cinema-content {
  display: grid;
  grid-template-columns: minmax(280px, 480px) 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
}
.story-cinema-photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.story-cinema-text blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.2; font-weight: 400; margin: 0;
  text-wrap: balance; color: var(--cream);
}
/* v3.86.0: Underline relativ zur Schriftgroesse (vorher border-bottom 2px, auf Mobile versetzt). */
.story-cinema-text blockquote em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
  border-bottom: none;
  padding-bottom: 0;
}
.story-cinema-text .attribution {
  margin-top: 24px; font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream); opacity: 0.7;
}
/* v3.85.0: Mobile-Layout-Fix. Foto kompakt (max 280px, 4/5), Quote darunter lesbar. */
@media (max-width: 768px) {
  .story-cinema { padding-block: clamp(48px, 6vw, 72px); padding-inline: 20px; }
  .story-cinema-content { grid-template-columns: 1fr; gap: 28px; padding-inline: 0; max-width: 100%; }
  .story-cinema-photo { display: flex; justify-content: center; width: 100%; }
  .story-cinema-photo img {
    width: 100%; max-width: 280px; aspect-ratio: 4/5; object-fit: cover;
    height: auto; margin-inline: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }
  .story-cinema-text { text-align: center; padding-inline: 8px; }
  .story-cinema-text blockquote { font-size: clamp(22px, 6vw, 30px); line-height: 1.25; margin: 0 auto; max-width: 400px; }
  .story-cinema-text .attribution { margin-top: 16px; font-size: 11px; }
}
@media (max-width: 480px) {
  .story-cinema { padding-block: 40px; }
  .story-cinema-photo img { max-width: 240px; }
  .story-cinema-text blockquote { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-cinema-video { display: none; }
  .story-cinema-bg {
    background-image: url('/wp-content/uploads/2026/05/Premium-Story-17-scaled.jpg');
    background-size: cover; background-position: center;
  }
}

/* ====================================================================
   STICKY MOBILE CTA + TAP-TO-CALL  (v3.89, FIX 40)
   Breakpoint 900px = Theme-Mobilegrenze (dort greift die Burger-Nav),
   bewusst statt der generischen 768px aus dem Brief, damit beide Elemente
   konsistent mit der bestehenden Mobile-Navigation erscheinen.
   ==================================================================== */

/* --- Sticky CTA "Termin im Schauraum" --- */
.mobile-sticky-cta {
  display: none;                 /* Desktop: aus */
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: var(--cream);
  color: var(--ink);
  border: 1.5px solid var(--ink); /* Editorial-Kante: Cream-CTA hebt sich vom Cream-BG ab */
  border-radius: 0;               /* kantig */
  box-shadow: 0 4px 16px rgba(20, 30, 40, 0.12);
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
@media (max-width: 900px) {
  .mobile-sticky-cta { display: inline-flex; }
}
.mobile-sticky-cta.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-sticky-cta .arrow {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  /* kein Slide, nur Fade */
  .mobile-sticky-cta { transition: opacity 0.2s ease; transform: translateX(-50%); }
  .mobile-sticky-cta.visible { transform: translateX(-50%); }
}

/* --- Tap-to-Call im Mobile-Header --- */
.header-tel { display: none; }
@media (max-width: 900px) {
  .header-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;       /* schiebt das Icon nach rechts neben den Burger */
    margin-right: 6px;
    padding: 6px;
    color: var(--ink);
    transition: color 0.2s ease;
  }
}
.header-tel:hover, .header-tel:focus { color: var(--teal); }
/* Farbe folgt dem Nav-State auf der Startseite (heller Hero) */
body.home .header-tel { color: var(--cream); }
body.home nav.top.scrolled .header-tel { color: var(--ink); }
body.home .header-tel:hover, body.home .header-tel:focus { color: var(--teal); }