/* Demo unter der Methode (Devin 21.10.2026): Werkbank-Shop im Browserfenster mit sechs Reitern.
   Eigene Datei, unabhängig von demo.css (dort arbeitet Angelika an der Methode). Farben wie der Shop im ersten Bildschirm:
   Schiefergrau #445662 für Text und gewählte Knöpfe, eine einzige Farbe = unser Hellblau #60A8BF */
.sd{--sd-ink:#445662;--sd-akzent:#60A8BF;--sd-leise:#7b8a93;--sd-hell:#a19e98;--sd-linie:#ece9e3;--sd-rahmen:#e5e1da;--sd-feld:#d6d1c9;--sd-blau-hell:#f2f8fa;margin-top:96px;color:var(--sd-ink)}
.sd [hidden]{display:none !important}
.sd p{margin:0}
.sd [data-gehe]{cursor:pointer}

/* Reiter: was es ist (fett) und was es bringt (darunter) */
/* Sieben Reiter in einer Reihe (Devin 01.11.2026): Schrift 13 statt 14 px, Titel ohne Umbruch; jede Spalte ist mindestens so breit
   wie ihr Titel, sonst sind alle gleich breit */
.sd-reiter{display:grid;grid-template-columns:repeat(7, minmax(min-content, 1fr));gap:9px;margin-bottom:20px}
.sd-r{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:var(--sd-ink);background:#fff;border:1px solid #e3e7ea;border-radius:10px;padding:12px 11px 14px;cursor:pointer;transition:border-color .2s, background .2s, box-shadow .2s}
.sd-r b{display:flex;align-items:center;gap:5px;font-size:13px;line-height:1.2;white-space:nowrap}
.sd-r b i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eef2f4;font-style:normal;font-size:12px;transition:background .2s, color .2s}
.sd-r span{font-size:13px;line-height:1.4;color:#5d6d77}
/* deutlicher Hover wie bei den Kategorie-Karten auf der Startseite der Demo (Angelika 23.10.2026) */
.sd-r:not(.an):hover,.sd-r:not(.an):focus-visible{border-color:var(--sd-akzent);box-shadow:0 0 0 3px rgba(96, 168, 191, .3), 0 12px 28px rgba(30, 40, 48, .2)}
.sd-r:not(.an):hover b,.sd-r:not(.an):focus-visible b{color:#3b7d92}
.sd-r:not(.an):hover b i,.sd-r:not(.an):focus-visible b i{background:#dcedf4;color:#3b7d92}
.sd-r.an{border-color:var(--sd-akzent);background:var(--sd-blau-hell);box-shadow:0 0 0 1px var(--sd-akzent)}
.sd-r.an b i{background:var(--sd-akzent);color:#fff}
/* kleiner Pfeil vom gewählten Reiter zum Fenster */
.sd-r.an::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;margin-left:-8px;background:var(--sd-blau-hell);border-right:2px solid var(--sd-akzent);border-bottom:2px solid var(--sd-akzent);transform:rotate(45deg)}

/* Fenster um den Shop, ohne Adressleiste wie der Minishop oben (Angelika 21.10.2026) */
.sd-fenster{border:1px solid #dde3e7;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(30, 40, 48, .12)}
/* Mauszeiger wie im Minishop oben (Angelika 21.10.2026): dunkler Pfeil im Shop-Fenster, dunkle Hand auf allem Klickbaren */
.sd-fenster{--zeiger:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 3 L5 31 L12 24.5 L17 35 L22.5 32.6 L17.5 22.2 L27 22.2 Z' fill='%233d4a53' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3;--hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23fff' stroke='%23fff' stroke-width='4.4' stroke-linejoin='round'%3E%3Crect x='12' y='2' width='6.4' height='21' rx='3.2'/%3E%3Crect x='18' y='11.5' width='5.8' height='13' rx='2.9'/%3E%3Crect x='23.6' y='13' width='5.6' height='12' rx='2.8'/%3E%3Crect x='29' y='15' width='5.2' height='10.5' rx='2.6'/%3E%3Cpath d='M12 20 L34.2 20 L34.2 29 C34.2 33.5 31.2 37 27 37 L20 37 C15.5 37 12 33.5 12 29 Z'/%3E%3Crect x='5.6' y='19.5' width='5.8' height='12.5' rx='2.9' transform='rotate%28-38 12 28%29'/%3E%3C/g%3E%3Cg fill='%233d4a53'%3E%3Crect x='12' y='2' width='6.4' height='21' rx='3.2'/%3E%3Crect x='18' y='11.5' width='5.8' height='13' rx='2.9'/%3E%3Crect x='23.6' y='13' width='5.6' height='12' rx='2.8'/%3E%3Crect x='29' y='15' width='5.2' height='10.5' rx='2.6'/%3E%3Cpath d='M12 20 L34.2 20 L34.2 29 C34.2 33.5 31.2 37 27 37 L20 37 C15.5 37 12 33.5 12 29 Z'/%3E%3Crect x='5.6' y='19.5' width='5.8' height='12.5' rx='2.9' transform='rotate%28-38 12 28%29'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='.9' stroke-linecap='round' fill='none'%3E%3Cpath d='M18.2 20.5 V24.5 M23.8 21 V25 M29.2 21.5 V25.3'/%3E%3C/g%3E%3C/svg%3E") 15 3}
.sd-fenster,.sd-fenster *{cursor:var(--zeiger),auto}
.sd-fenster :is(button,select,input[type=range],[data-gehe],.sd-korb,[data-ad-oeffnen]),.sd-fenster :is(button,select,input[type=range],[data-gehe],.sd-korb,[data-ad-oeffnen]) *{cursor:var(--hand),pointer}

/* Shop */
.sd-shop{container:sd / inline-size;display:flex;flex-direction:column;min-height:560px;font-size:15px;line-height:1.5}
/* Kopf wie im kleinen Shop oben: links zurück zur Startseite (nur auf den Unterseiten), rechts der Warenkorb */
.sd-kopf{display:flex;align-items:center;gap:24px;height:60px;padding:0 28px;border-bottom:1px solid var(--sd-rahmen)}
.sd-zurueck{font-size:14px;white-space:nowrap;text-underline-offset:4px;text-decoration-thickness:2px;transition:color .15s ease}
.sd-zurueck:hover{color:#3b7d92;text-decoration-line:underline}
.sd-korb{display:flex;align-items:center;gap:7px;margin-left:auto;font-weight:700}
.sd-korb svg{display:block;transform-origin:50% 70%}
.sd-korb b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:var(--sd-ink);color:#fff;font-size:12px}
.sd-korb{transition:color .15s ease}
.sd-korb:hover{color:#3b7d92}
.sd-korb b{transition:background-color .15s ease}
.sd-korb:hover b{background-color:#3b7d92}
/* Mini-Warenkorb wie im Minishop oben (Angelika 21.10.2026): klappt unter dem Warenkorb auf, der Pfeil zeigt aufs Symbol */
.sd-shop{position:relative}
.sd-korb b.leer{display:none}
.sd-korb.hupf svg{animation:sd-hupf .6s ease-out}
.sd-korb.hupf b{animation:sd-zahl .6s ease-out}
@keyframes sd-hupf{0%{transform:none}30%{transform:translateY(-3px) scale(1.25)}60%{transform:scale(.95)}100%{transform:none}}
@keyframes sd-zahl{0%{transform:none}30%{transform:scale(1.4);background:var(--sd-akzent)}100%{transform:none}}
.sd-mini{position:absolute;top:58px;right:14px;z-index:20;width:360px;max-width:calc(100% - 28px);box-sizing:border-box;padding:18px 18px 12px;background:#fff;border-radius:14px;filter:drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)) drop-shadow(0 12px 24px rgba(0, 0, 0, .2));opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s, transform .25s}
.sd-mini.offen{opacity:1;transform:none;pointer-events:auto}
.sd-mini::before{content:"";position:absolute;top:-10px;right:var(--pfeil, 24px);width:20px;height:20px;background:#fff;transform:rotate(45deg);border-radius:4px 0 0 0}
.sd-shop.admin .sd-mini{display:none}
.sd-mini-kopf{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:18px;font-weight:700}
.sd-mini-kopf b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:var(--sd-ink);color:#fff;font-size:12px}
.sd-mini-zeile{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--sd-linie);font-size:14px}
.sd .sd-mini-zeile img{flex:none;width:46px;height:46px;border-radius:6px;object-fit:cover;background:#f6f5f2}
.sd-mini-zeile span{flex:1;min-width:0;line-height:1.35}
.sd-mini-zeile b{font-weight:600;white-space:nowrap}
.sd-mini-zeile button{font:inherit;font-size:17px;line-height:1;color:var(--sd-hell);background:none;border:0;padding:0 2px;cursor:pointer;transition:color .15s ease}
.sd-mini-zeile button:hover{color:var(--sd-ink)}
.sd-mini-leer{padding:10px 0;font-size:14px;color:var(--sd-leise)}
.sd-mini-summe{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0 14px;font-size:14px}
.sd-mini-summe b{font-size:19px}
.sd-mini-kasse{display:block;width:100%;border-radius:22px}
.sd-mini-link{display:block;width:100%;font:inherit;font-size:13px;color:var(--sd-leise);background:none;border:0;padding:10px 0 2px;cursor:pointer;transition:color .15s ease;text-underline-offset:4px;text-decoration-thickness:2px}
.sd-mini-link:hover{color:#3b7d92;text-decoration-line:underline}
.sd-seite{flex:1;animation:sd-ein .3s ease}
@keyframes sd-ein{from{opacity:0}to{opacity:1}}
/* Adminbereich (Reiter 5): ohne Kopf des Shops */
.sd-shop.admin .sd-kopf{display:none}

.sd-knopf{font:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--sd-akzent);border:0;border-radius:7px;padding:11px 20px;cursor:pointer;white-space:nowrap}
/* Hover wie im Minishop oben (Angelika 21.10.2026): gut sichtbarer Ring, dunkleres Blau, Unterstrich bei Links */
.sd-knopf{transition:background-color .15s ease, box-shadow .15s ease}
.sd-knopf:hover{background-color:#3b7d92;box-shadow:0 0 0 7px rgba(96, 168, 191, .32)}
.sd-h{font-size:22px;line-height:1.25;font-weight:700;margin:0 0 14px}
.sd-titel{font-size:17px;font-weight:700;margin-bottom:12px}
.sd-name{font-size:24px;line-height:1.25;font-weight:700;margin:0 0 10px}
.sd-preis{font-size:26px;line-height:1.2;font-weight:700;white-space:nowrap}
/* Platzhalter für langen Text: graue Zeilen */
.sd-zeilen{display:block;height:84px;margin:6px 0 18px;background:repeating-linear-gradient(to bottom, #eceff1 0 9px, transparent 9px 21px);-webkit-mask-image:linear-gradient(90deg, #000 62%, transparent);mask-image:linear-gradient(90deg, #000 62%, transparent)}
.sd-zeilen.kurz{height:42px}

/* 2 Startseite: Werkstatt-Foto über die ganze Breite, Text rechts auf dem Fensterlicht (wie im ersten Bildschirm) */
.sd-held{position:relative;height:340px;display:flex;justify-content:flex-end;align-items:center;overflow:hidden}
.sd .sd-held-bild{position:absolute;left:-90px;top:-112px;width:803px;max-width:none;height:auto}
.sd-held::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .82) 47%, #fff 58%)}
.sd-held-text{position:relative;z-index:1;width:450px;padding:0 50px 0 0;box-sizing:border-box}
.sd-gross-titel{font-size:40px;line-height:1.12;font-weight:700;margin:0 0 14px}
.sd-betont{color:var(--sd-akzent);white-space:nowrap}
.sd-held-text p{margin:0 0 22px;font-size:17px;line-height:1.5}
.sd-block{padding:26px 28px 30px}
.sd-karten{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px}
.sd-karte{border:1px solid var(--sd-rahmen);border-radius:10px;overflow:hidden;background:#fff}
.sd-karte .bb{height:112px;overflow:hidden;background:#f6f5f2}
.sd-karte .bb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sd-karte[data-gehe]:hover .bb img{transform:scale(1.05)}
.sd-karte{transition:border-color .15s ease, box-shadow .15s ease}
.sd-karte[data-gehe]:hover{border-color:var(--sd-akzent);box-shadow:0 0 0 3px rgba(96, 168, 191, .3), 0 12px 28px rgba(30, 40, 48, .2)}
.sd-karte[data-gehe]:hover .tt,.sd-karte[data-gehe]:hover .tt span{color:#3b7d92}
.sd-karte .tt{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:14px;font-weight:700}
.sd-karte .tt span{color:var(--sd-hell);font-weight:400}
.sd-karte .tw{padding:9px 12px;font-size:14px}
.sd-karte .tw b{display:block;line-height:1.3;margin-bottom:2px}

/* 3 Konfigurator */
.sd-produkt{display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);gap:36px;align-items:center;padding:34px 28px 38px}
.sd-zeichnung{aspect-ratio:400 / 270;border-radius:10px;background:#f7f8f9}
.sd-zeichnung svg{display:block;width:100%;height:100%}
.sd-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--sd-linie);font-size:16px}
.sd-seg{display:flex;gap:6px}
.sd-seg button{font:inherit;font-size:15px;font-weight:500;color:var(--sd-ink);background:#fff;border:1px solid var(--sd-feld);border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.sd-seg button.an{background:var(--sd-ink);border-color:var(--sd-ink);color:#fff}
.sd-seg button{transition:background-color .15s ease, box-shadow .15s ease}
.sd-seg button:not(.an):hover{background-color:#e6ebee;box-shadow:inset 0 0 0 2px var(--sd-ink)}
.sd-seg button.an:hover{box-shadow:0 0 0 5px rgba(68, 86, 98, .18)}
.sd-schalter{position:relative;flex:none;width:48px;height:28px;border-radius:14px;border:0;padding:0;background:var(--sd-feld);cursor:pointer;transition:background .2s}
.sd-schalter i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.sd-schalter.an{background:var(--sd-ink)}
.sd-schalter.an i{left:23px}
.sd-schalter{transition:background .2s ease, box-shadow .15s ease}
.sd-schalter:hover{box-shadow:0 0 0 7px rgba(68, 86, 98, .2)}
.sd-kauf{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:20px}
/* Ratenzahlung wie im Minishop oben (Angelika 21.10.2026): Regler von keine bis 24 Monate, der Preis zeigt dann die Monatsrate */
.sd-regler{display:flex;align-items:center;gap:12px}
.sd-regler input{width:160px;margin:0;accent-color:var(--sd-ink);cursor:pointer}
.sd-monate{min-width:84px;text-align:right;font-size:14px;font-weight:700}
.sd-preis small{margin-left:5px;font-size:15px;font-weight:600;color:var(--sd-leise)}
.sd-mini-zeile b small,.sd-mini-summe b small{margin-left:3px;font-size:12px;font-weight:600;color:var(--sd-leise)}

/* 1 Produkte: großes Bild, Pfeile, Kästchen; 3D-Ansicht dreht sich langsam von selbst */
.sd-galerie-seite{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);gap:34px;padding:30px 28px 4px}
.sd-gross{position:relative;aspect-ratio:3 / 2;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--sd-linie)}
.sd-gross img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sd-gross.weiss img{object-fit:contain;padding:14px 14px 14px 84px;box-sizing:border-box}
.sd-dreid{position:absolute;inset:0;display:none}
.sd-gross.dreid .sd-dreid{display:block}
.sd-gross.dreid img{display:none}
.sd-dreid model-viewer{width:100%;height:100%;background:linear-gradient(#fdfefe, #eef2f4);--poster-color:transparent}
.sd-dreid model-viewer::part(default-progress-bar){display:none}
.sd-pfeil{position:absolute;z-index:2;top:50%;width:36px;height:36px;margin-top:-18px;border:0;border-radius:50%;padding:0 0 3px;background:rgba(255, 255, 255, .92);box-shadow:0 1px 6px rgba(0, 0, 0, .2);font:inherit;font-size:24px;line-height:1;color:var(--sd-ink);cursor:pointer}
.sd-pfeil.zurueck{left:82px}
.sd-pfeil.vor{right:10px}
.sd-pfeil{transition:box-shadow .15s ease}
.sd-pfeil:hover{box-shadow:0 0 0 3px rgba(96, 168, 191, .35), 0 2px 10px rgba(0, 0, 0, .25)}
/* kleine Bilder als Leiste oben links im großen Bild (Angelika 21.10.2026, wie im Minishop oben) */
.sd-galerie{position:relative}
.sd-thumbs{position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;gap:8px}
.sd-thumbs button{position:relative;width:56px;height:42px;padding:0;border:2px solid #fff;border-radius:7px;overflow:hidden;background:#f7f8f9;cursor:pointer;box-shadow:0 1px 4px rgba(0, 0, 0, .18)}
.sd-thumbs button.an{border-color:var(--sd-ink)}
.sd-thumbs button{transition:border-color .15s ease, box-shadow .15s ease}
.sd-thumbs button:not(.an):hover{border-color:var(--sd-akzent);box-shadow:0 0 0 3px rgba(96, 168, 191, .35), 0 4px 14px rgba(0, 0, 0, .25)}
.sd-thumbs img{width:100%;height:100%;object-fit:cover}
.sd-thumbs em{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:4px;background:#fff;font-style:normal;font-size:10px;font-weight:700;line-height:1.4}
.sd-info .sd-preis{margin-bottom:14px}
.sd-info p{margin:0 0 20px}

/* 4 Korrekturen (Devin 01.11.2026): die Startseite als Entwurf. Markierungen wie kritik.js auf lucama-test, in den Farben der Demo.
   Stand abends (Devin): gestrichelter Rahmen beim Darüberfahren und die Hand wie im Rest der Demo, kein Fadenkreuz; jede Kritik hat ihr
   eigenes, immer offenes Fenster „Ihre Kritik“ mit Nummer neben der Markierung, die Nummer steht auch an der Markierung */
.sd-shop.sd-kr-modus > .sd-kopf,.sd-shop.sd-kr-modus > .sd-mini{display:none}   /* der Entwurf zeigt seinen eigenen Kopf */
.sd-kr{position:relative}
.sd-kr-entwurf .sd-korb:hover{color:inherit}
.sd-kr-entwurf .sd-korb:hover b{background-color:var(--sd-ink)}
.sd-fenster .sd-kr-entwurf .sd-korb,.sd-fenster .sd-kr-entwurf .sd-korb *{cursor:var(--zeiger),auto}
.sd-fenster .sd-kr-entwurf.hand,.sd-fenster .sd-kr-entwurf.hand *{cursor:var(--hand),pointer}
.sd-kr-lage{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.sd-kr-rk{position:absolute;box-sizing:border-box;border:2px solid var(--sd-akzent);border-radius:4px;background:rgba(96, 168, 191, .07)}
.sd-kr-rk.offen{background:rgba(96, 168, 191, .16)}
.sd-kr-rk.zieht{border-style:dashed;background:rgba(96, 168, 191, .05)}
.sd-kr-mk{position:absolute;border-radius:2px;background:rgba(96, 168, 191, .3);mix-blend-mode:multiply}
.sd-kr-mk.offen{background:rgba(96, 168, 191, .45)}
.sd-kr-hover{position:absolute;box-sizing:border-box;border:2px solid var(--sd-akzent);border-radius:6px;background:rgba(96, 168, 191, .07);box-shadow:0 0 0 3px rgba(96, 168, 191, .3), 0 12px 28px rgba(30, 40, 48, .2)}
/* Nummer an der Markierung und vor „Ihre Kritik“: CI-Blau, weiße Zahl */
.sd-kr-nr,.sd-kr-nrk{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;box-sizing:border-box;border-radius:50%;background:#5fa7be;color:#fff;font-style:normal;font-size:11.5px;font-weight:700;line-height:1}
.sd-kr-nr{position:absolute;box-shadow:0 0 0 2px #fff;pointer-events:auto}
.sd-fenster .sd-kr-nr{cursor:var(--hand),pointer}
/* Fenster „Ihre Kritik“ je Kritik, neben der Markierung, bleibt offen; das gerade bearbeitete hat einen blauen Rand */
.sd-kr-fensterlage{position:absolute;inset:0;z-index:6;pointer-events:none}
.sd-kr-fenster{position:absolute;left:0;top:0;width:240px;box-sizing:border-box;padding:9px 12px 8px;border-radius:10px;background:#fff;box-shadow:0 0 1.5px rgba(0, 0, 0, .35), 0 8px 22px rgba(28, 40, 48, .18);font-size:14px;line-height:1.45;color:var(--sd-ink);pointer-events:auto;transition:box-shadow .15s ease}
.sd-kr-fenster.aktiv{box-shadow:0 0 0 2px #5fa7be, 0 8px 22px rgba(28, 40, 48, .18)}
/* Schleier beim Schreiben (Devin 01.11.2026 abends): weiße Schicht über dem Entwurf samt anderen Fenstern, Markierungen, Kopf und Warenkorb;
   ausgespart ist die Markierung der aktiven Kritik mit Nummer, ihr Fenster liegt darüber. Reiter und Startseite bleiben, wie sie sind */
.sd-kr-fenster{z-index:3;transition:box-shadow .15s ease, opacity .15s ease}
.sd-kr-fenster.aktiv{z-index:4}
.sd-kr-fensterlage.fokus .sd-kr-fenster:not(.aktiv){opacity:.32}   /* andere Fenster: blass, auch wo sie über dem Ausgesparten liegen */
.sd-kr-schleier{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .15s ease}
.sd-kr-schleier.an{opacity:1}
.sd-kr-loch{position:absolute;border-radius:8px;box-shadow:0 0 0 9999px rgba(255, 255, 255, .68)}
.sd-kr-kopf{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:13px;font-weight:700;color:#3b7d92}
.sd-kr-fenster textarea{display:block;width:100%;min-height:1.45em;max-height:140px;box-sizing:border-box;margin:0;padding:0;border:0;outline:0;resize:none;overflow-y:auto;background:transparent;font:inherit;color:inherit}
.sd-fenster .sd-kr-fenster,.sd-fenster .sd-kr-fenster *{cursor:var(--hand),pointer}
.sd-fenster .sd-kr-fenster textarea{cursor:text}
.sd-kr-gesp{display:block;margin-top:3px;font-size:12px;color:var(--sd-leise);opacity:0;transition:opacity .3s}
.sd-kr-gesp.da{opacity:1}
@container sd (max-width: 520px){
  .sd-kr-fenster{width:220px}
}

/* 5 Shop-Admin wie die Bestellübersicht im Lucama-Backend (Angelika 21.10.2026): Tabelle, Notizen je Bestellung.
   Farben wie der Rest der Demo (23.10.2026): weißer Grund, Schiefergrau, Hellblau als einzige Farbe */
.sd-admin{padding:22px 28px 30px}
.sd-ad-titel{font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.02em}
.sd-ad-tabelle{width:100%;border-collapse:collapse;margin:16px 0 0}
.sd-ad-tabelle th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--sd-linie);font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--sd-leise)}
.sd-ad-tabelle td{padding:12px 10px;border-bottom:1px solid var(--sd-linie);vertical-align:middle;font-size:14px;line-height:1.5}
.sd-ad-tabelle .klein{font-size:12.5px}
.sd-ad-tabelle .leise{color:var(--sd-leise)}
.sd-ad-tabelle .nowrap{white-space:nowrap}
.sd-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.sd-badge.ok{background:var(--sd-akzent);color:#fff}
.sd-badge.wait{background:var(--sd-blau-hell);color:#3b7d92;box-shadow:inset 0 0 0 1px #cfe5ec}
.sd-badge.aus{background:#eef1f3;color:var(--sd-leise)}
/* Status in der Einzelansicht änderbar, sieht aus wie das Etikett (Angelika 23.10.2026) */
.sd-ad-status{position:relative;padding:0;transition:box-shadow .15s ease}
.sd-ad-status select{appearance:none;-webkit-appearance:none;margin:0;padding:3px 28px 3px 10px;border:0;border-radius:999px;background:transparent;font:inherit;color:inherit}
.sd-ad-status select:focus-visible{outline:2px solid var(--sd-akzent);outline-offset:2px}
.sd-ad-status option{color:var(--sd-ink);background:#fff;font-weight:500}
.sd-ad-status::after{content:"";position:absolute;right:11px;top:50%;width:5px;height:5px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);pointer-events:none}
.sd-ad-status:hover{box-shadow:0 0 0 3px rgba(96, 168, 191, .25)}
.sd-ad-status.wait:hover{box-shadow:inset 0 0 0 1px #cfe5ec, 0 0 0 3px rgba(96, 168, 191, .25)}
/* ganze Zeile anklickbar, deutlicher Hover (Angelika 23.10.2026) */
.sd-ad-zeile td{transition:background-color .15s ease, box-shadow .15s ease}
.sd-ad-zeile:hover td,.sd-ad-zeile:focus-visible td{background:var(--sd-blau-hell)}
.sd-ad-zeile:hover td:first-child,.sd-ad-zeile:focus-visible td:first-child{box-shadow:inset 3px 0 0 var(--sd-akzent)}
.sd-ad-zeile:hover .sd-ad-name,.sd-ad-zeile:focus-visible .sd-ad-name{color:#3b7d92;text-decoration:underline;text-underline-offset:3px}
.sd-ad-zeile:focus-visible{outline:2px solid var(--sd-akzent);outline-offset:-2px}
.sd-ad-tabelle .sd-ad-nr{font-weight:700;color:#3b7d92}
.sd-ad-tabelle .sd-ad-pfeil{width:18px;padding-left:0;font-size:22px;line-height:1;color:#b9c2c8;transition:color .15s ease, transform .15s ease}
.sd-ad-zeile:hover .sd-ad-pfeil,.sd-ad-zeile:focus-visible .sd-ad-pfeil{color:#3b7d92;transform:translateX(3px)}
/* Einzelansicht einer Bestellung ohne Kästen und Zwischenüberschriften: links Kunde, Lieferung, Notizen, rechts die Posten */
.sd-ad-zurueck{margin:0 0 14px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--sd-leise);text-underline-offset:4px;text-decoration-thickness:2px;transition:color .15s ease}
.sd-ad-zurueck:hover{color:#3b7d92;text-decoration-line:underline}
.sd-ad-dkopf{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:18px}
.sd-ad-gruppe{margin-bottom:22px}
.sd-ad-gruppe label{display:block;margin-bottom:10px;font-size:12.5px;color:var(--sd-leise)}
.sd-ad-gruppe input{display:block;width:100%;box-sizing:border-box;margin-top:3px;padding:8px 10px;border:1px solid #dde3e7;border-radius:8px;background:#fff;font:inherit;font-size:14px;color:var(--sd-ink)}
.sd-ad-gruppe input:focus{outline:none;border-color:var(--sd-akzent)}
.sd-fenster .sd-ad-gruppe input{cursor:text}
.sd-ad-plzort{display:grid;grid-template-columns:110px minmax(0, 1fr);gap:10px}
.sd .sd-ad-kname{margin:0 0 12px;font-size:18px;font-weight:700;line-height:1.3}
.sd-ad-gruppe select{display:block;width:100%;box-sizing:border-box;margin-top:3px;padding:8px 10px;border:1px solid #dde3e7;border-radius:8px;background:#fff;font:inherit;font-size:14px;color:var(--sd-ink)}
.sd-ad-gruppe select:focus{outline:none;border-color:var(--sd-akzent)}
/* Posten bearbeiten (Angelika 23.10.2026): Name, Menge, Preis, entfernen; darunter Posten als Freitext, Lieferkosten, Gesamt mit MwSt. */
.sd-ad-posten{width:100%;border-collapse:collapse;margin:0 0 10px}
.sd-ad-posten th{padding:0 6px 6px 0;text-align:left;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--sd-leise)}
.sd-ad-posten td{padding:4px 6px 4px 0;vertical-align:top}
.sd-ad-posten td:nth-child(2){width:62px}
.sd-ad-posten td:nth-child(3){width:118px}
.sd-ad-posten td:last-child{width:28px;padding-right:0;text-align:right}
.sd-ad-posten input,.sd-ad-posten textarea,.sd-ad-lieferkosten input,.sd-ad-lieferkosten select{display:block;width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid #dde3e7;border-radius:8px;background:#fff;font:inherit;font-size:14px;line-height:1.4;color:var(--sd-ink)}
.sd-ad-posten textarea{resize:none;overflow:hidden}
.sd-ad-posten input:focus,.sd-ad-posten textarea:focus,.sd-ad-lieferkosten input:focus,.sd-ad-lieferkosten select:focus{outline:none;border-color:var(--sd-akzent)}
.sd-fenster :is(.sd-ad-posten input,.sd-ad-posten textarea,.sd-ad-lieferkosten input){cursor:text}
.sd-ad-menge{position:relative;display:block}
.sd-ad-preis{position:relative;display:block}
.sd-ad-preis input{padding-right:24px;text-align:right}
.sd-ad-preis::after{content:"€";position:absolute;right:9px;top:50%;translate:0 -50%;font-size:13px;color:var(--sd-leise);pointer-events:none}
.sd-ad-weg{width:26px;height:26px;margin-top:5px;padding:0;border:0;border-radius:50%;background:none;font:inherit;font-size:18px;line-height:1;color:var(--sd-hell);cursor:pointer;transition:color .15s ease, background-color .15s ease}
.sd-ad-weg:hover{color:var(--sd-ink);background:#eef2f4}
.sd-ad-lieferkosten{display:grid;grid-template-columns:minmax(0, 1fr) 112px;gap:6px;align-items:center;margin-top:12px;font-size:14px}
.sd-ad-mwst{display:flex;justify-content:space-between;margin-top:3px;font-size:13px;color:var(--sd-leise)}
.sd-ad-lieferkosten,.sd-ad-gesamt,.sd-ad-mwst,.sd-ad-raten{padding-right:34px}
.sd-ad-ratenwahl{margin-top:10px}
.sd-ad-raten:empty{display:none}
.sd-ad-gesamt{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px solid var(--sd-linie);font-size:15px}
.sd-ad-gesamt b{font-size:19px}
.sd-ad-raten{margin-top:2px;text-align:right;font-size:13px;color:var(--sd-leise)}
.sd-ad-gespeichert{font-size:13px;font-weight:600;color:#3b7d92;opacity:0;transition:opacity .3s ease}
.sd-ad-gespeichert.da{opacity:1}
.sd-ad-detail-raster{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr);gap:28px;align-items:start}
/* Notizen wie im Lucama-Admin: Textfeld, Knopf, Verlauf mit Zeitstempel (Angelika 23.10.2026) */
.sd-ad-notizen textarea{display:block;width:100%;box-sizing:border-box;margin:4px 0 8px;padding:9px 12px;border:1px solid #dde3e7;border-radius:10px;background:#fff;font:inherit;font-size:14px;line-height:1.5;color:var(--sd-ink);resize:vertical}
.sd-ad-notizen textarea:focus{outline:none;border-color:var(--sd-akzent)}
.sd-fenster .sd-ad-notizen textarea{cursor:text}
.sd-ad-notizliste{margin:14px 0 0;padding:0;list-style:none}
.sd-ad-notizliste li{padding:10px 0;border-top:1px solid var(--sd-linie);font-size:14px;line-height:1.5;white-space:pre-line}
.sd-ad-notizliste span{display:block;font-size:12.5px;color:var(--sd-leise)}

/* 6 Rechtliches */
.sd-recht{padding:30px 28px 36px}
.sd-recht-kopf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:20px}
.sd-recht-kopf .sd-h{margin:0}
/* Am Beispiel Widerrufsbutton (Angelika 26.10.2026): links das Formular wie bei MediaMarkt, rechts daneben der Rückrufservice */
.sd-wr-raster{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);gap:24px;align-items:start}
@container sd (max-width: 900px){.sd-wr-raster{grid-template-columns:minmax(0, 1fr)}}
.sd-wr{min-width:0;border:1px solid var(--sd-rahmen);border-radius:10px;overflow:hidden;background:#fff}
/* Fußzeile des Shops mit dem Button (nach „Zurück zum Shop“) */
.sd-wr-fuss{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px 28px;padding:24px 26px 26px;background:var(--sd-blau-hell)}
.sd-wr-fuss b{display:block;margin-bottom:8px;font-size:15px}
.sd-wr-fuss span{display:block;font-size:14px;line-height:1.9;color:#5d6d77}
.sd-wr-fuss .sd-wr-links{display:flex;flex-wrap:wrap;gap:0 14px}
.sd-wr-fuss .sd-wr-links span{display:inline}
.sd-wr-knopf{display:inline-block;margin:2px 0 10px;padding:11px 20px;border:0;border-radius:7px;background:var(--sd-akzent);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s ease, box-shadow .15s ease}
.sd-wr-knopf:hover{background-color:#3b7d92;box-shadow:0 0 0 7px rgba(96, 168, 191, .32)}
.sd-wr-knopf:focus-visible{outline:3px solid var(--sd-ink);outline-offset:3px}
.sd-wr-knopf.breit{display:block;width:100%;margin:6px 0 0;padding:13px 20px}
/* Formular: Persönliche Daten und Bestellnummer */
.sd-wr-form,.sd-wr-ok{padding:22px 24px 24px}
.sd-wr-titel{margin:0 0 6px;font-size:22px;line-height:1.25;font-weight:700}
.sd-wr-form .sd-wr-titel{margin-bottom:14px}
.sd .sd-wr-leise{margin:0 0 16px;font-size:14px;line-height:1.55;color:#5d6d77}
.sd-wr-gruppe{margin:4px 0 8px;font-size:15px;font-weight:600}
.sd-wr-form input{display:block;width:100%;box-sizing:border-box;margin:0 0 12px;padding:10px 12px;border:1px solid #c5ced4;border-radius:8px;background:#fff;font:inherit;font-size:14px;color:var(--sd-ink)}
.sd-wr-form input::placeholder{color:var(--sd-leise)}
.sd-wr-form input:focus{outline:none;border-color:var(--sd-akzent)}
.sd-fenster .sd-wr-form input{cursor:text}
.sd-wr-zwei{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 12px}
.sd .sd-wr-fehler{margin:0 0 14px;padding:10px 12px;border:1px solid #cfe5ec;border-radius:8px;background:var(--sd-blau-hell);font-size:13.5px;font-weight:600}
/* Eingangsbestätigung mit Vorgangsnummer, Zeitpunkt und Wortlaut */
.sd-wr-ok{border-left:4px solid var(--sd-akzent)}
.sd .sd-wr-gesendet{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--sd-ink)}
.sd-wr-wortlaut b{display:block;margin-bottom:6px;font-size:14px}
.sd-wr-wortlaut pre{margin:0;padding:12px 14px;border:1px solid var(--sd-linie);border-radius:8px;background:#f7f8f9;font:inherit;font-size:13px;line-height:1.6;white-space:pre-wrap}
.sd .sd-wr-danach{margin:14px 0 0}
.sd-wr-zurueck{margin:14px 0 0;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--sd-leise);text-underline-offset:4px;text-decoration-thickness:2px;cursor:pointer;transition:color .15s ease}
.sd-wr-zurueck:hover{color:var(--sd-ink);text-decoration-line:underline}
/* Rückrufservice rechts daneben: Tina Müller, Termin im Kalender wählen, Uhrzeit, Telefonnummer */
.sd-rr{min-width:0;padding:22px 22px 24px;border:1px solid var(--sd-rahmen);border-radius:10px;background:#fff}
.sd-rr-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.sd-rr-titel{margin:0;font-size:22px;line-height:1.25;font-weight:700}
.sd-rr-person{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15px;line-height:1.3;text-align:center}
.sd .sd-rr-foto{flex:none;width:110px;height:110px;box-sizing:border-box;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px rgba(30, 40, 48, .15)}
.sd-rr-kal{padding:12px;border:1px solid #dde3e7;border-radius:10px;background:#fff}
.sd-rr-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:700}
.sd-rr-kopf button{width:30px;height:30px;padding:0 0 2px;border:0;border-radius:50%;background:none;font:inherit;font-size:20px;line-height:1;color:var(--sd-ink);cursor:pointer}
.sd-rr-kopf button:hover:not(:disabled){background:#eef2f4}
.sd-rr-kopf button:disabled{opacity:.25;cursor:default}
.sd-rr-woche,.sd-rr-tage{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:3px;text-align:center}
.sd-rr-woche span{padding-bottom:4px;font-size:11.5px;font-weight:700;color:var(--sd-leise)}
.sd-rr-tage > *{display:grid;place-items:center;height:32px;border-radius:7px;font-size:13.5px}
.sd-rr-tage .aus{color:#c3cbd0}
.sd-rr-tage button{padding:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--sd-ink);cursor:pointer;transition:background-color .15s ease, box-shadow .15s ease}
.sd-rr-tage button:not(.an):hover{background-color:#e6ebee;box-shadow:inset 0 0 0 2px var(--sd-ink)}
.sd-rr-tage button.an{background:var(--sd-ink);color:#fff;box-shadow:none}
.sd-rr-zeiten{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.sd-rr-zeiten button{padding:6px 12px;border:1px solid var(--sd-feld);border-radius:6px;background:#fff;font:inherit;font-size:14px;font-weight:500;color:var(--sd-ink);cursor:pointer;transition:background-color .15s ease, box-shadow .15s ease}
.sd-rr-zeiten button:not(.an):hover{background-color:#e6ebee;box-shadow:inset 0 0 0 2px var(--sd-ink)}
.sd-rr-zeiten button.an{background:var(--sd-ink);border-color:var(--sd-ink);color:#fff}
.sd-rr label{display:block;margin-bottom:12px;font-size:13px;font-weight:600}
.sd-rr input{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:9px 12px;border:1px solid #c5ced4;border-radius:8px;background:#fff;font:inherit;font-size:14px;font-weight:400;color:var(--sd-ink)}
.sd-rr input:focus{outline:none;border-color:var(--sd-akzent)}
.sd-fenster .sd-rr input{cursor:text}
.sd .sd-rr-hinweis{margin:0 0 10px;font-size:13px;font-weight:600}
.sd .sd-rr-ok{display:flex;align-items:center;min-height:46px;margin:6px 0 0;font-size:15px;line-height:1.5;font-weight:400;color:var(--sd-ink)}
@container sd (max-width: 520px){
  .sd-wr-fuss{grid-template-columns:minmax(0, 1fr)}
}

/* 7 Ratgeber: der Artikel im Shop */
.sd-artikel{max-width:720px;margin:0 auto;padding:28px 28px 36px}
.sd-pfad{margin-bottom:6px;font-size:13px;color:var(--sd-leise)}
.sd-artikel-titel{margin:0 0 16px;font-size:28px;line-height:1.2;font-weight:700}
.sd-artikel img{width:100%;aspect-ratio:2 / 1;object-fit:cover;border-radius:10px;margin-bottom:16px}
.sd-artikel p{margin:0 0 16px;font-size:16px;line-height:1.6}
/* Ratgeber-Artikel (Angelika 21.10.2026): Bilder mit Unterschrift, Grafiken in einer Karte, zwei Listen, Box */
.sd-a-h{margin:30px 0 10px;font-size:21px;line-height:1.3;font-weight:700}
.sd-a-bild{margin:0 0 22px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(30, 40, 48, .10)}
.sd .sd-artikel .sd-a-bild img{display:block;margin:0;border-radius:0}
.sd-a-zwei{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, .95fr);gap:22px;align-items:stretch;margin-bottom:22px}
/* Foto neben dem Text genau so hoch wie der Text, ohne Leerraum darunter (Angelika 23.10.2026) */
.sd-a-zwei .sd-a-bild{position:relative;min-height:200px}
.sd .sd-artikel .sd-a-zwei .sd-a-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sd-a-zwei p,.sd-a-zwei .sd-a-bild{margin:0}
/* Grafik „Was den Unterbau stabil macht“ direkt unter der 2. Überschrift, darunter der Text (Devin 01.11.2026: „wenn die zu klein wird, muss erst
   die 2. übershcrift, dann die grafik udn dann der text“): rechts neben dem Text wären die Beschriftungen nur noch 8–10 px groß */
.sd-a-zwei--grafik{grid-template-columns:minmax(0, 1fr);align-items:start}
.sd-a-zwei--grafik .sd-a-grafik{order:-1;margin:0}
.sd-a-grafik{margin:0 0 22px;padding:18px 18px 14px;border:1px solid #e3e7ea;border-radius:12px;background:#fff}
.sd-a-gtitel{font-size:17px;font-weight:700;line-height:1.3}
.sd-a-gunter{margin-bottom:10px;font-size:13px;color:var(--sd-leise)}
.sd-a-paar{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px}
.sd-a-paar svg{display:block;width:100%;height:auto}
/* Listen im Fließtext und Grafik mit nur einem Bild (Angelika 23.10.2026) */
.sd-a-liste{margin:0 0 18px;padding:0;list-style:none}
.sd-a-liste li{position:relative;margin:0 0 7px;padding-left:20px;font-size:16px;line-height:1.55}
.sd-a-liste li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--sd-akzent)}
.sd-a-grafik > svg{display:block;width:100%;max-width:520px;height:auto;margin:6px auto 2px}

/* Schmales Fenster (Handy): alles untereinander, die Reiter führen durch den Shop */
@container sd (max-width: 700px){
  .sd-kopf{height:52px;padding:0 16px}
  .sd-korb-text{display:none}
  .sd-held{display:block;height:auto}
  .sd .sd-held-bild{position:static;width:100%;height:210px;object-fit:cover;object-position:30% 72%}
  .sd-held::after{display:none}
  .sd-held-text{width:auto;padding:18px 16px 0}
  .sd-gross-titel{font-size:29px}
  .sd-held-text p{font-size:15px}
  .sd-block{padding:22px 16px 26px}
  .sd-karten{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
  .sd-karte .bb{height:96px}
  .sd-produkt,.sd-galerie-seite{grid-template-columns:minmax(0, 1fr);gap:22px;padding:20px 16px 26px}
  .sd-galerie-seite{padding-bottom:0}
  .sd-name{font-size:20px}
  .sd-preis{font-size:22px}
  .sd-zeile{font-size:15px}
  .sd-seg button{font-size:14px;padding:6px 10px}
  .sd-regler{gap:8px}
  .sd-regler input{width:110px}
  .sd-monate{min-width:72px}
  .sd-thumbs{top:8px;left:8px;gap:6px}
  .sd-thumbs button{width:44px;height:33px}
  .sd-gross.weiss img{padding:10px 10px 10px 60px}
  .sd-pfeil.zurueck{left:60px}
  .sd-admin{padding:18px 14px 24px}
  .sd-ad-titel{font-size:24px}
  .sd-ad-tabelle thead{display:none}
  .sd-ad-tabelle tr{display:block;padding:12px 0;border-bottom:1px solid var(--sd-linie)}
  .sd-ad-tabelle td{display:block;padding:3px 0;border:0}
  .sd-ad-detail-raster{grid-template-columns:minmax(0, 1fr);gap:16px}
  .sd-ad-tabelle .sd-ad-pfeil{display:none}
  .sd-ad-plzort{grid-template-columns:90px minmax(0, 1fr)}
  .sd-ad-posten thead{display:none}
  .sd-ad-posten tr{display:grid;grid-template-columns:84px minmax(0, 1fr) 28px;gap:6px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--sd-linie)}
  .sd-ad-posten td,.sd-ad-posten td:nth-child(n){width:auto;padding:0}
  .sd-ad-posten td:first-child{grid-column:1 / -1}
  .sd-ad-menge input{padding-right:36px}
  .sd-ad-menge::after{content:"Stk.";position:absolute;right:9px;top:50%;translate:0 -50%;font-size:13px;color:var(--sd-leise);pointer-events:none}
  .sd-ad-lieferkosten{grid-template-columns:minmax(0, 1fr) 150px}
  .sd-recht{padding:20px 16px 26px}
  .sd-wr-raster{grid-template-columns:minmax(0, 1fr);gap:20px}
  .sd-artikel{padding:20px 16px 26px}
  .sd-artikel-titel{font-size:23px}
  .sd-a-h{font-size:19px}
  .sd-a-zwei,.sd-a-paar{grid-template-columns:minmax(0, 1fr)}
  .sd-a-zwei .sd-a-bild{min-height:0;aspect-ratio:3 / 2}
  .sd-a-grafik{padding:14px 14px 12px}
  .sd-mini{top:50px;right:8px;max-width:calc(100% - 16px);padding:16px 14px 10px}
  .sd-shop{min-height:0}
}
/* mittlere Breiten: Reiter in zwei Reihen zu je drei, damit kein Titel aus dem Kasten ragt (Angelika 21.10.2026);
   seit sieben Reitern (Devin 01.11.2026) vier und drei, der letzte ist doppelt so breit, damit keine Lücke bleibt */
@media (min-width:768px) and (max-width:1009px){
  .sd-reiter{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .sd-r:last-child{grid-column:span 2}
  .sd-r.an::after{display:none}
}
@media (max-width:767px){
  .sd{margin-top:60px}
  .sd-reiter{grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;margin-bottom:18px}
  .sd-r:last-child{grid-column:1 / -1}   /* der siebte Reiter über die ganze Breite (Devin 01.11.2026) */
  .sd-r{padding:10px 11px 12px;gap:5px}
  .sd-r b{font-size:15px}
  .sd-r span{font-size:13px}
  .sd-r.an::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sd-seite,.sd-korb.hupf svg,.sd-korb.hupf b{animation:none}
  .sd-karte .bb img,.sd-mini,.sd-wr-knopf,.sd-wr-zurueck{transition:none}
  .sd-kr-fenster,.sd-kr-gesp,.sd-kr-schleier{transition:none}
}


/* Demo-Reiter 3 verwendet die Vorlage und Gestaltung des Minibildschirms. */
.sd-generator,.sd-generator-produkt{--font:var(--schrift)}
.sd-generator .s-gen{display:block;padding:10px 28px 20px}
.sd-generator .g-karte{padding:0 26px 6px}
.sd-generator .g-fragen{padding-right:26px}
.sd-generator .g-ergebnis{padding:8px 0 0 26px}
.sd-generator .g-frage{padding:10px 0 6px}
.sd-generator .g-frage + .g-frage{margin-top:16px}
.sd-generator .g-frage legend{margin-bottom:8px}
.sd-generator .g-wahl{gap:8px}
.sd-generator .g-wahl span{min-height:0;padding:8px 6px;gap:3px}
.sd-generator .g-wahl input:checked + span{padding:7.5px 5.5px}
.sd-generator .g-produkt{aspect-ratio:1.9 / 1;object-position:50% 45%}
.sd-generator .g-produkt[data-gen-bild$="-rollen"]{object-position:50% 64%}
.sd-generator .g-modell{margin:6px 0 0;font-size:23px;line-height:1.15}
.sd-generator .g-zeile{margin:2px 0 0}
.sd-generator .g-raten{margin-top:8px;padding-top:2px}
.sd-generator .g-raten input[type=range]{margin-top:2px}
.sd-generator .g-raten-betrag{margin:0}
.sd-generator .g-pause{margin-top:6px;padding-top:0}
.sd-generator .g-ja-nein{margin-top:4px}
.sd-generator .g-knoepfe{position:static;margin-top:0;padding:8px 0 4px;gap:52px}
.sd-generator .g-knoepfe .g-knopf{padding:12px 8px}
.sd-generator .g-knoepfe > .g-knopf:only-child{grid-column:2}
.sd-zum-shop{margin-left:auto;background:#fff;border:1px solid #b9d7e1;border-radius:7px;padding:5px 12px;font:inherit;font-size:14px;color:var(--sd-ink);cursor:pointer;white-space:nowrap}
.sd-zum-shop:hover{background:var(--sd-blau-hell);border-color:var(--sd-akzent)}
.sd-zum-shop:not([hidden]) + .sd-korb{margin-left:0}
.sd-generator-produkt.s{height:auto;overflow:visible;font-size:17px;--t:17px;--t2:17px;--t3:24px}
.sd-generator-produkt .s-produktseite{display:block}
.sd-generator-produkt .s-produkt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.sd-generator-produkt .s-bild{height:auto;aspect-ratio:1.15 / 1}
.sd-generator-produkt .s-name{font-size:24px;line-height:1.2}
.sd-generator-produkt .s-ausfuehrung,.sd-generator-produkt .s-beschreibung{font-size:17px;line-height:1.45}
.sd-generator-produkt .s-beschreibung{margin-top:10px}
.sd-generator-produkt .s-preis{font-size:24px}
.sd-generator-produkt .s-rate-text{font-size:16px}
.sd-generator-produkt .s-knopf{font-size:17px;padding:11px 20px}
.sd-fenster :is(.g-wahl label,.g-ja-nein,.g-knopf),.sd-fenster :is(.g-wahl label,.g-ja-nein,.g-knopf) *{cursor:var(--hand),pointer}
@container sd (max-width:680px){
  .sd-generator .s-gen{padding:12px 14px 20px}
  .sd-generator .g-karte{padding:6px 16px 12px}
  .sd-generator .g-raster{grid-template-columns:minmax(0,1fr)}
  .sd-generator .g-fragen{padding-right:0}
  .sd-generator .g-ergebnis{padding:14px 0 0}
  .sd-generator .g-knoepfe{grid-template-columns:minmax(0,1fr);gap:0;padding-top:14px}
  .sd-generator .g-knoepfe > .g-knopf:only-child{grid-column:1}
  .sd-generator .g-regler{gap:16px}
  .sd-generator .g-frage legend{font-size:17px}
  .sd-generator .g-wahl span{font-size:15px}
  .sd-kopf:has(.sd-zum-shop:not([hidden])){gap:10px;flex-wrap:wrap;height:auto;min-height:60px;padding-top:10px;padding-bottom:10px}
  .sd-zum-shop:not([hidden]){font-size:12px;padding:4px 8px}
  .sd-generator-produkt .s-produkt{grid-template-columns:minmax(0,1fr);padding:24px 20px 0}
  .sd-generator-produkt .s-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}