/* KT Fliesen · Entwurf ATELIER — Designsystem siehe entwuerfe/atelier/DESIGN.md */

@font-face { font-family: 'Geist'; src: url('fonts/geist-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --kalk: #EEEAE3; --kalk-hell: #F7F4EF; --weiss: #FCFBF9; --stein: #DAD4C9; --stein-tief: #C9C2B6;
  --linie: #CFC8BC; --linie-stark: #A9A196; --linie-feld: #8A847B;
  --graphit: #1F1E1C; --graphit-2: #4B4843; --grau: #66615A;
  --akzent: #6E6237; --akzent-hell: #B8A46A; --akzent-zart: #E3DCC8;
  --gruen: #4E6A45; --gelb: #A9832A; --orange: #B65E2A;
  --schrift: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --rand: clamp(16px, 3vw, 40px);
  --kopf-h: 68px;
  --r-s: 2px; --r-l: 10px;
  --ebene-schatten: 0 24px 60px -24px rgb(31 30 28 / .38);
  --t-riese: clamp(52px, 9.4vw, 152px);
  --t-1: clamp(40px, 5.9vw, 92px);
  --t-2: clamp(30px, 3.5vw, 54px);
  --t-3: clamp(21px, 1.8vw, 27px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --leiste-h: 0px;
  color-scheme: light;
}
@media (max-width: 759px) { :root { --kopf-h: 58px; --leiste-h: calc(60px + env(safe-area-inset-bottom, 0px)); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body { margin: 0; background: var(--kalk); color: var(--graphit); font: 400 17px/1.6 var(--schrift); font-feature-settings: 'ss01' 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: var(--leiste-h); overflow-x: clip; }
@media (max-width: 759px) { body { font-size: 16px; } }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
main:focus { outline: none; }
::selection { background: var(--akzent-zart); }

.nur-leser { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--graphit); color: var(--kalk); padding: 10px 14px; border-radius: var(--r-s); }
.sprung:focus { top: 12px; }

/* ── Typografie ── */
.t-1 { font-size: var(--t-1); font-weight: 300; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.t-2 { font-size: var(--t-2); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.t-3 { font-size: var(--t-3); font-weight: 400; letter-spacing: -.015em; line-height: 1.25; }
.etikett { font: 450 11.5px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--grau); }
.akzent { color: var(--akzent); }
.mono, .zahl-zelle { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ── Knöpfe & Links ── */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--graphit); border-radius: var(--r-s); background: var(--graphit); color: var(--kalk); font: 500 15px/1.2 var(--schrift); letter-spacing: -.005em; text-decoration: none; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; }
.knopf:hover { background: var(--akzent); border-color: var(--akzent); }
.knopf--klein { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
.knopf--linie { background: transparent; color: var(--graphit); }
.knopf--linie:hover { background: var(--graphit); color: var(--kalk); border-color: var(--graphit); }
.knopf--breit { width: 100%; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.knopf--datei { position: relative; cursor: pointer; }
.knopf--datei input { inset: 0; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 6px; transition: text-decoration-color .2s, color .2s; }
.textlink:hover { text-decoration-color: currentColor; color: var(--akzent); }
.textknopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 450; color: var(--graphit); text-decoration: none; }
.textknopf:hover { color: var(--akzent); }
.textknopf[aria-pressed="true"] { color: var(--akzent); }
.textknopf[aria-pressed="true"] .ic { stroke-width: 2; }
.knopf-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-s); background: transparent; color: inherit; transition: background .2s; }
.knopf-icon:hover { background: rgb(31 30 28 / .07); }
.knopf-icon--hell { color: #fff; border: 1px solid rgb(255 255 255 / .5); }
.knopf-icon--hell:hover { background: rgb(255 255 255 / .16); }
.knopf-icon--linie { border: 1px solid var(--linie-feld); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: transparent; font-size: 14px; line-height: 1.25; text-align: left; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--graphit); }
.chip[aria-pressed="true"] { background: var(--graphit); border-color: var(--graphit); color: var(--kalk); }
.chip--klein { min-height: 34px; padding: 4px 11px; font-size: 13px; }
@media (pointer: coarse) { .chip, .chip--klein { min-height: 44px; } }
.mini { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--kalk-hell); font: 450 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--graphit); }
.mini::after { content: ''; position: absolute; inset: -6px -3px; }
.mini:hover { border-color: var(--graphit); }
.mini[aria-pressed="true"] { background: var(--graphit); border-color: var(--graphit); color: var(--kalk); }
.mini[aria-pressed="true"] .ic-plus { transform: rotate(45deg); }
.mini .ic { width: 14px; height: 14px; transition: transform .2s; }
.zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--akzent); color: #fff; font: 500 10.5px/1 var(--mono); }
.zahl[data-kt-leer] { display: none; }
.ampel { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 8px; vertical-align: 1px; }
.ampel--gruen { background: var(--gruen); } .ampel--gelb { background: var(--gelb); } .ampel--orange { background: var(--orange); }

/* ── Kopfzeile ── */
.kopf { position: sticky; top: 0; z-index: 60; background: var(--kalk); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kopf.ist-gescrollt, .kopf:not(.kopf--klar) { border-bottom-color: var(--linie); }
.kopf__innen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: var(--kopf-h); padding: 0 var(--rand); max-width: 1680px; margin: 0 auto; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.marke__zeichen { width: auto; height: 24px; }
.marke__text { font-size: 16px; font-weight: 450; letter-spacing: -.01em; white-space: nowrap; }
.marke__ort { color: var(--grau); }
.kopf__nav ul { display: flex; justify-content: center; gap: clamp(16px, 2.1vw, 34px); }
.kopf__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; color: var(--graphit-2); transition: color .2s; }
.kopf__nav a:hover, .kopf__nav a[aria-current] { color: var(--graphit); }
.kopf__nav a[aria-current] { text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--akzent); }
.kopf__werkzeuge { display: flex; align-items: center; gap: 6px; }
.berater-feld { display: inline-flex; align-items: center; gap: 10px; width: clamp(200px, 19vw, 290px); height: 42px; padding: 0 14px; border: 1px solid var(--linie-stark); border-radius: var(--r-s); background: var(--kalk-hell); color: var(--grau); font-size: 14px; text-align: left; transition: border-color .2s, color .2s; margin-right: 8px; }
.berater-feld:hover { border-color: var(--graphit); color: var(--graphit); }
.berater-feld__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf__zahl { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 8px; text-decoration: none; border-radius: var(--r-s); }
.kopf__zahl:hover { background: rgb(31 30 28 / .06); }
.kopf__zahl .zahl { position: absolute; top: 4px; left: 22px; }
.kopf__wort { font-size: 14px; color: var(--graphit-2); }
.kopf__menue { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; place-items: center; }
@media (max-width: 1180px) { .kopf__nav { display: none; } .kopf__menue { display: inline-grid; } .kopf__innen { grid-template-columns: auto 1fr; } .kopf__werkzeuge { justify-self: end; } .kopf__wort { display: none; } }
@media (max-width: 759px) { .berater-feld { display: none; } .kopf__zahl[href$="muster.html"] { display: none; } .marke__zeichen { height: 20px; } .marke__text { font-size: 15px; } }

/* ── Handy-Leiste ── */
.handyleiste { display: none; }
@media (max-width: 759px) {
  .handyleiste { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: var(--leiste-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--kalk-hell); border-top: 1px solid var(--linie); }
  .handyleiste a, .handyleiste button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; font: 450 11px/1 var(--schrift); color: var(--graphit-2); text-decoration: none; }
  .handyleiste [aria-current] { color: var(--graphit); }
  .handyleiste [aria-current]::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--akzent); }
  .handyleiste .zahl { position: absolute; top: 6px; left: calc(50% + 4px); }
}

/* ── Seitenrahmen ── */
.seite { max-width: 1520px; margin: 0 auto; padding: 20px var(--rand) 112px; }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 4px 0; font: 450 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.brotkrumen li + li::before { content: '/'; margin: 0 10px; color: var(--linie-stark); }
.brotkrumen a { text-decoration: none; display: inline-block; padding: 6px 0; }
.brotkrumen a:hover { color: var(--graphit); }
.brotkrumen [aria-current] { color: var(--graphit); }
.seiten-kopf { display: grid; gap: 18px; margin: 28px 0 48px; max-width: 980px; }
.seiten-kopf__text { font-size: 18px; color: var(--graphit-2); max-width: 62ch; }
.seiten-kopf__klein { font-size: 14px; color: var(--grau); max-width: 70ch; }
.seiten-hinweis { margin-top: 48px; color: var(--grau); font-size: 14px; }
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px 40px; align-items: end; margin-bottom: 64px; }
.abschnitt-kopf .etikett { grid-column: 1 / -1; }
.abschnitt-kopf__text { color: var(--graphit-2); max-width: 46ch; }
.abschnitt-kopf--zeile { grid-template-columns: auto 1fr auto; }
@media (max-width: 759px) { .abschnitt-kopf, .abschnitt-kopf--zeile { grid-template-columns: 1fr; margin-bottom: 36px; } }

/* ══════════════ START ══════════════ */
.start-kopf { padding: 24px var(--rand) 0; max-width: 1680px; margin: 0 auto; }
.start-kopf__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 24px 48px; align-items: end; margin-bottom: 28px; }
.start-kopf__titel { font-size: clamp(42px, 6.3vw, 100px); }
.start-kopf__neben { display: grid; gap: 18px; padding-bottom: 6px; }
.start-kopf__neben p { font-size: 16px; color: var(--graphit-2); }
.start-kopf__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.rahmen { position: relative; height: clamp(420px, calc(100svh - var(--kopf-h) - 250px), 820px); min-height: 420px; border-radius: var(--r-l); overflow: hidden; background: var(--graphit); isolation: isolate; }
.rahmen__bilder, .rahmen__bild { position: absolute; inset: 0; }
.rahmen__bild { opacity: 0; transition: opacity 1.2s var(--ease); }
.rahmen__bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; }
.rahmen__bild.ist-aktiv { opacity: 1; z-index: 1; }
.rahmen__bild.ist-aktiv img { transform: scale(1); }
.rahmen__schleier { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgb(18 17 15 / .58) 0%, rgb(18 17 15 / .2) 32%, transparent 55%); pointer-events: none; }
.rahmen__fenster { position: absolute; z-index: 3; left: 20px; bottom: 20px; width: 252px; padding: 6px 6px 0; background: var(--kalk-hell); border-radius: 4px; }
.rahmen__film, .rahmen__clip { width: 100%; height: 146px; overflow: hidden; border-radius: 2px; --film-grund: #F7F4EF; --film-linie: #1F1E1C; --film-akzent: #6E6237; --film-text: #1F1E1C; --film-schrift: 'Geist Mono'; }
.rahmen__clip { object-fit: cover; }
.rahmen__fenster-text { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 4px; color: var(--graphit); text-decoration: none; font-size: 10.5px; }
.rahmen__fenster-text:hover { color: var(--akzent); }
.rahmen__unten { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 24px; padding: 0 28px 24px 300px; color: #fff; }
.rahmen__zeile { grid-column: 1 / -1; color: rgb(255 255 255 / .86); }
.rahmen__name { font-size: var(--t-riese); font-weight: 300; letter-spacing: -.045em; line-height: .88; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: clip; padding-bottom: .04em; }
.rahmen__name:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.rahmen.wechselt .rahmen__name, .rahmen.wechselt .rahmen__zeile { opacity: 0; transform: translateY(8px); }
.rahmen__name, .rahmen__zeile { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.zaehler { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 4px 6px; padding-bottom: 10px; }
.zaehler__zahl { color: #fff; min-width: 84px; text-align: center; font-size: 13px; }
.zaehler__linie { grid-column: 1 / -1; height: 1px; background: rgb(255 255 255 / .32); overflow: hidden; }
.zaehler__linie i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 899px) {
  .start-kopf__text { grid-template-columns: 1fr; }
  .rahmen { height: 64svh; min-height: 400px; }
  .rahmen__fenster { left: 12px; top: 12px; bottom: auto; width: 148px; padding: 4px 4px 0; }
  .rahmen__film, .rahmen__clip { height: 84px; }
  .rahmen__fenster-text { min-height: 30px; font-size: 9.5px; letter-spacing: .04em; }
  .rahmen__unten { padding: 0 16px 16px; grid-template-columns: 1fr; }
  .rahmen__name { font-size: clamp(46px, 14vw, 96px); }
  .zaehler { justify-content: start; padding-bottom: 0; }
}
@media (max-width: 759px) { .start-kopf { padding-top: 16px; } .start-kopf__titel { font-size: clamp(38px, 11vw, 60px); } }

/* Statement */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(96px, 12vw, 176px) var(--rand) clamp(80px, 9vw, 140px); max-width: 1520px; margin: 0 auto; }
.statement__titel { grid-column: 1 / 4; padding-top: 12px; }
.statement__text { grid-column: 4 / 12; font-size: clamp(25px, 2.7vw, 42px); font-weight: 300; letter-spacing: -.025em; line-height: 1.22; text-wrap: pretty; }
.kennzahlen { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie); }
.kennzahlen div { display: flex; flex-direction: column-reverse; gap: 6px; }
.kennzahlen dt { font: 450 11.5px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--grau); }
.kennzahlen dd { font-size: clamp(36px, 3.8vw, 58px); font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .statement__titel, .statement__text, .kennzahlen { grid-column: 1 / -1; } .kennzahlen { grid-template-columns: repeat(2, 1fr); } }

/* Ausstellung */
.ausstellung { padding: 0 var(--rand) clamp(96px, 10vw, 160px); max-width: 1520px; margin: 0 auto; }
.kollektionen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 72px 24px; align-items: start; }
.kollektion a { display: block; text-decoration: none; }
.kollektion__bild { position: relative; display: block; overflow: hidden; background: var(--stein); aspect-ratio: 4 / 5; }
.kollektion__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.kollektion__flaeche { opacity: 0; transform: scale(1.08); }
.kollektion a:hover .kollektion__flaeche, .kollektion a:focus-visible .kollektion__flaeche { opacity: 1; transform: scale(1); }
.kollektion__text { display: grid; gap: 4px; margin-top: 14px; }
.kollektion__name { font-size: var(--t-3); letter-spacing: -.015em; line-height: 1.2; }
.kollektion a:hover .kollektion__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.kollektion__kurz { font-size: 14.5px; color: var(--graphit-2); max-width: 44ch; }
.kollektion--1 { grid-column: 1 / span 7; } .kollektion--1 .kollektion__bild { aspect-ratio: 3 / 2; }
.kollektion--2 { grid-column: 9 / span 4; margin-top: 180px; }
.kollektion--3 { grid-column: 2 / span 4; }
.kollektion--4 { grid-column: 7 / span 6; margin-top: 96px; } .kollektion--4 .kollektion__bild { aspect-ratio: 3 / 2; }
.kollektion--5 { grid-column: 1 / span 5; margin-top: 40px; } .kollektion--5 .kollektion__bild { aspect-ratio: 1; }
.kollektion--6 { grid-column: 7 / span 4; margin-top: 180px; }
.kollektion--7 { grid-column: 2 / span 6; } .kollektion--7 .kollektion__bild { aspect-ratio: 3 / 2; }
.kollektion--8 { grid-column: 9 / span 4; margin-top: 120px; }
.kollektion--9 { grid-column: 4 / span 6; } .kollektion--9 .kollektion__bild { aspect-ratio: 16 / 9; }
@media (max-width: 899px) {
  .kollektionen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 12px; }
  .kollektion { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .kollektion:nth-child(even) { grid-column: 2 / -1 !important; }
  .kollektion .kollektion__bild { aspect-ratio: 4 / 3 !important; }
}

/* Signatur: Verband */
.verband { position: relative; height: 290vh; }
.verband__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.verband__text { position: absolute; z-index: 3; left: var(--rand); top: 50%; transform: translateY(-50%); width: min(30vw, 400px); display: grid; gap: 16px; }
.verband__text p:not(.etikett) { color: var(--graphit-2); font-size: 18px; }
.verband__unterschrift { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); padding-top: 14px; border-top: 1px solid var(--linie); }
.verband.ist-fertig .verband__unterschrift { opacity: 1; transform: none; }
.verband__brett { position: absolute; right: var(--rand); top: 50%; width: min(58vw, 860px); aspect-ratio: 2 / 1; transform: translateY(-50%); background: #C8C0B2; opacity: 0; }
.verband__steine { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.verband__stein { position: absolute; left: 0; top: 0; display: block; width: 100px; height: 50px; overflow: hidden; background: var(--ton, var(--stein)); will-change: transform; pointer-events: auto; box-shadow: 0 1px 0 rgb(31 30 28 / .06); }
.verband__stein img { width: 100%; height: 100%; object-fit: cover; }
.verband:not(.ist-bereit) .verband__stein { opacity: 0; }
@media (max-width: 899px) {
  .verband { height: 240vh; }
  .verband__text { top: calc(var(--kopf-h) + 28px); transform: none; width: auto; right: var(--rand); gap: 10px; }
  .verband__text p:not(.etikett) { font-size: 16px; }
  .verband__brett { top: auto; bottom: calc(var(--leiste-h) + 48px); right: var(--rand); left: var(--rand); width: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .verband { height: auto; }
  .verband__buehne { position: relative; height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; padding: 96px var(--rand); }
  .verband__text, .verband__brett { position: relative; inset: auto; transform: none; width: auto; left: auto; right: auto; top: auto; bottom: auto; }
  .verband__steine { position: absolute; }
  .verband__unterschrift { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) { .verband__buehne { grid-template-columns: 1fr; } }

/* Fliesenreihe */
.reihe { padding: clamp(80px, 9vw, 140px) 0; }
.reihe__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; padding: 0 var(--rand); margin-bottom: 36px; max-width: 1680px; margin-left: auto; margin-right: auto; }
.reihe__band { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.reihe__band::-webkit-scrollbar { display: none; }
.reihe__band + .reihe__band { margin-top: 28px; }
.reihe__band ul { display: flex; gap: 16px; width: max-content; padding: 0 var(--rand); }
.platte { position: relative; width: clamp(170px, 16vw, 236px); }
.platte__bild { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--ton, var(--stein)); }
.platte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.platte--frei .platte__bild { background: var(--stein); }
.platte--frei .platte__bild img { object-fit: contain; padding: 12%; }
.platte__bild:hover img { transform: scale(1.04); }
.platte__text { display: grid; gap: 2px; margin-top: 10px; padding-right: 60px; }
.platte__name { font-size: 15px; font-weight: 450; line-height: 1.3; }
.platte .mini { position: absolute; right: 0; top: calc(100% - 46px); }
@media (max-width: 759px) { .platte .mini { top: auto; bottom: -4px; } }

/* Herstellung (dunkel) */
.herstellung { background: var(--graphit); color: var(--kalk); padding: clamp(80px, 9vw, 136px) var(--rand); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; --film-grund: #1F1E1C; --film-linie: #EEEAE3; --film-akzent: #B8A46A; --film-text: #EEEAE3; --film-glut: #E9773A; --film-schrift: 'Geist Mono'; }
.herstellung .etikett { color: #A9A196; }
.herstellung__text { display: grid; gap: 18px; align-self: start; }
.herstellung__text p:not(.etikett) { color: #C9C2B6; max-width: 40ch; }
.herstellung__film { min-height: 300px; }
.herstellung :focus-visible { outline-color: var(--kalk); }
@media (max-width: 899px) { .herstellung { grid-template-columns: 1fr; } }

/* Raumstudio-Teaser */
.studio-teaser { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px clamp(32px, 4vw, 64px); align-items: center; padding: clamp(96px, 10vw, 160px) var(--rand); max-width: 1680px; margin: 0 auto; }
.studio-teaser__bild { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-l); overflow: hidden; background: var(--stein); }
.studio-teaser__basis { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-teaser__live { position: absolute; inset: 0; }
.studio-teaser__live .kt-rs { height: 100%; }
.studio-teaser__marke { position: absolute; z-index: 3; top: 14px; left: 14px; padding: 5px 8px; background: rgb(247 244 239 / .92); color: var(--graphit-2); }
.studio-teaser__wahl { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: flex; gap: 8px; padding: 8px; background: rgb(247 244 239 / .94); border-radius: 4px; }
.stein-wahl { width: 52px; height: 52px; padding: 0; border: 0; background: var(--ton); outline: 1px solid rgb(31 30 28 / .15); outline-offset: -1px; overflow: hidden; border-radius: 2px; transition: transform .2s; }
.stein-wahl img { width: 100%; height: 100%; object-fit: cover; }
.stein-wahl[aria-pressed="true"] { outline: 2px solid var(--graphit); outline-offset: 2px; }
.stein-wahl:hover { transform: translateY(-2px); }
.studio-teaser__text { display: grid; gap: 18px; align-content: center; }
.studio-teaser__text p:not(.etikett) { color: var(--graphit-2); }
.studio-teaser__text .knopf { justify-self: start; }
@media (max-width: 899px) { .studio-teaser { grid-template-columns: 1fr; } .stein-wahl { width: 44px; height: 44px; } }

/* Räume-Bühne */
.raeume { padding: 0 var(--rand) clamp(96px, 10vw, 160px); max-width: 1680px; margin: 0 auto; }
.buehne { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px clamp(32px, 4vw, 64px); }
.buehne__bilder { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--stein); }
.buehne__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.buehne__bild.ist-aktiv { opacity: 1; }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; }
.buehne__seite { display: flex; flex-direction: column; gap: 32px; justify-content: space-between; }
.buehne__info { display: grid; gap: 12px; }
.buehne__unter { color: var(--graphit-2); }
.buehne__positionen { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.buehne__positionen li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.buehne__positionen a { font-weight: 450; text-decoration: none; }
.buehne__positionen a:hover { text-decoration: underline; }
.buehne__liste { display: grid; border-top: 1px solid var(--linie); }
.buehne__liste button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--linie); background: none; text-align: left; font-size: 15px; color: var(--graphit-2); transition: color .2s, padding .3s var(--ease); }
.buehne__liste button:hover { color: var(--graphit); }
.buehne__liste button[aria-pressed="true"] { color: var(--graphit); padding-left: 10px; box-shadow: inset 2px 0 0 var(--akzent); }
@media (max-width: 899px) { .buehne { grid-template-columns: 1fr; } }

/* Berater-Band */
.berater-band { padding: clamp(64px, 7vw, 112px) var(--rand); max-width: 1520px; margin: 0 auto; border-top: 1px solid var(--linie); }
.berater-band__feld { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 22px; width: 100%; padding: 22px 0 26px; border: 0; border-bottom: 1px solid var(--graphit); background: none; text-align: left; color: var(--graphit); }
.berater-band__feld .ic { grid-row: span 2; width: 34px; height: 34px; stroke-width: 1.25; }
.berater-band__text { font-size: var(--t-2); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; color: var(--graphit-2); transition: color .2s; }
.berater-band__feld:hover .berater-band__text { color: var(--graphit); }
.berater-band__bsp { font: 450 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--grau); }
.berater-band .chips { margin-top: 20px; }

/* Musterbox */
.musterbox { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 7vw, 120px); align-items: center; padding: clamp(80px, 9vw, 136px) var(--rand); max-width: 1520px; margin: 0 auto; }
.musterbox__kasten { position: relative; padding: 52px 24px 24px; background: var(--stein); border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(31 30 28 / .06); }
.musterbox__deckel { position: absolute; top: 18px; left: 24px; color: var(--graphit-2); }
.musterbox__faecher { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.musterbox__faecher li { position: relative; aspect-ratio: 3 / 4; background: var(--kalk); box-shadow: inset 0 2px 6px rgb(31 30 28 / .14); overflow: hidden; }
.musterbox__faecher li .etikett { position: absolute; left: 8px; bottom: 8px; z-index: 1; font-size: 10.5px; color: var(--grau); }
.musterbox__faecher li img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; box-shadow: 0 6px 14px -6px rgb(31 30 28 / .4); animation: einlegen .5s var(--ease); }
.musterbox__faecher li.ist-voll .etikett { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .5); }
@keyframes einlegen { from { transform: translateY(-14px); opacity: 0; } }
.musterbox__text { display: grid; gap: 18px; }
.musterbox__text p:not(.etikett) { color: var(--graphit-2); }
.musterbox__text .knopf { justify-self: start; }
@media (max-width: 899px) { .musterbox { grid-template-columns: 1fr; } .musterbox__kasten { padding: 44px 14px 14px; } .musterbox__faecher { gap: 6px; } }

/* Köln + Herkunft */
.zwei-texte { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(40px, 8vw, 140px); padding: clamp(80px, 8vw, 120px) var(--rand); max-width: 1520px; margin: 0 auto; border-top: 1px solid var(--linie); }
.zwei-texte__teil { display: grid; gap: 16px; align-content: start; }
.zwei-texte__teil > p:not(.etikett) { color: var(--graphit-2); max-width: 48ch; }
.zwei-texte__teil .textlink { justify-self: start; }
@media (max-width: 759px) { .zwei-texte { grid-template-columns: 1fr; } }

/* PLZ-Prüfer */
.plz-pruefer { display: grid; gap: 8px; max-width: 420px; }
.plz-pruefer label { font-size: 14px; color: var(--graphit-2); }
.plz-pruefer__zeile { display: flex; gap: 8px; }
.plz-pruefer input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--weiss); font-family: var(--mono); font-size: 15px; letter-spacing: .08em; }
.plz-pruefer__ergebnis { font-size: 14px; color: var(--graphit); min-height: 1.4em; }
.plz-pruefer__ergebnis.ist-fehler { color: #9A3A1B; }
.plz-pruefer--gross { max-width: 520px; margin: 24px 0 32px; }

/* Profi-Band */
.profi-band { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px 48px; align-items: start; padding: clamp(56px, 6vw, 88px) var(--rand); background: var(--stein); }
.profi-band p { color: var(--graphit-2); margin-top: 12px; max-width: 46ch; font-size: 16px; }
.profi-band__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid rgb(31 30 28 / .18); }
.profi-band__liste li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgb(31 30 28 / .18); font-size: 15.5px; }
.profi-band .etikett { color: var(--graphit-2); }
.profi-band__aktion { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 1023px) { .profi-band { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .profi-band__liste { grid-template-columns: 1fr; } }

/* Profi-Schalter */
.profi-schalter { display: inline-flex; align-items: center; gap: 0; flex-wrap: wrap; }
.profi-schalter .etikett { margin-right: 12px; }
.profi-schalter button { min-height: 40px; padding: 0 14px; border: 1px solid var(--linie-feld); background: transparent; font-size: 14px; }
.profi-schalter button + button { border-left: 0; }
.profi-schalter button:first-of-type { border-radius: var(--r-s) 0 0 var(--r-s); }
.profi-schalter button:last-of-type { border-radius: 0 var(--r-s) var(--r-s) 0; }
.profi-schalter button[aria-pressed="true"] { background: var(--graphit); border-color: var(--graphit); color: var(--kalk); }
.profi-schalter--dunkel .etikett { color: #A9A196; }
.profi-schalter--dunkel button { border-color: #6F6A62; color: var(--kalk); }
.profi-schalter--dunkel button[aria-pressed="true"] { background: var(--kalk); color: var(--graphit); border-color: var(--kalk); }
.profi-schalter--gross button { min-height: 48px; padding: 0 22px; font-size: 15px; }
.profi-schalter__status { margin-left: 14px; }
@media (pointer: coarse) { .profi-schalter button { min-height: 44px; } }

/* ── Fuß ── */
.fuss { background: var(--graphit); color: var(--kalk); padding: clamp(64px, 7vw, 104px) var(--rand) 28px; }
.fuss a { text-decoration: none; color: #DDD7CD; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss :focus-visible { outline-color: var(--kalk); }
.fuss__innen { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; max-width: 1520px; margin: 0 auto; }
.fuss__marke { display: grid; gap: 22px; align-content: start; }
.fuss__marke img { height: 30px; width: auto; }
.fuss__claim { font-size: clamp(22px, 2vw, 30px); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; max-width: 20ch; }
.fuss__spalte .etikett { color: #A9A196; margin-bottom: 14px; font-weight: 450; }
.fuss__spalte li a { display: inline-block; padding: 5px 0; font-size: 15px; }
.fuss__unten { display: grid; gap: 6px; max-width: 1520px; margin: 64px auto 0; padding-top: 20px; border-top: 1px solid #3A3833; font-size: 13px; color: #A9A196; }
.fuss__demo strong { color: var(--kalk); font-weight: 500; }
@media (max-width: 899px) { .fuss__innen { grid-template-columns: 1fr 1fr; } .fuss__marke { grid-column: 1 / -1; } }

/* ══════════════ EBENEN (Menü, Berater, Korb-Schublade) ══════════════ */
.ebene { position: fixed; inset: 0; z-index: 100; }
.ebene__grund { position: absolute; inset: 0; background: rgb(31 30 28 / .32); opacity: 0; transition: opacity .28s var(--ease); }
.ebene__blatt { position: absolute; top: 0; right: 0; bottom: 0; width: min(468px, 100vw); display: flex; flex-direction: column; background: var(--kalk-hell); box-shadow: var(--ebene-schatten); transform: translateX(104%); transition: transform .32s var(--ease); }
.ebene.ist-offen .ebene__grund { opacity: 1; }
.ebene.ist-offen .ebene__blatt { transform: none; }
.ebene__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 12px 8px 22px; border-bottom: 1px solid var(--linie); flex: none; }
.ebene--menue .ebene__blatt { padding-bottom: 24px; overflow-y: auto; }
.menue__haupt { padding: 12px 22px; }
.menue__haupt a { display: flex; align-items: baseline; gap: 16px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 26px; font-weight: 300; letter-spacing: -.02em; text-decoration: none; }
.menue__service { padding: 8px 22px 20px; }
.menue__service a { display: block; padding: 10px 0; font-size: 16px; text-decoration: none; color: var(--graphit-2); }
.ebene--menue .profi-schalter { padding: 0 22px; }
@media (max-width: 759px) {
  .ebene--seite .ebene__blatt { top: auto; left: 0; width: 100%; height: min(88svh, 760px); border-radius: var(--r-l) var(--r-l) 0 0; transform: translateY(104%); }
  .ebene--seite.ist-offen .ebene__blatt { transform: none; }
}

/* Berater */
.berater__titel, .schublade__titel { font-size: 19px; font-weight: 450; letter-spacing: -.01em; }
.berater__verlauf { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.nachricht { max-width: 94%; padding: 13px 16px; border-radius: var(--r-s); font-size: 15px; line-height: 1.5; }
.nachricht--kt { background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); }
.nachricht--du { align-self: flex-end; background: var(--graphit); color: var(--kalk); }
.nachricht__erkannt { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.nachricht__erkannt span { padding: 3px 7px; background: var(--akzent-zart); border-radius: var(--r-s); font: 450 11px/1.3 var(--mono); letter-spacing: .03em; }
.nachricht__erkannt span.offen { background: transparent; box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--grau); text-decoration: line-through; }
.nachricht__frage { margin-top: 8px; font-weight: 500; }
.nachricht__hinweis { margin-top: 8px; font-size: 13.5px; color: var(--grau); }
.berater__start { display: grid; gap: 10px; }
.treffer-liste { display: grid; gap: 10px; }
.treffer { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; padding: 12px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); border-radius: var(--r-s); }
.treffer__bild { grid-row: span 3; width: 64px; height: 64px; background: var(--ton, var(--stein)); overflow: hidden; }
.treffer__bild img { width: 100%; height: 100%; object-fit: cover; }
.treffer__kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.treffer__name { font-size: 15.5px; font-weight: 500; text-decoration: none; }
.treffer__name:hover { text-decoration: underline; }
.treffer__preis { font: 450 12.5px/1.3 var(--mono); white-space: nowrap; }
.treffer__gruende { display: grid; gap: 2px; font-size: 13px; color: var(--graphit-2); }
.treffer__gruende li { display: flex; gap: 6px; align-items: baseline; }
.treffer__gruende .ic { flex: none; width: 13px; height: 13px; color: var(--akzent); transform: translateY(2px); }
.treffer__knoepfe { display: flex; flex-wrap: wrap; gap: 0 14px; }
.treffer__knoepfe .textknopf { font-size: 13.5px; min-height: 36px; }
.berater__eingabe { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linie); background: var(--kalk-hell); flex: none; }
.berater__eingabe input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--weiss); font-size: 16px; }
.berater__hinweis { padding: 0 18px 16px; font-size: 12px; line-height: 1.45; color: var(--grau); flex: none; background: var(--kalk-hell); }
@media (max-width: 759px) { .berater__hinweis { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

/* Korb-Schublade */
.schublade__inhalt { flex: 1; overflow-y: auto; padding: 22px; display: grid; gap: 18px; align-content: start; }
.schublade__neu { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.schublade__neu img { width: 76px; height: 76px; object-fit: cover; background: var(--stein); }
.schublade__neu strong { display: block; font-weight: 500; }
.schublade__summe { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.schublade__summe strong { font: 400 20px/1.2 var(--schrift); font-variant-numeric: tabular-nums; }
.schublade__fuss { display: grid; gap: 4px; justify-items: center; padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie); flex: none; }

.hinweis-toast { position: fixed; z-index: 120; left: 50%; bottom: calc(24px + var(--leiste-h)); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; background: var(--graphit); color: var(--kalk); font-size: 14px; border-radius: var(--r-s); box-shadow: var(--ebene-schatten); }

/* ══════════════ SHOP ══════════════ */
.kategorien { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-bottom: 0; }
.kategorien ul { display: flex; flex-wrap: wrap; gap: 0 26px; padding: 6px 0; }
.kategorien a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; align-items: center; font-size: 15px; text-decoration: none; color: var(--graphit-2); white-space: nowrap; }
.kategorien a:hover { color: var(--graphit); }
.kategorien a[aria-current="true"] { color: var(--graphit); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.kategorien__zahl { font: 450 11px/1 var(--mono); color: var(--grau); }
@media (max-width: 899px) { .kategorien { margin: 0 calc(var(--rand) * -1); } .kategorien ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px var(--rand); } .kategorien ul::-webkit-scrollbar { display: none; } }
.werkzeug { position: sticky; top: var(--kopf-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; background: var(--kalk); }
.werkzeug__filter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--graphit); border-radius: var(--r-s); background: transparent; font-size: 15px; }
.werkzeug__filter[aria-expanded="true"] { background: var(--graphit); color: var(--kalk); }
.zahl--innen { position: static; }
.werkzeug__treffer { font: 450 12.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--grau); text-transform: uppercase; }
.werkzeug__rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.auswahl { position: relative; display: inline-flex; }
.auswahl select, .feld--auswahl select { appearance: none; -webkit-appearance: none; height: 44px; padding: 0 38px 0 14px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--kalk-hell); font-size: 14.5px; }
.auswahl .ic, .feld--auswahl .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.feld--auswahl { position: relative; }
.feld--auswahl .ic { top: auto; bottom: 14px; transform: none; }
.umschalter { display: inline-flex; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--kalk-hell); }
.umschalter button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border: 0; background: none; font-size: 14px; color: var(--graphit-2); }
.umschalter button + button { border-left: 1px solid var(--linie); }
.umschalter button[aria-pressed="true"] { background: var(--graphit); color: var(--kalk); }
.umschalter--klein button { min-height: 36px; padding: 0 11px; font-size: 13px; }
@media (pointer: coarse) { .umschalter--klein button { min-height: 44px; } }
@media (max-width: 759px) { .werkzeug { top: var(--kopf-h); padding: 10px 0; } .werkzeug__treffer { order: 3; width: 100%; } .werkzeug__rechts { margin-left: auto; } .werkzeug .umschalter span { display: none; } .auswahl select { max-width: 150px; } }

.filter { margin: 0 0 16px; padding: 24px; background: var(--kalk-hell); border: 1px solid var(--linie); }
.filter__innen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 32px; }
.filter__gruppe legend { margin-bottom: 10px; }
.filter__werte { display: grid; gap: 2px; }
.filter__wert { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px 8px 4px 10px; border: 0; border-left: 2px solid transparent; background: none; text-align: left; font-size: 14.5px; color: var(--graphit); transition: background .15s; }
.filter__wert:hover { background: rgb(31 30 28 / .05); }
.filter__wert[aria-pressed="true"] { border-left-color: var(--akzent); background: var(--akzent-zart); font-weight: 500; }
.filter__wert[disabled] { opacity: .38; cursor: default; }
.filter__wert i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(31 30 28 / .2); flex: none; }
.filter__zahl { margin-left: auto; font: 450 11px/1 var(--mono); color: var(--grau); }
.filter__preis { display: flex; gap: 8px; margin-bottom: 8px; }
.filter__preis label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grau); }
.filter__preis input { width: 72px; height: 40px; padding: 0 8px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--weiss); font-family: var(--mono); font-size: 14px; }
.filter__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linie); }
@media (pointer: coarse) { .filter__wert { min-height: 44px; } }
.filter-grund { display: none; }
@media (max-width: 759px) {
  .filter { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; max-height: 84svh; margin: 0; padding: 20px 18px 0; overflow-y: auto; border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: var(--ebene-schatten); }
  .filter__innen { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .filter__fuss { position: sticky; bottom: 0; margin: 16px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--kalk-hell); }
  .filter-grund { display: block; position: fixed; inset: 0; z-index: 89; background: rgb(31 30 28 / .32); }
}
.etiketten { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 20px; }
.etiketten:empty { display: none; }
.etiketten button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px 0 11px; border: 1px solid var(--graphit); border-radius: var(--r-s); background: var(--kalk-hell); font: 450 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.etiketten button:hover { background: var(--graphit); color: var(--kalk); }
.etiketten .ic { width: 14px; height: 14px; }
@media (pointer: coarse) { .etiketten button { min-height: 44px; } }

/* Raster + Karte */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
@media (min-width: 1640px) { .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } }
@media (max-width: 479px) { .raster { gap: 32px 10px; } }
.raster--klein { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; }
@media (max-width: 1023px) { .raster--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; } }
.karte { position: relative; display: flex; flex-direction: column; min-width: 0; }
.karte__bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stein); }
.karte__passe { position: absolute; inset: 0; display: grid; place-items: center; padding: 13%; }
.karte__flaeche { width: auto; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; box-shadow: 0 1px 1px rgb(31 30 28 / .08), 0 18px 30px -18px rgb(31 30 28 / .45); transition: transform .6s var(--ease); }
.karte--frei .karte__flaeche { box-shadow: none; filter: drop-shadow(0 12px 14px rgb(31 30 28 / .25)); }
.karte--zubehoer .karte__passe { padding: 0; }
.karte--zubehoer .karte__flaeche { width: 100%; height: 100%; max-height: none; object-fit: cover; box-shadow: none; }
.karte__raum { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
@media (hover: hover) { .karte:hover .karte__raum, .karte:focus-within .karte__raum { opacity: 1; } }
.karte__serie { position: absolute; left: 10px; bottom: 10px; padding: 4px 7px; background: rgb(247 244 239 / .94); color: var(--graphit-2); font-size: 10.5px; opacity: 0; transition: opacity .4s; }
.karte--zubehoer .karte__serie { opacity: 1; }
@media (hover: hover) { .karte:hover .karte__serie { opacity: 1; } }
.karte__neu { position: absolute; left: 10px; top: 10px; padding: 4px 7px; background: var(--kalk-hell); color: var(--akzent); }
.karte__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin-top: 14px; align-items: baseline; }
.karte__name { font-size: 16px; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; }
.karte__name a { text-decoration: none; }
.karte__name a::after { content: ''; position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 5; }
.karte__name a:hover { text-decoration: underline; }
.karte__preis { font: 450 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.karte__daten { grid-column: 1; }
.karte__lager { grid-column: 1 / -1; display: flex; align-items: center; font-size: 13px; color: var(--graphit-2); }
.karte__aktionen { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; gap: 6px; }
@media (hover: hover) and (pointer: fine) { .karte__aktionen { opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; } .karte:hover .karte__aktionen, .karte:focus-within .karte__aktionen, .karte__aktionen:has([aria-pressed="true"]) { opacity: 1; transform: none; } }
@media (max-width: 479px) { .karte__text { grid-template-columns: 1fr; } .karte__preis { text-align: left; } .karte__name { font-size: 15px; } .karte__lager { font-size: 12px; } .karte__aktionen .mini span { display: none; } .karte__aktionen .mini { padding: 0 8px; } }
/* Ansicht Raum */
.raster[data-ansicht="raum"] .karte__bild { aspect-ratio: 4 / 3; }
.raster[data-ansicht="raum"] .karte__raum { opacity: 1; }
.raster[data-ansicht="raum"] .karte__serie { opacity: 1; }
@media (hover: hover) { .raster[data-ansicht="raum"] .karte:hover .karte__raum { opacity: 0; } .raster[data-ansicht="raum"] .karte:hover .karte__serie { opacity: 0; } }
.raster[data-ansicht="raum"] .karte__name a::after { aspect-ratio: 4 / 3; }
/* Musterkarte */
.karte--muster { justify-content: flex-end; gap: 12px; padding: 28px; background: var(--kalk-hell); border: 1px solid var(--linie); aspect-ratio: 4 / 5; }
.musterkarte__faecher { display: flex; gap: 6px; margin-bottom: auto; }
.musterkarte__faecher i { width: 22%; aspect-ratio: 3 / 4; background: var(--stein); box-shadow: inset 0 2px 4px rgb(31 30 28 / .12); }
.musterkarte__faecher i:nth-child(2) { background: #C9B79C; } .musterkarte__faecher i:nth-child(4) { background: #8C8780; }
.musterkarte__titel { font-size: var(--t-3); font-weight: 400; letter-spacing: -.015em; line-height: 1.2; }
.karte--muster p { font-size: 14.5px; color: var(--graphit-2); }
.raster[data-ansicht="raum"] .karte--muster { aspect-ratio: auto; }
/* Liste */
.tabelle-rahmen { overflow-x: auto; }
.liste-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.liste-tabelle thead th { position: sticky; top: 0; font: 450 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--grau); text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--graphit); background: var(--kalk); }
.liste-tabelle td, .liste-tabelle tbody th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; vertical-align: middle; }
.liste-tabelle tbody th a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 450; }
.liste-tabelle tbody th a:hover span { text-decoration: underline; }
.liste-tabelle img { width: 48px; height: 48px; object-fit: cover; background: var(--stein); flex: none; }
.liste-tabelle tr:hover td, .liste-tabelle tr:hover th { background: rgb(31 30 28 / .03); }
@media (max-width: 759px) {
  .raster-liste thead { display: none; }
  .raster-liste tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .raster-liste tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 4px; }
  .raster-liste td { border: 0; padding: 0; font-size: 13px; }
  .raster-liste td::before { content: attr(data-label); display: block; font: 450 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
}
.leer { display: grid; gap: 14px; justify-items: start; padding: 56px 0; max-width: 560px; }
.leer p { color: var(--graphit-2); }
.leer__knoepfe { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.leer--klein { padding: 16px 0; gap: 10px; }
.shop__hinweis { margin-top: 64px; }

/* Vergleichsleiste */
.vergleichsleiste { position: fixed; z-index: 55; left: 0; right: 0; bottom: var(--leiste-h); background: var(--graphit); color: var(--kalk); box-shadow: var(--ebene-schatten); }
.vergleichsleiste__innen { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; max-width: 1520px; margin: 0 auto; padding: 12px var(--rand); }
.vergleichsleiste .etikett { color: #C9C2B6; }
.vergleichsleiste__liste { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; }
.vergleichsleiste__liste li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; background: #2E2C29; border-radius: var(--r-s); font-size: 13.5px; white-space: nowrap; }
.vergleichsleiste__liste img { width: 32px; height: 32px; object-fit: cover; }
.vergleichsleiste__liste button { width: 36px; height: 36px; border: 0; background: none; color: var(--kalk); display: grid; place-items: center; }
.vergleichsleiste__knoepfe { display: flex; align-items: center; gap: 16px; }
.vergleichsleiste .textknopf { color: var(--kalk); }
.vergleichsleiste .knopf { background: var(--kalk); color: var(--graphit); border-color: var(--kalk); }
.vergleichsleiste :focus-visible { outline-color: var(--kalk); }
@media (max-width: 759px) { .vergleichsleiste__liste li span { display: none; } .vergleichsleiste__innen { padding: 8px var(--rand); gap: 8px 12px; } }

/* ══════════════ PRODUKT ══════════════ */
.produkt__oben { display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr); gap: 32px clamp(32px, 4.5vw, 72px); align-items: start; margin-top: 20px; }
.galerie { position: sticky; top: calc(var(--kopf-h) + 20px); display: grid; gap: 12px; }
.galerie__buehne { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--stein); }
.galerie__bild { position: absolute; inset: 0; }
.galerie__bild figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 8px; background: rgb(247 244 239 / .94); color: var(--graphit-2); max-width: calc(100% - 24px); }
.galerie__passe { position: absolute; inset: 11%; display: grid; place-items: center; }
.galerie__passe img { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 1px 2px rgb(31 30 28 / .08), 0 30px 50px -28px rgb(31 30 28 / .5); }
.galerie__passe--frei img { box-shadow: none; filter: drop-shadow(0 16px 18px rgb(31 30 28 / .25)); }
.galerie__foto { width: 100%; height: 100%; object-fit: cover; }
.galerie__verlegt { width: 100%; height: 100%; object-fit: cover; }
.galerie__verband { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.galerie__verband .chip { background: rgb(247 244 239 / .94); }
.galerie__verband .chip[aria-pressed="true"] { background: var(--graphit); }
.galerie__daumen { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.galerie__daumen button { flex: none; display: grid; gap: 6px; width: 84px; padding: 0; border: 0; background: none; text-align: left; font: 450 10.5px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--grau); }
.galerie__daumen img { width: 84px; height: 64px; object-fit: cover; background: var(--stein); outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.galerie__daumen img.textur { object-fit: cover; }
.galerie__daumen button[aria-pressed="true"] { color: var(--graphit); }
.galerie__daumen button[aria-pressed="true"] img { outline-color: var(--graphit); }
.galerie--zubehoer .galerie__buehne { aspect-ratio: 1; background: var(--weiss); }
.kauf { display: grid; gap: 18px; align-content: start; }
.kauf__name { font-size: clamp(36px, 3.9vw, 58px); font-weight: 300; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.kauf__kurz { font-size: 17px; color: var(--graphit-2); }
.kauf__fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kauf__fakten--zwei { grid-template-columns: 1fr 1fr; }
.kauf__fakten dt { font: 450 10.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--grau); }
.kauf__fakten dd { font-size: 14.5px; margin-top: 3px; }
@media (max-width: 479px) { .kauf__fakten { grid-template-columns: 1fr 1fr; } }
.kauf__wahl { display: grid; gap: 10px; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl a { display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 48px; padding: 6px 12px 6px 6px; border: 1px solid var(--linie); border-radius: var(--r-s); text-decoration: none; font-size: 13.5px; line-height: 1.2; }
.wahl a:hover { border-color: var(--linie-feld); }
.wahl a[aria-current] { border-color: var(--graphit); box-shadow: inset 0 0 0 1px var(--graphit); }
.wahl i { grid-row: span 2; width: 30px; height: 30px; background-size: cover; background-position: center; background-color: var(--ton); }
.wahl .etikett { font-size: 10px; }
.kauf__preis { display: grid; gap: 4px; padding-top: 4px; }
.kauf__preiszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.preis-gross { font-size: clamp(34px, 3vw, 44px); font-weight: 300; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kauf__einheit { font-size: 15px; color: var(--graphit-2); }
.kauf__beispiel { padding: 3px 6px; border: 1px solid var(--linie-stark); border-radius: var(--r-s); font-size: 10px; }
.kauf__paket, .kauf__mwst { font-size: 14px; color: var(--graphit-2); }
.kauf__mwst { color: var(--grau); }
.kauf__lager { display: flex; align-items: baseline; gap: 2px; font-size: 14.5px; color: var(--graphit-2); }
.kauf__lager strong { color: var(--graphit); font-weight: 500; }
.rechner { display: grid; gap: 14px; padding: 20px; background: var(--kalk-hell); border: 1px solid var(--linie); }
.rechner__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rechner__titel { float: left; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.rechner__felder { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rechner__felder--drei { grid-template-columns: 1fr 1fr; }
.rechner__felder--drei .feld--breit { grid-column: 1 / -1; }
.feld { display: grid; gap: 6px; align-content: start; min-width: 0; }
.feld > span:first-child { font-size: 13.5px; color: var(--graphit-2); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--weiss); font-size: 16px; }
.feld textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .plz-pruefer input:focus, .berater__eingabe input:focus { outline: 2px solid var(--akzent); outline-offset: 0; border-color: var(--akzent); }
.feld.ist-fehler input, .feld.ist-fehler textarea { border-color: #9A3A1B; }
.feld-fehler { font-size: 13px; color: #9A3A1B; }
.feld abbr { text-decoration: none; color: var(--akzent); }
.rechner__ergebnis { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linie); }
.rechner__ergebnis dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.rechner__ergebnis dt { font: 450 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.rechner__ergebnis dd { font-size: 16px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rechner__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--linie-stark); }
.rechner__summe strong { font-size: 24px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rechner__erklaerung { font-size: 13px; color: var(--graphit-2); }
.rechner__hinweis { font-size: 12.5px; line-height: 1.5; color: var(--grau); }
.kauf__neben { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: -6px; }
.kauf__badboden { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--graphit-2); padding: 12px 14px; background: var(--kalk-hell); border-left: 2px solid var(--akzent); }
.kauf__badboden .ic { flex: none; margin-top: 2px; color: var(--akzent); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .etikett { margin-right: 10px; }
.stepper input { width: 64px; height: 44px; text-align: center; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--weiss); font-family: var(--mono); font-size: 16px; }
.stepper .knopf-icon { border: 1px solid var(--linie-feld); }
@media (max-width: 1023px) { .produkt__oben { grid-template-columns: 1fr; } .galerie { position: relative; top: 0; } }
@media (max-width: 759px) { .galerie__buehne { aspect-ratio: 1; margin: 0 calc(var(--rand) * -1); } }

.produkt__text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 4.5vw, 72px); margin-top: clamp(80px, 9vw, 136px); padding-top: 28px; border-top: 1px solid var(--graphit); }
.produkt__text h2 { margin-bottom: 14px; }
.produkt__text p + h2 { margin-top: 28px; }
.produkt__lauftext { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 60ch; hyphens: auto; }
.haken { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.haken li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.haken .ic { flex: none; margin-top: 3px; color: var(--akzent); }
.produkt__technik { margin-top: 72px; }
.produkt__technik-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.daten-tabelle { width: 100%; border-collapse: collapse; columns: 2; }
.daten-tabelle tr { border-bottom: 1px solid var(--linie); }
.daten-tabelle th { width: 42%; padding: 11px 16px 11px 0; text-align: left; font-weight: 400; font-size: 14px; color: var(--graphit-2); vertical-align: top; }
.daten-tabelle td { padding: 11px 0; font-size: 15px; }
.daten-tabelle--gross th, .daten-tabelle--gross td { font-size: 18px; padding: 14px 0; }
@media (min-width: 1024px) { .produkt__technik .daten-tabelle { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; } .produkt__technik .daten-tabelle tbody { display: contents; } .produkt__technik .daten-tabelle tr { display: grid; grid-template-columns: 42% 1fr; } }
@media (max-width: 759px) { .produkt__text { grid-template-columns: 1fr; } }
.produkt__gegen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; margin-top: 96px; padding: clamp(24px, 3vw, 44px); background: var(--stein); }
.produkt__gegen > div { display: grid; gap: 10px; }
.produkt__gegen .etikett { color: var(--graphit-2); }
.produkt__gegen h2 a { text-decoration: none; }
.produkt__gegen p:not(.etikett) { color: var(--graphit-2); }
.produkt__gegen .textlink { justify-self: start; }
.produkt__gegen-bild { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.produkt__gegen-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .produkt__gegen { grid-template-columns: 1fr; } }
.produkt__reihe { margin-top: clamp(72px, 8vw, 112px); }
.produkt__reihe > h2 { margin-bottom: 28px; }
.zubehoer-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin-bottom: 12px; }
.zubehoer-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; background: var(--kalk-hell); border: 1px solid var(--linie); }
.zubehoer-liste a { flex: 1; display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.zubehoer-liste img { width: 64px; height: 64px; object-fit: cover; background: var(--weiss); }
.zubehoer-liste a > span { display: grid; gap: 2px; min-width: 0; }
.zubehoer-liste__name { font-size: 15px; font-weight: 450; }
.zubehoer-liste a:hover .zubehoer-liste__name { text-decoration: underline; }
.look-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.look-liste a { display: grid; gap: 8px; text-decoration: none; }
.look-liste img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.look-liste__titel { font-size: 17px; }
.kaufzeile { position: fixed; z-index: 56; left: 0; right: 0; bottom: var(--leiste-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--rand); background: var(--kalk-hell); border-top: 1px solid var(--linie); box-shadow: 0 -10px 30px -20px rgb(31 30 28 / .4); }
.kaufzeile p { display: grid; }
.kaufzeile__preis { font: 450 15px/1.2 var(--mono); }
@media (min-width: 1024px) { .kaufzeile { display: none !important; } }

/* Datenblatt */
.datenblatt { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r-l); background: var(--weiss); color: var(--graphit); box-shadow: var(--ebene-schatten); }
.datenblatt::backdrop { background: rgb(31 30 28 / .4); }
.datenblatt__blatt { padding: 36px 40px 20px; }
.datenblatt__kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--graphit); }
.datenblatt__kopf img { height: 22px; width: auto; }
.datenblatt__oben { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px 0; }
.datenblatt__oben img { width: 160px; height: 160px; object-fit: cover; }
.datenblatt__oben h2 { font-size: 32px; letter-spacing: -.03em; margin: 4px 0 8px; }
.datenblatt__oben p { font-size: 14.5px; color: var(--graphit-2); }
.datenblatt__preis { margin-top: 8px; font-family: var(--mono); }
.datenblatt__hinweis { margin-top: 18px; font-size: 12px; color: var(--grau); }
.datenblatt__knoepfe { position: sticky; bottom: 0; display: flex; gap: 20px; align-items: center; padding: 14px 40px; background: var(--weiss); border-top: 1px solid var(--linie); }
@media (max-width: 559px) { .datenblatt__blatt { padding: 24px 18px 12px; } .datenblatt__oben { grid-template-columns: 1fr; } .datenblatt__knoepfe { padding: 12px 18px; } }

/* ══════════════ RAUMSTUDIO ══════════════ */
.studio .seiten-kopf { grid-template-columns: minmax(0, 1fr) auto; max-width: none; align-items: end; }
.studio .seiten-kopf > * { grid-column: 1; }
.studio .seiten-kopf .studio__modus { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
@media (max-width: 899px) { .studio .seiten-kopf { grid-template-columns: 1fr; } .studio .seiten-kopf .studio__modus { grid-column: 1; grid-row: auto; justify-self: start; } }
.studio__raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr); gap: 32px clamp(24px, 3vw, 48px); align-items: start; }
.studio__buehne { position: sticky; top: calc(var(--kopf-h) + 16px); display: grid; gap: 4px; }
.studio__ausschnitt { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--stein); aspect-ratio: 3 / 2; --kt-rs-akzent: #F7F4EF; --kt-rs-marke-grund: rgb(31 30 28 / .78); --kt-rs-fokus: #B8A46A; }
.studio__flaeche { position: absolute; left: 0; top: 0; width: 100%; }
.studio__flaeche .kt-rs-marke { font: 450 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-s); }
.studio__laden { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.studio__ausschnitt.ist-foto { aspect-ratio: auto; min-height: 240px; }
.studio__ausschnitt.ist-foto .studio__flaeche { position: relative; width: 100% !important; margin-left: 0 !important; }
.studio__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 20px; }
.studio__stand { padding: 8px 0; }
.studio__aktionen { display: flex; flex-wrap: wrap; gap: 0 20px; }
.studio__ki { display: grid; gap: 10px; padding: 14px 16px; background: var(--kalk-hell); border: 1px solid var(--linie); font-size: 14px; }
.studio__hinweis, .studio__datenschutz { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--grau); margin-top: 8px; }
.studio__hinweis .ic, .studio__datenschutz .ic { flex: none; margin-top: 2px; }
.studio__steuerung { display: grid; gap: 0; border-top: 1px solid var(--graphit); }
.studio__teil { display: grid; gap: 12px; padding: 18px 0 20px; border-bottom: 1px solid var(--linie); }
.studio__raeume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.studio__raeume button { display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; font-size: 13.5px; color: var(--graphit-2); }
.studio__raeume img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.studio__raeume button > span { display: flex; gap: 6px; align-items: baseline; }
.studio__raeume button[aria-pressed="true"] { color: var(--graphit); font-weight: 500; }
.studio__raeume button[aria-pressed="true"] img { outline: 2px solid var(--graphit); }
.studio__fliesen { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; max-height: 296px; overflow-y: auto; padding: 4px 4px 4px 2px; }
.studio__fliesen button { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--ton, var(--stein)); overflow: hidden; outline: 1px solid rgb(31 30 28 / .12); outline-offset: -1px; }
.studio__fliesen button img { width: 100%; height: 100%; object-fit: cover; }
.studio__fliesen button[aria-pressed="true"] { outline: 2px solid var(--graphit); outline-offset: 2px; }
.studio__fliesen button:hover { transform: translateY(-1px); }
.studio__aktiv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 15px; }
.studio__aktiv a { font-weight: 500; text-decoration: none; }
.studio__aktiv a:hover { text-decoration: underline; }
.fugen-tupfer { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(31 30 28 / .25); }
.fugen-tupfer--hell { background: #d6d2ca; } .fugen-tupfer--grau { background: #8b8882; } .fugen-tupfer--dunkel { background: #3b3936; }
.studio__fuge { display: grid; gap: 12px; }
.regler { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 14px; color: var(--graphit-2); }
.regler input { accent-color: var(--graphit); width: 100%; min-height: 32px; }
.regler output { font-family: var(--mono); font-size: 13px; min-width: 44px; text-align: right; }
.studio__menge { border-bottom: 0; }
.studio__menge-zahl { font-size: var(--t-3); letter-spacing: -.015em; }
.studio__menge-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.schritte-liste { display: grid; gap: 10px; counter-reset: s; font-size: 14px; color: var(--graphit-2); }
.schritte-liste li { display: grid; grid-template-columns: 28px 1fr; }
.schritte-liste strong { color: var(--graphit); font-weight: 500; }
@media (max-width: 1023px) { .studio__raster { grid-template-columns: 1fr; } .studio__buehne { position: relative; top: 0; } }
@media (max-width: 759px) { .studio__ausschnitt { aspect-ratio: 5 / 4; margin: 0 calc(var(--rand) * -1); border-radius: 0; } .studio__flaeche { width: 120%; } .studio__raeume { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══════════════ LOOKS ══════════════ */
.looks__index { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 8px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.looks__index a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; text-decoration: none; color: var(--graphit-2); }
.looks__index a:hover { color: var(--graphit); }
.look { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 88px); align-items: start; padding: clamp(72px, 8vw, 128px) 0 0; }
.look:focus { outline: none; }
.look:target .look__bild { outline: 2px solid var(--akzent); outline-offset: 6px; }
.look--rechts .look__bild { order: 2; }
.look__bild { position: relative; }
.look__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.look__bild figcaption { margin-top: 10px; }
.hotspot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; text-decoration: none; }
.hotspot::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--kalk-hell); box-shadow: 0 0 0 6px rgb(247 244 239 / .35), 0 2px 8px rgb(0 0 0 / .3); transition: transform .25s var(--ease); }
.hotspot:hover::before, .hotspot:focus-visible::before { transform: scale(1.25); }
.hotspot__text { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 6px 9px; background: var(--graphit); color: var(--kalk); font-size: 13px; white-space: nowrap; border-radius: var(--r-s); opacity: 0; pointer-events: none; transition: opacity .2s; }
.hotspot:hover .hotspot__text, .hotspot:focus-visible .hotspot__text { opacity: 1; }
.look__text { display: grid; gap: 14px; align-content: start; }
.look__text > p:not(.etikett) { color: var(--graphit-2); }
.look__unter { font-size: 18px; color: var(--graphit) !important; }
.look__hinweis { display: flex; gap: 8px; font-size: 13.5px; color: var(--grau) !important; }
.look__hinweis .ic { flex: none; margin-top: 3px; }
.look__text h3 { margin-top: 12px; }
.look__positionen { display: grid; border-top: 1px solid var(--linie); }
.look__positionen a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.look__positionen img { width: 56px; height: 56px; object-fit: cover; }
.look__positionen a > span:nth-child(2) { display: grid; gap: 2px; }
.look__name { font-weight: 450; }
.look__positionen a:hover .look__name { text-decoration: underline; }
.look__preis { font: 450 13px/1.2 var(--mono); }
.look__zubehoer a { text-decoration-color: var(--linie-stark); }
.look__knoepfe { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 8px; }
.look__klein { font-size: 13px; color: var(--grau) !important; }
@media (max-width: 899px) { .look { grid-template-columns: 1fr; } .look--rechts .look__bild { order: 0; } }

/* ══════════════ MUSTER ══════════════ */
.musterseite__oben { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.musterbox__kasten--gross { padding: 64px 32px 32px; }
.musterseite__auswahl { display: grid; gap: 14px; }
.musterseite__liste { display: grid; border-top: 1px solid var(--linie); }
.musterseite__liste li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.musterseite__liste img { width: 52px; height: 52px; object-fit: cover; }
.musterseite__liste a { text-decoration: none; font-weight: 450; }
.musterseite__hinweis { font-size: 13.5px; color: var(--grau); }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin: clamp(72px, 8vw, 120px) 0; padding-top: 28px; border-top: 1px solid var(--graphit); }
.schritte li { display: grid; gap: 10px; align-content: start; }
.schritte p { color: var(--graphit-2); }
.musterwand { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 14px; margin-top: 32px; }
.musterwand__stein { position: relative; display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.musterwand__stein img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ton); margin-bottom: 6px; outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.musterwand__stein--frei img { object-fit: contain; padding: 12%; background: var(--stein); }
.musterwand__name { font-size: 14px; font-weight: 450; line-height: 1.3; }
.musterwand__haken { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--graphit); color: var(--kalk); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.musterwand__stein[aria-pressed="true"] img { outline: 2px solid var(--graphit); }
.musterwand__stein[aria-pressed="true"] .musterwand__haken { opacity: 1; transform: none; }
@media (max-width: 899px) { .musterseite__oben { grid-template-columns: 1fr; } .schritte { grid-template-columns: 1fr; } .musterwand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══════════════ VERGLEICH ══════════════ */
.schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.schalter input { width: 20px; height: 20px; accent-color: var(--graphit); }
.vergleich__rahmen { overflow-x: auto; }
.vergleich-tabelle { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.vergleich-tabelle th, .vergleich-tabelle td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; font-size: 15px; font-weight: 400; }
.vergleich-tabelle tbody th { width: 22%; font-size: 13.5px; color: var(--graphit-2); }
.vergleich-tabelle thead td { border-bottom: 1px solid var(--graphit); }
.vergleich__kopf { display: grid; gap: 8px; }
.vergleich__kopf img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stein); }
.vergleich__kopf a { font-size: 17px; text-decoration: none; font-weight: 450; }
.vergleich__kopf a:hover { text-decoration: underline; }
.vergleich-tabelle tr.ist-anders td { background: var(--akzent-zart); }
.vergleich-tabelle tr.ist-anders th::after { content: ' ≠'; color: var(--akzent); }

/* ══════════════ KORB + KASSE ══════════════ */
.korb__raster, .kasse__raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 40px clamp(32px, 4vw, 64px); align-items: start; }
@media (max-width: 1023px) { .korb__raster, .kasse__raster { grid-template-columns: 1fr; } }
.positionen { display: grid; border-top: 1px solid var(--graphit); }
.position { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: 'bild text summe' 'bild menge menge'; gap: 8px 20px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.position__bild { grid-area: bild; width: 96px; height: 96px; object-fit: cover; background: var(--stein); }
.position__text { grid-area: text; display: grid; gap: 3px; align-content: start; }
.position__text a { font-size: 17px; font-weight: 450; text-decoration: none; }
.position__text a:hover { text-decoration: underline; }
.position__text .klein { font-size: 13.5px; color: var(--graphit-2); }
.position__summe { grid-area: summe; text-align: right; font: 450 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.position__summe s { display: block; font-size: 12px; color: var(--grau); }
.position__menge { grid-area: menge; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.position__menge .stepper { gap: 4px; }
.position__menge .stepper input { width: 58px; height: 40px; }
.position__menge .stepper .knopf-icon { width: 40px; height: 40px; }
@media (pointer: coarse) { .position__menge .stepper input, .position__menge .stepper .knopf-icon { height: 44px; } .position__menge .stepper .knopf-icon { width: 44px; } }
.position__menge .textknopf { font-size: 14px; color: var(--graphit-2); }
.positionen--kompakt .position { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: 'bild text summe'; padding: 12px 0; }
.positionen--kompakt .position__bild { width: 64px; height: 64px; }
@media (max-width: 559px) { .position { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: 'bild text' 'bild summe' 'menge menge'; } .position__bild { width: 72px; height: 72px; } .position__summe { text-align: left; } .positionen--kompakt .position { grid-template-areas: 'bild text' 'bild summe'; } }
.korb__muster { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.korb__muster .musterreihe { display: flex; gap: 4px; }
.korb__muster .musterreihe img { width: 34px; height: 34px; object-fit: cover; }
.korb__muster p { flex: 1; }
.korb__vorschlag { margin-top: 56px; display: grid; gap: 10px; }
.summe { position: sticky; top: calc(var(--kopf-h) + 20px); display: grid; gap: 14px; padding: 24px; background: var(--kalk-hell); border: 1px solid var(--linie); }
.summe__zeilen { display: grid; gap: 8px; }
.summe__zeilen div { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.summe__zeilen dt { color: var(--graphit-2); }
.summe__zeilen dd { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.summe__zeilen .summe__gesamt { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--graphit); }
.summe__zeilen .summe__gesamt dt { color: var(--graphit); font-weight: 500; font-size: 16px; }
.summe__zeilen .summe__gesamt dd { font-family: var(--schrift); font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.summe__zeilen .summe__klein { font-size: 12.5px; color: var(--grau); }
.summe__zeilen .summe__klein dd { font-size: 12px; }
.summe__hinweis { font-size: 12.5px; line-height: 1.5; color: var(--grau); }
.summe .textlink { justify-self: center; }
@media (max-width: 1023px) { .summe { position: relative; top: 0; } }
.kasse__demo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin-bottom: 28px; background: var(--akzent-zart); font-size: 14px; max-width: 900px; }
.kasse__demo .ic { flex: none; margin-top: 3px; }
.kasse__demo--klein { margin: 18px 0 0; font-size: 13px; }
.kasse__schritte { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 40px; border-top: 1px solid var(--linie); }
.kasse__schritte li { flex: 1; min-width: 140px; }
.kasse__schritte button { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 52px; padding: 14px 12px 12px 0; border: 0; border-top: 2px solid transparent; margin-top: -1px; background: none; text-align: left; font-size: 15px; color: var(--graphit-2); }
.kasse__schritte button[aria-current="step"] { border-top-color: var(--graphit); color: var(--graphit); font-weight: 500; }
.kasse__schritte button.ist-erledigt { color: var(--graphit); }
.kasse__schritte button.ist-erledigt .etikett { color: var(--akzent); }
.kasse__schritte button[disabled] { cursor: default; opacity: .55; }
@media (max-width: 759px) { .kasse__schritte li { min-width: 0; } .kasse__schritte button { flex-direction: column; gap: 2px; font-size: 12.5px; } }
.kasse__schritt { display: grid; gap: 18px; align-content: start; }
.kasse__schritt:focus { outline: none; }
.kasse__text { color: var(--graphit-2); max-width: 60ch; }
.kasse__weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; }
.lieferarten { display: grid; gap: 10px; }
.lieferart { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--kalk-hell); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.lieferart:has(input:checked) { border-color: var(--graphit); box-shadow: inset 0 0 0 1px var(--graphit); }
.lieferart:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.lieferart input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--graphit); }
.lieferart__text { display: grid; gap: 4px; }
.lieferart__text span { font-size: 14px; color: var(--graphit-2); }
.lieferart__preis { font: 450 14px/1.3 var(--mono); white-space: nowrap; }
.kasse__hinweise { display: grid; gap: 6px; font-size: 13.5px; color: var(--graphit-2); }
.kasse__hinweise li { display: flex; gap: 8px; align-items: flex-start; }
.kasse__hinweise .ic { flex: none; margin-top: 3px; }
.kasse__klein { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--grau); }
.kasse__klein .ic { flex: none; margin-top: 2px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.formular .feld--breit, .formular__fuss { grid-column: 1 / -1; }
.formular__fuss { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.formular--eng { gap: 12px; }
@media (max-width: 559px) { .formular { grid-template-columns: 1fr; } }
.pruefen { display: grid; gap: 0; border-top: 1px solid var(--graphit); }
.pruefen section { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.pruefen h3 { font: 450 11.5px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--grau); padding-top: 4px; }
.pruefen ul, .pruefen p { font-size: 15px; display: grid; gap: 4px; }
.pruefen .textknopf { font-size: 14px; min-height: 32px; align-self: start; }
@media (max-width: 559px) { .pruefen section { grid-template-columns: 1fr auto; } .pruefen section > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
.anfrage-text { width: 100%; min-height: 360px; padding: 18px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--weiss); font: 400 13.5px/1.55 var(--mono); color: var(--graphit); resize: vertical; }
.kasse__zu-lang { display: flex; gap: 8px; font-size: 14px; padding: 10px 14px; background: var(--akzent-zart); }
.kasse__fertig .etikett { display: inline-flex; gap: 6px; align-items: center; color: var(--akzent); }

/* ══════════════ PROFI ══════════════ */
.profiseite .seiten-kopf { max-width: none; }
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-bottom: clamp(64px, 7vw, 104px); border-top: 1px solid var(--graphit); }
.vorteile li { display: grid; gap: 8px; align-content: start; padding: 22px 0 26px; border-bottom: 1px solid var(--linie); }
.vorteile p { color: var(--graphit-2); font-size: 15.5px; }
@media (max-width: 899px) { .vorteile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .vorteile { grid-template-columns: 1fr; } }
.profi__werkzeuge { display: grid; grid-template-columns: 1fr 1fr; gap: 56px clamp(32px, 5vw, 80px); }
.profi__block { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 1px solid var(--graphit); }
.profi__block--breit { grid-column: 1 / -1; }
.profi__klein { font-size: 14.5px; color: var(--graphit-2); max-width: 70ch; }
.profi__ergebnis { font: 400 22px/1.35 var(--schrift); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.profi__ergebnis small { display: block; font: 400 13.5px/1.5 var(--schrift); color: var(--graphit-2); letter-spacing: 0; margin-top: 4px; }
@media (max-width: 899px) { .profi__werkzeuge { grid-template-columns: 1fr; } }
.schnell { display: grid; gap: 8px; }
.schnell__kopf, .schnell__zeile { display: grid; grid-template-columns: minmax(140px, 220px) 120px minmax(0, 1fr) 44px; gap: 10px; align-items: center; }
.schnell__zeile input { height: 44px; padding: 0 12px; border: 1px solid var(--linie-feld); border-radius: var(--r-s); background: var(--weiss); font-family: var(--mono); font-size: 15px; width: 100%; }
.schnell__treffer { font-size: 14px; color: var(--graphit-2); min-width: 0; }
.schnell__treffer.ist-fehler { color: #9A3A1B; }
.schnell__treffer button { border: 0; background: none; padding: 0; text-decoration: underline; color: var(--akzent); }
.schnell__knoepfe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
@media (max-width: 759px) { .schnell__kopf { display: none; } .schnell__zeile { grid-template-columns: 1fr 96px 44px; } .schnell__treffer { grid-column: 1 / -1; grid-row: 2; } }
.profi__tabelle { margin-top: clamp(72px, 8vw, 120px); }

/* ══════════════ LIEFERUNG, RATGEBER, ÜBER, KONTAKT ══════════════ */
.arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--graphit); margin-bottom: clamp(64px, 7vw, 104px); }
.arten li { display: grid; gap: 8px; align-content: start; padding: 22px 0; }
.arten__preis { font: 450 14px/1.3 var(--mono); color: var(--akzent); }
.arten li > p:last-child { color: var(--graphit-2); font-size: 15.5px; }
@media (max-width: 899px) { .arten { grid-template-columns: 1fr; } .arten li { border-bottom: 1px solid var(--linie); } }
.liefer__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(40px, 6vw, 100px); }
.liefer__zwei section { display: grid; gap: 16px; align-content: start; }
.liefer__zwei section > p { color: var(--graphit-2); }
.ampel-liste { display: grid; border-top: 1px solid var(--linie); margin-bottom: 24px; }
.ampel-liste li { display: flex; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 15.5px; }
.ampel-liste strong { font-weight: 500; }
@media (max-width: 899px) { .liefer__zwei { grid-template-columns: 1fr; } }
.artikel-liste { border-top: 1px solid var(--graphit); }
.artikel-liste a { display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: auto auto 1fr; gap: 10px 40px; padding: 28px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.artikel-liste__titel { font-size: var(--t-2); font-weight: 300; letter-spacing: -.03em; line-height: 1.08; transition: color .2s; }
.artikel-liste a:hover .artikel-liste__titel { color: var(--akzent); }
.artikel-liste__kurz { color: var(--graphit-2); max-width: 62ch; }
.artikel-liste__bild { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 1; overflow: hidden; background: var(--ton); }
.artikel-liste__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.artikel-liste a:hover img { transform: scale(1.05); }
@media (max-width: 759px) { .artikel-liste a { grid-template-columns: minmax(0, 1fr) 84px; gap: 8px 16px; } }
.artikel__kopf { display: grid; gap: 18px; max-width: 980px; margin: 28px 0 56px; }
.artikel__kurz { font-size: clamp(19px, 1.6vw, 23px); color: var(--graphit-2); max-width: 58ch; line-height: 1.45; }
.artikel__raster { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 8fr); gap: 40px clamp(32px, 5vw, 96px); align-items: start; border-top: 1px solid var(--graphit); padding-top: 28px; }
.artikel__inhalt { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 12px; }
.artikel__inhalt ol { display: grid; gap: 2px; }
.artikel__inhalt a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--graphit-2); text-decoration: none; line-height: 1.35; }
.artikel__inhalt a:hover { color: var(--graphit); text-decoration: underline; }
.artikel__text { max-width: 70ch; }
.artikel__text section { padding-bottom: 36px; }
.artikel__text h2 { display: grid; gap: 8px; margin-bottom: 14px; }
.artikel__text p { margin-bottom: 14px; hyphens: auto; }
.artikel__text ul { margin: 4px 0 18px; display: grid; gap: 8px; }
.artikel__text li { position: relative; padding-left: 22px; }
.artikel__text li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--akzent); }
@media (max-width: 899px) { .artikel__raster { grid-template-columns: 1fr; } .artikel__inhalt { position: relative; top: 0; } }
.naechster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; margin-top: clamp(72px, 8vw, 120px); padding: 28px 0; border-top: 1px solid var(--graphit); border-bottom: 1px solid var(--graphit); text-decoration: none; }
.naechster .etikett { grid-column: 1 / -1; }
.naechster:hover .t-2 { color: var(--akzent); }
.ueber__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.ueber__text { display: grid; gap: 20px; justify-items: start; max-width: 64ch; }
.ueber__text p { color: var(--graphit-2); hyphens: auto; }
.ueber__erster { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.45; color: var(--graphit) !important; }
.ueber__seite { display: grid; gap: 32px; position: sticky; top: calc(var(--kopf-h) + 24px); }
.mini-verband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: #C8C0B2; padding: 0; overflow: hidden; }
.mini-verband i { aspect-ratio: 2 / 1; background-size: cover; background-position: center; background-color: var(--ton); }
.mini-verband i:nth-child(4n+3), .mini-verband i:nth-child(4n+4) { transform: translateX(-50%); }
.fakten { display: grid; border-top: 1px solid var(--graphit); }
.fakten div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.fakten dd { font-size: 15.5px; }
.ueber__nicht { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 40px; margin-top: clamp(72px, 8vw, 120px); padding: clamp(28px, 3vw, 44px); background: var(--stein); }
.ueber__nicht p { color: var(--graphit-2); max-width: 64ch; }
@media (max-width: 899px) { .ueber__raster, .ueber__nicht { grid-template-columns: 1fr; } .ueber__seite { position: relative; top: 0; } }
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.kontakt__raster > section { display: grid; gap: 20px; }
.wege { display: grid; border-top: 1px solid var(--graphit); }
.wege li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.wege a, .wege strong { font-size: 19px; font-weight: 400; }
.wege__hinweis { font-size: 13px; color: var(--grau); }
@media (max-width: 899px) { .kontakt__raster { grid-template-columns: 1fr; } }
.faq { margin-top: clamp(80px, 9vw, 136px); }
.faq h2 { margin-bottom: 28px; }
.faq__liste { border-top: 1px solid var(--graphit); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq__frage { font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.01em; }
.faq summary .ic { transition: transform .3s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px 56px; color: var(--graphit-2); max-width: 74ch; }
@media (max-width: 559px) { .faq details p { padding-left: 0; } .faq summary { grid-template-columns: 32px minmax(0, 1fr) auto; } }

/* ── Bewegung reduzieren ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .rahmen__bild img, .kollektion__bild img, .platte__bild img, .karte__flaeche { transition: none !important; transform: none !important; }
  .ebene__blatt, .ebene__grund { transition-duration: .01s; }
}

/* ── Druck (Datenblatt, Profi-Tabelle) ── */
@media print {
  body { background: #fff; padding: 0; }
  .kopf, .fuss, .handyleiste, .vergleichsleiste, .kaufzeile, .ebene, .hinweis-toast, .sprung, .datenblatt__knoepfe { display: none !important; }
  body.druck-datenblatt main { display: none !important; }
  body.druck-datenblatt .datenblatt { position: static; display: block; box-shadow: none; width: 100%; max-height: none; }
  .profiseite > :not(.profi__tabelle) { display: none !important; }
}
.raster[data-ansicht="liste"] { display: block; }
.pruefen p span { display: block; }
.pruefen .klein { font-size: 13.5px; color: var(--graphit-2); }

/* Clip-Fenster */
.rahmen__fenster { isolation: isolate; }
.rahmen__clip-knopf { position: absolute; z-index: 2; top: 6px; right: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: #fff; }
.rahmen__clip-knopf::before { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgb(31 30 28 / .55); z-index: -1; }
.rahmen__clip-knopf .ic { width: 12px; height: 12px; fill: currentColor; }
.rahmen__ki { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 3px 6px; background: rgb(247 244 239 / .9); color: var(--graphit-2); font-size: 9.5px; }
@media (max-width: 899px) { .rahmen__ki { left: 8px; top: 8px; font-size: 8.5px; } .rahmen__clip-knopf { top: 0; right: 0; } }

/* Handy-Kopf: Titel → Rahmen → Text */
@media (max-width: 759px) {
  .start-kopf { display: flex; flex-direction: column; }
  .start-kopf__text { display: contents; }
  .start-kopf__titel { order: 1; margin-bottom: 18px; font-size: clamp(36px, 10.4vw, 52px); }
  .rahmen { order: 2; height: 58svh; min-height: 380px; }
  .start-kopf__neben { order: 3; margin-top: 20px; }
  .rahmen__zeile { white-space: normal; }
}

/* Daten-Zeilen: Mono ohne Versalien (Einheiten bleiben klein: cm, m², €) */
.daten { font: 450 12px/1.4 var(--mono); letter-spacing: .01em; color: var(--grau); font-variant-numeric: tabular-nums; }
.etikett .ve { text-transform: none; letter-spacing: .03em; }
.schublade__neu .daten, .zubehoer-liste .daten, .look__positionen .daten, .buehne__positionen .daten { display: block; }
.platte .mini { top: 8px; right: 8px; bottom: auto; }
.platte__text { padding-right: 0; }
/* Ausstellung: Hover zeigt die Fliese als Objekt auf Stein (nur mit echter Maus) */
.kollektion__flaeche { object-fit: contain !important; padding: 16%; background: var(--stein); }
@media (hover: none) { .kollektion__flaeche { display: none; } }
@media (max-width: 899px) { .verband__brett { top: 50%; bottom: auto; transform: none; } }

/* Musterplatte (Karte, Ansicht „Fliese“) */
.platte-muster { position: absolute; left: 13%; right: 13%; top: 50%; aspect-ratio: 1; transform: translateY(-50%); display: grid; gap: 2px; background: var(--fuge, #d6d2ca); box-shadow: 0 1px 1px rgb(31 30 28 / .08), 0 26px 34px -22px rgb(31 30 28 / .5); overflow: hidden; transition: transform .6s var(--ease); }
.platte-muster--hell { --fuge: #d6d2ca; } .platte-muster--grau { --fuge: #8b8882; } .platte-muster--dunkel { --fuge: #3b3936; }
.platte-muster--quad { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.platte-muster--quad img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.platte-muster--quad img:nth-child(2), .platte-muster--quad img:nth-child(3) { transform: rotate(180deg); }
.platte-muster--reihen { grid-template-rows: repeat(var(--reihen), minmax(0, 1fr)); }
.pm-reihe { display: flex; gap: 2px; min-height: 0; overflow: hidden; }
.pm-reihe img { flex: none; width: 100%; height: 100%; object-fit: cover; }
.pm-reihe img + img { transform: rotate(180deg); }
.pm-versetzt img { transform: translateX(calc(-50% - 1px)); }
.pm-versetzt img + img { transform: translateX(calc(-50% - 1px)) rotate(180deg); }
@media (hover: hover) { .karte:hover .platte-muster { transform: translateY(-50%) scale(1.02); } }
.karte__passe--frei .karte__flaeche { width: 74%; max-width: none; max-height: none; height: auto; box-shadow: none; filter: drop-shadow(0 12px 14px rgb(31 30 28 / .25)); }
@media (min-width: 1280px) { .raster:not(.raster--klein) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 20px; } }
/* Galerie: Fläche als Objekt, vollständig sichtbar */
.galerie__passe { display: block; }
.galerie__passe img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; box-shadow: none; filter: drop-shadow(0 22px 26px rgb(31 30 28 / .32)); }
/* Kompakter Seitenkopf (Shop, Raumstudio) */
.seiten-kopf--kompakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 10px 48px; margin: 18px 0 28px; max-width: none; }
.seiten-kopf--kompakt .t-1 { font-size: clamp(38px, 4.6vw, 68px); }
.seiten-kopf--kompakt .seiten-kopf__text { font-size: 16px; padding-bottom: 6px; }
.seiten-kopf--kompakt > .etikett { grid-column: 1 / -1; }
@media (max-width: 899px) { .seiten-kopf--kompakt { grid-template-columns: 1fr; } }
.studio .seiten-kopf--kompakt { grid-template-columns: auto minmax(0, 1fr) auto; }
.studio .seiten-kopf--kompakt .t-1 { grid-column: 1; }
.studio .seiten-kopf--kompakt .seiten-kopf__text { grid-column: 2; max-width: 56ch; }
.studio .seiten-kopf--kompakt .studio__modus { grid-column: 3; grid-row: 2; }
@media (max-width: 1023px) { .studio .seiten-kopf--kompakt { grid-template-columns: 1fr; } .studio .seiten-kopf--kompakt > * { grid-column: 1 !important; grid-row: auto !important; } .studio .seiten-kopf--kompakt .studio__modus { justify-self: start; } }
.chip[aria-pressed="true"] .daten { color: #C9C2B6; }
.kategorien ul { gap: 0 22px; }
.kategorien a { font-size: 14.5px; }
@media (pointer: coarse) { .karte__aktionen .mini { height: 40px; min-width: 40px; justify-content: center; } }
.filter__preis { flex-direction: column; align-items: flex-start; }
.filter__preis label span:first-child { min-width: 26px; }
.vergleich-tabelle tr.ist-anders td { background: none; font-weight: 500; }
.vergleich-tabelle tr.ist-anders th { color: var(--graphit); }
.kasse__schritt > .umschalter { justify-self: start; }
.herstellung__buehne { display: grid; gap: 16px; min-width: 0; }
.herstellung__wahl { justify-self: end; }
.umschalter--dunkel { background: transparent; border-color: #5E5A53; }
.umschalter--dunkel button { color: #C9C2B6; }
.umschalter--dunkel button + button { border-left-color: #5E5A53; }
.umschalter--dunkel button[aria-pressed="true"] { background: var(--kalk); color: var(--graphit); }
.umschalter--dunkel .etikett { color: inherit; opacity: .75; font-size: 10px; margin-left: 4px; }
.herstellung__clip { display: grid; gap: 10px; }
.herstellung__clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; border-radius: 4px; }
.herstellung__clip figcaption { color: #A9A196; }
@media (max-width: 899px) { .herstellung__wahl { justify-self: start; } }
.mini-verband { display: grid; gap: 3px; grid-template-columns: none; background: #C8C0B2; overflow: hidden; }
.mv-reihe { display: flex; gap: 3px; }
.mv-reihe i { flex: none; width: calc((100% - 9px) / 4); aspect-ratio: 2 / 1; background-size: cover; background-position: center; background-color: var(--ton); transform: none !important; }
.mv-versetzt { margin-left: calc((100% - 9px) / -8 - 1.5px); }
/* Touch-Ziele ≥ 44 px am Handy */
@media (pointer: coarse) {
  .fuss__spalte li a { padding: 11px 0; }
  .brotkrumen a { padding: 12px 0; }
  .rahmen__fenster-text { min-height: 44px; }
  .mini { height: 40px; }
  .artikel__inhalt a { padding: 11px 0; }
  .wege a { display: inline-block; padding: 8px 0; }
  .liste-tabelle a { min-height: 44px; display: inline-flex; align-items: center; }
  .regler input { min-height: 44px; }
  .menue__service a { padding: 12px 0; }
}
.studio__marke { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 4px 7px; background: rgb(247 244 239 / .9); color: var(--graphit-2); font-size: 10px; pointer-events: none; }
/* Film liegt über der (pausierten) Zeichnung – die Zeichnung behält ihre Größe */
.herstellung__buehne { position: relative; }
.herstellung__clip { position: absolute; z-index: 2; left: 0; right: 0; top: 60px; bottom: 0; background: var(--graphit); align-content: start; }
@media (pointer: coarse) { .buehne__positionen a { display: inline-block; padding: 9px 0; } .karte__name a { display: inline-block; padding: 6px 0; } }

/* ═════════ Nachschärfen 21.10. (Leitplanke Osman: modern, nicht altmodisch) ═════════
   Grundschrift für Etiketten, Navigation, Knöpfe – Satzschreibung statt Versalien.
   Geist Mono nur noch für Maße (.daten), Zähler (01 — 05) und Artikelnummern.
   Weiche Rundungen und Flächen statt 1-px-Rahmenkästen. */
:root { --r-s: 10px; --r-l: 18px; --r-k: 999px; --flaeche: #F6F3EE; }
.etikett { font: 500 12.5px/1.4 var(--schrift); letter-spacing: .005em; text-transform: none; color: var(--grau); font-variant-numeric: tabular-nums; }
.zaehler__zahl, .kasse__schritte .etikett, .menue__haupt .etikett, .buehne__liste .etikett, .looks__index .etikett, .faq summary .etikett, .schritte-liste .etikett, .musterbox__faecher .etikett { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; }
.brotkrumen ol { font: 450 13px/1.4 var(--schrift); letter-spacing: 0; text-transform: none; }
.werkzeug__treffer { font: 450 13.5px/1.3 var(--schrift); letter-spacing: 0; text-transform: none; }
.mini { font: 500 12.5px/1 var(--schrift); letter-spacing: 0; text-transform: none; border-radius: var(--r-k); height: 34px; padding: 0 12px; border-color: transparent; background: rgb(247 244 239 / .94); box-shadow: 0 1px 2px rgb(31 30 28 / .12); }
.kauf__fakten dt, .rechner__ergebnis dt, .kennzahlen dt, .galerie__daumen button, .liste-tabelle thead th, .berater-band__bsp, .pruefen h3 { font-family: var(--schrift); font-weight: 500; font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.kennzahlen dt { font-size: 13.5px; }
.etiketten button { font: 500 13px/1 var(--schrift); letter-spacing: 0; text-transform: none; border-radius: var(--r-k); padding: 0 10px 0 14px; border-color: transparent; background: var(--graphit); color: var(--kalk); }
.etiketten button:hover { background: var(--akzent); }
.nachricht__erkannt span { font: 500 12px/1.3 var(--schrift); letter-spacing: 0; border-radius: var(--r-k); padding: 4px 10px; }
.karte__preis, .treffer__preis, .look__preis, .position__summe, .lieferart__preis, .arten__preis, .zahl-zelle, .kaufzeile__preis, .summe__zeilen dd, .platte .daten span { font-family: var(--schrift); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.karte__preis { font-size: 14.5px; font-weight: 500; }
.summe__zeilen dd { font-size: 14.5px; }
.kauf__beispiel { font: 500 11.5px/1 var(--schrift); text-transform: none; letter-spacing: 0; border: 0; background: var(--akzent-zart); color: var(--akzent); padding: 5px 10px; border-radius: var(--r-k); }
.karte__neu, .karte__serie, .studio-teaser__marke, .studio__marke, .rahmen__ki, .galerie__bild figcaption { border-radius: var(--r-k); padding: 5px 10px; }
.karte__neu { font-weight: 600; }
/* Knöpfe, Chips, Felder: weich */
.knopf { border-radius: var(--r-k); padding: 0 26px; }
.knopf--klein { padding: 0 18px; }
.chip { border-radius: var(--r-k); border-color: var(--stein-tief); background: var(--weiss); }
.chip[aria-pressed="true"] { background: var(--graphit); }
.knopf-icon { border-radius: var(--r-k); }
.berater-feld { border-radius: var(--r-k); border-color: transparent; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--stein-tief); padding: 0 18px; }
.berater-feld:hover { box-shadow: inset 0 0 0 1px var(--graphit); }
.feld input, .feld select, .feld textarea, .plz-pruefer input, .berater__eingabe input, .stepper input, .filter__preis input, .schnell__zeile input, .anfrage-text { border-radius: 12px; }
.auswahl select { border-radius: var(--r-k); background: var(--weiss); padding: 0 40px 0 18px; }
.umschalter { border: 0; background: var(--stein); border-radius: var(--r-k); padding: 3px; gap: 2px; }
.umschalter button { border-radius: var(--r-k); min-height: 38px; padding: 0 14px; }
.umschalter button + button { border-left: 0; }
.umschalter button[aria-pressed="true"] { background: var(--weiss); color: var(--graphit); box-shadow: 0 1px 3px rgb(31 30 28 / .18); }
.umschalter--klein button { min-height: 32px; }
.umschalter--dunkel { background: #33312D; }
.umschalter--dunkel button[aria-pressed="true"] { background: var(--kalk); }
.werkzeug__filter { border-radius: var(--r-k); padding: 0 20px; border-color: var(--stein-tief); background: var(--weiss); }
.werkzeug__filter[aria-expanded="true"] { border-color: var(--graphit); }
.profi-schalter { background: var(--stein); border-radius: var(--r-k); padding: 3px; gap: 2px; }
.profi-schalter .etikett { padding: 0 6px 0 12px; margin: 0; }
.profi-schalter button, .profi-schalter button + button { border: 0; border-radius: var(--r-k); min-height: 36px; }
.profi-schalter button[aria-pressed="true"] { background: var(--graphit); color: var(--kalk); }
.profi-schalter--dunkel { background: #33312D; }
.profi-schalter--dunkel button[aria-pressed="true"] { background: var(--kalk); color: var(--graphit); }
.profi-schalter__status { padding-right: 12px; }
.stepper .knopf-icon, .knopf-icon--linie { border: 0; background: var(--stein); }
.stepper .knopf-icon:hover, .knopf-icon--linie:hover { background: var(--stein-tief); }
.hinweis-toast, .sprung { border-radius: var(--r-k); padding: 12px 20px; }
.zahl { border-radius: var(--r-k); }
/* Flächen statt Rahmenkästen */
.rechner, .filter, .summe, .studio__ki, .musterbox__kasten, .karte--muster, .kasse__demo, .kauf__badboden, .produkt__gegen, .ueber__nicht, .zubehoer-liste li, .lieferart, .treffer, .nachricht--kt { border: 0; box-shadow: none; border-radius: var(--r-l); }
.rechner, .filter, .summe, .studio__ki, .zubehoer-liste li, .lieferart, .karte--muster { background: var(--flaeche); }
.treffer, .nachricht--kt { background: var(--weiss); }
.nachricht { border-radius: 16px; }
.nachricht--du { border-radius: 16px 16px 4px 16px; }
.kauf__badboden { background: var(--flaeche); border-left: 0; }
.kasse__demo { background: var(--akzent-zart); }
.lieferart:has(input:checked) { box-shadow: inset 0 0 0 2px var(--graphit); border: 0; }
.filter__wert { border-radius: 10px; border-left: 0; }
.filter__wert[aria-pressed="true"] { background: var(--graphit); color: var(--kalk); }
.filter__wert[aria-pressed="true"] .filter__zahl { color: #C9C2B6; }
.wahl a { border: 0; background: var(--flaeche); border-radius: 14px; }
.wahl a[aria-current] { box-shadow: inset 0 0 0 2px var(--graphit); }
.wahl i { border-radius: 8px; }
.vergleichsleiste__liste li { border-radius: var(--r-k); padding-right: 2px; }
.vergleichsleiste__liste img { border-radius: 50%; }
.datenblatt { border-radius: var(--r-l); }
.ebene__blatt { border-radius: 22px 0 0 22px; }
.ebene--menue .ebene__blatt { border-radius: 22px 0 0 22px; }
@media (max-width: 759px) { .ebene--seite .ebene__blatt { border-radius: 22px 22px 0 0; } .ebene--menue .ebene__blatt { border-radius: 0; } .filter { border-radius: 22px 22px 0 0; } }
/* Bilder: leicht gerundet */
.rahmen, .studio__ausschnitt, .studio-teaser__bild, .galerie__buehne { border-radius: 20px; }
.karte__bild, .kollektion__bild, .buehne__bilder, .look__bild img, .produkt__gegen-bild, .look-liste img, .artikel-liste__bild { border-radius: 14px; }
.platte__bild, .musterwand__stein img, .studio__raeume img, .galerie__daumen img, .studio__fliesen button, .stein-wahl, .position__bild, .musterseite__liste img, .look__positionen img, .zubehoer-liste img, .treffer__bild, .schublade__neu img, .vergleich__kopf img, .liste-tabelle img, .mini-verband { border-radius: 10px; }
.musterbox__faecher li { border-radius: 10px; }
.musterbox__faecher li img { border-radius: 6px; }
.rahmen__fenster { border-radius: 14px; }
.rahmen__film, .rahmen__clip { border-radius: 9px; }
.herstellung__clip video { border-radius: 16px; }
.studio-teaser__wahl { border-radius: 16px; }
.platte-muster { border-radius: 4px; }
.galerie__daumen img { outline-offset: 3px; }
/* Linien leiser: Abschnittstrennung über Luft, nicht über Zeitungsregeln */
.produkt__text, .vorteile, .schritte, .arten, .artikel-liste, .artikel__raster, .faq__liste, .profi__block, .positionen, .pruefen, .fakten, .wege, .naechster, .look__positionen, .studio__steuerung { border-top-color: var(--linie); }
.naechster { border-bottom-color: var(--linie); }
.kasse__schritte button[aria-current="step"] { border-top-color: var(--akzent); }
.liste-tabelle thead th { border-bottom-color: var(--linie-stark); }
.summe__zeilen .summe__gesamt { border-top-color: var(--linie-stark); }
.kategorien { border-top: 0; }
.rahmen .zaehler__zahl { color: #fff; font-size: 13px; }
.rahmen .rahmen__zeile { color: rgb(255 255 255 / .9); font-size: 13.5px; }
.karte .karte__neu { color: var(--akzent); }
.rahmen .rahmen__fenster-text { color: var(--graphit); font-size: 12px; }