:root{
    --bg1:#e8f1fe; --bg2:#cfe3fb;
    --ink:#0d2244; --sub:#465e85; --line:rgba(13,34,68,.14);
    --card:rgba(255,255,255,.82); --card2:rgba(255,255,255,.55);
    --acc:#0a6cff; --ok:#12a05f; --warn:#e0800a;
    --sh:0 18px 40px -22px rgba(9,30,80,.5);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg1:#0a1730; --bg2:#0d2350;
      --ink:#eaf2ff; --sub:#a8c2e6; --line:rgba(180,215,255,.2);
      --card:rgba(18,34,64,.75); --card2:rgba(22,42,78,.5);
      --acc:#5aa9ff; --ok:#2fce8a; --warn:#ffb648;
      --sh:0 18px 40px -22px rgba(0,0,0,.7);
    }
  }
  /* touch-action vererbt sich NICHT – es zählt das Element unter dem Finger.
     Deshalb hier für alle: Doppeltipp-Zoom aus, Wischen und Aufziehen bleiben. */
  *{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent;
    touch-action:manipulation}
  /* Die Seite scrollt nie als Ganzes – gescrollt wird nur innen in #main.
     Sonst entstehen auf dem iPad Leerräume über und unter dem Inhalt. */
  html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
  html{background:var(--bg2)}
  body{
    font:400 17px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
    color:var(--ink); background:transparent; -webkit-font-smoothing:antialiased;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  /* Fester Hintergrund über die volle Fläche – deckt auch die Systembereiche
     oben und unten ab, unabhängig von Scrollposition und Dokumenthöhe. */
  #bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(165deg,var(--bg1),var(--bg2))}
  /* Hinter der Systemleiste liegt derselbe Blauton wie in der gezeichneten
     Menüleiste – in beiden Modi, damit echtes und gezeichnetes iPad
     zusammenpassen und die weiße Uhrzeit überall lesbar bleibt. */
  #safetop{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);
    z-index:70;pointer-events:none;background:#0b50d4}

  /* Hochkant-Sperre. Ausgelöst wird sie über die GERÄTE-Lage, nicht über die
     Fensterform – ein halbes Fenster im Querformat ist selbst hochkant. */
  #quer[hidden]{display:none}
  #quer{position:fixed;inset:0;z-index:75;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:22px;text-align:center;padding:32px;
    background:linear-gradient(165deg,var(--bg1),var(--bg2));color:var(--ink)}
  #quer p{font-size:17px;line-height:1.5;color:var(--sub)}
  #quer b{color:var(--ink);font-size:20px}
  #quer svg{color:var(--acc)}
  #quer .kippen{transform-origin:60px 64px;animation:kipp 2.4s ease-in-out infinite}
  @keyframes kipp{0%,45%{transform:rotate(0)}65%,100%{transform:rotate(-90deg)}}
  button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}

  #app{height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto;padding:0 16px}

  /* ---------- Kopfzeile: nur Fortschritt ---------- */
  /* links Platz lassen – dort sitzt die Fenstersteuerung des iPad-Fensters.
     Der Abstand bleibt in JEDER Fensterhöhe stehen, die Steuerung sitzt ja
     unabhängig davon oben links. */
  #bar{display:flex;align-items:center;gap:10px;padding:14px 2px 6px 58px;flex:0 0 auto}
  #zurueck[hidden]{display:none}
  #zurueck{font-size:21px;opacity:.5;padding:4px 9px;line-height:1;border-radius:11px;
           background:var(--card2);border:1px solid var(--line)}
  #zurueck:active{transform:scale(.92)}
  /* Die Punkte stehen direkt vor „Schritt 6 von 8“ – so ist auf einen Blick
   klar, dass beides dasselbe zeigt. Der leere Platz bleibt links. */
#dots{display:flex;gap:7px;align-items:center;padding:8px 4px;margin-left:auto}
  #dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block;transition:.3s}
  #dots i.done{background:var(--ok)}
  #dots i.now{background:var(--acc);transform:scale(1.5)}
  #dots i.free{background:var(--warn)}
  #count{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
  #restart{font-size:17px;opacity:.45;padding:6px 4px;line-height:1}

  /* ---------- Mitte: Animation + ein Satz ---------- */
  /* justify-content:center würde bei Überlauf den oberen Rand abschneiden –
     deshalb auto-Ränder, die sich beim Scrollen sauber verhalten. */
  /* --tipraum hält den Bereich frei, sobald der Tipp oben eingeblendet ist,
     damit er die iPad-Animation nie verdeckt. */
  /* --barraum ist nur dann groß, wenn die schwebende Statusleiste sichtbar ist –
     sonst bliebe unter der Modulliste ein toter blauer Streifen stehen. */
  #main{flex:1;display:flex;flex-direction:column;align-items:center;
        gap:clamp(10px,2.4vh,24px);min-height:0;overflow-y:auto;overscroll-behavior:contain;
        padding:6px 0 calc(var(--barraum,76px) + var(--tipraum,0px) + env(safe-area-inset-bottom));
        transition:padding-bottom .3s}
  #stage{width:100%;display:flex;justify-content:center;flex:0 0 auto;margin-top:auto}
  #stage svg{width:min(100%,470px);height:auto;max-height:min(46vh,330px);
             filter:drop-shadow(0 20px 34px rgba(6,25,70,.35))}
  #stage.klein svg{max-height:min(20vh,158px)}
  #stage.hallo svg{filter:none}
  #panel{width:100%;text-align:center;flex:0 0 auto;margin-bottom:auto}

  /* Szenenwechsel: Das Alte sinkt weg, das Neue steigt auf. Ohne das springt
     der Bildschirm hart um und man verliert kurz den Faden. Bild und Text
     kommen leicht versetzt, damit die Bewegung eine Richtung hat. */
  @keyframes rein{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
  @keyframes weg { from{opacity:1;transform:none}          to{opacity:0;transform:translateY(-10px)} }
  .rein{animation:rein .36s cubic-bezier(.22,.9,.3,1) both}
  #panel.rein{animation-delay:.07s}
  .weg{animation:weg .3s ease-in both}
  @media (prefers-reduced-motion:reduce){ .rein,.weg{animation:none} }
  @media (max-height:560px){
    #stage svg{max-height:38vh}
    h1{font-size:clamp(19px,4.4vw,23px)}
    #drop{min-height:104px}
    #bar{padding:8px 2px 2px 58px}
  }
  /* Wo die Fenstersteuerung steckt, hängt davon ab, ob die App gerade im
     Vollbild läuft. Der Text zeigt jeweils nur die passende Hälfte. */
  #app:not(.vollbild) .nurvoll{display:none}
  #app.vollbild .nurfenster{display:none}
  /* Symbole mitten im Aufgabentext – dieselben Sinnbilder wie im Menü am Gerät */
  .tx{width:1.3em;height:1.3em;vertical-align:-.3em;margin:0 .1em;display:inline-block;
      fill:none;stroke:currentColor;stroke-width:1.6;color:var(--ink)}
  .tx .f{fill:currentColor;stroke:none}
  h1{font-size:clamp(21px,5.2vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin-bottom:8px}
  /* Breiter als die klassischen 45 Zeichen: Die Sätze hier sind Anweisungen,
     keine Fließtexte – so spart sich mancher Schritt eine ganze Zeile. */
  #say{font-size:clamp(15.5px,3.6vw,18px);color:var(--sub);max-width:66ch;margin:0 auto}
  #say b{color:var(--ink);font-weight:700}

  #extra:not(:empty){margin-top:16px}

  /* Fenno unten ist nur noch ein runder Knopf – keine Textleiste mehr.
     Alles, was er zu sagen hat, steht in der Sprechblase darüber. */
  #statusbar[hidden]{display:none}
  #statusbar{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:45;
    display:inline-flex;align-items:center;justify-content:center;
    width:54px;height:54px;border-radius:99px;
    background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    transition:background .3s;pointer-events:none}   /* darf das Ablegen darunter nicht abfangen */
  #stxt{display:none}
  #statusbar.win{background:var(--ok);border-color:transparent}
  /* Liegt ein ungelesener Tipp bereit, geht Fenno ein Licht auf –
     die Glühbirne schwebt über seinem Kopf, nicht auf der Stirn. */
  #fennobox{position:relative;display:flex;align-items:center;flex:0 0 auto}
  #gluehbirne{position:absolute;left:50%;bottom:calc(100% + 3px);width:26px;height:26px;
    transform:translateX(-50%) scale(.4);opacity:0;transition:opacity .25s, transform .25s;
    pointer-events:none;filter:drop-shadow(0 0 7px rgba(255,190,60,.75))}
  /* Sie leuchtet, solange Tipps bereitliegen und die Blase zu ist – sie ist
     die Einladung, Fenno anzutippen, kein Countdown. */
  #statusbar.tipp #gluehbirne{opacity:1;animation:leuchte 2.4s ease-in-out infinite}
  @keyframes leuchte{
    0%,100%{transform:translateX(-50%) scale(1)}
    50%    {transform:translateX(-50%) scale(1.14)}
  }

  /* ---------- Fenno ---------- */
  /* größer als die Leiste hoch ist – guckt oben und unten heraus, bleibt aber mittig */
  /* Fenno selbst ist antippbar – die Leiste ringsum bleibt durchlässig */
  #fenno{width:84px;height:84px;margin:-15px;flex:0 0 auto;overflow:visible;
         transition:transform .25s;pointer-events:auto;cursor:pointer}
  #fenno:active{transform:scale(.93)}
  #fenno .fk{fill:#fff;stroke:var(--acc);stroke-width:2.2}
  #fenno .leiste{stroke:var(--acc);stroke-width:2.2;fill:none}
  #fenno .augen-auf circle,#fenno .augen-gross circle{fill:#0d2244}
  #fenno .augen-zu path{fill:none;stroke:#0d2244;stroke-width:2.4;stroke-linecap:round}
  #fenno .mund,#fenno .mund-froh,#fenno .mund-hmm{fill:none;stroke:#0d2244;stroke-width:2.2;stroke-linecap:round}
  #fenno .augen-gross,#fenno .mund-froh,#fenno .mund-hmm{opacity:0}
  /* Grundzustand: schaut zu und blinzelt gelegentlich */
  #fenno .augen-auf{animation:zwinkerAuf 5.5s infinite}
  #fenno .augen-zu{opacity:0;animation:zwinkerZu 5.5s infinite}
  @keyframes zwinkerAuf{0%,93%,100%{opacity:1}95%,98%{opacity:0}}
  @keyframes zwinkerZu{0%,93%,100%{opacity:0}95%,98%{opacity:1}}
  /* „Fast!“ – Augen groß, lehnt sich vor */
  #statusbar.fast #fenno{transform:scale(1.08) translateY(-1px)}
  #statusbar.fast #fenno .augen-auf,#statusbar.fast #fenno .augen-zu{opacity:0;animation:none}
  #statusbar.fast #fenno .augen-gross{opacity:1}
  #statusbar.fast #fenno .mund{opacity:0}
  #statusbar.fast #fenno .mund-froh{opacity:1}
  /* „Hmm …“ – Kopf schief */
  #statusbar.hmm #fenno{transform:rotate(-9deg)}
  #statusbar.hmm #fenno .mund{opacity:0}
  #statusbar.hmm #fenno .mund-hmm{opacity:1}
  /* „Geschafft!“ – Augen zu vor Freude, kleiner Hüpfer */
  #statusbar.win #fenno .augen-auf,#statusbar.win #fenno .augen-gross{opacity:0;animation:none}
  #statusbar.win #fenno .augen-zu{opacity:1;animation:none}
  #statusbar.win #fenno .mund{opacity:0}
  #statusbar.win #fenno .mund-froh{opacity:1}
  #statusbar.win #fenno .fk,#statusbar.win #fenno .leiste{stroke:#0d7a48}
  #statusbar.win #fenno .augen-zu path,#statusbar.win #fenno .mund-froh{stroke:#0d7a48}
  #statusbar.win #fenno{animation:huepfer .45s 2}
  @keyframes huepfer{40%{transform:translateY(-5px) scale(1.1)}}

  /* Tipps: eingeblendeter Hinweis oben, bei mehreren durchblätterbar */
  #hilfe[hidden]{display:none}
  #hilfe{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom) + 82px);z-index:45;
    width:min(92vw,430px);padding:13px 16px;border-radius:18px;
    background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    display:flex;flex-direction:column;gap:11px;align-items:center;text-align:center;
    font-size:14px;line-height:1.45;color:var(--sub);animation:steigen .35s}
  @keyframes steigen{from{opacity:0;transform:translateX(-50%) translateY(12px)}}
  /* Spitze nach unten: die Blase gehört sichtbar zu Fenno in der Leiste */
  #hilfe::after{content:"";position:absolute;left:var(--zipfel,50%);bottom:-8px;width:16px;height:16px;
    transform:translateX(-50%) rotate(45deg);background:var(--card);
    border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  #hilfeaktion:empty{display:none}
  #hilfenav[hidden]{display:none}
  #hilfenav{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;opacity:.75}
  #hilfenav button{width:32px;height:32px;border-radius:50%;line-height:1;font-size:17px;
    background:var(--card2);border:1px solid var(--line)}
  #hilfenav button:active{transform:scale(.92)}

  .go{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:700;
      border-radius:14px;padding:14px 24px;min-height:50px;font-size:16.5px;
      box-shadow:0 10px 22px -10px rgba(10,108,255,.9)}
  .go:active{transform:scale(.97)}
  .go.soft{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none;font-weight:600}
  .go:disabled{background:var(--card2);color:var(--sub);box-shadow:none;opacity:.6;cursor:default}
  .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

  /* Ablagefläche für Bilder */
  #drop{margin:0 auto;width:min(100%,340px);min-height:140px;border:2.5px dashed var(--acc);border-radius:18px;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;
        background:var(--card2);color:var(--sub);font-size:14px;font-weight:600;transition:.2s}
  #drop.hot{background:rgba(10,108,255,.16);transform:scale(1.03)}
  #drop.voll{border-style:solid;border-color:var(--ok);background:transparent}
  #drop.hatbilder{flex-direction:row;gap:8px}
  #drop .big{font-size:30px}
  /* Bilderrahmen – so viele, wie herübergezogen wurden */
  #drop .rahmen{width:84px;height:104px;border-radius:10px;overflow:hidden;background:#fff;flex:0 0 auto;
          box-shadow:0 6px 14px -6px rgba(9,30,80,.5);animation:rein .35s}
  #drop .rahmen img{width:100%;height:100%;object-fit:cover;display:block}
  @keyframes rein{from{opacity:0;transform:scale(.8) rotate(-4deg)}}

  /* Codekarte */
  /* Die Codekarte: Das Wort steht scharf da – nur die Anzeige ist unscharf,
     solange das Fenster zu schmal ist. Die Unschärfe setzt das Programm aus
     der gemessenen Fensterbreite. */
  #karte{display:flex;flex-direction:column;align-items:center;gap:14px}
  .kk{position:relative;width:min(78vw,320px);aspect-ratio:16/6;border-radius:14px;display:grid;place-items:center;
      background:linear-gradient(135deg,#0d2f7a,#1d8ec4);box-shadow:var(--sh);overflow:hidden;
      -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  #wort{font:800 clamp(21px,5.4vw,36px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
        letter-spacing:.12em;color:#ffe45e;transition:filter .12s linear;
        -webkit-user-select:none;user-select:none}
  /* Zu weit gezogen: Ohne Fotos daneben gibt es das Wort nicht zu sehen. */
  #kkhinweis{position:absolute;left:0;right:0;bottom:9px;text-align:center;
             font-size:13.5px;font-weight:700;color:#ffd9a3;opacity:0;transition:.2s}
  .kk.zu #kkhinweis{opacity:1}
  #word{width:190px;text-align:center;font:700 18px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
        letter-spacing:.09em;text-transform:uppercase;padding:14px 12px;border-radius:14px;
        border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
  #word:focus{outline:2.5px solid var(--acc);outline-offset:1px}

  /* Modul-Auswahl */
  /* Zweispaltig, sobald Platz ist: Acht Stationen untereinander passen sonst
     nicht auf den Schirm und die Liste bricht unten mitten in einer Karte ab. */
  .mods{display:grid;gap:10px;margin-top:6px;text-align:left;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .mod{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;
       background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);width:100%;text-align:left}
  .ikon{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
        stroke-linecap:round;stroke-linejoin:round}
  .mod .ikon{width:26px;height:26px;color:var(--acc)}
  .mod.fertig .ikon{color:var(--ok)}
  .go .ikon{width:20px;height:20px}
  #drop .ikon{width:34px;height:34px;color:var(--acc);opacity:.85}
  .mod b{display:block;font-size:16px}
  .mod small{color:var(--sub);font-size:13.5px}
  .mod.fertig{opacity:.55}
  /* Rückblick als Raster: jede Karte führt zurück in ihren Schritt */
  .raster-titel{font-size:13.5px;color:var(--sub);opacity:.8;margin:20px 0 10px}
  /* Immer zwei Spalten, aufgebaut wie die Zusatzaufgaben: Symbol, Name, Stand.
     Bei acht Schritten geht das immer glatt auf. */
  .raster{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left}
  .karte{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;
         background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);
         transition:transform .15s, border-color .15s;min-height:58px;width:100%;text-align:left}
  .karte:active{transform:scale(.96)}
  .karte .ikon{width:26px;height:26px;flex:0 0 auto;color:var(--acc)}
  .karte.fertig .ikon{color:var(--ok)}
  .karte.offen .ikon{opacity:.5}
  .karte .nr{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
             font-size:12.5px;font-weight:800;background:var(--ok);color:#fff}
  .karte.frei .nr{background:var(--warn)}
  .karte.offen .nr{background:var(--track,rgba(13,34,68,.14));color:var(--sub)}
  .karte .name{font-size:14px;font-weight:700;line-height:1.25;flex:1}
  .fussnote{font-size:12.5px;color:var(--warn);margin-top:12px}
  .nachsatz{font-size:13.5px;color:var(--sub);max-width:52ch;margin:18px auto 0}

  /* Toast + Konfetti */
  #toasts{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 12px);transform:translateX(-50%);
          z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:92vw}
  .toast{padding:10px 18px;border-radius:99px;font-size:14px;font-weight:600;background:var(--card);
         border:1px solid var(--line);box-shadow:var(--sh);opacity:0;transform:translateY(-8px);transition:.3s;
         -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .toast.in{opacity:1;transform:none}
  #fx{position:fixed;inset:0;z-index:50;pointer-events:none}

  /* ---------- iPad-Illustration ---------- */
  .ipad .body{fill:#1b2333;stroke:#3d4a66;stroke-width:1.5}
  .ipad .scr{fill:url(#wall)}
  .ipad .wb{fill:#fdfefe;stroke:rgba(10,30,70,.25);stroke-width:1}
  .ipad .ghost{fill:#0a84ff;fill-opacity:.10;stroke:#0a84ff;stroke-opacity:.75;stroke-dasharray:5 4;stroke-width:1.6}
  .ipad .snap{fill:#fff;opacity:0}
  /* Texte werden über ihre Mitte positioniert statt über die Grundlinie –
     sonst sitzt jede Beschriftung leicht anders in ihrem Feld. */
  .ipad text{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;dominant-baseline:central}
  /* neutral statt weiß, damit das Dock auch über hellen Fenstern sichtbar bleibt */
  .ipad .dockbar{fill:#0b1c33;opacity:.20}
  .ipad .hr{fill:none;stroke:#fff;stroke-width:2.4;opacity:.95}
  .ipad .hd{fill:#ff2e93}
  .ipad .rip{fill:none;stroke:#ff2e93;stroke-width:2.6}
  .ipad .halo{fill:none;stroke:#fff;stroke-width:5.5;stroke-opacity:.7;stroke-linecap:round}
  .ipad .hint{fill:none;stroke:#12418f;stroke-width:2.2;stroke-dasharray:5 5;stroke-opacity:.9;stroke-linecap:round}
  .ipad .glow{fill:none;stroke:#ffe45e;stroke-width:2.5;opacity:.9}
  @media (prefers-reduced-motion:reduce){
    .ipad animate{display:none}
    .tip,#status{animation:none!important}
    #status .d{animation:none}
  }