/* ==========================================================================
   Diagramm-Detektiv – styles.css (GUI 3.13 Typ 2: Kleines Lernspiel)
   Standard nach AGENTS.md 3.13 & Vorbild Rechen-Raumschiff / Wissens-Snake
   ========================================================================== */

/* ---------- 3-Zonen-Header (AGENTS.md 3.13.2) ---------- */
.dg_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .55rem 1rem;
}

.dg_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .6rem;
  min-width: 0;
}

.dg_brand img {
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: contain;
  aspect-ratio: 1;
}

.dg_brand h1 {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.dg_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .4rem .8rem;
  line-height: 1.2;
  font-size: .88rem;
  font-weight: 700;
  min-height: 40px;
  box-sizing: border-box;
}

.dg_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.dg_header #jupi_sprachen_wahl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* 🌐-Sprachwahl in der Messing-Konsole (Regel 3.13.5): Bedienziel mindestens
   40 px hoch, neben dem Dark-Mode-Schalter, in schmalen Fenstern schmaler. */
.dg_header .jupi_sprachen_select {
  min-height: 40px;
  max-width: 12rem;
  padding: .25rem .6rem;
}
@media (max-width: 680px) {
  .dg_header .jupi_sprachen_select {
    max-width: 9rem;
    min-height: 40px;
    font-size: .78rem;
  }
}

.dg_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  box-sizing: border-box;
}

.dg_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

html[data-theme="dark"] .dg_header .jts_thumb {
  left: calc(100% - 36px);
}

.dg_header .jts_sun { left: 9px; }
.dg_header .jts_moon { right: 9px; }

/* Header Responsiv */
@media (max-width: 680px) {
  .dg_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    padding: .5rem .6rem;
  }
  .dg_brand {
    grid-row: 1;
    grid-column: 1 / -1;
  }
  .dg_brand img { width: 34px; height: 34px; }
  .dg_brand h1 { font-size: 1.15rem; }
  .dg_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
    font-size: .84rem;
  }
  .dg_header .jupi_werkzeuge {
    grid-row: 2;
    grid-column: 2;
  }
  .dg_header .jupi_sprachen_select {
    max-width: 7rem;
  }
}

@media (max-width: 440px) {
  .dg_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .dg_header .jupi_werkzeuge {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* Touch-Ziele >= 40px für Steuerung (Regel 3.13.3 & 3.13.5) */
.dg_controls .jupi_select,
.dg_controls .jupi_btn,
.dg_controls select,
.dg_controls button {
  min-height: 40px;
  box-sizing: border-box;
}

#dg_ton_knopf,
#dg_hilfe_btn {
  min-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .75rem;
  box-sizing: border-box;
}

/* ---------- Punkte- und Steuerleiste (.dg_panel) ---------- */
.dg_panel {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.3rem;
  align-items: center;
  background: var(--ct-color);
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  padding: .85rem 1.15rem;
  margin: 0 0 1.1rem;
}

.dg_stat {
  display: flex;
  flex-direction: column;
  min-width: 4.3rem;
}

.dg_stat label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--grey600-color);
}

.dg_stat span {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green600-color);
}

.dg_controls {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.dg_controls label {
  font-weight: 700;
  font-size: .9rem;
}

/* ---------- Bühne mit Diagramm (.dg_stage) ---------- */
.dg_stage {
  background: var(--ct-color);
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  padding: 1rem 1.1rem 1.2rem;
}

/* Die Frage ist das wichtigste Element – gross und kontraststark */
.dg_task_label {
  margin: 0 0 .7rem;
  font-weight: 800;
  color: var(--blk-color);
  font-size: 1.25rem;
  line-height: 1.4;
  text-align: center;
}

.dg_diagramm_box {
  text-align: center;
}

.dg_diagramm_box svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  background: #FFFFFF;
  border-radius: 1rem;
  padding: .4rem;
  display: inline-block;
}

/* ---------- Tabelle im Wähl- und Fehler-Modus ---------- */
.dg_tabelle_wrap {
  display: flex;
  justify-content: center;
  margin: .4rem 0 .2rem;
}

.dg_tabelle_wrap[hidden] {
  display: none;
}

.dg_tabelle {
  border-collapse: collapse;
  background: var(--grey50-color);
  border-radius: .8rem;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

.dg_tabelle caption {
  font-weight: 800;
  padding: .5rem;
  color: var(--grey600-color);
}

.dg_tabelle th,
.dg_tabelle td {
  padding: .45rem 1.1rem;
  text-align: left;
  border-bottom: 2px solid var(--grey300-color);
}

.dg_tabelle thead th {
  background: var(--green100-color);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dg_tabelle tbody tr:last-child td {
  border-bottom: none;
}

.dg_tabelle td:last-child {
  font-weight: 800;
  text-align: right;
}

/* ---------- Antwort-Knöpfe und Mini-Diagramme ---------- */
.dg_antworten {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem;
}

.dg_btn {
  flex: 1 1 calc(50% - .35rem);
  min-height: 56px;
  cursor: pointer;
  border: none;
  border-radius: 1rem;
  color: #FFFFFF;
  background: var(--lightblue600-color);
  box-shadow: 0 4px 0 #0277BD;
  font-size: 1.2rem;
  font-weight: 800;
  transition: transform .1s, filter .1s;
  padding: .5rem;
}

.dg_btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.dg_btn:active:not(:disabled) {
  transform: translateY(1px);
}

.dg_btn:focus-visible,
.dg_mini:focus-visible {
  outline: 3px solid var(--link-color);
  outline-offset: 2px;
}

.dg_btn:disabled,
.dg_mini:disabled {
  cursor: default;
  opacity: .85;
}

.dg_btn_right {
  outline: 4px solid var(--link-color);
  outline-offset: 3px;
}

.dg_btn_wrong {
  animation: dg_shake .35s;
}

/* Falsch gewählter Knopf bleibt rot sichtbar */
.dg_btn.dg_btn_wrong {
  background: var(--red600-color);
  box-shadow: 0 4px 0 #B71C1C;
}

.dg_mini.dg_btn_wrong {
  border-color: var(--red600-color);
}

.dg_btn_wrong:disabled,
.dg_mini.dg_btn_wrong:disabled {
  opacity: .8;
}

.dg_btn_right:disabled,
.dg_mini.dg_btn_right:disabled {
  opacity: 1;
}

.dg_mini {
  flex: 1 1 calc(50% - .35rem);
  cursor: pointer;
  border: 3px solid var(--grey300-color);
  border-radius: 1rem;
  background: #FFFFFF;
  padding: .4rem;
  transition: transform .1s, border-color .1s;
}

.dg_mini:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--lightblue600-color);
}

.dg_mini svg {
  width: 100%;
  height: auto;
  display: block;
}

.dg_mini.dg_btn_right {
  border-color: var(--link-color);
}

.dg_btns_row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
  justify-content: center;
}

.dg_msg {
  min-height: 1.7rem;
  margin-top: .7rem;
  font-weight: 700;
  text-align: center;
}

.dg_msg_ok {
  color: var(--link-color);
}

.dg_msg_err {
  color: var(--red600-color);
}

/* ---------- Rundenende ---------- */
.dg_done {
  position: relative;
  overflow: hidden;
  background: var(--ct-color);
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  padding: 1.6rem 1rem;
}

.dg_done h3 {
  margin: .2rem 0 .5rem;
  font-size: 1.5rem;
  color: var(--link-color);
}

.dg_done_icon {
  font-size: 3rem;
  margin: .2rem 0;
}

.dg_done p {
  margin: .3rem 0 .8rem;
  font-size: 1.05rem;
}

.dg_sterne {
  font-size: 2rem;
  margin-bottom: .8rem;
}

.dg_konfetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dg_konfetti i {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: dg_konfetti_fall 2.8s linear forwards;
}

@keyframes dg_konfetti_fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(380px) rotate(560deg); opacity: 0; }
}

@keyframes dg_shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .dg_konfetti { display: none; }
}

/* ---------- Nativer Hilfedialog / Modal (AGENTS.md 3.13.3 & 3.13.4) ---------- */
.dg_modal {
  border: 2px solid var(--green600-color);
  border-radius: 1.2rem;
  padding: 0;
  max-width: 580px;
  width: calc(100% - 2rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  background: var(--ct-color, #ffffff);
  color: var(--txt-color, #1a1a1a);
}

.dg_modal::backdrop {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
}

.dg_modal_box {
  padding: 1.25rem 1.4rem;
}

.dg_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--green200-color, #c8e6c9);
}

.dg_modal_title_wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.dg_modal_title_wrap img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.dg_modal_title_wrap h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--green700-color, #2e7d32);
}

.dg_modal_close {
  background: var(--grey200-color, #eee);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.dg_modal_close:hover {
  background: var(--grey300-color, #e0e0e0);
}

.dg_lernziel {
  background: var(--green50-color, #e8f5e9);
  border-left: 4px solid var(--green600-color, #43a047);
  padding: .75rem 1rem;
  border-radius: .5rem;
  margin-bottom: 1rem;
  font-size: .95rem;
  line-height: 1.45;
}

.dg_lernziel p {
  margin: 0;
}

.dg_modal_body h3 {
  margin: .8rem 0 .4rem;
  font-size: 1.05rem;
  color: var(--green700-color, #2e7d32);
}

.dg_modal_body ul {
  margin: .2rem 0 .8rem;
  padding-left: 1.2rem;
}

.dg_modal_body li {
  margin: .35rem 0;
  line-height: 1.4;
  font-size: .95rem;
}

.dg_modal_footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.2rem;
  padding-top: .8rem;
  border-top: 1px solid var(--grey200-color, #eee);
}

/* ---------- Handy-Anpassungen ---------- */
@media (max-width: 600px) {
  .dg_panel { padding: .7rem .8rem; }
  .dg_controls { margin-left: 0; }
  .dg_btn, .dg_mini { flex: 1 1 100%; }
  .dg_task_label { font-size: 1.15rem; }
}

/* ---------- Dark Mode ---------- */
html[data-theme="dark"] .dg_mini { background: #FFFFFF; }
html[data-theme="dark"] .dg_tabelle { background: var(--alt-div-color); }
html[data-theme="dark"] .dg_msg_err { color: #FF8A80; }

html[data-theme="dark"] .dg_modal {
  background: #1e1e1e;
  color: #e0e0e0;
  border-color: #43a047;
}

html[data-theme="dark"] .dg_modal_header {
  border-bottom-color: #333;
}

html[data-theme="dark"] .dg_modal_title_wrap h2 {
  color: #a5d6a7;
}

html[data-theme="dark"] .dg_modal_close {
  background: #333;
  color: #fff;
}

html[data-theme="dark"] .dg_modal_close:hover {
  background: #444;
}

html[data-theme="dark"] .dg_lernziel {
  background: #142a17;
  color: #c8e6c9;
  border-left-color: #43a047;
}

html[data-theme="dark"] .dg_modal_body h3 {
  color: #81c784;
}

html[data-theme="dark"] .dg_modal_footer {
  border-top-color: #333;
}

/* ==========================================================================
   WELT „DETEKTIV-AKTE" (Umbau 26.10.2026)
   Vorbilder: Schatzkarte, Phishing, Fake-News, Zeitzeugen.

   Die Idee: Das Spiel spielt im Ermittlungsbuero. Die Seite ist eine
   Beweiswand - dunkler gruener Filz zwischen schmalen Mahagoni-Latten
   (kachelbare Kulisse assets/kulisse.svg, Generator
   .zcode/diagrammdetektiv-kulisse.cjs, feste Saat 20261026). Oben haengt die
   Mahagoni-Leiste mit einem Messing-Namensschild, die Steuerleiste ist die
   Ermittlungs-Konsole mit Karteikarten, und die Aufgabe liegt als Fallakte
   (Papierbogen mit Bueroklammer, Stempel-Ecke und Aktenzeichen-Kopf) auf dem
   Tisch. Die Antworten sind Stempel-Felder: richtig = gruener GEPRUEFT-Stempel,
   falsch = roter.

   Alle Regeln haengen an body.jupi.dd_body. Die alten dg_-Regeln oben bleiben
   stehen (Klassen-Hooks unveraendert) - hier wird nur ueber Spezifitaet
   uebersteuert, damit ein spaeterer Rueckbau leicht bleibt.

   Aufbau:
     0. Farben & Grundlagen (Beweiswand)
     1. JUPI-Leiste: Mahagoni mit Messing-Namensschild
     2. Ermittlungs-Konsole (Steuerleiste)
     3. Buehne: die Fallakte
     4. Antworten als Stempel-Felder, Weiter, Meldung
     5. Rundenende: Akte geschlossen
     6. Hilfe-Fenster: Formblatt
     7. Handy / schmale Ansicht
     8. Dark Mode: Nachtbuero
     9. Bedienziele mindestens 40 px (muss am ENDE stehen)
   ========================================================================== */

/* ---------- 0. Farben & Grundlagen ---------- */
body.jupi.dd_body {
  /* Welt-Palette (Vorgabe) */
  --dd-mahagoni: #3a2b21;
  --dd-mahagoni-hell: #4d392b;
  --dd-mahagoni-tief: #241a13;
  --dd-kork: #c8a06a;
  --dd-papier: #f7f1e3;
  --dd-papier-2: #efe4cd;
  --dd-papier-kante: #d6c6a5;
  --dd-tinte: #22201d;
  --dd-tinte-2: #6b5f4c;
  --dd-rot: #b23a2f;
  --dd-messing: #b08d57;
  --dd-messing-hell: #e0c48f;
  --dd-messing-tief: #6d5229;
  /* Stempel-Gruen (dunkler als das Plattform-Gruen, damit er auf Papier
     wirklich wie Stempeltinte wirkt) */
  --dd-gruen: #2f6b45;
  --dd-gruen-hell: #eef7ee;
  /* Schleier ueber der Beweiswand (Tageslicht / Nachtbuero) */
  --dd-schleier: rgba(9, 14, 11, .12);

  background-color: #1d2a24;
  background-image:
    radial-gradient(120% 70% at 50% -12%, rgba(255, 240, 210, .10) 0%, rgba(255, 240, 210, 0) 58%),
    linear-gradient(var(--dd-schleier), var(--dd-schleier)),
    url("assets/kulisse.svg");
  background-size: 100% 100%, 100% 100%, 480px 480px;
  background-repeat: no-repeat, repeat, repeat;
  color: var(--dd-tinte);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Die Plattform setzt .jupi_main/.jupi_footer auf weiss - hier sind beide
   durchsichtig, damit die Beweiswand durchscheint. Der Fuss traegt in
   jupi.css ausserdem eine 1px-Oberkante und runde Ecken: auf dem Filz wuerde
   das als heller Bogen ueber die ganze Breite stehen. */
body.jupi.dd_body .jupi_container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: transparent;
}
body.jupi.dd_body .jupi_container > .jupi_main,
body.jupi.dd_body .jupi_container > .jupi_footer { background: transparent; }
body.jupi.dd_body .jupi_main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
  padding: .9rem 1rem 1.4rem;
  box-sizing: border-box;
}
body.jupi.dd_body .jupi_container > .jupi_footer {
  border-top: 0;
  border-radius: 0;
  margin: 0 auto;
  max-width: 66rem;
  padding: .7rem 1rem 1.2rem;
  font-size: .85rem;
  text-align: center;
  color: #e7dcc4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
body.jupi.dd_body .jupi_footer a { color: #ecd3a2; font-weight: 700; }
body.jupi.dd_body .jupi_footer a:hover { color: #fff2d6; }

/* [hidden] muss gewinnen: .jupi_btn bekommt unten display:inline-flex, sonst
   waere der versteckte "Weiter"-Knopf sichtbar (bekannte Falle). */
body.jupi.dd_body [hidden] { display: none !important; }

/* ---------- 1. JUPI-Leiste: Mahagoni mit Messing-Namensschild ---------- */
body.jupi.dd_body .dg_header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  padding: .6rem 1rem .95rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px,
      rgba(0, 0, 0, .07) 2px 7px),
    linear-gradient(180deg, var(--dd-mahagoni-hell) 0%, var(--dd-mahagoni) 55%,
      var(--dd-mahagoni-tief) 100%);
  box-shadow: 0 10px 24px rgba(8, 6, 4, .5),
              inset 0 1px 0 rgba(255, 236, 200, .18);
  backdrop-filter: none;
  color: #f4ead6;
}
/* Messingkante unter der Leiste */
body.jupi.dd_body .dg_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #7d5f34, var(--dd-messing-hell) 45%,
    var(--dd-messing) 70%, #7d5f34);
  opacity: .85;
}

/* Zurueck-Knopf: Papier-Etikett, leicht schief aufgeklebt */
body.jupi.dd_body .dg_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  padding: .42rem .85rem;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  color: var(--dd-tinte);
  background: linear-gradient(180deg, #fdf8ec 0%, #f2e8d3 100%);
  border: 1px solid #cbb894;
  border-radius: .25rem;
  transform: rotate(-1.3deg);
  box-shadow: 0 3px 8px rgba(8, 6, 4, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .12s, box-shadow .12s, background .15s;
}
body.jupi.dd_body .dg_header .jupi_nav_back:hover {
  background: #fffdf6;
  transform: rotate(-.4deg) translateY(-1px);
  box-shadow: 0 5px 12px rgba(8, 6, 4, .55);
}

/* Marke: Messing-Namensschild mit zwei Schrauben */
body.jupi.dd_body .dg_brand {
  position: relative;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  padding: .35rem 1.15rem .35rem .85rem;
  border-radius: 5px;
  background: linear-gradient(180deg, #e6cc95 0%, var(--dd-kork) 42%,
    #9c7a45 52%, var(--dd-messing) 100%);
  border: 1px solid #7a5c31;
  box-shadow: 0 3px 0 var(--dd-messing-tief), 0 7px 16px rgba(6, 4, 2, .45),
              inset 0 1px 0 rgba(255, 248, 220, .75),
              inset 0 -2px 4px rgba(90, 64, 28, .45);
}
/* die zwei Schrauben des Schildes */
body.jupi.dd_body .dg_brand::before,
body.jupi.dd_body .dg_brand::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8ecc9 0%, #b5915a 55%, #6d5229 100%);
  box-shadow: inset 0 0 0 1px rgba(60, 42, 18, .55), 0 1px 1px rgba(0, 0, 0, .35);
}
body.jupi.dd_body .dg_brand::before { top: 4px; left: 4px; }
body.jupi.dd_body .dg_brand::after { bottom: 4px; right: 4px; }

body.jupi.dd_body .dg_brand img {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
  aspect-ratio: 1;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(60, 42, 18, .55);
}
body.jupi.dd_body .dg_brand h1 {
  margin: 0;
  min-width: 0;
  color: #33241a;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.22rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 248, 220, .7);
}

/* Sprachwahl und Theme-Schalter im Messingrahmen */
body.jupi.dd_body .dg_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}
body.jupi.dd_body .dg_header #jupi_sprachen_wahl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .4rem;
  border-radius: 6px;
  background: linear-gradient(180deg, #d3b276 0%, var(--dd-messing) 55%, #94743c 100%);
  border: 1px solid #7a5c31;
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, .6), 0 2px 0 var(--dd-messing-tief);
}
body.jupi.dd_body .dg_header .jupi_sprachen_icon {
  font-size: .95rem;
  line-height: 1;
  filter: saturate(.75) brightness(.95);
}
body.jupi.dd_body .dg_header .jupi_sprachen_select {
  width: 10.5rem;
  max-width: 100%;
  min-height: 40px;
  padding: .2rem .45rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--dd-tinte);
  background: var(--dd-papier);
  border: 1px solid #a98b57;
  border-radius: 4px;
  cursor: pointer;
}
body.jupi.dd_body .dg_header .jupi_sprachen_select option { color: #212121; background: #fff; }
body.jupi.dd_body .dg_header .jupi_sprachen_select:focus-visible {
  outline: 2px solid #f5e2b4;
  outline-offset: 1px;
}

/* Der Dark-Schalter sitzt im selben Messingrahmen; der Knopf ist aus Papier. */
body.jupi.dd_body .dg_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #d3b276 0%, var(--dd-messing) 55%, #94743c 100%);
  border: 1px solid #7a5c31;
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, .6), 0 2px 0 var(--dd-messing-tief);
}
body.jupi.dd_body .dg_header .jupi_theme_switch:hover { filter: brightness(1.06); }
body.jupi.dd_body .dg_header .jts_thumb {
  top: 4px;
  bottom: auto;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fffaf0 0%, #efe0c0 70%, #d9c69c 100%);
  box-shadow: 0 1px 3px rgba(40, 26, 10, .55), inset 0 0 0 1px rgba(150, 120, 70, .4);
}
html[data-theme="dark"] body.jupi.dd_body .dg_header .jts_thumb {
  left: calc(100% - 35px);
  background: radial-gradient(circle at 38% 32%, #fff3d6 0%, #e8d3a6 70%, #c8ab72 100%);
}
body.jupi.dd_body .dg_header .jts_sun { left: 10px; }
body.jupi.dd_body .dg_header .jts_moon { right: 10px; }

/* ---------- 2. Ermittlungs-Konsole (Steuerleiste) ---------- */
body.jupi.dd_body .dg_panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border-radius: .4rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px,
      rgba(0, 0, 0, .07) 2px 8px),
    linear-gradient(180deg, var(--dd-mahagoni-hell) 0%, #33241a 60%, #241a13 100%);
  border: 1px solid #201711;
  box-shadow: inset 0 1px 0 rgba(224, 196, 143, .32),
              inset 0 -2px 6px rgba(0, 0, 0, .35),
              0 10px 22px rgba(8, 6, 4, .45);
}

/* Jede Zahl steht auf einer Karteikarte - der Fortschritt als Fall-Nummer. */
body.jupi.dd_body .dg_stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .02rem;
  min-width: 4.6rem;
  padding: .3rem .65rem .34rem .95rem;
  border-radius: .2rem;
  background: linear-gradient(180deg, #fffdf6 0%, var(--dd-papier) 100%);
  border: 1px solid var(--dd-papier-kante);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .32), 0 4px 9px rgba(8, 6, 4, .22);
  color: var(--dd-tinte);
}
/* Lochung der Karteikarte links */
body.jupi.dd_body .dg_stat::before {
  content: "";
  position: absolute;
  left: .34rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #cbbfa6;
  box-shadow: inset 0 1px 2px rgba(40, 26, 10, .6), 0 1px 0 rgba(255, 255, 255, .7);
}
body.jupi.dd_body .dg_stat label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dd-tinte-2);
}
body.jupi.dd_body .dg_stat span {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--dd-tinte);
  font-variant-numeric: tabular-nums;
}
/* Die Fall-Nummer (erste Karte) traegt Stempelrot wie eine Aktennummer. */
body.jupi.dd_body .dg_stat:first-child {
  border-top: 3px solid var(--dd-rot);
  padding-top: .34rem;
}
body.jupi.dd_body .dg_stat:first-child span { color: var(--dd-rot); }

body.jupi.dd_body .dg_controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}
body.jupi.dd_body .dg_controls label {
  font-weight: 700;
  font-size: .82rem;
  color: #efe4cd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
body.jupi.dd_body .dg_panel .jupi_select {
  min-height: 40px;
  padding: .35rem .55rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--dd-tinte);
  background: var(--dd-papier);
  border: 1px solid #b9a173;
  border-radius: .25rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .32);
}
body.jupi.dd_body .dg_panel .jupi_select:focus-visible {
  outline: 3px solid #f0c976;
  outline-offset: 2px;
}
body.jupi.dd_body .dg_panel .jupi_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 40px;
  padding: .4rem .75rem;
  font-size: .9rem;
  font-weight: 800;
  color: var(--dd-tinte);
  background: linear-gradient(180deg, #fffdf6 0%, var(--dd-papier) 100%);
  border: 1px solid var(--dd-papier-kante);
  border-radius: .25rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .34);
  transition: transform .12s, background .15s;
}
body.jupi.dd_body .dg_panel .jupi_btn:hover {
  background: #fffdf6;
  transform: translateY(-1px);
}
body.jupi.dd_body .dg_panel .jupi_btn:active { transform: translateY(1px); }
body.jupi.dd_body .dg_panel .jupi_btn:focus-visible {
  outline: 3px solid #f0c976;
  outline-offset: 2px;
}

/* ---------- 3. Buehne: die Fallakte ----------
   Ein Papierbogen mit Aktenzeichen-Kopf, Bueroklammer und Stempel-Ecke. Das
   Diagramm selbst bleibt unveraendert (weisser Grund, eigene Farben) und wird
   nur gerahmt - es steht wie ein Beweisstueck auf dem Bogen. */
body.jupi.dd_body .dg_stage {
  position: relative;
  margin: 0 0 1rem;
  padding: 3.1rem 1.15rem 1.2rem;
  border-radius: .3rem;
  background-color: var(--dd-papier);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 22%),
    repeating-linear-gradient(180deg, rgba(34, 32, 29, .035) 0 1px, transparent 1px 27px),
    linear-gradient(180deg, #fbf6ea 0%, var(--dd-papier) 55%, #f2ead8 100%);
  border: 1px solid #cbb894;
  box-shadow: 0 14px 30px rgba(8, 6, 4, .5),
              0 2px 0 rgba(255, 255, 255, .55) inset,
              0 -18px 26px -22px rgba(34, 32, 29, .35) inset;
  color: var(--dd-tinte);
}
/* Der Inhalt liegt ueber der Deko. */
body.jupi.dd_body .dg_stage > :not(.dd_akte) { position: relative; }

/* Deko-Ebene der Akte (rein optisch) */
body.jupi.dd_body .dd_akte {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: .3rem;
  overflow: visible;
}

/* Aktenzeichen-Kopf: zwei Schriftzeilen wie auf einem Aktendeckel */
body.jupi.dd_body .dd_kopf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 6.6rem 0 1.15rem;
  border-bottom: 2px solid rgba(34, 32, 29, .32);
  border-radius: .3rem .3rem 0 0;
  background: linear-gradient(180deg, rgba(200, 160, 106, .26) 0%, rgba(200, 160, 106, .05) 100%);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dd-tinte-2);
  white-space: nowrap;
}
body.jupi.dd_body .dd_kopf::before { content: "AKTENZEICHEN · DD-2026"; }
body.jupi.dd_body .dd_kopf::after {
  content: "VERTRAULICH";
  color: var(--dd-rot);
  opacity: .8;
  letter-spacing: .18em;
}

/* Stempel-Ecke: schraeger Eingangsstempel, halb auf dem Kopfstreifen */
body.jupi.dd_body .dd_ecke {
  position: absolute;
  top: .3rem;
  right: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 1.95rem;
  transform: rotate(-7deg);
  border: 2px solid rgba(178, 58, 47, .48);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(178, 58, 47, .22);
  color: rgba(178, 58, 47, .62);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.jupi.dd_body .dd_ecke::before { content: "EINGANG"; }

/* Bueroklammer: zwei Drahtschlingen ueber der Blattkante, links oben */
body.jupi.dd_body .dd_klammer {
  position: absolute;
  top: -9px;
  left: 2.4rem;
  width: 15px;
  height: 40px;
  border: 2.5px solid #a9a394;
  border-radius: 8px;
  transform: rotate(7deg);
  box-shadow: 0 2px 4px rgba(20, 14, 8, .35);
  background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%);
}
body.jupi.dd_body .dd_klammer::before {
  content: "";
  position: absolute;
  left: 2.5px;
  right: 2.5px;
  top: 5px;
  bottom: -9px;
  border: 2.5px solid #b8b2a3;
  border-top-color: transparent;
  border-radius: 7px;
}

/* Die Frage steht auf dem Bogen, nicht in einer Box. */
body.jupi.dd_body .dg_task_label {
  margin: 0 .2rem .75rem;
  font-size: clamp(1.06rem, .96rem + .35vw, 1.28rem);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  color: var(--dd-tinte);
}

/* Das Diagramm bleibt, wie es ist - nur gerahmt wie ein aufgelegtes Blatt. */
body.jupi.dd_body .dg_diagramm_box { position: relative; text-align: center; }
body.jupi.dd_body .dg_diagramm_box svg {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  height: auto;
  padding: .45rem;
  background: #fff;
  border: 1px solid #d9ccb0;
  border-radius: .15rem;
  box-shadow: 0 4px 10px rgba(34, 32, 29, .16);
}

/* Tabelle: Indizien-Liste auf heller Karte, Schreibmaschinenschrift */
body.jupi.dd_body .dg_tabelle_wrap { display: flex; justify-content: center; margin: .5rem 0 .2rem; }
body.jupi.dd_body .dg_tabelle {
  background: #fffdf6;
  border: 1px solid #d9ccb0;
  border-radius: .15rem;
  box-shadow: 0 3px 9px rgba(34, 32, 29, .14);
  color: var(--dd-tinte);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .94rem;
}
body.jupi.dd_body .dg_tabelle caption {
  padding: .45rem;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dd-tinte-2);
}
body.jupi.dd_body .dg_tabelle th,
body.jupi.dd_body .dg_tabelle td {
  padding: .42rem 1rem;
  border-bottom: 1px solid #e2d6bc;
}
body.jupi.dd_body .dg_tabelle thead th {
  background: rgba(178, 58, 47, .09);
  color: #7c2c23;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .09em;
}
body.jupi.dd_body .dg_tabelle tbody tr:last-child td { border-bottom: none; }
body.jupi.dd_body .dg_tabelle td:last-child { font-weight: 800; text-align: right; }

/* ---------- 4. Antworten als Stempel-Felder ---------- */
body.jupi.dd_body .dg_antworten { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .95rem; }

/* Textantwort: ein leeres Feld auf dem Formblatt, innen gestrichelt. */
body.jupi.dd_body .dg_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(50% - .35rem);
  min-height: 62px;
  padding: .55rem .9rem;
  font: inherit;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--dd-tinte);
  background: linear-gradient(180deg, #fffdf6 0%, #f9f3e4 100%);
  border: 1px solid #cdbb96;
  border-radius: .2rem;
  box-shadow: 0 2px 0 rgba(34, 32, 29, .14), 0 5px 11px rgba(34, 32, 29, .12);
  cursor: pointer;
  transition: transform .1s, box-shadow .12s, background .15s, border-color .12s;
}
/* das gestrichelte Innenfeld eines Stempelfeldes */
body.jupi.dd_body .dg_btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(107, 95, 76, .34);
  border-radius: 1px;
  pointer-events: none;
}
body.jupi.dd_body .dg_btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #fffdf6;
  border-color: var(--dd-messing);
  box-shadow: 0 4px 0 rgba(34, 32, 29, .12), 0 9px 16px rgba(34, 32, 29, .16);
}
body.jupi.dd_body .dg_btn:active:not(:disabled) { transform: translateY(1px); }
body.jupi.dd_body .dg_btn:focus-visible,
body.jupi.dd_body .dg_mini:focus-visible {
  outline: 3px solid var(--dd-messing);
  outline-offset: 2px;
}

/* Richtig: gruener GEPRUEFT-Stempel, schraeg in der Ecke */
body.jupi.dd_body .dg_btn.dg_btn_right,
body.jupi.dd_body .dg_mini.dg_btn_right {
  background: var(--dd-gruen-hell);
  border-color: #9dc8a8;
  box-shadow: 0 0 0 2px rgba(47, 107, 69, .22), 0 3px 9px rgba(34, 32, 29, .14);
  outline: none;
}
body.jupi.dd_body .dg_btn.dg_btn_right::after,
body.jupi.dd_body .dg_mini.dg_btn_right::after {
  content: "GEPRÜFT";
  position: absolute;
  right: .45rem;
  bottom: .35rem;
  padding: .16rem .38rem;
  transform: rotate(-8deg);
  border: 2px solid rgba(47, 107, 69, .74);
  border-radius: 2px;
  background: rgba(247, 241, 227, .88);
  color: rgba(38, 88, 56, .92);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

/* Falsch: roter VERWORFEN-Stempel */
body.jupi.dd_body .dg_btn.dg_btn_wrong,
body.jupi.dd_body .dg_mini.dg_btn_wrong {
  background: #fdeeeb;
  border-color: #dfa79d;
  box-shadow: 0 0 0 2px rgba(178, 58, 47, .18), 0 3px 9px rgba(34, 32, 29, .14);
}
body.jupi.dd_body .dg_btn.dg_btn_wrong::after,
body.jupi.dd_body .dg_mini.dg_btn_wrong::after {
  content: "VERWORFEN";
  position: absolute;
  right: .45rem;
  bottom: .35rem;
  padding: .16rem .38rem;
  transform: rotate(-8deg);
  border: 2px solid rgba(178, 58, 47, .6);
  border-radius: 2px;
  background: rgba(253, 238, 235, .82);
  color: rgba(140, 38, 28, .95);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}
/* Der weiterhin sichtbare Falsch-Knopf darf nicht wie ausgegraut wirken. */
body.jupi.dd_body .dg_btn.dg_btn_wrong:disabled,
body.jupi.dd_body .dg_mini.dg_btn_wrong:disabled { opacity: 1; }
body.jupi.dd_body .dg_btn:disabled,
body.jupi.dd_body .dg_mini:disabled { cursor: default; }

/* Mini-Diagramm als Beweisfoto: weisser Grund, Papiermontur */
body.jupi.dd_body .dg_mini {
  position: relative;
  flex: 1 1 calc(50% - .35rem);
  padding: .45rem;
  background: linear-gradient(180deg, #fffdf6 0%, #f9f3e4 100%);
  border: 1px solid #cdbb96;
  border-radius: .2rem;
  box-shadow: 0 2px 0 rgba(34, 32, 29, .14), 0 5px 11px rgba(34, 32, 29, .12);
  cursor: pointer;
  transition: transform .1s, box-shadow .12s, border-color .12s;
}
body.jupi.dd_body .dg_mini svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #e0d5bd;
  border-radius: .1rem;
}
body.jupi.dd_body .dg_mini:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--dd-messing);
  box-shadow: 0 4px 0 rgba(34, 32, 29, .12), 0 9px 16px rgba(34, 32, 29, .16);
}
body.jupi.dd_body .dg_mini.dg_btn_right svg,
body.jupi.dd_body .dg_mini.dg_btn_wrong svg { background: #fff; }
body.jupi.dd_body .dg_mini.dg_btn_right::after,
body.jupi.dd_body .dg_mini.dg_btn_wrong::after { right: .35rem; bottom: .3rem; }

/* "Weiter": Messingknopf der Konsole */
body.jupi.dd_body .dg_btns_row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; justify-content: center; }
body.jupi.dd_body #dg_next,
body.jupi.dd_body #dg_again,
body.jupi.dd_body .dg_modal_footer .jupi_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .55rem 1.35rem;
  font: inherit;
  font-size: .98rem;
  font-weight: 800;
  color: #33241a;
  background: linear-gradient(180deg, #e6cc95 0%, var(--dd-kork) 48%, var(--dd-messing) 100%);
  border: 1px solid #7a5c31;
  border-radius: .25rem;
  box-shadow: 0 3px 0 var(--dd-messing-tief), 0 6px 12px rgba(8, 6, 4, .35);
  cursor: pointer;
  transition: transform .12s, filter .15s;
}
body.jupi.dd_body #dg_next:hover,
body.jupi.dd_body #dg_again:hover,
body.jupi.dd_body .dg_modal_footer .jupi_btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
body.jupi.dd_body #dg_next:focus-visible,
body.jupi.dd_body #dg_again:focus-visible,
body.jupi.dd_body .dg_modal_footer .jupi_btn:focus-visible {
  outline: 3px solid #f0c976;
  outline-offset: 2px;
}

/* Meldung: Notizzettel mit Tinte */
body.jupi.dd_body .dg_msg {
  min-height: 2.1rem;
  margin-top: .8rem;
  padding: .45rem .8rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--dd-tinte);
  background: #fff8e2;
  border: 1px solid #e5d5a8;
  border-radius: .15rem;
  box-shadow: 0 2px 6px rgba(34, 32, 29, .12);
  overflow-wrap: anywhere;
}
body.jupi.dd_body .dg_msg:empty { background: transparent; border-color: transparent; box-shadow: none; }
body.jupi.dd_body .dg_msg_ok {
  color: #245c33;
  background: #eef8ee;
  border-color: #b7d8bc;
}
body.jupi.dd_body .dg_msg_err {
  color: #8d2b21;
  background: #fdeeeb;
  border-color: #e5b3aa;
}

/* ---------- 5. Rundenende: Akte geschlossen ---------- */
body.jupi.dd_body .dg_done {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.2rem 1.7rem;
  text-align: center;
  border-radius: .3rem;
  background-color: var(--dd-papier);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(180deg, rgba(34, 32, 29, .035) 0 1px, transparent 1px 27px),
    linear-gradient(180deg, #fbf6ea 0%, var(--dd-papier) 60%, #f2ead8 100%);
  border: 1px solid #cbb894;
  box-shadow: 0 14px 30px rgba(8, 6, 4, .5), 0 2px 0 rgba(255, 255, 255, .5) inset;
  color: var(--dd-tinte);
}
/* Stempel ueber der Ecke: die Akte ist geschlossen */
body.jupi.dd_body .dg_done::after {
  content: "AKTE GESCHLOSSEN";
  position: absolute;
  top: 1rem;
  right: .8rem;
  padding: .18rem .45rem;
  transform: rotate(9deg);
  border: 2px solid rgba(178, 58, 47, .32);
  border-radius: 2px;
  color: rgba(178, 58, 47, .45);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
body.jupi.dd_body .dg_done h3 {
  margin: .15rem 0 .5rem;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.45rem;
  color: var(--dd-tinte);
}
body.jupi.dd_body .dg_done_icon { font-size: 2.6rem; margin: .1rem 0; }
body.jupi.dd_body .dg_done p { margin: .3rem 0 .8rem; font-size: 1.02rem; line-height: 1.45; }
body.jupi.dd_body .dg_sterne { margin-bottom: .9rem; font-size: 1.9rem; letter-spacing: .1em; color: var(--dd-messing); }

/* ---------- 6. Hilfe-Fenster: Formblatt ---------- */
body.jupi.dd_body .dg_modal {
  width: min(94vw, 40rem);
  max-width: 40rem;
  max-height: 86vh;
  overflow: auto;
  padding: 0;
  border: 1px solid #c2ab84;
  border-radius: .3rem;
  background: var(--dd-papier);
  color: var(--dd-tinte);
  box-shadow: 0 20px 50px rgba(6, 4, 2, .6);
}
body.jupi.dd_body .dg_modal::backdrop { background: rgba(10, 8, 5, .62); }
body.jupi.dd_body .dg_modal_box { padding: 1.2rem 1.35rem 1.35rem; }
body.jupi.dd_body .dg_modal_header {
  margin-bottom: .9rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid rgba(34, 32, 29, .18);
}
body.jupi.dd_body .dg_modal_title_wrap h2 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.2rem;
  color: var(--dd-tinte);
}
body.jupi.dd_body .dg_modal_title_wrap img { border-radius: 4px; }
body.jupi.dd_body .dg_modal_close {
  width: 40px;
  height: 40px;
  border: 1px solid #cdbb96;
  border-radius: .2rem;
  background: var(--dd-papier-2);
  color: var(--dd-tinte);
  font-size: 1.05rem;
  cursor: pointer;
}
body.jupi.dd_body .dg_modal_close:hover { background: #fffdf6; }
body.jupi.dd_body .dg_modal_close:focus-visible { outline: 3px solid var(--dd-messing); outline-offset: 2px; }
body.jupi.dd_body .dg_lernziel {
  margin-bottom: .95rem;
  padding: .7rem .9rem;
  background: #fff6d9;
  border: 1px solid #e5d5a8;
  border-left: 4px solid var(--dd-messing);
  border-radius: .15rem;
  color: var(--dd-tinte);
  font-size: .94rem;
  line-height: 1.45;
}
body.jupi.dd_body .dg_modal_body h3 {
  margin: .8rem 0 .35rem;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.02rem;
  color: #6b4a1f;
}
body.jupi.dd_body .dg_modal_body li { margin: .32rem 0; font-size: .94rem; line-height: 1.42; }
body.jupi.dd_body .dg_modal_footer {
  margin-top: 1.1rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(34, 32, 29, .16);
}

/* ---------- 7. Handy / schmale Ansicht ---------- */
@media (max-width: 900px) {
  body.jupi.dd_body .dg_controls { margin-left: 0; }
}
/* Zwei Zeilen: Marke oben, darunter Zurueck links und Werkzeuge rechts.
   In EINER Zeile liefe der Titel unter die Sprachwahl. */
@media (max-width: 860px) {
  body.jupi.dd_body .dg_header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marke marke marke" "zurueck . werkzeug";
    row-gap: .45rem;
    padding: .5rem .6rem .9rem;
  }
  body.jupi.dd_body .dg_brand { grid-area: marke; justify-self: center; }
  body.jupi.dd_body .dg_header .jupi_nav_back { grid-area: zurueck; justify-self: start; }
  body.jupi.dd_body .dg_header .jupi_werkzeuge { grid-area: werkzeug; justify-self: end; }
}
@media (max-width: 640px) {
  body.jupi.dd_body .dg_brand { padding: .3rem .85rem .3rem .6rem; gap: .45rem; }
  body.jupi.dd_body .dg_brand img { width: 30px; height: 30px; }
  body.jupi.dd_body .dg_brand h1 { font-size: 1rem; }
  body.jupi.dd_body .dg_header .jupi_nav_back { padding: .35rem .6rem; font-size: .82rem; }
  body.jupi.dd_body .dg_header .jupi_sprachen_select { width: 7.2rem; font-size: .76rem; }
  body.jupi.dd_body .jupi_main { padding: .6rem .55rem 1.1rem; }
  body.jupi.dd_body .dg_panel { padding: .55rem .6rem; gap: .45rem .55rem; }
  body.jupi.dd_body .dg_stat { flex: 1 1 42%; min-width: 0; }
  body.jupi.dd_body .dg_stat span { font-size: 1.08rem; }
  body.jupi.dd_body .dg_controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .4rem;
    width: 100%;
  }
  body.jupi.dd_body .dg_controls label { font-size: .74rem; }
  body.jupi.dd_body .dg_panel .jupi_select { width: 100%; min-width: 0; font-size: .84rem; }
  body.jupi.dd_body .dg_stage { padding: 2.75rem .7rem .95rem; }
  body.jupi.dd_body .dd_kopf { height: 2.15rem; padding: 0 4.6rem 0 .7rem; font-size: .58rem; letter-spacing: .08em; }
  body.jupi.dd_body .dd_ecke { width: 4.2rem; height: 1.6rem; right: .55rem; font-size: .5rem; }
  body.jupi.dd_body .dd_klammer { left: 1.1rem; width: 13px; height: 34px; }
  body.jupi.dd_body .dg_task_label { font-size: 1.02rem; }
  body.jupi.dd_body .dg_btn,
  body.jupi.dd_body .dg_mini { flex: 1 1 100%; }
  body.jupi.dd_body .dg_btn { min-height: 56px; font-size: 1.06rem; }
  body.jupi.dd_body .dg_done { padding: 1.15rem .8rem 1.3rem; }
  body.jupi.dd_body .dg_done::after { top: .6rem; right: .5rem; font-size: .5rem; }
  body.jupi.dd_body .dg_modal_box { padding: 1rem .9rem 1.1rem; }
}

/* ---------- 8. Dark Mode: Nachtbuero ----------
   Fast schwarzes Holz, das Papier bleibt hell (Lesbarkeit), und oben rechts
   wirft die Schreibtischlampe warmes Licht auf die Wand. */
html[data-theme="dark"] body.jupi.dd_body {
  --dd-mahagoni: #221812;
  --dd-mahagoni-hell: #2e2116;
  --dd-mahagoni-tief: #150e09;
  --dd-papier: #f2e8d2;
  --dd-papier-2: #e8dbc0;
  --dd-papier-kante: #c2ae87;
  --dd-tinte: #241f19;
  --dd-tinte-2: #6a5c46;
  --dd-schleier: rgba(3, 5, 4, .64);
  background-color: #0d1512;
  background-image:
    radial-gradient(60% 48% at 76% 6%, rgba(255, 208, 138, .26) 0%,
      rgba(255, 196, 120, .10) 38%, rgba(255, 190, 110, 0) 66%),
    linear-gradient(var(--dd-schleier), var(--dd-schleier)),
    url("assets/kulisse.svg");
  color: #efe4cd;
}
html[data-theme="dark"] body.jupi.dd_body .jupi_container,
html[data-theme="dark"] body.jupi.dd_body .jupi_container > .jupi_main,
html[data-theme="dark"] body.jupi.dd_body .jupi_container > .jupi_footer { background: transparent; }
html[data-theme="dark"] body.jupi.dd_body .jupi_container > .jupi_footer { color: #efe4cd; }
html[data-theme="dark"] body.jupi.dd_body .jupi_footer a { color: #f2d49c; }

html[data-theme="dark"] body.jupi.dd_body .dg_header {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px,
      rgba(0, 0, 0, .10) 2px 7px),
    linear-gradient(180deg, #30231a 0%, #241a13 55%, #150e09 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(224, 196, 143, .16);
}
/* Im Nachtbuero liegt der Lampenschein auf dem Namensschild. */
html[data-theme="dark"] body.jupi.dd_body .dg_brand {
  background: linear-gradient(180deg, #e8cf9c 0%, #c8a06a 42%, #8f6f3d 52%, #a2804d 100%);
  box-shadow: 0 3px 0 #4d3a1e, 0 8px 18px rgba(0, 0, 0, .55),
              inset 0 1px 0 rgba(255, 248, 220, .6),
              inset 0 -2px 4px rgba(70, 48, 20, .5),
              0 0 26px rgba(255, 204, 128, .18);
}
html[data-theme="dark"] body.jupi.dd_body .dg_panel {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px,
      rgba(0, 0, 0, .10) 2px 8px),
    linear-gradient(180deg, #2c2018 0%, #1e150f 60%, #130c08 100%);
  border-color: #0d0906;
  box-shadow: inset 0 1px 0 rgba(224, 196, 143, .2),
              inset 0 -2px 6px rgba(0, 0, 0, .5),
              0 10px 22px rgba(0, 0, 0, .55);
}
/* Das Papier bleibt hell - nur eine Spur waermer und weniger grell. */
html[data-theme="dark"] body.jupi.dd_body .dg_stage,
html[data-theme="dark"] body.jupi.dd_body .dg_done {
  background-color: var(--dd-papier);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 22%),
    repeating-linear-gradient(180deg, rgba(34, 32, 29, .04) 0 1px, transparent 1px 27px),
    linear-gradient(180deg, #f7eeda 0%, var(--dd-papier) 55%, #e9dcc2 100%);
  border-color: var(--dd-papier-kante);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .62), 0 2px 0 rgba(255, 255, 255, .45) inset;
}
html[data-theme="dark"] body.jupi.dd_body .dg_btn,
html[data-theme="dark"] body.jupi.dd_body .dg_mini {
  background: linear-gradient(180deg, #fffaf0 0%, #f4ebd7 100%);
  border-color: var(--dd-papier-kante);
  color: var(--dd-tinte);
}
html[data-theme="dark"] body.jupi.dd_body .dg_btn.dg_btn_right,
html[data-theme="dark"] body.jupi.dd_body .dg_mini.dg_btn_right {
  background: var(--dd-gruen-hell);
  border-color: #9dc8a8;
}
html[data-theme="dark"] body.jupi.dd_body .dg_btn.dg_btn_wrong,
html[data-theme="dark"] body.jupi.dd_body .dg_mini.dg_btn_wrong {
  background: #fdeeeb;
  border-color: #dfa79d;
}
html[data-theme="dark"] body.jupi.dd_body .dg_mini svg,
html[data-theme="dark"] body.jupi.dd_body .dg_diagramm_box svg { background: #fff; }
html[data-theme="dark"] body.jupi.dd_body .dg_tabelle {
  background: #fffdf6;
  border-color: var(--dd-papier-kante);
  color: var(--dd-tinte);
}
html[data-theme="dark"] body.jupi.dd_body .dg_msg { color: var(--dd-tinte); }
html[data-theme="dark"] body.jupi.dd_body .dg_msg_ok { color: #245c33; background: #eef8ee; border-color: #b7d8bc; }
html[data-theme="dark"] body.jupi.dd_body .dg_msg_err { color: #8d2b21; background: #fdeeeb; border-color: #e5b3aa; }
/* Die Plattform faerbt im Dunkelmodus Knoepfe orange (html[data-theme=dark]
   .jupi_btn) und Flaechen schwarz - hier holen sie ihre Papier-/Messingfarbe
   zurueck. */
html[data-theme="dark"] body.jupi.dd_body .dg_panel .jupi_btn,
html[data-theme="dark"] body.jupi.dd_body .dg_modal_footer .jupi_btn,
html[data-theme="dark"] body.jupi.dd_body #dg_next,
html[data-theme="dark"] body.jupi.dd_body #dg_again {
  color: #33241a;
  background: linear-gradient(180deg, #e6cc95 0%, var(--dd-kork) 48%, var(--dd-messing) 100%);
  border: 1px solid #7a5c31;
}
html[data-theme="dark"] body.jupi.dd_body .dg_panel .jupi_btn { color: var(--dd-tinte); background: linear-gradient(180deg, #fffaf0, #f2e8d3); border-color: var(--dd-papier-kante); }
html[data-theme="dark"] body.jupi.dd_body .dg_modal {
  background: var(--dd-papier);
  color: var(--dd-tinte);
  border-color: #c2ab84;
}
html[data-theme="dark"] body.jupi.dd_body .dg_modal_header { border-bottom-color: rgba(34, 32, 29, .2); }
html[data-theme="dark"] body.jupi.dd_body .dg_modal_title_wrap h2 { color: var(--dd-tinte); }
html[data-theme="dark"] body.jupi.dd_body .dg_modal_close { background: var(--dd-papier-2); color: var(--dd-tinte); border-color: #c2ab84; }
html[data-theme="dark"] body.jupi.dd_body .dg_lernziel { background: #fff6d9; color: var(--dd-tinte); border-left-color: var(--dd-messing); }
html[data-theme="dark"] body.jupi.dd_body .dg_modal_body h3 { color: #6b4a1f; }
html[data-theme="dark"] body.jupi.dd_body .dg_modal_footer { border-top-color: rgba(34, 32, 29, .18); }

/* ---------- 9. Bedienziele mindestens 40 x 40 px (Regel 3.13.5) ----------
   Steht bewusst am ENDE: jupi.css bringt spaetere Grundregeln fuer button und
   select mit, die sonst gewinnen. */
body.jupi.dd_body button,
body.jupi.dd_body select,
body.jupi.dd_body a.jupi_nav_back { min-height: 40px; min-width: 40px; box-sizing: border-box; }
body.jupi.dd_body .dg_btn { min-height: 56px; }
body.jupi.dd_body .dg_mini { min-height: 56px; }
body.jupi.dd_body button { max-width: 100%; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  body.jupi.dd_body * { animation: none !important; transition: none !important; }
}

/* ---------- 10. Feinschliff nach der Sichtpruefung (26.10.2026) ----------
   Diese Regeln kommen bewusst NACH Abschnitt 0-9: gleiche oder hoehere
   Spezifitaet, spaetere Stelle - so korrigieren sie die Welt, ohne sie
   umzubauen. Inhalt: Paar-Layout der Konsole (Label + Auswahl bleiben
   zusammen), Handy-Raster, Bueroklammer und Kopfzeile ohne Kollision,
   hellere Beweiswand und ein staerkerer Lampenschein im Nachtbuero. */

/* Label und Auswahl gehoeren zusammen - als Paar brechen sie nie auseinander. */
body.jupi.dd_body .dd_feld {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
body.jupi.dd_body .dd_knoepfe {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Bueroklammer sitzt auf der Blattecke, der Aktenzeichen-Text beginnt daneben. */
body.jupi.dd_body .dd_klammer { left: .7rem; }
body.jupi.dd_body .dd_kopf { padding-left: 2.7rem; }

/* Etwas hellere Beweiswand: der Filz soll als gruener Filz lesbar sein,
   die Mahagoni-Latten als Holz - ohne grell zu werden. */
body.jupi.dd_body {
  --dd-schleier: rgba(12, 18, 14, .06);
  background-color: #26362d;
}

/* Nachtbuero: die Schreibtischlampe wirft mehr warmes Licht auf die Wand. */
html[data-theme="dark"] body.jupi.dd_body {
  background-image:
    radial-gradient(58% 46% at 78% 4%, rgba(255, 212, 146, .34) 0%,
      rgba(255, 198, 124, .14) 40%, rgba(255, 190, 110, 0) 68%),
    linear-gradient(var(--dd-schleier), var(--dd-schleier)),
    url("assets/kulisse.svg");
}

@media (max-width: 640px) {
  /* Handy: jede Auswahl steht unter ihrer Beschriftung, die Knoepfe bilden
     eine eigene Zeile. Vorher quetschte das 3-Spalten-Raster die Auswahl
     auf "Lei" zusammen und schob "Schwierigkeit:" aus dem Bild. */
  body.jupi.dd_body .dg_controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
    width: 100%;
  }
  body.jupi.dd_body .dd_feld {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .12rem;
    align-items: stretch;
  }
  body.jupi.dd_body .dd_knoepfe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem;
  }
  /* Die drei Fall-Karten stehen nebeneinander, nicht 2 + 1. */
  body.jupi.dd_body .dg_stat {
    flex: 1 1 calc(33.333% - .4rem);
    min-width: 0;
    padding: .26rem .45rem .3rem .8rem;
  }
  body.jupi.dd_body .dg_stat::before { left: .26rem; width: 5px; height: 5px; margin-top: -2.5px; }
  body.jupi.dd_body .dg_stat label { font-size: .53rem; letter-spacing: .05em; }
  body.jupi.dd_body .dg_stat span { font-size: .98rem; }
  /* Auf schmalen Blättern stoeren sich Stempel und "VERTRAULICH" - der Stempel
     bleibt, die zweite Kopfzeile faellt weg. */
  body.jupi.dd_body .dd_kopf::after { content: none; }
  body.jupi.dd_body .dd_kopf { padding-left: 2.2rem; padding-right: 4.9rem; }
  body.jupi.dd_body .dd_klammer { left: .4rem; }
}
/* ---------- 11. Kulisse als EINE Szene (Vorgabe 26.10.2026) ----------
   Die Beweiswand ist keine Kachel mehr, sondern ein einziges Bild in
   1920 x 1080 (Generator .zcode/diagrammdetektiv-kulisse.cjs): Zettel, Fotos,
   roter Faden und Reisszwecken sitzen an festen Plaetzen links und rechts,
   die Mitte bleibt ruhig. Im Browser liegt die Szene randlos und fest
   (no-repeat / cover / fixed) - dadurch wiederholt sich kein Motiv, auch nicht
   auf sehr breiten Fenstern. Darueber liegen nur Licht und Schleier, beides
   verlaufsfoermig und damit motivfrei. */
body.jupi.dd_body {
  background-color: #26362d;
  background-image:
    radial-gradient(120% 70% at 50% -12%, rgba(255, 240, 210, .10) 0%, rgba(255, 240, 210, 0) 58%),
    linear-gradient(var(--dd-schleier), var(--dd-schleier)),
    url("assets/kulisse.svg");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}
html[data-theme="dark"] body.jupi.dd_body {
  background-color: #0d1512;
  background-image:
    radial-gradient(58% 46% at 78% 4%, rgba(255, 212, 146, .30) 0%,
      rgba(255, 198, 124, .12) 40%, rgba(255, 190, 110, 0) 68%),
    linear-gradient(var(--dd-schleier), var(--dd-schleier)),
    url("assets/kulisse.svg");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}

/* Konsole: die Instrumentenzeile bekommt eine eigene, abgesetzte Zeile -
   sonst blieb links neben "Modus:" eine leere Ecke stehen (Sichtpruefung). */
@media (min-width: 641px) {
  body.jupi.dd_body .dg_controls {
    flex: 1 1 100%;
    margin-left: 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(224, 196, 143, .18);
    justify-content: flex-end;
  }
}