/*
 * 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 */
}
.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:6px 4px; margin:-6px -4px;
  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-dunkel); 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-dunkel); }

/* 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; display:flex; flex-direction:column;
  border-radius:22px 22px 0 0; background:rgba(255,255,255,.93);
  -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; 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-dunkel); 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-dunkel); }
.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-dunkel); 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-dunkel); 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-dunkel);
  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-dunkel); }
.fpi-quelle { margin:11px 0 0; font-size:11.5px; font-weight:600; color:var(--fpi-schwach); }

.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; } }