:root{color-scheme:dark light;--bg:#f3f1fb;--fg:#15142a;--mut:#6d6a85;--card:#ffffffb8;--glass:#ffffffcc;--line:#1a164014;--acc:#6c4cff;--acc2:#ff5ca8;--red:#e5384f;--ok:#17b26a;--r:22px;--sh:0 8px 30px #3b2f8a1f}
@media(prefers-color-scheme:dark){:root{--bg:#0b0d1a;--fg:#f2f1ff;--mut:#9a98b8;--card:#ffffff10;--glass:#161833cc;--line:#ffffff14;--acc:#8b74ff;--sh:0 8px 30px #0008}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.45 "Inter",ui-rounded,system-ui,-apple-system,sans-serif;color:var(--fg);background:var(--bg);min-height:100vh}
body::before,body::after{content:"";position:fixed;z-index:-1;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.45;animation:float 22s ease-in-out infinite alternate}
body::before{background:var(--acc);top:-25vmax;left:-20vmax}
body::after{background:var(--acc2);bottom:-30vmax;right:-20vmax;animation-delay:-8s;opacity:.3}
@keyframes float{to{transform:translate(8vmax,6vmax) scale(1.15)}}
#bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line)}
#bar h1{flex:1;margin:0;font-size:17px;font-weight:700;text-align:center;letter-spacing:-.01em}
#back{font-size:32px;line-height:1;background:none;border:0;color:var(--acc);width:40px;cursor:pointer}
#action{min-width:40px}
#bar:has(#back[hidden]) h1{text-align:left;font-size:20px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
main{max-width:720px;margin:0 auto;padding:16px;padding-bottom:calc(110px + env(safe-area-inset-bottom));animation:in .35s ease both}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
::view-transition-old(root){animation:.18s ease both fade-out}::view-transition-new(root){animation:.25s ease both fade-in}
@keyframes fade-out{to{opacity:0}}@keyframes fade-in{from{opacity:0}}
/* nav */
#nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:9;display:flex;gap:2px;padding:6px;border-radius:30px;background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--line);box-shadow:var(--sh);width:min(94vw,440px)}
#nav a{flex:1;display:flex;flex-direction:column;align-items:center;font-size:10.5px;font-weight:600;color:var(--mut);text-decoration:none;padding:6px 0;border-radius:24px;transition:.2s}
#nav a span{height:26px;display:flex;transition:transform .2s}#nav a span img{height:26px;width:26px;object-fit:contain}
#nav a.on{color:var(--fg);background:linear-gradient(135deg,#6c4cff40,#ff5ca840)}#nav a.on span{transform:scale(1.18)}
/* hero + bento */
.hero{padding:10px 4px 18px}.eyebrow{margin:0;color:var(--mut);font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hero h2{margin:2px 0 12px;font-size:clamp(32px,9vw,46px);letter-spacing:-.03em;line-height:1.05}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:6px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600;backdrop-filter:blur(10px)}.chip.warn{background:#e5384f26;color:var(--red)}
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;min-height:130px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--fg);text-align:left;font:inherit;box-shadow:var(--sh);cursor:pointer;transition:transform .2s,box-shadow .2s;animation:in .5s ease both}
.tile:hover{transform:translateY(-3px) scale(1.01)}.tile:active{transform:scale(.97)}
.tile.wide{grid-column:span 2;min-height:110px}
.tile .ic{margin-bottom:auto}.tile .ic img{width:56px;height:56px;display:block;filter:drop-shadow(0 4px 8px #0003)}
.tile b{font-size:17px;letter-spacing:-.01em}.tile small{color:var(--mut);font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile::before{content:"";position:absolute;inset:0;opacity:.18;background:var(--g);z-index:-1}
.g1{--g:linear-gradient(135deg,#6c4cff,#3ec6ff)}.g2{--g:linear-gradient(135deg,#ff9a3c,#ff5ca8)}.g3{--g:linear-gradient(135deg,#17b26a,#b6f05c)}.g4{--g:linear-gradient(135deg,#ffd23c,#ff9a3c)}.g5{--g:linear-gradient(135deg,#ff5ca8,#8b74ff)}.g6{--g:linear-gradient(135deg,#ff6b3c,#ffd23c)}.g7{--g:linear-gradient(135deg,#3ec6ff,#6c4cff)}.g8{--g:linear-gradient(135deg,#9aa4b8,#e6e9f2)}
.tile:nth-child(2){animation-delay:.04s}.tile:nth-child(3){animation-delay:.08s}.tile:nth-child(4){animation-delay:.12s}.tile:nth-child(5){animation-delay:.16s}.tile:nth-child(6){animation-delay:.2s}
/* lists */
.list{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin-bottom:14px}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.row:hover{background:#8b74ff14}.row:last-child{border:0}.row .grow{flex:1;min-width:0}.row small{color:var(--mut);display:block;font-size:13px}
.row.done b{text-decoration:line-through;color:var(--mut)}
.late{color:var(--red);font-weight:600}
h3{margin:18px 4px 8px;font-size:15px;letter-spacing:-.01em}
.logo{display:block;margin:8px auto 18px;height:90px;filter:drop-shadow(0 8px 16px #6c4cff55)}
/* controls */
.btn,button.btn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:0;border-radius:16px;padding:13px 18px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 6px 18px #6c4cff55;transition:transform .15s}
.btn:active{transform:scale(.97)}.btn.sec{background:var(--card);color:var(--acc);box-shadow:none;border:1px solid var(--line)}.btn.del{background:var(--red);box-shadow:0 6px 18px #e5384f55}
.link{background:none;border:0;color:var(--acc);font:inherit;font-weight:600;cursor:pointer;padding:4px 8px}
input,select,textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);margin:4px 0 12px;outline:0;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px #6c4cff2e}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--acc)}
textarea{min-height:45vh;resize:vertical}label{font-size:12px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-left:4px}
.bar{display:flex;gap:10px;margin-bottom:14px}.bar>*{flex:1}
.mark{font-weight:800;min-width:48px;font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--mut);padding:28px}
/* timetable */
table.tt{width:100%;border-collapse:separate;border-spacing:4px;font-size:13px}
.tt th{color:var(--mut);font-weight:600;font-size:12px}.tt th.now{color:var(--acc)}
.tt td{background:var(--card);border-radius:12px;padding:0;border:1px solid var(--line)}
.tt td input{margin:0;padding:11px 2px;border:0;text-align:center;font-size:13px;background:transparent;border-radius:12px}
.tt td.now{background:linear-gradient(180deg,#6c4cff2e,#ff5ca81f)}
iframe{width:100%;height:75vh;border:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh)}
/* calendar */
.mw{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:18px}
.mw .link{font-size:26px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;background:var(--card);backdrop-filter:blur(16px);padding:10px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh)}
.cal div{padding:10px 0;border-radius:14px;cursor:pointer;position:relative;font-weight:600;transition:.15s}
.cal div:not(.h):hover{background:#8b74ff22}.cal .h{color:var(--mut);font-size:12px;cursor:default}
.cal .sel{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 4px 12px #6c4cff66}
.cal .today:not(.sel){color:var(--acc);outline:2px solid var(--acc);outline-offset:-2px}
.cal .dot::after{content:"";position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:var(--acc2)}
@media(min-width:760px){#nav{width:440px}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}

/* ---- Original-Look: Grau-Weiss-Verlauf, Yall-Grün, runde Glas-Kacheln ---- */
:root{--bg:#fff;--acc:#4f8f2a;--acc2:#7bbf4a;--card:#ffffffd9;--glass:#ffffffd9;--line:#0000001a;--sh:0 6px 20px #0002}
@media(prefers-color-scheme:dark){:root{--bg:#1b1c1b;--acc:#7bbf4a;--acc2:#4f8f2a;--card:#ffffff12;--glass:#222322d9;--line:#ffffff1a}}
body{background:linear-gradient(#dcdcdb,#fff 70%) fixed,#fff}
@media(prefers-color-scheme:dark){.yall{background:#fffffff2;border-radius:26px;padding:6px 22px}}
body::before,body::after{display:none}
#bar{display:none}
#bar:not(:has(#back[hidden])){display:flex}
#bar:has(#back[hidden]){display:none}
#bar h1{background:none;color:var(--fg);-webkit-text-fill-color:currentColor}
.btn,button.btn{background:linear-gradient(#6fb23f,#3f7a1f);box-shadow:0 4px 12px #3f7a1f55}
.cal .sel{background:linear-gradient(#6fb23f,#3f7a1f);box-shadow:0 4px 12px #3f7a1f66}
#nav a.on{background:#4f8f2a26}
.logo{filter:none}.tt td.now{background:#4f8f2a26}
.row:hover{background:#4f8f2a12}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px #4f8f2a33}
.top{display:flex;justify-content:flex-end;gap:10px}.top button{background:none;border:0;padding:0;cursor:pointer}.top img{width:36px;height:36px;display:block;filter:drop-shadow(0 2px 3px #0003)}
.yall{display:block;margin:0 auto 22px;height:min(30vh,230px);width:auto;filter:drop-shadow(4px 6px 5px #0004)}
.orbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:480px;margin:0 auto}
.orb{border:0;background:none;padding:0;cursor:pointer;aspect-ratio:1;display:block;transition:transform .15s;animation:in .5s ease both}
.orb:active{transform:scale(.93)}.orb:hover{transform:translateY(-3px)}
.orb>img{width:100%;height:100%;object-fit:contain;display:block}
.orb:nth-child(2){animation-delay:.05s}.orb:nth-child(3){animation-delay:.1s}.orb:nth-child(4){animation-delay:.15s}.orb:nth-child(5){animation-delay:.2s}.orb:nth-child(6){animation-delay:.25s}
.calorb{position:relative;display:flex;width:100%;height:100%;border-radius:50%;align-items:center;justify-content:center;padding-top:14%;background:radial-gradient(ellipse 90% 45% at 50% 22%,#fff9,#fff0),linear-gradient(#c8c9c7,#fdfdfc);box-shadow:3px 6px 8px #0003;container-type:inline-size}
.calorb i{position:absolute;top:0;left:2%;right:2%;font-style:normal;color:#fff;font-size:15cqw;line-height:1.35;border-radius:99px;background:linear-gradient(#5aa532,#2f6a14);box-shadow:0 2px 3px #0004}
.calorb b{font-weight:300;font-size:55cqw;color:#111;line-height:1}
.status{text-align:center;color:var(--mut);margin:24px 0 0;font-weight:500}
/* Original ist hell: Dunkelmodus bewusst nicht übernommen */
:root{color-scheme:light;--fg:#15142a;--mut:#6d6a85;--card:#ffffffd9;--glass:#ffffffd9;--line:#0000001a;--acc:#4f8f2a}
.yall{background:none!important;padding:0!important}
.top .info{margin-right:auto;font-size:30px;line-height:1;color:var(--acc);filter:none}
.top{align-items:center}