/* ============================================================
   Lernolotl – Startseite
   ============================================================ */
@font-face{font-family:"Fredoka";src:url("/fonts/fredoka-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fredoka";src:url("/fonts/fredoka-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Andika";src:url("/fonts/andika-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url("/fonts/andika-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#fbf7ee;
  --card:#ffffff;
  --ink:#22352f;
  --muted:#65766f;
  --line:#e9e1cf;
  --brand:#2f8a6e;
  --brand-soft:#dff2e8;
  --math:#3f74c9;   --math-soft:#e6eefb;
  --german:#d4614a; --german-soft:#fbe9e4;
  --english:#7d58c0;--english-soft:#efe8fa;
  --science:#3b8f53;--science-soft:#e3f3e6;
  --radius:22px;
  --banner:clamp(250px,44vh,440px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;background:var(--paper);color:var(--ink);
  font-family:"Andika",system-ui,"Segoe UI",sans-serif;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,a{font:inherit;color:inherit}
h1,strong,.eyebrow,.brand-pill,.skip{font-family:"Fredoka","Andika",system-ui,sans-serif}

/* ---------- Szene ---------- */
.stage{position:relative;height:var(--banner);overflow:hidden;background:#9aa6d6}
body.is-intro .stage{height:100vh;height:100svh}
.scene{display:block;width:100%;height:100%}
.sign{font:600 20px "Fredoka",system-ui,sans-serif;letter-spacing:.14em;fill:#6b5443}

.cloud{animation:drift 70s linear infinite alternate}
.c2{animation-duration:90s;animation-direction:alternate-reverse}
.c3{animation-duration:110s}
.c4{animation-duration:80s;animation-direction:alternate-reverse}
@keyframes drift{from{translate:-60px 0}to{translate:90px 0}}

/* Fenster: aus / an */
.win .glass,#archWin .glass{fill:#40506f;transition:fill .5s ease}
.win .shine{fill:#fff;opacity:.16;transition:opacity .5s}
.win .halo{fill:#ffd36e;opacity:0;transition:opacity .7s ease}
.lit .win .glass,.lit #archWin .glass{fill:#ffe39a}
.lit .win .shine{opacity:.5}
.lit .win .halo{opacity:.55}
.win .glass,.win .shine,.win .halo{transition-delay:var(--d,0s)}
.door-glass{transition:fill .5s ease .15s}
.lit .door-glass{fill:#ffe39a}
.lamp-glow{transition:opacity 1.2s ease}
.lit .lamp-glow{opacity:.35}

#skyDay,#dusk,#spill,#doorWarm{transition:opacity 1.4s ease}
.lit #skyDay{opacity:1}
.lit #dusk{opacity:0}
.lit #spill{opacity:.5}
.lit #doorWarm{opacity:1}

.waving #waver{animation:wave 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes wave{0%,100%{rotate:0deg}25%{rotate:-4deg}75%{rotate:4deg}}

.brand-pill{
  position:absolute;left:clamp(16px,3vw,32px);top:clamp(14px,2.6vw,26px);
  display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(30,45,80,.12);
  font-weight:600;letter-spacing:.12em;color:var(--brand);font-size:15px;
  opacity:0;transform:translateY(-8px);transition:opacity .6s ease,transform .6s ease;
}
.brand-pill .dot{width:12px;height:12px;border-radius:50%;background:#8fd3ae;box-shadow:0 0 0 3px #dff2e8}
body.is-ready .brand-pill{opacity:1;transform:none}

.skip{
  position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,28px);
  border:0;border-radius:999px;padding:10px 18px;cursor:pointer;
  background:rgba(255,255,255,.88);color:var(--ink);font-weight:500;font-size:15px;
  box-shadow:0 6px 18px rgba(30,45,80,.14);transition:opacity .3s,background .2s;
}
.skip:hover{background:#fff}
body:not(.is-intro) .skip{opacity:0;pointer-events:none}

/* ---------- Inhalt ---------- */
.main{max-width:1040px;margin:0 auto;padding:40px 24px 48px;transition:opacity .7s ease,transform .7s ease}
body.is-intro .main{opacity:0;transform:translateY(24px);pointer-events:none}

.welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.eyebrow{margin:0 0 6px;color:var(--brand);font-weight:500;letter-spacing:.04em;font-size:15px}
h1{margin:0;font-weight:600;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15;letter-spacing:-.005em}
.lead{margin:10px 0 0;color:var(--muted);max-width:40em}
.reader{width:118px;height:auto;flex:none;margin-bottom:-6px}

.subjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{
  --c:var(--brand);--soft:var(--brand-soft);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(0,0,0,.02),0 10px 28px rgba(60,50,20,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  display:flex;flex-direction:column;overflow:hidden;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(60,50,20,.1);border-color:color-mix(in srgb,var(--c) 30%,var(--line))}
.math{--c:var(--math);--soft:var(--math-soft)}
.german{--c:var(--german);--soft:var(--german-soft)}
.english{--c:var(--english);--soft:var(--english-soft)}
.science{--c:var(--science);--soft:var(--science-soft)}

.card-main{
  display:flex;align-items:center;gap:20px;width:100%;padding:22px 24px 8px;
  border:0;background:none;text-align:left;cursor:pointer;
}
.card-main:focus-visible,.how:focus-visible,.skip:focus-visible,.replay:focus-visible,.foot a:focus-visible{outline:3px solid var(--c,var(--brand));outline-offset:3px;border-radius:14px}
.icon{flex:none;width:72px;height:72px;border-radius:20px;background:var(--soft);display:grid;place-items:center}
.icon svg{width:44px;height:44px;fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.icon svg rect{fill:#fff}
.icon .glyph{stroke-width:3}
.icon .thin{stroke-width:2.2;opacity:.55}
.txt{flex:1;min-width:0}
.txt strong{display:block;font-size:1.45rem;font-weight:600;line-height:1.2}
.txt small{display:block;margin-top:3px;color:var(--muted);font-size:.98rem}
.go{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--soft);transition:transform .18s ease,background .18s}
.go svg{width:20px;height:20px;fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.card:hover .go{transform:translateX(3px);background:var(--c)}
.card:hover .go svg{stroke:#fff}

.card-foot{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:14px;padding:0 24px 16px 116px;min-height:34px}
.status{font-size:.92rem;color:var(--muted)}
.status.ok{color:var(--science)}
.status.err{color:#b8432f}
.status.busy::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border-radius:50%;border:2px solid var(--c);border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.how{border:0;background:none;padding:6px 2px;color:var(--c);font-size:.92rem;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c) 35%,transparent);text-underline-offset:3px;white-space:nowrap}
.how:hover{text-decoration-color:var(--c)}
.card.is-busy .card-main{cursor:progress}

.foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:.92rem}
.foot a{color:var(--brand);text-decoration:none}
.foot a:hover{text-decoration:underline}
.sep{opacity:.5}
.replay{border:0;background:none;padding:0;color:var(--brand);cursor:pointer}
.replay:hover{text-decoration:underline}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#22352f;color:#fff;padding:12px 20px;border-radius:14px;font-size:.95rem;
  box-shadow:0 10px 30px rgba(0,0,0,.2);transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  body{font-size:16px}
  .main{padding:28px 16px 36px}
  .welcome{align-items:center}
  .reader{width:84px}
  .subjects{grid-template-columns:1fr;gap:14px}
  .card-main{padding:20px 18px 14px;gap:16px}
  .icon{width:60px;height:60px;border-radius:17px}
  .icon svg{width:36px;height:36px}
  .card-foot{padding:0 18px 14px 94px}
  .card-main{padding:18px 18px 6px}
  .txt strong{font-size:1.3rem}
}
@media (max-width:420px){
  .reader{display:none}
  .card-foot{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){
  .cloud,.waving #waver{animation:none}
  *{transition-duration:.01ms!important}
}