/* ORIELA Natur, Produktseite ab 20.10.2026: die Packung zum Drehen, einmal oder im Abo. */


.seite--produkt{padding-top:calc(var(--kopf) + clamp(1rem,4vh,2.5rem))}
.seite--produkt .produkt{max-width:96rem;gap:clamp(1.5rem,4vw,3rem)}

.produkt__buehne{
  position:relative;width:100%;aspect-ratio:4/5;touch-action:pan-y;cursor:grab;
  background:radial-gradient(ellipse 58% 46% at 50% 60%,rgba(255,250,236,.75),rgba(255,250,236,0) 72%);
}
.produkt__buehne:active{cursor:grabbing}
.produkt__buehne canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.produkt__plakat{position:absolute;left:50%;bottom:6%;width:58%;height:auto;translate:-50% 0;transition:opacity .5s var(--ease-out)}
.produkt__buehne.ist-3d .produkt__plakat{opacity:0}

.seite--produkt .produkt__name{font-size:clamp(3.2rem,12.5vw,6.5rem);line-height:.92;letter-spacing:-.025em;margin:0}
.produkt__herkunft{margin:.9rem 0 0;font-size:var(--t-18)}
.produkt__kurz{margin:.6rem 0 0;font-size:var(--t-18);line-height:1.5;color:var(--wald-80);max-width:36ch}

/* Einmal oder im Abo: Pille mit gleitender Markierung */
.kaufart{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin:1.8rem 0 0;padding:4px;
  border:1.5px solid var(--wald-rand);border-radius:999px;min-width:min(100%,24rem);
}
.kaufart::before{
  content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--wald);
  transition:transform .26s var(--ease-out);
}
.kaufart:has(input[value="abo"]:checked)::before{transform:translateX(100%)}
.kaufart__wahl{
  position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:.45rem;
  padding:.7rem 1.1rem;border-radius:999px;cursor:pointer;color:var(--wald);
  transition:color .2s var(--ease-out);white-space:nowrap;
}
.kaufart__wahl input{position:absolute;opacity:0;pointer-events:none}
.kaufart__wahl:has(input:checked){color:var(--papier)}
.kaufart__wahl:has(input:focus-visible){outline:2px solid var(--wald);outline-offset:3px}
.kaufart__name{font-weight:500}
.kaufart__preis{font-weight:400;opacity:.92}
.kaufart__hinweis{margin:.75rem 0 0;color:var(--wald-80)}
.seite--produkt .produkt__grundpreis{margin:.6rem 0 0}

.produkt__foto{margin:2.5rem 0 0;position:relative}
.produkt__foto img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}

.andere .abschnitt__kopf{max-width:96rem}
.karten{display:grid;gap:clamp(3rem,8vw,5rem);max-width:96rem;margin:0 auto;padding-inline:var(--rand)}
.routine--kurz{margin-top:var(--luft)}

@media (prefers-reduced-motion:reduce){
  .kaufart::before,.kaufart__wahl,.produkt__plakat{transition:none}
}

@media (min-width:900px){
  .seite--produkt .produkt{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
  .produkt__buehne{position:sticky;top:calc(var(--kopf) + 1rem);aspect-ratio:auto;height:calc(100svh - var(--kopf) - 2rem);min-height:32rem}
  .produkt__text{padding-top:clamp(1rem,6vh,4rem)}
  .karten{grid-template-columns:1fr 1fr}
  .karten--drei{grid-template-columns:repeat(3,1fr)}
}

.andere .karten{padding-inline:0}
.seite .routine--kurz{margin-inline:calc(var(--rand) * -1)}

.seite .flaechen{margin-top:clamp(2rem,6vh,4rem)}

/* ---------- Ab 21.10.2026: Produktseite auf Stein wie die Startseite ---------- */
.produktseite{background:var(--stein)}
.produkt__buehne{background:radial-gradient(ellipse 58% 46% at 50% 60%,rgba(255,248,232,.62),rgba(255,248,232,0) 72%)}

/* Kaufbereich auf einer Tafel */
.kaufbereich{margin-top:1.8rem;padding:clamp(1rem,4.4vw,1.6rem) clamp(1rem,4.4vw,1.7rem) clamp(.9rem,4vw,1.4rem)}
.kaufbereich .kaufart{margin:0;width:100%;border-color:rgba(11,58,37,.3);background:rgba(246,237,218,.45)}
.kaufbereich .kaufart__wahl:not(:has(input:checked)){color:var(--wald-80)}
.kaufbereich .produkt__kauf{margin:1.2rem 0 .9rem}
.kaufbereich .menge{border-color:rgba(62,40,18,.3);box-shadow:inset 0 1px 2px rgba(62,40,18,.22),0 1px 0 rgba(255,251,242,.8)}
.kaufbereich__versand{margin:0;padding-top:.85rem;background:var(--fuge)}

/* Menge beim Einmalkauf: 1, 2 oder 3 Stück als Felder, gewählt in Waldgrün wie die Kaufart (seit 24.10.2026) */
.staffel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.9rem 0 0;padding:0;border:0;min-width:0}
.staffel[hidden]{display:none}
.staffel__wahl{
  position:relative;display:grid;align-content:start;justify-items:center;gap:.15rem;padding:.75rem .35rem .7rem;
  border:1.5px solid rgba(11,58,37,.3);border-radius:1rem;background:rgba(246,237,218,.45);color:var(--wald);
  text-align:center;cursor:pointer;line-height:1.25;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.staffel__wahl input{position:absolute;opacity:0;pointer-events:none}
.staffel__wahl:has(input:checked){background:var(--wald);border-color:var(--wald);color:var(--papier)}
.staffel__wahl:has(input:focus-visible){outline:2px solid var(--wald);outline-offset:3px}
.staffel__menge{font-weight:500;white-space:nowrap}
.staffel__je .ziffer{white-space:nowrap}
@media (max-width:599px){ .staffel__menge{font-size:.9375rem} }
.staffel__preis{font-size:var(--t-18)}
.staffel__je{font-size:.8125rem;opacity:.85}
@media (hover:hover) and (pointer:fine){ .staffel__wahl:not(:has(input:checked)):hover{border-color:var(--wald)} }
@media (prefers-reduced-motion:reduce){ .staffel__wahl{transition:none} }

/* Fakten und Pflichtangaben auf einer Tafel, Linien graviert */
.faktentafel{margin-top:2.2rem;padding:clamp(.6rem,3vw,1.3rem) clamp(1rem,4.4vw,1.7rem) clamp(1rem,4vw,1.5rem)}
.faktentafel .produkt__fakten{margin:0}
.faktentafel .produkt__fakten>div{border-top:0;background:var(--fuge)}
.faktentafel .produkt__fakten>div:first-child{background:none}
.faktentafel .pflicht{margin:0;padding:1.1rem 0 0;background:var(--fuge);color:var(--wald-80)}

/* Die anderen zwei: Foto, darunter die Tafel leicht darübergelegt */
.produktseite .karte{gap:0}
.produktseite .karte__bild{border-radius:2px;box-shadow:0 30px 50px -36px rgba(74,50,22,.6)}
.produktseite .karte__text{position:relative;margin:-3.2rem .7rem 0;padding:clamp(1rem,4.4vw,1.6rem) clamp(1rem,4.4vw,1.6rem) clamp(1rem,4vw,1.4rem);color:var(--wald)}
.produktseite .karte__kurz{color:var(--wald-80)}
@media (min-width:900px){ .produktseite .karte__text{margin:-4rem 1.4rem 0} }
.produktseite .karte__name{font-size:clamp(2.1rem,7.6vw,3.2rem)}
@media (max-width:599px){
  .kaufbereich .kaufart{min-width:0}
  .kaufbereich .kaufart__wahl{padding:.7rem .55rem;gap:.35rem;font-size:.9375rem}
}
@media (max-width:359px){
  .kaufbereich .kaufart__wahl{flex-direction:column;align-items:center;gap:0;line-height:1.25}
  .seite--produkt .produkt__name{font-size:2.7rem}
}

/* ---------- Ab 24.10.2026: Bühne als Nische im Stein. Bogen oben, Morgenlicht von links,
   die Zeichnung des Produkts blass an der Wand, Blattschatten, die Packung steht auf Travertin (3D). ---------- */
.produkt__buehne{
  overflow:hidden;isolation:isolate;border-radius:999px 999px 6px 6px;
  background:
    radial-gradient(ellipse 70% 52% at 26% 28%,rgba(255,247,228,.9),rgba(255,247,228,0) 70%),
    linear-gradient(180deg,#E3D2B3 0%,#EADCC1 48%,#E0CDAC 100%);
  box-shadow:inset 0 30px 48px -26px rgba(74,50,22,.5),inset 24px 0 42px -30px rgba(74,50,22,.38),inset -24px 0 42px -30px rgba(74,50,22,.3),0 1px 0 rgba(255,251,242,.65);
}
.nische{position:absolute;inset:0;z-index:0;pointer-events:none}
.nische__tafel{position:absolute;left:50%;top:8%;width:90%;height:auto;translate:-50% 0;opacity:.16;mix-blend-mode:multiply}
.nische__tafel--darmshot{top:3%;width:108%;opacity:.2}
.nische__blaetter{
  position:absolute;top:-6%;left:-22%;width:125%;aspect-ratio:800/764;
  background:url("../bilder/blattschatten.webp") no-repeat 0 0/contain;mix-blend-mode:multiply;opacity:.36;transform-origin:8% 4%;
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 8% 6%,#000 38%,transparent 86%);mask-image:radial-gradient(ellipse 85% 85% at 8% 6%,#000 38%,transparent 86%);
}
.nische__blaetter,.nische__blaetter video{filter:sepia(.55) saturate(.9)}
.nische__blaetter video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease-out);filter:none}
.nische__blaetter.mit-film{background:none;opacity:.6;animation:none}
.nische__blaetter.mit-film video{opacity:1}
.produkt__buehne canvas,.produkt__plakat{z-index:1}
@media (prefers-reduced-motion:no-preference){ .nische__blaetter{animation:nische-blaetter 16s ease-in-out infinite alternate} }
/* Lange Namen wie Morgenkultur bleiben am Computer auf einer Zeile */
@media (min-width:900px){ .seite--produkt .produkt__name--lang{font-size:clamp(3.2rem,6.4vw,5.4rem)} }
@keyframes nische-blaetter{ from{rotate:0deg;scale:1} to{rotate:1.6deg;scale:1.025} }

/* Mit Produktfoto (24.10.2026): das Foto ist die Bühne, ohne Nische, 3D und Blattfilm */
.produkt__buehne.mit-held{cursor:default;background:#d9c4a3;box-shadow:0 30px 60px -40px rgba(74,50,22,.55)}
.produkt__buehne.mit-held .nische,.produkt__buehne.mit-held .produkt__plakat{display:none}
.produkt__held{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;z-index:1}

/* ---------- Ab 25.10.2026: Verkaufstext unter dem Kaufbereich, eine große Tafel wie das Schild „Alles, was drin ist“.
   Am Computer links Überschrift, Einleitung und Siegel, rechts die Liste, darunter über die volle Breite vier kurze Absätze. ---------- */
.verkauf{background:var(--stein);padding-bottom:0}
.verkauf__tafel{max-width:72rem;margin:0 auto;padding:clamp(1.3rem,5vw,3.4rem) clamp(1.1rem,4.6vw,3.6rem) clamp(1rem,4vw,2.6rem);color:var(--wald)}
.verkauf h2{font-size:clamp(2.2rem,8vw,3.2rem);line-height:1;letter-spacing:-.02em;hyphens:none;overflow-wrap:normal}
.verkauf__einleitung{margin:1rem 0 0;max-width:38ch;font-size:var(--t-18);line-height:1.55;color:var(--wald-80);text-wrap:pretty}
.verkauf__siegel{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.2rem;font-size:var(--t-14);line-height:1.35;font-weight:500}
.verkauf__siegel li{display:flex;align-items:flex-start;gap:.55rem}
.verkauf__siegel li::before{
  content:"";flex:none;width:1.05rem;height:1.05rem;margin-top:.05rem;border-radius:50%;background:var(--wald);
  box-shadow:inset 0 1px 1px rgba(4,24,14,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l2.9 2.8 6-6.3' fill='none' stroke='%23F0E3C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:100% 100%;
}
.verkauf__inhalt{margin-top:2.2rem}
.verkauf__listentitel{font-size:clamp(1.45rem,5vw,1.75rem);line-height:1.2;margin:0 0 .6rem}
.verkauf__liste{list-style:none;margin:0;padding:0}
.verkauf__liste li{padding:.8rem 0;background:var(--fuge);line-height:1.45;text-wrap:pretty}
.verkauf__liste li:first-child{background:none;padding-top:.2rem}
.verkauf__liste i{color:var(--wald-80)}
.verkauf__punkte{display:grid;gap:1.6rem;margin-top:2rem;padding-top:1.8rem;background:var(--fuge)}
.verkauf__punkt h3{font-size:clamp(1.3rem,4.6vw,1.55rem);line-height:1.2;margin:0}
.verkauf__punkt p{margin:.5rem 0 0;line-height:1.55;color:var(--wald-80);max-width:46ch;text-wrap:pretty}
@media (min-width:600px){ .verkauf__punkte{grid-template-columns:1fr 1fr;column-gap:2rem;row-gap:1.8rem} }
@media (min-width:900px){
  .verkauf__tafel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .verkauf__inhalt{margin-top:.4rem}
  .verkauf__punkte{grid-column:1 / -1;column-gap:clamp(2.5rem,5vw,5rem);margin-top:2.6rem;padding-top:2.4rem}
  .verkauf__punkt p{max-width:52ch}
}

/* Zahlarten direkt unter dem Kaufknopf wie bei Aquarelier (25.10.2026), Logos klein auf weißen Kärtchen */
.zahlarten{list-style:none;margin:0 0 .95rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.zahlarten img{display:block;width:38px;height:24px;border-radius:4px;box-shadow:0 0 0 1px rgba(62,40,18,.14),0 1px 2px rgba(62,40,18,.12)}