/* ==========================================================================
   Küchenmission - „Gemalte Landhausküche" (Neubau 28.10.2026)

   Die Seite IST die Küche: hinter allem liegt ein gemaltes Küchenbild
   (assets/kulisse.svg), die Leiste ist ein Nussbaum-Brett mit Messingkante,
   Karten sind Rezeptblätter aus Papier, Zutaten und Geräte sind gemalt.

   Aufbau von aussen nach innen:
     1.  Farben und Grundregeln
     2.  Seitenkulisse: EIN gemaltes Küchenbild hinter allem
     3.  Die Küchen-Konsole: JUPI-Leiste als Nussbaum-Brett
     4.  Startseite: das Rezeptblatt, die Wege, die Merkkarten
     5.  Die Welt: Kochkarte, Fortschrittsleiste, Bühne
     6.  Die Räume: Markt, Küche, Tisch (mit gemalten Geräten)
     7.  Steuerung in der Bühne
     8.  Fenster (Dialoge) und Karten
     9.  Dark Mode: die Abendküche
     10. Kleine Fenster und Handy

   Alle Regeln hängen an body.jupi.km_body, damit sie nichts im Paket
   überschreiben, was nicht zu diesem Spiel gehört.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Farben und Grundregeln
   -------------------------------------------------------------------------- */
:root {
  /* Papier und Tinte */
  --km-paper:      #fbf3e1;
  --km-paper-2:    #f2e6cd;
  --km-paper-3:    #e8d8b4;
  --km-ink:        #3d2c1c;
  --km-ink-2:      #6f5942;
  --km-muted:      #8a7359;

  /* Holz */
  --km-wood:       #6b4223;
  --km-wood-light: #9a6c3d;
  --km-wood-dark:  #3b2214;

  /* Metall */
  --km-brass:      #c9a24a;
  --km-brass-lite: #f0d79c;
  --km-copper:     #b9723f;
  --km-copper-lite:#e2a06a;

  /* Signalfarben */
  --km-tomato:     #c0492c;
  --km-green:      #4f7f43;

  /* Schatten */
  --km-shadow:      0 10px 24px rgba(59, 34, 20, .26);
  --km-shadow-deep: 0 18px 44px rgba(59, 34, 20, .42);
  --km-shadow-soft: 0 4px 12px rgba(59, 34, 20, .16);

  /* Kurzformen für die Spielteile (alte Namen bleiben gültig) */
  --ink:   var(--km-ink);
  --muted: var(--km-muted);
  --paper: var(--km-paper);

  /* Pixel-Ebene (Startseite, später die Räume): harte Kanten, wenig Farbe */
  --px-ink:       #2a1a10;
  --px-cream:     #f7e8c9;
  --px-cream-2:   #efd9ae;
  --px-cream-3:   #e6cda0;
  --px-wood:      #8a5a34;
  --px-wood-dark: #5b3620;
  --px-green:     #4f7a46;
  /* Rot für Text: #b8452f lag mit 4,4:1 knapp unter AA - #a83c27 erreicht
     5,2:1 auf Papier und 4,6:1 auf Creme. */
  --px-red:       #a83c27;
  --px-gold:      #e0a94f;
}

*, *::before, *::after { box-sizing: border-box; }

/* Wichtig: `hidden` muss wirklich verschwinden. Ohne diese Regel heben die
   eigenen display-Angaben (grid/flex) das hidden-Attribut auf - dann stehen
   Startseite und Spiel nebeneinander. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.jupi.km_body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--km-ink);
  background-color: #d8c8a6;
}

/* Jeder Knopf und jedes Feld ist mindestens 40 x 40 px gross. */
button, select, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--km-brass);
  outline-offset: 2px;
}

.km_main {
  flex: 1;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: clamp(.7rem, 2vw, 1.2rem) clamp(.6rem, 2vw, 1.4rem) 1.2rem;
}

.km_footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  align-items: center;
  padding: .7rem 1rem;
  font-size: .78rem;
  color: #e8d9bd;
  background: linear-gradient(180deg, rgba(59, 34, 20, .78), rgba(43, 25, 14, .92));
  border-top: 3px solid var(--km-brass);
}
.km_footer a { color: var(--km-brass-lite); }
.km_footer a:hover { color: #fff0cf; }

/* --------------------------------------------------------------------------
   2. Seitenkulisse: EIN gemaltes Küchenbild hinter allem
   Regel 3.13.7: ein Bild, keine wiederholte Kachel. Der Generator
   (.zcode/kuechenmission-kulisse.cjs) baut Tag- und Nachtbild.
   -------------------------------------------------------------------------- */
body.jupi.km_body {
  background-image: url("assets/kulisse.svg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
html[data-theme="dark"] body.jupi.km_body {
  color: #f2e6d0;
  background-color: #17110d;
  background-image: url("assets/kulisse-nacht.svg");
}

/* --------------------------------------------------------------------------
   3. Die Küchen-Konsole: JUPI-Leiste als Nussbaum-Brett
   Drei Zonen: links (Zurück), Mitte (Titel), rechts (Werkzeuge).
   -------------------------------------------------------------------------- */
.km_header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: .4rem clamp(.5rem, 2vw, 1.3rem);
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .14), rgba(0, 0, 0, .30)),
    repeating-linear-gradient(92deg, #6d4425 0 16px, #5b3720 16px 30px, #7a4e2c 30px 46px);
  border-bottom: 3px solid var(--km-brass);
  box-shadow: 0 8px 20px rgba(30, 18, 8, .40);
}

.km_back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem .9rem;
  background: linear-gradient(180deg, #fdf7e8, #ecdfc0);
  color: #4a3520;
  border: 2px solid var(--km-brass);
  border-radius: 999px;
  font-weight: 800;
  font-size: .86rem;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.km_back:hover { background: linear-gradient(180deg, #fffaf0, #f3e7c9); }

.km_brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fdf3dd;
  font-weight: 900;
  letter-spacing: .03em;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.km_brand img {
  width: 42px;
  height: 42px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--km-brass-lite), var(--km-brass));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}

.km_tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.km_language {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 44px;
  padding: .1rem .55rem;
  background: linear-gradient(180deg, #fdf7e8, #ecdfc0);
  border: 2px solid var(--km-brass);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.km_language select {
  min-height: 40px;
  max-width: 7.4rem;
  padding: 0 .2rem;
  border: 0;
  background: transparent;
  color: #4a3520;
  font-weight: 700;
  cursor: pointer;
}

.km_theme {
  position: relative;
  width: 78px;
  height: 46px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--km-brass);
  border-radius: 999px;
  background: linear-gradient(180deg, #f6ecd6, #ddcaa3);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.km_theme .km_sun, .km_theme .km_moon { display: none; }
.km_thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe9ae, #dfa45f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transition: left .2s ease;
  font-size: 1rem;
  line-height: 1;
}
/* Sonne und Mond sitzen im Knopf - so ist der Schalter eindeutig. */
.km_thumb::before { content: "\2600"; color: #7a4a12; }
html[data-theme="dark"] .km_thumb { left: calc(100% - 42px); background: linear-gradient(180deg, #e6ecf7, #9db0c9); }
html[data-theme="dark"] .km_thumb::before { content: "\263D"; color: #2c3c56; }

/* --------------------------------------------------------------------------
   4. Startseite: das Kochbuch-Cover (Pixel-Umbau 28.10.2026)
   Die Startseite ist das Cover des Spiels: links der Text, rechts das
   Porträt der Spielfigur, darunter ein Streifen der Pixel-Küche. Die Figur
   ist wählbar (Köchin/Koch); der Koch ist bis zum eigenen Bild ein
   Platzhalter.
   -------------------------------------------------------------------------- */
.km_start { display: grid; gap: 1rem; }

.km_cover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  background:
    repeating-linear-gradient(0deg, rgba(120, 80, 40, .045) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, var(--px-cream), var(--px-cream-2));
  border: 4px solid var(--px-ink);
  border-radius: 4px;
  box-shadow: 10px 10px 0 rgba(42, 26, 16, .30);
  overflow: hidden;
}
.km_cover_copy {
  display: grid;
  align-content: center;
  gap: .15rem;
  padding: clamp(1.1rem, 3vw, 2.3rem);
}

.km_eyebrow {
  margin: 0 0 .35rem;
  color: var(--px-red);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.km_cover h1 {
  margin: .15rem 0 .7rem;
  font-size: clamp(2rem, 4.7vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--px-ink);
}
.km_cover h1 em { color: var(--px-red); font-style: normal; }

.km_learn {
  margin: .2rem 0 1.1rem;
  padding: .75rem 1rem;
  background: rgba(224, 169, 79, .17);
  border-left: 6px solid var(--px-gold);
  border-radius: 0 3px 3px 0;
  color: #5b4632;
  font-size: .98rem;
}

.km_start_actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: .45rem; }

.km_primary {
  min-height: 52px;
  padding: .7rem 1.35rem;
  border: 3px solid #4a1a10;
  border-radius: 4px;
  /* Der obere Rand war mit #c8543a nur 4,1:1 gegen die Schrift - #bd4a32
     erreicht 4,7:1, der untere Rand 5,9:1. */
  background: linear-gradient(180deg, #bd4a32, #a83c27);
  color: #fff6e2;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 #4a1a10;
}
.km_primary:hover { filter: brightness(1.07); }
.km_primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #4a1a10; }

.km_secondary {
  min-height: 52px;
  padding: .7rem 1.2rem;
  border: 3px solid var(--px-ink);
  border-radius: 4px;
  background: linear-gradient(180deg, #fdf4de, var(--px-cream-2));
  color: #4a2f1e;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(42, 26, 16, .72);
}
.km_secondary:hover { background: linear-gradient(180deg, #fffaf0, #f3e2be); }
.km_secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(42, 26, 16, .72); }

.km_text_button {
  justify-self: start;
  min-height: 44px;
  padding: .35rem .2rem;
  border: 0;
  background: none;
  color: #8a4a26;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.km_text_button:hover { color: var(--px-red); }

/* Das Porträt: gerahmtes Bild der Spielfigur */
.km_portrait {
  margin: 0;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: .55rem;
  padding: clamp(.8rem, 2vw, 1.5rem) clamp(.8rem, 2vw, 1.6rem) 1.1rem;
  border-left: 4px solid var(--px-ink);
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255, 236, 196, .9), rgba(255, 236, 196, 0) 62%),
    linear-gradient(180deg, #e7cb9b, #d6b17c);
}
.km_portrait_frame {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(100%, 340px);
  aspect-ratio: 3 / 4;
  padding: .35rem .35rem 0;
  background:
    radial-gradient(ellipse at 50% 88%, #ffe0ae 0%, #f4c98c 46%, #e2ac69 100%);
  border: 4px solid var(--px-ink);
  border-radius: 3px;
  box-shadow: inset 0 0 0 4px #f7e2b8, 0 8px 0 rgba(42, 26, 16, .32);
  overflow: hidden;
}
.km_portrait_frame img {
  /* Absolut im Rahmen: Die Bilder der Figuren haben leicht verschiedene
     Seitenverhaeltnisse (0,70 und 0,72). Als Raster-Element wuchs der Rahmen
     sonst mit dem Bild mit und der Koch verlor unten die Fuesse. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.km_portrait_frame.is-platzhalter {
  background:
    repeating-conic-gradient(#f0e2c6 0 25%, #f8eed8 0 50%) 0 0 / 26px 26px;
}
.km_portrait_frame.is-platzhalter img#km_figur_platzhalter {
  position: static;
  width: 74%;
  height: auto;
  margin-bottom: 5%;
  image-rendering: pixelated;
}
.km_portrait_name {
  font-weight: 900;
  letter-spacing: .02em;
  color: #4a2f1e;
}

.km_figur_wahl { display: flex; gap: .4rem; }
.km_figur_btn {
  min-height: 40px;
  padding: .3rem .85rem;
  border: 3px solid #6b4223;
  border-radius: 4px;
  background: var(--px-cream);
  color: #4a2f1e;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(42, 26, 16, .45);
}
.km_figur_btn.is-aktiv {
  background: var(--px-wood);
  border-color: var(--px-ink);
  color: #fdf3dd;
}

/* Der Küchenstreifen am Fuß des Covers */
.km_band {
  grid-column: 1 / -1;
  height: clamp(104px, 13vw, 172px);
  border-top: 4px solid var(--px-ink);
  background:
    linear-gradient(180deg, rgba(42, 26, 16, .22), rgba(42, 26, 16, 0) 34%),
    url("assets/pixel/kueche-band.webp") center bottom / cover no-repeat,
    #e6cda0;
  image-rendering: pixelated;
}

/* Die drei Merkkarten */
.km_feature_row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  align-items: stretch;
}
.km_feature_row article {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem .9rem;
  background: var(--px-cream);
  border: 3px solid var(--px-ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 rgba(42, 26, 16, .26);
}
.km_feature_row b { display: block; font-size: .95rem; }
.km_feature_row small { display: block; color: #7a6144; font-size: .78rem; }
.km_feature_pic {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  object-fit: contain;
  image-rendering: pixelated;
}

.km_help_link {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  padding: .4rem .95rem;
  border: 3px dashed #8a5a34;
  border-radius: 4px;
  background: rgba(247, 232, 201, .92);
  color: #5b3620;
  font-weight: 800;
  cursor: pointer;
}
.km_help_link:hover { background: #fff4dc; }

.km_continue {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  padding: .8rem 1rem;
  background: var(--px-cream);
  border: 3px dashed #a8814f;
  border-radius: 4px;
  color: #5b3620;
  box-shadow: 6px 6px 0 rgba(42, 26, 16, .22);
}

/* --------------------------------------------------------------------------
   5. Die Welt: Kochkarte, Fortschrittsleiste, Bühne
   -------------------------------------------------------------------------- */
.km_world { display: grid; gap: .85rem; }

.km_world_top {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  background: linear-gradient(180deg, var(--km-paper), var(--km-paper-2));
  border: 1px solid #dcc79b;
  border-radius: 16px;
  box-shadow: var(--km-shadow);
}
.km_world_top h1 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  line-height: 1.15;
}
.km_world_actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Das Budget als Kassenzettel */
.km_budget {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .3rem .85rem;
  background: #fdf6e3;
  color: var(--km-ink);
  border: 2px dashed var(--km-ink-2);
  border-radius: 6px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.km_round_button {
  min-width: 48px;
  min-height: 48px;
  padding: .4rem .85rem;
  border: 2px solid var(--km-brass);
  border-radius: 999px;
  background: linear-gradient(180deg, #fdf7e8, #e2d1ab);
  color: #4a3520;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(59, 34, 20, .30);
}
.km_round_button:hover { background: linear-gradient(180deg, #fffaf0, #ecdfc0); }

/* Die Fortschrittsleiste: Holzplättchen mit den Kochschritten */
.km_progress {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .15rem .1rem .35rem;
  scrollbar-width: thin;
}
.km_progress > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .3rem .85rem;
  background: linear-gradient(180deg, #7b4d2b, #54321b);
  color: #f3e4c4;
  border: 2px solid #3b2214;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(30, 18, 8, .35);
}
.km_progress > span b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(253, 247, 232, .9);
  color: #4a3520;
  font-size: .72rem;
}
.km_progress > span.active {
  background: linear-gradient(180deg, var(--km-copper-lite), var(--km-copper));
  color: #fff6e8;
  border-color: #7d451f;
}
.km_progress > span.done { background: linear-gradient(180deg, #6f9c5c, #4f7f43); border-color: #33582c; color: #f2fbe9; }

/* Kleines Etikett in den Karten (z. B. „2 Portionen") */
.km_pill {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: rgba(201, 162, 74, .22);
  color: #6b4223;
  font-size: .66rem;
  font-weight: 800;
}

/* Die Bühne: ein Rahmen aus Holz, darin der Raum */
.km_scene {
  position: relative;
  height: min(64vh, 620px);
  min-height: 400px;
  overflow: hidden;
  isolation: isolate;
  border: 9px solid var(--km-wood-dark);
  border-radius: 24px;
  background: #d7c6a4;
  box-shadow: 0 0 0 2px rgba(201, 162, 74, .55), var(--km-shadow-deep);
}
.km_scene_sky {
  position: absolute;
  inset: 0 0 29%;
  z-index: -3;
  background: linear-gradient(180deg, #efe0c2, #dcc79f);
}
.km_scene[data-location="market"] .km_scene_sky {
  /* Markthalle: Tapete mit feinen Streifen und einem Holzriegel oben */
  background:
    repeating-linear-gradient(90deg, rgba(160, 124, 82, .16) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #f0e2c6 0 82%, #c9a271 83% 100%);
}
.km_scene[data-location="market"] .km_scene_sky::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  height: 16px;
  background: linear-gradient(180deg, #a97a4e, #7c5533);
  box-shadow: 0 6px 10px rgba(60, 40, 20, .28);
}
.km_scene[data-location="kitchen"] .km_scene_sky {
  background:
    repeating-linear-gradient(0deg, rgba(120, 96, 60, .26) 0 2px, transparent 2px 56px),
    repeating-linear-gradient(90deg, rgba(120, 96, 60, .26) 0 2px, transparent 2px 56px),
    linear-gradient(180deg, #f8f3e5, #ece3cd);
}
/* Ein Wandbrett mit zwei Tellern fuellt die Kuechenwand */
.km_scene[data-location="kitchen"] .km_scene_sky::before {
  content: "";
  position: absolute;
  left: 59%;
  top: 17%;
  width: 14%;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(180deg, #a97a4e, #7c5533);
  box-shadow: 0 6px 12px rgba(60, 40, 20, .32);
}
.km_scene[data-location="kitchen"] .km_scene_sky::after {
  content: "";
  position: absolute;
  left: 61.5%;
  top: 5%;
  width: 62px;
  height: 48px;
  border-radius: 50%;
  background: #fdfaf0;
  border: 5px solid #ded6c4;
  box-shadow: 0 6px 10px rgba(60, 40, 20, .28);
}
/* Die Hängelampe über dem Tisch */
.km_scene[data-location="table"] .km_scene_sky::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 78px;
  transform: translateX(-50%);
  background: #4a3520;
}
.km_scene[data-location="table"] .km_scene_sky::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 72px;
  width: 96px;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 48px 48px 10px 10px;
  background: linear-gradient(180deg, #e2a06a, #b9723f);
  box-shadow: 0 12px 36px rgba(255, 205, 130, .45);
  border-bottom: 6px solid #8a4d24;
}
/* Der Lichtschein unter der Lampe */
.km_scene[data-location="table"] .km_scene_sky {
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255, 220, 150, .40), rgba(255, 220, 150, 0) 46%),
    linear-gradient(180deg, #f3e3c5 0 72%, #c08f5f 73% 100%);
}

/* Das Fenster über der Arbeitsplatte */
.km_window_view {
  position: absolute;
  right: 5%;
  top: 8%;
  width: 20%;
  height: 27%;
  overflow: hidden;
  border: 9px solid var(--km-wood);
  border-radius: 6px;
  background: linear-gradient(180deg, #bcd9de 0 58%, #8aa06a 59%);
  box-shadow: 0 7px 13px rgba(60, 40, 20, .35), inset 0 0 0 3px #ffeccd;
}
.km_window_view::before {
  content: "";
  position: absolute;
  left: 49%;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--km-wood);
}
.km_window_view::after {
  content: "";
  position: absolute;
  top: 51%;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--km-wood);
}
.km_window_view span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(170deg, #7d9b62, #56764b);
}
.km_window_view i {
  position: absolute;
  right: 16%;
  top: 9%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f6ce69;
  box-shadow: 0 0 0 7px rgba(246, 206, 105, .2);
}

/* Das Schild an der Wand */
.km_scene_sign {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: .45rem 1.3rem;
  background: linear-gradient(180deg, #55402a, #33220f);
  color: #f4e2bb;
  border: 2px solid var(--km-brass);
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .38);
}
.km_scene[data-location="kitchen"] .km_scene_sign {
  background: linear-gradient(180deg, #fdfaf1, #eadfc6);
  color: #2f5d4e;
  border-color: #2f5d4e;
}
.km_scene[data-location="table"] .km_scene_sign {
  background: linear-gradient(180deg, #3a2c1c, #241708);
  color: #f0d79c;
}

/* Der Boden. Er bleibt innerhalb der Bühne (kein Überstand am Fenster). */
.km_scene_floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30%;
  height: 70%;
  z-index: -1;
  transform: perspective(620px) rotateX(13deg);
  background:
    repeating-linear-gradient(90deg, rgba(90, 60, 30, .30) 0 3px, transparent 3px 116px),
    linear-gradient(180deg, #c79a67, #9b7449);
  border-top: 11px solid #7a5330;
  box-shadow: 0 -6px 16px rgba(90, 60, 30, .25);
}
.km_floor_grid { position: absolute; inset: 0; }
/* Der Markt hat ein Schachbrett aus Bodenfliesen */
.km_scene[data-location="market"] .km_scene_floor {
  background: conic-gradient(#e7dbbf 0 25%, #cdb995 0 50%, #e7dbbf 0 75%, #cdb995 0) 0 0 / 84px 84px;
  border-top-color: #8a6440;
}
.km_scene[data-location="market"] .km_scene_floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(90, 60, 30, .22), transparent 40%);
}

/* --------------------------------------------------------------------------
   6. Die Räume (Markt, Küche, Tisch) mit gemalten Geräten
   Die Geräte sind eigene Bilder aus .zcode/kuechenmission-kulisse.cjs.
   -------------------------------------------------------------------------- */
.km_scene_shelves { position: absolute; inset: 0 0 18%; z-index: 0; }
/* Die Requisiten-Ebene liegt ueber den Regalen. Sie darf deshalb keine
   Klicks auffangen - sonst waere im Supermarkt kein Regal anklickbar.
   Nur die echten Geraete (Buttons) nehmen Klicks an. */
.km_scene_props { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.km_scene_props button { pointer-events: auto; }

/* --- Markt --- */
.km_market_aisle {
  position: absolute;
  top: 27%;
  height: 41%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-warenregal.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(5px 9px 7px rgba(60, 40, 20, .35));
}
.km_market_aisle span {
  position: absolute;
  z-index: 2;
  top: -26px;
  left: -6%;
  right: -6%;
  padding: .25rem .2rem;
  background: linear-gradient(180deg, #fdf7e8, #ecdfc0);
  color: #4a3520;
  border: 1px solid #c9b48a;
  border-radius: 6px;
  font-size: .64rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
}
.km_market_aisle small {
  position: absolute;
  z-index: 2;
  bottom: .35rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #f6e6c4;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.km_market_aisle:hover, .km_market_aisle:focus-visible { filter: brightness(1.07) drop-shadow(0 0 10px rgba(240, 215, 156, .9)); }
.km_market_aisle.near { outline: 4px solid var(--km-brass-lite); outline-offset: 3px; border-radius: 10px; }

.km_market_checkout {
  position: absolute;
  right: 6%;
  bottom: 17%;
  width: 20%;
  height: 21%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-kasse.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(6px 9px 7px rgba(60, 40, 20, .35));
}
.km_market_checkout::after {
  content: "KASSA";
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  padding: .1rem .6rem;
  background: linear-gradient(180deg, #fdf7e8, #ecdfc0);
  color: #4a3520;
  border: 1px solid #c9b48a;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.km_market_checkout:hover, .km_market_checkout:focus-visible { filter: brightness(1.07) drop-shadow(0 0 10px rgba(240, 215, 156, .9)); }

.km_market_promo {
  position: absolute;
  left: 4%;
  top: 8%;
  z-index: 1;
  padding: .5rem .7rem;
  background: linear-gradient(180deg, #fdf3dd, #efdfba);
  color: #8a3a22;
  border: 3px solid var(--km-tomato);
  border-radius: 8px;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .32);
}
.km_market_promo b { display: block; font-size: .78rem; letter-spacing: 0; color: var(--km-green); }

/* --- Küche --- */
/* Die Arbeitsfläche läuft an der Wand entlang. Auf ihr stehen Spüle und Herd,
   links der Kühlschrank, rechts der Backofen, davor die Kochinsel. */
.km_counter {
  position: absolute;
  left: 19%;
  width: 52%;
  bottom: 33%;
  height: 13%;
  background: linear-gradient(180deg, #c08f5f 0 20%, #8a5c33 21% 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -3px 0 rgba(59, 34, 20, .35), 0 12px 16px rgba(60, 40, 20, .22);
  z-index: 0;
}
.km_fridge {
  position: absolute;
  left: 3%;
  bottom: 38%;
  width: 14%;
  height: 42%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-kuehlschrank.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(6px 10px 8px rgba(50, 30, 15, .38));
}
.km_sink {
  position: absolute;
  left: 23%;
  bottom: 46%;
  width: 15%;
  height: 12%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-spuele.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(4px 7px 5px rgba(50, 30, 15, .30));
}
.km_kitchen_island {
  position: absolute;
  left: 30%;
  bottom: 24%;
  width: 27%;
  height: 19%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-arbeitsflaeche.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(6px 9px 7px rgba(50, 30, 15, .32));
}
.km_stove {
  position: absolute;
  left: 44%;
  bottom: 46%;
  width: 19%;
  height: 15%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-herd.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(4px 7px 5px rgba(50, 30, 15, .30));
}
.km_oven {
  position: absolute;
  left: 66%;
  bottom: 38%;
  width: 12%;
  height: 34%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-backofen.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(5px 8px 6px rgba(50, 30, 15, .32));
}
/* Der Hängeschrank an der Wand */
.km_cabinet {
  position: absolute;
  left: 22%;
  top: 7%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18%;
  height: 11%;
  padding: 0 .4rem;
  background: linear-gradient(180deg, #c08f5f 0 22%, #8a5c33 23% 100%);
  border: 3px solid #5c3820;
  border-bottom-width: 7px;
  border-radius: 5px;
  color: #f6e6c4;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 8px 12px rgba(50, 35, 20, .35);
}
/* Zwei Schranktüren mit Griffen */
.km_cabinet::after {
  content: "";
  position: absolute;
  inset: 14% 6% 22%;
  background: linear-gradient(90deg, transparent 48%, #5c3820 48% 52%, transparent 52%);
  border-radius: 3px;
  opacity: .55;
}
.km_fridge:hover, .km_sink:hover, .km_kitchen_island:hover, .km_stove:hover, .km_oven:hover,
.km_fridge:focus-visible, .km_sink:focus-visible, .km_kitchen_island:focus-visible,
.km_stove:focus-visible, .km_oven:focus-visible {
  filter: brightness(1.07) drop-shadow(0 0 11px rgba(240, 215, 156, .95));
}

/* --- Tisch --- */
.km_table {
  position: absolute;
  right: 3%;
  bottom: 20%;
  width: 25%;
  height: 18%;
  padding: 0;
  border: 0;
  background: url("assets/geraet-esstisch.svg") no-repeat center bottom / contain;
  cursor: pointer;
  filter: drop-shadow(6px 9px 7px rgba(50, 30, 15, .35));
}
.km_scene[data-location="table"] .km_table { right: 32%; bottom: 29%; width: 40%; height: 27%; cursor: default; }
.km_table_places {
  position: absolute;
  inset: -18% 6%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.km_table_places i {
  width: 30px;
  height: 22px;
  background: #fdf9e8;
  border: 3px solid #b9c2bd;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(60, 40, 20, .30);
}
.km_scene[data-location="table"] .km_table_places i { width: 40px; height: 29px; }
/* Die Stuehle: Seitenansicht aus einem Stueck (Lehne, Sitz, Bein) */
.km_dining_chair {
  position: absolute;
  bottom: 20%;
  width: 12%;
  height: 21%;
  background: linear-gradient(90deg, #8c6242, #bd8a60 42%, #7a583e);
  clip-path: polygon(4% 0, 28% 0, 28% 66%, 100% 66%, 100% 80%, 90% 80%, 90% 100%, 78% 100%, 78% 80%, 24% 80%, 24% 100%, 12% 100%, 12% 80%, 4% 80%);
  filter: drop-shadow(4px 7px 6px rgba(50, 35, 20, .35));
}
.chair_a { left: 20%; }
.chair_b { right: 19%; }
.km_serve_spot {
  position: absolute;
  left: 42%;
  bottom: 12%;
  width: 18%;
  min-height: 40px;
  padding: .2rem .4rem;
  border: 2px dashed var(--km-brass);
  border-radius: 12px;
  background: rgba(79, 127, 67, .92);
  color: #f4ffe9;
  font-weight: 900;
  font-size: .8rem;
  cursor: pointer;
  box-shadow: 0 5px 9px rgba(50, 35, 20, .4);
}
.km_guest {
  position: absolute;
  bottom: 26%;
  width: 58px;
  height: 95px;
  border-radius: 28px 28px 10px 10px;
  background: linear-gradient(90deg, #9c7091, #d6a7b8 47%, #8d617f);
  box-shadow: 4px 6px 9px rgba(50, 35, 20, .38);
  z-index: 2;
}
.km_guest::before {
  content: "";
  position: absolute;
  width: 39px;
  height: 40px;
  left: 10px;
  top: -28px;
  border-radius: 50%;
  background: #d7ac8e;
  box-shadow: inset 0 -5px #ba876e;
}
.km_guest i {
  position: absolute;
  left: 12px;
  top: -30px;
  width: 35px;
  height: 18px;
  border-radius: 50% 50% 0 0;
  background: #4f3b35;
}
.guest_one { left: 18%; background: linear-gradient(90deg, #547ca1, #86b4c8 45%, #486b91); }
.guest_two { right: 17%; bottom: 31%; background: linear-gradient(90deg, #b1784d, #e5ac6a 46%, #a56b43); }
.guest_three { left: 29%; bottom: 38%; background: linear-gradient(90deg, #618953, #9cbe77 47%, #547845); transform: scale(.86); }

/* Der Einkaufswagen */
.km_cart_art {
  position: absolute;
  z-index: 2;
  left: 14%;
  bottom: 18%;
  width: 72px;
  height: 64px;
  background: url("assets/geraet-einkaufswagen.svg") no-repeat center bottom / contain;
  filter: drop-shadow(4px 5px 3px rgba(50, 35, 20, .45));
  pointer-events: none;
  transition: left .22s, bottom .22s;
}

/* Der Koch (Spieler) */
.km_player {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 20%;
  width: 62px;
  height: 108px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  transition: left .22s, bottom .22s;
  /* Der Koch darf keine Klicks auffangen: auf dem Handy steht er sonst
     genau vor dem Regal und verdeckt es mit der Maus. */
  pointer-events: none;
}
.km_player_shadow {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 56px;
  height: 17px;
  border-radius: 50%;
  background: rgba(59, 34, 20, .30);
}
.km_player_body {
  position: absolute;
  left: 10px;
  bottom: 12px;
  width: 41px;
  height: 73px;
  border-radius: 19px 19px 10px 10px;
  background: linear-gradient(90deg, #ded7c6, #fbf7ec 42%, #d3cbb8);
  box-shadow: inset -8px 0 rgba(160, 150, 130, .55);
}
.km_player_body::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -25px;
  width: 29px;
  height: 30px;
  border-radius: 50%;
  background: #e5b98f;
  box-shadow: inset -4px -2px #bb8866;
}
.km_player_body::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 7px;
  width: 23px;
  height: 9px;
  border-radius: 5px;
  background: var(--km-tomato);
}
.km_player_body i, .km_player_body b {
  position: absolute;
  bottom: -10px;
  width: 13px;
  height: 25px;
  border-radius: 7px;
  background: #6b5843;
}
.km_player_body i { left: 4px; }
.km_player_body b { right: 4px; }
.km_player_label {
  position: absolute;
  bottom: -19px;
  left: 20px;
  padding: 0 .3rem;
  color: #4a3520;
  font-size: .62rem;
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   7. Steuerung in der Bühne
   -------------------------------------------------------------------------- */
.km_scene_controls {
  position: absolute;
  z-index: 5;
  left: 14px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: .55rem;
}
.km_nearby {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: .35rem .85rem;
  background: rgba(253, 247, 232, .94);
  color: #4a3520;
  border: 1px solid #d9c39c;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: var(--km-shadow-soft);
}
.km_dpad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(2, 46px);
  gap: 4px;
}
.km_dpad button {
  width: 46px;
  height: 46px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--km-brass);
  border-radius: 12px;
  background: linear-gradient(180deg, #fdf7e8, #e2d1ab);
  color: #4a3520;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(59, 34, 20, .35);
}
.km_dpad button:hover { background: linear-gradient(180deg, #fffaf0, #ecdfc0); }
.km_dpad button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(59, 34, 20, .35); }
.km_dpad [data-move="up"]    { grid-area: 1 / 2; }
.km_dpad [data-move="left"]  { grid-area: 2 / 1; }
.km_dpad [data-move="down"]  { grid-area: 2 / 2; }
.km_dpad [data-move="right"] { grid-area: 2 / 3; }

.km_interact {
  min-height: 48px;
  padding: .55rem 1.1rem;
  border: 2px solid #7d451f;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--km-copper-lite), var(--km-copper));
  color: #fff6e8;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #7d451f;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.km_interact.show { opacity: 1; pointer-events: auto; }
.km_interact:active { transform: translateY(2px); box-shadow: 0 2px 0 #7d451f; }

.km_world_footer {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .9rem;
  background: rgba(253, 247, 232, .88);
  border: 1px solid #d9c39c;
  border-radius: 12px;
  color: #5c3a1e;
  font-size: .86rem;
}
/* Der kleine Knopf in der Fußzeile der Welt („Zur Übersicht“). Er lag beim
   Umbau der Startseite kurz ohne Regel da - deshalb steht er hier. */
.km_link_button {
  min-height: 44px;
  padding: .35rem .8rem;
  border: 3px solid var(--px-ink);
  border-radius: 4px;
  background: linear-gradient(180deg, #fdf4de, var(--px-cream-2));
  color: #4a2f1e;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(42, 26, 16, .55);
}
.km_link_button:hover { background: #fff6e2; }
.km_link_button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(42, 26, 16, .55); }
.km_hint_box {
  padding: .5rem .8rem;
  background: rgba(201, 162, 74, .18);
  border-left: 4px solid var(--km-brass);
  border-radius: 0 10px 10px 0;
}

/* Pause */
.km_scene.paused::after {
  content: "PAUSE · Deine Kochzeiten warten";
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(43, 25, 14, .78);
  color: #f7ecd6;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .04em;
  backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
   8. Fenster (Dialoge) und Karten
   -------------------------------------------------------------------------- */
.km_dialog {
  width: min(760px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--km-paper), var(--km-paper-2));
  color: var(--km-ink);
  box-shadow: 0 0 0 9px var(--km-wood-dark), 0 0 0 12px var(--km-brass), var(--km-shadow-deep);
}
.km_dialog::backdrop { background: rgba(40, 24, 12, .62); backdrop-filter: blur(2px); }
.km_help_dialog { width: min(660px, calc(100vw - 24px)); }
.km_mode_card .km_mode_pic {
  display: grid;
  place-items: center;
  height: 72px;
  margin-bottom: .45rem;
  font-size: 2.5rem;
  background: linear-gradient(180deg, #fffdf6, #f1e6cd);
  border-bottom: 1px solid #dcc9a2;
}
.km_dish_result {
  padding: 1.2rem;
  text-align: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #fbefd9, #f1dfbf);
  border: 1px solid #dcc9a2;
}
.km_dish_result h3 { margin: .3rem 0 .2rem; }
.km_dialog_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem .7rem;
  border-bottom: 2px solid var(--km-tomato);
  background: linear-gradient(180deg, rgba(201, 162, 74, .20), transparent);
}
.km_dialog_head h2 { margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.15; }
.km_dialog_body {
  padding: 1rem 1.1rem;
  max-height: 62vh;
  overflow: auto;
}
.km_dialog_foot {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: flex-end;
  padding: .75rem 1.1rem 1rem;
  border-top: 1px solid #dcc9a2;
}
.km_close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--km-brass);
  border-radius: 50%;
  background: linear-gradient(180deg, #fdf7e8, #e2d1ab);
  color: #4a3520;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.km_close:hover { background: linear-gradient(180deg, #fffaf0, #ecdfc0); }

/* Karte, Liste, Raster */
.km_recipe_grid, .km_product_grid, .km_mode_grid, .km_serving_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem;
}
.km_mode_grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.km_recipe_card, .km_product, .km_mode_card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  background: #fdf8ec;
  color: var(--km-ink);
  border: 1px solid #dcc9a2;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(80, 55, 30, .16);
  cursor: pointer;
  overflow: hidden;
}
.km_recipe_card:hover, .km_product:hover, .km_mode_card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(80, 55, 30, .24);
  border-color: var(--km-brass);
}
.km_recipe_card b, .km_product b, .km_mode_card b { display: block; margin-bottom: .2rem; }
.km_recipe_card small, .km_product small, .km_mode_card small { color: var(--km-muted); font-size: .76rem; }
.km_recipe_visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 108px;
  margin-bottom: .5rem;
  overflow: hidden;
  background: linear-gradient(145deg, #f7dfb5, #f9efda);
  border-bottom: 1px solid #dcc9a2;
}
.km_recipe_card .km_recipe_info { padding: 0 .7rem .7rem; display: flex; flex-direction: column; flex: 1; }
.km_recipe_card .km_recipe_info h3 { font-size: .95rem; line-height: 1.25; }
.km_recipe_card .km_recipe_info button {
  margin-top: auto;
  min-height: 44px;
  padding: .4rem .7rem;
  border: 2px solid #c9b48a;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdf7e8, #e6d6b0);
  color: #4a3520;
  font-weight: 800;
  cursor: pointer;
}
.km_recipe_card .km_recipe_info button:hover { background: linear-gradient(180deg, #fffaf0, #ecdfc0); }
.km_recipe_meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.km_product_pack {
  position: relative;
  display: grid;
  place-items: center;
  height: 110px;
  padding: .5rem;
  background: linear-gradient(135deg, #efe5d2, #faf5e8);
  border-bottom: 1px solid #dcc9a2;
}
.km_product_details { padding: .55rem .65rem .65rem; }
.km_product_details h3 { margin: 0 0 .2rem; font-size: .82rem; }
.km_product_details small { display: block; color: var(--km-muted); font-size: .7rem; line-height: 1.45; }
.km_product_details button {
  width: 100%;
  min-height: 44px;
  margin-top: .45rem;
  border: 2px solid #9db892;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef4e4, #dfead2);
  color: #356244;
  font-weight: 800;
  cursor: pointer;
}
.km_product_details button:hover { background: linear-gradient(180deg, #f5faef, #e6efda); }

/* Die Ware auf dem Regal: eine Tüte mit Farbband.
   Das Band ist Hintergrund (kein Pseudo-Element) - sonst liegt es als
   positioniertes Element ueber der Waren-Grafik. */
.km_package {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  min-width: 92px;
  max-width: 132px;
  height: 108px;
  padding: 22px 8px 7px;
  background: linear-gradient(to bottom, var(--pack-color, #77a768) 0 18px, #fff 18px);
  border: 1px solid #d8d3c7;
  border-radius: 9px 9px 12px 12px;
  box-shadow: 0 5px 9px rgba(0, 0, 0, .13), inset 0 5px rgba(255, 255, 255, .55);
  transform: rotate(-2deg);
}
.km_package strong { position: relative; margin-top: 4px; color: #2e4737; font-size: .65rem; }
.km_package small { color: #748172; font-size: .53rem; }
.km_package.discount { background: linear-gradient(to bottom, #da4c39 0 18px, #fff1a9 18px); border-color: #e2bb36; }
.km_package.brand { background: linear-gradient(to bottom, #db7b45 0 18px, #f9eddd 18px); }
.km_package_art { width: 52px; height: 46px; }

/* Der Teller hinter der Speise */
.km_food_plate {
  position: absolute;
  width: 114px;
  height: 85px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 50%;
  background: radial-gradient(ellipse, #fffdfa 0 51%, #e8e4d7 54% 66%, #fff 68% 78%, #c8bcaa 80%);
  box-shadow: 0 9px 13px rgba(98, 74, 50, .25);
}
.km_food_plate::before {
  content: "";
  position: absolute;
  inset: 25% 24%;
  border-radius: 50%;
  background: var(--food-color, #d77846);
  box-shadow: inset 0 -5px #964b34;
}
.km_food_plate::after {
  content: "";
  position: absolute;
  inset: 35% 33%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 30%, #eabe67 0 4px, transparent 5px),
    radial-gradient(circle at 67% 62%, #ebd080 0 4px, transparent 5px),
    radial-gradient(circle at 52% 27%, #65a66a 0 4px, transparent 5px);
}
.km_recipe_card:nth-child(4n) .km_food_plate::before { background: #d6a446; }
.km_recipe_card:nth-child(4n+1) .km_food_plate::before { background: #67a16a; }

/* Das Gemüse auf dem Brett */
.km_cut_food {
  position: absolute;
  left: 42%;
  top: 56%;
  width: 70px;
  height: 56px;
  border-radius: 48%;
  background:
    radial-gradient(circle, #e68655 0 10px, transparent 11px),
    radial-gradient(circle at 70% 62%, #df8351 0 12px, transparent 13px),
    radial-gradient(circle at 40% 72%, #eeac5c 0 11px, transparent 12px);
  filter: drop-shadow(0 3px 2px rgba(79, 56, 42, .30));
}
.km_knife {
  position: relative;
  display: block;
  width: 96px;
  height: 16px;
  margin: .6rem auto 0;
  border-radius: 8px 3px 3px 8px;
  background: linear-gradient(180deg, #e7ecea, #9aa5a0);
  box-shadow: 0 4px 8px rgba(60, 40, 20, .3);
}
.km_knife::after {
  content: "";
  position: absolute;
  right: -26px;
  top: 1px;
  width: 30px;
  height: 14px;
  border-radius: 3px;
  background: var(--km-wood);
}
.km_step_meter {
  height: 11px;
  border-radius: 99px;
  background: #e8e3d8;
  overflow: hidden;
}
.km_step_meter span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #77a55b, #eab65b);
  transition: width .35s;
}
/* Der Preis steht auf einem Kassenzettel-Streifen */
.km_product_price {
  display: block;
  margin-top: .4rem;
  padding: .3rem .5rem;
  background: #fdf6e3;
  color: var(--km-ink);
  border: 1px dashed #c2a97c;
  border-radius: 8px;
  line-height: 1.35;
}
.km_product_price b { display: block; font-size: .95rem; }
.km_product_price small { display: block; color: var(--km-muted); font-size: .68rem; }
/* Die Aktionsmarke klebt oben rechts auf der Ware */
.km_product_offer {
  position: absolute;
  top: .4rem;
  right: .4rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--km-tomato);
  color: #fff3e6;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.km_qty { display: inline-flex; gap: .3rem; align-items: center; margin-top: .45rem; }
.km_qty button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--km-wood);
  border-radius: 10px;
  background: linear-gradient(180deg, #fdf7e8, #e6d6b0);
  color: #4a3520;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
}
.km_shelf_top, .km_shelf_group { margin-bottom: .8rem; }
.km_shelf_group h3 { margin: .2rem 0 .5rem; font-size: 1rem; }
.km_filter {
  min-height: 40px;
  padding: .3rem .8rem;
  margin: 0 .3rem .5rem 0;
  border: 2px solid #c9b48a;
  border-radius: 999px;
  background: #fdf8ec;
  color: #4a3520;
  font-weight: 800;
  cursor: pointer;
}
.km_filter.active { background: var(--km-wood); color: #fdf3dd; border-color: var(--km-wood-dark); }
.km_picker_hint { margin: 0 0 .8rem; color: var(--km-muted); }

/* Einkaufswagen und Kasse */
.km_cart_list { display: grid; gap: .45rem; margin-bottom: .8rem; }
.km_cart_row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  background: #fdf8ec;
  border: 1px solid #dcc9a2;
  border-radius: 10px;
}
.km_cart_row b { flex: 1; }
.km_cart_total, .km_register_sum {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .8rem;
  background: #fdf6e3;
  border: 2px dashed var(--km-ink-2);
  border-radius: 8px;
  font-weight: 900;
}
.km_register_summary { display: grid; gap: .5rem; margin-bottom: .8rem; }
.km_empty { color: var(--km-muted); font-style: italic; }

/* Kochen: Station, Werkzeuge, Arbeitsschritte */
.km_station_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.km_workbench {
  padding: .8rem;
  background: linear-gradient(180deg, #efe3c6, #dcc79f);
  border: 2px solid var(--km-wood);
  border-radius: 14px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35);
}
.km_workbench h3 { margin: 0 0 .5rem; font-size: .82rem; letter-spacing: .1em; color: #6b4223; }
.km_board { min-height: 74px; border-radius: 10px; background: linear-gradient(180deg, #a97a4c, #8a5c33); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .18); }
.km_workbench.stage_oven { background: linear-gradient(180deg, #e7ddc9, #b58554); }
.km_workbench.stage_stove { background: radial-gradient(ellipse at 30% 65%, #4c5550 0 20%, transparent 21%), radial-gradient(ellipse at 68% 65%, #4c5550 0 20%, transparent 21%), #f2e7d4; }
.km_tool_row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.km_tool_button {
  min-height: 44px;
  padding: .35rem .8rem;
  border: 2px solid #c9b48a;
  border-radius: 10px;
  background: #fdf8ec;
  color: #4a3520;
  font-weight: 800;
  cursor: pointer;
}
.km_tool_button.active { background: var(--km-copper); border-color: #7d451f; color: #fff6e8; }
.km_process_stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, .48fr);
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  background: #f4ead8;
}
.km_process_food { width: 100%; max-width: 130px; justify-self: center; }
.km_process_ingredients, .km_process_ingredient, .km_free_ingredients, .km_free_ingredient { min-width: 0; }
.km_process_ingredients { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.km_process_ingredient {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 1px;
  width: 66px;
  height: 68px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: 0 2px 5px rgba(75, 56, 44, .10);
  cursor: pointer;
}
.km_process_ingredient .km_food_art { width: 40px; max-width: 40px; margin: 0 auto; }
.km_process_ingredient small { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; color: var(--km-muted); }
.km_process_ingredient.selected { border-color: var(--km-green); background: #e9f4df; box-shadow: 0 0 0 2px rgba(79, 127, 67, .25); }
.km_free_cooking > p:first-child { margin-top: 0; }
.km_free_selected { padding: 9px 11px; border-radius: 12px; background: #eaf3e5; margin: 10px 0; }
.km_free_methods { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.km_free_method {
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid #c7d3c4;
  border-radius: 12px;
  background: #fffdf7;
  color: var(--km-ink);
  font-weight: 800;
  cursor: pointer;
}
.km_free_method.active { background: var(--km-green); color: #fff; border-color: var(--km-green); }
.km_free_ingredients { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: 42vh; overflow: auto; padding: 5px; gap: 4px; }
.km_free_ingredient {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 78px;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #f8f1e4;
  color: var(--km-ink);
  cursor: pointer;
}
.km_free_ingredient .km_food_art { width: 48px; max-width: 48px; }
.km_free_ingredient b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.km_free_ingredient small { color: var(--km-muted); font-size: .58rem; }
.km_free_ingredient.selected { border-color: var(--km-green); background: #e9f4df; box-shadow: 0 0 0 2px rgba(79, 127, 67, .25); }
.km_step_meter, .km_step_count { color: var(--km-muted); font-size: .82rem; font-weight: 700; }
.km_step_panel { margin: .5rem 0; }
.km_temperature { display: inline-block; padding: .1rem .6rem; background: var(--km-tomato); color: #fff3e6; border-radius: 999px; font-weight: 900; font-size: .8rem; }
.km_knife { display: inline-block; }

/* Rezept, Zutaten, Tellung */
.km_recipe_detail { display: grid; gap: .8rem; }
.km_recipe_detail_art { max-width: 230px; margin: 0 auto 12px; }
.km_recipe_info { display: grid; gap: .5rem; }
.km_recipe_meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.km_ingredient_list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.km_ingredient_list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px; border-radius: 12px; background: #f4ead8; font-size: .9rem; }
.km_ingredient_thumb { width: 42px; flex: 0 0 42px; }
.km_food_art, .km_dish_art { display: block; width: 100%; height: auto; overflow: visible; flex: none; }
.km_food_art { max-width: 78px; margin: 0 auto; }
.km_dish_art { max-width: 280px; margin: 0 auto; }
.km_package_art { display: block; width: 48px; height: 44px; margin: 0 auto 3px; overflow: visible; }
.km_step_dish { width: min(180px, 48%); margin: 2px auto 8px; }
.km_dish_result { text-align: center; }
.km_dish_result h3 { margin: .3rem 0 .2rem; }
.km_scenario_form { display: grid; gap: .8rem; }
.km_field { display: grid; gap: .25rem; font-weight: 800; font-size: .88rem; }
.km_field select, .km_field input {
  min-height: 44px;
  padding: .4rem .6rem;
  border: 2px solid #c9b48a;
  border-radius: 10px;
  background: #fdf8ec;
  color: var(--km-ink);
}

/* Tisch decken und Auswertung */
.km_table_preview {
  position: relative;
  min-height: 230px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #f3e5d1 0 64%, #ceb494 65%);
}
.km_table_preview::before {
  content: "";
  width: 75%;
  height: 53%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d2ac71 0 72%, #946640 73% 82%, #fff3da 84%);
  box-shadow: 0 13px 13px rgba(70, 50, 30, .35);
}
.km_table_options { display: grid; gap: 9px; align-content: center; }
.km_table_dishes { position: absolute; left: 20%; right: 20%; top: 24%; height: 45%; display: flex; justify-content: center; align-items: center; gap: 3%; pointer-events: none; }
.km_table_dish { width: min(38%, 150px); max-height: 100%; filter: drop-shadow(0 5px 4px rgba(52, 39, 25, .20)); }
.km_table_dish_row { display: flex; align-items: center; gap: 9px; margin: 7px 0; padding: 6px 8px; border-radius: 12px; background: #f4ead8; }
.km_table_dish_row span { display: grid; gap: 2px; }
.km_table_dish_row small { color: var(--km-muted); }
.km_dish_thumb { width: 54px; flex: 0 0 54px; }
.km_result_dishes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px auto 16px; }
.km_result_dish_art { width: min(44%, 220px); filter: drop-shadow(0 5px 5px rgba(52, 39, 25, .20)); }
.km_score_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: .8rem 0;
}
.km_score_grid > div {
  padding: .6rem .5rem;
  text-align: center;
  background: #fdf8ec;
  border: 1px solid #dcc9a2;
  border-radius: 12px;
}
.km_score_grid b { display: block; color: var(--km-green); font-size: 1.1rem; }
.km_score_grid small { display: block; margin-top: .2rem; color: var(--km-muted); font-size: .66rem; }

/* Die Tellerplätze auf der Tischvorschau */
.km_placeholders {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}
.km_placeholders span {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #fbf8ed;
  border: 3px solid #c1cebb;
  color: #57804e;
  font-size: .75rem;
  font-weight: 900;
}

/* Die Ankreuzliste beim Tischdecken */
.km_check_row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 11px;
  background: #fdf8ec;
  border: 1px solid #dcc9a2;
  border-radius: 11px;
  cursor: pointer;
}
.km_check_row input { width: 22px; height: 22px; accent-color: var(--km-green); }

/* Der Teller mit dem fertigen Gericht */
.km_result_plate {
  position: relative;
  width: 190px;
  height: 150px;
  margin: 12px auto 17px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fffdf5 0 50%, #e3dfd3 52% 62%, #fff 64% 75%, #c4b9a7 77%);
  box-shadow: 0 13px 17px rgba(80, 57, 32, .30);
}
.km_result_plate::before {
  content: "";
  position: absolute;
  inset: 24% 23%;
  border-radius: 50%;
  background: var(--result-food, #cf6e45);
}
.km_result_plate::after {
  content: "";
  position: absolute;
  inset: 31% 31%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 35%, #efc867 0 5px, transparent 6px),
    radial-gradient(circle at 65% 58%, #66a263 0 5px, transparent 6px),
    radial-gradient(circle at 58% 25%, #f0d077 0 4px, transparent 5px);
}
.km_result_plate[data-kind="cake"]::before { background: linear-gradient(180deg, #dc9a57 0 20%, #f2d39a 21% 76%, #bd7546 77%); }
.km_result_plate[data-kind="salad"]::before { background: radial-gradient(circle at 30% 30%, #63a15d 0 14px, transparent 15px), radial-gradient(circle at 64% 47%, #d86948 0 16px, transparent 17px), radial-gradient(circle at 46% 67%, #ebc35f 0 15px, transparent 16px), #9ab270; }
.km_result_plate[data-kind="pasta"]::before { background: repeating-radial-gradient(ellipse, #f1d18a 0 4px, #d45f3d 5px 9px); }

/* Der Timer beim Kochen */
.km_clock {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px;
  border-radius: 11px;
  background: #f6efdf;
  color: #687367;
  font-size: .78rem;
}
.km_pause_overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(43, 25, 14, .82);
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
}
.km_pause_overlay[hidden] { display: none; }
.km_safety_note {
  margin: .8rem 0 0;
  padding: .6rem .8rem;
  background: rgba(192, 73, 44, .12);
  border-left: 4px solid var(--km-tomato);
  border-radius: 0 10px 10px 0;
  font-size: .86rem;
}
.km_help_list { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.km_help_list b { color: var(--km-tomato); }
.km_print_recipe { display: none; }

/* --------------------------------------------------------------------------
   9. Dark Mode: die Abendküche
   Das Papier bleibt hell (Rezeptkarten, Zettel), nur die Welt wird dunkel.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .km_main { color: #f0e3cd; }
html[data-theme="dark"] .km_world_top { color: #2c2116; }
html[data-theme="dark"] .km_world_top h1 { color: #33261a; }

/* Startseite bei Nacht: dieselbe Seite, nur dunkler - das Porträt bleibt hell. */
html[data-theme="dark"] .km_cover {
  background:
    repeating-linear-gradient(0deg, rgba(255, 220, 170, .04) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, #3b2a1c, #2a1d13);
  border-color: #0d0906;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .km_cover h1 { color: #f7e6c6; }
/* Das Rot der Überschrift ist auf Papier richtig, auf dunklem Holz aber nur
   2,3:1 - deshalb im Dunkelmodus die helle Variante (gemessen 5,4:1). */
html[data-theme="dark"] .km_cover h1 em { color: #e8825f; }
html[data-theme="dark"] .km_eyebrow { color: #e0785c; }
html[data-theme="dark"] .km_learn {
  background: rgba(224, 169, 79, .14);
  color: #e6d3b3;
}
html[data-theme="dark"] .km_portrait {
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255, 196, 120, .22), rgba(255, 196, 120, 0) 62%),
    linear-gradient(180deg, #2a1f17, #1b130d);
}
html[data-theme="dark"] .km_portrait_name { color: #f0dcb8; }
html[data-theme="dark"] .km_figur_btn { background: #3a2a1d; color: #f0dcb8; border-color: #7a5230; }
html[data-theme="dark"] .km_figur_btn.is-aktiv { background: var(--px-gold); color: #2a1a10; border-color: #0d0906; }
html[data-theme="dark"] .km_band { filter: brightness(.6) saturate(.85); }
html[data-theme="dark"] .km_feature_row article {
  background: #33251a;
  border-color: #0d0906;
  color: #f0dcb8;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .km_feature_row small { color: #c2a985; }
html[data-theme="dark"] .km_continue { background: #33251a; border-color: #6b4a2c; color: #f0dcb8; }
html[data-theme="dark"] .km_help_link { background: rgba(51, 37, 26, .92); color: #f0dcb8; border-color: #8a5a34; }
html[data-theme="dark"] .km_dialog {
  color: #2c2116;
  background: linear-gradient(180deg, #f4ead4, #e4d6b8);
}
html[data-theme="dark"] .km_recipe_card,
html[data-theme="dark"] .km_product,
html[data-theme="dark"] .km_mode_card,
html[data-theme="dark"] .km_cart_row,
html[data-theme="dark"] .km_score_grid > div { color: #2c2116; }
html[data-theme="dark"] .km_process_stage,
html[data-theme="dark"] .km_table_dish_row,
html[data-theme="dark"] .km_ingredient_list li { background: #e9dcc0; color: #2c2116; }
html[data-theme="dark"] .km_process_ingredient,
html[data-theme="dark"] .km_free_ingredient { background: #fbf4e2; color: #2c2116; }
html[data-theme="dark"] .km_process_ingredient.selected,
html[data-theme="dark"] .km_free_ingredient.selected,
html[data-theme="dark"] .km_free_selected { background: #dfead2; }
html[data-theme="dark"] .km_free_method { background: #fbf4e2; color: #2c2116; }
html[data-theme="dark"] .km_text_button { color: #f0b58a; }
html[data-theme="dark"] .km_text_button:hover { color: #ffd0ae; }
html[data-theme="dark"] .km_world_footer { background: rgba(35, 26, 18, .86); color: #efdfc0; border-color: #4a382a; }
html[data-theme="dark"] .km_nearby { background: rgba(28, 21, 15, .9); color: #f2e4c9; border-color: #55432f; }
html[data-theme="dark"] .km_player_label { color: #f4e6c8; }
html[data-theme="dark"] .km_scene { filter: brightness(.88) saturate(.92); }
html[data-theme="dark"] .km_market_promo { background: linear-gradient(180deg, #4a3a26, #3a2c1c); color: #f0cf9a; }
html[data-theme="dark"] .km_table_preview { background: linear-gradient(180deg, #4a473a 0 64%, #66543f 65%); }
html[data-theme="dark"] .km_dialog_foot { background: rgba(0, 0, 0, .06); }
html[data-theme="dark"] .km_pill { background: rgba(201, 162, 74, .30); color: #4a3520; }
html[data-theme="dark"] .km_recipe_visual { background: linear-gradient(145deg, #4a3f2f, #3a3123); }
html[data-theme="dark"] .km_product_pack { background: linear-gradient(135deg, #463b2c, #362e22); }
html[data-theme="dark"] .km_check_row { background: #fbf4e2; color: #2c2116; }
html[data-theme="dark"] .km_package strong { color: #324839; }
html[data-theme="dark"] .km_step_meter { background: #4a4034; }
html[data-theme="dark"] .km_result_plate, html[data-theme="dark"] .km_food_plate { filter: brightness(.92); }
html[data-theme="dark"] .km_dish_result { background: linear-gradient(145deg, #f6e8cd, #e6d2ad); }
html[data-theme="dark"] .km_pill { background: linear-gradient(180deg, #4a2d19, #33200f); color: #f0dcb6; }

/* --------------------------------------------------------------------------
   10. Kleine Fenster und Handy
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .km_cover { grid-template-columns: minmax(0, 1fr); }
  .km_portrait { order: -1; padding-top: 1rem; }
  .km_feature_row { grid-template-columns: minmax(0, 1fr); }
  .km_station_layout { grid-template-columns: minmax(0, 1fr); }
}

/* Auf dem Handy bleibt nur das Logo - der Titel passt nicht neben den
   Werkzeugen, ohne dass etwas ueberlappt. */
@media (max-width: 560px) {
  .km_brand span { display: none; }
}

@media (max-width: 650px) {
  .km_header { grid-template-columns: auto minmax(0, 1fr) auto; padding: .3rem .4rem; }
  .km_back { font-size: .72rem; padding: .3rem .55rem; min-height: 44px; }
  .km_brand { font-size: .88rem; gap: .35rem; }
  .km_brand img { width: 36px; height: 36px; }
  .km_tools { gap: .25rem; }
  .km_language { padding: 0 .35rem; }
  .km_language select { width: 4.6rem; font-size: .8rem; }
  .km_theme { width: 72px; height: 44px; }
  .km_thumb { width: 32px; height: 32px; top: 4px; left: 4px; }
  html[data-theme="dark"] .km_thumb { left: calc(100% - 38px); }

  /* Ganz schmale Fenster (320 px): Ohne diese Stufe stossen die drei Zonen
     der Kopfzeile aneinander (gemessen 7 px Überlappung je Seite). */
  @media (max-width: 380px) {
    .km_header { gap: .2rem; }
    .km_back { font-size: .68rem; padding: .3rem .45rem; }
    .km_language { padding: 0 .2rem; }
    .km_language span { display: none; }
    .km_language select { width: 5rem; font-size: .76rem; }
    .km_theme { width: 62px; }
    .km_thumb { width: 30px; height: 30px; }
    html[data-theme="dark"] .km_thumb { left: calc(100% - 34px); }
  }

  /* Startseite: Porträt als kleiner Block oben, damit die Wege im ersten
     Bildschirm liegen. Auf dem Handy ist die Figur Ecke und Blickfang. */
  .km_cover h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem); }
  .km_cover_copy { padding: .9rem .85rem 1rem; }
  .km_portrait {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    align-items: center;
    column-gap: .8rem;
    padding: .6rem .7rem .7rem;
    border-left: 0;
    border-bottom: 4px solid var(--px-ink);
  }
  .km_portrait_frame { grid-column: 1; grid-row: 1 / span 2; width: 132px; }
  .km_portrait_name { grid-column: 2; grid-row: 1; align-self: end; }
  .km_figur_wahl { grid-column: 2; grid-row: 2; align-self: start; flex-wrap: wrap; }
  .km_band { height: 96px; }
  #km_start .km_primary, #km_start .km_secondary { width: 100%; }
  .km_feature_row article { padding: .6rem .75rem; }

  .km_scene { height: 58vh; min-height: 430px; border-width: 6px; border-radius: 18px; }
  .km_scene_sign { font-size: .58rem; padding: .3rem .7rem; top: 4%; }
  .km_window_view { right: 3%; top: 10%; width: 24%; height: 24%; border-width: 6px; }
  .km_market_aisle { height: 36%; top: 31%; }
  .km_market_aisle span { font-size: .5rem; top: -21px; }
  .km_market_aisle small { font-size: .5rem; }
  .km_market_checkout { right: 4%; width: 26%; height: 17%; bottom: 15%; }
  .km_market_promo { left: 3%; top: 8%; font-size: .5rem; padding: .3rem .5rem; }
  .km_market_promo b { font-size: .62rem; }
  /* Auf dem Handy ist die Kueche eng: Geraete kleiner, Wand ohne Schrank. */
  .km_cabinet { display: none; }
  .km_scene[data-location="kitchen"] .km_scene_sky::after { display: none; }
  .km_counter { left: 16%; width: 60%; bottom: 40%; height: 11%; }
  .km_fridge { left: 2%; width: 17%; height: 34%; bottom: 27%; }
  .km_sink { left: 18%; width: 25%; height: 12%; bottom: 51%; }
  .km_kitchen_island { left: 21%; width: 33%; height: 16%; bottom: 24%; }
  .km_stove { left: 47%; width: 27%; height: 14%; bottom: 51%; }
  .km_oven { left: 76%; width: 17%; height: 29%; bottom: 27%; }
  .km_table { right: 3%; width: 30%; height: 15%; bottom: 16%; }
  .km_scene[data-location="table"] .km_table { right: 20%; width: 58%; height: 26%; bottom: 30%; }
  .km_serve_spot { bottom: 31%; left: 8%; width: 32%; font-size: .72rem; }
  .km_dining_chair { bottom: 20%; height: 15%; width: 13%; }
  .km_guest { transform: scale(.68); transform-origin: bottom center; }
  .guest_one { left: 2%; }
  .guest_two { right: 2%; bottom: 24%; }
  .guest_three { left: 26%; bottom: 38%; transform: scale(.58); }
  .km_scene[data-location="table"] .km_scene_sky::after { width: 64px; height: 34px; top: 42px; border-radius: 32px 32px 8px 8px; }
  .km_scene[data-location="table"] .km_scene_sky::before { height: 46px; }
  .km_scene_controls { left: 8px; right: 8px; bottom: 8px; gap: .4rem; flex-wrap: wrap; align-items: flex-end; }
  .km_dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); }
  .km_dpad button { width: 44px; height: 44px; }
  .km_nearby { order: 3; font-size: .74rem; }
  .km_world_top { flex-wrap: wrap; }
  .km_world_actions { width: 100%; justify-content: flex-start; }
  .km_budget { margin-right: auto; }
  .km_ingredient_list { grid-template-columns: minmax(0, 1fr); }
  .km_process_stage { grid-template-columns: minmax(0, 1fr) auto; }
  .km_process_food { max-width: 94px; }
  .km_table_dishes { left: 14%; right: 14%; top: 28%; height: 40%; }
  .km_table_dish { width: 44%; }
  .km_result_dish_art { width: 70%; }
  .km_free_ingredients { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 38vh; }
  .km_dialog_body { padding: .8rem; }
  .km_recipe_grid, .km_product_grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}