/* ═══ Jungheit-Shop – Design „K3 Panorama“ (Ivo 19.10.2026) ═══
   Standard: dunkel (Silbernacht). Heller Modus: Farben von „W3 Kino im Wasser“, Aufbau bleibt gleich.
   Regeln: nichts ragt über den Kasten (Knoepfe in flex-wrap, minmax(0,1fr), overflow-wrap), keine feste Breite ueber 1180 px. */
:root{
  --grund:#040b12; --grund2:#08131d; --flaeche:#0b1824; --text:#e8f1f5; --text2:#a9bcc6; --text3:#7d919c; --titel:#ffffff;
  --g1:#dff0f7; --g2:#9fc4d4; --g3:#5d8597; --lrgb:170,205,220;
  --verlauf:linear-gradient(180deg,#ffffff 0%,#eef3f6 30%,#cfdde4 62%,#a9bdc7 100%);
  --textverlauf:linear-gradient(180deg,#ffffff 0%,#d6e9f1 45%,#8fb6c7 100%);
  --knopf-text:#143240; --zweit-bg:rgba(255,255,255,.04); --feld-bg:rgba(255,255,255,.05); --option-bg:#0b1824; --kachel-bg:rgba(255,255,255,.04);
  --schatten:rgba(0,0,0,.45); --karte-bg:#07111a; --buehne-bg:#050d14; --balken:#000; --kopf-bg:rgba(4,11,18,.82);
  --buehne-licht:conic-gradient(from 180deg at 50% -10%,transparent 156deg,rgba(200,235,250,.10) 170deg,rgba(200,235,250,.26) 180deg,rgba(200,235,250,.10) 190deg,transparent 204deg);
  --nebel-filter:brightness(.42) saturate(1.2); --nebel-deckung:0; --glut:rgba(255,255,255,.9);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif; --ziffer:'Bodoni Moda',Georgia,serif;
  --rk:8px; --rb:12px; color-scheme:dark;
}
:root[data-modus="hell"]{
  --grund:#eef5f8; --grund2:#e3eef3; --flaeche:#ffffff; --text:#14303d; --text2:#4b6573; --text3:#6f8692; --titel:#0e2733;
  --g1:#2c6075; --g2:#5b8ea3; --g3:#a7c6d3; --lrgb:110,150,168;
  --textverlauf:linear-gradient(180deg,#5d93aa 0%,#2b5f74 55%,#4f8aa2 100%);
  --zweit-bg:rgba(255,255,255,.72); --feld-bg:rgba(255,255,255,.8); --option-bg:#fff; --kachel-bg:rgba(255,255,255,.62);
  --schatten:rgba(40,80,100,.14); --karte-bg:#ffffff; --buehne-bg:#dcebf1; --balken:#fff; --kopf-bg:rgba(238,245,248,.86);
  --buehne-licht:none; --nebel-filter:brightness(1.02) saturate(1.05); --nebel-deckung:1; color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--grund);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--grund);color:var(--text);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.65;overflow-x:hidden}
html.wechsel *{transition:background-color .45s,color .45s,box-shadow .45s,border-color .45s!important}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.innen{width:min(1180px,100% - 48px);margin:0 auto}
.schmal{width:min(820px,100% - 48px);margin:0 auto}
.goldtext{background:var(--textverlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--g2);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kicker::before,.kicker::after{content:"";height:1px;width:46px;background:linear-gradient(90deg,transparent,rgba(var(--lrgb),.9))}
.kicker::after{background:linear-gradient(90deg,rgba(var(--lrgb),.9),transparent)}
.kicker.mitte{justify-content:center}
.kicker.links::before{display:none}
h1,h2,h3{font-family:var(--serif);font-weight:300;color:var(--titel);line-height:1.08;overflow-wrap:anywhere}
h1 em,h2 em,h3 em{font-style:italic}
.abschnitt{padding:90px 0 0}
.abschnitt-kopf{text-align:center;margin-bottom:34px}
.abschnitt-kopf h2{font-size:clamp(38px,4.4vw,62px);margin:14px 0 10px}
.abschnitt-kopf p{color:var(--text2);max-width:640px;margin:0 auto}
.leise{color:var(--text3)}
.hinweis{border-radius:var(--rk);padding:16px 18px;background:var(--kachel-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.3);color:var(--text2);font-size:15.5px}
.hinweis b{color:var(--titel);font-weight:500}

/* Knoepfe – abgerundet wie im Profit-Planet-Shop; Hauptknopf wie die Chromkappe der Flasche */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:15px 26px;border-radius:var(--rb);border:0;white-space:nowrap;text-align:center;transition:transform .2s,box-shadow .25s,filter .25s}
.knopf.haupt{background:var(--verlauf);color:var(--knopf-text);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(60,90,105,.25),0 0 0 1px rgba(110,150,168,.45),0 10px 26px rgba(60,110,135,.18)}
.knopf.haupt:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(60,110,135,.7),0 14px 32px rgba(60,110,135,.3)}
.knopf.zweit{background:var(--zweit-bg);color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.5)}
.knopf.zweit:hover{box-shadow:inset 0 0 0 1px rgba(var(--lrgb),1);color:var(--g1)}
.knopf[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap}
.knopfreihe.mitte{justify-content:center}
.knopf.breit{width:100%}
.knopf.klein{padding:11px 16px;font-size:10.5px}

/* Ansage + Kopf */
.ansage{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:9px 16px;font-size:10.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--g1);background:linear-gradient(90deg,transparent,rgba(var(--lrgb),.1),transparent);border-bottom:1px solid rgba(var(--lrgb),.16)}
.kopf{position:sticky;top:0;z-index:40;background:var(--kopf-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(var(--lrgb),.18)}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.wortmarke{display:flex;flex-direction:column;line-height:1;min-width:0}
.wortmarke b{font-family:var(--sans);font-weight:400;font-size:24px;letter-spacing:.32em;text-transform:uppercase}
.wortmarke span{font-size:8.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--text3);margin-top:6px}
.kopf nav{display:flex;gap:28px;font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--text2)}
.kopf nav a:hover,.kopf nav a.an{color:var(--g1)}
.kopf-rechts{display:flex;align-items:center;gap:10px}
.kopf-rechts .knopf{padding:11px 16px;font-size:10.5px}
.rund{width:42px;height:42px;flex:0 0 42px;border-radius:999px;border:0;display:grid;place-items:center;background:var(--zweit-bg);color:var(--g1);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.5);transition:box-shadow .2s,transform .3s}
.rund:hover{box-shadow:inset 0 0 0 1px rgba(var(--lrgb),1)}
.rund svg{width:18px;height:18px}
#modus:hover{transform:rotate(18deg)}
#modus .mond{display:none}:root[data-modus="hell"] #modus .sonne{display:none}:root[data-modus="hell"] #modus .mond{display:block}
.korbzahl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:rgba(0,0,0,.18);font-size:10px;letter-spacing:0}
#menue-auf{display:none}
.schublade{position:fixed;inset:0;z-index:60;display:none}
.schublade.offen{display:block}
.schublade .dunkel{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.schublade .tafel{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--grund2);box-shadow:-20px 0 60px rgba(0,0,0,.4);padding:22px 22px 30px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.schublade .tafel a{padding:14px 4px;border-bottom:1px solid rgba(var(--lrgb),.18);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.schublade .zu{align-self:flex-end;margin-bottom:10px}

/* ── Titelbild K3: Breitbild-Fenster, Balken mit Silberlinie, Titel mittig darunter ── */
.held{position:relative;padding:0 0 30px;background:var(--grund)}
.held .band{position:relative;height:min(64vh,620px);border-top:56px solid var(--balken);border-bottom:56px solid var(--balken);box-sizing:content-box;overflow:hidden;background:radial-gradient(ellipse 40% 80% at 50% 50%,rgba(160,210,235,.22),transparent 70%)}
.held .band::before,.held .band::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--lrgb),.7),transparent);z-index:3}
.held .band::before{top:0}.held .band::after{bottom:0}
.held .bild{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:1.45;transform:translateX(-50%);background:url(../bilder/wasser-no4.webp) center/auto 100% no-repeat;-webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 50%,#000 30%,rgba(0,0,0,.42) 52%,transparent 72%);mask-image:radial-gradient(ellipse 50% 100% at 50% 50%,#000 30%,rgba(0,0,0,.42) 52%,transparent 72%)}
.held .text{text-align:center;padding-top:44px;position:relative;z-index:4}
.held h1{font-size:clamp(46px,6.4vw,104px);margin:16px 0 14px}
.held .unter{color:var(--text2);font-size:19px;max-width:560px;margin:0 auto}
.held .knopfreihe{justify-content:center;margin-top:28px}
.kapitel{display:flex;max-width:860px;margin:40px auto 0;border-top:1px solid rgba(var(--lrgb),.35)}
.kapitel a{flex:1;min-width:0;padding:14px 10px 0;text-align:center;font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--text2)}
.kapitel a b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;letter-spacing:0;text-transform:none;color:var(--g1)}
.kapitel a:hover{color:var(--g1)}
.staub{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.staub i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(190,230,250,.8);opacity:0;animation:schweben linear infinite}
:root[data-modus="hell"] .staub i{box-shadow:0 0 6px 2px rgba(255,255,255,.9),inset 0 0 2px rgba(80,140,170,.6)}
@keyframes schweben{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-220px) translateX(30px) scale(1.1);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Seitenkopf fuer Unterseiten: schmales Breitbild */
.seitenkopf{position:relative;text-align:center;padding:56px 0 6px}
.seitenkopf h1{font-size:clamp(42px,5vw,76px);margin:14px 0 10px}
.seitenkopf p{color:var(--text2);max-width:640px;margin:0 auto}

/* Vorteile */
.vorteile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(var(--lrgb),.16);border-bottom:1px solid rgba(var(--lrgb),.16);margin-top:50px}
.vorteile div{padding:22px 16px;text-align:center;position:relative;min-width:0}
.vorteile div+div::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:linear-gradient(180deg,transparent,rgba(var(--lrgb),.5),transparent)}
.vorteile b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--g1);line-height:1.25}
.vorteile span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text3)}

/* Filter */
.filter{display:flex;flex-direction:column;align-items:center;gap:16px;margin:30px 0 30px}
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.chip{font-size:10.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;padding:11px 18px;border-radius:999px;border:0;background:var(--feld-bg);color:var(--text2);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.35);transition:color .2s,box-shadow .2s}
.chip:hover{color:var(--g1);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.9)}
.chip.an{background:var(--verlauf);color:var(--knopf-text);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(110,150,168,.6)}
.chip i{font-style:normal;opacity:.65;margin-left:6px}
.felder{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.feld{display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:var(--rb);background:var(--feld-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.3);min-width:0}
.feld:focus-within{box-shadow:inset 0 0 0 1px var(--g2)}
.feld svg{width:16px;height:16px;flex:0 0 16px;color:var(--g2)}
.feld input,.feld select{background:transparent;border:0;font-size:16px;padding:12px 0;min-width:0}
.feld input{width:230px}.feld select{cursor:pointer}
.feld select option{background:var(--option-bg);color:var(--text)}
.feld input:focus,.feld select:focus{outline:none}
.feld small{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text3)}
.treffer{text-align:center;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text3);margin:-10px 0 24px}

/* Produktkarten: quer wie im Kino-Muster, Buehne mit Lichtkegel (dunkel) oder Wassernebel (hell) */
.gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.gitter.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.karte{position:relative;display:flex;border-radius:var(--rk);overflow:hidden;background:var(--karte-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.25),0 20px 50px var(--schatten);transition:transform .35s,box-shadow .35s;min-width:0}
.karte:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.6),0 30px 64px var(--schatten)}
.gitter.drei .karte{flex-direction:column}
.buehne{position:relative;flex:0 0 44%;overflow:hidden;background:var(--buehne-bg);min-height:100%;display:block}
.gitter.drei .buehne{flex:none;aspect-ratio:1/1;min-height:0}
.buehne::before{content:"";position:absolute;inset:-20px;background:var(--buehne-licht),var(--buehne-bg)}
:root[data-modus="hell"] .buehne::before{background:url(../bilder/wasser-nebel.webp) center/cover}
.buehne .glut{position:absolute;left:50%;top:44%;width:70%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--glut),rgba(255,255,255,.25) 35%,transparent 68%)}
.buehne .boden{position:absolute;left:0;right:0;bottom:0;height:30%;background:url(../bilder/wasser-boden.webp) center top/cover;opacity:.35;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
:root[data-modus="hell"] .buehne .boden{opacity:.75}
.buehne .flaschen{position:absolute;left:0;right:0;bottom:17%;top:12%;display:flex;align-items:flex-end;justify-content:center;gap:4%}
.buehne .flaschen img{height:100%;width:auto;max-width:44%;object-fit:contain;filter:drop-shadow(0 16px 16px rgba(0,0,0,.45));transition:transform .6s ease;-webkit-box-reflect:below 2px linear-gradient(transparent 70%,rgba(255,255,255,.22))}
.buehne .flaschen.drei{gap:2%;left:6%;right:6%}.buehne .flaschen.drei img{height:74%;max-width:31%}.buehne .flaschen.drei img:nth-child(2){height:88%}
.buehne .flaschen.tiegel img{height:52%;max-width:70%}
.karte:hover .buehne .flaschen img{transform:translateY(-6px)}
.buehne img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.karte:hover .buehne img.foto{transform:scale(1.06)}
.buehne .nr{position:absolute;left:16px;bottom:6px;z-index:3;font-family:var(--ziffer);font-size:46px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--g2)}
:root[data-modus="hell"] .buehne .nr{color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 12px rgba(30,70,90,.55);font-family:var(--serif);font-style:italic}
.buehne .marke{position:absolute;left:14px;top:14px;z-index:3;font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--verlauf);color:var(--knopf-text)}
.buehne .neu{position:absolute;right:14px;top:14px;z-index:3;font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.gutschein{position:absolute;left:50%;top:46%;width:72%;aspect-ratio:1.6;transform:translate(-50%,-50%) rotate(-6deg);border-radius:14px;background:linear-gradient(135deg,#0f2433,#050b11);box-shadow:inset 0 0 0 1px rgba(200,230,245,.8),inset 0 0 0 7px #08131c,inset 0 0 0 8px rgba(200,230,245,.35),0 30px 50px rgba(0,0,0,.5);display:grid;place-items:center;text-align:center;color:#fff}
.gutschein b{font-family:var(--sans);font-weight:400;letter-spacing:.3em;font-size:clamp(14px,1.6vw,20px)}
.gutschein span{display:block;font-size:8.5px;letter-spacing:.3em;color:#9fc4d4;margin-top:6px}
.inhalt{padding:20px 20px 20px;display:flex;flex-direction:column;flex:1;min-width:0}
.inhalt .kat{font-size:10px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--g2)}
.inhalt h3{font-family:var(--sans);font-weight:400;font-size:18px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;margin:8px 0 2px}
.inhalt h3 a:hover{color:var(--g1)}
.inhalt .zusatz{font-size:15px;color:var(--text3)}
.duefte{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 2px}
.duefte span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.25)}
.preis{margin:14px 0 16px;padding-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(var(--lrgb),.18)}
.preis b{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1;color:var(--titel)}
.preis span{font-size:13.5px;color:var(--text3)}
.knoepfe{display:grid;gap:9px;margin-top:auto}
.knoepfe .knopf{padding:13px 14px;font-size:10.5px;width:100%;white-space:normal}

/* Ritual */
.schritte{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.schritte a{border-radius:var(--rk);padding:20px 12px;background:var(--kachel-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.22);text-align:center;min-width:0;transition:box-shadow .25s,transform .25s}
.schritte a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.7)}
.schritte b{display:block;font-family:var(--ziffer);font-size:40px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--g2);margin-bottom:8px}
:root[data-modus="hell"] .schritte b{color:var(--g1);-webkit-text-stroke:0}
.schritte strong{display:block;font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--titel)}
.schritte span{display:block;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--text2);margin-top:4px}

/* Zweispaltig: Manufaktur, Haendler */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.zwei.text-rechts .bildfeld{order:-1}
.bildfeld{position:relative;border-radius:var(--rk);overflow:hidden;aspect-ratio:4/3.4;box-shadow:0 0 0 1px rgba(var(--lrgb),.4),0 30px 70px var(--schatten)}
.bildfeld img{width:100%;height:100%;object-fit:cover}
.bildfeld.wasser img{object-position:center 40%}
.zwei h2{font-size:clamp(36px,3.8vw,56px);margin:14px 0 14px}
.zwei p{color:var(--text2);margin-bottom:14px}
.zitat{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45;color:var(--titel);border-left:1px solid rgba(var(--lrgb),.6);padding-left:18px;margin:18px 0}
.zitat small{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);margin-top:8px}
.liste{list-style:none;display:grid;gap:10px;margin:14px 0 18px}
.liste li{position:relative;padding-left:24px;color:var(--text2)}
.liste li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;transform:rotate(45deg);box-shadow:inset 0 0 0 1px var(--g2)}
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kacheln div{border-radius:var(--rk);padding:22px 20px;background:var(--kachel-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.22);min-width:0}
.kacheln b{display:block;font-family:var(--serif);font-size:24px;font-weight:500;color:var(--titel);line-height:1.2;margin-bottom:6px}
.kacheln span{color:var(--text2);font-size:15.5px}
.kacheln i{display:block;font-style:normal;font-family:var(--ziffer);font-size:30px;color:transparent;-webkit-text-stroke:1px var(--g2);margin-bottom:6px}
:root[data-modus="hell"] .kacheln i{color:var(--g1);-webkit-text-stroke:0}

/* Produktseite */
.pfad{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);padding:26px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.pfad a:hover{color:var(--g1)}
.produkt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;padding-top:24px;align-items:start}
.galerie .gross{position:relative;border-radius:var(--rk);overflow:hidden;aspect-ratio:1/1;background:var(--buehne-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.3),0 30px 70px var(--schatten)}
.galerie .gross .buehne{position:absolute;inset:0;min-height:0}
.galerie .gross img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.galerie .daumen{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.galerie .daumen button{width:78px;height:78px;border:0;border-radius:var(--rk);overflow:hidden;padding:0;background:var(--buehne-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.3);opacity:.7}
.galerie .daumen button.an{opacity:1;box-shadow:0 0 0 2px var(--g2)}
.galerie .daumen img{width:100%;height:100%;object-fit:cover}
.kaufbox{position:sticky;top:96px;min-width:0}
.kaufbox h1{font-size:clamp(38px,4vw,58px);margin:12px 0 4px}
.kaufbox .unter{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--g1)}
.kaufbox .preis{border-top:0;padding-top:0;margin:18px 0 6px}
.kaufbox .preis b{font-size:40px}
.kaufbox .steuer{font-size:13.5px;color:var(--text3)}
.wahl{margin:22px 0 0}
.wahl > b{display:block;font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
.wahl .chips{justify-content:flex-start}
.mengenzeile{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 12px;align-items:stretch}
.menge{display:flex;align-items:center;border-radius:var(--rb);background:var(--feld-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.35)}
.menge button{width:44px;height:48px;border:0;background:transparent;font-size:20px;color:var(--g1)}
.menge input{width:46px;text-align:center;border:0;background:transparent;font-size:16px;-moz-appearance:textfield}
.menge input::-webkit-outer-spin-button,.menge input::-webkit-inner-spin-button{-webkit-appearance:none}
.mengenzeile .knopf{flex:1 1 220px}
.punkte{list-style:none;display:grid;gap:8px;margin:20px 0}
.punkte li{position:relative;padding-left:24px;color:var(--text2);font-size:16px}
.punkte li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;transform:rotate(45deg);background:var(--g2)}
.klappen{margin-top:26px;border-top:1px solid rgba(var(--lrgb),.22)}
.klappen details{border-bottom:1px solid rgba(var(--lrgb),.22)}
.klappen summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;gap:12px;font-size:11.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--titel)}
.klappen summary::-webkit-details-marker{display:none}
.klappen summary::after{content:"+";font-size:18px;line-height:1;color:var(--g2)}
.klappen details[open] summary::after{content:"–"}
.klappen .klappe{padding:0 0 18px;color:var(--text2);font-size:16px}
.klappen .klappe p+p{margin-top:10px}
.tabelle{width:100%;border-collapse:collapse;font-size:15px}
.tabelle td{padding:8px 0;border-bottom:1px solid rgba(var(--lrgb),.14);vertical-align:top;overflow-wrap:anywhere}
.tabelle td+td{text-align:right;color:var(--titel);padding-left:12px}
.stoffe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.stoffe div{min-width:0}.stoffe b{display:block;font-weight:500;color:var(--titel);font-size:14.5px;overflow-wrap:anywhere}.stoffe span{font-size:14px;color:var(--text3)}
.vertrauen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.vertrauen div{border-radius:var(--rk);padding:12px;text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);background:var(--kachel-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.2);min-width:0}
.vertrauen b{display:block;font-family:var(--serif);font-size:19px;letter-spacing:0;text-transform:none;color:var(--g1);font-weight:500}

/* Warenkorb + Kasse */
.korb-raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:34px;align-items:start;margin-top:30px}
.posten{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px;border-radius:var(--rk);background:var(--karte-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.22);margin-bottom:12px}
.posten .mini{position:relative;width:96px;height:96px;border-radius:var(--rk);overflow:hidden;background:var(--buehne-bg)}
.posten .mini .buehne{position:absolute;inset:0;min-height:0}
.posten .mini .buehne .nr,.posten .mini .buehne .marke,.posten .mini .buehne .neu{display:none}
.posten h3{font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.posten .variante{font-size:14px;color:var(--text3)}
.posten .zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.posten .zeile b{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--titel)}
.posten .menge button{height:38px;width:38px}
.weg{border:0;background:transparent;color:var(--text3);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 0}
.weg:hover{color:var(--g1)}
.summe{position:sticky;top:96px;border-radius:var(--rk);padding:22px;background:var(--karte-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.3),0 20px 50px var(--schatten)}
.summe h3{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--g2);margin-bottom:14px}
.summe .z{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:var(--text2);font-size:15.5px}
.summe .z b{color:var(--titel);font-weight:400;text-align:right}
.summe .gesamt{border-top:1px solid rgba(var(--lrgb),.3);margin-top:8px;padding-top:14px}
.summe .gesamt b{font-family:var(--serif);font-weight:500;font-size:30px}
.summe .balken-frei{height:4px;border-radius:9px;background:rgba(var(--lrgb),.2);overflow:hidden;margin:6px 0 4px}
.summe .balken-frei i{display:block;height:100%;background:var(--verlauf)}
.summe .knopf{margin-top:16px}
.leer{text-align:center;padding:60px 20px;border-radius:var(--rk);background:var(--kachel-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.22)}
.leer p{color:var(--text2);margin:10px 0 20px}
.formular{display:grid;gap:26px}
.formular fieldset{border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.formular legend{grid-column:1/-1;font-size:11.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--g2);margin-bottom:10px}
.formular label{display:grid;gap:6px;font-size:12px;letter-spacing:.1em;color:var(--text3);min-width:0}
.formular label.voll{grid-column:1/-1}
.formular input,.formular select,.formular textarea{width:100%;border:0;border-radius:var(--rb);padding:13px 14px;background:var(--feld-bg);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.3);font-size:16px;color:var(--text)}
.formular select option{background:var(--option-bg)}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--g2)}
.formular .haken{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;letter-spacing:0;color:var(--text2);grid-column:1/-1}
.formular .haken input{width:18px;height:18px;flex:0 0 18px;margin-top:3px;padding:0;accent-color:#8fb6c7}
.formular .haken a{color:var(--g1);text-decoration:underline}
.zahlart{display:flex;gap:10px;flex-wrap:wrap;grid-column:1/-1}
.zahlart span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.3);color:var(--text2)}

/* Rechtliches */
.rechtstext{padding-top:20px}
.rechtstext .reiter{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:24px 0 34px}
.rechtstext h2{font-size:30px;margin:30px 0 10px}
.rechtstext p{color:var(--text2);margin-bottom:10px;overflow-wrap:anywhere}

/* Fuss */
.fuss{margin-top:100px;padding:50px 0 40px;border-top:1px solid rgba(var(--lrgb),.18);background:linear-gradient(180deg,transparent,rgba(var(--lrgb),.05))}
.fuss .spalten{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:30px}
.fuss h4{font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--g2);margin-bottom:12px}
.fuss p,.fuss a{display:block;color:var(--text2);font-size:15px;margin-bottom:6px;overflow-wrap:anywhere}
.fuss a:hover{color:var(--g1)}
.fuss .unten{margin-top:34px;padding-top:18px;border-top:1px solid rgba(var(--lrgb),.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text3)}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(30px);opacity:0;z-index:80;padding:14px 24px;border-radius:999px;background:var(--grund2);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.7),0 20px 50px rgba(0,0,0,.4);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--g1);transition:opacity .3s,transform .3s;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.toast.da{opacity:1;transform:translateX(-50%)}

/* ── Breiten ── */
@media (max-width:1060px){
  .gitter{grid-template-columns:minmax(0,1fr)}
  .gitter.drei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schritte{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kopf nav{gap:18px}
}
@media (max-width:900px){
  .kopf nav{display:none}
  #menue-auf{display:grid}
  .produkt,.korb-raster,.zwei{grid-template-columns:minmax(0,1fr);gap:30px}
  .zwei.text-rechts .bildfeld{order:0}
  .kaufbox,.summe{position:static}
  .fuss .spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kacheln{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .held .band{height:46vh;border-width:30px 0}
  .vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vorteile div:nth-child(3)::before{display:none}
  .karte{flex-direction:column}
  .buehne{flex:none;aspect-ratio:1/1;min-height:0}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .innen,.schmal{width:calc(100% - 32px)}
  .gitter.drei{grid-template-columns:minmax(0,1fr)}
  .ansage span+span{display:none}
  .wortmarke b{font-size:19px;letter-spacing:.26em}
  .wortmarke span{display:none}
  .kopf-rechts{gap:8px}
  .kopf-rechts .korb-text{display:none}
  .feld{flex:1 1 100%}.feld input{width:100%}
  .kapitel{flex-wrap:wrap}.kapitel a{flex:1 1 45%}
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formular fieldset{grid-template-columns:minmax(0,1fr)}
  .vertrauen{grid-template-columns:minmax(0,1fr)}
  .stoffe{grid-template-columns:minmax(0,1fr)}
  .fuss .spalten{grid-template-columns:minmax(0,1fr)}
  .posten{grid-template-columns:72px minmax(0,1fr)}
  .posten .mini{width:72px;height:72px}
  .abschnitt{padding-top:70px}
}
.galerie .daumen .buehne{position:absolute;inset:0;min-height:0}
.galerie .daumen .buehne .nr,.galerie .daumen .buehne .marke,.galerie .daumen .buehne .neu{display:none}
.kacheln.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.kacheln.vier div{text-align:center}
@media (max-width:900px){ .kacheln.vier{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fuss .wortmarke{display:flex;margin-bottom:0}
/* Sprachwahl, versteckter Text, Rechtstabellen */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprachwahl select{height:42px;max-width:92px;border:0;border-radius:999px;padding:0 12px;background:var(--zweit-bg);color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.5);font-size:11px;letter-spacing:.08em;cursor:pointer}
.sprachwahl select option{background:var(--option-bg);color:var(--text)}
.schublade .sprachwahl select{max-width:none;width:100%;margin-top:14px}
.fuss .rechtlinks{display:flex;gap:18px;flex-wrap:wrap}.fuss .rechtlinks a{display:inline;margin:0}
.tabelle-rahmen{overflow-x:auto;margin:10px 0 18px;border-radius:var(--rk);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.2)}
.tabelle.rt{min-width:520px}.tabelle.rt th,.tabelle.rt td{padding:9px 12px;text-align:left;font-size:14px;vertical-align:top}
.tabelle.rt th{color:var(--g2);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(var(--lrgb),.3)}
.tabelle.rt td+td{text-align:left;color:var(--text2)}
.rechtstext .punkte li{font-size:15.5px}
@media (max-width:600px){ .kopf-rechts .sprachwahl{display:none} }
@media (max-width:600px){
  .tabelle-rahmen{overflow:visible;box-shadow:none}
  .tabelle.rt{min-width:0}.tabelle.rt,.tabelle.rt tbody,.tabelle.rt tr,.tabelle.rt td{display:block;width:100%}
  .tabelle.rt tr:first-child{display:none}
  .tabelle.rt tr{border-radius:var(--rk);box-shadow:inset 0 0 0 1px rgba(var(--lrgb),.25);padding:6px 0;margin-bottom:10px}
  .tabelle.rt td{border:0;padding:5px 12px}
  .tabelle.rt td::before{content:attr(data-k);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--g2)}
}
/* Uebersetzte Beschriftungen sind laenger: am Handy duerfen Knoepfe umbrechen und nehmen die ganze Breite (gemessen 19.10.: es/haendler +75 px) */
@media (max-width:600px){ .knopfreihe .knopf{white-space:normal;flex:1 1 100%;line-height:1.35} }