/* 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;
  --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;
  --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(28px) saturate(1.6);
  backdrop-filter:blur(28px) saturate(1.6); border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);}
.glass-strong{background:var(--glass-strong); -webkit-backdrop-filter:blur(32px) saturate(1.6);
  backdrop-filter:blur(32px) saturate(1.6); border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);}
.glass-card{background:var(--glass-strong); -webkit-backdrop-filter:blur(30px) saturate(1.6);
  backdrop-filter:blur(30px) 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(20px) saturate(1.5);
  backdrop-filter:blur(20px) 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;}
.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(28px) saturate(1.6);
  backdrop-filter:blur(28px) 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(20px) saturate(1.5); backdrop-filter:blur(20px) 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;}

@media(max-width:900px){
  .topnav button span{display:none;}
  .topnav button{padding:9px 11px;}
  .tb-sep-r{display:none;}
  #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(20px) saturate(1.5); backdrop-filter:blur(20px) 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(20px) saturate(1.5);
  backdrop-filter:blur(20px) 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(24px) saturate(1.6); backdrop-filter:blur(24px) 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(32px) saturate(1.6); backdrop-filter:blur(32px) 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(26px) saturate(1.6); backdrop-filter:blur(26px) 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:rgba(255,255,255,.5); border:1px solid var(--glass-line);}
.hw-nav button:hover{background:rgba(255,255,255,.8);}
.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:baseline; gap:5px; font-size:11px; padding:2px 4px; border-radius:6px; background:var(--bg);}
.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:.5;}
.hw-l.entfaellt .lf{text-decoration:line-through; color:var(--danger);}
.hw-l.aenderung{background:var(--bronzesoft);}
.hw-l.aenderung .lf{color:var(--bronze2);}
@media (max-width:760px){
  .hw-grid{grid-template-columns:repeat(3,1fr);}
}

.foryou{display:flex; gap:16px; margin-top:24px; flex-wrap:wrap;}
.fy{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(26px) saturate(1.6);
  backdrop-filter:blur(26px) 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;}
.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(24px) saturate(1.6);
  backdrop-filter:blur(24px) 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 30px 60px rgba(38,34,27,.3);}
/* 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:40px; 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;}
.book-pg{position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:9.5px; font-weight:700; color:var(--tc,#e2c185); opacity:.72;}
.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;
  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);}
.shelf-plate{position:absolute; left:50%; top:3px; transform:translateX(-50%);
  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;
  max-width:60%; overflow:hidden; text-overflow:ellipsis;
  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(20px) saturate(1.5); backdrop-filter:blur(20px) 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(20px) saturate(1.5); backdrop-filter:blur(20px) 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(155px,1fr)); gap:16px;}
.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;}

/* ================= 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-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;}
@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;}
.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%;}
.task:hover{background:rgba(38,34,27,.05);}
.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;}
.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;}
.tl-b{position:absolute; border-radius:11px; padding:7px 12px; overflow:hidden;
  background:color-mix(in srgb, var(--bc) 30%, var(--panel));
  border:1px solid color-mix(in srgb, var(--bc) 48%, transparent);
  border-left:4px solid var(--bc);
  box-shadow:0 3px 11px rgba(38,34,27,.14), 0 1px 2px rgba(38,34,27,.08); cursor:default;}
.tl-b.event{cursor:pointer;}
.tl-b b{display:block; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tl-b small{font-size:12px; color:var(--ink2);}
.tl-b.exam{background:color-mix(in srgb, var(--bc) 32%, var(--panel)); border-left-width:5px;}
:root[data-theme="dark"] .tl-b{background:color-mix(in srgb, var(--bc) 30%, var(--panel));}
:root[data-theme="dark"] .tl-b.exam{background:color-mix(in srgb, var(--bc) 42%, 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-b.cancelled{opacity:.6;}
.tl-b.cancelled b{text-decoration:line-through; color:var(--ink3);}
.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);}
.wg-b{position:absolute; border-radius:8px; padding:3px 7px; overflow:hidden; line-height:1.15;
  background:color-mix(in srgb, var(--bc) 15%, var(--panel));
  border-left:3px solid var(--bc); box-shadow:0 2px 6px rgba(38,34,27,.12); cursor:default;}
.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-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));}

/* 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;}
.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-del:hover{color:var(--danger); border-color:var(--danger);}
.ev-del .ic{width:16px; height:16px;}
.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 118px; gap:8px;}
.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);}
.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;}
.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%;}
#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;}

/* Split-View: zweites Blatt neben dem Editor (Referenz; antippen = bearbeiten) */
#editor.split2 #ewrap{right:44%;}
#refpane{position:absolute; top:0; right:0; bottom:0; width:44%; z-index:6; display:none;
  flex-direction:column; background:var(--bg);
  border-left:1px solid rgba(38,34,27,.12); box-shadow:-10px 0 34px rgba(38,34,27,.12);}
#editor.split2 #refpane{display:flex;}
.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-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;}
.rp-body img{display:block; width:100%; height:auto; border-radius:4px; background:var(--paper); cursor:pointer;
  box-shadow:0 2px 8px rgba(38,34,27,.1), 0 20px 54px rgba(38,34,27,.20);}
/* 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:820px){
  #editor.split2 #ewrap{right:0; bottom:47%;}
  #refpane{width:100%; top:auto; bottom:0; height:47%; border-left:none;
    border-top:1px solid rgba(38,34,27,.12); box-shadow:0 -10px 30px rgba(38,34,27,.12);}
}

/* 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);}
.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;}
.ps-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:13px;
  overflow-y:auto; padding:2px;}
.psc{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:grab;
  touch-action:none; transition:transform .15s var(--spring), box-shadow .15s, opacity .15s;}
.psc img{width:100%; height:100%; object-fit:contain; object-position:top center; display:block; pointer-events:none; background:var(--paper);}
.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; 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; top:5px; right:5px; display:flex; gap:5px; opacity:0; transition:opacity .15s;}
.psc:hover .acts{opacity:1;}
.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);}
.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(34px) saturate(1.6);
  backdrop-filter:blur(34px) 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:0 auto; 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:5px; max-height:132px; 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:300px; height:60px; perspective:620px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);}
.hw-wi{position:absolute; left:50%; top:50%; transform-origin:center;
  font:600 16px/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(--ink); font:700 30px/1 var(--serif);}
: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,.35); z-index:120; display:none;
  align-items:center; justify-content:center; padding:20px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
#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;}
.mbox input,.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:focus,.mbox select:focus{border-color:var(--bronze); box-shadow:0 0 0 4px var(--bronzesoft);}
.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);}
.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;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}