:root{--bg:#FFFFFF;--fg:#0B0F19;--ak:#0EA5E9;--akT:#FFFFFF;--soft:rgba(11,15,25,.70);--fein:#E3E7EF;--flae:#F4F6FA;--lin:#E3E7EF;--disp:Outfit, system-ui, sans-serif;--aktion:#C0392B;--aktionT:#FFFFFF}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Outfit, 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}
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}
[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}
.hero-bild-rahmen{display:block;aspect-ratio: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:cover}
.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: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}
.wartung-schleier .marke{font-size:26px;margin-bottom:10px}
.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}
.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}
.wk-zusatz label{display:flex;align-items:center;gap:9px;font-size:14px;padding:5px 0;cursor:pointer}
.wk-zusatz label span{flex:1;display:flex;flex-direction:column}
.wk-zusatz label small{opacity:.65;font-size:12px}
.wk-zusatz label i{font-style:normal;font-weight:600}
.wk-zusatz input{width:17px;height:17px;accent-color:var(--ak);cursor:pointer}
/* 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}
.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}
.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)}
.ko{max-width:860px;padding-top:38px;padding-bottom:70px}
.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}
.ko-kopf .ko-link{width:auto;margin:0;flex:0 0 auto}
.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}
.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}
@media(max-width:760px){.ko-karten{grid-template-columns:1fr}.ko-adr{grid-template-columns:1fr}}
/* 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}
.wk-gut{margin-bottom:12px}
.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}
.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}
.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}
.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}
.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}
/* ── 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}
/* Feste Hoehe statt Seitenverhaeltnis: so waechst das Bild auf grossen
   Schirmen mit, bleibt in der Kachel aber innerhalb der 840. */
[data-shop="studio"] .hero-bild-rahmen{aspect-ratio:auto;height:min(40vh,430px);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:cover}
[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;border-radius:var(--r,20px);overflow:hidden;margin:clamp(14px,2.5vw,26px) 0 10px;height:clamp(430px,58vh,640px);background:var(--flae)}
.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%}
.ghero-folie img{width:100%;height:100%;object-fit:cover}
.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: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;border-radius:var(--r,22px);overflow:hidden;background:var(--flae);min-height:300px}
.dhero-bild a{position:absolute;inset:0;display:block}
.dhero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.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: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;margin:clamp(26px,4vw,44px) auto 0;max-width:1020px;aspect-ratio:21/9;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:cover;transition:transform .8s ease}
.sehero-karte:hover img{transform:scale(1.03)}
@media(max-width:640px){.sehero-karte{aspect-ratio: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-farbe{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;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:cover;opacity:.62}
.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}
.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)}
.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}
.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}
.sv-text{font-size:14.5px;color:var(--soft);line-height:1.6;margin-bottom:18px}
.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}}
/* ── Kategorie-Kacheln auf der Startseite ───────────────────── */
.kkband{padding:clamp(30px,4vw,52px) 0 0}
.kkband-titel{font-family:var(--disp,inherit);font-size:clamp(21px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin-bottom:20px}
.kk-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.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)}
.kk-bild img{width:100%;height:100%;object-fit:cover;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}
.katkopf-bild{border-radius:var(--r,20px);overflow:hidden;aspect-ratio:16/10;background:var(--flae)}
.katkopf-bild img{width:100%;height:100%;object-fit:cover}
@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-farbe{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}
/* Farbgruppen: runder Punkt statt Wort. Der Name steckt in
   data-kf-name und kommt als Sprechblase heraus - beim Darueberfahren
   mit der Maus und beim Antippen (dann greift :focus). */
.kf-chip.kf-farbe{position:relative;width:34px;height:34px;padding:0;border-radius:50%;
  background:var(--kf-ton,#ccc);border:1.5px solid rgba(0,0,0,.18)}
.kf-chip.kf-farbe:hover:not(:disabled){border-color:rgba(0,0,0,.42)}
.kf-chip.kf-farbe[aria-pressed=true]{background:var(--kf-ton,#ccc);border-color:var(--bg);
  box-shadow:0 0 0 2px var(--ak)}
/* Die Blase steht UNTER dem Punkt. Ueber ihm sitzt der Gruppentitel
   («FARBE») nur neun Pixel entfernt - dort wuerde sie ihn verdecken. */
.kf-farbe::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-farbe::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-farbe:hover::after,.kf-farbe:hover::before,
.kf-farbe:focus::after,.kf-farbe: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}
.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}
@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)}
.fa-el div{padding:0 2px 18px;color:var(--soft);font-size:15px;line-height:1.7;max-width:74ch}
/* ── 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}}
/* ── 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 ────────────────── */
@media(max-width:960px){
  .hnav{display:none}
  .kopf-burger{display:block}
  .marke{margin-right:auto}
  .zur-site{display:none}
  .kk-raster{gap:12px}
}
@media(max-width:560px){
  .kopf-ic{width:34px;height:34px}
  .kopf-rechts{gap:2px}
  .sreihe-kopf{margin-bottom:14px}
  /* Neben Menüknopf und vier Symbolen bleibt wenig Platz: Der Ladenname
     brach zweizeilig um und machte die Leiste doppelt so hoch. */
  .marke{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:44vw}
  .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}
}[data-shop="galerie"] h1,[data-shop="galerie"] h2,[data-shop="galerie"] h3,[data-shop="galerie"] .marke,[data-shop="galerie"] .shero h1,[data-shop="galerie"] .shero p,[data-shop="galerie"] .hero h1,[data-shop="galerie"] .pk-info h3,[data-shop="galerie"] .pk-preis{font-family:var(--disp)}