/*
 * 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:#374151; --fps-grau:#6B7280; --fps-leise:#9CA3AF; --fps-linie:#F3F5F8; --fps-chip:#F1F4F8;
  --fps-gruen:#3E9E6C; --fps-gruen-blass:#E7F3EC;
  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:#C3CAD5; 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:65px; 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:75px; } }
.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:#8A93A0; 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-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-dunkel); background:var(--mod-blass); }
.fps-haken { width:23px; height:23px; border-radius:12px; border:2px solid #DDE3EC; 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:#B6BCC6; }
.fps-stand.voll { background:var(--fps-gruen-blass); color:var(--fps-gruen); }
.fps-karte.laeuft .fps-feld { background:#F4F6F9; 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:#4B5563; }
.fps-wert-zahl { font-size:13px; font-weight:800; color:var(--mod-dunkel); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fps-wert-zahl span { color:#B6BCC6; font-weight:700; }
.fps-wert-bahn { height:6px; border-radius:3px; background:#EDF0F4; 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:#8A5A1E; background:#FBEFD9; }
.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-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:#fff; color: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-dunkel); margin-bottom:2px; }
.fps-tk-text span { display:block; font-size:12.5px; color:#5F6B7A; 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-dunkel); margin-bottom:3px; }
.fps-warum p { margin:0; font-size:12.5px; color:#5F6B7A; 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-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:#EDF0F4; overflow:hidden; }
.fps-rz-balken i { display:block; height:100%; border-radius:3px; }
.fps-hinweis { margin:0; font-size:12px; color:#A2AAB6; 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:#8A93A0; }

/* Kurze Meldung (z. B. "Abgehakt für Bewegung und Stress") */
.fps-meldung { position:fixed; left:50%; bottom:calc(84px + 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; } }