@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/PlusJakartaSans-latin-ext-LDIoaomQNQ.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/PlusJakartaSans-latin-LDIoaomQNQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Anton-latin-ext-1Ptgg87LRO.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Anton-latin-1Ptgg87LRO.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/SourceSerif4-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/SourceSerif4-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Designs ---------- */
:root{
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --st-none:#9aa5a0;--st-todo:#e3b93c;--st-doing:#f08a24;--st-done:#2e9e5b;--late:#e5484d;
}
/* 1 · Petrol & Gold (UniYES) */
[data-design="1"]{
  --page:radial-gradient(700px 500px at 0% 0%,rgba(217,184,110,.18),transparent 70%),radial-gradient(700px 600px at 100% 10%,rgba(46,120,105,.65),transparent 70%),radial-gradient(900px 800px at 50% 70%,rgba(46,87,55,.5),transparent 70%),linear-gradient(180deg,#123a3b,#0d2d2e);
  --page-solid:#0d2d2e;--txt:#fff;--muted:rgba(255,255,255,.72);--faint:rgba(255,255,255,.5);
  --card:rgba(255,255,255,.075);--card-2:rgba(255,255,255,.13);--edge:rgba(255,255,255,.16);--blur:blur(16px);
  --accent:#d9b86e;--accent-2:#f0d89c;--on-accent:#2b2200;--hero:transparent;--hero-txt:#fff;--hero-edge:rgba(217,184,110,.55);
  --head:"Anton",Impact,sans-serif;--head-w:400;--head-ls:.01em;--head-up:uppercase;
  --r:22px;--shadow:0 20px 50px rgba(0,0,0,.22);--tab:rgba(10,36,37,.82);--logo:none;--chip:rgba(255,255,255,.1);
}
/* 2 · IGMG Yeşil (hell) */
[data-design="2"]{
  --page:#f3f5f1;--page-solid:#f3f5f1;--txt:#16261b;--muted:#56665b;--faint:#8a978e;
  --card:#fff;--card-2:#eef3ee;--edge:#e1e8e2;--blur:none;
  --accent:#2e5737;--accent-2:#d9b86e;--on-accent:#fff;--hero:linear-gradient(160deg,#2e5737,#1f4128);--hero-txt:#fff;--hero-edge:transparent;
  --head:var(--sans);--head-w:800;--head-ls:-.01em;--head-up:none;
  --r:18px;--shadow:0 6px 20px rgba(22,38,27,.07);--tab:rgba(255,255,255,.92);--logo:none;--chip:#eef3ee;
}
/* 3 · Altın Sade (edel, ruhig) */
[data-design="3"]{
  --page:#fbf9f4;--page-solid:#fbf9f4;--txt:#1d1b16;--muted:#6b665a;--faint:#a39d8e;
  --card:#fff;--card-2:#f6f1e4;--edge:#ebe4d3;--blur:none;
  --accent:#9c7a2f;--accent-2:#d9b86e;--on-accent:#fff;--hero:transparent;--hero-txt:#1d1b16;--hero-edge:#d9b86e;
  --head:"Source Serif 4",Georgia,serif;--head-w:700;--head-ls:0;--head-up:none;
  --r:14px;--shadow:none;--tab:rgba(251,249,244,.95);--logo:invert(1) brightness(.25) sepia(.5);--chip:#f6f1e4;
}
/* 4 · Gece (dunkel) */
[data-design="4"]{
  --page:radial-gradient(600px 400px at 100% 0%,rgba(47,191,143,.14),transparent 70%),#0a1311;--page-solid:#0a1311;--txt:#e9f2ee;--muted:#9db0a8;--faint:#6b7d76;
  --card:#121e1b;--card-2:#192824;--edge:#22332e;--blur:none;
  --accent:#2fbf8f;--accent-2:#d9b86e;--on-accent:#04140e;--hero:transparent;--hero-txt:#e9f2ee;--hero-edge:#22332e;
  --head:var(--sans);--head-w:800;--head-ls:-.02em;--head-up:none;
  --r:16px;--shadow:none;--tab:rgba(10,19,17,.92);--logo:none;--chip:#192824;
}
/* 5 · Canlı (frisch, verspielt) */
[data-design="5"]{
  --page:linear-gradient(180deg,#e7f5ee 0%,#f7fbf8 40%);--page-solid:#eef8f2;--txt:#13302a;--muted:#4f6a62;--faint:#8aa39b;
  --card:#fff;--card-2:#e6f4ef;--edge:#d6ebe2;--blur:none;
  --accent:#00a880;--accent-2:#e3b93c;--on-accent:#fff;--hero:linear-gradient(135deg,#005a44 0%,#00a880 70%,#3cc9a2 100%);--hero-txt:#fff;--hero-edge:transparent;
  --head:var(--sans);--head-w:800;--head-ls:-.02em;--head-up:none;
  --r:26px;--shadow:0 10px 30px rgba(0,90,68,.12);--tab:rgba(255,255,255,.95);--logo:none;--chip:#e6f4ef;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--page-solid)}
body{font-family:var(--sans);color:var(--txt);background:var(--page);background-attachment:fixed;min-height:100vh;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:var(--accent)}
[data-design="1"] a{color:var(--accent-2)}
.wrap{max-width:720px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
.splash{min-height:100vh;display:grid;place-items:center}
.spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--edge);border-top-color:var(--accent);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* Kopf */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 0 10px}
.top img{height:22px;width:auto;filter:var(--logo);display:block}
[data-design="2"] .top img,[data-design="5"] .top img{filter:brightness(0) saturate(100%) invert(22%) sepia(18%) saturate(1200%) hue-rotate(85deg) brightness(.9)}
.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--chip);border:1px solid var(--edge)}
.iconbtn svg{width:20px;height:20px}
.hero{border-radius:calc(var(--r) + 6px);padding:20px 20px 18px;background:var(--hero);color:var(--hero-txt);border:1px solid var(--hero-edge);margin-top:4px;position:relative;overflow:hidden}
[data-design="1"] .hero{padding:22px 4px 8px;border:0}
[data-design="3"] .hero{border:0;border-bottom:1px solid var(--hero-edge);border-radius:0;padding:18px 2px 20px}
[data-design="4"] .hero{border:0;padding:18px 2px 8px}
.hello{font-size:14px;opacity:.85;font-weight:600;letter-spacing:.02em}
[data-design="1"] .hello{color:var(--accent);text-transform:uppercase;letter-spacing:.26em;font-size:12px;font-weight:800}
h1,h2,h3{font-family:var(--head);font-weight:var(--head-w);letter-spacing:var(--head-ls)}
h1{font-size:clamp(34px,9vw,46px);line-height:1.05;margin-top:4px;text-transform:var(--head-up)}
h2{font-size:22px;line-height:1.15;text-transform:var(--head-up)}
[data-design="1"] h2{font-size:26px;letter-spacing:.02em}
h3{font-size:17px;font-family:var(--sans);font-weight:700;letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.stat{border-radius:16px;padding:12px 10px;background:rgba(255,255,255,.12);text-align:left;border:1px solid rgba(255,255,255,.14)}
[data-design="1"] .stat{background:var(--card);border-color:var(--edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
[data-design="3"] .stat,[data-design="4"] .stat{background:var(--card);border-color:var(--edge)}
.stat b{display:block;font-size:28px;line-height:1;font-weight:800}
[data-design="1"] .stat b{font-family:var(--head);font-weight:400;color:var(--accent-2);font-size:32px}
[data-design="3"] .stat b{font-family:var(--head);color:var(--accent)}
[data-design="4"] .stat b{color:var(--accent)}
.stat span{font-size:12px;opacity:.8;font-weight:600}

/* Abschnitte & Karten */
.sec{margin-top:26px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.sec-h small{color:var(--muted);font-size:13px;font-weight:600}
.card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.pad{padding:14px 16px}
.list{display:flex;flex-direction:column;gap:10px}
.grouph{display:flex;align-items:center;gap:8px;margin:18px 2px 8px;font-weight:800;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.grouph .n{background:var(--chip);border-radius:999px;padding:1px 9px;font-size:12px;color:var(--txt)}
.grouph:first-child{margin-top:4px}

.task{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:13px 14px;position:relative}
.task .dot{flex:none;width:12px;height:12px;border-radius:50%;margin-top:5px;background:var(--st-none);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-none) 22%,transparent)}
.task .dot.todo{background:var(--st-todo);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-todo) 25%,transparent)}
.task .dot.doing{background:var(--st-doing);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-doing) 25%,transparent)}
.task .dot.done{background:var(--st-done);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-done) 25%,transparent)}
[data-design="5"] .task{border-left:6px solid var(--st-none)}
[data-design="5"] .task.todo{border-left-color:var(--st-todo)}
[data-design="5"] .task.doing{border-left-color:var(--st-doing)}
[data-design="5"] .task.done{border-left-color:var(--st-done)}
.task .t{flex:1;min-width:0}
.task .ttl{font-weight:650;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.task.done .ttl{opacity:.6;text-decoration:line-through;text-decoration-thickness:1px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;padding:3px 9px;border-radius:999px;background:var(--chip);color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill.acc{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--txt)}
.pill.late{background:color-mix(in srgb,var(--late) 18%,transparent);color:var(--late)}
.pill.soon{background:color-mix(in srgb,var(--st-doing) 20%,transparent);color:var(--st-doing)}
.pill.all{background:color-mix(in srgb,var(--accent-2) 26%,transparent);color:var(--txt)}
.chev{flex:none;opacity:.4;margin-top:3px}

.tabs-seg{display:flex;gap:6px;background:var(--chip);padding:4px;border-radius:999px;border:1px solid var(--edge);width:max-content;max-width:100%;overflow-x:auto}
.tabs-seg button{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.tabs-seg button.on{background:var(--accent);color:var(--on-accent)}

.empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:14px}
.empty b{display:block;font-size:30px;margin-bottom:6px}

/* Veranstaltungen */
.ev{display:flex;gap:14px;align-items:center;padding:14px 16px;text-align:left;width:100%}
.ring{flex:none;width:56px;height:56px;position:relative}
.ring svg{width:56px;height:56px;transform:rotate(-90deg)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800}
.ev .t{flex:1;min-width:0}
.ev .sub{font-size:13px;color:var(--muted);margin-top:2px}
.bar{height:6px;border-radius:9px;background:var(--chip);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:9px}
.next{display:flex;align-items:center;gap:14px;padding:16px;margin-top:14px;text-align:left;width:100%}
.next .days{flex:none;width:64px;height:64px;border-radius:18px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;text-align:center;line-height:1}
.next .days b{font-size:24px;display:block;font-weight:800}
[data-design="1"] .next .days b{font-family:var(--head);font-weight:400;font-size:28px}
.next .days small{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

/* Projekte */
.proj{padding:14px 16px;text-align:left;width:100%;display:block}
.proj .row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.role{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;flex:none}
.role.s{background:var(--accent);color:var(--on-accent)}
.role.d{background:var(--chip);color:var(--muted);border:1px solid var(--edge)}
.role.k{background:color-mix(in srgb,var(--accent-2) 30%,transparent);color:var(--txt)}
.avs{display:flex;margin-top:10px}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;border:2px solid var(--page-solid);margin-left:-6px;flex:none}
.avs .av:first-child{margin-left:0}

/* Team */
.mem{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;width:100%}
.mem .av{width:42px;height:42px;font-size:14px;margin:0;border:0}
.mem .t{flex:1;min-width:0}
.mem .nm{font-weight:700}
.mem .sub{font-size:12px;color:var(--muted)}
.load{width:70px;flex:none;text-align:right;font-size:12px;color:var(--muted);font-weight:700}
.load .bar{margin-top:4px}

/* Auswahl Name */
.pick{min-height:100vh;display:flex;flex-direction:column;padding:calc(30px + env(safe-area-inset-top)) 0 40px}
.pick h1{margin-top:22px}
.pick p.lead{color:var(--muted);margin-top:8px;font-size:15px}
.search{display:flex;align-items:center;gap:10px;margin-top:20px;padding:4px 14px;border-radius:999px;background:var(--card);border:1px solid var(--edge);box-shadow:var(--shadow)}
.search input{flex:1;border:0;background:transparent;padding:12px 0;outline:none;font-size:16px}
.search svg{opacity:.5;width:18px;height:18px}
.names{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.names button{display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left;font-weight:650;font-size:14px;line-height:1.2}
.names .av{margin:0;border:0;width:34px;height:34px}

/* Tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--tab);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--edge);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.tabbar .in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;font-weight:700;color:var(--faint);border-radius:14px}
.tabbar button svg{width:23px;height:23px}
.tabbar button.on{color:var(--accent)}
[data-design="1"] .tabbar button.on{color:var(--accent-2)}

/* Bottom sheet */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.45);animation:fd .2s}
.sheet[hidden]{display:none}
.sheet .box{width:100%;max-width:720px;max-height:88vh;overflow:auto;background:var(--page-solid);color:var(--txt);border-radius:26px 26px 0 0;padding:10px 18px calc(24px + env(safe-area-inset-bottom));animation:up .25s cubic-bezier(.2,.8,.2,1);border:1px solid var(--edge)}
[data-design="1"] .sheet .box{background:#103435}
.grab{width:44px;height:5px;border-radius:9px;background:var(--edge);margin:4px auto 14px}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@keyframes fd{from{opacity:0}}
.kv{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;margin-top:14px;font-size:14px}
.kv dt{color:var(--muted);font-weight:650}
.kv dd{white-space:pre-wrap;word-break:break-word}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:15px;text-decoration:none}
.btn.ghost{background:var(--chip);color:var(--txt);border:1px solid var(--edge)}
a.btn{color:var(--on-accent)}
a.btn.ghost{color:var(--txt)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.designs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.designs button{border-radius:14px;height:54px;border:2px solid var(--edge);font-size:11px;font-weight:800;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.designs button.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.note{font-size:13px;color:var(--muted);margin-top:6px}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.foot{margin-top:30px;text-align:center;font-size:12px;color:var(--faint)}
.install{display:flex;gap:12px;align-items:center;padding:12px 14px;margin-top:14px}
.install .t{flex:1;font-size:13px}
.install b{font-size:14px}
.skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--muted);font-size:14px;padding:6px 0}
.fade{animation:fd .25s}
@media (min-width:640px){.names{grid-template-columns:1fr 1fr 1fr}}