/* ---------- Jupi-Kart ---------- */
* { box-sizing: border-box; }
/* Vollbild-Spiel nach dem Root-&-Route-Modell: Das Spielfeld füllt alles,
   Anzeigen liegen als Overlays darüber. Eigene Präfixe .jk_ */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #bfe8ff;
  font-family: system-ui, "Segoe UI", sans-serif;
}

/* Das [hidden]-Attribut muss gegen display-Angaben gewinnen (JP-Simulator-Lektion) */
[hidden] { display: none !important; }

#jk_feld { position: fixed; inset: 0; }
#jk_feld canvas { display: block; }

/* ---------- Titelzeile ---------- */
.jk_leiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 1rem;
  color: #fff;
  background: linear-gradient(135deg, #2e7d32, #43a047);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.jk_zurueck {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.jk_zurueck:hover { text-decoration: underline; }
.jk_titel { font-weight: 800; font-size: 1.1rem; }
.jk_vermerk {
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.18);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
.jk_leiste_knopf {
  margin-left: auto;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}
.jk_leiste_knopf:hover { background: rgba(255, 255, 255, 0.35); }
#jk_menue_knopf { margin-left: auto; }
#jk_ton_kurz { margin-left: 0; font-size: 1rem; }

/* ---------- Cockpit-Anzeigen ---------- */
/* Dunkle Glas-Karten wie ein Armaturenbrett */
.jk_hud {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.jk_hud_links {
  position: absolute;
  top: 2.9rem; left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.jk_runde, .jk_zeit, .jk_platz {
  background: rgba(16, 22, 28, 0.72);
  color: #fff;
  border-radius: 0.7rem;
  padding: 0.25rem 0.7rem;
  font-weight: 800;
  width: max-content;
  font-size: clamp(13px, 1.5vmin + 7px, 19px);
}
.jk_platz { background: rgba(183, 134, 11, 0.85); }
.jk_zeit {
  font-variant-numeric: tabular-nums;
  color: #ffd54f;
}

.jk_minimap_karte, .jk_tacho_karte {
  position: absolute;
  bottom: 0.9rem;
  background: rgba(16, 22, 28, 0.6);
  border: 2px solid rgba(57, 66, 77, 0.9);
  border-radius: 1.2rem;
  padding: 0.35rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.jk_minimap_karte { left: 0.9rem; }
.jk_tacho_karte { right: 0.9rem; }
.jk_minimap_karte canvas, .jk_tacho_karte canvas { display: block; }

/* ---------- Item-Slot (oben Mitte, wie im Vorbild ein festes Fach) ---------- */
.jk_item_slot {
  position: absolute;
  top: 2.9rem; left: 50%;
  transform: translateX(-50%);
  width: 5.4rem;
  min-height: 5.4rem;
  background: rgba(16, 22, 28, 0.72);
  border: 2px solid rgba(57, 66, 77, 0.9);
  border-radius: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.5rem;
  text-align: center;
}
.jk_item_slot:empty::before { content: ''; }
.jk_item_slot #jk_item_emoji {
  font-size: 2.3rem;
  line-height: 1.15;
  min-height: 2.6rem;
}
.jk_item_slot #jk_item_emoji svg { display: block; width: 2.6rem; height: 2.6rem; }
.jk_item_slot #jk_item_name {
  color: #cfd8e0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
}
/* Roulette: das Fach zittert, bis das Item steht */
.jk_item_roulette {
  border-color: #ffd54f;
  animation: jk_item_wackel 0.16s linear infinite;
}
@keyframes jk_item_wackel {
  0% { transform: translateX(-50%) rotate(-2.5deg); }
  50% { transform: translateX(-50%) rotate(2.5deg); }
  100% { transform: translateX(-50%) rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .jk_item_roulette { animation: none; }
}

/* ---------- Countdown ---------- */
.jk_countdown {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 14vmin, 7rem);
  font-weight: 900;
  color: #17497f;
  text-shadow: 0 2px 0 #fff, 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.jk_pop { animation: jk_pop 0.5s ease-out; }
@keyframes jk_pop {
  0% { transform: scale(1.8); opacity: 0; }
  60% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .jk_pop { animation: none; }
}

/* ---------- Overlays (Menü / Ziel) ---------- */
.jk_overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 30, 20, 0.45);
  padding: 1rem;
}
.jk_karte {
  background: #fff;
  border-radius: 1.15rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: 1.4rem 1.8rem;
  width: min(92vw, 30rem);
  max-height: 92vh;
  overflow: auto;
}

/* Hauptmenü: breiter, scrollbar, mit Abschnitten */
.jk_menue_karte {
  background: #fff;
  border-radius: 1.15rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: 1.3rem 1.6rem;
  width: min(94vw, 43rem);
  max-height: 92vh;
  overflow: auto;
}
.jk_abschnitt_titel {
  margin: 0.9rem 0 0.45rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7480;
}
.jk_wahl_reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.jk_wahl {
  border: 2px solid #c8d2dc;
  border-radius: 999px;
  background: #fff;
  color: #17497f;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.jk_wahl:hover:not(:disabled) { border-color: #43a047; }
.jk_wahl.jk_aktiv {
  background: #43a047;
  border-color: #43a047;
  color: #fff;
}
.jk_wahl:disabled {
  color: #9aa5b0;
  background: #f2f4f6;
  cursor: default;
}
.jk_wahl.jk_klein { font-size: 0.85rem; padding: 0.35rem 0.8rem; }
.jk_bald {
  font-size: 0.7rem;
  background: #e6ebf0;
  color: #6b7480;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
}
.jk_runden_wahl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #17497f;
}
#jk_runden_wert {
  min-width: 1.6rem;
  text-align: center;
  font-size: 1.1rem;
}

/* Strecken-Karten mit Vorschau */
.jk_strecken_reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.jk_strecke_karte {
  border: 2px solid #c8d2dc;
  border-radius: 0.9rem;
  background: #f7fafc;
  padding: 0.5rem 0.6rem 0.55rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 12rem;
}
.jk_strecke_karte canvas { display: block; border-radius: 0.5rem; }
.jk_strecke_name { font-weight: 800; color: #17497f; font-size: 0.95rem; }
.jk_strecke_best { font-size: 0.75rem; color: #b8860b; font-weight: 700; }
.jk_strecke_karte:hover { border-color: #43a047; }
.jk_strecke_karte.jk_aktiv {
  border-color: #43a047;
  background: #e8f5e9;
  box-shadow: 0 0 0 2px rgba(67, 160, 71, 0.35);
}

.jk_knopf_reihe {
  display: flex;
  gap: 0.6rem;
}
.jk_knopf_reihe .jk_knopf_gross { flex: 1; }
.jk_knopf_grau { background: #78848f !important; }
.jk_knopf_grau:hover { background: #5f6a74 !important; }
.jk_karte h1 {
  margin: 0 0 0.4rem;
  color: #2e7d32;
  font-size: 1.9rem;
}
.jk_karte h2 { margin: 0 0 0.6rem; color: #2e7d32; }
.jk_lernsatz {
  background: #e3f2fd;
  border-left: 4px solid #1e88e5;
  border-radius: 0.4rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  margin: 0 0 0.8rem;
}
.jk_steuerung { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.jk_steuerung li { margin-bottom: 0.3rem; }
.jk_hinweis { font-size: 0.9rem; color: #555; margin: 0 0 1rem; }
.jk_bestzeile { font-weight: 700; color: #b8860b; }
.jk_knopf_gross {
  display: block;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: #43a047;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
}
.jk_knopf_gross:hover { background: #2e7d32; }

.jk_runden_tabelle { width: 100%; border-collapse: collapse; margin-bottom: 0.8rem; }
.jk_runden_tabelle td { padding: 0.25rem 0.4rem; border-bottom: 1px solid #eee; }
.jk_runden_tabelle td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.jk_runden_tabelle .jk_summe td { font-weight: 800; border-bottom: none; }
#jk_durchschnitt { font-weight: 600; }
#jk_endstand { font-weight: 800; color: #2e7d32; }
#jk_best { font-weight: 700; color: #b8860b; }

/* ---------- Touch-Knöpfe ---------- */
.jk_touch {
  display: none; /* nur bei Touch-Geräten */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 15;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 1rem 1rem;
  pointer-events: none;
}
.jk_touch_links, .jk_touch_rechts {
  display: flex;
  gap: 0.6rem;
  pointer-events: auto;
}
.jk_t_knopf {
  width: clamp(3.4rem, 9vmin, 5rem);
  height: clamp(3.4rem, 9vmin, 5rem);
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #17497f;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.jk_t_knopf.jk_t_gas { background: rgba(102, 187, 106, 0.85); color: #fff; }
.jk_t_knopf.jk_t_item { background: rgba(255, 213, 79, 0.9); font-size: 1.5rem; }
.jk_t_knopf.jk_gedrueckt { background: #43a047; color: #fff; transform: scale(0.93); }
.jk_t_stick {
  position: relative; width: clamp(8.5rem, 23vmin, 11.5rem); height: clamp(8.5rem, 23vmin, 11.5rem);
  flex: none; border: 2px solid rgba(255,255,255,.45); border-radius: 50%;
  background: rgba(15,35,55,.32); color: white; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.18); transition: background .15s;
}
.jk_t_stick.jk_stick_aktiv { background: rgba(15,35,55,.45); }
.jk_stick_achse { position: absolute; inset: 0; display: grid; place-items: center; opacity: .5; font-size: .8rem; pointer-events: none; }
.jk_stick_griff { position: absolute; width: 42%; height: 42%; left: 29%; top: 29%; border-radius: 50%; background: rgba(244,244,238,.7); box-shadow: 0 2px 6px #0006; transform: translateX(var(--jk-stick-x, 0px)); pointer-events: none; }/* Pedale: rechts unten, Drift sitzt darüber */
.jk_touch_rechts { flex-direction: column; align-items: flex-end; gap: .6rem; }
.jk_t_drift { background: rgba(255, 152, 0, .85); color: #fff; }
.jk_pedale { display: flex; align-items: flex-end; gap: .7rem; }
.jk_pedal {
  position: relative; border: none; padding: 0; cursor: pointer;
  display: grid; place-items: end center; padding-bottom: .35rem;
  color: #eee; font-weight: 800; font-size: .8rem; letter-spacing: .04em;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #5b6068, #2c2f34);
  border-radius: .6rem .6rem .9rem .9rem;
  box-shadow: 0 4px 0 #15171a, 0 6px 12px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.18);
  transform-origin: bottom center; transition: transform .05s;
}
.jk_pedal_bremse { width: clamp(4.2rem, 11vmin, 5.8rem); height: clamp(4.2rem, 11vmin, 5.8rem); }
.jk_pedal_gas { width: clamp(3.4rem, 9vmin, 4.6rem); height: clamp(6rem, 17vmin, 8.2rem); }
.jk_pedal_riefen {
  position: absolute; left: 12%; right: 12%; top: 9%; bottom: 1.6rem; border-radius: .3rem;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.55) 0 3px, transparent 3px 9px);
  pointer-events: none;
}
.jk_pedal_gas .jk_pedal_riefen { background: repeating-linear-gradient(180deg, rgba(0,0,0,.55) 0 3px, transparent 3px 9px), linear-gradient(#2e7d32,#2e7d32); background-blend-mode: normal; opacity: .9; }
.jk_pedal_bremse .jk_pedal_riefen { background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 3px, rgba(0,0,0,.35) 3px 9px); }
.jk_pedal_text { position: relative; pointer-events: none; }
.jk_pedal.jk_gedrueckt { transform: perspective(300px) rotateX(18deg) translateY(3px); box-shadow: 0 1px 0 #15171a, 0 2px 6px rgba(0,0,0,.4), inset 0 2px 6px rgba(0,0,0,.4); }
.jk_pedal_gas.jk_gedrueckt { background: linear-gradient(180deg, #43a047, #1b5e20); }
.jk_pedal_bremse.jk_gedrueckt { background: linear-gradient(180deg, #e53935, #8e1b17); }
@media (pointer: coarse) {
  .jk_touch { display: flex; }

  /* Auf Tablets weicht das Cockpit den Knöpfen aus:
     Minimap nach rechts oben, Tacho mittig nach unten */
  .jk_minimap_karte {
    left: auto;
    right: 0.9rem;
    bottom: auto;
    top: 6rem;
    transform: scale(0.8);
    transform-origin: top right;
  }
  .jk_tacho_karte {
    right: 50%;
    transform: translateX(50%) scale(0.85);
    transform-origin: bottom center;
    bottom: 0.3rem;
  }
  /* Der Item-Knopf steht über den Pfeilen und muss über der Zeit-Zeile
     bleiben - deshalb ein wenig kleiner als die Fahrknöpfe */
  .jk_t_item {
    width: clamp(2.9rem, 7.5vmin, 4.2rem);
    height: clamp(2.9rem, 7.5vmin, 4.2rem);
  }
}

/* ---------- Stufen-Wahl + Tipp ---------- */
.jk_stufen_tipp {
  margin: -0.4rem 0 0.5rem;
  font-size: 0.88rem;
  color: #455a64;
}

/* ---------- Sterne ---------- */
.jk_sterne {
  font-size: 1.5rem;
  font-weight: 800;
  color: #f9a825;
  letter-spacing: 0.05em;
  margin: 0.2rem 0 0.6rem;
}
.jk_strecke_sterne {
  font-size: 0.85rem;
  color: #f9a825;
  letter-spacing: 0.08em;
}

/* ---------- Merkbox im Zielbildschirm ---------- */
.jk_merkbox {
  text-align: left;
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  border-radius: 0.4rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #4e342e;
  margin: 0 0 0.8rem;
}

/* ---------- ❓-Hilfe in der Titelzeile (bleibt im Vollbild bedienbar) ---------- */
.jk_hilfe {
  position: fixed;
  top: 0.42rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  font-size: 0.85rem;
}
.jk_hilfe > summary {
  list-style: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 700;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  user-select: none;
}
.jk_hilfe > summary::-webkit-details-marker { display: none; }
.jk_hilfe > summary:hover { background: rgba(255, 255, 255, 0.35); }
.jk_hilfe[open] > summary { background: #fff; color: #2e7d32; }
.jk_hilfe_inhalt {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(30rem, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  color: #263238;
  border-radius: 0.8rem;
  padding: 0.8rem 1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  text-align: left;
  line-height: 1.45;
}
.jk_hilfe_inhalt p { margin: 0 0 0.5rem; }
.jk_hilfe_inhalt p:last-child {
  margin-bottom: 0;
  background: #e8f5e9;
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
}
@media (max-width: 720px) {
  .jk_hilfe { font-size: 0.78rem; top: 0.34rem; }
  .jk_hilfe_inhalt { width: 94vw; }
}

.jk_stufe_aktuell {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: #455a64;
}
.jk_stufe_aktuell b { color: #2e7d32; }

/* ---------- Netz-Cup: Hinweis im Menü, Lobby, Zurufe ---------- */
.jk_netz_hinweis {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #37474f;
  background: #e8f4fd;
  border-left: 4px solid #1e88e5;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
}
.jk_netz_karte {
  width: min(46rem, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 1.1rem;
  padding: 1.1rem 1.3rem 1.3rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  text-align: left;
}
.jk_netz_karte h2 {
  margin: 0 0 0.3rem;
  color: #2e7d32;
  font-size: 1.5rem;
}
.jk_netz_zu {
  font-size: 0.85rem;
  font-weight: 600;
  color: #607d8b;
  background: #eceff1;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  vertical-align: middle;
}
.jk_netz_kurz {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #37474f;
}
.jk_netz_rolle { margin-bottom: 0.8rem; }
.jk_netz_teil {
  background: #f5f7f8;
  border: 1px solid #dde3e6;
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem 0.9rem;
}
.jk_netz_schritte {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #37474f;
}
.jk_netz_code {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  border: 1px solid #b0bec5;
  border-radius: 0.5rem;
  padding: 0.45rem 0.55rem;
  margin: 0.35rem 0 0;
  resize: vertical;
  background: #fff;
  word-break: break-all;
}
.jk_netz_code:read-only { background: #eef3f5; }
.jk_netz_knopf { margin-top: 0.35rem; }
.jk_netz_slotinfo {
  display: block;
  margin: 0.25rem 0 0.2rem;
  font-size: 0.8rem;
  color: #546e7a;
}
.jk_netz_titel {
  margin: 0.9rem 0 0.3rem;
  font-size: 1rem;
  color: #2e7d32;
}
.jk_netz_liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.jk_netz_liste li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid #e0e5e8;
  border-radius: 0.55rem;
  padding: 0.35rem 0.6rem;
}
.jk_netz_punkt {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid rgba(0, 0, 0, 0.25);
}
.jk_netz_wer { font-weight: 700; }
.jk_netz_art { margin-left: auto; color: #546e7a; font-size: 0.82rem; }
.jk_netz_status {
  margin: 0.7rem 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #37474f;
}
.jk_netz_status.jk_netz_gut { color: #2e7d32; }
.jk_netz_status.jk_netz_schlecht { color: #c62828; }

/* Zurufe während der Fahrt (nur vorgefertigte Sätze) */
.jk_zurufe {
  position: fixed;
  left: 50%;
  bottom: 0.4rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 6;
}
.jk_zurufe_titel {
  font-size: 0.78rem;
  font-weight: 700;
  color: #eceff1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.jk_zuruf {
  border: none;
  border-radius: 999px;
  background: rgba(16, 22, 28, 0.8);
  color: #eceff1;
  font: 600 0.8rem system-ui, sans-serif;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.jk_zuruf:hover { background: rgba(46, 125, 50, 0.9); }
@media (max-width: 720px) {
  .jk_netz_karte { padding: 0.8rem 0.9rem 1rem; }
  .jk_netz_karte h2 { font-size: 1.25rem; }
  .jk_zurufe { bottom: 5.2rem; gap: 0.25rem; }
  .jk_zuruf { font-size: 0.72rem; padding: 0.3rem 0.55rem; }
}

/* Zuruf-Meldung: kurze Einblendung "P2: Stark!" */
.jk_zuruf_meldung {
  position: fixed;
  left: 50%;
  top: 3.2rem;
  transform: translateX(-50%);
  z-index: 7;
  background: rgba(16, 22, 28, 0.88);
  color: #fff;
  font: 600 1rem system-ui, sans-serif;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  animation: jk_zuruf_pop 0.25s ease-out;
}
@keyframes jk_zuruf_pop {
  from { transform: translateX(-50%) scale(0.8); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ---------- Rennmenü und Cockpit, Oktober 2026 ---------- */
/* Klare Auswahlkarten; die 3D-Strecke bleibt der Hintergrund. */
.jk_leiste { gap: 0.65rem; background: #123c32; min-height: 48px; }
.jk_leiste_knopf { margin-left: 0; min-height: 32px; }
#jk_ton_kurz { margin-left: auto; }
#jk_menue_knopf { margin-left: 0; }
.jk_hilfe { top: 8px; z-index: 35; }
.jk_overlay { top: 48px; padding: 16px 20px 20px; background: rgba(12, 28, 35, 0.54); }
.jk_menue_karte {
  width: min(850px, 100%); max-height: 100%; padding: 24px 28px;
  border: 1px solid #d9e6df; border-radius: 24px;
  background: #f7faf7; color: #253b36;
  box-shadow: 0 24px 70px #071a3066;
}
.jk_menue_kopf { display: flex; align-items: center; gap: 16px; }
.jk_menue_kopf img { border-radius: 16px; }
.jk_menue_kopf h1 { margin: 0; font-size: 2.25rem; letter-spacing: -0.05em; color: #143c32; }
.jk_eyebrow { margin: 0 0 3px; font-size: 0.67rem; letter-spacing: 0.16em; font-weight: 800; color: #417260; }
.jk_untertitel { margin: 3px 0 0; color: #526b62; font-size: 0.9rem; }
.jk_lernsatz { margin: 16px 0; color: #254b60; font-size: 0.85rem; }
.jk_abschnitt_titel { color: #526b62; margin: 16px 0 8px; font-size: 0.75rem; }
#jk_modi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#jk_modi .jk_wahl { border-radius: 12px; text-align: left; padding: 12px; font-size: 0.92rem; }
#jk_modi small { display: block; font-size: 0.7rem; font-weight: 500; margin-top: 5px; }
.jk_wahl { color: #285144; background: #fff; border-color: #cedbd3; min-height: 40px; }
.jk_wahl.jk_aktiv { background: #226c50; border-color: #226c50; }
button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid #f4bc49; outline-offset: 3px;
}
.jk_strecken_reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 44vh; overflow-y: auto; padding-right: 4px; }
.jk_strecke_karte {
  width: auto; min-width: 0; padding: 12px 8px; border-radius: 14px;
  background: #fff; border-color: #cedbd3; gap: 5px;
}
.jk_strecke_karte canvas { width: 100%; height: 95px; object-fit: contain; background: #e8eee6; }
.jk_strecke_karte[data-id="woerthersee"] canvas { background: #e0edf2; }
.jk_strecke_karte[data-id="semmering"] canvas { background: #e7e7f0; }
.jk_strecke_karte.jk_aktiv { border-color: #226c50; background: #eaf4ed; box-shadow: none; }
.jk_strecke_name { font-size: 0.9rem; color: #254b3c; }
.jk_strecke_best { color: #78540a; }
.jk_streckenprofil { font-size: 0.8rem; color: #526b62; margin: 9px 0 0; line-height: 1.5; }
.jk_stufen_tipp { font-size: 0.8rem; margin: 0 0 8px; }
.jk_stufe_aktuell { display: none; }
.jk_startzeile { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
#jk_rennplan { flex: 1; color: #526b62; font-size: 0.82rem; }
.jk_startzeile .jk_knopf_gross { width: auto; min-width: 190px; background: #226c50; border-radius: 12px; }
.jk_anleitung { margin-top: 14px; font-size: 0.8rem; color: #526b62; }
.jk_anleitung summary { cursor: pointer; padding: 8px 0; font-weight: 700; }
.jk_anleitung .jk_hinweis { margin: 4px 0; font-size: 0.8rem; line-height: 1.6; color: inherit; }
.jk_hud_links, .jk_item_slot { top: 64px; }
.jk_rundeninfo { background: #10262bdd; color: #d0e5df; padding: 8px 10px;
  border-radius: 8px; font-size: 0.73rem; max-width: 250px; }
.jk_drift { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #10262bdd; color: #f1faf8; padding: 12px 16px; border: 1px solid #ffffff33;
  border-radius: 12px; width: 280px; font-size: 0.8rem; text-align: center;
}
.jk_drift_spur { height: 6px; background: #ffffff22; border-radius: 4px; overflow: hidden; margin: 8px 0; }
#jk_drift_fuellung { height: 100%; width: 0; background: #aabbb6; }
.jk_drift[data-stufe="1"] #jk_drift_fuellung { background: #4fc3f7; }
.jk_drift[data-stufe="2"] #jk_drift_fuellung { background: #ffb74d; }
.jk_drift[data-stufe="3"] #jk_drift_fuellung { background: #ce93d8; }
.jk_drift_marken { font-size: 0.68rem; color: #c2d5ce; }
.jk_touch { padding: 0 12px 12px; }
.jk_touch_links, .jk_touch_rechts { gap: 6px; }
.jk_t_knopf { width: 48px; height: 48px; padding: 1px; font-size: 0.65rem; line-height: 1; overflow-wrap: anywhere; }
@media (pointer: coarse) and (min-width: 761px) {
  .jk_drift { left: 12px; bottom: 76px; width: 220px; transform: none; }
}

/* Die Menüs folgen dem Plattform-Theme; die Landschaft behält ihre Tagesfarben. */
html[data-theme="dark"] .jk_menue_karte,
html[data-theme="dark"] .jk_karte,
html[data-theme="dark"] .jk_netz_karte,
html[data-theme="dark"] .jk_hilfe_inhalt { background: #172b2c; color: #e1eeea; border-color: #375251; }
html[data-theme="dark"] .jk_menue_kopf h1,
html[data-theme="dark"] .jk_karte h2,
html[data-theme="dark"] .jk_netz_karte h2,
html[data-theme="dark"] .jk_strecke_name { color: #e1eeea; }
html[data-theme="dark"] .jk_wahl,
html[data-theme="dark"] .jk_strecke_karte { background: #203739; color: #e1eeea; border-color: #47615d; }
html[data-theme="dark"] .jk_wahl.jk_aktiv,
html[data-theme="dark"] .jk_strecke_karte.jk_aktiv { background: #245c49; border-color: #79c99b; }
html[data-theme="dark"] .jk_strecke_best { color: #f4ce79; }
html[data-theme="dark"] .jk_lernsatz,
html[data-theme="dark"] .jk_netz_hinweis { background: #213e4b; color: #d1e8f1; }
html[data-theme="dark"] .jk_eyebrow,
html[data-theme="dark"] .jk_untertitel,
html[data-theme="dark"] .jk_abschnitt_titel,
html[data-theme="dark"] .jk_streckenprofil,
html[data-theme="dark"] .jk_stufen_tipp,
html[data-theme="dark"] #jk_rennplan,
html[data-theme="dark"] .jk_anleitung { color: #b7cdc5; }
html[data-theme="dark"] .jk_netz_kurz,
html[data-theme="dark"] .jk_netz_status,
html[data-theme="dark"] .jk_netz_schritte,
html[data-theme="dark"] .jk_netz_slotinfo,
html[data-theme="dark"] .jk_netz_art { color: #bfd5ce; }
html[data-theme="dark"] .jk_netz_teil,
html[data-theme="dark"] .jk_netz_liste li { background: #203739; border-color: #47615d; }
html[data-theme="dark"] .jk_netz_code { background: #102326; color: #d9eee6; }
html[data-theme="dark"] .jk_hilfe_inhalt p:last-child { background: #245c49; }
html[data-theme="dark"] #jk_endstand { color: #91d7ad; }
html[data-theme="dark"] #jk_best { color: #f4ce79; }
html[data-theme="dark"] .jk_runden_wahl { color: #d1e8f1; }
body:has(.jk_overlay:not([hidden])) .jk_touch { display: none; }

@media (max-width: 760px) {
  .jk_leiste { gap: 6px; padding: 6px 10px; }
  .jk_titel { font-size: 0.9rem; }
  .jk_vermerk { display: none; }
  .jk_zurueck { font-size: 0.76rem; }
  .jk_leiste_knopf { font-size: 0.75rem; padding: 4px 8px; }
  .jk_hilfe { top: 56px; left: auto; right: 10px; transform: none; }
  .jk_hilfe > summary { background: #123c32; }
  .jk_hilfe_inhalt { left: auto; right: 0; transform: none; width: min(450px, calc(100vw - 20px)); }
  .jk_overlay { padding: 48px 10px 10px; }
  .jk_menue_karte { padding: 18px 14px; border-radius: 18px; }
  .jk_menue_kopf h1 { font-size: 1.9rem; }
  .jk_menue_kopf img { width: 58px; height: 58px; }
  #jk_modi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jk_strecken_reihe { gap: 6px; }
  .jk_strecke_karte { padding: 8px 4px; }
  .jk_strecke_karte canvas { height: 68px; }
  .jk_strecke_name { font-size: 0.73rem; }
  .jk_strecke_best { font-size: 0.62rem; }
  .jk_startzeile { flex-direction: column; align-items: stretch; gap: 10px; }
  .jk_startzeile .jk_knopf_gross { width: 100%; }
  .jk_item_slot { top: 118px; width: 64px; min-height: 66px; }
  .jk_rundeninfo { max-width: 140px; font-size: 0.65rem; }
  .jk_hud_links { left: 10px; }
  .jk_drift { bottom: 178px; width: 220px; font-size: 0.74rem; padding: 8px 12px; }
  .jk_minimap_karte { top: 95px; }
}
@media (pointer: coarse) {
  .jk_drift { bottom: 188px; }
  .jk_tacho_karte { bottom: 68px; transform: translateX(50%) scale(0.65); }
}
@media (max-height: 500px) {
  .jk_overlay { padding-top: 10px; }
  .jk_hilfe { top: 8px; right: 230px; }
  .jk_drift { bottom: 12px; width: 220px; padding: 6px 10px; }
  .jk_item_slot { top: 58px; }
  .jk_tacho_karte { right: 180px; transform: scale(0.65); transform-origin: bottom right; bottom: 62px; }
}

/* ---- Sprachumschalter (DaZ, AGENTS.md 3.14) in der schlanken Leiste ---- */
/* Das Modul i18n.js baut den 🌐-Knopf in #jupi_sprachen_wahl. Die
   gemeinsamen .jupi_sprachen_select-Regeln aus jupi.css passen auf der
   grünen Leiste; hier nur Größe und Handy-Verhalten. */
.jk_leiste .jupi_sprachen_wahl { margin: 0; }
.jk_leiste .jupi_sprachen_select { max-width: 7.5rem; font-size: .78rem; padding: .2rem .45rem; }
@media (max-width: 640px) {
  .jk_leiste .jupi_sprachen_select { max-width: 4.5rem; font-size: .7rem; padding: .18rem .3rem; }
  .jk_leiste .jupi_sprachen_icon { display: none; }
}

/* Alpen-Cup: lackiertes Rennblech, rote Starttaste und Streckenkarten.
   Die 3D-Welt ist die Kulisse des Menüs, keine statische Werbegrafik. */
body.jk { --race-ink:#15364d; --race-red:#cc3d32; --race-paper:#f5f1e6; }
body.jk .jk_leiste {
  min-height:54px; padding:6px 20px; gap:12px;
  background:linear-gradient(110deg,#112e43,#244c61);border-bottom:3px solid #edf0e8;
  box-shadow:0 3px 0 #ca3c32,0 8px 25px #122e4330;
}
body.jk .jk_titel {font-style:italic;font-size:1.35rem;letter-spacing:-.06em;}
body.jk .jk_vermerk {border-radius:3px;background:#ffffff16;letter-spacing:.12em;text-transform:uppercase;font-size:.6rem;}
body.jk .jk_leiste_knopf {border:1px solid #ffffff33;border-radius:5px;background:#ffffff0b;min-height:34px;}
body.jk .jk_hilfe {top:68px;right:18px;left:auto;transform:none;}
body.jk .jk_hilfe>summary {background:#17394de8;border:1px solid #ffffff70;border-radius:5px;color:#fff;}
body.jk .jk_hilfe_inhalt {right:0;left:auto;transform:none;}
body.jk .jk_overlay {top:57px;justify-content:flex-start;padding:22px 30px;background:linear-gradient(90deg,#112c433b,transparent 75%);}
body.jk .jk_menue_karte {
  width:min(620px,52vw);max-height:100%;padding:24px 28px;
  border-radius:8px;border:1px solid #ffffffb3;border-top:5px solid #cf4035;
  color:#244153;background:linear-gradient(120deg,#fffcf4f7,#f1f0e7f2);
  box-shadow:0 12px 45px #102e4350;scrollbar-width:thin;scrollbar-color:#8caaa9 #e8ebe5;
}
body.jk .jk_menue_kopf {gap:10px;align-items:center;border-bottom:1px solid #becbc9;padding-bottom:18px;}
body.jk .jk_menue_kopf img {width:112px;height:72px;border-radius:0;object-fit:contain;}
body.jk .jk_menue_kopf h1 {font-size:clamp(2rem,3.3vw,3.1rem);font-style:italic;letter-spacing:-.065em;color:#16364b;text-shadow:1px 2px #fff;line-height:1.05;}
body.jk .jk_eyebrow {color:#bf3c31;font-size:.6rem;letter-spacing:.14em;}
body.jk .jk_untertitel {color:#5b6e76;font-size:.8rem;}
body.jk .jk_lernsatz {background:transparent;border:0;padding:0;color:#5b6e76;font-size:.76rem;line-height:1.5;margin:12px 0;}
body.jk .jk_abschnitt_titel {display:flex;align-items:center;gap:10px;color:#284a5b;font-size:.66rem;letter-spacing:.16em;margin:17px 0 8px;}
body.jk .jk_abschnitt_titel::after {content:'';height:1px;flex:1;background:#b9c8c8;}
body.jk #jk_modi {gap:6px;}
body.jk #jk_modi .jk_wahl {font-size:.76rem;padding:10px 8px;border-radius:4px;}
body.jk #jk_modi small {font-size:.64rem;line-height:1.35;}
body.jk .jk_wahl {border:1px solid #b7c7ca;border-radius:4px;color:#244b60;background:#ffffffb3;min-height:38px;}
body.jk .jk_wahl.jk_aktiv {color:#fff;background:#1d4f69;border-color:#1d4f69;box-shadow:inset 0 -3px #103446;}
body.jk .jk_strecken_reihe {gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));}
body.jk .jk_strecke_karte {border-radius:5px;gap:4px;padding:7px 6px;background:#fffdf6;border:1px solid #b9c9cc;position:relative;}
body.jk .jk_strecke_karte canvas {height:75px;border-radius:2px;background:linear-gradient(#c5e6ee,#dce5c4);}
body.jk .jk_strecke_karte[data-id="woerthersee"] canvas {background:linear-gradient(#b9e2ef,#8bd3dc);}
body.jk .jk_strecke_karte[data-id="semmering"] canvas {background:linear-gradient(#cadce9,#e3e8e2);}
body.jk .jk_strecke_karte[data-id="altstadt"] canvas {background:linear-gradient(#dfd6c3,#e7b989);}
body.jk .jk_strecke_karte.jk_aktiv {border-color:#cf4035;background:#fffaf0;box-shadow:0 0 0 1px #cf4035;}
body.jk .jk_strecke_karte.jk_aktiv::before {content:'';position:absolute;left:0;top:0;border-top:16px solid #cf4035;border-right:16px solid transparent;}
body.jk .jk_strecke_name {color:#193e53;font-size:.74rem;}
body.jk .jk_strecke_best {font-size:.65rem;color:#986426;}
body.jk .jk_streckenprofil {font-size:.72rem;color:#5b6e76;}
body.jk .jk_stufen_tipp {font-size:.73rem;color:#5b6e76;}
body.jk .jk_runden_wahl {color:#244b60;font-size:.8rem;}
body.jk .jk_startzeile {position:sticky;bottom:-24px;margin:16px -8px -2px;padding:14px 8px 8px;background:linear-gradient(transparent,#f5f1e6 25%);gap:10px;}
body.jk #jk_rennplan {font-size:.72rem;color:#58707a;}
body.jk .jk_startzeile .jk_knopf_gross {border-radius:4px;background:linear-gradient(#e44f3e,#bf3028);border-bottom:4px solid #8b2822;min-width:172px;letter-spacing:.03em;font-size:1rem;padding:13px 20px;box-shadow:0 3px 10px #a934242e;}
body.jk .jk_startzeile .jk_knopf_gross:hover {filter:brightness(1.1);}
body.jk .jk_anleitung {font-size:.72rem;color:#58707a;}
body.jk .jk_lackierungen {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;}
body.jk .jk_lackierung {border:1px solid #b7c7ca;background:#ffffffb3;padding:5px 2px 6px;border-radius:4px;cursor:pointer;color:#29495a;min-width:0;}
body.jk .jk_lackierung::before {content:'';display:block;width:27px;height:18px;margin:3px auto 6px;background:linear-gradient(90deg,var(--lack) 34%,var(--streifen,#f5f6f8) 34% 44%,var(--lack) 44% 56%,var(--streifen,#f5f6f8) 56% 66%,var(--lack) 66%);border:3px solid #26323b;border-radius:4px;transform:perspective(50px) rotateX(25deg);box-shadow:-5px 3px 0 -1px #25313b,5px 3px 0 -1px #25313b;}
body.jk .jk_lackierung span {font-size:.55rem;display:block;overflow-wrap:anywhere;}
body.jk .jk_lackierung.jk_aktiv {border-color:#cb4035;box-shadow:0 0 0 1px #cb4035;background:#fff6e8;}
/* Karosserie-Formen: fuenf Karten - NUR Text (Wunsch 31.10.2026: die
   gezeichneten Umrisse jk_karosserie_bild_* sind entfernt). */
body.jk .jk_karosserien {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
body.jk .jk_karosserie {border:1px solid #b7c7ca;background:#ffffffb3;padding:9px 4px;border-radius:4px;cursor:pointer;color:#29495a;min-width:0;min-height:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
body.jk .jk_karosserie span {font-size:.6rem;font-weight:700;display:block;overflow-wrap:anywhere;line-height:1.2;}
body.jk .jk_karosserie.jk_aktiv {border-color:#cb4035;box-shadow:0 0 0 1px #cb4035;background:#fff6e8;}
body.jk .jk_helme {display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;}
body.jk .jk_helm {border:1px solid #b7c7ca;background:#ffffffb3;padding:6px 2px;border-radius:4px;cursor:pointer;color:#29495a;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;}
body.jk .jk_helm_icon {font-style:normal;font-size:1.15rem;line-height:1;}
body.jk .jk_helm span {font-size:.55rem;font-weight:700;display:block;overflow-wrap:anywhere;}
body.jk .jk_helm.jk_aktiv {border-color:#cb4035;box-shadow:0 0 0 1px #cb4035;background:#fff6e8;}
body.jk .jk_helmfarben_zeile {margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
body.jk .jk_helmfarben_label {font-size:.7rem;font-weight:700;color:#284a5b;}
body.jk .jk_helmfarben {display:flex;flex-wrap:wrap;gap:4px;flex:1;}
body.jk .jk_helmfarbe {border:1px solid #b7c7ca;background:#ffffffb3;padding:4px 7px;border-radius:999px;cursor:pointer;color:#29495a;display:inline-flex;align-items:center;gap:5px;font:700 .64rem/1.1 system-ui,sans-serif;}
body.jk .jk_helmfarbe_punkt {width:12px;height:12px;border-radius:50%;background:var(--hfarbe,#d83d32);border:1.5px solid #26323b;flex:none;}
body.jk .jk_helmfarbe.jk_aktiv {border-color:#cb4035;box-shadow:0 0 0 1px #cb4035;background:#fff6e8;}
body.jk .jk_hud_links {top:76px;left:24px;gap:6px;}
body.jk .jk_runde,body.jk .jk_zeit,body.jk .jk_platz {border-radius:4px;background:#17394de8;border:1px solid #ffffff66;box-shadow:0 3px 9px #13314922;letter-spacing:.03em;padding:7px 12px;}
body.jk .jk_platz {font-size:2.2rem;font-style:italic;background:#cc3e33;}
body.jk .jk_rundeninfo {border-radius:4px;background:#17394dd9;}
body.jk .jk_item_slot {top:76px;border-radius:8px;background:#17394de8;border:2px solid #d9e7e4;}
body.jk .jk_minimap_karte,body.jk .jk_tacho_karte {border:1px solid #eaf4ec99;border-radius:8px;background:#17394db8;}
body.jk .jk_drift {border-radius:5px;background:#17394de0;}
body.jk .jk_drift_marken {color:#d8eaf0;}
body.jk .jk_ereignis {position:fixed;z-index:18;left:50%;top:24%;transform:translateX(-50%) rotate(-2deg);max-width:90vw;padding:12px 24px;border:3px solid #fff4db;border-radius:8px;background:#d74431;color:#fffaf0;font-size:clamp(1rem,3vw,1.65rem);font-weight:900;font-style:italic;text-align:center;box-shadow:0 5px 0 #873329;pointer-events:none;}
html[data-theme="dark"] body.jk .jk_menue_karte {background:linear-gradient(130deg,#132f42f7,#1c3c4bf7);color:#e7ede8;border-color:#5b7a87;border-top-color:#ee5d48;}
html[data-theme="dark"] body.jk .jk_menue_kopf h1 {color:#f4f1e7;text-shadow:1px 2px #0c2639;}
html[data-theme="dark"] body.jk .jk_menue_kopf {border-color:#54727d;}
html[data-theme="dark"] body.jk .jk_eyebrow {color:#ff9c7b;}
html[data-theme="dark"] body.jk :is(.jk_untertitel,.jk_lernsatz,.jk_streckenprofil,.jk_stufen_tipp,.jk_anleitung,#jk_rennplan) {color:#bbd0d6;}
html[data-theme="dark"] body.jk .jk_abschnitt_titel {color:#c4dce3;}
html[data-theme="dark"] body.jk .jk_abschnitt_titel::after {background:#4d6a76;}
html[data-theme="dark"] body.jk :is(.jk_wahl,.jk_lackierung,.jk_helm,.jk_helmfarbe,.jk_strecke_karte,.jk_karosserie) {color:#e3ece9;background:#274858;border-color:#54727d;}
html[data-theme="dark"] body.jk .jk_helmfarben_label {color:#c4dce3;}
html[data-theme="dark"] body.jk .jk_wahl.jk_aktiv {background:#36647b;border-color:#90c2d5;}
html[data-theme="dark"] body.jk :is(.jk_lackierung.jk_aktiv,.jk_helm.jk_aktiv,.jk_helmfarbe.jk_aktiv,.jk_strecke_karte.jk_aktiv,.jk_karosserie.jk_aktiv) {background:#334c57;border-color:#f47d61;box-shadow:0 0 0 1px #f47d61;}
html[data-theme="dark"] body.jk .jk_strecke_name {color:#f5f0df;}
html[data-theme="dark"] body.jk .jk_strecke_best {color:#f5c780;}
html[data-theme="dark"] body.jk .jk_startzeile {background:linear-gradient(transparent,#19394b 25%);}
@media(max-width:1000px) {
 body.jk .jk_menue_karte {width:min(620px,70vw);}
 body.jk .jk_overlay {padding:18px;}
}
@media(max-width:640px) {
 body.jk .jk_leiste {padding:5px 8px;gap:5px;flex-wrap:wrap;min-height:54px;}
 body.jk .jk_titel {font-size:1rem;}
 body.jk .jk_leiste_knopf {padding:4px 7px;font-size:.7rem;}
 body.jk .jk_zurueck {font-size:.7rem;}
 body.jk .jk_leiste .jupi_sprachen_select {max-width:64px;}
 body.jk .jk_overlay {top:87px;padding:10px 8px;}
 body.jk .jk_menue_karte {width:100%;padding:18px 14px;}
 body.jk .jk_hilfe {top:57px;right:8px;}
 body.jk .jk_menue_kopf img {width:80px;height:55px;}
 body.jk .jk_menue_kopf h1 {font-size:2.2rem;}
 body.jk #jk_modi {grid-template-columns:repeat(2,minmax(0,1fr));}
 body.jk .jk_strecken_reihe {grid-template-columns:repeat(2,minmax(0,1fr));}
 body.jk .jk_strecke_karte canvas {height:64px;}
 body.jk .jk_karosserien {grid-template-columns:repeat(3,minmax(0,1fr));}
 body.jk .jk_lackierungen {grid-template-columns:repeat(4,minmax(0,1fr));}
 body.jk .jk_lackierung {display:flex;align-items:center;gap:5px;padding:7px 3px;}
 body.jk .jk_lackierung::before {flex:none;width:21px;height:15px;margin:0 3px;}
 body.jk .jk_lackierung span {font-size:.62rem;}
 body.jk .jk_helme {grid-template-columns:repeat(3,minmax(0,1fr));}
 body.jk .jk_helm {flex-direction:row;justify-content:flex-start;gap:5px;padding:6px 5px;}
 body.jk .jk_helm span {font-size:.62rem;}
 body.jk .jk_startzeile {bottom:-18px;flex-direction:column;align-items:stretch;}
 body.jk .jk_hud_links {top:97px;left:10px;}
 body.jk .jk_item_slot {top:150px;}
 body.jk .jk_platz {font-size:1.4rem;}
 body.jk .jk_minimap_karte {top:97px;right:10px;left:auto;bottom:auto;width:108px;height:108px;transform:none;padding:5px;}
 body.jk .jk_minimap_karte canvas {width:96px;height:96px;}
 body.jk .jk_tacho_karte {right:10px;left:auto;bottom:76px;top:auto;width:108px;height:98px;transform:none;padding:4px;}
 body.jk .jk_tacho_karte canvas {width:98px;height:87px;}
 body.jk .jk_drift {left:10px;right:auto;bottom:82px;width:176px;transform:none;padding:8px;}
 body.jk .jk_touch {display:flex;}
 body.jk .jk_rundeninfo {max-width:155px;}
}
@media(max-height:500px) and (max-width:760px) {
 body.jk .jk_hud_links {top:70px;}
 body.jk .jk_minimap_karte {top:70px;right:10px;left:auto;bottom:auto;width:86px;height:86px;transform:none;padding:5px;}
 body.jk .jk_minimap_karte canvas {width:74px;height:74px;}
 body.jk .jk_tacho_karte {bottom:66px;right:10px;width:92px;height:84px;transform:none;}
 body.jk .jk_tacho_karte canvas {width:82px;height:73px;}
 body.jk .jk_hilfe {top:60px;left:50%;right:auto;transform:translateX(-50%);}
 body.jk .jk_drift {bottom:70px;font-size:.66rem;padding:6px;width:176px;}
 body.jk .jk_drift_marken {display:none;}
}
/* Fahrername und schwebende Namensschilder */
.jk_name_feld { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-weight:700; margin:.8rem 0; }
.jk_name_feld input { font:inherit; color:#172b3c; background:#fff; border:2px solid #66798a; border-radius:.5rem; padding:.55rem .7rem; max-width:100%; }
.jk_name_fehler { color:#b00020; font-weight:700; }
.jk_schildebene { position:fixed; inset:0; z-index:3; pointer-events:none; }
.jk_namensschild { position:absolute; pointer-events:none; transform:translate(-50%,-100%); padding:0; background:none; color:#fff; font:700 11px/1.2 sans-serif; white-space:nowrap; letter-spacing:.02em; opacity:.9; -webkit-text-stroke:3px #000; paint-order:stroke fill; text-shadow:0 0 2px #000; }
#jk_gegner_wahl[hidden] { display: none; }
#jk_gegner_wahl { margin: .55rem 0; }
#jk_gegner_anzahl { min-width: 4rem; padding: .35rem; font: inherit; }
html[data-theme="dark"] body.jk #jk_gegner_wahl { color: #e1eff7; }

/* Schrittauswahl und Rennlobby */
.jk_zurueck { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: .5rem 0; text-decoration: underline; }
.jk_netz_rennplan { padding: .6rem .8rem; border-radius: .5rem; background: #e8f1ec; color: #174932; font-weight: 700; }
html[data-theme="dark"] .jk_netz_rennplan { background: #29433c; color: #e1eeea; }
.jk_netz_code { overflow-wrap: anywhere; }

html[data-theme="dark"] .jk_name_feld input { background: #fff; color: #142e3c; }

html[data-theme="dark"] .jk_netz_titel { color: #a9e5ba; }

/* ---------- Garage: Kart & Helm (eigenes Menü, klappt von rechts auf) ----------
   Entlastet das Startmenü (Wunsch 29.10.2026): Lackierung, Helm und Helmfarbe
   liegen hier, links mit einer echten 3D-Vorschau. Die Garage ist ein Dialog
   über dem Menü; der dunkle Schleier dahinter nimmt Klicks an und schließt. */
.jk_garage_schicht {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 22, 30, 0.52);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.jk_garage_schicht.jk_garage_offen { opacity: 1; }

.jk_garage {
  position: absolute;
  top: var(--jk-garage-top, 54px);
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  display: flex;
  flex-direction: column;
  color: #244153;
  background: #f5f1e6;
  border-left: 3px solid #cc3d32;
  box-shadow: -18px 0 45px rgba(10, 28, 39, 0.35);
  transform: translateX(102%);
  transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.3, 1);
  overflow: hidden;
}
.jk_garage.jk_garage_offen { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .jk_garage, .jk_garage_schicht { transition: none; }
}

.jk_garage_kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: #f6f2e7;
  background: linear-gradient(110deg, #112e43, #22495c);
  border-bottom: 3px solid #ca3c32;
}
.jk_garage_kopf h2 {
  margin: 0;
  font-size: 1.3rem;
  font-style: italic;
  letter-spacing: -0.04em;
}
.jk_garage_fertig {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: 800 0.85rem/1 system-ui, sans-serif;
  padding: 9px 16px;
  cursor: pointer;
}
.jk_garage_fertig:hover { background: #2e7d32; border-color: #2e7d32; }

/* Bühne: hier steht das 3D-Bild. Der Verlauf bleibt im CSS, damit die
   Vorschau ohne WebGL nicht schwarz wird. */
.jk_garage_buehne {
  position: relative;
  flex: none;
  background: radial-gradient(120% 95% at 50% 12%, #f2f7f9, #d3e3e9 55%, #b7cdd6);
  border-bottom: 1px solid #d6cfc0;
}
.jk_garage_buehne canvas {
  display: block;
  width: 100%;
  height: clamp(180px, 30vh, 250px);
  touch-action: none;
  cursor: grab;
}
.jk_garage_buehne canvas.jk_garage_greift { cursor: grabbing; }
.jk_garage_badge {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: rgba(23, 57, 77, 0.8);
  color: #fff;
  font: 800 0.62rem/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
}
.jk_garage_hinweis {
  position: absolute;
  left: 12px;
  bottom: 10px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #123243;
  font: 700 0.68rem/1.2 system-ui, sans-serif;
}
.jk_garage_ohne_3d .jk_garage_buehne { min-height: 110px; }

/* Auswahlbereich: scrollt für sich, der Kopf bleibt stehen. */
.jk_garage_auswahl {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: #8caaa9 #e8ebe5;
}

/* Karten in der Garage sind größer als die alte Menü-Reihe: man sieht die
   Lackierung und kann sie mit dem Daumen treffen. */
body.jk .jk_garage .jk_lackierungen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
body.jk .jk_garage .jk_lackierung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 9px;
  border-radius: 8px;
}
body.jk .jk_garage .jk_lackierung::before {
  width: 54px;
  height: 30px;
  margin: 2px auto 5px;
  border-radius: 6px;
}
body.jk .jk_garage .jk_lackierung span { font-size: 0.74rem; }
body.jk .jk_garage .jk_karosserien {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.jk .jk_garage .jk_karosserie {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 8px;
  text-align: center;
}
body.jk .jk_garage .jk_karosserie span { font-size: 0.88rem; }
body.jk .jk_garage .jk_helme {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.jk .jk_garage .jk_helm {
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
}
body.jk .jk_garage .jk_helm_icon { font-size: 1.5rem; }
body.jk .jk_garage .jk_helm span { font-size: 0.74rem; }
body.jk .jk_garage .jk_helmfarben_zeile { margin-top: 12px; }
body.jk .jk_garage .jk_helmfarbe { padding: 6px 9px; font-size: 0.7rem; }

/* Einstieg im Startmenü: eine Zeile statt drei Abschnitte. */
body.jk .jk_garage_knopf {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #b7c7ca;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #244b60;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.jk .jk_garage_knopf:hover { border-color: #cf4035; background: #fff6e8; }
body.jk .jk_garage_knopf_bild {
  position: relative;
  flex: none;
  width: 58px;
  height: 40px;
  display: block;
}
body.jk .jk_garage_knopf_kart {
  position: absolute;
  left: 0;
  right: 6px;
  bottom: 3px;
  height: 21px;
  border: 3px solid #26323b;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--lack, #d83d32) 34%, var(--streifen, #f5f6f8) 34% 44%,
    var(--lack, #d83d32) 44% 56%, var(--streifen, #f5f6f8) 56% 66%,
    var(--lack, #d83d32) 66%);
  box-shadow: -6px 3px 0 -2px #25313b, 6px 3px 0 -2px #25313b;
}
body.jk .jk_garage_knopf_helm {
  position: absolute;
  right: -3px;
  top: -7px;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
body.jk .jk_garage_knopf_text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.jk .jk_garage_knopf_text b { font-size: 0.92rem; }
body.jk .jk_garage_knopf_text small {
  color: #5b6e76;
  font-size: 0.74rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
body.jk .jk_garage_knopf_pfeil {
  margin-left: auto;
  color: #cf4035;
  font-size: 1.6rem;
  line-height: 1;
}

/* Dunkelmodus: Garage und Bühne werden nightauglich, Papiere bleiben hell. */
html[data-theme="dark"] body.jk .jk_garage { background: #172b2c; color: #e1eeea; }
html[data-theme="dark"] body.jk .jk_garage_kopf {
  background: linear-gradient(110deg, #0e2436, #1d3d4c);
  border-bottom-color: #ee5d48;
}
html[data-theme="dark"] body.jk .jk_garage_buehne {
  background: radial-gradient(120% 95% at 50% 12%, #2c4a57, #172b34 60%, #101f26);
  border-bottom-color: #375251;
}
html[data-theme="dark"] body.jk .jk_garage_hinweis { background: rgba(16, 32, 40, 0.85); color: #d8eaf0; }
html[data-theme="dark"] body.jk .jk_garage_knopf { background: #203739; border-color: #47615d; color: #e1eeea; }
html[data-theme="dark"] body.jk .jk_garage_knopf:hover { background: #274848; border-color: #f47d61; }
html[data-theme="dark"] body.jk .jk_garage_knopf_text small { color: #bbd0d6; }
html[data-theme="dark"] body.jk .jk_garage_auswahl { scrollbar-color: #47615d #172b2c; }

/* Handy: die Garage nimmt die volle Breite, die Bühne wird flacher. */
@media (max-width: 640px) {
  .jk_garage { width: 100vw; }
  .jk_garage_kopf { padding: 10px 14px; }
  .jk_garage_kopf h2 { font-size: 1.1rem; }
  .jk_garage_buehne canvas { height: clamp(150px, 26vh, 210px); }
  .jk_garage_auswahl { padding: 2px 14px 18px; }
  body.jk .jk_garage .jk_lackierung::before { width: 42px; height: 24px; }
  body.jk .jk_garage .jk_lackierung span { font-size: 0.64rem; }
  body.jk .jk_garage .jk_helme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.jk .jk_garage .jk_helm_icon { font-size: 1.3rem; }
  body.jk .jk_garage .jk_helm span { font-size: 0.68rem; }
}
@media (max-height: 500px) {
  .jk_garage_buehne canvas { height: 120px; }
  .jk_garage_kopf { padding: 6px 14px; }
}


/* ---------- Vollbild: Jupi-Leiste ausblenden ---------- */
.jk_vb_knopf { display: none; }
body.jk_vb .jk_leiste { display: none; }
body.jk_vb.jk_vb_leiste .jk_leiste { display: flex; }
body.jk_vb .jk_vb_knopf { display: block; position: fixed; top: .4rem; right: .4rem; z-index: 11; width: 2.2rem; height: 2.2rem; border: none; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 1.1rem; opacity: .6; }
body.jk_vb.jk_vb_leiste .jk_vb_knopf { top: auto; bottom: auto; margin-top: 3.4rem; }
.jk_pedal_text { font-size: .66rem; max-width: 100%; text-align: center; line-height: 1.05; padding: 0 .15rem; overflow-wrap: anywhere; }

/* ---- QR-Codes in der Netz-Lobby ---- */
.jk_qr_box { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin: 0.5rem 0; }
.jk_qr_box[hidden] { display: none; }
.jk_qr { width: min(100%, 460px); height: auto; aspect-ratio: 1; background: #fff; border-radius: 0.5rem;
  image-rendering: pixelated; border: 0.4rem solid #fff; box-sizing: border-box; }
.jk_scan_karte { max-width: 28rem; }
.jk_scan_video { width: 100%; max-height: 55vh; border-radius: 0.6rem; background: #000; object-fit: cover; }

/* =====================================================================
   Netz-Lobby (Handy + Desktop): links verbinden, rechts Plaetze, unten
   immer sichtbar Status + Knoepfe. Alle IDs/Klassen der Logik bleiben.
   ===================================================================== */
body.jk #jk_netz { justify-content: center; align-items: center; background: rgba(12, 28, 35, 0.6); padding: 64px 14px 12px; }
body.jk .jk_netz_karte {
  width: min(58rem, 100%); max-height: 100%; overflow-y: auto; padding: 1rem 1.2rem 0;
  border-radius: 0.8rem; border-top: 5px solid #cf4035; box-sizing: border-box;
}
body.jk .jk_netz_karte h2 { margin: 0 0 0.6rem; font-size: 1.4rem; }
.jk_lobby_raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.jk_lobby_rechts .jk_netz_titel { margin-top: 0; }
body.jk .jk_netz_kurz { font-size: 0.86rem; margin-bottom: 0.6rem; }
body.jk .jk_netz_rolle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.7rem; }
body.jk .jk_netz_rolle .jk_wahl { min-height: 44px; justify-content: center; text-align: center; }
body.jk .jk_netz_teil { padding: 0.7rem 0.8rem; }
body.jk .jk_netz_schritte { font-size: 0.82rem; line-height: 1.4; margin-bottom: 0.7rem; padding-left: 1.15rem; }
body.jk .jk_netz_schritte li + li { margin-top: 0.2rem; }
.jk_aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.jk_aktionen .jk_netz_knopf { flex: 1 1 9rem; min-height: 44px; margin-top: 0; justify-content: center; }
.jk_aktionen_trenn { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed #c2ccd0; }
.jk_knopf_leise { background: #e6edf0 !important; color: #2b4350 !important; box-shadow: none !important; border: 1px solid #c2ccd0; }
.jk_text_details { margin-top: 0.5rem; }
.jk_text_details > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 0.85rem; font-weight: 700; color: #37566a; }
.jk_text_details .jk_netz_knopf { width: 100%; min-height: 44px; margin-top: 0.4rem; justify-content: center; }
.jk_qr_box { margin: 0.6rem 0 0.2rem; padding: 0.6rem; background: #fff; border: 1px solid #dde3e6; border-radius: 0.7rem; }
.jk_qr { width: min(100%, 17rem); }
.jk_qr_box small { text-align: center; font-size: 0.76rem; color: #546e7a; max-width: 22rem; }
body.jk .jk_netz_liste { grid-template-columns: 1fr 1fr; gap: 0.35rem; }
body.jk .jk_netz_liste li { padding: 0.3rem 0.5rem; font-size: 0.82rem; min-width: 0; flex-wrap: wrap; gap: 0.2rem 0.45rem; }
body.jk .jk_netz_wer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
body.jk .jk_netz_art { margin-left: 0; width: 100%; font-size: 0.72rem; padding-left: 1.3rem; }
body.jk .jk_netz_rennplan { margin-top: 0.7rem; font-size: 0.82rem; }
.jk_lobby_fuss {
  position: sticky; bottom: 0; z-index: 2; margin: 0.9rem -1.2rem 0; padding: 0.6rem 1.2rem 0.9rem;
  background: linear-gradient(transparent, #fff 0.6rem); border-top: 1px solid #e0e5e8;
}
body.jk .jk_lobby_fuss .jk_netz_status { margin: 0 0 0.5rem; }
body.jk .jk_lobby_fuss .jk_knopf_reihe { display: flex; gap: 0.5rem; }
body.jk .jk_lobby_fuss .jk_knopf_gross { flex: 1 1 0; min-height: 48px; margin: 0; }

html[data-theme="dark"] body.jk .jk_netz_karte { background: #16313c; }
html[data-theme="dark"] .jk_lobby_fuss { background: linear-gradient(transparent, #16313c 0.6rem); border-top-color: #34505b; }
html[data-theme="dark"] .jk_knopf_leise { background: #27434e !important; color: #d1e8f1 !important; border-color: #47615d; }
html[data-theme="dark"] .jk_text_details > summary { color: #a9d3e6; }
html[data-theme="dark"] .jk_aktionen_trenn { border-top-color: #47615d; }
html[data-theme="dark"] .jk_qr_box { background: #203739; border-color: #47615d; }
html[data-theme="dark"] .jk_qr_box small { color: #bfd5ce; }

@media (max-width: 820px) {
  body.jk #jk_netz { padding: 92px 6px 6px; align-items: stretch; }
  body.jk .jk_netz_karte { padding: 0.8rem 0.8rem 0; }
  .jk_lobby_raster { grid-template-columns: 1fr; gap: 0.8rem; }
  .jk_lobby_fuss { margin: 0.7rem -0.8rem 0; padding: 0.5rem 0.8rem 0.7rem; }
  .jk_qr { width: min(100%, 14rem); }
  .jk_netz_kurz { display: none; }
}

/* schmaler Fuss am Handy, kleinerer QR am Desktop (passt ohne Scrollen) */
body.jk .jk_lobby_fuss .jk_knopf_gross { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
@media (min-width: 821px) { .jk_qr { width: min(100%, 13rem); } }

.jk_teilen_menue { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; width: 100%; }
.jk_teilen_menue > * { flex: 1 1 6rem; min-height: 44px; justify-content: center; text-align: center; text-decoration: none; margin-top: 0; }

/* ---- Vollbild ohne Leiste: das HUD rueckt nach oben (kein leerer Streifen) ----
   Die Abstaende im Rest dieser Datei rechnen mit der Jupi-Leiste (57-87 px). Ist die
   Leiste weg (body.jk_vb), wandert alles, was oben haengt, um 60 px nach oben. */
body.jk.jk_vb:not(.jk_vb_leiste) .jk_hud_links,
body.jk.jk_vb:not(.jk_vb_leiste) .jk_item_slot { margin-top: -60px; }
body.jk.jk_vb:not(.jk_vb_leiste) .jk_hilfe { top: 10px; right: 52px; }
@media (max-height: 500px) {
  /* Handy quer: Karte oben rechts neben dem Leisten-Knopf, unten bleibt Platz fuer Tacho und Drift */
  body.jk.jk_vb:not(.jk_vb_leiste) .jk_minimap_karte {
    top: 10px; right: 52px; left: auto; bottom: auto; transform: none;
    width: 96px; height: 96px; padding: 5px;
  }
  body.jk.jk_vb:not(.jk_vb_leiste) .jk_minimap_karte canvas { width: 84px; height: 84px; }
  body.jk.jk_vb:not(.jk_vb_leiste) .jk_hilfe { right: 158px; }
}

/* ---------- Ladebildschirm (10.11.2026) ----------
   Deckt das Spiel ab, bis Streckenbau und GPU-Vorlauf (Shader, Modelle)
   fertig sind. Erst danach darf das Menü sichtbar bedienbar sein - vorher
   würde Intel-Grafik mitten im Rennen für 1-2 s einfrieren, weil sie Shader
   und Geometrien erst beim ersten Sichtbarwerden lädt. Optik im Rennmenü-
   Stil (Navy/Rot/Creme), nur Marke + Prozentzahl (keine Übersetzung). */
.jk_lade {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #15364d, #1d4a63);
  color: #f5f1e6; user-select: none;
}
html[data-theme="dark"] .jk_lade { background: linear-gradient(160deg, #0d2436, #12303f); }
.jk_lade[hidden] { display: none; }
.jk_lade_karte { text-align: center; width: min(420px, 84vw); }
.jk_lade_karte h1 { margin: 0.25em 0 0.9em; font-size: 1.7rem; letter-spacing: 0.02em; }
.jk_lade_spur {
  height: 14px; border-radius: 8px; overflow: hidden;
  background: rgba(245, 241, 230, 0.22);
  border: 2px solid rgba(245, 241, 230, 0.35);
}
.jk_lade_fuellung {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #cc3d32, #ee5d48);
  border-radius: 6px; transition: width 0.18s ease-out;
}
.jk_lade_prozent {
  margin-top: 8px; font-size: 0.95rem; font-weight: 800;
  letter-spacing: 0.08em; color: #ffe3cf;
}
@media (prefers-reduced-motion: reduce) { .jk_lade_fuellung { transition: none; } }