:root{
  color-scheme: dark;
  --bg:#070B14; --bg-2:#0A101D; --panel:#0E1524; --panel-2:#121B2E;
  --line:#1B2640; --line-2:#24324F;
  --ink:#E8EEF8; --ink-2:#A3B2CB; --ink-3:#66758F;
  --accent:#5B7CFF; --cyan:#2BD4C4;
  --live:#3DE38A; --proto:#F5A524; --plan:#5D6B85;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.45;
  -webkit-font-smoothing:antialiased; padding:0 16px 56px; position:relative; overflow-x:hidden}
body::before{content:""; position:fixed; inset:-30% -10% auto -10%; height:70vh; z-index:-2; pointer-events:none;
  background:radial-gradient(60% 60% at 30% 20%, rgba(91,124,255,.16), transparent 70%),
             radial-gradient(45% 50% at 80% 10%, rgba(43,212,196,.10), transparent 70%)}
.bg-grid{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(91,124,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(91,124,255,.06) 1px, transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(180deg, #000 0%, transparent 75%)}
.wrap{max-width:1080px; margin:0 auto}
.wrap.narrow{max-width:640px}
a{color:inherit}
svg{display:block}

/* Kopf */
.top{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:18px 0 16px;
  background:linear-gradient(180deg, var(--bg) 60%, rgba(7,11,20,0)); }
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.logo{width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--accent), #3A56E8); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 22px -6px rgba(91,124,255,.7)}
.logo svg{width:21px; height:21px}
.wm{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:21px; letter-spacing:-.01em}
.beta{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; color:var(--cyan);
  border:1px solid rgba(43,212,196,.4); border-radius:6px; padding:2px 6px}
.spacer{flex:1}
.count{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}
.count b{color:var(--ink-2); font-weight:500}
.install{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:10px; cursor:pointer;
  font:600 13px "IBM Plex Sans",sans-serif; color:#fff; border:1px solid rgba(91,124,255,.6);
  background:linear-gradient(180deg, rgba(91,124,255,.35), rgba(91,124,255,.18)); transition:.15s}
.install:hover{background:rgba(91,124,255,.45); box-shadow:0 0 22px -4px rgba(91,124,255,.8)}
.install svg{width:17px; height:17px}
.install[hidden]{display:none}

/* Abschnitte */
.cat,.favs{margin:8px 0 30px}
.cat h2,.favs h2{display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.bar{width:16px; height:3px; border-radius:2px; background:var(--c, var(--accent)); box-shadow:0 0 10px var(--c, var(--accent))}
.favs{--c:#F5D547}
.favhint{margin:-6px 0 26px; font-size:13px; color:var(--ink-3)}
.favhint[hidden]{display:none}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:12px}

/* Kachel */
.tile{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px;
  min-height:142px; padding:26px 12px 16px; text-decoration:none; border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line);
  transition:transform .15s, border-color .15s, box-shadow .15s; isolation:isolate}
.tile::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; opacity:0; transition:opacity .2s;
  background:radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%)}
.tile:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow:0 14px 34px -14px color-mix(in srgb, var(--c) 70%, transparent)}
.tile:hover::after{opacity:1}
.tile:focus-visible{outline:2px solid var(--c); outline-offset:2px}
.ic{width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--c);
  background:color-mix(in srgb, var(--c) 13%, transparent); border:1px solid color-mix(in srgb, var(--c) 28%, transparent)}
.ic svg{width:27px; height:27px}
.nm{font-weight:600; font-size:13.5px; text-align:center; line-height:1.25; color:var(--ink)}
.tile.s-plan .ic{filter:saturate(.55); opacity:.78}
.tile.s-plan .nm{color:var(--ink-2)}
.sdot{position:absolute; top:12px; left:12px; width:7px; height:7px; border-radius:50%; background:var(--plan)}
.s-live .sdot{background:var(--live); box-shadow:0 0 10px var(--live)}
.s-proto .sdot{background:var(--proto)}
.live{position:absolute; bottom:10px; font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em; color:var(--live); opacity:.9}
.tile.s-live{border-color:color-mix(in srgb, var(--c) 45%, var(--line))}

/* Stern */
.star{position:absolute; top:7px; right:7px; width:30px; height:30px; border-radius:9px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:transparent; color:var(--ink-3); transition:.15s}
.star svg{width:17px; height:17px}
.star:hover{color:#F5D547; background:rgba(245,213,71,.10)}
.star[aria-pressed="true"]{color:#F5D547}
.star[aria-pressed="true"] svg{fill:#F5D547}
.star.big{position:static; width:40px; height:40px; border:1px solid var(--line); background:var(--panel)}
.star.big svg{width:20px; height:20px}

/* Werkzeug-Seite */
.back{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:14px;
  padding:8px 12px 8px 8px; border-radius:10px; border:1px solid var(--line); background:var(--panel)}
.back:hover{color:var(--ink); border-color:var(--line-2)}
.back svg{width:18px; height:18px}
.hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 0 10px}
.ic.xl{width:88px; height:88px; border-radius:24px; box-shadow:0 18px 50px -18px var(--c)}
.ic.xl svg{width:46px; height:46px}
.hero h1{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:30px; letter-spacing:-.01em; margin:20px 0 10px}
.chip{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2)}
.chip i{width:7px; height:7px; border-radius:50%; background:var(--plan)}
.chip.s-live i{background:var(--live); box-shadow:0 0 8px var(--live)}
.chip.s-proto i{background:var(--proto)}
.desc{color:var(--ink-2); font-size:16px; margin:18px 0 22px; max-width:46ch}
.panel{width:100%; text-align:left; background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px}
.panel .pl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; color:var(--cyan)}
.panel p{margin:6px 0 0; color:var(--ink-2)}
.cat-of{display:flex; align-items:center; gap:10px; margin:22px 0 0; font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.foot{margin-top:30px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

@media (max-width:520px){
  .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .tile{min-height:132px; padding:24px 8px 14px}
  .count{display:none}
  .wm{font-size:19px}
}
@media (prefers-reduced-motion:reduce){ .tile,.tile::after,.install,.star{transition:none} .tile:hover{transform:none} }