/* ==========================================================================
   STAMWERK · stamwerk.de · Redesign 2026
   Designsystem: Schwarz #000, DM Sans 200/300/400, Hairlines statt Flächen
   ========================================================================== */

:root {
  --ground: #000000;
  --ink: #F2EFE9;
  --text: #A9A6A0;
  --muted: #8A8782;
  --dim: #55534F;
  --hair: rgba(242, 239, 233, 0.14);
  --hair-strong: rgba(242, 239, 233, 0.32);

  --font: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --mx: clamp(24px, 6.667vw, 96px);      /* Seitenrand: 96 px auf 1440 */
  --sec: clamp(160px, 19.44vw, 280px);   /* Sektionsabstand: 280 px auf 1440 */
  --head-gap: clamp(72px, 10vw, 144px);  /* Sektionskopf → Inhalt */
  --gut: clamp(16px, 2.22vw, 32px);      /* Gutter */
  --col-gap: clamp(56px, 10vw, 144px);   /* Zweispalter */

  --h1: clamp(56px, 10.55vw, 152px);
  --h2: clamp(32px, 3.9vw, 56px);
  --h3: clamp(22px, 1.95vw, 28px);
  --lead: clamp(18px, 1.55vw, 22px);
  --body: clamp(15px, 1.1vw, 16px);
  --small: 13px;
  --label: 11px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 1.2s;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, dt, figure, ol, ul, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--mx); }
h1, h2, h3, p, dd, dt, li, figcaption { overflow-wrap: break-word; }
.nw { white-space: nowrap; }
.sec { padding-top: var(--sec); }
/* Die Sektionen liegen ueber der stehenden Hero und verdecken sie beim Scrollen. */
main > .sec:first-of-type { background: var(--ground); }
main > .sec, .foot { position: relative; z-index: 1; background: var(--ground); }

/* ---------- Typografie ---------- */
.lab {
  font-size: var(--label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}
.lab--ink { color: var(--ink); }
.lab--dim { color: var(--muted); }   /* --dim reicht als Textfarbe nicht (Kontrast), nur fuer Linien und Deko */
.h2 {
  font-weight: 200;
  font-size: var(--h2);
  line-height: 1.02;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h3 { font-weight: 300; font-size: var(--h3); line-height: 1.2; letter-spacing: 0.01em; }
.h3--caps { text-transform: uppercase; letter-spacing: 0.06em; font-size: 20px; }
.t { font-size: var(--body); line-height: 1.7; color: var(--text); font-weight: 300; }
.t--ink { color: #E4E1DA; }
.t--small { font-size: var(--small); }
.t--dim { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Masken / Reveal-Grundzustände (nur mit JS und ohne reduzierte Bewegung) ---------- */
.mask { display: block; overflow: hidden; }
.mask__in { display: block; }
/* Hero-Texte sind ab dem ersten Bild sichtbar (Plan 1.10: der Loader und die Masken
   duerfen den LCP nicht verzoegern). Die Animation ist nur noch Bewegung: die Zeilen
   stehen leicht tiefer in ihrer Maske und gleiten hoch, ohne aus dem Nichts zu kommen. */
html.js:not(.reduced) .mask__in { transform: translateY(22%); }
html.js:not(.reduced) [data-reveal] { opacity: 0; }
html.js:not(.reduced) [data-reveal-rows] > .row { opacity: 0; }
html.js:not(.reduced) .hair-draw { transform: scaleX(0); transform-origin: left; }
html.js:not(.reduced) [data-hero="eyebrow"] { transform: translateY(12px); }
html.js:not(.reduced) [data-hero="desc"], html.js:not(.reduced) [data-hero="cta"] { transform: translateY(20px); }
html.js:not(.reduced) .nav { opacity: 0; }
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .w__in { display: inline-block; }
html.js:not(.reduced) .split.is-split .w__in { transform: translateY(110%); }

/* ---------- Bausteine ---------- */
.hair { display: block; height: 1px; background: var(--hair); }
.hair--short { width: 48px; }

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 32px;
  border: 1px solid rgba(242, 239, 233, 0.7);
  color: var(--ink);
  font-size: var(--label); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400;
  white-space: nowrap; isolation: isolate; overflow: hidden;
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease); z-index: -1;
}
.btn:hover { color: var(--ground); border-color: var(--ink); }
.btn:hover::before { transform: scaleX(1); }
.btn--fill { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn--fill::before { background: #ffffff; }
.btn--fill:hover { color: var(--ground); }
.btn--nav { height: 46px; padding: 0 26px; border-color: rgba(242, 239, 233, 0.55); }
.btn--small { height: 40px; padding: 0 18px; }

.tl {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--label); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400;
  color: var(--ink); white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.tl--dim { color: var(--muted); }
.tl:hover { color: #ffffff; }
.arr {
  display: inline-block; width: 11px; height: 11px; background: currentColor; flex: 0 0 auto;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 L10 2 M4 2 L10 2 L10 8' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 L10 2 M4 2 L10 2 L10 8' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'/></svg>") center / contain no-repeat;
  transition: transform 0.5s var(--ease);
}
.tl:hover .arr { transform: translate(3px, -3px); }

/* Bilder */
.fig { margin: 0; }
.fig__img { position: relative; height: var(--h, 480px); overflow: hidden; }
.fig__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.98) contrast(1.02) saturate(0.92);
  scale: 1.04;
  transition: scale 1.4s var(--ease), filter 1.2s var(--ease);
  will-change: transform;
}
.fig:hover .fig__img img { scale: 1.08; filter: brightness(1.06) contrast(1.02) saturate(1); }
.fig__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.3) 100%);
}
html.js:not(.reduced) .fig--reveal .fig__img { clip-path: inset(0 0 100% 0); }
.cap {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--hair);
}
.cap .lab:last-child { text-align: right; }

/* Zeilen */
.rows { display: flex; flex-direction: column; }
.row { display: grid; gap: 24px; padding: 22px 0; border-top: 1px solid var(--hair); align-items: baseline; font-size: var(--body); }
.rows::after, .frames::after { content: ""; display: block; height: 1px; background: var(--hair); }
.rows--spec .row { grid-template-columns: 160px 1fr; }
.rows--spec dd { color: var(--ink); }
.rows--preis .row { grid-template-columns: 1fr auto; }
.rows--preis dd { white-space: nowrap; }
.rows--ways .row { grid-template-columns: 110px 1fr; }
.rows--ways dd { color: var(--ink); }
.rows--ways dd a { border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease); }
.rows--ways dd a:hover { border-bottom-color: var(--ink); }

/* Sektionskopf */
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.sec-head__l { display: flex; flex-direction: column; gap: 28px; }
.sec-head__r { display: flex; flex-direction: column; gap: 24px; max-width: 420px; justify-self: end; }
.sec-head + * { margin-top: var(--head-gap); }

/* ==========================================================================
   Ladesequenz
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--ground);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(0);
}
html:not(.js) .loader, html.reduced .loader, .loader.is-done { display: none; }
/* Notbremse: nach 6 s gibt der Loader die Seite in jedem Fall frei. */
.loader { animation: loader-release 0s linear 6s forwards; }
@keyframes loader-release { to { pointer-events: none; opacity: 0; visibility: hidden; } }
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.loader__emblem { width: 56px; height: 56px; opacity: 0; }
.loader__word { font-weight: 200; font-size: 22px; letter-spacing: 0.42em; text-transform: uppercase; padding-left: 0.42em; opacity: 0; }
.loader__line { width: 160px; height: 1px; background: var(--hair); overflow: hidden; }
.loader__line span { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 120px; padding-inline: var(--mx);
  transition: transform 0.7s var(--ease), height 0.7s var(--ease), background-color 0.7s var(--ease), border-color 0.7s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__logo img { height: 36px; width: auto; transition: height 0.7s var(--ease); }
.nav__links { display: flex; gap: 44px; }
.nav__links a { font-size: var(--label); letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; color: var(--ink); position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 24px; }
.nav--scrolled { height: 80px; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--hair); }
.nav--scrolled .nav__logo img { height: 28px; }
.nav--hidden { transform: translateY(-100%); }
/* Zwei Striche, 2 px hoch. Bei 1 px fiel die Linie auf hochaufloesenden
   Displays je nach Skalierung weg oder wurde grau. */
.nav__burger {
  display: none; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 7px; width: 48px; height: 48px; padding: 0; flex: 0 0 auto;
}
.nav__burger span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.6s var(--ease), width 0.6s var(--ease), opacity 0.4s;
}
.nav__burger span:first-child { width: 26px; }
.nav__burger span:last-child { width: 18px; }
.nav__burger.is-open span:first-child { width: 26px; transform: translateY(4.5px) rotate(45deg); }
.nav__burger.is-open span:last-child { width: 26px; transform: translateY(-4.5px) rotate(-45deg); }

/* Mobiles Menü */
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--ground);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
/* Ein zentrierter Block statt oben/unten auseinandergezogen. overflow-y faengt
   flache Fenster ab, etwa ein quer gehaltenes Telefon. */
.menu__inner { height: 100%; padding: 100px var(--mx) 40px; display: flex; flex-direction: column; justify-content: center; gap: clamp(40px, 9vh, 72px); overflow-y: auto; }
.menu__links { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.menu__links a { font-weight: 200; font-size: 34px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.menu.is-open .menu__links a { opacity: 1; transform: translateY(0); }
/* Die Verzoegerung kommt aus --i, das js/main.js beim Oeffnen setzt. Vorher stand
   hier eine Liste bis nth-child(6); der siebte Punkt stand dadurch sofort da,
   waehrend die anderen noch einliefen. So stimmt die Staffel bei jeder Anzahl. */
.menu.is-open .menu__links a { transition-delay: calc(0.25s + var(--i, 0) * 0.07s); }
.menu__foot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; opacity: 0; transition: opacity 0.8s var(--ease) 0.6s; }
.menu.is-open .menu__foot { opacity: 1; }
/* Flache Fenster (Telefon quer): kleiner setzen, damit die Knoepfe ohne Scrollen
   im Bild bleiben. */
@media (max-height: 600px) {
  .menu__inner { justify-content: flex-start; gap: 28px; padding-top: 88px; }
  .menu__links { gap: 12px; }
  .menu__links a { font-size: 24px; }
}
/* Beide Knoepfe gleich breit, damit der zentrierte Stapel eine Kante hat. */
.menu__foot .btn { width: 100%; max-width: 420px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: sticky; top: 0; z-index: 0;
  height: 100svh; min-height: 640px; max-height: 1100px;
  display: grid; grid-template-rows: 1.35fr auto 1.2fr auto; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.55) contrast(1.08) saturate(0.82);
}
.hero__video { opacity: 0; transition: opacity 1.6s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%); }
.hero__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.96) 100%); }
.hero__title { position: relative; grid-row: 2; width: 100%; display: flex; flex-direction: column; gap: 22px; }
/* Groesse der Hero-Zeile
   Auf schmalen Schirmen lief die Zeile vorher gegen den Mindestwert 27 px und
   liess rechts ein Drittel der Breite ungenutzt. Die laengste Zeile,
   „Massivholztische.", ist 8,7-mal so breit wie die Schriftgroesse (bei 0.02em
   Laufweite; ab 481 px sind es 0.08em und damit 9,7-mal). 9.4vw fuellt die
   Textbreite bis knapp unter den Rand, der Deckel bei 40 px faengt den Bereich
   mit der weiteren Laufweite ab. Ueber 606 px uebernimmt wieder 6.6vw, die
   beiden Kurven treffen sich dort ohne Sprung: am Desktop aendert sich nichts. */
.hero__h1 { font-weight: 200; font-size: clamp(24px, max(6.6vw, min(9.4vw, 40px)), 96px); line-height: 0.98; letter-spacing: 0.035em; text-transform: uppercase; margin: 0; }
.hero__h1 .mask { display: block; }
.hero__sub { font-weight: 200; font-size: clamp(17px, 1.65vw, 24px); line-height: 1.35; color: #C9C6BF; letter-spacing: 0.01em; max-width: 46ch; }
.hero__bottom {
  position: relative; grid-row: 4; width: 100%; padding-bottom: 64px;
  display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 48px; align-items: end;
}
.hero__desc { display: flex; flex-direction: column; gap: 24px; max-width: 420px; }
.hero__desc .t { font-size: 17px; }
.hero__cta { display: flex; gap: 14px; align-items: center; justify-self: end; }
.hero__meta { color: var(--muted); text-align: right; }
.hero__cta .btn { padding: 0 40px; }

/* ==========================================================================
   Sektionen
   ========================================================================== */
.manifest__wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.manifest .lab { margin-bottom: 40px; }
.manifest__h {
  font-weight: 200; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.34;
  letter-spacing: 0.005em; max-width: 34ch; text-wrap: balance;
}
.manifest__cta { margin-top: 56px; }
/* Wort-fuer-Wort aufhellen, gesteuert vom Scrollfortschritt */
.manifest__h .hw { display: inline-block; white-space: pre; }
html.js:not(.reduced) .manifest__h .hw { color: rgba(242, 239, 233, 0.2); }

/* Galerie
   Ruhiges Raster aus gleich hohen Kacheln. Name und Nummer liegen ueber dem Bild
   und erscheinen erst beim Darueberfahren. Ab vier Stuecken wird daraus ein
   Slider, damit auch 20 Unikate Platz haben. */
.gallery-wrap { position: relative; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.gal { position: relative; margin: 0; overflow: hidden; background: #0a0a0a; }
.gal__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.gal__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.98) contrast(1.02) saturate(0.92);
  transform: scale(1.02);
  transition: transform 1.3s var(--ease), filter 1s var(--ease);
  will-change: transform;
}
/* Verlauf traegt die Schrift, liegt aber nur beim Hover auf dem Bild */
.gal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.82) 100%);
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.gal__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 26px 28px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.gal:hover .gal__img img, .gal:focus-within .gal__img img { transform: scale(1.07); filter: brightness(1.06) contrast(1.02) saturate(1); }
.gal:hover::after, .gal:focus-within::after { opacity: 1; }
.gal:hover .gal__cap, .gal:focus-within .gal__cap { opacity: 1; transform: none; }
html.js:not(.reduced) .gal { clip-path: inset(0 0 100% 0); }

/* Ohne Zeigegeraet gibt es kein Darueberfahren, dort steht die Beschriftung fest */
@media (hover: none) {
  .gal::after { opacity: 1; }
  .gal__cap { opacity: 1; transform: none; }
}

/* Slider ab vier Stuecken */
.gallery--slider {
  display: flex; gap: var(--gut);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-inline: calc(-1 * var(--mx)); padding-inline: var(--mx);
  /* Ohne scroll-padding schnappt der Browser die Kachel an die Polsterkante statt
     an den Textrand: das erste Bild lag dann bündig am Fensterrand und der
     Slider stand von Anfang an 96 px verschoben. */
  scroll-padding-inline: var(--mx);
}
.gallery--slider::-webkit-scrollbar { display: none; }
.gallery--slider .gal { flex: 0 0 clamp(260px, 30vw, 420px); scroll-snap-align: start; }

.gallery__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.gallery__nav[hidden] { display: none; }
.gal-btn {
  width: 52px; height: 52px; border: 1px solid var(--hair-strong);
  position: relative; transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
/* Der Winkel wird als Maske gezeichnet, mittig in einem 14er-Feld. Vorher war es
   ein gedrehtes Quadrat aus zwei Rahmenlinien, dessen optische Mitte nicht die
   Mitte seines Rahmens ist: die Pfeile sassen sichtbar links im Knopf. */
.gal-btn::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; background: var(--ink);
  transition: background-color 0.5s var(--ease);
}
.gal-btn[data-gal="prev"]::after {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9.25 2.5 L4.75 7 L9.25 11.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M9.25 2.5 L4.75 7 L9.25 11.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'/></svg>") center / contain no-repeat;
}
.gal-btn[data-gal="next"]::after {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4.75 2.5 L9.25 7 L4.75 11.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4.75 2.5 L9.25 7 L4.75 11.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'/></svg>") center / contain no-repeat;
}
.gal-btn:hover { background: var(--ink); border-color: var(--ink); }
.gal-btn:hover::after { background: var(--ground); }
.gal-btn:disabled { opacity: 0.3; pointer-events: none; }

.gallery__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 40px;
}

/* Handlungsbaender */
/* Handlungsband: die Zeile steht ueber die volle Breite, darunter trennt eine
   Haarlinie Text und Knopf. Vorher lag die Ueberschrift in einer 30-Zeichen-Spalte
   und brach in vier kurze Zeilen um, waehrend die Mitte leer blieb. */
.band__inner { display: flex; flex-direction: column; }
.band__inner > .lab { margin-bottom: 30px; }
.band__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--col-gap);
  align-items: end;
  margin-top: clamp(44px, 5vw, 76px); padding-top: 30px;
  border-top: 1px solid var(--hair);
}
.band__foot .t { max-width: 52ch; }
.band__act { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; text-align: right; }

.platte { display: grid; grid-template-columns: 5fr 6fr; gap: var(--col-gap); align-items: start; }
.platte__text { display: flex; flex-direction: column; gap: 32px; padding-top: 80px; }
.platte__text .rows { margin-top: 8px; }

/* Hoelzer: Bild, darunter nur der Name. Die Beschreibung kommt beim Hover. */
.woods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.wood { position: relative; margin: 0; }
.wood__img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0a0a0a; }
.wood__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.98) contrast(1.02) saturate(0.92);
  transform: scale(1.02);
  transition: transform 1.3s var(--ease), filter 1s var(--ease);
}
.wood:hover .wood__img img { transform: scale(1.07); filter: brightness(1.06) contrast(1.02) saturate(1); }
.wood__cap { padding-top: 20px; }
.wood__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wood__head .h3 { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 200; font-size: calc(var(--h3) + 2px); }
.wood__note {
  font-size: var(--small); line-height: 1.6; color: var(--text);
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.7s var(--ease), opacity 0.5s var(--ease), margin-top 0.7s var(--ease);
}
.wood:hover .wood__note, .wood:focus-within .wood__note { max-height: 5em; opacity: 1; margin-top: 12px; }
html.js:not(.reduced) .wood__img { clip-path: inset(0 0 100% 0); }
/* Ohne Zeigegeraet steht die Beschreibung fest */
@media (hover: none) {
  .wood__note { max-height: none; opacity: 1; margin-top: 12px; overflow: visible; }
}

.frames { display: flex; flex-direction: column; }
.frame { grid-template-columns: 60px 260px 1fr 200px 240px 40px; padding: 32px 0; align-items: center; transition: background-color 0.5s; }
.frame__name { font-size: 40px; transition: transform 0.7s var(--ease); }
.frame__desc, .frame__spec { font-size: var(--small); line-height: 1.6; }
.frame__draw svg { width: 240px; height: 150px; stroke: var(--ink); stroke-width: 1.1; fill: none; stroke-linecap: square; }
.frame__draw svg .top { stroke-width: 3; }
.frame__draw svg .dim { stroke: var(--dim); stroke-width: 1; }
.frame__draw svg path:not(.dim), .frame__draw svg line { stroke-dasharray: 700; stroke-dashoffset: 0; }
.frame__arr { justify-self: end; }
.frame__arr .arr { width: 14px; height: 14px; }
.frame:hover .frame__name { transform: translateX(10px); }
.frame:hover .frame__arr .arr { transform: translate(3px, -3px); }

/* Preis */
.preis { position: relative; border-top: var(--sec) solid var(--ground); padding-top: 0; min-height: clamp(760px, 66vw, 960px); overflow: hidden; }
.preis__media { position: absolute; inset: 0; }
.preis__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.8); scale: 1.12; }
.preis__vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%); }
.preis__grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 75%); }
.preis__inner { position: relative; min-height: clamp(760px, 66vw, 960px); display: flex; align-items: center; padding-block: clamp(56px, 7vw, 96px); }
.preis__box { width: 560px; max-width: 100%; display: flex; flex-direction: column; gap: 32px; }
.preis__box .t { font-size: 15px; }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gut); }
.step { display: flex; flex-direction: column; gap: 18px; padding: 28px 32px 0 0; border-top: 1px solid var(--hair); }
.step .t { font-size: var(--small); }
.steps::after { display: none; }

.brueder { display: grid; grid-template-columns: 7fr 5fr; gap: var(--col-gap); align-items: center; }
.brueder__text { display: flex; flex-direction: column; gap: 32px; }

.stars { display: flex; gap: 6px; }
.stars svg { width: 16px; height: 16px; fill: var(--ink); }

.showroom { display: grid; grid-template-columns: 5fr 7fr; gap: var(--col-gap); align-items: center; }
.showroom__text { display: flex; flex-direction: column; gap: 32px; }
.showroom__cta { display: flex; gap: 32px; align-items: center; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.tile__head { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding-top: 18px; align-items: baseline; }
.tile__head .h3 { font-size: calc(var(--h3) - 2px); }
.tile__price { font-size: var(--body); color: var(--text); font-variant-numeric: tabular-nums; }
.tile__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }

.kontakt { display: grid; grid-template-columns: 5fr 6fr; gap: var(--col-gap); align-items: start; }
.kontakt__text { display: flex; flex-direction: column; gap: 32px; }
/* Terminbuchung (Cal.com). Bis der Kalender geladen ist, steht ein ruhiger Monat da,
   danach blendet der Kalender von Cal.com an derselben Stelle ein. */
.booking { display: flex; flex-direction: column; min-width: 0; }
.booking__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--hair-strong); }
/* Hinweis, Ladezeile und Kalender liegen in derselben Rasterzelle uebereinander */
.booking__stage { position: relative; display: grid; }
.booking__stage > * { grid-area: 1 / 1; min-width: 0; }
/* Platzhalter, bis Cal.com geladen hat: ein ruhiger Monat, der nach unten verblasst */
.booking__skeleton {
  align-self: start; display: flex; flex-direction: column; gap: 20px; padding: 72px 0 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  transition: opacity 0.8s var(--ease);
}
.booking__month-name { color: var(--muted); }
.booking__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: clamp(10px, 1.4vw, 18px); }
.booking__grid span { font-size: clamp(15px, 1.5vw, 20px); font-weight: 200; color: var(--dim); font-variant-numeric: tabular-nums; line-height: 1.6; }
.booking__grid .booking__wd { font-size: var(--label); letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; padding-bottom: 6px; }
.booking__grid .is-past { opacity: 0.35; }
.booking__grid .is-today { color: var(--ink); }
.booking__status {
  align-self: start; z-index: 1; padding-top: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: opacity 0.6s var(--ease);
}
/* Ersatzknopf: ohne JavaScript oder wenn Cal.com nicht antwortet */
.booking__fallback { align-self: center; z-index: 2; display: none; padding-top: 72px; }
html:not(.js) .booking__fallback, .booking.is-failed .booking__fallback { display: block; }
html:not(.js) .booking__status, .booking.is-failed .booking__status { display: none; }
.booking__line { position: relative; display: block; height: 1px; background: var(--hair); overflow: hidden; }
.booking__line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
/* Cal.com rueckt den Kalender innen um 20 px ein; so steht er buendig mit Kopf- und Fusslinie */
.booking__cal { position: relative; margin-inline: -20px; opacity: 0; transition: opacity 1s var(--ease); }
.booking__cal iframe { display: block; width: 100% !important; }

.booking:not(.is-ready):not(.is-failed) .booking__line::after { animation: booking-line 1.6s var(--ease) infinite; }
.booking.is-ready .booking__cal { opacity: 1; }
.booking.is-ready .booking__skeleton, .booking.is-ready .booking__status { display: none; }
@keyframes booking-line {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.1% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.booking__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--hair); }

/* ==========================================================================
   Fuß
   ========================================================================== */
.foot { border-top: var(--sec) solid var(--ground); }
.foot__strip { position: relative; height: clamp(360px, 44vw, 640px); overflow: hidden; }
.foot__strip > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95) contrast(1.02) saturate(0.9); scale: 1.05; }
.foot__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.96) 100%); }
.foot__strip-inner { position: absolute; left: 0; right: 0; bottom: 64px; display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.foot__claim { display: flex; flex-direction: column; gap: 14px; }
.foot__cta { display: flex; gap: 16px; }
.foot__cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-top: 96px; font-size: var(--small); line-height: 1.9; color: var(--muted); }
.foot__cols .lab { margin-bottom: 4px; }
.foot__cols a { transition: color 0.4s; }
.foot__cols a:hover { color: var(--ink); }
.foot__wm { padding-top: 144px; }
.foot__word { display: block; width: 100%; height: auto; overflow: visible; }
.foot__word text { fill: var(--ink); font-family: var(--font); font-weight: 200; font-size: 100px; letter-spacing: 0.02em; }
.foot__legal { margin-top: 40px; padding: 20px var(--mx) 40px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.foot__legal-links { display: flex; gap: 24px; color: var(--muted); }
.foot__legal-links a, .foot__legal-links button {
  font: inherit; letter-spacing: inherit; color: inherit; text-transform: none;
}
.foot__legal-links a:hover, .foot__legal-links button:hover { color: var(--ink); }

/* ==========================================================================
   Unterseiten (Über uns, Impressum, Datenschutz)
   ========================================================================== */
.page-head { padding-top: clamp(200px, 17vw, 250px); }
.page-head .lab { margin-bottom: 28px; }
.page-head .h2 { font-size: clamp(34px, 4.6vw, 64px); }
/* Kopf und Text der Rechtsseiten teilen sich Breite und Kante. */
.page-head, .prose { max-width: calc(900px + 2 * var(--mx)); }
.prose h2 { font-weight: 200; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: 0.04em; text-transform: uppercase; margin: 72px 0 24px; line-height: 1.15; }
.prose h3 { font-weight: 300; font-size: 18px; margin: 40px 0 12px; color: var(--ink); }
.prose p, .prose li { color: var(--text); font-size: var(--body); line-height: 1.75; margin: 0 0 16px; }
.prose ul { list-style: none; padding: 0; }
.prose li { padding-left: 20px; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 1px; background: var(--muted); }
.prose a { color: var(--ink); border-bottom: 1px solid var(--hair-strong); transition: border-color 0.4s; }
.prose a:hover { border-bottom-color: var(--ink); }
.prose strong { font-weight: 400; color: var(--ink); }
.prose .rows { margin: 24px 0 32px; }

/* ---------- Über uns ----------
   Die Seite laeuft auf der vollen Rasterbreite der Startseite, nicht auf der
   schmalen Spalte der Rechtsseiten. */
.page-head--wide { max-width: 1440px; }
/* Der Kopf traegt hier einen .sec-head, dessen Spalte den Abstand schon setzt. */
.page-head--wide .lab { margin-bottom: 0; }

/* Bild und Text nebeneinander. Was im Quelltext zuerst steht, bekommt 7 Spalten. */
.about { display: grid; grid-template-columns: 7fr 5fr; gap: var(--col-gap); align-items: start; }
.about__text { display: flex; flex-direction: column; gap: 32px; }

/* Die beiden Brueder: zwei Spalten unter je einer Haarlinie */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.duo .row { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 0 0; }
.duo__name { font-weight: 200; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: 0.05em; text-transform: uppercase; }
.duo .t { max-width: 46ch; }

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width: 1180px) {
  .frame { grid-template-columns: 48px 200px 1fr 160px 200px 32px; }
  .frame__name { font-size: 32px; }
  .frame__draw svg { width: 200px; height: 125px; }
}

/* Die Hauptnavigation traegt fuenf Punkte, davon vier Anker auf die Startseite.
   Unter 1500 px ruecken die Links zusammen und der Knopf wird schmaler, unter
   1300 px uebernimmt das Burger-Menue mit denselben fuenf Punkten. Noch enger
   ginge nur ueber die Laufweite, und die traegt hier die halbe Gestaltung. */
@media (max-width: 1500px) {
  .nav__links { gap: 28px; }
  .btn--nav { padding: 0 20px; }
}

@media (max-width: 1299px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .btn--nav { display: none; }
  .nav__burger { display: flex; }
}

@media (max-width: 1023px) {
  .nav { height: 80px; grid-template-columns: 1fr auto; }
  .nav__links, .btn--nav { display: none; }
  .nav__burger { display: flex; }
  .nav--scrolled { height: 72px; }
  .hero { grid-template-rows: 1fr auto; min-height: 0; max-height: none; height: 100svh; }
  .hero__title { grid-row: 2; padding-bottom: 0; gap: 14px; }
  .hero__h1 { letter-spacing: 0.08em; }
  .hero__bottom { grid-row: 3; grid-template-columns: 1fr; gap: 24px; padding-top: 28px; padding-bottom: 40px; }
  .hero { grid-template-rows: 1fr auto auto; }
  .hero__desc { max-width: 300px; gap: 18px; }
  .hero__desc .t { font-size: 15px; }
  .hero__cta { justify-self: start; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .hero__cta .btn { padding: 0 32px; }
  .sec-head { grid-template-columns: 1fr; gap: 40px; }
  .sec-head__r { justify-self: start; max-width: none; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band__foot { grid-template-columns: 1fr; gap: 28px; }
  .band__act { align-items: flex-start; text-align: left; }
  .platte { grid-template-columns: 1fr; gap: 56px; }
  .platte__text { padding-top: 0; order: 2; }
  .platte__fig .fig__img { height: 440px !important; }
  .woods { grid-template-columns: 1fr; gap: 40px; }
  .wood__img { aspect-ratio: 4 / 3; }
  .frames { }
  .frame { grid-template-columns: 1fr 120px; grid-template-areas: "n draw" "name draw" "desc draw" "spec draw"; padding: 32px 0; gap: 10px 16px; }
  .frame__n { grid-area: n; }
  .frame__name { grid-area: name; font-size: 26px; }
  .frame__desc { grid-area: desc; font-size: 12px; }
  .frame__spec { grid-area: spec; font-size: 12px; color: var(--muted); }
  .frame__draw { grid-area: draw; align-self: center; }
  .frame__draw svg { width: 120px; height: 75px; }
  .frame__arr { display: none; }
  .preis { min-height: 0; height: auto; padding-top: 0; }
  .preis__inner { min-height: 0; display: block; padding-block: 0 clamp(56px, 9vw, 80px); }
  .preis__media { position: relative; height: 320px; }
  .preis__grad { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.9) 100%); }
  .preis__inner { padding-top: 40px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 104px 1fr; gap: 8px 16px; padding: 20px 0; }
  .step .lab { grid-row: 1 / span 2; white-space: nowrap; }
  .step .h3--caps { font-size: 16px; }
  .steps::after { display: block; }
  .brueder { grid-template-columns: 1fr; gap: 56px; }
  .brueder__fig .fig__img { height: 260px !important; }
  .cap { grid-template-columns: 1fr; gap: 6px; }
  .cap .lab:last-child { text-align: left; }
  .showroom { grid-template-columns: 1fr; gap: 56px; }
  .showroom__text { order: 2; }
  .showroom__fig .fig__img { height: 320px !important; }
  .showroom__cta { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tiles { grid-template-columns: 1fr; gap: 64px; }
  .tiles .fig__img { height: 240px !important; }
  .kontakt { grid-template-columns: 1fr; gap: 48px; }
  .booking__grid { row-gap: 6px; }
  .booking__fallback { justify-self: stretch; }
  .booking__fallback .btn { width: 100%; }
  .foot__strip { height: 460px; }
  .foot__strip-inner { flex-direction: column; align-items: flex-start; gap: 20px; bottom: 32px; }
  .foot__cta { flex-direction: column; gap: 12px; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 56px; }
  .foot__cols > div:first-child, .foot__cols > div:last-child { grid-column: 1 / -1; }
  .foot__wm { padding-top: 72px; }
  .foot__legal { flex-direction: column; gap: 10px; padding-bottom: 32px; }
  .about { grid-template-columns: 1fr; gap: 48px; }
  .about .fig__img { height: 320px !important; }
  .duo { grid-template-columns: 1fr; gap: 0; }
  .duo .row { padding: 28px 0 34px; gap: 16px; }
}

@media (max-width: 480px) {
  .hero__eyebrow .dot, .hero__desc .dot { display: none; }
  .hero__eyebrow .nw, .hero__desc .lab .nw { display: block; }
  .hero__h1 { letter-spacing: 0.02em; }
  .hero__sub { font-size: 16px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .fig__img img { scale: 1; }
}

/* ==========================================================================
   Galerie und Baender auf dem Handy
   ========================================================================== */
@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr; gap: 24px; }
  .gallery--slider .gal { flex-basis: 78vw; }
  .gal__cap { padding: 20px 22px; }
  .gallery__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .manifest__h { max-width: none; }
  .band__act .btn { width: 100%; }
}

/* ==========================================================================
   Cookie-Zustimmung
   ========================================================================== */
.cc {
  position: fixed; left: var(--mx); bottom: 32px; z-index: 95;
  width: min(360px, calc(100vw - 2 * var(--mx)));
}
.cc[hidden] { display: none; }
.cc__box {
  background: rgba(8, 8, 8, 0.92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--hair);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.cc__box > .lab { color: var(--muted); }
.cc__box .t--small { line-height: 1.6; }
html.js:not(.reduced) .cc__box { opacity: 0; transform: translateY(24px); }
/* Muss den Startzustand oben ueberbieten, sonst bleibt der Kasten unsichtbar. */
html .cc.is-in .cc__box, .cc.is-in .cc__box {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.cc__box .t { color: var(--text); }
.cc__box a { color: var(--ink); border-bottom: 1px solid var(--hair-strong); }
.cc__box a:hover { border-color: var(--ink); }

.cc__opts { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.cc__opts[hidden] { display: none; }
.cc__opt {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--hair); cursor: pointer;
}
.cc__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc__sw {
  position: relative; width: 34px; height: 18px; margin-top: 2px; flex: 0 0 auto;
  border: 1px solid var(--hair-strong); border-radius: 9px;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.cc__sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
}
.cc__opt input:checked + .cc__sw { background: var(--ink); border-color: var(--ink); }
.cc__opt input:checked + .cc__sw::after { transform: translateX(16px); background: var(--ground); }
.cc__opt input:disabled + .cc__sw { opacity: 0.55; }
.cc__opt input:focus-visible + .cc__sw { outline: 1px solid var(--ink); outline-offset: 3px; }
.cc__opt-text { display: flex; flex-direction: column; gap: 5px; }

.cc__act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc__act .btn { height: 38px; padding: 0 14px; font-size: 10px; letter-spacing: 0.2em; }
.cc__more { font-size: 10px; letter-spacing: 0.2em; }
.cc__more { margin-left: auto; }
.cc__save[hidden] { display: none; }

@media (max-width: 767px) {
  .cc { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .cc__box { padding: 20px; gap: 12px; }
  .cc__act > .btn { flex: 1 1 auto; }
  .cc__more { margin-left: 0; width: 100%; justify-content: center; padding-top: 4px; }
}

/* ==========================================================================
   Handy: Fingerflaechen, Abstaende, Lesbarkeit
   ========================================================================== */
@media (max-width: 1023px) {
  /* Textlinks brauchen eine Flaeche, die man mit dem Daumen trifft */
  .tl { min-height: 44px; align-items: center; }
  .foot__cols a, .foot__legal a, .foot__legal button { display: inline-block; padding-block: 7px; }
  .nav__burger { width: 52px; height: 52px; }
  .btn { height: 52px; }
  .btn--small { height: 44px; }

  /* Sektionsabstaende auf kleinen Schirmen zusammennehmen */
  :root { --sec: clamp(96px, 17vw, 160px); --head-gap: clamp(48px, 9vw, 72px); }

  .gal__cap { padding: 18px 20px; }
  .gallery__nav { justify-content: center; }
  .gal-btn { width: 56px; height: 56px; }
}

@media (max-width: 767px) {
  .hero__sub { max-width: none; }
  .hero__desc { max-width: none; }
  .hero__desc .t { font-size: 14px; line-height: 1.65; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; }
  .hero__meta { text-align: left; }

  .woods { grid-template-columns: 1fr; gap: 32px; }
  .wood__img { aspect-ratio: 3 / 2; }

  .band__act { width: 100%; }
  .gallery__foot { gap: 14px; }

  /* Tabellenzeilen brechen auf zwei Zeilen statt zu quetschen */
  .rows--spec .row, .rows--ways .row { grid-template-columns: 1fr; gap: 6px; }
  .row dd { font-size: 15px; }

  .foot__cols { grid-template-columns: 1fr; gap: 32px; }
  .foot__cols > div:first-child, .foot__cols > div:last-child { grid-column: auto; }


  .page-head { padding-top: clamp(150px, 28vw, 190px); }
  .prose h2 { margin-top: 48px; }
}

@media (max-width: 400px) {
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.22em; }
  .gal-btn { width: 50px; height: 50px; }
  .cc__act { gap: 10px; }
}

/* Auf schmalen Schirmen darf jede Zeile umbrechen. Ein einzelnes nowrap reicht,
   um das ganze Dokument breiter als den Bildschirm zu machen. */
@media (max-width: 560px) {
  .hero__eyebrow .nw, .gallery__foot .nw, .band__act .nw { white-space: normal; }
}

/* ==========================================================================
   WhatsApp
   ========================================================================== */
.wa {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 45;
  display: flex; align-items: center; gap: 0;
  height: 56px; padding: 0 16px;
  border: 1px solid var(--hair-strong); border-radius: 999px;
  background: rgba(8, 8, 8, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink); overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              background-color 0.5s var(--ease), border-color 0.5s var(--ease), gap 0.6s var(--ease);
}
.wa.is-in { opacity: 1; transform: none; pointer-events: auto; }
.wa svg { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }
/* Der Schriftzug faehrt beim Darueberfahren auf */
.wa__text {
  font-size: var(--label); letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
  max-width: 0; opacity: 0;
  transition: max-width 0.7s var(--ease), opacity 0.5s var(--ease);
}
.wa:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); gap: 12px; }
.wa:hover .wa__text, .wa:focus-visible .wa__text { max-width: 200px; opacity: 1; }
.wa:focus-visible { gap: 12px; }

@media (hover: none) {
  .wa { height: 54px; width: 54px; padding: 0; justify-content: center; }
  .wa__text { display: none; }
}
@media (max-width: 1023px) {
  .wa { bottom: clamp(16px, 3vw, 24px); }
}

.holz__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 48px;
}
.holz__foot .t { max-width: 46ch; }
@media (max-width: 767px) { .holz__foot { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* ==========================================================================
   Vertrauen: Google-Bewertungen als ruhiges Laufband
   ========================================================================== */
.trust__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.trust__head .lab { margin-bottom: 4px; }
.trust__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.glogo { width: 18px; height: 18px; fill: var(--ink); flex: 0 0 auto; }
.trust__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }

.stars { display: inline-flex; gap: 4px; }
.stars svg { width: 12px; height: 12px; fill: var(--ink); }

/* Laufband: der Streifen wird im JS verdoppelt und wandert endlos nach links. */
/* Das Band haelt sich an denselben Inhaltsbereich wie die uebrigen Sektionen. */
.marquee {
  position: relative; margin-top: 64px; overflow: hidden;
  width: min(calc(1440px - 2 * var(--mx)), calc(100% - 2 * var(--mx)));
  margin-inline: auto;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(32px, 5vw, 90px); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ground), rgba(0,0,0,0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ground), rgba(0,0,0,0)); }
.marquee__track { display: flex; gap: var(--gut); width: max-content; will-change: transform; }
.marquee__track.is-laufend { animation: marquee var(--dauer, 60s) linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gut) / 2)); } }

.rev {
  margin: 0; padding: 30px;
  flex: 0 0 clamp(280px, 27vw, 380px);
  border: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color 0.6s var(--ease), background-color 0.6s var(--ease);
}
.rev:hover { border-color: var(--hair-strong); background: rgba(242, 239, 233, 0.02); }
.rev__text { font-size: var(--small); line-height: 1.75; color: #E4E1DA; font-weight: 300; }
.rev__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.rev__wer { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Profilbild: eigenes Bild, sonst Initialen wie bei Google */
.rev__av {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-strong); background: rgba(242, 239, 233, 0.04);
  font-size: 11px; letter-spacing: 0.08em; color: var(--ink); font-weight: 400;
}
.rev__av img { width: 100%; height: 100%; object-fit: cover; }

.trust__foot { display: flex; justify-content: center; margin-top: 56px; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track.is-laufend { animation: none; }
  .marquee { overflow-x: auto; }
}
@media (max-width: 767px) {
  .marquee { margin-top: 48px; }
  .rev { padding: 24px; flex-basis: 78vw; }
  .trust__foot .btn { width: 100%; }
}

/* ==========================================================================
   Zugaenglichkeit und Kleinkram (SEO/GEO-Umbau)
   ========================================================================== */
/* Sprunglink: unsichtbar, bis er per Tastatur den Fokus bekommt */
.skip { position: absolute; left: var(--mx); top: -100px; z-index: 200; padding: 12px 18px; background: var(--ink); color: var(--ground); font-size: var(--label); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; }
.skip:focus { top: 16px; outline: none; }
picture { display: contents; }
address { font-style: normal; }
.links404 { display: flex; flex-direction: column; gap: 6px; margin-top: 40px; }

/* ==========================================================================
   Inhaltsseiten aus site/content (Geldseiten, Ratgeber, Glossar, FAQ ...)
   Lesespalte, Hairline-Tabellen, Akkordeon. Keine neuen Farben, keine Karten.
   Ohne JavaScript ist jeder Text sichtbar; Textseiten laden kein GSAP.
   ========================================================================== */
.pg-main { padding-bottom: 0; }
.pg-head { padding-top: clamp(150px, 17vw, 250px); display: flex; flex-direction: column; gap: 28px; max-width: calc(880px + 2 * var(--mx)); }
.pg-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pg-crumbs li { font-size: var(--label); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; color: var(--muted); }
.pg-crumbs li:not(:last-child)::after { content: "/"; margin-left: 14px; color: var(--dim); }
.pg-crumbs a { color: var(--muted); transition: color 0.4s; }
.pg-crumbs a:hover { color: var(--ink); }
.pg-crumbs li[aria-current] { color: var(--text); }
.pg-h1 { font-size: clamp(34px, 4.6vw, 64px); }
.pg-lead { font-size: var(--lead); line-height: 1.55; color: #E4E1DA; max-width: 60ch; }
.pg-author a { color: var(--ink); border-bottom: 1px solid var(--hair-strong); }
.pg-hero { margin-top: clamp(48px, 6vw, 96px); }
.pg-body { padding-top: clamp(64px, 8vw, 128px); max-width: calc(760px + 2 * var(--mx)); display: flex; flex-direction: column; gap: 28px; }
.pg-body > .pg-h2 { margin-top: clamp(64px, 8vw, 112px); font-size: clamp(26px, 2.8vw, 40px); }
.pg-body > .pg-h2:first-child { margin-top: 0; }
.pg-body > .pg-h3 { margin-top: 24px; }
.pg-p { max-width: 68ch; }
.pg-state { font-weight: 200; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; max-width: 30ch; margin-block: 24px; }
.pg-btn { margin-top: 8px; }
.pg-list { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; color: var(--text); }
.pg-list li { position: relative; padding-left: 22px; }
.pg-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--muted); }
.pg-list--ol { counter-reset: n; }
.pg-list--ol li { padding-left: 34px; }
.pg-list--ol li::before { counter-increment: n; content: counter(n, decimal-leading-zero); width: auto; height: auto; background: none; top: 0.15em; font-size: var(--label); letter-spacing: 0.2em; color: var(--muted); }
.pg-facts { margin-block: 12px; }
.pg-facts dd { color: var(--ink); }
.pg-prices dt { display: flex; flex-direction: column; gap: 4px; }
.pg-prices .pg-price-title { color: var(--ink); }
.pg-figs { display: grid; gap: var(--gut); margin-block: 24px; }
.pg-figs--grid, .pg-figs--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-figs .fig__img { height: auto; aspect-ratio: var(--ar, 4 / 3); }
.pg-cap { margin-top: 12px; }
.pg-video video { width: 100%; height: auto; }
.pg-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-block: 24px; }
.pg-quote { margin-block: 24px; padding-left: 28px; border-left: 1px solid var(--hair-strong); display: flex; flex-direction: column; gap: 14px; max-width: 60ch; }
.pg-quote .rev__text { font-size: var(--lead); line-height: 1.5; }
/* Tabellen: Hairline-Zeilen, mobil seitlich scrollbar im Wrapper */
.pg-tablewrap { overflow-x: auto; max-width: 100%; margin-block: 16px; -webkit-overflow-scrolling: touch; }
.pg-tablewrap:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.pg-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--body); line-height: 1.55; }
.pg-table caption { text-align: left; caption-side: top; padding-bottom: 18px; font-size: var(--label); letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; color: var(--muted); }
.pg-table th, .pg-table td { padding: 16px 20px 16px 0; border-top: 1px solid var(--hair); text-align: left; vertical-align: top; font-weight: 300; color: var(--text); }
.pg-table thead th { font-size: var(--label); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400; color: var(--ink); border-top: 0; padding-top: 0; }
.pg-table tbody th { color: var(--ink); }
.pg-table tbody tr:last-child th, .pg-table tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
.pg-table--compare .pg-sticky { position: sticky; left: 0; background: var(--ground); z-index: 1; }
.pg-note { max-width: 68ch; }
/* Akkordeon */
.pg-faq { display: flex; flex-direction: column; border-top: 1px solid var(--hair); margin-block: 8px; max-width: 72ch; }
.faq { border-bottom: 1px solid var(--hair); }
.faq__q { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-size: var(--body); color: var(--ink); font-weight: 300; line-height: 1.5; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--ink); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 1v12M1 7h12' stroke='black' stroke-width='1.2'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 1v12M1 7h12' stroke='black' stroke-width='1.2'/></svg>") center / contain no-repeat; transition: transform 0.5s var(--ease); }
.faq[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
.faq__a { padding: 0 44px 26px 0; max-width: 68ch; }
/* Inhaltsverzeichnis, Links, Glossar, Quellen */
.pg-toc { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.pg-toc ol { display: flex; flex-direction: column; gap: 8px; counter-reset: t; }
.pg-toc li { padding-left: 34px; position: relative; color: var(--text); }
.pg-toc li::before { counter-increment: t; content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 0.35em; font-size: var(--label); letter-spacing: 0.2em; color: var(--muted); }
.pg-toc a { color: var(--text); transition: color 0.4s; }
.pg-toc a:hover { color: var(--ink); }
.pg-links { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.pg-links ul { display: flex; flex-direction: column; gap: 8px; }
.pg-links .tl { white-space: normal; }
.pg-related { margin-top: clamp(56px, 7vw, 96px); padding-top: 32px; border-top: 1px solid var(--hair); }
.pg-def { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--hair); }
.pg-def dt { color: var(--ink); scroll-margin-top: 100px; }
.pg-def + .pg-def { margin-top: -28px; }
.pg-def:last-of-type { border-bottom: 1px solid var(--hair); }
.pg-sources { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.pg-sources a { color: var(--ink); border-bottom: 1px solid var(--hair-strong); }
.pg-body .pg-band { padding-top: clamp(56px, 6vw, 80px); }
.pg-band--end { padding-top: var(--sec); }
.pg-h2, .pg-h3, .pg-def dt { scroll-margin-top: 100px; }

@media (max-width: 767px) {
  .pg-figs--grid, .pg-figs--dense { grid-template-columns: 1fr; }
  .pg-gallery { grid-template-columns: 1fr; }
  .pg-def { grid-template-columns: 1fr; gap: 8px; }
  .pg-def + .pg-def { margin-top: 0; }
  .pg-table { min-width: 520px; }
  .pg-table th, .pg-table td { padding: 14px 16px 14px 0; font-size: 15px; }
  .pg-state { font-size: 22px; }
}

/* ---------- Startseite: In Kürze, Liefergebiet, Fragen (SEO/GEO-Umbau) ---------- */
.hero__trust { margin-top: 22px; grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.hero__trust .stars { gap: 5px; }
.hero__trust .stars svg { width: 13px; height: 13px; fill: var(--ink); }
.kurz { display: grid; grid-template-columns: 5fr 7fr; gap: var(--col-gap); align-items: start; }
.kurz__head { display: flex; flex-direction: column; gap: 28px; }
.kurz__body { display: flex; flex-direction: column; gap: 32px; }
.kurz__body .rows--spec .row { grid-template-columns: 140px 1fr; }
.kurz__brand { max-width: 60ch; }
.fragen { display: grid; grid-template-columns: 5fr 7fr; gap: var(--col-gap); align-items: start; }
.fragen__head { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 120px; }
.fragen__list { margin: 0; max-width: none; }
@media (max-width: 1023px) {
  .kurz, .fragen { grid-template-columns: 1fr; gap: 48px; }
  .fragen__head { position: static; }
  .hero__trust { margin-top: 4px; }
}
/* H1 „Langlebige Massivholztische / nach Maß.“ auf 390 px: die erste Zeile passt
   erst unter 21 px in eine Zeile, das ist kleiner als der Fliesstext. Deshalb bleibt
   die Groesse aus der Grundregel, die Zeile bricht auf dem Handy in zwei Zeilen um
   (drei Zeilen insgesamt). Entscheidung mit Justin, siehe docs/seo/log.md, Phase 3. */

/* Fuss: ruhige Linkzeile in zwei Gruppen unter den vier Spalten */
.foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 64px; font-size: var(--small); line-height: 1.9; color: var(--muted); }
.foot__grp .lab { margin-bottom: 8px; }
.foot__grp ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot__grp a { transition: color 0.4s; }
.foot__grp a:hover { color: var(--ink); }
.preis__act { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
@media (max-width: 767px) { .foot__links { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; } .foot__grp ul { flex-direction: column; gap: 0; } }
.pg-pagelist { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.pg-pagelist li { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.pg-pagelist .tl { white-space: normal; }
.pg-pagelist .t { max-width: 68ch; }
.pg-band__text { display: flex; flex-direction: column; gap: 16px; max-width: 52ch; }

/* ==========================================================================
   Inhaltsseiten: Rhythmus der Startseite statt Blogspalte (22.09.2026)
   Kopf zweispaltig, Bilder und Tabellen breiter als die Lesespalte,
   Haarlinie vor jeder Ueberschrift, Textlinks sichtbar.
   ========================================================================== */
.pg-head { max-width: 1440px; gap: 40px; }
.pg-head__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.pg-head__l { display: flex; flex-direction: column; gap: 28px; }
.pg-head__r { display: flex; flex-direction: column; gap: 24px; max-width: 460px; justify-self: end; }
.pg-head__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pg-hero-wrap { margin-top: clamp(56px, 7vw, 112px); }
.pg-hero .fig__img { height: clamp(320px, 44vw, 640px); }

.pg-body { max-width: calc(1240px + 2 * var(--mx)); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
.pg-body > * { width: min(68ch, 100%); max-width: 100%; }
.pg-body > .pg-figs, .pg-body > .pg-gallery, .pg-body > .pg-tablewrap, .pg-body > .pg-faq,
.pg-body > .pg-prices, .pg-body > .pg-facts, .pg-body > .pg-steps, .pg-body > .pg-related,
.pg-body > .pg-pagelist, .pg-body > .pg-band, .pg-body > .pg-video { width: min(1040px, 100%); }
.pg-body > .pg-h2 {
  width: min(1040px, 100%);
  margin-top: clamp(72px, 8vw, 128px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--hair);
  font-size: clamp(28px, 3.1vw, 44px);
}
.pg-body > .pg-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pg-body > .pg-toc { width: min(1040px, 100%); }
/* Links im Fliesstext sind als Links zu erkennen */
.pg-body a:not(.tl):not(.btn) { color: var(--ink); border-bottom: 1px solid var(--hair-strong); transition: border-color 0.4s var(--ease); }
.pg-body a:not(.tl):not(.btn):hover { border-bottom-color: var(--ink); }
.pg-related { margin-top: clamp(64px, 8vw, 120px); padding-top: 0; border-top: 0; display: flex; flex-direction: column; gap: 20px; }
.pg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gut); }
/* Bildstreifen im Fuss auf allen Seiten */
.foot__strip-media { position: absolute; inset: 0; }
.foot__strip-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95) contrast(1.02) saturate(0.9); scale: 1.05; }

@media (max-width: 1023px) {
  .pg-head__grid { grid-template-columns: 1fr; gap: 32px; }
  .pg-head__r { justify-self: start; max-width: none; }
  .pg-head__cta { flex-direction: column; align-items: stretch; }
  .pg-head__cta .btn { width: 100%; }
  .pg-body { gap: 24px; }
  .pg-body > .pg-h2 { margin-top: clamp(56px, 12vw, 88px); }
}