/* Dekor-Seiten /boden/ — erzeugt von tools/boden_seiten.py (Timo 14.10.2026).
   Farben wie rechner.css: tools/dunkel.py macht daraus die dunkle Variante. */
:root{
  --ink:#282f33; --ink2:#465158; --muted:#718087; --line:#e2e7ea;
  --bg:#f4f6f8; --card:#fff; --accent:#0d767a; --accent-d:#075b5e;
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden gilt immer — auch gegen display:grid/flex weiter unten */
[hidden]{display:none !important}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--accent-d)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
main.wrap{padding-top:18px;padding-bottom:40px}

/* Knöpfe: Rahmen oder Fläche + Text + Pfeil (CLAUDE.md §7) */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;text-decoration:none;border-radius:10px;padding:11px 18px;line-height:1.25}
.knopf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.knopf.ruhig{border:1.5px solid var(--accent);color:var(--accent-d);background:var(--card)}
.knopf.hell{background:#fff;color:var(--accent-d)}
.knopf.voll{background:var(--accent);color:#fff;border:1.5px solid var(--accent)}
.knopf.voll:hover{background:var(--accent-d)}
.knopf.klein{padding:6px 10px;font-size:.88rem;border-radius:8px}
.knopf.gross{width:100%;padding:15px 18px;font-size:1.08rem}
.knopf[disabled]{opacity:.6;cursor:wait}
button.knopf{font:inherit;font-weight:700;cursor:pointer}
p.klein,.klein{font-size:.85rem;color:var(--muted);line-height:1.5}

.zurueck{display:inline-block;font-weight:700;text-decoration:none;color:var(--accent-d);
  border:1.5px solid var(--accent);border-radius:10px;padding:8px 14px;margin-bottom:16px;background:var(--card)}

/* ---------- Dekor ---------- */
.dekor-raster{display:grid;gap:22px;align-items:start}
@media (min-width:860px){.dekor-raster{grid-template-columns:1.25fr 1fr;gap:34px}}
.dekor-bild{margin:0 -16px}
.dekor-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--line)}
@media (min-width:640px){.dekor-bild{margin:0}.dekor-bild img{border-radius:14px}}
.kicker{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.kicker span{color:var(--muted);font-weight:600;letter-spacing:0;text-transform:none}
.dekor-daten h1{font-size:clamp(1.3rem,3.4vw,1.7rem);line-height:1.22;font-weight:800;
  letter-spacing:-.01em;margin:4px 0 12px;overflow-wrap:anywhere}

/* ---------- Preis und Kaufen ---------- */
.kaufen{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.preis{margin:0;line-height:1.2}
.preis b{font-size:1.75rem;font-weight:800;color:var(--ink)}
.preis span{color:var(--muted);font-size:.95rem}
.preis-neben{color:var(--ink2);font-size:.92rem;margin:4px 0 12px}
.flaeche{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;margin-bottom:6px}
.eingabe{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--muted)}
.kaufen input[type=number],.kasse input,.kasse textarea{font:inherit;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:8px;padding:8px 10px}
.flaeche input{width:110px}
.verschnitt{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink2);margin-bottom:12px}
.anzahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.anzahl > span{font-weight:700;font-size:.95rem;min-width:84px}
.anzahl input{width:72px;text-align:center}
.zwischen{font-weight:700;margin:10px 0 12px;color:var(--ink)}
.kaufen [data-in-korb]{width:100%;padding:13px 18px;font-size:1.05rem}
.im-korb{margin:10px 0 0;font-weight:700;color:var(--accent-d)}
.kaufen p.klein{margin:12px 0 0}
.angaben{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:.97rem}
.angaben th,.angaben td{text-align:left;vertical-align:top;padding:8px 0;border-top:1px solid var(--line)}
.angaben tr:last-child th,.angaben tr:last-child td{border-bottom:1px solid var(--line)}
.angaben th{font-weight:500;color:var(--muted);width:38%;padding-right:12px}
.angaben td{font-weight:700}
.dekor-mehr{display:grid;gap:20px;margin-top:28px}
@media (min-width:860px){.dekor-mehr{grid-template-columns:1fr 1fr;gap:34px}}
.dekor-mehr p{color:var(--ink2);margin-bottom:12px}
.dekor-mehr p.klein{font-size:.9rem}
.dekor-mehr p.hinweis{font-size:.88rem;color:var(--muted);border-left:3px solid var(--accent);padding-left:12px}

/* ---------- Aufruf: Rechner / Besichtigung ---------- */
.aufruf{background:var(--accent);color:#fff;border-radius:16px;padding:22px;margin:30px 0 22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.aufruf h2{font-size:1.3rem;line-height:1.25;margin-bottom:4px}
.aufruf p{color:#d9f0f0;font-size:.95rem}
@media (max-width:520px){.aufruf .knopf{width:100%}}

.blaettern{display:flex;justify-content:space-between;gap:10px}
.blaettern .knopf{flex:1 1 0;max-width:260px;font-size:.93rem;padding:10px 12px}

/* ---------- Übersicht ---------- */
.uebersicht h1{font-size:clamp(1.5rem,4vw,2.05rem);line-height:1.2;font-weight:800;margin:6px 0 8px}
.uebersicht .lead{color:var(--ink2);max-width:60ch;margin-bottom:18px}
.inhalt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.inhalt .knopf{font-size:.9rem;padding:8px 12px}
.inhalt small{color:var(--muted);font-weight:600}
.abschnitt{padding-top:26px;scroll-margin-top:70px}
.abschnitt h2{font-size:1.3rem;line-height:1.25}
.abschnitt .unter{color:var(--muted);margin-bottom:12px}
.kacheln{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kacheln a{display:block;height:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;text-decoration:none;color:var(--ink)}
.kacheln img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--line)}
.kacheln b{display:block;font-size:.88rem;line-height:1.3;padding:8px 10px 2px;overflow-wrap:anywhere}
.kacheln span{display:block;font-size:.8rem;color:var(--muted);padding:0 10px 10px}
.kacheln a:hover,.kacheln a:focus-visible{border-color:var(--accent)}

/* ---------- Leiste «Zum Warenkorb» ---------- */
.korb-leiste{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:10px;
  max-width:560px;margin:0 auto;background:var(--accent);color:#fff;text-decoration:none;border-radius:14px;
  padding:12px 16px;box-shadow:0 6px 24px rgba(31,41,51,.25)}
.korb-leiste[hidden]{display:none}
.korb-leiste .korb-weiter{margin-left:auto;font-weight:800;white-space:nowrap}
.korb-icon{font-size:1.2rem}
body.mit-korb footer{padding-bottom:90px}

/* ---------- Übersicht: Filter und Sortierung ---------- */
.uebersicht h1{margin-bottom:12px}
.werkzeug{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px}
.filter-wahl{position:relative}
.filter-panel{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:min(92vw,360px);background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(31,41,51,.18)}
.filter-panel[hidden]{display:none}
.filter-panel fieldset{border:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.filter-panel legend{font-weight:700;font-size:.9rem;margin-bottom:8px;width:100%}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.92rem;background:var(--card)}
.chip input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.filter-knoepfe{display:flex;gap:8px;justify-content:space-between}
.sortieren{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.sortieren select{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:8px 10px}
.treffer{margin-left:auto;color:var(--muted);font-size:.9rem}
.kacheln strong{display:block;padding:0 10px 10px;font-size:.98rem;color:var(--ink)}
.kacheln strong small{color:var(--muted);font-weight:500}
.kacheln li[hidden]{display:none}
.leer{margin:20px 0;color:var(--ink2)}
.fussnote{margin-top:18px}

/* ---------- Kasse ---------- */
.kasse h1{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;margin:0 0 14px}
.kasse-form{max-width:760px}
.korb-liste{list-style:none;display:grid;gap:10px;margin-bottom:18px}
.korb-liste li{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:10px}
.korb-liste img{width:96px;height:72px;object-fit:cover;border-radius:8px;background:var(--line)}
.korb-text a{font-weight:700;color:var(--ink);text-decoration:none;display:block;line-height:1.3;overflow-wrap:anywhere}
.korb-text .klein{display:block;margin:2px 0 8px}
.korb-preis{white-space:nowrap}
.knopf.weg{border-color:var(--line);color:var(--muted)}
@media (max-width:560px){.korb-liste li{grid-template-columns:72px 1fr}.korb-liste img{width:72px;height:54px}
  .korb-preis{grid-column:2}}
.block{border:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 16px}
.block legend,.block h2{font-weight:800;font-size:1.08rem;padding:0;margin-bottom:10px}
fieldset.block legend{float:left;width:100%}
fieldset.block > :not(legend){clear:both}
.option{display:flex;gap:10px;align-items:flex-start;margin:8px 0;cursor:pointer;color:var(--ink2)}
.option input{margin-top:5px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
.option b{color:var(--ink)}
.felder{display:grid;gap:10px 12px;grid-template-columns:1fr 1fr;margin:6px 0 10px;clear:both}
.felder label,label.breit{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.9rem}
.felder label.breit{grid-column:1/-1}
label.breit{margin-top:6px}
.felder small,label.breit small{color:var(--muted);font-weight:500}
@media (max-width:480px){.felder{grid-template-columns:1fr}}
.kasse input.ungueltig{border-color:#c0392b}
.falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.summen{width:100%;border-collapse:collapse;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.summen th,.summen td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--line);font-weight:500}
.summen td{text-align:right;white-space:nowrap}
.summen small{color:var(--muted)}
.summen .total th,.summen .total td{font-weight:800;font-size:1.1rem;border-bottom:0}
.ablauf ol{padding-left:20px;color:var(--ink2)}
.ablauf li{margin-bottom:6px}
.agb{margin:4px 0 14px}
.fehler{color:#c0392b;font-weight:700;margin:0 0 12px}
.danke{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:640px}
.danke h2{color:var(--accent-d);margin-bottom:8px}
.danke p{margin-bottom:10px;color:var(--ink2)}

/* ===== /shop/ — Einstieg mit allen Kategorien (Timo 20.10.2026) ===== */
.shop-einstieg h1{margin-bottom:8px}
.shop-einstieg .einleitung{color:var(--ink2);max-width:62ch;margin:0 0 22px;font-size:1.05rem;line-height:1.55}
.kategorien{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.kategorien{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kategorien a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.kategorien a:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(31,41,51,.12)}
.kategorien img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.kategorien .kat-text{display:flex;flex-direction:column;gap:4px;padding:14px 16px 4px}
.kategorien .kat-text b{font-size:1.2rem}
.kategorien .kat-text span{color:var(--ink2);font-size:.95rem}
.kategorien .kat-text .kat-preis{color:var(--accent-d);font-weight:700}
.kategorien .knopf{margin:12px 16px 16px;margin-top:auto;align-self:flex-start}

/* ===== Gruppen als Reiter über den Kacheln (Timo 20.10.2026) ===== */
.gruppen{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.gruppen button{font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink2);transition:border-color .15s,color .15s,background .15s}
.gruppen button small{font-weight:600;font-size:.78rem;color:var(--muted);margin-left:2px}
.gruppen button:hover{border-color:var(--accent);color:var(--accent-d)}
.gruppen button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.gruppen button[aria-pressed="true"] small{color:#e6f4f4}
.filter-wahl[hidden],.chip[hidden],.filter-panel fieldset[hidden]{display:none}
/* Telefon: Reiter in einer Zeile zum Wischen statt in drei Zeilen */
@media (max-width:640px){
  .gruppen{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:2px 16px 6px;scrollbar-width:none}
  .gruppen::-webkit-scrollbar{display:none}
  .gruppen button{flex:0 0 auto;padding:8px 14px}
}
.mindest{font-size:.88rem;font-weight:700;color:var(--accent-d);margin:2px 0 0}

/* MWST-Hinweis direkt am Preis; auf dem Telefon rutscht er unter den Preis (Timo 20.10.2026) */
.preis{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem}
.preis .mwst{font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap}
@media (max-width:640px){.preis .mwst{flex-basis:100%}}
.kaufen .ausverkauft{font-weight:800;color:#9b1c1c;margin:.4rem 0 .6rem}
.kacheln .nl{display:block;font-style:normal;font-size:.75rem;font-weight:700;color:#9b1c1c}

/* Varianten (Timo 21.10.2026): je Merkmal eine Knopfreihe über dem Preis */
.varianten{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.var-titel{margin:0 0 6px;font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.var-reihe{border:0;padding:0;margin:0 0 10px;min-width:0}
.var-reihe legend{padding:0;margin:0 0 6px;font-size:.93rem;color:var(--ink2)}
.var-reihe legend b{color:var(--ink)}
.var-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.chip-knopf{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--card);cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--vb-radius,8px);padding:7px 12px;line-height:1.2}
.chip-knopf:hover{border-color:var(--accent)}
.chip-knopf[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip-knopf.anders{opacity:.55;border-style:dashed}
.chip-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Produktdaten zum Aufklappen: Beschreibung, Technische Daten, Dokumente */
.produktdaten{margin:8px 0 26px;display:grid;gap:10px}
.produktdaten details{background:var(--card);border:1px solid var(--line);border-radius:var(--vb-radius,8px);padding:0 16px}
.produktdaten summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;align-items:center;gap:10px}
.produktdaten summary::-webkit-details-marker{display:none}
.produktdaten summary::after{content:'▾';margin-left:auto;color:var(--muted);transition:transform .15s}
.produktdaten details[open] summary::after{transform:rotate(180deg)}
.produktdaten details > :not(summary){margin:0 0 14px}
.produktdaten p{line-height:1.6;margin:0 0 10px}
.angaben.voll th{width:45%}
.dokumente{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.dokumente .dok{display:inline-flex;gap:6px;align-items:center;font-weight:700;text-decoration:none;color:var(--accent-d);
  border:1.5px solid var(--line);border-radius:var(--vb-radius,8px);padding:9px 12px}
.dokumente .dok:hover{border-color:var(--accent)}
.dokumente small{color:var(--muted);font-weight:500}
.angaben.voll{table-layout:fixed}
.angaben.voll th,.angaben.voll td{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.produktdaten details{min-width:0;overflow:hidden}

/* «⚡ Schnelle Lieferung» (Timo 22.10.2026): Schalter in der Werkzeugleiste, Kennzeichen auf Kachel und Artikelseite */
.schnell-wahl small{font-weight:500;opacity:.8}
.schnell-wahl[aria-pressed="true"]{background:#0f6b4f;border-color:#0f6b4f;color:#fff}
.schnell-wahl[hidden]{display:none}
.kacheln .schnell{display:block;font-style:normal;font-size:.75rem;font-weight:700;color:#0f6b4f}
.schnell-hinweis{margin:10px 0;padding:8px 12px;border-radius:var(--vb-radius,8px);background:#e6f4ee;color:#0f4d39;font-size:.95rem}

/* Filter für viele Böden (Timo 22.10.2026): Zahl je Wert, «0» blass, Kacheln seitenweise */
.chip small[data-zahl]{color:var(--muted);font-weight:500}
.chip.null{opacity:.45}
.filter-panel legend small{font-weight:500;color:var(--muted)}
.mehr-zeile{text-align:center;margin:18px 0}
.mehr-zeile [hidden]{display:none}
/* Viele Filterfelder: Fenster scrollt, die Knöpfe «Zurücksetzen / Fertig» bleiben unten sichtbar */
.filter-panel{max-height:min(70vh,640px);overflow-y:auto;width:min(92vw,440px)}
.filter-knoepfe{position:sticky;bottom:-14px;background:var(--card);padding:10px 0 4px}