:root {
  --ink:#3b2f5e; --ink-soft:#64588a; --pink:#e0609a; --violet:#8f6bd6; --blue:#5b9be0;
  --paper:#fffaf5; --line:#e6dcf7; --shadow:0 12px 34px rgba(120,90,190,.16);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.75) 0 2px, transparent 3px) 0 0/90px 90px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.6) 0 2px, transparent 3px) 0 0/130px 130px,
    linear-gradient(170deg,#fde4f0 0%,#ebe0fa 38%,#dcecfb 100%) fixed; }
a { color:inherit; }
img { max-width:100%; height:auto; }
.wrap { max-width:1000px; margin:0 auto; padding:0 20px; position:relative; }
.narrow { max-width:780px; }
:focus-visible { outline:3px solid var(--violet); outline-offset:3px; border-radius:6px; }

/* Kopfzeile */
header { position:sticky; top:0; z-index:10; background:rgba(255,250,245,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(230,220,247,.9); }
.hdr { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; padding-top:8px; padding-bottom:8px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.35rem; text-decoration:none; }
.brand img { width:46px; height:46px; border-radius:50%; box-shadow:0 2px 8px rgba(120,90,190,.25); transition:transform .4s; }
.brand:hover img { transform:rotate(-8deg) scale(1.06); }
.brand span { background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
nav { display:flex; gap:4px; }
nav a { text-decoration:none; font-weight:700; padding:6px 14px; border-radius:99px; transition:background .2s; }
nav a:hover { background:#f1e9fd; }
nav a[aria-current] { background:linear-gradient(135deg,#fbd5e7,#dccdf7); }

/* Überschriften */
h1 { font-size:clamp(2rem,6vw,3.3rem); line-height:1.1; margin:0 0 14px; text-align:center; letter-spacing:-.5px;
     background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font-size:clamp(1.4rem,4vw,2rem); margin:0 0 14px; text-align:center; letter-spacing:-.3px; }
h3 { margin:0 0 6px; }
.lead { text-align:center; font-size:clamp(1.05rem,2.6vw,1.28rem); color:var(--ink-soft); max-width:38rem; margin:0 auto; }
.eyebrow { display:inline-block; font-weight:800; font-size:.85rem; letter-spacing:1.5px; text-transform:uppercase; color:#b03a78;
  background:#fff; border:2px solid #f3c6dc; border-radius:99px; padding:3px 14px; margin-bottom:12px; }
section { margin:64px 0; position:relative; }

/* Hero */
.hero { text-align:center; padding:26px 0 6px; position:relative; }
.hero-grid { display:grid; gap:26px; align-items:center; }
@media (min-width:860px){
  .hero-grid { grid-template-columns:1fr 1fr; gap:36px; }
  .hero-grid .txt { text-align:left; } .hero-grid h1, .hero-grid .lead { text-align:left; margin-left:0; }
  .hero-grid .cta { justify-content:flex-start; }
}
.cta { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }

/* Bühne: Regenbogen, Luna und Freundinnen, ohne Kasten */
.stage { position:relative; width:min(480px,100%); aspect-ratio:1; margin:0 auto; }
.hero-grid > * { min-width:0; }
.stage .blob { position:absolute; inset:3%; border-radius:58% 42% 55% 45% / 50% 55% 45% 50%;
  background:radial-gradient(circle at 50% 38%, #fff 0 16%, #f8ecff 42%, #e0ebff 100%);
  box-shadow:0 22px 54px rgba(120,90,190,.25), inset 0 0 0 7px rgba(255,255,255,.95); animation:morph 14s ease-in-out infinite; }
@keyframes morph { 0%,100%{ border-radius:58% 42% 55% 45% / 50% 55% 45% 50%; } 50%{ border-radius:45% 55% 42% 58% / 55% 45% 55% 45%; } }
.stage .arch { position:absolute; left:12%; right:12%; top:14%; aspect-ratio:2/1;
  background:radial-gradient(circle farthest-side at 50% 100%, transparent 0 40%, #c9b6f0 40% 50%, #a9d3f5 50% 60%, #a8e0c0 60% 70%, #fbe69b 70% 80%, #fbc99b 80% 90%, #f7a8c8 90% 99.5%, transparent 100%); }
.stage img { position:absolute; filter:drop-shadow(0 10px 12px rgba(120,90,190,.28)); animation:float 6s ease-in-out infinite; }
.stage .luna { left:20%; width:60%; bottom:5%; z-index:2; }
.stage .s1 { left:1%; width:27%; bottom:9%; z-index:3; animation-delay:-1.2s; }
.stage .s2 { right:0; width:26%; bottom:12%; z-index:3; animation-delay:-2.6s; }
.stage .s3 { left:6%; width:20%; top:13%; animation-delay:-3.4s; }
.stage .s4 { right:6%; width:20%; top:11%; animation-delay:-4.6s; }
.stage .spark { position:absolute; font-size:1.7rem; color:#f2b84b; animation:twinkle 3.2s ease-in-out infinite; }
.stage .sp1 { top:6%; left:42%; } .stage .sp2 { top:40%; right:2%; color:#e0609a; animation-delay:1s; font-size:1.3rem; } .stage .sp3 { bottom:2%; left:38%; color:#8f6bd6; animation-delay:2s; font-size:1.3rem; }
@keyframes twinkle { 0%,100%{ opacity:.3; transform:scale(.8) rotate(0);} 50%{ opacity:1; transform:scale(1.2) rotate(20deg);} }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

.rainbow { display:flex; height:12px; border-radius:99px; overflow:hidden; max-width:340px; margin:30px auto 0; box-shadow:0 3px 10px rgba(120,90,190,.18); }
.rainbow i { flex:1; }

/* Wolken als Deko */
.cloud { position:absolute; width:150px; height:60px; border-radius:99px; background:#fff; opacity:.75; filter:blur(.5px); animation:drift 18s ease-in-out infinite; z-index:0; }
.cloud::before, .cloud::after { content:""; position:absolute; background:#fff; border-radius:50%; }
.cloud::before { width:70px; height:70px; top:-34px; left:26px; } .cloud::after { width:52px; height:52px; top:-22px; right:26px; }
@keyframes drift { 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(26px);} }
.c1 { top:40px; left:-50px; } .c2 { top:260px; right:-60px; animation-delay:-6s; transform:scale(.8); } .c3 { top:8px; right:26%; transform:scale(.55); animation-delay:-3s; }
@media (max-width:700px){ .cloud { display:none; } }

/* Karten */
.card { background:var(--paper); border:3px solid var(--line); border-radius:32px; padding:28px; box-shadow:var(--shadow); margin-bottom:22px; }
.card h2 { text-align:left; color:#b03a78; font-size:1.4rem; }
.card p { margin:0 0 10px; } .card p:last-child { margin-bottom:0; }
ul.bullets { margin:8px 0 0; padding-left:0; list-style:none; }
ul.bullets li { margin:7px 0; padding-left:28px; position:relative; }
ul.bullets li::before { content:"★"; position:absolute; left:0; color:#f2b84b; }

.product { display:grid; gap:24px; position:relative; overflow:hidden; }
@media (min-width:760px){ .product { grid-template-columns:1.1fr .9fr; align-items:center; } }
.product h3 { font-size:1.75rem; color:#b03a78; }
.sub { margin:0 0 12px; color:var(--ink-soft); font-weight:700; }
.soonbadge { display:inline-block; margin-left:4px; padding:2px 12px; border-radius:99px; background:linear-gradient(135deg,#fff0c4,#ffe2a0); border:2px solid #efd58c; color:#7a5a00; font-size:.85rem; transform:rotate(-2deg); }
.facts { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 16px; list-style:none; }
.facts li { background:#fff; border:2px solid var(--line); border-radius:99px; padding:4px 13px; font-size:.92rem; font-weight:700; }
.facts li:nth-child(1){ background:#fde7f0; } .facts li:nth-child(2){ background:#ece4fb; }
.facts li:nth-child(3){ background:#e0effb; } .facts li:nth-child(4){ background:#fdf1d6; } .facts li:nth-child(5){ background:#def3e6; }
.lunaring { position:relative; width:min(280px,82%); aspect-ratio:1; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #fff 0 30%, #f3e6ff 65%, #e2ecff 100%); box-shadow:inset 0 0 0 6px #fff, 0 12px 28px rgba(120,90,190,.22); }
.lunaring::before { content:""; position:absolute; inset:-10px; border-radius:50%; border:8px solid transparent;
  background:conic-gradient(#f7a8c8,#fbc99b,#fbe69b,#a8e0c0,#a9d3f5,#c9b6f0,#f7a8c8) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.lunaring img { position:absolute; left:11%; width:78%; bottom:6%; animation:float 5s ease-in-out infinite; filter:drop-shadow(0 10px 12px rgba(120,90,190,.28)); }

/* Geschichte */
.story { display:grid; gap:26px; align-items:center; }
@media (min-width:760px){ .story { grid-template-columns:.8fr 1.2fr; } }
.circle-pic { width:min(320px,78%); aspect-ratio:1; margin:0 auto; border-radius:50%; overflow:hidden; border:6px solid #fff; box-shadow:0 16px 40px rgba(120,90,190,.28); }
.circle-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.story blockquote { margin:0; padding:0; font-size:1.12rem; color:var(--ink); }
.story cite { display:block; margin-top:10px; font-style:normal; font-weight:800; color:#b03a78; }

/* Figuren: runde Medaillons, ohne Kasten */
.friends { display:flex; flex-wrap:wrap; justify-content:center; gap:26px 22px; padding:0; margin:0; list-style:none; }
.friend { flex:0 0 150px; text-align:center; transition:transform .3s; }
.friend:hover { transform:translateY(-8px) rotate(-2deg); }
.friend .av { position:relative; width:140px; aspect-ratio:1; margin:0 auto 8px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fff 0 25%, var(--bg) 100%); box-shadow:inset 0 0 0 5px #fff, 0 10px 20px rgba(120,90,190,.18), 0 0 0 4px var(--c); }
.friend .av img { position:absolute; left:8%; width:84%; bottom:7%; filter:drop-shadow(0 6px 6px rgba(120,90,190,.25)); transition:transform .3s; }
.friend:hover .av img { transform:scale(1.08); }
.friend b { display:block; color:var(--c); font-size:1.15rem; }
.friend small { display:block; color:var(--ink-soft); line-height:1.35; }

/* Was steckt drin */
.features { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); padding:0; margin:0; list-style:none; }
.features li { text-align:center; padding:6px 10px; }
.features .ico { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 10px; border-radius:50%; font-size:2rem;
  background:linear-gradient(135deg,var(--a,#fbd5e7),var(--b,#dccdf7)); box-shadow:inset 0 0 0 4px #fff, 0 8px 16px rgba(120,90,190,.16); transition:transform .3s; }
.features li:hover .ico { transform:rotate(-8deg) scale(1.08); }
.features b { display:block; font-size:1.08rem; }
.features span.t { color:var(--ink-soft); font-size:.95rem; display:block; line-height:1.45; }

/* Schritte */
.steps { display:grid; gap:18px; padding:0; margin:0; list-style:none; }
@media (min-width:760px){ .steps { grid-template-columns:repeat(3,1fr); } }
.steps li { background:#fff; border:3px solid var(--line); border-radius:32px; padding:24px 20px; text-align:center; box-shadow:0 6px 16px rgba(120,90,190,.1); }
.steps .ico { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 10px; border-radius:50%; font-size:1.9rem; background:linear-gradient(135deg,#fbd5e7,#dccdf7); }
.steps b { display:block; font-size:1.15rem; }

/* Buttons */
.btn { display:inline-block; padding:12px 24px; border-radius:99px; font-weight:800; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--violet)); box-shadow:0 6px 16px rgba(143,107,214,.4); transition:transform .2s, box-shadow .2s; margin:4px; }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(143,107,214,.5); }
.btn.alt { background:#fff; color:var(--ink); border:3px solid var(--violet); box-shadow:none; padding:9px 22px; }
.btn.alt:hover { background:#f4edff; }
.btn.off { background:#fff; color:var(--ink-soft); border:3px dashed #cdbfe8; box-shadow:none; cursor:default; padding:9px 22px; }
.btn.off:hover { transform:none; }
.center { text-align:center; }
.band { background:rgba(255,255,255,.6); border:3px solid #fff; border-radius:40px; padding:34px 20px; text-align:center; box-shadow:var(--shadow); }

/* FAQ */
details { background:#fff; border:3px solid var(--line); border-radius:24px; padding:2px 22px; margin-bottom:12px; transition:border-color .2s, box-shadow .2s; }
details:hover { border-color:#d3c2f2; }
summary { cursor:pointer; font-weight:800; padding:14px 0; }
details p, details ul, details ol { margin:0 0 12px; }
details[open] { border-color:#cdb9f3; box-shadow:0 6px 16px rgba(120,90,190,.12); }

.rabatt { text-align:center; border:3px dashed #e0609a; background:#fff4f9; }
.rabatt .code { display:inline-block; font-size:1.8rem; font-weight:800; letter-spacing:2px; padding:6px 18px; background:#fff; border:3px solid #e0609a; border-radius:18px; margin:8px 0; user-select:all; }
audio { width:100%; margin-top:8px; border-radius:99px; }

/* Rundes Einzelbild (Abschlussseite, Über uns) */
.round { width:min(260px,70%); aspect-ratio:1; margin:18px auto 0; border-radius:50%; position:relative;
  background:radial-gradient(circle at 50% 38%, #fff 0 28%, #f3e6ff 68%, #e2ecff 100%); box-shadow:inset 0 0 0 6px #fff, 0 14px 34px rgba(120,90,190,.25); }
.round img { position:absolute; left:10%; width:80%; bottom:6%; filter:drop-shadow(0 8px 10px rgba(120,90,190,.28)); animation:float 5s ease-in-out infinite; }

/* Fuß */
footer { text-align:center; padding:42px 0 50px; font-size:.95rem; color:var(--ink-soft);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.55)); margin-top:40px; }
footer a { margin:0 6px; text-underline-offset:3px; }
footer .sep { display:block; margin-bottom:8px; font-weight:800; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* --- Feinschliff: Überschriften, Wellen, Sprechblase, Sticker, Einblenden --- */
section > h2::after { content:""; display:block; width:84px; height:7px; margin:10px auto 0; border-radius:99px;
  background:linear-gradient(90deg,#f7a8c8,#fbc99b,#fbe69b,#a8e0c0,#a9d3f5,#c9b6f0); }
h1 { font-size:clamp(2.1rem,6.2vw,3.7rem); }

.fullband { margin-inline:calc(50% - 50vw); width:100vw; background:rgba(255,255,255,.5); padding:56px 0 50px; position:relative; margin-top:90px; margin-bottom:90px; }
.fullband .inner { max-width:1000px; margin:0 auto; padding:0 20px; }
.fullband section { margin:0 0 54px; } .fullband section:last-child { margin-bottom:0; }
.fullband::before, .fullband::after { content:""; position:absolute; left:0; right:0; height:40px; background-repeat:repeat-x; background-size:1200px 40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 Q150 0 300 22 T600 22 T900 22 T1200 22 V40 Z' fill='white' fill-opacity='.5'/%3E%3C/svg%3E"); }
.fullband::before { top:-39px; } .fullband::after { bottom:-39px; transform:scaleY(-1); }

.bubble { position:absolute; z-index:5; top:0; left:50%; transform:translateX(-50%) rotate(-2deg); width:58%; background:#fff; border:3px solid #e6dcf7; border-radius:22px;
  padding:7px 12px; font-size:.86rem; font-weight:700; line-height:1.3; text-align:center; color:var(--ink); box-shadow:0 8px 18px rgba(120,90,190,.2); }
.bubble::after { content:""; position:absolute; bottom:-13px; left:50%; width:18px; height:18px; background:#fff; border-right:3px solid #e6dcf7; border-bottom:3px solid #e6dcf7; transform:translateX(-50%) rotate(45deg); }
.sticker { position:absolute; z-index:5; left:-2%; top:40%; width:26%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center;
  font-weight:800; font-size:.9rem; line-height:1.15; color:#7a5a00; background:radial-gradient(circle at 35% 30%, #fff6cf, #ffd872); border:3px dashed #fff; outline:3px solid #f2c75a;
  transform:rotate(-12deg); box-shadow:0 8px 16px rgba(180,130,20,.3); }
.sticker b { font-size:1.35rem; display:block; }
.stage .sp1 { display:none; }




/* Lesen-Abschnitt */
.readers { margin:56px 0; }
.readers-in { display:flex; gap:22px; align-items:center; background:linear-gradient(135deg,#fff7fb,#f3ecff); border:3px solid #fff; border-radius:40px; padding:28px 30px; box-shadow:var(--shadow); }
.readers-ico { flex:none; display:grid; place-items:center; width:88px; height:88px; border-radius:50%; font-size:2.6rem; background:linear-gradient(135deg,#fbd5e7,#dccdf7); box-shadow:inset 0 0 0 5px #fff, 0 8px 18px rgba(120,90,190,.2); transform:rotate(-6deg); }
.readers h2 { text-align:left; margin-bottom:8px; } .readers h2::after { display:none; }
.readers p { margin:0 0 10px; }
.readers-quote { font-weight:700; color:#8a2f64; background:#fff; border-left:6px solid var(--pink); border-radius:18px; padding:12px 16px; }
@media (max-width:640px){ .readers-in { flex-direction:column; text-align:center; padding:24px 20px; } .readers h2 { text-align:center; } .readers-quote { border-left:0; border-top:6px solid var(--pink); } }

/* 3D-Luna */
.viewer3d { width:min(320px,80vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 38%,#ffffff,#f1e9ff 62%,#dff1ff); box-shadow:var(--shadow); border:6px solid #fff; overflow:hidden; margin:0 auto; }
.viewer3d model-viewer { width:100%; height:100%; --poster-color:transparent; background:transparent; --progress-bar-color:transparent; --progress-bar-height:0px; }
.viewer3d model-viewer::part(default-progress-bar) { display:none; }
.luna3d { text-align:center; margin:34px auto 10px; }
.luna3d h2 { margin:18px 0 6px; }
.luna3d p { margin:0 auto; max-width:480px; color:var(--ink-soft); }

.duo3d { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.duo3d figure { margin:0; text-align:center; }
.duo3d figcaption { margin-top:10px; font-weight:800; color:var(--ink); }
.duo3d .viewer3d { width:min(260px,70vw); }

/* ===== Zwei Figuren: Luna (Rosa/Lila) und Diego (Grün/Türkis/Orange) ===== */
:root { --teal:#2fa58a; --green:#4ea86a; --orange:#f0883a; --dgreen:#2f7d57; --dline:#cfe8d8; }
body { background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.75) 0 2px, transparent 3px) 0 0/90px 90px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.6) 0 2px, transparent 3px) 0 0/130px 130px,
    linear-gradient(170deg,#fde4f0 0%,#ece3fa 26%,#e2f3ea 62%,#dcecfb 100%) fixed; }
.brand span, h1 { background-image:linear-gradient(90deg,var(--pink),var(--violet),var(--teal)); }
nav a[aria-current] { background:linear-gradient(135deg,#fbd5e7,#cfeedd); }
section > h2::after { background:linear-gradient(90deg,#f7a8c8,#fbc99b,#fbe69b,#a8e0c0,#8fd3c8,#a9d3f5,#c9b6f0); }
.eyebrow { color:#3e6f55; border-color:#cfe8d8; }

/* Buttons pro Figur */
.btn.luna { background:linear-gradient(135deg,var(--pink),var(--violet)); }
.btn.diego { background:linear-gradient(135deg,var(--green),var(--teal)); box-shadow:0 6px 16px rgba(47,165,138,.4); }
.btn.diego:hover { box-shadow:0 10px 22px rgba(47,165,138,.5); }

/* Doppelbühne im Kopfbereich */
.duostage { position:relative; width:min(520px,100%); margin:34px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
.duostage .half { position:relative; padding:10px 0 0; }
.duostage .ring { position:relative; width:100%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 38%, #fff 0 24%, var(--r1) 70%, var(--r2) 100%); box-shadow:inset 0 0 0 6px #fff, 0 16px 34px rgba(90,80,150,.22); }
.duostage .hl { --r1:#f9e8ff; --r2:#dfe6ff; }
.duostage .hd { --r1:#e6f7ea; --r2:#cdeee3; }
.duostage .ring::before { content:""; position:absolute; inset:-9px; border-radius:50%; border:7px solid transparent; -webkit-mask:linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.duostage .hl .ring::before { background:conic-gradient(#f7a8c8,#fbc99b,#fbe69b,#a8e0c0,#a9d3f5,#c9b6f0,#f7a8c8) border-box; }
.duostage .hd .ring::before { background:conic-gradient(#4ea86a,#8fd3c8,#a9d3f5,#fbe69b,#f0883a,#8fd3c8,#4ea86a) border-box; }
.duostage .main { position:absolute; left:9%; width:82%; bottom:5%; animation:float 5s ease-in-out infinite; filter:drop-shadow(0 10px 12px rgba(90,80,150,.28)); }
.duostage .hd .main { animation-delay:-2.2s; }
.duostage .mini { position:absolute; width:30%; bottom:-4%; z-index:3; filter:drop-shadow(0 6px 8px rgba(90,80,150,.25)); animation:float 6s ease-in-out infinite; }
.duostage .m1 { left:-6%; animation-delay:-1.2s; } .duostage .m2 { right:-6%; animation-delay:-3s; }
.duostage .bubble { grid-column:1 / -1; position:relative; transform:none; left:auto; top:auto; width:min(380px,92%); margin:0 auto 18px; }
.duostage .sticker { left:auto; right:-8%; top:12%; width:20%; font-size:.78rem; }
@media (max-width:860px){ .duostage { margin-top:26px; } }

/* Produktkarten nebeneinander, je in der Farbe der Figur */
.products { display:grid; gap:22px; }
@media (min-width:860px){ .products { grid-template-columns:1fr 1fr; align-items:stretch; } }
.products .product { display:block; margin-bottom:0; }
.product .pic { margin:0 auto 16px; }
.product.pl h3 { color:#b03a78; }
.product.pd { border-color:var(--dline); background:#fbfffc; box-shadow:0 12px 34px rgba(47,125,87,.16); }
.product.pd h3 { color:var(--dgreen); }
.product.pd .facts li { background:#e9f7ee; border-color:var(--dline); }
.product.pd .facts li:nth-child(2) { background:#e0f1f2; } .product.pd .facts li:nth-child(3) { background:#e3eefb; }
.product.pd .facts li:nth-child(4) { background:#fdf1d6; } .product.pd .facts li:nth-child(5) { background:#ffe6d2; }
.product.pd ul.bullets li::before { color:var(--orange); }
.lunaring.dring { background:radial-gradient(circle at 50% 40%, #fff 0 30%, #e6f7ea 65%, #cdeee3 100%); box-shadow:inset 0 0 0 6px #fff, 0 12px 28px rgba(47,125,87,.22); }
.lunaring.dring::before { background:conic-gradient(#4ea86a,#8fd3c8,#a9d3f5,#fbe69b,#f0883a,#8fd3c8,#4ea86a) border-box; }

/* Geschichte: zwei Karten */
.stories { display:grid; gap:22px; }
@media (min-width:860px){ .stories { grid-template-columns:1fr 1fr; } }
.storycard { background:rgba(255,255,255,.7); border:3px solid #fff; border-radius:34px; padding:22px; box-shadow:var(--shadow); text-align:center; }
.storycard.sd { box-shadow:0 12px 34px rgba(47,125,87,.14); }
.storycard .circle-pic { margin:0 auto 14px; width:min(200px,60%); }
.storycard.sd .circle-pic { background:radial-gradient(circle at 50% 40%, #fff 0 30%, #e6f7ea 70%, #cdeee3 100%); position:relative; }
.circle-pic.dpic img { position:absolute; left:8%; bottom:4%; width:84%; height:auto; object-fit:contain; }
.storycard blockquote { font-size:1.02rem; text-align:left; }
.storycard.sl cite { color:#b03a78; } .storycard.sd cite { color:var(--dgreen); }

/* 3D-Diego im grünen Rahmen */
.viewer3d.diego { background:radial-gradient(circle at 50% 38%,#ffffff,#e6f7ea 62%,#d8f0e8); box-shadow:0 12px 34px rgba(47,125,87,.18); }

/* QR-Codes in der Geschichte */
.qrbox { display:flex; gap:16px; align-items:center; text-align:left; margin-top:18px; padding:14px; background:#fff; border:3px solid var(--line); border-radius:24px; }
.qrbox.qd { border-color:var(--dline); }
.qrbox .qrimg { flex:none; width:104px; height:104px; display:block; border-radius:12px; overflow:hidden; }
.qrbox .qrimg img { width:100%; height:100%; display:block; }
.qrbox b { display:block; font-size:1.05rem; }
.qrbox.ql b { color:#4b2e8c; } .qrbox.qd b { color:#1d6b43; }
.qrbox span { display:block; font-size:.92rem; color:var(--ink-soft); line-height:1.4; margin-bottom:6px; }
.qrbox audio { width:100%; max-width:260px; height:36px; margin:0; }
.qrhint { text-align:center; max-width:46rem; margin:20px auto 0; color:var(--ink-soft); }
@media (max-width:420px){ .qrbox { flex-direction:column; text-align:center; } }
.qrbox .qrimg { position:relative; cursor:pointer; }
.qrbox .qrimg::after { content:"▶"; position:absolute; right:6px; bottom:6px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(75,46,140,.92); color:#fff; font-size:.8rem; padding-left:2px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.qrbox.qd .qrimg::after { background:rgba(29,107,67,.92); }
.qrbox.playing .qrimg::after { content:"❚❚"; font-size:.6rem; padding-left:0; letter-spacing:-1px; }
.qrbox.playing { box-shadow:0 0 0 4px rgba(143,107,214,.25); }
.qrbox.qd.playing { box-shadow:0 0 0 4px rgba(78,168,106,.28); }
.soonbadge.next { background:linear-gradient(135deg,#e3f6e9,#c9ecd7); border-color:#a7d9bb; color:#1f6b45; }