/* ==========================================================================
   abzock-radar/styles.css - Abzock-Radar
   Optik "Verbraucher-Detektivbuero" (26.10.2026, GUI-NEUBAU)

   Bildidee: Der Schueler sitzt als Verbraucher-Detektiv am Schreibtisch.
   Hinter dem Tisch liegt eine kachelbare Kork-Pinnwand mit Fallakten,
   Belegen und Warn-Dreiecken (kulisse.svg), die Kopfzeile ist eine
   Nussbaum-Konsole mit Absperrband-Kante (gelb-schwarz, wie eine
   Verbraucherwarnung), und der nachgebaute Bildschirm steht als
   Beweisstueck im dunklen Handy-Gehaeuse auf dem Tisch. Gefundene Tricks
   landen als Beweis-Zettel (Manila-Papier mit roter Nadel) unter dem
   Handy, der Runden-Bericht ist ein getipptes Bericht-Blatt. Die
   nachgebauten Shops bleiben ABSICHTLICH immer hell - sie sind das
   "echte" Ausstellstueck (Muster Phishing/Fake-News: Papier bleibt Papier).

   Aufbau:
     1. Farben & Grundform (Pinnwand als Seitenhintergrund)
     2. Container + Fuss: stehen direkt auf der Wand
     3. Drei-Zonen-Kopfzeile (Fallakten-Konsole mit Absperrband-Kante)
     4. Schreibtisch-Konsole (HUD)
     5. Buehne: Handy als Beweisstueck + Frage + Status-Etiketten
     6. Trick-Markierungen
     7. Beweis-Zettel (gefundene Tricks)
     8. Antworten + Meldungen
     9. Radar-Bericht (Runden-Abschluss)
    10. Startmenue (Fallakte)
    11. Nachgebaute Website-Inhalte (immer hell, wie echte Sites)
    12. Kleinere Bildschirme, reduzierte Bewegung, Dark Mode
   ========================================================================== */

/* ---------- 1. Farben & Grundform --------------------------------------- */
/* Der Doppelklasser body.jupi.ar_body schlaegt die Plattform-Regeln aus
   css/jupi.css (body.jupi = 0,1,1; dark = 0,2,1) zuverlaessig. */
body.jupi.ar_body {
  --ar-wand: #6f4728;             /* Kork-Grundton (Pinnwand) */
  --ar-holz: #40301d;             /* Nussbaum-Konsole */
  --ar-holz-hoch: #5a442c;        /* hellere Holz-Kante */
  --ar-holz-tief: #2b1e10;
  --ar-messing: #c9a35c;          /* Messing-Kante */
  --ar-warn: #f2c14e;             /* Absperrband-Gelb / Akzente */
  --ar-warn-tief: #241a0e;        /* Absperrband-Schwarzbraun */
  --ar-papier: #f4ead2;           /* Beweis-Zettel / Bericht-Blatt */
  --ar-papier-hell: #f8f1e0;
  --ar-papier-kante: #d3bd8e;
  --ar-tinte: #3a2a18;            /* Tinte auf Papier */
  --ar-tinte-matt: #7a6748;
  --ar-text: #f3e8d0;             /* Creme auf Konsole und Wand */
  --ar-text-matt: #cfbc95;
  --ar-rot: #c8503e;
  --ar-gruen: #4f9e63;

  background-color: var(--ar-wand);
  background-image:
    radial-gradient(circle at 50% -12%, rgba(255, 210, 140, .18) 0%, rgba(255, 210, 140, 0) 44%),
    url("kulisse.svg");
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, repeat;
  background-size: auto, 480px 480px;
  color: var(--ar-text);
  min-height: 100dvh;
}

/* Nachtschicht im Buero: die Wand wird stiller, Konsole und Papier geben
   den Ton an (Muster Raetselrakete/Schatzkarte: Nachtebene UEBER der Kachel). */
html[data-theme="dark"] body.jupi.ar_body {
  --ar-wand: #4a2e16;
  --ar-holz: #332516;
  --ar-holz-hoch: #46351f;
  --ar-holz-tief: #201509;
  --ar-text: #f0e6d2;
  --ar-text-matt: #bfa982;
  background-color: var(--ar-wand);
  background-image:
    radial-gradient(circle at 50% -12%, rgba(255, 210, 140, .10) 0%, rgba(255, 210, 140, 0) 40%),
    linear-gradient(rgba(16, 8, 2, .45), rgba(16, 8, 2, .45)),
    url("kulisse.svg");
}

/* Der Container wird durchsichtig - die Wand ist der Hintergrund. */
.ar_body .jupi_container {
  background: transparent;
  max-width: 64rem;
  margin-inline: auto;
  min-height: 100dvh;
}
.ar_body .jupi_main {
  background: transparent;
  max-width: 64rem;
  padding: 1rem 1.1rem 2rem;
}
.ar_body [hidden] { display: none !important; }

/* ---------- 2. Fuss: steht direkt auf der Wand --------------------------- */
.ar_body .jupi_footer {
  background: transparent;
  border-top: 2px solid rgba(201, 163, 92, .45);
  border-radius: 0;
  margin: 0 auto;
  max-width: 64rem;
  padding: .9rem 1rem 1.2rem;
  box-shadow: none;
}
/* Die Plattform malt Fuss und Hauptbereich im Dunkelmodus wieder mit
   Flachenfarbe - hier bleiben beide durchsichtig (Wand). */
html[data-theme="dark"] body.jupi.ar_body .jupi_container > .jupi_main,
html[data-theme="dark"] body.jupi.ar_body .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 2px solid rgba(201, 163, 92, .45);
}
.ar_body .jupi_footer_text { color: var(--ar-text-matt); }
.ar_body .jupi_footer_text a { color: var(--ar-warn); }

/* ---------- 3. Drei-Zonen-Kopfzeile (Fallakten-Konsole) ------------------ */
/* Nussbaum-Holz mit Messing-Kante; unter der Konsole laeuft das
   Absperrband (gelb-schwarz) wie bei einer Verbraucherwarnung. */
.ar_header,
header.jupi_header.ar_header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .55rem 1rem .75rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(243, 232, 208, .06) 0 8%, transparent 9%),
    radial-gradient(circle at 88% 82%, rgba(0, 0, 0, .35) 0 9%, transparent 10%),
    linear-gradient(180deg, var(--ar-holz-hoch) 0%, var(--ar-holz) 55%, var(--ar-holz-tief) 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(243, 232, 208, .16);
}
/* Messinglinie + Absperrband-Kante (Wunschmotiv: Verbraucherwarnung) */
.ar_header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 8px;
  background:
    linear-gradient(180deg, var(--ar-messing) 0 1.5px, transparent 1.5px),
    repeating-linear-gradient(-45deg,
      var(--ar-warn) 0 13px, var(--ar-warn-tief) 13px 26px);
  pointer-events: none;
}
.ar_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .65rem;
  min-width: 0;
}
/* Logo im runden Fallakten-Siegel mit Messing-Ring */
.ar_marke {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4e3a24, #241708);
  border: 2px solid var(--ar-messing);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.ar_marke img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  aspect-ratio: 1;
}
.ar_titel { display: flex; flex-direction: column; min-width: 0; }
.ar_brand h1 {
  margin: 0;
  color: #ffffff;
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.ar_untertitel {
  color: var(--ar-warn);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: flex;
  align-items: center;
  border-radius: 999px;
  padding: .4rem .85rem;
  line-height: 1.2;
  font-size: .88rem;
  min-height: 40px;
  box-sizing: border-box;
  background: var(--ar-holz-tief);
  color: var(--ar-text);
  border: 1px solid rgba(201, 163, 92, .55);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.ar_header .jupi_nav_back:hover { filter: brightness(1.12); }
.ar_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ar_header #jupi_sprachen_wahl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.ar_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  cursor: pointer;
}
.ar_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
html[data-theme="dark"] .ar_header .jts_thumb {
  left: calc(100% - 36px);
}
.ar_header .jts_sun { left: 9px; }
.ar_header .jts_moon { right: 9px; }

/* ---------- 4. Schreibtisch-Konsole (HUD) -------------------------------- */
.ar_panel {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--ar-holz-hoch) 0%, var(--ar-holz) 60%, var(--ar-holz-tief) 100%);
  border-radius: .9rem;
  border-top: 2px solid var(--ar-messing);
  padding: .7rem 1rem;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(243, 232, 208, .12);
  margin-bottom: .8rem;
}
.ar_stat label {
  display: block; font-size: .68rem; color: var(--ar-text-matt);
  text-transform: uppercase; letter-spacing: .08em;
}
.ar_stat span { font-size: 1.25rem; font-weight: 800; color: var(--ar-warn); }
.ar_controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ar_controls label { color: var(--ar-text); }

/* Selects und Zusatz-Knoepfe sitzen als dunkle Glas-Pillen auf der Konsole */
.ar_panel .jupi_select {
  background: rgba(20, 12, 4, .55);
  color: var(--ar-text);
  border: 1px solid rgba(201, 163, 92, .55);
  border-radius: 999px;
  min-height: 40px;
}
.ar_panel .jupi_select option { color: #1a1a1a; background: #f4ead2; }
.ar_panel .jupi_btn.jupi_btn_alt,
.ar_start_einstellungen .jupi_btn.jupi_btn_alt,
.ar_start_aktion .jupi_btn.jupi_btn_alt {
  background: rgba(20, 12, 4, .55);
  color: var(--ar-text);
  border: 1px solid rgba(201, 163, 92, .55);
}
.ar_panel .jupi_btn.jupi_btn_alt:hover,
.ar_start_einstellungen .jupi_btn.jupi_btn_alt:hover,
.ar_start_aktion .jupi_btn.jupi_btn_alt:hover { filter: brightness(1.15); }

/* Bedienziele Mindesthoehe 40px (Regel 3.13.5) */
.ar_controls .jupi_select,
.ar_controls .jupi_btn,
.ar_btns_row .jupi_btn,
.ar_done .jupi_btn,
.ar_start_einstellungen .jupi_select,
.ar_start_einstellungen .jupi_btn,
.ar_start_aktion .jupi_btn {
  min-height: 40px;
  box-sizing: border-box;
}

/* ---------- 5. Buehne: Handy als Beweisstueck ---------------------------- */
.ar_frage_label {
  color: var(--ar-text);
  text-align: center; font-weight: 700; font-size: 1.02rem;
  margin: .4rem 0 .6rem;
}
.ar_buehne_wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
}
.ar_handy {
  width: min(430px, 94vw);
  border: 3px solid var(--ar-holz-tief);
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper, #ffffff);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .35);
}
.ar_handy_leiste {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--grau100, #f1f3f4);
  border-bottom: 2px solid var(--grau200, #e0e0e0);
}
.ar_punkt {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grau400, #9aa0a6);
}
.ar_adresse {
  flex: 1;
  font-size: .78rem;
  color: var(--grau700, #5f6368);
  background: var(--paper, #ffffff);
  border-radius: 999px;
  padding: 3px 12px;
  border: 1px solid var(--grau200, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar_fiktiv {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: var(--ar-rot);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.ar_inhalt {
  max-height: min(58vh, 560px);
  overflow-y: auto;
}

/* ---------- Status-Etiketten unter dem Handy (Ablage) -------------------- */
.ar_status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
/* WICHTIG: display:flex wuerde das hidden-Attribut aushebeln (UA-Regel ist
   schwaecher als eine Klassen-Regel) - im Modus "Richtig reagieren" blieben
   die Trick-/Fehlklick-Chips sonst sichtbar stehen. */
.ar_status[hidden] { display: none !important; }
.ar_chip {
  font-size: .85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ar-papier);
  color: var(--ar-tinte);
  border: 1px solid var(--ar-papier-kante);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.ar_chip_ok { background: #dcf0d4; border-color: var(--ar-gruen); }
.ar_chip_fehler { background: #f6dcd6; border-color: var(--ar-rot); }

/* ---------- 6. Trick-Markierungen ---------------------------------------- */
/* Absichtlich KEIN Hover-Effekt und KEIN Zeiger-Cursor: Tricks findet man
   durch Lesen, nicht durch Ueberfahren mit der Maus. */
.ar_trick { border-radius: 8px; }
.ar_trick_offen {
  background: #d7f0d0 !important;
  outline: 3px solid var(--ar-gruen) !important;
  position: relative;
}
.ar_trick_offen::after {
  content: "🎯";
  position: absolute;
  top: -12px; right: -8px;
  font-size: 1rem;
}
.ar_trick_verpasst {
  outline: 3px dashed var(--ar-warn) !important;
  background: #fff6d6 !important;
}
.ar_trick_puls { animation: ar_puls .7s ease-in-out 3; }
@keyframes ar_puls {
  0%, 100% { outline: 0 solid transparent; }
  50% { outline: 4px solid var(--lightblue600, #039be5); }
}
.ar_fehlerklatsch { animation: ar_wackeln .4s; }
@keyframes ar_wackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* ---------- 7. Beweis-Zettel (gefundene Tricks) -------------------------- */
/* Jeder gefundene Trick landet als Manila-Zettel mit roter Nadel unter
   dem Handy - wie ein Beweisstueck auf der Pinnwand. */
.ar_gefunden {
  display: flex; flex-direction: column; gap: 10px; margin: .8rem auto;
  max-width: 560px;
}
.ar_gefunden_item {
  position: relative;
  background: var(--ar-papier);
  color: var(--ar-tinte);
  border-radius: 6px;
  padding: 10px 14px 9px;
  border-left: 5px solid var(--ar-gruen);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  font-size: .9rem;
}
.ar_gefunden_item::before {
  content: "";
  position: absolute;
  top: -5px;
  inset-inline-start: 14px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e07a63, var(--ar-rot) 60%, #8e3527);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}
.ar_gefunden_item strong { display: block; color: #2e6b40; }

/* ---------- 8. Antworten + Meldungen ------------------------------------- */
/* Antworten liegen als Papier-Zettel mit Messing-Rand auf der Wand. */
.ar_antworten { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: .8rem 0; }
.ar_btn_antwort {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 2px solid var(--ar-papier-kante); color: var(--ar-tinte);
  background: var(--ar-papier); border-radius: 10px; padding: 10px 18px;
  max-width: 460px; min-height: 40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  box-sizing: border-box;
}
.ar_btn_antwort:hover:not(:disabled) { background: var(--ar-papier-hell); }
.ar_btn_antwort:disabled { cursor: default; opacity: .55; }
.ar_btn_right {
  background: var(--ar-gruen) !important; border-color: #2e6b40 !important;
  color: #fff !important; opacity: 1 !important;
}
.ar_btn_wrong {
  background: #f6dcd6 !important; border-color: var(--ar-rot) !important;
  color: #8e2a1c !important;
}

/* Meldungen stehen direkt auf der dunklen Wand -> helle Tintentöne. */
.ar_msg {
  min-height: 3.2em; text-align: center; font-size: .95rem;
  color: var(--ar-text);
  padding: .4rem .6rem;
}
.ar_msg_ok { color: #a8d8a0; font-weight: 700; }
.ar_msg_err { color: #ffab97; font-weight: 700; }

.ar_btns_row { text-align: center; margin-top: .4rem; }

/* ---------- 9. Radar-Bericht (Runden-Abschluss) -------------------------- */
/* Der Bericht ist ein getipptes Blatt Manila-Papier - es bleibt in BEIDEN
   Themes hell, es ist das Ausstellstueck (Muster Phishing/Fake-News). */
.ar_done {
  text-align: center;
  background: var(--ar-papier);
  color: var(--ar-tinte);
  border: 1px solid var(--ar-papier-kante);
  border-radius: .6rem;
  padding: 1.6rem 1rem 1.4rem;
  position: relative;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
/* Abreiss-Kante oben wie bei einem Drucker-Bogen */
.ar_done::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 6px;
  height: 0;
  border-top: 2px dashed var(--ar-papier-kante);
}
.ar_done h3 { margin-top: 0; color: #8a5a32; }
.ar_done_icon { font-size: 3rem; margin: 0; }
.ar_done p { color: var(--ar-tinte); }
.ar_sterne { font-size: 1.8rem; margin: .4rem 0 .8rem; }
.ar_konfetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ar_konfetti i {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  opacity: .9;
  animation: ar_fallen 2.8s ease-in forwards;
}
@keyframes ar_fallen {
  to { transform: translateY(105vh) rotate(540deg); opacity: .15; }
}

/* ---------- 10. Startmenue (Fallakte) ------------------------------------ */
.ar_start {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 13, 4, .88);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ar_start[hidden] { display: none !important; }
/* Die Karte ist eine Fallakte: Manila-Papier, rote Nadel oben, Ablage-Tab. */
.ar_start_karte {
  position: relative;
  background: var(--ar-papier);
  color: var(--ar-tinte);
  border: 1px solid var(--ar-papier-kante);
  border-radius: .5rem;
  padding: 1.5rem 1.5rem 1.4rem;
  max-width: 540px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
.ar_start_karte::before {
  content: "";
  position: absolute;
  top: 9px;
  inset-inline-start: 50%;
  width: 13px; height: 13px;
  margin-inline-start: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e07a63, var(--ar-rot) 60%, #8e3527);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
}
.ar_start_logo {
  display: block; margin: .3rem auto .4rem;
  width: 56px; height: 56px; border-radius: 12px;
}
.ar_start_karte h2 { margin-top: 0; margin-bottom: .2rem; font-size: 1.35rem; color: #8a5a32; }
.ar_start_karte p { font-size: .95rem; line-height: 1.45; }

.ar_start_info {
  text-align: left;
  margin: .6rem 0;
  background: var(--ar-papier-hell);
  border: 1.5px dashed var(--ar-papier-kante);
  border-radius: .5rem;
  padding: .6rem .9rem;
  font-size: .92rem;
  color: var(--ar-tinte);
}
.ar_start_info summary {
  font-weight: 800;
  cursor: pointer;
  font-size: .98rem;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.ar_start_info p { margin: .4rem 0; }
.ar_start_einstellungen {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  margin: .9rem 0 .4rem;
}
.ar_start_einstellungen label { color: var(--ar-tinte); }
/* Selects auf der Fallakte: Papier auf Papier (in beiden Themes gleich). */
.ar_start_einstellungen .jupi_select {
  background: var(--ar-papier-hell);
  color: var(--ar-tinte);
  border: 1.5px solid var(--ar-papier-kante);
  border-radius: 999px;
  min-height: 40px;
}
.ar_start_einstellungen .jupi_select option { color: #1a1a1a; background: #f4ead2; }
.ar_start_aktion {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: .8rem;
}

/* ---------- 11. Nachgebaute Website-Inhalte (immer hell, wie echte Sites) */
.ar_seite {
  background: #ffffff;
  color: #1a1a1a;
  font-size: .92rem;
  padding: 12px 14px 16px;
  font-family: Arial, Helvetica, sans-serif;
}
.ar_seite_dunkel { background: #e8ebee; min-height: 300px; }
.ar_seite_schatten { opacity: .45; padding: 4px 2px 10px; }
.ar_faux_zeile {
  height: 14px; border-radius: 7px; background: #c4cbd2; margin-bottom: 9px;
}
.ar_faux_zeile.kurz { width: 62%; }
.ar_kopf {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1rem;
  background: #243447; color: #fff;
  margin: -12px -14px 10px; padding: 10px 14px;
}
.ar_produkt_kasten {
  background: #f2f5f7; border-radius: 12px; padding: 8px;
  display: flex; justify-content: center; margin-bottom: 8px;
}
.ar_produkt_bild { width: 130px; height: auto; }
.ar_seite h4 { margin: 2px 0 8px; font-size: 1.05rem; line-height: 1.25; }
.ar_text { margin: 6px 0; font-size: .9rem; }

.ar_bewertung { color: #e08600; font-size: .88rem; margin-bottom: 4px; }
.ar_stern_an { color: #e08600; }
.ar_stern_aus { color: #c9ced4; }
.ar_preis_zeile { display: flex; align-items: baseline; gap: 10px; margin: 4px 0; }
.ar_alt {
  color: #9aa0a6; text-decoration: line-through; font-size: .85rem;
}
.ar_preis { color: #c62828; font-weight: 800; font-size: 1.35rem; }
.ar_vorrat { color: #c62828; font-size: .85rem; margin: 4px 0; }

.ar_countdown {
  background: #212121; color: #ffd54f;
  font-weight: 800; text-align: center;
  border-radius: 8px; padding: 7px; margin: 8px 0; font-size: .95rem;
}
.ar_countdown_gross { font-size: 1.15rem; padding: 10px; }

.ar_knopf {
  background: #2e7d32; color: #fff; font-weight: 800;
  text-align: center; border-radius: 999px; padding: 11px 16px;
  font-size: 1.02rem; margin: 8px 0; letter-spacing: .02em;
}
.ar_knopf_puls { animation: ar_knopf_pulsieren 1.1s ease-in-out infinite; }
@keyframes ar_knopf_pulsieren {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, .5); }
  50% { transform: scale(1.035); box-shadow: 0 0 0 9px rgba(46, 125, 50, 0); }
}

.ar_klein { color: #6b7075; font-size: .72rem; margin: 6px 0; line-height: 1.45; }
.ar_klein_eng { margin: 4px 0; }
.ar_klein_warn { color: #8a5a00; background: #fff3cd; border-radius: 6px; padding: 5px 8px; }
.ar_rueckgabe { color: #6b7075; font-size: .75rem; border-top: 1px dashed #d5d9dd; padding-top: 6px; }
.ar_fuss {
  color: #9aa0a6; font-size: .7rem;
  border-top: 1px solid #e4e7ea; margin-top: 10px; padding: 8px 0 2px;
}

/* Cookie-Banner */
.ar_cookie {
  background: #fff; border-radius: 14px; padding: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.ar_cookie h4 { margin-top: 0; }
.ar_cookie_text { font-size: .85rem; color: #37474f; }
.ar_cookie_knoepfe { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.ar_zeile {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; padding: 6px 4px; line-height: 1.35;
}
.ar_zeile_preis { justify-content: space-between; }
.ar_zeile_grau { opacity: .9; }
.ar_box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  border: 2px solid #9aa0a6; color: transparent; font-size: .8rem; font-weight: 900;
}
.ar_box.ar_gehaekt { background: #2e7d32; border-color: #2e7d32; color: #fff; }

.ar_nein_winzig {
  color: #aab2ba; font-size: .68rem; padding: 2px 6px;
}
.ar_nein_link {
  color: #b9c0c7; font-size: .75rem; text-decoration: underline;
}
.ar_nein_schade {
  color: #8a5a6a; font-size: .78rem; text-align: center; padding: 4px;
}
.ar_nein_wartend {
  color: #6b7075; font-size: .75rem; text-align: center;
  border: 1px dashed #b9c0c7; border-radius: 8px; padding: 6px 10px; margin: 6px 0;
}

/* Gewinn-Popup */
.ar_win {
  background: linear-gradient(160deg, #ffd54f, #ff9e3d);
  border-radius: 16px; padding: 18px 14px; text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.ar_win_kopf { font-weight: 900; font-size: 1.3rem; color: #7a2e00; }
.ar_win_preis {
  font-weight: 800; font-size: 1.05rem; color: #4a2000;
  background: #fff; border-radius: 10px; padding: 8px; margin: 10px 0;
}
.ar_win .ar_klein { color: #5b3200; }

/* Lootbox-Shop */
.ar_kisten { display: flex; flex-direction: column; gap: 8px; }
.ar_kiste {
  border: 2px solid #dfe3e8; border-radius: 12px; padding: 10px;
  position: relative; background: #fbfcfd;
}
.ar_kiste_top { border-color: #f4b400; background: #fffaf0; }
.ar_kiste_schild {
  position: absolute; top: -11px; left: 12px;
  background: #f4b400; color: #4a2e00; font-size: .68rem; font-weight: 800;
  border-radius: 999px; padding: 3px 9px;
}
.ar_kiste_name { font-weight: 700; margin-bottom: 4px; }
.ar_kiste_preis { font-weight: 800; font-size: 1.05rem; color: #243447; }

/* Abo-Seite */
.ar_gratis {
  font-size: 1.5rem; font-weight: 900; color: #2e7d32; text-align: center;
  margin: 8px 0; letter-spacing: .02em;
}

/* Kasse */
.ar_karte {
  border: 1.5px solid #dfe3e8; border-radius: 12px; padding: 6px 10px;
  margin-bottom: 8px; background: #fbfcfd;
}
.ar_summe {
  display: flex; justify-content: space-between; font-weight: 800;
  font-size: 1.05rem; margin: 10px 2px;
}

/* Einstellungen */
.ar_schalter {
  display: inline-block; width: 46px; height: 26px; border-radius: 999px;
  background: #b9c0c7; position: relative; flex-shrink: 0;
  transition: background .15s;
}
.ar_schalter_knopf {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.ar_schalter.ar_an { background: #43a047; }
.ar_schalter.ar_an .ar_schalter_knopf { left: 23px; }
.ar_ausgegraut { color: #aab2ba; font-size: .75rem; font-style: italic; }

/* ---------- 12. Kleinere Bildschirme, reduzierte Bewegung, Dark Mode ----- */
@media (prefers-reduced-motion: reduce) {
  .ar_knopf_puls, .ar_trick_puls, .ar_fehlerklatsch { animation: none; }
  .ar_konfetti { display: none; }
}

/* Schutz vor hidden-Konflikten */
.ar_stage[hidden],
.ar_done[hidden],
.ar_start[hidden] {
  display: none !important;
}

/* Handy-Landscape: Buehne kompakt genug */
@media (max-height: 780px) {
  .ar_inhalt { max-height: min(52vh, 470px); }
  .ar_handy { width: min(400px, 92vw); }
}

@media (max-width: 800px) {
  .ar_header,
  header.jupi_header.ar_header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .5rem;
    padding: .5rem .8rem .7rem;
  }
  .ar_header .jupi_nav_back,
  .ar_brand,
  .ar_header .jupi_werkzeuge {
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .ar_panel { padding: .7rem .8rem; }
  .ar_controls { width: 100%; justify-content: space-between; }
}

/* ---------- Dark Mode ----------
   Nachtschicht im Detektivbuero: Wand und Konsole dunkeln ab (stecken in
   den CSS-Variablen oben). Die nachgebauten Websites (.ar_seite und alles
   darin) sowie die Papier-Ausstellstuecke (Beweis-Zettel, Bericht-Blatt,
   Fallakte) bleiben ABSICHTLICH hell - echte Shops und echte Papiere sind
   auch bei Nacht hell. Nur die Folgen des Themes werden nachgestellt. */
html[data-theme="dark"] .ar_panel {
  border-top-color: rgba(201, 163, 92, .75);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(243, 232, 208, .08);
}
html[data-theme="dark"] .ar_panel .jupi_select { background: rgba(10, 6, 2, .7); }
html[data-theme="dark"] .ar_panel .jupi_btn.jupi_btn_alt { background: rgba(10, 6, 2, .7); }

html[data-theme="dark"] .ar_done {
  background: #ece0c4;
  border-color: #c4ad7c;
}
html[data-theme="dark"] .ar_gefunden_item {
  background: #ece0c4;
  border-left-color: #58a86c;
}
html[data-theme="dark"] .ar_start_karte {
  background: #ece0c4;
  border-color: #c4ad7c;
}
html[data-theme="dark"] .ar_start_info {
  background: #f2e8ce;
  border-color: #c4ad7c;
}

html[data-theme="dark"] .ar_chip {
  background: #ece0c4;
  border-color: #c4ad7c;
}
html[data-theme="dark"] .ar_chip_ok {
  background: #d3ecc8; border-color: #58a86c;
}
html[data-theme="dark"] .ar_chip_fehler {
  background: #f4d2c9; border-color: #d6604c;
}

html[data-theme="dark"] .ar_btn_antwort {
  background: #ece0c4; border-color: #c4ad7c;
}
html[data-theme="dark"] .ar_btn_antwort:hover:not(:disabled) { background: #f2e8ce; }

html[data-theme="dark"] .ar_msg_ok { color: #b4e2ab; }
html[data-theme="dark"] .ar_msg_err { color: #ffb6a3; }

html[data-theme="dark"] .ar_header .jupi_nav_back {
  background: rgba(10, 6, 2, .6);
}