/* ══════════ ANKOMMEN — Start in einem leeren Konto (js/start.js) ══════════
   Ein Blatt Papier im echten Hefte-Reiter, daneben das echte Regal. Material
   der App: Papier (liniert wie im Heft), Messing (Klemme, Schilder), Holz (das
   Regal selbst). Papier bleibt Papier — auch im Dunkeln, wie im Editor. */

.st{display:grid; grid-template-columns:minmax(0, 1fr); gap:26px; margin-top:30px; align-items:start;}
/* Nebeneinander nur QUER (Ben, 2026-10-28: „im hochkant nochmal was anderes …
   blatt oben und unten die bookshelfs"). Vorher galt die Regel ab 1000 px Breite
   in jeder Lage — das iPad Pro 13 hochkant (1024) bekam das Blatt links und ein
   schmales Regal rechts, das nach unten wuchs. */
@media (min-width:1000px) and (orientation:landscape){
  body:not(.layout-phone) .st{grid-template-columns:minmax(400px, 520px) minmax(0, 1fr); gap:34px;}
}
.st > *{animation:stRein .55s cubic-bezier(.2,.8,.2,1) both;}
.st > :nth-child(2){animation-delay:.08s;}
@keyframes stRein{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* Das Blatt */
.st-blatt{
  --ink:#26221b; --mid:#4a4336; --ink2:#5f584c; --ink3:#6f6656;
  --line:rgba(38,34,27,.1); --line2:rgba(38,34,27,.18);
  --st-linie:rgba(61,91,214,.075);
  position:relative; color:var(--ink); max-width:640px;
  padding:30px 30px 24px; border-radius:6px 6px 10px 10px;
  background-color:#fffcf3;
  /* Linien wie im Heft — sie beginnen unter dem Kopf, damit die Schritte frei stehen. */
  background-image:
    linear-gradient(180deg, #fffcf3 0 86px, transparent 86px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--st-linie) 31px 32px);
  /* Darunter liegen noch zwei Blätter — ein Block, kein Formular. */
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(38,34,27,.08),
    0 5px 0 -3px #f3ead8, 0 6px 3px -3px rgba(60,40,15,.18), 0 10px 0 -6px #ebe0c9, 0 11px 4px -6px rgba(60,40,15,.2),
    0 14px 30px -10px rgba(60,40,15,.28), 0 30px 60px -30px rgba(60,40,15,.3);
}
:root[data-theme="dark"] .st-blatt{background-color:#f4ecdb;
  background-image:linear-gradient(180deg, #f4ecdb 0 86px, transparent 86px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--st-linie) 31px 32px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 5px 0 -3px #d9cfbb, 0 10px 0 -6px #bfb49f,
    0 14px 30px -8px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.7);}

/* Die Messingklemme oben */
.st-klemme{position:absolute; left:50%; top:-12px; width:128px; height:24px; transform:translateX(-50%);
  border-radius:7px 7px 12px 12px; background:var(--messing);
  box-shadow:0 1px 0 rgba(255,245,215,.6) inset, 0 -2px 3px rgba(0,0,0,.18) inset, 0 3px 6px rgba(60,40,15,.35);}
.st-klemme::after{content:''; position:absolute; left:50%; top:6px; width:34px; height:6px; transform:translateX(-50%);
  border-radius:4px; background:rgba(60,40,15,.32); box-shadow:0 1px 0 rgba(255,245,215,.45);}

/* Kopf: drei Schritte, „Später" rechts */
.st-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 26px;}
.st-weg{display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0; min-width:0;}
.st-weg li{display:flex; align-items:center; gap:7px; color:var(--ink3); font:600 13px/1 var(--sans); white-space:nowrap;}
.st-weg li + li::before{content:''; width:22px; height:1.5px; margin:0 9px; background:var(--line2); border-radius:2px;}
.st-punkt{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid var(--line2); font:700 12px/1 var(--sans); color:var(--ink3);}
.st-punkt .ic{width:13px; height:13px;}
.st-weg li.an{color:var(--ink);}
.st-weg li.an .st-punkt{border-color:transparent; background:var(--bronze-grad); color:#fffdf7; box-shadow:0 2px 6px -2px rgba(120,80,30,.6);}
.st-weg li.fertig{color:#3f7d4a;}
.st-weg li.fertig .st-punkt{border-color:transparent; background:rgba(63,125,74,.13); color:#3f7d4a;}
.st-weg li.fertig + li::before, .st-weg li.fertig::before{background:rgba(63,125,74,.35);}
.st-spaeter{border:0; background:none; padding:10px 4px; min-height:44px; cursor:pointer;
  color:var(--ink3); font:600 13.5px/1 var(--sans);}
.st-spaeter:hover{color:#876430;}

.st-inhalt h2{margin:0 0 6px; font:500 30px/1.15 var(--serif); letter-spacing:-.01em; color:var(--ink);}
.st-satz{margin:0 0 20px; color:var(--ink2); font-size:15.5px; line-height:1.55;}
.st-klasse{display:block; margin-top:4px; color:var(--ink3); font-size:13.5px;}
.st-l{margin:18px 0 9px; color:var(--ink3); font:700 11.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;}

/* Der Name steht auf der Linie, in Tinte */
.st-name{display:flex; align-items:baseline; gap:12px; margin:0 0 4px; flex-wrap:wrap;}
.st-name span{color:var(--ink3); font:600 13.5px/1 var(--sans); white-space:nowrap;}
.st-name input{flex:1 1 160px; min-width:0; border:0; border-bottom:1.5px dashed rgba(38,67,126,.35); border-radius:0;
  background:transparent; padding:2px 2px 3px; color:#26437e; font:500 28px/1.1 'Caveat', 'Patrick Hand', cursive; outline:none;}
.st-name input::placeholder{color:rgba(38,67,126,.35);}
.st-name input:focus{border-bottom-color:#26437e;}

.st-chips{display:flex; flex-wrap:wrap; gap:8px;}
.st-chip{min-height:40px; padding:0 15px; border-radius:999px; border:1px solid var(--line2); background:rgba(255,255,255,.55);
  color:var(--ink); font:600 14px/1 var(--sans); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;}
.st-chip:hover{border-color:rgba(161,121,63,.55);}
.st-chip.on{border-color:transparent; background:var(--bronze-grad); color:#fffdf7; box-shadow:0 3px 10px -4px rgba(120,80,30,.6);}
.st-stufen{display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:7px; max-width:470px;}
.st-stufe{height:46px; border-radius:12px; border:1px solid var(--line2); background:rgba(255,255,255,.55);
  color:var(--ink); font:500 20px/1 var(--serif); cursor:pointer; transition:background .2s ease, color .2s ease, transform .15s ease;}
.st-stufe:hover{border-color:rgba(161,121,63,.55);}
.st-stufe.on{border-color:transparent; background:var(--bronze-grad); color:#fffdf7; transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(120,80,30,.6);}

/* Fächer: Messingschilder. Ungewählt nur der Umriss, gewählt echtes Messing. */
.st-faecher{display:flex; flex-wrap:wrap; gap:9px;}
.st-fach{display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 14px 0 11px; border-radius:6px; cursor:pointer;
  border:1.5px dashed rgba(135,100,48,.45); background:rgba(255,255,255,.5);
  color:#5c4421; font:600 14.5px/1.1 var(--serif); letter-spacing:.01em; transition:background .25s ease, border-color .25s ease, transform .15s ease;}
.st-fach .ic{width:14px; height:14px; opacity:.7;}
.st-fach:hover{border-color:rgba(135,100,48,.8); transform:translateY(-1px);}
.st-fach.on{border:1.5px solid transparent; background:var(--messing); color:var(--messing-t);
  box-shadow:0 1px 0 rgba(255,245,215,.55) inset, 0 -1px 2px rgba(0,0,0,.18) inset, 0 3px 8px -3px rgba(60,40,15,.45);}
.st-fach.on .ic{opacity:1;}
.st-fach.wird{animation:stPuls .9s ease-in-out infinite;}
@keyframes stPuls{50%{opacity:.55;}}
.st-fach-eigen{border-style:solid; border-color:var(--line2); color:var(--ink2); font-family:var(--sans); font-size:14px;}
/* „Anderes Fach": ein ruhiges Eingabefeld im Stil der App, mit klarem Knopf
   (r-start3 — vorher Handschrift-Schrift und ein Haken ohne Wort). */
.st-eigen{margin:18px 0 0;}
.st-eigen-l{display:block; margin:0 0 7px; color:var(--ink3); font:700 11.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;}
.st-eigen-z{display:flex; gap:8px; max-width:440px;}
.st-eigen-z input{flex:1 1 auto; min-width:0; height:44px; box-sizing:border-box; padding:0 14px; border-radius:12px;
  border:1px solid var(--line2); background:rgba(255,255,255,.75); color:var(--ink); font:500 15.5px/1 var(--sans); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;}
.st-eigen-z input::placeholder{color:var(--ink3); opacity:.8;}
.st-eigen-z input:focus{border-color:rgba(161,121,63,.7); box-shadow:0 0 0 3px rgba(161,121,63,.14);}
.st-eigen-go{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 16px 0 13px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(135,100,48,.45); background:rgba(161,121,63,.1); color:#6e5126; font:700 14.5px/1 var(--sans);
  transition:background .2s ease, border-color .2s ease;}
.st-eigen-go .ic{width:15px; height:15px;}
.st-eigen-go:hover{background:rgba(161,121,63,.18); border-color:rgba(135,100,48,.7);}
.st-eigen-go.wird{animation:stPuls .9s ease-in-out infinite;}
/* Schritt 2 ohne Stundenplan: der leise Weg zur Wahl von Hand */
.st-ohne{display:block; width:100%; margin:12px 0 0; padding:12px 8px; min-height:46px; border:0; border-radius:12px; background:none; cursor:pointer;
  color:var(--ink2); font:600 14.5px/1.35 var(--sans); text-align:center; text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(95,88,76,.35);}
.st-ohne:hover{color:#876430; text-decoration-color:rgba(135,100,48,.5);}
.st-oder{display:flex; align-items:flex-start; gap:9px; margin:18px 0 0; color:var(--ink3); font-size:14px; line-height:1.45;}
.st-oder > .ic{width:17px; height:17px; flex:0 0 auto; margin-top:1px; color:#876430;}
.st-oder button{border:0; background:none; padding:0; cursor:pointer; color:#876430; font:600 14px/1.45 var(--sans); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(135,100,48,.4);}

/* Fuss */
.st-fuss{display:flex; align-items:center; gap:10px; margin-top:26px; flex-wrap:wrap;}
.st-weiter{min-height:50px; padding:0 30px; border:0; border-radius:999px; cursor:pointer;
  background:var(--bronze-grad); color:#fffdf7; font:700 15.5px/1 var(--sans);
  box-shadow:0 1px 0 rgba(255,240,205,.4) inset, 0 10px 22px -12px rgba(120,80,30,.8); transition:transform .2s ease, opacity .2s ease;}
.st-weiter:hover:not(:disabled){transform:translateY(-1px);}
.st-weiter:disabled{opacity:.42; cursor:default; box-shadow:none;}
.st-leise{border:0; background:none; min-height:44px; padding:0 12px; cursor:pointer; color:var(--ink3); font:600 14px/1 var(--sans);}
.st-leise:hover{color:#876430;}
.st-fuss-leise{justify-content:space-between; margin-top:16px;}

/* Schritt 3: zwei Wege, als Karten auf dem Blatt */
.st-wahlfach{margin:-6px 0 18px;}
.st-wege{display:flex; flex-direction:column; gap:10px;}
.st-weg-k{display:flex; align-items:center; gap:15px; width:100%; padding:14px 16px 14px 14px; border-radius:16px; cursor:pointer; text-align:left;
  border:1px solid var(--line2); background:rgba(255,255,255,.7); color:var(--ink); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
.st-weg-k:hover{transform:translateY(-1px); border-color:rgba(161,121,63,.55); box-shadow:0 8px 20px -12px rgba(60,40,15,.4);}
.st-weg-haupt{border-color:rgba(161,121,63,.55); background:linear-gradient(180deg, rgba(255,250,236,.95), rgba(250,240,216,.95));
  box-shadow:0 0 0 3px rgba(161,121,63,.1), 0 8px 22px -14px rgba(120,80,30,.6);}
.st-weg-bild{flex:0 0 auto; width:54px; height:54px; border-radius:12px; display:grid; place-items:center;
  background:rgba(161,121,63,.13); color:#876430;}
.st-weg-bild .ic{width:26px; height:26px;}
/* Ein kleines Blatt, schräg, mit Linien — das, was gleich aufgeht. */
.st-weg-papier{background:none;}
.st-weg-papier i{display:block; width:36px; height:46px; border-radius:2px; transform:rotate(-4deg);
  background:#fffdf7 repeating-linear-gradient(180deg, transparent 0 7px, rgba(61,91,214,.18) 7px 8px);
  box-shadow:0 1px 2px rgba(38,34,27,.18), 0 6px 12px -6px rgba(60,40,15,.5);}
.st-weg-t{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;}
.st-weg-t b{font:500 19px/1.2 var(--serif);}
.st-weg-t small{color:var(--ink2); font-size:14px; line-height:1.4;}
.st-weg-go{width:18px; height:18px; color:#876430; flex:0 0 auto;}
.st-blatt .wk-pro{margin-top:14px;}
.st-los{display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:60px; margin:4px 0 0; font-size:16.5px;}
.st-los .st-weg-papier i{width:22px; height:28px; transform:rotate(-6deg);}
.st-los.wird{animation:stPuls .9s ease-in-out infinite;}
.st-neben{display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin-top:14px; align-items:start;}
.st-neben-k{display:flex; align-items:flex-start; gap:11px; padding:13px 14px; border-radius:14px; text-align:left;
  border:1px solid var(--line2); background:rgba(255,255,255,.6); color:var(--ink);}
button.st-neben-k{cursor:pointer; transition:border-color .2s ease, transform .2s ease;}
button.st-neben-k:hover{border-color:rgba(161,121,63,.55); transform:translateY(-1px);}
.st-neben-k > .ic{width:20px; height:20px; flex:0 0 auto; margin-top:1px; color:#876430;}
.st-neben-k > span{display:flex; flex-direction:column; gap:4px; min-width:0;}
.st-neben-k b{font:500 16.5px/1.25 var(--serif);}
.st-neben-k small{color:var(--ink2); font-size:13.5px; line-height:1.45;}
.st-neben-k small b{font:700 13.5px/1 var(--sans);}
.st-import-go{flex:0 0 auto; min-height:40px; padding:0 15px; border-radius:999px; cursor:pointer; white-space:nowrap;
  border:1px solid rgba(135,100,48,.45); background:rgba(161,121,63,.1); color:#6e5126; font:700 13.5px/1 var(--sans);}
.st-import-go:hover{background:rgba(161,121,63,.18);}


/* Das Regal daneben */
.st-regale{min-width:0;}
.st-regale .bookcase-grid{margin-top:0;}

/* ── DIE REGALE BLEIBEN AUF DEM BILDSCHIRM (Ben, 2026-10-28) ──
   „wenn man viele fächer manuell hinzufügt … setzen sie sich nicht darunter
   sondern nehmen nur die linke hälfte … die seite sollte aber nicht nach unten
   erweitern sondern dann nach rechts zum horizontalen scrollen … also so zwei
   reihen im quer." Vorher war `.bookcase-grid` (app.css) ein umbrechender
   Flex-Kasten IN der zweiten Spalte des Start-Rasters (`.st`, oben): jedes
   weitere Regal brach in dieser Spalte um, die Spalte wuchs nach unten, unter
   dem Blatt blieb die andere Hälfte leer, und die Seite scrollte.
   Jetzt ist das Regal ein Schieber: so viele Reihen, wie in die Höhe passen
   (quer zwei, hochkant meist eine — `--st-reihen`, gesetzt von _stRegalPlatz in
   js/start.js), gefüllt Spalte für Spalte wie die Regalreihen im App Store.
   Ein neues Fach kommt dadurch immer HINTEN an, keins rückt um. Was nicht
   passt, liegt rechts daneben: sanft einrastend, am Rand verblasst, mit Pfeil.
   Nur für iPad und Rechner; das Telefon hat sein eigenes Regal (phone-shelf). */
body:not(.layout-phone) .st-regale{position:relative; align-self:stretch;}
body:not(.layout-phone) .st-regale .bookcase-grid{
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--st-reihen, 1), max-content);
  grid-auto-columns:max-content; gap:20px; align-content:start;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; zoom:var(--st-zoom, 1);
  scroll-snap-type:x proximity; scroll-padding-inline:6px;
  /* Luft für Schatten und das Hereinfallen eines neuen Regals — der Schieber schneidet sonst ab. */
  padding:16px 6px 26px; margin:-16px -6px -26px;
  -webkit-mask-image:var(--st-maske, none); mask-image:var(--st-maske, none);}
body:not(.layout-phone) .st-regale .bookcase-grid::-webkit-scrollbar{display:none;}
body:not(.layout-phone) .st-regale .bookcase{scroll-snap-align:start; max-width:none;}
/* Am Rand, wo noch etwas liegt, verblasst das Regal. */
body:not(.layout-phone) .st-regale.kann-rechts .bookcase-grid{--st-maske:linear-gradient(90deg, #000 calc(100% - 64px), transparent);}
body:not(.layout-phone) .st-regale.kann-links .bookcase-grid{--st-maske:linear-gradient(90deg, transparent, #000 48px);}
body:not(.layout-phone) .st-regale.kann-links.kann-rechts .bookcase-grid{--st-maske:linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent);}
/* Die Pfeile: leise, nur wo es weitergeht */
.st-pfeil{position:absolute; top:50%; z-index:3; width:42px; height:42px; margin-top:-21px; border-radius:50%;
  display:none; place-items:center; cursor:pointer; padding:0;
  border:1px solid var(--line2); background:var(--glass-strong, var(--panel)); color:var(--ink);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 6px 18px -8px rgba(38,34,27,.55); transition:opacity .2s ease, transform .2s ease;}
.st-pfeil .ic{width:18px; height:18px;}
.st-pfeil:hover{transform:scale(1.06);}
.st-pfeil-l{left:-8px;} .st-pfeil-r{right:-8px;}
body:not(.layout-phone) .st-regale.kann-links .st-pfeil-l,
body:not(.layout-phone) .st-regale.kann-rechts .st-pfeil-r{display:grid;}
body.layout-phone .st-pfeil{display:none !important;}

/* Quer: Blatt und Regal stehen nebeneinander in der Höhe, die der Bildschirm
   hat (`--st-h`, js/start.js). Reicht sie für das Blatt nicht, rollt nur sein
   Inhalt — Kopf und „Weiter" bleiben stehen; die Seite selbst rollt nie. */
body:not(.layout-phone).st-an .view{padding-bottom:calc(14px + var(--sab, 0px));}
body:not(.layout-phone) .st.st-fest{height:var(--st-h); align-items:stretch;}
body:not(.layout-phone) .st.st-fest > .st-blatt{align-self:start; max-height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; min-height:0;}
body:not(.layout-phone) .st.st-fest > .st-blatt > .st-kopf{flex:0 0 auto;}
body:not(.layout-phone) .st.st-fest > .st-blatt > .st-inhalt{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:none; margin:0 -30px -24px; padding:0 30px 24px;}
body:not(.layout-phone) .st.st-fest > .st-blatt > .st-inhalt::-webkit-scrollbar{display:none;}
body:not(.layout-phone) .st-blatt.st-eng .st-fuss:not(.st-fuss-leise){position:sticky; bottom:0; z-index:2;
  margin:18px -30px 0; padding:16px 30px 2px; background:linear-gradient(180deg, rgba(255,252,243,0), #fffcf3 30%);}
/* Ohne klebenden Fuss (Schritt 3): der untere Rand verblasst, bis man unten ist. */
body:not(.layout-phone) .st-blatt.st-eng .st-inhalt:not(.st-ende):not(:has(.st-fuss:not(.st-fuss-leise))){
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(180deg, #000 calc(100% - 36px), transparent);}
:root[data-theme="dark"] body:not(.layout-phone) .st-blatt.st-eng .st-fuss:not(.st-fuss-leise){background:linear-gradient(180deg, rgba(244,236,219,0), #f4ecdb 30%);}
/* Wenig Höhe (iPad Air quer, Laptop): dasselbe Blatt, etwas dichter gesetzt. */
@media (max-height:900px) and (min-width:1000px) and (orientation:landscape){
  body:not(.layout-phone) .st{margin-top:18px;}
  body:not(.layout-phone) .st-hero h1{font-size:clamp(30px, 4.4vh, 40px);}
  body:not(.layout-phone) .st-blatt{padding:24px 26px 20px;}
  body:not(.layout-phone) .st.st-fest > .st-blatt > .st-inhalt{margin:0 -26px -20px; padding:0 26px 20px;}
  body:not(.layout-phone) .st-kopf{margin-bottom:18px;}
  body:not(.layout-phone) .st-inhalt h2{font-size:27px;}
  body:not(.layout-phone) .st-satz{margin-bottom:16px;}
  body:not(.layout-phone) .st-fuss{margin-top:20px;}
  body:not(.layout-phone) .st-blatt.st-eng .st-fuss:not(.st-fuss-leise){margin:16px -26px 0; padding:14px 26px 2px;}
}

/* Der Hinweis auf den Import: ein Satz, ein Knopf (Schritt 2 und 3) */
.st-import{display:flex; align-items:center; gap:11px; margin:16px 0 0; padding:11px 12px 11px 11px; border-radius:14px;
  border:1px dashed rgba(135,100,48,.4); background:rgba(255,255,255,.45); color:var(--ink2); font-size:14px; line-height:1.4;}
.st-import-ic{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(161,121,63,.12); color:#876430;}
.st-import-ic .ic{width:18px; height:18px;}
.st-import-t{flex:1 1 auto; min-width:0;}
.st-import-t b{color:var(--ink); font-weight:700;}
.st-regale .phone-shelf{margin-top:0;}
.bookcase.st-rein{animation:stRegalRein .7s cubic-bezier(.2,.9,.25,1.05) both;}
.bookcase.st-rein .book{animation:stBuchRein .6s cubic-bezier(.3,.7,.2,1) both;}
.bookcase.st-rein .book:nth-child(2){animation-delay:.12s;}
@keyframes stRegalRein{from{opacity:0; transform:translateY(-18px) scale(.97);} to{opacity:1; transform:none;}}
@keyframes stBuchRein{from{transform:translateY(-30px) rotate(var(--tilt,0deg)); opacity:0;} to{transform:rotate(var(--tilt,0deg)); opacity:1;}}
/* Das leere Regal: dasselbe Holz, gedämpft, Hefte nur als Umriss.
   Ben, 2026-11-05: „das noch ein fach? bookshelf ist kleiner als die anderen."
   Es war 212 × 240 gegen 258 × 276 (Übersicht) — eigene Lücken (10 statt 7 px),
   eigene Höhe (180 statt 212), 42 px schmalere Umrisse und kein Platz für das
   „+". Jetzt stehen darin genau die Maße eines frischen Fachs: so viele
   Heft-Umrisse wie Standard-Hefte (js/start.js), je 42 px breit und so hoch wie
   die ersten Hefte (BOOK_HH), plus das „+" — dieselben .books-Regeln wie echt. */
.bookcase.st-geist{opacity:.5; filter:saturate(.8); pointer-events:none;}
.st-geist-h{display:block; flex:0 0 auto; width:42px; height:var(--h, 190px); border-radius:2px 3px 0 0;
  outline:1.5px dashed rgba(255,230,190,.45); outline-offset:-2px;}
.st-geist .book-add{opacity:.8;}

/* Nach „Später", solange das Regal leer ist: ein leeres Regal, eine Aktion */
.st-leer{display:flex; align-items:center; gap:34px; flex-wrap:wrap; margin-top:26px;}
.st-leer > .bookcase{flex:0 0 auto;}
.st-leer-t{display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.st-leer-t > b{font:500 24px/1.2 var(--serif); color:var(--ink);}
.st-leer-los{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px 0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line2); background:var(--panel, transparent); color:var(--bronze2, #876430); font:700 14.5px/1 var(--sans);
  transition:border-color .2s ease, background .2s ease;}
.st-leer-los .ic{width:16px; height:16px;}
.st-leer-los:hover{border-color:rgba(161,121,63,.6);}

/* Telefon: ein Blatt über die ganze Breite, das Regal (als Telefon-Regal) darunter */
body.layout-phone .st{margin-top:24px; gap:22px; padding-bottom:110px;}
body.layout-phone .st-blatt{padding:24px 18px 18px; max-width:none;}
body.layout-phone .st-kopf{margin-bottom:20px;}
body.layout-phone .st-weg li + li::before{width:12px; margin:0 6px;}
body.layout-phone .st-weg .st-wt{display:none;}
body.layout-phone .st-weg li.an .st-wt{display:inline;}
body.layout-phone .st-inhalt h2{font-size:26px;}
body.layout-phone .st-satz{font-size:15px;}
body.layout-phone .st-stufen{gap:5px;}
body.layout-phone .st-stufe{height:42px; font-size:18px; border-radius:10px;}
body.layout-phone .st-weiter{flex:1 1 auto;}
/* Während der drei Schritte ruht die Tab-Leiste am Telefon (r-start2). Erster
   Versuch war ein klebender Fuss ÜBER der Leiste — dann lagen in Schritt 1 die
   Stufen hinter Fuss und Verlauf, und unten stapelten sich Knopf, Verlauf und
   Leiste. Ruhiger: oben bleibt die Kopfzeile (Profil, Suche, KI) — man ist in der
   App —, unten steht nur das Blatt mit seinem Knopf. „Später" holt die Leiste
   zurück, ebenso jeder Weg aus dem Start heraus (body.st-an, js/start.js). */
body.layout-phone.st-an #tabbar{display:none !important;}
body.layout-phone.st-an .view{padding-bottom:calc(20px + var(--sab, 0px));}
body.layout-phone.st-an .st{padding-bottom:0;}
/* Lange Fächerliste: „Weiter" bleibt am unteren Rand stehen. Ein Fuss nur mit
   leisen Knöpfen (Zurück · Umsehen) klebt nicht — er lag in Schritt 2 sonst über
   „Ich habe keins von beiden" (r-start3). */
body.layout-phone .st .st-fuss:not(.st-fuss-leise){position:sticky; bottom:8px; z-index:2;
  margin:18px -18px -18px; padding:16px 18px 18px; border-radius:0 0 10px 10px;
  background:linear-gradient(180deg, rgba(255,252,243,0), #fffcf3 26%);}
:root[data-theme="dark"] body.layout-phone .st .st-fuss:not(.st-fuss-leise){background:linear-gradient(180deg, rgba(244,236,219,0), #f4ecdb 26%);}
body.layout-phone .st .st-fuss-leise{justify-content:space-between;}
body.layout-phone .st-fach{min-height:40px; font-size:14px; padding:0 12px 0 10px;}
body.layout-phone .st-faecher{gap:7px;}
body.layout-phone .st-leer{flex-direction:column; align-items:stretch; gap:18px;}
body.layout-phone .st-leer > .bookcase{display:none;}
body.layout-phone .st-leer-t{align-items:center; text-align:center; padding:18px 0;}
@media (max-width:360px){
  .st-stufen{grid-template-columns:repeat(5, minmax(0, 1fr));}
}

@media (prefers-reduced-motion: reduce){
  .st > *, .bookcase.st-rein, .bookcase.st-rein .book, .st-fach.wird, .st-los.wird, .st-eigen-go.wird{animation:none;}
}

/* ── Der leere Kalender: ein Streifen Papier über dem Raster ── */
.st-kal[hidden]{display:none;}
.st-kal{display:flex; align-items:center; gap:16px; margin:0 0 14px; padding:14px 16px 14px 14px; border-radius:14px;
  background:#fffcf3; color:#26221b; border:1px solid rgba(38,34,27,.1);
  box-shadow:0 1px 2px rgba(38,34,27,.06), 0 10px 24px -16px rgba(60,40,15,.45);
  animation:stRein .5s cubic-bezier(.2,.8,.2,1) both;}
/* Im Dunkeln ist der Hinweis eine Karte wie die übrigen (Ben, 2026-11-05: der helle
   Creme-Kasten soll nicht bleiben). Papier bleibt nur, was ein Blatt bzw. Zettel ist:
   das Einrichtungs-Blatt (.st-blatt), die Altersfrage, der Lernraum-Zettel. */
:root[data-theme="dark"] .st-kal{background:var(--panel); color:var(--ink); border-color:var(--line2);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -16px rgba(0,0,0,.7);}
:root[data-theme="dark"] .st-kal-ic{background:rgba(201,162,94,.16); color:var(--bronze);}
:root[data-theme="dark"] .st-kal-t small{color:var(--ink2);}
:root[data-theme="dark"] .st-kal-neben{color:var(--ink3);}
:root[data-theme="dark"] .st-kal-neben button, :root[data-theme="dark"] .st-kal-wu{color:var(--bronze);}
.st-kal-ic{flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(161,121,63,.14); color:#876430;}
.st-kal-ic .ic{width:22px; height:22px;}
.st-kal-t{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px;}
.st-kal-t b{font:500 19px/1.25 var(--serif);}
.st-kal-t small{color:#5f584c; font-size:13.5px; line-height:1.45;}
.st-kal-neben{display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin-top:2px; color:#6f6656; font-size:13px;}
.st-kal-neben button{border:0; background:none; padding:6px 2px; min-height:32px; cursor:pointer; color:#876430; font:600 13.5px/1.2 var(--sans);}
.st-kal-neben button:hover{text-decoration:underline;}
.st-kal-los{flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 20px 0 16px; border:0; border-radius:999px;
  cursor:pointer; background:var(--bronze-grad); color:#fffdf7; font:700 14.5px/1 var(--sans);
  box-shadow:0 10px 22px -12px rgba(120,80,30,.8);}
.st-kal-los .ic{width:18px; height:18px;}
/* Die beiden Stundenplan-Wege rechts untereinander, gleich breit (r-kal3). */
.st-kal-wege{flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:8px;}
.st-kal-wege .st-kal-los{justify-content:center;}
/* WebUntis als unterstrichener Text unter dem Knopf, kein zweiter Knopf (Ben, 2026-11-05). */
.st-kal-wu{align-self:center; border:0; background:none; padding:6px 4px; min-height:36px; cursor:pointer;
  color:#876430; font:600 14px/1.2 var(--sans); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;}
.st-kal-wu:hover{text-decoration-thickness:2px;}
@media (max-width:900px){
  .st-kal{flex-wrap:wrap;}
  .st-kal-wege{width:100%;}
  .st-kal-los{width:100%; justify-content:center;}
}

/* ── Die Altersfrage liegt auf demselben Blatt ──
   Sie bleibt vorn (r-alter), ihr Inhalt gehört r-alter/r-alter2 — hier nur der
   Rahmen: derselbe Raum wie die Anmeldung, aber die Karte ist schon ein Blatt
   Papier mit derselben Messingklemme wie der Start danach. So beginnt der
   Weg schon auf dem Papier, auf dem gleich Klasse und Fächer stehen. */
.login.alt-schirm{overflow-y:auto;}
.alt-schirm .alt-box{
  --ink:#26221b; --mid:#4a4336; --ink2:#5f584c; --ink3:#6f6656;
  --line:rgba(38,34,27,.1); --line2:rgba(38,34,27,.18);
  --panel:#fffcf3; --sunk:#f6efe0; --bronze2:#876430;
  position:relative; color:var(--ink); margin:28px 0;
  background:#fffcf3 !important; border:0 !important; border-radius:6px 6px 12px 12px;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(38,34,27,.08), 0 6px 0 -3px #f3ead8, 0 7px 3px -3px rgba(60,40,15,.2),
    0 14px 34px -12px rgba(60,40,15,.32), 0 34px 70px -34px rgba(60,40,15,.35) !important;}
.alt-schirm .alt-box::before{content:''; position:absolute; left:50%; top:-12px; width:112px; height:24px; transform:translateX(-50%);
  border-radius:7px 7px 12px 12px; background:var(--messing);
  box-shadow:0 1px 0 rgba(255,245,215,.6) inset, 0 -2px 3px rgba(0,0,0,.18) inset, 0 3px 6px rgba(60,40,15,.35);}
.alt-schirm .alt-box .login-icon{width:64px; height:64px; margin-top:6px;}
.alt-schirm .alt-box h1{color:var(--ink);}
:root[data-theme="dark"] .alt-schirm .alt-box{background:#f4ecdb !important; --panel:#f4ecdb; --sunk:#ebe1cb;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 0 -3px #d4c9b2, 0 16px 40px -10px rgba(0,0,0,.65), 0 40px 80px -36px rgba(0,0,0,.75) !important;}

/* ── Notizen aus anderen Apps: die Anleitung je App (importHilfe, js/app.js) ──
   Ruhig und kurz: je App eine Zeile, aufgeklappt drei Schritte. Seit 2026-11-09
   eigene Piktogramme auf Kacheln im ungefähren Farbton der App — keine fremden Logos (5.2.1). */
.mbox:has(> .ih){width:min(580px, 94vw); max-height:min(90vh, 100dvh - 24px); overscroll-behavior:contain;}
.ih .wu-head{margin-bottom:14px;}
.ih-apps{display:flex; flex-direction:column; border-top:1px solid var(--line); margin:0 0 14px;}
.ih-app{border-bottom:1px solid var(--line);}
.ih-app summary{display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 2px; cursor:pointer; list-style:none;}
.ih-app summary::-webkit-details-marker{display:none;}
.ih-mark{flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line2); background:var(--sunk, rgba(0,0,0,.03)); color:var(--ink2);
  font:700 12.5px/1 var(--sans); letter-spacing:.02em;}
.ih-name{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ih-name b{font:500 17px/1.2 var(--serif); color:var(--ink);}
.ih-name small{color:var(--ink3); font-size:13px; line-height:1.3;}
.ih-pfeil{flex:0 0 auto; width:16px; height:16px; color:var(--ink3); transition:transform .2s ease;}
.ih-app[open] .ih-pfeil{transform:rotate(90deg); color:var(--bronze2, #876430);}
.ih-app[open] .ih-mark{border-color:transparent; background:var(--bronzesoft); color:var(--bronze2, #876430);}
/* Eigene Piktogramm-Kacheln (keine fremden Logos): Farbton der App, weißes Symbol. */
.ih-mark.ih-ic, .ih-app[open] .ih-mark.ih-ic{border:0; color:#fff;
  background:linear-gradient(160deg, color-mix(in srgb, var(--ih) 82%, #fff) 0%, var(--ih) 55%, color-mix(in srgb, var(--ih) 84%, #000) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.18);}
.ih-mark.ih-ic svg{width:26px; height:26px;}
.ih-schritte{margin:2px 0 12px; padding:0 0 0 48px; counter-reset:ih; list-style:none;}
.ih-schritte li{position:relative; margin:0 0 8px; color:var(--ink2); font-size:14.5px; line-height:1.5;}
.ih-schritte li::before{counter-increment:ih; content:counter(ih); position:absolute; left:-30px; top:1px;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--bronzesoft); color:var(--bronze2, #876430); font:700 11.5px/1 var(--sans);}
.ih-schritte b{color:var(--ink); font-weight:650;}
.mbox p.ih-tipp{margin:-4px 0 12px 48px; color:var(--ink3); font-size:13px; line-height:1.45;}
/* Die Info ist zurueckhaltend und zu (Ben, 2026-11-09): eine Zeile mit i, aufklappbar. */
.ih-was{margin:0 0 6px;}
.ih-was[open]{border-radius:var(--r-m, 12px); background:var(--bronzesoft); padding:2px 14px 12px;}
.ih-l{display:flex; align-items:center; gap:8px; min-height:44px; margin:0; cursor:pointer; list-style:none;
  color:var(--ink2); font:500 14px/1.3 var(--sans);}
.ih-l::-webkit-details-marker{display:none;}
.ih-l .ih-i{flex:0 0 auto; width:18px; height:18px; fill:none; stroke:var(--bronze2, #876430); stroke-width:1.6; stroke-linecap:round;}
.ih-l .ih-pfeil{margin-left:2px;}
.ih-was[open] .ih-l .ih-pfeil{transform:rotate(90deg);}
.ih-was[open] .ih-l{color:var(--ink);}
.ih-was ul{margin:0; padding:0 0 0 18px; color:var(--ink2); font-size:14px; line-height:1.5;}
.ih-was li{margin:0 0 5px;}
.ih-was b{color:var(--ink);}
.mbox p.ih-preis{margin:8px 0 0; color:var(--ink2); font-size:13.5px; line-height:1.45;}
.ih-link{display:block; margin:10px 2px 2px; padding:6px 0; border:0; background:none; cursor:pointer; text-align:left;
  color:var(--bronze2, #876430); font:600 13.5px/1.35 var(--sans);}
.ih-link:hover{text-decoration:underline; text-underline-offset:3px;}

/* ── SCHRITT 3: DER WEG ZUM ERSTEN BLATT (2026-11-05) ──
   Drei Zeilen statt eines Knopfs: der Schüler tippt selbst ein Heft im Regal an,
   im Heft „Neu" → „Leeres Blatt". Die Regale leuchten, solange sie dran sind;
   danach führt eine kleine Karte unten rechts (js/start.js: startFuehrung). */
.st-pfad{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px;}
.st-pfad li{display:flex; align-items:flex-start; gap:12px; color:var(--ink2); font-size:15.5px; line-height:1.45;}
.st-pfad li > b{flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center; font:700 13px/1 var(--sans);
  border:1.5px solid var(--line2); color:var(--ink3);}
.st-pfad li.an > b{border-color:transparent; background:var(--bronze-grad); color:#fffdf7; box-shadow:0 2px 6px -2px rgba(120,80,30,.6);}
.st-pfad li span{display:block; padding-top:4px;}
.st-pfad li strong{display:block; color:var(--ink); font-weight:700;}
.st-pfad li small{display:block; margin-top:2px; font-size:13.5px; color:var(--ink3);}
.st-pfad em{font-style:normal; font-weight:700; color:var(--ink); white-space:nowrap;}
/* Die Hefte, die man jetzt antippen soll: ein ruhiges Leuchten, kein Blinken */
.st[data-schritt="blatt"] .st-regale .bookcase:not(.st-geist) .book,
body.st-zeig .bookcase:not(.st-geist) .book{animation:stHeftLicht 2.4s ease-in-out infinite;}
.st[data-schritt="blatt"] .st-regale .bookcase:not(.st-geist) .book:nth-child(2),
body.st-zeig .bookcase:not(.st-geist) .book:nth-child(2){animation-delay:.4s;}
@keyframes stHeftLicht{0%,100%{box-shadow:0 3px 5px rgba(0,0,0,.4);} 50%{box-shadow:0 3px 5px rgba(0,0,0,.4), 0 0 0 2px rgba(231,196,128,.75), 0 0 18px 2px rgba(231,196,128,.45);}}
/* Der Knopf, der als Nächstes dran ist („Neu", dann „Leeres Blatt") */
.st-ring{animation:stRing 2s ease-in-out infinite;}
.pop-opt.st-ring{border-radius:10px; background:var(--bronzesoft);}
@keyframes stRing{0%,100%{box-shadow:0 0 0 0 rgba(161,121,63,.0), 0 0 0 2px rgba(161,121,63,.55);} 50%{box-shadow:0 0 0 7px rgba(161,121,63,.16), 0 0 0 2px rgba(161,121,63,.8);}}
/* Die Karte: ein kleiner Zettel, unten rechts, über allem außer Dialogen */
.st-fuehrung{position:fixed; z-index:95; right:max(20px, var(--sar, 0px)); bottom:calc(20px + var(--sab, 0px));
  width:min(330px, calc(100vw - 32px)); box-sizing:border-box; padding:14px 16px 12px; border-radius:14px;
  background:#fffcf3; color:#26221b; border:1px solid rgba(161,121,63,.35);
  box-shadow:0 14px 34px -14px rgba(38,34,27,.5), 0 2px 6px rgba(38,34,27,.12);
  display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:6px; align-items:start;
  animation:stFRein .35s cubic-bezier(.2,.8,.2,1) both;}
@keyframes stFRein{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.st-f-kopf{grid-column:1; display:flex; align-items:center; gap:8px; font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#876430;}
.st-f-n{display:inline-grid; place-items:center; min-width:30px; height:20px; padding:0 6px; border-radius:999px; background:rgba(161,121,63,.14); letter-spacing:0;}
.st-f-satz{grid-column:1 / -1; margin:0; font-size:15px; line-height:1.45; color:#3a342a;}
.st-f-satz b{color:#26221b;}
.st-f-weg{grid-column:2; grid-row:1; min-height:32px; margin:-8px -6px 0 0; padding:0 8px; border:0; background:none; cursor:pointer;
  font:600 13px/1 var(--sans); color:#6f6656; border-radius:8px;}
.st-f-weg:hover{color:#26221b; background:rgba(38,34,27,.05);}
body.layout-phone .st-fuehrung{left:16px; right:16px; width:auto; bottom:calc(var(--tb-h, 74px) + 12px + var(--sab, 0px));}
:root[data-theme="dark"] .st-fuehrung{background:#f4ecdb; border-color:rgba(201,162,94,.5);}
@media (prefers-reduced-motion: reduce){
  .st[data-schritt="blatt"] .st-regale .book, body.st-zeig .book, .st-ring, .st-fuehrung{animation:none;}
  .st-ring{box-shadow:0 0 0 2px rgba(161,121,63,.8);}
}