:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --ink: #111111;
  --ink-2: #4a4a46;
  --muted: #7a7a74;
  --line: #d9d7d0;
  --accent: #f5c400;
  --accent-ink: #111111;
  --accent-soft: #fdf1b8;
  --accent-deep: #8a6d00;
  --dark: #121412;
  --radius: 14px;
  --wrap: 1180px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 600; }

/* Platzhalter für noch fehlende Firmendaten – bewusst sichtbar */
.ph { background: repeating-linear-gradient(45deg, #fff6d6, #fff6d6 6px, #fdeeb8 6px, #fdeeb8 12px);
  border: 1px dashed #c9a227; border-radius: 4px; padding: 0 .35em; color: #6b5300; font-weight: 500; }

/* Kopfzeile */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; letter-spacing: -.01em; font-size: 18px; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; inset: 6px 5px 5px 6px; border: 2px solid #111; border-top: 0; border-left: 0; transform: rotate(40deg) translate(-1px,-2px); width: 6px; height: 10px; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 600; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.nav-toggle span:not(.sr) { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .2s; }
.nav-toggle span:nth-child(1) { top: 17px; } .nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff !important; text-decoration: none;
  padding: 14px 22px; border-radius: 999px; font-weight: 600; border: 0; cursor: pointer; font: inherit; font-weight: 600; transition: transform .15s, background .15s; }
.btn:hover { background: var(--accent); color: var(--ink) !important; transform: translateY(-1px); }
.btn-small { padding: 9px 16px; font-size: 14px; }
.btn-ghost { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff !important; }
.btn .arrow { transition: transform .15s; } .btn:hover .arrow { transform: translateX(3px); }

/* Typo */
h1, h2, h3, .brand, .footer-brand, .big { font-family: var(--display); }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.02; margin: 0; font-weight: 700; }
h1 { font-size: clamp(44px, 8vw, 104px); }
h2 { font-size: clamp(34px, 5vw, 64px); }
h3 { font-size: 22px; letter-spacing: -.015em; line-height: 1.2; font-weight: 600; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink-2); max-width: 620px; }
.dot { color: var(--accent-deep); }
.mark { background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); padding: 0 .06em; }

/* Hero */
.hero { padding: clamp(56px, 10vw, 120px) 0 clamp(40px, 6vw, 72px); }
.hero .eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; margin-bottom: 28px; background: var(--surface); }
.hero .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hero p.lead { margin: 28px 0 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-sub { padding-top: clamp(48px, 8vw, 96px); }

/* Sektionen */
section { padding: clamp(56px, 8vw, 104px) 0; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 48px; }
.section-head p { margin: 0; color: var(--ink-2); max-width: 460px; justify-self: end; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Leistungs-Karten */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 300px;
  text-decoration: none; border: 1px solid transparent; transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--ink); transform: translateY(-3px); }
.card .num { font-size: 13px; color: var(--muted); font-weight: 600; }
.card .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--ink); display: grid; place-items: center; }
.card .icon svg { width: 22px; height: 22px; }
.card p { margin: 0; color: var(--ink-2); }
.card .more { margin-top: auto; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }

/* Liste mit Häkchen */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.checklist li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 16px; height: 9px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
.checklist li strong { display: block; font-weight: 600; }
.checklist li span { color: var(--ink-2); font-size: 15px; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split.even { grid-template-columns: 1fr 1fr; }
.sticky { position: sticky; top: 100px; }

/* Ablauf */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.step { border-top: 2px solid var(--ink); padding-top: 20px; }
.step .n { font-size: 13px; font-weight: 700; color: var(--accent-deep); margin-bottom: 18px; display: block; }
.step p { color: var(--ink-2); margin: 10px 0 0; font-size: 15px; }

/* Dunkler Block */
.dark { background: var(--dark); color: #f3f3ef; }
.dark .muted, .dark .lead { color: #a7a8a2; }
.dark .label { color: #8d8f88; }
.dark .btn { background: #fff; color: var(--ink) !important; }
.dark .btn:hover { background: var(--accent); color: var(--ink) !important; }

.cta { border-radius: 24px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end; }
.cta p { margin: 18px 0 0; }
.cta .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* Statement / Werte */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.values > div { padding: 28px 28px 28px 0; border-right: 1px solid var(--line); }
.values > div + div { padding-left: 28px; }
.values > div:last-child { border-right: 0; }
.values p { color: var(--ink-2); margin: 10px 0 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); margin: 12px 0 0; max-width: 720px; }

/* Galerie */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter button { font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ba { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.ba-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; touch-action: pan-y; background: #e6e4de; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-frame .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-frame .handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ba-frame .handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 15px; }
.ba-frame .tag { position: absolute; top: 12px; font-size: 12px; font-weight: 600; background: rgba(17,17,17,.75); color: #fff; padding: 4px 10px; border-radius: 999px; }
.ba-frame .tag.l { left: 12px; } .ba-frame .tag.r { right: 12px; }
.ba-frame input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-meta { padding: 16px 20px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ba-meta span { color: var(--muted); font-size: 14px; }
.ba-empty { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ba-empty div { display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 14px; padding: 16px;
  background: repeating-linear-gradient(135deg, #ebe9e3, #ebe9e3 10px, #e4e2db 10px, #e4e2db 20px); }
.ba-empty div + div { border-left: 2px dashed #cfccc3; background: #f3f2ee; }
.ba-empty b { display: block; color: var(--ink); font-size: 15px; }

.notice { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px 22px; color: var(--ink-2); font-size: 15px; }

/* Rechtstexte */
.legal { max-width: 760px; }
.legal h2 { font-size: 26px; margin: 40px 0 10px; letter-spacing: -.02em; }
.legal p { color: var(--ink-2); }

/* Fußzeile */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: 15px; margin-bottom: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid a { color: var(--ink-2); text-decoration: none; line-height: 1.9; }
.footer-grid a:hover { color: var(--ink); }
.footer-grid p { margin: 0 0 12px; }
.footer-brand { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }

/* Einblenden */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Chat */
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--ink); border: 0; border-radius: 999px; padding: 14px 20px 14px 16px; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .15s; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab svg { width: 22px; height: 22px; }
.chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 40px));
  background: var(--surface); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s; }
.chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-head { background: var(--dark); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.chat-head .av { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.chat-head b { display: block; font-size: 15px; } .chat-head small { color: #a7a8a2; font-size: 12px; }
.chat-head button { margin-left: auto; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; width: 36px; height: 36px; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #f7f6f3; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-line; animation: pop .2s ease; }
.msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.me { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.typing { color: var(--muted); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; background: #f7f6f3; }
.chips button { font: inherit; font-size: 14px; border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.chips button:hover { background: var(--ink); color: #fff; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-form input { flex: 1; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; outline: none; min-width: 0; }
.chat-form input:focus { border-color: var(--ink); }
.chat-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; flex: none; font-size: 18px; }
.chat-summary { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; align-self: stretch; }
.chat-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.chat-summary dt { color: var(--muted); } .chat-summary dd { margin: 0; }

/* Responsiv */
@media (max-width: 960px) {
  .cards, .steps { grid-template-columns: 1fr 1fr; }
  .split, .split.even, .cta, .section-head { grid-template-columns: 1fr; }
  .section-head p { justify-self: start; }
  .cta .actions { justify-content: flex-start; }
  .sticky { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: 1fr; }
  .values > div, .values > div + div { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { position: fixed; inset: 68px 0 auto 0; background: var(--bg); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px;
    border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .2s; }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .nav .btn { margin-top: 16px; justify-content: center; border-bottom: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cards, .steps, .gallery { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .chat-fab span { display: none; }
  .chat-fab { padding: 16px; }
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
}

/* Anfrage-Konfigurator (angelehnt an die Referenz) */
.konfig { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
.konfig-form { background: var(--surface); border-radius: 20px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 26px; }
.dark .konfig-form { background: #1d201d; }
.chipgroup .label { margin-bottom: 12px; }
.chipgroup .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chipgroup button { font: inherit; font-size: 15px; padding: 10px 16px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: inherit; cursor: pointer; transition: .15s; }
.dark .chipgroup button { border-color: #3a3d39; }
.chipgroup button:hover { border-color: var(--ink); }
.dark .chipgroup button:hover { border-color: #fff; }
.chipgroup button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.range-row { display: flex; align-items: center; gap: 16px; }
.range-row input { flex: 1; accent-color: var(--accent); height: 28px; }
.range-row output { font-weight: 700; min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.konfig-card { position: sticky; top: 92px; background: var(--dark); color: #f3f3ef; border-radius: 20px; padding: 28px; display: grid; gap: 16px; }
.dark .konfig-card { background: var(--surface); color: var(--ink); }
.konfig-card .big { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.konfig-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.konfig-card dt { color: #a7a8a2; } .dark .konfig-card dt { color: var(--muted); }
.konfig-card dd { margin: 0; text-align: right; font-weight: 600; }
.konfig-card .btn { background: var(--accent); color: var(--ink) !important; justify-content: center; }
.konfig-card .btn:hover { background: #fff; }
.dark .konfig-card .btn:hover { background: var(--ink); color: #fff !important; }
.konfig-card small { color: #a7a8a2; font-size: 13px; } .dark .konfig-card small { color: var(--muted); }
@media (max-width: 960px) { .konfig { grid-template-columns: 1fr; } .konfig-card { position: static; } }

/* ===== Startseite: Hero mit Bildfläche ===== */
.hero-home { padding-top: clamp(40px, 7vw, 88px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-home h1 { font-size: clamp(44px, 6.4vw, 92px); }
.hero-visual { position: relative; aspect-ratio: 5 / 5.2; }
.tiles { position: absolute; inset: 0; border-radius: 28px; overflow: hidden;
  background:
    linear-gradient(90deg, #dcd9d1 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(#dcd9d1 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(160deg, #ffffff, #efede7 70%);
  box-shadow: 0 30px 80px -30px rgba(17,17,17,.35), inset 0 0 0 1px rgba(0,0,0,.04); }
.tiles::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 22%; background: linear-gradient(#e8e4da, #ddd8cb); border-radius: 14px 14px 0 0; }
.shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%); transform: translateX(-60%); }
.go .shine { animation: shine 1.4s .4s cubic-bezier(.4,0,.2,1) both; }
@keyframes shine { to { transform: translateX(60%); } }

.ring { position: absolute; left: -6%; top: 16%; width: 132px; height: 132px; border-radius: 50%; background: var(--dark); color: #fff;
  display: grid; place-items: center; align-content: center; text-align: center; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); z-index: 3; }
.ring svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: #2b2e2a; }
.ring .bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: calc(264 - 264 * var(--p, 0)); }
.ring b { font-family: var(--display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; position: relative; }
.ring small { font-size: 11px; color: #a7a8a2; position: relative; margin-top: 4px; }

.mini-card { position: absolute; right: -4%; bottom: 30%; z-index: 3; display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 16px;
  padding: 12px 16px; box-shadow: 0 16px 40px -14px rgba(0,0,0,.3); font-size: 14px; }
.mini-card b { display: block; } .mini-card small { color: var(--muted); }
.mini-card .tick { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-weight: 800; }
.go .mini-card { animation: rise .7s 1.1s cubic-bezier(.2,.8,.2,1) both; }

.bottle { position: absolute; right: 6%; top: 2%; width: 34%; z-index: 4; transform-origin: 50% 80%;
  transform: translate3d(0, var(--by, 0px), 0) rotate(var(--br, -8deg)); filter: drop-shadow(0 24px 22px rgba(0,0,0,.28)); }
.bottle svg { width: 100%; height: auto; display: block; animation: float 4.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(2deg); } }
.go .bottle { animation: drop-in .9s .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes drop-in { from { opacity: 0; translate: 0 -60px; rotate: -24deg; } }
.mist { position: absolute; top: 12%; left: 96%; width: 140px; height: 90px; pointer-events: none; }
.mist i { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(#fff, rgba(190,220,235,.7));
  animation: spray .9s ease-out forwards; }
@keyframes spray { from { transform: translate(0,0) scale(.4); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(var(--s)); opacity: 0; } }

/* Zähler-Leiste */
.stats { padding: 30px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stats-grid > div { border-left: 2px solid var(--accent); padding-left: 16px; }
.stats b { font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.03em; display: block; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats small { color: #a7a8a2; font-size: 14px; }

/* Gestaffelter Auftritt + Textmarker, der sich „einzeichnet" */
.js .stagger { opacity: 0; }
.js .go .stagger, .go .stagger { animation: rise .8s calc(var(--d, 0) * 110ms) cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.mark { background-repeat: no-repeat; background-size: 100% 100%; }
.js .mark { background-size: 0% 100%; transition: background-size .9s cubic-bezier(.6,0,.2,1) .55s; }
.js .mark.drawn { background-size: 100% 100%; }

/* ===== Wisch-Intro ===== */
.wipe-layer { position: fixed; inset: 0; z-index: 90; pointer-events: auto; cursor: pointer; }
.wipe-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wipe-layer.fade { transition: opacity .5s ease; opacity: 0; pointer-events: none; }
.squeegee { position: absolute; left: 0; top: 0; width: 70px; z-index: 2; will-change: transform; pointer-events: none;
  filter: drop-shadow(6px 10px 10px rgba(0,0,0,.35)); }
.wipe-skip { position: absolute; right: 20px; bottom: 20px; z-index: 3; font: inherit; font-size: 14px; font-weight: 600; background: rgba(17,17,17,.8);
  color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.wipe-count { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; pointer-events: none; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 520px; width: 100%; margin: 12px auto 0; aspect-ratio: 5 / 4; }
  .ring { left: 4%; width: 108px; height: 108px; } .ring b { font-size: 24px; }
  .mini-card { right: 4%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .stagger { opacity: 1; animation: none !important; }
  .js .mark { background-size: 100% 100%; transition: none; }
  .bottle svg, .go .bottle, .go .mini-card, .go .shine { animation: none !important; }
}

.bottle .liquid { animation: slosh 4.5s ease-in-out infinite; transform-origin: 80px 150px; }
@keyframes slosh { 50% { transform: rotate(-2.5deg) translateY(1px); } }
.bottle .bubble { animation: bub 3.2s ease-in infinite; } .bottle .b2 { animation-delay: 1.4s; }
@keyframes bub { from { transform: translateY(0); opacity: .7; } to { transform: translateY(-120px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bottle .liquid, .bottle .bubble { animation: none; } }

/* ===== Abbruch-Animation ===== */
.demo { position: relative; aspect-ratio: 5 / 5; border-radius: 28px; overflow: hidden; background: #e9e6df;
  box-shadow: 0 30px 80px -30px rgba(17,17,17,.4); isolation: isolate; }
.room { position: absolute; inset: 0; background: linear-gradient(180deg, #f7f6f2, #ecebe5 78%); }
.room .window { position: absolute; left: 14%; top: 14%; width: 34%; height: 40%; border-radius: 6px;
  background: linear-gradient(160deg, #cfe6f2, #f2f8fb 60%, #dfeef5); box-shadow: inset 0 0 0 6px #fff, 0 0 0 1px #d8d5cc;
  background-image: linear-gradient(90deg, transparent calc(50% - 3px), #fff calc(50% - 3px), #fff calc(50% + 3px), transparent calc(50% + 3px)), linear-gradient(160deg, #cfe6f2, #f2f8fb 60%, #dfeef5); }
.room .sun { position: absolute; left: 18%; top: 58%; width: 44%; height: 24%; background: linear-gradient(100deg, rgba(255,240,190,.55), transparent 70%);
  transform: skewX(-24deg); filter: blur(6px); opacity: 0; transition: opacity 1.2s; }
.demo.clean .room .sun { opacity: 1; }
.room .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; border-top: 6px solid #fff;
  background: repeating-linear-gradient(90deg, #d9c3a1 0 18%, #cfb791 18% 18.6%), linear-gradient(#e2cfae, #cdb48c); }
.brick { position: absolute; left: 0; top: 0; border-radius: 3px; will-change: transform;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.18); }
.hammer, .broom { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
.hammer { filter: drop-shadow(0 12px 10px rgba(0,0,0,.35)); }
.dust { position: absolute; left: 0; top: 0; z-index: 4; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(196,186,168,.85), rgba(196,186,168,0) 70%); }
.demo-badge { position: absolute; left: 50%; top: 40%; z-index: 5; display: flex; align-items: center; gap: 12px; background: var(--dark); color: #fff;
  border-radius: 18px; padding: 14px 20px; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.2,1.6,.4,1), opacity .3s; }
.demo-badge span { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.demo-badge b { font-family: var(--display); font-size: 22px; display: block; line-height: 1.1; } .demo-badge small { color: #a7a8a2; }
.demo.clean .demo-badge { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.demo-replay { position: absolute; right: 14px; top: 14px; z-index: 6; font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 999px;
  padding: 8px 14px; background: rgba(255,255,255,.85); cursor: pointer; opacity: 0; transition: opacity .3s; }
.demo.clean .demo-replay { opacity: 1; }
@media (max-width: 960px) { .demo { max-width: 520px; width: 100%; margin: 12px auto 0; aspect-ratio: 5 / 4; } }

/* ===================================================================
   Scroll-Kino (motion.js)
   =================================================================== */
html.smooth { scroll-behavior: auto; }
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), #ffe680 70%, #fff); box-shadow: 0 0 10px rgba(245,196,0,.6); pointer-events: none; }

/* Überschriften Wort für Wort */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
[data-split] .wi { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 60ms); }
[data-split].in .wi, .rm [data-split] .wi { transform: none; }
html:not(.js) [data-split] .wi { transform: none; }

/* Sauber-Satz */
.statement { padding: clamp(80px, 14vw, 180px) 0; }
.clean-text { font-family: var(--display); font-size: clamp(30px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; margin: 0; max-width: 1050px; }
.cw { --k: 0; color: color-mix(in srgb, var(--ink) calc(var(--k) * 100%), #bdb8aa);
  filter: blur(calc((1 - var(--k)) * 2px)); text-shadow: 0 0 calc((1 - var(--k)) * 14px) rgba(120,110,90,.45); transition: color .15s, filter .15s; }
.rm .cw, html:not(.js) .cw { --k: 1; }

/* Kapitel 01–03 */
.chapters { position: relative; padding: 0; background: var(--dark); color: #f3f3ef; }
.js .chapters { height: 360vh; }
.ch-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.chapter { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; --lp: 0; }
.chapter.on { opacity: 1; visibility: visible; }
.ch-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -64%); font-family: var(--display); font-weight: 800;
  font-size: clamp(220px, 38vw, 560px); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.16);
  background: linear-gradient(0deg, rgba(245,196,0,.22) calc(var(--lp) * 100%), transparent calc(var(--lp) * 100%)); -webkit-background-clip: text; background-clip: text;
  user-select: none; pointer-events: none; }
.ch-pic { position: relative; width: min(440px, 62vw); aspect-ratio: 500 / 520; border-radius: 22px; overflow: hidden; margin-top: -9vh;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); transform: translateY(calc((1 - min(1, var(--lp) * 2.5)) * 60px)) scale(calc(.82 + min(1, var(--lp) * 2.5) * .18));
  clip-path: inset(calc((1 - min(1, var(--lp) * 2.5)) * 50%) 0 0 0 round 22px); }
.ch-pic img { width: 100%; height: 100%; object-fit: cover; }
.ch-word { position: absolute; left: 0; right: 0; bottom: 6vh; text-align: center; font-size: clamp(72px, 17vw, 240px); font-weight: 800; letter-spacing: -.055em; line-height: .9;
  color: transparent; background: linear-gradient(90deg, #fff calc(var(--lp) * 160% - 30%), #6a6c66 calc(var(--lp) * 160% - 10%), #3a3c38 calc(var(--lp) * 160% + 10%));
  -webkit-background-clip: text; background-clip: text; pointer-events: none; }
.ch-copy { position: absolute; right: max(16px, calc((100vw - var(--wrap)) / 2)); top: 18vh; width: 280px; font-size: 15px; color: #c9cac4;
  opacity: clamp(0, calc(var(--lp) * 4 - .6), 1); transform: translateY(calc((1 - clamp(0, var(--lp) * 3, 1)) * 20px)); }
.ch-copy .label { color: var(--accent); }
.ch-copy p { margin: 0 0 14px; }
.ch-link { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.ch-link span { display: inline-block; transition: transform .15s; } .ch-link:hover span { transform: translateX(4px); }
.ch-dots { position: absolute; left: max(16px, calc((100vw - var(--wrap)) / 2)); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; z-index: 2; }
.ch-dots i { width: 6px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.2); transition: background .3s, height .3s; }
.ch-dots i.on { background: var(--accent); height: 44px; }

/* Leistungsliste mit Vorschau */
.svc { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "n b go" "n s go"; align-items: center; column-gap: 12px;
  padding: 22px 8px; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; overflow: hidden; isolation: isolate; }
.svc-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.6,0,.2,1); }
.svc-row.on::before { transform: scaleX(1); }
.svc-row .n { grid-area: n; font-size: 13px; font-weight: 700; color: var(--muted); }
.svc-row b { grid-area: b; font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.03em; font-weight: 700; line-height: 1.1; transition: transform .3s; }
.svc-row small { grid-area: s; color: var(--ink-2); font-size: 14px; }
.svc-row .go { grid-area: go; font-size: 22px; transition: transform .3s; }
.svc-row.on b { transform: translateX(8px); } .svc-row.on .go { transform: translateX(-6px) rotate(-45deg); } .svc-row.on .n { color: var(--ink); }
.svc-preview { position: sticky; top: 100px; aspect-ratio: 500 / 520; border-radius: 24px; overflow: hidden; background: #e9e6df; box-shadow: 0 30px 80px -30px rgba(17,17,17,.35); }
.svc-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .5s, transform .8s cubic-bezier(.2,.8,.2,1); }
.svc-pic.on { opacity: 1; transform: none; }
.svc-label { position: absolute; left: 16px; bottom: 16px; background: rgba(17,17,17,.85); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; }

/* Raum wird sauber */
.room-scene { position: relative; padding: 0; }
.js .room-scene { height: 260vh; }
.room-stage { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 88px 0 32px; }
.room-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.room-copy h2 { margin-bottom: 28px; }
.room-copy .mark { color: var(--ink); background: var(--accent); padding: 0 .12em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.room-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 4px; }
.room-steps li { padding: 12px 0 12px 18px; border-left: 3px solid #3a3d39; opacity: .45; transition: opacity .3s, border-color .3s; }
.room-steps li.on { opacity: 1; border-color: var(--accent); }
.room-steps b { display: block; font-family: var(--display); font-size: 22px; } .room-steps span { color: #a7a8a2; font-size: 15px; }
.room-meter { font-size: 15px; color: #a7a8a2; }
.room-meter b { font-family: var(--display); font-size: 40px; color: #fff; font-variant-numeric: tabular-nums; margin-right: 6px; }
.room-bar { display: block; height: 4px; border-radius: 2px; background: #2b2e2a; margin-top: 10px; overflow: hidden; }
.room-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.room-view { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); background: #fff; }
.room-view svg { display: block; width: 100%; height: auto; }
.r-wiper { transition: opacity .3s; }
.r-sparkles use { opacity: 0; transform-box: fill-box; transform-origin: center; }
.room-scene.done .r-sparkles use { animation: tw 1.8s ease-in-out infinite; }
.room-scene.done .r-sparkles use:nth-child(2) { animation-delay: .4s; } .room-scene.done .r-sparkles use:nth-child(3) { animation-delay: .9s; }
.room-scene.done .r-sparkles use:nth-child(4) { animation-delay: 1.2s; } .room-scene.done .r-sparkles use:nth-child(5) { animation-delay: .2s; }
@keyframes tw { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* Ablauf als Reiter */
.tabs { background: var(--surface); border-radius: 24px; padding: clamp(18px, 3vw, 32px); }
.tablist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: clamp(24px, 4vw, 40px); }
.tablist button { font: inherit; font-weight: 600; text-align: left; border: 0; background: none; cursor: pointer; padding: 14px 4px 12px; color: var(--muted);
  border-top: 3px solid var(--line); position: relative; display: flex; gap: 10px; align-items: baseline; }
.tablist button span { font-size: 12px; }
.tablist button::before { content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.tablist button[aria-selected="true"] { color: var(--ink); }
.tablist button[aria-selected="true"]::before { transform: scaleX(1); }
.tablist button.run::before { animation: tabfill 6s linear both; background: var(--accent-deep); }
@keyframes tabfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tablist button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tabpanel { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; animation: rise .5s cubic-bezier(.2,.8,.2,1); }
.tabpanel[hidden] { display: none; }
.tabpanel h3 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.035em; line-height: 1.05; }
.tabpanel p { color: var(--ink-2); margin: 16px 0 24px; max-width: 520px; }
.tab-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tab-points li { background: var(--bg); border-radius: 12px; padding: 14px 16px 14px 48px; position: relative; font-weight: 600; }
.tab-points li::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; font-size: 13px; }

/* Düsen-Flug */
.nozzle { position: relative; padding: 0; background: var(--dark); --intro: 1; --outro: 0; }
.js .nozzle { height: 240vh; }
.nz-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.nz-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nz-head { transform-box: view-box; transform-origin: 500px 500px; will-change: transform; }
.nz-intro { position: absolute; top: 12vh; left: 0; right: 0; text-align: center; margin: 0; color: #fff; font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 52px); letter-spacing: -.03em; opacity: var(--intro); z-index: 2; }
.nz-mist { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: var(--intro); z-index: 2; pointer-events: none; }
.nz-mist i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(#fff, rgba(190,220,235,.6));
  animation: nzm 1.6s ease-out infinite; }
.nz-mist i:nth-child(1) { --a: -30deg; } .nz-mist i:nth-child(2) { --a: -10deg; animation-delay: .2s; } .nz-mist i:nth-child(3) { --a: 10deg; animation-delay: .4s; }
.nz-mist i:nth-child(4) { --a: 30deg; animation-delay: .6s; } .nz-mist i:nth-child(5) { --a: -20deg; animation-delay: .8s; } .nz-mist i:nth-child(6) { --a: 20deg; animation-delay: 1s; }
.nz-mist i:nth-child(7) { --a: 0deg; animation-delay: 1.2s; } .nz-mist i:nth-child(8) { --a: -40deg; animation-delay: 1.4s; }
@keyframes nzm { from { transform: rotate(var(--a)) translateY(-40px) scale(.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(-220px) scale(2.4); opacity: 0; } }
.nz-outro { position: relative; z-index: 3; text-align: center; padding: 0 16px; opacity: var(--outro); transform: translateY(calc((1 - var(--outro)) * 40px)); }
.nz-outro h2 { font-size: clamp(48px, 9vw, 128px); }
.nz-outro .lead { margin: 18px auto 0; }
.nozzle.flooded { background: var(--bg); }

/* Vergleich */
.compare { overflow-x: auto; border-radius: 20px; background: var(--surface); }
.compare:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { vertical-align: bottom; padding-top: 24px; }
.compare thead b { display: block; font-family: var(--display); font-size: 20px; letter-spacing: -.02em; }
.compare thead small { color: var(--muted); font-size: 13px; }
.compare tbody th { font-weight: 500; color: var(--ink-2); width: 40%; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare tbody tr { transition: background .2s; } .compare tbody tr:hover { background: #faf9f6; }
.compare .hl { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.compare td { font-weight: 600; white-space: nowrap; }
.compare td.y::before, .compare td.n::before, .compare td.o::before { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; font-size: 12px; vertical-align: -5px; }
.compare td.y::before { content: "✓"; background: var(--accent); }
.compare td.n { color: var(--muted); font-weight: 500; } .compare td.n::before { content: "–"; background: #ecebe6; }
.compare td.o { color: var(--ink-2); font-weight: 500; } .compare td.o::before { content: "?"; background: #ecebe6; }

/* FAQ animiert */
.faq details p { overflow: hidden; }
.faq summary { transition: color .2s; } .faq summary:hover { color: var(--accent-deep); }

/* Responsiv */
@media (max-width: 960px) {
  .svc { grid-template-columns: 1fr; }
  .svc-preview { display: none; }
  .room-grid { grid-template-columns: 1fr; }
  .room-copy h2 { font-size: clamp(32px, 7vw, 48px); margin-bottom: 14px; }
  .room-steps { margin-bottom: 14px; } .room-steps li { padding: 6px 0 6px 14px; } .room-steps b { font-size: 18px; } .room-steps span { display: none; }
  .room-steps li:not(.on) { display: none; }
  .room-meter b { font-size: 28px; }
  .room-stage { padding: 76px 0 20px; }
  .ch-copy { left: 16px; right: 16px; top: auto; bottom: 26vh; width: auto; text-align: center; }
  .ch-pic { margin-top: -22vh; width: min(320px, 64vw); }
  .ch-dots { display: none; }
  .tablist { grid-template-columns: 1fr 1fr; }
  .tabpanel { grid-template-columns: 1fr; }
}

/* Bewegung reduziert: alles statisch untereinander */
@media (prefers-reduced-motion: reduce) {
  .js .chapters, .js .room-scene, .js .nozzle { height: auto; }
  .ch-stage, .nz-stage, .room-stage { position: relative; height: auto; min-height: 0; }
  .ch-stage { padding: 64px 0; display: grid; gap: 64px; }
  .chapter { position: relative; opacity: 1; visibility: visible; padding-bottom: 0; }
  .ch-word { position: relative; bottom: auto; margin-top: 16px; color: #fff; }
  .ch-copy { position: relative; right: auto; top: auto; left: auto; bottom: auto; margin: 16px auto 0; text-align: center; opacity: 1; transform: none; }
  .ch-num, .ch-dots { display: none; }
  .ch-pic { margin-top: 0; transform: none; clip-path: none; }
  .nozzle { background: var(--bg); } .nz-svg, .nz-intro, .nz-mist { display: none; } .nz-stage { padding: 96px 0; } .nz-outro { opacity: 1; transform: none; }
  .room-steps li { opacity: 1; } .r-wiper { display: none; }
  .scroll-progress { display: none; }
  .tabpanel { animation: none; }
}

/* ===== KI-Hintergrund (Bild/Video) ===== */
.hero.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(0, var(--hy, 0px), 0) scale(1.08); transform-origin: 50% 40%; }
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(246,244,239,.94) 0%, rgba(246,244,239,.82) 34%, rgba(246,244,239,.35) 62%, rgba(246,244,239,.05) 100%),
    linear-gradient(180deg, rgba(246,244,239,0) 70%, var(--bg) 100%); }
.ki-tag { position: absolute; right: 14px; bottom: 12px; z-index: 5; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #fff;
  background: rgba(17,17,17,.55); backdrop-filter: blur(6px); padding: 4px 9px; border-radius: 999px; pointer-events: none; }
.hero.has-bg > .ki-tag { bottom: 16px; }
.svc-preview .ki-tag { bottom: 16px; }
.ch-pic .ki-tag { right: 10px; bottom: 10px; }
/* Fliesen-Fläche im Hero wird zur Glasscheibe über dem Foto */
.has-bg .tiles { background:
    linear-gradient(90deg, rgba(255,255,255,.55) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(rgba(255,255,255,.55) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 70%);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 30px 80px -30px rgba(17,17,17,.35), inset 0 0 0 1px rgba(255,255,255,.6); }
.has-bg .tiles::after { background: linear-gradient(rgba(232,228,218,.75), rgba(221,216,203,.85)); }
/* Fotos statt Zeichnungen: Hochformat 4:5 */
.ch-pic, .svc-preview { aspect-ratio: 4 / 5; }
.ch-pic { width: min(400px, 56vw); }
@media (max-width: 960px) {
  .hero-bg::after { background: linear-gradient(180deg, rgba(246,244,239,.9) 0%, rgba(246,244,239,.78) 55%, rgba(246,244,239,.55) 80%, var(--bg) 100%); }
  .ch-pic { width: min(280px, 58vw); }
}
@media (prefers-reduced-motion: reduce) { .hero-bg video, .hero-bg img { transform: scale(1.02); } }
/* Unterseiten: Text läuft über die ganze Breite – Foto stärker aufhellen */
.hero.has-bg:not(.hero-home) .hero-bg::after { background:
  linear-gradient(90deg, rgba(246,244,239,.96) 0%, rgba(246,244,239,.9) 55%, rgba(246,244,239,.62) 82%, rgba(246,244,239,.45) 100%),
  linear-gradient(180deg, rgba(246,244,239,0) 70%, var(--bg) 100%); }

/* ===== Fotos statt alter Grafiken ===== */
/* Hero-Karte */
.hero-photo { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(17,17,17,.45); isolation: isolate; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s ease-in-out infinite alternate; }
.hero-photo .shine { z-index: 1; }
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -2%); } }
.go .hero-photo { animation: rise .9s .3s cubic-bezier(.2,.8,.2,1) both; }
.hero-photo .ki-tag { z-index: 2; }

/* Raum: Vorher-Foto, Nachher-Foto wird freigewischt */
.room-view { position: relative; aspect-ratio: 16 / 9; --wp: 0%; --wo: 0; }
.room-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-after { clip-path: inset(0 calc(100% - var(--wp)) 0 0); }
.room-wiper { position: absolute; top: 0; bottom: 0; left: var(--wp); width: 8px; margin-left: -4px; opacity: var(--wo); transition: opacity .3s;
  background: linear-gradient(90deg, #111 0 30%, var(--accent) 30% 70%, #111 70%); box-shadow: 0 0 24px rgba(255,255,255,.7); z-index: 2; }
.room-wiper::after { content: ""; position: absolute; left: -30px; top: 50%; width: 30px; height: 44px; margin-top: -22px; border-radius: 8px 0 0 8px; background: #111; }
.room-spark { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.room-spark i { position: absolute; width: 22px; height: 22px; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 20%, #fff 22% 28%, transparent 30% 45%, #fff 47% 53%, transparent 55% 70%, #fff 72% 78%, transparent 80%);
  border-radius: 50%; filter: drop-shadow(0 0 6px #fff); }
.room-spark i:nth-child(1) { left: 74%; top: 22%; } .room-spark i:nth-child(2) { left: 38%; top: 30%; animation-delay: .5s !important; }
.room-spark i:nth-child(3) { left: 55%; top: 78%; animation-delay: .9s !important; } .room-spark i:nth-child(4) { left: 18%; top: 62%; animation-delay: 1.3s !important; }
.room-scene.done .room-spark i { animation: tw 1.8s ease-in-out infinite; }
.room-view .ki-tag { z-index: 4; }

/* Düse: Makrofoto, Zoom in die Öffnung, dann hell */
.nz-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 46%; will-change: transform; }
.nz-flood { position: absolute; inset: 0; background: var(--bg); opacity: var(--flood, 0); z-index: 1; pointer-events: none; }
.nz-intro { text-shadow: 0 2px 20px rgba(0,0,0,.6); }

/* Abbruch: Keller vorher/nachher im Hero */
.ba-hero { position: relative; }
.ba-hero .ba-frame { aspect-ratio: 1 / 1; border-radius: 28px; box-shadow: 0 40px 90px -30px rgba(17,17,17,.45); }
.ba-hero .ki-tag { bottom: 16px; right: 16px; }
@media (max-width: 960px) { .ba-hero { max-width: 520px; width: 100%; margin: 12px auto 0; } }

/* Zusatzfotos auf Unterseiten */
.side-photo { margin: 28px 0 0; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 380px; box-shadow: 0 30px 70px -30px rgba(17,17,17,.4); }
.side-photo img, .wide-photo img { width: 100%; height: 100%; object-fit: cover; }
.wide-photo { margin: 40px 0 0; position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 21 / 9; box-shadow: 0 30px 70px -30px rgba(17,17,17,.4); }
@media (max-width: 960px) { .side-photo { max-width: 100%; aspect-ratio: 4 / 3; } .wide-photo { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .hero-photo img, .go .hero-photo { animation: none; } .nz-img { display: none; } .nz-flood { opacity: 1; } }
@media (max-width: 960px) { .hero.has-bg > .ki-tag { top: 12px; bottom: auto; } }

/* ===================================================================
   Kopfleiste: schwebende Glas-Kapsel, Links linksbündig
   =================================================================== */
:root { --hh: 84px; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 12px 0 0; pointer-events: none; transition: padding .35s cubic-bezier(.2,.8,.2,1); }
.site-header .header-inner { pointer-events: auto; position: relative; isolation: isolate; height: 60px; gap: 6px; justify-content: flex-start;
  width: min(var(--wrap) + 24px, 100% - 20px); padding: 0 8px 0 18px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
  backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.05) inset, 0 12px 40px -12px rgba(17,17,17,.28), 0 2px 6px rgba(17,17,17,.06);
  transition: height .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s; }
/* Lichtkante oben, wie bei echtem Glas */
.site-header .header-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; }
/* Lichtreflex folgt der Maus */
.glass-sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(180px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.85), rgba(255,255,255,0) 70%); }
.header-inner:hover .glass-sheen { opacity: 1; }
.site-header .brand { position: relative; z-index: 3; margin-right: 18px; font-size: 17px; }
.site-header .nav { position: relative; z-index: 3; flex: 1; justify-content: flex-start; gap: 2px; }
.site-header .nav a:not(.btn) { position: relative; z-index: 2; padding: 9px 14px; border-radius: 999px; color: var(--ink-2); transition: color .2s; white-space: nowrap; }
.site-header .nav a:not(.btn):hover, .site-header .nav a[aria-current="page"] { color: var(--ink); }
.site-header .nav-cta { margin-left: auto; position: relative; z-index: 2; box-shadow: 0 6px 18px -6px rgba(17,17,17,.5); }
/* Gleitende Glas-Markierung unter dem aktiven/überfahrenen Link */
.nav-pill { position: absolute; z-index: 1; top: 50%; left: 0; height: 38px; width: 0; margin-top: -19px; border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(17,17,17,.06), 0 6px 16px -6px rgba(17,17,17,.25);
  transition: transform .45s cubic-bezier(.3,1.4,.4,1), width .45s cubic-bezier(.3,1.4,.4,1), opacity .25s; }
.nav-pill::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--accent); }
/* Fortschritt läuft an der Unterkante der Kapsel */
.header-inner .scroll-progress { position: absolute; top: auto; bottom: 0; left: 0; z-index: 3; height: 2px; box-shadow: none; }
/* Beim Scrollen: kompakter, kräftigeres Glas */
.site-header.scrolled { padding-top: 8px; }
.site-header.scrolled .header-inner { height: 54px; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.05) inset, 0 18px 50px -14px rgba(17,17,17,.35), 0 2px 6px rgba(17,17,17,.08); }
/* Über dunklen Abschnitten: dunkles Glas */
.site-header.on-dark .header-inner { background: linear-gradient(135deg, rgba(30,32,30,.62), rgba(18,20,18,.45)); border-color: rgba(255,255,255,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 50px -14px rgba(0,0,0,.6); }
.site-header.on-dark .header-inner::before { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%); }
.site-header.on-dark .brand, .site-header.on-dark .nav a:not(.btn):hover, .site-header.on-dark .nav a[aria-current="page"] { color: #fff; }
.site-header.on-dark .nav a:not(.btn) { color: #c9cac4; }
.site-header.on-dark .nav-pill { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.08); }
.site-header.on-dark .glass-sheen { background: radial-gradient(180px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), rgba(255,255,255,0) 70%); }
.site-header.on-dark .btn { background: #fff; color: var(--ink) !important; }
.site-header.on-dark .nav-toggle span:not(.sr) { background: #fff; }
/* Inhalt beginnt unter der schwebenden Leiste */
main > section.hero:first-child { padding-top: calc(var(--hh) + clamp(40px, 7vw, 96px)); }
main > section.hero-home:first-child { padding-top: calc(var(--hh) + clamp(24px, 5vw, 64px)); }
.ch-stage, .nz-stage { scroll-margin-top: 0; }
.room-stage { padding-top: calc(var(--hh) + 16px); }
.sticky, .svc-preview { top: calc(var(--hh) + 16px); }
.konfig-card { top: calc(var(--hh) + 8px); }

@media (max-width: 1100px) { .site-header .nav a:not(.btn) { padding: 9px 10px; } .site-header .brand { margin-right: 8px; } }
@media (max-width: 860px) {
  :root { --hh: 76px; }
  .site-header .header-inner { height: 56px; padding: 0 6px 0 16px; overflow: visible; }
  .site-header .nav-toggle { margin-left: auto; z-index: 3; }
  .nav-pill, .glass-sheen { display: none; }
  .site-header .nav { position: fixed; top: 72px; left: 10px; right: 10px; bottom: auto; flex: none; border-radius: 22px; padding: 10px 14px 16px;
    background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 60px -20px rgba(17,17,17,.4); border-bottom: 1px solid rgba(255,255,255,.7);
    flex-direction: column; align-items: stretch; gap: 0; transform: translateY(-10px) scale(.98); transform-origin: top center; }
  .site-header .nav.open { transform: none; }
  .site-header .nav a:not(.btn) { padding: 14px 6px; border-radius: 0; border-bottom: 1px solid rgba(17,17,17,.08); font-size: 18px; color: var(--ink) !important; }
  .site-header .nav-cta { margin: 14px 0 0; justify-content: center; }
  .site-header.on-dark .nav a:not(.btn) { color: var(--ink) !important; }
  .site-header.on-dark .nav .btn { background: var(--ink); color: #fff !important; }
}
@media (prefers-reduced-motion: reduce) { .nav-pill, .site-header, .site-header .header-inner { transition: none; } }

/* ===== Szenen nach dem ersten Durchlauf: kompakter Endzustand ===== */
.js .chapters.played, .js .room-scene.played, .js .nozzle.played { height: auto; }
.played .ch-stage, .played .nz-stage, .played .room-stage { position: relative; height: auto; min-height: 0; }
.chapters.played .ch-stage { width: min(var(--wrap), 100% - 32px); margin: 0 auto; padding: clamp(64px, 8vw, 104px) 0; overflow: visible;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.chapters.played .chapter { position: relative; inset: auto; opacity: 1; visibility: visible; display: flex; flex-direction: column; place-items: initial; --lp: 1; }
.chapters.played .ch-num, .chapters.played .ch-dots { display: none; }
.chapters.played .ch-pic { width: 100%; margin: 0; transform: none; clip-path: none; border-radius: 20px; }
.chapters.played .ch-word { position: static; text-align: left; font-size: clamp(40px, 4.4vw, 64px); margin: 18px 0 6px; color: #fff; background: none; }
.chapters.played .ch-copy { position: static; width: auto; opacity: 1; transform: none; text-align: left; }
.room-scene.played .room-stage { padding: clamp(64px, 8vw, 104px) 0; }
.room-scene.played .room-wiper { display: none; }
.room-scene.played .room-steps li { opacity: 1; }
.nozzle.played { background: var(--bg); }
.nozzle.played .nz-img, .nozzle.played .nz-intro, .nozzle.played .nz-mist, .nozzle.played .nz-flood { display: none; }
.nozzle.played .nz-stage { padding: clamp(56px, 8vw, 96px) 0; }
.nozzle.played .nz-outro { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .chapters.played .ch-stage { grid-template-columns: 1fr; gap: 48px; }
  .chapters.played .ch-pic { aspect-ratio: 4 / 3; }
  .room-scene.played .room-steps li:not(.on) { display: list-item; }
}
/* Handy-Menü: verschachteltes Glas kann nicht unscharf zeichnen – daher fast deckend */
@media (max-width: 860px) { .site-header .nav { background: var(--surface); } }

/* Fortschritt über Variable (waagrecht oben, senkrecht in der Seitenleiste) */
.scroll-progress { transform: scaleX(var(--sp, 0)); }

/* ===================================================================
   Seitenleiste links (ab 1100 px): senkrechte Glas-Leiste
   =================================================================== */
@media (min-width: 1100px) {
  :root { --side: 248px; --hh: 0px; }
  .site-header { top: 0; bottom: 0; right: auto; width: var(--side); padding: 14px 0 14px 14px; }
  .site-header.scrolled { padding-top: 14px; }
  .site-header .header-inner, .site-header.scrolled .header-inner {
    width: auto; height: 100%; margin: 0; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 22px 14px 16px; border-radius: 28px; gap: 0; }
  .site-header .brand { margin: 0 4px 30px; font-size: 18px; }
  .site-header .nav { flex-direction: column; align-items: stretch; gap: 4px; flex: 1; }
  .site-header .nav a:not(.btn) { padding: 12px 14px; font-size: 16px; display: flex; align-items: center; gap: 10px; }
  .site-header .nav a:not(.btn)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .2s, transform .2s; }
  .site-header .nav a:not(.btn):hover::before, .site-header .nav a[aria-current="page"]::before { opacity: 1; background: var(--accent); transform: scale(1.4); }
  .nav-pill { top: 0; left: 0; margin-top: 0; height: 44px; border-radius: 14px;
    transition: transform .5s cubic-bezier(.3,1.4,.4,1), height .4s, width .4s, opacity .25s; }
  .nav-pill::after { left: auto; right: 10px; bottom: 50%; margin: 0 0 -6px; width: 3px; height: 12px; }
  .site-header .nav-cta { margin: auto 0 0; justify-content: center; padding: 14px 18px; }
  .header-inner .scroll-progress { top: 24px; bottom: 24px; left: auto; right: 0; width: 2px; height: auto; transform: scaleY(var(--sp, 0)); transform-origin: 50% 0; border-radius: 2px; }
  .glass-sheen { background: radial-gradient(160px 220px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.85), rgba(255,255,255,0) 70%); }

  /* Inhalt rückt neben die Leiste, Hintergründe laufen weiter darunter durch */
  .wrap:not(.header-inner) { width: min(var(--wrap), 100% - var(--side) - 48px);
    margin-left: calc(var(--side) + (100% - var(--side) - min(var(--wrap), 100% - var(--side) - 48px)) / 2); margin-right: auto; }
  .ch-dots { left: calc(var(--side) + 24px); }
  .chapters:not(.played) .chapter { padding-left: var(--side); }
  .ch-word { padding-left: var(--side); }
  .nz-outro { padding-left: calc(var(--side) + 16px); }
  .nz-intro { padding-left: var(--side); }
  .hero-bg::after { background:
    linear-gradient(90deg, rgba(246,244,239,.94) 0%, rgba(246,244,239,.86) 38%, rgba(246,244,239,.38) 66%, rgba(246,244,239,.06) 100%),
    linear-gradient(180deg, rgba(246,244,239,0) 70%, var(--bg) 100%); }
}
@media (min-width: 1100px) {
  .chapters.played .ch-stage { width: min(var(--wrap), 100% - var(--side) - 48px);
    margin-left: calc(var(--side) + (100% - var(--side) - min(var(--wrap), 100% - var(--side) - 48px)) / 2); }
  .chapters.played .ch-word { padding-left: 0; }
  .nozzle.played .nz-outro { padding-left: calc(var(--side) + 16px); }
}

/* ===== Navigation: Symbole + Einklappen beim Scrollen ===== */
.site-header .ni { width: 20px; height: 20px; flex: none; display: none; }
.nav-cta .ni { display: none; }
@media (min-width: 1100px) {
  :root { --side-open: 248px; --side-rail: 96px; --side: var(--side-rail); }
  /* Hero oben: dort ist die Leiste offen, also mehr Abstand */
  .hero .wrap:not(.header-inner) { width: min(var(--wrap), 100% - var(--side-open) - 48px);
    margin-left: calc(var(--side-open) + (100% - var(--side-open) - min(var(--wrap), 100% - var(--side-open) - 48px)) / 2); }
  .site-header { width: var(--side-open); transition: width .5s cubic-bezier(.2,.8,.2,1), padding .35s; }
  .site-header .ni { display: block; }
  .site-header .nav a:not(.btn)::before { display: none; }
  .site-header .nav a:not(.btn) { gap: 12px; padding: 11px 13px; overflow: hidden; }
  .site-header .nl, .site-header .brand-text { white-space: nowrap; transition: opacity .3s .12s, transform .4s cubic-bezier(.2,.8,.2,1) .05s; }
  .site-header .brand { display: flex; align-items: center; gap: 10px; overflow: hidden; }
  .site-header .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .site-header .brand-mark::after { inset: 8px 9px 9px 10px; width: 8px; height: 13px; }
  .site-header .nav-cta { gap: 10px; overflow: hidden; white-space: nowrap; }
  .site-header .nav-cta .ni { display: block; }

  /* eingeklappt: schmale Symbolspalte */
  .site-header.collapsed { width: var(--side-rail); }
  .site-header.collapsed .nl, .site-header.collapsed .brand-text { opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity .15s, transform .2s; }
  .site-header.collapsed .header-inner { padding-left: 12px; padding-right: 12px; }
  .site-header.collapsed .brand { margin-left: 13px; }
  .site-header.collapsed .nav a:not(.btn) { padding-left: 17px; padding-right: 17px; }
  .site-header.collapsed .nav-cta { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 18px; align-self: center; }
  .site-header.collapsed .nav-cta .nl { position: absolute; }
  .site-header.collapsed .nav-pill::after { display: none; }
  /* bei Mausüberfahrt wieder aufklappen – schwebt über dem Inhalt */
  .site-header.collapsed.peek { width: var(--side-open); }
  .site-header.collapsed.peek .nl, .site-header.collapsed.peek .brand-text { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s .12s, transform .4s .05s; }
  .site-header.collapsed.peek .header-inner { padding-left: 14px; padding-right: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 80px -20px rgba(17,17,17,.45); }
  .site-header.collapsed.peek .brand { margin-left: 4px; }
  .site-header.collapsed.peek .nav a:not(.btn) { padding-left: 13px; padding-right: 13px; }
  .site-header.collapsed.peek .nav-cta { width: auto; height: auto; padding: 14px 18px; border-radius: 999px; align-self: stretch; }
  .site-header.collapsed.peek .nav-cta .nl { position: static; }
  .site-header.collapsed.peek .nav-pill::after { display: block; }
  /* kleiner Hinweis-Griff am Rand der eingeklappten Leiste */
  .site-header.collapsed .header-inner::after { content: ""; position: absolute; right: 5px; top: 50%; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px;
    background: rgba(17,17,17,.15); z-index: 3; transition: opacity .3s; }
  .site-header.on-dark.collapsed .header-inner::after { background: rgba(255,255,255,.25); }
  .site-header.collapsed.peek .header-inner::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .nl, .site-header .brand-text { transition: none !important; } }

/* ===== Dunkles Glas als maskierte zweite Ebene (folgt der Kante dunkler Abschnitte) ===== */
.site-header .header-inner.hdr-dark { position: absolute; inset: -1px; z-index: 4; width: auto; height: auto; margin: 0; pointer-events: none;
  border: 1px solid rgba(255,255,255,.14); border-radius: inherit;
  background: linear-gradient(135deg, rgba(34,36,34,.86), rgba(18,20,18,.78));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; opacity: 0;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.site-header.scrolled .header-inner.hdr-dark { height: auto; background: linear-gradient(135deg, rgba(34,36,34,.88), rgba(18,20,18,.8)); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; }
.hdr-dark::before { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%) !important; }
.hdr-dark .brand, .hdr-dark .nav a[aria-current="page"], .hdr-dark .nav a.hov { color: #fff !important; }
.hdr-dark .nav a:not(.btn) { color: #c9cac4 !important; }
.hdr-dark .nav-pill { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.08); }
.hdr-dark .btn, .hdr-dark .nav-cta { background: #fff; color: var(--ink) !important; box-shadow: none; }
.hdr-dark .nav-toggle span:not(.sr) { background: #fff; }
.hdr-dark .ph { background: rgba(245,196,0,.18); border-color: rgba(245,196,0,.6); color: #ffe27a; }
.site-header.collapsed .header-inner.hdr-dark::after { background: rgba(255,255,255,.25); }
/* Mobil-Menü der Kopie nie zeigen */
.hdr-dark .nav.open { opacity: 0 !important; }
@media (max-width: 860px) { .hdr-dark .nav { display: none; } }

/* Lange Linktexte (z. B. „Abbruch & Entrümpelung“) in der offenen Seitenleiste umbrechen statt abschneiden */
@media (min-width: 1100px) {
  .site-header:not(.collapsed) .nav a:not(.btn) .nl,
  .site-header.collapsed.peek .nav a:not(.btn) .nl { white-space: normal; line-height: 1.25; text-wrap: balance; }
  .site-header .nav a:not(.btn) { align-items: center; min-height: 44px; }
}