/*
 * Fahrplan: Tipps und Infos (fahrplan-inhalt.js). Aussehen nach Fabios Prototyp vom 08.10.2026,
 * Farben aus den Tokens der App (app.css :root), keine fremde Schrift, keine festen Markenfarben.
 * Masse aus dem Paket: Karte 170 px, Abstand 10 px, alle Karten gleich hoch. Bei 378 px
 * Innenbreite stehen zwei Karten im Bild und von der dritten lugen 18 px rein.
 * Das Blatt haengt an <body> (ausserhalb von .hjm-app), deshalb eigene Schrift und Tokens hier.
 */
.fpi, .fpi-ov {
  --fpi-dunkel: var(--navy);
  --fpi-akzent: var(--teal);
  --fpi-hell: var(--teal);
  --fpi-neu: var(--fpi-akzent);
  --fpi-blass: var(--tint);
  --fpi-flaeche: var(--card);
  --fpi-linie: var(--line-2);
  --fpi-leise: var(--muted);
  --fpi-schwach: var(--muted-2);
  --fpi-streit: rgba(245,166,35,.12);   /* --amber, aufgehellt */
  /* Schriftfarbe in Rubrikfarbe; im Dunkelmodus hell (siehe unten), die Flaechen bleiben dunkel. */
  --fpi-ink: var(--fpi-dunkel);
  --fpi-glas: rgba(255,255,255,.93);
}
/* Dunkelmodus (Redesign V1): --navy ist dort hell. Flaechen in Rubrikfarbe (Medaillon) bleiben Navy,
   Schrift in Rubrikfarbe wird hell, das Glasblatt dunkel. */
html[data-theme="dark"] .fpi, html[data-theme="dark"] .fpi-ov,
html[data-theme="dark"] .fps .fps-fpi { --fpi-ink: var(--navy); --fpi-blass: var(--tint); --fpi-glas: rgba(21,26,61,.93); }
html[data-theme="dark"] .fpi:not(.fps-fpi), html[data-theme="dark"] .fpi-ov { --fpi-dunkel: var(--brand); }
html[data-theme="dark"] .fps .fps-fpi { --fpi-akzent: var(--teal); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .fpi, html:not([data-theme="light"]) .fpi-ov,
  html:not([data-theme="light"]) .fps .fps-fpi { --fpi-ink: var(--navy); --fpi-blass: var(--tint); --fpi-glas: rgba(21,26,61,.93); }
  html:not([data-theme="light"]) .fpi:not(.fps-fpi), html:not([data-theme="light"]) .fpi-ov { --fpi-dunkel: var(--brand); }
  html:not([data-theme="light"]) .fps .fps-fpi { --fpi-akzent: var(--teal); }
}
.fpi { margin:14px 0 4px; }
.fpi[hidden] { display:none; }
.fpi-inhalt { display:flex; flex-direction:column; gap:8px; }

/* Kopfzeile je Block: links der Name, rechts die Zahl, die die volle Liste oeffnet */
.fpi-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 2px 0; }
.fpi-kopf-titel { font-size:12px; font-weight:800; color:var(--fpi-leise); text-transform:uppercase; letter-spacing:.07em; }
.fpi-zahl { display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:13px 8px; margin:-13px -8px;
  font:inherit; font-size:12.5px; font-weight:800; color:var(--fpi-akzent); cursor:pointer; border-radius:8px; }

/* Karussell */
.fpi-karu { display:flex; align-items:stretch; gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:1px 0 4px; scrollbar-width:none; }
.fpi-karu::-webkit-scrollbar { height:0; width:0; }
.fpi-kk { position:relative; flex:0 0 170px; width:170px; scroll-snap-align:start; display:flex; flex-direction:column;
  align-items:flex-start; background:var(--fpi-flaeche); border:1px solid var(--line); border-radius:14px; padding:13px;
  font:inherit; text-align:left; cursor:pointer; box-shadow:var(--shadow-sm); color:var(--ink); }
.fpi-kk-titel { display:block; font-size:13.5px; font-weight:800; color:var(--fpi-ink); line-height:1.34;
  margin:10px 0 5px; overflow-wrap:anywhere; }
.fpi-kk-bs { display:block; margin-top:auto; font-size:11.5px; font-weight:700; color:var(--fpi-schwach); line-height:1.35; }
.fpi-neu { position:absolute; top:11px; right:11px; width:7px; height:7px; border-radius:4px; background:var(--fpi-neu); }
.fpi-neu.fpi-neu-zeile { position:static; flex:0 0 auto; }

/* Symbolfeld */
.fpi-feld { width:32px; height:32px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; background:var(--fpi-blass); color:var(--fpi-ink); }

/* Infos: Zeilenliste (auch die Zeilen der vollen Liste) */
.fpi-infos, .fpi-lkarte { background:var(--fpi-flaeche); border:1px solid var(--line); border-radius:14px; padding:2px 14px;
  box-shadow:var(--shadow-sm); }
.fpi-zeile { display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; border:0;
  border-top:1px solid var(--fpi-linie); background:none; font:inherit; text-align:left; cursor:pointer; color:var(--ink); }
.fpi-zeile:first-child { border-top:0; }
.fpi-zeile-text { flex:1 1 auto; min-width:0; }
.fpi-zeile-text b { display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.33; overflow-wrap:anywhere; }
.fpi-zeile-text span { display:block; font-size:11.5px; font-weight:600; color:var(--fpi-schwach); margin-top:2px; }
.fpi-pfeil { flex:0 0 auto; color:var(--fpi-schwach); }
.fpi-leer { margin:0; padding:12px 14px; background:var(--fpi-flaeche); border:1px solid var(--line); border-radius:14px;
  font-size:13px; color:var(--fpi-leise); }

/* Blatt: volle Liste von unten, einzelner Tipp als mittig schwebende Karte */
.fpi-ov { position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(16,21,95,.30); opacity:0; transition:opacity .22s; font-family:var(--font); color:var(--ink); }
.fpi-ov.show { opacity:1; }
.fpi-ov * { box-sizing:border-box; }
.fpi-blatt { position:relative; width:100%; max-width:640px; max-height:86vh; max-height:86dvh; display:flex; flex-direction:column;
  border-radius:22px 22px 0 0; background:var(--fpi-glas);
  -webkit-backdrop-filter:blur(30px) saturate(170%); backdrop-filter:blur(30px) saturate(170%);
  padding-bottom:env(safe-area-inset-bottom); transform:translateY(16px); transition:transform .24s; }
.fpi-ov.show .fpi-blatt { transform:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .fpi-blatt { background:var(--card); } }
.fpi-blatt.mittig { align-self:center; width:calc(100% - 34px); max-width:420px; max-height:80vh; max-height:80dvh; border-radius:22px;
  padding-bottom:0; box-shadow:0 20px 54px rgba(12,21,38,.30); }
.fpi-griff { width:38px; height:4px; border-radius:2px; background:var(--muted-2); opacity:.5; margin:9px auto 0; flex:0 0 auto; }
.fpi-medaillon { position:absolute; top:-27px; left:50%; transform:translateX(-50%); width:54px; height:54px;
  border-radius:27px; display:flex; align-items:center; justify-content:center; color:#fff; z-index:2;
  background:linear-gradient(140deg, var(--fpi-dunkel), var(--fpi-hell)); box-shadow:0 8px 20px rgba(16,21,95,.28), 0 0 0 5px var(--card); }
.fpi-fkopf { display:flex; align-items:center; gap:11px; padding:13px 17px 11px; flex:0 0 auto; }
.fpi-ftitel { flex:1 1 auto; min-width:0; }
.fpi-ftitel b { display:block; font-size:17px; font-weight:800; color:var(--fpi-ink); line-height:1.25; }
.fpi-ftitel span { display:block; font-size:11.5px; font-weight:600; color:var(--fpi-schwach); margin-top:1px; }
.fpi-blatt.mittig .fpi-ftitel { visibility:hidden; }
.fpi-zurueck, .fpi-zu { width:32px; height:32px; border-radius:16px; border:0; background:var(--tint-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0; color:var(--fpi-ink); }
.fpi-zu { color:var(--fpi-leise); }
.fpi-rumpf { overflow-y:auto; padding:2px 15px 20px; display:flex; flex-direction:column; gap:11px; scrollbar-width:none; }
.fpi-rumpf::-webkit-scrollbar { width:0; }
.fpi-blatt.mittig .fpi-rumpf { padding:2px 22px 20px; text-align:center; gap:0; }

.fpi-reiter { display:flex; gap:3px; background:var(--tint-2); border-radius:12px; padding:3px; }
.fpi-reiter button { flex:1 1 0; border:0; background:none; padding:9px 10px; border-radius:10px; font:inherit;
  font-size:12.5px; font-weight:800; color:var(--fpi-leise); cursor:pointer; }
.fpi-reiter button[aria-selected="true"] { background:var(--card); color:var(--fpi-ink); box-shadow:0 1px 3px rgba(16,21,95,.10); }
.fpi-gruppe { font-size:11px; font-weight:800; color:var(--fpi-leise); text-transform:uppercase; letter-spacing:.075em; padding:8px 2px 0; }
.fpi-hinweis { margin:0; padding:1px 4px 0; font-size:12px; line-height:1.45; color:var(--fpi-schwach); }

/* Detail */
.fpi-woche { margin:0 0 7px; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--fpi-akzent); }
.fpi-dtitel { margin:0 0 6px; font-size:19px; font-weight:800; line-height:1.26; color:var(--fpi-ink); overflow-wrap:anywhere; }
.fpi-etikett { margin:0 0 10px; font-size:12.5px; font-weight:700; color:var(--fpi-leise); line-height:1.4; }
.fpi-text { margin:6px 0 16px; font-size:14px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere; }
.fpi-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; background:var(--fpi-blass); color:var(--fpi-ink);
  border-radius:10px; padding:7px 13px; font-size:11.5px; font-weight:800; }
.fpi-chip span { opacity:.62; font-weight:700; }
.fpi-streit { display:flex; gap:10px; align-items:flex-start; background:var(--fpi-streit); border-radius:13px;
  padding:13px 14px; margin-top:16px; text-align:left; }
.fpi-streit svg { flex:0 0 auto; color:var(--amber); margin-top:1px; }
.fpi-streit p { margin:0; font-size:12.5px; line-height:1.48; color:var(--fpi-leise); }
.fpi-streit b { color:var(--ink); font-weight:800; }
.fpi-mehr { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:16px;
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:13px; cursor:pointer; font:inherit;
  font-size:13px; font-weight:800; color:var(--fpi-ink); }
/* [1.3] Langer Text (mehr als drei Zeilen): linksbuendig, der Rumpf scrollt, Kopf bleibt stehen. */
.fpi-text.fpi-lang { text-align:left; }

/* Supplement-Steckbrief (DESIGN 3.13) */
.fpi-blatt.fpi-sb .fpi-rumpf { text-align:left; gap:0; }
.fpi-blatt.fpi-sb .fpi-dtitel { text-align:center; margin-bottom:12px; }
.fpi-sb .fpi-gruppe { padding:16px 2px 6px; }
.fpi-sb-plan { background:var(--fpi-blass); border-radius:13px; padding:12px 14px; margin-top:4px; }
.fpi-sb-pkopf { font-size:11px; font-weight:800; color:var(--fpi-dunkel); text-transform:uppercase; letter-spacing:.075em; margin-bottom:6px; }
.fpi-sb-pz { display:flex; gap:10px; justify-content:space-between; padding:4px 0; font-size:13px; line-height:1.45; }
.fpi-sb-pz span { color:var(--fpi-leise); font-weight:600; flex:0 0 auto; }
.fpi-sb-pz b { color:var(--fpi-dunkel); font-weight:800; text-align:right; overflow-wrap:anywhere; }
.fpi-sb-eintrag { margin:0 0 9px; font-size:13.5px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.fpi-sb-eintrag b { color:var(--ink); font-weight:800; }
.fpi-sb-satz { margin:8px 0 0; font-size:12px; font-style:italic; line-height:1.5; color:var(--fpi-schwach); }
.fpi-sb-nkopf { display:flex; align-items:center; gap:6px; }
.fpi-sb-nkopf svg { color:var(--amber); }
.fpi-sb-nicht { background:var(--amber-100); border-radius:13px; padding:10px 14px 2px; }
.fpi-sb-nicht .fpi-sb-eintrag { padding-left:10px; }
.fpi-sb-nicht .fpi-sb-hervor { font-weight:800; color:var(--ink); border-left:3px solid var(--amber); padding-left:7px; }

/* Block „Tipps & Infos" unten im Fahrplan-Bereich (P7, Vorlage 05_Fahrplan.md): Kopf mit „Tipps n" und
   „Infos n", darunter das Karussell der vorderen Eintraege mit Art-Schild. */
.fpi-ti { display:flex; flex-direction:column; gap:12px; }
.fpi-ti-kopf { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fpi-ti-kopf b { font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.3px; }
.fpi-ti-kopf span { display:flex; gap:6px; }
.fpi-ti .fpi-ti-zahl { border:0; border-radius:14px; height:30px; padding:0 12px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  background:var(--fpi-blass); color:var(--fpi-ink); position:relative; }
/* Sollte 45/F8: sichtbar 30 px, getippt wird auf 44 px. */
.fpi-ti .fpi-ti-zahl::after { content:''; position:absolute; inset:-7px -3px; }
.fpi-ti-reihe { margin:0 -20px; padding:2px 20px 8px; }
.fpi-ti-reihe .fpi-kk { flex-basis:200px; width:200px; min-height:118px; border-radius:20px; border:var(--card-border); box-shadow:var(--shadow-card); }
.fpi-tk-art { font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:8px; background:var(--fpi-blass); color:var(--fpi-ink); }

/* Fenster: durchblaettern mit Pfeilen am Rand (mittig), Stelle klein unter „Alle ansehen" */
.fpi-stelle { margin:10px 0 0; font-size:11.5px; font-weight:800; color:var(--fpi-schwach); font-variant-numeric:tabular-nums; }
.fpi-blaettern button { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; z-index:3;
  border:3px solid var(--card); cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; padding:0;
  background:linear-gradient(135deg, var(--fpi-dunkel), var(--fpi-hell)); box-shadow:var(--shadow); }
.fpi-blaettern .fpi-vor { left:-14px; }
.fpi-blaettern .fpi-nach { right:-14px; }
.fpi-blaettern button:disabled { opacity:0; pointer-events:none; }
.fpi-rumpf.fpi-rein-r { animation:fpiReinR .22s ease; }
.fpi-rumpf.fpi-rein-l { animation:fpiReinL .22s ease; }
@keyframes fpiReinR { from { opacity:.2; transform:translateX(18px); } to { opacity:1; transform:none; } }
@keyframes fpiReinL { from { opacity:.2; transform:translateX(-18px); } to { opacity:1; transform:none; } }

.fpi-ov :focus-visible, .fpi :focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  .fpi-ov, .fpi-blatt { transition:none; }
  .fpi-rumpf.fpi-rein-r, .fpi-rumpf.fpi-rein-l { animation:none; }
}