@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#060818; --bg2:#0b1030;
  --text:#eef1ff; --muted:#9aa6d4;
  --blue:#4f7cff; --violet:#8b5cf6; --cyan:#22d3ee; --pink:#ec4899;
  --green:#34d399; --red:#fb7185; --gold:#fbbf24;
  --glass:rgba(var(--w),.045); --glass2:rgba(var(--w),.08);
  --edge:rgba(var(--w),.2);
  --glow:0 0 0 1px rgba(var(--w),.14), 0 0 22px rgba(var(--w),.10), 0 0 70px rgba(var(--acc2),.22);
  --glow-hi:0 0 0 1px rgba(var(--w),.4), 0 0 30px rgba(var(--w),.22), 0 0 90px rgba(var(--acc),.45);
  --grad:linear-gradient(135deg,var(--blue),var(--violet) 55%,var(--pink));
  --side:272px;
  --w:255,255,255; --t:3,5,18; --acc:139,92,246; --acc2:99,102,241; --acc3:79,124,255; --acc4:34,211,238;
  --bgrgb:6,8,24; --sticky:10,14,40; --g1:#8fb0ff; --g2:#c4a1ff; --g3:#ff9bd3; --notice:#ffe7a3;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.65;background:var(--bg);min-height:100vh;overflow-x:hidden}
h1,h2,h3,.brand b{font-family:'Space Grotesk',Inter,sans-serif}

/* Hintergrund: leuchtende Farbflächen + feines Raster */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:
   radial-gradient(900px 600px at 85% -10%,rgba(var(--acc),.38),transparent 60%),
   radial-gradient(800px 600px at 5% 15%,rgba(var(--acc3),.30),transparent 60%),
   radial-gradient(700px 500px at 60% 110%,rgba(var(--acc4),.20),transparent 60%),
   var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(var(--w),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--w),.035) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%)}

/* ===== Layout mit linker Navbar ===== */
.shell{display:flex;min-height:100vh}
.side{position:fixed;top:14px;left:14px;bottom:14px;width:var(--side);z-index:30;display:flex;flex-direction:column;gap:6px;padding:22px 16px;
  background:linear-gradient(180deg,rgba(var(--w),.075),rgba(var(--w),.03));backdrop-filter:blur(22px);
  border:1px solid var(--edge);border-radius:24px;box-shadow:var(--glow),inset 0 1px 0 rgba(var(--w),.25);overflow:auto}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;text-decoration:none;color:var(--text)}
.logo{width:52px;height:52px;flex:none;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(var(--w),.6);box-shadow:0 0 22px rgba(var(--w),.35),0 0 44px rgba(var(--acc),.55)}
.logo img{display:block;width:100%;height:100%;object-fit:cover}
.tb-brand{display:flex;align-items:center;gap:10px}
.tb-logo{width:30px;height:30px;border-radius:8px;object-fit:cover;box-shadow:0 0 12px rgba(var(--w),.4)}
.brand b{display:block;font-size:1.15rem;letter-spacing:.2px}
.brand small{color:var(--muted);font-size:.74rem}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:var(--muted);text-decoration:none;font-weight:500;border:1px solid transparent;transition:.18s}
.nav a .ni{font-size:1.15rem;width:26px;text-align:center}
.nav a:hover{color:var(--text);background:var(--glass2)}
.nav a.on{color:var(--text);background:linear-gradient(135deg,rgba(var(--acc3),.35),rgba(var(--acc),.30));border-color:rgba(var(--w),.35);box-shadow:0 0 22px rgba(var(--acc),.45),inset 0 0 14px rgba(var(--w),.08)}
.nav a .lock{margin-left:auto;font-size:.85rem}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.prog{padding:14px;border-radius:16px;background:var(--glass);border:1px solid rgba(var(--w),.14)}
.prog .row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:8px}
.bar{height:8px;border-radius:99px;background:rgba(var(--w),.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));box-shadow:0 0 12px var(--cyan);transition:width .5s}
.who{font-size:.8rem;color:var(--muted);padding:0 6px;word-break:break-all}
.who a{color:var(--cyan)}

.main{flex:1;margin-left:calc(var(--side) + 28px);padding:44px 48px 80px;min-width:0;max-width:1500px}
.topbar{display:none}

/* ===== Bausteine ===== */
.glow{background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--edge);border-radius:22px;box-shadow:var(--glow);padding:26px;transition:.22s}
a.glow,button.glow,.glow.hov{cursor:pointer}
a.glow:hover,button.glow:hover,.glow.hov:hover{box-shadow:var(--glow-hi);transform:translateY(-4px);border-color:rgba(var(--w),.55)}
.eyebrow{display:inline-block;padding:6px 14px;border-radius:99px;font-size:.78rem;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text);background:rgba(var(--acc),.25);border:1px solid rgba(var(--w),.35);box-shadow:0 0 18px rgba(var(--acc),.5)}
h1.big{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:14px 0 14px;letter-spacing:-1px}
.grad{background:linear-gradient(90deg,var(--g1),var(--g2) 45%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.15rem;color:var(--muted);max-width:720px}
h2.sec{font-size:1.6rem;margin:44px 0 18px}
.page-title{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 6px;letter-spacing:-.5px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:14px;border:1px solid rgba(var(--w),.45);background:var(--grad);color:#fff;font:600 1rem 'Space Grotesk',sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 0 28px rgba(var(--acc),.6),inset 0 1px 0 rgba(var(--w),.4);transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(var(--acc),.95),0 0 0 3px rgba(var(--w),.18),inset 0 1px 0 rgba(var(--w),.5)}
.btn.ghost{background:var(--glass2);box-shadow:var(--glow)}
.btn.sm{padding:9px 16px;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.row-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:34px}
.stat .num{font:700 2.6rem 'Space Grotesk',sans-serif;line-height:1.1}
.stat small{color:var(--muted)}
.card{position:relative;text-decoration:none;color:inherit;display:block;text-align:left;font:inherit}
.card .ic{font-size:2rem;filter:drop-shadow(0 0 12px rgba(var(--w),.5))}
.card h3{margin:10px 0 4px;font-size:1.2rem}
.card p{margin:0;color:var(--muted);font-size:.93rem}
.tag{display:inline-block;margin-top:14px;font-size:.72rem;padding:3px 10px;border-radius:99px;background:rgba(var(--w),.08);color:var(--muted);border:1px solid rgba(var(--w),.14)}
.card .stretch{position:absolute;inset:0;z-index:1;border-radius:22px}
.card-tools{position:absolute;top:16px;right:16px;display:flex;gap:8px;z-index:3}
.mark{width:32px;height:32px;border-radius:50%;border:1px solid rgba(var(--w),.4);background:rgba(var(--w),.07);color:var(--text);font-size:1.05rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s;padding:0}
.mark:hover{background:rgba(var(--w),.2);box-shadow:0 0 14px rgba(var(--w),.35)}
.mark[data-act=save].on{color:var(--gold);border-color:var(--gold);background:rgba(251,191,36,.15);box-shadow:0 0 14px rgba(251,191,36,.55)}
.mark.rd.on{color:var(--green);border-color:var(--green);background:rgba(52,211,153,.2);box-shadow:0 0 14px rgba(52,211,153,.6)}
.cnt{margin-left:auto;min-width:22px;padding:0 7px;border-radius:99px;background:var(--gold);color:#1a1200;font:700 .75rem/22px 'Space Grotesk',sans-serif;text-align:center}
.done{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,153,.2);border:1px solid var(--green);color:var(--green);box-shadow:0 0 14px rgba(52,211,153,.6);font-size:.9rem}

.tools{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.tools input{flex:1 1 280px;max-width:440px}
input[type=text],input[type=search],input[type=email],input[type=password]{padding:13px 16px;border-radius:14px;border:1px solid var(--edge);background:rgba(var(--w),.06);color:var(--text);font:inherit;width:100%}
input:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--acc3),.55),0 0 24px rgba(var(--acc3),.4)}
.chip{padding:10px 16px;border-radius:99px;border:1px solid rgba(var(--w),.2);background:var(--glass);color:var(--muted);cursor:pointer;font:500 .9rem Inter,sans-serif;transition:.18s}
.chip:hover{color:var(--text);border-color:var(--text)}
.chip.on{color:#fff;background:var(--grad);border-color:rgba(var(--w),.6);box-shadow:0 0 18px rgba(var(--acc),.6)}

.notice{padding:14px 18px;border-radius:16px;border:1px solid rgba(251,191,36,.6);background:rgba(251,191,36,.08);color:var(--notice);margin:0 0 24px;font-size:.93rem}
.notice a{color:var(--text)}

/* ===== Lesebereich ===== */
.crumbs{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.crumbs a{color:var(--cyan);text-decoration:none}
.reader{padding:34px 40px;max-width:1000px}
.reader h1{font-size:2.1rem;margin:0 0 4px}
.prose h3{margin:26px 0 8px;font-size:1.2rem;color:var(--gold)}
.prose h3:first-child{margin-top:0}
.prose p{margin:9px 0}.prose ul,.prose ol{padding-left:22px}.prose li{margin:5px 0}
.box{border-left:4px solid var(--blue);background:rgba(var(--w),.06);padding:12px 16px;border-radius:0 14px 14px 0;margin:16px 0}
.box.tip{border-color:var(--green)}.box.warn{border-color:var(--red)}
.box b.t{display:block;margin-bottom:2px}
.g{color:var(--green);font-weight:600}.r{color:var(--red);font-weight:600}
.figs{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0}
.fig{flex:1 1 230px;background:rgba(var(--t),.7);border:1px solid rgba(var(--w),.22);border-radius:16px;padding:12px;text-align:center;box-shadow:0 0 22px rgba(var(--w),.07)}
.fig svg{width:100%;height:auto;max-height:230px}
.fig small{display:block;color:var(--muted);margin-top:6px}
.shot{background:#fff;border:1px solid rgba(var(--w),.6);border-radius:18px;padding:12px;margin:22px 0;box-shadow:0 0 0 1px rgba(var(--w),.2),0 0 34px rgba(var(--w),.18),0 0 80px rgba(var(--acc2),.3)}
.shot img{display:block;width:100%;height:auto;border-radius:10px;cursor:zoom-in}
.shot figcaption{color:#475569;font-size:.85rem;text-align:center;padding-top:8px}
.shot figcaption em{color:#94a3b8;font-style:normal}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(var(--t),.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;background:#fff;border-radius:14px;box-shadow:0 0 60px rgba(var(--w),.35)}
.prose td:first-child{white-space:normal}

/* ===== Text links, Zeichnung rechts in derselben Zeile ===== */
.reader{max-width:1380px}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}
.split-fig{position:sticky;top:24px;align-self:start}
.split-fig .shot{margin:0 0 18px}
.split-text h3:first-child{margin-top:0}
@media(max-width:1100px){.split{grid-template-columns:1fr}.split-fig{position:static}}

/* Tabellen mit Zeichnung in jeder Zeile */
.prose{overflow-x:auto}
table.dt{min-width:780px}
table.dt td{vertical-align:middle;min-width:110px}
table.dt td.draw{min-width:0}
table.dt td.draw{text-align:center;background:rgba(var(--t),.55);padding:10px 12px;width:1%;white-space:nowrap}
table.dt td.draw.crop{background:rgba(var(--t),.55)}
td.draw img.crop{display:block;width:clamp(230px,24vw,330px);max-width:none;background:#fff;border-radius:10px;cursor:zoom-in;margin:auto}
td.draw .tile{background:#fff;border-radius:10px;width:clamp(230px,24vw,330px);padding:8px 6px;margin:auto}
td.draw .tile svg{display:block;width:100%;height:auto}
td.draw .tile .cap{text-align:center;color:#111827;line-height:1.3}
td.draw .tile .cap b{display:block;font-size:1rem}
td.draw .tile .cap span{font-size:.85rem;color:#4b5563}
.draw svg.cdl{display:block;margin:6px auto 0;max-width:100%;height:auto}
table.dt td .draw{background:rgba(var(--t),.55);border-radius:10px;padding:6px 8px;margin-top:8px;text-align:center}
td.draw svg.cdl{margin:auto}
.legend{color:var(--muted);font-size:.88rem;margin:10px 0 0}
.sq{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.sq.g{background:#22c55e}.sq.r{background:#ef4444}.sq.d{background:#c3c8d8}.sq.fr{border:1.5px dashed #4f9dff;background:none}
.legend-shot{background:#fff;padding:8px 12px;margin:14px 0}
.legend-shot img.crop{width:100%;max-width:none;display:block;cursor:zoom-in}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.94rem}
th,td{border:1px solid rgba(var(--w),.14);padding:9px 12px;text-align:left;vertical-align:top}
th{background:rgba(var(--w),.08)}
dl.gl dt{font-weight:700;margin-top:12px;color:var(--gold)}dl.gl dd{margin:0 0 4px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap;align-items:center}

/* ===== Test ===== */
.q{margin:0 0 18px;padding:20px 22px}
.q.ok{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 30px rgba(52,211,153,.35)}
.q.bad{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 30px rgba(251,113,133,.35)}
.q p.qt{margin:0 0 10px;font:600 1.08rem 'Space Grotesk',sans-serif}
.q label{display:block;padding:10px 14px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.15s}
.q label:hover{background:rgba(var(--w),.08)}
.q label:has(input:checked){background:rgba(var(--acc3),.22);border-color:rgba(var(--w),.4)}
.q input{margin-right:10px;accent-color:var(--violet)}
.q .fb{margin-top:10px;font-size:.9rem;color:var(--muted)}
.sticky{position:sticky;bottom:16px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px;margin-top:20px;background:rgba(var(--sticky),.85)}
.result{text-align:center;padding:34px}
.result .bigemoji{font-size:3.4rem}

/* ===== Lounge / Konto ===== */
.lock-hero{text-align:center;padding:56px 30px;max-width:720px;margin:30px auto}
.lock-hero .bigemoji{font-size:4rem;filter:drop-shadow(0 0 22px rgba(251,191,36,.7))}
.auth{max-width:460px;margin:0 auto}
.tabs{display:flex;gap:8px;margin-bottom:20px}
.tabs .chip{flex:1;text-align:center}
.field{margin-bottom:14px}.field label{display:block;margin-bottom:6px;font-size:.88rem;color:var(--muted)}
.msg{margin:12px 0 0;font-size:.92rem}.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
footer.note{margin-top:60px;color:var(--muted);font-size:.8rem;max-width:760px}

/* ===== Mobil ===== */
@media(max-width:1100px){
  .topbar{display:flex;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(var(--bgrgb),.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--edge)}
  .topbar button{background:var(--glass2);border:1px solid var(--edge);color:var(--text);border-radius:12px;padding:8px 14px;font-size:1.1rem;cursor:pointer}
  .side{transform:translateX(-120%);transition:.25s;top:0;left:0;bottom:0;border-radius:0 24px 24px 0}
  .side.open{transform:none}
  .main{margin-left:0;padding:24px 16px 60px}
  .reader{padding:22px 18px}
  .shell{display:block}
}

/* ===== Design-Varianten: data-theme am <html> (Umschalter in der Navigation) ===== */
.theme-btn{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--edge);background:var(--glass);color:var(--text);font:500 .85rem Inter,sans-serif;cursor:pointer;text-align:left;transition:.15s}
.theme-btn:hover{box-shadow:var(--glow);border-color:rgba(var(--w),.5)}

/* Neon Rot (warmes Gegenstück zu Neon Blau) */
:root[data-theme="neon-red"]{
  --bg:#12060a; --bg2:#1c0b11; --text:#fff0f1; --muted:#d3a3aa;
  --blue:#ff3d3d; --violet:#f43f5e; --pink:#ff8a3d; --cyan:#ffa28f;
  --t:12,3,6; --acc:244,63,94; --acc2:255,99,71; --acc3:255,77,77; --acc4:255,150,80;
  --bgrgb:18,6,10; --sticky:30,10,16; --g1:#ffb4b4; --g2:#ff9bb5; --g3:#ffc98a;
}
/* Neon Grün */
:root[data-theme="neon-green"]{
  --bg:#04120d; --bg2:#08201a; --text:#ecfff7; --muted:#9fd0bf;
  --blue:#10b981; --violet:#14b8a6; --pink:#22d3ee; --cyan:#5eead4;
  --t:2,10,6; --acc:16,185,129; --acc2:20,184,166; --acc3:34,197,94; --acc4:34,211,238;
  --bgrgb:4,18,13; --sticky:8,28,22; --g1:#a7f3d0; --g2:#99f6e4; --g3:#a5f3fc;
}

/* Design-Auswahl im Konto */
.settings{max-width:820px;margin:28px auto 0}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.theme-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:16px;border:1px solid var(--edge);background:var(--glass);color:var(--text);font:inherit;cursor:pointer;text-align:left;transition:.18s}
.theme-tile .sw{display:block;width:100%;height:54px;border-radius:10px;border:1px solid rgba(var(--w),.35)}
.theme-tile b{font:600 .95rem 'Space Grotesk',sans-serif}
.theme-tile small{color:var(--muted)}
.theme-tile:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.theme-tile.on{border-color:var(--text);box-shadow:var(--glow-hi)}

/* Grau – dunkel */
:root[data-theme="grey-dark"]{
  --bg:#111214; --bg2:#17181b; --text:#ececee; --muted:#9a9ca3;
  --blue:#6a6f7a; --violet:#565a63; --pink:#3d4046; --cyan:#d3d6dc;
  --t:0,0,0; --acc:200,203,210; --acc2:150,153,160; --acc3:170,173,180; --acc4:230,232,236;
  --bgrgb:17,18,20; --sticky:24,25,28; --g1:#ffffff; --g2:#cfd2d9; --g3:#8e929b;
}
:root[data-theme="grey-dark"] body::before{background:
  radial-gradient(900px 600px at 85% -10%,rgba(255,255,255,.07),transparent 60%),
  radial-gradient(800px 600px at 5% 15%,rgba(255,255,255,.05),transparent 60%),var(--bg)}

/* Grau – hell */
:root[data-theme="grey-light"]{
  --bg:#eceef1; --bg2:#f5f6f8; --text:#16181d; --muted:#5b616d;
  --blue:#4a4f59; --violet:#363a42; --pink:#23262c; --cyan:#0e7490;
  --green:#15803d; --red:#b91c1c; --gold:#a16207;
  --w:20,24,32; --t:255,255,255; --acc:60,64,72; --acc2:90,94,102; --acc3:70,74,82; --acc4:120,124,132;
  --bgrgb:236,238,241; --sticky:255,255,255; --g1:#2b2e35; --g2:#4a4f59; --g3:#7b808b; --notice:#7a4b00;
  --glass:rgba(255,255,255,.82); --glass2:rgba(20,24,32,.06); --edge:rgba(20,24,32,.15);
  --glow:0 0 0 1px rgba(20,24,32,.07),0 8px 28px rgba(20,24,32,.09);
  --glow-hi:0 0 0 1px rgba(20,24,32,.3),0 14px 40px rgba(20,24,32,.2);
}
:root[data-theme="grey-light"] body::before{background:
  radial-gradient(900px 600px at 85% -10%,rgba(255,255,255,.95),transparent 60%),
  radial-gradient(800px 600px at 5% 15%,rgba(170,176,190,.35),transparent 60%),var(--bg)}
:root[data-theme="grey-light"] .side{background:rgba(255,255,255,.82);box-shadow:var(--glow)}
:root[data-theme="grey-light"] .nav a.on{background:rgba(20,24,32,.08);box-shadow:none;border-color:rgba(20,24,32,.25)}
:root[data-theme="grey-light"] .logo{box-shadow:0 4px 14px rgba(20,24,32,.25)}
:root[data-theme="grey-light"] .tb-logo{box-shadow:0 2px 8px rgba(20,24,32,.3)}
:root[data-theme="grey-light"] .btn{box-shadow:0 6px 18px rgba(20,24,32,.25)}
:root[data-theme="grey-light"] .btn.ghost{color:var(--text);box-shadow:var(--glow)}
:root[data-theme="grey-light"] .btn:hover{box-shadow:0 10px 26px rgba(20,24,32,.35)}
:root[data-theme="grey-light"] .eyebrow{background:rgba(20,24,32,.07);border-color:rgba(20,24,32,.25);box-shadow:none}
:root[data-theme="grey-light"] .bar i{background:linear-gradient(90deg,#8b909b,#363a42);box-shadow:none}
:root[data-theme="grey-light"] .box{background:rgba(20,24,32,.05)}
:root[data-theme="grey-light"] .th,:root[data-theme="grey-light"] th{background:rgba(20,24,32,.07)}
:root[data-theme="grey-light"] .sticky{background:rgba(255,255,255,.92)}
:root[data-theme="grey-light"] .topbar{background:rgba(236,238,241,.9)}
/* ===== Icons (SVG, übernehmen die Textfarbe) ===== */
.i{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:none}
.nav a .ni{display:grid;place-items:center;width:26px;height:26px;font-size:1.25rem}
.nav a .lock{display:inline-grid;place-items:center;font-size:.95rem;color:var(--gold)}
.nav a.on .ni{filter:drop-shadow(0 0 6px rgba(var(--acc4),.8))}
.page-title .ti,h2 .ti{width:.85em;height:.85em;margin-right:.3em;vertical-align:-.08em;color:var(--cyan);filter:drop-shadow(0 0 10px rgba(var(--acc4),.55))}
.card .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:1.6rem;margin-bottom:6px;color:var(--text);filter:none;
  background:linear-gradient(135deg,rgba(var(--acc3),.38),rgba(var(--acc),.14));border:1px solid rgba(var(--w),.28);box-shadow:inset 0 1px 0 rgba(var(--w),.25),0 0 18px rgba(var(--acc),.3)}
.card .ic .i{width:26px;height:26px}
.reader h1{display:flex;align-items:center;gap:14px}
.ic-h{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:15px;font-size:1.7rem;color:var(--text);
  background:linear-gradient(135deg,rgba(var(--acc3),.38),rgba(var(--acc),.14));border:1px solid rgba(var(--w),.28);box-shadow:0 0 18px rgba(var(--acc),.3)}
.ic-h .i{width:28px;height:28px}
.mark .i{width:16px;height:16px}
.mark.rd:not(.on) .i{opacity:0}
.mark.rd:not(.on):hover .i{opacity:.4}
.mark[data-act=save].on .i{filter:drop-shadow(0 0 5px rgba(251,191,36,.8))}
.bigemoji{display:grid;place-items:center;line-height:1}
.bigemoji .i{width:1em;height:1em}
.lock-hero .bigemoji{color:var(--gold)}
.result .bigemoji{color:var(--gold)}
.stat .num .i{width:.9em;height:.9em;color:var(--gold)}
.btn .i{width:1.05em;height:1.05em;margin-right:2px;vertical-align:-.17em}
.theme-btn .i{margin-right:6px;vertical-align:-.17em}
.theme-tile small .i{width:.9em;height:.9em;vertical-align:-.1em;color:var(--green)}
.topbar button .i{width:1.3rem;height:1.3rem;vertical-align:middle}
.notice .i,footer.note .i,.lead .i,.crumbs .i{width:1em;height:1em}
footer.note .i{vertical-align:-.15em;color:var(--gold)}
.lead b .i{color:var(--gold);width:1.05em;height:1.05em;vertical-align:-.17em}
/* Checkliste: Kästchen statt Text-Symbol */
.prose ul.checks{list-style:none;padding-left:0}
.prose ul.checks li{position:relative;padding-left:34px;margin:10px 0}
.prose ul.checks li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:6px;border:1.6px solid rgba(var(--w),.5);background:rgba(var(--w),.06)}

/* ===== Zurück / Weiter / Merken / Gelesen: kompakte feste Leiste am unteren Bildschirmrand =====
   Sitzt immer an denselben Koordinaten, egal wie lang der Text des Themas ist. */
.dock{position:fixed;z-index:20;bottom:16px;left:calc(var(--side) + 28px);right:0;margin:0 auto;
  width:min(700px,calc(100vw - var(--side) - 28px - 96px));
  display:grid;grid-template-columns:minmax(0,1fr) 104px 160px minmax(0,1fr);gap:8px;padding:6px;border-radius:16px;
  background:rgba(var(--sticky),.9);backdrop-filter:blur(16px);border:1px solid var(--edge);box-shadow:var(--glow)}
.dock .btn{height:36px;padding:0 12px;font-size:.84rem;gap:6px;justify-content:center;white-space:nowrap;min-width:0;border-radius:11px}
.dock .btn .i{width:1em;height:1em;margin:0}
.dock .dk-nav span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.dock .dk-empty{visibility:hidden}
.reader{margin-bottom:80px}
@media(max-width:1100px){
  .dock{left:16px;right:16px;width:auto;margin:0;bottom:12px}
}
@media(max-width:700px){
  .dock{grid-template-columns:40px 1fr 1fr 40px}
  .dock .dk-nav span{display:none}
  .dock .btn{padding:0 6px}
}
/* ===== Login & Admin ===== */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(440px,100%);padding:32px 30px}
.login-brand{text-align:center;margin-bottom:22px}
.login-brand img{width:72px;height:72px;border-radius:18px;object-fit:cover;border:1px solid rgba(var(--w),.5);box-shadow:var(--glow-hi)}
.login-brand h1{margin:14px 0 2px;font-size:1.7rem}
.login-brand p{margin:0;color:var(--muted)}
.btn.discord{width:100%;justify-content:center;height:50px;background:linear-gradient(135deg,#5865f2,#4752c4);}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:20px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--edge)}
.login-card .tabs{margin-bottom:16px}
.fine{color:var(--muted);font-size:.8rem;text-align:center;margin:14px 0 0}
table.admin{min-width:1000px;margin:0;font-size:.88rem}
table.admin th,table.admin td{border-left:0;border-right:0;vertical-align:middle}
table.admin select,table.admin input[type=text],table.admin input[type=date]{width:100%;padding:7px 9px;border-radius:9px;border:1px solid var(--edge);background:rgba(var(--w),.06);color:var(--text);font:inherit}
table.admin select option{color:#111}
table.admin tr.wait{background:rgba(251,191,36,.07)}
table.admin td.act{white-space:nowrap}
table.admin td.act .btn{margin:2px}
.lvl{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:600;border:1px solid var(--edge)}
.lvl.l0{color:var(--gold);border-color:var(--gold)}
.lvl.l1{color:var(--cyan);border-color:var(--cyan)}
.lvl.l2{color:var(--green);border-color:var(--green)}