/* Startseite sprechfunktrainer.de — dieselbe Anmutung wie die App (ui/app.py, THEME):
   dunkles Gehäuse, ein Akzent in Phosphor-Bernstein. Keine fremden Schriften, keine
   Skripte: Die Seite lädt nichts von Dritten. */
:root {
  --grund: #0B0F14; --flaeche: #121A22; --rand: #26323F;
  --text: #C9D4DE; --leise: #7E8FA0; --akzent: #FFB000; --akzent-dunkel: #1A1200;
}
@media (prefers-color-scheme: light) {
  :root { --grund: #F4F1EA; --flaeche: #FFFFFF; --rand: #D6CFC2;
          --text: #1C232B; --leise: #5A6672; --akzent: #9A6400; --akzent-dunkel: #FFFFFF; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main, header, footer { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
header { padding-top: 3rem; }
.kennung { font: 600 0.8rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
           letter-spacing: 0.18em; color: var(--akzent); text-transform: uppercase; }
h1 { font-size: 2.2rem; line-height: 1.15; margin: 0.6rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 2.2rem 0 0.6rem; }
p, li { color: var(--text); }
.leise { color: var(--leise); }
a { color: var(--akzent); }
.knopf {
  display: inline-block; margin: 1.2rem 0 0.4rem; padding: 0.8rem 1.4rem;
  background: var(--akzent); color: var(--akzent-dunkel); border-radius: 6px;
  font-weight: 700; text-decoration: none;
}
.knopf:focus-visible, a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
          gap: 0.8rem; margin-top: 1rem; }
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px;
          padding: 0.9rem 1rem; }
.kachel strong { display: block; margin-bottom: 0.2rem; }
.kachel span { color: var(--leise); font-size: 0.95rem; }
footer { margin-top: 3rem; padding-bottom: 2rem; border-top: 1px solid var(--rand);
         padding-top: 1rem; font-size: 0.9rem; color: var(--leise); }
footer a { margin-right: 1.2rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; }
dt { color: var(--leise); }