/* pitcoach.app – gemeinsame Grundlage (Farben wie in der App, docs/design/design-vorgaben.md im Repository pitcoach).
   Schriften lokal unter /fonts (SIL OFL 1.1, Lizenztexte unter /lizenzen): Barlow für Text, Barlow Condensed für Überschriften.
   Keine Skripte: alles hier ist reines CSS (CSP: style-src 'self', script-src 'none'). */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira Stencil One"; font-weight: 400; font-display: swap; src: url("/fonts/saira-stencil-one-latin-400-normal.woff2") format("woff2"); }

:root {
  --grund: #14171A; --karte: #191D20; --flaeche: #1F2429; --leiste: #0E1012;
  --text: #F2F4F5; --text2: #CED5DA; --text3: #B4BDC4; --linie: #3A434A; --marke: #333B42;
  --akzent: #72F23E; --akzent-dunkel: #5CC232; --auf-akzent: #14171A;
  --gut: #3DDC84; --mittel: #FFC933; --schlecht: #FF6B61;
  --schrift: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --stencil: "Saira Stencil One", "Barlow Condensed", sans-serif;
  --breite: 1120px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 18px/1.6 var(--schrift); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--akzent); }
a:focus-visible, .knopf:focus-visible { outline: 3px solid var(--mittel); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; }
p { margin: 0 0 1em; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 12px; top: 12px; background: var(--akzent); color: var(--auf-akzent); padding: 8px 14px; border-radius: 8px; z-index: 50; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--leiste) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; gap: 24px; height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 400 22px/1 var(--stencil); letter-spacing: .02em; }
.marke img { width: 40px; height: 40px; border-radius: 10px; }
.marke b { color: var(--akzent); font-weight: 400; }
.navi { display: flex; gap: 22px; margin-left: auto; }
.navi a { color: var(--text2); text-decoration: none; font-weight: 500; font-size: 16px; }
.navi a:hover { color: var(--text); }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 12px; background: var(--akzent); color: var(--auf-akzent); text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.knopf:hover { background: var(--akzent-dunkel); }
.knopf.klein { min-height: 40px; padding: 8px 16px; font-size: 16px; }
.knopf.zweit { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--linie); }
.knopf.zweit:hover { box-shadow: inset 0 0 0 2px var(--text3); background: transparent; }
@media (max-width: 900px) { .navi { display: none; } .kopf .knopf { margin-left: auto; } }

/* Fuß */
.fuss { background: var(--leiste); border-top: 1px solid var(--linie); padding: 48px 0 28px; margin-top: 0; color: var(--text2); font-size: 16px; }
.fuss-raster { display: grid; gap: 32px; grid-template-columns: 1.6fr 1fr 1fr; }
.fuss-titel { margin: 0 0 10px; font: 700 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss a { color: var(--text2); }
.fuss-unten { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--text3); }
.fuss .klein-text { font-size: 14px; color: var(--text3); max-width: 46ch; }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr; } }

/* Rechtstexte und 404 */
.text { padding: 56px 20px 80px; max-width: 760px; }
.text h1 { font-size: clamp(34px, 9vw, 52px); margin-bottom: 24px; overflow-wrap: anywhere; }
.text h2 { font-size: 28px; margin: 36px 0 8px; }
.entwurf { border: 2px dashed var(--mittel); color: var(--mittel); padding: 10px 14px; border-radius: 10px; font-size: 15px; margin-bottom: 24px; }