:root{--bg:#FFF9F2;--fg:#191410;--ak:#D6412B;--akT:#FFFFFF;--soft:rgba(25,20,16,.70);--fein:#F0DFCC;--flae:#FFF1E2;--lin:#F0DFCC;--disp:'Quicksand', Georgia, serif;--aktion:#C0392B;--aktionT:#FFFFFF}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter', system-ui, sans-serif;background:var(--bg);color:var(--soft);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* Der eigene Grund: Bild und Schleier liegen fest hinter allem, was auf
   der Seite steht. Ein negativer z-index bringt sie hinter den Inhalt,
   aber VOR die Hintergrundfarbe des body - genau die Reihenfolge, die es
   braucht: Farbe, Bild, Schleier, Inhalt. */
.grundbild{position:fixed;inset:0;z-index:-2;background-position:center;
  background-size:cover;background-repeat:no-repeat;pointer-events:none}
.grundschleier{position:fixed;inset:0;z-index:-1;background:var(--bg);pointer-events:none}
a{color:var(--ak);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
h1,h2,h3,.marke{font-weight:800;color:var(--fg);letter-spacing:-.02em}
.rv{opacity:0;translate:0 20px;transition:opacity .6s ease,translate .6s ease;transition-delay:var(--d,0s)}
.rv.in{opacity:1;translate:0 0}
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--fein)}
.kopf{max-width:1180px;margin:0 auto;padding:14px clamp(18px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.marke{font-size:18px}
.marke small{display:block;font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--ak)}
.kopf-rechts{display:flex;align-items:center;gap:16px}
.zur-site{font-size:13.5px;font-weight:600;color:var(--soft)}
.spr-schalter{display:flex;gap:2px;border:1.5px solid var(--fein);border-radius:var(--r,10px);padding:3px}
.spr-knopf{border:none;background:none;font:inherit;font-size:11px;font-weight:800;letter-spacing:.8px;
  color:var(--soft);padding:6px 9px;border-radius:var(--r,7px);cursor:pointer;transition:background .2s,color .2s}
.spr-knopf:hover{color:var(--fg)}
.spr-knopf.aktiv{background:var(--ak);color:var(--akT)}
.sf-spr{display:flex;gap:4px;margin-top:6px}
.sf-spr-knopf{padding:4px 7px;font-size:10.5px}
/* DER FUSS STEHT AUF var(--fg). Damit ist var(--soft) - der Standardton
   der Sprachknoepfe, rgba(fg,.70) - dort fast dieselbe Farbe wie der
   Grund: FR, IT und EN waren unsichtbar, und sichtbar blieb nur die
   aktive Sprache, weil die ihren Akzenthintergrund traegt. Gemessen am
   30.8.2026 am fertigen Fuss.
   NUR DER FUSS wird umgefaerbt: Dieselbe Klasse steht auch im Mobilmenue,
   und das liegt auf var(--bg) - dort ist der dunkle Ton richtig. */
.shopfuss .sf-spr-knopf{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.shopfuss .sf-spr-knopf.aktiv{background:var(--ak);color:var(--akT)}
.shopfuss .sf-spr-knopf:hover{color:var(--bg)}
[data-shop="studio"] .sf-spr-knopf{border-radius:var(--r,6px);font-weight:500;letter-spacing:.02em;color:var(--stLeise)}
[data-shop="studio"] .sf-spr-knopf.aktiv{background:var(--fg);color:var(--bg)}
@media(max-width:560px){.zur-site{display:none}}
.zur-site:hover{color:var(--fg)}
.wk-knopf{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rk,var(--r,12px));border:1.5px solid var(--fein);background:none;cursor:pointer;color:var(--fg);transition:border-color .2s}
.wk-knopf:hover{border-color:var(--ak)}
.wk-zahl{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:var(--r,10px);background:var(--ak);color:var(--akT);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.wk-zahl.da{opacity:1;transform:scale(1)}
.band{background:var(--ak);color:var(--akT);text-align:center;font-size:13px;font-weight:700;padding:9px 16px}
.shero{padding:60px 0 34px;text-align:center}
.shero h1{font-family:var(--disp);font-size:clamp(34px,5.4vw,58px);line-height:1.04;margin-bottom:12px;font-weight:700}
.shero p{max-width:56ch;margin:0 auto;color:var(--soft)}
/* Editorial-Hero mit Featured-Produkt */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);align-items:center;padding:clamp(38px,6vw,72px) 0 clamp(30px,4vw,48px)}
.hero-text{max-width:44ch}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ak);margin-bottom:18px}
.hero-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--ak)}
.hero h1{font-family:var(--disp);font-size:clamp(38px,5.6vw,66px);line-height:1.03;margin-bottom:16px;font-weight:700}
.hero-intro{font-size:clamp(16px,1.5vw,19px);color:var(--soft);margin-bottom:26px;line-height:1.6}
.hero-cta{display:inline-flex;align-items:center;gap:9px;background:var(--ak);color:var(--akT);font-weight:800;font-size:14.5px;letter-spacing:.3px;padding:14px 26px;border-radius:var(--rk,var(--r,12px));transition:transform .2s,filter .2s;box-shadow:0 10px 30px -8px color-mix(in srgb,var(--ak) 60%,transparent)}
.hero-cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.hero-bild{position:relative}
/* --heroAr traegt das ECHTE Seitenverhaeltnis des Buehnenbildes (siehe
   pxaShopBildAr). Damit ist der Rahmen genau so hoch wie das Bild:
   nichts wird beschnitten, und es entstehen keine Balken. Der Wert
   dahinter gilt, wenn sich das Bild nicht messen laesst. contain ist
   das Sicherheitsnetz fuer den geklemmten Fall - lieber ein Rand als
   ein abgeschnittenes Bild. */
.hero-bild-rahmen{display:block;aspect-ratio:var(--heroAr,4/5);border-radius:var(--r,22px);overflow:hidden;background:var(--flae);box-shadow:0 30px 70px -24px rgba(0,0,0,.35);position:relative}
.hero-bild-rahmen img{width:100%;height:100%;object-fit:contain}
.hero-bild-tag{position:absolute;left:18px;bottom:18px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-radius:var(--r,14px);padding:11px 15px;box-shadow:0 8px 24px rgba(0,0,0,.14);max-width:76%}
.hero-bild-tag b{display:block;font-size:14px;color:var(--fg);font-weight:700;letter-spacing:0}
.hero-bild-tag span{font-size:13px;font-weight:800;color:var(--ak);white-space:nowrap}
.hero-orb{position:absolute;inset:-14% -10% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ak) 30%,transparent),transparent 68%);filter:blur(10px);z-index:-1}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:26px;text-align:center;padding:34px 0 22px}.hero-text{max-width:none}.hero-eyebrow{margin-inline:auto}.hero-bild-rahmen{aspect-ratio:var(--heroAr,16/11);max-width:480px;margin:0 auto}.hero-bild-tag{left:14px;right:14px;bottom:14px;max-width:none;display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:12px 16px}.hero-bild-tag b{font-size:15px}}
/* Trust-Leiste */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,44px);padding:20px clamp(18px,4vw,40px);border-top:1px solid var(--fein);border-bottom:1px solid var(--fein);margin:8px 0 4px}
.trust-item{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--soft)}
.trust-item svg{width:20px;height:20px;stroke:var(--ak);flex:none}
.trust-item b{color:var(--fg);font-weight:700}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;padding:26px 0 80px}
.pk{border:1.5px solid var(--lin);border-radius:var(--r,18px);overflow:hidden;background:var(--flae);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.pk:hover{transform:translateY(-4px);border-color:var(--ak);box-shadow:0 16px 44px rgba(0,0,0,.09)}
.pk-bild{aspect-ratio:1/1;overflow:hidden;background:var(--fein);position:relative;display:block}
.pk-kein-bild{display:grid;place-items:center;width:100%;height:100%;font-size:46px;opacity:.35}
.pk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.pk:hover .pk-bild img{transform:scale(1.06)}
.pk-badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--ak);color:var(--akT);font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;border-radius:99px;padding:5px 11px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.pk-badge.knapp{background:var(--fg);color:var(--bg)}
.pk-aus{position:absolute;top:12px;left:12px;z-index:2;background:var(--fg);color:var(--bg);font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;border-radius:99px;padding:5px 11px}
.pk-info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pk-info h3{font-size:16.5px}
/* Bewusst KEIN Flex-Kasten: Studio zentriert den Kartentext, und ein
   Flex-Kasten schert sich nicht um text-align. Im Inline-Fluss sitzen
   die drei Teile ohnehin auf der Grundlinie, und die Ausrichtung der
   Vorlage gilt weiter. Die Abstaende stehen an den Nebenangaben. */
.pk-preis{font-size:16px;font-weight:800;color:var(--fg);line-height:1.35}
.pk-knopf{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ak);color:var(--akT);font-weight:800;font-size:13.5px;letter-spacing:.4px;padding:12px 16px;border-radius:var(--rk,var(--r,11px));border:none;cursor:pointer;transition:transform .18s,filter .18s}
.pk-knopf:hover{transform:translateY(-2px);filter:brightness(1.08)}
.kat-leiste{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 26px}
.kat-chip{border:1.5px solid var(--fein);background:transparent;color:inherit;font:inherit;font-weight:700;font-size:13.5px;padding:9px 17px;border-radius:100px;cursor:pointer;transition:all .2s}
.kat-chip:hover{border-color:var(--ak)}
.kat-chip.aktiv{background:var(--ak);color:var(--akT);border-color:var(--ak)}
.pk.kat-weg{display:none}
.pd-var{margin:16px 0 4px}
.pd-var-name{font-size:12.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;opacity:.75;margin-bottom:9px}
.pd-var-optionen{display:flex;flex-wrap:wrap;gap:8px}
.pd-var-knopf{border:1.5px solid var(--fein);background:transparent;color:inherit;font:inherit;font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:var(--rk,var(--r,11px));cursor:pointer;transition:all .18s}
.pd-var-knopf:hover{border-color:var(--ak)}
.pd-var-knopf.aktiv{background:var(--ak);color:var(--akT);border-color:var(--ak)}
.pd-var-knopf small{font-weight:600;opacity:.8;margin-left:4px}
/* Aktionspreis */
.pk-rabatt{position:absolute;top:12px;right:12px;z-index:2;background:var(--aktion);color:var(--aktionT);font-size:11px;font-weight:800;letter-spacing:.4px;border-radius:99px;padding:5px 10px;box-shadow:0 4px 12px rgba(0,0,0,.16)}
.pk-rabatt~* .pk-badge{top:44px}
/* Der frueher gueltige Preis ist eine Fussnote, kein zweiter Preis.
   Er war mit Gewicht 600 fetter als der, den man zahlt - in den ruhigen
   Vorlagen (Studio 400, Couture 500) stach ausgerechnet der
   durchgestrichene hervor.

   Groesse und Abstand in em, damit beides in jeder Vorlage im
   Verhaeltnis zum Preis bleibt: fest gesetzte 16px sind neben 26px
   angemessen und neben den 22px des Studios schon fast gleich gross.
   Der Abstand ist groesser als der hinter «ab» - so liest sich
   «ab CHF 39.–» als eine Angabe und der frueher gueltige Preis als
   die zweite.

   Bewusst OHNE zusaetzliche opacity: var(--soft) allein kommt gegen
   Weiss auf 6.9:1, mit opacity:.72 nur noch auf 3.55:1 - unter AA fuer
   Text dieser Groesse. Der frueher gueltige Preis ist der Bezugspreis
   der Preisbekanntgabeverordnung; er darf leiser sein als der neue,
   aber nicht schwer lesbar. Rangfolge machen hier Groesse (.78em),
   Gewicht (500 gegen 800) und der Strich - drei Mittel, die keinen
   Kontrast kosten. */
.pk-alt{font-size:.78em;font-weight:500;color:var(--soft);margin-left:.3em;text-decoration-thickness:1px}
.pd-alt{font-size:.6em;font-weight:500;color:var(--soft);margin-left:.3em;text-decoration-thickness:1px}
.pd-rabatt{display:inline-block;background:var(--aktion);color:var(--aktionT);font-size:12px;font-weight:800;letter-spacing:.3px;border-radius:99px;padding:4px 10px;margin-left:.4em;vertical-align:middle}
/* Wartungsmodus: ein ruhiger Schleier ueber allem. Die Seite darunter
   bleibt gebaut - der Schalter im Panel hebt ihn mit dem naechsten
   Veroeffentlichen wieder ab. */
.wartung-schleier{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;text-align:center;padding:24px}
/* Hier steht der GANZE Ladenname, auch ein langer. Die Leiste oben
   schneidet ihn ab, weil dort Menüknopf und Symbole danebenstehen -
   auf dieser Seite steht nichts daneben. Darum ausdrücklich das
   Gegenteil, statt sich darauf zu verlassen, dass keine fremde Regel
   hereinreicht: umbrechen erlaubt, nichts abschneiden, mittig. */
.wartung-schleier .marke{font-size:clamp(19px,5vw,26px);margin:0 auto 10px;max-width:24ch;
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.wartung-schleier h1{font-family:var(--disp);font-size:clamp(26px,4vw,40px);margin-bottom:10px}
.wartung-schleier p{color:var(--soft);max-width:52ch;margin:0 auto}
.wk-pos-var{display:block;opacity:.72;font-size:11.5px;margin:1px 0 2px}
.pk-knopf:disabled{opacity:.4;cursor:not-allowed;transform:none}
/* Produktseite */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);padding:44px 0 90px;align-items:start}
.pd-galerie{position:sticky;top:90px}
.pd-haupt{aspect-ratio:1/1;border-radius:var(--r,20px);overflow:hidden;border:1.5px solid var(--fein);background:var(--fein)}
.pd-haupt img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumb{width:70px;height:70px;border-radius:var(--r,12px);overflow:hidden;border:2px solid var(--fein);cursor:pointer;padding:0;background:none;transition:border-color .2s}
.pd-thumb.aktiv,.pd-thumb:hover{border-color:var(--ak)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-info h1{font-size:clamp(28px,3.6vw,42px);line-height:1.08;margin-bottom:10px}
/* Bewertungszeile: DIESELBE Aussenhuelle mit und ohne Bewertungen -
   gleiche min-height, gleicher Rand, gleiche Schriftgroesse. Nur so
   steht der Preis bei jedem Produkt gleich weit unter dem Titel. Wer
   hier spaeter etwas aendert, aendert es an .pd-bw und damit an beiden
   Zustaenden zugleich; ein eigener Rand nur fuer .pd-bw-leer waere
   genau der Sprung, den die Zeile verhindern soll. */
.pd-bw{display:flex;align-items:center;gap:8px;min-height:24px;margin:0 0 10px;
  font-size:14px;color:var(--soft);text-decoration:none}
.pd-bw b{color:var(--fg);font-size:15px}
a.pd-bw:hover b,a.pd-bw:hover span{color:var(--ak)}
.pd-bw-leer{opacity:.72}
/* Markenzeile. Das Logo wird EINGEPASST, nicht zugeschnitten - der
   Grund steht bei .katkopf-bild: «cover» kappt Firmenzeichen oben und
   unten ab. Der Rand traegt die Flaechenfarbe, damit ein Logo auf
   weissem Grund nicht wie ein Fehler aussieht. */
.pd-marke{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font-size:14px;color:var(--soft);text-decoration:none}
.pd-marke-w{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.pd-marke-name{color:var(--fg);font-weight:700}
/* Ohne Platte (6.9.2026): Ein Markenzeichen steht auf dem Seitengrund
   und nicht auf einem grauen Tablett - dieselbe Überlegung wie bei
   .katkopf-bild.ist-logo auf der Markenseite. Die Innenabstände
   bleiben: Sie halten den Ring beim Zeigen vom Logo weg. */
.pd-marke-logo{width:34px;height:34px;object-fit:contain;
  border-radius:var(--r,8px);box-sizing:border-box;padding:3px}
a.pd-marke:hover .pd-marke-name{color:var(--ak)}
/* Traegt die Zeile ein Logo, gibt es kein .pd-marke-name mehr - die
   Regel darueber liefe ins Leere und der Link zeigte beim Zeigen gar
   nichts. Ein Ring in der Akzentfarbe sagt dasselbe am Bild. */
a.pd-marke:hover .pd-marke-logo{box-shadow:0 0 0 2px var(--ak)}
.pd-preis{font-size:26px;font-weight:800;color:var(--fg);margin-bottom:18px;line-height:1.3}
.bw-band{padding:44px 0 10px}
.bw-band h2{font-size:24px;margin:0 0 18px}.bw-band h2 small{font-size:15px;opacity:.6;font-weight:600}
.bw-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.bw-karte{margin:0;border:1px solid var(--lin);border-radius:var(--r,16px);padding:16px 18px;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.bw-karte b{color:#fbbc05;letter-spacing:2px}.bw-karte b i{color:rgba(0,0,0,.15);font-style:normal}
.bw-karte blockquote{margin:8px 0;font-size:14.5px;line-height:1.55}
.bw-karte figcaption{font-size:12.5px;opacity:.65}
/* Rechnerfelder: eine Spalte, klare Beschriftung ueber dem Feld. Auf
   dem Telefon ist das die einzige Anordnung, die ohne Zoom lesbar bleibt. */
.pdk{display:flex;flex-direction:column;gap:12px;margin:16px 0 4px}
.pdk-masse{display:flex;gap:12px;flex-wrap:wrap}
.pdk-masse .pdk-feld{flex:1;min-width:120px}
.pdk-feld{display:flex;flex-direction:column;gap:5px;font-size:14px}
.pdk-feld>span{font-weight:600}
.pdk-feld>span small{font-weight:400;opacity:.65}
.pdk-feld input,.pdk-feld textarea{border:1.5px solid var(--fein);border-radius:var(--r,12px);
  padding:11px 13px;font:inherit;font-size:15px;background:var(--bg);color:var(--fg);width:100%}
.pdk-feld input:focus,.pdk-feld textarea:focus{outline:2px solid var(--ak);outline-offset:1px}
.pdk-feld textarea{resize:vertical;min-height:76px}
.pdk-pflicht{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ak);
  background:color-mix(in srgb,var(--ak) 14%,transparent);border-radius:99px;padding:2px 8px}
.pdk-schalter{display:flex;align-items:center;gap:9px;font-size:15px;cursor:pointer}
.pdk-schalter input{width:18px;height:18px;accent-color:var(--ak);cursor:pointer}
.pdk-datei{display:flex;flex-direction:column;gap:6px;font-size:13px}
.pdk-datei-knopf{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1.5px dashed var(--fein);border-radius:var(--r,12px);padding:13px 16px;font-weight:600;
  font-size:14.5px;transition:border-color .2s}
.pdk-datei-knopf:hover{border-color:var(--ak)}
.pdk-datei-name{opacity:.7;word-break:break-all}
.pd-gesamt{font-size:15px;font-weight:700;color:var(--ak);margin:-6px 0 2px;min-height:1px}
.wk-zusatz{border-top:1px solid var(--fein);padding:12px 0 4px;margin-top:6px}
.wk-zusatz>b{display:block;font-size:13px;margin-bottom:8px}
/* Eine Gruppe je Zeile: links, wofuer sie gilt, rechts die Wahl. Ein
   Auswahlfeld statt eines Haekchens, weil immer genau eine Moeglichkeit
   gilt - die erste ist die inbegriffene. */
.wk-zo-g{display:flex;align-items:center;gap:10px;font-size:14px;padding:6px 0}
.wk-zo-g label{flex:1;display:flex;flex-direction:column;cursor:pointer}
.wk-zo-g small{opacity:.65;font-size:12px}
/* Dieselbe Sache wie beim Lieferland - und dieselbe Stelle in der
   Schnellansicht des Warenkorbs, darum zusammen behoben. */
.wk-zo-g select{max-width:52%;padding:6px 8px;border:1px solid var(--lin);border-radius:8px;
  background:var(--flae);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.wk-zo-g select option{background:var(--flae);color:var(--fg)}
.wk-zo-g select:focus{outline:none;border-color:var(--ak)}
/* Mengenrabatt-Tafel: bewusst schmal (width:auto), damit sie neben dem
   Preis wie ein Hinweis wirkt und nicht wie die Datenblatt-Tabelle. */
.pd-staffel{width:auto;border-collapse:collapse;margin:12px 0 4px;font-size:14px;
  border:1px solid rgba(0,0,0,.1);border-radius:10px;overflow:hidden}
.pd-staffel caption{text-align:left;font-weight:600;font-size:13px;padding:0 0 6px;opacity:.75}
.pd-staffel th{text-align:left;font-weight:500;padding:7px 16px 7px 12px;white-space:nowrap;opacity:.8}
.pd-staffel td{padding:7px 12px;font-weight:600;white-space:nowrap}
.pd-staffel tr+tr{border-top:1px solid rgba(0,0,0,.07)}
.pd-staffel tr.aktiv{background:color-mix(in srgb,var(--ak) 12%,transparent)}
.pd-staffel .pd-staffel-pro{color:var(--ak);font-weight:700}
.wk-pos-staffel{color:var(--ak);font-weight:600}
.pd-details{width:100%;border-collapse:collapse;margin:18px 0 6px;font-size:15px}
.pd-details th{text-align:left;padding:9px 14px 9px 0;font-weight:600;white-space:nowrap;vertical-align:top;width:1%}
.pd-details tr+tr{border-top:1px solid rgba(0,0,0,.08)}
.pd-details td{padding:9px 0;opacity:.85}
.pd-text{margin-bottom:26px;white-space:pre-line}
/* Die lange Beschreibung. Eigener Abschnitt unter dem Kaufbereich, vor
   den Kundenstimmen - dort sucht sie, wer sich schon entschieden hat,
   noch etwas zu wissen. Die Textspalte ist auf 68 Zeichen begrenzt: Ein
   Absatz, der ueber die ganze Breite eines Bildschirms laeuft, wird
   nicht gelesen, er wird ueberflogen. */
.pdb{padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--lin)}.pdb h2{font-family:var(--disp);font-size:clamp(21px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 clamp(20px,3vw,34px)}.pdb-b{margin:0 0 clamp(22px,3vw,38px)}.pdb-b:last-child{margin-bottom:0}.pdb-b h3{font-size:17px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}.pdb-b p{margin:0;color:var(--soft);font-size:15.5px;line-height:1.7;white-space:pre-line;max-width:68ch}.pdb-b img{width:100%;height:auto;display:block;border-radius:var(--r,16px);border:1px solid var(--lin)}.pdb-zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,38px);align-items:center}.pdb-zwei.ist-rechts .pdb-bild{order:2}@media(max-width:760px){.pdb-zwei{grid-template-columns:1fr}.pdb-zwei.ist-rechts .pdb-bild{order:0}}.pdb-b video{width:100%;height:auto;display:block;border-radius:var(--r,16px);background:#000}
.pd-menge{display:flex;align-items:center;gap:0;border:1.5px solid var(--fein);border-radius:var(--r,12px);width:max-content;overflow:hidden;margin-bottom:16px}
/* «Nur einzeln verkaufen» (7.9.2026): steht anstelle des Mengenfeldes und
   nimmt darum denselben Platz nach unten ein. */
.pd-einzeln{margin:0 0 16px;font-size:14px;color:var(--text2,#666)}
.pd-menge button{width:44px;height:46px;border:none;background:none;font-size:20px;cursor:pointer;color:var(--fg)}
.pd-menge button:hover{background:var(--fein)}
.pd-menge input{width:52px;height:46px;border:none;background:none;text-align:center;font-size:16px;font-weight:700;color:var(--fg);-moz-appearance:textfield}
.pd-menge input::-webkit-outer-spin-button,.pd-menge input::-webkit-inner-spin-button{-webkit-appearance:none}
.pd-kauf{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pd-kauf-preis{display:inline-flex;flex-direction:column;justify-content:center;line-height:1.25}
.pd-kauf-preis b{font-size:19px;font-weight:800;color:var(--fg)}
.pd-kauf-preis small{font-size:12px;color:var(--soft);opacity:.85}
.pd-kauf .pk-knopf{font-size:15px;padding:16px 30px;border-radius:var(--rk,var(--r,13px))}
.pd-hinweis{margin-top:20px;font-size:13px;color:var(--soft);display:flex;gap:16px;flex-wrap:wrap}
.pd-hinweis span{display:inline-flex;align-items:center;gap:6px}
.zurueck{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;margin:26px 0 0}
/* Warenkorb-Drawer */
.wk-hinter{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:190;opacity:0;pointer-events:none;transition:opacity .3s}
.wk-hinter.auf{opacity:1;pointer-events:auto}
.wk{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);background:var(--bg);z-index:200;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .38s cubic-bezier(.16,1,.3,1);border-left:1px solid var(--fein)}
.wk.auf{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.2)}
.wk-kopf{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--fein)}
.wk-kopf b{font-size:17px;color:var(--fg)}
.wk-zu{background:none;border:1.5px solid var(--fein);border-radius:var(--rk,var(--r,10px));width:36px;height:36px;cursor:pointer;font-size:15px;color:var(--fg)}
.wk-liste{flex:1;overflow-y:auto;padding:14px 20px}
.wk-leer{text-align:center;padding:60px 20px;color:var(--soft)}
.wk-pos{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--fein)}
.wk-pos img{width:62px;height:62px;object-fit:cover;border-radius:var(--r,10px);border:1px solid var(--fein)}
.wk-pos-bild-leer{width:62px;height:62px;border-radius:var(--r,10px);background:var(--fein)}
.wk-pos b{display:block;font-size:14px;color:var(--fg);margin-bottom:3px}
.wk-pos small{font-size:13px;color:var(--soft)}
.wk-pos-menge{display:flex;align-items:center;gap:2px;margin-top:5px}
.wk-pos-menge button{width:24px;height:24px;border:1px solid var(--fein);background:none;border-radius:var(--rk,var(--r,7px));cursor:pointer;font-size:13px;color:var(--fg);line-height:1}
.wk-pos-menge span{min-width:26px;text-align:center;font-size:13.5px;font-weight:700;color:var(--fg)}
.wk-pos-preis{font-weight:800;color:var(--fg);font-size:14.5px;text-align:right}
.wk-pos-fort{opacity:.55}
.wk-weg{background:none;border:none;color:var(--soft);font-size:11.5px;cursor:pointer;text-decoration:underline;padding:0;margin-top:4px}
/* Mein Konto */
.konto-knopf{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--rk,var(--r,10px));
  color:inherit;text-decoration:none;transition:background .2s}
.konto-knopf:hover{background:var(--flae)}
.konto-punkt{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--ak)}
/* Der abgemeldete Zustand bleibt schmal (er besteht aus zwei Karten),
   das Dashboard darunter braucht die ganze Breite - darum steht die
   Grenze jetzt am Anmeldekasten und nicht mehr an der Seite. */
.ko{max-width:1120px;padding-top:38px;padding-bottom:70px}
#koAus{max-width:860px;margin:0 auto}
.ko h1{font-family:var(--disp,inherit);font-size:clamp(24px,4vw,32px);font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.ko h2{font-family:var(--disp,inherit);font-size:19px;font-weight:800;margin:0 0 6px}
.ko-hilfe{font-size:14px;color:var(--soft);line-height:1.55;margin:0 0 18px}
.ko-karten{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.ko-karte{border:1px solid var(--lin);border-radius:var(--r,16px);padding:26px;background:var(--flae)}
.ko-karte-reg{background:var(--bg)}
.ko label{display:block;font-size:13px;font-weight:700;margin:12px 0 5px}
.ko input{width:100%;padding:11px 13px;border:1px solid var(--lin);border-radius:var(--r,10px);background:var(--bg);
  color:var(--fg);font:inherit;font-size:14.5px}
.ko input:focus{outline:2px solid var(--ak);outline-offset:-1px;border-color:transparent}
.ko-btn{width:100%;margin-top:16px;padding:12px;border:0;border-radius:var(--rk,var(--r,10px));background:var(--ak);color:#fff;
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.ko-btn:hover{filter:brightness(1.08)}
.ko-btn:disabled{opacity:.6;cursor:default}
.ko-btn-zweit{background:transparent;color:var(--ak);border:1.5px solid var(--ak)}
.ko-btn-zweit:hover{background:var(--flae);filter:none}
.ko-link{display:block;width:100%;margin-top:10px;border:0;background:none;color:var(--soft);font:inherit;
  font-size:13px;text-decoration:underline;cursor:pointer;text-align:center}
.ko-link:hover{color:var(--ak)}
.ko-meldung{padding:10px 13px;border-radius:var(--r,9px);font-size:13.5px;line-height:1.5;margin:0 0 4px}
.ko-meldung.ist-fehler{background:rgba(192,57,43,.1);color:#c0392b}
.ko-meldung.ist-ok{background:rgba(46,125,50,.1);color:#2e7d32}
.ko-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
/* «Abmelden» steht seit dem Dashboard unten in der linken Spalte und
   nicht mehr neben der Ueberschrift - die Regel ist mitgezogen. */
.ko-spalte .ko-link{margin:0}
.ko-block{margin-top:38px;padding-top:28px;border-top:1px solid var(--fein)}
.ko-best{border:1px solid var(--lin);border-radius:var(--r,14px);margin-bottom:14px;overflow:hidden;background:var(--flae)}
.ko-best-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--fein);flex-wrap:wrap}
.ko-best-kopf b{font-size:14.5px;font-variant-numeric:tabular-nums}
.ko-best-kopf small{display:block;font-size:12.5px;color:var(--soft);margin-top:2px}
.ko-status{font-size:12px;font-weight:700;padding:4px 11px;border-radius:100px;background:var(--bg);border:1px solid var(--lin)}
.ko-status.ist-versendet,.ko-status.ist-abgeschlossen{background:rgba(46,125,50,.12);color:#2e7d32;border-color:transparent}
.ko-status.ist-erstattet,.ko-status.ist-teilerstattet,.ko-status.ist-storniert{background:rgba(192,57,43,.1);color:#c0392b;border-color:transparent}
.ko-best-body{padding:14px 18px}
.ko-pos{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:3px 0}
.ko-pos.ko-rab span:last-child{color:var(--ak);font-weight:700}
.ko-pos.ko-total{font-weight:800;font-size:15.5px;border-top:1px solid var(--fein);margin-top:7px;padding-top:9px}
.ko-dls{padding:14px 18px;border-top:1px solid var(--fein);background:var(--bg)}
.ko-dls b{display:block;font-size:13px;margin-bottom:8px}
.ko-dl{display:inline-flex;align-items:center;gap:6px;margin:0 8px 7px 0;padding:8px 13px;border-radius:var(--rk,var(--r,9px));
  background:var(--ak);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700}
.ko-dl:hover{filter:brightness(1.08)}
.ko-best-fuss{padding:11px 18px;border-top:1px solid var(--fein);font-size:13px}
.ko-best-fuss a{color:var(--soft);text-decoration:none}
.ko-best-fuss a:hover{color:var(--ak);text-decoration:underline}
/* Der Rücksende-Knopf sieht aus wie die Links daneben – er steht in
   derselben Zeile und tut dasselbe: eine Sache in Gang setzen. Ein
   Knopf im Knopf-Look risse die Zeile auseinander. */
.ko-ret-btn{background:none;border:0;padding:0;font:inherit;color:var(--soft);cursor:pointer}
.ko-ret-btn:hover{color:var(--ak);text-decoration:underline}
.ko-ret-btn[disabled]{opacity:.5;cursor:default}
.ko-ret{color:var(--ak);font-weight:700}
.ko-leer{text-align:center;padding:38px 20px;border:1px dashed var(--lin);border-radius:var(--r,14px)}
.ko-adr{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ko-adr>div:first-child,.ko-adr>div:nth-child(2){grid-column:1/-1}
/* ── Das Kundendashboard: links die Spalte, rechts eine Tafel ──────
   DIE SPALTE KLEBT, ABER NIE UNTER ETWAS ANDEREM. Ueber dem Laden
   stehen zwei Dinge, die selbst kleben: der Kopf (header{top:0}, rund
   66px hoch) und - nur beim Admin-Konto - das Band (44px, fest, siehe
   pxaShopAdminBandCss). Der Abstand steht darum in EINER Variablen; die
   Zeile darunter zaehlt die 44px des Bandes dazu, sobald body die
   Klasse traegt. Zwei Zahlen an zwei Stellen liefen beim naechsten
   Umbau des Kopfes auseinander.
   AUF SCHMALEN SCHIRMEN klebt gar nichts (siehe die Medienregel unten):
   Eine feste Spalte neben dem Inhalt ist auf dem Handy kein Menue,
   sondern ein halber Bildschirm ohne Inhalt. Dort wird aus der Spalte
   eine Reihe, die man seitlich schiebt. */
.ko-dash{--ko-oben:82px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
body.hat-adminband .ko-dash{--ko-oben:126px}
.ko-spalte{position:sticky;top:var(--ko-oben);display:flex;flex-direction:column;gap:18px;
  border:1px solid var(--lin);border-radius:var(--r,16px);padding:22px 18px;background:var(--flae)}
.ko-profil{text-align:center;min-width:0}
.ko-avatar{position:relative;width:92px;height:92px;margin:0 auto 12px;border-radius:50%;overflow:hidden;
  background:var(--ak);color:var(--akT);display:grid;place-items:center;
  font-size:30px;font-weight:800;letter-spacing:.5px}
.ko-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ko-profil-name{font-size:15.5px;font-weight:800;margin:0 0 3px;overflow-wrap:anywhere}
.ko-profil-mail{font-size:12.5px;color:var(--soft);margin:0;overflow-wrap:anywhere}
.ko-menue{display:flex;flex-direction:column;gap:2px}
.ko-mp{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:14px;
  font-weight:700;color:var(--fg);padding:10px 12px;border-radius:var(--rk,var(--r,9px));cursor:pointer}
.ko-mp:hover{background:var(--bg)}
.ko-mp.aktiv{background:var(--ak);color:var(--akT)}
.ko-inhalt{min-width:0}
.ko-inhalt .ko-kopf{margin-bottom:18px}
.ko-tafel>h2:first-child{margin-bottom:10px}
.ko-kz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 32px}
.ko-kz-karte{border:1px solid var(--lin);border-radius:var(--r,14px);padding:17px 18px;background:var(--flae)}
.ko-kz-wort{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--soft);margin:0 0 7px}
.ko-kz-zahl{font-family:var(--disp,inherit);font-size:clamp(19px,2.4vw,25px);font-weight:800;margin:0;
  letter-spacing:-.02em;overflow-wrap:anywhere}
.ko-tab-rand{overflow-x:auto}
.ko-tab{width:100%;border-collapse:collapse;font-size:14px}
.ko-tab th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--soft);padding:0 14px 9px 0;border-bottom:1px solid var(--lin);white-space:nowrap}
.ko-tab td{padding:12px 14px 12px 0;border-bottom:1px solid var(--fein);vertical-align:middle}
.ko-tab tr:last-child td{border-bottom:0}
.ko-tab td b{font-variant-numeric:tabular-nums}
.ko-mini{border:1.5px solid var(--ak);background:transparent;color:var(--ak);font:inherit;font-size:13px;
  font-weight:700;padding:7px 14px;border-radius:var(--rk,var(--r,9px));cursor:pointer;white-space:nowrap}
.ko-mini:hover{background:var(--flae)}
.ko-dat{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--lin);border-radius:var(--r,12px);padding:13px 16px;margin-bottom:10px;background:var(--flae)}
.ko-dat-txt{min-width:0}
.ko-dat-txt b{display:block;font-size:14.5px;overflow-wrap:anywhere}
.ko-dat-txt small{display:block;font-size:12.5px;color:var(--soft);margin-top:2px;overflow-wrap:anywhere}
.ko-dat .ko-dl{margin:0;flex:0 0 auto}
/* ── Vorlagen & Datenblätter: Suchzeile, Gruppen, Karten ──────────
   Eine Liste war richtig, solange die Seite ein Dutzend Dateien
   trug. Seit die Datenblätter der Produkte von selbst hineinkommen
   sind es bei einem Druckladen schnell hundert - und hundert Zeilen
   untereinander sind kein Nachschlagewerk mehr. Darum Karten in
   Gruppen (eine je Kategorie) und eine Suchzeile darüber.
   Gefiltert wird mit «hidden», nicht mit display: Was die Suche
   ausblendet, ist auch für Tastatur und Vorleser weg. */
.ko-vsuche{position:relative;margin:0 0 20px}
.ko-vsuche input{width:100%;font:inherit;font-size:14.5px;padding:12px 14px 12px 42px;
  border:1px solid var(--lin);border-radius:var(--r,12px);background:var(--bg);color:inherit}
.ko-vsuche input:focus{outline:2px solid var(--ak);outline-offset:1px}
.ko-vsuche svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--soft);pointer-events:none}
.ko-vgruppe{margin:0 0 26px}
.ko-vgruppe h3{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--soft);margin:0 0 12px}
.ko-vraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:14px}
.ko-vk{display:flex;flex-direction:column;gap:7px;border:1px solid var(--lin);
  border-radius:var(--r,12px);padding:14px;background:var(--bg)}
.ko-vk-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r,9px);
  background:var(--flae);color:var(--ak);flex:0 0 auto}
.ko-vk-ic svg{width:18px;height:18px}
.ko-vk b{font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.ko-vk small{font-size:12px;color:var(--soft)}
.ko-vk .ko-dl{margin:6px 0 0;align-self:flex-start}
.ko-vk[hidden],.ko-vgruppe[hidden]{display:none}
.ko-bild{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;margin:0 0 18px}
.ko-bild .ko-avatar{margin:0;flex:0 0 auto}
.ko-bild-rechts{flex:1 1 260px;min-width:0}
.ko-bild-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ko-bild-knoepfe .ko-btn{width:auto;margin:0}
.ko-angaben{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0 0 16px;font-size:14.5px}
.ko-angaben dt{font-size:13px;font-weight:700;color:var(--soft)}
.ko-angaben dd{margin:0;overflow-wrap:anywhere}
/* Zwei-Faktor: Einrichten, Rueckfallcodes, Verwalten.
   «.ko .ko-…» und nicht «.ko-…» allein: Weiter oben stehen «.ko label»
   und «.ko input» - das ist je ein Klassen- UND ein Typwaehler und
   schlaegt eine einzelne Klasse. Ohne den Vorsatz saesse die Ankreuz-
   Zeile untereinander statt nebeneinander, und das Kaestchen waere
   ueber die ganze Breite gezogen. */
.ko-zw-qr{text-align:center;margin:0 0 14px}
.ko-zw-qr img{display:inline-block;width:184px;height:184px;background:#fff;padding:8px;
  border:1px solid var(--lin);border-radius:var(--r,12px)}
.ko-zw-geheim{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;letter-spacing:2px;
  background:var(--flae);border-radius:var(--r,12px);padding:15px;text-align:center;word-break:break-all}
.ko-zw-codes{border:2px solid var(--ak);border-radius:var(--r,14px);padding:18px 20px;margin:18px 0}
.ko-zw-codes b{display:block;font-size:15px;margin-bottom:6px}
.ko-zw-liste{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;line-height:2;letter-spacing:1px}
.ko-zw-stand{font-size:16px;font-weight:800;margin:0 0 4px}
.ko-zw-reihe{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ko-zw-reihe .ko-btn{flex:1 1 190px;width:auto;margin-top:0}
.ko-btn-weg{background:rgba(192,57,43,.1);color:#c0392b;border:1.5px solid rgba(192,57,43,.35)}
.ko-btn-weg:hover{background:rgba(192,57,43,.16);filter:none}
.ko .ko-check{display:flex;align-items:center;gap:9px;margin:14px 0 0;font-size:13.5px;font-weight:600}
.ko .ko-check input{width:auto;flex:0 0 auto;margin:0;padding:0}
@media(max-width:760px){.ko-karten{grid-template-columns:1fr}.ko-adr{grid-template-columns:1fr}}
/* Schmale Schirme: aus der Spalte wird eine Zeile, aus dem Menue eine
   Reihe, die man seitlich schiebt. Nichts klebt mehr - eine klebende
   Spalte nimmt hier den halben Bildschirm und der Inhalt haette keinen. */
@media(max-width:900px){
  .ko-dash{grid-template-columns:minmax(0,1fr);gap:24px}
  .ko-spalte{position:static;top:auto;padding:16px}
  .ko-profil{display:flex;align-items:center;gap:14px;text-align:left}
  .ko-avatar{width:56px;height:56px;margin:0;font-size:19px}
  .ko-menue{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .ko-mp{flex:0 0 auto;white-space:nowrap;background:var(--bg)}
  .ko-spalte .ko-link{align-self:flex-start;width:auto}
}
@media(max-width:620px){.ko-kz{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:26px}}
/* Empfehlungen (Cross-/Upsell) */
.xs{margin:64px 0 8px;border-top:1px solid var(--fein);padding-top:38px}
.xs-titel{font-family:var(--disp,inherit);font-size:clamp(21px,3vw,27px);font-weight:800;margin:0 0 22px;letter-spacing:-.02em}
.xs-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.xs-karte{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  border:1px solid var(--lin);border-radius:var(--r,14px);padding:12px;background:var(--flae);
  transition:transform .25s cubic-bezier(.2,.9,.3,1),border-color .25s,box-shadow .25s}
.xs-karte:hover{transform:translateY(-3px);border-color:var(--ak);box-shadow:0 12px 30px rgba(0,0,0,.09)}
.xs-bild{display:block;aspect-ratio:1;border-radius:var(--r,10px);overflow:hidden;background:var(--bg);
  display:grid;place-items:center}
.xs-bild img{width:100%;height:100%;object-fit:cover;display:block}
.xs-name{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.xs-preis{font-size:14.5px;font-weight:800;color:var(--ak);margin-top:auto}
.xs-preis small{font-size:.76em;font-weight:600;color:var(--soft);margin-right:.1em}
@media(max-width:900px){.xs-raster{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:420px){.xs{margin-top:44px}}
.wk-fuss{border-top:1px solid var(--fein);padding:16px 20px 20px}
/* Der Gutschein-Block ist ein eigenes Bedienelement zwischen der
   Warenliste und den Summen - er braucht auf BEIDEN Seiten Luft.
   Gemeldet am 8.9.2026 mit einem Bild: unten klebten die Summen an
   der Eingabe (12 px), oben standen 16 px Polster der Fusszeile.
   Nachgebaut und gemessen, nicht geschaetzt. */
.wk-gut{margin:2px 0 18px}
.wk-gut-ein{display:flex;gap:7px}
.wk-gut-ein input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--lin);border-radius:var(--r,9px);
  background:var(--bg);color:var(--fg);font:inherit;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
.wk-gut-ein input:focus{outline:2px solid var(--ak);outline-offset:-1px;border-color:transparent}
.wk-gut-ein button{flex:0 0 auto;padding:9px 14px;border:1px solid var(--lin);border-radius:var(--rk,var(--r,9px));
  background:var(--flae);color:var(--fg);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.wk-gut-ein button:hover{border-color:var(--ak);color:var(--ak)}
.wk-gut-ein button:disabled{opacity:.6;cursor:default}
.wk-gut-ok{display:flex;justify-content:space-between;align-items:center;gap:9px;
  padding:9px 11px;border-radius:var(--r,9px);background:var(--flae);font-size:13.5px;font-weight:700;color:var(--ak)}
.wk-gut-ok button{border:0;background:none;padding:0;color:var(--soft);font:inherit;font-size:12.5px;
  font-weight:600;text-decoration:underline;cursor:pointer}
.wk-gut-fehler{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:#c0392b}
.wk-zeile.wk-rabatt span:last-child{color:var(--ak);font-weight:700}
.wk-zeile{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px}
/* Die Länderwahl sitzt in derselben Zeilenreihe wie Zwischensumme und
   Versand – links das Wort, rechts der Wert. Das Auswahlfeld übernimmt
   darum die Stelle des Werts und nicht die ganze Breite. */
.wk-land{align-items:center;gap:10px}
/* Versand oder Abholung: zwei gleich breite Knöpfe. Die Wahl steht
   ÜBER den Beträgen – sie entscheidet, ob es überhaupt einen Versand
   gibt, und gehört darum nicht zwischen die Summen. */
.wk-abhol{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 8px}
.wk-abhol label{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--fein);
  border-radius:10px;font-size:13.5px;cursor:pointer}
.wk-abhol label:has(input:checked){border-color:var(--ak);background:rgba(124,58,237,.06);font-weight:600}
.wk-abhol-ort{font-size:13px;line-height:1.5;padding:9px 11px;border-radius:10px;
  background:rgba(124,58,237,.06);margin-bottom:9px}
.wk-abhol-ort small{display:block;margin-top:4px;opacity:.75}
/* Einmalig oder im Abo. Untereinander statt nebeneinander: Die zweite
   Zeile trägt den Takt («jeden Monat»), und der gehört unter das Wort,
   zu dem er gehört – nicht in eine zweite Spalte, in der er bei
   schmalem Fenster umbricht. */
.wk-abo{display:grid;gap:8px;margin:0 0 12px}
.wk-abo label{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--fein);
  border-radius:10px;font-size:13.5px;cursor:pointer}
.wk-abo label:has(input:checked){border-color:var(--ak);background:rgba(124,58,237,.06);font-weight:600}
.wk-abo label small{margin-left:auto;font-weight:600;opacity:.8;font-size:12.5px}
.wk-abo-text{margin:0;font-size:12.5px;line-height:1.5;opacity:.8}
/* ── KEIN FEST VERDRAHTETES WEISS AN EINEM BEDIENELEMENT ────────
   Hier stand background:#fff neben color:inherit. In einem dunklen
   Laden erbt die Schrift HELL - helle Schrift auf weissem Grund,
   und das gewaehlte Lieferland war nicht zu lesen, ohne den Waehler
   zu oeffnen. Gemeldet am 8.9.2026, im Nachbau reproduziert.
   Jetzt dieselben Flaechenfarben wie beim Knopf daneben, also in
   jedem Design stimmig. Die option-Zeile ist kein Beiwerk: Ohne sie
   malt Chrome die aufgeklappte Liste weiter auf dem Systemgrund. */
.wk-land select{max-width:58%;padding:5px 8px;border:1px solid var(--lin);border-radius:8px;
  background:var(--flae);font:inherit;font-size:13.5px;color:var(--fg)}
.wk-land select option{background:var(--flae);color:var(--fg)}
.wk-zeile.total{font-size:17px;font-weight:800;color:var(--fg);margin:10px 0 14px}
.wk-checkout{width:100%;display:inline-flex;justify-content:center;align-items:center;gap:9px;background:var(--ak);color:var(--akT);font-weight:800;font-size:15.5px;padding:16px;border-radius:var(--rk,var(--r,13px));border:none;cursor:pointer;transition:filter .2s,transform .18s}
.wk-checkout:hover{filter:brightness(1.08);transform:translateY(-2px)}
.wk-checkout:disabled{opacity:.5;cursor:wait;transform:none}
.wk-za{display:flex;gap:14px;margin:2px 0 12px;font-size:14px;flex-wrap:wrap}
.wk-za label{display:flex;align-items:center;gap:6px;cursor:pointer}
.wk-radr{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.wk-radr input{padding:11px 12px;border:1px solid var(--lin);border-radius:var(--r,9px);background:var(--bg);color:var(--fg);font:inherit;font-size:14px}
.wk-radr input:focus{outline:2px solid var(--ak);outline-offset:-1px;border-color:transparent}
.wk-radr-po{display:flex;gap:8px}
.wk-radr-po #rgPlz{max-width:100px}
.wk-radr-po #rgOrt{flex:1;min-width:0}
/* Die hinterlegte Lieferadresse im Korb. Sie steht da, weil Stripe sie
   nicht mehr erhebt - wer sie hier nicht sieht, sieht sie nirgends. */
.wk-lief{border-top:1px solid var(--fein);padding:12px 0 4px;margin-top:6px}
.wk-lief>b{display:block;font-size:13px;margin-bottom:6px}
.wk-lief-zeile{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45}
.wk-lief-text{flex:1;min-width:0;white-space:pre-line}
.wk-lief-knopf{background:none;border:0;padding:0;color:var(--ak);font:inherit;font-size:13px;
  text-decoration:underline;cursor:pointer;flex:none}
.wk-lief-fehlt{margin:0 0 8px;font-size:13px;color:#b4232a}
.wk-zahlarten{display:flex;justify-content:center;gap:10px;margin-top:11px;font-size:11.5px;color:var(--soft);align-items:center}
.wk-zahlarten b{border:1px solid var(--fein);border-radius:var(--r,6px);padding:2px 8px;font-size:10.5px;letter-spacing:.6px;color:var(--fg)}
/* Danke */
.sdanke{max-width:620px;margin:0 auto;text-align:center;padding:90px 20px 110px}
/* ── Die Bewertungsseite im Laden (7.9.2026) ─────────────────────────
   Sie traegt die Schrift, die Farbe und den Rahmen des Ladens - genau
   das war der Grund, sie ueberhaupt hierher zu holen. Die Sterne stehen
   im HTML rueckwaerts und werden hier umgedreht: Nur so faerbt
   «label:hover ~ label» nach LINKS, und das ist die Richtung, in der
   man Sterne liest. */
.bwseite{max-width:560px;margin:0 auto;padding:70px 20px 100px}
.bwseite h1{font-size:26px;margin:0 0 8px}
.bwseite p{color:var(--gr,#6b7280);line-height:1.6;margin:0 0 18px}
.bwseite input[type=text],.bwseite textarea{width:100%;box-sizing:border-box;padding:11px 13px;
  border:1px solid var(--li,#e5e7eb);border-radius:var(--r,10px);font:inherit;margin:0 0 12px;
  background:var(--bg,#fff);color:inherit}
.bw-sterne{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin:0 0 16px}
.bw-sterne input{display:none}
.bw-sterne label{font-size:34px;line-height:1;color:var(--li,#d8d3ea);cursor:pointer;
  transition:color .12s}
.bw-sterne input:checked ~ label,.bw-sterne label:hover,.bw-sterne label:hover ~ label{color:#fbbc05}
.bwseite .pk-knopf{width:100%;justify-content:center}
.sdanke .kreis{width:76px;height:76px;border-radius:50%;background:var(--ak);color:var(--akT);display:grid;place-items:center;font-size:34px;margin:0 auto 24px}
.sdanke h1{font-size:clamp(28px,4vw,40px);margin-bottom:12px}
.sdanke .ref{display:inline-block;margin:16px 0 8px;border:1.5px dashed var(--fein);border-radius:var(--r,12px);padding:10px 18px;font-weight:800;color:var(--fg);letter-spacing:.5px}
/* Die Einladung ins Konto steht als ruhiger Kasten unter der
   Bestellnummer - nicht als zweiter grosser Knopf neben «Weiter
   einkaufen». Der Kauf ist durch; das hier ist ein Angebot und keine
   Aufgabe. */
.sd-konto{margin:26px auto 0;max-width:460px;text-align:left;padding:18px 20px;
  border:1px solid var(--fein);border-radius:var(--r,14px);background:var(--flae)}
.sd-konto b{display:block;margin-bottom:6px;font-size:16px;color:var(--fg)}
.sd-konto p{font-size:13.5px;line-height:1.55;color:var(--soft);margin-bottom:14px}
.sd-konto .pk-knopf{display:inline-flex}
/* ── DER KORB ALS SEITE (6.9.2026) ──────────────────────────────
   Dasselbe Markup wie in der Schublade, darum dieselben Klassen. Hier
   wird nur zurueckgenommen, was zur Schublade gehoert: die feste
   Position, die Breite, der Schatten. */
.wk-seite{max-width:640px;margin:0 auto;padding:34px 0 60px}
.wk-seite h1{font-size:clamp(26px,3.4vw,36px);margin-bottom:20px}
.wk-seite-korb{border:1px solid var(--fein);border-radius:var(--r,16px);
  padding:20px 22px;background:var(--bg)}
.wk-seite-korb .wk-liste{max-height:none;overflow:visible;padding:0}
.wk-seite-korb .wk-fuss{padding:0}
.wk-seite-weiter{margin-top:18px;text-align:center;font-size:14px}
.wk-seite-weiter a{color:var(--soft);text-decoration:none}
.wk-seite-weiter a:hover{color:var(--ak)}
@media(max-width:620px){.wk-seite{padding:20px 0 44px}
  .wk-seite-korb{border:none;padding:0}}
/* Der Hinweis auf die fehlende Adresse. Ruhig, nicht rot: Es ist keine
   Fehlermeldung, sondern eine Bitte - und sie steht ueber allem
   anderen, weil sie zuerst gelesen werden soll. */
.ko-tipp{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin:0 0 20px;padding:16px 18px;border:1px solid var(--fein);border-radius:var(--r,14px);
  background:var(--flae)}
.ko-tipp b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--fg)}
.ko-tipp p{margin:0;font-size:13.5px;line-height:1.55;color:var(--soft);max-width:56ch}
.ko-tipp-knopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ko-tipp .ko-btn{margin:0;width:auto;padding:10px 18px}
.shopfuss{position:relative;margin-top:64px;background:var(--fg);overflow:hidden}
.shopfuss::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ak) 75%,var(--bg)),transparent)}
.shopfuss .sf-glow{position:absolute;top:-170px;left:50%;transform:translateX(-50%);width:min(760px,92%);height:340px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--ak) 30%,transparent),transparent 68%);pointer-events:none}
.shopfuss .wrap{position:relative;padding-top:54px;padding-bottom:0}
.sf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;padding-bottom:40px}
.sf-name{font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:0;line-height:1.1;color:color-mix(in srgb,var(--bg) 94%,#fff);margin-bottom:11px}
.sf-slogan{font-size:14px;line-height:1.6;max-width:34ch;margin-bottom:18px;color:color-mix(in srgb,var(--bg) 60%,transparent)}
.sf-kontakt{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.sf-kontakt a,.sf-kontakt span{color:color-mix(in srgb,var(--bg) 66%,transparent);transition:color .2s}
.sf-kontakt a:hover{color:var(--bg)}
.sf-titel{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:color-mix(in srgb,var(--ak) 52%,var(--bg));margin-bottom:14px}
.sf-spalte p{margin:0 0 9px;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--bg) 62%,transparent)}
.sf-spalte a{color:color-mix(in srgb,var(--bg) 70%,transparent);transition:color .2s}
.sf-spalte a:hover{color:var(--bg)}
.sf-unten{border-top:1px solid color-mix(in srgb,var(--bg) 15%,transparent);padding:18px 0 22px;display:flex;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;font-size:12.5px;color:color-mix(in srgb,var(--bg) 55%,transparent)}
.sf-unten a{color:color-mix(in srgb,var(--bg) 75%,transparent);text-decoration:none}
.sf-unten a:hover{color:var(--bg);text-decoration:underline}
@media(max-width:760px){.shopfuss .wrap{padding-top:44px}.sf-grid{grid-template-columns:1fr 1fr;gap:28px 22px;padding-bottom:32px}.sf-marke{grid-column:1/-1}.sf-unten{flex-direction:column;gap:7px}}
@media(max-width:440px){.sf-grid{grid-template-columns:1fr}}
.pxa-cb{position:fixed;left:50%;bottom:18px;transform:translate(-50%,16px);z-index:260;width:min(520px,calc(100vw - 28px));background:#16161f;color:#d9d9e6;border:1px solid rgba(255,255,255,.14);border-radius:var(--r,18px);box-shadow:0 24px 70px rgba(0,0,0,.45);padding:18px 20px 16px;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;font-size:13.5px;line-height:1.6}
.pxa-cb.da{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.pxa-cb h3{margin:0 0 6px;font-size:15.5px;font-weight:800;color:#fff}
.pxa-cb p{margin:0 0 12px;color:#b9b9cc}
.pxa-cb p a{color:#fff;text-decoration:underline}
.pxa-cb-reihe{display:flex;gap:9px;flex-wrap:wrap}
.pxa-cb button{font:inherit;font-weight:800;font-size:13px;border-radius:var(--rk,var(--r,11px));cursor:pointer;padding:10px 16px}
.pxa-cb-ja{border:none;background:#fff;color:#111}
.pxa-cb-nein{border:1.5px solid rgba(255,255,255,.28);background:none;color:#fff}
.toast{position:fixed;left:50%;bottom:26px;translate:-50% 0;background:var(--fg);color:var(--bg);font-size:14px;font-weight:600;border-radius:var(--r,12px);padding:13px 22px;z-index:300;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;pointer-events:none;max-width:90vw}
.toast.da{opacity:1;transform:none}
/* ── Bewertungen ─────────────────────────────────────────────── */
.bw{padding:clamp(34px,5vw,64px) 0 clamp(20px,3vw,36px);border-top:1px solid var(--lin)}
.bw-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.bw-kopf h2{font-size:clamp(21px,2.6vw,30px)}
.bw-schnitt{display:inline-flex;align-items:baseline;gap:9px;font-size:14px;color:var(--soft)}
.bw-schnitt b{color:var(--fg);font-size:17px}
.bw-sterne{color:#F5A623;letter-spacing:1px;font-size:15px;white-space:nowrap}
.bw-sterne i{color:var(--lin);font-style:normal}
.bw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.bw-karte{background:var(--flae);border-radius:var(--r,16px);padding:18px 20px 16px}
.bw-karte p{margin:9px 0 12px;color:var(--soft);font-size:14.5px;line-height:1.6}
.bw-karte footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--soft)}
.bw-karte footer b{color:var(--fg);font-weight:600}
/* Zehn sichtbar, der Rest hinter dem Schalter. «ist-gekuerzt» setzt das
   Skript und nicht das Blatt: Ohne Skript gibt es den Schalter nicht
   (er steht mit «hidden» im HTML), und dann muessen alle Stimmen da
   sein - sonst laegen zehn davon hinter einem toten Knopf. */
.bw-grid.ist-gekuerzt .bw-weiter{display:none}
.bw-mehr-zeile{margin:22px 0 0;text-align:center}
.bw-mehr{font:inherit;font-weight:700;font-size:13.5px;color:var(--fg);background:none;
  border:1.5px solid var(--lin);border-radius:var(--rk,var(--r,11px));padding:12px 24px;cursor:pointer;
  transition:border-color .18s,background .18s}
.bw-mehr:hover{border-color:var(--fg);background:var(--flae)}
/* ── Klebende Kaufleiste ─────────────────────────────────────── */
.pd-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(105%);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(16px);border-top:1px solid var(--lin);padding:10px clamp(14px,4vw,40px)}
.pd-sticky.da{transform:none}
.pd-sticky-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pd-sticky-wer{display:flex;align-items:center;gap:12px;min-width:0}
.pd-sticky-wer img{width:42px;height:42px;border-radius:var(--r,10px);object-fit:cover;flex:none;background:var(--flae)}
.pd-sticky-wer b{display:block;font-size:14.5px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.pd-sticky-preis{font-size:13.5px;color:var(--soft)}
.pd-sticky .pk-knopf{flex:none;padding:12px 24px;font-size:14.5px}
@media(max-width:520px){.pd-sticky-wer img{display:none}}
@media(prefers-reduced-motion:reduce){.pd-sticky{transition:none}}
@media(max-width:820px){.pd{grid-template-columns:1fr}.pd-galerie{position:static}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;translate:0 0;transition:none}}

/* ══════════════════════════════════════════════════════════════════
   VIER EIGENSTÄNDIGE SHOP-LAYOUTS – aktiviert über <body data-shop="…">
   ══════════════════════════════════════════════════════════════════ */

/* ── STUDIO: weiss, fast schwarz, viel Luft ────────────────────────
   Der Laden soll wie ein Produkt wirken, nicht wie ein Prospekt. Drei
   Regeln tragen das:
   1. Eine Flaeche, eine Linie, eine Schrift. Farbe kommt nur aus den Fotos.
   2. Schaltflaechen als Pillen in Fast-Schwarz - sie lesen sich wie Text,
      nicht wie Werbung. Der zweite Weg ist ein blauer Textlink.
   3. Luft statt Rahmen: Karten haben keinen Strich, sondern eine ruhige
      Graupartie, und der Abstand macht die Ordnung.
   Schriftgroessen und Laufweiten sind eng gesetzt - das ist der halbe
   Eindruck. */
[data-shop="studio"]{--r:18px;--soft:#6E6E73;--stLeise:#86868B;--stBlau:#0071E3}
[data-shop="studio"] body,[data-shop="studio"]{letter-spacing:-.01em}
[data-shop="studio"] h1,[data-shop="studio"] h2,[data-shop="studio"] h3{font-family:inherit;font-weight:600;letter-spacing:-.028em}

/* Kopf: durchscheinend und flach, wie eine Leiste, nicht wie ein Balken */
/* Die Studio-Vorlage war auf ihren eigenen weissen Grund geschrieben:
   Kopf, Band, Fuss und die Bildflaeche der Karten standen als feste
   Helligkeit im Stil. Mit dem neuen Grundton «dunkel» blieben sie weiss -
   weisse Karten auf schwarzem Grund. Dieselben Werte, nur als Variable:
   im hellen Grundton aendert sich nichts (Studios --bg IST weiss), im
   dunklen ziehen sie mit. */
[data-shop="studio"] header{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--lin)}
[data-shop="studio"] .kopf{padding:0 clamp(18px,4vw,40px);min-height:54px}
[data-shop="studio"] .marke{font-size:19px;font-weight:600}
[data-shop="studio"] .marke small{font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--stLeise)}
[data-shop="studio"] .kopf-rechts{gap:20px}
[data-shop="studio"] .zur-site{font-size:12.5px;font-weight:400;color:var(--stLeise)}
[data-shop="studio"] .wk-knopf,[data-shop="studio"] .konto-knopf{border:none;width:34px;height:34px;color:var(--fg)}
[data-shop="studio"] .wk-knopf:hover,[data-shop="studio"] .konto-knopf:hover{opacity:.55}
[data-shop="studio"] .wk-zahl{background:var(--stBlau);color:#fff;font-weight:600;font-size:10.5px;top:-2px;right:-4px}

/* Ankuendigung: helle Leiste, kein schwarzer Streifen */
[data-shop="studio"] .band{background:var(--flae);color:var(--fg);font-weight:400;font-size:12.5px;padding:11px 16px}

/* Buehne: mittig, gross, ruhig */
/* Die Buehne muss in 840 Pixel Hoehe VOLLSTAENDIG stehen. So hoch ist
   der Rahmen der Vorlagen-Kachel auf shop.php (1280x840, danach wird
   skaliert) - und so hoch ist auch ein Laptop-Fenster. Vorher endete das
   Bild bei 1149 und wurde mitten durchgeschnitten: auf der Kachel sah das
   nach Fehler aus, nicht nach Absicht. */
[data-shop="studio"] .hero{grid-template-columns:1fr;text-align:center;gap:clamp(18px,2.4vw,30px);padding:clamp(30px,3.4vw,46px) 0 clamp(20px,2.6vw,34px)}
[data-shop="studio"] .hero-text{max-width:none;margin:0 auto}
[data-shop="studio"] .hero-eyebrow{margin:0 auto 6px;font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--stLeise)}
[data-shop="studio"] .hero-eyebrow::before{display:none}
[data-shop="studio"] .hero h1{font-family:inherit;font-size:clamp(34px,4.8vw,62px);font-weight:600;letter-spacing:-.035em;line-height:1.04;max-width:16ch;margin:0 auto 12px}
[data-shop="studio"] .hero-intro{font-size:clamp(16px,1.4vw,19px);line-height:1.45;max-width:46ch;margin:0 auto 20px;color:var(--soft)}
[data-shop="studio"] .hero-cta{border-radius:var(--rk,var(--r,999px));padding:12px 24px;font-size:16px;font-weight:400;letter-spacing:-.01em;box-shadow:none}
[data-shop="studio"] .hero-cta:hover{transform:none;filter:none;opacity:.85}
/* Bis 5.9.2026 stand hier «height:min(40vh,430px)» mit object-fit:cover.
   Ein 1600x500-Banner wurde damit auf 430px hochgezogen und oben wie
   unten abgeschnitten. Jetzt gibt das Bild die Hoehe vor; die Deckelung
   bleibt, damit ein hochformatiges Foto die Buehne nicht sprengt. */
[data-shop="studio"] .hero-bild-rahmen{aspect-ratio:var(--heroAr,16/7);height:auto;max-height:min(76vh,720px);border-radius:var(--r,24px);background:var(--flae);box-shadow:none;max-width:1000px;margin:0 auto}
[data-shop="studio"] .hero-bild-rahmen img{object-fit:contain}
[data-shop="studio"] .hero-bild-tag{left:50%;translate:-50% 0;bottom:22px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.10);padding:9px 18px;display:inline-flex;gap:12px;align-items:baseline;max-width:none;white-space:nowrap}
[data-shop="studio"] .hero-bild-tag b{font-size:13.5px;font-weight:500}
[data-shop="studio"] .hero-bild-tag span{font-size:13.5px;font-weight:400;color:var(--soft)}
[data-shop="studio"] .hero-orb{display:none}

/* Vertrauensleiste: eine feine Zeile, keine Kaesten */
[data-shop="studio"] .trust{border-top:1px solid var(--lin);border-bottom:none;gap:clamp(18px,4vw,56px);padding:16px clamp(18px,4vw,40px);margin:26px 0 0}
[data-shop="studio"] .trust-item{font-size:12.5px;font-weight:400;color:var(--stLeise)}
[data-shop="studio"] .trust-item b{font-weight:500;color:var(--soft)}
[data-shop="studio"] .trust-item svg{width:17px;height:17px;stroke:var(--stLeise)}

/* Sortiment: Flaeche statt Rahmen */
[data-shop="studio"] .shero{padding:clamp(48px,7vw,88px) 0 8px;text-align:center}
[data-shop="studio"] .shero h1{font-family:inherit;font-size:clamp(30px,4.4vw,48px);font-weight:600;letter-spacing:-.03em}
[data-shop="studio"] .shero p{font-size:18px;color:var(--soft);max-width:46ch;margin-inline:auto}
[data-shop="studio"] .pgrid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:clamp(20px,2.4vw,30px);padding:clamp(26px,4vw,44px) 0 clamp(64px,9vw,108px)}
[data-shop="studio"] .pk{border:none;border-radius:var(--r,20px);background:var(--flae);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[data-shop="studio"] .pk:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 18px 44px -22px rgba(0,0,0,.30)}
[data-shop="studio"] .pk-bild{aspect-ratio:1/1;background:var(--bg);border-bottom:none}
[data-shop="studio"] .pk-bild img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
[data-shop="studio"] .pk:hover .pk-bild img{transform:scale(1.03)}
[data-shop="studio"] .pk-info{padding:18px 20px 22px;gap:5px;text-align:center}
[data-shop="studio"] .pk-info h3{font-size:16.5px;font-weight:500;letter-spacing:-.015em}
[data-shop="studio"] .pk-preis{font-size:14.5px;font-weight:400;color:var(--soft)}
[data-shop="studio"] .pk-knopf{border-radius:var(--rk,var(--r,999px));font-weight:400;font-size:14px;letter-spacing:-.01em;padding:11px 20px;margin-top:6px}
[data-shop="studio"] .pk-knopf:hover{filter:none;opacity:.85;transform:none}
[data-shop="studio"] .kat-chip{border:none;background:var(--flae);border-radius:var(--r,999px);font-size:13.5px;font-weight:400;letter-spacing:-.01em;padding:9px 18px;color:var(--soft)}
[data-shop="studio"] .kat-chip.aktiv{background:var(--fg);color:var(--bg)}

/* Produktseite: Bild links gross auf Grau, Text rechts luftig */
[data-shop="studio"] .pd{gap:clamp(30px,5vw,72px)}
[data-shop="studio"] .pd-galerie img,[data-shop="studio"] .pd-haupt{border-radius:var(--r,22px);background:var(--flae)}
[data-shop="studio"] .pd-thumb{border-radius:var(--r,12px);border:1px solid transparent;background:var(--flae);width:64px;height:64px}
[data-shop="studio"] .pd-thumb.aktiv{border-color:var(--fg)}
[data-shop="studio"] .pd h1{font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:-.03em}
[data-shop="studio"] .pd-preis{font-size:22px;font-weight:400;color:var(--soft)}
[data-shop="studio"] .pd-knopf,[data-shop="studio"] .kasse-knopf{border-radius:var(--rk,var(--r,999px));font-weight:400;font-size:16px;letter-spacing:-.01em}

/* Warenkorb und Fusszeile im selben Ton */
[data-shop="studio"] .wk{border-radius:var(--r,20px 0 0 20px)}
[data-shop="studio"] .bw{border-top:1px solid var(--lin)}
[data-shop="studio"] .bw-karte{border-radius:var(--r,18px);background:var(--flae)}
[data-shop="studio"] .bw-karte footer b{font-weight:500}
[data-shop="studio"] .pd-sticky{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--lin)}
[data-shop="studio"] .pd-sticky .pk-knopf{border-radius:var(--rk,var(--r,999px))}
[data-shop="studio"] .shopfuss{background:var(--flae);color:var(--soft);border-top:none;padding-top:clamp(38px,5vw,60px)}
[data-shop="studio"] .shopfuss a{color:var(--soft)}
[data-shop="studio"] .shopfuss a:hover{color:var(--fg)}
[data-shop="studio"] .sf-glow{display:none}
[data-shop="studio"] .sf-name{font-size:17px;font-weight:600;color:var(--fg)}
[data-shop="studio"] .sf-titel{font-size:12px;font-weight:600;color:var(--fg);letter-spacing:-.005em}
[data-shop="studio"] .shopfuss,[data-shop="studio"] .shopfuss p{font-size:12.5px;line-height:1.9}

/* ── BOUTIQUE: edel, viel Weissraum, grosse Bilder, feine Serifen ── */
[data-shop="couture"] .shero{padding:76px 0 46px}
[data-shop="couture"] .shero h1{font-size:clamp(40px,6vw,72px);font-weight:600;letter-spacing:-.01em}
[data-shop="couture"] .shero p{font-size:18px;font-style:italic;font-family:var(--disp)}
[data-shop="couture"] .pgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:44px 34px;padding:40px 0 96px}
[data-shop="couture"] .pk{border:none;border-radius:var(--r,0);background:transparent;text-align:center}
[data-shop="couture"] .pk:hover{transform:none;box-shadow:none}
[data-shop="couture"] .pk-bild{border-radius:var(--r,2px);background:var(--flae)}
[data-shop="couture"] .pk:hover .pk-bild img{transform:scale(1.06)}
[data-shop="couture"] .pk-info{padding:18px 4px 0;align-items:center;gap:7px}
[data-shop="couture"] .pk-info h3{font-family:var(--disp);font-size:23px;font-weight:600}
[data-shop="couture"] .pk-preis{font-weight:500;color:var(--soft);letter-spacing:.03em}
[data-shop="couture"] .pk-knopf{background:transparent;color:var(--fg);border:1.5px solid var(--fg);border-radius:var(--r,0);letter-spacing:2px;text-transform:uppercase;font-size:11.5px;font-weight:700;padding:13px 22px}
[data-shop="couture"] .pk-knopf:hover{background:var(--fg);color:var(--flae);transform:none;filter:none}
[data-shop="couture"] .kat-chip{border-radius:var(--r,0);border-color:var(--lin);letter-spacing:1.5px;text-transform:uppercase;font-size:11.5px}
[data-shop="couture"] .kat-chip.aktiv{background:var(--fg);border-color:var(--fg)}

/* ── MARKT: lebendig, kompaktes Raster, klare Preise, Badges ── */
[data-shop="kaufhaus"] .shero{padding:44px 0 26px}
[data-shop="kaufhaus"] .shero h1{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.03em}
[data-shop="kaufhaus"] .pgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;padding:20px 0 80px}
[data-shop="kaufhaus"] .pk{border-radius:var(--r,14px);border-color:var(--lin)}
[data-shop="kaufhaus"] .pk-info{padding:13px 14px 15px;gap:5px}
[data-shop="kaufhaus"] .pk-info h3{font-size:15px;font-weight:700}
[data-shop="kaufhaus"] .pk-preis{color:var(--ak);font-size:18px}
[data-shop="kaufhaus"] .pk-knopf{border-radius:var(--rk,var(--r,9px));font-size:13px;padding:11px 14px}
[data-shop="kaufhaus"] .kat-leiste{justify-content:flex-start;gap:8px;padding:4px 0 6px;overflow-x:auto;flex-wrap:nowrap}
[data-shop="kaufhaus"] .kat-chip{border-radius:var(--r,8px);background:var(--flae);white-space:nowrap;flex:none}
/* ===== Botanik – Alpen-Apotheke: botanisch & editorial ===== */
[data-shop="botanik"]{--r:3px}
[data-shop="botanik"] .shero{padding:76px 0 46px}
[data-shop="botanik"] .shero h1{font-family:var(--disp);font-weight:500;font-size:clamp(38px,5.6vw,64px);letter-spacing:-.015em;line-height:1.05}
[data-shop="botanik"] .shero p{font-family:var(--disp);font-style:italic;font-size:18px;color:var(--soft);max-width:50ch}
[data-shop="botanik"] .pgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:30px 24px;padding:34px 0 92px}
[data-shop="botanik"] .pk{border:1px solid var(--lin);border-radius:var(--r,3px);background:var(--flae)}
[data-shop="botanik"] .pk:hover{transform:translateY(-4px);border-color:var(--ak);box-shadow:0 22px 46px -26px rgba(27,38,32,.4)}
[data-shop="botanik"] .pk-bild{background:var(--flae);border-bottom:1px solid var(--lin)}
[data-shop="botanik"] .pk-info{padding:17px 18px 19px;gap:7px}
[data-shop="botanik"] .pk-info h3{font-family:var(--disp);font-weight:500;font-size:20px;line-height:1.15}
[data-shop="botanik"] .pk-preis{font-family:var(--disp);font-weight:500;font-size:19px;color:var(--ak);letter-spacing:.01em}
[data-shop="botanik"] .pk-knopf{border-radius:var(--rk,var(--r,2px));font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:none;padding:13px 18px}
[data-shop="botanik"] .pk-knopf:hover{filter:brightness(.94);transform:translateY(-2px)}
[data-shop="botanik"] .kat-chip{border:1px solid var(--lin);border-radius:var(--r,100px);font-weight:600;font-size:12.5px;letter-spacing:.04em;padding:9px 18px}
[data-shop="botanik"] .kat-chip.aktiv{background:var(--ak);border-color:var(--ak);color:var(--akT)}
/* ── MANUFAKTUR: warm, Erdtöne, grosszügige Karten mit Textur ── */
[data-shop="couture"] .shero{padding:66px 0 40px}
[data-shop="couture"] .shero h1{font-family:var(--disp);font-weight:600;font-size:clamp(38px,5.6vw,64px)}
[data-shop="couture"] .shero p{font-size:17.5px}
[data-shop="couture"] .pgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px;padding:34px 0 90px}
[data-shop="couture"] .pk{border-radius:var(--r,16px);border-color:var(--lin);background:var(--flae);box-shadow:0 2px 0 var(--lin)}
[data-shop="couture"] .pk:hover{box-shadow:0 16px 40px rgba(90,60,20,.13)}
[data-shop="couture"] .pk-bild{aspect-ratio:4/3}
[data-shop="couture"] .pk-info{padding:18px 20px 20px;gap:8px}
[data-shop="couture"] .pk-info h3{font-family:var(--disp);font-size:22px;font-weight:600}
[data-shop="couture"] .pk-preis{font-family:var(--disp);font-size:21px}
[data-shop="couture"] .pk-knopf{border-radius:var(--rk,var(--r,10px));background:var(--ak);letter-spacing:.5px}
[data-shop="couture"] .kat-chip{border-radius:var(--r,99px);border-color:var(--lin)}

/* ── DEAL: dunkel, knallig, Preis-Fokus, Energie ── */
[data-shop="detailer"] .shero{padding:48px 0 30px}
[data-shop="detailer"] .shero h1{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
[data-shop="detailer"] .pgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;padding:22px 0 80px}
[data-shop="detailer"] .pk{border-radius:var(--r,14px);border-color:var(--lin);background:var(--flae)}
[data-shop="detailer"] .pk:hover{border-color:var(--ak);box-shadow:0 0 0 1px var(--ak),0 18px 40px rgba(0,0,0,.4)}
[data-shop="detailer"] .pk-info{padding:14px 16px 16px;gap:6px}
[data-shop="detailer"] .pk-info h3{font-size:16px;font-weight:700}
[data-shop="detailer"] .pk-preis{font-family:var(--disp);font-size:22px;color:var(--ak);font-weight:700}
[data-shop="detailer"] .pk-knopf{border-radius:var(--rk,var(--r,9px));text-transform:uppercase;letter-spacing:1px;font-size:12.5px}
[data-shop="detailer"] .pk-knopf:hover{box-shadow:0 6px 20px rgba(255,201,77,.4)}
[data-shop="detailer"] .kat-chip{border-radius:var(--r,8px);border-color:var(--lin);background:var(--flae)}
[data-shop="detailer"] .band{font-weight:800;letter-spacing:.5px}

/* ── GALERIE: klar, kuehl, grosszuegig - die Buehne ist ein
   vollflaechiger Bild-Wechsler mit Punkten und Pfeilen. Die Buehne
   bleibt im Satzspiegel (nichts auf volle Fensterbreite ziehen:
   solche Tricks brachten anderswo schon einen Streifen am Rand). ── */
[data-shop="galerie"]{--r:20px}
[data-shop="galerie"] .kat-chip{border-radius:var(--r,99px)}
[data-shop="galerie"] .hero-cta,[data-shop="galerie"] .pk-knopf{border-radius:var(--rk,var(--r,99px))}
[data-shop="galerie"] .pk{border-color:transparent;background:var(--flae)}
[data-shop="galerie"] .pk:hover{border-color:transparent;box-shadow:0 18px 44px rgba(11,15,25,.12)}
.ghero{position:relative;width:100%;border-radius:var(--r,20px);overflow:hidden;margin:clamp(14px,2.5vw,26px) 0 10px;height:auto;min-height:clamp(430px,58vh,640px);max-height:min(78vh,760px);background:var(--flae)}
/* Der Platzhalter gibt der Buehne die Hoehe des Bildes - aber nur, wenn
   die groesser ist als der entworfene Boden. Alle echten Kinder der
   Buehne liegen absolut, darum schiebt er nichts. Ohne ihn stuende ein
   hohes Bild in einem flachen Rahmen; mit aspect-ratio am Rahmen selbst
   stand am 5.9.2026 der Titel oben heraus, weil .ghero-inhalt 452px
   braucht und der Rahmen auf 418px zusammenfiel. */
.ghero::before{content:'';display:block;width:100%;aspect-ratio:var(--heroAr,16/7)}
.ghero-folie{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;z-index:0}
.ghero-folie.aktiv{opacity:1;z-index:1}
.ghero-folie a{display:block;width:100%;height:100%}
/* Die weiche Fuellung liegt GANZ hinten und traegt keine Ereignisse:
   Sie ist Flaeche, kein Bild, das jemand anklickt oder aufzieht. Der
   Filter kostet einmal beim Zeichnen, nicht bei jedem Bildwechsel -
   darum kein will-change. */
.hero-fuell{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);filter:blur(26px) saturate(1.15) brightness(.92);
  z-index:0;pointer-events:none;user-select:none}
/* orbit ist eine ABSICHTLICH dunkle Buehne - das Bild selbst liegt dort
   auf opacity:.62 unter einem schweren Verlauf. Eine Fuellung in voller
   Staerke hob die mittlere Helligkeit von 62.7 auf 90.9 (von 255) und
   nahm der Vorlage genau das, was sie ausmacht. Gemessen, nicht
   geschaetzt: siehe die Zahlen im Commit. Hier also dieselbe
   Zurueckhaltung wie beim Hauptbild. */
[data-shop="orbit"] .hero-fuell{opacity:.5;
  filter:blur(30px) saturate(1.05) brightness(.45)}
/* «:not(.hero-fuell)» ist der Kern: Die Fuellung IST ein <img> in
   derselben Folie, und «.ghero-folie img» (0-1-1) schlaegt
   «.hero-fuell» (0-1-0). Ohne die Ausnahme bekam die Fuellung
   object-fit:contain und position:relative, stand damit IM Fluss und
   schob das scharfe Bild aus dem Rahmen - sichtbar war nur noch der
   Weichzeichner. Genau so sah es im ersten Versuch aus. */
.ghero-folie img:not(.hero-fuell){width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.ghero-tag{position:absolute;top:clamp(14px,2.5vw,22px);right:clamp(14px,2.5vw,22px);background:rgba(255,255,255,.93);backdrop-filter:blur(6px);border-radius:12px;padding:9px 13px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.ghero-tag b{display:block;font-size:13px;color:#0B0F19;font-weight:700}
/* Die Marke liegt auf hellem Grund, egal wie dunkel der Laden ist -
   var(--soft) waere hier fast weiss auf Weiss. Darum derselbe feste
   Ton wie beim Namen darueber, nur leiser. */
.ghero-tag span{font-size:12.5px;font-weight:800;color:var(--ak)}
.ghero-tag small{font-size:.8em;font-weight:600;color:#0B0F19;opacity:.6;margin-right:.1em}
.ghero-leer{position:absolute;inset:0;background:linear-gradient(135deg,var(--ak),#0E1524)}
.ghero-schleier{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 32%,rgba(6,10,22,.66) 100%)}
.ghero-inhalt{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(20px,4vw,44px);pointer-events:none}
.ghero-inhalt .hero-cta{pointer-events:auto}
.ghero-inhalt .hero-eyebrow{color:#fff}
.ghero-inhalt .hero-eyebrow::before{background:#fff}
.ghero-inhalt h1{font-family:var(--disp);font-weight:700;color:#fff;font-size:clamp(30px,4.6vw,54px);line-height:1.05;margin:10px 0 8px;max-width:24ch;letter-spacing:-.02em}
.ghero-inhalt .hero-intro{color:rgba(255,255,255,.88);max-width:52ch;margin-bottom:18px}
.ghero-inhalt .hero-preis b{color:#fff}
.ghero-punkte{position:absolute;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,26px);z-index:4;display:flex;gap:8px}
.ghero-punkt{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:transform .2s,background .2s}
.ghero-punkt.aktiv{background:#fff;transform:scale(1.3)}
.ghero-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;border:0;background:rgba(10,14,24,.38);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .25s,background .2s}
.ghero:hover .ghero-pfeil,.ghero-pfeil:focus-visible{opacity:1}
.ghero-pfeil:hover{background:rgba(10,14,24,.66)}
.ghero-pfeil.links{left:14px}.ghero-pfeil.rechts{right:14px}
@media(max-width:760px){.ghero{height:auto;min-height:clamp(380px,66vw,520px)}.ghero-pfeil{display:none}}
@media(prefers-reduced-motion:reduce){.ghero-folie{transition:none}}

/* ── DUETT: freundlich und kraeftig - halb Farbflaeche mit Botschaft,
   halb Bild. Ohne Bild traegt die rechte Haelfte gross den
   Anfangsbuchstaben des Ladens. ── */
[data-shop="duett"]{--r:22px}
[data-shop="duett"] .hero-cta{border-radius:var(--rk,var(--r,99px));padding:15px 30px}
[data-shop="duett"] .kat-chip{border-radius:var(--r,99px)}
[data-shop="duett"] .pk-knopf{border-radius:var(--rk,var(--r,99px))}
[data-shop="duett"] .kat-chip{background:var(--flae);border-color:transparent}
[data-shop="duett"] .band{font-weight:800}
.dhero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,26px);margin:clamp(14px,2.5vw,26px) 0 10px;min-height:clamp(400px,52vh,560px)}
.dhero-text{background:var(--flae);border-radius:var(--r,22px);padding:clamp(26px,4vw,54px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.dhero-text .hero-eyebrow{background:var(--ak);color:var(--akT);padding:7px 14px;border-radius:99px;letter-spacing:1.4px;font-size:11px;margin-bottom:0}
.dhero-text .hero-eyebrow::before{display:none}
.dhero-text h1{font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.8vw,58px);line-height:1.05;margin:16px 0 12px;letter-spacing:-.015em}
.dhero-text .hero-intro{margin-bottom:24px}
.dhero-bild{position:relative;width:100%;border-radius:var(--r,22px);overflow:hidden;background:var(--flae);aspect-ratio:var(--heroAr,4/3);min-height:var(--heroMin,300px);max-height:min(74vh,700px)}
.dhero-bild a{position:absolute;inset:0;display:block}
.dhero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dhero-leer{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:clamp(110px,17vw,210px);font-weight:700;color:var(--akT);background:linear-gradient(135deg,var(--ak),color-mix(in srgb,var(--ak) 55%,#26130C))}
@media(max-width:820px){.dhero{grid-template-columns:1fr;min-height:0}.dhero-bild{order:-1;min-height:0;aspect-ratio:var(--heroAr,16/10)}}

/* ── SEIDE: ruhige Eleganz - zentrierter Kopf mit Zierlinien links
   und rechts des Eyebrows, darunter eine breite Bildkarte. ── */
[data-shop="seide"]{--r:14px}
[data-shop="seide"] .marke small{letter-spacing:2.4px}
[data-shop="seide"] .pk{background:var(--bg);border-color:var(--lin)}
[data-shop="seide"] .pk-info h3{font-family:var(--disp);font-weight:600;font-size:19.5px}
[data-shop="seide"] .pk-knopf{background:var(--fg);color:var(--bg)}
[data-shop="seide"] .pk-knopf:hover{background:var(--ak);color:var(--akT)}
[data-shop="seide"] .hero-cta{background:var(--fg);color:var(--bg);box-shadow:none;border-radius:var(--rk,var(--r,99px));font-weight:600;letter-spacing:.06em}
[data-shop="seide"] .hero-cta:hover{background:var(--ak);color:var(--akT)}
.sehero{position:relative;padding:clamp(40px,6vw,76px) 0 clamp(8px,2vw,18px);text-align:center}
/* Der Schein bleibt in der Spaltenbreite: ein Kasten, der links und
   rechts hinausragt, verbreitert die Seite - 50px Querrollen bei
   1440px, im Chromium nachgemessen. */
.sehero::before{content:"";position:absolute;left:0;right:0;top:-40px;height:420px;background:radial-gradient(80% 100% at 50% 0,color-mix(in srgb,var(--ak) 9%,transparent),transparent 75%);pointer-events:none;z-index:-1}
.sehero-kopf{max-width:70ch;margin:0 auto}
.sehero .hero-eyebrow{gap:12px}
.sehero .hero-eyebrow::before{width:34px}
.sehero .hero-eyebrow::after{content:"";width:34px;height:1.5px;background:var(--ak)}
.sehero h1{font-family:var(--disp);font-weight:600;font-size:clamp(36px,5.2vw,62px);line-height:1.07;margin:14px 0 12px;letter-spacing:-.01em}
.sehero .hero-intro{margin:0 auto 22px;max-width:56ch}
.sehero .hero-preis{justify-content:center}
.sehero-karte{display:block;width:100%;margin:clamp(26px,4vw,44px) auto 0;max-width:1020px;aspect-ratio:var(--heroAr,21/9);max-height:min(76vh,720px);border-radius:calc(var(--r,14px) + 8px);overflow:hidden;background:var(--flae);box-shadow:0 34px 80px -30px rgba(60,45,25,.35)}
.sehero-karte img{width:100%;height:100%;object-fit:contain;transition:transform .8s ease}
.sehero-karte:hover img{transform:scale(1.03)}
@media(max-width:640px){.sehero-karte{aspect-ratio:var(--heroAr,4/3)}}

/* ── ORBIT: dunkel, technisch, praezise - fast bildschirmhohe Buehne,
   Grossbuchstaben, Umriss-Knopf, Pfeil zum Sortiment. Ohne Bild ein
   stiller Sternhimmel aus drei sich wiederholenden Punktrastern. ── */
[data-shop="orbit"]{--r:12px}
[data-shop="orbit"] .marke small{letter-spacing:3px}
[data-shop="orbit"] .band{text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:12px}
[data-shop="orbit"] .pk-knopf{text-transform:uppercase;letter-spacing:1.2px;font-size:12px;border-radius:var(--rk,var(--r,7px))}
[data-shop="orbit"] .kat-chip{border-radius:var(--r,7px)}
[data-shop="orbit"] .kf-chip.kf-punkt{border-color:rgba(255,255,255,.28)}
[data-shop="orbit"] .hero-cta{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.8);box-shadow:none;border-radius:var(--rk,var(--r,7px));text-transform:uppercase;letter-spacing:2px;font-size:12.5px;font-weight:700;padding:15px 28px}
[data-shop="orbit"] .hero-cta:hover{background:#fff;color:#0A0D14;transform:none;filter:none}
.ohero{position:relative;width:100%;border-radius:var(--r,12px);overflow:hidden;margin:clamp(12px,2vw,22px) 0 8px;min-height:clamp(500px,74vh,780px);display:flex;align-items:flex-end;background:#0A0D14}
.ohero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.62;z-index:1}
.ohero.ohero-leer{background:radial-gradient(120% 90% at 75% 8%,color-mix(in srgb,var(--ak) 26%,transparent),transparent 55%),radial-gradient(1.4px 1.4px at 30px 40px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 140px 90px,rgba(255,255,255,.34),transparent),radial-gradient(1.2px 1.2px at 205px 180px,rgba(255,255,255,.42),transparent),#0A0D14;background-size:auto,240px 240px,240px 240px,240px 240px,auto}
.ohero-schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,15,.12) 0%,rgba(6,9,15,.84) 90%)}
.ohero-inhalt{position:relative;z-index:2;padding:clamp(24px,4.5vw,56px);max-width:860px}
.ohero .hero-eyebrow{color:var(--fg);letter-spacing:4px;font-size:11.5px}
.ohero .hero-eyebrow::before{background:var(--ak);width:34px}
.ohero h1{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:.015em;color:#fff;margin:0 0 14px}
.ohero .hero-intro{color:rgba(242,245,249,.78);max-width:56ch;margin-bottom:24px}
.ohero .hero-preis b{color:#fff}
.ohero-pfeil{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.75);animation:oPuls 2.2s ease-in-out infinite}
.ohero-pfeil:hover{color:#fff}
@keyframes oPuls{0%,100%{translate:0 0;opacity:.65}50%{translate:0 7px;opacity:1}}
@media(prefers-reduced-motion:reduce){.ohero-pfeil{animation:none}}
@media(max-width:760px){.ohero{min-height:clamp(440px,72vh,620px)}}.hero-preis{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}.hero-preis b{font-size:30px;font-weight:800;letter-spacing:-.02em}.hero-preis s{color:var(--soft);font-size:16px}.skacheln{display:grid;gap:14px;align-content:center}.skachel{position:relative;border-radius:var(--r,14px);overflow:hidden;background:var(--flae);min-height:150px;display:flex;align-items:flex-end;padding:20px;border:1.5px solid var(--lin)}.skachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .8s}.skachel:hover img{transform:scale(1.06)}.skachel-rabatt{position:absolute;top:14px;right:14px;background:var(--fg);color:var(--bg);border-radius:999px;width:56px;height:56px;display:grid;place-items:center;font-weight:800;font-size:15px;transform:rotate(-8deg)}.skachel-txt{position:relative}.skachel-txt b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em}.skachel-txt span{display:block;font-size:13px;color:var(--soft);margin-top:2px}.skachel-txt a{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--fg);text-decoration:none;border-bottom:2px solid var(--ak)}.saktion{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border-radius:var(--r,14px);overflow:hidden;background:var(--fg);color:var(--bg);margin:clamp(34px,5vw,62px) 0;align-items:center}.saktion-txt{padding:clamp(28px,4vw,52px)}.saktion-kick{display:inline-block;background:var(--ak);color:var(--bg);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:14px}.saktion h2{font-family:var(--disp);font-size:clamp(24px,3vw,40px);line-height:1.06;letter-spacing:-.02em;margin-bottom:10px;font-weight:800}.saktion p{color:color-mix(in srgb,var(--bg) 68%,transparent);margin-bottom:20px;max-width:44ch}.saktion-uhr{display:flex;gap:9px;margin-bottom:22px;flex-wrap:wrap}.saktion-uhr div{background:color-mix(in srgb,var(--bg) 10%,transparent);border:1px solid color-mix(in srgb,var(--bg) 18%,transparent);border-radius:10px;padding:10px 13px;text-align:center;min-width:62px}.saktion-uhr b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.saktion-uhr span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--bg) 55%,transparent)}.saktion-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ak);color:var(--bg);text-decoration:none;padding:14px 26px;border-radius:var(--rk,var(--r,10px));font-weight:700;font-size:15px;transition:transform .2s}.saktion-cta:hover{transform:translateY(-2px)}.saktion-bild{position:relative;height:100%;min-height:280px}.saktion-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.snews{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;background:var(--flae);border:1.5px solid var(--lin);border-radius:var(--r,14px);padding:clamp(24px,3vw,40px);margin:clamp(34px,5vw,62px) 0}.snews h2{font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-.02em;margin-bottom:6px}.snews p{color:var(--soft);font-size:14.5px;margin:0}.snews-form{display:flex;gap:9px;flex-wrap:wrap}.snews-form input{border:1.5px solid var(--lin);border-radius:999px;padding:13px 20px;font:inherit;font-size:15px;outline:none;min-width:230px;background:var(--bg);color:var(--fg)}.snews-form input:focus{border-color:var(--ak)}.snews-form button{border:0;background:var(--ak);color:var(--bg);border-radius:999px;padding:13px 26px;font:inherit;font-weight:700;cursor:pointer}.snews-ok{grid-column:1/-1;color:var(--ak);font-weight:600;margin:0}.szahlung{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.szahlung span{background:color-mix(in srgb,var(--fg) 7%,transparent);border-radius:6px;padding:5px 10px;font-size:10.5px;font-weight:700;letter-spacing:.04em}.hero.mit-kacheln{grid-template-columns:1.5fr 1fr}@media(max-width:900px){.saktion,.snews{grid-template-columns:1fr}.hero.mit-kacheln{grid-template-columns:1fr}}/* «hidden» muss stärker sein als jedes display: sonst steht die Null im
   Merklisten-Abzeichen und der Nach-oben-Knopf fängt unsichtbar Klicks ab. */
[hidden]{display:none !important}
/* Auf dunklem Aktionsband erbt die Überschrift sonst die Textfarbe der
   Seite – dunkel auf dunkel. Der Titel war schlicht unsichtbar. */
.saktion h2{color:inherit}
/* Der Kaufknopf gehört an den unteren Rand der Karte. Ohne das rutscht er
   bei Karten mit Sternen tiefer als bei Karten ohne – in einer Reihe fällt
   das sofort auf. */
.pk .pk-info .pk-knopf{margin-top:auto}
/* Eine einzelne Kachel neben der Bühne soll keine Bildtapete werden. */
[data-shop="studio"] .skacheln{grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){[data-shop="studio"] .skacheln{grid-template-columns:1fr}}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--ak);color:var(--akT);padding:10px 18px;border-radius:0 0 var(--r,10px) 0;font-weight:700;font-size:14px}
.skip:focus{left:0}
/* ── Kopf: Menü ─────────────────────────────────────────────── */
.kopf{gap:10px}
.kopf-burger{display:none;border:none;background:none;cursor:pointer;color:var(--fg);width:38px;height:38px;padding:7px;margin-left:-7px}
.kopf-burger svg{width:100%;height:100%}
.hnav{display:flex;align-items:center;gap:2px;margin-left:14px;flex:1}
.hnav-el{position:relative}
.hnav-link{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--soft);
  padding:11px 13px;border-radius:var(--r,10px);white-space:nowrap;transition:color .18s,background .18s}
.hnav-link:hover,.hnav-el.auf>.hnav-link{color:var(--fg);background:var(--flae)}
.hnav-pfeil{width:9px;height:6px;opacity:.6;transition:transform .22s}
.hnav-el.auf .hnav-pfeil{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 9px);left:0;z-index:80;min-width:min(760px,86vw);
  background:var(--bg);border:1px solid var(--lin);border-radius:var(--r,18px);
  padding:24px 26px 22px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.mega-klein{min-width:270px}
.hnav-el.auf .mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:1.1fr 1.5fr .9fr;gap:30px;padding:0;max-width:none}
.mega-klein .mega-in{grid-template-columns:1fr;gap:0}
.mega-titel{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ak);margin-bottom:13px}
.mega-sp ul{list-style:none;display:grid;gap:1px}
.mega-sp ul a{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14.5px;
  font-weight:500;color:var(--fg);padding:7px 9px;border-radius:var(--r,9px);transition:background .16s}
.mega-sp ul a:hover{background:var(--flae)}
.mega-sp ul a span{font-size:12px;font-weight:600;color:var(--soft);font-variant-numeric:tabular-nums}
/* Unterkategorien in der Kategorien-Spalte: kleiner, gedaempft und
   eingerueckt. Sie sollen lesbar sein, aber die Hauptkategorien muessen
   die Spalte weiter gliedern - sonst steht dort eine flache Liste aus
   dreissig gleich aussehenden Zeilen. */
.mega-kat .mega-unter a{font-size:13px;font-weight:400;color:var(--soft);padding:5px 9px 5px 24px}
.mega-kat .mega-unter a:hover{color:var(--fg)}
.mega-kat .mega-unter a span{font-size:11.5px;font-weight:500}
.mega-mehr{display:inline-block;margin-top:11px;font-size:13px;font-weight:700;color:var(--ak)}
.mega-karten{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.mega-karte{display:block;color:inherit}
.mega-karte img,.mega-karte-leer{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r,12px);
  background:var(--flae);display:grid;place-items:center;font-size:26px;margin-bottom:8px;transition:transform .3s}
.mega-karte:hover img{transform:scale(1.04)}
.mega-karte b{display:block;font-size:13px;font-weight:600;color:var(--fg);line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mega-karte i{font-style:normal;font-size:12.5px;color:var(--soft)}
/* Das «ab» vor dem Ankerpreis. Die ganze Zeile ist hier schon leise und
   grau - ein zusaetzlich verkleinertes <small> waere in 12.5px nicht mehr
   zu lesen. Es bleibt darum gleich gross wie die Zahl daneben. */
.mega-karte i small{font-size:1em}
.mega-service{list-style:none;display:grid;gap:8px;font-size:13.5px;color:var(--soft)}
.mega-service li{position:relative;padding-left:19px;line-height:1.5}
.mega-service li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ak);font-weight:800}
.kopf-ic{position:relative;display:grid;place-items:center;width:38px;height:38px;border:none;background:none;
  cursor:pointer;color:var(--fg);border-radius:var(--r,10px);transition:opacity .18s,background .18s}
.kopf-ic:hover{background:var(--flae)}
.kopf-ic svg{width:19px;height:19px}
.kopf-zahl{position:absolute;top:1px;right:1px;min-width:16px;height:16px;border-radius:99px;background:var(--ak);
  color:var(--akT);font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}
/* ── Sofortsuche ────────────────────────────────────────────── */
.such{border-top:1px solid var(--fein);background:var(--bg)}
.such-in{display:flex;align-items:center;gap:11px;padding-top:13px;padding-bottom:13px}
.such-lupe{width:19px;height:19px;color:var(--soft);flex:none}
.such input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:17px;color:var(--fg);outline:none}
.such input::-webkit-search-cancel-button{display:none}
.such-zu{border:none;background:none;cursor:pointer;color:var(--soft);font-size:15px;padding:6px 8px}
.such-treffer{padding-bottom:14px;display:grid;gap:2px;max-height:min(62vh,520px);overflow:auto}
.st-el{display:flex;align-items:center;gap:13px;padding:9px 10px;border-radius:var(--r,12px);color:inherit;transition:background .15s}
.st-el:hover,.st-el.ist-aktiv{background:var(--flae)}
.st-el img,.st-el .st-leer{width:46px;height:46px;border-radius:var(--r,9px);object-fit:cover;background:var(--flae);flex:none;display:grid;place-items:center}
.st-el b{display:block;font-size:14.5px;font-weight:600;color:var(--fg)}
.st-el small{font-size:12.5px;color:var(--soft)}
.st-el i{margin-left:auto;font-style:normal;font-size:14px;font-weight:700;color:var(--fg);white-space:nowrap}
.st-nichts{padding:14px 10px 4px;font-size:14px;color:var(--soft)}
/* ── Schublade fürs Handy ───────────────────────────────────── */
.mobhinter{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:190;opacity:0;pointer-events:none;transition:opacity .3s}
.mobhinter.auf{opacity:1;pointer-events:auto}
.mobmenu{position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);background:var(--bg);z-index:200;
  display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .34s cubic-bezier(.16,1,.3,1);
  box-shadow:20px 0 60px rgba(0,0,0,.2);border-right:1px solid var(--fein)}
.mobmenu.auf{transform:none}
.mobmenu-kopf{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--fein)}
.mobmenu-kopf b{font-size:16px;color:var(--fg)}
.mobmenu-in{flex:1;overflow-y:auto;padding:16px 18px 30px}
.mobmenu-haupt{display:block;font-size:17px;font-weight:700;color:var(--fg);padding:8px 0 14px}
.mobmenu-titel{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ak);margin:18px 0 8px}
.mobmenu-liste{list-style:none}
.mobmenu-liste a{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:500;color:var(--fg);padding:9px 0;border-bottom:1px solid var(--fein)}
.mobmenu-liste a span{color:var(--soft);font-size:12.5px}
/* Dasselbe Bild wie im Mega-Menue, nur schmaler: eingerueckt, kleiner,
   gedaempft. Die Trennlinie bleibt, damit sich Haupt- und
   Unterkategorien in der Schublade nicht zu Bloecken verkleben. */
.mobmenu-liste .mobmenu-unter a{font-size:13.5px;font-weight:400;color:var(--soft);padding:7px 0 7px 16px}
.mobmenu-spr{margin-top:22px}
/* ── Produktkarte: Merken & Schnellansicht ──────────────────── */
.pk-bildbox{position:relative}
.pk-merk{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:grid;place-items:center;
  border:none;border-radius:50%;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(6px);
  color:var(--fg);cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s,color .2s}
.pk:hover .pk-merk,.pk-merk.ist-gemerkt,.pk-merk:focus-visible{opacity:1;transform:none}
.pk-merk svg{width:17px;height:17px}
.pk-merk.ist-gemerkt{color:#E0245E}
.pk-merk.ist-gemerkt svg{fill:currentColor}
.pk-schnell{position:absolute;left:50%;bottom:12px;translate:-50% 0;z-index:3;border:none;cursor:pointer;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);color:var(--fg);
  font:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:99px;white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.pk:hover .pk-schnell,.pk-schnell:focus-visible{opacity:1;transform:none}
@media(hover:none){.pk-merk{opacity:1;transform:none}.pk-schnell{display:none}}
.pk-sterne{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--soft)}
.pk-sterne .bw-sterne{font-size:12.5px;letter-spacing:.5px}
/* ── Schnellansicht ─────────────────────────────────────────── */
.sv-hinter{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:230;display:grid;place-items:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.sv-hinter.auf{opacity:1;pointer-events:auto}
.sv{background:var(--bg);border-radius:var(--r,20px);max-width:760px;width:100%;max-height:88vh;overflow:auto;
  display:grid;grid-template-columns:1fr 1fr;transform:scale(.96);transition:transform .25s}
.sv-hinter.auf .sv{transform:none}
.sv-bild{background:var(--flae);display:grid;place-items:center;min-height:260px}
.sv-bild img{width:100%;height:100%;object-fit:cover}
.sv-txt{padding:clamp(22px,3vw,32px);position:relative}
.sv-zu{position:absolute;top:12px;right:12px;border:none;background:var(--flae);width:32px;height:32px;
  border-radius:50%;cursor:pointer;color:var(--fg);font-size:14px}
.sv-txt h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:8px}
.sv-preis{font-size:19px;font-weight:800;color:var(--fg);margin-bottom:12px}
/* «white-space:pre-line» wie auf der Produktseite (.pd-text): Die
   Beschreibungen sind Listen mit einem Punkt je Zeile. Ohne diese
   Zeile lief alles zu einem Absatz zusammen, in dem die Aufzaehlung
   nur noch als Kette von «•» zu erkennen war - gemeldet am 7.9.2026:
   «in der Schnellansicht ist die Beschreibung fehlerhaft, soll wie im
   Produktbeschrieb sein». Die Hoehe ist begrenzt, damit ein langer
   Text das Fenster nicht sprengt; gescrollt wird darin. */
.sv-text{font-size:14.5px;color:var(--soft);line-height:1.6;margin-bottom:18px;
  white-space:pre-line;max-height:38vh;overflow:auto}
.sv-mehr{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--ak)}
@media(max-width:640px){.sv{grid-template-columns:1fr}.sv-bild{max-height:34vh}}
/* ── Bewertungen als Schieber (5.9.2026) ─────────────────────
   Vorher ein Raster: Bei sechs Karten brach es auf zwei Reihen um, die
   letzte Reihe stand halb leer da. Als Schieber steht immer eine ganze
   Reihe, und wer mehr sehen will, wischt oder tippt auf einen Pfeil.
   Die Pfeile blenden sich aus, wenn es nichts mehr zu schieben gibt -
   ein Knopf, der nichts tut, ist schlimmer als keiner. */
.bw-schieber{position:relative}
.bw-raster{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.bw-raster::-webkit-scrollbar{display:none}
.bw-raster>*{flex:0 0 clamp(240px,78vw,320px);scroll-snap-align:start}
@media(min-width:761px){.bw-raster>*{flex-basis:clamp(260px,30%,340px)}}
.bw-pfeil{position:absolute;top:50%;translate:0 -50%;z-index:2;display:grid;place-items:center;
  width:40px;height:40px;border-radius:999px;border:1px solid var(--lin);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);
  color:var(--fg);font-size:19px;line-height:1;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.12);transition:opacity .2s,transform .2s}
.bw-pfeil:hover{transform:translate(0,-50%) scale(1.06)}
.bw-pfeil.links{left:-6px}
.bw-pfeil.rechts{right:-6px}
.bw-pfeil[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.bw-raster{scroll-behavior:auto}}

/* ── Kategorie-Kacheln auf der Startseite ───────────────────── */
/* Unten stand bisher 0. Solange die Kacheln eng beieinander lagen,
   fiel das nicht auf; mit dem groesseren Abstand zwischen ihnen
   klebte die Filterreihe des Sortiments direkt darunter - gemessen
   am 5.9.2026 waren es 20px, weniger als der Abstand der Kacheln
   untereinander. Der Rand unten ist darum etwas kleiner als oben,
   aber groesser als der Kachelabstand: Das Band endet sichtbar,
   bevor der naechste Bereich anfaengt. */
.kkband{padding:clamp(30px,4vw,52px) 0 clamp(26px,3.2vw,44px)}
.kkband-titel{font-family:var(--disp,inherit);font-size:clamp(21px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin-bottom:20px}
/* Abstand, Flaeche und ganze Bilder (5.9.2026)
   - gap 16 war zu eng: acht Kacheln standen als ein Block da. Jetzt
     waechst der Abstand mit der Breite mit.
   - object-fit:cover schnitt jedes Produktfoto auf 4:3 zurecht - bei
     einem hochformatigen Roll-Up sah man die Mitte, nicht das Produkt.
     contain zeigt es ganz; der Innenrand haelt es von den Kanten weg.
   - Die Flaeche ist --flae wie bei jeder Karte im Laden. Wer sie
     aendern will, waehlt im Shop-Panel «Farbe hinter den Bildern» -
     die Regel dazu baut pxaShopSeiten() in engine/shop-frontend.php
     und legt sie ans Ende des Blattes, damit sie auch die
     Vorlagenregeln schlaegt. Ohne Wahl bleibt es beim Grau der
     Vorlage. */
.kk-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,28px)}
.kk{position:relative;display:block;border-radius:var(--r,16px);overflow:hidden;background:var(--flae);color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.kk:hover{transform:translateY(-4px);box-shadow:0 16px 40px -20px rgba(0,0,0,.32)}
.kk-bild{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--flae);padding:10px}
.kk-bild img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.kk:hover .kk-bild img{transform:scale(1.05)}
.kk-leer{display:grid;place-items:center;width:100%;height:100%;font-size:34px;opacity:.35}
.kk-txt{display:block;padding:13px 15px 15px}
.kk-txt b{display:block;font-size:15.5px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.kk-txt i{font-style:normal;font-size:12.5px;color:var(--soft)}
@media(max-width:900px){.kk-raster{grid-template-columns:1fr 1fr}}
/* ── Reihe (Neuheiten, Beliebt, Zuletzt) ────────────────────── */
.sreihe{border-top:none;margin-top:clamp(34px,5vw,60px);padding-top:0}
.sreihe-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.sreihe-kopf .xs-titel{margin:0}
.sreihe-mehr{font-size:13.5px;font-weight:700;color:var(--ak);white-space:nowrap}
/* ── Brotkrumen ─────────────────────────────────────────────── */
.brot{padding:18px 0 2px}
.brot ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--soft)}
.brot li+li::before{content:"›";margin-right:6px;opacity:.55}
.brot a{color:var(--soft)}
.brot a:hover{color:var(--fg)}
/* ── Kategorieseite ─────────────────────────────────────────── */
.katkopf{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,4vw,50px);align-items:center;padding:clamp(14px,2vw,26px) 0 clamp(18px,3vw,30px)}
.katkopf-txt h1{font-family:var(--disp,inherit);font-size:clamp(30px,4.4vw,50px);line-height:1.05;margin-bottom:12px}
.katkopf-txt p{color:var(--soft);max-width:52ch;font-size:16px}
/* EINPASSEN, NICHT ZUSCHNEIDEN (gemeldet am 2.9.2026).
   Hier stand «cover»: Das Bild fuellt den Kasten und was nicht
   hineinpasst, wird abgeschnitten. Bei einem Foto faellt das nicht auf,
   bei einem LOGO schon - das 3M-Zeichen auf der Markenseite war oben
   und unten gekappt. Und genau Logos stehen auf Markenseiten.

   «contain» passt das ganze Bild hinein und laesst notfalls Rand. Ein
   breites Foto bekommt dadurch schmale Streifen links und rechts - das
   ist der Preis, und er ist niedriger als ein halbes Firmenzeichen.

   ── OHNE PLATTE, UEBERALL (7.9.2026) ────────────────────────────────
   GEMELDET zur Kategorieseite: «Beim Bild ist noch der Hintergrund
   drauf, bitte wegnehmen.»

   Hier stand «background:var(--flae)» samt Polster und runden Ecken:
   ein graues Tablett, auf dem das Bild lag. Bei einem quadratischen
   Foto in einem 16/10-Kasten sind das breite graue Streifen links und
   rechts - man sieht das Tablett, nicht das Bild.

   Die Platte hatte einen Grund, und der galt fuer LOGOS: Ein
   Firmenzeichen auf weissem Grund sollte nicht wie ein Fehler
   aussehen. Genau darum gab es darunter schon seit dem 6.9.2026 die
   Ausnahme «.katkopf-bild.ist-logo{background:none}» - auf der
   Markenseite war die Platte also laengst weg. Jetzt ist sie es
   ueberall, und damit ist die Ausnahme gegenstandslos: Sie ist mit
   dieser Runde entfallen, samt der Klasse im Blatt. Eine Regel, die
   nichts mehr tut, ist schlimmer als keine - sie sieht beim naechsten
   Lesen nach Absicht aus.

   WAS BLEIBT: das Seitenverhaeltnis. Ohne es spraenge die Seite beim
   Laden, je nachdem wie hoch das Bild ist - und zwar genau dann, wenn
   jemand schon liest. */
.katkopf-bild{aspect-ratio:16/10}
.katkopf-bild img{width:100%;height:100%;object-fit:contain}
@media(max-width:820px){.katkopf{grid-template-columns:1fr}.katkopf-bild{order:-1;aspect-ratio:16/9}}
.katwerk{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--fein);border-bottom:1px solid var(--fein)}
.katwerk-links{font-size:13.5px;color:var(--soft)}
.katwerk-zahl{font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums}
.katwerk-rechts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marke.hat-logo{display:flex;align-items:center;gap:0}
.marke-logo{display:block;width:auto;max-width:min(240px,42vw);object-fit:contain}
.hs-bild{margin:0 0 18px}
.hs-bild img{width:100%;max-width:640px;border-radius:var(--r,16px);display:block}
.pk-werbung{display:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:14px;border:1px dashed var(--fein);border-radius:var(--r,14px);background:transparent}
.pk-werbung.da{display:flex}
.pk-werbung.ist-weg{display:none}
.pk-werbung-marke{align-self:flex-start;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);opacity:.75}
/* Die eigene Regel ist entfallen - .katwerk-kat steht jetzt in derselben
   Gruppe wie Preis und Sortierung, damit Beschriftung und Feld ueberall
   gleich aussehen. Vorher war die Kategorien-Auswahl das einzige nackte
   Systemfeld in der Leiste. */
.katwerk-kat,.katwerk-preis,.katwerk-sort{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--soft)}
.katwerk-preis input[type=range]{width:clamp(110px,18vw,190px);accent-color:var(--ak)}
.katwerk-preis b{color:var(--fg);font-variant-numeric:tabular-nums;min-width:82px}
.katwerk-kat select,.katwerk-sort select{font:inherit;font-size:13.5px;font-weight:600;color:var(--fg);background:var(--bg);
  border:1.5px solid var(--lin);border-radius:var(--r,10px);padding:8px 11px;cursor:pointer;
  /* Das Systemdreieck faellt weg, dafuer ein eigenes - sonst sieht die
     Auswahl auf jedem Betriebssystem anders aus als der Rest der Leiste. */
  -webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.katwerk-kat select:hover,.katwerk-sort select:hover{border-color:var(--ak)}
/* Aufklappbarer Filterbereich (Farbe, Groesse …).
   Der Ruhezustand steht hier im CSS, nicht im Skript: zu. Damit ist er
   schon im ersten Bild richtig und blitzt beim Laden nicht auf. Das
   Skript setzt .kf-auf nur, wenn jemand den Schalter drueckt. */
.katfilter{border:1px solid var(--fein);border-radius:var(--r,14px);margin:0 0 22px;background:var(--bg)}
.katfilter-schalter{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:14px 18px;font:inherit;font-size:13.5px;font-weight:700;color:var(--fg);cursor:pointer;text-align:left}
.kf-aktiv{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:var(--ak);color:#fff;font-size:11.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.kf-pfeil{margin-left:auto;width:16px;height:16px;flex:none;transition:transform .25s}
.katfilter-leib{padding:0 18px 16px;display:grid;gap:16px}
.kf-gruppe-titel{margin:0 0 9px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--soft)}
.kf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kf-chips-punkt{gap:10px}
.kf-chip{font:inherit;font-size:13px;font-weight:600;color:var(--fg);background:var(--bg);
  border:1.5px solid var(--fein);border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.kf-chip:hover:not(:disabled){border-color:var(--ak)}
.kf-chip[aria-pressed=true]{background:var(--ak);border-color:var(--ak);color:#fff}
.kf-chip:disabled{opacity:.36;cursor:not-allowed}
/* Runde Knoepfe statt Woerter - als Farbpunkt und als Markenzeichen.
   Was beiden gemeinsam ist (Form, Groesse, Sprechblase), steht unter
   .kf-punkt; was sie unterscheidet, darunter. Zwei Saetze fast gleicher
   Regeln waeren zwei Orte, an denen man dieselbe Feinheit vergisst. */
/* KEIN overflow:hidden. Der Kreis wuerde sonst die Sprechblase
   abschneiden, die weiter unten an demselben Knopf haengt - und ohne sie
   waere ein Markenzeichen ohne Namen. Das Bild braucht den Beschnitt
   nicht: «contain» plus Innenabstand haelt es ohnehin im Kreis. */
.kf-chip.kf-punkt{position:relative;width:34px;height:34px;padding:0;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.18)}
.kf-chip.kf-punkt:hover:not(:disabled){border-color:rgba(0,0,0,.42)}
.kf-chip.kf-punkt[aria-pressed=true]{border-color:var(--bg);box-shadow:0 0 0 2px var(--ak)}
.kf-chip.kf-farbe{background:var(--kf-ton,#ccc)}
.kf-chip.kf-farbe[aria-pressed=true]{background:var(--kf-ton,#ccc)}
/* Das Markenzeichen fuellt den Kreis nicht aus, es steht darin: Ein
   Logo ist selten rund, und beschnitten waere es unkenntlich. */
.kf-chip.kf-bild{background:var(--bg)}
.kf-chip.kf-bild img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}
.kf-chip.kf-bild[aria-pressed=true]{background:var(--bg)}
.kf-kuerzel{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--soft)}
/* Die Blase steht UNTER dem Punkt. Ueber ihm sitzt der Gruppentitel
   («FARBE», «MARKE») nur neun Pixel entfernt - dort wuerde sie ihn
   verdecken. Und overflow:hidden vom Kreis darf sie nicht wegschneiden;
   darum haengt sie an einem eigenen Element ohne Beschnitt. */
.kf-punkt::after{content:attr(data-kf-name);position:absolute;left:50%;top:calc(100% + 9px);
  transform:translateX(-50%);background:#16161f;color:#fff;font-size:12px;font-weight:600;
  line-height:1.35;white-space:nowrap;padding:5px 9px;border-radius:7px;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:6}
.kf-punkt::before{content:"";position:absolute;left:50%;top:calc(100% + 4px);
  transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#16161f;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:6}
.kf-punkt:hover::after,.kf-punkt:hover::before,
.kf-punkt:focus::after,.kf-punkt:focus::before{opacity:1}
.kf-fuss{margin:0}
.kf-weg{font:inherit;font-size:13px;font-weight:600;color:var(--soft);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kf-weg:hover{color:var(--ak)}
/* Zugeklappt, bis jemand den Schalter drueckt - auf jedem Bildschirm.
   Bei fuenfzehn Farben und zehn Groessen waere die offene Leiste das
   Erste und Groesste auf der Seite, und die Produkte kaemen erst weit
   darunter. Wer eingrenzen will, klappt sie auf. */
.katfilter:not(.kf-auf) .katfilter-leib{display:none}
.katfilter:not(.kf-auf) .kf-pfeil{transform:rotate(-90deg)}
/* Die untere Trennlinie der Werkzeugleiste faellt weg, wenn die
   Filterleiste direkt darunter steht - sonst liegen zwei Linien fast
   aufeinander. Browser ohne :has() zeigen sie weiter; das ist eine
   Linie zu viel, nichts Kaputtes. */
.katwerk:has(+ .katfilter){border-bottom:0}
.katleer{text-align:center;color:var(--soft);padding:50px 0 90px}
.katrest{border-top:1px solid var(--fein);padding:30px 0 8px;margin-top:6px}
.katrest h2{font-size:16px;font-weight:700;margin-bottom:14px}
.katrest .kat-leiste{justify-content:flex-start;margin:0}
.katrest .kat-chip{text-decoration:none}
/* Die Unterkategorien ueber dem Raster. Bewusst mit derselben
   Verschachtelung wie «Weitere Kategorien» notiert: eine Klasse allein
   verloere gegen die Vorlagen-Regeln der Form
   «[data-shop="…"] .kat-leiste», und die Reihe stuende dann in der
   einen Vorlage links und in der naechsten mittig. */
.katunter .kat-leiste{justify-content:flex-start;margin:0 0 18px}
.katunter .kat-chip{text-decoration:none}
.pk.ist-weg{display:none}
/* ── Hilfeseiten ────────────────────────────────────────────── */
.hs-raster{display:grid;grid-template-columns:230px 1fr;gap:clamp(24px,4vw,56px);padding:20px 0 clamp(50px,7vw,90px);align-items:start}
.hs-menue{position:sticky;top:86px;display:grid;gap:1px}
.hs-menue-titel{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ak);margin-bottom:11px}
.hs-menue a{display:block;font-size:14.5px;font-weight:500;color:var(--soft);padding:8px 11px;border-radius:var(--r,9px);transition:background .16s,color .16s}
.hs-menue a:hover{background:var(--flae);color:var(--fg)}
.hs-menue a.ist-hier{background:var(--flae);color:var(--fg);font-weight:700}
.hs-text{max-width:70ch}
.hs-text h1{font-family:var(--disp,inherit);font-size:clamp(28px,3.8vw,42px);line-height:1.08;margin-bottom:10px}
.hs-lead{font-size:17px;color:var(--soft);margin-bottom:26px}
.hs-text h2{font-size:19px;margin:30px 0 10px}
.hs-text p{margin-bottom:14px;line-height:1.72}
.hs-text a{text-decoration:underline;text-underline-offset:3px}
.hs-liste,.hs-schritte{margin:0 0 16px;padding-left:20px;display:grid;gap:8px}
.hs-liste{list-style:none;padding-left:0}
.hs-liste li{position:relative;padding-left:22px;line-height:1.65}
.hs-liste li::before{content:"–";position:absolute;left:2px;color:var(--ak);font-weight:800}
.hs-schritte li{line-height:1.65;padding-left:4px}
.hs-tab{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:15px}
.hs-tab th{text-align:left;font-weight:500;padding:11px 12px 11px 0;color:var(--soft)}
.hs-tab td{text-align:right;font-weight:700;color:var(--fg);padding:11px 0;font-variant-numeric:tabular-nums}
.hs-tab tr+tr{border-top:1px solid var(--fein)}
.hs-merk{background:var(--flae);border-radius:var(--r,12px);padding:13px 16px;font-size:14.5px}
.hs-hinweis{font-size:13.5px;color:var(--soft)}
.hs-stand{font-size:12.5px;color:var(--soft);margin-top:26px}
.hs-kontakt{list-style:none;display:grid;gap:2px;margin:8px 0 6px;background:var(--flae);border-radius:var(--r,14px);padding:16px 18px}
.hs-kontakt li{display:flex;gap:14px;font-size:14.5px;padding:6px 0}
.hs-kontakt li span:first-child{min-width:82px;color:var(--soft);font-size:13px;padding-top:1px}
.hs-frage{margin-top:36px;padding-top:26px;border-top:1px solid var(--fein);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hs-frage b{font-size:16px;color:var(--fg)}
.hs-frage .pk-knopf{display:inline-flex;text-decoration:none}
/* Rechtsseiten stehen ohne das Hilfe-Menue daneben - dann darf der Text
   breiter atmen, aber nicht ueber die angenehme Lesebreite hinaus. */
/* «ab» vor dem Preis - kleiner und leiser als die Zahl, aber auf
   derselben Grundlinie. Frueher stand der Stil direkt am Element; als
   eigene Regel gilt er jetzt an allen vier Stellen gleich.

   In em statt px: 12px sind neben dem 22px-Preis des Detailers ein
   Fluestern und neben den 14.5px des Studios fast so laut wie die Zahl
   selbst. .72em sitzt in beiden Vorlagen richtig. Grau bleibt es auch
   im Angebot - «ab» ist ein Wort, kein Preis; rot faerben wuerde nur
   die Zahl um ihre Wirkung bringen. */
.pk-preis .pk-ab{font-size:.72em;font-weight:600;color:var(--soft);letter-spacing:.01em;margin-right:.1em}

/* Der Preis im Angebot.
   Diese Regel steht ABSICHTLICH hier unten und nicht oben bei
   .pk-preis: pxaShopBausteineCss() wird nach dem Vorlagenteil
   angehaengt. .pk-preis.ist-aktion ist genau so spezifisch wie
   [data-shop="studio"] .pk-preis (beides 0-2-0) - bei Gleichstand
   gewinnt, was spaeter steht. Oben notiert haette die Aktionsfarbe in
   genau den vier Vorlagen nicht gegriffen, die den Preis leise setzen
   und in denen man sie darum am noetigsten braucht.

   Gewicht 800 ist dasselbe wie beim Grundpreis: So wird der
   Aktionspreis in den leisen Vorlagen kraeftiger, in keiner aber
   schwaecher als ein gewoehnlicher Preis. Die GROESSE bleibt
   unangetastet - in einer Reihe stehen Karten mit und ohne Aktion
   nebeneinander, und ungleich grosse Preise machen das Raster
   unruhig. */
.pk-preis.ist-aktion,.pd-preis.ist-aktion{color:var(--aktion);font-weight:800}
.hs-allein{max-width:70ch;margin:0 auto}
/* Die Nummern unter der Beschreibung: eine Zeile, leise, mit Abstand
   zwischen den beiden Angaben. Sie duerfen umbrechen - auf dem Handy
   passen «Art.-Nr.» und eine 13-stellige EAN nicht nebeneinander. */
.pd-nummern{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 0;font-size:12.5px;color:var(--soft)}
/* ── Kontaktformular ─────────────────────────────────────────── */
.kf{display:grid;gap:14px;margin:10px 0 4px}
.kf-zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.kf-zwei{grid-template-columns:1fr}}
.kf label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--fg)}
.kf label small{font-weight:500;color:var(--soft)}
.kf input,.kf textarea{font:inherit;font-size:15px;font-weight:400;color:var(--fg);
  background:var(--bg);border:1.5px solid var(--fein);border-radius:var(--r,12px);
  padding:12px 14px;width:100%;transition:border-color .2s}
.kf input:focus,.kf textarea:focus{outline:none;border-color:var(--ak)}
.kf textarea{resize:vertical;min-height:120px;line-height:1.6}
.kf-topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Sieht aus wie .pk-knopf, heisst aber anders - siehe Kommentar dort. */
.kf-knopf{justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;background:var(--ak);color:var(--akT);font:inherit;font-weight:800;font-size:15px;
  letter-spacing:.4px;padding:16px 30px;border-radius:var(--r,13px);border:none;cursor:pointer;
  transition:filter .18s,opacity .18s}
.kf-knopf:hover{opacity:.85}
.kf-knopf:disabled{opacity:.6;cursor:progress}
.kf-meldung{font-size:14.5px;border-radius:var(--r,12px);padding:12px 15px}
.kf-meldung.gut{background:color-mix(in srgb,var(--ak) 12%,transparent);color:var(--fg)}
.kf-meldung.fehler{background:rgba(200,60,60,.1);color:#B03636}
.kf-recht{font-size:12.5px;color:var(--soft)}
/* ── Videos ──────────────────────────────────────────────────── */
.pxa-videoband{padding:clamp(34px,5vw,58px) 0 0}
.pxa-videoband h2{font-family:var(--disp,inherit);font-size:clamp(21px,3vw,30px);
  font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.pxa-videos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pxa-video{position:relative;aspect-ratio:16/9;border-radius:var(--r,16px);
  overflow:hidden;background:#0D0D10}
.pxa-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pxa-video-eigen video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.pxa-video-platzhalter{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:linear-gradient(160deg,#1B1B22,#0D0D10);color:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:20px;font:inherit}
.pxa-video-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:19px;transition:background .2s,transform .2s}
.pxa-video-platzhalter:hover .pxa-video-play{background:rgba(255,255,255,.28);transform:scale(1.06)}
.pxa-video-platzhalter b{font-size:15px;font-weight:700}
.pxa-video-platzhalter small{font-size:12px;opacity:.72;max-width:300px;line-height:1.5}
.pd-video{margin-top:14px}
/* ── Datenblätter am Produkt ─────────────────────────────────
   Eine Liste, keine Knopfreihe: Wer drei Datenblätter hat, soll sie
   untereinander lesen können. Die Fläche ist var(--flae) wie bei jeder
   anderen Karte im Laden – so trägt der Block in allen fünf Vorlagen
   die Farbe der Vorlage und braucht keine eigene.
   Der Dateiname darf umbrechen (ein Anzeigename hat bis zu 120
   Zeichen), Typ und Grösse bleiben in einer Zeile darunter. */
.pd-anh-titel{font-size:15px;font-weight:700;color:var(--fg);margin-bottom:9px}
.pd-anh-liste{display:grid;gap:8px}
/* ── Die Reiter unter dem Kaufbereich ────────────────────────
   Die Knoepfe tragen «kat-chip» und sehen darum in jeder Vorlage aus
   wie die Kategoriewahl - hier steht nur, was ein Reiter zusaetzlich
   braucht.
   .pdr-leiste ist im HTML «hidden» und wird vom Skript aufgedeckt:
   ohne Skript liegen alle Blaetter offen, und eine Knopfreihe, die
   nichts tut, gibt es dann gar nicht.
   [hidden] ausdruecklich auf display:none - .pdr-blatt selbst setzt
   kein display, aber eine spaetere Regel koennte es, und dann waere
   das Zuklappen still wirkungslos. */
/* Masse und Trennlinie wie bei .pdb und .bw, deren Platz die Reiter
   eingenommen haben - sonst faellt am Uebergang vom Kaufbereich zum
   Rest der Seite die Linie weg, die dort seit je steht. */
.pdr{padding:clamp(34px,5vw,64px) 0 clamp(20px,3vw,36px);border-top:1px solid var(--lin)}
.pdr-leiste{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin:0 0 clamp(22px,3vw,34px)}
.pdr-tab{cursor:pointer}
.pdr-blatt[hidden]{display:none}
.pdr-blatt>h2,.pdr-blatt .bw-kopf h2{margin-bottom:14px}
@media(max-width:640px){.pdr-leiste{justify-content:flex-start;flex-wrap:nowrap;
  overflow-x:auto;padding-bottom:4px}.pdr-tab{flex:none;white-space:nowrap}}
.pd-anh-el{display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:var(--flae);border-radius:var(--r,12px);color:inherit;text-decoration:none;
  transition:background .18s,transform .18s}
.pd-anh-el:hover{background:color-mix(in srgb,var(--ak) 10%,var(--flae));transform:translateY(-1px)}
.pd-anh-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--ak);color:var(--akT);font-size:14px}
.pd-anh-txt{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.pd-anh-txt b{font-size:14px;font-weight:600;color:var(--fg);line-height:1.35;overflow-wrap:anywhere}
.pd-anh-txt small{font-size:12px;color:var(--soft)}
/* Auf schmalen Geräten steht das Wort dem Namen im Weg – dort genügt
   das Symbol, das dasselbe sagt. */
.pd-anh-wort{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--ak)}
@media(max-width:520px){.pd-anh-wort{display:none}}
@media(max-width:820px){.hs-raster{grid-template-columns:1fr}.hs-menue{position:static;display:flex;gap:7px;overflow-x:auto;padding-bottom:6px}
.hs-menue-titel{display:none}.hs-menue a{white-space:nowrap;background:var(--flae)}}
/* Hilfe-Übersicht */
.hu-kopf{padding:6px 0 22px;max-width:62ch}
.hu-kopf h1{font-family:var(--disp,inherit);font-size:clamp(30px,4.2vw,46px);line-height:1.06;margin-bottom:10px}
.hu-kopf p{color:var(--soft);font-size:17px}
.hu-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hu-kachel{position:relative;display:block;background:var(--flae);border-radius:var(--r,16px);padding:20px 22px 44px;color:inherit;transition:transform .25s,box-shadow .25s}
.hu-kachel:hover{transform:translateY(-3px);box-shadow:0 14px 34px -20px rgba(0,0,0,.3)}
.hu-kachel b{display:block;font-size:16px;font-weight:700;color:var(--fg);margin-bottom:5px}
.hu-kachel span{font-size:13.5px;color:var(--soft);line-height:1.55}
.hu-kachel i{position:absolute;left:22px;bottom:17px;font-style:normal;font-size:15px;color:var(--ak)}
@media(max-width:820px){.hu-raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hu-raster{grid-template-columns:1fr}}
.hu-kontakt{margin:clamp(34px,5vw,58px) 0 clamp(50px,7vw,90px);background:var(--flae);border-radius:var(--r,18px);padding:clamp(24px,3vw,36px);text-align:center}
.hu-kontakt b{display:block;font-size:19px;color:var(--fg);margin-bottom:6px}
.hu-kontakt p{color:var(--soft);margin-bottom:16px}
.hu-wege{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.hu-wege .pk-knopf{display:inline-flex;text-decoration:none}
.hu-tel{font-weight:700;color:var(--fg)}
/* ── Fragen-Ziehharmonika ───────────────────────────────────── */
.fa{padding:clamp(30px,4vw,52px) 0 0}
.fa-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.fa-kopf h2{font-family:var(--disp,inherit);font-size:clamp(21px,3vw,30px);font-weight:800;letter-spacing:-.02em}
.fa-kopf a{font-size:13.5px;font-weight:700;color:var(--ak)}
.fa-liste{display:grid;gap:1px}
.fa-el{border-bottom:1px solid var(--fein)}
.fa-el summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;
  list-style:none;padding:17px 2px;font-size:16px;font-weight:600;color:var(--fg)}
.fa-el summary::-webkit-details-marker{display:none}
.fa-el summary svg{width:13px;height:13px;flex:none;color:var(--ak);transition:transform .25s}
.fa-el[open] summary svg{transform:rotate(45deg)}
/* Auf und Zu mit Uebergang (5.9.2026)
   <details> kennt keinen Uebergang: Der Inhalt ist da oder weg. Das
   Skript setzt darum --fa-h auf die gemessene Hoehe und laesst die
   Hoehe darauf zulaufen; ohne Skript bleibt es beim harten, aber
   funktionierenden Verhalten des Browsers. */
.fa-el div{padding:0 2px 18px;color:var(--soft);font-size:15px;line-height:1.7;max-width:74ch}
.fa-el.fa-weich>div{overflow:hidden;height:var(--fa-h,auto);transition:height .3s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.fa-el.fa-weich>div{transition:none}}
/* ── Merkliste & 404 ────────────────────────────────────────── */
.mlkopf{padding:10px 0 4px}
.mlkopf h1{font-family:var(--disp,inherit);font-size:clamp(28px,3.8vw,42px);margin-bottom:8px}
.mlkopf p{color:var(--soft)}
.ml-leer{text-align:center;padding:60px 20px 100px;color:var(--soft)}
.ml-leer p{margin-bottom:18px}
.ml-leer .pk-knopf{text-decoration:none}
.v404{text-align:center;padding:clamp(60px,10vw,120px) 0 clamp(70px,11vw,130px);max-width:56ch;margin:0 auto}
.v404-zahl{font-family:var(--disp,inherit);font-size:clamp(60px,12vw,120px);font-weight:800;line-height:1;color:var(--flae);letter-spacing:-.04em}
.v404 h1{font-size:clamp(24px,3.4vw,34px);margin:-10px 0 12px}
.v404 p{color:var(--soft);margin-bottom:24px}
.v404 .pk-knopf{text-decoration:none}
.v404 .kat-leiste{justify-content:center}
.v404 .kat-chip{text-decoration:none}
/* ── Fuss: Vertrauensband, Zahlarten, Netze ─────────────────── */
.sf-band{border-top:1px solid var(--fein);margin-top:clamp(40px,6vw,72px);background:var(--bg)}
.sf-band-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 0}
.sf-band-el{display:flex;gap:12px;align-items:flex-start}
.sf-band-el svg{width:22px;height:22px;flex:none;stroke:var(--ak);margin-top:2px}
.sf-band-el b{display:block;font-size:14px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.sf-band-el i{font-style:normal;font-size:12.5px;color:var(--soft);line-height:1.5}
@media(max-width:900px){.sf-band-in{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:480px){.sf-band-in{grid-template-columns:1fr}}
.shopfuss.gross{margin-top:0}
.shopfuss.gross .sf-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px}
.sf-social{display:flex;gap:9px;margin-top:16px}
.sf-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--bg) 12%,transparent);transition:background .2s,transform .2s}
.sf-social a:hover{background:color-mix(in srgb,var(--bg) 24%,transparent);transform:translateY(-2px)}
.sf-social svg{width:16px;height:16px}
.sf-zahlung{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 0 20px;font-size:12px;
  color:color-mix(in srgb,var(--bg) 55%,transparent)}
.sf-zahlung b{border:1px solid color-mix(in srgb,var(--bg) 22%,transparent);border-radius:var(--r,6px);
  padding:3px 9px;font-size:10.5px;letter-spacing:.06em;color:color-mix(in srgb,var(--bg) 82%,transparent)}
@media(max-width:1000px){.shopfuss.gross .sf-grid{grid-template-columns:1fr 1fr 1fr;gap:26px}}
@media(max-width:640px){.shopfuss.gross .sf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.shopfuss.gross .sf-grid{grid-template-columns:1fr}}
/* Der Grundfuss ist für eine DUNKLE Fläche gebaut – alle Farben werden aus
   var(--bg) gemischt. «Studio» stellt den Fuss hell; dort wurde daraus
   Weiss auf Hellgrau, also praktisch unsichtbar. Betroffen waren Slogan,
   Adresse, Zahlungsarten und die Zeile ganz unten. Die dunklen Vorlagen
   bleiben unberührt. */
[data-shop="studio"] .shopfuss .sf-slogan,
[data-shop="studio"] .shopfuss .sf-kontakt span,
[data-shop="studio"] .shopfuss .sf-kontakt a,
[data-shop="studio"] .shopfuss .sf-spalte p,
[data-shop="studio"] .shopfuss .sf-spalte a,
[data-shop="studio"] .shopfuss .sf-zahlung,
[data-shop="studio"] .shopfuss .sf-unten,
[data-shop="studio"] .shopfuss .sf-unten a{color:var(--soft)}
[data-shop="studio"] .shopfuss .sf-kontakt a:hover,
[data-shop="studio"] .shopfuss .sf-spalte a:hover,
[data-shop="studio"] .shopfuss .sf-unten a:hover{color:var(--fg)}
[data-shop="studio"] .shopfuss .sf-unten{border-top-color:var(--lin)}
[data-shop="studio"] .sf-zahlung b{border-color:var(--lin);color:var(--fg)}
[data-shop="studio"] .sf-social a{background:rgba(0,0,0,.055)}
[data-shop="studio"] .sf-social a:hover{background:rgba(0,0,0,.1)}
/* ── Nach oben ──────────────────────────────────────────────── */
.hoch{position:fixed;right:18px;bottom:18px;z-index:65;width:42px;height:42px;border-radius:50%;border:1px solid var(--lin);
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);color:var(--fg);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 24px -10px rgba(0,0,0,.3);opacity:0;transform:translateY(10px);
  transition:opacity .25s,transform .25s}
.hoch:not([hidden]){opacity:1;transform:none}
.hoch svg{width:17px;height:17px}
@media(max-width:520px){.hoch{right:12px;bottom:74px}}
/* ── Selber gestalten ───────────────────────────────────────────
   Steht ueber dem Nach-oben-Knopf, nicht neben ihm: 18 + 42 + 12 = 72.
   Gleiche Hoehe (42px) und gleiche rechte Kante wie .hoch, damit die
   beiden ein Paar bilden. z-index 64 liegt unter .hoch (65), der
   Kaufleiste (70), der Korb-Schublade (200), dem Cookie-Banner (260)
   und der Meldung (300) - bei einer Ueberschneidung verliert dieser
   Knopf, nie das Wichtigere. Farben aus dem Laden, nichts fest
   verdrahtet. */
/* ── Warenkorb: Gratisversand-Balken & Empfehlungen ─────────── */
.wk-gratis{margin:0 0 14px}
.wk-gratis-txt{font-size:12.5px;font-weight:600;color:var(--soft);margin-bottom:6px;display:block}
.wk-gratis-txt b{color:var(--ak)}
.wk-gratis-balken{height:5px;border-radius:99px;background:var(--fein);overflow:hidden}
.wk-gratis-balken i{display:block;height:100%;width:0;border-radius:99px;background:var(--ak);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.wk-tipp{border-top:1px solid var(--fein);padding-top:13px;margin-top:4px}
.wk-tipp-titel{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:9px}
.wk-tipp-el{display:flex;align-items:center;gap:11px;padding:7px 0}
.wk-tipp-el img,.wk-tipp-leer{width:42px;height:42px;border-radius:var(--r,9px);object-fit:cover;background:var(--flae);flex:none}
.wk-tipp-el b{display:block;font-size:13px;font-weight:600;color:var(--fg);line-height:1.3}
.wk-tipp-el small{font-size:12.5px;color:var(--soft)}
.wk-tipp-plus{margin-left:auto;border:1px solid var(--lin);background:none;color:var(--fg);border-radius:99px;
  width:28px;height:28px;font-size:15px;line-height:1;cursor:pointer;flex:none}
.wk-tipp-plus:hover{border-color:var(--ak);color:var(--ak)}
/* ── Produktseite: Lieferhinweis, Teilen, Lightbox ──────────── */
.pd-lager{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;margin-bottom:14px}
.pd-lager::before{content:"";width:8px;height:8px;border-radius:50%;background:#2E7D32}
.pd-lager.ist-knapp::before{background:#E8A33D}
.pd-lager.ist-aus::before{background:#C0392B}
.pd-teilen{border:none;background:none;color:var(--soft);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:7px}
.pd-teilen:hover{color:var(--fg)}
.pd-teilen svg{width:15px;height:15px}
.pd-haupt{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.86);display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .25s;padding:24px}
.lb.auf{opacity:1;pointer-events:auto}
.lb img{max-width:min(1100px,94vw);max-height:88vh;object-fit:contain;border-radius:8px}
.lb-zu{position:absolute;top:16px;right:18px;border:none;background:rgba(255,255,255,.12);color:#fff;
  width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer}
/* ── Handy: Menü zu Schublade, Bühne ruhiger ────────────────── */
/* ── DER LADENNAME DARF DIE LEISTE NICHT SCHIEBEN ────────────────
   min-width ist bei Flex-Kindern «auto», nicht 0: Sie werden nie
   schmaler als ihr Inhalt. Bei rund 961px - dort erscheint die volle
   Navigation neben dem Namen - schob «Pixify Print - deine
   Onlinedruckerei in der Ostschweiz» die Leiste über den Fensterrand:
   Das Mega-Menü begann bei 227px und endete bei 987px in einem
   961px-Fenster, die ganze Seite liess sich 26px seitwärts schieben.
   Mit min-width:0 gibt der Name nach.
   overflow-wrap gehört zwingend dazu: Ohne es ragt statt der Leiste
   das längste Wort aus seinem Kasten - derselbe Fehler, nur kleiner.
   Beides zusammen gemessen, einzeln reicht keines. */
.kopf .marke{min-width:0;overflow-wrap:anywhere}
@media(max-width:960px){
  /* ── EINZEILIG, SOLANGE DER MENÜKNOPF DA IST ───────────────────
     Die Kürzung galt erst ab 560px. Bei 561px stand «Pixify Print -
     deine Onlinedruckerei in der Ostschweiz» dreizeilig in der Leiste
     und machte sie 111px hoch statt 54 - gemessen, nicht vermutet.
     Jetzt reicht sie bis 960px, also genau so weit wie der
     Menüknopf: Wo die Leiste eng ist, endet der Name mit … statt
     die Leiste aufzublähen.
     Weiter hinauf NICHT: Ab 961px ist die Leiste breit genug, und
     ein abgeschnittener Name neben viel Luft sähe nach Fehler aus.
     Dort darf er wie bisher umbrechen. */
  .kopf .marke{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:min(56vw,460px)}
  .hnav{display:none}
  .kopf-burger{display:block}
  .kopf .marke{margin-right:auto}
  .zur-site{display:none}
  .kk-raster{gap:16px}
}
@media(max-width:560px){
  .kopf-ic{width:34px;height:34px}
  .kopf-rechts{gap:2px}
  .sreihe-kopf{margin-bottom:14px}
  /* ── NUR IN DER LADENLEISTE, und darum «.kopf .marke» ────────────
     Neben Menüknopf und vier Symbolen bleibt wenig Platz: Der
     Ladenname brach zweizeilig um und machte die Leiste doppelt so
     hoch. Das Abschneiden ist dort richtig.

     Ungeschrieben stand hier «.marke» - und .marke gibt es ein
     zweites Mal, im Wartungs-Schleier. Dort ist die ganze Breite
     frei, und trotzdem wurde abgeschnitten: «Pixify Print - deine
     Onlinedruckerei in der Ostschweiz» las sich auf dem Handy als
     «Pixify Print - d…», links angeschlagen statt mittig, weil auch
     das margin-right:auto der 960er-Regel mit hineinlief. Gemeldet
     am 5.9.2026 mit einem Bild von pixifyprint.ch.

     Beide Regeln tragen jetzt den Kopf im Namen. Der Schleier setzt
     sein eigenes .wartung-schleier .marke daneben und bleibt heil. */
  .kopf .marke{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:44vw}
  .kopf .marke small{font-size:9.5px;letter-spacing:.08em}
  .kopf{min-height:52px}
}
@media(max-width:360px){.kopf-ic#suchAuf~.konto-knopf{display:none}}
/* Das Preisschild auf dem Bühnenbild: «Studio» setzt es mittig als Pille,
   die alte Handy-Regel zog es links und rechts auf die volle Breite. */
@media(max-width:760px){
  [data-shop="studio"] .hero-bild-tag{left:50%;right:auto;translate:-50% 0;
    width:auto;max-width:calc(100% - 28px);flex-wrap:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .mega,.mobmenu,.sv,.hoch,.pk-schnell,.pk-merk{transition:none}
}.pxa-adminband{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;flex-shrink:0;padding:7px 14px;background:var(--ak,#1A2332);color:var(--akT,#fff);background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.16) 0 9px,rgba(0,0,0,0) 9px 18px);font-family:inherit;font-size:13px;line-height:1.3}
.pxa-adminband.ist-fest{position:fixed;top:0;left:0;right:0;z-index:9000;box-shadow:0 2px 16px rgba(0,0,0,.25)}
.pxa-adminband-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxa-adminband-btn{flex:none;background:rgba(255,255,255,.18);border:1px solid currentColor;color:inherit;border-radius:var(--rk,var(--r,8px));padding:5px 12px;font:inherit;font-weight:700;line-height:1.2;cursor:pointer}
.pxa-adminband-btn:hover{background:rgba(255,255,255,.32)}
body.hat-adminband{padding-top:44px}
body.hat-adminband header{top:44px}
body.hat-adminband .wk{top:44px}
@media(max-width:520px){.pxa-adminband{font-size:12px;gap:8px}}