/* Finos Wörter-Welt – Ergänzungen zum Grund-Design (Wort-Kacheln, Tastatur, Texte, Schreibwerkstatt, Frag Fino) */
:root { --ff-fib: 'Nunito', 'Andika', system-ui, sans-serif; }
body { background: linear-gradient(180deg, #E0F7F4 0%, #FFF6EA 45%, #FFE9D1 100%) fixed; }
/* Maskottchen als Bild (Platzhalter/echte Illustration), SVG als Rückfall */
img.fino-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; transform-origin: 50% 90%; animation: fbob 4s ease-in-out infinite; }
@keyframes fbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(-1.5deg); } }
.fino-host.talking img.fino-img { animation: ftalk .32s ease-in-out infinite alternate; }
@keyframes ftalk { from { transform: scale(1, 1); } to { transform: scale(1.025, .975) translateY(1%); } }
.fino-host.happy img.fino-img, .fino-host.cheer img.fino-img { animation: fhop .6s cubic-bezier(.3, 1.6, .5, 1) 2; }
@keyframes fhop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12%) scale(1.04); } }
.fino-host.think img.fino-img { animation: ftilt 1.6s ease-in-out infinite alternate; } @keyframes ftilt { to { transform: rotate(-5deg); } }
.fino-host.wave img.fino-img { animation: fwave .5s ease-in-out 3 alternate; } @keyframes fwave { to { transform: rotate(4deg) translateY(-2%); } }
.f-fino { width: 200px; height: 200px; flex: none; }
/* Gebiete */
.a-bu { background: linear-gradient(160deg, #FFE7C9, #FFC98F); } .a-rs { background: linear-gradient(160deg, #DDF8D8, #A9E5A0); }
.a-sp { background: linear-gradient(160deg, #E1EDFF, #B5D3FF); } .a-le { background: linear-gradient(160deg, #D3F6FA, #9EE3EE); } .a-sw { background: linear-gradient(160deg, #FFE1EA, #FFB8CB); }
.area { background-blend-mode: normal; }
.area > .a-head::after { content: ''; position: absolute; right: -16px; top: -16px; width: min(46%, 380px); height: 120px; background: var(--aimg) right top / cover no-repeat; border-top-right-radius: 30px; opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); pointer-events: none; z-index: -1; }
.a-head { z-index: 0; }
/* Bild + Wort */
.picbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border-radius: 26px; padding: 14px 22px; box-shadow: var(--sh-s); min-width: 150px; }
.picbox b { font: 700 1.5em var(--ff); } .picbox .nopic { font-size: 3em; }
.say-mini { position: absolute; right: -14px; top: -14px; width: 52px; height: 52px; border-radius: 50%; background: var(--te); box-shadow: 0 3px 0 var(--te-d); display: grid; place-items: center; }
.say-mini img.em { width: 28px; height: 28px; filter: brightness(10); }
.ltext .say-mini { position: static; width: 44px; height: 44px; margin-left: auto; }
.bigword, .fib { font-family: var(--ff-fib); font-weight: 800; letter-spacing: .02em; }
.bigword { font-size: clamp(2em, 6vw, 3.2em); background: #fff; border-radius: 18px; padding: 6px 22px; margin-top: 8px; display: inline-block; box-shadow: var(--sh-s); color: var(--ink); }
.q .fib { font-size: 1.35em; color: var(--ink); background: #FFF7D6; border-radius: 10px; padding: 0 .3em; }
.q .gap, .gapw .gap { display: inline-block; min-width: 1.6em; border-bottom: 4px solid var(--or); color: var(--or-d); text-align: center; }
.gapw { font: 800 clamp(1.8em, 5vw, 2.8em) var(--ff-fib); margin-top: 8px; letter-spacing: .04em; } .gapw mark { background: #FFE58A; border-radius: 8px; padding: 0 .1em; }
.q .len { font-size: .75em; color: var(--ink2); }
.sent { font: 600 1.25em var(--ff); background: #fff; border-radius: 16px; padding: 10px 16px; margin-top: 8px; line-height: 1.7; }
.sent.small { font-size: 1em; color: var(--ink2); }
.sent mark { background: #FFE58A; border-radius: 6px; padding: 1px 4px; }
.sgc { display: inline-block; border: 2px dashed #B9C4E0; border-radius: 10px; padding: 0 6px; margin: 2px 0; } .sgc.on { background: #FFE58A; border: 2px solid #E0A100; }
.stamm { font-family: var(--ff-fib); font-weight: 900; background: #DCFCE7; color: #166534; border-radius: 8px; padding: 0 .35em; }
.stair { font: 700 1.2em var(--ff); }
.claps { display: block; min-height: 1.6em; } .choices.nums .choice { flex-direction: column; gap: 2px; min-width: 120px; }
.choices.words .choice { flex: 0 1 220px; justify-content: center; text-align: center; font: 700 1.45em var(--ff-fib); }
.choices.long .choice { flex: 1 1 100%; font-size: 1.05em; }
.choices.two .choice { flex: 0 1 220px; flex-direction: column; justify-content: center; text-align: center; font-size: 1.6em; } .choice small { display: block; font-size: .55em; color: var(--ink2); font-weight: 600; }
.choices.three.art .choice b { font-size: 1.2em; } .a-der { color: #2563EB; } .a-die { color: #DB2777; } .a-das { color: #16A34A; }
.choices.strat .choice { flex-direction: column; text-align: center; justify-content: center; gap: 4px; } .choices.strat .choice small { font-size: .8em; }
.choices.grid2 .choice b + small { margin-left: .4em; }
.grp { display: inline-flex; gap: 2px; flex-wrap: wrap; justify-content: center; max-width: 180px; }
/* Kacheln */
.trow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 72px; padding: 8px; border-radius: 20px; background: #F2F5FB; width: 100%; max-width: 920px; }
.tpool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; max-width: 920px; }
.tile, .tslot { min-width: 60px; min-height: 60px; border-radius: 16px; font: 700 1.6em var(--ff-fib); padding: 4px 14px; display: inline-flex; align-items: center; justify-content: center; }
.tile { background: #fff; box-shadow: 0 4px 0 #D5DCEC, 0 0 0 3px #E8ECF6 inset; transition: transform .12s, opacity .12s; }
.tile:active { transform: translateY(2px); } .tile.used { opacity: .18; pointer-events: none; }
.tslot { border: 3px dashed #B9C4E0; background: rgba(255, 255, 255, .6); } .tslot.filled { border: 3px solid var(--te); background: #fff; }
.tslot.bad { border-color: var(--red); background: #FFF1F1; } .tslot.ok, .is-done .tslot.filled { border-color: var(--green); background: #ECFDF3; } .tslot.shown { border-color: var(--or); }
.wordt .tile, .wordt .tslot, .syl .tile, .syl .tslot { font-size: 1.3em; min-width: 80px; }
.chunks .tslot:first-child::first-letter { text-transform: uppercase; }
.abcstrip { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; font: 700 .95em var(--ff-fib); color: var(--ink2); } .abcstrip i { font-style: normal; background: #fff; border-radius: 6px; padding: 2px 6px; }
/* antippbare Wörter */
.toks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 920px; }
.tok { background: #fff; border-radius: 14px; padding: 10px 16px; font: 700 1.45em var(--ff-fib); box-shadow: 0 4px 0 #D5DCEC, 0 0 0 3px #E8ECF6 inset; }
.tok.sel { background: #FFF7D6; box-shadow: 0 4px 0 #F5C44E, 0 0 0 4px var(--yel) inset; } .tok.right { background: #ECFDF3; box-shadow: 0 4px 0 #86EFAC, 0 0 0 4px var(--green) inset; }
.tok.wrong { background: #FFF1F1; box-shadow: 0 4px 0 #FCA5A5, 0 0 0 4px var(--red) inset; }
.toks.chunks .tok { border: 0; }
/* Tastatur */
.has-kbd .play-main { flex-direction: column; } .has-kbd .side { display: flex; width: 100%; justify-content: center; }
.kbd { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 900px; margin: 0 auto; background: #E8EDF7; border-radius: 20px; padding: 8px; }
.krow { display: flex; gap: 6px; justify-content: center; }
.kkey { flex: 1 1 0; max-width: 72px; min-height: 54px; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #C3CCE0; font: 700 1.45em var(--ff-fib); }
.kkey.down { transform: translateY(2px); box-shadow: 0 1px 0 #C3CCE0; background: #F0FDFA; }
.kkey.k-shift, .kkey.k-back { max-width: 96px; flex-grow: 1.5; background: #DDE4F2; } .kbd.shift .k-shift { background: var(--te); color: #fff; }
.kkey.k-space { max-width: 420px; flex-grow: 6; font-size: 1em; color: var(--ink2); }
.typebox { min-width: min(520px, 90%); min-height: 76px; background: #fff; border-radius: 18px; border: 3px solid var(--te); display: flex; align-items: center; justify-content: center; padding: 6px 16px; font: 800 2.2em var(--ff-fib); letter-spacing: .05em; }
.typebox .ph { font: 600 .5em var(--ft); color: var(--mut); letter-spacing: 0; } .typebox .ch.g { color: #15803D; } .typebox .ch.r { color: #DC2626; text-decoration: underline wavy #DC2626; }
.typebox.shown { border-color: var(--or); } .typebox .caret { width: 3px; height: 1.1em; background: var(--te); margin-left: 2px; animation: blinkc 1s steps(2) infinite; }
.dk-vis { display: flex; align-items: center; gap: 14px; } .strat-chip { display: inline-flex; align-items: center; gap: 4px; background: #EEF2FF; color: #3730A3; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .85em; white-space: nowrap; }
/* Lesetext */
.ltext { background: #FFFDF7; border-radius: 20px; padding: 14px 20px; box-shadow: var(--sh-s); max-width: 860px; width: 100%; font: 600 1.15em/1.6 var(--ff-fib); max-height: 46vh; overflow: auto; -webkit-user-select: text; user-select: text; }
.ltext.k1 { font-size: 1.5em; line-height: 1.7; } .ltext header { display: flex; align-items: center; gap: 8px; font: 700 1.1em var(--ff); margin-bottom: 4px; } .ltext p { margin: .3em 0; }
/* Blitzlesen */
.flash { min-width: 300px; min-height: 110px; display: grid; place-items: center; background: #1E2A4A; color: #FFE58A; border-radius: 22px; font: 800 clamp(2em, 6vw, 3.2em) var(--ff-fib); }
.flash.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 6px var(--yel) inset; }
/* Schreibwerkstatt */
.wrow { display: flex; gap: 12px; width: 100%; max-width: 920px; align-items: stretch; } .wbtns { display: flex; flex-direction: column; gap: 8px; }
textarea.write { flex: 1; min-height: 110px; font: 600 1.35em/1.5 var(--ff-fib); border: 3px solid var(--te); border-radius: 18px; padding: 12px 16px; resize: vertical; color: var(--ink); background: #fff; -webkit-user-select: text; user-select: text; }
textarea.write:focus { outline: none; box-shadow: 0 0 0 5px rgba(20, 184, 166, .25); }
.kiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .kiste .chip-btn { font-family: var(--ff-fib); font-weight: 700; }
.feedback { width: 100%; max-width: 920px; background: #fff; border-radius: 20px; padding: 12px 16px; box-shadow: var(--sh-s); display: flex; flex-direction: column; gap: 8px; }
.fb-lob { font: 700 1.15em var(--ff); color: #15803D; display: flex; gap: 8px; align-items: center; } .fb-tip { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.fb-q { display: flex; gap: 8px; font-weight: 700; color: #6D28D9; } .fb-eng { color: var(--mut); } .fb-wait { font-weight: 700; color: var(--ink2); animation: pulse 1.2s infinite; }
details.beispiel { max-width: 920px; width: 100%; color: var(--ink2); } details.beispiel summary { cursor: pointer; font-weight: 700; }
/* Frag Fino */
.frag-card { display: flex; align-items: center; gap: 14px; width: 100%; background: linear-gradient(120deg, #FFF7D6, #FFE3EE); border-radius: 26px; padding: 12px 18px; box-shadow: var(--sh); margin: 16px 0 6px; text-align: left; }
.frag-card b { display: block; font: 700 1.4em var(--ff); } .frag-card > span:nth-child(2) { flex: 1; } .fc-fino img { width: 84px; height: 84px; object-fit: contain; }
.frag .f-body { display: flex; gap: 24px; align-items: flex-start; padding: 12px; flex-wrap: wrap; justify-content: center; } .f-right { flex: 1 1 420px; max-width: 720px; }
.frag-in { text-transform: none !important; letter-spacing: 0 !important; }
.f-card { background: #fff; border-radius: 24px; padding: 16px 20px; box-shadow: var(--sh); margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.f-head { display: flex; align-items: center; gap: 12px; } .f-head h2 { font-size: 2em; margin: 0; } .f-erkl { font-size: 1.25em; font-weight: 600; margin: 0; } .f-bsp { margin: 0; color: var(--ink2); }
.f-facts { display: flex; flex-wrap: wrap; gap: 6px; } .f-tipp { margin: 0; font-weight: 700; color: #3730A3; }
.icon-btn.frag-btn { background: #FFF7D6; }
.w-hero { position: relative; }
@media (max-width: 700px) { .wrow { flex-direction: column; } .wbtns { flex-direction: row; } .kkey { min-height: 46px; font-size: 1.2em; } .area > .a-head::after { display: none; } }
.r-chest { width: 96px; height: 96px; object-fit: contain; animation: popin .5s both; }
/* echte Gemini-Banner: weicher auslaufen lassen, Text bleibt lesbar */
.area > .a-head::after { width: min(52%, 420px); height: 128px; background-position: right 60%; opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 65%), linear-gradient(0deg, transparent 0, #000 35%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 65%), linear-gradient(0deg, transparent 0, #000 35%); mask-composite: intersect; }
.a-head h2, .a-head small { text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 2px #fff; }
/* Startbild (Gemini): Panorama-Fenster über dem Titel; der Bild-Fuchs links wird weggeschnitten, der echte Fino steht davor */
.w-pano { width: min(700px, 94vw); aspect-ratio: 2.6; border-radius: 30px; box-shadow: var(--sh); flex: none;
  background: #FFE9D2 url(../img/art/welcome-hero.png) 100% 58% / 165% auto no-repeat; animation: up .5s both; margin-bottom: -86px; }
.welcome.has-hero .w-hero { position: relative; z-index: 1; width: min(700px, 94vw); padding-left: 10px; }
.welcome.has-hero .w-title { background: rgba(255,255,255,.88); border-radius: 22px; padding: 8px 18px 10px; margin-top: 70px; box-shadow: 0 6px 18px rgba(30,42,74,.10); }
.welcome.has-hero { gap: 14px; padding-top: 18px; }
@media (orientation: landscape) and (max-height: 860px) { .welcome.has-hero { justify-content: flex-start; } .w-pano { width: min(600px, 90vw); margin-bottom: -76px; } .welcome.has-hero .w-hero { width: min(600px, 90vw); } .welcome.has-hero .w-title h1 { font-size: 40px; } }
@media (max-height: 640px), (max-width: 520px) { .w-pano { display: none; } .welcome.has-hero .w-title { margin-top: 0; background: none; box-shadow: none; } }
/* Review 2026-10-19: Mindestgröße für Kinderfinger (44 px) */
.chip-btn { min-height: 44px; }
.ltext .say-mini { flex: none; width: 48px; height: 48px; }