/* ==========================================================================
   Sofa & Co. — Stylesheet
   Selbstgehostete Schriften (DSGVO), Layout, Animationen, Responsive.
   ========================================================================== */

/* ---------- Selbstgehostete Schriften ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-italic-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/jost-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jost-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jost-500.woff2') format('woff2');
}

/* ---------- Design-Tokens ---------- */
:root {
  --color-bg: #FFFFFF;
  --color-text: #26221C;
  --color-gold: #9A7B4F;
  --color-gold-light: #C9A876;
  --color-muted: #6E6558;
  --color-soft: #F7F4EF;
  --color-dark: #26221C;
  --color-light: #F5F1EA;
  --color-sand: #EDE3D3;
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw: 1360px;
  --maxw-narrow: 900px;
  --maxw-text: 1000px;
  --gap-lg: 80px;
  --pad-x: 44px;
  --pad-section: 110px;
  --ease: cubic-bezier(.22,.61,.21,1);
}

/* ---------- Reset & Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}
img { max-width: 100%; }
a { color: var(--color-text); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--color-gold); }
::selection { background: var(--color-gold); color: #fff; }
button { font-family: inherit; }
em { font-style: italic; }

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); }

/* ---------- Keyframes ---------- */
@keyframes goldSheen {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heroFromLeft {
  0% { opacity: 0; transform: translateX(-90px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroFromRight {
  0% { opacity: 0; transform: translateX(90px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroAmp {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes heroFadeIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes lightboxBg {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes lightboxImg {
  0% { opacity: 0; transform: scale(0.92) translateY(24px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(38,34,28,0.1);
}
.header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;   /* R6-4: 32 → 24 px — wirkt nur als Mindestabstand im Engpass */
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-serif); font-size: 27px; font-weight: 500; letter-spacing: 0.03em; }
.brand__tag { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-gold); }
.nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
/* Seit R6-4 trägt das Menü 10 Einträge (9 Punkte + Beratung, Andreas Runde 6
   Platz 8 „Sonderangebote“ ergänzt) — dafür wurden die Abstände maßvoll
   verengt (Nav 22 → 16 px, Logo↔Menü 32 → 24 px); die Schriftgröße blieb
   bei 12.5px, damit das Menü lesbar bleibt. */
.nav__link { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.nav__cta {
  border: 1px solid var(--color-text);
  padding: 10px 16px;
  transition: background .25s ease, color .25s ease;
}
.nav__cta:hover { background: var(--color-text); color: #fff; }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__media { width: 100%; height: 78vh; min-height: 560px; position: relative; }
.hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.hero__video.is-visible { opacity: 1; }
.hero__video.is-fading-out { transition-duration: 3s; }
.hero__scrim {
  position: absolute; inset: 0;
  /* Lesbarkeits-Verlauf unten links — das End-Standbild zeigt die Frau mittig-rechts,
     ihr Gesicht bleibt frei; der Text sitzt im unteren Drittel links. */
  background:
    linear-gradient(180deg, rgba(38,34,28,0) 48%, rgba(38,34,28,0.34) 82%, rgba(38,34,28,0.42) 100%),
    linear-gradient(100deg, rgba(38,34,28,0.22) 0%, rgba(38,34,28,0) 55%);
  pointer-events: none;
}
.hero__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  text-align: left; padding: 0 var(--pad-x) clamp(44px, 9vh, 110px); pointer-events: none;
  transition: opacity 1.1s ease;
}
/* Während das Hero-Video läuft, ist der Schriftzug ausgeblendet; er erscheint,
   wenn das Video durchgelaufen ist und das Standbild zurückkehrt (per JS gesteuert). */
.hero__content.is-hidden { opacity: 0; }
/* E-054: Lesbarkeit von Andreas Überschrift und Satz. Die Abdunklung gehört zum
   Textblock und blendet mit ihm ein — während das Video läuft, bleibt das Bild hell. */
.hero__content::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(30,25,18,0.55) 0%, rgba(30,25,18,0.34) 30%, rgba(30,25,18,0) 56%);
}
.hero__content > * { position: relative; }
.hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(46px, 8vw, 124px);
  line-height: 1.04;
  letter-spacing: 0.02em;
  color: #F6F0E4;
  display: flex; align-items: baseline; gap: 0.28em; justify-content: flex-start; flex-wrap: wrap;
}
.hero__word { display: inline-block; opacity: 0; }
.hero__word--left { animation: heroFromLeft 1.2s var(--ease) .2s forwards; }
.hero__word--amp { font-weight: 300; animation: heroAmp .8s cubic-bezier(.34,1.4,.5,1) 1.15s forwards; }
.hero__word--right { font-weight: 300; animation: heroFromRight 1.2s var(--ease) .2s forwards; }
/* Helle Wörter (& Co) auf dem Foto-Hero lesbar halten. */
.hero__word--amp, .hero__word--right { text-shadow: 0 2px 16px rgba(28,20,10,0.55); }
.hero__gold {
  display: inline-block;
  background-image: linear-gradient(115deg,#8A6A2F 0%,#C9A24B 14%,#F3DFA0 27%,#B58A34 40%,#E8CC7E 52%,#9C7526 65%,#DDBB63 78%,#F0DA96 88%,#A37D2E 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 1px rgba(255,248,222,0.35), 0 2px 6px rgba(90,64,18,0.28);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.25));
  animation: goldSheen 9s ease-in-out infinite;
}
/* Andrea, Runde 12 (E-054): Überschrift über dem Satz — auf ALLEN Geräten sichtbar,
   weil sie erklärt, was das Video zeigt. */
.hero__headline {
  margin: 22px 0 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(22px, 2.3vw, 34px); line-height: 1.25; max-width: 640px;
  color: #FBF6EC; text-shadow: 0 1px 12px rgba(28,20,10,0.65);
  opacity: 0; animation: heroFadeIn 1s ease-out 1.5s forwards;
}
.hero__subtitle {
  margin: 14px 0 0; font-size: 16px; line-height: 1.6; max-width: 640px;
  letter-spacing: 0.02em; color: #EEE7D9; text-shadow: 0 1px 10px rgba(28,20,10,0.6);
  opacity: 0; animation: heroFadeIn 1s ease-out 1.7s forwards;
}
.hero__cta {
  pointer-events: auto; margin-top: 38px; display: inline-block;
  background: var(--color-text); color: #fff; padding: 17px 40px;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; animation: heroFadeIn 1s ease-out 2.1s forwards;
  transition: background .25s ease;
}
.hero__cta:hover { background: var(--color-gold); color: #fff; }
/* Andrea 26.09.: brühl-Logo im Anfangsbild — das Sofa im Video ist das roro.
   Klein und ruhig unten rechts, von Anfang an sichtbar (auch während das Video
   läuft), damit es neben dem Sofa & Co-Logo nicht konkurriert. */
/* E-057: Kennzeichnung nach EU-KI-Verordnung Art. 50 — Video und Titelbild sind KI-erzeugt.
   Klein oben links, von Anfang an sichtbar und bleibt (auch das Schlussbild ist KI-erzeugt). */
/* E-073 (Andrea 03.10.): untere Bildhälfte — rechts direkt über „roro von brühl“; links unten stößt er mobil an den Knopf. */
.hero__ki {
  position: absolute; right: var(--pad-x); bottom: calc(clamp(20px, 3.2vh, 34px) + 30px); margin: 0; z-index: 2;
  padding: 5px 10px; border-radius: 3px; background: rgba(30,25,18,0.42);
  font-size: 11px; letter-spacing: 0.08em; color: #F6F0E4; pointer-events: none;
}
.hero__marke {
  position: absolute; right: var(--pad-x); bottom: clamp(20px, 3.2vh, 34px);
  display: flex; align-items: center; gap: 10px;
  color: #F6F0E4; text-decoration: none;
  opacity: 0; animation: heroFadeIn 1.2s ease-out .6s forwards;
  filter: drop-shadow(0 1px 8px rgba(28,20,10,0.45));
  transition: filter .3s ease;
}
.hero__marke-text {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1;
}
.hero__marke-logo { height: 17px; width: auto; display: block; }
.hero__marke:hover { filter: drop-shadow(0 1px 10px rgba(28,20,10,0.7)); }

/* ---------- Sections & Typografie ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: var(--pad-section) var(--pad-x); }
.section--narrow { max-width: var(--maxw-narrow); }
.section--text { max-width: var(--maxw-text); }
.section--soft { background: var(--color-soft); }
.section--dark { background: var(--color-dark); color: var(--color-light); }
.section--dark .eyebrow { color: var(--color-gold-light); }
.section--sand { background: var(--color-sand); color: var(--color-text); }
.section--center { text-align: center; }
.section--tight-top { padding-top: 0; }

.eyebrow {
  margin: 0 0 18px; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-gold);
}
.heading {
  margin: 0 0 10px; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(38px, 4.2vw, 58px); line-height: 1.1;
}
.heading--hero { font-size: clamp(38px, 4.5vw, 60px); text-wrap: balance; }
.heading--section { font-size: clamp(36px, 4vw, 54px); }
.heading--big { font-size: clamp(40px, 5vw, 68px); line-height: 1.1; text-wrap: balance; }
.heading--medium { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.15; }
.designer { margin: 0 0 26px; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted); }
.lede { margin: 0 auto 40px; font-size: 16px; line-height: 1.7; color: var(--color-muted); max-width: 70ch; }
.lede--plain { margin: 0; }
p.body-text { margin: 0 0 18px; font-size: 16px; line-height: 1.7; color: var(--color-muted); }
p.body-text:last-of-type { margin-bottom: 32px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 15px 34px; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; transition: background .25s ease, color .25s ease, border-color .25s ease;
  border: 1px solid transparent; cursor: pointer;
}
.btn--dark { background: var(--color-text); color: #fff; }
.btn--dark:hover { background: var(--color-gold); color: #fff; }
.btn--outline { border-color: var(--color-text); color: var(--color-text); background: transparent; }
.btn--outline:hover { background: var(--color-text); color: #fff; }
.btn--outline-light { border-color: #fff; color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--color-text); }
.btn--lg { padding: 17px 40px; }
.btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* ---------- Model-Reihe (Bild + Text) ---------- */
.model-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center;
  margin-bottom: 56px;
}
.model-row__media--reverse { order: 1; }
.model-row__text--reverse { order: 2; }
.model-group__intro { text-align: center; margin-bottom: 40px; }
.model-group__intro .eyebrow, .model-group__intro .heading, .model-group__intro .designer { text-align: center; }

/* ---------- Modell-Sektion untereinander (Name → Bild → Hinweis → Text) ---------- */
.model-head { text-align: center; max-width: 820px; margin: 0 auto 32px; }
.product-media--wide {
  max-width: 1100px; margin: 0 auto; border-radius: 2px; overflow: hidden;
}
.product-media--wide img {
  width: 100%; height: auto; display: block; transition: transform 1.1s var(--ease);
}
.product-media--wide:hover img { transform: scale(1.045); }
/* Hinweis unter den Modellbildern (Wunsch der Inhaberin): Er soll dem Kunden
   ins Auge fallen, steht also KRAEFTIGER als der Fliesstext darunter — nicht
   blasser. Deshalb Textfarbe statt Muted und etwas mehr Luft. */
.config-note {
  max-width: 720px; margin: 40px auto 8px; text-align: center;
  font-family: var(--font-serif); font-size: 22px; line-height: 1.55;
  color: var(--color-text);
}
/* Überschrift über einem Konfigurations-Hinweis (z. B. alba, E-025). Sie sitzt
   außerhalb von .model-head und braucht deshalb ihre eigene Zentrierung —
   mit .eyebrow allein stünde sie linksbündig unter dem zentrierten Kopfblock. */
.config-note__title {
  max-width: 720px; margin: 40px auto 10px; text-align: center;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gold);
}
.config-note__title + .config-note { margin-top: 0; }
.config-note + .config-note { margin-top: 18px; }

.model-text { max-width: 820px; margin: 36px auto 0; }
.model-text .btn { margin-top: 20px; }
/* Sichtbarer Abstand zwischen zwei Modellblöcken (E-041, Andreas Runde 7:
   Der Knopf „Im Showroom probeliegen" klebte ohne Luft an der Überschrift
   des nächsten Modells). Gilt gleich für Signet und Dienne — mit oder
   ohne Knopf; .model-block gibt es nur in diesen beiden Sektionen. */
.model-block + .model-block { margin-top: 56px; }

/* ---------- Produktmedien (Hover-Video-Hook, Lightbox) ---------- */
.product-media {
  position: relative; margin: 0; background: var(--color-soft); overflow: hidden;
}
.product-media--on-soft { background: #fff; }
.product-media img {
  width: 100%; height: auto; display: block; cursor: zoom-in;
  transition: transform 1.1s var(--ease);
}
.product-media:hover img { transform: scale(1.05); }
.product-media--hero img { transition: transform 1.1s var(--ease); }
.product-media--hero:hover img { transform: scale(1.045); }
.product-media__hover-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.product-media__hover-video.is-active { opacity: 1; }
/* E-061: KI-Hinweis wie beim Startvideo (E-057) auch für die KI-erzeugten Mitsubishi-Videos.
   Hover-Karten: nur sichtbar, solange das Video läuft (Standbild = erstes Videobild = Broschürenfoto);
   Stimmungsvideo: dauerhaft (--immer). */
.media-ki {
  position: absolute; left: 12px; top: 12px; margin: 0; z-index: 2;
  padding: 4px 8px; border-radius: 3px; background: rgba(30,25,18,0.42);
  font-size: 11px; letter-spacing: 0.08em; color: #F6F0E4; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.product-media.is-playing .media-ki, .media-ki--immer { opacity: 1; }
.media-caption { margin: 0; padding-top: 14px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-align: center; }
.media-stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Galerien ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
}

/* ---------- Video-Feature (Verwandlungs-Clips) ---------- */
.feature-video { margin-bottom: 56px; background: var(--color-soft); overflow: hidden; }
.feature-video .media-caption { padding: 18px 24px; }
.feature-video--on-soft { background: #fff; }

/* ---------- Schlafsofa-Sektionen (Signet & Dienne, Auftrag S2) ---------- */
/* Ausziehvideo (Signet): volle Inhaltsbreite im bekannten feature-video-Rahmen;
   das Seitenverhältnis steht je Video im style-Attribut, damit vor dem
   Nachladen kein Sprung entsteht. */
.feature-video video { display: block; width: 100%; }
/* In den Schlafsofa-Blöcken nicht über die volle Inhaltsbreite: Das 4:3-Video
   von Good Life wäre sonst am Desktop höher als der Bildschirm. */
.model-block .feature-video { max-width: 840px; margin-inline: auto; }
/* Bildpaar Tag/Nacht (Dienne): zwei gleich hohe Fotos nebeneinander,
   unter 640 px untereinander. */
.media-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 1100px; margin: 0 auto;
}
.media-pair .product-media img {
  width: 100%; aspect-ratio: 40 / 26; object-fit: cover;
}
.media-pair .media-caption { padding: 14px 12px 16px; }
@media (max-width: 640px) {
  .media-pair { grid-template-columns: 1fr; }
}
/* „Auf einen Blick" — kompakte Eckdatenliste unter dem Modelltext. */
.auf-einen-blick { margin-top: 28px; }
.auf-einen-blick__titel {
  margin: 0 0 12px; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-gold);
}
.auf-einen-blick__liste { margin: 0; display: grid; gap: 6px; }
/* Zwei feste Spalten: Bezeichnung links, Wert rechts (bricht in seiner
   Spalte um). Vorher rutschte ein langer Wert mobil unter die Bezeichnung,
   ein kurzer nicht — die Liste wirkte zerrissen. */
.auf-einen-blick__liste > div {
  display: grid; grid-template-columns: 8.5em 1fr; align-items: baseline; gap: 14px;
}
.auf-einen-blick__liste dt {
  font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted);
}
.auf-einen-blick__liste dd { margin: 0; font-size: 15px; line-height: 1.5; }

/* ---------- Ausklappbare Kollektions-Galerien ---------- */
.collection-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: var(--color-soft); border: 1px solid rgba(38,34,28,0.15); padding: 26px 32px;
  cursor: pointer; font-family: inherit; transition: background .3s ease;
}
.collection-toggle:hover { background: #F0EBE1; }
.collection-toggle__label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.collection-toggle__title { font-family: var(--font-serif); font-size: 26px; color: var(--color-text); }
.collection-toggle__count { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.collection-toggle__chevron {
  font-size: 22px; color: var(--color-text); transition: transform .5s var(--ease);
  transform: rotate(0deg);
}
.collection-toggle.is-open .collection-toggle__chevron { transform: rotate(180deg); }

.collection-panel {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease);
}
.collection-panel.is-open { grid-template-rows: 1fr; }
.collection-panel__inner { overflow: hidden; }
.collection-panel__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px;
  opacity: 0; transform: translateY(-16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.collection-panel.is-open .collection-panel__grid { opacity: 1; transform: translateY(0); transition-delay: .15s; }

/* ---------- Karussell (Bildband Möbelgruppen) ---------- */
.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;                              /* Firefox: Scrollbar unsichtbar */
  /* Der frühere Rand-Verlauf (weiße Ausblendung links/rechts) ist entfernt:
     Mit object-fit:contain stehen Motive wieder an der Bildkante, und genau
     die hat der Verlauf abgeschnitten (Andreas Runde 6, Bilder 10–14). */
}
.carousel__track::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.carousel__item {
  flex: 0 0 clamp(240px, 42vw, 340px);
  scroll-snap-align: start;
}

/* Einheitliche Bildhöhe im Band (nur Karussell-Items – Panel- und Hero-Bilder unangetastet) */
.carousel__item.product-media { aspect-ratio: 4 / 3; }
/* Ganzes Foto statt Ausschnitt (Andrea Runde 6: „gesamtes Bild zeigen"):
   contain auf weißem Grund — Freisteller laufen nahtlos weiter, Milieufotos
   erhalten gleichmäßige Ränder. Kein Verzerren; Querformat bleibt breit. */
.carousel__item { background: #fff; }
.carousel__item img { width: 100%; height: 100%; object-fit: contain; }

/* Runder Pfeil-Button */
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-gold);
  color: var(--color-text);
  box-shadow: 0 4px 14px rgba(38,34,28,0.12);
  z-index: 3;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease;
}
.carousel__nav--prev { left: -23px; }
.carousel__nav--next { right: -23px; }
.carousel__nav[hidden],
.carousel__nav:disabled { display: none; }
.carousel__nav:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* Pfeile auf allen Geräten (E-049). Bis 28.09. waren sie auf Touch-Geräten
   ausgeblendet — auf Handy und iPad zeigte nur der Anschnitt des nächsten
   Bildes, dass das Band weitergeht, und den übersah man. Gold-Hover nur mit
   Maus, sonst bleibt der Knopf nach dem Antippen gold stehen. */
@media (hover: hover) and (pointer: fine) {
  .carousel__nav:hover { background: var(--color-gold); color: #fff; }
  .category-card:hover .category-card__media img { transform: scale(1.05); }
}
/* Touch: etwas kleiner und innerhalb des Bandes, damit nichts über den
   Bildschirmrand ragt. */
@media (hover: none), (pointer: coarse) {
  .carousel__nav { width: 38px; height: 38px; font-size: 19px; }
  .carousel__nav--prev { left: 8px; }
  .carousel__nav--next { right: 8px; }
}

/* ---------- Platzhalter-Kacheln (fehlende Fotos) ---------- */
.placeholder-tile {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #ECE7DD, #ECE7DD 10px, #E4DED1 10px, #E4DED1 20px);
  border: 1px dashed rgba(38,34,28,0.25); color: var(--color-muted);
  font-size: 13px; letter-spacing: 0.08em; text-align: center; padding: 20px;
}
.placeholder-tile--sq { aspect-ratio: 1 / 1; }
.placeholder-tile--3-4 { aspect-ratio: 3 / 4; }
.placeholder-tile--more {
  background: var(--color-soft); border: 1px dashed rgba(38,34,28,0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 4 / 3; color: var(--color-muted); text-align: center; padding: 20px;
}
.placeholder-tile--more strong { font-family: var(--font-serif); font-size: 20px; color: var(--color-text); font-weight: 400; }
.placeholder-tile--more span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Zweispaltige Text+Foto-Sektion (#marke), mobil untereinander ---------- */
/* Ersetzt das frühere Inline-Grid, damit mobil einspaltig folgt (Runde 6,
   Bild 17: das Manufaktur-Foto stand dort winzig in der halben Spalte). */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center; }
/* Manufaktur-Foto (Hochformat 891×1600): object-position 50 % 88 % hält
   Nadel und beide Hände (Original y ≈ 400–1560) im Ausschnitt. */
.marke-foto { margin: 0; aspect-ratio: 2 / 3; overflow: hidden; }
.marke-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 88%; display: block; }
@media (max-width: 980px) {
  .split-row { grid-template-columns: 1fr; }
  .marke-foto {
    width: 100%; max-width: 360px; margin: 0 auto;
    aspect-ratio: 7 / 10; max-height: 480px;
  }
}

/* ---------- Film-Blöcke (brühl-Filme selbst gehostet, E-037) ---------- */
/* Das Seitenverhältnis steht je Film als --film-ratio im style-Attribut —
   so ist die Höhe reserviert, bevor die Videodatei anfängt zu laden.
   Native Steuerelemente (controls), kein Autoplay; Filme ohne Ton tragen
   das muted-Attribut im HTML. */
.film {
  position: relative; width: 100%; overflow: hidden;
  aspect-ratio: var(--film-ratio, 16/9); background: #14110D;
}
.film video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: contain; background: #14110D;
}

/* Zwei Hochformat-Filme nebeneinander (E-052, moule): auf jedem Gerät
   zwei Spalten, zusammen höchstens 560 px breit — so bleibt jeder Film
   unter ~500 px hoch und die Seite wird nicht endlos lang. */
.feature-video--paar { padding: 20px 20px 0; }
.film-paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 560px; margin-inline: auto;
}
.film-paar .film { background: #fff; }
.film-paar .film video { background: #fff; }
.feature-video--paar .media-caption { text-align: center; }

/* ---------- Kategorien (Kollektions-Übersicht) ---------- */
/* Beschriftung ÜBER dem Foto (Wunsch der Inhaberin): Die Karte ist eine
   Flex-Spalte, das Bild sitzt mit margin-top:auto am Kartenende — so bleiben
   die sechs Fotos im Raster auch bei ungleicher Texthöhe bündig. */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.category-card { display: flex; flex-direction: column; text-align: center; }
.category-card__media { margin: auto 0 0; aspect-ratio: 3 / 4; overflow: hidden; }
.category-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease);
}
.category-card__eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin: 16px 0 6px; }
.category-card__title { font-family: var(--font-serif); font-size: 24px; margin: 0 0 4px; }
/* Erklärende Zeile zwischen Titel und Foto (E-032, Runde 5): klein und ruhig.
   min-height hält alle Noten gleich hoch, damit die Fotos einer Reihe bündig
   beginnen (das Foto sitzt ohnehin unten mit margin-top:auto). */
.category-card__note {
  margin: 0 0 14px;
  min-height: 2.9em;
  font-size: 13.5px; line-height: 1.45;
  color: var(--color-muted);
}

/* ---------- Leistungen ---------- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.service-card { background: #fff; padding: 44px 38px; display: flex; flex-direction: column; gap: 18px; }
.service-card__title { margin: 0; font-family: var(--font-serif); font-size: 30px; font-weight: 400; }
.service-card__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--color-muted); flex: 1; }
.service-card__cta { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); border-bottom: 1px solid var(--color-gold); align-self: flex-start; padding-bottom: 3px; }

/* ---------- Kundenstimmen (R6-3 / E-039: fünf Google-Bewertungen als fester Text) ---------- */
/* Seit E-050 (Andrea, Runde 11: „dunkle Farbe nicht so freundlich“) auf
   warmem Sandton statt dunkel, alle zehn Bewertungen der alten Seite.
   Ruhig und hochwertig: Serif-Zitate, die typografischen
   Anführungszeichen kommen per ::before/::after aus dem Layout — die Zitate
   selbst stehen zeichengenau wie in der Quelle (Gate 18 prüft das). */
.stimmen-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 52px 36px; max-width: 1240px; margin: 0 auto;
}
.stimme {
  margin: 0; flex: 0 0 calc((100% - 72px) / 3);
  display: flex; flex-direction: column; align-items: flex-start;
  border-top: 1px solid rgba(154,123,79,0.35); padding-top: 26px;
}
.stimme__sterne {
  font-size: 14px; letter-spacing: 0.22em; color: var(--color-gold);
}
.stimme__text {
  margin: 16px 0 0;
  font-family: var(--font-serif); font-size: 21px; font-weight: 400; line-height: 1.55;
  color: var(--color-text);
}
.stimme__text p { margin: 0; display: inline; }
.stimme__text::before { content: "„"; }
.stimme__text::after { content: "“"; }
.stimme__name {
  margin-top: 18px; font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text);
}
.stimme__quelle {
  margin: 5px 0 0; font-size: 12px; letter-spacing: 0.08em;
  color: var(--color-muted);
}
@media (max-width: 980px) {
  .stimme { flex: 0 0 calc((100% - 36px) / 2); }
}
@media (max-width: 640px) {
  .stimme { flex: 0 0 100%; }
}

/* ---------- Sonderangebote (R6-4 / E-040, vier Karten seit E-045 / R8-1) ---------- */
/* Vier Produktkarten (Rechner: 2 × 2 nebeneinander, Handy untereinander) auf
   weichem Grund — ruhig und hochwertig, kein SALE-Badge, kein %-Rabatt. Fotos
   stehen ganz im Rahmen (object-fit: contain auf Weiß), kein Beschnitt der
   Möbel. */
.sonder-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  max-width: 1240px; margin: 0 auto;
}
@media (min-width: 981px) {
  .sonder-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.sonder-karte {
  background: #fff; border: 1px solid rgba(154,123,79,0.28);
  display: flex; flex-direction: column;
}
/* Fotos in voller Kartenbreite im eigenen Seitenverhältnis — kein fester
   Rahmen, keine weißen Ränder. Sehr unterschiedliche Formate (Alba fast
   quadratisch, Four Two/Moule hochkant, ARVA sehr breit plus Ansichten):
   align-items:start lässt jede Karte ihre eigene Höhe behalten, damit keine
   großen leeren weißen Flächen entstehen; margin-top:auto setzt den
   Preisblock an den jeweiligen Kartenboden (E-045 / R8-1). */
.sonder-karte__bild { margin: 0; }
.sonder-karte__bild img,
.sonder-karte__ansichten img { width: 100%; height: auto; object-fit: contain; display: block; }
.sonder-karte__ansichten { margin: 0; }
.sonder-karte__ansichten img { height: auto; }
.sonder-karte__body {
  padding: 30px 34px 34px; border-top: 1px solid rgba(154,123,79,0.28);
  display: flex; flex-direction: column; flex: 1;
}
.sonder-karte__titel {
  margin: 0; font-family: var(--font-serif); font-weight: 500;
  font-size: 30px; line-height: 1.2;
}
.sonder-karte__typ {
  margin: 8px 0 0; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-gold);
}
.sonder-karte__text { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--color-muted); }
.sonder-karte__liste {
  margin: 16px 0 0; padding: 0; list-style: none;
  font-size: 15px; line-height: 1.75; color: var(--color-muted);
}
.sonder-karte__liste li { padding-left: 20px; position: relative; }
.sonder-karte__liste li::before { content: "—"; position: absolute; left: 0; color: var(--color-gold); }
.sonder-karte__preise {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(38,34,28,0.08);
}
/* Mindestabstand des Preisblocks zum Inhalt darüber (margin-top:auto drückt
   ihn an den Kartenboden, das Element davor hält den Mindestabstand). */
.sonder-karte__body > :nth-last-child(2) { margin-bottom: 22px; }
/* Ausgestellter Preis: normal, kleiner, gedämpft — ausdrücklich NICHT
   durchgestrichen (Andreas Vorstellung, R6-4). */
.sonder-karte__preis-alt { margin: 0; font-size: 14px; letter-spacing: 0.02em; color: var(--color-muted); }
.sonder-karte__preis {
  margin: 6px 0 0; font-family: var(--font-serif); font-weight: 500;
  font-size: 27px; color: var(--color-text);
}
@media (max-width: 600px) {
  /* Handy: Preiszeile passt in eine Zeile, kein allein umbrechendes „€" */
  .sonder-karte__preis { font-size: 22px; }
}
.sonder-karte__hinweis { margin: 8px 0 0; font-size: 12.5px; letter-spacing: 0.04em; color: var(--color-muted); }

/* ---------- Kontakt-Infoblock ---------- */
.contact-block {
  margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(38,34,28,0.12);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px;
  font-size: 13.5px; color: var(--color-muted); letter-spacing: 0.02em;
}
.contact-block a { color: var(--color-text); }
.contact-block a:hover { color: var(--color-gold); }

/* ---------- Footer ---------- */
.footer { background: var(--color-dark); color: rgba(245,241,234,0.75); }
.footer__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad-x);
  display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
}
.footer__brand { display: flex; flex-direction: column; gap: 6px; }
.footer__name { font-family: var(--font-serif); font-size: 22px; color: var(--color-light); }
.footer__address { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.footer__links { display: flex; gap: 24px; font-size: 13px; flex-wrap: wrap; align-items: center; }
.footer__links a { color: rgba(245,241,234,0.75); }
.footer__links a:hover { color: #fff; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(24,20,15,0.88);
  backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center;
  padding: 48px; cursor: zoom-out; animation: lightboxBg .35s ease-out;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 100%; max-height: 100%; object-fit: contain; background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45); animation: lightboxImg .55s var(--ease);
}
.lightbox__close {
  position: absolute; top: 26px; right: 34px; color: rgba(255,255,255,0.85);
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.lightbox__close:hover { color: #fff; }
.lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.lightbox__close-x { font-size: 26px; line-height: 1; }

/* Produktbild als Tastatur-Trigger für die Lightbox */
.product-media img[role="button"]:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* ---------- Knopf „Zur Übersicht" (E-028, R4-1) ---------- */
/* Mitlaufende Milchglas-Pille nach Andreas Vorlage, rechts unten fixed.
   z-index 45: bewusst UNTER der Kopfleiste (50, dort klappt das Menü auf)
   und der Lightbox (200). Grundzustand unsichtbar; sichtbar per .is-visible
   (setzt js/app.js, sobald #kollektion oben aus dem Bild gescrollt ist). */
.to-overview {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 20px 7px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(38,34,28,0.22);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity .35s var(--ease),
    transform .35s var(--ease),
    visibility 0s linear .35s;
}
.to-overview.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity .35s var(--ease),
    transform .35s var(--ease),
    visibility 0s;
}
.to-overview:hover,
.to-overview:focus-visible {
  color: var(--color-text);
  background: rgba(255,255,255,0.92);
  transform: translateY(-2px);
}
.to-overview:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.to-overview__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(38,34,28,0.14);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.to-overview__icon svg { display: block; }

/* Ankersprung des Knopfs: Ohne scroll-margin-top landete die #kollektion-
   Oberkante im Messlauf bei 0,14px (Desktop) bzw. 0,38px (mobil) — genau
   HINTER der klebenden Kopfleiste (85px bzw. 65px hoch inkl. Rand).
   Der Versatz hebt die Sektion genau auf deren Unterkante. */
#kollektion { scroll-margin-top: 85px; }
@media (max-width: 980px) {
  #kollektion { scroll-margin-top: 65px; }
}

@media (max-width: 600px) {
  .to-overview {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 9px;
    padding: 6px 15px 6px 6px;
    font-size: 11px;
    letter-spacing: 0.18em;
    box-shadow: 0 8px 22px rgba(38,34,28,0.26);
  }
  .to-overview__icon { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .to-overview,
  .to-overview.is-visible,
  .to-overview:hover,
  .to-overview:focus-visible {
    transform: none;
    transition: none;
  }
}

/* ---------- Reveal-on-Scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.2,.65,.25,1), transform .9s cubic-bezier(.2,.65,.25,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-media {
  opacity: 0; transform: translateY(56px) scale(0.96);
  transition: opacity 1.2s cubic-bezier(.16,.6,.2,1), transform 1.2s cubic-bezier(.16,.6,.2,1);
}
.reveal-media.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-media, .hero__word, .hero__headline, .hero__subtitle, .hero__cta, .hero__marke { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .carousel__track { scroll-behavior: auto; }
  .nav, .nav-toggle span, .category-card__media img { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  :root { --pad-section: 76px; --pad-x: 26px; --gap-lg: 40px; }
  /* Hero mobil: kompakter Schriftzug unten, damit das Wandtattoo im
     Hochkant-Video frei bleibt (der lange Untertitel entfällt hier). */
  .hero__title { font-size: clamp(40px, 11vw, 56px); }
  .hero__subtitle { display: none; }
  .hero__content { padding-bottom: clamp(32px, 6vh, 64px); }
  .header__inner { height: 64px; padding: 0 var(--pad-x); gap: 20px; }
  .model-row { grid-template-columns: 1fr; }
  .model-row .product-media--hero { aspect-ratio: 4 / 3; }
  .model-row .product-media--hero img { width: 100%; height: 100%; object-fit: cover; }
  .model-row__media--reverse,
  .model-row__text--reverse { order: initial; }
  .hero__media { height: 66vh; min-height: 460px; }
  .footer__inner { text-align: center; justify-content: center; }
}

/* ---------- R6-3 / E-038: Burger-Navigation bis NAV_MAX (1390 px, R6-4) ---------- */
/* Gemessen (Playwright, R6-4 am 17.09.): mit dem zehnten Eintrag
   („Sonderangebote", Andreas Platz 8) reicht der Platz bis 1600 px nirgends —
   der Kopfbereich ist auf --maxw 1360 px gedeckelt (1272 px Inhalt), das
   echte Logo ist 169,6 px breit, und die Menüzeile braucht 1077 px. Deshalb
   wurden die Abstände maßvoll verengt (Nav 22 → 16 px, Logo↔Menü 32 → 24 px;
   Schrift blieb 12.5px): Einzeilen-Breite jetzt 1341 px (88 Padding +
   169,6 Logo + 24 Abstand + 1059 Menü). Grenze NAV_MAX = 1341 px + Reserve
   ≥ 40 px → gewählt 1390 px. NUR die Navigation folgt dieser Grenze: das
   übrige Layout wechselt weiter bei 980 px, und die Kopfleiste behält
   oberhalb von 980 px ihre Desktop-Höhe (85 px), mit der E-034 rechnet. */
@media (max-width: 1390px) {
  .nav-toggle {
    width: 44px; height: 44px; margin-left: auto; padding: 10px; border: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    color: var(--color-text); background: transparent; cursor: pointer;
  }
  .nav-toggle span {
    width: 24px; height: 2px; display: block; background: currentColor;
    transition: transform .3s var(--ease), opacity .2s ease;
  }
  .header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: absolute; top: 100%; left: 0; width: 100%; padding: 12px var(--pad-x) 20px;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(255,255,255,0.98); box-shadow: 0 12px 24px rgba(38,34,28,0.12);
    visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: visibility 0s linear .3s, opacity .3s ease, transform .3s var(--ease);
  }
  .nav.is-open {
    visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0);
    transition-delay: 0s;
  }
  .nav__link {
    min-height: 44px; padding: 10px 0; display: flex; align-items: center; justify-content: center;
  }
  .nav__cta { margin-top: 8px; }
}
@media (max-width: 640px) {
  .hero__title { gap: 0.18em; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { text-align: center; }
  .collection-toggle { padding: 20px; }
  .service-card { padding: 32px 26px; }
  .carousel__item { flex-basis: 78vw; }
}

/* Mitsubishi Diamond-Serie */
.klima-ambient { position: relative; max-width: 960px; margin: 0 auto 40px; background: var(--color-soft); }
.klima-ambient video { width: 100%; height: auto; display: block; }
.klima-mitsubishi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) {
  .klima-mitsubishi-grid { grid-template-columns: 1fr; }
}

/* ---------- Kollektion: Kachelraster mit mittiger Restreihe ---------- */
/* Sechs Kacheln (E-032, Runde 5: „Stühle & Tische" zusammengeführt) ergeben
   zwei volle Dreierreihen. Damit das auch bei ungeraden Anzahlen bleibt,
   laufen die Kacheln ab 600 px als umbrechende Flex-Zeile mit fester
   Spaltenbreite (2 bzw. ab 1000 px 3 je Reihe); eine unvollständige letzte
   Reihe steht mittig. Darunter bleibt das einspaltige Raster. */
@media (min-width: 600px) {
  .category-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .category-grid > .category-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (min-width: 1000px) {
  .category-grid > .category-card { flex-basis: calc((100% - 48px) / 3); }
}

/* ---------- Kachel-Platzhalter (Sortiment ohne Foto) ---------- */
.category-card__media--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, #F7F4EF, #ECE6DB);
  border: 1px solid rgba(154,123,79,0.22);
}
.category-card__placeholder-note {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  letter-spacing: 0.02em; color: var(--color-muted);
}

/* ---------- Badge („Bald bei uns") ---------- */
.badge {
  display: inline-block; padding: 7px 18px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gold); border: 1px solid rgba(154,123,79,0.4);
  background: rgba(154,123,79,0.06);
}

/* ---------- Kompakte Sektion (weniger Höhe, z. B. Teaser) ---------- */
.section--compact { padding-top: 76px; padding-bottom: 76px; }

/* ---------- W1: Echtes Logo im Header ---------- */
.brand__logo { height: 64px; width: auto; display: block; }

/* ---------- W1: Echtes Logo im Hero (Eroeffnungsvideo) ---------- */
.hero__logo {
  width: min(420px, 62vw); height: auto; display: block;
  /* Weicher heller Traeger, damit der Schriftzug auf dem hellen
     Videobild lesbar bleibt — kein Kasten, kein Verlaufsbalken. */
  filter: drop-shadow(0 2px 18px rgba(255,255,255,.85))
          drop-shadow(0 1px 3px rgba(255,255,255,.9));
}

/* ---------- W1: Bilderband unter dem Video (wie im Schaufenster) ---------- */
.brandband { overflow: hidden; background: var(--color-soft); padding: 28px 0; }
.brandband__track {
  display: flex; width: max-content;
  animation: brandband-run 75s linear infinite;
}
/* Abstand als margin-right (NICHT gap): nur so ist die halbe Trackbreite
   exakt eine Kachelperiode — mit gap fehlt an der Naht ein halber Abstand
   und das Band springt bei jedem Durchlauf sichtbar. */
.brandband__tile {
  flex: 0 0 auto; margin: 0 14px 0 0; width: 200px; height: 200px;
  border-radius: 2px; overflow: hidden;
}
.brandband__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Die 15 Kacheln laufen doppelt im Track; -50% verschiebt exakt auf die
   zweite Kopie — dadurch springt das Band am Loop-Punkt nicht sichtbar. */
@keyframes brandband-run {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

/* ---------- W1: Drei Saeulen (Leistungen im Ueberblick) ---------- */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; max-width: 1180px; margin: 0 auto; align-items: start;
}
.pillar__label {
  margin: 0 0 14px; font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--color-gold);
}
.pillar__title {
  margin: 0 0 12px; font-family: var(--font-serif); font-weight: 400;
  font-size: 26px; line-height: 1.2;
}
.pillar__lede { margin: 0; font-size: 15px; line-height: 1.7; color: var(--color-muted); }
.pillar__list { list-style: none; padding: 0; margin: 18px 0 0; }
.pillar__list li {
  position: relative; padding: 0 0 0 22px;
  font-size: 15px; line-height: 1.7; color: var(--color-muted);
}
.pillar__list li + li { margin-top: 14px; }
.pillar__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold);
}
.pillar__list strong { color: var(--color-text); font-weight: 600; }
/* Andrea, Runde 13 (E-055): VR-Raumplanung mit Kooperationspartner Radam Haustechnik —
   ruhige Zeile unter der Liste, Logo freigestellt auf dem cremefarbenen Grund. */
.pillar__partner {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(154,123,79,0.28);
  font-size: 14px; line-height: 1.6; color: var(--color-muted);
}
.pillar__partner-logo { display: block; width: min(220px, 60%); height: auto; margin-top: 12px; }
.intro-outro { text-align: center; max-width: 760px; margin: 56px auto 0; }

/* ---------- W1: Responsive ---------- */
@media (max-width: 980px) {
  .brand__logo { height: 38px; }
  .hero__logo { width: min(300px, 72vw); }
}
/* E-054, Handy: Die Frau sitzt im Hochkant-Schlussbild mittig — Textblock klein
   und tief, damit ihr Gesicht frei bleibt; Abdunklung von unten statt von links. */
@media (max-width: 599px) {
  .hero__logo { width: min(210px, 54vw); }
  /* E-062 (Fatih 03.10.): Handy zeigt vom 9:16-Video nur ~80 % der Höhe. Stehend/beim Brille-Abnehmen
     reicht die Frau bis an die Oberkante — oben ausrichten, Kopf vor Füßen. Titelbild gleich, sonst springt
     das Bild am Videoende. */
  .hero__video, .hero__img { object-position: 50% 0%; }
  .hero__headline { font-size: 19px; margin-top: 10px; max-width: 86vw; }
  .hero__cta { margin-top: 16px; padding: 12px 26px; font-size: 11.5px; }
  .hero__content { padding-bottom: 50px; }   /* Knopf endet über „roro von brühl“ (E-047) */
  .hero__content::before {
    background: linear-gradient(0deg, rgba(30,25,18,0.62) 0%, rgba(30,25,18,0.38) 26%, rgba(30,25,18,0) 48%);
  }
  .hero__marke { gap: 8px; }
  /* E-073: rechts über der Marke stößt der Hinweis an den Knopf — hier links in der Zeile von „roro von brühl“. */
  .hero__ki { left: var(--pad-x); right: auto; bottom: clamp(20px, 3.2vh, 34px); font-size: 10px; padding: 4px 8px; }
  .hero__marke-text { font-size: 10px; letter-spacing: 0.2em; }
  .hero__marke-logo { height: 14px; }
  /* E-068 (Andrea Runde 17: „zu angeschnitten“): Rahmen = Seitenverhältnis des Handy-Videos (1080×1228),
     damit object-fit: cover nichts mehr abschneidet. */
  .hero__media { height: auto; min-height: 0; aspect-ratio: 1080 / 1228; }
  /* E-068: Bilderband auf dem Handy — kein Laufband, wischbar mit Einrasten, genau drei ganze Kacheln,
     links/rechts 10 px Rand wie zwischen den Kacheln. Die zweite Hälfte des Tracks (Duplikate für die
     Endlosschleife des Laufbands) entfällt hier. Pfeil und Selbst-Weiterrücken: initBrandbandMobil. */
  .brandband { padding: 18px 0; position: relative; }
  .brandband__track {
    width: auto; animation: none; overflow-x: auto; padding: 0 0 0 10px;
    scroll-snap-type: x mandatory; scroll-padding-left: 10px; scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .brandband__track::-webkit-scrollbar { display: none; }
  .brandband__tile {
    width: calc((100vw - 40px) / 3); height: calc((100vw - 40px) / 3); margin-right: 10px;
    scroll-snap-align: start;
  }
  .brandband__tile:nth-child(n+18) { display: none; }
  .brandband__nav:not([hidden]) { display: flex; }
  .brandband__nav { right: 8px; top: 50%; }
}
@media (max-width: 999px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ---------- W1: Ruhende Nutzer (Barrierefreiheit) ---------- */
@media (prefers-reduced-motion: reduce) {
  .brandband__track { animation: none; }
  .brandband { overflow-x: auto; }
}
.brandband__nav { display: none; }   /* nur Handy (< 600 px), siehe dort */

/* ---------- R5-1 / E-034: Erster Bildschirm auf dem Rechner (>980 px) ---------- */
/* Andreas MacBook-Fenster (~1440×800): bisher fraß das 78vh-Video die
   Fensterhöhe, und vom Bilderband darunter blieb nur die obere Hälfte.
   Jetzt gilt: Kopfleiste (84 px Inhalt + 1 px Rahmen = 85 px, gemessen)
   + Startvideo + Bilderband = genau die Fensterhöhe.

   Das Video ist 16:9 (1920×1080) und wird mit object-fit:cover oben/unten
   beschnitten. Damit die wichtigen Videopixel — Klimagerät y 175, Füße der
   Frau y 915 — sichtbar bleiben, braucht es mindestens 740/1080 = 68,5 % der
   vollen 16:9-Höhe (56,25 vw) ≈ 38,55 vw; es sind 39 vw, das lässt an
   beiden Kanten ~4 Videopixel Luft. Die Bandkachel ist dann genau der Rest:
   100svh − Kopfleiste − 2×20 px Bandpadding − 39vw (mind. 100, höchst. 200 px).
   object-position 50 % 51,5 % hält die Bildmitte des Streifens (Videopixel
   y ≈ 545) in der Fenstermitte. */
@media (min-width: 981px) {
  :root {
    --kopf: 85px;
    --band-tile: clamp(100px, calc(100svh - var(--kopf) - 40px - 39vw), 200px);
  }
  .hero__media {
    height: calc(100svh - var(--kopf) - var(--band-tile) - 40px);
    max-height: 78vh;   /* Obergrenze wie bisher */
    min-height: 0;      /* die alte 560-px-Untergrenze drückte das Band aus dem Fenster */
  }
  .hero__img,
  .hero__video { object-position: 50% 51.5%; }
  .brandband { padding: 20px 0; }
  .brandband__tile { width: var(--band-tile); height: var(--band-tile); }
  /* Untertitel endet links vom Beistelltisch (Videopixel x ≈ 548 = 28,54 vw
     der Videobreite) mit 16 px Abstand — er darf nicht über Tisch/Sofa laufen. */
  .hero__subtitle { max-width: calc(28.5vw - 64px); }
}
/* Zwischen 981 und ~1140 px würde der Untertitel in der schmalen Spalte mehr
   als 4 Zeilen brauchen (gemessen: 5 Zeilen bis 1100 px) — dort bleibt er
   wie mobil ganz ausgeblendet. */
@media (min-width: 981px) and (max-width: 1139px) {
  .hero__subtitle { display: none; }
}

/* ---------- R10 / E-048: Tablet — das ganze Bild, hochkant wie quer ---------- */
/* Andrea 27.09. am iPad: „Es wirk sehr abgeschnitten… Vielleicht das gesamte
   Bild etwas kleiner… und hochkant ist ist auch nicht gut“. Ab 600 px Breite
   läuft deshalb immer die 16:9-Fassung, und der Rahmen hat genau 16:9 — das
   Video wird nicht mehr beschnitten. Die Hochkant-Fassung (9:16) bleibt den
   Handys (< 600 px). Der Rechner mit Maus (E-034, MacBook-Fenster) ist davon
   ausgenommen: dort gilt der Aufbau „Kopf + Video + Bilderband = Fensterhöhe“
   unverändert; über 980 px greift die Regel nur auf Touch-Geräten. */
@media (min-width: 600px) and (max-width: 980px) {
  .hero__media { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (min-width: 981px) and (hover: none) and (pointer: coarse) {
  .hero__media { height: auto; max-height: none; min-height: 0; aspect-ratio: 16 / 9; }
}