/*
 * Mein Fahrplan, Rubrikseite (fahrplan-seite.js, P3). Masse, Farben und Verhalten nach Fabios
 * DESIGN.md (Paket 1.2) und Prototyp_Fahrplanrubrik.html; Hausformat der App (Karten mit Rahmen und
 * Schatten, Schrift Mulish aus app.css, Kopfzeile) gewinnt. Rubrikfarben als Variablen am
 * Seitencontainer (.fps): --mod-dunkel, --mod-mitte, --mod-hell, --mod-leiste, --mod-blass.
 * Keine fremde Schrift, kein CDN.
 */
.fps { --mod-dunkel:#10155F; --mod-mitte:#2C5AA0; --mod-hell:#59B8CE; --mod-leiste:#2D5593; --mod-blass:#EAF0FA;
  --fps-text:var(--ink); --fps-grau:var(--muted); --fps-leise:var(--muted-2); --fps-linie:var(--line-2); --fps-chip:var(--card2);
  --fps-gruen:#3E9E6C; --fps-gruen-blass:var(--green-100);
  display:flex; flex-direction:column; gap:12px; margin:5px -4px 0; color:var(--fps-text); position:relative; }
.fps-inhalt { display:flex; flex-direction:column; gap:12px; }
.fps button { font:inherit; color:inherit; }
.fps-pfeil { flex:0 0 auto; color:var(--muted-2); margin-left:auto; }

/* Kopfzeile und Fussleiste der App in der Rubrikfarbe (DESIGN §2, §3.1) */
.hjm-frame[data-fps] .apphead h2 { color:var(--fps-dunkel); font-size:21px; letter-spacing:-.4px; transition:color .22s; }
.hjm-frame[data-fps] .tabbar button.active { color:var(--fps-dunkel); transition:color .22s; }

/* Kopfkarte Heute (§3.2) */
.fps-rechteck { border-radius:16px 16px 0 0; padding:15px 17px 26px; color:#fff;
  background:linear-gradient(118deg, var(--mod-dunkel) 0%, var(--mod-mitte) 54%, var(--mod-hell) 100%);
  transition:background .22s; }
.fps-r-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:.72; margin-bottom:6px; }
.fps-r-zeile { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.fps-r-links { min-width:0; }
.fps-r-zahl { font-size:33px; font-weight:800; letter-spacing:-1px; line-height:1.05; font-variant-numeric:tabular-nums; }
.fps-r-zahl.klein { font-size:24px; letter-spacing:-.5px; line-height:1.15; }
.fps-r-zahl small { font-size:14.5px; font-weight:700; letter-spacing:0; margin-left:7px; opacity:.88; }
.fps-r-unter { font-size:12.5px; font-weight:600; opacity:.76; margin-top:4px; }
.fps-ring { display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.fps-ring-text { text-align:right; line-height:1.25; max-width:96px; }
.fps-ring-text b { display:block; font-size:13px; font-weight:800; }
.fps-ring-text span { display:block; font-size:10.5px; font-weight:600; opacity:.7; margin-top:2px; }
.fps-ring-feld { position:relative; width:70px; height:70px; flex:0 0 auto; }
.fps-ring-feld svg { display:block; transform:rotate(-90deg); }
.fps-ring-mitte { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.92; }
.fps-ring-mitte svg { transform:none; }
.fps-wochenleiste { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:14px; }
.fps-wtag { display:flex; flex-direction:column; align-items:center; gap:6px; }
.fps-wsaeule { width:100%; height:36px; border-radius:8px; background:rgba(255,255,255,.17); display:flex; align-items:flex-end;
  overflow:hidden; border:1px solid rgba(255,255,255,.15); }
.fps-wsaeule i { display:block; width:100%; background:#fff; opacity:.9; }
.fps-wtag.heute .fps-wsaeule { border:2px solid #fff; }
.fps-wtag span { font-size:10px; font-weight:700; opacity:.76; }
.fps-wtag.heute span { opacity:1; }

/* Reiterleiste (§3.3): an die Kopfkarte angesetzt, klebt unter der Kopfzeile der App (57 px + 8 px) */
.fps-seg { position:sticky; top:76px; z-index:5; margin-top:-24px; display:flex; gap:2px; overflow-x:auto; padding:0 17px;
  scrollbar-width:none; border-radius:0 0 16px 16px; background:linear-gradient(118deg, var(--mod-leiste) 0%, var(--mod-hell) 100%);
  box-shadow:0 0 0 0 rgba(21,32,47,0); transition:border-radius .16s, box-shadow .16s, background .22s; }
.fps-seg::-webkit-scrollbar { display:none; }
/* #a-app traegt overflow:auto und waere damit der Rahmen, an dem die Leiste klebt; gescrollt wird
   aber das Dokument. Solange der Fahrplan offen ist: clip statt auto (schneidet weiter quer ab,
   ist aber kein Scroll-Rahmen), so klebt die Leiste unter der Kopfzeile. */
.hjm-frame[data-fps] .app { overflow:visible; overflow-x:clip; }
@media (min-width: 900px) { .fps-seg { top:86px; } }
.fps-seg.klebt { border-radius:14px; background:var(--mod-dunkel); box-shadow:0 7px 18px rgba(16,28,52,.26); }
.fps-reiter { position:relative; flex:0 0 auto; padding:12px 11px 13px; font-size:12.5px; font-weight:700;
  color:rgba(255,255,255,.64) !important; background:none; border:0; border-bottom:2.5px solid transparent; cursor:pointer;
  white-space:nowrap; transition:color .12s; }
.fps-reiter[aria-selected="true"] { color:#fff !important; border-bottom-color:#fff; }
.fps-punkt { position:absolute; top:8px; right:3px; width:6px; height:6px; border-radius:3px; background:#fff; opacity:.85;
  box-shadow:0 0 0 2px rgba(20,32,56,.35); }

/* Gruppen und Karten (§3.6) */
.fps-rubrikzeile { font-size:12px; font-weight:800; color:var(--muted-2); text-transform:uppercase; letter-spacing:.07em; padding:5px 2px 0;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.fps-rubrikzeile em { font-style:normal; font-size:12px; font-weight:700; color:var(--fps-grau); text-transform:none; letter-spacing:0;
  white-space:nowrap; }
.fps-karte, .fps-werte, .fps-einstieg, .fps-leer, .fps .fpi-infos, .fps .fpi-kk {
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:14px; }
.fps-karte { padding:3px 14px; display:flex; flex-direction:column; }
.fps-bz { display:flex; align-items:center; gap:12px; padding:11px 0; border:0; border-top:1px solid var(--fps-linie);
  width:100%; background:none; text-align:left; }
.fps-bz:first-child { border-top:0; }
.fps-bz.fremd { cursor:pointer; }
.fps-feld { width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--mod-blass); color:var(--mod-ink, var(--mod-dunkel)); transition:background .22s, color .22s; }
.fps-feld.bild { width:46px; height:46px; border-radius:12px; background:var(--fps-chip); overflow:hidden; }
.fps-feld.bild img { width:100%; height:100%; object-fit:cover; display:block; }
.fps-feld.gross { width:46px; height:46px; border-radius:14px; }
.fps-bz-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fps-schilder { display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.fps-bz-name { font-size:14.5px; font-weight:700; color:var(--fps-text); letter-spacing:-.15px; overflow-wrap:break-word; hyphens:auto; }
.fps-bz-zweit { font-size:12px; color:var(--fps-leise); font-weight:600; }
.fps-bz-wert { font-size:12.5px; font-weight:700; color:var(--fps-grau); text-align:right; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.fps-schild, .fps-doppelt { font-size:10.5px; font-weight:800; padding:3px 7px; border-radius:7px; flex:0 0 auto; white-space:nowrap; }
.fps-schild { color:var(--fps-grau); background:var(--fps-chip); }
.fps-doppelt { color:var(--mod-ink, var(--mod-dunkel)); background:var(--mod-blass); }
.fps-haken { width:23px; height:23px; border-radius:12px; border:2px solid var(--line); flex:0 0 auto; background:none; padding:0;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s; color:#fff; }
.fps-haken.voll { border-color:var(--fps-gruen); background:var(--fps-gruen); color:#fff !important; }
.fps-stand { width:23px; height:23px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--fps-chip); color:var(--muted-2); }
.fps-stand.voll { background:var(--fps-gruen-blass); color:var(--fps-gruen); }
.fps-karte.laeuft .fps-feld { background:var(--card2); color:var(--fps-leise); }
.fps-karte.laeuft .fps-bz-name { color:var(--fps-grau); font-weight:600; }

/* Deine Werte diese Woche (§3.5) */
.fps-werte { padding:13px 14px; display:flex; flex-direction:column; gap:12px; }
.fps-wert { display:flex; flex-direction:column; gap:6px; }
.fps-wert-kopf { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.fps-wert-name { font-size:13px; font-weight:700; color:var(--muted); }
.fps-wert-zahl { font-size:13px; font-weight:800; color:var(--mod-ink, var(--mod-dunkel)); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fps-wert-zahl span { color:var(--muted-2); font-weight:700; }
.fps-wert-bahn { height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.fps-wert-bahn i { display:block; height:100%; border-radius:3px; background:var(--mod-dunkel); }

/* Verbessern (§3.7) */
.fps-einfluss { font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:7px; flex:0 0 auto; white-space:nowrap; }
.fps-einfluss.hoch { color:var(--amber-t); background:var(--amber-100); }
.fps-einfluss.mittel { color:var(--fps-grau); background:var(--fps-chip); }

/* Einstieg ins Fachmodul (§3.4) */
.fps-einstieg { display:flex; align-items:center; gap:13px; padding:14px; width:100%; cursor:pointer; text-align:left; }
.fps-ei-feld { width:40px; height:40px; border-radius:12px; background:var(--mod-dunkel); color:#fff; display:flex;
  align-items:center; justify-content:center; flex:0 0 auto; }
.fps-ei-text { min-width:0; }
.fps-ei-text b { display:block; font-size:14.5px; font-weight:800; color:var(--mod-ink, var(--mod-dunkel)); }
.fps-ei-text span { display:block; font-size:12px; color:var(--fps-leise); font-weight:600; }

/* Tipp der Woche (§3.8) und Warum (§3.11) */
.fps-tippkarte { display:flex; align-items:flex-start; gap:12px; background:var(--mod-blass); border-radius:13px; padding:14px 15px;
  width:100%; border:0; cursor:pointer; text-align:left; transition:background .22s; }
.fps-tk-feld, .fps-w-feld { width:36px; height:36px; border-radius:11px; background:var(--card); color:var(--mod-ink, var(--mod-dunkel)); display:flex;
  align-items:center; justify-content:center; flex:0 0 auto; }
.fps-tk-text b { display:block; font-size:13.5px; font-weight:800; color:var(--mod-ink, var(--mod-dunkel)); margin-bottom:2px; }
.fps-tk-text span { display:block; font-size:12.5px; color:var(--muted); line-height:1.45; }
.fps-warum { display:flex; align-items:flex-start; gap:12px; background:var(--mod-blass); border-radius:13px; padding:15px; transition:background .22s; }
.fps-w-feld { width:38px; height:38px; border-radius:12px; }
.fps-warum b { display:block; font-size:13.5px; font-weight:800; color:var(--mod-ink, var(--mod-dunkel)); margin-bottom:3px; }
.fps-warum p { margin:0; font-size:12.5px; color:var(--muted); line-height:1.48; }

/* Leer / noch nicht gestartet (§3.12) */
.fps-leer { padding:26px 20px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.fps-leer b { font-size:15px; font-weight:800; color:var(--mod-ink, var(--mod-dunkel)); }
.fps-leer p { margin:0; font-size:13px; color:var(--fps-leise); line-height:1.5; max-width:30ch; }

/* Reiter Alles: Deine Rubriken (§4) */
.fps-rz { display:flex; align-items:center; gap:12px; padding:11px 0; border:0; border-top:1px solid var(--fps-linie); width:100%;
  background:none; cursor:pointer; text-align:left; }
.fps-rz:first-child { border-top:0; }
.fps-rz-mitte { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.fps-rz-kopf { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.fps-rz-name { font-size:14.5px; font-weight:700; color:var(--fps-text); }
.fps-rz-wert { font-size:12.5px; font-weight:700; color:var(--fps-grau); white-space:nowrap; }
.fps-rz-balken { display:block; height:5px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.fps-rz-balken i { display:block; height:100%; border-radius:3px; }
.fps-hinweis { margin:0; font-size:12px; color:var(--muted-2); line-height:1.45; padding:1px 4px 0; }

/* Tipps und Infos (fahrplan-inhalt.js) in der Farbe der Rubrik (§3.9, §3.10) */
.fps .fps-fpi { --fpi-dunkel:var(--mod-dunkel); --fpi-akzent:var(--mod-dunkel); --fpi-hell:var(--mod-hell);
  --fpi-blass:var(--mod-blass); --fpi-neu:#8FD4E4; margin:0; display:flex; flex-direction:column; gap:12px; }
.fps .fps-fpi[hidden] { display:none; }

.fps .fpi-kopf-titel { color:var(--muted-2); }

/* Kurze Meldung (z. B. "Abgehakt für Bewegung und Stress") */
.fps-meldung { position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px);
  background:var(--mod-dunkel); color:#fff; font-size:13.5px; font-weight:700; border-radius:11px; padding:11px 19px;
  box-shadow:0 8px 24px rgba(20,34,70,.28); opacity:0; transition:opacity .18s, transform .18s; pointer-events:none; z-index:30;
  max-width:calc(100% - 32px); text-align:center; }
.fps-meldung.an { opacity:1; transform:translateX(-50%) translateY(0); }

.fps :focus-visible { outline:2px solid var(--mod-hell); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .fps *, .hjm-frame[data-fps] .apphead h2 { transition:none !important; } }

/* Dunkelmodus (Redesign V1): Rubrikfarben kommen inline am Seitencontainer (.fps) und sind fuer hellen
   Grund gedacht. Hier bekommen die Kinder eine dunkle Tinte statt der hellen Blasse und helle Schrift
   statt der dunklen Rubrikfarbe. Die farbigen Flaechen (Kopfkarte, Reiter, Einstieg) bleiben. */
html[data-theme="dark"] .fps > * { --mod-blass: color-mix(in srgb, var(--mod-hell) 18%, var(--card)); --mod-ink: var(--navy); }
html[data-theme="dark"] .hjm-frame[data-fps] .apphead h2 { color:var(--navy); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .fps > * { --mod-blass: color-mix(in srgb, var(--mod-hell) 18%, var(--card)); --mod-ink: var(--navy); }
  html:not([data-theme="light"]) .hjm-frame[data-fps] .apphead h2 { color:var(--navy); }
}