/*
 * Mein Fahrplan, Rubrikseite (fahrplan-seite.js). Seit P7 (App 2. Version, 18.10.2026) nach Fabios
 * Vorlage 05_Fahrplan.md: farbiger Kopf mit Wochenleiste und Reitern (Kopf-Komponente .hj-kopf aus
 * v1-extra.css, faehrt ein), Bereichsfarben als Verlauf, Deine Bereiche als Ringe, Tipp der Woche oben.
 *
 * Farben nur ueber Tokens. Die Farbpaare der Bereiche (Vorlage: dunkel -> hell) stehen hier einmal
 * unter [data-fps-farbe="…"]; daraus leiten sich blass, Tinte und Ring per color-mix aus den Tokens
 * der App ab, damit Karten und Schrift im Dunkelmodus stimmen. Weiss steht nur auf Farbe.
 * Keine fremde Schrift, kein CDN.
 */

/* ---------------------------------------------------------------- Bereichsfarben */
[data-fps-farbe="alles"]       { --mod-dunkel:#2F3C99; --mod-hell:#62C3DC; }
[data-fps-farbe="ernaehrung"]  { --mod-dunkel:#17657E; --mod-hell:#5DBB72; }
[data-fps-farbe="supplements"] { --mod-dunkel:#3B2E86; --mod-hell:#8C7BD8; }
[data-fps-farbe="bewegung"]    { --mod-dunkel:#10155F; --mod-hell:#2E7299; }
[data-fps-farbe="schlaf"]      { --mod-dunkel:#1C2436; --mod-hell:#62748F; }
[data-fps-farbe="stress"]      { --mod-dunkel:#171A5E; --mod-hell:#4A4C9E; }
[data-fps-farbe="darm"]        { --mod-dunkel:#14605A; --mod-hell:#55AC9C; }
[data-fps-farbe] {
  --mod-verlauf: linear-gradient(145deg, var(--mod-hell), var(--mod-dunkel));
  --mod-blass: color-mix(in srgb, var(--mod-hell) 16%, var(--card));
  --mod-ring: color-mix(in srgb, var(--mod-hell) 55%, var(--card));
  --mod-ink: var(--mod-dunkel);
  /* Festfarben fuer den Konfetti-Regen (Vorlage: Gelb, Apricot, Hellblau, Gruen) */
  --fps-konfetti-1:#FFCE4D; --fps-konfetti-2:#FFA98C; --fps-konfetti-3:#9EE3F1; --fps-konfetti-4:#7FD49A;
}
/* Dunkelmodus: Schrift in Bereichsfarbe wird hell (die dunklen Farbpaare waeren auf dunklen Karten
   unlesbar), die farbigen Flaechen (Kopf, Verlauf, Ringe) bleiben. */
html[data-theme="dark"] [data-fps-farbe] { --mod-ink: color-mix(in srgb, var(--mod-hell) 45%, var(--navy)); --mod-blass: color-mix(in srgb, var(--mod-hell) 20%, var(--card)); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) [data-fps-farbe] { --mod-ink: color-mix(in srgb, var(--mod-hell) 45%, var(--navy)); --mod-blass: color-mix(in srgb, var(--mod-hell) 20%, var(--card)); }
}

.fps { --fps-text:var(--ink); --fps-grau:var(--muted); --fps-leise:var(--muted-2); --fps-linie:var(--line-2); --fps-chip:var(--card2);
  display:flex; flex-direction:column; gap:12px; 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; }

/* Fussleiste in der Bereichsfarbe */
.hjm-frame[data-fps] .tabbar button.active { color:var(--mod-ink); transition:color .22s; }
/* 0m J49: im Dunkelmodus ist --mod-ink hell; der aktive Reiter unten hat aber eine helle Flaeche. Dort
   gilt die Regel aller Auswahl-Elemente: helle Flaeche, dunkle Schrift und dunkles Symbol. */
html[data-theme="dark"] .hjm-frame[data-fps] .tabbar button.active { color:var(--tab-on-ink); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .hjm-frame[data-fps] .tabbar button.active { color:var(--tab-on-ink); }
}

/* ---------------------------------------------------------------- Kopf (Vorlage: Kopf gefuellter Fahrplan)
   .hj-kopf (v1-extra.css) klebt mit top = -Einfahrweg; fahrplan-seite.js setzt --einfahrweg, --k, --kr.
   Hier: volle Breite des Screens, Verlauf des Bereichs, Inhalt und Reiter. */
.hj-kopf.fps-kopf { --kopf-grad:linear-gradient(150deg, var(--mod-dunkel) 0%, var(--mod-hell) 100%);
  margin:-8px -20px 2px; padding-top:6px; transition:background .22s; }   /* oben knapper (22.10.2026) */
.fps-kopf.fps-kopf--leer { position:relative; top:auto; padding-bottom:22px; }
.fps-k-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; }
.fps-k-links { min-width:0; }
.fps-k-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:.78; margin-bottom:4px; }
.fps-k-zahl { font-size:34px; font-weight:800; letter-spacing:-1px; line-height:1.05; font-variant-numeric:tabular-nums; }
.fps-k-zahl.klein { font-size:23px; letter-spacing:-.5px; line-height:1.18; }
.fps-k-zahl small { font-size:15px; font-weight:700; letter-spacing:0; margin-left:0; opacity:.88; }  /* Abstand: echtes Leerzeichen davor („0 von 2“, Texte 54) */
.fps-k-unter { font-size:13px; font-weight:600; opacity:.82; margin-top:4px; }
.fps-k-ring { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.fps-k-ringtext { text-align:right; line-height:1.25; }
.fps-k-ringtext b { display:block; font-size:13px; font-weight:800; }
.fps-k-ringtext span { display:block; font-size:10.5px; font-weight:600; opacity:.75; margin-top:2px; white-space:nowrap; }
.fps-k-ringfeld { position:relative; width:64px; height:64px; flex:0 0 auto; }
.fps-k-ringsvg { position:absolute; inset:0; width:64px; height:64px; }
.fps-k-ringsvg .g { fill:none; stroke:rgba(255,255,255,.24); stroke-width:6; }
.fps-k-ringsvg .v { fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; }
.fps-k-ringmitte { position:absolute; inset:0; display:grid; place-items:center; }
.fps-k-ringmitte .hji { width:24px; height:24px; }
.fps-k-ank { text-align:right; line-height:1.3; flex:0 0 auto; padding:8px 12px; border-radius:14px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); }
.fps-k-ank b { display:block; font-size:13px; font-weight:800; }
.fps-k-ank span { display:block; font-size:11.5px; font-weight:600; opacity:.85; white-space:nowrap; }

/* Wochenleiste Montag bis Sonntag */
.fps-woche { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:14px; }
.fps-wtag { display:flex; flex-direction:column; align-items:center; gap:4px; }
.fps-wsaeule { position:relative; width:100%; height:46px; border-radius:11px; background:rgba(255,255,255,.18); overflow:hidden; }
.fps-wsaeule i { position:absolute; left:0; right:0; bottom:0; background:rgba(255,255,255,.9); }
.fps-wtag span { font-size:12px; font-weight:700; opacity:.75; }
.fps-wtag.heute .fps-wsaeule { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75); }
.fps-wtag.heute span { opacity:1; font-weight:800; }
.fps-wtag.zukunft .fps-wsaeule { background:rgba(255,255,255,.08); }
.fps-wtag.zukunft span { opacity:.55; }
/* Ankommen-Tage: gestrichelter Rahmen statt voller Saeule (Haken zaehlen als Plus, keine Wertung) */
.fps-wtag.ankommen .fps-wsaeule { background:transparent; border:1.5px dashed rgba(255,255,255,.55); }
.fps-wtag.ankommen .fps-wsaeule i { background:rgba(255,255,255,.55); }
.fps-woche-legende { margin:8px 0 0; font-size:11.5px; font-weight:600; opacity:.85; line-height:1.4; }

/* Reiter mit Symbol. Offen: Pillen mit Wort, quer wischbar. Eingefahren (--kr gegen 0): gleich breite,
   abgerundete Rechtecke (Radius 14, Hoehe 40), nur das Symbol (21 px), alle sieben in einer Reihe,
   der Punkt sitzt oben rechts in der Ecke. */
.fps-kopf .fps-reiterleiste { gap:calc(8px - 2px * (1 - var(--kr))); margin-left:-20px; margin-right:-20px;
  padding:0 20px; }
/* 37 (Fabio 28.10.): „Alles" steht fest links, die uebrigen sechs laufen in einer eigenen Bahn darunter
   durch (abgeschnitten an der Bahn, nichts schimmert durch). Der gewaehlte Reiter rueckt per Skript an
   den Anfang der Bahn, also an Stelle 2; rechts haelt ::after genug Leerraum (--fps-rest, gemessen),
   damit auch Stress und Darm dorthin koennen. Eingefahren (--kr 0) schrumpft der Leerraum auf null und
   alle sieben Reiter stehen gleich breit in einer Zeile: „Alles" bekommt dann ein Siebtel der Breite. */
.fps-kopf .fps-reiterleiste > [role="tab"][data-fps-reiter="alles"] { flex:0 0 auto; min-width:calc((100% - 36px) / 7 * (1 - var(--kr))); }
.fps-reiterlauf { display:flex; gap:calc(8px - 2px * (1 - var(--kr))); flex:1 1 0; min-width:0; overflow-x:auto; scrollbar-width:none;
  overscroll-behavior-x:contain; margin-right:-20px; padding-right:20px; }
.fps-reiterlauf::-webkit-scrollbar { display:none; }
.fps-reiterlauf::after { content:""; flex:0 0 calc(var(--fps-rest, 0px) * var(--kr)); }
.fps-kopf .fps-reiterleiste [role="tab"] { flex:calc(1 - var(--kr)) 0 auto; min-width:0; min-height:calc(34px + 6px * (1 - var(--kr)));
  padding:0 calc(6px + 6px * var(--kr)); gap:calc(6px * var(--kr)); border-radius:calc(14px + 3px * var(--kr)); }
.fps-kopf .fps-reiterleiste .hji { width:calc(21px - 5px * var(--kr)); height:calc(21px - 5px * var(--kr)); flex:none; }
.fps-kopf .fps-reiterleiste .hj-r__wort { display:inline-block; max-width:calc(120px * var(--kr)); opacity:var(--kr); overflow:hidden; }
/* 0m J41: das Wort schnitt die Unterlaenge ab („g“ in Bewegung, Ernährung), weil die Zeile nur 1,1 hoch war
   und das Wort ueberstehendes abschneidet. Eigene Zeilenhoehe mit Platz fuer g, p, y; aktiv und inaktiv
   gleich, der Rahmen ist in beiden Zustaenden 1 px. */
.fps-kopf .fps-reiterleiste .hj-r__wort { line-height:1.4; padding-bottom:1px; vertical-align:middle; }
.fps-kopf .fps-reiterleiste [role="tab"] { border-width:1px; box-sizing:border-box; }
.fps-punkt { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.fps-kopf.eingefahren .fps-punkt { position:absolute; top:6px; right:7px; width:5px; height:5px; }
@media (min-width: 900px) {
  .hj-kopf.fps-kopf { max-width:none; margin:0 0 4px; border-radius:32px; padding-top:16px; }
  .fps-kopf .fps-reiterleiste { margin-left:auto; margin-right:auto; padding:0; }
  .fps-reiterlauf { margin-right:0; padding-right:0; }
}

/* Kurze Bereiche bekommen unten Luft (Mindesthoehe Bildschirm plus Einfahrweg), damit der Kopf auch
   dort eingefahren bleiben kann (Reiterregel). */
.fps-inhalt { min-height:calc(100vh - 80px); min-height:calc(100dvh - 80px); }
@supports (height:100dvh) { .fps-inhalt { min-height:calc(100dvh - 80px); } }
.fps-leerseite .fps-inhalt, .fps-platzhalter .fps-inhalt { min-height:0; }

/* ---------------------------------------------------------------- Gruppen und Bausteine */
.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-lkarte, .fps-bereiche {
  background:var(--card); border:var(--card-border); box-shadow:var(--shadow-card); border-radius:22px; }
.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); transition:background .25s, color .25s; }
.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; }   /* 34: keine automatische Trennung, weiche Trennstellen aus fahrplan-seite.js (trennen) */
/* Erledigt: das Symbolfeld fuellt sich mit dem Verlauf des Bereichs (Symbol weiss), der Name wird grau */
.fps-bz.erledigt .fps-feld { background:var(--mod-verlauf); color:#fff; }
.fps-bz.erledigt .fps-bz-name { color:var(--fps-grau); }
.fps-bz-kopf { display:flex; align-items:center; gap:6px; min-width:0; }
.fps-bz-kopf .fps-bz-name { min-width:0; }
.fps-info { width:28px; height:28px; margin:-5px -4px -5px -2px; flex:0 0 auto; border:0; border-radius:14px; padding:0;
  background:none; color:var(--mod-ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.fps-info:active { background:var(--mod-blass); }
.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, .fps-fokus { 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); background:var(--mod-blass); }
/* Fokus-Bausteine (zaehlen staerker): Schild im Verlauf des Bereichs */
.fps-fokus { color:#fff; background:var(--mod-verlauf); }
/* Haken: offen ein Ring im hellen Bereichston, erledigt der Verlauf des Bereichs */
.fps-haken, .fps-stand { width:24px; height:24px; border-radius:12px; flex:0 0 auto; padding:0; display:flex; align-items:center;
  justify-content:center; color:#fff; border:2px solid var(--mod-ring); background:none; transition:background .15s, border-color .15s; }
.fps-haken { cursor:pointer; }
.fps-haken:active { transform:scale(.9); }
.fps-haken.voll, .fps-stand.voll { border:0; background:var(--mod-verlauf); color:#fff !important; }
.fps-stand { border-style:dashed; }
.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 */
.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); 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-verlauf); }

/* Verbessern */
.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, Abkuerzungen in den Stressmaster */
.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-verlauf); 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); }
.fps-ei-text span { display:block; font-size:12px; color:var(--fps-leise); font-weight:600; }
.fps-sm { display:flex; flex-direction:column; gap:10px; }

/* Tipp der Woche: ganz oben im Bereich, farbige Karte, nicht abgeschnitten */
.fps-tdw { display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; border:0; cursor:pointer; border-radius:22px;
  padding:16px; color:#fff !important; background:linear-gradient(135deg, var(--mod-dunkel), var(--mod-hell)); }
.fps-tdw-ue { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.fps-tdw b { font-size:16px; font-weight:800; line-height:1.3; }
.fps-tdw-x { font-size:13px; line-height:1.5; opacity:.92; }
/* 36: ✕ oben rechts blendet den Tipp aus (bis ein neuer kommt); Titel laeuft nicht darunter. */
.fps-tdw-box { position:relative; }
.fps-tdw-box .fps-tdw { padding-right:52px; }
.fps-tdw-zu { position:absolute; top:6px; right:6px; width:40px; height:40px; border:0; border-radius:20px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:none; color:#fff !important; }
.fps-tdw-zu svg { width:28px; height:28px; padding:7px; border-radius:14px; background:rgba(255,255,255,.2); box-sizing:border-box; }
.fps-tdw-zu:focus-visible { outline:2px solid #fff; outline-offset:-2px; }

/* Warum ist das wichtig? */
.fps-warum { display:flex; align-items:flex-start; gap:12px; background:var(--mod-blass); border-radius:18px; padding:15px; }
.fps-w-feld { width:38px; height:38px; border-radius:12px; background:var(--card); color:var(--mod-ink); display:flex;
  align-items:center; justify-content:center; flex:0 0 auto; }
.fps-warum b { display:block; font-size:13.5px; font-weight:800; color:var(--mod-ink); margin-bottom:3px; }
.fps-warum p { margin:0; font-size:12.5px; color:var(--muted); line-height:1.48; }

/* Leer / noch nicht gestartet */
.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); }
.fps-leer p { margin:0; font-size:13px; color:var(--fps-leise); line-height:1.5; max-width:30ch; }
.fps-hinweis { margin:0; font-size:12.5px; color:var(--muted); line-height:1.45; padding:1px 4px 0; }

/* ---------------------------------------------------------------- Deine Bereiche (Raster aus sechs Ringen) */
.fps-bereiche { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 8px; padding:16px 10px; }
.fps-ber { display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:none; cursor:pointer; padding:4px 0; min-width:0; }
.fps-ber-ring { position:relative; width:64px; height:64px; display:grid; place-items:center; color:var(--mod-ink); margin-bottom:4px; }
.fps-ber-svg { position:absolute; inset:0; width:64px; height:64px; }
/* 0m J46: die Spur deutlich dunkler als vorher, damit ein halber Ring nicht voll wirkt. */
.fps-ber-svg .g { fill:none; stroke:color-mix(in srgb, var(--mod-dunkel) 28%, var(--card)); stroke-width:6; }
.fps-ber-svg .v { fill:none; stroke:var(--mod-hell); stroke-width:6; stroke-linecap:round; }
.fps-ber-ring .hji { width:24px; height:24px; position:relative; --ic-acc:currentColor; }
.fps-ber-punkt { position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%; background:var(--mod-hell);
  box-shadow:0 0 0 2px var(--card); }
.fps-ber b { font-size:13px; font-weight:800; color:var(--navy); }
.fps-ber small { font-size:12px; font-weight:700; color:var(--muted); text-align:center; line-height:1.3; }
.fps-ber.still .fps-ber-ring { opacity:.6; }

/* ---------------------------------------------------------------- Leerer Zustand (noch kein Plan) */
.fps-lkarte { display:flex; flex-direction:column; gap:12px; padding:16px; }
.fps-l-kopf { display:flex; align-items:center; gap:12px; }
.fps-l-kopf b { display:block; font-size:16px; font-weight:800; color:var(--navy); }
.fps-l-kopf small { display:block; font-size:12.5px; font-weight:600; color:var(--muted); }
.fps-l-ic { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:none; color:#fff; background:var(--mod-verlauf); }
.fps-l-ic .hji { width:22px; height:22px; --ic-acc:currentColor; }
.fps-weg { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fps-weg-s { display:flex; align-items:center; gap:12px; }
.fps-weg-s b { display:block; font-size:14px; font-weight:800; color:var(--navy); }
.fps-weg-s small { display:block; font-size:12px; font-weight:600; color:var(--muted); }
.fps-weg-n { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:13px; font-weight:800;
  border:2px solid var(--line); color:var(--muted); }
.fps-weg-s.jetzt .fps-weg-n { border-color:var(--mod-hell); color:var(--mod-ink); }
.fps-weg-s.fertig .fps-weg-n { border:0; background:var(--mod-verlauf); color:#fff; }
.fps-weg-s.offen b { color:var(--muted); }
.fps .fps-knopf { border:0; color:#fff; font-size:15px; font-weight:800; background:linear-gradient(115deg, var(--mod-dunkel), var(--mod-hell)); }
.fps-knopf .hji { width:18px; height:18px; --ic-acc:currentColor; }
.fps-ziele { display:flex; flex-wrap:wrap; gap:8px; }
.fps-ziel { display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:17px; font-size:13px; font-weight:800;
  color:var(--navy); background:var(--tint); border:1px dashed var(--mod-ring); }
.fps-ziel.haupt { background:linear-gradient(115deg, var(--mod-dunkel), var(--mod-hell)); color:#fff; border:0; }
.fps-l-hinweis { font-size:12px; font-weight:600; color:var(--muted); line-height:1.45; }
.fps-erwartet { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.fps-erw { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--navy); text-align:center; }
.fps-erw-ic { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:var(--mod-blass); color:var(--mod-ink); }
.fps-erw-ic .hji { width:22px; height:22px; --ic-acc:currentColor; }

/* ---------------------------------------------------------------- Tipps & Infos (fahrplan-inhalt.js) in der Farbe des Bereichs */
.fps .fps-fpi { --fpi-dunkel:var(--mod-dunkel); --fpi-akzent:var(--mod-ink); --fpi-hell:var(--mod-hell);
  --fpi-blass:var(--mod-blass); --fpi-ink:var(--mod-ink); --fpi-neu:var(--mod-hell); margin:4px 0 0; display:flex; flex-direction:column; gap:12px; }
.fps .fps-fpi[hidden] { display:none; }
.fps .fpi-kopf-titel { color:var(--muted-2); }
/* Blatt und Fenster haengen an <body>: Farbe ueber data-fps-farbe (farbenSetzen in fahrplan-inhalt.js).
   „html " davor, damit die Regel nach den Dunkelmodus-Regeln aus fahrplan-inhalt.css gewinnt. */
html .fpi-ov[data-fps-farbe] { --fpi-dunkel:var(--mod-dunkel); --fpi-akzent:var(--mod-ink); --fpi-hell:var(--mod-hell);
  --fpi-blass:var(--mod-blass); --fpi-ink:var(--mod-ink); }

/* ---------------------------------------------------------------- Kurze Meldung, Konfetti */
.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:var(--shadow); 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-konfetti { position:fixed; z-index:90; top:-20px; width:7px; height:7px; border-radius:2px; pointer-events:none; }
.fps-konfetti.lang { width:3px; height:14px; }

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

/* Platzhalter beim ersten Laden (Sollte 55): dieselbe Form wie der Kopf, ohne Zahlen. */
.fps-ph-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.fps-ph-zahl { width:46%; height:34px; border-radius:12px; background:rgba(255,255,255,.22); }
.fps-ph-ring { width:60px; height:60px; border-radius:50%; box-shadow:inset 0 0 0 6px rgba(255,255,255,.22); flex:none; }
.fps-ph-tage { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; margin-bottom:6px; }
.fps-ph-tag { height:40px; border-radius:10px; background:rgba(255,255,255,.16); }
.fps-platzhalter .fps-tab { pointer-events:none; opacity:.75; }
.fps-ph-karte { margin-bottom:12px; }
@media (prefers-reduced-motion: no-preference) {
  .fps-ph-zahl, .fps-ph-tag { animation:fpsPuls 1.4s ease-in-out infinite alternate; }
  @keyframes fpsPuls { from { opacity:.6; } to { opacity:1; } }
}

/* 0m J54: die Wochenkacheln im Kopf sind Knoepfe; der gewaehlte Tag hat einen Rahmen in der Akzentfarbe. */
button.fps-wtag { border:0; background:none; padding:0; color:inherit; font:inherit; cursor:pointer; }
.fps-wtag.gewaehlt .fps-wsaeule { box-shadow:inset 0 0 0 2.5px var(--teal); }
.fps-wtag.gewaehlt span { opacity:1; font-weight:800; }
.fps-nt-band { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 14px;
  border-radius:14px; background:var(--fps-chip); color:var(--fps-text); font-size:13.5px; font-weight:700; margin-bottom:10px; }

/* 0l A4 / 0m J54: Nachtragen ueber die Wochenkacheln im Kopf (eigener Knopf und zweite Leiste sind weg). */
.fps-nt-heute { border:0; background:none; padding:0; font:inherit; font-weight:700; color:var(--fps-text); text-decoration:underline; cursor:pointer; }