/* KT Fliesen · Entwurf C · FLIESENINDEX — Stil „Bild & Suche“ · Designsystem: entwuerfe/fliesenindex/DESIGN.md
   General Sans (Fontshare, ITF Free Font License, selbst gehostet) · Satzschreibung · deckende Karten · Orange als Signal */
@font-face { font-family: 'General Sans'; src: url(fonts/general-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url(fonts/general-sans-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url(fonts/general-sans-600.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }

:root {
  --schrift: 'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #FAF8F5; --flaeche: #FFFFFF; --flaeche-2: #F3F0EB; --flaeche-3: #EAE6DF;
  --text: #17171A; --text-2: #45444A; --leise: #66656B; --platzhalter: #85848A;
  --linie: #E8E4DD; --linie-2: #D3CEC5;
  --akzent: #F08119; --akzent-hover: #F49742; --akzent-hell: #FDEBDA; --akzent-text: #A35205; --auf-akzent: #17171A;
  --dunkel: #17171A; --dunkel-2: #222226; --dunkel-linie: #34343A; --dunkel-text: #F2F0EC; --dunkel-leise: #A9A7AE;
  --gruen: #2E9E5B; --gelb: #D9A520; --rot: #B3261E;
  --r-s: 10px; --r: 16px; --r-l: 24px; --r-xl: 32px;
  --sch-1: 0 1px 2px rgba(23, 23, 26, .06), 0 1px 1px rgba(23, 23, 26, .03);
  --sch-2: 0 2px 6px rgba(23, 23, 26, .04), 0 14px 36px rgba(23, 23, 26, .07);
  --sch-3: 0 30px 80px rgba(23, 23, 26, .22);
  --ring: 0 0 0 4px rgba(240, 129, 25, .2);
  --rand: 40px; --kopf-h: 68px;
  --weich: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (max-width: 1023px) { :root { --rand: 24px; } }
@media (max-width: 639px) { :root { --rand: 16px; --kopf-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16.5px/1.6 var(--schrift); -webkit-font-smoothing: antialiased; overflow-x: clip; }
@media (max-width: 639px) { body { font-size: 16px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
dl, dd { margin: 0; }
::selection { background: var(--akzent-hell); color: var(--text); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
main:focus { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.huelle { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--rand); }
.ico { width: 20px; height: 20px; flex: none; }
.leise { color: var(--leise); }
.klein { font-size: 14px; }
.rechts { text-align: right; }
.zahl, .mono, .preis { font-variant-numeric: tabular-nums; }
.lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--text-2); max-width: 52ch; }
/* Etiketten (früher Mono-Versal) – jetzt klein, Satzschreibung */
.etikett, .mono-etikett { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--leise); }
.etikett .ico, .mono-etikett .ico { width: 16px; height: 16px; }

/* Typo-Skala */
.d1, .d2, .d3, .d4 { font-family: var(--schrift); text-transform: none; hyphens: manual; overflow-wrap: break-word; color: var(--text); }
.d1 { font-size: clamp(30px, 2.8vw, 41px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.d2 { font-size: clamp(32px, 3.5vw, 52px); font-weight: 500; line-height: 1.06; letter-spacing: -.035em; }
.d3 { font-size: clamp(25px, 2.3vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -.028em; }
.d4 { font-size: clamp(18px, 1.35vw, 20px); font-weight: 600; line-height: 1.2; letter-spacing: -.012em; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; max-width: 100%; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s; }
.knopf:active { transform: scale(.98); }
.knopf .ico { width: 18px; height: 18px; }
.knopf--schwarz { background: var(--text); color: #fff; }
.knopf--schwarz:hover { background: #2E2E33; }
.knopf--orange { background: var(--akzent); color: var(--auf-akzent); }
.knopf--orange:hover { background: var(--akzent-hover); }
.knopf--linie { background: var(--flaeche); border-color: var(--linie-2); color: var(--text); }
.knopf--linie:hover { border-color: var(--text); }
.knopf--klein { min-height: 44px; padding: 0 16px; font-size: 14px; }
.knopf--gross { min-height: 56px; padding: 0 30px; font-size: 16px; }
.knopf--breit { width: 100%; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knopf-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; }
.knopf-ico:hover { background: var(--flaeche-2); }
.textknopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; }
.textknopf .ico { width: 16px; height: 16px; color: var(--akzent); }
.textknopf:hover span { text-decoration: underline; text-underline-offset: 4px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 0; }
.mini { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.mini .ico { width: 15px; height: 15px; }
.mini:hover { background: var(--flaeche-2); color: var(--text); }
.mini[aria-pressed="true"] { color: var(--akzent-text); background: var(--akzent-hell); }

/* Segment-Schalter (Pillen) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--flaeche-2); }
.seg > button, .seg__wahl > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: background .2s, color .2s; }
.seg > button:hover, .seg__wahl:hover > span { color: var(--text); }
.seg > button[aria-pressed="true"], .seg > button[aria-selected="true"], .seg__wahl input:checked + span { background: var(--flaeche); color: var(--text); box-shadow: var(--sch-1); }
.seg__wahl { position: relative; display: inline-flex; flex: 1; }
.seg__wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.seg--voll { display: flex; width: 100%; }
.seg--voll > *, .seg--voll > button { flex: 1; }
.seg--voll .seg__wahl > span { width: 100%; }
.seg--klein > button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.seg--umbruch { flex-wrap: wrap; border-radius: 18px; }
.vorschlag { font-style: normal; font-size: 11px; font-weight: 600; background: var(--akzent-hell); color: var(--akzent-text); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie-2); font-size: 14px; font-weight: 500; color: var(--text-2); transition: background .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--text); color: var(--text); }
.chip .chip__haken { width: 0; height: 15px; transition: width .2s; }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.chip[aria-pressed="true"] .chip__haken { width: 15px; color: var(--akzent); }
.chip .chip__n { color: var(--leise); font-weight: 400; }

/* Felder */
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld__etikett { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.feld__etikett .ico { width: 16px; height: 16px; color: var(--leise); }
.feld input, .feld select, .feld textarea, .satz input, .rs__suche input, .plz-gross input, .stepper input, .plz-pruefer__zeile input, .schnell-tabelle input, .sortierung select {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--linie-2); border-radius: 12px; background: var(--flaeche); font-size: 16px; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .satz input:focus, .rs__suche input:focus, .plz-gross input:focus, .plz-pruefer__zeile input:focus, .schnell-tabelle input:focus { outline: none; border-color: var(--akzent); box-shadow: var(--ring); }
.feld textarea { resize: vertical; min-height: 110px; }
input::placeholder, textarea::placeholder { color: var(--platzhalter); }
.feld [aria-invalid="true"] { border-color: var(--rot); background: #FFF7F6; }
.feld__fehler { color: var(--rot); font-size: 14px; }
.feld__hilfe { font-size: 14px; color: var(--leise); margin: 8px 0 0; max-width: 62ch; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld--breit { grid-column: 1 / -1; }
@media (max-width: 639px) { .felder { grid-template-columns: 1fr; } }
abbr[title] { text-decoration: none; color: var(--akzent-text); }

/* Lager-Ampel, Marken */
.lager { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--text-2); }
.lager i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lager--koeln i { background: var(--gruen); } .lager--kurz i { background: var(--gelb); } .lager--bestellung i { background: var(--akzent); }
.marke-neu { display: inline-block; background: var(--akzent); color: var(--auf-akzent); font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; text-transform: none; }
.marke-sym { display: inline-block; background: var(--flaeche); color: var(--text-2); font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; }
.etikett-bild { position: absolute; left: 12px; bottom: 12px; background: var(--flaeche); color: var(--text); padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; box-shadow: var(--sch-1); }

/* Sprunglink, Band, Kopf */
.sprung { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--text); color: #fff; padding: 12px 16px; border-radius: 10px; min-height: 44px; }
.sprung:focus { top: 8px; }
.band { background: var(--dunkel); color: #C9C8CD; font-size: 12.5px; }
.band__in { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 16px; }
.band p { margin: 0; }
.band__demo { color: var(--dunkel-text); }
.band__rechts { display: flex; gap: 20px; }
.band a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; text-decoration: none; color: #C9C8CD; }
.band a:hover { color: #fff; }
.band .ico { width: 14px; height: 14px; }
@media (max-width: 760px) { .band__rechts a:first-child { display: none; } .band__in { font-size: 11.5px; line-height: 1.3; padding-block: 4px; } }

.kopf { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.kopf--schatten { border-bottom-color: var(--linie); box-shadow: 0 6px 20px rgba(23, 23, 26, .04); }
.kopf__in { display: flex; align-items: center; gap: 28px; height: var(--kopf-h); }
.marke { display: flex; align-items: center; gap: 12px; flex: none; min-height: 44px; text-decoration: none; }
.marke__zeichen { width: 84px; height: auto; }
.marke__wort { font-size: 17px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.marke__wort span { color: var(--leise); }
.nav { display: flex; gap: 2px; margin-right: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: background .2s, color .2s; }
.nav a:hover { background: var(--flaeche-2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--flaeche); color: var(--text); box-shadow: var(--sch-1); }
.werkzeuge { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.werkzeuge .schnell-auf { display: none; }
.schnell { position: relative; display: flex; align-items: center; width: 280px; height: 44px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); transition: border-color .2s, box-shadow .2s; }
.schnell:focus-within { border-color: var(--akzent); box-shadow: var(--ring); }
.schnell__ico { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--leise); pointer-events: none; }
.schnell__feld { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 40px; font-size: 14.5px; outline: none; border-radius: 999px; text-overflow: ellipsis; }
.schnell__feld::-webkit-search-cancel-button { display: none; }
.schnell__taste { position: absolute; right: 12px; font: 500 11.5px var(--schrift); color: var(--leise); border: 1px solid var(--linie-2); border-radius: 6px; padding: 0 6px; }
.schnell__liste { position: absolute; top: calc(100% + 8px); right: 0; width: min(460px, 92vw); max-height: 62vh; overflow: auto; background: var(--flaeche); border-radius: 18px; box-shadow: var(--sch-3); z-index: 70; padding: 6px; }
.schnell__liste li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer; min-height: 58px; }
.schnell__liste li[aria-selected="true"], .schnell__liste li:hover { background: var(--flaeche-2); }
.schnell__liste img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; }
.schnell__liste b { display: block; font-weight: 600; font-size: 15px; }
.schnell__liste small { font-size: 13px; color: var(--leise); }
.schnell__liste .preis { font-size: 14px; font-weight: 600; }
.schnell__liste .schnell__alle { display: block; padding: 12px; font-weight: 600; color: var(--akzent-text); min-height: 0; }
.schnell__liste .schnell__nichts { display: block; color: var(--leise); cursor: default; font-size: 14px; }
.preisart { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--flaeche-2); }
.preisart button { min-height: 38px; padding: 0 13px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--leise); transition: background .2s, color .2s; }
.preisart button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--sch-1); }
.preisart button[data-preisart="netto"][aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }
.preisart--gross button { min-height: 46px; padding: 0 24px; font-size: 15px; }
.zaehler { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--text-2); text-decoration: none; }
.zaehler:hover { background: var(--flaeche-2); color: var(--text); }
.zaehler b, .handyleiste .zahl { position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-size: 11.5px; font-weight: 600; line-height: 19px; text-align: center; }
.zaehler b[data-kt-leer], .handyleiste .zahl[data-kt-leer], .menue b[data-kt-leer] { display: none; }
.zaehler.puls b { animation: puls .5s var(--weich); }
@keyframes puls { 40% { transform: scale(1.3); } }
.menue-knopf { display: none; width: 44px; height: 44px; place-items: center; border-radius: 999px; }
.menue { position: fixed; inset: calc(var(--kopf-h) + 1px) 0 0 0; z-index: 55; background: var(--bg); overflow: auto; }
.menue__in { padding-block: 24px 120px; display: grid; gap: 28px; }
.menue__haupt { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.025em; padding: 8px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.menue__neben { display: grid; gap: 2px; }
.menue__neben a { display: flex; gap: 8px; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.menue__neben b { background: var(--akzent); color: var(--auf-akzent); padding: 0 8px; border-radius: 999px; font-size: 12px; }
.menue__preis { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 1280px) { .nav a { padding: 0 9px; font-size: 14.5px; } .schnell { width: 220px; } }
@media (max-width: 1180px) { .nav { display: none; } .menue-knopf { display: inline-grid; } }
@media (max-width: 760px) {
  .kopf__in { gap: 8px; }
  .marke__zeichen { width: 68px; }
  .marke__wort { font-size: 15px; }
  .werkzeuge { gap: 0; }
  .werkzeuge > .preisart, .zaehler--muster, .zaehler--vergleich { display: none; }
  .werkzeuge .schnell-auf { display: inline-grid; }
  .schnell { display: none; position: absolute; left: var(--rand); right: var(--rand); top: calc(100% + 8px); width: auto; height: 50px; box-shadow: var(--sch-3); }
  .kopf--suche .schnell { display: flex; }
  .schnell__taste { display: none; }
  .schnell__feld { font-size: 16px; }
}
@media (max-width: 360px) { .marke__wort { display: none; } }

/* Handy-Leiste */
.handyleiste { display: none; }
@media (max-width: 639px) {
  .handyleiste { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; background: var(--flaeche); box-shadow: 0 -6px 24px rgba(23, 23, 26, .08); padding-bottom: env(safe-area-inset-bottom); }
  .handyleiste a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; font-size: 11.5px; font-weight: 500; color: var(--text-2); text-decoration: none; }
  .handyleiste a[aria-current="page"] { color: var(--akzent-text); }
  .handyleiste .zahl { top: 6px; right: calc(50% - 22px); }
}

/* Meldung */
.meldung { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 140%); opacity: 0; visibility: hidden; background: var(--text); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14.5px; max-width: min(540px, 92vw); transition: transform .3s var(--weich), opacity .3s; box-shadow: var(--sch-3); display: flex; gap: 10px; align-items: center; pointer-events: none; }
.meldung::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); flex: none; }
.meldung.zeigen { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.hat-vergleichsleiste .meldung { bottom: 104px; }
@media (max-width: 639px) { .meldung { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* Brotkrumen, Abschnittsköpfe */
.krumen ol { display: flex; flex-wrap: wrap; padding: 20px 0 0; font-size: 14px; color: var(--leise); }
.krumen li + li::before { content: '/'; margin: 0 8px; color: var(--linie-2); }
.krumen a { text-decoration: none; display: inline-block; padding: 6px 0; }
.krumen a:hover { color: var(--text); }
.krumen [aria-current] { color: var(--text); }
.abschnittskopf { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 32px; }
.abschnittskopf > div:first-child { display: grid; gap: 10px; }
.abschnittskopf p { margin: 0; }
.abschnittskopf .lead { max-width: 56ch; }
.ab-kopf { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; margin-bottom: 18px; align-items: center; }
.ab-kopf__nr { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--akzent-hell); color: var(--akzent-text); font-size: 15px; font-weight: 600; }
.ab-kopf__text { grid-column: 2; margin: 0; color: var(--leise); max-width: 60ch; }

/* ═════════ START · Raumbild + Suchkarte ═════════ */
.held__flaeche { position: relative; }
.held__bild { position: absolute; inset: 0; overflow: hidden; background: #3a332d; }
.held__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; opacity: 0; transition: opacity .7s ease; }
.held__img.ist-an { opacity: 1; }
.held__bildtext { position: absolute; right: 24px; bottom: 22px; z-index: 2; display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; max-width: calc(100% - 48px); padding: 8px 15px; border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: 13px; text-decoration: none; box-shadow: var(--sch-1); }
.held__bildtext span { color: var(--leise); }
.held__bildtext b { font-weight: 600; }
.held__bildtext:hover { box-shadow: var(--sch-2); }
.held__raster { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 44px; min-height: 560px; }
.suchkarte { width: min(620px, 100%); background: var(--flaeche); border-radius: var(--r-l); padding: 26px 28px 18px; display: grid; gap: 16px; box-shadow: var(--sch-3); }
.suchkarte__vor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--text-2); }
.funke { width: 18px; height: 18px; color: var(--akzent); }
.suche { position: relative; display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 7px 0 18px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
.suche:focus-within { background: var(--flaeche); border-color: var(--akzent); box-shadow: var(--ring); }
.suche__ico { display: grid; }
.suche__feld { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 17.5px; outline: none; text-overflow: ellipsis; color: var(--text); }
.suche__feld:focus-visible { outline: none; }
.suche__knopf { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 12px; background: var(--akzent); color: var(--auf-akzent); font-size: 15.5px; font-weight: 600; transition: background .2s, transform .15s; }
.suche__knopf:hover { background: var(--akzent-hover); }
.suche__knopf:active { transform: scale(.98); }
.suche__knopf .ico { width: 18px; height: 18px; }
.suchkarte__zeile { display: flex; gap: 20px; flex-wrap: wrap; margin-top: -4px; }
.suchkarte__zeile .textknopf { min-height: 40px; }
.gefuehrt { padding: 16px; border-radius: var(--r); background: var(--flaeche-2); display: grid; gap: 10px; }
.gefuehrt__schritt { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--leise); }
.gefuehrt__schritt i { width: 24px; height: 4px; border-radius: 4px; background: var(--linie-2); }
.gefuehrt__schritt i.an { background: var(--akzent); }
.gefuehrt__frage { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.012em; }
.chips--gefuehrt .chip { background: var(--flaeche); }
.verstanden { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 14px; }
.verstanden > span:first-child { color: var(--leise); margin-right: 4px; }
.tok { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 11px; border-radius: 999px; background: var(--flaeche-2); font-size: 13.5px; font-weight: 500; }
.tok small { color: var(--leise); font-size: 12.5px; font-weight: 400; }
.tok--offen { text-decoration: line-through; color: var(--leise); background: transparent; border: 1px dashed var(--linie-2); }
.b-hinweis { margin: 0; padding: 11px 15px; border-radius: 12px; background: var(--akzent-hell); font-size: 14.5px; color: var(--text-2); max-width: 66ch; }
.suchkarte__ergebnis { border-top: 1px solid var(--linie); padding-top: 14px; display: grid; gap: 8px; }
.suchkarte__antwort { margin: 0; font-size: 15.5px; color: var(--text-2); }
.trefferliste:empty { display: none; }
.treffer { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 10px; margin-inline: -10px; border-radius: 14px; align-items: start; position: relative; transition: background .2s; }
.treffer:hover { background: var(--flaeche-2); }
.treffer__nr { position: absolute; left: 4px; top: 4px; z-index: 1; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; }
.treffer__bild img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.treffer__titel h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.treffer__titel a { text-decoration: none; }
.treffer__titel a:hover { text-decoration: underline; }
.treffer__daten { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 2px 0 6px; font-size: 13.5px; color: var(--leise); }
.treffer__daten .preis { color: var(--text); font-weight: 600; }
.gruende { display: grid; gap: 3px; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.gruende li { display: flex; gap: 7px; align-items: flex-start; }
.gruende .ico { width: 15px; height: 15px; margin-top: 2px; color: var(--akzent); }
.treffer--teil .gruende .ico { color: var(--leise); }
.treffer__aktionen { display: flex; flex-direction: column; gap: 2px; }
.suchkarte .gruende li:nth-child(n+4) { display: none; }
.beispiele ul { display: grid; }
.beispiel { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 42px; padding: 0 8px; margin-inline: -8px; border-radius: 10px; text-align: left; font-size: 15.5px; color: var(--text-2); }
.beispiel .ico { width: 16px; height: 16px; color: var(--leise); transition: transform .2s, color .2s; }
.beispiel:hover { background: var(--flaeche-2); color: var(--text); }
.beispiel:hover .ico { transform: translateX(3px); color: var(--akzent); }
.suchkarte .beispiele li:nth-child(n+3) { display: none; }

/* Fliesenwand-Leiste */
.leiste { padding: 22px 0 8px; }
.leiste__kopf { display: flex; align-items: center; gap: 12px 24px; margin-bottom: 14px; flex-wrap: wrap; }
.leiste__legende { margin: 0 auto 0 0; }
.leiste__knoepfe { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.trefferzahl { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.trefferzahl b { font-size: 36px; font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.trefferzahl span { color: var(--leise); font-size: 14.5px; }
.berater-fein { margin: 14px 0 0; max-width: 80ch; }
.wand { display: grid; gap: 6px; }
.wand--leiste { grid-template-columns: repeat(18, minmax(0, 1fr)); }
.wk { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--flaeche-2); transition: box-shadow .3s; }
.wk img { width: 100%; height: 100%; object-fit: cover; transition: filter .35s, opacity .35s, transform .5s var(--weich); }
.wk:hover img { transform: scale(1.06); }
.wk--aus img { opacity: .16; filter: grayscale(1); }
.wk--treffer { box-shadow: 0 0 0 2px var(--akzent); }
.wk__nr { position: absolute; left: 5px; top: 5px; z-index: 2; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--weich); font-variant-numeric: tabular-nums; }
.wk--treffer .wk__nr { opacity: 1; transform: none; }
.wk--legende { display: flex; flex-direction: column; justify-content: center; padding: 6px; background: var(--flaeche-2); color: var(--leise); font-size: 10.5px; line-height: 1.25; }
.wk--legende span:last-child { color: var(--text); font-weight: 600; }
@media (max-width: 1100px) { .wand--leiste { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .held__bild { position: relative; height: 300px; }
  .held__raster { padding-top: 0; padding-bottom: 24px; min-height: 0; margin-top: -72px; }
  .suchkarte { padding: 20px 18px 14px; border-radius: 22px; }
  .held__bildtext { left: 12px; right: auto; bottom: 84px; font-size: 12px; padding: 6px 11px; max-width: calc(100% - 24px); }
  .suche { height: auto; flex-wrap: wrap; padding: 6px 6px 6px 14px; }
  .suche__feld { height: 48px; font-size: 16.5px; }
  .suche__knopf { width: 100%; justify-content: center; height: 48px; }
  .suchkarte > .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding-inline: 18px; scrollbar-width: none; }
  .suchkarte > .chips::-webkit-scrollbar { display: none; }
  .suchkarte > .chips .chip { flex: none; min-height: 44px; }
  .treffer { grid-template-columns: 56px minmax(0, 1fr); }
  .treffer__bild img { width: 56px; height: 56px; }
  .treffer__aktionen { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .mini { min-height: 44px; }
  .wand--leiste { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .leiste__knoepfe { width: 100%; }
}

/* Kennzahlen */
.kennzahlen { padding: 40px 0 8px; }
.kennzahlen__liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kennzahlen__liste div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 20px 22px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); }
.kennzahlen__liste dd { font-size: clamp(30px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahlen__liste dt { font-size: 14.5px; color: var(--leise); }
@media (max-width: 760px) { .kennzahlen__liste { grid-template-columns: 1fr 1fr; gap: 10px; } .kennzahlen__liste div { padding: 16px; } }

/* Serien-Index */
.index { padding: 88px 0 40px; }
.index__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.index__liste { display: grid; gap: 4px; }
.iz { border-radius: var(--r); transition: background .2s, box-shadow .2s; }
.iz:hover, .iz.ist-vorschau { background: var(--flaeche); box-shadow: var(--sch-1); }
.iz__zeile { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 128px 18px 32px; gap: 18px; align-items: center; padding: 10px 14px 10px 10px; min-height: 84px; text-align: left; border-radius: var(--r); }
.iz__mini img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.iz__text { display: grid; gap: 2px; min-width: 0; }
.iz__name { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.iz__meta { font-size: 14px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iz__tupfer { display: flex; gap: 3px; }
.iz__tupfer i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 23, 26, .15); }
.iz__preis { text-align: right; font-size: 14px; color: var(--leise); white-space: nowrap; }
.iz__preis .preis { font-size: 16px; font-weight: 600; color: var(--text); }
.iz__auf { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--flaeche-2); transition: transform .25s, background .2s; }
.iz__auf .ico { width: 16px; height: 16px; }
.iz__zeile[aria-expanded="true"] .iz__auf { transform: rotate(180deg); background: var(--akzent-hell); }
.iz__inhalt { padding: 0 14px 18px 92px; display: grid; gap: 10px; }
.iz__bild { display: none; margin: 0; }
.iz__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); }
.daten--index { font-size: 14.5px; }
.daten--index th, .daten--index td { padding: 9px 10px 9px 0; }
.daten--index a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.daten--index a:hover { text-decoration: underline; }
.iz-tupfer { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(23, 23, 26, .15); flex: none; }
.index__vorschau { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 14px; justify-items: start; }
.index__vorschau figure { margin: 0; width: 100%; background: var(--flaeche); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sch-2); }
.index__vorschau img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.index__vorschau figcaption { display: grid; gap: 2px; padding: 14px 18px 16px; }
.index__vorschau figcaption b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.index__vorschau figcaption span { font-size: 14px; color: var(--leise); }
.index__fuss { margin-top: 16px; }
@media (max-width: 1100px) { .iz__zeile { grid-template-columns: 56px minmax(0, 1fr) 118px 32px; } .iz__tupfer, .iz__lager { display: none; } .iz__mini img { width: 56px; height: 56px; } }
@media (max-width: 1023px) {
  .index__raster { grid-template-columns: 1fr; }
  .index__vorschau { display: none; }
  .iz__inhalt { padding: 0 10px 18px; }
  .iz__bild { display: block; }
  .iz__tabelle { overflow-x: auto; }
  .daten--index { min-width: 620px; }
}
@media (max-width: 639px) {
  .index { padding: 56px 0 24px; }
  .iz__zeile { grid-template-columns: 52px minmax(0, 1fr) 32px; gap: 12px; padding: 8px; }
  .iz__preis { grid-column: 2; grid-row: 2; text-align: left; margin-top: -6px; }
  .iz__auf { grid-row: 1 / span 2; grid-column: 3; }
  .iz__mini { grid-row: 1 / span 2; }
  .iz__mini img { width: 52px; height: 52px; }
  .iz__name { font-size: 18px; }
  .iz__meta { white-space: normal; }
  .index__sort { width: 100%; overflow-x: auto; } .index__sort button { flex: 1; }
}

/* Daten-Tabellen allgemein */
.daten { font-size: 15px; }
.daten th, .daten td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--linie); }
.daten thead th { font-size: 13px; font-weight: 500; color: var(--leise); }
.daten tbody th { font-size: 14px; font-weight: 500; color: var(--leise); width: 42%; }
.daten tbody tr:last-child th, .daten tbody tr:last-child td { border-bottom: 0; }
.daten caption { text-align: left; padding-bottom: 8px; }
.daten .rechts { text-align: right; }
.daten--gross td { font-size: 16px; }

/* Daten zuerst + Datenblatt */
.daten-zuerst { padding: 80px 0; }
.daten-zuerst__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.daten-zuerst__text { position: sticky; top: calc(var(--kopf-h) + 32px); display: grid; gap: 18px; justify-items: start; }
.daten-zuerst__text h2, .daten-zuerst__text p { margin: 0; }
.datenblatt { background: var(--flaeche); border-radius: var(--r-l); padding: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 36px; box-shadow: var(--sch-2); }
.datenblatt__kopf { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); align-items: end; }
.datenblatt__kopf .mono-etikett { grid-column: 1 / -1; }
.datenblatt__name { margin: 0; font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.datenblatt__kopf .mono { margin: 0; color: var(--leise); font-size: 14px; }
.datenblatt__zeichnung { grid-column: 1; background: var(--flaeche-2); border-radius: var(--r); padding: 12px; }
.datenblatt .daten { grid-column: 2; grid-row: 2 / span 2; font-size: 14px; }
.datenblatt .daten th, .datenblatt .daten td { padding: 7px 10px 7px 0; }
.datenblatt__hinweis { grid-column: 1; font-size: 13px; color: var(--leise); margin: 0; align-self: end; }
.datenblatt--kompakt .daten tr:nth-child(n+11):not(:nth-last-child(-n+2)) { display: none; }
.zeichnung { width: 100%; height: auto; font-family: var(--schrift); }
.z-form { fill: #fff; stroke: var(--text); stroke-width: 1.4; }
.z-achse { stroke: var(--linie-2); stroke-dasharray: 8 3 2 3; stroke-width: 1; }
.z-mass { stroke: var(--text-2); stroke-width: 1; }
.z-pfeil { stroke: var(--text-2); stroke-width: 1.2; }
.z-text { font-size: 13px; fill: var(--text); font-weight: 500; }
.z-fuss { font-size: 10.5px; fill: var(--leise); letter-spacing: .02em; }
.z-schnitt { fill: url(#zs); stroke: var(--text); stroke-width: 1; }
.z-schraff { stroke: var(--text-2); stroke-width: 1; }
@media (max-width: 1023px) { .daten-zuerst__raster { grid-template-columns: 1fr; gap: 32px; } .daten-zuerst__text { position: static; } }
@media (max-width: 760px) { .datenblatt { grid-template-columns: 1fr; padding: 20px; } .datenblatt .daten, .datenblatt__zeichnung, .datenblatt__hinweis { grid-column: 1; grid-row: auto; } .daten-zuerst { padding: 56px 0; } }

/* Profi-Karte (dunkel) */
.profi-abschnitt { padding: 40px 0 0; }
.profi-karte { background: var(--dunkel); color: var(--dunkel-text); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.profi-karte .etikett, .profi-karte .leise { color: var(--dunkel-leise); }
.profi-karte__titel { display: grid; gap: 18px; justify-items: start; }
.profi-karte h2 { color: var(--dunkel-text); margin: 0; }
.profi-karte .lead { color: #D9D7DC; margin: 0; }
.profi-karte__werkzeug { display: grid; gap: 12px; }
.profi-modul { background: var(--dunkel-2); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 12px; }
.profi-karte .preisart { background: #2C2C31; justify-self: start; }
.profi-karte .preisart button { color: var(--dunkel-leise); }
.profi-karte .preisart button[aria-pressed="true"] { background: var(--dunkel-text); color: var(--dunkel); box-shadow: none; }
.profi-karte .preisart button[data-preisart="netto"][aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }
.profi-modul__bsp { margin: 0; font-size: 14.5px; color: var(--dunkel-leise); }
.profi-modul__bsp .preis { color: var(--dunkel-text); font-weight: 600; font-size: 16px; }
.staffel-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.staffel-reihe div { background: #2A2A2F; border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.staffel-reihe b { font-size: 24px; font-weight: 500; color: var(--akzent); letter-spacing: -.02em; white-space: nowrap; }
.staffel-reihe span { font-size: 13.5px; color: var(--dunkel-leise); }
.schnell-mini__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 10px; align-items: end; }
.profi-karte .feld__etikett { color: var(--dunkel-leise); }
.profi-karte .feld input { background: #2A2A2F; border-color: #3B3B41; color: var(--dunkel-text); }
.profi-karte .feld input::placeholder { color: #8C8A91; }
.profi-karte .feld input:focus { border-color: var(--akzent); }
.schnell-mini__ergebnis { margin: 0; min-height: 1.4em; color: var(--dunkel-leise); font-size: 14px; }
.schnell-mini__ergebnis b { color: var(--dunkel-text); }
.schnell-mini__ergebnis a { color: var(--akzent); }
@media (max-width: 1023px) { .profi-karte { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 639px) { .schnell-mini__zeile { grid-template-columns: 1fr 88px; } .schnell-mini__zeile .knopf { grid-column: 1 / -1; } .staffel-reihe b { font-size: 18px; } .staffel-reihe div { padding: 10px; } .profi-karte { border-radius: 24px; } }

/* Herstellung */
.herstellung { padding: 40px 0 72px; --film-schrift: 'General Sans', sans-serif; --film-grund: #FFFFFF; --film-linie: #17171A; --film-akzent: #F08119; --film-text: #17171A; }
.herstellung__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
.herstellung__clip-rahmen { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sch-2); background: #2b2622; }
.herstellung__clip { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.herstellung__film { min-height: 360px; border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); padding: 8px 18px 18px; overflow: hidden; }
@media (max-width: 1023px) { .herstellung__raster { grid-template-columns: 1fr; } .herstellung__clip { aspect-ratio: 16 / 9; min-height: 0; } }

/* Service */
.service { padding: 64px 0 80px; }
.service__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.service__plz { display: grid; gap: 16px; align-content: start; background: var(--flaeche); border-radius: var(--r-l); padding: clamp(22px, 3vw, 36px); box-shadow: var(--sch-2); }
.service__plz h2, .service__plz p { margin: 0; }
.plz-gross { display: grid; grid-template-columns: minmax(0, 220px) auto; gap: 10px; align-items: stretch; justify-content: start; }
.plz-gross input { min-height: 56px; font-size: 22px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.plz-gross .knopf { min-height: 56px; }
.plz-gross .plz-pruefer__ergebnis { grid-column: 1 / -1; margin-top: 4px; }
.plz-pruefer__ergebnis { font-size: 15px; margin: 0; color: var(--text-2); }
.plz-pruefer__ergebnis b { font-weight: 600; color: var(--text); }
.plz-pruefer__ergebnis.fehler { color: var(--rot); }
.ampel-liste { display: grid; gap: 0; }
.ampel-liste li { display: grid; grid-template-columns: 18px 180px 1fr; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.ampel-liste b { font-weight: 600; }
.ampel-liste span:not(.lager) { color: var(--leise); }
.ampel-liste--gross li { grid-template-columns: 18px 220px 1fr auto; }
.service__liste { display: grid; gap: 8px; }
.dienst { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; grid-template-areas: 'i t w p' 'i m m p'; gap: 2px 14px; padding: 16px 18px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); text-decoration: none; align-items: center; transition: box-shadow .2s, transform .2s var(--weich); }
.dienst:hover { box-shadow: var(--sch-2); transform: translateY(-1px); }
.dienst__ico { grid-area: i; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--flaeche-2); color: var(--text-2); }
.dienst__t { grid-area: t; font-size: 18px; font-weight: 600; letter-spacing: -.012em; }
.dienst__m { grid-area: m; color: var(--leise); font-size: 14.5px; }
.dienst__w { grid-area: w; font-size: 13px; font-weight: 500; background: var(--flaeche-2); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.dienst__pfeil { grid-area: p; width: 18px; height: 18px; color: var(--leise); transition: transform .2s, color .2s; }
.dienst:hover .dienst__pfeil { transform: translateX(3px); color: var(--akzent); }
.herkunft__in { display: flex; gap: 24px; align-items: center; padding-block: 28px; flex-wrap: wrap; border-top: 1px solid var(--linie); }
.herkunft__in p { margin: 0; flex: 1; min-width: 260px; font-size: 16px; color: var(--text-2); }
.herkunft__in img { width: 110px; }
@media (max-width: 1023px) { .service__raster { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .service { padding: 40px 0 56px; } .plz-gross { grid-template-columns: 1fr auto; } .ampel-liste li, .ampel-liste--gross li { grid-template-columns: 18px 1fr; } .ampel-liste li > span:not(.lager) { grid-column: 2; } .dienst { grid-template-areas: 'i t p' 'i m p' 'i w p'; grid-template-columns: 44px minmax(0, 1fr) 20px; } .dienst__w { justify-self: start; margin-top: 4px; } }

/* Fuß */
.fuss { background: var(--dunkel); color: var(--dunkel-text); padding: 56px 0 36px; margin-top: 24px; }
.fuss a { text-decoration: none; color: var(--dunkel-text); }
.fuss a:hover { text-decoration: underline; }
.fuss .mono-etikett { color: var(--dunkel-leise); margin-bottom: 12px; }
.fuss__kopf { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--dunkel-linie); }
.fuss__wort { margin: 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.fuss__claim { margin: 0; color: var(--dunkel-leise); max-width: 30ch; font-size: 15px; }
.fuss__spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px 0; }
.fuss__spalte li { padding: 4px 0; font-size: 15px; }
.fuss__spalte .leise { color: var(--dunkel-leise); }
.fuss__unten { border-top: 1px solid var(--dunkel-linie); padding-top: 20px; display: grid; gap: 4px; font-size: 13px; color: var(--dunkel-leise); }
.fuss__unten p { margin: 0; }
.fuss__demo b { color: var(--akzent); font-weight: 600; }
@media (max-width: 760px) { .fuss__kopf { grid-template-columns: 1fr; } .fuss__spalten { grid-template-columns: 1fr 1fr; } }

/* ═════════ SHOP ═════════ */
.shop-kopf { padding-bottom: 8px; }
.shop-kopf__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 560px); gap: 16px 48px; align-items: end; margin: 8px 0 14px; }
.shop-kopf__links { display: grid; gap: 10px; }
.shop-kopf h1 { margin: 0; }
.shop-kopf__intro { color: var(--leise); max-width: 62ch; margin: 0; font-size: 15.5px; }
.satz { display: grid; gap: 8px; background: var(--flaeche); border-radius: var(--r-l); padding: 14px 14px 8px; box-shadow: var(--sch-2); }
.satz label { color: var(--text-2); font-size: 14px; font-weight: 500; display: flex; gap: 8px; align-items: center; }
.satz label .ico { width: 16px; height: 16px; color: var(--akzent); }
.satz__zeile { display: flex; gap: 8px; }
.satz input { min-height: 50px; background: var(--flaeche-2); border-color: var(--linie); }
.satz .knopf { min-height: 50px; padding: 0 16px; border-radius: 12px; }
.satz__verstanden { min-height: 1.3em; display: flex; flex-wrap: wrap; gap: 6px; color: var(--leise); font-size: 13.5px; }
.kat-reiter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--rand) * -1); padding: 2px var(--rand) 4px; }
.kat-reiter::-webkit-scrollbar { display: none; }
.kat-reiter button { flex: none; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; background: transparent; transition: background .2s, color .2s; }
.kat-reiter button:hover { background: var(--flaeche-2); color: var(--text); }
.kat-reiter button[aria-pressed="true"] { background: var(--text); color: #fff; }
.kat-reiter [data-kat-n] { opacity: .6; font-weight: 400; margin-left: 2px; }
@media (max-width: 1023px) { .shop-kopf__raster { grid-template-columns: 1fr; } }

/* Filterkarte (alle Filter auf einen Blick) */
.shop-filter { padding-top: 6px; }
.fm { background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--sch-2); }
.fm__spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 36px; padding: 8px 22px 10px; }
.fm__zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--linie); }
.fm__spalte .fm__zeile:last-child { border-bottom: 0; }
.fm__spalte + .fm__spalte .fm__zeile { grid-template-columns: 114px minmax(0, 1fr); }
.fm__etikett { font-size: 13.5px; font-weight: 500; color: var(--leise); }
.fm__werte { display: flex; flex-wrap: wrap; gap: 5px; }
.fs { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid transparent; font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: background .15s, color .15s, border-color .15s; }
.fs:hover { border-color: var(--linie-2); color: var(--text); }
.fs[aria-pressed="true"] { background: var(--text); color: #fff; }
.fs[disabled] { opacity: .38; cursor: default; }
.fs__n { color: var(--leise); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.fs[aria-pressed="true"] .fs__n { color: #C9C8CD; }
.fs__farbe { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 23, 26, .18); }
.fs__farbe--bunt { background: conic-gradient(#4B78A8 0 25%, #C9922E 0 50%, #6E9C7E 0 75%, #B85A4A 0); }
.fs__form svg { width: 24px; height: 17px; fill: #fff; stroke: currentColor; stroke-width: 1.2; }
.seg--fm { background: var(--flaeche-2); padding: 3px; gap: 2px; }
.seg--fm .fs { min-height: 32px; background: transparent; }
.seg--fm .fs[aria-pressed="true"] { background: var(--text); color: #fff; }
.preisregler { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: 100%; }
.preisregler__spur { position: relative; flex: 1; min-width: 160px; height: 36px; }
.preisregler__spur::before { content: ''; position: absolute; left: 0; right: 0; top: 16px; height: 4px; border-radius: 4px; background: var(--flaeche-3); }
.preisregler__band { position: absolute; top: 16px; height: 4px; border-radius: 4px; background: var(--text); }
.preisregler input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 36px; }
.preisregler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--text); box-shadow: var(--sch-1); cursor: grab; }
.preisregler input[type=range]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--text); cursor: grab; }
.preisregler input[type=range]::-webkit-slider-runnable-track { background: none; }
.preisregler input[type=range]:focus-visible { outline: none; }
.preisregler input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); border-color: var(--akzent); }
.preisregler__wert { font-size: 14px; font-weight: 600; min-width: 110px; font-variant-numeric: tabular-nums; }
.fm__blattkopf, .fm__blattfuss { display: none; }
@media (max-width: 1100px) { .fm__spalten { grid-template-columns: 1fr; } .fm__spalte + .fm__spalte .fm__zeile:first-child { border-top: 1px solid var(--linie); } }

/* Ergebnis-Leiste */
.ergebnis-leiste { position: sticky; top: var(--kopf-h); z-index: 30; background: var(--bg); margin-top: 8px; }
.ergebnis-leiste__in { display: flex; align-items: center; gap: 16px; min-height: 64px; padding-block: 10px; }
.ergebnis-zahl { margin: 0; white-space: nowrap; font-size: 15px; color: var(--leise); }
.ergebnis-zahl b { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--text); margin-right: 2px; font-variant-numeric: tabular-nums; }
.etiketten { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; align-items: center; }
.etikett-weg, .etiketten .etikett { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px 0 13px; border-radius: 999px; background: var(--flaeche); box-shadow: var(--sch-1); color: var(--text); font-size: 13.5px; font-weight: 500; }
.etiketten .etikett .ico { width: 14px; height: 14px; color: var(--leise); }
.etiketten .etikett:hover .ico { color: var(--text); }
.etiketten .textknopf { min-height: 34px; font-size: 14px; }
.ergebnis-leiste__rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sortierung { position: relative; display: inline-flex; align-items: center; }
.sortierung select { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 0 36px 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.sortierung .ico { position: absolute; right: 12px; width: 16px; height: 16px; pointer-events: none; }
.ansicht .ico { width: 16px; height: 16px; }
.filter-oeffnen { display: none; }
.filter-oeffnen__n { background: var(--akzent); color: var(--auf-akzent); padding: 0 7px; border-radius: 999px; font-size: 12px; }

/* Shop-Raster */
.shop-ergebnis { padding-top: 8px; padding-bottom: 64px; }
.wand--shop, .wand--klein { gap: 20px 16px; }
.wand--shop { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.wand--klein { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.karte { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); transition: box-shadow .25s, background .25s; }
.karte:hover { background: var(--flaeche); box-shadow: var(--sch-2); }
.karte__link { position: relative; display: block; text-decoration: none; }
.karte__bild { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--flaeche-2); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--weich); }
.karte:hover .karte__bild .kachel-bild { transform: scale(1.04); }
.karte__raum { position: absolute; inset: 0; display: none; }
.karte__raumhinweis { display: none; position: absolute; left: 8px; bottom: 8px; background: var(--flaeche); padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.wand--shop[data-ansicht="raum"] .karte__bild { aspect-ratio: 4 / 3; }
.wand--shop[data-ansicht="raum"] .karte__raum { display: block; }
.wand--shop[data-ansicht="raum"] .karte__raumhinweis { display: block; }
.karte__oben { position: absolute; left: 0; top: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 8px; gap: 6px; pointer-events: none; font-size: 12px; }
.karte__oben > span:first-child { background: rgba(255, 255, 255, .94); padding: 3px 9px; border-radius: 999px; font-weight: 500; color: var(--text-2); }
.karte__text { padding: 12px 10px 4px; display: grid; gap: 3px; flex: 1; align-content: start; }
.karte__name { font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.karte__name a { text-decoration: none; }
.karte__name a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }
.karte__meta { margin: 0; color: var(--leise); font-size: 13.5px; }
.karte__preis { margin: 4px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.karte__preis .preis { font-size: 16px; font-weight: 600; }
.karte__aktionen { position: relative; z-index: 1; display: flex; gap: 4px; padding: 4px 6px 8px; }
.karte__aktionen .mini { flex: 1; justify-content: center; background: var(--flaeche-2); }
.karte__aktionen .mini:hover { background: var(--flaeche-3); }
.karte__aktionen .mini[aria-pressed="true"] { background: var(--akzent-hell); }
.karte.im-vergleich { box-shadow: 0 0 0 2px var(--akzent), var(--sch-2); background: var(--flaeche); }
.karte--musterbox { background: var(--dunkel); color: var(--dunkel-text); padding: 22px; gap: 14px; justify-content: space-between; border-radius: var(--r-l); }
.karte--musterbox:hover { background: var(--dunkel); }
.karte--musterbox .mono-etikett { color: var(--dunkel-leise); }
.karte--musterbox p { margin: 0; font-size: 15px; color: #D9D7DC; }
.karte--musterbox .d3 { font-size: clamp(24px, 2vw, 30px); color: var(--dunkel-text); }
.karte--musterbox .knopf { align-self: flex-start; }
.wand--shop[data-ansicht="liste"] { display: none; }
.musterbox-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.musterbox-slots i { aspect-ratio: 1; border-radius: 8px; border: 1px dashed #55545A; background-size: cover; background-position: center; }
.musterbox-slots i.voll { border: 0; }
.shop-fuss { margin-top: 20px; font-size: 13.5px; }
.leer { padding: 48px 0; display: grid; gap: 12px; justify-items: start; }
.leer p { margin: 0; }
.leer__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

/* Liste mit Daten */
.lt-rahmen { overflow-x: auto; border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); }
.lt { font-size: 14.5px; min-width: 1180px; }
.lt th, .lt td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; white-space: nowrap; }
.lt thead th { position: sticky; top: 0; background: var(--flaeche); font-size: 13px; font-weight: 500; color: var(--leise); }
.lt thead button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font: inherit; color: inherit; }
.lt thead button .ico { width: 14px; height: 14px; opacity: .35; transition: transform .2s; }
.lt thead button[aria-sort="ascending"] .ico { opacity: 1; transform: rotate(180deg); }
.lt thead button[aria-sort="descending"] .ico { opacity: 1; }
.lt thead button[aria-sort]:not([aria-sort="none"]) { color: var(--text); }
.lt thead .ico { width: 16px; height: 16px; }
.lt tbody tr:hover { background: var(--flaeche-2); }
.lt tbody tr:last-child td, .lt tbody tr:last-child th { border-bottom: 0; }
.lt tbody tr.im-vergleich { background: var(--akzent-hell); }
.lt__name { position: sticky; left: 0; background: inherit; z-index: 1; }
.lt tbody tr { background: var(--flaeche); }
.lt__name a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; }
.lt__name a:hover span { text-decoration: underline; }
.lt__name img { width: 40px; height: 40px; flex: none; border-radius: 8px; }
.lt .preis { font-weight: 600; }
.kasten { display: inline-grid; place-items: center; width: 40px; height: 40px; cursor: pointer; }
.kasten input { width: 18px; height: 18px; accent-color: var(--akzent); cursor: pointer; }
.lt--druck { min-width: 1000px; font-size: 13.5px; }
.lt--druck th[scope="row"] a { text-decoration: none; font-weight: 600; }

@media (max-width: 760px) {
  .ergebnis-leiste__in { flex-wrap: wrap; gap: 8px 10px; min-height: 0; }
  .etiketten { order: 5; flex-basis: 100%; }
  .etiketten:empty { display: none; }
  .filter-oeffnen { display: inline-flex; }
  .ansicht span { display: none; }
  .ansicht > button { padding: 0 12px; min-height: 40px; }
  .sortierung select { min-height: 44px; max-width: 160px; }
  .ergebnis-zahl b { font-size: 22px; }
  .fm { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; max-height: 86vh; overflow: auto; border-radius: 24px 24px 0 0; box-shadow: var(--sch-3); transform: translateY(105%); transition: transform .3s var(--weich); visibility: hidden; }
  .fm.offen { transform: none; visibility: visible; }
  .fm__blattkopf { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--rand); position: sticky; top: 0; background: var(--flaeche); border-bottom: 1px solid var(--linie); z-index: 1; }
  .fm__blattkopf .d4 { margin: 0; }
  .fm__blattfuss { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: var(--flaeche); border-top: 1px solid var(--linie); }
  .fm__spalten { padding: 0 var(--rand); }
  .fm__zeile { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
  .fs, .seg--fm .fs { min-height: 44px; }
  .shop-filter { padding: 0; }
  .wand--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .karte__name { font-size: 15.5px; }
  .karte__text { padding: 10px 4px 2px; }
  .karte__aktionen { padding: 4px 0 6px; }
  .karte__aktionen .mini { padding: 0 6px; gap: 4px; font-size: 12.5px; min-height: 44px; }
  .karte--musterbox { grid-column: 1 / -1; }
  .lt-rahmen { margin-inline: calc(var(--rand) * -1); border-radius: 0; }
}
.blatt-schleier { position: fixed; inset: 0; z-index: 79; background: rgba(23, 23, 26, .4); }

/* Vergleichsleiste */
.vergleichsleiste { position: fixed; left: 50%; bottom: 16px; z-index: 50; transform: translateX(-50%); width: min(880px, calc(100vw - 32px)); background: var(--dunkel); color: var(--dunkel-text); border-radius: 20px; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; box-shadow: var(--sch-3); }
.vergleichsleiste__titel { font-size: 13.5px; white-space: nowrap; color: var(--dunkel-leise); }
.vergleichsleiste__titel b { color: var(--akzent); font-size: 18px; }
.vergleichsleiste__plaetze { display: flex; gap: 6px; flex: 1; min-width: 0; }
.vergleichsleiste__platz { position: relative; display: flex; align-items: center; gap: 8px; border-radius: 12px; background: #2A2A2F; padding: 4px 30px 4px 4px; min-width: 0; max-width: 220px; flex: 1; font-size: 13.5px; font-weight: 500; }
.vergleichsleiste__platz img { width: 36px; height: 36px; flex: none; border-radius: 8px; }
.vergleichsleiste__platz span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vergleichsleiste__platz button { position: absolute; right: 2px; top: 0; bottom: 0; width: 28px; display: grid; place-items: center; color: var(--dunkel-leise); }
.vergleichsleiste__platz button .ico { width: 14px; height: 14px; }
.vergleichsleiste__platz--leer { background: transparent; border: 1px dashed #4A4A50; color: #8C8A91; font-size: 12.5px; justify-content: center; padding: 4px; min-height: 46px; }
.vergleichsleiste .knopf { min-height: 46px; }
.vergleichsleiste .textknopf { color: var(--dunkel-leise); font-size: 13.5px; }
@media (max-width: 639px) {
  .vergleichsleiste { bottom: calc(70px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; padding: 10px; }
  .vergleichsleiste__plaetze { order: 3; flex-basis: 100%; }
  .vergleichsleiste__platz--leer { display: none; }
  .vergleichsleiste .knopf { margin-left: auto; min-height: 44px; padding: 0 14px; }
}

/* ═════════ PRODUKT ═════════ */
.produkt__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; padding: 16px 0 72px; }
.produkt__bilder { position: sticky; top: calc(var(--kopf-h) + 16px); }
.galerie { background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--sch-2); overflow: hidden; }
.galerie .reiter { display: flex; gap: 4px; padding: 10px; }
.galerie .reiter button { flex: 1; min-height: 42px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.galerie .reiter button:hover { background: var(--flaeche-2); }
.galerie .reiter button[aria-selected="true"] { background: var(--text); color: #fff; }
.galerie__buehne { position: relative; background: var(--flaeche-2); margin: 0 10px 10px; border-radius: var(--r); overflow: hidden; }
.galerie--zubehoer .galerie__buehne { aspect-ratio: 1; display: grid; place-items: center; margin: 10px; }
.galerie__feld { min-height: 360px; display: grid; place-items: center; }
.galerie__feld > img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.galerie__feld--frei { padding: 48px; }
.galerie__feld--frei > img { max-width: 520px; }
.galerie__raeume { display: grid; gap: 6px; width: 100%; }
.galerie__raeume figure { position: relative; margin: 0; }
.galerie__raeume img { width: 100%; }
.galerie__feld--verlegt { display: block; }
.verlegt { width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--flaeche-3); }
.verlegt__steuer { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px; background: var(--flaeche); }
.verlegt__steuer p { margin: 0; font-size: 13px; color: var(--leise); }
.fugen-tupfer { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(23, 23, 26, .2); }
.fugen-tupfer--hell { background: #E2DED5; } .fugen-tupfer--grau { background: #A09C94; } .fugen-tupfer--dunkel { background: #4A4844; }
.produkt__kauf { display: grid; gap: 20px; }
.produkt__vor { gap: 6px 14px; }
.produkt__titel { margin: 0; display: grid; gap: 6px; overflow-wrap: anywhere; hyphens: auto; }
.produkt__format { font-size: clamp(16px, 1.3vw, 19px); font-weight: 400; letter-spacing: 0; color: var(--leise); }
.produkt__kurz { margin: 0; font-size: 17px; color: var(--text-2); max-width: 48ch; }
.preisblock { background: var(--flaeche); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 4px; box-shadow: var(--sch-1); }
.preisblock p { margin: 0; }
.preisblock__haupt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.preis--gross { font-size: clamp(32px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.preisblock__einheit { font-size: 15px; color: var(--leise); }
.preisblock__neben { font-size: 14px; color: var(--leise); }
.preisblock__neben .preis { color: var(--text); font-weight: 600; }
.preisblock__beispiel { font-size: 12.5px; color: var(--leise); }
.preisblock__staffel { font-size: 13.5px; background: var(--akzent-hell); padding: 7px 11px; border-radius: 10px; margin-top: 6px !important; }
.produkt__lager { margin: 0; font-size: 15px; }
.kenndaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kenndaten div { padding: 12px 14px; border-radius: 12px; background: var(--flaeche); box-shadow: var(--sch-1); display: grid; gap: 2px; }
.kenndaten dt { font-size: 13px; }
.kenndaten dd { font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mengenblock { background: var(--flaeche); border-radius: var(--r-l); padding: 22px; display: grid; gap: 14px; box-shadow: var(--sch-2); }
.mengenblock__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mengenblock__kopf h2 { display: flex; gap: 8px; align-items: center; }
.mengenblock__kopf h2 .ico { color: var(--akzent); }
.mengenblock__felder { display: grid; gap: 10px; }
.mengenblock__felder--drei { grid-template-columns: repeat(3, 1fr); }
.verschnitt { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.verschnitt .feld__hilfe { margin: 0; font-size: 13.5px; }
.daten--ergebnis { font-size: 15px; }
.daten--ergebnis th { width: 52%; font-size: 14px; }
.daten--ergebnis td { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.daten--ergebnis tr.hervor td { font-weight: 600; font-size: 16.5px; }
.daten--ergebnis tr.hervor th { color: var(--text); }
.staffel-hinweis { margin: 8px 0 0; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: var(--akzent-hell); }
.mengenblock--zubehoer { grid-template-columns: auto 1fr; align-items: center; }
.stepper { display: inline-flex; align-items: center; border-radius: 999px; background: var(--flaeche-2); padding: 3px; }
.stepper button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; }
.stepper button:hover { background: var(--flaeche); }
.stepper input { width: 60px; min-height: 40px; padding: 0; text-align: center; border: 0; background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; }
.produkt__aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.produkt__aktionen .knopf { justify-content: flex-start; padding: 0 16px; font-size: 14.5px; }
.produkt__aktionen .knopf[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-hell); }
.plz-pruefer { display: grid; gap: 8px; padding-top: 4px; }
.plz-pruefer__zeile { display: flex; gap: 8px; }
.plz-pruefer__zeile input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.plz-pruefer .knopf { min-height: 48px; }
@media (max-width: 1023px) { .produkt__raster { grid-template-columns: 1fr; gap: 28px; } .produkt__bilder { position: static; } }
@media (max-width: 639px) { .galerie { margin-inline: calc(var(--rand) * -1); border-radius: 0; } .galerie__feld { min-height: 0; } .kenndaten { grid-template-columns: 1fr 1fr; } .produkt__aktionen { grid-template-columns: 1fr; } .mengenblock { padding: 18px; } .mengenblock__felder--drei { grid-template-columns: 1fr 1fr; } }

.produkt-daten { padding: 64px 0; }
.produkt-daten__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.produkt-daten__raster > div { display: grid; gap: 16px; align-content: start; justify-items: start; }
.produkt-daten__raster > div p { margin: 0; }
.produkt-daten .daten--gross { background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--sch-2); }
.produkt-daten .daten--gross th { padding-left: 22px; }
.produkt-daten .daten--gross td { padding-right: 22px; }
.produkt-text { padding: 32px 0 64px; }
.produkt-text__raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); gap: 48px; }
.produkt-text__fliess p { max-width: 62ch; }
.eigenschaften { display: grid; gap: 8px; align-content: start; }
.eigenschaften li { display: flex; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--flaeche); box-shadow: var(--sch-1); font-size: 15px; }
.eigenschaften .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--akzent); }
.badboden { padding: 12px 16px; border-radius: 12px; background: var(--flaeche-2); }
@media (max-width: 1023px) { .produkt-daten__raster, .produkt-text__raster { grid-template-columns: 1fr; gap: 24px; } }
.gegenstueck__in { padding-block: 16px 40px; display: grid; gap: 12px; }
.gegenstueck__link { display: grid; grid-template-columns: 112px 1fr auto; gap: 20px; align-items: center; text-decoration: none; background: var(--flaeche); border-radius: var(--r-l); padding: 12px 22px 12px 12px; box-shadow: var(--sch-1); transition: box-shadow .2s; }
.gegenstueck__link:hover { box-shadow: var(--sch-2); }
.gegenstueck__link img { width: 112px; height: 112px; border-radius: var(--r); }
.gegenstueck__link > span { display: grid; gap: 4px; }
.gegenstueck__link .mono { color: var(--leise); }
.verwandt, .zubehoer-liste, .in-looks { padding: 48px 0; }
.verwandt h2, .zubehoer-liste h2, .in-looks h2 { margin-bottom: 24px; }
.zeilenliste { display: grid; gap: 8px; }
.zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); }
.zeile__bild img { width: 64px; height: 64px; border-radius: 12px; }
.zeile__text { display: grid; gap: 2px; min-width: 0; }
.zeile__name { padding: 12px 0; margin: -12px 0; font-size: 16.5px; font-weight: 600; text-decoration: none; }
.zeile__name:hover { text-decoration: underline; }
.zeile__preis .preis { font-size: 15px; font-weight: 600; }
.zeilenliste--kompakt .zeile { grid-template-columns: 56px minmax(0, 1fr); }
.zeilenliste--kompakt .zeile__bild img { width: 56px; height: 56px; }
@media (max-width: 639px) { .zeile { grid-template-columns: 56px minmax(0, 1fr); } .zeile__bild { grid-row: span 2; } .zeile__bild img { width: 56px; height: 56px; } .zeile__preis, .zeile .knopf { grid-column: 2; justify-self: start; } }
.look-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.look-mini { display: grid; gap: 6px; text-decoration: none; }
.look-mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.look-mini:hover .d4 { text-decoration: underline; }

/* Dialog */
.dialog { border: 0; padding: 0; max-width: min(1080px, 96vw); width: 100%; max-height: 92vh; border-radius: var(--r-l); background: var(--bg); color: var(--text); box-shadow: var(--sch-3); }
.dialog::backdrop { background: rgba(23, 23, 26, .55); }
.dialog__kopf { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 10px 24px; background: var(--bg); border-bottom: 1px solid var(--linie); }
.dialog__knoepfe { display: flex; gap: 6px; align-items: center; }
.dialog .datenblatt { margin: 16px; box-shadow: none; }

/* ═════════ weitere Seiten ═════════ */
.seitenkopf { padding-bottom: 36px; }
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); justify-content: space-between; gap: 16px 48px; align-items: end; margin-top: 18px; }
.seitenkopf h1 { margin: 0; }
.seitenkopf .lead { margin: 0; }
@media (max-width: 1023px) { .seitenkopf__raster { grid-template-columns: 1fr; } }
.demo-hinweis { background: var(--akzent-hell); padding: 10px 14px; border-radius: 12px; font-size: 14px; margin: 0; }

/* Raumstudio */
.rs { padding: 4px 0 72px; }
.rs__raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 28px; align-items: start; }
.rs__links { display: grid; gap: 12px; position: sticky; top: calc(var(--kopf-h) + 16px); }
.rs__modus { justify-self: start; }
.rs__buehne-rahmen { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--flaeche-2); box-shadow: var(--sch-2); }
.rs__buehne { position: relative; width: 100%; min-height: 200px; --kt-rs-akzent: #F08119; --kt-rs-linie: #F08119; --kt-rs-marke-grund: #17171A; --kt-rs-marke-text: #F2F0EC; --kt-rs-fokus: #F08119; }
.rs__lade { position: absolute; left: 14px; top: 14px; margin: 0; background: var(--flaeche); padding: 5px 12px; border-radius: 999px; font-size: 13px; }
.rs__menge { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); min-height: 64px; }
.rs__menge p { margin: 0; font-size: 15px; }
.rs__hinweis { font-size: 13.5px; margin: 0; }
.rs__steuer { display: grid; gap: 0; border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); overflow: hidden; }
.rs__gruppe { padding: 16px 18px; border-bottom: 1px solid var(--linie); display: grid; gap: 10px; }
.rs__gruppe:last-child { border-bottom: 0; }
.rs__raeume { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rs-raum { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--flaeche-2); font-size: 15px; font-weight: 500; text-align: left; }
.rs-raum .mono { font-size: 12px; color: var(--leise); }
.rs-raum:hover { background: var(--flaeche-3); }
.rs-raum[aria-pressed="true"] { background: var(--text); color: #fff; }
.rs-raum[aria-pressed="true"] .mono { color: var(--akzent); }
.rs__suche { position: relative; display: block; }
.rs__suche .ico { position: absolute; left: 12px; top: 14px; width: 17px; height: 17px; color: var(--leise); }
.rs__suche input { padding-left: 38px; min-height: 46px; font-size: 15px; }
.rs__fliesen { max-height: 340px; overflow: auto; display: grid; gap: 2px; }
.rs__fliesen li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 8px 5px 5px; border-radius: 12px; cursor: pointer; min-height: 50px; }
.rs__fliesen li:hover { background: var(--flaeche-2); }
.rs__fliesen li[aria-selected="true"] { background: var(--akzent-hell); }
.rs__fliesen img { width: 40px; height: 40px; border-radius: 8px; }
.rs__fliesen b { display: block; font-size: 14.5px; font-weight: 600; }
.rs__fliesen small { font-size: 12.5px; color: var(--leise); }
.rs__fliesen .preis { font-size: 13px; font-weight: 600; }
.rs__mm { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; color: var(--leise); }
.rs__mm input { accent-color: var(--akzent); }
.rs__aktionen { grid-template-columns: 1fr 1fr; }
.rs__aktionen .knopf { font-size: 14px; padding: 0 12px; }
.rs__aktionen .knopf[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-hell); }
.rs__aktionen #rs-bild { grid-column: 1 / -1; }
.rs__schritte { display: grid; gap: 6px; font-size: 14px; }
.rs__schritte li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; }
.rs__schritte .mono { background: var(--akzent-hell); color: var(--akzent-text); text-align: center; height: 22px; line-height: 22px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.rs__datei { position: relative; justify-self: start; cursor: pointer; }
.rs__masse { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs__fehler { color: var(--rot); }
.rs__ki-text { margin: 0; font-size: 14px; }
@media (max-width: 1023px) { .rs__raster { grid-template-columns: 1fr; } .rs__links { position: static; } }
@media (max-width: 639px) { .rs__buehne-rahmen { margin-inline: calc(var(--rand) * -1); border-radius: 0; } .rs__steuer { border-radius: 20px; } .rs__gruppe { padding: 14px; } }

/* Looks */
.look-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
.look-index a { display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 8px 14px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); text-decoration: none; font-size: 15px; font-weight: 500; }
.look-index a span:first-child { color: var(--akzent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.look-index .ico { margin-left: auto; width: 16px; height: 16px; color: var(--leise); }
.look-index a:hover { box-shadow: var(--sch-2); }
@media (max-width: 760px) { .look-index { grid-template-columns: 1fr; } }
.looks { padding-bottom: 72px; }
.look { padding: 48px 0; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + 8px); }
.look:target .look__nr { background: var(--akzent); color: var(--auf-akzent); }
.look__kopf { display: grid; gap: 8px; margin-bottom: 24px; }
.look__nr { font-size: 13.5px; font-weight: 600; justify-self: start; padding: 3px 11px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent-text); }
.look__kopf .mono { margin: 0; color: var(--leise); }
.look__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.look__bild { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; }
.look__bild img { width: 100%; }
.hotspot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 44px; min-height: 44px; justify-content: center; }
.hotspot__punkt { width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(240, 129, 25, .25), var(--sch-2); flex: none; }
.hotspot__text { position: absolute; left: 36px; background: var(--flaeche); color: var(--text); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: var(--sch-2); }
.hotspot:hover .hotspot__text, .hotspot:focus-visible .hotspot__text { opacity: 1; transform: none; }
.look__text { display: grid; gap: 16px; }
.look__text p { margin: 0; }
.daten--look { background: var(--flaeche); border-radius: var(--r); box-shadow: var(--sch-1); }
.daten--look td, .daten--look th { padding: 11px 10px; }
.daten--look caption { padding-left: 0; }
.daten--look thead th { width: auto; }
.look__zub { font-size: 15px; }
.look__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1023px) { .look__raster { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .look__bild { margin-inline: calc(var(--rand) * -1); border-radius: 0; } .hotspot__text { display: none; } }

/* Musterbox */
.musterseite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding-top: 4px; padding-bottom: 72px; align-items: start; }
.musterseite__box { border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); padding: 22px; display: grid; gap: 16px; position: sticky; top: calc(var(--kopf-h) + 16px); }
.musterbox { display: grid; gap: 6px; }
.musterbox li { display: grid; grid-template-columns: 26px 64px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 6px; border-radius: 14px; background: var(--flaeche-2); min-height: 76px; }
.musterbox li .mono:first-child { width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); text-align: center; line-height: 24px; font-weight: 600; font-size: 12.5px; }
.musterbox li.leer-platz { background: transparent; border: 1px dashed var(--linie-2); color: var(--leise); }
.musterbox li.leer-platz .mono:first-child { background: var(--flaeche-2); color: var(--leise); }
.musterbox li.leer-platz i { width: 64px; height: 64px; border-radius: 10px; background: var(--flaeche-2); display: block; }
.musterbox img { width: 64px; height: 64px; border-radius: 10px; }
.musterbox a { text-decoration: none; font-size: 16px; font-weight: 600; }
.musterbox small { display: block; font-size: 13px; color: var(--leise); }
.musterseite__summe .daten td { text-align: right; }
.schritte-liste, .nummernliste { display: grid; gap: 10px; }
.schritte-liste li, .nummernliste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 18px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); }
.schritte-liste li > .mono, .nummernliste li > .mono { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--akzent-hell); color: var(--akzent-text); font-size: 14px; font-weight: 600; }
.schritte-liste p, .nummernliste p { margin: 0; color: var(--leise); grid-column: 2; max-width: 60ch; }
.nummernliste .preis-zeile { grid-column: 2; font-size: 14px; font-weight: 600; color: var(--akzent-text); }
.nummernliste--drei { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.musterseite__info { display: grid; gap: 28px; }
.wand--auswahl { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.wk--wahl { cursor: pointer; padding: 0; }
.wk--wahl[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--akzent); }
.wk--wahl[aria-pressed="true"]::after { content: ''; position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171A' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 1023px) { .musterseite { grid-template-columns: 1fr; } .musterseite__box { position: static; } .nummernliste--drei { grid-template-columns: 1fr; } }

/* Vergleich */
.vergleichseite { padding-top: 4px; padding-bottom: 72px; }
.vergleichseite__werkzeug { display: flex; justify-content: space-between; margin-bottom: 16px; }
.schalter { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 500; }
.schalter input { width: 20px; height: 20px; accent-color: var(--akzent); }
.vergleich-rahmen { overflow-x: auto; }
.vt { min-width: 720px; table-layout: fixed; background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--sch-2); overflow: hidden; }
.vt th, .vt td { padding: 13px 16px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; font-size: 15px; }
.vt thead th { vertical-align: bottom; }
.vt tbody th { font-size: 14px; font-weight: 500; color: var(--leise); width: 190px; }
.vt .anders td { background: var(--akzent-hell); }
.vt .anders th::after { content: ' ≠'; color: var(--akzent-text); font-weight: 600; }
.vt__kopf { display: grid; gap: 8px; }
.vt__kopf img { width: 100%; max-width: 160px; aspect-ratio: 1; border-radius: 14px; }
.vt__kopf a { text-decoration: none; font-size: 19px; font-weight: 600; letter-spacing: -.012em; }
.vt__kopf .knoepfe { display: flex; gap: 4px; flex-wrap: wrap; }
.vt .gleich.verbergen { display: none; }
.vt__leer { color: var(--leise); font-size: 14.5px; display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--linie-2); border-radius: 14px; text-align: center; padding: 12px; }
.vt__leer a { text-decoration: underline; color: var(--text); }

/* Korb */
.korbseite { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 32px; padding-top: 4px; padding-bottom: 72px; align-items: start; }
.kt { background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--sch-2); overflow: hidden; }
.kt thead th { font-size: 13px; font-weight: 500; color: var(--leise); text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--linie); }
.kt thead th:first-child { padding-left: 20px; }
.kt td { padding: 14px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.kt tbody tr:last-child td { border-bottom: 0; }
.kt td:first-child { padding-left: 16px; }
.kt__produkt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.kt__produkt img { width: 72px; height: 72px; border-radius: 12px; }
.kt__produkt a { text-decoration: none; font-size: 17px; font-weight: 600; }
.kt__produkt small { display: block; font-size: 13px; color: var(--leise); margin-top: 2px; }
.kt__summe { font-size: 15.5px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kt__preis { font-size: 14px; color: var(--text-2); }
.kt__weg { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; color: var(--leise); }
.kt__weg:hover { color: var(--text); background: var(--flaeche-2); }
.kt__menge small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--leise); }
.korbseite__summe { position: sticky; top: calc(var(--kopf-h) + 16px); border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); padding: 20px; display: grid; gap: 14px; }
.summen td { text-align: right; font-variant-numeric: tabular-nums; }
.summen th { width: auto; }
.summen .gesamt th, .summen .gesamt td { border-top: 1px solid var(--text); border-bottom: 0; font-size: 19px; color: var(--text); font-weight: 600; padding-top: 14px; }
.summen .klein td, .summen .klein th { font-size: 13px; border-bottom: 0; padding-block: 2px; color: var(--leise); font-weight: 400; }
.pruef-block { border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); padding: 16px 18px; display: grid; gap: 8px; }
.pruef-block__kopf { display: flex; justify-content: space-between; align-items: center; }
.pruef-block p { margin: 0; }
.korb-vorschlag { margin-top: 32px; }
.korb-vorschlag .mono-etikett { margin-bottom: 10px; }
@media (max-width: 1023px) { .korbseite { grid-template-columns: 1fr; } .korbseite__summe { position: static; } }
@media (max-width: 639px) {
  .kt thead { display: none; }
  .kt tr { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px; border-bottom: 1px solid var(--linie); }
  .kt td, .kt td:first-child { border: 0; padding: 0; }
  .kt td:first-child { grid-column: 1 / -1; }
  .kt__preis { display: none; }
}

/* Kasse */
.schrittleiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; font-size: 14.5px; color: var(--leise); }
.schrittleiste li { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-weight: 500; }
.schrittleiste li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--flaeche-2); font-weight: 600; flex: none; font-size: 13.5px; }
.schrittleiste li[aria-current="step"] { color: var(--text); }
.schrittleiste li[aria-current="step"] span, .schrittleiste li.erledigt span { background: var(--akzent); color: var(--auf-akzent); }
.schrittleiste li.erledigt { color: var(--text); }
.fortschritt { height: 4px; border-radius: 4px; background: var(--flaeche-3); overflow: hidden; }
.fortschritt span { display: block; height: 100%; width: 25%; background: var(--akzent); border-radius: 4px; transition: width .5s var(--weich); }
@media (max-width: 639px) { .schrittleiste li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; } }
.kasse { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 32px; padding-top: 28px; padding-bottom: 72px; align-items: start; }
.kasse__schritt, .kasse__fertig { display: grid; gap: 18px; }
.kasse__schritt h2, .kasse__fertig h2, .kasse__schritt > p, .kasse__fertig > p { margin: 0; }
.kasse__weiter { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--linie); }
.kasse__weiter--fertig { justify-content: flex-start; }
.optionen { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.option { position: relative; display: grid; gap: 6px; padding: 18px 18px 18px 54px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); border: 1px solid transparent; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.option input { position: absolute; left: 20px; top: 21px; width: 20px; height: 20px; accent-color: var(--akzent); margin: 0; }
.option:has(input:checked) { border-color: var(--akzent); box-shadow: var(--sch-2); }
.option:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.option__kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.option__kopf .mono { font-weight: 600; }
.option__text { color: var(--leise); font-size: 15px; }
.feld--plz { max-width: 280px; }
.kasse__lieferzeit { margin: 0; font-size: 15px; min-height: 1.4em; color: var(--text-2); }
.hinweisliste { display: grid; gap: 4px; font-size: 14.5px; color: var(--leise); }
.hinweisliste li::before { content: '· '; color: var(--akzent); font-weight: 700; }
.kasse__summe { position: sticky; top: calc(var(--kopf-h) + 16px); border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); padding: 20px; display: grid; gap: 12px; }
.kasse__summe .mono-etikett { color: var(--text); font-weight: 600; font-size: 15px; }
.kp { display: grid; gap: 6px; }
.kp li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px; border-radius: 12px; background: var(--flaeche-2); font-size: 14.5px; }
.kp img { width: 48px; height: 48px; border-radius: 10px; }
.kp b { display: block; font-size: 15.5px; font-weight: 600; }
.kp small { font-size: 13px; color: var(--leise); }
.kp .mono { white-space: nowrap; font-weight: 600; }
.anfrage-text { white-space: pre-wrap; background: var(--flaeche); border-radius: var(--r); box-shadow: var(--sch-1); padding: 22px; font: 400 14px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; max-height: 520px; overflow: auto; margin: 0; }
.kasse__betreff { margin: 0; font-size: 15px; font-weight: 500; }
@media (max-width: 1023px) { .kasse { grid-template-columns: 1fr; } .kasse__summe { position: static; order: -1; } }

/* Profi-Seite */
.profi-schalter { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.profi-schalter p { margin: 0; }
.profi-vorteile { padding-top: 8px; padding-bottom: 48px; display: grid; gap: 16px; }
.profi-vorteile .nummernliste { grid-template-columns: 1fr 1fr; }
.profi-werkzeuge { padding: 24px 0 48px; }
.profi-werkzeuge__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.werkzeug { border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); padding: 26px; display: grid; gap: 12px; align-content: start; }
.werkzeug__knoepfe { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.schnell-tabelle th { text-align: left; font-size: 13px; font-weight: 500; color: var(--leise); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linie); }
.schnell-tabelle td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.schnell-tabelle input { min-height: 44px; font-variant-numeric: tabular-nums; }
.schnell-tabelle td:nth-child(1) { width: 34%; }
.schnell-tabelle td:nth-child(2) { width: 18%; }
.schnell-tabelle .treffer-zelle { font-size: 13.5px; }
.schnell-tabelle .treffer-zelle b { display: block; font-size: 15px; font-weight: 600; }
.schnell-tabelle .treffer-zelle small { font-size: 13px; color: var(--leise); }
.schnell-tabelle .fehlt { color: var(--rot); }
.paletten { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
.paletten__ergebnis .daten td { text-align: right; font-variant-numeric: tabular-nums; }
.paletten-bild { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 4px; }
.paletten-bild i { width: 40px; height: 26px; border-radius: 6px; background: var(--text); position: relative; }
.paletten-bild i.teil { background: linear-gradient(90deg, var(--akzent) var(--teil), var(--flaeche-3) var(--teil)); }
.staffel th, .staffel td { padding: 12px 0; border-bottom: 1px solid var(--linie); text-align: left; font-size: 16px; }
.staffel td { text-align: right; font-size: 20px; font-weight: 600; color: var(--akzent-text); }
.staffel tr:last-child th, .staffel tr:last-child td { border-bottom: 0; }
.datenblaetter { padding-top: 24px; padding-bottom: 72px; }
@media (max-width: 1023px) { .profi-werkzeuge__raster { grid-template-columns: 1fr; } .profi-vorteile .nummernliste { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .werkzeug { padding: 18px; } .paletten { grid-template-columns: 1fr; } .schnell-tabelle td:nth-child(3), .schnell-tabelle th:nth-child(3) { display: none; } }

/* Lieferung */
.lieferseite { padding-top: 4px; padding-bottom: 32px; }
.lieferseite-plz { padding: 32px 0; }
.lieferseite-plz__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; align-items: start; background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--sch-2); padding: clamp(22px, 3vw, 36px); }
.lieferseite-plz__raster > div { display: grid; gap: 14px; }
.lieferseite-plz__raster h2, .lieferseite-plz__raster p { margin: 0; }
.lieferseite-ampel { padding-top: 32px; padding-bottom: 72px; display: grid; gap: 24px; }
.lieferseite-annahme { max-width: 70ch; }
@media (max-width: 1023px) { .lieferseite-plz__raster { grid-template-columns: 1fr; } }

/* Ratgeber */
.ratgeber-index { padding-top: 4px; padding-bottom: 72px; }
.artikel-liste { display: grid; gap: 12px; }
.artikel-zeile { display: grid; grid-template-columns: 48px minmax(0, 5fr) minmax(0, 4fr) auto 24px; gap: 12px 24px; align-items: center; padding: 26px 24px; border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-1); text-decoration: none; transition: box-shadow .2s; }
.artikel-zeile:hover { box-shadow: var(--sch-2); }
.artikel-zeile > .mono:first-child { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--akzent-hell); color: var(--akzent-text); font-weight: 600; }
.artikel-zeile__kurz { color: var(--leise); font-size: 15.5px; }
.artikel-zeile:hover .artikel-zeile__titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 1023px) { .artikel-zeile { grid-template-columns: 44px minmax(0, 1fr) 24px; } .artikel-zeile__kurz, .artikel-zeile > .leise { grid-column: 2; } }
.seitenkopf--artikel { padding-bottom: 32px; }
.seitenkopf--artikel .mono-etikett { margin-top: 20px; }
.artikel__titel { margin: 12px 0 18px; max-width: 20ch; }
.artikel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 48px; padding-top: 24px; padding-bottom: 80px; align-items: start; }
.artikel__inhalt { position: sticky; top: calc(var(--kopf-h) + 24px); background: var(--flaeche); border-radius: var(--r); box-shadow: var(--sch-1); padding: 16px; }
.artikel__inhalt ol { margin-top: 8px; display: grid; }
.artikel__inhalt a { display: block; padding: 10px 8px; border-radius: 10px; text-decoration: none; font-size: 14.5px; color: var(--text-2); }
.artikel__inhalt a:hover { background: var(--flaeche-2); color: var(--text); }
.artikel__inhalt .mono { color: var(--akzent-text); font-weight: 600; margin-right: 4px; }
.artikel__text { font-size: 18px; line-height: 1.7; }
.artikel__text p { max-width: 64ch; }
.artikel__abschnitt { margin-bottom: 40px; scroll-margin-top: calc(var(--kopf-h) + 16px); }
.artikel__abschnitt h2 { margin-bottom: 14px; display: flex; gap: 12px; align-items: baseline; font-size: clamp(22px, 1.9vw, 27px); font-weight: 600; }
.artikel__abschnitt h2 .mono { font-size: 14px; color: var(--akzent-text); font-weight: 600; }
.artikel__liste { margin: 0 0 1em; display: grid; gap: 8px; }
.artikel__liste li { padding: 12px 16px 12px 40px; border-radius: 12px; background: var(--flaeche); box-shadow: var(--sch-1); position: relative; font-size: 16.5px; }
.artikel__liste li::before { content: ''; position: absolute; left: 16px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.artikel__produkte { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 10px; }
@media (max-width: 1100px) { .artikel { grid-template-columns: 1fr; gap: 28px; } .artikel__inhalt, .artikel__produkte { position: static; } }

/* Über uns, Kontakt, FAQ */
.ueber { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 40px; padding-top: 16px; padding-bottom: 80px; align-items: start; }
.fakten { display: grid; gap: 8px; }
.fakten div { padding: 14px 16px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); display: grid; gap: 4px; }
.ueber__text p { max-width: 62ch; }
.ueber__nicht { border-radius: var(--r-l); padding: 22px; display: grid; gap: 12px; background: var(--flaeche); box-shadow: var(--sch-2); }
.ueber__nicht p { margin: 0; }
@media (max-width: 1023px) { .ueber { grid-template-columns: 1fr; gap: 28px; } }
.kontakt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; padding-top: 16px; padding-bottom: 72px; align-items: start; }
.kontaktwege { display: grid; gap: 8px; }
.kontaktwege div { padding: 16px 18px; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); display: grid; gap: 4px; }
.kontaktwege dd { display: grid; gap: 4px; }
.kontaktwege a { text-decoration: none; }
.kontakt__form { border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sch-2); padding: 28px; }
.kontakt__form .knopf { justify-self: start; }
@media (max-width: 1023px) { .kontakt { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .kontakt__form { padding: 20px; } }
.faq { padding: 56px 0 80px; }
.faq__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
.faq__liste { display: grid; gap: 8px; }
.faq__eintrag { border-radius: var(--r); background: var(--flaeche); box-shadow: var(--sch-1); }
.faq__eintrag summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 64px; padding: 12px 18px; cursor: pointer; list-style: none; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__frage { font-size: clamp(17px, 1.3vw, 19px); font-weight: 600; letter-spacing: -.01em; }
.faq__eintrag summary .ico { transition: transform .25s; color: var(--leise); }
.faq__eintrag[open] summary .ico { transform: rotate(45deg); color: var(--akzent); }
.faq__eintrag summary .mono { color: var(--akzent-text); font-weight: 600; }
.faq__eintrag p { padding: 0 24px 20px 64px; margin: 0; max-width: 72ch; color: var(--text-2); }
@media (max-width: 1023px) { .faq__raster { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 639px) { .faq__eintrag p { padding: 0 18px 18px; } .faq { padding: 40px 0 56px; } }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Druck: Datenblatt + Profi-Tabelle */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; padding: 0; font-size: 11pt; }
  .band, .kopf, .menue, .fuss, .handyleiste, .vergleichsleiste, .meldung, .sprung { display: none !important; }
  body.druck-datenblatt main > *:not(dialog) { display: none !important; }
  body.druck-datenblatt .dialog { position: static; display: block; box-shadow: none; border: 0; max-height: none; width: 100%; max-width: none; }
  body.druck-datenblatt .dialog__knoepfe { display: none; }
  body.druck-tabelle main > *:not(.datenblaetter) { display: none !important; }
  body.druck-tabelle .datenblaetter p, body.druck-tabelle .ab-kopf__nr { display: none; }
  .lt-rahmen, .datenblatt { overflow: visible; box-shadow: none; }
  .lt { min-width: 0; font-size: 8.5pt; }
  .lt th, .lt td { padding: 3px 4px; white-space: normal; }
  a { text-decoration: none; }
}

/* Handy: alle Tippziele mindestens 44 px */
@media (max-width: 760px) {
  .seg > button, .seg__wahl > span, .seg--klein > button, .galerie .reiter button, .kat-reiter button, .suchkarte__zeile .textknopf, .beispiel, .preisart button { min-height: 44px; }
  .stepper input { min-height: 44px; }
  .held__bildtext { min-height: 44px; align-items: center; padding: 0 14px; }
  .artikel__inhalt a { padding-block: 12px; }
}