/* =============================================================================
   site.css - Website von MyGotchi (Entwurf "Baellebad" mit Teilen aus Handgeraet,
   Ein Tag, Sammelalbum und Kapselautomat). Startseiten index.asp / index_en.asp /
   index_es.asp kommen aus .claude-workshop/_mygotchi/sql/make_website.js, die
   Rechtstexte binden dieselbe Datei ein. Aufbau und Regeln: DESIGN.md im App-Ordner.

   Ein Grundton fuer die ganze Seite, alle Flaechen haengen an Tokens in vier
   Bloecken (:root, prefers-color-scheme, body.theme-dark, body.theme-light).
   Figuren (images/site/figuren/*.webp) liegen mit Rand im Bild; kein Behaelter
   darf sie beschneiden: kein overflow:hidden um eine Figur.
   ============================================================================= */

@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/figtree-400_800-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/figtree-400_800.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:'Fredoka';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fredoka-400_700-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fredoka-400_700.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}

/* --- Tokens ---------------------------------------------------------------- */
:root{
  --bg:#eef1fa; --surface:#ffffff; --tint:#e2e7f6; --ink:#1b1e3a; --ink-soft:#4f5577; --line:rgba(27,30,58,.14);
  --accent:#ffc21a; --on-accent:#241b04; --dot:#d6336c; --link:#8a5a00; --ok:#2f8a57;
  --machine:#1b1b1f; --machine-ink:#f6f6f7; --glass:rgba(255,255,255,.6); --block:#1b1e3a; --on-block:#eef0fa;
  --head-bg:rgba(238,241,250,.86); --head-solid:#eef1fa;
  --shadow:0 18px 40px -18px rgba(40,46,110,.32); --fig-shadow:rgba(20,24,70,.22);
  --font:'Figtree',system-ui,-apple-system,sans-serif; --display:'Fredoka','Figtree',sans-serif;
}
@media (prefers-color-scheme:dark){:root:not(.theme-forced){
  --bg:#12142a; --surface:#1b1e38; --tint:#181b33; --ink:#eef0fa; --ink-soft:#a6abc9; --line:rgba(238,240,250,.13);
  --accent:#ffd14c; --on-accent:#241b04; --dot:#ff6f9f; --link:#ffd14c; --ok:#6fd49a;
  --machine:#26262c; --machine-ink:#f6f6f7; --glass:rgba(255,255,255,.08); --block:#262a52; --on-block:#eef0fa;
  --head-bg:rgba(18,20,42,.86); --head-solid:#12142a;
  --shadow:0 18px 40px -18px rgba(0,0,0,.6); --fig-shadow:rgba(0,0,0,.45);
}}
body.theme-dark{
  --bg:#12142a; --surface:#1b1e38; --tint:#181b33; --ink:#eef0fa; --ink-soft:#a6abc9; --line:rgba(238,240,250,.13);
  --accent:#ffd14c; --on-accent:#241b04; --dot:#ff6f9f; --link:#ffd14c; --ok:#6fd49a;
  --machine:#26262c; --machine-ink:#f6f6f7; --glass:rgba(255,255,255,.08); --block:#262a52; --on-block:#eef0fa;
  --head-bg:rgba(18,20,42,.86); --head-solid:#12142a;
  --shadow:0 18px 40px -18px rgba(0,0,0,.6); --fig-shadow:rgba(0,0,0,.45);
}
body.theme-light{
  --bg:#eef1fa; --surface:#ffffff; --tint:#e2e7f6; --ink:#1b1e3a; --ink-soft:#4f5577; --line:rgba(27,30,58,.14);
  --accent:#ffc21a; --on-accent:#241b04; --dot:#d6336c; --link:#8a5a00; --ok:#2f8a57;
  --machine:#1b1b1f; --machine-ink:#f6f6f7; --glass:rgba(255,255,255,.6); --block:#1b1e3a; --on-block:#eef0fa;
  --head-bg:rgba(238,241,250,.86); --head-solid:#eef1fa;
  --shadow:0 18px 40px -18px rgba(40,46,110,.32); --fig-shadow:rgba(20,24,70,.22);
}

/* --- Grundlagen ------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-top:64px;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;hyphens:auto;overflow-wrap:break-word}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%;height:auto}
a{color:var(--link)}
[id]{scroll-margin-top:76px}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 20px}}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.05;margin:0;text-wrap:balance;hyphens:manual}
h2{font-size:clamp(32px,4.6vw,56px)}
h3{font-size:24px}
p{margin:0}
.lead{color:var(--ink-soft);font-size:19px;max-width:46ch;margin-top:14px}
html body img.shot-dark{display:none}
@media (prefers-color-scheme:dark){html:not(.theme-forced) body img.shot-light{display:none}html:not(.theme-forced) body img.shot-dark{display:block}}
html body.theme-dark img.shot-light{display:none}html body.theme-dark img.shot-dark{display:block}
html body.theme-light img.shot-light{display:block}html body.theme-light img.shot-dark{display:none}
.fig{filter:drop-shadow(0 10px 14px var(--fig-shadow))}

/* --- Knoepfe ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;
  font:inherit;font-weight:700;font-size:15.5px;text-decoration:none;white-space:nowrap;cursor:pointer;border:1.5px solid var(--line);
  background:transparent;color:var(--ink);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media (hover:hover){.btn:not(.btn-primary):hover{background:var(--surface)}}
.store{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.store i{font-size:22px}
.store:active{transform:scale(.97)}
.iconbtn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;font-size:16px;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.iconbtn:active{transform:scale(.95)}

/* --- Kopfzeile (Handbuch 7): Wortmarke, Navigation, Farbmodus, Sprachwahl, Knopf, Menue */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--head-bg);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .dot{color:var(--dot)}
.navlinks{display:flex;align-items:center;gap:4px;margin-inline:auto}
.navlinks a{color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:15.5px;padding:12px;min-height:48px;display:flex;align-items:center}
@media (hover:hover){.navlinks a:hover{color:var(--ink)}}
.navlinks a.btn-primary{color:var(--on-accent)}
.burger{display:none}
.lang-switch{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.lang-switch a{color:var(--ink-soft);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
.lang-switch a.active{color:var(--ink);border-bottom-color:var(--accent)}
.lang-switch .sep{color:var(--line)}
@media (max-width:860px){
  .burger{display:grid}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 18px;background:var(--head-solid);border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
  .navlinks a{border-bottom:1px solid var(--line)}
  .nav > .brand{margin-right:auto}
  .nav > .btn,.nav > .lang-switch{display:none}
  .navlinks a.cta-menu{margin-top:14px;border-bottom:0}
  .navlinks .lang-switch{padding:12px 4px}
  .navlinks .lang-switch a{border-bottom:2px solid transparent;min-height:0}
  .navlinks .lang-switch a.active{border-bottom-color:var(--accent)}
}
@media (min-width:861px){.navlinks .lang-switch,.navlinks a.cta-menu{display:none}}

/* --- Abschnitte --------------------------------------------------------------- */
main section{padding-block:104px;overflow-x:clip}
@media (max-width:640px){main section{padding-block:72px}}
.tint{background:var(--tint)}

/* Hero: das Baellebad. Positionen je Figur als --x/--y/--s (breit) und --xm/--ym/--sm
   (Telefon) aus dem Erzeuger; jede Figur liegt ganz im Bild, auch unten. */
.hero{position:relative;min-height:calc(100dvh - 64px);display:flex;flex-direction:column;padding-top:56px;padding-bottom:0}
.hero h1{font-size:clamp(46px,7.4vw,104px);max-width:12ch}
.hero .lead{font-size:clamp(18px,1.6vw,21px)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pit{position:relative;flex:1 1 auto;min-height:clamp(240px,34vw,400px);margin-top:28px;width:100%}
.pit button{position:absolute;padding:0;border:0;background:none;cursor:pointer;width:var(--s);left:var(--x);bottom:var(--y);aspect-ratio:1;
  transform:rotate(var(--r));transition:transform .5s cubic-bezier(.23,1,.32,1);-webkit-tap-highlight-color:transparent}
.pit button img{width:100%;height:100%}
.pit button.up{transform:translateY(-22%) rotate(0deg) scale(1.1);z-index:9}
.pit .tag{position:absolute;left:50%;top:4%;transform:translate(-50%,-100%);background:var(--surface);color:var(--ink);font-weight:700;font-size:15px;
  padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s}
.pit button.up .tag{opacity:1}
@media (max-width:640px){
  .hero{min-height:0}
  .pit button{width:var(--sm);left:var(--xm);bottom:var(--ym)}
  .pit button.weit{display:none}
}
/* Regen: jede Figur faellt einzeln (--d Startzeit, --f Falldauer aus dem Erzeuger), beschleunigt
   wie unter Schwerkraft und federt beim Aufprall kurz nach. */
@media (prefers-reduced-motion:no-preference){
  .js .pit button{animation:regen var(--f,1s) linear var(--d,0ms) backwards}
  @keyframes regen{
    0%{transform:translateY(-120vh) rotate(calc(var(--r) - 120deg));animation-timing-function:cubic-bezier(.55,0,1,.45)}
    72%{transform:translateY(0) rotate(var(--r));animation-timing-function:cubic-bezier(0,.55,.45,1)}
    84%{transform:translateY(-9%) rotate(calc(var(--r) + 6deg));animation-timing-function:cubic-bezier(.55,0,1,.45)}
    100%{transform:translateY(0) rotate(var(--r))}
  }
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){.js .pit button{animation-delay:var(--dm,0ms)}}

/* Probieren: runde Buehne, Farbleiste */
.probe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.stage{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--surface),var(--tint));display:grid;place-items:center}
.stage img{width:86%;transition:opacity .18s,transform .3s cubic-bezier(.23,1,.32,1)}
.stage img.swap{opacity:0;transform:scale(.94)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips button{width:44px;height:44px;border-radius:50%;border:3px solid var(--bg);outline:1.5px solid var(--line);background:var(--c);cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.chips button[aria-pressed="true"]{outline:3px solid var(--ink)}
.chips button:active{transform:scale(.92)}
.moodname{font-family:var(--display);font-weight:600;font-size:30px;margin-top:22px}
.moodtier{color:var(--ink-soft);font-size:15px}
@media (max-width:860px){.probe{grid-template-columns:1fr}.stage{max-width:420px;margin:0 auto;width:100%}}

/* Spielprinzip: drei Balken zum Selbermachen */
.pflege-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;margin-top:40px}
.bars{background:var(--surface);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.bar{margin-bottom:22px}
.bar label{display:flex;justify-content:space-between;font-weight:700}
.bar .track{height:16px;border-radius:999px;background:var(--tint);margin-top:8px;overflow:hidden}
.bar .fill{height:100%;width:100%;transform-origin:left;transform:scaleX(var(--v));background:var(--accent);border-radius:999px;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.facts{display:grid;gap:26px}
.facts h3{margin-bottom:6px}
.facts p{color:var(--ink-soft)}
@media (max-width:860px){.pflege-grid{grid-template-columns:1fr}}

/* So fuellst du das Album: vier Schritte als Pfeilkette */
.kette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
.kette > div{position:relative;background:var(--surface);border-radius:22px;padding:24px;border:1px solid var(--line)}
.kette i{font-size:24px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent)}
.kette h3{margin-top:16px}
.kette p{color:var(--ink-soft);margin-top:6px;font-size:16px}
.kette > div:not(:last-child)::after{content:"\f061";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-15px;top:38px;font-size:15px;color:var(--ink-soft)}
@media (max-width:960px){.kette{grid-template-columns:1fr 1fr}.kette > div::after{display:none}}
@media (max-width:520px){.kette{grid-template-columns:1fr}}

/* Er weiss, wie spaet es ist: links steht der Gotchi, rechts laufen die Stunden */
.tag{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start;margin-top:24px}
.buehne{position:sticky;top:96px;aspect-ratio:1;border-radius:32px;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow)}
.buehne img{width:80%;transition:opacity .25s,transform .45s cubic-bezier(.23,1,.32,1)}
.buehne img.weg{opacity:0;transform:translateY(10px) scale(.96)}
.buehne .name{position:absolute;left:24px;bottom:20px;font-family:var(--display);font-weight:600;font-size:22px}
.buehne .zeit{position:absolute;right:24px;top:20px;font-weight:700;font-size:15px;color:var(--ink-soft)}
.stunde{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;border-top:1px solid var(--line)}
.stunde:first-child{border-top:0}
.stunde .uz{font-family:var(--display);font-weight:600;font-size:clamp(46px,6vw,88px);letter-spacing:-.03em;line-height:1}
.stunde .uz small{font-size:.36em;color:var(--ink-soft);letter-spacing:0}
.stunde h3{margin-top:14px}
.stunde p{color:var(--ink-soft);margin-top:8px;max-width:40ch}
.stunde .mini{display:none}
@media (max-width:900px){
  .tag{grid-template-columns:1fr}.buehne{display:none}
  .stunde{min-height:0;display:grid;grid-template-columns:104px 1fr;gap:4px 18px;align-items:center}
  .stunde .mini{display:block;grid-row:1 / span 3;width:104px}
  .stunde .uz{font-size:44px}.stunde h3{margin-top:4px;font-size:21px}
}

/* Was er ueber den Tag braucht: drei Spalten mit grosser Zahl */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px}
.trio > div{padding:8px 32px 8px 0}
.trio > div + div{padding-left:32px;border-left:1px solid var(--line)}
.trio .zahl{font-family:var(--display);font-weight:600;font-size:64px;letter-spacing:-.03em;line-height:1}
.trio h3{font-size:22px;margin-top:12px}
.trio p{color:var(--ink-soft);margin-top:8px}
@media (max-width:860px){.trio{grid-template-columns:1fr;gap:28px}.trio > div,.trio > div + div{padding:0;border:0}}

/* Album der Launen: nummerierte Felder, eingeklebte Bilder */
.seite{background:var(--surface);border-radius:24px;padding:clamp(20px,3vw,40px);margin-top:40px;box-shadow:var(--shadow)}
.seite-kopf{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.seite-kopf h3{font-size:28px}
.nr{font-size:13px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.felder{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:14px}
.feld{position:relative;aspect-ratio:.8;border:2px dashed var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;text-align:center;background:none;font:inherit;color:inherit}
button.feld{cursor:pointer}
.feld > .nr{position:absolute;top:6px;left:9px}
.feld .leer{font-size:14px;color:var(--ink-soft);margin-top:4px;line-height:1.3}
.feld .leer i{display:block;font-size:18px;margin-bottom:6px;color:var(--ink)}
.sticker{position:absolute;inset:-2px;border-radius:16px;background:var(--bg);box-shadow:0 2px 0 var(--line),0 12px 20px -14px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:22px 6px 8px;transform:rotate(var(--r,0deg))}
.sticker[hidden]{display:none}
.sticker img{width:100%;margin:auto}
.sticker b{font-size:14px;line-height:1.2;hyphens:auto}
.sticker small{font-size:12.5px;color:var(--ink-soft)}
.sticker .nr{position:absolute;top:6px;left:9px}
.hinweis{font-size:15px;color:var(--ink-soft);margin-top:18px}
@media (prefers-reduced-motion:no-preference){.sticker.neu{animation:kleben .5s cubic-bezier(.23,1,.32,1)}@keyframes kleben{from{transform:rotate(-8deg) translateY(-18px) scale(1.08);opacity:0}}}

/* Sonderbilder: Skins mit Preis, daneben die Erfolgs-Skins */
.sonder{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;margin-top:40px;align-items:start}
.sonder .seite{margin-top:0}
.skinfelder{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.glitzer{background:var(--block);color:var(--on-block);border-radius:24px;padding:32px}
.glitzer h3{font-size:30px}
.glitzer p{opacity:.85;margin-top:10px}
.glitzer .reihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:22px}
@media (max-width:900px){.sonder{grid-template-columns:1fr}}

/* Shop: alle Rubriken wie in der App, mit den Werten je Artikel; zwei Spalten im Satz,
   damit kurze Rubriken keine Luecken lassen */
.shop{columns:2;column-gap:20px;margin-top:40px}
.rubrik{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;break-inside:avoid;margin-bottom:20px}
.rubrik-kopf{display:flex;justify-content:space-between;align-items:baseline;padding:14px 20px;background:var(--tint);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.rubrik-kopf span:last-child{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.zeilen{list-style:none;margin:0;padding:4px 0}
.zeilen li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 20px;border-top:1px solid var(--line)}
.zeilen li:first-child{border-top:0}
.zeilen .ic{font-size:19px;text-align:center;color:var(--ink-soft)}
.zeilen .ic img{width:40px;max-width:none;margin:-4px}
.zeilen b{font-weight:700}
.zeilen .werte{display:inline-flex;flex-wrap:wrap;gap:4px 10px;margin-left:8px;font-size:13.5px;font-weight:700;color:var(--ok)}
.zeilen .werte i{font-size:12px}
.zeilen .preis{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.zeilen .preis i{color:var(--ink-soft);font-size:13px;margin-left:3px}
.zeilen .lv{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);text-align:right}
.shop-fuss{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--ink-soft);font-size:16px}
.shop-fuss span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--ink);font-weight:700;font-size:14.5px}
@media (max-width:860px){.shop{columns:1}}

/* Taeglicher Bonus: Raster wie im Blatt der App (7 x 4), Reihenfolge gemischt */
.bonus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.blatt{background:var(--surface);border-radius:26px;padding:22px;box-shadow:var(--shadow)}
.blatt-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:800;font-size:19px}
.blatt-kopf i{color:var(--ink-soft)}
.kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.kal button{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:10px;
  background:none;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;padding:0;transition:transform .12s ease-out}
.kal button:active{transform:scale(.93)}
.kal .ic{font-size:15px;line-height:1}
.kal .tg{font-size:11px;line-height:1;opacity:.8}
.kal .gross{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.kal .heute{border:2px solid var(--accent)}
.kal .vorbei{opacity:.4;background:var(--line)}
.kal .badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#fff;font-size:9px;display:grid;place-items:center}
.ic-muenze{color:#c99400}.ic-herz{color:#e0476b}.ic-essen{color:#d8402f}.ic-trinken{color:#2f8ad6}.ic-keks{color:#a8692b}.ic-hut{color:var(--ink)}
.kal-detail{min-height:52px;margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--tint);font-weight:700}
.kal-detail span{display:block;font-weight:500;color:var(--ink-soft);font-size:15px}
.abholen{width:100%;margin-top:14px}
@media (max-width:900px){.bonus{grid-template-columns:1fr}}

/* Kapselautomat: am Knopf drehen, eine Kapsel faellt */
.automat-teil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.automat{justify-self:center;width:min(420px,100%);display:flex;flex-direction:column;align-items:center}
.kuppel{position:relative;width:100%;aspect-ratio:1;border-radius:50%;border:10px solid var(--machine);background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.85) 0 5%,transparent 16%),var(--glass)}
/* Kugeln: --x/--y ist die Mitte (Erzeuger), --dx/--dy die Richtung beim Schuetteln. Geschuettelt
   wird einmal, wenn die Kuppel ins Bild kommt, und bei jedem Dreh am Knopf (js/site.js). */
.kuppel img{position:absolute;width:30%;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r))}
.kuppel.schuettel img{animation:schuettel 1.1s cubic-bezier(.36,.07,.19,.97) var(--d) both}
@keyframes schuettel{
  0%,100%{transform:translate(-50%,-50%) rotate(var(--r))}
  12%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 8%)) rotate(calc(var(--r) + 28deg))}
  28%{transform:translate(calc(-50% - var(--dx)),calc(-50% - var(--dy))) rotate(calc(var(--r) - 24deg))}
  44%{transform:translate(calc(-50% + var(--dy)),calc(-50% + var(--dx) - 5%)) rotate(calc(var(--r) + 16deg))}
  60%{transform:translate(calc(-50% - var(--dy) * .5),calc(-50% - var(--dx) * .5)) rotate(calc(var(--r) - 9deg))}
  78%{transform:translate(calc(-50% + var(--dx) * .2),calc(-50% + 2%)) rotate(calc(var(--r) + 4deg))}
}
.sockel{width:86%;background:var(--machine);color:var(--machine-ink);border-radius:0 0 22px 22px;padding:22px 22px 24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:-4px}
.knopf{width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;background:var(--accent);position:relative;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18);transition:transform .7s cubic-bezier(.77,0,.175,1)}
.knopf::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:16px;transform:translateX(-50%);background:var(--machine);border-radius:8px}
.knopf.dreh{transform:rotate(360deg)}
.schacht{background:#0b0b0d;border-radius:14px;height:112px;display:grid;place-items:center}
.kapsel{width:100px;height:100px;border-radius:50%;background:linear-gradient(180deg,var(--c,#ffc21a) 0 50%,rgba(255,255,255,.85) 50% 100%);display:grid;place-items:center}
.kapsel img{width:92px}
.kapsel.da{animation:fall .6s cubic-bezier(.23,1,.32,1)}
@keyframes fall{0%{transform:translateY(-110%);opacity:0}15%{opacity:1}70%{transform:translateY(6%)}100%{transform:none}}
.sockel small{grid-column:1 / -1;font-size:14px;opacity:.8}
.gezogen{margin-top:16px;font-weight:700;font-size:19px;min-height:30px;text-align:center}
.gezogen span{color:var(--ink-soft);font-weight:500;font-size:15px}
@media (max-width:900px){.automat-teil{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.kapsel.da,.kuppel.schuettel img{animation:none}.knopf{transition:none}}

/* Einblick: versetzte Telefone */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:44px;align-items:start}
.shots figure{margin:0}
.shots figure:nth-child(even){margin-top:56px}
.shots img{border-radius:26px;box-shadow:var(--shadow);border:1px solid var(--line)}
.shots figcaption{font-size:15px;color:var(--ink-soft);margin-top:12px}
.shots figcaption b{color:var(--ink)}
@media (max-width:860px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}.shots figure:nth-child(even){margin-top:28px}}

/* Preise: eine Tafel */
.tafel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;background:var(--surface);border-radius:32px;box-shadow:var(--shadow);overflow:hidden}
.tafel > div{padding:32px 28px;border-left:1px solid var(--line)}
.tafel > div:first-child{border-left:0}
.tafel h3{font-size:28px}
.tafel .preis{font-family:var(--display);font-weight:600;font-size:40px;margin:10px 0 2px}
.tafel .wie{color:var(--ink-soft);font-size:15px}
.tafel ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.tafel li{display:flex;gap:10px}
.tafel li i{margin-top:6px;font-size:13px}
.tafel .hl{background:var(--accent);color:var(--on-accent)}
.tafel .hl .wie{color:var(--on-accent);opacity:.8}
@media (max-width:860px){.tafel{grid-template-columns:1fr}.tafel > div{border-left:0;border-top:1px solid var(--line)}.tafel > div:first-child{border-top:0}}

/* Laden */
.laden-box{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;background:var(--block);color:var(--on-block);border-radius:40px;padding:48px}
.laden-box img{width:240px}
.laden-box p{opacity:.8;margin-top:10px;max-width:40ch}
.laden-box .store{background:var(--accent);color:var(--on-accent);margin-top:24px}
@media (max-width:700px){.laden-box{grid-template-columns:1fr;padding:32px;text-align:center}.laden-box img{width:180px;margin:0 auto}.laden-box p{margin-inline:auto}}

.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s cubic-bezier(.23,1,.32,1)}.js .reveal.in{opacity:1;transform:none}}

/* --- Fuss (Handbuch 7) -------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--ink-soft);font-size:15px}
footer .fl{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap}
footer .grow{flex:1 1 auto}
footer a{color:inherit;text-decoration:none;white-space:nowrap;padding:12px 0}
footer .brand{font-size:19px;color:var(--ink)}
@media (hover:hover){footer a:hover{color:var(--ink)}}
@media (max-width:640px){footer .fl{justify-content:center}footer .grow{display:none}footer .brand{flex:0 0 100%;text-align:center}}

/* =============================================================================
   Nur Rechtstexte (agb, datenschutz, impressum, disclaimer)
   ============================================================================= */
.page-legal{font-size:16px}
.page-legal .wrap{max-width:1100px}
.page-legal main{padding:52px 0 64px}
.legal{max-width:80ch}
.legal h1{font-size:clamp(30px,5vw,40px);margin:0 0 10px}
.legal .stand{color:var(--ink-soft);font-size:14.5px;margin:0 0 34px}
.legal h2{font-family:var(--font);font-size:22px;font-weight:800;margin:40px 0 12px;padding-top:26px;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:none;padding-top:0}
.legal h3{font-family:var(--font);font-size:17.5px;font-weight:750;margin:26px 0 8px}
.legal p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 14px}
.legal ul,.legal ol{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink)}
.legal address{font-style:normal;color:var(--ink-soft);font-size:16px;line-height:1.7;margin:0 0 14px}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--tint);padding:2px 6px;border-radius:4px}
.legal .box{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px 24px;margin:0 0 20px}
.legal .box p:last-child,.legal .box ul:last-child{margin-bottom:0}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 24px;margin:0 0 38px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:15px;line-height:1.7}
@media (max-width:640px){.toc ol{columns:1}}
.toc a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.toc a:hover{text-decoration:underline}}
.legal table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 0 20px}
.legal th,.legal td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.legal th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.legal td:first-child{color:var(--ink);font-weight:700}
.legal tbody tr:last-child td{border-bottom:none}
.tbl-scroll{overflow-x:auto;border-radius:16px}
@media (max-width:680px){
  .tbl-scroll{overflow-x:visible}
  .legal table thead{display:none}
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%}
  .legal table tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .legal tbody tr:last-child{border-bottom:none}
  .legal table td{padding:0;border-bottom:none}
  .legal table td:first-child{margin-bottom:8px}
  .legal table td.v{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right;padding:6px 0}
  .legal table td.v::before{content:attr(data-label);color:var(--ink-soft);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
}
@media (max-width:640px){.page-legal main{padding:40px 0 48px}}

/* --- Hilfe: Panel von rechts mit hilfe_<sprache>.html im iframe ------------- */
.help-overlay{position:fixed;inset:0;z-index:1090;background:rgba(0,0,0,.5);display:none;opacity:0;transition:opacity 300ms ease}
.help-overlay.open{display:block;opacity:1}
.help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px;background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);z-index:1100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 320ms cubic-bezier(.32,.72,0,1)}
.help-panel.open{transform:translateX(0)}
@media (max-width:800px){.help-panel{width:100%;max-width:none;min-width:0}}
.help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.help-panel-header h3{margin:0;font-family:var(--font);font-size:17px;font-weight:800;color:var(--ink)}
.help-panel iframe{flex:1;width:100%;border:0;background:var(--surface)}
.help-close{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-content:center}

@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation:none!important}}