/* ==========================================================================
   WOODPULSE — Nachbau der Startseite
   Design-Tokens & Basis
   ========================================================================== */

:root {
  /* Farben */
  --c-bg:            #ffffff;
  --c-bg-soft:       #fcf7f3;   /* aus bg-beige.jpg der Live-Seite */
  --c-bg-card:       #f6f1ec;
  --c-bg-dark:       #1a1917;   /* Footer: dunkles Warmgrau */
  --c-green:         #1c302d;   /* Markendunkelgrün aus bg-gruen.jpg */
  --c-text:          #2b2926;
  --c-text-soft:     #6f6a64;
  --c-text-invert:   #f4f1ec;
  --c-line:          #e5ded5;
  --c-accent:        #d9c7b6;   /* warmes Beige – Hero-Button */
  --c-accent-dark:   #c9b4a0;
  --c-ink:           #14130f;   /* schwarzer Button */

  /* Typografie */
  --f-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --f-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --f-ui:      "EB Garamond", Georgia, serif;

  /* Maße */
  --wrap:      1240px;
  --wrap-narrow: 820px;
  --gutter:    clamp(20px, 5vw, 60px);
  --section-y: clamp(64px, 9vw, 128px);
  --radius:    16px;   /* großzügige Rundung – wie im Original */
  --radius-sm: 10px;
  --radius-btn: 10px;

  --header-h:  84px;
  /* Auf iPhones liegt oben die Statusleiste. Ohne sie einzurechnen begann die
     Kopfzeile darunter und man sah darueber einen Streifen Seiteninhalt. */
  --safe-top:  env(safe-area-inset-top, 0px);
  --header-total: calc(var(--header-h) + var(--safe-top));
  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.15; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ Bausteine -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--c-bg-soft); }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-bottom: 1.1rem;
  font-family: var(--f-ui);
}

.h-display { font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 300; letter-spacing: -.01em; }
.h-section { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; }
.h-card    { font-size: 1.45rem; font-weight: 400; }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--c-text-soft); }
.center { text-align: center; }
.section-head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: clamp(36px, 5vw, 68px); }
.section-head p { color: var(--c-text-soft); margin-top: .9rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6em;
  padding: 1.05em 2.4em;
  font-family: var(--f-ui);
  font-size: .95rem;
  letter-spacing: .04em;
  border-radius: var(--radius-btn);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--c-accent); color: var(--c-text); }
.btn--accent:hover { background: var(--c-accent-dark); }
.btn--ink { background: var(--c-ink); color: var(--c-text-invert); }
.btn--ink:hover { background: #2e2b26; }
.btn--ghost { border: 1px solid currentColor; }
.btn--ghost:hover { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.btn--light { background: rgba(255,255,255,.92); color: var(--c-text); }
.btn--light:hover { background: #fff; }

/* Bildrahmen mit Platzhalter-Fallback */
.figure {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #e9dfd3 0%, #d8c8b6 45%, #c3ae98 100%);
  border-radius: var(--radius);
}
.figure::after {
  content: attr(data-label);
  position: absolute; left: 10px; bottom: 10px;
  padding: .3rem .6rem;
  font-family: var(--f-ui);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(43,41,38,.6);
  background: rgba(255,255,255,.7);
  border-radius: 2px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
}
.figure.has-image::after { opacity: 0; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure img[data-broken] { display: none; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-3x4  { aspect-ratio: 3 / 4; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

/* ================================================================ Header = */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center;
  color: #fff;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Zieht die Flaeche der Kopfzeile ueber den oberen Rand hinaus. Sollte das
   Fenster sie doch einmal ein paar Pixel nach unten setzen (iOS beim
   Ein- und Ausfahren der Adressleiste), sieht man dort ihre eigene Farbe
   statt des Seiteninhalts. Bei durchsichtiger Kopfzeile faellt sie nicht auf. */
.header::before {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 100%; height: 120px;
  background: inherit;
  pointer-events: none;
}

.header__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 2rem;
}
.brand {
  font-family: var(--f-display);
  font-size: 1.6rem; letter-spacing: .18em; font-weight: 400;
  margin-right: auto;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 1.65rem; font-family: var(--f-ui); font-size: 1rem; }
.nav a { position: relative; padding-block: .35rem; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 1.1rem; }
.cart-btn { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-ui); }
.cart-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.header .btn { padding: .8em 1.9em; font-size: .9rem; }

.header.is-solid {
  background: rgba(255,255,255,.96);
  color: var(--c-text);
  box-shadow: 0 1px 0 var(--c-line);
  backdrop-filter: saturate(140%) blur(6px);
}

.burger { display: none; width: 26px; height: 16px; position: relative; }
/* Der Klon fürs Handy-Menü – am Rechner steht der echte Knopf im Kopf. */
.nav__cta { display: none; }
.burger span { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: .3s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; }
.burger span:nth-child(3) { bottom: 0; }

/* ================================================================== Hero = */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media .figure { width: 100%; height: 100%; border-radius: 0; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,.46) 0%, rgba(20,19,15,.3) 45%, rgba(20,19,15,.42) 100%);
}
.hero__inner { position: relative; z-index: 2; padding: calc(var(--header-total) + 3rem) var(--gutter) 5rem; }
.hero h1 { text-shadow: 0 2px 26px rgba(0,0,0,.28); }
.hero__sub {
  margin: 1.4rem auto 2.6rem;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 300;
  max-width: 62ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.scroll-hint {
  position: absolute; left: 50%; bottom: 2.2rem; translate: -50% 0; z-index: 2;
  font-family: var(--f-ui); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: .8; display: grid; justify-items: center; gap: .5rem;
}
.scroll-hint i { display: block; width: 1px; height: 42px; background: currentColor; opacity: .6; animation: hint 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0%,100% { transform: scaleY(.35); opacity:.3 } 50% { transform: scaleY(1); opacity:.8 } }

/* ============================================================== Vorteile = */
.benefits {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.benefit {
  background: var(--c-bg-card);
  padding: 2.4rem 1.2rem 2rem;
  text-align: center;
  border-radius: var(--radius);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.benefit:hover { transform: translateY(-4px); background: #efe9e1; }
.benefit svg { width: 44px; height: 44px; margin: 0 auto 1.1rem; stroke: var(--c-text); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.benefit__icon { width: 52px; height: 52px; margin: 0 auto 1.1rem; object-fit: contain; }
.benefit h3 { font-size: 1.02rem; font-family: var(--f-ui); letter-spacing: .01em; }

/* =============================================================== Produkte = */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.product { display: flex; flex-direction: column; }
.product .figure { margin-bottom: 1.15rem; }
.product h3 { margin-bottom: .35rem; }
.product__desc { color: var(--c-text-soft); font-size: .98rem; margin-bottom: .9rem; }
.product__price { font-family: var(--f-ui); margin-bottom: .9rem; }
.product__price b { font-weight: 600; }
.product__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.1rem; }

.size:hover { border-color: var(--c-text); }
.size.is-on { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.product .btn { margin-top: auto; width: 100%; }

/* ============================================================ Philosophie = */
.manifest { text-align: center; }
.manifest .h-section { margin-bottom: 1.6rem; }
.manifest p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--c-text-soft); }
.manifest .rule { width: 56px; height: 1px; background: var(--c-line); margin: 2.4rem auto; }

/* =========================================================== Konfigurator = */
.config { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.6vw, 40px); }
.config__item { border-top: 1px solid var(--c-line); padding-top: 1.4rem; }
.config__num { font-family: var(--f-ui); font-size: .78rem; letter-spacing: .18em; color: var(--c-text-soft); }
.config__icon { width: 54px; height: 54px; object-fit: contain; margin-bottom: .2rem; }
.config__item h3 { margin: .5rem 0 .6rem; font-size: 1.4rem; }
.config__item p { color: var(--c-text-soft); font-size: .97rem; }

/* ================================================================ Stories = */
.story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 84px); }
.story + .story { margin-top: clamp(56px, 8vw, 120px); }
.story--flip .story__text { order: 2; }
.story__text .h-section { margin-bottom: 1.2rem; }
.story__text p { color: var(--c-text-soft); }
.story__text .btn { margin-top: 1.6rem; }

/* ================================================================ Stimmen = */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.quote { background: var(--c-bg-card); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.quote .figure { border-radius: 0; }
.quote__body { padding: 1.8rem 1.6rem 2rem; display: flex; flex-direction: column; flex: 1; }
.quote__stars { color: var(--c-accent-dark); letter-spacing: .18em; font-size: .85rem; margin-bottom: .9rem; }
.quote__text { color: var(--c-text-soft); font-size: 1rem; }
.quote__name { margin-top: 1.4rem; font-family: var(--f-ui); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text); }

/* ============================================================== Instagram = */
.ig-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.ig-grid .figure { transition: opacity .35s var(--ease); }
.ig-grid a:hover .figure { opacity: .78; }

/* ==================================================================== CTA = */
.cta-band { position: relative; color: #fff; text-align: center; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; }
.cta-band__media .figure { width: 100%; height: 100%; border-radius: 0; }
.cta-band__media::after { content: ""; position: absolute; inset: 0; background: rgba(20,19,15,.42); }
/* Nur die Bänder mit dem Wohnraum-Motiv (Startseite, Über Uns) brauchen den
   tiefen Ausschnitt – mittig lagen dort Decke und leere Wand im Bild.
   Die übrigen Bänder behalten ihren mittigen Ausschnitt. */
.cta-band--tief .cta-band__media .figure img { object-position: center 78%; }
.cta-band--unten .cta-band__media .figure img { object-position: center 88%; }
/* Inspiration: mittig lag nur die Hecke im Bild, der Tisch wurde unten
   abgeschnitten. Tiefer angesetzt steht er samt Stuehlen im Kopfbild. */
.pagehero--tief .pagehero__media .figure img { object-position: center 62%; }
.cta-band__inner { position: relative; z-index: 2; padding-block: clamp(80px, 12vw, 170px); }
.cta-band p { margin: 1rem 0 2.2rem; opacity: .92; }

/* ================================================================= Footer = */
.footer { background: var(--c-bg-dark); color: var(--c-text-invert); padding-block: clamp(56px, 7vw, 90px) 2.4rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr .5fr 1.1fr .9fr .9fr; gap: clamp(24px, 4vw, 56px); }
.footer .brand { font-size: 1.75rem; margin: 0 0 1.2rem; }
.footer__about { color: rgba(244,241,236,.7); font-size: .98rem; max-width: 34ch; }
.footer h4 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer a { color: rgba(244,241,236,.78); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244,241,236,.25); transition: color .3s, text-decoration-color .3s; }
/* Nur echte Verweise reagieren – reiner Text im Footer bleibt ruhig. */
.footer a[href]:hover,
.footer a[href]:focus-visible { color: var(--c-accent); text-decoration-color: var(--c-accent); }
.footer__contact { color: rgba(244,241,236,.78); display: grid; gap: .7rem; }
.socials { display: flex; gap: 1rem; padding-top: .4rem; }
.socials a { display: grid; place-items: center; width: 34px; height: 34px; }
.socials svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.footer__bottom {
  margin-top: clamp(40px, 6vw, 72px); padding-top: 1.6rem;
  border-top: 1px solid rgba(244,241,236,.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .85rem; color: rgba(244,241,236,.55);
}

/* ============================================================ Warenkorb ==*/
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,19,15,.4); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(420px, 92vw);
  background: #fff;
  display: flex; flex-direction: column;
  translate: 100% 0;
  transition: translate .45s var(--ease);
  box-shadow: -20px 0 60px rgba(0,0,0,.12);
}
.drawer.is-open { translate: 0 0; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.6rem; border-bottom: 1px solid var(--c-line); }
.drawer__head h3 { font-size: 1.4rem; }
.drawer__close { font-size: 1.6rem; line-height: 1; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.4rem 1.6rem; }
.drawer__empty { color: var(--c-text-soft); }
.cart-line { display: grid; grid-template-columns: 60px 1fr auto; gap: .9rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--c-line); }
.cart-line .figure { border-radius: var(--radius); }
.cart-line__meta { font-size: .9rem; color: var(--c-text-soft); }
.cart-line__name { color: var(--c-text); font-size: 1.05rem; }
.cart-line__remove { color: var(--c-text-soft); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.drawer__foot { padding: 1.4rem 1.6rem 1.8rem; border-top: 1px solid var(--c-line); }
.drawer__total { display: flex; justify-content: space-between; font-family: var(--f-ui); margin-bottom: 1.1rem; }
.drawer__foot .btn { width: 100%; }
.drawer__note { font-size: .8rem; color: var(--c-text-soft); margin-top: .9rem; text-align: center; }

.cart-count {
  display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em;
  font-size: .78rem; border-radius: 99px;
}
.cart-btn.has-items .cart-count { background: var(--c-accent); color: var(--c-text); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 2rem; translate: -50% 20px; z-index: 100;
  background: var(--c-ink); color: #fff;
  padding: .9rem 1.5rem; border-radius: var(--radius);
  font-family: var(--f-ui); font-size: .92rem;
  opacity: 0; pointer-events: none; transition: .35s var(--ease);
}
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ============================================================== Reveal ==*/
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================ Responsive = */
@media (max-width: 1100px) {
  .benefits { grid-template-columns: repeat(3, 1fr); }
  .products { grid-template-columns: repeat(2, 1fr); }
  .config   { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .ig-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  /* Der Kopfbalken war mit 84 px fuer ein Handy zu hoch – er nahm oben zu
     viel Flaeche und schob ueber die vielen calc(--header-h + x)-Abstaende
     den ganzen Seitenanfang nach unten. */
  :root { --header-h: 62px; }

  body { font-size: 17px; }
  .brand { font-size: 1.35rem; letter-spacing: .15em; }
  .header.is-solid { height: var(--header-total); }
  .header.is-solid .brand { font-size: 1.25rem; }
  .nav, .header__actions .btn { display: none; }
  .burger { display: block; }
  .header.is-open-menu { background: var(--c-bg-dark); color: var(--c-text-invert); }
  /* Menü als ganze Fläche statt Klappe unter der Kopfzeile: ruhiger,
     und der Daumen erreicht jeden Punkt. */
  .nav {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: clamp(.9rem, 3.4vh, 1.6rem);
    position: fixed; inset: 0; z-index: 1;
    /* Auf dem iPhone ist inset:0 nicht der ganze Bildschirm: Safari rechnet
       mit der Fensterhoehe bei ausgefahrener Adressleiste. Faehrt sie ein,
       bleibt unten ein Streifen Seite sichtbar. dvh misst das Fenster so,
       wie es gerade wirklich ist – svh als Rueckfall fuer aeltere Geraete. */
    width: 100%;
    height: 100svh;
    height: 100dvh;
    background: var(--c-bg-dark); color: var(--c-text-invert);
    padding: calc(var(--header-total) + 2.2rem) var(--gutter) 3rem;
    font-family: var(--f-display); font-weight: 300;
    font-size: clamp(1.9rem, 8vw, 2.9rem); line-height: 1.15;
    opacity: 0; visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .5s var(--ease), opacity .3s var(--ease), visibility .5s;
  }
  .nav.is-open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }

  /* Punkte laufen nacheinander ein */
  .nav a { opacity: 0; transform: translateY(18px); }
  .nav.is-open a {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: calc(160ms + var(--i, 0) * 55ms);
  }
  .nav a::after { display: none; }
  .nav a.is-active { color: rgba(244,241,236,.5); }

  /* Der geklonte Kontakt-Knopf am Fuß des Menüs */
  .nav__cta {
    display: inline-flex;
    margin-top: clamp(1.2rem, 4vh, 2.4rem);
    font-family: var(--f-ui); font-size: .9rem;
  }
  .story, .story--flip .story__text { grid-template-columns: 1fr; order: 0; }
  .story__text { order: 2; }
  .quotes { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: 1fr; }
  .config   { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ANIMATIONEN
   ========================================================================== */

/* Scroll-Fortschritt oben */
.progress {
  position: fixed; top: 0; left: 0; z-index: 70;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--c-accent);
  will-change: transform;
}

/* Header schrumpft beim Scrollen */
.header { transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease); }
.header.is-solid { height: calc(68px + env(safe-area-inset-top, 0px)); }
.header .brand { transition: font-size .4s var(--ease), letter-spacing .4s var(--ease); }
.header.is-solid .brand { font-size: 1.35rem; letter-spacing: .14em; }

/* Reveal-Varianten mit Stagger (--d) */
.reveal { transition-delay: var(--d, 0ms); }
.reveal-up    { opacity: 0; transform: translateY(34px); }
.reveal-fade  { opacity: 0; }
.reveal-left  { opacity: 0; transform: translateX(-38px); }
.reveal-right { opacity: 0; transform: translateX(38px); }
.reveal-scale { opacity: 0; transform: scale(.94); }
.reveal-up, .reveal-fade, .reveal-left, .reveal-right, .reveal-scale {
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.is-in.reveal-up, .is-in.reveal-fade, .is-in.reveal-left,
.is-in.reveal-right, .is-in.reveal-scale { opacity: 1; transform: none; }

/* Bild-Wipe: Maske fährt auf, Bild zoomt aus */
.figure--wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.figure--wipe.is-in { clip-path: inset(0 0 0 0); }
.figure--wipe img { transform: scale(1.14); transition: transform 1.6s var(--ease); transition-delay: var(--d, 0ms); }
.figure--wipe.is-in img { transform: scale(1); }

/* Zeilenweiser Textaufbau */
.line { display: block; overflow: hidden; }
.line > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .line > span, .line.is-in > span { transform: none; }

/* Hero: langsamer Ken-Burns + gestaffelter Einstieg */
.hero__media .figure img { animation: kenburns 26s var(--ease) infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}
.hero__inner > * { opacity: 0; transform: translateY(26px); animation: heroIn 1.1s var(--ease) forwards; }
.hero__inner > h1        { animation-delay: .15s; }
.hero__inner > .hero__sub{ animation-delay: .38s; }
.hero__inner > .btn      { animation-delay: .58s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
.scroll-hint { opacity: 0; animation: heroIn 1s var(--ease) .9s forwards; }

/* Parallax-Ebene */
[data-parallax] { will-change: transform; }

/* Produktkarten */
.product .figure { overflow: hidden; }
.product .figure img { transition: transform .9s var(--ease); }
.product:hover .figure img { transform: scale(1.06); }
.product { transition: transform .5s var(--ease); }
.product:hover { transform: translateY(-6px); }
.product .btn { position: relative; overflow: hidden; }
.product .btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.product .btn:hover::before { transform: translateX(120%); }
.size { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.size:hover { transform: translateY(-2px); }

/* Vorteile: Icon-Bewegung */
.benefit__icon { transition: transform .5s var(--ease); }
.benefit:hover .benefit__icon { transform: translateY(-5px) scale(1.08); }

/* Konfigurator: Linie wächst ein */
.config__item { position: relative; }
.config__item::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--c-text); transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease); transition-delay: var(--d, 0ms);
}
.config__item.is-in::before { transform: scaleX(1); }
.config__icon { transition: transform .5s var(--ease); }
.config__item:hover .config__icon { transform: rotate(-6deg) scale(1.1); }

/* Story-Bilder */
.story .figure { overflow: hidden; }
.story .figure img { transition: transform 1.2s var(--ease); }
.story:hover .figure img { transform: scale(1.05); }

/* Stimmen */
.quote { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.quote:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(28,48,45,.1); }
.quote .figure img { transition: transform 1s var(--ease); }
.quote:hover .figure img { transform: scale(1.06); }

/* Instagram */
.ig-grid .figure { overflow: hidden; }
.ig-grid .figure img { transition: transform 1s var(--ease); }
.ig-grid a:hover .figure img { transform: scale(1.1); }

/* Footer-Links */
.footer ul a { display: inline-block; transition: color .3s, transform .3s var(--ease); }
.footer ul a:hover { transform: translateX(4px); }
.socials a { transition: transform .4s var(--ease), opacity .3s; }
.socials a:hover { transform: translateY(-3px) scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .hero__media .figure img { animation: none; }
  .hero__inner > *, .scroll-hint { opacity: 1; transform: none; animation: none; }
  .figure--wipe { clip-path: none; }
  .line > span { transform: none; }
  .progress { display: none; }
}

/* --------------------------------------------------- Parallax-Vorbereitung */
.hero { overflow: hidden; }
.hero__media { inset: -18% 0; }
.cta-band { overflow: hidden; }
.cta-band__media { inset: -20% 0; }
.px { will-change: transform; }
.px-zoom img { transform: scale(1.18); }

/* Header versteckt sich beim Runterscrollen */
.header.is-hidden { transform: translateY(-100%); }
.header { transition: background .4s var(--ease), color .4s var(--ease),
          box-shadow .4s var(--ease), height .4s var(--ease), transform .5s var(--ease); }

/* Magnetischer Button */
.btn { will-change: transform; }

/* Sanftes Einschweben der Footer-Spalten */
.footer__grid > * { opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d,0ms); }
.footer__grid > *.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   CI-VERSTÄRKUNG — Textur, Claim-Band, dunkle Marke, Detailtypografie
   ========================================================================== */

/* Feines Korn über der ganzen Seite: macht die Flächen haptisch */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eyebrow mit Haarlinie */
.eyebrow { display: flex; align-items: center; gap: .9em; }
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .5; flex: none; }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .5; flex: none; }

/* Wortweiser Aufbau der Überschriften */
.h-section .line, .h-display .line { display: inline-block; overflow: hidden; vertical-align: bottom; }
.h-section .line + .line, .h-display .line + .line { margin-left: .26em; }

/* ------------------------------------------- Dunkles Verantwortungs-Band */
.band-dark { background: var(--c-green); color: var(--c-text-invert); overflow: hidden; }
.band-dark__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.band-dark__text { padding: clamp(56px, 8vw, 130px) clamp(24px, 5vw, 90px); align-self: center; max-width: 640px; margin-left: auto; }
.band-dark .eyebrow { color: rgba(244,241,236,.65); }
.band-dark p { color: rgba(244,241,236,.76); }
.band-dark__media { position: relative; min-height: 460px; overflow: hidden; }
.band-dark__media .figure { position: absolute; inset: -10% 0; border-radius: 0; }
.band-dark .btn--ghost { border-color: rgba(244,241,236,.5); }
.band-dark .btn--ghost:hover { background: var(--c-text-invert); color: var(--c-green); border-color: var(--c-text-invert); }

.counter { display: flex; align-items: baseline; gap: .1em; margin: 1.4rem 0 1.2rem; font-family: var(--f-display); }
.counter span { font-size: clamp(3.4rem, 8vw, 6.4rem); font-weight: 300; line-height: 1; }
.counter i { font-size: clamp(1.6rem, 3vw, 2.6rem); font-style: normal; opacity: .7; }
.counter + p { max-width: 46ch; }

@media (max-width: 860px) {
  .band-dark__grid { grid-template-columns: 1fr; }
  .band-dark__text { margin: 0; max-width: none; }
  .band-dark__media { min-height: 320px; order: -1; }
}

/* ==========================================================================
   KORREKTUREN NACH ORIGINAL-ABGLEICH
   ========================================================================== */

/* Beige Sektionsfläche inkl. der dezenten Punktgrafik der Live-Seite.
   Die Punkte sitzen im Bild unten rechts (ab 66 % Breite, 64 % Höhe). Mit
   center/cover wurden sie auf hohen Abschnitten komplett weggeschnitten –
   deshalb unten rechts verankert und in natürlicher Größe. Die Fläche des
   Bildes ist exakt --c-bg-soft, der Übergang ist also unsichtbar. */
.section--beige {
  background: var(--c-bg-soft) url("../img/bg-beige.jpg") right bottom / auto no-repeat;
}

/* Überschriften dürfen breiter laufen, damit sie nicht unnötig umbrechen */
.section-head { max-width: 860px; }
.h-section { text-wrap: balance; }

/* -------------------------------------------------- Story: Bild links --- */
.story { grid-template-columns: 1.06fr 1fr; gap: clamp(32px, 6vw, 96px); }
.story__media { order: -1; }
.story--flip .story__media { order: 2; }
.story--flip .story__text { order: 1; }
.story .figure { border-radius: var(--radius); aspect-ratio: 4 / 3.5; }
.story__text { max-width: 56ch; }
.story__text .h-section { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.25; margin-bottom: 1.5rem; }
.story__text p { font-size: 1.02rem; line-height: 1.85; }
.story__text .btn { margin-top: 2rem; }

/* ------------------------------------------ Produktkarte: reduziert ----- */
.product { display: flex; flex-direction: column; color: inherit; }
.product .figure { margin-bottom: 1.15rem; }
.product h3 { margin-bottom: .4rem; transition: opacity .3s var(--ease); }
.product__desc { color: var(--c-text-soft); font-size: .96rem; margin-bottom: 1.1rem; }
.product__foot {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--f-ui);
}
.product__price { font-size: 1.02rem; }
.product__more {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-soft); transition: color .3s var(--ease);
}
.product__more svg { width: 20px; height: 8px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.product__more svg path { transition: transform .4s var(--ease); }
.product:hover .product__more { color: var(--c-text); }
.product:hover .product__more svg { transform: translateX(4px); }

/* Runde Ecken durchgängig */
.product .figure, .quote, .quote .figure, .ig-grid .figure,
.benefit, .cart-line .figure { border-radius: var(--radius); }
.ig-grid .figure { border-radius: var(--radius-sm); }
.band-dark__media .figure, .hero__media .figure, .cta-band__media .figure { border-radius: 0; }
.drawer { border-radius: 0; }

@media (max-width: 860px) {
  .story, .story--flip .story__text, .story--flip .story__media { grid-template-columns: 1fr; order: 0; }
  .story__media { order: -1; }
}

/* Weniger Luft zwischen Hero und Vorteilen */
#vorteile { padding-block: clamp(44px, 5.5vw, 78px); }
#vorteile .section-head { margin-bottom: clamp(22px, 2.6vw, 38px); }
.hero__inner { padding-bottom: 3rem; }
.scroll-hint { bottom: 1.6rem; }
.scroll-hint i { height: 34px; }

/* -------------------------------------------------- Claim unter dem Hero */
.claim { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.claim__inner {
  max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(.7rem, 1.8vw, 1.9rem) 0;
  padding-block: clamp(1rem, 1.6vw, 1.4rem);
  font-family: var(--f-ui);
  font-size: clamp(.66rem, .92vw, .78rem);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--c-text-soft); text-align: center; line-height: 1.4;
}
.claim__inner span { padding-inline: clamp(.6rem, 1.4vw, 1.35rem); position: relative; white-space: nowrap; }
.claim__inner span:not(:last-child)::after {
  content: "◆"; position: absolute; right: calc(-.35em); top: 50%; translate: 0 -50%;
  font-size: .5em; opacity: .4; letter-spacing: 0;
}
@media (max-width: 720px) { .claim__inner span:not(:last-child)::after { display: none; } }

/* Weniger Luft zwischen Hero und Vorteilen */
#vorteile { padding-block: clamp(44px, 5.5vw, 78px); }
#vorteile .section-head { margin-bottom: clamp(22px, 2.6vw, 38px); }
.hero__inner { padding-bottom: 3rem; }
.scroll-hint { bottom: 1.6rem; }
.scroll-hint i { height: 34px; }

/* -------------------------------------------------- Claim unter dem Hero */
.claim { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.claim__inner {
  max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--f-ui);
  font-size: clamp(.72rem, 1.1vw, .84rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text-soft); text-align: center;
}
.claim__inner span { display: inline-flex; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); }
.claim__inner span:not(:last-child)::after { content: "◆"; font-size: .5em; opacity: .45; letter-spacing: 0; }

/* -------------------------- Stories im Format des Verantwortungs-Bandes -- */
.section--beige > .wrap {
  max-width: none;
  padding-inline: clamp(18px, 2.6vw, 42px);
}
.section--beige { padding-block: clamp(42px, 5vw, 72px); }

.story {
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 84px);
  align-items: center;
}
.story + .story { margin-top: clamp(48px, 6vw, 92px); }
.story .figure { aspect-ratio: 1 / .96; }
.story__text {
  max-width: 62ch;
  padding-right: clamp(0px, 4vw, 72px);
}
.story--flip .story__text { padding-right: 0; padding-left: clamp(0px, 4vw, 72px); }
.story__text .h-section { font-size: clamp(1.9rem, 2.9vw, 2.9rem); }
.story__text p { font-size: clamp(1rem, 1.15vw, 1.12rem); }

@media (max-width: 860px) {
  .story .figure { aspect-ratio: 4 / 3; }
  .story__text, .story--flip .story__text { padding: 0; }
}

/* Textspalte breiter, damit die zweizeilige Headline zweizeilig bleibt */
.story__text { max-width: 68ch; padding-right: 0; }
.story--flip .story__text { padding-left: 0; }
.story__text .h-section { font-size: clamp(1.7rem, 2.45vw, 2.5rem); }
.story { gap: clamp(28px, 3.6vw, 64px); }

/* Nur die Hilfsklasse aus dem verworfenen Grün-Band bleibt */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   MEHR KONTRAST — dunkles Prozess-Band, größere Piktogramme
   ========================================================================== */

/* Piktogramme insgesamt kräftiger */
.benefit__icon { width: 68px; height: 68px; }
.benefit { padding-block: clamp(2rem, 3vw, 2.8rem) clamp(1.6rem, 2.4vw, 2.2rem); background: #f2ece4; }
.benefit:hover { background: #ece4d9; }
.benefit h3 { font-size: 1.06rem; }

.config__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .3rem; }
.config__head .config__num { font-size: 1.7rem; font-family: var(--f-display); letter-spacing: 0; color: var(--c-accent-dark); }
.config__icon { width: 58px; height: 58px; }

/* Story-Abschnitte klar voneinander trennen statt schwebend zu stapeln */
.section--beige { border-top: 1px solid var(--c-line); }
.story + .story {
  margin-top: 0;
  padding-top: clamp(48px, 6vw, 92px);
  border-top: 1px solid var(--c-line);
}
.story { padding-bottom: clamp(48px, 6vw, 92px); }
.story:last-child { padding-bottom: 0; }

/* ==========================================================================
   ÜBERARBEITUNG — Prioritäten, Größen, Rhythmus
   ========================================================================== */

/* Fließtext etwas größer, Zeilen enger */
body { font-size: 19px; line-height: 1.65; }
.story__text p { font-size: 1.05rem; line-height: 1.7; }
.product__desc { font-size: .95rem; line-height: 1.6; }
.quote__body p { font-size: 1rem; line-height: 1.7; }

/* Hierarchie zwischen Haupt- und Nebensektionen */
.h-section { font-size: clamp(1.8rem, 3.1vw, 2.7rem); }
#tische .h-section { font-size: clamp(2.1rem, 3.9vw, 3.3rem); }

/* Shop: das Produkt bekommt den Platz */
#tische { padding-block: clamp(56px, 6.5vw, 96px); }
.products { grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 30px); }
.product .figure { aspect-ratio: 3 / 4; margin-bottom: 1.3rem; }
.product h3 { font-size: 1.55rem; }
.product__foot { padding-top: 1rem; }
.product__price { font-size: 1.08rem; }

/* Sektionen kompakter */
.section { padding-block: clamp(52px, 6.2vw, 96px); }
.section--beige { padding-block: clamp(44px, 5vw, 76px); }
.section-head { margin-bottom: clamp(30px, 3.6vw, 52px); }

/* Story-Bilder etwas zurücknehmen, Text bekommt mehr Gewicht */
.story { grid-template-columns: .92fr 1fr; }
.story .figure { aspect-ratio: 4 / 4.1; }

/* ------------------------------------------------- Vorteils-Leiste ------ */
.usp {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
/* Raster statt Flex mit space-between: Beim Umbrechen landeten die Punkte
   sonst in ungleichen Reihen mit wechselnden Abständen – das sah kaputt aus,
   nicht gestaltet. Feste Spalten halten die Reihe ruhig. */
.usp__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
  padding-block: clamp(1.4rem, 2.2vw, 1.9rem);
}
.usp__list li {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--f-ui); font-size: .95rem; line-height: 1.3;
  color: var(--c-text); text-wrap: balance;
}
.usp__list img { width: 34px; height: 34px; object-fit: contain; flex: none; }

@media (max-width: 860px) {
  .usp__list { justify-content: flex-start; }
  .usp__list li { font-size: .9rem; }
}

/* rem hängt am Root, nicht am body – Fließtextgrößen daher explizit */
.story__text p { font-size: 1.15rem; line-height: 1.72; }
.quote__body p { font-size: 1.06rem; line-height: 1.72; }
.product__desc { font-size: 1rem; line-height: 1.6; }
.section-head p { font-size: 1.08rem; }
.band-dark p { font-size: 1.08rem; line-height: 1.7; }
.config__item p { font-size: 1.02rem; line-height: 1.65; }

/* Alte ID-Regel aus der Kachel-Version neutralisieren */
#vorteile.usp { padding-block: 0; }

/* ==========================================================================
   STIMMEN — redaktionell statt Bewertungs-Kacheln
   ========================================================================== */
/* Eigener Ton, damit der Abschnitt sich von der Textur darüber und dem
   weißen Journal darunter absetzt. */
.voices { background: var(--c-bg-card); border-block: 1px solid var(--c-line); }
.voices__grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
.voices__text { display: flex; flex-direction: column; }
.voices .eyebrow { margin-bottom: clamp(1.4rem, 2.4vw, 2.2rem); }

/* Zitate liegen übereinander und blenden um */
.voices__text { position: relative; }
.voice {
  margin: 0; grid-area: 1 / 1;
  opacity: 0; visibility: hidden; position: absolute; inset: 0 0 auto 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.voice.is-on { opacity: 1; visibility: visible; position: relative; transform: none; }

/* Das jeweils sichtbare Zitat steht in einer weißen Box auf der beigen
   Fläche. Die ausgeblendeten liegen absolut darüber und bekommen dieselbe
   Polsterung, damit beim Umblenden nichts springt. */
.voice {
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.5rem, 2.4vw, 2.2rem);
}
.voice p {
  font-family: var(--f-display);
  font-size: clamp(1.28rem, 2.1vw, 1.9rem);
  line-height: 1.32; font-weight: 300;
  color: var(--c-text);
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.voice p::before { content: "„"; margin-left: -.42em; }
.voice p::after  { content: "“"; }
.voice footer {
  font-family: var(--f-ui); font-size: .82rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-text);
}
.voice footer span { color: var(--c-text-soft); }

/* Auswahl über Miniaturen statt Punkte */
.voices__nav {
  display: flex; align-items: center; gap: .8rem;
  margin-top: clamp(2rem, 3.4vw, 3rem);
}
.vthumb {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  padding: 0; position: relative; flex: none;
  opacity: .45; transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--c-text);
  opacity: 0; transform: scale(.9);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.vthumb:hover { opacity: .8; transform: translateY(-2px); }
.vthumb.is-on { opacity: 1; }
.vthumb.is-on::after { opacity: 1; transform: scale(1); }
.voices__count {
  margin-left: .8rem; font-family: var(--f-ui);
  font-size: .8rem; letter-spacing: .16em; color: var(--c-text-soft);
}
.voices__count b { color: var(--c-text); font-weight: 400; }

/* Bildseite */
.voices__media .figure { aspect-ratio: 4 / 4.5; border-radius: var(--radius); }
.voices__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity .7s var(--ease), transform 1.3s var(--ease);
}
.voices__media img.is-on { opacity: 1; transform: scale(1); }

@media (max-width: 900px) {
  .voices__grid { grid-template-columns: 1fr; }
  .voices__media { order: -1; }
  .voices__media .figure { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   INSTAGRAM — Profilkopf und Kachel-Hover wie im Feed
   ========================================================================== */
.ig-head {
  display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem);
}
.ig-avatar { flex: none; display: block; }
.ig-avatar span {
  display: grid; place-items: center;
  width: clamp(64px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: var(--c-ink); color: var(--c-text-invert);
  font-family: var(--f-display); font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 300; letter-spacing: .04em; line-height: 1;
  box-shadow: 0 0 0 3px var(--c-bg-soft), 0 0 0 5px var(--c-accent-dark);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.ig-avatar:hover span { transform: scale(1.04); box-shadow: 0 0 0 3px var(--c-bg-soft), 0 0 0 5px var(--c-text); }


.ig-id { display: grid; gap: .2rem; margin-right: auto; }
.ig-id b { font-family: var(--f-ui); font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; }
.ig-id span { font-size: .95rem; color: var(--c-text-soft); }
.ig-follow { padding: .72em 1.9em; font-size: .9rem; }

.ig-grid { gap: 10px; }
.ig-tile { position: relative; display: block; }
.ig-tile__over {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20,19,15,.42); border-radius: var(--radius-sm);
  opacity: 0; transition: opacity .35s var(--ease);
}
.ig-tile:hover .ig-tile__over { opacity: 1; }
.ig-tile__over svg {
  width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.4;
  transform: scale(.85); transition: transform .35s var(--ease);
}
.ig-tile:hover .ig-tile__over svg { transform: scale(1); }

.ig-note {
  margin-top: clamp(1.4rem, 2.2vw, 2rem); text-align: center;
  color: var(--c-text-soft); font-size: 1rem;
}

@media (max-width: 620px) {
  .ig-head { flex-wrap: wrap; }
  .ig-id { margin-right: 0; }
  .ig-follow { width: 100%; }
}

/* ==========================================================================
   KOMPAKTER — Abschnitte enger, Bilder und Headlines eine Stufe kleiner
   ========================================================================== */
:root { --section-y: clamp(46px, 5.2vw, 80px); }

.section          { padding-block: clamp(44px, 4.8vw, 76px); }
.section--beige   { padding-block: clamp(36px, 4vw, 62px); }
.section-head     { margin-bottom: clamp(24px, 2.8vw, 40px); }

/* Typografie eine Stufe zurück */
.h-display        { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.h-section        { font-size: clamp(1.65rem, 2.6vw, 2.25rem); }
#tische .h-section{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
.voice p          { font-size: clamp(1.14rem, 1.8vw, 1.6rem); margin-bottom: 1.25rem; }
.hero__sub        { margin: 1.1rem auto 2.1rem; }

/* Hero etwas niedriger, damit der Shop früher anschneidet */
.hero { min-height: 86svh; }

/* Bilder: gleiche Wirkung, weniger Höhe */
.product .figure      { aspect-ratio: 3 / 3.5; margin-bottom: 1.1rem; }
.product h3           { font-size: 1.42rem; }
.story .figure        { aspect-ratio: 4 / 3.4; }
.story                { padding-bottom: clamp(34px, 4vw, 60px); gap: clamp(26px, 3.2vw, 56px); }
.story + .story       { padding-top: clamp(34px, 4vw, 60px); }
.story__text .h-section { margin-bottom: 1.1rem; }
.voices__media .figure{ aspect-ratio: 4 / 3.7; }
.voices__grid         { gap: clamp(28px, 4vw, 68px); }
.voices__nav          { margin-top: clamp(1.5rem, 2.4vw, 2.2rem); }

/* Bänder und Footer */
.band-dark__text      { padding: clamp(40px, 5.4vw, 88px) clamp(24px, 4vw, 68px); }
.band-dark__media     { min-height: 380px; }
.cta-band__inner      { padding-block: clamp(56px, 8vw, 112px); }
.footer               { padding-block: clamp(44px, 5vw, 72px) 2rem; }
.footer__bottom       { margin-top: clamp(30px, 4vw, 52px); }
#tische               { padding-block: clamp(46px, 5.2vw, 80px); }

/* Stimmen deutlich zurücknehmen */
.voices { padding-block: clamp(40px, 4.4vw, 68px); }
.voices__grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
.voice p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.45; margin-bottom: 1.05rem; }
.voices__media .figure { aspect-ratio: 4 / 3.2; }
.voices .eyebrow { margin-bottom: clamp(1rem, 1.6vw, 1.4rem); }
.vthumb { width: 46px; height: 46px; }
.voices__nav { margin-top: clamp(1.2rem, 2vw, 1.8rem); gap: .65rem; }
.voice footer { font-size: .78rem; }

/* Stimmen-Navigation: sichtbar bedienbar machen */
.voices__nav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .75rem 1rem;
}
.voices__label {
  font-family: var(--f-ui); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-text-soft);
  width: 100%; margin-bottom: -.15rem;
}
.voices__thumbs { display: flex; gap: .6rem; }
.vthumb {
  opacity: .7;
  box-shadow: 0 0 0 1px var(--c-line);
}
.vthumb.is-on { opacity: 1; }
.vthumb::after { border-color: var(--c-text); }

.voices__arrows { display: flex; gap: .4rem; margin-left: .3rem; }
.varrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.varrow svg { width: 20px; height: 12px; stroke: var(--c-text); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.varrow:hover { border-color: var(--c-text); background: var(--c-bg-card); transform: translateY(-2px); }

.voices__progress {
  flex: 1 1 90px; min-width: 70px; max-width: 160px;
  height: 1px; background: var(--c-line); position: relative; overflow: hidden;
}
.voices__progress i {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: var(--c-accent-dark);
}
.voices__progress i.run { animation: vfill 8s linear forwards; }
@keyframes vfill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) { .voices__progress { display: none; } }

/* ==========================================================================
   GRÖSSEN-FINDER — Werkstattzeichnung mit echter Eiche
   Bezugsfläche des Plans: 470 × 300 cm
   ========================================================================== */
.sizer__grid {
  display: grid; grid-template-columns: 1.3fr .7fr;
  gap: clamp(30px, 4.4vw, 72px); align-items: center;
}

.plan {
  position: relative; margin: 0;
  aspect-ratio: 470 / 300;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fbf8f4;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.plan__floor {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(43,41,38,.13) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 110% at 50% 45%, #000 55%, transparent 100%);
}

/* Tischplatte mit echter Eichenoberfläche */
.plan__table {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  border-radius: 5px; overflow: hidden; z-index: 3;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 16px 34px -10px rgba(43,41,38,.42),
    0 3px 8px rgba(43,41,38,.16);
  transition: width .5s var(--ease), height .5s var(--ease);
}
.plan__table img { width: 100%; height: 100%; object-fit: cover; }

/* Stühle als feine Umrisse */
.plan__chairs { position: absolute; inset: 0; z-index: 2; }
.plan__chairs i {
  position: absolute; display: block; translate: -50% -50%;
  border: 1.5px solid rgba(43,41,38,.42);
  border-radius: 7px;
  background: rgba(255,255,255,.55);
  animation: chairIn .4s var(--ease) backwards;
}
.plan__chairs i::after {
  content: ""; position: absolute; border-radius: 4px;
  background: rgba(43,41,38,.14);
}
.plan__chairs i.top::after    { inset: auto 14% 8% 14%; height: 22%; }
.plan__chairs i.bottom::after { inset: 8% 14% auto 14%; height: 22%; }
.plan__chairs i.left::after   { inset: 14% 8% 14% auto; width: 22%; }
.plan__chairs i.right::after  { inset: 14% auto 14% 8%; width: 22%; }
@keyframes chairIn { from { opacity: 0; scale: .5; } }

/* Maßlinien */
.dimline { position: absolute; z-index: 4; pointer-events: none; }
.dimline::before, .dimline::after {
  content: ""; position: absolute; background: rgba(43,41,38,.45);
}
.dimline span {
  position: absolute; background: #fbf8f4; padding: 0 .5em;
  font-family: var(--f-ui); font-size: .7rem; letter-spacing: .12em;
  color: var(--c-text-soft); white-space: nowrap;
}
.dimline--x {
  height: 1px; background: rgba(43,41,38,.28);
  transition: width .5s var(--ease), left .5s var(--ease);
}
.dimline--x::before, .dimline--x::after { top: -4px; width: 1px; height: 9px; }
.dimline--x::before { left: 0; } .dimline--x::after { right: 0; }
.dimline--x span { left: 50%; top: -.62em; translate: -50% -50%; }

.dimline--y {
  width: 1px; background: rgba(43,41,38,.28);
  transition: height .5s var(--ease), top .5s var(--ease);
}
.dimline--y::before, .dimline--y::after { left: -4px; height: 1px; width: 9px; }
.dimline--y::before { top: 0; } .dimline--y::after { bottom: 0; }
.dimline--y span { top: 50%; left: .7em; translate: 0 -50%; }

.plan__scale {
  /* Oben links statt unten links: unten kollidierte der Massstab mit der
     Bemassungslinie der Tischlaenge – auf dem Handy lagen „1 METER“ und
     „200 cm“ uebereinander. */
  position: absolute; left: 22px; top: 18px; z-index: 4;
  display: flex; align-items: center; gap: .6rem;
}
.plan__scale i {
  display: block; width: calc(1px * 0); /* wird per JS gesetzt */
  height: 1px; background: rgba(43,41,38,.45); position: relative;
}
.plan__scale i::before, .plan__scale i::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: rgba(43,41,38,.45);
}
.plan__scale i::before { left: 0; } .plan__scale i::after { right: 0; }
.plan__scale span {
  font-family: var(--f-ui); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-text-soft);
}

/* Bedienseite */
.sizer__panel { display: flex; flex-direction: column; }
.sizer__readout {
  display: flex; gap: clamp(1.6rem, 3vw, 2.8rem);
  padding-bottom: clamp(1.2rem, 2vw, 1.7rem);
  border-bottom: 1px solid var(--c-line);
}
.sizer__stat { display: flex; flex-direction: column; gap: .25rem; }
.sizer__stat b {
  font-family: var(--f-display); font-weight: 300; line-height: 1;
  font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.sizer__stat em {
  font-style: normal; font-family: var(--f-ui);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-soft);
}

.sizer__row { padding-block: clamp(1.1rem, 1.9vw, 1.6rem); border-bottom: 1px solid var(--c-line); }
.sizer__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-ui); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-text-soft); margin-bottom: .9rem;
}
.sizer__label b { color: var(--c-text); font-weight: 500; letter-spacing: .06em; font-size: .82rem; }

#rngLen,
#rngWid {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 3px; border-radius: 3px; background: var(--c-line); cursor: pointer;
}
#rngLen::-webkit-slider-thumb,
#rngWid::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-ink); border: 2px solid var(--c-bg-soft);
  box-shadow: 0 3px 10px rgba(43,41,38,.3);
  transition: transform .2s var(--ease);
}
#rngLen:active::-webkit-slider-thumb,
#rngWid:active::-webkit-slider-thumb { transform: scale(1.15); }
#rngLen::-moz-range-thumb,
#rngWid::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-bg-soft);
  background: var(--c-ink);
}
.sizer__ticks {
  display: flex; justify-content: space-between; margin-top: .55rem;
  font-family: var(--f-ui); font-size: .68rem; letter-spacing: .1em; color: var(--c-text-soft);
}
.sizer__ticks i { font-style: normal; }

.sizer__opts { display: flex; gap: .4rem; flex-wrap: wrap; }
.sizer__opts button {
  min-width: 56px; padding: .55em .95em;
  border: 1px solid var(--c-line); border-radius: 99px;
  font-family: var(--f-ui); font-size: .86rem;
  transition: .25s var(--ease);
}
.sizer__opts button:hover { border-color: var(--c-text-soft); transform: translateY(-2px); }
.sizer__opts button.is-on { background: var(--c-ink); color: var(--c-text-invert); border-color: var(--c-ink); }

.sizer__hint { font-size: .95rem; color: var(--c-text-soft); padding-block: clamp(1.1rem, 1.9vw, 1.5rem); }
.sizer__panel .btn { align-self: flex-start; }

@media (max-width: 900px) { .sizer__grid { grid-template-columns: 1fr; } }

/* Breiten-Maß: Beschriftung über die Linie, damit sie am Planrand nicht abreißt */
.dimline--y span { top: 0; left: 50%; translate: -50% -125%; }

/* ==========================================================================
   RESPONSIVE — steht bewusst am Dateiende, damit es alle Überschreibungen
   der vorherigen Blöcke gewinnt
   ========================================================================== */
@media (max-width: 1100px) {
  .products      { grid-template-columns: repeat(2, 1fr); }
  .config        { grid-template-columns: repeat(2, 1fr); }
  .footer__grid  { grid-template-columns: 1fr 1fr 1fr; }
  .ig-grid       { grid-template-columns: repeat(4, 1fr); }
  .sizer__grid   { grid-template-columns: 1fr; }
  .voices__grid  { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .story, .story--flip .story__text, .story--flip .story__media {
    grid-template-columns: 1fr; order: 0;
  }
  .story__media { order: -1; }
  .story__text, .story--flip .story__text { padding: 0; max-width: none; }
  .story .figure { aspect-ratio: 4 / 3; }
  .band-dark__grid { grid-template-columns: 1fr; }
  .band-dark__text { margin: 0; max-width: none; }
  .band-dark__media { min-height: 300px; order: -1; }
  .voices__media { order: -1; }
  .voices__media .figure { aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  .products     { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product .figure { aspect-ratio: 3 / 3.6; }
  .product h3   { font-size: 1.15rem; }
  .product__desc { font-size: .92rem; }
  .config       { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .ig-grid      { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .usp__list    { justify-content: flex-start; gap: .8rem 1.4rem; }
  .usp__list li { font-size: .86rem; gap: .55rem; }
  .usp__list img{ width: 28px; height: 28px; }
  .plan         { aspect-ratio: 470 / 340; }
  .sizer__readout { gap: 1.6rem; }
}

@media (max-width: 520px) {
  .products     { grid-template-columns: 1fr; }
  .product .figure { aspect-ratio: 4 / 3; }
  .config       { grid-template-columns: 1fr; }
  .ig-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .claim__inner span:not(:last-child)::after { display: none; }
  .dimline span { font-size: .62rem; }
  .plan__scale  { left: 12px; top: 12px; }
  /* Etwas mehr Hoehe, damit Stuehle, Tisch und Bemassung nicht gedraengt stehen */
  .plan         { aspect-ratio: 470 / 375; }
}

/* Nichts darf die Seite seitlich aufziehen */
/* Auf iOS macht `overflow-x: hidden` aus html/body einen eigenen
   Scrollcontainer. Die feste Kopfzeile haengt dann nicht mehr am Fenster,
   sondern rutscht beim Scrollen ein Stueck mit – genau der helle Streifen
   Hero-Bild, der ueber dem weissen Balken stehenblieb.
   `clip` schneidet genauso ab, ohne einen Scrollcontainer aufzumachen.
   Die erste Zeile bleibt als Rueckfall fuer sehr alte Browser stehen. */
html, body { max-width: 100%; overflow-x: hidden; }
html, body { overflow-x: clip; }
.hero, .cta-band, .band-dark, .process { overflow: hidden; }

/* Tastaturbedienung sichtbar machen */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .band-dark :focus-visible, .footer :focus-visible,
.cta-band :focus-visible { outline-color: var(--c-text-invert); }

/* Bilder behalten ihren Platz, bis sie geladen sind */
.figure img { background: var(--c-bg-card); }

/* ==========================================================================
   JOURNAL — Blog-Teaser
   ========================================================================== */
.ratio-3x2 { aspect-ratio: 3 / 2; }

.journal__head {
  max-width: none; text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: 1rem 2rem;
  padding-bottom: clamp(1rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--c-line);
}
.journal__head .eyebrow { justify-content: flex-start; grid-column: 1; }
.journal__head .eyebrow::after { display: none; }
.journal__head .h-section { grid-column: 1; }
.journal__all {
  grid-column: 2; grid-row: 1 / span 2; align-self: end;
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-ui); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-soft);
  white-space: nowrap; padding-bottom: .3rem;
  transition: color .3s var(--ease);
}
.journal__all svg { width: 20px; height: 8px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.journal__all svg path { transition: transform .4s var(--ease); }
.journal__all:hover { color: var(--c-text); }
.journal__all:hover svg { transform: translateX(4px); }

.posts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 38px);
  margin-top: clamp(28px, 3.4vw, 48px);
}
.post { display: flex; flex-direction: column; color: inherit; }
.post .figure { margin-bottom: 1.1rem; overflow: hidden; }
.post .figure img { transition: transform .9s var(--ease); }
.post:hover .figure img { transform: scale(1.05); }

.post__meta {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--f-ui); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-soft);
  margin-bottom: .6rem;
}
.post__cat {
  padding: .28em .7em; border-radius: 99px;
  background: var(--c-bg-card); color: var(--c-text); letter-spacing: .12em;
}
.post__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.28;
  margin-bottom: .55rem;
  transition: opacity .3s var(--ease);
}
.post:hover .post__title { opacity: .72; }
.post__excerpt { color: var(--c-text-soft); font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
.post__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-ui); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-soft);
  transition: color .3s var(--ease);
}
.post__more svg { width: 20px; height: 8px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.post__more svg path { transition: transform .4s var(--ease); }
.post:hover .post__more { color: var(--c-text); }
.post:hover .post__more svg { transform: translateX(4px); }

@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .posts { grid-template-columns: 1fr; }
  .journal__head { grid-template-columns: 1fr; }
  .journal__all { grid-column: 1; grid-row: auto; }
}

/* ==========================================================================
   BLOG-ÜBERSICHT (blog.html)
   ========================================================================== */
.pagehead {
  padding-block: calc(var(--header-total) + clamp(46px, 6vw, 92px)) clamp(34px, 4.4vw, 62px);
  background: var(--c-bg);
}
.pagehead .eyebrow { justify-content: flex-start; }
.pagehead .eyebrow::after { display: none; }
.pagehead .h-display { font-size: clamp(2.2rem, 4.8vw, 3.9rem); margin-bottom: 1rem; }
.pagehead .lead { max-width: 56ch; }

.filters {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding-bottom: clamp(1.4rem, 2.4vw, 2.2rem);
  border-bottom: 1px solid var(--c-line);
}
.filter {
  padding: .5em 1.05em; border: 1px solid var(--c-line); border-radius: 99px;
  font-family: var(--f-ui); font-size: .84rem; letter-spacing: .02em;
  transition: .25s var(--ease);
}
.filter:hover { border-color: var(--c-text-soft); transform: translateY(-2px); }
.filter.is-on { background: var(--c-ink); color: var(--c-text-invert); border-color: var(--c-ink); }

.posts--archive {
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28px, 3.4vw, 48px);
  row-gap: clamp(34px, 4vw, 56px);
}
.archive__empty { margin-top: 2rem; color: var(--c-text-soft); }

@media (max-width: 900px) { .posts--archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .posts--archive { grid-template-columns: 1fr; } }

/* Unterseiten ohne Hero: Header sitzt immer auf hellem Grund */
body:not(:has(.hero)) .header { color: var(--c-text); }
body:not(:has(.hero)) { padding-top: 0; }

/* ==========================================================================
   ARTIKELSEITE
   ========================================================================== */
.article__head {
  padding-block: calc(var(--header-total) + clamp(38px, 5vw, 72px)) clamp(26px, 3.4vw, 44px);
  background: var(--c-bg);
}
.article__back {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-ui); font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-soft);
  margin-bottom: clamp(1.4rem, 2.4vw, 2.2rem);
  transition: color .3s var(--ease);
}
.article__back svg { width: 20px; height: 8px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.article__back svg path { transition: transform .4s var(--ease); }
.article__back:hover { color: var(--c-text); }
.article__back:hover svg { transform: translateX(-4px); }

.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  font-family: var(--f-ui); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-soft);
  margin-bottom: 1rem;
}
.article__head .h-display { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.1; }
.article__sub {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.35;
  color: var(--c-text-soft); margin-top: .9rem; max-width: 32ch;
}

.article__media { margin-bottom: clamp(30px, 4vw, 56px); }
.article__media .figure { border-radius: var(--radius); }

.article__body { padding-bottom: clamp(34px, 4.4vw, 64px); }
.article__lead {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.5;
  color: var(--c-text); margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
}
.article__body h2 {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  margin: clamp(2rem, 3.2vw, 3rem) 0 .8rem;
}
.article__body p { font-size: 1.12rem; line-height: 1.78; color: var(--c-text-soft); }
.article__body p + p { margin-top: .9rem; }

.article__tip {
  margin-top: clamp(2rem, 3.4vw, 3rem);
  padding: clamp(1.3rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.4vw, 2rem);
  background: var(--c-bg-card); border-radius: var(--radius);
  border-left: 3px solid var(--c-accent-dark);
}
.article__tip b {
  display: block; font-family: var(--f-ui); font-weight: 500;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text-soft); margin-bottom: .5rem;
}
.article__tip p { color: var(--c-text); font-size: 1.04rem; line-height: 1.7; }

.article__author {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(2.2rem, 3.4vw, 3rem);
  padding-top: clamp(1.4rem, 2.2vw, 1.9rem);
  border-top: 1px solid var(--c-line);
}
.article__avatar {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-text-invert);
  font-family: var(--f-ui); font-size: .82rem; letter-spacing: .08em;
}
.article__author b { display: block; font-family: var(--f-ui); font-weight: 500; font-size: 1rem; }
.article__author span { font-size: .92rem; color: var(--c-text-soft); }

.article__cta {
  background: var(--c-bg-soft);
  padding-block: clamp(40px, 5vw, 76px);
  text-align: center;
}
.article__cta p { color: var(--c-text-soft); margin: .8rem 0 1.6rem; }
.article__cta-row { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

.article__more { padding-top: clamp(40px, 5vw, 76px); }
.posts--related { grid-template-columns: repeat(2, 1fr); }
.posts--related .post__title { font-size: 1.2rem; }

@media (max-width: 620px) { .posts--related { grid-template-columns: 1fr; } }

/* Eingebettete Werkzeuge im Artikel */
.tool { padding-block: clamp(38px, 4.6vw, 68px) clamp(30px, 3.6vw, 52px); }
.tool__head { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 40px); }
.tool__head .eyebrow { justify-content: flex-start; }
.tool__head .eyebrow::after { display: none; }
.tool__head .h-section { margin-bottom: .7rem; }
.tool__head p { color: var(--c-text-soft); }
.article .article__head { padding-bottom: clamp(30px, 4vw, 54px); }

/* Artikelbild: keine feste 16:9-Beschneidung mehr — das Bild behält sein
   eigenes Format und wird nur in der Höhe begrenzt */
.article__media .figure {
  aspect-ratio: auto; background: none; display: block;
  max-width: 1000px; margin-inline: auto;
}
.article__media .figure img {
  width: 100%; height: auto;
  max-height: min(70vh, 680px);
  object-fit: cover; object-position: center;
  border-radius: var(--radius);
}

/* Beitragskarten: etwas ruhigeres Format, weniger Anschnitt */
.post .figure { aspect-ratio: 4 / 3; }
.post .figure img { object-position: center 42%; }

/* ==========================================================================
   ARTIKEL-HERO — Bild mit Titel darüber
   ========================================================================== */
.article__hero {
  position: relative; overflow: hidden;
  min-height: min(72vh, 640px);
  display: flex; align-items: flex-end;
  color: var(--c-text-invert);
}
.article__hero-media { position: absolute; inset: -8% 0; }
.article__hero-media .figure { width: 100%; height: 100%; border-radius: 0; background: var(--c-ink); }
.article__hero-media .figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.article__hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,.52) 0%, rgba(20,19,15,.26) 42%, rgba(20,19,15,.76) 100%);
}
.article__hero-inner {
  position: relative; z-index: 2;
  padding-block: calc(var(--header-total) + 2rem) clamp(38px, 5vw, 64px);
}
.article__hero .article__back { color: rgba(244,241,236,.8); }
.article__hero .article__back:hover { color: #fff; }
.article__hero .article__meta { color: rgba(244,241,236,.82); }
.article__hero .post__cat { background: rgba(255,255,255,.16); color: #fff; }
.article__hero .h-display {
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0,0,0,.32);
}
.article__hero .article__sub {
  color: rgba(244,241,236,.88); max-width: 40ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.article__body { padding-top: clamp(34px, 4.4vw, 62px); }

@media (max-width: 620px) { .article__hero { min-height: 62vh; } }

/* Artikel-Hero: kräftigerer Verlauf, damit der Text auf jedem Bild sitzt */
.article__hero-media::after {
  background:
    linear-gradient(180deg, rgba(20,19,15,.52) 0%, rgba(20,19,15,.28) 28%,
                            rgba(20,19,15,.58) 62%, rgba(20,19,15,.88) 100%);
}
.article__hero .h-display, .article__hero .article__sub,
.article__hero .article__meta, .article__hero .article__back {
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}

/* ==========================================================================
   SEITENKOPF MIT BILD (blog.html)
   ========================================================================== */
.pagehero {
  position: relative; overflow: hidden;
  min-height: min(62vh, 520px);
  display: flex; align-items: flex-end;
  color: var(--c-text-invert);
}
.pagehero__media { position: absolute; inset: -8% 0; }
.pagehero__media .figure { width: 100%; height: 100%; border-radius: 0; background: var(--c-ink); }
/* Fokus höher: bei 52 % lag der Bildausschnitt auf dem Boden der Werkstatt,
   jetzt auf Werkbank und Fenstern. */
.pagehero__media .figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.pagehero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,.5) 0%, rgba(20,19,15,.24) 40%, rgba(20,19,15,.82) 100%);
}
.pagehero__inner {
  position: relative; z-index: 2;
  padding-block: calc(var(--header-total) + 2rem) clamp(34px, 4.6vw, 58px);
}
.pagehero .eyebrow { justify-content: flex-start; color: rgba(244,241,236,.75); }
.pagehero .eyebrow::after { display: none; }
.pagehero .h-display {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: 1.08; margin-bottom: .9rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.pagehero .lead {
  color: rgba(244,241,236,.88); max-width: 52ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}

@media (max-width: 620px) { .pagehero { min-height: 54vh; } }

/* ==========================================================================
   ARTIKELKOPF — zweispaltig: Text links, Bild rechts ohne Beschnitt
   ========================================================================== */
.article__opener { background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); }
.article__opener-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 4vw, 72px); align-items: center;
  padding-block: calc(var(--header-total) + clamp(30px, 4vw, 58px)) clamp(34px, 4.4vw, 62px);
}
.article__opener-text { max-width: 34ch; }
.article__opener .h-display {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12;
}
.article__opener .article__sub {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); margin-top: .8rem; max-width: 30ch;
}

/* Das Bild behält sein Originalformat – hoch oder quer, nichts wird angeschnitten */
.article__opener-media {
  margin: 0; display: flex; justify-content: flex-end; align-items: center;
}
.article__opener-media img {
  display: block;
  max-width: 100%;
  max-height: min(66vh, 560px);
  width: auto; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -22px rgba(43,41,38,.4);
}

.article__body { padding-top: clamp(34px, 4.4vw, 62px); }

@media (max-width: 900px) {
  .article__opener-grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .article__opener-text { max-width: none; }
  .article__opener-media { justify-content: flex-start; }
  .article__opener-media img { max-height: 52vh; }
}

/* Wortabstand kommt jetzt aus echten Leerzeichen – kein Einzug in Folgezeilen */
.h-section .line + .line, .h-display .line + .line { margin-left: 0; }
.article__opener-text { max-width: 38ch; }
.article__opener .article__meta { flex-wrap: wrap; row-gap: .35rem; }


/* ==========================================================================
   Konfigurator (konfigurator.html)
   Baut auf dem Größen-Finder auf: links der maßstäbliche Grundriss, rechts
   die Auswahl. Nur was der Finder nicht schon mitbringt, steht hier.
   ========================================================================== */
.kf__grid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
}
@media (max-width: 900px) { .kf__grid { grid-template-columns: 1fr; } }

/* Der Grundriss läuft beim Scrollen mit, die Auswahl ist lang.
   position: sticky braucht dafür einen echten Scroll-Vorfahr – das globale
   overflow-x: hidden auf html/body würde ihn festnageln. clip schneidet
   genauso ab, ohne einen eigenen Scrollcontainer aufzumachen. */
html:has(.kf__grid), body:has(.kf__grid) { overflow-x: clip; }
.kf__plan { position: sticky; top: calc(var(--header-total) + 16px); }
/* static würde den Bezugsrahmen für Platte, Stühle und Maßlinien aufheben */
@media (max-width: 900px) { .kf__plan { position: relative; top: auto; } }

.kf__panel > .pdp__label:first-child { margin-top: 0; }
.kf__panel .sizer__row:first-of-type { padding-top: 0; }

/* Optionsreihen: dieselben Chips wie auf den Produktseiten */
.kf__opts { padding-block: clamp(1.1rem, 1.9vw, 1.6rem); border-bottom: 1px solid var(--c-line); }
.kf__opts .pdp__label { margin-top: 0; }
.kf__opts .product__sizes { margin-bottom: 0; }

/* Preisblock */
.kf__sum { margin-top: clamp(1.4rem, 2.4vw, 2rem); }
.kf-sum__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .5rem; font-size: .95rem; color: var(--c-text-soft);
  border-bottom: 1px dotted var(--c-line);
}
.kf-sum__row b { color: var(--c-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.kf-sum__total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: 1rem;
}
.kf-sum__total span {
  font-family: var(--f-ui); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-text-soft);
}
.kf-sum__total em { font-style: normal; text-transform: none; letter-spacing: .04em; }
.kf-sum__total b {
  font-family: var(--f-display); font-weight: 300; line-height: 1;
  font-size: clamp(2.2rem, 3.6vw, 3rem); color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.kf-sum__note { font-size: .84rem; color: var(--c-text-soft); margin-top: .5rem; }

/* Notiz und Absenden */
.kf__note { margin-top: clamp(1.2rem, 2vw, 1.8rem); }
.kf__note textarea {
  width: 100%; min-height: 92px; resize: vertical;
  padding: .85rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--f-body); font-size: 1rem; line-height: 1.5;
}
.kf__note textarea:focus-visible { outline: none; border-color: var(--c-text); }
.kf__actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.1rem; }
.kf__actions .btn { width: 100%; }
.kf__done {
  margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--c-bg-card); font-size: .92rem; color: var(--c-text-soft);
}


/* ==========================================================================
   Cookie-Hinweis
   Markup erzeugt assets/js/consent.js und hängt es ans Ende des Body.
   Ohne .is-on liegt die Karte unter dem Bildschirmrand.
   ========================================================================== */
.consent {
  position: fixed; z-index: 90;
  left: var(--gutter); bottom: clamp(16px, 2vw, 26px);
  width: min(420px, calc(100vw - var(--gutter) * 2));
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.6rem);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(43, 41, 38, .16);
  opacity: 0; visibility: hidden;
  transform: translateY(calc(100% + 40px));
  transition: transform .55s var(--ease), opacity .35s var(--ease),
              bottom .45s var(--ease), visibility .55s;
}
.consent.is-on { opacity: 1; visibility: visible; transform: translateY(0); }

/* Solange die Sticky-Leiste unten steht, rückt der Hinweis darüber –
   auf dem Handy liegen beide sonst übereinander. */

.consent h2 {
  margin: 0 0 .5rem;
  font-family: var(--f-ui); font-weight: 500;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-text-soft);
}
.consent p {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--c-text);
}
.consent p a { text-decoration: underline; text-underline-offset: 3px; }

.consent__row {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(.9rem, 1.6vw, 1.2rem);
}
.consent__row .btn { margin-left: auto; }
.consent__ghost {
  font-family: var(--f-ui); font-size: .84rem;
  color: var(--c-text-soft); text-decoration: underline; text-underline-offset: 3px;
  transition: color .25s var(--ease);
}
.consent__ghost:hover { color: var(--c-text); }

@media (max-width: 520px) {
  .consent { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .consent__row { gap: .8rem; }
  .consent__row .btn { padding-inline: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: opacity .2s linear, visibility .2s; transform: none; }
}


/* ==========================================================================
   Seiten-Hero (hero--page)
   Stand bisher nur in shop.css – dadurch waren Kontakt und Über Uns
   zentriert, Shop und Konfigurator linksbündig. Gehört ins Grundsystem,
   damit alle Unterseiten gleich ausgerichtet sind.
   ========================================================================== */
.hero.hero--page {
  min-height: min(64svh, 620px);
  place-items: center stretch;
  text-align: left;
}
.hero.hero--page .hero__inner {
  text-align: left; width: 100%;
  max-width: var(--wrap); margin-inline: auto;   /* bündig mit .wrap darunter */
  padding-inline: var(--gutter);
}
.hero.hero--page .h-display,
.hero.hero--page .hero__sub,
.hero.hero--page .eyebrow { margin-inline: 0; justify-content: flex-start; }
.hero--page .hero__inner { padding-block: calc(var(--header-total) + 3.5rem) 4rem; }
.hero--page .h-display { font-size: clamp(2.2rem, 4.6vw, 3.9rem); max-width: 20ch; }
.hero--page .hero__sub { margin-top: 1.1rem; max-width: 46ch; }
.hero--page .eyebrow--light { color: rgba(255,255,255,.82); margin-bottom: 1.2rem; }
.hero--page .eyebrow--light::before,
.hero--page .eyebrow--light::after { background: rgba(255,255,255,.5); }


/* --------------------------------------------------------------------------
   Konfigurator: Bildvorschau beim Überfahren
   Die Auswahl bleibt eine Reihe schlichter Chips. Wer mit Maus oder Tastatur
   auf einer Option landet, bekommt das Foto darüber eingeblendet.
   -------------------------------------------------------------------------- */
.size--bild { position: relative; }

.optpop {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 30;
  width: 176px; padding: 6px;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 38px rgba(43, 41, 38, .18);
  opacity: 0; visibility: hidden; pointer-events: none;
  translate: -50% 6px;
  transition: opacity .22s var(--ease), translate .22s var(--ease), visibility .22s;
}
.optpop img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: contain; background: #fff;
  border-radius: calc(var(--radius-sm) - 4px);
}
/* Kleines Dreieck zum Chip hin */
.optpop::after {
  content: ""; position: absolute; top: 100%; left: 50%; translate: -50% -1px;
  border: 7px solid transparent; border-top-color: var(--c-bg);
  filter: drop-shadow(0 1px 0 var(--c-line));
}
.size--bild:hover .optpop,
.size--bild:focus-visible .optpop {
  opacity: 1; visibility: visible; translate: -50% 0;
}

@media (prefers-reduced-motion: reduce) {
  .optpop { transition: opacity .15s linear, visibility .15s; translate: -50% 0; }
}


/* --------------------------------------------------------------------------
   Journal: Aufmacher über die volle Breite, darunter das Raster
   -------------------------------------------------------------------------- */
.post--lead {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(24px, 3.4vw, 60px); align-items: center;
  padding-bottom: clamp(26px, 3.2vw, 48px);
  border-bottom: 1px solid var(--c-line);
}
.post--lead .figure { margin-bottom: 0; aspect-ratio: 16 / 10; }
.post--lead .post__leadtext { display: flex; flex-direction: column; }
.post--lead .post__flag {
  font-family: var(--f-ui); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-text-soft);
  margin-bottom: .9rem;
}
.post--lead .post__flag::before {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: var(--c-line); vertical-align: middle; margin-right: .7rem;
}
.post--lead .post__title { font-size: clamp(1.55rem, 2.6vw, 2.25rem); line-height: 1.22; }
.post--lead .post__excerpt { font-size: 1.05rem; line-height: 1.7; }

@media (max-width: 820px) {
  .post--lead { grid-template-columns: 1fr; gap: 1.3rem; align-items: start; }
  .post--lead .figure { aspect-ratio: 4 / 3; }
}


/* Bewertungszeile über den Stimmen */
.voices__rating {
  display: flex; align-items: center; gap: .55rem;
  margin: -.4rem 0 clamp(1.4rem, 2.4vw, 2.2rem);
  font-family: var(--f-ui); font-size: .82rem; color: var(--c-text-soft);
}
.voices__rating b { color: var(--c-text); font-weight: 500; }
.voices__stars { color: #b8860b; letter-spacing: .12em; font-size: .9rem; }


/* Stimmen: Kundenfotos kommen in ganz unterschiedlichen Formaten – quer,
   quadratisch, hoch. Ein fester Ausschnitt schneidet dabei immer jemandem
   den Tisch ab. Die Bühne bleibt deshalb im ruhigen Querformat, das Bild
   wird hineingelegt statt hineingeschnitten: nichts fehlt, der Rand füllt
   sich mit dem warmen Kartenton. */
.voices__media .figure {
  aspect-ratio: 4 / 3.2;
  background: var(--c-bg-card);
}
/* Die Bilder liegen absolut im Rahmen – der Abstand muss deshalb an das Bild,
   nicht an den Rahmen. */
.voices__media .figure img {
  object-fit: contain;
  box-sizing: border-box;
  padding: clamp(10px, 1.2vw, 18px);
}
@media (max-width: 620px) { .voices__media .figure { aspect-ratio: 4 / 3.6; } }


/* Startseiten-Produkte: zweites Foto beim Überfahren, wie die Karten im Shop */
.product__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius); margin-bottom: 1.15rem;
  background: var(--c-bg-card);
}
.product__media .figure { margin-bottom: 0; }
.product__hover {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .7s var(--ease);
}
.product__hover img { width: 100%; height: 100%; object-fit: cover; }
.product:hover .product__hover { opacity: 1; }
@media (hover: none) { .product__hover { display: none; } }


/* ==========================================================================
   KONTAKTSEITE
   Markup: kontakt.html, Logik: assets/js/kontakt.js
   Links die Direktdaten als Karte, rechts das Formular.
   ========================================================================== */
.kontakt__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
}
@media (max-width: 900px) { .kontakt__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Direktdaten */
.kontakt__card {
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}
.kontakt__card .eyebrow { margin-bottom: clamp(1.3rem, 2.2vw, 1.9rem); }

.kdaten { display: flex; flex-direction: column; }
.kdaten__item {
  display: flex; flex-direction: column; gap: .3rem;
  padding-block: clamp(1rem, 1.7vw, 1.4rem);
  border-top: 1px solid var(--c-line);
}
.kdaten__item:first-child { border-top: 0; padding-top: 0; }
.kdaten__label {
  font-family: var(--f-ui); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-text-soft);
}
.kdaten__value {
  font-size: 1.12rem; color: var(--c-text); line-height: 1.4;
  transition: opacity .25s var(--ease);
}
a.kdaten__value:hover { opacity: .65; }
.kdaten__value--plain { cursor: default; }
.kdaten__hint { font-size: .88rem; line-height: 1.5; color: var(--c-text-soft); }

.kdaten__socials {
  display: flex; flex-direction: column; gap: .7rem;
  padding-top: clamp(1rem, 1.7vw, 1.4rem);
  border-top: 1px solid var(--c-line);
}
.socials--inline { display: flex; gap: .6rem; }
.socials--inline a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--c-line); border-radius: 50%;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.socials--inline a:hover { border-color: var(--c-text); background: var(--c-text); color: var(--c-bg); }
.socials--inline svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* -------------------------------------------------------------- Formular */
.kontakt__intro { color: var(--c-text-soft); margin-bottom: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 52ch; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: clamp(14px, 1.8vw, 22px); }
/* :not(.check) – die Einwilligung ist ebenfalls ein <label>, soll aber
   normaler Fließtext bleiben und keine Versalien-Beschriftung werden. */
.field > label:not(.check) {
  font-family: var(--f-ui); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-text-soft);
}
.field__req { color: var(--c-text); }
.field__opt { text-transform: none; letter-spacing: .04em; opacity: .75; }

.field input,
.field select,
.field textarea {
  width: 100%; box-sizing: border-box;
  padding: .8rem 1rem;
  font-family: var(--f-body); font-size: 1rem; line-height: 1.5; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--c-text-soft); opacity: .75; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #d5cabd; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none; border-color: var(--c-text);
  box-shadow: 0 0 0 1px var(--c-text);
}

/* Auswahlfelder: eigenes Pfeilchen statt System-Optik */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232b2926' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.field__phone { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }

.field__error {
  font-family: var(--f-ui); font-size: .82rem; color: #9a3b30;
}
.field__error:empty { display: none; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #9a3b30; }

/* ------------------------------------------------------------ Einwilligung */
.field--check { margin-top: .4rem; }
.check {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: .8rem; align-items: start; cursor: pointer;
}
.check input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.check__box {
  width: 22px; height: 22px; margin-top: .1rem;
  border: 1px solid var(--c-line); border-radius: 6px;
  background: var(--c-bg);
  display: grid; place-items: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.check__box::after {
  content: ""; width: 11px; height: 6px;
  border-left: 1.6px solid var(--c-bg); border-bottom: 1.6px solid var(--c-bg);
  transform: rotate(-45deg) translate(1px, -1px) scale(.6);
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.check:hover .check__box { border-color: var(--c-text); }
.check input:checked + .check__box { background: var(--c-text); border-color: var(--c-text); }
.check input:checked + .check__box::after { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-text); }
.check__text { font-size: .94rem; line-height: 1.6; color: var(--c-text-soft); }
.check__text a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Fuß */
.form__foot {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem);
  flex-wrap: wrap; margin-top: clamp(1.2rem, 2vw, 1.8rem);
}
.form__foot .btn { flex: 0 0 auto; min-width: 190px; }
.form__hint { flex: 1 1 260px; margin: 0; font-size: .86rem; line-height: 1.55; color: var(--c-text-soft); }

/* -------------------------------------------------------- Nach dem Senden */
.form__done {
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.8vw, 2.6rem);
}
.form__done-mark {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--c-text); color: var(--c-bg);
}
.form__done-mark svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.form__done h3 { margin-bottom: .7rem; }
.form__done p { color: var(--c-text-soft); margin-bottom: 1.4rem; }
.form__done p a { text-decoration: underline; text-underline-offset: 3px; }
.form__done-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.form__preview {
  margin-top: 1.4rem; padding: 1rem 1.1rem; max-height: 260px; overflow: auto;
  background: var(--c-bg-card); border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; line-height: 1.6; color: var(--c-text-soft);
  white-space: pre-wrap; word-break: break-word;
}
.form__preview:empty { display: none; }


/* ==========================================================================
   Ruhiges Band (kontakt.html)
   Heller Abschnitt zwischen dem beigen Formular und dem dunklen Footer.
   ========================================================================== */
.band-quiet {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding-block: clamp(48px, 6vw, 86px);
}
/* Der Umbruch sitzt im Markup am Gedankenstrich – zwei Zeilen, nicht drei.
   Auf schmalen Bildschirmen bricht der Satz zusätzlich von selbst um. */
.band-quiet .h-section { margin: 0 auto; max-width: none; text-wrap: balance; }
.band-quiet .ig-grid { margin-block: clamp(1.8rem, 3.2vw, 2.8rem); }
.band-quiet .btn { margin-top: 0; }


/* Hinweis über dem Kontaktformular, wenn jemand aus dem Warenkorb kommt */
.form__note {
  margin: 0 0 clamp(1.2rem, 2vw, 1.8rem);
  padding: .9rem 1.1rem;
  background: var(--c-bg-card); border-radius: var(--radius-sm);
  font-size: .92rem; line-height: 1.6; color: var(--c-text-soft);
  border-left: 2px solid var(--c-text);
}


/* --------------------------------------------------------------------------
   Fremde Seite im Rahmen (Startseite und Über Uns, Jona Foundation)
   Ein einziges langes Bild der Startseite in einem Fenster, das man selbst
   scrollt – nichts wird von der fremden Domain nachgeladen, und wer lesen
   will, bestimmt das Tempo.
   -------------------------------------------------------------------------- */
.band-dark__media--site {
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 64px);
  min-height: 0;
}
.sitescroll {
  /* Die Vorlage ist 900 px breit. Je naeher das Fenster daran liegt, desto
     lesbarer ist die abgebildete Seite – bei 540 px wurde alles auf 60 %
     geschrumpft und die Schrift darauf unleserlich klein. */
  width: 100%; max-width: 900px; margin: 0;
}
/* Angedeutete Browserleiste, damit klar ist: das ist eine andere Website */
.sitescroll__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: #ebe7e2;
  border-radius: 14px 14px 0 0;
}
.sitescroll__bar em {
  font-style: normal;
  font-family: var(--f-ui); font-size: .66rem; letter-spacing: .1em;
  color: #6f6a64; background: #fff;
  border-radius: 99px; padding: .3em 1.1em;
}

.sitescroll__view {
  position: relative;
  aspect-ratio: 16 / 11;          /* querformatiges Fenster */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .38);
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 41, 38, .3) transparent;
}
.sitescroll__view img { display: block; width: 100%; height: auto; }
.sitescroll__view::-webkit-scrollbar { width: 9px; }
.sitescroll__view::-webkit-scrollbar-track { background: transparent; }
.sitescroll__view::-webkit-scrollbar-thumb {
  background: rgba(43, 41, 38, .28); border-radius: 99px;
  border: 2px solid #fff;
}
.sitescroll__view:focus-visible { outline: 2px solid var(--c-text-invert); outline-offset: 3px; }

.sitescroll__hint {
  margin-top: .8rem; text-align: center;
  font-family: var(--f-ui); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(244, 241, 236, .6);
}
.sitescroll__hint span { margin-left: .35em; }

/* Am Rechner bekommt die Bildspalte mehr Platz, sobald darin die fremde
   Seite steckt: 800 statt 605 px heisst 89 statt 67 Prozent Massstab –
   der Unterschied zwischen „erkennbar“ und „lesbar“. */
@media (min-width: 1100px) {
  .band-dark__grid:has(.band-dark__media--site) {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
  .band-dark__media--site { padding: clamp(20px, 2.2vw, 34px); }
}

@media (max-width: 900px) {
  /* Wenig Rand, damit das Fenster die volle Breite bekommt – auf dem Handy
     zaehlt jeder Pixel fuer die Lesbarkeit. */
  .band-dark__media--site { padding: clamp(12px, 3vw, 24px); }
  .sitescroll { max-width: none; }
  /* Hochformatiges Fenster: mehr von der Seite auf einen Blick */
  .sitescroll__view { aspect-ratio: 3 / 4; }
}


/* ==========================================================================
   MOBIL — Tippflächen und Mindestschriftgröße
   Gemessen bei 390 px: Warenkorb-Knopf 58 x 24, Menü-Knopf 26 x 16, die
   Regler nur 3 px hoch. Alles unter dem Daumenmaß von rund 44 px.
   ========================================================================== */

/* Unsichtbare Vergrößerung der Trefferfläche – die Optik bleibt unverändert */
.cart-btn { position: relative; }
.cart-btn::after,
.burger::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 44px; height: 44px;
}

/* Regler: die sichtbare Spur bleibt 3 px, der Griffbereich wächst auf 44 px.
   Nur auf Touch-Geräten, damit die Zeilenhöhe am Rechner gleich bleibt. */
@media (hover: none) and (pointer: coarse) {
  #rngLen, #rngWid { height: 44px; background: transparent; }
  #rngLen::-webkit-slider-runnable-track,
  #rngWid::-webkit-slider-runnable-track {
    height: 3px; border-radius: 3px; background: var(--c-line);
  }
  #rngLen::-webkit-slider-thumb,
  #rngWid::-webkit-slider-thumb { margin-top: -8.5px; }
  #rngLen::-moz-range-track,
  #rngWid::-moz-range-track { height: 3px; border-radius: 3px; background: var(--c-line); }
}

/* Kleinste Beschriftungen auf mindestens 12 px – darunter wird es auf dem
   Handy mühsam, und Google wertet es als Mangel. */
@media (max-width: 620px) {
  .eyebrow,
  .claim__inner,
  .post__meta, .post__cat, .post__flag,
  .kdaten__label,
  .voices__label,
  .sizer__label, .sizer__ticks,
  .pcard__count, .pcard__meta,
  .field__req, .field__opt,
  .sitescroll__hint, .scroll-hint,
  .voices__rating,
  .consent h2,
  .article__meta, .article__meta *,
  .sitescroll__bar em {
    font-size: .75rem;          /* 12 px bei 16 px Grundgröße */
    letter-spacing: .12em;      /* enger, damit die Zeilen nicht umbrechen */
  }
  .sizer__ticks i { font-size: inherit; }
}


/* --------------------------------------------------------------------------
   Startseite, Abschnitt „Echte Handarbeit"
   Der Rahmen war quadratischer als das Foto (4:3,4 gegen 4:3,15) und der
   Parallax-Zoom vergrößerte zusätzlich um 18 %. Zusammen fehlte rund ein
   Viertel des Bildes. Jetzt folgt der Rahmen dem Bildformat, und der Zoom
   bleibt gerade so groß, dass die Parallaxe noch Spielraum hat.
   -------------------------------------------------------------------------- */
#ueber-uns .story .figure { aspect-ratio: 1538 / 1492; --px-zoom: 1.06; }
#haltung .story .figure { --px-zoom: 1.06; }
@media (max-width: 860px) { #ueber-uns .story .figure { aspect-ratio: 1538 / 1492; } }


/* Band „Bist du bereit für dein Unikat?" – der Tisch sitzt im oberen Teil des
   Bildes, mittiger Ausschnitt zeigte vor allem den Boden. */
.cta-band__media .figure img { object-position: center 30%; }


/* ==========================================================================
   INSPIRATIONSGALERIE (inspiration.html)
   Spaltenlayout statt starrem Raster: jedes Bild behält sein eigenes Format,
   nichts wird beschnitten.
   ========================================================================== */
.galerie {
  columns: 3;
  column-gap: clamp(10px, 1.4vw, 18px);
}
@media (max-width: 900px) { .galerie { columns: 2; } }
@media (max-width: 520px) { .galerie { columns: 1; } }

.galerie__kachel {
  display: block; width: 100%; padding: 0; margin: 0 0 clamp(10px, 1.4vw, 18px);
  border: 0; background: var(--c-bg-card); cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden;
  break-inside: avoid;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.galerie__kachel img { display: block; width: 100%; height: auto; }
.galerie__kachel:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(43,41,38,.16); }
.galerie__kachel:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }

.galerie__hinweis {
  margin-top: clamp(1.4rem, 2.4vw, 2rem); text-align: center;
  font-family: var(--f-ui); font-size: .82rem; color: var(--c-text-soft);
}
/* Im Band steht der section-head auf dem Bild: helle Haarlinie, und der
   sonst große Abstand nach unten muss weg, damit Text und Knopf folgen. */
.cta-band .section-head { margin-bottom: 0; }
.cta-band .eyebrow { color: rgba(244,241,236,.75); }
.cta-band .section-head p, .cta-band > .cta-band__inner > p { max-width: 52ch; margin-inline: auto; }

/* ------------------------------------------------------------ Leuchtkasten */
/* Ohne diese Zeile gewinnt display:grid gegen das hidden-Attribut – der
   unsichtbare Kasten fängt dann sämtliche Klicks auf der Seite ab. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(8px, 2vw, 28px); padding: clamp(12px, 3vw, 40px);
  background: rgba(20, 19, 15, .92);
  opacity: 0; transition: opacity .25s var(--ease);
}
.lightbox.is-on { opacity: 1; }
.lightbox__buehne {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: .9rem; min-width: 0;
}
.lightbox__buehne img {
  max-width: 100%; max-height: 78svh; width: auto; height: auto;
  border-radius: var(--radius-sm); background: #fff;
}
.lightbox__buehne figcaption {
  font-family: var(--f-ui); font-size: .86rem; color: rgba(244,241,236,.8);
  text-align: center; max-width: 60ch;
}
.lightbox__zu {
  position: absolute; top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px);
  width: 44px; height: 44px; border-radius: 50%;
  color: #fff; font-size: 1.9rem; line-height: 1;
  background: rgba(255,255,255,.12);
  transition: background .25s var(--ease);
}
.lightbox__zu:hover { background: rgba(255,255,255,.24); }
.lightbox__pfeil {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.12);
  transition: background .25s var(--ease);
}
.lightbox__pfeil:hover { background: rgba(255,255,255,.24); }
.lightbox__pfeil svg { width: 20px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__zu:focus-visible, .lightbox__pfeil:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 620px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__pfeil { position: absolute; bottom: clamp(12px, 4vw, 28px); }
  .lightbox__pfeil--vor { left: 22%; }
  .lightbox__pfeil--zurueck { right: 22%; }
  .lightbox__buehne img { max-height: 66svh; }
}


/* Größen-Finder schmaler: der Block lief über die volle Inhaltsbreite und
   wirkte dadurch breiter als die Abschnitte darüber und darunter. */
#groesse .sizer__grid { max-width: 1160px; margin-inline: auto; grid-template-columns: 1.6fr .7fr; }

/* Die beiden Geschichten liefen über die volle Inhaltsbreite von 1240 px und
   standen damit breiter als der Größen-Finder direkt darunter. Gleiche Breite,
   gleiche Kante – auf schmalen Fenstern greift die Begrenzung nicht. */
.stories .story { max-width: 1160px; margin-inline: auto; }
@media (max-width: 1100px) { .stories .story { max-width: none; } }
#groesse .section-head { max-width: 1160px; margin-inline: auto; }
@media (max-width: 1100px) { #groesse .sizer__grid, #groesse .section-head { max-width: none; } }
/* Wichtig: Die Regel oben steht mit #groesse hoeher als die Umbruchregeln
   weiter oben im Blatt. Ohne diese Zeile blieb der Groessen-Finder auf dem
   Handy zweispaltig – die Zeichnung wurde auf 150 px gequetscht. */
@media (max-width: 900px) { #groesse .sizer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FEINSCHLIFF
   Kein zusätzliches Geflacker – die Seite bewegt sich schon genug. Was hier
   folgt, sind Details, die man einzeln kaum bemerkt und in Summe schon.
   ========================================================================== */

/* --- Auswahlfarbe statt Browser-Blau ------------------------------------- */
::selection      { background: var(--c-accent); color: var(--c-ink); }
::-moz-selection { background: var(--c-accent); color: var(--c-ink); }

/* --- Ligaturen und Kerning der Garamond nutzen --------------------------- */
body {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

/* --- Große Überschriften nicht mit einem Wort in der letzten Zeile -------- */
.h-display { text-wrap: balance; }

/* --- Ziffern in gleicher Breite, wo Zahlen live wechseln ----------------- */
/* Beim Ziehen am Regler sprang die Beschriftung der Maßlinien, weil die
   Garamond unterschiedlich breite Ziffern hat. */
.dimline span,
.kf-sum b,
.cart-count { font-variant-numeric: tabular-nums; }

/* --- Seitenwechsel als weiche Blende ------------------------------------- */
/* Browser ohne Unterstützung ignorieren den Block und wechseln hart – kein
   Nachteil, nur kein Übergang. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtRaus .26s var(--ease) both; }
::view-transition-new(root) { animation: vtRein .34s var(--ease) both; }
@keyframes vtRaus { to   { opacity: 0; } }
@keyframes vtRein { from { opacity: 0; transform: translateY(10px); } }

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

/* --- Bilder blenden auf, statt ins Layout zu springen -------------------- */
/* Greift nur, wenn JavaScript die Klasse setzt – ohne JS bleibt alles wie
   bisher sichtbar, kein leeres Kästchen. */
.js-fade img { opacity: 0; filter: blur(12px); transform: scale(1.02); }
.js-fade img.is-ready {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js-fade img { opacity: 1; filter: none; transform: none; }
}

/* Der Bildwechsler bei den Stimmen steuert die Deckkraft selbst. Die Regel
   oben hatte sie überschrieben – alle vier Bilder standen auf sichtbar und
   das letzte verdeckte die anderen, es wechselte nichts mehr. */
.js-fade .voices__media img { opacity: 0; filter: none; transform: scale(1.05); }
.js-fade .voices__media img.is-on { opacity: 1; filter: none; transform: scale(1); }

/* --- Bildlaufleiste in den Farben der Seite ----------------------------- */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--c-accent-dark) var(--c-bg-soft); }
  html::-webkit-scrollbar { width: 11px; }
  html::-webkit-scrollbar-track { background: var(--c-bg-soft); }
  html::-webkit-scrollbar-thumb {
    background: var(--c-accent-dark); border-radius: 99px;
    border: 3px solid var(--c-bg-soft);
  }
  html::-webkit-scrollbar-thumb:hover { background: var(--c-text-soft); }
}


/* Das Menü liegt im Stapelkontext der Kopfzeile. Ohne diese beiden Zeilen
   deckt seine weiße Fläche Logo und Burger mit ab – beide müssen darüber
   bleiben, sonst schließt man das Menü nicht mehr. */
@media (max-width: 860px) {
  .brand, .header__actions { position: relative; z-index: 2; }
}

/* ==========================================================================
   MOBILES MENÜ — Burger wird zum Kreuz
   ========================================================================== */
.burger span { transform-origin: center; }
.burger.is-x span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger.is-x span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger.is-x span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* Seite steht still, solange das Menü offen ist */
body.menu-open { overflow: hidden; }

/* Der Fortschrittsbalken liegt mit z-index 70 ueber allem – bei offenem Menue
   sah man ihn als hellen Streifen ueber der Kopfzeile. Er gehoert dort nicht
   hin, solange das Menue die Seite verdeckt. */
body.menu-open .progress { opacity: 0; }
.progress { transition: opacity .25s var(--ease); }

/* Die Kopfzeile bleibt über dem Menü bedienbar */
.header.is-open-menu { background: var(--c-bg-dark); color: var(--c-text-invert); box-shadow: none; }

/* Wichtig: Solange das Menue offen ist, darf die Kopfzeile keinen eigenen
   Bezugsrahmen aufspannen. `backdrop-filter` (ab 40 px Scrollhoehe durch
   .is-solid) und `transform` (.is-hidden beim Runterscrollen) tun genau das –
   das mit `position: fixed` ganzflaechig gedachte Menue klebte dann im
   68 px hohen Kopfzeilenstreifen statt im Fenster. Deshalb funktionierte der
   Burger nur ganz oben auf der Seite. */
.header.is-open-menu,
.header.is-open-menu.is-solid,
.header.is-open-menu.is-hidden {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  filter: none;
  perspective: none;
  height: var(--header-total);
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .nav a, .nav.is-open a { transition: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   FUSSZEILE AUF DEM HANDY
   Einspaltig war sie über 1000 px hoch – anderthalb Bildschirme, durch die
   man scrollen muss, bevor die Seite endet. Die beiden Linklisten stehen
   jetzt nebeneinander, die Blöcke in sinnvoller Reihenfolge.
   ========================================================================== */
@media (max-width: 620px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: clamp(26px, 6vw, 34px);
  }
  /* Reihenfolge: Marke · Menü | Info · Kontakt · Profile */
  .footer__grid > *:nth-child(1) { order: 1; grid-column: 1 / -1; }  /* Marke   */
  .footer__grid > *:nth-child(4) { order: 2; }                       /* Menü    */
  .footer__grid > *:nth-child(5) { order: 3; }                       /* Info    */
  .footer__grid > *:nth-child(3) { order: 4; grid-column: 1 / -1; }  /* Kontakt */
  .footer__grid > *:nth-child(2) { order: 5; grid-column: 1 / -1; }  /* Profile */

  .footer .brand { font-size: 1.5rem; margin-bottom: .8rem; }
  .footer__about { max-width: none; font-size: .94rem; }
  .footer h4 { font-size: 1.08rem; margin-bottom: .7rem; }

  /* Tippflächen auf Daumenmaß, ohne dass die Liste dadurch länger wird */
  .footer ul { gap: .1rem; }
  .footer ul a { padding-block: .55rem; }
  .footer__contact { gap: .1rem; }
  .footer__contact a { padding-block: .55rem; display: inline-block; }

  .socials { gap: .9rem; }
  .footer__bottom {
    margin-top: clamp(26px, 6vw, 38px); padding-top: 1.2rem;
    flex-direction: column; gap: .5rem; font-size: .8rem;
  }
}

/* ==========================================================================
   KONFIGURATOR AUF DEM HANDY
   Die feste Preisleiste am unteren Rand ist wieder raus – sie verdeckte
   Inhalt und wurde nicht gebraucht.
   ========================================================================== */
@media (max-width: 860px) {
  /* Chips auf Daumenmass – sie lagen bei 42 px, knapp unter dem Richtwert */
  .size, .product__sizes button { min-height: 44px; }
}

/* --- Vorteile: Spaltenzahl mit der Breite --------------------------------- */
@media (max-width: 1100px) {
  .usp__list { grid-template-columns: repeat(3, 1fr); }
  /* 5 Punkte auf 3 Spalten: die letzten beiden teilen sich die Reihe mittig */
  .usp__list li:nth-child(4) { grid-column: 1 / span 2; }
  .usp__list li:nth-child(5) { grid-column: 3; }
}
@media (max-width: 620px) {
  .usp__list {
    grid-template-columns: 1fr 1fr;
    gap: clamp(.9rem, 3.4vw, 1.3rem);
    padding-block: clamp(1.3rem, 5vw, 1.7rem);
  }
  .usp__list li { font-size: .86rem; gap: .6rem; align-items: center; }
  .usp__list li:nth-child(4), .usp__list li:nth-child(5) { grid-column: auto; }
  /* Der fünfte Punkt stünde allein in der linken Spalte – über beide gezogen
     wirkt die Reihe abgeschlossen statt abgebrochen. */
  .usp__list li:last-child { grid-column: 1 / -1; }
  .usp__list img { width: 30px; height: 30px; }
}

/* ==========================================================================
   CTA „Dein Tisch ist nicht dabei?“ – auf dem Handy aus
   Direkt darunter steht die Fusszeile mit demselben Weg zum Konfigurator;
   auf dem kleinen Bildschirm ist das eine Bildstrecke zu viel.
   ========================================================================== */
@media (max-width: 860px) {
  .cta-band--nichtdabei { display: none; }
}


/* ==========================================================================
   SICHERE BEREICHE (iPhone)
   Mit viewport-fit=cover reicht die Seite bis in die Ecken. Alles, was fest
   am unteren oder seitlichen Rand klebt, braucht deshalb den Abstand zur
   Statusleiste, zum Home-Balken und im Querformat zur Notch.
   ========================================================================== */
.consent { bottom: calc(clamp(16px, 2vw, 26px) + env(safe-area-inset-bottom, 0px)); }
.toast   { bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.drawer  { padding-bottom: env(safe-area-inset-bottom, 0px); }
.footer  { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1px); }

@media (max-width: 860px) {
  .nav {
    padding-top: calc(var(--header-total) + 2.2rem);
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (orientation: landscape) {
  .wrap, .header__inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
}


/* ==========================================================================
   KOPFZEILE AUF DEM HANDY — ohne Weichzeichner, ohne Hoehenwechsel
   Bei jonafoundation.org liegt die Navigation dauerhaft durchsichtig ueber
   der Seite: kein backdrop-filter, keine wechselnde Hoehe, kein transform.
   Deshalb gibt es dort nie einen Streifen. Hier war beides im Spiel –
   `backdrop-filter` loest ein festes Element auf iOS aus dem Fensterbezug,
   und die Hoehenanimation von 84 auf 68 px zeigte den Versatz zusaetzlich.
   Beides faellt auf schmalen Bildschirmen weg; die Farbe bleibt, damit die
   Menuepunkte auf hellen Seiten lesbar sind.
   ========================================================================== */
@media (max-width: 860px) {
  .header {
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    transition: background .4s var(--ease), color .4s var(--ease);
  }
  /* DER KERN DES PROBLEMS
     Ein `position: fixed` Element setzt Safari auf dem iPhone am oberen Rand
     des sicheren Bereichs an – also 59 px unter der Bildschirmkante. Der
     normale Seiteninhalt wird aber bis 0 gezeichnet. Deshalb blieb ueber der
     weissen Kopfzeile immer ein Streifen Seite stehen, egal was wir an ihr
     geaendert haben. Das war messbar: Weiss begann exakt bei CSS 59 bzw. 61.

     `position: sticky` gehoert dagegen in den normalen Fluss und klebt am
     Rand des Layout-Fensters – und das faengt bei 0 an. Der negative
     Aussenabstand nimmt die Hoehe wieder aus dem Fluss heraus, damit der
     Hero wie bisher direkt oben beginnt und die Kopfzeile darueber liegt. */
  .header {
    position: sticky;
    top: 0;
    margin-bottom: calc(-1 * (var(--header-h) + env(safe-area-inset-top, 0px)));
  }
  .header.is-solid {
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    background: #fff;
    box-shadow: 0 1px 0 var(--c-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .header.is-solid .brand { font-size: 1.25rem; }
}