/* zeitmeister/styles.css - GUI der Uhr-Werkstatt (GUI 3.13 Typ 2)

   Aufbau (von oben nach unten):
     1  Farbwerte beider Themes
     2  Kopfzeile (Drei-Zonen-Leiste in Werkstatt-Optik)
     3  Seitenrahmen
     4  Buehne + gemalte Werkstatt (SVG-Szene)
     5  Rundenende + Hilfe-Fenster
     6  Handy-Anpassungen
     7  Dark Mode (Abendwerkstatt)

   Alle Klassennamen tragen das Praefix uhr_ bzw. sz_ (Szene) - der Ordner
   ist ein eigenes PWA-Paket, nichts davon darf nach aussen wirken. */

[hidden] { display: none !important; }

/* ============================================================
   1  Farbwerte
   ============================================================ */
:root {
  --uhr-tinte: #123b52;          /* Hauptschrift */
  --uhr-tinte-hell: #4a6d82;
  --uhr-papier: #fdf6e6;         /* Karten */
  --uhr-papier-2: #f3e6ca;
  --uhr-papier-rand: #d9c49a;
  --uhr-rand-dunkel: #a9773f;
  --uhr-gold: #c9a227;
  --uhr-blau: #2e86c4;
  --uhr-blau-dunkel: #1c5f92;
  --uhr-schatten: rgba(6, 22, 34, .3);
  --uhr-seite-1: #e7eff2;
  --uhr-seite-2: #dbe6ea;
}

html[data-theme="dark"] {
  --uhr-tinte: #f3ead8;
  --uhr-tinte-hell: #c4cdd4;
  --uhr-papier: #2b3038;
  --uhr-papier-2: #232830;
  --uhr-papier-rand: #46505c;
  --uhr-rand-dunkel: #7b5a2c;
  --uhr-gold: #d7b25a;
  --uhr-blau: #3f93cf;
  --uhr-blau-dunkel: #24618f;
  --uhr-schatten: rgba(0, 0, 0, .55);
  --uhr-seite-1: #0f171e;
  --uhr-seite-2: #0a1116;
}

/* ============================================================
   2  Kopfzeile (3.13.2): Zurueck | Logo + Name | Sprache + Theme
   ============================================================ */
.uhr_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  background: linear-gradient(160deg, #2b6076 0%, #123c50 58%, #0b2a39 100%);
  box-shadow: 0 6px 22px rgba(4, 20, 30, .34), inset 0 -1px 0 rgba(255, 255, 255, .12);
}

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

.uhr_brand img {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  aspect-ratio: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}

.uhr_brand h1 {
  margin: 0;
  color: #FFFFFF;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: .01em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

.uhr_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: flex;
  align-items: center;
  border-radius: 999px;
  padding: .45rem .9rem;
  line-height: 1.2;
  font-size: .88rem;
  font-weight: 800;
  min-height: 40px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #FFFFFF;
}

.uhr_header .jupi_nav_back:focus-visible { outline: 3px solid #ffe9a5; outline-offset: 2px; }

.uhr_header .jupi_nav_back:hover {
  background: rgba(255, 255, 255, .26);
  transform: translateY(-1px);
}

.uhr_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.uhr_header #jupi_sprachen_wahl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
}

.uhr_header #jupi_sprachen_wahl select {
  min-height: 40px;
}

.uhr_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  background: rgba(255, 255, 255, .2);
}

.uhr_header .jupi_theme_switch:hover { background: rgba(255, 255, 255, .32); }

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

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

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

/* ============================================================
   3  Seitenrahmen
   ============================================================ */
.jupi_container {
  grid-template-rows: 0 auto 1fr auto;
}

.jupi_container > .uhr_main {
  background: linear-gradient(180deg, var(--uhr-seite-1) 0%, var(--uhr-seite-2) 100%);
}

.uhr_main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: .55rem clamp(.6rem, 1.4vw, 1.1rem) 0;
  max-width: 100rem;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* ============================================================
   4  Buehne + gemalte Werkstatt
   ============================================================ */
.uhr_stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.4rem;
  background: #123c50;
  box-shadow: 0 18px 40px var(--uhr-schatten), 0 0 0 1px rgba(0, 0, 0, .22);
  min-height: clamp(30rem, 66vh, 47rem);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.uhr_welt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(.45rem, 1.1vh, .9rem);
  padding: clamp(.55rem, 1.2vw, 1rem) clamp(.6rem, 1.6vw, 1.4rem) clamp(.7rem, 1.4vw, 1.1rem);
  min-width: 0;
  flex: 1 1 auto;
}

/* --- 4.1 Die gemalte Werkstatt: zwei fertige Bilder (Tag/Nacht) -----
   Erzeugt von .zcode/zeitmeister-szene-bauen.cjs. Als Hintergrundbild
   (cover) wird die Szene in jeder Fenstergroesse beschnitten statt
   verzerrt - quer wie hoch. */
.uhr_szene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("szene-tag.svg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  pointer-events: none;
}

html[data-theme="dark"] .uhr_szene { background-image: url("szene-nacht.svg"); }

/* --- 4.2 Steuerleiste ---------------------------------------------- */
.uhr_panel {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.uhr_karte {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .6rem;
  border-radius: .9rem;
  border: 1px solid var(--uhr-papier-rand);
  background: linear-gradient(180deg, #f9eed8 0%, #eeddb9 100%);
  box-shadow: 0 6px 14px var(--uhr-schatten), inset 0 1px 0 rgba(255, 255, 255, .7);
  min-width: 0;
}

.uhr_stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .4rem;
}

.uhr_stat + .uhr_stat::before {
  content: "";
  position: absolute;
  left: -.08rem;
  top: 12%;
  height: 76%;
  width: 1px;
  background: var(--uhr-papier-rand);
}

.uhr_stat .uhr_stat_icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22));
}

.uhr_stat .uhr_stat_wert {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.uhr_stat .uhr_stat_label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a6c43;
  white-space: nowrap;
}

.uhr_stat strong {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--uhr-tinte);
  font-variant-numeric: tabular-nums;
}

.uhr_karte_steuer {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: clamp(.6rem, 1.6vw, 1.6rem);
  flex-wrap: wrap;
}

.uhr_feld {
  display: flex;
  align-items: center;
  gap: .38rem;
  min-width: 0;
}

.uhr_feld_icon {
  font-size: 1.2rem;
  line-height: 1;
}

.uhr_feld label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7c5f38;
  white-space: nowrap;
}

.uhr_select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 17rem;
  min-height: 40px;
  padding: .35rem 1.9rem .35rem .6rem;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  color: var(--uhr-tinte);
  background-color: #fffdf6;
  background-image:
    linear-gradient(45deg, transparent 50%, #14344a 50%),
    linear-gradient(135deg, #14344a 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 2px solid var(--uhr-papier-rand);
  border-radius: .6rem;
  cursor: pointer;
  text-overflow: ellipsis;
}

.uhr_select:hover { border-color: var(--uhr-rand-dunkel); }

.uhr_select:focus-visible {
  outline: 3px solid #7fb6dd;
  outline-offset: 1px;
}

.uhr_aktionen {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.uhr_rund {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 50%;
  border: 2px solid #13405c;
  background: linear-gradient(180deg, #3f93cf 0%, #1c5f92 100%);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #123b52, 0 8px 14px var(--uhr-schatten), inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: transform .1s, filter .12s;
}

.uhr_rund:hover { filter: brightness(1.1); transform: translateY(-1px); }
.uhr_rund:active { transform: translateY(2px); box-shadow: 0 1px 0 #123b52, inset 0 2px 0 rgba(255, 255, 255, .3); }
.uhr_rund:focus-visible { outline: 3px solid #ffe9a5; outline-offset: 3px; }
.uhr_rund_frage span { font-size: 1.45rem; font-weight: 900; }

/* --- 4.3 Haengendes Schild ---------------------------------------- */
.uhr_schild {
  position: relative;
  align-self: center;
  margin: .15rem auto .1rem;
  max-width: min(96%, 52rem);
  padding: .45rem 1.6rem;
  border-radius: 1rem;
  border: 3px solid var(--uhr-rand-dunkel);
  background:
    repeating-linear-gradient(90deg, rgba(150, 100, 50, .08) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #f7e3b3 0%, #ead096 55%, #e2c184 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .65),
    inset 0 -5px 0 rgba(140, 95, 45, .22),
    0 6px 0 #8a5f30,
    0 16px 26px var(--uhr-schatten);
}

.uhr_schild::before,
.uhr_schild::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .58rem;
  height: .58rem;
  margin-top: -.29rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fbeecb 0%, #c9a05e 55%, #8a5f30 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 72, 34, .7);
}

.uhr_schild::before { left: .5rem; }
.uhr_schild::after { right: .5rem; }

.uhr_kette {
  position: absolute;
  bottom: calc(100% + 3px);
  width: .46rem;
  height: 2.1rem;
  border-radius: .23rem;
  background: repeating-linear-gradient(180deg, #5d7079 0 5px, #a3b5bd 5px 10px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  z-index: -1;
}

.uhr_kette_l { left: 14%; }
.uhr_kette_r { right: 14%; }

.uhr_task_label {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 2.05vw, 1.65rem);
  font-weight: 800;
  line-height: 1.25;
  color: #123b52;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* --- 4.4 Die Uhr --------------------------------------------------- */
.uhr_uhr_box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}

.uhr_uhr_box svg {
  height: clamp(10rem, 33vh, 20rem);
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 22px rgba(6, 22, 34, .45));
}

/* --- 4.5 Antwort-Knoepfe ------------------------------------------ */
.uhr_antworten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.45rem, 1vw, .85rem);
}

.uhr_btn {
  min-width: 0;
  min-height: clamp(3.6rem, 7.4vh, 5.2rem);
  cursor: pointer;
  border: 2px solid #23608f;
  border-radius: .85rem;
  color: var(--uhr-tinte);
  background: linear-gradient(180deg, #d3e9fc 0%, #a9cdf0 58%, #8fbfe9 100%);
  box-shadow:
    0 5px 0 #1b5177,
    0 10px 16px var(--uhr-schatten),
    inset 0 2px 0 rgba(255, 255, 255, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .35rem .4rem;
  transition: transform .1s, filter .12s;
}

.uhr_btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); }
.uhr_btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #1b5177, inset 0 2px 0 rgba(255, 255, 255, .8); }
.uhr_btn:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.uhr_btn:disabled { cursor: default; }

.uhr_btn_zeit {
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.uhr_btn_worte {
  font-size: clamp(.72rem, 1.15vw, .95rem);
  font-weight: 700;
  color: #35586d;
  line-height: 1.15;
}

.uhr_btn_right {
  border-color: #2f8f5a;
  background: linear-gradient(180deg, #e2fbea 0%, #b7ecc9 60%, #9fe3b8 100%);
  box-shadow: 0 5px 0 #2a7a4f, 0 10px 16px var(--uhr-schatten), inset 0 2px 0 rgba(255, 255, 255, .9);
}

.uhr_btn_wrong {
  opacity: 1;
  border-color: #b1453a;
  background: linear-gradient(180deg, #fde3df 0%, #f4bab2 100%);
  box-shadow: 0 5px 0 #8e2f27, 0 10px 16px var(--uhr-schatten), inset 0 2px 0 rgba(255, 255, 255, .8);
  animation: uhr_shake .35s;
}

@keyframes uhr_shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* --- 4.6 Uhr stellen ---------------------------------------------- */
.uhr_steller {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: flex-end;
  justify-content: center;
}

.uhr_stepper {
  flex: 0 1 15rem;
  max-width: 20rem;
  background: linear-gradient(180deg, var(--uhr-papier) 0%, var(--uhr-papier-2) 100%);
  border: 2px solid var(--uhr-papier-rand);
  border-radius: .9rem;
  padding: .3rem .7rem .45rem;
  text-align: center;
  box-shadow: 0 6px 14px var(--uhr-schatten), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.uhr_stepper_titel {
  display: block;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a6c43;
}

.uhr_stepper_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-top: .1rem;
}

.uhr_stepper_row button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  border: 2px solid #8a5f30;
  border-radius: 50%;
  color: #FFFFFF;
  background: linear-gradient(180deg, #d69b5a 0%, #b3743a 100%);
  box-shadow: 0 4px 0 #7c4f24, inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: transform .1s, filter .12s;
}

.uhr_stepper_row button:hover { filter: brightness(1.08); }
.uhr_stepper_row button:active { transform: translateY(2px); box-shadow: 0 1px 0 #7c4f24; }
.uhr_stepper_row button:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }

.uhr_stepper_row span {
  font-size: 1.7rem;
  font-weight: 800;
  min-width: 3rem;
  color: var(--uhr-tinte);
  font-variant-numeric: tabular-nums;
}

/* Hauptknoepfe (Pruefen, Weiter, Neue Runde, Schliessen) */
.uhr_hauptknopf {
  min-height: 44px;
  border: 2px solid #123b52;
  border-radius: .8rem;
  padding: .5rem 1.15rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 800;
  color: #FFFFFF;
  background: linear-gradient(180deg, #3f93cf 0%, #1f6394 100%);
  box-shadow: 0 4px 0 #123b52, 0 8px 14px var(--uhr-schatten), inset 0 2px 0 rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: transform .1s, filter .12s;
}

.uhr_hauptknopf:hover { filter: brightness(1.08); transform: translateY(-1px); }
.uhr_hauptknopf:active { transform: translateY(2px); box-shadow: 0 1px 0 #123b52; }
.uhr_hauptknopf:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }

/* --- 4.7 Rueckmeldung + Weiter ------------------------------------ */
.uhr_rueckmeldung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  min-height: 2.2rem;
}

.uhr_msg {
  margin: 0;
  padding: .35rem .95rem;
  border-radius: .9rem;
  max-width: 52rem;
  font-size: clamp(.8rem, 1.35vw, .96rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--uhr-tinte);
  background: rgba(255, 249, 235, .94);
  border: 1px solid var(--uhr-papier-rand);
  box-shadow: 0 4px 12px var(--uhr-schatten);
}

.uhr_msg:empty { display: none; }
.uhr_msg_ok {
  color: #1d5c3a;
  background: rgba(230, 248, 235, .96);
  border-color: #8fcea4;
}
.uhr_msg_err {
  color: #8e2a22;
  background: rgba(253, 234, 231, .96);
  border-color: #e3a49c;
}

.uhr_btns_row { display: flex; gap: .5rem; }
.uhr_btns_row:has([hidden]) { display: none; }

/* ============================================================
   5  Rundenende
   ============================================================ */
.uhr_done {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(92%, 34rem);
  max-height: calc(100% - 2rem);
  overflow: auto;
  text-align: center;
  padding: 1.3rem 1.2rem 1.4rem;
  border-radius: 1.2rem;
  border: 2px solid var(--uhr-papier-rand);
  background: linear-gradient(180deg, var(--uhr-papier) 0%, var(--uhr-papier-2) 100%);
  /* Der riesige Schatten faerbt den Rest der Buehne ab - so bleibt die
     Werkstatt sichtbar und die Karte steht trotzdem im Blick. */
  box-shadow: 0 0 0 200vmax rgba(6, 18, 26, .58), 0 18px 40px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .7);
}

.uhr_done h3 {
  margin: .2rem 0 .4rem;
  font-size: 1.5rem;
  color: var(--uhr-tinte);
}

.uhr_done_uhr { font-size: 2.6rem; margin: .1rem 0; }

.uhr_done p {
  margin: .3rem 0 .6rem;
  font-size: 1.02rem;
  color: var(--uhr-tinte-hell);
}

.uhr_sterne {
  font-size: 2rem;
  margin-bottom: .8rem;
  letter-spacing: .1em;
}

/* ============================================================
   6  Hilfe-Fenster (Regel 3.13.4)
   ============================================================ */
.uhr_modal {
  width: min(46rem, calc(100% - 2rem));
  max-height: 85dvh;
  overflow: auto;
  border: 2px solid var(--uhr-papier-rand);
  border-radius: 1.1rem;
  padding: 1.1rem 1.4rem 1.3rem;
  background: linear-gradient(180deg, var(--uhr-papier) 0%, var(--uhr-papier-2) 100%);
  color: var(--uhr-tinte);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.uhr_modal::backdrop {
  background: rgba(4, 16, 24, .66);
  backdrop-filter: blur(2px);
}

.uhr_modal form {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .4rem;
}

.uhr_modal_close { font-size: .85rem; }

.uhr_modal h2 {
  margin: .2rem 0 .6rem;
  font-size: 1.35rem;
  color: var(--uhr-tinte);
}

.uhr_modal ul {
  margin: .5rem 0 .9rem;
  padding-left: 1.3rem;
  line-height: 1.6;
}

.uhr_modal li { margin: .35rem 0; }

.uhr_modal .uhr_lernziel {
  background: rgba(255, 255, 255, .55);
  border-left: 4px solid var(--uhr-blau);
  border-radius: .5rem;
  padding: .65rem .85rem;
  margin: .9rem 0 0;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--uhr-tinte-hell);
}

/* ============================================================
   7  Handy / schmale Fenster
   ============================================================ */
@media (max-width: 62rem) {
  .uhr_karte_steuer { justify-content: flex-start; }
  .uhr_select { max-width: 13rem; }
}

@media (max-width: 52rem) {
  .uhr_header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    padding: .45rem .6rem;
  }
  .uhr_header .jupi_nav_back { order: 1; padding: .4rem .7rem; font-size: .78rem; }
  .uhr_header .jupi_werkzeuge { order: 2; margin-left: auto; }
  .uhr_brand { order: 3; flex: 1 0 100%; justify-content: center; gap: .45rem; }
  .uhr_brand img { width: 32px; height: 32px; }
  .uhr_brand h1 { font-size: 1.05rem; }
  .uhr_header #jupi_sprachen_wahl select {
    max-width: 8rem;
    font-size: .72rem;
    padding: .2rem 1.2rem .2rem .35rem;
  }
  .uhr_header .jupi_theme_switch { width: 60px; min-width: 60px; height: 36px; }
  .uhr_header .jts_thumb { width: 28px; height: 28px; top: 4px; left: 4px; }
  html[data-theme="dark"] .uhr_header .jts_thumb { left: calc(100% - 32px); }
  .uhr_header .jts_sun { left: 8px; }
  .uhr_header .jts_moon { right: 8px; }
  .uhr_header .jts_icon { font-size: .7rem; }
}

@media (max-width: 46rem) {
  .uhr_main { padding: .45rem .5rem 0; }
  .uhr_stage { min-height: 0; border-radius: 1.1rem; }
  .uhr_welt { gap: .45rem; padding: .5rem .5rem .6rem; }

  .uhr_panel {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: stretch;
  }
  .uhr_karte { padding: .28rem .4rem; gap: .3rem; border-radius: .75rem; }
  .uhr_karte_stats { width: 100%; }
  .uhr_karte_steuer { width: 100%; }
  .uhr_stat { flex: 1 1 0; justify-content: center; padding: 0 .15rem; gap: .25rem; }
  .uhr_stat .uhr_stat_icon { font-size: 1.1rem; }
  .uhr_stat strong { font-size: 1.02rem; }
  .uhr_stat .uhr_stat_label { font-size: .5rem; letter-spacing: .01em; }

  .uhr_karte_steuer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: .3rem .4rem;
  }
  .uhr_feld {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon label" "select select";
    column-gap: .25rem;
    row-gap: .12rem;
    align-items: center;
    width: 100%;
  }
  .uhr_feld_icon { grid-area: icon; font-size: 1rem; }
  .uhr_feld label { grid-area: label; font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .uhr_select { grid-area: select; width: 100%; max-width: none; min-height: 40px; font-size: .8rem; padding-right: 1.5rem; }

  .uhr_aktionen {
    width: 100%;
    display: flex;
    gap: .35rem;
    justify-content: flex-end;
    margin-left: 0;
  }
  .uhr_rund { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }

  .uhr_schild { padding: .4rem 1rem; max-width: 100%; }
  .uhr_task_label { font-size: 1rem; }
  .uhr_kette { height: 1.4rem; }

  .uhr_uhr_box svg { height: clamp(8rem, 23vh, 12.5rem); }

  .uhr_antworten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .uhr_btn { min-height: 3.4rem; }
  .uhr_btn_zeit { font-size: 1.45rem; }
  .uhr_btn_worte { font-size: .74rem; }

  .uhr_rueckmeldung { flex-direction: column; gap: .35rem; min-height: 0; }
  .uhr_msg { font-size: .8rem; padding: .3rem .7rem; }

  .uhr_stepper { flex: 1 1 8.5rem; }
}
@media (max-width: 24rem) {
  .uhr_stat { padding: 0 .3rem; gap: .3rem; }
  .uhr_stat .uhr_stat_icon { font-size: 1.15rem; }
  .uhr_stat strong { font-size: 1.1rem; }
  .uhr_stat .uhr_stat_label { font-size: .54rem; }
  .uhr_btn_zeit { font-size: 1.25rem; }
}

/* ============================================================
   8  Dark Mode: Abend in der Werkstatt
   ============================================================ */
html[data-theme="dark"] .uhr_header {
  background: linear-gradient(160deg, #1d2f38 0%, #101c24 60%, #0a1116 100%);
}


html[data-theme="dark"] .uhr_karte {
  background: linear-gradient(180deg, #2f353d 0%, #262b32 100%);
  border-color: #4b5560;
}

html[data-theme="dark"] .uhr_karte,
html[data-theme="dark"] .uhr_stepper,
html[data-theme="dark"] .uhr_done { box-shadow: 0 6px 18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); }

html[data-theme="dark"] .uhr_stat .uhr_stat_label { color: #b39a6e; }
html[data-theme="dark"] .uhr_feld label { color: #c2a878; }

html[data-theme="dark"] .uhr_select {
  color: #f3ead8;
  background-color: #1c232b;
  background-image:
    linear-gradient(45deg, transparent 50%, #e8dcc2 50%),
    linear-gradient(135deg, #e8dcc2 50%, transparent 50%);
}

html[data-theme="dark"] .uhr_btn {
  color: #eaf3fb;
  border-color: #2f6f9c;
  background: linear-gradient(180deg, #3a5f7c 0%, #2a4b64 60%, #23405a 100%);
  box-shadow: 0 5px 0 #142838, 0 10px 16px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .16);
}

html[data-theme="dark"] .uhr_btn_worte { color: #b9d3e4; }

html[data-theme="dark"] .uhr_btn_right {
  border-color: #3d9a63;
  background: linear-gradient(180deg, #2f6b48 0%, #245638 100%);
  box-shadow: 0 5px 0 #173a26, 0 10px 16px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .16);
}

html[data-theme="dark"] .uhr_btn_wrong {
  opacity: 1;
  border-color: #c1544a;
  background: linear-gradient(180deg, #7a3830 0%, #5c2721 100%);
  box-shadow: 0 5px 0 #3d1611, 0 10px 16px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .uhr_task_label { color: #2b2418; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
html[data-theme="dark"] .uhr_schild {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #e8cf9a 0%, #d8b878 55%, #cfa964 100%);
}

html[data-theme="dark"] .uhr_msg {
  color: #f3ead8;
  background: rgba(30, 38, 46, .95);
  border-color: var(--uhr-papier-rand);
}

html[data-theme="dark"] .uhr_msg_ok { color: #a8e6c4; background: rgba(24, 48, 36, .95); border-color: #3d7a58; }
html[data-theme="dark"] .uhr_msg_err { color: #ffb4ac; background: rgba(58, 28, 26, .95); border-color: #8e3f37; }

html[data-theme="dark"] .uhr_done h3,
html[data-theme="dark"] .uhr_modal h2 { color: #f3ead8; }
html[data-theme="dark"] .uhr_modal .uhr_lernziel { background: rgba(0, 0, 0, .28); }

/* Ruhe fuer alle, die keine Bewegung wollen (AGENTS.md 3.13.5) */
@media (prefers-reduced-motion: reduce) {
  .uhr_btn,
  .uhr_rund,
  .uhr_hauptknopf,
  .uhr_stepper_row button,
  .uhr_header .jupi_nav_back {
    transition: none;
  }
  .uhr_btn_wrong { animation: none; }
}