/* fd-bau: universal-serie v1 */
/* Universal-Clip Serienseite artstone-untersetzer: Stil */
/* Serienseite Artstone Untersetzer - Aussehen; Bestellbaustein (sbz) und Groessenrad (sr) bringen ihr eigenes CSS */
.la7.ut{--soft:#f7f2ea;--line:#e9e3d8;--ink:#2a2722;--muted:#7a7367;--acc:#a96544;--accd:#87502f;--paper:#fffdf9;
  --gruen:#22493a;--tief:#4a5f58;--f:"Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--f);color:var(--ink);line-height:1.55;font-size:17px;display:flow-root}
.la7.ut *{box-sizing:border-box}
.la7.ut img{display:block;max-width:100%;height:auto}
.la7.ut h1,.la7.ut h2,.la7.ut h3{font-family:var(--f);font-weight:900;letter-spacing:-.035em;line-height:1.08;color:var(--ink);
  text-transform:none;margin:0;text-wrap:balance}
.la7.ut p{margin:0}
.la7.ut a{color:inherit}
.la7.ut .ut-kopf{padding:clamp(1.4rem,3vw,2.4rem) 0 1.4rem}
.la7.ut .ut-kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.la7.ut .ut-kopf h1{font-size:clamp(1.9rem,4.4vw,3.3rem);margin:.35rem 0 .6rem;max-width:20em}
.la7.ut .ut-leit{font-size:1.08rem;color:#4d473f;max-width:44em}
.la7.ut .ut-anker{margin-top:.9rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;font-weight:600}
.la7.ut .ut-anker b{font-size:1.35rem;font-weight:900;font-variant-numeric:tabular-nums}
.la7.ut .ut-anker span{font-size:.85rem;font-weight:400;color:var(--muted)}
.la7.ut .ut-formen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-bottom:2rem}
.la7.ut .ut-form{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.la7.ut .ut-formbild{display:block;aspect-ratio:2.6/1;overflow:hidden;background:#efe7da}
.la7.ut .ut-formbild img{width:100%;height:100%;object-fit:cover;object-position:100% 62%;transition:transform .4s ease}
.la7.ut .ut-formbild:hover img{transform:scale(1.04)}
.la7.ut .ut-formbild:focus-visible,.la7.ut .ut-knopf:focus-visible,.la7.ut .ut-passt tr:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.la7.ut .ut-formtext{padding:1.1rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.la7.ut .ut-formtext h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.la7.ut .ut-formtext p{color:#4d473f;font-size:.98rem}
.la7.ut .ut-ab{font-weight:600}
.la7.ut .ut-ab b{font-weight:900;font-variant-numeric:tabular-nums}
.la7.ut .ut-knopf{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:#fffdf9;
  font-weight:700;font-size:.95rem;border-radius:999px;padding:.75em 1.3em;text-decoration:none}
.la7.ut .ut-knopf:hover{background:var(--accd)}
.la7.ut .ut-bestellen{margin:0 0 2.4rem}
.la7.ut .sbz{margin-bottom:.8rem}
.la7.ut .sbz-bild{background:#fff}
.la7.ut .sbz-bild img{object-fit:contain;padding:6%}
.la7.ut .sbz-chips[data-achse="2"]{row-gap:.4rem}
.la7.ut .sbz-gtitel{flex:0 0 100%;font-size:.8rem;font-weight:700;color:var(--muted);margin:.25rem 0 -.1rem}
.la7.ut .sbz-gtitel::first-letter{text-transform:uppercase}
.la7.ut .eb-vertrauen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;font-size:.86rem;color:var(--muted)}
.la7.ut .eb-vertrauen li{display:flex;gap:.45rem;align-items:flex-start;margin:0;padding:0}
.la7.ut .eb-vertrauen li::before{content:none}
.la7.ut .eb-vertrauen svg{flex:none;margin-top:.25em;color:var(--acc)}
.la7.ut .ut-passt{margin:0 0 2.6rem}
.la7.ut .ut-passt h2,.la7.ut .ut-material h2,.la7.ut .ut-fragen h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.5rem}
.la7.ut .ut-sub{color:var(--muted);max-width:44em;margin-bottom:1.1rem}
.la7.ut .ut-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.la7.ut .ut-tab{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;min-width:0}
.la7.ut .ut-tab h3{font-size:1.15rem;margin-bottom:.4rem}
.la7.ut .ut-tab table{width:100%;border-collapse:collapse;font-size:.94rem}
.la7.ut .ut-tab th,.la7.ut .ut-tab td{padding:.55em .4em .55em 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.la7.ut .ut-tab thead th{border-top:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.la7.ut .ut-tab tbody th{font-weight:700;white-space:nowrap}
.la7.ut .ut-tab td:last-child,.la7.ut .ut-tab thead th:last-child{text-align:right;padding-right:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.la7.ut .ut-tab td a{color:var(--accd);text-decoration:underline;text-underline-offset:2px}
.la7.ut .ut-tab tbody tr{cursor:pointer}
.la7.ut .ut-tab tbody tr:hover th{color:var(--accd)}
.la7.ut .ut-material{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start;margin:0 0 2.6rem}
.la7.ut .ut-wohn{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:.8rem;align-items:end}
.la7.ut .ut-wohn figure{margin:0}
.la7.ut .ut-wohn img{width:100%;border-radius:14px;object-fit:cover}
.la7.ut .ut-wohn figure:first-child img{aspect-ratio:2/3}
.la7.ut .ut-wohn figure:last-child img{aspect-ratio:3/2}
.la7.ut .ut-wohn figcaption{font-size:.84rem;color:var(--muted);margin-top:.35rem}
.la7.ut .ut-fakten ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.7rem}
.la7.ut .ut-fakten li{margin:0;padding:.8rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.la7.ut .ut-fakten li::before{content:none}
.la7.ut .ut-fakten li b{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.la7.ut .ut-fragen{margin:0 0 2.2rem;max-width:52em}
.la7.ut .ut-fragen details{border-top:1px solid var(--line);padding:.75rem 0}
.la7.ut .ut-fragen details:last-child{border-bottom:1px solid var(--line)}
.la7.ut .ut-fragen summary{cursor:pointer;font-weight:700}
.la7.ut .ut-fragen details p{margin-top:.45rem;color:#4d473f}
@media (max-width:900px){
  .la7.ut .ut-material{grid-template-columns:1fr}
}
@media (max-width:860px){
  .la7.ut .ut-formen,.la7.ut .ut-tabs{grid-template-columns:1fr}
}
@media (max-width:560px){
  .la7.ut{font-size:16px}
  .la7.ut .ut-formtext{padding:1rem}
  .la7.ut .ut-tab{padding:.8rem .9rem}
  .la7.ut .ut-tab table{font-size:.88rem}
  .la7.ut .ut-tab tbody th{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.la7.ut .ut-formbild img{transition:none}}
/* Handy (Groessenrad, User 01.11.2026): unter dem Kaufbereich die Zuordnung Topf -> Untersetzer NUR fuer die gewaehlte
   Form, sichtbar; am Computer steht stattdessen die Passtabelle (.ut-passt) */
.la7.ut .ut-hz{display:none}
html[data-fd-rad]:not([data-fd-radteil]) .la7.serie.ut > .ut-hz{display:block!important;margin:22px 0 28px;scroll-margin-top:70px}
.la7.ut .ut-hz h2{font-size:1.15rem;letter-spacing:-.015em;margin:0 0 .3rem}
.la7.ut .ut-hz p{font-size:.86rem;color:var(--muted);margin:0 0 .6rem}
.la7.ut .ut-hz table{width:100%;border-collapse:collapse;font-size:.92rem}
.la7.ut .ut-hz table[hidden]{display:none}
.la7.ut .ut-hz th,.la7.ut .ut-hz td{padding:.6em .3em .6em 0;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.la7.ut .ut-hz thead th{border-top:0;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.la7.ut .ut-hz td:last-child,.la7.ut .ut-hz thead th:last-child{text-align:right;padding-right:0;white-space:nowrap;font-weight:700}
.la7.ut .ut-hz tbody tr{cursor:pointer}
.la7.ut .ut-hz tbody tr.jetzt td{background:#f1ebe1}
.la7.ut .ut-hz td a{color:var(--accd);text-decoration:underline;text-underline-offset:2px}
.la7.ut .ut-hz td em{font-style:normal;color:var(--muted)}
/* fd-bau-css: serien_bestellung v1 */
.sbz{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
  background:var(--paper,#fffdf9);border:1px solid var(--line,#e9e3d8);border-radius:14px;padding:clamp(1rem,2.5vw,1.8rem);
  scroll-margin-top:80px;margin-bottom:1.5rem}
.sbz-bild{aspect-ratio:1/1;border-radius:12px;background:#fff;border:1px solid var(--line,#e9e3d8);overflow:hidden;display:flex;
  align-items:center;justify-content:center}
.sbz-bild img{width:100%;height:100%;object-fit:contain;transition:opacity .25s}
.sbz-bild img.lad{opacity:.35}
.sbz-rechts{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.sbz-titel{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:900;line-height:1.1;letter-spacing:-.02em}
.sbz-mass{color:var(--muted,#7a7367);font-size:.92rem;margin-top:-.4rem}
.sbz-achse{display:flex;flex-direction:column;gap:.45rem}
.sbz-achse>b{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#7a7367);font-weight:700}
.sbz-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.sbz-chips button{font:600 .88rem var(--f,inherit);color:var(--ink,#2a2722);background:#fff;border:1px solid var(--line,#e9e3d8);
  border-radius:999px;padding:.5em .95em;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:.5em}
.sbz-chips button i{width:1.25em;height:1.25em;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.sbz-chips button[aria-pressed="true"]{border-color:var(--ink,#2a2722);box-shadow:0 0 0 1px var(--ink,#2a2722) inset}
.sbz-chips button:disabled{opacity:.4;cursor:default;text-decoration:line-through}
.sbz-chips button:focus-visible,.sbz-kauf:focus-visible,.sbz-menge button:focus-visible{outline:3px solid var(--acc,#a96544);outline-offset:2px}
.sbz-gruppe{display:contents}
.sbz-preiszeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;border-top:1px dashed var(--line,#e9e3d8);padding-top:.9rem}
.sbz-preis{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sbz-ust{font-size:.85rem;color:var(--muted,#7a7367)}
.sbz-ust a{text-decoration:underline}
.sbz-liefer{font-weight:700;color:var(--gruen,#22493a);font-size:.98rem;flex-basis:100%}
.sbz-kaufzeile{display:flex;gap:.7rem;align-items:stretch}
.sbz-menge{display:flex;align-items:center;border:1px solid var(--line,#e9e3d8);border-radius:999px;background:#fff;flex:none}
.sbz-menge button{width:44px;height:48px;border:0;background:none;font-size:1.3rem;cursor:pointer;color:var(--ink,#2a2722)}
.sbz-menge span{min-width:1.6em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.sbz-kauf{flex:1;min-height:48px;border:0;border-radius:999px;background:var(--gruen,#22493a);color:#fff;font:700 1rem var(--f,inherit);
  cursor:pointer;padding:0 1.2rem}
.sbz-kauf:disabled{opacity:.55;cursor:default}
.sbz-meldung{font-size:.92rem;min-height:1.4em}
.sbz-meldung a{text-decoration:underline;font-weight:700}
.sbz-sperre{display:none;font-size:.92rem;color:#a3261c}
.sbz[data-sbz="sperre"] .sbz-sperre{display:block}
.sbz[data-sbz="sperre"] .sbz-kauf,.sbz[data-sbz="laden"] .sbz-kauf{opacity:.55;pointer-events:none}
.sbz-link{font-size:.9rem;text-decoration:underline;color:var(--accd,#87502f);align-self:flex-start}
@media (max-width:700px){.sbz{grid-template-columns:1fr}.sbz-bild{max-width:320px;width:100%;margin:0 auto}}
/* 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}}

/* ---- 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}}
}