@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700;800&display=swap');

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --bg:#f4f5f7;
  --surface:#ffffff;
  --surface-2:#eceef1;
  --ink:#15171b;
  --muted:#666c76;
  --line:#e2e4e8;
  --accent:#2b5fff;
  --accent-ink:#ffffff;

  --chip-eigene-bg:#e8f0ff; --chip-eigene-fg:#1d4ed8;
  --chip-kunden-bg:#eef0f3; --chip-kunden-fg:#4a5058;

  --tag-web-bg:#e8f0ff; --tag-web-fg:#1d4ed8;
  --tag-immo-bg:#eaf6ec; --tag-immo-fg:#1e7a34;
  --tag-marketing-bg:#fff2e0; --tag-marketing-fg:#b5590a;
  --tag-kreativ-bg:#f5eaff; --tag-kreativ-fg:#7626c9;
  --tag-app-bg:#e6f7f9; --tag-app-fg:#0f7d8c;
  --tag-beratung-bg:#fdeaf1; --tag-beratung-fg:#b3145a;
  --tag-tool-bg:#fff7d6; --tag-tool-fg:#8a6d00;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101216;
    --surface:#191c22;
    --surface-2:#20242b;
    --ink:#eef0f3;
    --muted:#9aa1ac;
    --line:#2a2e36;
    --accent:#6e8fff;
    --accent-ink:#0c1020;

    --chip-eigene-bg:#1c2b57; --chip-eigene-fg:#a9bdff;
    --chip-kunden-bg:#262a31; --chip-kunden-fg:#c3c8d1;

    --tag-web-bg:#1c2b57; --tag-web-fg:#a9bdff;
    --tag-immo-bg:#173322; --tag-immo-fg:#7fd89a;
    --tag-marketing-bg:#402907; --tag-marketing-fg:#f0b366;
    --tag-kreativ-bg:#2f1c47; --tag-kreativ-fg:#d3aeff;
    --tag-app-bg:#0f2f34; --tag-app-fg:#7fd9e3;
    --tag-beratung-bg:#3a0f22; --tag-beratung-fg:#f295bd;
    --tag-tool-bg:#3a2f00; --tag-tool-fg:#f0d666;
  }
}
:root[data-theme="dark"]{
  --bg:#101216;
  --surface:#191c22;
  --surface-2:#20242b;
  --ink:#eef0f3;
  --muted:#9aa1ac;
  --line:#2a2e36;
  --accent:#6e8fff;
  --accent-ink:#0c1020;

  --chip-eigene-bg:#1c2b57; --chip-eigene-fg:#a9bdff;
  --chip-kunden-bg:#262a31; --chip-kunden-fg:#c3c8d1;

  --tag-web-bg:#1c2b57; --tag-web-fg:#a9bdff;
  --tag-immo-bg:#173322; --tag-immo-fg:#7fd89a;
  --tag-marketing-bg:#402907; --tag-marketing-fg:#f0b366;
  --tag-kreativ-bg:#2f1c47; --tag-kreativ-fg:#d3aeff;
  --tag-app-bg:#0f2f34; --tag-app-fg:#7fd9e3;
  --tag-beratung-bg:#3a0f22; --tag-beratung-fg:#f295bd;
  --tag-tool-bg:#3a2f00; --tag-tool-fg:#f0d666;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Roboto Flex', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;}
[hidden]{display:none!important;}

.wrap{max-width:960px; margin:0 auto; padding-inline:16px;}

header.top{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top: calc(14px + var(--safe-top));
  padding-bottom: 10px;
}
header.top h1{
  font-family:'JetBrains Mono', 'Roboto Flex', monospace;
  font-size:37px; font-weight:500; letter-spacing:-0.005em; line-height:1.2;
  margin:0 0 12px;
  display:inline-block;
  background:var(--chip-eigene-bg); color:var(--ink);
  padding:18px 24px;
  border-radius:16px;
}
@media (min-width:640px){ header.top h1{font-size:44px;} }
header.top p{margin:0; color:var(--muted); font-size:15px; line-height:1.4;}

.search{
  margin-top:16px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 16px;
}
.search svg{flex-shrink:0; opacity:.55; width:19px; height:19px;}
.search input{border:0; outline:0; background:transparent; color:var(--ink); font-family:inherit; font-size:16.5px; width:100%;}
.search input::placeholder{color:var(--muted);}

.segmented{
  margin-top:14px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--surface-2); border-radius:14px; padding:4px; gap:4px;
  overflow-x:auto;
}
.segmented button{
  appearance:none; border:0; background:transparent; color:var(--muted);
  font-family:inherit; font-size:15.5px; font-weight:700;
  padding:12px 10px; border-radius:11px; cursor:pointer; white-space:nowrap;
}
.segmented button.active{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08);}

.filters{margin-top:14px; display:flex; gap:9px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.filter-btn{
  flex-shrink:0; border:1px solid var(--line); background:var(--surface); color:var(--muted);
  font-family:inherit; font-size:15px; font-weight:700;
  padding:9px 16px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-btn:hover{border-color:var(--accent); color:var(--accent);}
.filter-btn.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.filter-btn:focus-visible, .card:focus-visible, .search input:focus-visible, .segmented button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

main{padding-top:16px; padding-bottom: calc(40px + var(--safe-bottom));}

.count{color:var(--muted); font-size:14.5px; margin:4px 0 14px;}

.grid{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr;} }

.card{display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px;}
.card-row{display:flex; align-items:flex-start; gap:14px;}
.badge{flex-shrink:0; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; letter-spacing:-0.02em; background:var(--surface-2); color:var(--ink);}
.card-body{min-width:0; flex:1;}
.card-top-line{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.card-name{font-size:19px; font-weight:700; line-height:1.3;}
.card-url{font-size:14.5px; color:var(--accent); font-weight:600; word-break:break-all; margin-top:2px;}
.card-desc{font-size:15px; color:var(--muted); margin-top:6px; line-height:1.45;}

.tag{flex-shrink:0; font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:4px 11px; border-radius:999px; white-space:nowrap;}
.tag-eigene{background:var(--chip-eigene-bg); color:var(--chip-eigene-fg);}
.tag-kunden{background:var(--chip-kunden-bg); color:var(--chip-kunden-fg);}
.tag-web{background:var(--tag-web-bg); color:var(--tag-web-fg);}
.tag-immo{background:var(--tag-immo-bg); color:var(--tag-immo-fg);}
.tag-marketing{background:var(--tag-marketing-bg); color:var(--tag-marketing-fg);}
.tag-kreativ{background:var(--tag-kreativ-bg); color:var(--tag-kreativ-fg);}
.tag-app{background:var(--tag-app-bg); color:var(--tag-app-fg);}
.tag-beratung{background:var(--tag-beratung-bg); color:var(--tag-beratung-fg);}
.tag-tool{background:var(--tag-tool-bg); color:var(--tag-tool-fg);}

.proj-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; gap:10px;}
.proj-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.proj-id{font-size:12.5px; color:var(--muted); font-weight:700; letter-spacing:.06em;}
.proj-name{font-size:19px; font-weight:700; line-height:1.3; margin-top:3px;}
.proj-name a{color:inherit; text-decoration:none;}
.proj-name a:hover{color:var(--accent);}
.open-btn{display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--accent); text-decoration:none;}
.open-btn:hover{text-decoration:underline;}
details.sub{border-top:1px solid var(--line); padding-top:10px;}
details.sub summary{cursor:pointer; font-size:14px; font-weight:700; color:var(--muted); letter-spacing:.03em; list-style:none; display:flex; align-items:center; gap:6px;}
details.sub summary::-webkit-details-marker{display:none;}
details.sub summary::before{content:"▸"; font-size:12px; transition:transform .15s ease;}
details.sub[open] summary::before{transform:rotate(90deg);}
.sublist{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.sublist a{font-size:14px; color:var(--ink); text-decoration:none; background:var(--surface-2); border:1px solid var(--line); padding:6px 12px; border-radius:9px; line-height:1.3;}
.sublist a:hover{border-color:var(--accent); color:var(--accent);}

.empty{text-align:center; color:var(--muted); font-size:15px; padding:40px 20px;}

.placeholder-card{border:1px dashed var(--line); border-radius:16px; padding:20px 18px; color:var(--muted); font-size:15px; line-height:1.55; background:transparent;}
.placeholder-card strong{color:var(--ink);}

.install-note{margin-top:24px; padding:16px 18px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); font-size:14.5px; line-height:1.6;}
.install-note strong{color:var(--ink);}

footer.foot{padding:0 16px calc(30px + var(--safe-bottom)); color:var(--muted); font-size:13px; text-align:center;}