/* styles.css - Paket-Panik: eigenes Stylesheet, Präfix .pp_
   ==========================================================================
   App-Typ 2 (kleines Lernspiel) nach AGENTS.md 3.13. Welt: VERSANDHALLE
   (3.13.6b) - Wellblechwand, Palettenregal, Rollcontainer, Förderband und
   Bodenmarkierung. Die Kinder sortieren Pakete nach genau einem Merkmal;
   der Ort der Tätigkeit ist die Halle am Packtisch.

     3.13.2  Drei-Zonen-Kopfzeile (Grid 1fr auto 1fr): links zurück, Mitte
             Logo + Name, rechts Sprache + Dark Mode.
             EIGENES LEISTEN-DESIGN: Die Leiste ist ein Versandkarton -
             warmes Kartonbeige, feines Wellpappen-Raster, Signalgelb-Kante
             unten, der Name in Blasenlettern (grün/orange).
     3.13.3  Steuerleiste oben rechts über der Halle: Level, Startmenü,
             ❓, 🔊, Menü - als Anthrazit-Konsole mit Signalgelb.
     3.13.4  Keine Infoleiste unter dem Spiel - alles im ❓-Dialog.
     3.13.5  Bedienziele mindestens 40 x 40 px, beide Themes lesbar.
     3.13.7  Seitenhintergrund: EINE Szene (kulisse.svg, cover/no-repeat).

   Materialtabelle (alles über body.pp, damit nichts in andere Spiele leckt):
     Anthrazit #232c2b · Stahl #6d7c7e · Signalgelb #f0a92e
     Karton #d7a869 · Papier #fbf7ea · Tinte #24302e
   ========================================================================== */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.pp {
  /* ---- Materialwerte der Versandhalle ---- */
  --pp-anthrazit: #232c2b;
  --pp-anthrazit-hell: #37453f;
  --pp-stahl: #6d7c7e;
  --pp-stahl-hell: #9db0ad;
  --pp-gelb: #f0a92e;
  --pp-gelb-hell: #ffd684;
  --pp-karton: #cfa26a;
  --pp-papier: #fbf7ea;
  --pp-papier-2: #f2ead6;
  --pp-linie: #cbbfa2;
  --pp-tinte: #24302e;
  --pp-hell: #f4f1e6;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #22302e;
  /* Spalte aus Leiste, Spiel und Fuss: die Halle befuellt den Rest und
     schiebt dadurch nichts ueber den Bildschirmrand hinaus (Typ 2). */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- 0. Die Versandhalle als Seitenhintergrund (3.13.7) ----------
   EINE Szene (1600x1000), gestreckt, kein Wiederholen. Das Licht oben ist
   etwas abgesenkt, damit Leiste und Buehne klar davor stehen. */
body.jupi.pp {
  background-color: #c3cac2;
  background-image:
    linear-gradient(180deg,
      rgba(248, 250, 245, .58) 0%,
      rgba(246, 249, 243, .30) 34%,
      rgba(38, 48, 44, .16) 78%,
      rgba(28, 36, 33, .28) 100%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center top, center center;
  background-attachment: fixed, fixed;
}

/* ---------- 1. Kopfzeile: der Versandkarton (3.13.2) ---------- */
.pp_leiste {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* links | Marke | Werkzeuge */
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.9rem;
  /* Wellpappe: ein feines senkrechtes Raster über dem Kartongrund. */
  background:
    repeating-linear-gradient(90deg, rgba(122, 92, 42, .07) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #fdf8ec 0%, #f3e7ce 100%);
  /* Unten das Signalband: gelb, darunter die dunkle Kante des Kartons. */
  border-bottom: 4px solid var(--pp-gelb);
  color: #24322c;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 3px 14px rgba(28, 40, 34, .20);
}
/* Die dunkle Kante unter dem gelben Band. */
.pp_leiste::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 0;
  pointer-events: none;
}
.pp_nav { justify-self: start; }
/* Die weisse Pille mit gruenem Text (Vorbild Rechen-Raumschiff). */
.pp_zurueck {
  min-width: 40px;
  color: #2c7a46;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;                 /* Bedienziel 40 px (3.13.5) */
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #2c7a46;
  box-shadow: 0 2px 8px rgba(35, 50, 42, .16);
  white-space: nowrap;
}
.pp_zurueck:hover { background: #eef7ee; }
/* Der Pfeil steckt schon im i18n-Text ("← Alle Spiele", in RTL "→ ...").
   Die eigene Pfeil-Spanne ist deshalb nur im schmalen Fenster sichtbar, wo
   .pp_zurueck_wort wegfällt - sonst standen zwei Pfeile nebeneinander. */
.pp_zurueck > span[aria-hidden="true"] { display: none; }
.pp_zurueck:has(.pp_zurueck_wort[dir="rtl"]) > span[aria-hidden="true"] {
  transform: scaleX(-1);
}
.pp_marke {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.pp_marke_logo { width: 38px; height: 38px; display: block; }
/* Die Blasenlettern: weisse Kontur, gruen/orange Fuellung. */
.pp_titel {
  font-size: 1.32rem;
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pp_titel_a, .pp_titel_b {
  display: inline-block;
  text-shadow:
    -1.5px -1.5px 0 #ffffff, 1.5px -1.5px 0 #ffffff,
    -1.5px 1.5px 0 #ffffff, 1.5px 1.5px 0 #ffffff,
    0 3px 0 rgba(35, 64, 47, .30), 0 6px 12px rgba(35, 64, 47, .18);
}
.pp_titel_a { color: #2c7a46; }
.pp_titel_b { color: #d9741d; }
.pp_vermerk {
  font-size: 0.68rem;
  background: var(--pp-anthrazit);
  color: var(--pp-gelb-hell);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.pp_werkzeuge {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
/* Sprachumschalter ist ein Bedienziel: 40 px hoch wie die anderen (3.13.5). */
.pp_leiste .jupi_sprachen_select { min-height: 40px; }
.pp_leiste .jupi_theme_switch { width: 74px; height: 40px; min-width: 74px; }
.pp_leiste .jupi_theme_switch .jts_thumb { width: 32px; height: 32px; top: 3px; left: 3px; }
html[data-theme="dark"] .pp_leiste .jupi_theme_switch .jts_thumb { left: calc(100% - 35px); }

/* ---------- 2. Steuerleiste über der Halle (3.13.3) ----------
   Sie ist eine Anthrazit-Konsole mit Signalgelb: oben ein Warnband, die
   Anzeigen sind Ziffernfelder wie an einer Sortieranlage. */
.pp_main {
  padding: 0.5rem 0.6rem 0.9rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.pp_panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  width: 100%;                 /* ohne Breite schrumpft das Flex-Item auf den Text */
  max-width: 960px;
  margin: 0 auto;
  padding: 0.62rem 0.7rem 0.5rem;
  border-radius: 0.8rem 0.8rem 0 0;
  background: linear-gradient(180deg, #3b4a44 0%, #29332f 62%, #232c2b 100%);
  border: 1px solid #55635c;
  border-bottom: 0;
  box-shadow: 0 6px 18px rgba(16, 24, 22, .30), inset 0 1px 0 rgba(255, 255, 255, .10);
  color: var(--pp-hell);
}
/* Warnband oben: schräge Signalstreifen wie an einer Rampe. */
.pp_panel::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 4px;
  border-radius: 0.8rem 0.8rem 0 0;
  background: repeating-linear-gradient(115deg,
    var(--pp-gelb) 0 12px, #2b3532 12px 24px);
  opacity: 0.95;
}
.pp_hud {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
/* Ziffernfeld: dunkles Glas mit Bernstein-Ziffern. */
.pp_anzeige {
  display: inline-flex;
  gap: 0.42rem;
  align-items: baseline;
  white-space: nowrap;
  padding: 0.24rem 0.62rem 0.28rem;
  border-radius: 0.35rem;
  background: linear-gradient(180deg, #131b1a 0%, #0e1514 100%);
  border: 1px solid #4e5c55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(0, 0, 0, .35);
  color: #c3d6c8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pp_anzeige b {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--pp-gelb-hell);
  text-shadow: 0 0 9px rgba(255, 196, 80, .40);
}
/* Weniger als 10 Sekunden: die Uhr wird rot und pulsiert. */
.pp_anzeige b.knapp {
  color: #ff9a86;
  text-shadow: 0 0 10px rgba(255, 120, 90, .55);
  animation: pp_puls 1s infinite;
}
@keyframes pp_puls { 50% { opacity: 0.45; } }

/* Die Bedienknöpfe: Stahltasten der Konsole, mindestens 40 px */
.pp_steuerung { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }
.pp_steuer_knopf, .pp_steuer_knopp {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  color: #f3f0e3;
  background: linear-gradient(180deg, #4c5b54 0%, #3a4842 100%);
  border: 1px solid #6f8179;
  border-radius: 0.5rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background 0.12s, transform 0.1s, border-color 0.12s;
}
.pp_steuer_knopf { padding: 0.3rem 0.8rem; font-size: 0.88rem; }
.pp_steuer_knopp {
  width: 40px;
  min-width: 40px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}
.pp_steuer_knopf:hover, .pp_steuer_knopp:hover {
  background: linear-gradient(180deg, #5a6b62 0%, #46554e 100%);
  border-color: var(--pp-gelb);
}
.pp_steuer_knopp:active, .pp_steuer_knopf:active { transform: translateY(1px); }
/* Der Level-Knopf ist der Hauptweg - er traegt den gelben Rand. */
#pp_level_knopf {
  color: var(--pp-gelb-hell);
  border-color: rgba(240, 169, 46, .72);
}
/* Ton aus: der Knopf bleibt sichtbar, nur gedämpft. */
#pp_ton[aria-pressed="true"] { opacity: 0.62; }
.pp_steuer_ico { font-size: 1rem; }

/* ---------- 3. Sortierauftrag: der Lieferschein über der Halle ---------- */
.pp_aufgabe {
  position: relative;
  margin: 0 auto;
  width: 100%;                 /* wie .pp_panel: volle Breite, sonst nur Textbreite */
  max-width: 960px;
  background: linear-gradient(180deg, #fdfaf0 0%, #f1e8d4 100%);
  color: var(--pp-tinte);
  border-radius: 0;
  border: 1px solid var(--pp-linie);
  border-top: 0;
  border-left: 6px solid var(--pp-gelb);
  padding: 0.4rem 4.2rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  min-height: 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(150, 130, 92, .35);
}
/* Ein Barcode am rechten Rand - der Auftrag ist ein Versandpapier. */
.pp_aufgabe::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 22%;
  width: 46px;
  height: 56%;
  pointer-events: none;
  opacity: 0.30;
  background: repeating-linear-gradient(90deg,
    #24302e 0 2px, transparent 2px 4px,
    #24302e 4px 5px, transparent 5px 9px,
    #24302e 9px 12px, transparent 12px 14px);
}

/* ---------- 4. Bühne: der Packtisch mit Förderband ----------
   Der Rahmen ist Stahlprofil - die Halle steckt im Canvas. */
.pp_buehne {
  position: relative;
  /* Das Spiel steht ohne Scrollen im ersten Bildschirm (Regel 3.13.3/3.13.8):
     die Halle fuellt den Rest der Hoehe, 640 px sind die Obergrenze. */
  flex: 1 1 auto;
  min-height: 300px;
  max-height: 640px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  background: #16201d;
  overflow: hidden;
  border: 6px solid #2b3533;
  border-top: 0;
  border-radius: 0 0 0.9rem 0.9rem;
  box-shadow:
    0 16px 34px rgba(16, 24, 22, .34),
    inset 0 0 0 1px rgba(255, 255, 255, .10);
}
/* Dunkle Kante unter dem Auftrag: der Tisch beginnt. */
.pp_buehne::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 20, 18, .62) 0%, rgba(14, 20, 18, 0) 100%);
}
.pp_feld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;          /* Ziehen scrollt die Seite nicht */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* [hidden]-Falle: eigene display-Regeln schlagen das hidden-Attribut -
   ohne diese Zeile wären alle Overlays "unsichtbar offen" (Muster Schi-Sport). */
.pp_count[hidden],
.pp_overlay[hidden],
.pp_overlay [hidden],
.pp_startbild[hidden] { display: none !important; }

/* Kurze Rückmeldung: ein Etikett, das über der Halle aufpoppt */
.pp_meldung {
  position: absolute;
  top: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 92%;
  padding: 0.32rem 1rem 0.34rem;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, #fdfaf0 0%, #f0e7d2 100%);
  color: var(--pp-tinte);
  border: 1px solid var(--pp-linie);
  border-left: 5px solid var(--pp-stahl);
  box-shadow: 0 8px 20px rgba(10, 18, 16, .38);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 12;
}
.pp_meldung.sichtbar { opacity: 1; }
/* Farbe der Rückmeldung: grün = richtig, rot = falsch, gelb = Hinweis */
.pp_meldung[data-art="gut"] { border-left-color: #2f9a4d; }
.pp_meldung[data-art="schlecht"] { border-left-color: #d9503f; }
.pp_meldung[data-art="warn"] { border-left-color: var(--pp-gelb); }

/* ---------- 5. Countdown ---------- */
.pp_count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  pointer-events: none;
}
.pp_count span {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 900;
  color: var(--pp-gelb-hell);
  text-shadow: 0 4px 0 #1c2724, 0 10px 26px rgba(0, 0, 0, 0.62);
}

/* ---------- 6. Dialoge (native <dialog>, Regel 3.13.4) ----------
   Hilfe und Levelwahl sind Papiere aus der Halle: dunkler Stahlkopf,
   Signalgelb-Kante, darunter ein Blatt. */
.pp_dialog {
  border: none;
  border-radius: 0.9rem;
  padding: 0;
  width: min(660px, calc(100% - 1.6rem));
  max-height: 88vh;
  background: linear-gradient(180deg, #fdfaf1 0%, #f4ecda 100%);
  color: var(--pp-tinte);
  box-shadow: 0 22px 50px rgba(10, 20, 18, 0.45), 0 0 0 1px rgba(120, 104, 72, .45);
  /* z-index über der Sticky-Kopfzeile (30): ein echter Klick aufs ✕ muss das
     Fenster treffen (Lehre Pixel-Coder). */
  z-index: 60;
  overflow: hidden;
}
.pp_dialog::backdrop { background: rgba(8, 14, 13, 0.62); }
.pp_dialog_kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.6rem;
  background: linear-gradient(180deg, #38463f 0%, #28332e 100%);
  color: var(--pp-hell);
  border-bottom: 3px solid var(--pp-gelb);
}
.pp_dialog_kopf h2 { margin: 0; font-size: 1.3rem; flex: 1; }
.pp_dialog_x {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid #6f8179;
  background: linear-gradient(180deg, #4c5b54 0%, #3a4842 100%);
  color: #f3f0e3;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.pp_dialog_x:hover { background: linear-gradient(180deg, #5a6b62 0%, #46554e 100%); }
/* Der Inhalt soll auf einem 900-px-Fenster ohne Scrollen ganz passen
   (inklusive Lernsatz) - darunter wird gescrollt. */
.pp_dialog_inhalt { padding: 0.5rem 1rem 0.6rem; overflow: auto; max-height: calc(88vh - 132px); }
.pp_dialog_inhalt p { margin: 0.5rem 0; line-height: 1.5; }
.pp_dialog_fuss {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.9rem;
  background: rgba(226, 214, 186, .35);
  border-top: 1px dashed rgba(150, 130, 92, .5);
}
/* Der Hauptknopf ist eine gelbe Taste mit dunkler Schrift. */
.pp_dialog_ok {
  border: 1px solid #b87d14;
  border-radius: 0.55rem;
  padding: 0.6rem 1.4rem;
  min-height: 40px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(180deg, #f8c463 0%, #e89d1c 100%);
  color: #2a2416;
  box-shadow: 0 3px 0 rgba(120, 80, 12, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.pp_dialog_ok:hover { background: linear-gradient(180deg, #ffd27a 0%, #f0a92e 100%); }
.pp_hilfe_liste p { margin: 0.45rem 0; }
.pp_merk {
  background: rgba(240, 169, 46, .16);
  border-left: 4px solid var(--pp-gelb);
  border-radius: 0.4rem;
  padding: 0.55rem 0.8rem;
}
.pp_ueber { margin-top: 0.8rem; }
.pp_ueber h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}
.pp_lernsatz {
  background: rgba(47, 143, 74, .12);
  border-left: 4px solid #2f8f4a;
  border-radius: 0.4rem;
  padding: 0.55rem 0.8rem;
  margin: 0.3rem 0 0 !important;
}
.pp_start_text { margin: 0.2rem 0 0.6rem; }

/* ---------- 7. Overlays für Pause und Ergebnis ---------- */
.pp_overlay {
  /* fixed: das Fenster deckt wirklich alles ab, auch Kopf und Steuerleiste -
     sonst wären die Knöpfe darüber klickbar, während das Spiel steht. */
  position: fixed;
  inset: 0;
  background: rgba(16, 26, 23, 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 70;
  overflow: auto;
}
/* Die Karte ist ein Versandprotokoll: Papier mit gelber Oberkante. */
.pp_karte {
  background: linear-gradient(180deg, #fdfaf1 0%, #f3ebd9 100%);
  color: var(--pp-tinte);
  border-radius: 0.9rem;
  border-top: 6px solid var(--pp-gelb);
  box-shadow: 0 16px 44px rgba(10, 20, 18, 0.45), 0 0 0 1px rgba(120, 104, 72, .45);
  padding: 1.1rem 1.3rem 1.2rem;
  max-width: 640px;
  width: min(640px, 96vw);
  max-height: 94%;
  overflow: auto;
}
.pp_karte h2 { margin: 0 0 0.35rem; font-size: 1.45rem; color: #1f2b27; }
.pp_hinweis { color: #5a6a60; font-size: 0.85rem; }

/* Level-Kacheln: drei Spalten, auf dem Handy zwei.
   Jede Kachel ist ein Karton-Etikett aus der Halle. */
.pp_level {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}
.pp_kachel {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  border: 2px solid #d5c6a6;
  background: linear-gradient(180deg, #f8f0dd 0%, #ede1c6 100%);
  border-radius: 0.55rem;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  font: inherit;
  color: var(--pp-tinte);
  text-align: left;
  min-height: 84px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color .12s, background .12s;
}
.pp_kachel:hover { border-color: var(--pp-gelb); }
.pp_gewaehlt {
  border-color: #2f8f4a;
  background: linear-gradient(180deg, #ecf4e6 0%, #dcebd6 100%);
  box-shadow: inset 0 0 0 2px rgba(47, 143, 74, .22);
}
.pp_gesperrt { opacity: 0.62; cursor: not-allowed; }
.pp_kachel_nr {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #2b3533;
  color: var(--pp-gelb-hell);
  font-weight: 800;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.pp_kachel_name { font-weight: 800; font-size: 0.92rem; }
.pp_kachel_aufg { font-size: 0.74rem; color: #5a6a60; }
.pp_kachel_sterne {
  font-size: 0.8rem;
  color: #d99b12;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.pp_kachel_sterne span { color: #5a6a60; letter-spacing: 0; font-size: 0.72rem; }
.pp_kachel_sterne b { font-weight: 400; }
.pp_kachel_sterne .pp_leer { color: #c3bba3; }
.pp_schloss { color: #7d8b80; flex: 0 0 auto; }
.pp_kachel_zahlen { font-size: 0.68rem; color: #5a6a60; margin-top: auto; }

/* Knöpfe der Pause- und Ergebniskarte */
.pp_start, .pp_wahl {
  border: 1px solid transparent;
  border-radius: 0.55rem;
  padding: 0.62rem 1.5rem;
  min-height: 40px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .12s, transform .1s;
}
/* Hauptweg: gelbe Taste */
.pp_start {
  background: linear-gradient(180deg, #f8c463 0%, #e89d1c 100%);
  color: #2a2416;
  border-color: #b87d14;
  box-shadow: 0 3px 0 rgba(120, 80, 12, .40), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.pp_start:hover { background: linear-gradient(180deg, #ffd27a 0%, #f0a92e 100%); }
/* Nebenwege: Stahltasten */
.pp_wahl {
  background: linear-gradient(180deg, #46554e 0%, #35423c 100%);
  color: #f3f0e3;
  border-color: #6f8179;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pp_wahl:hover { background: linear-gradient(180deg, #55665d 0%, #41504a 100%); }
.pp_wahl_grau { background: linear-gradient(180deg, #85918a 0%, #6d7a73 100%); }
.pp_wahl_grau:hover { background: linear-gradient(180deg, #94a099 0%, #7b8881 100%); }
.pp_knopf_reihe {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}
.pp_tasten_hinweis { font-size: 0.74rem; color: #5a6a60; margin: 0.6rem 0 0; }

/* Ergebnis-Karte: das Versandprotokoll */
.pp_ende_punkte {
  font-size: 1.9rem;
  font-weight: 900;
  margin: 0.3rem 0 0.1rem;
  font-variant-numeric: tabular-nums;
  color: #1f2b27;
}
.pp_sterne { font-size: 1.6rem; letter-spacing: 0.12em; margin: 0.2rem 0 0.4rem; color: #d99b12; }
.pp_ende_zeile { margin: 0.1rem 0; color: #5a6a60; }

/* ---------- 8. Das Startmenü ----------
   Man steht in der Halle: die Kulisse liegt hinter einem dunklen Schleier,
   davor der Packmeister und eine Karte je Merkmal (Karton-Etiketten). */
.pp_startbild {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: auto;
  padding: clamp(0.5rem, 2vw, 1.4rem);
  background-image:
    linear-gradient(180deg, rgba(14, 22, 20, .82) 0%, rgba(10, 17, 15, .90) 100%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center top, center center;
  color: var(--pp-hell);
}
.pp_startbild_innen { max-width: 1080px; margin: 0 auto; padding-bottom: 1.5rem; }

/* ---- Der Held: Packmeister, Titel, Spruch (Stahlkonsole) ---- */
.pp_hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.5rem);
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(52, 66, 60, .94) 0%, rgba(30, 40, 36, .96) 100%);
  border: 1px solid #61736b;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pp_hero::before {
  content: "";
  position: absolute;
  left: 1.1rem; right: 1.1rem; top: 0.42rem;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(115deg,
    var(--pp-gelb) 0 12px, #2b3532 12px 24px);
  opacity: 0.9;
}
.pp_hero_mascot {
  width: clamp(96px, 15vw, 164px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5));
}
.pp_hero_text { min-width: 0; }
.pp_hero_titel {
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.pp_hero_titel .pp_titel_a { color: #7fd695; }
.pp_hero_titel .pp_titel_b { color: #ffb35c; }
.pp_hero_titel .pp_titel_a,
.pp_hero_titel .pp_titel_b {
  text-shadow:
    -1.5px -1.5px 0 rgba(14, 24, 20, .92), 1.5px -1.5px 0 rgba(14, 24, 20, .92),
    -1.5px 1.5px 0 rgba(14, 24, 20, .92), 1.5px 1.5px 0 rgba(14, 24, 20, .92),
    0 4px 0 rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .55);
}
.pp_hero_unter {
  margin: 0.2rem 0 0;
  font-size: clamp(0.95rem, 2.4vw, 1.3rem);
  font-weight: 700;
  color: #cfe0d3;
}
.pp_hero_spruch {
  margin: 0.6rem 0 0;
  display: inline-block;
  background: #1e2825;
  border: 2px solid var(--pp-gelb);
  color: var(--pp-gelb-hell);
  border-radius: 999px;
  padding: 0.34rem 0.95rem;
  font-weight: 800;
  font-size: clamp(0.82rem, 2vw, 1rem);
  box-shadow: 0 4px 14px rgba(240, 169, 46, .22);
}
.pp_startbild_x {
  position: absolute;
  top: 0.8rem;
  right: 0.6rem;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid #6f8179;
  background: linear-gradient(180deg, #4c5b54 0%, #3a4842 100%);
  color: #f3f0e3;
  border-radius: 0.55rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.pp_startbild_x:hover { background: linear-gradient(180deg, #5a6b62 0%, #46554e 100%); }

/* ---- Die Karten der Merkmale: Karton-Etiketten ---- */
.pp_menue_modi_titel {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  margin: 1.1rem 0 0.2rem;
  color: var(--pp-gelb-hell);
}
.pp_modi {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  margin: 0.6rem 0 0.2rem;
}
.pp_modi_karte {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  text-align: left;
  font: inherit;
  color: var(--pp-tinte);
  cursor: pointer;
  background: linear-gradient(180deg, #f9f1de 0%, #ecdfc3 100%);
  border: 2px solid #c9b795;
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem 0.8rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.pp_modi_karte:hover {
  transform: translateY(-3px);
  border-color: var(--pp-gelb);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.pp_modi_karte:focus-visible { outline: 3px solid var(--pp-gelb); outline-offset: 3px; }
.pp_modi_kopf { display: flex; align-items: center; gap: 0.55rem; }
.pp_modi_ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 0.55rem;
  background: #f6eedb;
  border: 1px solid #d8c9a6;
  color: #2f6b4a;
  flex: 0 0 auto;
}
.pp_modi_titel { font-weight: 800; font-size: 1.03rem; color: #24302e; }
.pp_modi_chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pp_chip {
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pp_chip_zeit { background: #e5eee1; color: #2b5c46; }
.pp_chip_stern { background: #fbeecb; color: #9a6a12; letter-spacing: 0.06em; }
.pp_modi_text { font-size: 0.84rem; color: #4b5b52; }
.pp_modi_bild {
  width: 100%;
  height: 152px;
  display: block;
  border-radius: 0.55rem;
  margin-top: 0.4rem;
  border: 1px solid #d5c6a6;
  background: #22302c;
}
.pp_menue_hinweis { font-size: 0.82rem; color: #c3d2c6; margin: 0.5rem 0 0; }

/* ---- Die Optionen: Schalttafel der Halle ---- */
.pp_optionen {
  margin-top: 1.1rem;
  background: linear-gradient(180deg, rgba(24, 33, 30, .92) 0%, rgba(16, 23, 21, .94) 100%);
  border: 1px solid #4a5851;
  border-radius: 0.8rem;
  padding: 0.8rem 1rem 0.9rem;
  color: var(--pp-hell);
}
.pp_opt_titel {
  font-size: 0.78rem;
  margin: 0 0 0.5rem;
  color: var(--pp-gelb-hell);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.pp_opt_reihe { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.pp_opt_knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.95rem;
  border-radius: 0.55rem;
  border: 1px solid #6f8179;
  background: linear-gradient(180deg, #3a4842 0%, #2b3733 100%);
  color: #f3f0e3;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pp_opt_knopf:hover { border-color: var(--pp-gelb); }
.pp_opt_knopf[aria-pressed="true"] {
  background: linear-gradient(180deg, #f8c463 0%, #e89d1c 100%);
  border-color: #b87d14;
  color: #2a2416;
  box-shadow: 0 3px 0 rgba(120, 80, 12, .40), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.pp_opt_ico { font-size: 1.05rem; }
.pp_opt_wert { font-weight: 900; }
.pp_opt_hinweis { font-size: 0.8rem; color: #b9c9bd; margin: 0.6rem 0 0; }

/* ---- Weitere Wege ---- */
.pp_startbild_werkzeuge {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1rem 0 0;
}

/* ---------- 9. Fuss (Schulbezug + Impressum, 3.13.2) ---------- */
.pp_fuss {
  margin-top: 0.4rem;
  border-top: 3px solid var(--pp-gelb);
}
.pp_fuss a { color: var(--link-color, #1e5fa8); }

/* ---------- 10. Dark Mode: Nachtschicht in der Halle ----------
   Dieselbe Welt bei Nacht: die Kulisse wird stark gedimmt, die gelben
   Markierungen, Lampen und Etiketten bleiben an. */
html[data-theme="dark"] body.jupi.pp {
  background-color: #0c1211;
  background-image:
    linear-gradient(180deg,
      rgba(6, 11, 10, .90) 0%,
      rgba(9, 15, 13, .86) 45%,
      rgba(4, 8, 7, .94) 100%),
    url("kulisse.svg");
  color: #e6ece7;
}
html[data-theme="dark"] .pp_leiste {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #22302a 0%, #16211d 100%);
  border-bottom-color: var(--pp-gelb);
  color: #e8f1e8;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .pp_zurueck {
  background: #16211d;
  color: #ffc266;
  border-color: #ffc266;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .pp_zurueck:hover { background: #2a2118; }
html[data-theme="dark"] .pp_titel_a { color: #8ede9f; }
html[data-theme="dark"] .pp_titel_b { color: #ffb35c; }
/* Im Dunkelmodus wäre eine weisse Kontur zu grell - da nimmt die Kontur die
   Farbe des dunklen Grundes an, die Lettern selbst leuchten. */
html[data-theme="dark"] .pp_titel_a,
html[data-theme="dark"] .pp_titel_b {
  text-shadow:
    -1.5px -1.5px 0 rgba(12, 26, 20, .9), 1.5px -1.5px 0 rgba(12, 26, 20, .9),
    -1.5px 1.5px 0 rgba(12, 26, 20, .9), 1.5px 1.5px 0 rgba(12, 26, 20, .9),
    0 3px 0 rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .pp_vermerk { background: var(--pp-gelb); color: #201607; }
/* Die Konsole bleibt dunkel - nur die Kanten werden ruhiger. */
html[data-theme="dark"] .pp_panel {
  background: linear-gradient(180deg, #303c37 0%, #212a27 62%, #1a2320 100%);
  border-color: #3f4d47;
}
html[data-theme="dark"] .pp_aufgabe {
  background: linear-gradient(180deg, #ece5d2 0%, #ded4bb 100%);
  color: #1e2a25;
  border-color: #a99b7f;
}
html[data-theme="dark"] .pp_dialog,
html[data-theme="dark"] .pp_karte {
  background: linear-gradient(180deg, #1f2a26 0%, #18211e 100%);
  color: #e8f0e8;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .10);
}
html[data-theme="dark"] .pp_karte h2 { color: #f2f6ef; }
html[data-theme="dark"] .pp_dialog_fuss {
  background: rgba(255, 255, 255, .04);
  border-top-color: rgba(255, 255, 255, .10);
}
html[data-theme="dark"] .pp_dialog_x {
  border-color: #4f5f58;
  background: linear-gradient(180deg, #3a4842 0%, #2b3733 100%);
}
html[data-theme="dark"] .pp_hinweis,
html[data-theme="dark"] .pp_kachel_aufg,
html[data-theme="dark"] .pp_kachel_sterne span,
html[data-theme="dark"] .pp_kachel_zahlen,
html[data-theme="dark"] .pp_ende_zeile,
html[data-theme="dark"] .pp_tasten_hinweis { color: #a8bcb0; }
/* Karteikarten der Levelwahl: im Dunkeln dunkler Karton */
html[data-theme="dark"] .pp_kachel {
  background: linear-gradient(180deg, #26322e 0%, #1e2925 100%);
  border-color: #43514b;
  color: #e8f0e8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .pp_gewaehlt {
  background: linear-gradient(180deg, #22392c 0%, #1a2e24 100%);
  border-color: #7fd695;
}
html[data-theme="dark"] .pp_kachel_nr { background: #3d4b45; color: var(--pp-gelb-hell); }
html[data-theme="dark"] .pp_kachel_sterne .pp_leer { color: #55636f; }
html[data-theme="dark"] .pp_schloss { color: #9fb4a6; }
html[data-theme="dark"] .pp_lernsatz { background: rgba(47, 143, 74, .20); }
html[data-theme="dark"] .pp_merk { background: rgba(240, 169, 46, .16); }
html[data-theme="dark"] .pp_meldung {
  background: linear-gradient(180deg, #24312c 0%, #1b2622 100%);
  color: #eef4ec;
  border-color: #41504a;
}
html[data-theme="dark"] .pp_fuss {
  border-top-color: var(--pp-gelb);
}
html[data-theme="dark"] .pp_buehne {
  border-color: #1b2422;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* Das Startmenü ist in beiden Themes die dunkle Halle - im Dunkeln noch
   eine Spur tiefer, damit die Karton-Etiketten leuchten. */
html[data-theme="dark"] .pp_startbild {
  background-image:
    linear-gradient(180deg, rgba(8, 14, 12, .88) 0%, rgba(4, 8, 7, .95) 100%),
    url("kulisse.svg");
}
html[data-theme="dark"] .pp_hero {
  background: linear-gradient(180deg, rgba(40, 52, 47, .96) 0%, rgba(22, 31, 28, .97) 100%);
  border-color: #4e5f57;
}
html[data-theme="dark"] .pp_menue_hinweis { color: #b9c9bd; }

/* ---------- 11. Handy ---------- */
@media (max-width: 640px) {
  /* Kopfzeile bricht in zwei Zeilen: oben die Marke, darunter zurück + Werkzeuge */
  .pp_leiste {
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
  }
  .pp_marke { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
  .pp_marke_logo { width: 32px; height: 32px; }
  .pp_titel { font-size: 1.05rem; }
  .pp_vermerk { display: none; }        /* der Titel reicht auf dem Handy */
  .pp_nav { grid-row: 2; grid-column: 1; }
  .pp_zurueck_wort { display: none; }
  /* Hier traegt der Pfeil allein die Beschriftung (inkl. RTL-Spiegelung). */
  .pp_zurueck > span[aria-hidden="true"] { display: inline-flex; }
  .pp_zurueck { padding: 0.2rem 0.6rem; }
  .pp_werkzeuge { grid-row: 2; grid-column: 2; gap: 0.25rem; }
  /* Der Sprach-Umschalter kommt sonst über den rechten Rand (390 px) */
  .pp_leiste .jupi_sprachen_select { max-width: 104px; }

  /* Steuerleiste: Anzeigen oben, Knöpfe darunter über die volle Breite */
  .pp_panel { padding: 0.55rem 0.5rem 0.45rem; gap: 0.4rem; }
  .pp_steuerung { margin-left: 0; width: 100%; }
  .pp_steuer_knopf { flex: 1 1 auto; }
  .pp_anzeige { font-size: 0.64rem; padding: 0.2rem 0.35rem; letter-spacing: 0.04em; }
  .pp_anzeige b { font-size: 0.88rem; }   /* sonst bricht die Leiste um */
  /* Der Barcode im Auftrag würde auf 390 px unter dem Text liegen. */
  .pp_aufgabe { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
  .pp_aufgabe::after { display: none; }
  .pp_aufgabe::before { display: none; }
  .pp_meldung { font-size: 0.85rem; padding: 0.3rem 0.8rem; }
  .pp_main { padding: 0.4rem 0.4rem 0.7rem; }
  .pp_level { grid-template-columns: repeat(2, 1fr); }
  .pp_kachel { min-height: 76px; }
  .pp_knopf_reihe .pp_start, .pp_knopf_reihe .pp_wahl { flex: 1 1 auto; }

  /* Startmenü: eine Spalte, Hero oben gestapelt */
  .pp_hero { flex-direction: column; text-align: center; padding: 0.9rem 0.8rem 1rem; }
  .pp_hero_spruch { margin-left: auto; margin-right: auto; }
  .pp_modi { grid-template-columns: 1fr; }
  .pp_modi_bild { height: 140px; }
  .pp_startbild_werkzeuge .pp_start,
  .pp_startbild_werkzeuge .pp_wahl { flex: 1 1 100%; }
  .pp_hud { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .pp_anzeige {
    min-width: 0;
    padding: 0.3rem 0.15rem;
    gap: 0.1rem;
    flex-direction: column;
    align-items: center;
  }
  .pp_buehne { min-height: 340px; border-width: 5px; border-top-width: 0; }
  /* Mehr Platz für zwei Gurte: Schulbezug bleibt im kompakten Fuß erreichbar. */
  .pp_fuss { padding: 0.55rem 0.5rem; }
  .pp_fuss p { margin: 0.35rem 0; font-size: 0.72rem; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .pp_meldung { transition: none; }
  .pp_anzeige b.knapp { animation: none; }
  .pp_steuer_knopp:active, .pp_steuer_knopf:active { transform: none; }
  .pp_modi_karte:hover { transform: none; }
}

/* ---------- 12. Tastatur-Fokus: gut sichtbar auf Karton und Stahl ---------- */
body.pp :is(button, a, select):focus-visible {
  outline: 3px solid #ffc857;
  outline-offset: 3px;
}
html[data-theme="dark"] body.pp :is(button, a, select):focus-visible {
  outline-color: #ffd684;
}

/* ---------- 13. Die beiden Plattform-Werkzeuge auf Karton ----------
   Der 🌐-Umschalter und der Theme-Schalter sind für den gruenen
   Plattform-Kopf gebaut (weisse Schrift auf durchscheinendem Weiss). Auf
   dem hellen Versandkarton wären sie unsichtbar - deshalb hier eigene
   Farben, in beiden Themes. */
.pp_leiste .jupi_sprachen_select {
  color: #24302e;
  background: #ffffff;
  border: 1px solid rgba(35, 44, 43, .35);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(35, 44, 43, .12);
}
.pp_leiste .jupi_sprachen_select:hover { background: #f7f1e2; }
.pp_leiste .jupi_theme_switch {
  background: rgba(35, 44, 43, .16);
  border: 1px solid rgba(35, 44, 43, .38);
}
.pp_leiste .jupi_theme_switch:hover { background: rgba(35, 44, 43, .24); }
.pp_leiste .jupi_theme_switch .jts_thumb {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(20, 30, 26, .45);
}
html[data-theme="dark"] .pp_leiste .jupi_sprachen_select {
  color: #f4f1e6;
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .40);
  font-weight: 600;
  box-shadow: none;
}
html[data-theme="dark"] .pp_leiste .jupi_sprachen_select:hover {
  background: rgba(255, 255, 255, .22);
}
html[data-theme="dark"] .pp_leiste .jupi_theme_switch {
  background: rgba(0, 0, 0, .35);
  border-color: rgba(255, 255, 255, .30);
}


/* ---------- 14. Der Theme-Pill bleibt 74 x 40 px (3.13.2 / 3.13.5) ----------
   Ohne feste Breite schrumpft er in der schmalen Werkzeug-Gruppe (am Handy
   sass der Mond ausserhalb der Pille). */
.pp_leiste .jupi_theme_switch { width: 74px; height: 40px; min-width: 74px; }
.pp_leiste .jupi_theme_switch .jts_thumb {
  width: 32px; height: 32px; top: 3px; bottom: auto;
}
html[data-theme="light"] .pp_leiste .jupi_theme_switch .jts_thumb { left: 3px; }
html[data-theme="dark"] .pp_leiste .jupi_theme_switch .jts_thumb { left: calc(100% - 35px); }