/* G986-Marke wie in der App (02.11.2026): Schriftzug = components/marke/Schriftzug.tsx (SPORTS in Textfarbe + HUB in Lime,
   hell `limeText`, dunkel `lime`, Chakra Petch Bold), Zeichen = components/marke/SHZeichen.tsx (Schnitt 24 %, Rand 4,5 %,
   Verlauf lime→cyan, hell limeText→cyanText). Echter Text/SVG statt Bild — scharf auf jedem Bildschirm. */
/* Schrift der Marke für alle Seiten (Startseite, Impressum, Platzhalter, Antwortseiten) — vorher in seite.css */
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("/l/chakra-petch-700.ttf") format("truetype"); }
/* MATCHIRO (Stefan 08.11.2026, Logo A3): Schriftzug in Saira Bold Italic (SIL OFL, l/OFL-saira.txt), Zeichen = dunkles Feld mit grünem
   Rahmen und »M« (sporthub-app/assets/brand/matchiro-zeichen.svg, erzeugt von scripts/marke/logo_svg.py). */
@font-face { font-family: "Saira"; font-style: normal; font-weight: 600; font-display: swap; src: url("/l/saira-600.ttf") format("truetype"); }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 700; font-display: swap; src: url("/l/saira-700.ttf") format("truetype"); }
@font-face { font-family: "Saira"; font-style: italic; font-weight: 700; font-display: swap; src: url("/l/saira-700i.ttf") format("truetype"); }
:root { --marke-gruen: #1c8f35; --zeichen-gruen: #4ee06a; --hub: #1c8f35; --zeichen-von: #25d366; --zeichen-bis: #25d366; --zeichen-grund: #ffffff; --glas-kopf: rgba(255,255,255,0.80); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) { --marke-gruen: #4ee06a; --hub: #4ee06a; --zeichen-von: #25d366; --zeichen-bis: #25d366; --zeichen-grund: #05060e; --glas-kopf: rgba(12,16,32,0.74); }
}
/* gewählt: dunkel (Profil der Seite, sprache.js) */
:root[data-thema="dunkel"] { --marke-gruen: #4ee06a; --hub: #4ee06a; --zeichen-von: #25d366; --zeichen-bis: #25d366; --zeichen-grund: #05060e; --glas-kopf: rgba(12,16,32,0.74); }
.schriftzug { font-family: "Saira", "Chakra Petch", system-ui, sans-serif; font-style: italic; font-weight: 700; letter-spacing: 0.03em; line-height: 1;
              font-size: 26px; color: var(--text); white-space: nowrap; }
.schriftzug b { color: var(--hub); font-weight: 700; }
.sh-zeichen { width: 40px; height: 40px; flex-shrink: 0; display: block; }
/* Zeichen in beiden Themen gleich (wie das App-Icon): dunkles Feld, grüner Rahmen, weißes »M«, grüner Fuß */
.sh-zeichen .rahmen, .sh-marke .rahmen { fill: #0a0f14; stroke: var(--zeichen-gruen); }
.sh-zeichen .m, .sh-marke .m { fill: #ffffff; }
.sh-zeichen .fuss, .sh-marke .fuss { fill: var(--zeichen-gruen); }

/* Kopf (Stefan 04.11.): Logo und Sprachwahl auf getöntem Glas — der Sportplatz dahinter verschwimmt, das Logo bleibt lesbar.
   EINE Regel für beide Kopf-Elemente (Startseite, Impressum). */
.heim, .sprachwahl summary { background: var(--glas-kopf); border: 1px solid var(--glas-rand); box-shadow: 0 6px 24px rgba(15,26,18,0.10);
                              backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.heim { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 16px; text-decoration: none; }

/* Sprachwahl oben rechts (wie LanguagePicker in der App: Liste der sechs Sprachen, eigene Wahl wird gemerkt) */
.sprachwahl { margin-left: auto; position: relative; }
.sprachwahl summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 11px;
                      border-radius: 999px; color: var(--text); font: 600 13px/1 -apple-system, system-ui, sans-serif; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sprachwahl ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; list-style: none; margin: 0; padding: 6px; min-width: 160px;
                 background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--schatten); }
.sprachwahl a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 15px; }
.sprachwahl a:hover { background: var(--surface-alt); }
.sprachwahl a[aria-current] { color: var(--marke-text); font-weight: 700; }   /* hell #2f7d12 (Kontrast), dunkel Lime */