/* fd-bau: universal v2 */
/* Universal-Clip maud: Stil aller Artikelseiten der Familie */
/* Alle nativen Warenkorb-Absaetze bleiben im DOM und bleiben der einzige Kaufweg -
   sie werden nur unsichtbar gemacht und von unseren Karten ferngesteuert
   (bausteine/serienkorb.py). NIE in Siquando ausblenden: dann fallen sie aus dem
   HTML und die Sperre greift. Kein Absatz-Kennzeichen noetig: die Regel trifft jeden
   Absatz, der einen nativen Warenkorb enthaelt - NIE ueber a.ngpar ~ (das versteckt
   die ganze Seite, 29.08.2026). Ohne JavaScript blendet noscript sie wieder ein. */
/* Gerahmter Absatz (Rahmen in Siquando) steckt eine Ebene tiefer in .paragraphborder_* -
   18.09.2026: Lucas-Absatz sichtbar auf 14 Lucas- und 5 Esra-Seiten (mitkopierter Rahmen). */
html[data-fd-motor] .paragraph:has(> .ngpluginparashopput),
html[data-fd-motor] .paragraph:has(> [class^="paragraphborder"] > .ngpluginparashopput) { display: none !important; }
/* Die native Ueberschrift der Seite doppelt unsere eigene - unsere steht im Clip. */
html[data-fd-motor] #content > .sqrallwaysboxed > h1 { display: none; }
.paragraph:has(> .ngpluginparashopput), .paragraph:has(> [class^="paragraphborder"] > .ngpluginparashopput) { display: block !important; width: 100% !important;
  margin: 1.5rem auto 2rem !important; }
.ngpluginparashopput > .ngpluginparashopputimagezoomparent { display: none; }
.ngpluginparashopput > div { float: none; width: 100%; margin: 0; }
.ngpluginparashopput form.ngshopputform button { border-radius: 999px;
  text-transform: none; font-size: .95rem; height: auto; padding: .8em 1.6em;
  letter-spacing: 0; background: #2a2722; color: #f7f2ea; border: 0; }
.ngpluginparashopput form select.ngshopputquantity { border-radius: 999px;
  height: auto; padding: .8em .9em; }
.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}
.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) ---- */
.la7 .leiste{position:fixed;left:0;right:0;top:122px;z-index:900;background:var(--ink);
 color:#fffdf9;box-shadow:0 16px 34px -26px rgba(0,0,0,.9);transform:translateY(-140%);
 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 das Grundmass 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}
}
/* ---- Kapitel Drainage (Baustein bausteine/drainage.py): Text links, Grafik rechts ----
   Die Hersteller-Grafik ist hochkant und traegt eigenen Text. Unter dem Text in
   Lesegroesse nahm sie eine ganze Bildschirmhoehe ein (User 29.08.2026). Rechts
   steht deshalb ein echter AUSSCHNITT (nur die Schnittzeichnung) als eigene Datei;
   ganz sieht man die Grafik im Overlay per Klick. Auf schmalen Anzeigen rutscht
   sie unter den Text. */
.la7 .kap.drain .spalten{column-count:auto;display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr) 250px;
 gap:0 clamp(1.4rem,3vw,2.6rem);align-items:start}
.la7 .drainbild{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
 background:#fff;cursor:zoom-in;position:relative}
.la7 .drainbild img{display:block;width:100%;height:auto}
.la7 .drainbild figcaption{padding:.45rem 3.2rem .5rem .7rem;font-size:.72rem;color:var(--muted);
 line-height:1.35;border-top:1px solid var(--line)}
.la7 .drainbild .lupe-auf{pointer-events:none}
.fd-drainlb{position:fixed;inset:0;z-index:2000;background:rgba(28,26,23,.95);
 display:none;align-items:center;justify-content:center;padding:1.5rem;cursor:zoom-out}
.fd-drainlb.an{display:flex}
.fd-drainlb img{max-width:min(96vw,900px);max-height:calc(100vh - 3rem);width:auto;height:auto;
 border-radius:10px;background:#fff}
@media (max-width:900px){
 .la7 .kap.drain .spalten{grid-template-columns:minmax(0,1fr);gap:.6rem 0}
 .la7 .drainbild{max-width:300px}
}

/* ---- Was der Motor per hidden ausblendet, muss auch wirklich verschwinden:
   .vg und .lstufe tragen display:flex bzw. flex-basis, und das schlaegt die
   [hidden]-Regel des Browsers. ---- */
.la7 [hidden]{display:none !important}
/* ---- Buehnenstreifen: die Toepfe stehen rechts, links bleibt Platz fuer den Satz.
   Er zeigt Cloudy und folgt deshalb KEINER Farbe. ---- */
.la7 .streifen img{object-position:center 62%}
@media (max-width:700px){
 .la7 .streifen .schleier{background:linear-gradient(90deg,rgba(20,18,16,.68) 0%,
  rgba(20,18,16,.46) 55%,rgba(20,18,16,.08) 100%)}
}
/* ---- Die Bildbuehne ist hier QUADRATISCH und nicht 4:5 --------------------------
   Auf der ersten Lage steht der Packshot des ganzen Sets: drei bis fuenf Toepfe
   nebeneinander, Seitenverhaeltnis rund 3:2. In der hochkanten 4:5-Buehne des
   Baukastens waere davon nur ein schmales Band zu sehen. Im Quadrat steht das
   ganze Set da, und die hochkanten Wohnaufnahmen werden nur wenig beschnitten. */
.la7 .buehne{aspect-ratio:1/1}
@media (max-width:900px){ .la7 .buehne{aspect-ratio:1/1} }
/* Die erste Lage ist der PACKSHOT auf weissem Grund - Lage und Miniaturbild stehen
   deshalb ebenfalls auf Weiss, sonst klebt ein weisses Rechteck in der cremefarbenen
   Flaeche. Gezeigt wird das ganze Set, nicht ein Ausschnitt: object-fit:contain.
   WICHTIG (01.09.2026 im Browser gemessen): Der Baukasten vergroessert die Lage
   "frei" um den Faktor 1,55 - er rechnet dort mit einem FREISTELLER, der viel Luft
   um den einzelnen Topf hat. Der Maud-Packshot zeigt drei bis fuenf Toepfe
   nebeneinander und fuellt die Aufnahme; derselbe Zoom schnitt links und rechts je
   einen Topf ab. Der Zoom wird deshalb hier zurueckgenommen - bei einem Satz will
   man alle Teile sehen. */
.la7 .dia.frei,.la7 .mb.frei{background:#fff}
.la7 .dia.frei img,.la7 .mb.frei img{width:100%;height:100%;object-fit:contain;
 object-position:center;transform:none}
/* ---- vier Farben in der schmalen Spalte des Katalogblatts ----------------------
   sprachgebrauch.json will drei bis vier Farb-Chips in EINER Reihe. In die rund
   460 px breite Spalte des Maxi-Warenkorbs passen aber nur drei (am 29.08.2026 an
   den Balkonkaesten gemessen), der vierte rutschte allein in die zweite Reihe.
   Vier Chips stehen deshalb als sauberes Zweierraster. */
.la7 .maxi .vfarben.vier .vfarbe{flex:1 1 44%}
/* Die beiden Set-Kacheln sind breiter als eine Groessenkachel - in ihnen stehen die
   Kantenlaengen des Satzes. */
.la7 .maxi .vg .vgm{margin-bottom:.25rem}
/* ---- Massstabsreihe "Was im Set steckt" -----------------------------------------
   Fuenf Toepfe von 27 bis 52 cm Kantenlaenge sind zusammen 195 cm. Mit dem Massstab
   des Baukastens (bis 6,3 px je Zentimeter) waere die Reihe rund 1280 px breit und
   liesse sich in der Inhaltsspalte nur schiebend ansehen. Der Deckel liegt hier
   deshalb bei 5,0 px je Zentimeter: dann steht die Reihe bei rund 1080 px
   vollstaendig da. Auf dem Handy wird geschoben - das ist bei fuenf Groessen der
   ehrlichere Weg als fuenf Briefmarken. */
.la7 .leiter{--e:clamp(3.6px,.45vw,5px)}
@supports (container-type:inline-size){
 .la7 .lrolle{--e:clamp(3.6px,.52cqw,5px)}
 @container (max-width:600px){ .la7 .lrolle{--e:4.2px;--g:.35rem} }
}
@media (max-width:560px){ .la7 .leiter{--e:4.2px;--g:.35rem} }
/* "27 x 27 cm" braucht mehr Platz als "Oe 27 cm" - die Spalten sind deshalb eine
   Spur breiter, und die fette Zeile bricht nicht zwischen Zahl und Einheit um. */
.la7 .lstufe{min-width:5.9rem}
.la7 .lst b{white-space:nowrap}
/* Die Silhouette ist hier KEIN Foto, sondern eine Massstabsskizze: Breite und Hoehe
   stehen im Verhaeltnis der Herstellermasse, die Form ist der quadratische Topf mit
   seinen nahezu senkrechten Waenden (Bildbefund an den Packshots: der Boden misst
   rund 93 Prozent der Oberkante). Grund- und Tiefton kommen vom Motor und folgen
   der gewaehlten Farbe. So braucht die Reihe kein einziges zusaetzliches Bild. */
.la7 .topfsil{display:block;position:relative;
 width:calc(var(--e) * var(--d));height:calc(var(--e) * var(--h));
 background:linear-gradient(180deg,var(--grund) 0%,var(--tief) 118%);
 clip-path:polygon(0% 0%,100% 0%,96.5% 100%,3.5% 100%);
 border-radius:2px 2px 0 0}
.la7 .topfsil::before{content:"";position:absolute;left:7%;right:7%;top:0;height:8%;
 background:var(--tief);opacity:.5;border-radius:2px 2px 0 0}
.la7 .leiterkap .dlead{margin:.45rem 0 1rem;max-width:none;font-size:.95rem;
 line-height:1.6;color:var(--muted)}
/* ---- Die vier Farben als Karten ------------------------------------------------- */
.la7 .farbkarten{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
 margin:1.1rem 0 0}
.la7 .farbkarten > div{border:1px solid var(--line);border-radius:14px;
 background:var(--paper);padding:1rem;min-width:0;text-align:center}
.la7 .farbkarten .vbild{margin:0 auto .6rem;width:5.4rem;height:5.4rem}
.la7 .farbkarten b{display:block;font-size:1.02rem;letter-spacing:-.015em}
.la7 .farbkarten p{margin:.35rem 0 0;font-size:.9rem;line-height:1.5;
 color:var(--muted)}
@media (max-width:860px){ .la7 .farbkarten{grid-template-columns:1fr 1fr} }
/* ---- Vergleichstabelle: Bildspalte + sechs Datenspalten (mit "Seite") ----------
   Seit dem 01.09.2026 hat jede der acht Zusammenstellungen eine eigene
   Artikelseite; die letzte Spalte fuehrt dorthin. Auf dem Handy wird aus jeder
   Zeile eine Karte; die Bildspalte muss dort ueber genau SECHS Zeilen laufen,
   sonst bleiben leere Zeilen stehen. */
.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}
 /* Sechs Datenspalten - sonst blieben in der Kartenansicht leere Zeilen stehen. */
 .la7 .vergleich.vset td:first-child{grid-row:span 6}
}
/* ---- Masstabelle auf dem Handy ---------------------------------------------------
   Drei Spalten in 330 px: Bei Maud stehen in der mittleren Spalte lange Werte
   ("27, 32, 37, 47 und 52 cm"), und die Erklaerspalte rechts brach dann in vier
   Zeilen um. Sie faellt auf schmalen Anzeigen weg - der Wert bleibt, die Erklaerung
   ist Zugabe. */
@media (max-width:560px){
 .la7 .leiterkap .masstab th:nth-child(3),
 .la7 .leiterkap .masstab td:nth-child(3){display:none}
}
/* ---- Kapitelueberschrift ohne h1 ------------------------------------------------ */
.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}

/* ---- Was die Artikelseite gegenueber der Serienseite mehr braucht --------------
   Die Set-Kacheln der Variantenleiste tragen zwei Zeilen Text ("Kanten 27, 32 und
   37 cm") und einen Preis. Zwei Kacheln nebeneinander haben Platz genug; auf
   schmalen Anzeigen bleiben sie nebeneinander stehen, weil sonst der Preis des
   anderen Satzes aus dem Blick geriete - genau er ist hier die Kaufentscheidung. */
.la7 .varianten .vgroessen{--sp:2;--spm:2}
.la7 .varianten .vg .vgm{margin-bottom:.25rem}
/* Die Massstabsreihe steht hier in einem Kapitel ueber die ganze Breite und ist
   kein Waehler - die Stufen sind Text und bekommen deshalb keinen Zeigefinger. */
.la7 .leiterkap .lst{cursor:default}
.la7 .leiterkap .dlead{margin:.45rem 0 1rem;max-width:none;font-size:.95rem;
 line-height:1.6;color:var(--muted)}