/* KT Fliesen · Entwurf B „Musterzimmer“ – Designsystem: entwuerfe/musterzimmer/DESIGN.md
   Sand · Rauchblau · Messing · Figtree + Instrument Serif Italic (nur Stimme des Beraters). Keine Verläufe, zwei Radien (16/8), Schatten nur für Ebenen. */

/* ───────────── Schriften (selbst gehostet, OFL 1.1) ───────────── */
@font-face{font-family:"Figtree";src:url("fonts/figtree-vf-latin.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-italic-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree Ersatz";src:local("Arial");size-adjust:97%;ascent-override:95%;descent-override:25%}

/* ───────────── Token ───────────── */
:root{
  --sand:#E8E1D5; --sand-hell:#F2EEE7; --sand-tief:#DCD3C4; --weiss:#fff;
  --rauch:#2C4452; --rauch-tief:#22343F; --rauch-90:#3A5260; --text-2:#51616B;
  --messing:#A8834A; --messing-tief:#7D5F2E; --messing-hell:#C9A36A;
  --fuge:#CFC6B8; --linie:rgba(44,68,82,.16); --linie-stark:rgba(44,68,82,.34);
  --ampel-gruen:#3F6B45; --ampel-gelb:#B48A1E; --ampel-orange:#A4521F; --fehler:#A3392B;
  --r:16px; --r-k:8px;
  --schatten-ebene:0 18px 48px -12px rgba(28,40,48,.32),0 2px 8px rgba(28,40,48,.08);
  --schrift:"Figtree","Figtree Ersatz",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serife:"Instrument Serif",Georgia,"Times New Roman",serif;
  --rand:clamp(16px,4vw,48px); --kopf-h:104px;
  --gleiten:cubic-bezier(.2,.7,.2,1);
  --t-display:clamp(2.05rem,1.35rem + 2.5vw,3.5rem);
  --t-h2:clamp(1.6rem,1.22rem + 1.25vw,2.3rem);
  --t-frage:clamp(2rem,1.4rem + 1.9vw,3rem);
}

/* ───────────── Grundlage ───────────── */
*,*::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) + 12px)}
body{margin:0;background:var(--sand);color:var(--rauch);font:400 1rem/1.6 var(--schrift);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
:where(ul[class],ol[class],nav ul){list-style:none;padding:0;margin:0}
:focus-visible{outline:2px solid var(--messing-tief);outline-offset:2px;border-radius:2px}
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.springe{position:absolute;left:12px;top:-60px;z-index:200;background:var(--rauch);color:var(--weiss);padding:12px 16px;border-radius:var(--r-k);text-decoration:none;font-weight:600}
.springe:focus{top:12px}
.i{width:20px;height:20px;flex:none}
.zahl-spalte,.preis-klein,[data-mz-preis],.ergebnis,.tabelle,.zahl{font-variant-numeric:tabular-nums}
p,li,dd{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance;hyphens:manual}

/* Typografie-Rollen */
.t-display{font-size:var(--t-display);line-height:1.04;font-weight:620;letter-spacing:-.028em}
.t-h2{font-size:var(--t-h2);line-height:1.1;font-weight:600;letter-spacing:-.02em}
.t-frage{font-family:var(--serife);font-style:italic;font-weight:400;font-size:var(--t-frage);line-height:1.04;letter-spacing:-.01em}
.t-frage-klein{font-family:var(--serife);font-style:italic;font-weight:400;font-size:1.375rem;line-height:1.2}
.faq__frage{font-weight:620;font-size:1.0625rem;line-height:1.35}
.t-h3{font-size:1.2rem;line-height:1.3;font-weight:620;letter-spacing:-.01em}
.klein{font-size:.875rem;color:var(--text-2);line-height:1.5}
.feld-titel{font-size:.8125rem;font-weight:650;letter-spacing:.01em;color:var(--text-2)}

/* Raster */
.breite{width:min(100% - 2 * var(--rand),1360px);margin-inline:auto}
.abschnitt{padding:clamp(56px,7vw,112px) 0}
.abschnitt--hell{background:var(--sand-hell)}
.abschnitt--weiss{background:var(--weiss)}
.abschnitt-eng{padding:clamp(40px,5vw,72px) 0 0}
.abschnitt__kopf{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,3vw,40px)}
.abschnitt__kopf--zeile{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.abschnitt__kopf--zeile>div{max-width:720px;display:flex;flex-direction:column;gap:12px}
.abschnitt__text{font-size:1.0625rem;line-height:1.6;color:var(--text-2);max-width:62ch}

/* ───────────── Knöpfe, Chips, Felder ───────────── */
.k{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;font-weight:620;font-size:.9375rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .18s,color .18s,border-color .18s;-webkit-tap-highlight-color:transparent}
.k .i{width:19px;height:19px}
.k--haupt{background:var(--rauch);color:var(--weiss)}
.k--haupt:hover{background:var(--rauch-tief)}
.k--linie{border-color:var(--linie-stark);color:var(--rauch);background:transparent}
.k--linie:hover{border-color:var(--rauch)}
.k--linie[aria-pressed="true"]{background:var(--rauch);color:var(--weiss);border-color:var(--rauch)}
.k--messing{background:var(--messing-tief);color:var(--weiss)}
.k--messing:hover{background:#6B5027}
.k--hell{background:var(--sand);color:var(--rauch)}
.k--hell:hover{background:var(--weiss)}
.k--text{background:none;padding:0 6px;color:var(--rauch)}
.k--text:hover span{text-decoration:underline}
.k--text-icon{background:none;border-color:transparent;padding:0 12px}
.k--text-icon[aria-pressed="true"]{color:var(--messing-tief)}
.k--klein{min-height:44px;padding:0 16px;font-size:.875rem}
.k--breit{width:100%}
.k:disabled,.k[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.k-text{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:620;color:var(--rauch);text-decoration:none;border-bottom:0}
.k-text .i{width:18px;height:18px;transition:transform .2s var(--gleiten)}
.k-text:hover .i{transform:translateX(3px)}
.k-text:hover{text-decoration:underline}
.k-text--klein{font-size:.8125rem;min-height:36px;font-weight:600;background:none;border:0;padding:0;cursor:pointer;color:var(--text-2)}
.k-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:inherit;flex:none}
.k-icon:hover{background:rgba(44,68,82,.08)}
.k-rund{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:999px;border:0;background:var(--rauch);color:var(--weiss);flex:none;transition:background-color .18s}
.k-rund:hover{background:var(--rauch-tief)}
.k-rund--klein{width:44px;height:44px}
.k-rund--klein .i{width:18px;height:18px}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;scroll-snap-type:x proximity}
.chips--scroll::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linie-stark);background:var(--weiss);color:var(--rauch);font-weight:560;font-size:.9375rem;white-space:nowrap;text-decoration:none;flex:none;scroll-snap-align:start;transition:background-color .15s,border-color .15s,color .15s}
.chip .i{width:18px;height:18px}
.chip:hover{border-color:var(--rauch)}
.chip[aria-pressed="true"]{background:var(--rauch);border-color:var(--rauch);color:var(--weiss)}
.chip small{font-size:.75rem;color:var(--text-2);font-weight:600}
.chip--dunkel{background:transparent;border-color:rgba(232,225,213,.36);color:var(--sand)}
.chip--dunkel:hover{border-color:var(--sand)}
.chip--linie{border-style:dashed}

.segment{display:inline-flex;padding:4px;gap:2px;border-radius:999px;background:var(--sand-hell);border:1px solid var(--linie)}
.segment>button,.segment__radio span{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:.875rem;color:var(--text-2);white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.segment>button .i{width:18px;height:18px}
.segment>button[aria-pressed="true"],.segment__radio input:checked+span{background:var(--weiss);color:var(--rauch);box-shadow:0 1px 2px rgba(28,40,48,.14),0 0 0 1px var(--linie)}
.segment__radio{display:flex;flex:1;position:relative}
.segment__radio input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segment__radio span{width:100%}
.segment__radio input:focus-visible+span{outline:2px solid var(--messing-tief);outline-offset:1px}
.segment--voll{display:flex;width:100%}
.segment--voll>button{flex:1}
.segment--klein>button,.segment--klein .segment__radio span{min-height:36px;padding:0 12px;font-size:.8125rem}
.segment--gross>button{min-height:52px;padding:0 28px;font-size:1rem}

.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld label,.feld legend{font-size:.875rem;font-weight:620;color:var(--rauch)}
.feld input,.feld select,.feld textarea,.plz input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--linie-stark);border-radius:var(--r-k);background:var(--weiss);font-size:1rem;line-height:1.3;transition:border-color .15s}
.feld textarea{resize:vertical;min-height:96px}
.feld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%232C4452'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--rauch)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible,.plz input:focus-visible{outline:2px solid var(--messing-tief);outline-offset:0;border-color:var(--messing-tief)}
.feld[data-fehler] input,.feld[data-fehler] textarea{border-color:var(--fehler)}
.feld__fehler{font-size:.8125rem;color:var(--fehler);font-weight:600}
.feld__hilfe{font-size:.8125rem;color:var(--text-2);line-height:1.45}
.feld--voll{grid-column:1/-1}
fieldset.feld{border:0;padding:0;margin:0}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pflicht{color:var(--fehler)}

.schalter{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;position:relative}
.schalter input{position:absolute;opacity:0;width:44px;height:26px;right:0;margin:0;cursor:pointer}
.schalter__text{flex:1;font-weight:560;font-size:.9375rem}
.schalter small{font-size:.75rem;color:var(--text-2);font-weight:600}
.schalter__bahn{width:44px;height:26px;border-radius:999px;background:var(--sand-tief);position:relative;flex:none;transition:background-color .2s}
.schalter__bahn::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--weiss);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--gleiten)}
.schalter input:checked~.schalter__bahn{background:var(--rauch)}
.schalter input:checked~.schalter__bahn::after{transform:translateX(18px)}
.schalter input:focus-visible~.schalter__bahn{outline:2px solid var(--messing-tief);outline-offset:2px}
.schalter--klein .schalter__text{font-size:.875rem}

.etikett{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-k);background:var(--weiss);color:var(--rauch);font-size:.75rem;font-weight:650;letter-spacing:.01em;line-height:1.2;white-space:nowrap}
.etikett--linie{background:transparent;box-shadow:inset 0 0 0 1px var(--linie-stark);color:var(--text-2)}
.etikett--bild{position:absolute;z-index:2}
.etikett--oben{top:12px;left:12px}
.etikett--unten{bottom:12px;left:12px}
.etikett--dunkel{background:var(--rauch);color:var(--weiss)}
.ampel{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600}
.ampel i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ampel-gruen);box-shadow:0 0 0 3px rgba(63,107,69,.16)}
.ampel--gelb i{background:var(--ampel-gelb);box-shadow:0 0 0 3px rgba(180,138,30,.18)}
.ampel--orange i{background:var(--ampel-orange);box-shadow:0 0 0 3px rgba(164,82,31,.16)}
.zahl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--messing-tief);color:var(--weiss);font-size:.6875rem;font-weight:700;font-style:normal;line-height:1}
.zahl[data-kt-leer]{display:none}
.zahl.ploppt{animation:ploppen .5s var(--gleiten)}
@keyframes ploppen{40%{transform:scale(1.35)}}
.hinweis-band{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-k);background:var(--sand-hell);border-left:3px solid var(--messing);font-size:.9375rem;line-height:1.5;margin-top:24px}
.hinweis-band .i{color:var(--messing-tief);margin-top:1px}
.hinweis-band--klein{font-size:.875rem;padding:10px 14px}
.preis-klein{font-weight:700;font-size:.9375rem;white-space:nowrap}

/* ───────────── Service-Zeile + Kopfzeile ───────────── */
.service{background:var(--rauch);color:var(--sand);font-size:.8125rem}
.service__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.service__ort{display:flex;align-items:center;gap:8px;font-weight:500}
.service__ort .i{width:16px;height:16px;color:var(--messing-hell)}
.service__rechts{display:flex;align-items:center;gap:20px}
.service__zurueck{color:var(--sand);text-decoration:none;font-weight:600;padding:8px 0}
.service__zurueck:hover{text-decoration:underline}
.service :focus-visible{outline-color:var(--messing-hell)}
.profi-schalter{display:flex;align-items:center;gap:2px}
.profi-schalter>span{margin-right:8px;opacity:.8}
.profi-schalter button{border:0;background:transparent;color:var(--sand);padding:4px 10px;border-radius:999px;font-weight:600;font-size:.8125rem;min-height:28px}
.profi-schalter button[aria-pressed="true"]{background:var(--sand);color:var(--rauch)}
.kopfzeile{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);border-bottom:1px solid var(--linie)}
.kopfzeile__in{display:flex;align-items:center;gap:clamp(16px,2vw,32px);min-height:68px}
.marke{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--rauch);flex:none;min-height:44px}
.marke img{height:22px;width:auto}
.marke span{font-weight:650;font-size:1.0625rem;letter-spacing:-.01em;padding-left:12px;border-left:1px solid var(--linie-stark);line-height:1.1}
.marke--hell{color:var(--sand)}
.marke--hell img{height:24px}
.marke--hell span{border-color:rgba(232,225,213,.3)}
.hauptnav ul{display:flex;gap:2px}
.hauptnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:560;font-size:.9375rem;border-radius:999px;position:relative}
.hauptnav a:hover{background:var(--sand-hell)}
.hauptnav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--messing);border-radius:2px}
.suche{position:relative;flex:1;max-width:340px;margin-left:auto}
.suche input{width:100%;min-height:44px;border-radius:999px;border:1px solid var(--linie);background:var(--sand-hell);padding:0 16px 0 42px;font-size:.9375rem}
.suche input:focus-visible{outline:2px solid var(--messing-tief);outline-offset:0;background:var(--weiss)}
.suche__lupe{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-2);pointer-events:none}
.suche__treffer{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:320px;background:var(--weiss);border-radius:var(--r);box-shadow:var(--schatten-ebene);padding:8px;z-index:80;max-height:min(70vh,520px);overflow:auto}
.suche__treffer a{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:var(--r-k);text-decoration:none}
.suche__treffer a:hover,.suche__treffer a[aria-selected="true"]{background:var(--sand-hell)}
.suche__treffer img,.suche__treffer .verlegt{width:44px;height:44px;border-radius:var(--r-k);object-fit:cover}
.suche__treffer b{display:block;font-weight:620;font-size:.9375rem;line-height:1.25}
.suche__treffer small{color:var(--text-2);font-size:.8125rem}
.suche__treffer .suche__alle{display:flex;justify-content:center;font-weight:620;margin-top:4px;border-top:1px solid var(--linie);border-radius:0;padding-top:12px}
.suche__leer{padding:12px;color:var(--text-2);font-size:.9375rem}
.kopfzeile__aktionen{display:flex;align-items:center;gap:4px;flex:none}
.kopf-knopf{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;text-decoration:none;font-weight:600;font-size:.9375rem;color:var(--rauch)}
.kopf-knopf:hover{background:var(--sand-hell)}
.kopf-knopf .i{width:22px;height:22px}
.kopf-knopf .zahl{position:absolute;top:2px;left:26px}
.kopf-knopf--menue{display:none}

.menue{position:fixed;inset:0;z-index:120;background:rgba(28,40,48,.4)}
.menue__panel{position:absolute;inset:0 0 0 auto;width:min(420px,100%);background:var(--sand);padding:12px 20px calc(24px + env(safe-area-inset-bottom));overflow:auto;display:flex;flex-direction:column;gap:20px;animation:von-rechts .26s var(--gleiten)}
.menue__kopf{display:flex;justify-content:space-between;align-items:center}
.menue__titel{font-weight:650;font-size:1.125rem}
.menue__suche{position:relative}
.menue__suche .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-2)}
.menue__suche input{width:100%;min-height:48px;border-radius:999px;border:1px solid var(--linie-stark);background:var(--weiss);padding:0 16px 0 42px;font-size:1rem}
.menue__haupt a{display:flex;min-height:52px;align-items:center;font-size:1.375rem;font-weight:620;text-decoration:none;border-bottom:1px solid var(--linie)}
.menue__service{margin-top:12px}
.menue__service a{display:flex;min-height:44px;align-items:center;text-decoration:none;font-weight:560;color:var(--text-2)}
.profi-schalter--gross{background:var(--weiss);border-radius:999px;padding:4px;align-self:flex-start;border:1px solid var(--linie)}
.profi-schalter--gross>span{padding-left:12px;font-weight:600;font-size:.875rem;opacity:1}
.profi-schalter--gross button{color:var(--rauch);min-height:40px;padding:0 16px;font-size:.875rem}
.profi-schalter--gross button[aria-pressed="true"]{background:var(--rauch);color:var(--weiss)}
.menue__zurueck{font-weight:600;min-height:44px;display:inline-flex;align-items:center}
@keyframes von-rechts{from{transform:translateX(24px);opacity:0}}
@keyframes von-unten{from{transform:translateY(24px);opacity:0}}

/* Brotkrumen */
.krumen ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:.8125rem;color:var(--text-2);padding-top:20px}
.krumen li+li::before{content:"/";margin-right:8px;opacity:.6}
.krumen a{text-decoration:none;display:inline-block;padding:4px 0}
.krumen a:hover{text-decoration:underline;color:var(--rauch)}
.krumen [aria-current]{color:var(--rauch);font-weight:600}

/* Seitenkopf */
.seitenkopf{padding:clamp(24px,4vw,48px) 0 clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px;max-width:900px}
.seitenkopf--zeile{max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.seitenkopf__intro{font-size:1.125rem;color:var(--text-2);max-width:62ch;line-height:1.55}
.seitenkopf__vor{font-weight:650;color:var(--messing-tief);font-size:.9375rem}
.seitenkopf--zeile .hinweis-band{margin-top:0;max-width:560px}

/* ───────────── Fußzeile ───────────── */
.fuss{background:var(--rauch-tief);color:var(--sand);padding:clamp(48px,6vw,88px) 0 calc(32px + env(safe-area-inset-bottom))}
main{padding-bottom:clamp(64px,8vw,120px)}
body[data-seite=start] main{padding-bottom:0}
.fuss a{color:var(--sand);text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss :focus-visible{outline-color:var(--messing-hell)}
.fuss__oben{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.fuss__marke{display:flex;flex-direction:column;gap:16px;max-width:340px}
.fuss__marke p{color:#C9CFD2;line-height:1.55}
.fuss__klein{font-size:.875rem}
.fuss__spalte h2{font-size:.8125rem;font-weight:650;letter-spacing:.04em;color:var(--messing-hell);margin-bottom:12px}
.fuss__spalte a{display:inline-flex;min-height:36px;align-items:center;font-size:.9375rem}
.fuss__demo{display:flex;align-items:center;gap:12px;margin-top:48px;padding:16px 20px;border-radius:var(--r);background:rgba(232,225,213,.08);border:1px solid rgba(232,225,213,.16);font-weight:620}
.fuss__demo .i{color:var(--messing-hell)}
.fuss__unten{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:24px;font-size:.8125rem;color:#B9C2C7}

/* Handy-Leiste + Berater-Knopf */
.handyleiste{display:none}
.berater-knopf{position:fixed;right:24px;bottom:24px;z-index:70;display:inline-flex;align-items:center;gap:0;min-height:56px;min-width:56px;padding:0 17px;border-radius:999px;border:0;background:var(--rauch);color:var(--weiss);font-weight:620;box-shadow:var(--schatten-ebene);transition:transform .2s var(--gleiten),background-color .2s,gap .2s}
.berater-knopf span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s var(--gleiten)}
.berater-knopf:hover span,.berater-knopf:focus-visible span,body[data-oben] .berater-knopf span{max-width:200px}
.berater-knopf:hover,.berater-knopf:focus-visible{gap:10px}
.berater-knopf:hover{background:var(--rauch-tief);transform:translateY(-2px)}
.berater-knopf .i{width:22px;height:22px;color:var(--messing-hell)}
body[data-chat-offen] .berater-knopf,body[data-vergleich-an] .berater-knopf{opacity:0;pointer-events:none}

/* ───────────── Berater-Chat ───────────── */
.chat{position:fixed;right:24px;bottom:24px;z-index:110;width:min(420px,calc(100vw - 32px));height:min(680px,calc(100vh - 48px));background:var(--sand-hell);border-radius:var(--r);box-shadow:var(--schatten-ebene);display:flex;flex-direction:column;overflow:hidden;animation:von-unten .26s var(--gleiten)}
.chat__kopf{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 16px;background:var(--rauch);color:var(--sand)}
.chat__kopf h2{font-size:1rem;font-weight:650;color:var(--weiss)}
.chat__kopf p{font-size:.75rem;opacity:.8}
.chat__kopf>div{flex:1}
.chat__kopf .k-icon:hover{background:rgba(255,255,255,.1)}
.chat__kopf :focus-visible{outline-color:var(--messing-hell)}
.chat__avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--messing-tief);color:var(--weiss)}
.chat__verlauf{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.blase{max-width:92%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--weiss);font-size:.9375rem;line-height:1.5;box-shadow:0 0 0 1px var(--linie)}
.blase--gruss{font-family:var(--serife);font-style:italic;font-size:1.3125rem;line-height:1.3}
.blase--ich{align-self:flex-end;background:var(--rauch);color:var(--weiss);border-radius:14px 14px 4px 14px;box-shadow:none}
.blase__erkannt{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.blase__erkannt span{font-size:.75rem;font-weight:600;padding:3px 8px;border-radius:var(--r-k);background:var(--sand-hell);color:var(--text-2)}
.blase__offen{margin-top:6px;font-size:.8125rem;color:var(--text-2)}
.blase__hinweis{margin-top:8px;font-size:.8125rem;color:var(--text-2);border-left:2px solid var(--messing);padding-left:8px}
.chat__chips{display:flex;flex-wrap:wrap;gap:6px}
.chat__chips .chip{min-height:40px;font-size:.875rem;padding:0 14px}
.treffer{display:flex;flex-direction:column;gap:8px}
.treffer-karte{display:grid;grid-template-columns:64px 1fr;gap:12px;background:var(--weiss);border-radius:var(--r);padding:10px}
.treffer-karte .verlegt{width:64px;height:80px;border-radius:var(--r-k)}
.treffer-karte__name{font-weight:650;text-decoration:none;line-height:1.25;display:block}
.treffer-karte__name:hover{text-decoration:underline}
.treffer-karte__meta{font-size:.8125rem;color:var(--text-2)}
.treffer-karte ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:2px;font-size:.8125rem}
.treffer-karte li{display:flex;gap:6px}
.treffer-karte li::before{content:"";width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--messing);flex:none}
.treffer-karte__knoepfe{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.treffer-karte__knoepfe .k{min-height:40px;padding:0 12px;font-size:.8125rem}
.chat__eingabe{display:flex;gap:8px;padding:12px;background:var(--weiss);border-top:1px solid var(--linie)}
.chat__eingabe input{flex:1;min-height:48px;border-radius:999px;border:1px solid var(--linie-stark);padding:0 16px;font-size:1rem;background:var(--sand-hell)}
.chat__eingabe input:focus-visible{outline:2px solid var(--messing-tief);outline-offset:0}
.chat__hinweis{font-size:.6875rem;color:var(--text-2);padding:0 16px 12px;background:var(--weiss);line-height:1.4}

/* ───────────── Schublade (Korb + Schnell-Rechner) ───────────── */
.schublade{position:fixed;inset:0;z-index:130}
.schublade__hinter{position:absolute;inset:0;background:rgba(28,40,48,.42);animation:einblenden .2s}
.schublade__panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--sand-hell);display:flex;flex-direction:column;box-shadow:var(--schatten-ebene);animation:von-rechts .28s var(--gleiten);outline:none}
.schublade__kopf{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 24px;border-bottom:1px solid var(--linie);background:var(--weiss)}
.schublade__kopf h2{font-size:1.125rem;font-weight:650}
.schublade__inhalt{flex:1;overflow:auto;padding:16px 24px;overscroll-behavior:contain}
.schublade__fuss{padding:16px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--linie);background:var(--weiss);display:flex;flex-direction:column;gap:10px}
.schublade__summe{display:flex;justify-content:space-between;align-items:baseline;font-weight:650;font-size:1.0625rem}
.schublade__summe small{display:block;font-weight:500;font-size:.8125rem;color:var(--text-2)}
.schublade__neu{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--weiss);border-radius:var(--r);border-left:3px solid var(--ampel-gruen);margin-bottom:16px;font-weight:600;font-size:.9375rem}
.schublade__neu .i{color:var(--ampel-gruen)}
@keyframes einblenden{from{opacity:0}}
.posten{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--linie);align-items:start}
.posten:last-child{border-bottom:0}
.posten__bild{width:64px;height:64px;border-radius:var(--r-k);overflow:hidden;background:var(--weiss)}
.posten__bild img,.posten__bild .verlegt{width:100%;height:100%;object-fit:cover}
.posten__name{font-weight:650;line-height:1.25;text-decoration:none;display:block}
.posten__name:hover{text-decoration:underline}
.posten__meta{font-size:.8125rem;color:var(--text-2);margin-top:2px}
.posten__summe{font-weight:700;text-align:right;white-space:nowrap}
.posten__weg{font-size:.8125rem;color:var(--text-2);background:none;border:0;padding:0;min-height:32px;text-decoration:underline;cursor:pointer}
.posten__reihe{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--linie-stark);border-radius:999px;background:var(--weiss)}
.stepper .k-icon{width:40px;height:40px}
.stepper .k-icon .i{width:16px;height:16px}
.stepper input{width:44px;border:0;text-align:center;font-weight:650;font-size:1rem;background:transparent;-moz-appearance:textfield;appearance:textfield;min-height:40px;font-variant-numeric:tabular-nums}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper span{font-size:.75rem;color:var(--text-2);padding-right:6px}
.schnell{display:flex;flex-direction:column;gap:16px}
.schnell__kopf{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center}
.schnell__kopf .verlegt{width:84px;height:84px;border-radius:var(--r-k)}
.schnell__kopf b{display:block;font-size:1.0625rem;line-height:1.25}
.schnell__kopf small{color:var(--text-2);font-size:.875rem}
.leer-schublade{text-align:center;padding:40px 8px;display:flex;flex-direction:column;gap:12px;align-items:center}
.leer-schublade .i{width:40px;height:40px;color:var(--messing)}

/* Toast + Vergleichs-Leiste */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:150;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:calc(100vw - 32px)}
.toast__eintrag{background:var(--rauch-tief);color:var(--sand);padding:12px 18px;border-radius:999px;font-weight:600;font-size:.9375rem;box-shadow:var(--schatten-ebene);display:flex;align-items:center;gap:10px;animation:von-unten .24s var(--gleiten)}
.toast__eintrag .i{color:var(--messing-hell)}
.vergleichsleiste{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:65;width:min(760px,calc(100vw - 32px));background:var(--weiss);border-radius:var(--r);box-shadow:var(--schatten-ebene);padding:10px 10px 10px 16px;display:flex;align-items:center;gap:14px;animation:von-unten .26s var(--gleiten)}
.vergleichsleiste__titel{font-weight:650;font-size:.9375rem;white-space:nowrap}
.vergleichsleiste__titel small{display:block;font-weight:500;color:var(--text-2);font-size:.8125rem}
.vergleichsleiste__plaetze{display:flex;gap:8px;flex:1}
.vergleichsleiste__platz{position:relative;width:52px;height:52px;border-radius:var(--r-k);border:1px dashed var(--linie-stark);overflow:visible;flex:none}
.vergleichsleiste__platz .verlegt{width:100%;height:100%;border-radius:var(--r-k)}
.vergleichsleiste__platz button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:0;background:var(--rauch);color:var(--weiss);display:grid;place-items:center;padding:0}
.vergleichsleiste__platz button::before{content:"";position:absolute;inset:-9px}
.vergleichsleiste__platz button .i{width:12px;height:12px}

/* ───────────── Verlegt-Fläche ───────────── */
.verlegt{position:relative;overflow:hidden;background:var(--sand-tief)}
.verlegt svg{position:absolute;inset:0;width:100%;height:100%}
.verlegt::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%,rgba(0,0,0,.05))}

/* ───────────── 1 · Kopf = Raumstudio ───────────── */
.kopf{padding:clamp(16px,1.8vw,24px) 0 clamp(32px,4vw,56px)}
.kopf__raster{display:grid;grid-template-columns:minmax(300px,4.4fr) minmax(0,7.6fr);gap:20px clamp(24px,3vw,48px);align-items:start}
.kopf__raster>*,.kopf__text>*{min-width:0}
.kopf__text{display:flex;flex-direction:column;gap:20px;padding-top:clamp(8px,2vw,28px)}
.kopf__text h1{max-width:13ch}
.kopf__unter{font-size:1.0625rem;color:var(--text-2);line-height:1.55;max-width:42ch}
.kopf__raeume{display:flex;flex-direction:column;gap:8px}
.kopf__raeume .chips{flex-wrap:wrap}
.kopf__buehne{display:flex;flex-direction:column;gap:12px;min-width:0}

.buehne{position:relative}
.buehne__rahmen{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand-tief);isolation:isolate}
.buehne__leinwand{position:relative;aspect-ratio:2528/1696}
.buehne__leinwand.kt-rs{aspect-ratio:auto;--kt-rs-akzent:#fff;--kt-rs-marke-grund:rgba(34,52,63,.86);--kt-rs-marke-text:#fff;--kt-rs-fokus:var(--messing-hell);--kt-rs-linie:rgba(255,255,255,.95)}
.buehne__leinwand .kt-rs-marke{font:600 12px/1.2 var(--schrift);border-radius:var(--r-k);padding:6px 10px}
.buehne__vorschau{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.buehne__leinwand canvas{position:relative;z-index:1}
.buehne__rahmen[data-laedt]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--messing);transform-origin:0 50%;animation:laden 1.2s var(--gleiten) infinite;z-index:5}
@keyframes laden{0%{transform:scaleX(0)}60%{transform:scaleX(.8)}100%{transform:scaleX(1);opacity:0}}
.buehne__pins{position:absolute;inset:0;z-index:3;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 8px;border-radius:999px;border:0;background:rgba(255,255,255,.94);color:var(--rauch);font-weight:650;font-size:.8125rem;box-shadow:0 2px 10px rgba(28,40,48,.22);transition:background-color .15s,color .15s,transform .2s var(--gleiten)}
.pin::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--messing);background:var(--weiss)}
.pin::after{content:"";position:absolute;inset:-5px}
.pin[aria-pressed="true"]{background:var(--rauch);color:var(--weiss)}
.pin[aria-pressed="true"]::before{background:var(--messing-hell);border-color:var(--messing-hell)}
.pin[data-ziel]{transform:translate(-50%,-50%) scale(1.12);background:var(--messing-tief);color:var(--weiss)}
.buehne__ziel{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 3px var(--messing-hell);border-radius:var(--r)}
.buehne__werkzeug{position:absolute;top:12px;right:12px;z-index:4;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(28,40,48,.16)}
.werkzeug{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--rauch);font-weight:620;font-size:.8125rem;text-decoration:none;white-space:nowrap}
.werkzeug .i{width:18px;height:18px}
.werkzeug:hover{background:var(--sand-hell)}
.werkzeug[aria-pressed="true"],.werkzeug[aria-expanded="true"]{background:var(--rauch);color:var(--weiss)}
.pop{position:absolute;top:64px;right:12px;z-index:6;width:min(340px,calc(100% - 24px));background:var(--weiss);border-radius:var(--r);box-shadow:var(--schatten-ebene);padding:16px;display:flex;flex-direction:column;gap:10px;animation:von-unten .2s var(--gleiten)}
.pop__titel{font-size:.8125rem;font-weight:650;color:var(--text-2);display:flex;justify-content:space-between;gap:8px}
.pop__wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.verband-knopf,.fugen-knopf{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;min-height:72px;border-radius:var(--r-k);border:1px solid var(--linie);background:var(--weiss);font-size:.75rem;font-weight:620;color:var(--rauch)}
.verband-knopf svg{width:40px;height:28px;color:var(--rauch);opacity:.75}
.verband-knopf[aria-pressed="true"],.fugen-knopf[aria-pressed="true"]{border-color:var(--rauch);box-shadow:inset 0 0 0 1px var(--rauch);background:var(--sand-hell)}
.verband-knopf:disabled{opacity:.35;cursor:not-allowed}
.fugen-knopf__tupfer{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.fugen-knopf__tupfer--hell{background:#d6d2ca}.fugen-knopf__tupfer--grau{background:#8b8882}.fugen-knopf__tupfer--dunkel{background:#3b3936}
.pop input[type=range]{width:100%;accent-color:var(--rauch);min-height:32px}
.buehne__meldung{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;background:var(--rauch-tief);color:var(--sand);padding:10px 16px;border-radius:999px;font-weight:600;font-size:.875rem;max-width:calc(100% - 32px);text-align:center;box-shadow:var(--schatten-ebene)}

.leiste{display:flex;flex-direction:column;gap:10px}
.leiste__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.leiste__hilfe{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--text-2)}
.leiste__hilfe .i{width:18px;height:18px;color:var(--messing-tief)}
.leiste__fliesen{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--fuge) transparent;scroll-snap-type:x proximity}
.fliese-wahl{position:relative;flex:none;width:100px;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;text-align:left;cursor:grab;touch-action:pan-x pan-y;scroll-snap-align:start;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fliese-wahl__bild{position:relative;width:100px;height:76px;border-radius:var(--r-k);overflow:hidden;background:var(--sand-tief);box-shadow:0 0 0 1px var(--linie);transition:box-shadow .15s,transform .2s var(--gleiten)}
.fliese-wahl__bild img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.fliese-wahl__bild--frei img{object-fit:contain;padding:6px;background:var(--sand-hell)}
.fliese-wahl__name{font-size:.75rem;font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--rauch)}
.fliese-wahl__preis{font-size:.75rem;color:var(--text-2);font-variant-numeric:tabular-nums;margin-top:-4px}
.fliese-wahl:hover .fliese-wahl__bild{box-shadow:0 0 0 2px var(--rauch)}
.fliese-wahl[aria-pressed="true"] .fliese-wahl__bild{box-shadow:0 0 0 3px var(--messing)}
.fliese-wahl[aria-pressed="true"] .fliese-wahl__bild::after{content:"";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--messing-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center/12px no-repeat}
.fliese-wahl[data-unpassend]{opacity:.45}
.fliese-wahl:focus-visible{outline:none}
.fliese-wahl:focus-visible .fliese-wahl__bild{outline:2px solid var(--messing-tief);outline-offset:2px}
.fliese-wahl--alle .fliese-wahl__bild{display:grid;place-items:center;background:var(--weiss);font-weight:650;font-size:.8125rem;text-align:center;padding:8px;color:var(--rauch);text-decoration:none}
.fliese-wahl--alle{cursor:pointer;text-decoration:none}
.zieh-fliese{position:fixed;left:0;top:0;z-index:200;width:96px;height:76px;border-radius:var(--r-k);overflow:hidden;pointer-events:none;box-shadow:0 24px 40px -10px rgba(28,40,48,.5),0 0 0 3px var(--weiss);transform-origin:50% 50%;will-change:transform}
.zieh-fliese img{width:100%;height:100%;object-fit:cover}
.zieh-fliese__text{position:fixed;left:0;top:0;z-index:201;pointer-events:none;background:var(--rauch-tief);color:var(--sand);font-size:.75rem;font-weight:650;padding:5px 10px;border-radius:999px;white-space:nowrap}
body[data-zieht]{cursor:grabbing}
body[data-zieht] *{cursor:grabbing!important}

.auswahl{display:flex;flex-direction:column;gap:12px;background:var(--weiss);border-radius:var(--r);padding:16px}
.auswahl__zeile{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.auswahl__zeile .verlegt{width:56px;height:56px;border-radius:var(--r-k)}
.auswahl__flaeche{font-size:.75rem;font-weight:650;color:var(--messing-tief);letter-spacing:.02em}
.auswahl__name{font-weight:650;line-height:1.25;text-decoration:none;display:block}
.auswahl__name:hover{text-decoration:underline}
.auswahl__meta{font-size:.8125rem;color:var(--text-2)}
.auswahl__menge{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--linie);font-size:.9375rem}
.auswahl__menge b{font-size:1.125rem}
.auswahl__knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.auswahl__knoepfe .k{flex:1}
.auswahl__andere{font-size:.8125rem;color:var(--text-2);display:flex;flex-direction:column;gap:2px}
.auswahl__andere button{background:none;border:0;padding:0;text-align:left;font-weight:600;color:var(--rauch);text-decoration:underline;min-height:28px;cursor:pointer}

/* ───────────── 2 · Wegweiser ───────────── */
.wegweiser{background:var(--weiss);border-block:1px solid var(--linie)}
.wegweiser__liste{display:grid;grid-template-columns:repeat(3,1fr)}
.wegweiser__schritt{padding:clamp(28px,3.5vw,48px) clamp(20px,2.5vw,40px);display:flex;flex-direction:column;gap:12px;position:relative}
.wegweiser__schritt+.wegweiser__schritt{border-left:1px solid var(--linie)}
.wegweiser__schritt:first-child{padding-left:0}
.wegweiser__schritt:last-child{padding-right:0}
.wegweiser__nr{font-size:.8125rem;font-weight:700;color:var(--messing-tief);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.wegweiser__frage{font-size:clamp(1.85rem,1.3rem + 1.4vw,2.5rem)}
.wegweiser__schritt p{color:var(--text-2);max-width:36ch}
.wegweiser__schritt .k-text{margin-top:auto}

/* ───────────── 3 · Looks ───────────── */
.look-wahl{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-bottom:20px;padding:2px}
.look-wahl::-webkit-scrollbar{display:none}
.look-wahl__knopf{flex:none;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--linie);background:var(--weiss);font-weight:600;font-size:.875rem;color:var(--rauch);min-height:52px}
.look-wahl__knopf img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.look-wahl__knopf[aria-selected="true"]{background:var(--rauch);color:var(--weiss);border-color:var(--rauch)}
.look{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,5fr);gap:clamp(16px,2vw,28px);align-items:stretch}
.look__bild{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand-tief);align-self:start}
.look__bild img{width:100%;aspect-ratio:10/7;object-fit:cover}
.look__bild figcaption{position:absolute;right:12px;bottom:12px;font-size:.6875rem;font-weight:600;background:rgba(255,255,255,.88);padding:3px 8px;border-radius:var(--r-k);color:var(--text-2)}
.hotspot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;background:none;z-index:2;display:grid;place-items:center}
.hotspot span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 2px var(--weiss),0 2px 10px rgba(0,0,0,.3);display:grid;place-items:center;transition:transform .2s var(--gleiten)}
.hotspot span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--weiss)}
.hotspot::before{content:"";position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid var(--messing-hell);animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2);opacity:0}}
.hotspot:hover span,.hotspot[aria-expanded="true"] span{transform:scale(1.15);background:var(--messing-tief)}
.hotspot-pop{position:absolute;z-index:4;left:clamp(12px,calc(var(--hx) - 140px),calc(100% - 292px));top:calc(var(--hy) + 28px);width:280px;background:var(--weiss);border-radius:var(--r);box-shadow:var(--schatten-ebene);padding:10px;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.hotspot-pop[data-oben]{top:auto;bottom:calc(100% - var(--hy) + 28px)}
.hotspot-pop__bild .verlegt{width:72px;height:72px;border-radius:var(--r-k)}
.hotspot-pop__name{font-weight:650;text-decoration:none;display:block;line-height:1.25}
.hotspot-pop__name:hover{text-decoration:underline}
.hotspot-pop__meta{display:block;font-size:.8125rem;color:var(--text-2);margin-bottom:2px}
.look__panel{background:var(--weiss);border-radius:var(--r);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:12px}
.look__nr{font-size:.8125rem;font-weight:650;color:var(--messing-tief)}
.look__titel{font-size:1.5rem;font-weight:650;letter-spacing:-.015em;line-height:1.15}
.look--gross .look__titel{font-size:var(--t-h2)}
.look__unter{font-size:1rem;font-weight:560;color:var(--text-2);line-height:1.4;margin-top:-6px}
.look__text{color:var(--text-2);font-size:.9375rem}
.look__liste-titel{font-size:.8125rem;font-weight:650;color:var(--text-2);margin-top:8px;padding-top:12px;border-top:1px solid var(--linie)}
.look__produkte{display:flex;flex-direction:column}
.look__produkte li{display:grid;grid-template-columns:52px 1fr auto auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linie)}
.look__thumb .verlegt{width:52px;height:52px;border-radius:var(--r-k)}
.look__info a{font-weight:650;text-decoration:none;line-height:1.25;display:block}
.look__info a:hover{text-decoration:underline}
.look__info span{font-size:.8125rem;color:var(--text-2)}
.look__zubehoer{font-size:.8125rem;color:var(--text-2)}
.look__zubehoer span{font-weight:650;color:var(--rauch)}
.look__zubehoer a{color:var(--rauch)}
.look__hinweis{display:flex;gap:8px;font-size:.8125rem;color:var(--text-2);line-height:1.45}
.look__hinweis .i{width:16px;height:16px;color:var(--messing-tief);margin-top:2px}
.look__panel .k--messing{margin-top:auto}
.look__klein{font-size:.75rem;color:var(--text-2);text-align:center;margin-top:-4px}
.look__panel>.k-text{align-self:center}

/* ───────────── 4 · Kategorien: Raum, Fugenfeld, Tonleiter ───────────── */
.raum-links{margin-bottom:20px}
.raum-links .chip small{margin-left:2px}
.fugenfeld{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:3px;background:var(--fuge);border-radius:var(--r)}
.fugenfeld__zelle{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sand-tief)}
.fugenfeld__zelle:first-child{border-top-left-radius:calc(var(--r) - 3px)}
.fugenfeld__zelle:nth-child(5){border-top-right-radius:calc(var(--r) - 3px)}
.fugenfeld__zelle:nth-child(6){border-bottom-left-radius:calc(var(--r) - 3px)}
.fugenfeld__zelle:last-child{border-bottom-right-radius:calc(var(--r) - 3px)}
.fugenfeld__zelle a{position:absolute;inset:0;display:block;text-decoration:none}
.fugenfeld__zelle .verlegt{position:absolute;inset:0;transition:transform .5s var(--gleiten)}
.fugenfeld__zelle a:hover .verlegt{transform:scale(1.04)}
.fugenfeld__zub{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fugenfeld__schild{position:absolute;left:10px;bottom:10px;right:10px;display:flex;flex-direction:column;gap:0;padding:8px 12px;border-radius:var(--r-k);background:var(--weiss);width:max-content;max-width:calc(100% - 20px);transition:background-color .15s,color .15s}
.fugenfeld__schild b{font-weight:650;font-size:.9375rem;line-height:1.2}
.fugenfeld__schild small{font-size:.75rem;color:var(--text-2);font-weight:600}
.fugenfeld__zelle a:hover .fugenfeld__schild,.fugenfeld__zelle a:focus-visible .fugenfeld__schild{background:var(--rauch);color:var(--weiss)}
.fugenfeld__zelle a:hover .fugenfeld__schild small,.fugenfeld__zelle a:focus-visible .fugenfeld__schild small{color:#C9CFD2}
.fugenfeld__zelle a:focus-visible{outline:3px solid var(--messing-tief);outline-offset:-3px}
.farbfaecher{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(220px,3fr) 9fr;gap:24px;align-items:end}
.farbfaecher__kopf{display:flex;flex-direction:column;gap:6px}
.farbfaecher__kopf p{color:var(--text-2);font-size:.9375rem}
.ton-leiter{display:flex;gap:6px}
.ton{min-width:0}
.ton a{display:flex;flex-direction:column;gap:8px;text-decoration:none;border-radius:var(--r-k)}
.ton__streifen{display:flex;height:72px;border-radius:var(--r-k);overflow:hidden;box-shadow:0 0 0 1px var(--linie);transition:transform .25s var(--gleiten)}
.ton__streifen i{flex:1}
.ton a:hover .ton__streifen{transform:translateY(-4px)}
.ton__name{font-weight:650;font-size:.875rem;white-space:nowrap}
.ton__name small{color:var(--text-2);font-weight:600;margin-left:2px}

/* ───────────── 5 · Berater-Band ───────────── */
.berater-band{background:var(--rauch);color:var(--sand);padding:clamp(56px,7vw,104px) 0}
.berater-band__in{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:center}
.berater-band__text{display:flex;flex-direction:column;gap:16px}
.berater-band h2{color:var(--weiss)}
.berater-band p{color:#C9CFD2;max-width:46ch}
.berater-band__werk{display:flex;flex-direction:column;gap:16px}
.berater-band__form{display:flex;align-items:center;gap:8px;background:var(--weiss);border-radius:999px;padding:6px 6px 6px 18px;color:var(--rauch)}
.berater-band__form .i{color:var(--messing-tief)}
.berater-band__form input{flex:1;min-width:0;border:0;background:transparent;font-size:1.0625rem;min-height:48px;padding:0 4px}
.berater-band__form input:focus-visible{outline:none}
.berater-band__form:focus-within{box-shadow:0 0 0 3px var(--messing-hell)}
.berater-band__form .k--hell{background:var(--rauch);color:var(--weiss)}
.berater-band__form .k--hell:hover{background:var(--rauch-tief)}
.berater-band :focus-visible{outline-color:var(--messing-hell)}

/* ───────────── 6 · Rechner ───────────── */
.rechner-abschnitt__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:start}
.rechner-abschnitt__links{display:flex;flex-direction:column;gap:16px}
.rechner{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
.rechner__felder{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.rechner__mal{font-size:1.25rem;color:var(--text-2);padding-bottom:12px}
.rechner__verschnitt{display:flex;flex-direction:column;gap:8px}
.ergebnis{background:var(--sand-hell);border-radius:var(--r);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--kopf-h) + 16px)}
.ergebnis__titel{font-size:.8125rem;font-weight:650;color:var(--text-2)}
.ergebnis__gross{display:flex;align-items:baseline;gap:10px}
.ergebnis__gross b{font-size:clamp(3rem,2.2rem + 2.4vw,4.5rem);line-height:1;font-weight:650;letter-spacing:-.03em}
.ergebnis__gross span{font-size:1.25rem;font-weight:600}
.ergebnis__zeile{font-weight:600;color:var(--text-2)}
.ergebnis__liste{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.ergebnis__liste>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie);font-size:.9375rem}
.ergebnis__liste dt{color:var(--text-2);display:flex;align-items:center;gap:8px}
.ergebnis__liste dd{font-weight:650;text-align:right}
.ergebnis__preis dd{font-size:1.125rem}
.ergebnis__hinweis{font-size:.8125rem;color:var(--text-2);line-height:1.5}
.ergebnis__klein{font-size:.75rem;color:var(--text-2);line-height:1.45}
.grundriss{border-radius:var(--r-k);background:var(--weiss);padding:12px}
.grundriss svg{width:100%;height:auto;max-height:240px}
.grundriss text{font:600 11px var(--schrift);fill:var(--text-2)}
.rechner--kompakt .rechner__felder .feld input{min-height:44px}

/* ───────────── 7 · Musterbox ───────────── */
.musterbox-teaser__in{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,5vw,80px);align-items:center}
.musterbox-teaser .musterwand{grid-template-columns:repeat(8,1fr);gap:6px}
.musterbox-teaser .musterwand__knopf>span{font-size:.6875rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.musterbox-teaser__text{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.musterbox-teaser__preis{display:flex;gap:10px;align-items:center;font-weight:620}
.musterbox-teaser__preis .i{color:var(--messing-tief)}
.box{position:relative;background:#C9B79A;border-radius:var(--r);padding:28px 22px 22px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.box__deckel{position:absolute;left:12px;right:12px;top:-14px;height:18px;border-radius:var(--r-k) var(--r-k) 0 0;background:#B8A483;transform:perspective(200px) rotateX(24deg);transform-origin:bottom}
.box__faecher{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;background:#B09C7B;border-radius:var(--r-k)}
.box__fach{aspect-ratio:3/4;border-radius:3px;background:#E5DBCB;display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.box__fach span{font-weight:700;color:rgba(44,68,82,.35);font-size:.875rem}
.box__fach img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.box__fach button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;padding:0;z-index:2}
.box__fach button::before{content:"";position:absolute;inset:-10px}
.box__fach button .i{width:12px;height:12px}
.box__fach--neu img{animation:einlegen .45s var(--gleiten)}
@keyframes einlegen{from{transform:translateY(-30%);opacity:0}}
.box__zaehler{margin-top:12px;font-weight:650;color:#3D3220;text-align:center}
.box--gross{padding:36px 28px 28px}
.musterwand{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.musterwand__knopf{position:relative;width:100%;display:flex;flex-direction:column;gap:6px;border:0;padding:0;background:none;text-align:left;color:var(--rauch)}
.musterwand__knopf img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-k);box-shadow:0 0 0 1px var(--linie);transition:box-shadow .15s}
.musterwand__knopf>span{font-size:.75rem;font-weight:620;line-height:1.25}
.musterwand__knopf small{display:block;font-weight:500;color:var(--text-2)}
.musterwand__knopf:hover img{box-shadow:0 0 0 2px var(--rauch)}
.musterwand__haken{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:4px;border-radius:50%;background:var(--messing-tief);color:var(--weiss);opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--gleiten)}
.musterwand__knopf[aria-pressed="true"] img{box-shadow:0 0 0 3px var(--messing)}
.musterwand__knopf[aria-pressed="true"] .musterwand__haken{opacity:1;transform:none}
.musterwand__knopf:focus-visible{outline:none}
.musterwand__knopf:focus-visible img{outline:2px solid var(--messing-tief);outline-offset:2px}

/* ───────────── 8 · Herstellung ───────────── */
.herstellung{--film-format:2.8;--film-grund:#F2EEE7;--film-linie:#2C4452;--film-akzent:#A8834A;--film-text:#2C4452;--film-schrift:"Figtree",sans-serif}
.herstellung__film{min-height:200px}
.herstellung__clip{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:clamp(20px,2.4vw,32px);background:var(--rauch-tief)}
.herstellung__clip video{width:100%;aspect-ratio:16/6;object-fit:cover}
.herstellung__clip figcaption{position:absolute;left:12px;bottom:12px}
@media (max-width:640px){.herstellung__clip video{aspect-ratio:16/10}}

/* ───────────── 9 · Köln + Profi ───────────── */
.koeln__in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:start}
.koeln__haupt{display:flex;flex-direction:column;gap:20px}
.plz{display:flex;flex-direction:column;gap:8px;max-width:520px}
.plz label{font-weight:620;font-size:.875rem}
.plz__zeile{display:flex;gap:8px}
.plz__zeile input{max-width:200px;font-size:1.125rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.plz__ergebnis{font-weight:600;line-height:1.45;min-height:1.45em}
.plz__ergebnis small{display:block;font-weight:500;color:var(--text-2);font-size:.875rem}
.plz__ergebnis--fehler{color:var(--fehler)}
.lieferarten{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.lieferarten li{display:grid;grid-template-columns:28px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--linie);align-items:start}
.lieferarten .i{width:26px;height:26px;color:var(--messing-tief)}
.lieferarten b{display:block;font-weight:650}
.lieferarten span{font-size:.9375rem;color:var(--text-2)}
.lieferarten em{font-style:normal;font-weight:650;white-space:nowrap;font-size:.9375rem}
.profi-karte{background:var(--rauch);color:var(--sand);border-radius:var(--r);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.profi-karte h2{color:var(--weiss)}
.profi-karte p{color:#C9CFD2}
.profi-karte :focus-visible{outline-color:var(--messing-hell)}
.staffel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(232,225,213,.18);border-radius:var(--r-k);overflow:hidden;width:100%}
.staffel li{background:var(--rauch);padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.staffel b{font-size:1.75rem;font-weight:650;color:var(--messing-hell);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.staffel span{font-size:.8125rem;color:var(--sand)}
.profi-karte__klein{font-size:.8125rem}

/* ───────────── 10 · Zubehör ───────────── */
.zub-reihe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.zub{display:flex;flex-direction:column;gap:10px;background:var(--weiss);border-radius:var(--r);padding:10px 10px 12px;position:relative}
.zub__bild{position:relative;display:block;border-radius:var(--r-k);overflow:hidden;background:var(--sand-hell)}
.zub__bild img{width:100%;aspect-ratio:1;object-fit:cover}
.zub__bild .etikett{left:6px;bottom:6px;font-size:.6875rem;padding:2px 6px}
.zub__text{display:flex;flex-direction:column;gap:2px;padding-right:48px}
.zub__name{font-weight:650;font-size:.9375rem;text-decoration:none;line-height:1.25}
.zub__name:hover{text-decoration:underline}
.zub__einheit{font-size:.75rem;color:var(--text-2)}
.zub .k-rund{position:absolute;right:10px;bottom:12px}
.zub-reihe--kompakt{grid-template-columns:repeat(3,minmax(0,1fr))}
.zubehoer-teaser .klein{margin-top:16px}

/* ───────────── 11 · Herkunft ───────────── */
.herkunft{padding-top:0}
.herkunft__in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:start;padding-top:clamp(48px,6vw,88px);border-top:1px solid var(--linie-stark)}
.herkunft__in>div{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.fakten{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.fakten>div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie)}
.fakten dt{font-size:.8125rem;font-weight:650;color:var(--text-2);padding-top:2px}
.fakten dd{font-weight:600}

/* ───────────── Shop ───────────── */
.shop__kopf{display:grid;grid-template-columns:1fr minmax(0,460px);gap:16px 48px;align-items:end;padding:clamp(16px,2.6vw,32px) 0 24px}
.shop__intro{color:var(--text-2);line-height:1.55}
.kat-chips{margin-bottom:20px}
.shop__koerper{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start;border-top:1px solid var(--linie-stark);padding-top:20px}
.filter{position:sticky;top:calc(68px + 16px);max-height:calc(100vh - 68px - 32px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--fuge) transparent;padding-right:6px;padding-bottom:8px}
.filter__kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.filter__kopf h2{font-size:1.0625rem;font-weight:650}
.filter__zu{display:none}
.filter__fuss{display:none}
.fg{border:0;margin:0;padding:16px 0;border-bottom:1px solid var(--linie);min-width:0}
.fg legend{font-size:.875rem;font-weight:650;margin-bottom:8px;padding:0;float:left;width:100%}
.fg legend+*{clear:both}
.haken{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;min-height:40px;cursor:pointer;position:relative;font-size:.9375rem}
.haken input{position:absolute;opacity:0;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0;cursor:pointer}
.haken__box{width:20px;height:20px;border-radius:var(--r-k);border:1.5px solid var(--linie-stark);background:var(--weiss);display:grid;place-items:center;color:transparent;transition:background-color .12s,border-color .12s}
.haken__box .i{width:14px;height:14px}
.haken input:checked+.haken__box{background:var(--rauch);border-color:var(--rauch);color:var(--weiss)}
.haken input:focus-visible+.haken__box{outline:2px solid var(--messing-tief);outline-offset:2px}
.haken small,.tupfer small{font-size:.75rem;color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums}
.haken[data-null],.tupfer[data-null],.pille[data-null],.schalter[data-null]{opacity:.42}
.pillen{display:flex;flex-wrap:wrap;gap:6px}
.pille{position:relative;display:inline-flex;text-decoration:none}
.pille input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pille span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--linie-stark);background:var(--weiss);font-size:.875rem;font-weight:560;transition:background-color .12s,color .12s,border-color .12s}
.pille input:checked+span,.pille--an span{background:var(--rauch);border-color:var(--rauch);color:var(--weiss)}
.pille input:focus-visible+span{outline:2px solid var(--messing-tief);outline-offset:2px}
.pillen--links{margin:4px 0}
.tupfer-reihe{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.tupfer{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px 0;min-height:44px}
.tupfer input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tupfer__farbe{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:box-shadow .15s}
.tupfer__name{font-size:.6875rem;font-weight:600;text-align:center;line-height:1.2}
.tupfer input:checked~.tupfer__farbe{box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--rauch)}
.tupfer input:focus-visible~.tupfer__farbe{outline:2px solid var(--messing-tief);outline-offset:5px}
.regler{position:relative;height:36px;margin:4px 10px 0}
.regler__bahn{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:var(--sand-tief);border-radius:4px}
.regler__bahn i{position:absolute;top:0;bottom:0;background:var(--rauch);border-radius:4px}
.regler input{position:absolute;left:-10px;right:-10px;width:calc(100% + 20px);top:0;height:36px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.regler input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:24px;height:24px;border-radius:50%;background:var(--weiss);border:2px solid var(--rauch);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:grab}
.regler input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:var(--weiss);border:2px solid var(--rauch);cursor:grab}
.regler input::-webkit-slider-runnable-track{background:none}
.regler input:focus-visible{outline:none}
.regler input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--messing-tief);outline-offset:2px}
.regler__werte{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.fg--schalter{display:flex;flex-direction:column;gap:2px}
.fg--schalter .schalter__text{font-size:.875rem}

.shop__werkzeug{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;min-height:48px;margin-bottom:16px}
.shop__anzahl{font-weight:650;font-size:.9375rem;font-variant-numeric:tabular-nums}
.etiketten{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.etiketten button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--linie-stark);background:var(--weiss);font-size:.8125rem;font-weight:600;position:relative}
.etiketten button::after{content:"";position:absolute;inset:-4px 0}
.etiketten button .i{width:14px;height:14px;color:var(--text-2)}
.etiketten button:hover{border-color:var(--rauch)}
.etiketten .etiketten__alle{border:0;background:none;text-decoration:underline;color:var(--text-2)}
.shop__rechts{display:flex;align-items:center;gap:10px;margin-left:auto}
.filter-auf{display:none}
.ansicht>button span{display:none}
.ansicht>button{padding:0 12px}
.sortierung{position:relative;display:inline-flex;align-items:center}
.sortierung__icon{position:absolute;left:14px;width:16px;height:16px;pointer-events:none;color:var(--text-2)}
.sortierung select{appearance:none;min-height:44px;padding:0 36px 0 38px;border-radius:999px;border:1px solid var(--linie-stark);background:var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%232C4452'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center/14px;font-weight:600;font-size:.875rem;cursor:pointer}
.shop__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.shop__raster[data-ansicht="liste"]{display:block}
.shop__fuss{margin-top:32px;font-size:.8125rem;color:var(--text-2)}
.shop__leer{padding:48px 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.noscript-liste{columns:2}

/* Karte */
.karte{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.karte__bild{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--sand-tief)}
.karte__bild .verlegt,.karte__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.karte__bild img{transition:transform .6s var(--gleiten)}
.karte:hover .karte__bild img{transform:scale(1.03)}
.karte__bild::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--messing);transition:box-shadow .2s;pointer-events:none}
.karte:hover .karte__bild::after{box-shadow:inset 0 0 0 2px var(--messing)}
.karte__etiketten{position:absolute;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:4px;z-index:2;max-width:calc(100% - 64px)}
.karte__vergleich{position:absolute;top:6px;right:6px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;padding:0}
.karte__vergleich span{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.karte__vergleich .i{width:18px;height:18px}
.karte__vergleich[aria-pressed="true"] span{background:var(--rauch);color:var(--weiss)}
.karte__massstab{position:absolute;right:10px;bottom:10px;z-index:2;font-size:.6875rem;font-weight:650;color:var(--rauch);background:rgba(255,255,255,.86);padding:2px 6px;border-radius:var(--r-k);opacity:0;transition:opacity .2s}
.karte:hover .karte__massstab{opacity:1}
.karte__serie-etikett{position:absolute;left:10px;bottom:10px;z-index:2}
.karte__tupfer{display:flex;gap:6px;align-items:center;min-height:16px}
.karte__tupfer a,.karte__tupfer span{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);position:relative}
.karte__tupfer a::after{content:"";position:absolute;inset:-6px}
.karte__tupfer [aria-current]{box-shadow:0 0 0 2px var(--sand),0 0 0 3px var(--rauch)}
.karte__name{font-weight:650;font-size:1rem;line-height:1.25;text-decoration:none;color:var(--rauch)}
.karte__name::before{content:"";position:absolute;inset:0;z-index:1}
.karte__name:focus-visible{outline:none}
.karte:has(.karte__name:focus-visible) .karte__bild{outline:2px solid var(--messing-tief);outline-offset:3px}
.karte__meta{font-size:.8125rem;color:var(--text-2);margin-top:-6px;line-height:1.4}
.karte__unten{display:flex;align-items:center;gap:8px;margin-top:2px}
.karte__preis{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.karte__preis b{font-size:1.0625rem;font-weight:700;white-space:nowrap}
.karte__preis small{font-size:.75rem;color:var(--text-2)}
.karte__muster{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;background:none;font-size:.8125rem;font-weight:650;color:var(--messing-tief);white-space:nowrap;border-radius:999px}
.karte__muster .i{width:16px;height:16px}
.karte__muster:hover{background:var(--sand-hell)}
.karte__muster[aria-pressed="true"]{color:var(--ampel-gruen)}
.karte .k-rund{position:relative;z-index:2}
.karte .ampel{font-size:.75rem;font-weight:600;margin-top:-4px}
.karte .ampel i{width:7px;height:7px}
.karte--zub .karte__bild{background:var(--sand-hell)}
.karte--zub .karte__bild img{object-fit:cover}
.musterkarte{border-radius:var(--r);background:var(--rauch);color:var(--sand);padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:14px;justify-content:flex-end;min-height:100%;position:relative;overflow:hidden}
.musterkarte::before{content:"";position:absolute;right:-30px;top:-30px;width:180px;height:180px;background:repeating-linear-gradient(90deg,rgba(232,225,213,.08) 0 56px,transparent 56px 60px),repeating-linear-gradient(0deg,rgba(232,225,213,.08) 0 56px,transparent 56px 60px);transform:rotate(12deg)}
.musterkarte__icon{width:44px;height:44px;color:var(--messing-hell);margin-bottom:auto}
.musterkarte h2,.musterkarte .musterkarte__titel{font-size:1.375rem;font-weight:650;color:var(--weiss);line-height:1.2}
.musterkarte p{color:#C9CFD2;font-size:.9375rem}
.musterkarte .k{align-self:flex-start}
.musterkarte :focus-visible{outline-color:var(--messing-hell)}

/* Raum-Ansicht: Bild breiter */
.shop__raster[data-ansicht="raum"] .karte__bild{aspect-ratio:4/3}
.shop__raster[data-ansicht="raum"]{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Listen-Ansicht */
.liste{width:100%;border-collapse:collapse;font-size:.875rem;background:var(--weiss);border-radius:var(--r);overflow:hidden}
.liste th{font-size:.75rem;font-weight:650;color:var(--text-2);text-align:left;padding:12px 10px;border-bottom:1px solid var(--linie-stark);background:var(--sand-hell);white-space:nowrap}
.liste td{padding:8px 10px;border-bottom:1px solid var(--linie);vertical-align:middle;font-variant-numeric:tabular-nums}
.liste tr:last-child td{border-bottom:0}
.liste tbody tr:hover{background:#FBFAF7}
.liste__fliese{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;min-width:220px}
.liste__fliese .verlegt{width:52px;height:52px;border-radius:var(--r-k)}
.liste__fliese a{font-weight:650;text-decoration:none;line-height:1.25}
.liste__fliese a:hover{text-decoration:underline}
.liste__fliese small{display:block;color:var(--text-2);font-size:.75rem}
.liste .zahl-spalte{text-align:right;font-weight:700;white-space:nowrap}
.liste__aktionen{display:flex;gap:2px;justify-content:flex-end}
.liste__aktionen .k-icon{width:40px;height:40px}
.liste__aktionen .k-icon[aria-pressed="true"]{background:var(--rauch);color:var(--weiss)}
.liste .ampel{font-size:.8125rem;white-space:nowrap}
.liste-rahmen{overflow-x:auto;border-radius:var(--r)}

/* ───────────── Produktseite ───────────── */
.produkt__oben{display:grid;grid-template-columns:minmax(0,7fr) minmax(340px,5fr);gap:clamp(24px,4vw,64px);align-items:start;padding-top:20px}
.galerie{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(68px + 16px)}
.galerie__buehne{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand-hell);aspect-ratio:4/3}
.galerie__bild{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.galerie__bild img{max-width:100%;max-height:100%}
.galerie__flaeche{width:88%;height:84%;max-width:none!important;max-height:none!important;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(28,40,48,.22))}
.galerie__flaeche--frei{width:70%;height:70%}
.galerie__raum{width:100%;height:100%;object-fit:cover}
.galerie__bild--verlegt .verlegt{position:absolute;inset:0}
.galerie__bild--zub img{width:100%;height:100%;object-fit:cover}
.galerie__gross{position:absolute;right:10px;top:10px;z-index:3;background:rgba(255,255,255,.92)}
.galerie__gross:hover{background:var(--weiss)}
.galerie__daumen{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.galerie__daumen-knopf{flex:none;display:flex;flex-direction:column;gap:4px;border:0;background:none;padding:0;width:96px;text-align:left;font-size:.75rem;font-weight:620;color:var(--text-2)}
.galerie__daumen-bild{display:block;width:96px;height:72px;border-radius:var(--r-k);overflow:hidden;background:var(--sand-hell);box-shadow:0 0 0 1px var(--linie);position:relative}
.galerie__daumen-bild img,.galerie__daumen-bild .verlegt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.galerie__daumen-knopf[aria-selected="true"]{color:var(--rauch)}
.galerie__daumen-knopf[aria-selected="true"] .galerie__daumen-bild{box-shadow:0 0 0 2px var(--rauch)}
.kauf{display:flex;flex-direction:column;gap:18px}
.kauf__serie{display:flex;justify-content:space-between;gap:12px;font-size:.8125rem;font-weight:620;color:var(--text-2)}
.kauf__serie a{color:var(--messing-tief);text-decoration:none;font-weight:700}
.kauf__serie a:hover{text-decoration:underline}
.kauf__name{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.75rem);line-height:1.05;font-weight:650;letter-spacing:-.025em}
.kauf__merkmale{color:var(--text-2);margin-top:-8px}
.farbtupfer{display:flex;align-items:center;gap:10px}
.farbtupfer__punkt{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);position:relative;display:block}
.farbtupfer__punkt::after{content:"";position:absolute;inset:-8px}
.farbtupfer__punkt[aria-current]{box-shadow:0 0 0 2px var(--sand),0 0 0 4px var(--rauch)}
.farbtupfer__text{font-size:.875rem;color:var(--text-2);font-weight:600}
.kauf__preis{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-block:1px solid var(--linie)}
.preis-gross{display:flex;align-items:baseline;gap:8px}
.preis-gross b{font-size:2.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.preis-gross span{font-weight:600;color:var(--text-2)}
.kauf__mwst{font-size:.8125rem;color:var(--text-2)}
.kauf__paket{font-size:.875rem;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.kauf__lager{display:flex;flex-direction:column;gap:2px}
.kauf__lager p{font-size:.875rem;color:var(--text-2);padding-left:17px}
.kauf__rechner{background:var(--weiss);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px}
.kauf__rechner .ergebnis{position:static;background:var(--sand-hell);box-shadow:none;padding:16px}
.kauf__rechner .ergebnis__gross b{font-size:2.5rem}
.kauf__rechner .rechner{margin-top:0}
.kauf__neben{display:flex;flex-wrap:wrap;gap:8px}
.kauf__hinweis{display:flex;gap:10px;font-size:.875rem;color:var(--text-2);line-height:1.5}
.kauf__hinweis .i{color:var(--messing-tief);margin-top:1px}
.kauf__liefer{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kauf__liefer summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font-weight:620;list-style:none}
.kauf__liefer summary::-webkit-details-marker{display:none}
.kauf__liefer summary span{flex:1}
.details__pfeil{transition:transform .2s}
details[open] .details__pfeil{transform:rotate(180deg)}
.kauf__liefer .plz{padding-bottom:16px}
.stueck-wahl{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stueck-wahl .stepper .k-icon{width:46px;height:46px}
.produkt__abschnitt{padding-top:clamp(48px,6vw,88px)}
.produkt__abschnitt>h2{margin-bottom:24px}
.produkt__beschreibung{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px)}
.produkt__beschreibung>div{display:flex;flex-direction:column;gap:16px}
.haken-liste{display:flex;flex-direction:column;gap:10px}
.haken-liste li{display:flex;gap:10px}
.haken-liste .i{color:var(--ampel-gruen);margin-top:2px}
.produkt__verlegung{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:center}
.verlegt--band{aspect-ratio:16/9;border-radius:var(--r)}
.produkt__verlegung-text{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.technik{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px;border-top:1px solid var(--linie-stark)}
.technik>div{display:grid;grid-template-columns:minmax(140px,2fr) 3fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:.9375rem}
.technik dt{color:var(--text-2)}
.technik dd{font-weight:600}
.technik--offen dd{color:var(--text-2);font-weight:500;font-style:italic}
.karten-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.look-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.look-kacheln a{display:flex;flex-direction:column;gap:8px;text-decoration:none;font-weight:650}
.look-kacheln img{width:100%;aspect-ratio:10/7;object-fit:cover;border-radius:var(--r)}
.look-kacheln a:hover span{text-decoration:underline}

/* Dialoge */
dialog{border:0;padding:0;background:transparent;color:inherit;max-width:none;max-height:none}
dialog::backdrop{background:rgba(28,40,48,.5)}
.studio-dialog{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--sand-hell);border-radius:var(--r);box-shadow:var(--schatten-ebene);overflow:auto}
.studio-dialog[open]{animation:von-unten .26s var(--gleiten)}
.studio-dialog__kopf{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 12px 20px;border-bottom:1px solid var(--linie);background:var(--weiss);position:sticky;top:0;z-index:5}
.studio-dialog__koerper{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}
.studio-dialog__fuss{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.studio-dialog__menge{font-weight:650;margin-right:auto}
.datenblatt-dialog{width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--weiss);border-radius:var(--r);box-shadow:var(--schatten-ebene);overflow:auto}
.datenblatt{padding:32px;display:flex;flex-direction:column;gap:20px}
.datenblatt__kopf{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:2px solid var(--rauch);font-weight:650}
.datenblatt__kopf img{height:22px;width:auto}
.datenblatt__titel{margin-left:auto;font-size:.8125rem;color:var(--text-2);letter-spacing:.04em}
.datenblatt h2{font-size:1.75rem;font-weight:650;letter-spacing:-.02em}
.datenblatt h2 small{font-weight:500;color:var(--text-2);font-size:1.125rem}
.datenblatt__oben{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center}
.datenblatt__oben img{width:200px;height:150px;object-fit:contain;background:var(--sand-hell);border-radius:var(--r-k)}
.datenblatt .technik{grid-template-columns:1fr 1fr;column-gap:32px}
.datenblatt .technik>div{font-size:.8125rem;padding:8px 0}
.datenblatt__hinweis{font-size:.75rem;color:var(--text-2)}
.datenblatt-dialog__fuss{display:flex;gap:12px;padding:16px 32px 24px;border-top:1px solid var(--linie)}
.lupe-dialog{width:min(1400px,calc(100vw - 24px));height:calc(100vh - 24px);background:var(--rauch-tief);border-radius:var(--r);overflow:hidden;display:none}
.lupe-dialog[open]{display:grid;place-items:center}
.lupe-dialog img,.lupe-dialog .verlegt{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.lupe-dialog .k-icon{position:absolute;top:12px;right:12px;background:var(--weiss);z-index:3}

/* ───────────── Raumstudio-Seite ───────────── */
.studio-seite__titel{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 32px;flex-wrap:wrap;padding:12px 0 16px}
.studio-seite__titel>div:first-child{display:flex;flex-direction:column;gap:6px;max-width:820px}
.studio-seite__titel h1{font-size:var(--t-h2)}
.studio-seite__titel .seitenkopf__intro{font-size:1rem}
.studio-seite__raster{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(16px,2vw,28px);align-items:start}
.studio-seite__links{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(68px + 16px)}
.studio-seite__hinweis{display:flex;gap:10px;font-size:.875rem;color:var(--text-2)}
.studio-seite__hinweis .i{color:var(--messing-tief)}
.ki-leiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ki-leiste__beispiele{display:flex;gap:6px;flex-wrap:wrap}
.ki-leiste__beispiele button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--linie-stark);background:var(--weiss);font-size:.8125rem;font-weight:600}
.ki-leiste__beispiele img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.ki-leiste__beispiele button[aria-pressed="true"]{background:var(--rauch);color:var(--weiss);border-color:var(--rauch)}
.ki-leiste__text{font-size:.8125rem;color:var(--text-2);flex-basis:100%}
.studio-panel{background:var(--weiss);border-radius:var(--r);display:flex;flex-direction:column}
.studio-panel__teil{padding:18px 20px;border-bottom:1px solid var(--linie);display:flex;flex-direction:column;gap:12px}
.studio-panel__teil:last-child{border-bottom:0}
.studio-panel__titel{font-size:.875rem;font-weight:650}
.studio-panel__titel span{font-weight:500;color:var(--text-2)}
.raum-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.raum-karte{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;text-align:left;font-size:.75rem;font-weight:650;color:var(--rauch)}
.raum-karte img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-k);box-shadow:0 0 0 1px var(--linie);transition:box-shadow .15s}
.raum-karte span{display:flex;align-items:center;gap:4px}
.raum-karte span .i{width:14px;height:14px}
.raum-karte[aria-pressed="true"] img{box-shadow:0 0 0 3px var(--messing)}
.raum-karte:hover img{box-shadow:0 0 0 2px var(--rauch)}
.studio-suche{position:relative}
.studio-suche .i{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-2)}
.studio-suche input{width:100%;min-height:44px;border-radius:999px;border:1px solid var(--linie-stark);padding:0 14px 0 36px;font-size:1rem;background:var(--sand-hell)}
.fliesen-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;max-height:420px;overflow:auto;padding:2px 4px 2px 2px;scrollbar-width:thin;scrollbar-color:var(--fuge) transparent}
.fliesen-raster .fliese-wahl{width:auto}
.fliesen-raster .fliese-wahl__bild{width:100%;height:auto;aspect-ratio:1}
.auswahl--panel{box-shadow:none;padding:0}
.foto-schutz{display:flex;gap:8px;font-weight:620;color:var(--ampel-gruen);font-size:.875rem}
.foto-schritte{display:flex;flex-direction:column;gap:8px;font-size:.8125rem}
.foto-schritte li{display:flex;flex-direction:column}
.foto-schritte span{color:var(--text-2)}
.datei-knopf{position:relative;cursor:pointer}
.datei-knopf:focus-within{outline:2px solid var(--messing-tief);outline-offset:2px}
.foto-einstellungen{display:flex;flex-direction:column;gap:12px}
.studio-seite[data-modus="foto"] .buehne__pins{display:none}

/* ───────────── Looks-Seite ───────────── */
.look-sprung{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:clamp(32px,4vw,56px)}
.look-sprung a{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.look-sprung img{width:100%;aspect-ratio:10/7;object-fit:cover;border-radius:var(--r-k)}
.look-sprung span{font-weight:650;font-size:.875rem;line-height:1.25}
.look-sprung small{display:block;color:var(--messing-tief);font-weight:700;font-size:.75rem}
.look-sprung a:hover span{text-decoration:underline}
.looks-liste{display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
.looks-liste .look:nth-child(even){grid-template-columns:minmax(320px,5fr) minmax(0,7fr)}
.looks-liste .look:nth-child(even) .look__bild{order:2}
.look[data-hervor] .look__panel{box-shadow:0 0 0 2px var(--messing)}

/* ───────────── Musterseite ───────────── */
.muster-oben{display:grid;grid-template-columns:6fr 5fr;gap:clamp(24px,4vw,64px);align-items:start}
.muster-auswahl{display:flex;flex-direction:column;gap:14px;background:var(--weiss);border-radius:var(--r);padding:clamp(20px,2.4vw,28px)}
.muster-liste li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linie)}
.muster-liste img{width:48px;height:48px;object-fit:cover;border-radius:var(--r-k)}
.muster-liste a{font-weight:650;text-decoration:none;font-size:.9375rem}
.muster-liste small{display:block;color:var(--text-2);font-size:.75rem}
.muster-preis{display:flex;gap:10px;font-weight:620;font-size:.9375rem}
.muster-preis .i{color:var(--messing-tief)}
.schritt-reihe{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--linie-stark)}
.schritt-reihe li{padding:20px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.schritt-reihe li+li{padding-left:24px;border-left:1px solid var(--linie)}
.schritt-reihe__nr{font-size:.875rem;font-weight:700;color:var(--messing-tief);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.schritt-reihe p{color:var(--text-2);font-size:.9375rem}
.musterwand--alle{grid-template-columns:repeat(7,1fr);gap:12px}

/* ───────────── Vergleich ───────────── */
.vergleich{overflow-x:auto}
.vergleich table{width:100%;border-collapse:collapse;min-width:640px;background:var(--weiss);border-radius:var(--r);overflow:hidden}
.vergleich th,.vergleich td{padding:12px 16px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top;font-size:.9375rem}
.vergleich thead th{background:var(--sand-hell);vertical-align:bottom}
.vergleich tbody th{color:var(--text-2);font-weight:600;width:200px}
.vergleich td{font-weight:600}
.vergleich tr[data-anders] td{background:#FBF6EC}
.vergleich tr[data-anders] th::after{content:"≠";margin-left:8px;color:var(--messing-tief);font-weight:700}
.vergleich__kopf{display:flex;flex-direction:column;gap:8px}
.vergleich__kopf .verlegt{width:100%;aspect-ratio:4/3;border-radius:var(--r-k)}
.vergleich__kopf a{font-weight:650;text-decoration:none;font-size:1rem}
.vergleich__kopf .knopf-reihe{margin-top:4px;gap:6px}
.leer-zustand{padding:64px 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:520px}
.leer-zustand__icon{width:48px;height:48px;color:var(--messing)}
.leer-zustand--klein{padding:16px 0}

/* ───────────── Korb + Kasse ───────────── */
.korb-raster{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(24px,3vw,48px);align-items:start}
.korb-liste{background:var(--weiss);border-radius:var(--r);padding:4px 24px}
.korb-liste .posten{grid-template-columns:88px 1fr auto;gap:16px;padding:20px 0}
.korb-liste .posten__bild{width:88px;height:88px}
.korb-muster{margin-top:16px;background:var(--weiss);border-radius:var(--r);padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.korb-muster__bilder{display:flex}
.korb-muster__bilder img{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--weiss);margin-left:-8px}
.korb-muster__bilder img:first-child{margin-left:0}
.korb-muster b{flex:1}
.korb-vorschlag{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.korb-vorschlag small{font-weight:500;color:var(--text-2);font-size:.875rem;margin-left:8px}
.summe-karte{background:var(--weiss);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(68px + 16px)}
.summe-karte h2{font-size:1.0625rem;font-weight:650}
.summe-zeilen{display:flex;flex-direction:column;font-size:.9375rem}
.summe-zeilen>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie)}
.summe-zeilen dt{color:var(--text-2)}
.summe-zeilen dd{font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.summe-zeilen .summe-gesamt{border-bottom:0;padding-top:12px;font-size:1.25rem}
.summe-zeilen .summe-gesamt dt{color:var(--rauch);font-weight:650}
.summe-zeilen .summe-rabatt dd{color:var(--ampel-gruen)}
.summe-karte__klein{font-size:.8125rem;color:var(--text-2);line-height:1.5}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:32px;counter-reset:s}
.schritte li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:3px solid var(--sand-tief);font-weight:620;font-size:.875rem;color:var(--text-2)}
.schritte__nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sand-tief);font-size:.8125rem;font-weight:700;flex:none;color:var(--rauch)}
.schritte li[data-fertig]{border-color:var(--rauch);color:var(--rauch)}
.schritte li[data-fertig] .schritte__nr{background:var(--rauch);color:var(--weiss)}
.schritte li[aria-current]{border-color:var(--messing);color:var(--rauch)}
.schritte li[aria-current] .schritte__nr{background:var(--messing-tief);color:var(--weiss)}
.kasse__raster{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(24px,3vw,48px);align-items:start}
.kasse__schritt{background:var(--weiss);border-radius:var(--r);padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:16px}
.kasse__schritt h2:focus{outline:none}
.kasse-positionen{display:flex;flex-direction:column}
.kasse-positionen li{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linie);font-size:.9375rem}
.kasse-positionen .verlegt,.kasse-positionen img{width:52px;height:52px;border-radius:var(--r-k);object-fit:cover}
.kasse-positionen small{display:block;color:var(--text-2);font-size:.8125rem}
.wahl-gruppe{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.wahl-karte{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:start;padding:16px 18px;border-radius:var(--r);border:1px solid var(--linie-stark);cursor:pointer;position:relative;transition:border-color .15s,background-color .15s}
.wahl-karte input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wahl-karte__punkt{width:22px;height:22px;border-radius:50%;border:2px solid var(--linie-stark);margin-top:1px;transition:border .15s}
.wahl-karte input:checked~.wahl-karte__punkt{border:7px solid var(--rauch)}
.wahl-karte:has(input:checked){border-color:var(--rauch);background:var(--sand-hell);box-shadow:inset 0 0 0 1px var(--rauch)}
.wahl-karte:has(input:focus-visible){outline:2px solid var(--messing-tief);outline-offset:2px}
.wahl-karte:has(input:disabled){opacity:.45;cursor:not-allowed}
.wahl-karte__text b{display:block;font-weight:650}
.wahl-karte__text span{font-size:.875rem;color:var(--text-2)}
.wahl-karte em{font-style:normal;font-weight:650;white-space:nowrap}
.kasse__plz{max-width:280px}
.kasse__lieferzeit{font-weight:650}
.kasse__hinweise{display:flex;flex-direction:column;gap:6px;font-size:.875rem;color:var(--text-2)}
.kasse__hinweise li{display:flex;gap:8px}
.kasse__hinweise .i{width:16px;height:16px;color:var(--messing-tief);margin-top:3px}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.formular--karte{background:var(--weiss);border-radius:var(--r);padding:clamp(20px,3vw,32px)}
.pruef-bloecke{display:flex;flex-direction:column;gap:12px}
.pruef-block{border:1px solid var(--linie);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.pruef-block__kopf{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pruef-block__kopf h3{font-size:.9375rem;font-weight:650}
.pruef-block p,.pruef-block li{font-size:.9375rem;color:var(--text-2);line-height:1.5}
.pruef-block ul{padding-left:18px;margin:0}
.anfrage-text{width:100%;font:500 .875rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;padding:16px;border-radius:var(--r-k);border:1px solid var(--linie-stark);background:var(--sand-hell);color:var(--rauch);resize:vertical}
.fertig-zeichen .i{width:56px;height:56px;color:var(--ampel-gruen)}

/* ───────────── Profi ───────────── */
.profi-kopf{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:end;padding:clamp(24px,4vw,48px) 0 clamp(24px,3vw,40px)}
.profi-kopf>div:first-child{display:flex;flex-direction:column;gap:16px}
.profi-schalter-gross{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--weiss);padding:20px;border-radius:var(--r)}
.profi-status{font-size:.875rem;font-weight:620;color:var(--text-2)}
body[data-profi] .profi-status{color:var(--ampel-gruen)}
.vorteile{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie-stark)}
.vorteile li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 24px 20px 0;border-bottom:1px solid var(--linie)}
.vorteile__nr{font-size:.875rem;font-weight:700;color:var(--messing-tief);letter-spacing:.06em;padding-top:3px;font-variant-numeric:tabular-nums}
.vorteile b{display:block;font-weight:650;margin-bottom:4px}
.vorteile p{font-size:.9375rem;color:var(--text-2)}
.profi-werk{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(32px,4vw,56px)}
.werk-karte{background:var(--weiss);border-radius:var(--r);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:14px}
.werk-karte--breit{grid-column:1/-1}
.werk-karte>p{color:var(--text-2)}
.werk-ergebnis{font-weight:650;font-size:1.125rem;padding:14px 16px;background:var(--sand-hell);border-radius:var(--r-k);font-variant-numeric:tabular-nums}
.tabelle{width:100%;border-collapse:collapse;font-size:.9375rem}
.tabelle th,.tabelle td{padding:10px 12px;border-bottom:1px solid var(--linie);text-align:left}
.tabelle tbody th{font-weight:600}
.tabelle td{font-weight:650}
.tabelle-rahmen{overflow-x:auto;background:var(--weiss);border-radius:var(--r)}
.tabelle--daten{font-size:.8125rem;min-width:860px}
.tabelle--daten thead th{background:var(--sand-hell);font-size:.75rem;color:var(--text-2);white-space:nowrap}
.tabelle--daten td,.tabelle--daten th{white-space:nowrap}
.tabelle--daten td{font-weight:500}
.tabelle--daten a{font-weight:650;text-decoration:none}
.tabelle--daten a:hover{text-decoration:underline}
.zahl-spalte{text-align:right!important}
.schnell-zeilen{display:flex;flex-direction:column;gap:8px}
.schnell-zeile{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,3fr) auto;gap:10px;align-items:end}
.schnell-zeile__info{font-size:.875rem;min-height:48px;display:flex;align-items:center;color:var(--text-2)}
.schnell-zeile__info b{color:var(--rauch)}
.schnell-zeile__info button{background:none;border:0;padding:0;text-decoration:underline;font-weight:650;color:var(--rauch);cursor:pointer;min-height:32px}
.objekt{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:start}
.objekt__text{display:flex;flex-direction:column;gap:12px}

/* ───────────── Lieferung, Ratgeber, Über uns, Kontakt ───────────── */
.arten-liste{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie-stark);margin-bottom:clamp(32px,4vw,56px)}
.arten-liste li{display:flex;flex-direction:column;gap:12px;padding:24px 24px 24px 0}
.arten-liste li+li{padding-left:24px;border-left:1px solid var(--linie)}
.arten-liste__icon{width:32px;height:32px;color:var(--messing-tief)}
.arten-liste p{color:var(--text-2);font-size:.9375rem}
.arten-liste em{font-style:normal;font-weight:700;margin-top:auto}
.liefer-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ampel-liste{display:flex;flex-direction:column;gap:12px}
.ampel-liste p{font-size:.9375rem;color:var(--text-2);padding-left:17px}
.ratgeber-liste{display:flex;flex-direction:column;gap:16px}
.ratgeber-eintrag{display:grid;grid-template-columns:minmax(200px,3fr) 7fr;gap:clamp(16px,3vw,40px);text-decoration:none;background:var(--weiss);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s}
.ratgeber-eintrag:hover{box-shadow:0 0 0 2px var(--messing)}
.ratgeber-eintrag__bild{position:relative;min-height:200px}
.ratgeber-eintrag__bild .verlegt{position:absolute;inset:0}
.ratgeber-eintrag__icon{position:absolute;left:16px;bottom:16px;width:44px;height:44px;padding:10px;border-radius:50%;background:var(--weiss);color:var(--messing-tief);z-index:2}
.ratgeber-eintrag__text{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 0}
.ratgeber-eintrag__text small{font-weight:650;color:var(--messing-tief);font-size:.8125rem}
.ratgeber-eintrag__text b{font-size:var(--t-h2);font-weight:650;letter-spacing:-.02em;line-height:1.1}
.ratgeber-eintrag__text>span:not(.k-text){color:var(--text-2);max-width:62ch}
.artikel__kopf{padding:clamp(24px,4vw,48px) 0 clamp(24px,3vw,40px);max-width:860px;display:flex;flex-direction:column;gap:16px}
.artikel__meta{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:650;color:var(--messing-tief)}
.artikel__lead{font-size:1.25rem;line-height:1.5;color:var(--text-2)}
.artikel__raster{display:grid;grid-template-columns:minmax(0,68ch) minmax(260px,340px);gap:clamp(32px,5vw,96px);align-items:start}
.artikel__text section{padding-top:32px}
.artikel__text section:first-child{padding-top:0}
.artikel__text h2{margin-bottom:12px}
.artikel__text p{margin-bottom:14px;font-size:1.0625rem;line-height:1.7}
.artikel__liste{list-style:disc;padding-left:20px;margin:0 0 14px;display:flex;flex-direction:column;gap:6px;font-size:1.0625rem}
.artikel__liste li::marker{color:var(--messing-tief)}
.artikel__seite{position:sticky;top:calc(68px + 16px);display:flex;flex-direction:column;gap:14px}
.karten-liste{display:flex;flex-direction:column;gap:8px}
.karten-liste .karte-zeile{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:var(--weiss);border-radius:var(--r);padding:8px;text-decoration:none}
.karte-zeile .verlegt{width:56px;height:56px;border-radius:var(--r-k)}
.karte-zeile b{display:block;font-weight:650;font-size:.9375rem;line-height:1.25}
.karte-zeile small{color:var(--text-2);font-size:.8125rem}
.karte-zeile:hover b{text-decoration:underline}
.link-liste{display:flex;flex-direction:column;gap:4px}
.link-liste a{font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.ueber .seitenkopf h1{max-width:18ch}
.ueber__raster{display:grid;grid-template-columns:7fr 4fr;gap:clamp(32px,5vw,96px);align-items:start}
.ueber__text{display:flex;flex-direction:column;gap:18px;font-size:1.0625rem;line-height:1.7}
.ueber__erster{font-size:1.3125rem;line-height:1.55;color:var(--rauch)}
.ueber__seite{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.nicht-karte{background:var(--weiss);border-radius:var(--r);padding:20px;border-left:3px solid var(--messing);display:flex;flex-direction:column;gap:8px}
.nicht-karte p{color:var(--text-2);font-size:.9375rem}
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.wege li{display:flex;gap:14px;background:var(--weiss);border-radius:var(--r);padding:20px}
.wege__icon{width:28px;height:28px;color:var(--messing-tief)}
.wege b{display:block}
.wege a,.wege span{font-weight:600}
.wege small{display:block;color:var(--text-2);font-size:.8125rem;margin-top:2px}
.kontakt__raster{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,4vw,64px);align-items:start}
.faq{display:flex;flex-direction:column}
.faq>h2{margin-bottom:16px}
.faq__eintrag{border-bottom:1px solid var(--linie)}
.faq__eintrag summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none}
.faq__eintrag summary::-webkit-details-marker{display:none}
.faq__plus{transition:transform .2s var(--gleiten);color:var(--messing-tief)}
.faq__eintrag[open] .faq__plus{transform:rotate(45deg)}
.faq__eintrag p{padding:0 40px 18px 0;color:var(--text-2)}
.faq__berater{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding:20px;background:var(--weiss);border-radius:var(--r)}
.faq__berater p{font-family:var(--serife);font-style:italic;font-size:1.5rem;line-height:1.2;max-width:28ch}

/* ───────────── Responsiv ───────────── */
@media (max-width:1280px){
  .zub-reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .musterwand--alle{grid-template-columns:repeat(5,1fr)}
  .look-sprung{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1180px){
  .hauptnav{display:none}
  .kopf-knopf--menue{display:inline-flex}
  .kopf__raster{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .kopf__text{display:contents}
  .kopf__text h1{order:1;max-width:20ch}
  .kopf__unter{order:2;max-width:60ch}
  .kopf__buehne{order:3}
  .kopf__raeume{order:4}
  .kopf__text .auswahl{order:5}
  .shop__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karten-reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio-seite__raster{grid-template-columns:minmax(0,1fr) 340px}
  .farbfaecher{grid-template-columns:1fr}
  .fuss__oben{grid-template-columns:1fr 1fr 1fr;row-gap:32px}
  .fuss__marke{grid-column:1/-1}
}
@media (max-width:1000px){
  .look,.looks-liste .look:nth-child(even){grid-template-columns:1fr}
  .looks-liste .look:nth-child(even) .look__bild{order:0}
  .berater-band__in,.rechner-abschnitt__in,.musterbox-teaser__in,.koeln__in,.herkunft__in,.produkt__beschreibung,.produkt__verlegung,.objekt,.kontakt__raster,.ueber__raster,.muster-oben{grid-template-columns:1fr}
  .produkt__oben{grid-template-columns:1fr}
  .galerie{position:static}
  .technik{grid-template-columns:1fr}
  .studio-seite__raster{grid-template-columns:1fr}
  .studio-seite__links{position:static}
  .korb-raster,.kasse__raster{grid-template-columns:1fr}
  .summe-karte{position:static}
  .artikel__raster{grid-template-columns:1fr}
  .artikel__seite{position:static}
  .ergebnis{position:static}
  .fugenfeld{grid-template-columns:repeat(3,1fr)}
  .fugenfeld__zelle{border-radius:0!important}
  .fugenfeld{overflow:hidden}
  .vorteile{grid-template-columns:repeat(2,1fr)}
  .profi-kopf{grid-template-columns:1fr}
}
@media (max-width:899px){
  :root{--kopf-h:60px}
  .service{display:none}
  .kopfzeile__in{min-height:60px;gap:8px}
  .suche{display:none}
  .kopfzeile__aktionen{margin-left:auto}
  .kopf-knopf__wort{display:none}
  .kopf-knopf{padding:0 10px}
  .handyleiste{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;background:var(--rauch-tief);border-radius:var(--r);padding:6px;box-shadow:var(--schatten-ebene)}
  .handyleiste a,.handyleiste button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;background:none;color:var(--sand);text-decoration:none;font-size:.6875rem;font-weight:650;border-radius:var(--r-k)}
  .handyleiste .i{width:22px;height:22px}
  .handyleiste [aria-current="page"]{color:var(--messing-hell)}
  .handyleiste a:active,.handyleiste button:active{background:rgba(255,255,255,.08)}
  .handyleiste .zahl{position:absolute;top:4px;left:calc(50% + 6px);background:var(--messing-hell);color:var(--rauch-tief)}
  .handyleiste :focus-visible{outline-color:var(--messing-hell)}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .berater-knopf{display:none}
  .chat{inset:0;width:100%;height:100%;border-radius:0;right:0;bottom:0}
  .vergleichsleiste{bottom:calc(84px + env(safe-area-inset-bottom));padding:8px 8px 8px 12px;gap:10px}
  .vergleichsleiste__platz{width:44px;height:44px}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
  .kopf__raeume .chips{flex-wrap:nowrap}
  .wegweiser__liste{grid-template-columns:1fr}
  .wegweiser__schritt{padding:24px 0}
  .wegweiser__schritt+.wegweiser__schritt{border-left:0;border-top:1px solid var(--linie)}
  .shop__kopf{grid-template-columns:1fr}
  .shop__koerper{grid-template-columns:1fr;border-top:0;padding-top:0}
  .filter{position:fixed;inset:0;z-index:125;max-height:none;background:var(--sand-hell);padding:0;display:flex;flex-direction:column}
  .filter:not([data-offen]){display:none}
  .filter[data-offen]{animation:von-unten .26s var(--gleiten)}
  .filter__kopf{padding:8px 8px 8px 20px;background:var(--weiss);border-bottom:1px solid var(--linie);min-height:60px}
  .filter__zu{display:inline-grid}
  .filter__gruppen{flex:1;overflow:auto;padding:0 20px 24px}
  .filter__fuss{display:block;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--weiss);border-top:1px solid var(--linie)}
  .filter-auf{display:inline-flex}
  .shop__werkzeug{gap:10px}
  .shop__rechts{margin-left:0;width:100%;justify-content:space-between}
  .sortierung select{max-width:150px}
  .etiketten{order:5;flex-basis:100%}
  .look-sprung{grid-template-columns:repeat(2,1fr)}
  .schritte{grid-template-columns:repeat(4,1fr)}
  .schritte__titel{display:none}
  .schritte li[aria-current] .schritte__titel{display:inline;font-size:.8125rem}
  .schritte li[aria-current]{grid-column:span 1}
  .formular{grid-template-columns:1fr}
  .arten-liste,.liefer-raster,.wege{grid-template-columns:1fr}
  .arten-liste li+li{padding-left:0;border-left:0;border-top:1px solid var(--linie)}
  .schritt-reihe{grid-template-columns:1fr}
  .schritt-reihe li+li{padding-left:0;border-left:0}
  .ratgeber-eintrag{grid-template-columns:1fr}
  .ratgeber-eintrag__bild{min-height:150px}
  .ratgeber-eintrag__text{padding:0 20px 24px}
  .profi-werk{grid-template-columns:1fr}
  .schnell-zeile{grid-template-columns:1fr 1fr}
  .schnell-zeile__info{grid-column:1/-1;min-height:0}
  .fuss__oben{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .kopf{padding-top:16px}
  .kopf__raster{gap:16px}
  .kopf__text{gap:14px}
  .kopf__text h1{font-size:2rem}
  .kopf__buehne{margin-inline:calc(var(--rand) * -1);gap:10px}
  .buehne__rahmen{border-radius:0}
  .leiste{padding-inline:var(--rand)}
  .buehne__werkzeug{top:8px;right:8px;gap:0;padding:2px}
  .werkzeug{padding:0 8px;font-size:.75rem;min-height:40px}
  .werkzeug span{display:none}
  .werkzeug .i{width:20px;height:20px}
  .werkzeug{min-width:44px;justify-content:center}
  .pop{top:56px;left:8px;right:8px;width:auto}
  .lieferarten li{grid-template-columns:28px 1fr}
  .lieferarten em{grid-column:2;margin-top:-8px}
  .pin{min-height:32px;font-size:.75rem;padding:0 10px 0 6px}
  .leiste__kopf{flex-direction:column;align-items:flex-start;gap:8px}
  .fliese-wahl{width:92px}
  .fliese-wahl__bild{width:92px;height:76px}
  .auswahl__knoepfe{flex-direction:column}
  .fugenfeld{grid-template-columns:repeat(2,1fr)}
  .fugenfeld__schild{left:6px;bottom:6px;padding:6px 8px;max-width:calc(100% - 12px)}
  .fugenfeld__schild b{font-size:.8125rem}
  .ton-leiter{flex-direction:column;gap:12px}
  .ton{flex:none!important}
  .ton a{flex-direction:row;align-items:center;gap:12px}
  .ton__streifen{height:40px;flex:1}
  .ton__name{min-width:84px}
  .berater-band__form{flex-wrap:wrap;border-radius:var(--r);padding:12px}
  .berater-band__form input{flex-basis:calc(100% - 40px)}
  .berater-band__form .k{width:100%}
  .rechner__felder{grid-template-columns:1fr auto 1fr}
  .musterwand,.musterbox-teaser .musterwand{grid-template-columns:repeat(4,1fr);gap:6px}
  .musterwand--alle{grid-template-columns:repeat(3,1fr)}
  .musterwand__knopf>span{font-size:.6875rem}
  .box{padding:22px 12px 14px}
  .box__faecher{gap:5px;padding:6px}
  .staffel b{font-size:1.375rem}
  .zub-reihe,.zub-reihe--kompakt{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .zub{padding:8px 8px 10px}
  .zub__text{padding-right:0}
  .zub .k-rund{position:static;align-self:flex-end;margin-top:-4px}
  .shop__raster,.shop__raster[data-ansicht="raum"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .shop__raster[data-ansicht="raum"]{grid-template-columns:1fr}
  .karte__name{font-size:.9375rem}
  .karte__unten{flex-wrap:wrap;gap:4px}
  .karte__preis{flex-basis:100%}
  .karte__preis b{font-size:1rem}
  .karte__muster{padding:0 8px 0 0}
  .karte__muster span{display:none}
  .karte__muster{width:44px;justify-content:center;padding:0}
  .karte .k-rund{margin-left:auto}
  .karte__etiketten .etikett{font-size:.6875rem;padding:3px 6px}
  .ansicht>button{padding:0 10px}
  .karten-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .look-kacheln{grid-template-columns:1fr 1fr}
  .look__produkte li{grid-template-columns:48px 1fr auto;row-gap:2px}
  .look__produkte .preis-klein{grid-column:2;grid-row:2;font-size:.875rem}
  .look__produkte .k-rund{grid-column:3;grid-row:1/3}
  .look__produkte .look__thumb{grid-row:1/3}
  .look__thumb .verlegt{width:48px;height:48px}
  .hotspot-pop{left:12px!important;right:12px;width:auto}
  .korb-liste{padding:0 16px}
  .korb-liste .posten{grid-template-columns:64px 1fr;gap:12px}
  .korb-liste .posten__bild{width:64px;height:64px}
  .korb-liste .posten__summe{grid-column:2;text-align:left}
  .wahl-karte{grid-template-columns:24px 1fr;padding:14px}
  .wahl-karte em{grid-column:2}
  .vorteile{grid-template-columns:1fr}
  .fakten>div{grid-template-columns:110px 1fr}
  .datenblatt{padding:20px}
  .datenblatt__oben{grid-template-columns:1fr}
  .datenblatt .technik{grid-template-columns:1fr}
  .raum-karten{grid-template-columns:repeat(3,1fr)}
  .fliesen-raster{grid-template-columns:repeat(3,1fr);max-height:none}
  .studio-seite__titel .segment{width:100%}
  .studio-seite__titel .segment>button{flex:1}
  .studio-dialog{width:100vw;max-height:100vh;height:100vh;border-radius:0}
  .studio-dialog__koerper{padding:12px 0 20px}
  .studio-dialog__koerper>.chips,.studio-dialog__fuss{padding-inline:16px}
  .studio-dialog .buehne__rahmen{border-radius:0}
  .fuss__oben{grid-template-columns:1fr}
  .vergleichsleiste__titel small{display:none}
  .seitenkopf--zeile{flex-direction:column;align-items:flex-start}
  .tabelle th,.tabelle td{padding:10px 8px}
  .vergleich tbody th{width:120px}
}

/* Bewegung reduziert: Überblenden statt Gleiten, keine Pulse */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chat,.schublade__panel,.menue__panel,.filter[data-offen],.pop,.toast__eintrag,.vergleichsleiste,.studio-dialog[open],.box__fach--neu img{animation-name:einblenden!important;animation-duration:.15s!important}
  .hotspot::before{display:none}
  .zahl.ploppt{animation:none}
  .buehne__rahmen[data-laedt]::after{animation:none;transform:none;opacity:.6}
  .k-text:hover .i,.ton a:hover .ton__streifen,.fugenfeld__zelle a:hover .verlegt,.karte:hover .karte__bild img,.berater-knopf:hover,.pin[data-ziel]{transform:none}
  .pin[data-ziel]{transform:translate(-50%,-50%)}
}

/* Druck: Datenblatt bzw. Datentabelle allein */
@media print{
  @page{margin:14mm}
  body{background:#fff;padding:0}
  body.drucke-blatt>*:not(.datenblatt-dialog){display:none!important}
  body.drucke-blatt .datenblatt-dialog{display:block!important;position:static;width:auto;max-height:none;box-shadow:none;overflow:visible}
  body.drucke-blatt .datenblatt-dialog__fuss{display:none}
  body.drucke-tabelle>*:not(main){display:none!important}
  body.drucke-tabelle main>*>*:not(.abschnitt-eng:has(.tabelle--daten)){display:none!important}
  body.drucke-tabelle .tabelle--daten{min-width:0;font-size:9pt}
  .tabelle-rahmen{overflow:visible;box-shadow:none}
}

/* ───────────── Nachträge ───────────── */
[data-mz-shop][data-zubehoer] .filter,[data-mz-shop][data-zubehoer] .ansicht,[data-mz-shop][data-zubehoer] .sortierung,[data-mz-shop][data-zubehoer] .filter-auf{display:none}
[data-mz-shop][data-zubehoer] .shop__koerper{grid-template-columns:1fr}
[data-mz-shop][data-zubehoer] .shop__raster{grid-template-columns:repeat(4,minmax(0,1fr))}
.posten-liste{display:flex;flex-direction:column}
.schublade .korb-muster{margin-top:12px;text-decoration:none;padding:12px 14px;color:var(--rauch)}
.schublade .korb-muster .i{margin-left:auto}
@media (max-width:640px){[data-mz-shop][data-zubehoer] .shop__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}

body[data-vergleich-an] .toast{bottom:112px}
@media (max-width:899px){body[data-vergleich-an] .toast{bottom:calc(168px + env(safe-area-inset-bottom))}}
.studio-dialog .buehne{width:min(100%,calc((100vh - 290px) * 1.49));margin-inline:auto}
@media (max-width:640px){.studio-dialog .buehne{width:100%}}
.karte__tupfer{position:relative;z-index:2;width:max-content}
.shop__koerper>*,.shop__ergebnis,.produkt__oben>*,.korb-raster>*,.kasse__raster>*,.studio-seite__raster>*{min-width:0}
@media (max-width:640px){
  .liste th:nth-child(3),.liste td:nth-child(3),.liste th:nth-child(4),.liste td:nth-child(4),.liste th:nth-child(6),.liste td:nth-child(6){display:none}
  .liste__fliese{min-width:150px;grid-template-columns:40px 1fr;gap:8px}
  .liste__fliese .verlegt{width:40px;height:40px}
  .liste td,.liste th{padding:8px 6px}
  .liste__aktionen{flex-direction:column}
}
@media (max-width:899px){
  .shop__rechts{gap:8px;flex-wrap:nowrap}
  .shop__rechts .sortierung{flex:1 1 auto;min-width:0}
  .shop__rechts .sortierung select{width:100%;max-width:none;padding:0 28px 0 12px;background-position:right 10px center}
  .shop__rechts .sortierung__icon{display:none}
  .ansicht>button{padding:0 9px}
  .filter-auf{padding:0 14px;flex:none}
}
@media (max-width:899px){
  .shop__werkzeug{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"anzahl filter" "ansicht sort" "et et";gap:10px 12px;align-items:center}
  .shop__rechts{display:contents}
  .shop__anzahl{grid-area:anzahl}
  .filter-auf{grid-area:filter;justify-self:end}
  .ansicht{grid-area:ansicht}
  .shop__rechts .sortierung{grid-area:sort}
  .etiketten{grid-area:et}
  .etiketten:empty{display:none}
  .vergleichsleiste__titel{display:none}
  .vergleichsleiste__plaetze{gap:6px}
  .vergleichsleiste__platz{width:40px;height:40px}
  .vergleichsleiste .k{min-height:44px;padding:0 14px;flex:1}
}
/* Finger: Ziele mindestens 44 px */
@media (pointer:coarse){
  .segment--klein>button,.segment--klein .segment__radio span,.segment>button,.segment__radio span{min-height:44px}
  .chat__chips .chip,.pille span{min-height:44px}
  .posten__weg,.k-text--klein{min-height:44px}
  .karte__tupfer a::after{inset:-12px}
  .look-wahl__knopf{min-height:52px}
}
.buehne__leinwand .kt-rs-ebene{z-index:2}

.buehne .kt-rs-marke[data-ort=vorher]{top:auto;bottom:14px;left:14px}
.buehne .kt-rs-marke[data-ort=nachher]{top:auto;bottom:14px;right:14px}