/* =========================================================
   Seetalplatten GmbH – Stylesheet (ruhiger Schweizer Stil)
   Cremeweiss, Sand, warmes Anthrazit · ein zurückhaltender Bronze-Akzent
   Grotesk-Schrift, klares Raster, feine Linien, viel Weissraum
   ========================================================= */

:root {
  --bg: #FAF6EE;
  --soft: #EFE5D4;
  --card: #FFFDF8;
  --line: #E6DBC8;
  --line-2: #D2C2A6;
  --ink: #2B2620;
  --ink-2: #675B4C;
  --ink-3: #A08E74;
  --dark: #2B2620;
  --dark-2: #3A332B;
  --cream: #FAF6EE;
  --gold: #9A7A4E;        /* Bronze auf hellem Grund */
  --gold-light: #D6BF97;  /* Bronze auf dunklem Grund */
  --gold-soft: rgba(154,122,78,.14);

  --serif: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --header-h: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; line-height: 1.06; margin: 0; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1.05em 1.6em; border-radius: var(--radius); font: 500 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.btn span { transition: transform .3s var(--ease); }
.btn:hover span { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--gold); }
.btn-light { background: transparent; color: var(--cream); border-color: rgba(250,246,238,.4); }
.btn-light:hover { border-color: var(--cream); }
.btn-outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: .8em 1.15em; font-size: 14px; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--gutter); border-bottom: 1px solid transparent; transition: border-color .3s; }
/* Milchglas auf eigener Ebene – sonst wird das mobile Menü (position: fixed) im Header eingeschlossen */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250,246,238,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand-logo { height: 48px; width: auto; transition: height .3s var(--ease); }
.site-header.is-scrolled .brand-logo { height: 40px; }
.main-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.main-nav > a:not(.btn) { font: 500 15px/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 12px 14px; position: relative; transition: color .2s; }
.main-nav > a:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.main-nav > a:not(.btn):hover { color: var(--ink); }
.main-nav > a:not(.btn):hover::after, .main-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav > a[aria-current="page"] { color: var(--ink); }
.main-nav .btn { margin-left: 12px; }
.head-phone { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--sans); text-decoration: none; color: var(--ink); white-space: nowrap; padding: 10px 6px; }
.head-phone svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.head-phone:hover { color: var(--gold); }
.lang-switch { display: inline-flex; padding: 2px; border-radius: var(--radius); border: 1px solid var(--line); flex: none; }
.lang-switch a { padding: 6px 10px; border-radius: var(--radius); font: 500 13px/1 var(--sans); text-decoration: none; color: var(--ink-3); }
.lang-switch a[aria-current="true"] { background: var(--ink); color: #fff; }
.ls-short { display: none; }
.nav-toggle { display: none; }

/* Natursteinplatte (Travertin-Struktur), gezeichnet im Browser – für das Startbild */
:root {
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0026 .045' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .56 0 0 0 0 .48 0 0 0 0 .37 1.5 0 0 0 -.66'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .27 0 0 0 -2.4 1.3'/%3E%3C/filter%3E%3Crect width='1400' height='900' fill='%23ECE2D0'/%3E%3Crect width='1400' height='900' filter='url(%23a)' opacity='.42'/%3E%3Crect width='1400' height='900' filter='url(%23b)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---------- Intro «Schriftzug» ----------
   «seetalplatten» riesig, in den Buchstaben läuft eine Fotomontage echter Projekte,
   dann fliegt die Kamera in das «l» hinein, bis das Bad den Bildschirm füllt */
.iv-on body { overflow: hidden; }
.iv { position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: pointer; background: #1D1B18; color: #F3EADB; transition: opacity .8s ease; }
.iv.is-out { opacity: 0; pointer-events: none; }
.iv-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: 0; transform: scale(1.12); transition: opacity .6s ease .35s, transform 1.6s cubic-bezier(.2, .7, .1, 1) .35s; will-change: transform, opacity; }
.iv.is-zoom .iv-full { opacity: 1; transform: none; }
/* Der Schriftzug: Fotos laufen in den Buchstaben */
.iv-word { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; font: 700 15.6vw/.86 var(--serif); letter-spacing: -.055em; padding: 0 .04em .06em; background-color: #6E6252; background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: transform 1.1s cubic-bezier(.6, 0, .2, 1), opacity .5s ease .45s; will-change: transform, opacity; backface-visibility: hidden; animation: ivReveal .9s cubic-bezier(.2, .7, .1, 1) .1s both; }
@keyframes ivReveal { from { opacity: 0; transform: translateY(8%) scale(.97); } to { opacity: 1; transform: none; } }
.iv-line { display: inline; }
.iv.is-zoom .iv-word { animation: none; transform: scale(14); opacity: 0; }
/* Beschriftung wie ein Filmabspann */
.iv-top, .iv-cap, .iv-tag { position: absolute; margin: 0; font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: 0; transition: opacity .6s ease; }
.iv-top { left: var(--gutter); top: 28px; color: rgba(243,234,219,.7); }
.iv-tag { right: var(--gutter); top: 28px; color: rgba(243,234,219,.7); }
.iv-cap { left: var(--gutter); bottom: 30px; display: flex; gap: 16px; color: #F3EADB; }
.iv-cap b { font-weight: 500; color: #C9A97C; font-variant-numeric: tabular-nums; }
.iv.is-play .iv-top, .iv.is-play .iv-tag, .iv.is-play .iv-cap { opacity: 1; transition-delay: .5s; }
.iv.is-cut .iv-cap span { animation: ivLabel .35s var(--ease); }
@keyframes ivLabel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.iv.is-zoom .iv-top, .iv.is-zoom .iv-tag, .iv.is-zoom .iv-cap { opacity: 0; transition-delay: 0s; }
.iv-skip { position: absolute; z-index: 3; right: var(--gutter); bottom: 22px; padding: 10px 16px; font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(243,234,219,.85); background: rgba(29,27,24,.4); border: 1px solid rgba(243,234,219,.3); border-radius: var(--radius); cursor: pointer; }
.iv-skip:hover { color: #fff; border-color: #fff; }
@media (max-width: 700px) {
  .iv-word { font-size: 25vw; line-height: .82; text-align: left; }
  .iv-line { display: block; }
  .iv-tag { display: none; }
}

/* ---------- Startbild: Natursteinplatte mit Streiflicht ----------
   Beim Laden fährt ein Lichtstreifen über den Stein, die Schrift erscheint wie eingraviert,
   dann gleitet die rechte Platte entlang der Fuge weg und gibt den Raum frei.
   Danach folgt das Licht der Maus – der Effekt bleibt. */
.s-hero {
  --off: 0px;
  position: relative; display: grid; grid-template-columns: 5fr 6fr; min-height: 100vh; min-height: 100svh; padding-top: var(--header-h); background: var(--soft); overflow: hidden;
}
.s-slab { position: relative; overflow: hidden; display: flex; align-items: center; box-shadow: inset -1px 0 0 rgba(43,38,32,.18); }
.s-stone { position: absolute; inset: 0; pointer-events: none; background: var(--stone) 0 0 / 1400px 900px; }
/* Streiflicht: eine weiche Lichtfläche, die nur verschoben wird (läuft auf der Grafikkarte) */
.s-glow { position: absolute; left: 0; top: 0; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; background: radial-gradient(circle, rgba(255,251,243,.5) 0%, rgba(255,251,243,.18) 35%, rgba(255,251,243,0) 62%); pointer-events: none; will-change: transform; transform: translate3d(-600px, 300px, 0); }
.s-copy { position: relative; z-index: 1; width: 100%; padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px) clamp(40px, 5vw, 72px) max(var(--gutter), calc((100vw - var(--max)) / 2)); }
/* Schrift wie in den Stein graviert */
.s-hero h1 { font-size: clamp(42px, 5vw, 76px); line-height: 1.02; letter-spacing: -.035em; color: rgba(43,38,32,.92); text-shadow: 0 1px 0 rgba(255,252,245,.55), 0 -1px 0 rgba(43,38,32,.1); }
.s-hero h1 em { display: block; color: #8A7454; }
.s-hero h1 + .actions { margin-top: 40px; }
.s-hero .c-kick { color: #7E6C52; }
.s-hero .c-kick::before { background: #7E6C52; }
.s-hero .c-facts { border-top-color: rgba(43,38,32,.22); }
.s-hero .c-facts div + div { border-left-color: rgba(43,38,32,.14); }
.s-hero .c-facts dt { color: #7E6C52; }
.s-hero .c-facts div:last-child dd { color: #5E5243; }
.s-hero .c-phone { border-bottom-color: rgba(43,38,32,.3); }
.s-copy > * { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.s-hero.is-on .s-copy > * { opacity: 1; transform: none; }
.s-hero.is-on .s-copy > :nth-child(2) { transition-delay: .15s; }
.s-hero.is-on .s-copy > :nth-child(3) { transition-delay: .3s; }
.s-hero.is-on .s-copy > :nth-child(4) { transition-delay: .45s; }
/* Rechte Seite: der fertige Raum hinter der zweiten Platte */
.s-media { position: relative; overflow: hidden; min-height: 420px; background: var(--dark-2); }
.s-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; transform: scale(1.08); transition: transform 2.6s cubic-bezier(.2,.7,.1,1); }
.s-hero.is-open .s-photo { transform: none; }
.s-cover { position: absolute; inset: 0; z-index: 2; overflow: hidden; box-shadow: -40px 0 70px -30px rgba(43,38,32,.45); transition: transform 1.4s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.s-cover .s-stone { background-position: calc(-1 * var(--off)) 0; }
.s-hero.is-open .s-cover { transform: translateX(101%); }
.actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

.c-kick { margin: 0 0 28px; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 14px; }
.c-kick::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); }
.c-phone { display: inline-flex; align-items: center; padding: .95em .2em; font: 500 15px/1 var(--sans); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: border-color .3s; }
.c-phone:hover { border-color: var(--ink); }
/* Kennzahlen im Startbild: wie ein Plankopf */
.c-facts { display: grid; grid-template-columns: auto auto 1fr; gap: 0; margin: 56px 0 0; border-top: 1px solid var(--line-2); max-width: 560px; }
.c-facts div { padding: 16px 24px 0 0; }
.c-facts div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.c-facts dt { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.c-facts dd { margin: 0; font: 500 26px/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.c-facts div:last-child dd { font: 400 14px/1.5 var(--sans); letter-spacing: 0; color: var(--ink-2); }

/* Für Architekten & GU/TU: feines Planraster, Leistungen als technische Liste */
.pro { position: relative; background-color: var(--bg); background-image: linear-gradient(rgba(154,122,78,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(154,122,78,.07) 1px, transparent 1px); background-size: 32px 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.pro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pro-head { position: sticky; top: calc(var(--header-h) + 32px); }
.pro-head h2 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -.03em; }
.pro-head > p:not(.kicker) { color: var(--ink-2); font-size: 18px; margin: 20px 0 32px; max-width: 460px; }
.spec { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); }
.spec li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 26px 28px 26px 0; }
.spec li + li { border-top: 1px solid var(--line); }
.spec span { justify-self: center; font: 500 13px/1.9 var(--sans); letter-spacing: .1em; color: var(--gold); font-variant-numeric: tabular-nums; }
.spec h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 6px; }
.spec p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* Zwei Wege auf der Startseite: Privatkunden / Profis */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); }
.path { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color .3s, box-shadow .3s; }
.path:hover { border-color: var(--line-2); box-shadow: 0 28px 60px -36px rgba(43,38,32,.4); }
.path-img { aspect-ratio: 10 / 7; overflow: hidden; background: var(--soft); }
.path-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.path:hover .path-img img { transform: scale(1.04); }
.path-body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 36px); }
.path-no { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.path h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.025em; margin: 16px 0 10px; }
.path p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.path .more { margin-top: auto; padding-top: 22px; display: inline-flex; gap: 8px; font: 500 14px/1 var(--sans); color: var(--ink); }
.path .more span { transition: transform .3s var(--ease); }
.path:hover .more span { transform: translateX(4px); }

/* Ratgeber: Preistabelle */
.price-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 16px; }
.price-table th { text-align: left; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); padding: 0 0 12px; border-bottom: 1px solid var(--line-2); }
.price-table th:last-child, .price-table td:last-child { text-align: right; white-space: nowrap; }
.price-table td { padding: 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table td:last-child { font: 500 20px/1.3 var(--serif); letter-spacing: -.01em; padding-left: 20px; }
.price-table td b { display: block; font-weight: 600; color: var(--ink); }
.price-table td span { display: block; color: var(--ink-2); font-size: 15px; margin-top: 2px; }
.prose .price-note { font-size: 14px; color: var(--ink-3); }
.aside .btn-wa { margin-top: 10px; }
.form-note a { color: var(--ink); }
.groups-3 { grid-template-columns: repeat(3, 1fr); }
/* ---------- Sektionen ---------- */
.section { padding: clamp(72px, 9vw, 136px) 0; }
.section.paper { background: var(--soft); }
.section.tight { padding-top: 40px; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.kicker { display: inline-flex; align-items: center; gap: 14px; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; }
.kicker::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); }
.section-head h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -.03em; }
.section-head p:not(.kicker) { color: var(--ink-2); font-size: 18px; margin: 18px 0 0; max-width: 620px; }

/* Sortiment: Produkt-Kacheln */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.product { position: relative; display: flex; flex-direction: column; background: transparent; text-decoration: none; }
.product-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft); }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.product:hover .product-img img { transform: scale(1.04); }
.product h3 { font-size: 24px; padding: 20px 0 4px; border-top: 0; letter-spacing: -.02em; }
.product p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 34ch; }
.product .more { margin-top: auto; padding: 14px 0 0; color: var(--ink); font: 500 13px/1 var(--sans); letter-spacing: .04em; display: inline-flex; gap: 8px; }
.product .more span { transition: transform .3s var(--ease); }
.product:hover .more span { transform: translateX(4px); }

/* Kopf der Sortiment-Seite */
.page-head { position: relative; padding: calc(var(--header-h) + 72px) 0 32px; }
.page-head h1 { font-size: clamp(40px, 5vw, 68px); letter-spacing: -.035em; }
.page-head .lead { color: var(--ink-2); font-size: 19px; margin: 18px 0 0; max-width: 620px; }

/* Drei Gründe: ruhiges Raster mit Linien statt Karten */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.reasons article { padding: 32px clamp(20px, 3vw, 40px) 8px 0; }
.reasons article + article { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--line); }
.reasons .no { font: 500 13px/1 var(--sans); letter-spacing: .1em; color: var(--gold); }
.reasons h3 { font-size: 26px; margin: 18px 0 10px; letter-spacing: -.02em; }
.reasons p { margin: 0; color: var(--ink-2); }

/* Trends */
.trend-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.trend { margin: 0; }
.trend > div { aspect-ratio: 1; overflow: hidden; background: var(--soft); }
.trend img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.trend:hover img { transform: scale(1.04); }
.trend figcaption { padding: 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.trend strong { font: 500 19px/1.25 var(--serif); letter-spacing: -.015em; }
.trend span { color: var(--ink-2); font-size: 14px; }

/* ---------- Unterseiten-Kopf: Text links hell, Bild rechts (wie Startbild) ---------- */
.page-hero { position: relative; display: grid; grid-template-columns: 5fr 6fr; padding-top: var(--header-h); min-height: 560px; background: var(--bg); color: var(--ink); }
.page-hero .wrap { order: 1; max-width: none; margin: 0; padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 80px) clamp(40px, 5vw, 80px) max(var(--gutter), calc((100vw - var(--max)) / 2)); display: flex; flex-direction: column; justify-content: center; }
.page-hero > img { order: 2; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.page-hero h1 { font-size: clamp(38px, 4.4vw, 64px); letter-spacing: -.035em; }
.page-hero h1 em { color: var(--ink-3); }
.page-hero .lead { color: var(--ink-2); font-size: 18px; margin: 20px 0 0; max-width: 480px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; font-size: 13px; letter-spacing: .02em; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }

/* ---------- Leistungsseite ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: clamp(28px, 2.8vw, 38px); margin-top: 56px; letter-spacing: -.025em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); font-size: 17px; margin: 0; }
.prose p.intro { font: 400 clamp(21px, 2vw, 26px)/1.45 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.offer { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.offer li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.offer li::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--gold); }
.tips { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.tips li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tips li::before { content: "✓"; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-2); color: var(--gold); font-size: 14px; }
.tips b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.detail-img { aspect-ratio: 16 / 9; overflow: hidden; }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
.aside { position: sticky; top: calc(var(--header-h) + 24px); background: var(--card); color: var(--ink); border: 1px solid var(--line); padding: 32px; }
.aside h3 { font-size: 26px; margin-bottom: 12px; letter-spacing: -.02em; }
.aside h3 em { color: var(--ink-3); }
.aside p { color: var(--ink-2); font-size: 15px; margin: 0 0 22px; }
.aside .btn { width: 100%; }
.aside ul { list-style: none; padding: 0; margin: 22px 0 0; font-size: 14px; }
.aside li { padding: 11px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.aside li span { color: var(--ink-3); }
.aside a { text-decoration: none; font-weight: 500; color: var(--ink); }
.aside a:hover { color: var(--gold); }
.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a { padding: 12px 18px; border: 1px solid var(--line-2); background: transparent; border-radius: var(--radius); text-decoration: none; font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.related a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- Über uns / Referenzen ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split-img { aspect-ratio: 4 / 5; overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.groups article { padding: 28px 24px 8px 0; }
.groups article + article { padding-left: 24px; border-left: 1px solid var(--line); }
.groups h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: -.02em; }
.groups p { margin: 0; color: var(--ink-2); font-size: 15px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.steps li { padding: 28px 24px 8px 0; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps span { display: inline-block; font: 500 13px/1 var(--sans); letter-spacing: .1em; color: var(--gold); margin-bottom: 16px; }
.steps h3 { font-size: 22px; margin-bottom: 8px; letter-spacing: -.02em; }
.steps p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 500 20px/1.35 var(--serif); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); color: var(--ink); font: 300 20px/1 var(--sans); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 48px 24px 0; color: var(--ink-2); }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
address { font-style: normal; font: 500 28px/1.3 var(--serif); letter-spacing: -.02em; margin-bottom: 24px; }
.contact-list { list-style: none; padding: 0; margin: 0 0 24px; }
.contact-list li { display: grid; grid-template-columns: 100px 1fr; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.contact-list span { color: var(--ink-3); }
.contact-list a { text-decoration: none; font-weight: 500; color: var(--ink); }
.contact-list a:hover { color: var(--gold); }
.contact-form { background: var(--card); border: 1px solid var(--line); padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span { font: 500 13px/1 var(--sans); letter-spacing: .02em; color: var(--ink-2); }
.field input, .field select, .field textarea { font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold-soft); }
.field input.is-invalid { border-color: #A8382B; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 9px 14px; font-size: 14px; font-weight: 500; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent; transition: all .2s; }
.chips label:hover span { border-color: var(--ink); }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.form-error { margin: 0; font-size: 14px; color: #A8382B; }
.contact-form .btn { align-self: flex-start; }

/* ---------- Anfrage-Band: ruhig auf Stein ---------- */
.cta { padding: clamp(64px, 8vw, 112px) 0; background: var(--soft); color: var(--ink); border-top: 1px solid var(--line); }
.cta > img { display: none; }
.cta .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cta .wrap > div { flex: 1 1 560px; }
.cta h2 { font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -.03em; max-width: 18ch; }
.cta h2 em { color: var(--ink-3); }
.cta p { margin: 18px 0 0; color: var(--ink-2); font-size: 17px; }
.cta-phone { display: inline-block; margin-left: 6px; color: var(--ink); font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.cta-phone:hover { border-color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: #E4D6BD; color: var(--ink-2); padding: 72px 0 28px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-logo { height: 46px; width: auto; margin-bottom: 22px; }
.site-footer h4 { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #8A7658; margin: 8px 0 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; color: var(--ink); }
.site-footer a:hover { color: var(--gold); }
.site-footer p { margin: 0; color: var(--ink-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid #CDBB9C; font-size: 13px; color: #7E6C52; }
.footer-bottom nav { display: flex; gap: 20px; }

/* ---------- Anruf-Leiste (Handy) & Cookie-Hinweis ---------- */
.call-bar { display: none; }
.consent { position: fixed; z-index: 150; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px -30px rgba(43,38,32,.35); font-size: 14px; color: var(--ink-2); }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 260px; }
.consent a { color: var(--ink); }
.consent div { display: flex; gap: 8px; }

/* ---------- Rechtsseiten ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + 72px) var(--gutter) 88px; }
.legal h1 { font-size: clamp(38px, 5vw, 60px); margin-bottom: 36px; letter-spacing: -.035em; }
.legal h2 { font-size: 24px; margin: 36px 0 10px; letter-spacing: -.02em; }
.legal p, .legal li { color: var(--ink-2); }
.legal a { color: var(--ink); }
.legal .placeholder { background: #EFE3CC; color: var(--ink); padding: 0 .3em; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1560px) { .head-phone span { display: none; } }

/* Laptop/Tablet: Menü hinter dem Menü-Symbol, damit der Kopfbereich ruhig bleibt */
@media (max-width: 1400px) {
  .head-phone { margin-left: auto; }
  .nav-toggle { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; padding: 0; }
  .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { position: fixed; inset: var(--header-h) 0 0 0; margin: 0; background: var(--bg); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 16px var(--gutter) 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s; }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav > a:not(.btn) { font: 500 28px/1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); padding: 18px 2px; border-bottom: 1px solid var(--line); }
  .main-nav > a:not(.btn)::after { display: none; }
  .main-nav .btn { margin: 28px 0 0; align-self: flex-start; }
}

@media (max-width: 1080px) {
  .products, .trend-row { grid-template-columns: repeat(2, 1fr); }
  .groups, .steps { grid-template-columns: repeat(2, 1fr); }
  .groups-3 { grid-template-columns: 1fr 1fr 1fr; }
  .groups article:nth-child(3), .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .detail { grid-template-columns: 1fr; }
  .aside { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
  body { padding-bottom: 64px; }
  .site-header { gap: 10px; }
  .brand-logo, .site-header.is-scrolled .brand-logo { height: 36px; }
  .lang-switch a { padding: 6px 9px; font-size: 12px; }
  .ls-full { display: none; }
  .ls-short { display: inline; }
  .s-hero { grid-template-columns: 1fr; min-height: 0; }
  .s-copy { padding: 40px var(--gutter) 48px; }
  .s-media { order: -1; min-height: 52vh; }
  .s-slab { box-shadow: inset 0 1px 0 rgba(43,38,32,.18); }
  .s-hero.is-open .s-cover { transform: translateY(-101%); }
  .page-hero { grid-template-columns: 1fr; min-height: 0; }
  .page-hero .wrap { padding: 36px var(--gutter) 44px; }
  .page-hero > img { order: 0; min-height: 0; height: 300px; }
  .reasons { grid-template-columns: 1fr; }
  .pro-grid { grid-template-columns: 1fr; }
  .pro-head { position: static; }
  .c-facts { grid-template-columns: 1fr 1fr; }
  .c-facts div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; }
  .reasons article, .reasons article + article { padding: 26px 0; border-left: 0; }
  .reasons article + article { border-top: 1px solid var(--line); }
  .split, .contact-grid, .paths { grid-template-columns: 1fr; }
  .split-img { aspect-ratio: 4 / 3; }
  .call-bar { display: grid; grid-template-columns: 1fr 1.4fr; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); background: var(--cream); }
  .call-bar a { display: flex; align-items: center; justify-content: center; height: 60px; font: 500 16px/1 var(--sans); text-decoration: none; color: var(--ink); }
  .call-bar .call-bar-main { background: var(--ink); color: #fff; }
  .consent { bottom: 76px; }
}

@media (max-width: 600px) {
  .groups, .groups-3, .steps, .offer, .field-row, .footer-grid { grid-template-columns: 1fr; }
  .price-table td:last-child { font-size: 16px; }
  .groups article, .steps li, .groups article + article, .steps li + li { padding: 22px 0; border-left: 0; }
  .groups article + article, .steps li + li { border-top: 1px solid var(--line); }
  /* Sortiment kompakt: 2 Spalten, nur Bild und Name */
  .products { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .product-img { aspect-ratio: 1; }
  .product h3 { font-size: 18px; padding: 12px 0 0; line-height: 1.2; }
  .product p, .product .more { display: none; }
  .trend-row { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .trend figcaption { padding: 10px 0 0; }
  .trend strong { font-size: 16px; }
  .trend span { display: none; }
  .actions .btn, .contact-form .btn { flex: 1 1 100%; align-self: stretch; }
  .faq summary { font-size: 18px; }
  .spec li { grid-template-columns: 48px 1fr; padding: 22px 18px 22px 0; }
  .spec h3 { font-size: 18px; }
  .head-phone { display: none; }
  .lang-switch { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}