:root {
  color-scheme: light;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-accent: #d40000;
  /* Genau EIN Rotton auf der ganzen Website. Der Zustand beim Darueberfahren
     wird nicht ueber eine zweite Rotstufe ausgedrueckt, sondern ueber
     Unterstreichung, Schatten und leichte Bewegung — sonst haette die Seite
     zwei Rottoene. */
  --color-accent-hover: #d40000;
  --color-accent-soft: rgba(212, 0, 0, 0.14);
  /* Auf Kundenwunsch derselbe Rotton auch auf dunklem Grund. Hinweis:
     #d40000 erreicht dort hoechstens 3,80:1 (selbst auf reinem Schwarz) —
     4,5:1 sind mit diesem Rot auf Dunkel nicht erreichbar. Wo er dort als
     Text steht, muss er deshalb Grosstext sein (Schwelle 3,0:1). */
  --color-accent-on-dark: var(--color-accent);
  --color-surface: #ffffff;
  --color-surface-muted: #ffffff;
  --color-surface-strong: #ffffff;
  --color-border: rgba(255, 255, 255, 0);
  --color-shadow: rgba(0, 0, 0, 0.12);
  --color-focus: #d40000;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-display);
  --radius-s: 14px;
  --radius-m: 18px;
  --radius-l: 24px;
  --shadow-s: 0 16px 36px rgba(0, 0, 0, 0.08);
  --shadow-m: 0 28px 72px rgba(0, 0, 0, 0.1);
  --section-pad: clamp(3rem, 6vw, 6.5rem);
  --section-pad-top: max(var(--section-pad), calc(var(--header-height) + var(--header-offset)));
  --header-height: 88px;
  --header-offset: clamp(0.6rem, 2vw, 1.4rem);
  --container-width: 1200px;
  /* Breite und seitlicher Einzug von `.container` als eigene Werte — damit
     auch Flächen, die selbst kein `.container` sein können, in dieselbe
     Flucht rücken: Die Kartenreihen der Startseite laufen über die
     Fensterkante hinaus und brauchen den Einzug als Innenabstand, nicht als
     Breite. Beide Werte ändern sich an den Haltepunkten weiter unten mit;
     wer sie benutzt, rückt automatisch mit. */
  --container-span: min(var(--container-width), 100% - 2rem);
  --container-inset: max(1rem, calc((100% - var(--container-width)) / 2));
  --btn-height: 42px;
  --media-card-height: 220px;
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;

  /* Typography scale */
  --fs-caption: clamp(0.78rem, 0.74rem + 0.16vw, 0.88rem);
  --fs-small: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --fs-body: clamp(1rem, 0.98rem + 0.2vw, 1.1rem);
  --fs-body-strong: clamp(1.08rem, 1.03rem + 0.38vw, 1.24rem);
  --fs-h4: clamp(1.18rem, 1.11rem + 0.5vw, 1.38rem);
  --fs-h3: clamp(1.35rem, 1.24rem + 0.8vw, 1.8rem);
  --fs-h2: clamp(1.8rem, 1.48rem + 1.5vw, 2.95rem);
  --fs-h1: clamp(2.15rem, 1.8rem + 2vw, 3.5rem);
  --fs-display: clamp(2.4rem, 4.8vw, 4.9rem);
  --fs-display-hero: clamp(3.2rem, 6vw, 6.2rem);
  --fs-button: clamp(0.92rem, 0.88rem + 0.16vw, 1rem);
  --fs-nav: clamp(0.9rem, 0.87rem + 0.14vw, 1rem);
}

@media (max-width: 1024px) {
  :root {
    --section-pad: clamp(3.4rem, 7.5vw, 5rem);
    --header-offset: clamp(0.55rem, 2.2vw, 1rem);
    --btn-height: 46px;
    --space-xs: 0.65rem;
    --space-s: 0.95rem;
    --space-m: 1.15rem;
    --space-l: 1.75rem;
    --space-xl: 2.25rem;
    --fs-caption: clamp(0.88rem, 0.84rem + 0.24vw, 0.95rem);
    --fs-small: clamp(1rem, 0.96rem + 0.26vw, 1.08rem);
    --fs-body: clamp(1.05rem, 1.01rem + 0.32vw, 1.16rem);
    --fs-body-strong: clamp(1.16rem, 1.1rem + 0.42vw, 1.3rem);
    --fs-h4: clamp(1.3rem, 1.22rem + 0.54vw, 1.5rem);
    --fs-h3: clamp(1.55rem, 1.38rem + 0.94vw, 2rem);
    --fs-h2: clamp(2rem, 1.76rem + 1.44vw, 2.8rem);
    --fs-h1: clamp(2.35rem, 2rem + 1.88vw, 3.3rem);
    --fs-display: clamp(2.7rem, 5.2vw, 4.2rem);
    --fs-display-hero: clamp(2.85rem, 6.4vw, 4.8rem);
    --fs-button: clamp(1rem, 0.96rem + 0.16vw, 1.06rem);
    --fs-nav: clamp(1rem, 0.96rem + 0.18vw, 1.06rem);
  }
}

@media (max-width: 640px) {
  :root {
    --section-pad: clamp(3.15rem, 9vw, 4.25rem);
    --header-offset: clamp(0.5rem, 2.6vw, 0.85rem);
    --btn-height: 48px;
    --space-xs: 0.7rem;
    --space-s: 1rem;
    --space-m: 1.2rem;
    --space-l: 1.6rem;
    --space-xl: 2.1rem;
    --fs-caption: clamp(0.92rem, 0.88rem + 0.22vw, 0.98rem);
    --fs-small: clamp(1.02rem, 0.99rem + 0.22vw, 1.1rem);
    --fs-body: clamp(1.08rem, 1.04rem + 0.28vw, 1.18rem);
    --fs-body-strong: clamp(1.18rem, 1.12rem + 0.34vw, 1.32rem);
    --fs-h4: clamp(1.34rem, 1.26rem + 0.46vw, 1.56rem);
    --fs-h3: clamp(1.62rem, 1.46rem + 0.9vw, 2.06rem);
    --fs-h2: clamp(2.02rem, 1.82rem + 1.2vw, 2.72rem);
    --fs-h1: clamp(2.28rem, 2.02rem + 1.46vw, 3.05rem);
    --fs-display: clamp(2.45rem, 6.8vw, 3.6rem);
    --fs-display-hero: clamp(2.55rem, 8vw, 4rem);
  }
}

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

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* ==========================================================================
   Schmale Fenster: nichts darf aus dem Bild laufen.

   `overflow-x: clip` oben verhindert nur den waagrechten Balken — was rechts
   hinausragt, ist damit nicht gerettet, sondern abgeschnitten und unlesbar.
   Die zwei Regeln hier beheben die Ursache, damit dort nichts mehr zu
   kappen ist.

   1. Einspaltige Raster (`display: grid` ohne `grid-template-columns`) legen
      ihre Spur auf `auto`. `auto` hat einen Mindestwert: die Breite des
      laengsten unteilbaren Wortes. Bei deutschen Komposita in Schaugroesse
      — "EU-Online-Streitbeilegungsplattform", "Verbrauchergewaehrleistungs-
      gesetz" — wurde die Spur so breiter als das Fenster, und der ganze
      Textblock stand rechts im Nichts. `minmax(0, 1fr)` nimmt der Spur
      diesen Mindestwert; das Raster bleibt sonst unveraendert.

   2. Damit die langen Woerter dann auch umbrechen: Silbentrennung. `lang`
      steht auf "de-AT", der Browser trennt also nach deutschen Regeln.
      `overflow-wrap: break-word` ist nur die Rueckfalllinie fuer den Fall,
      dass selbst die getrennte Silbe nicht passt (URLs, Mailadressen).
   ========================================================================== */
.page-content,
.legal-content,
.legal-section-head,
.section-header,
.artikel__head,
body.page-subpage .sub-chapter__copy,
body.page-subpage .sub-index,
body.page-home:not(.page-subpage) .home-section-head {
  grid-template-columns: minmax(0, 1fr);
}

h1, h2, h3, h4, h5, h6,
p, li, dd, dt, blockquote, figcaption, address, summary, label {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kurze Auszeichnungen brauchen keine Trennung — dort wirkt sie nur unruhig. */
.eyebrow,
.legal-kicker,
.btn,
.nav-link,
.sub-chapter__kicker,
.home-scene__kicker {
  hyphens: manual;
}

/* Sprungmarken dürfen nicht unter der fixierten Menüleiste landen.
   Ohne diese Zeile stand die Oberkante von "#kontakt" oder "#produkte" exakt
   bei y = 0 und war damit von der Leiste verdeckt. scroll-padding wirkt sowohl
   auf Sprünge über die Adresszeile als auch auf scrollIntoView() in main.js,
   das die Menüpunkte "News" und "Kataloge" benutzen.
   Wert: Die Leiste ist im Moment des Sprungs noch 75 px hoch und schrumpft
   erst danach auf 59 px. Deshalb der größere Wert — sonst klebt das Ziel im
   Umschaltmoment an der Unterkante. */
html {
  scroll-padding-top: 5rem;
}

@media (max-width: 959px) {
  html {
    scroll-padding-top: calc(64px + env(safe-area-inset-top) + 0.75rem);
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: #ffffff;
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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

video,
iframe {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Grundregel fuer alle Verweise auf der Website

   Ruhezustand: Schriftfarbe wie der Text, keine Unterstreichung.
   Darueberfahren und Tastaturfokus: rot und unterstrichen.

   Ohne Ausnahme — auch Telefonnummern, E-Mail-Adressen, Menue und
   Fussbereich. Damit das ohne Nachteil geht, steht auf der ganzen Website
   kein Verweis mehr mitten in einem Satz: Wo das frueher so war (Einwilligung
   im Formular), steht er jetzt in einer eigenen Zeile. Alleinstehend ist ein
   Verweis an seiner Position erkennbar, im Fliesstext waere er es nicht.
   -------------------------------------------------------------------------- */
a {
  color: var(--color-ink);
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

p {
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

li,
dd,
dt,
blockquote {
  text-wrap: pretty;
}

main {
  display: block;
}

.container {
  width: var(--container-span);
  margin: 0 auto;
}

.section {
  padding: var(--section-pad) 0;
  padding-top: var(--section-pad-top);
  scroll-margin-top: 0;
  background: var(--color-surface);
}

.section--muted {
  background: #ffffff;
}

main > .section:nth-of-type(odd),
main > .section:nth-of-type(even) {
  background: #ffffff;
}

main > .section.hero {
  background: #ffffff;
}

#leistungen {
  padding-top: calc(var(--section-pad-top) + var(--space-l));
}

.section-header {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
  max-width: 720px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: 0.04em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: 0.04em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
}

h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: var(--fs-h4);
  line-height: 1.22;
}

/* Alle Untertitel folgen exakt der Vorlage "Vom Wohntraum zum Wohnraum":
   Textschrift, Staerke 500, 16 px, Laufweite 0,02em, Markenrot.
   Vorher waren sie fett (700) und weit gesperrt (0,2em) — dadurch wirkten
   sie wie Etiketten statt wie Untertitel. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-accent);
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.section-lead {
  font-size: var(--fs-body-strong);
}

.section-highlight {
  font-size: var(--fs-body-strong);
  font-weight: 700;
  color: var(--color-ink);
}

.page-content {
  display: grid;
  gap: var(--space-m);
  max-width: 760px;
}

.legal-content {
  max-width: none;
}

.legal-content p,
.legal-content li,
.legal-content a {
  overflow-wrap: anywhere;
}

.page-content ul {
  list-style: disc;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
  color: var(--color-ink-muted);
}

.lead {
  font-size: var(--fs-body-strong);
  color: var(--color-ink-muted);
}

.legal-section-head {
  display: grid;
  gap: 0.7rem;
  max-width: none;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  justify-items: start;
  text-align: left;
}

.legal-kicker {
  text-transform: none;
  letter-spacing: 0.2em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-accent);
}

/* Der Titel dieses Blocks ist eine <h2>, keine <h1>: Die <h1> der Seite steht
   schon im Hero darueber und trug denselben Text. Zwei <h1> pro Seite sind
   nicht zulaessig, und am Screenreader kam der Seitentitel doppelt an.
   Das Aussehen bleibt unveraendert — deshalb hier weiter die H1-Groesse. */
.legal-section-head h2 {
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: 0.01em;
}

.legal-lead {
  max-width: 60ch;
  font-size: var(--fs-body-strong);
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 0;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
  z-index: 2000;
}

.skip-link:focus {
  transform: translateY(0);
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  /* Vormals 18 px weisser Rahmen um das Foto — wirkte wie ein Passepartout
     und liess die Seite kleiner erscheinen. Der Hero laeuft jetzt bis an
     alle Kanten. */
  --hero-frame-pad: 0px;
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}

.hero--home {
  min-height: 100svh;
  height: auto;
}

main > .hero.hero--home {
  background: #ffffff;
}

main > .section.section--muted.hero.hero--home {
  background: #ffffff;
}

/* Abstand des schwebenden Knopfs zur Ecke.

   Steht global und nicht mehr auf `.hero--home .hero-shell`. Dort war er
   unerreichbar fuer jede Seite ohne Hero — die Artikelseiten (news-*.php,
   kataloge-*.php) haben keinen. Fehlt die Variable, wird das `calc()` in
   `.hero-shop-cta` ungueltig, `right` und `bottom` fallen auf `auto`
   zurueck, und der Knopf bleibt trotz `position: fixed` an der Stelle
   stehen, an der er im Textfluss steht: links unter dem letzten Abschnitt
   statt unten rechts am Bildrand. */
:root {
  --hero-shop-inset: clamp(1.6rem, 2.4vw, 2.2rem);
  --hero-shop-safe-inset: max(env(safe-area-inset-right), env(safe-area-inset-bottom));
}

.hero--home .hero-shell {
  position: relative;
  min-height: 100svh;
  /* Keine Rundung, kein Rahmen: randlos wirkt ruhiger und aktueller. */
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: #ffffff;
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-media::before {
  content: none;
}

/* Grundverlauf hinter dem Hero-Text.
   Fehlte bisher auf Startseite und "Ueber uns" komplett — dort stand weisse
   Schrift ohne Abdunklung direkt auf dem Foto. Die Produktseiten ueber-
   schreiben diese Regel weiter unten mit ihrem eigenen Verlauf. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Deckkraft aus den tatsaechlichen Bildpixeln zurueckgerechnet — und zwar
     ueber ALLE vierzehn Hero-Fotos, nicht nur ueber eines.

     Gemessen wurde je Bildzeile die hellste Stelle hinter dem Text und
     daraus die Deckkraft, die weisser Text fuer 4,5:1 braucht (Grosstext
     3:1, WCAG 1.4.3). Ergebnis: im unteren Siebtel bis 0,82, bis auf ein
     Viertel Hoehe noch 0,70. Die alten Werte (0,62 unten) hielten das auf
     keiner einzigen Seite — die Ueberschrift der Startseite kam auf 2,90:1,
     der Esszimmer-Hero auf 1,74:1.

     Ueber dem Textbereich faellt der Schleier zuegig ab, damit vom Foto so
     viel offen bleibt wie moeglich. Der zweite, waagrechte Verlauf kommt
     oben drauf; er ist in der Rechnung nicht enthalten und verbessert die
     Werte auf der Textseite zusaetzlich. */
  background:
    linear-gradient(
      to top,
      rgba(8, 8, 8, 0.84) 0%,
      rgba(8, 8, 8, 0.83) 15%,
      rgba(8, 8, 8, 0.72) 25%,
      rgba(8, 8, 8, 0.34) 38%,
      rgba(8, 8, 8, 0.1) 55%,
      rgba(8, 8, 8, 0) 72%
    ),
    linear-gradient(
      to right,
      rgba(8, 8, 8, 0.26) 0%,
      rgba(8, 8, 8, 0.14) 34%,
      rgba(8, 8, 8, 0) 62%
    );
}


.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: none;
  position: relative;
  z-index: 0;
}

/* Hier stand ein eigener, deutlich hellerer Verlauf fuer die Produktseiten.
   Der hielt die Kontrastwerte nirgends: Esszimmer 1,74:1, Outdoor 1,80:1,
   Vorraum 1,92:1 — bei 3:1 Mindestwert fuer die Ueberschrift. Die
   Produktseiten benutzen jetzt denselben, nachgerechneten Verlauf wie alle
   anderen Heros; nur der waagrechte Anteil bleibt hier staerker, weil der
   Text dort weiter nach rechts laeuft. */
main.kuechen-page .hero-media::after,
main.produktwelt-page .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(8, 8, 8, 0.84) 0%,
      rgba(8, 8, 8, 0.83) 15%,
      rgba(8, 8, 8, 0.72) 25%,
      rgba(8, 8, 8, 0.34) 38%,
      rgba(8, 8, 8, 0.1) 55%,
      rgba(8, 8, 8, 0) 72%
    ),
    linear-gradient(
      to right,
      rgba(8, 8, 8, 0.34) 0%,
      rgba(8, 8, 8, 0.2) 32%,
      rgba(8, 8, 8, 0.08) 55%,
      rgba(8, 8, 8, 0) 73%
    );
}

.hero--home .hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: end;
  padding-top: calc(var(--header-height) + var(--header-offset) + 1rem);
  min-height: calc(100svh - (var(--hero-frame-pad) * 2));
  width: calc(100% - 64px);
  max-width: none;
  margin: 0 auto;
}

.hero-shop-cta {
  position: fixed;
  right: calc(var(--hero-shop-inset) + var(--hero-shop-safe-inset));
  bottom: calc(var(--hero-shop-inset) + var(--hero-shop-safe-inset));
  z-index: 1090;
  min-height: 44px;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  gap: 0.55rem;
  transform: translateY(0);
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, background-color 0.2s ease, border-color 0.2s ease;
  will-change: transform, box-shadow;
}

.hero-shop-cta:hover,
.hero-shop-cta:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.hero-shop-cta:active {
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.hero-shop-cta__icon {
  display: none;
  width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.hero-shop-cta__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Nur Symbol, deshalb rund und ohne Textabstaende — wie die Varianten
   fuer Tablet und Handy. 60 px liegen klar ueber der Mindestzielgroesse. */
.btn.hero-shop-cta--desktop {
  display: inline-flex;
  width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 0;
  border-radius: 50%;
  gap: 0;
}

.btn.hero-shop-cta--desktop .hero-shop-cta__icon {
  display: inline-flex;
  /* Rund die Haelfte des 60-px-Knopfes. flex-shrink: 0 ist noetig — der
     Knopf ist selbst ein Flex-Container und hat das Symbol sonst auf
     13 px zusammengedrueckt. */
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
}

.btn.hero-shop-cta--desktop .hero-shop-cta__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.btn.hero-shop-cta--tablet,
.btn.hero-shop-cta--mobile {
  display: none;
}

.hero-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: grid;
  gap: 12px;
  animation: none;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-hero);
  letter-spacing: 0.01em;
  line-height: 0.9;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
  text-shadow: none;
}

.hero-content {
  position: relative;
  padding-bottom: clamp(40px, 6.5vh, 70px);
  width: min(860px, 74%);
  text-align: left;
}

/* Bei großer Schrift wächst der Hero mit. Der Text kann dann über dem
   bisherigen Verlauf stehen und braucht auch dort ausreichend Kontrast. */
.hero--home[data-hero-expanded="true"] .hero-media::after,
main.kuechen-page .hero--home[data-hero-expanded="true"] .hero-media::after,
main.produktwelt-page .hero--home[data-hero-expanded="true"] .hero-media::after {
  background: rgba(8, 8, 8, 0.65);
}

.hero-lead {
  font-size: var(--fs-h3);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  text-shadow: none;
}

.hero-intro {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-body);
  font-weight: 400;
  max-width: 690px;
  text-shadow: none;
}

.hero-note {
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-body);
  font-weight: 600;
  text-shadow: none;
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.2em;
  font-size: var(--fs-caption);
  text-shadow: none;
}

.hero p {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 959px) {
  body {
    line-height: 1.7;
  }

  .section-header,
  .page-content,
  .legal-section-head {
    gap: clamp(1rem, 2.5vw, 1.35rem);
  }

  .card-grid,
  .split-stack,
  .step-grid {
    gap: clamp(1.35rem, 3vw, 2rem);
  }

  .card-actions,
  .split-card__actions,
  .news-actions {
    gap: var(--space-m);
  }

  .btn {
    min-height: var(--btn-height);
    padding: 0.58rem 1.15rem;
  }

  h1 {
    line-height: 1.12;
    letter-spacing: 0.02em;
  }

  h2 {
    line-height: 1.14;
    letter-spacing: 0.02em;
  }

  h3 {
    line-height: 1.24;
  }

  h4 {
    line-height: 1.3;
  }

  .hero {
    --hero-frame-pad: 0;
    padding: 0;
    background: #ffffff;
  }

  .hero--home .hero-shell {
    border-radius: 0;
    min-height: 100svh;
    border: 0;
    box-shadow: none;
  }

  /* Der Hero-Text steht am Handy und am Tablet unten — wie am Desktop und
     wie die Bildunterschriften der Szene auf der Startseite. Vorher hing er
     direkt unter der Menüleiste; damit begann die Seite mit Text statt mit
     dem Bild. */
  .hero--home .hero-grid {
    display: grid;
    align-content: end;
    min-height: 100svh;
    width: min(100% - 2rem, 44rem);
  }

  /* Enger an die Ecke, sobald der Platz knapp wird — global, aus demselben
     Grund wie oben. */
  :root {
    --hero-shop-inset: clamp(1rem, 4.6vw, 1.35rem);
  }

  .btn.hero-shop-cta {
    min-height: 44px;
    padding: 0.68rem 1.1rem;
    border-radius: 999px;
    text-indent: 0;
    white-space: normal;
    font-size: var(--fs-small);
    line-height: 1.1;
    letter-spacing: 0;
  }

  /* Der Abstand nach unten hält zweierlei frei: den runden Anruf-Knopf, der
     unten rechts fest steht, und genug Luft, damit die letzte Zeile nicht an
     der Bildkante klebt. */
  .hero-content {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    padding-top: 0;
    padding-bottom: clamp(4.5rem, 11vh, 6.5rem);
  }

  .hero-content h1 {
    font-size: var(--fs-h1);
    line-height: 1.02;
  }

  .hero-lead {
    font-size: var(--fs-body-strong);
  }

  .hero-intro,
  .hero-note {
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  .hero-media img {
    /* Vorher 58%: dort lag die Leuchtschrift "WOHNEN [seiner]" genau hinter
       dem Intro-Text. Jetzt wandert sie nach links aus dem Textbereich. */
    object-position: 72% center;
  }

  .hero-media::after {
    /* Am Handy steht der Text unten, der Verlauf laeuft deshalb von unten
       nach oben.

       Die Deckkraft ist aus den Bildpixeln zurueckgerechnet, nicht geschaetzt:
       Hinter dem Intro liegt die beleuchtete Schauraum-Front, deren hellste
       Stelle rund 0,77 Deckkraft braucht, damit weisser Fliesstext 4,5:1
       haelt (WCAG 1.4.3). Die Ueberschrift ist Grosstext, dort genuegen 0,58
       fuer 3:1. Ein anderer Bildausschnitt hilft nicht — ueber die ganze
       Breite liegt der Bedarf zwischen 0,71 und 0,77.

       Darueber faellt der Schleier zuegig ab, damit das Foto oben offen
       bleibt. */
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 8, 0.84) 0%,
        rgba(8, 8, 8, 0.84) 22%,
        rgba(8, 8, 8, 0.83) 32%,
        rgba(8, 8, 8, 0.72) 42%,
        rgba(8, 8, 8, 0.34) 56%,
        rgba(8, 8, 8, 0.1) 72%,
        rgba(8, 8, 8, 0) 86%
      );
  }

  /* Am Handy laeuft der Text ueber die volle Breite — ein waagrechter
     Anteil bringt dort nichts. Deshalb derselbe senkrechte Verlauf wie auf
     allen anderen Heros, ohne Sonderweg. */
  main.kuechen-page .hero-media::after,
  main.produktwelt-page .hero-media::after {
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 8, 0.84) 0%,
        rgba(8, 8, 8, 0.84) 22%,
        rgba(8, 8, 8, 0.83) 32%,
        rgba(8, 8, 8, 0.72) 42%,
        rgba(8, 8, 8, 0.34) 56%,
        rgba(8, 8, 8, 0.1) 72%,
        rgba(8, 8, 8, 0) 86%
      );
  }

  main.kuechen-page .hero-content,
  main.produktwelt-page .hero-content {
    max-width: min(92vw, 36rem);
    padding-bottom: clamp(4.5rem, 11vh, 6.5rem);
  }

  main.kuechen-page .hero-content h1,
  main.produktwelt-page .hero-content h1 {
    max-width: 14ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  }

  main.kuechen-page .hero-intro,
  main.produktwelt-page .hero-intro {
    max-width: 34ch;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 1024px) {
  .btn.hero-shop-cta--desktop {
    display: none;
  }

  .btn.hero-shop-cta--tablet {
    display: inline-flex;
  }

  .btn.hero-shop-cta--tablet {
    width: 72px;
    height: 72px;
    min-height: 72px;
    padding: 0;
    border-radius: 50%;
    color: #ffffff;
  }

  .hero-shop-cta--tablet .hero-shop-cta__icon {
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    align-items: center;
    justify-content: center;
  }

  .hero-shop-cta--tablet .hero-shop-cta__icon svg {
    stroke-width: 2.8px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
  }
}

@media (max-width: 767px) {
  .btn.hero-shop-cta--tablet {
    display: none;
  }

  .btn.hero-shop-cta--mobile {
    display: inline-flex;
  }

  .btn.hero-shop-cta--mobile {
    width: 72px;
    height: 72px;
    min-height: 72px;
    padding: 0;
    border-radius: 50%;
    color: #ffffff;
  }

  .hero-shop-cta--mobile .hero-shop-cta__icon {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
  }

  .hero-shop-cta--mobile .hero-shop-cta__icon svg {
    stroke-width: 2.8px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
  }
}

@media (max-width: 959px) and (max-height: 670px) {
  .hero-content h1 {
    font-size: var(--fs-h2);
  }

  .hero-intro,
  .hero-note {
    font-size: var(--fs-body);
  }
}

.card-grid {
  display: grid;
  gap: var(--space-l);
}

.card {
  background: var(--color-surface);
  border-radius: 0;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-s);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#news-events .card {
  box-shadow: none;
}

.news-atelier .btn-primary {
  box-shadow: none;
}

.card--media {
  border: none;
}

.card--link {
  text-decoration: none;
  color: inherit;
}

.card--link:hover {
  text-decoration: none;
  color: inherit;
}

.card-grid--products .card {
  position: relative;
}

.card-grid--products .card-action {
  position: absolute;
  right: var(--space-m);
  bottom: var(--space-m);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-body-strong);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.card-grid--products .card-action:hover,
.card-grid--products .card-action:focus-visible {
  transform: translateX(2px);
  border-color: var(--color-border);
  color: var(--color-ink);
}

.card-media {
  border-bottom: none;
  overflow: hidden;
  border-radius: 0;
}

.card-media img {
  width: 100%;
  height: var(--media-card-height);
  object-fit: cover;
}

.card-body {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  flex: 1;
}

.card-grid--products .card-body {
  padding-bottom: calc(var(--space-l) + 2.6rem);
}

.card-kicker {
  text-transform: none;
  letter-spacing: 0.18em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-accent);
}

.card-title {
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--color-ink);
  min-height: 2.6em;
}

.card-text {
  color: var(--color-ink-muted);
}

.card-list {
  list-style: none;
  display: grid;
  gap: 0.4rem;
  color: var(--color-ink-muted);
}

.card-list li {
  padding-left: 1.1rem;
  position: relative;
}

.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0;
  background: var(--color-accent);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: auto;
}

.split-stack {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.split-stack--compact {
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.split-stack--contain .split-card__media {
  --split-media-fit: contain;
  --split-media-pos: center;
  padding: clamp(0.4rem, 1.2vw, 0.9rem);
  background: var(--color-surface);
}

.split-card {
  display: grid;
  grid-template-areas:
    "media"
    "body";
  background: var(--color-surface);
  border-radius: 0;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-m);
  overflow: hidden;
  --split-media-height: clamp(230px, 36vw, 360px);
}

.split-card__media {
  grid-area: media;
  height: var(--split-media-height);
  align-self: start;
  background: var(--color-surface-strong);
}

.split-card__media img {
  width: 100%;
  height: 100%;
  object-fit: var(--split-media-fit, cover);
  object-position: var(--split-media-pos, center);
}

.split-card__body {
  grid-area: body;
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  display: grid;
  gap: var(--space-s);
  align-content: center;
}

.split-lead {
  font-size: var(--fs-body-strong);
  color: var(--color-ink-muted);
}

.split-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-xs);
}

.split-card__actions--two-up {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  align-items: start;
}

.split-card__actions--two-up .btn {
  justify-self: start;
  white-space: normal;
}

.split-card__media--award {
  --split-media-fit: contain;
  --split-media-pos: center;
  padding: clamp(0.4rem, 1.2vw, 0.9rem);
  background: var(--color-surface);
}

.split-card__media--people {
  --split-media-fit: contain;
  --split-media-pos: center;
  padding: clamp(0.4rem, 1vw, 0.8rem);
  background: var(--color-surface);
}

.catalog-editorial,
.news-atelier {
  position: relative;
  overflow: hidden;
}

.catalog-editorial .container,
.news-atelier .container {
  position: relative;
  z-index: 1;
}

.news-atelier .news-carousel,
.news-atelier .news-editorial {
  background: transparent;
}

.news-atelier .news-brief {
  border: 1px solid var(--color-border);
}

.catalog-editorial__header {
  max-width: 760px;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
}

.catalog-editorial__grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  background: transparent;
}

.catalog-editorial__card {
  display: grid;
  gap: var(--space-m);
  padding: clamp(1rem, 2.2vw, 1.6rem);
  border-radius: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
  align-items: start;
}

.catalog-editorial__card-media {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: transparent;
}

.catalog-editorial__card--feature .catalog-editorial__card-media {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

.catalog-editorial__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.catalog-editorial__card-body {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
  align-items: start;
  align-self: center;
}

.catalog-editorial__actions {
  display: grid;
  gap: 0;
  justify-items: start;
  width: 100%;
}

.catalog-editorial__meta {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  text-transform: none;
  letter-spacing: 0.26em;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}

.catalog-editorial__card h3 {
  font-size: var(--fs-h4);
  line-height: 1.2;
}

.catalog-editorial__card--feature h3 {
  font-size: var(--fs-h3);
  line-height: 1.1;
}

.catalog-editorial__label {
  text-transform: none;
  letter-spacing: 0.28em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-ink-muted);
}

.catalog-editorial__lead {
  font-size: var(--fs-h4);
  color: var(--color-ink-muted);
}

.catalog-editorial__note {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  max-width: none;
}

.catalog-editorial__lead,
.catalog-editorial__note,
.catalog-editorial__item-lead {
  width: 100%;
}

.catalog-editorial__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
  background: transparent;
  transition: color 0.2s ease;
}

.catalog-editorial__actions .catalog-editorial__cta {
  width: fit-content;
  max-width: 100%;
  padding: 0.35rem 0;
}

.catalog-editorial__actions .catalog-editorial__cta + .catalog-editorial__cta {
  border-top: 1px solid var(--color-border);
}

.catalog-editorial__cta::after {
  content: "";
  display: none;
}

.catalog-editorial__cta:hover,
.catalog-editorial__cta:focus-visible {
  color: var(--color-accent);
}

.catalog-editorial__cta--muted {
  color: var(--color-ink-muted);
}

.catalog-editorial__count {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

.catalog-editorial__rule {
  flex: 0 0 42px;
  height: 1px;
  background: var(--color-ink);
  opacity: 0.4;
}

.catalog-editorial__item-lead {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.catalog-editorial__item-note {
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--color-ink-muted);
}

.catalog-carousel {
  --nav-size: 44px;
  --catalog-gap: var(--space-l);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
  background: transparent;
}

.catalog-track {
  display: flex;
  gap: var(--catalog-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0;
  align-items: stretch;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
  background: transparent;
}

.catalog-track::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.catalog-track > .catalog-editorial__card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  align-self: stretch;
}

.news-lead {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-ink-muted);
  min-height: calc(3 * 1.5em);
}

.split-details {
  margin-top: var(--space-xs);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border);
}

.split-details summary {
  cursor: pointer;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: var(--fs-caption);
  color: var(--color-accent);
  list-style: none;
}

.split-details summary::-webkit-details-marker {
  display: none;
}

.split-details__body {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-s);
  color: var(--color-ink-muted);
}

.news-label {
  text-transform: none;
  letter-spacing: 0.18em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-accent);
}

.news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.news-actions .btn {
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  font-size: var(--fs-small);
}

.news-carousel {
  --news-media-height: var(--media-card-height);
  --nav-size: 44px;
  --news-body-min-height: 240px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
  background: transparent;
}

.news-nav,
.catalog-nav {
  width: var(--nav-size);
  height: var(--nav-size);
  border-radius: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  align-self: center;
  margin-top: 0;
}

.news-nav:hover,
.news-nav:focus-visible,
.catalog-nav:hover,
.catalog-nav:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.news-nav:disabled,
.news-nav[aria-disabled="true"],
.catalog-nav:disabled,
.catalog-nav[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-ink-muted);
  transition: none;
}

.news-nav:disabled:hover,
.news-nav[aria-disabled="true"]:hover,
.catalog-nav:disabled:hover,
.catalog-nav[aria-disabled="true"]:hover,
.news-nav:disabled:focus-visible,
.news-nav[aria-disabled="true"]:focus-visible,
.catalog-nav:disabled:focus-visible,
.catalog-nav[aria-disabled="true"]:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-ink-muted);
}

.news-nav span,
.catalog-nav span {
  display: inline-block;
}

.news-editorial {
  display: flex;
  gap: var(--space-l);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0;
  align-items: stretch;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
  background: transparent;
}

.news-editorial::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.news-editorial > .news-brief {
  flex: 0 0 calc((100% - (2 * var(--space-l))) / 3);
  scroll-snap-align: start;
  align-self: stretch;
}

.news-feature {
  display: grid;
  gap: var(--space-l);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
  justify-items: start;
}

.news-frame {
  background: var(--color-surface);
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-m);
  border: none;
  width: 100%;
  height: 100%;
  justify-self: stretch;
  box-shadow: none;
  overflow: hidden;
}

.news-frame--portrait {
  height: 100%;
  align-self: stretch;
}

.news-frame--landscape {
  height: auto;
  aspect-ratio: 16 / 9;
  align-self: center;
  max-height: 100%;
}

.news-frame--feature {
  aspect-ratio: 3 / 2;
  width: min(100%, 560px);
  box-shadow: none;
}

.news-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-frame--portrait img {
  object-fit: cover;
}

.news-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-content: start;
  max-width: 520px;
  height: 100%;
  width: 100%;
  padding: var(--space-l);
}

.news-brief {
  background: var(--color-surface);
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: grid;
  gap: 0;
  align-content: start;
  justify-items: start;
  grid-template-rows: var(--news-media-height) 1fr;
  min-height: calc(var(--news-media-height) + var(--news-body-min-height));
  overflow: hidden;
}

.news-brief--landscape {
  grid-template-rows: var(--news-media-height) 1fr;
}

.news-brief--landscape .news-frame--landscape {
  aspect-ratio: auto;
}

.news-brief .news-frame {
  border-bottom: none;
  border-radius: var(--radius-m);
  align-self: stretch;
  place-items: stretch;
}

.news-brief .news-frame img {
  object-fit: cover;
  object-position: center;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
}

.news-brief--tight .news-frame img {
  transform: scale(1.04);
  transform-origin: center;
}

.news-brief--landscape .news-frame--landscape img {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  margin: 0;
}

.news-brief .news-frame--landscape {
  aspect-ratio: auto;
  height: 100%;
  align-self: stretch;
  max-height: none;
}

.news-copy h3 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--color-ink);
  min-height: 2.5em;
}

.news-note {
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--color-ink-muted);
  margin-left: var(--space-s);
  white-space: nowrap;
}

.news-copy .news-actions {
  margin-top: auto;
}

.news-aside {
  display: grid;
  gap: var(--space-l);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--color-border);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  min-height: var(--btn-height);
  height: auto;
  padding: 0.44rem 0.98rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-button);
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    color 0.22s ease-in-out;
  line-height: 1.2;
  text-align: center;
}

.btn:not(.hero-shop-cta) {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 500;
}

.btn:not(.hero-shop-cta):hover,
.btn:not(.hero-shop-cta):focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px rgba(212, 0, 0, 0.32);
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow: none;
}

.btn:not(.hero-shop-cta):active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px rgba(212, 0, 0, 0.32);
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow: none;
}

.btn.hero-shop-cta {
  min-height: 44px;
  padding: 0.72rem 1.4rem;
  font-size: var(--fs-small);
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px rgba(212, 0, 0, 0.32);
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow: none;
}

.btn-primary:active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px rgba(212, 0, 0, 0.32);
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow: none;
}

.btn-ghost {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.btn-ghost:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px rgba(212, 0, 0, 0.32);
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow: none;
}

.step-grid {
  list-style: none;
  display: grid;
  gap: var(--space-l);
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  background: var(--color-surface);
  border-radius: 0;
  border: 1px solid var(--color-border);
  padding: var(--space-l);
  box-shadow: var(--shadow-s);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: var(--color-accent-soft);
  font-weight: 700;
  color: var(--color-accent);
}

.step h3 {
  margin-bottom: 0.4rem;
  font-size: var(--fs-body-strong);
  color: var(--color-ink);
}

.contact-list {
  display: grid;
  gap: var(--space-s);
}

.contact-list dt {
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.2rem;
  margin-top: 0;
}

.contact-list dd {
  color: var(--color-ink-muted);
  margin: 0;
}

.contact-list div {
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--color-border);
}

.contact-list div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.map-section {
  width: 100%;
  margin-left: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.map-section.section--muted {
  background: var(--color-surface-muted);
}

.map-embed {
  width: 100%;
  height: clamp(320px, 55vh, 520px);
  border: 0;
  display: block;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--color-focus);
}

@media (min-width: 720px) {
  :root {
    --media-card-height: 240px;
  }

  .card-grid--services,
  .card-grid--products,
  .card-grid--news,
  .card-grid--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-card__actions--two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-card {
    --split-media-height: clamp(280px, 24vw, 380px);
  }

  .split-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "media body";
  }

  .split-card--reverse {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "body media";
  }

  .card-media img {
    height: var(--media-card-height);
  }

  .catalog-editorial__card--feature {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }

  .catalog-editorial__card--compact {
    --catalog-media-size: clamp(160px, 22vw, 210px);
    grid-template-columns: minmax(0, var(--catalog-media-size)) minmax(0, 1fr);
    align-items: start;
  }

  .catalog-editorial__card--compact .catalog-editorial__card-media {
    aspect-ratio: 3 / 4;
    align-self: center;
    width: 100%;
  }

}

@media (min-width: 900px) {
  .news-feature {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }

  .catalog-editorial__card--feature {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .catalog-editorial__card--compact {
    --catalog-media-size: clamp(170px, 20vw, 220px);
  }
}

@media (max-width: 900px) {
  .news-carousel {
    --news-media-height: var(--media-card-height);
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }

  .news-nav,
  .catalog-nav {
    justify-self: center;
    margin-top: 0;
  }

  .news-nav--prev {
    order: 1;
  }

  .news-editorial {
    order: 2;
  }

  .news-nav--next {
    order: 3;
  }

  .news-editorial > .news-brief {
    flex: 0 0 min(100%, 360px);
  }

  .catalog-carousel {
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }

  .catalog-nav--prev {
    order: 1;
  }

  .catalog-track {
    order: 2;
  }

  .catalog-nav--next {
    order: 3;
  }
}

@media (max-width: 1023px) {
  .news-carousel,
  .catalog-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xs);
    row-gap: var(--space-s);
  }

  .news-editorial,
  .catalog-track {
    grid-column: 1 / -1;
    order: 1;
  }

  .news-nav--prev,
  .catalog-nav--prev {
    order: 2;
    justify-self: end;
  }

  .news-nav--next,
  .catalog-nav--next {
    order: 3;
    justify-self: start;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .news-editorial > .news-brief {
    flex: 0 0 calc((100% - var(--space-l)) / 2);
  }

  .card-grid--products > .card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 959px) {
  .card-body,
  .split-card__body,
  .news-copy,
  .catalog-editorial__card {
    gap: clamp(0.85rem, 2.4vw, 1.1rem);
  }

  .section-lead,
  .lead,
  .split-lead,
  .news-lead,
  .catalog-editorial__item-lead,
  .catalog-editorial__lead {
    line-height: 1.62;
  }

  .card-title,
  .news-copy h3,
  .catalog-editorial__card h3,
  .catalog-editorial__card--feature h3,
  .catalog-editorial__lead,
  .catalog-editorial__count {
    line-height: 1.24;
  }
}

@media (max-width: 640px) {
  :root {
    --container-span: min(var(--container-width), 100% - 1.5rem);
    --container-inset: max(0.75rem, calc((100% - var(--container-width)) / 2));
  }

  .legal-content {
    max-width: 100%;
  }

  .news-editorial > .news-brief {
    flex: 0 0 100%;
  }

  .news-note {
    margin-left: 0;
    white-space: normal;
  }

  .section-header,
  .page-content,
  .legal-section-head {
    gap: 0.9rem;
  }

  .section-header {
    margin-bottom: var(--space-l);
  }

  .legal-section-head h2,
  .section-header h2 {
    line-height: 1.08;
  }

  .split-card__body,
  .news-copy,
  .news-feature {
    padding: clamp(1.25rem, 4vw, 1.55rem);
  }

  .step {
    padding: 1.25rem;
    gap: var(--space-s);
  }

  .news-carousel,
  .catalog-carousel {
    gap: var(--space-s);
  }

  .news-nav,
  .catalog-nav {
    width: 48px;
    height: 48px;
  }

  .footer-title {
    line-height: 1.24;
  }

  .footer-block p,
  .footer-block address,
  .footer-block a,
  .footer-meta {
    line-height: 1.65;
  }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.4fr);
    align-items: start;
  }

  .card-grid--services {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card-grid--products,
  .card-grid--news {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-track > .catalog-editorial__card {
    flex: 0 0 calc((100% - var(--catalog-gap)) / 2);
  }
}

@media (min-width: 1280px) {
  :root {
    --container-span: min(1280px, 100% - 2rem);
    --container-inset: max(1rem, calc((100% - 1280px) / 2));
  }
}

@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;
  }
}

@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ==========================================================================
   Seitenwechsel ohne sichtbares Neuladen (View Transitions).

   Chrome und Safari blenden den Wechsel weich ueber; Firefox kennt die Regel
   noch nicht und navigiert wie bisher — der Fallback kostet nichts.
   Bei prefers-reduced-motion wird der Uebergang abgeschaltet, nicht nur
   verkuerzt: Genau das lassen die meisten preisgekroenten Seiten weg.
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: pageFadeOut 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: pageFadeIn 0.42s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes pageFadeOut {
  to {
    opacity: 0;
  }
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Für Screenreader vorhanden, visuell ausgeblendet. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

/* ==========================================================================
   Einheitliches Verhalten aller Verweise beim Darüberfahren.

   Auf der ganzen Website gilt: Verweise werden rot und unterstrichen —
   so wie im Fußbereich. Einzelne Bausteine (Navigation, Kacheln, Leisten)
   setzen eigene Farben; die folgenden Regeln haben deshalb bewusst die
   nötige Spezifität, um sie beim Zeigen zu überschreiben.
   ========================================================================== */
a:hover,
a:focus-visible {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 0.28em;
}

/* Bausteine, die im Ruhezustand eine eigene Farbe oder keine Unterstreichung
   haben. Ohne diese Zeilen bliebe der Verweis beim Zeigen unverändert. */
body :is(
  .home-index__link,
  .card-action,
  .catalog-link,
  .split-card a,
  .produktwelt-gallery__item a,
  .about-opening__item a
):hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 0.28em;
}

/* Auf dunklem Grund haelt das Markenrot den Kontrast nicht (3,34:1).
   Dort greift der aufgehellte Ton mit 5,90:1 — erkennbar dasselbe Rot. */
body :is(.home-visit, .home-scene) a:hover,
body :is(.home-visit, .home-scene) a:focus-visible {
  color: var(--color-accent-on-dark);
  border-color: var(--color-accent-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 0.28em;
}

/* Die beiden Handlungsaufrufe tragen ihr Rot von Anfang an und werden
   bewusst nicht unterstrichen — sie sind durch Farbe und Pfeil erkennbar. */
body :is(.home-index__cta, .home-visit__cta):hover,
body :is(.home-index__cta, .home-visit__cta):focus-visible {
  text-decoration: none;
  color: var(--color-accent);
}

/* ==========================================================================
   Schaltflächen tragen nie eine Unterstreichung — auf der ganzen Website.

   Ein Knopf ist bereits durch seine Fläche als anklickbar zu erkennen; der
   Strich darunter wiederholt diese Aussage nur und zerschneidet dabei die
   Wortunterlängen. Bei den roten Knöpfen kam hinzu, dass die Linie in
   Weiss auf Rot als heller Balken quer durch den Text lief.

   Die Regel steht bewusst nach den Verweis-Regeln oben und zaehlt alle
   Knopf-Klassen des Projekts auf: Ohne sie greift `a:hover` auch auf
   Schaltflaechen, die als <a> ausgezeichnet sind. Kommt eine neue
   Knopf-Klasse dazu, gehoert sie in diese Liste.

   Der sichtbare Fokusrahmen bleibt davon unberuehrt — er wird ueber
   `outline` gezeichnet, nicht ueber `text-decoration` (WCAG 2.4.7).
   ========================================================================== */
body :is(
  .btn,
  .btn-primary,
  .btn-ghost,
  .nav-cta,
  .hero-shop-cta,
  .home-inline-cta,
  .home-index__cta,
  .home-visit__cta,
  .home-product-editorial__cta,
  .catalog-editorial__cta,
  .map-consent__button,
  .cookie-banner__button
),
body :is(
  .btn,
  .btn-primary,
  .btn-ghost,
  .nav-cta,
  .hero-shop-cta,
  .home-inline-cta,
  .home-index__cta,
  .home-visit__cta,
  .home-product-editorial__cta,
  .catalog-editorial__cta,
  .map-consent__button,
  .cookie-banner__button
):is(:hover, :focus, :focus-visible, :active) {
  text-decoration: none;
}

/* ==========================================================================
   Wer seinen Strich schon hat, bekommt beim Zeigen keinen zweiten.

   Einige Verweise zeichnen ihre Unterstreichung selbst — über
   `border-bottom`, weil sich Abstand und Stärke damit genauer setzen lassen
   als mit `text-decoration`. Auf sie greift die Regel `a:hover` oben
   trotzdem und legt eine zweite Linie darunter. Sichtbar wurde das am
   Rückweg der Artikelseiten: zwei Striche übereinander.

   Die Farbe wechselt weiterhin, und der eigene Strich wechselt mit — nur
   eben ohne zweite Linie. Bausteine, die ihre Unterstreichung über
   `text-decoration` setzen (etwa der aktuelle Menüpunkt), gehören nicht in
   diese Liste: Dort überschreibt der Zeigezustand dieselbe Eigenschaft, es
   entsteht also gar keine Doppelung.

   Kommt ein Verweis mit eigenem `border-bottom` dazu, gehoert er hierher.
   ========================================================================== */
body :is(
  .artikel__back
):is(:hover, :focus, :focus-visible, :active) {
  text-decoration: none;
}

/* ===========================================================================
   Kontaktformular der Produktseiten (kontaktformular.php)

   Steht hier und nicht in produktwelt.css, weil zwoelf Seiten es einbinden —
   darunter kuechen.php, das produktwelt.css gar nicht laedt.

   Aufbau: links Ueberschrift und die drei direkten Kontaktwege, rechts das
   Formular. Auf schmalen Schirmen untereinander, Formular zuerst.
   =========================================================================== */

.anfrage__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas:
    "intro  formular"
    "direkt formular";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 0;
  align-items: start;
}

.anfrage__intro  { grid-area: intro; }
.anfrage__direkt { grid-area: direkt; }
.anfrage-form    { grid-area: formular; }

.anfrage__intro .section-lead {
  max-width: 34ch;
}

/* --- die drei direkten Wege ------------------------------------------------ */

.anfrage__direkt {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.anfrage__direkt-titel {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 0 0 var(--space-m);
}

.anfrage__wege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

.anfrage__wege li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-s);
  align-items: baseline;
}

.anfrage__weg-label {
  font-size: var(--fs-caption);
  color: rgba(0, 0, 0, 0.55);
}

.anfrage__wege a {
  font-size: var(--fs-body);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.45;
}

.anfrage__wege a:hover,
.anfrage__wege a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* --- das Formular --------------------------------------------------------- */

.anfrage-form {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

.anfrage-form__reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

.anfrage-feld {
  display: grid;
  gap: var(--space-xs);
}

.anfrage-feld label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
}

/* 0.5 ergab auf Weiss 3,98:1 und lag damit unter der Grenze von 4,5:1 fuer
   Fliesstext. 0.56 bringt 4,74:1 — der Zusatz bleibt sichtbar zurueckhaltend,
   ist aber jetzt auch bei schlechtem Licht und auf matten Displays lesbar. */
.anfrage-feld__optional {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.56);
}

.anfrage-feld input[type="text"],
.anfrage-feld input[type="email"],
.anfrage-feld input[type="tel"],
.anfrage-feld textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-ink);
  /* Kein Kasten, sondern eine ruhige Flaeche mit einer Linie darunter. Die
     Linie ist der einzige Teil, der sich beim Tippen aendert. */
  background: rgba(0, 0, 0, 0.028);
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 6px 6px 0 0;
  min-height: 52px;
  padding: 0.85rem 0.95rem;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

.anfrage-feld textarea {
  resize: vertical;
  min-height: 168px;
  line-height: 1.6;
}

.anfrage-feld input::placeholder,
.anfrage-feld textarea::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.anfrage-feld input:hover,
.anfrage-feld textarea:hover {
  background: rgba(0, 0, 0, 0.045);
}

.anfrage-feld input:focus-visible,
.anfrage-feld textarea:focus-visible {
  background: rgba(0, 0, 0, 0.045);
  border-bottom-color: var(--color-accent);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.anfrage-feld input[aria-invalid="true"],
.anfrage-feld textarea[aria-invalid="true"] {
  border-bottom-color: var(--color-accent);
  border-bottom-width: 2px;
}

.anfrage-feld__fehler {
  font-size: var(--fs-small);
  color: var(--color-accent);
  margin: 0;
}

/* --- Einverstaendnis ------------------------------------------------------ */

.anfrage-feld--zustimmung label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-s);
  align-items: start;
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
}

.anfrage-feld--zustimmung input[type="checkbox"] {
  /* 24px sichtbar, aber 44px Trefferflaeche ueber das Label — WCAG 2.5.8. */
  inline-size: 24px;
  block-size: 24px;
  margin: 0.1rem 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.anfrage-feld--zustimmung input[type="checkbox"][aria-invalid="true"] {
  /* Die Ankreuzflaeche kann kein Unterstrich markieren — hier braucht es
     einen Rahmen, sonst bleibt der Fehler unsichtbar. */
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Der Verweis zur Datenschutzerklaerung steht in einer eigenen Zeile unter
   dem Haekchen — eingerueckt auf die Hoehe des Zustimmungstextes. */
.anfrage-feld__hinweis {
  margin: 0;
  padding-inline-start: calc(24px + var(--space-s));
  font-size: var(--fs-small);
}

.anfrage-feld--zustimmung a {
  color: var(--color-ink);
  text-decoration: none;
}

.anfrage-feld--zustimmung a:hover,
.anfrage-feld--zustimmung a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Spamfalle: fuer Menschen unerreichbar, fuer Bots sichtbar ------------- */

.anfrage-form__falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Abschluss ------------------------------------------------------------ */

.anfrage-form__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-xs);
}

.anfrage-form__status {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
}

.anfrage-form__status--fehler {
  color: var(--color-accent);
}

.anfrage-form__status--erfolg {
  /* Bestaetigung nicht in Rot — Rot ist auf dieser Seite die Fehlerfarbe.
     Stattdessen eine ruhige Flaeche, damit sie trotzdem auffaellt. */
  color: var(--color-ink);
  background: rgba(0, 0, 0, 0.045);
  border-radius: 8px;
  padding: 0.7rem 1rem;
}

@media (max-width: 900px) {
  .anfrage__layout {
    /* Untereinander — und die direkten Kontaktwege hinter das Formular,
       damit man auf dem Telefon nicht daran vorbeiscrollen muss. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "formular"
      "direkt";
    grid-template-rows: auto;
    row-gap: clamp(1.8rem, 5vw, 2.6rem);
  }

  .anfrage__intro .section-lead {
    max-width: 52ch;
  }

  .anfrage__direkt {
    margin-top: var(--space-l);
  }
}

@media (max-width: 620px) {
  .anfrage-form__reihe {
    grid-template-columns: minmax(0, 1fr);
  }

  .anfrage__wege li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xxs);
  }

  .anfrage-form__abschluss {
    display: grid;
    justify-items: start;
  }
}

/* ===========================================================================
   Markenwand (partners.php)

   Zwei gegenläufige Reihen. Jede Marke sitzt in einer eigenen Zelle mit
   Haarlinie — dadurch liest sich die Fläche als bewusst gesetztes Raster und
   nicht als Reihe frei schwebender Zeichen.

   Die Logos sind vorher optisch angeglichen worden (siehe partners.php),
   deshalb genügt hier eine einheitliche Zellengröße ohne Sonderfälle.
   =========================================================================== */

.partner-wall {
  --zelle-breite: clamp(148px, 15vw, 208px);
  --zelle-hoehe: clamp(76px, 8vw, 104px);
  --linie: rgba(0, 0, 0, 0.1);

  position: relative;
  display: grid;
  gap: 0;
  border-block: 1px solid var(--linie);
  /* Weicher Auslauf an beiden Rändern statt harter Abrisskante. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.partner-wall__reihe {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* Der Lauf setzt scrollLeft in Bruchteilen eines Pixels. Ein Snap würde
     jeden Schritt zurückziehen und die Reihe stünde still. */
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.partner-wall__reihe::-webkit-scrollbar {
  display: none;
}

.partner-wall__reihe + .partner-wall__reihe {
  border-top: 1px solid var(--linie);
}

.partner-wall__reihe:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.partner-wall__marke {
  flex: 0 0 var(--zelle-breite);
  display: grid;
  place-items: center;
  block-size: var(--zelle-hoehe);
  padding: 0 clamp(0.9rem, 1.6vw, 1.5rem);
  border-right: 1px solid var(--linie);
}

.partner-wall__marke img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  /* Ruhig im Grundzustand, farbig sobald man die Wand ansteuert — so wirken
     29 Fremdlogos nicht wie ein Flickenteppich neben der eigenen Marke. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.partner-wall:hover .partner-wall__marke img,
.partner-wall:focus-within .partner-wall__marke img {
  filter: grayscale(0);
  opacity: 1;
}

/* --- Pause-Schaltfläche, fest in der Kopfzeile ---------------------------- */

.section-header,
.home-section-head {
  position: relative;
}

.partner-pause {
  /* Der Kopfbereich ist ein Raster — ohne diese Zeile zoege sich der Knopf
     ueber die volle Spaltenbreite. */
  justify-self: start;
  align-self: start;
  inline-size: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--space-m);
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  min-height: 44px;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--color-ink);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.partner-pause:hover,
.partner-pause:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.partner-pause__icon {
  position: relative;
  inline-size: 14px;
  block-size: 14px;
  flex: 0 0 auto;
}

.partner-pause__icon::before,
.partner-pause__icon::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 4px;
  background: currentColor;
  transition: transform 0.25s ease, clip-path 0.25s ease;
}

.partner-pause__icon::before { inset-inline-start: 1px; }
.partner-pause__icon::after  { inset-inline-end: 1px; }

/* Angehalten: aus den zwei Balken wird ein Dreieck. */
.partner-pause.is-paused .partner-pause__icon::before {
  inline-size: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.partner-pause.is-paused .partner-pause__icon::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .partner-wall__marke img,
  .partner-pause__icon::before,
  .partner-pause__icon::after {
    transition: none;
  }
}

/* ==========================================================================
   Sehr schmale Geraete (bis 360 px): Schleier ueber dem Hero-Foto.

   Nachgemessen an den echten Bildpunkten aller Hero-Fotos — Foto in eine
   Zeichenflaeche gelegt, mit demselben Ausschnitt wie `object-fit: cover`,
   den Verlauf darueber gerechnet und gegen die tatsaechliche Textfarbe
   geprueft. Bei 375 px und darueber steht jede Ueberschrift mit mindestens
   92 % Reserve ueber der Anforderung.

   Bei 320 px wird der Bildausschnitt schmaler und hoeher, dadurch rueckt
   hinter die Ueberschrift eine hellere Stelle des Fotos. "Sofa" und
   "Elastica" — beide mit hellem Polster im Bild — kamen dort auf 3,02:1 bei
   geforderten 3:1. Das haelt zwar, aber ohne jeden Spielraum: schon eine
   andere Bildskalierung kippt es.

   Die Werte hier heben diese beiden auf 4,11:1 (37 % Reserve). Sichtbar ist
   das nur auf sehr kleinen Geraeten, wo vom Foto ohnehin wenig Flaeche
   uebrig bleibt.

   Die zweite Auswahl ist noetig, weil die Produktwelt- und Kuechenseiten
   ihren Verlauf mit hoeherer Spezifitaet setzen — darunter Sofa und
   Elastica, also genau die beiden Faelle.
   ========================================================================== */
@media (max-width: 360px) {
  .hero-media::after,
  main.kuechen-page .hero-media::after,
  main.produktwelt-page .hero-media::after {
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.88) 26%,
        rgba(8, 8, 8, 0.86) 36%,
        rgba(8, 8, 8, 0.76) 46%,
        rgba(8, 8, 8, 0.38) 58%,
        rgba(8, 8, 8, 0.12) 74%,
        rgba(8, 8, 8, 0) 88%
      );
  }
}