/* Skriptorium v5 — ATELIER (Design-Handoff 1a).
   Papier, Licht & Typografie: warmes Elfenbein, Newsreader-Serifen fuer
   Display, Bronze als einziger Akzent, Bibliothek als Regal mit Heftruecken.
   Jarvis ist ein tiefblauer Orb — der einzige kuehle Ton der App.
   Chrome = warmes Glas, Werkzeuge unten (Pencil-Ergonomie). */

:root{
  --bg:#f6f2ea;             /* Elfenbein */
  --bg2:#efe9db;
  --paper:#fffdf7;
  --panel:#fffdf7;
  --sunk:#fffdf7;           /* versenkte Flaeche: Eingaben, Auswahlkarten */
  --ink:#26221b; --mid:#4a4336; --ink2:#6b6357; --ink3:#a39a8a;
  --line:rgba(38,34,27,.1); --line2:rgba(38,34,27,.16);
  --bronze:#a1793f; --bronze2:#8d6a34;
  --bronzesoft:rgba(161,121,63,.13); --bronzeline:rgba(161,121,63,.4);
  --bronze-grad:linear-gradient(180deg,#b8934f,#8d6a34);
  --jblue:#26437e; --hand:#26437e;
  --orb:radial-gradient(circle at 33% 30%,#b7c6ff,#3d5bd6 58%,#101c4e);
  --danger:#b3452e; --dangersoft:rgba(179,69,46,.1);
  --glass:rgba(255,252,244,.6);
  --glass-strong:rgba(255,252,244,.86);
  --glass-line:rgba(255,255,255,.7);
  --glass-shadow:0 1px 1px rgba(255,255,255,.7) inset, 0 -1px 1px rgba(38,34,27,.04) inset,
                 0 2px 6px rgba(38,34,27,.05), 0 16px 44px rgba(38,34,27,.1);
  --card-shadow:0 2px 5px rgba(38,34,27,.06), 0 14px 38px rgba(38,34,27,.09);
  --shadow-lg:0 6px 16px rgba(38,34,27,.08), 0 34px 90px rgba(38,34,27,.2);
  --serif:'Newsreader',Georgia,serif;
  --handfont:'Caveat',cursive;
  --spring:cubic-bezier(.32,1.5,.4,1);
  --ease:cubic-bezier(.22,.8,.28,1);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
:root[data-theme="dark"]{
  --bg:#161209; --bg2:#0e0b06;
  --paper:#fffdf7; --panel:#211c13;
  --sunk:#1a1610;           /* im Dunkeln tiefer als das Panel - Papier bleibt Papier */
  --ink:#f0e9dc; --mid:#d6cbb8; --ink2:#b3a894; --ink3:#7d7361;
  --line:rgba(240,233,220,.09); --line2:rgba(240,233,220,.16);
  --bronze:#c9a25e; --bronze2:#a98545;
  --bronzesoft:rgba(201,162,94,.14); --bronzeline:rgba(201,162,94,.42);
  --bronze-grad:linear-gradient(180deg,#c9a25e,#a98545);
  --glass:rgba(44,38,28,.6);
  --glass-strong:rgba(44,38,28,.88);
  --glass-line:rgba(255,255,255,.09);
  --glass-shadow:0 1px 1px rgba(255,255,255,.06) inset, 0 -1px 1px rgba(0,0,0,.25) inset,
                 0 2px 6px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.5);
  --card-shadow:0 2px 5px rgba(0,0,0,.25), 0 14px 38px rgba(0,0,0,.35);
  --shadow-lg:0 6px 16px rgba(0,0,0,.35), 0 34px 90px rgba(0,0,0,.55);
  --danger:#e07a5f; --dangersoft:rgba(224,122,95,.12);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
/* Kein blaues Text-Markieren per Doppeltipp — Auswahl nur wo Text editiert wird */
body{user-select:none; -webkit-user-select:none;}
input,textarea,[contenteditable="true"],.jmsg,.ctext,.set-row .val{user-select:text; -webkit-user-select:text;}
html,body{margin:0; padding:0; height:100%; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,'SF Pro',system-ui,'Segoe UI',sans-serif;
  overscroll-behavior:none; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;}
/* Warmes Licht hinter allem */
body::before{content:''; position:fixed; inset:-15%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(44% 36% at 14% 6%, rgba(198,158,94,.14), transparent 70%),
    radial-gradient(38% 32% at 88% 10%, rgba(255,226,178,.2), transparent 70%),
    radial-gradient(46% 40% at 80% 96%, rgba(160,130,80,.1), transparent 72%);
  filter:blur(2px);}
:root[data-theme="dark"] body::before{background:
    radial-gradient(44% 36% at 14% 6%, rgba(198,158,94,.08), transparent 70%),
    radial-gradient(38% 32% at 88% 10%, rgba(255,196,120,.06), transparent 70%);}
button{font:inherit; border:none; background:none; color:inherit; cursor:pointer; padding:0;
  transition:transform .12s var(--ease);}
button:active{transform:scale(.95);}
input,textarea,select{font:inherit; color:inherit;}
h1,h2,h3{font-weight:600; letter-spacing:-.01em;}
.serif{font-family:var(--serif);}
svg.ic{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; display:block; pointer-events:none;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(140,125,100,.3); border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}
::selection{background:rgba(161,121,63,.2);}

/* ===== Glas-Bausteine ===== */
.glass{background:var(--glass); -webkit-backdrop-filter:blur(13px) saturate(1.6);
  backdrop-filter:blur(13px) saturate(1.6); border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);}
.glass-strong{background:var(--glass-strong); -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6); border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);}
.glass-card{background:var(--glass-strong); -webkit-backdrop-filter:blur(13px) saturate(1.6);
  backdrop-filter:blur(13px) saturate(1.6); border:1px solid var(--glass-line);
  box-shadow:var(--shadow-lg);}

.btn-primary{background:var(--bronze-grad); color:#fffdf7; border-radius:16px; padding:12px 24px;
  font-weight:650; font-size:14.5px;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 5px 16px rgba(141,106,52,.4);}
.btn-ghost{background:var(--glass); -webkit-backdrop-filter:blur(11px) saturate(1.5);
  backdrop-filter:blur(11px) saturate(1.5); border:1px solid var(--glass-line); border-radius:16px;
  padding:11px 18px; color:var(--ink2); font-weight:550;
  box-shadow:0 2px 6px rgba(38,34,27,.05), 0 10px 26px rgba(38,34,27,.08);}

@keyframes orbPulse{0%,100%{box-shadow:0 0 18px rgba(90,108,240,.45),0 0 44px rgba(90,108,240,.2);}
  50%{box-shadow:0 0 26px rgba(90,108,240,.7),0 0 60px rgba(90,108,240,.35);}}

/* ================= Splash ================= */
#splash{position:fixed; inset:0; z-index:400; background:var(--bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:opacity .5s var(--ease), visibility .5s;}
#splash.off{opacity:0; visibility:hidden; pointer-events:none;}
.splash-art{position:absolute; inset:-25%;
  background:
    radial-gradient(38% 30% at 20% 15%, rgba(198,158,94,.22), transparent 70%),
    radial-gradient(34% 30% at 82% 20%, rgba(255,226,178,.28), transparent 70%),
    radial-gradient(46% 40% at 75% 88%, rgba(160,130,80,.14), transparent 72%);
  animation:splashdrift 7s var(--ease) infinite alternate;}
@keyframes splashdrift{from{transform:translate(-1.5%,-1%) scale(1);} to{transform:translate(1.5%,1.5%) scale(1.05);}}
.splash-center{position:relative; text-align:center; animation:splashin .8s var(--spring) both;}
@keyframes splashin{from{opacity:0; transform:scale(.72) translateY(14px);} to{opacity:1; transform:none;}}
.splash-icon{width:104px; height:104px; border-radius:26px;
  box-shadow:0 10px 30px rgba(38,34,27,.22), 0 30px 80px rgba(141,106,52,.3);}
.splash-name{font:600 34px/1.1 var(--serif); letter-spacing:-.01em; margin-top:20px;}
.splash-sub{color:var(--bronze); font:italic 400 15px/1.4 var(--serif); margin-top:3px;}

/* ================= Login ================= */
.login{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;}
.login-box{text-align:center; width:min(350px,90vw); border-radius:28px; padding:36px 30px 30px;
  animation:splashin .55s var(--spring) both;}
.login-icon{width:78px; height:78px; border-radius:19px; box-shadow:0 8px 24px rgba(38,34,27,.2); margin-bottom:14px;}
.login-box h1{margin:0 0 2px; font:600 30px/1.15 var(--serif);}
.login-sub{color:var(--ink2); margin:0 0 18px;}
.gbtn{display:flex; justify-content:center; min-height:44px; margin:2px 0;}
.login-or{display:flex; align-items:center; gap:12px; margin:16px 2px 14px; color:var(--ink3); font-size:12px; text-transform:uppercase; letter-spacing:.06em;}
.login-or::before, .login-or::after{content:''; flex:1; height:1px; background:var(--line2);}
.login-box input{width:100%; text-align:center; font-size:26px; letter-spacing:10px;
  background:var(--panel); border:1.5px solid var(--line2); border-radius:16px;
  padding:12px; margin-bottom:12px; outline:none; transition:border-color .15s, box-shadow .15s;}
.login-box input:focus{border-color:var(--bronze); box-shadow:0 0 0 4px var(--bronzesoft);}
.login-box .btn-primary{width:100%;}
.login-err{color:var(--danger); font-size:13.5px; min-height:20px; margin:10px 0 0;}

/* ================= Kopfleiste + Layout ================= */
#app{display:flex; flex-direction:column; height:100dvh; padding-top:var(--sat);}
/* Wrapper um Kopfleiste + Ansicht — bildet die vertikale Haupt-Spalte.
   Im klassischen Layout füllt er den ganzen #app; im Rail-Layout sitzt er
   rechts neben der Seitenleiste. */
#appbody{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
#topbar{margin:14px 20px 0; flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:10px 18px; border-radius:20px;}

/* ===== Seiten-Rail (iPad-Layout, umschaltbar in den Einstellungen) ===== */
/* Standardmäßig unsichtbar — nur im Rail-Layout aktiv. Gleiche Glas-Sprache
   wie die Kopfleiste, damit beide Layouts „aus einem Guss" wirken. */
#rail{display:none;}
body.layout-rail #app{flex-direction:row; padding-left:var(--sal);}
body.layout-rail #rail{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:0 0 auto; width:92px; margin:14px 0 14px 14px; padding:15px 9px 14px;
  border-radius:26px;
  background:var(--glass); -webkit-backdrop-filter:blur(13px) saturate(1.6);
  backdrop-filter:blur(13px) saturate(1.6); border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow); z-index:20;}
.rail-logo{width:46px; height:46px; border-radius:14px; cursor:pointer; flex:0 0 auto;
  box-shadow:0 3px 10px rgba(38,34,27,.2), 0 10px 26px rgba(141,106,52,.22);}
.railnav{display:flex; flex-direction:column; gap:3px; width:100%; align-items:stretch;
  margin-top:12px;}
.railnav button{display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 3px 8px; border-radius:15px; color:var(--ink2); font-size:10.5px;
  font-weight:650; letter-spacing:.01em; line-height:1;}
.railnav button .ic{width:22px; height:22px;}
.railnav button:hover{background:rgba(38,34,27,.055);}
.railnav button.on{background:var(--bronzesoft); color:var(--bronze2);}
:root[data-theme="dark"] .railnav button:hover{background:rgba(240,233,220,.06);}
.rail-div{height:1px; align-self:stretch; background:var(--line); margin:8px 10px;}
.rail-sp{flex:1 1 auto;}
.rail-orb{width:48px; height:48px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; margin-bottom:4px;
  background:rgba(255,253,247,.55); border:1px solid var(--glass-line);
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 2px 8px rgba(38,34,27,.06);}
:root[data-theme="dark"] .rail-orb{background:rgba(44,38,28,.5);}
.rail-orb .orb-s{width:26px; height:26px;}
.rail-av{flex:0 0 auto;}

/* Kopfleiste im Rail-Layout: die Navigation lebt jetzt in der Seitenleiste,
   also bleibt oben nur die Suche (rechtsbündig). */
body.layout-rail #topbar{margin:14px 20px 0 14px; justify-content:flex-end;}
body.layout-rail #topbar .brand-logo,
body.layout-rail #topbar .brand,
body.layout-rail #topbar .tb-sep,
body.layout-rail #topbar .topnav,
body.layout-rail #topbar .jarvis-pill,
body.layout-rail #topbar #avatar,
body.layout-rail #topbar .tb-actions,
body.layout-rail #topbar .tb-spacer{display:none;}
body.layout-rail #topbar .top-search{width:min(360px,42vw); margin-left:auto;}
@media (max-width:640px){
  body.layout-rail #rail{width:74px;}
  body.layout-rail #rail .railnav button span{font-size:9.5px;}
}
#topbar .brand-logo{width:30px; height:30px; border-radius:8px; cursor:pointer; flex:0 0 auto;
  box-shadow:0 2px 6px rgba(38,34,27,.14); margin-right:-4px;}
#topbar .brand{font:600 21px/1 var(--serif); letter-spacing:-.01em; cursor:pointer;}
.tb-spacer{flex:1;}
.tb-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.tb-sep{width:1px; height:22px; background:var(--line2); flex:0 0 auto; margin:0 4px;}
.topnav.seg{display:flex; gap:3px; margin-left:6px; flex:0 0 auto;
  background:rgba(38,34,27,.055); border-radius:14px; padding:3px;}
.topnav button{display:flex; align-items:center; gap:7px; padding:8px 15px; border-radius:11px;
  font-size:13.5px; font-weight:600; color:var(--ink2); white-space:nowrap;}
.topnav button .ic{width:16px; height:16px; color:var(--ink3); flex:0 0 auto;}
.topnav button:hover{color:var(--ink);}
.topnav button.on{background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(38,34,27,.12);}
.topnav button.on .ic{color:var(--bronze2);}
:root[data-theme="dark"] .topnav.seg{background:rgba(255,253,247,.06);}
:root[data-theme="dark"] .topnav button.on{background:var(--panel);}
.tb-icon{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--ink2); flex:0 0 auto;}
.tb-icon .ic{width:19px; height:19px;}
.tb-icon:hover{background:rgba(38,34,27,.06); color:var(--ink);}
:root[data-theme="dark"] .tb-icon:hover{background:rgba(255,253,247,.08);}

/* ---- Home-KI: ausfahrendes Kommando-Feld (statt Preset-Panel) ---- */
.kicmd{display:flex; align-items:center; gap:9px; max-width:0; opacity:0; overflow:hidden; padding:0;
  background:var(--glass); -webkit-backdrop-filter:blur(11px) saturate(1.5); backdrop-filter:blur(11px) saturate(1.5);
  border:1px solid var(--glass-line); border-radius:99px; box-shadow:0 2px 8px rgba(38,34,27,.06);
  transition:max-width .36s cubic-bezier(.22,1,.36,1), opacity .24s, padding .36s; flex:0 0 auto;}
.kicmd .orb-s{flex:0 0 auto;}
.kicmd input{flex:1 1 auto; min-width:0; border:none; background:none; outline:none; font-size:14px; color:var(--ink);}
.kicmd input::placeholder{color:var(--ink3);}
.kicmd-send{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--bronze-grad);
  color:#fffdf7; display:grid; place-items:center; box-shadow:0 3px 9px rgba(161,121,63,.35);}
.kicmd-send .ic{width:16px; height:16px;}
/* Übergangs-Eigenschaften der ausblendbaren Elemente */
.top-search{transition:max-width .36s cubic-bezier(.22,1,.36,1), opacity .24s, padding .36s, border-color .24s;}
.tb-icon, .tb-sep-r, .jarvis-pill{transition:opacity .2s, max-width .3s, margin .3s, padding .3s;}
/* Kommando-Modus: Suche/Icons/Trenner/Pille weichen, Feld fährt nach links aus */
#topbar.cmd .kicmd{width:min(440px,46vw); max-width:46vw; opacity:1; padding:6px 8px 6px 15px;}
#topbar.cmd .top-search{max-width:0; opacity:0; padding-left:0; padding-right:0; border-color:transparent;}
#topbar.cmd .tb-icon,
#topbar.cmd .tb-sep-r,
#topbar.cmd #ki-pill{max-width:0; opacity:0; margin:0; padding:0; pointer-events:none;}

/* iPad (quer 1024 / hoch 768): in der Kopfleiste ist alles `flex:0 0 auto` — nichts schrumpft,
   also lief der ganze rechte Block (Pro-Pille, Avatar) aus dem Bild. Ab hier: Beschriftungen
   weg, Suche schrumpfbar, Marke nur als Logo. Griff vorher erst bei 900px -> zu spät. */
@media(max-width:1100px){
  #topbar{gap:8px; padding:9px 12px; margin:12px 12px 0;}
  #topbar .brand{display:none;}                /* Logo bleibt, Wortmarke weicht */
  .topnav.seg{margin-left:2px;}
  .topnav button span{display:none;}           /* nur noch Icons */
  .topnav button{padding:9px 11px;}
  .tb-sep, .tb-sep-r{display:none;}
  .top-search{width:auto; flex:1 1 80px; min-width:0; max-width:230px; padding:9px 13px; margin-left:auto;}
  .tb-actions{gap:6px;}
  .tb-icon{width:34px; height:34px;}
  .view{padding:22px 22px calc(72px + var(--sab));}
}
/* iPad hoch + kleiner: Suche wird schmal, KI-Pille zeigt nur den Orb */
@media(max-width:860px){
  .top-search{max-width:140px;}
  .jarvis-pill .pill-lbl{display:none;}
  .jarvis-pill{padding:7px 9px;}
}
@media(max-width:900px){
  #topbar.cmd .kicmd{max-width:64vw;}
}
.top-search{display:flex; align-items:center; gap:9px; background:rgba(255,253,247,.5);
  -webkit-backdrop-filter:blur(11px) saturate(1.5); backdrop-filter:blur(11px) saturate(1.5);
  border:1px solid var(--glass-line); border-radius:99px; padding:9px 16px; width:min(340px,34vw); margin-left:auto;
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 2px 6px rgba(38,34,27,.04);
  transition:border-color .15s, box-shadow .15s;}
:root[data-theme="dark"] .top-search{background:rgba(44,38,28,.5);}
.top-search:focus-within{border-color:var(--bronze); box-shadow:0 0 0 4px var(--bronzesoft);}
.top-search .ic{width:15px; height:15px; color:var(--ink3); flex:0 0 auto;}
.top-search input{flex:1; min-width:0; border:none; background:none; outline:none; font-size:13.5px;}
.top-search input::placeholder{color:var(--ink3);}
.jarvis-pill{display:flex; align-items:center; gap:9px; border-radius:99px; padding:8px 12px;
  background:rgba(255,253,247,.5); -webkit-backdrop-filter:blur(11px) saturate(1.5);
  backdrop-filter:blur(11px) saturate(1.5); border:1px solid var(--glass-line);
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 2px 6px rgba(38,34,27,.04);
  font-size:13.5px; font-weight:600; color:var(--jblue); flex:0 0 auto;}
:root[data-theme="dark"] .jarvis-pill{background:rgba(44,38,28,.5);}
.orb-s{width:20px; height:20px; border-radius:50%; background:var(--orb);
  animation:orbPulse 3.2s ease-in-out infinite; display:block; flex:0 0 auto;}
.tb-btn{width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:var(--ink2); flex:0 0 auto;}
.tb-btn:hover{background:rgba(38,34,27,.05);}
.tb-btn .ic{width:18px; height:18px;}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:650; flex:0 0 auto;}

/* Startseiten-Dashboard: Regale links, Widgets rechts */
.home-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:start;}
.home-side{display:flex; flex-direction:column; gap:18px; position:sticky; top:8px;}
.widget{border-radius:20px; padding:16px 16px 12px; background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);}
.w-head{display:flex; align-items:baseline; gap:10px; margin-bottom:10px;}
.w-head h3{margin:0; font:500 19px/1.2 var(--serif); flex:1;}
.w-head button{font-size:12.5px; color:var(--bronze); font-weight:600; padding:3px 8px; border-radius:8px;}
.w-head button:hover{background:var(--bronzesoft);}
.w-empty{color:var(--ink3); font-size:12.5px; padding:6px 2px 8px; font-style:italic;
  font-family:var(--serif);}
.w-total{display:flex; align-items:baseline; gap:10px; padding:4px 4px 10px;}
.w-total span{font-size:11.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bronze);}
.w-total b{font:500 30px/1 var(--serif);}
.hw-grade{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 8px; border-radius:11px; font-size:14px;}
.hw-grade:hover{background:rgba(38,34,27,.05);}
.hw-grade .dot{width:10px; height:10px; border-radius:4px; flex:0 0 auto;}
.hw-grade .n{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hw-grade .v{font:600 16px/1 var(--serif);}
.hw-grade .v.good{color:#3e7d68;} .hw-grade .v.mid{color:var(--bronze2);} .hw-grade .v.bad{color:var(--danger);}
@media (max-width:1080px){
  .home-grid{grid-template-columns:1fr;}
  .home-side{position:static; flex-direction:row; flex-wrap:wrap;}
  .home-side .widget{flex:1 1 280px;}
}

.view{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:26px 56px calc(72px + var(--sab));}
.view > *{animation:viewin .34s var(--ease) both;}
@keyframes viewin{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* Such-Popover */
#searchpop{position:fixed; z-index:130; width:min(440px,92vw); max-height:52vh; overflow-y:auto;
  border-radius:18px; padding:8px; background:var(--glass-strong);
  -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid var(--glass-line); box-shadow:var(--shadow-lg);
  animation:popin .22s var(--spring) both;}
.sr{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 11px;
  border-radius:12px;}
.sr:hover{background:rgba(38,34,27,.05);}
.sr .ric{width:34px; height:34px; border-radius:9px; background:var(--bronzesoft); color:var(--bronze);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.sr .ric .ic{width:17px; height:17px;}
.sr .t{min-width:0;}
.sr .t b{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sr .t small{color:var(--ink3); font-size:12px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sr-none{color:var(--ink3); text-align:center; padding:18px; font-size:13.5px;}

/* ================= Bibliothek: Hero + Für dich ================= */
.dateline{font:italic 400 15px/1.4 var(--serif); color:var(--bronze);}
.hero h1{margin:2px 0 0; font:500 42px/1.1 var(--serif); letter-spacing:-.02em;}

/* Wochen-Stundenplan-Widget (Home) */
.home-week{margin-top:22px; padding:16px 18px 18px; border-radius:22px; background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);}
.hw-top{display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.hw-title{font:600 17px/1 var(--serif); letter-spacing:-.01em; flex:0 0 auto;}
.hw-range{font-size:12.5px; color:var(--ink3); font-weight:600; flex:0 0 auto;}
.hw-nav{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
.hw-nav button{width:28px; height:28px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; color:var(--ink2); background:color-mix(in srgb, var(--ink) 7%, transparent); border:1px solid var(--glass-line);}
.hw-nav button:hover{background:color-mix(in srgb, var(--ink) 14%, transparent);}
.hw-nav .ic{width:14px; height:14px;}
.hw-nav .hw-today{width:auto; padding:0 11px; font-size:12px; font-weight:650; color:var(--bronze2);}
.hw-more{font-size:12.5px; font-weight:650; color:var(--bronze2); margin-left:auto; flex:0 0 auto;}
.hw-more:hover{text-decoration:underline;}
.hw-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; cursor:pointer;}
.hw-day{border-radius:14px; background:var(--panel); border:1px solid var(--line);
  padding:9px 8px 10px; display:flex; flex-direction:column; gap:5px; min-height:132px;}
.hw-day.today{outline:2px solid var(--bronzeline); outline-offset:1px; background:var(--bronzesoft);}
.hw-dh{display:flex; align-items:baseline; gap:6px; padding-bottom:3px; border-bottom:1px solid var(--line); margin-bottom:2px;}
.hw-dh .wd{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3);}
.hw-dh .wn{font:600 16px/1 var(--serif);}
.hw-day.today .wn{color:var(--bronze2);}
.hw-evs{margin-left:auto; display:flex; gap:3px; align-items:center;}
.hw-ev{width:7px; height:7px; border-radius:50%; display:inline-block;}
.hw-tt{display:flex; flex-direction:column; gap:3px;}
.hw-l{display:flex; align-items:center; gap:5px; font-size:11px; padding:4px 6px; border-radius:6px; cursor:pointer;
  background:color-mix(in srgb, var(--bc,#a1793f) 13%, var(--panel)); border-left:3px solid var(--bc,#a1793f);
  box-sizing:border-box; transition:filter .12s;}
.hw-l:hover{filter:brightness(1.05);}
.hw-l .lt{color:var(--ink3); font-variant-numeric:tabular-nums; font-size:9.5px; flex:0 0 auto;}
.hw-l .lf{font-weight:650; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hw-l .lr{color:var(--ink3); font-size:9.5px; flex:0 0 auto;}
.hw-l.entfaellt{opacity:.62;}
.hw-l.entfaellt .lf{text-decoration:line-through; color:var(--danger);}
.hw-l.aenderung{background:var(--bronzesoft); border-left:2px solid var(--bronze);}
.hw-l.aenderung .lf{color:var(--bronze2);}
/* Kompakt-Badge im Widget: „entfällt" (rot) / „Vertr." (bronze) statt Raumangabe */
.hw-l .lv{flex:0 0 auto; font-size:8.5px; font-weight:700; padding:1px 4px; border-radius:5px; letter-spacing:.02em;}
.hw-l .lv.ent{background:rgba(178,59,59,.15); color:var(--danger);}
.hw-l .lv.chg{background:var(--bronze); color:#fff;}
@media (max-width:760px){
  .hw-grid{grid-template-columns:repeat(3,1fr);}
}

.foryou{display:flex; gap:16px; margin-top:24px; flex-wrap:wrap;}
.fy{position:relative; cursor:pointer; display:flex; gap:16px; align-items:center; padding:14px 18px 14px 14px; border-radius:20px;
  text-align:left; background:var(--glass); -webkit-backdrop-filter:blur(12px) saturate(1.6);
  backdrop-filter:blur(12px) saturate(1.6); border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow); max-width:480px; min-width:280px;
  transition:transform .18s var(--spring), box-shadow .18s;}
.fy:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.fy .fy-thumb{flex:0 0 auto; width:64px; height:84px; border-radius:6px; background:var(--paper);
  border:1px solid rgba(38,34,27,.09); box-shadow:0 3px 10px rgba(38,34,27,.12);
  position:relative; overflow:hidden;}
.fy .fy-thumb img{width:100%; height:100%; object-fit:cover; object-position:top;}
.fy .fy-ic{width:44px; height:44px; border-radius:14px; background:var(--bronze-grad); color:#fffdf7;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  box-shadow:0 4px 12px rgba(161,121,63,.35);}
.fy .fy-ic .ic{width:20px; height:20px;}
.fy .fy-t{min-width:0; flex:1;}
.fy .fy-t .k{display:block; font-size:11.5px; font-weight:650; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bronze);}
.fy .fy-t b{display:block; font:500 19px/1.25 var(--serif); margin-top:3px; font-weight:500;}
.fy .fy-t small{display:block; color:var(--ink3); font-size:12.5px; margin-top:2px;}
.fy .fy-go{width:18px; height:18px; color:var(--bronze); flex:0 0 auto;}
/* Verwalten (gedrückt halten): Wackeln + Löschen-Badge + „+"-Kachel wie iOS-Homescreen */
.fy-x{position:absolute; top:-7px; left:-7px; z-index:6; width:24px; height:24px; border-radius:50%;
  background:#c0392b; color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3); border:2px solid var(--bg);}
.fy-x .ic{width:13px; height:13px; stroke-width:2.6;}
.foryou.managing .fy-x{display:flex;}
.foryou.managing .fy{animation:fywobble .34s ease-in-out infinite alternate;}
.foryou.managing .fy:nth-child(even){animation-delay:.17s;}
.foryou.managing .fy-addtile{animation:none;}
@keyframes fywobble{from{transform:rotate(-1deg);}to{transform:rotate(1deg);}}
.fy-addtile{border-style:dashed !important; color:var(--bronze2);}
.fy-addtile .fy-ic{background:var(--bronzesoft); color:var(--bronze2); box-shadow:none;}
.fy-addtile .fy-t b{font-size:16px;}
/* Cleane Bearbeiten-Leiste oben (statt schwebendem Fertig-Button) */
.fy-managebar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 2px 10px;}
.fy-managehint{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink3);}
.fy-managehint .ic{width:15px; height:15px;}
.fy-done{padding:7px 18px; border-radius:12px; background:var(--bronze-grad); color:#fffdf7; font-weight:650; font-size:13.5px; flex:0 0 auto;}
/* Bearbeiten-Modus: NORMALE Anordnung bleibt (Karten behalten Größe/Umbruch).
   touch-action:none verhindert, dass iOS beim Ziehen scrollt (das war der Bug). */
.foryou.managing{margin-top:4px;}
.foryou.managing .fy{touch-action:none; cursor:grab;}
.fy-dragging{animation:none !important; transition:none !important; z-index:30; pointer-events:none;
  box-shadow:0 16px 34px rgba(38,34,27,.34) !important; opacity:.96; cursor:grabbing;}
/* Visueller Schnellzugang-Wähler: Kacheln + Bücher */
.fyp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px;}
.fyp-tile{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border-radius:18px;
  background:var(--panel); border:1px solid var(--line2); text-align:center; transition:transform .12s, box-shadow .12s;}
.fyp-tile:hover{transform:translateY(-2px); box-shadow:var(--card-shadow);}
.fyp-tile b{font-size:13px; color:var(--ink); font-weight:600;}
.fyp-tile small{font-size:11px; color:var(--ink3);}
.fyp-ic{width:46px; height:46px; border-radius:14px; background:var(--bronze-grad); color:#fffdf7;
  display:flex; align-items:center; justify-content:center;}
.fyp-ic .ic{width:22px; height:22px;}
.fyp-spine{width:16px; height:44px; border-radius:2px 5px 5px 2px; box-shadow:inset -2px 0 3px rgba(0,0,0,.28);}
.fyp-hint{margin-top:18px; font-size:12.5px; color:var(--ink3); line-height:1.55;}
/* „Home"-Button im Heft: aktiv = Heft ist Schnellzugang */
.vact.on{background:var(--bronze-grad); color:#fffdf7; border-color:transparent;}
.vact.on .ic{color:#fffdf7;}
.fy .fy-ring{flex:0 0 auto; min-width:56px; text-align:center;
  font:600 30px/1 var(--serif); letter-spacing:-.02em;}
.fy .fy-ring.good{color:#3e7d68;}
.fy .fy-ring.mid{color:var(--bronze2);}
.fy .fy-ring.bad{color:var(--danger);}

/* ================= Regal mit Heftrücken ================= */
/* Begrüßung links, Schnellnotiz-Button rechtsbündig daneben */
.hero-row{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.hero-row .hero{flex:1 1 auto;}
.hero-row .qnote{flex:0 1 auto; width:auto; margin:0;}
/* Schnellnotiz-Button auf der Startseite — Papier-Karte im Atelier-Stil:
   warmes Glas, feiner Bronze-Rahmen, runder Bronze-Icon-Badge. Fügt sich
   ruhig neben Regal & „Für dich"-Karten ein, bleibt aber die klare Aktion. */
.qnote{display:flex; align-items:center; gap:14px; width:100%; margin:18px 0 4px; padding:13px 20px 13px 14px;
  border-radius:20px; cursor:pointer; text-align:left; color:var(--ink);
  background:var(--glass); -webkit-backdrop-filter:blur(12px) saturate(1.6);
  backdrop-filter:blur(12px) saturate(1.6);
  border:1px solid var(--bronzeline);
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 3px 10px rgba(38,34,27,.06),
             0 14px 34px rgba(161,121,63,.14);
  transition:transform .18s var(--spring), box-shadow .18s, border-color .18s;}
.qnote:hover{transform:translateY(-2px); border-color:var(--bronze);
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 4px 12px rgba(38,34,27,.08),
             0 20px 44px rgba(161,121,63,.22);}
.qnote:active{transform:translateY(0);}
.qnote .ic{width:22px; height:22px; flex:0 0 auto; color:#fffdf7;
  background:var(--bronze-grad); border-radius:50%; padding:11px; box-sizing:content-box;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 5px 14px rgba(161,121,63,.4);}
.qnote span{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.qnote b{font:500 19px/1.2 var(--serif); letter-spacing:-.01em;}
.qnote small{font-size:12.5px; color:var(--ink2); margin-top:2px; white-space:normal;}
.hero-row .qnote{max-width:100%;}
.hero-actions{display:flex; gap:12px; flex:0 1 auto; flex-wrap:wrap; margin:18px 0 4px;}
.hero-actions .qnote{margin:0; width:auto;}
.qscan{display:flex; align-items:center; gap:12px; padding:13px 20px 13px 14px; border-radius:20px;
  cursor:pointer; text-align:left; color:var(--ink); background:var(--panel);
  border:1px solid var(--line2); box-shadow:var(--card-shadow);
  transition:transform .18s var(--spring), border-color .18s;}
.qscan:hover{transform:translateY(-2px); border-color:var(--bronze);}
.qscan .ic{width:20px; height:20px; flex:0 0 auto; color:var(--bronze2);
  background:var(--bronzesoft); border-radius:50%; padding:10px; box-sizing:content-box;}
.qscan span{display:flex; flex-direction:column; line-height:1.25;}
.qscan b{font:500 17px/1.2 var(--serif); letter-spacing:-.01em;}
.qscan small{font-size:12px; color:var(--ink3); margin-top:1px;}

/* ===== Holz-Bücherschrank (Claude-Design) ===== */
/* Fächer fließen nebeneinander; jedes Regal ist so breit wie seine Bücherreihe
   (Bücher gehen nach RECHTS, nicht nach unten). Passt ein Regal nicht mehr in die
   Reihe, rutscht das ganze Regal nach unten. */
.bookcase-grid{display:flex; flex-wrap:wrap; gap:20px; margin-top:26px; align-items:flex-start;}
.bookcase{position:relative; padding:15px 16px; border-radius:14px;
  flex:0 0 auto; width:max-content; max-width:100%; min-width:212px;
  background-color:#4a3320;
  background-image:
    linear-gradient(180deg,rgba(255,220,170,.14),transparent 12%,transparent 84%,rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 3px,transparent 3px 11px),
    repeating-linear-gradient(90deg,rgba(255,214,160,.05) 0 1px,transparent 1px 17px);
  box-shadow:0 2px 4px rgba(255,224,180,.35) inset, 0 -10px 20px rgba(0,0,0,.28) inset,
    0 3px 8px rgba(38,34,27,.18), 0 10px 22px rgba(38,34,27,.28);}
/* Seitenwangen (Zargen) */
.bc-rail{position:absolute; top:15px; bottom:15px; width:16px; z-index:2;}
.bc-rail.left{left:15px; border-radius:8px 3px 3px 8px;
  background:linear-gradient(90deg,#5a3d24,#2f1f0f);
  box-shadow:1px 0 3px rgba(0,0,0,.4), inset 1px 0 2px rgba(255,224,180,.22);}
.bc-rail.right{right:15px; border-radius:3px 8px 8px 3px;
  background:linear-gradient(270deg,#5a3d24,#2f1f0f);
  box-shadow:-1px 0 3px rgba(0,0,0,.4), inset -1px 0 2px rgba(255,224,180,.22);}
/* dunkler Innenraum */
.bc-inner{position:relative; margin:0 15px; border-radius:4px; padding:8px 20px 0;
  background:linear-gradient(180deg,#2c1d0f,#1c1207);
  box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 8px 24px rgba(0,0,0,.5) inset;}
/* ein Fach = Bücherreihe + Regalbrett */
.shelf-unit{position:relative; display:flex; flex-direction:column; justify-content:flex-end;}
.shelf-unit + .shelf-unit{margin-top:6px;}
/* Bücher in EINER Reihe nach rechts (Regal ist so breit wie die Reihe). Der Umbruch
   greift nur als Notbremse, falls ein Fach breiter als der Bildschirm würde. */
.books{display:flex; flex-wrap:wrap; align-items:flex-end; align-content:flex-end;
  gap:16px 7px; padding:20px 8px 6px 4px; min-height:212px;}
/* Buchrücken */
.book{flex:0 0 auto; width:var(--w,52px); height:var(--h,190px); border-radius:2px 3px 0 0;
  position:relative; overflow:hidden; cursor:pointer; background-color:var(--spine,#6e2b2b);
  background-image:linear-gradient(90deg,rgba(0,0,0,.28),transparent 13%,transparent 80%,rgba(0,0,0,.32)),
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 10%);
  box-shadow:0 3px 5px rgba(0,0,0,.4);
  transform:rotate(var(--tilt,0deg)); transform-origin:bottom center;
  transition:transform .18s var(--spring), box-shadow .18s;}
.book:hover{transform:rotate(var(--tilt,0deg)) translateY(-9px); box-shadow:0 10px 18px rgba(0,0,0,.5);}
.bk-rule{position:absolute; left:0; right:0; height:2px; background:var(--rule,#c99f5c);}
.bk-top{top:16px;} .bk-bot{bottom:34px;}
.book-ttl{position:absolute; top:26px; bottom:38px; left:50%;
  transform:translateX(-50%) rotate(calc(var(--tilt,0deg) * -1)); transform-origin:center center;
  writing-mode:vertical-rl; font:600 13px/1 var(--serif); color:var(--tc,#e2c185);
  letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:100%;}
.book-ttl.long{font-size:11px; letter-spacing:0;}
.book-pg{position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  min-width:18px; text-align:center; font-size:10px; font-weight:700; color:var(--tc,#e2c185); opacity:.66;
  font-variant-numeric:tabular-nums;}
.book-add{flex:0 0 auto; width:46px; height:150px; border-radius:2px 3px 0 0;
  border:1.5px dashed rgba(255,224,180,.4); display:flex; align-items:center; justify-content:center;
  color:rgba(255,224,180,.65); background:none;}
.book-add .ic{width:17px; height:17px;}
/* Regalbrett + Messing-Namensschild */
.shelf-board{position:relative; height:22px; margin:0 -20px; border-radius:2px;
  display:flex; justify-content:center; align-items:flex-start;
  background:linear-gradient(180deg,#8a6238 0 5px,#66451f 5px,#4a3117);
  box-shadow:0 2px 3px rgba(255,224,180,.25) inset, 0 12px 16px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.4);}
/* Messing-Schild: IMMER voller Fachname (nie „…") → bestimmt die Mindestbreite des Regals */
.shelf-plate{flex:0 0 auto; margin-top:3px; padding:3px 15px; border-radius:3px;
  background:linear-gradient(180deg,#d9b25e,#9c7526);
  color:#3a2a12; font:700 10px/1 var(--serif); letter-spacing:.12em; white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,240,200,.5) inset;}
.shelf-plate:hover{background:linear-gradient(180deg,#e6bd68,#a67e2c);}
/* Bearbeiten-Stift oben rechts am Schrank (Fach & Farbe) — fest, kein Hüpfen */
.bc-edit{position:absolute; top:9px; right:9px; z-index:4;
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#3a2a12; background:linear-gradient(180deg,#d9b25e,#9c7526);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,240,200,.5) inset;
  transition:filter .12s;}
.bc-edit .ic{width:17px; height:17px;}
.bc-edit:hover{filter:brightness(1.08);}
.bc-edit:active{filter:brightness(.94);}
.newshelf{margin-top:30px;}

/* Kopfzeile in Views (Heft-Ansicht) */
.vhead{display:flex; align-items:center; gap:12px; margin:0 0 20px; flex-wrap:wrap;}
.vhead .back{width:40px; height:40px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; color:var(--ink2); background:var(--glass);
  -webkit-backdrop-filter:blur(11px) saturate(1.5); backdrop-filter:blur(11px) saturate(1.5);
  border:1px solid var(--glass-line); box-shadow:0 2px 6px rgba(38,34,27,.05);}
.vhead h1{margin:0; font:500 30px/1.15 var(--serif);}
.vhead .spacer{flex:1;}
.vact{display:flex; align-items:center; gap:7px; background:var(--glass);
  -webkit-backdrop-filter:blur(11px) saturate(1.5); backdrop-filter:blur(11px) saturate(1.5);
  border:1px solid var(--glass-line); color:var(--ink); border-radius:14px; padding:10px 16px;
  font-size:14px; font-weight:550; box-shadow:0 2px 6px rgba(38,34,27,.05), 0 10px 26px rgba(38,34,27,.07);}
.vact .ic{width:17px; height:17px;}
.vact.primary{background:var(--bronze-grad); color:#fffdf7; border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 5px 16px rgba(141,106,52,.4);}

/* ================= Seiten-Raster ================= */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:24px 20px;}
.pitem{display:flex; flex-direction:column; min-width:0;}
.pcap{display:flex; align-items:baseline; gap:7px; padding:7px 3px 0; min-width:0;}
.pcap-t{flex:1; min-width:0; text-align:left; font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pcap-t:hover{color:var(--bronze2); text-decoration:underline;}
.pcap-d{flex:0 0 auto; font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums;}
.pcard{position:relative; border-radius:10px; overflow:hidden; border:1px solid rgba(38,34,27,.1);
  background:var(--paper); aspect-ratio:0.707; box-shadow:var(--card-shadow); cursor:pointer; padding:0;
  transition:transform .18s var(--spring), box-shadow .18s;}
.pcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.pcard img{width:100%; height:100%; object-fit:contain; object-position:top center; display:block; background:var(--paper);}
.pcard .pn{position:absolute; bottom:7px; left:7px; background:rgba(255,253,247,.92);
  border:1px solid rgba(38,34,27,.08); color:#6b6357; font-size:11px; font-weight:650;
  padding:2px 8px; border-radius:7px;}
.pcard .del{position:absolute; top:7px; right:7px; background:rgba(255,253,247,.94);
  border:1px solid rgba(38,34,27,.08); border-radius:9px; color:var(--danger); padding:4px 7px; opacity:0;
  transition:opacity .15s;}
.pcard:hover .del{opacity:1;}
.pcard .del .ic{width:14px; height:14px;}
.pcard.add{display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center;
  color:var(--bronze); border-style:dashed; border-color:var(--bronzeline); background:transparent;
  box-shadow:none; font-size:13px;}
.pcard.add:hover{transform:none;}
.empty{color:var(--ink3); text-align:center; padding:44px 16px; font:italic 400 16px/1.5 var(--serif);}
.empty .eart{width:120px; height:90px; margin:0 auto 14px; display:block; opacity:.7;}

/* ===== Heft-Übersicht: Pergament-Blätter in Zeit-Kapiteln ===== */
.pchap{display:flex; align-items:center; gap:14px; margin:26px 2px 14px;
  font:italic 500 18px var(--serif); color:var(--ink2);}
.pchap span{flex:0 0 auto;}
.pchap::after{content:''; flex:1; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--bronze) 42%, transparent), transparent);}
.view > .pchap:first-of-type{margin-top:8px;}
.pempty-nb{color:var(--ink3); text-align:center; padding:52px 16px; font:italic 400 17px/1.6 var(--serif);}
.pempty-nb small{font-size:13.5px; font-style:normal;}

/* Ruhiges, ausgerichtetes Raster (keine Neigung) — clean statt „gestapelt" */
.psheet{position:relative; display:block; width:100%; aspect-ratio:0.707; padding:0; cursor:pointer;
  border-radius:4px 8px 8px 4px; overflow:hidden;
  background:linear-gradient(135deg,#faf7ef 0%,#f5eede 60%,#f1e9d6 100%);
  border:1px solid rgba(96,74,44,.12); border-left:2px solid rgba(120,92,52,.2);
  box-shadow:0 1px 3px rgba(38,34,27,.1), 0 8px 18px rgba(38,34,27,.07);
  transition:transform .2s var(--spring), box-shadow .2s;}
.psheet:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(38,34,27,.18);}
/* Alterung dezent: nur ein Hauch Vignette + Lichtsaum oben */
.psheet::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 18px rgba(126,94,52,.06), inset 0 1px 0 rgba(255,252,244,.5);}
.ps-paper{position:absolute; inset:0; z-index:0; opacity:.6;}
.paper-lines .ps-paper{background:repeating-linear-gradient(transparent 0 15%, rgba(70,80,110,.16) 15%, rgba(70,80,110,.16) calc(15% + 1px));}
.paper-grid .ps-paper{background:
  repeating-linear-gradient(transparent 0 15%, rgba(70,80,110,.13) 15%, rgba(70,80,110,.13) calc(15% + 1px)),
  repeating-linear-gradient(90deg, transparent 0 11%, rgba(70,80,110,.13) 11%, rgba(70,80,110,.13) calc(11% + 1px));}
.paper-dots .ps-paper{background:radial-gradient(rgba(70,80,110,.30) 1px, transparent 1.6px); background-size:15% 11%;}
.paper-blank .ps-paper{background:none;}
.psheet img.snap{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:1; background:transparent;}
.ps-date{position:absolute; top:5px; left:9px; z-index:3; font-family:'Caveat',cursive;
  font-size:15px; line-height:1; color:color-mix(in srgb, var(--bronze) 62%, #4a3a1e);
  transform:rotate(-3.5deg); pointer-events:none; opacity:.92;
  text-shadow:0 1px 2px rgba(250,246,236,.9), 0 0 4px rgba(250,246,236,.7);}
.ps-corner{position:absolute; bottom:6px; right:7px; z-index:3; min-width:16px; height:17px; padding:0 5px;
  display:flex; align-items:center; justify-content:center; border-radius:6px;
  background:rgba(255,253,247,.82); color:color-mix(in srgb,var(--bronze) 78%,#4a3a1e);
  font:650 11px var(--serif); box-shadow:0 1px 2px rgba(38,34,27,.12);}
.ps-ribbon{position:absolute; top:-1px; right:15px; z-index:3; width:13px; height:32px;
  background:linear-gradient(180deg,#b23b3b,#8f2a2a);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.28);}
/* Löschen: unten links, kollisionsfrei zu Fähnchen (oben rechts), Bronze-Nummer (unten
   rechts) und Datum (oben links). Immer sichtbar + prominent, nie im Hintergrund. */
/* Löschen dezent: bei Zeigergeräten erst beim Hovern, auf Touch leise sichtbar (neutral, nicht rot) */
.ps-del{position:absolute; top:6px; left:6px; z-index:6; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; background:rgba(255,252,244,.92); border:1px solid rgba(38,34,27,.12);
  border-radius:8px; color:var(--ink3); box-shadow:0 1px 4px rgba(38,34,27,.16); opacity:0;
  transition:opacity .15s, transform .12s, background .12s, color .12s;}
.psheet:hover .ps-del{opacity:1;}
.ps-del:hover{background:#fff; color:var(--danger); border-color:rgba(178,59,59,.4); transform:scale(1.08);}
.ps-del:active{transform:scale(.9);}
.ps-del .ic{width:14px; height:14px;}
@media (hover:none){ .ps-del{opacity:.55;} }
/* ===== Stapel: zusammengehörige Seiten (Scan-Stapel oder ein PDF) als EIN Dokument ===== */
.pstack{position:relative; display:block; width:100%; aspect-ratio:0.707; padding:0; cursor:pointer;
  transition:transform .2s var(--spring);}
.pstack:hover{transform:translateY(-4px);}
.pst-l{position:absolute; inset:0; border-radius:4px 8px 8px 4px; background:#f7f2e6;
  border:1px solid rgba(96,74,44,.13); box-shadow:0 1px 3px rgba(38,34,27,.1);}
.pst-l.l3{transform:translate(8px,8px) rotate(1.8deg);}
.pst-l.l2{transform:translate(4px,4px) rotate(.9deg);}
.pst-top{position:absolute; inset:0; border-radius:4px 8px 8px 4px; overflow:hidden;
  background:linear-gradient(135deg,#faf7ef 0%,#f5eede 60%,#f1e9d6 100%);
  border:1px solid rgba(96,74,44,.12); border-left:2px solid rgba(120,92,52,.2);
  box-shadow:0 1px 3px rgba(38,34,27,.1), 0 8px 18px rgba(38,34,27,.08);}
.pst-top .ps-paper{position:absolute; inset:0; z-index:0; opacity:.5;}
.pst-top img.snap{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  object-position:top center; opacity:0; transition:opacity .28s ease; background:transparent;}
.pst-top img.snap.ready{opacity:1;}
.pst-n{position:absolute; z-index:3; right:6px; bottom:6px; min-width:20px; height:20px; padding:0 6px;
  display:flex; align-items:center; justify-content:center; border-radius:7px;
  background:var(--bronze); color:#fffdf7; font:800 11px/1 system-ui,sans-serif;
  box-shadow:0 1px 3px rgba(38,34,27,.3);}
/* aufgefächert */
.pgrp{border:1.5px solid var(--bronzeline); border-radius:18px; padding:12px 14px 14px; margin:6px 0 10px;
  background:color-mix(in srgb, var(--bronze) 5%, transparent);}
.pgrp-h{display:flex; align-items:center; gap:9px; margin-bottom:11px;}
.pgrp-ic{width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--bronzesoft); color:var(--bronze2); flex:0 0 auto;}
.pgrp-ic .ic{width:15px; height:15px;}
.pgrp-t{font:600 13.5px var(--serif); color:var(--ink);}
.pgrp-r{font-size:11.5px; color:var(--ink3); margin-right:auto;}
.pgrp-x{font-size:12px; font-weight:650; color:var(--bronze2); padding:5px 11px; border-radius:9px;
  background:var(--bronzesoft);}
.pitem .pcap{padding:8px 4px 0; justify-content:center;}
.pitem .pcap-t{flex:0 1 auto; text-align:center; font-family:var(--serif); font-size:13px; font-style:italic;}
/* Sparsam-Modus (iPad): keine Neigung -> weniger Compositing */
html.perf-lite .psheet{transform:none;}
html.perf-lite .psheet:hover{transform:translateY(-4px);}

/* ================= Kalender ================= */
/* Das Tage-Raster füllt jetzt die volle Höhe der Ansicht (statt oben zusammen-
   zukleben) — die Tagesfelder wachsen mit und nehmen den Platz wirklich ein. */
.cal-wrap{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap;}
.cal-main{flex:1 1 620px; min-width:0; display:flex; flex-direction:column;
  min-height:calc(100dvh - 196px);}
.cal-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.cal-head h2{margin:0; font:500 28px/1.1 var(--serif); min-width:230px;}
.cal-nav{width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; color:var(--ink2); background:var(--glass);
  border:1px solid var(--glass-line); box-shadow:0 2px 6px rgba(38,34,27,.05);}
.cal-today{width:auto; padding:0 13px; font-size:12.5px; font-weight:650;}
/* Kopfzeile im gemeinsamen Rahmen: linke Gruppe (Titel+Nav+Umschalter) darf umbrechen,
   „+ Termin" bleibt IMMER fix oben rechts (nie in die nächste Zeile links). */
.calx-main .cal-head{align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:nowrap;}
.cal-head-l{display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:8px; min-width:0; flex:1 1 auto;}
.cal-head-l h2{min-width:0;}
.cal-add{flex:0 0 auto;}
.cal-toggle{display:flex; gap:2px; background:rgba(38,34,27,.06); border-radius:10px; padding:2px;
  margin-left:6px;}
.cal-toggle button{padding:5px 11px; border-radius:8px; font-size:12.5px; font-weight:600;
  color:var(--ink2);}
.cal-toggle button.on{background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(38,34,27,.12);}

/* ===== Tagesansicht: Sidebar (Mini-Monat / Fächer / Aufgaben) + Timeline ===== */
.calx{display:grid; grid-template-columns:236px minmax(0,1fr) 284px; gap:20px; align-items:start; margin-top:16px;}
@media(max-width:1180px){.calx{grid-template-columns:1fr;}}
.calx-side,.calx-right{display:grid; gap:14px; position:sticky; top:8px;}
@media(max-width:1180px){.calx-side,.calx-right{position:static;}}
.calx-main{min-width:0;}
/* Kalender-Body ZENTRIERT zwischen den beiden Seitenspalten. Vorher war der Inhalt auf
   1100px gedeckelt und linksbündig -> rechts klaffte eine Lücke zur Aufgaben-/Prüfungs-
   Spalte und der „+ Termin" wirkte abseits. Kopfzeile mitzentriert, damit sie über dem
   Kalender sitzt statt an der Spaltenkante. */
.calx-main .cal-head, .calx-main .wg, .calx-main .tl{max-width:1100px; margin-inline:auto; width:100%;}
.dsum{display:grid; gap:5px;}
.dsum-row{font-size:13.5px; color:var(--ink2);}
.dsum-row b{font-size:16px; color:var(--ink); font-weight:750;}
.dsum-rooms{color:var(--ink3); font-size:12.5px;}
.dexam-list{display:grid; gap:3px;}
.dexam{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; text-align:left; width:100%;}
.dexam:hover{background:rgba(38,34,27,.05);}
.dexam-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.side-card{background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:16px; box-shadow:var(--card-shadow);}
.side-label{font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3);
  margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.side-badge{margin-left:auto; background:var(--bronzesoft); color:var(--bronze2); border-radius:20px;
  font-size:11px; font-weight:700; padding:1px 8px;}
.side-empty{color:var(--ink3); font-size:13px; padding:2px;}

.mm-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.mm-head b{font:600 15px/1 var(--serif);}
.mm-nav button{width:24px; height:24px; border-radius:7px; color:var(--ink3); font-size:15px;}
.mm-nav button:hover{background:rgba(38,34,27,.06); color:var(--ink);}
.mm-dows{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:3px;}
.mm-dows span{text-align:center; font-size:10.5px; font-weight:650; color:var(--ink3);}
.mm-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.mm-d{height:30px; border-radius:8px; font-size:12.5px; font-weight:550; color:var(--ink2);
  display:flex; align-items:center; justify-content:center; position:relative;}
.mm-d.out{visibility:hidden;}
.mm-d:hover{background:rgba(38,34,27,.06);}
.mm-d.today{color:var(--bronze2); font-weight:750;}
.mm-d.sel{background:var(--bronze); color:#fff; font-weight:700;}
.mm-d.hasev::after{content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--bronze);}
.mm-d.sel.hasev::after{background:rgba(255,255,255,.9);}

.subf-list{display:grid; gap:2px;}
.subf{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; text-align:left; width:100%;}
.subf:hover{background:rgba(38,34,27,.05);}
.subf-dot{width:11px; height:11px; border-radius:50%; flex:0 0 auto;}
.subf-n{font-size:14px; font-weight:600; color:var(--ink);}
.subf-ck{margin-left:auto; color:#2f7d4f; font-weight:800; font-size:13px; width:14px; text-align:center;}
.subf.off .subf-dot{opacity:.35;}
.subf.off .subf-n{color:var(--ink3);}

.task-list{display:grid; gap:4px;}
.task{display:flex; align-items:flex-start; gap:10px; padding:8px 6px; border-radius:10px; text-align:left; width:100%;
  transition:opacity .3s ease, transform .3s ease, max-height .3s ease; max-height:64px; overflow:hidden;}
.task:hover{background:rgba(38,34,27,.05);}
.task.vanish{opacity:0; transform:translateX(10px); max-height:0; padding-top:0; padding-bottom:0;}
.task-box{flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; margin-top:1px;
  transition:background .15s, border-color .15s, transform .12s;}
.task:active .task-box{transform:scale(.88);}
.task.done .task-box{background:#2f7d4f; border-color:#2f7d4f;}
.task-b{display:flex; flex-direction:column; gap:1px; min-width:0;}
.task-b b{font-size:13.5px; font-weight:600; color:var(--ink);}
.task-b small{font-size:12px; color:var(--ink3);}
.task.done .task-b b{text-decoration:line-through; color:var(--ink3);}

.tl{position:relative;}
.tl-load,.tl-empty{color:var(--ink3); padding:30px 8px; text-align:center; font-size:14px;}
.tl-empty small{font-size:12.5px;}
.tl-grid{position:relative; margin-top:4px; max-width:860px;}
/* Gitterlinie beginnt ERST am Stundenplan (nicht unter der Uhrzeit) + blasser, damit sie
   nicht mit den Stunden-Karten verwechselt wird. Uhrzeit sitzt in der Gutter-Spalte daneben. */
.tl-hr{position:absolute; left:56px; right:0; height:0; border-top:1px solid color-mix(in srgb, var(--line2) 52%, transparent);}
.tl-hr span{position:absolute; left:-56px; top:-8px; width:48px; text-align:right; padding-right:10px;
  font-size:11px; font-weight:650; color:var(--ink3); font-variant-numeric:tabular-nums;}
.tl-body{position:absolute; left:56px; right:0; top:0; bottom:0;}
/* Tages-Blöcke: gleicher Look wie die Wochen-Blöcke (leichte Tönung + linker Farbstreifen),
   nur größer. Titel darf auf 2 Zeilen umbrechen -> auch schmale (überlappende) Stunden lesbar. */
.tl-b{position:absolute; border-radius:10px; padding:6px 10px; overflow:hidden; line-height:1.18;
  background:color-mix(in srgb, var(--bc) 26%, var(--panel));
  border-left:4px solid var(--bc);
  box-shadow:0 2px 7px rgba(38,34,27,.12); cursor:default;}
/* wie bei .wg-b: schlägt die generische `.lesson{background:var(--bg)}`-Altregel */
.tl-b.lesson{background:color-mix(in srgb, var(--bc) 26%, var(--panel));}
.tl-b.event{cursor:pointer;}
.tl-b b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:13.5px;
  font-weight:700; color:var(--ink); overflow:hidden;}
.tl-b small{display:block; font-size:11.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tl-b.narrow{padding:5px 7px;}
.tl-b.narrow b{font-size:12px; -webkit-line-clamp:3;}
.tl-b.narrow small{display:none;}          /* schmal (überlappend) -> Raum/Zeit weg, Fach bleibt lesbar */
.tl-b.exam{background:color-mix(in srgb, var(--bc) 30%, var(--panel)); border-left-width:5px;}
:root[data-theme="dark"] .tl-b{background:color-mix(in srgb, var(--bc) 22%, var(--panel));}
:root[data-theme="dark"] .tl-b.exam{background:color-mix(in srgb, var(--bc) 38%, var(--panel));}
.tl-tag{display:inline-block; background:var(--bc); color:#fff; font-size:10px; font-weight:750;
  letter-spacing:.04em; text-transform:uppercase; padding:1px 7px; border-radius:20px; vertical-align:middle; margin-left:4px;}
.tl-tag.chg{background:var(--bronze);} .tl-tag.ent{background:var(--danger);}
.tl-b.cancelled{opacity:.6;}
.tl-b.cancelled b{text-decoration:line-through; color:var(--ink3);}
/* Vertretung/Änderung: bronzefarbene Kante + Ton, klar vom normalen Block unterscheidbar */
.tl-b.aenderung{border-left:5px solid var(--bronze); background:color-mix(in srgb, var(--bronze) 12%, var(--panel));}
:root[data-theme="dark"] .tl-b.aenderung{background:color-mix(in srgb, var(--bronze) 26%, var(--panel));}
.tl-now{position:absolute; left:-4px; right:0; height:2px; background:#c0392b; z-index:3;}
.tl-now::before{content:''; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#c0392b;}

/* ===== Wochen-Zeitraster (7 Spalten, gemeinsame Zeitachse — Look wie Tagesansicht) ===== */
.wg{margin-top:6px; max-width:1100px;}
.wg-head,.wg-allday{display:grid; grid-template-columns:52px repeat(7,1fr);}
.wg-dh{display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px 8px; border-radius:11px 11px 0 0;}
.wg-dh .wd{font-size:11px; font-weight:650; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em;}
.wg-dh .wn{font-size:17px; font-weight:700; color:var(--ink); font-family:var(--serif);}
.wg-dh.today{background:var(--bronzesoft);}
.wg-dh.today .wn{color:var(--bronze2);}
.wg-allday{margin-bottom:3px;}
.wg-allcell{padding:1px 3px; display:grid; gap:2px; align-content:start; min-height:8px;}
.wg-all{font-size:10.5px; font-weight:650; color:#fff; background:var(--bc); border-radius:6px; padding:2px 6px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wg-body{position:relative;}
.wg-hrs{position:absolute; inset:0; pointer-events:none;}
.wg-hr{position:absolute; left:52px; right:0; height:0; border-top:1px solid color-mix(in srgb, var(--line2) 50%, transparent);}
.wg-hr span{position:absolute; left:-52px; top:-8px; width:44px; text-align:right; padding-right:8px; font-size:10.5px; font-weight:650; color:var(--ink3); font-variant-numeric:tabular-nums;}
.wg-cols{position:absolute; left:52px; right:0; top:0; bottom:0; display:grid; grid-template-columns:repeat(7,1fr);}
.wg-col{position:relative; border-left:1px solid color-mix(in srgb, var(--line2) 38%, transparent);}
.wg-col.today{background:color-mix(in srgb, var(--bronze) 6%, transparent);}
.wg-col:last-child{border-right:1px solid color-mix(in srgb, var(--line2) 38%, transparent);}
/* Fächer klar in ihrer Farbe (vorher nur 15% = blass, Fächer kaum unterscheidbar) */
.wg-b{position:absolute; border-radius:8px; padding:3px 7px; overflow:hidden; line-height:1.15;
  background:color-mix(in srgb, var(--bc) 30%, var(--panel));
  border-left:3px solid var(--bc); box-shadow:0 2px 6px rgba(38,34,27,.12); cursor:default;}
/* WICHTIG: die generische Alt-Regel `.lesson{background:var(--bg)}` (weiter unten) hat DIESELBE
   Spezifität wie `.wg-b` und steht SPÄTER -> sie überschrieb die Fachfarbe. Nur Vertretung/
   Prüfung (0,2,0) blieben bunt. Darum hier explizit mit höherer Spezifität. Muss VOR
   .wg-b.exam/.aenderung stehen, damit die weiterhin gewinnen. */
.wg-b.lesson{background:color-mix(in srgb, var(--bc) 30%, var(--panel));}
.wg-b.event{cursor:pointer;}
.wg-b b{display:block; font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wg-b small{font-size:10px; color:var(--ink2);}
.wg-b.exam{background:color-mix(in srgb, var(--bc) 34%, var(--panel));}
.wg-b.cancelled{opacity:.5;}
.wg-b.cancelled b{text-decoration:line-through; color:var(--ink3);}
.wg-b.aenderung{border-left:4px solid var(--bronze); background:color-mix(in srgb, var(--bronze) 14%, var(--panel));}
:root[data-theme="dark"] .wg-b.aenderung{background:color-mix(in srgb, var(--bronze) 30%, var(--panel));}
.wg-b.narrow{padding:2px 4px;}
.wg-b.narrow small{display:none;}
.wg-b.narrow b{font-size:11px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
/* Wochenende: „frei" + dezent abgesetzte Spalte */
.wg-col.wknd{background:color-mix(in srgb, var(--line) 12%, transparent);}
.wg-dh.wknd .wd{color:var(--bronze2);}
.wg-free{position:absolute; top:10px; left:0; right:0; text-align:center; font-size:11.5px;
  font-weight:650; color:var(--ink3); letter-spacing:.08em; pointer-events:none;}

/* ===== Phase 2: Stunden-Sheet + Hausaufgaben-Dialog ===== */
.tl-b.lesson, .wg-b.lesson{cursor:pointer;}
/* Stunden-Sheet: farbiger Fach-Banner + Kontext-Chips + Aktions-Karten */
.lsheet-banner{margin:-4px -4px 16px; padding:18px 18px 16px; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb,var(--bc) 30%, var(--panel)), color-mix(in srgb,var(--bc) 14%, var(--panel)));
  border-left:5px solid var(--bc);}
.lsheet-fach{font:600 24px/1.1 var(--serif); color:var(--ink);}
.lsheet-meta{font-size:13px; color:var(--ink2); margin-top:3px;}
.lsheet-ctx{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px;}
.ls-chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650; color:var(--ink2);
  background:var(--panel); border:1px solid var(--line2); border-radius:20px; padding:4px 10px;}
.ls-chip .ic{width:13px; height:13px;}
.ls-chip-exam{color:var(--bronze2); border-color:var(--bronzeline);}
.lact{display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px 14px; margin-bottom:10px;
  background:var(--panel); border:1px solid var(--line2); border-radius:16px; transition:transform .12s, box-shadow .12s, border-color .12s;}
.lact:hover{transform:translateY(-1px); box-shadow:var(--card-shadow); border-color:var(--bronzeline);}
.lact-ic{width:42px; height:42px; border-radius:12px; background:var(--bronze-grad); color:#fffdf7;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.lact-ic-exam{background:linear-gradient(180deg,#8d6a34,#5f4620);}
.lact-ic-book{background:linear-gradient(180deg,#6e5636,#4a3820);}
.lact-ic .ic{width:20px; height:20px;}
.lact-t{flex:1; min-width:0;}
.lact-t b{display:block; font-size:15px; color:var(--ink);}
.lact-t small{font-size:12px; color:var(--ink3);}
.lact .fy-go{width:17px; height:17px; color:var(--ink3); flex:0 0 auto;}
.lsheet-close{display:block; width:100%; text-align:center; padding:11px; margin-top:4px; border-radius:14px;
  background:transparent; color:var(--ink3); font-weight:600; font-size:14px;}
.lsheet-close:hover{background:var(--line);}
.fld{display:block; margin-bottom:12px;}
.fld > span{display:block; font-size:12.5px; font-weight:600; color:var(--ink2); margin-bottom:5px;}
.fld input, .fld select{width:100%; box-sizing:border-box; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line2); background:var(--paper); color:var(--ink); font:inherit;}
.fld input:focus, .fld select:focus{outline:none; border-color:var(--bronze);}
.hw-linkbtn{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:11px 13px;
  border-radius:12px; border:1.5px dashed var(--bronzeline); background:var(--bronzesoft); color:var(--ink);
  font:inherit; font-weight:600;}
.hw-linkbtn .ic{width:18px; height:18px; color:var(--bronze2); flex:0 0 auto;}
.hw-nextbtn{display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:8px 12px; border-radius:11px;
  background:var(--bronzesoft); color:var(--bronze2); border:1px solid var(--bronzeline); font:inherit; font-size:13px; font-weight:600;}
.hw-nextbtn .ic{width:15px; height:15px;}
.hw-nextbtn:active{filter:brightness(.96);}
/* Event-Formular: kleine Labels über Datum/Uhrzeit */
.ev-lbl{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:var(--ink2);}
.ev-lbl small{font-weight:500; opacity:.6;}
.ev-time-lbl{margin-top:4px;}

/* ===== Heft/Seite-Wähler: Draw von unten ===== */
.botsheet{position:fixed; inset:0; z-index:140; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(38,34,27,.42); opacity:0; pointer-events:none; transition:opacity .25s;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);}
.botsheet.on{opacity:1; pointer-events:auto;}
.hwp-card{width:min(720px,100%); max-height:82vh; overflow-y:auto; background:var(--bg);
  border-radius:24px 24px 0 0; padding:10px 20px 26px; box-shadow:0 -8px 40px rgba(38,34,27,.3);
  transform:translateY(100%); transition:transform .3s var(--spring);}
.botsheet.on .hwp-card{transform:none;}
.hwp-grip{width:44px; height:5px; border-radius:3px; background:var(--line2); margin:2px auto 12px;}
.hwp-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.hwp-head b{flex:1; text-align:center; font:500 19px var(--serif); color:var(--ink);}
.hwp-back-sp{width:34px; flex:0 0 auto;}
.hwp-books{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;}
/* Heft-Wähler als echtes Mini-Regal (Buchrücken wie auf der Startseite) */
.hwp-shelf{display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 8px;
  padding:22px 16px 10px; border-radius:12px;
  background-color:#2c1d0f;
  background-image:linear-gradient(180deg,rgba(255,220,170,.1),transparent 14%,transparent 82%,rgba(0,0,0,.3)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 3px,transparent 3px 12px);
  box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 10px 26px rgba(0,0,0,.4) inset;}
.hwp-shelf .book{margin-bottom:0;}
.hwp-book{display:flex; align-items:center; gap:12px; text-align:left; padding:12px 14px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line2); transition:transform .12s, box-shadow .12s;}
.hwp-book:hover{transform:translateY(-2px); box-shadow:var(--card-shadow);}
.hwp-spine{width:12px; height:42px; border-radius:2px 4px 4px 2px; flex:0 0 auto;
  background:var(--sp,#6e2b2b); box-shadow:inset -2px 0 3px rgba(0,0,0,.25);}
.hwp-bt b{display:block; font-size:15px; color:var(--ink); font-family:var(--serif);}
.hwp-bt small{font-size:12px; color:var(--ink3);}
.hwp-whole{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px;
  border-radius:14px; margin-bottom:16px; background:var(--bronzesoft); color:var(--bronze2); font-weight:650;
  border:1px solid var(--bronzeline);}
.hwp-whole .ic{width:18px; height:18px;}
.hwp-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));}
.hwp-pageitem{cursor:pointer;}
.hwp-pcap{display:block; text-align:center; font-family:'Caveat',cursive; font-size:14px; color:var(--ink3); padding-top:5px;}

/* ===== Lernraum-Gerüst ===== */
.prep-hd{display:flex; align-items:center; gap:13px; margin-bottom:6px;}
.prep-hd h2{margin:0; font:500 23px var(--serif);}
.prep-hd small{color:var(--ink3); font-size:13px;}
.prep-count{font:600 15px var(--serif); color:var(--bronze2); margin-bottom:6px;}
.prep-nb{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; margin-bottom:9px;
  border-radius:14px; background:var(--panel); border:1px solid var(--line2);}
.prep-nb:hover{border-color:var(--bronzeline);}
.prep-nb > .ic{color:var(--bronze2); flex:0 0 auto;}
.prep-nbt{flex:1;}
.prep-nbt b{display:block; font-size:14.5px;}
.prep-nbt small{font-size:12px; color:var(--ink3);}
.prep-soon{margin-top:12px; padding:12px 14px; border-radius:14px; background:var(--bronzesoft);
  color:var(--ink2); font-size:13px; line-height:1.5;}
.fy-ic-prep{background:transparent !important; box-shadow:none !important;}
.fy-ic-prep .orb-s{width:30px; height:30px;}
.wg-now{position:absolute; left:0; right:0; height:2px; background:#c0392b; z-index:3;}
.wg-now::before{content:''; position:absolute; left:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:#c0392b;}
:root[data-theme="dark"] .wg-b{background:color-mix(in srgb, var(--bc) 28%, var(--panel));}

/* ===== Performance (v7.7) ===== */
/* Waehrend des Zeichnens die teuren Milchglas-Kompositionen AUS: auf iOS-WebView
   saettigt backdrop-filter den Compositor/Haupt-Thread -> Pointer-Events kommen zu
   spaet -> beim schnellen Schreiben fallen Striche weg. Nur waehrend des Strichs. */
body.draw-perf .glass, body.draw-perf .glass-strong, body.draw-perf .glass-card,
body.draw-perf .btn-ghost, body.draw-perf [class*="glass"]{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* ===== Sparsam-Modus (perf-lite): KEIN Live-Weichzeichner =====
   Auf iOS-WebView ist backdrop-filter der Haupt-Grund fuer weisse Kacheln + Ruckeln beim
   Scrollen. Im Sparsam-Modus ersetzen wir den Live-Blur durch ein etwas opakeres,
   statisches Milchglas: sieht fast identisch aus, scrollt aber fluessig. Aktiviert per
   .perf-lite auf <html> (Auto: iPad/native App; per Einstellung ueberschreibbar). */
html.perf-lite{ --glass:rgba(255,252,244,.92); --glass-strong:rgba(255,252,244,.97); }
:root[data-theme="dark"].perf-lite{ --glass:rgba(44,38,28,.94); --glass-strong:rgba(44,38,28,.98); }
html.perf-lite *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* Ausnahme: statische Overlays (Dialoge/Draws) DÜRFEN den Hintergrund verschwimmen —
   sie liegen über allem, nichts scrollt dahinter -> kein iOS-Kachel-Problem. */
html.perf-lite #modal, html.perf-lite #pagesheet, html.perf-lite .botsheet{
  -webkit-backdrop-filter:blur(7px) !important; backdrop-filter:blur(7px) !important; }
/* Fixierter Vollbild-Verlauf MIT Live-Blur (body::before) hinter dem Scroll-Inhalt AUS:
   auf iOS-WebView der Haupt-Grund fuer die dicken weissen Kacheln beim Scrollen. body
   bleibt --bg (warmes Elfenbein) -> kein Weiss, nur der feine Lichtverlauf entfaellt. */
html.perf-lite body::before{ display:none !important; }
/* Orb-Puls billiger: statt teurer box-shadow-Blur-Animation (pro Frame neu gerechnet)
   eine GPU-guenstige Scale-Atmung + statischer Glow. */
html.perf-lite .orb-s, html.perf-lite .orb, html.perf-lite .jorb-btn{
  animation:orbBreath 3.4s ease-in-out infinite !important;
  box-shadow:0 0 10px rgba(90,108,240,.35) !important;
}
html.perf-lite .jorb-btn.think, html.perf-lite .orb.think{ animation-duration:1.1s !important; }
@keyframes orbBreath{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
/* Buecherregal = teuerste Malflaeche -> im Sparsam-Modus billiger rastern, damit beim
   Scrollen keine leeren Kacheln mehr aufblitzen. Eigener Compositing-Layer (einmal malen,
   dann nur verschieben) + feine Holzmaserung (2 Wiederhol-Verlaeufe) und grosse Weich-
   schatten weg. Farbe, Bretter, Buchruecken, Neigung, Schild bleiben. */
html.perf-lite .bookcase{
  transform:translateZ(0); -webkit-transform:translateZ(0);
  background-image:linear-gradient(180deg,rgba(255,220,170,.12),transparent 14%,transparent 82%,rgba(0,0,0,.26));
  box-shadow:0 3px 8px rgba(38,34,27,.18), 0 8px 18px rgba(38,34,27,.24);
}
html.perf-lite .bc-inner{ box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 4px 10px rgba(0,0,0,.4) inset; }
html.perf-lite .book{ box-shadow:0 2px 3px rgba(0,0,0,.35); }
html.perf-lite .shelf-board{
  box-shadow:0 2px 3px rgba(255,224,180,.22) inset, 0 6px 8px rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.4);
}
/* (Zurueckgerollt: Buecher-Geradestellen + leichtere Home-Schatten brachten keine
   messbare Perf, kosteten aber das Neigungs-Design -> iPad sieht wieder aus wie der PC.) */
/* ZURUECKGEROLLT: Dokument-Scroll (html/body/#app height:auto + .view overflow:visible
   + sticky topbar) funktioniert im normalen Browser, ZERSCHIESST aber WKWebView auf dem
   iPad (Kopfleiste wandert, Taps tot, unten abgeschnitten). Daher bleibt der innere
   .view-Scroll. Weiss-Blitze auf schwacher Hardware bleiben ein WebView-Limit -> echter
   Weg = Phase 1 (lokale Buendelung) statt Layout-Tricks. */

/* Wochenansicht + Stundenplan */
.week-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:start;}
.wk-day{border-radius:16px; background:var(--panel); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(38,34,27,.03); padding:8px; min-height:220px;
  display:flex; flex-direction:column; gap:5px;}
.wk-day.today{outline:2px solid var(--bronzeline); outline-offset:1px;}
.wk-head{display:flex; align-items:baseline; gap:7px; padding:2px 4px 6px; width:100%; text-align:left;}
.wk-head .wd{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink3);}
.wk-head .wn{font:600 19px/1 var(--serif);}
.wk-day.today .wk-head .wn{color:var(--bronze2);}
.lesson{display:flex; align-items:baseline; gap:6px; font-size:11.5px; padding:4px 6px;
  border-radius:8px; background:var(--bg);}
.lesson .lt{color:var(--ink3); font-variant-numeric:tabular-nums; flex:0 0 auto; font-size:10.5px;}
.lesson .lf{font-weight:650; flex:1; min-width:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.lesson .lr{color:var(--ink3); font-size:10.5px;}
.lesson.entfaellt{opacity:.55;}
.lesson.entfaellt .lf{text-decoration:line-through; color:var(--danger);}
.lesson.aenderung{background:var(--bronzesoft);}
.lesson.aenderung .lf{color:var(--bronze2);}
.wk-load{color:var(--ink3); font-size:11px; font-style:italic; font-family:var(--serif); padding:4px 6px;}
.wk-ev{display:block; width:100%; text-align:left; padding:6px 8px; border-radius:9px;
  border-left:3px solid var(--bronze); background:var(--bg); font-size:11.5px;}
.wk-ev b{display:block; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wk-ev small{color:var(--ink3); font-size:10px;}
.wk-add{margin-top:auto; align-self:center; width:28px; height:28px; border-radius:9px;
  color:var(--ink3); display:flex; align-items:center; justify-content:center; opacity:.6;}
.wk-add .ic{width:14px; height:14px;}
.wk-note{color:var(--ink3); font-size:12px; font-style:italic; font-family:var(--serif);
  margin-top:14px;}
@media (max-width:900px){
  .week-grid{grid-template-columns:repeat(2,1fr);}
}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-dow{text-align:center; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3); padding:4px 0 8px;}
.cal-day{min-height:86px; border-radius:14px; background:var(--panel); border:1px solid var(--line);
  padding:7px 8px; text-align:left; display:flex; flex-direction:column; gap:3px;
  box-shadow:0 1px 2px rgba(38,34,27,.03); transition:transform .15s var(--spring), box-shadow .15s;
  overflow:hidden;}
.cal-day:hover{transform:translateY(-2px); box-shadow:var(--card-shadow);}
.cal-day.other{opacity:.38; background:transparent; box-shadow:none;}
.cal-day.wknd{background:color-mix(in srgb, var(--line) 20%, var(--panel));}
.cal-day.other.wknd{background:transparent;}
.cal-day .dnum{font-size:12.5px; font-weight:650; color:var(--ink2);}
.cal-day.today .dnum{width:22px; height:22px; border-radius:50%; background:var(--bronze);
  color:#fffdf7; display:flex; align-items:center; justify-content:center;}
.cal-ev{font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:6px; color:#fffdf7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.cal-more{font-size:10px; color:var(--ink3); font-weight:650;}
.cal-side{flex:0 1 320px; min-width:260px; align-self:flex-start;}
.cal-side h3{font:500 19px/1.2 var(--serif); margin:4px 0 12px;}
.uev{display:flex; gap:11px; align-items:center; width:100%; text-align:left; padding:11px 12px;
  border-radius:14px; background:var(--panel); border:1px solid var(--line); margin-bottom:8px;
  box-shadow:0 1px 2px rgba(38,34,27,.04);}
.uev .ud{flex:0 0 auto; width:44px; text-align:center;}
.uev .ud b{display:block; font:600 19px/1 var(--serif);}
.uev .ud small{display:block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3); margin-top:2px;}
.uev .ut{flex:1; min-width:0;}
.uev .ut b{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.uev .ut small{display:block; font-size:11.5px; color:var(--ink3);}
.uev .dot{width:10px; height:10px; border-radius:4px; flex:0 0 auto;}
.evkind{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:2px 7px; border-radius:6px; background:var(--bronzesoft);
  color:var(--bronze2);}

/* Zwei-Monats-Ansicht — füllt den Rest der Höhe unter der Kopfzeile */
.cal-two{flex:1 1 auto; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:26px; align-items:stretch;}
.cal-month{display:flex; flex-direction:column; min-height:0;}
.cal-mtitle{font:500 18px/1.2 var(--serif); margin:0 0 8px 2px; color:var(--ink2); flex:0 0 auto;}
/* Wochentags-Kopfzeile — eigenes 7-Spalten-Raster, feste (kleine) Höhe */
.cal-dows{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; flex:0 0 auto;}
/* Tage-Raster füllt die restliche Höhe; jede Wochenreihe teilt sich den Platz
   gleichmäßig (grid-auto-rows:1fr) → große, klickfreundliche Tagesfelder. */
.cal-grid.mini{flex:1 1 auto; gap:5px; grid-auto-rows:1fr;}
.cal-dow{text-align:center; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3); padding:2px 0 4px;}
.cal-grid.mini .cal-day{min-height:56px; padding:6px 7px; border-radius:11px; gap:2px;}
.cal-grid.mini .cal-day .dnum{font-size:11.5px;}
.cal-grid.mini .cal-day.today .dnum{width:19px; height:19px;}
.cal-grid.mini .cal-ev{font-size:9px; padding:1px 4px; border-radius:4px;}
@media (max-width:1100px){ .cal-two{grid-template-columns:1fr;} }

/* Termin-Modal: Liste + Formular */
.ev-list{display:flex; flex-direction:column; gap:7px; margin:4px 0 14px;
  max-height:38vh; overflow-y:auto;}
.ev-row{display:flex; align-items:stretch; gap:8px;}
.ev-row .dot{width:9px; border-radius:5px; flex:0 0 auto; margin:2px 0;}
.ev-open{flex:1; min-width:0; text-align:left; padding:9px 11px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:3px;}
.ev-row.editing .ev-open{border-color:var(--bronze); background:var(--bronzesoft);}
.ev-open .ev-t{font-size:11px; font-weight:700; color:var(--bronze2); font-variant-numeric:tabular-nums;}
.ev-open .ev-ti{font-size:14px; font-weight:600;}
.ev-open .ev-note{font-size:12px; color:var(--ink3); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
/* Termin ANSEHEN ist Standard -> .ev-open ist nur noch Anzeige (div), Aktionen sind die
   beiden Icon-Knöpfe rechts: Stift (bearbeiten) + Mülleimer (löschen). */
.ev-row.focus .ev-open{border-color:var(--bronze); box-shadow:0 0 0 3px rgba(201,162,94,.22);}
.ev-ed,.ev-del{flex:0 0 auto; width:38px; border-radius:12px; color:var(--ink3); background:var(--panel);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.ev-ed:hover{color:var(--bronze2); border-color:var(--bronze);}
.ev-del:hover{color:var(--danger); border-color:var(--danger);}
.ev-ed .ic,.ev-del .ic{width:16px; height:16px;}
.ev-empty{color:var(--ink3); text-align:center; padding:22px 10px; font:italic 400 15px/1.5 var(--serif);}
.ev-form{border-top:1px solid var(--line); padding-top:12px;}
.ev-form-h{font:500 15px/1 var(--serif); color:var(--ink2); margin-bottom:9px;}
.ev-2{display:grid; grid-template-columns:1fr 130px; gap:8px; align-items:end;}
.ev-lbl select, .ev-lbl input{margin-bottom:0;}
.ev-lbl select{width:100%;}
.ev-form textarea{width:100%; resize:vertical; font:inherit; font-size:14px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  margin-top:8px;}

/* ================= Noten ================= */
.gr-top{display:flex; gap:16px; align-items:stretch; flex-wrap:wrap; margin-bottom:24px;}
.gr-total{flex:0 0 auto; min-width:210px; border-radius:18px; padding:18px 22px;
  background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);}
.gr-total .k{font-size:11.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronze);}
.gr-total .v{font:500 46px/1.05 var(--serif); margin-top:4px;}
.gr-total small{color:var(--ink3); font-size:12px;}
.gr-coach{flex:1 1 380px; border-radius:18px; padding:16px 18px; background:var(--glass);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); position:relative;}
.gr-coach .ch{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.gr-coach .ch b{font:500 17px/1.2 var(--serif); flex:1;}
.gr-coach .ctext{font-size:13.5px; line-height:1.55; color:var(--mid); white-space:pre-wrap;}
.gr-coach .cbtn{padding:8px 14px; border-radius:99px; background:var(--bronze-grad); color:#fffdf7;
  font-size:12.5px; font-weight:650; box-shadow:0 3px 10px rgba(141,106,52,.3);}
/* ===== Strukturierte KI-Einschätzung (statt Textblock) ===== */
.co-res{white-space:normal; display:flex; flex-direction:column; gap:12px;}   /* .ctext ist pre-wrap */
.co-lage{margin:0; font:500 14.5px/1.5 var(--serif); color:var(--ink);}
.co-lbl{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze);}
.co-subs{display:flex; flex-direction:column; gap:6px;}
.co-sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 10px; border-radius:10px;
  background:color-mix(in srgb, var(--bc) 12%, var(--panel)); border-left:3px solid var(--bc);}
.co-f{font-size:13px; font-weight:700; color:var(--ink);}
.co-avg{font:700 13px var(--serif); font-variant-numeric:tabular-nums; margin-right:auto;}
.co-avg.good{color:#2f7d4f;} .co-avg.mid{color:var(--bronze2);} .co-avg.bad{color:var(--danger);}
.co-badge{font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; background:rgba(38,34,27,.08); color:var(--ink2);}
.st-sicher .co-badge{background:rgba(47,125,79,.16); color:#2f7d4f;}
.st-wackelig .co-badge{background:var(--bronzesoft); color:var(--bronze2);}
.st-gefaehrdet .co-badge{background:rgba(178,59,59,.16); color:var(--danger);}
.co-hint{flex:1 1 100%; font-size:11.5px; line-height:1.4; color:var(--ink3);}
.co-trend{margin:0; font-size:12.5px; line-height:1.5; color:var(--ink2);}
.co-trend .co-lbl{margin-right:5px;}
.co-steps{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.co-step{display:flex; align-items:flex-start; gap:9px;}
.co-n{flex:0 0 auto; width:19px; height:19px; border-radius:50%; background:var(--bronze);
  color:#fffdf7; font:800 11px/19px system-ui,sans-serif; text-align:center;}
.co-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.co-body b{font-size:13px; font-weight:650; color:var(--ink);}
.co-body small{font-size:11.5px; line-height:1.4; color:var(--ink3);}
.co-tag{flex:0 0 auto; font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px;
  background:color-mix(in srgb, var(--bc) 20%, var(--panel)); color:var(--ink2); white-space:nowrap;}
.gsub{border-radius:20px; background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--card-shadow); padding:14px 18px; margin-bottom:14px;}
.gsub-head{display:flex; align-items:center; gap:14px;}
.gbig{flex:0 0 auto; min-width:78px; text-align:left;
  font:600 40px/1 var(--serif); letter-spacing:-.02em; color:var(--ink);}
.gbig.good{color:#3e7d68;}
.gbig.mid{color:var(--bronze2);}
.gbig.bad{color:var(--danger);}
.gmeta{min-width:0;}
.gmeta .gname{display:block; font:500 21px/1.2 var(--serif);}
.gmeta small{display:block; color:var(--ink3); font-size:12.5px; margin-top:2px;}
.gsub-head .spacer{flex:1;}
.gsub-head .gadd{display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:12px;
  color:var(--bronze2); background:var(--bronzesoft); font-size:13px; font-weight:650; flex:0 0 auto;}
.gsub-head .gadd .ic{width:15px; height:15px;}
.gchips{display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; margin-top:12px;
  padding-bottom:4px; scrollbar-width:thin;}
.gchips .gchip{flex:0 0 auto;}
.gchip{display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:11px;
  background:var(--bg); border:1px solid var(--line); font-size:12.5px; font-weight:600;}
.gchip .gv{font-weight:750; font-size:14px;}
.gchip .gv.good{color:#3e7d68;} .gchip .gv.mid{color:var(--bronze2);} .gchip .gv.bad{color:var(--danger);}
.gchip small{color:var(--ink3); font-weight:500;}
.gchip .gw{font-size:10.5px; font-weight:700; color:var(--ink3); background:rgba(38,34,27,.06);
  border-radius:5px; padding:1px 5px;}

/* ---- Noten-Redesign: Gesamt-Reihe, Fach-Karten, Was-wäre-wenn ---- */
.gr2{display:grid; grid-template-columns:262px 1fr; gap:16px; align-items:stretch; margin-bottom:18px;}
@media(max-width:760px){.gr2{grid-template-columns:1fr;}}
.gr-total .v-row{display:flex; align-items:baseline; gap:12px; margin-top:2px;}
.gr-total .v.good{color:#3e7d68;} .gr-total .v.mid{color:var(--bronze2);} .gr-total .v.bad{color:var(--danger);}
.gdelta{font-size:14px; font-weight:750;}
.gdelta.up{color:#2f7d4f;} .gdelta.down{color:var(--danger);}
.gr-total-spark{margin:8px 0 6px;}
.gr-total-spark .spark, .gr-total-spark svg{width:100%; height:34px; display:block;}

.gcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px; margin-bottom:18px;}
.gcard{border-radius:18px; background:var(--panel); border:1px solid var(--line2);
  box-shadow:var(--card-shadow); padding:15px 16px;}
.gcard-h{display:flex; align-items:center; gap:9px;}
.gcard-dot{width:11px; height:11px; border-radius:50%; flex:0 0 auto;}
.gcard-n{font:500 18px/1.2 var(--serif); flex:1; min-width:0;}
.gcard-v{font:600 27px/1 var(--serif); letter-spacing:-.02em; color:var(--ink);}
.gcard-v.good{color:#3e7d68;} .gcard-v.mid{color:var(--bronze2);} .gcard-v.bad{color:var(--danger);}
.gcard-spark{height:38px; margin:10px 0 12px;}
.gcard-spark .spark, .gcard-spark svg{width:100%; height:38px; display:block;}
.gcard-flat{display:block; height:38px; border-bottom:1.5px dashed var(--line2);}
.gcard-chips{display:flex; gap:7px; flex-wrap:wrap;}
.gchip.add{padding:6px 12px; border-style:dashed; color:var(--ink3); font-weight:650; font-size:12.5px; cursor:pointer;}
.gchip.add:hover{color:var(--bronze2); border-color:var(--bronze);}
.gcard.empty{border-style:dashed;}
.gcard.empty .gcard-spark{opacity:.5;}
.gcard.addsub{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:150px; border:1.5px dashed var(--line); background:transparent; color:var(--ink3);
  cursor:pointer; box-shadow:none; transition:border-color .15s, color .15s;}
.gcard.addsub:hover{border-color:var(--bronze); color:var(--bronze2);}
.addsub-plus{font-size:26px; font-weight:300; line-height:1;}
.addsub-t{font:500 16px/1 var(--serif);}

.simcard{border-radius:18px; background:var(--panel); border:1px solid var(--line2);
  box-shadow:var(--card-shadow); padding:16px 18px; margin:16px 0 24px;}
.sim-h{display:flex; align-items:center; gap:9px; margin-bottom:14px;}
.sim-ico{color:var(--bronze2); font-size:17px;}
.sim-h b{font:500 17px/1.2 var(--serif);}
.sim-h small{color:var(--ink3); font-size:12.5px; margin-left:2px;}
.sim-body{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.sim-ctl{display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0;}
.sim-ctl select{background:var(--bg); border:1.5px solid var(--line2); border-radius:10px; padding:8px 10px;
  font-size:14px; font-weight:600; color:var(--ink); -webkit-appearance:none;}
.sim-lbl{color:var(--ink2); font-size:13.5px; white-space:nowrap;}
.sim-ctl input[type=range]{flex:0 1 260px; width:260px; max-width:42vw; min-width:120px; accent-color:var(--bronze); height:6px;}
.sim-valout{font:600 18px/1 var(--serif); color:var(--ink); min-width:26px; text-align:center;}
.sim-out{display:flex; gap:26px;}
.sim-col{display:flex; flex-direction:column; gap:2px;}
.sim-k{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3);}
.sim-v{font:500 18px/1.1 var(--serif); color:var(--ink2);}
.sim-v b{font-weight:700;}
.sim-v b.good{color:#3e7d68;} .sim-v b.mid{color:var(--bronze2);} .sim-v b.bad{color:var(--danger);}
.sim-arrow{color:var(--ink3); margin:0 2px;}

/* ================= Editor ================= */
#editor{position:fixed; inset:0; background:var(--bg); display:none; z-index:50;
  padding-top:var(--sat);}
#editor.on{display:block;}
#editor::before{content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(46% 36% at 12% 4%, rgba(198,158,94,.13), transparent 70%),
             radial-gradient(40% 32% at 90% 96%, rgba(255,226,178,.16), transparent 72%);}
.etop{position:absolute; top:calc(16px + var(--sat)); left:20px; z-index:20;
  display:flex; align-items:center; gap:10px;}
.back-fab{width:44px; height:44px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; color:var(--ink2); flex:0 0 auto;}
.ctx-pill{display:flex; align-items:baseline; gap:8px; padding:11px 16px; border-radius:16px;}
.ctx-name{font:500 16px/1 var(--serif); color:var(--ink);}
.ctx-sub{font-size:12px; color:var(--ink3); font-weight:600;}
.pagespill{position:absolute; top:calc(16px + var(--sat)); right:20px; z-index:20;
  display:flex; align-items:center; gap:2px; padding:6px 8px; border-radius:16px;
  max-width:calc(100vw - 40px); overflow-x:auto; scrollbar-width:none;}
.pagespill::-webkit-scrollbar{display:none;}
.pp-btn{width:36px; height:36px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; color:var(--ink2); flex:0 0 auto;}
.pp-btn:hover{background:rgba(38,34,27,.05);}
.pp-btn .ic{width:17px; height:17px;}
.pp-info{padding:0 8px; font-size:13px; font-weight:650; color:var(--mid);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.pp-sep{width:1px; height:20px; background:var(--line2); margin:0 4px; flex:0 0 auto;}

#ewrap{position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; z-index:5;
  padding:76px 12px calc(100px + var(--sab));}
#sheet{position:relative; background:var(--paper); border-radius:4px; margin:0 auto;
  box-shadow:0 2px 8px rgba(38,34,27,.1), 0 30px 80px rgba(38,34,27,.22);
  transform-origin:0 0;}
#bg,#ink,#live{position:absolute; inset:0; width:100%; height:100%;}
/* Ohne touch-action:none haelt iPadOS beim Aufsetzen erst die Pointer-Events zurueck,
   bis klar ist, dass keine Scroll-/Zoom-Geste kommt — und schickt im Zweifel
   pointercancel. Genau daher kamen die verschluckten Striche und die Verzoegerung
   beim Schreiben. Pan (1 Finger) und Pinch (2 Finger) macht der Editor selbst in JS,
   native Gesten braucht die Zeichenflaeche also nicht. */
#live{touch-action:none;}
#overlay{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
#selbox{position:absolute; border:1.5px dashed var(--bronze); background:rgba(161,121,63,.05);
  border-radius:6px; pointer-events:auto; touch-action:none; z-index:5;}

/* ===== Ausfuellen-Vorschau: nummerierte Kaesten vor dem Schreiben ===== */
#fillpreview{position:absolute; inset:0; overflow:visible; z-index:9; pointer-events:none;}
.fpv-box{position:absolute; box-sizing:border-box; pointer-events:auto; touch-action:none;
  border:2px solid var(--fpv,#2b6ae0); border-radius:7px; background:var(--fpvbg,rgba(43,106,224,.10));
  cursor:move; display:flex; align-items:center; min-width:20px; min-height:15px;
  box-shadow:0 1px 5px rgba(38,34,27,.14); animation:fpvpop .18s ease both;}
@keyframes fpvpop{from{opacity:0; transform:scale(.9)}to{opacity:1; transform:scale(1)}}
.fpv-box.t-line{--fpv:#2b6ae0; --fpvbg:rgba(43,106,224,.09);}
.fpv-box.t-checkbox{--fpv:#1a9b57; --fpvbg:rgba(26,155,87,.12);}
.fpv-box.t-box{--fpv:#d98420; --fpvbg:rgba(217,132,32,.11);}
.fpv-box.t-grid{--fpv:#8b4fc0; --fpvbg:rgba(139,79,192,.11);}
.fpv-box.t-mark{--fpv:#b8860b; --fpvbg:rgba(242,208,36,.28);}
.fpv-box.t-strike{--fpv:#c0392b; --fpvbg:rgba(192,57,43,.10);}
.fpv-box.t-circle{--fpv:#0f8a8a; --fpvbg:rgba(15,138,138,.10);}
.fpv-box.t-circle{border-radius:50%;}
.fpv-n{position:absolute; top:-9px; left:-9px; min-width:17px; height:17px; padding:0 3px;
  background:var(--fpv); color:#fff; border-radius:9px; font:700 11px/17px system-ui,sans-serif;
  text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.fpv-type{position:absolute; top:-9px; right:20px; padding:0 5px; height:16px;
  background:#fff; color:var(--fpv); border:1px solid var(--fpv); border-radius:8px;
  font:600 9px/15px system-ui,sans-serif; white-space:nowrap;}
.fpv-c{flex:1; padding:0 6px; color:var(--fpv); font:600 13px/1.1 'Caveat',system-ui,cursive;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none;}
.fpv-del{position:absolute; top:-10px; right:-9px; width:18px; height:18px; padding:0;
  background:#fff; color:#c0392b; border:1px solid #c0392b; border-radius:50%;
  font:700 13px/16px system-ui,sans-serif; cursor:pointer;}
.fpv-rs{position:absolute; right:-6px; bottom:-6px; width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid var(--fpv); cursor:nwse-resize;}
#fpvbar{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:10px; padding:8px 10px 8px 16px;
  background:var(--panel,#fff); border:1px solid var(--line,#e5ddcf); border-radius:14px;
  box-shadow:0 6px 26px rgba(38,34,27,.28); max-width:94vw;}
#fpvbar .fpv-barhint{font:500 12px/1.2 system-ui,sans-serif; color:var(--muted,#847a66); white-space:nowrap;}
#fpvbar button{border:none; border-radius:10px; padding:9px 16px; font:700 14px/1 system-ui,sans-serif; cursor:pointer;}
#fpvbar .fpv-cancel{background:transparent; color:var(--muted,#847a66);}
#fpvbar .fpv-ok{background:#1a9b57; color:#fff; box-shadow:0 2px 8px rgba(26,155,87,.35);}

/* ===== Pro / Kontingent (Zaehler + Upgrade-Sheet) ===== */
#jquota{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px; padding:7px 11px;
  border-radius:10px; font:500 12px/1.4 system-ui,sans-serif; color:var(--muted,#847a66);
  background:rgba(161,121,63,.08); border:1px solid var(--line,#e5ddcf);}
#jquota .jq-up{margin-left:auto; border:none; border-radius:8px; padding:5px 11px;
  font:700 11px/1 system-ui,sans-serif; background:var(--bronze,#a1793f); color:#fff; cursor:pointer;}
/* Der Moment nach dem Ausfuellen — Statusstreifen am Ende des Gespraechs, bewusst
   keine Chat-Blase: es ist eine Folge der Aktion, keine Wortmeldung. */
.jfill-pro{margin:12px 0 4px; padding:12px 14px; border-radius:14px;
  background:var(--bronzesoft); border:1px solid var(--bronzeline);
  animation:jfpin .34s var(--spring) both;}
.jfill-pro.out{background:var(--dangersoft); border-color:var(--danger);}
.jfp-t{font-size:13px; color:var(--ink2); line-height:1.4;}
.jfp-t b{color:var(--ink);}
.jfp-s{margin-top:2px; font-size:11.5px; color:var(--ink3);}
.jfp-b{margin-top:10px; width:100%; padding:9px 14px; border-radius:11px; border:none;
  background:var(--bronze-grad); color:#fffdf7; font:650 13px/1 system-ui,sans-serif;
  cursor:pointer; box-shadow:0 2px 8px rgba(141,106,52,.28);
  transition:transform .14s var(--spring), filter .14s;}
.jfp-b:hover{transform:translateY(-1px); filter:brightness(1.06);}
@keyframes jfpin{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ===== Pro-Karte — im Atelier-Stil (vorher: Georgia, gruene Haken, schwarzer Button) ===== */
#upsheet{position:fixed; inset:0; z-index:130; background:rgba(38,34,27,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:18px;}
.up-card{position:relative; width:min(410px,94vw); max-height:92vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line2); border-radius:24px;
  padding:26px 24px 20px; box-shadow:0 24px 70px rgba(38,34,27,.34); text-align:center;
  animation:popin .28s var(--spring) both;}
.up-orb{width:38px; height:38px; border-radius:50%; margin:0 auto;
  background:radial-gradient(circle at 32% 28%, #b7c6ff, #3d5bd6 52%, #101c4e);
  box-shadow:0 5px 18px rgba(61,91,214,.42);}
.up-card h2{margin:12px 0 2px; font:500 24px/1.2 var(--serif); color:var(--ink); letter-spacing:-.01em;}
.up-msg{margin:10px 0 2px; padding:9px 11px; border-radius:11px; background:var(--bronzesoft);
  color:var(--bronze2); font-size:12.8px; line-height:1.45; font-weight:600;}
/* Vorteile: Haken in Bronze im weichen Kreis statt gruener Textzeichen.
   KEIN display:flex auf dem li — sonst wird <b> zu einem eigenen Flex-Element und der Satz
   bricht in Spalten. Marker liegt absolut, Text bleibt normaler Fliesstext. */
.up-card ul{list-style:none; margin:17px 0 18px; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:11px;}
.up-card li{position:relative; padding-left:29px; font-size:14px; line-height:1.5; color:var(--ink2);}
.up-card li b{color:var(--ink); font-weight:700;}
.up-card li::before{content:'✓'; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%;
  background:var(--bronzesoft); color:var(--bronze2); font:800 10px/19px system-ui,sans-serif; text-align:center;}
.up-ck{display:flex; gap:9px; align-items:flex-start; text-align:left; margin:8px 0;
  font-size:12.5px; line-height:1.45; color:var(--ink2); cursor:pointer;}
.up-ck b{color:var(--ink);}
.up-ck input{margin:1px 0 0; flex:none; width:17px; height:17px; accent-color:var(--bronze); cursor:pointer;}
/* Kauf-Karten wie auf der Website (/#preise) — vertraute Optik statt zweier nackter Knoepfe */
.up-plans{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 2px; text-align:left;}
.up-plan{position:relative; display:flex; flex-direction:column; border:1.5px solid var(--line2);
  border-radius:16px; padding:14px 13px 13px; background:var(--bg);}
.up-plan.hot{border-color:var(--bronze); background:var(--bronzesoft);
  box-shadow:0 4px 18px rgba(141,106,52,.16);}
.up-badge{position:absolute; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--bronze-grad); color:#fffdf7; font:800 8.5px/1 system-ui,sans-serif; letter-spacing:.04em;
  padding:5px 9px; border-radius:20px; box-shadow:0 2px 8px rgba(141,106,52,.4);}
.up-plan h3{margin:2px 0 0; font:600 14px/1.2 var(--serif); color:var(--ink);}
.up-price{margin-top:5px; font:500 21px/1.15 var(--serif); color:var(--ink);}
.up-price small{font:600 11px/1 system-ui,sans-serif; color:var(--ink3);}
.up-per{margin-top:2px; font-size:10.5px; line-height:1.35; color:var(--ink3); min-height:28px;}
.up-buy{display:block; width:100%; margin-top:auto; border:none; border-radius:11px; padding:10px;
  font:650 13.5px/1.25 system-ui,sans-serif; cursor:pointer;
  transition:transform .12s, box-shadow .15s, border-color .15s;}
.up-year{background:var(--bronze-grad); color:#fffdf7;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 3px 12px rgba(141,106,52,.36);}
.up-month{background:var(--panel); border:1.5px solid var(--line2); color:var(--ink);}
.up-month:not(:disabled):hover{border-color:var(--bronze); color:var(--bronze2);}
@media(max-width:420px){ .up-plans{grid-template-columns:1fr; gap:14px;} .up-per{min-height:0;} }
.up-buy:not(:disabled):active{transform:scale(.99);}
.up-buy:disabled{opacity:.4; cursor:not-allowed; box-shadow:none;}
.up-x{position:absolute; top:12px; right:12px; width:32px; height:32px; border:none; background:transparent;
  border-radius:10px; font-size:16px; cursor:pointer; color:var(--ink3); transition:background .12s, color .12s;}
.up-x:hover{background:rgba(38,34,27,.06); color:var(--ink);}
.up-code{display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.up-code input{flex:1; min-width:0; border:1.5px solid var(--line2); border-radius:12px; padding:10px 12px;
  font:600 13px/1 system-ui,sans-serif; text-transform:uppercase; background:var(--bg); color:var(--ink);
  outline:none; transition:border-color .15s, box-shadow .15s;}
.up-code input:focus{border-color:var(--bronze); box-shadow:0 0 0 3px var(--bronzesoft);}
.up-code button{border:none; border-radius:12px; padding:10px 16px; background:var(--bronzesoft);
  color:var(--bronze2); font:700 13px/1 system-ui,sans-serif; cursor:pointer; transition:background .12s, color .12s;}
.up-code button:hover{background:var(--bronze); color:#fffdf7;}
.up-legal{margin:12px 0 0; font:500 11px/1.6 system-ui,sans-serif; color:var(--ink3);}
.up-legal a{color:var(--bronze); text-decoration:none;}
.up-legal a:hover{text-decoration:underline;}

/* ===== Split-View: Referenzblatt an EINER der 4 Seiten (links/rechts/oben/unten) ===== */
#refpane{position:absolute; z-index:6; display:none; flex-direction:column; background:var(--bg);}
#editor.split2 #refpane{display:flex;}
#editor.split-right #ewrap{right:var(--split-w,44%);}
#editor.split-right #refpane{top:0; right:0; bottom:0; width:var(--split-w,44%);
  border-left:1px solid rgba(38,34,27,.12); box-shadow:-10px 0 34px rgba(38,34,27,.12);}
#editor.split-left #ewrap{left:var(--split-w,44%);}
#editor.split-left #refpane{top:0; left:0; bottom:0; width:var(--split-w,44%);
  border-right:1px solid rgba(38,34,27,.12); box-shadow:10px 0 34px rgba(38,34,27,.12);}
#editor.split-top #ewrap{top:var(--split-h,50%);}
#editor.split-top #refpane{top:0; left:0; right:0; height:var(--split-h,50%);
  border-bottom:1px solid rgba(38,34,27,.12); box-shadow:0 12px 30px rgba(38,34,27,.12);}
#editor.split-bottom #ewrap{bottom:var(--split-h,50%);}
#editor.split-bottom #refpane{left:0; right:0; bottom:0; height:var(--split-h,50%);
  border-top:1px solid rgba(38,34,27,.12); box-shadow:0 -12px 30px rgba(38,34,27,.12);}
/* Verschiebbare Trennlinie — Griff an der inneren Kante der Referenz, Orientierung je Seite */
#split-grip{position:absolute; z-index:12; display:flex; align-items:center; justify-content:center; touch-action:none;}
#split-grip::before{content:''; border-radius:3px; background:rgba(38,34,27,.22);
  transition:background .15s, width .15s, height .15s;}
#split-grip:hover::before,#split-grip.drag::before{background:var(--bronze);}
#editor.split-right #split-grip,#editor.split-left #split-grip{top:0; bottom:0; width:20px; cursor:col-resize;}
#editor.split-right #split-grip{left:-10px;} #editor.split-left #split-grip{right:-10px;}
#editor.split-right #split-grip::before,#editor.split-left #split-grip::before{width:4px; height:48px;}
#editor.split-right #split-grip:hover::before,#editor.split-left #split-grip:hover::before,
#editor.split-right #split-grip.drag::before,#editor.split-left #split-grip.drag::before{height:70px;}
#editor.split-top #split-grip,#editor.split-bottom #split-grip{left:0; right:0; height:20px; cursor:row-resize;}
#editor.split-top #split-grip{bottom:-10px;} #editor.split-bottom #split-grip{top:-10px;}
#editor.split-top #split-grip::before,#editor.split-bottom #split-grip::before{height:4px; width:48px;}
#editor.split-top #split-grip:hover::before,#editor.split-bottom #split-grip:hover::before,
#editor.split-top #split-grip.drag::before,#editor.split-bottom #split-grip.drag::before{width:70px;}
/* Konsole / Zurück-Knopf müssen aus der Referenz-Hälfte weichen (aktive Seite behält sie) */
#editor.split-right .pagespill{right:calc(var(--split-w,44%) + 16px); max-width:calc(100% - var(--split-w,44%) - 32px);}
#editor.split-left .etop{left:calc(var(--split-w,44%) + 16px);}
#editor.split-top .etop,#editor.split-top .pagespill{top:calc(var(--split-h,50%) + 14px);}

/* Ablage-Zonen beim Ziehen einer Seite ins Split-View */
#splitzones{position:fixed; inset:0; z-index:118; pointer-events:none;}
.sz{position:absolute; border-radius:18px; border:2.5px dashed var(--bronzeline);
  background:rgba(161,121,63,.05); display:flex; align-items:flex-end; justify-content:center;
  color:var(--bronze); font:600 12px/1 system-ui,sans-serif; padding-bottom:12px;
  opacity:0; transition:opacity .18s, background .14s, border-color .14s, transform .14s;}
#splitzones.on .sz{opacity:1;}
.sz.near{background:rgba(161,121,63,.2); border-color:var(--bronze); border-style:solid; transform:scale(1.015);}
.sz-left{left:16px; top:96px; bottom:96px; width:27%;}
.sz-right{right:16px; top:96px; bottom:96px; width:27%;}
.sz-top{top:16px; left:31%; right:31%; height:23%; align-items:center;}
.sz-bottom{bottom:16px; left:31%; right:31%; height:23%; align-items:center;}
/* Die „in der Hand gehaltene" Seite folgt dem Finger */
#pdrag-ghost{position:fixed; z-index:200; width:104px; aspect-ratio:0.707; pointer-events:none;
  margin:-74px 0 0 -52px; border-radius:7px; overflow:hidden; background:var(--paper);
  box-shadow:0 16px 44px rgba(38,34,27,.42); transform:rotate(-3deg) scale(1.03);
  transition:transform .13s var(--spring);}
#pdrag-ghost.armed{transform:rotate(0deg) scale(1.12);}
#pdrag-ghost .ps-paper{position:absolute; inset:0; z-index:0; opacity:.5;}
#pdrag-ghost img{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  object-position:top center; display:block; pointer-events:none;}
#pdrag-ghost .pg-n{position:absolute; z-index:2; bottom:5px; left:6px; background:rgba(255,253,247,.94);
  border-radius:7px; padding:1px 7px; font:700 11px/1.5 system-ui; color:var(--ink);}
/* Seiten-Schublade fährt beim Herausziehen nach unten weg */
#pagesheet.lift{background:rgba(38,34,27,.12); -webkit-backdrop-filter:none; backdrop-filter:none;}
/* animation:none nötig — sonst pinnt sheetup (fill:both) transform:none und der Lift greift nicht */
#pagesheet.lift .ps-card{transform:translateY(112%); transition:transform .28s var(--spring); animation:none;}
.rp-head{display:flex; align-items:center; gap:8px; padding:calc(12px + var(--sat)) 14px 8px;}
.rp-head .rp-n{font-weight:700; font-size:14px; color:var(--ink); margin-right:auto;}
.rp-head button{border:none; background:rgba(38,34,27,.07); border-radius:13px; padding:7px 13px;
  font-size:13px; cursor:pointer; color:var(--ink); display:flex; align-items:center; gap:5px;}
.rp-head .rp-icn{padding:7px 8px;}
.rp-head .rp-icn .ic{width:16px; height:16px;}
.rp-head .rp-icn:disabled{opacity:.35; cursor:default;}
.rp-head .rp-edit{background:var(--bronze); color:#fff; font-weight:600;}
.rp-head .rp-x .ic{width:16px; height:16px;}
.rp-body{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:6px 14px 24px; min-height:0;
  touch-action:none; overscroll-behavior:contain;}
/* Bühne = A4-Platzhalter (Pergament-Lineatur) + darübergeblendetes Snapshot; Zoom skaliert die Breite. */
.rp-stage{position:relative; width:100%; margin:0 auto; aspect-ratio:1 / 1.414; border-radius:4px;
  background:var(--paper); overflow:hidden;
  box-shadow:0 2px 8px rgba(38,34,27,.1), 0 20px 54px rgba(38,34,27,.20);}
.rp-stage .ps-paper{opacity:.5;}
.rp-stage #rp-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  z-index:1; background:transparent; opacity:0; transition:opacity .3s ease; -webkit-user-drag:none;}
.rp-stage #rp-img.ready{opacity:1;}
.rp-empty{position:absolute; left:0; right:0; bottom:14px; z-index:2; text-align:center;
  font-size:12px; color:var(--mid); pointer-events:none;}
/* Thumbnail wird gerade in die Arbeitsfläche gezogen (=> nebeneinander legen) */
.psc.toworkspace{outline:2.5px solid var(--bronze); outline-offset:2px; transform:scale(1.06);
  box-shadow:0 12px 30px rgba(161,121,63,.4); opacity:.95;}
@media (max-width:560px){
  /* Sehr schmale Phones: seitliches Split wird zu eng -> immer oben/unten teilen */
  #editor.split-left #ewrap,#editor.split-right #ewrap{left:0; right:0;}
  #editor.split-left #refpane,#editor.split-right #refpane{top:auto; left:0; right:0; bottom:0;
    width:auto; height:var(--split-h,50%); border-left:none; border-right:none;
    border-top:1px solid rgba(38,34,27,.12); box-shadow:0 -10px 30px rgba(38,34,27,.12);}
  #editor.split-left #ewrap,#editor.split-right #ewrap{bottom:var(--split-h,50%);}
  #editor.split-left .etop{left:20px;}
}

/* Werkzeugleiste — dockbar an alle 4 Raender */
.ebar{position:absolute; z-index:30; display:flex; align-items:center; gap:4px;
  padding:7px 10px; border-radius:22px; scrollbar-width:none;}
.ebar::-webkit-scrollbar{display:none;}
#editor:not(.on) .ebar{display:none;}
#editor.dock-bottom .ebar{bottom:calc(20px + var(--sab)); left:50%; transform:translateX(-50%);
  max-width:calc(100vw - 200px); overflow-x:auto;}
#editor.dock-top .ebar{top:calc(72px + var(--sat)); left:50%; transform:translateX(-50%);
  max-width:calc(100vw - 40px); overflow-x:auto;}
#editor.dock-left .ebar,#editor.dock-right .ebar{top:50%; transform:translateY(-50%);
  flex-direction:column; padding:10px 7px; max-height:calc(100vh - 150px); overflow-y:auto;}
#editor.dock-left .ebar{left:16px;}
#editor.dock-right .ebar{right:16px;}
#editor.dock-left .etools,#editor.dock-right .etools{flex-direction:column;}
#editor.dock-left .esep,#editor.dock-right .esep{width:26px; height:1px; margin:6px 0;}
#editor.dock-left .grip,#editor.dock-right .grip{flex-direction:row; padding:6px 0; width:auto;}
.ebar.dragging{opacity:.92; box-shadow:var(--shadow-lg); transition:none; cursor:grabbing;}
/* Live-Vorschau beim Annähern an eine Magnetzone (ohne Canvas-Reflow) */
.ebar.previewing{opacity:.97; box-shadow:var(--shadow-lg); cursor:grabbing;
  transition:left .26s cubic-bezier(.22,1,.36,1), top .26s cubic-bezier(.22,1,.36,1),
             right .26s cubic-bezier(.22,1,.36,1), bottom .26s cubic-bezier(.22,1,.36,1),
             transform .26s cubic-bezier(.22,1,.36,1);}
#editor.on .ebar.pv-bottom{bottom:calc(20px + var(--sab)); left:50%; top:auto; right:auto; transform:translateX(-50%);
  flex-direction:row; padding:7px 10px; max-width:calc(100vw - 200px); max-height:none;}
#editor.on .ebar.pv-top{top:calc(72px + var(--sat)); left:50%; bottom:auto; right:auto; transform:translateX(-50%);
  flex-direction:row; padding:7px 10px; max-width:calc(100vw - 40px); max-height:none;}
#editor.on .ebar.pv-left{left:16px; top:50%; right:auto; bottom:auto; transform:translateY(-50%);
  flex-direction:column; padding:10px 7px; max-width:none; max-height:calc(100vh - 150px);}
#editor.on .ebar.pv-right{right:16px; top:50%; left:auto; bottom:auto; transform:translateY(-50%);
  flex-direction:column; padding:10px 7px; max-width:none; max-height:calc(100vh - 150px);}
.ebar.pv-left .etools,.ebar.pv-right .etools{flex-direction:column;}
.ebar.pv-left .esep,.ebar.pv-right .esep{width:26px; height:1px; margin:6px 0;}
.ebar.pv-left .grip,.ebar.pv-right .grip{flex-direction:row; padding:6px 0; width:auto;}
/* Inhalts-Freiraum je Dock */
#editor.dock-top #ewrap{padding-top:136px; padding-bottom:calc(30px + var(--sab));}
#editor.dock-left #ewrap{padding-left:92px;}
#editor.dock-right #ewrap{padding-right:92px;}
/* Griff */
.grip{display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center;
  padding:0 6px; cursor:grab; touch-action:none; flex:0 0 auto;}
.grip span{width:4px; height:4px; border-radius:50%; background:var(--ink3); display:block;}
/* Magnetzonen */
#dockzones{position:absolute; inset:0; z-index:120; pointer-events:none;}
.dz{position:absolute; border-radius:20px; border:2px dashed var(--bronzeline);
  background:rgba(161,121,63,.07); transition:background .15s, border-color .15s, box-shadow .15s;}
.dz.near{background:rgba(161,121,63,.18); border-color:var(--bronze);
  box-shadow:0 0 0 4px rgba(161,121,63,.12), 0 10px 30px rgba(141,106,52,.2);}
.dz-top{top:calc(66px + var(--sat)); left:120px; right:120px; height:64px;}
.dz-bottom{bottom:calc(14px + var(--sab)); left:120px; right:120px; height:64px;}
.dz-left{left:12px; top:130px; bottom:110px; width:64px;}
.dz-right{right:12px; top:130px; bottom:110px; width:64px;}
.etools{display:flex; align-items:center; gap:3px; flex:0 0 auto;}
.ebtn{width:44px; height:44px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; color:var(--ink2); flex:0 0 auto; position:relative;
  transition:background .13s, color .13s, transform .12s var(--ease);}
.ebtn:hover{background:rgba(38,34,27,.05);}
.tool.on,#t-input.on{background:var(--bronzesoft); color:var(--bronze2);
  box-shadow:inset 0 0 0 1.5px var(--bronzeline);}
.esep{width:1px; height:26px; background:var(--line2); margin:0 6px; flex:0 0 auto;}
.colordot{width:23px; height:23px; border-radius:50%; background:var(--curcol,#26221b);
  box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px rgba(38,34,27,.16); display:block;}
.widthdot{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.widthdot span{width:10px; height:10px; border-radius:50%; background:var(--ink2); display:block;}

/* Jarvis-Orb + Vorschlag unten rechts */
.jdock{position:absolute; right:calc(24px + var(--sar)); bottom:calc(24px + var(--sab)); z-index:30;
  display:flex; align-items:center; gap:12px;}
.jsuggest{display:flex; align-items:center; padding:10px 15px; border-radius:99px;
  font-size:13px; font-weight:600; color:var(--mid); animation:popin .3s var(--spring) both;}
.jorb-btn{width:58px; height:58px; border-radius:50%; background:var(--orb);
  animation:orbPulse 3.2s ease-in-out infinite; display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;}
.jorb-btn .ic{width:22px; height:22px; color:rgba(255,255,255,.9);}
.jorb-btn.think{animation:orbPulse 1s ease-in-out infinite;}

#zoomlbl{position:fixed; left:50%; top:calc(76px + var(--sat)); transform:translateX(-50%);
  background:rgba(38,34,27,.88); color:#fffdf7; font-size:12.5px; font-weight:650;
  padding:6px 13px; border-radius:11px; z-index:65; pointer-events:none;}

/* Objekte auf der Seite */
.fill{position:absolute; pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none;}
.fill canvas{display:block; width:100%; height:100%;}
.fill.font{font-family:var(--handfont); color:var(--hand); white-space:pre; line-height:1;}
.fill.sel,.tbox.sel,.pimg.sel{outline:1.5px dashed var(--bronze); outline-offset:3px; border-radius:2px;}
/* KI-Antwort schreibt sich rein: Wisch von links nach rechts (wie mit dem Stift geschrieben) */
.fill.writein{animation:fillWrite .52s cubic-bezier(.35,.65,.3,1) both;}
@keyframes fillWrite{
  0%{clip-path:inset(0 100% 0 0); -webkit-clip-path:inset(0 100% 0 0); opacity:.25;}
  55%{opacity:1;}
  100%{clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); opacity:1;}
}
/* Goldener Scan-Schimmer: Lichtstreif wandert übers Blatt, während die KI es liest */
#sheet .scan-shine{position:absolute; inset:0; pointer-events:none; z-index:7; overflow:hidden; border-radius:inherit;}
#sheet .scan-shine::before{content:""; position:absolute; left:-20%; right:-20%; height:34%; top:-38%;
  background:linear-gradient(180deg, transparent, rgba(212,175,55,.05) 28%, rgba(233,201,110,.40) 50%, rgba(212,175,55,.05) 72%, transparent);
  filter:blur(3px); animation:scanSweep 1.5s cubic-bezier(.55,.08,.42,.95) infinite;}
#sheet .scan-shine::after{content:""; position:absolute; left:2%; right:2%; height:2px; top:0;
  background:linear-gradient(90deg, transparent, rgba(240,210,120,.95) 20%, rgba(255,240,190,.98) 50%, rgba(240,210,120,.95) 80%, transparent);
  box-shadow:0 0 14px 3px rgba(233,201,110,.6); border-radius:2px; animation:scanLine 1.5s cubic-bezier(.55,.08,.42,.95) infinite;}
@keyframes scanSweep{0%{top:-38%;} 100%{top:104%;}}
@keyframes scanLine{0%{top:0; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:100%; opacity:0;}}
@media (prefers-reduced-motion:reduce){ .fill.writein{animation:none;} #sheet .scan-shine{display:none;} }
.tbox{position:absolute; pointer-events:auto; touch-action:none; white-space:pre-wrap;
  min-width:24px; min-height:1em; line-height:1.35; color:#26221b;
  font-family:-apple-system,system-ui,sans-serif;}
.tbox[contenteditable="true"]{outline:1.5px solid var(--bronze); background:rgba(255,253,247,.92);
  border-radius:5px; cursor:text; user-select:text; -webkit-user-select:text;
  box-shadow:0 4px 18px rgba(38,34,27,.15);}
.pimg{position:absolute; pointer-events:auto; touch-action:none;}
.pimg img{width:100%; height:100%; display:block; pointer-events:none; border-radius:3px;}
.pimg .rsz{position:absolute; right:-10px; bottom:-10px; width:24px; height:24px; border-radius:50%;
  background:var(--bronze); border:3px solid #fffdf7; box-shadow:0 2px 8px rgba(0,0,0,.3);
  display:none; touch-action:none;}
.pimg.sel .rsz{display:block;}

/* Marginalie: cleaner Randvermerk (flach, Zitat-Linie, ✕ zum Entfernen) */
.mnote{position:absolute; pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none;
  background:rgba(252,249,241,.85); border-left:.22em solid #3d5bd6; border-radius:.35em .7em .7em .35em;
  padding:.7em 1.7em .7em 1.6em; color:#4a4336; line-height:1.45;
  box-shadow:0 1px 3px rgba(38,34,27,.06); animation:notein .35s var(--spring) both;}
@keyframes notein{from{opacity:0; transform:translateY(6px) scale(.97);} to{opacity:1; transform:none;}}
.mnote .mnote-orb{position:absolute; left:.55em; top:.95em; width:.55em; height:.55em; border-radius:50%;
  background:var(--orb);}
.mnote .mnote-x{position:absolute; right:.35em; top:.35em; width:1.5em; height:1.5em; border-radius:50%;
  color:#a39a8a; font-size:.8em; line-height:1; display:flex; align-items:center; justify-content:center;
  touch-action:none;}
.mnote .mnote-x:hover{background:rgba(38,34,27,.07); color:#4a4336;}
.mnote .mnote-t{display:block; white-space:pre-wrap;}
.mnote.sel{outline:1.5px dashed var(--bronze); outline-offset:3px;}

/* Auswahl-/Objektleiste (ueber der Werkzeugleiste) */
#fillbar{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(86px + var(--sab));
  border-radius:17px; padding:7px 9px; display:flex; gap:5px; align-items:center; z-index:60;
  animation:popin .25s var(--spring) both;}
#fillbar button{color:var(--ink); font-size:14px; font-weight:650; padding:9px 12px; border-radius:11px;
  display:flex; align-items:center; gap:6px;}
#fillbar button:hover{background:rgba(38,34,27,.05);}
#fillbar .danger{color:var(--danger);}
#fillbar .okbtn{background:var(--bronzesoft); color:var(--bronze2);}
#fillbar .ic{width:16px; height:16px;}
#fb-ai{display:flex; gap:5px; align-items:center;}
#fillbar .ai{color:var(--jblue); font-weight:650;}
.fb-sep{width:1px; height:22px; background:var(--line2); margin:0 3px;}

body.dock-top #fillbar,body.dock-left #fillbar,body.dock-right #fillbar,
body.dock-top #replaybar,body.dock-left #replaybar,body.dock-right #replaybar{
  bottom:calc(20px + var(--sab));}

/* Tinten-Replay */
#replaybar{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(86px + var(--sab));
  border-radius:17px; padding:8px 12px; display:flex; gap:10px; align-items:center; z-index:62;
  width:min(440px,86vw); animation:popin .25s var(--spring) both;}
#replaybar button{width:38px; height:38px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; color:var(--ink); flex:0 0 auto;}
#replaybar button:hover{background:rgba(38,34,27,.05);}
#replaybar input{flex:1; -webkit-appearance:none; appearance:none; height:30px; background:none; min-width:0;}
#replaybar input::-webkit-slider-runnable-track{height:5px; border-radius:3px; background:rgba(38,34,27,.18);}
#replaybar input::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--bronze); box-shadow:0 1px 6px rgba(141,106,52,.4); margin-top:-7.5px;}

/* ================= Popover ================= */
#popover{position:fixed; z-index:110; border-radius:18px; padding:12px;
  min-width:200px; max-width:min(320px,92vw); animation:popin .22s var(--spring) both;}
@keyframes popin{from{opacity:0; transform:scale(.88) translateY(-6px);} to{opacity:1; transform:none;}}
.pop-label{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronze); margin:2px 2px 8px;}
.pop-row{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:4px;}
.pop-sw{width:33px; height:33px; border-radius:50%; border:2.5px solid rgba(38,34,27,.14);
  transition:transform .14s var(--spring), border-color .14s;}
.pop-sw:hover{transform:scale(1.12);}
.pop-sw.on{border-color:var(--ink); transform:scale(1.08);}
.pop-opt{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 11px;
  border-radius:12px; font-size:14.5px; font-weight:550;}
.pop-opt:hover{background:rgba(38,34,27,.05);}
.pop-opt.on{background:var(--bronzesoft); color:var(--bronze2);}
.pop-opt .ic{width:19px; height:19px;}
.pop-opt small{margin-left:auto; color:var(--ink3); font-weight:500;}
.pop-segrow{display:flex; gap:6px;}
.pop-seg{flex:1; padding:9px 6px; border-radius:11px; font-size:13.5px; font-weight:600;
  background:rgba(38,34,27,.06); color:var(--ink2);}
.pop-seg.on{background:var(--bronzesoft); color:var(--bronze2); box-shadow:inset 0 0 0 1.5px var(--bronzeline);}

/* ================= KI-Verlauf ================= */
.hist-head h2{margin:0 0 3px; font:500 22px/1.2 var(--serif);}
.hist-head p{margin:0 0 15px; color:var(--ink3); font-size:13.5px; line-height:1.4;}
.hist-list{max-height:60vh; overflow-y:auto; display:flex; flex-direction:column; gap:17px; padding-right:2px;}
.hist-empty{color:var(--ink3); text-align:center; padding:34px 14px; font:italic 400 15px/1.55 var(--serif);}
.hist-item{border-left:2px solid var(--bronzeline); padding-left:14px;}
.hist-when{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze);}
.hist-in{font:italic 500 15px/1.35 var(--serif); color:var(--ink2); margin:3px 0 9px;}
.hist-recs{display:flex; flex-direction:column; gap:7px;}
.hist-rec{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 12px;
  border-radius:12px; background:rgba(38,34,27,.045); transition:background .12s, transform .1s;}
.hist-rec:hover{background:var(--bronzesoft);}
.hist-rec:active{transform:scale(.99);}
.hr-ic{flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); box-shadow:0 1px 3px rgba(38,34,27,.12); color:var(--bronze2);}
.hr-ic .ic{width:16px; height:16px;}
.hr-t{flex:1; min-width:0; font-size:14px; color:var(--ink); line-height:1.35;}
.hr-t b{font-weight:700;}
.hr-where{flex:0 0 auto; font-size:11.5px; font-weight:600; color:var(--ink3);}
.pop-slider{width:100%; margin:6px 0 2px; -webkit-appearance:none; appearance:none; height:34px; background:none;}
.pop-slider::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:rgba(38,34,27,.18);}
.pop-slider::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fffdf7; border:1px solid rgba(38,34,27,.15); box-shadow:0 2px 8px rgba(38,34,27,.25); margin-top:-10px;}
.pop-wpreview{height:34px; display:flex; align-items:center; justify-content:center;}
.pop-wpreview span{border-radius:99px; background:var(--curcol,#26221b); display:block; width:70%;}

/* ================= Seiten-Manager ================= */
#pagesheet{position:fixed; inset:0; z-index:90; background:rgba(38,34,27,.3);
  display:flex; align-items:flex-end; justify-content:center;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.ps-card{width:min(860px,100vw); max-height:72vh; border-radius:26px 26px 0 0; padding:18px 20px calc(18px + var(--sab));
  display:flex; flex-direction:column; animation:sheetup .32s var(--spring) both;}
@keyframes sheetup{from{transform:translateY(60%); opacity:.4;} to{transform:none; opacity:1;}}
.ps-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.ps-head h2{margin:0; font:500 22px/1.2 var(--serif);}
.ps-hint{color:var(--ink3); font-size:12.5px; flex:1;}
/* FESTE Zellgröße (Spaltenbreite + Zeilenhöhe) — im Scroll-Container kann weder aspect-ratio
   noch %-Padding die Grid-Spuren füllen (beide zählen intrinsisch als 0 -> Kacheln überlappten).
   Feste 124×175 (A4) ist deterministisch, Karten strecken sich in ihre Zelle. */
.ps-grid{display:grid; grid-template-columns:repeat(auto-fill,124px); grid-auto-rows:175px; gap:18px;
  justify-content:center; align-content:start; overflow-y:auto; padding:2px; min-height:0;}
.psc{position:relative; border-radius:8px; overflow:hidden; border:1px solid rgba(38,34,27,.1);
  background:var(--paper); box-shadow:var(--card-shadow); cursor:grab;
  touch-action:none; transition:transform .15s var(--spring), box-shadow .15s, opacity .15s;}
/* Pergament-Platzhalter hinten (sofort) + Snapshot vorn (blendet ein) — nie leere Kacheln */
.psc .ps-paper{position:absolute; inset:0; z-index:0; opacity:.5;}
.psc img.snap{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  object-position:top center; display:block; pointer-events:none; background:transparent;
  opacity:0; transition:opacity .28s ease;}
.psc img.snap.ready{opacity:1;}
.psc.cur{outline:2.5px solid var(--bronze); outline-offset:2px;}
.psc.drag{opacity:.85; transform:scale(1.06) rotate(1.5deg); box-shadow:var(--shadow-lg); z-index:5;}
.psc .pn{position:absolute; z-index:2; bottom:6px; left:6px; background:rgba(255,253,247,.92);
  color:#6b6357; font-size:10.5px; font-weight:650; padding:1.5px 7px; border-radius:7px;
  border:1px solid rgba(38,34,27,.08);}
.psc .acts{position:absolute; z-index:3; top:5px; right:5px; display:flex; gap:5px; opacity:0; transition:opacity .15s;}
.psc:hover .acts{opacity:1;}

/* ===== Sprechender Seitentitel + geheftetes Bündel (zusammenhängende Blätter) =====
   Das Heft soll ein LESBARES Inhaltsverzeichnis sein: statt „Seite 137" der echte
   Inhalt („BGB — Antrag und Annahme"). Zusammengehörige Scans wirken wie getackerte
   Blätter — sichtbar verbunden, ohne neue Menü-Ebene. */
.psc .pt{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:14px 7px 5px;
  font:600 10.5px/1.25 system-ui,sans-serif; color:var(--ink); text-align:left;
  background:linear-gradient(180deg,rgba(255,253,247,0),rgba(255,253,247,.93) 42%);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  pointer-events:none;}
.psc .pt + .pn, .psc .pt ~ .pn{bottom:auto; top:6px; left:6px;}

/* Bündel: gemeinsamer warmer Ton + Klammer-Kante links */
.psc.ing{border-color:var(--bronzeline); box-shadow:var(--card-shadow), inset 3px 0 0 var(--bronzeline);}
.psc.ing::after{content:''; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(161,121,63,.09),transparent 26%);}
/* getackerte Ecke — nur am ersten Blatt des Bündels */
.psc.ing-1 .ps-clip{position:absolute; z-index:4; top:-3px; left:9px; width:13px; height:17px;
  border:2px solid var(--bronze); border-top-color:transparent; border-radius:0 0 7px 7px;
  transform:rotate(-8deg); opacity:.85;}
.psc.ing .ps-clip{position:absolute; z-index:4; top:-2px; left:10px; width:10px; height:12px;
  border:2px solid var(--bronzeline); border-top-color:transparent; border-radius:0 0 5px 5px;}
/* Gruppentitel einmal am Kopf des Bündels */
.psc .ps-gt{position:absolute; z-index:4; top:6px; left:26px; right:6px;
  font:700 9.5px/1.2 system-ui,sans-serif; color:var(--bronze2);
  background:rgba(255,253,247,.94); border:1px solid var(--bronzeline); border-radius:6px;
  padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.psc.ing .pn{background:rgba(161,121,63,.14); color:var(--bronze2); border-color:var(--bronzeline);}
.psc .acts button{background:rgba(255,253,247,.96); border:1px solid rgba(38,34,27,.1);
  border-radius:9px; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:#6b6357; box-shadow:0 1px 3px rgba(38,34,27,.12); touch-action:none;}
.psc .acts button:active{background:var(--bronzesoft);}
.psc .acts .del{color:var(--danger); border-color:rgba(178,59,59,.42); background:rgba(255,247,247,.98);}
.psc .acts .del:active{background:#ffe3e3;}
.psc .acts .ic{width:16px; height:16px;}

/* ================= KI-Panel: schwebende Karte am Orb ================= */
#jdrawer{position:fixed; right:calc(24px + var(--sar)); bottom:calc(96px + var(--sab));
  width:min(390px,calc(100vw - 32px)); max-height:min(620px,calc(100vh - 170px)); z-index:75;
  background:var(--glass-strong); -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6); border:1px solid var(--glass-line);
  border-radius:26px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transform-origin:calc(100% - 44px) calc(100% + 44px);
  opacity:0; transform:scale(.6) translateY(16px); pointer-events:none;
  transition:opacity .24s var(--ease), transform .3s var(--spring), visibility .3s;
  visibility:hidden;}
#jdrawer.on{opacity:1; transform:none; pointer-events:auto; visibility:visible;}
@media (max-width:700px){
  #jdrawer{left:16px; right:16px; width:auto; bottom:calc(90px + var(--sab));}
}
/* globaler KI-Abbrechen-Pill */
#aicancel{position:fixed; left:50%; transform:translateX(-50%); top:calc(62px + var(--sat));
  z-index:160; border-radius:99px; padding:10px 18px; font-size:13px; font-weight:650;
  color:var(--danger); display:flex; align-items:center; gap:8px;
  animation:toastdown .3s var(--spring) both;}
@keyframes toastdown{from{opacity:0; transform:translate(-50%,-12px);} to{opacity:1; transform:translate(-50%,0);}}
.jhead{display:flex; align-items:center; gap:11px; padding:16px 18px 8px;}
.orb{width:24px; height:24px; border-radius:50%; flex:0 0 auto; background:var(--orb);
  animation:orbPulse 3.2s ease-in-out infinite;}
.orb.think{animation:orbPulse 1s ease-in-out infinite;}
.jhead h2{margin:0; font:500 23px/1 var(--serif);}
.orb-mini{width:12px; height:12px; border-radius:50%; background:var(--orb); display:inline-block;
  flex:0 0 auto; box-shadow:0 0 6px rgba(61,91,214,.45);}
.jx{margin-left:auto; color:var(--ink3); padding:7px; border-radius:10px;}
.jx:hover{background:rgba(38,34,27,.05);}
.jbody{flex:1; overflow-y:auto; padding:6px 16px 16px;}
.jnopage{font:italic 400 14px/1.5 var(--serif); color:var(--ink3); padding:8px 4px 12px;}
.jact{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px;
  border-radius:16px; background:var(--panel); border:1px solid var(--line); margin-bottom:9px;
  box-shadow:0 1px 2px rgba(38,34,27,.04); transition:transform .16s var(--spring), border-color .15s;}
.jact:hover{border-color:var(--bronzeline); transform:translateY(-1px);}
.jact-ic{width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; background:var(--bronzesoft); color:var(--bronze2);}
.jact-ic .ic{width:19px; height:19px;}
.jact-t{min-width:0;}
/* Schrift-Picker unter „Arbeitsblatt ausfüllen" */
.jfill-hw{display:flex; align-items:center; gap:9px; margin:-3px 0 12px; padding:2px 6px 2px 52px;}
.jfill-hw span{font-size:12px; color:var(--ink3); flex:0 0 auto;}
.jfill-hw select{flex:1 1 auto; min-width:0; background:var(--bg); border:1.5px solid var(--line2);
  border-radius:10px; padding:7px 9px; font-size:13px; font-weight:600; color:var(--ink); outline:none; -webkit-appearance:none;}
.jact-t b{display:block; font-size:14.5px; font-weight:650;}
.jact-t small{color:var(--ink3); font-size:12px; line-height:1.35; display:block;}
.jlog{margin-top:12px;}
.jmsg{border-radius:14px; padding:11px 13px; margin-bottom:9px; font-size:13.5px; line-height:1.5;
  white-space:pre-wrap; animation:viewin .25s var(--ease) both;}
.jmsg.me{background:var(--bronzesoft); border:1px solid rgba(161,121,63,.18);}
.jmsg.ai{background:var(--panel); border:1px solid var(--line); box-shadow:0 1px 2px rgba(38,34,27,.04);}
.jmsg.err{background:var(--dangersoft); border:1px solid rgba(179,69,46,.2); color:var(--danger);}
.jask{display:flex; gap:8px; padding:12px 16px calc(14px + var(--sab)); border-top:1px solid var(--line);}
.jask input{flex:1; background:var(--panel); border:1.5px solid var(--line2); border-radius:14px;
  padding:11px 14px; font-size:14px; outline:none; min-width:0; transition:border-color .15s, box-shadow .15s;}
.jask input:focus{border-color:var(--bronze); box-shadow:0 0 0 4px var(--bronzesoft);}
.jask button{background:var(--bronze-grad); color:#fffdf7; border-radius:14px;
  padding:0 17px; font-size:14px; font-weight:650;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 3px 10px rgba(141,106,52,.35);}

/* KI-Fortschritt */
.jprog{position:relative;}
.jp-step{display:flex; align-items:center; gap:10px; padding:4px 0; color:var(--ink3); font-size:13px;
  transition:color .2s;}
.jp-step .jp-label{transition:color .2s;}
.jp-step .jp-dot{width:16px; height:16px; border-radius:50%; flex:0 0 auto; position:relative;
  border:2px solid rgba(38,34,27,.2); transition:all .2s;}
.jp-step.active{color:var(--ink); font-weight:600;}
.jp-step.active .jp-dot{border-color:var(--bronze); border-top-color:transparent;
  animation:jpspin .8s linear infinite;}
.jp-step.done{color:var(--ink2);}
.jp-step.done .jp-dot{border-color:var(--bronze); background:var(--bronze);}
.jp-step.done .jp-dot::after{content:''; position:absolute; inset:3px 3px 5px 3px;
  border-left:2px solid #fffdf7; border-bottom:2px solid #fffdf7; transform:rotate(-45deg) scale(.9);}
@keyframes jpspin{to{transform:rotate(360deg);}}
.jp-bar{margin:9px 0 0; height:5px; border-radius:3px; background:rgba(38,34,27,.09); overflow:hidden;}
.jp-bar > i{display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#b8934f,#8d6a34); transition:width .5s ease-out;}
.jp-foot{display:flex; justify-content:space-between; align-items:baseline; margin-top:6px;
  color:var(--ink3); font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums;}
.jp-eta{color:var(--bronze2); font-weight:600;}
.jp-preview{margin-top:9px; padding:8px 10px; border-radius:10px; background:rgba(38,34,27,.04);
  border-left:2px solid var(--bronze); color:var(--ink2); line-height:1.5;
  font-family:'Caveat',cursive; font-size:15px; max-height:76px; overflow:hidden;}

/* ================= Quiz ================= */
#quiz{position:fixed; inset:0; z-index:80; display:none; flex-direction:column; align-items:center;
  justify-content:center; padding:24px; padding-top:calc(24px + var(--sat)); background:var(--bg2);}
#quiz.on{display:flex;}
#quiz::before{content:''; position:absolute; inset:-15%; pointer-events:none;
  background:radial-gradient(44% 36% at 16% 8%, rgba(198,158,94,.18), transparent 70%),
             radial-gradient(40% 34% at 84% 92%, rgba(255,226,178,.22), transparent 72%);
  filter:blur(2px);}
.qtitle{position:relative; font:italic 400 15px/1 var(--serif); color:var(--bronze2); margin-bottom:14px;}
.qdashes{position:relative; display:flex; gap:6px; margin-bottom:26px; max-width:90vw; flex-wrap:wrap;
  justify-content:center;}
.qdashes span{width:26px; height:5px; border-radius:3px; background:rgba(38,34,27,.14);}
.qdashes span.done{background:var(--bronze);}
.qdashes span.cur{background:rgba(38,34,27,.9);}
:root[data-theme="dark"] .qdashes span{background:rgba(240,233,220,.15);}
:root[data-theme="dark"] .qdashes span.cur{background:rgba(240,233,220,.9);}
.qcard{position:relative; width:min(640px,92vw); min-height:340px; border-radius:28px; padding:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  cursor:pointer; animation:popin .3s var(--spring) both;}
.qcard .lbl{font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronze);}
.qcard .qtext{font:500 30px/1.35 var(--serif); letter-spacing:-.01em; margin-top:18px; max-width:490px;}
.qcard .qhint{font-size:13.5px; color:var(--ink3); margin-top:22px;}
.qnav{position:relative; display:flex; gap:12px; margin-top:26px; align-items:center;}
.qnav button{border-radius:16px; padding:13px 20px; color:var(--ink2); font-size:14.5px;
  display:flex; align-items:center; gap:7px; font-weight:550;}
.qnav .ic{width:16px; height:16px;}
.qnav .flip{background:var(--bronze-grad); color:#fffdf7; font-weight:650; border:none; padding:13px 26px;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 5px 16px rgba(141,106,52,.4);}
.qx{position:absolute; top:calc(16px + var(--sat)); right:18px; color:var(--ink3); padding:9px;
  border-radius:11px; z-index:5;}
.qx:hover{background:rgba(38,34,27,.06);}

/* ================= Handschrift-Studio ================= */
/* ============ Handschrift-Studio — Karten-Layout (kein Fullscreen-Canvas mehr) ============ */
/* Handschrift-Studio = View im #appbody (kein Fullscreen mehr; Navbar bleibt oben) */
#hw{display:none; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 26px calc(30px + var(--sab));}
#hw.on{display:block;}

/* Studio-Raster: links Profile/Ring/Kategorien, rechts Canvas — nutzt die volle Breite */
.hw-studio{display:grid; gap:22px; max-width:1560px; margin:18px auto 0; grid-template-columns:340px 1fr; align-items:start;}
@media(max-width:900px){.hw-studio{grid-template-columns:1fr;}}
.hw-card{background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:16px;
  box-shadow:var(--card-shadow);}
.hw-card-label{font-size:11.5px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:10px;}
.hw-side{display:grid; gap:11px;}

/* Profil-Liste (statt Dropdown): aktiv hervorgehoben, je Zeile ✎ + 🗑 */
.hw-plist{display:grid; gap:7px; max-height:210px; overflow-y:auto; scrollbar-width:thin;
  margin:0 -4px; padding:0 4px;}
.hw-prof{display:flex; align-items:center; gap:6px; padding:4px; border-radius:13px; border:1px solid transparent;}
.hw-prof.on{background:linear-gradient(180deg,rgba(169,123,52,.14),rgba(169,123,52,.05)); border-color:rgba(169,123,52,.35);}
.hw-prof-pick{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:left; padding:8px 10px; border-radius:10px;}
.hw-prof-pick:hover{background:rgba(38,34,27,.04);}
.hw-prof.on .hw-prof-pick:hover{background:transparent;}
.hw-prof-n{font-size:15px; font-weight:600; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hw-prof.on .hw-prof-n{color:var(--ink);}
.hw-prof-c{font-size:12px; color:var(--ink3);}
.hw-prof-ic{flex:0 0 auto; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--ink3);}
.hw-prof-ic:hover{background:rgba(38,34,27,.06); color:var(--ink2);}
.hw-prof-ic.del:hover{color:var(--danger);}
.hw-prof-ic .ic{width:15px; height:15px;}
.hw-pnew{margin-top:8px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px; border-radius:12px; border:1.5px dashed var(--line); color:var(--ink3); font-size:13.5px; font-weight:600; cursor:pointer;}
.hw-pnew:hover{border-color:var(--bronze); color:var(--bronze2);}
.hw-pnew .ic{width:15px; height:15px;}
:root[data-theme="dark"] .hw-prof-pick:hover{background:rgba(255,253,247,.05);}
:root[data-theme="dark"] .hw-prof-ic:hover{background:rgba(255,253,247,.08);}

/* Fortschrittsring */
.hw-ringcard{display:flex; align-items:center; gap:16px;}
.hw-ring{position:relative; width:76px; height:76px; flex:0 0 76px;}
.hw-ring-svg{width:76px; height:76px; transform:rotate(-90deg);}
.hw-ring-bg{fill:none; stroke:var(--line2); stroke-width:7;}
.hw-ring-fgc{fill:none; stroke:#a97b34; stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .5s ease;}
.hw-ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.hw-ring-c b{font:600 19px/1 var(--serif); color:var(--ink); letter-spacing:-.01em;}
.hw-ring-frac{font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.hw-ring-sub{font-size:12.5px; color:var(--ink3); line-height:1.4; margin-top:3px;}

/* Kategorien-Liste */
.hw-cats{display:grid; gap:2px;}
.hw-cat{display:grid; gap:5px; padding:7px 12px; border-radius:12px; border:1px solid transparent;
  background:none; cursor:pointer; text-align:left; transition:background .15s;}
.hw-cat:hover{background:var(--bg);}
.hw-cat.on{background:linear-gradient(180deg, rgba(169,123,52,.14), rgba(169,123,52,.06)); border-color:rgba(169,123,52,.35);}
.hw-cat-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.hw-cat-n{font-size:14.5px; font-weight:600; color:var(--ink2);}
.hw-cat.on .hw-cat-n{color:var(--ink);}
.hw-cat-count{font-size:12px; font-weight:650; color:var(--ink3); font-variant-numeric:tabular-nums; white-space:nowrap;}
.hw-cat-count.full{color:#2f7d4f;}
.hw-cat-bar{height:5px; border-radius:3px; background:var(--line2); overflow:hidden;}
.hw-cat-bar>span{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#c69e5e,#a97b34); transition:width .3s;}

/* Rechte Spalte */
.hw-main{display:grid; gap:16px; min-width:0;}
.hw-mainhead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.hw-mh-title{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.hw-mh-cat{font-size:13.5px; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em;}
.hw-mh-dot{color:var(--ink3);}
.hw-mh-char{font:600 34px/1 var(--serif); color:var(--ink);}
.hw-mh-char.is-shape{font-size:22px;}
.hw-hint{color:var(--ink2); font-size:14px; line-height:1.5; margin:9px 0 0; max-width:520px;}
.hw-stepbtn{width:38px; height:38px; border-radius:11px; border:1.5px solid var(--line2); background:var(--panel);
  color:var(--ink2); font:400 22px/1 var(--serif); cursor:pointer; display:grid; place-items:center;}
.hw-stepbtn:hover{border-color:var(--line); color:var(--ink);}
.hw-mh-pos{font-size:12px; font-weight:600; color:var(--ink3); font-variant-numeric:tabular-nums; text-align:center; margin-top:2px;}

/* 3D-Scroll-Rad der Zeichen */
.hw-mh-wheel{display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 auto;}
.hw-wheel-row{display:flex; align-items:center; gap:6px;}
.hw-wnav{width:32px; height:32px; border-radius:10px; color:var(--ink3); font:400 22px/1 var(--serif);
  cursor:pointer; display:grid; place-items:center; flex:0 0 auto;}
.hw-wnav:hover{background:rgba(38,34,27,.06); color:var(--ink);}
.hw-wheel{position:relative; width:min(380px,74vw); height:94px; perspective:760px; overflow:hidden;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);}
.hw-wheel.dragging{cursor:grabbing;}
.hw-wheel.dragging .hw-wi{transition:opacity .12s, color .12s;}   /* beim Ziehen 1:1, kein Nachlaufen */
.hw-wi{position:absolute; left:50%; top:50%; transform-origin:center;
  font:600 24px/1 var(--serif); color:var(--ink3); background:none; padding:0; cursor:pointer;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .3s, color .2s; will-change:transform,opacity;}
.hw-wi.cur{color:var(--bronze2); font:700 46px/1 var(--serif); text-shadow:0 2px 10px color-mix(in srgb,var(--bronze) 30%, transparent);}
:root[data-theme="dark"] .hw-wnav:hover{background:rgba(255,253,247,.08);}

/* Canvas-Karte */
.hw-canvascard{padding:14px 16px 16px;}
.hw-guide-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3); margin-bottom:10px;}
.hw-boxwrap{display:block; width:100%;}
#hw-canvas{display:block; width:100%; background:var(--paper); border:1.5px solid var(--line2); border-radius:14px;
  touch-action:none; box-shadow:inset 0 1px 3px rgba(0,0,0,.04); max-width:100%;}

/* Varianten + Aktionen in einer Reihe */
.hw-belowrow{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.hw-actions{display:flex; gap:10px; flex:0 0 auto;}

/* Vorschau-Karte */
.hw-preview{padding:16px 18px;}
#hw-preview-canvas{display:block; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:12px; max-width:100%;}

/* ---- Varianten-Leiste ---- */
.hw-variants{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:44px;}
.hw-var-cap{color:var(--ink3); font-size:12.5px; font-weight:650; margin-right:2px;}
.hw-var-none{color:var(--ink3); font-size:13px; font-style:italic;}
.hw-var{position:relative;}
.hw-var-c{background:var(--paper); border:1.5px solid var(--line2); border-radius:10px; display:block;}
.hw-var-del{position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:50%;
  border:none; background:var(--danger,#c0392b); color:#fff; font:700 11px/19px sans-serif; cursor:pointer;
  padding:0; box-shadow:0 1px 4px rgba(0,0,0,.25);}

/* ================= Scanner (bleibt dunkel — Kamera-Kontext) ================= */
#scanner{position:fixed; inset:0; z-index:140; background:rgba(24,20,14,.93);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; padding:calc(12px + var(--sat)) 16px calc(16px + var(--sab));}
.scan-head{display:flex; align-items:center; gap:12px; color:#fffdf7;}
.scan-head h2{margin:0; font:500 22px/1.2 var(--serif);}
.scan-hint{color:rgba(255,253,247,.55); font-size:12.5px; flex:1;}
.scan-head .jx{color:rgba(255,253,247,.7);}
#scan-stage,#scan-preview{flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; min-height:0;}
#scan-stagewrap{position:relative;}
#scan-canvas{border-radius:10px; box-shadow:0 20px 70px rgba(0,0,0,.55); display:block; max-width:100%;}
.scan-handle{position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  background:rgba(184,147,79,.4); border:2.5px solid #fffdf7; box-shadow:0 2px 10px rgba(0,0,0,.4);
  touch-action:none; cursor:grab;}
.scan-handle::after{content:''; position:absolute; inset:9px; border-radius:50%; background:#b8934f;}
.scan-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center;}
#scanner .btn-ghost{background:rgba(255,253,247,.12); border-color:rgba(255,253,247,.2); color:#fffdf7;}
#scan-live{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; min-height:0;}
#scan-livewrap{position:relative;}
#scan-video{display:block; border-radius:12px; box-shadow:0 20px 70px rgba(0,0,0,.55); background:#000;}
#scan-liveoverlay{position:absolute; inset:0; pointer-events:none;}
#scan-livestatus{position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:rgba(24,20,14,.75); color:#fffdf7; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:11px; white-space:nowrap;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
#scan-livestatus.ok{background:rgba(62,125,104,.9);}
#scan-shutter{width:72px; height:72px; border-radius:50%; background:#fffdf7;
  border:5px solid rgba(255,253,247,.35); background-clip:padding-box;
  box-shadow:0 4px 18px rgba(0,0,0,.4);}
#scan-shutter:active{transform:scale(.9);}
#scan-result{max-height:calc(100vh - 290px); max-width:min(92vw,640px); border-radius:8px;
  box-shadow:0 20px 70px rgba(0,0,0,.55); background:#fff;}
.scan-mode{display:flex; gap:6px; background:rgba(255,253,247,.12); border:1px solid rgba(255,253,247,.18);
  border-radius:14px; padding:5px;}
.scan-mode button{padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600;
  color:rgba(255,253,247,.75);}
.scan-mode button.on{background:#fffdf7; color:#26221b;}

/* ================= Modal / Toast ================= */
#modal{position:fixed; inset:0; background:rgba(38,34,27,.4); z-index:120; display:none;
  align-items:center; justify-content:center; padding:20px;
  -webkit-backdrop-filter:blur(7px) saturate(1.1); backdrop-filter:blur(7px) saturate(1.1);}
#modal.on{display:flex;}
.mbox{width:min(440px,94vw); border-radius:24px; padding:24px;
  max-height:86vh; overflow-y:auto; animation:popin .28s var(--spring) both;}
.mbox h2{margin:0 0 14px; font:500 23px/1.2 var(--serif);}
.mbox p{color:var(--ink2); font-size:14px;}
/* WICHTIG: Checkboxen/Radios AUSNEHMEN. Diese Regel setzte `-webkit-appearance:none` auf JEDES
   input im Dialog — damit war das native Haekchen abgeschaltet, und da es keine :checked-Regel
   gab, sahen angehakte Kaestchen exakt aus wie leere (runde, immer leere Kreise). */
.mbox input:not([type=checkbox]):not([type=radio]),.mbox select{
  width:100%; background:var(--panel); border:1.5px solid var(--line2);
  border-radius:14px; padding:12px 14px; font-size:15px; margin-bottom:11px; outline:none;
  -webkit-appearance:none; transition:border-color .15s, box-shadow .15s;}
.mbox input:not([type=checkbox]):not([type=radio]):focus,.mbox select:focus{
  border-color:var(--bronze); box-shadow:0 0 0 4px var(--bronzesoft);}
/* Natives Aussehen zurueck -> echtes Haekchen; accent-color faerbt es bronze */
.mbox input[type=checkbox],.mbox input[type=radio]{
  -webkit-appearance:auto; appearance:auto; accent-color:var(--bronze);
  width:19px; height:19px; margin:0; padding:0; flex:0 0 auto; cursor:pointer;}
.mbox .btns{display:flex; gap:10px; justify-content:flex-end; margin-top:8px;}
.mbox .btns button{padding:10.5px 19px; border-radius:14px; font-size:14.5px; font-weight:650;}
.mbox .ok{background:var(--bronze-grad); color:#fffdf7;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 4px 14px rgba(141,106,52,.35);}
.mbox .ok.danger{background:linear-gradient(180deg,#c2603f,#a34428); box-shadow:0 4px 14px rgba(179,69,46,.3);}
.mbox .no{color:var(--ink2);}
.colorrow{display:flex; gap:9px; margin-bottom:13px; flex-wrap:wrap;}
.colorrow .swatch{width:33px; height:33px; border-radius:50%; border:2.5px solid rgba(38,34,27,.14);
  transition:transform .14s var(--spring), border-color .14s;}
.colorrow .swatch:hover{transform:scale(1.1);}
.colorrow .swatch.on{border-color:var(--ink); transform:scale(1.08);}
.set-row{display:flex; align-items:center; gap:10px; padding:12px 2px; border-bottom:1px solid var(--line);
  font-size:14.5px;}
.set-row:last-of-type{border-bottom:none;}
.set-row .ic{width:18px; height:18px; color:var(--ink2);}
/* Gruppierte Einstellungen: Abschnitts-Label + Karten (aufgeräumt statt eine flache Liste) */
.set-scroll{max-height:64vh; overflow-y:auto; margin:2px -4px 0; padding:0 4px;}
.set-label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bronze); padding:14px 4px 6px;}
.set-label:first-child{padding-top:4px;}
.set-group{background:rgba(38,34,27,.035); border:1px solid var(--line); border-radius:14px; padding:0 13px;}
:root[data-theme="dark"] .set-group{background:rgba(255,253,247,.035);}
.set-group .set-row{padding:11px 0; border-bottom:1px solid var(--line);}
.set-group .set-row:last-child{border-bottom:none;}
.set-row .val{margin-left:auto; color:var(--ink3); font-size:13px; max-width:55%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; user-select:text; -webkit-user-select:text;}
.set-row button.val{color:var(--bronze); font-weight:600;}
.set-row .toggle{margin-left:auto; width:48px; height:29px; border-radius:15px; background:rgba(38,34,27,.2);
  position:relative; transition:background .18s; flex:0 0 auto;}
.set-row .toggle::after{content:''; position:absolute; top:2.5px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#fffdf7; box-shadow:0 1.5px 5px rgba(0,0,0,.3); transition:left .18s var(--spring);}
.set-row .toggle.on{background:var(--bronze);}
.set-row .toggle.on::after{left:21px;}

#toast{position:fixed; left:50%; transform:translateX(-50%); top:calc(18px + var(--sat)); z-index:150;
  color:var(--ink); border-radius:15px; padding:12px 19px; font-size:13.5px; font-weight:550;
  display:none; max-width:88vw; animation:toastin .3s var(--spring) both;}
@keyframes toastin{from{opacity:0; transform:translate(-50%,-14px) scale(.94);} to{opacity:1; transform:translate(-50%,0) scale(1);}}

/* ================= Responsiv / Touch ================= */
@media (max-width:1320px){
  .jsuggest{display:none;}
}
@media (max-width:900px){
  .view{padding:20px 20px calc(56px + var(--sab));}
  #topbar{margin:10px 12px 0; gap:10px; padding:9px 14px;}
  .top-search{width:auto; flex:1;}
  .tb-spacer{display:none;}
  .jarvis-pill span:last-child{display:none;}
  .hero h1{font-size:32px;}
  .ebar{max-width:calc(100vw - 24px); bottom:calc(14px + var(--sab));}
  .jdock{bottom:calc(80px + var(--sab)); right:14px;}
  .jsuggest{display:none;}
  #fillbar,#replaybar{bottom:calc(80px + var(--sab));}
  .pagespill{top:calc(16px + var(--sat));}
  .etop .ctx-pill{display:none;}
}
@media (hover:none){
  .psc .acts{opacity:1;}
  .pcard .del{opacity:1;}
}
/* ===== Snapshot-Vorschauen: Schimmer-Platzhalter statt weisser Kaesten ===== */
img.snap{opacity:0; transition:opacity .3s ease;}
img.snap.ready{opacity:1;}
/* sanftes Schimmern, solange noch kein Bild da ist */
.fy .fy-thumb::before, .pcard::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    linear-gradient(100deg, transparent 25%, rgba(255,255,255,.45) 50%, transparent 75%),
    var(--paper);
  background-size:220% 100%, 100% 100%;
  animation:sk-shimmer 1.3s linear infinite;
}
/* Schimmern aus, sobald das Bild geladen ist, beim Neue-Seite-Knopf und bei Ladefehler */
.fy .fy-thumb:has(img.snap.ready)::before,
.pcard:has(img.snap.ready)::before,
.pcard.add::before,
.fy-thumb.nosh::before, .pcard.nosh::before{display:none;}
.fy .fy-thumb img, .pcard img{position:relative; z-index:1;}
@keyframes sk-shimmer{from{background-position:220% 0, 0 0;}to{background-position:-120% 0, 0 0;}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ================= Onboarding: Stundenplan verbinden + Fächer-Import ================= */
/* „Stundenplan verbinden"-Einladung im Wochen-Widget (unverknüpftes Konto) */
.hw-connect{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 18px; border-radius:18px; background:var(--panel); border:1.5px solid var(--line2);
  box-shadow:var(--card-shadow); transition:transform .14s var(--spring), border-color .15s;}
.hw-connect:hover{transform:translateY(-1px); border-color:var(--bronze);}
.hwc-ic{width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--bronze-grad); color:#fffdf7;}
.hwc-ic .ic{width:20px; height:20px;}
.hwc-t{display:flex; flex-direction:column; gap:2px;}
.hwc-t b{font-size:15px;} .hwc-t small{color:var(--ink2); font-size:12.5px;}
.hwc-go{width:18px; height:18px; margin-left:auto; color:var(--ink3); flex:0 0 auto;}

/* Onboarding-Karte für frische Konten */
.onb{background:var(--panel); border:1.5px solid var(--line2); border-radius:22px; padding:22px;
  box-shadow:var(--card-shadow); margin:26px 0 18px;}   /* 4px oben war zu eng an den Schnellzugängen */
.onb-head{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.onb-orb{width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, rgba(196,158,90,.28), transparent 70%);}
.onb-head h2{margin:0; font:500 21px/1.15 var(--serif);}
.onb-head p{margin:3px 0 0; color:var(--ink2); font-size:13.5px;}
.onb-steps{display:flex; flex-direction:column; gap:9px;}
.onb-step{display:flex; align-items:center; gap:13px; text-align:left; padding:13px 14px; border-radius:15px;
  background:var(--paper); border:1px solid var(--line); transition:transform .14s var(--spring), border-color .15s;}
.onb-step:hover{transform:translateX(2px); border-color:var(--bronze);}
.onb-n{width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--bronzesoft); color:var(--bronze2);}
.onb-n .ic{width:18px; height:18px;}
.onb-t{display:flex; flex-direction:column; gap:2px; min-width:0;}
.onb-t b{font-size:14.5px;} .onb-t small{color:var(--ink2); font-size:12.5px;}
.onb-go{width:17px; height:17px; margin-left:auto; color:var(--ink3); flex:0 0 auto;}

/* WebUntis-Verbindungs-Dialog */
.wu-head, .imp .wu-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; margin-bottom:16px;}
.wu-badge{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:4px;
  background:var(--bronze-grad); color:#fffdf7; box-shadow:0 4px 14px rgba(141,106,52,.3);}
.wu-badge .ic{width:24px; height:24px;}
.wu-head h2{margin:0; font:500 22px/1.15 var(--serif);}
.wu-head p{margin:0; color:var(--ink2); font-size:13.5px; line-height:1.5;}
.wu-res{max-height:min(46vh,300px); overflow-y:auto; margin:2px 0 8px; display:flex; flex-direction:column; gap:6px;}
.wu-hint{color:var(--ink3); font-size:13px; text-align:center; padding:16px 8px;}
.wu-school{display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; width:100%;
  padding:11px 14px; border-radius:13px; background:var(--paper); border:1px solid var(--line);
  transition:border-color .14s, transform .14s var(--spring);}
.wu-school:hover{border-color:var(--bronze); transform:translateX(2px);}
.wu-s-n{font-size:14.5px; font-weight:600; color:var(--ink);}
.wu-school small{color:var(--ink3); font-size:12px;}
.wu-err{color:var(--danger); font-size:13px; min-height:18px; margin:-4px 0 8px;}
.wu-alt{color:var(--ink3); font-size:12.5px; text-align:center; margin:4px 0 2px;}
.wu-alt .lnk, .lnk{color:var(--bronze); font-weight:600; text-decoration:underline; text-underline-offset:2px;}

/* Fächer-Import-Dialog */
.imp-list{display:flex; flex-direction:column; gap:7px; max-height:min(44vh,320px); overflow-y:auto; margin-bottom:14px;}
.imp-row{display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:13px;
  background:var(--paper); border:1px solid var(--line); transition:opacity .15s;}
.imp-row.off{opacity:.42;}
.imp-row.unknown{border-color:rgba(179,69,46,.4); background:var(--dangersoft);}
.imp-row input[type=checkbox]{width:20px; height:20px; flex:0 0 auto; accent-color:var(--bronze); margin:0;}
.imp-sh{font-size:11px; font-weight:700; color:var(--ink2); background:var(--line); border-radius:7px;
  padding:3px 7px; min-width:30px; text-align:center; flex:0 0 auto; letter-spacing:.02em;}
.imp-name{flex:1 1 auto; background:transparent !important; border:none !important; border-bottom:1.5px solid var(--line2) !important;
  border-radius:0 !important; padding:5px 2px !important; font-size:14.5px !important; margin:0 !important; min-width:0;}
.imp-name:focus{box-shadow:none !important; border-bottom-color:var(--bronze) !important;}
.imp-flag{font-size:10.5px; font-weight:700; color:var(--danger); flex:0 0 auto;}
.imp-opts{display:flex; flex-direction:column; gap:9px; margin-bottom:14px; padding-top:4px;}
.imp-opt{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); cursor:pointer;}
.imp-opt input[type=checkbox]{width:20px; height:20px; accent-color:var(--bronze); margin:0; flex:0 0 auto;}
.imp-steps{margin:0 0 12px; padding-left:20px; color:var(--ink2); font-size:13.5px; line-height:1.65;}
.imp-steps li{margin-bottom:7px;} .imp-steps b{color:var(--ink);}
/* Interaktiver Notizen-Import: kurze Anleitung + Fachwahl + Datei-Button */
.imp-how{background:var(--bronzesoft); border-radius:12px; padding:11px 13px; margin-bottom:14px;
  font-size:12.5px; line-height:1.55; color:var(--ink2);}
.imp-how b{color:var(--ink);}
.imp-lbl{display:block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--bronze); margin:0 2px 6px;}
.imp-sel{width:100%; margin-bottom:4px;}
.imp-note{background:var(--bronzesoft); border-radius:12px; padding:11px 13px; font-size:12.5px !important;
  color:var(--ink2) !important; margin:0 0 6px;}
.gimp-v, .gimp-w{flex:0 0 auto; width:52px !important; text-align:center; background:transparent !important;
  border:none !important; border-bottom:1.5px solid var(--line2) !important; border-radius:0 !important;
  padding:5px 2px !important; font-size:14.5px !important; margin:0 !important; font-variant-numeric:tabular-nums;}
.gimp-w{width:40px !important; color:var(--ink2);}
.gimp-v:focus, .gimp-w:focus{box-shadow:none !important; border-bottom-color:var(--bronze) !important;}

/* Einführung / Coach-Marks */
/* KEIN ganzflächiges Dimmen/Blur hier — das lag sonst auch über dem hervorgehobenen Element
   und machte es ununterscheidbar vom Hintergrund. Das Abdunkeln macht allein der Spotlight-Ring
   (riesiger Schatten AUSSERHALB des Rings) -> das gezeigte Objekt bleibt in voller Pracht. */
.tut-ov{position:fixed; inset:0; z-index:200; background:transparent; opacity:0; pointer-events:none;
  transition:opacity .2s;}
.tut-ov.on{opacity:1; pointer-events:auto;}
.tut-ring{position:absolute; border-radius:14px; border:2.5px solid var(--bronze);
  box-shadow:0 0 0 4px rgba(201,162,94,.35), 0 0 0 9999px rgba(28,20,10,.62);
  transition:all .28s var(--spring); pointer-events:none;}
.tut-bubble{position:absolute; width:280px; max-width:calc(100vw - 24px); background:var(--panel);
  border:1px solid var(--line2); border-radius:18px; padding:16px 17px; box-shadow:var(--card-shadow);
  animation:popin .26s var(--spring) both;}
.tut-step{font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--bronze2); margin-bottom:5px;}
.tut-bubble b{font:500 17px/1.2 var(--serif); color:var(--ink);}
.tut-bubble p{margin:5px 0 13px; font-size:13.5px; color:var(--ink2); line-height:1.5;}
.tut-btns{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.tut-skip{color:var(--ink3); font-size:13px; font-weight:550;}
.tut-next{background:var(--bronze-grad); color:#fffdf7; font-weight:650; font-size:14px;
  padding:8px 18px; border-radius:12px; box-shadow:0 3px 12px rgba(141,106,52,.3);}

/* ===== Dark Mode: UI-Flaechen sind kein Papier =====
   --paper bleibt im Dunkeln bewusst weiss, damit ein Blatt ein Blatt bleibt (Seiten,
   Vorschauen, Zeichenflaechen). UI-Chrome hat das faelschlich geerbt und leuchtet
   deshalb weiss. Karten -> --sunk, aktive Segment-Pillen -> --panel (so macht es
   .topnav button.on bereits richtig). Light Mode bleibt unveraendert. */
:root[data-theme="dark"] .cal-toggle button.on{background:var(--panel); box-shadow:none;}
:root[data-theme="dark"] .fld input,
:root[data-theme="dark"] .fld select,
:root[data-theme="dark"] .onb-step,
:root[data-theme="dark"] .wu-school,
:root[data-theme="dark"] .imp-row,
:root[data-theme="dark"] .pf-usage,
:root[data-theme="dark"] .pf-ref,
:root[data-theme="dark"] .pf-ref input,
:root[data-theme="dark"] .acc-row{background:var(--sunk);}

/* Verbrauchs-Leisten im Profil */
.pf-usage:empty{display:none;}
.pf-usage{margin:12px 0 4px; padding:13px 14px 11px; border-radius:16px;
  background:var(--paper); border:1px solid var(--line);}
.pf-u-top{display:flex; align-items:center; gap:10px; margin-bottom:11px;}
.pf-u-lbl{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3);}
.pf-plan{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 9px;
  border-radius:99px; border:1px solid var(--line); color:var(--ink2);}
.pf-plan.pro, .pf-plan.owner{border-color:transparent; background:var(--bronze); color:#fff;}
.pf-u-row + .pf-u-row{margin-top:10px;}
.pf-u-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:12.5px; color:var(--ink2); margin-bottom:5px;}
.pf-u-h b{font-size:12.5px; color:var(--ink); font-variant-numeric:tabular-nums;}
.pf-u-bar{height:7px; border-radius:99px; background:rgba(38,34,27,.12); overflow:hidden;}
.pf-u-bar i{display:block; height:100%; border-radius:99px; background:var(--bronze);
  transition:width .5s var(--spring);}
.pf-u-bar i.warn{background:#c8862c;}
.pf-u-bar i.full{background:var(--danger);}
.pf-u-foot{display:flex; align-items:center; gap:10px; margin-top:12px;}
.pf-u-foot small{font-size:11.5px; color:var(--ink3); line-height:1.35;}
.pf-u-cta{margin-left:auto; flex:0 0 auto; padding:8px 14px; border-radius:11px; border:none;
  background:var(--bronze); color:#fff; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:transform .14s var(--spring), filter .14s;}
.pf-u-cta:hover{transform:translateY(-1px); filter:brightness(1.06);}
.pf-u-cta.ghost{background:transparent; color:var(--bronze); border:1px solid var(--line);}
.pf-u-cta:disabled{opacity:.5; cursor:default; transform:none;}
:root[data-theme="dark"] .pf-u-bar{background:rgba(255,253,247,.13);}

/* ===== Pro-Karte auf der Startseite =====
   Erscheint nur, wenn der Nutzer die KI schon erlebt hat, und wird mit dem
   Verbrauch deutlicher (ruhig -> knapp -> aufgebraucht). Kein Dauer-Banner. */
.prohome:empty{display:none;}
.prohome{display:flex; align-items:center; gap:22px; margin:0 0 26px; padding:18px 22px;
  border-radius:20px; background:var(--sunk); border:1px solid var(--line2);
  box-shadow:var(--card-shadow);}
.prohome.knapp{border-color:var(--bronzeline);}
.prohome.out{border-color:var(--bronzeline); background:var(--bronzesoft);}
.ph-l{flex:1 1 auto; min-width:0;}
.ph-k{font:500 17px/1.25 var(--serif); color:var(--ink); margin-bottom:4px;}
.prohome p{margin:0 0 11px; font-size:13px; line-height:1.5; color:var(--ink2); max-width:52ch;}
.ph-bar{height:6px; border-radius:99px; background:rgba(38,34,27,.12); overflow:hidden; max-width:280px;}
.ph-bar i{display:block; height:100%; border-radius:99px; background:var(--bronze-grad);}
.prohome small{display:block; margin-top:5px; font-size:11.5px; color:var(--ink3);}
.ph-r{flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:3px;}
.ph-price{font:500 24px/1 var(--serif); color:var(--ink); white-space:nowrap;}
.ph-price small{display:inline; margin:0; font-size:12px; color:var(--ink3);}
.ph-per{font-size:11px; color:var(--ink3); white-space:nowrap;}
.ph-cta{margin-top:8px; padding:10px 18px; border-radius:12px; border:none;
  background:var(--bronze-grad); color:#fffdf7; font-size:13.5px; font-weight:650; cursor:pointer;
  box-shadow:0 2px 8px rgba(141,106,52,.3); white-space:nowrap;
  transition:transform .14s var(--spring), filter .14s;}
.ph-cta:hover{transform:translateY(-1px); filter:brightness(1.06);}
:root[data-theme="dark"] .ph-bar{background:rgba(255,253,247,.13);}
@media(max-width:760px){
  .prohome{flex-direction:column; align-items:stretch; gap:14px;}
  .ph-r{text-align:left; align-items:stretch;}
  .ph-cta{width:100%;}
  .ph-bar{max-width:none;}
}

/* Freunde einladen */
.pf-ref:empty{display:none;}
.pf-ref{margin:10px 0 4px; padding:13px 14px; border-radius:16px;
  background:var(--paper); border:1px solid var(--line);}
.pf-ref-t{margin:0 0 10px; font-size:12.5px; line-height:1.45; color:var(--ink2);}
.pf-ref-t b{color:var(--ink);}
.pf-ref-row{display:flex; gap:8px; align-items:center;}
.pf-ref-row input{flex:1 1 auto; min-width:0; padding:8px 11px; border-radius:11px;
  border:1px solid var(--line2); background:var(--bg); color:var(--ink2);
  font-size:12px; font-family:inherit; text-overflow:ellipsis;}
.pf-ref-row .pf-u-cta{margin-left:0;}

/* Konto-Wechsler im Profil */
.acc-list{margin:6px 0 4px;}
.acc-lbl{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin:8px 2px 6px;}
.acc-row{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:14px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); margin-bottom:7px; transition:border-color .14s, transform .14s var(--spring);}
.acc-row:hover{border-color:var(--bronze); transform:translateX(2px);}
.acc-av{width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--bronze-grad); color:#fffdf7; font-weight:700; font-size:15px;}
.acc-t{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
.acc-t b{font-size:14.5px;} .acc-t small{color:var(--ink3); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acc-x{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--ink3);}
.acc-x:hover{background:var(--dangersoft); color:var(--danger);} .acc-x .ic{width:14px; height:14px;}
.acc-add{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px;
  border-radius:14px; margin:2px 0 10px; background:var(--bronzesoft); color:var(--bronze2); font-weight:650; font-size:14px;}
.acc-add .ic{width:16px; height:16px;}

/* Kugel im KI-Feld = Schließen-Knopf */
.orb-close{-webkit-appearance:none; appearance:none; border:none; padding:0; margin:0;
  cursor:pointer; flex:0 0 auto; position:relative;}
.orb-close::after{content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(120,90,40,.35); transition:box-shadow .16s;}
.orb-close:hover::after{box-shadow:0 0 0 4px rgba(120,90,40,.18);}

/* ===================== Prüfungsvorbereitung ===================== */
.pp-banner{background:var(--panel); border:1px solid var(--line2); border-left:4px solid var(--bronze);
  border-radius:18px; padding:14px 18px; margin:0 0 18px; box-shadow:var(--card-shadow);}
.pp-banner.soon{border-left-color:#c9922e;}
.pp-banner.urg{border-left-color:#c0563d;}
.pp-b-t{font:500 21px/1.2 var(--serif); color:var(--ink);}
.pp-b-m{font-size:13px; color:var(--ink3); margin-top:3px;}
.pp-wrap{display:flex; flex-direction:column; gap:20px; max-width:820px;}
.pp-sec{background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:16px;
  box-shadow:var(--card-shadow);}
.pp-lbl{font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.pp-lbl .spacer{flex:1;}
.pp-hint{text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink3); font-size:11px;}
.pp-mini{background:transparent; border:1px solid var(--line2); color:var(--ink2); border-radius:10px;
  padding:4px 10px; font-size:11px; font-weight:600; text-transform:none; letter-spacing:0;}
.pp-ta{width:100%; box-sizing:border-box; background:var(--sunk); border:1px solid var(--line2);
  border-radius:12px; padding:11px 13px; color:var(--ink); font:400 14px/1.5 var(--sans); resize:vertical;}
.pp-ta:focus{outline:none; border-color:var(--bronzeline);}
.pp-cards{display:flex; flex-direction:column; gap:8px;}
.pp-card{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--sunk);
  border:1px solid var(--line2); border-radius:14px; padding:11px 13px; color:var(--ink);}
.pp-card.on{border-color:var(--bronzeline); background:var(--bronzesoft);}
.pp-card.bundle{border-left:3px solid var(--bronzeline);}
.pp-chk{width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid var(--line2);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:#fffdf7;}
.pp-card.on .pp-chk{background:var(--bronze-grad); border-color:transparent;}
.pp-c-b{display:flex; flex-direction:column; gap:2px; min-width:0;}
.pp-c-b b{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pp-c-b small{color:var(--ink3); font-size:12px;}
.pp-foot{display:flex; align-items:center; gap:14px;}
.pp-cnt{font-size:13px; color:var(--ink3);}
.pp-go{margin-left:auto; background:var(--bronze-grad); color:#fffdf7; border:none; border-radius:16px;
  padding:12px 24px; font-size:15px; font-weight:600; box-shadow:0 10px 26px rgba(38,34,27,.12);}
.pp-go:disabled{opacity:.4; box-shadow:none;}
.pp-empty{color:var(--ink3); font-size:13px; padding:6px 2px;}
.pp-load{display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px;
  text-align:center; color:var(--ink2);}
.pp-load b{font:500 19px/1.3 var(--serif); color:var(--ink);}
.pp-load span{font-size:13px; color:var(--ink3); max-width:380px;}
.pp-spin{width:26px; height:26px; border-radius:50%; border:2.5px solid var(--line2);
  border-top-color:var(--bronze); animation:pp-rot .8s linear infinite;}
@keyframes pp-rot{to{transform:rotate(360deg);}}
/* Themenkarte */
.pp-topics{display:flex; flex-direction:column; gap:8px;}
.pp-topic{background:var(--sunk); border:1px solid var(--line2); border-left:3px solid var(--ink3);
  border-radius:12px; padding:10px 13px;}
.pp-topic.s-sitzt{border-left-color:#4f8a54;}
.pp-topic.s-wackelt{border-left-color:#c9922e;}
.pp-topic.s-luecke{border-left-color:#c0563d;}
.pp-t-h{display:flex; align-items:center; gap:10px;}
.pp-t-h b{font-weight:600; font-size:14px;}
.pp-t-st{margin-left:auto; font-size:11px; font-weight:700; color:var(--ink3); white-space:nowrap;}
.pp-topic.s-sitzt .pp-t-st{color:#4f8a54;}
.pp-topic.s-wackelt .pp-t-st{color:#c9922e;}
.pp-topic.s-luecke .pp-t-st{color:#c0563d;}
.pp-topic small{color:var(--ink3); font-size:12px; line-height:1.5; display:block; margin-top:3px;}
/* Diagnose */
.pp-q{background:var(--sunk); border:1px solid var(--line2); border-radius:14px; padding:16px;}
.pp-q-top{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.pp-q-n{font-size:11px; font-weight:700; color:var(--ink3); letter-spacing:.05em;}
.pp-q-t{margin-left:auto; font-size:11px; color:var(--bronze2); background:var(--bronzesoft);
  border-radius:20px; padding:2px 9px; font-weight:600; max-width:55%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.pp-q-txt{font:400 17px/1.5 var(--serif); color:var(--ink); margin-bottom:14px;}
.pp-show{width:100%; background:transparent; border:1px dashed var(--bronzeline); color:var(--bronze2);
  border-radius:12px; padding:11px; font-size:14px; font-weight:600;}
.pp-a{border-top:1px solid var(--line); padding-top:12px; margin-bottom:12px;}
.pp-a-l{font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:5px;}
.pp-a-t{font-size:15px; line-height:1.55; color:var(--ink);}
.pp-woher{margin-top:10px; background:transparent; border:1px solid var(--line2); color:var(--ink2);
  border-radius:10px; padding:5px 11px; font-size:12px; font-weight:600;}
.pp-rate{display:flex; gap:8px;}
.pp-r{flex:1; border:1px solid var(--line2); background:var(--panel); color:var(--ink);
  border-radius:12px; padding:11px 6px; font-size:13px; font-weight:600;}
.pp-r.r-sitzt{border-color:rgba(79,138,84,.5); color:#4f8a54;}
.pp-r.r-wackelt{border-color:rgba(201,146,46,.5); color:#c9922e;}
.pp-r.r-luecke{border-color:rgba(192,86,61,.5); color:#c0563d;}
.pp-res{text-align:center; padding:14px 6px;}
.pp-res-h{font:500 24px/1.25 var(--serif); color:var(--ink);}
.pp-res-t{font-size:14px; color:var(--ink2); margin-top:8px; line-height:1.55;}
.pp-again{margin-top:16px; background:transparent; border:1px solid var(--line2); color:var(--ink2);
  border-radius:12px; padding:9px 18px; font-size:13px; font-weight:600;}
.ev-open.ev-prep{cursor:pointer;}
.ev-open.ev-prep:hover .ev-ti{color:var(--bronze2);}


/* ===== Landing-Anbindung: sanfter Einstieg + Pro-Pille (Monetarisierung) ===== */
.fresh #splash{display:none;}
.login-box{animation:loginIn .55s cubic-bezier(.32,1.5,.4,1) both;}
@keyframes loginIn{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}}
.login-legal{margin:16px 0 0; font-size:11.5px; color:var(--ink3); text-align:center;}
.login-legal a{color:var(--ink2); text-decoration:none;}
.login-legal a:hover{color:var(--bronze2);}
.pro-pill{display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  background:var(--bronze-grad); color:#fffdf7; font-size:13px; font-weight:650; flex:0 0 auto;
  box-shadow:0 2px 8px rgba(141,106,52,.3); white-space:nowrap;}
.pro-pill .pp-ic{font-size:11px;}
.pro-pill.have{background:var(--bronzesoft); color:var(--bronze2); border:1px solid var(--bronzeline); box-shadow:none;}
/* Kontingent leer: die Pille ist ab hier eine Ansage, kein Schmuck mehr */
.pro-pill.leer{background:var(--danger); box-shadow:0 2px 8px rgba(179,69,46,.32);}
/* schlichte Zeile — der Kasten daruber (.up-msg) ist die Meldung; zwei Kaesten stapeln sich sonst */
.up-usage{margin:6px 0 2px; font-size:12px; color:var(--ink3); background:none; border:none; padding:0;}
@media(max-width:640px){ .pro-pill span:last-child{display:none;} .pro-pill{padding:8px 11px;} }

/* ===================== Abfragen (Stufe 3) ===================== */
.pp-res-go{margin-top:18px; display:block; margin-left:auto; margin-right:auto;}
.pp-res .pp-again{margin-top:10px;}
.pq-card{background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:18px;
  box-shadow:var(--card-shadow);}
.pq-top{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.pq-n{font-size:11px; font-weight:750; letter-spacing:.05em; color:var(--ink3);}
.pq-form{font-size:11px; font-weight:600; color:var(--bronze2); background:var(--bronzesoft);
  border-radius:20px; padding:2px 9px;}
.pq-top .pp-q-t{margin-left:auto;}
.pq-q{font:400 19px/1.45 var(--serif); color:var(--ink); margin-bottom:14px;}
/* Die Schreibfläche: echtes Papier, kein Formularfeld */
.pq-fieldwrap{background:var(--paper); border:1px solid var(--line2); border-radius:14px;
  overflow:hidden; box-shadow:inset 0 1px 3px rgba(38,34,27,.05);}
.pq-fieldwrap.done{opacity:.85;}
.pq-ink{display:block; width:100%; height:auto; touch-action:none; cursor:crosshair;}
.pq-fieldwrap.done .pq-ink{cursor:default;}
.pq-tools{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap;}
.pq-tools .spacer{flex:1;}
.pq-t{background:transparent; border:1px solid var(--line2); color:var(--ink2); border-radius:11px;
  padding:8px 14px; font-size:13px; font-weight:600;}
/* Korrektur */
.pq-res{margin-top:16px; border-top:1px solid var(--line); padding-top:14px;}
.pq-v-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.pq-badge{font-size:13px; font-weight:700; border-radius:20px; padding:4px 12px;
  background:var(--bronzesoft); color:var(--bronze2);}
.pq-res.v-richtig .pq-badge{background:rgba(79,138,84,.14); color:#4f8a54;}
.pq-res.v-fast .pq-badge{background:rgba(201,146,46,.16); color:#c9922e;}
.pq-res.v-falsch .pq-badge{background:rgba(192,86,61,.14); color:#c0563d;}
.pq-res.v-leer .pq-badge{background:rgba(38,34,27,.07); color:var(--ink3);}
.pq-read{font-size:12px; color:var(--ink3); font-style:italic;}
.pq-why{font-size:15px; line-height:1.55; color:var(--ink);}
.pq-tip{margin-top:8px; font-size:13px; line-height:1.5; color:var(--bronze2);
  background:var(--bronzesoft); border-radius:10px; padding:8px 11px;}
.pq-sol{margin-top:10px; font-size:13px; color:var(--ink2);}
.pq-sol summary{cursor:pointer; color:var(--ink3); font-weight:600; font-size:12px;}
.pq-sol div{margin-top:6px; line-height:1.55;}


/* ===== Login-Buehne: das Atelier empfaengt (statt leerem Raum) ===== */
.login{overflow:hidden;}
.login::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 560px at 78% -8%, rgba(184,147,79,.14), transparent 60%),
    radial-gradient(700px 480px at -6% 34%, rgba(61,91,214,.06), transparent 55%);}
:root[data-theme="dark"] .login::before{
  background:
    radial-gradient(900px 560px at 78% -8%, rgba(201,162,94,.12), transparent 60%),
    radial-gradient(700px 480px at -6% 34%, rgba(90,120,220,.07), transparent 55%);}
.login-stage{position:absolute; inset:0; pointer-events:none;}
.lst-float{position:absolute; display:flex; flex-direction:column; gap:2px;
  background:var(--panel); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--card-shadow); padding:11px 15px; opacity:.85;}
.lst-k{font-size:12.5px; font-weight:650; color:var(--ink);}
.lst-s{font-size:10.5px; color:var(--ink3);}
.lst-hand{font-family:var(--handfont); font-size:26px; line-height:1; color:var(--bronze2);}
.lst-a{left:max(24px, 50% - 480px); top:22%; transform:rotate(-2.5deg); animation:lstDrift 7s ease-in-out infinite;}
.lst-b{right:max(24px, 50% - 470px); top:17%; transform:rotate(2deg); animation:lstDrift 6s ease-in-out infinite 1s;}
.lst-c{right:max(40px, 50% - 440px); bottom:24%; transform:rotate(-1.5deg); animation:lstDrift 8s ease-in-out infinite .5s;}
@keyframes lstDrift{50%{margin-top:-9px;}}
.lst-orb{position:absolute; left:max(60px, 50% - 400px); bottom:20%; width:38px; height:38px;
  border-radius:50%; background:var(--orb); box-shadow:0 6px 18px rgba(16,28,78,.35);
  animation:lstDrift 5s ease-in-out infinite;}
.lst-shelf{position:absolute; left:0; right:0; bottom:0; height:56px; display:flex;
  align-items:flex-end; justify-content:center; gap:5px; opacity:.28; padding-bottom:10px;}
:root[data-theme="dark"] .lst-shelf{opacity:.32;}
.lst-shelf::after{content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:min(520px, 84vw); height:7px; border-radius:2px;
  background:linear-gradient(180deg,#8a6238 0 2px,#66451f 2px,#4a3117);}
.lst-shelf i{width:17px; height:var(--h,30px); border-radius:2px 3px 0 0; background:var(--c,#6e2b2b);
  box-shadow:inset -2px 0 3px rgba(0,0,0,.25); margin-bottom:7px;}
@media(max-width:900px){ .lst-float,.lst-orb{display:none;} }
/* Weicher Wechsel Login -> App */
#app{animation:appIn .5s ease both;}
@keyframes appIn{from{opacity:0;} to{opacity:1;}}
@media(prefers-reduced-motion:reduce){ .lst-float,.lst-orb{animation:none;} #app{animation:none;} }