:root {
  --bg-s:#07071a;--fg:#ededff;
  --ac:#b898f0;--a2:#68d8ff;--a3:#f47aaa;
  --gr:#6ef0a4;--ye:#ffe06a;--or:#ff8c5a;
  --dim:#9898c8;--card:rgba(20,20,48,.94);--bor:rgba(180,150,240,.38);
  --bor2:rgba(180,150,240,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-s);color:var(--fg);font-family:'Courier New',monospace;overflow-x:hidden}
html body,html body *{cursor:default}
input,textarea{cursor:text!important}
select,button,a,.btn,.np,.nav-link,.pin-clear,.pin-enter,.cal-nav-btn,.cal-view-btn,
.a-nav,.act-btn,.att-item,.lk-notes-toggle,.hero-nav-btn,.bericht-content-label,
.perm-item,.lnk{cursor:pointer!important}
::selection{background:var(--ac);color:#fff}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--bg-s)}::-webkit-scrollbar-thumb{background:var(--dim)}

canvas#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;cursor:crosshair}

/* ─── BOOT ─── */
#boot{position:fixed;inset:0;z-index:500;background:#000;overflow:hidden}

/* POWER STATE */
#boot-power{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2rem;
}
.boot-chips{
  position:absolute;inset:0;pointer-events:none;
}
.boot-chip{
  position:absolute;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.3rem .7rem;border:1px solid;font-family:'Courier New',monospace;
  animation:chip-float 4s ease-in-out infinite;
}
.boot-chip:nth-child(1){top:12%;left:8%;color:#45c0e8;border-color:#45c0e830;animation-delay:0s}
.boot-chip:nth-child(2){top:18%;right:10%;color:#8b6fd4;border-color:#8b6fd430;animation-delay:.7s}
.boot-chip:nth-child(3){top:72%;left:12%;color:#e85a8a;border-color:#e85a8a30;animation-delay:1.2s}
.boot-chip:nth-child(4){top:78%;right:8%;color:#52d68a;border-color:#52d68a30;animation-delay:.4s}
.boot-chip:nth-child(5){top:45%;left:5%;color:#f5c84a;border-color:#f5c84a30;animation-delay:1.8s}
.boot-chip:nth-child(6){top:38%;right:6%;color:#45c0e8;border-color:#45c0e830;animation-delay:2.3s}
.boot-chip:nth-child(7){top:88%;left:38%;color:#8b6fd4;border-color:#8b6fd430;animation-delay:.9s}
.boot-chip:nth-child(8){top:6%;left:42%;color:#e85a8a;border-color:#e85a8a30;animation-delay:1.5s}
@keyframes chip-float{
  0%,100%{opacity:.35;transform:translateY(0)}
  50%{opacity:.7;transform:translateY(-6px)}
}

.power-wrap{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
#power-btn{
  width:110px;height:110px;border-radius:50%;
  border:2px solid var(--ac);background:rgba(139,111,212,.08);
  color:var(--ac);font-size:2.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;position:relative;
  animation:power-pulse 2.5s ease-in-out infinite;
}
#power-btn::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(139,111,212,.2);
  animation:power-ring 2.5s ease-in-out infinite;
}
#power-btn::after{
  content:'';position:absolute;inset:-18px;border-radius:50%;
  border:1px solid rgba(139,111,212,.08);
  animation:power-ring 2.5s ease-in-out infinite .3s;
}
#power-btn:hover{
  background:rgba(139,111,212,.22);
  box-shadow:0 0 60px rgba(139,111,212,.5);
  transform:scale(1.05);
}
#power-btn:active{transform:scale(.97)}
@keyframes power-pulse{
  0%,100%{box-shadow:0 0 20px rgba(139,111,212,.3),0 0 50px rgba(139,111,212,.1)}
  50%{box-shadow:0 0 40px rgba(139,111,212,.6),0 0 90px rgba(139,111,212,.2)}
}
@keyframes power-ring{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.04)}
}

.power-label{font-size:.62rem;letter-spacing:.3em;color:var(--dim);text-align:center}
.power-hint{font-size:.52rem;letter-spacing:.18em;color:rgba(60,60,96,.6);margin-top:-.8rem}

/* CRT BOOT STATE */
#boot-crt{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
}
.crt-box{
  width:min(700px,92vw);
  background:#000d00;
  border:2px solid #00cc00;
  border-radius:4px;
  padding:1.8rem 2.4rem;
  position:relative;overflow:hidden;
  box-shadow:0 0 40px #00cc0035,0 0 80px #00cc0012,inset 0 0 30px #00000060;
}
.crt-box::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);
}
.crt-box::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}
.crt-text{
  font-size:clamp(.7rem,1.1vw,.82rem);color:#00cc00;line-height:1.75;
  text-shadow:0 0 7px #00ff0080;white-space:pre-wrap;
  position:relative;z-index:3;min-height:160px;
}

@keyframes crt-on{
  0%{opacity:0;transform:scaleY(.01) scaleX(.95);filter:brightness(5)}
  12%{opacity:1;transform:scaleY(.04) scaleX(1);filter:brightness(2)}
  35%{transform:scaleY(1);filter:brightness(1.3)}
  100%{transform:scaleY(1);filter:brightness(1)}
}
@keyframes crt-off{
  0%{opacity:1;transform:scaleY(1)}
  25%{transform:scaleY(.04) scaleX(1.02);filter:brightness(3)}
  50%{opacity:0;transform:scaleY(.01)}
  100%{opacity:0}
}
.crt-on {animation:crt-on .45s ease-out forwards}
.crt-off{animation:crt-off .35s ease-in forwards}

.blink{animation:blink .8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ─── PIN ─── */
#pin-screen{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(7,7,16,.82);backdrop-filter:blur(4px)}
.pin-box{border:1px solid var(--bor);background:var(--card);padding:2.8rem 3.2rem;
  text-align:center;min-width:310px;backdrop-filter:blur(14px)}
.pin-logo{font-size:.56rem;letter-spacing:.3em;color:var(--a2);margin-bottom:1.2rem;text-transform:uppercase}
.pin-h1{font-size:2.6rem;font-weight:900;letter-spacing:.06em;line-height:1;
  background:linear-gradient(135deg,var(--a2),var(--ac),var(--a3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.3rem}
.pin-sub{font-size:.58rem;color:var(--dim);letter-spacing:.2em;margin-bottom:1.8rem}
.pin-dots{display:flex;justify-content:center;gap:.55rem;margin-bottom:1.4rem}
.pin-dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--ac);transition:background .12s}
.pin-dot.filled{background:var(--ac)}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.42rem;margin-bottom:.42rem}
.np,.pin-clear,.pin-enter{font-family:'Courier New',monospace;cursor:pointer;border:1px solid var(--bor);
  transition:background .15s,border-color .15s}
.np{padding:.82rem;background:rgba(139,111,212,.07);color:var(--fg);font-size:1.15rem}
.np:hover{background:rgba(139,111,212,.22);border-color:var(--ac)}
.np:active{background:rgba(139,111,212,.4)}
.pin-row{display:grid;grid-template-columns:1fr 1fr;gap:.42rem}
.pin-clear{padding:.65rem;background:rgba(232,90,138,.07);color:var(--a3);font-size:.78rem;
  border-color:rgba(232,90,138,.35);letter-spacing:.12em}
.pin-clear:hover{background:rgba(232,90,138,.2)}
.pin-enter{padding:.65rem;background:rgba(69,192,232,.07);color:var(--a2);font-size:.78rem;
  border-color:rgba(69,192,232,.35);letter-spacing:.12em}
.pin-enter:hover{background:rgba(69,192,232,.2)}
.pin-err{color:var(--a3);font-size:.62rem;letter-spacing:.1em;margin-top:.7rem;height:.85rem}

/* ─── STICKY NAV ─── */
#sticky-nav{
  position:sticky;top:0;z-index:40;
  display:none;align-items:center;gap:1.4rem;
  padding:.85rem 3rem;
  border-bottom:1px solid var(--bor);
  background:rgba(7,7,26,.95);backdrop-filter:blur(12px);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
#sticky-nav.visible{display:flex}
.nav-logo{font-weight:900;font-size:.8rem;
  background:linear-gradient(90deg,var(--a2),var(--ac));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:.1em;margin-right:auto}
.nav-link{color:#c0c0e0;text-decoration:none;transition:color .2s;cursor:pointer}
.nav-link:hover{color:var(--fg)}
#nav-user-btn{padding:.4rem .9rem;border:1px solid var(--bor);background:transparent;
  color:var(--dim);font-family:'Courier New',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
#nav-user-btn:hover{border-color:var(--ac);color:var(--ac)}
#nav-user-btn.logged{color:var(--a2);border-color:rgba(69,192,232,.38)}

/* ─── APP ─── */
#app{position:relative;z-index:1;display:none;max-width:1400px;margin:0 auto;padding:0 3rem 6rem}

/* ─── HERO ─── */
#s-hero{padding:5rem 0 3rem;text-align:center;border-bottom:1px solid var(--bor)}
.hero-badge{display:inline-block;font-size:.56rem;letter-spacing:.3em;color:var(--a2);
  border:1px solid rgba(69,192,232,.3);padding:.22rem .9rem;margin-bottom:.9rem;text-transform:uppercase}
h1.hero-cls{font-size:clamp(4rem,11vw,8.5rem);font-weight:900;letter-spacing:.04em;line-height:1;
  background:linear-gradient(135deg,var(--a2) 0%,var(--ac) 55%,var(--a3) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{margin-top:.5rem;font-size:.72rem;color:var(--dim);letter-spacing:.28em}
.hero-nav{display:flex;justify-content:center;gap:.6rem;margin-top:2.2rem;flex-wrap:wrap}
/* Chip-Style wie Original */
.hero-nav-btn{
  padding:.5rem 1.1rem;
  border:1px solid var(--bor);
  background:rgba(16,16,40,.8);
  color:#c0c0e0;
  font-family:'Courier New',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:all .18s;position:relative;
}
.hero-nav-btn::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--dim);flex-shrink:0;transition:background .18s;
}
.hero-nav-btn:hover{border-color:var(--ac);color:var(--fg);background:rgba(160,128,232,.12)}
.hero-nav-btn:hover::before{background:var(--ac)}

/* ─── SECTION ─── */
.section{padding:4rem 0}
.section+.section{border-top:1px solid var(--bor2)}
.sec-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:2.2rem}
.sec-tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.35rem 1rem;border:1px solid;font-weight:bold}
.sec-tag-blue{color:var(--a2);border-color:var(--a2);background:rgba(80,204,245,.1)}
.sec-tag-purple{color:var(--ac);border-color:var(--ac);background:rgba(160,128,232,.1)}
.sec-tag-green{color:var(--gr);border-color:var(--gr);background:rgba(94,232,152,.1)}
.sec-tag-yellow{color:var(--ye);border-color:var(--ye);background:rgba(255,212,88,.1)}
.sec-line{flex:1;height:1px;background:var(--bor);opacity:.7}
.sec-action{margin-left:auto}

/* ─── GRID ─── */
.g4{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.4rem}
.g3{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1.5rem}
.g2{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:1.5rem}
.span2{grid-column:1/-1}

/* ─── CARD ─── */
.card{background:var(--card);border:1px solid var(--bor);padding:1.2rem 1.4rem;
  backdrop-filter:blur(10px);transition:border-color .22s,box-shadow .22s}
.card:hover{border-color:var(--ac);box-shadow:0 0 32px rgba(160,128,232,.18)}
.c-head{display:flex;align-items:center;gap:.6rem;padding-bottom:.7rem;margin-bottom:.8rem;border-bottom:1px solid var(--bor);flex-wrap:wrap}
.lk-actions{flex-shrink:0;margin-left:auto;display:flex;gap:.35rem;flex-wrap:wrap}
.chip{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:.28rem .7rem;border:1px solid;font-weight:bold}
.c-b{color:var(--a2);border-color:var(--a2);background:rgba(80,204,245,.1)}
.c-p{color:var(--ac);border-color:var(--ac);background:rgba(160,128,232,.1)}
.c-k{color:var(--a3);border-color:var(--a3);background:rgba(240,104,152,.1)}
.c-g{color:var(--gr);border-color:var(--gr);background:rgba(94,232,152,.1)}
.c-y{color:var(--ye);border-color:var(--ye);background:rgba(255,212,88,.1)}
.c-o{color:var(--or);border-color:var(--or);background:rgba(255,120,68,.12)}

/* ─── ROW ─── */
.row{display:flex;align-items:center;gap:.5rem;padding:.45rem 0;border-bottom:1px solid var(--bor2);font-size:.88rem}
.row:last-child{border-bottom:none}
.rl{flex:1;color:var(--fg)}.rm{font-size:.8rem;color:#c0c0e0}

/* ─── TAGS ─── */
.tag{font-size:.64rem;letter-spacing:.1em;padding:.2rem .65rem;border:1px solid;text-transform:uppercase;white-space:nowrap;flex-shrink:0;font-weight:bold}
.t-done{color:var(--gr);border-color:var(--gr);background:rgba(94,232,152,.1)}
.t-open{color:var(--a3);border-color:var(--a3);background:rgba(240,104,152,.1)}
.t-soon{color:var(--ye);border-color:var(--ye);background:rgba(255,212,88,.1)}
.t-due{color:var(--or);border-color:var(--or);background:rgba(255,120,68,.14);animation:pulse-hot 1.4s infinite}
.t-hot{color:#fff;border-color:var(--or);background:rgba(255,120,68,.22);animation:pulse-hot 1.4s infinite}
.t-pend{color:#b0b0d8;border-color:rgba(120,120,192,.5);background:rgba(96,96,160,.12)}
.t-appr{color:var(--gr);border-color:var(--gr);background:rgba(94,232,152,.1)}
.t-soon-due{color:var(--ye);border-color:var(--ye);background:rgba(255,212,88,.14)}
@keyframes pulse-hot{0%,100%{box-shadow:0 0 0 rgba(255,107,53,0)}50%{box-shadow:0 0 10px rgba(255,107,53,.45)}}

/* ─── LINK ROW ─── */
.lnk{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border:1px solid var(--bor);
  margin-bottom:.55rem;text-decoration:none;color:var(--fg);font-size:.92rem;
  transition:background .2s,border-color .2s,transform .15s}
.lnk:last-child{margin-bottom:0}
.lnk:hover{background:rgba(160,128,232,.12);border-color:var(--ac);transform:translateX(4px)}
.lnk .li{font-size:1.15rem;flex-shrink:0}.lnk .lt{flex:1}
.lnk .ls{display:block;font-size:.68rem;color:var(--dim);margin-top:.1rem}
.lnk .la{color:var(--dim);font-size:.75rem}

/* ─── ATTACHMENTS ─── */
.att-section{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bor2)}
.att-title{font-size:.58rem;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-bottom:.7rem}
.att-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.att-item{display:flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border:1px solid var(--bor);font-size:.7rem;cursor:pointer;
  transition:border-color .2s,background .2s;text-decoration:none;color:var(--fg)}
.att-item:hover{border-color:var(--ac);background:rgba(139,111,212,.1)}
.att-icon{font-size:.85rem}
.att-img-thumb{width:60px;height:60px;object-fit:cover;border:1px solid var(--bor)}
.att-text-box{margin-top:.5rem;padding:.8rem;background:rgba(139,111,212,.05);
  border:1px solid var(--bor2);font-size:.75rem;line-height:1.6;white-space:pre-wrap}

/* ─── ADD ATTACHMENT FORM ─── */
.att-add-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.att-type-sel{padding:.35rem .6rem;background:rgba(139,111,212,.06);border:1px solid var(--bor);
  color:var(--fg);font-family:'Courier New',monospace;font-size:.68rem}
.att-type-sel option{background:#0d0d22}

/* ─── BUTTONS ─── */
.btn{padding:.55rem 1.2rem;border:1px solid;background:transparent;font-family:'Courier New',monospace;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:background .18s}
.b-blue{color:var(--a2);border-color:rgba(69,192,232,.42)}.b-blue:hover{background:rgba(69,192,232,.13)}
.b-red{color:var(--a3);border-color:rgba(232,90,138,.42)}.b-red:hover{background:rgba(232,90,138,.13)}
.b-ghost{color:var(--dim);border-color:rgba(60,60,96,.42)}.b-ghost:hover{background:rgba(60,60,96,.18);color:var(--fg)}
.b-green{color:var(--gr);border-color:rgba(82,214,138,.42)}.b-green:hover{background:rgba(82,214,138,.13)}
.b-yellow{color:var(--ye);border-color:rgba(245,200,74,.42)}.b-yellow:hover{background:rgba(245,200,74,.13)}
.b-sm{padding:.3rem .7rem;font-size:.6rem}
.btn-row{display:flex;gap:.5rem;margin-top:1rem;justify-content:flex-end}

/* ─── MODAL ─── */
.moverlay{position:fixed;inset:0;z-index:400;background:rgba(7,7,16,.88);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1rem}
.moverlay.open{display:flex}
.mbox{background:var(--card);border:1px solid var(--bor);padding:2.2rem;
  width:min(480px,100%);max-height:90vh;overflow-y:auto;backdrop-filter:blur(14px)}
.m-title{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--a2);
  margin-bottom:1.5rem;padding-bottom:.72rem;border-bottom:1px solid var(--bor)}
.fg{margin-bottom:.9rem}
.fl{display:block;font-size:.6rem;letter-spacing:.15em;color:var(--dim);margin-bottom:.3rem;text-transform:uppercase}
.fi{width:100%;padding:.6rem .8rem;background:rgba(139,111,212,.06);border:1px solid var(--bor);
  color:var(--fg);font-family:'Courier New',monospace;font-size:.83rem;outline:none;transition:border-color .2s}
.fi:focus{border-color:var(--ac)}
select.fi option{background:#0d0d22}
textarea.fi{resize:vertical;min-height:80px;line-height:1.5}

/* ─── PERM GRID ─── */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.4rem;margin-top:.5rem}
.perm-grid-grouped{display:flex;flex-direction:column;gap:.7rem;margin-top:.5rem}
.perm-group{display:flex;flex-direction:column;gap:.3rem}
.perm-group-label{font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;font-weight:bold;padding:.1rem 0}
.perm-group-items{display:flex;flex-wrap:wrap;gap:.3rem}
.perm-item{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;
  border:1px solid var(--bor);font-size:.65rem;cursor:pointer;transition:border-color .2s}
.perm-item:hover{border-color:var(--ac)}
.perm-item input{accent-color:var(--ac)}
.perm-item input{accent-color:var(--ac)}

/* ─── ADMIN PANEL ─── */
#admin-panel{position:fixed;inset:0;z-index:300;background:var(--bg-s);display:none;flex-direction:column}
#admin-panel.open{display:flex}
.a-top{display:flex;align-items:center;gap:1rem;padding:.9rem 2rem;
  border-bottom:1px solid var(--bor);background:rgba(13,13,34,.98);backdrop-filter:blur(8px);flex-shrink:0}
.a-top-title{font-size:.6rem;letter-spacing:.26em;color:var(--a2);flex:1;text-transform:uppercase}
.a-body{display:flex;flex:1;overflow:hidden}
.a-side{width:190px;border-right:1px solid var(--bor);padding:1rem 0;flex-shrink:0;overflow-y:auto}
.a-nav{display:block;width:100%;padding:.68rem 1.4rem;background:transparent;border:none;
  border-left:2px solid transparent;color:var(--dim);font-family:'Courier New',monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-align:left;
  transition:color .2s,background .2s,border-color .2s}
.a-nav:hover{color:var(--fg);background:rgba(139,111,212,.06)}
.a-nav.active{color:var(--a2);border-left-color:var(--a2);background:rgba(69,192,232,.05)}
.a-main{flex:1;overflow-y:auto;padding:2rem}
.a-sec{display:none}.a-sec.active{display:block}
.a-sec-title{font-size:.6rem;letter-spacing:.22em;color:var(--ac);text-transform:uppercase;
  margin-bottom:1.5rem;padding-bottom:.6rem;border-bottom:1px solid var(--bor)}
.a-form-row{display:grid;gap:.6rem;margin-bottom:1.5rem}
.atbl{width:100%;border-collapse:collapse}
.atbl th{font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  padding:.5rem .8rem;border-bottom:1px solid var(--bor);text-align:left;white-space:nowrap}
.atbl td{padding:.65rem .8rem;border-bottom:1px solid var(--bor2);font-size:.8rem;vertical-align:middle}
.atbl tr:hover td{background:rgba(139,111,212,.04)}
.act-btns{display:flex;gap:.35rem;flex-wrap:wrap}
.act-btn{padding:.2rem .55rem;border:1px solid;background:transparent;font-family:'Courier New',monospace;
  font-size:.55rem;letter-spacing:.08em;cursor:pointer;transition:background .12s;text-transform:uppercase;white-space:nowrap}

/* ─── GLOBUS ─── */
.globus-info{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1rem 1.2rem;border:1px solid var(--bor);
  margin-bottom:1.2rem;background:rgba(94,232,152,.03)}
.globus-info-item{font-size:.85rem}.globus-info-item span{display:block;font-size:.6rem;color:var(--dim);margin-bottom:.2rem;letter-spacing:.12em}
.offer-card{background:var(--card);border:1px solid var(--bor);padding:1.4rem;
  transition:border-color .22s,box-shadow .22s}
.offer-card:hover{border-color:var(--gr);box-shadow:0 0 22px rgba(94,232,152,.1)}
.offer-discount{font-size:2rem;font-weight:900;color:var(--gr);line-height:1;margin-bottom:.4rem}
.offer-title{font-size:.95rem;margin-bottom:.3rem}
.offer-desc{font-size:.78rem;color:#9090c0}
.offer-valid{font-size:.65rem;color:var(--dim);margin-top:.6rem;letter-spacing:.1em}

/* ─── KRAFTSTOFF ─── */
.fuel-card{background:var(--card);border:1px solid var(--gr);padding:1.4rem 1.8rem;margin-bottom:1.2rem}
.fuel-tabs{display:flex;gap:.3rem;align-items:center;margin-bottom:.6rem}
.fuel-tab{padding:.28rem .75rem;border:1px solid var(--bor);background:transparent;
  font-family:'Courier New',monospace;font-size:.6rem;letter-spacing:.12em;color:var(--dim);
  cursor:pointer;transition:all .15s;text-transform:uppercase}
.fuel-tab:hover{border-color:var(--gr);color:var(--gr)}
.fuel-tab.active{border-color:var(--gr);color:var(--gr);background:rgba(110,240,164,.1)}
.fuel-title{font-size:.68rem;letter-spacing:.2em;color:var(--gr);margin-bottom:1rem;text-transform:uppercase}
.fuel-prices{display:flex;gap:2rem;flex-wrap:wrap}
.fuel-item{display:flex;flex-direction:column;gap:.2rem}
.fuel-type{font-size:.62rem;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.fuel-price{font-size:1.7rem;font-weight:900;color:var(--fg);letter-spacing:.02em}
.fuel-price::after{content:' €/L';font-size:.7rem;font-weight:400;color:var(--dim)}
.fuel-updated{font-size:.6rem;color:var(--dim);margin-top:.8rem;letter-spacing:.1em}

/* ─── STUNDENPLAN ─── */
.timetable-grid{display:flex;flex-direction:column;gap:.35rem}
.tt-row{display:flex;align-items:center;gap:1rem;padding:.75rem 1.1rem;
  background:var(--card);border:1px solid var(--bor);font-size:.88rem;flex-wrap:wrap}
.tt-time{min-width:110px;color:var(--a2);font-size:.78rem;letter-spacing:.04em;flex-shrink:0;font-weight:bold}
.tt-subject{font-weight:bold;flex:1;min-width:80px;color:var(--fg)}
.tt-teacher{font-size:.78rem;color:var(--ye);background:rgba(255,224,106,.12);
  border:1px solid rgba(255,224,106,.35);padding:.15rem .5rem;flex-shrink:0;letter-spacing:.06em}
.tt-room{font-size:.76rem;color:var(--dim);flex-shrink:0}

/* ─── DOWNLOAD CARD ─── */
.dl-card{background:rgba(80,204,245,.06);border:1px solid var(--a2);padding:1.8rem;
  display:flex;align-items:center;gap:1.4rem;text-decoration:none;color:var(--fg);
  transition:background .2s,box-shadow .2s;width:100%}
.dl-card:hover{filter:brightness(1.15);box-shadow:0 0 28px rgba(80,204,245,.15)}
.dl-icon{font-size:2.4rem;flex-shrink:0}
.dl-text{flex:1}.dl-title{font-size:1rem;margin-bottom:.3rem;color:var(--a2)}
.dl-sub{font-size:.75rem;color:#b8b8dc}
.dl-btn{padding:.65rem 1.3rem;border:1px solid var(--a2);background:rgba(80,204,245,.12);
  color:var(--a2);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  flex-shrink:0;font-family:'Courier New',monospace;font-weight:bold}

/* ─── TOAST ─── */
#toast{position:fixed;bottom:4.5rem;left:50%;transform:translateX(-50%) translateY(1.5rem);
  background:var(--card);border:1px solid var(--bor);padding:.55rem 1.5rem;
  font-size:.68rem;letter-spacing:.14em;z-index:9999;opacity:0;
  transition:opacity .28s,transform .28s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── IMAGE LIGHTBOX ─── */
#lightbox{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.92);display:none;
  align-items:center;justify-content:center;cursor:zoom-out}
#lightbox.open{display:flex}
#lightbox img{max-width:90vw;max-height:90vh;object-fit:contain}

/* ─── DAVINCI CARD ─── */
.davinci-card{display:flex;align-items:center;gap:1.4rem;padding:1.6rem 2rem;
  background:rgba(104,216,255,.1);border:2px solid var(--a2);text-decoration:none;color:var(--fg);
  transition:background .2s,box-shadow .2s;max-width:520px}
.davinci-card:hover{background:rgba(104,216,255,.18);box-shadow:0 0 28px rgba(104,216,255,.22)}
.davinci-icon{font-size:2rem;flex-shrink:0}
.davinci-text{flex:1}
.davinci-label{font-size:1rem;color:var(--a2);margin-bottom:.3rem;font-weight:bold}
.davinci-sub{font-size:.72rem;color:#b8cfe0;letter-spacing:.1em}
.davinci-arrow{font-size:.74rem;letter-spacing:.14em;color:var(--a2);font-weight:bold;flex-shrink:0;
  border:1px solid var(--a2);padding:.3rem .7rem;background:rgba(104,216,255,.12)}

/* ─── LK CARD ─── */
.lk-meta-row{display:flex;gap:.5rem 1.2rem;flex-wrap:wrap;padding:.3rem 0 .5rem;font-size:.78rem}
.lk-meta-label{color:var(--dim);letter-spacing:.08em;font-size:.7rem;text-transform:uppercase}
.lk-meta-val{color:#c0c0e0;margin-right:.8rem}
.lk-notes{margin-top:.5rem;padding:.55rem .7rem;background:rgba(160,128,232,.05);
  border-left:2px solid var(--ac);font-size:.82rem;color:#c8c8f0;line-height:1.65;white-space:pre-wrap}
.lk-notes-wrap{margin-top:.5rem}
.lk-notes-toggle{font-size:.72rem;color:var(--dim);cursor:pointer;padding:.2rem 0;user-select:none;letter-spacing:.05em;transition:color .15s}
.lk-notes-toggle:hover{color:var(--fg)}
.lk-notes-body{display:none;margin-top:.4rem;padding:.55rem .7rem;background:rgba(160,128,232,.05);
  border-left:2px solid var(--ac);font-size:.88rem;color:#c8c8f0;line-height:1.65;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;max-width:100%}
.lk-notes-wrap.expanded .lk-notes-body{display:block}
.lk-notes-wrap.expanded .lk-notes-toggle{color:var(--ac)}

/* ─── LK CALENDAR ─── */
.cal-view-btns{display:flex;gap:.3rem}
.cal-view-btn{padding:.3rem .75rem;border:1px solid var(--bor);background:transparent;
  font-family:'Courier New',monospace;font-size:.6rem;letter-spacing:.1em;cursor:pointer;color:var(--dim);transition:.15s}
.cal-view-btn.active{border-color:var(--ye);color:var(--ye);background:rgba(255,212,88,.08)}
.cal-nav{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.cal-nav-btn{background:none;border:1px solid var(--bor);color:var(--fg);font-size:1.1rem;
  cursor:pointer;padding:.2rem .65rem;font-family:'Courier New',monospace;transition:.15s;line-height:1}
.cal-nav-btn:hover{border-color:var(--ac);color:var(--ac)}
#cal-month-label{font-size:.8rem;letter-spacing:.14em;color:var(--ye);min-width:180px;text-align:center}
.cal-header{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.cal-dow{text-align:center;font-size:.58rem;letter-spacing:.1em;color:var(--dim);padding:.35rem 0;text-transform:uppercase}
.cal-body{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-cell{background:var(--card);border:1px solid var(--bor2);min-height:64px;padding:.35rem .4rem;
  transition:border-color .15s,background .15s;position:relative}
.cal-cell:not(.cal-empty):hover{border-color:var(--bor);background:rgba(160,128,232,.05)}
.cal-cell.cal-today{border-color:var(--ac)!important;background:rgba(160,128,232,.1)}
.cal-cell.cal-weekend{background:rgba(0,0,0,.1)}
.cal-cell.cal-weekend .cal-day-num{color:var(--dim)}
.cal-empty{background:transparent;border-color:transparent}
.cal-day-num{font-size:.68rem;color:var(--dim);margin-bottom:.25rem;line-height:1}
.cal-today .cal-day-num{color:var(--ac);font-weight:bold}
.cal-lk-dots{display:flex;flex-wrap:wrap;gap:3px}
.cal-lk-label{font-size:.52rem;letter-spacing:.04em;padding:.1rem .3rem;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  border-left:2px solid;line-height:1.3}
.cal-lk-label.c-b{color:var(--a2);border-color:var(--a2);background:rgba(80,204,245,.1)}
.cal-lk-label.c-g{color:var(--gr);border-color:var(--gr);background:rgba(94,232,152,.1)}
.cal-lk-label.c-y{color:var(--ye);border-color:var(--ye);background:rgba(255,212,88,.1)}
.cal-lk-label.c-o{color:var(--or);border-color:var(--or);background:rgba(255,120,68,.12)}
.cal-lk-more{font-size:.5rem;color:var(--dim);padding:.1rem .3rem}
.cal-day-detail{margin-top:1.2rem;padding:1rem 1.4rem;background:var(--card);border:1px solid var(--bor)}
.cal-day-detail-title{font-size:.68rem;letter-spacing:.14em;color:var(--dim);margin-bottom:.9rem;text-transform:uppercase}
.cal-day-detail-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--bor2)}
.cal-day-detail-row:last-child{border-bottom:none}
.cal-undated-label{font-size:.6rem;letter-spacing:.14em;color:var(--dim);margin-top:1.2rem;margin-bottom:.5rem;text-transform:uppercase}
.cal-undated-list{display:flex;flex-wrap:wrap;gap:.4rem}

/* ─── BERICHTSHEFT EDITOR ─── */
.bericht-editor{resize:vertical;min-height:120px;font-family:'Courier New',monospace;font-size:.82rem;line-height:1.6}
.bericht-content{margin-top:.8rem;border:1px solid var(--bor);
  background:rgba(160,128,232,.04)}
.bericht-content-label{font-size:.6rem;letter-spacing:.16em;color:var(--dim);padding:.45rem .8rem;
  display:flex;align-items:center;gap:.4rem;cursor:pointer;transition:background .15s;user-select:none}
.bericht-content-label:hover{background:rgba(160,128,232,.08)}
.bericht-content-body{display:none;font-size:.82rem;color:#c8c8f0;line-height:1.7;
  padding:.4rem .8rem .8rem;border-top:1px solid var(--bor);user-select:text}
.bericht-content.expanded .bericht-content-label{color:var(--ac)}
.bericht-content.expanded .bericht-content-label::after{content:'▾';margin-left:auto}
.bericht-content.expanded .bericht-content-body{display:block}

/* ─── BERICHT CONTENT EXPANDED ─── */
.bericht-content.expanded .bericht-content-body{display:block}

/* ─── LOGOUT BTNS ─── */
#nav-logout-btn,#nav-user-logout-btn{padding:.4rem .7rem;border:1px solid rgba(232,90,138,.35);background:transparent;
  color:var(--a3);font-family:'Courier New',monospace;font-size:.72rem;cursor:pointer;
  transition:border-color .2s,background .2s;margin-left:.2rem}
#nav-logout-btn:hover,#nav-user-logout-btn:hover{background:rgba(232,90,138,.12);border-color:var(--a3)}

/* ─── ADMIN CLASS FILTER ─── */
.admin-cls-filter{color:var(--dim);border-color:var(--bor2)}
.admin-cls-filter.active{color:var(--a2);border-color:rgba(80,204,245,.5);background:rgba(80,204,245,.08)}

/* ─── STATS PAGE ─── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--card);border:1px solid var(--bor);padding:1.2rem 1.4rem;text-align:center}
.stat-val{font-size:2.4rem;font-weight:900;color:var(--a2);line-height:1}
.stat-label{font-size:.6rem;letter-spacing:.14em;color:var(--dim);margin-top:.4rem;text-transform:uppercase}

/* ─── TIKTOK CARD THUMB ─── */
.tiktok-thumb{width:52px;height:52px;object-fit:cover;border:1px solid var(--bor);flex-shrink:0;border-radius:2px}

/* ─── FOOTER ─── */
footer{text-align:center;margin-top:2rem;padding:1.5rem 0;border-top:1px solid var(--bor);
  font-size:.62rem;color:var(--dim);letter-spacing:.18em}

/* ─── DRAG SECTIONS ─── */
section.section[draggable="true"]{border-top:2px solid transparent;transition:border-color .15s}
section.section.drag-over{border-top:2px solid var(--ac)}
.sec-head{cursor:grab}
.sec-head:active{cursor:grabbing}

/* ════════════════════════════════
   MOBILE — max 768px
   Desktop layout unchanged above
   ════════════════════════════════ */
@media(max-width:768px){
  /* Nav: hide links, keep logo + buttons */
  #sticky-nav{padding:.65rem 1rem;gap:.6rem}
  .nav-link{display:none}
  .nav-logo{font-size:.72rem}
  #nav-user-btn{font-size:.55rem;padding:.35rem .7rem}

  /* App container */
  #app{padding:0 .9rem 4rem}

  /* Hero */
  h1.hero-cls{font-size:clamp(2.6rem,16vw,5rem)}
  .hero-sub{font-size:.62rem;letter-spacing:.16em}
  .hero-nav{gap:.35rem;margin-top:1.4rem}
  .hero-nav-btn{font-size:.58rem;padding:.38rem .65rem}

  /* Sections */
  .section{padding:2.2rem 0}
  .sec-head{gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem}
  .sec-tag{font-size:.6rem;padding:.25rem .6rem}

  /* Grids → 1 column */
  .g3,.g4,.g2{grid-template-columns:1fr}

  /* Cards */
  .card{padding:.9rem 1rem}
  .c-head{flex-wrap:wrap;gap:.35rem;padding-bottom:.55rem;margin-bottom:.6rem}

  /* LK controls row: full width below chip */
  .lk-actions{margin-left:0;width:100%;justify-content:flex-start}
  .lk-actions select{width:80px}

  /* LK meta */
  .lk-meta-row{gap:.25rem .7rem;font-size:.72rem}
  .lk-meta-label{font-size:.62rem}

  /* Quick links */
  .dl-card{padding:1rem .9rem;gap:.8rem}
  .dl-icon{font-size:1.7rem}
  .dl-title{font-size:.88rem}
  .dl-sub{font-size:.68rem}
  .dl-btn{padding:.5rem .8rem;font-size:.62rem}

  /* Stundenplan */
  .davinci-card{padding:1rem 1rem;gap:.8rem;max-width:100%}
  .davinci-icon{font-size:1.5rem}
  .davinci-label{font-size:.88rem}
  .davinci-arrow{font-size:.65rem;padding:.25rem .5rem}
  .tt-row{gap:.5rem;padding:.55rem .7rem;font-size:.82rem}
  .tt-time{min-width:75px;font-size:.7rem}
  .tt-teacher{font-size:.7rem;padding:.12rem .35rem}

  /* Calendar */
  .cal-cell{min-height:42px;padding:.18rem .2rem}
  .cal-lk-label{font-size:.44rem;padding:.08rem .2rem}
  .cal-day-num{font-size:.58rem}
  .cal-dow{font-size:.52rem}
  #cal-month-label{font-size:.7rem;min-width:130px}

  /* Fuel */
  .fuel-card{padding:1rem 1.2rem}
  .fuel-prices{gap:1rem}
  .fuel-price{font-size:1.35rem}

  /* Modals */
  .mbox{padding:1.4rem 1.1rem}
  .m-title{font-size:.58rem;margin-bottom:1.1rem}
  .btn-row{flex-wrap:wrap}

  /* PIN screen */
  .pin-box{padding:2rem 1.6rem;min-width:260px;width:90vw}
  .pin-h1{font-size:2rem}

  /* Admin panel: sidebar → top tab bar */
  .a-body{flex-direction:column}
  .a-side{width:100%;border-right:none;border-bottom:1px solid var(--bor);
    display:flex;flex-wrap:nowrap;overflow-x:auto;padding:.4rem .6rem;flex-shrink:0;gap:.2rem}
  .a-nav{width:auto;white-space:nowrap;padding:.45rem .8rem;border-left:none;
    border-bottom:2px solid transparent;font-size:.6rem}
  .a-nav.active{border-left-color:transparent!important;border-bottom-color:var(--a2);background:rgba(69,192,232,.05)}
  .a-main{padding:1rem}
  .a-form-row{grid-template-columns:1fr!important}
  .a-top{padding:.7rem 1rem}
  .a-top-title{font-size:.52rem;letter-spacing:.16em}

  /* Admin tables: scroll horizontally */
  #asec-lks .atbl,#asec-bericht .atbl,#asec-users .atbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .atbl th{font-size:.52rem;padding:.4rem .5rem}
  .atbl td{font-size:.72rem;padding:.5rem .5rem}
  .act-btn{font-size:.5rem;padding:.18rem .4rem}

  /* Perm grid */
  .perm-grid{grid-template-columns:1fr 1fr}

  /* Stats */
  .stats-grid{grid-template-columns:repeat(2,1fr)}

  /* Toast */
  #toast{bottom:1.2rem;width:90vw;text-align:center}

  /* Bericht modal */
  .bericht-editor{min-height:80px}

  /* KW preview */
  #b-kw-preview{font-size:.62rem}
}