/* LinoEasy – Spaß-Effekte: Lino, Jubel-Karte, Konfetti, Sterne, Serien */

/* ---------- Lino (die Sprechblase mit Gesicht) ---------- */
.lino{overflow:visible;display:block}
.lino-body{fill:#E8730C}
.lino-eye ellipse{fill:#fff}
.lino-pupil{fill:#16302B;transition:transform .25s ease}
.lino-happyeyes{fill:none;stroke:#3B1700;stroke-width:3;stroke-linecap:round;display:none}
.lino-cheek{fill:#FFB59A;opacity:.75}
.lino-mouth{display:none}
.m-idle,.m-hmm{fill:none;stroke:#3B1700;stroke-width:3;stroke-linecap:round}
.m-happy{fill:#3B1700}
.m-wow{fill:#3B1700}
.lino-spark{fill:#FFC93C;display:none}
.lino--idle .m-idle{display:block}
.lino--happy .lino-eyes{display:none}
.lino--happy .lino-happyeyes,.lino--happy .m-happy{display:block}
.lino--wow .m-wow,.lino--wow .lino-spark{display:block}
.lino--wow .lino-pupil{transform:translateY(-1px) scale(1.15);transform-origin:center;transform-box:fill-box}
.lino--hmm .m-hmm{display:block}
.lino--hmm .lino-pupil{transform:translate(-1.5px,1.5px)}
.lino-eyes{animation:lino-blink 4.2s infinite;transform-origin:center 25px;transform-box:view-box}
@keyframes lino-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* ---------- Jubel-Karte ---------- */
.fun-cheer{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;max-width:420px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:12px;
  padding:10px 20px 10px 12px;border-radius:22px;background:#fff;color:#16302B;box-shadow:0 18px 40px -14px rgba(5,33,31,.45),0 0 0 2px rgba(232,115,12,.18);
  transform:translateY(30px) scale(.9);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.fun-cheer.show{transform:none;opacity:1;pointer-events:auto;cursor:pointer}
.fun-cheer-txt{display:grid;gap:2px}
.fun-cheer-txt b{font-size:1.15rem;letter-spacing:-.01em}
.fun-cheer.show .lino--wow,.fun-cheer.show .lino--happy{animation:lino-jump .7s cubic-bezier(.3,1.7,.5,1) .05s}
.fun-cheer.show .lino--hmm{animation:lino-tilt .9s ease-in-out}
@keyframes lino-jump{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-14px) scale(1.06,.96)}70%{transform:translateY(0) scale(1.05,.92)}100%{transform:none}}
@keyframes lino-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}65%{transform:rotate(6deg)}}
.fun-stars{display:flex;gap:2px}
.fun-star path{fill:#E4E9E7}
.fun-star.on path{fill:#FFC93C;stroke:#E8A100;stroke-width:1}
.fun-cheer.show .fun-star.on{animation:star-in .45s cubic-bezier(.2,1.8,.4,1) both}
.fun-cheer.show .fun-star.on:nth-child(2){animation-delay:.12s}
.fun-cheer.show .fun-star.on:nth-child(3){animation-delay:.24s}
@keyframes star-in{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
.fun-streak{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#C2410C;font-size:.92rem}
[data-theme="dark"] .fun-cheer{background:#0D2925;color:#E6F1EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fun-cheer{background:#0D2925;color:#E6F1EE}}
@media (min-width:900px){.fun-cheer{bottom:32px}}

/* ---------- Konfetti, +1-Stern, Antworten ---------- */
.fun-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:95}
.fun-float{position:fixed;z-index:96;display:inline-flex;align-items:center;gap:2px;font-weight:800;color:#B7791F;font-size:1.05rem;pointer-events:none;animation:float-up 1.1s ease-out forwards}
.fun-float .fun-star{width:22px;height:22px}
@keyframes float-up{0%{opacity:0;transform:translateY(6px) scale(.7)}20%{opacity:1;transform:translateY(-4px) scale(1.1)}100%{opacity:0;transform:translateY(-46px) scale(1)}}
.fun-pop{animation:fun-pop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes fun-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
.fun-shake{animation:fun-shake .45s ease-in-out}
@keyframes fun-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.ans.is-ok .key{transition:transform .3s cubic-bezier(.2,1.8,.4,1)}
.answers.locked .ans.is-ok .key{transform:scale(1.12)}

/* Mikrofon: Schallwellen beim Zuhören */
.nsb-mic.is-listening{position:relative}
.nsb-mic.is-listening::before,.nsb-mic.is-listening::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(185,58,43,.5);animation:mic-ring 1.6s ease-out infinite;pointer-events:none}
.nsb-mic.is-listening::after{animation-delay:.8s}
@keyframes mic-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* ---------- Startseite: Lino begrüßt ---------- */
.hero-buddy{display:flex;align-items:flex-end;gap:10px;margin:0 0 6px;min-height:92px}
.hero-lino{display:block;animation:lino-arrive .8s cubic-bezier(.2,1.6,.4,1) both}
.hero-lino .lino{animation:lino-bob 3.2s ease-in-out .9s infinite}
@keyframes lino-arrive{0%{transform:translateY(40px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes lino-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}
.hero-say{position:relative;display:inline-flex;align-items:center;gap:10px;margin-bottom:46px;padding:10px 16px;border-radius:18px 18px 18px 4px;background:#fff;color:#16302B;font-weight:700;font-size:1.05rem;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);animation:say-in .5s cubic-bezier(.2,1.6,.4,1) .55s both;transition:opacity .25s,transform .25s}
.hero-say.swap{opacity:0;transform:translateY(6px) scale(.96)}
@keyframes say-in{0%{opacity:0;transform:scale(.6) translateX(-20px)}100%{opacity:1;transform:none}}
.hero-wave{display:inline-flex;align-items:center;gap:3px;height:18px}
.hero-wave i{display:block;width:3px;height:100%;border-radius:2px;background:#E8730C;animation:wave 1s ease-in-out infinite}
.hero-wave i:nth-child(2){animation-delay:.15s;background:#0A7F66}.hero-wave i:nth-child(3){animation-delay:.3s}.hero-wave i:nth-child(4){animation-delay:.45s;background:#0A7F66}
@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* Einstellungen */
.fun-set{display:grid;gap:8px}

/* Ruhig: abgeschaltet oder „Bewegung reduzieren“ */
.fun-still .lino,.fun-still .lino-eyes,.fun-still .hero-lino,.fun-still .hero-say,.fun-still .hero-wave i,.fun-still .fun-cheer .fun-star,.fun-still .nsb-mic.is-listening::before,.fun-still .nsb-mic.is-listening::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.fun-cheer{transition:opacity .2s}.nsb-mic.is-listening::before,.nsb-mic.is-listening::after{display:none}}
/* App-Start: Lino grüßt */
.app-hello{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.app-hello h1{margin:0}
.app-hello p{margin:2px 0 0}
.app-hello .lino{flex:none;animation:lino-arrive .7s cubic-bezier(.2,1.6,.4,1) both}

/* ---------- Belohnung: Einladung ---------- */
.fun-invite{position:fixed;left:16px;right:16px;margin:0 auto;bottom:calc(84px + env(safe-area-inset-bottom));z-index:92;width:fit-content;max-width:440px;display:flex;gap:14px;align-items:center;
  padding:14px 18px 14px 14px;border-radius:22px;background:#fff;color:#16302B;box-shadow:0 22px 50px -16px rgba(5,33,31,.5),0 0 0 3px #FFC93C;
  transform:translateY(40px) scale(.9);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.fun-invite.show{transform:none;opacity:1;pointer-events:auto}
.fun-invite .lino{flex:none}
.fun-invite.show .lino{animation:lino-jump .7s cubic-bezier(.3,1.7,.5,1) .1s 2}
.fun-invite b{font-size:1.1rem}
.fun-invite p{margin:2px 0 10px;color:#46605A}
.fun-invite-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:900px){.fun-invite{bottom:32px}}
[data-theme="dark"] .fun-invite{background:#0D2925;color:#E6F1EE}
[data-theme="dark"] .fun-invite p{color:#A9C9C0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fun-invite{background:#0D2925;color:#E6F1EE}:root:not([data-theme="light"]) .fun-invite p{color:#A9C9C0}}

/* ---------- Lino-Tennis ---------- */
.lt-open,.lt-open body{overflow:hidden}
.lt-wrap{position:fixed;inset:0;z-index:94;background:rgba(5,33,31,.95);display:flex;align-items:center;justify-content:center;padding:10px;touch-action:none;animation:lt-in .25s ease-out}
@keyframes lt-in{from{opacity:0}to{opacity:1}}
.lt-box{width:min(440px,100%);height:min(760px,100%);display:flex;flex-direction:column;gap:8px}
.lt-head{display:flex;align-items:center;gap:12px;color:#fff}
.lt-score{display:inline-flex;align-items:center;gap:6px;font-size:1.6rem;font-variant-numeric:tabular-nums}
.lt-me{color:#FFB15C}.lt-cpu{color:#7BD389}
.lt-names{color:#A9C9C0;font-size:.9rem;flex:1}
.lt-close{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;cursor:pointer}
.lt-close:focus-visible{outline:3px solid #FFC93C;outline-offset:2px}
.lt-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.lt-cv{display:block;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);cursor:none}
.lt-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.lt-msg[hidden]{display:none}
.lt-msg-in{background:#fff;color:#16302B;border-radius:22px;padding:22px;max-width:320px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.lt-msg-in b{font-size:1.4rem}
.lt-msg-in p{margin:0 0 8px;color:#46605A}
.lt-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lt-say{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;color:#fff;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.5);pointer-events:none}

/* ---------- Sprache der Bedienung ---------- */
.i18n-wait body{opacity:0}
.lang-btn{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:6px 10px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.lang-btn:hover{background:rgba(10,127,102,.08)}
.lang-btn:focus-visible{outline:3px solid var(--orange,#E8730C);outline-offset:2px}
.head-lang{display:flex;align-items:center;margin-left:auto}
@media (min-width:1101px){.head-lang{order:3;margin-left:6px}}
.top-lang{display:flex;align-items:center;margin-left:auto}
.top-lang + .top-settings{margin-left:0}
.lang-menu{position:absolute;z-index:120;min-width:220px;background:#fff;color:#16302B;border-radius:16px;padding:8px;box-shadow:0 24px 50px -16px rgba(5,33,31,.45),0 0 0 1px rgba(5,33,31,.08)}
.lang-menu .lang-title{margin:4px 10px 6px;font-size:.78rem;font-weight:700;color:#5B6B66}
.lang-menu button{display:block;width:100%;text-align:start;padding:10px 12px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:1rem;color:inherit;cursor:pointer}
.lang-menu button:hover,.lang-menu button:focus-visible{background:#F1F6F4;outline:none}
.lang-menu button[aria-checked="true"]{background:#FFF1E4;font-weight:700;color:#B45309}
.lang-menu .lang-note{margin:6px 10px 4px;font-size:.78rem;color:#5B6B66}
.lang-select{min-height:44px;padding:6px 12px;border:2px solid var(--line,#DDE5E2);border-radius:8px;font:inherit;background:var(--card,#fff);color:var(--ink,#16302B);max-width:320px}
[data-lang-switch="select"]{display:grid;gap:6px}
.lang-suggest{position:fixed;left:16px;right:16px;top:12px;margin:0 auto;z-index:110;width:fit-content;max-width:560px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff;color:#16302B;box-shadow:0 20px 44px -16px rgba(5,33,31,.5),0 0 0 2px #E8730C}
.lang-suggest small{display:block;color:#5B6B66}
.ui-ar body{font-family:Inter,"Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro",sans-serif}
[data-theme="dark"] .lang-menu,[data-theme="dark"] .lang-suggest{background:#0D2925;color:#E6F1EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lang-menu,:root:not([data-theme="light"]) .lang-suggest{background:#0D2925;color:#E6F1EE}}
/* Übersetzung der Lerninhalte unter dem deutschen Text */
.tr-sub{display:block;margin-top:4px;font-size:.82em;font-weight:500;line-height:1.4;color:var(--muted,#5B6B66);font-style:normal;letter-spacing:0;text-transform:none}
.tr-sub[dir="rtl"]{text-align:right}
.tr-inline{display:inline;margin:0 0 0 .3em;font-size:.85em}
.tr-inline::before{content:"("}.tr-inline::after{content:")"}
h1 .tr-sub,h2 .tr-sub,h3 .tr-sub{font-size:.55em;font-weight:600;margin-top:6px}
.qtext .tr-sub{font-size:.72em;margin-top:6px}
.ans .tr-sub{font-size:.85em;margin-top:2px}
.ns .tr-sub{margin:-4px 0 10px}
.tr-block{margin-top:6px}
.qtext>span:first-child,.ans .pick>span:last-child,.explain p{overflow-wrap:anywhere;min-width:0}
.ans .pick{min-width:0}
.appview h1,.appview h2,.appview h3,.wword,.wcard-head{overflow-wrap:anywhere;hyphens:auto}
/* Preiskarten: zwei Angebote mittig und nicht zu breit */
.price-grid.pc2{max-width:780px;margin-left:auto;margin-right:auto}
.price-grid.pc1{max-width:420px;margin-left:auto;margin-right:auto}