/* Hauptseite - gleiche Gestaltung wie der pnpHub (Wuerfelharz): neutrale Flaechen, Farbe pro Eintrag. Keine externen Ressourcen. */
:root {
  color-scheme: light dark;
  --bg: #f6f5f2; --panel: #ffffff; --ink: #1b1b1f; --muted: #6d6d75; --line: #e3e1db; --soft: #ecebe6;
  --focus: #2f6fe0;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c: #5b6577; --c-bg: #e6e8ee; --c-ink: #3b4457;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151519; --panel: #1f1f25; --ink: #f3f2ee; --muted: #a2a2ab; --line: #30303a; --soft: #26262e; --focus: #8fb3f5; }
}
.c-teal   { --c: #0f8b8d; --c-bg: #d8f0f0; --c-ink: #0b6e70; }
.c-violet { --c: #6b4de6; --c-bg: #e6e0fb; --c-ink: #4a32b8; }
.c-coral  { --c: #ff5a4e; --c-bg: #ffe1de; --c-ink: #b3281e; }
.c-amber  { --c: #f2a900; --c-bg: #fdf0cc; --c-ink: #7a5500; }
.c-green  { --c: #2e9e5b; --c-bg: #dcf2e4; --c-ink: #1d6b3c; }
.c-blue   { --c: #2f6fe0; --c-bg: #dce8fb; --c-ink: #1c4aa6; }
.c-pink   { --c: #d6409f; --c-bg: #fbdff0; --c-ink: #9a1f72; }
.c-slate  { --c: #5b6577; --c-bg: #e6e8ee; --c-ink: #3b4457; }
@media (prefers-color-scheme: dark) {
  .c-teal   { --c: #26b3b5; --c-bg: #12393a; --c-ink: #7fd8da; }
  .c-violet { --c: #8a73f0; --c-bg: #2a2352; --c-ink: #b9a9ff; }
  .c-coral  { --c: #ff6f63; --c-bg: #4a2220; --c-ink: #ff9a92; }
  .c-amber  { --c: #f2b52a; --c-bg: #46350a; --c-ink: #f6cd62; }
  .c-green  { --c: #3fb870; --c-bg: #17402a; --c-ink: #7fd6a2; }
  .c-blue   { --c: #5b8cf0; --c-bg: #1a2f57; --c-ink: #8fb3f5; }
  .c-pink   { --c: #e65cb4; --c-bg: #4a1f3d; --c-ink: #f09bd0; }
  .c-slate  { --c: #8b95a8; --c-bg: #2a2f3a; --c-ink: #aab3c5; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
a { color: var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.top { padding: 44px 0 8px; }
.top-inner { display: flex; align-items: center; gap: 20px; }
.logo { flex: none; }
.top h1 { margin: 0; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.byline { margin: 8px 0 0; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #b3281e; font-weight: 700; }
@media (prefers-color-scheme: dark) { .byline { color: #ff9a92; } }
.lead { max-width: 56ch; margin: 18px 0 0; font-size: 1.1rem; color: var(--muted); }

.group { margin: 36px 0 0; }
.group h2 { margin: 0 0 14px; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 14px;
        transition: transform .15s, border-color .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 24px -14px var(--c); }
.card a { display: flex; align-items: center; gap: 16px; padding: 16px 18px; height: 100%; color: inherit; text-decoration: none; }
.icon { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--c-bg); color: var(--c-ink);
        display: grid; place-items: center; overflow: hidden; }
.icon img { width: 40px; height: 40px; }
.icon svg { width: 30px; height: 30px; fill: currentColor; }
.text { min-width: 0; }
.card h3 { margin: 0; font-size: 1.2rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.card h3 .ext { color: var(--muted); font-weight: 600; font-size: .9em; }
.card p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.host { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); }

.about { margin: 44px 0 0; max-width: 62ch; }
.about h2 { margin: 0 0 10px; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.about p { margin: 0; color: var(--muted); }
.foot { margin-top: 56px; border-top: 1px solid var(--line); padding: 22px 0; color: var(--muted); font-size: .88rem; }
.foot p { margin: 4px 0; }

/* Rechtstexte */
.legal { max-width: 720px; margin: 0 auto; padding: 32px 16px 56px; }
.legal h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.legal h2 { font-size: 1.25rem; font-weight: 800; margin-top: 1.8em; }
.legal .box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.legal .muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }