/* ==========================================================================
   Einheiten-Küche - Kochstudio-Optik (Stand 25.10.2026)

   Aufbau von aussen nach innen:
     1. Farben und Grundregeln (Teal, Kupfer, Sahne, Holz)
     1b. Seitenkulisse: EIN gemaltes Küchenbild hinter allem
     2. Die Küchen-Konsole: JUPI-Leiste als emaillierte Schautafel
     3. Bühne: gemaltes Kochstudio (assets/kochstudio.svg) + Rezeptkarte
     4. Bedienleiste, Bestellzettel, Fortschritt, Rezeptkarte, Sprechblase
     5. Antworten, Meldungen, Rundenende, Hilfe-Fenster
     6. Dark Mode (Abendküche)
     7. Handy und kurze Fenster
     8. Bedienziele >= 40 x 40 px (Regel 3.13.5) - STEHT AM ENDE

   Alle Regeln tragen das Präfix ek_. Die Optik lebt im Paket, nicht in der
   Plattform-CSS (Zukunftsstandard AGENTS.md 3.10).
   ========================================================================== */

/* ---------- 1. Farben ---------- */
:root {
  --ek-tief: #041b18;
  --ek-wand: #0d423d;
  --ek-wand-hell: #14564f;
  --ek-wand-dunkel: #082b27;
  --ek-kupfer: #c9783b;
  --ek-kupfer-hell: #f0b171;
  --ek-kupfer-tief: #8a4a22;
  --ek-sahne: #f6ecda;
  --ek-sahne-hell: #fffaf0;
  --ek-papier: #fff8e8;
  --ek-papier-kante: #e0c79c;
  --ek-papier-tief: #f1e1c4;
  --ek-tinte: #3b2414;
  --ek-tinte-leise: #8a6a45;
  --ek-tomate: #d14b3c;
  --ek-tomate-tief: #a8281c;
  --ek-gruen: #2f6a24;
  --ek-gruen-hell: #8bc34a;
  --ek-gold: #f2c66d;
  --ek-gold-hell: #ffe8b8;
  --ek-schrift: Georgia, "Times New Roman", "Palatino Linotype", serif;
}

/* ---------- 1b. Seitenkulisse: eine gemalte Küchenwand ---------- */
/* Die Seite ist die Küche: EIN Bild (assets/kulisse.svg, 1600 x 1000) mit
   cover + no-repeat, fest am Fenster - es wiederholt sich nicht und darf an
   den Rändern anschneiden. Kacheln sind hier verboten: die erste Fassung war
   eine 480-px-Fliese mit `repeat` und fiel als Muster auf (Kachel-Verbot,
   Lehre vom 26.10.2026 - Muster Wort-Maulwurf, Schatzkarte, Notenfall).
   Alle Regeln hängen an body.jupi.ek_body, damit sie die Grundregeln aus
   jupi.css in beiden Themes schlagen - die dunkle Fassung braucht
   html[data-theme="dark"] davor. */
body.jupi.ek_body {
  min-height: 100vh;
  color: var(--ek-sahne);
  background-color: #072925;
  background-image:
    linear-gradient(rgba(5, 30, 26, .34), rgba(2, 16, 14, .52)),
    url("assets/kulisse.svg");
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
/* Dark Mode = Nachtschicht: dieselbe Küche, eine dunkle Schicht darüber. */
html[data-theme="dark"] body.jupi.ek_body {
  background-color: #041b18;
  background-image:
    linear-gradient(rgba(2, 12, 10, .62), rgba(1, 7, 6, .74)),
    url("assets/kulisse.svg");
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
/* Die weisse Plattform-Karte darf die Küche nicht zudecken. */
body.jupi.ek_body .jupi_main { background: transparent; }
body.jupi.ek_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.ek_body .jupi_container { min-height: 100dvh; }
}
/* Fuss direkt auf der gemalten Wand/Platte: keine weisse Karte, Schrift in
   Sahne, Links im Kupfergold. */
body.jupi.ek_body .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
  margin: 0 auto;
  max-width: none;
  padding: .5rem 1rem 1rem;
}
body.jupi.ek_body .jupi_footer_text {
  color: #cfe3d9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
body.jupi.ek_body .jupi_footer_text a { color: var(--ek-gold); }
body.jupi.ek_body .jupi_footer_text a:hover { color: var(--ek-gold-hell); }

body.jupi.ek_body .jupi_main.ek_main {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: .75rem 1rem 0;
  min-width: 0;
  position: relative;
}
/* Der schmale Streifen zwischen Leiste und Bühne zeigt jetzt die gemalte
   Wand - die frühere dunkle Fläche war nur gegen die Kachel-Motive da. */

/* ---------- 2. Küchen-Konsole (Kopfzeile) ---------- */
/* Emaille-Schild in Teal mit Kupferkante und warmer Lichtnaht. */
.ek_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  color: var(--ek-gold-hell);
  background:
    radial-gradient(circle at 14% 32%, rgba(255, 224, 178, .12) 0 9%, transparent 10%),
    radial-gradient(circle at 84% 70%, rgba(0, 0, 0, .26) 0 8%, transparent 9%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 112px),
    linear-gradient(180deg, #1d6b60 0%, #0f4a44 52%, #082f2b 100%);
  border-bottom: 4px solid #051f1c;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 235, 200, .18);
  position: sticky;
  top: 0;
  z-index: 50;
}
.ek_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 177, 113, .65), transparent);
  pointer-events: none;
}
.ek_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 2px solid #d3a56d;
  background: linear-gradient(180deg, #fffaf0, #f0e2c4);
  color: #4a2c12;
  font-weight: 800;
  font-size: .88rem;
  text-decoration: none;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .35);
}
.ek_header .jupi_nav_back:hover {
  background: #fffdf7;
  transform: translateY(-1px);
}
.ek_brand {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.ek_brand_schild {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 3px;
  border-radius: 12px;
  background: #fff8e8;
  border: 2px solid #e0c79c;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .38);
  transform: rotate(-2deg);
}
.ek_brand_schild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1;
}
.ek_brand h1 {
  margin: 0;
  color: var(--ek-gold-hell);
  font-family: var(--ek-schrift);
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 2px 0 #06211e, 0 0 16px rgba(242, 198, 109, .3);
}
.ek_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.ek_header #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.ek_header .jupi_sprachen_select {
  background: #082f2b;
  color: var(--ek-gold-hell);
  border: 2px solid #b87a44;
  border-radius: .6rem;
  font-weight: 700;
  max-width: 11rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
}
.ek_header .jupi_sprachen_select:hover { background: #0d3d37; }
.ek_header .jupi_sprachen_select option { color: #f6ecda; background: #082f2b; }
.ek_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  background: #082f2b;
  border: 2px solid #b87a44;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}
.ek_header .jupi_theme_switch:hover { background: #0d3d37; }
.ek_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff8e8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .ek_header .jts_thumb { left: calc(100% - 36px); }
.ek_header .jts_sun { left: 9px; }
.ek_header .jts_moon { right: 9px; }

/* ---------- 3. Bühne: das gemalte Kochstudio ---------- */
.ek_stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(calc(100dvh - 10.5rem), 48rem);
  border: 4px solid #2b180b;
  border-radius: 1.3rem;
  background: #0d423d;
  box-shadow:
    0 24px 52px rgba(0, 0, 0, .52),
    0 2px 0 rgba(255, 229, 178, .18) inset,
    0 -4px 0 rgba(0, 0, 0, .35) inset;
}
.ek_stage[hidden] { display: none !important; }
.ek_szene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/kochstudio.svg") center bottom / cover no-repeat;
  filter: brightness(1.06) saturate(1.03);
  pointer-events: none;
}
/* Abdunkelung oben und unten, damit Leiste und Karte immer lesbar bleiben */
.ek_stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 18, 16, .56) 0%, rgba(3, 18, 16, .07) 26%,
                    rgba(3, 18, 16, .07) 64%, rgba(3, 18, 16, .48) 100%),
    radial-gradient(90% 58% at 50% 42%, transparent 50%, rgba(2, 12, 10, .30) 100%);
}
.ek_welt {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(.8rem, 2vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1 1 auto;
}

/* ---------- 4a. Bedienleiste (3.13.3 Typ 2) ---------- */
.ek_panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  padding: .55rem .65rem;
  border-radius: .95rem;
  color: var(--ek-tinte);
  background:
    radial-gradient(circle at 22% 26%, rgba(150, 110, 60, .05) 0 2px, transparent 3px) 0 0 / 30px 30px,
    linear-gradient(180deg, #fffaf0, #f1e1c4);
  border: 2px solid #d3a56d;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .4),
    0 1px 0 rgba(255, 255, 255, .7) inset;
}
.ek_stats {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: stretch;
  min-width: 0;
}
.ek_stat {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 5rem;
  padding: .28rem .55rem;
  border-radius: .65rem;
  background: linear-gradient(180deg, #fffdf7, rgba(255, 255, 255, .5));
  border: 1.5px solid #e0c79c;
  box-shadow: 0 2px 6px rgba(70, 40, 10, .12);
}
.ek_stat_icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff1d2, #f2d9a8);
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}
.ek_stat_text { display: flex; flex-direction: column; min-width: 0; }
.ek_stat label {
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ek-tinte-leise);
  line-height: 1.2;
}
.ek_stat_text > span {
  font-family: var(--ek-schrift);
  font-size: 1.2rem;
  font-weight: 900;
  color: #9a3412;
  line-height: 1.12;
}
.ek_controls {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .45rem;
}
.ek_feld { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ek_feld label {
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ek-tinte-leise);
}
.ek_select {
  min-height: 40px;
  max-width: 14.5rem;
  padding: .35rem .55rem;
  border: 2px solid #d3a56d;
  border-radius: .6rem;
  background: #fffdf7;
  color: var(--ek-tinte);
  font-weight: 700;
  font-size: .88rem;
  box-shadow: 0 2px 5px rgba(70, 40, 10, .12);
}
.ek_select:focus {
  outline: none;
  border-color: var(--ek-kupfer);
  box-shadow: 0 0 0 3px rgba(201, 120, 59, .25);
}
.ek_rund {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #6d3718;
  background: linear-gradient(180deg, #e6a66a, #a65a2a);
  color: #fff8e8;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 3px 8px rgba(40, 20, 5, .4),
    0 2px 0 rgba(255, 255, 255, .22) inset;
  transition: transform .1s, filter .1s, box-shadow .12s;
}
.ek_rund:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ek_rund:active { transform: translateY(0); }
.ek_rund:focus-visible { outline: 3px solid #fff8e8; outline-offset: 2px; }
.ek_rund_frage {
  background: linear-gradient(180deg, #ffe082, #e0a33a);
  color: #4a2c12;
  border-color: #a9700c;
  font-size: 1.2rem;
}

/* ---------- 4b. Bestellzettel: die Aufgabe ---------- */
.ek_schild {
  position: relative;
  width: min(100%, 46rem);
  margin: .1rem auto 0;
}
.ek_task_label {
  margin: 0;
  padding: .62rem 1.1rem .62rem 2.5rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ek-tinte);
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.35;
  background:
    repeating-linear-gradient(0deg, rgba(160, 120, 70, .05) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #fffdf7, #f2e2c5);
  border: 2px solid #d3a56d;
  border-radius: .55rem;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .32);
  transform: rotate(-.35deg);
}
.ek_klemme {
  position: absolute;
  left: 1.05rem;
  top: -9px;
  width: 17px;
  height: 28px;
  z-index: 2;
  border-radius: 4px 4px 6px 6px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .28) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, #e6a66a, #a65a2a);
  border: 2px solid #6d3718;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
  transform: rotate(-8deg);
}
.ek_klemme::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 9px;
  height: 2px;
  background: #6d3718;
  opacity: .55;
}

/* ---------- 4c. Fortschritt: acht Gewürzschächtelchen ---------- */
.ek_fortschritt {
  display: flex;
  gap: .35rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: .1rem 0 0;
}
.ek_dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.38rem;
  border-radius: .3rem .3rem .45rem .45rem;
  border: 2px solid #b98a4b;
  background: linear-gradient(180deg, #f8efd9, #e4d3b7);
  color: #8a6a45;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, .6) inset;
}
.ek_dot::after { content: attr(data-n); }
.ek_dot_fertig {
  background: linear-gradient(180deg, #a5d66a, #4f8a4a);
  border-color: #2f6a24;
  color: #fff;
}
.ek_dot_aktuell {
  background: linear-gradient(180deg, #ffe082, #f2b53b);
  border-color: #a9700c;
  color: #5d4300;
  animation: ek_dot_puls 1.3s ease-in-out infinite;
}
@keyframes ek_dot_puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18) rotate(-2deg); }
}

/* ---------- 4d. Rezeptkarte ---------- */
.ek_buehne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 100%;
  margin-top: .15rem;
}
.ek_karte_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ek_rezept {
  position: relative;
  width: min(100%, 44rem);
  padding: 1.25rem 1.35rem 1.2rem;
  border-radius: 1rem;
  color: var(--ek-tinte);
  background:
    radial-gradient(circle at 22% 30%, rgba(150, 110, 60, .045) 0 2px, transparent 3px) 0 0 / 34px 34px,
    radial-gradient(circle at 68% 62%, rgba(150, 110, 60, .04) 0 2px, transparent 3px) 14px 20px / 44px 44px,
    linear-gradient(180deg, #fff8e8, #f8eed8);
  border: 3px solid #d3a56d;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .45),
    0 2px 0 rgba(255, 255, 255, .7) inset,
    0 -3px 0 rgba(120, 75, 35, .14) inset;
  overflow: hidden;
}
/* Rot-weißes Karomuster als obere Kante (Küchentuch) */
.ek_rezept::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 13px;
  background:
    repeating-linear-gradient(90deg, rgba(209, 75, 60, .78) 0 13px, rgba(255, 250, 240, .78) 13px 26px),
    repeating-linear-gradient(0deg, rgba(209, 75, 60, .7) 0 13px, transparent 13px 26px),
    #fff8e8;
  border-bottom: 1px solid rgba(168, 40, 28, .3);
}
.ek_rezept::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(225deg, #fff8e8 48%, #e8d3ad 50%, #fff8e8 54%);
  box-shadow: -2px 2px 5px rgba(70, 40, 10, .16);
  border-radius: 0 0 0 6px;
  pointer-events: none;
}
.ek_rezept_klammer {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 54px;
  height: 19px;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .22) 0 4px, transparent 4px 46px),
    linear-gradient(180deg, #e6a66a, #a65a2a);
  border: 2px solid #6d3718;
  border-top: 0;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.ek_rezept_inhalt {
  position: relative;
  padding-top: .65rem;
}
/* Nur fuer Screenreader - der sichtbare Eingabe-Kasten zeigt die Zahl. */
.ek_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ek_rezept_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .7rem;
  padding-bottom: .45rem;
  border-bottom: 2px dashed #d3a56d;
  color: var(--ek-tomate-tief);
  font-family: var(--ek-schrift);
  font-size: 1.06rem;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.3;
}
.ek_rezept_stern {
  flex: none;
  color: var(--ek-kupfer);
  font-size: 1rem;
}
.ek_zeile {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .45rem;
  font-size: 1.04rem;
  font-weight: 800;
  color: #6b4a2a;
}
.ek_zutat_icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(201, 120, 59, .15);
  border: 1px solid rgba(201, 120, 59, .35);
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
}
.ek_aufgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .55rem;
  margin: .55rem 0 .15rem;
  font-family: var(--ek-schrift);
  font-size: clamp(1.55rem, 4.2vw, 2.25rem);
  font-weight: 900;
  line-height: 1.25;
  color: var(--ek-tinte);
  text-align: center;
}
.ek_betrag { color: var(--ek-tomate-tief); }
.ek_gleich { color: var(--ek-kupfer); font-weight: 900; }
.ek_eingabe_wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ek_input {
  width: 7.2ch;
  min-height: 3rem;
  padding: .1rem .4rem;
  text-align: center;
  font-family: var(--ek-schrift);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--ek-tinte);
  background: #fffdf7;
  border: 3px solid #b98a4b;
  border-radius: .55rem;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .8) inset,
    0 -3px 0 rgba(120, 75, 35, .12) inset;
}
.ek_input::placeholder { color: #c9b18a; }
.ek_input:focus {
  outline: none;
  border-color: var(--ek-kupfer);
  box-shadow:
    0 0 0 4px rgba(201, 120, 59, .25),
    0 2px 0 rgba(255, 255, 255, .8) inset;
}
.ek_input_right {
  border-color: var(--ek-gruen);
  background: #e9f5df;
  color: #1c4b16;
}
.ek_input_wrong {
  border-color: var(--ek-tomate);
  background: #fdece9;
  animation: ek_wackeln .32s;
}
@keyframes ek_wackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.ek_einheit { color: var(--ek-kupfer-tief); }
.ek_frage {
  display: block;
  margin: .4rem 0 .25rem;
  font-family: var(--ek-schrift);
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  color: var(--ek-tinte);
}
.ek_luecke {
  display: inline-block;
  min-width: 3.4ch;
  padding: 0 .3rem;
  border-bottom: 4px solid var(--ek-kupfer);
  color: var(--ek-kupfer-tief);
}
.ek_kessel_leiste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: .4rem 0 .15rem;
}
.ek_kessel {
  flex: 1 1 9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .65rem .6rem;
  text-align: center;
  font-weight: 800;
  color: var(--ek-tinte-leise);
  background: linear-gradient(180deg, #fffdf7, #f4e5c9);
  border: 2px solid #d3a56d;
  border-radius: .85rem;
  box-shadow: 0 3px 8px rgba(70, 40, 10, .14);
}
.ek_kessel_emoji { font-size: 1.9rem; line-height: 1; }
.ek_kessel_icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--ek-kupfer-tief);
}
.ek_kessel_icon svg { display: block; width: 100%; height: 100%; }
.ek_kessel b {
  font-family: var(--ek-schrift);
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  font-weight: 900;
  color: var(--ek-tomate-tief);
}
.ek_vs {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe082, #f2b53b);
  border: 2px solid #a9700c;
  color: #5d4300;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

/* ---------- 4e. Koch-Sprechblase ---------- */
.ek_bubble {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: min(100%, 42rem);
  margin: .1rem auto 0;
  padding: .42rem .85rem .42rem .45rem;
  border-radius: .9rem;
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 228, 182, .10) 0 10%, transparent 11%),
    linear-gradient(180deg, #0d3d38, #082b27);
  border: 2px solid var(--ek-kupfer);
  color: var(--ek-gold-hell);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38);
}
.ek_koch_avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 56px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.ek_koch_avatar svg { display: block; width: 46px; height: 54px; }
.ek_bubble_text { min-width: 0; }

/* ---------- 5a. Antwort-Knöpfe (Gewürzschächtelchen) ---------- */
.ek_btns {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  width: 100%;
  max-width: 44rem;
  margin: .15rem auto 0;
}
.ek_btns[hidden] { display: none !important; }
.ek_knopf[hidden] { display: none !important; }
.ek_btn[hidden] { display: none !important; }
.ek_btn {
  position: relative;
  flex: 1 1 10rem;
  min-height: 58px;
  padding: .45rem .85rem;
  border: 3px solid var(--ek-kupfer);
  border-radius: .8rem;
  background: linear-gradient(180deg, #fffdf7, #f0dfbf);
  color: var(--ek-tinte);
  font: inherit;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  font-weight: 900;
  line-height: 1.25;
  cursor: pointer;
  box-shadow:
    0 4px 0 var(--ek-kupfer-tief),
    0 8px 16px rgba(0, 0, 0, .32);
  transition: transform .1s, box-shadow .12s, filter .12s;
}
.ek_btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(138, 74, 34, .28);
  border-radius: .5rem;
  pointer-events: none;
}
.ek_btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 6px 0 var(--ek-kupfer-tief), 0 12px 20px rgba(0, 0, 0, .34);
}
.ek_btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ek-kupfer-tief), 0 5px 10px rgba(0, 0, 0, .3);
}
.ek_btn:focus-visible { outline: 3px solid #fff8e8; outline-offset: 3px; }
.ek_btn:disabled { cursor: default; }
.ek_btn_right {
  border-color: var(--ek-gruen);
  background: linear-gradient(180deg, #f0f9e8, #d8edc8);
  color: #1c4b16;
  box-shadow: 0 4px 0 #1e5018, 0 0 0 4px rgba(139, 195, 74, .3);
}
.ek_btn_wrong {
  opacity: .58;
  border-color: var(--ek-tomate);
  background: linear-gradient(180deg, #fdece9, #f6d3cc);
  animation: ek_wackeln .32s;
}

/* ---------- 5b. Aktionsknöpfe ---------- */
.ek_btns_row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.ek_knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 46px;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  border: 2px solid #8a5a33;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 0 #6b4224, 0 8px 18px rgba(0, 0, 0, .32);
  transition: transform .1s, filter .1s, box-shadow .12s;
}
.ek_knopf:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ek_knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 #6b4224; }
.ek_knopf:focus-visible { outline: 3px solid #fff8e8; outline-offset: 3px; }
.ek_knopf:disabled { opacity: .62; cursor: default; }
.ek_knopf_gold {
  background: linear-gradient(180deg, #ffe082 0%, #f2c66d 55%, #e0a33a 100%);
  color: #4a2c12;
  border-color: #a9700c;
  box-shadow: 0 5px 0 #8a5a08, 0 10px 20px rgba(0, 0, 0, .34);
}
.ek_knopf_gold:hover { box-shadow: 0 7px 0 #8a5a08, 0 13px 22px rgba(0, 0, 0, .38); }
.ek_knopf_gold:active { box-shadow: 0 2px 0 #8a5a08; }
.ek_knopf_leise {
  background: linear-gradient(180deg, #fffaf0, #e4d3b7);
  color: #5a3517;
  border-color: #b98a4b;
  box-shadow: 0 4px 0 #8a5a33, 0 8px 16px rgba(0, 0, 0, .26);
}
.ek_knopf_leise:hover { box-shadow: 0 6px 0 #8a5a33, 0 10px 18px rgba(0, 0, 0, .3); }
#ek_pruefen,
#ek_next {
  min-width: 10rem;
  min-height: 52px;
  font-size: 1.12rem;
}

/* ---------- 5c. Meldung und Stempel ---------- */
.ek_msg {
  min-height: 1.6rem;
  margin: .15rem auto 0;
  padding: 0 .5rem;
  max-width: 40rem;
  text-align: center;
  font-weight: 800;
  font-size: .95rem;
  color: var(--ek-gold-hell);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
}
.ek_msg:empty { min-height: 0; }
.ek_msg_ok { color: #b9f6ca; }
.ek_msg_err { color: #ffb4a8; }
.ek_stempel {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 5;
  padding: .15rem .9rem;
  border: 4px solid var(--ek-gruen);
  border-radius: .5rem;
  background: rgba(255, 250, 240, .92);
  color: var(--ek-gruen);
  font-family: var(--ek-schrift);
  font-size: 1.4rem;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  animation: ek_stempel_aufschlag .45s cubic-bezier(.2, 2, .4, 1) both;
}
.ek_stempel_nein { color: var(--ek-tomate-tief); border-color: var(--ek-tomate-tief); }
@keyframes ek_stempel_aufschlag {
  from { transform: translate(-50%, -50%) rotate(-12deg) scale(2.6); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; }
}

/* ---------- 5d. Start-Overlay: der Küchenpass ---------- */
.ek_startoverlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 205, 140, .12) 0%, transparent 58%),
    rgba(3, 18, 16, .74);
  backdrop-filter: blur(3px);
}
.ek_startoverlay[hidden] { display: none !important; }
.ek_startkarte {
  position: relative;
  width: min(100%, 34rem);
  padding: 1.6rem 1.35rem 1.45rem;
  text-align: center;
  color: var(--ek-tinte);
  background:
    radial-gradient(circle at 20% 24%, rgba(150, 110, 60, .05) 0 2px, transparent 3px) 0 0 / 32px 32px,
    linear-gradient(180deg, #fff8e8, #f4e5c9);
  border: 3px solid #d3a56d;
  border-radius: 1.15rem;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .58), 0 2px 0 rgba(255, 255, 255, .7) inset;
}
.ek_startkarte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  border-radius: .9rem .9rem 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(209, 75, 60, .82) 0 13px, rgba(255, 250, 240, .82) 13px 26px),
    repeating-linear-gradient(0deg, rgba(209, 75, 60, .72) 0 13px, transparent 13px 26px),
    #fff8e8;
  border-bottom: 1px solid rgba(168, 40, 28, .3);
}
.ek_start_marken {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin: .45rem 0 .7rem;
}
.ek_start_marken span {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #e6a66a, #a65a2a);
  border: 2px solid #6d3718;
  color: #fff8e8;
  font-size: .8rem;
  font-weight: 900;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .3), 0 2px 0 rgba(255, 255, 255, .2) inset;
}
.ek_start_marken span:nth-child(1) { transform: rotate(-7deg); }
.ek_start_marken span:nth-child(2) { transform: rotate(5deg); }
.ek_start_marken span:nth-child(3) { transform: rotate(-3deg); }
.ek_startkarte h3 {
  margin: .1rem 0 .35rem;
  color: var(--ek-tomate-tief);
  font-family: var(--ek-schrift);
  font-size: clamp(1.55rem, 5vw, 2rem);
  line-height: 1.15;
}
.ek_startkarte p {
  max-width: 29rem;
  margin: 0 auto .95rem;
  color: #6b4a2a;
  font-size: 1rem;
  line-height: 1.55;
}
.ek_startkarte .jupi_startoverlay_btns {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
}
.ek_startkarte .ek_knopf { font-size: 1.06rem; padding: .65rem 1.4rem; }

/* ---------- 5e. Rundenende: die Servierglocke ---------- */
.ek_done {
  display: flex;
  justify-content: center;
  margin: .9rem auto 0;
  max-width: 52rem;
}
.ek_done[hidden] { display: none !important; }
.ek_done_karte {
  width: 100%;
  padding: 1.2rem 1.3rem 1.4rem;
  text-align: center;
  color: var(--ek-tinte);
  background:
    radial-gradient(circle at 24% 28%, rgba(150, 110, 60, .05) 0 2px, transparent 3px) 0 0 / 34px 34px,
    linear-gradient(180deg, #fff8e8, #f4e5c9);
  border: 3px solid #d3a56d;
  border-radius: 1.15rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .7) inset;
}
.ek_cloche { display: block; width: 110px; margin: 0 auto .1rem; }
.ek_cloche svg { display: block; width: 100%; height: auto; }
.ek_done h3 {
  margin: .1rem 0 .45rem;
  color: var(--ek-tomate-tief);
  font-family: var(--ek-schrift);
  font-size: clamp(1.35rem, 4vw, 1.7rem);
}
.ek_done p { margin: .25rem auto .5rem; max-width: 30rem; color: #6b4a2a; font-size: 1rem; }
.ek_sterne {
  margin: .2rem 0 .85rem;
  font-size: 2.4rem;
  letter-spacing: .18rem;
  line-height: 1.2;
}
.ek_sterne_pop { animation: ek_sterne_pop .55s cubic-bezier(.2, 2, .4, 1) both; }
@keyframes ek_sterne_pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.ek_konfetti {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}
.ek_konfetti i {
  position: absolute;
  top: -16px;
  display: block;
  border-radius: 2px;
  opacity: .95;
  animation: ek_konfetti_fall 2.8s ease-in forwards;
}
@keyframes ek_konfetti_fall {
  to { transform: translateY(108vh) rotate(720deg); opacity: .6; }
}

/* ---------- 5f. Hilfe-Fenster (Regel 3.13.4) ---------- */
.ek_modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(3, 15, 13, .8);
  backdrop-filter: blur(4px);
}
.ek_modal[hidden] { display: none !important; }
.ek_modal:focus { outline: none; }
.ek_modal:focus-visible { outline: none; }
.ek_modal_inhalt {
  width: min(100%, 38rem);
  max-height: 90vh;
  overflow: auto;
  border: 3px solid #d3a56d;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, #fffaf0, #f6ecd9);
  color: var(--ek-tinte);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62);
}
.ek_modal_kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  background:
    radial-gradient(circle at 16% 30%, rgba(255, 224, 178, .12) 0 10%, transparent 11%),
    linear-gradient(90deg, #0d423d, #14564f);
  color: var(--ek-gold-hell);
  border-bottom: 3px solid var(--ek-kupfer);
}
.ek_modal_kopf h3 {
  flex: 1;
  margin: 0;
  font-family: var(--ek-schrift);
  font-size: 1.15rem;
  line-height: 1.25;
}
.ek_modal_x {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: .55rem;
  border: 2px solid #b87a44;
  background: #082f2b;
  color: var(--ek-gold-hell);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.ek_modal_x:hover { background: #0d3d37; }
.ek_modal_x:focus-visible { outline: 3px solid #fff8e8; outline-offset: 2px; }
.ek_modal_body { padding: .9rem 1.2rem 1rem; }
.ek_modal_body h4 {
  margin: .7rem 0 .4rem;
  color: var(--ek-tomate-tief);
  font-size: 1.02rem;
}
.ek_modal_body h4:first-child { margin-top: 0; }
.ek_modal_body ul { margin: .2rem 0; padding-left: 1.2rem; }
.ek_modal_body li { margin: .2rem 0; line-height: 1.5; }
.ek_modal_body p { margin: .45rem 0 0; line-height: 1.55; }
.ek_modal_fuss {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: .7rem 1.1rem 1rem;
  background: #f6ecd9;
  border-top: 2px dashed #d3a56d;
}
.ek_lernziel {
  margin: .7rem 0 0;
  padding: .6rem .8rem;
  border-left: 5px solid var(--ek-kupfer);
  border-radius: .5rem;
  background: rgba(201, 120, 59, .12);
  line-height: 1.6;
}
.ek_modal_fuss .ek_knopf { font-size: .95rem; padding: .5rem 1.1rem; }

/* ---------- 6. Dark Mode (Abendküche) ---------- */
/* Karten bleiben Papier (wie ein Rezept), die Umgebung wird dunkler.
   Die Seitenkulisse dunkelt oben an body.jupi.ek_body ab. */
html[data-theme="dark"] .ek_header {
  background:
    radial-gradient(circle at 14% 32%, rgba(255, 224, 178, .10) 0 9%, transparent 10%),
    radial-gradient(circle at 84% 70%, rgba(0, 0, 0, .38) 0 8%, transparent 9%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .24) 0 2px, transparent 2px 112px),
    linear-gradient(180deg, #14564f 0%, #0a3a35 52%, #04211e 100%);
}
html[data-theme="dark"] .ek_szene {
  filter: brightness(.52) saturate(.82) hue-rotate(-5deg);
}
html[data-theme="dark"] .ek_stage::after {
  background:
    linear-gradient(180deg, rgba(2, 12, 10, .78) 0%, rgba(2, 12, 10, .24) 28%,
                    rgba(2, 12, 10, .24) 62%, rgba(1, 8, 7, .72) 100%),
    radial-gradient(90% 58% at 50% 42%, transparent 44%, rgba(0, 0, 0, .5) 100%);
}
html[data-theme="dark"] .ek_panel {
  background:
    radial-gradient(circle at 22% 26%, rgba(150, 110, 60, .05) 0 2px, transparent 3px) 0 0 / 30px 30px,
    linear-gradient(180deg, #fff8e8, #eddcbd);
}
html[data-theme="dark"] .ek_select { background: #fffaf0; color: #3b2414; }
html[data-theme="dark"] .ek_msg { color: var(--ek-gold-hell); }
html[data-theme="dark"] .ek_msg_err { color: #ffb4a8; }
html[data-theme="dark"] .ek_msg_ok { color: #b9f6ca; }

/* ---------- 7. Tablet und Handy ---------- */
@media (max-width: 52rem) {
  .ek_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .6rem;
    padding: .45rem .65rem .5rem;
  }
  .ek_brand {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .ek_brand_schild { width: 38px; height: 38px; }
  .ek_brand h1 { font-size: 1.22rem; }
  .ek_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    font-size: .82rem;
    padding: .35rem .7rem;
  }
  .ek_header .jupi_werkzeuge {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
  }
  .ek_header .jupi_sprachen_select { max-width: 8rem; font-size: .8rem; }
  .ek_header .jupi_theme_switch { width: 66px; min-width: 66px; }
  .ek_header .jts_thumb { left: 3px; width: 30px; height: 30px; }
  html[data-theme="dark"] .ek_header .jts_thumb { left: calc(100% - 33px); }
  .ek_header .jts_sun { left: 7px; }
  .ek_header .jts_moon { right: 7px; }
  .ek_controls { margin-left: 0; width: 100%; }
  .ek_feld { flex: 1 1 42%; }
  .ek_select { max-width: none; width: 100%; }
  .ek_welt { padding: .7rem; }
  .ek_stage { min-height: min(calc(100dvh - 8.6rem), 48rem); }
}

@media (max-width: 40rem) {
  body.jupi.ek_body .jupi_main.ek_main { padding: .45rem .5rem 0; }
  .ek_header { padding: .4rem .5rem .45rem; }
  .ek_brand h1 { font-size: 1.12rem; }
  .ek_header .jupi_nav_back { font-size: .78rem; padding: .32rem .6rem; }
  .ek_header .jupi_sprachen_select { max-width: 7.2rem; font-size: .75rem; padding: .25rem .4rem; }
  .ek_header .jupi_theme_switch { width: 60px; min-width: 60px; height: 38px; }
  .ek_header .jts_thumb { left: 3px; width: 28px; height: 28px; }
  html[data-theme="dark"] .ek_header .jts_thumb { left: calc(100% - 31px); }
  .ek_header .jts_sun { left: 6px; }
  .ek_header .jts_moon { right: 6px; }

  .ek_stage { border-radius: 1rem; min-height: min(calc(100dvh - 7.8rem), 46rem); }
  .ek_welt { padding: .55rem; gap: .45rem; }
  .ek_panel { gap: .4rem; padding: .45rem; border-radius: .8rem; }
  .ek_stats { gap: .3rem; width: 100%; }
  .ek_stat { flex: 1 1 0; min-width: 0; padding: .22rem .3rem; gap: .28rem; }
  .ek_stat_icon { width: 24px; height: 24px; font-size: .82rem; }
  .ek_stat label { font-size: .5rem; letter-spacing: .03em; }
  .ek_stat_text > span { font-size: 1rem; }
  .ek_controls { gap: .35rem; }
  .ek_feld { flex: 1 1 45%; }
  .ek_feld label { font-size: .56rem; }
  .ek_select { font-size: .76rem; min-height: 40px; padding: .28rem .35rem; }
  .ek_rund { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }

  .ek_task_label { font-size: .82rem; padding: .5rem .7rem .5rem 2.1rem; min-height: 40px; }
  .ek_klemme { left: .75rem; width: 14px; height: 24px; }
  .ek_fortschritt { gap: .25rem; }
  .ek_dot { width: 1.5rem; height: 1.12rem; font-size: .56rem; }
  .ek_rezept { padding: 1.1rem .8rem .9rem; border-radius: .85rem; }
  .ek_rezept::before { height: 11px; }
  .ek_rezept::after { top: 11px; width: 24px; height: 24px; }
  .ek_rezept_inhalt { padding-top: .45rem; }
  .ek_rezept_kopf { font-size: .9rem; margin-bottom: .5rem; padding-bottom: .35rem; }
  .ek_zeile { font-size: .9rem; }
  .ek_zutat_icon { width: 1.7rem; height: 1.7rem; font-size: .95rem; }
  .ek_aufgabe { font-size: clamp(1.3rem, 7vw, 1.65rem); gap: .25rem .35rem; margin: .35rem 0 .1rem; }
  .ek_input { width: 6ch; min-height: 2.5rem; font-size: 1.35rem; padding: .05rem .25rem; }
  .ek_frage { font-size: clamp(1.12rem, 4.8vw, 1.4rem); line-height: 1.4; }
  .ek_kessel_leiste { gap: .35rem; }
  .ek_kessel { flex: 1 1 7rem; padding: .45rem .35rem; }
  .ek_kessel_emoji { font-size: 1.4rem; }
  .ek_kessel b { font-size: 1.15rem; }
  .ek_vs { width: 1.9rem; height: 1.9rem; font-size: .6rem; }
  .ek_bubble { font-size: .84rem; padding: .35rem .6rem .35rem .35rem; gap: .4rem; }
  .ek_koch_avatar { width: 38px; height: 46px; }
  .ek_koch_avatar svg { width: 38px; height: 46px; }
  .ek_btns { gap: .4rem; }
  .ek_btn { flex: 1 1 100%; min-height: 52px; font-size: 1rem; }
  .ek_btns_row { gap: .4rem; }
  .ek_knopf { font-size: .88rem; padding: .45rem .85rem; min-height: 42px; }
  #ek_pruefen, #ek_next { min-width: 8.5rem; min-height: 48px; font-size: 1rem; }
  .ek_msg { font-size: .86rem; }

  .ek_startoverlay { padding: .5rem; }
  .ek_startkarte { padding: 1.2rem .9rem 1.1rem; border-radius: .9rem; }
  .ek_startkarte h3 { font-size: 1.5rem; }
  .ek_startkarte p { font-size: .9rem; }
  .ek_start_marken { margin: .3rem 0 .55rem; gap: .4rem; }
  .ek_start_marken span { width: 2.3rem; height: 2.3rem; font-size: .7rem; }
  .ek_startkarte .ek_knopf { font-size: .92rem; padding: .55rem 1rem; }

  .ek_done { margin-top: .5rem; }
  .ek_done_karte { padding: .9rem .8rem 1.1rem; }
  .ek_cloche { width: 84px; }
  .ek_sterne { font-size: 2rem; }
  .ek_modal_inhalt { max-height: 94dvh; }
  .ek_modal_body { padding: .7rem .8rem .8rem; }
  .ek_modal_kopf { padding: .65rem .7rem; }
  .ek_modal_kopf h3 { font-size: 1rem; }
}

/* Sehr schmale Handys: Ecken kleiner, Schrift enger */
@media (max-width: 24rem) {
  .ek_brand h1 { font-size: 1rem; }
  .ek_brand_schild { width: 32px; height: 32px; }
  .ek_header .jupi_nav_back { font-size: .7rem; padding: .28rem .5rem; }
  .ek_header .jupi_sprachen_select { width: 5.6rem; font-size: .68rem; }
  .ek_header .jupi_theme_switch { width: 54px; min-width: 54px; }
  .ek_header .jts_thumb { width: 24px; height: 24px; }
  html[data-theme="dark"] .ek_header .jts_thumb { left: calc(100% - 27px); }
  .ek_stat_icon { display: none; }
  .ek_stat label { font-size: .46rem; }
  .ek_stat_text > span { font-size: .92rem; }
  .ek_feld { flex: 1 1 100%; }
}

/* Kurze Fenster: die Karte bleibt erreichbar, ohne winzig zu werden */
@media (max-height: 45rem) {
  .ek_stage { min-height: 0; }
  .ek_welt { padding: .55rem; gap: .4rem; }
  .ek_rezept { padding-top: .9rem; padding-bottom: .8rem; }
  .ek_rezept::before { height: 10px; }
  .ek_rezept::after { top: 10px; width: 24px; height: 24px; }
  .ek_rezept_inhalt { padding-top: .35rem; }
  .ek_rezept_kopf { margin-bottom: .35rem; padding-bottom: .25rem; }
  .ek_aufgabe { font-size: clamp(1.2rem, 3.5vw, 1.65rem); margin: .15rem 0 0; }
  .ek_input { min-height: 2.3rem; font-size: 1.3rem; }
  .ek_dot { width: 1.6rem; height: 1.16rem; }
  .ek_bubble { padding-top: .25rem; padding-bottom: .25rem; }
  .ek_btns_row { gap: .35rem; }
  .ek_knopf { min-height: 40px; }
  .ek_msg { min-height: 1rem; }
  .ek_cloche { width: 72px; }
  .ek_done p { font-size: .9rem; }
}

/* Wer keine Bewegung möchte, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  .ek_dot_aktuell,
  .ek_stempel,
  .ek_sterne_pop,
  .ek_konfetti i,
  .ek_btn_wrong,
  .ek_input_wrong,
  .ek_koch_avatar { animation: none !important; }
  .ek_knopf, .ek_btn, .ek_rund, .ek_header .jupi_nav_back { transition: none; }
}

/* ---------- 8. Bedienziele: mindestens 40 x 40 px ----------
   STEHT AM ENDE: eine spätere Grundregel aus jupi.css würde sonst gewinnen
   (so wurde es bei anderen Spielen gemessen). */
.ek_header button,
.ek_header a,
.ek_header select,
.ek_panel button,
.ek_panel select,
.ek_btns .ek_btn,
.ek_btns_row .ek_knopf,
.ek_startkarte .ek_knopf,
.ek_done .ek_knopf,
.ek_modal button,
.jupi_footer a {
  min-width: 40px;
  min-height: 40px;
}
.ek_input { min-height: 40px; }