/* fd-bau: universal-serie v1 */
/* Universal-Clip Serienseite esra: Stil */
.la7{--soft:#f7f2ea;--line:#e9e3d8;--ink:#2a2722;--muted:#7a7367;--acc:#a96544;
 --accd:#87502f;--paper:#fffdf9;--gruen:#22493a;--bronze:#8a7550;
 font-family:"Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.62;font-size:17px;
 max-width:1300px;margin:0 auto;padding:0 1rem 2rem;box-sizing:border-box;
 -webkit-font-smoothing:antialiased}
.la7 *{box-sizing:border-box}
.la7 p{margin:0 0 .9rem}
.la7 a{color:inherit}
.la7 h1,.la7 h2,.la7 h3{font-family:"Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:900;letter-spacing:-.035em;
 text-transform:none;color:var(--ink);margin:0}
.la7 h1{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.04}
.la7 h2{font-size:clamp(1.4rem,2.9vw,2.1rem);line-height:1.1}
.la7 h3{font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.la7 .kicker{font:600 .78rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
 color:var(--acc);margin:0 0 .6rem}
.la7 .tiny{font-size:.8rem;color:var(--muted)}
.la7 .mut{color:var(--muted)}
.la7 .rev{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.la7 .rev.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 .la7 .rev{opacity:1;transform:none;transition:none}
 .la7 *{scroll-behavior:auto}
}

.la7 .k-titel{font:600 .78rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;
 color:var(--muted);margin:0 0 .5rem}
.la7 .k-preis{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0;
 font-variant-numeric:tabular-nums}
.la7 .k-versand{font-size:.8rem;color:var(--muted);margin:.2rem 0 .4rem}
.la7 .k-versand a{color:var(--muted);text-decoration:underline}
.la7 .k-liefer{font-size:.9rem;font-weight:600;color:#3d7a2a;margin:0 0 1rem}
.la7 .k-los{display:none;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.la7 .k-mengelabel{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.la7 .k-menge{min-height:48px;min-width:4.6rem;border:1px solid var(--line);border-radius:999px;
 padding:0 .9rem;font:inherit;background:#fff;color:var(--ink)}
.la7 .k-kauf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
 padding:.6em 1.6em;border-radius:999px;background:var(--ink);color:var(--soft);border:0;
 font:600 1rem/1 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;cursor:pointer;flex:1 1 11rem;transition:background .2s}
.la7 .k-kauf:hover{background:var(--accd)}
.la7 .k-kauf:focus-visible,.la7 .k-menge:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.la7 .k-sperre,.la7 .k-ohnejs{display:none;margin:.6rem 0 0;padding:.75rem .9rem;border-radius:12px;
 border:1px solid #d9b6a4;background:#fbf1ec;font-size:.9rem}
.la7 .k-sperre a,.la7 .k-ohnejs a{color:var(--accd);font-weight:600}
.la7 [data-stand=bereit] .k-los{display:flex}
.la7 [data-stand=laden] .k-los{display:flex;opacity:.45;pointer-events:none}
.la7 [data-stand=sperre] .k-sperre{display:block}
.la7 [data-stand=ohnejs] .k-ohnejs{display:block}

.la7 .masstab{width:100%;border-collapse:collapse;font-size:.97rem;margin:.4rem 0 1rem;
 font-variant-numeric:tabular-nums}
.la7 .masstab th{text-align:left;font:600 .76rem/1.3 inherit;letter-spacing:.11em;
 text-transform:uppercase;color:var(--muted);padding:.3rem .8rem .5rem 0}
.la7 .masstab td{padding:.5rem .8rem .5rem 0;border-top:1px solid var(--line)}
.la7 .masstab td:first-child{font-weight:700}

.la7 .steck{border:1px solid var(--line);border-radius:18px;background:var(--paper);
 padding:clamp(1rem,2.2vw,1.5rem)}
.la7 .steck h2{font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.la7 .steckliste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 gap:0 clamp(1rem,2.4vw,2.2rem);margin:.9rem 0 0}
.la7 .steckliste>div{padding:.55rem 0;border-top:1px solid var(--line)}
.la7 .steckliste dt{font:600 .71rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
 color:var(--muted)}
.la7 .steckliste dd{margin:.22rem 0 0;font-weight:700;letter-spacing:-.015em;
 font-variant-numeric:tabular-nums}
.la7 .steck p.tiny{margin:.9rem 0 0}
@media (max-width:900px){.la7 .steckliste{grid-template-columns:repeat(2,minmax(0,1fr))}}

.la7 .varianten{border:1px solid var(--line);border-radius:18px;background:var(--paper);
 padding:clamp(1rem,2.2vw,1.45rem)}
.la7 .varianten h2{font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
/* Der Erklaertext steht ueber die ganze Breite der Karte. Eine Zeilenlaenge von
   56em hat ihn frueher bei rund zwei Dritteln umbrechen lassen - rechts blieb
   Leerraum, obwohl die Karte breiter ist (User-Beanstandung 27.08.2026). */
.la7 .vhint{margin:.35rem 0 0;font-size:.9rem;color:var(--muted);max-width:none}
.la7 .vachse{margin-top:1rem}
.la7 .vlabel{font:600 .71rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
 color:var(--muted);margin:0 0 .45rem}
.la7 .vfarben{display:flex;flex-wrap:wrap;gap:.5rem}
.la7 .vfarbe{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line);
 border-radius:999px;background:#fff;padding:.42rem 1rem .42rem .5rem;text-decoration:none;
 color:inherit;transition:border-color .2s,transform .2s}
.la7 a.vfarbe:hover{border-color:var(--acc);transform:translateY(-1px)}
.la7 a.vfarbe:focus-visible,.la7 a.vg:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.la7 .vpunkt{width:1.6rem;height:1.6rem;border-radius:50%;flex:none;
 box-shadow:0 0 0 1px rgba(42,39,34,.16)}
/* Statt des Farbpunkts ein runder Ausschnitt aus dem Packshot. Der Grund ist weiss und
   nicht cremefarben, sonst zeichnet sich das weisse Quadrat des Packshots im Kreis ab. */
.la7 .vbild{width:2.6rem;height:2.6rem;border-radius:50%;flex:none;overflow:hidden;
 background:#fff;box-shadow:0 0 0 1px rgba(42,39,34,.16);display:block}
.la7 .vbild img{width:100%;height:100%;display:block;object-fit:contain}
.la7 .vbild.foto img{object-fit:cover;object-position:center}
.la7 .vfarbe b{display:block;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.la7 .vsatz{display:block;font-size:.78rem;color:var(--muted);font-weight:400;line-height:1.3}
.la7 .vfarben.mittel .vsatz,.la7 .vfarben.viele .vsatz{display:none}
.la7 .vfarben.mittel .vpunkt{width:1.35rem;height:1.35rem}
.la7 .vfarben.mittel .vbild{width:2.1rem;height:2.1rem}
.la7 .vfarben.viele .vfarbe{padding:.3rem .85rem .3rem .38rem;font-size:.93rem}
.la7 .vfarben.viele .vpunkt{width:1.15rem;height:1.15rem}
.la7 .vfarben.viele .vbild{width:1.7rem;height:1.7rem}
.la7 .vfarbe.jetzt{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);
 background:var(--soft)}
.la7 .gew{font:700 .66rem/1 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
 color:var(--accd);margin-left:.15rem}
.la7 .vgroessen{display:grid;grid-template-columns:repeat(var(--sp,3),minmax(0,1fr));gap:.5rem}
.la7 .vg{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);
 border-radius:12px;background:#fff;padding:.55rem .7rem;text-decoration:none;color:inherit;
 transition:border-color .2s,transform .2s}
.la7 .vtext{min-width:0}
.la7 .vgroessen.viele .vbild{width:2.1rem;height:2.1rem}
.la7 a.vg:hover{border-color:var(--acc);transform:translateY(-1px)}
.la7 .vg b{display:block;font-weight:800;letter-spacing:-.02em;font-size:.98rem;
 font-variant-numeric:tabular-nums}
.la7 .vgm{display:block;font-size:.74rem;color:var(--muted);line-height:1.35;margin:.08rem 0 .2rem}
.la7 .vg em{font-style:normal;font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums}
.la7 .vg .hier{font:700 .66rem/1.2 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
 color:var(--accd);display:inline-block}
.la7 .vg.jetzt{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:var(--soft)}
.la7 .varianten p.tiny{margin:.9rem 0 0}
@media (max-width:560px){
 .la7 .vgroessen{grid-template-columns:repeat(var(--spm,3),minmax(0,1fr))}
 /* Auf dem Handy ist die Kachel zu schmal fuer Bild und Text nebeneinander -
    das Bild rueckt deshalb ueber den Text. */
 .la7 .vg{padding:.5rem .55rem;flex-direction:column;align-items:flex-start;gap:.3rem}
 .la7 .vbild{width:2.2rem;height:2.2rem}
 .la7 .vg b{font-size:.9rem}
 .la7 .vgm{font-size:.69rem}
 .la7 .vg em{font-size:.86rem}
 .la7 .vfarbe{padding:.38rem .8rem .38rem .42rem}
}

.la7{padding:0 0 2rem;max-width:none}
.la7 .innen{max-width:1300px;margin:0 auto;padding:0 1rem}
/* ---- schmaler Buehnenstreifen (Entwurf 6; Schleier 29.08.2026 von .82/.45/.12 auf
   .45/.25/.05 gesenkt + Textschatten - der alte Schleier machte graue Toepfe schwarz) ---- */
.la7 .streifen{position:relative;border-radius:0 0 22px 22px;overflow:hidden;
 height:clamp(112px,14vw,172px);display:flex;align-items:flex-end;background:var(--tief)}
.la7 .streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 object-position:center 58%}
.la7 .streifen .schleier{position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(14,20,16,.45) 0%,rgba(14,20,16,.25) 52%,rgba(14,20,16,.05) 100%)}
.la7 .streifen .txt{position:relative;z-index:2;padding:0 1rem 1rem;max-width:1300px;
 margin:0 auto;width:100%}
.la7 .streifen .kicker{color:#e3d5bf;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.la7 .streifen p.gross{color:#fffdf9;font-weight:900;letter-spacing:-.035em;margin:.15rem 0 0;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.35);
 font-size:clamp(1.3rem,3vw,2.1rem);line-height:1.1}
/* ---- Entscheidungsblock ---- */
.la7 .block{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
 gap:clamp(1.1rem,2.8vw,2.8rem);align-items:start;
 padding:clamp(1rem,2.4vw,1.7rem) 0 clamp(1.1rem,2.2vw,1.8rem)}
/* Das Katalogblatt: Bildbuehne und Bestellschein sind EIN Blatt, getrennt nur durch
   die gestrichelte Linie - wie die Perforation an einem Bestellcoupon. */
.la7 .katalogblatt{border:1px solid var(--line);border-radius:20px;background:var(--paper);
 padding:.6rem .6rem .9rem;box-shadow:0 30px 60px -44px rgba(42,39,34,.7)}
.la7 .buehne{position:relative;border-radius:14px;overflow:hidden;background:var(--soft);
 aspect-ratio:1/1}
.la7 .dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.la7 .dia.an{opacity:1}
.la7 .dia img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.la7 .dia.frei img{object-fit:contain;object-position:center;
 transform:scale(1.55);transform-origin:52.6% 55%}
/* Das Massbild darf nicht beschnitten werden: Pfeile und Zahlen muessen ganz zu sehen
   sein. Es steht deshalb vollstaendig im Rahmen und auf Weiss, damit der weisse Grund
   des Bildes nicht als Rechteck in der cremefarbenen Flaeche klebt. */
.la7 .dia.mass{background:#fff}
.la7 .dia.mass img{object-fit:contain;object-position:center}
.la7 .bildzeile{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
 margin:.5rem 0 0}
.la7 .mb{width:3rem;height:3rem;border-radius:9px;overflow:hidden;flex:none;padding:0;
 border:1px solid var(--line);background:var(--soft);cursor:pointer;
 transition:border-color .2s}
.la7 .mb img{width:100%;height:100%;object-fit:cover;object-position:center 70%;display:block}
.la7 .mb.frei img{object-fit:contain;transform:scale(1.5);transform-origin:52.6% 55%}
.la7 .mb.mass{background:#fff}
.la7 .mb.mass img{object-fit:contain;object-position:center}
.la7 .mb:hover{border-color:var(--acc)}
.la7 .mb[aria-pressed=true]{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.la7 .mb:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.la7 .bildtext{font-size:.79rem;color:var(--muted);margin:0 0 0 .35rem;line-height:1.35;
 flex:1 1 8.5rem;min-width:0;min-height:calc(4 * 1.35em)}   /* Platz fuer 4 Zeilen: der Text wechselt mit dem Bild
 (2 bis 4 Zeilen) - ohne festen Platz sprang alles darunter bei jedem Bildwechsel (User 27.10.2026) */
.la7 .schein{border-top:1px dashed var(--line);margin-top:.9rem;padding:.95rem .4rem 0}
.la7 .schein .k-titel{color:var(--acc)}
.la7 .spalte h1{margin:.1rem 0 0;font-weight:700;letter-spacing:-.022em}
.la7 .spalte .kicker{margin-bottom:.4rem}
/* Volle Spaltenbreite: die Breite begrenzt hier das Raster, nicht der Absatz.
   Ein eigener Deckel liesse bei mittleren Fenstern (900 bis 1300 px, wo die
   Spalte ueber die ganze Seite geht) rechts Leerraum stehen. */
.la7 .spalte .anriss{margin:.8rem 0 1.1rem;max-width:none;font-size:clamp(1rem,1.4vw,1.1rem)}
.la7 .spalte .steck{border-width:1px 0;border-radius:0;background:transparent;padding:1rem 0}
.la7 .spalte .steckliste{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1rem,2vw,2rem)}
.la7 .wahl{padding-bottom:clamp(.6rem,1.6vw,1.2rem)}
/* ---- Magazin ---- */
.la7 .kap{padding:clamp(1.8rem,3.6vw,3rem) 0;border-top:1px solid var(--line);margin-top:1.4rem}
/* Ueberschriften behalten ihr Zeilenmass - eine Schlagzeile ueber 1268 px waere
   schwer zu fassen. Die Absaetze darunter nicht: ihre Breite bestimmt der Kasten,
   in dem sie stehen (.zwei, .spalten), damit rechts kein Leerraum bleibt. */
.la7 .kap h2{max-width:17em;font-weight:700;letter-spacing:-.022em}
.la7 .kap p{margin-top:1rem;max-width:none}
.la7 .breitbild{margin:1.3rem 0 0;border-radius:18px;overflow:hidden}
.la7 .breitbild img{width:100%;height:auto;display:block}
.la7 figure{margin:0}
.la7 .zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.la7 .zwei.hoch{align-items:start}
.la7 .spalten{column-count:2;column-gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.1rem}
.la7 .spalten p{margin:0 0 .9rem;max-width:none;break-inside:avoid}
.la7 .pflege{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:1rem 1.8rem;
 grid-template-columns:repeat(4,minmax(0,1fr))}
.la7 .pflege li{font-size:.92rem}
.la7 .pflege b{display:block;font-weight:800;margin-bottom:.15rem}
.la7 .pflege span{color:var(--muted)}
.la7 .fuss{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
 border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.4rem;background:var(--soft);
 margin-top:1.5rem}
/* Der Satz nimmt den Platz, der neben dem Knopf frei bleibt - kein fester Deckel. */
.la7 .fuss p{margin:0;max-width:none;flex:1 1 22em}
.la7 .knopf{display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--acc);
 border-radius:999px;padding:.6em 1.3em;font-weight:600;font-size:.95rem;text-decoration:none;
 background:#fff;white-space:nowrap}
.la7 .knopf:hover{background:var(--acc);color:#fff}
/* ---- Verweis nach draussen (der passende Einsatz) ---- */
.la7 a.raus{color:var(--accd);text-decoration:underline;text-underline-offset:2px;
 text-decoration-thickness:1px}
.la7 .nb{white-space:nowrap}
.la7 a.raus:hover{color:var(--acc)}
.la7 a.raus:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px}
.la7 svg.raus{margin-left:.28em;vertical-align:-1px;opacity:.8}
.la7 .ende{height:1px}
/* ---- Kaufleiste, die sich abschaelt (aus Entwurf 6) ---- */
/* top = Unterkante von Siquandos Menue (--fd-kopf aus fd/gemeinsam/handy.js v5, 61 oder 122 px je Breite);
   versteckt ganz hinter dem Menue statt fest -140 % (sonst halber Streifen bei einzeiligem Menue, 27.10.2026) */
.la7 .leiste{position:fixed;left:0;right:0;top:var(--fd-kopf,122px);z-index:900;background:var(--ink);
 color:#fffdf9;box-shadow:0 16px 34px -26px rgba(0,0,0,.9);transform:translateY(calc(-100% - var(--fd-kopf,122px)));
 transition:transform .38s cubic-bezier(.22,.61,.36,1);padding:.5rem 0}
.la7 .leiste.an{transform:none}
.la7 .leiste .linnen{max-width:1300px;margin:0 auto;padding:0 1rem;display:flex;
 align-items:center;gap:.8rem}
.la7 .leiste .was{margin:0;font-weight:800;letter-spacing:-.02em;font-size:.95rem}
.la7 .leiste .k-titel,.la7 .leiste .k-liefer,.la7 .leiste .k-mengelabel{display:none}
/* Preis und Pflichthinweis stehen zusammen in einem Kaestchen: am Schreibtisch
   nebeneinander, auf dem Handy untereinander. PAngV Paragraph 6 verlangt den Hinweis
   in unmittelbarer Naehe JEDES Preises - auch in einer mitlaufenden Leiste. Der
   Wortlaut kommt aus dem nativen Absatz ([data-id=priceinfo]) und wird gespiegelt,
   der Verweis auf die Versandkosten also mit. */
.la7 .leiste .k-pbox{display:flex;align-items:baseline;gap:.5rem;margin:0 0 0 auto;
 min-width:0}
.la7 .leiste .k-preis{font-size:1.15rem;margin:0;color:#fffdf9}
.la7 .leiste .k-versand{display:block;margin:0;font-size:.72rem;line-height:1.3;
 color:rgba(255,253,249,.72)}
.la7 .leiste .k-versand a{color:#fffdf9;text-decoration:underline;display:inline-block;
 padding:.4rem .3rem;margin:-.4rem -.3rem}
/* Der Name darf nie umbrechen - sonst wuechse die Leiste in die Hoehe. */
.la7 .leiste .was{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.la7 .leiste .k-los{margin:0;flex:none}
.la7 .leiste .k-menge{min-height:42px;border-color:rgba(255,253,249,.4)}
.la7 .leiste .k-kauf{min-height:42px;flex:0 0 auto;background:var(--soft);color:var(--ink);
 font-size:.92rem;padding:.5em 1.2em}
.la7 .leiste .k-kauf:hover{background:#fff}
.la7 .leiste .k-sperre,.la7 .leiste .k-ohnejs{margin:0;padding:.35rem .7rem;font-size:.82rem;
 background:transparent;border-color:rgba(255,253,249,.4);color:#f2efe6}
.la7 .leiste .k-sperre a,.la7 .leiste .k-ohnejs a{color:#fffdf9}
.la7 .leiste [data-stand]{display:flex;align-items:center;gap:.8rem;flex:1 1 auto}
@media (max-width:1023px){
 .la7 .leiste{top:auto;bottom:0;transform:translateY(140%);
  box-shadow:0 -16px 34px -26px rgba(0,0,0,.9)}
 /* Am unteren Rand ist die Zeile schmal: Preis oben, Hinweis darunter. Das Kaestchen
    nimmt den Platz, der zwischen Name und Kaufknopf uebrig bleibt, und der Hinweis
    bricht darin um - die Leiste bleibt so hoch wie der Knopf. */
 .la7 .leiste .k-pbox{flex-direction:column;align-items:flex-start;gap:0;margin:0;
  flex:1 1 6rem}
 .la7 .leiste .k-versand{font-size:.68rem;line-height:1.22}
}
@media (max-width:900px){
 /* Handy: Name, Bild, Bestellschein, Anriss, Datentafel, Variantenleiste.
    Der Kaufknopf steht damit im ersten Bildlauf. */
 /* align-items muss zurueckgesetzt werden: aus dem Raster steht dort "start",
    im Spalten-Flex wuerde die Buehne dadurch auf ihre Eigenbreite schrumpfen. */
 .la7 .block{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:1rem}
 .la7 .katalogblatt,.la7 .spalte{display:contents}
 .la7 .spalte .kicker{order:1;margin-bottom:.3rem}
 .la7 .spalte h1{order:2}
 .la7 .buehne{order:3;margin-top:.55rem;border:1px solid var(--line)}
 .la7 .bildzeile{order:4}
 .la7 .schein{order:5;border-top:1px dashed var(--line);margin-top:.8rem;padding:.85rem 0 0}
 .la7 .spalte .anriss{order:7;margin:1.2rem 0 0}
 .la7 .spalte .steck{order:8;margin-top:.6rem}
 .la7 .spalte .steckliste>div{padding:.42rem 0}
 .la7 .spalte .steckliste dt{font-size:.66rem;letter-spacing:.1em}
 .la7 .spalte .steckliste dd{font-size:.93rem}
 .la7 .wahl{margin-top:1.2rem}
 .la7 .spalten{column-count:1}
 .la7 .zwei{grid-template-columns:1fr;gap:1.2rem}
 .la7 .pflege{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Ohne den Artikelnamen bleibt in der Leiste genug Platz, dass Preis und
    Pflichthinweis nebeneinanderpassen - sie bleibt so hoch wie der Knopf. */
 .la7 .leiste .was{display:none}
}
@media (max-width:560px){
 .la7{font-size:16px}
 .la7 .leiste .k-versand{font-size:.66rem}
 /* Auf dem Handy zaehlt jeder Pixel bis zum Kaufknopf: die Buehne wird etwas
    flacher (der Freisteller fuellt sie dadurch sogar besser aus) und die
    Ueberschrift des Bestellscheins entfaellt. */
 .la7 .buehne{aspect-ratio:6/5}
 .la7 .mb{width:2.7rem;height:2.7rem}
 .la7 .schein .k-titel{display:none}
 .la7 .pflege{grid-template-columns:1fr}
 .la7 .leiste .k-preis{font-size:1.02rem}
 .la7 .leiste .k-kauf{padding:.5em .9em;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
 .la7 .leiste{transition:none}
 .la7 .dia{transition:none}
}

/* ---- Bildlupe: das ganze Bild ueber der Seite ---- */
.la7 .buehne{cursor:zoom-in}
.la7 .lupe-auf{position:absolute;right:.6rem;bottom:.6rem;z-index:3;width:44px;height:44px;
 border:0;border-radius:50%;background:rgba(255,253,249,.88);color:var(--ink);
 box-shadow:0 4px 14px -4px rgba(42,39,34,.6);cursor:zoom-in;display:flex;
 align-items:center;justify-content:center;padding:0;opacity:.85;transition:opacity .2s}
.la7 .lupe-auf:hover,.la7 .lupe-auf:focus-visible{opacity:1;outline:none;
 box-shadow:0 0 0 3px var(--acc)}
.la7 .lupe-auf svg{width:20px;height:20px;display:block}
.fd-lupe{position:fixed;inset:0;z-index:2000;background:rgba(28,26,23,.95);
 display:none;flex-direction:column;align-items:center;justify-content:center;
 font-family:"Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#f2efe6;-webkit-font-smoothing:antialiased}
.fd-lupe.an{display:flex}
.fd-lupe img{max-width:min(96vw,1700px);max-height:calc(100vh - 7.5rem);width:auto;
 height:auto;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;
 box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.fd-lupe .lupe-mass{background:#fff;padding:1rem;border-radius:8px}
.fd-lupe .lupe-text{margin:.9rem 1rem 0;max-width:46em;text-align:center;
 font-size:.9rem;line-height:1.4;color:#d9d3c7}
.fd-lupe .lupe-text b{color:#f2efe6}
.fd-lupe button{position:absolute;border:0;background:rgba(255,253,249,.12);color:#f2efe6;
 width:48px;height:48px;border-radius:50%;cursor:pointer;font:400 1.6rem/1 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s}
.fd-lupe button:hover,.fd-lupe button:focus-visible{background:rgba(255,253,249,.28);
 outline:none}
.fd-lupe .lupe-zu{top:max(.8rem,env(safe-area-inset-top));right:.8rem;font-size:1.9rem}
.fd-lupe .lupe-zurueck{left:.6rem;top:50%;transform:translateY(-50%)}
.fd-lupe .lupe-weiter{right:.6rem;top:50%;transform:translateY(-50%)}
.fd-lupe .lupe-stand{position:absolute;top:max(1.2rem,env(safe-area-inset-top));left:1rem;
 font-size:.78rem;letter-spacing:.12em;color:#b9b1a3}
@media (max-width:640px){
 .fd-lupe img{max-width:100vw;max-height:calc(100vh - 8.5rem)}
 .fd-lupe .lupe-zurueck,.fd-lupe .lupe-weiter{top:auto;bottom:max(.8rem,env(safe-area-inset-bottom));
  transform:none}
 .fd-lupe .lupe-text{margin-bottom:3.6rem}
}
@media (prefers-reduced-motion:no-preference){
 .fd-lupe img{animation:fdLupeAuf .22s ease-out}
 @keyframes fdLupeAuf{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
}

/* ---- Schmale Handys (unter 360 px) ---- */
@media (max-width:360px){
 .la7 .knopf{white-space:normal;text-align:center}
 .la7 .masstab thead{display:none}
 .la7 .masstab,.la7 .masstab tbody,.la7 .masstab tr,.la7 .masstab td{display:block}
 .la7 .masstab tr{padding:.5rem 0;border-top:1px solid var(--line)}
 .la7 .masstab td{padding:0;border:0}
 .la7 .masstab td:first-child,.la7 .masstab td:nth-child(2){display:inline}
 .la7 .masstab td:first-child::after{content:"\00a0\00a0"}
 .la7 .masstab td:nth-child(3){display:block;font-size:.88rem;color:var(--muted);margin-top:.1rem}
 .la7 .leiste .linnen{gap:.5rem;padding:0 .6rem}
 .la7 .leiste [data-stand],.la7 .leiste .k-los{gap:.5rem}
 .la7 .leiste .k-menge{min-width:0;padding:0 .5rem}
 .la7 .leiste .k-kauf{padding:.5em .7em;font-size:.82rem}
}

/* Der Massstab haengt an der BREITE DER LEISTE, nicht am Fenster (User 28.08.2026:
   auf seinem Bildschirm zeigte die Leiter eine Schiebeleiste, weil seine Inhaltsspalte
   schmaler ist als die an der Live-Seite gemessenen 1140 px). --e ist der Massstab in
   Bildpunkten je Zentimeter, --d der Durchmesser in Zentimetern, --hmax die groesste
   Hoehe der Serie, --g der Abstand zwischen den Spalten.

   Rechnung fuer die sechs Ryan-Groessen (zusammen 148 cm): die Reihe braucht
   148 x --e + 6 x .6rem + 5 x --g. Bei --e = .58 % der Leistenbreite und --g = .8 %
   sind das bei 860 px Leistenbreite rund 830 px - die Reihe passt also ab etwa
   700 px ohne Schieben. Nach oben deckelt 6,3 px je Zentimeter, damit die Toepfe in
   einer breiten Spalte nicht ins Riesige wachsen.

   Der erste Satz gilt fuer Browser ohne Container-Queries (Fenstermass wie bisher);
   das Skript rechnet dort zusaetzlich per ResizeObserver nach. */
.la7 .leiter{--e:clamp(5.4px,.45vw,6.3px);--g:clamp(.4rem,.8vw,.9rem)}
@supports (container-type:inline-size){
 .la7 .leiter{container-type:inline-size}
 .la7 .lrolle{--e:clamp(3.9px,.58cqw,6.3px);--g:clamp(.4rem,.8cqw,.9rem)}
 /* Schmalere Leiste: die Beschriftung wird eine Spur kleiner. Sonst passt "Oe 15 cm"
    nicht mehr in die schmalste Spalte - die ist bei 766 px Leiste 57 px breit, die
    Zeile 60 px (am 28.08.2026 im Browser gemessen), und die Zahl rutschte von der
    Einheit weg. Die uebrigen Zeilen duerfen weiter umbrechen. */
 @container (max-width:900px){
  .la7 .lst b{font-size:.88rem}
  .la7 .lh,.la7 .lin{font-size:.72rem}
  .la7 .lst em{font-size:.86rem}
  .la7 .lst .hier{font-size:.6rem}
  .la7 .ltxt{padding:.4rem .2rem .5rem}
 }
 /* Schmale Leiste: lieber gross und schiebbar als winzig und vollstaendig. */
 @container (max-width:600px){
  .la7 .lrolle{--e:5.4px;--g:.4rem}
  .la7 .lstufe{min-width:4.8rem}
  .la7 .lst{padding:0 .28rem}
  .la7 .ltxt{padding:.35rem .25rem .45rem}
  .la7 .lst b{font-size:.88rem}
  .la7 .lh,.la7 .lin{font-size:.72rem}
  .la7 .lst em{font-size:.85rem}
 }
}
.la7 .lrolle{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
 -webkit-overflow-scrolling:touch;padding-bottom:.2rem}
.la7 .lreihe{position:relative;display:flex;align-items:flex-start;
 gap:var(--g);list-style:none;margin:0 auto;padding:0;width:max-content}
/* Die gemeinsame Standlinie laeuft als eine durchgehende Linie unter allen
   Silhouetten - jede Kachel fuer sich haette sechs Striche mit Luecken ergeben. */
.la7 .lreihe::after{content:"";position:absolute;left:0;right:0;
 top:calc(var(--e) * var(--hmax));height:1px;background:var(--line)}
/* Die Spalte ist genau so breit wie die Silhouette (plus die Innenraender der
   Kachel). Damit steht die Beschriftung unter ihrem Topf und laenge Zeilen wie
   "innen ca. 12,5 cm" brechen um, statt die kleinen Spalten auseinanderzuziehen. */
.la7 .lstufe{flex:0 0 auto;scroll-snap-align:center;min-width:4.2rem;
 width:calc(var(--e) * var(--d) + .6rem)}
.la7 .lst{display:block;padding:0 .3rem;border-radius:12px;text-decoration:none;
 color:inherit}
.la7 a.lst:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
/* Alle Silhouettenkaesten sind gleich hoch (die groesste Hoehe der Serie) und das
   Bild haengt unten drin. Dadurch stehen die Toepfe auf einer Linie UND die
   Beschriftungen beginnen in jeder Spalte auf derselben Hoehe. */
.la7 .lsil{display:flex;align-items:flex-end;justify-content:center;
 height:calc(var(--e) * var(--hmax))}
.la7 .lsil img{display:block;width:calc(var(--e) * var(--d));height:auto}
/* Markiert wird die Beschriftung, nicht die ganze Spalte: ueber dem kleinsten Topf
   stuende sonst ein hoher, leerer Rahmen. Die Groesse, auf der man steht, bekommt
   zusaetzlich einen kurzen Akzentstrich auf der Standlinie. */
.la7 .ltxt{display:block;margin-top:.3rem;padding:.4rem .3rem .5rem;border-radius:10px;
 transition:background .2s,box-shadow .2s}
.la7 a.lst:hover .ltxt{background:var(--soft)}
.la7 .lst.jetzt .ltxt{background:var(--soft);box-shadow:inset 0 0 0 1px var(--acc)}
.la7 .lst.jetzt .lsil{box-shadow:inset 0 -2px 0 0 var(--acc)}
.la7 .lst b{display:block;margin:0;font-weight:800;letter-spacing:-.02em;
 font-size:.97rem;font-variant-numeric:tabular-nums}
.la7 .lh,.la7 .lin{display:block;font-size:.75rem;color:var(--muted);line-height:1.25}
.la7 .lst em{display:block;margin-top:.2rem;font-style:normal;font-weight:700;
 font-size:.93rem;font-variant-numeric:tabular-nums}
.la7 .lst .hier{margin-top:.1rem;font:700 .64rem/1.2 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.1em;
 text-transform:uppercase;color:var(--accd)}
/* Der Schiebe-Hinweis steht nur da, wenn die Reihe wirklich nicht hineinpasst.
   Ohne Skript entscheidet das Fenstermass wie bisher; sobald das Skript gemessen hat
   (Klasse "geprueft"), entscheidet die gemessene Breite der Leiste. */
.la7 .lwisch{display:none;margin:.5rem 0 0}
@media (max-width:900px){
 .la7 .lwisch{display:block}
}
.la7 .leiter.geprueft .lwisch{display:none}
.la7 .leiter.geprueft.schiebt .lwisch{display:block}
/* Fallback ohne Container-Queries: dasselbe am Fenstermass. */
@media (max-width:560px){
 .la7 .leiter{--e:5.4px;--g:.4rem}
 .la7 .lstufe{min-width:4.8rem}
 .la7 .lst{padding:0 .28rem}
 .la7 .ltxt{padding:.35rem .25rem .45rem}
 .la7 .lst b{font-size:.88rem}
 .la7 .lh,.la7 .lin{font-size:.72rem}
 .la7 .lst em{font-size:.85rem}
}

/* ---- Esra: Serien-Streifen ist 4:1 und auf die Mitte geschnitten (bilder_bauen) ---- */
.la7 .streifen img{object-position:center 50%}
/* ---- Esra: der Freisteller ist mittig aufgenommen ---- */
.la7 .dia.frei img{transform:scale(1.5);transform-origin:50% 50%}
.la7 .mb.frei img{transform:scale(1.45);transform-origin:50% 50%}
/* ---- Passend dazu: die Schale, eine Karte ueber die ganze Breite ----
   Links der Packshot (45 Prozent der Karte), rechts der Text. Die Spaltenbreiten
   sind Prozentwerte, haengen also an der Karte und nicht am Fenster - in einer
   schmaleren Siquando-Spalte stimmt das Verhaeltnis genauso. */
.la7 .dazuachse{margin-top:1.6rem}
.la7 .dlead{margin:.45rem 0 .9rem;max-width:none;font-size:.95rem;line-height:1.6;
 color:var(--muted)}
.la7 .dazu{display:grid;grid-template-columns:1fr;
 gap:clamp(.8rem,1.4vw,1.15rem);list-style:none;margin:0;padding:0}
.la7 .dkarte{display:grid;grid-template-columns:45% minmax(0,1fr);align-items:stretch;
 background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
 text-decoration:none;color:inherit;
 transition:border-color .25s,transform .25s,box-shadow .25s}
.la7 a.dkarte:hover{border-color:var(--acc);transform:translateY(-3px);
 box-shadow:0 18px 30px -24px rgba(42,39,34,.55)}
.la7 a.dkarte:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
/* Weisser Grund, weil der Packshot einen weissen Grund hat - auf Creme zeichnete
   sich sonst das helle Rechteck des Fotos in der Karte ab. Die Mindesthoehe kommt
   aus dem ::before-Streifen (75 Prozent der Breite = 4:3) und NICHT aus
   aspect-ratio: die Bildspalte ist ein gestreckter Rasterposten. */
.la7 .dbild{position:relative;width:100%;overflow:hidden;background:#fff}
.la7 .dbild::before{content:"";display:block;padding-top:75%}
.la7 .dbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 display:block;transition:transform .5s ease}
/* Die Schale ist breit und flach - im vollen 4:3-Feld wirkte sie zu gross neben dem
   Text. Sie bekommt deshalb Luft um sich herum. */
.la7 .dbild.flach img{inset:9% 9%;width:82%;height:82%}
.la7 a.dkarte:hover .dbild img{transform:scale(1.04)}
.la7 .dtxt{padding:clamp(1rem,1.7vw,1.5rem);display:flex;flex-direction:column;
 gap:.1rem;border-left:1px solid var(--line)}
.la7 .dkick{display:block;font:600 .71rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.12em;
 text-transform:uppercase;color:var(--accd)}
.la7 .dtxt b{display:block;margin-top:.25rem;font-weight:900;letter-spacing:-.03em;
 font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.2}
.la7 .dmass{display:block;margin-top:.2rem;font-size:.86rem;color:var(--muted);
 font-variant-numeric:tabular-nums}
.la7 .dsatz{display:block;margin-top:.6rem;font-size:.95rem;line-height:1.62}
/* Preis, Pflichthinweis und Weiterlesen sitzen unten in der Karte. */
.la7 .dfuss{display:block;margin-top:auto;padding-top:.9rem}
.la7 .dpreis{display:block;font-weight:700;font-size:1.12rem;
 font-variant-numeric:tabular-nums}
.la7 .dust{display:block;font-size:.74rem;color:var(--muted);line-height:1.35}
.la7 .dmehr{margin-top:.6rem;display:inline-flex;align-items:center;gap:.4em;
 font-size:.88rem;font-weight:600;color:var(--accd)}
.la7 .dmehr .pf{transition:transform .25s;flex:none}
.la7 a.dkarte:hover .dmehr .pf{transform:translateX(3px)}
/* Fuenf Farb-Chips brechen in eine zweite Reihe um (Vorgabe: ab fuenf umbrechend,
   nie scrollen). Damit die zweite Reihe nicht wie ein Rest wirkt, stehen die Chips
   linksbuendig und dicht beieinander - das regelt der gemeinsame Baukasten. */
@media (max-width:620px){
 .la7 .dkarte{grid-template-columns:1fr}
 .la7 .dtxt{border-left:0;border-top:1px solid var(--line);padding:.9rem .95rem 1.05rem}
 .la7 .dsatz{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
 .la7 .dkarte,.la7 .dbild img,.la7 .dmehr .pf{transition:none}
}

/* ---- Maxi-Warenkorb im Katalogblatt --------------------------------------------
   Farbe, Groesse, Preis, Pflichthinweis, Lieferzeit, Stueckzahl und Kaufknopf stehen
   in EINER Karte (sprachgebrauch.json: Maxi-Warenkorb, hoechstens einmal je Seite).
   Chips und Kacheln sind dieselben Bausteine wie in der Variantenleiste der
   Artikelseiten (VARIANTEN_CSS) - nur enger gestellt, weil die Spalte des
   Katalogblatts rund 450 px breit ist und nicht 1268. */
.la7 .maxi .k-titel{margin-bottom:.5rem}
.la7 .maxi .vachse{margin-top:.75rem}
.la7 .maxi .vachse:first-of-type{margin-top:0}
.la7 .maxi .vlabel{margin-bottom:.35rem}
/* Zwei Farben teilen sich die Zeile; ab drei bricht die Reihe um, ab fuenf sind die
   Chips klein (Klasse "viele") - gescrollt wird nie. */
.la7 .maxi .vfarbe{padding:.36rem .7rem .36rem .4rem}
.la7 .maxi .vfarben.gross .vfarbe{flex:1 1 9rem}
.la7 .maxi .vfarben.gross .vbild{width:2.2rem;height:2.2rem}
.la7 .maxi .vfarbe b{font-size:.95rem}
.la7 .maxi .vsatz{font-size:.75rem}
.la7 .maxi .gew{display:none}
.la7 .maxi .haken{flex:none;margin-left:auto;color:var(--accd);opacity:0}
.la7 .maxi .jetzt .haken{opacity:1}
.la7 .maxi .vg{position:relative;padding:.5rem .6rem;align-items:flex-start}
.la7 .maxi .vg .haken{position:absolute;top:.42rem;right:.42rem;margin:0}
.la7 .maxi .vg b{font-size:.95rem}
.la7 .maxi .vgm{font-size:.72rem;margin:.06rem 0 .18rem}
.la7 .maxi .vg em{font-size:.9rem}
/* Die Naht zwischen Auswahl und Bestellung: darueber wird gewaehlt, darunter gekauft.
   Der Satz nennt die Zusammenstellung, die im Warenkorb landet. */
.la7 .maxi .wahlzeile{margin:.95rem 0 .6rem;padding-top:.75rem;font-size:.86rem;
 color:var(--muted);border-top:1px dashed var(--line)}
.la7 .maxi .wahlzeile b{color:var(--ink);font-weight:700}
.la7 .maxi .mxfuss{margin:.85rem 0 0}
.la7 .maxi .mxfuss a{color:var(--accd);font-weight:600;text-decoration:underline;
 text-underline-offset:2px}
@media (max-width:900px){
 .la7 .maxi .vfarben.gross .vfarbe{flex:1 1 8rem}
}
@media (max-width:560px){
 /* Auf dem Handy bleiben von der Karte rund 330 px. Drei Kacheln je Reihe sind dann
    gut 105 px breit - Maß, Hoehe und Preis passen, wenn die Schrift etwas
    kleiner steht. */
 .la7 .maxi .vg{padding:.45rem .38rem}
 .la7 .maxi .vg b{font-size:.88rem}
 /* "innen ca. 14 cm" muss in eine Zeile passen - bei 94 px Kachelbreite geht das
    erst hier. Bricht die Zeile bei einer anderen Serie doch um, ist das kein
    Fehler: die Kachel wird dann eine Zeile hoeher. */
 .la7 .maxi .vgm{font-size:.65rem;line-height:1.3}
 .la7 .maxi .vg em{font-size:.85rem}
 .la7 .maxi .vg .haken{top:.35rem;right:.3rem}
 .la7 .maxi .vachse{margin-top:.6rem}
 .la7 .maxi .wahlzeile{margin:.8rem 0 .5rem;padding-top:.65rem}
}
/* ---- was nur die Serienseite braucht ------------------------------------------- */
/* Der Freisteller steht in einem Kasten mit dem Seitenverhaeltnis der Aufnahme; der
   Massstab je Topf kommt als style-Attribut vom Motor. */
.la7 .freibox{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
 aspect-ratio:1700/1133}
/* Der Kasten liegt absolut - die Miniatur MUSS deshalb einen Bezugspunkt haben,
   sonst haengt er am naechsten gesetzten Vorfahren und deckt den halben Block zu. */
.la7 .mb{position:relative}
.la7 .dia.frei img,.la7 .mb.frei img{width:100%;height:100%;object-fit:contain;
 object-position:center}
/* Farb-Chips und Groessen-Kacheln SCHALTEN hier die Auswahl der Seite um, sie
   fuehren nicht auf eine andere Seite. Sie sind deshalb Knoepfe und keine Verweise -
   das Aussehen bleibt das der Artikelseiten. */
.la7 button.vfarbe,.la7 button.vg{font:inherit;color:inherit;text-align:left;
 cursor:pointer;-webkit-appearance:none;appearance:none}
.la7 button.vfarbe:hover,.la7 button.vg:hover{border-color:var(--acc);
 transform:translateY(-1px)}
.la7 button.vfarbe:focus-visible,.la7 button.vg:focus-visible{outline:3px solid var(--acc);
 outline-offset:3px}
.la7 .vfarbe .gew,.la7 .vg .hier{display:none}
.la7 .vfarbe.jetzt .gew,.la7 .vg.jetzt .hier{display:inline-block}
.la7 .vfarbe.jetzt,.la7 .vg.jetzt{cursor:default}
/* ---- Kulturtopf-Rechner ---- */
.la7 .rechner{border:1px solid var(--line);border-radius:16px;background:var(--paper);
 padding:clamp(.9rem,2vw,1.25rem);margin-top:1.1rem}
.la7 .rechner label{display:block;font:600 .71rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.12em;
 text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.la7 .rzeile{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.la7 .rechner input{min-height:48px;width:7.5rem;border:1px solid var(--line);
 border-radius:999px;padding:0 1rem;font:inherit;background:#fff;color:var(--ink)}
.la7 .rechner .rout{margin:.8rem 0 0;font-size:.95rem}
.la7 .rechner .rout b{font-weight:800;letter-spacing:-.02em}
.la7 .rechner .rout a{color:var(--accd);font-weight:600;text-decoration:underline;
 cursor:pointer}
/* ---- Vergleichstabelle aller sechs Varianten ---- */
.la7 .vergleich{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.1rem 0 0;
 font-variant-numeric:tabular-nums}
.la7 .vergleich caption{text-align:left;font:600 .71rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.12em;
 text-transform:uppercase;color:var(--muted);padding-bottom:.5rem}
.la7 .vergleich th{text-align:left;font:600 .72rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.1em;
 text-transform:uppercase;color:var(--muted);padding:.3rem .7rem .5rem 0;
 border-bottom:1px solid var(--line);white-space:nowrap}
.la7 .vergleich td{padding:.55rem .7rem .55rem 0;border-top:1px solid var(--line);
 vertical-align:middle}
.la7 .vergleich td:first-child{width:3.4rem;padding-right:.5rem}
.la7 .vergleich .vbild{width:2.6rem;height:2.6rem}
/* Bild und Name fuehren auf die Artikelseite, der Einsatz auf seine eigene. Ruhig
   bleibt die Tabelle, weil die Verweise erst beim Ueberfahren unterstrichen werden. */
.la7 .vergleich a.still{color:inherit;text-decoration:none;display:inline-flex;
 align-items:center;gap:.15rem}
.la7 .vergleich a.still:hover{text-decoration:underline;text-underline-offset:2px}
.la7 .vergleich a.still:focus-visible{outline:3px solid var(--acc);outline-offset:2px;
 border-radius:6px}
.la7 .vergleich .was{font-weight:700;letter-spacing:-.015em}
.la7 .vergleich .zur{display:inline-flex;align-items:center;white-space:nowrap;
 color:var(--accd);font-weight:600;font-size:.88rem}
.la7 .vergleich .pr{font-weight:800;letter-spacing:-.02em}
.la7 .jetztzeile{background:var(--soft)}
@media (max-width:900px){
 /* Auf dem Handy wird aus jeder Tabellenzeile eine Karte - waagerecht scrollen muss
    hier nichts. */
 .la7 .vergleich caption{display:block;width:100%}
 .la7 .vergleich,.la7 .vergleich tbody,.la7 .vergleich tr,.la7 .vergleich td{
  display:block;width:auto}
 .la7 .vergleich thead{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0)}
 .la7 .vergleich tr{border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:.7rem .8rem;margin:0 0 .6rem;display:grid;
  grid-template-columns:3.2rem minmax(0,1fr);gap:0 .7rem;align-items:center}
 .la7 .vergleich td{border:0;padding:.1rem 0}
 .la7 .vergleich td:first-child{grid-row:span 5;align-self:start;width:auto}
 .la7 .vergleich td[data-t]::before{content:attr(data-t) ": ";color:var(--muted);
  font-size:.78rem}
 .la7 .vergleich td.was::before{content:none}
}
/* Am PC unter die Datentafel umgezogen (PC_UMZUG_JS) */
.la7 .spalte .mxfuss.rechts{margin:1rem 0 0}
.la7 .spalte .eb-vertrauen.rechts{margin:.8rem 0 0}
/* Eingedampft (User 27.10.2026): ohne Ueberschrift "Zusammenstellen und bestellen", die Lieferzeit steht rechts
   neben dem Preis statt in einer eigenen Zeile darunter */
@media (min-width:641px){
.la7 .karte.maxi{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:start}
.la7 .karte.maxi>*{grid-column:1 / -1}
.la7 .karte.maxi>.k-pbox{grid-column:1;align-self:baseline}
.la7 .karte.maxi>.k-liefer{grid-column:2;align-self:baseline;justify-self:end;text-align:right;max-width:13rem;margin:0}
}

/* ---- zwei Kapitel mit je einem Katalogblatt ------------------------------------- */
.la7 .block + .block{border-top:1px solid var(--line)}
/* Was der Motor per hidden ausblendet (die Groessen, die es nicht in jeder Farbe
   gibt), muss auch wirklich verschwinden: .vg traegt display:flex, und das schlaegt
   die [hidden]-Regel des Browsers. */
.la7 [hidden]{display:none !important}
.la7 .spalte .kaptitel{margin:.1rem 0 0;font-weight:700;letter-spacing:-.022em;
 font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.06}
/* ---- Farb-Chips im Maxi-Warenkorb ----------------------------------------------
   sprachgebrauch.json: ab fuenf Farben brechen die Chips um, gescrollt wird NIE.
   In der rund 460 px breiten Spalte des Katalogblatts stehen fuenf Chips als
   3 + 2 und vier als 2 x 2 - dafuer bekommen sie eine feste Grundbreite, sonst
   rutscht der letzte Chip allein in eine eigene Reihe. */
.la7 .maxi .vfarben.fuenf .vfarbe{flex:1 1 30%}
.la7 .maxi .vfarben.vier .vfarbe{flex:1 1 44%}
@media (max-width:560px){
 .la7 .maxi .vfarben.fuenf .vfarbe{flex:1 1 44%}
}
/* Die Schale gibt es in einer Groesse - statt einer einzelnen Kachel steht dort der
   Satz mit den Massen. */
.la7 .maxi .vmass{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5}
.la7 .maxi .vmass b{color:var(--ink);font-weight:700}
/* ---- Groessenleiter als Waehler -------------------------------------------------
   Die Stufen schalten hier die Auswahl der Seite um (und fuehren nicht auf eine
   andere Seite). Aussehen und Massstab bleiben die der Artikelseiten. */
.la7 .lst[data-schaltbar]{cursor:pointer}
/* In der Leiter steht "gewaehlt" nur an der Stufe, die es auch ist - AS.groessenleiter
   gibt den Zusatz nur einmal aus, hier steht er an jeder Stufe und wird umgeschaltet. */
.la7 .lst .hier{display:none}
.la7 .lst.jetzt .hier{display:block}
.la7 .leiterkap .dlead{margin:.45rem 0 1rem;max-width:none;font-size:.95rem;
 line-height:1.6;color:var(--muted)}
/* ---- Kulturtopf-Rechner: Der Nachsatz zum Einsatz steht auf eigener Zeile ------
   Er wuerde sonst direkt hinter "Diese Groesse waehlen" in derselben Zeile kleben. */
.la7 .rout .tiny{display:block;margin-top:.5rem}
/* ---- Passender Lucas-Einsatz: Packshot im Kreis, daneben Name und Preis --------
   Der Kreis ist weiss (nicht --paper), sonst zeichnete sich das weisse Quadrat des
   Packshots im cremefarbenen Kreis ab. Auf schmalen Schirmen rutscht der Preis unter
   den Namen, statt die Tabellenspalte zu sprengen. */
.la7 .einsatzz{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.la7 .einsatzz img{width:40px;height:40px;flex:none;border-radius:50%;
 background:#fff;object-fit:contain}
.la7 .einsatzz a{color:var(--accd);font-weight:600}
.la7 .rout .einsatzz{margin-top:.15rem}
@media (max-width:560px){
 /* In der schmalen Spalte der Masstabelle braucht der Name den ganzen Platz - der
    Packshot tritt dort zurueck. */
 .la7 .masstab .einsatzz img{display:none}
}
/* ---- Vergleichstabelle: eine Zeile je Gruppe ---- */
.la7 .vergleich .grp{background:var(--soft);font:600 .72rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.la7 .vergleich .grp td{padding:.45rem .7rem .45rem 0}
@media (max-width:900px){
 .la7 .vergleich .grp{display:block;border:0;background:transparent;padding:.6rem 0 .2rem;
  margin:0}
 .la7 .vergleich .grp td{padding:0}
}
.la7 .block{--kaufrechts:1}
.la7 .block.kaufrechts .katalogblatt .steck{margin-top:1.2rem}
.la7 .block.kaufrechts .katalogblatt .steckliste{grid-template-columns:repeat(2,minmax(0,1fr))}
.la7 .block.kaufrechts .spalte .schein{margin-top:1.1rem}
.la7 .block.kaufrechts .eb-anker{display:none}
/* 3 bis 5 Farben (Klassen mittel/viele aus achsen_masse): rechts als Bildkacheln in EINER Reihe, Bild ueber dem
   Namen, buendig mit den Groessenkacheln (User 28.10.2026 an Esra: "sieht gut aus"). Ab 6 Farben bleibt es beim Umbruch. */
.la7 .block.kaufrechts .maxi .vfarben:is(.mittel,.viele):not(:has(>:nth-child(6))){display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.5rem}
.la7 .block.kaufrechts .maxi .vfarben:is(.mittel,.viele):not(:has(>:nth-child(6))) .vfarbe{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:.65rem .3rem .55rem;border-radius:16px;min-width:0}
.la7 .block.kaufrechts .maxi .vfarben:is(.mittel,.viele):not(:has(>:nth-child(6))) .vbild{width:3.6rem;height:3.6rem;flex:none}
.la7 .block.kaufrechts .maxi .vfarben:is(.mittel,.viele):not(:has(>:nth-child(6))) .vfarbe b{font-size:.86rem;line-height:1.2}
.la7 .block.kaufrechts .maxi .vfarben:is(.mittel,.viele):not(:has(>:nth-child(6))) .vsatz{display:none}
.la7 .block.kaufrechts .maxi .vfarben:is(.mittel,.viele):not(:has(>:nth-child(6))) .haken{position:absolute;top:.4rem;right:.45rem;margin:0}
/* Hinweise unter dem Warenkorb rechts eine Nummer groesser (User 28.10.2026) */
.la7 .block.kaufrechts .spalte .mxfuss{font-size:.9rem;line-height:1.5}
.la7 .block.kaufrechts .spalte .eb-vertrauen{font-size:.9rem}
.la7 .block.kaufrechts .anriss-rest{margin:1.4rem 0 0;font-size:.98rem;line-height:1.6;color:var(--muted)}
/* Datentafel links kompakter, ohne Ueberschrift (User 28.10.2026: "kann man sich denken") */
.la7 .block.kaufrechts .katalogblatt .steck h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.la7 .block.kaufrechts .katalogblatt .steckliste dt{font-size:.64rem;letter-spacing:.1em}
.la7 .block.kaufrechts .katalogblatt .steckliste dd{font-size:.9rem}
/* Rechts ist Platz: Farbchips mit groesserem Bild, damit man die Farbe erkennt (nur 2 Farben = "gross";
   ab 3 Farben nochmal ansehen, User 28.10.2026) */
.la7 .block.kaufrechts .maxi .vfarben.gross .vbild{width:4.4rem;height:4.4rem}
/* Ueberschrift ist weg - der Abstand darunter auch */
.la7 .block.kaufrechts .katalogblatt .steck h2+*{margin-top:0}
/* Groessenkacheln am PC flach: Groesse + Preis in Zeile 1, Hoehe + Innenmass in Zeile 2 (User 28.10.2026:
   "die Groessenauswahl koennte niedriger werden"). Nur wenn alle Groessen in EINE Reihe passen (bis 4): bei genau 5
   (Ryan/Esra/Iris) und bei Umbruch in 4 Spalten (Lucas 14, Bola 7 - Preis klebt am Mass, 29.10.2026) bleibt sie hoch. */
.la7 .maxi .vg .vgm .vgt{display:none}
.la7 .block.kaufrechts .maxi .vgroessen:not(.fuenf):not(:has(>:nth-child(5))) .vg .vtext{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.6rem;align-items:baseline;width:100%}
.la7 .block.kaufrechts .maxi .vgroessen:not(.fuenf):not(:has(>:nth-child(5))) .vg .vtext>b{grid-column:1;grid-row:1}
.la7 .block.kaufrechts .maxi .vgroessen:not(.fuenf):not(:has(>:nth-child(5))) .vg .vtext>em{grid-column:2;grid-row:1;margin-right:1.1rem}
.la7 .block.kaufrechts .maxi .vgroessen:not(.fuenf):not(:has(>:nth-child(5))) .vg .vgm{grid-column:1 / -1;grid-row:2;margin:.15rem 0 0}
.la7 .block.kaufrechts .maxi .vgroessen:not(.fuenf):not(:has(>:nth-child(5))) .vg .vgm br{display:none}
.la7 .block.kaufrechts .maxi .vgroessen:not(.fuenf):not(:has(>:nth-child(5))) .vg .vgm .vgt{display:inline}
/* Lieferzeit neben dem Preis eine Nummer groesser (User 28.10.2026) */
.la7 .block.kaufrechts .karte.maxi>.k-liefer{font-size:1.05rem}
.la7 .block.kaufrechts .maxi .vfarben.gross .vfarbe{padding:.45rem .8rem .45rem .45rem}
@media (min-width:1260px){
#main{max-width:1440px}
.fdrand,.fdrahmen{max-width:1440px!important}
.la7 .innen,.la7 .streifen .txt{max-width:none}
.la7 .block{grid-template-columns:minmax(0,470px) minmax(0,1fr)}
.la7 .kap h2{max-width:none}
.la7 .maxi .vgroessen.fuenf{--sp:5!important}
.la7 .maxi .vgroessen.fuenf .vg{padding:.5rem .45rem}
.la7 .maxi .vgroessen.fuenf .vg .haken{top:.25rem;right:.25rem}
.la7 .kap[id$="-machart"]{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(1.6rem,3vw,2.8rem);align-items:start}
.la7 .kap[id$="-machart"]>*{grid-column:1 / -1}
.la7 .kap[id$="-machart"]>.breitbild{grid-column:1}
.la7 .kap[id$="-machart"]>.spalten{grid-column:2;margin-top:1.3rem;column-count:1}
}

/* fd-bau-css: serien_handy v1 - Handy-Kuerzung Serien-/Info-Seite */
.la7 .sh-auf,.la7 .sh-info{display:none}
@media (max-width:640px){
html[data-fd-kurz] .la7 .sh-zu > :not(h2):not(.sh-auf){display:none}
html[data-fd-kurz] .la7 .sh-weg{display:none}
html[data-fd-kurz] .la7 .sh-auf{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin:10px 0 0;padding:13px 16px;min-height:48px;border:1px solid var(--line,#e9e3d8);border-radius:10px;
  background:#fff;color:var(--ink,#2a2722);font:inherit;font-size:1rem;font-weight:700;text-align:left;cursor:pointer}
html[data-fd-kurz] .la7 .sh-auf::after{content:"\25be";font-size:1.1rem;color:var(--muted,#7a7367)}
html[data-fd-kurz] .la7 .sh-auf[aria-expanded="true"]::after{content:"\25b4"}
html[data-fd-kurz] .la7 .sh-info{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:18px 0;padding:15px 16px;min-height:44px;border:1px solid var(--line,#e9e3d8);border-radius:10px;background:#fff;
  font-size:1.02rem;font-weight:700;color:var(--ink,#2a2722);text-decoration:none;line-height:1.3}
html[data-fd-kurz] .la7 .sh-info small{display:block;font-size:12.5px;font-weight:500;color:var(--muted,#7a7367);margin-top:2px}
html[data-fd-kurz] .la7 .sh-info::after{content:"\203a";font-size:1.5rem;line-height:1;color:var(--muted,#7a7367)}
}
/* Baustein handy_erstblick (aus Entwurf A-1, 16.10.2026): Artikelseite am Handy.
   Greift nur, wenn handy.js die Seite umgebaut hat (html[data-fd-handy]) UND der Bildschirm
   schmal ist. Desktop bleibt unberuehrt. Vorbild: Erdbeer-Video GGg61sdEjeI \u2013 der erste
   Bildschirm traegt die Kaufentscheidung allein, alles Weitere ist eingeklappt (nie weggelassen). */
@media (max-width:640px){
html[data-fd-handy] #content{padding-top:4px}
html[data-fd-handy] .sqrbreadcrumbs{font-size:12px;line-height:1.3;margin:0;padding:2px 0 5px;color:var(--muted,#7a7367)}
html[data-fd-handy] .sqrbreadcrumbs a{color:inherit}
html[data-fd-handy] body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
html[data-fd-handy] .la7{margin-top:0;padding-top:0}
html[data-fd-handy] .la7 .innen{padding:0}
.la7 .hk-text,.la7 .hk-klappen{margin-left:calc(16px - var(--fd-rand,30px));margin-right:calc(16px - var(--fd-rand,30px))}   /* Text 16 px von der Kante, egal welcher Rand */

/* ---- Bild: randlos, wischbar, naechstes Bild schaut rechts heraus ---- */
/* 100vw geht am Handy nicht (waechst mit dem Layout-Viewport mit) \u2013 Rand kommt vom Rand-Baustein (--fd-rand, fd/gemeinsam/rand.css;
   ohne ihn 30 px wie der alte Siquando-Rahmen) */
.la7 .hk-bild{position:relative;width:calc(100% + 2 * var(--fd-rand,30px));margin-left:calc(-1 * var(--fd-rand,30px));margin-top:2px}
.la7 .hk .buehne{position:relative;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  aspect-ratio:auto;height:min(62vw,270px,31vh);width:100%;box-sizing:border-box;border:0;margin:0;padding:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;order:0}
.la7 .hk .buehne::-webkit-scrollbar{display:none}
.la7 .hk .dia{position:relative;inset:auto;opacity:1;flex:0 0 84%;height:100%;scroll-snap-align:center;
  border-radius:18px;overflow:hidden;background:var(--soft,#f7f2ea);transition:none}
/* Nachbarbilder gedimmt, Aussenkanten laufen weich aus (User 16.10.: "harte Kanten") */
.la7 .hk .buehne{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0,#000 4%,#000 96%,rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0,#000 4%,#000 96%,rgba(0,0,0,.25) 100%)}
.la7 .hk .dia:not(.hk-mitte){opacity:.72;transition:opacity .25s ease}
.la7 .hk .dia.hk-mitte{opacity:1;transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){.la7 .hk .dia{transition:none!important}}
.la7 .hk .dia:only-child{flex-basis:100%}
.la7 .hk .dia.frei img{transform:scale(1.25)}
.la7 .hk .dia.mass{background:#fff}
.la7 .hk-bild .lupe-auf{position:absolute;right:calc(8% + 10px);bottom:12px;z-index:2}
.la7 .hk-punkte{display:flex;justify-content:center;gap:7px;margin:8px 0 0}
.la7 .hk-punkte i{width:7px;height:7px;border-radius:50%;background:var(--line,#e9e3d8);transition:all .2s}
.la7 .hk-punkte i.an{background:var(--ink,#2a2722);width:18px;border-radius:4px}

/* ---- Text-Kopf: Linie, Titel, Preis ---- */
.la7 .hk-text{padding:2px 0 0}
.la7 .hk .kicker{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tief,#4a5f58);text-shadow:none;opacity:1}
.la7 .hk h1{font-size:clamp(1.2rem,6.4vw,1.5rem);line-height:1.15;margin:0;letter-spacing:-.02em}
.la7 .hk h1 br{display:none}
.la7 .hk-preis{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;margin:6px 0 0}
.la7 .hk-preis .hk-p{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.la7 .hk-preis .hk-v{grid-column:1;white-space:nowrap;display:block;font-size:11.5px;color:var(--muted,#7a7367);margin-top:3px;line-height:1.25}
.la7 .hk-preis .hk-v a{color:inherit}
.la7 .hk-liefer{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;font-size:13.5px;font-weight:700;color:var(--gruen,#22493a);background:#e7f0ea;
  border-radius:999px;padding:7px 12px;white-space:nowrap}
.la7 .hk-liefer:empty{display:none}

/* ---- Anriss: zwei Zeilen, "... mehr" sitzt am Ende der zweiten Zeile (User 16.10.: spart eine Zeile) ---- */
.la7 .hk-anriss{position:relative;margin:10px 0 0}
.la7 .hk .anriss{font-size:14.5px;line-height:1.5;margin:0;color:#4d473f;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.la7 .hk .anriss.offen{display:block;-webkit-line-clamp:unset}
.la7 .hk-mehr{position:absolute;right:0;bottom:0;border:0;margin:0;padding:0 0 0 22px;font:inherit;
  font-size:14.5px;line-height:1.5;font-weight:700;color:var(--accd,#87502f);cursor:pointer;
  background:linear-gradient(90deg,transparent,var(--hk-grund,#fbf9f5) 16px)}
.la7 .hk-mehr::after{content:"";position:absolute;inset:-12px 0 -12px 0}
.la7 .hk-mehr::before{content:"\2026\00a0";font-weight:400;color:#4d473f}
.la7 .hk-anriss.offen .hk-mehr{position:relative;display:inline-block;padding:4px 0 0;background:none}
.la7 .hk-anriss.offen .hk-mehr::before{content:none}

/* ---- Fakten: drei Kacheln nebeneinander, Symbol + Kurztext; Tippen zeigt den ganzen Satz (v14, User 18.10.2026:
   Groesse nicht noch einmal - steht im Titel; "mouse over Effekt ... dann koennte man die 3 nebeneinander machen") ---- */
.la7 .hk-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 0;padding:0;list-style:none}
.la7 .hk-chips li{position:relative;margin:0;padding:0;min-width:0;list-style:none}
.la7 .hk-chips li::before{content:none}
.la7 .hk-chips .hk-fakt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;
  width:100%;height:100%;min-height:58px;margin:0;padding:7px 4px;border:0;border-radius:12px;background:var(--soft,#f7f2ea);
  color:#3a352e;font:inherit;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;text-align:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none}
.la7 .hk-chips .hk-fakt b{display:block;font-size:12.5px;font-weight:700}
.la7 .hk-chips .hk-fakt *,.la7 .hk-blase{letter-spacing:0;text-transform:none;word-spacing:0}
.la7 .hk-chips svg{flex:none;width:20px;height:20px;max-height:none;color:var(--tief,#4a5f58)}
.la7 .hk-chips li.offen .hk-fakt{box-shadow:inset 0 0 0 1.5px var(--tief,#4a5f58)}
.la7 .hk-blase{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:6;box-sizing:border-box;
  width:max-content;max-width:200px;padding:7px 10px;border-radius:9px;background:#2f3b36;color:#fff;font-size:12.5px;
  font-weight:500;line-height:1.3;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;
  transition:opacity .15s,visibility .15s;pointer-events:none}
.la7 .hk-chips li:first-child .hk-blase{left:0;transform:none;text-align:left}
.la7 .hk-chips li:last-child .hk-blase{left:auto;right:0;transform:none;text-align:right}
.la7 .hk-chips li::after{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;margin-left:-6px;z-index:6;
  border:6px solid transparent;border-top-color:#2f3b36;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.la7 .hk-chips li.offen .hk-blase,.la7 .hk-chips li.offen::after{opacity:1;visibility:visible}
@media (hover:hover){.la7 .hk-chips li:hover .hk-blase,.la7 .hk-chips li:hover::after{opacity:1;visibility:visible}}

/* ---- Farbe und Groesse ---- */
.la7 .hk-wahl{margin:12px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.la7 .hk-zeile{display:flex;align-items:center;gap:8px}
.la7 .hk-zeile > b{flex:none;font-size:11px;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#7a7367)}
.la7 .hk-reihe{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;min-width:0;flex:1}
.la7 .hk-reihe::-webkit-scrollbar{display:none}
.la7 .hk-farbe{display:flex;align-items:center;gap:7px;border:1.5px solid var(--line,#e9e3d8);border-radius:999px;
  padding:3px 12px 3px 3px;font-size:13px;font-weight:600;color:var(--ink,#2a2722);text-decoration:none;
  min-height:44px;white-space:nowrap;background:#fff}
.la7 .hk-farbe img{width:36px;height:36px;border-radius:50%;object-fit:cover;max-width:none;transform:none!important}
.la7 .hk-farbe.jetzt{border-color:var(--ink,#2a2722)}
.la7 .hk-gr{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 7px;
  border:1.5px solid var(--line,#e9e3d8);border-radius:12px;font-size:13.5px;font-weight:700;color:var(--ink,#2a2722);
  text-decoration:none;background:#fff;white-space:nowrap}
.la7 .hk-gr.jetzt{background:var(--ink,#2a2722);color:#fffdf9;border-color:var(--ink,#2a2722)}

/* ---- Was der Handy-Kopf ersetzt: Miniaturen, Bestellschein (die Leiste kauft) ---- */
html[data-fd-handy] .la7 .bildzeile,html[data-fd-handy] .la7 .schein{display:none}
html[data-fd-handy] .la7 .spalte > .kicker{display:none}
html[data-fd-handy] .la7 .hk-klappen,html[data-fd-handy] .la7 .hk-klapp{opacity:1;transform:none}
.la7 .streifen.hk-unten{margin:22px 0 0;border-radius:18px}
.la7 .streifen.hk-imkap{margin:0 0 12px}
html[data-fd-handy] .la7 .hk-weg{display:none}
/* Zweite Lucas-Karte "Passend dazu" am Handy weg, wenn oben der Schalter steht (Feedback 16.10.); der Schalter
   kauft weiter ueber die Karte im Hintergrund (click() wirkt auch auf ausgeblendete Elemente) */
html[data-fd-zusatz] .la7 .vachse.dazuachse:has(> ul.dazu > li.dz){display:none}

/* ---- Groessenleiter nur am Desktop; am Handy Verweis auf die Serienseite (User 16.10.) ---- */
html[data-fd-handy] .la7 .wahl{display:none}
.la7 .hk-serie{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line,#e9e3d8);
  padding:15px 0;min-height:44px;font-size:1.02rem;font-weight:700;color:var(--ink,#2a2722);text-decoration:none;line-height:1.3}
.la7 .hk-serie small{display:block;font-size:12.5px;font-weight:500;color:var(--muted,#7a7367);margin-top:2px}
.la7 .hk-serie::after{content:"\203a";font-size:1.5rem;line-height:1;color:var(--muted,#7a7367)}

/* ---- Einklappen statt Weglassen ---- */
.la7 .hk-klapp{border-top:1px solid var(--line,#e9e3d8);margin:0!important;padding:0!important}
.la7 .hk-klapp > h2:first-of-type{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:1.02rem!important;line-height:1.3!important;margin:0!important;padding:15px 0!important;cursor:pointer;min-height:44px}
.la7 .hk-klapp > h2:first-of-type::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s}
.la7 .hk-klapp.zu > :not(h2:first-of-type){display:none!important}
.la7 .hk-klapp:not(.zu) > h2:first-of-type::after{transform:rotate(-135deg);margin-top:4px}
.la7 .hk-klapp:not(.zu){padding-bottom:16px!important}
.la7 .hk-klappen{margin:20px 0 0;border-bottom:1px solid var(--line,#e9e3d8)}
/* v11 (17.10.2026): Luecke unter den Klappen am Handy - der Desktop-Block ist dort leer (Inhalt steckt im Kopf),
   behielt aber 33 px Polster; dazu 32 px Seitenfuss und eine zweite Linie direkt vor der Empfehlungsleiste */
html[data-fd-handy] .la7{padding-bottom:0!important}
html[data-fd-handy] .la7 .innen>.block{padding-top:0!important;padding-bottom:0!important}
html[data-fd-handy] .la7 .hk-klappen{border-bottom:0}

/* ---- Verkaufsbanner unten: Menge, Kaufen mit Gesamtpreis; darueber Warenkorb + Kasse ---- */
html[data-fd-handy] .la7 .leiste{top:auto!important;bottom:0;transform:none!important;background:#fffdf9;color:var(--ink,#2a2722);
  border-top:1px solid var(--line,#e9e3d8);box-shadow:0 -6px 18px rgba(42,39,34,.08);
  padding:0 0 env(safe-area-inset-bottom);z-index:950}
html[data-fd-handy] .la7 .leiste .linnen{display:block;padding:0 14px}
html[data-fd-handy] .la7 .leiste .was,html[data-fd-handy] .la7 .leiste .k-pbox,
html[data-fd-handy] .la7 .leiste .k-mengelabel,html[data-fd-handy] .la7 .leiste select.k-menge{display:none!important}
html[data-fd-handy] .la7 .leiste .leistenkarte{display:block;margin:0;padding:0;background:none;box-shadow:none;border:0}
.la7 .hk-korb{display:none;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px 0;font-size:14.5px;font-weight:700}
.la7 .hk-korb.an{display:flex}
.la7 .hk-korb a{color:var(--ink,#2a2722);text-decoration:none;display:flex;align-items:center;gap:6px;min-height:36px}
.la7 .hk-korb a.hk-kasse{color:var(--gruen,#22493a)}
.la7 .hk-korb svg{width:20px;height:20px;flex:none}
/* v19: beide Wege gleich - Symbol + Text + Pfeil, unser Gruen, gleiche Schriftstaerke (User 20.10.2026: kein
   Unterstrich, keine zwei Farben/Groessen); schmal (320) etwas kleiner */
.la7 .hk-korb a.hk-zumkorb{color:var(--gruen,#22493a)}
.la7 .hk-korb .hk-pf{margin-left:-2px}
.la7 .hk-korb a{white-space:nowrap}
@media (max-width:359px){.la7 .hk-korb{font-size:13px;gap:6px}.la7 .hk-korb a{gap:4px}.la7 .hk-korb svg{width:16px;height:16px}.la7 .hk-korb .hk-kasse svg{display:none}}
/* v7: Warenkorb-Zeile unter dem Kaufknopf (Daumenzone), mit Warenwert */
html[data-fd-korbwert] .la7 .leiste .leistenkarte{display:flex;flex-direction:column;align-items:stretch}
html[data-fd-korbwert] .la7 .leiste .k-los{order:1}
html[data-fd-korbwert] .la7 .hk-korb{order:2;padding:0 2px 6px;margin-top:-4px}
html[data-fd-korbwert] .la7 .hk-korb .hk-wert{font-weight:700}
html[data-fd-handy] .la7 .leiste .k-los{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:10px 0;margin:0}
.la7 .hk-stepper{flex:none;display:flex;align-items:center;border:1.5px solid var(--line,#e9e3d8);border-radius:14px;height:50px;background:#fff}
.la7 .hk-stepper button{width:44px;height:48px;border:0;background:none;font-size:20px;line-height:1;color:var(--ink,#2a2722);padding:0;cursor:pointer}
.la7 .hk-stepper button:disabled{color:#c9c2b6}
.la7 .hk-stepper output{min-width:26px;text-align:center;font-weight:700;font-size:15px}
html[data-fd-handy] .la7 .leiste button.k-kauf{flex:1 1 0;min-width:0;height:50px;border-radius:14px;background:var(--gruen,#22493a);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;padding:0 12px;border:0;white-space:nowrap}
html[data-fd-handy] .la7 .leiste button.k-kauf .hk-summe{font-weight:600;opacity:.92}
html[data-fd-handy] .la7 .leiste button.k-kauf .hk-summe::before{content:"\00b7";margin:0 7px}
}
/* Schmale Handys (Anzeigezoom ~320 px, iPhone SE/mini 375 px): Gesamtpreis als zweite Zeile im Knopf,
   Stepper schmaler - sonst rutscht der Knopf unter die Menge (User-Screenshot 16.10.2026). */
@media (max-width:400px){
.la7 .hk-stepper button{width:44px}   /* v17: Tippflaeche >= 44 px (Fable-Gutachten 19.10.) */
.la7 .hk-stepper output{min-width:20px}
html[data-fd-handy] .la7 .leiste button.k-kauf{display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.15;font-size:14.5px;padding:0 8px}
html[data-fd-handy] .la7 .leiste button.k-kauf .hk-summe{font-size:12.5px}
html[data-fd-handy] .la7 .leiste button.k-kauf .hk-summe::before{content:none}
.la7 .hk-gr{min-width:40px;padding:0 5px;font-size:13px}
.la7 .hk-chips .hk-fakt{font-size:10.5px;padding:7px 3px}
.la7 .hk-chips .hk-fakt b{font-size:12px}
.la7 .hk-liefer{white-space:normal;max-width:7.5em;text-align:center;line-height:1.2;border-radius:14px;padding:7px 12px}
}
/* v17 (#1256): langer Liefertermin ("Wieder lieferbar ab 20.10.2026") als EIGENE Zeile unter dem Preis - als Pille
   brach er in 4 Zeilen und lief unter die Kaufleiste; "Lieferzeit 3 Werktage" bleibt die Pille neben dem Preis */
.la7 .hk-preis .hk-liefer.lang{grid-column:1 / -1;grid-row:auto;justify-self:start;max-width:none;white-space:normal;
  text-align:left;border-radius:10px;margin-top:8px;line-height:1.3}

/* Zusatzartikel-Schalter (aus Entwurf A-2, 16.10.2026) unter den Fakten-Kacheln; seit v21 auch am PC in der
   Kaufkarte (das Element gibt es nur dort, wo das Skript es baut) */
.la7 .hk-zusatz{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0 0;padding:9px 12px;min-height:52px;
  border:1.5px solid var(--line,#e9e3d8);border-radius:12px;background:#fff;color:var(--ink,#2a2722);
  font:inherit;text-align:left;cursor:pointer;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.la7 .hk-zusatz .hk-box{flex:none;position:relative;width:22px;height:22px;border:2px solid #b9b1a3;border-radius:6px;background:#fff}
.la7 .hk-zusatz .hk-ztxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.la7 .hk-zusatz .hk-ztxt b{font-size:13.5px;line-height:1.25}
.la7 .hk-zusatz .hk-ztxt small{font-size:11.5px;line-height:1.3;color:var(--muted,#7a7367)}
.la7 .hk-zusatz .hk-zpreis{flex:none;font-size:13.5px;font-weight:700;white-space:nowrap}
.la7 .hk-zusatz .hk-zpreis sup{font-size:.7em;margin-left:1px}
.la7 .hk-zusatz[aria-checked="true"]{border-color:var(--gruen,#22493a);background:#f1f7f3}
.la7 .hk-zusatz[aria-checked="true"] .hk-box{background:var(--gruen,#22493a);border-color:var(--gruen,#22493a)}
.la7 .hk-zusatz[aria-checked="true"] .hk-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.la7 .hk-zusatz:focus-visible{outline:2px solid var(--gruen,#22493a);outline-offset:2px}
.la7 .hk-zbild{flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line,#e9e3d8);border-radius:8px;
  background:#fff;overflow:hidden;cursor:zoom-in}
.la7 .hk-zbild img{width:100%;height:100%;object-fit:cover;max-width:none;display:block;transform:scale(1.45);transform-origin:50% 58%}
/* PC (v21): Schalter in der Kaufkarte ueber Menge/Knopf, Gesamtpreis als Zeile darunter */
.la7 .karte .hk-zusatz{margin:14px 0 12px}
.la7 .karte .k-zsumme{margin:10px 0 0;font-size:.95rem;font-weight:700}
.la7 .karte .k-zsumme[hidden]{display:none}
/* Mit Sternchen ist der Pflichthinweis laenger - neben der Lieferzeit-Pille umbrechen statt darunter laufen */
@media (max-width:640px){
.la7 .hk-preis .hk-v:has(.hk-stern){white-space:normal}
.la7 .hk-zusatz .hk-lang{display:none}
}
/* Schmale Handys: kuerzer, damit der Text nicht dreizeilig wird (Groesse steht in der Grossansicht) */
@media (max-width:400px){
.la7 .hk-zusatz{gap:8px;padding:8px 10px}
.la7 .hk-zusatz .hk-lang{display:none}
.la7 .hk-zbild{width:40px;height:40px}
.la7 .hk-zusatz .hk-zpreis{font-size:13px}
}
.hk-zlupe{position:fixed;inset:0;z-index:2000;background:rgba(20,18,15,.82);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.hk-zlupe figure{margin:0;max-width:520px;width:100%;background:#fff;border-radius:16px;overflow:hidden}
.hk-zlupe img{display:block;width:100%;max-height:70vh;object-fit:contain;background:#fff}
.hk-zlupe figcaption{padding:10px 14px 12px;font-size:14px;font-weight:600;color:#2a2722;display:grid;gap:6px}
.hk-zlupe-link{justify-self:start;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;
  background:#22493a;color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.hk-zlupe-zu{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:44px;height:44px;border:0;border-radius:50%;
  background:#fff;color:#2a2722;font-size:26px;line-height:1;cursor:pointer}

/* fd-bau-css: serien_rad v2 - Farbkarussell, Buehne, Groessenrad (Serienseite am Handy) */
.la7 .sr{display:none}
@media (max-width:640px){
html[data-fd-rad]:not([data-fd-radteil]) .la7.serie > :not(.sr){display:none!important}
/* v5 Teil-Modus (Info-Seite): nur der alte Kaufbereich weicht dem Rad, Ueberschrift und Kapitel bleiben */
html[data-fd-radteil] .la7 .sr-weg{display:none!important}
html[data-fd-radteil] .la7 .sr{margin:18px 0 22px;order:7;scroll-margin-top:70px}   /* Katalogblatt ordnet per order (Anriss 7, Datentafel 8) */
html[data-fd-rad] .la7 .sr{display:block;color:#2a2722;text-align:left}
.la7 .sr .hk-text{margin-left:0;margin-right:0}
.la7 .sr .sr-serie{margin:4px 0 0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tief,#4a5f58);line-height:1.3}
.la7 .sr .sr-titel{font-size:clamp(1.2rem,6.4vw,1.5rem);line-height:1.15;margin:6px 0 0;letter-spacing:-.02em;font-weight:800;color:var(--ink,#2a2722)}
/* Farbkarussell: echte Oberflaeche als Muster, gewaehlte Farbe mittig (User 18.10.: Kreise zu klein) */
.la7 .sr .sr-farbrad{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  padding:8px var(--fd-rand,30px) 4px;margin:6px calc(-1 * var(--fd-rand,30px)) 0;overscroll-behavior-x:contain}
/* v19: passen alle Muster in die Breite, stehen sie mittig (sr-passt, per JS); sonst Karussell ab dem linken Rand */
.la7 .sr .sr-farbrad.sr-passt{justify-content:center}
.la7 .sr .sr-farbrad::-webkit-scrollbar{display:none}
.la7 .sr .sr-muster{flex:0 0 76px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;
  background:none;padding:0;font:inherit;cursor:pointer;color:var(--muted,#7a7367)}
.la7 .sr .sr-muster i{display:block;width:76px;height:58px;border-radius:12px;background:#ddd center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);transition:transform .2s}
.la7 .sr .sr-muster span{font-size:11.5px;line-height:1.15;white-space:nowrap}
.la7 .sr .sr-muster[aria-pressed="true"] i{outline:2.5px solid var(--ink,#2a2722);outline-offset:2px;transform:scale(1.04)}
.la7 .sr .sr-muster[aria-pressed="true"] span{color:var(--ink,#2a2722);font-weight:700}
.la7 .sr .sr-buehne{overflow:hidden;touch-action:pan-y;margin:0 calc(-1 * var(--fd-rand,30px))}   /* bis an die Kante: Rand-Baustein */
.la7 .sr .sr-spur{display:flex;will-change:transform}
.la7 .sr .sr-bild{flex:0 0 100%;height:200px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;position:relative}
.la7 .sr .sr-rahmen{position:relative;overflow:hidden;filter:drop-shadow(0 8px 10px rgba(42,39,34,.16))}
.la7 .sr .sr-rahmen img{position:absolute;max-width:none}
.la7 .sr .sr-zahl{position:absolute;top:8px;right:var(--fd-rand,30px);background:var(--gruen,#22493a);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px}
.la7 .sr .sr-huelle{position:relative;container-type:inline-size;margin:0;border-radius:14px;background:#f1ebe1;overflow:hidden;
  border:1px solid #ddd4c6;box-shadow:inset 0 8px 10px -8px rgba(42,39,34,.25),inset 0 -8px 10px -8px rgba(42,39,34,.25)}
.la7 .sr .sr-huelle::before,.la7 .sr .sr-huelle::after{content:"";position:absolute;top:0;bottom:0;width:10%;z-index:2;pointer-events:none}
.la7 .sr .sr-huelle::before{left:0;background:linear-gradient(90deg,#f1ebe1,rgba(241,235,225,0))}
.la7 .sr .sr-huelle::after{right:0;background:linear-gradient(-90deg,#f1ebe1,rgba(241,235,225,0))}
.la7 .sr .sr-fenster{position:absolute;left:50%;top:6px;bottom:6px;width:31%;transform:translateX(-50%);z-index:0;pointer-events:none;
  border:2px solid #2a2722;border-radius:10px;background:#fffdf9;box-shadow:0 2px 6px rgba(42,39,34,.12)}
.la7 .sr .sr-rad{position:relative;z-index:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain}
/* v22: Abstand links/rechts als Platzhalter statt padding-inline - Safari zaehlt das Polster am Ende eines
   Flex-Scrollers nicht mit, die letzte Stufe kam nie in die Mitte (Maud 5er-Set, User-iPhone 22.10.2026) */
.la7 .sr .sr-rad::before,.la7 .sr .sr-rad::after{content:"";flex:0 0 34.5cqw}
.la7 .sr .sr-rad::-webkit-scrollbar{display:none}
.la7 .sr .sr-stufe{flex:0 0 31cqw;scroll-snap-align:center;scroll-snap-stop:always;height:62px;perspective:300px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;border:0;background:none;color:#5f584e;font:inherit;cursor:pointer;
  position:relative;padding:0}
.la7 .sr .sr-dreh{display:flex;flex-direction:column;align-items:center;will-change:transform}
.la7 .sr .sr-stufe b{font-size:1.25rem;font-weight:800;line-height:1}
.la7 .sr .sr-stufe small{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;white-space:nowrap}
.la7 .sr .sr-stufe.sr-mitte{color:#2a2722}
.la7 .sr .sr-stufe i{position:absolute;top:5px;right:12%;min-width:16px;height:16px;border-radius:8px;background:var(--gruen,#22493a);color:#fff;
  font-style:normal;font-size:10px;font-weight:700;line-height:16px;text-align:center;padding:0 4px}
.la7 .sr .sr-serie a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.la7 .sr .sr-formen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 2px}
.la7 .sr .sr-form{flex-direction:column;min-height:52px;white-space:normal;line-height:1.2;text-align:center;cursor:pointer;font-family:inherit}
.la7 .sr .sr-form small{font-size:12px;font-weight:600;opacity:.8}
.la7 .sr .sr-form svg{width:46px;height:22px;display:block;margin:2px auto 3px;flex:none}
.la7 .sr .sr-groessen{margin:8px 0 0;font-size:.85rem;line-height:1.35;color:#5d554b;text-align:center}
.la7 .sr .sr-groessen[hidden]{display:none}
.la7 .sr .hk-info{margin-top:14px}
.la7 .sr .sr-meldung{position:fixed;left:50%;bottom:calc(132px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:960;
  background:var(--gruen,#22493a);color:#fff;border-radius:10px;padding:9px 14px;font-size:.85rem;font-weight:600;max-width:92vw}
.la7 .sr .sr-meldung[hidden]{display:none}
/* v18 (22.10.2026, Gustav): Leitsatz unter dem Titel (Serienseite), Versandzeile wie am Computer, Lupe am Radfoto,
   Kaufleiste der Info-Seite nennt die Wahl bzw. fuehrt erst zum Rad */
.la7 .sr .sr-satz{margin:4px 0 0;font-size:.9rem;line-height:1.4;color:#5d554b}
.la7 .sr .sr-versand{display:flex;gap:6px;align-items:flex-start;margin:10px 0 0;font-size:12px;line-height:1.4;color:var(--muted,#7a7367)}
.la7 .sr .sr-versand svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--acc,#a96544)}
.la7 .sr .sr-versand a{color:inherit}
.la7 .sr .sr-buehne{position:relative}
.la7 .sr .sr-buehne .lupe-auf{right:var(--fd-rand,30px);bottom:6px;width:40px;height:40px}
.la7 .sr .sr-was{display:none}
html[data-fd-radteil] .la7 .sr .sr-was{display:block;margin:8px 2px 0;font-size:13.5px;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-fd-radteil] .la7 .sr .sr-was span{font-weight:600;color:var(--muted,#7a7367)}
.la7 .sr .sr-zumrad{display:none}
html[data-fd-radteil] .la7 .sr.sr-offen .sr-zumrad{display:flex;flex:1 1 0;min-width:0;height:50px;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:14px;background:var(--ink,#2a2722);color:#fffdf9;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
html[data-fd-radteil] .la7 .sr.sr-offen .leiste .k-kauf,html[data-fd-radteil] .la7 .sr.sr-offen .leiste .hk-stepper,
html[data-fd-radteil] .la7 .sr.sr-offen .sr-was{display:none!important}
/* v18 daten.weiss: Rad mit Shop-Packshots auf Weiss (Siquandos ?w=768, Esra) statt Freistellern - Weiss verschwindet im
   Seitengrund, statt des Schlagschattens des Freistellers ein weicher Bodenschatten in Topfbreite */
.la7 .sr.sr-weiss .sr-rahmen{filter:none;background:#fcfaf4;z-index:1}   /* Seitengrund wie Bola: multiply braucht einen Grund in der Gruppe */
.la7 .sr.sr-weiss .sr-rahmen img{mix-blend-mode:multiply}
.la7 .sr.sr-weiss .sr-bild::after{content:"";position:absolute;left:50%;bottom:3px;width:var(--sw,0);height:12px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(42,39,34,.28),rgba(42,39,34,0));pointer-events:none}
}

/* fd-bau-css: handy_warten v1 - am Handy Inhalt erst zeigen, wenn der Umbau steht (#1257) */
@media (max-width:640px){html:not([data-fd-handy]) #contentcontainercontainer,html:not([data-fd-handy]) #content{visibility:hidden;animation:fd-hk-sicht 0s 3s forwards}}
@keyframes fd-hk-sicht{to{visibility:visible}}

/* ---- Karte "Passend dazu" (Baustein bausteine/zusatzartikel.py) ----------------
   Bild links, Text rechts, auf schmalen Anzeigen untereinander. Das Bild ist immer
   ein Link auf die Artikelseite des Zusatzartikels (Uebersichtsregel 02.09.2026:
   Bilder sind anklickbar), der Titel ebenso. Traegt die Karte einen eigenen
   Kaufknopf, ist sie KEIN Link-Element mehr - ein Knopf im Link waere ungueltiges
   Markup und am Handy nicht sicher zu treffen. */
.la7 .dazuachse{margin-top:1.6rem}
.la7 .dlead{margin:.45rem 0 .9rem;max-width:none;font-size:.95rem;line-height:1.6;
 color:var(--muted)}
.la7 .dazu{display:grid;grid-template-columns:1fr;gap:clamp(.8rem,1.4vw,1.15rem);
 list-style:none;margin:0;padding:0}
.la7 .dz{display:grid;grid-template-columns:45% minmax(0,1fr);align-items:stretch;
 background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
 transition:border-color .25s,box-shadow .25s}
.la7 .dz:hover{border-color:var(--acc);box-shadow:0 18px 30px -24px rgba(42,39,34,.55)}
.la7 .dbild{position:relative;display:block;width:100%;overflow:hidden;background:#fff}
.la7 .dbild::before{content:"";display:block;padding-top:75%}
.la7 .dbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 display:block;transition:transform .5s ease}
/* Breite, flache Artikel (Untersetzer) wirken im vollen Feld riesig - sie bekommen
   Luft um sich herum und stehen auf etwa drei Vierteln der Feldbreite. */
.la7 .dbild.flach img{inset:13% 13%;width:74%;height:74%}
.la7 .dz:hover .dbild img{transform:scale(1.04)}
.la7 a.dbild:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.la7 .dtxt{padding:clamp(1rem,1.7vw,1.5rem);display:flex;flex-direction:column;
 gap:.1rem;border-left:1px solid var(--line);min-width:0}
.la7 .dkick{display:block;font:600 .71rem/1.3 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.12em;
 text-transform:uppercase;color:var(--accd)}
.la7 .dtitel{display:block;text-decoration:none;color:inherit}
.la7 .dtitel b{display:block;margin-top:.25rem;font-weight:900;letter-spacing:-.03em;
 font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.2}
.la7 .dtitel:hover b{color:var(--accd)}
.la7 .dtitel:focus-visible{outline:3px solid var(--acc);outline-offset:3px;
 border-radius:6px}
.la7 .dmass{display:block;margin-top:.2rem;font-size:.86rem;color:var(--muted);
 font-variant-numeric:tabular-nums}
.la7 .dsatz{display:block;margin-top:.6rem;font-size:.95rem;line-height:1.62}
.la7 .dfuss{display:block;margin-top:auto;padding-top:.9rem}
.la7 .dpreis{display:block;font-weight:700;font-size:1.12rem;
 font-variant-numeric:tabular-nums}
.la7 .dust{display:block;font-size:.74rem;color:var(--muted);line-height:1.35}
.la7 .dmehr{margin-top:.6rem;display:inline-flex;align-items:center;gap:.4em;
 font-size:.88rem;font-weight:600;color:var(--accd);text-decoration:none}
.la7 .dmehr .pf{transition:transform .25s;flex:none}
.la7 .dz:hover .dmehr .pf{transform:translateX(3px)}
.la7 .dmehr:hover{text-decoration:underline}
.la7 .dmehr:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
/* ---- Kaufteil der Karte -------------------------------------------------------
   Preis und Versandhinweis stehen als Block zusammen (PAngV Paragraph 6: der
   Hinweis gehoert in unmittelbare Naehe JEDES Preises), der Knopf daneben oder
   darunter. Die Lieferzeile nimmt immer eine ganze Zeile ein. */
.la7 .dkauf{margin-top:auto;padding-top:.9rem;display:flex;flex-wrap:wrap;
 align-items:flex-end;gap:.55rem .9rem}
.la7 .dpbox{flex:1 1 9rem;min-width:0}
.la7 .dknopf{flex:0 0 auto;border:0;border-radius:999px;background:var(--ink);
 color:var(--soft);font:700 .92rem/1 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;padding:.85em 1.5em;cursor:pointer;
 transition:background .25s}
.la7 .dknopf:hover{background:var(--accd)}
.la7 .dknopf:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.la7 .dliefer{flex:1 0 100%;margin:0;font-size:.8rem;color:var(--muted);min-height:1.1em}
.la7 .dsperre,.la7 .dohnejs{flex:1 0 100%;margin:0;font-size:.82rem;line-height:1.5;
 color:var(--muted);display:none}
.la7 .dsperre a,.la7 .dohnejs a{color:var(--accd)}
.la7 .dz[data-zstand=ohnejs] .dknopf,.la7 .dz[data-zstand=laden] .dknopf{display:none}
.la7 .dz[data-zstand=ohnejs] .dohnejs{display:block}
.la7 .dz[data-zstand=sperre] .dknopf{display:none}
.la7 .dz[data-zstand=sperre] .dsperre{display:block}
/* ---- Ausverkauft: roter Stempel auf dem Bild, kein Preis, Knopf gesperrt ------- */
.la7 .dstempel{position:absolute;left:50%;top:50%;z-index:2;
 transform:translate(-50%,-50%) rotate(-8deg);border:3px solid #b4271f;color:#b4271f;
 background:rgba(255,255,255,.86);border-radius:8px;padding:.2em .55em;
 font:800 .95rem/1.2 "Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;
 pointer-events:none}
.la7 .dz[data-zstand=aus]{opacity:.92}
.la7 .dz[data-zstand=aus] .dbild img{filter:grayscale(1);opacity:.72}
.la7 .dz[data-zstand=aus] .dknopf{background:var(--line);color:var(--muted);
 cursor:not-allowed}
.la7 .dz[data-zstand=aus] .dknopf:hover{background:var(--line)}
@media (max-width:620px){
 .la7 .dz{grid-template-columns:1fr}
 .la7 .dtxt{border-left:0;border-top:1px solid var(--line);padding:.9rem .95rem 1.05rem}
 .la7 .dsatz{font-size:.92rem}
}
@media (max-width:360px){
 .la7 .dkauf{gap:.5rem}
 .la7 .dknopf{flex:1 0 100%;white-space:normal;padding:.8em 1em;text-align:center}
 .la7 .dpbox{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
 .la7 .dz,.la7 .dbild img,.la7 .dmehr .pf{transition:none}
}

/* Zusatz-Schalter am PC (zusatz_pc): die grosse Folgekarte im Kaufbereich weg, sie kauft im Hintergrund weiter */
html[data-fd-zusatzpc="folge"] .la7 .schein .dazuachse{display:none}
/* ---- Erster Bildschirm (bausteine/erstblick.py) ---- */
.la7 .eb-anker{margin:.55rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;
 gap:.25rem .9rem;font-size:.98rem;line-height:1.45;color:var(--muted)}
.la7 .eb-anker .eb-ab{color:var(--ink);font-weight:700}
.la7 .eb-anker .eb-ab b{font-weight:900;font-size:1.28rem;letter-spacing:-.02em;color:var(--ink)}
.la7 .eb-anker .eb-los{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;
 padding:.35rem .95rem;border-radius:999px;background:var(--ink);color:#fffdf9;
 text-decoration:none;font-weight:700;font-size:.9rem}
.la7 .eb-anker .eb-los:hover{background:var(--accd)}
.la7 .eb-anker .eb-los:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.la7 .eb-vertrauen{margin:.7rem 0 0;padding:.6rem 0 0;border-top:1px dashed var(--line);
 list-style:none;display:grid;gap:.3rem;font-size:.82rem;line-height:1.4;color:var(--muted)}
.la7 .eb-vertrauen li{display:flex;gap:.45rem;align-items:flex-start;margin:0;padding:0}
.la7 .eb-vertrauen svg{flex:none;margin-top:.12em;color:var(--acc)}
.la7 .eb-vertrauen a{color:inherit}
.la7 .leiste.eb-vor{transform:none}
@media (min-width:901px){
 /* Streifenhoehe = STREIFEN_HOEHE (User 28.10.2026: 124 px zeigte vom Topf zu wenig, 200 px) */
 .la7 .streifen{height:clamp(96px,13.5vw,200px)}
 .la7 .streifen p.gross{font-size:clamp(1.2rem,2.3vw,1.7rem)}
}
@media (max-width:1023px){
 /* Kaufleiste am Handy: eingerueckte Karte, nicht ueber die volle Breite */
 .la7 .leiste{left:.55rem;right:.55rem;bottom:.55rem;border-radius:16px;padding:.45rem 0}
 .la7 .leiste.eb-vor,.la7 .leiste.an{transform:none}
 /* Der Knopf der Leiste kauft genau die gezeigte Auswahl - deshalb steht der Name
    auch am Handy dabei (der Baukasten blendet ihn dort sonst aus). */
 .la7 .leiste .linnen{flex-wrap:wrap;row-gap:.2rem}
 .la7 .leiste .was{display:block;flex:1 1 100%;min-width:0;font-size:.8rem;
  font-weight:700;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:900px){
 .la7 .spalte .eb-anker{order:2;margin:.45rem 0 0}
 .la7 .spalte h1{font-size:clamp(1.5rem,6.4vw,2.05rem);line-height:1.1}
}
@media (max-width:560px){
 .la7 .streifen{height:58px}
 .la7 .streifen .txt{display:none}
 .la7 .bildzeile .bildtext{display:none}
 .la7 .eb-anker .eb-was{flex-basis:100%;order:3;font-size:.86rem}
}
@media (max-width:360px){
 .la7 .eb-anker .eb-los{padding:.35rem .75rem;font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
 .la7 .leiste{transition:none}
}