/* ===================================================================
   rechenmagie.com · Grundaussehen der Website (Startseite, Impressum, Datenschutz)
   Branding: Ochsenblut #3D1A17, Kupfer #CC9363, Creme #F6F0E4.
   Schriften NUR mit Schul-a: DM Serif Display Italic (Titel), Didact Gothic (Text).
   Die Schriften liegen auf der Website selbst (keine Verbindung zu Google).
   Der Kopfbereich mit Verlauf und Funkeln kommt aus glanz.css (wird angehängt).
   =================================================================== */
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;
  src:url(schriften/dm-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;
  src:url(schriften/dm-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/didact-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/didact-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{--navy:#3D1A17;--ox:#3D1A17;--ku:#CC9363;--ku-d:#8F5A2E;--ku-s:#E2B48A;--creme:#F6F0E4;--papier:#FFFDF8;
  --tinte:#3A211C;--tinte-w:#6E5A53;--linie:#E8DCD0;--hell-dim:#D9C6BB;--gold:#CC9363;
  --f-titel:'DM Serif Display',Georgia,serif;--f-text:'Didact Gothic','Segoe UI',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f-text);background:var(--creme);color:var(--tinte);font-size:1.06rem;line-height:1.7}
img,video{max-width:100%;display:block}
a{color:var(--ku-d)}
.spalte{max-width:1080px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.spalte{padding:0 16px}}
h1,h2,h3{font-family:var(--f-titel);font-style:italic;font-weight:400;line-height:1.15;color:var(--ox)}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
h3{font-size:1.3rem}
.fein{color:var(--tinte-w);font-size:.95rem}
.augenbraue{display:inline-flex;align-items:center;gap:9px;color:var(--ku);text-transform:uppercase;letter-spacing:.2em;font-size:12px;margin-bottom:12px}
.augenbraue::before{content:'';width:26px;height:1px;background:var(--ku)}
.augenbraue.dunkel{color:var(--ku-d)}.augenbraue.dunkel::before{background:var(--ku-d)}

header{position:sticky;top:0;z-index:50;background:rgba(42,16,14,.95);border-bottom:1px solid rgba(204,147,99,.22)}
.kopf{display:flex;align-items:center;gap:14px;height:64px;max-width:1080px;margin:0 auto;padding:0 24px}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--creme)}
.marke img{width:38px;height:38px;border-radius:50%;border:1px solid var(--ku);object-fit:cover;object-position:50% 22%;background:var(--creme)}
.marke b{font-family:var(--f-titel);font-style:italic;font-weight:400;font-size:22px}
.marke b span{color:var(--ku)}
.kopf nav{margin-left:auto}
.kopf nav a{color:var(--hell-dim);text-decoration:none;font-size:15px}
.kopf nav a:hover{color:var(--ku-s)}

.held{color:var(--creme);padding:56px 0 60px}
.held-innen{display:flex;align-items:center;gap:40px}
.held-text{flex:1;min-width:0}
.held h1{font-size:clamp(2.3rem,5.4vw,3.9rem);text-wrap:balance}
.held h1 em{color:var(--ku)}
.held .lead{margin:14px 0 24px;font-size:1.15rem;color:var(--hell-dim)}
.held-bild{flex:none;width:280px;aspect-ratio:1;border-radius:50%;border:1px solid var(--ku);padding:9px}
.held-bild video{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 24%;background:#E9E2DA}
@media(max-width:760px){.held-innen{flex-direction:column-reverse;align-items:flex-start;gap:22px}.held-bild{width:180px}}

.knopf{display:inline-flex;align-items:center;gap:9px;border-radius:10px;padding:12px 24px;text-decoration:none;
  color:#2A100E;background:linear-gradient(135deg,#F3D2AE 0%,#E2B48A 30%,#CC9363 62%,#A8703F 100%);
  box-shadow:0 6px 18px rgba(168,112,63,.35),inset 0 1px 0 rgba(255,248,236,.7);font-size:1.05rem}

main{padding:52px 0 64px}
main section{margin-bottom:52px}
.karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
@media(max-width:760px){.karten{grid-template-columns:1fr}}
.karte{position:relative;display:grid;gap:8px;align-content:start;background:var(--papier);border:1px solid var(--linie);border-radius:10px;
  padding:26px 26px 22px;text-decoration:none;color:var(--tinte);box-shadow:0 14px 34px rgba(61,26,23,.07);transition:transform .2s,box-shadow .2s}
.karte:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(61,26,23,.12)}
.karte .nr{font-family:var(--f-titel);font-style:italic;font-size:3rem;line-height:.9;color:var(--ku)}
.karte p{color:var(--tinte-w)}
.karte .klasse{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ku-d)}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;border-top:1px solid var(--linie);padding-top:36px}
@media(max-width:760px){.drei{grid-template-columns:1fr}}
.drei p{color:var(--tinte-w);margin-top:6px}

.text{max-width:760px}
.text h1{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:6px}
.text h2{font-size:1.4rem;margin:30px 0 8px}
.text p{margin-bottom:8px}
.text .kurz{margin:22px 0 4px;background:var(--papier);border-left:3px solid var(--ku);padding:14px 18px;border-radius:0 8px 8px 0}
.mitte{text-align:center;padding-top:90px}.mitte p{margin:14px 0}

footer{background:#2A100E;color:var(--hell-dim)}
.fuss{max-width:1080px;margin:0 auto;padding:22px 24px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:.9rem}
.fuss nav{display:flex;gap:18px}
.fuss a{color:var(--hell-dim)}

/* ---------- Startseite (Text Oktober 2026) ---------- */
.einleitung{color:var(--tinte-w);margin:10px 0 4px}
.karte .klasse{order:-1}
.karte .mehr{margin-top:6px;color:var(--ku-d);font-size:.98rem}
.karte .mehr::after{content:' \2192'}
.knopfzeile{margin-top:28px}
.ueber{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:center;background:var(--papier);
  border:1px solid var(--linie);border-radius:12px;padding:36px}
.ueber p{color:var(--tinte-w);margin-top:10px}
.ueber-bild{width:260px;justify-self:center}
.ueber-bild img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:24px;border:1px solid rgba(204,147,99,.45);box-shadow:0 16px 42px rgba(61,26,23,.22)}
@media(max-width:760px){.ueber{grid-template-columns:1fr;padding:24px}.ueber-bild{width:min(260px,74vw)}}
.insta{text-align:center;padding:10px 0}
.insta p{max-width:52rem;margin:10px auto 0;color:var(--tinte-w)}
.insta .knopf{margin-top:12px}
.fuss-text{max-width:1080px;margin:0 auto;padding:28px 24px 0;color:var(--hell-dim)}
.fuss-text b{font-family:var(--f-titel);font-style:italic;font-weight:400;font-size:26px;color:var(--creme)}
.fuss-text b span{color:var(--ku)}
.fuss-text p{margin-top:4px}

/* ---------- Tipps für zu Hause ---------- */
.tipps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
@media(max-width:760px){.tipps{grid-template-columns:1fr}}
.tipp{position:relative;background:var(--papier);border:1px solid var(--linie);border-radius:10px;padding:24px 24px 20px 78px;
  box-shadow:0 10px 26px rgba(61,26,23,.06);display:flex;flex-direction:column;gap:6px}
.tipp-nr{position:absolute;left:22px;top:20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--ku);
  display:grid;place-items:center;font-family:var(--f-titel);font-style:italic;font-size:1.35rem;color:var(--ku-d);background:var(--creme)}
.tipp p{color:var(--tinte-w)}
.quelle{margin-top:auto;padding-top:6px;font-size:.86rem;color:var(--ku-d);text-decoration:none;border-bottom:1px solid transparent}
.quelle::before{content:'Quelle: '}
.quelle::after{content:' \2197'}
.quelle:hover{border-bottom-color:var(--ku-d)}
.sorge{margin-top:24px;border-left:3px solid var(--ku);background:var(--papier);border-radius:0 10px 10px 0;padding:22px 26px}
.sorge p{color:var(--tinte-w);margin-top:6px}
.sorge .quellen{display:flex;flex-wrap:wrap;gap:6px 22px}
@media(max-width:480px){.tipp{padding-left:22px;padding-top:72px}}
#werkstaetten,#tipps{scroll-margin-top:90px}
p,h1,h2,h3{text-wrap:pretty}
.kopf nav{white-space:nowrap}
@media(max-width:420px){.kopf{gap:10px;padding:0 14px}.kopf nav a{font-size:14px}.marke b{font-size:19px}}
@media(max-width:480px){.augenbraue{letter-spacing:.12em;font-size:11px}}
.karte-insta{background:linear-gradient(160deg,#FFFDF8,#F3E7D8)}
.karte-insta .mehr{text-decoration:none}
.karte-insta .mehr:hover{text-decoration:underline}
.karte-insta .bald{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--ox);color:var(--creme);border-radius:10px;padding:14px 18px}
.karte-insta .bald b{font-family:var(--f-titel);font-style:italic;font-weight:400;font-size:1.25rem;color:var(--creme)}
.bald-marke{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ox);background:var(--ku);border-radius:999px;padding:4px 11px}
.link-hinweis{margin-top:4px;background:var(--creme);border:1px solid var(--linie);border-left:3px solid var(--ku);border-radius:0 8px 8px 0;padding:10px 14px;color:var(--tinte);font-size:.97rem}
.karte-insta .knopf-insta{display:flex;justify-content:center;width:100%;margin-top:8px;font-size:1.08rem;padding:16px 22px;text-align:center}

/* ===================================================================
   Rechenmagie · Glanz (gilt für alle Werkstätten von Red)
   - Kopf: langsam wandernder Verlauf in Ochsenblut, Kupferschein, Sternstaub
   - Überschrift: Kupferglanz, der langsam darüberzieht
   - Red: ruhig im Creme-Kreis mit Kupferring und warmem Schein (kein Drehen)
   - Knöpfe: ein Lichtstreif beim Darüberfahren
   =================================================================== */
.held{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(118deg,#5A2A20 0%,#3D1A17 34%,#2A100E 62%,#4A221D 84%,#5A2A20 100%)!important;
  background-size:240% 240%!important;animation:rzVerlauf 18s ease-in-out infinite!important}
@keyframes rzVerlauf{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.held::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 70% at 82% 40%,rgba(204,147,99,.26),transparent 70%),
             radial-gradient(30% 60% at 12% 85%,rgba(226,180,138,.12),transparent 70%)}
.held>*{position:relative;z-index:2}
.held .held-glanz{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Sternstaub: zwei Schichten winziger Punkte, die abwechselnd aufleuchten */
.held-glanz::before,.held-glanz::after{content:'';position:absolute;inset:0}
.held-glanz::before{background:
  radial-gradient(1.4px 1.4px at 8% 22%,#F6F0E4,transparent 60%),radial-gradient(1px 1px at 17% 64%,#E2B48A,transparent 60%),
  radial-gradient(1.6px 1.6px at 29% 14%,#F6F0E4,transparent 60%),radial-gradient(1px 1px at 38% 80%,#F6F0E4,transparent 60%),
  radial-gradient(1.3px 1.3px at 51% 30%,#E2B48A,transparent 60%),radial-gradient(1px 1px at 60% 72%,#F6F0E4,transparent 60%),
  radial-gradient(1.5px 1.5px at 69% 12%,#F6F0E4,transparent 60%),radial-gradient(1px 1px at 92% 66%,#E2B48A,transparent 60%),
  radial-gradient(1.2px 1.2px at 96% 18%,#F6F0E4,transparent 60%),radial-gradient(1px 1px at 46% 52%,#F6F0E4,transparent 60%);
  animation:rzStaub 4.8s ease-in-out infinite}
.held-glanz::after{background:
  radial-gradient(1px 1px at 4% 48%,#F6F0E4,transparent 60%),radial-gradient(1.5px 1.5px at 22% 38%,#E2B48A,transparent 60%),
  radial-gradient(1px 1px at 33% 58%,#F6F0E4,transparent 60%),radial-gradient(1.4px 1.4px at 44% 20%,#F6F0E4,transparent 60%),
  radial-gradient(1px 1px at 56% 88%,#E2B48A,transparent 60%),radial-gradient(1.6px 1.6px at 64% 44%,#F6F0E4,transparent 60%),
  radial-gradient(1px 1px at 76% 84%,#F6F0E4,transparent 60%),radial-gradient(1.3px 1.3px at 86% 30%,#E2B48A,transparent 60%),
  radial-gradient(1px 1px at 13% 90%,#F6F0E4,transparent 60%),radial-gradient(1.2px 1.2px at 99% 82%,#F6F0E4,transparent 60%);
  animation:rzStaub 4.8s ease-in-out infinite;animation-delay:-2.4s}
@keyframes rzStaub{0%,100%{opacity:.35}50%{opacity:1}}
/* Funkelsterne mit vier Zacken */
.held-glanz i{position:absolute;width:14px;height:14px;background:#E2B48A;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 6px rgba(226,180,138,.9));animation:rzFunkel 3.6s ease-in-out infinite;opacity:0}
.held-glanz i:nth-child(1){top:12%;left:2%;width:16px;height:16px}
.held-glanz i:nth-child(2){top:8%;left:40%;width:12px;height:12px;animation-delay:-1.1s}
.held-glanz i:nth-child(3){bottom:8%;left:54%;width:15px;height:15px;animation-delay:-2.2s;background:#F6F0E4}
.held-glanz i:nth-child(4){top:14%;right:3%;width:22px;height:22px;animation-delay:-.6s}
.held-glanz i:nth-child(5){bottom:12%;right:21%;width:13px;height:13px;animation-delay:-2.8s;background:#F6F0E4}
.held-glanz i:nth-child(6){top:46%;right:31%;width:18px;height:18px;animation-delay:-1.7s}
@keyframes rzFunkel{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}45%,55%{opacity:1;transform:scale(1) rotate(45deg)}}

/* Überschrift: Creme mit einem Kupferglanz, der langsam darüberzieht */
.held h1{background:linear-gradient(100deg,#F6F0E4 0%,#F6F0E4 38%,#E2B48A 45%,#FFF8EC 50%,#CC9363 55%,#F6F0E4 62%,#F6F0E4 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:rzGlanz 7s ease-in-out infinite;padding-bottom:.08em}
.held h1 em{-webkit-text-fill-color:transparent}
@keyframes rzGlanz{0%{background-position:100% 0}55%,100%{background-position:0% 0}}
.held .augenbraue{text-shadow:0 0 12px rgba(204,147,99,.35)}

/* Red: ruhig im Kreis, mit warmem Schein und sanftem Atmen */
.held .held-kreis{display:none!important}
.held-bild{box-shadow:0 0 0 6px rgba(204,147,99,.10),0 0 46px rgba(204,147,99,.28);animation:rzAtmen 6s ease-in-out infinite!important}
@keyframes rzAtmen{0%,100%{box-shadow:0 0 0 6px rgba(204,147,99,.10),0 0 40px rgba(204,147,99,.22)}50%{box-shadow:0 0 0 9px rgba(204,147,99,.14),0 0 60px rgba(204,147,99,.36)}}

/* Reds Video im Kreis (Daumen hoch, vor- und zurück, ohne Sprung) */
.held-bild .red-video{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 24%;background:#E9E2DA;display:block}

/* Dunkle Kopfleisten der Abschnitte: dieselbe Überschrift mit Glanz, dezenter */
.karte-kopf,.nkerkl-kopf,.werk-kopf{position:relative;overflow:hidden}
.karte-kopf h2,.nkerkl-kopf h2{background:linear-gradient(100deg,#F6F0E4 0%,#F6F0E4 40%,#E2B48A 48%,#FFF8EC 50%,#E2B48A 52%,#F6F0E4 60%,#F6F0E4 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:rzGlanz 9s ease-in-out infinite}

/* Knöpfe: ein Lichtstreif beim Darüberfahren */
.knopf{position:relative;overflow:hidden}
.knopf::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,220,.38),transparent);transform:skewX(-18deg);transition:left .7s ease}
.knopf:hover::after{left:120%}

@media(prefers-reduced-motion:reduce){
  .held,.held-glanz::before,.held-glanz::after,.held-glanz i,.held h1,.karte-kopf h2,.nkerkl-kopf h2,.held-bild{animation:none!important}
  .held-glanz i{opacity:.8}
}
@media print{.held-glanz{display:none}}

/* ===================================================================
   Rechenmagie · Wow-Effekte der Startseite (Theresa 11.10.2026)
   1. Zahl zerfällt in Glitzer: 123 → 100 + 20 + 3 in der Zaubermaschinen-Karte
   2. Kupferglanz über die Knöpfe + Karten neigen sich mit der Maus (3D, Lichtreflex)
   3. Beeren springen beim Klick auf einen Knopf heraus
   Alles aus, wenn am Gerät „weniger Bewegung" eingestellt ist.
   =================================================================== */

/* ---------- 1. Zahl zerfällt in Glitzer ---------- */
.zm-zauber{position:relative;height:74px;margin:2px 0 4px;display:flex;align-items:center}
.zm-zauber .zm-ganz,.zm-zauber .zm-teile{position:absolute;left:0;font-family:var(--f-titel);font-style:italic;
  line-height:1;white-space:nowrap}
.zm-ganz{font-size:3.4rem;color:var(--ku);animation:zmGanz 7s ease-in-out infinite}
.zm-teile{font-size:2.15rem;color:var(--ox);animation:zmTeile 7s ease-in-out infinite}
.zm-teile b{font-weight:400;color:var(--ku-d)}
.zm-teile i{font-style:normal;color:var(--ku);margin:0 .22em}
@keyframes zmGanz{0%,22%{opacity:1;filter:blur(0);transform:scale(1)}
  32%{opacity:0;filter:blur(6px);transform:scale(1.12)}
  82%{opacity:0;filter:blur(6px);transform:scale(.9)}
  92%,100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes zmTeile{0%,30%{opacity:0;filter:blur(6px);transform:translateX(-8px)}
  42%,72%{opacity:1;filter:blur(0);transform:none}
  82%,100%{opacity:0;filter:blur(6px);transform:translateX(8px)}}
.zm-staub{position:absolute;left:0;top:50%;width:140px;height:0;pointer-events:none}
.zm-staub s{position:absolute;left:var(--x);top:0;width:var(--g);height:var(--g);border-radius:50%;
  background:radial-gradient(circle,#FFF4E2 0%,#F3D2AE 35%,#CC9363 70%,transparent 72%);
  box-shadow:0 0 8px rgba(226,180,138,.9);opacity:0;animation:zmStaub 7s ease-out infinite;animation-delay:var(--v)}
@keyframes zmStaub{0%,24%{opacity:0;transform:translate(0,0) scale(.3)}
  29%{opacity:1;transform:translate(calc(var(--dx)*.4),calc(var(--dy)*.4)) scale(1)}
  40%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
  78%{opacity:0;transform:translate(0,0) scale(.3)}
  86%{opacity:.9;transform:translate(calc(var(--dx)*-.3),calc(var(--dy)*-.3)) scale(.8)}
  94%,100%{opacity:0;transform:translate(0,0) scale(.2)}}

/* ---------- 2a. Kupferglanz über die Knöpfe ---------- */
.knopf{position:relative;overflow:hidden;isolation:isolate}
.knopf::after{content:'';position:absolute;inset:-2px auto -2px -60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,250,240,.0) 20%,rgba(255,250,240,.75) 50%,rgba(255,250,240,0) 80%,transparent 100%);
  transform:skewX(-18deg);animation:knopfGlanz 5.5s ease-in-out infinite}
.knopf-insta::after{animation-delay:1.4s}
@keyframes knopfGlanz{0%,62%{left:-60%}88%,100%{left:130%}}
.knopf{transition:transform .25s ease,box-shadow .25s ease}
.knopf:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(168,112,63,.45),inset 0 1px 0 rgba(255,248,236,.7)}

/* ---------- 2b. Karten neigen sich mit der Maus ---------- */
.karten{perspective:1100px}
.karte.dreh{transform-style:preserve-3d;will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.karte.dreh::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--lx,50%) var(--ly,50%),rgba(255,236,210,.55),rgba(255,236,210,0) 45%);
  transition:opacity .4s ease;z-index:1}
.karte.dreh.an::before{opacity:1}
.karte.dreh.an{transition:transform .08s linear,box-shadow .3s ease;box-shadow:0 26px 50px rgba(61,26,23,.16)}
.karte.dreh > *{position:relative;z-index:2}

/* ---------- 3. Beeren beim Klick ---------- */
.beere{position:fixed;left:0;top:0;width:var(--g);height:var(--g);margin:calc(var(--g)/-2) 0 0 calc(var(--g)/-2);
  border-radius:50%;pointer-events:none;z-index:9999;
  background:radial-gradient(circle at 34% 30%,#FFE9E2 0 13%,#EE6A6E 30%,#C2343F 62%,#8A1F2A 100%);
  box-shadow:0 0 0 1.5px rgba(246,240,228,.85),0 0 14px rgba(255,214,190,.55),0 3px 7px rgba(61,26,23,.35);animation:beereFlug .95s cubic-bezier(.2,.7,.3,1) forwards}
.beere::after{content:'';position:absolute;left:50%;top:-22%;width:44%;height:34%;margin-left:-22%;
  border-radius:60% 60% 20% 20%;background:#CC9363;transform:rotate(var(--r))}
@keyframes beereFlug{0%{transform:translate(0,0) scale(.3);opacity:0}
  15%{opacity:1;transform:translate(calc(var(--dx)*.35),calc(var(--dy)*.35)) scale(1)}
  100%{transform:translate(var(--dx),calc(var(--dy) + 70px)) scale(.75) rotate(var(--r));opacity:0}}

@media (prefers-reduced-motion: reduce){
  .zm-ganz,.zm-teile,.zm-staub s,.knopf::after{animation:none}
  .zm-ganz{opacity:0}.zm-teile{opacity:1;filter:none;transform:none}
  .knopf::after{display:none}
}