:root{
    --ink:#1F2E45;
    --paper:#F3F7FB;
    --grid:#DCE7F1;
    --panel:#FFFFFF;
    --triangle:#FF6B4A;
    --triangle-soft:#FFE3DA;
    --viereck:#1FA294;
    --viereck-soft:#D8F1EE;
    --gold:#F2A93B;
    --gold-soft:#FCEACB;
    --violet:#7C6FE0;
    --violet-soft:#E7E3FB;
    --success:#209A64;
    --success-soft:#DCF2E7;
    --error:#D8495A;
    --error-soft:#FBE1E3;
    --muted:#5B6E85;
    --line:#C9D8E5;
    --kreis:#E0598B;
    --kreis-soft:#FBE0EC;
    --koerper:#4A7FD6;
    --koerper-soft:#E1EAFB;
    --bruch:#9C4F96;
    --bruch-soft:#F1DFF0;
    --prozent:#2AA9C9;
    --prozent-soft:#DBF2F8;
    --textaufgabe:#B9781F;
    --textaufgabe-soft:#F5E7D2;
    --gleichung:#2E7D8F;
    --gleichung-soft:#D4EDF1;
    --zahl:#5C8A3C;
    --zahl-soft:#E2EED5;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px,
      var(--paper);
    min-height:100vh;
    padding:20px 14px 60px;
  }
  .wrap{max-width:920px;margin:0 auto;}

  /* ---------- Auth Overlay ---------- */
  .auth-overlay{
    position:fixed; inset:0; z-index:1000;
    background:rgba(31,46,69,.55);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .auth-overlay[hidden]{display:none;}
  .auth-card{
    background:var(--panel); border-radius:20px;
    padding:28px 26px; max-width:380px; width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    border:1px solid var(--line);
    position:relative;   /* NEU */
  }
  .auth-close{
    position:absolute; top:14px; right:14px;
    background:none; border:none; font-size:1.6rem; line-height:1;
    color:var(--muted); cursor:pointer; width:32px; height:32px;
    border-radius:8px; display:flex; align-items:center; justify-content:center;
}
  .auth-close:hover{ background:var(--paper); color:var(--ink); }
  .auth-title{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.4rem;
    margin:0 0 4px; color:var(--ink);
  }
  .auth-subtitle{
    font-size:.85rem; color:var(--muted); margin:0 0 18px;
  }
  .auth-tabs{
    display:flex; gap:6px; margin-bottom:18px;
    background:var(--paper); border-radius:12px; padding:4px;
  }
  .auth-tab{
    flex:1; padding:8px 12px; border:0; background:transparent;
    border-radius:8px; cursor:pointer; font-family:inherit;
    font-weight:600; font-size:.85rem; color:var(--muted);
    transition:all .15s ease;
  }
  .auth-tab.active{
    background:var(--panel); color:var(--ink);
    box-shadow:0 1px 3px rgba(0,0,0,.08);
  }
  .auth-field{margin-bottom:12px;}
  .auth-field label{
    display:block; font-size:.75rem; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px;
  }
  .auth-field input{
    width:100%; padding:10px 12px; border:1.5px solid var(--line);
    border-radius:10px; font-family:inherit; font-size:1rem;
    color:var(--ink); background:var(--panel);
    transition:border-color .15s ease;
  }
  .auth-field input:focus{
    outline:none; border-color:var(--viereck);
  }
  .auth-field .hint{
    font-size:.7rem; color:var(--muted); margin-top:3px;
  }
  /* ---------- Consent-Checkbox (Registrierung) ---------- */
  .consent{
    display:flex; gap:8px; align-items:flex-start;
    font-size:.78rem; line-height:1.45; color:var(--muted);
    cursor:pointer; margin:4px 0 2px;
  }
  .consent input{
    flex:0 0 auto; width:16px; height:16px; margin:2px 0 0;
    accent-color:var(--viereck); cursor:pointer;
  }
  .consent span{ flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; }
  .consent a{ color:var(--viereck); }
  /* ---------- Legal-Modal (Datenschutz/Impressum/AGB) ---------- */
  .legal-body{ font-size:.85rem; line-height:1.6; color:var(--ink); }
  .legal-body h3{ font-size:.95rem; margin:14px 0 6px; }
  .legal-body h3:first-child{ margin-top:0; }
  .legal-body p, .legal-body li{ font-size:.85rem; }
  .legal-body ul{ padding-left:18px; margin:6px 0; }
  .legal-body table{ width:100%; border-collapse:collapse; font-size:.78rem; margin:.5rem 0; }
  .legal-body th, .legal-body td{ border:1px solid var(--line); padding:.35rem .5rem; text-align:left; }
  .legal-scroll{ max-height:60vh; overflow-y:auto; padding-right:4px; }
  .footer-links{ display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; }
  /*
    PWA (5.2) — Offline-Hinweis und Update-Toast.
    Beide liegen ueber allem (fixed), sind aber schmal und unauffaellig.
    Sie duerfen nichts ueberdecken: ein Hinweis, der eine Aufgabe verdeckt,
    wird nach zwei Wochen ignoriert.
  */
  .offline-chip{
    position:fixed; left:50%; top:10px; transform:translateX(-50%);
    z-index:900; padding:7px 16px; border-radius:999px;
    background:#7A5B12; color:#FFF4DA; border:1px solid rgba(255,255,255,.28);
    font-size:.78rem; font-weight:700; white-space:nowrap;
    box-shadow:0 3px 14px rgba(0,0,0,.16);
  }
  .offline-chip[hidden]{ display:none; }
  .offline-chip button{
    background:#1FA294; color:#fff; border:none; border-radius:6px;
    padding:4px 12px; cursor:pointer; font-size:.75rem; font-weight:700;
    margin-left:10px; vertical-align:middle;
  }
  .offline-chip button:hover{ background:#157a87; }
  .offline-chip button:disabled{ opacity:.65; cursor:not-allowed; }
  .update-toast{
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    z-index:901; display:flex; align-items:center; gap:12px;
    padding:10px 12px 10px 18px; border-radius:999px;
    background:var(--panel); border:2px solid var(--viereck);
    color:var(--ink); font-size:.8rem; font-weight:600;
    box-shadow:0 6px 22px rgba(0,0,0,.18); max-width:calc(100vw - 24px);
  }
  .update-toast[hidden]{ display:none; }
  .update-toast-btn{
    border:none; border-radius:999px; cursor:pointer;
    background:var(--viereck); color:#fff; font:inherit;
    font-size:.78rem; font-weight:700; padding:7px 15px;
  }
  .update-toast-btn:hover{ background:#178076; }
  /* Beruehrt die Zielgruppe mit dem Daumen: Knopf nicht zu klein. */
  @media (pointer:coarse){
    .update-toast-btn{ padding:10px 18px; }
  }
  .footer-link{
    background:none; border:none; padding:0 2px; cursor:pointer;
    font:inherit; font-size:.75rem; color:var(--viereck); text-decoration:underline;
  }
  .footer-link:hover{ color:#188a82; }
  /*
    Kanal-Zeile im Footer (7.4.6). Eigene Klasse statt .footer-link, weil
    das dort fuer <button> mit data-legal geschrieben ist — hier sind es
    echte Sprungziele nach aussen. Die Zeile steht unter den Rechtslinks,
    damit sie den Fuss nicht in einen langen Fliesstext verwandelt.
  */
  .footer-channels{
    display:block; margin-top:6px; font-size:.75rem; opacity:.85;
  }
  .footer-channels-label{ color:var(--muted); }
  .footer-chan{
    color:var(--viereck); text-decoration:underline; padding:0 2px;
  }
  .footer-chan:hover{ color:#188a82; }
  /* Touch-Flaeche: die Links sind klein, aber werden mit dem Daumen getippt. */
  @media (pointer:coarse){
    .footer-chan{ padding:4px 6px; }
  }
  .auth-submit{
    width:100%; padding:11px; margin-top:8px;
    background:var(--viereck); color:#fff; border:0;
    border-radius:10px; font-family:inherit; font-size:.95rem;
    font-weight:600; cursor:pointer; transition:background .15s ease;
  }
  .auth-submit:hover{background:#188a82;}
  .auth-submit:disabled{
    background:var(--line); cursor:not-allowed;
  }
  .auth-msg{
    margin-top:12px; padding:10px 12px; border-radius:8px;
    font-size:.82rem; font-weight:500; display:none;
  }
  .auth-msg.error{
    display:block; background:var(--error-soft); color:var(--error);
  }
  .auth-msg.success{
    display:block; background:var(--success-soft); color:var(--success);
  }
  .user-info{
    display:flex; align-items:center; gap:8px; padding:6px 12px;
    background:var(--panel); border:1px solid var(--line);
    border-radius:14px; box-shadow:0 2px 0 var(--line);
  }
  .user-info .nickname{
    font-weight:600; font-size:.85rem;
  }
  .user-info .logout{
    background:transparent; border:0; color:var(--muted);
    font-size:.7rem; cursor:pointer; padding:2px 6px;
    text-transform:uppercase; letter-spacing:.3px; font-weight:600;
  }
  .user-info .logout:hover{color:var(--error);}

  /* ---------- Header ---------- */
  .app-header-old{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    margin-bottom:16px;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-mark{width:46px;height:46px; flex-shrink:0;}
  .brand h1{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.5rem; margin:0; line-height:1.1;
    letter-spacing:.2px;
  }
  .brand p{margin:2px 0 0; font-size:.8rem; color:var(--muted); font-weight:500;}

  .stats{display:flex; gap:8px; flex-wrap:wrap;}
  .stat-pill{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:7px 12px; display:flex; align-items:center; gap:7px;
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.85rem;
    box-shadow:0 2px 0 var(--line);
  }
  .stat-pill .lbl{font-family:'Inter',sans-serif; font-weight:600; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.4px;}
  .stat-pill.streak{color:var(--gold);}
  /* Flammen-Flackern: nur bei aktiver Serie (Klasse streak-on), respektiert prefers-reduced-motion */
  .flame{
    display:inline-block; transform-origin:50% 82%;
    animation:none;
  }
  .stat-pill.streak.streak-on .flame{
    animation:flicker 2.4s ease-in-out infinite;
  }
  @keyframes flicker{
    0%,100%{ transform:rotate(-2.5deg) scale(1);    filter:brightness(1); }
    35%    { transform:rotate(2.5deg)  scale(1.09); filter:brightness(1.12); }
    65%    { transform:rotate(-2deg)   scale(1.04); filter:brightness(1.05); }
  }
  @media (prefers-reduced-motion:reduce){
    .stat-pill.streak.streak-on .flame{ animation:none; }
  }
  /* Flamme antippbar: Pause/Weiter (pausiert an Ort und Stelle, startet wieder) */
  .flame{cursor:pointer;}
  .stat-pill.streak.flame-paused .flame{
    animation-play-state:paused; opacity:.7;
  }
  .stat-pill.points{color:var(--violet);}
  .stat-pill.level{color:var(--viereck);}

  /* ---------- Level progress ---------- */
  /*
   * P5.3 — Überlauf auf dem Handy (46 px) behoben.
   *
   * Ursache: `.level-next` stand auf `white-space:nowrap` und ist 205 px breit.
   * Zusammen mit Name und Balken passt die Zeile nicht in 390 px, das Dokument
   * wurde 46 px zu breit. Das kippte auch die Breite der `position:fixed`-
   * Szenen (Eulenhain/Wissensgarten) von 390 auf 436 px — im Desktop-Bild
   * unsichtbar, weil dort genug Platz ist.
   *
   * Der Text darf jetzt umbrechen, damit er vollständig lesbar bleibt
   * (reines Abschneiden mit "…" wäre für Kinder schlechter). Zusätzlich darf
   * die Zeile umbrechen, damit auf sehr schmalen Geraeten nichts ueberlaeuft.
   */
  .level-bar-row{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
  .level-name{font-family:'Fredoka',sans-serif; font-weight:600; font-size:.95rem; white-space:nowrap;}
  .level-track{
    flex:1; height:10px; border-radius:6px; background:var(--line); overflow:hidden;
    border:1px solid var(--line); min-width:120px;
  }
  .level-fill{
    height:100%; border-radius:6px;
    background:linear-gradient(90deg, var(--gold), var(--triangle));
    width:0%; transition:width .5s cubic-bezier(.4,1.4,.6,1);
  }
  .level-next{font-size:.72rem; color:var(--muted); font-weight:600; min-width:0;}

  /* ---------- App Version Footer ---------- */
  .app-version{
    text-align:center;
    margin-top:32px;
    padding:12px 0 0;
    color:var(--muted);
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;
    letter-spacing:.5px;
    opacity:.7;
  }
  .app-version .ver{
    display:inline-block;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    padding:3px 10px;
    font-weight:700;
    color:var(--ink);
  }

  /* ---------- Eulen-Logo (geometrische Formen, animierbar) ---------- */
  .owl-host{display:inline-block; width:96px; height:96px; flex-shrink:0;}
  @media (max-width:680px){ .owl-host{width:64px; height:64px;} }
  .owl-host svg{width:100%; height:100%; display:block;}
  .owl-logo .owl-pupil, .owl-logo .owl-eye-ring{
    transform-box:fill-box; transform-origin:50% 50%; transition:transform .18s ease;
  }
  .owl-logo .owl-wing{transform-box:fill-box; transition:transform .22s ease;}
  .owl-logo .owl-wing-l{transform-origin:50% 8%;}
  .owl-logo .owl-wing-r{transform-origin:50% 8%;}
  .owl-logo.owl-blink .owl-eye-ring, .owl-logo.owl-blink .owl-pupil{transform:scaleY(.12);}
  @keyframes flapL{0%,100%{transform:rotate(4deg);}25%{transform:rotate(46deg);}55%{transform:rotate(2deg);}80%{transform:rotate(40deg);}}
  @keyframes flapR{0%,100%{transform:rotate(-4deg);}25%{transform:rotate(-46deg);}55%{transform:rotate(-2deg);}80%{transform:rotate(-40deg);}}
  .owl-logo.owl-flap .owl-wing-l{animation:flapL .6s ease-in-out 1;}
  .owl-logo.owl-flap .owl-wing-r{animation:flapR .6s ease-in-out 1;}
  @media (prefers-reduced-motion: reduce){
    .owl-logo .owl-pupil, .owl-logo .owl-eye-ring, .owl-logo .owl-wing{transition:none;}
    .owl-logo.owl-blink .owl-eye-ring, .owl-logo.owl-blink .owl-pupil,
    .owl-logo.owl-flap .owl-wing{transform:none; animation:none;}
  }

  /* Header neu: Eule groß, Statistiken unter der Überschrift */
  .app-header{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
  .brand .stats{margin-top:8px;}

  /* ============ P6: Eulenhain ============ */
  .stat-pill.eulenhain{
    cursor:pointer; border:1px solid var(--line); background:none;
    font:inherit; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease;
  }
  .stat-pill.eulenhain:hover{ transform:translateY(-2px); box-shadow:0 3px 10px rgba(31,46,69,.12); }
  .eulenhain-content{ max-width:600px; }
  /* Eigene Eulenhain-Seite: Vollbild mit Himmel, großem Baum und Eulen auf den Ästen */
  .ehp{
    position:fixed; inset:0; z-index:1400; overflow-y:auto;
    background:linear-gradient(180deg,#BFE3F7 0%,#E6F4EC 100%);
    padding:18px 14px 44px;
  }
  .ehp-head{ max-width:920px; margin:0 auto 12px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .ehp-head h2{ margin:0; font-size:1.5rem; font-family:'Fredoka',sans-serif; }
  .ehp-sub{
    font-size:.9rem; font-weight:600; color:var(--ink);
    background:rgba(255,255,255,.78); border:1px solid rgba(31,46,69,.12);
    border-radius:10px; padding:6px 12px; margin-left:auto;
  }
  .ehp-body{ max-width:920px; margin:0 auto; }
  .ehp-scene{
    position:relative; border-radius:22px; overflow:hidden;
    box-shadow:0 18px 50px rgba(31,46,69,.18); border:1px solid rgba(31,46,69,.1);
    background:#EAF6FB;
  }
  .ehp-scene > svg{ display:block; width:100%; height:auto; }
  .ehp-stage{ position:relative; }
  /* P5.5 — Die Stufenzahl war #5F7186 auf dem braunen Ast (#7A4E26): ein
     mittleres Blaugrau auf mittelbraun, bei Sonnenlicht praktisch nicht lesbar.
     Ein heller Kreis mit dunkler Ziffer hebt sich auf jedem Untergrund ab und
     bleibt auch dann lesbar, wenn der Zweig mal heller ist. */
  .ehp-label{ font-size:13px; font-weight:700; fill:#3D2B1A; }
  .ehp-label-bg{ fill:#FFF6E3; stroke:#B07A3C; stroke-width:1; }
  .ehp-label.mystery{ fill:#5A6B7C; }
  .ehp-label-bg.mystery{ fill:#EEF2F7; stroke:#8C99A8; stroke-dasharray:3 2; }
  .ehp-caption-row{ text-align:center; margin-top:10px; }
  /* Sonne, Wolken, Schmetterlinge */
  .ehp-rays{ transform-box:fill-box; transform-origin:center; animation:ehpSpin 90s linear infinite; }
  @keyframes ehpSpin{ to{ transform:rotate(360deg); } }
  .ehp-cloud{ animation:ehpDrift 26s ease-in-out infinite alternate; }
  .ehp-cloud.c2{ animation-duration:34s; animation-delay:-9s; }
  .ehp-cloud.c3{ animation-duration:21s; animation-delay:-4s; }
  @keyframes ehpDrift{ from{ transform:translateX(-34px); } to{ transform:translateX(34px); } }
  .ehp-butterfly{ position:absolute; font-size:20px; pointer-events:none; animation:ehpFloat 7s ease-in-out infinite; }
  .ehp-butterfly.b2{ animation-duration:9s; animation-delay:-3s; font-size:16px; }
  @keyframes ehpFloat{ 0%,100%{ transform:translate(0,0) rotate(10deg); } 50%{ transform:translate(36px,-26px) rotate(-12deg); } }
  .eh-owl{
    width:56px; display:flex; flex-direction:column; align-items:center;
    cursor:pointer; border-radius:10px; padding:2px 0 0;
    transition:transform .15s ease;
  }
  .eh-owl:hover{ transform:translateY(-3px); }
  .eh-owl:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .eh-owl svg{ display:block; }
  .eh-owl .eh-name{ font-size:.62rem; font-weight:700; color:var(--muted); margin-top:1px; }
  .eh-owl.eh-mystery{ cursor:default; }
  /* P5.5 — Die Warteeule ist eine Kontur, keine Farbe.
   *
   * Sie stand vorher in voller Eigenfarbe auf dem Ast und war damit von den
   * gesammelten Eulen nicht zu unterscheiden. Das war mehr als Geschmack: die
   * Farbe versprach eine Eule, die es noch gar nicht gibt. Wer noch Punkte
   * sammeln muss, soll das sehen — nicht eine fertige Eule.
   *
   * owlInner() setzt die Farben als Inline-fill. Präsentationsattribute haben
   * in der Kaskade die niedrigste Priorität, deshalb genügt hier eine Regel —
   * die Zeichenroutine bleibt unverändert und die gesammelten Eulen bleiben
   * unberührt. Alle Flächen (Körper, Bauch, Ohren, Flügel, Augenring, Schnabel,
   * Füße) werden transparent und bekommen eine gemeinsame Kontur. Die Pupillen
   * bleiben gefüllt: ohne sie wäre kein Auge zu sehen und die Figur läse
   * sich als Keks, nicht als Eule.
   *
   * Die Kontur ist grau, nicht --ink: eine fertige Eule, die es noch gar nicht
   * gibt, soll nicht mit Tuschestärke um Aufmerksamkeit bitten. Der Ton folgt
   * derselben Familie wie die Stufenzahl der Warteeule (Ziffer #5A6B7C,
   * Plakettenrand #8C99A8).
   *
   * Das Grau ist nicht beliebig gewaehlt, sondern gegen den Untergrund
   * gerechnet. Der Himmel ist ein Verlauf (#BFE3F7 bis #EFF8EE) und der Zweig
   * braun (#7A4E26) — es gibt keinen Untergrund, gegen den ein zu helles Grau
   * noch stuende. Gemessen (WCAG-Kontrast, 3,0 = deutliche Nichttext-Form):
   *
   *   #7E8B9C  Himmel 2,6  Boden 3,2  Ast 2,1   <- erster Versuch, verworfen
   *   #66748A  Himmel 3,5  Boden 4,4  Ast 1,5   <- gewaehlt
   *
   * #66748A haelt gegen Himmel und Boden ueber 3,0 und bleibt klar hinter den
   * vollstaendig gefuellten Eulen zurueck. Der Ast ist bewusst nicht der
   * massgebliche Untergrund: an der Warteeule liegt der Zweig unter den
   * Fuessen, im Rumpf steht sie vor dem Himmel (im Browser geprueft). Ein
   * helleres Grau kaeme dem Ast entgegen, wuerde die Eule dort aber im Braun
   * verschwinden lassen — der Wert ist darum so dunkel wie noetig, nicht so
   * hell wie moeglich. */
  .eh-owl.eh-mystery .owl-body,
  .eh-owl.eh-mystery .owl-belly,
  .eh-owl.eh-mystery .owl-ear,
  .eh-owl.eh-mystery .owl-wing,
  .eh-owl.eh-mystery .owl-eye-ring,
  .eh-owl.eh-mystery .owl-beak,
  .eh-owl.eh-mystery .owl-foot{ fill:none; stroke:#66748A; stroke-width:2.2; stroke-linejoin:round; }
  .eh-owl.eh-mystery .owl-pupil{ fill:#4E5D70; }
  /* Der Bauch ist eine Innenlinie, keine Außenkontur — dünner, sonst
     zerlegt er die Silhouette in zwei Haelften. */
  .eh-owl.eh-mystery .owl-belly{ stroke-width:1.4; }
  .eh-owl.eh-mystery .owl-pupil{ stroke:none; }
  .eh-branch.eh-next .eh-name{ font-style:italic; }
  .eh-caption{
    margin-top:10px; font-size:.82rem; font-weight:600; color:var(--ink);
    min-height:1.4em; text-align:center;
  }
  .eh-hint{ font-size:.78rem; color:var(--muted); text-align:center; margin-top:4px; }
  .eh-levelup{
    margin-top:10px; padding:8px 10px; border-radius:10px;
    background:#FFF7DE; border:1px solid var(--gold); font-size:.85rem;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .eh-levelup .mini{ margin-left:auto; }

  /* Signature-Animationen der Eulen (einmalig bei Antippen, sanftes Wippen für die neueste Eule) */
  .eh-owl .owl-wing, .eh-owl .owl-pupil, .eh-owl .owl-eye-ring, .eh-owl .owl{
    transform-box:fill-box; transform-origin:center;
  }
  .eh-owl .owl-wing-l{ transform-origin:50% 6%; }
  .eh-owl .owl-wing-r{ transform-origin:50% 6%; }
  .eh-owl .owl{ transform-origin:50% 100%; }
  @keyframes ehFlapL{0%,100%{transform:rotate(4deg);}25%{transform:rotate(-52deg);}55%{transform:rotate(2deg);}80%{transform:rotate(-46deg);}}
  @keyframes ehFlapR{0%,100%{transform:rotate(-4deg);}25%{transform:rotate(52deg);}55%{transform:rotate(-2deg);}80%{transform:rotate(46deg);}}
  @keyframes ehBlink{0%,38%,62%,100%{transform:scaleY(1);}50%{transform:scaleY(.1);}}
  @keyframes ehBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
  @keyframes ehTilt{0%,100%{transform:rotate(0);}30%{transform:rotate(-10deg);}70%{transform:rotate(10deg);}}
  @keyframes ehHop{0%,100%{transform:translateY(0) scale(1,1);}25%{transform:translateY(-2px) scale(1.06,.94);}55%{transform:translateY(-12px) scale(.96,1.06);}85%{transform:translateY(0) scale(1.04,.96);}}
  @keyframes ehSleep{0%,100%{transform:rotate(0);}50%{transform:rotate(6deg);}}
  @keyframes ehSpin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
  @keyframes ehFluff{0%,100%{transform:scale(1,1);}30%{transform:scale(1.12,.9);}60%{transform:scale(.94,1.08);}}
  .eh-owl.eh-play[data-anim="flap"] .owl-wing-l{ animation:ehFlapL 1.2s ease-in-out 1; }
  .eh-owl.eh-play[data-anim="flap"] .owl-wing-r{ animation:ehFlapR 1.2s ease-in-out 1; }
  .eh-owl.eh-play[data-anim="blink"] .owl-eye-ring,
  .eh-owl.eh-play[data-anim="blink"] .owl-pupil{ animation:ehBlink 1.1s ease-in-out 2; }
  .eh-owl.eh-play[data-anim="bob"] .owl{ animation:ehBob .9s ease-in-out 2; }
  .eh-owl.eh-play[data-anim="tilt"] .owl{ animation:ehTilt 1.1s ease-in-out 1; }
  .eh-owl.eh-play[data-anim="hop"] .owl{ animation:ehHop 1s ease-in-out 1; }
  .eh-owl.eh-play[data-anim="sleep"] .owl{ animation:ehSleep 2.2s ease-in-out 1; }
  .eh-owl.eh-play[data-anim="spin"] .owl{ animation:ehSpin 1s ease-in-out 1; }
  .eh-owl.eh-play[data-anim="fluff"] .owl{ animation:ehFluff .9s ease-in-out 2; }
  .eh-owl.eh-idle .owl{ animation:ehBob 2.6s ease-in-out infinite; }

  /* Konfetti beim Stufen-Aufstieg */
  .eh-confetti{ position:fixed; inset:0; pointer-events:none; z-index:3000; }
  .eh-confetti span{
    position:absolute; top:-16px; left:var(--x); font-size:var(--s);
    animation:ehFall var(--d) ease-in forwards;
  }
  @keyframes ehFall{ to{ transform:translateY(108vh) rotate(560deg); opacity:.85; } }

  @media (prefers-reduced-motion: reduce){
    .stat-pill.eulenhain{ transition:none; }
    .eh-owl{ transition:none; }
    .eh-owl.eh-play .owl-wing, .eh-owl.eh-play .owl, .eh-owl.eh-idle .owl,
    .eh-owl.eh-play .owl-eye-ring, .eh-owl.eh-play .owl-pupil{ animation:none !important; }
    .eh-confetti span{ animation:none !important; display:none; }
    .ehp-rays, .ehp-cloud, .ehp-butterfly{ animation:none !important; }
  }

  /* ============ P4.2: Wöchentliche Ziele ============ */
  .wochenziele{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; margin-bottom:16px; }
  .wz-goal{
    flex:1; min-width:180px; background:#F7FAF5; border:1px solid var(--line);
    border-radius:12px; padding:8px 10px;
  }
  .wz-goal.fertig{ background:#F2FBF0; border-color:#8FCF79; }
  .wz-head{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    font-size:.75rem; font-weight:700; color:var(--ink);
  }
  .wz-track{ height:8px; border-radius:5px; background:var(--line); margin-top:7px; overflow:hidden; }
  .wz-fill{
    height:100%; border-radius:5px; width:0%;
    background:linear-gradient(90deg, var(--gold), var(--triangle));
    transition:width .5s cubic-bezier(.4,1.4,.6,1);
  }
  .wz-goal.fertig .wz-fill{ background:linear-gradient(90deg, #6FBF5A, #8FCF79); }
    .wz-bonus{
    flex-basis:100%; font-size:.72rem; font-weight:600; color:var(--muted);
    padding:2px 2px 0;
  }
  .wz-bonus.fertig{ color:#3F8F3B; font-weight:700; }
  /* P4.4: Mikro-Motivation — kompakte Labels + animierter Text */
  .wz-label{ display:inline-flex; align-items:center; gap:4px; }
  .motd-text{ display:inline-block; transition:opacity .3s ease; }

  /* ---------- P4.1: Wissensgarten (eigene Seite, wie der Eulenhain) ---------- */
  .wwp{ position:fixed; inset:0; z-index:60; background:#F6FAF4; overflow-y:auto; padding:14px 16px 40px; }
  .wwp-head{ max-width:960px; margin:0 auto 12px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .wwp-head h2{ margin:0; font-size:1.5rem; font-family:'Fredoka',sans-serif; }
  .wwp-pill{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:.85rem; font-weight:600; color:var(--muted); }
  .wwp-body{ max-width:960px; margin:0 auto; }
  .wwp-scene{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; box-shadow:0 8px 0 var(--line); }
  .wwp-scene > svg{ display:block; width:100%; height:auto; }
  /*
   * P4.1 — Größere Schrift: die Schilder und die Legende waren auf dem Handy
   * kaum lesbar. Bewusst nur vergrößert, nicht umgestaltet.
   * Drei Zeilen je Brett (Name / Thema / Status) — dafür ist die Höhe da,
   * die Breite konnte dadurch von 158 auf 140 zurück, sonst stehen die
   * Bretter bei Slotabstand 162 nur 4px auseinander.
   *
   * Die Themen- und Statuszeile sind nicht 12/13px, sondern 15/16px: bei
   * 390px Breite skaliert die 1000er-Bühne auf 0.387, aus 12px werden
   * real 4.6px — unlesbar. Mit 15px bleiben 5.8px, mit 16px 6.2px.
   */
  .wwp-boardtext{ font-size:17px; font-weight:700; fill:#4A3319; font-family:'Fredoka',sans-serif; }
  .wwp-boardthema{ font-size:15px; font-weight:600; fill:#7A5A34; }
  .wwp-boardsub{ font-size:16px; font-weight:600; fill:#6B4A2B; }
  /* P5.3 — Unsichtbare Trefferflaeche: traegt den Tipp, nicht der Apfel.
   Ohne eigenen Cursor wirkt sie wie ein toter Fleck, wenn man genau
   daneben tippt. Sie liegt vor dem Apfel, deshalb kein eigener Tabstopp —
   Tastatur und Screenreader bleiben beim `.wwp-frucht`. */
  .wwp-treffer{ cursor:pointer; }
  .wwp-treffer:hover + .wwp-frucht{ transform:scale(1.3); }
  .wwp-frucht{ cursor:pointer; transition:transform .15s ease, opacity .15s ease; transform-box:fill-box; transform-origin:center; }
  .wwp-frucht:hover{ transform:scale(1.3); }
  .wwp-frucht:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
  .wwp-animal{ animation:wwpFloat 3.5s ease-in-out infinite; }
  /* statischer Glow (bewusst ohne Animation → kein Flackern): gemeisterte Blätter & fällige Marker */
  .wwp-gold{ filter:drop-shadow(0 0 3.5px rgba(255,213,74,.95)); }
  /*
   * P4.1 — "fällig" ist ein weicher Lichtschein, kein Ring.
   *
   * Bewusst NUR opacity: eine Skalierung würde den Schein von der Frucht
   * lösen (SVG transformiert um den Bühnen-Ursprung, solange
   * transform-box:fill-box fehlt) — genau das war der springende Schein.
   * Der Verlauf macht die weiche Kante, die Deckkraft den Puls.
   *
   * Farbton: KEIN Knallgrün. Ein gesättigtes #7ED957 hebt sich auf dem
   * Kronengrün (#4C8C3F) kaum ab — gemessen war der Unterschied nur 2 von 255
   * und damit für das Auge unsichtbar. Es braucht einen deutlich helleren,
   * fast weißen Kern, damit es wie Licht wirkt und nicht wie ein Fleck.
   */
  .wwp-due-glow{ animation:wwpGlow 2.4s ease-in-out infinite; filter:blur(2px); pointer-events:none; }
  .wwp-due-kern{ animation:wwpGlowKern 2.4s ease-in-out infinite; pointer-events:none; }
  /* Deutlicher Puls zwischen "kaum sichtbar" und "klarer Lichthof".
     Der Ruhewert liegt absichtlich hoch: der Hinweis darf im Alltag nicht
     wegblinken. */
  @keyframes wwpGlow{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
  @keyframes wwpGlowKern{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
  @keyframes wwpFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  .wwp-sparkle{ animation:wwpTwinkle 1.8s ease-in-out infinite; }
  @keyframes wwpTwinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
  .ww-caption{ text-align:center; margin-top:10px; font-size:1rem; min-height:46px; }
  .ww-leg{ display:inline-flex; align-items:center; gap:5px; margin:0 8px; font-size:.88rem; color:var(--muted); font-weight:600; }
  .ww-leg i{ width:11px; height:11px; border-radius:50%; display:inline-block; border:1.5px solid #35602E; }
  /* P4.1 — Die Legende folgt der Reife-Rampe: hellgrün → gelb → orange → rot.
     P5.3 — "unreif" auf #CFEA86 angehoben (deckt sich mit WWP_FRUCHT_FARBEN.neu)
     und die Kontur auf #35602E vereinheitlicht, sonst wuerde die Legende einen
     helleren Ton zeigen als die Frucht selbst. */
  .ww-leg .lg-neu{ background:#CFEA86; }
  .ww-leg .lg-bau{ background:#F0C24B; }
  .ww-leg .lg-sicher{ background:#EE8A3C; }
  .ww-leg .lg-meister{ background:#D33A2C; }
  /* P4.1 — Der Hinweis "Wiederholung fällig" ist ein weicher Lichthof, kein
     Ring. Die Legende zeigt deshalb einen hellen, weichen Fleck statt einer
     Kontur — sonst widerspricht sie dem Baum. */
  .ww-leg .lg-due{ background:radial-gradient(circle, #F0FFD2 0%, #C8F58C 55%, rgba(126,217,87,0) 100%); border:1px solid #9BE86A; box-shadow:0 0 4px 1px rgba(203,247,158,.9); }
  .wwp-codes{ font-size:.7rem; color:var(--muted); }
  .wwp-ueben{ margin-left:6px; }
  .ww-hint{ text-align:center; margin-top:8px; font-size:.92rem; color:var(--muted); }
  .stat-pill.garten{ cursor:pointer; }
  @media (prefers-reduced-motion: reduce){
    .wwp-animal, .wwp-sparkle, .wwp-due-glow, .wwp-due-kern{ animation:none; }
    /* Ohne Puls bleibt der Lichtschein ruhig sichtbar — der Hinweis darf
       durch die Einstellung nicht verschwinden. */
    .wwp-due-glow{ opacity:.85; }
    .wwp-due-kern{ opacity:.75; }
  }