/* TN2121_H_DISPO_INFO 21.10.2026: the info page dispolotse-dispo.html (+ en/) and the Dispo teaser of the start page.
   Loaded ONLY by those four pages (not in the hp.css bundle: budget). Only colour keys of tokens.css — dark and light
   follow by themselves (the SVG chain graphic too: its parts are coloured here, never inside the SVG). */

/* ── start page teaser (inside the hero, above the H1) ── */
.di-teaser { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--ab3); padding: 14px 18px;
  text-decoration: none; color: var(--text); border: 1px solid var(--ton); background: var(--tonhauch2); max-width: 640px; }
.di-teaser:hover { background: var(--tonhauch); }
.di-teaser:focus-visible, .di-teaser-klein:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.di-teaser-zeichen { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--ton); color: var(--auf-ton); }
.di-teaser-zeichen .i { width: 26px; height: 26px; }
.di-teaser-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.di-teaser-text b { font-size: 21px; line-height: 1.15; color: var(--text-gold); }
.di-teaser-text .mini { color: var(--text); line-height: 1.35; }
.di-teaser-text .chip { align-self: flex-start; }
.di-teaser > .i-k { flex: none; color: var(--ton); width: 22px; height: 22px; }
.di-teaser-klein { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--ab4); font-size: 14px;
  color: var(--matt); text-decoration: none; max-width: 640px; }
.di-teaser-klein:hover { color: var(--text); }
.di-teaser-klein .i-k { flex: none; color: var(--ton); }

/* ── start page update notice (TT2510_H_UPDATE_BANNER 25.10.2026, v3\update_hinweis.py — removes itself after
   26.10.2026 06:00 Berlin; only tokens, wraps on a 360/390 px phone, never wider than the page) ── */
.ub-hinweis { margin-top: var(--ab3); margin-bottom: var(--ab3); }
.ub-hinweis p { margin: 0; padding: 10px 14px; border: 1px solid var(--ton); border-radius: 12px;
  background: var(--tonhauch2); color: var(--text); font-size: 15px; line-height: 1.45; overflow-wrap: break-word; }
.ub-hinweis b { color: var(--text-gold); }
/* TN2627_H_TEAMBAND 26.10.2026 (v3\team_hinweis.py): permanent team strip = same box; its link reads as a link */
.team-hinweis a { color: var(--text-gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.team-hinweis a:hover { color: var(--text); }
.team-hinweis a:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; border-radius: 4px; }

/* ── info page ── */
.di-rumpf { display: flex; flex-direction: column; gap: var(--ab6); }
.di-start { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--ab3); padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--ton); background: var(--tonhauch2); color: var(--text-gold);
  font-weight: 600; }
.di-start .i-k { color: var(--ton); }
.di-schritte { list-style: none; margin: var(--ab4) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ab3); }
.di-schritte li { display: flex; flex-direction: column; gap: 6px; padding: var(--ab4) var(--ab3); min-width: 0; }
.di-schritte li b { color: var(--text); }
.di-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ab3); }
.di-karte { padding: var(--ab5); min-width: 0; display: flex; flex-direction: column; gap: var(--ab3); }
.di-karte h2, .di-karte h3, .di-karte p { margin: 0; }
.di-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.di-liste li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.di-liste li > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text-gold); }
.di-wiki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ab3); }
.di-wiki a { display: flex; flex-direction: column; gap: 6px; padding: var(--ab4); min-width: 0; text-decoration: none;
  color: var(--text); }
.di-wiki a:hover { border-color: var(--ton); }
.di-wiki a .mini { color: var(--matt); }
.di-hp { padding: var(--ab5); display: flex; flex-direction: column; gap: var(--ab3); min-width: 0; }
.di-hp h2, .di-hp p { margin: 0; }
.di-bausteine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.di-bausteine li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rand); background: var(--mulde);
  font-size: 14px; line-height: 1.3; max-width: 100%; }
.di-schluss { padding: var(--ab5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ab3); }
.di-schluss p { margin: 0; }
.di-rumpf .knopf { white-space: normal; text-align: left; }

@media (max-width: 1100px) {
  .di-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .di-wiki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .di-teaser { padding: 12px 14px; gap: 12px; }
  .di-teaser-zeichen { width: 40px; height: 40px; }
  .di-teaser-text b { font-size: 19px; }
  .di-zwei { grid-template-columns: minmax(0, 1fr); }
  /* steps + wiki cards: one sideways swipe row (the HP's rs-karussell pattern) instead of one long column */
  .di-schritte, .di-wiki { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .di-schritte::-webkit-scrollbar, .di-wiki::-webkit-scrollbar { display: none; }
  .di-schritte > *, .di-wiki > * { scroll-snap-align: start; }
  .di-rumpf { gap: var(--ab5); }
  .di-karte, .di-hp, .di-schluss { padding: var(--ab4); }
}

/* ── TN2121_H_DISPO_SIM 21.10.2026: the running Dispo preview (v3/dispo_sim.py + ds/dispo-sim.js) ──
   The map stage is ALWAYS night like the driver web sea map (seiten/hafen/seite.css pins --hf-*: „the sea map is always
   night“) — so its material colours are pinned HERE, once, as --sim-* on .dsim-buehne / .dsim-mini (the ONLY fixed colours of
   this file). Card, board and pool around it use the HP tokens, so light and dark follow. */
.dsim-buehne, .dsim-mini { --sim-meer: #0f2236; --sim-land: #2a3442; --sim-kueste: #8a7a55; --sim-gold: #d6a548;
  --sim-goldlinie: #c9973b; --sim-creme: #f3e6c5; --sim-nacht: #0b0e14; --sim-blau: #8fc3ea; --sim-trieb: #2e333b; }
.dsim-auf { margin: 0; color: var(--matt); }
/* look after the first pictures: the map is the hero (full width), card under it, then the board — two chains side by
   side and the pool as one row (no long column beside an empty one) */
.dsim { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ab3); }
.dsim-links { display: flex; flex-direction: column; gap: var(--ab2); min-width: 0; }
.dsim-buehne { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--sim-goldlinie);
  background: var(--sim-meer); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.dsim-karte { display: block; width: 100%; height: auto; }
.dsim-marke { position: absolute; bottom: 8px; left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 700; letter-spacing: .02em; color: var(--sim-creme); background: rgba(11, 18, 32, .78);
  border: 1px solid var(--sim-goldlinie); pointer-events: none; }
.dsim-meer { fill: var(--sim-meer); }
.dsim-land polygon { fill: var(--sim-land); stroke: var(--sim-kueste); stroke-width: .7; stroke-linejoin: round; }
.dsim-gebiet { fill: var(--sim-gold); fill-opacity: .92; font: 700 16px/1 system-ui, sans-serif; letter-spacing: .14em;
  text-anchor: middle; paint-order: stroke; stroke: var(--sim-nacht); stroke-width: 4px; }
.dsim-seeweg { fill: none; stroke: rgba(214, 165, 72, .55); stroke-width: 1.2; stroke-dasharray: 4 4; }
.dsim-flugbahn { fill: none; stroke: rgba(150, 200, 255, .34); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
.dsim-flughafen circle { fill: var(--sim-meer); stroke: var(--sim-blau); stroke-width: 1.6; }
.dsim-iata { fill: var(--sim-blau); font: 700 10px/1 system-ui, sans-serif; paint-order: stroke; stroke: var(--sim-nacht);
  stroke-width: 3px; }
.dsim-hafen polygon { fill: var(--sim-gold); stroke: var(--sim-nacht); stroke-width: .8; }
.dsim-hafenname { fill: var(--sim-creme); font: 700 12px/1 system-ui, sans-serif; paint-order: stroke;
  stroke: var(--sim-nacht); stroke-width: 3px; }
.dsim-fz { cursor: pointer; outline: none; }
.dsim-treffer { fill: transparent; stroke: none; }
.dsim-kielwasser { fill: none; stroke: rgba(220, 235, 255, .55); stroke-width: 2.4; stroke-linecap: round; }
.dsim-bootform { fill: var(--sim-creme); stroke: var(--sim-nacht); stroke-width: .6; }
.dsim-kondens { fill: none; stroke: rgba(235, 242, 255, .16); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dsim-kondens-kern { fill: none; stroke: rgba(245, 248, 255, .62); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.dsim-glanz { fill: rgba(255, 214, 130, .2); }
.dsim-rumpf { fill: var(--sim-gold); stroke: var(--sim-nacht); stroke-width: 1.1; stroke-linejoin: round; paint-order: stroke; }
.dsim-trieb { fill: var(--sim-trieb); }
.dsim-fz:hover .dsim-bootform, .dsim-aktiv .dsim-bootform { fill: #fff1c9; stroke: var(--sim-gold); stroke-width: 1.2; }
.dsim-fz:hover .dsim-glanz, .dsim-aktiv .dsim-glanz { fill: rgba(255, 214, 130, .45); }
.dsim-aktiv .dsim-treffer { fill: rgba(255, 214, 130, .14); stroke: var(--sim-gold); stroke-width: 1.2; }
.dsim-fz:focus-visible .dsim-treffer { stroke: #fff1c9; stroke-width: 2; }
.dsim-am-boden .dsim-glanz { fill: rgba(255, 214, 130, .1); }

/* the click card under the map (HP tokens, gold frame like the web card) */
.dsim-karteninfo { min-width: 0; }
.dsim-karteninfo > p { margin: 0; }
.dsim-info { display: grid; gap: 6px; padding: var(--ab3); border: 2px solid var(--ton); border-radius: 14px;
  background: var(--karte2); color: var(--text); overflow-wrap: anywhere; }
.dsim-info-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dsim-art { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-gold); }
.dsim-name { font-size: 1.1rem; }
.dsim-marke-klein { margin-left: auto; padding: 1px 8px; border: 1px dashed var(--naht); border-radius: 999px;
  font-size: .72rem; font-weight: 600; color: var(--matt); white-space: nowrap; }
.dsim-route { font-weight: 700; }
.dsim-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dsim-chip { padding: 2px 9px; border: 1px solid var(--rand); border-radius: 999px; font-size: .8rem; font-weight: 700; }
.dsim-chip-see { border-color: var(--frei); color: var(--frei); }
.dsim-chip-laedt, .dsim-chip-loescht { border-color: var(--achtung); color: var(--achtung); }
.dsim-eta { font-variant-numeric: tabular-nums; }
.dsim-ladung { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--matt); }
.dsim-balken { flex: 1 1 auto; height: 10px; overflow: hidden; border-radius: 999px; background: var(--mulde);
  border: 1px solid var(--rand); }
.dsim-balken i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ton), var(--text-gold)); }
.dsim-bord { margin: 2px 0 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--matt); }
.dsim-fracht { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dsim-fracht li { display: inline-flex; gap: 6px; padding: 3px 10px; border: 1px solid var(--rand); border-radius: 999px;
  background: var(--mulde); font-size: .88rem; }
.dsim-t, .dsim-zahl { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-gold); white-space: nowrap; }

/* the board + pool (look of the web Dispo board: cards with the deadline band on the left) */
.dsim-tafel { display: flex; flex-direction: column; gap: var(--ab2); min-width: 0; padding: var(--ab3);
  border: 1px solid var(--naht); border-radius: 14px; background: var(--mulde); }
.dsim-tafelkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px;
  margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-gold); }
.dsim-tafelkopf .dsim-marke-klein { letter-spacing: 0; text-transform: none; }
.dsim-poolkopf { margin-top: 4px; }
.dsim-ketten { display: flex; flex-direction: column; gap: var(--ab2); }
.dsim-kette, .dsim-auftrag { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--rand); border-left: 4px solid var(--frei); border-radius: 10px;
  background: var(--karte2); }
.dsim-band-gelb { border-left-color: var(--achtung); }
.dsim-band-rot { border-left-color: var(--gefahr); }
.dsim-kette-kopf, .dsim-auftrag-kopf, .dsim-auftrag-fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dsim-auftrag-kopf, .dsim-auftrag-fuss { justify-content: space-between; }
.dsim-auftrag-fuss { font-size: .82rem; color: var(--matt); }
.dsim-nr { font-family: var(--mono); color: var(--text-gold); }
.dsim-kette-ware { font-weight: 700; min-width: 0; }
.dsim-kette-weg { margin: 0; font-size: .82rem; color: var(--matt); }
.dsim-band { margin-left: auto; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: .72rem;
  font-weight: 700; white-space: nowrap; color: var(--frei); }
.dsim-band-gelb .dsim-band { color: var(--achtung); }
.dsim-band-rot .dsim-band { color: var(--gefahr); }
.dsim-fertig { border-left-color: var(--frei); }
.dsim-fertig .dsim-band { color: var(--frei); }
.dsim-etappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dsim-etappe { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px; background: var(--mulde); font-size: .84rem; transition: opacity .4s; }
.dsim-etappe-text { display: flex; flex-direction: column; min-width: 0; }
.dsim-mittel { font-size: .76rem; color: var(--matt); }
.dsim-st { font-size: .78rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--matt); }
.dsim-ik { width: 20px; height: 20px; fill: currentColor; color: var(--text-gold); }
.dsim-geplant { opacity: .58; }
.dsim-unterwegs { box-shadow: inset 3px 0 0 var(--ton); }
.dsim-unterwegs .dsim-st { color: var(--text-gold); }
.dsim-da .dsim-st { color: var(--frei); }
.dsim-pool { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dsim-neu-marke { position: absolute; top: -8px; right: 10px; padding: 1px 8px; border-radius: 999px; font-size: .7rem;
  font-weight: 800; color: var(--auf-ton); background: var(--ton); }
@media (prefers-reduced-motion: no-preference) {
  .dsim-neu { animation: dsim-rein .7s ease-out; }
  @keyframes dsim-rein { from { opacity: 0; transform: translateY(-12px); } }
}

/* the start page teaser: the icon box became the small looping preview (SMIL in the SVG; no JS) */
.di-teaser-zeichen.dsim-mini-rahmen { width: 132px; height: 64px; padding: 0; border-radius: 10px; overflow: hidden;
  background: none; }
.dsim-mini { display: block; width: 100%; height: 100%; }
.dsim-mini-meer { fill: var(--sim-meer); }
.dsim-mini-land { fill: var(--sim-land); stroke: var(--sim-kueste); stroke-width: .8; }
.dsim-mini-see { fill: none; stroke: rgba(214, 165, 72, .6); stroke-width: 1; stroke-dasharray: 3 3; }
.dsim-mini-luft { fill: none; stroke: rgba(150, 200, 255, .45); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
.dsim-mini-hafen { fill: var(--sim-gold); }
.dsim-mini-boot { fill: var(--sim-creme); stroke: var(--sim-nacht); stroke-width: .5; }
.dsim-mini-flieger path { fill: var(--sim-gold); stroke: var(--sim-nacht); stroke-width: 1.2; }
.dsim-mini-play circle { fill: rgba(11, 18, 32, .62); stroke: var(--sim-gold); stroke-width: 1; }
.dsim-mini-play path { fill: var(--sim-creme); }
.dsim-mini-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .dsim-mini-lauf { display: none; }
  .dsim-mini-still { display: inline; }
}

@media (min-width: 900px) {
  .dsim-ketten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .dsim-pool { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dsim-fracht { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .di-teaser-zeichen.dsim-mini-rahmen { width: 88px; height: 43px; }
}
@media (max-width: 600px) {
  /* phone: the ~340 px map keeps readable port names; airport codes and region words step back */
  .dsim-hafenname { font-size: 24px; stroke-width: 5px; }
  .dsim-iata { display: none; }
  .dsim-gebiet { font-size: 26px; stroke-width: 6px; }
  .dsim-flughafen circle { stroke-width: 3; }
  .dsim-hafen polygon { transform-box: fill-box; transform-origin: center; transform: scale(1.6); }
  .dsim-etappe { grid-template-columns: 20px minmax(0, 1fr); }
  .dsim-st { grid-column: 2; text-align: left; }
  .dsim-tafel { padding: var(--ab2); }
  /* phone: no long board — each chain shows only the leg under way and the next planned one */
  .dsim-etappe.dsim-da, .dsim-geplant ~ .dsim-geplant { display: none; }
  .dsim-marke { font-size: 11px; bottom: 6px; left: 6px; }
}