/* ============================================================
   Schach-Arena · Navigation: Reiter-Pille, Kopf der Hauptseiten (Premium-Umbau, Look A)
   Angelegt von U1 (leer), gefuellt von Paket U2 (PLAN 2.1, Flo D2 und D5).
   Nur Tokens benutzen (css/tokens.css, css/themes/<id>.css), keine festen Farben.
   Struktur: js/ui/seite.js (header.kopf.haupt-kopf), js/app.js (nav.reiter-leiste, html[data-reiter]).
   Die Selektoren beginnen mit .screen, wo alte Regeln aus app.css/screens.css
   (z. B. .arena .kopf, .vl-screen .kopf) sonst gewinnen wuerden.
   ============================================================ */

/* ---------- Kopf der Hauptseiten ---------- */
.screen .kopf.haupt-kopf {
  height: auto; min-height: var(--kopf-hoehe); padding: 18px var(--rand) 0; gap: 12px;
  display: flex; align-items: center; flex: none;
}
.haupt-kopf .kopf-links { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.haupt-kopf .rechts { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
/* der Platz fuer Reiter im Kopf bleibt leer (die Leiste sitzt unten oder links, Etappe A) */
.haupt-kopf .kopf-reiter-platz { flex: none; display: flex; justify-content: center; }
.haupt-kopf .kopf-reiter-platz:empty { display: none; }

/* Marke: Bauer auf Tinte, Titel (nie gekuerzt, bricht nicht um), Unterzeile */
.haupt-kopf .marke { display: flex; align-items: center; gap: 12px; }
.haupt-kopf .marke-zeichen { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--tinte); color: var(--auf-tinte); box-shadow: var(--s1); }
.haupt-kopf .marke-zeichen .ico { width: 26px; height: 26px; }
.haupt-kopf .marke-text { min-width: 0; }
.screen .haupt-kopf .marke-titel { margin: 0; font-family: var(--display); font-weight: var(--gw-titel); font-size: 23px; letter-spacing: var(--lw-titel);
  line-height: 1.05; color: var(--text); white-space: nowrap; overflow: visible; text-overflow: clip; text-transform: none; }
.screen .haupt-kopf .unter { margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2);
  white-space: normal; overflow: visible; text-overflow: clip; max-width: 34ch; }

/* Rechte Seite: Chips (Ort arena:kopf haengt weitere an; werden es zu viele, scrollen sie waagrecht, nie Umbruch), Knoepfe */
.screen .haupt-kopf .kopf-chips { flex: 0 1 auto; min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 8px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 3px 2px; }
.screen .haupt-kopf .kopf-chips::-webkit-scrollbar { display: none; }
/* ohne Chips kein sichtbarer Kasten (Handy: er sah aus wie eine kleine "0" vor den Knoepfen); er bleibt als Abstandhalter */
.screen .haupt-kopf .kopf-chips:empty { padding: 0; visibility: hidden; }
/* passt nicht einmal der erste Chip, blendet js/ui/seite.js die Chips aus (kein abgeschnittener Stummel) */
.screen .haupt-kopf.ohne-chips .kopf-chips { display: none; }
.screen .haupt-kopf .kopf-chips > .passt-nicht { display: none; }
.haupt-kopf.ohne-chips .rechts > .kopf-knopf:first-of-type { margin-left: auto; }
.screen .haupt-kopf .kopf-chips > * { flex: none; }
/* Zahlenruhe (SPIELKONZEPT 3.1, Flo 23.10.: "Sterne, Level, Serie"): bringt ein Paket einen eigenen Chip (Level, Serie),
   tritt "Besiegt" zurueck; es steht auf der Weltkarte und in der Liga-Karte. Ohne Pakete bleiben Sterne und Besiegt */
.screen .haupt-kopf .kopf-chips:has(> :nth-child(3)) > .chip-pokal { display: none; }
.screen .haupt-kopf .chip { height: 40px; padding: 0 14px; gap: 7px; font-size: 14.5px; font-weight: var(--gw-stark); border: 0;
  box-shadow: var(--s1), var(--kante); }
.screen .haupt-kopf .chip .ico { width: 18px; height: 18px; }
.screen .haupt-kopf .chip .ico.stern { color: var(--gold); }
.haupt-kopf .chip .von { color: var(--text-2); }
/* Status-Kapsel (Flo 30.10.: "das hier oben kann man noch besser machen"): Sterne, Level und Serie stehen in EINER ruhigen
   Kapsel mit feinen Trennstrichen statt als lose Einzel-Pillen; was nicht ganz passt, tritt zurueck (seite.js) */
.screen .haupt-kopf .kopf-chips { gap: 0; padding: 3px 2px; border-radius: var(--r-pille); background: var(--flaeche); box-shadow: var(--s1), var(--kante); }
.screen .haupt-kopf .kopf-chips > .chip { position: relative; background: transparent; box-shadow: none; }
.screen .haupt-kopf .kopf-chips > .chip:not(:first-child)::after { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px;
  background: var(--linie-2, var(--linie)); pointer-events: none; }
.screen .haupt-kopf .kopf-chips > .chip:hover { background: var(--flaeche-2); }
.screen .haupt-kopf .kopf-knopf { flex: none; width: 46px; height: 46px; border-radius: var(--r-m); border: 0; box-shadow: var(--s1), var(--kante); }
.haupt-kopf .kopf-knopf .ico { width: 22px; height: 22px; }
.haupt-kopf .kopf-zurueck { margin-right: 2px; }

/* Klang-Schalter: an = Wellen, aus = Kreuz */
.knopf-klang .klang-welle, .knopf-klang .klang-strich { transition: opacity var(--d-s) var(--sanft); }
.knopf-klang .klang-strich { opacity: 0; }
.knopf-klang[aria-pressed="false"] .klang-welle { opacity: 0; }
.knopf-klang[aria-pressed="false"] .klang-strich { opacity: 1; }

/* auf dem Screen eines Reiters kein Zurueck */
html[data-reiter-wurzel="ja"] .haupt-kopf .kopf-zurueck { display: none; }

/* Seitentitel unter dem Kopf (Training, spaeter Verlauf und Pakete) */
.seiten-kopf { padding: 14px var(--rand) 8px; }
.seiten-kopf h1 { margin: 0; font-size: min(var(--fs-display), 52px); color: var(--text); }
.seiten-kopf .ueberzeile { margin-bottom: 4px; }
.seiten-kopf p { margin: 8px 0 0; color: var(--text-2); font-weight: 600; font-size: 15px; max-width: 60ch; }

/* ---------- Reiter-Leiste: Glas-Leiste (Konzept 2026-11-06) ----------
   unten: schwebende Glas-Kapsel ueber die Breite (Entwurf online-shop .dock), Symbol ueber dem Wort.
   seite (Querformat ab 1021 px, app.js): Seitenleiste links mit Marke, Reiter untereinander (Entwurf ipad-pc-v2 .nav).
   Der aktive Reiter traegt .an: Schrift in der lesbaren Goldfassung, dahinter die gleitende Pille in Gold weich. */
:root { --dock-hoehe: 64px; --dock-abstand: max(16px, env(safe-area-inset-bottom, 0px)); --seite-breite: 216px; --seite-rand: 12px; }
.reiter-leiste[hidden] { display: none; }
.reiter-leiste { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: var(--dock-abstand); margin: 0 auto; max-width: 560px;
  height: var(--dock-hoehe); box-sizing: border-box; display: flex; align-items: stretch; padding: 6px; border-radius: 32px;
  background: var(--glas); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: var(--s2), var(--kante); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .reiter-leiste { background: var(--flaeche); }
}
.reiter-leiste .reiter-marke { display: none; }
.reiter-leiste .reiter { position: relative; z-index: 1; flex: 1 1 0; min-width: var(--tipp); min-height: var(--tipp); margin: 0; padding: 0 4px;
  border: 0; border-radius: 26px; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: inherit; font-weight: var(--gw-stark); font-size: 12px; line-height: 1.1; color: var(--text-2); white-space: nowrap; cursor: pointer;
  transition: color var(--d-s) var(--sanft), transform var(--d-m) var(--feder); }
.reiter-leiste .reiter .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.reiter-leiste .reiter.an { color: var(--kt-stark); }
.reiter-leiste .reiter:focus-visible { outline: var(--fokus); outline-offset: -2px; }
.reiter-pille { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 26px; pointer-events: none;
  background: var(--gold-weich); }

/* Seitenleiste links (iPad quer, PC): schwebt mit kleinem Rand ueber die ganze Hoehe */
.reiter-leiste[data-lage="seite"] { top: var(--seite-rand); bottom: var(--seite-rand); left: var(--seite-rand); right: auto; margin: 0;
  width: var(--seite-breite); max-width: none; height: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 22px 14px;
  border-radius: 28px; }
.reiter-leiste[data-lage="seite"] .reiter-marke { display: block; padding: 0 12px 18px; font-family: var(--display); font-weight: var(--gw-titel);
  font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.reiter-leiste[data-lage="seite"] .reiter { flex: none; height: 48px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px;
  border-radius: 14px; font-size: 15px; }
.reiter-leiste[data-lage="seite"] .reiter-pille { top: 0; bottom: auto; left: 14px; right: 14px; width: auto; height: 0; border-radius: 14px; }
/* die Marke steht in der Seitenleiste: im Kopf tritt sie zurueck (bleibt fuer Vorleseprogramme im Dokument), damit
   Sterne, Level und Serie neben der Leiste ganz Platz haben */
html[data-reiter="seite"] .haupt-kopf .marke { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* weg (Partie, Analyse, Einstellungen): faehrt hinaus, solange nicht bedienbar */
.reiter-leiste.weg { pointer-events: none; }

/* Platz fuer die Leiste: unten werden die Screens um ihre Hoehe kuerzer, links ruecken sie nach rechts.
   --reiter-h = Kapsel + Abstand zum Rand (mindestens 16, sonst die sichere Zone) + 8 Luft */
:root { --reiter-h: calc(var(--dock-hoehe) + var(--dock-abstand) + 8px); --reiter-b: calc(var(--seite-breite) + 2 * var(--seite-rand)); }
html[data-reiter="unten"] #app > .screen { height: calc(100vh - var(--reiter-h)); height: calc(100dvh - var(--reiter-h)); }
html[data-reiter="seite"] #app > .screen { margin-left: var(--reiter-b); width: calc(100% - var(--reiter-b)); }
/* Meldungen ueber der Leiste, nicht darauf */
html[data-reiter="unten"] .toast-ort { bottom: calc(var(--reiter-h) + 6px); }

/* ---------- Handy ---------- */
@media (max-width: 700px) {
  .screen .kopf.haupt-kopf { padding-top: 12px; gap: 8px; }
  .haupt-kopf.mit-marke .unter { display: none; }
  .screen .haupt-kopf .marke-titel { font-size: 19px; }
  .haupt-kopf .marke { gap: 10px; }
  .haupt-kopf .marke-zeichen { width: 40px; height: 40px; border-radius: 13px; }
  .screen .haupt-kopf .chip { height: 38px; padding: 0 11px; font-size: 13.5px; }
  .haupt-kopf .chip .von, .haupt-kopf .knopf-thema { display: none; }
  .haupt-kopf .rechts, .screen .haupt-kopf .kopf-chips { gap: 6px; }
  .screen .haupt-kopf .kopf-knopf { width: var(--tipp); height: var(--tipp); border-radius: 15px; }
  .seiten-kopf { padding-top: 22px; }
}
@media (max-width: 440px) {
  .screen .haupt-kopf .marke-titel { font-size: 18px; }
  .haupt-kopf .rechts, .screen .haupt-kopf .kopf-chips { gap: 4px; }
  /* drei Knoepfe: das Zeichen und der zweite Chip machen Platz (der Titel bleibt ganz) */
  .haupt-kopf.voll .marke-zeichen, .haupt-kopf.voll .chip-pokal { display: none; }
  /* Zahlenruhe: drei Zahlen im Kopf (Sterne, Level, Serie) brauchen am Handy die ganze Breite; die Marke tritt zurueck,
     bleibt aber fuer Vorleseprogramme da (h1) */
  .haupt-kopf:has(.kopf-chips > :nth-child(4)) .marke { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .haupt-kopf:has(.kopf-chips > :nth-child(4)) .kopf-chips { margin-left: 0; }
}

/* Handy schmal (Flo 31.10.2026: "muss einfach und uebersichtlich sein, auf dem iPad ist das gut"): Seitentitel kleiner,
   die Erklaerzeile darunter entfaellt, damit der Inhalt ohne Scrollen beginnt */
@media (max-width: 520px) {
  .seiten-kopf { padding-top: 8px; padding-bottom: 4px; }
  .seiten-kopf h1 { font-size: 28px; }   /* Flo 31.10. abends (iPhone-Bilder): 34 px wirkte zu gross */
  .seiten-kopf p { display: none; }
}

/* Handy dicht (Flo 01.11.2026, 00:30, iPhone-Bild der Bestenliste: "Auf dem Handy ist immer noch alles zu gross, man muss
   alles sehen ohne viel scrollen"): flacherer Kopf, kleinere Seitentitel ohne Ueberzeile (bleibt fuer Vorleseprogramme im
   Text), schmalere Reiter-Leiste naeher am Rand. Jede Tippflaeche bleibt mindestens 44 px. */
@media (max-width: 520px) {
  /* 10 px oben: der Kopf gleitet beim Oeffnen 10 px von oben herein (kopfEintritt in js/ui/seite.js), er bleibt so im Bild */
  .screen .kopf.haupt-kopf { padding-top: 10px; min-height: 54px; }
  .seiten-kopf { padding-top: 8px; padding-bottom: 0; }
  .seiten-kopf h1 { font-size: 23px; letter-spacing: -.02em; }
  .seiten-kopf .ueberzeile { display: none; }
}
/* Handy: der Name der Seite steht im Kopf statt der Marke (hauptKopf({ seite }) in js/ui/seite.js), der grosse
   Seitentitel darunter entfaellt; beide bleiben fuer Vorleseprogramme im Dokument. Spart auf jeder Seite eine Zeile. */
.haupt-kopf .kopf-seite { display: none; }
@media (max-width: 520px) {
  /* die Marke ist auf diesen Seiten kein Titel (titelElement 'div'), die Ueberschrift h1 steckt im Seitenkopf */
  .haupt-kopf.mit-seite .marke-titel { display: none; }
  .screen:has(> .haupt-kopf.mit-seite) .seiten-kopf {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .haupt-kopf.mit-seite .marke-zeichen { display: none; }
  .haupt-kopf.mit-seite .kopf-seite { display: block; font-family: var(--display); font-weight: var(--gw-titel); font-size: 22px;
    letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; color: var(--text); }
}

/* ---------- Premium-Krone und Shop (Startseite neu, Flo 01.11.2026: "oben muss die Shop-Funktion sein, hell/dunkel,
   die Premium-Version") ---------- */
.haupt-kopf .kopf-premium { flex: none; height: 44px; min-width: 44px; margin: 0; padding: 0 15px 0 12px; border: 0;
  border-radius: var(--r-pille); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit;
  font-family: var(--display); font-weight: var(--gw-titel); font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap;
  color: var(--text); background: var(--gold-weich); box-shadow: inset 0 0 0 1.5px var(--gold), var(--s1); cursor: pointer;
  transition: transform var(--d-s) var(--feder), box-shadow var(--d-s) var(--sanft); }
.haupt-kopf .kopf-premium .ico { width: 20px; height: 20px; color: var(--gold); }
.haupt-kopf .kopf-premium:hover { box-shadow: inset 0 0 0 2px var(--gold), var(--s2); }
.haupt-kopf .kopf-premium:active { transform: scale(.96); }
.haupt-kopf .kopf-premium:focus-visible { outline: var(--fokus); outline-offset: 2px; }

/* iPad und kleine Fenster (521 bis 1399 px): Krone und Shop brauchen Platz, dafuer tritt in der Arena der Klang-Knopf
   zurueck (er steht in den Einstellungen und in der Partie); so bleiben Sterne, Level und Serie ganz, auch in Safari */
@media (min-width: 521px) and (max-width: 1399px) {
  /* nur wenn es eng wird: mit drei und mehr Zahlen der Pakete (Sterne, Level, Serie) */
  .haupt-kopf.mit-premium:has(.kopf-chips > :nth-child(3)) .knopf-klang { display: none; }
}
/* iPad hoch und kleine Fenster (521 bis 1020 px): ebenfalls nur die Krone, damit Sterne, Level und Serie ganz bleiben */
@media (min-width: 521px) and (max-width: 1020px) {
  .haupt-kopf .kopf-premium { width: 46px; padding: 0; }
  .haupt-kopf .kopf-premium span { display: none; }
  .haupt-kopf.mit-premium .marke-zeichen { display: none; }
}

/* Handy: vorn die Krone statt der Marke (die Marke bleibt fuer Vorleseprogramme im Dokument), rechts Shop, Hell/Dunkel und
   Zahnrad; Verlauf (im Reiter Ich) und Klang (Einstellungen) treten zurueck. Jede Tippflaeche bleibt mindestens 44 px. */
@media (max-width: 520px) {
  .haupt-kopf.mit-premium .marke { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .haupt-kopf.mit-premium [data-aktion="verlauf"], .haupt-kopf.mit-premium .knopf-klang { display: none; }
  .screen .haupt-kopf.mit-premium .knopf-thema { display: grid; }
  .haupt-kopf.mit-premium .kopf-premium { height: var(--tipp); }
  /* zwei Zeilen: oben Krone, Shop, Hell/Dunkel, Zahnrad; darunter die Zahlen (Sterne, Level, Serie) als volle Leiste, damit
     alle drei ganz zu sehen sind (Zahlenruhe, Flo 23.10.) */
  .screen .kopf.haupt-kopf.mit-premium { flex-wrap: wrap; row-gap: 8px; }
  .haupt-kopf.mit-premium .rechts { display: contents; }
  .haupt-kopf.mit-premium [data-aktion="shop"] { margin-left: auto; }
  .screen .haupt-kopf.mit-premium .kopf-chips { order: 10; flex: 1 0 100%; margin-left: 0; justify-content: space-evenly; }
}
/* sehr schmal: nur die Krone */
@media (max-width: 359px) {
  .haupt-kopf .kopf-premium { width: var(--tipp); padding: 0; }
  .haupt-kopf .kopf-premium span { display: none; }   /* der Name steht im aria-label */
}