/* ===========================================================================
   styles.css - Kommandofrosch
   GUI-Neuaufbau 26.10.2026: "TEICHUFER" · Werkbank-Umbau 28.10.2026.

   Die Welt: ein Holzsteg am Teich. Der Frosch wird programmiert, also ist die
   ganze Seite eine Programmier-Konsole am Ufer (Muster Block-Runner):
     - Seitenhintergrund: kachelbares Teichufer (kulisse.svg, Generator
       .zcode/kommandofrosch-kulisse.cjs) mit Wellen, Schilf, Seerosen.
     - Kopfzeile: Steg-Konsole aus Nussbaumbohlen mit Messingkante.
     - Steuerzeile: dunkle Konsole mit Messing-Anzeigen (Level/Sterne/Befehle/
       Takt) und Papier-Pillen fuer Schwierigkeit, Level, Hilfe und Ton.
     - WERKBANK: links der Teich im Holzrahmen, rechts die Programmier-Seite -
       Befehlskarten, die Befehlskette (vertikale Kette, die laufende Karte
       leuchtet) und die Startzeile. Zug um Zug: Der Takt-Zaehler zaehlt mit,
       die Welt rueckt pro Takt einen sichtbaren Schritt.
     - Auf schmalen Fenstern stapelt sich die Werkbank untereinander.

   Der gemeinsame Rahmen (rahmen.css, jupi.css) liefert nur noch die Grobform;
   alles Sichtbare steht hier und haengt an body.kf_body, damit es die
   Plattform-Regeln in BEIDEN Themes schlaegt.

   Aufbau:
     1. Farben und Grundregeln          7. Befehlskette und Startzeile
     2. Seitenkulisse                   8. Meldung
     3. Steg-Konsole (Kopfzeile)        9. Dialoge (Hilfe, Level, Ergebnis)
     4. Steuerzeile                    10. Dark Mode (Nachtteich)
     5. Werkbank und Buehne            11. Handy und schmale Fenster
     6. Befehlskarten                   12. Bewegung + Bedienziele
   =========================================================================== */

/* ---- 1. Farben und Grundregeln ----------------------------------------- */
:root {
  --kf-tief: #08211d;
  --kf-reed: #1a4f47;
  --kf-reed-hell: #2b6d5f;
  --kf-glas: #10312c;
  --kf-schilf: #bfe0a8;
  --kf-schilf-hell: #e6f7cf;
  --kf-brass: #cfae6a;
  --kf-brass-hell: #f4e2b4;
  --kf-brass-tief: #8a6a2c;
  --kf-holz: #7b5533;
  --kf-holz-hell: #b98a55;
  --kf-holz-tief: #452c17;
  --kf-papier: #fbf5e6;
  --kf-papier-2: #f1e7cd;
  --kf-papier-kante: #cbb78e;
  --kf-tinte: #1f3a30;
  --kf-tinte-soft: #5f7368;
  --kf-amber: #ffcf6b;
  --kf-rot: #b83a2e;
  --kf-gruen: #2f8b58;
  --kf-schrift: Georgia, "Palatino Linotype", "Times New Roman", serif;
  --kf-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* Die Befehls-Knoepfe tragen display:flex - das gewinnt sonst gegen das
   [hidden]-Attribut und der Sprung waere in jedem Level sichtbar (Falle aus
   AGENTS.md 3.10). Deshalb gilt hier ausdruecklich [hidden] > alles. */
[hidden] { display: none !important; }

body.kf_body {
  font-family: var(--kf-sans);
  color: var(--kf-tinte);
  min-height: 100vh;
}

body.kf_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.kf_body .jupi_container { min-height: 100dvh; }
}
body.kf_body .jupi_container > .jupi_main {
  background: transparent;
  padding: .85rem 1rem 1rem;
  max-width: 74rem;
}
body.kf_body .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
  margin: 0 auto;
  padding: .5rem 1rem 1rem;
}
body.kf_body .kf_fuss {
  text-align: center;
  font-size: .8rem;
  color: #35574a;
  letter-spacing: .01em;
}
html[data-theme="dark"] body.kf_body .kf_fuss { color: #a9c8b8; }

body.kf_body :focus-visible {
  outline: 3px solid var(--kf-brass-hell);
  outline-offset: 2px;
}

/* ---- 2. Seitenkulisse: Teichufer -------------------------------------- */
body.kf_body {
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(255, 249, 214, .70) 0%, transparent 60%),
    radial-gradient(760px 460px at 100% 4%, rgba(126, 197, 168, .28) 0%, transparent 58%),
    radial-gradient(900px 520px at 0% 106%, rgba(23, 82, 70, .22) 0%, transparent 62%),
    url("kulisse.svg") repeat,
    linear-gradient(180deg, #e8f4e4 0%, #d6e9d5 60%, #c3ddc6 100%);
  background-attachment: scroll, scroll, scroll, scroll, scroll;
}
html[data-theme="dark"] body.kf_body {
  color: #e8f3ea;
  background:
    linear-gradient(rgba(4, 20, 18, .78), rgba(2, 13, 12, .85)),
    radial-gradient(900px 420px at 50% -12%, rgba(122, 190, 168, .16) 0%, transparent 60%),
    radial-gradient(900px 520px at 0% 106%, rgba(0, 8, 7, .45) 0%, transparent 62%),
    url("kulisse.svg") repeat,
    #08201d;
}

/* ---- 3. Steg-Konsole: die Kopfzeile ----------------------------------- */
body.kf_body .kf_leiste {
  position: sticky;
  top: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .45rem .9rem;
  padding: .45rem 1rem .55rem;
  border-bottom: 4px solid var(--kf-brass-tief);
  background:
    radial-gradient(circle at 14% 34%, rgba(255, 244, 214, .14) 0 8%, transparent 9%),
    radial-gradient(circle at 86% 70%, rgba(0, 0, 0, .30) 0 7%, transparent 8%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 124px),
    linear-gradient(180deg, #8d6438 0%, #6d4726 46%, #3f2915 100%);
  color: #f7f1e2;
  box-shadow:
    0 5px 20px rgba(6, 22, 19, .38),
    inset 0 1px 0 rgba(255, 242, 208, .30),
    inset 0 -2px 0 rgba(0, 0, 0, .42);
}
body.kf_body .kf_nav_back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 2px solid var(--kf-brass-tief);
  background: var(--kf-papier);
  color: #2b4a3a;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
  transition: transform .15s ease, background .15s ease;
}
body.kf_body .kf_nav_back:hover {
  background: var(--kf-brass-hell);
  color: #1d3a2c;
  transform: translateY(-1px);
}
.kf_marke {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .6rem;
  min-width: 0;
}
.kf_siegel {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fffdf4, #e7dcc2 74%);
  border: 2px solid var(--kf-brass);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.kf_siegel img { display: block; width: 38px; height: 38px; object-fit: contain; }
.kf_marke_text { display: flex; flex-direction: column; min-width: 0; }
.kf_kicker {
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .26em;
  color: var(--kf-schilf);
  opacity: .9;
  line-height: 1;
  margin-bottom: .18rem;
  white-space: nowrap;
}
.kf_marke h1 {
  margin: 0;
  font-family: var(--kf-schrift);
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--kf-brass-hell);
  text-shadow: 0 2px 0 #2c1c0c, 0 0 16px rgba(244, 226, 180, .28);
  white-space: nowrap;
}
.kf_werkzeuge {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
  position: static;
}
.kf_leiste #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.kf_leiste .jupi_sprachen_select {
  min-height: 40px;
  max-width: 12rem;
  padding: .3rem .55rem;
  border-radius: .55rem;
  border: 2px solid var(--kf-brass-tief);
  background: #1b3f36;
  color: var(--kf-brass-hell);
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
}
.kf_leiste .jupi_sprachen_select option { color: #21342c; background: var(--kf-papier); }
.kf_leiste .jupi_theme_switch {
  position: relative;
  flex: none;
  width: 74px;
  min-width: 74px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 22px;
  border: 2px solid var(--kf-brass-tief);
  background: #1b3f36;
  transition: background .15s ease;
}
.kf_leiste .jupi_theme_switch:hover { background: #245146; }
.kf_leiste .jts_icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: .78rem; line-height: 1; z-index: 1; }
.kf_leiste .jts_sun { left: 8px; }
.kf_leiste .jts_moon { right: 8px; }
.kf_leiste .jts_thumb {
  position: absolute;
  z-index: 2;
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kf-brass-hell);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  transition: left .18s ease;
}
html[data-theme="dark"] .kf_leiste .jts_thumb { left: calc(100% - 34px); }

/* Alte Hilfsklassen des Rahmens nicht mehr gebraucht. */
body.kf_body .jupi_header.kf_leiste { background-clip: padding-box; }

/* ---- 4. Steuerzeile: Messwerte und Werkzeuge -------------------------- */
body.kf_body .kf_panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin: 0 0 .7rem;
  padding: .5rem .75rem .55rem;
  border-radius: .85rem;
  border: 3px solid var(--kf-tief);
  background:
    radial-gradient(circle at 16% 34%, rgba(191, 224, 168, .12) 0 9%, transparent 10%),
    radial-gradient(circle at 84% 66%, rgba(0, 0, 0, .28) 0 8%, transparent 9%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .17) 0 2px, transparent 2px 88px),
    linear-gradient(180deg, #1c574c 0%, #0c332c 56%, #062620 100%);
  box-shadow:
    0 5px 16px rgba(6, 22, 19, .30),
    inset 0 1px 0 rgba(244, 226, 180, .22),
    inset 0 -2px 0 rgba(0, 0, 0, .34);
  color: #f1f7ec;
}
.kf_readouts {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .4rem .5rem;
  min-width: 0;
}
.kf_stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .05rem;
  min-width: 4.6rem;
  padding: .18rem .55rem .24rem;
  border-radius: .42rem;
  border: 1px solid rgba(191, 224, 168, .28);
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .12));
  box-shadow: inset 0 1px 0 rgba(191, 224, 168, .12);
}
.kf_stat label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a4c8b4;
  line-height: 1.2;
}
.kf_stat span {
  font-family: var(--kf-schrift);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--kf-amber);
  text-shadow: 0 0 12px rgba(255, 207, 107, .35);
  font-variant-numeric: tabular-nums;
}
#kf_levelname {
  font-family: var(--kf-sans);
  font-size: .9rem;
  line-height: 1.25;
  max-width: 15rem;
  white-space: normal;
}
#kf_sterne { letter-spacing: .04em; }
/* Takt-Zaehler: die Zahl zaehlt mit jedem Zug hoch und blitzt kurz auf -
   so sieht man das Zug-fuer-Zug-Tempo auch ohne auf das Feld zu schauen. */
.kf_stat_takt span {
  display: inline-block;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}
@keyframes kf_takt_blitz {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); text-shadow: 0 0 14px rgba(255, 207, 107, .9); }
  100% { transform: scale(1); }
}
.kf_stat_takt.kf_tick span { animation: kf_takt_blitz .3s ease-out; }

.kf_controls {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.kf_feld {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .3rem .18rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--kf-papier-kante);
  background: var(--kf-papier);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28), inset 0 1px 0 #fffdf4;
}
.kf_feld label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4c6456;
}
body.kf_body .jupi_select {
  min-height: 34px;
  padding: .25rem 1.5rem .25rem .55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--kf-tinte);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
}
body.kf_body .jupi_select:focus { outline: none; box-shadow: 0 0 0 3px rgba(207, 174, 106, .55); }
body.kf_body .kf_knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 40px;
  min-width: 40px;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 2px solid var(--kf-papier-kante);
  border-bottom-width: 3px;
  background: var(--kf-papier);
  color: var(--kf-tinte);
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28), inset 0 1px 0 #fffdf4;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
body.kf_body .kf_knopf:hover:not(:disabled) {
  background: var(--kf-brass-hell);
  border-color: var(--kf-brass);
  transform: translateY(-1px);
}
body.kf_body .kf_knopf:disabled { opacity: .5; cursor: not-allowed; }
body.kf_body .kf_knopf_ton { min-width: 44px; font-size: 1rem; }

/* ---- 5. Werkbank und Buehne --------------------------------------------- */
/* Zwei Spalten: links der Teich, rechts die Programmier-Seite (Muster
   Block-Runner). Unter 62rem stapelt sich alles untereinander. */
.kf_werkbank {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .kf_werkbank {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: .7rem;
    align-items: stretch;
  }
}
.kf_linke_spalte {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kf_rechte_spalte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.kf_buehne {
  display: flex;
  justify-content: center;
  margin: 0;
}
body.kf_body .kf_stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: .95rem;
  border: 3px solid var(--kf-tief);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .20) 0 2px, transparent 2px 52px),
    linear-gradient(180deg, #a07245 0%, #714a28 58%, #472d16 100%);
  box-shadow:
    0 10px 26px rgba(6, 22, 19, .32),
    inset 0 0 0 2px rgba(244, 226, 180, .48),
    inset 0 0 22px rgba(0, 0, 0, .35);
}
.kf_stage #kf_canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: .45rem;
  background: #8fd4e8;
  box-shadow: 0 0 0 2px rgba(8, 33, 29, .55), 0 4px 14px rgba(0, 0, 0, .32);
  touch-action: manipulation;
}
/* Messing-Naegel in den vier Ecken des Rahmens. */
.kf_ecke {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffefc6, #b9924a 62%, #6d4d17 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .35);
  pointer-events: none;
}
.kf_ecke_ol { left: 3px; top: 3px; }
.kf_ecke_or { right: 3px; top: 3px; }
.kf_ecke_ul { left: 3px; bottom: 3px; }
.kf_ecke_ur { right: 3px; bottom: 3px; }

/* ---- 6. Befehlskarten -------------------------------------------------- */
body.kf_body .kf_deck {
  margin: 0;
  padding: .45rem .65rem .6rem;
  border-radius: .85rem;
  border: 3px solid var(--kf-tief);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .17) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #2c5f50 0%, #14453c 52%, #082a24 100%);
  box-shadow:
    0 5px 16px rgba(6, 22, 19, .26),
    inset 0 1px 0 rgba(244, 226, 180, .20),
    inset 0 -2px 0 rgba(0, 0, 0, .32);
}
.kf_deck_kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .42rem;
}
.kf_deck_titel {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kf-brass);
  white-space: nowrap;
}
.kf_deck_linie {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(207, 174, 106, .65), rgba(207, 174, 106, 0));
}
/* In der rechten Werkbank-Spalte (schmal) stehen zwei Karten nebeneinander,
   auf gestapelter Seite (Handy, schmale Fenster) drei. */
body.kf_body .kf_palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  padding: 0;
  border: 0;
  background: transparent;
}
@media (min-width: 62rem) {
  body.kf_body .kf_palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kf_bef {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  width: 100%;
  min-height: 58px;
  padding: .3rem .4rem .35rem;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  color: var(--kf-tinte);
  border: 2px solid var(--kf-papier-kante);
  border-bottom-width: 4px;
  border-radius: .7rem;
  background: linear-gradient(180deg, #fdf8e9, #f0e6cb);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28), inset 0 1px 0 #fffdf4;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.kf_bef:hover:not(:disabled) {
  background: linear-gradient(180deg, #fffdf3, #f8efd8);
  border-color: var(--kf-brass);
  transform: translateY(-2px);
}
.kf_bef:active:not(:disabled) { transform: translateY(0); }
.kf_bef:disabled { opacity: .45; cursor: not-allowed; }
.kf_bef_kuerzel {
  display: grid;
  place-items: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--kf-reed);
  color: var(--kf-schilf-hell);
  font-size: .92rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .3);
}
.kf_bef_vor .kf_bef_kuerzel { background: #2f7d4f; }
.kf_bef_links .kf_bef_kuerzel,
.kf_bef_rechts .kf_bef_kuerzel { background: #2a6d72; }
.kf_bef_warte .kf_bef_kuerzel { background: #a8792a; font-size: .78rem; }
.kf_bef_sprung .kf_bef_kuerzel { background: #6a4d9c; }
.kf_bef_schleife .kf_bef_kuerzel { background: #7a3f62; }

/* ---- 7. Befehlskette und Startzeile ------------------------------------- */
body.kf_body .kf_programm_block {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding: .5rem .65rem .6rem;
  border-radius: .85rem;
  border: 3px solid var(--kf-tief);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .17) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #2c5f50 0%, #14453c 52%, #082a24 100%);
  box-shadow:
    0 5px 16px rgba(6, 22, 19, .26),
    inset 0 1px 0 rgba(244, 226, 180, .20),
    inset 0 -2px 0 rgba(0, 0, 0, .32);
}
.kf_block_titel {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kf-brass);
}
/* Die Kette: Befehle haengen untereinander wie Karten an einer Schnur. Lange
   Programme scrollen in der Kette, die Startzeile bleibt darunter. */
.kf_programm {
  display: flex;
  flex-direction: column;
  gap: .34rem;
  min-height: 116px;
  max-height: 34vh;
  overflow-y: auto;
  padding: .4rem .45rem;
  border-radius: .5rem;
  border: 2px solid var(--kf-papier-kante);
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(31, 58, 48, .08) 30px 31px),
    linear-gradient(180deg, #fdf8e9, #f2e8d0);
  box-shadow: inset 0 2px 6px rgba(6, 22, 19, .14);
}
.kf_programm_leer {
  color: #77857a;
  font-size: .82rem;
  font-style: italic;
  padding-inline: .3rem;
}
/* Ein Befehl in der Kette: Papierkarte in voller Breite, anklickbar zum
   Loeschen. Das kleine Gruenstueck unten verbindet sie mit der nächsten
   Karte - so liest sich die Spalte als Befehlskette, nicht als Liste. */
.kf_kachel {
  position: relative;
  display: flex;
  align-items: center;
  gap: .3rem;
  width: 100%;
  min-height: 44px;
  padding: .3rem .55rem;
  border-radius: .5rem;
  border: 1px solid #6d9659;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #eaf6d8, #d8ecc0);
  color: #23421d;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.kf_kachel:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(-0.34rem - 2px);
  width: 4px;
  height: .34rem;
  border-radius: 2px;
  background: #6d9659;
}
.kf_kachel:hover {
  background: linear-gradient(180deg, #fbe1dc, #f4c9c2);
  border-color: #b83a2e;
  color: #6d1a12;
}
.kf_kachel_mark { font-weight: 800; opacity: .7; }
/* Lesemarke: die Karte, deren Befehl gerade laeuft - Messing-Rand und warmer
   Schein. Fehler: die schuldige Karte bleibt rot markiert. */
.kf_kachel.kf_aktiv {
  border-color: var(--kf-brass);
  background: linear-gradient(180deg, #fdf3d0, #f6e6b0);
  color: #4a3608;
  box-shadow: 0 0 0 2px rgba(207, 174, 106, .55), 0 2px 8px rgba(138, 106, 44, .35);
}
.kf_kachel.kf_aktiv .kf_kachel_mark { opacity: 1; color: #8a6a2c; }
.kf_kachel.kf_fehler {
  border-color: #b83a2e;
  background: linear-gradient(180deg, #fbe1dc, #f4c9c2);
  color: #6d1a12;
  box-shadow: 0 0 0 2px rgba(184, 58, 46, .45);
}

/* Startzeile: grosser Start-Knopf, darunter die Taktsteuerung. */
.kf_play {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .5rem .65rem .6rem;
  border-radius: .85rem;
  border: 3px solid var(--kf-tief);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .17) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #2c5f50 0%, #14453c 52%, #082a24 100%);
  box-shadow:
    0 5px 16px rgba(6, 22, 19, .26),
    inset 0 1px 0 rgba(244, 226, 180, .20),
    inset 0 -2px 0 rgba(0, 0, 0, .32);
}
.kf_play_zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
body.kf_body .kf_start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  min-height: 48px;
  padding: .45rem 1.15rem;
  border: 2px solid #1d4a34;
  border-bottom-width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #47a86c, #2c7d4c 70%, #23653e);
  color: #f4ffe8;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: 0 3px 10px rgba(6, 22, 19, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .12s ease, filter .12s ease;
}
body.kf_body .kf_start:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.kf_body .kf_start:disabled { opacity: .5; cursor: not-allowed; }
body.kf_body .kf_tempo {
  min-height: 40px;
  padding: .25rem 1.4rem .25rem .6rem;
  border-radius: 999px;
  border: 2px solid var(--kf-papier-kante);
  background: var(--kf-papier);
  color: var(--kf-tinte);
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
}

/* Auf gestapelten Fenstern (unter 62rem, v. a. Handy) ist die hohe Kette zu
   Platzfresser - der Start-Knopf rueckt unter den Falz. Dort liegt das
   Programm deshalb wieder als kompakte, mehrzeilige Kartenreihe (die alte,
   bewaehrte Handy-Form); die Kette mit Lesemarke bleibt den breiten Fenstern
   mit Spalten daneben vorbehalten. Der Block muss NACH den Basisregeln
   stehen, sonst ueberschreibt ihn .kf_programm wieder. */
@media (max-width: 61.99rem) {
  .kf_programm {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 54px;
    max-height: none;
  }
  .kf_kachel { width: auto; min-height: 44px; }
  .kf_kachel:not(:last-child)::after { display: none; }
}

/* ---- 8. Meldung -------------------------------------------------------- */
.kf_meldung {
  min-height: 1.35rem;
  margin: .55rem auto 0;
  text-align: center;
  font-size: .9rem;
  line-height: 1.45;
  color: #24483a;
  width: fit-content;
  max-width: min(48rem, 100%);
}
.kf_meldung:not(:empty) {
  padding: .45rem .9rem;
  border-radius: .7rem;
  border: 1px solid var(--kf-papier-kante);
  background: rgba(251, 245, 230, .92);
  box-shadow: 0 2px 8px rgba(6, 22, 19, .16);
}
.kf_meldung_ok {
  color: #1d5c34;
  font-weight: 800;
  border-color: #7dab72 !important;
}
.kf_meldung_fehler {
  color: #8d241a;
  font-weight: 800;
  border-color: #c98a80 !important;
}
.kf_meldung_klein {
  font-size: .82rem;
  text-align: left;
  margin-top: .6rem;
  width: auto;
  margin-inline: 0;
}

/* ---- 9. Dialoge -------------------------------------------------------- */
body.kf_body .kf_dialog {
  width: min(46rem, calc(100vw - 24px));
  max-height: 88dvh;
  overflow: auto;
  padding: 0 1rem 1rem;
  border: 3px solid var(--kf-tief);
  border-radius: 1rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(31, 58, 48, .06) 31px 32px),
    linear-gradient(180deg, #fdf8ea, #f3ead3);
  color: var(--kf-tinte);
  box-shadow: 0 18px 40px rgba(4, 16, 14, .45);
  line-height: 1.55;
}
body.kf_body .kf_dialog::backdrop { background: rgba(4, 18, 16, .62); }
body.kf_body .kf_dialog .neu_schliessen {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding-top: .5rem;
  margin: 0 0 -.3rem;
  background: linear-gradient(180deg, #fdf8ea 72%, rgba(253, 248, 234, 0));
}
.kf_dialog_zu {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--kf-papier-kante);
  background: var(--kf-papier);
  color: var(--kf-tinte);
  font-size: 1rem;
  font-weight: 800;
}
.kf_dialog_zu:hover { background: var(--kf-brass-hell); }
body.kf_body .kf_dialog h2 {
  margin: .3rem 0 .7rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(207, 174, 106, .55);
  font-family: var(--kf-schrift);
  font-size: 1.32rem;
  color: #1b3f34;
}
body.kf_body .kf_dialog li { margin: .45rem 0; }
body.kf_body .kf_dialog strong { color: #17523c; }
.kf_lernsatz {
  margin-top: .9rem;
  padding: .6rem .7rem;
  border-radius: .5rem;
  border: 1px solid #a9c79a;
  border-left: 5px solid var(--kf-gruen);
  background: rgba(232, 246, 214, .8);
  line-height: 1.5;
  color: #24422f;
}
.kf_levelraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .45rem;
  margin-top: .5rem;
}
.kf_levelkachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 68px;
  padding: .45rem;
  cursor: pointer;
  font: inherit;
  color: var(--kf-tinte);
  border: 2px solid var(--kf-papier-kante);
  border-bottom-width: 4px;
  border-radius: .6rem;
  background: linear-gradient(180deg, #fdf9ec, #f1e7cf);
  box-shadow: inset 0 1px 0 #fffdf4;
}
.kf_levelkachel:hover { border-color: var(--kf-brass); background: #fffdf3; }
.kf_levelkachel[aria-current="true"] {
  border-color: #2f8b58;
  background: linear-gradient(180deg, #e6f7d2, #d2eabd);
  box-shadow: inset 0 0 0 2px rgba(47, 139, 88, .35);
}
.kf_levelkachel .kf_nr { font-weight: 800; font-size: .95rem; }
.kf_levelkachel .kf_sterne_klein { font-size: .8rem; letter-spacing: .1em; color: #b8801c; }
.kf_sternreihe { font-size: 2rem; letter-spacing: .16em; margin: .5rem 0; color: #e0a92c; text-shadow: 0 1px 0 rgba(120, 80, 0, .25); }
.kf_menue { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }

/* ---- 10. Dark Mode: Nachtteich ---------------------------------------- */
html[data-theme="dark"] body.kf_body .kf_dialog {
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(200, 224, 208, .05) 31px 32px),
    linear-gradient(180deg, #14312b, #0d2622);
  color: #e2efe6;
  border-color: #0a1d1a;
}
html[data-theme="dark"] body.kf_body .kf_dialog .neu_schliessen {
  background: linear-gradient(180deg, #14312b 72%, rgba(20, 49, 43, 0));
}
html[data-theme="dark"] body.kf_body .kf_dialog h2 { color: var(--kf-brass-hell); border-bottom-color: rgba(207, 174, 106, .4); }
html[data-theme="dark"] body.kf_body .kf_dialog strong { color: var(--kf-schilf-hell); }
html[data-theme="dark"] .kf_dialog_zu {
  background: #173a33;
  border-color: var(--kf-brass-tief);
  color: var(--kf-brass-hell);
}
html[data-theme="dark"] .kf_dialog_zu:hover { background: #215046; }
html[data-theme="dark"] .kf_lernsatz {
  background: rgba(24, 58, 46, .85);
  border-color: #3f7358;
  border-left-color: #6fbf8a;
  color: #d9ebd9;
}
html[data-theme="dark"] .kf_levelkachel {
  background: linear-gradient(180deg, #1a3a33, #122c27);
  border-color: #38695a;
  color: #e2efe6;
}
html[data-theme="dark"] .kf_levelkachel:hover { background: #20463d; border-color: var(--kf-brass); }
html[data-theme="dark"] .kf_levelkachel[aria-current="true"] {
  border-color: #6fbf8a;
  background: linear-gradient(180deg, #1f4a3c, #173b31);
}
html[data-theme="dark"] .kf_meldung { color: #d6e8da; }
html[data-theme="dark"] .kf_meldung:not(:empty) {
  background: rgba(18, 44, 38, .92);
  border-color: #38695a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .kf_meldung_ok { color: #9de0b4; border-color: #3f7358 !important; }
html[data-theme="dark"] .kf_meldung_fehler { color: #f0a79e; border-color: #8a4038 !important; }
html[data-theme="dark"] .kf_stage #kf_canvas { background: #10333a; }

/* Der Dunkelmodus der Plattform faerbt Selects orange - hier bleiben sie
   Papier, weil sie auf dunklen Konsolen liegen. Die Regel gilt NUR innerhalb
   der Papier-Pille; das Tempo-Feld auf dem dunklen Deck braucht selbst Papier
   (sonst wird es transparent und der dunkle Text verschwindet). */
html[data-theme="dark"] body.kf_body .kf_feld { background: var(--kf-papier); }
html[data-theme="dark"] body.kf_body .kf_feld .jupi_select {
  background: transparent;
  color: var(--kf-tinte);
  border: 0;
  box-shadow: none;
}
html[data-theme="dark"] body.kf_body .kf_tempo {
  background: var(--kf-papier);
  color: var(--kf-tinte);
  border: 2px solid var(--kf-papier-kante);
}

/* ---- 11. Handy und schmale Fenster ------------------------------------ */
@media (max-width: 900px) {
  body.kf_body .kf_leiste {
    grid-template-columns: 1fr auto;
    gap: .35rem .6rem;
    padding: .4rem .6rem .5rem;
  }
  .kf_marke { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  body.kf_body .kf_nav_back { grid-column: 1; grid-row: 2; }
  .kf_werkzeuge { grid-column: 2; grid-row: 2; justify-self: end; }
  .kf_marke h1 { font-size: 1.3rem; }
  .kf_siegel { width: 42px; height: 42px; }
  .kf_siegel img { width: 34px; height: 34px; }
}
@media (max-width: 640px) {
  body.kf_body .jupi_container > .jupi_main { padding: .6rem .55rem .9rem; }
  .kf_controls { width: 100%; margin-inline-start: 0; justify-content: flex-end; }
  /* Die Schwierigkeits-Pille nimmt die ganze Breite, die drei Knoepfe stehen
     darunter in einer Reihe - sonst rutschen Hilfe und Ton einzeln um. */
  .kf_feld { flex: 1 1 100%; }
  .kf_feld label { flex: 0 0 auto; }
  .kf_feld .jupi_select { flex: 1 1 auto; }
  .kf_readouts { width: 100%; }
  .kf_stat { flex: 1 1 auto; min-width: 0; }
  #kf_levelname { max-width: none; }
  .kf_bef { min-height: 54px; font-size: .72rem; padding: .25rem .35rem .3rem; }
  /* Level und Hilfe teilen die Breite, der Ton-Knopf bleibt kompakt. */
  .kf_controls .kf_knopf:not(.kf_knopf_ton) { flex: 1 1 0; }
  .kf_controls .kf_knopf_ton { flex: 0 0 auto; }
  .kf_bef_kuerzel { min-width: 1.6rem; height: 1.6rem; font-size: .82rem; }
  .kf_play_zeile { gap: .3rem; }
  /* Am Handy alles dichter, damit der Start-Knopf ueber dem Falz bleibt. */
  .kf_werkbank { gap: .45rem; }
  .kf_rechte_spalte { gap: .45rem; }
  body.kf_body .kf_play { padding: .4rem .55rem .5rem; gap: .3rem; }
  body.kf_body .kf_start { min-height: 44px; font-size: .92rem; }
  .kf_meldung { font-size: .84rem; margin-top: .4rem; }
}
@media (max-width: 420px) {
  .kf_kicker { display: none; }
  .kf_marke h1 { font-size: 1.16rem; }
  body.kf_body .kf_leiste .jupi_sprachen_select { max-width: 7.5rem; font-size: .76rem; }
  .kf_bef { font-size: .68rem; }
  .kf_bef_kuerzel { min-width: 1.45rem; height: 1.45rem; }
}
@media (max-width: 380px) {
  /* Sehr schmale Fenster: drei Zeilen in der Leiste. In zwei Zeilen lagen
     Zurueck-Knopf (122 px) und Werkzeuge (Sprachwahl + Schalter, ~200 px)
     nebeneinander und schoben die Seite 2 px ueber den Rand. */
  body.kf_body .kf_leiste { grid-template-columns: minmax(0, 1fr); }
  .kf_marke { grid-column: 1; grid-row: 1; justify-self: center; }
  body.kf_body .kf_nav_back { grid-column: 1; grid-row: 2; justify-self: start; }
  .kf_werkzeuge { grid-column: 1; grid-row: 3; justify-self: start; }
}

@media (max-height: 720px) {
  /* Flache Fenster: die Kette wird kuerzer, damit die Startzeile nicht unter
     den Falz rutscht. */
  body.kf_body .jupi_container > .jupi_main { padding-top: .5rem; }
  .kf_programm { max-height: 24vh; min-height: 84px; }
}

/* ---- 12. Bewegung + Bedienziele --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.kf_body *,
  body.kf_body *::before,
  body.kf_body *::after { transition: none !important; animation: none !important; }
}