:root{
  --brand:#17b7a6; --brand-2:#0e9384; --brand-soft:rgba(23,183,166,.15); --brand-ink:#6ff0e0;
  /* Serifenschrift der Marke. Times New Roman ist auf Windows/Mac/iOS da;
     danach echte Ersatzschriften, damit es nirgends auf eine Zufallsschrift faellt. */
  --serif:"Times New Roman",Times,"Liberation Serif","Nimbus Roman",Georgia,serif;
  /* Seitenrand von Kopfleiste und Inhalt. Eine Zahl - hier drehen, wenn es
     enger oder weiter werden soll. */
  --rand:clamp(20px,5vw,132px);
  /* Dark: kein neutrales Grau, sondern ein kühles Tiefschwarz mit Teal-Stich.
     Oberflächen heben sich durch Outline + Innenkante ab, nicht nur durch Helligkeit. */
  --bg:#07090b; --surface:#111619; --surface-2:#182025; --ink:#f2f6f6; --muted:#94a3a3; --faint:#65767a;
  --line:rgba(140,225,215,.10); --line2:rgba(140,225,215,.20);
  --kante:inset 0 1px 0 rgba(255,255,255,.055);
  --ok:#2ec78f; --ok-soft:rgba(46,199,143,.14); --ok-ink:#7fe5c0;
  --no:#ff5a57; --no-soft:rgba(255,90,87,.14); --no-ink:#ff9b99;
  --amber-soft:rgba(240,194,112,.15); --amber-ink:#f1c476;
  --glass:rgba(9,13,15,.66);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -12px rgba(0,0,0,.5);
  --shadow-lift:0 6px 16px rgba(0,0,0,.4),0 26px 52px -14px rgba(0,0,0,.6);
  --ring:rgba(23,183,166,.4);
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --r-sm:12px; --r-md:16px; --r-lg:22px;
  /* Farben je Rechtsgebiet */
  --zivil:#4f9cf9; --zivil-soft:rgba(79,156,249,.16); --zivil-ink:#a8cdff;
  --straf:#f2708f; --straf-soft:rgba(242,112,143,.16); --straf-ink:#ffb3c4;
  --oeff:#a583f5; --oeff-soft:rgba(165,131,245,.16); --oeff-ink:#cfbafd;
  --grund:#f0b354; --grund-soft:rgba(240,179,84,.16); --grund-ink:#f7d49b;
}
:root.light{
  --brand:#0d9488; --brand-2:#0b7d73; --brand-soft:rgba(13,148,136,.10); --brand-ink:#0b6e64;
  /* Light: warmes Papierweiß statt kaltem Grau, Karten mit klarer Kante */
  --bg:#eef2f0; --surface:#ffffff; --surface-2:#f4f8f7; --ink:#101a19; --muted:#5d6a68; --faint:#74827e;
  --line:rgba(12,60,55,.10); --line2:rgba(12,60,55,.17);
  --kante:inset 0 1px 0 rgba(255,255,255,.9);
  --ok:#10a06f; --ok-soft:rgba(16,160,111,.12); --ok-ink:#0c6b52;
  --no:#e0413f; --no-soft:rgba(224,65,63,.10); --no-ink:#a32d2d;
  --amber-soft:rgba(180,120,20,.12); --amber-ink:#7a4a08;
  --glass:rgba(238,242,240,.70);
  --shadow:0 1px 2px rgba(15,60,55,.05),0 12px 30px -14px rgba(15,60,55,.16);
  --shadow-lift:0 8px 20px rgba(15,60,55,.1),0 28px 52px -16px rgba(15,60,55,.22);
  --ring:rgba(13,148,136,.32);
  --zivil:#2b6fd4; --zivil-soft:rgba(43,111,212,.10); --zivil-ink:#1d539f;
  --straf:#d2456a; --straf-soft:rgba(210,69,106,.10); --straf-ink:#a32f50;
  --oeff:#7c53d8; --oeff-soft:rgba(124,83,216,.10); --oeff-ink:#5c39a8;
  --grund:#b57a16; --grund-soft:rgba(181,122,22,.12); --grund-ink:#8a5c0d;
}

/* Lesemodus: warmes Papier für lange Sessions. Weniger Blauanteil,
   geringerer Kontrastumfang als Weiß auf Schwarz – schont die Augen,
   ohne dass Text an Schärfe verliert. */
:root.lesen{
  --brand:#0a7d70; --brand-2:#086055; --brand-soft:rgba(10,125,112,.12); --brand-ink:#075c52;
  --bg:#e8dcc4; --surface:#f7efe0; --surface-2:#f1e6d2; --ink:#2b2318; --muted:#5a4d38; --faint:#6f6047;
  --line:rgba(80,60,25,.16); --line2:rgba(80,60,25,.26);
  --kante:inset 0 1px 0 rgba(255,255,255,.6);
  --paper:#fbf6ec;
  --glass:rgba(232,220,196,.78);
  --shadow:0 1px 2px rgba(90,70,30,.08),0 12px 30px -14px rgba(90,70,30,.22);
  --shadow-lift:0 8px 20px rgba(90,70,30,.14),0 28px 52px -16px rgba(90,70,30,.28);
  --ring:rgba(10,125,112,.34);
  --zivil:#245ea8; --zivil-soft:rgba(36,94,168,.12); --zivil-ink:#1b4880;
  --straf:#b03a5c; --straf-soft:rgba(176,58,92,.12); --straf-ink:#8a2b46;
  --oeff:#6a46b8; --oeff-soft:rgba(106,70,184,.12); --oeff-ink:#523489;
  --grund:#9a6612; --grund-soft:rgba(154,102,18,.14); --grund-ink:#754d0c;
  --ok:#0d8a5f; --ok-soft:rgba(13,138,95,.12); --ok-ink:#096646;
  --no:#c23b34; --no-soft:rgba(194,59,52,.10); --no-ink:#932c26;
  --amber-soft:rgba(150,100,15,.14); --amber-ink:#6b4708;
}
/* Im Lesemodus tritt das Raster zurück – Papier hat keine Gitterlinien */
:root.lesen .main::after{display:none}
:root.lesen .main::before{
  background:radial-gradient(50rem 32rem at 12% -8%, rgba(10,125,112,.07), transparent 62%)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em}
button{font-family:inherit;color:inherit}
h1,h2,h3{margin:0}
::selection{background:var(--brand-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
a{color:var(--brand)}

/* thin, unobtrusive scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

.app{display:flex;flex-direction:column;min-height:100vh}

/* ---------- Topbar (transparent / frosted) ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:none;display:flex;align-items:center;gap:18px;padding:13px var(--rand)}
.brand{font-family:var(--serif);font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;flex-shrink:0;white-space:nowrap}
.brand span{color:var(--brand-ink)}
.tagline{display:none}
.motto{color:var(--brand-ink);font-weight:500}
.nav{display:flex;flex-direction:row;align-items:center;gap:7px;flex:1;min-width:0;justify-content:center}
.nav-item{display:flex;align-items:center;gap:9px;padding:10px 15px;border:none;border-radius:12px;background:none;color:var(--muted);font-size:14px;font-weight:500;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s var(--ease),color .2s var(--ease)}
.nav-item svg{width:19px;height:19px;flex-shrink:0;opacity:.9}
.nav-item:hover{background:var(--brand-soft);color:var(--ink)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.top-foot{display:flex;align-items:center;gap:12px;flex-shrink:0}
.streak{display:inline-flex;align-items:center;gap:5px;background:var(--amber-soft);color:var(--amber-ink);padding:6px 13px;border-radius:999px;font-weight:600;font-size:13.5px;white-space:nowrap}

/* Kategorien mit Untermenü */
.navgroup{position:relative;flex-shrink:0}
.navgroup.open .nav-top{background:var(--brand-soft);color:var(--brand-ink)}
.dropdown{position:absolute;top:calc(100% + 12px);left:0;min-width:282px;background:var(--surface);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow-lift);padding:8px;display:none;z-index:60}
.navgroup.open .dropdown{display:block;animation:fadeUp .22s var(--ease-out)}
.dropdown.dd-right{left:auto;right:0}
.dd-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:none;border-radius:12px;padding:11px 13px;cursor:pointer;color:var(--ink);transition:background .15s var(--ease)}
.dd-item:hover{background:var(--brand-soft)}
.dd-t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.dd-s{font-size:12px;color:var(--muted);line-height:1.45}
.dd-item.active .dd-t{color:var(--brand-ink)}
.semnote{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.gcard.soon{opacity:.62}

/* Schmalere Screens: nur Icons in der Leiste */
@media (max-width:900px){
  .nav-item span:not(.dd-t):not(.dd-s):not(.avatar){display:none}
  .nav-item{padding:10px 11px}
  .topbar-inner{gap:14px;padding:11px 16px}
}

/* ---------- Main / page ---------- */
.main{flex:1;min-width:0}
.page{max-width:none;margin:0;padding:46px var(--rand) 90px}
.page.narrow{max-width:min(1200px,100%);margin-inline:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.page-head{margin-bottom:6px}
.page-head h1{font-family:var(--serif);font-size:37px;font-weight:700;letter-spacing:-.005em;line-height:1.1;margin-bottom:8px}
.muted{color:var(--muted);font-size:14.5px;line-height:1.5}

.dash{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;margin-top:28px;align-items:start}
.dash-main,.dash-side{display:flex;flex-direction:column;gap:0;min-width:0}
.dash-side{gap:16px}
.section-label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:26px 2px 13px}
.dash-side .section-label{margin:4px 2px 0}

/* ---------- Hero (streak) ---------- */
.hero{position:relative;background:linear-gradient(135deg,#16b8a6 0%,#0e9384 55%,#0b6e64 100%);border-radius:var(--r-lg);padding:24px 26px;display:flex;align-items:center;justify-content:space-between;color:#fff;box-shadow:0 10px 30px -10px rgba(14,147,132,.55);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.18),transparent 50%);pointer-events:none}
.hero-num{font-size:48px;font-weight:700;line-height:1;letter-spacing:-.03em}
.hero-lbl{font-size:13px;opacity:.9;margin-top:4px}
.hero-best{font-size:12px;opacity:.72;margin-top:9px}
.hero-flame{font-size:46px;line-height:1}

/* ---------- Week strip ---------- */
.card-plain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:17px;box-shadow:var(--shadow)}
.weekstrip{display:flex;justify-content:space-between}
.day{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.day .dot{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;transition:transform .2s var(--ease-out)}
.day .dot svg{width:15px;height:15px}
.day .dot.on{background:var(--brand);border-color:var(--brand);box-shadow:0 4px 12px -3px var(--ring)}
.day .dot.today{border-color:var(--brand);border-width:2px}
.day span{font-size:11px;color:var(--muted)}

/* ---------- Goal ---------- */
.goal{display:flex;align-items:center;gap:11px;background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r-sm);padding:14px 16px;font-size:13.5px;font-weight:500}
.goal svg{width:20px;height:20px;flex-shrink:0}
.goal-done{background:var(--ok-soft);color:var(--ok-ink)}

/* ---------- Case hero card (Heute) ---------- */
.casecard{display:block;width:100%;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .2s var(--ease)}
.casecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line2)}
.casecard:active{transform:translateY(-1px) scale(.995)}
.casecard-head{display:flex;gap:6px;margin-bottom:13px}
.pill{font-size:11.5px;font-weight:600;letter-spacing:.01em;background:var(--brand-soft);color:var(--brand-ink);padding:4px 11px;border-radius:999px}
.pill.ok{background:var(--ok-soft);color:var(--ok-ink)}
.casecard-title{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:0}
.casecard-sub{font-size:14.5px;color:var(--muted);line-height:1.6;margin-top:7px}
.casecard-cta{display:inline-flex;align-items:center;gap:6px;margin-top:18px;color:var(--brand);font-weight:600;font-size:14.5px}
.casecard-cta svg{width:17px;height:17px;transition:transform .25s var(--ease-out)}
.casecard:hover .casecard-cta svg{transform:translateX(3px)}

/* ---------- Tiles ---------- */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px;cursor:pointer;box-shadow:var(--shadow);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line2)}
.tile:active{transform:translateY(-1px) scale(.99)}
.tile-ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tile-ic svg{width:21px;height:21px}
.tile-main{flex:1;min-width:0}
.tile-title{font-size:15px;font-weight:600;letter-spacing:-.01em}
.tile-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.tile>svg{width:18px;height:18px;color:var(--faint);flex-shrink:0;transition:transform .25s var(--ease-out)}
.tile:hover>svg{transform:translateX(3px)}
.locked{display:flex;align-items:center;gap:14px;margin-top:12px;border:1px dashed var(--line2);border-radius:var(--r-md);padding:15px}
.locked-ic{width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--faint);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.locked-ic svg{width:21px;height:21px}

/* ---------- Fälle grid ---------- */
.bar{height:7px;background:var(--line);border-radius:999px;margin:15px 0 2px;overflow:hidden;max-width:340px}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width .6s var(--ease-out)}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:16px;margin-top:26px}
.gcard{display:flex;flex-direction:column;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s var(--ease);min-height:148px}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line2)}
.gcard:active{transform:translateY(-1px) scale(.99)}
.gcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.gcard-title{font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.gcard-sub{font-size:13px;color:var(--muted);line-height:1.55;margin-top:7px}
.status{font-size:11px;font-weight:600;color:var(--faint);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.status svg{width:13px;height:13px}
.status.ok{color:var(--ok-ink)}
.status.no{color:var(--no-ink)}

/* ---------- Case solving ---------- */
.back{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;padding:6px 0;margin-bottom:14px;transition:color .15s var(--ease)}
.back:hover{color:var(--ink)}
.back svg{width:18px;height:18px;transition:transform .25s var(--ease-out)}
.back:hover svg{transform:translateX(-3px)}
.casebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.casebox-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.casebox-gebiet{font-size:12px;color:var(--faint)}
.sv{margin:0 0 18px;font-size:16.5px;line-height:1.65}
.frage{margin:0 0 14px;font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.55}
.options{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;padding:15px 16px;border:1.5px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:14.5px;line-height:1.45;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease-out)}
.opt:hover:not(:disabled){border-color:var(--brand);transform:translateY(-1px)}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink);font-weight:600}
.opt.wrong{border-color:var(--no);background:var(--no-soft);color:var(--no-ink)}
.opt .mark{flex-shrink:0;display:flex}
.opt .mark svg{width:18px;height:18px}
.reveal{animation:fadeUp .35s var(--ease-out)}
.verdict{font-weight:700;font-size:17px;letter-spacing:-.02em;margin:20px 0 12px}
.verdict.ok{color:var(--ok-ink)}.verdict.no{color:var(--no-ink)}
.loesung{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 17px}
.loesung-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;font-weight:600}
.loesung p{margin:0;font-size:14.5px;line-height:1.65}
.juribox{display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px}
.avatar{width:38px;height:38px;border-radius:50%;background:#ED93B1;color:#4B1528;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.juribox-tx{flex:1;min-width:0}
.atitle{font-size:13px;font-weight:600}
.asub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.play{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--brand);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .2s var(--ease-out),border-color .2s var(--ease)}
.play:hover{transform:scale(1.06);border-color:var(--brand)}
.play svg{width:15px;height:15px}
.btnrow{display:flex;gap:11px;margin-top:20px}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:14px;border:none;border-radius:13px;background:var(--brand);color:#fff;font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:transform .15s var(--ease-out),box-shadow .2s var(--ease),opacity .15s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px var(--ring)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:17px;height:17px}
.btn.ghost{background:var(--surface);border:1px solid var(--line2);color:var(--ink);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);box-shadow:none}
.btn.wide{width:100%}

/* ---------- Karteikarten ---------- */
.flash{position:relative;margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 26px 28px;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;box-shadow:var(--shadow);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.flash:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.flash:active{transform:translateY(-1px) scale(.995)}
.flash-tag{position:absolute;top:16px;left:18px;font-size:11.5px;font-weight:600;background:var(--brand-soft);color:var(--brand-ink);padding:4px 11px;border-radius:999px}
.flash-front{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:0}
.flash-hint{margin-top:16px;font-size:12px;color:var(--faint)}
.flash-back{margin-top:18px;font-size:15px;line-height:1.65;border-top:1px solid var(--line);padding-top:18px;animation:fade .25s var(--ease)}
.kdone{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 24px;text-align:center;box-shadow:var(--shadow)}
.kdone .emoji{font-size:46px}
.kdone .tile-title{margin-top:12px;font-size:18px}
.kdone .tile-sub{margin-top:4px;margin-bottom:20px}

/* ---------- Stats / badges (Du) ---------- */
/* Abstand zur Levelkarte darüber – sonst klebt die Fortschrittsleiste
   direkt auf den XP- und Fälle-Kacheln. */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;
  box-shadow:var(--kante),var(--shadow);position:relative;overflow:hidden;
  transition:transform .35s var(--ease-out),border-color .2s var(--ease)}
/* Feiner Farbstreifen oben – dieselbe Handschrift wie die Heatmap darunter */
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--brand),transparent 78%);opacity:.85}
.stat:hover{transform:translateY(-2px);border-color:var(--line2)}
.stat-num{font-size:27px;font-weight:700;letter-spacing:-.03em}
.stat-lbl{font-size:12.5px;color:var(--muted);margin-top:4px}
.badgegrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.badge{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow);opacity:.5;filter:grayscale(1);transition:opacity .3s var(--ease),filter .3s var(--ease)}
.badge.on{opacity:1;filter:none}
.badge-ic{font-size:27px;flex-shrink:0;line-height:1}
.badge-t{font-size:13.5px;font-weight:600}
.badge-s{font-size:11.5px;color:var(--muted);margin-top:2px}
.btn.danger{background:var(--surface);border:1px solid var(--line2);color:var(--no-ink);box-shadow:none}
.btn.danger:hover{border-color:var(--no);box-shadow:none}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);max-width:90%;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:13.5px;font-weight:500;text-align:center;z-index:30;opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease-out);pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Responsive (mobile) ---------- */
@media (max-width:820px){
  .topbar-inner{padding:8px 14px;gap:10px}
  .brand{font-size:18px;letter-spacing:.05em}
  .themetoggle{padding:6px}
  .streak{padding:5px 10px;font-size:13px}
  .dash{grid-template-columns:1fr;gap:20px}
  .page{padding:26px 18px 72px}
  .page-head h1{font-size:27px}
}
@media (max-width:520px){
  .brand span{display:none}
}

/* ---------- Klausur-Trainer ---------- */
.hintbox{margin-top:18px;background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r-sm);padding:13px 15px;font-size:13px;line-height:1.6}
.answer{display:block;width:100%;margin-top:16px;min-height:240px;padding:16px 17px;border:1.5px solid var(--line2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-family:inherit;font-size:14.5px;line-height:1.65;resize:vertical;box-shadow:var(--shadow);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.answer:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.kinote{margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.6;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px}

/* Juri erklaert - fuer die wenigen Hinweise, die echtes Klausurwissen sind.
   Eule links, Sprechblase rechts, Zipfel zeigt auf die Eule. */
.juritipp{display:flex;align-items:flex-start;gap:12px;margin:22px 0 4px;max-width:680px}
.juritipp-owl{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brand-soft);border:1px solid var(--line2);box-shadow:var(--kante)}
.juritipp-owl svg{width:30px;height:30px}
.juritipp-bubble{position:relative;flex:1;background:var(--surface-2);border:1px solid var(--line2);border-radius:var(--r-md);padding:13px 16px;box-shadow:var(--kante)}
.juritipp-bubble::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;background:var(--surface-2);border-left:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}
.juritipp-name{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:5px}
.juritipp-tx{font-size:13.5px;line-height:1.65;color:var(--ink)}
.juritipp-tx strong{color:var(--brand-ink);font-weight:700}
:root.light .juritipp-name,:root.lesen .juritipp-name,
:root.light .juritipp-tx strong,:root.lesen .juritipp-tx strong{color:var(--brand-2)}
@media (max-width:520px){.juritipp{gap:9px}.juritipp-owl{width:38px;height:38px}.juritipp-owl svg{width:25px;height:25px}}
.kfb{margin-top:24px}
.kfb-score{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow);margin-bottom:11px}
.kfb-num{font-size:34px;font-weight:700;letter-spacing:-.03em}
.kfb-num span{font-size:15px;color:var(--muted);font-weight:500;margin-left:2px}
.kfb-score .bar{max-width:none;margin:12px 0 8px}
.btn.ai{margin-top:12px;background:linear-gradient(135deg,#17b7a6,#0e9384);box-shadow:0 8px 22px -8px var(--ring)}
.btn.ai:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px var(--ring)}
/* Zwei KI-Knöpfe nebeneinander: gleich groß, gleiche Familie – aber nicht
   identisch, sonst wirkt es doppelt gemoppelt. Der zweite ist umgekehrt
   verlaufend und eine Spur ruhiger. */
.kibtns{gap:11px;margin-top:16px}
.kibtns .btn{flex:1;margin-top:0;min-height:50px;font-size:14.5px;gap:9px}
.ai-ic{font-size:16px;line-height:1}
.btn.ai.ai2{background:linear-gradient(135deg,#0e9384,#0b6f78);
  box-shadow:0 8px 22px -10px rgba(14,147,132,.75)}
.btn.ai.ai2::before{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.16);pointer-events:none}
.btn.ai.ai2:hover{box-shadow:0 12px 28px -9px rgba(14,147,132,.85)}
@media (max-width:560px){.kibtns{flex-direction:column}}
.kfb-ai{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:18px 19px;box-shadow:var(--shadow);animation:fadeUp .4s var(--ease-out)}
.kfb-ai-head{font-weight:700;color:var(--brand-ink);margin-bottom:10px;font-size:15px;letter-spacing:-.01em}
.kfb-ai-body{font-size:14px;line-height:1.7;color:var(--ink)}
.kfb-ai-body strong{color:var(--ink);font-weight:650}
.chk{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px}
.chk svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.chk.hit svg{color:var(--ok)}
.chk.miss svg{color:var(--no)}
.chk-l{font-size:13.5px;font-weight:500}
.chk-t{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.muster{margin-top:16px}
.skizze{margin:0;padding-left:22px;display:grid;gap:11px}
.skizze li{line-height:1.55}
.skizze li::marker{color:var(--brand);font-weight:700}
.skizze-t{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.6}
.muster-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:17px 18px;font-size:13.5px;line-height:1.75;box-shadow:var(--shadow)}

/* ---------- Filter-Chips & Gebiets-Fortschritt ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 2px}
.chip{border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:13px;font-weight:500;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease-out)}
.chip:hover{border-color:var(--brand);color:var(--ink)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px -6px var(--ring)}
.gcard-tag{margin-top:auto;padding-top:12px;font-size:11.5px;color:var(--faint);font-weight:500;display:flex;flex-wrap:wrap;align-items:center;gap:6px;line-height:1.5}
.rgrow{margin-bottom:14px}
.rgrow-top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:500;margin-bottom:7px}
.rgrow .bar{margin:0;max-width:none}

/* ---------- Gesetze ---------- */
.gsearch{display:block;width:100%;margin-top:18px;padding:13px 16px;border:1.5px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-family:inherit;font-size:14.5px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.gsearch:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.lawlist{display:flex;flex-direction:column;gap:13px;margin-top:16px}
.glaw{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:17px 18px;box-shadow:var(--shadow)}
.glaw-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.glaw-title{font-size:16px;font-weight:700;letter-spacing:-.02em}
.glaw-inhalt{font-size:13px;color:var(--muted);line-height:1.55;margin-top:6px}
.gdef{margin-top:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;line-height:1.6}
.gdef-lbl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:5px}
.glink{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:500;color:var(--brand);text-decoration:none}
.glink:hover{text-decoration:underline}

/* ---------- Lernen (Gebiets-Hub) ---------- */
.deflist{display:flex;flex-direction:column;gap:11px;margin-top:13px}
.def{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--shadow)}
.def-t{font-size:15px;font-weight:700;letter-spacing:-.01em}
.def-n{font-size:11.5px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);padding:2px 9px;border-radius:999px;margin-left:6px;white-space:nowrap}
.def-b{font-size:13.5px;color:var(--muted);line-height:1.65;margin-top:6px}

/* ---------- Theme-Schalter ---------- */
.themetoggle{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:7px 9px;border-radius:11px;color:var(--muted);font-size:13px;font-weight:500;transition:background .2s var(--ease),color .2s var(--ease)}
.tt-label{display:none}
.themetoggle:hover{background:var(--brand-soft);color:var(--brand-ink)}
/* Drei Ansichten – ein Knopf, der durchschaltet. Das Zeichen dreht sich beim Wechsel. */
.tt-ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line2);
  font-size:14px;line-height:1;flex-shrink:0}
@media (prefers-reduced-motion: no-preference){
  .tt-ic{transition:transform .45s var(--spring),background .25s var(--ease)}
  .themetoggle:hover .tt-ic{transform:rotate(-18deg) scale(1.06)}
  .themetoggle:active .tt-ic{transform:rotate(-180deg) scale(.94)}
}

/* ---------- Prüfungsschemata (Lernen) ---------- */
.sch{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:11px;overflow:hidden;box-shadow:var(--shadow)}
.sch-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:none;border:none;padding:15px 16px;cursor:pointer;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);transition:background .15s var(--ease)}
.sch-head:hover{background:var(--brand-soft)}
.sch-head svg{width:18px;height:18px;color:var(--faint);flex-shrink:0;transition:transform .25s var(--ease-out)}
.sch.open .sch-head svg{transform:rotate(90deg);color:var(--brand-ink)}
.sch-body{display:none;padding:4px 16px 15px;border-top:1px solid var(--line)}
.sch.open .sch-body{display:block;animation:fade .25s var(--ease)}
.sch-step{padding:8px 0}
.sch-step.lvl1{padding-left:14px}
.sch-step.lvl2{padding-left:28px}
.sch-step.lvl3{padding-left:42px}
.sch-t{font-size:13.5px;font-weight:500;line-height:1.5}
.sch-step.lvl0 .sch-t{color:var(--brand-ink);font-weight:600}
.sch-d{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:3px}
.jumprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.jumplink{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--line2);color:var(--muted);font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:999px;cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease-out)}
.jumplink:hover{border-color:var(--brand);color:var(--brand-ink);transform:translateY(-1px)}
.lf-row{padding:7px 0;font-size:13px;line-height:1.6}
.lf-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600;margin-bottom:3px}
.lf-kern{color:var(--ink)}
.lf-link{color:var(--brand);text-decoration:none;font-weight:500}
.lf-link:hover{text-decoration:underline}

/* ---------- Motion: smooth entrance (respects reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference){
  .page{animation:fade .3s var(--ease) both}
  .page-head,.section-label,.casecard,.hero,.card-plain,.goal,.chips,.casebox,.flash,.kdone,.jumprow,.hintbox,.answer{animation:fadeUp .55s var(--ease-out) both}
  .tilegrid>*,.cardgrid>*,.statgrid>*,.badgegrid>*,.lawlist>*,.deflist>*{animation:fadeUp .55s var(--ease-out) both}
  .tilegrid>*:nth-child(2),.cardgrid>*:nth-child(2),.statgrid>*:nth-child(2),.badgegrid>*:nth-child(2),.lawlist>*:nth-child(2),.deflist>*:nth-child(2){animation-delay:.05s}
  .tilegrid>*:nth-child(3),.cardgrid>*:nth-child(3),.statgrid>*:nth-child(3),.badgegrid>*:nth-child(3),.lawlist>*:nth-child(3),.deflist>*:nth-child(3){animation-delay:.1s}
  .tilegrid>*:nth-child(4),.cardgrid>*:nth-child(4),.statgrid>*:nth-child(4),.badgegrid>*:nth-child(4),.lawlist>*:nth-child(4),.deflist>*:nth-child(4){animation-delay:.15s}
  .tilegrid>*:nth-child(5),.cardgrid>*:nth-child(5),.lawlist>*:nth-child(5),.deflist>*:nth-child(5){animation-delay:.2s}
  .tilegrid>*:nth-child(6),.cardgrid>*:nth-child(6),.lawlist>*:nth-child(6),.deflist>*:nth-child(6){animation-delay:.25s}
  .cardgrid>*:nth-child(n+7),.lawlist>*:nth-child(n+7),.deflist>*:nth-child(n+7){animation-delay:.3s}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- Jurace: Maskottchen, Session, Level, Balance ---------- */
.owl-svg{display:block;width:44px;height:44px}
.avatar.owl-avatar{background:var(--brand-soft);color:var(--brand-ink)}
.avatar.owl-avatar .owl-svg{width:30px;height:30px}

.session{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;border:none;border-radius:var(--r-lg);padding:20px 22px;color:#fff;background:linear-gradient(135deg,#16b8a6 0%,#0e9384 60%,#0b6e64 100%);box-shadow:0 12px 30px -12px rgba(14,147,132,.6);position:relative;overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.session::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,rgba(255,255,255,.2),transparent 55%);pointer-events:none}
.session:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(14,147,132,.65)}
.session:active{transform:translateY(-1px) scale(.995)}
.session-owl{flex-shrink:0;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);border-radius:16px;box-shadow:0 4px 12px -4px rgba(0,0,0,.25)}
.session-owl .owl-svg{width:44px;height:44px}
.session-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.session-lbl{font-size:12.5px;opacity:.92;font-weight:500}
.session-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:1px}
.session-sub{font-size:13px;opacity:.9;margin-top:3px}
.session-go{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease-out)}
.session-go svg{width:20px;height:20px;color:#fff}
.session:hover .session-go{transform:translateX(3px)}

.levelcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;box-shadow:var(--shadow)}
.levelcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
.lvl-name{font-size:16px;font-weight:700;letter-spacing:-.02em}
.lvl-sub{font-size:12px;color:var(--muted);margin-top:2px}
.lvl-xp{font-size:13px;font-weight:600;color:var(--brand-ink)}
.levelcard .bar{margin:0;max-width:none}
.lvl-foot{font-size:12px;color:var(--muted);margin-top:8px}

/* Kopfzeile der gefuehrten Runde: Pensum und was danach noch kommt.
   Die frueheren .balance-/.ziel-Regeln sind entfallen, seit der Abschluss
   am Ende der Runde steht und nicht mehr auf der Startseite. */
.sessbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 14px;margin-bottom:16px;box-shadow:var(--shadow)}
.sessbar-t{flex:1;min-width:0;font-size:13.5px;font-weight:650}
.sessbar-s{font-size:12px;color:var(--muted);white-space:nowrap}

/* Zwischenstopp in der Karteikarten-Sitzung: erst fragen, dann weiter */
.kpause{text-align:center;max-width:440px;margin:0 auto;padding:26px 20px}
.kpause-ic{font-size:40px;line-height:1}
.kpause-t{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:0;margin-top:12px}
.kpause-s{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:8px}
.kpause-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.kpause-row .btn{flex:1 1 190px}

/* Herkunftszeile über dem Fall: zeigt, dass der Semesterfilter greift */
.sessnote{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;
  background:var(--brand-soft);color:var(--brand-ink);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:650}

.krate{display:flex;gap:9px;margin-top:16px}
.krate-btn{flex:1;flex-direction:column;gap:1px;padding:11px 8px}
.krate-btn span{font-size:14px;font-weight:600}
.krate-btn small{font-size:10.5px;font-weight:500;opacity:.75}
/* Vier Stufen: von rot nach grün, damit die Wahl ohne Lesen erfassbar ist */
.krate.vier{gap:7px}
.krate.vier .krate-btn{padding:11px 5px}
.krate.vier .krate-btn span{font-size:13px}
.krate.vier .krate-btn small{font-size:9.5px;line-height:1.25;display:block}
.krate-btn.s0{border-color:color-mix(in srgb,var(--no) 40%,transparent);color:var(--no-ink)}
.krate-btn.s0:hover{background:var(--no-soft);border-color:var(--no)}
.krate-btn.s1{border-color:color-mix(in srgb,var(--grund) 40%,transparent);color:var(--grund-ink)}
.krate-btn.s1:hover{background:var(--amber-soft);border-color:var(--grund)}
.krate-btn.s2{border-color:color-mix(in srgb,var(--ok) 38%,transparent);color:var(--ok-ink)}
.krate-btn.s2:hover{background:var(--ok-soft);border-color:var(--ok)}
@media (max-width:520px){
  .krate.vier{flex-wrap:wrap}
  .krate.vier .krate-btn{flex:1 1 calc(50% - 4px)}
}

/* ---------- Energie-Check-in ---------- */
.energy{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:17px 18px;box-shadow:var(--shadow);margin-bottom:6px}
.energy-q{display:flex;align-items:center;gap:13px}
.energy-owl{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center}
.energy-owl .owl-svg{width:32px;height:32px}
.energy-t{font-size:15px;font-weight:650;letter-spacing:-.01em}
.energy-s{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.energy-row{display:flex;gap:9px;margin-top:14px}
.energy-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .18s var(--ease),transform .18s var(--ease-out),background .18s var(--ease)}
.energy-btn span{font-size:22px;line-height:1}
.energy-btn:hover{border-color:var(--brand);transform:translateY(-2px);background:var(--brand-soft)}

/* ---------- Streak-Alarm ---------- */
.alarm{display:flex;gap:13px;align-items:flex-start;border-radius:var(--r-md);padding:15px 16px;margin-bottom:14px;background:var(--no-soft);border:1px solid var(--no)}
.alarm.ice{background:rgba(56,160,255,.12);border-color:#3aa0ff}
.alarm-ic{font-size:26px;line-height:1;flex-shrink:0}
.alarm-t{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.alarm-s{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:3px}

/* ---------- Fehlerbuch ---------- */
.errbanner{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-top:12px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:14px 16px;cursor:pointer;box-shadow:var(--shadow);transition:transform .3s var(--ease-out),border-color .2s var(--ease)}
.errbanner:hover{transform:translateY(-2px);border-color:var(--brand)}
.errbanner>svg{width:18px;height:18px;color:var(--faint);margin-left:auto;flex-shrink:0}
.errbanner-ic{font-size:24px;line-height:1;flex-shrink:0}
.errbanner-t{display:block;font-size:14.5px;font-weight:650}
.errbanner-s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.errlist{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.errcard{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--no);border-radius:var(--r-md);padding:15px 17px;box-shadow:var(--shadow)}
.errcard.done{border-left-color:var(--ok);opacity:.62}
.errcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.errcard-title{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.errcard-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- Plan & Crashkurs ---------- */
.planinfo{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.6}
.examrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:9px;box-shadow:var(--shadow)}
.examrow.past{opacity:.5}
.examrow-t{font-size:14.5px;font-weight:600}
.examrow-s{font-size:12.5px;color:var(--muted);margin-top:2px}
/* Klausurtermin anlegen – als eine zusammenhängende Leiste statt drei
   lose Felder. Auswahl und Datum bekommen eigene Zeichen. */
.examadd{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;box-shadow:var(--kante),var(--shadow)}
.examadd .gsearch{margin-top:0;flex:1;min-width:170px;width:auto;background:var(--surface-2)}
.examadd .btn{flex:0 0 auto;padding:12px 22px}
/* Eigener Pfeil statt System-Standard */
.examadd select.gsearch{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.examadd select.gsearch:hover,.examadd input.gsearch:hover{border-color:var(--brand)}
/* Datumsfeld: Kalendersymbol einfärben, damit es nicht fremd wirkt */
.examadd input[type="date"]{cursor:pointer;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.examadd input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;transition:opacity .2s var(--ease);
  filter:invert(58%) sepia(58%) saturate(420%) hue-rotate(130deg)}
.examadd input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
:root.light .examadd input[type="date"]::-webkit-calendar-picker-indicator{filter:none}
@media (max-width:560px){
  .examadd{flex-direction:column}
  .examadd .btn{width:100%}
}
.crash{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);margin-top:4px}
.crash-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.crash-t{font-size:19px;font-weight:700;letter-spacing:-.02em}
.crash-s{font-size:13px;color:var(--muted);margin-top:3px}
.crash-days{font-size:38px;font-weight:700;color:var(--brand);letter-spacing:-.03em;line-height:1}
.crash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.crash-item{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 8px;text-align:center}
.crash-num{font-size:21px;font-weight:700;letter-spacing:-.02em}
.crash-lbl{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35}
.crash-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:14px}
select.gsearch{cursor:pointer}

@media (max-width:820px){
  .nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .crash-grid{grid-template-columns:1fr 1fr}
  .examadd .gsearch{min-width:0;flex:1 1 100%}
}
@media print{
  .topbar,.errcard-row,.btnrow,.toast{display:none !important}
  .errcard{break-inside:avoid;box-shadow:none}
  .page{padding:0}
}

/* ---------- Vorlesen (TTS) ---------- */
.aktionsrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- Crashkurs-Seite ---------- */
.crashbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow);margin-top:18px}
.crashbar .chips{margin:8px 0 0}
.crashbar-lbl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.crashbar-row+.crashbar-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.crashsum{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.crashsum-pill{background:var(--brand-soft);color:var(--brand-ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600}
.crashempty{text-align:center;padding:44px 20px;color:var(--muted)}
.crashempty .emoji{font-size:44px;display:block;margin-bottom:10px}
.miniq{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:9px;box-shadow:var(--shadow)}
.miniq-t{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.miniq-s{font-size:13px;color:var(--muted);line-height:1.6;margin-top:4px}
.miniq-n{font-size:11.5px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);padding:2px 9px;border-radius:999px;margin-left:6px;display:inline-block;max-width:100%;overflow-wrap:anywhere}

/* ============================================================
   FARBE: Rechtsgebiete einfärben
   ============================================================ */
[class*="rg-"]{--c:var(--brand);--c-soft:var(--brand-soft);--c-ink:var(--brand-ink)}
.rg-zivil{--c:var(--zivil);--c-soft:var(--zivil-soft);--c-ink:var(--zivil-ink)}
.rg-straf{--c:var(--straf);--c-soft:var(--straf-soft);--c-ink:var(--straf-ink)}
.rg-oeff{--c:var(--oeff);--c-soft:var(--oeff-soft);--c-ink:var(--oeff-ink)}
.rg-grund{--c:var(--grund);--c-soft:var(--grund-soft);--c-ink:var(--grund-ink)}

/* Farbiger Kopfstreifen auf Karten */
.gcard[class*="rg-"]{position:relative;overflow:hidden}
.gcard[class*="rg-"]::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c),transparent 85%);opacity:.9}
.gcard[class*="rg-"]:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.pill[class*="rg-"]{background:var(--c-soft);color:var(--c-ink)}
.miniq[class*="rg-"]{border-left-color:var(--c)}
.miniq[class*="rg-"] .miniq-n{background:var(--c-soft);color:var(--c-ink)}
.def[class*="rg-"]{border-left:3px solid var(--c)}
.def[class*="rg-"] .def-n{background:var(--c-soft);color:var(--c-ink)}

/* Fach-Icon-Kachel */
.fachic{width:38px;height:38px;border-radius:11px;background:var(--c-soft);color:var(--c);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s var(--spring)}
.fachic svg{width:21px;height:21px}
.gcard:hover .fachic{transform:scale(1.09) rotate(-4deg)}
.gcard-top{display:flex;align-items:center;gap:12px;margin-bottom:11px}

/* Farbige Semester-Überschrift */
.semdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:8px;vertical-align:middle}

/* ============================================================
   DEKOR: sanfte Farbverläufe im Hintergrund
   ============================================================ */
.main{position:relative}
.main::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46rem 30rem at 12% -8%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 60%),
    radial-gradient(38rem 26rem at 92% 4%, color-mix(in srgb,var(--oeff) 13%,transparent), transparent 62%),
    radial-gradient(40rem 28rem at 70% 96%, color-mix(in srgb,var(--zivil) 10%,transparent), transparent 60%)}
.page{position:relative;z-index:1}

/* ============================================================
   ANIMATIONEN
   ============================================================ */
/* Fortschrittsbalken: fließender Glanz */
.bar-fill{position:relative;overflow:hidden}
.bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-100%);animation:shimmer 2.6s var(--ease) infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}}

/* Karteikarte: echter 3D-Flip */
.flash{perspective:1400px}
.flash-back{animation:flipIn .5s var(--ease-out) both;transform-origin:top}
@keyframes flipIn{from{opacity:0;transform:rotateX(-32deg) translateY(-6px)}to{opacity:1;transform:none}}

/* Richtige Antwort: freundlicher Puls */
.opt.correct{animation:pop .45s var(--spring)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
.verdict.ok{animation:riseIn .45s var(--ease-out) both}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Eule Juri: leichtes Wippen + Blinzeln */
.owl-svg{animation:bob 4.5s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1.5deg)}}
.session:hover .owl-svg{animation:bobFast .9s var(--ease) infinite}
@keyframes bobFast{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}

/* Flamme flackert */
.hero-flame{animation:flicker 2.8s var(--ease) infinite;transform-origin:bottom center}
@keyframes flicker{0%,100%{transform:scale(1) rotate(-2deg)}35%{transform:scale(1.09) rotate(2deg)}65%{transform:scale(.97) rotate(-1deg)}}

/* Buttons: weicher Druck */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.28);opacity:0;transition:opacity .4s var(--ease)}
.btn{position:relative;overflow:hidden}
.btn:active::after{opacity:1;transition:none}

/* Chips: sanftes Einrasten */
.chip{transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .25s var(--spring)}
.chip.on{transform:translateY(-1px)}
.chip:active{transform:scale(.95)}

/* Zahlen zählen hoch */
.stat-num,.kfb-num,.hero-num,.crash-days{animation:countIn .6s var(--ease-out) both}
@keyframes countIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* Ladeskelett für KI-Antworten */
.skel{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--line),var(--line2),var(--line));background-size:200% 100%;animation:skel 1.4s linear infinite;margin-bottom:9px}
.skel.w80{width:80%}.skel.w60{width:60%}.skel.w90{width:90%}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Abzeichen: leuchten beim Freischalten */
.badge.on{animation:badgeIn .55s var(--spring) both}
@keyframes badgeIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.badge.on .badge-ic{animation:bob 5s var(--ease) infinite}

/* Kachel-Icons reagieren */
.tile:hover .tile-ic{transform:scale(1.08) rotate(-4deg);transition:transform .35s var(--spring)}
.tile-ic{transition:transform .35s var(--spring)}

/* Energie-Knöpfe */
.energy-btn span{transition:transform .35s var(--spring);display:inline-block}
.energy-btn:hover span{transform:scale(1.2) translateY(-2px)}

/* Leere Zustände: Illustration */
.illu{display:block;margin:0 auto 18px;width:150px;height:auto}
.illu .il-pulse{animation:ilPulse 3.4s var(--ease) infinite}
@keyframes ilPulse{0%,100%{opacity:.45}50%{opacity:.9}}

@media (prefers-reduced-motion: reduce){
  .owl-svg,.hero-flame,.bar-fill::after,.skel,.badge.on .badge-ic,.illu .il-pulse{animation:none !important}
}

/* ============================================================
   GAMIFICATION
   ============================================================ */
/* Tagesaufgaben */
.questbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;box-shadow:var(--shadow)}
.quest{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);transition:background .2s var(--ease)}
.quest+.quest{margin-top:2px}
.quest:hover{background:var(--brand-soft)}
.quest-ic{font-size:20px;line-height:1;flex-shrink:0;width:26px;text-align:center}
.quest-main{flex:1;min-width:0}
.quest-t{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.quest .bar{margin:0;height:6px;max-width:none}
.quest-xp{font-size:12.5px;font-weight:700;color:var(--brand-ink);flex-shrink:0;min-width:42px;text-align:right}
.quest.done{opacity:.62}
.quest.done .quest-t{text-decoration:line-through}
.quest.done .quest-xp{color:var(--ok-ink)}

/* Rang */
.rangbox{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--brand-soft),transparent 70%);border:1px solid var(--line2);border-radius:var(--r-lg);padding:20px 22px;margin-top:18px}
.rang-ic{font-size:44px;line-height:1;flex-shrink:0;animation:bob 5s var(--ease) infinite}
.rang-main{flex:1;min-width:0}
.rang-t{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:9px}
.rangbox .bar{margin:0;max-width:none}
.rang-s{font-size:12.5px;color:var(--muted);margin-top:8px}

/* Meisterschaft */
.mastgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:4px}
.mrow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;box-shadow:var(--shadow)}
.mrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.mrow-n{font-size:13.5px;font-weight:600}
.mrow .bar{margin:0;max-width:none;height:7px}

/* Erfolge */
.erfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:13px}
.erf{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 15px;box-shadow:var(--shadow);opacity:.55;filter:grayscale(.85);transition:opacity .3s var(--ease),filter .3s var(--ease),transform .3s var(--ease-out)}
.erf.on{opacity:1;filter:none}
.erf.on:hover{transform:translateY(-2px)}
.erf-ic{font-size:27px;line-height:1;flex-shrink:0;width:34px;text-align:center}
.erf-main{flex:1;min-width:0}
.erf-t{font-size:14px;font-weight:650;letter-spacing:-.01em}
.erf-s{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px;margin-bottom:8px}
.erf .bar{margin:0;height:5px;max-width:none}
.erf-prog{font-size:11px;color:var(--faint);margin-top:5px}
.erf-done{font-size:11.5px;font-weight:600;color:var(--ok-ink)}
.erf.on.bronze{border-color:rgba(205,127,50,.5)}
.erf.on.silber{border-color:rgba(170,180,195,.5)}
.erf.on.gold{border-color:rgba(240,179,84,.6)}
.erf.on.platin{border-color:color-mix(in srgb,var(--oeff) 55%,transparent)}
.erf.on.gold .erf-ic,.erf.on.platin .erf-ic{animation:bob 4s var(--ease) infinite}

/* Aktivitäts-Heatmap */
.heatmap{display:flex;gap:4px;justify-content:space-between}
.hm-col{display:flex;flex-direction:column;gap:4px;flex:1}
.hm-cell{display:block;width:100%;aspect-ratio:1;border-radius:3px;background:var(--line);transition:transform .2s var(--ease-out)}
.hm-cell.on{background:var(--brand)}
.hm-cell.fut{opacity:.35}
.hm-cell:hover{transform:scale(1.35)}
.hm-legend{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:10px;font-size:11px;color:var(--faint)}
.hm-legend .hm-cell{width:10px;height:10px;flex:0 0 auto}

/* Schwebende XP */
.xpfloat{position:fixed;top:72px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;padding:9px 18px;border-radius:999px;font-weight:700;font-size:14.5px;z-index:70;pointer-events:none;box-shadow:0 8px 24px -6px var(--ring);animation:xpUp 2.2s var(--ease-out) forwards;text-align:center}
.xpfloat span{display:block;font-size:11px;font-weight:500;opacity:.9}
@keyframes xpUp{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.9)}15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}75%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-18px)}}

/* Feier-Overlay */
.feier{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .25s var(--ease)}
.feier.weg{animation:fadeOut .25s var(--ease) forwards}
@keyframes fadeOut{to{opacity:0}}
.feier-box{position:relative;background:var(--surface);border:1px solid var(--line2);border-radius:24px;padding:32px 28px 26px;max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow-lift);animation:feierIn .5s var(--spring) both}
@keyframes feierIn{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}
.feier-ic{font-size:60px;line-height:1;margin-bottom:14px;animation:bobFast 1.6s var(--ease) infinite}
.feier-t{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:0;margin-bottom:8px}
.feier-s{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:22px}
.konfetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.konfetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:konf 2.6s var(--ease-in) forwards}
@keyframes konf{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(560deg);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .konfetti,.rang-ic,.feier-ic,.erf.on.gold .erf-ic,.erf.on.platin .erf-ic{animation:none !important}
}

/* ============================================================
   NOTIZEN
   ============================================================ */
.notiztop{display:flex;gap:11px;align-items:center;margin-top:18px}
.notiztop .gsearch{margin-top:0;flex:1}
.notiztop .btn{flex:0 0 auto;padding:13px 20px}
.ntitel{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:12px 2px;border:none;border-bottom:2px solid var(--line);background:none;color:var(--ink);font-family:inherit;font-size:25px;font-weight:700;letter-spacing:-.03em;transition:border-color .2s var(--ease)}
.ntitel::placeholder{color:var(--faint);font-weight:600}
.ntitel:focus{outline:none;border-bottom-color:var(--brand)}
.nmeta{display:flex;align-items:center;gap:12px;margin-top:14px}
.nfach{margin-top:0;flex:0 1 300px;padding:9px 12px;font-size:13.5px}
.nmeta .muted{font-size:12.5px;white-space:nowrap;margin-left:auto}
.ndatum{margin-top:0;flex:0 0 auto;padding:9px 12px;font-size:13.5px;width:auto}
.page.wide{max-width:none}
.nbar{margin-bottom:14px}
.vlkopf{display:flex;align-items:center;gap:13px}
.vlkopf .fachic{width:44px;height:44px}
.vlkopf .fachic svg{width:24px;height:24px}

/* Neue-Vorlesung-Karte */
.gcard.neuvl{align-items:center;justify-content:center;text-align:center;border-style:dashed;background:none;min-height:148px}
.gcard.neuvl:hover{border-color:var(--brand);background:var(--brand-soft)}
.neuvl-plus{font-size:34px;font-weight:300;color:var(--brand);line-height:1;margin-bottom:8px}
.vlform{display:flex;gap:10px;margin-top:14px}
.vlform .gsearch{margin-top:0;flex:1}
.vlform .btn{flex:0 0 auto;padding:12px 22px}
.vlbox{max-width:520px;text-align:left}
.vlbox .feier-t{text-align:center}
.vlbox .feier-s{text-align:center;margin-bottom:16px}
.vlchips{max-height:210px;overflow-y:auto;margin:0 0 4px}
/* Abbrechen & Co. – zurückhaltend, aber sichtbar als Knopf */
.linkbtn{background:none;border:1px solid transparent;color:var(--muted);font-family:inherit;
  font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.linkbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line2)}
.vlbox .linkbtn{display:block;margin-left:auto;margin-right:auto}

/* Werkzeugleiste (Word-Stil) */
.toolbar{position:sticky;top:60px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line2);border-radius:14px;padding:8px 10px;margin-bottom:16px;box-shadow:var(--shadow)}
.tb-grp{display:flex;align-items:center;gap:3px;padding-right:8px;margin-right:2px;border-right:1px solid var(--line)}
.tb-grp:last-child{border-right:none;padding-right:0}
.tb-grp.tb-right{margin-left:auto;border-right:none}
.tb{min-width:34px;height:34px;padding:0 9px;border:1px solid transparent;border-radius:9px;background:none;color:var(--ink);
  font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease-out)}
.tb:hover{background:var(--brand-soft);border-color:var(--line2)}
.tb:active{transform:scale(.93)}
/* Man muss sehen, was gerade an ist – deutliche Umrandung statt Ratespiel */
.tb.an{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 35%,transparent)}
.tb.an:hover{background:var(--brand-soft);border-color:var(--brand)}
/* Gliederungsknöpfe tragen Text statt Zeichen – etwas mehr Luft */
.tb-glied .tb{min-width:38px;font-size:12.5px;font-weight:700;letter-spacing:-.02em;
  font-family:Georgia,"Times New Roman",serif}
.tb-sel{height:34px;border:1px solid var(--line2);border-radius:9px;background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:13px;padding:0 8px;cursor:pointer}
.tb-sel:focus{outline:none;border-color:var(--brand)}

/* A4-Seite */
.paperwrap{display:flex;justify-content:center;padding:4px 0 8px;overflow-x:auto}
/* ---------- Juristische Gliederung im A4-Editor ----------
   A. → I. → 1. → a) → aa). Die Nummern zählt der Browser selbst hoch,
   man muss also nie umnummerieren, wenn ein Punkt dazwischenkommt. */
@counter-style jur-aa{system:alphabetic;
  symbols:"aa" "bb" "cc" "dd" "ee" "ff" "gg" "hh" "ii" "jj" "kk" "ll" "mm"
          "nn" "oo" "pp" "qq" "rr" "ss" "tt" "uu" "vv" "ww" "xx" "yy" "zz"}
.paper{counter-reset:jg1 jg2 jg3 jg4 jg5}
.paper .jg{position:relative;margin:.55em 0 .35em}
.paper .jg::before{position:absolute;left:0;font-weight:700;color:inherit}
.paper .jg1{counter-increment:jg1;counter-reset:jg2 jg3 jg4 jg5;
  padding-left:1.7em;margin-top:1.1em;font-weight:700}
.paper .jg1::before{content:counter(jg1,upper-alpha) ". "}
.paper .jg2{counter-increment:jg2;counter-reset:jg3 jg4 jg5;padding-left:3.1em;margin-left:.6em;font-weight:650}
.paper .jg2::before{content:counter(jg2,upper-roman) ". "}
.paper .jg3{counter-increment:jg3;counter-reset:jg4 jg5;padding-left:4.4em;margin-left:1.2em}
.paper .jg3::before{content:counter(jg3,decimal) ". "}
.paper .jg4{counter-increment:jg4;counter-reset:jg5;padding-left:5.7em;margin-left:1.8em}
.paper .jg4::before{content:counter(jg4,lower-alpha) ") "}
.paper .jg5{counter-increment:jg5;padding-left:7em;margin-left:2.4em}
.paper .jg5::before{content:counter(jg5,jur-aa) ") "}
.paper pre{font-family:"Consolas","SF Mono",monospace;font-size:.92em;line-height:1.6;
  background:rgba(125,125,125,.08);border-radius:8px;padding:.7em .9em;white-space:pre-wrap}
.paper h4{font-size:1.02em;font-weight:700;margin:.9em 0 .3em}

.paper{width:21cm;min-height:29.7cm;box-sizing:border-box;padding:2.2cm 2cm;
  background:var(--paper);color:var(--paper-ink);border:1px solid var(--line2);border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.18),0 18px 50px -18px rgba(0,0,0,.4);
  font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.8;outline:none;
  transition:box-shadow .25s var(--ease)}
.paper:focus{box-shadow:0 2px 6px rgba(0,0,0,.2),0 22px 60px -18px rgba(0,0,0,.45),0 0 0 3px var(--ring)}
.paper:empty::before{content:attr(data-ph);color:var(--faint);font-style:italic}
.paper h2{font-family:var(--serif);font-size:28px;font-weight:700;margin:22px 0 10px;letter-spacing:0;line-height:1.3}
.paper h3{font-size:20px;font-weight:700;margin:18px 0 8px;line-height:1.35}
.paper p{margin:0 0 12px}
.paper ul,.paper ol{margin:0 0 12px;padding-left:26px}
.paper li{margin-bottom:5px}
.paper blockquote{margin:14px 0;padding:6px 0 6px 16px;border-left:3px solid var(--brand);color:var(--muted);font-style:italic}
.paper a{color:var(--brand)}
:root{--paper:#201f27;--paper-ink:#eceaf2}
:root.light{--paper:#ffffff;--paper-ink:#15161a}

/* Schnellzugriff auf der Startseite */
.notizquick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;box-shadow:var(--shadow)}
.nq-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nq-t{font-size:16px;font-weight:700;letter-spacing:-.02em}
.nq-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.nq-btn{flex:0 0 auto;margin-left:auto;padding:12px 20px}
.nq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px;margin-top:14px}
.nq-vl{display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;transition:transform .25s var(--ease-out),border-color .2s var(--ease)}
.nq-vl:hover{transform:translateY(-2px);border-color:var(--c,var(--brand))}
.nq-ic{width:30px;height:30px;border-radius:9px;background:var(--c-soft,var(--brand-soft));color:var(--c,var(--brand));
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nq-ic svg{width:17px;height:17px}
.nq-tx{min-width:0;display:flex;flex-direction:column}
.nq-n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nq-s{font-size:11.5px;color:var(--muted);margin-top:1px}
.nq-more{justify-content:center;border-style:dashed}

@media (max-width:900px){
  .paper{width:100%;min-height:auto;padding:22px 18px;font-size:15px}
  .paperwrap{padding:0}
  .toolbar{top:56px;gap:4px;padding:7px 8px}
  .tb-grp{padding-right:5px}
  .nq-btn{margin-left:0;width:100%}
}

/* Notizen: Bilder, Normverweise */
.paper img{max-width:100%;height:auto;border-radius:8px;margin:10px 0;display:block}
.normref{background:var(--brand-soft);color:var(--brand-ink);padding:2px 8px;border-radius:6px;font-weight:600;
  font-size:.92em;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease)}
.normref:hover{background:var(--brand);color:#fff}
.normliste{margin-top:10px;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.normtreffer{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;font-size:13px;color:var(--ink);
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.normtreffer:hover{border-color:var(--brand);background:var(--brand-soft)}

/* Klausur: Zeitmodus, Gliederung, Historie */
/* ---------- Klausur-Uhr ----------
   Mechanisches Ziffernblatt mit drehbarem Zeiger, digitale Restzeit in der
   Mitte. Der Ring zeigt, wie viel Zeit noch übrig ist. */
.klbar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:16px;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:20px 22px;
  box-shadow:var(--kante),var(--shadow)}
.klzeiten{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:1}
.klzeiten .crashbar-lbl{width:100%;margin-bottom:2px}
.uhr{position:relative;width:172px;height:172px;flex:none;user-select:none;-webkit-user-select:none}
.uhr-svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.uhr.zieht .uhr-svg{cursor:grabbing}
.uhr.laeuft .uhr-svg{cursor:default}
.uhr-ring{fill:none;stroke:var(--line2);stroke-width:6}
.uhr-rest{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:100px 100px;
  transition:stroke-dasharray .4s var(--ease-out),stroke .3s var(--ease)}
.uhr.knapp .uhr-rest{stroke:var(--no)}
.uhr-tick{stroke:var(--faint);stroke-width:1;opacity:.5}
.uhr-tick.gross{stroke:var(--muted);stroke-width:2;opacity:.85}
.uhr-zahl{fill:var(--faint);font-size:11px;font-weight:700;text-anchor:middle;
  font-family:inherit;letter-spacing:-.02em}
.uhr-zeiger{stroke:var(--ink);stroke-width:3;stroke-linecap:round;
  transition:all .18s var(--ease-out)}
.uhr.laeuft .uhr-zeiger{stroke:var(--brand);transition:all .9s linear}
.uhr.zieht .uhr-zeiger{transition:none}
.uhr-griff{fill:var(--brand);stroke:var(--surface);stroke-width:3;cursor:grab;
  transition:all .18s var(--ease-out),r .2s var(--spring)}
.uhr-svg:hover .uhr-griff{r:11}
.uhr.zieht .uhr-griff{transition:none;r:12}
.uhr.laeuft .uhr-griff{fill:var(--brand);cursor:default}
.uhr-mitte{fill:var(--ink)}
.uhr-digital{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;gap:2px}
.uhr-digital span{font-size:27px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.uhr.knapp .uhr-digital span{color:var(--no);animation:pulseZeit 1.4s var(--ease) infinite}
.uhr-digital small{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);max-width:104px;text-align:center;line-height:1.3}
.chip.start{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:650}
.chip.start:hover{transform:translateY(-1px)}
@keyframes pulseZeit{0%,100%{opacity:1}50%{opacity:.5}}
@media (max-width:560px){
  .klbar{flex-direction:column;align-items:stretch}
  .uhr{margin:0 auto}
}
@media (prefers-reduced-motion: reduce){
  .uhr-zeiger,.uhr-rest,.uhr-griff{transition:none}
}
.gliedbox{margin-top:14px}
.glied-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;
  background:var(--brand-soft);color:var(--brand-ink);border:none;border-radius:var(--r-sm);padding:13px 15px;
  cursor:pointer;font-size:14px;font-weight:650;transition:filter .15s var(--ease)}
.glied-head:hover{filter:brightness(1.08)}
.glied-head .muted{font-size:12px;font-weight:400}
.gliedform{margin-top:11px}
.histbox{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;box-shadow:var(--shadow)}
.histgrid{display:flex;align-items:flex-end;gap:7px;height:96px;margin:6px 0 10px}
.hist-bar{flex:1;min-width:14px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.hist-fill{width:100%;background:linear-gradient(180deg,var(--brand),var(--brand-2));border-radius:4px 4px 0 0;
  transition:height .5s var(--ease-out)}
.hist-bar span{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Fälle: Modus, Lesezeichen, Überspringen, Begründungen */
.fmodus{display:flex;gap:8px;margin:16px 0 4px}
.lzbtn{margin-left:auto;background:none;border:1px solid var(--line2);border-radius:10px;width:34px;height:34px;
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .18s var(--ease),transform .2s var(--spring),background .18s var(--ease)}
.lzbtn:hover{border-color:var(--brand);background:var(--brand-soft)}
.lzbtn.on{border-color:var(--grund);background:var(--grund-soft)}
.lzbtn:active{transform:scale(.9)}
.skiprow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:12.5px}
.warum{font-size:12.5px;line-height:1.6;color:var(--muted);padding:9px 13px 3px 15px;margin:-4px 0 4px;
  border-left:2px solid var(--line2);animation:fadeUp .35s var(--ease-out) both}
.warum.ok{color:var(--ok-ink);border-left-color:var(--ok)}

/* Karteikarten: Modi, Tippen, Bearbeiten */
.kmodus{margin-top:16px}
.kmodus .chips{margin:7px 0 0}
.flash-front.klein{font-size:17px;font-weight:600;line-height:1.6}
.tippfeld{margin-top:14px;font-size:15px;padding:14px 16px}
.tippfb{border-radius:var(--r-sm);padding:12px 14px;margin-top:12px;font-size:13.5px;line-height:1.6;
  border:1px solid var(--line2);background:var(--surface-2);animation:fadeUp .3s var(--ease-out) both}
.tippfb.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink)}
.tippfb.no{border-color:var(--no);background:var(--no-soft);color:var(--no-ink)}
.tippfb-q{font-weight:700;margin-top:6px}
.kartform{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:16px 17px;margin-top:14px;box-shadow:var(--shadow)}
.kartform .gsearch{margin-top:10px}
.kartform .answer{margin-top:10px}

/* Meinungsstreite */
.streitliste{margin-top:14px}
.streit{border-left:3px solid var(--c,var(--brand))}
.streit .sch-head{align-items:flex-start;gap:12px}
.streit-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0;text-align:left}
.streit-t{font-size:15px;font-weight:650;letter-spacing:-.01em}
.streit-frage{font-size:14.5px;line-height:1.65;padding:4px 0 12px;color:var(--ink)}
.streit-rel{font-size:12.5px;color:var(--muted);line-height:1.6;background:var(--surface-2);border-radius:10px;padding:10px 12px;margin-bottom:6px}
.ansicht{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:9px}
.ansicht-n{font-size:14px;font-weight:650;color:var(--c-ink,var(--brand-ink));margin-bottom:5px}
.ansicht-i{font-size:13.5px;line-height:1.65}
.arg{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.arg li{font-size:12.5px;line-height:1.55;padding-left:22px;position:relative;color:var(--muted)}
.arg li::before{position:absolute;left:0;top:0;font-weight:700}
.arg li.pro::before{content:"+";color:var(--ok)}
.arg li.con::before{content:"–";color:var(--no)}
.streit-hm{font-size:13.5px;line-height:1.6;background:var(--ok-soft);color:var(--ok-ink);border-radius:10px;padding:11px 13px;margin:12px 0}
.streit-ent{font-size:13.5px;line-height:1.7}
.streit-ent .section-label{margin-top:6px}
.streit-merke{font-size:13.5px;font-weight:600;line-height:1.6;background:var(--brand-soft);color:var(--brand-ink);border-radius:10px;padding:11px 13px;margin-top:14px}

/* Backup */
/* Konto: gleiche Bauform wie die Datensicherung daneben - es ist dieselbe
   Art von Kasten, und zwei Formen fuer dieselbe Sache verwirren nur. */
.kontobox{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:17px 18px;box-shadow:var(--shadow)}
.konto-t{font-size:15px;font-weight:650;letter-spacing:-.01em;margin-bottom:5px}
.konto-s{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:4px}
.kontobox .gsearch{margin-top:0;width:100%}
.kontobox .btnrow{margin-top:14px}
.konto-meld{margin-top:11px;font-size:12.5px;line-height:1.55;border-radius:var(--r-sm);padding:9px 12px}
.konto-meld.ok{background:var(--ok-soft);color:var(--ok-ink)}
.konto-meld.no{background:var(--no-soft);color:var(--no-ink)}

/* ===== 19 Favoriten · 20 Querverweise · 21 Fall → Norm ===== */
.favbtn{margin-left:auto;border:none;background:none;cursor:pointer;font-size:19px;line-height:1;color:var(--faint);padding:2px 4px;border-radius:8px;transition:color .18s var(--ease),transform .25s var(--spring)}
.favbtn:hover{color:var(--grund);transform:scale(1.18)}
.favbtn.on{color:var(--grund)}
.chip.fav{display:inline-flex;align-items:center;gap:7px}
.chip.fav.on{background:var(--grund);border-color:var(--grund);color:#fff;box-shadow:0 6px 16px -6px rgba(240,179,84,.5)}
.chipnum{background:rgba(255,255,255,.22);border-radius:999px;padding:1px 7px;font-size:11.5px;font-weight:700}
.chip.fav:not(.on) .chipnum{background:var(--grund-soft);color:var(--grund-ink)}

.siehe{margin-top:14px;border-top:1px dashed var(--line2);padding-top:12px}
.siehe-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.siehe-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:7px 9px;margin-left:-9px;cursor:pointer;color:inherit;font-family:inherit;transition:background .18s var(--ease)}
.siehe-row:hover{background:var(--surface-2)}
.siehe-row svg{width:15px;height:15px;flex:none;color:var(--faint);margin-left:auto}
.siehe-n{font-size:12.5px;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:3px 10px;white-space:nowrap;flex:none}
.siehe-w{font-size:12.5px;color:var(--muted);line-height:1.5}
.glaw.hit{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring),var(--shadow-lift)}

.normrow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:15px}
.normrow-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.normchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line2);color:var(--ink);font-size:13px;font-weight:600;font-family:inherit;padding:7px 14px;border-radius:999px;cursor:pointer;transition:border-color .18s var(--ease),transform .25s var(--spring),background .18s var(--ease)}
.normchip:hover{background:var(--brand-soft);border-color:var(--brand);transform:translateY(-1px)}
.normchip svg{width:14px;height:14px}

/* ===== 22 Countdown auf der Startseite ===== */
.cdbox{display:flex;flex-direction:column;gap:9px}
.cdrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c,var(--brand));border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;color:inherit;font-family:inherit;box-shadow:var(--shadow);transition:transform .3s var(--ease-out),border-color .2s var(--ease)}
.cdrow:hover{transform:translateY(-2px);border-color:var(--line2);border-left-color:var(--c,var(--brand))}
.cdnum{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--c-ink,var(--brand-ink));line-height:1}
.cdnum small{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.cdtx{display:flex;flex-direction:column;gap:3px;min-width:0}
.cdfach{font-size:14px;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cddat{font-size:12px;color:var(--muted)}
.cdrow.bald .cdnum{color:var(--amber-ink)}
.cdrow.akut{border-left-color:var(--no);background:var(--no-soft)}
.cdrow.akut .cdnum{color:var(--no-ink)}
.cdempty{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px dashed var(--line2);border-radius:var(--r-md);padding:15px;cursor:pointer;color:inherit;font-family:inherit;transition:border-color .2s var(--ease)}
.cdempty:hover{border-color:var(--brand)}
.cdempty-ic{font-size:24px;flex:none}
.cdempty-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.cdempty-t{font-size:14px;font-weight:650}
.cdempty-s{font-size:12px;color:var(--muted);line-height:1.5}
.cdempty svg{width:16px;height:16px;flex:none;color:var(--faint);margin-left:auto}

/* ===== 23 Fortschritt im Crashkurs ===== */
.cprog{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin-top:16px;box-shadow:var(--shadow)}
.cprog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cprog-t{font-size:13.5px;font-weight:650}
.cprog .bar{margin:11px 0 0;max-width:none}
.cprog.full{border-color:var(--ok);background:var(--ok-soft)}
.cprog.full .cprog-t{color:var(--ok-ink)}
.crow{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px}
.crow-body{flex:1;min-width:0}
.crow-body>*{margin-bottom:0}
.crow-chk{flex:none;margin-top:2px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line2);background:var(--surface);border-radius:8px;cursor:pointer;color:transparent;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .25s var(--spring)}
.crow-chk svg{width:15px;height:15px}
.crow-chk:hover{border-color:var(--brand);color:var(--faint);transform:scale(1.08)}
.crow.done .crow-chk{background:var(--ok);border-color:var(--ok);color:#fff}
.crow.done .crow-body{opacity:.45}
.cardgrid .crow{align-items:stretch;margin-bottom:0}
.cardgrid .crow .gcard{width:100%;height:100%}

/* ===== 24 Erfolge-Vorschau ===== */
.nxtbox{display:flex;flex-direction:column;gap:9px}
.nxt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;cursor:pointer;color:inherit;font-family:inherit;box-shadow:var(--shadow);transition:transform .3s var(--ease-out),border-color .2s var(--ease)}
.nxt:hover{transform:translateY(-2px);border-color:var(--line2)}
.nxt-ic{font-size:22px;flex:none;line-height:1.1;filter:grayscale(.35)}
.nxt-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nxt-t{font-size:14px;font-weight:650;letter-spacing:-.01em}
.nxt-s{font-size:12px;color:var(--muted)}
.nxt .bar{display:block;margin:9px 0 0;max-width:none}
.nxt .bar-fill{display:block}
.nxt.silber .bar-fill{background:linear-gradient(90deg,#9aa3b0,#cfd6e0)}
.nxt.gold .bar-fill{background:linear-gradient(90deg,var(--grund),var(--grund-ink))}
.nxt.platin .bar-fill{background:linear-gradient(90deg,var(--oeff),var(--oeff-ink))}

@media (prefers-reduced-motion: reduce){
  .favbtn,.normchip,.cdrow,.nxt,.crow-chk{transition:none}
  .favbtn:hover,.normchip:hover,.cdrow:hover,.nxt:hover,.crow-chk:hover{transform:none}
}

/* ===== 34 Dark & Light interessanter =====
   Trick: Flächen bekommen eine helle Innenkante oben und einen sichtbaren
   Umriss. Dadurch wirken Karten geschnitten statt nur „etwas heller". */
.card-plain,.gcard,.tile,.hero,.erf,.miniq,.sch,.glaw,.examrow,
.session,.nq-vl,.cdrow,.cdempty,.nxt,.cprog,.rangbox,.statgrid .stat,.alarm{
  box-shadow:var(--kante),var(--shadow)}
.gcard:hover,.tile:hover,.nxt:hover,.cdrow:hover{box-shadow:var(--kante),var(--shadow-lift)}

/* Der Farbschleier im Hintergrund darf im Dark Mode deutlicher sein */
:root:not(.light):not(.lesen) .main::before{
  background:
    radial-gradient(50rem 32rem at 10% -10%, color-mix(in srgb,var(--brand) 22%,transparent), transparent 60%),
    radial-gradient(40rem 28rem at 94% 2%, color-mix(in srgb,var(--oeff) 18%,transparent), transparent 62%),
    radial-gradient(44rem 30rem at 72% 98%, color-mix(in srgb,var(--zivil) 13%,transparent), transparent 60%)}

/* Feines Raster über dem Hintergrund – gibt dem Schwarz Struktur */
:root:not(.light):not(.lesen) .main::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(140,225,215,.030) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,225,215,.030) 1px,transparent 1px);
  background-size:64px 64px}
:root.light .main::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background-image:linear-gradient(rgba(12,60,55,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(12,60,55,.028) 1px,transparent 1px);
  background-size:64px 64px}

/* Akzentkante an den wichtigsten Flächen */
.session{border:1px solid var(--line2)}
:root:not(.light):not(.lesen) .hero{border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
:root:not(.light):not(.lesen) .pill,:root:not(.light):not(.lesen) .chip{border-color:var(--line2)}

/* ===== 26 Streak-Freeze ===== */
.hero-fz{margin-top:12px}
.fz{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;
  padding:5px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--faint);background:rgba(255,255,255,.03)}
.fz.on{color:#7fd8ff;border-color:rgba(127,216,255,.4);background:rgba(127,216,255,.12)}
:root.light .fz.on{color:#0b6e8c;border-color:rgba(11,110,140,.32);background:rgba(11,110,140,.10)}

/* ===== 25 + 27 Rückblick ===== */
.rbwrap{display:flex;justify-content:center;margin:24px 0 4px}
.rbcanvas{width:100%;max-width:360px;height:auto;border-radius:var(--r-md);
  border:1px solid var(--line2);box-shadow:var(--shadow-lift)}
.rbbtns{margin-top:20px}
.rbhint{background:var(--amber-soft);color:var(--amber-ink);border-radius:var(--r-sm);
  padding:13px 15px;font-size:13px;line-height:1.6;margin-top:18px;max-width:660px}

/* ===== Feinschliff: dezente Bewegung, die das Produkt wertiger macht ===== */

/* Juri blinzelt. Die Lider liegen zusammengeklappt über den Augen und
   klappen kurz auf – das macht aus dem Logo ein Lebewesen. */
.owl-lid{transform-origin:center;transform:scaleY(0)}
@media (prefers-reduced-motion: no-preference){
  .owl-lid{animation:blinzeln 6.5s var(--ease) infinite}
  .session-owl .owl-lid{animation-delay:.7s}
  .owl-avatar .owl-lid{animation-delay:1.4s}
  .bcard-owl .owl-lid,.cta-owl .owl-lid{animation-delay:2.1s}
}
@keyframes blinzeln{0%,95.5%,100%{transform:scaleY(0)}97.5%{transform:scaleY(1)}}

/* Glanz über den Hauptknopf beim Überfahren – einmalig, nicht dauerhaft */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.22) 50%,transparent 75%);
  transform:translateX(-130%)}
@media (prefers-reduced-motion: no-preference){
  .btn:not(.ghost):not(.danger):hover::after{animation:glanz .85s var(--ease-out)}
}
@keyframes glanz{to{transform:translateX(130%)}}

/* Sichtbarer, ruhiger Fokusring – wichtig für Tastaturbedienung */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
.opt:focus-visible,.gcard:focus-visible,.tile:focus-visible,.session:focus-visible{outline-offset:4px}

/* Die zuletzt gebauten Bauteile bekommen dieselbe Einblendung wie der Rest */
@media (prefers-reduced-motion: no-preference){
  .cdbox>*,.nxtbox>*,.crashbar,.cprog,.siehe,.normrow,.rbwrap,.rbbtns,.streitliste>*{
    animation:fadeUp .55s var(--ease-out) both}
  .cdbox>*:nth-child(2),.nxtbox>*:nth-child(2),.streitliste>*:nth-child(2){animation-delay:.06s}
  .cdbox>*:nth-child(3),.nxtbox>*:nth-child(3),.streitliste>*:nth-child(3){animation-delay:.12s}
  .cdbox>*:nth-child(4),.streitliste>*:nth-child(4){animation-delay:.18s}
  .streitliste>*:nth-child(n+5){animation-delay:.24s}
  /* Der Balken im Crashkurs wächst, statt einfach da zu sein */
  .cprog .bar-fill{animation:balkenAuf .9s .15s var(--ease-out) both}
}
@keyframes balkenAuf{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}

/* Abhaken im Crashkurs: kurzes Aufblitzen, damit die Geste quittiert wird */
@media (prefers-reduced-motion: no-preference){
  .crow.done .crow-chk{animation:hakenAn .42s var(--spring)}
}
@keyframes hakenAn{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}

/* Karteikarten-Zähler und Streak reagieren auf Änderungen */
.stat-num{font-variant-numeric:tabular-nums}
.hero-num,.cdnum,.cprog-t{font-variant-numeric:tabular-nums}

/* Der alte 16-px-Marker ist entfallen (27.08.2026). Er brachte eine eigene
   Animation mit, und eine laufende Animation schlaegt jede Transform-Regel -
   dadurch blieb der neue Unterstrich im aktiven Zustand auf Laenge null. */
.nav-item{position:relative}

/* Umschalten innerhalb einer Ansicht: alles sofort zeigen, nichts neu einblenden */
.page.sofort,.page.sofort *{animation:none !important}

/* ===== Mein Semester ===== */
.semwahl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 2px}
.semwahl.kompakt{margin:14px 0 -8px}
.semwahl .chips{margin:0}
.semwahl-lbl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.chip.sem{background:var(--brand-soft);border-color:var(--line2);color:var(--brand-ink)}
.chip.sem.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.istmein::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);
  display:inline-block;margin-left:7px;vertical-align:middle}
.chip.istmein.on::after{background:#fff}
.section-label.meinsem{color:var(--brand-ink)}
.semflag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:none;
  background:var(--brand-soft);color:var(--brand-ink);border-radius:999px;padding:2px 9px;
  margin-left:8px;display:inline-block;white-space:nowrap;vertical-align:baseline}
/* Fächerauswahl – nach Semester gruppiert, alle Module anhakbar */
.fachwahl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;box-shadow:var(--kante),var(--shadow);margin-top:4px}
.fachgruppe{display:flex;align-items:flex-start;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.fachgruppe:last-of-type{border-bottom:none}
.fachgruppe-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);flex:none;width:104px;padding-top:9px}
.fachgruppe .chips{margin:0}
.fachchip{font-size:12.5px;padding:7px 13px}
.fachchip.on::before{content:"✓";margin-right:6px;font-weight:800;font-size:11px}
.fachwahl-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--faint)}
@media (max-width:640px){
  .fachgruppe{flex-direction:column;gap:6px}
  .fachgruppe-lbl{width:auto;padding-top:0}
}

/* Das Semester steht auf der Startseite groß da – in Serifenschrift,
   damit es ruhig und wertig wirkt statt nach Bedienelement auszusehen. */
.semhero{display:flex;align-items:center;gap:20px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line)}
.semhero-num{
  font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  font-size:clamp(52px,8vw,72px);font-weight:400;line-height:.86;letter-spacing:-.04em;
  color:transparent;background:linear-gradient(150deg,var(--ink) 18%,var(--brand) 130%);
  -webkit-background-clip:text;background-clip:text;flex:none;font-variant-numeric:lining-nums}
.semhero-dot{color:var(--brand);-webkit-text-fill-color:var(--brand)}
.semhero-tx{display:flex;flex-direction:column;gap:5px;min-width:0;padding-bottom:4px}
.semhero-lbl{font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  font-size:17px;font-style:italic;color:var(--ink);letter-spacing:.01em}
.semhero-f{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);line-height:1.5}
@media (max-width:560px){
  .semhero{gap:15px}
  .semhero-f{letter-spacing:.04em;font-size:11px}
}

/* ===== Tagesenergie: sehr dezente Einfärbung des Hintergrunds =====
   Grundsatz: es darf auffallen, wenn man darauf achtet – sonst nicht.
   Deshalb nur die feste Hintergrundebene, nie Inhalt oder Bedienelemente. */
:root[data-energie] .main::before{transition:background 1.2s var(--ease)}

.blatt{position:fixed;top:0;bottom:0;width:min(230px,22vw);pointer-events:none;z-index:0;
  opacity:0;transition:opacity 1.4s var(--ease)}
.blatt svg{width:100%;height:100%}
.blatt.links{left:0}
.blatt.rechts{right:0;transform:scaleX(-1)}
@media (max-width:820px){.blatt{width:120px}}
/* Immer nur das Motiv der aktuellen Energie zeigen */
.m-low,.m-mid,.m-high{display:none}
:root[data-energie="low"] .m-low,
:root[data-energie="mid"] .m-mid,
:root[data-energie="high"] .m-high{display:block}
:root[data-energie="low"] .blatt,
:root[data-energie="mid"] .blatt,
:root[data-energie="high"] .blatt{opacity:1}

/* Wenig: ruhig und etwas grüner – Palmwedel am Rand */
:root[data-energie="low"] .main::before{
  background:
    radial-gradient(48rem 30rem at 8% -6%, color-mix(in srgb,#4ba888 20%,transparent), transparent 62%),
    radial-gradient(40rem 26rem at 96% 8%, color-mix(in srgb,#5fb08d 13%,transparent), transparent 64%),
    radial-gradient(42rem 28rem at 74% 98%, color-mix(in srgb,#3f9c86 11%,transparent), transparent 62%)}

/* Mittel: klar und gleichmäßig – waagerechte Strömungslinien, Teal wie die Marke */
:root[data-energie="mid"] .main::before{
  background:
    radial-gradient(50rem 31rem at 10% -8%, color-mix(in srgb,var(--brand) 19%,transparent), transparent 61%),
    radial-gradient(38rem 26rem at 95% 5%, color-mix(in srgb,#3fb0a4 12%,transparent), transparent 63%),
    radial-gradient(44rem 29rem at 72% 98%, color-mix(in srgb,var(--zivil) 10%,transparent), transparent 61%)}

/* Viel: wärmer und wacher – aufsteigende Funken */
:root[data-energie="high"] .main::before{
  background:
    radial-gradient(50rem 32rem at 10% -10%, color-mix(in srgb,var(--brand) 22%,transparent), transparent 60%),
    radial-gradient(38rem 26rem at 94% 2%, color-mix(in srgb,#f0b354 15%,transparent), transparent 62%),
    radial-gradient(44rem 30rem at 72% 98%, color-mix(in srgb,var(--zivil) 13%,transparent), transparent 60%)}

@media (prefers-reduced-motion: reduce){
  .blatt,:root[data-energie] .main::before{transition:none}
}

/* ===== Juri taucht an mehr Stellen auf – klein und beiläufig ===== */
.juri-mini{display:inline-block;width:26px;height:26px;vertical-align:middle;flex:none}
.juri-mini.gross{display:block;width:64px;height:64px;margin:0 auto 14px}
.juri-mini.kette{width:22px;height:22px;margin-right:2px}
@media (prefers-reduced-motion: no-preference){
  .juri-mini.freut{animation:juriFreut 2.6s var(--ease) infinite}
  .juri-mini.kette{animation:juriNickt 4.5s var(--ease) infinite}
  .such-leer .juri-mini{animation:juriFragt 3.2s var(--ease) infinite}
}
@keyframes juriFreut{0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(-5px) rotate(-4deg)}70%{transform:translateY(-2px) rotate(3deg)}}
@keyframes juriNickt{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-7deg)}96%{transform:rotate(5deg)}}
@keyframes juriFragt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.such-leer .juri-mini{display:block;width:40px;height:40px;margin:0 auto 12px}

/* ===== Gutachten üben – die drei Handgriffe ===== */
.gutgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.gutkarte{display:flex;flex-direction:column;text-align:left;cursor:pointer;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:26px 24px;
  box-shadow:var(--kante),var(--shadow);position:relative;overflow:hidden;color:inherit;font-family:inherit;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .25s var(--ease)}
.gutkarte::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--kf,var(--brand)),transparent 82%)}
.gutkarte:hover{transform:translateY(-5px);box-shadow:var(--kante),var(--shadow-lift);
  border-color:color-mix(in srgb,var(--kf,var(--brand)) 45%,transparent)}
.gutkarte.os{--kf:var(--straf)}
.gutkarte.def{--kf:var(--zivil)}
.gutkarte.sub{--kf:var(--oeff)}
.gutkarte-ic{font-family:Georgia,"Times New Roman",serif;font-size:34px;line-height:1;
  color:var(--kf,var(--brand));margin-bottom:14px}
.gutkarte-t{font-size:19px;font-weight:800;letter-spacing:-.03em}
.gutkarte-s{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:8px;flex:1}
.gutkarte-bar{margin-top:18px;display:block}
.gutkarte-bar .bar{margin:0;max-width:none;display:block}
.gutkarte-bar .bar-fill{display:block;background:linear-gradient(90deg,var(--kf,var(--brand)),var(--brand))}
.gutkarte-bar small{display:block;font-size:11.5px;color:var(--faint);margin-top:7px;
  font-variant-numeric:tabular-nums}
/* Die Kette darunter zeigt, wie die drei zusammenhängen */
.gutkette{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.gutkette span{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 15px}
.gutkette span.aus{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--line2)}
.gutkette i{font-style:normal;color:var(--line2)}
.defbegriff{font-size:23px;font-weight:750;letter-spacing:-.03em;line-height:1.35;
  background:var(--surface-2);border-radius:var(--r-md);padding:22px 20px;text-align:center}
.osopt .opt{font-size:14.5px;line-height:1.6}
@media (max-width:900px){.gutgrid{grid-template-columns:1fr}}

/* ===== 31 Subsumtions-Trainer ===== */
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin-top:22px}
.subcard{display:flex;flex-direction:column;text-align:left;cursor:pointer;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--kante),var(--shadow);
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s var(--ease)}
.subcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c),transparent 85%);opacity:.9}
.subcard:hover{transform:translateY(-3px);box-shadow:var(--kante),var(--shadow-lift);
  border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.subcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.subcard-t{font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.subcard-s{font-size:12.8px;color:var(--muted);line-height:1.55;margin-top:7px}
.subcard-f{margin-top:auto;padding-top:12px;font-size:11.5px;color:var(--faint);font-weight:500}

.subbox{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:26px 28px;box-shadow:var(--kante),var(--shadow-lift);margin-top:14px}
.subbox-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.subzaehler{margin-left:auto;font-size:12.5px;color:var(--faint);font-weight:600;
  font-variant-numeric:tabular-nums}
.subdef{font-size:15.5px;line-height:1.72;background:var(--c-soft,var(--brand-soft));
  border-left:3px solid var(--c,var(--brand));border-radius:0 12px 12px 0;padding:15px 17px}
.subdef strong{color:var(--c-ink,var(--brand-ink))}
.subsv{font-size:16.5px;line-height:1.75;background:var(--surface-2);border-radius:var(--r-md);
  padding:17px 19px}
.subfrage{font-size:15.5px;font-weight:650;letter-spacing:-.018em;margin-top:20px;text-align:center}
.subwahl{display:flex;gap:12px;margin-top:16px}
.subwahl .btn{padding:16px}
.subja:hover{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink)}
.subnein:hover{border-color:var(--no);background:var(--no-soft);color:var(--no-ink)}
.subergebnis{margin-bottom:14px}
.subtag{display:inline-block;font-size:12.5px;font-weight:700;padding:6px 15px;border-radius:999px}
.subtag.ja{background:var(--ok-soft);color:var(--ok-ink)}
.subtag.nein{background:var(--no-soft);color:var(--no-ink)}
.subdone{text-align:center;padding:44px 20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--kante),var(--shadow);margin-top:14px}
.subdone-t{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:12px}
.subdone-s{font-size:14px;color:var(--muted);margin-top:6px}
.subdone .btnrow{margin-top:24px;justify-content:center;max-width:420px;margin-left:auto;margin-right:auto}

/* ===== 29 Globale Suche ===== */
/* Suchleiste statt Icon-Knopf: breit genug, dass man sieht, was sie tut.
   Kein Tastenkürzel-Zeichen – ⌘ verwirrt unter Windows. */
.suchknopf{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line2);
  border-radius:999px;padding:8px 16px 8px 13px;cursor:pointer;color:var(--faint);
  min-width:210px;text-align:left;font-family:inherit;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease),
             min-width .3s var(--ease-out)}
.suchknopf svg{width:15px;height:15px;flex:none}
.suchknopf-tx{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suchknopf:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft);min-width:230px}
@media (max-width:1080px){.suchknopf{min-width:0}.suchknopf-tx{display:none}.suchknopf:hover{min-width:0}}

.suchbox{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
:root.light .suchbox,:root.lesen .suchbox{background:rgba(30,25,15,.34)}
.such-panel{width:100%;max-width:620px;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift);overflow:hidden;display:flex;flex-direction:column;
  max-height:72vh}
@media (prefers-reduced-motion: no-preference){.such-panel{animation:suchAuf .26s var(--ease-out)}}
@keyframes suchAuf{from{opacity:0;transform:translateY(-12px) scale(.985)}to{opacity:1;transform:none}}
.such-kopf{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--line)}
.such-ic{font-size:16px;flex:none}
.such-kopf input{flex:1;background:none;border:none;outline:none;color:var(--ink);
  font-family:inherit;font-size:16.5px;letter-spacing:-.015em}
.such-kopf input::placeholder{color:var(--faint)}
.such-esc{font-family:inherit;font-size:10.5px;font-weight:600;color:var(--faint);
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex:none}
.such-liste{overflow-y:auto;padding:7px}
.such-zeile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;
  border:none;border-radius:11px;padding:11px 12px;cursor:pointer;color:inherit;font-family:inherit;
  transition:background .13s var(--ease)}
.such-zeile:hover{background:var(--surface-2)}
.such-zeile.on{background:var(--brand-soft)}
.such-zic{font-size:17px;flex:none;width:24px;text-align:center}
.such-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.such-t{font-size:14.5px;font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.such-s{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.such-typ{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);background:var(--surface-2);border-radius:999px;padding:3px 9px;flex:none}
.such-zeile.on .such-typ{color:var(--brand-ink);background:var(--surface)}
.such-leer{padding:26px 18px;text-align:center;color:var(--muted);font-size:14px;line-height:1.6}
.such-leer em{font-style:normal;color:var(--brand-ink);background:var(--brand-soft);
  padding:1px 7px;border-radius:6px}
.such-fuss{display:flex;flex-wrap:wrap;gap:8px 16px;padding:11px 17px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--faint)}
.such-fuss span{display:flex;align-items:center;gap:5px}
.such-fuss kbd{font-family:inherit;font-size:10.5px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* ===== 30 Kürzel-Übersicht ===== */
.kbdlist{display:flex;flex-direction:column;gap:9px;margin-top:6px;text-align:left}
.kbdrow{display:flex;align-items:center;gap:13px;font-size:13.5px;color:var(--muted)}
.kbdrow kbd{font-family:inherit;font-size:12px;font-weight:650;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line2);border-radius:7px;
  padding:4px 9px;white-space:nowrap;flex:none;min-width:112px;text-align:center}

/* ===== Tarif: kostenlos / Vollversion ===== */
/* Gesperrtes bleibt sichtbar, wirkt aber ruhig zurueckgenommen –
   kein rotes Verbotsschild, nur weniger Kontrast. */
.gcard.zu{cursor:pointer;border-style:dashed;box-shadow:none}
.gcard.zu .gcard-title,.gcard.zu .gcard-sub,.gcard.zu .fachic{opacity:.5}
.gcard.zu:hover{transform:none;border-color:var(--brand);box-shadow:none}
.gcard.zu .gcard-sub{filter:blur(2.5px);user-select:none}
.status.zu{color:var(--brand-ink)}
.jumplink.zu{border-style:dashed;color:var(--faint)}

.freizeile{margin-top:16px;font-size:13px;color:var(--muted);background:var(--surface-2);
  border:1px dashed var(--line2);border-radius:var(--r-sm);padding:10px 14px;line-height:1.55}
.freizeile.zu{margin-top:20px;border-style:solid;border-color:var(--brand);color:var(--ink)}

.sperre{margin-top:22px;text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:40px 26px;box-shadow:var(--shadow),var(--kante)}
.sperre.klein{padding:24px 20px;margin-top:14px;border-radius:var(--r-md)}
.sperre-ic{font-size:42px;line-height:1}
.sperre.klein .sperre-ic{font-size:30px}
.sperre-t{margin-top:12px;font-size:18px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.sperre.klein .sperre-t{font-size:15.5px}
.sperre-s{margin-top:7px;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:44ch;
  margin-left:auto;margin-right:auto}
.sperre-hint{margin-top:16px;font-size:12px;color:var(--faint)}


/* Drucken: nur die Seite */
@media print{
  .toolbar,.nbar,.back,.aktionsrow,.btnrow,.kinote,#nout,.blatt,.suchbox{display:none !important}
  .paperwrap{padding:0}
  .paper{width:auto;min-height:auto;border:none;box-shadow:none;padding:0;background:#fff;color:#000}
  .main::before{display:none}
}

/* ===== Lernen: Untergruppen der Rechtsgebiete =====
   Die drei Saeulen stehen unter einer gemeinsamen Ueberschrift, sind aber
   farblich getrennt – dieselben Tokens wie ueberall in der App. */
.untergruppe{display:flex;align-items:center;gap:9px;margin:22px 0 -4px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--c-ink,var(--muted))}
.untergruppe::before{content:"";width:16px;height:2px;border-radius:2px;
  background:var(--c,var(--line2));flex:none}

/* ============================================================
   KARTEIKARTEN — Eingangsseite, Editor, Vorschläge
   Die Ansicht hat jetzt drei Wege statt eines Stapels. Alles hier
   benutzt dieselben Tokens wie der Rest, damit nichts fremd wirkt.
   ============================================================ */

/* ---------- Schnellstart oben ---------- */
.kstart{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:18px;padding:20px 22px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--brand-soft),transparent 70%),var(--surface);
  border:1px solid var(--line2);box-shadow:var(--kante),var(--shadow)}
.kstart.ruhig{background:var(--surface-2);border-color:var(--line)}
.kstart-l{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:16px;align-items:center;min-width:0}
.kstart-n{grid-row:1/3;font-size:38px;font-weight:800;letter-spacing:-.04em;color:var(--brand-ink);
  font-variant-numeric:tabular-nums;line-height:1}
.kstart.ruhig .kstart-n{font-size:32px}
.kstart-t{font-size:16px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.kstart-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.kstart-btn{flex:none}
@media (max-width:560px){.kstart{flex-direction:column;align-items:stretch}.kstart-btn{width:100%}}

/* ---------- Die drei Wege ---------- */
.khubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.khub{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  text-align:left;cursor:pointer;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 18px 18px;box-shadow:var(--kante),var(--shadow);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s var(--ease)}
.khub::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--k-akzent,var(--brand)),transparent 80%)}
.khub:hover{transform:translateY(-4px);box-shadow:var(--kante),var(--shadow-lift);border-color:var(--line2)}
.khub:active{transform:translateY(-1px) scale(.99)}
.khub.lernen{--k-akzent:var(--brand)}
.khub.eigene{--k-akzent:var(--zivil)}
.khub.notiz{--k-akzent:var(--oeff)}
.khub-ic{font-size:26px;line-height:1;margin-bottom:4px}
.khub-t{font-size:15.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.khub-s{font-size:12.5px;line-height:1.55;color:var(--muted);flex:1}
.khub-tag{margin-top:10px;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;
  background:var(--surface-2);color:var(--faint);border:1px solid var(--line)}
@media (prefers-reduced-motion: no-preference){
  .khub-ic{transition:transform .5s var(--spring)}
  .khub:hover .khub-ic{transform:translateY(-2px) rotate(-7deg) scale(1.08)}
}

.kstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}

/* ---------- Fortschritt in der Sitzung ----------
   Karten in der Lernphase kommen zurück, der Stapel wächst also mitten
   in der Runde. Der Balken misst deshalb: erledigt von bisher gesehen. */
.kfort{margin-top:12px}
.kfort-bar{height:5px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden}
.kfort-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
  transition:width .5s var(--ease-out)}
.kfort-txt{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;font-size:12.5px;color:var(--muted)}
.kfort-txt .jumplink{padding:5px 11px;font-size:11.5px}

/* Ziffer auf dem Bewertungsknopf – zeigt das Tastenkürzel */
.krate-btn{position:relative}
.krate-k{position:absolute;top:5px;right:6px;font-size:9.5px;font-weight:700;opacity:.4;
  font-family:inherit;background:none;border:none;padding:0}
@media (max-width:520px){.krate-k{display:none}}

/* ---------- Eigene Karten: Übersicht ---------- */
.ekopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ekopf .jumplink{text-transform:none;letter-spacing:0;font-size:11.5px;padding:5px 12px}
.ekartengrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.ekarte{display:flex;flex-direction:column;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--c,var(--brand));
  border-radius:var(--r-sm);padding:15px 16px;box-shadow:var(--kante),var(--shadow);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s var(--ease)}
.ekarte:hover{transform:translateY(-2px);box-shadow:var(--kante),var(--shadow-lift)}
.ekarte-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ekarte-v{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink);line-height:1.4}
.ekarte-r{font-size:12.5px;line-height:1.6;color:var(--muted)}
.ekarte-btn{display:flex;gap:7px;margin-top:4px}
.ekarte-btn .jumplink{padding:6px 11px;font-size:11.5px}
.jumplink.weg:hover{border-color:var(--no);color:var(--no-ink)}
.btn.ghost.weg:hover{border-color:var(--no);color:var(--no-ink)}

/* ---------- Karten-Editor ---------- */
.keditor-h{font-size:25px;font-weight:700;letter-spacing:-.03em;margin:6px 0 0}
.knorm{max-width:340px}
#kstat.offen{color:var(--amber-ink)}
.keditgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
@media (max-width:820px){.keditgrid{grid-template-columns:1fr}}
.kseite{display:flex;flex-direction:column;gap:8px;min-width:0}
.kseite-lbl{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.kseite-lbl span{text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px;opacity:.85}
/* Karteikartenformat statt A4 – sonst erbt das Feld die 21 × 29,7 cm der Mitschrift. */
.paper.kfeld{width:auto;min-height:150px;padding:20px 22px;font-size:16px;line-height:1.65;
  border-radius:var(--r-sm)}
.paper.kfeld.gross{min-height:210px}
@media (max-width:820px){.paper.kfeld{min-height:120px;padding:16px 17px}}
.kedit-btns{margin-top:18px;justify-content:flex-end}
.kinote.warn{border-color:var(--amber-ink);background:var(--amber-soft);color:var(--ink)}

/* ---------- Vorschau: echte Karte zum Umdrehen ---------- */
.kprev{perspective:1200px;cursor:pointer;max-width:430px}
.kprev-in{position:relative;transform-style:preserve-3d;min-height:170px;
  transition:transform .6s var(--ease-out)}
.kprev.gedreht .kprev-in{transform:rotateY(180deg)}
.kprev-s{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:30px 22px 22px;border-radius:var(--r-md);overflow:auto;
  background:var(--surface);border:1px solid var(--line2);box-shadow:var(--kante),var(--shadow)}
.kprev-s.r{transform:rotateY(180deg);background:var(--surface-2)}
.kprev-tag{position:absolute;top:12px;left:14px;font-size:11px;font-weight:600;
  background:var(--brand-soft);color:var(--brand-ink);padding:3px 10px;border-radius:999px}
@media (prefers-reduced-motion: reduce){
  .kprev-in{transition:none}
}

/* ---------- Karten aus Notizen ---------- */
.gcard.gewaehlt{border-color:var(--brand);box-shadow:0 0 0 2px var(--ring),var(--shadow)}
.gcard.schwach{opacity:.5;cursor:default}
.gcard.schwach:hover{transform:none;box-shadow:var(--shadow)}
.nkaktion{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}
.nkliste{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.nkzeile{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;opacity:.55;
  transition:opacity .2s var(--ease),border-color .2s var(--ease)}
.nkzeile.an{opacity:1;border-color:var(--line2)}
.nkcheck{flex:none;width:26px;height:26px;margin-top:5px;border-radius:8px;cursor:pointer;
  border:1.5px solid var(--line2);background:var(--surface-2);color:#fff;
  font-size:14px;font-weight:700;line-height:1;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .25s var(--spring)}
.nkzeile.an .nkcheck{background:var(--brand);border-color:var(--brand)}
.nkcheck:hover{transform:scale(1.08)}
.nkfelder{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.nkv{font-weight:600}
.nkr{min-height:64px;font-size:13.5px}
.nkfuss{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:20px}
.nkfuss select{flex:1;min-width:180px}
@media (max-width:560px){.nkaktion .btn{width:100%}.nkfuss .btn{width:100%}}

/* ============================================================
   KARTEIKARTEN v2 — Üben-Knopf, Auswahl, Lernansicht im Fokus
   ============================================================ */

/* ---------- Ein großer Knopf statt drei gleichwertiger Kacheln ---------- */
.uebenbtn{display:flex;align-items:center;gap:20px;width:100%;text-align:left;cursor:pointer;
  margin-top:18px;padding:26px 28px;border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-soft),transparent 62%),var(--surface);
  border:1px solid var(--line2);box-shadow:var(--kante),var(--shadow);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s var(--ease)}
.uebenbtn::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),transparent 75%)}
.uebenbtn:hover{transform:translateY(-3px);box-shadow:var(--kante),var(--shadow-lift);border-color:var(--brand)}
.uebenbtn:active{transform:translateY(-1px) scale(.995)}
.uebenbtn.ruhig{background:var(--surface-2)}
.uebenbtn-ic{font-size:38px;line-height:1;flex:none}
.uebenbtn-mid{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.uebenbtn-t{font-size:26px;font-weight:750;letter-spacing:-.035em;color:var(--ink);line-height:1.05}
.uebenbtn-s{font-size:13px;color:var(--muted);line-height:1.5}
.uebenbtn-zahl{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding-left:20px;border-left:1px solid var(--line)}
.uebenbtn-zahl b{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--brand-ink);
  font-variant-numeric:tabular-nums;line-height:1}
.uebenbtn-zahl small{font-size:11px;color:var(--faint);font-weight:600}
@media (prefers-reduced-motion: no-preference){
  .uebenbtn-ic{transition:transform .5s var(--spring)}
  .uebenbtn:hover .uebenbtn-ic{transform:translateY(-2px) rotate(-8deg) scale(1.1)}
}
@media (max-width:560px){
  .uebenbtn{flex-wrap:wrap;gap:14px;padding:20px}
  .uebenbtn-t{font-size:22px}
  .uebenbtn-zahl{padding-left:0;border-left:none;border-top:1px solid var(--line);
    width:100%;flex-direction:row;align-items:baseline;gap:8px;padding-top:12px}
}
.khubgrid.zwei{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ---------- Schritt 1: Womit üben? ---------- */
.qwahlgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media (max-width:680px){.qwahlgrid{grid-template-columns:1fr}}
.qwahl{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  text-align:left;cursor:pointer;overflow:hidden;padding:26px 22px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--kante),var(--shadow);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s var(--ease)}
.qwahl::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--q-akzent,var(--brand)),transparent 80%)}
.qwahl.fertig{--q-akzent:var(--brand)}
.qwahl.eigen{--q-akzent:var(--zivil)}
.qwahl:hover{transform:translateY(-4px);box-shadow:var(--kante),var(--shadow-lift);border-color:var(--q-akzent)}
.qwahl:active{transform:translateY(-1px) scale(.99)}
.qwahl.aus{opacity:.72}
.qwahl-ic{font-size:30px;line-height:1}
.qwahl-t{font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.qwahl-s{font-size:12.5px;line-height:1.55;color:var(--muted);flex:1}
.qwahl-zahl{margin-top:8px;font-size:12.5px;color:var(--faint)}
.qwahl-zahl b{font-size:19px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.qwahl-zahl em{font-style:normal;font-weight:650;color:var(--q-akzent)}

/* ---------- Schritt 2: Themengebiet über ein Auswahlmenü ---------- */

.fachinfo{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}
.fachinfo-z{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 12px;
  border-radius:var(--r-md);background:var(--c-soft,var(--surface-2));
  border:1px solid var(--line)}
.fachinfo-z b{font-size:30px;font-weight:800;letter-spacing:-.04em;
  color:var(--c-ink,var(--brand-ink));font-variant-numeric:tabular-nums;line-height:1.1}
.fachinfo-z span{font-size:11.5px;color:var(--muted);font-weight:600}

.btn.gross{padding:17px 26px;font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin-top:18px}
.linkbtn.mitte{display:block;margin:12px auto 0}

/* ---------- Schritt 3: die Lernansicht ---------- */
.page.lernpage{display:flex;flex-direction:column;gap:14px;max-width:min(1260px,100%);margin-inline:auto}

/* Kopfleiste: zurück · Themengebiet · Quelle · Vollbild */
.lernbar{display:flex;align-items:center;gap:10px;padding:7px 9px 7px 7px;
  border-radius:999px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--kante),var(--shadow)}
.lernbar-back,.lernbar-voll{flex:none;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;border:1px solid transparent;background:none;
  color:var(--muted);cursor:pointer;font-size:15px;
  transition:background .18s var(--ease),color .18s var(--ease),transform .25s var(--spring)}
.lernbar-back svg{width:18px;height:18px}
.lernbar-back:hover,.lernbar-voll:hover{background:var(--surface-2);color:var(--ink);transform:scale(1.06)}
.lernbar-quelle{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--c-soft,var(--brand-soft));
  color:var(--c-ink,var(--brand-ink))}
@media (max-width:520px){.lernbar-quelle{display:none}}

.lernmitte{display:flex;flex-direction:column}
.lernfuss{display:flex;justify-content:center;padding-top:2px}

/* Fortschritt nimmt die Fachfarbe an */
.lernpage .kfort-bar i{background:linear-gradient(90deg,var(--c,var(--brand-2)),var(--c-ink,var(--brand)))}

/* Die große Karte */
.flash.gross{min-height:340px;padding:52px 40px 40px;border-radius:26px;
  border-color:var(--line2);gap:18px}
.flash.gross::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:26px 26px 0 0;background:linear-gradient(90deg,var(--c,var(--brand)),transparent 82%)}
.flash.gross .flash-tag{top:20px;left:22px;font-size:12px;padding:5px 13px;
  background:var(--c-soft,var(--brand-soft));color:var(--c-ink,var(--brand-ink))}
.flash.gross .flash-front{font-size:30px;line-height:1.3;letter-spacing:-.03em}
.flash.gross .flash-front.klein{font-size:19px;line-height:1.55;font-weight:500}
.flash.gross .flash-back{font-size:18px;line-height:1.7}
.flash-trenner{width:54px;height:2px;border-radius:2px;margin:2px auto;
  background:var(--c,var(--line2));opacity:.5}
.flash.gross .flash-hint{margin-top:10px}
@media (max-width:640px){
  .flash.gross{min-height:270px;padding:46px 22px 30px}
  .flash.gross .flash-front{font-size:24px}
  .flash.gross .flash-back{font-size:16px}
}

/* Bewertungsknöpfe: „Sitzt" in der Fachfarbe */
.lernpage .krate{margin-top:20px;gap:10px}
.lernpage .krate-btn{padding:14px 8px}
.lernpage .krate-btn span{font-size:15px}
.lernpage .krate-btn.s3{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:var(--bg)}
.tippbox{margin-top:18px;display:flex;flex-direction:column;gap:12px}

/* ---------- Abfragemodus als Schiebeschalter ---------- */
.segmented{position:relative;display:inline-flex;padding:4px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--kante)}
.seg{position:relative;z-index:1;display:flex;align-items:center;gap:7px;
  padding:9px 18px;border:none;background:none;cursor:pointer;border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--muted);
  transition:color .22s var(--ease)}
/* Die Fachfarben sind im dunklen Theme hell und im hellen Theme kraeftig.
   Weisse Schrift traegt deshalb nur in Light und Lesen; im Dark-Theme
   braucht es umgekehrt dunkle Schrift, sonst steht das Wort bei rund 2:1. */
.seg.on{color:var(--bg)}
:root.light .seg.on,:root.lesen .seg.on{color:#fff}
.seg-ic{font-size:14px;line-height:1}
.seg-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);
  border-radius:999px;background:var(--c,var(--brand));
  box-shadow:0 6px 16px -8px var(--ring);
  transform:translateX(calc(var(--seg-i,0) * 100%));
  transition:transform .38s var(--spring)}
@media (prefers-reduced-motion: reduce){.seg-pill{transition:none}}
@media (max-width:480px){
  .segmented{width:100%}
  .seg{flex:1;justify-content:center;padding:9px 6px;font-size:12px}
  .seg-ic{display:none}
}

/* ---------- Fokus-Modus: alles außer der Karte tritt zurück ---------- */
:root.fokus .topbar{display:none}
:root.fokus .main{padding-top:22px}
:root.fokus .main::after{opacity:.35}
:root.fokus .page.lernpage{max-width:min(1100px,100%);min-height:calc(100vh - 44px);
  justify-content:center;padding-bottom:22px}
:root.fokus .flash.gross{min-height:420px}
:root.fokus .flash.gross .flash-front{font-size:34px}
:root.fokus .lernbar{background:transparent;border-color:transparent;box-shadow:none}
:root.fokus .lernbar:hover{background:var(--surface);border-color:var(--line)}
@media (max-width:640px){
  :root.fokus .flash.gross{min-height:300px}
  :root.fokus .flash.gross .flash-front{font-size:26px}
}

/* Weiße Schrift auf der Fachfarbe trägt in Light und Lesen nicht – die
   Amber-Töne der Grundlagenfächer kommen dort nur auf etwa 3:1. Deshalb
   in diesen Ansichten den dunkleren Ton derselben Farbe nehmen. */
:root.light .seg-pill,:root.lesen .seg-pill{background:var(--c-ink,var(--brand-ink))}
:root.light .lernpage .krate-btn.s3,:root.lesen .lernpage .krate-btn.s3{
  background:var(--c-ink,var(--brand-ink));border-color:var(--c-ink,var(--brand-ink));color:#fff}

/* ============================================================
   AUSWAHLMENÜS
   ------------------------------------------------------------
   Das Grundproblem zuerst: Ein natives <select> übergibt seine
   Optionsliste dem Betriebssystem. Ohne color-scheme malt das die
   Liste im hellen Systemschema – unsere Schrift ist im Dark-Theme
   aber fast weiß. Ergebnis: eine weiße Fläche, in der der Text erst
   beim Überfahren auftaucht. Das betraf JEDES Menü der App:
   Vorlesung in den Notizen, Schriftgröße und Absatzformat in der
   Werkzeugleiste, Fach im Karten-Editor, Fach bei den Notiz-Karten.
   ============================================================ */
:root{color-scheme:dark}
:root.light,:root.lesen{color-scheme:light}
/* Doppelt genäht: Browser, die color-scheme ignorieren, bekommen die
   Farben ausdrücklich gesetzt. */
select option,select optgroup{background:var(--surface);color:var(--ink)}

/* ============================================================
   Eigenes Auswahlmenü für die Themengebiete
   ============================================================ */
.fmenu{position:relative;flex:1;min-width:0;max-width:100%}
/* Traegt eine Glasflaeche ein offenes Menue, muss sie ueber ihre
   Nachbarn - sonst verschwindet die Liste hinter der naechsten Karte. */
.hebt{position:relative;z-index:70}
.fmenu-knopf{display:flex;align-items:center;gap:11px;width:100%;min-width:0;cursor:pointer;
  padding:13px 14px 13px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line2);
  box-shadow:var(--kante),var(--shadow);
  font-family:inherit;font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fmenu-knopf:hover{border-color:var(--c,var(--brand))}
.fmenu.auf .fmenu-knopf{border-color:var(--c,var(--brand));box-shadow:var(--kante),0 0 0 3px var(--ring)}
.fmenu-punkt{flex:none;width:11px;height:11px;border-radius:50%;
  background:var(--c,var(--brand));box-shadow:0 0 0 3px var(--c-soft,var(--brand-soft))}
.fmenu-txt{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmenu-zahl{flex:none;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--c-soft,var(--brand-soft));color:var(--c-ink,var(--brand-ink))}
.fmenu-chev{flex:none;display:flex;color:var(--faint);transition:transform .3s var(--ease-out)}
.fmenu-chev svg{width:17px;height:17px}
.fmenu.auf .fmenu-chev{transform:rotate(180deg)}

.fmenu-liste{position:absolute;z-index:60;top:calc(100% + 7px);left:0;right:0;
  max-height:min(58vh,420px);overflow-y:auto;padding:6px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line2);
  box-shadow:var(--kante),var(--shadow-lift);
  opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;
  transition:opacity .18s var(--ease),transform .22s var(--ease-out)}
.fmenu.auf .fmenu-liste{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  .fmenu-liste{transition:none}
  .fmenu-chev{transition:none}
}
.fmenu-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:11px 12px;border:none;border-radius:var(--r-sm);background:none;
  font-family:inherit;font-size:14px;font-weight:550;color:var(--ink);
  transition:background .14s var(--ease)}
.fmenu-opt:hover,.fmenu-opt:focus-visible{background:var(--c-soft,var(--brand-soft));outline:none}
.fmenu-opt.on{background:var(--c-soft,var(--brand-soft))}
.fmenu-opt .fmenu-punkt{width:9px;height:9px;box-shadow:0 0 0 2.5px var(--c-soft,var(--brand-soft))}
.fmenu-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --faint waere hier zu blass: auf der eingefaerbten aktiven Zeile faellt
   es im Dark-Theme auf 2,8:1 zurueck. Deshalb --muted, und in der aktiven
   Zeile der helle Akzentton. */
.fmenu-meta{flex:none;font-size:11.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.fmenu-opt.on .fmenu-meta{color:var(--c-ink,var(--brand-ink))}
.fmenu-meta em{font-style:normal;font-weight:700;color:var(--c-ink,var(--brand-ink))}
.fmenu-haken{flex:none;font-size:13px;font-weight:800;color:var(--c-ink,var(--brand-ink))}

/* Kompakte Fassung in der Kopfleiste der Abfrage */
.fmenu.klein .fmenu-knopf{padding:8px 8px 8px 12px;border:1px solid transparent;
  background:none;box-shadow:none;font-size:14.5px}
.fmenu.klein .fmenu-knopf:hover{background:var(--surface-2);border-color:var(--line)}
.fmenu.klein.auf .fmenu-knopf{background:var(--surface-2);border-color:var(--c,var(--brand));box-shadow:none}
.fmenu.klein .fmenu-liste{left:-6px;right:-6px;min-width:260px}
@media (max-width:520px){
  .fmenu.klein .fmenu-liste{left:-46px;right:-46px}
  .fmenu-meta{display:none}
}

/* ---------- Mehrfachauswahl in der Optionsliste ---------- */
.fmenu-box{flex:none;width:17px;height:17px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:800;color:#fff;
  border:1.5px solid var(--line2);background:var(--surface-2);
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.fmenu-opt.on .fmenu-box{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:var(--bg)}
:root.light .fmenu-opt.on .fmenu-box,:root.lesen .fmenu-opt.on .fmenu-box{
  background:var(--c-ink,var(--brand-ink));border-color:var(--c-ink,var(--brand-ink));color:#fff}
.fmenu-stapel{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--brand-soft);color:var(--brand-ink)}
.fmenu-eic{margin-right:6px}
.fmenu.mehrfach .fmenu-liste{max-height:min(52vh,380px)}

/* ---------- Tagesspruch auf der Startseite ---------- */
.tagesspruch{font-size:13.5px;line-height:1.55;color:var(--muted);
  margin-top:5px;max-width:74ch}
@media (prefers-reduced-motion: no-preference){
  .spruch{animation:spruchAuf .5s var(--ease-out) both}
}
@keyframes spruchAuf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Semesteranzeige unter Lernen ---------- */
.lernsem{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 20px;
  border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--kante),var(--shadow)}
.lernsem-num{flex:none;font-size:30px;font-weight:800;letter-spacing:-.05em;
  color:var(--c-ink,var(--brand-ink));line-height:1;font-variant-numeric:tabular-nums}
.lernsem-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lernsem-lbl{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.lernsem-f{font-size:13.5px;color:var(--ink);line-height:1.5}
.lernsem.leer .lernsem-f{color:var(--muted)}
.lernsem .jumplink{flex:none}
@media (max-width:560px){
  .lernsem{flex-wrap:wrap;gap:10px}
  .lernsem .jumplink,.lernsem .btn{width:100%}
}

/* Die Crashkurs-Leiste hält jetzt Auswahllisten statt Chipreihen */
.crashbar-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.crashbar-row .fmenu{flex:1;min-width:220px}

/* ---------- Fehlerbuch nach Kategorien ---------- */
.errgruppe{margin-top:22px;padding:16px 16px 6px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--c,var(--brand));box-shadow:var(--kante),var(--shadow)}
.errgruppe-kopf{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.errgruppe-ic{font-size:19px;line-height:1}
.errgruppe-t{flex:1;font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.errgruppe-n{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:var(--c-soft,var(--brand-soft));color:var(--c-ink,var(--brand-ink))}
.errgruppe .errlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:11px}
.errgruppe .errcard{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 14px;margin:0 0 11px;
  transition:opacity .3s var(--ease),border-color .2s var(--ease)}
.errgruppe .errcard.done{opacity:.45}
.errgruppe .errcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.errgruppe .errcard-title{font-size:14px;font-weight:600;line-height:1.45;color:var(--ink);margin-bottom:9px}
.errgruppe .errcard-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.errgruppe .errcard-row .jumplink{padding:6px 11px;font-size:11.5px}
.errgruppe .errcard-row .muted{font-size:11.5px}

/* ============================================================
   KLAUSUR-TIMER: Uhr, Start/Pause, Stopp
   ============================================================ */
.uhr-para{text-anchor:middle;font-family:Georgia,serif;font-size:26px;font-weight:700;
  fill:var(--c-ink,var(--brand-ink));opacity:.16;pointer-events:none}
.uhr.laeuft .uhr-para{opacity:.3}
.uhr-rest{stroke:url(#uhrVerlauf)}
.uhr-griff{fill:var(--surface);stroke:var(--c,var(--brand));stroke-width:3;cursor:grab;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.uhr-griff:active{cursor:grabbing}
.uhr-griff-punkt{fill:var(--c,var(--brand));pointer-events:none}
.uhr-mitte{fill:var(--c,var(--brand))}
.uhr-zeiger{stroke:var(--c,var(--brand));stroke-width:3.5;stroke-linecap:round}
@media (prefers-reduced-motion: no-preference){
  .uhr-zeiger,.uhr-griff,.uhr-griff-punkt{transition:all .25s var(--ease-out)}
  .uhr.laeuft .uhr-zeiger,.uhr.laeuft .uhr-griff,.uhr.laeuft .uhr-griff-punkt{transition:all .9s linear}
}
.uhr.pausiert .uhr-rest{opacity:.5}
.uhr.pausiert .uhr-digital span{color:var(--amber-ink)}

/* Steuerung */
.klsteuer{display:flex;flex-direction:column;gap:16px;flex:1;min-width:240px}
.klsteuer-zeit{display:flex;flex-direction:column;gap:7px}
.klsteuer-knoepfe{display:flex;gap:11px}
.klbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 18px;border-radius:var(--r-md);cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.015em;
  border:1.5px solid transparent;
  transition:transform .22s var(--ease-out),box-shadow .3s var(--ease),
             background .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease)}
.klbtn:active{transform:scale(.97)}
.klbtn-ic{font-size:15px;line-height:1}

/* Start leuchtet sofort gruen */
.klbtn.start{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}
.klbtn.start:hover{background:var(--ok);color:var(--bg)}
@media (prefers-reduced-motion: no-preference){
  .klbtn.start{animation:startPuls 2.6s var(--ease) infinite}
}
@keyframes startPuls{
  0%,100%{box-shadow:0 0 0 0 rgba(46,199,143,0)}
  50%{box-shadow:0 0 0 7px rgba(46,199,143,.13)}
}
/* Sobald gestartet, wird derselbe Knopf zur gelben Pause */
.klbtn.start.istpause{background:var(--amber-soft);border-color:var(--amber-ink);color:var(--amber-ink);
  animation:pausePuls 2.2s var(--ease) infinite}
.klbtn.start.istpause:hover{background:var(--amber-ink);color:var(--bg)}
@keyframes pausePuls{
  0%,100%{box-shadow:0 0 0 0 rgba(240,194,112,0)}
  50%{box-shadow:0 0 0 7px rgba(240,194,112,.16)}
}
/* Stopp ruht, bis der Timer laeuft - dann leuchtet er rot */
.klbtn.stopp.ruht{background:var(--surface-2);border-color:var(--line);color:var(--faint);
  cursor:default;opacity:.55}
.klbtn.stopp.scharf{background:var(--no-soft);border-color:var(--no);color:var(--no-ink)}
.klbtn.stopp.scharf:hover{background:var(--no);color:#fff}
@media (prefers-reduced-motion: no-preference){
  .klbtn.stopp.scharf{animation:stoppPuls 2.6s var(--ease) infinite}
}
@keyframes stoppPuls{
  0%,100%{box-shadow:0 0 0 0 rgba(255,90,87,0)}
  50%{box-shadow:0 0 0 7px rgba(255,90,87,.14)}
}
@media (max-width:560px){
  .klsteuer-knoepfe{flex-direction:column}
}

/* ---------- Klausur: Werkzeuge, Marker, Drucken ---------- */
.klwerkzeug{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.klzeit-tag{margin-left:auto;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:var(--c-soft,var(--brand-soft));color:var(--c-ink,var(--brand-ink))}
.casebox #klSach{user-select:text;-webkit-user-select:text;cursor:text}
mark.klmark{background:var(--amber-soft);color:inherit;
  box-shadow:inset 0 -0.5em 0 var(--amber-soft);border-radius:3px;padding:0 2px}
:root.light mark.klmark,:root.lesen mark.klmark{background:#ffe98a;color:#2b2318}

/* Drucken: nur der Klausurbogen, mit Platz zum Schreiben */
@media print{
  :root.drucken-klausur .topbar,
  :root.drucken-klausur .klwerkzeug,
  :root.drucken-klausur .klbar,
  :root.drucken-klausur .hintbox,
  :root.drucken-klausur .gliedbox,
  :root.drucken-klausur .answer,
  :root.drucken-klausur .btnrow,
  :root.drucken-klausur .kinote,
  :root.drucken-klausur .back,
  :root.drucken-klausur #kmuster,
  :root.drucken-klausur #kfeedback,
  :root.drucken-klausur .histbox{display:none !important}
  :root.drucken-klausur .casebox{border:none;box-shadow:none;background:#fff;color:#000;
    padding:0;max-width:100%}
  :root.drucken-klausur .casebox .sv{font-family:Georgia,serif;font-size:12pt;line-height:2;
    color:#000;text-align:justify}
  :root.drucken-klausur .casebox .frage{font-family:Georgia,serif;font-size:12pt;color:#000;
    margin-top:1.2em}
  :root.drucken-klausur mark.klmark{background:none;box-shadow:none;
    border-bottom:2px solid #000;font-weight:600}
  :root.drucken-klausur .casebox-head .pill{border:1px solid #000;color:#000;background:none}
  :root.drucken-klausur .klzeit-tag{border:1px solid #000;color:#000;background:none}
}

/* ---------- Plan & Klausuren ---------- */
.planhero{display:flex;align-items:center;gap:22px;margin-top:18px;padding:20px 24px;
  border-radius:var(--r-lg);border:1px solid var(--line2);
  background:linear-gradient(120deg,var(--brand-soft),transparent 62%),var(--surface);
  box-shadow:var(--kante),var(--shadow)}
.planring{position:relative;flex:none;width:104px;height:104px}
.planring svg{width:100%;height:100%;transform:rotate(-90deg)}
.planring-bg{fill:none;stroke:var(--surface-2);stroke-width:9}
.planring-fill{fill:none;stroke:var(--brand);stroke-width:9;stroke-linecap:round;
  transition:stroke-dasharray .7s var(--ease-out)}
.planring-tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0}
.planring-tx b{font-size:29px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.planring-tx small{font-size:10.5px;font-weight:600;color:var(--faint)}
.planhero-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.planhero-t{font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.planhero-s{font-size:13.5px;line-height:1.6;color:var(--muted)}
@media (max-width:560px){.planhero{flex-direction:column;text-align:center}}

.goalchips .chip{min-width:52px;justify-content:center}

.examkarte{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:9px;
  border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--c,var(--brand));
  box-shadow:var(--kante),var(--shadow);
  transition:transform .25s var(--ease-out),border-color .2s var(--ease)}
.examkarte:hover{transform:translateX(2px)}
.examkarte.past{opacity:.5}
.examkarte.akut{border-color:var(--no);border-left-color:var(--no)}
.examkarte.bald{border-color:var(--amber-ink);border-left-color:var(--amber-ink)}
.examkarte-ic{flex:none;width:24px;height:24px;color:var(--c-ink,var(--brand-ink))}
.examkarte-ic svg{width:100%;height:100%}
.examkarte-tx{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.examkarte-t{font-size:14.5px;font-weight:650;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.examkarte-s{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.examkarte-zahl{flex:none;display:flex;flex-direction:column;align-items:center;
  font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--c-ink,var(--brand-ink));
  font-variant-numeric:tabular-nums;line-height:1.05}
.examkarte.akut .examkarte-zahl{color:var(--no-ink)}
.examkarte.bald .examkarte-zahl{color:var(--amber-ink)}
.examkarte-zahl small{font-size:9.5px;font-weight:600;color:var(--faint);letter-spacing:.04em}
.examkarte .jumplink.weg{flex:none;padding:5px 10px;font-size:13px;line-height:1}

/* ===== Personalisierung: alles ordnet sich um das eigene Semester ===== */

/* Überschrift über dem eigenen Block – hebt sich vom neutralen Label ab */
.section-label.mein{color:var(--brand-ink)}
.section-label.mein::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--brand);margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 20%,transparent)}

/* Chip, der auf das eigene Semester filtert */
.chip.mein{border-color:color-mix(in srgb,var(--brand) 42%,transparent);color:var(--brand-ink)}
.chip.mein.on{background:var(--brand);color:var(--bg);border-color:var(--brand)}
:root.light .chip.mein.on,:root.lesen .chip.mein.on{background:var(--brand-ink);color:#fff;border-color:var(--brand-ink)}

/* Erster Schritt: Semesterwahl */
.onboarding{padding-top:26px;text-align:center}
.onb-owl{display:flex;justify-content:center;margin-bottom:14px}
.onb-owl .owl-svg{width:74px;height:74px}
.onboarding .page-head{text-align:center}
.onboarding .muted{max-width:520px;margin:10px auto 0}
.semkarten{display:grid;gap:11px;margin:26px 0 8px;text-align:left}
.semkarte{display:flex;align-items:center;gap:16px;width:100%;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px;color:inherit;font-family:inherit;text-align:left;
  box-shadow:var(--kante),var(--shadow);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease),box-shadow .25s var(--ease-out)}
.semkarte:hover{transform:translateY(-2px);border-color:var(--brand);
  box-shadow:var(--kante),var(--shadow-lift)}
.semkarte-num{flex:none;font-family:Georgia,"Times New Roman",serif;font-size:34px;line-height:1;
  font-weight:700;color:var(--brand);min-width:52px}
.semkarte-dot{opacity:.45}
.semkarte-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.semkarte-t{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.semkarte-f{font-size:12.5px;color:var(--muted);line-height:1.5}

/* Überschrift im Vorlesungs-Dialog */
.vlsemlbl{font-size:11.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin:14px 0 6px;text-align:left}

/* ===== Geführtes Gutachten im Fall ===== */

/* Die Kette oben: wo stehe ich, was sitzt schon */
.gutkette.fall{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 4px}
.gutkette.fall em{color:var(--faint);font-style:normal;font-size:12px}
.gutschritt{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:5px 11px 5px 6px;border-radius:999px;border:1px solid var(--line2);color:var(--faint)}
.gutschritt i{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--surface-2);color:var(--faint);font-style:normal;font-size:11px;font-weight:700}
.gutschritt.jetzt{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.gutschritt.jetzt i{background:var(--brand);color:var(--bg)}
:root.light .gutschritt.jetzt i,:root.lesen .gutschritt.jetzt i{background:var(--brand-ink);color:#fff}
.gutschritt.gut{border-color:color-mix(in srgb,var(--ok) 42%,transparent);color:var(--ok-ink)}
.gutschritt.gut i{background:var(--ok-soft);color:var(--ok-ink)}
.gutschritt.schwach{border-color:color-mix(in srgb,var(--grund) 45%,transparent);color:var(--grund-ink)}
.gutschritt.schwach i{background:var(--amber-soft);color:var(--grund-ink)}

.gutfrage{font-size:14px;font-weight:600;line-height:1.55;margin:14px 0 4px}

/* Aufgabe + Schreibfeld */
.gutschreib{margin-top:14px}
.gutaufgabe{display:flex;gap:12px;align-items:flex-start;background:var(--brand-soft);
  border-radius:var(--r-sm);padding:13px 15px;margin-bottom:12px}
.gutaufgabe strong{display:block;font-size:14.5px;color:var(--brand-ink)}
.gutaufgabe small{display:block;font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:4px}
.gutnum{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
:root.light .gutnum,:root.lesen .gutnum{background:var(--brand-ink);color:#fff}
.gutfeld{min-height:132px;font-size:14.5px;line-height:1.65}

/* Rückmeldung: Bausteine, nicht Noten */
.gutrueck{border-radius:var(--r-md);padding:15px 17px;margin-top:16px;border:1px solid var(--line)}
.gutrueck.gut{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 34%,transparent)}
.gutrueck.schwach{background:var(--amber-soft);border-color:color-mix(in srgb,var(--grund) 34%,transparent)}
.gutrueck-kopf{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:11px}
.gutrueck.gut .gutrueck-kopf{color:var(--ok-ink)}
.gutrueck.schwach .gutrueck-kopf{color:var(--grund-ink)}
.gutquote{font-size:12px;font-weight:500;color:var(--muted);margin-left:6px}
.gutzeile{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;padding:5px 0}
.gutzeile+.gutzeile{border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.gutzeile svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--ok-ink)}
.gutzeile b{flex:none;width:15px;text-align:center;font-size:14px;margin-top:1px}
.gutzeile.nein b{color:var(--faint)}
.gutzeile.warn b{color:var(--no-ink)}
.gutzeile small{display:block;font-size:12px;color:var(--muted);line-height:1.55;margin-top:2px}

/* Der eigene Text zum Vergleich daneben */
.gutdeins{margin-top:14px;background:var(--surface-2);border-radius:var(--r-sm);padding:13px 15px}
.gutdeins-lbl{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.gutdeins p{font-size:13.5px;line-height:1.65;white-space:pre-wrap;margin:0}

/* ===== Plan & Klausuren: Kartenrahmen statt loser Überschriften ===== */
.plankarte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 20px 20px;margin-bottom:16px;box-shadow:var(--kante),var(--shadow)}
/* Die Klausurtermine stehen oben und dürfen das auch zeigen */
.plankarte.zuerst{border-color:color-mix(in srgb,var(--brand) 30%,transparent);
  background:linear-gradient(180deg,var(--brand-soft),transparent 42%),var(--surface)}
.plankarte-kopf{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}
.plankarte-ic{flex:none;width:36px;height:36px;border-radius:11px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:17px}
.plankarte.zuerst .plankarte-ic{background:var(--brand);color:var(--bg)}
:root.light .plankarte.zuerst .plankarte-ic,:root.lesen .plankarte.zuerst .plankarte-ic{
  background:var(--brand-ink);color:#fff}
.plankarte-tx{flex:1;min-width:0}
.plankarte-t{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em}
.plankarte-s{display:block;font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:3px}
.plankarte .section-label:first-child{margin-top:0}
.plankarte .planinfo{margin-bottom:0}
.plankarte .semwahl{margin:0}
.plankarte .goalchips{margin-top:16px}
.plankarte .planhero{margin:0}

.examliste{display:grid;gap:9px}
/* Leerer Zustand: einladend statt nur grau */
.examleer{display:flex;gap:13px;align-items:flex-start;background:var(--surface-2);
  border:1px dashed var(--line2);border-radius:var(--r-sm);padding:15px 16px}
.examleer-ic{flex:none;font-size:22px;line-height:1.2}
.examleer-tx{font-size:13px;color:var(--muted);line-height:1.6}

/* ===== Fortschritt nach Fach: ein Prozentwert über alle Inhalte ===== */
.fachliste{display:grid;gap:11px;margin-top:4px}
.fachrow{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c,var(--brand));
  border-radius:var(--r-sm);padding:12px 14px}
.fachrow.fertig{border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  border-left-color:var(--ok);background:var(--ok-soft)}
.fachrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.fachrow-n{font-size:13.5px;font-weight:650}
.fachrow-p{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--c-ink,var(--brand-ink))}
.fachrow.fertig .fachrow-p{color:var(--ok-ink)}
.fachrow .bar{margin:0;max-width:none}
.fachrow-teile{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fachteil{font-size:11.5px;font-weight:500;color:var(--muted);background:var(--surface-2);
  border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}
.fachteil.voll{color:var(--ok-ink);background:var(--ok-soft)}

/* Der Studium-Block ganz unten: ruhig, nur zwei Wege hinein */
.plankarte.unten{background:var(--surface-2);border-style:dashed}
.plankarte.unten .plankarte-ic{background:var(--surface)}
.studiumzeile{background:var(--surface);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:12px}
.studiumzeile-tx{font-size:13px;color:var(--muted);line-height:1.6}
.studiumknoepfe{margin-top:14px}
.studiumknoepfe .btn{flex:1 1 180px}

/* Welche Fassung läuft gerade? Steht unter "Ich → Fortschritt". */
.versionzeile{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.versionzeile b{color:var(--muted);font-weight:650}
.versionzeile small{display:block;font-size:11.5px;line-height:1.55;margin-top:5px}

/* ==== LIQUID GLASS (23.08.2026) ============================
   Milchglas statt Volltonflaechen. Drei Zutaten, immer zusammen:
     1. eine halbdurchsichtige Fuellung - der Untergrund scheint durch
     2. backdrop-filter - ohne Unschaerfe ist es kein Glas, nur blass
     3. ein heller Saum auf der Oberkante plus weicher Schlagschatten
   Die Fuellung bleibt bewusst kraeftig (rund 72 %). Ganz durchsichtig
   waere huebsch und unlesbar.
   --surface / --surface-2 bleiben als Vollton stehen: Rueckfall fuer
   Browser ohne backdrop-filter und Rechengrundlage der Kontrasttests.
   Die Selektorlisten sind aus styles.css erzeugt (bauglas.py) - jede
   Flaeche, die vorher --surface trug, wird Glas.
   =========================================================== */
:root{
  /* Dunkles Glas ist ein heller Schleier ueber Farbe, keine schwarze Platte.
     Deshalb Weiss mit kleiner Deckkraft - der Untergrund macht die Farbe. */
  --glas-fill:rgba(255,255,255,.085);
  --glas-fill-2:rgba(255,255,255,.055);
  --glas-tief:rgba(10,15,18,.55);
  --glas-kante:rgba(255,255,255,.14);
  --glas-kante-hell:rgba(255,255,255,.34);
  --glas-lack:linear-gradient(157deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 44%,rgba(255,255,255,0) 72%);
  --glas-rim:inset 0 1px 0 var(--glas-kante-hell),inset 0 -1px 0 rgba(255,255,255,.07);
  --glas-schatten:0 1px 2px rgba(0,0,0,.28),0 18px 40px -16px rgba(0,0,0,.6);
  --glas-schatten-hoch:0 8px 20px rgba(0,0,0,.34),0 34px 62px -18px rgba(0,0,0,.68);
  --unschaerfe:saturate(175%) blur(20px);
  /* Dichtes Glas: fuer alles, was ueber fremdem TEXT liegt statt ueber der
     Tapete. Duennes Glas laesst dort zwei Texte uebereinander stehen. */
  --glas-dicht:rgba(13,19,23,.94);
}
:root.light{
  --glas-fill:rgba(255,255,255,.62);
  --glas-fill-2:rgba(255,255,255,.45);
  --glas-tief:rgba(255,255,255,.72);
  --glas-kante:rgba(255,255,255,.8);
  --glas-kante-hell:rgba(255,255,255,.95);
  --glas-lack:linear-gradient(157deg,rgba(255,255,255,.6),rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 74%);
  --glas-rim:inset 0 1px 0 var(--glas-kante-hell),inset 0 0 0 1px rgba(255,255,255,.4);
  --glas-schatten:0 1px 2px rgba(15,60,55,.06),0 16px 36px -16px rgba(15,60,55,.2);
  --glas-schatten-hoch:0 10px 24px rgba(15,60,55,.12),0 32px 58px -20px rgba(15,60,55,.26);
  --glas-dicht:rgba(252,254,253,.95);
}
:root.lesen{
  --glas-fill:rgba(252,246,235,.78);
  --glas-fill-2:rgba(247,239,224,.58);
  --glas-tief:rgba(250,244,232,.85);
  --glas-kante:rgba(255,253,247,.72);
  --glas-kante-hell:rgba(255,255,255,.88);
  --glas-lack:linear-gradient(157deg,rgba(255,255,255,.46),rgba(255,255,255,.1) 46%,rgba(255,255,255,0) 74%);
  --glas-rim:inset 0 1px 0 var(--glas-kante-hell),inset 0 0 0 1px rgba(255,255,255,.32);
  --glas-schatten:0 1px 2px rgba(90,70,30,.09),0 16px 36px -16px rgba(90,70,30,.22);
  --glas-schatten-hoch:0 10px 24px rgba(90,70,30,.15),0 32px 58px -20px rgba(90,70,30,.28);
  --glas-dicht:rgba(250,244,232,.96);
}

/* Rundungen: Squircle statt Karteikasten */
:root{--r-sm:14px;--r-md:20px;--r-lg:28px}

/* Der Untergrund. Glas ohne etwas dahinter ist nur eine graue Flaeche.
   Die Tapete liegt auf dem body und damit UNTER allem: .main::before traegt
   weiter die Tagesenergie, .main::after das Raster. Beide bleiben unberuehrt. */
body{
  background:
    radial-gradient(62rem 46rem at 6% -18%, rgba(23,183,166,.34), transparent 60%),
    radial-gradient(54rem 42rem at 102% -10%, rgba(133,92,230,.32), transparent 62%),
    radial-gradient(60rem 44rem at 84% 110%, rgba(48,120,224,.28), transparent 60%),
    radial-gradient(40rem 32rem at 22% 72%, rgba(242,112,143,.14), transparent 64%),
    radial-gradient(70rem 50rem at 50% 42%, rgba(34,86,120,.30), transparent 68%),
    linear-gradient(168deg,#0b141a,#080c11 50%,#0a0d16);
  background-attachment:fixed}
:root.light body{
  background:
    radial-gradient(62rem 46rem at 6% -18%, rgba(13,148,136,.20), transparent 60%),
    radial-gradient(54rem 42rem at 102% -10%, rgba(124,83,216,.17), transparent 62%),
    radial-gradient(60rem 44rem at 84% 110%, rgba(43,111,212,.16), transparent 60%),
    linear-gradient(168deg,#f2f6f4,#eef2f0 55%,#e9eef1);
  background-attachment:fixed}
:root.lesen body{
  background:
    radial-gradient(62rem 46rem at 6% -18%, rgba(10,125,112,.14), transparent 60%),
    radial-gradient(54rem 42rem at 102% -10%, rgba(154,102,18,.16), transparent 62%),
    linear-gradient(168deg,#ece1cb,#e8dcc4 55%,#e5d8bd);
  background-attachment:fixed}

/* ---- Traeger: die grossen Flaechen ---------------------------------- */
.answer,.card-plain,.casebox,
.casecard,.cdempty,.cdrow,.cprog,
.crash,.crashbar,.def,.dropdown,
.ekarte,.energy,.energy-btn,.erf,
.errbanner,.errcard,.errgruppe,.examadd,
.examkarte,.examrow,.fachrow,.fachwahl,
.feier-box,.flash,.fmenu-liste,.gcard,
.glaw,.gutkarte,.histbox,.juribox,
.kartform,.kdone,.kfb-ai,.kfb-score,
.khub,.klbar,.lernbar,.lernsem,
.levelcard,.miniq,.mrow,.muster-body,
.nkzeile,.notizquick,.nxt,.opt,
.plankarte,.questbox,.qwahl,.sch,
.semkarte,.sessbar,.sperre,.stat,
.studiumzeile,.subbox,.subcard,.subdone,
.such-panel,.tile,select option,select optgroup{
  background:var(--glas-lack),var(--glas-fill);
  -webkit-backdrop-filter:var(--unschaerfe);
  backdrop-filter:var(--unschaerfe);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim),var(--glas-schatten)}

/* ---- Einlagen: was INNERHALB einer Scheibe liegt, bleibt duenn.
   Kein eigener backdrop-filter - zwei Unschaerfen uebereinander ergeben
   Milch, und auf langen Listen kostet es spuerbar Leistung. ------------ */
.ansicht,.crash-item,.defbegriff,.errgruppe .errcard,
.examadd .gsearch,.examleer,.fachteil,.fmenu-box,
.fmenu.klein .fmenu-knopf:hover,.fmenu.klein.auf .fmenu-knopf,.freizeile,.gdef,
.gutdeins,.gutkette span,.gutschritt i,.juritipp-bubble,
.juritipp-bubble::before,.kbdrow kbd,.kfort-bar,.khub-tag,
.kinote,.klbtn.stopp.ruht,.kstart.ruhig,.lernbar-back:hover,.lernbar-voll:hover,
.linkbtn:hover,.locked-ic,.loesung,.nkcheck,
.normchip,.normtreffer,.nq-vl,.plankarte-ic,
.plankarte.unten,.segmented,.siehe-row:hover,.streit-rel,
.subsv,.such-esc,.such-fuss kbd,.such-typ,
.such-zeile:hover,.suchknopf,.tippfb,.tt-ic,
.uebenbtn.ruhig{
  background:var(--glas-fill-2);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim)}

/* ---- Was ueber fremdem Text liegt, wird dicht -----------------------
   Die Leiste klebt oben, waehrend der Inhalt darunter durchscrollt.
   Menues, Suchvorschlaege und Dialoge legen sich ueber Karten. Duennes
   Glas laesst dort beide Texte gleichzeitig stehen - unlesbar. Deshalb
   hier fast deckend; die Unschaerfe bleibt fuer den Glascharakter. */
.topbar{background:var(--glas-lack),var(--glas-dicht);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  backdrop-filter:saturate(180%) blur(26px);
  border:none;border-bottom:1px solid var(--glas-kante);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 1px 0 rgba(0,0,0,.22)}

.feier-box,.fmenu-liste,.such-panel,.dropdown{
  background:var(--glas-lack),var(--glas-dicht);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  backdrop-filter:saturate(180%) blur(26px);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim),var(--glas-schatten-hoch)}

/* Karten-Vorschau im Editor: Vorder- und Rueckseite liegen als
   position:absolute exakt uebereinander. Genau hier standen zwei Texte
   uebereinander - beide Seiten muessen deckend sein. */
.kprev-s,.kprev-s.r{background:var(--glas-dicht);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--glas-kante);box-shadow:var(--glas-rim)}

/* ---- Knoepfe: Kapselform, Glanz auf der Oberkante ------------------- */
.btn{border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.18),0 10px 22px -12px rgba(0,0,0,.5)}
.btn.ghost,.btn.danger{
  background:var(--glas-lack),var(--glas-fill-2);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim),var(--glas-schatten)}
.btn:active{transform:scale(.976)}
.chip,.fmenu-knopf{border-radius:999px;
  background:var(--glas-fill-2);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim)}
.fmenu-knopf{border-radius:var(--r-sm)}
.gsearch{border-radius:999px;
  background:var(--glas-fill-2);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--glas-kante);
  box-shadow:var(--glas-rim)}

/* ---- Anfassen hebt die Scheibe an ----------------------------------- */
.tile:hover,.gcard:hover,.khub:hover,.qwahl:hover,.semkarte:hover,.plankarte:hover,
.gutkarte:hover,.errcard:hover,.casecard:hover{
  box-shadow:var(--glas-rim),var(--glas-schatten-hoch);
  border-color:var(--glas-kante-hell)}

/* ---- Rueckfall ------------------------------------------------------
   Ohne backdrop-filter stuende Text auf Text. Das ist kein
   Schoenheitsfehler, das ist unlesbar - also Vollton. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .answer,.card-plain,.casebox,
.casecard,.cdempty,.cdrow,.cprog,
.crash,.crashbar,.def,.dropdown,
.ekarte,.energy,.energy-btn,.erf,
.errbanner,.errcard,.errgruppe,.examadd,
.examkarte,.examrow,.fachrow,.fachwahl,
.feier-box,.flash,.fmenu-liste,.gcard,
.glaw,.gutkarte,.histbox,.juribox,
.kartform,.kdone,.kfb-ai,.kfb-score,
.khub,.klbar,.lernbar,.lernsem,
.levelcard,.miniq,.mrow,.muster-body,
.nkzeile,.notizquick,.nxt,.opt,
.plankarte,.questbox,.qwahl,.sch,
.semkarte,.sessbar,.sperre,.stat,
.studiumzeile,.subbox,.subcard,.subdone,
.such-panel,.tile,select option,select optgroup,
  .btn.ghost,.btn.danger,.chip,.fmenu-knopf,.gsearch{background:var(--surface)}
  .ansicht,.crash-item,.defbegriff,.errgruppe .errcard,
.examadd .gsearch,.examleer,.fachteil,.fmenu-box,
.fmenu.klein .fmenu-knopf:hover,.fmenu.klein.auf .fmenu-knopf,.freizeile,.gdef,
.gutdeins,.gutkette span,.gutschritt i,.juritipp-bubble,
.juritipp-bubble::before,.kbdrow kbd,.kfort-bar,.khub-tag,
.kinote,.klbtn.stopp.ruht,.kstart.ruhig,.lernbar-back:hover,.lernbar-voll:hover,
.linkbtn:hover,.locked-ic,.loesung,.nkcheck,
.normchip,.normtreffer,.nq-vl,.plankarte-ic,
.plankarte.unten,.segmented,.siehe-row:hover,.streit-rel,
.subsv,.such-esc,.such-fuss kbd,.such-typ,
.such-zeile:hover,.suchknopf,.tippfb,.tt-ic,
.uebenbtn.ruhig{background:var(--surface-2)}
  .topbar,.feier-box,.fmenu-liste,.such-panel,.dropdown,
  .kprev-s,.kprev-s.r{background:var(--surface)}
}

/* ---- Papier kennt kein Glas ----------------------------------------- */
@media print{
  .answer,.card-plain,.casebox,
.casecard,.cdempty,.cdrow,.cprog,
.crash,.crashbar,.def,.dropdown,
.ekarte,.energy,.energy-btn,.erf,
.errbanner,.errcard,.errgruppe,.examadd,
.examkarte,.examrow,.fachrow,.fachwahl,
.feier-box,.flash,.fmenu-liste,.gcard,
.glaw,.gutkarte,.histbox,.juribox,
.kartform,.kdone,.kfb-ai,.kfb-score,
.khub,.klbar,.lernbar,.lernsem,
.levelcard,.miniq,.mrow,.muster-body,
.nkzeile,.notizquick,.nxt,.opt,
.plankarte,.questbox,.qwahl,.sch,
.semkarte,.sessbar,.sperre,.stat,
.studiumzeile,.subbox,.subcard,.subdone,
.such-panel,.tile,select option,select optgroup,
  .ansicht,.crash-item,.defbegriff,.errgruppe .errcard,
.examadd .gsearch,.examleer,.fachteil,.fmenu-box,
.fmenu.klein .fmenu-knopf:hover,.fmenu.klein.auf .fmenu-knopf,.freizeile,.gdef,
.gutdeins,.gutkette span,.gutschritt i,.juritipp-bubble,
.juritipp-bubble::before,.kbdrow kbd,.kfort-bar,.khub-tag,
.kinote,.klbtn.stopp.ruht,.kstart.ruhig,.lernbar-back:hover,.lernbar-voll:hover,
.linkbtn:hover,.locked-ic,.loesung,.nkcheck,
.normchip,.normtreffer,.nq-vl,.plankarte-ic,
.plankarte.unten,.segmented,.siehe-row:hover,.streit-rel,
.subsv,.such-esc,.such-fuss kbd,.such-typ,
.such-zeile:hover,.suchknopf,.tippfb,.tt-ic,
.uebenbtn.ruhig,
  .topbar,.feier-box{
    background:#fff !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    box-shadow:none !important;border:1px solid #ddd !important}
}

/* ============================================================
   UNTERGRUND
   ------------------------------------------------------------
   Seit die Seiten randlos sind, ist viel mehr Flaeche sichtbar.
   Drei Ebenen fuellen sie, alle fixiert, alle ohne Mausereignisse
   und alle unter dem Inhalt (.page liegt auf z-index 1):

     .deko-schimmer  drei Farbschleier, die sehr langsam wandern
     .deko-linien    ruhige Hoehenlinien quer ueber den Schirm
     .main::after    das vorhandene Raster, jetzt mit weichem Rand

   Das Raster blendet nach unten und zu den Seiten aus. Ueber die
   ganze Flaeche gelegt sah es nach Millimeterpapier aus; als Verlauf
   wirkt es wie Struktur statt wie ein Formular.
   ============================================================ */
.deko{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:var(--brand)}
.deko-schimmer{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
.d1{width:52rem;height:38rem;top:-15rem;left:-11rem;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 42%,transparent),transparent 70%)}
.d2{width:46rem;height:34rem;top:-9rem;right:-13rem;
  background:radial-gradient(circle,color-mix(in srgb,var(--oeff) 36%,transparent),transparent 70%)}
.d3{width:50rem;height:36rem;bottom:-19rem;left:36%;
  background:radial-gradient(circle,color-mix(in srgb,var(--zivil) 32%,transparent),transparent 70%)}

.deko-linien{position:absolute;inset:0;width:100%;height:100%;opacity:.14}
:root.light .deko-linien{opacity:.16}
:root.light .deko-schimmer{filter:blur(96px);opacity:.7}

/* Im Lesemodus tritt der Untergrund zurueck - dort zaehlt nur der Text. */
:root.lesen .deko-schimmer{opacity:.35}
:root.lesen .deko-linien{opacity:.07}

/* Sehr langsames Wandern. Nur Transform und Filter, damit die Ebene
   auf der Grafikkarte bleibt und nichts neu berechnet werden muss. */
@media (prefers-reduced-motion: no-preference){
  .d1{animation:treiben-a 52s ease-in-out infinite alternate}
  .d2{animation:treiben-b 64s ease-in-out infinite alternate}
  .d3{animation:treiben-c 58s ease-in-out infinite alternate}
}
@keyframes treiben-a{to{transform:translate3d(7rem,3.5rem,0) scale(1.14)}}
@keyframes treiben-b{to{transform:translate3d(-6rem,4.5rem,0) scale(1.09)}}
@keyframes treiben-c{to{transform:translate3d(5rem,-4rem,0) scale(1.12)}}

/* Raster weich auslaufen lassen statt hart ueber den ganzen Schirm */
:root:not(.light):not(.lesen) .main::after,
:root.light .main::after{
  -webkit-mask-image:radial-gradient(135% 100% at 50% -6%,#000 26%,transparent 82%);
  mask-image:radial-gradient(135% 100% at 50% -6%,#000 26%,transparent 82%)}

/* Auf schmalen Schirmen kostet die Ebene nur Rechenzeit und bringt nichts. */
@media (max-width:820px){
  .deko-linien{opacity:.09}
  .d3{display:none}
}
@media print{.deko{display:none !important}}

/* Blattmotive am Rand, angepasst ans randlose Layout.
   Vorher standen sie in den leeren Raendern neben der 980er-Mittelspalte und
   hatten die Flaeche fuer sich. Jetzt laeuft Inhalt darueber - deshalb schmaler,
   schwaecher und zur Mitte hin ausgeblendet. Sie sollen Kantentextur sein und
   nicht mit den Karten um Aufmerksamkeit streiten.
   Die Maske gilt fuer beide Seiten: .rechts ist gespiegelt, dadurch zeigt
   dieselbe Verlaufsrichtung dort automatisch nach innen. */
.blatt{width:min(150px,11vw)}
.blatt.links,.blatt.rechts{
  -webkit-mask-image:linear-gradient(90deg,#000 22%,transparent 96%);
  mask-image:linear-gradient(90deg,#000 22%,transparent 96%)}
:root[data-energie="low"] .blatt,
:root[data-energie="mid"] .blatt,
:root[data-energie="high"] .blatt{opacity:.5}
@media (max-width:820px){.blatt{width:96px}}

/* ============================================================
   KOPFLEISTE: Navigation mittig, Profil ganz rechts
   ------------------------------------------------------------
   Marke links und Werkzeuge rechts bekommen dieselbe Grundbreite
   (flex-basis 0 bei gleichem Wachstum). Erst dadurch liegt die Mitte
   der Navigation auch wirklich in der Mitte des Schirms - vorher
   verschob das breitere Suchfeld sie nach links.
   ============================================================ */
.brand{flex:1 1 0;min-width:0}
.nav{flex:0 1 auto;justify-content:center}
.top-foot{flex:1 1 0;min-width:0;justify-content:flex-end}

/* ---- Ich: ganz aussen rechts, nur das Profilbild ---- */
.ich-rechts{margin-left:2px}
.nav-avatar{padding:3px;border-radius:999px;gap:0}
.avatar{display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:999px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line2);color:var(--muted);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.avatar svg{width:19px;height:19px}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.nav-avatar:hover .avatar{border-color:var(--brand);color:var(--brand-ink)}
.navgroup.open .nav-avatar{background:none}
.navgroup.open .avatar{border-color:var(--brand);color:var(--brand-ink)}

/* ============================================================
   NOTIZEN auf der Startseite
   ------------------------------------------------------------
   Einer der wichtigsten Einstiege, stand aber optisch gleichauf mit
   allem anderen. Jetzt groesser, mit Markenkante und leichtem Verlauf,
   damit das Auge dort zuerst haengenbleibt.
   ============================================================ */
.notizquick{
  padding:26px 28px;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--brand) 32%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 13%,var(--surface)),var(--surface) 60%);
  box-shadow:var(--shadow-lift)}
.notizquick .nq-head{gap:20px}
.nq-t{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:0}
.nq-sub{font-size:14.5px;margin-top:5px}
.nq-btn{padding:15px 26px;font-size:15px;border-radius:999px}
.nq-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:11px;margin-top:20px}
@media (max-width:820px){
  .notizquick{padding:20px 18px}
  .nq-t{font-size:21px}
}

/* ---- Profilbild in "Dein Fortschritt" ---- */
.profilkarte{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:24px;box-shadow:var(--shadow)}
.profilbild{display:flex;align-items:center;justify-content:center;flex:none;
  width:76px;height:76px;border-radius:999px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line2);color:var(--muted)}
.profilbild svg{width:34px;height:34px}
.profilbild img{width:100%;height:100%;object-fit:cover;display:block}
.profil-tx{flex:1 1 220px;min-width:0}
.profil-t{font-family:var(--serif);font-size:21px;font-weight:700}
.profil-s{font-size:13.5px;color:var(--muted);margin-top:4px}
/* .btn hat flex:1 - hier sollen die Knoepfe aber nur so breit sein wie ihr Text. */
.profil-akt{display:flex;gap:10px;flex:0 0 auto}
.profil-akt .btn{flex:0 0 auto;padding:11px 20px;font-size:14px}
@media (max-width:560px){
  .profil-akt{width:100%}
  .profil-akt .btn{flex:1 1 auto}
}

/* ============================================================
   KOPFLEISTE: Unterstrich statt Fuellflaeche
   ------------------------------------------------------------
   Die Pille hinter dem Text war laut und sprang beim Ueberfahren
   hart an. Jetzt waechst eine Linie aus der Mitte auf - nur unten,
   sonst passiert nichts ausser einer Aufhellung der Schrift.
   Die aktive Ansicht behaelt ihre Linie dauerhaft.
   ============================================================ */
.nav-item:hover{background:none;color:var(--ink)}
.nav-item.active{background:none;color:var(--ink);font-weight:600}
.navgroup.open .nav-top{background:none;color:var(--ink)}

/* Der Avatar ist ein Kreis - der bekommt keinen Strich. */
/* Zwei Laengen: die Grundlinie sitzt mittig unter dem Eintrag, beim
   Ueberfahren waechst sie nur ein Stueck weiter - nicht ueber die volle
   Breite. width gibt die Grundlaenge vor (60 % des Eintrags), scaleX
   macht daraus die Bewegung. left/right 0 mit auto-Rand zentriert. */
.nav-item:not(.nav-avatar)::after{
  content:"";position:absolute;left:0;right:0;bottom:3px;margin:0 auto;
  width:60%;height:2px;border-radius:999px;background:var(--brand);
  transform:scaleX(0);transform-origin:50% 50%;opacity:0;
  transition:transform .32s var(--ease-out),opacity .22s var(--ease)}
/* Ruhende aktive Ansicht: die Grundlaenge. */
.nav-item.active::after{transform:scaleX(1);opacity:1;background:var(--brand-ink)}
/* Angefasst: ein Ticken laenger (60 % -> 75 % des Eintrags). */
.nav-item:not(.nav-avatar):hover::after,
.nav-item:not(.nav-avatar):focus-visible::after,
.navgroup.open .nav-top::after{transform:scaleX(1.25);opacity:1}
/* Auf schmalen Schirmen faellt die Beschriftung weg - die Linie sitzt
   dann unter dem Symbol und darf genauso breit bleiben. */

/* ============================================================
   UNTERMENUES: gleiten herein statt aufzublitzen
   ------------------------------------------------------------
   Vorher sprang das Menue per display:none/block ins Bild. Jetzt
   bleibt es stehen und wird ueber Deckkraft und Verschiebung ein-
   und ausgeblendet - dadurch laesst sich auch das SCHLIESSEN
   animieren, was mit display gar nicht geht.
   visibility haelt es dabei aus der Tastatur- und Vorlesereihenfolge.
   ============================================================ */
.dropdown{
  display:block;visibility:hidden;opacity:0;pointer-events:none;
  transform:translateY(-10px) scale(.985);transform-origin:top center;
  transition:opacity .26s var(--ease-out),transform .3s var(--ease-out),visibility .3s}
.navgroup.open .dropdown{
  visibility:visible;opacity:1;pointer-events:auto;
  transform:translateY(0) scale(1);animation:none}

.dd-item{transition:background .2s var(--ease),transform .22s var(--ease-out),color .2s var(--ease)}
.dd-item:hover{background:var(--brand-soft);transform:translateX(3px)}

/* Die Eintraege laufen leicht versetzt ein - das nimmt dem Aufklappen
   die Haerte, ohne es langsamer zu machen. */
@media (prefers-reduced-motion: no-preference){
  .navgroup.open .dd-item{animation:ddEin .3s var(--ease-out) both}
  .navgroup.open .dd-item:nth-child(1){animation-delay:.03s}
  .navgroup.open .dd-item:nth-child(2){animation-delay:.06s}
  .navgroup.open .dd-item:nth-child(3){animation-delay:.09s}
  .navgroup.open .dd-item:nth-child(4){animation-delay:.12s}
  .navgroup.open .dd-item:nth-child(5){animation-delay:.15s}
}
@keyframes ddEin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Platzhalter, solange die Profilerstellung noch fehlt */
.profil-s{font-size:16px;color:var(--ink);font-weight:600;margin-top:5px}
.profil-ohne{color:var(--faint);font-weight:400;font-style:italic}

/* ---- Angefasste Kachel wird deckend --------------------------------
   Die Scheiben sind absichtlich durchscheinend (rgba weiss auf blur).
   Beim Anheben legt sich die Kachel aber ueber ihre Nachbarn - und weil
   sie durchsichtig ist, schien die Nachbarkachel hindurch. Zusaetzlich
   greift der Weichzeichner ueber die eigene Kante hinaus und erzeugt
   einen Schleier daneben.
   Loesung: im angefassten Zustand deckender Untergrund, kein Backdrop
   mehr und eine Ebene nach vorn. Die Bewegung bleibt unveraendert. */
.tile:hover,.gcard:hover,.khub:hover,.qwahl:hover,.semkarte:hover,.plankarte:hover,
.gutkarte:hover,.errcard:hover,.casecard:hover,.cdrow:hover,.cdempty:hover,
.nq-vl:hover,.ekarte:hover,.erf:hover,.normchip:hover{z-index:2}

/* ---- Themengebiete ändern: volle Namen ----
   Mit Kuerzeln passten die Faecher als Pillenreihe nebeneinander. Ausge-
   schrieben sind sie bis zu 60 Zeichen lang - als Pille waere das ein
   Schlauch quer ueber die Seite. Deshalb ein mitwachsendes Raster mit
   linksbuendigem, umbrechendem Text. */
/* .fachgruppe ist ein Flex-Container - ohne flex:1 schrumpft das Raster
   auf die Breite einer einzigen Spalte, statt die Zeile auszunutzen. */
.fachwahl .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
  gap:9px;margin:16px 0 2px;flex:1 1 auto;min-width:0}
.fachwahl .fachchip{
  text-align:left;white-space:normal;line-height:1.35;
  padding:11px 15px 11px 14px;border-radius:14px;font-size:13px;
  display:flex;align-items:flex-start;gap:8px}
.fachwahl .fachchip.on::before{content:"✓";margin-right:0;flex:none;line-height:1.35}

/* ---- Gesperrte Semester in der Themengebiets-Auswahl ----
   Die Faecher ab dem 5. Semester sind inhaltlich noch nicht geprueft.
   Sie bleiben sichtbar, damit man sieht, was spaeter kommt - aber
   ausgegraut, nicht anklickbar und mit einem Hinweis quer darueber. */
.fachgruppe.ist-gesperrt{position:relative}
.fachgruppe.ist-gesperrt .chips{opacity:.3;filter:grayscale(1);pointer-events:none;user-select:none}
.fachgruppe.ist-gesperrt .fachchip{cursor:default}
.gesperrt-hinweis{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;pointer-events:none;
  font-size:14.5px;font-weight:800;letter-spacing:.01em;color:var(--ink);
  text-shadow:0 1px 8px var(--bg),0 0 18px var(--bg)}
@media (max-width:560px){.gesperrt-hinweis{font-size:13px}}

/* ---- Gesperrte Semester in der Semesterwahl ----
   Gleiche Regel wie bei den Themengebieten: sichtbar lassen, damit man
   sieht, was spaeter kommt - aber nicht anwaehlbar. */
.semkarte.gesperrt,.chip.gesperrt{
  opacity:.34;filter:grayscale(1);cursor:default;pointer-events:none}
.semkarte.gesperrt:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}
.semkarte-bald{font-weight:800;color:var(--ink);letter-spacing:.01em}

/* ============================================================
   SCHEIBEN AUF DECKENDEM GRUND
   ------------------------------------------------------------
   Fehlerbild: Sobald die Maus die Karte verliess, wirkte der Inhalt
   ausgewaschen - die Farben des Untergrunds schlugen durch. Dasselbe
   beim Wechsel zwischen kostenloser Fassung und Vollversion.

   Zwei Ursachen, beide hier behoben:

   1. Die Flaechen waren durchscheinend (5-8 % Weiss) und holten sich ihr
      Bild ueber backdrop-filter aus dem, was dahinter liegt. Seit der
      Untergrund farbige Schleier traegt, war das eine Farbwolke statt
      eines ruhigen Grundes.
   2. backdrop-filter sampelt den falschen Hintergrund, sobald ein Vorfahr
      eine eigene Ebene bekommt - etwa waehrend der Einblend-Animation
      (.page laeuft mit opacity < 1). Genau dann kippte die Ansicht beim
      Neuaufbau ins Milchige.

   Loesung: Der Glanz bleibt, liegt aber auf --surface statt auf dem Nichts,
   und die Unschaerfe entfaellt fuer Inhaltsflaechen. Die Kopfleiste behaelt
   ihre eigene - dort ist sie richtig, weil darunter Inhalt durchscrollt.
   ============================================================ */
:root{
  --glas-fill:linear-gradient(rgba(255,255,255,.085),rgba(255,255,255,.085)),var(--surface);
  --glas-fill-2:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055)),var(--surface);
  --unschaerfe:none;
}
:root.light{
  --glas-fill:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--surface);
  --glas-fill-2:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)),var(--surface);
}
:root.lesen{
  --glas-fill:linear-gradient(rgba(252,246,235,.78),rgba(252,246,235,.78)),var(--surface);
  --glas-fill-2:linear-gradient(rgba(247,239,224,.58),rgba(247,239,224,.58)),var(--surface);
}

/* Auch diese Bedienelemente liegen jetzt auf deckendem Grund. Eine Unschaerfe
   dahinter ist damit unsichtbar, kostet aber je Element eine eigene Grafik-
   ebene - und genau diese Ebenen waren die Zutat, die den Inhalt ausbleichen
   liess. Die Kopfleiste behaelt ihre als einzige. */
.btn.ghost,.btn.danger,.chip,.fmenu-knopf,.gsearch{
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- Gesperrte Themengebiete in Lernen und in den Filtermenues ---- */
.gcard.gesperrt,.fmenu-opt.gesperrt{
  opacity:.34;filter:grayscale(1);pointer-events:none;cursor:default}
.gcard.gesperrt:hover{transform:none;box-shadow:var(--shadow)}
.bald-tag{font-weight:800;color:var(--ink);letter-spacing:.01em}

/* ---- Upgrade-Knopf in der Kopfleiste ----
   Steht nur in der kostenlosen Fassung da (renderChrome blendet ihn aus).
   Bewusst kein greller Dauerreiz: gefuellt, aber klein und ruhig. */
.upgrade{flex:none;border:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:650;letter-spacing:-.01em;
  padding:8px 15px;border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 6px 16px -8px var(--ring);
  transition:transform .25s var(--spring),box-shadow .25s var(--ease-out)}
.upgrade:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px var(--ring)}
.upgrade[hidden]{display:none}
@media (max-width:820px){.upgrade{padding:7px 12px;font-size:12.5px}}

/* ---- Zahlfenster (Huelle, Anbieter kommt spaeter) ---- */
.zahlbox{position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  padding:20px;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .24s var(--ease)}
.zahlbox.auf{opacity:1}
.zahl-panel{position:relative;width:100%;max-width:430px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:28px 26px 22px;box-shadow:var(--shadow-lift);
  transform:translateY(10px);transition:transform .3s var(--ease-out)}
.zahlbox.auf .zahl-panel{transform:translateY(0)}
.zahl-zu{position:absolute;top:12px;right:12px;width:32px;height:32px;
  border:none;background:none;color:var(--muted);cursor:pointer;
  border-radius:999px;font-size:15px;line-height:1}
.zahl-zu:hover{background:var(--surface-2);color:var(--ink)}
.zahl-kopf{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.zahl-kopf svg{width:44px;height:44px;flex:none}
.zahl-t{font-family:var(--serif);font-size:23px;font-weight:700}
.zahl-s{font-size:13.5px;color:var(--muted);margin-top:3px}
.zahl-preis{display:flex;align-items:baseline;gap:10px;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.zahl-zahl{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--brand-ink)}
.zahl-per{font-size:13px;color:var(--faint)}
.zahl-liste{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}
.zahl-liste li{font-size:14px;color:var(--muted);padding-left:26px;position:relative}
.zahl-liste li::before{content:"✓";position:absolute;left:0;top:0;
  width:18px;height:18px;border-radius:999px;display:grid;place-items:center;
  font-size:10px;font-weight:800;background:var(--brand-soft);color:var(--brand-ink)}
.zahl-panel .btn{margin-bottom:9px}
.zahl-hinweis{font-size:12px;line-height:1.5;color:var(--faint);text-align:center;margin-top:6px}

/* ---- Einstieg: Profil anlegen und Startklar-Seite ---- */
.onb-profil{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin:8px 0 26px}
.profilbild.gross{width:96px;height:96px}
.profilbild.gross svg{width:42px;height:42px}
.onb-profil .btn{flex:0 0 auto;padding:11px 20px;font-size:14px}
.onb-feld{display:block;text-align:left;max-width:420px;margin:0 auto 4px}
.onb-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.onb-fehler{max-width:420px;margin:10px auto 0;font-size:13px;
  color:var(--no-ink);background:var(--no-soft);border-radius:10px;padding:9px 12px}
.onb-fehler[hidden]{display:none}
.onboarding .btn.wide{max-width:420px;margin:22px auto 0}
/* Die Breite gehoert aufs SVG. Auf dem Behaelter gesetzt machte sie ihn
   88px schmal, und ein Block-Element wandert dann nach links statt in die
   Mitte - genau so stand die Eule oben links. */
.onb-owl.gross .owl-svg,.onb-owl.gross svg{width:88px;height:88px}

.startliste{display:grid;gap:11px;max-width:460px;margin:6px auto 0;text-align:left}
.startzeile{display:flex;align-items:flex-start;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;box-shadow:var(--shadow)}
.startzeile-ic{font-size:22px;line-height:1.2;flex:none}
.startzeile-t{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.startzeile-s{display:block;font-size:12.8px;color:var(--muted);margin-top:3px;line-height:1.55}
.startklar h1{font-family:var(--serif)}