/* Übersicht — dieselben Tokens wie die Apps (app/styles.css), nur so viel
   davon, wie eine Startseite braucht. Kein Umschalter für den Tageslicht-
   Modus: Diese Seite wird angetippt und verlassen, sie folgt einfach der
   Einstellung des Geräts. */
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/hanken-grotesk-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;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('fonts/space-grotesk-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;
}

:root{
  --surface-app:#0a0c10;
  --surface-card:#13161d;
  --surface-tile:#191c23;
  --border-subtle:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.14);
  --text-primary:#f7f8fa;
  --text-secondary:#dfe2e8;
  --text-muted:#9097a3;
  --text-muted-2:#838a96;

  /* Akzente wie in den Apps; die -hc-Fassungen sind die dunkleren Töne für
     helle Flächen — heller Bernstein auf Weiß hat nur 1,7:1. */
  --azure:#5BA8F0;   --azure-hc:#1a5c9c;
  --emerald:#5BD6A0; --emerald-hc:#0f7a4f;
  --amber:#E9B44C;   --amber-hc:#8a5a00;
  --violet:#B69BF2;  --violet-hc:#5b3cae;

  --font-ui:'Hanken Grotesk', system-ui, sans-serif;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --radius-tile:18px;
  --focus-ring:0 0 0 3px rgba(91,168,240,.55);
  color-scheme:dark;
}

@media (prefers-color-scheme:light){
  :root{
    --surface-app:#ffffff;
    --surface-card:#ffffff;
    --surface-tile:#f1f3f6;
    --border-subtle:rgba(0,0,0,.14);
    --border-strong:rgba(0,0,0,.42);
    --text-primary:#0b0d11;
    --text-secondary:#1b1f26;
    --text-muted:#535b66;
    --text-muted-2:#666e79;
    color-scheme:light;
  }
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--surface-app);
  color:var(--text-primary);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-tile)}

.wrap{
  max-width:34rem;
  margin:0 auto;
  padding:2.5rem 1rem calc(env(safe-area-inset-bottom,0px) + 2.5rem);
  display:flex;flex-direction:column;gap:1.5rem;
}

.head{display:flex;flex-direction:column;gap:.375rem}
.eyebrow{
  margin:0;font:600 .688rem/1 var(--font-ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);
}
h1{margin:0;font:600 2rem/1.15 var(--font-display);letter-spacing:-.01em}
.lede{margin:.25rem 0 0;font:400 .938rem/1.55 var(--font-ui);color:var(--text-muted);max-width:28rem}

.grid{display:flex;flex-direction:column;gap:.625rem}

.tile{
  display:flex;align-items:center;gap:.875rem;
  min-height:5rem;padding:1rem;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-tile);
  text-decoration:none;
  /* --tile setzt die Kachel selbst (inline im HTML); --tile-ink muss deshalb
     hier stehen und nicht auf :root, wo --tile noch gar nicht existiert. */
  --tile-ink:var(--tile);
  transition:border-color .18s ease, transform .12s ease;
}
.tile:hover{border-color:var(--tile-ink)}
.tile:active{transform:scale(.99)}

/* Das Symbol trägt die Farbe der App — Zustand wird hier nichts, es ist
   Wiedererkennung. */
.icon{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:14px;
  background:var(--surface-tile);
  color:var(--tile-ink);
  border:1px solid var(--border-subtle);
}
.icon svg{width:1.625rem;height:1.625rem}

.txt{display:flex;flex-direction:column;gap:.188rem;min-width:0;flex:1}
.name{font:600 1.125rem/1.25 var(--font-display);color:var(--text-primary)}
.desc{font:400 .875rem/1.4 var(--font-ui);color:var(--text-secondary)}
.path{font:500 .75rem/1.3 var(--font-display);color:var(--text-muted)}
.chevron{flex:none;font:400 1.5rem/1 var(--font-ui);color:var(--text-muted-2)}

.aside{
  margin:0;font:400 .875rem/1.55 var(--font-ui);color:var(--text-muted);
}
/* Links im Fließtext brauchen ein zweites Merkmal neben der Farbe. */
.aside a,.foot a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:.2em}

.foot{
  margin:0;padding-top:1.25rem;border-top:1px solid var(--border-subtle);
  font:400 .75rem/1.6 var(--font-ui);color:var(--text-muted-2);
}

@media (prefers-color-scheme:light){
  /* Heller Untergrund braucht die dunkleren Töne: helles Bernstein auf Weiß
     ist nicht zu erkennen. */
  .tile{--tile-ink:var(--tile-hc)}
}

@media (min-width:560px){
  .wrap{padding-top:4rem}
  h1{font-size:2.25rem}
}