:root {
  --grade-backdrop: saturate(.92) contrast(1.04) brightness(.98);
  --grade-hero: saturate(1.08) contrast(1.055);
  --accent2: #ffb46b;
  --ink: #493d32;
  --hud: #f6e6c3;
  --hud2: #fff8e6;
  --hudSh: #5b4433;
  --cta: #6cc24a;
  --ctaInk: #1f5e24;
  --brassL: #f1cd55;
  --aqua: #765641;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden], .hidden { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #49382c; }
body { position: fixed; inset: 0; color: #fff; font-family: system-ui, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none; }
/* opt-0929 (29.09.2026, Befund A8): iOS-Callout-Menue (Kopieren/Sichern) unterbrach lange Tipp-/Halte-Gesten auf
   Spiel-UI; button/Hub deckt auch alle Hub-Kacheln ab (meta.js btn() erzeugt <button>). Keine Eingabefelder betroffen. */
button, .toolBtn img, #tools, #seKisteSprite, canvas { -webkit-touch-callout: none; }
/* Getrennte Farbgrade: klare Weltkonturen, ruhige Halle, kraeftige Helden; HUD bleibt ungefiltert. */
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#meta-root { position: absolute; inset: 0; pointer-events: auto; }
/* Der Meta-Host selbst lag im ersten Kandidaten unsichtbar ueber #game und
   fing echte Touch-Drags ab. FAHRT entfernt ihn vollstaendig aus Hit-Testing. */
#meta-root[hidden] { display: none !important; pointer-events: none !important; }
#fahrt-ui { position: fixed; inset: 0; z-index: 5; pointer-events: none;
  --hud: #f6e6c3; --hud2: #fff8e6; --hudSh: #5b4433; --ink: #493d32; }
#fahrt-ui button { font-family: inherit; pointer-events: auto; }
#build-id { position: fixed; right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(3px + env(safe-area-inset-bottom, 0px)); z-index: 9; color: rgba(255,255,255,.52);
  font-size: 8px; letter-spacing: .06em; pointer-events: none; }
/* opt-0929 (29.09.2026, Befund A6): waehrend FAHRT/FLUG zeigt .hcBuildGame (#buildTagGame) denselben Text unten rechts;
   #build-id waehrend #fahrt-ui sichtbar ist (main.js hebt hidden auf) ausblenden statt doppelt zu zeigen. */
body.gg-h-fahrt:not(#gg-nie) #build-id { display: none; }
#fehler-tafel { position: fixed; inset: 6%; z-index: 999; overflow: auto; white-space: pre-wrap;
  background: rgba(40,8,8,.96); border: 2px solid #d9534f; border-radius: 12px;
  color: #ffd7d5; font: 13px/1.5 ui-monospace, monospace; padding: 16px; }

/* 2c00763:src/styles.css — aktive V1-Fahrtanzeigen. */
#muteBtn {
  position: absolute; top: 8px; left: calc(10px + env(safe-area-inset-left, 0px)); z-index: 6;
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--hud); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--hudSh); color: #493d32; font-size: 16px; cursor: pointer;
}
#muteBtn:disabled { cursor: default; opacity: .72; }
#fahrt-zentrale {
  position: absolute; top: 8px; left: calc(58px + env(safe-area-inset-left, 0px)); z-index: 7;
  min-width: 142px; min-height: 44px; padding: 6px 14px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hud); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--hudSh), inset 0 2px 0 var(--hud2); color: #493d32;
  font-size: 11px; font-weight: 900; letter-spacing: .08em; white-space: nowrap;
  cursor: pointer; pointer-events: auto; touch-action: manipulation;
}
#fahrt-zentrale.lohnBereit::after {content:'';position:absolute;bottom:3px;width:14px;height:2px;background:#a37524;border-radius:2px;pointer-events:none;}
#fahrt-zentrale:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hudSh); }
/* #pauseBtn ist nur der vom unveraenderten HUD-Binder erwartete Knoten. Als
   inerter, pointerloser Nachfahr des echten Buttons ist er kein zweiter Pfad. */
#pauseBtn { pointer-events: none; }
#hudTop { position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: center; padding: 7px 18px; background: var(--hud);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 4px 0 var(--hudSh), inset 0 2px 0 var(--hud2);
  font-size: 15px; font-weight: 800; font-style: italic; white-space: nowrap; }
#hudTop .lbl { color: #ead4aa; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  display: block; text-transform: uppercase; font-style: normal; }
#hudTop .val { font-size: 18px; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 1px 1px 0 var(--ink); }
#hudTop .hudMeter { margin-right: 4px; padding-right: 14px; border-right: 2px solid rgba(91,68,51,.6); }
#hudTop .hudMeter .val { font-size: 27px; font-weight: 900; color: var(--brassL);
  text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink),
    -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink); }
#hudTop .hudMeter .lbl { color: var(--brassL); }
#hudTop .hudSlim { display: none; }

#coinHud { position: absolute; top: 54px; left: calc(10px + env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px;
  background: var(--hud); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--hudSh);
  font-size: 16px; font-weight: 900; font-style: italic; font-variant-numeric: tabular-nums;
  color: var(--brassL); text-shadow: 1px 1px 0 var(--ink); }
#coinHud .chIco { font-size: 14px; }
#gullyHud { position: absolute; top: 88px; left: calc(10px + env(safe-area-inset-left, 0px));
  z-index: 6; display: flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 12px; background: var(--hud); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--hudSh); font-size: 16px; font-weight: 900;
  font-style: italic; font-variant-numeric: tabular-nums; color: var(--aqua);
  text-shadow: 1px 1px 0 var(--ink); pointer-events: none; }
#gullyHud .chIco { font-size: 14px; }

#matBanner { position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  max-width: min(340px, 74vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 12px; border-radius: 10px; background: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--hudSh); font-size: 11px; letter-spacing: 1.2px;
  font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--brassL); }

/* STAU-SIGNAL (05.09.): einzige bewusste Ausnahme von Kevins HUD-frei-Gesetz
   (s. #fahrt-ui-Regel weiter unten) — ein Cluster-Bruch-Fortschritt laesst
   sich nicht ueber einen Werkzeug-Glow zeigen wie beim EMPFOHLENEN KOPF,
   darum bleibt dieser Knoten davon ausgenommen. */
#stauHud { position: absolute; top: 88px; left: 50%; transform: translateX(-50%);
  padding: 2px 12px; border-radius: 10px; background: var(--hud); border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--hudSh); font-size: 11px; letter-spacing: 1px;
  font-weight: 800; font-style: italic; text-transform: uppercase; color: #704323;
  white-space: nowrap; pointer-events: none; z-index: 5; }

#rivalHud { position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; max-width: min(340px, 74vw); overflow: hidden;
  padding: 2px 12px; border-radius: 11px; background: var(--hud); border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--hudSh); font-size: 11px; font-weight: 800; font-style: italic;
  white-space: nowrap; color: #fff; pointer-events: none; z-index: 5; }
#rivalHud.show { display: flex; }
#rivalHud.ahead { border-color: #7ee08f; }
#rivalHud .rvFlag { font-size: 13px; }
#rivalHud .rvName { color: var(--brassL); letter-spacing: .5px; text-transform: uppercase; }
#rivalHud .rvGap { font-variant-numeric: tabular-nums; }

#tvMon { position: absolute; top: 8px; right: 10px; width: 172px; padding: 5px 10px;
  line-height: 1.2; background: var(--hud); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 4px 0 var(--hudSh), inset 0 2px 0 var(--hud2); }
#tvMon .tvHead { font-size: 9px; letter-spacing: 1.5px; color: #ead4aa; font-weight: 800;
  display: flex; align-items: center; gap: 6px; text-transform: uppercase; }
#tvMon .recDot { width: 7px; height: 7px; border-radius: 50%; background: #ee0d0b;
  border: 1px solid var(--ink); animation: blink 1.2s infinite; }
@keyframes blink { 0%,60% { opacity: 1; } 61%,100% { opacity: .15; } }
#tvType { font-size: 13px; font-weight: 800; font-style: italic; margin-top: 1px; color: #fff;
  text-shadow: 1px 1px 0 var(--ink); }
#tvDist { font-size: 10.5px; color: #ead4aa; font-variant-numeric: tabular-nums; }
#tvHint { font-size: 10.5px; color: var(--brassL); margin-top: 1px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
#tvMon.tvIdle { padding: 5px 11px; opacity: .72; }
#tvMon.tvIdle #tvType { font-size: 11px; margin-top: 1px; }
#tvMon.tvIdle #tvDist, #tvMon.tvIdle #tvHint { display: none; }
#tvRoutes { display: none; }

#radio { position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 4px; max-width: min(400px, 80vw);
  padding: 3px 11px; text-align: left; white-space: nowrap; overflow: hidden;
  background: rgba(18,14,9,.82); border: 1px solid rgba(255,138,0,.35);
  border-radius: 9px; font-size: 11.5px; line-height: 1.25; pointer-events: none;
  z-index: 6; opacity: 0; transition: opacity .25s; }
#radio #radioTxt { overflow: hidden; text-overflow: ellipsis; }
#radio.show { opacity: .95; }
#radio .who { color: var(--accent2); font-weight: 700; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; margin-right: 6px; }

#tools { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 7px; }
/* 06.09. WERKZEUG-KOMPAKT: Touchziel 44px, aktive Karte 56px. */
.toolBtn { position: relative; width: 44px; height: 44px; background: #765641;
  border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 0 4px 0 var(--hudSh), inset 0 2px 0 #789084; color: #fff0ce;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; padding: 3px 2px; opacity: .96;
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.toolBtn .uiIco { display: block; width: 24px; height: 24px; object-fit: contain; pointer-events: none; }
.toolBtn .tName { display: none; }
.toolBtn .tKey { font-size: 8px; font-weight: 800; color: #ead4aa; background: var(--ink);
  position: absolute; top: 3px; right: 3px; border-radius: 4px; padding: 0 3px; line-height: 1; }
.toolBtn.active { width: 56px; height: 56px; padding: 3px 2px; gap: 1px; opacity: 1;
  border: 3px solid #365337; border-radius: 14px; background: #f4ce67; transform: translateY(-4px);
  box-shadow: 0 6px 0 var(--ctaInk), inset 0 2px 0 var(--hud2); }
.toolBtn.active .uiIco { width: 30px; height: 30px; }
.toolBtn.active .tName { display: block; max-width: 100%; font-size: 9px; line-height: 1.05;
  text-align: center; white-space: nowrap; font-weight: 800; font-style: italic;
  letter-spacing: .2px; color: #343d2a; text-shadow: none; }
.toolBtn.active .tKey { font-size: 8px; padding: 0 3px; }
/* KOPFWECHSEL-SQUASH (02.09.): kurzer Stauch auf der neu aktiven Karte,
   das translateY(-4px) der .active-Ruhelage bleibt in jedem Frame erhalten. */
.toolBtn.kopfSquash { animation: kopfSquash .22s ease-out 1; }
@keyframes kopfSquash {
  0% { transform: translateY(-4px) scale(1, 1); }
  40% { transform: translateY(-4px) scale(1.22, 0.8); }
  100% { transform: translateY(-4px) scale(1, 1); }
}
/* Canvas-Projektion bleibt am Kopf; Name und Hotkey teilen keine Hoehenreihe. */
.toolBtn .ketteHudCanvas { width: 24px !important; height: 24px !important; }
.toolBtn.active.ketteCanvasReady {
  width: 56px; height: 56px; padding: 3px 2px;
  display: flex; flex-direction: column; gap: 1px;
  align-items: center; justify-content: center;
}
.toolBtn.active.ketteCanvasReady .ketteHudCanvas {
  width: 30px !important; height: 30px !important; margin: 0;
}
.toolBtn.active.ketteCanvasReady .tName {
  max-width: none; overflow: visible; font-size: 9px; line-height: 1.05;
  white-space: nowrap; text-align: center;
}

#meters { position: absolute; left: calc(10px + env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex;
  flex-direction: column; gap: 5px; width: 168px; }
.meterBox { background: var(--hud); border: 2.5px solid var(--ink); border-radius: 12px;
  padding: 4px 9px; box-shadow: 0 3px 0 var(--hudSh); }
.meterBox.mHide { display: none; }
.meterBox .mLbl { font-size: 8.5px; letter-spacing: 1px; color: #ead4aa; font-weight: 800;
  font-style: italic; display: flex; justify-content: space-between; text-transform: uppercase; }
.barOuter { height: 11px; background: #49382c; border: 2px solid var(--ink); border-radius: 6px;
  margin-top: 4px; overflow: hidden; }
.barFill { height: 100%; width: 100%; border-radius: 3px; transform: scaleX(0);
  transform-origin: left center; will-change: transform; }
#sysFill { background: linear-gradient(90deg, #d6ad73 0 45%, #dd9d22 45% 78%, #ee0d0b 78% 100%); }
#torqueFill { background: linear-gradient(90deg, #765641 0 34%, #3da93f 34% 76%, #dd9d22 76% 90%, #ee0d0b 90% 100%); }
#pipeFill { background: linear-gradient(90deg, #ee0d0b 0 22%, #dd9d22 22% 55%, #3da93f 55% 100%); }

#slotBtn { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 6; width: 68px;
  height: 68px; border-radius: 14px; cursor: pointer; padding: 0; background: var(--hud);
  border: 2px solid var(--ink); color: #302319; box-shadow: 0 4px 0 var(--hudSh), inset 0 2px 0 var(--hud2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: manipulation; }
#slotBtn .slSym { font-size: 27px; line-height: 1; z-index: 1; color: #493d32;
  text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.hcBuildGame { position: fixed; z-index: 9; pointer-events: none;
  right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(0px + env(safe-area-inset-bottom, 0px)); padding: 1px 5px;
  border-radius: 5px 5px 0 0; background: rgba(73,56,44,.62);
  border: 1px solid rgba(255,255,255,.07); font: 700 8px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .2px; color: rgba(234,212,170,.78);
  text-shadow: 0 1px 1px rgba(0,0,0,.7); white-space: nowrap; }
#v2Audit { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  color: rgba(255,255,255,.45); font-size: 8px; letter-spacing: .08em; }

#dreh-hinweis { display: none; }
@media (max-width: 700px), (max-height: 560px) {
  #muteBtn { width: 44px; height: 44px; font-size: 15px; border-width: 2px; }
  #fahrt-zentrale {
    top: 8px; left: calc(62px + env(safe-area-inset-left, 0px));
    min-width: 132px; min-height: 44px; padding: 5px 10px;
    border-width: 2px; font-size: 10px;
  }
  /* B6 touch floor retained; compact dimensions are shared with desktop. */
  .toolBtn { width: 44px; height: 44px; }
  .toolBtn.active { width: 56px; height: 56px; }
  .toolBtn .uiIco { width: 21px; height: 21px; }
  .toolBtn.active .uiIco { width: 30px; height: 30px; }
  .toolBtn.active .tName { font-size: 9px; line-height: 1.05; letter-spacing: .2px; }
  .toolBtn.active.ketteCanvasReady {
    width: 56px; height: 56px;
  }
  .toolBtn.active.ketteCanvasReady .ketteHudCanvas {
    width: 30px !important; height: 30px !important;
  }
  #tools { left: 50%; transform: translateX(-50%); right: auto; gap: 5px; }
  #meters { width: 128px; bottom: 106px; }
  #hudTop { gap: 10px; font-size: 12px; padding: 3px 11px; top: 6px; }
  #hudTop .val { font-size: 15px; }
  #hudTop .lbl { display: inline; font-size: 9px; margin-right: 4px; letter-spacing: .6px; }
  #hudTop .hudMeter .val { font-size: 17px; }
  #hudTop .hudMeter { margin-right: 2px; padding-right: 9px; }
  #hudTop .hudSlim { display: none; }
  #tvMon { width: 114px; font-size: 10.5px; }
  #tvMon.tvIdle { width: 96px; }
  #radio { top: 62px; max-width: min(300px, 58vw); font-size: 11px; }
  #slotBtn { width: 56px; height: 56px; border-radius: 12px;
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
  #slotBtn .slSym { font-size: 23px; }
}
@media (orientation: portrait) {
  /* Automatische Neupruefung (06.10.2026): reine CSS-Media-Query - kein JS/matchMedia noetig,
     der Browser wertet @media (orientation:) bei jeder Drehung sofort neu aus, der Hinweis
     verschwindet also im selben Frame wie die Drehung, ganz ohne Resize-Listener. */
  #dreh-hinweis { position: fixed; inset: 0; z-index: 500; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    text-align: center; background: #49382c; color: #FFF4D8; }
  #dreh-hinweis .drehGustav { width: 96px; height: auto; margin-bottom: 4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
  #dreh-hinweis .drehIcon { width: 44px; height: 76px; border: 4px solid #FFF4D8;
    border-radius: 10px; transform: rotate(90deg); animation: drehWackeln 1.6s ease-in-out infinite; }
  #dreh-hinweis strong { font-size: 22px; letter-spacing: .12em; }
  #dreh-hinweis small { font-size: 13px; color: #F6B73C; letter-spacing: .18em; }
}
@keyframes drehWackeln { 0%, 100% { transform: rotate(90deg); } 50% { transform: rotate(78deg); } }
@media (prefers-reduced-motion: reduce) { #dreh-hinweis .drehIcon { animation: none; } }


/* ===== HUD-FREI (Kevins Gesetz 30.08.: "generell keine HUDs, alles soll
   visuell sein") — die Zahlenanzeigen der FAHRT verschwinden. Sichtbar
   bleibt nur, was STEUERUNG ist: die Werkzeugkarten und die Rueckkehr.
   Zustand liest man ab jetzt am Bild ab: Wasserstand im Rohr, glühender
   Kopf (Combo), rote Hitze und schlagende Spirale (Ueberdrehen),
   Schmierfilm (dreckig/sauber), blaue Randflut (Keller). ===== */
#fahrt-ui #hudTop, #fahrt-ui #coinHud, #fahrt-ui #matBanner,
#fahrt-ui #tvMon { display: none !important; }
/* Rohrsystem S1: vorhandene Rohranzeige bleibt sichtbar; Wandspuren tragen den Schaden im Bild. */
#fahrt-ui #meters { display: flex; width: 138px; pointer-events: none; }
#fahrt-ui #meters > .meterBox:not(#pipeBox):not(#kellerBox) { display: none !important; }
#fahrt-ui #pipeBox { display: block; --pipe-tone: #7fe08a; border-color: #5b4433; padding: 5px 8px; min-width: 118px; }
#fahrt-ui #pipeBox[data-zustand="warn"] { --pipe-tone: #ffd24a; border-color: #826733; }
#fahrt-ui #pipeBox[data-zustand="kritisch"] { --pipe-tone: #ff5b4d; border-color: #98483d; }
#fahrt-ui #pipeFill { background: var(--pipe-tone); transform: scaleX(1); }
#fahrt-ui #pipePct { color: var(--pipe-tone); font-variant-numeric: tabular-nums; }
#fahrt-ui #pipeBox .barOuter { height: 8px; margin-top: 3px; }
/* S4: kompakter Vorrat; ausschliesslich Regeln innerhalb des Fahrt-HUD. */
#fahrt-ui #meters { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
#fahrt-ui #vorrat { position: absolute; left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
#fahrt-ui #vorratTitel { display: block; margin: 0 0 5px 2px; font-size: 9px; line-height: 11px; font-weight: 800; letter-spacing: 1px; color: #ead4aa; text-transform: uppercase; text-shadow: 0 1px 2px #5b4433; }
#fahrt-ui .vorratPlaetze { display: flex; gap: 5px; }
/* Design-Schleife Runde 4, 24.09.2026, Punkt fahrt-vorrat-bonbon: runde Bonbon-Kachel statt
   eckigem Kasten (border-radius 999px macht aus dem 48x48-Quadrat einen Kreis, wie die
   Bonbon-Pillen bei .seErtragTeil), weiche Kontur statt harter Kante. */
#fahrt-ui [data-vorrat] { width: 48px; height: 48px; padding: 3px 2px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border: 1px solid #589273; border-radius: 999px; background: #49382c; color: #e0ffea; box-shadow: 0 3px 0 #5b4433; cursor: pointer; touch-action: manipulation; }
#fahrt-ui [data-vorrat][data-sorte=""] { border: 1px dashed #b17b39; background: rgba(73,56,44,.82); color: #ead4aa; box-shadow: none; cursor: default; }
#fahrt-ui [data-vorrat][data-sorte="pumpe"] { border-color: #b17b39; background: #49382c; }
#fahrt-ui [data-vorrat][data-sorte="bombe"] { border-color: #f4a468; background: #4b3529; }
#fahrt-ui [data-vorrat][data-sorte="magnet"] { border-color: #f17b80; background: #492f3b; }
#fahrt-ui [data-vorrat][data-sorte="turbo"] { border-color: #e6cb5d; background: #48412a; }
#fahrt-ui [data-vorrat]:disabled { box-shadow: none; cursor: default; }
#fahrt-ui [data-vorrat]:disabled:not([data-sorte=""]) { opacity: .65; }
#fahrt-ui [data-vorrat]:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #5b4433; }
#fahrt-ui .vorratIcon { font-size: 21px; line-height: 23px; pointer-events: none; }
#fahrt-ui .vorratIcon img { display: block; width: 34px; height: 23px; }
#fahrt-ui [data-sorte="flicken"] .vorratName { font-size: 8px; }
#fahrt-ui .vorratName { font-size: 9px; line-height: 11px; font-weight: 800; pointer-events: none; }

/* ===== EMPFOHLENER KOPF (01.09., Kevins V1-Haptik-Auftrag) =====
   V1 sagt im TV-Monitor an, welcher Kopf zur naechsten Verstopfung passt.
   In V2 ist der TV-Monitor per Gesetz ausgeblendet ("keine HUDs") — die
   Ansage sitzt deshalb auf der WERKZEUGKARTE selbst: der passende Kopf
   meldet sich, sobald eine Verstopfung voraus steht. Kein Text, kein
   Kasten, nur das Werkzeug, das man ohnehin ansieht. */
/* Kevin 20.10.: kein gruener Leuchtring mehr um die empfohlene Karte - Gustavs Handschuh (.werkzeugHand) zeigt auf das richtige Werkzeug. */
#fahrt-ui .toolBtn.empfohlen { border-color: #7fe08a; }
/* JUICE-1014-02 (Kevin 13.10. Nachtrag 4 B3): der empfohlene Kopf zappelt im eigenen Slot - ruettelt, dann schnappt er Richtung Rohr (nach oben), im Takt des Ring-Pulses. Nur das innere Bild bewegt sich (max. 4 px + 40 %, Bildbox bleibt im Slot), Button/Flaeche stehen; reduced-motion: Regel '#fahrt-ui *' stoppt es. */
#fahrt-ui .toolBtn.empfohlen:not(.active) .uiIco,#fahrt-ui .toolBtn.empfohlen:not(.active) .ketteHudCanvas{animation:kopfZappeln 1.1s ease-in-out infinite}@keyframes kopfZappeln{0%,40%,76%,100%{transform:none}8%{transform:translateX(-2px) rotate(-16deg) scale(1.1)}16%{transform:translateX(2px) rotate(15deg) scale(1.1)}24%{transform:translateX(-1.5px) rotate(-11deg) scale(1.05)}32%{transform:translateX(1px) rotate(8deg)}50%{transform:translateY(-4px) scale(1.4) rotate(-8deg)}57%{transform:translateY(-1px) scale(1.2)}65%{transform:translateY(-3px) scale(1.32) rotate(6deg)}}
/* S3: Gefahr bleibt auch bei gruener Werkzeugempfehlung deutlich rot. */
#fahrt-ui .toolBtn .toolWarn { display: none; }
#fahrt-ui .toolBtn.kunststoffGefahr {
  border: 3px solid #ff5b4d; background: #50272a; opacity: 1;
  box-shadow: 0 0 0 2px #541819, 0 0 0 4px #ff7765, 0 0 18px #ff443b80;
  animation: none;
}
#fahrt-ui .toolBtn.kunststoffGefahr .toolWarn {
  display: grid; place-items: center; position: absolute; left: -4px; top: -12px;
  width: 21px; height: 21px; border: 1px solid #ff7765; border-radius: 6px;
  background: #32171b; color: #ffe1a1; font: 900 20px/1 "Segoe UI Symbol", system-ui;
  pointer-events: none;
}
#fahrt-ui .toolBtn.kunststoffGefahr .tName { color: #ffe2d7; }
@keyframes empfohlenPuls {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50%      { opacity: 1; transform: scale(1); }
}

/* ===== SCHICHTENDE (01.09., V1-Haptik Schritt 3) =====
   V1 gespielt: beim Tod kommt Zeugnis, Todesursache im Klartext und ein
   Coaching-Satz, der genau zu dieser Ursache passt. Das ist der groesste
   Hebel fuers Wiederspielen — V2 sprang bisher wortlos in die Zentrale.
   Ein SCHIRM ist kein HUD: Kevins Gesetz gilt der Fahrt, nicht dem
   Abschluss (V1 hat dieselbe Trennung). */
/* A compact two-column shift report: cause, performance, then next action. */
/* opt-0929 (29.09.2026, Befund A7): Padding wie #zweiteChance (:927) mit max(..., env(safe-area-inset-*)) - iPhone-Notch/Home-Indicator schneidet sonst in Rand/Knoepfe. */
#schichtende{position:fixed;inset:0;z-index:400;overflow-y:auto;color:#fff4d8;font-family:Bahnschrift,Segoe UI,system-ui,sans-serif;display:grid;grid-template-columns:minmax(220px,300px) minmax(220px,300px);grid-template-rows:repeat(6,auto);align-content:safe center;justify-content:center;align-items:stretch;gap:12px 16px;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 30%,#49382cf5,#49382cfa 75%);text-align:left}
#seGrund{grid-column:1/-1;font-size:clamp(24px,3vw,34px);line-height:1.1;color:#ffad91;text-align:center;text-shadow:0 3px 0 #5b4433}
/* Design-Schleife Runde 3, 24.09.2026, Punkt schichtende-toast-frei, Korrektur:
   den Block NICHT verschieben (das schob die Knoepfe unten aus dem 412px-Bild).
   Stattdessen den Aufgabe-Toast (#hudMeldung) im Schichtende-Zustand auf den
   24px-Padding-Rand des Blocks verkleinern: er sitzt oberhalb der Schlagzeile
   #seGrund, ueberdeckt nichts und kostet keinen Platz im Grid. */
body.gg-h-ende.gg-h-meldung:not(#gg-nie):not(#gg-nie) #hudMeldung{top:calc(4px + env(safe-area-inset-top, 0px)) !important;max-width:70vw !important;padding:3px 10px !important;font-size:10px !important;line-height:1.15 !important}
#seTipp{grid-column:1/-1;text-align:center;color:#ead4aa;font-size:13px;line-height:1.5;margin-bottom:8px}
#seZeugnis{display:flex;flex-direction:column;grid-column:1;grid-row:3/5;justify-content:center;gap:6px;padding:18px;border:2px solid #d9ac54;border-radius:14px;background:linear-gradient(135deg,#fff4d8,#e8d8b1);color:#493d32;box-shadow:0 4px 0 #5b4433,inset 0 2px 0 #fff9e8}
#seZeugnis .seZLbl{color:#735018;font-size:10px;font-weight:800;letter-spacing:.17em}
#seStufe{font-size:23px;line-height:1.15}
#seNote{font-size:13px;font-weight:800;color:#356d46}
#seBemerkung{color:#493d32;font-size:12px;line-height:1.4}
#seZahlen{grid-column:2;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#seZahlen>div{display:flex;flex-direction:column;gap:3px;min-width:0;justify-content:center;padding:14px 10px;border:1px solid #a77c52;border-radius:12px;background:#49382c;box-shadow:inset 0 2px 0 #ffffff0a}
#seZahlen .seLbl{font-size:10px;letter-spacing:.12em;color:#ead4aa}
#seZahlen .seVal{font-weight:900;font-size:clamp(22px,3vw,30px);font-variant-numeric:tabular-nums;color:#fff4d8}
.seErtrag{display:flex;font-variant-numeric:tabular-nums;grid-column:2;grid-row:4;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:0;padding:8px;border:1px solid #5b4433;border-radius:10px;background:#49382c}
/* FEIERABEND-KISTE (23.09.2026): Kistenzeile ueber den Knoepfen,
   analog Zeugnis/Ertrag-Kaesten - reine Anzeige (main.js kisteHinweis). */
#seKiste{grid-column:1/-1;grid-row:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:8px 14px;border:1px solid #a9772c;border-radius:10px;background:#1c1608;font-size:12px;color:#f5e5bd}
#seKiste .seKisteLbl{font-weight:900;letter-spacing:.1em;font-size:10px;color:#e7c467}
/* Design-Schleife Runde 3, 24.09.2026, Punkt schichtende-belohnung-pillen: Mini-Sprite der
   Kiste (gleiches Bild + Stufenfilter wie das Regal, .gkKiSprite in kisten.js) links der Zeile,
   Status/Timer-Text rechts als Chip. Reine Groessen-/Chip-Optik - der Stufenfilter kommt
   unveraendert aus .gkKiSprite[data-stufe=...] weiter unten (Zeile ~549ff). */
#seKiste .gkKiSprite{height:26px;width:auto;flex:0 0 auto}
#seKiste #seKisteInfo{padding:3px 10px;border-radius:999px;background:#3a2a0c;border:1px solid #7a5a1e;font-size:11px;color:#ffe6a8;white-space:nowrap}
#seNeu,#seZentrale{font-family:inherit;cursor:pointer;grid-row:6;min-height:48px;margin:6px 0 0;border:2px solid #5b4433;border-radius:12px;font-size:14px;line-height:1.2;letter-spacing:.04em;padding:12px 18px;font-weight:900}
#seNeu{grid-column:2;background:linear-gradient(#ffd86b,#e7a928);color:#302319;box-shadow:0 4px 0 #765641,inset 0 2px 0 #fff3d8}
#seZentrale{grid-column:1;background:#49382c;border-color:#a77c52;color:#ead4aa;box-shadow:0 4px 0 #5b4433}
#schichtende button:focus-visible{outline:3px solid #f6c865;outline-offset:4px}
#schichtende button:active:not(:disabled){transform:translateY(2px);filter:brightness(.95)}
#schichtende button:disabled{opacity:.5;cursor:wait;box-shadow:none}
@media(max-height:450px){#schichtende{gap:8px 14px;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}#seTipp{margin-bottom:2px}#seZeugnis{padding:12px 16px}#seZahlen>div{padding:10px}#seNeu,#seZentrale{margin-top:2px}}
@media(max-width:520px){#schichtende{grid-template-columns:minmax(0,380px);grid-template-rows:auto;align-content:safe center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));gap:10px}#seZeugnis,#seZahlen,.seErtrag,#seKiste,#seNeu,#seZentrale{grid-column:1;grid-row:auto}#seZahlen .seVal{font-weight:900;font-size:28px}#seNeu{order:1}#seZentrale{order:2}}


/* ===== TUTORIAL (01.09., V1-Haptik Schritt 4) =====
   V1 koppelt jeden Schritt an eine TAT, nicht an eine Uhr — man kommt
   erst weiter, wenn man es wirklich gemacht hat. Der Streifen sitzt oben
   und nimmt der Fahrt keinen Platz; er ist Anleitung, kein HUD, und
   verschwindet nach dem letzten Schritt fuer immer. */
#tutorial {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; align-items: center; gap: 10px;
  max-width: min(680px, 94vw); padding: 8px 14px;
  border: 1px solid rgba(246, 183, 60, .55); border-radius: 999px;
  background: rgba(12, 9, 5, .82); color: #FFF4D8;
  font-family: 'Bahnschrift', 'Segoe UI Semibold', system-ui, sans-serif;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
#tutorial[hidden] { display: none; }
#tutSchritt { flex: none; padding: 2px 8px; border-radius: 999px;
  background: #F6B73C; color: #1a1206; font: 900 11px/1.5 inherit; letter-spacing: .08em; }
#tutText { margin: 0; font-size: 13px; line-height: 1.35; }
#tutText b { color: #F6B73C; }
/* HD-WASSERTANK (04.09.): ohne Anzeige spuckt die leere Duese wortlos ins
   Leere. Die Taste sitzt oben rechts; der reservierte Rand verhindert jede
   Ueberdeckung bei der kompakten 44/56px-Karte. */
#hdTank { position: absolute; left: 6px; right: 18px; top: 3px; height: 4px; border-radius: 2px; background: rgba(73,56,44,.55); overflow: hidden; }
#hdTank i { display: block; height: 100%; width: 100%; background: #6fd0ff; transform-origin: left; transition: transform .12s linear; }
#hdTank.isLeer i { background: #E95F4F; }
/* Schliess-Knopf (04.09.): das Tutorial war weder wegklickbar noch endete es
   von selbst — Schritt 5 verlangt einen Drallwechsel per Doppeltipp. */
#tutZu { flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; border-radius: 999px; background: transparent; color: #FFF4D8; font: 700 20px/1 system-ui, sans-serif; cursor: pointer; opacity: .75; }
#tutZu:hover, #tutZu:focus-visible { opacity: 1; background: rgba(246,183,60,.18); }

/* ---- MODUL-LEISTE + NOT-BYPASS (Kevin 02.09.: Werkstatt direkt im Spiel sichtbar) ---- */
#modStrip { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px)); top: 96px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
#modStrip.hidden { display: none; }
.modChip { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; border-radius: 17px; background: rgba(91,68,51,.94); border: 2px solid #5b4433; color: #ead4aa; font-size: 10px; font-weight: 900; letter-spacing: .06em; box-shadow: 0 3px 0 #5b4433; transition: transform .12s, border-color .12s; }
.modChip img { width: 26px; height: 26px; object-fit: contain; }
.modChip.aktiv { border-color: #efbd5b; color: #fff; transform: translateX(-6px) scale(1.08); box-shadow: 0 0 0 3px rgba(239,189,91,.35), 0 0 16px rgba(239,189,91,.7), 0 3px 0 #5b4433; animation: modPuls .5s ease-out infinite alternate; }
@keyframes modPuls { from { transform: translateX(-6px) scale(1.05); } to { transform: translateX(-6px) scale(1.1); } }
/* Treffer-Zaehler (02.09.): still bis zum ersten Leuchten, dann '+n' — und
   bleibt sichtbar (Schicht-Summe), auch wenn der Chip gleich wieder erlischt. */
.modChip .modHits { display: none; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: #E95F4F; color: #fff; font-size: 8.5px; font-weight: 900; line-height: 15px; text-align: center; }
.modChip .modHits:not([hidden]) { display: inline-block; }
/* Punch beim ERSTEN Leuchten (steigende Flanke, hud.js entscheidet wann):
   ueberschreibt die .aktiv-Transform kurz mit einem groesseren Ausschlag,
   die .12s transition auf .modChip federt danach zurueck auf 1.08. */
.modChip.punch { animation: modPuls .5s ease-out infinite alternate, modPunch .3s ease-out 1; }
@keyframes modPunch { 0% { transform: translateX(-6px) scale(1.2); } 100% { transform: translateX(-6px) scale(1); } }
#slotBtn { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: 100px; z-index: 7; min-width: 76px; height: 76px; border-radius: 38px; border: 3px solid #5b4433; background: radial-gradient(circle at 40% 35%, #f4b2a0, #ee9a84 55%, #e4816a); color: #302319; font-size: 11px; font-weight: 900; letter-spacing: .05em; text-shadow: 0 1px 0 rgba(0,0,0,.5); box-shadow: 0 5px 0 #7a231a, 0 8px 0 #5b4433; padding: 0 10px; animation: notPuls 1.4s ease-in-out infinite; }
#slotBtn.hidden { display: none; }
#slotBtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #7a231a, 0 4px 0 #5b4433; }
#fixerBtn { position:absolute; right:calc(98px + env(safe-area-inset-right, 0px)); bottom:104px; z-index:7; width:46px; height:46px; padding:3px; border:2px solid #5b4433; border-radius:12px; background:#49382c; color:#ead4aa; box-shadow:0 3px 0 #5b4433; font:800 8px/1 system-ui; touch-action:manipulation; }
#fixerBtn span, #fixerBtn strong { display:block; }
#fixerBtn strong { margin-top:3px; color:#fff; font-size:10px; }
#fixerBtn.bereit { background:#d99a18; color:#302319; box-shadow:0 3px 0 #80530d,0 0 12px #ffd24a; }
#fixerBtn.aktiv { background:#f0b82f; color:#493d32; }
#fixerBtn:disabled { opacity:.85; }
/* AUDIO 2B: Einstellungen-Modal (meta.js .gkModalBody) — drei Umschalter
   soundOn/musikOn/vibOn. meta.js besitzt die Buehne, dieses globale
   Stylesheet gilt trotzdem fuer JEDEN DOM-Knoten der Seite (index.html
   laedt es ohnehin), darum reicht ein kleiner Nachtrag hier statt eines
   zweiten <style>-Wegs. */
.gkSettingRow { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height:56px; padding: 10px 2px; border-bottom:1px solid #DEDACA; cursor:pointer; font: 15px/1.2 'Nunito','Segoe UI',system-ui,sans-serif; font-weight: 800; color: #493d32; }
.gkSettingRow input[type="checkbox"] { appearance:none; width:52px; height:30px; flex-shrink:0; border:2px solid #5b4433; border-radius:18px; background:#765641; cursor:pointer; position:relative; box-shadow:inset 0 2px 3px #5b443333; }
.gkSettingRow input[type="checkbox"]::before { content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:#FFF9E8; box-shadow:0 2px 2px #5b443355; transition:transform .14s ease; }
.gkSettingRow input[type="checkbox"]:checked { background:#2A7942; border-color:#1D5933; }
.gkSettingRow input[type="checkbox"]:checked::before { transform:translateX(22px); }
.gkSettingRow input[type="checkbox"]:focus-visible { outline:3px solid #b17b39; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .gkSettingRow input[type="checkbox"]::before { transition:none; } }
@keyframes notPuls { 0%, 100% { box-shadow: 0 5px 0 #7a231a, 0 8px 0 #5b4433, 0 0 0 0 rgba(233,95,79,.55); } 50% { box-shadow: 0 5px 0 #7a231a, 0 8px 0 #5b4433, 0 0 0 12px rgba(233,95,79,0); } }

/* ===== K6 LAUF-BALKEN (06.09., Kevin: "ansprechbaren Meterzaehler
   integrieren, Combo Zaehler dezent, und Punkte gesamt integriert fuer den
   jeweiligen Lauf, alles nicht so riesig") — additiv ans Dateiende, keine
   Regel weiter oben angefasst. Ersetzt den vom HUD-frei-Gesetz (siehe
   #fahrt-ui #hudTop weiter oben) stillgelegten alten Zahlenbalken NICHT
   durch Reaktivierung, sondern durch eine eigene, kompakte einzeilige
   Leiste auf denselben, schon vorhandenen Knoten (#distV/#scoreV/#comboV
   aus index.html — kein neues Markup noetig; die Ertragszeile haengt
   hud.js selbst per JS unters Ende-Banner). Zwei ID-Selektoren schlagen
   jede #hudTop-Regel weiter oben in JEDER Bildschirmbreite — eine einzige
   Regel deckt Desktop UND das 915x412-Mobilziel ab, keine zweite
   Media-Query noetig. Hoehe 22px < K6-Deckel 24px. */
#fahrt-ui #hudTop {
  display: none !important; /* Cleaning metres now carry the primary objective. */
  top: 6px;
  height: 22px;
  gap: 9px;
  padding: 0 10px;
  border-radius: 11px;
  border-width: 2px;
  background: rgba(73, 56, 44, .88);
  box-shadow: 0 2px 0 var(--hudSh);
  font-size: 11px;
}
#fahrt-ui #hudTop .lbl { display: none; }               /* dezent: die Zahl traegt die Aussage */
#fahrt-ui #hudTop .val { font-size: 12px; text-shadow: none; }
#fahrt-ui #hudTop .hudMeter {
  margin-right: 0; padding-right: 8px; border-right: 1px solid rgba(91, 68, 51, .5);
}
#fahrt-ui #hudTop .hudMeter .val { font-size: 14px; font-weight: 900; text-shadow: none; }
#fahrt-ui #hudTop .hudSlim { display: inline-flex; }     /* Combo wieder sichtbar (Rekord bleibt aus, s.u.) */
#fahrt-ui #hudTop .hudRecord { display: none; }          /* K6 nennt nur Meter/Combo/Punkte, kein Rekord */

/* Design-Schleife Runde 5, 24.09.2026, Punkt fahrt-combo-zaehler: Die Combo bestimmt seit heute
   auch den Vorschub (COMBO_VORSCHUB_STEP, v2/fraese.js, Deckel COMBO_KRAFT_CAP=12 in
   balance_daten.js) und war bisher nur eine blasse Ziffer ("dezent"-Regel oben ersetzt). Jetzt ein
   Bonbon-Chip: eigener Pillenkoerper, Farbe/Glow steigt mit der Stufe (1-3 weiss/neutral, 4-7 gold,
   8-11 orange-rot mit Puls, 12 = Deckel/"MAX" mit staerkerem Puls). hud.js liefert dafuer nur
   data-combo (Stufe 0..12, keine neue Logik) und die Klasse .comboPop, die bei jedem Stufenanstieg
   neu getriggert wird. Kein bestehender Selektor oben angefasst, nur additiv. */
#fahrt-ui #hudTop .hudCombo .val {
  opacity: 1; font-weight: 900; display: inline-block; padding: 1px 8px;
  border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  font-size: 14px; line-height: 1.3; color: #fff;
}
#fahrt-ui #comboV.gedaempft { visibility: hidden !important; }   /* Kevin 08.10.: HUD ruhiger, Serie erst ab dem ersten sauberen Treffer */
@keyframes comboPop { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes comboPuls { 0%, 100% { box-shadow: 0 0 6px currentColor; } 50% { box-shadow: 0 0 14px currentColor; } }
#fahrt-ui #hudTop #comboV.comboPop { animation: comboPop .28s ease; }
#fahrt-ui #hudTop #comboV[data-combo="4"], #fahrt-ui #hudTop #comboV[data-combo="5"],
#fahrt-ui #hudTop #comboV[data-combo="6"], #fahrt-ui #hudTop #comboV[data-combo="7"] {
  color: #3a2c05; background: linear-gradient(#ffe9ab, #ffc23a); border-color: #a9772c;
  box-shadow: 0 0 8px rgba(255,194,58,.65);
}
#fahrt-ui #hudTop #comboV[data-combo="8"], #fahrt-ui #hudTop #comboV[data-combo="9"],
#fahrt-ui #hudTop #comboV[data-combo="10"], #fahrt-ui #hudTop #comboV[data-combo="11"] {
  color: #fff2e6; background: linear-gradient(#ff9a52, #e8391c); border-color: #a01f0a;
  box-shadow: 0 0 10px rgba(232,57,28,.7); animation: comboPuls 1s ease-in-out infinite;
}
#fahrt-ui #hudTop #comboV[data-combo="8"].comboPop, #fahrt-ui #hudTop #comboV[data-combo="9"].comboPop,
#fahrt-ui #hudTop #comboV[data-combo="10"].comboPop, #fahrt-ui #hudTop #comboV[data-combo="11"].comboPop {
  animation: comboPuls 1s ease-in-out infinite, comboPop .28s ease;
}
#fahrt-ui #hudTop #comboV[data-combo="12"] {
  color: #fff2e6; background: linear-gradient(#ff7a3a, #c4130a); border-color: #7a0c04;
  box-shadow: 0 0 12px rgba(196,19,10,.85); animation: comboPuls .65s ease-in-out infinite;
}
#fahrt-ui #hudTop #comboV[data-combo="12"].comboPop { animation: comboPuls .65s ease-in-out infinite, comboPop .28s ease; }

/* PHASE-0 ERTRAGSZEILE (Bauplan §5, 06.09.): hud.js haengt die drei
   Werte als eigene Knoten (.seErtrag > .seErtragTeil) unters bestehende
   Ende-Banner — kein Markup hier noetig, nur die Optik. */

/* Design-Schleife Runde 3, 24.09.2026, Punkt schichtende-belohnung-pillen: Bonbon-Pillen je
   Waehrung (Reihenfolge steht in hud.js fest: Kasse, Schrott, Diamant - kein data-Attribut noetig).
   Gewonnene Werte (kein .seErtragNull) satt mit Farbglow, 0-Werte gedaempft grau. */
.seErtragTeil { display: flex; align-items: baseline; gap: 4px; font-size: 15px; font-weight: 900; line-height: 1;
  padding: 7px 14px; border-radius: 999px; border: 1px solid #5b4433; background: #49382c; color: #cdf3bc; }
.seErtragTeil i { font-style: normal; font-size: 12px; opacity: .85; }
.seErtrag > .seErtragTeil:nth-child(1):not(.seErtragNull) { color: #3a2c05; background: linear-gradient(#ffe08a, #ffc23a); border-color: #a9772c; box-shadow: 0 0 6px rgba(255,194,58,.6); }
.seErtrag > .seErtragTeil:nth-child(2):not(.seErtragNull) { color: #123018; background: linear-gradient(#a9f2b6, #52c96b); border-color: #2f7a41; box-shadow: 0 0 6px rgba(82,201,107,.55); }
.seErtrag > .seErtragTeil:nth-child(3):not(.seErtragNull) { color: #493d32; background: linear-gradient(#fff8e6, #d6ad73); border-color: #b17b39; box-shadow: 0 0 6px rgba(177,123,57,.55); }
.seErtragTeil.seErtragNull { color: #493d32; background: #49382c; border-color: #5b4433; }
.seErtragTeil.seErtragNull i { opacity: .55; }


/* K6-KOLLISION (Nachbesserung 06.09.): #tutorial (weiter oben, unveraendert)
   und #hudTop liegen beide oben zentriert und ueberlappen sich geometrisch,
   solange ein Tutorial-Schritt aktiv ist. #tutorial selbst darf additiv-only
   nicht angefasst werden — stattdessen weicht #hudTop aus: die Geschwister-
   Regel greift nur, solange #tutorial kein [hidden] traegt (hoehere
   Spezifitaet als die Basisregel oben, kein !important noetig), und schiebt
   die Leiste unter die vom Tutorial-Streifen belegte Zone (#tutorial endet
   bei top 8px + ca. 35-40px Hoehe; 54px matcht die bestehende
   #coinHud/#matBanner-Zone knapp darunter). #tutorial steht in index.html
   VOR #fahrt-ui im Markup, der Geschwister-Selektor "~" trifft daher zu. */
#tutorial:not([hidden]) ~ #fahrt-ui #hudTop { top: 84px; } /* Browser-Gate 07.09.: #tutorial ist real 70,6 px hoch (8..78,6) */

.flugSaveStatus { position: fixed; z-index: 400; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom));
  transform: translateX(-50%); margin: 0; padding: 6px 12px; min-width: 236px; max-width: min(360px, calc(100vw - 20px));
  border: 1px solid #f6b73c; border-radius: 12px; background: rgba(12,9,5,.9); color: #fff4d8;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none; }
.flugSaveStatus strong { font: 800 12px/1.15 system-ui; letter-spacing: .01em; }
.flugSaveStatus span { color: #f9d998; font: 700 10px/1.15 system-ui; }
.flugSaveStatus[hidden] { display: none; }


/* Consistent focus and motion preferences across ride controls. */
#fahrt-ui button:focus-visible,#tutZu:focus-visible{outline:3px solid #f6c865;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#fahrt-ui *,#tutorial{animation:none!important;transition:none!important}}

@media(max-width:700px) and (orientation:landscape){#tutorial{top:96px;width:calc(100vw - 24px);max-width:none}#tutorial:not([hidden]) ~ #fahrt-ui #hudTop{top:140px}}

/* ---- GLÜCKSWERK (Stufe 0/1, Kevin/Builder 23.09.2026) ----
   Der <dialog>-Stand (.gwDialog/.gwReel/.gwBox/...) ist Stufe 2 (23.09.2026,
   Bauplan GOLD §9.5) gewichen: der Raum-Screen (.gkGlueck, weiter unten)
   ERSETZT ihn vollstaendig, keine Wrapper-CSS mehr fuer den alten Dialog. */


/* ===== FEIERABEND-KISTE (23.09.2026, docs/FEIERABEND_KISTE_BAUPLAN.md Stufe 1) =====
   Regal-Ebene in der Zentrale (meta.js .gkKistenLayer, Inhalt aus v2/kisten.js).
   Die Ebene deckt die ganze Buehne, faengt aber nur im Regal/der Ausbeute-Karte
   Tipps ab. Kisten-Sprite ist kiste.png (Platzhalter, Tint je Stufe per Filter),
   bis die fuenf Higgsfield-Sprites stehen. Alles in --su, wie die Zentrale. */
.gkKistenLayer { inset:0; pointer-events:none; z-index:6; }
.gkKiKopf { display:flex; justify-content:space-between; align-items:baseline; gap:calc(.6 * var(--su)); margin-bottom:calc(.45 * var(--su)); }
.gkKiTitel { font:calc(1.55 * var(--su)) var(--gk-display); letter-spacing:.05em; color:#f6d992; }
.gkKiZaehler { font:800 calc(.95 * var(--su)) var(--gk-body); color:#ead4aa; white-space:nowrap; }
.gkKiSlots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(.55 * var(--su)); }
.gkKiSlot.isLeer { justify-content:center; opacity:.55; border-style:dashed; }
.gkKiSlot.isLaeuft { border-color:#ffd66b; box-shadow:0 0 0 calc(.16 * var(--su)) rgba(255,214,107,.32), inset 0 0 calc(1.4 * var(--su)) rgba(255,214,107,.14); }
.gkKiSlot.isBereit { border-color:#7ee08f; animation:gkKiBereit 1.6s ease-in-out infinite; }
@keyframes gkKiBereit { 0%,100% { box-shadow:0 0 0 0 rgba(126,224,143,0), 0 0 0 0 rgba(255,214,107,0); } 50% { box-shadow:0 0 calc(.7 * var(--su)) calc(.05 * var(--su)) rgba(255,214,107,.55), 0 0 0 calc(.3 * var(--su)) rgba(126,224,143,.55); } }
/* FUEHRENDER PULS FUER DEN FERTIGEN SLOT (24.09.2026, Design-Schleife Runde 3, Punkt
   zentrale-kiste-fertig-puls): Befund war, dass der fertige Slot im Regal kaum auffiel (nur
   duenner gruener Rand, kleiner OEFFNEN-Knopf). Der Rand-Puls oben bekommt zusaetzlich einen
   gold-getoenten Aussen-Glow (statt nur gruen), das Sprite wippt leicht (reines transform, kein
   Layout-Sprung) und der OEFFNEN-Knopf wird groesser und pulsiert/leuchtet mit eigenem Shine-
   Sweep - damit der fertige Slot klar der hellste Punkt im Regal ist. Andere Slots (isLeer,
   isLaeuft, Sofort-Knoepfe) bleiben unveraendert. */
.gkKiSlot.isBereit .gkKiSprite { animation:gkKiWippen 1.6s ease-in-out infinite; }
.gkKiSlot.isBereit .gkKiSprite[data-stufe="meister"] { animation:gkKiMeisterGlow 1.8s ease-in-out infinite, gkKiWippen 1.6s ease-in-out infinite; }
@keyframes gkKiWippen { 0%,100% { transform:rotate(0deg) translateY(0); } 50% { transform:rotate(-3deg) translateY(calc(-.12 * var(--su))); } }
.gkKiSlot.isBereit .gkKiBtn { min-height:38px; padding:0 calc(.75 * var(--su)); font-size:calc(1.05 * var(--su)); font-weight:900; position:relative; overflow:hidden; animation:gkKiBtnPuls 1.6s ease-in-out infinite; }
@keyframes gkKiBtnPuls { 0%,100% { box-shadow:0 0 0 0 rgba(126,224,143,0); } 50% { box-shadow:0 0 calc(.55 * var(--su)) calc(.08 * var(--su)) rgba(126,224,143,.75); } }
.gkKiSlot.isBereit .gkKiBtn::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); background-size:220% 100%; background-position:150% 0; animation:gkKiBtnShine 1.6s ease-in-out infinite; pointer-events:none; }
@keyframes gkKiBtnShine { 0%,35% { background-position:150% 0; } 70%,100% { background-position:-60% 0; } }
/* Farb-Hierarchie neu kalibriert (23.09.2026, Design-Schleife Runde 2, Punkt kisten-farbhierarchie):
   Stufenfolge grau(blech) -> gruen(stahl) -> blau(chrom) -> gold -> strahlendes Gold(meister)
   soll auf einen Blick unterscheidbar sein, nicht nur an unterschiedlichen Sepia-Toenen.
   Runde 1 setzte hue-rotate direkt auf kiste.png (fast neutral grau/silbern, kaum Farbsaettigung).
   hue-rotate drehte darum nur die wenigen blaeulichen Hochglanzstellen und ergab bei Stahl einen
   violetten statt gruenen Farbstich. Runde 2 legt wie bei Gold/Meister zuerst sepia(1) vor (macht
   das Bild verlaesslich warm-braun, ca. 38 Grad Farbton) und dreht von dort gezielt Richtung
   Gruen bzw. Blau, damit die Zielfarbe unabhaengig vom fast farblosen Ausgangsbild sicher trifft.
   Runde 3 (24.09.2026, Design-Schleife Runde 2, Punkt meister-kiste-gold-spitze): Meister war
   violett/pink getoent (hue-rotate(-60deg) auf den Gold-Sepia-Ton) - das widerspricht Prinzip 1
   (Gold/Orange/Gelb = legendaer, maximaler Wert; Violett ist nur EPISCH, eine Stufe darunter).
   Meister behaelt denselben Gold-Farbton wie die Gold-Kiste (hue-rotate(-8deg), kein Drehen
   Richtung Violett mehr), wird aber sichtbar heller/strahlender (saettigung/brightness hoeher)
   und bekommt einen staerkeren warmen gelb-weissen Glow statt des violetten Drop-Shadows, damit
   die Spitze klar ueber Gold steht statt eine andere Farbe zu sein. Der Glow pulsiert dezent
   (gkKiMeisterGlow) - reduced-motion schaltet ihn wie die anderen Kisten-Animationen ab
   (siehe @media(prefers-reduced-motion:reduce) weiter unten in diesem Abschnitt). */
.gkKiSprite[data-stufe="stahl"] { filter:sepia(1) hue-rotate(85deg) saturate(2.4) brightness(1.1) drop-shadow(0 .12em 0 rgba(0,0,0,.5)); }
.gkKiSprite[data-stufe="chrom"] { filter:sepia(1) hue-rotate(160deg) saturate(1.9) brightness(1.3) drop-shadow(0 .12em 0 rgba(0,0,0,.5)); }
.gkKiSprite[data-stufe="gold"] { filter:sepia(1) saturate(3.2) hue-rotate(-8deg) brightness(1.15) drop-shadow(0 .12em 0 rgba(0,0,0,.5)); }
.gkKiSprite[data-stufe="meister"] { filter:sepia(1) saturate(4.2) hue-rotate(-8deg) brightness(1.5) drop-shadow(0 .12em 0 rgba(0,0,0,.5)); animation:gkKiMeisterGlow 1.8s ease-in-out infinite; }
/* ARMAGEDDON-LADEN 19.10.: echte Kisten-Bilder (assets/laden/ki_<stufe>.webp, Klasse gkKiHD) ersetzen den gefaerbten Platzhalter - Filterfaerbung nur im Fehlerfall. */
.gkKiSprite.gkKiHD { filter:drop-shadow(0 .12em 0 rgba(0,0,0,.4)); }
.gkKiSprite.gkKiHD[data-stufe="gold"] { filter:drop-shadow(0 0 calc(.3 * var(--su)) rgba(255,214,90,.55)) drop-shadow(0 .12em 0 rgba(0,0,0,.4)); }
.gkKiSprite.gkKiHD[data-stufe="meister"] { animation:none; }
.gkKiSlot.isBereit .gkKiSprite.gkKiHD[data-stufe="meister"] { animation:gkKiWippen 1.6s ease-in-out infinite; }   /* Fix 2: Glow nur auf Rand/Knopf (Slot), nie als Filter ueber Plakette und Bild */
.gkKiSlot[data-stufe="meister"] { border-color:#fff2b8; box-shadow:0 0 0 calc(.14 * var(--su)) rgba(255,235,150,.4); --ki-glow:rgba(255,180,0,.8); }
/* SPANNUNG VOR DEM OEFFNEN (06.10.2026, Kevin: "Kisten fehlen Detailing"): Antippen wackelt die
   Kiste 0,8 s (nur transform, reduced-motion aus), waehrend ein Lichtschein in Seltenheitsfarbe
   (dieselbe --ki-glow-Variable wie die Ausbeute-Karte) auf dem Sprite waechst - erst danach
   springt per isAuf-Klasse (schon vorhanden) der Deckel auf. Buchung bleibt vor der Animation
   (zustand.js kisteOeffnen), kisten.js wartet nur kosmetisch. */
.gkKiSlot[data-stufe="blech"] { --ki-glow:rgba(214,173,115,.6); }
.gkKiSlot[data-stufe="stahl"] { --ki-glow:rgba(199,123,50,.6); }
.gkKiSlot[data-stufe="chrom"] { --ki-glow:rgba(214,173,115,.6); }
.gkKiSlot[data-stufe="gold"] { --ki-glow:rgba(255,196,60,.65); }
.gkKiSlot.isWackelt > .gkKiSprite { animation:gkKiWackel .8s ease-in-out; }
@keyframes gkKiWackel {
  0%,100% { transform:translateX(0) rotate(0deg); } 15% { transform:translateX(calc(-.1 * var(--su))) rotate(-4deg); }
  30% { transform:translateX(calc(.1 * var(--su))) rotate(4deg); } 45% { transform:translateX(calc(-.08 * var(--su))) rotate(-3deg); }
  60% { transform:translateX(calc(.08 * var(--su))) rotate(3deg); } 75% { transform:translateX(calc(-.04 * var(--su))) rotate(-1deg); }
  90% { transform:translateX(calc(.04 * var(--su))) rotate(1deg); }
}
.gkKiSlot.isWackelt::before { content:''; position:absolute; left:16%; top:38%; width:calc(3.4 * var(--su)); height:calc(3.4 * var(--su)); border-radius:50%; pointer-events:none; z-index:4;
  background:radial-gradient(circle, var(--ki-glow, rgba(255,214,107,.6)), transparent 72%); transform:translate(-50%,-50%) scale(.25); opacity:0; animation:gkKiLichtschein .8s ease-in forwards; }
@keyframes gkKiLichtschein { 0% { opacity:0; transform:translate(-50%,-50%) scale(.25); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes gkKiMeisterGlow {
  0%,100% { filter:sepia(1) saturate(4.2) hue-rotate(-8deg) brightness(1.5) drop-shadow(0 0 calc(.5 * var(--su)) #ffe9a3); }
  50% { filter:sepia(1) saturate(4.2) hue-rotate(-8deg) brightness(1.7) drop-shadow(0 0 calc(.85 * var(--su)) #fffbe6); }
}
.gkKiSlot.isAuf .gkKiSprite { animation:gkKiAuf .5s ease-out forwards; }
@keyframes gkKiAuf { 0% { transform:scale(1); } 40% { transform:scale(1.12) rotate(-4deg); } 100% { transform:scale(1.04); filter:brightness(1.6) drop-shadow(0 0 calc(.6 * var(--su)) #ffe9a3); } }
/* PARTIKEL-BURST (23.09.2026, Design-Schleife Runde 1, Punkt kiste-oeffnen-partikel):
   Prinzip 2 Juiciness - das Oeffnen war bisher stumm (nur eine ruhig einblendende
   Karte). 10 Punkte auf einem festen Zehner-Stern (36 Grad Schritt, kein
   freier Zufall - Verfassung) fliegen ueber der Sprite-Mitte in Gold/Kupfer/Creme
   nach aussen und verblassen. Radius 2.1 * var(--su), an der Sprite-Hoehe
   (3.6 * var(--su)) bemessen, damit der Burst nicht in den Nachbar-Slot laeuft.
   z-index 8 (ueber der Ausbeute-Karte, z-index 7): kisten.js zeigt die Karte
   im selben Zug, in dem isAuf gesetzt wird - ohne den Vorsprung waere der Burst
   sofort verdeckt statt sichtbar.
   Runde 2 (Ruecklaeufer): der Flug zur Zielposition bleibt schnell (0-8%, also
   0-192ms bei 2.4s Gesamtdauer) fuer den juicy Ueberreaktions-Moment. opacity
   ist auf der ganzen Haltestrecke 8%-95% als GLEICHER Wert (1) an beiden
   Keyframe-Enden notiert, damit sie unabhaengig von der ease-out-Kurve exakt
   1 bleibt (eine Kurve zwischen zwei gleichen Werten aendert nichts) - erst
   danach blendet sie bis 100% (2400ms) aus. Das haelt den festen
   2200ms-Screenshot-Zeitpunkt in tools-claude/design_shots.mjs (unveraendert,
   von allen Design-Punkten geteilt) sicher in der Haltestrecke, ohne dessen
   Wartewert anzufassen.
   Runde 3 (Ruecklaeufer, Qualitaetsmangel): left war bei 50% (Mitte des
   ganzen Slots inkl. Text) und lag damit ueber "BLECH"/"FERTIG!"/OEFFNEN
   (Slot ist sprite|text nebeneinander, die Slot-Mitte faellt in den
   Textblock). left:16% zentriert den Burst-Ursprung stattdessen ueber der
   Kiste selbst (Sprite links im Slot, Breite ~14% der Slot-Breite) - Flug,
   Farben und Zeitachse bleiben unveraendert, nur die Position wandert vom
   Text weg zur Kiste. */
/* Runde 4 (24.09.2026, Design-Schleife Runde 2, Punkt kiste-oeffnen-juice): Kevins Befund
   "Partikel kaum sichtbar" - Punktgroesse von .26*su auf .6*su (gut das 2,3-Fache) angehoben,
   die Flugbahnen (--tx/--ty) um Faktor 1.35 verlaengert und je Punkt ein Farb-Drop-Shadow
   in der eigenen Farbe ergaenzt, damit der Burst auch neben Sprite/Text auffaellt statt darin
   unterzugehen. Zeitachse (2.4s, Haltestrecke bis 95%) bleibt unveraendert - der 2200ms-Schnappschuss
   in tools-claude/design_shots.mjs bleibt damit weiterhin in der Haltestrecke sicher sichtbar. */
.gkKiPartikel { position:absolute; left:16%; top:38%; width:0; height:0; pointer-events:none; z-index:8; }
.gkKiPartikel i { position:absolute; left:0; top:0; width:calc(.6 * var(--su)); height:calc(.6 * var(--su)); border-radius:50%; opacity:0; transform:translate(-50%,-50%); }
.gkKiPartikel i:nth-child(1) { background:#f4b82d; box-shadow:0 0 calc(.5 * var(--su)) #f4b82d; --tx:calc(2.84 * var(--su)); --ty:0px; }
.gkKiPartikel i:nth-child(2) { background:#c77b32; box-shadow:0 0 calc(.5 * var(--su)) #c77b32; --tx:calc(2.3 * var(--su)); --ty:calc(1.66 * var(--su)); }
.gkKiPartikel i:nth-child(3) { background:#fff0be; box-shadow:0 0 calc(.5 * var(--su)) #fff0be; --tx:calc(.88 * var(--su)); --ty:calc(2.7 * var(--su)); }
.gkKiPartikel i:nth-child(4) { background:#f4b82d; box-shadow:0 0 calc(.5 * var(--su)) #f4b82d; --tx:calc(-.88 * var(--su)); --ty:calc(2.7 * var(--su)); }
.gkKiPartikel i:nth-child(5) { background:#c77b32; box-shadow:0 0 calc(.5 * var(--su)) #c77b32; --tx:calc(-2.3 * var(--su)); --ty:calc(1.66 * var(--su)); }
.gkKiPartikel i:nth-child(6) { background:#fff0be; box-shadow:0 0 calc(.5 * var(--su)) #fff0be; --tx:calc(-2.84 * var(--su)); --ty:0px; }
.gkKiPartikel i:nth-child(7) { background:#f4b82d; box-shadow:0 0 calc(.5 * var(--su)) #f4b82d; --tx:calc(-2.3 * var(--su)); --ty:calc(-1.66 * var(--su)); }
.gkKiPartikel i:nth-child(8) { background:#c77b32; box-shadow:0 0 calc(.5 * var(--su)) #c77b32; --tx:calc(-.88 * var(--su)); --ty:calc(-2.7 * var(--su)); }
.gkKiPartikel i:nth-child(9) { background:#fff0be; box-shadow:0 0 calc(.5 * var(--su)) #fff0be; --tx:calc(.88 * var(--su)); --ty:calc(-2.7 * var(--su)); }
.gkKiPartikel i:nth-child(10) { background:#f4b82d; box-shadow:0 0 calc(.5 * var(--su)) #f4b82d; --tx:calc(2.3 * var(--su)); --ty:calc(-1.66 * var(--su)); }
.gkKiSlot.isAuf .gkKiPartikel i { animation:gkKiPartikelFlug 2.4s ease-out forwards; }
@keyframes gkKiPartikelFlug {
  0% { opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); }
  8% { opacity:1; transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(1.15); }
  95% { opacity:1; transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(.85); }
  100% { opacity:0; transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(.35); }
}
/* AUSBEUTE-KARTEN-BURST (24.09.2026, Design-Schleife Runde 2, Punkt kiste-oeffnen-juice):
   zweiter Zehner-Stern (gleiche Technik, groesserer Radius fuer die groessere Karte) hinter
   der Ausbeute-Karte. .gkKiAusbeute ist selbst position:absolute (weiter unten) und damit
   containing block - left/top:50% zentriert den Burst-Ursprung auf der Buehnenmitte, die
   dank display:flex/justify-content:center auch die Kartenmitte ist. Keine eigene Trigger-
   Klasse noetig: [hidden]{display:none!important} (Basis-Reset) reisst die ganze Box beim
   Verstecken/Zeigen von .gkKiAusbeute ab, dadurch startet die Animation bei jedem Oeffnen neu -
   derselbe Mechanismus, den die Karten-Pop-Animation weiter unten ebenfalls nutzt.
   Ruecklaeufer (24.09.2026, Design-Schleife Runde 2, Abnahme-Korrektur): Kevins Befund
   "Partikel ueber dem WEITER-Knopf" - die vier unteren Punkte (2,3,4,5, positive --ty) lagen
   mit ihrer Zielposition (bis 5.7*su) so tief, dass sie inkl. Punktgroesse/Glow auf der
   Knopfflaeche landeten. --ty dieser vier Punkte um Faktor 0.6 gekuerzt (3.53->2.1*su,
   5.7->3.4*su), Betrag bleibt oberhalb der Kartenmitte + Kopf-/Zeilenbereich stehen, statt bis
   zum Knopf zu reichen. Obere sechs Punkte (1,6-10) unveraendert, damit der Burst weiter ein
   voller, satter Stern bleibt statt nur eine obere Halbwolke. */
.gkKiKartePartikel { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:6; }
.gkKiKartePartikel i { position:absolute; left:0; top:0; width:calc(.7 * var(--su)); height:calc(.7 * var(--su)); border-radius:50%; opacity:0; transform:translate(-50%,-50%); }
.gkKiKartePartikel i:nth-child(1) { background:#f4b82d; box-shadow:0 0 calc(.6 * var(--su)) #f4b82d; --tx:calc(6 * var(--su)); --ty:0px; }
.gkKiKartePartikel i:nth-child(2) { background:#c77b32; box-shadow:0 0 calc(.6 * var(--su)) #c77b32; --tx:calc(4.85 * var(--su)); --ty:calc(2.1 * var(--su)); }
.gkKiKartePartikel i:nth-child(3) { background:#fff0be; box-shadow:0 0 calc(.6 * var(--su)) #fff0be; --tx:calc(1.85 * var(--su)); --ty:calc(3.4 * var(--su)); }
.gkKiKartePartikel i:nth-child(4) { background:#f4b82d; box-shadow:0 0 calc(.6 * var(--su)) #f4b82d; --tx:calc(-1.85 * var(--su)); --ty:calc(3.4 * var(--su)); }
.gkKiKartePartikel i:nth-child(5) { background:#c77b32; box-shadow:0 0 calc(.6 * var(--su)) #c77b32; --tx:calc(-4.85 * var(--su)); --ty:calc(2.1 * var(--su)); }
.gkKiKartePartikel i:nth-child(6) { background:#fff0be; box-shadow:0 0 calc(.6 * var(--su)) #fff0be; --tx:calc(-6 * var(--su)); --ty:0px; }
.gkKiKartePartikel i:nth-child(7) { background:#f4b82d; box-shadow:0 0 calc(.6 * var(--su)) #f4b82d; --tx:calc(-4.85 * var(--su)); --ty:calc(-3.53 * var(--su)); }
.gkKiKartePartikel i:nth-child(8) { background:#c77b32; box-shadow:0 0 calc(.6 * var(--su)) #c77b32; --tx:calc(-1.85 * var(--su)); --ty:calc(-5.7 * var(--su)); }
.gkKiKartePartikel i:nth-child(9) { background:#fff0be; box-shadow:0 0 calc(.6 * var(--su)) #fff0be; --tx:calc(1.85 * var(--su)); --ty:calc(-5.7 * var(--su)); }
.gkKiKartePartikel i:nth-child(10) { background:#f4b82d; box-shadow:0 0 calc(.6 * var(--su)) #f4b82d; --tx:calc(4.85 * var(--su)); --ty:calc(-3.53 * var(--su)); }
.gkKiKartePartikel i { animation:gkKiPartikelFlug 2.4s ease-out forwards; }
/* MEHR REINIGUNGSBEFRIEDIGUNG bei seltener Beute (06.10.2026): sechs zusaetzliche Partikel in
   Gold/Weiss, standardmaessig display:none - die Karte bekommt .istSelten nur bei neuer Optik
   oder Gold/Meister-Kiste (kisten.js), dann feuert ein zweiter, dichterer Stern mit. */
.gkKiKartePartikel i.gkKiExtra { display:none; }
.gkKiKarte.istSelten .gkKiKartePartikel i.gkKiExtra { display:block; }
.gkKiKartePartikel i:nth-child(11) { background:#ffe9a3; box-shadow:0 0 calc(.7 * var(--su)) #ffe9a3; --tx:calc(3.4 * var(--su)); --ty:calc(-5.9 * var(--su)); }
.gkKiKartePartikel i:nth-child(12) { background:#fff; box-shadow:0 0 calc(.7 * var(--su)) #fff; --tx:calc(7.4 * var(--su)); --ty:calc(-2.5 * var(--su)); }
.gkKiKartePartikel i:nth-child(13) { background:#ffe9a3; box-shadow:0 0 calc(.7 * var(--su)) #ffe9a3; --tx:calc(7.4 * var(--su)); --ty:calc(2.5 * var(--su)); }
.gkKiKartePartikel i:nth-child(14) { background:#fff; box-shadow:0 0 calc(.7 * var(--su)) #fff; --tx:calc(3.4 * var(--su)); --ty:calc(5.9 * var(--su)); }
.gkKiKartePartikel i:nth-child(15) { background:#ffe9a3; box-shadow:0 0 calc(.7 * var(--su)) #ffe9a3; --tx:calc(-3.4 * var(--su)); --ty:calc(5.9 * var(--su)); }
.gkKiKartePartikel i:nth-child(16) { background:#fff; box-shadow:0 0 calc(.7 * var(--su)) #fff; --tx:calc(-7.4 * var(--su)); --ty:calc(2.5 * var(--su)); }
.gkKiText { display:flex; flex-direction:column; gap:calc(.15 * var(--su)); min-width:0; }
.gkKiName { font:calc(1.25 * var(--su)) var(--gk-display); letter-spacing:.04em; line-height:1; }
/* PAPIERZETTEL-HINWEIS (06.10.2026, Kevin: "Kisten fehlen Detailing in Optik"): die Restzeit
   sitzt auf einem kleinen schiefen Notizzettel statt nur als Text im dunklen Regal - macht das
   warme Holzregal plausibler (ein Zettel, den jemand reingesteckt hat), nicht nur Kosmetik am
   Text selbst, wirkt aber nicht auf Layout/Groesse. */
.gkKiHinweis { font:800 calc(.85 * var(--su)) var(--gk-body); color:#2b1904; background:#f1dfae; display:inline-block; padding:0 calc(.3 * var(--su)); border-radius:calc(.15 * var(--su)); transform:rotate(-1.5deg); box-shadow:0 1px 0 rgba(0,0,0,.3); white-space:normal; overflow-wrap:anywhere; }
.gkKiFrei { font:calc(1.2 * var(--su)) var(--gk-display); color:#ead4aa; letter-spacing:.06em; }
/* VORSCHAU (06.10.2026): 2-3 Icons zeigen, was in der Kiste stecken KANN (€/Schrott immer, dazu
   ◆ ab Chrom oder ✦ fuer die Sammel-Optik darunter) - reine Textzeile, keine neue Logik. */
.gkKiVorschau { font:700 calc(.78 * var(--su)) var(--gk-body); color:#e3cfa0; letter-spacing:.08em; opacity:.85; margin-top:6px; }   /* Abnahme zentrale-14: Abstand zum schraegen Band */
/* Design-Schleife Runde 4, 24.09.2026, Punkt regal-video-knopf: Kevins Befund - SOFORT (Gold)
   und der Werbe-Knopf VIDEO: 1/2 ZEIT wirkten im Kistenregal gleich stark, die kostenlose
   Option hob sich nicht von der Premium-Option ab. VIDEO ist jetzt der gruene Bonbon-Knopf
   (gkGreen, wie die uebrigen Positiv-Knoepfe SCHICHT STARTEN/ZUR WERKSTATT) statt gkBlue, dazu
   ein Play-Dreieck als reines CSS-Pseudoelement vor dem Text - keine neue Datei, keine
   Aenderung an kisten.js- oder werbung.js-Logik, nur die Knopf-Klasse.
   Korrektur Runde 4 (Abnahme durch Claude): .gkKiBtn.gkBtn (Zeile 739, padding:0 .55su) hat
   dieselbe Spezifitaet (2 Klassen) wie die vorige .gkKiVideo.gkBtn-Regel und stand im Stylesheet
   dahinter, daher gewann sein Padding-Shorthand und ueberschrieb padding-left komplett - das
   weisse Dreieck (endet bei .55su + .48su = 1.03su) lag dadurch direkt auf dem "V". Selektor hier
   auf drei Klassen verbreitert, damit die Regel unabhaengig von der Reihenfolge im Stylesheet
   gewinnt. */
.gkKiBtn.gkKiVideo.gkBtn { font-size:calc(.85 * var(--su)); padding-left:calc(1.3 * var(--su)); }
.gkKiBtn.gkKiVideo.gkBtn::after { content:""; position:absolute; left:calc(.55 * var(--su)); top:50%; transform:translateY(-50%); width:0; height:0; border-style:solid; border-width:calc(.3 * var(--su)) 0 calc(.3 * var(--su)) calc(.48 * var(--su)); border-color:transparent transparent transparent #fff; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.gkKiTeaser { margin-top:calc(.5 * var(--su)); font:calc(1.05 * var(--su)) var(--gk-display); letter-spacing:.04em; color:#ffd66b; text-align:center; }
/* WARMES REGAL + WITZ (06.10.2026, Kevin: "Optik Pane"): eine ehrliche, kleine Zeile unter dem
   Teaser - Spielsucht-Haken ohne Taeuschung (Verfassung Ton), reiner Text, keine Logik. */
.gkKiWitz { margin-top:calc(.25 * var(--su)); font:italic 700 max(11px,calc(.85 * var(--su))) var(--gk-body); color:#b89a6b; text-align:center; opacity:.8; }
/* Ausbeute-Karte: mittig ueber der Buehne, Zeilen erscheinen nacheinander (kisten.js warten()). */
/* ERFOLGS-KICK BEIM ERSCHEINEN (24.09.2026, Design-Schleife Runde 2, Punkt kiste-oeffnen-juice):
   Kevins Befund "Ausbeute-Karte ohne Erfolgsgefuehl" - kurzer Saettigungs-Kick des ganzen
   Overlays (Karte + Kartenburst zaehlen visuell dazu) beim Erscheinen, 200ms von saturate(1.35)
   auf 1 zurueck. Trigger wie beim Kartenburst ueber das Verstecken/Zeigen von [hidden]. */
.gkKiAusbeute { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(73,56,44,.55); pointer-events:auto; z-index:7; animation:gkKiSatKick .2s ease-out; }
@keyframes gkKiSatKick { 0% { filter:saturate(1.35); } 100% { filter:saturate(1); } }
/* Kartenfarbe/-kick nach Kistenstufe (24.09.2026, Design-Schleife Runde 2, Punkt kiste-oeffnen-juice):
   Aufpoppen (scale .9->1.03->1, 250ms) + warmer Lichthof als zusaetzliche box-shadow-Ebene, dazu
   Titelfarbe je data-ki-karte data-stufe (Blech grau, Stahl gruen, Chrom blau, Gold/Meister
   goldig, Meister zusaetzlich mit Glow) - dieselben Farbtoene wie die Sprite-Filter weiter oben,
   damit die Kiste ihre Farbe von der Kachel bis zur Karte behaelt. */
.gkKiKarte { width:min(88%, calc(42 * var(--su))); padding:calc(1.1 * var(--su)) calc(1.4 * var(--su)); border-radius:calc(1 * var(--su)); background:linear-gradient(#fff5d6,#f1dfae); color:#2b1904; border:calc(.25 * var(--su)) solid #8b6028; box-shadow:0 calc(.5 * var(--su)) 0 #5a3d12, 0 calc(1.2 * var(--su)) calc(2 * var(--su)) rgba(0,0,0,.5), 0 0 calc(2.2 * var(--su)) rgba(255,214,107,.6); animation:gkKiKartePop .25s ease-out; position:relative; z-index:1; }
@keyframes gkKiKartePop { 0% { transform:scale(.9); } 55% { transform:scale(1.03); } 100% { transform:scale(1); } }
.gkKiKarte h4 { margin:0 0 calc(.5 * var(--su)); font:calc(1.9 * var(--su)) var(--gk-display); letter-spacing:.05em; color:#8b5510; }
.gkKiKarte[data-stufe="blech"] h4 { color:#493d32; }
.gkKiKarte[data-stufe="stahl"] h4 { color:#493d32; }
.gkKiKarte[data-stufe="chrom"] h4 { color:#493d32; }
.gkKiKarte[data-stufe="gold"] h4 { color:#8b5510; }
.gkKiKarte[data-stufe="meister"] h4 { color:#c98a00; text-shadow:0 0 calc(.5 * var(--su)) #ffdd80, 0 0 calc(1 * var(--su)) #ffb400; }
.gkKiKarte ul { list-style:none; margin:0 0 calc(.8 * var(--su)); padding:0; display:flex; flex-direction:column; gap:calc(.25 * var(--su)); font:800 calc(1.15 * var(--su)) var(--gk-body); perspective:calc(30 * var(--su)); }
/* BELOHNUNGS-REVEAL (06.10.2026): Zeilen kippen einzeln um (rotateX, Kippachse oben) statt nur
   hochzufaden - transform-origin oben haelt den Kipp-Punkt an der Listenkante, kein Layout-Sprung. */
.gkKiKarte li { animation:gkKiZeile .35s ease-out both; transform-origin:center top; }
.gkKiKarte li b { color:#9a5728; }
.gkKiKarte li:first-child b { color:#b8860b; }
@keyframes gkKiZeile { from { opacity:0; transform:rotateX(-82deg); } to { opacity:1; transform:rotateX(0deg); } }
.gkKiKarte .gkBtn { min-height:44px; width:100%; }
.gkKiKarte .gkBtn[data-ki-action="zu"] { background:linear-gradient(#fff0be,#f4b82d); color:#49301d; border-color:#9a5728; box-shadow:0 calc(.25 * var(--su)) 0 #8b5510,inset 0 2px 0 #fff8df; }
/* Kisten-Sprite rechts in der Karte (24.09.2026, Design-Schleife Runde 3, Punkt
   ausbeute-kisten-sprite): Kevins Befund "rechte Haelfte leer, Karte wirkt halbfertig" -
   Text bleibt links unveraendert lesbar, rechts zeigt dasselbe Sprite wie im Regal-Slot
   (gleiche Stufenfilter, .gkKiSprite[data-stufe] weiter oben) gross mit weichem Glow in
   Kistenfarbe; der Kartenburst (.gkKiKartePartikel, in kisten.js jetzt in .gkKiKarteBild)
   startet damit sichtbar am Sprite statt an der Kartenmitte. Unter 480px stapelt die
   Karte statt zu ueberlappen. */
.gkKiKarteOben { display:flex; align-items:center; gap:calc(1 * var(--su)); }
.gkKiKarteText { flex:1 1 auto; min-width:0; }
.gkKiKarteBild { position:relative; flex:0 0 auto; width:calc(9 * var(--su)); height:calc(9 * var(--su)); display:flex; align-items:center; justify-content:center; }
.gkKiKarteBild::before { content:''; position:absolute; inset:calc(-1 * var(--su)); z-index:0; border-radius:50%; background:radial-gradient(circle, var(--ki-glow, rgba(255,214,107,.55)), transparent 70%); }
.gkKiKarteBild .gkKiSprite { position:relative; z-index:1; height:calc(7.4 * var(--su)); width:auto; }
.gkKiKarte[data-stufe="blech"] .gkKiKarteBild { --ki-glow: rgba(214,173,115,.55); }
.gkKiKarte[data-stufe="stahl"] .gkKiKarteBild { --ki-glow: rgba(199,123,50,.55); }
.gkKiKarte[data-stufe="chrom"] .gkKiKarteBild { --ki-glow: rgba(214,173,115,.55); }
.gkKiKarte[data-stufe="gold"] .gkKiKarteBild { --ki-glow: rgba(255,196,60,.6); }
.gkKiKarte[data-stufe="meister"] .gkKiKarteBild { --ki-glow: rgba(255,180,0,.7); }
@media(max-width:480px) { .gkKiKarteOben { flex-direction:column; } .gkKiKarteText { width:100%; } .gkKiKarteBild { width:calc(11 * var(--su)); height:calc(11 * var(--su)); } }
/* RIVE-1014 (Kevin 14.10.: Rive wo es geht): die Rive-Leinwaende liegen deckungsgleich ueber dem bisherigen
   Bild (Gustav-Standbild bzw. Karten-Sprite + CSS-Funken). Erst data-rive="an" (Laufzeit, Datei und Bilder da)
   blendet um; scheitert Rive, bleibt alles wie bisher. Die Kisten-Leinwand bleibt exakt im Bildkasten der Karte
   (Deckel, Licht und Beute sind in die Bildflaeche hineinkomponiert) - nie ueber WEITER oder Regal-Knoepfen. */
.gkGustavZ canvas.gkRiveGustav { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.gkGustavZ[data-rive="an"] > canvas:not(.gkRiveGustav) { visibility:hidden; }
.gkGustavZ[data-rive="an"] > canvas.gkRiveGustav { opacity:1; }
.gkKiKarteBild canvas.gkRiveKiste { position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; opacity:0; pointer-events:none; }
.gkKiKarteBild[data-rive="an"] > canvas.gkRiveKiste { opacity:1; }
.gkKiKarteBild[data-rive="an"] > :is(.gkKiSprite,.gkKiKartePartikel) { visibility:hidden; }
@media(prefers-reduced-motion:reduce) { .gkKiSlot.isBereit,.gkKiSlot.isAuf .gkKiSprite,.gkKiKarte li,.gkKiSlot.isAuf .gkKiPartikel i,.gkKiSprite[data-stufe="meister"] { animation:none!important; } }   /* Fix 2: kein Sepia-Filter ueber Slot/Bild - Stufenfarbe bleibt, Glow nur als Rand */
@media(prefers-reduced-motion:reduce) { .gkKiSlot.isBereit { box-shadow:0 0 0 calc(.3 * var(--su)) rgba(126,224,143,.6)!important; } .gkKiSprite[data-stufe="meister"]:not(.gkKiHD) { filter:sepia(1) saturate(4.2) hue-rotate(-8deg) brightness(1.6)!important; } }
@media(prefers-reduced-motion:reduce) { .gkKiSlot.isBereit .gkKiSprite,.gkKiSlot.isBereit .gkKiBtn { animation:none!important; transform:none!important; } .gkKiSlot.isBereit .gkKiBtn::after { animation:none!important; opacity:0!important; } }
@media(prefers-reduced-motion:reduce) { .gkKiAusbeute,.gkKiKarte,.gkKiKartePartikel i { animation:none!important; } }
@media(prefers-reduced-motion:reduce) { .gkKiSlot.isWackelt > .gkKiSprite,.gkKiSlot.isWackelt::before { animation:none!important; opacity:0!important; } }
/* Werkstatt: Teile-Zeile in der Tuning-Karte (meta.js renderCards), Vitrine im DESIGN. */
.gkFragStand { display:block; font:800 calc(.85 * var(--su)) var(--gk-body); letter-spacing:.05em; color:#8b5510; margin-top:calc(.15 * var(--su)); }
.gkSkin .pr.frag { background:#ffd66b; color:#2b1904; }
.gkSkin .pr.fragHint { display:block; font-size:.72em; opacity:.85; background:none; padding:0; }
/* Regal kompakt (Politur 23.09.): oberhalb von ZUR WERKSTATT (Buehne 45su hoch bei 2,2:1), ein Knopf je Zustand. */
.gkKiRegal { position:absolute; left:calc(73 * var(--su)); top:calc(12 * var(--su)); width:calc(25.5 * var(--su)); padding:calc(.6 * var(--su)) calc(.8 * var(--su)) calc(.5 * var(--su)); box-sizing:border-box; pointer-events:auto; border-radius:calc(.9 * var(--su)); background:#49382c; border:calc(.22 * var(--su)) solid var(--gk-ink); box-shadow:0 calc(.35 * var(--su)) 0 #5b4433; color:#fff; }
.gkKiSlot { position:relative; min-width:0; min-height:calc(5.1 * var(--su)); display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:calc(.4 * var(--su)); padding:calc(.3 * var(--su)) calc(.4 * var(--su)); border-radius:calc(.6 * var(--su)); background:rgba(0,0,0,.35); border:calc(.16 * var(--su)) solid #5b4433; box-sizing:border-box; }
.gkKiSprite { height:calc(3.6 * var(--su)); width:auto; flex:0 0 auto; filter:drop-shadow(0 .12em 0 rgba(0,0,0,.5)); transform-origin:50% 100%; }
/* TESTPHASE-02: Aktionen nutzen die ganze Slotbreite; lange Texte duerfen
   umbrechen, ohne Grid-Mindestbreite oder Nachbarslot zu vergroessern. */
.gkKiSlot.isLeer { display:flex; }
.gkKiSlot > .gkKiSprite { height:calc(2.5 * var(--su)); }
.gkKiName { overflow-wrap:anywhere; }
/* ARMAGEDDON-LADEN Fix 1: Stufenbild im Regal gross (helle Plakette dahinter, Stahl/Chrom/Blech auf dunklem Regal unterscheidbar) und Beuteliste ab 4 Zeilen zweispaltig, nie abgeschnitten. */
.gkCentral .gkKiSlot > .gkKiSprite.gkKiHD { height:max(48px,5.4 * var(--su)); width:max(48px,5.4 * var(--su)); object-fit:contain; box-sizing:border-box; padding:calc(.2 * var(--su)); border-radius:32%; background:radial-gradient(ellipse at 50% 55%, rgba(255,252,232,.98) 0, rgba(255,236,176,.85) 58%, rgba(255,226,150,.35) 100%); }
.gkCentral .gkKiSlot > .gkKiSprite, .gkCentral .gkKiSlot > .gkKiRing { grid-area:1 / 1 / 3 / 2; align-self:center; }
.gkCentral .gkKiSlot > .gkKiAkt { grid-column:2; }   /* Bild spannt Text- und Knopfzeile: Regal wird durch das groessere Stufenbild nicht hoeher */
.gkKiAkt { grid-column:1 / -1; min-width:0; display:flex; flex-direction:column; gap:calc(.25 * var(--su)); margin-top:calc(.15 * var(--su)); }
.gkKiBtn.gkBtn { min-width:0; max-width:100%; box-sizing:border-box; min-height:30px; padding:0 calc(.55 * var(--su)); font-size:calc(.85 * var(--su)); border-width:calc(.18 * var(--su)); white-space:normal; overflow-wrap:anywhere; }
/* Werkstatt: Teile-Bedarf als zweite Zeile IM Preis-Knopf (die Karte ist ein festes Raster ohne freie Zeile).
   Design-Schleife Runde 5 (24.09.2026, werkstatt-teile-text): Knopf ist jetzt 60px hoch (meta.js), darum
   braucht die umgebrochene Teile-Zeile keinen negativen Abstand mehr, der sie ueber den Knopf hinaus zog. */
.gkCard .gkPrice { flex-wrap:wrap; row-gap:0; }
.gkCard .gkPrice .gkTeile { flex:0 0 100%; line-height:1; margin-top:calc(.12 * var(--su)); font:800 calc(.72 * var(--su)) var(--gk-body); letter-spacing:.04em; color:#0f3a1a; text-shadow:none; text-align:center; white-space:nowrap; }
.gkCard .gkPrice .gkTeile.isPoor { color:#7a1d10; }
.gkCard .gkPrice.isPoor .gkTeile { color:#685747; }

/* ===== FIXER NEBEN VORRAT (Kevin 23.09.2026) =====
   Der Fixer-Knopf steht als vierte Kachel im Vorrat-Streifen (index.html #vorrat), gleiche
   Masse wie die Vorratsplaetze; die alte freie Position rechts entfaellt. */
/* Fixer als Werkstattschalter direkt unter dem Reinigungsschild.
   Der Fortschritt bleibt Text (0/5, BEREIT, Restzeit); keine zweite Fuellanzeige. */
#fahrt-ui #vorrat #fixerBtn { position:fixed; right:calc(12px + env(safe-area-inset-right, 0px)); top:calc(101px + env(safe-area-inset-top, 0px)); bottom:auto; width:68px; height:56px; margin:0; padding:3px 2px; border:3px solid #493d32; border-radius:12px; background:#ead9b5; color:#5b4433; box-shadow:0 4px 0 #5b4433,inset 0 2px 0 #fff4d8; font:800 10px/12px system-ui; overflow:hidden; isolation:isolate; }
#fahrt-ui #vorrat #fixerBtn span, #fahrt-ui #vorrat #fixerBtn strong { position:relative; z-index:1; }
/* ===== EXTRA-SLOT (Kevin 12.10.2026): Slotmaschine direkt links neben dem Fixer, gleicher Rahmen, ein Walzenfenster. ===== */
#fahrt-ui #vorratTitel { display:none; }
/* Polish 12.10.: Lehrling-Sprechblase gehoert zur Fahrt - in Zentrale/Werkstatt/Meistertafel lag sie ueber allem (Bild tests/polish-1012). */
#fahrt-ui[hidden] ~ #lehrlingZiel { display:none !important; }
body.gg-tafel-offen :is(#lehrlingZiel,#kopfHinweis,#rgKarte) { visibility:hidden !important; }   /* Kevin 10.11.: Lern- und Hinweiskarten liegen nie ueber der offenen Meistertafel */
#fahrt-ui #vorrat [data-vorrat] { position:fixed; right:calc(max(24px, env(safe-area-inset-right, 0px)) + 76px); top:calc(62px + env(safe-area-inset-top, 0px)); bottom:auto; display:flex; width:68px; height:56px; padding:3px 2px 2px; gap:1px; border:3px solid #493d32; border-radius:12px; background:#ead9b5; color:#5b4433; box-shadow:0 4px 0 #5b4433,inset 0 2px 0 #fff4d8; font:800 10px/12px system-ui; z-index:7; opacity:1; }
#fahrt-ui #vorrat [data-vorrat][data-sorte=""] { display:flex !important; border:3px dashed #8a7a62; background:#d9c9a4; color:#8a7a62; box-shadow:none; }   /* leerer Slot bleibt sichtbar (hebt die Ausblendung weiter unten auf) */
#fahrt-ui #vorrat [data-vorrat]:not([data-sorte=""]) { background:#f6c34b; border-color:#493d32; color:#493d32; box-shadow:0 4px 0 #80530d,inset 0 2px 0 #ffe59b; }
#fahrt-ui #vorrat [data-vorrat]:disabled:not([data-sorte=""]) { opacity:.75; }
#fahrt-ui #vorrat [data-vorrat]:not(:disabled):active { transform:translateY(3px); box-shadow:0 1px 0 #80530d; }
#fahrt-ui .slotFenster { display:flex; align-items:center; justify-content:center; width:46px; height:30px; border-radius:6px; background:linear-gradient(#2b2117,#4a3a2a 45%,#2b2117); box-shadow:inset 0 0 0 2px #1b140d, inset 0 6px 6px -4px #000; overflow:hidden; }
#fahrt-ui #vorrat .vorratIcon { font-size:20px; line-height:22px; color:#fff; }
#fahrt-ui #vorrat .vorratIcon img { width:30px; height:20px; }
#fahrt-ui #vorrat .vorratName { font-size:9px; line-height:10px; color:inherit; }
#fahrt-ui #vorrat [data-vorrat][data-walze] .vorratIcon { animation:slotWalze .12s linear infinite; }
#fahrt-ui #vorrat [data-vorrat][data-stopp] { animation:slotStopp .45s ease-out; }
@keyframes slotWalze { 0% { transform:translateY(-14px); opacity:.2; } 50% { transform:translateY(0); opacity:1; } 100% { transform:translateY(14px); opacity:.2; } }
@keyframes slotStopp { 0% { transform:scale(1.18); } 60% { transform:scale(.96); } 100% { transform:scale(1); } }
#fahrt-ui #vorrat [data-vorrat][data-stopp]::after { content:'✦ ✦ ✦ ✦'; position:absolute; left:-6px; right:-6px; top:-4px; text-align:center; letter-spacing:6px; color:#ffd84a; text-shadow:0 0 2px #80530d; font:900 11px/1 system-ui; pointer-events:none; animation:slotKonfetti .45s ease-out forwards; }   /* Herz 14.10.: Konfetti, wenn die Walze steht */
@keyframes slotKonfetti { 0% { transform:translateY(0) scale(.4); opacity:0; } 30% { opacity:1; } 100% { transform:translateY(-22px) scale(1.2); opacity:0; } }
@media (prefers-reduced-motion:reduce) { #fahrt-ui #vorrat [data-vorrat][data-walze] .vorratIcon, #fahrt-ui #vorrat [data-vorrat][data-stopp] { animation:none; } #fahrt-ui #vorrat [data-vorrat][data-stopp]::after { display:none; } }
#fahrt-ui #vorrat #fixerBtn strong { font-size:13px; margin-top:3px; color:#493d32; }
#fahrt-ui #vorrat #fixerBtn.bereit { background:#f6c34b; color:#493d32; border-color:#493d32; box-shadow:0 4px 0 #80530d,inset 0 2px 0 #ffe59b; }
#fahrt-ui #vorrat #fixerBtn.aktiv { background:#fff0a7; color:#493d32; }
/* RIVE-FLUG-1014: der bereite Fixer zwinkert - ein Glanz huscht alle 3,4 s durch den eigenen Knopf (overflow:hidden, nichts ragt heraus), dazu ein kurzes Augenzwinkern der Schrift. */
#fahrt-ui #vorrat #fixerBtn.bereit::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%); transform:translateX(-130%); animation:fixerZwinkern 3.4s ease-in-out infinite; }
#fahrt-ui #vorrat #fixerBtn.bereit strong { animation:fixerLid 3.4s ease-in-out infinite; }
@keyframes fixerZwinkern { 0%, 72% { transform:translateX(-130%); } 88%, 100% { transform:translateX(130%); } }
@keyframes fixerLid { 0%, 86% { transform:scaleY(1); } 90% { transform:scaleY(.25); } 94%, 100% { transform:scaleY(1); } }
/* HUD-RIVE-1019 FIXER-BEREIT-PULS: beim Wechsel auf "bereit" laeuft einmal ein Goldpuls (Blitz, zwei Ringe, Glanzkreuze) durch den eigenen Knopf;
   Streifen v2/assets/ui/hud_fixer.webp aus tools/rive/hud_fixer.py (18 Bilder a 62x50 px = Innenflaeche, 2x gebacken). overflow:hidden des Knopfs schneidet
   alles am Rand ab - nichts erreicht Nachbarn; z-index:0 = unter Schrift. Ruhebild = leeres Bild 0, keine Dauer-Animation. */
#fahrt-ui #vorrat #fixerBtn.bereit::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:url('./assets/ui/hud_fixer.webp') 0 0/1116px 50px no-repeat; animation:hudFixerPuls .62s steps(18,end); }
@keyframes hudFixerPuls { to { background-position-x:-1116px; } }
@media (prefers-reduced-motion:reduce) { #fahrt-ui #vorrat #fixerBtn.bereit::after, #fahrt-ui #vorrat #fixerBtn.bereit strong { animation:none; } #fahrt-ui #vorrat #fixerBtn.bereit::after { display:none; } #fahrt-ui #vorrat #fixerBtn.bereit::before { display:none; } }

/* ===== ROHR-MINI (Kevin 24.09.2026): "Der Balken fuer den Rohrschaden sollte ein Rohr sein,
   das nach und nach bricht, in klein." Risse r1-r5 erscheinen mit data-risse, bei 6 klafft
   das Rohr auseinander. Farbe des Zustands bleibt --pipe-tone (Prozentzahl, Kontur). */
#fahrt-ui #pipeBox .rohrMini, #fahrt-ui #pipeBox #pipeFill.rohrMini { display:block; width:92px; height:20px; margin-top:2px; overflow:visible; background:none; transform:none; border-radius:0; will-change:auto; }
.rohrMini .rmKoerper { fill:#c9c2b6; stroke:#493d32; stroke-width:1.6; }
.rohrMini .rmNaht { fill:#c9c2b6; }   /* verdeckt die Stossfuge der Haelften, bis das Rohr bricht */
.rohrMini .rmMuffe { fill:#c9c2b6; stroke:#493d32; stroke-width:1.6; }
.rohrMini .rmGlanz { stroke:rgba(255,255,255,.55); stroke-width:1.4; stroke-linecap:round; fill:none; }
.rohrMini .rmRiss { fill:none; stroke:#1b1b1b; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.rohrMini .rmL, .rohrMini .rmR { transition:transform .35s cubic-bezier(.3,1.6,.5,1); transform-box:fill-box; }
.rohrMini .rmL { transform-origin:100% 50%; } .rohrMini .rmR { transform-origin:0% 50%; }
#pipeBox[data-risse="1"] .r1, #pipeBox[data-risse="2"] :is(.r1,.r2), #pipeBox[data-risse="3"] :is(.r1,.r2,.r3),
#pipeBox[data-risse="4"] :is(.r1,.r2,.r3,.r4), #pipeBox:is([data-risse="5"],[data-risse="6"]) .rmRiss { opacity:1; }
#pipeBox[data-zustand="warn"] .rohrMini :is(.rmKoerper,.rmNaht) { fill:#d6c9a8; }
#pipeBox[data-zustand="kritisch"] .rohrMini :is(.rmKoerper,.rmNaht) { fill:#d9a79c; }
#pipeBox[data-zustand="kritisch"] .rohrMini .rmRiss { stroke:#7a0f08; stroke-width:1.9; }
#pipeBox[data-risse="5"] .rohrMini { animation:rohrZittern .5s steps(2) infinite; }
#pipeBox[data-risse="6"] .rohrMini .rmL { transform:translate(-3px,1px) rotate(-9deg); }
#pipeBox[data-risse="6"] .rohrMini .rmR { transform:translate(3px,1px) rotate(9deg); }
#pipeBox[data-risse="6"] .rohrMini :is(.rmGlanz,.rmNaht) { opacity:0; }
@keyframes rohrZittern { 50% { transform:translateX(.6px); } }
@media (prefers-reduced-motion: reduce) { #pipeBox .rohrMini { animation:none !important; } .rohrMini .rmL, .rohrMini .rmR { transition:none; } }

/* PERSONAL 25.09.: eine Werkstatt, vier Designbereiche. Material statt Neonrahmen. */
#gkMetaRoot .gkPersonalRaum { position:absolute; inset:0; pointer-events:none; }
#gkMetaRoot .gkPersonalRaum > svg { width:100%; height:100%; }
#gkMetaRoot .gkPersonalRaum[hidden], #gkMetaRoot .gkPersonalPreview[hidden] { display:none; }
#gkMetaRoot .gkDesignTabs { gap:calc(.5 * var(--su)); }
#gkMetaRoot .gkDesignTabs .gkTab { padding:calc(.55 * var(--su)) calc(.8 * var(--su)); font-size:max(11px,calc(1.3 * var(--su))); }
#gkMetaRoot .gkStC .gkWallet.rechts { right:calc(1.8 * var(--su)); }
#gkMetaRoot .gkStC .gkRail { width:calc(14.6 * var(--su)); grid-template-columns:repeat(2,minmax(0,1fr)); }
#gkMetaRoot .gkStC .gkRailBtn { width:100%; min-height:46px; height:calc(7.3 * var(--su)); }
#gkMetaRoot .gkStC .gkRailName { white-space:normal; overflow-wrap:anywhere; font-size:max(9px,calc(.9 * var(--su))); text-align:center; line-height:1.05; }
#gkMetaRoot .gkPersonalPanel { width:calc(35 * var(--su)); height:calc(34.5 * var(--su)); border:1px solid #A2AF9D; border-radius:calc(1.1 * var(--su)); background:#fff6e4; color:#493d32; box-shadow:0 calc(.6 * var(--su)) calc(1.5 * var(--su)) #5b443370; }
#gkMetaRoot .gkPersonalPanel h4 { padding:calc(.65 * var(--su)); border-bottom:1px solid #d6bc88; font-size:calc(1.35 * var(--su)); letter-spacing:.03em; color:#60462f; }
#gkMetaRoot .gkPersonalPanel .gkFragStand { display:none; }
#gkMetaRoot .gkPersonalPanel .gkSkins { display:flex; flex-direction:column; gap:calc(.45 * var(--su)); overflow-y:auto; overscroll-behavior:contain; padding:2px; scrollbar-width:thin; }
#gkMetaRoot .gkPersonalItem { display:flex; flex-direction:row; justify-content:flex-start; gap:calc(1 * var(--su)); width:100%; min-height:calc(6.3 * var(--su)); padding:calc(.7 * var(--su)); border:1px solid #c1a278; border-radius:calc(.6 * var(--su)); text-align:left; background:#fff8e9; box-shadow:none; color:#493d32; flex-shrink:0; }
#gkMetaRoot .gkPersonalItem:hover { transform:none; filter:brightness(1.08); box-shadow:none; }
#gkMetaRoot .gkPersonalItem.isSelected { border-color:#b68335; background:#f6dfaa; box-shadow:inset 3px 0 #b68335; }
#gkMetaRoot .gkPersonalItem.isPreview { border-color:#a77c52; background:#f3e5ca; box-shadow:inset 3px 0 #a77c52; }
#gkMetaRoot .gkMaterial { width:calc(4.5 * var(--su)); height:calc(4.5 * var(--su)); min-width:30px; min-height:30px; flex-shrink:0; border-radius:calc(.5 * var(--su)); border:1px solid #D9D0AB80; color:#F2E8CE; background:linear-gradient(145deg,#FFFFFF25,transparent 55%,#00000040),var(--material); box-shadow:inset 0 1px #FFFFFF55,0 2px 3px #5b443360; display:grid; place-items:center; }
#gkMetaRoot .gkMaterial .gkGlyph { width:65%; height:65%; }
#gkMetaRoot .gkPersonalCopy { display:flex; flex-direction:column; gap:3px; min-width:0; }
#gkMetaRoot .gkPersonalCopy strong { font:calc(1.35 * var(--su)) var(--gk-display); letter-spacing:.035em; color:#493d32; }
#gkMetaRoot .gkPersonalCopy small { font:500 max(10px,calc(.94 * var(--su)))/1.2 var(--gk-body); color:#685640; }
#gkMetaRoot .gkPersonalCopy em { font:800 max(9px,calc(.95 * var(--su)))/1.3 var(--gk-body); font-style:normal; letter-spacing:.08em; color:#795225; }
#gkMetaRoot .gkPreviewBuy { display:flex; flex-direction:column; gap:4px; padding:calc(.6 * var(--su)); background:#49382cD0; border-radius:5px; color:#ead4aa; font:700 max(10px,calc(1 * var(--su))) var(--gk-body); }
#gkMetaRoot .gkPreviewBuy button { min-height:36px; border-radius:6px; border:1px solid #F1D69C; background:linear-gradient(#E4C482,#B6975C); color:#302319; font:calc(1.4 * var(--su)) var(--gk-display); cursor:pointer; }
#gkMetaRoot .gkPersonalPreview { position:absolute; left:calc(55 * var(--su)); top:calc(8 * var(--su)); width:calc(42.7 * var(--su)); height:calc(31 * var(--su)); display:flex; flex-direction:column; justify-content:center; gap:calc(1.6 * var(--su)); }
#gkMetaRoot .gkRoomModel { position:relative; border:calc(.3 * var(--su)) solid var(--personal-metall); border-radius:calc(1 * var(--su)); overflow:hidden; box-shadow:0 calc(.5 * var(--su)) 0 #5b4433,0 calc(1.5 * var(--su)) calc(3 * var(--su)) #5b443380; }
#gkMetaRoot .gkRoomModel > svg { display:block; width:100%; height:auto; }
#gkMetaRoot .gkPersonalCaption { display:flex; flex-direction:column; gap:calc(.3 * var(--su)); padding:calc(1 * var(--su)); color:#EFE7D1; border-left:2px solid var(--personal-metall); background:linear-gradient(90deg,#49382cBF,transparent); text-shadow:0 1px 2px #5b4433; }
#gkMetaRoot .gkPersonalCaption small { font-size:calc(1 * var(--su)); letter-spacing:.2em; color:#ead4aa; }
#gkMetaRoot .gkPersonalCaption strong { font:calc(2.5 * var(--su)) var(--gk-display); }
#gkMetaRoot .gkPersonalCaption span { font-size:max(10px,calc(1.15 * var(--su))); }
#gkMetaRoot .gkIdentityCard { background:linear-gradient(140deg,var(--personal-dunkel),#49382c); border:calc(.25 * var(--su)) solid var(--personal-metall); padding:calc(2 * var(--su)); border-radius:calc(.9 * var(--su)); color:var(--personal-hell); box-shadow:0 calc(.6 * var(--su)) 0 #5b4433,0 calc(2 * var(--su)) calc(3 * var(--su)) #5b443360; }
#gkMetaRoot .gkIdentityTop { display:flex; align-items:center; gap:calc(1 * var(--su)); }
#gkMetaRoot .gkIdentityTop svg { width:calc(5.5 * var(--su)); height:calc(5.5 * var(--su)); flex-shrink:0; }
#gkMetaRoot .gkIdentityTop span { flex:1; font-size:calc(.9 * var(--su)); letter-spacing:.15em; }
#gkMetaRoot .gkIdentityTop strong { display:block; font:calc(1.65 * var(--su)) var(--gk-display); margin-top:.3em; letter-spacing:.03em; }
#gkMetaRoot .gkIdentityTop > b { font:calc(4 * var(--su)) var(--gk-display); opacity:.25; }
#gkMetaRoot .gkIdentityLine { height:2px; margin:calc(1.5 * var(--su)) 0; background:linear-gradient(90deg,var(--personal-metall),transparent); }
#gkMetaRoot .gkIdentityTitle small { font-size:calc(.9 * var(--su)); letter-spacing:.15em; opacity:.7; }
#gkMetaRoot .gkIdentityTitle strong { display:block; font:calc(2.8 * var(--su)) var(--gk-display); margin:.2em 0; }
#gkMetaRoot .gkIdentityTitle p { margin:0; font-size:max(10px,calc(1.1 * var(--su))); opacity:.75; }
#gkMetaRoot .gkIdentityStats { display:flex; gap:calc(3 * var(--su)); margin-top:calc(2 * var(--su)); }
#gkMetaRoot .gkIdentityStats span { font-size:calc(.8 * var(--su)); letter-spacing:.04em; }
#gkMetaRoot .gkIdentityStats b { display:block; font:calc(2.4 * var(--su)) var(--gk-display); }
#gkMetaRoot .gkIdentityCard footer { border-top:1px solid #D5E1D125; margin-top:calc(1.5 * var(--su)); padding-top:calc(.9 * var(--su)); font-size:calc(.75 * var(--su)); letter-spacing:.2em; opacity:.5; }
@media(max-height:390px) { #gkMetaRoot .gkPersonalCopy small { display:none; } #gkMetaRoot .gkPersonalItem { min-height:45px; } #gkMetaRoot .gkPersonalPanel { top:calc(6.3 * var(--su)); height:calc(33 * var(--su)); } }

/* Design ist ein Layout aus echten Bereichen; Karten duerfen keinen Bereich sprengen. */
#gkMetaRoot .gkStC { inset:0; transform:none; width:100%; height:100%; box-sizing:border-box; padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); display:grid; grid-template-columns:clamp(88px,11vw,148px) minmax(220px,.95fr) minmax(220px,1.15fr); grid-template-rows:44px minmax(0,1fr) 46px; gap:10px; background:linear-gradient(110deg,#49382cd9,#49382c99 50%,#49382c40); }
#gkMetaRoot .gkStC > * { min-width:0; min-height:0; box-sizing:border-box; }
#gkMetaRoot .gkStC .gkDesignTabs { position:relative; inset:auto; grid-column:1/3; grid-row:1; align-self:stretch; gap:5px; }
#gkMetaRoot .gkStC .gkDesignTabs .gkTab { flex:1; min-width:0; min-height:44px; padding:5px; font-size:clamp(11px,1.4vw,18px); white-space:nowrap; }
#gkMetaRoot .gkStC .gkDesignTabs .gkGlyph { width:clamp(13px,1.8vw,23px); height:clamp(13px,1.8vw,23px); }
#gkMetaRoot .gkStC .gkWallet { position:static; grid-column:3; grid-row:1; justify-self:end; align-self:center; }
#gkMetaRoot .gkStC .gkRail { position:static; grid-column:1; grid-row:2; width:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(52px,75px); align-content:start; gap:7px; overflow:auto; padding-bottom:5px; }
#gkMetaRoot .gkStC .gkRailBtn { height:auto; min-height:52px; padding:4px 2px; box-sizing:border-box; }
#gkMetaRoot .gkStC .gkRailName { font-size:clamp(9px,1vw,13px); overflow-wrap:anywhere; }
#gkMetaRoot .gkStC .gkDesignPanel { position:static; grid-column:2; grid-row:2; width:auto; height:auto; padding:10px; gap:8px; overflow:hidden; border-radius:12px; display:flex; flex-direction:column; } #gkMetaRoot .gkStC .gkDesignPanel:has(> .hhoSets) { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b8aa78 #fff0d2; } #gkMetaRoot .gkStC .gkDesignPanel:has(> .hhoSets) > :is(.gkSkins,.hhoSets) { flex:none; overflow:visible; }   /* Fund karten-zentrale-1: mit Design-Sets scrollt das ganze Paneel, Raster und Sets behalten ihre Hoehe */
#gkMetaRoot .gkStC .gkDesignPanel h4 { flex:none; padding:0 0 7px; font-size:clamp(12px,1.25vw,17px); line-height:1.2; overflow-wrap:anywhere; }
#gkMetaRoot .gkStC .gkSkins { min-width:0; min-height:0; flex:1 1 0; overflow:auto; overscroll-behavior:contain; grid-template-columns:repeat(auto-fit,minmax(min(95px,100%),1fr)); grid-auto-rows:minmax(110px,1fr); gap:7px; padding:3px; scrollbar-width:thin; }
#gkMetaRoot .gkStC .gkSkin { min-width:0; box-sizing:border-box; padding:7px 4px; gap:5px; }
#gkMetaRoot .gkStC .gkSkin .nm { max-width:100%; overflow-wrap:break-word; hyphens:auto; font-size:clamp(11px,1.1vw,15px); line-height:1.15; }
#gkMetaRoot .gkStC .gkSkin .pr { max-width:100%; box-sizing:border-box; white-space:normal; overflow-wrap:break-word; text-wrap:balance; font-size:clamp(10px,.9vw,13px); line-height:1.15; padding:3px 5px; }
#gkMetaRoot .gkStC .gkSkin .sw { width:clamp(32px,4vw,55px); height:clamp(32px,4vw,55px); flex:none; }
#gkMetaRoot .gkStC .gkPersonalPanel .gkSkins { display:flex; }
#gkMetaRoot .gkStC .gkPersonalItem { min-height:76px; padding:8px; gap:9px; }
#gkMetaRoot .gkStC .gkPersonalCopy { flex:1; overflow-wrap:anywhere; }
#gkMetaRoot .gkStC .gkPersonalCopy strong { font-size:clamp(12px,1.2vw,17px); line-height:1.15; }
#gkMetaRoot .gkStC .gkPersonalCopy small { display:block; font-size:clamp(10px,.95vw,13px); line-height:1.3; }
#gkMetaRoot .gkStC .gkPersonalCopy em { font-size:clamp(10px,.9vw,12px); letter-spacing:.02em; }
#gkMetaRoot .gkStC .gkPreviewBuy { flex:none; padding:8px; font-size:11px; }
#gkMetaRoot .gkStC .gkPreviewBuy button { min-height:44px; font-size:14px; }
#gkMetaRoot .gkStC :is(.gkRigD,.gkGustavD,.gkPersonalPreview) { position:relative; inset:auto; grid-column:3; grid-row:2; width:100%; height:100%; max-height:100%; margin:0; overflow:hidden; }
#gkMetaRoot .gkStC .gkGustavD { padding:12px 20%; border-radius:16px; background:radial-gradient(ellipse at 50% 35%,#c4cfad30,transparent 70%); }
#gkMetaRoot .gkStC .gkGustavD::before { content:''; position:absolute; bottom:8px; left:26%; width:48%; height:16px; border-radius:50%; background:#49382c70; }
#gkMetaRoot .gkStC .gkPersonalPreview { justify-content:center; gap:12px; }
#gkMetaRoot .gkStC .gkRoomModel { flex:0 1 auto; min-height:0; }
#gkMetaRoot .gkStC .gkPersonalCaption { padding:10px; gap:5px; }
#gkMetaRoot .gkStC .gkPersonalCaption strong { font-size:clamp(17px,2vw,29px); line-height:1.1; }
#gkMetaRoot .gkStC .gkPersonalCaption span { font-size:clamp(11px,1vw,14px); }
#gkMetaRoot .gkStC .gkDesignCancel { position:static; grid-column:2; grid-row:3; justify-self:end; }
#gkMetaRoot .gkStC > .gkBottomR { position:static; grid-column:3; grid-row:3; justify-self:end; }
#gkMetaRoot .gkStC :is(.gkDesignCancel,.gkBottomR) .gkBtn { height:44px; min-height:44px; font-size:clamp(16px,1.8vw,24px); padding:4px 20px; }
@media(max-height:450px) { #gkMetaRoot .gkStC { gap:7px; padding-top:7px; padding-bottom:7px; } #gkMetaRoot .gkStC .gkPersonalCaption span { display:none; } #gkMetaRoot .gkStC .gkPersonalCaption { padding:7px; } #gkMetaRoot .gkStC .gkPersonalPreview { gap:7px; } }
#gkMetaRoot .gkStC .gkRail { grid-template-columns:minmax(0,1fr); grid-auto-rows:44px; gap:6px; }
#gkMetaRoot .gkStC .gkRailBtn { min-height:44px; flex-direction:row; justify-content:flex-start; gap:5px; padding:5px; box-shadow:0 2px 0 #5b4433; }
#gkMetaRoot .gkStC .gkRailBtn .gkGlyph { width:16px; height:16px; }
#gkMetaRoot .gkStC .gkRailName { font-size:clamp(9px,.85vw,12px); white-space:nowrap; overflow-wrap:normal; }
#gkMetaRoot .gkStC :is(.gkSkins,.gkRail) { scrollbar-color:#b8aa78 #49382c; scrollbar-width:thin; }
#gkMetaRoot .gkStC .gkDetailBild { display:grid; place-items:center; flex:0 0 clamp(66px,8vw,116px); height:clamp(60px,7vw,88px); overflow:hidden; border-radius:7px; background:radial-gradient(ellipse,#76564150,#49382c80); border:1px solid #a9b6a44d; }
#gkMetaRoot .gkStC .gkDetailBild > :is(svg,canvas) { display:block; width:100%; height:100%; object-fit:contain; }
#gkMetaRoot .gkSchildPreview { display:block; position:relative; width:100%; height:100%; }
#gkMetaRoot .gkSchildPreview > :is(img,canvas) { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
#gkMetaRoot .gkSchildPreview[data-rive="an"] > img { visibility:hidden; }
#gkMetaRoot .gkSchildLeer { color:#e4cba5; font-weight:800; font-size:12px; }
#gkMetaRoot .gkStC .gkPersonalItem { min-height:94px; }
#gkMetaRoot .gkStC .gkRoomModel { background:#49382c; }
/* ZWEITE LUFT (Kevin 25.09.): Angebot nach dem Verlust. Gustav steht im Gully, das Wasser steigt vom Stiefel bis ueber die Kappe
   (hud.js setzt --zc 0..1 im Sim-Takt), die Zahl am Deckelrand ist die Uhr. Farben wie #schichtende, Wasser #318bd5, Diamant #27d9ef. */
#zweiteChance{position:fixed;inset:0;z-index:410;display:grid;grid-template-columns:auto minmax(0,430px);align-items:center;justify-content:center;gap:12px clamp(18px,4vw,44px);padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(ellipse at 30% 45%,#765641f2,#49382cfb 70%);color:#fff4d8;font-family:Bahnschrift,Segoe UI,system-ui,sans-serif;overflow-y:auto;outline:none;animation:zcRein .3s ease-out}
#zweiteChance[hidden]{display:none}
@keyframes zcRein{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.zcUhr{position:relative;width:min(300px,74vh);aspect-ratio:1;justify-self:end}
.zcGully{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:repeating-linear-gradient(0deg,#0000 0 17px,#ffffff0a 17px 19px),radial-gradient(circle at 50% 36%,#765641,#49382c 74%);border:12px solid #5b4433;box-shadow:inset 0 0 0 3px #5b4433,inset 0 12px 26px #000b,0 0 0 3px #5b4433,0 8px 0 #5b4433,0 0 34px #a77c522e;transition:box-shadow .3s}
.zcGully::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 3.5%,#fff8e6 0 4px,#49382c 5px,#0000 6px),radial-gradient(circle at 3.5% 50%,#fff8e6 0 4px,#49382c 5px,#0000 6px),radial-gradient(circle at 96.5% 50%,#fff8e6 0 4px,#49382c 5px,#0000 6px),radial-gradient(circle at 16% 16%,#fff8e6 0 3px,#49382c 4px,#0000 5px),radial-gradient(circle at 84% 16%,#fff8e6 0 3px,#49382c 4px,#0000 5px)}
#zcGustav{position:absolute;left:50%;bottom:-3%;height:88%;transform:translateX(-50%);transform-origin:50% 100%;filter:drop-shadow(0 4px 0 #0007);user-select:none;pointer-events:none}
.zcWasser{position:absolute;left:0;right:0;bottom:0;height:calc(10% + var(--zc,0) * 90%);background:linear-gradient(#4aa6ecd0,#318bd5e0 30%,#1f5f99f0);box-shadow:inset 0 3px 0 #b6e2ffb0;transition:background .3s}
.zcWasser::before{content:"";position:absolute;left:-10%;right:-10%;top:-9px;height:14px;background:radial-gradient(12px 8px at 12px 12px,#4aa6ecd0 98%,#0000) 0 0/24px 14px repeat-x;animation:zcWelle 1.6s linear infinite}
@keyframes zcWelle{to{transform:translateX(24px)}}
.zcWasser b{position:absolute;bottom:6%;width:9px;height:9px;border-radius:50%;border:2px solid #d8f1ffcc;background:#ffffff26;animation:zcBlase 2.4s ease-in infinite;opacity:0}
.zcWasser b:nth-child(1){left:22%}.zcWasser b:nth-child(2){left:38%;animation-delay:.7s;width:6px;height:6px}.zcWasser b:nth-child(3){left:57%;animation-delay:1.3s}
.zcWasser b:nth-child(4){left:70%;animation-delay:.35s;width:12px;height:12px}.zcWasser b:nth-child(5){left:47%;animation-delay:1.8s;width:5px;height:5px}
@keyframes zcBlase{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-190px) translateX(6px);opacity:0}}
#zcZahl{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#49382c;border:4px solid #a77c52;color:#fff;font-size:36px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;box-shadow:0 4px 0 #5b4433,0 0 18px #a77c5266;text-shadow:0 2px 0 #5b4433}
.zcText{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.zcKicker{font-size:11px;font-weight:900;letter-spacing:.24em;color:#ead4aa}
#zcTitel{margin:0;font-size:clamp(22px,3.2vw,32px);line-height:1.05;color:#ffad91;text-shadow:0 3px 0 #5b4433}
.zcBlase{position:relative;margin:2px 0 2px 10px;padding:8px 12px;border-radius:14px;background:#fff4d8;color:#493d32;font-size:14px;font-weight:700;line-height:1.3;box-shadow:0 3px 0 #0008}
.zcBlase::before{content:"";position:absolute;left:-9px;top:12px;border:7px solid #0000;border-right:10px solid #fff4d8;border-left:0}
#zcInfo{margin:0;white-space:pre-line;font-size:12.5px;line-height:1.45;color:#ead4aa}
#zcTipp{margin:0;font-size:12.5px;line-height:1.35;color:#ffd24a}
.zcBoard{margin:0;font-size:11px;line-height:1.3;color:#f6dfb3}
#zcFehler{margin:0;padding:6px 10px;border-radius:8px;background:#5a1f1f;color:#ffd0c7;font-size:12px;font-weight:700}
#zcFehler[hidden]{display:none}
#zcJa,#zcNein{font-family:inherit;cursor:pointer;border:2px solid #5b4433;border-radius:12px;font-weight:900;letter-spacing:.04em;line-height:1.15;width:100%}
#zcJa{min-height:56px;margin-top:4px;padding:10px 14px;font-size:15px;background:linear-gradient(#ffd86b,#e7a928);color:#302319;box-shadow:0 4px 0 #765641,inset 0 2px 0 #fff3d8}
#zcJa:not(:disabled){animation:zcBereit .35s ease-out}
@keyframes zcBereit{50%{transform:scale(1.04)}}
#zcJa:disabled{cursor:default;filter:grayscale(.85) brightness(.8);opacity:.6;box-shadow:none}
#zcNein{min-height:48px;margin-top:12px;padding:10px 14px;font-size:14px;background:#49382c;border-color:#a77c52;color:#ead4aa;box-shadow:0 4px 0 #5b4433}
/* Werbe-Plaetze 12.10.2026 (v2/werbeplaetze.js): freiwilliges Video, gleich gross wie die Alternative (CrazyGames-Regel), Standard AUS */
#zcVideo,#seWerbung{font-family:inherit;cursor:pointer;width:100%;min-height:48px;margin-top:10px;padding:10px 14px;border:2px solid #1f5a73;border-radius:12px;font-weight:900;font-size:14px;letter-spacing:.04em;line-height:1.15;background:linear-gradient(#5fd2f0,#2a9cc4);color:#0b2530;box-shadow:0 4px 0 #154456,inset 0 2px 0 #b9eefc}
#zcVideo:disabled,#seWerbung:disabled{cursor:default;filter:grayscale(.6);opacity:.75;box-shadow:none}
#seWerbung{grid-column:1/-1;grid-row:7;justify-self:center;align-self:center;width:min(380px,90vw);margin:4px 0 0}
#schichtende.herz-ende>#seWerbung{grid-row:auto;min-height:40px;padding:6px 12px;font-size:13px}
@media(max-width:520px){#seWerbung{grid-row:auto;order:3}}
@media(max-height:450px){#seWerbung{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:min(200px,24vw);min-height:40px;padding:4px 10px;margin:0;font-size:11px;z-index:2}}   /* flaches Querformat: keine Zusatzhoehe, Zur Zentrale bleibt sichtbar */
.gkKiTeaser .gkKiBonus{display:flex;width:max-content;max-width:100%;margin:6px auto 0;min-height:44px}
#zweiteChance button:focus-visible{outline:3px solid #f6c865;outline-offset:3px}
#zweiteChance button:active:not(:disabled){transform:translateY(2px);filter:brightness(.95)}
.zcSr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Kevin 10.11.: die letzten Sekunden sehen aus wie alle anderen - kein Pulsieren, kein Rot (kein kuenstlicher Zeitdruck). */
@media(max-height:400px){#zweiteChance{gap:8px 22px}.zcText{gap:4px}#zcTitel{font-size:22px}.zcBlase{padding:6px 10px;font-size:13px}#zcJa{min-height:52px}#zcNein{min-height:46px;margin-top:10px}#zcZahl{width:58px;height:58px;font-size:30px;bottom:-12px}}
@media(max-width:520px){#zweiteChance{grid-template-columns:minmax(0,380px);align-content:safe center}.zcUhr{width:min(170px,40vh);justify-self:center;margin-bottom:14px}}
#zweiteChance.zcNotpumpe { background:linear-gradient(90deg,#3326193b,#281c1259); }
.zcNotpumpe .zcText { background:#3f2c1ef0; border:2px solid #b98c52; border-radius:14px; padding:8px 12px; box-shadow:0 4px 0 #302116,0 8px 22px #1b120a70; }
.zcNotpumpe #zcTitel { color:#ffda83; }
.zcNotpumpe #zcVideo { background:linear-gradient(#f2f6cb,#afd480); color:#24351d; border-color:#536d38; box-shadow:0 3px 0 #38482b; }
@media (max-height:420px) and (min-width:521px) {
  #zweiteChance.zcNotpumpe { grid-template-columns:minmax(84px,23vh) minmax(0,330px); gap:8px 16px; justify-content:end; }
  .zcNotpumpe .zcUhr { width:100%; }
  .zcNotpumpe .zcText { display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:4px 8px; }
  .zcNotpumpe .zcText > :not(button), .zcNotpumpe #zcNein { grid-column:1/-1; }
  .zcNotpumpe #zcJa, .zcNotpumpe #zcVideo, .zcNotpumpe #zcNein { margin:0; min-height:44px; }
}
@media(prefers-reduced-motion:reduce){#zweiteChance,#zcJa:not(:disabled),.zcWasser::before{animation:none}.zcWasser b{display:none}}
.seLuft{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:#49382c;border:1px solid #a77c52;color:#ead4aa;font-size:10px;font-weight:900;letter-spacing:.1em;white-space:nowrap}
.seLuft[hidden]{display:none}
/* Chip liegt ueber dem Titel: bei knapper Hoehe (Padding 14 px) schob er sich sonst in "Spirale verknotet!" (667x375). */
#schichtende:has(#seLuft:not([hidden])) #seGrund{margin-top:22px}

/* ---- Boot-Choreo Deckel/Kamerabefahrung/Rolltor (26.09.) ---- */
/* Kevin 25.09.: "Der Startbildschirm wo DrainX ist, ist zu billig fuer Veroeffentlichung, sollte mehr animiert und cooler
   wirken, wie bei HCR2 (Hill Climb Racing 2)." Bauabschnitt 1 "Deckel auf, Chef!".
   Zeitachse W4.1 unveraendert (t ab Intro-DOM, T0 = setState(MAIN_MENU)): 0-70 Ruhe, 70-420 Gullydeckel klappert (Whoosh t=70),
   420-560 Deckel fliegt weg, 490 Wortmarke landet = boot_logo-Landung + Spritzer + Screen-Shake, 560-900 Schlammtropfen,
   800-1000 Schlammschwall, 1000 LOADING (Schwall laeuft ab, Kamerabefahrung), T0 Rolltor = tor_auf, T0+640 Endanschlag,
   T0+1200 data-auftritt weg = bedienbar. Tippen ueberspringt (meta.js runBoot, click + 250-ms-Sperre).
   Schlamm ist reines DOM/CSS: kein Wasserbild, kein v2/wasser*.js. Animiert werden nur transform/translate/scale/rotate/opacity
   (einzige Ausnahme: background-position des Ladebalkens). */
.gkBootScreen { position:absolute; inset:0; z-index:12; overflow:hidden; display:grid; color:var(--gk-cream); will-change:transform; }
.gkMetaRoot[data-state='intro'],.gkMetaRoot[data-state='laden'] { z-index:54; }
.gkBootScreen[hidden] { display:none !important; }
/* Nasser Stein in der Mitte, Rand nahe am Android-Splash #14243a (kein Schwarzblitz). Screen-Shake bei der Landung 490 ms. */
.gkIntroScreen { place-items:center; background:radial-gradient(ellipse at 50% 55%,#49382c 0%,#0b100d 55%,#49382c 100%); animation:gkIntroShake 80ms linear 490ms; }
@keyframes gkIntroShake { 0% { transform:translate(3px,-2px); } 50% { transform:translate(-2px,1px); } 100% { transform:none; } }
.gkIntroScreen::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 52%,rgba(166,207,11,.14),transparent 34%); pointer-events:none; }
/* Die Wortmarken-Keyframe liegt auf dem img, NICHT auf .gkIntroMark: der Deckel (::before) laege sonst unter opacity 0 der Marke. */
.gkIntroMark { position:relative; width:min(680px,calc(100vw - 72px)); display:grid; place-items:center; filter:drop-shadow(0 0 22px rgba(166,207,11,.16)); }
.gkDrainxLogo { display:block; width:100%; height:auto; aspect-ratio:1280 / 310; object-fit:contain; background:transparent; }
/* Lesbarkeit (Gegenpruefung 26.09.): das graue "DRAIN" der Wortmarke verschwand auf nassem Stein und OSD-Karte fast ganz.
   Statischer heller Schein (drop-shadow, kein blur, nicht animiert); eine harte Kontur zeigte den Freistell-Saum am X. */
.gkIntroMark .gkDrainxLogo { transform-origin:50% 80%; animation:gkIntroDeckel 720ms cubic-bezier(.2,.8,.2,1) both; filter:drop-shadow(0 0 2px rgba(240,246,220,.95)) drop-shadow(0 0 10px rgba(215,255,127,.3)); }
/* 68 % von 720 ms = 490 ms = AUDIO_ANSCHLAG_BOOT_LOGO_MS 420 + 70 (Landung des Dreiklangs); 78 % Stauchung. Kein blur mehr. */
@keyframes gkIntroDeckel { 0%,48% { opacity:0; transform:translateY(18%) scale(.6); } 68% { opacity:1; transform:scale(1.12); } 78% { opacity:1; transform:scale(1.06,.92); } 100% { opacity:1; transform:scale(1); } }
/* Gullydeckel: gerippter Guss, gruener Schachtschimmer drunter (statisch). Klappert dreimal, fliegt bei 420-560 ms weg. */
.gkIntroMark::before { content:''; position:absolute; left:50%; top:50%; z-index:2; box-sizing:border-box; width:min(46vh,230px); height:min(46vh,230px); translate:-50% -50%; border-radius:50%; border:10px solid #5b4433; background:radial-gradient(circle,transparent 0 58%,rgba(0,0,0,.4) 59% 63%,rgba(255,255,255,.08) 64% 65%,transparent 66%),radial-gradient(circle at 36% 30%,rgba(255,255,255,.14),transparent 55%),repeating-linear-gradient(45deg,rgba(0,0,0,.24) 0 4px,transparent 4px 14px),repeating-linear-gradient(90deg,#49382c 0 9px,#49382c 9px 14px); box-shadow:0 0 24px rgba(166,207,11,.35); pointer-events:none; will-change:transform,opacity; animation:gkDeckelFlug 560ms linear both; }
@keyframes gkDeckelFlug { 0%,12.5% { transform:none; opacity:1; } 22.7% { transform:translateY(-4px) rotate(-2deg); } 33% { transform:none; } 43.3% { transform:translateY(2px) rotate(2deg); } 53.6% { transform:none; } 63.8% { transform:translateY(-3px) rotate(-2deg); } 75% { transform:none; opacity:1; animation-timing-function:cubic-bezier(.3,0,.8,.6); } 100% { transform:translateY(-140%) rotate(-25deg) scale(.9); opacity:0; } }
/* Spritzer bei 490 ms: ein Punkt, die Tropfen sind statische box-shadows; nur scale/opacity laufen (forwards: vorher unsichtbar). */
.gkIntroMark::after { content:''; position:absolute; left:50%; top:60%; z-index:3; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#9bc21a; opacity:0; pointer-events:none; box-shadow:-150px -46px 0 11px #5a4a1c,-96px 34px 0 7px #6f7a1e,-44px -66px 0 8px #9bc21a,34px 52px 0 10px #5a4a1c,96px -58px 0 6px #6f7a1e,162px 22px 0 13px #5a4a1c,-204px 8px 0 5px #9bc21a,222px -30px 0 5px #b9c46a; animation:gkSpritzer 420ms ease-out 490ms forwards; }
@keyframes gkSpritzer { from { opacity:1; transform:scale(.2); } to { opacity:0; transform:scale(1.25); } }
/* Schlammtropfen am Unterrand des N (58-60 % Breite): erscheint mit der Landung, laeuft ab 560 ms 22 px herab, reisst bei 900 ms ab. */
.gkIntroTropfen { position:absolute; left:59.4%; top:70%; z-index:3; width:6px; height:14px; margin-left:-3px; border-radius:50% 50% 50% 50% / 35% 35% 65% 65%; background:radial-gradient(circle at 35% 68%,#e8d9a0 0 1px,transparent 2px),#6b4f1d; transform-origin:50% 0; pointer-events:none; animation:gkTropfen 1000ms linear both; }
@keyframes gkTropfen { 0%,49% { opacity:0; transform:scaleY(.4); } 56% { opacity:1; transform:none; } 90% { opacity:1; transform:translateY(22px) scaleY(1.6); } 100% { opacity:0; transform:translateY(62px) scaleY(1.2); } }
/* Schlammschwall (Intro ::after steigt 800-1000 ms) und sein Ablauf auf der Ladekarte (::after, 320 ms): gleiche Masse, Blasen als Ringe.
   inset-Oberkante -30 %: der wellige Rand liegt bei voller Deckung ueber dem Bild, volle Deckung hoechstens 200 ms. */
.gkIntroScreen::after,.gkLoadScreen::after { content:''; position:absolute; inset:-30% 0 0; z-index:4; pointer-events:none; will-change:transform; border-radius:40% 60% 0 0 / 18% 22% 0 0; -webkit-mask:radial-gradient(20px 15px at 50% 100%,#000 97%,transparent) 0 0 / 46px 16px repeat-x,radial-gradient(11px 9px at 50% 100%,#000 97%,transparent) 17px 6px / 29px 10px repeat-x,linear-gradient(#000 0 0) 0 15px / 100% 100% no-repeat; mask:radial-gradient(20px 15px at 50% 100%,#000 97%,transparent) 0 0 / 46px 16px repeat-x,radial-gradient(11px 9px at 50% 100%,#000 97%,transparent) 17px 6px / 29px 10px repeat-x,linear-gradient(#000 0 0) 0 15px / 100% 100% no-repeat; background:linear-gradient(rgba(200,210,120,.4),transparent 5%),radial-gradient(circle at 16.4% 29.6%,rgba(230,236,170,.8) 0 2px,transparent 3px),radial-gradient(circle at 16% 30%,transparent 0 8px,rgba(185,196,106,.55) 9px 10px,transparent 11px),radial-gradient(ellipse 5% 2.6% at 25% 45%,rgba(34,24,4,.75),transparent),radial-gradient(ellipse 4% 2.2% at 72% 53%,rgba(34,24,4,.7),transparent),radial-gradient(ellipse 6% 2.8% at 52% 75%,rgba(34,24,4,.7),transparent),radial-gradient(ellipse 3% 1.6% at 88% 40%,rgba(120,96,40,.8),transparent),radial-gradient(circle at 42% 24%,transparent 0 5px,rgba(185,196,106,.5) 6px 7px,transparent 8px),radial-gradient(circle at 63% 38%,transparent 0 11px,rgba(185,196,106,.5) 12px 13px,transparent 14px),radial-gradient(circle at 83% 27%,transparent 0 6px,rgba(185,196,106,.45) 7px 8px,transparent 9px),radial-gradient(circle at 30% 62%,transparent 0 7px,rgba(185,196,106,.4) 8px 9px,transparent 10px),linear-gradient(#3a3208,#5b6b14); }
.gkIntroScreen::after { transform:translateY(100%); animation:gkSchwallAuf 200ms ease-in 800ms both; }
@keyframes gkSchwallAuf { from { transform:translateY(100%); } to { transform:translateY(0); } }
.gkLoadScreen::after { animation:gkSchwallAb 320ms ease-in both; }
@keyframes gkSchwallAb { from { transform:translateY(0); } to { transform:translateY(110%); } }
/* LADEN als Kamerabefahrung: Rohrinnenwand mit Inkrustation (das Werkstattbild lädt erst an der Werkstattfläche),
   Muffen-Ringe fahren auf die Kamera zu, Karte = OSD-Einblendung der Kanalkamera. */
.gkLoadScreen { grid-template-rows:minmax(0,1fr) auto; padding:18px 22px 12px; background:radial-gradient(ellipse 9% 13% at 18% 26%,rgba(90,74,28,.5),transparent),radial-gradient(ellipse 7% 11% at 81% 70%,rgba(90,74,28,.5),transparent),radial-gradient(ellipse 13% 7% at 63% 14%,rgba(90,74,28,.5),transparent),radial-gradient(ellipse 6% 10% at 27% 82%,rgba(90,74,28,.5),transparent),radial-gradient(circle at 50% 50%,#3a3326,#1a1611 70%); }
.gkLoadScreen::before { content:''; position:absolute; left:50%; top:50%; width:150vmax; height:150vmax; translate:-50% -50%; border-radius:50%; pointer-events:none; will-change:transform,opacity; background:repeating-radial-gradient(circle,transparent 0 18%,rgba(215,255,127,.18) 18% 19%); animation:gkMuffe 900ms linear infinite; }
@keyframes gkMuffe { 0% { opacity:0; transform:scale(.2); } 40% { opacity:.5; } 100% { opacity:0; transform:scale(1.6); } }
.gkLoadCard { position:relative; z-index:1; align-self:center; justify-self:center; width:min(620px,calc(100vw - 48px)); padding:18px 22px 20px; color:#d7ff7f; text-shadow:0 0 6px rgba(215,255,127,.6); background:rgba(5,8,5,.55); border:2px solid rgba(215,255,127,.5); border-radius:6px; }
.gkLoadBrand { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.gkLoadBrand .gkDrainxLogo { width:min(250px,44vw); flex:0 1 250px; border-radius:5px; filter:drop-shadow(0 0 2px rgba(240,246,220,.95)) drop-shadow(0 0 10px rgba(215,255,127,.3)); }
.gkLoadBrand b { color:#d7ff7f; font:22px/1 var(--gk-display); white-space:nowrap; }
.gkLoadTitle { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:14px; }
.gkLoadTitle strong { font:20px/1 var(--gk-display); white-space:nowrap; }
.gkLoadTitle output { color:#d7ff7f; font:18px/1 var(--gk-display); }
.gkLoadProgress { appearance:none; display:block; width:100%; height:30px; margin-top:9px; overflow:hidden; border:2px solid rgba(215,255,127,.5); border-radius:12px; background:rgba(0,0,0,.45); }
.gkLoadProgress::-webkit-progress-bar { background:rgba(0,0,0,.45); }
/* Schlamm-Rohr: 44,13 px = 2 Streifenperioden (20 px / sin 115 Grad) -> nahtlos; fliesst per background-position. */
.gkLoadProgress::-webkit-progress-value { background:repeating-linear-gradient(115deg,#6b4f1d 0 12px,#8fd83d 12px 20px) 0 0 / 44.13px 100%; animation:gkRohrFluss 900ms linear infinite; }
.gkLoadProgress::-moz-progress-bar { background:repeating-linear-gradient(115deg,#6b4f1d 0 12px,#8fd83d 12px 20px) 0 0 / 44.13px 100%; animation:gkRohrFluss 900ms linear infinite; }
@keyframes gkRohrFluss { from { background-position:0 0; } to { background-position:44.13px 0; } }
.gkLoadDetail { display:block; margin-top:8px; font-size:12px; color:rgba(215,255,127,.85); }
.gkBootBuild { position:relative; z-index:1; justify-self:end; align-self:end; padding:5px 9px; color:rgba(255,244,216,.92); background:rgba(73,56,44,.82); border:2px solid rgba(255,244,216,.36); border-radius:8px; font-size:11px; white-space:nowrap; }
/* EINZUG ZENTRALE, nur Kaltstart: meta.js runBoot setzt data-auftritt VOR setState(MAIN_MENU) fuer 1200 ms, setState loescht es
   beim Verlassen der Zentrale (Rueckkehr aus Werkstatt/Schicht bleibt ohne Choreo). Rolltor = tor_auf: 0-640 ms hoch, Endanschlag
   640 = Ruck. Liegt auf .gkMetaRoot::after (NICHT .gkCentral::after = Vignette), z-index 7: ueber den Screens, unter .gkModal (8).
   Einfluege nur ueber translate/scale/rotate: vorhandene transforms (.gkBrand translateX(-50%), :active) bleiben unberuehrt. */
.gkMetaRoot[data-auftritt]::after { content:''; position:absolute; inset:0; z-index:7; pointer-events:none; border-bottom:4px solid #5b4433; background:linear-gradient(transparent 94%,rgba(0,0,0,.4)),repeating-linear-gradient(#765641 0 5.5%,#49382c 5.5% 10.5%,#49382c 10.5% 11%); animation:gkRolltor 640ms cubic-bezier(.45,0,.2,1) both; }
@keyframes gkRolltor { from { transform:translateY(0); } to { transform:translateY(-104%); } }
.gkMetaRoot[data-auftritt] .gkCentral { animation:gkTorRuck 80ms linear 640ms; }
@keyframes gkTorRuck { 0% { translate:0 2px; } 100% { translate:0 0; } }
/* Sperre gegen den Geistertipp waehrend des Einzugs (.gkBtn::after setzt sonst pointer-events:auto). */
.gkMetaRoot[data-auftritt] .gkCentral,.gkMetaRoot[data-auftritt] .gkCentral *,.gkMetaRoot[data-auftritt] .gkCentral *::before,.gkMetaRoot[data-auftritt] .gkCentral *::after { pointer-events:none !important; }
.gkMetaRoot[data-auftritt] .gkRigZ { animation:gkEinRig 340ms cubic-bezier(.3,1.5,.5,1) 300ms both; }
@keyframes gkEinRig { from { translate:0 -35%; } to { translate:0 0; } }
/* Gustav -170 % statt -120 %: bei left 10 %/width 16 % stuende sonst sein Arm schon am linken Rand, waehrend das Tor hochgeht. */
.gkMetaRoot[data-auftritt] .gkGustavZ { animation:gkEinGustav 380ms cubic-bezier(.2,1.4,.4,1) 380ms both; }
@keyframes gkEinGustav { from { translate:-170% 0; } to { translate:0 0; } }
.gkMetaRoot[data-auftritt] .gkCentral .gkBrand { animation:gkEinBrand 300ms cubic-bezier(.2,1.3,.4,1) 520ms both; }
@keyframes gkEinBrand { from { translate:0 -160%; rotate:-3deg; } to { translate:0 0; rotate:0deg; } }
.gkMetaRoot[data-auftritt] .gkCentral .gkWallet,.gkMetaRoot[data-auftritt] .gkCentral .gkTopRight { animation:gkEinOben 300ms ease-out 600ms both; }
.gkMetaRoot[data-auftritt] .gkCentral .gkTopRight { animation-delay:660ms; }
@keyframes gkEinOben { from { translate:0 -18px; opacity:0; } to { translate:0 0; opacity:1; } }
.gkMetaRoot[data-auftritt] .gkBottomM .gkBtn { animation:gkEinKnopf 180ms ease-out 700ms both; }
.gkMetaRoot[data-auftritt] .gkBottomM .gkBtn:nth-child(2),.gkMetaRoot[data-auftritt] .gkBottomM .gkCentralActions + .gkCentralActions .gkBtn:nth-child(1) { animation-delay:760ms; }
.gkMetaRoot[data-auftritt] .gkBottomM .gkBtn:nth-child(3),.gkMetaRoot[data-auftritt] .gkBottomM .gkCentralActions + .gkCentralActions .gkBtn:nth-child(2) { animation-delay:820ms; }
.gkMetaRoot[data-auftritt] .gkBottomM .gkCentralActions + .gkCentralActions .gkBtn:nth-child(3) { animation-delay:880ms; }
@keyframes gkEinKnopf { from { translate:0 26px; opacity:0; } to { translate:0 0; opacity:1; } }
.gkMetaRoot[data-auftritt] .gkCentral .gkKistenLayer { animation:gkEinKiste 260ms ease-out 800ms both; }
@keyframes gkEinKiste { from { opacity:0; translate:0 14px; } to { opacity:1; translate:0 0; } }
.gkMetaRoot[data-auftritt] .gkCentral .gkBottomR .gkBig { animation:gkEinBig 280ms cubic-bezier(.2,.9,.3,1) 900ms both; }
@keyframes gkEinBig { 0% { scale:.6; opacity:0; } 60% { scale:1.07; opacity:1; } 100% { scale:1; opacity:1; } }
/* reduced-motion: alle neuen Animationen aus, Endlagen sofort; Deckel, Spritzer, Tropfen, Schlamm, Ringe und Rolltor verschwinden
   ganz (sonst stuende das Tor 1200 ms geschlossen). Zeiten in meta.js bleiben, Tippen ueberspringt weiter. */
@media (prefers-reduced-motion:reduce) {
  .gkBootScreen,.gkBootScreen::before,.gkBootScreen::after,.gkIntroMark .gkDrainxLogo,.gkMetaRoot[data-auftritt] :is(.gkCentral,.gkRigZ,.gkGustavZ,.gkBrand,.gkWallet,.gkTopRight,.gkBtn,.gkKistenLayer) { animation:none !important; }
  .gkMetaRoot[data-auftritt]::after,.gkIntroMark::before,.gkIntroMark::after,.gkIntroTropfen,.gkIntroScreen::after,.gkLoadScreen::before,.gkLoadScreen::after { display:none !important; }
}
@media (prefers-reduced-motion:reduce) { .gkLoadProgress::-webkit-progress-value { animation:none !important; } }
@media (prefers-reduced-motion:reduce) { .gkLoadProgress::-moz-progress-bar { animation:none !important; } }
/* RISER-GEFAHR (Kevin 25.09.): HCR2-Klarheit im Steigrohr. Kompakte Warnbox nach Abstand der Saeule (hud.js riserSicht):
   0 = Rennen laeuft (still), 1 = < 1,5 m (Puls 0,6 s), 2 = <= 0,35 m / eingeholt (doppelter Takt). Text = Banner/Ansage. */
#riserAlarm{position:fixed;inset:auto;left:50%;top:122px;transform:translateX(-50%);width:max-content;max-width:min(65vw,420px);box-sizing:border-box;border:2px solid #ae442e;border-radius:12px;background:#64271fec;z-index:390;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;padding:8px 12px;font:900 clamp(18px,4.2vw,30px)/1.1 system-ui;letter-spacing:.03em;color:#fff4d6;text-shadow:0 1px 0 #5a1a10;-webkit-text-stroke:1px #5a1a10;text-align:center}
#riserAlarm[hidden]{display:none}#riserAlarm[data-kanal="material"]{font-size:clamp(12px,2.2vw,16px);padding:4px 8px;letter-spacing:.02em;opacity:.9;-webkit-text-stroke:0}
#riserAlarm[data-stufe="1"]{box-shadow:inset 0 0 70px 18px rgba(214,40,30,.55);animation:riserPuls .6s ease-in-out infinite}
#riserAlarm[data-stufe="2"]{box-shadow:inset 0 0 110px 34px rgba(230,30,20,.75);animation:riserPuls .3s ease-in-out infinite;color:#ffe066}
@keyframes riserPuls{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){#riserAlarm[data-stufe]{animation:none}}

/* Statische Meta-Kaskade, aus meta.js unveraendert uebernommen. */

  @font-face { font-family: 'Gustav Display'; src: url('./assets/fonts/lilita_one.woff2') format('woff2'); font-display: swap; }
  :root { --gk-ink:#493d32; --gk-cream:#fff8e6; --gk-amber:#E7A928; --gk-amber-d:#8B5510; --gk-coral:#C7463C; --gk-aqua:#b17b39;
    --gk-green:#91b85d; --gk-green-d:#47653a; --gk-red:#B93832; --gk-blue:#d6ad73; --gk-blue-d:#866044; --gk-schrott:#c9b9a0; --gk-diamant:#d6ad73;
    /* Design-Schleife 24.09.2026 Runde 3 (design-diamant-kaufknopf): Violett fuer die Fragmente-Sammelwaehrung, getrennt vom Diamant-Blau. */
    --gk-violet:#d6ad73; --gk-violet-d:#866044;
    --gk-panel:#fff8e6; --gk-panel2:#f0dfbc; --gk-line:#b58b60; --gk-outline:#5b4433;
    --gk-nav:linear-gradient(#fff3d8,#e4c28d); --gk-selected:linear-gradient(#ffe9a7,#efbd5b);
    --gk-display:'Gustav Display','Arial Black',Impact,sans-serif; --gk-body:'Nunito','Segoe UI',system-ui,sans-serif;
    /* dvh folgt der sichtbaren Mobilhoehe; das Buehnenverhaeltnis wird live gemessen. */
    --gk-ratio:2.2;
    /* opt-0929 (29.09.2026, Befund A3): Boden 93px->109px, sonst schneidet die BASIS-Karte (gkStA, Zeilen 21+34+4+50=109) die letzte Zeile "TEILE x · FREI" ab; bei allen gemessenen Groessen bleibt genug Boden zu Reiter/GERAETE-Knopf. */
    --su:min(1vw, calc(var(--gk-ratio) * 1vh)); --gk-reiter-h:34px; --gk-karten-h:calc(max(109px, 4.8 * var(--su) + 60px) + .6 * var(--su)); --gk-karten-top:calc(44.5px + .1 * var(--su)); --gk-karten-boden:calc(var(--gk-karten-top) + var(--gk-karten-h)); }
  @supports (height: 100dvh) { :root { --su:min(1vw, calc(var(--gk-ratio) * 1dvh)); } }
  .gkMetaRoot { position:fixed; inset:0; z-index:24; overflow:hidden; color:var(--gk-ink); background:#ead4aa; font-family:var(--gk-body); font-weight:800; -webkit-tap-highlight-color:transparent; user-select:none; }
  .gkMetaRoot[hidden] { display:none !important; }
  .gkMetaRoot :where(button) { font:inherit; color:inherit; border:0; cursor:pointer; padding:0; }
  .gkSideBtn,.gkSlot,.gkGridCell,.gkRailBtn.plain { background:transparent; }
  .gkD { font-family:var(--gk-display); font-weight:400; letter-spacing:.03em; text-transform:uppercase; }
  .gkGlyph { width:1em; height:1em; display:inline-block; vertical-align:-.12em; filter:drop-shadow(0 .06em 0 rgba(0,0,0,.35)); }
  .gkWerkzeug { object-fit:contain; filter:drop-shadow(0 2px 0 #5b443326); }
  .gkSideBtn .gkWerkzeug { width:80%; height:80%; }
  .gkStage[data-gk-ansicht='koepfe'] .gkTab .gkWerkzeug { width:max(28px,calc(3 * var(--su))); height:max(28px,calc(3 * var(--su))); }
  /* ---- Boot-CSS: styles.css (Deckel-Choreo 26.09.) ---- */
  /* ---- Screens + Buehne 2,2:1 (HCR2-Studie §7) ---- */
  .gkScreen { position:absolute; inset:0; overflow:hidden; background-size:cover; background-position:center 70%; }
  .gkScreen[hidden] { display:none !important; }
  .gkScreen::before { content:''; position:absolute; inset:0; background-size:cover; background-position:center 70%; filter:var(--grade-backdrop); pointer-events:none; }
  .gkScreen::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 40%,transparent 48%,rgba(67,42,24,.22) 100%); }
  .gkCentral::before { background-image:url('./assets/gk40/bg_zentrale.webp'); }
  .gkWorkshop::before { background-image:url('./assets/gk40/bg_werkstatt.webp'); }
  .gkStage { isolation:isolate; }
  .gkStage { position:absolute; left:50%; top:50%; width:calc(100 * var(--su)); height:calc(100 / var(--gk-ratio) * var(--su)); transform:translate(-50%,-50%); z-index:1; font-size:calc(1.5 * var(--su)); }
  .gkStage[hidden] { display:none !important; }
  .gkAbs { position:absolute; }
  /* ---- Kopfzeile ---- */
  .gkWallet { position:absolute; left:calc(1.5 * var(--su) + env(safe-area-inset-left, 0px)); top:calc(1 * var(--su) + env(safe-area-inset-top, 0px)); display:flex; gap:calc(.8 * var(--su)); z-index:5; }
  .gkWallet.rechts { left:auto; right:calc(19 * var(--su) + env(safe-area-inset-right, 0px)); }
  .gkPill { display:flex; align-items:center; gap:calc(.5 * var(--su)); height:calc(3.2 * var(--su)); padding:0 calc(1 * var(--su)) 0 calc(.45 * var(--su)); border-radius:calc(1.6 * var(--su)); background:var(--gk-panel); border:calc(.2 * var(--su)) solid var(--gk-line); box-shadow:0 calc(.3 * var(--su)) 0 #5b4433; font:calc(1.55 * var(--su)) var(--gk-display); color:#493d32; font-variant-numeric:tabular-nums; }
  .gkPill .ic { width:calc(2.3 * var(--su)); height:calc(2.3 * var(--su)); border-radius:50%; display:grid; place-items:center; font:calc(1.3 * var(--su)) var(--gk-body); font-weight:900; color:var(--gk-ink); }
  .gkPill[data-w='kasse'] .ic { background:var(--gk-amber); box-shadow:inset 0 calc(-.3 * var(--su)) 0 var(--gk-amber-d); }
  .gkPill[data-w='schrott'] .ic { background:var(--gk-schrott); box-shadow:inset 0 calc(-.3 * var(--su)) 0 #5b4433; }
  .gkPill[data-w='diamanten'] .ic { background:var(--gk-diamant); box-shadow:inset 0 calc(-.3 * var(--su)) 0 #a77c52; }
  .gkPill.isHit { animation:gkPop .35s ease-out; }
  .gkPill.isPoor { animation:gkShake .4s; border-color:var(--gk-coral); }
  @keyframes gkPop { 0% { transform:scale(1); } 40% { transform:scale(1.18); } 100% { transform:scale(1); } }
  @keyframes gkShake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }
  .gkTopRight { position:absolute; top:calc(1 * var(--su) + env(safe-area-inset-top, 0px)); right:calc(1.5 * var(--su) + env(safe-area-inset-right, 0px)); display:flex; gap:calc(.8 * var(--su)); align-items:center; z-index:5; }
  /* opt-0929 (29.09.2026, Befund A5): position:relative fuer die Trefferflaeche unten (::after braucht einen positionierten Vorfahren). */
  .gkRank { position:relative; cursor:pointer; color:#493d32; font:inherit; display:flex; align-items:center; gap:calc(.7 * var(--su)); height:calc(3.4 * var(--su)); padding:0 calc(1.2 * var(--su)) 0 calc(.4 * var(--su)); border-radius:calc(1.7 * var(--su)); background:var(--gk-panel); border:calc(.2 * var(--su)) solid var(--gk-line); box-shadow:0 calc(.3 * var(--su)) 0 #5b4433; }
  .gkRank b { width:calc(2.6 * var(--su)); height:calc(2.6 * var(--su)); border-radius:50%; background:linear-gradient(#ffd66b,var(--gk-amber)); color:var(--gk-ink); display:grid; place-items:center; font:calc(1.4 * var(--su)) var(--gk-display); box-shadow:inset 0 calc(-.3 * var(--su)) 0 var(--gk-amber-d); }
  .gkRank span { font:calc(1.3 * var(--su)) var(--gk-display); letter-spacing:.04em; }
  .gkIconBtn { position:relative; width:calc(3.4 * var(--su)); height:calc(3.4 * var(--su)); border-radius:calc(.65 * var(--su)); background:#f6e6c3; border:calc(.26 * var(--su)) solid var(--gk-ink); box-shadow:0 calc(.3 * var(--su)) 0 #5b4433; font-size:calc(1.8 * var(--su)); display:grid; place-items:center; color:#493d32; }
  .gkIconBtn.rot { background:linear-gradient(#db5a50,#b93832 66%,#81261f); border-color:var(--gk-ink); }
  /* Trefferflaeche: ::after zentriert, mindestens 44px und 100% der Optik, ohne Box-Aufblaehung (vormals 40px). */
  /* opt-0929 (29.09.2026, Befund A5): .gkRank ergaenzt - ausserhalb der Zentrale (.gkCentral setzt min-height:44px separat) hatte die Plakette keine 44-px-Flaeche. */
  .gkPill[data-w="diamanten"] { position:relative; }   /* Fund karten-zentrale-Z1: Eingang zu Gustavs Laden mit 44-px-Trefferflaeche */ .gkBtn::after,.gkTab::after,.gkAusbauTab::after,.gkIconBtn::after,.gkPrice::after,.gkRank::after,.gkPill[data-w="diamanten"]::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max(100%, 44px); height:max(100%, 44px); pointer-events:auto; }
  .gkBrand { position:absolute; top:calc(1.2 * var(--su)); left:50%; transform:translateX(-50%); width:calc(19 * var(--su)); z-index:5; filter:drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
  /* ---- Knoepfe ---- */
  .gkBtn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:calc(.6 * var(--su)); min-height:calc(4.6 * var(--su)); padding:0 calc(1.7 * var(--su)); border-radius:calc(.55 * var(--su)); font:calc(1.9 * var(--su)) var(--gk-display); letter-spacing:.045em; text-transform:uppercase; color:#493d32; text-shadow:none; border:calc(.3 * var(--su)) solid var(--gk-ink); transition:transform .08s,box-shadow .08s; }
  .gkBtn::before { content:''; position:absolute; left:calc(.35 * var(--su)); right:calc(.35 * var(--su)); top:calc(.24 * var(--su)); height:calc(.18 * var(--su)); border-radius:0; background:rgba(255,255,255,.34); pointer-events:none; }
  .gkGreen { background:linear-gradient(#c5dd8b,#91b85d); box-shadow:0 calc(.38 * var(--su)) 0 var(--gk-green-d),0 calc(.66 * var(--su)) 0 var(--gk-ink); }
  .gkBlue { background:var(--gk-nav); box-shadow:0 calc(.38 * var(--su)) 0 var(--gk-blue-d),0 calc(.66 * var(--su)) 0 var(--gk-ink); }
  .gkCentralActions { display:flex; gap:8px; } .gkCentralActions .gkBtn { min-height:44px; }
  .gkGold { background:linear-gradient(#ffe19a,#d2a14c); color:#302319; text-shadow:none; box-shadow:0 calc(.38 * var(--su)) 0 #8b6028,0 calc(.66 * var(--su)) 0 var(--gk-ink); min-height:44px; }
  .gkSlate { background:#f6e6c3; box-shadow:0 calc(.38 * var(--su)) 0 #5b4433,0 calc(.66 * var(--su)) 0 var(--gk-ink); }
  .gkOrange { background:linear-gradient(#ffd061 0 18%,#e7a928 19% 66%,#bd7616 67% 100%); box-shadow:0 calc(.38 * var(--su)) 0 var(--gk-amber-d),0 calc(.66 * var(--su)) 0 var(--gk-ink); }
  .gkBtn:not(:disabled):not(.isOff):active { transform:translateY(calc(.35 * var(--su))); box-shadow:0 calc(.08 * var(--su)) 0 var(--gk-ink),0 calc(.28 * var(--su)) 0 var(--gk-ink); }
  .gkBtn.gkBig { min-height:calc(5.2 * var(--su)); padding:0 calc(2.5 * var(--su)); font-size:calc(2.35 * var(--su)); border-radius:calc(.65 * var(--su)); }
  .gkBtn.isOff,.gkBtn:disabled,.gkMetaRoot button:disabled { filter:saturate(.45); color:#685747; cursor:default; }
  .gkMetaRoot button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
  .gkMetaRoot button:disabled,.gkMetaRoot button.isOff { transform:none; }
  .gkBottomL { position:absolute; left:calc(1.5 * var(--su) + env(safe-area-inset-left, 0px)); bottom:calc(1.5 * var(--su) + env(safe-area-inset-bottom, 0px)); z-index:5; }
  .gkBottomR { position:absolute; right:calc(1.5 * var(--su) + env(safe-area-inset-right, 0px)); bottom:calc(1.5 * var(--su) + env(safe-area-inset-bottom, 0px)); z-index:5; display:flex; align-items:center; gap:calc(.7 * var(--su)); }
  /* Rohr nur ueber Werkstatt-Uebersicht; keine SCHICHT-Verknuepfung je Unterbuehne. */
  .gkBottomM { position:absolute; left:50%; bottom:calc(1.5 * var(--su) + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:calc(.5 * var(--su)); }
  .gkName { font:calc(2.2 * var(--su)) var(--gk-display); letter-spacing:.06em; color:#fff8e6; text-shadow:0 .1em 0 var(--gk-ink),.08em 0 0 var(--gk-ink),-.08em 0 0 var(--gk-ink),0 -.08em 0 var(--gk-ink); white-space:nowrap; } [data-gk-plate] { overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .gkPlate { padding:calc(.3 * var(--su)) calc(1.4 * var(--su)); border-radius:calc(.9 * var(--su)); background:var(--gk-panel); border:calc(.2 * var(--su)) solid var(--gk-line); box-shadow:0 calc(.3 * var(--su)) 0 #5b4433; font:calc(1.4 * var(--su)) var(--gk-display); letter-spacing:.06em; color:var(--gk-amber-d); white-space:nowrap; }
  .gkBottomRow { position:absolute; left:calc(53 * var(--su)); right:calc(1.5 * var(--su) + env(safe-area-inset-right, 0px)); bottom:calc(1.5 * var(--su) + env(safe-area-inset-bottom, 0px)); z-index:5; display:flex; align-items:center; gap:calc(1 * var(--su)); }
  /* line-clamp:2: nowrap+ellipsis zerriss BOHRKOPF-Beschriftung mitten im Wort. */
  .gkBottomRow .gkSetInfo { position:static; flex:1 1 auto; min-width:0; white-space:normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.22; }
  .gkBottomRow .gkBottomR { position:static; flex:0 0 auto; }
  /* ---- Zentrale ---- */
  .gkRigZ canvas,.gkRigW canvas,.gkRigM canvas,.gkRigD canvas,.gkGustavZ canvas,.gkGustavD canvas { width:100%; height:100%; display:block; filter:var(--grade-hero); }
  /* Design-Schleife Runde 4 (24.09.2026, streak-status-badge): Bonbon-Chip statt flacher Balken - Glanzstreifen + Farbstufe nach Streak-Laenge. */
  .gkStreakChip { position:absolute; left:50%; top:calc(5.2 * var(--su)); transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:calc(.5 * var(--su)); padding:calc(.35 * var(--su)) calc(1.4 * var(--su)) calc(.35 * var(--su)) calc(1 * var(--su)); border-radius:calc(2 * var(--su)); background:linear-gradient(#ffd061 0 20%,#e7a928 21% 68%,#bd7616 69% 100%); color:var(--gk-ink); border:calc(.24 * var(--su)) solid var(--gk-ink); box-shadow:0 calc(.3 * var(--su)) 0 var(--gk-ink); font-size:calc(1.3 * var(--su)); white-space:nowrap; overflow:hidden; }
  .gkStreakChip::before { content:''; position:absolute; left:10%; right:10%; top:8%; height:40%; border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)); pointer-events:none; }
  .gkStreakChip[hidden] { display:none !important; }
  .gkStreakIcon { font-size:calc(2.15 * var(--su)); line-height:1; filter:drop-shadow(0 .08em 0 rgba(0,0,0,.25)); }
  .gkStreakNum { font:calc(2.15 * var(--su)) var(--gk-display); line-height:1; }
  .gkStreakLbl { font-size:calc(1.1 * var(--su)); font-weight:800; letter-spacing:.02em; }
  .gkStreakChip[data-gk-tier="glow"] { background:linear-gradient(#fff0a8 0 20%,#ffcf3f 21% 68%,#c98a10 69% 100%); box-shadow:0 calc(.3 * var(--su)) 0 var(--gk-ink),0 0 calc(1.2 * var(--su)) rgba(255,205,60,.7); }
  .gkStreakChip[data-gk-tier="puls"] { background:linear-gradient(#fff6c8 0 20%,#ffd54a 21% 68%,#c98a10 69% 100%); box-shadow:0 calc(.3 * var(--su)) 0 var(--gk-ink),0 0 calc(1.8 * var(--su)) rgba(255,213,74,.9); animation:gkStreakPuls 1.1s ease-in-out infinite; }
  @keyframes gkStreakPuls { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.06); } }
  /* ---- B13/Tagesaufgaben: Kachel oben links unter der Wallet, freier Bereich vor gkRigZ/gkGustavZ ---- */
  .gkAufgabenTile { position:absolute; left:calc(1.5 * var(--su) + env(safe-area-inset-left, 0px)); top:calc(5.6 * var(--su)); z-index:5; width:calc(22 * var(--su)); max-height:calc(20 * var(--su)); overflow:auto; padding:calc(.6 * var(--su)) calc(.8 * var(--su)); border-radius:calc(.9 * var(--su)); background:var(--gk-panel); border:calc(.2 * var(--su)) solid var(--gk-line); box-shadow:0 calc(.3 * var(--su)) 0 #5b4433; font-size:calc(1 * var(--su)); color:#493d32; }
  .gkAufgabenTile h5 { margin:0 0 calc(.3 * var(--su)); font:calc(1.15 * var(--su)) var(--gk-display); letter-spacing:.04em; color:var(--gk-amber-d); }
  .gkAufgabenTile .gkStat em { color:#493d32; font-weight:800; }
  .gkAufgabenTile .gkStat em.isFertig { color:#47653a; }
  .gkBuchReihe { display:flex; gap:calc(.3 * var(--su)); margin-top:calc(.5 * var(--su)); }
  .gkBuchReihe span { width:calc(1.7 * var(--su)); height:calc(1.7 * var(--su)); display:grid; place-items:center; border-radius:calc(.35 * var(--su)); background:rgba(255,255,255,.08); border:1px solid var(--gk-line); font:calc(1.1 * var(--su)) var(--gk-display); opacity:.35; }
  .gkBuchReihe span.isOn { opacity:1; color:var(--gk-ink); background:linear-gradient(#ffd66b,var(--gk-amber)); border-color:var(--gk-amber-d); }
  .gkSideBtn { position:absolute; width:calc(8.6 * var(--su)); display:flex; flex-direction:column; align-items:center; gap:calc(.3 * var(--su)); z-index:5; color:#fff8e6; }
  .gkSideBtn .tile { width:calc(7 * var(--su)); height:calc(7 * var(--su)); border-radius:calc(.7 * var(--su)); display:grid; place-items:center; font-size:calc(4.2 * var(--su)); background:var(--gk-nav); border:calc(.3 * var(--su)) solid var(--gk-ink); box-shadow:0 calc(.38 * var(--su)) 0 #5b4433,0 calc(.66 * var(--su)) 0 var(--gk-ink); color:#493d32; transition:transform .08s; }
  .gkSideBtn:active .tile { transform:translateY(calc(.3 * var(--su))); }
  .gkSideBtn .lbl { font:calc(1.35 * var(--su)) var(--gk-display); letter-spacing:.05em; text-shadow:0 .1em 0 var(--gk-ink),.08em 0 0 var(--gk-ink),-.08em 0 0 var(--gk-ink); }
  .gkSideBtn .badge,.gkBtn .badge { position:absolute; right:calc(-.2 * var(--su)); top:calc(-.6 * var(--su)); min-width:calc(2.4 * var(--su)); height:calc(2.4 * var(--su)); padding:0 calc(.5 * var(--su)); border-radius:calc(1.2 * var(--su)); background:var(--gk-coral); border:calc(.2 * var(--su)) solid var(--gk-ink); font:calc(1.3 * var(--su)) var(--gk-display); display:grid; place-items:center; animation:gkBadgePop .3s cubic-bezier(.2,1.6,.4,1) both; }
  @keyframes gkBadgePop { 0% { transform:scale(0); } 60% { transform:scale(1.25); } 100% { transform:scale(1); } }
  @media (prefers-reduced-motion:reduce) { .gkSideBtn .badge,.gkBtn .badge { animation:none; } }
  .gkSetBadge { position:absolute; left:calc(14.2 * var(--su)); top:calc(15.2 * var(--su)); z-index:5; height:calc(3.2 * var(--su)); padding:0 calc(1 * var(--su)); border-radius:calc(.5 * var(--su)); background:var(--gk-nav); border:calc(.25 * var(--su)) solid var(--gk-ink); box-shadow:0 calc(.35 * var(--su)) 0 var(--gk-ink); color:#493d32; font:calc(1.5 * var(--su)) var(--gk-display); display:flex; align-items:center; gap:calc(.5 * var(--su)); }
  /* Vier flache Karten: der Maschinenkopf bleibt frei, die vier Kerninfos bleiben direkt kaufbar. Kevin 17.09.: auf dem Handy schnitten sie in die GULLY-KRAFT 40 (48px Reiter + 100px Karte = 155-159px FESTE Hoehe gegen Maschine ab 36%: 915x412 10,6px, 915x356 29,2px, 740x320 41,2px tief). Jetzt ist der Block flacher: Reiterkasten 34px, Trefferflaeche unveraendert 44px ueber ::after (deshalb beginnen die Karten erst bei 44,5px und der Reiter liegt unter ihnen), Karteninhalt 93px statt 98px. Die Maschine weicht erst aus, wenn 36% nicht mehr reichen - bei 915x412, 1024x480 und 1280x600 gar nicht, dort bleibt sie exakt gleich gross. */
  .gkAusbauTabs { position:absolute; left:calc(27.5 * var(--su)); top:5px; width:calc(45 * var(--su)); display:flex; gap:calc(.55 * var(--su)); z-index:4; }
  .gkMetaRoot .gkAusbauTab { position:relative; box-sizing:border-box; display:flex; align-items:center; justify-content:center; min-width:44px; height:var(--gk-reiter-h); padding:0 calc(1.1 * var(--su)); border:calc(.22 * var(--su)) solid var(--gk-ink); border-radius:calc(.5 * var(--su)); background:var(--gk-nav); color:#493d32; font:max(11px,calc(1.45 * var(--su))) var(--gk-display); letter-spacing:.04em; white-space:nowrap; }
  .gkMetaRoot .gkAusbauTab[aria-pressed='true'] { background:var(--gk-selected); color:var(--gk-ink); box-shadow:0 calc(.32 * var(--su)) 0 #5b4433; }
  .gkCards { position:absolute; left:calc(27.5 * var(--su)); top:var(--gk-karten-top); width:calc(45 * var(--su)); display:grid; grid-template-columns:repeat(4,1fr); gap:calc(.8 * var(--su)); align-items:start; justify-items:center; z-index:5; }
  /* Design-Schleife 24.09.2026 Runde 4 (werkstatt-karten-bonbon): groesserer Eckenradius + satte Kontur statt eckiger Graukachel. */
  /* Design-Schleife Runde 5 (24.09.2026, werkstatt-teile-text): Kaufknopf-Zeile 44px -> 60px, damit die Teile-Zeile fest im Knopf Platz hat und der Stufenbalken (4px) frei bleibt. */
  .gkCard { position:relative; box-sizing:border-box; display:grid; grid-template-rows:minmax(21px,1fr) 24px 4px 60px; width:calc(10.4 * var(--su)); height:var(--gk-karten-h); transform-origin:50% 100%; max-width:100%; border-radius:calc(1.3 * var(--su)); border:calc(.34 * var(--su)) solid var(--gk-ink); background:linear-gradient(#fff8e6,#f0dfbc); box-shadow:0 calc(.4 * var(--su)) 0 #5b4433,0 calc(.7 * var(--su)) 0 var(--gk-ink); overflow:hidden; text-align:center; transition:transform .1s; animation:gkCardIn .35s cubic-bezier(.2,1.4,.4,1) backwards; color:#493d32; }
  /* Papierkarten bleiben matt; keine Glanzellipse ueber dem Karteninhalt. */
  .gkCard::before { content:none; }
  .gkCard:nth-child(2) { animation-delay:.05s; } .gkCard:nth-child(3) { animation-delay:.1s; } .gkCard:nth-child(4) { animation-delay:.15s; }
  .gkCard:nth-child(5) { animation-delay:.2s; } .gkCard:nth-child(6) { animation-delay:.25s; } .gkCard:nth-child(7) { animation-delay:.3s; }
  @keyframes gkCardIn { from { transform:translateY(-40px) scale(.9); opacity:0; } to { transform:none; opacity:1; } }
  .gkCard.isSelected { transform:translateY(calc(-.25 * var(--su))) scale(1.02); border-color:var(--gk-amber); box-shadow:0 0 0 calc(.15 * var(--su)) var(--gk-ink),0 calc(.7 * var(--su)) 0 #5b4433,0 calc(1 * var(--su)) 0 var(--gk-ink); }
  .gkCard.isBought { animation:gkBuyPop .45s cubic-bezier(.2,1.6,.4,1); }
  .gkCard.isShake { animation:gkShake .4s; }
  @keyframes gkBuyPop { 0% { transform:scale(1); } 35% { transform:scale(1.12) rotate(-2deg); } 70% { transform:scale(.97); } 100% { transform:scale(1); } }
  .gkCard .h { min-height:0; padding:0 calc(.2 * var(--su)); display:grid; place-items:center; font:max(11px,calc(1.15 * var(--su))) var(--gk-display); letter-spacing:.01em; line-height:.95; text-transform:uppercase; text-shadow:none; }
  .gkCard .m { display:flex; align-items:center; justify-content:center; gap:calc(.25 * var(--su)); min-width:0; }
  .gkCard .upgradeIcon { width:clamp(26px,calc(3 * var(--su)),30px); height:clamp(26px,calc(3 * var(--su)),30px); padding:2px; border-radius:6px; border:1px solid #a77c52; background:#FFF9E8; object-fit:contain; box-shadow:0 2px 0 #5b4433; }
  .gkCard .l { font:max(13px,calc(1.7 * var(--su))) var(--gk-display); line-height:1; text-shadow:none; padding:0; }
  .gkCard .l small { font-size:.6em; opacity:.85; }
  /* Stufenbalken deutlicher: hoeher, hellere Spur, damit 5/20 auch auf kleinen Screens sofort lesbar ist. */
  .gkCard .b { margin:0 calc(.8 * var(--su)); height:calc(.7 * var(--su)); align-self:center; border-radius:calc(.35 * var(--su)); background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); overflow:hidden; }
  .gkCard .b i { display:block; height:100%; background:linear-gradient(90deg,#fff6d5,#fff); border-radius:calc(.35 * var(--su)); transition:width .35s cubic-bezier(.2,1.2,.4,1); }
  /* Design-Schleife Runde 5 (24.09.2026, werkstatt-kauf-moment): Kauf-Choreo ~0,7 s an der Karte
     selbst - Saettigungs-Kick, Stufenbalken-Puls, Achter-Partikelstern am Icon (gleiche Technik
     wie .gkKiPartikel in kisten.js) und "+1 STUFE"-Pop. meta.js setzt/entfernt nur die Klasse
     .isKauf, keine Zahl/Logik hier. */
  .gkCard.isKauf { animation:gkKaufKick .7s ease-out; }
  @keyframes gkKaufKick { 0% { filter:none; } 30% { filter:saturate(1.9) brightness(1.25); } 100% { filter:none; } }
  .gkCard.isKauf .b i { animation:gkKaufBalkenPuls .7s ease-out; }
  @keyframes gkKaufBalkenPuls { 0% { filter:none; box-shadow:none; } 30% { filter:brightness(1.6); box-shadow:0 0 calc(.6 * var(--su)) #fff3c2; } 100% { filter:none; box-shadow:none; } }
  .gkIconWrap { position:relative; display:inline-flex; }
  /* Design-Schleife Runde 8 (24.09.2026, werkstatt-kauf-moment): Runde 6/7 verkleinerte nur den
     Flugradius per Zahl - blieb im Belegbild trotzdem ueber der Kartenueberschrift (.h) sichtbar,
     weil .gkKaufFunk ungeclippt direkt an der Iconbox haengt. Jetzt eigener Clip-Rahmen
     .gkIconClip exakt in Icongroesse um Bild+Stern: overflow:hidden schneidet den Stern hart auf
     die Iconbox, unabhaengig vom Flugradius - der Titel kann nicht mehr ueberdeckt werden. Der
     Pop (.gkKaufPop) bleibt ausserhalb dieses Clips, direkt in .gkIconWrap, unveraendert wie
     Runde 7 (dort bereits abgenommen).*/
  .gkIconClip { position:relative; display:inline-flex; overflow:hidden; border-radius:6px; }
  .gkKaufFunk { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:6; }
  .gkKaufFunk i { position:absolute; left:0; top:0; width:calc(.5 * var(--su)); height:calc(.5 * var(--su)); border-radius:50%; opacity:0; transform:translate(-50%,-50%); }
  /* Design-Schleife Runde 6 (24.09.2026, werkstatt-kauf-moment): Radius von 2,2*su auf 1,15*su
     (Diagonalen 1,56*su auf .81*su) verkleinert - der Stern blieb vorher bis zu ~20px vom Zentrum
     entfernt und flog damit ueber die Kartenueberschrift (.h) direkt oberhalb der Iconzeile.
     Neuer Radius bleibt mit Punktgroesse in der Iconbox (~27px) plus wenigen Pixeln; der harte
     Clip aus Runde 8 (.gkIconClip) faengt jeden verbleibenden Ausschlag zusaetzlich ab.*/
  .gkKaufFunk i:nth-child(1) { background:#fff275; box-shadow:0 0 calc(.4 * var(--su)) #fff275; --tx:calc(1.15 * var(--su)); --ty:0px; }
  .gkKaufFunk i:nth-child(2) { background:#ff3ec9; box-shadow:0 0 calc(.4 * var(--su)) #ff3ec9; --tx:calc(.81 * var(--su)); --ty:calc(.81 * var(--su)); }
  .gkKaufFunk i:nth-child(3) { background:#fff8e6; box-shadow:0 0 calc(.4 * var(--su)) #a77c52; --tx:0px; --ty:calc(1.15 * var(--su)); }
  .gkKaufFunk i:nth-child(4) { background:#fff275; box-shadow:0 0 calc(.4 * var(--su)) #fff275; --tx:calc(-.81 * var(--su)); --ty:calc(.81 * var(--su)); }
  .gkKaufFunk i:nth-child(5) { background:#ff3ec9; box-shadow:0 0 calc(.4 * var(--su)) #ff3ec9; --tx:calc(-1.15 * var(--su)); --ty:0px; }
  .gkKaufFunk i:nth-child(6) { background:#fff8e6; box-shadow:0 0 calc(.4 * var(--su)) #a77c52; --tx:calc(-.81 * var(--su)); --ty:calc(-.81 * var(--su)); }
  .gkKaufFunk i:nth-child(7) { background:#fff275; box-shadow:0 0 calc(.4 * var(--su)) #fff275; --tx:0px; --ty:calc(-1.15 * var(--su)); }
  .gkKaufFunk i:nth-child(8) { background:#ff3ec9; box-shadow:0 0 calc(.4 * var(--su)) #ff3ec9; --tx:calc(.81 * var(--su)); --ty:calc(-.81 * var(--su)); }
  .gkCard.isKauf .gkKaufFunk i { animation:gkKaufFunkFlug .7s ease-out forwards; }
  @keyframes gkKaufFunkFlug { 0% { opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); } 10% { opacity:1; transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(1.1); } 100% { opacity:0; transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(.4); } }
  /* Design-Schleife Runde 5 Nachbesserung (24.09.2026, werkstatt-kauf-moment): Pop hing an top:0
     der Iconbox und kreuzte beim Hochfliegen (-20px) die Kartenueberschrift (.h) darueber -
     unlesbare Ueberlappung im Belegbild. Anker jetzt bottom:0 der Iconbox (unten am Icon) mit
     kleinerer Hubweite (max -12px statt -20px), damit der Text im 24px hohen Icon-Feld bleibt
     und die Ueberschriftzeile nie erreicht. */
  /* Design-Schleife Runde 6 (24.09.2026, werkstatt-kauf-moment): links:50% zentrierte den Pop
     mittig ueber Icon UND Stufenzahl (.l) - bei "+1 STUFE" (nowrap) reichte der Text ueber die
     Iconbox hinaus und ueberdeckte "7/20". Pop haengt jetzt rechtsbuendig links vom Icon (kein
     Text dort), kleinerer Font (10px fix statt clamp), damit er nie in die Stufenzahl reicht. */
  /* Design-Schleife Runde 7 (24.09.2026, werkstatt-kauf-moment): rechtsbuendig links vom Icon
     (Runde 6) reichte bei der linkesten Karte (DREHMOMENT) ueber den Kartenrand hinaus - nur
     "UFE" blieb sichtbar, abgeschnitten in den Zwischenraum zur Nachbarkarte. Text jetzt auf
     "+1" verkuerzt und mittig ueber der Iconbox verankert (left:50%, translateX(-50%) relativ
     zu .gkIconWrap, nicht zur Karte) - bei jeder Kartenposition symmetrisch um das schmale Icon
     (~27px) herum, bleibt damit sicher innerhalb der Karte und trifft nicht mehr "7/20". */
  .gkKaufPop { position:absolute; left:50%; bottom:0; transform:translate(-50%,0); opacity:0; pointer-events:none; z-index:7; font:700 10px var(--gk-display); color:#fff8e6; text-shadow:0 .1em 0 var(--gk-ink),.08em 0 0 var(--gk-ink),-.08em 0 0 var(--gk-ink); white-space:nowrap; }
  .gkCard.isKauf .gkKaufPop { animation:gkKaufPopHoch .7s ease-out; }
  @keyframes gkKaufPopHoch { 0% { opacity:0; transform:translate(-50%,6px) scale(.8); } 20% { opacity:1; transform:translate(-50%,-2px) scale(1.05); } 75% { opacity:1; transform:translate(-50%,-9px) scale(1); } 100% { opacity:0; transform:translate(-50%,-12px) scale(.95); } }
  @media (prefers-reduced-motion:reduce) {
    .gkCard.isKauf { animation:none!important; filter:saturate(1.9) brightness(1.25)!important; }
    .gkCard.isKauf .b i { animation:none!important; }
    .gkCard.isKauf .gkKaufFunk i,.gkCard.isKauf .gkKaufPop { animation:none!important; opacity:0!important; }
  }
  /* Design-Schleife Runde 5 (24.09.2026, werkstatt-teile-text): 44px -> 60px, damit die (in styles.css) auf 100% umbrechende Teile-Zeile mitsamt Preiszeile mittig Platz hat; align-content zentriert den umgebrochenen Block. */
  .gkCard .gkPrice { position:relative; box-sizing:border-box; display:flex; align-items:center; justify-content:center; align-content:center; min-height:60px; height:60px; width:100%; padding:calc(.15 * var(--su)) calc(.3 * var(--su)); border-top:calc(.3 * var(--su)) solid var(--gk-ink); background:linear-gradient(#c5dd8b,#91b85d); color:#493d32; font:max(12px,calc(1.55 * var(--su))) var(--gk-display); letter-spacing:.02em; text-shadow:none; overflow:hidden; }
  .gkPrice .cur { font-size:.7em; margin-left:.15em; }
  /* Leistbar = gruen mit Glow + schraegem Glanzstreifen (Bonbon-Kaufknopf); der Glanz liegt als ::after ueber dem Inhalt, ist aber pointer-events:none und deckt keinen Text ab. */
  .gkPrice:not(.isMax):not(.isPoor) { box-shadow:0 0 calc(.8 * var(--su)) rgba(63,180,62,.6), inset 0 1px 0 rgba(255,255,255,.45); }
  .gkPrice:not(.isMax):not(.isPoor)::after { content:''; position:absolute; left:-15%; top:0; width:30%; height:100%; background:linear-gradient(115deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); transform:skewX(-18deg); pointer-events:none; }
  .gkPrice.isMax { background:linear-gradient(#ffe27a,var(--gk-amber) 60%,#e39a17); color:var(--gk-ink); text-shadow:none; }
  /* Nicht leistbar = ruhiges Grau, aber als Fortschritts-Chip gelesen statt als dunkles Loch: SPAREN-Etikett als Pille, goldener Teile-Balken liegt als schmaler Streifen auf der Unterkante (kein Extra-Platzbedarf im 44px-Knopf). */
  /* Design-Schleife Runde 5 (24.09.2026, werkstatt-teile-text): flex-direction:column entfernt — kollidierte mit dem "flex:0 0 100%" der Teile-Zeile aus styles.css (dort ist 100% dann die Hoehe statt der Breite und sprengt den Knopf nach oben). Reihe+Umbruch wie bei den anderen Knoepfen. */
  .gkPrice.isPoor { background:linear-gradient(#e8ddc5,#d9c6a5); color:#493d32; }
  .gkPrice.isPoor::before { content:'SPAREN'; display:inline-block; padding:0 calc(.5 * var(--su)); border-radius:calc(.6 * var(--su)); background:rgba(255,255,255,.14); color:#493d32; font:700 9px/1.4 system-ui,sans-serif; letter-spacing:.12em; }
  .gkPrice.isPoor::after { content:''; position:absolute; left:calc(.6 * var(--su)); right:calc(.6 * var(--su)); bottom:3px; height:3px; border-radius:2px; background:rgba(0,0,0,.4); pointer-events:none; }
  .gkPrice .gkTeileBar { position:absolute; left:calc(.6 * var(--su)); bottom:3px; height:3px; border-radius:2px; background:linear-gradient(90deg,#e7c458,#fff3c2); box-shadow:0 0 4px rgba(231,196,88,.75); pointer-events:none; }
  .gkStA .gkBottomR .gkBtn { min-height:44px; }
  .gkBlase { position:absolute; left:calc(1.5 * var(--su)); top:calc(17 * var(--su)); z-index:6; box-sizing:border-box; width:calc(24 * var(--su)); max-height:calc(100% - 24 * var(--su)); overflow:auto; padding:calc(.9 * var(--su)) calc(1.1 * var(--su)); border-radius:calc(1 * var(--su)); background:#FFF9E8; color:var(--gk-ink); border:calc(.28 * var(--su)) solid var(--gk-ink); box-shadow:0 calc(.5 * var(--su)) 0 rgba(91,68,51,.24); font-size:max(11px,calc(1.25 * var(--su))); }
  .gkBlase[hidden] { display:none !important; }
  .gkStA.hasDetail .gkRigW { left:27%; width:55%; }
  .gkBlase h4 { margin:0 0 calc(.3 * var(--su)); font:calc(1.7 * var(--su)) var(--gk-display); color:var(--gk-red); letter-spacing:.04em; }
  .gkBlase p { margin:0 0 calc(.5 * var(--su)); line-height:1.3; }
  .gkStat { display:grid; grid-template-columns:1fr auto; gap:calc(.2 * var(--su)) calc(.8 * var(--su)); font-size:calc(1.2 * var(--su)); margin-bottom:calc(.4 * var(--su)); }
  .gkStat .bar { grid-column:1 / -1; position:relative; height:calc(.8 * var(--su)); border-radius:calc(.4 * var(--su)); background:rgba(91,68,51,.18); overflow:hidden; border:1px solid var(--gk-ink); }
  .gkStat .bar i { position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,var(--gk-aqua),var(--gk-green)); }
  .gkStat .bar i.next { background:linear-gradient(90deg,#ffd66b,var(--gk-amber)); }
  .gkStat em { color:var(--gk-green-d); font-style:normal; font-variant-numeric:tabular-nums; }
  .gkRigW { left:18%; top:max(36%, calc(var(--gk-karten-boden) + 3px)); width:64%; bottom:6%; }
  .gkRigW.isBump,.gkRigM.isBump,.gkRigD.isBump { animation:gkBump .45s cubic-bezier(.2,1.6,.4,1); }
  @keyframes gkBump { 0% { transform:scale(1); } 30% { transform:scale(1.03) rotate(-.6deg); } 60% { transform:scale(.995); } 100% { transform:none; } }
  .gkToast { position:absolute; left:50%; top:max(12%,calc(env(safe-area-inset-top) + 8px)); max-width:calc(100% - 32px); text-align:center; transform:translate(-50%,-50%) scale(.6); z-index:9; padding:calc(.7 * var(--su)) calc(2 * var(--su)); border-radius:calc(1.2 * var(--su)); border:calc(.3 * var(--su)) solid var(--gk-ink); background:linear-gradient(#ffe27a,var(--gk-amber)); color:var(--gk-ink); font:calc(2.6 * var(--su)) var(--gk-display); letter-spacing:.04em; opacity:0; pointer-events:none; box-shadow:0 calc(.5 * var(--su)) 0 var(--gk-amber-d),0 calc(.8 * var(--su)) 0 var(--gk-ink); }
  .gkToast.isOn { animation:gkToast 1.1s cubic-bezier(.2,1.5,.4,1) forwards; }
  @keyframes gkToast { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(-6deg); } 25% { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(2deg); } 40% { transform:translate(-50%,-50%) scale(1) rotate(0); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-90%) scale(.9); } }
  .gkSpark { position:fixed; width:10px; height:10px; border-radius:50%; background:var(--gk-amber); border:2px solid var(--gk-ink); pointer-events:none; z-index:60; animation:gkSpark .7s ease-out forwards; }
  @keyframes gkSpark { to { transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }
  /* ---- MODULE (HCR2 Tuning-Teile, Studie §3) ---- */
  .gkTabs { position:absolute; display:flex; gap:calc(.6 * var(--su)); z-index:6; }
  .gkTab { position:relative; flex:0 0 auto; white-space:nowrap; height:calc(3.8 * var(--su)); padding:0 calc(1.4 * var(--su)) 0 calc(.6 * var(--su)); border-radius:calc(.5 * var(--su)) calc(.5 * var(--su)) 0 0; border:calc(.25 * var(--su)) solid var(--gk-ink); border-bottom:0; background:var(--gk-nav); color:#493d32; display:flex; align-items:center; gap:calc(.6 * var(--su)); font:calc(1.7 * var(--su)) var(--gk-display); letter-spacing:.05em; } .gkTab .gkGlyph { font-size:calc(2.2 * var(--su)); }
  .gkTab[aria-selected='true'] { background:var(--gk-selected); color:var(--gk-ink); }
  .gkPanel { position:absolute; border-radius:calc(1.2 * var(--su)); background:var(--gk-panel); border:calc(.3 * var(--su)) solid #a77c52; box-shadow:0 calc(.6 * var(--su)) 0 #5b4433,inset 0 calc(.2 * var(--su)) 0 rgba(255,255,255,.12); z-index:5; }
  /* §Inhaltshoehe folgt Raster, Buehne deckelt Panel; lange Kataloge scrollen nur im Raster. */
  .gkModPanel { left:calc(16 * var(--su)); top:calc(5.4 * var(--su)); width:calc(36 * var(--su)); max-height:min(calc(100dvh - 6.6 * var(--su)), calc((100 / var(--gk-ratio) - 6.6) * var(--su))); padding:calc(.8 * var(--su)); display:flex; flex-direction:column; gap:calc(.6 * var(--su)); overflow:hidden; overscroll-behavior:contain; }
  .gkGrid::-webkit-scrollbar { width:calc(.7 * var(--su)); }
  .gkGrid::-webkit-scrollbar-track { background:#ead4aa; border-radius:calc(.4 * var(--su)); }
  .gkGrid::-webkit-scrollbar-thumb { background:#fff8e6; border-radius:calc(.4 * var(--su)); }
  .gkDetail { display:grid; grid-template-columns:calc(6.8 * var(--su)) 1fr; grid-template-rows:auto auto auto auto; gap:calc(.3 * var(--su)) calc(.8 * var(--su)); flex:0 0 auto; }
  .gkDetail .lvl { font:calc(1.8 * var(--su)) var(--gk-display); color:#493d32; text-shadow:none; }
  .gkDetail .nm { font:calc(2 * var(--su)) var(--gk-display); color:var(--gk-amber-d); letter-spacing:.04em; align-self:end; }
  .gkDetail .ds { font-size:max(12px,calc(1.2 * var(--su))); line-height:1.35; color:#493d32; }
  .gkDetail .stats { grid-column:1 / -1; font:max(11px,calc(1.15 * var(--su))) var(--gk-display); letter-spacing:.04em; color:#493d32; display:flex; flex-wrap:wrap; gap:calc(.2 * var(--su)) calc(1.4 * var(--su)); white-space:nowrap; }
  .gkDetail .stats em { color:#47653a; font-style:normal; }
  .gkDetail .stats .selt { color:var(--gk-amber-d); }
  .gkDetail .acts { grid-column:1 / -1; display:flex; gap:calc(.8 * var(--su)); justify-content:flex-end; align-items:center; }
  .gkDetail .acts .gkBtn { min-height:44px; font-size:max(12px,calc(1.3 * var(--su))); padding:0 calc(1.1 * var(--su)); flex-direction:column; gap:0; line-height:1.05; }
  .gkDetail .acts .gkBtn small { font-size:.72em; opacity:.95; }
  .gkTile { position:relative; width:calc(8 * var(--su)); height:calc(8 * var(--su)); border-radius:calc(.62 * var(--su)); border:calc(.28 * var(--su)) solid var(--gk-ink); display:grid; place-items:center; background:#f6e6c3; box-shadow:inset 0 calc(.18 * var(--su)) 0 rgba(255,255,255,.28),0 calc(.35 * var(--su)) 0 rgba(0,0,0,.4); }
  .gkTile img { width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 .15em 0 rgba(0,0,0,.35)); }
  .gkTile[data-selt='rare'] { background:linear-gradient(#fff8e6,#fff8e6 60%,#f6e6c3); }
  .gkTile[data-selt='epic'] { background:linear-gradient(#d6ad73,#765641 60%,#49382c); }
  .gkTile.isOff img { filter:grayscale(1) brightness(.55); }
  /* §Raster inhaltsgross, vom Panel gedeckelt. */
  .gkGrid { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a77c52 #5b4433; display:grid; grid-template-columns:repeat(var(--gk-spalten,3),1fr); grid-auto-rows:calc(7.5 * var(--su)); align-content:start; gap:calc(.5 * var(--su)); padding:calc(.5 * var(--su)); border-radius:calc(1 * var(--su)); background:var(--gk-panel2); border:calc(.2 * var(--su)) solid #5b4433; }
  .gkGridCell { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(.1 * var(--su)); min-height:0; overflow:hidden; border-radius:calc(.5 * var(--su)); padding:calc(.2 * var(--su)); color:#493d32; }
  .gkGridCell.isSelected { outline:calc(.28 * var(--su)) solid #f2bd49; outline-offset:calc(-.28 * var(--su)); background:rgba(231,169,40,.12); }
  .gkGrid .gkTile { width:calc(3.9 * var(--su)); height:calc(3.9 * var(--su)); flex-shrink:0; }
  .gkDetail > .gkTile { width:calc(5.6 * var(--su)); height:calc(5.6 * var(--su)); }
  .gkGridCell .lv { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:max(11px,calc(1.2 * var(--su))) var(--gk-display); text-shadow:none; }
  .gkGridCell .pill { display:block; min-width:80%; max-width:100%; padding:calc(.1 * var(--su)) calc(.35 * var(--su)); border-radius:calc(.6 * var(--su)); background:#ead4aa; border:calc(.15 * var(--su)) solid #5b4433; font:max(10px,calc(1.15 * var(--su))) var(--gk-display); text-align:center; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gkGridCell .pill.up { background:linear-gradient(#b7ef7a,var(--gk-green)); color:var(--gk-ink); border-color:var(--gk-green-d); }
  .gkGridCell .pill.on { background:#fff8e6; color:var(--gk-ink); border-color:#a77c52; }
  .gkGridCell .pill.max { background:linear-gradient(#ffe27a,var(--gk-amber)); color:var(--gk-ink); border-color:var(--gk-amber-d); }
  /* §Koepfe: acht Karten als 4x2-Katalog; tiefe Wirkungswerte bleiben aufklappbar. */
  .gkStage[data-gk-ansicht='koepfe'] > .gkTabs { gap:max(6px,calc(.6 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkTab { min-width:44px; min-height:44px; height:max(44px,calc(3.8 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkModX { min-width:44px; min-height:44px; width:max(44px,calc(3.4 * var(--su))); height:max(44px,calc(3.4 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkModPanel { left:calc(1.5 * var(--su)); top:max(58px,calc(5.4 * var(--su))); bottom:8px; width:calc(50.5 * var(--su)); max-height:none; }
  .gkStage[data-gk-ansicht='koepfe'] .gkBtn { min-height:44px; }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail { grid-template-columns:max(44px,calc(5.2 * var(--su))) minmax(0,1fr) auto; grid-template-rows:auto auto; gap:calc(.25 * var(--su)) calc(.6 * var(--su)); }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail > .gkTile { grid-row:1 / 3; width:max(44px,calc(5.2 * var(--su))); height:max(44px,calc(5.2 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail .lvl::before { content:'VORSCHAU'; display:inline-block; margin-right:calc(.6 * var(--su)); color:var(--gk-amber-d); }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail .lvl { grid-column:2; font-size:max(11px,calc(1.35 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail .nm { grid-column:2; font-size:max(14px,calc(1.75 * var(--su))); line-height:1; align-self:start; }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail .ds { grid-column:2; font-size:max(10px,calc(1.05 * var(--su))); line-height:1.12; }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail .acts { grid-column:3; grid-row:1 / 4; }
  .gkStage[data-gk-ansicht='koepfe'] .gkGegen,.gkStage[data-gk-ansicht='koepfe'] .gkNeben { font-size:max(10px,calc(.95 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkDetail .acts .gkBtn { min-width:124px; }
  .gkKopfDetails { grid-column:1 / -1; color:#493d32; }
  .gkStage[data-gk-ansicht='koepfe'] .gkGridCell { justify-content:space-between; padding:3px 0 0; border:max(2px,calc(.3 * var(--su))) solid var(--gk-ink); border-radius:calc(1 * var(--su)); background:linear-gradient(#fff8e6,#f0dfbc); box-shadow:0 max(2px,calc(.3 * var(--su))) 0 var(--gk-ink); } .gkStage[data-gk-ansicht='koepfe'] .gkGridCell::before { content:none; }
  .gkStage[data-gk-ansicht='koepfe'] .gkGridCell.isSelected { outline:0; transform:translateY(calc(-.2 * var(--su))) scale(1.02); border-color:var(--gk-amber); background:linear-gradient(#fff0be,#e7c98d); box-shadow:0 0 0 max(2px,calc(.15 * var(--su))) var(--gk-ink),0 max(3px,calc(.45 * var(--su))) 0 var(--gk-ink); z-index:1; } .gkStage[data-gk-ansicht='koepfe'] .gkGridCell .pill.up { background:linear-gradient(#c5dd8b,#91b85d); color:#493d32; text-shadow:none; }
  .gkStage[data-gk-ansicht='koepfe'] .gkGridCell .pill { border:0; border-top:max(2px,calc(.25 * var(--su))) solid var(--gk-ink); border-radius:0; min-height:max(20px,calc(2.2 * var(--su))); display:flex; align-items:center; justify-content:center; background:#ead4aa; color:#9c4435; } .gkStage[data-gk-ansicht='koepfe'] .gkGridCell .pill.on { background:#fff2cf; color:var(--gk-coral); } .gkStage[data-gk-ansicht='koepfe'] .gkGridCell .pill.max { background:linear-gradient(#ffe27a,var(--gk-amber)); color:var(--gk-ink); } .gkGridCell[data-selt='legend'] { background:linear-gradient(115deg,#fff8e6,#fff8e6 40%,#fff 50%,#f6e6c3 60%,#fff8e6) 0 0/250% 100%!important; color:var(--gk-ink); text-shadow:none; animation:gkFolie 3.2s linear infinite; } .gkGridCell[data-selt='legend'] .lv { text-shadow:none; } .gkGridCell[data-selt='legend']::after { content:'LEGENDÄR'; position:absolute; top:5px; right:-22px; padding:1px 22px; transform:rotate(35deg); background:var(--gk-amber); border-block:2px solid var(--gk-ink); color:var(--gk-ink); font:10px var(--gk-display); } @keyframes gkFolie { to { background-position:250% 0; } } @media (prefers-reduced-motion:reduce) { .gkGridCell[data-selt='legend'] { animation:none; } }
  .gkSpruch { display:block; position:relative; margin:.15em 0 .1em 2.5em; padding:.3em .6em; border:2px solid var(--gk-ink); border-radius:.7em; background:#fff; color:var(--gk-ink); font-weight:800; quotes:'„' '“'; } .gkSpruch::before { content:''; position:absolute; left:-2.55em; top:-.2em; width:2.1em; height:2.1em; border:2px solid var(--gk-ink); border-radius:50%; background:url('./assets/gk40/gustav_neutral.webp') 50% 3%/190% auto no-repeat,#fff8e6; } .gkStempel { display:inline-block; padding:.15em .6em; border:3px solid var(--gk-coral); border-radius:6px; outline:2px solid var(--gk-coral); outline-offset:2px; color:var(--gk-coral); background:rgba(255,242,207,.1); font:max(14px,calc(1.7 * var(--su))) var(--gk-display); letter-spacing:.05em; transform:rotate(-8deg); } .gkFach { margin:0 0 .4em; white-space:normal; font:700 max(12px,calc(1.05 * var(--su)))/1.35 var(--gk-body); color:#493d32; }
  .gkKopfDetails summary { box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 calc(.8 * var(--su)); border-radius:calc(.7 * var(--su)); background:var(--gk-panel2); border:calc(.15 * var(--su)) solid var(--gk-line); color:var(--gk-amber-d); font:max(11px,calc(1.1 * var(--su))) var(--gk-display); letter-spacing:.03em; cursor:pointer; } .gkKopfDetails summary::after { content:'+'; font-size:1.4em; line-height:1; } .gkKopfDetails[open] summary::after { content:'−'; }
  .gkKopfDetails[open] summary { margin-bottom:calc(.35 * var(--su)); }
  .gkStage[data-gk-ansicht='koepfe'] .gkGrid { flex:1 1 auto; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(82px,calc(9 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkGridCell { min-width:44px; min-height:44px; padding:2px; gap:1px; }
  .gkStage[data-gk-ansicht='koepfe'] .gkGrid .gkTile { width:max(36px,calc(3.8 * var(--su))); height:max(36px,calc(3.8 * var(--su))); }
  .gkStage[data-gk-ansicht='koepfe'] .gkGridCell .lv { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; height:2.05em; overflow:hidden; text-overflow:clip; white-space:normal; overflow-wrap:normal; font-size:max(11px,calc(1.08 * var(--su))); line-height:1; text-align:center; }
  .gkStage[data-gk-ansicht='koepfe'] .gkGridCell .pill { box-sizing:border-box; width:100%; min-width:0; max-width:none; padding:calc(.05 * var(--su)) 1px; overflow:visible; text-overflow:clip; white-space:nowrap; font-size:max(10px,calc(.96 * var(--su))); line-height:1.05; }
  @media (max-width:700px) { .gkStage[data-gk-ansicht='koepfe'] .gkGrid { grid-template-columns:repeat(3,minmax(0,1fr)); } .gkStage[data-gk-ansicht='koepfe'] .gkDetail .acts .gkBtn { min-width:100px; max-width:100px; padding:0 4px; } }
  .gkSchrottInfo { flex:1; padding:calc(.8 * var(--su)) calc(1 * var(--su)); border-radius:calc(1 * var(--su)); background:var(--gk-panel2); border:calc(.2 * var(--su)) solid #5b4433; font-size:calc(1.3 * var(--su)); line-height:1.35; overflow:auto; }
  .gkSchrottInfo h4 { margin:0 0 calc(.4 * var(--su)); font:calc(1.8 * var(--su)) var(--gk-display); color:var(--gk-amber-d); }
  .gkSchrottInfo .big { font:calc(3.4 * var(--su)) var(--gk-display); color:#493d32; }
  .gkSchrottInfo table { width:100%; border-collapse:collapse; margin-top:calc(.4 * var(--su)); font-size:calc(1.2 * var(--su)); }
  .gkSchrottInfo td { padding:calc(.15 * var(--su)) 0; border-bottom:1px solid #5b4433; }
  .gkSchrottInfo td:last-child { text-align:right; font-family:var(--gk-display); color:var(--gk-green); }
  .gkSetTabs { left:calc(56 * var(--su)); top:calc(1.4 * var(--su)); }
  .gkSetTabs .gkTab { padding:0 calc(1.3 * var(--su)); }
  .gkSetPanel { left:calc(54 * var(--su)); top:calc(5.2 * var(--su)); width:calc(38 * var(--su)); height:calc(12.4 * var(--su)); padding:calc(.7 * var(--su)) calc(1 * var(--su)); }
  .gkSetPanel h4 { margin:0 0 calc(.4 * var(--su)); font:calc(1.6 * var(--su)) var(--gk-display); letter-spacing:.06em; color:#493d32; }
  .gkSlots { display:flex; gap:calc(1 * var(--su)); }
  .gkSlot { width:calc(8 * var(--su)); display:flex; flex-direction:column; align-items:center; gap:calc(.2 * var(--su)); }
  .gkSlot .gkTile { width:calc(6.6 * var(--su)); height:calc(6.6 * var(--su)); }
  .gkSlot .gkTile.leer { background:rgba(255,255,255,.06); border-style:dashed; border-color:#a77c52; } .gkSlot .gkTile.leer::after { content:'+'; color:#493d32; font:calc(3.2 * var(--su)) var(--gk-display); }
  .gkSlot .gkTile.lock { background:rgba(0,0,0,.35); color:#493d32; font-size:calc(3 * var(--su)); }
  .gkSlot .sl { font:calc(1.15 * var(--su)) var(--gk-display); color:#493d32; white-space:nowrap; }
  .gkRigM { left:calc(52 * var(--su)); top:calc(18 * var(--su)); width:calc(44 * var(--su)); height:calc(22 * var(--su)); }
  .gkModX { position:absolute; left:calc(89.6 * var(--su)); top:calc(4.2 * var(--su)); z-index:7; min-width:44px; min-height:44px; }
  .gkIconBtn.rot.gkModX { background:#f6e6c3; } .gkStage[data-gk-ansicht='module'] .gkModX { left:auto; right:calc(1.5 * var(--su)); } .gkStage[data-gk-ansicht='spirale'] .gkGrid,.gkStage[data-gk-ansicht='module'] .gkGrid { grid-auto-rows:minmax(64px,calc(7.5 * var(--su))); } .gkStage[data-gk-ansicht='spirale'] .gkGridCell .lv { flex-shrink:0; line-height:1.2; } .gkStage[data-gk-ansicht='spirale'] .gkGrid .gkSw { width:calc(3.4 * var(--su)); height:calc(3.4 * var(--su)); flex-shrink:0; font-size:calc(2.2 * var(--su)); } .gkStage[data-gk-ansicht='spirale'] .gkStatRow { line-height:1.2; }   /* Abnahme zentrale-3: Name nicht mehr gestaucht/unter der Plakette, Muster bleibt rund */
  /* ---- DESIGN (HCR2 Figur/Design, Studie §5) ---- */
  .gkDesignTabs { left:calc(1.5 * var(--su) + env(safe-area-inset-left, 0px)); top:calc(1 * var(--su) + env(safe-area-inset-top, 0px)); }
  .gkDesignTabs .gkTab { border-radius:calc(.8 * var(--su)); border-bottom:calc(.25 * var(--su)) solid var(--gk-ink); }
  /* §Zwei Rail-Spalten neben Design-Panel; Inset auf 6px gedeckelt (Geraete-Ecke Luft, Panel bleibt). */
  .gkRail { position:absolute; left:calc(1.5 * var(--su) + min(env(safe-area-inset-left, 0px), 6px)); top:calc(6.2 * var(--su)); display:grid; grid-template-columns:repeat(2,max(44px,calc(7.1 * var(--su)))); gap:calc(.7 * var(--su)); z-index:6; }
  .gkRailBtn { width:max(44px,calc(7.1 * var(--su))); height:max(44px,calc(5.2 * var(--su))); padding:calc(.2 * var(--su)); border-radius:calc(.55 * var(--su)); border:calc(.25 * var(--su)) solid var(--gk-ink); background:#f6e6c3; color:#493d32; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(.08 * var(--su)); box-shadow:0 calc(.32 * var(--su)) 0 var(--gk-ink); }
  .gkRailBtn[aria-selected='true'] { background:var(--gk-selected); color:var(--gk-ink); }
  .gkRailBtn .gkGlyph { flex:0 0 auto; width:max(16px,calc(2.4 * var(--su))); height:max(16px,calc(2.4 * var(--su))); color:inherit; filter:none; }
  .gkRailBtn .gkRailName { color:inherit; font:max(11px,calc(.9 * var(--su))) var(--gk-display); line-height:1; white-space:nowrap; }
  .gkDesignPanel { left:calc(17.2 * var(--su)); top:calc(5.6 * var(--su)); width:calc(31.8 * var(--su)); height:calc(36 * var(--su)); background:var(--gk-panel); border-color:var(--gk-line); padding:calc(.9 * var(--su)); display:flex; flex-direction:column; gap:calc(.6 * var(--su)); } .gkTab .gkGlyph { width:max(16px,calc(2.2 * var(--su))); height:max(16px,calc(2.2 * var(--su))); }
  .gkDesignPanel h4 { margin:0; font:calc(1.6 * var(--su)) var(--gk-display); letter-spacing:.06em; color:var(--gk-amber-d); }
  .gkSkins { flex:1; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:calc(.7 * var(--su)); min-height:0; }
  .gkSkin { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(.3 * var(--su)); border-radius:calc(.55 * var(--su)); background:var(--gk-panel2); border:calc(.2 * var(--su)) solid var(--gk-line); color:#493d32; padding:calc(.3 * var(--su)); }
  .gkSkin.isSelected { border-color:var(--gk-amber); background:#ffe6ac; }
  /* Design-Schleife 23.09.2026 Prinzip 6: Diamant-Optiken (selten) tragen eigenen Violett/Gold-Rahmen mit Glow, unabhaengig von Auswahl. */
  .gkSkin.isPremium { border-color:#d9a441; box-shadow:inset 0 0 0 calc(.12 * var(--su)) rgba(255,214,107,.35); } .gkSkin.isPremium.isSelected { border-color:var(--gk-amber); }
  @media (max-width:700px) { .gkSkins { grid-template-columns:repeat(2,1fr); grid-auto-rows:96px; overflow-y:auto; overscroll-behavior:contain; } .gkSkin { min-height:0; } }
  .gkSkin .sw { width:calc(5.4 * var(--su)); height:calc(5.4 * var(--su)); border-radius:50%; border:calc(.28 * var(--su)) solid var(--gk-ink); box-shadow:inset calc(-.6 * var(--su)) calc(-.8 * var(--su)) 0 rgba(0,0,0,.25),inset calc(.4 * var(--su)) calc(.5 * var(--su)) 0 rgba(255,255,255,.35); }
  .gkSkin .sw.gly { display:grid; place-items:center; font-size:calc(3.4 * var(--su)); color:var(--gk-ink); border-radius:calc(1 * var(--su)); }
  .gkSkin .nm { font:calc(1.3 * var(--su)) var(--gk-display); letter-spacing:.04em; text-shadow:none; }
  .gkSkin.isSelected .nm { color:var(--gk-amber-d); }
  .gkSkin .pr { padding:calc(.1 * var(--su)) calc(.7 * var(--su)); border-radius:calc(.7 * var(--su)); background:#ead4aa; border:calc(.15 * var(--su)) solid #5b4433; font:calc(1.15 * var(--su)) var(--gk-display); white-space:nowrap; box-shadow:0 calc(.16 * var(--su)) 0 rgba(0,0,0,.4); }
  .gkSkin .pr.own { background:linear-gradient(#b7ef7a,var(--gk-green)); color:var(--gk-ink); border-color:var(--gk-green-d); }
  /* Design-Schleife 24.09.2026 Runde 3 (design-diamant-kaufknopf): Diamant-Preis = goldener Kaufknopf (wie .gkKiBtn SOFORT), FERTIGEN = violetter Knopf (Fragmente sind die Sammelwaehrung). */
  .gkSkin .pr.dia { background:linear-gradient(#ffe19a,#d2a14c); color:#302319; border-color:#8b6028; text-shadow:none; }
  .gkSkin .pr.frag { background:linear-gradient(#fff8e6,var(--gk-violet)); color:#493d32; border-color:var(--gk-violet-d); text-shadow:none; }
  .gkSkin .pr.fragHint { background:#ead4aa; border-color:#5b4433; color:#493d32; box-shadow:none; }
  /* nicht leistbar: gedaempft, ohne Kaufknopf-Farbe (aus vorhandenem Diamant-Guthaben, keine Preisaenderung) */
  .gkSkin .pr.poor { background:#ead4aa; color:#6d4934; border-color:#5b4433; text-shadow:none; box-shadow:none; }
  .gkRigD { left:calc(50 * var(--su)); top:calc(6 * var(--su)); width:calc(48 * var(--su)); height:calc(33 * var(--su)); }
  .gkGustavD { left:calc(61 * var(--su)); top:calc(4 * var(--su)); width:calc(24 * var(--su)); height:calc(36 * var(--su)); }
  .gkDesignCancel { position:absolute; left:calc(50 * var(--su)); bottom:calc(1.5 * var(--su) + env(safe-area-inset-bottom, 0px)); z-index:5; }
  /* ---- SPIRALE / KOEPFE (Konzept §5) ---- */
  .gkSideBtn .sub { margin-top:calc(-.1 * var(--su)); padding:0 calc(.6 * var(--su)); border-radius:calc(.6 * var(--su)); background:linear-gradient(#ffd66b,var(--gk-amber)); color:var(--gk-ink); border:calc(.15 * var(--su)) solid var(--gk-ink); font:calc(1.1 * var(--su)) var(--gk-display); letter-spacing:.04em; }
  .gkSetup { position:absolute; right:calc(1.5 * var(--su) + env(safe-area-inset-right, 0px)); top:calc(13.6 * var(--su)); width:calc(19 * var(--su)); max-height:calc(100% - 15.6 * var(--su) - 46px); overflow:auto; z-index:5; padding:calc(.5 * var(--su)) calc(.8 * var(--su)); border-radius:calc(.9 * var(--su)); background:var(--gk-panel); border:calc(.2 * var(--su)) solid var(--gk-line); box-shadow:0 calc(.3 * var(--su)) 0 #5b4433; font:800 max(10px,calc(1.15 * var(--su)))/1.22 var(--gk-body); color:#493d32; }
  .gkSetup::before { content:'AUSRÜSTUNG'; display:block; margin-bottom:.45em; padding-bottom:.3em; border-bottom:1px solid var(--gk-line); color:var(--gk-amber-d); font:1.1em var(--gk-display); letter-spacing:.05em; }
  .gkSetup .row { display:grid; grid-template-columns:4.7em minmax(0,1fr); gap:.35em; align-items:start; }
  .gkSetup .row + .row { margin-top:.18em; }
  .gkSetup b { color:#493d32; font-size:.9em; }
  /* opt-0929 (29.09.2026): "anywhere" brach "Wurzelschneider" bei 640 px als "Wurzelschn/eider"; jetzt Silbentrennung (lang="de") nur fuer Woerter ab 12 Zeichen, sonst trennte sie auch "Kom-pakt"/"Stan-dard". */
  .gkSetup span { min-width:0; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:12 5 5; }
  .gkStatRows { display:flex; flex-direction:column; gap:calc(.08 * var(--su)); }
  .gkStatRow { display:grid; grid-template-columns:max-content 1fr auto; align-items:center; gap:calc(.5 * var(--su)); font:max(10px,calc(1 * var(--su)))/1.35 var(--gk-display); letter-spacing:.03em; color:#493d32; }
  .gkStatRow .bar { position:relative; height:calc(.7 * var(--su)); border-radius:calc(.4 * var(--su)); background:rgba(0,0,0,.45); border:1px solid #5b4433; overflow:hidden; }
  .gkStatRow .bar i { position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,var(--gk-aqua),var(--gk-green)); }
  .gkStatRow .bar i.neu { background:linear-gradient(90deg,#ffd66b,var(--gk-amber)); }
  .gkStatRow em { font-style:normal; color:#47653a; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .gkStatRow em.minus { color:#9c4435; }
  .gkGegen { display:grid; grid-template-columns:repeat(2,1fr); gap:calc(.04 * var(--su)) calc(.8 * var(--su)); font:calc(.95 * var(--su)) var(--gk-display); letter-spacing:.03em; color:#493d32; }
  .gkGegen span { display:flex; justify-content:space-between; align-items:center; gap:calc(.3 * var(--su)); }
  .gkGegen i { display:inline-block; width:max(6px,calc(.7 * var(--su))); height:max(6px,calc(.7 * var(--su))); border-radius:50%; background:#f6e6c3; margin-left:calc(.13 * var(--su)); }
  .gkGegen i.on { background:#B9EB87; } .gkGegen i.up { background:var(--gk-amber); } .gkGegen i.down { background:var(--gk-coral); }
  .gkTile.form { overflow:hidden; background:linear-gradient(#F3E3C0,#E2C58F); }
  .gkTile.form img { width:100%; height:100%; object-fit:cover; object-position:86% 50%; transform:rotate(-12deg) scale(1.08); } .gkTile.form .gkGlyph { width:60%; height:60%; color:var(--gk-ink); }
  .gkSw { width:calc(5.2 * var(--su)); height:calc(5.2 * var(--su)); border-radius:50%; border:calc(.28 * var(--su)) solid var(--gk-ink); display:grid; place-items:center; font-size:calc(3 * var(--su)); color:var(--gk-ink); background:linear-gradient(#fff8e6,#fff8e6); box-shadow:inset calc(-.5 * var(--su)) calc(-.6 * var(--su)) 0 rgba(0,0,0,.2); }
  .gkSw.dm { background:radial-gradient(circle at 40% 35%,#fff,#fff8e6 55%,#f6e6c3); }
  .gkSw.dm b { display:block; border-radius:50%; background:#A02A1A; border:calc(.2 * var(--su)) solid var(--gk-ink); }
  .gkNeben { font:calc(.95 * var(--su)) var(--gk-display); letter-spacing:.03em; color:#493d32; display:flex; flex-wrap:wrap; gap:calc(.15 * var(--su)) calc(.7 * var(--su)); }
  .gkNeben em { font-style:normal; color:var(--gk-amber-d); }
  /* ---- Modal ---- */
  .gkModal { position:absolute; inset:0; padding:16px; z-index:8; display:grid; place-items:center; background:rgba(66,43,27,.65); backdrop-filter:blur(4px); }
  .gkModal[hidden] { display:none !important; }
  .gkModalCard { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:14px; color:var(--gk-ink); background:#FFF9E8; border:4px solid var(--gk-ink); border-radius:20px; box-shadow:0 9px 0 rgba(91,68,51,.24),inset 0 3px 0 #fff; animation:gkModalRein .3s ease-out; }
  @keyframes gkModalRein { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce) { .gkModalCard { animation:none; } }
  .gkModalHead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding-bottom:12px; border-bottom:2px solid #D7D4C4; position:sticky; top:-14px; z-index:2; background:#FFF9E8; box-shadow:0 -14px 0 #FFF9E8; } .gkModalCard::after { content:''; position:sticky; bottom:-14px; display:block; height:22px; margin:0 0 -14px; background:linear-gradient(#fff9e800,#FFF9E8 85%); pointer-events:none; }   /* Fund karten-zentrale-8: Schliessen bleibt beim Scrollen sichtbar, unten blendet weiterer Inhalt aus */
  .gkModalHead h2 { margin:0; font:24px var(--gk-display); }
  .gkModalHead .gkIconBtn { color:var(--gk-ink); background:#fff; border-color:var(--gk-ink); width:44px; height:44px; flex-shrink:0; font-size:24px; }
  .gkModalBody { font-size:13px; }
  .gkModalBody h3 { font:18px var(--gk-display); margin:0 0 6px; color:var(--gk-red); }
  .gkModalBody p { margin:0 0 5px; }
  .gkShareEntry { margin:8px 0 14px; min-height:44px; }
  .gkShareLabel { display:grid; gap:6px; margin:14px 0; font-weight:800; }
  .gkShareLink { box-sizing:border-box; width:100%; padding:12px; border:2px solid #5b4433; border-radius:8px; font:14px system-ui,sans-serif; }
  .gkShareLayout { display:grid; grid-template-columns:minmax(90px,35%) 1fr; gap:16px; align-items:start; }
  .gkSharePreview { width:100%; max-height:52dvh; object-fit:contain; border-radius:8px; }
  .gkShareLayout .gkBtn { width:100%; min-height:48px; margin:12px 0; padding:10px; white-space:normal; }
  .gkShareStatus { min-height:24px; margin:10px 0!important; font-weight:800; color:#6d4934; }
  /* ---- Juice V2 (Kauf-Choreo, Press/Hover, Tab-Slide, Badges, Glanz) ---- */
  .gkBtn,.gkCard,.gkTab,.gkGridCell,.gkIconBtn,.gkPrice,.gkSkin,.gkSlot,.gkRailBtn,.gkSideBtn .tile,.gkGeraetKarte { transition:transform .1s ease-out,box-shadow .1s ease-out,filter .1s ease-out; }
  :is(.gkCard,.gkTab,.gkGridCell,.gkIconBtn,.gkPrice,.gkSkin,.gkSlot,.gkRailBtn,.gkAusbauTab,.gkGeraetKarte):not(:disabled):not(.isOff):active { transform:scale(.96); }
  @media (hover:hover) and (pointer:fine) {
    .gkBtn:not(:disabled):not(.isOff):not(:active):hover { filter:brightness(1.08); transform:translateY(calc(-.15 * var(--su))); }
    :is(.gkCard,.gkGridCell,.gkSkin,.gkSlot,.gkRailBtn,.gkTab,.gkIconBtn,.gkAusbauTab,.gkGeraetKarte):not(:disabled):not(.isOff):not(.isSelected):not(:active):hover { filter:brightness(1.1); transform:translateY(calc(-.25 * var(--su))) scale(1.03); box-shadow:0 calc(.5 * var(--su)) 0 rgba(0,0,0,.3); }
    .gkSideBtn:not(:disabled):not(:active):hover .tile { filter:brightness(1.08); transform:translateY(calc(-.2 * var(--su))) scale(1.04); }
  }
  /* Tab-Unterstrich-Slide */
  .gkTabUnderline { position:absolute; left:0; bottom:calc(-.2 * var(--su)); width:0; height:calc(.35 * var(--su)); border-radius:calc(.2 * var(--su)); background:var(--gk-amber); box-shadow:0 0 0 calc(.1 * var(--su)) rgba(0,0,0,.35); transition:left .22s cubic-bezier(.3,1,.4,1),width .22s cubic-bezier(.3,1,.4,1); pointer-events:none; z-index:1; }
  /* Ansicht-/Panel-Einblende, Kacheln staffeln */
  .gkPanel { animation:gkPanelIn .28s cubic-bezier(.2,1.2,.4,1) both; }
  @keyframes gkPanelIn { from { opacity:0; transform:translateX(calc(-1.2 * var(--su))); } to { opacity:1; transform:none; } }
  .gkGridCell,.gkSkin { animation:gkTileIn .3s cubic-bezier(.2,1.3,.4,1) backwards; }
  @keyframes gkTileIn { from { opacity:0; transform:translateY(calc(.6 * var(--su))) scale(.92); } to { opacity:1; transform:none; } }
  .gkGridCell:nth-child(1),.gkSkin:nth-child(1) { animation-delay:.02s; } .gkGridCell:nth-child(2),.gkSkin:nth-child(2) { animation-delay:.05s; }
  .gkGridCell:nth-child(3),.gkSkin:nth-child(3) { animation-delay:.08s; } .gkGridCell:nth-child(4),.gkSkin:nth-child(4) { animation-delay:.11s; }
  .gkGridCell:nth-child(5),.gkSkin:nth-child(5) { animation-delay:.14s; } .gkGridCell:nth-child(n+6),.gkSkin:nth-child(n+6) { animation-delay:.17s; }
  /* Buehnen-Shake bei echten Kaeufen */
  .gkStage.isShake { animation:gkStageShake .42s ease-in-out; }
  @keyframes gkStageShake { 0%,100% { transform:translate(-50%,-50%); } 15%,55% { transform:translate(calc(-50% - .5 * var(--su)),-50%); } 35%,75% { transform:translate(calc(-50% + .5 * var(--su)),-50%); } }
  /* Konfetti aus dem Kaufknopf */
  .gkConfetti { position:fixed; width:7px; height:12px; border-radius:2px; pointer-events:none; z-index:61; animation:gkConfetti .9s cubic-bezier(.15,.6,.4,1) forwards; }
  @keyframes gkConfetti { 0% { transform:translate(0,0) rotate(0deg); opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0; } }
  /* NEU!-Abzeichen: leistbar und noch nicht gehabt */
  .gkNeu { position:absolute; left:calc(-.3 * var(--su)); top:calc(-.3 * var(--su)); z-index:3; padding:calc(.1 * var(--su)) calc(.55 * var(--su)); border-radius:calc(.5 * var(--su)); background:linear-gradient(#ff9a7a,var(--gk-coral) 60%,#b73a2c); border:calc(.15 * var(--su)) solid var(--gk-ink); color:#fff8e6; font:calc(1.05 * var(--su)) var(--gk-display); letter-spacing:.03em; box-shadow:0 calc(.2 * var(--su)) 0 rgba(0,0,0,.35); animation:gkNeuPulse 1.1s ease-in-out infinite; }
  @keyframes gkNeuPulse { 0%,100% { transform:scale(1) rotate(-6deg); } 50% { transform:scale(1.1) rotate(-6deg); } }
  /* Seltenheits-Glanz auf epischen Kacheln */
  .gkTile[data-selt='epic'] { overflow:hidden; }
  .gkTile[data-selt='epic']::after { content:''; position:absolute; top:-40%; left:-60%; width:35%; height:180%; background:linear-gradient(75deg,transparent,rgba(255,255,255,.6),transparent); transform:rotate(20deg); animation:gkEpicShine 2.6s ease-in-out infinite; }
  @keyframes gkEpicShine { 0% { left:-60%; } 55%,100% { left:140%; } }
  /* Schwebe-Animation Kopfform-Detailbild (statt X-Achsen-Rotation) */
  .gkDetail > .gkTile.form img { animation:gkFloat 2.6s ease-in-out infinite; }
  @keyframes gkFloat { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(calc(-.45 * var(--su))) rotate(-2deg); } }
  @media (prefers-reduced-motion:reduce) {
    .gkBtn,.gkCard,.gkTab,.gkGridCell,.gkIconBtn,.gkPrice,.gkSkin,.gkSlot,.gkRailBtn,.gkSideBtn .tile,.gkTabUnderline,.gkGeraetKarte { transition:none; }
  }

/* Fuhrpark: sechs echte Vorschauen, Aktion immer im sichtbaren Detailbereich. */
.gkModellname { position:absolute; left:calc(3% + env(safe-area-inset-left, 0px)); top:39%; max-width:23%; color:#493d32; background:#ead4aa; border:2px solid #5b4433; border-radius:6px; padding:6px 8px; font: max(12px,1.3vw)/1.2 var(--gk-display); z-index:5; }
.gkFuhrparkTitel { position:absolute; left:34%; top:1%; margin:0; color:#fff8e6; font:calc(3 * var(--su)) var(--gk-display); text-shadow:2px 3px #5b4433; }
.gkGeraeteListe { position:absolute; left:calc(2% + env(safe-area-inset-left, 0px)); top:13%; bottom:16%; width:33%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:calc(.8 * var(--su)); }
.gkGeraetKarte { min-width:0; min-height:44px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:6px; border:3px solid #5b4433; border-radius:9px; box-shadow:0 3px #5b4433; background:linear-gradient(#f6e6c3,#ead4aa); color:#493d32; text-align:left; cursor:pointer; }
.gkGeraetKarte.isSelected { border-color:#ffd361; background:linear-gradient(#fff8e6,#f0dfbc); }
.gkGeraetKarte strong { font:max(13px,calc(1.65 * var(--su)))/1 var(--gk-display); }
.gkGeraetKarte span { color:#493d32; font:700 max(11px,calc(1.1 * var(--su)))/1.1 var(--gk-body); }
.gkGeraetKarte small { font:700 max(10px,calc(.92 * var(--su)))/1.15 var(--gk-body); } @media(max-height:340px) { .gkGeraetKarte { gap:2px; padding:5px 6px; } .gkGeraetKarte span { display:none; } }   /* Fund karten-zentrale-6: Rolle steht in der Vorschau, die Karte behaelt Innenabstand */
.gkRigF { left:calc(36% + env(safe-area-inset-left, 0px)); right:calc(1% + env(safe-area-inset-right, 0px)); top:9%; bottom:45%; }
.gkRigF canvas { width:100%; height:100%; display:block; filter:var(--grade-hero); }
.gkGeraeteDetail { position:absolute; left:calc(37% + env(safe-area-inset-left, 0px)); right:calc(2% + env(safe-area-inset-right, 0px)); bottom:calc(2% + env(safe-area-inset-bottom, 0px)); min-height:39%; box-sizing:border-box; padding:calc(.7 * var(--su)) calc(1.1 * var(--su)); background:#ead4aaec; color:#493d32; border:2px solid #5b4433; border-radius:9px; font:700 max(11px,calc(1.08 * var(--su)))/1.15 var(--gk-body); }
.gkGeraetKopf h3 { margin:1px 0; font:max(18px,calc(2 * var(--su))) var(--gk-display); color:#8b5510; }
.gkGeraetKopf small { color:#493d32; }
.gkGeraeteDetail p { margin:4px 0; }
.gkGeraetWerte { display:flex; flex-wrap:wrap; gap:4px 14px; padding:5px 0; }
.gkGeraetWerte b.gut { color:#47653a; }
.gkGeraetWerte b.schwach { color:#9c4435; }
.gkGeraetWerte b.neutral { color:#493d32; }
.gkGeraeteDetail > small { display:block; min-height:1.2em; color:#493d32; }
.gkGeraeteDetail .gkBtn { display:flex; margin:7px 0 0 auto; min-height:44px; font-size:max(13px,calc(1.5 * var(--su))); }
.gkGeraeteDetail .gkBtn:disabled { opacity:.65; cursor:default; }

/* TESTPHASE-01: kleine Vorschau, ohne Eingriff in Timer oder Kistenpreise. */
.gkKiComingsoon{display:block;margin-top:3px;font:9px/1.25 system-ui,sans-serif;font-weight:800;color:#493d32;letter-spacing:.02em;white-space:nowrap}

/* STARTBUEHNE-02: jede sichtbare Gruppe besitzt eine Rasterzelle.
   Die schmale zweite Spalte trennt Gustav/Edition von der Navigation.
   Kopfzeile und Regal behalten Platz fuer Text, 44px-Treffer und Schatten. */
.gkCentral .gkStage {
  --start-spalten:minmax(0,15fr) minmax(48px,7fr) minmax(0,43fr) minmax(280px,35fr);
  --start-zeilen:max(64px,8 * var(--su)) max(100px,13 * var(--su)) minmax(0,1fr) max(44px,4.6 * var(--su)) max(44px,5.2 * var(--su));
  --start-gap:max(8px,1 * var(--su));
  display:grid; grid-template-columns:var(--start-spalten); grid-template-rows:var(--start-zeilen);
  gap:var(--start-gap); padding:max(8px,1 * var(--su)) calc(1.5 * var(--su)) max(12px,1.5 * var(--su)); box-sizing:border-box;
}
.gkCentral .gkCentralHead { grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; min-width:0; }
.gkCentral .gkWallet { position:relative; inset:auto; min-width:0; display:flex; flex-wrap:wrap; gap:4px; }
.gkCentral .gkPill { font-size:max(11px,1.55 * var(--su)); min-width:0; height:max(26px,3.2 * var(--su)); padding-right:6px; }
.gkCentral .gkPill .ic { flex-shrink:0; }
.gkCentral .gkBrandBlock { min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.gkCentral .gkBrand { position:relative; inset:auto; transform:none; width:min(100%,19 * var(--su)); height:auto; }
.gkCentral .gkStreakChip { position:relative; inset:auto; transform:none; box-sizing:border-box; max-width:100%; padding:2px 5px; font-size:max(10px,1.3 * var(--su)); gap:3px; overflow:visible; white-space:normal; }
.gkCentral .gkStreakLbl { font-size:max(9px,1.1 * var(--su)); }
.gkCentral .gkStreakChip[data-gk-tier="puls"] { animation:gkCentralStreakPuls 1.1s ease-in-out infinite; }
@keyframes gkCentralStreakPuls { 0%,100% { scale:1; } 50% { scale:1.06; } }
.gkCentral .gkTopRight { position:relative; inset:auto; min-width:0; justify-self:end; gap:12px; }
.gkCentral .gkTopRight .gkIconBtn { min-width:44px; min-height:44px; }
.gkCentral .gkRank { min-height:44px; min-width:0; }
.gkCentral .gkRank span { font-size:max(10px,1.3 * var(--su)); }
.gkCentral .gkAufgabenTile { position:relative; inset:auto; grid-column:1 / 3; grid-row:2; box-sizing:border-box; width:auto; max-height:none; min-width:0; align-self:start; padding:5px; overflow:visible; }
.gkCentral .gkAufgabenTile h5 { font-size:max(10px,1.15 * var(--su)); }
.gkCentral .gkAufgabenTile .gkStat { grid-template-columns:minmax(0,1fr) auto; font-size:max(10px,1.2 * var(--su)); gap:4px; line-height:1.1; }
.gkCentral .gkAufgabenTile .gkStat em { align-self:center; }
.gkCentral .gkBuchReihe span { min-width:12px; min-height:12px; font-size:max(10px,1.1 * var(--su)); }
.gkCentral .gkRigZ { position:relative; inset:auto; width:auto; height:auto; min-width:0; min-height:0; grid-column:3; grid-row:2 / 4; }
.gkCentral .gkGustavZ { position:relative; inset:auto; width:auto; height:auto; min-width:0; min-height:0; grid-column:1; grid-row:3 / 6; }
.gkCentral .gkEdition { position:relative!important; inset:auto; width:100%; height:min(100%,10 * var(--su)); min-width:44px; min-height:44px; grid-column:2; grid-row:3; align-self:center; }
.gkCentral .gkKistenLayer { display:grid; grid-template-columns:var(--start-spalten); grid-template-rows:var(--start-zeilen); gap:var(--start-gap); padding:max(8px,1 * var(--su)) calc(1.5 * var(--su)) max(12px,1.5 * var(--su)); box-sizing:border-box; }
.gkCentral .gkKiRegal { position:relative; inset:auto; width:auto; grid-column:4; grid-row:2 / 5; align-self:start; max-height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:5px; }
.gkCentral .gkBottomM { position:relative; inset:auto; transform:none; min-width:0; grid-column:2 / 4; grid-row:4 / 6; display:grid; grid-template-rows:subgrid; gap:var(--start-gap); align-items:stretch; justify-items:end; }
.gkCentral .gkCentralActions { min-width:0; width:100%; justify-content:end; gap:8px; }
.gkCentral .gkCentralActions .gkBtn { min-width:0; min-height:44px; font-size:max(12px,1.7 * var(--su)); padding-inline:calc(.8 * var(--su)); letter-spacing:.025em; }
.gkCentral .gkBottomR { position:relative; inset:auto; grid-column:4; grid-row:5; align-self:stretch; justify-content:stretch; }
.gkCentral .gkBottomR .gkBig { width:100%; min-height:44px; padding-inline:6px; font-size:max(15px,1.9 * var(--su)); }
.gkCentral .gkKiKopf { margin-bottom:2px; }
.gkCentral .gkKiSlots { gap:6px; min-height:0; grid-template-rows:repeat(2,minmax(0,1fr)); }
.gkCentral .gkKiText { gap:0; }
.gkCentral .gkKiSlot { padding:2px; gap:2px; min-height:0; align-content:start; }
.gkCentral .gkKiSlot > .gkKiSprite { height:max(20px,2.5 * var(--su)); }
.gkCentral .gkKiName { font-size:max(11px,1.15 * var(--su)); }
.gkCentral .gkKiHinweis { font-size:max(10px,.9 * var(--su)); line-height:1.15; }
.gkCentral .gkKiAkt { display:flex; flex-direction:row; gap:6px; margin-top:0; }
.gkCentral .gkKiBtn.gkBtn { flex:1 1 0; min-height:44px; min-width:44px; padding:2px; font-size:max(10px,.95 * var(--su)); line-height:1.1; }
.gkCentral .gkKiVideo.gkBtn { padding-left:2px; }
.gkCentral .gkKiTitel { font-size:max(12px,1.4 * var(--su)); }
.gkCentral .gkKiZaehler { font-size:max(9px,.95 * var(--su)); }
.gkCentral .gkKiTeaser { margin-top:2px; font-size:max(10px,1.05 * var(--su)); line-height:1.1; }
.gkCentral .gkKiComingsoon { font-size:max(9px,.9 * var(--su)); white-space:normal; }
.gkCentral .gkKiVideo.gkBtn { flex-grow:2; }

/* HCR-HUB-0927: eigenständige Zentrale, vorhandene Aktionen und Saveanzeigen. */
.gkCentral .gkStage { width:100%;height:100%;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-rows:56px minmax(0,1fr) 58px;gap:10px;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.gkCentral::before { filter:saturate(.85) brightness(.84); }
.gkCentral .gkCentralHead { grid-column:1/-1;grid-row:1;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px; }
.gkHubBrand { font:900 clamp(19px,2.3vw,34px)/1 'Gustav Display',system-ui,sans-serif;color:#fff8e6;text-shadow:0 2px 0 #5b4433,1px 0 0 #5b4433,-1px 0 0 #5b4433,0 -1px 0 #5b4433;letter-spacing:.02em; }
.gkCentral .gkWallet { flex-wrap:nowrap;justify-content:center; }
.gkCentral .gkPill { font-size:clamp(12px,1.4vw,20px);height:30px; }
.gkCentral .gkTopRight { gap:8px; }
.gkCentral .gkRank span { font-size:12px; }
.gkHubHero { position:relative;min-width:0;min-height:0;border-radius:20px;background:radial-gradient(ellipse at 48% 60%,#ffeec377,transparent 70%); }
.gkHubMachine { position:absolute;left:12px;top:0;display:flex;flex-direction:column;color:#fff8e6;text-shadow:0 2px 0 #5b4433,1px 0 0 #5b4433,-1px 0 0 #5b4433,0 -1px 0 #5b4433;z-index:2; }
.gkHubMachine small { font:800 11px/1.4 system-ui;letter-spacing:.13em; }
.gkHubMachine strong { font:900 clamp(22px,3vw,44px)/1.1 'Gustav Display',system-ui; }
.gkCentral .gkRigZ { position:absolute;left:8%;top:45px;width:92%;height:calc(100% - 88px); }
.gkCentral .gkGustavZ { position:absolute;left:-3%;bottom:36px;width:27%;height:46%;pointer-events:none; }
.gkHubProgress { position:absolute;z-index:4;bottom:4px;left:8px;right:8px;text-align:center;font:800 clamp(10px,1.15vw,16px)/1.3 system-ui;color:#493d32;text-shadow:none;background:#ead4aae8;padding:10px 3px;border:2px solid #b4a277;border-radius:9px; }
.gkCentral .gkStreakChip { position:absolute;right:8px;top:2px;max-width:48%;font-size:11px;z-index:3; }
.gkHubContent { position:relative;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding:0 7px 5px 2px;scrollbar-width:thin;scrollbar-color:#efc15b #5b4433; }
/* opt-0929 (29.09.2026, Befund A1b Ergaenzung): dezenter Verlauf am unteren Rand der Scrollflaeche selbst (::after ist
   ein echtes Kind von .gkHubContent, liegt also IM geclippten Scrollbereich und ueberdeckt nie Kartentext ausserhalb
   davon) - zusaetzlich zum verkleinerten .gkHubHint, der bei sehr schmalen Karten (365px Inhaltsbreite, siehe
   Vertraege) weiterhin knapp in den Kartentext reichen kann (Restbefund, siehe Bericht). */
.gkHubContent[data-more="true"]::after { content:''; position:absolute; left:0; right:7px; bottom:0; height:26px; background:linear-gradient(rgba(73,56,44,0),rgba(73,56,44,.55)); pointer-events:none; }
/* opt-0929 (29.09.2026, Befund A1a): Bodenabstand, damit die letzte Kachel (z.B. FEIERABEND) beim Ruhezustand
   nicht bis auf den Container-Rand reicht - sie endet sichtbar ueber der Nav statt wie abgeschnitten zu wirken. */
.gkHubPane { display:flex;flex-direction:column;gap:10px;min-height:100%;padding-bottom:16px; }
.gkHubPane[hidden] { display:none!important; }
.gkHubPane:not([hidden]) { animation:gkHubPaneRein .2s ease-out; }
@keyframes gkHubPaneRein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .gkHubPane:not([hidden]) { animation:none; } }
.gkHubPane h2 { margin:0;color:#fff8e6;text-shadow:0 2px 0 #5b4433,1px 0 0 #5b4433,-1px 0 0 #5b4433,0 -1px 0 #5b4433;font:900 clamp(13px,1.4vw,20px)/1.4 system-ui;letter-spacing:.04em; }
.gkBtn.gkHubCard { flex:1 0 94px;min-height:94px;width:100%;height:auto;display:flex;align-items:center;text-align:left;gap:17px;padding:12px 18px;border:3px solid #5b4433;border-radius:15px;box-shadow:inset 0 3px #fff5,0 4px #5b4433;white-space:normal;text-shadow:none;letter-spacing:0;color:#493d32; }
.gkHubCardIcon { flex:0 0 52px;display:grid;place-items:center;width:52px;height:52px;border:2px solid #fff7;border-radius:50%;background:#ead4aa33;transform:rotate(-8deg); }
.gkHubCardIcon .gkGlyph { width:32px;height:32px; }
.gkHubCardCopy { display:flex;flex-direction:column;gap:2px;flex:1;min-width:0; }
.gkHubCardCopy small { font:800 10px/1.3 system-ui;letter-spacing:.12em; }
.gkHubCardCopy strong { font:900 clamp(24px,3vw,42px)/1.1 'Gustav Display',system-ui; }
.gkHubCardCopy > span { font:700 clamp(12px,1.25vw,18px)/1.4 system-ui; }
.gkHubArrow { font:900 38px/1 system-ui; }
.gkHubGreen { background:linear-gradient(115deg,#dbe9ae,#b9d083); }
.gkHubGold { background:linear-gradient(115deg,#ffe8b4,#ecc16e); }
.gkHubOrange { background:linear-gradient(115deg,#ffdcb9,#e9b583); }
.gkHubBlue { background:linear-gradient(115deg,#f6e6c3,#f6e6c3); }
.gkHubNav { grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;z-index:8; }
.gkBtn.gkHubNavBtn { min-width:44px;min-height:50px;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px;font:900 clamp(11px,1.15vw,17px)/1.1 system-ui;background:#f6e6c3;border:2px solid #afbdac;border-radius:9px;color:#493d32;box-shadow:0 3px #5b4433;text-shadow:none; }   /* Fund karten-zentrale-14: 1440 px - MANNSCHAFT/WETTKAMPF mit Luft zum Rand */
.gkHubNavBtn .gkGlyph { width:24px;height:24px;flex-shrink:0; }
.gkBtn.gkHubNavBtn[aria-current="page"] { color:#6d4934;background:#f1be54;border-color:#ffdf8e;text-shadow:none;box-shadow:0 3px #a56528; }
.gkHubPane .gkHubBack { min-height:44px;align-self:start;font-size:12px;padding:6px 12px; }
.gkCentral .gkHubPane .gkAufgabenTile { position:relative;inset:auto;width:100%;padding:12px; }
.gkCentral .gkHubPane .gkAufgabenTile .gkStat { font-size:13px;line-height:1.5; }
.gkCentral .gkHubPane .gkAufgabenTile h5 { font-size:14px; }
.gkCentral .gkHubPane .gkKistenLayer { display:block;position:static;inset:auto;padding:0;pointer-events:auto; }
.gkCentral .gkHubPane .gkKiRegal { display:block;position:relative;inset:auto;max-height:none;padding:12px; }
.gkCentral .gkHubPane .gkKiSlots { grid-template-rows:none; }
.gkCentral .gkHubPane .gkKiSlot { min-height:54px;padding:6px; }
.gkCentral .gkHubPane .gkKiName,.gkCentral .gkHubPane .gkKiTitel { font-size:15px; }
.gkCentral .gkHubPane .gkKiHinweis { font-size:12px; }
.gkCentral .gkHubPane .gkKiBtn.gkBtn { font-size:12px;min-height:44px; }
.gkCentral .gkHubPane .gkEdition { position:relative!important;inset:auto;align-self:end;width:80px;height:80px; }
.gkCentral .gkKiAusbeute { position:fixed;inset:0;z-index:20; }
@media(max-height:380px) { .gkCentral .gkStage { grid-template-rows:48px minmax(0,1fr) 50px;gap:7px;padding-block:5px max(5px,env(safe-area-inset-bottom)); } .gkCentral .gkRigZ { top:38px;height:calc(100% - 77px); } .gkHubMachine strong {font-size:24px;} .gkCentral .gkStreakChip {top:35px;max-width:65%;} .gkHubCardCopy strong{font-size:24px;} .gkBtn.gkHubCard{flex-basis:81px;min-height:81px;padding:8px 13px;gap:10px;} .gkHubCardIcon{width:42px;height:42px;flex-basis:42px;} .gkHubPane{gap:7px;padding-bottom:8px;} .gkHubCardCopy > span{font-size:11px;} .gkHubNavBtn .gkGlyph{width:19px;height:19px;} }
@media(min-height:600px) { .gkCentral .gkStage {grid-template-rows:72px minmax(0,1fr) 76px;padding:18px;gap:20px;} .gkHubPane {gap:18px;padding-bottom:22px;} .gkBtn.gkHubCard {max-height:220px;min-height:150px;} .gkCentral .gkRigZ{top:75px;height:calc(100% - 135px);} .gkHubMachine{top:12px;} .gkHubProgress{padding:16px;} }
.gkHubPane .gkHubBack { background:#f6e6c3;color:#493d32;border:2px solid #afbdac;box-shadow:0 3px #5b4433;text-shadow:none; }
/* opt-0929 (29.09.2026, Befund A1b): kleiner, dichter am rechten Rand und mit durchscheinendem Blur-Grund statt
   voller Deckkraft (vorher: right:30px, deckendes #5b4433, lag bei 365px schmaler Inhaltsbreite voll auf dem
   Kartentext, belegt webkit 667x375). Bei so schmalen Karten reicht der Text selbst verkleinert noch an den
   Kartenrand heran - der Verlauf oben an .gkHubContent (::after) traegt den Hinweis zusaetzlich, ohne je Text
   zu ueberdecken; Restbefund und Vorschlag (Text kuerzen o.ae.) siehe Bericht/fremd_wuensche. */
.gkHubHint {display:none;position:absolute;right:calc(6px + env(safe-area-inset-right, 0px));bottom:78px;z-index:7;max-width:34%;padding:3px 7px;border:2px solid #ffe5a2;border-radius:9px;background:rgba(255,248,230,.94);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);color:#493d32;font:900 11px/1.15 system-ui;text-align:right;pointer-events:none;box-shadow:0 2px 8px #0009;}
.gkHubContent[data-more="true"] ~ .gkHubHint {display:block;}
.gkHubNav {grid-row:3;}
.gkHubPane[data-gk-hub-pane="feierabend"] {padding-bottom:32px;}
.gkCentral .gkHubPane .gkAufgabenTile {padding:7px 10px;}
.gkCentral .gkHubPane .gkAufgabenTile .gkStat {font-size:12px;line-height:1.25;}
@media(max-height:380px){.gkHubHint{bottom:66px;font-size:10px;}}
@media(min-height:600px){.gkHubHint{bottom:120px;}}
/* Streak hat einen eigenen Platz im Kopf; Ausbeute liegt über der gesamten Zentrale. */
.gkHubBrand {display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.gkCentral .gkHubBrand .gkStreakChip {position:relative;inset:auto;max-width:100%;font-size:11px;line-height:1.1;transform:none;text-shadow:none;letter-spacing:0;}
.gkCentral .gkHubBrand .gkStreakLbl {font-size:10px;}
.gkCentral .gkHubPane .gkKistenLayer {z-index:auto;}

/* HCR-WERKSTATT: lesbare Inventarkarten, unveraenderte Kauf- und Setregeln. */
.gkStA .gkCard { grid-template-rows:minmax(21px,1fr) 34px 4px 50px; }
.gkStA .gkCard .upgradeIcon { width:34px; height:34px; padding:1px; border-color:#e2c890; background:#fff2cf; }
.gkStA .gkCard .gkPrice { min-height:50px; height:50px; }
.gkStB .gkModPanel { left:calc(10 * var(--su)); width:calc(42 * var(--su)); border-color:#a77c52; }
.gkStB .gkDetail .lvl { grid-column:1 / -1; font-size:max(11px,calc(1.35 * var(--su))); color:#8b5510; }
.gkStB .gkDetail .nm { grid-column:2; grid-row:2; }
.gkStB .gkDetail > .gkTile { grid-column:1; grid-row:2 / 4; }
.gkStB .gkDetail .ds { grid-column:2; }
.gkStage.gkStB .gkGrid { grid-auto-rows:minmax(76px,calc(10 * var(--su))); gap:6px; padding:4px; }
.gkStB .gkGridCell { border:2px solid #5b4433; border-radius:8px; background:linear-gradient(#fff8e6,#f0dfbc); box-shadow:0 2px 0 #5b4433; min-height:72px; }
.gkStB .gkGridCell.isSelected { outline:none; border-color:#ffd36b; background:linear-gradient(#fff0be,#e7c98d); }
.gkStB .gkGrid .gkTile { width:max(36px,calc(4.5 * var(--su))); height:max(36px,calc(4.5 * var(--su))); }
.gkStB .gkTile img { width:94%; height:94%; }
.gkStB .gkTile.isOff { filter:saturate(.65); opacity:1; }
.gkStB .gkSetPanel { border-color:#a77c52; }
.gkStB .gkSetPanel h4 { font-size:max(11px,calc(1.4 * var(--su))); color:#8b5510; }
.gkStB .gkTab { min-height:44px; min-width:44px; }
.gkStB .gkModPanel,.gkStB .gkSetPanel { top:max(61px,calc(6.1 * var(--su))); }
.gkStB .gkModPanel { max-height:calc(100% - max(61px,6.1 * var(--su)) - 10px); }
.gkStB .gkRigM { top:max(190px,calc(19 * var(--su))); height:calc(100% - max(190px,19 * var(--su)) - 55px); }
.gkStB .gkSchrottInfo { font-size:max(12px,calc(1.3 * var(--su))); }
.gkStB .gkSchrottInfo table { font-size:max(11px,calc(1.2 * var(--su))); }
.gkStB .gkSchrottInfo caption { text-align:left; font-weight:800; color:#8b5510; padding-bottom:6px; }
.gkStB .gkSchrottInfo td { padding:5px 0; }
.gkSchrottBald { display:grid; gap:5px; margin-top:12px; padding:10px; border:2px dashed #ae9a65; border-radius:8px; background:#f6e6c3; color:#493d32; }
.gkSchrottBald b { color:#8b5510; font-size:11px; }
.gkStB .gkDetail { grid-template-columns:max(44px,calc(6 * var(--su))) minmax(0,1fr) auto; }
.gkStB .gkDetail .lvl { grid-column:2; grid-row:1; }
.gkStB .gkDetail .nm { grid-column:2; grid-row:2; font-size:max(14px,calc(1.75 * var(--su))); }
.gkStB .gkDetail > .gkTile { grid-column:1; grid-row:1 / 4; width:max(44px,calc(5.5 * var(--su))); height:max(44px,calc(5.5 * var(--su))); }
.gkStB .gkDetail .ds { grid-column:2; grid-row:3; }
.gkStB .gkDetail .acts { grid-column:3; grid-row:1 / 4; flex-direction:column; justify-content:center; gap:5px; }
.gkStB .gkDetail .acts .gkBtn { min-width:72px; padding:0 5px; font-size:11px; }
.gkStB .gkDetail .stats { grid-row:4; white-space:normal; }

/* Werkstatt: Währungen haben eine eigene Zeile über den Reitern. */
.gkWorkshop .gkStA { --gk-karten-top:max(80px,calc(8.8 * var(--su))); }
.gkWorkshop .gkCard .gkPrice { padding-bottom:8px; }
.gkWorkshop .gkCard .gkPrice .gkTeile { font-size:max(9px,calc(.72 * var(--su))); line-height:1.15; letter-spacing:0; }
.gkWorkshop .gkStA .gkAusbauTabs { top:max(40px,calc(4.8 * var(--su))); }
/* MOBIL-1014-04: Lesbarkeits-Untergrenze fuer --su-skalierte Texte (Kistenregal, Werkstatt). Text >= 10 px, Zahlen >= 11 px
   ECHT gerendert; unter 350 px Hoehe gleicht der Wert den #meta-root-zoom (.86) aus. Trefferflaechen haben schon ::after 44 px. */
:root{--mob-min:11px;--mob-zahl:11px}/* Abnahme zentrale-8: Mindestschrift 11 px (vorher 10) */
@media (max-height:350px){:root{--mob-min:11.7px;--mob-zahl:12.8px}}
#gkMetaRoot .gkKiVorschau{font-size:max(var(--mob-zahl),.78 * var(--su))}
#gkMetaRoot .gkKiFrei,#gkMetaRoot .gkKiTeaser,#gkMetaRoot .gkKiComingsoon{font-size:max(var(--mob-min),1.2 * var(--su))}
#gkMetaRoot .gkKiZaehler{font-size:max(var(--mob-zahl),.95 * var(--su))}
#gkMetaRoot .gkKiTeaser,#gkMetaRoot .gkKiComingsoon{font-size:max(var(--mob-min),1.05 * var(--su))}
#gkMetaRoot .gkSideBtn .sub,#gkMetaRoot .gkSideBtn .lbl{font-size:max(var(--mob-min),1.35 * var(--su))}
#gkMetaRoot .gkFragStand{font-size:max(var(--mob-zahl),.85 * var(--su))}
#gkMetaRoot .gkStC .gkRailName{font-size:max(10px,.9 * var(--su))}/* bleibt 10 px: HANDSCHUH/WERKBANK passen bei 11 px nicht in die Leiste (Abnahme zentrale-8) */
@media (max-height:350px){   /* feste px-Schriften unter zoom .86 + Ausruestungsbox (Audit: einklappen statt alles verkleinern) */
  #gkMetaRoot .gkAusbauTab,#gkMetaRoot .gkRank span,#gkMetaRoot .gkStC .gkSkin .nm{font-size:var(--mob-min)}
  #gkMetaRoot .gkSideBtn .badge,#gkMetaRoot .gkStC .gkSkin .pr,#gkMetaRoot .gkStA .gkWallet .gkPill>span:not(.ic){font-size:var(--mob-zahl)}
  #gkMetaRoot .gkStA .gkSetup{display:none}
}
.gkWorkshop .gkStA .gkSideBtn { top:max(44px,calc(4.8 * var(--su)))!important; }
.gkWorkshop .gkStA .gkSetup { top:max(132px,calc(14.6 * var(--su))); max-height:calc(100% - max(132px,14.6 * var(--su)) - 58px); }
.gkWorkshop .gkStA.hasDetail .gkModellname { visibility:hidden; }
.gkWorkshop .gkStA .gkBlase { top:max(140px,calc(17 * var(--su))); max-height:calc(100% - max(140px,17 * var(--su)) - 58px); }
.gkWorkshop .gkStage:not(.gkStC) > .gkTabs { top:max(40px,calc(4.8 * var(--su)))!important; }
.gkWorkshop .gkStage:not(.gkStC) .gkModPanel { top:max(90px,calc(10 * var(--su))); bottom:10px; max-height:none; overflow:auto; }
.gkWorkshop .gkStage:not(.gkStC) .gkModPanel > .gkGrid { flex:0 0 auto; min-height:100px; max-height:none; overflow:visible; }
.gkWorkshop .gkStB .gkSetPanel { top:max(90px,calc(10 * var(--su))); }
.gkWorkshop .gkStage:not(.gkStC) .gkModX { top:max(40px,calc(4.8 * var(--su))); }

/* Hauptweg: die normale Schicht bleibt groß, Zusatzangebote stehen darunter. */
.gkHubPane .gkBtn.gkHubSecondary { flex:0 0 auto; min-height:70px; max-height:none; padding:8px 14px; }
.gkHubSecondary .gkHubCardCopy strong { font-size:clamp(18px,2.2vw,26px); }
.gkHubSecondary .gkHubCardIcon { width:36px; height:36px; flex-basis:36px; }
.gkHubSecondary .gkHubCardCopy small { display:none; }
.gkHubShift .gkHubCardCopy strong { font-size:clamp(23px,3.2vw,44px); }
@media(min-height:600px) { .gkHubPane .gkBtn.gkHubSecondary { min-height:95px; } }

/* Teileverwertung: gleiche Werkstattfarben, eigene gut greifbare Mengenwahl. */
.gkRecycleHead{display:flex;gap:10px;align-items:center;margin-bottom:12px}.gkRecycleHead h4{margin:0}.gkRecycleHead span:not(.gkRecycleGear){font-size:12px;color:#493d32}.gkRecycleGear{display:grid;place-items:center;flex:none;width:48px;height:48px;background:#f6b73c;border:3px solid #5b4433;border-radius:12px;box-shadow:0 3px #5b4433;color:#6d4934;font-size:34px}
.gkRvParts{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}.gkRvPart{position:relative;flex:none;width:64px;height:64px;padding:0;background:#f6e6c3;border:3px solid #5b4433;border-radius:12px;box-shadow:0 3px #5b4433;cursor:pointer;touch-action:manipulation}.gkRvPart img{width:100%;height:100%;object-fit:contain;padding:6px}.gkRvPart.isS{background:#49382c}.gkRvPart.isE{background:#6b4a12}.gkRvPart.isSel{border-color:#f6b73c;box-shadow:0 0 0 3px #f6b73c,0 3px #5b4433;transform:translateY(-2px)}.gkRvPart.isLeer{opacity:.4;filter:saturate(.2)}.gkRvPart b{position:absolute;top:-6px;right:-6px;min-width:22px;padding:1px 5px;background:#f6b73c;color:#6d4934;border:2px solid #5b4433;border-radius:11px;font:900 12px system-ui}.gkRvPart em{position:absolute;left:2px;right:2px;bottom:2px;background:#ead4aacc;color:#47653a;border-radius:6px;font:800 9px system-ui;font-style:normal}
.gkRvMachine{position:relative;display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:8px;margin:8px 0;padding:10px 12px 16px;background:#f6e6c3;border:3px solid #5b4433;border-radius:14px;box-shadow:inset 0 0 0 2px #5b4433,0 3px #5b4433}.gkRvIn,.gkRvOut{display:flex;align-items:center;gap:6px}.gkRvOut{justify-content:flex-end}.gkRvIn img{width:46px;height:46px;object-fit:contain;background:#f6b73c;border:2px solid #5b4433;border-radius:10px 10px 18px 18px}.gkRvIn b,.gkRvOut b{font:900 20px system-ui;color:#493d32}.gkRvOut span{font:800 11px system-ui;color:#8b5510}.gkRvGear{font-size:40px;line-height:1;color:#f6b73c;text-shadow:0 3px #5b4433}.gkRvArrow{font-size:22px;color:#493d32}.gkRvBar{position:absolute;left:12px;right:12px;bottom:6px;height:6px;background:#ead4aa;border-radius:3px;overflow:hidden}.gkRvBar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#79d263 0 8px,#5bb04a 8px 16px);transition:width .9s linear}.gkRvMachine[data-zustand="lauf"] .gkRvGear{animation:gkRvDreh 1.6s linear infinite}.gkRvMachine[data-zustand="lauf"] .gkRvIn img{animation:gkRvRuettel .35s ease-in-out infinite alternate}.gkRvMachine[data-zustand="fertig"]{box-shadow:inset 0 0 0 2px #79d263,0 0 18px #79d26399,0 3px #5b4433}.gkRvMachine[data-zustand="fertig"] .gkRvOut{animation:gkRvHuepf .7s ease-in-out infinite alternate}@keyframes gkRvDreh{to{transform:rotate(360deg)}}@keyframes gkRvRuettel{from{transform:translate(-1px,0) rotate(-3deg)}to{transform:translate(1px,2px) rotate(3deg)}}@keyframes gkRvHuepf{to{transform:translateY(-4px) scale(1.06)}}@media(prefers-reduced-motion:reduce){.gkRvMachine *{animation:none!important;transition:none!important}}.gkRvKeep{font-size:12px;color:#493d32;margin:6px 0}.gkRvKeep.isWarn{color:#9c4435;font-weight:800}
.gkRecycleQuantity{display:flex;gap:6px;align-items:center}.gkRecycleQuantity button{min-width:44px;min-height:44px;background:#f6e6c3;color:#493d32;border:2px solid #5b4433;border-radius:8px;font:800 16px system-ui;touch-action:manipulation}.gkRecycleQuantity button:last-child{margin-left:auto;font-size:12px}.gkRecycleQuantity output{min-width:38px;text-align:center;font-size:22px;font-weight:900}
.gkRecycleValue,.gkRecycleTime{font-weight:900;color:#8b5510}.gkRecycleStart{width:100%;min-height:48px!important;white-space:normal!important}.gkSchrottInfo button:disabled{opacity:.5;cursor:default;filter:saturate(.3)}.gkSchrottInfo progress{width:100%;height:18px;accent-color:#47653a}.gkRecycleHint{font-size:12px;color:#493d32}.gkRecycleCosts{margin-top:14px;border-top:1px solid #a77c52;padding-top:8px}.gkRecycleCosts summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:800;color:#493d32}
@media(max-height:500px){.gkRecycleHead{margin-bottom:4px}.gkRecycleHead h4{font-size:14px}.gkRecycleHead span:not(.gkRecycleGear){display:none}.gkRecycleGear{width:28px;height:28px;font-size:20px;border-radius:8px}.gkRvPart{width:48px;height:48px}.gkRvPart img{padding:4px}.gkRvMachine{margin:4px 0;padding:6px 10px 12px}.gkRvIn img{width:34px;height:34px}.gkRvGear{font-size:28px}.gkRecycleQuantity{margin-top:4px}.gkRecycleValue,.gkRecycleTime{margin:4px 0}.gkSchrottInfo>p{font-size:11px;margin:4px 0}}@media(max-height:400px){.gkSchrottInfo:has(.gkRvParts) .gkRecycleHead{display:none}.gkRvPart{width:44px;height:44px}.gkRvPart em{display:none}.gkRvParts{padding-top:6px}.gkRvMachine{padding:4px 10px 10px}.gkRvIn img{width:28px;height:28px}.gkRvKeep{margin:3px 0}}
/* TESTLAUF 28.09.2026: gesperrte Bereiche sichtbar, aber gedaempft (meta.js TESTLAUF_SPERRE). */
.gkHubCard.isBald{filter:grayscale(.85);opacity:.62}.gkHubCard.isBald small{display:block!important;color:#8b5510!important;letter-spacing:.08em}.gkHubCard.isBald .gkHubArrow{visibility:hidden}.gkHubNavBtn.isBald{opacity:.42;filter:grayscale(1)}
.gkHubCard.isBald .gkHubCardCopy small::after{content:" · im Testlauf noch gesperrt";letter-spacing:.04em;text-transform:none}

/* Kevin 28.09.2026: Rohrzustand wie ein ablaufender Tank - das Mini-Rohr ist innen gefuellt (gruen -> gelb -> rot),
   die Fuellung schrumpft von rechts nach links; leeres Rohr dunkel. Groesser, damit es nicht untergeht. */
#fahrt-ui #pipeBox .rohrMini, #fahrt-ui #pipeBox #pipeFill.rohrMini { width:128px; height:26px; }
#pipeBox .rohrMini .rmLeer { fill:#5b5145; }
#pipeBox .rohrMini .rmFuell { fill:var(--pipe-tone); transform-box:fill-box; transform-origin:left center; transform:scaleX(var(--pipe-f,1)); transition:transform .25s linear, fill .3s; }
#pipeBox .rohrMini .rmKoerper, #pipeBox[data-zustand] .rohrMini .rmKoerper { fill:transparent; stroke:#493d32; stroke-width:1.4; }
#fahrt-ui #pipeBox { --pipe-tone:#3fcf5f; }
#fahrt-ui #pipeBox[data-zustand="warn"] { --pipe-tone:#f2b233; }
#fahrt-ui #pipeBox[data-zustand="kritisch"] { --pipe-tone:#ff4a3d; }
@media (prefers-reduced-motion: reduce) { #pipeBox .rohrMini .rmFuell { transition:none; } }
/* Einsteiger-Paket 29.09.2026 (Tester: "Finger wo klicke ich? Joystick?"): sichtbarer Daumen-Stick.
   Masse: Optik-Radius 46 (Kevin 30.09.: 'viel zu gross, gerne dezenter'; hud.js skaliert den Zug 70 -> 46), Innenkreis 16 = Totzone. Nur transform/opacity bewegen;
   hud.js setzt translate(x,y) am Aufsetzpunkt, --gas (0..1) und --dreh (Zugrichtung). */
#stick { position: fixed; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; z-index: 6;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .18s ease-out;
  background: radial-gradient(circle, rgba(73,56,44,.08) 0 52%, rgba(73,56,44,.28) 100%);
  border: 1.5px solid rgba(255,244,216,.5); box-shadow: 0 0 0 1px rgba(91,68,51,.4), inset 0 0 0 1px rgba(91,68,51,.22); }
#stick.isAn { opacity: 1; transition: opacity .06s linear; }
#stick i { position: absolute; display: block; pointer-events: none; }
#stick .stickGas { inset: 3px; border-radius: 50%; transform: scale(var(--gas, 0));
  background: radial-gradient(circle, rgba(127,224,138,.08) 0 38%, rgba(127,224,138,.34) 72%, rgba(127,224,138,.62) 100%); }
#stick .stickTot { left: 38px; top: 38px; width: 16px; height: 16px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; border: 1px solid rgba(255,244,216,.4); }
#stick .stickPfeil { inset: -2px; z-index: 1; transform: rotate(var(--dreh, 0rad)); opacity: 0; transition: opacity .12s; }
#stick .stickPfeil::before { content: ''; position: absolute; right: -14px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: #7fe08a; border: 1.5px solid #49382c; }   /* FLUG-PFEILLOS-1019 (Kevin: keine Pfeile): runde Griffnase statt Dreieck, die Zugrichtung zeigt der Knubbel */
#stick.hatGas .stickPfeil { opacity: 1; }
#stickKnubbel { left: 31px; top: 31px; width: 30px; height: 30px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 36% 30%, #fff6c8 0 10%, var(--brassL) 38%, #c8952e 78%, #8f6519 100%);
  border: 2px solid #5b4433; box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.2); }
#stickKnubbel::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(91,68,51,.28); box-shadow: inset 0 1px 0 rgba(255,246,200,.6); }
/* Doppeltipp: kurze Welle an der Tippstelle (Drallwechsel / Katapult / Stoss im Flug) */
#stickPuls { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 6; border-radius: 50%;
  border: 3px solid #fff4d8; box-shadow: 0 0 0 2px rgba(91,68,51,.5); opacity: 0; pointer-events: none; }
#stickPuls.isPuls { animation: stickWelle .42s ease-out; }
@keyframes stickWelle { 0% { opacity: .95; scale: .45; } 100% { opacity: 0; scale: 1.7; } }
@media (prefers-reduced-motion: reduce) { #stick, #stick .stickPfeil { transition: none; } #stickPuls.isPuls { animation: none; } }

/* Geister-Hand: Gustavs gelber Handschuh zeigt die Geste einmal vor, 2,8 s Schleife. Grundzustand (ohne Animation,
   also auch bei reduced-motion via Regel oben "#fahrt-ui *") = das Zieh-Bild: Ring da, Knubbel und Hand rechts. */
#fahrt-ui #geistHand { position: absolute; left: 50%; top: 52%; width: 230px; margin: -90px 0 0 -115px; z-index: 4;
  pointer-events: none; display: flex; flex-direction: column; align-items: center; animation: ghEin .35s ease-out; }
#fahrt-ui #geistHand[hidden] { display: none; }
:is(#geistHand, #einst) .ghBuehne { position: relative; width: 200px; height: 134px; }
:is(#geistHand, #einst) .ghRing { position: absolute; left: 30px; top: 8px; width: 104px; height: 104px; border-radius: 50%; display: block;
  background: radial-gradient(circle, rgba(73,56,44,.14) 0 52%, rgba(73,56,44,.4) 100%);
  border: 2px solid rgba(255,244,216,.75); box-shadow: 0 0 0 1.5px rgba(91,68,51,.6); animation: ghRing 2.8s ease-in-out infinite; }
:is(#geistHand, #einst) .ghGas { position: absolute; inset: 3px; border-radius: 50%; display: block; transform: scale(.72);
  background: radial-gradient(circle, rgba(127,224,138,.08) 0 38%, rgba(127,224,138,.34) 72%, rgba(127,224,138,.62) 100%); animation: ghGas 2.8s ease-in-out infinite; }
:is(#geistHand, #einst) .ghKnubbel { position: absolute; left: 33px; top: 33px; width: 34px; height: 34px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 36% 30%, #fff6c8 0 10%, var(--brassL) 38%, #c8952e 78%, #8f6519 100%);
  border: 2px solid #5b4433; box-shadow: 0 2px 4px rgba(0,0,0,.4); transform: translateX(40px); animation: ghZug 2.8s ease-in-out infinite; }
:is(#geistHand, #einst) .ghHand { position: absolute; left: 61.8px; top: 55.8px; width: 60px; height: 79px; overflow: visible;
  transform: translateX(40px); animation: ghHand 2.8s ease-in-out infinite; }
#geistHand .ghText { margin-top: 2px; padding: 5px 12px 6px; border-radius: 12px; background: rgba(12,9,5,.8); border: 1px solid rgba(246,183,60,.55);
  color: #fff4d8; text-align: center; font: 800 14px/1.25 'Bahnschrift', 'Segoe UI Semibold', system-ui, sans-serif; text-shadow:none; }
#geistHand .ghText b { display: block; color: #f6b73c; }
#geistHand .ghText small { display: none; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #fff4d8; max-width: 240px; }
#geistHand.isNeu .ghText small { display: block; }
@keyframes ghEin { from { opacity: 0; } to { opacity: 1; } }
@keyframes ghHand { 0% { transform: translate(0, -16px); opacity: 0; } 10% { transform: translate(0, -16px); opacity: 1; }
  20%, 30% { transform: translate(0, 0); } 62%, 78% { transform: translate(40px, 0); opacity: 1; }
  88% { transform: translate(40px, -16px); opacity: 1; } 100% { transform: translate(40px, -16px); opacity: 0; } }
@keyframes ghRing { 0%, 19% { opacity: 0; transform: scale(.55); } 26% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }
@keyframes ghZug { 0%, 30% { transform: translateX(0); } 62%, 100% { transform: translateX(40px); } }
@keyframes ghGas { 0%, 30% { transform: scale(0); } 62%, 100% { transform: scale(.72); } }
@media (max-height: 380px) { #fahrt-ui #geistHand { transform: scale(.86); } }
:is(#geistHand, #einst) .ghRing::after { content: ''; position: absolute; right: -12px; top: 50%; margin-top: -8px; border-left: 12px solid #7fe08a;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(1px 0 0 #49382c) drop-shadow(0 1px 0 #49382c) drop-shadow(0 -1px 0 #49382c);
  animation: ghPfeil 2.8s ease-in-out infinite; }
@keyframes ghPfeil { 0%, 34% { opacity: 0; } 44%, 100% { opacity: 1; } }

/* Einsteiger-Paket 29.09.2026 (Tester: "Ich kenn mich nicht aus / Ich bin Rohrreiniger? / Wie funktioniert das Spiel?"):
   #einst = "Bist du vom Fach?" + drei "So geht's"-Karten (Markup index.html, Schalter meta.js). Hub-Optik (gkHubCard/gkBtn),
   gruen = Hauptaktion. Ueber ZWEITE LUFT (410); Raender mit env(safe-area-inset-*) wie #zweiteChance (Notch). */
#einst { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; overflow-y: auto; outline: none;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 28% 40%, rgba(91,68,51,.92), rgba(43,28,16,.98) 72%); color: var(--gk-cream); font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  animation: einstRein .28s ease-out; }
#einst[hidden], #einst [hidden] { display: none !important; }
#einst .nurProfi, #einst.isProfi .nurNeu { display: none; }
#einst.isProfi .nurProfi { display: block; }
.einstKicker { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #f6b73c; color: #493d32; font: 900 11px/1.2 system-ui, sans-serif; letter-spacing: .12em; }
.einstKlein { min-height: 44px; padding: 6px 14px; border: 2px solid rgba(255,244,216,.55); border-radius: 12px; background: rgba(73,56,44,.55); color: #fff4d8;
  font: 800 13px/1.1 system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; touch-action: manipulation; }
.einstKlein:active { transform: translateY(2px); }
#einst button:focus-visible { outline: 3px solid #f6c865; outline-offset: 3px; }
/* Seite 1: die Frage */
#einstFrage { display: grid; grid-template-columns: auto minmax(0, 520px); align-items: center; gap: clamp(10px, 3vw, 36px); width: min(100%, 860px); }
.einstGustav { position: relative; width: clamp(110px, 24vw, 230px); }
.einstGustav img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45));
  transform-origin: 50% 95%; animation: einstWinken 2.4s ease-in-out infinite; }
.einstBlase { position: absolute; right: -8px; top: 2%; padding: 5px 11px; border-radius: 14px 14px 14px 3px; background: #fff9e8; color: #493d32;
  border: 2px solid #5b4433; font: 900 16px/1 'Gustav Display', system-ui, sans-serif; box-shadow: 0 3px 0 rgba(0,0,0,.35); animation: einstBlase 2.4s ease-in-out infinite; }
.einstText { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
#einstTitel { font: 900 clamp(26px, 4.4vw, 44px)/1.05 'Gustav Display', system-ui, sans-serif; color: #fff4d8; text-shadow:none; letter-spacing: .01em; }
.einstSatz { font: 700 clamp(13px, 1.6vw, 17px)/1.35 system-ui, sans-serif; color: #e8efe9; max-width: 480px; }
.einstSatz b { color: #f6b73c; }
.einstWahl { display: flex; flex-direction: column; gap: 9px; width: 100%; }
#einst .gkBtn.gkHubCard { flex: none; min-height: 74px; padding: 9px 14px; gap: 12px; }
#einst .gkHubCardCopy strong { font-size: clamp(21px, 2.8vw, 32px); }
#einst .gkHubCardCopy > span { font-size: clamp(12px, 1.35vw, 16px); }
#einst .gkHubArrow { font-size: 32px; }
.einstIco { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid #fff7; border-radius: 50%; background: #49382c40; font-size: 24px; transform: rotate(-8deg); }
.einstProfi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%; }
.einstProfi .einstSatz { flex: 1 0 100%; }
#einst .einstProfi .gkBtn { min-height: 56px; padding: 0 26px; font-size: clamp(20px, 2.6vw, 28px); }
.einstFair { display: block; margin-top: 2px; font: 700 11.5px/1.3 system-ui, sans-serif; color: #ead4aa; }
.einstFair::before { content: '⚖ '; color: #f6b73c; }
/* Seite 2: So geht's (wischbar per scroll-snap; meta.js liest nur die Position fuer Punkte/WEITER) */
#einstKarten { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; width: min(100%, 900px); height: min(100%, 520px); }
.ekKopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ekSpur { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x;
  border-radius: 20px; }
.ekSpur::-webkit-scrollbar { display: none; }
.ekKarte { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center;
  gap: clamp(10px, 2.4vw, 26px); padding: clamp(10px, 2vw, 20px); background: #fff9e8; color: var(--gk-ink); border: 4px solid var(--gk-ink); border-radius: 20px;
  box-shadow: inset 0 3px 0 #fff; }
.ekBild { position: relative; height: 100%; min-height: 120px; max-height: 280px; display: grid; place-items: center; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #765641, #49382c 75%); border: 3px solid #5b4433; }
.ekCopy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ekCopy small { font: 900 11px/1.2 system-ui, sans-serif; letter-spacing: .12em; color: #8b5510; }
.ekCopy h3 { font: 900 clamp(20px, 2.9vw, 30px)/1.08 'Gustav Display', system-ui, sans-serif; color: #c7463c; }
.ekCopy p, .ekCopy li { font: 700 clamp(13px, 1.55vw, 17px)/1.38 system-ui, sans-serif; }
.ekCopy ul { list-style: none; display: grid; gap: 5px; }
#einst.isProfi .ekCopy ul.nurProfi { display: grid; }
.ekCopy b { color: #493d32; }
.ekFuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ekPunkte { display: flex; gap: 8px; padding-left: 4px; }
.ekPunkte i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,244,216,.3); border: 2px solid rgba(255,244,216,.55); transition: width .2s, background .2s; }
.ekPunkte i.isAn { width: 28px; border-radius: 7px; background: #f6b73c; border-color: #fff4d8; }
#einst .ekWeiter { min-height: 52px; min-width: 170px; padding: 0 22px; font-size: clamp(18px, 2.3vw, 24px); }
/* Bild 1: Rohr mit Dreck, Wasser steigt, Kopf rueckt an */
.ekRohr::before { content: ''; position: absolute; left: -6%; right: -6%; top: 26%; height: 44%; border-radius: 40px; background: linear-gradient(#8b8070, #5b5145 55%, #5b5145);
  border: 3px solid #5b5145; box-shadow: inset 0 6px 0 rgba(255,255,255,.18), inset 0 -8px 12px rgba(0,0,0,.45); }
.ekWasser { position: absolute; left: -6%; right: -6%; bottom: 30%; height: 24%; border-radius: 0 0 40px 40px; transform-origin: 50% 100%;
  background: linear-gradient(rgba(94,196,230,.85), rgba(30,110,160,.9)); animation: ekWasser 3.2s ease-in-out infinite; }
.ekDreck { position: absolute; right: 18%; top: 30%; width: 34%; height: 36%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ekFraeskopf { position: absolute; left: 4%; top: 36%; width: 28%; height: 24%; object-fit: contain; animation: ekVor 3.2s ease-in-out infinite; }
.ekKeller { position: absolute; left: 8px; bottom: 7px; padding: 2px 7px; border-radius: 6px; background: #c7463c; color: #fff; font: 900 10px/1.2 system-ui, sans-serif; letter-spacing: .1em; }
.ekKeller::before { content: '💧 '; }
/* Bild 2: der Daumen-Stick aus der Fahrt, gleiche Schleife wie die Geister-Hand */
#einst .ghBuehne { width: 200px; height: 134px; transform: translate(10px, 4px); }
/* Bild 3: Kurzliner + Koepfe, der passende leuchtet gruen */
.ekWerkzeug { grid-template-rows: 1fr auto; gap: 6px; padding: 10px; }
.ekLiner { width: min(70%, 150px); height: auto; animation: ekGlanz 1.8s ease-in-out infinite; }
.ekKoepfe { display: flex; gap: 6px; }
.ekKoepfe img { width: 38px; height: 38px; object-fit: contain; padding: 3px; border-radius: 10px; background: #49382c; border: 2px solid #5b4433; opacity: .8; }
.ekKoepfe img.isPasst { opacity: 1; border-color: #5be08a; box-shadow: 0 0 0 2px #5be08a88, 0 0 14px #5be08a; animation: ekPuls 1.2s ease-in-out infinite; }
@keyframes einstRein { from { opacity: 0; } to { opacity: 1; } }
@keyframes einstWinken { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes einstBlase { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes ekWasser { 0%, 100% { transform: scaleY(.55); } 60% { transform: scaleY(1.2); } }
@keyframes ekVor { 0%, 10% { transform: translateX(0) rotate(0); } 70%, 100% { transform: translateX(55%) rotate(8deg); } }
@keyframes ekGlanz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ekPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* Kleine Querformate (640x360, 667x375): Gustav kleiner, Karten flacher */
@media (max-height: 420px) {
  #einstFrage { gap: 12px; } .einstGustav { width: clamp(96px, 19vw, 150px); } .einstText { gap: 5px; }
  #einst .gkBtn.gkHubCard { min-height: 62px; padding: 6px 12px; } .einstIco { flex-basis: 38px; width: 38px; height: 38px; font-size: 20px; }
  #einstKarten { gap: 6px; } .ekCopy { gap: 3px; } #einst .ekWeiter { min-height: 46px; }
  #einst .ghBuehne { transform: translate(6px, 4px) scale(.82); }
}
@media (max-width: 560px) { #einstFrage { grid-template-columns: minmax(0, 1fr); } .einstGustav { display: none; } }
@media (prefers-reduced-motion: reduce) { #einst, #einst *, #einst .ghBuehne * { animation: none !important; transition: none !important; } }
/* "?" im Fahrt-HUD: gleiche Kachel wie #muteBtn, rechts neben ZUR ZENTRALE; links mit env(safe-area-inset-left) (Notch) */
#hilfeBtn { position: absolute; top: 8px; left: calc(208px + env(safe-area-inset-left, 0px)); z-index: 6; width: 44px; height: 44px; border-radius: 11px;
  background: var(--hud); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--hudSh); color: #7a4e26; font: 900 22px/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
#hilfeBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hudSh); }
@media (max-width: 700px), (max-height: 560px) { #hilfeBtn { left: calc(202px + env(safe-area-inset-left, 0px)); border-width: 2px; } }
/* Zahnrad: Hilfe & Erklaerungen */
.gkModalBody .gkSettingKopf { margin-top: 12px; }
.gkModusWahl > span:last-child { display: flex; gap: 6px; }
.gkModalBody .gkModusWahl .gkBtn { min-height: 40px; padding: 0 12px; font-size: 14px; border-width: 2px; }
.gkSettingFair { margin-top: 6px !important; color: #493d32; font-weight: 700; }
.gkSettingHilfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.gkSettingHilfe .gkBtn { min-height: 44px; padding: 0 14px; font-size: 15px; }
/* Einsteiger-Paket 29.09.2026: Tutorial-Streifen beginnt rechts neben Ton/ZUR ZENTRALE/"?" statt mittig darueber (Beleg iPhone 844x390: er fing die Tipps auf "?" ab). Unter 701 px liegt er ohnehin darunter (top 60px). */
@media (min-width: 701px) and (max-width: 1400px) { #tutorial { left: calc(256px + env(safe-area-inset-left, 0px)); transform: none; max-width: calc(100vw - 440px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); } }
/* ==== Einsteiger-Paket 29.09.2026 Stufe 4: Begriffe im Spiel ====
   Einsteiger sieht das einfache Wort gross und das Fachwort klein darunter; Profi sieht alles wie bisher.
   [data-begriff]: meta.js setzt <b>Einfach</b><small>Fach</small>. [data-klein]: hud.js setzt die Fachwoerter, CSS zeigt sie klein. */
[data-begriff] > b { font-weight: inherit; }
[data-begriff] > small { display: block; font-size: .8em; font-weight: 700; font-style: normal; letter-spacing: .02em; text-transform: none; opacity: .75; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meterBox .mLbl [data-begriff] > small, #fahrt-ui #vorratTitel > small { display: inline; margin-left: 5px; font-size: .95em; }
.toolBtn.active .tName[data-begriff] > b { letter-spacing: -.2px; }
.toolBtn.active .tName[data-begriff] > small { font-size: 7.5px; opacity: .8; }
#fahrt-ui #vorrat #fixerBtn [data-begriff] > b { font-size: .86em; letter-spacing: 0; }
#fahrt-ui #vorrat #fixerBtn [data-begriff] > small { font-size: 8px; }
:is(#matBanner, #stauHud, #seGrund, #seTipp)[data-klein]:not([data-klein=""])::after { content: attr(data-klein); display: block; font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .02em; text-transform: none; opacity: .78; }
#seGrund[data-klein]:not([data-klein=""])::after { font-size: 13px; color: #ffd8c9; text-shadow:none; }
#riserAlarm[data-klein]:not([data-klein=""]) { flex-direction: column; justify-content: flex-start; align-items: center; }
#riserAlarm:not(:empty)[data-klein]:not([data-klein=""])::after { content: attr(data-klein); display: block; margin-top: 4px; font: 800 13px/1.2 system-ui, sans-serif; letter-spacing: .03em; -webkit-text-stroke: 0; color: #fff; text-shadow:none; }
#kurzlinerAnz[data-klein]:not([data-klein=""])::before { content: attr(data-klein); position: absolute; left: 10px; top: -14px; font: 800 10px/1 system-ui, sans-serif; letter-spacing: .04em; color: #9ff0bb; text-shadow:none; white-space: nowrap; }
/* Werkstatt: Kartentitel einfach gross, Fachwort klein; in der Sprechblase zusaetzlich der Erklaersatz (gruen). */
.gkCard .h[class] small, .gkBlase h4 small { display: block; font: 700 max(8px, calc(.72 * var(--su))) system-ui, sans-serif; letter-spacing: .02em; text-transform: none; text-shadow:none; opacity: .85; }
.gkCard .h b { font-weight: inherit; hyphens: auto; -webkit-hyphens: auto; }   /* Fund karten-zentrale-6: STOSS-BREMSE statt Abschnitt am Kartenrand */
.gkBegriffSatz { display: block; margin-top: 4px; font-style: normal; font-weight: 700; color: #1f7a3d; }
/* Aha-Karte: klein oben rechts, nie mitten im Spielfeld; Tippen schliesst. */
#ahaKarte { position: fixed; z-index: 395; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); width: min(300px, 42vw);
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 12px 10px; border-radius: 14px; background: #fff8e6; color: #493d32;
  border: 3px solid #5b4433; box-shadow: 0 4px 0 #5b4433, 0 8px 22px rgba(0,0,0,.35); cursor: pointer; animation: ahaRein .38s cubic-bezier(.2,1.5,.4,1) both; }
#ahaKarte[hidden], body.gg-h-ende:not(#gg-nie) #ahaKarte, body.gg-h-einst:not(#gg-nie) #ahaKarte, body.gg-h-lern:not(#gg-nie) #ahaKarte, body.gg-h-knot:not(#gg-nie) #ahaKarte { display: none; }
/* AHA links unter der Navigation; rechts bleiben Reinigungs-Schild und Nothelfer frei. */
body.gg-h-rein:not(#gg-nie) #ahaKarte { top: calc(66px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); right: auto; }
/* 29.09.2026 Einsteiger-Paket (Notch-Stufe): mit Notch rechts rückt die Karte nach innen – nie über die mittige Punkteleiste (#hudTop). */
#ahaKarte { max-width: calc(50vw - 120px - env(safe-area-inset-right, 0px)); }
.ahaKicker { grid-row: 1 / span 2; align-self: start; padding: 3px 6px; border: 2px solid #5b4433; border-radius: 8px; background: #f6c431; font: 900 11px/1 system-ui, sans-serif; letter-spacing: .06em; }
#ahaKarte b { font: 900 17px/1.1 'Gustav Display', system-ui, sans-serif; color: #c7463c; }
#ahaKarte small { grid-column: 2; font: 700 11px/1.2 system-ui, sans-serif; color: #493d32; }
#ahaKarte small:empty { display: none; }
#ahaKarte p { grid-column: 1 / -1; margin: 6px 0 0; font: 700 12.5px/1.32 system-ui, sans-serif; }
@keyframes ahaRein { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #ahaKarte { animation: none; } }
@media (max-height: 380px) { #ahaKarte { padding: 6px 10px 8px; } #ahaKarte b { font-size: 15px; } #ahaKarte p { font-size: 11.5px; margin-top: 4px; } }
/* schmale Schirme (640 px): Karte schmaler, damit sie die Punkte-/Combo-Leiste oben in der Mitte frei laesst; Werkstatt-Titel etwas kleiner (BIEGSAMKEIT, STOSSBREMSE). */
@media (max-width: 760px) { #ahaKarte { width: 33vw; column-gap: 6px; } #ahaKarte b { font-size: 14px; } #ahaKarte small { font-size: 10px; } #ahaKarte p { font-size: 11px; line-height: 1.28; } .ahaKicker { font-size: 10px; padding: 2px 5px; } .gkCard .h b { font-size: .8em; } }
/* Browserleisten: links vor den mittigen Messgeraeten bleiben, kompakt ohne Textverlust. */
@media (max-width: 800px) and (max-height: 340px) {
  #ahaKarte { max-width: calc(50vw - 160px - env(safe-area-inset-left, 0px)); padding: 6px 8px 8px; column-gap: 5px; }
  #ahaKarte b { font-size: 13px; overflow-wrap: anywhere; }
  #ahaKarte p { font-size: 11px; line-height: 1.2; margin-top: 4px; }
  #ahaKarte .ahaKicker { font-size: 9px; padding: 2px 4px; }
}
/* Begriffe von A bis Z: ueber Zahnrad-Modal und So-geht's-Karten (z 430). */
#lexikon { position: fixed; inset: 0; z-index: 430; display: grid; place-items: center; outline: none; background: rgba(66,43,27,.65); backdrop-filter: blur(3px);
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  animation: einstRein .25s ease-out; }
#lexikon[hidden] { display: none; }
.lexBox { width: min(780px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff8e6; color: var(--gk-ink); border: 4px solid var(--gk-ink); border-radius: 18px; box-shadow: 0 6px 0 var(--gk-ink); }
.lexKopf { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: linear-gradient(#ffe19a,#d2a14c); }
.lexKopf h2 { flex: 1 1 auto; min-width: 0; margin: 0; font: 900 clamp(16px, 2.4vw, 24px)/1.1 'Gustav Display', system-ui, sans-serif; color: var(--gk-ink); letter-spacing: .02em; }
.lexSuche { flex: 0 1 230px; min-width: 0; height: 40px; padding: 0 12px; border: 2px solid var(--gk-ink); border-radius: 10px; background: #fff; color: #493d32; font: 700 15px system-ui, sans-serif; }
.lexZu { flex: none; width: 44px; height: 44px; border: 3px solid var(--gk-ink); border-radius: 10px; background: #d9534a; color: #fff; font: 900 26px/1 system-ui, sans-serif; box-shadow: 0 3px 0 var(--gk-ink); cursor: pointer; }
.lexIntro { margin: 8px 14px 0; font: 700 12px/1.35 system-ui, sans-serif; color: #493d32; }
.lexListe { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding: 0 14px 14px; }
.lexListe h3 { position: sticky; top: 0; z-index: 1; margin: 8px 0 2px; padding: 6px 0 4px; background: #fff8e6; border-bottom: 2px solid #f0dcae; font: 900 13px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b5510; }
.lexListe section:not(:has(dl:not([hidden]))) { display: none; }
.lexListe dl { display: grid; grid-template-columns: minmax(130px, 24%) 1fr; gap: 12px; margin: 0; padding: 7px 0; border-bottom: 1px dashed #e8d6ae; }
.lexListe dl[hidden] { display: none; }
.lexListe dt { font: 900 14px/1.3 system-ui, sans-serif; color: #493d32; }
.lexListe dd { margin: 0; font: 600 13px/1.38 system-ui, sans-serif; }
.lexListe dd b { margin-right: 2px; color: #1f7a3d; }
.lexListe dd b::after { content: ' –'; color: #493d32; }
@media (max-width: 700px), (max-height: 380px) { .lexIntro { display: none; } .lexListe dl { grid-template-columns: minmax(110px, 28%) 1fr; gap: 8px; padding: 5px 0; } .lexListe dd { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #lexikon { animation: none !important; } }
#einst .ekLex { align-self: flex-start; margin-top: 4px; min-height: 40px; padding: 0 14px; border: 2px solid var(--gk-ink); border-radius: 12px; background: var(--gk-cream); color: var(--gk-ink); font: 800 13px/1 system-ui, sans-serif; box-shadow: 0 3px 0 var(--gk-ink); cursor: pointer; }
/* 29.09.2026 Einsteiger-Paket (Notch): Messprobe fürs Canvas-Flug-HUD – flug_world.js sicherRand() liest dieses Padding einmal je resize/orientationchange. */
.saRand { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* ==== RUNDGANG 30.09.2026 (Kevin: "RICHTIGES Tutorial, abschaltbar, wo alles erklaert wird") ====
   #rundgang liegt ueber allem Erklaerbaren (Schichtende 400, Zweite Luft 410, #einst 420 -> 430), Padding = Safe-Area (meta.js liest es als Rand fuer die Karte).
   #rgMaske sperrt Tipps ausserhalb des Lochs (clip-path aus meta.js), #rgLoch = weicher goldener Rand um das echte Element; bei .isTipp laesst es den Tipp durch.
   Karte: Gustav spricht (Bild wie bei der Fach-Frage), Kicker + Zaehler, Titel, ein bis zwei Saetze, WEITER/FERTIG gruen, "Rundgang aus" klein. Max. 46 vw (640x360). */
#rundgang { position: fixed; inset: 0; z-index: 430; pointer-events: none; box-sizing: border-box; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  padding: max(6px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
#rundgang[hidden] { display: none; }
#rgMaske { position: absolute; inset: 0; background: rgba(73, 56, 44, .68); pointer-events: auto; }
#rgLoch { position: absolute; border-radius: 12px; pointer-events: auto; box-shadow: 0 0 0 3px #f6c865, 0 0 0 7px rgba(246, 200, 101, .32), 0 0 26px 10px rgba(0, 0, 0, .55), inset 0 0 14px rgba(255, 236, 170, .25);
  animation: rgPuls 1.5s ease-in-out infinite; }
#rgLoch.isTipp { pointer-events: none; }
#rgLoch.isTipp::after { content: '👆'; position: absolute; right: -6px; bottom: -8px; font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); animation: rgTipp 1.1s ease-in-out infinite; }
#rgKarte { position: absolute; width: min(46vw, 330px); pointer-events: auto; display: flex; align-items: flex-end; gap: 6px; outline: none; transition: left .22s ease-out, top .22s ease-out; }
#rgKarte .rgGustav { flex: none; width: 58px; height: auto; filter: drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
#rgKarte .rgText { flex: 1 1 auto; min-width: 0; position: relative; padding: 8px 10px 9px; border-radius: 14px 14px 14px 4px; background: #fff9e8; color: #493d32; border: 2px solid #5b4433;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.45); display: grid; gap: 4px; }
#rgKarte .rgKopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#rgKarte .rgKopf .einstKicker { font-size: 10px; padding: 2px 8px; }
#rgZaehler { font: 900 12px/1 system-ui, sans-serif; color: #493d32; letter-spacing: .06em; }
#rgTitel { margin: 0; font: 900 17px/1.1 'Gustav Display', system-ui, sans-serif; color: #c7463c; }
#rgSatz { margin: 0; font: 700 12.5px/1.32 system-ui, sans-serif; }
#rgKarte .rgKnoepfe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }   /* schmale Karte neben grossem Ziel: "Rundgang aus" rutscht in die zweite Zeile statt zu brechen */
#rgKarte .rgWeiter { min-height: 40px; padding: 0 18px; border-radius: 10px; border: 2px solid #5b4433; color: #fff; text-shadow:none; cursor: pointer; touch-action: manipulation;
  font: 900 15px/1 'Gustav Display', system-ui, sans-serif; letter-spacing: .05em; background: linear-gradient(#65cf58 0 18%, #3fb43e 19% 66%, #2b8b34 67% 100%); box-shadow: 0 3px 0 #1f6a2a; }
#rgKarte .rgWeiter:active { transform: translateY(2px); box-shadow: 0 1px 0 #1f6a2a; }
#rgKarte .rgAus { min-height: 32px; padding: 4px 8px; font-size: 11px; color: #493d32; background: transparent; border-color: rgba(91,68,51,.35); white-space: nowrap; }
#rgKarte button:focus-visible { outline: 3px solid #f6c865; outline-offset: 2px; }
#rgToast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: #fff9e8; color: #493d32; border: 2px solid #5b4433;
  font: 800 13px/1.2 system-ui, sans-serif; box-shadow: 0 4px 0 rgba(0,0,0,.35); white-space: nowrap; display: none; }
#rundgang.isToast > :not(#rgToast) { display: none; } #rundgang.isToast #rgToast { display: block; animation: einstRein .25s ease-out; }
@keyframes rgPuls { 0%, 100% { box-shadow: 0 0 0 3px #f6c865, 0 0 0 7px rgba(246,200,101,.32), 0 0 26px 10px rgba(0,0,0,.55), inset 0 0 14px rgba(255,236,170,.25); }
  50% { box-shadow: 0 0 0 4px #ffd98a, 0 0 0 10px rgba(246,200,101,.18), 0 0 30px 12px rgba(0,0,0,.55), inset 0 0 18px rgba(255,236,170,.4); } }
@keyframes rgTipp { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -5px); } }
@media (max-height: 420px) { #rgKarte .rgGustav { width: 48px; } #rgKarte .rgText { padding: 6px 8px 7px; gap: 3px; } #rgTitel { font-size: 15px; } #rgSatz { font-size: 11.5px; } #rgKarte .rgWeiter { min-height: 36px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { #rundgang, #rundgang * { animation: none !important; transition: none !important; } }
/* 01.10. Meistertafel praesent: Platz-Leiste in der Zentrale ist ein Knopf */
button.gkHubProgress{cursor:pointer;font-family:inherit;width:auto}button.gkHubProgress:hover,button.gkHubProgress:focus-visible{border-color:#f6b73c;color:#fff;outline:none}
/* 04.10. Reinigung zuerst: tools left, contextual extras right, clear centre. */
#fahrt-ui #tools { left: calc(10px + env(safe-area-inset-left, 0px)); right: auto; transform: none; }
#fahrt-ui #vorrat { left: auto; right: calc(12px + env(safe-area-inset-right, 0px)); transform: none; }
#fahrt-ui .vorratPlaetze { gap: 8px; align-items: end; }
#fahrt-ui #vorrat [data-vorrat] { width: 52px; height: 52px; border-radius: 12px; background: #f6e6c3; color: #493d32; border: 3px solid #493d32; box-shadow: 0 4px 0 #5b4433,inset 0 2px 0 #fff8e6; }
#fahrt-ui #vorrat [data-vorrat][data-sorte=""] { display: none; }
#fahrt-ui #vorratTitel { text-align: right; margin: 0 1px 6px 0; font-size: 8px; letter-spacing: 1.3px; }
/* Keep the two risks together, between the independent thumb controls. */
#fahrt-ui #meters { left: 50%; right: auto; transform: translateX(-50%); width: 200px; flex-direction: row; gap: 6px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
#fahrt-ui #meters > :is(#kellerBox, #pipeBox) { flex: 1 1 0; min-width: 0; width: auto; padding: 4px 6px; }
#fahrt-ui #meters .mLbl { color: #624e3a; font-size: 8px; letter-spacing: .4px; font-style: normal; gap: 5px; align-items: flex-start; line-height: 1.2; min-height: 1.2em; }
/* Einsteiger labels own a wrapping column; percentages never compete for its space. */
#fahrt-ui #meters .mLbl > span:first-child { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#fahrt-ui #pipeBox .mLbl > span:first-child { white-space: nowrap; overflow-wrap: normal; flex: 0 0 auto; }   /* Kevin 06.10.: ROHRZUSTAND nie mitten im Wort brechen */
#fahrt-ui #meters > #pipeBox { flex: 1.3 1 0; }
#fahrt-ui #meters > :is(#kellerBox, #pipeBox) .mLbl { font-size: 7.5px; letter-spacing: .15px; }
#fahrt-ui #kellerBox .mLbl > span:first-child { overflow-wrap: normal; }   /* KELLER-PEGEL bricht nur am Bindestrich */
#fahrt-ui #meters .mLbl [data-begriff] > b { display: block; }
#fahrt-ui #meters .mLbl [data-begriff] > small { display: none; }
#fahrt-ui #meters .mLbl > span:last-child { flex: 0 0 4ch; white-space: nowrap; text-align: right; color: #493d32; font-size: 11px; font-variant-numeric: tabular-nums; }
#fahrt-ui #meters #pipeFill.rohrMini { width: 100%; height: 14px; }
@media (max-width: 800px) {
  #fahrt-ui #meters { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  #fahrt-ui #geistHand { left: 50%; top: auto; bottom: calc(160px + env(safe-area-inset-bottom, 0px)); margin-top: 0; transform-origin: center bottom; }
}
/* Werkzeugleiste: zwei klar getrennte Schalter direkt unter dem Reinigungs-Schild. */
#fahrt-ui #slotBtn { right: calc(max(24px, env(safe-area-inset-right, 0px)) + 60px); top: calc(126px + env(safe-area-inset-top, 0px)); /* 1.4.1: links neben dem Special-Koffer statt darueber */ bottom: auto; width: 72px; min-width: 72px; height: 56px; border: 3px solid #493d32; border-radius: 12px; background: #e87558; color: #382d27; font-size: 10px; line-height: 1.15; padding: 0 4px; text-shadow:none; box-shadow: 0 4px 0 #713e30,inset 0 2px 0 #ffb18c; animation: none; }
#fahrt-ui #slotBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #713e30; }
#fahrt-ui #kellerBox { display: block; width: 110px; padding: 7px 8px; border: 3px solid #493d32; border-radius: 10px; background: #f6e6c3; box-shadow: 0 4px 0 #5b4433,inset 0 2px 0 #fff8e6; }
#fahrt-ui #kellerBox .mLbl { font-size: 8px; letter-spacing: .6px; }
#fahrt-ui #kellerBox .barOuter { height: 7px; margin-top: 4px; border: 2px solid #493d32; background: #bdab8d; border-radius: 5px; }
#fahrt-ui #pipeBox { border-width: 3px; border-color: #493d32; border-radius: 10px; background: #f6e6c3; box-shadow: 0 4px 0 #5b4433,inset 0 2px 0 #fff8e6; }
#reinigung-stand { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 12; width: 160px; padding: 8px 10px 9px; border: 3px solid #493d32; border-radius: 12px 12px 16px 12px; background: #fff0ce; box-shadow: 0 4px 0 #5b4433,inset 0 3px 0 #fff9e9; color: #324738; font: 700 13px system-ui,sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
#reinigung-stand .clean-label { display: block; font-size: 9px; font-weight: 900; letter-spacing: 1.2px; color: #68513a; }
#reinigung-stand .clean-number { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: 4px; line-height: 1.15; }
#reinigung-stand strong { white-space: nowrap; font-family: 'Gustav Display', system-ui, sans-serif; font-size: 30px; letter-spacing: -.5px; font-weight: 900; }
#reinigung-stand small { position: absolute; top: 8px; right: 10px; color: #705323; font-size: 10px; line-height: 1.2; white-space: nowrap; }
#reinigung-stand .clean-track { height: 7px; margin-top: 6px; background: #cbb897; border: 1px solid #69533c; border-radius: 4px; overflow: hidden; }
#reinigung-stand .clean-track i { display: block; height: 100%; background: #62944a; transform-origin: left; }
@media(max-height:350px) { #reinigung-stand { padding: 6px 10px; } #reinigung-stand strong { font-size: 26px; } }

/* Nur der Wegweiser sitzt mittig oben; der Weltmarker behaelt seine Projektion. */
#kurzlinerAnz { left: 50% !important; right: auto; top: calc(26px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; margin-left: 0; opacity: .98; pointer-events: none; }
#kurzlinerAnz:not(.imBild) { transform: translateX(-50%) !important; background: #f6e6c3 !important; border: 3px solid #493d32 !important; border-radius: 10px !important; color: #334a34 !important; box-shadow: 0 3px 0 #5b4433; }
#kurzlinerAnz:not(.imBild)[data-klein]::before { color: #fff0ce; }
#kurzlinerAnz:not(.imBild) span { color: #3c703e !important; }
#kurzlinerAnz.imBild { left: 0 !important; right: auto; top: 0 !important; bottom: auto !important; margin-left: 0; opacity: .9; }
#kurzlinerAnz.imBild span { transform: rotate(1.5708rad) !important; }
#fahrt-ui .toolBtn{width:50px;height:50px}#fahrt-ui .toolBtn.active{width:62px;height:62px}#fahrt-ui .toolBtn .uiIco{width:28px;height:28px}#fahrt-ui .toolBtn.active .uiIco{width:34px;height:34px}
/* 01.10. iPhone-Safari niedrig (Kevin/Carsten: Adress- + Tableiste lassen ~300 px): Zentrale/Werkstatt gleichmaessig verkleinern statt quetschen */
@media (max-height:350px){#meta-root{zoom:.86}}@media (max-height:310px){#meta-root{zoom:.78}}
/* KNOTEN DEUTLICH + LERNMOMENT (Kevin 02.10.): Warnschild mit ablaufender Knoten-Uhr, roter Rand; Lernkarte friert die Fahrt ein.
   Beide lassen Taps durch (pointer-events:none) - der Doppeltipp geht an die Spielflaeche. */
#knotWarn{position:fixed;inset:0;z-index:290;pointer-events:none;box-shadow:inset 0 0 0 4px rgba(255,59,59,.85),inset 0 0 60px rgba(255,40,40,.55);animation:kwPuls .45s ease-in-out infinite alternate}
#knotWarn[hidden],#lernMoment[hidden]{display:none} body:not(.gg-h-fahrt):not(#gg-nie) #knotWarn,body.gg-h-ende:not(#gg-nie) #knotWarn{display:none!important} /* 03.11. Kevin: Knoten-Schild blieb nach Schichtende/ueber der Meistertafel stehen */
#knotWarn .kwSchild{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 18px 10px;border:3px solid #5b4433;border-radius:16px;background:#ff3b3b;color:#fff;font:900 clamp(15px,2.6vw,24px)/1.1 'Lilita One','Bahnschrift',system-ui,sans-serif;text-align:center;box-shadow:0 4px 0 #5b4433;letter-spacing:.02em} body.hho-hud #knotWarn .kwSchild{top:calc(92px + env(safe-area-inset-top,0px))}@media(max-height:360px){body.hho-hud #knotWarn .kwSchild{top:calc(80px + env(safe-area-inset-top,0px))}}
#knotWarn .kwSchild span{font:800 clamp(12px,1.8vw,16px)/1.2 system-ui,sans-serif}
#knotWarn .kwSchild i{display:block;width:100%;min-width:180px;height:7px;margin-top:5px;border-radius:9px;background:rgba(0,0,0,.35);overflow:hidden}
#knotWarn .kwSchild u{display:block;height:100%;width:calc((1 - var(--knot,0)) * 100%);background:#ffd24a}
@keyframes kwPuls{from{box-shadow:inset 0 0 0 3px rgba(255,59,59,.6),inset 0 0 40px rgba(255,40,40,.35)}to{box-shadow:inset 0 0 0 6px rgba(255,59,59,.95),inset 0 0 80px rgba(255,40,40,.65)}}
#lernMoment{position:fixed;inset:0;z-index:320;pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(73,56,44,.55)}
#lernMoment .lmKarte{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:min(440px,88vw);padding:14px 22px 16px;border:3px solid #5b4433;border-radius:20px;background:#fff4d8;color:#493d32;text-align:center;box-shadow:0 6px 0 #5b4433;font-family:system-ui,sans-serif}
#lernMoment small{font:900 12px/1 system-ui,sans-serif;letter-spacing:.12em;color:#d22}
#lernMoment b{font:900 clamp(17px,2.6vw,24px)/1.15 'Lilita One','Bahnschrift',system-ui,sans-serif}
#lernMoment strong{padding:6px 14px;border-radius:999px;background:#ff3b3b;color:#fff;font:900 clamp(15px,2.2vw,20px)/1.1 'Lilita One','Bahnschrift',system-ui,sans-serif}
#lernMoment span{font:700 13px/1.3 system-ui,sans-serif;opacity:.85}
#lernMoment .lmHand{margin:0;font-size:clamp(34px,6vw,52px);line-height:1;animation:lmTipp .5s ease-in-out infinite}
@keyframes lmTipp{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(6px) scale(.9)}}
@media (prefers-reduced-motion:reduce){#knotWarn,#lernMoment .lmHand{animation:none}}
/* Lernmomente (02.10.): nur die Knoepfe nehmen Taps, sonst geht alles an die Spielflaeche (Doppeltipp, Kopf, Fixer, Tasche). */
#lernMoment .lmKnoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin-top:6px;pointer-events:auto}
#lernMoment .lmKnoepfe button{border:0;background:none;color:#493d32;font:700 12px/1.2 system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:4px}
#lernMoment .lmKnoepfe .lmOk{display:none;width:100%;padding:8px 16px;border:2px solid #5b4433;border-radius:999px;background:#43c463;color:#493d32;font:900 15px/1 'Lilita One','Bahnschrift',system-ui,sans-serif;text-decoration:none;box-shadow:0 3px 0 #5b4433}
#lernMoment[data-art="tipp"] .lmKnoepfe .lmOk{display:block}
#lernMoment[data-art="tipp"] strong{background:#ffd24a;color:#493d32}
#lernMoment[data-art="kopf"],#lernMoment[data-art="fixer"],#lernMoment[data-art="tasche"]{align-items:flex-start;padding-top:10px;background:transparent}
#lernMoment[data-art="kopf"] .lmKarte,#lernMoment[data-art="fixer"] .lmKarte,#lernMoment[data-art="tasche"] .lmKarte{padding:8px 16px 10px;gap:2px}
body.gg-h-lernkopf.gg-h-lernkopf:not(#gg-nie) .toolBtn.empfohlen,body.gg-h-lernfixer.gg-h-lernfixer:not(#gg-nie) #fixerBtn,body.gg-h-lerntasche.gg-h-lerntasche:not(#gg-nie) #vorrat [data-vorrat]{outline:4px solid #43c463;outline-offset:3px;animation:lmZiel .6s ease-in-out infinite alternate}
@keyframes lmZiel{to{outline-color:#ffd24a;transform:scale(1.08)}}
@media (max-height:350px){#lernMoment .lmKarte{padding:8px 14px 10px;gap:2px}#lernMoment span{font-size:12px}#lernMoment .lmHand{font-size:30px}}

#reinigung-stand .clean-distance { margin-top: 3px; font-size: 10px; color: #68513a; }
#knotWarn .kwSchild span[hidden] { display: none; }

#reinigung-stand { padding: 6px 10px; }
#reinigung-stand strong { font-size: 26px; }
#reinigung-stand small { position: static; margin-left: auto; }

/* ILLUSTRATED-UI-1005: gemalte Werkstattschilder und sichtbare Miniillustrationen. */
#gkMetaRoot .gkGlyph{filter:drop-shadow(0 1px 0 #fff4);flex-shrink:0}
#gkMetaRoot .gkIconBtn .gkGlyph{width:75%;height:75%}
#gkMetaRoot .gkSideBtn .tile{border-radius:24% 24% 18% 18%;background:radial-gradient(ellipse at 45% 35%,#fffdf2 0 40%,#f4deb1 90%);box-shadow:inset 0 3px #fff7,0 4px #8b694a}
#gkMetaRoot .gkSideBtn .tile .gkGlyph{width:78%;height:78%}
#gkMetaRoot .gkTab .gkGlyph,#gkMetaRoot .gkStC .gkDesignTabs .gkGlyph{width:clamp(28px,2.7vw,38px);height:clamp(28px,2.7vw,38px)}#gkMetaRoot .gkStC .gkDesignTabs .gkTab .gkGlyph{width:clamp(22px,2.7vw,38px);height:clamp(22px,2.7vw,38px)}@media(max-width:800px){#gkMetaRoot .gkStC .gkDesignTabs .gkTab{flex-direction:column;justify-content:center;gap:0;padding:2px 4px;line-height:1.1}#gkMetaRoot .gkStC .gkDesignTabs .gkTab .gkGlyph{width:18px;height:18px}}/* Abnahme zentrale-4: Design-Reiter mit Innenabstand, schmale Handys Symbol ueber Wort */
#gkMetaRoot .gkStC .gkRailBtn .gkGlyph{width:24px;height:24px}
#gkMetaRoot .gkHubNavBtn .gkGlyph{width:28px;height:28px}
#gkMetaRoot .gkHubCardIcon{border:0;border-radius:20%;background:radial-gradient(#fff7e4 20%,#fff7e400 72%);transform:rotate(-4deg)}
#gkMetaRoot .gkHubCardIcon .gkGlyph{width:90%;height:90%}
#gkMetaRoot .gkHubSecondary .gkHubCardIcon{width:46px;height:46px;flex-basis:46px}
#gkMetaRoot .gkBtn.gkHubCard{border-radius:22px 22px 18px 8px;box-shadow:inset 0 3px #fffa,0 4px #8b694a}
#gkMetaRoot :is(.gkPanel,.gkSkin,.gkGridCell){border-radius:14px;background-color:#fff6e4;box-shadow:inset 0 2px #fff9,0 3px #9e7c56}
#gkMetaRoot .gkTab{border-radius:12px 12px 5px 5px;background:linear-gradient(#fffaf0,#f0d9ae);box-shadow:inset 0 2px #fff9}
#gkMetaRoot .gkTab[aria-selected='true']{background:linear-gradient(#ffe6a0,#edbc61);box-shadow:inset 0 3px #fff0bc}
#gkMetaRoot .gkStC .gkRailBtn{border-radius:12px}
#gkMetaRoot .gkSkin .sw.gly{box-shadow:inset 0 2px #fff8;background-image:radial-gradient(#fff7e4aa,transparent);border-width:2px}
#gkMetaRoot .gkSkin .sw.gly .gkGlyph{width:85%;height:85%}
.gkWorkshop .gkStA{--gk-karten-h:max(142px,11.4 * var(--su))}
#gkMetaRoot .gkStA .gkCard{grid-template-rows:32px minmax(50px,1fr) 4px 44px;border-width:2px;border-radius:18px 18px 12px 12px;background:#fff7e8;box-shadow:0 4px #987350,0 6px #5b4433}
#gkMetaRoot .gkStA .gkCard .h{background:#f4dfa9;padding:3px;line-height:1.05;border-bottom:1px solid #d6bc88}
#gkMetaRoot .gkStA .gkCard .m{gap:0;justify-content:space-evenly;padding:2px}
#gkMetaRoot .gkStA .gkCard .upgradeIcon{width:clamp(42px,4.3vw,66px);height:clamp(42px,4.3vw,66px);padding:0;border:0;border-radius:12px;background:none;box-shadow:none;object-fit:contain}
#gkMetaRoot .gkStA .gkCard .l{font-size:clamp(15px,1.7vw,26px)}
#gkMetaRoot .gkStA .gkCard .gkPrice{min-height:44px;height:44px;border-top-width:2px}
#gkMetaRoot .gkStA .gkCard .b{height:4px;background:#d2bea0;border:0}
#gkMetaRoot .gkStA .gkCard .b i{background:#6c9d63}
#gkMetaRoot .gkStA .gkCard.isSelected{border-color:#c99032;box-shadow:0 0 0 2px #ffe4a1,0 5px #987350,0 7px #5b4433}
/* Werkstattpost: native Top-Layer, skaliert unabhaengig von der Spielbuehne. */
.ggNews{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(980px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:3px solid #594333;border-radius:20px;background:#fbf0d6;color:#463829;box-shadow:0 12px 0 #35261d55,0 28px 80px #0008;font:16px/1.45 system-ui,sans-serif;overflow:auto;overscroll-behavior:contain}
.ggNews::backdrop{background:#241e19bb;backdrop-filter:blur(5px)}
.ggNewsLayout{display:grid;grid-template-columns:44% 56%}
.ggNewsArt{position:relative;min-height:450px;background:#a77949;overflow:hidden;border-radius:16px 0 0 0}
.ggNewsArt img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.ggNewsArt>span{position:absolute;left:22px;bottom:20px;padding:9px 13px;border:1px solid #f6e6b7aa;border-radius:8px;background:#493b2bdd;color:#fff3d0;font-size:10px;letter-spacing:.16em;line-height:1.7}
.ggNewsArt>span b{font-size:12px}
.ggNewsCopy{position:relative;padding:38px 34px 28px;background:radial-gradient(ellipse at top right,#ffe8a6,transparent 65%),#fcf2dc}
.ggNewsClose{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:#e9d8b4;color:#604530;font:30px/1 system-ui;cursor:pointer}
.ggNewsRubrik{margin:9px 28px 12px 0;font-size:11px;font-weight:850;letter-spacing:.14em;color:#826231}
.ggNews h1{margin:0 0 18px;font-size:clamp(28px,3.5vw,44px);line-height:1.04;letter-spacing:-.045em;color:#56351e}
.ggNewsLead{font-size:16px;margin:0 0 20px;line-height:1.55}
.ggNewsClock{padding:13px 16px;border:1px solid #bbaa75;border-radius:12px;background:#f2d98e;box-shadow:inset 0 2px #fff4d1}
.ggNewsClock strong{display:block;font-size:24px;letter-spacing:.025em;font-variant-numeric:tabular-nums;line-height:1.25}
.ggNewsClock small{display:block;font-size:11px;margin-top:5px;color:#715639}
.ggNewsDetail{font-size:12px;line-height:1.5;color:#78624b;margin:14px 0 20px}
.ggNewsActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ggNewsActions button{min-height:44px;padding:10px 20px;border:2px solid #6d4323;border-radius:10px;background:#eab358;color:#462c1b;box-shadow:0 3px #704726;font:800 14px system-ui;cursor:pointer}
.ggNewsActions span{font-size:10px;color:#796952}
.ggNewsNav{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:10px 14px;background:#e8d8b8;border-top:2px solid #ccb88c}
.ggNewsNav button{position:relative;min-height:44px;padding:8px 4px;border:1px solid transparent;border-radius:8px;background:transparent;color:#6b533d;font:750 12px system-ui;cursor:pointer;white-space:nowrap}
.ggNewsNav button[aria-current=page]{background:#fff5dc;border-color:#bda271;box-shadow:0 2px #b8a17b}
.ggNewsNav i{display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:#bd6238;vertical-align:top}
.gkHubNavBtn.hasNews{position:relative}.gkHubNavBtn.hasNews:after{content:'';position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:#bd6238;box-shadow:0 0 0 2px #f6e6c3}   /* ungelesen-Punkt oben rechts statt im Schriftzug (Claude-Review) */
.ggNews{color-scheme:light;accent-color:#90552c;scrollbar-color:#aa7b48 #f5e6c8;-webkit-tap-highlight-color:#c2803633}
.ggNews :is(a,a:visited){color:#76421f;text-decoration:underline}
.ggNews :is(button,a,[tabindex]):focus-visible{outline:3px solid #95521e;outline-offset:-3px}
.ggNews ::selection{background:#f4c56e;color:#462c1b}
.ggNews button:active,.ggNewsNav button[aria-current=page]{color:#553317;background:#f3d398;border-color:#ad7b3f}
@media(hover:hover){.ggNews button:hover,.ggNews a:hover{background:#fae2ae;color:#4a2d18}}
@media(max-width:1000px){.gkBtn.gkHubNavBtn{gap:4px;font-size:11px}.gkHubNav{gap:5px}#gkMetaRoot .gkHubNavBtn .gkGlyph{width:20px;height:20px}}@media(max-width:940px){.gkBtn.gkHubNavBtn{gap:1px;padding-inline:3px;flex-direction:column}#gkMetaRoot .gkHubNavBtn .gkGlyph{width:18px;height:18px}}/* Fund karten-zentrale-14: Symbol ueber der Beschriftung, WETTKAMPF/MANNSCHAFT mit Luft zum Rand */
@media(max-height:540px) and (orientation:landscape){.ggNews{width:min(900px,calc(100vw - 24px))}.ggNewsLayout{grid-template-columns:38% 62%}.ggNewsArt{min-height:0}.ggNewsCopy{padding:20px 24px 14px}.ggNewsRubrik{font-size:10px;margin:2px 30px 8px 0}.ggNews h1{font-size:30px;margin-bottom:10px}.ggNewsLead{font-size:13px;margin-bottom:12px;line-height:1.4}.ggNewsClock{padding:8px 12px}.ggNewsClock strong{font-size:20px}.ggNewsDetail{font-size:11px;margin:9px 0 11px}.ggNewsNav{padding:5px 10px}.ggNewsActions span{font-size:10px}}   /* SPUK-1014-04: Mindestschrift 10-11 px; sehr flache Querformate (<=380 px) passen ohne Scrollen: */ @media(max-height:380px) and (orientation:landscape){.ggNewsCopy{padding:12px 20px 8px}.ggNewsRubrik{margin:0 46px 4px 0}.ggNews h1{font-size:23px;margin-bottom:6px}.ggNewsLead{font-size:12.5px;line-height:1.35;margin-bottom:8px}.ggNewsClock{padding:5px 10px}.ggNewsClock strong{font-size:16px}.ggNewsClock small{margin-top:2px}.ggNewsDetail{margin:6px 0 7px}.ggNewsActions button{min-height:40px;padding:6px 16px}.ggNewsNav{padding:3px 8px}.ggNewsNav button{min-height:36px;padding:4px}.ggNewsArt>span{left:12px;bottom:12px;padding:6px 9px}}
@media(max-width:560px) and (orientation:portrait){.ggNews{width:calc(100vw - 20px)}.ggNewsLayout{grid-template-columns:1fr}.ggNewsArt{min-height:180px;border-radius:16px 16px 0 0}.ggNewsArt img{object-position:center 43%}.ggNewsArt>span{left:12px;bottom:12px;font-size:8px}.ggNewsCopy{padding:25px 22px 20px}.ggNewsClose{top:10px;right:10px;background:#fbf0d6ee}.ggNewsNav{gap:0;padding:6px}.ggNewsNav button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.ggNews,.ggNews *{scroll-behavior:auto;animation:none;transition:none}}
/* MOBIL-1014-08: NEWS bei sehr niedriger Hoehe - Reiterleiste bleibt sichtbar, nur der Text scrollt; × haengt am Dialog;
   der Kleingedruckt-Absatz faellt weg, damit "Alles klar" ueber dem Falz bleibt. */
@media(max-height:380px) and (orientation:landscape){.ggNews[open]{height:calc(100dvh - 24px);overflow:hidden}.ggNews[open] .ggNewsLayout{height:100%;grid-template-rows:minmax(0,1fr) auto}.ggNews[open] .ggNewsCopy{position:static;overflow:auto;overscroll-behavior:contain}.ggNews[open] .ggNewsDetail{display:none}.ggNews[open] .ggNewsLead{margin-bottom:8px}}
/* MOBIL-1014-08: Einstellungen-× unter dem zoom .86 (<=350 px Hoehe) wieder echte 44 px. */
@media(max-height:350px){#gkMetaRoot .gkModalHead .gkIconBtn{width:51px;height:51px}}
/* Flugduesen: normaler Werkstattdialog, Touchziele und eigenes Scrollen. */
.gkFlugIntro{margin:0 0 12px;color:#695646;font-size:14px}
.gkFlugDuesen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:2px}
.gkFlugDuesen button{display:grid;grid-template-columns:1fr;gap:5px 9px;text-align:left;border:2px solid #5b4433;border-radius:13px;background:#49382c;color:#fff1d5;padding:10px;font:inherit;min-height:116px;cursor:pointer}
.gkFlugDuesen button[aria-pressed="true"]{border-color:#f2c26f;background:#49382c;box-shadow:inset 0 0 0 1px #f2c26f}
.gkFlugDuesen strong{align-self:center;font-size:16px}.gkFlugDuesen button>span{font:13px/1.35 system-ui,sans-serif}.gkFlugDuesen b{font-size:12px;color:#f2d197;min-height:24px;padding-top:5px}
.gkDueseBild{width:100%;height:72px;object-fit:contain;filter:drop-shadow(0 4px 2px #49382c)}
.gkFlugModal .gkModalCard{width:min(900px,calc(100vw - 24px));padding:12px}.gkFlugModal .gkModalHead{position:sticky;top:-12px;z-index:1;background:#fff9e8;padding-top:6px}
@media(max-width:750px){.gkFlugDuesen{grid-template-columns:repeat(3,minmax(0,1fr))}.gkFlugDuesen button{padding:8px}}
/* MK-02: one four-stage result in every mode. */
.abschluss{box-sizing:border-box;width:100%;padding:18px 24px;border:3px solid #5b4433;border-radius:18px;background:#fff3d1;color:#493d32;box-shadow:0 5px 0 #5b4433;font-family:system-ui;text-align:center;display:flex;flex-direction:column;gap:12px}
/* MK-20: ein Bild, Ursache, Ertrag und zwei Aktionen. Keine Zusatztafeln. */
#endeSzeneWeiter{position:fixed;inset:0;z-index:900;width:100%;height:100%;border:0;border-radius:0;background:transparent;color:#fff5d5;text-shadow:0 2px 3px #5b4433;font:700 13px system-ui;text-align:right;padding:0 18px 16px;display:flex;align-items:flex-end;justify-content:flex-end;box-shadow:none;touch-action:manipulation}
#endeSzeneWeiter[hidden]{display:none}.endeSzene #fahrt-ui,.endeSzene #reinigung-stand,.endeSzene #lehrlingZiel,.endeSzene #mkKorb,.endeSzene #kopfHinweis,.endeSzene #rgKarte,.endeSzene #stick,.endeSzene #stickPuls{visibility:hidden!important}
.abschluss-herz .abschluss-bild{width:clamp(132px,23vh,230px);height:clamp(132px,23vh,230px);object-fit:contain;align-self:center}
.abschluss-herz .abschluss-titel{font:800 clamp(19px,3vh,28px)/1.15 system-ui;margin:0;color:#493d32;text-shadow:none}
#schichtende.herz-ende>.reinigung-share,#schichtende.herz-ende>.mkTischLeer{display:none}
#schichtende.herz-ende>.abschluss{width:min(570px,94vw);border:0;background:none;box-shadow:none;padding:0;gap:9px}
#schichtende.herz-ende .abschluss-grund{max-width:440px;align-self:center;font-size:13px}
#lehrlingKarte .ende-bild{display:block;margin:0 auto;width:140px;height:140px;object-fit:contain;align-self:center}
@media(max-height:450px){#schichtende.herz-ende{gap:4px;padding:6px}#schichtende.herz-ende>.abschluss{gap:4px}.abschluss-herz .abschluss-bild{width:116px;height:116px}.abschluss-herz .abschluss-zahl{font-size:28px}.abschluss-herz .abschluss-einheit{font-size:14px}.abschluss-herz .abschluss-titel{font-size:20px}#schichtende.herz-ende .abschluss-grund{font-size:11px}#schichtende.herz-ende>#seNeu{min-height:44px;font-size:18px}#schichtende.herz-ende>#seZentrale{min-height:44px;padding:5px}#lehrlingKarte .ende-bild{width:100px;height:100px}}
.abschluss-erfolg{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:10px}.abschluss-zahl{font:900 clamp(32px,5vw,62px)/1 system-ui;font-variant-numeric:tabular-nums;color:#246347}.abschluss-einheit{font-size:16px;font-weight:800}.abschluss-fund{flex-basis:100%}
.abschluss-ziel{position:relative;display:grid;gap:5px;font-size:12px;font-weight:700}.abschluss-balken{appearance:none;width:100%;height:12px;border:2px solid #5b4433;border-radius:9px;overflow:hidden;background:#d1c7a4}.abschluss-balken::-webkit-progress-bar{background:#d1c7a4}.abschluss-balken::-webkit-progress-value{background:#419771}.abschluss-balken::-moz-progress-bar{background:#419771}.abschluss-ziel[data-start=true]::after{content:'';position:absolute;width:6px;height:6px;background:#49382c;border-radius:50%;bottom:3px;left:3px}
.abschluss-haken{margin:0;font-size:16px;font-weight:800}.abschluss-grund{margin:0;font-size:11px;color:#59675c;font-weight:400;line-height:1.3}
#schichtende.peak-end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;background:radial-gradient(ellipse at 50% 25%,#fff4d9,#ddbd8f 85%);overflow:auto;color:#493d32}
#schichtende.peak-end>.abschluss{max-width:660px;flex-shrink:0}#schichtende.peak-end>#seGrund,#schichtende.peak-end>#seTipp,#schichtende.peak-end>#seZeugnis,#schichtende.peak-end>#seZahlen,#schichtende.peak-end>.seErtrag{display:none}
#schichtende.peak-end>#seNeu,#schichtende.peak-end>#seZentrale{position:static;width:min(420px,85vw);min-height:44px;margin:0;padding:8px;flex-shrink:0;font-size:15px}
#schichtende.peak-end .reinigung-share{display:flex;flex-wrap:nowrap;gap:8px;max-width:660px;align-items:center;font-size:10px}#schichtende.peak-end .reinigung-share button{min-height:44px;font-size:11px}#schichtende.peak-end #seLuft{position:static;transform:none;font-size:9px}
.einsatz-result:has(.abschluss){display:flex;flex-direction:column}.duell-finish-inhalt>.abschluss{margin-bottom:12px}
@media(max-height:450px){.abschluss{padding:10px 16px;gap:7px}.abschluss-zahl{font-size:34px}.abschluss-haken{font-size:14px}#schichtende.peak-end{gap:4px;padding:7px}#schichtende.peak-end .reinigung-share .best{display:none}}
#fahrt-ui [data-begriff] small,#fahrt-ui [data-klein]::after{display:none}
#reinigung-stand{top:calc(92px + env(safe-area-inset-top,0px))!important;bottom:auto!important}/* Kevin 08.10. HUD aufgeraeumt: Meter oben Mitte, Pegel+Rohr oben rechts, Fixer darunter, keine Dauertexte */#reinigung-stand{top:calc(6px + env(safe-area-inset-top,0px))!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:auto!important;min-width:0;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;text-align:center}#reinigung-stand:not([hidden]){display:flex!important;align-items:baseline;gap:16px}#reinigung-stand .clean-label,#reinigung-stand .clean-track,#reinigung-stand .clean-number>strong,#reinigung-stand .clean-number>span{display:none!important}#reinigung-stand .clean-number{display:block!important}#reinigung-stand .clean-number>small{position:static!important;font:900 34px/1 'Gustav Display',system-ui,sans-serif!important;color:#ffd84a!important;text-shadow:0 2px 0 #3b2a1b,0 0 8px #0009,2px 0 0 #3b2a1b,-2px 0 0 #3b2a1b,0 -2px 0 #3b2a1b}#reinigung-stand .clean-distance{order:-1}#reinigung-stand .clean-distance{margin:0!important;font:900 34px/1 'Gustav Display',system-ui,sans-serif!important;color:#fff6dc!important;text-shadow:0 2px 0 #3b2a1b,0 0 8px #0009,2px 0 0 #3b2a1b,-2px 0 0 #3b2a1b,0 -2px 0 #3b2a1b}#kurzlinerAnz{top:calc(72px + env(safe-area-inset-top,0px))!important;transform:translateX(-50%) scale(.82)!important}/* 13.10.: Platz fuer den Stufen-Titel unter dem Meter-Zaehler */html body #fahrt-ui #meters{top:calc(8px + env(safe-area-inset-top,0px))!important;right:calc(10px + env(safe-area-inset-right,0px))!important;bottom:auto!important;left:auto!important;width:250px!important;transform:none!important}html body #fahrt-ui #vorrat #fixerBtn{top:calc(62px + env(safe-area-inset-top,0px))!important;right:max(24px,env(safe-area-inset-right,0px))!important;bottom:auto!important}#radio,body:not(.istLehrling) #lernMoment,body:not(.istLehrling) #ahaKarte,body:not(.istLehrling) #tippLeiste{display:none!important}#mkKorb{right:calc(10px + env(safe-area-inset-right,0px))!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;top:auto!important}#schichtende .reinigung-share button{display:none!important}html body #lehrlingZiel{left:calc(258px + env(safe-area-inset-left,0px))!important;right:calc(275px + env(safe-area-inset-right,0px))!important;max-width:none!important;transform:none!important;top:calc(8px + env(safe-area-inset-top,0px))!important}/* 09.10.: Ziel-Leiste zwischen Knoepfen und Pegel/Rohr */
.mkBuch button.mkFund.mkLeer .mkStempel{position:absolute;z-index:3;left:50%;bottom:6px;transform:translateX(-50%) rotate(-6deg);white-space:nowrap;padding:1px 4px;border:1.5px solid #8b5a2b;border-radius:4px;background:#fff6dcd9;color:#8b5a2b;font:900 10px/1.3 system-ui,sans-serif;letter-spacing:0;pointer-events:none}   /* Fundbuch-Stempel (Story-Bibel, Kevin 14.10.); Fund karten-zentrale-4: eigenes Element, ::after bleibt Klebestreifen */
.gkHubBrown{background:linear-gradient(115deg,#e6c9a0,#c9975a)}.ende-hofstaat{position:absolute;right:4px;bottom:6px;display:flex;align-items:flex-end;pointer-events:none}.ende-wurst{width:78px;height:58px;margin-left:-18px;animation:endeKichern .5s ease-in-out infinite}.ende-hofstaat.ist-schmoll .ende-wurst{animation:none;transform:rotate(-6deg)}.ende-ruhig .ende-wurst{animation:none}@keyframes endeKichern{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}.ende-hofstaat-ruf{position:absolute;right:2px;top:-16px;font:900 12px/1.2 system-ui,sans-serif;color:#2b1d10;background:#fff6dc;border:2px solid #2b1d10;border-radius:8px;padding:1px 6px}.mkZeitung{margin:6px 0 0;font:700 11px/1.3 system-ui,sans-serif;font-style:italic;color:#6b4a2b}   /* Hofstaat-Story (Kevin 14.10.) */
.ende-polaroid{position:absolute;left:2px;bottom:4px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1px;width:78px;padding:4px 4px 2px;border:2px solid #5b4433;border-radius:4px;background:#fffaf0;box-shadow:0 3px 0 #0006;transform:rotate(-7deg);cursor:pointer}.ende-polaroid-bild{display:block;width:100%;height:auto;border:1px solid #5b4433;background:#1b1a17}.ende-polaroid-zeile{font:900 13px/1.1 system-ui,sans-serif}.ende-polaroid:focus-visible{outline:3px solid #ffd84a;outline-offset:2px}.ende-coach{display:block;max-width:36ch;margin:0 auto;font:italic 800 13px/1.25 system-ui,sans-serif;color:#ffe9a0;text-align:center}#schichtende.mk21-ende .ende-coach{grid-column:2}@media(min-width:600px) and (max-height:350px){#schichtende.mk21-ende .ende-coach{grid-row:4;align-self:center;font-size:12px}}#schichtende .ende-beweis{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px 14px;align-items:center;justify-items:center;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));box-sizing:border-box;background:#49382cf7}#schichtende.ist-beweis>:not(.ende-beweis){visibility:hidden}.ende-foto,.ende-replay{display:block;max-width:min(100%,560px);max-height:100%;width:auto;height:auto;border:3px solid #5b4433;border-radius:8px;background:#1b1a17;box-shadow:0 4px 0 #0006}.ende-replay-rahmen{position:relative;display:flex;max-width:100%;max-height:100%;min-height:0}.ende-replay-marke{position:absolute;left:8px;top:8px;padding:2px 9px;border:2px solid #5b4433;border-radius:10px;background:#f4cd42;color:#30261e;font:900 12px/1.3 system-ui,sans-serif}#schichtende .ende-beweis.ist-ruhig .ende-foto{grid-column:1/3}.ende-beweis-leiste{grid-column:1/3;display:flex;gap:14px}.ende-teilen,.ende-zurueck{min-height:44px;padding:6px 24px;border:3px solid #5b4433;border-radius:12px;color:#30261e;font:900 16px/1 'Gustav Display',system-ui,sans-serif;cursor:pointer;box-shadow:0 3px 0 #0006}.ende-teilen{background:#f4cd42}.ende-zurueck{background:#fff0c8}.ende-teilen:disabled{opacity:.6}   /* WELT-1014-04 (Kevin 14.10. B12): Beweis-Polaroid in der Szene, Coach-Zeile, eigene Beweis-Ansicht */
.gkDiebBuehne{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}.gkDiebSprite{position:absolute;left:0;top:0;will-change:transform}.gkDiebBlase{position:absolute;left:0;top:0;white-space:nowrap;padding:3px 9px;border-radius:10px;background:#fff6dc;color:#2b1d10;border:2px solid #2b1d10;font:900 12px/1.2 system-ui,sans-serif}.gkDiebBlase[hidden]{display:none}.gkCard.isGeklaut .upgradeIcon{filter:grayscale(1) brightness(.55);opacity:.4}.gkCard.isGeklaut .h::after{content:'GEKLAUT';display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:#c9975a;color:#2b1d10;font:900 9px/14px system-ui;vertical-align:middle}.gkCard.isWackelt{animation:gkWackeln .45s ease-in-out infinite}@keyframes gkWackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-1.5deg)}75%{transform:translateX(5px) rotate(1.5deg)}}   /* Diebstahl-Auftritt in der Werkstatt (Kevin 14.10.) */
#reinigung-stand .clean-distance{transform-origin:50% 60%;will-change:transform}#reinigung-stand .clean-titel{position:absolute;top:42px;left:50%;transform:translateX(-50%);white-space:nowrap;font:900 13px/1 system-ui,sans-serif;letter-spacing:.08em;color:#ffd84a;text-shadow:0 1px 0 #3b2a1b,0 0 6px #0009,1px 0 0 #3b2a1b,-1px 0 0 #3b2a1b;pointer-events:none}#reinigung-stand .clean-titel[hidden]{display:none}   /* Kevin 13.10.: Meter-Zaehler mit Stufen-Titel */
#wasserHinweis{position:fixed;top:65px;left:50%;transform:translateX(-50%);z-index:45;padding:5px 12px;border-radius:12px;background:#f1c85b;color:#493d32;font:800 12px system-ui;pointer-events:none;max-width:65vw;text-align:center}
#tauchChip{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:46;padding:4px 12px;border-radius:999px;border:2px solid #e4c28d;background:#49382ce0;color:#ead4aa;font:800 12px system-ui;letter-spacing:.04em;pointer-events:none;animation:blaseSteigt 1.6s ease-in-out infinite}#tauchChip[hidden]{display:none}
#rettungsBlase{position:fixed;left:22%;top:max(38%,calc(160px + env(safe-area-inset-top,0px)));z-index:60;width:92px;height:92px;border-radius:50%;border:3px solid #5b4433;background:radial-gradient(circle at 35% 30%,#fff4d8,#f5d58f 55%,#e1b365);color:#493d32;font:400 12px/1.1 var(--gk-display,'Gustav Display','Arial Black',sans-serif);letter-spacing:.2px;display:grid;place-content:center;gap:3px;text-align:center;box-shadow:0 0 0 4px #fff4d833,0 6px 14px #0004;animation:blaseSteigt 2.2s ease-in-out infinite;cursor:pointer;touch-action:manipulation;padding:6px}#rettungsBlase[hidden]{display:none}#rettungsBlase img,#rettungsBlase svg{width:34px;height:34px}@keyframes blaseSteigt{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.06)}}
#wasserHinweis[data-kritisch=true]{outline:3px solid #e8a248;background:#ffd36b}
#lernMoment.mk-inline{pointer-events:none;inset:auto 10px 96px auto;width:min(310px,50vw);background:none;backdrop-filter:none}#lernMoment.mk-inline .lmKarte{position:static;transform:none;padding:8px;box-shadow:none}#lernMoment.mk-inline button{pointer-events:auto}#lernMoment.mk-inline [data-lm=hand],#lernMoment.mk-inline [data-lm=klein]{display:none}

#schichtende.peak-end:has(.einsatz-result:not([hidden]))>.abschluss,#schichtende.peak-end:has(.einsatz-result:not([hidden]))>.reinigung-share{display:none}
#schichtende.peak-end .einsatz-result{display:flex;flex-direction:column;max-width:660px;max-height:none;flex-shrink:0;padding:0;border:0;background:none;box-shadow:none;gap:5px}#schichtende.peak-end .einsatz-result-text{width:100%;min-width:0}#schichtende.peak-end .einsatz-result::before{display:none}
#schichtende.peak-end .einsatz-result .abschluss{font-family:system-ui}#schichtende.peak-end .einsatz-result .abschluss p{margin:0}#schichtende.peak-end .einsatz-result .abschluss-zahl{font-size:clamp(32px,5vw,62px)}
.abschluss .duell-finish-titel{margin:0;font:800 13px system-ui;color:#246347;text-shadow:none}

#meters .mLbl{display:flex;align-items:center;justify-content:space-between;gap:5px}#meters .mLbl>[data-begriff]{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#meters .mLbl>[id]{position:static;flex:0 0 auto;white-space:nowrap}
.tagesfundMeldung{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:25;max-width:min(520px,70vw);padding:8px 14px;border:2px solid #89682d;border-radius:12px;background:#fff0c8;color:#30291c;font:700 13px/1.35 system-ui;text-align:center;pointer-events:none;box-shadow:0 3px 14px #0005}
.gkCentral .gkStage:has(.mkBuch:not([hidden])) .gkHubHero{display:none}.gkCentral .gkStage:has(.mkBuch:not([hidden])) .gkHubContent{grid-column:1/-1;grid-row:2;background:#49382cea;border-radius:14px;padding:10px}.mkBuch.gkHubPane{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:5px}.mkBuch.gkHubPane>h2{align-self:center}.mkBuch.gkHubPane>.mkTabs{grid-column:2;grid-row:1;padding:0}.mkBuch.gkHubPane>.mkKapitel,.mkBuch.gkHubPane>.mkKapitelStand,.mkBuch.gkHubPane>.mkGrid,.mkBuch.gkHubPane>p,.mkBuch.gkHubPane>details{grid-column:1/-1}.mkBuchMeldung:empty{display:none}.mkBuch.gkHubPane .mkKapitelStand{font-size:13px}.mkBuch.gkHubPane .mkKapitel{padding-bottom:3px}.mkBuch.gkHubPane .mkFund{align-self:start}.mkBuch.gkHubPane .mkBild svg{width:56px;height:56px}@media(max-width:720px){.mkBuch.gkHubPane>h2{font-size:12px;letter-spacing:0}.mkBuch.gkHubPane>.mkTabs button{font-size:11px;padding:5px 7px}.mkBuch.gkHubPane .mkKapitelStand{font-size:12px}.mkBuch.gkHubPane .mkKapitelStand button{font-size:11px;max-width:46%;padding:4px 6px}.mkBuch.gkHubPane .mkBild svg{width:44px;height:44px}}
.mkKombi{position:fixed;z-index:110;left:50%;top:42%;transform:translate(-50%,-50%);max-width:52vw;width:380px;padding:8px 14px;border:2px solid #e4bd68;border-radius:16px;background:#49382cef;color:#fff0ce;text-align:center;pointer-events:none;box-shadow:0 3px 16px #0006}.mkKombi[hidden]{display:none}.mkKombi strong,.mkKombi small{display:block;font:700 16px/1.15 system-ui}.mkKombi small{font:12px/1.2 system-ui;margin-top:5px}.mkKombi svg{width:44px;height:44px}.mkKombi span{display:inline-block}.mkFx-glanz{background:radial-gradient(ellipse at top,#797044,#49382c 75%)}.mkFx-glanz span,.mkFx-funken span{animation:mkPolierGlanz .5s alternate 6}.mkFx-wackeln span,.mkFx-klapper span{animation:mkKombiWackeln .3s alternate 10}.mkFx-wolken{box-shadow:-12px 0 22px #82966b,12px 0 22px #a78595}@keyframes mkKombiWackeln{to{transform:rotate(9deg) translateY(-3px)}}@media(max-width:720px){.mkKombi{top:40%;padding:6px;max-width:48vw}.mkKombi strong{font-size:13px}.mkKombi small{font-size:11px}.mkKombi svg{width:30px;height:30px}}@media(prefers-reduced-motion:reduce){.mkKombi span{animation:none}}
#schichtende.peak-end{justify-content:safe center}
@media(max-width:720px){.gkHubNavBtn .gkGlyph{display:none}.gkBtn.gkHubNavBtn{font-size:10px}}

/* MK-16: Empfehlung mit Tippfläche; Hinweise teilen sich den sichtbaren Bannerplatz. */
body.gg-h-hinweise:not(#gg-nie) :is(#tutorial,#lernMoment){visibility:hidden}
#kopfEmpfehlung{position:fixed;z-index:44;transform:translate(-50%,-50%);width:132px;min-height:64px;padding:4px;border:3px solid #5b4433;border-radius:14px;background:#ffdb66;color:#493d32;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;box-shadow:0 3px 0 #5b4433;pointer-events:auto;touch-action:manipulation}
#kopfEmpfehlung[hidden]{display:none}#kopfEmpfehlung img{width:46px;height:36px;object-fit:contain}#kopfEmpfehlung small{width:100%;font:800 11px/1.15 system-ui}#kopfEmpfehlung:active{background:#8feb9b}
#wasserHinweis.ersterPegel{padding-left:50px;min-height:50px;box-sizing:border-box;display:flex;align-items:center}#wasserHinweis.ersterPegel::before{content:'';position:absolute;left:0;bottom:0;width:48px;height:50px;background:url('./assets/gk40/gustav_neutral.webp') center/contain no-repeat}#wasserHinweis[hidden]{display:none}
.mkPortrait { margin:12px auto; max-width:440px; color:#ffe2a6; text-align:center; }
.mkPortrait summary { cursor:pointer; padding:12px; border:2px solid #b6bd89; border-radius:12px; background:#49382c; font-weight:800; }
.mkPortrait canvas { display:block; width:100%; height:auto; max-height:62vh; object-fit:contain; margin:10px auto; }
.mkPortrait button { min-height:44px; padding:10px 18px; border:0; border-radius:10px; background:#ffe2a6; color:#493d32; font-weight:800; }

#mkWalze{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;font:bold 64px "Gustav Display",system-ui;color:#fff1a6;text-shadow:0 4px #623421,3px 0 #623421,-3px 0 #623421;pointer-events:none}#mkWalze.fertig{font-size:32px;animation:mkStamp .3s ease-out}@keyframes mkStamp{from{transform:translate(-50%,-50%) scale(1.4) rotate(-4deg)}to{transform:translate(-50%,-50%) scale(1)}}

.mkWalzenMuenze{position:absolute;left:50%;top:0;display:grid;place-items:center;width:23px;height:23px;border:2px solid #b87a17;border-radius:50%;background:#ffd866;color:#925400;font:bold 16px system-ui;text-shadow:none;animation:mkMuenzenRegen 1.3s ease-in both;pointer-events:none}@keyframes mkMuenzenRegen{0%{opacity:0;transform:translate(0,-10px) scale(.5)}20%{opacity:1}45%{transform:translate(var(--wurf),-65px) rotate(180deg)}100%{opacity:0;transform:translate(var(--wurf),150px) rotate(420deg)}}

/* MK-15: illustrierte Szene, echter Wischtisch und Papieralbum ersetzen die Icon-Karten. */
@media(max-height:450px){.mkBuch.gkHubPane .mkKapitelStand:not(:has(.mkKapitelSiegel)){display:none}.mkBuch.gkHubPane>.mkTabs button{min-height:30px}.mkBuch.gkHubPane{gap:3px}}
@media(max-width:720px) and (max-height:450px){.mkBuch.gkHubPane .mkGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:9px}.mkBuch.gkHubPane button.mkFund{padding:7px}.mkBuch.gkHubPane .mkFund h3{font-size:11px;min-height:26px}}
/* MK-16: Tuerrechteck entfernt; vorhandener Alphakanal stellt Gustav frei. */
.morgenkarte{position:fixed;inset:0;margin:auto;padding:0;width:min(940px,calc(100vw - 24px));height:min(610px,calc(100dvh - 20px));max-height:calc(100dvh - 20px);border:3px solid #83603b;border-radius:22px;background:#eed4a0;color:#302c24;overflow:hidden;box-shadow:0 20px 80px #000a}
.morgenkarte[data-vorbereitet]:not([open]){display:block;visibility:hidden;pointer-events:none}.morgenkarte::backdrop{background:#49382cd4}.morgenkarte-inhalt{height:100%;box-sizing:border-box;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:minmax(0,1fr) 60px;gap:14px;padding:18px;background:linear-gradient(105deg,#ffb34785,#ffeb9d40 55%,#65473030),url('./assets/gk40/bg_werkstatt.webp') center/cover}
.mkMorgenSzene{position:relative;min-height:0}.mkMorgenGruss{position:absolute;left:6px;right:0;top:0;padding:12px;border-radius:12px;background:#fff0ccc9;box-shadow:0 3px 15px #523a2320}.mkMorgenGruss small{font:800 11px system-ui;letter-spacing:.13em}.mkMorgenGruss h1{font:clamp(26px,4vw,45px)/1.05 'Gustav Display',system-ui;margin:5px 0}.mkMorgenGruss p{font:600 13px/1.3 system-ui;margin:5px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mkMorgenGustav{position:absolute;width:65%;height:68%;object-fit:contain;bottom:42px;left:3%;filter:drop-shadow(5px 7px 3px #513e3666)}.mkKaffee{position:absolute;right:12%;bottom:105px;width:65px;height:65px;transform:rotate(5deg)}.mkTasse{position:absolute;inset:20px 8px 0 0;border:3px solid #583e29;border-radius:5px 5px 24px 24px;background:linear-gradient(90deg,#f3d8a0,#fff7d8 65%,#d9b781);box-shadow:0 5px 4px #53301d66}.mkTasse:before{content:'';position:absolute;right:-20px;top:3px;width:19px;height:23px;border:6px solid #f8e4b9;border-radius:50%;z-index:-1}.mkTasse:after{content:'';position:absolute;left:2px;right:2px;top:-5px;height:10px;border-radius:50%;background:#533524;border:2px solid #fbecc7}.mkDampf{position:absolute;left:15px;top:-10px;width:10px;height:34px;border-left:4px solid #fff9dbb0;border-radius:50%;animation:mkDampf 2.4s ease-in-out infinite}.mkDampf:nth-child(2){left:30px;animation-delay:.6s}.mkDampf:nth-child(3){left:43px;animation-delay:1.2s}@keyframes mkDampf{to{transform:translate(8px,-25px) scale(1.3);opacity:0}}
.morgenkarte-tage{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;list-style:none;margin:0;padding:8px;border:2px solid #705335;border-radius:12px;background:#f8e8cbe8}.morgenkarte-tage li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;color:#807965;font:700 10px system-ui}.mkSchluessel{font-size:29px;filter:grayscale(1) brightness(.65);opacity:1;text-shadow:0 1px 1px #fff}.erreicht .mkSchluessel{filter:sepia(1) saturate(8);opacity:1;text-shadow:0 1px #805000,0 0 5px #ffc62f}.morgenkarte-tage .heute{position:relative;background:#ffdc74;border-radius:7px;outline:2px solid #995716}.morgenkarte-tage .heute:after{content:"\2713";position:absolute;right:0;top:0;color:#27593b;border:2px solid;border-radius:50%;background:#f6eac5;font:bold 12px system-ui;transform:rotate(-15deg)}.heute{animation:mkTagesStempel .4s .2s both}@keyframes mkTagesStempel{0%{transform:scale(1.4) rotate(-12deg)}70%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1)}}
.mkGesucht{position:relative;display:flex;flex-direction:column;align-items:center;min-height:0;padding:14px 14px 10px;background:linear-gradient(95deg,#e2c487,#fff0c6 30%,#f3dca9);clip-path:polygon(0 1%,5% 0,10% 1%,18% 0,24% 1%,35% 0,48% 1%,61% 0,77% 1%,88% 0,100% 1%,99% 98%,93% 100%,82% 99%,72% 100%,61% 99%,49% 100%,35% 99%,22% 100%,13% 99%,0 100%);transform:rotate(-3deg);filter:drop-shadow(4px 6px 4px #37271480);text-align:center}.mkPin{position:absolute;top:6px;left:50%;width:13px;height:13px;border:2px solid #843629;background:radial-gradient(circle at 30% 30%,#ff9777,#b33f2d);border-radius:50%;box-shadow:2px 3px 2px #593a2266}.mkGesucht h2{font:clamp(21px,3vw,38px)/1 'Gustav Display',system-ui;letter-spacing:.12em;margin:10px 0 4px;border-bottom:2px solid #87603f;padding-bottom:4px;width:90%}.mkGesuchtBild{min-height:0;flex:1;width:100%;object-fit:contain;filter:drop-shadow(2px 3px 2px #51351933)}.mkGesuchtName{font:700 14px/1.2 system-ui;max-height:34px;overflow:hidden}.mkGesuchtKunde{font:600 12px system-ui;margin:4px 0}.mkMuenzstapel{display:flex;gap:8px;align-items:center;font:24px 'Gustav Display',system-ui;color:#6c411c}.mkMuenzstapel i{width:28px;height:16px;color:#f1be40;border:2px solid #b07517;border-radius:50%;background:#f8d05b;box-shadow:0 3px #af781d,0 6px #f8d05b,0 8px #af781d;font-size:0}
.mkMorgenFuss{grid-column:1/-1;display:flex;gap:10px;align-items:center}.morgenkarte-fehler{font:12px system-ui;color:#872f21;max-width:40%}.morgenkarte-weiter{flex:1;min-height:46px;border:3px solid #685030;border-radius:12px;background:linear-gradient(#ffdb70,#e8aa37);box-shadow:0 4px #76522b;color:#493d32;font:20px 'Gustav Display',system-ui;cursor:pointer;transition:transform .12s,box-shadow .12s}.morgenkarte-weiter:active{transform:translateY(4px);box-shadow:0 0 #76522b}
.mkBuch{color:#fff0cc;font-family:system-ui}.mkBuch h2{font:23px 'Gustav Display',system-ui;margin:4px 0 10px}.mkBuch button{font:700 13px/1.25 system-ui;border:2px solid #9d8056;border-radius:8px;padding:8px 12px;background:#f0e2bf;color:#352d24;min-height:38px;cursor:pointer}.mkBuch button:disabled{opacity:.55;cursor:default}.mkTabs,.mkKapitel{display:flex;gap:7px;overflow-x:auto;max-width:100%;padding:4px 1px 9px}.mkTabs button,.mkKapitel button{flex-shrink:0}.mkBuch [aria-pressed=true]{background:#eec468;border-color:#fff3ce}.mkKapitel button{display:grid;grid-template-columns:30px auto;gap:2px 6px;align-items:center;min-width:125px;text-align:left}.mkKapitel img,.mkTabFrage{width:28px;height:28px;object-fit:contain;grid-row:1/3}.mkTabFrage{display:grid;place-items:center;font-size:24px}.mkKapitel progress{height:6px;width:100%;accent-color:#538663}.mkKapitelStand{display:flex;align-items:center;justify-content:space-between;gap:10px}.mkKapitelSiegel{border:3px double #efd170;border-radius:50%;padding:8px;transform:rotate(-9deg);font:700 10px system-ui;color:#efd170}.mkBuchMeldung{font-size:13px;margin:6px 0}.mkBuchMeldung:empty{display:none}
.mkGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:17px;padding:12px 7px 22px}.mkBuch button.mkFund{position:relative;min-width:0;border:0;border-radius:2px;padding:9px 9px 12px;background:linear-gradient(100deg,#e9d8b6,#fff4d8 50%,#edddbe);box-shadow:2px 4px 5px #0005;transform:rotate(-1deg);align-self:start}.mkFund:nth-child(even){transform:rotate(1.5deg)!important}.mkFund:before,.mkFund:after{content:'';position:absolute;z-index:2;width:43px;height:16px;top:-5px;left:-8px;background:#cbb88da6;transform:rotate(-28deg)}.mkFund:after{left:auto;right:-8px;transform:rotate(28deg)}.mkBild{position:relative;width:100%;aspect-ratio:1;filter:none!important;opacity:1!important}.mkBild img{width:100%;height:100%;object-fit:contain}.mkFund h3{font:700 14px/1.2 system-ui;margin:7px 0 4px;min-height:34px}.mkFundHint{font:11px/1.25 system-ui;margin:5px 0}.mkMeilenstein{color:#987024;font-size:12px}.mkLeer img{filter:brightness(0);opacity:.7}.mkFrage{position:absolute;inset:0;display:grid;place-items:center;font:55px 'Gustav Display',system-ui;color:#f4e1ae;text-shadow:0 2px 4px #000}.mkGold{outline:2px solid #dfb854;outline-offset:2px}.mkKombi img{width:44px;height:44px;object-fit:contain}.mkKalleBezug{font-style:italic;color:#677653}
.mkDetail{position:fixed;inset:0;z-index:12010;display:grid;place-items:center;background:#49382cea;padding:14px;box-sizing:border-box}.mkDetailPanel{position:relative;display:grid;grid-template-columns:minmax(160px,1fr) 1.15fr;gap:18px;width:min(760px,95vw);max-height:calc(100dvh - 28px);overflow:auto;padding:26px;border:3px solid #aa8050;border-radius:18px;background:linear-gradient(100deg,#dfc18b,#fff1ce 50%,#ead5a9);color:#342f25;box-sizing:border-box}.mkDetailZu{position:absolute;top:8px;right:8px;z-index:4}.mkDetailBild{position:relative;aspect-ratio:1;align-self:center;min-width:0}.mkDetailBild>img{width:100%;height:100%;object-fit:contain}.mkDetailText{padding-top:35px;font:13px/1.4 system-ui}.mkDetailText h2{font:25px/1.1 'Gustav Display',system-ui}.mkDetailText p{margin:8px 0}.mkZitat{font-style:italic}.mkGlanzBanner{font-weight:800;color:#7a571b}
.mkTisch{position:fixed;inset:0;z-index:12000;display:flex;flex-direction:column;box-sizing:border-box;padding:18px 28px 12px;overflow:hidden;color:#fff1cc;background:radial-gradient(ellipse at 50% 30%,#f9ce7777,transparent 60%),repeating-linear-gradient(1deg,transparent 0 4px,#4b241515 5px 6px,transparent 7px 12px),repeating-linear-gradient(90deg,#875631 0 130px,#49301d 131px 134px,#98633b 135px 265px,#4c311e 267px 270px);text-align:center}
.mkTisch>h2{position:relative;z-index:2;font:clamp(24px,3.2vw,40px)/1 'Gustav Display',system-ui;margin:0 0 6px;text-shadow:0 3px #573a23}.mkTischHint{position:relative;z-index:2;font:13px/1.3 system-ui;margin:0 0 8px}.mkTischLampe{position:absolute;left:50%;top:-17px;width:95px;height:38px;border-radius:50% 50% 6px 6px;background:linear-gradient(90deg,#49382c,#75927d,#49382c);border:4px solid #5b4433;transform:translateX(-50%);box-shadow:0 14px 45px 14px #ffe09480}.mkKippkorb{position:absolute;top:75px;left:30px;width:70px;height:50px;border:5px solid #563a21;border-radius:5px 5px 20px 20px;background:repeating-linear-gradient(0deg,transparent 0 8px,#775129 9px 12px),repeating-linear-gradient(90deg,#e2bd7b 0 8px,#997039 9px 12px);transform-origin:bottom right;animation:mkKorbKipp .3s both}.mkKippkorb:before{content:'';position:absolute;inset:-25px 8px 35px;border:5px solid #b89052;border-radius:50% 50% 0 0}
.mkTischFunde{display:flex;flex:1;min-height:0;align-items:center;justify-content:safe center;gap:20px;overflow-x:auto;overflow-y:hidden;padding:18px 10px 26px}.mkTrophäe{position:relative;flex:0 0 min(28vw,320px);max-width:calc(100dvh - 180px);min-width:135px;animation:mkTischFlug .7s var(--mk-delay) both;filter:drop-shadow(3px 12px 5px #301e1655)}.mkFundStempel{position:absolute;z-index:3;left:0;top:-8px;transform:rotate(-8deg);padding:5px 9px;border:3px double #58391d;border-radius:5px;background:#eed16d;color:#594024;font:700 12px system-ui;pointer-events:none}.mkFundBanner{position:absolute;left:-12%;right:-12%;bottom:-19px;z-index:4;margin:0;padding:7px;background:#fff0c8;color:#4a3422;box-shadow:0 3px #634229;font:700 13px/1.2 system-ui;transform:rotate(-2deg)}.mkFundBanner[hidden]{display:none}.mkTischFuss{display:flex;gap:12px;align-items:center;min-height:58px;flex-shrink:0;max-width:1000px;width:100%;margin:auto}.mkTischGustav{width:56px;height:64px;object-fit:contain}.mkGustavBlase{position:relative;flex:1;padding:10px 14px;border:2px solid #685137;border-radius:15px;background:#fff2cc;color:#41372a;font:700 13px/1.3 system-ui;text-align:left;margin:0;max-height:72px;overflow:auto}.mkTischWeiter{padding:12px 18px;border:2px solid #634a2c;border-radius:10px;background:#f3c862;color:#3c3629;font:16px 'Gustav Display',system-ui;min-height:44px;cursor:pointer}.mkTischLeer{position:relative;padding:12px;border-radius:15px;margin:8px;display:block}.mkTischLeer>h2{font-size:23px}.mkTischLeer>p{font:13px system-ui}
.mkWisch{position:relative;width:100%;aspect-ratio:1;touch-action:none;user-select:none;cursor:grab;isolation:isolate}.mkWisch>img,.mkWisch>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.mkWisch>canvas[hidden]{display:none}.mkWischStatus{position:absolute;left:-8%;right:-8%;bottom:-14px;font:700 11px system-ui;color:inherit;text-align:center;pointer-events:none}.mkWisch>progress{position:absolute;bottom:-23px;left:20%;width:60%;height:6px;accent-color:#8fb65e}.mkWisch.istSauber:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:100px system-ui;color:#fff7ad;animation:mkSauberBlitz .7s both}.mkWisch.istSauber .mkWischStatus,.mkWisch.istSauber progress{visibility:hidden}.mkWischTropfen{position:absolute;width:8px;height:12px;background:#857331;border-radius:30% 70% 70% 70%;pointer-events:none;animation:mkDreckFall .45s both}.mkWisch:focus-visible{outline:3px dashed #f4d678;outline-offset:4px}
@keyframes mkKorbKipp{from{transform:rotate(-12deg)}to{transform:rotate(105deg)}}@keyframes mkTischFlug{0%{opacity:0;transform:translate(-30vw,-100px) rotate(-35deg)}55%{opacity:1;transform:translate(0,10px) rotate(5deg)}75%{transform:translate(0,-20px) rotate(-4deg)}90%{transform:translate(0,3px)}100%{transform:none}}@keyframes mkSauberBlitz{0%,100%{opacity:0;transform:scale(.5) rotate(-20deg)}40%{opacity:1;transform:scale(1.3) rotate(20deg)}}@keyframes mkDreckFall{to{transform:translate(15px,50px) rotate(70deg);opacity:0}}@keyframes mkPolierGlanz{to{transform:rotate(12deg) scale(1.1)}}
@media(max-height:450px){.morgenkarte-inhalt{grid-template-columns:1.3fr 1fr;grid-template-rows:minmax(0,1fr) 48px;gap:8px;padding:12px 18px}.mkMorgenGruss{padding:8px;right:5%}.mkMorgenGruss h1{font-size:28px}.mkMorgenGruss p{font-size:11px}.mkMorgenGustav{height:62%;bottom:43px;width:57%}.mkKaffee{bottom:70px;right:15%;transform:scale(.7)}.morgenkarte-tage{padding:5px}.mkSchluessel{font-size:20px}.mkGesucht{padding:12px 10px 6px}.mkGesucht h2{font-size:23px;margin:5px 0 2px}.mkGesuchtName{font-size:12px;max-height:28px}.mkGesuchtKunde{font-size:11px;margin:2px}.mkMuenzstapel{font-size:19px}.morgenkarte-weiter{min-height:44px;font-size:18px}.mkTisch{padding:12px 15px 8px}.mkTisch>h2{font-size:27px}.mkTischHint{font-size:11px}.mkTischFunde{gap:19px;padding:17px 5px 28px}.mkTischFuss{min-height:50px;gap:8px}.mkTischGustav{height:49px;width:40px}.mkGustavBlase{font-size:11px;padding:7px 10px}.mkTischWeiter{font-size:14px;padding:9px 12px}.mkDetailPanel{padding:16px;grid-template-columns:minmax(140px,220px) 1fr;gap:14px}.mkDetailText{font-size:11px;padding-top:26px}.mkDetailText h2{font-size:20px}.mkDetailText p{margin:5px 0}.mkGrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.mkBuch .mkKapitel button{font-size:11px;min-width:110px;padding:4px 6px}.mkKapitel img,.mkTabFrage{width:23px;height:23px}.mkBuch.gkHubPane .mkBild{width:100%;height:auto}.mkFund h3{font-size:12px}}
.mkReduziert .mkTrophäe,.mkReduziert .mkKippkorb{animation:none}@media(prefers-reduced-motion:reduce){.mkDampf,.heute,.mkTrophäe,.mkKippkorb,.mkWisch:after,.mkWischTropfen,.mkKombi span{animation:none!important}.morgenkarte-weiter{transition:none}}
@media(max-width:720px) and (max-height:450px){.mkBuch.gkHubPane .mkBild{height:106px;aspect-ratio:auto}}
/* MK-18: Ziel oberhalb der Fahrbahn, Feier kürzer als drei Sekunden. */
#lehrlingZiel{position:fixed;z-index:75;top:8px;left:50%;transform:translateX(-50%);max-width:60vw;padding:9px 16px;border:2px solid #a67431;border-radius:12px;background:#fff2cc;color:#493d32;font:400 15px/1.2 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif);letter-spacing:.2px;box-shadow:0 3px #503d2d;text-align:center;pointer-events:none}
#lehrlingProfi{position:fixed;z-index:76;top:66px;left:50%;transform:translateX(-50%);min-height:40px;padding:6px 12px;background:#fff2cc;color:#493d32;border:2px solid #a67431;border-radius:8px;font:700 12px system-ui;touch-action:manipulation}
#lehrlingKarte{position:fixed;inset:0;z-index:12020;display:grid;place-items:center;padding:12px;background:#49382cb8;box-sizing:border-box}
#lehrlingKarte[hidden],#lehrlingProfi[hidden]{display:none}html body #lehrlingZiel[hidden]{display:flex!important;visibility:hidden}
.lehrlingBlatt{position:relative;max-width:540px;max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:24px 32px;text-align:center;border:4px solid #6b4d30;border-radius:20px;background:linear-gradient(120deg,#fff4d2,#e6cd94);color:#493d32;box-shadow:0 8px 0 #5b4433}.lehrlingBlatt:has(.gkKiAusbeute){overflow:visible}.lehrlingBlatt .gkKiAusbeute{position:fixed;inset:0;padding:12px}.lehrlingBlatt .gkKiKarte{box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto}
.lehrlingBlatt small{font:900 11px system-ui;letter-spacing:1px}.lehrlingBlatt h2{font:32px/1.1 'Gustav Display',system-ui;margin:10px 0}.lehrlingBlatt p{font:700 15px/1.4 system-ui;margin:12px 0}.lehrlingBlatt button{min-height:48px;padding:10px 22px;border:3px solid #5b4433;border-radius:12px;background:#92d579;color:#493d32;font:900 15px system-ui;touch-action:manipulation;cursor:pointer}.lehrlingMuenzen{display:none;font:900 38px system-ui;color:#a77006}.feier .lehrlingMuenzen{display:block;animation:lehrlingRegen 1.1s ease-out 2}.lehrlingLeise{filter:grayscale(1);box-shadow:none!important}
@keyframes lehrlingRegen{from{transform:translateY(-18px);opacity:.2}to{transform:translateY(8px);opacity:1}}/* PERF 12.10.: Puls als Pseudo-Element mit Opacity statt box-shadow/filter auf dem Knopf - lief sonst als Hauptthread-Animation (Stil+Paint je Bild in der Lehrling-Phase). */}
.istLehrling #coach{display:none!important}.istLehrling #fahrt-ui #distPill{visibility:hidden}
@media(max-height:450px){#lehrlingZiel{top:8px;left:53%;max-width:45vw;font-size:11px;padding:6px 10px}#lehrlingProfi{top:62px;font-size:11px;min-height:34px}.lehrlingBlatt{padding:16px 24px;max-width:480px}.lehrlingBlatt h2{font-size:27px}.lehrlingBlatt p{font-size:13px}#kopfEmpfehlung{width:80px;min-height:46px;flex-wrap:nowrap}#kopfEmpfehlung small{display:none}#fahrt-ui #meters{bottom:6px!important;top:auto!important;left:auto!important;right:8px!important}#mkKorb{bottom:64px!important;top:auto!important}}
@media(prefers-reduced-motion:reduce){.feier .lehrlingMuenzen{animation:none!important}}
.istLehrling #geistHand .ghText{display:none!important}.istLehrling #tvDist{visibility:hidden}.istLehrling #fixerBox{display:none!important}
@media(max-height:450px){#lehrlingZiel{left:260px;right:8px;max-width:530px;transform:none}}
@media(max-height:450px){#lehrlingZiel[data-schritt="4"]{left:320px}}
/* MK-19: ein Zielstreifen, eine Karte; freie mobile Fahrbahn. */
#lehrlingZiel{display:flex;flex-wrap:wrap;align-items:center;gap:10px}#lehrlingZiel>span{flex:1}   /* hud-fahrt-10: der Profi-Link rutscht unter den Text, der Text bekommt die volle Breite */
#lehrlingZiel #lehrlingProfi{position:static;transform:none;flex:0 0 100%;min-height:24px;margin-top:-8px;padding:0 5px;border:0;background:none;font-size:11px;text-align:right;text-decoration:underline;pointer-events:auto;max-width:none}
#lehrlingKarte{background:#49382c}.lehrlingDialog #lehrlingZiel,.lehrlingDialog #fahrt-ui,.lehrlingDialog #hudMeldung,.lehrlingDialog #mkKorb{visibility:hidden}
/* PERF 12.10.: Klasse statt :has() - :has() liess jede DOM-Aenderung im Spiel (Zaehler, Hinweise) den ganzen Body neu stylen (~16 % Hauptthread). lehrling_ui.js setzt hatAusbeute. */.lehrlingBlatt.hatAusbeute>:not([data-lehrling-kiste]){visibility:hidden}.lehrlingBlatt.hatAusbeute{background:none;border-color:transparent;box-shadow:none}.lehrlingBlatt .gkKiAusbeute{background:#49382c}
.feier .lehrlingMuenzen{display:block;position:fixed;inset:0;overflow:hidden;pointer-events:none;animation:none}.lehrlingMuenzen i{position:absolute;left:var(--x);top:-55px;display:grid;place-items:center;width:32px;height:32px;border:3px solid #9c590e;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff8a1,#ffc12e 65%,#cc7a11);box-shadow:inset 0 0 0 3px #ffe778,2px 3px 0 #754215;color:#925308;font:900 20px/1 system-ui;animation:mk19Muenze 1.5s var(--delay) ease-in both}
@keyframes mk19Muenze{0%{transform:translate(0,-40px) rotateY(0)}100%{transform:translate(var(--drift),calc(100dvh + 100px)) rotateY(720deg)}}
@media(max-height:450px){#fahrt-ui #meters{width:176px;transform:none;right:8px!important;bottom:8px!important}#mkKorb{right:192px!important;bottom:8px!important;max-width:154px!important;min-height:40px!important;font-size:10px!important}#kopfEmpfehlung{width:70px;min-height:44px}#lehrlingZiel{font-size:10px;padding:4px 6px;gap:4px}#lehrlingZiel #lehrlingProfi{font-size:11px;max-width:none}#tutorial{top:70px!important;bottom:auto!important;max-width:260px!important}}
@media(prefers-reduced-motion:reduce){.lehrlingMuenzen i{animation-duration:.01s}}

/* MK-19: dieselbe Farbe an Hindernis, Vorschau, Kopf und Funken. */
#fahrt-ui .toolBtn{border-color:var(--brassL,#f1cd55)!important}.toolBtn.fehlkopf{animation:mk19Fehl .24s steps(2) infinite!important}#kopfEmpfehlung>span{border-radius:50%;padding:3px}
@keyframes mk19Fehl{50%{filter:grayscale(1);box-shadow:0 0 0 4px #999}}
#bestwertTakt{position:fixed;top:66px;left:50%;transform:translateX(-50%);background:#fff0b3;color:#493d32;border:2px solid #816226;border-radius:10px;padding:7px 12px;font:800 14px system-ui;pointer-events:none}#bestwertTakt[hidden]{display:none}#bestwertTakt.rekord{font-size:22px;box-shadow:inset 0 0 0 2px #ffd638;animation:gkZielPuls .5s}
#mkWalze{display:none!important}#fahrt-ui #vorratTitel{display:none}#fahrt-ui #vorrat{bottom:64px}
#fahrt-ui #comboV{display:block;font-size:12px;white-space:nowrap}#schichtende.peak-end #seNeu{min-height:52px;font-size:20px}
@media(max-height:450px){#bestwertTakt{top:54px;font-size:11px;padding:4px 8px}#bestwertTakt.rekord{font-size:18px}}
/* B10 Zielchip: Fortschritt als Farbfuellung (--p), nah = Puls; Serie-Leiste + Comeback-Karte */
#bestwertTakt{--p:0%;background:linear-gradient(90deg,#ffd638 var(--p),#fff0b3 var(--p))}#bestwertTakt.nah{animation:gkZielPuls .5s ease-in-out infinite alternate}@keyframes gkZielPuls{from{border-color:#816226}to{border-color:#ffca35}}
.ende-serie{display:flex;gap:4px;justify-content:center;align-items:center;margin:4px 0}.ende-serie .gkKiSprite{height:22px;width:auto;opacity:.3}.ende-serie .ist-da{opacity:1}.ende-serie .ist-morgen{opacity:.85;animation:gkKiWippen 1.6s ease-in-out infinite}.ende-serie .ist-stern{filter:drop-shadow(0 0 5px #ffd638)}.ende-serie-lbl{font:800 11px system-ui;color:#fff0b3;margin-left:6px}
.gkComeback{margin:8px 0;padding:12px 14px;border-radius:14px;background:#fff0b3;color:#493d32;border:2px solid #816226;text-align:center;display:grid;gap:6px;justify-items:center}.gkComebackTitel{margin:0;font:900 20px system-ui}.gkComebackSatz,.gkComebackKiste{margin:0;font:700 13px system-ui}.gkComebackSprite{height:48px;width:auto}
/* MOBIL-1014-01: Comeback als kompakte Leiste (Titel + Kistenzeile | Kiste | LOS). "Rohr reinigen" bleibt auf jedem Handy ueber dem Falz. */
.gkHubPane>.gkComeback{flex:none;margin:0;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;justify-items:start;gap:0 10px;padding:4px 6px 4px 12px;text-align:left;border-radius:12px;box-shadow:0 3px 0 #81622655}
.gkHubPane>.gkComeback .gkComebackTitel{grid-column:1;font:900 16px/1.1 'Gustav Display',system-ui,sans-serif;letter-spacing:.03em;color:#5b4433;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gkHubPane>.gkComeback .gkComebackSatz,.gkHubPane>.gkComeback .gkComebackKiste{grid-column:1;font:800 11px/1.2 var(--gk-body);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gkHubPane>.gkComeback .gkComebackSprite{grid-column:2;grid-row:1/span 3;height:34px}
.gkHubPane>.gkComeback .gkBtn{grid-column:3;grid-row:1/span 3;min-width:64px;min-height:44px;padding:0 14px;font-size:16px}
@media(max-height:500px){.gkHubPane>.gkComeback .gkComebackSatz{display:none}}
@media(min-height:600px){.gkHubPane>.gkComeback{padding:8px 10px 8px 18px;gap:2px 16px}.gkHubPane>.gkComeback .gkComebackTitel{font-size:24px}.gkHubPane>.gkComeback .gkComebackSatz,.gkHubPane>.gkComeback .gkComebackKiste{font-size:15px}.gkHubPane>.gkComeback .gkComebackSprite{height:56px}.gkHubPane>.gkComeback .gkBtn{min-height:54px;min-width:96px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.toolBtn.fehlkopf,#bestwertTakt.rekord,#bestwertTakt.nah,.ende-serie .ist-morgen{animation:none!important}}

#fahrt-ui>#comboV{position:fixed;left:12px;bottom:84px;padding:5px 9px;border:2px solid #54714f;border-radius:12px;background:#fff1bc;color:#28412c;pointer-events:none;opacity:1}#fahrt-ui>#comboV.gedaempft{opacity:.7}

#bestwertTakt{left:12px;top:66px;transform:none;transform-origin:left center;max-width:225px;box-sizing:border-box}#bestwertTakt.rekord{font-size:19px}body.gg-h-lern:not(#gg-nie) #kopfEmpfehlung,body.gg-h-lern:not(#gg-nie) #tutorial{visibility:hidden}

/* MK-19 Sichtprüfung: Prozente unter dem ganzen Wort; leere Fundzeile schrumpft nicht in sich zusammen. */
@media(max-height:450px){#fahrt-ui #meters .mLbl{flex-direction:column;gap:1px}#fahrt-ui #meters .mLbl>span{flex:0 0 auto!important;max-width:100%;font-size:8px!important}#fahrt-ui #meters .mLbl>span:last-child{font-size:11px!important;align-self:flex-end}}
#schichtende.peak-end>.mkTischLeer{flex-shrink:0;min-height:0;margin:0;padding:2px 6px;background:none;color:#5e503c}#schichtende.peak-end>.mkTischLeer>h2{font:700 11px/1.2 system-ui;margin:0;text-shadow:none}#schichtende.peak-end>.mkTischLeer>p{display:none}
/* MK-21: eine Bühne. Keine alte Formular-/Trophäen-Pipeline darunter. */
#schichtende.peak-end.mk21-ende{overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#765641 0,#49382c 52%,#49382c 100%);color:#fff0ce;gap:8px;padding:16px;isolation:isolate}
#schichtende.mk21-ende::before{content:'';position:absolute;inset:14px;border:1px solid #f1ce8533;border-radius:24px;pointer-events:none;z-index:-1}
#schichtende.mk21-ende>.abschluss.schicht-buehne,.schicht-buehne{display:grid;grid-template-columns:1fr;gap:10px;width:min(690px,96vw);max-width:690px;padding:0;border:0;background:none;box-shadow:none;color:#fff0ce}
.schicht-buehne .ende-szene{position:relative;height:300px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding-top:60px;box-sizing:border-box}
.schicht-buehne .abschluss-bild{width:240px;height:240px;object-fit:contain;align-self:end;filter:drop-shadow(0 10px 6px #49382c55)}
.schicht-buehne .ende-spruch{position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(-1deg);width:max-content;max-width:92%;box-sizing:border-box;padding:12px 20px;margin:0;border:2px solid #503d29;border-radius:19px;background:#fff0c8;color:#3d382b;font:800 19px/1.2 'Gustav Display',system-ui;box-shadow:0 4px 0 #5b443344;text-align:center;z-index:2}
.ende-spruch::after{content:'';position:absolute;bottom:-9px;left:45%;width:14px;height:14px;background:#fff0c8;transform:rotate(45deg);border-right:2px solid #503d29;border-bottom:2px solid #503d29}
.ende-lohn{display:grid;justify-items:center;gap:4px}.schicht-buehne .abschluss-zahl{font:900 66px/1 'Gustav Display',system-ui;color:#ffd773;text-shadow:0 3px 0 #80522b,0 6px 15px #5b443366;font-variant-numeric:tabular-nums}.ende-meter{font:700 14px/1.2 system-ui;color:#e7dab6}
.ende-ziel{position:relative;width:min(420px,88vw);justify-self:center;display:grid;gap:7px;font:700 14px/1.2 system-ui;text-align:center}.ende-ziel:has(.ende-upgrade){padding-left:44px;box-sizing:border-box}.ende-upgrade{position:absolute;left:0;top:-4px;width:38px;height:38px;object-fit:contain}.ende-ziel .abschluss-balken{height:9px;border:1px solid #c4ba8155;background:#49382c}.ende-ziel .abschluss-balken::-webkit-progress-bar{background:#49382c}.ende-ziel .abschluss-balken::-webkit-progress-value{background:linear-gradient(90deg,#75ba7c,#efd56d)}
.ende-portrait.mkPortrait{position:relative;margin:0;padding:0;width:235px;height:250px;border:0;background:none;box-shadow:none;flex-shrink:0}.ende-portrait canvas{display:block!important;width:100%!important;height:100%!important;object-fit:contain;border:0;background:none}.ende-portrait button{position:absolute;right:0;bottom:28px;width:44px;min-height:44px;padding:0;border:1px solid #edd89988;border-radius:50%;background:#49382c;color:#ffe3a0;font-size:25px;cursor:pointer}.ende-portrait [role=status]{position:absolute;bottom:0;font-size:10px}.ende-tagesfund{position:absolute;bottom:4px;left:18%;transform:rotate(-9deg);background:#fbd668;color:#433925;padding:4px 9px;border-radius:5px;font:900 13px system-ui}
.ende-fehler{font:700 13px system-ui;color:#ffd773;margin:0}
#schichtende.mk21-ende>#seNeu{width:min(420px,85vw);min-height:54px;font:900 23px 'Gustav Display',system-ui;animation:ende-einladung 1.4s ease-in-out 1s 3}
#schichtende.mk21-ende>#seZentrale{background:none;border:0;box-shadow:none;color:#e2d5b7;min-height:44px;padding:4px;font-size:13px;width:200px;letter-spacing:0;text-decoration:underline;text-underline-offset:3px}
#schichtende.mk21-ende>.reinigung-share,#schichtende.mk21-ende>.mkPortrait,#schichtende.mk21-ende>.mkTisch,#schichtende.mk21-ende>.mkTischLeer,#schichtende.mk21-ende>#seLuft{display:none!important}
@keyframes ende-einladung{50%{filter:brightness(1.14);box-shadow:0 4px 0 #765641,inset 0 0 20px #ffe9a766}}
@media(max-height:500px){#schichtende.peak-end.mk21-ende{padding:8px;gap:2px}.schicht-buehne .ende-szene{height:156px;padding-top:38px}.schicht-buehne .abschluss-bild{width:146px;height:124px}.schicht-buehne .ende-spruch{font-size:16px;padding:7px 15px;max-width:96%}.schicht-buehne .abschluss-zahl{font-size:46px}.schicht-buehne .ende-meter{font-size:12px}.schicht-buehne .ende-ziel{font-size:12px;gap:4px}#schichtende.mk21-ende>.abschluss.schicht-buehne{gap:5px}.ende-portrait.mkPortrait{width:170px;height:140px}.ende-portrait button{right:-20px;bottom:5px;transform:scale(.85)}#schichtende.mk21-ende>#seNeu{min-height:46px;font-size:21px}#schichtende.mk21-ende>#seZentrale{min-height:44px;font-size:12px}.ende-tagesfund{font-size:10px;left:18%;bottom:0}}
/* L031: kurze Landschaftsfenster behalten Bild, Lohn und beide Aktionen. */
@media (min-width:600px) and (max-height:450px){
  #schichtende.peak-end.mk21-ende{overflow-y:auto;overflow-x:hidden}
  #schichtende.mk21-ende>.abschluss.schicht-buehne{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;column-gap:20px;align-items:center}
  #schichtende.mk21-ende .ende-szene{grid-column:1;grid-row:1/3}
  #schichtende.mk21-ende .ende-lohn{grid-column:2;grid-row:1;align-self:end}
  #schichtende.mk21-ende .ende-ziel,#schichtende.mk21-ende .ende-fehler{grid-column:2;grid-row:2;width:100%;align-self:start}
  #schichtende.mk21-ende .ende-portrait canvas{margin:0}
  #schichtende.mk21-ende .ende-portrait button{transform:none}
}
@media(prefers-reduced-motion:reduce){#schichtende.mk21-ende>#seNeu{animation:none}.schicht-buehne *{animation:none!important;transition:none!important}}
#schichtende.mk21-ende:has(.ende-ruhig)>#seNeu{animation:none}
/* B10: vorhandener Kistenteaser bleibt auch im flachen Ergebnis sichtbar. */
#schichtende.peak-end.mk21-ende>#seKiste{display:flex;flex-shrink:0;max-width:min(690px,96vw);box-sizing:border-box;padding:3px 8px;gap:3px 8px;font-family:var(--gk-body,system-ui,sans-serif)}   /* Abnahme ende-10 12.11.: keine dritte Schrift (Bahnschrift nur unter Windows) */
#schichtende.peak-end.mk21-ende #seKisteInfo{white-space:normal;text-align:center;padding:2px 6px}
@media(max-height:450px){#schichtende.peak-end.mk21-ende>#seKiste{font-size:10px;padding:2px 6px}#schichtende.peak-end.mk21-ende #seKisteInfo{font-size:10px}#schichtende.peak-end.mk21-ende #seKiste .gkKiSprite{height:20px}}
#lehrlingKarte .lehrling-herz{width:160px;height:140px;object-fit:contain;display:block;margin:auto}
@media(max-height:450px){#lehrlingKarte .lehrling-herz{height:100px;width:140px}}
.ende-portrait button{font-family:system-ui,sans-serif!important}
#lehrlingKarte.mk21-lehrling{background:radial-gradient(ellipse at 50% 30%,#765641,#49382c)}
#lehrlingKarte.mk21-lehrling .lehrlingBlatt{width:min(690px,94vw);padding:8px;border:0;background:none;box-shadow:none;max-height:100%;overflow:hidden;color:#fff0ce}
#lehrlingKarte.mk21-lehrling .lehrlingBlatt>small,#lehrlingKarte.mk21-lehrling .lehrlingBlatt>h2,#lehrlingKarte.mk21-lehrling .lehrlingBlatt>p,#lehrlingKarte.mk21-lehrling .lehrlingMuenzen{display:none}
#lehrlingKarte.mk21-lehrling .schicht-buehne{width:100%}#lehrlingKarte.mk21-lehrling .ende-spruch{margin:0;color:#3d382b;font-size:19px}#lehrlingKarte.mk21-lehrling .ende-meter{display:none}
@media(max-height:500px){#lehrlingKarte.mk21-lehrling .ende-spruch{font-size:16px}#lehrlingKarte.mk21-lehrling .schicht-buehne{gap:5px}}
/* Kevin 09.10. abends: Lehrling = Gustav spricht (Sprechblase links unter der Leiste, Mitte bleibt frei fuer Meter/Euro) */html body #lehrlingZiel{top:calc(60px + env(safe-area-inset-top,0px))!important;left:calc(10px + env(safe-area-inset-left,0px))!important;right:auto!important;max-width:min(380px,46vw)!important;transform:none!important;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px!important;border-radius:20px 20px 20px 6px!important;background:rgba(255,250,240,.78)!important;border:3px solid #f2b632!important;color:#2b2015!important;font:800 15px/1.25 system-ui,sans-serif!important;box-shadow:0 4px 0 #a8742a,0 8px 18px rgba(0,0,0,.25)!important;text-align:left!important}#lehrlingZiel .lzGustav{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#ffd23f;border:2px solid #a8742a}#lehrlingZiel[data-art=fett]{border-color:#f1cd55!important}#lehrlingZiel[data-art=schacht],#lehrlingZiel[data-art=lob]{border-color:#5bc46a!important}#lehrlingZiel.neu .lzGustav{animation:lzNick .45s ease-out}#lehrlingZiel.neu>span{animation:lzText .3s ease-out}@keyframes lzNick{0%{transform:rotate(0) scale(1)}35%{transform:rotate(-10deg) scale(1.12)}70%{transform:rotate(6deg)}100%{transform:none}}@keyframes lzText{from{opacity:.2;transform:translateX(-6px)}to{opacity:1;transform:none}}@media(max-height:450px){html body #lehrlingZiel{top:calc(58px + env(safe-area-inset-top,0px))!important;font-size:11.5px!important;max-width:min(280px,34vw)!important;box-sizing:border-box;gap:6px;padding:5px 8px 5px 5px!important;border-width:2px!important}#lehrlingZiel .lzGustav{width:28px;height:28px;flex-basis:28px}}@media(prefers-reduced-motion:reduce){#lehrlingZiel.neu .lzGustav,#lehrlingZiel.neu>span{animation:none}}body.gg-h-ziel:not(#gg-nie) #geistHand .ghText{display:block!important;visibility:hidden}

/* AP7: Hinweis lebt auf der echten Kopfkarte, Form bleibt ohne Farberkennung lesbar. */
[data-tool].kopfEmpfohlen{z-index:8}   /* Kevin 20.10.: kein Farbrand/Puls/Badge - nur Gustavs Handschuh (.werkzeugHand) */
@keyframes kopfEmpfehlungPuls{50%{transform:scale(1.15)}}
[data-tool].kopfAutoKlack{animation:kopfAutoKlack .35s ease-out}
@keyframes kopfAutoKlack{0%{transform:rotate(-18deg) scale(.8)}60%{transform:rotate(7deg) scale(1.2)}100%{transform:rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){[data-tool].kopfEmpfohlen,[data-tool].kopfAutoKlack{animation:none}}
/* T3 Misch-Walze: 1 Punkt = naechster, 2 Punkte = uebernaechster Kopf; innerhalb der Karte, kein Text, keine neue Ebene */


/* AP5: erarbeiteter Lehrlingslohn und acht feste, rein optische Muenzboegen. */
.istLehrling #fahrt-ui #coinHud{display:flex!important;top:8px;left:auto;right:8px;width:100px;min-height:40px;box-sizing:border-box;justify-content:center;gap:4px;border:2px solid #80613d;background:#fff0ca;color:#523b24;border-radius:12px;z-index:4}
.ggMuenzBogen{position:fixed;left:-10px;top:-10px;width:20px;height:20px;display:grid;place-items:center;border:2px solid #9f651d;border-radius:50%;background:#ffd45e;color:#8b551d;font:bold 15px system-ui;pointer-events:none;z-index:300;will-change:transform}.ggMuenzBogen[hidden]{display:none}

/* New-save four-tool introduction: anchor above the requested tool, never over its input. */
/* Kevin 13.10.: Gustavs Blase lag ueber den Werkzeugkoepfen - jetzt oben links unter der Leiste, die Koepfe bleiben frei */html body #lehrlingZiel.einstiegHinweis{top:calc(62px + env(safe-area-inset-top,0px))!important;bottom:auto!important;left:calc(8px + env(safe-area-inset-left,0px))!important;right:auto!important;max-width:264px!important;width:264px!important;transform:none!important;pointer-events:none}
html body #lehrlingZiel.einstiegHinweis #lehrlingProfi{pointer-events:auto}

/* Native end reason stays readable beside the compact landscape result. */
#schichtende.mk21-ende .ende-ursache{max-width:580px;justify-self:center;text-align:center;min-width:0}
#schichtende.mk21-ende .ende-grund{display:block;font-size:18px;line-height:1.15;color:#fff0ce}
#schichtende.mk21-ende .ende-tipp{margin:4px 0 0;color:#e7dab6;font-size:14px;line-height:1.3;max-height:5.2em;overflow:auto}
@media(max-height:500px){#schichtende.mk21-ende .ende-ursache{max-width:640px}#schichtende.mk21-ende .ende-grund{font-size:15px}#schichtende.mk21-ende .ende-tipp{font-size:12px;line-height:1.2;max-height:3.6em;margin-top:2px}#schichtende.mk21-ende .ende-szene{height:128px;padding-top:30px}#schichtende.mk21-ende .ende-szene img{height:108px}}
@media(min-width:600px) and (max-height:350px){#schichtende.mk21-ende>.abschluss.schicht-buehne{grid-template-rows:auto auto auto}#schichtende.mk21-ende .ende-szene{grid-row:1/4}#schichtende.mk21-ende .ende-ursache{grid-column:2;grid-row:1}#schichtende.mk21-ende .ende-lohn{grid-column:2;grid-row:2}#schichtende.mk21-ende .ende-ziel,#schichtende.mk21-ende .ende-fehler{grid-column:2;grid-row:3}#schichtende.mk21-ende .ende-tipp{max-height:4.8em}#schichtende.mk21-ende .abschluss-zahl{font-size:36px}}
/* MOBIL-1014-07: Coaching-Satz endet sauber mit "…" statt mitten im Wort (Silbentrennung de); "Zur Zentrale" ist ein echter
   Zweitknopf. Auf niedrigen Querformaten stehen NOCHMAL und Zentrale nebeneinander, unten frei vom Home-Indicator. */
#schichtende.mk21-ende .ende-tipp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;max-height:none;hyphens:auto;-webkit-hyphens:auto}
#schichtende.mk21-ende>#seZentrale{width:auto;min-width:160px;min-height:48px;padding:0 20px;border:2px solid #a77c52;border-radius:12px;background:#49382c;box-shadow:0 4px 0 #5b4433;color:#fff0ce;font:900 16px 'Gustav Display',system-ui;letter-spacing:.03em;text-decoration:none}
@media(max-height:500px){#schichtende.mk21-ende .ende-tipp{-webkit-line-clamp:3}}
@media(min-width:600px) and (max-height:450px){
  #schichtende.peak-end.mk21-ende{flex-flow:row wrap;align-content:safe center;column-gap:10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  #schichtende.peak-end.mk21-ende>#seNeu{width:min(420px,56vw);min-height:48px}
  #schichtende.peak-end.mk21-ende>#seZentrale{min-height:48px}
}

@media(min-height:451px){html body #lehrlingZiel.einstiegHinweis{max-width:360px!important;width:360px!important}}

#fahrt-ui.startSzeneSichtbar #kurzlinerAnz{left:120px!important;top:66px!important}

.ende-hofstaat:not(.ist-schmoll) .ende-hofstaat-ruf{position:relative}.ende-hofstaat:not(.ist-schmoll) .ende-hofstaat-ruf::after{content:'✦';position:absolute;right:-12px;top:-12px;color:#ffd84a;text-shadow:0 0 3px #80530d;font-size:14px;animation:koenigGlitzer 1.6s ease-in-out infinite}   /* Koenig-Grinsen-Glitzer (Herz 14.10.) */
@keyframes koenigGlitzer{0%,100%{transform:scale(.6) rotate(0);opacity:.4}50%{transform:scale(1.25) rotate(45deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.ende-hofstaat .ende-hofstaat-ruf::after{animation:none}}

/* Near-Miss bleibt innerhalb der bestehenden Pegelanzeige; kein neuer Layer. */
#kellerBox.gg-nah-gerettet{background-color:#80d693!important;box-shadow:inset 0 0 0 2px #e8ffca!important}
#kurzlinerAnz{position:fixed!important;right:auto!important}

/* Enges Querformat: Euro/Meter und Stufentitel bleiben zwischen Navigation und Pegel. */
@media(max-width:720px){#reinigung-stand{left:49%!important;gap:8px!important}#reinigung-stand .clean-distance,#reinigung-stand .clean-number>small{font-size:24px!important}#reinigung-stand .clean-titel{top:30px;font-size:9px;letter-spacing:.025em}}

/* Dringlichkeit bleibt innerhalb des Pegel-HUD statt als Ganzbildschatten. */
body.gg-h-kritisch.gg-h-kritisch:not(#gg-nie) #kellerBox{box-shadow:inset 0 0 0 3px #d84224;background-color:#ffd18e}
body.gg-h-stufe1.gg-h-stufe1:not(#gg-nie) #kellerBox{box-shadow:inset 0 0 0 2px #dc7143}
/* B5: eigene Comic-Szene; alle anderen Buehnen sind aus dem Layout entfernt. */
body.hof-comic-aktiv > :not(.hof-comic) { display:none!important; }
.hof-comic { width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;position:fixed;inset:0;z-index:1000;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 45%,#795136,#241b21 85%);overflow:hidden; }
.hof-comic > canvas { display:block;flex:none;width:min(820px,calc((100dvh - 88px)*16/9),calc(100vw - 32px));height:auto;aspect-ratio:16/9;border-radius:14px;box-shadow:0 0 0 3px #efc16f,0 12px 36px #5b4433; }
.hof-comic-skip { position:static;flex:none;min-height:42px;padding:8px 24px;border:2px solid #76512b;border-radius:13px;background:#ffe7ad;color:#392c27;font:900 15px Gustav,system-ui,sans-serif;cursor:pointer; }
.hof-comic-skip:focus-visible { outline:3px solid #fff;outline-offset:3px; }
.hofSeite { display:flex;flex-direction:column;gap:14px;min-width:0; }
.hofSeite .gkHubBack { position:relative;align-self:flex-start; }   /* STORY-1014: relative, sonst lag die 44-px-Trefferflaeche (::after) mitten ueber der Galerie (Desktop) */
.hofPanels,.hofAlbum { display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); }
.hofPanel,.hofKachel { min-width:0;margin:0;border:2px solid #9a7446;border-radius:12px;overflow:hidden;background:#49352b;color:#fff0ce; }
.hofPanel.isJetzt { border-color:#ffdd79;box-shadow:inset 0 0 0 1px #ffdd79; }
.hofPanel canvas,.hofKachel canvas { display:block;width:100%;height:auto; }
.hofPanel figcaption,.hofKachel figcaption { display:flex;flex-direction:column;gap:4px;padding:8px;font:700 13px/1.3 Gustav,system-ui,sans-serif; }
.hofPanel small,.hofKachel small { color:#e8d1aa;font-size:11px; }
.hofKachel.isBoss { border-color:#cfab55; }.hofPlatt { color:#ffda74; }
@media (max-height:400px) { .hof-comic { gap:8px;padding-top:8px;padding-bottom:8px; }.hof-comic > canvas { width:min(820px,calc((100dvh - 72px)*16/9),calc(100vw - 32px)); }.hofPanels,.hofAlbum { grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); } }
/* STORY-1014 (Kevin 14.10. abends): illustrierte Strips statt Canvas-Comics. Strip gross und mittig, Bilder im 0,9-s-Takt mit Pop und Mini-Kamerafahrt,
   dann die gezackte Comic-Blase. .isVoll (Tippen) und reduced-motion zeigen alles sofort. Knopf rechts unten schliesst immer. */
.hof-comic { --stripH:min(560px,calc(100dvh - 28px),calc((100vw - max(14px,env(safe-area-inset-left)) - max(14px,env(safe-area-inset-right)) - 30px) * 720 / 1680)); cursor:pointer; }
.hof-comic > .hof-comic-skip { position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));min-width:46px;min-height:46px;padding:0 12px;border-radius:23px;font-size:26px;line-height:1;opacity:.95;box-shadow:0 4px 14px rgba(20,12,10,.5); }
.hof-comic[data-art=strip]:not(.isVoll) > .hof-comic-skip { opacity:.78; }
.hofStrip { position:relative;display:flex;gap:6px;height:var(--stripH);flex:none; }
.hofStripBild { position:relative;flex:none;height:100%;overflow:hidden;border-radius:7px;background:#49382c;box-shadow:0 0 0 2px #f3dfae,0 10px 26px rgba(91,68,51,.6);animation:hofBildEin .52s cubic-bezier(.2,1.45,.45,1) both;animation-delay:calc(var(--i) * .9s); }
.hofStripKamera { position:absolute;inset:0;background-repeat:no-repeat;background-size:auto 100%;background-position:calc(var(--stripH) * var(--a) / -720) 0;animation:hofKameraZu 2.6s cubic-bezier(.25,.6,.3,1) both;animation-delay:calc(var(--i) * .9s); }
.hofStripBild:nth-child(2) > .hofStripKamera { animation-name:hofKameraSchwenk;transform-origin:30% 50%; }
.hofStripBild:nth-child(3) > .hofStripKamera { animation-name:hofKameraRan;transform-origin:50% 40%; }
.hofBlase { position:absolute;z-index:2;isolation:isolate;translate:-50% -50%;rotate:-6deg;padding:.62em 1.35em;white-space:nowrap;color:#ffd84a;font:400 max(18px,calc(var(--stripH) * .085))/1 Gustav,system-ui,sans-serif;letter-spacing:.02em;-webkit-text-stroke:1px #2a1a10;text-shadow:0 3px 0 #2a1a10,2px 2px 0 #2a1a10,-2px 2px 0 #2a1a10,2px -2px 0 #2a1a10,-2px -2px 0 #2a1a10,0 -2px 0 #2a1a10,2px 0 0 #2a1a10,-2px 0 0 #2a1a10;animation:hofBlaseEin .5s cubic-bezier(.2,1.7,.4,1) both,hofBlaseWackel 1.7s ease-in-out infinite alternate;animation-delay:calc(var(--i) * .9s + .1s),calc(var(--i) * .9s + .6s); }
.hofBlase::before,.hofBlase::after { content:'';position:absolute;z-index:-1;clip-path:polygon(50.0% 0.0%,61.3% 11.6%,78.1% 6.3%,80.2% 23.8%,96.4% 28.8%,89.6% 44.3%,99.5% 57.1%,86.4% 66.6%,89.3% 84.1%,71.6% 83.7%,64.4% 98.9%,50.0% 90.0%,35.9% 98.0%,28.4% 83.7%,10.7% 84.1%,13.6% 66.6%,-0.5% 57.3%,10.4% 44.3%,4.5% 29.2%,19.8% 23.8%,21.9% 6.3%,38.7% 11.6%); }
.hofBlase::before { inset:-7px -12px;background:#2a1a10; }
.hofBlase::after { inset:-2px -5px;background:radial-gradient(ellipse at 45% 35%,#fffbe8,#ffeeb4 70%); }
.hof-comic.isVoll .hofStripBild,.hof-comic.isVoll .hofStripKamera,.hof-comic.isVoll .hofBlase { animation:none; }
@media (prefers-reduced-motion:reduce) { .hofStripBild,.hofStripKamera,.hofBlase { animation:none!important; } }
@keyframes hofBildEin { 0% { opacity:0;transform:translateY(18px) scale(.8) rotate(-3deg); } 62% { opacity:1;transform:translateY(-3px) scale(1.04) rotate(.7deg); } 100% { opacity:1;transform:none; } }
@keyframes hofKameraZu { from { transform:scale(1.16) translate(2.5%,1.5%); } to { transform:none; } }
@keyframes hofKameraSchwenk { from { transform:scale(1.12) translateX(-4%); } to { transform:none; } }
@keyframes hofKameraRan { from { transform:none; } to { transform:scale(1.07); } }
@keyframes hofBlaseEin { 0% { opacity:0;scale:.2;rotate:-24deg; } 70% { opacity:1;scale:1.14;rotate:-3deg; } 100% { opacity:1;scale:1;rotate:-6deg; } }
@keyframes hofBlaseWackel { from { scale:1; } to { scale:1.05; } }
/* STORY-1014 Prolog-Film: Video bildfuellend auf Schwarz; ▸▸ erst nach dem ersten Tippen (+1 s), zweites Tippen ueberspringt. */
.hofFilm.hof-comic { padding:0;background:#000; }
.hofFilm > video { display:block;width:100%;height:100%;object-fit:contain;pointer-events:none; }
.hofFilm > .hofFilmSkip { opacity:0;pointer-events:none;transition:opacity .25s; }
.hofFilm.isSkip > .hofFilmSkip { opacity:.9;pointer-events:auto; }
/* STORY-1014 Galerie: freie Strips als Bild zum Wiederansehen, Kanal-Kino nur mit vorhandenem Film. */
.hofStripKnopf,.hofKinoKnopf { display:block;width:100%;padding:0;border:0;background:#49382c;cursor:pointer; }
.hofStripKnopf img { display:block;width:100%;height:auto;aspect-ratio:1680/720;object-fit:cover; }
.hofStripKnopf:focus-visible,.hofKinoKnopf:focus-visible { outline:3px solid #ffdd79;outline-offset:-3px; }
.hofKinoKnopf { aspect-ratio:1680/720;color:#fff3cf;font:400 34px/1 Gustav,system-ui,sans-serif;text-shadow:0 2px 0 #2a1a10;background:linear-gradient(rgba(20,14,12,.45),rgba(20,14,12,.45)),url('./assets/story/comic_prolog.webp') 0 50%/auto 100% no-repeat,#49382c; }
.hofKino { border-color:#ffdd79; }

/* ===== RIVE-UI-1014 (Kevin 14.10.: "jedes kleine Detail animieren, leicht dezent") — lebendige Kulisse (v2/kulisse.js).
   Die Ebene liegt exakt wie der Hintergrund (cover, Position center 70%) und rechnet in Bildprozenten (Bild 1920x1072,
   Masse aus tools/rive/kulisse_teile.py). Nur transform/rotate/translate/opacity, nichts davon ist treffbar. ===== */
.ggKulisse { position:absolute; inset:0; overflow:hidden; pointer-events:none; container-type:size; }
.ggKuBild { position:absolute; left:50%; top:70%; width:max(100vw, 179.104vh); aspect-ratio:1920/1072; width:max(100cqw, 179.104cqh); transform:translate(-50%,-70%); filter:var(--grade-backdrop); }
.ggKuBild > i, .ggKuBild > i > b, .ggKuBild > i > s { position:absolute; display:block; }
:root[data-event="halloween"] .ggKulisse[data-kulisse="zentrale"] { display:none; }   /* anderes Bild, andere Uhr */
.gkCentral .ggKuBild { filter:saturate(.85) brightness(.84); }   /* gleiche Farbgebung wie .gkCentral::before */
/* Wanduhr: Zifferblatt ohne Zeiger aus dem Bild, Zeiger neu in Bildfarbe, echte Uhrzeit (kulisse.js stellt sie) */
.ggKuUhr { left:79.1667%; top:24.4403%; width:5.2083%; height:9.3284%; background:url('./assets/kulisse/uhr_blatt.webp') center/100% 100% no-repeat; }
.ggKuUhr > b { left:50%; bottom:50%; border-radius:99px; background:#49382c; transform-origin:50% 100%; }
.ggKuUhr::after { content:''; position:absolute; left:46%; top:46%; width:8%; height:8%; border-radius:50%; background:#49382c; }
.ggKuStd { width:4%; height:25%; margin-left:-2%; rotate:var(--ku-h,120deg); animation:ggKuDreh 43200s linear var(--ku-hv,0s) infinite; }
.ggKuMin { width:3.2%; height:34%; margin-left:-1.6%; rotate:var(--ku-m,0deg); animation:ggKuDreh 3600s linear var(--ku-mv,0s) infinite; }
.ggKuUhr > .ggKuSek { width:2%; height:31%; margin-left:-1%; background:none; rotate:var(--ku-s,0deg); animation:ggKuDreh 60s steps(60,end) var(--ku-sv,0s) infinite; }
.ggKuSek > s { position:absolute; left:15%; right:15%; top:0; bottom:-22.6%; border-radius:99px; background:#c8452f; transform-origin:50% 81.5%; animation:ggKuTick 1s linear var(--ku-tv,0s) infinite; }
@keyframes ggKuDreh { from { rotate:0deg; } to { rotate:360deg; } }
@keyframes ggKuTick { 0% { rotate:-6deg; animation-timing-function:cubic-bezier(.2,.9,.3,1); } 14% { rotate:1deg; } 24% { rotate:-.3deg; } 32%,100% { rotate:0deg; } }
/* Licht durch das offene Rolltor: atmet langsam, darin schwebt Staub */
.ggKuLicht { left:8.3%; top:35.4%; width:44%; height:64.6%; clip-path:polygon(2% 1%, 43% 1%, 100% 92%, 30% 100%); background:linear-gradient(160deg, rgba(255,238,196,.24), rgba(255,238,196,.06) 60%, rgba(255,238,196,0) 85%); animation:ggKuAtmen 9s ease-in-out infinite alternate; }
@keyframes ggKuAtmen { from { opacity:.55; } to { opacity:1; } }
.ggKuStaubTor { left:9%; top:38%; width:26%; height:46%; }
.ggKuStaubLampe { left:38%; top:27%; width:28%; height:55%; }
.ggKuStaub > b { width:1.4%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,247,220,.95) 0, rgba(255,247,220,.5) 40%, rgba(255,247,220,0) 72%); opacity:0; animation:ggKuStaub 11s ease-in-out infinite; }
.ggKuStaub > b:nth-child(1) { left:12%; top:20%; animation-duration:12s; }
.ggKuStaub > b:nth-child(2) { left:35%; top:55%; animation-duration:10s; animation-delay:-3s; width:1.1%; }
.ggKuStaub > b:nth-child(3) { left:58%; top:30%; animation-duration:14s; animation-delay:-7s; }
.ggKuStaub > b:nth-child(4) { left:80%; top:70%; animation-duration:11s; animation-delay:-1.5s; width:1.8%; }
.ggKuStaub > b:nth-child(5) { left:22%; top:78%; animation-duration:13s; animation-delay:-9s; width:1.1%; }
.ggKuStaub > b:nth-child(6) { left:66%; top:12%; animation-duration:9s; animation-delay:-4.5s; }
.ggKuStaub > b:nth-child(7) { left:46%; top:84%; animation-duration:15s; animation-delay:-11s; width:1.6%; }
.ggKuStaub > b:nth-child(8) { left:8%; top:48%; animation-duration:12.5s; animation-delay:-6s; width:1.2%; }
.ggKuStaub > b:nth-child(9) { left:88%; top:38%; animation-duration:10.5s; animation-delay:-2s; }
@keyframes ggKuStaub { 0% { opacity:0; translate:0 0; } 20% { opacity:.85; } 50% { translate:14px -18px; opacity:.55; } 80% { opacity:.8; } 100% { opacity:0; translate:-6px -34px; } }
/* Werkstatt: Lampe schwingt minimal um den Deckenpunkt, ihr Lichtkegel schwingt mit */
.ggKuLampe, .ggKuLampeLoch { left:41.1458%; top:0; width:20.1042%; height:24.4403%; }
.ggKuLampeLoch { background:url('./assets/kulisse/lampe_loch.webp') center/100% 100% no-repeat; }
.ggKuLampe { background:url('./assets/kulisse/lampe.webp') center/100% 100% no-repeat; transform-origin:49.48% 0; animation:ggKuSchwingen 6.5s ease-in-out infinite alternate; }
.ggKuKegel { left:-38%; top:86%; width:176%; height:270%; clip-path:polygon(37% 0, 63% 0, 100% 100%, 0 100%); background:linear-gradient(rgba(255,226,160,.16), rgba(255,226,160,.05) 55%, rgba(255,226,160,0)); }
@keyframes ggKuSchwingen { from { rotate:-.9deg; } to { rotate:.9deg; } }
/* Pflanze am Fenster wiegt sich um den Stielansatz */
.ggKuPflanze, .ggKuPflanzeLoch { left:62.2917%; top:29.6642%; width:6.9792%; height:10.6343%; }
.ggKuPflanzeLoch { background:url('./assets/kulisse/pflanze_loch.webp') center/100% 100% no-repeat; }
.ggKuPflanze { background:url('./assets/kulisse/pflanze.webp') center/100% 100% no-repeat; transform-origin:51.49% 96.49%; animation:ggKuWiegen 5.2s ease-in-out infinite alternate; }
@keyframes ggKuWiegen { 0% { rotate:-1.6deg; } 60% { rotate:1.1deg; } 100% { rotate:1.8deg; } }
/* Kaffeedampf: in Rive gebaut (tools/rive/kaffee_dampf.py), als 32er-Streifen gebacken, hier nur per steps() verschoben */
.ggKuDampf { left:13.4896%; top:36.4739%; width:6.25%; height:14.9254%; overflow:hidden; }
.ggKuDampf > b { left:0; top:0; width:3200%; height:100%; background:url('./assets/kulisse/dampf.webp') 0 0/100% 100% no-repeat; animation:ggKuDampf 3.2s steps(32,end) infinite; }
@keyframes ggKuDampf { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce) { .ggKulisse * { animation:none !important; } .ggKuStaub, .ggKuDampf { display:none !important; } }
/* ---- RIVE-UI-1014 HUD in der Fahrt: alles bleibt in den eigenen Grenzen (keine Skalierung ueber 1 nach aussen) ---- */
/* HUD-FLIP-02 (Form02 aus hud_flip_cell_1015): jede geaenderte Ziffer klappt wie ein Umklapp-Zaehlwerk. Alte Ziffer (i::before aus data-alt)
   und neue (i > b) klappen um die Zellenmitte; es steht immer genau EIN Zeichen im Kasten, die Zelle behaelt ihre Masse (kein Rollweg, kein Clip-Schnitt).
   Ohne Perspektive ist rotateX(a) exakt scaleY(cos a) und die Rueckseite bleibt verborgen - deshalb reines 2D-scaleY (kein 3D-Layer je Ziffer, Messung
   digitab: rotateX kostete unter CPU-Drossel 4x deutlich Bildrate). Nichts bleibt nach 170 ms zurueck: kein fill-mode. */
#reinigung-stand .zw { display:inline-block; white-space:pre; overflow:clip; padding:.12em .04em; margin:-.12em -.04em; }
#reinigung-stand .zw > i { display:inline-block; position:relative; font-style:normal; }
#reinigung-stand .zw > i > b { display:inline-block; font:inherit; transform-origin:50% 50%; }
#reinigung-stand .zw > i::before { content:none; }
#reinigung-stand .zw > :is(.zwA,.zwB)::before { content:attr(data-alt); position:absolute; left:0; right:0; top:0; text-align:center; opacity:0; transform-origin:50% 50%; }
#reinigung-stand .zw > .zwA::before { animation:zwOldA .17s linear; }
#reinigung-stand .zw > .zwB::before { animation:zwOldB .17s linear; }
#reinigung-stand .zw > .zwA > b { animation:zwNewA .17s linear; }
#reinigung-stand .zw > .zwB > b { animation:zwNewB .17s linear; }
@keyframes zwOldA { 0% { opacity:1; transform:scaleY(1); } 10% { transform:scaleY(.924); } 20% { transform:scaleY(.707); } 30% { transform:scaleY(.383); } 40% { opacity:1; transform:scaleY(0); } 40.1%, 100% { opacity:0; transform:scaleY(0); } }
@keyframes zwOldB { 0% { opacity:1; transform:scaleY(1); } 10% { transform:scaleY(.924); } 20% { transform:scaleY(.707); } 30% { transform:scaleY(.383); } 40% { opacity:1; transform:scaleY(0); } 40.1%, 100% { opacity:0; transform:scaleY(0); } }
@keyframes zwNewA { 0%, 40% { opacity:0; transform:scaleY(0); } 40.1% { opacity:1; transform:scaleY(0); animation-timing-function:cubic-bezier(.2,.8,.3,1); } 82%, 100% { opacity:1; transform:scaleY(1); } }
@keyframes zwNewB { 0%, 40% { opacity:0; transform:scaleY(0); } 40.1% { opacity:1; transform:scaleY(0); animation-timing-function:cubic-bezier(.2,.8,.3,1); } 82%, 100% { opacity:1; transform:scaleY(1); } }
/* HUD-RIVE-1019 MUENZ-POP: Bonus-Auszahlung (Stufe oder Sprung >= 5 EUR) laesst drei Goldmuenzen hinter dem Euro-Feld aufspringen.
   Streifen v2/assets/ui/hud_muenze.webp aus tools/rive/hud_muenze.py (18 Bilder a 104x64 px, 2x gebacken), nur background-position per steps();
   z-index:-1 = hinter den Ziffern, Muenzen bleiben im 104x64-Rahmen um das Euro-Feld, kein Text, keine Auswirkung auf das Layout (absolut). */
#reinigung-stand small:is(.muenzA,.muenzB) { position:relative; }
#reinigung-stand small:is(.muenzA,.muenzB)::after { content:''; position:absolute; z-index:-1; left:50%; top:50%; width:104px; height:64px; margin:-23px 0 0 -52px; background:url('./assets/ui/hud_muenze.webp') 0 0/1872px 64px no-repeat; pointer-events:none; }
#reinigung-stand small.muenzA::after { animation:hudMuenzeA .56s steps(18,end); }
#reinigung-stand small.muenzB::after { animation:hudMuenzeB .56s steps(18,end); }
@keyframes hudMuenzeA { to { background-position-x:-1872px; } }
@keyframes hudMuenzeB { to { background-position-x:-1872px; } }
@media (max-width:720px) { #reinigung-stand small:is(.muenzA,.muenzB)::after { margin-top:-18px; } }
#reinigung-stand :is(.zwHopsA,.zwHopsB) > .zw { transform-origin:50% 90%; }   /* Bump = kurzes Stauchen der Ziffern nach innen; der geschuetzte Kasten (uiSchutz) behaelt seine Masse */
#reinigung-stand .zwHopsA > .zw { animation:zwHopsA .36s ease-out; }
#reinigung-stand .zwHopsB > .zw { animation:zwHopsB .36s ease-out; }
@keyframes zwHopsA { 0%,100% { scale:1; } 30% { scale:.94 .8; } 62% { scale:.98 1; } }
@keyframes zwHopsB { 0%,100% { scale:1; } 30% { scale:.94 .8; } 62% { scale:.98 1; } }
/* Keller-Pegel: Fluessigkeits-Glanzkante oben; das Schwappen (Kante pendelt 2,4 px nach innen und beruhigt sich) startet hud.js
   per WAAPI nur, wenn sich der Pegel bewegt - eine Dauer-Animation kostete in der Fahrt ~0,4 ms Stil-Arbeit je Bild (CPU 4x). */
#fahrt-ui #kellerBox #sysFill { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18); }
/* Rohrzustand kritisch: sanftes rotes Pulsieren INNEN im Kasten (nur Deckkraft) */
#fahrt-ui #pipeBox { position:relative; }
#fahrt-ui #pipeBox::after { content:''; position:absolute; inset:0; border-radius:7px; box-shadow:inset 0 0 0 2px rgba(255,74,61,.9), inset 0 0 12px rgba(255,74,61,.55); opacity:0; pointer-events:none; }
#fahrt-ui #pipeBox[data-zustand="kritisch"]::after { animation:rohrPuls 1.5s ease-in-out infinite; }
@keyframes rohrPuls { 0%,100% { opacity:0; } 50% { opacity:.95; } }
/* Werkzeugwechsel: die neue Karte federt (Squash & Stretch) - jede Stufe <= 1, also nie ueber die Nachbarn */
.toolBtn.kopfSquash { transform-origin:50% 100%; animation:kopfSquash .42s ease-out 1; }
@keyframes kopfSquash {
  0% { transform:translateY(-4px) scale(1, 1); }   /* Startbild = Ruhegroesse: uiSchutz misst beim Klassenwechsel genau hier */
  18% { transform:translateY(-4px) scale(.86, .84); }
  45% { transform:translateY(-4px) scale(1, .9); }
  68% { transform:translateY(-4px) scale(.95, 1); }
  86% { transform:translateY(-4px) scale(1, .98); }
  100% { transform:translateY(-4px) scale(1, 1); }
}
/* Neu erscheinende Chips fliegen weich ein: Deckkraft + Aufziehen per clip-path von ihrer Ankerseite. Kein transform/scale:
   der Kasten (getBoundingClientRect) bleibt vom ersten Bild an voll gross - uiSchutz merkt sich sonst ein zu kleines Rechteck
   und laesst Weltfiguren hineinlaufen; Start-Deckkraft .01 statt 0, weil uiSchutz Deckkraft 0 als unsichtbar (ungeschuetzt) cached.
   Ruhelage: Clip mit 40 px Rand (Schatten bleiben sichtbar). #kurzlinerAnz bleibt bewusst ohne Uebergang: uiSchutz setzt ihn je Bild
   neu (trackDom); jede Transition daran liess ihn im Naturlauf auf den Kopf rutschen (Collector, 10/10 Laeufe vs. 0/10 ohne). */
#bestwertTakt, #tauchChip, #wasserHinweis, #fahrt-ui .modChip { clip-path:inset(-40px round 0); transition:opacity .24s ease-out, clip-path .4s cubic-bezier(.2,.9,.3,1); }
@starting-style { #bestwertTakt { opacity:.01; clip-path:inset(-40px 100% -40px -40px round 0); } }
@starting-style { #tauchChip, #wasserHinweis { opacity:.01; clip-path:inset(-40px 50% -40px 50% round 0); } }
@starting-style { #fahrt-ui .modChip { opacity:.01; clip-path:inset(-40px -40px -40px 100% round 0); } }
@media (prefers-reduced-motion:reduce) { #reinigung-stand small::after { display:none !important; } #reinigung-stand *, #reinigung-stand .zw > i::before, #reinigung-stand, #tauchChip, #wasserHinweis, #bestwertTakt, #kurzlinerAnz { animation:none !important; transition:none !important; } }
/* ---- RIVE-UI-1014 Zentrale/Meta: Knoepfe druecken sich ein und federn zurueck (Ueberschwinger < 1 %, bleibt in der Luecke) ---- */
#gkMetaRoot :is(.gkBtn,.gkIconBtn,.gkRank), #schichtende button { transition:transform .34s cubic-bezier(.3,1.6,.5,1), scale .34s cubic-bezier(.3,1.6,.5,1), box-shadow .12s ease-out, filter .12s ease-out; }
#gkMetaRoot :is(.gkBtn,.gkIconBtn,.gkRank):not(:disabled):not(.isOff):active, #schichtende button:not(:disabled):active { scale:.96; transition-duration:.07s; }
/* Karten fliegen gestaffelt ein, sobald ihre Seite erscheint (nur Deckkraft + Wachsen bis zur Ruhegroesse, Fuss bleibt stehen) */
.gkHubPane:not([hidden]) > .gkHubCard, .gkKiSlots > .gkKiSlot { transform-origin:50% 100%; animation:gkKarteRein .44s cubic-bezier(.2,.9,.3,1) backwards; }
.gkHubPane:not([hidden]) > .gkHubCard:nth-of-type(2), .gkKiSlots > .gkKiSlot:nth-child(2) { animation-delay:.07s; }
.gkHubPane:not([hidden]) > .gkHubCard:nth-of-type(3), .gkKiSlots > .gkKiSlot:nth-child(3) { animation-delay:.14s; }
.gkHubPane:not([hidden]) > .gkHubCard:nth-of-type(4), .gkKiSlots > .gkKiSlot:nth-child(4) { animation-delay:.21s; }
.gkHubPane:not([hidden]) > .gkHubCard:nth-of-type(n+5) { animation-delay:.28s; }
@keyframes gkKarteRein { from { opacity:0; scale:.9; } }
@media (prefers-reduced-motion:reduce) { .gkHubPane > .gkHubCard, .gkKiSlots > .gkKiSlot { animation:none !important; } #gkMetaRoot :is(.gkBtn,.gkIconBtn,.gkRank), #schichtende button { transition:none !important; } }
/* ---- RIVE-UI-1014 Kistenregal: Ring um die laufende Kiste fuellt sich weich (CSS, echte Restzeit aus kisten.js), die fertige
   Kiste glimmt innen im Slot (nur Deckkraft) statt eines Box-Shadow-Pulses und wippt ohne Neustart je Sekunde ---- */
.gkKiSlot > .gkKiSprite, .gkKiSlot > .gkKiRing { grid-area:1 / 1; }
.gkKiRing { contain:size; width:126%; aspect-ratio:1; margin:-63% -13%; place-self:center; rotate:-90deg; overflow:visible; pointer-events:none; }   /* traegt nicht zur Spaltenbreite bei */
.gkKiRing circle { fill:none; stroke-width:3.2; stroke-linecap:round; }
.gkKiRing circle:first-child { stroke:rgba(255,255,255,.14); }
.gkKiRing circle + circle { stroke:#ffd66b; stroke-dasharray:100 100; stroke-dashoffset:100; animation:gkKiRingLauf var(--ki-dauer,60s) linear var(--ki-schon,0s) forwards; }
@keyframes gkKiRingLauf { to { stroke-dashoffset:0; } }
.gkKiSlot.isBereit { animation:none; }
.gkKiSlot.isBereit::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 calc(.18 * var(--su)) rgba(126,224,143,.75), inset 0 0 calc(1.1 * var(--su)) rgba(255,214,107,.55); opacity:.25; pointer-events:none; animation:gkKiGlimm 1.6s ease-in-out infinite; }
@keyframes gkKiGlimm { 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .gkKiRing circle + circle { animation-play-state:paused; } .gkKiSlot.isBereit::after { animation:none; opacity:.8; } }
/* ---- RIVE-UI-1014 Schichtende: Zahlen zaehlen hoch (schichtende_karte.js), danach ploppen Serien-Kisten, Ziel und Coach nacheinander;
   Konfetti nur beim Rekord, einmal, innerhalb der Szene ---- */
.schicht-buehne .ende-serie > :not(.ist-morgen):not([data-stufe="meister"]) { animation:endeStempel .4s cubic-bezier(.3,1.45,.5,1) backwards; }
.schicht-buehne .ende-serie > :nth-child(1) { animation-delay:.95s; } .schicht-buehne .ende-serie > :nth-child(2) { animation-delay:1.04s; }
.schicht-buehne .ende-serie > :nth-child(3) { animation-delay:1.13s; } .schicht-buehne .ende-serie > :nth-child(4) { animation-delay:1.22s; }
.schicht-buehne .ende-serie > :nth-child(5) { animation-delay:1.31s; } .schicht-buehne .ende-serie > :nth-child(6) { animation-delay:1.4s; }
.schicht-buehne .ende-serie > :nth-child(7) { animation-delay:1.49s; } .schicht-buehne .ende-serie > :nth-child(n+8) { animation-delay:1.6s; }
@keyframes endeStempel { from { scale:.2; opacity:0; } 60% { opacity:1; } }
.schicht-buehne .ende-ziel { animation:endeRein .45s ease-out .8s backwards; }
.schicht-buehne .ende-coach, .schicht-buehne .ende-tagesfund { animation:endeRein .45s ease-out 1.25s backwards; }
@keyframes endeRein { from { opacity:0; scale:.94; } }
.ende-konfetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.ende-konfetti > i { position:absolute; top:-14px; width:7px; height:11px; border-radius:2px; background:#ffd84a; opacity:0; animation:endeKonfetti 2.1s cubic-bezier(.3,.2,.6,1) 1; }
.ende-konfetti > i:nth-child(5n+1) { background:#5bd08a; } .ende-konfetti > i:nth-child(5n+2) { background:#efbd5b; } .ende-konfetti > i:nth-child(5n+3) { background:#ff6b5b; } .ende-konfetti > i:nth-child(5n+4) { background:#fff6dc; }
.ende-konfetti > i:nth-child(1) { left:6%; animation-delay:.1s; } .ende-konfetti > i:nth-child(2) { left:14%; animation-delay:.35s; width:5px; }
.ende-konfetti > i:nth-child(3) { left:22%; animation-delay:.05s; } .ende-konfetti > i:nth-child(4) { left:29%; animation-delay:.5s; height:8px; }
.ende-konfetti > i:nth-child(5) { left:36%; animation-delay:.2s; } .ende-konfetti > i:nth-child(6) { left:43%; animation-delay:.6s; width:5px; }
.ende-konfetti > i:nth-child(7) { left:51%; animation-delay:0s; } .ende-konfetti > i:nth-child(8) { left:58%; animation-delay:.42s; height:8px; }
.ende-konfetti > i:nth-child(9) { left:65%; animation-delay:.15s; } .ende-konfetti > i:nth-child(10) { left:72%; animation-delay:.55s; width:5px; }
.ende-konfetti > i:nth-child(11) { left:79%; animation-delay:.28s; } .ende-konfetti > i:nth-child(12) { left:86%; animation-delay:.7s; height:8px; }
.ende-konfetti > i:nth-child(13) { left:92%; animation-delay:.12s; } .ende-konfetti > i:nth-child(14) { left:47%; animation-delay:.8s; width:5px; }
.ende-konfetti > i:nth-child(odd) { --k-dreh:540deg; --k-x:-18px; } .ende-konfetti > i:nth-child(even) { --k-dreh:-460deg; --k-x:16px; }
@keyframes endeKonfetti { 0% { opacity:0; transform:translate(0,0) rotate(0deg); } 8% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translate(var(--k-x),320px) rotate(var(--k-dreh)); } }
@media (prefers-reduced-motion:reduce) { .schicht-buehne .ende-serie > *, .schicht-buehne .ende-ziel, .schicht-buehne .ende-coach, .schicht-buehne .ende-tagesfund { animation:none !important; } .ende-konfetti { display:none; } }

/* ENDKARTE-1015: bewiesene Laborhierarchie. Hero, Bericht, Belohnung und genau eine Hauptaktion. */
#schichtende.peak-end.mk21-ende{display:grid;grid-template-columns:minmax(250px,420px) minmax(340px,510px);grid-template-rows:auto auto 56px;align-content:center;justify-content:center;align-items:stretch;gap:12px 28px;padding:32px;overflow:hidden}
#schichtende.mk21-ende>.abschluss.schicht-buehne{display:contents}
#schichtende.mk21-ende .ende-hero{grid-column:1;grid-row:1/3;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
#schichtende.mk21-ende .ende-szene{width:100%;height:340px;padding-top:60px;grid-area:auto}
#schichtende.mk21-ende .ende-szene .abschluss-bild{width:300px;height:280px;max-width:100%}
#schichtende.mk21-ende .ende-spruch{font-size:21px;padding:12px 18px;max-width:100%;top:0}
#schichtende.mk21-ende .ende-hofstaat{right:4px;bottom:5px}
#schichtende.mk21-ende .ende-bericht{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:18px;text-align:left;padding:24px 28px;border-radius:20px 20px 0 0;background:#fff0cf;color:#493d32;box-shadow:0 5px 0 #5b443333;min-width:0;padding-bottom:12px}
#schichtende.mk21-ende .ende-ursache{text-align:left;max-width:none;justify-self:stretch}
#schichtende.mk21-ende .ende-grund{font:900 29px/1.05 'Gustav Display',system-ui;color:#493d32}
#schichtende.mk21-ende .ende-tipp{display:block;font:500 15px/1.35 system-ui;max-height:none;overflow:visible;color:#48564a;margin:10px 0 0}
#schichtende.mk21-ende .ende-coach{max-width:none;margin:10px 0 0;font:italic 700 13px/1.3 system-ui;text-align:left;color:#75603c}
#schichtende.mk21-ende .ende-lohn{width:100%;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;justify-items:start;align-items:center;gap:0 14px;border-top:1px solid #9b86554d;padding-top:14px}
#schichtende.mk21-ende .abschluss-zahl{font-size:64px;color:#8d5724;text-shadow:none;grid-column:1;grid-row:2}
#schichtende.mk21-ende .ende-lohn-label{grid-row:1;grid-column:1;font:800 11px system-ui;letter-spacing:.12em;color:#786849}
#schichtende.mk21-ende .ende-meter{grid-column:2;grid-row:2;color:#493d32;font-size:18px}
#schichtende.mk21-ende .ende-event{grid-column:1/3;color:#635739}
#schichtende.mk21-ende .ende-belohnung{display:flex;flex-direction:column;gap:8px;min-width:0}
#schichtende.mk21-ende .ende-serie{justify-content:flex-start;margin:0;gap:3px}
#schichtende.mk21-ende .ende-serie-lbl{color:#766345}
#schichtende.mk21-ende .ende-ziel{width:100%;text-align:left;font:700 13px/1.2 system-ui;color:#67583a;gap:5px}
#schichtende.mk21-ende .ende-ziel .abschluss-balken{height:5px}
#schichtende.mk21-ende .ende-fehler{color:#a33021;font-size:15px}
#schichtende.mk21-ende .ende-polaroid{position:relative;left:auto;bottom:auto;transform:none;flex-direction:row;width:auto;min-height:44px;gap:10px;padding:5px 10px;border:1px solid #e5c98d66;background:#49382c;box-shadow:none;color:#f6dfab;border-radius:10px;align-self:center}
#schichtende.mk21-ende .ende-polaroid-bild{width:54px;height:30px;object-fit:cover;border-color:#d0b583}
#schichtende.mk21-ende .ende-polaroid-zeile{font:800 11px system-ui}
#schichtende.mk21-ende .ende-portrait{position:absolute;left:0;bottom:50px;width:95px;height:95px}
#schichtende.mk21-ende .ende-portrait button{right:0;bottom:auto;top:0;width:28px;height:28px;font-size:14px;background:#49382cd9}#schichtende.mk21-ende .ende-portrait button::after{content:'';position:absolute;inset:-8px}
#schichtende.peak-end.mk21-ende>#seKiste{grid-column:2;grid-row:2;max-width:none;justify-content:flex-start;border:0;border-radius:0 0 20px 20px;background:#fff0cf;padding:10px 28px;color:#67583a;gap:4px 8px;font-size:11px;margin-top:-12px;padding-bottom:12px;align-self:stretch;align-content:start}
#schichtende.mk21-ende #seKisteInfo{padding:0;border:0;background:none;font-size:11px;text-align:left}
#schichtende.mk21-ende .seKisteLbl{font-size:9px}
#schichtende.peak-end.mk21-ende>#seNeu{box-sizing:border-box;max-width:100%;grid-column:2;grid-row:3;width:100%;min-height:52px;font-size:25px}
#schichtende.mk21-ende>#seZentrale{grid-column:1;grid-row:3;justify-self:center;align-self:center;min-height:44px;min-width:160px;border:0;background:none;box-shadow:none;font:800 14px system-ui;color:#dfd6b6}
#schichtende.mk21-ende .ende-kistenziel{grid-column:2;grid-row:2;align-self:end;justify-self:stretch;width:auto;margin:0 28px 12px;z-index:1}
#schichtende.peak-end.mk21-ende:has(.ende-kistenziel)>#seKiste{padding-bottom:28px}
@media(max-height:500px){
#schichtende.peak-end.mk21-ende:has(.ende-kistenziel)>#seKiste{padding-bottom:23px}
#schichtende.mk21-ende .ende-kistenziel{margin:0 18px 10px}
#schichtende.peak-end.mk21-ende{grid-template-columns:minmax(220px, .85fr) minmax(330px,1.15fr);grid-template-rows:auto auto 48px;gap:6px 18px;padding:12px 24px}
#schichtende.mk21-ende .ende-szene{height:210px;padding-top:42px}
#schichtende.mk21-ende .ende-szene .abschluss-bild{height:170px;width:210px}
#schichtende.mk21-ende .ende-spruch{font-size:16px;padding:8px 10px}
#schichtende.mk21-ende .ende-hofstaat{right:2px;bottom:0}
#schichtende.mk21-ende .ende-wurst{width:60px;height:45px}
#schichtende.mk21-ende .ende-bericht{padding:10px 18px;gap:6px;border-radius:17px 17px 0 0;padding-bottom:6px}
#schichtende.mk21-ende .ende-grund{font-size:23px}
#schichtende.mk21-ende .ende-tipp{font-size:12px;line-height:1.25;margin-top:5px}
#schichtende.mk21-ende .ende-coach{font-size:12px;line-height:1.2;margin-top:5px}
#schichtende.mk21-ende .ende-lohn{padding-top:7px}
#schichtende.mk21-ende .abschluss-zahl{font-size:43px}
#schichtende.mk21-ende .ende-meter{font-size:16px}
#schichtende.mk21-ende .ende-belohnung{gap:4px}
#schichtende.mk21-ende .ende-serie .gkKiSprite{height:18px}
#schichtende.mk21-ende .ende-serie-lbl{font-size:10px}
#schichtende.mk21-ende .ende-ziel{font-size:12px}
#schichtende.peak-end.mk21-ende>#seNeu{min-height:48px;font-size:23px}
#schichtende.peak-end.mk21-ende>#seKiste{margin-top:-6px;padding:3px 18px 10px;border-radius:0 0 17px 17px;gap:3px 7px;padding-bottom:10px}
/* GATE-F1 19.10.: niedrige Hoehe - Lohnaufschluesselung zweispaltig ohne Fussnote, Tipp auf drei Zeilen, Knoepfe bleiben im Bild */
#schichtende.mk21-ende .ende-notdienst{grid-template-columns:1fr 1fr!important;gap:0 14px!important;padding:3px 0 0!important}
#schichtende.mk21-ende .ende-notdienst>small{display:none!important}
#schichtende.mk21-ende .ende-notdienst>div:nth-child(n+3){grid-column:1/-1}
#schichtende.mk21-ende .ende-tipp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
@media(max-width:720px) and (max-height:500px){
#schichtende.peak-end.mk21-ende{padding:12px 16px;column-gap:14px;grid-template-columns:minmax(220px,.85fr) minmax(310px,1.15fr)}
#schichtende.mk21-ende .ende-bericht{padding:12px 14px}
#schichtende.mk21-ende .ende-grund{font-size:21px}
}
#schichtende.mk21-ende:has(#seKiste:not([hidden])) .ende-ziel[data-art=kiste]>span{display:none}
#schichtende.mk21-ende #seKisteInfo,#schichtende.mk21-ende .seKisteLbl{color:#67583a}
#schichtende.mk21-ende:not(:has(#seKiste:not([hidden]))) .ende-bericht{border-radius:20px;padding-bottom:24px}
#schichtende.mk21-ende .ende-portrait button{transform:none}
@media(max-height:350px){
#schichtende.peak-end.mk21-ende{grid-template-rows:minmax(0,1fr) auto 48px;align-content:stretch}
#schichtende.mk21-ende .ende-hero{min-height:0}
#schichtende.mk21-ende .ende-szene{min-height:0}
#schichtende.mk21-ende .ende-szene .abschluss-bild{max-height:100%}
#schichtende.mk21-ende .ende-bericht{gap:3px;padding-top:8px;padding-bottom:3px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#schichtende.mk21-ende .ende-tipp{-webkit-line-clamp:unset}
#schichtende.mk21-ende .ende-lohn{padding-top:4px}
#schichtende.peak-end.mk21-ende>#seKiste{padding-top:6px;padding-bottom:6px}
#schichtende.peak-end.mk21-ende:has(.ende-kistenziel)>#seKiste{padding-bottom:20px}
}

/* Original Gustav hand replaces the apprentice tool pulse; parent is the real button. */
#tools .werkzeugHand{position:absolute;left:calc(50% - 27.890625px);top:-55.025px;width:42px;height:55.125px;overflow:visible;pointer-events:none!important;z-index:10;transform:rotate(180deg) translateY(9px);animation:werkzeugTippen 1.65s cubic-bezier(.25,.65,.45,1) infinite}
#tools .werkzeugHand *{pointer-events:none!important}
#tools .werkzeugHand[hidden]{display:none!important}
@keyframes werkzeugTippen{0%,18%,72%,100%{transform:rotate(180deg) translateY(9px)}29%,36%,49%,56%{transform:rotate(180deg) translateY(0)}42%{transform:rotate(180deg) translateY(6px)}}
#fahrt-ui.werkzeugLernen .kopfEmpfohlen{animation:none;outline:none;transform:none}
#fahrt-ui.werkzeugLernen .kopfEmpfohlen::before,#fahrt-ui.werkzeugLernen .empfohlen::after{display:none}
#fahrt-ui.werkzeugLernen .empfohlen .uiIco,#fahrt-ui.werkzeugLernen .empfohlen .ketteHudCanvas{animation:none!important}
#fahrt-ui:has(.werkzeugHand:not([hidden])) #geistHand{visibility:hidden}
.lehrlingDialog .werkzeugHand,.hof-comic-aktiv .werkzeugHand{display:none!important}
#tools .werkzeugHand.reduziert{animation:none;transform:rotate(180deg) translateY(2px)}
@media(prefers-reduced-motion:reduce){#tools .werkzeugHand{animation:none;transform:rotate(180deg) translateY(2px)}}
@media(orientation:portrait){#tools .werkzeugHand{display:none!important}}@media(orientation:landscape) and (max-height:400px){#tools .werkzeugHand{left:calc(50% - 22.9px);top:-40px;width:32px;height:42px}}   /* hud-fahrt-13: kleiner und tiefer, ragt auf niedrigen Bildern nicht ins Rohr */

/* ARMAGEDDON-LADEN Fix 2: Ausbeute zweistufig - grosse Kiste mittig (>= 40 % Viewporthoehe), hoechstens 3 Hauptzeilen, Teile als Chips (Icon + Zahl). */
.gkKiKarte { display:flex; flex-direction:column; align-items:center; box-sizing:border-box; width:min(94vw,max(460px,96vh),640px); max-height:calc(100dvh - 12px); padding:8px 14px 10px; gap:6px; }
.gkKiKarteOben { flex-direction:column; align-items:center; gap:4px; width:100%; }
.gkKiKarteText { display:contents; }
.gkKiKarte h4 { order:1; margin:0; text-align:center; font-size:clamp(16px,4.2vh,36px); }
.gkKiKarte .gkKiKarteBild { order:2; width:auto; height:clamp(150px,46vh,400px); aspect-ratio:1.15; }
.gkKiKarteBild::before { inset:-8%; background:radial-gradient(circle, var(--ki-glow, rgba(255,214,107,.6)), transparent 68%); }
.gkKiKarteBild .gkKiSprite, .gkKiKarte .gkKiKarteSprite { height:100%; width:auto; }
.gkKiKarte ul { order:3; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:2px 16px; margin:0; font-size:clamp(16px,4.2vh,32px); min-height:1.3em; }   /* Fund karten-zentrale-6: Ausbeute-Zeile vorab reserviert, WEITER springt nicht */
.gkKiKarte li { text-align:center; }
.gkKiChips { order:4; display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:4px 6px; min-height:clamp(64px,10.4vh,100px); margin-top:2px; }
.gkKiChip { display:inline-flex; align-items:center; gap:3px; padding:0 8px 0 3px; border:2px solid #8b6028; border-radius:16px; background:rgba(255,255,255,.55); color:#0f4a1f; animation:gkKiZeile .3s ease-out both; }
.gkKiChip img { height:clamp(24px,5.8vh,40px); width:auto; }
.gkKiChip b { font:900 clamp(14px,3.4vh,24px) var(--gk-body); color:#0f4a1f; }
.gkKiChip.isDia { color:#7a3a00; }
.gkKiChip.isDia b { color:#7a3a00; }
.gkKiKarte .gkBtn { flex:0 0 auto; }
.gkKiKarte:not([data-stufe="blech"],[data-stufe="chrom"]) li:first-child b { color:#7a4f00; }
@media(max-width:480px) { .gkKiKarte .gkKiKarteBild { width:auto; height:clamp(150px,46vh,400px); } } @media(max-height:340px) { .gkKiKarte .gkKiKarteBild { height:30vh; } }   /* Fund karten-zentrale-6: WEITER bleibt bei 330 px in der Karte */
@media(prefers-reduced-motion:reduce) { .gkKiChip,.gkKiKarte li { animation:none!important; opacity:1!important; transform:none!important; } .gkKiKarte li b { color:#9a5728!important; } .gkKiKarte li:first-child b { color:#6b4300!important; } .gkKiSprite.gkKiHD, .gkKiSprite.gkKiHD[data-stufe] { filter:drop-shadow(0 .12em 0 rgba(0,0,0,.4))!important; } }

/* Wow-Fix: Rive-Deckel -> gefuelltes Stufenbild (Gold, Gems) per 200-ms-Ueberblendung; Chip-Rand nach Kistenstufe. */
.gkKiKarteBild[data-rive="an"][data-ende="1"] > canvas.gkRiveKiste { opacity:0; transition:opacity .2s linear; }
.gkKiKarteBild[data-rive="an"][data-ende="1"] > :is(.gkKiSprite,.gkKiKartePartikel) { visibility:visible; }
.gkKiKarte[data-stufe="stahl"] .gkKiChip { border-color:#2f8a55; }
.gkKiKarte[data-stufe="chrom"] .gkKiChip { border-color:#5f7f94; }
.gkKiKarte[data-stufe="gold"] .gkKiChip { border-color:#d69a10; box-shadow:0 0 6px rgba(255,196,60,.55); }
.gkKiKarte[data-stufe="meister"] .gkKiChip { border-color:#c98a00; box-shadow:0 0 8px rgba(255,180,0,.7); }
/* ARMAGEDDON-LADEN Fix 3: HD-Duesen mit eigenem Bild, 48 px im Tile (915), grosse Kacheln im Vollbild (1440). */
.gkTile.form > .gkDz { width:100%; height:100%; object-fit:contain; }
.gkStage[data-gk-ansicht='koepfe'] .gkGridCell .gkTile.form:has(> .gkDz) { background:none; border:0; box-shadow:none; }
.gkStage[data-gk-ansicht='koepfe'] .gkGrid .gkTile { width:max(48px,calc(3.8 * var(--su))); height:max(48px,calc(3.8 * var(--su))); }
.gkStage[data-gk-ansicht='koepfe'] .gkGrid { grid-auto-rows:minmax(84px,calc(9 * var(--su))); }
.gkStage[data-gk-ansicht='koepfe'] .gkGridCell .lv { height:1.25em; white-space:nowrap; text-overflow:ellipsis; font-size:max(10px,calc(1 * var(--su))); }
.gkStage[data-gk-ansicht='koepfe'] .gkGridCell .pill { min-height:max(18px,calc(1.9 * var(--su))); }
@media (min-width:1000px) and (min-height:700px) { .gkStage[data-gk-ansicht='koepfe'] .gkGrid { grid-auto-rows:minmax(140px,calc(16 * var(--su))); } .gkStage[data-gk-ansicht='koepfe'] .gkGrid .gkTile { width:max(96px,calc(8 * var(--su))); height:max(96px,calc(8 * var(--su))); } .gkStage[data-gk-ansicht='koepfe'] .gkGridCell .lv { font-size:max(11px,calc(1.02 * var(--su))); } }
/* HG-HAUS Fix-Runde 5 (WOW-Judge): Speichern-Knopf = deckender 44x44-Chip mit Disketten-Symbol (kein Pfeil, kein Geisterkreis auf Gustav). Mit Foto-Leiste: gemeinsame Zeile FOTO & REPLAY + Chip, Mini-Gustav sitzt ueber der Leiste (nie angeschnitten). */
.ende-speichern{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #e5c98d88;border-radius:10px;background:#49382c;color:#f6dfab;font-size:0;cursor:pointer}
.ende-speichern:disabled{color:#f6dfab88;cursor:default}
.ende-speichern:focus-visible{outline:3px solid #ffd84a;outline-offset:2px}
#schichtende.mk21-ende .ende-portrait .ende-speichern{right:0;bottom:0;transform:none;font-size:0;background:#49382c;border-radius:10px}
.ende-fotozeile{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;align-self:stretch;min-width:0}
.ende-fotozeile>.ende-polaroid{flex:0 1 auto;min-width:0}
.ende-fotozeile>.ende-speichern{flex:none;position:static;transform:none}
#schichtende.mk21-ende .ende-fotozeile>.ende-portrait{bottom:calc(100% + 3px)}
@media(max-height:500px){
  #schichtende.mk21-ende .ende-fotozeile>.ende-portrait{left:0;bottom:calc(100% + 3px);width:62px;height:62px}
}
/* TUNE-1020: Live-Regler-Panel, existiert nur mit ?tune=1 (tune.js). Eingeklappt: nur ein 26-px-Griff, Rest des Containers faengt keine Beruehrung ab. */
#ggTune { position:fixed; z-index:880; left:var(--tune-x,calc(env(safe-area-inset-left,0px) + 2px)); top:var(--tune-y,calc(env(safe-area-inset-top,0px) + 2px)); pointer-events:none; font:600 12px/1.25 system-ui,sans-serif; color:#fff1cc; }
#ggTune[hidden] { display:none; }
#ggTune > * { pointer-events:auto; }
#ggTuneGriff { width:26px; height:26px; padding:0; border:1px solid #ffe7a299; border-radius:50%; background:#241b2199; color:#ffe7a2; font:700 13px/1 system-ui,sans-serif; opacity:.6; touch-action:manipulation; }
#ggTune.offen #ggTuneGriff { opacity:1; }
#ggTuneKarte { position:absolute; left:0; top:30px; width:min(310px,64vw); max-height:calc(100vh - 44px); overflow-y:auto; box-sizing:border-box; padding:6px 8px 8px; border-radius:8px; background:#241b21ee; border:1px solid #ffe7a266; overscroll-behavior:contain; }
#ggTuneKarte[hidden] { display:none; }
#ggTune .ggTuneKopf { font-size:11px; letter-spacing:.04em; opacity:.8; margin-bottom:4px; }
#ggTune .ggTuneZeile { display:grid; grid-template-columns:1fr auto; column-gap:8px; margin:0 0 5px; }
#ggTune .ggTuneZeile.geaendert span { color:#ffd45e; }
#ggTune .ggTuneZeile input { grid-column:1 / 3; width:100%; height:26px; margin:0; accent-color:#ffd45e; touch-action:pan-y; }
#ggTune .ggTuneKnoepfe { display:flex; gap:6px; margin-top:6px; }
#ggTune .ggTuneKnoepfe button { flex:1; min-height:34px; border:1px solid #ffe7a2aa; border-radius:6px; background:#49382c; color:#fff1cc; font:700 11px/1 system-ui,sans-serif; touch-action:manipulation; }
#ggTune textarea { width:100%; box-sizing:border-box; margin-top:6px; font:11px/1.3 ui-monospace,monospace; background:#120d10; color:#fff1cc; border:1px solid #ffe7a266; }

/* Werkstatt-Ticket: Papier, Kupferkante und ein ruhiges Signal nur fuer bereite Ziele. */
#schichtende.mk21-ende .ende-handgriff{display:flex;min-height:44px;width:100%;text-align:left;cursor:pointer;position:relative;flex-wrap:wrap;padding:8px 10px;gap:8px;border:1px solid #b58545;border-left:4px solid #bd8435;border-radius:6px 12px 12px 6px;background:linear-gradient(115deg,#fff7dd,#f4dfaa);color:#51331e;font:inherit;box-shadow:inset 0 1px 0 #fffcef,0 2px 0 #8a5c2926;}
#schichtende.mk21-ende div.ende-handgriff{cursor:default;}
#schichtende.mk21-ende .ende-handgriff-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;}
#schichtende.mk21-ende .ende-handgriff-text small{font-size:9px;letter-spacing:.08em;color:#79542b;font-weight:800;}
#schichtende.mk21-ende .ende-handgriff-text strong{font-size:12px;line-height:1.2;}
#schichtende.mk21-ende .ende-handgriff-cta{font-size:11px;font-weight:800;color:#764512;text-decoration:underline;text-decoration-color:#b88a49;text-underline-offset:2px;}
#schichtende.mk21-ende .ende-handgriff progress{flex-basis:100%;height:6px;border:1px solid #aa7b3e;background:#e0c99a;box-shadow:inset 0 1px 2px #78502622;animation:handgriffFortschritt .65s ease-out .8s backwards;}
#schichtende.mk21-ende .ende-handgriff progress::-webkit-progress-bar{background:#e0c99a;}
#schichtende.mk21-ende .ende-handgriff progress::-webkit-progress-value{background:linear-gradient(90deg,#b67424,#f4b82d 65%,#ffdc64);border-radius:4px;}
#schichtende.mk21-ende .ende-handgriff progress::-moz-progress-bar{background:linear-gradient(90deg,#b67424,#f4b82d 65%,#ffdc64);border-radius:4px;}
#schichtende.mk21-ende .ende-handgriff[data-bereit=true]{border-color:#ad7121;border-left-color:#d7981b;background:linear-gradient(115deg,#fff8df,#f9df8f);}
#schichtende.mk21-ende .ende-handgriff[data-bereit=true] .ende-upgrade{animation:handgriffBereit 3.2s ease-in-out infinite;}
#schichtende.mk21-ende button.ende-handgriff:active{box-shadow:inset 0 2px 4px #78502630;}
#schichtende.mk21-ende .ende-handgriff:focus-visible{outline:3px solid #764512;outline-offset:2px;}
[data-gk-upgrade]:focus-visible,[data-ki-slots]:focus-visible{outline:3px solid #ffe08b;outline-offset:2px;}
#schichtende.mk21-ende .ende-handgriff .ende-upgrade{position:static;flex:0 0 32px;width:32px;height:32px;align-self:center;border-radius:7px;mix-blend-mode:multiply;filter:drop-shadow(0 2px 1px #86592740);}
@keyframes handgriffFortschritt{from{opacity:.35}to{opacity:1}}
@keyframes handgriffBereit{0%,68%,100%{transform:translateY(0) rotate(0)}77%{transform:translateY(-2px) rotate(-6deg)}86%{transform:translateY(0) rotate(4deg)}93%{transform:translateY(-1px) rotate(-2deg)}}
#schichtende.mk21-ende .ende-ruhig .ende-handgriff .ende-upgrade,#schichtende.mk21-ende .ende-ruhig .ende-handgriff progress{animation:none;}
@media(prefers-reduced-motion:reduce){#schichtende.mk21-ende .ende-handgriff .ende-upgrade,#schichtende.mk21-ende .ende-handgriff progress{animation:none;}}
@media(max-height:340px){#schichtende.mk21-ende .ende-handgriff{padding:5px 8px;gap:4px;}#schichtende.mk21-ende .ende-handgriff progress{display:none;}}

/* Endkarte: eigene linke Aktionsflaeche, rechts der zusammenhaengende Arbeitsbericht. */
#schichtende.mk21-ende .ende-hero{gap:8px;min-height:0}
#schichtende.mk21-ende .ende-hero>.ende-handgriff{order:2;flex:none;box-sizing:border-box}
#schichtende.mk21-ende .ende-fotozeile,#schichtende.mk21-ende .ende-hero>.ende-polaroid{order:1;flex:none}
#schichtende.mk21-ende .ende-bericht{min-height:0;overflow:visible;gap:10px}
#schichtende.mk21-ende .ende-bericht-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 10px;flex:none;align-items:center}
#schichtende.mk21-ende .ende-bericht-kopf>.ende-grund{grid-column:1/-1;grid-row:1}
#schichtende.mk21-ende .ende-bericht-kopf>.ende-lohn{grid-column:1;grid-row:2;border-top:0;padding-top:0;gap:3px 5px;align-self:center;min-width:0}
#schichtende.mk21-ende .ende-bericht-kopf>.ende-wochenbuch{grid-column:2;grid-row:2;height:100%;justify-content:center;min-width:0}
#schichtende.mk21-ende .ende-bericht-label{flex:none;font:800 10px/1.2 system-ui;letter-spacing:.06em;color:#79542b}
#schichtende.mk21-ende .ende-bericht-inhalt{display:flex;flex-direction:column;gap:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;flex:1 1 auto;touch-action:pan-y;border:1px solid #b48c4580;border-radius:6px;padding:8px;scrollbar-width:thin;scrollbar-color:#98692c #f4dfaa}
#schichtende.mk21-ende .ende-bericht-inhalt>*{flex-shrink:0}
#schichtende.mk21-ende .ende-bericht-inhalt:focus-visible{outline:2px solid #8d5724;outline-offset:-2px}
#schichtende.mk21-ende .ende-tipp{display:block;overflow:visible;-webkit-line-clamp:unset}
@media(max-height:500px){
#schichtende.peak-end.mk21-ende{grid-template-rows:minmax(0,1fr) auto 48px;align-content:stretch}
#schichtende.mk21-ende .ende-hero{gap:6px}
#schichtende.mk21-ende .ende-szene{flex:1 1 210px;min-height:0}
#schichtende.mk21-ende .ende-szene .abschluss-bild{max-height:100%;object-fit:contain}
}

/* V1.1 HUD-Fix: compact, finite completion; the end card keeps its full wording. */
#bestwertTakt.auftrag{width:96px;max-width:96px;padding:0;border:0;border-radius:5px;background:transparent;box-shadow:none;animation:none;line-height:1;transition:none;clip-path:none}
.auftrag-zeile{box-sizing:border-box;display:grid;grid-template-columns:18px 1fr;align-items:center;gap:2px 5px;width:96px;padding:4px 6px;margin-bottom:4px;border-radius:5px;background:#fff1e0ed;color:#493324;box-shadow:0 1px 3px #30241b55}
.auftrag-zahl{font:400 13px/18px var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif);letter-spacing:.3px;font-variant-numeric:tabular-nums;white-space:nowrap}.auftrag-symbol{display:block;width:18px;height:18px;font:900 15px/18px system-ui;text-align:center}.auftrag-symbol[data-art=muenzen]{background:url('./assets/ui/hud_muenze.webp') -66.9px -4.6px/910.7px 31.1px no-repeat}
#bestwertTakt.auftrag progress{grid-column:1/-1;display:block;width:100%;height:2px;margin:0;border:0;border-radius:1px;appearance:none;overflow:hidden;background:#ddc9a8}#bestwertTakt.auftrag progress::-webkit-progress-bar{background:#ddc9a8}#bestwertTakt.auftrag progress::-webkit-progress-value{background:#b4802d}#bestwertTakt.auftrag progress::-moz-progress-bar{background:#b4802d}
.auftrag-symbol[data-art=sauber],.auftrag-symbol[data-art=fettHD]{background:url('./assets/muellkopf/zahnbuerste-geputzt.svg') center/contain no-repeat}.auftrag-symbol[data-art=flug]{background:url('./assets/flug/maschine_flug.png') center/contain no-repeat}.auftrag-symbol[data-art=wurst],.auftrag-symbol[data-art=goldi],.auftrag-symbol[data-art=schicht],.auftrag-symbol[data-art=buchstabe],.auftrag-symbol[data-art=rennen]{background:url('./assets/app/symbol-192.png') center/contain no-repeat}
.auftrag-erreicht{animation:auftragFertig 600ms linear both;background:#b5edb9;color:#174d24}.auftrag-erreicht .auftrag-symbol{color:#174d24}@keyframes auftragFertig{0%,20%{background:#73e58a;opacity:1}55%{opacity:1}100%{opacity:0}}
#auftragStart{position:fixed;left:calc(50% - 150px);top:70px;max-width:300px;box-sizing:border-box;padding:5px 9px;border-radius:6px;background:#fff1e0f0;color:#493324;font:700 12px/1.3 system-ui;pointer-events:none}#auftragStart[hidden]{display:none}.ende-auftrag{display:block;font:700 11px/1.3 system-ui;color:#73502e;margin:3px 0}
@media(prefers-reduced-motion:reduce){.auftrag-erreicht{animation:none}}

/* EVOLUTION-1025-05: earned stamps and one bounded flight to the saved balance. */
#schichtende.mk21-ende .ende-bericht{position:relative}
#schichtende.mk21-ende .ende-kontostand{grid-column:2;grid-row:1;justify-self:end;max-width:100%;box-sizing:border-box;padding:3px 7px;border:1px solid #c99d52;border-radius:6px;background:#f8dfa2;color:#715023;font:800 10px/1.2 system-ui;overflow-wrap:anywhere}
#schichtende.mk21-ende .ende-lohn{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#schichtende.mk21-ende .ende-meter{justify-self:end;text-align:right;font-size:clamp(11px,1.2vw,16px);overflow-wrap:anywhere}
#schichtende.mk21-ende .abschluss-zahl{max-width:100%;font-size:clamp(24px,4.4vw,60px);overflow-wrap:anywhere}
#schichtende.mk21-ende .ende-extras{display:inline-block;color:#805018;font-weight:800}#schichtende.mk21-ende .ende-meter{overflow-x:clip;word-spacing:.45em}#schichtende.mk21-ende .ende-meter>:is(.ende-meter-wert,.ende-folge,.ende-extras){display:inline-block;position:relative;word-spacing:normal}#schichtende.mk21-ende .ende-meter>:is(.ende-folge,.ende-extras)::before{content:'·';position:absolute;right:calc(100% + .22em);color:#493d32;font-weight:700}   /* Abnahme ende-6 12.11.: jeder Posten bleibt ganz, der Trennpunkt sitzt vor dem Posten und wird am Zeilenanfang abgeschnitten - kein Punkt haengt am Zeilenende oder steht vorn */
#schichtende.mk21-ende .lohn-stempelt{animation:lohnStempel 340ms cubic-bezier(.2,.8,.3,1) both;transform-origin:center}
#schichtende.mk21-ende .ende-lohn-muenze{position:absolute;width:37px;height:27px;margin:-13.5px 0 0 -18.5px;background:url('./assets/ui/hud_muenze.webp') -137.5px -9.5px/1872px 64px no-repeat;pointer-events:none;z-index:4;opacity:0;animation:lohnFlug 420ms cubic-bezier(.3,.1,.6,1) both}
@keyframes lohnStempel{0%{transform:scale(1.18) rotate(-4deg);opacity:.35}65%{transform:scale(.97) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes lohnFlug{0%{transform:translate(0,0) scale(.8);opacity:0}12%{opacity:1}55%{transform:translate(calc(var(--lohn-dx)*.5),calc(var(--lohn-dy)*.5 - 30px)) scale(1);opacity:1}100%{transform:translate(var(--lohn-dx),var(--lohn-dy)) scale(.5);opacity:0}}

.ende-lohn-final{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Atlas: 18 frames 208x128; first nonempty frame, alpha bounds (67,19)-(141,73), displayed at half size. Only the flight wrapper moves. */
#schichtende.mk21-ende :is(.ende-sofort,.ende-ruhig) :is(.ende-serie>:not(.ist-morgen):not([data-stufe="meister"]),.ende-ziel,.ende-handgriff progress,.ende-coach,.ende-tagesfund){animation:none!important;scale:none}
#schichtende.mk21-ende .ende-ruhig .ende-serie *{animation:none!important}
#schichtende.mk21-ende .ende-ruhig .ende-hofstaat-ruf::after{animation:none!important}

#schichtende.mk21-ende :is(.ende-sofort,.ende-ruhig) .ende-konfetti{display:none}

/* EVOLUTION-1025-08: a paper work log, always before the crate shelf. */
.wochenbuch{box-sizing:border-box;width:100%;padding:12px 15px;border:1px solid #a97b45;border-left:5px solid #b07838;border-radius:4px 12px 12px 4px;background:repeating-linear-gradient(0deg,transparent 0 25px,#946c2d09 26px),#fff0cd;color:#503a28;box-shadow:0 3px 0 #50392444,inset 0 0 0 2px #fff8e8}
.wochenbuch-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px dashed #b29161;padding-bottom:6px}.wochenbuch-kopf small{font:800 8px/1.2 system-ui;letter-spacing:1.5px;color:#8c6438}.wochenbuch-kopf h3{margin:1px 0 0;font:900 22px/1.1 'Gustav Display',system-ui;color:#594029}.wochenbuch-lohn{padding:5px 8px;border:1px solid #b48c45;border-radius:4px;background:#f1d494;color:#75511f;font:800 12px/1.2 system-ui;white-space:nowrap}
.wochenbuch-ziele{display:grid;gap:7px;list-style:none;margin:9px 0;padding:0}.wochenbuch-ziel{display:flex;align-items:center;gap:9px}.wochenbuch-stempel{display:grid;place-items:center;width:24px;height:24px;flex:none;border:1px dashed #b99765;border-radius:50%;font:800 12px system-ui;color:#a17e4e}.wochenbuch-ziel[data-erledigt=true] .wochenbuch-stempel{border:2px solid #778043;color:#697337;font-size:22px;transform:rotate(-9deg);box-shadow:inset 0 0 0 2px #fff0cd}.wochenbuch-text{display:grid;grid-template-columns:1fr auto;gap:4px 8px;flex:1;min-width:0;font:700 12px/1.2 system-ui}.wochenbuch-text b{font-variant-numeric:tabular-nums;color:#795326}.wochenbuch progress{grid-column:1/-1;display:block;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;appearance:none;background:#dfc99e}.wochenbuch progress::-webkit-progress-bar{background:#dfc99e}.wochenbuch progress::-webkit-progress-value{background:#bc8737}.wochenbuch progress::-moz-progress-bar{background:#bc8737}.wochenbuch-ziel[data-erledigt=true] progress::-webkit-progress-value{background:#81894d}.wochenbuch-status{margin:6px 0 0;font:600 11px/1.3 system-ui;color:#80613e}.wochenbuch[data-status=abgeholt]{border-left-color:#778043}.wochenbuch[data-status=fehler],.wochenbuch[data-status=uhr-zurueck]{border-left-color:#a45b39}
#schichtende.mk21-ende .ende-wochenbuch{order:3;display:flex;flex-direction:column;gap:3px;padding:7px 9px;border:1px dashed #b48c45;border-left:3px solid #b07838;border-radius:3px;background:#f6e3b5;color:#654629;font:700 11px/1.25 system-ui;box-sizing:border-box}.ende-wochenbuch strong{font-size:12px}.ende-wochenbuch span{font-weight:600}.ende-wochenbuch[data-status=abgeholt]{border-color:#7b8444}
@media(max-height:500px){.wochenbuch{padding:8px 11px}.wochenbuch-ziele{gap:6px;margin:7px 0}.wochenbuch-kopf h3{font-size:20px}.wochenbuch-status{font-size:10px}.gkHubPane[data-gk-hub-pane=feierabend] .gkHubBack{min-height:44px;padding:6px 10px}#schichtende.mk21-ende .ende-bericht{gap:5px}#schichtende.mk21-ende .ende-handgriff{padding-top:6px;padding-bottom:6px}}

/* Kopfzellen ersetzen auch die alten Landschafts- und Lohnplatzierungen. */
#schichtende.mk21-ende .ende-bericht-kopf .ende-lohn-label{grid-column:1/-1;grid-row:1}
#schichtende.mk21-ende .ende-bericht-kopf .abschluss-zahl{grid-column:1/-1;grid-row:2;white-space:nowrap;overflow-wrap:normal;font-size:min(clamp(24px,4.4vw,60px),calc(145cqw / var(--lohn-zeichen,8)))}
#schichtende.mk21-ende .ende-bericht-kopf .ende-meter{grid-column:1/-1;grid-row:3;min-width:0;justify-self:start;text-align:left}
#schichtende.mk21-ende .ende-bericht-kopf .ende-kontostand{grid-column:1/-1;grid-row:4;justify-self:start}
#schichtende.mk21-ende .ende-bericht-kopf .ende-event{grid-column:1/-1;grid-row:5}
#schichtende.mk21-ende .ende-bericht-kopf>.ende-lohn{container-type:inline-size}
#schichtende .ende-zettel{display:grid;gap:0;margin:4px 0;padding:7px 10px;background:#fff1ce;color:#49351f;border:2px solid #9d7951;border-radius:8px;text-shadow:none}
#schichtende .ende-zettel h3{margin:0 0 3px;font:800 15px/1.2 system-ui;color:#53391b}
#schichtende .ende-zettel-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid #cbac75;font:650 13px/1.25 system-ui}
#schichtende .ende-zettel-zeile strong{margin-left:auto;white-space:nowrap;font-weight:850}#schichtende .ende-rechnung summary{cursor:pointer;min-height:44px;list-style:none}#schichtende .ende-rechnung summary small{color:#6a441f;font:750 11px/1.2 system-ui;text-decoration:underline}#schichtende .ende-rechnung summary:focus-visible{outline:2px solid #8d5917}
#schichtende .ende-punktebeleg{padding:0 0 5px 8px;border-left:3px solid #b38648}#schichtende .ende-punktebeleg .ende-zettel-zeile{padding:3px 0;font-size:12px}
@media(max-width:620px) and (orientation:landscape){#schichtende .ende-zettel{padding:3px 6px;margin:0}#schichtende .ende-zettel h3{margin:0;font-size:13px}#schichtende .ende-zettel-zeile{padding:2px 0;font-size:12px}#schichtende .ende-punktebeleg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px;padding:0 0 0 4px}#schichtende .ende-punktebeleg .ende-zettel-zeile{display:grid;gap:0;align-content:start;padding:2px 0;font-size:11px}#schichtende .ende-punktebeleg .ende-zettel-zeile strong{margin:0}}


#schichtende.mk21-ende .ende-bericht-kopf.ende-kopf-grosser-lohn{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
#schichtende.mk21-ende .ende-kopf-grosser-lohn .abschluss-zahl{grid-column:1/-1}
#schichtende.mk21-ende .ende-kopf-grosser-lohn .ende-meter{grid-column:1/-1;grid-row:3;justify-self:start;text-align:left}
#schichtende.mk21-ende .ende-kopf-grosser-lohn .ende-kontostand{grid-row:4}
#schichtende.mk21-ende .ende-kopf-grosser-lohn .ende-event{grid-row:5}

/* Freiwilliger Auftrag: eigene Werkstattkarte, Bericht bleibt im vorhandenen Scrollinhalt. */
.gkGoldTicket{position:absolute;left:1.5%;top:48%;width:17%;z-index:5;box-sizing:border-box;padding:8px;color:#513620;background:#fff0c9;border:2px solid #a96836;border-radius:12px;box-shadow:0 3px 0 #69482b;font:700 13px/1.25 var(--gk-body)}
.gkStA.hasDetail .gkGoldTicket{display:none}
.gkGoldTicket strong,.gkGoldTicket small,.gkGoldTicket span{display:block;margin-bottom:5px}.gkGoldTicket strong{color:#74461c;font-family:var(--gk-display)}
.gkGoldAnsehen,.gkGoldAnnehmen{min-height:44px;min-width:44px;white-space:normal;color:#49301e!important;background:#ffd566!important;border:2px solid #85502d!important;border-radius:9px;font-weight:900;cursor:pointer}.gkGoldAnsehen{width:100%;font-size:12px}.gkGoldAuftrag{color:#513620}.gkGoldAuftrag button{min-height:44px;margin:6px 8px 6px 0}.gkGoldAnsehen:focus-visible,.gkGoldAnnehmen:focus-visible{outline:3px solid #75491d;outline-offset:3px}
.ende-gold-stempel{padding:10px 12px;border:2px solid #a96836;border-radius:10px;background:#fff0c9;color:#513620;font-weight:800;overflow-wrap:anywhere}

/* P8: eigener Platz im Scrollfluss; keine absolute Kachel ueber anderen Zielen. */
.gkTagesziele{flex:none;box-sizing:border-box;padding:7px 11px;border:2px solid #b4a277;border-radius:12px;background:#fff2d8;color:#493d32;box-shadow:0 3px #5b4433}.gkTagesziele h5{margin:0 0 3px;font:900 13px/1.2 system-ui}.gkTagesziel{display:grid;grid-template-columns:minmax(0,1fr) 46px 44px 72px;align-items:center;gap:6px;min-height:20px;font:600 12px/1.25 system-ui}.gkTagesziel>span{white-space:normal;font-size:11px;line-height:1.15}.gkTagesziel progress{width:100%;height:8px;accent-color:#52763b}.gkTagesziel b,.gkTagesziel strong{text-align:right;white-space:nowrap}.gkTagesziel strong{color:#77500e}
@media(min-height:600px){.gkTagesziele{padding:12px 16px}.gkTagesziele h5{font-size:18px}.gkTagesziel{font-size:16px;min-height:28px;grid-template-columns:minmax(0,1fr) 110px 70px 100px}}

/* P9: kleine Sammelreihe unter dem freien Spielfeld; kein neuer Balken. */
#gustavHud{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;justify-content:center;box-sizing:border-box;width:122px;height:24px;padding:2px 8px;border-radius:12px;background:#2b211bd9;pointer-events:none;font:900 15px/20px system-ui;z-index:5}#gustavHud[hidden]{display:none}#gustavHud span{color:#8b8a86}#gustavHud span.isOn{color:#ffe477;text-shadow:0 0 5px #ffd24a66}
.gkGustavStand{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:6px 12px;border:1px solid #9b7e45;border-radius:9px;background:#483928;color:#ffe7ab;font:700 12px/1.25 system-ui}.gkGustavStand[hidden]{display:none}.gkGustavBuchstaben{display:flex;gap:9px;font:900 18px/1 system-ui}.gkGustavBuchstaben b{color:#96918a}.gkGustavBuchstaben b.isOn{color:#ffe477}

/* V1.1-3: Lohn bleibt sichtbar; darunter Ausbau, Morgen und neutraler Grund. */
#schichtende.peak-end.mk21-ende.v11-peak{grid-template-rows:minmax(0,1fr) auto 48px;align-content:stretch;box-sizing:border-box;height:100%;max-height:100dvh;padding:16px 24px;gap:8px 20px}
#schichtende.mk21-ende.v11-peak .ende-bericht{overflow:hidden;padding:14px 18px 8px;gap:8px}
#schichtende.mk21-ende.v11-peak .ende-bericht-kopf{display:block}
#schichtende.mk21-ende.v11-peak .ende-bericht-kopf>.ende-lohn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:0;border:0}
#schichtende.mk21-ende.v11-peak .ende-lohn .ende-lohn-label{grid-row:1;grid-column:1}
#schichtende.mk21-ende.v11-peak .ende-lohn .abschluss-zahl{grid-row:2/5;grid-column:1;font-size:min(54px,calc(115cqw / var(--lohn-zeichen,8)));align-self:center;line-height:1.1}
#schichtende.mk21-ende.v11-peak .ende-lohn .ende-meter{grid-row:2;grid-column:2;font-size:13px}
#schichtende.mk21-ende.v11-peak .peak-best{grid-row:1;grid-column:2;font:800 12px/1.25 system-ui;color:#715023}
#schichtende.mk21-ende.v11-peak .peak-fund{grid-row:3/5;grid-column:2;font:700 13px/1.25 system-ui;overflow-wrap:anywhere}@media(max-height:500px){#schichtende.hhoMitFrage.v11-peak .peak-fund{display:none}}   /* Audit 12.11.: die einmalige Fachfrage braucht die Zeilen; der Fund steht auch im Bild (Tagesfund, Fundstueck) */
#schichtende.mk21-ende.v11-peak .ende-lohn :is(.ende-kontostand,.ende-event),#schichtende.mk21-ende.v11-peak .ende-bericht-label{display:none}
#schichtende.mk21-ende.v11-peak .ende-bericht-inhalt{padding:0 3px 0 0;border:0;border-radius:0;gap:9px;scrollbar-gutter:stable}
#schichtende.mk21-ende.v11-peak .ende-handgriff{margin:0;padding:7px 9px;gap:5px;box-sizing:border-box;flex:none}
#schichtende.mk21-ende.v11-peak .ende-handgriff progress{display:block;height:8px;animation:none}
#schichtende.mk21-ende.v11-peak .ende-handgriff[data-start=true]::after{content:'';position:absolute;left:9px;bottom:7px;width:5px;height:8px;border-radius:2px;background:#b67424;pointer-events:none}
#schichtende.mk21-ende.v11-peak .ende-handgriff-cta{display:none}
#schichtende.mk21-ende.v11-peak:has(#seKiste:not([hidden])) .ende-ziel[data-art=kiste]>.ende-handgriff-text{display:flex}
#schichtende.mk21-ende.v11-peak .peak-morgen{margin:0;color:#634426;font:800 14px/1.3 system-ui}
#schichtende.mk21-ende.v11-peak .peak-grund{margin:0;color:#786849;font:500 11px/1.3 system-ui}#schichtende.mk21-ende.v11-peak .ende-dieb{margin:0;color:#8d5724;font:800 12px/1.3 system-ui}
#schichtende.mk21-ende.v11-peak .peak-details{border-top:1px solid #b48c4540;padding-top:5px;font:600 11px/1.3 system-ui}
#schichtende.mk21-ende.v11-peak .peak-details summary{min-height:26px;cursor:pointer;color:#786849}
#schichtende.mk21-ende.v11-peak .peak-details>*:not(summary){margin-top:8px}
#schichtende.mk21-ende.v11-peak [data-saved=false] .abschluss-zahl::after{content:' €'}
@media(max-height:380px){
 #schichtende.peak-end.mk21-ende.v11-peak{padding:8px 20px;gap:5px 16px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}#schichtende.peak-end.mk21-ende.v11-peak::before{inset:4px 10px}   /* Abnahme ende-7: Rahmen umschliesst Lohntuete und Knopfleiste */
 #schichtende.mk21-ende.v11-peak .ende-bericht{padding:8px 12px 4px;gap:5px;min-height:0}
 #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt{overflow-y:auto;min-height:0;gap:6px;-webkit-overflow-scrolling:touch}
 #schichtende.mk21-ende.v11-peak .ende-lohn .abschluss-zahl{font-size:min(39px,calc(115cqw / var(--lohn-zeichen,8)))}
 #schichtende.mk21-ende.v11-peak .peak-morgen{font-size:12px}
 #schichtende.mk21-ende.v11-peak .ende-szene{padding-top:38px}
}

/* V1.1 1.1-7: Kontakt zeigt den passenden Slot noch sechs Sekunden, ohne Dauer-Effekt. */
@keyframes kopfKontaktPuls{50%{box-shadow:inset 0 0 0 3px #ffd76b}}
#fahrt-ui [data-tool].kopfKontaktPuls{animation:kopfKontaktPuls 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#fahrt-ui [data-tool].kopfKontaktPuls{animation:none}}
/* V1.1 SPECIAL Druckstoss: lesbar im unveraenderten Slot, Nachbarn und Euro frei. */
#fahrt-ui #vorrat [data-sorte="druckstoss"] .vorratName { white-space:pre-line; text-align:center; font-size:8px; line-height:8px; }
#fahrt-ui #vorrat [data-sorte="druckstoss"] .vorratIcon { font-size:18px; line-height:18px; color:#176879; }

/* V1.1 SPECIAL: vorhandener Eurozaehler im freien oberen HUD-Band; Lehrlingslayout bleibt separat. */
/* Kevin 30.10. 'oben in der UI wird ein Bereich ueberdeckt': der Euro steht schon in der grossen Meter/Euro-Zeile oben Mitte; die alte Pille lag darunter. */
body:not(.istLehrling) #fahrt-ui #coinHud.ggAlteEuroPille { display:flex!important; top:calc(8px + env(safe-area-inset-top,0px)); left:50%; right:auto; transform:translateX(-50%); min-height:32px; box-sizing:border-box; justify-content:center; padding:3px 10px; border:2px solid #80613d; background:#fff0ca; color:#523b24; text-shadow:none; font-size:14px; z-index:4; pointer-events:none; }

/* C-480b: bestaetigter Optik-Kauf, auf die neue Karte begrenzt. */
.gkOptikFeier { animation:gkOptikFeier .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes gkOptikFeier { 0%,100% { transform:scale(1); } 35% { transform:scale(1.04) rotate(-1deg); } 70% { transform:scale(.98); } }
.gkOptikStandPuls { animation:gkOptikStand .65s ease-out; }
@keyframes gkOptikStand { 0%,100% { transform:scale(1); } 30% { transform:scale(1.25); background:#765641; } }
.gkOptikSplitter { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.gkOptikSplitter i { position:absolute; left:50%; top:36%; width:22px; height:22px; background:url('./assets/laden/fx_gem.webp') center/contain no-repeat; opacity:0; animation:gkOptikSplitter 1.1s ease-out var(--d) forwards; }
.gkOptikSplitter i:nth-child(odd) { background-image:url('./assets/laden/fx_stern.webp'); }
@keyframes gkOptikSplitter { 0% { opacity:1; transform:translate(0,0) rotate(45deg) scale(.6); } 70% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(225deg) scale(1); } }
.gkOptikBildFeier > img { visibility:hidden; }
.gkOptikRive { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.gkOptikRive canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .gkOptikFeier,.gkOptikStandPuls,.gkOptikSplitter i { animation:none!important; } .gkOptikSplitter,.gkOptikRive { display:none; } }

/* Fund und Fixer behalten ihre bisherigen Anker. Der Koffer sitzt unter dem Fixer. */
#fahrt-ui #vorrat [data-vorrat="1"] { left:auto; right:max(24px,env(safe-area-inset-right,0px)); top:calc(126px + env(safe-area-inset-top,0px)); bottom:auto; border-color:#5b371d; }
#fahrt-ui #vorrat [data-vorrat="1"] .drallStand { position:absolute; right:2px; top:0; padding:0 3px; border-radius:3px; color:#fff; background:#523414; font:700 9px/12px system-ui; }

#fahrt-ui .duellVentilFx { position:absolute; left:35%; top:27%; width:30%; height:20px; pointer-events:none; text-align:center; font:800 10px/20px system-ui; color:#fff; border-radius:8px; background:#503421; overflow:hidden; animation:ggVentilSignal 900ms both; }
#fahrt-ui .duellVentilFx[data-art=bypass] { background:#12677d; }
.duellVentilFx::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:#f9c63b; animation:ggVentilFront 600ms ease-out both; }
@keyframes ggVentilFront { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@keyframes ggVentilSignal { 0% { opacity:.4; } 15%,85% { opacity:1; } 100% { opacity:0; } }
@media(prefers-reduced-motion:reduce){.duellVentilFx::after{animation:none;} }

.duellVentilFx::before { content:""; width:22px; height:12px; border:3px solid #f0bb52; border-radius:100%; display:inline-block; vertical-align:middle; margin-right:6px; }
.duellVentilFx[data-art=bypass]::before { border-radius:3px 14px 2px 2px; border-bottom-color:transparent; animation:ggBypassOeffnet 600ms ease-out both; }
.duellVentilFx[data-art=schlamm]::after { background:repeating-linear-gradient(105deg,#7f5435 0 5px,#dba05b 6px 10px); height:6px; }
@keyframes ggBypassOeffnet { from { transform:rotate(0deg); } to { transform:rotate(-25deg); } }
@media(prefers-reduced-motion:reduce){.duellVentilFx[data-art=bypass]::before{animation:none;}}

#fahrt-ui .zuendHilfe { position:absolute; inset:0; z-index:14; pointer-events:none; overflow:hidden; }
.zuendHologramm,.zuendFunke { position:absolute; pointer-events:none; transform:translate(-50%,-50%); }
.zuendHologramm { width:42px; height:34px; object-fit:contain; padding:3px; border:1px solid #edb75c; border-radius:50%; background:rgba(67,34,18,.60); }
.zuendFunke { width:64px; height:64px; background:url('./assets/rive/zuendfunke.png') no-repeat 0 0; }
.zuendRot::after { content:""; position:absolute; inset:20%; border-radius:50%; background:radial-gradient(ellipse,#ffb24a99,transparent 72%); }
.zuendHilfe [hidden],.zuendHilfe[hidden] { display:none!important; }
.zuendAnsage { position:absolute; left:50%; bottom:86px; transform:translateX(-50%); padding:3px 9px; border-radius:8px; font:800 13px system-ui; color:#352611; background:#ffe7a6; }
#fahrt-ui.zuendKontakt .werkzeugHand { visibility:hidden; }
#fahrt-ui #tools .zuendLeicht { outline:2px solid #ffc45b; outline-offset:2px; }
#fahrt-ui.zuendFokus #tools .toolBtn:not(.zuendZiel) { opacity:.55; }
#fahrt-ui.zuendFokus #tools .zuendZiel { transform:translateY(-8px) scale(1.22); transition:none; z-index:9; }
#tools .zuendHand { position:absolute; left:50%; bottom:100%; width:32px; height:38px; pointer-events:none; animation:zuendTock 530ms ease-out 1 both; }
#tools .zuendTreffer { animation:zuendTreffer 260ms ease-out 1 both; }
@keyframes zuendTock { 0%,45%,100% { transform:translate(-50%,0) rotate(180deg); } 20%,70% { transform:translate(-50%,7px) rotate(180deg); } }
@keyframes zuendTreffer { 0%,35% { box-shadow:0 0 0 4px #fff3a8,0 0 14px #f3a51c; } 100% { box-shadow:none; } }
@media(prefers-reduced-motion:reduce){#tools .zuendHand {animation:none;transform:translateX(-50%) rotate(180deg);} #tools .zuendTreffer {animation-duration:100ms;} }

#fahrt-ui .zuendGold { position:absolute; width:64px; height:64px; transform:translate(-50%,-50%); z-index:14; pointer-events:none; background:url('./assets/rive/zuendfunke.png') no-repeat 0 0; animation:zuendGold 260ms steps(12,end) both; }
@keyframes zuendGold { to { background-position-x:-768px; } }
#fahrt-ui.zuendKontakt #geistHand { visibility:hidden; }
#fahrt-ui .zuendHologramm { width:48px; height:38px; border-color:#ffc35a; }
@media (prefers-reduced-motion:reduce){
  #fahrt-ui .zuendFunke,#fahrt-ui .zuendGold { display:none!important; }
  #fahrt-ui.zuendFokus #tools .toolBtn:not(.zuendZiel) { opacity:1; }
  #fahrt-ui.zuendFokus #tools .zuendZiel { transform:none; }
}

.zuendSpur { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.zuendSpur { fill:none; stroke-linecap:round; } .zuendSpur path { stroke:inherit; stroke-width:inherit; } .zuendSpur { stroke:#dc831c; stroke-width:clamp(7px,1vw,10px); } .zuendSpur use { stroke:#fff39a; stroke-width:clamp(3px,.45vw,5px); }
@media(prefers-reduced-motion:reduce){.zuendSpur{display:none;}}

/* Freie Schicht: Weite und Serie stehen vor den verdienten Meisterpunkten. */
#fahrt-ui #hudTop .hudSauber,#hudTiefe,#hudTierAnsage,#hudEtappe{display:none}
body.gg-meister-hud #hudTop #hudEtappe:not([hidden]){display:block;width:fit-content;max-width:100%;padding:2px 8px;border:1px solid #ffe4a0;border-radius:5px;color:#3d2814;background:linear-gradient(#ffeda8,#e7af49);box-shadow:inset 0 -2px #be8229;font:900 13px/1.2 system-ui;letter-spacing:.045em;text-shadow:none;white-space:normal}
@media(max-width:700px){body.gg-meister-hud #hudTop #hudEtappe:not([hidden]){padding:1px 5px;font-size:11px}}
/* Reserve the notch, the three controls and the actual meter rail before centring the slip. */
body.gg-meister-hud{
  --hilfe-links:208px;
  --meterleiste:clamp(140px,calc(100% - 500px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),250px);
}
@media(max-width:700px),(max-height:560px){body.gg-meister-hud{--hilfe-links:202px}}
body.gg-meister-hud #fahrt-ui #hilfeBtn{left:calc(var(--hilfe-links) + env(safe-area-inset-left,0px))}
html body.gg-meister-hud:not(.race-owned) #fahrt-ui #meters{width:var(--meterleiste)!important}
body.gg-meister-hud #fahrt-ui #hudTop{
  position:absolute;top:calc(8px + env(safe-area-inset-top,0px));
  left:calc(env(safe-area-inset-left,0px) + var(--hilfe-links) + 52px);
  right:calc(env(safe-area-inset-right,0px) + var(--meterleiste) + 18px);
  width:auto;max-width:302px;min-width:0;margin-inline:auto;transform:none;container:hudbeleg / inline-size;
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;
  box-sizing:border-box;height:auto;padding:5px 8px;gap:3px 6px;align-items:baseline;
  border:2px solid var(--ink);border-radius:11px;background:var(--hud);color:var(--ink);
  box-shadow:0 3px 0 var(--hudSh),inset 0 2px 0 var(--hud2);pointer-events:none;
}
body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeter,.hudSauber,.hudMeister){
  display:flex;align-items:baseline;gap:2px;min-width:0;margin:0;padding:0;border:0;text-align:left
}
body.gg-meister-hud #hudTop :is(.hudMeter,.hudMeister) .lbl{position:absolute;clip-path:inset(100%);width:1px;height:1px;overflow:hidden}
body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeter,.hudMeister) .val{
  color:var(--ink);font:19px/1.1 var(--gk-display,system-ui);font-variant-numeric:tabular-nums;white-space:nowrap
}
body.gg-meister-hud #hudTop .hudMeter{grid-area:1/1}
body.gg-meister-hud #hudTop .hudMeister{grid-area:1/3;justify-self:end}
body.gg-meister-hud #hudTop .hudMeister .val::after{content:' Pkt.';font:800 .65em/1 system-ui}
:lang(en) body.gg-meister-hud #hudTop .hudMeister .val::after{content:' pts'}
body.gg-meister-hud #hudTop .hudSauber{grid-area:1/2;justify-self:center;color:#634b33;white-space:nowrap}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber .lbl{display:inline;font-size:0;margin:0;color:inherit;letter-spacing:0}
body.gg-meister-hud #hudTop .hudSauber .lbl::after{content:attr(data-lbl);font:700 10px/1 system-ui}
:lang(en) body.gg-meister-hud #hudTop .hudSauber .lbl::after{content:attr(data-lbl)}
body.gg-meister-hud #hudTop .hudSauber .val{font:800 11px/1 system-ui;color:inherit}
body.gg-meister-hud #hudTop #hudTiefe:not([hidden]){display:block;grid-area:1/2;justify-self:end;align-self:center;color:#744619;font:800 10px/1.1 system-ui;white-space:nowrap}
body.gg-meister-hud #fahrt-ui>#comboV,body.gg-meister-hud #hudTop .hudSlim,body.gg-meister-hud #hudTop .hudNeben,
body.gg-meister-hud #reinigung-stand,body.gg-meister-hud #fahrt-ui #coinHud{display:none!important}
body.gg-meister-hud #hudTop .hudZiel{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:2px 4px;min-width:0;text-align:left}

body.gg-meister-hud #hudTop #ggRekord:not([hidden]){display:block;grid-area:1/1;min-width:0;color:#59422c;font:700 11px/1.15 system-ui}
body.gg-meister-hud #hudTop #ggRekord>span{display:block;white-space:normal}
body.gg-meister-hud #hudTop #ggRekord progress{display:none}
body.gg-meister-hud #hudTop #hudTierAnsage:not([hidden]){display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.gg-meister-hud #hudTop #hudEtappe:not([hidden]){display:block;grid-area:2/1/3/-1;min-width:0;box-sizing:border-box;font:700 11px/1.15 system-ui;color:#744619}
body.gg-meister-hud #hudTop:has(#hudTierAnsage:not([hidden])) #hudTiefe{color:#583600;background:#f5d58c;border-radius:3px;padding:1px 3px}
body.gg-meister-hud #bestwertTakt.auftrag{width:84px}
body.gg-meister-hud .auftrag-zeile{width:max-content;min-width:84px;margin:0;padding:2px 6px 2px 5px;gap:0 4px}
body.gg-meister-hud .auftrag-zeile[hidden]{display:none}
body.gg-meister-hud #gg-event-karte{width:auto!important;min-width:0!important;padding:2px 5px!important;gap:4px!important}
body.gg-meister-hud #gg-event-karte .gek-ico{width:16px;height:16px;min-width:16px}
body.gg-meister-hud #gg-event-karte .gek-k>span,body.gg-meister-hud #gg-event-karte .gek-bar,body.gg-meister-hud #gg-event-karte .gek-z{display:none!important}
html body #fahrt-ui #tools #kurzlinerAnz:not([hidden]){
  display:flex!important;position:absolute!important;left:0!important;top:auto!important;bottom:calc(100% + 12px)!important;
  transform:none!important;width:max-content;gap:3px;padding:2px 6px;border-radius:5px;font:400 11px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif);letter-spacing:.3px;
}
#fahrt-ui #tools #kurzlinerAnz::before{display:none!important}
#fahrt-ui #tools #kurzlinerAnz img{width:18px;height:12px}
#fahrt-ui #tools #kurzlinerAnz span{font-size:12px!important}
@media(max-width:670px){
  #fahrt-ui #fahrt-zentrale{min-width:90px;padding:5px}
  body.gg-meister-hud{--hilfe-links:157px}
  body.gg-meister-hud #fahrt-ui #meters .mLbl>[data-begriff]{font-size:0!important;text-overflow:clip}
  body.gg-meister-hud #fahrt-ui #meters .mLbl>[data-begriff]>b{display:none}
  body.gg-meister-hud #meters .mLbl>[data-begriff]::before{font:800 8px/1.1 system-ui}
  body.gg-meister-hud #kellerBox [data-begriff]::before{content:'Keller'}
  body.gg-meister-hud #pipeBox [data-begriff]::before{content:'Rohr'}
  :lang(en) body.gg-meister-hud #kellerBox [data-begriff]::before{content:'Cellar'}
  :lang(en) body.gg-meister-hud #pipeBox [data-begriff]::before{content:'Pipe'}
}
@container hudbeleg (max-width:215px){
  body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeter,.hudMeister) .val{font:800 clamp(11px,7.8cqw,16px)/1.1 system-ui}
  body.gg-meister-hud #hudTop #ggRekord:not([hidden]){font-size:10px}
}
@container hudbeleg (max-width:175px){
  body.gg-meister-hud #hudTop .hudSauber{flex-direction:column;align-items:center;gap:0;align-self:center}
  body.gg-meister-hud #hudTop .hudSauber .lbl::after{font-size:8px}
  body.gg-meister-hud #hudTop .hudSauber .val{font-size:9px}
}
@media(max-width:600px) and (orientation:landscape){
  body.gg-meister-hud{--hilfe-links:141px;--meterleiste:clamp(96px,calc(100% - 363px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),190px)}
  body.gg-meister-hud #fahrt-ui #meters>:is(#kellerBox,#pipeBox){flex:1 1 0;padding-inline:3px}
  body.gg-meister-hud #fahrt-ui #vorrat [data-vorrat]{box-sizing:border-box;width:44px;height:44px}
  body.gg-meister-hud #fahrt-ui #vorrat .slotFenster{max-width:100%;height:24px}
  body.gg-meister-hud #fahrt-ui #vorrat [data-vorrat="0"]{right:calc(env(safe-area-inset-right,0px) + 62px)}
  html body.gg-meister-hud #fahrt-ui #vorrat #fixerBtn{box-sizing:border-box;width:48px;height:44px;right:calc(env(safe-area-inset-right,0px) + 10px)!important}
  body.gg-meister-hud #fahrt-ui #vorrat [data-vorrat="1"]{right:calc(env(safe-area-inset-right,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 112px)}
  body.gg-meister-hud #fahrt-ui #fahrt-zentrale{min-width:78px;padding-inline:3px}
  body.gg-meister-hud #fahrt-ui #hudTop{padding:3px 4px;column-gap:3px}
}
@media(min-width:671px) and (orientation:landscape){
  html body.gg-meister-hud #lehrlingZiel.einstiegHinweis{
    box-sizing:border-box;width:min(264px,calc(var(--hilfe-links) + 36px))!important
  }
}
@media(max-width:670px) and (orientation:landscape){
  html body.gg-meister-hud #lehrlingZiel.einstiegHinweis{top:calc(97px + env(safe-area-inset-top,0px))!important}
  html body.gg-meister-hud:has(#hudTierAnsage:not([hidden]),#hudEtappe:not([hidden])) #lehrlingZiel.einstiegHinweis{top:calc(120px + env(safe-area-inset-top,0px))!important}
}
@media(orientation:landscape) and (max-height:380px){
  body.gg-meister-hud #fahrt-ui #geistHand{top:calc(max(115px,28vh) + env(safe-area-inset-top,0px));bottom:auto;margin-top:0;transform-origin:center top}
}

/* Kompakte Bestellliste auf dem rechten Klemmbrett. */
.gkGrosshandel,.gkSpecial{box-sizing:border-box;border:2px solid #735638;border-radius:10px;background:#fff2d4;color:#443421;box-shadow:0 2px 0 #765738}
.gkGrosshandel{margin:4px 0 12px;padding:0 10px}
.gkGrosshandel summary{min-height:44px;padding:9px 2px;box-sizing:border-box;cursor:pointer;font:18px/1.3 var(--gk-display)}
.gkGrosshandel p{margin:3px 0 7px;font:600 12px/1.3 system-ui}
.gkHandelsaktion{display:block;width:100%;min-height:44px;margin:0;padding:7px 3px;border:0;border-top:1px solid #c6a878;text-align:left;background:transparent;color:#49371f;font:700 13px/1.3 system-ui;cursor:pointer}
.gkSpecial{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:6px;margin:5px 0;padding:5px 7px;text-align:left}
.gkSpecialIcon{font:700 22px/1 system-ui;color:#176879;text-align:center}
.gkSpecialText{min-width:0}.gkSpecialText strong,.gkSpecialText small{display:block}
.gkSpecialText strong{font:17px/1.1 var(--gk-display)}.gkSpecialText small{margin-top:2px;font:600 12px/1.2 system-ui}
.gkSpecialPreise{display:flex;gap:4px}.gkSpecialPreise .gkSpecialKauf{display:flex;flex-flow:column;justify-content:center;min-width:58px;min-height:44px;height:auto;gap:1px;padding:3px 5px;border:1px solid #876734;border-radius:7px;background:#f6d077;color:#49371f;box-shadow:0 2px 0 #99743e;text-shadow:none;text-transform:none;letter-spacing:0;font:800 13px/1.2 system-ui}
.gkSpecialPreise .gkSpecialKauf:disabled{opacity:1;background:#f2e7ce;color:#655740;border-color:#baaa8a;box-shadow:none}
.gkSpecialKauf small{font:600 10px/1.15 system-ui}.gkSpecialBereit{font:700 12px system-ui;color:#235c31}
#ggD1Pin.gkAuftragPin{position:static;align-self:stretch;min-height:44px;padding:5px 9px;border:1px solid #9c794b;border-radius:7px;background:#fff1ce;color:#4c3927;text-align:left;font:650 12px/1.3 system-ui}
#ggD1Pin.gkAuftragPin:disabled{opacity:1}
.gkHandelsbrief{display:flex;align-items:center;gap:8px;color:#50381e}
.gkHandelsbrief::before{content:'';background:url('./assets/laden/grosshandel-lohnsiegel.webp') center/cover;width:40px;height:40px;flex:none;border:1px solid #987849;border-radius:5px}
.gkHandelsbrief::after{content:'▸';margin-left:auto;color:#8a6029}
.gkGrosshandel[open]>.gkHandelsbrief::after{content:'▾'}
.gkHandelsbrief strong,.gkHandelsbrief small{display:block}.gkHandelsbrief small{font:700 10px system-ui;letter-spacing:.07em;color:#816139}
.gkHubContent.gkLadenAktiv{scrollbar-width:thin}
.gkHubContent.gkLadenAktiv ~ .gkHubHint,.gkHubContent.gkLadenAktiv::after{display:none}

/* Theke: dieselben Regalbretter und Originalstücke wie Gustavs Werkstatt. */
.gkLadenAktiv .gkLadenTresen{
  color:#fff1cd;border:2px solid #50351f;border-radius:10px;
  background:linear-gradient(90deg,#3e281de8 0%,#50331de3 65%,#50331d70),url('./assets/laden/kulisse_regal.webp') center 40%/cover;
  box-shadow:inset 0 1px #be9b62,0 3px #4d3422
}
#gkMetaRoot .gkLadenAktiv .gkLadenTresen .gkHubCardIcon{width:56px;height:56px;background:url('./assets/sammlung/kupfermeister/werkstattschild.png') center/contain no-repeat}
.gkLadenAktiv .gkLadenTresen .gkHubCardIcon>*{visibility:hidden}
.gkLadenAktiv .gkLadenTresen .gkHubCardCopy small{color:#f6ca76;opacity:1}
.gkLadenAktiv .gkLadenTresen .gkHubCardCopy>span{color:#f8e7c9}
.gkLadenAktiv .gkGrosshandel{border-color:#654828;background:linear-gradient(110deg,#fff3d8,#efd49d)}
.gkLadenAktiv .gkHandelsbrief{gap:12px;padding:5px 0}
.gkLadenAktiv .gkHandelsbrief::before{width:56px;height:49px;background-color:#876139;box-shadow:0 2px #a38455;transform:rotate(-3deg)}
.gkLadenAktiv .gkHandelsbrief::after{content:'ÖFFNEN';font:700 11px/1 system-ui;letter-spacing:.05em;padding:8px 10px;color:#573b1e;border:1px solid #b38a4e;border-radius:4px;background:#ffe7b2}
.gkLadenAktiv .gkGrosshandel[open]>.gkHandelsbrief::after{content:'SCHLIESSEN'}
.gkLadenAktiv .gkHandelsaktion{border-width:1px 0 0;border-color:#bb995c;padding:9px 7px;line-height:1.25;text-align:left}
.gkLadenAktiv .gkHandelsaktion:is(:hover,:focus-visible){background:#f8df9c}
.gkLadenAktiv .gkSpecial{grid-template-columns:clamp(62px,8vw,96px) minmax(0,1fr) auto;gap:8px;min-height:63px;padding:4px;
  border-color:#715132;background:linear-gradient(100deg,#fff7de,#f5dfb1);box-shadow:0 2px #65472d}
.gkLadenAktiv .gkSpecialProbe{width:100%;height:49px;object-fit:cover;border:1px solid #846849;border-radius:4px;background:#30403b}
.gkLadenAktiv .gkSpecialPreise .gkSpecialKauf{color:#fff2d5;background:linear-gradient(#775333,#563920);border-color:#47311f;box-shadow:inset 0 1px #be9464,0 2px #4a311e}
.gkLadenAktiv .gkSpecialPreise .gkSpecialKauf:disabled{color:#6d5940;background:#eadcbe;border-color:#bcaa8c;box-shadow:none}
.gkLadenAktiv :is(.gkSpecialKauf,.gkHandelsaktion,.gkHandelsbrief,.gkLadenTresen){-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.gkLadenAktiv :is(.gkSpecialKauf,.gkHandelsaktion,.gkHandelsbrief,.gkLadenTresen):focus-visible{outline:2px solid #704821;outline-offset:2px}
@media(max-width:740px){
 .gkLadenAktiv .gkSpecial{grid-template-columns:58px minmax(0,1fr);gap:2px 7px}
 .gkLadenAktiv .gkSpecialProbe{grid-row:1/3;height:57px}
 .gkLadenAktiv .gkSpecialPreise,.gkLadenAktiv .gkSpecialBereit{grid-column:2}
}
@media(orientation:landscape) and (max-height:480px){
  #gkMetaRoot .gkLadenAktiv .gkLadenTresen{flex:0 0 auto;min-height:64px;padding:5px 9px}
  #gkMetaRoot .gkLadenAktiv .gkLadenTresen .gkHubCardIcon{width:42px;height:42px;flex-basis:42px}
  #gkMetaRoot .gkLadenAktiv .gkLadenTresen .gkHubCardCopy strong{font-size:23px}
}

/* Zwei Schubladen je Regalbreite: Muster am Rohr, Beschreibung, dann Preisplaketten. */
.gkLadenAktiv{container-type:inline-size}
.gkLadenAktiv [data-gk-hub-pane="laden"]:not([hidden]){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;align-content:start;
}
.gkLadenAktiv [data-gk-hub-pane="laden"]>h2,.gkLadenAktiv [data-gk-specials]>h2{grid-column:1/-1;margin:0}
.gkLadenAktiv [data-gk-specials]{display:contents}
#gkMetaRoot .gkLadenAktiv .gkLadenTresen{min-width:0;min-height:64px;height:auto;align-self:start;padding:6px 8px;gap:6px}
#gkMetaRoot .gkLadenAktiv .gkLadenTresen .gkHubCardIcon{width:38px;height:38px;flex-basis:38px}
.gkLadenAktiv .gkLadenTresen .gkHubCardCopy{min-width:0}
#gkMetaRoot .gkLadenAktiv .gkLadenTresen .gkHubCardCopy strong{font-size:21px;line-height:1.1}
.gkLadenAktiv .gkLadenTresen .gkHubCardCopy>span{font-size:11px;line-height:1.15;white-space:normal}
.gkLadenAktiv .gkGrosshandel{align-self:start;margin:0;padding:0 6px}
.gkLadenAktiv .gkHandelsbrief{gap:6px;min-height:60px}
.gkLadenAktiv .gkHandelsbrief::before{width:43px;height:43px}
.gkLadenAktiv .gkHandelsbrief strong{font-size:16px;line-height:1.1}
.gkLadenAktiv .gkHandelsbrief small{font-size:9px}
.gkLadenAktiv .gkHandelsbrief::after{content:'▾';padding:3px;border:none;background:none;font-size:14px}
.gkLadenAktiv .gkGrosshandel[open]>.gkHandelsbrief::after{content:'▴'}
.gkLadenAktiv .gkSpecial{
  margin:0;padding:5px;grid-template-columns:minmax(100px,.97fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:5px 7px;align-content:start;border:2px solid #60442b;border-radius:8px;
}
.gkLadenAktiv .gkSpecialProbe{
  grid-area:1/1;width:100%;height:100px;object-fit:cover;border-radius:5px;border:2px solid #715338;
}
.gkLadenAktiv .gkSpecialText{grid-area:1/2;align-self:center;overflow-wrap:anywhere}
.gkLadenAktiv .gkSpecialText strong{font-size:16px}
.gkLadenAktiv .gkSpecialPreise,.gkLadenAktiv .gkSpecialBereit{grid-area:2/1/3/3;display:flex;border-top:1px solid #bb9763;padding-top:4px}
.gkLadenAktiv .gkSpecialPreise .gkSpecialKauf{flex:1;min-height:44px}
@container(max-width:500px){
 .gkLadenAktiv .gkSpecial{grid-column:1/-1;grid-template-columns:104px minmax(0,1fr)}
 .gkLadenAktiv .gkSpecialProbe{grid-row:1/3;height:100%}
 .gkLadenAktiv .gkSpecialPreise,.gkLadenAktiv .gkSpecialBereit{grid-area:2/2}
 .gkLadenAktiv .gkLadenTresen,.gkLadenAktiv .gkGrosshandel{grid-column:1/-1}
}

.gkLadenAktiv [data-gk-hub-pane="laden"]:not([hidden])>h2{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.gkLadenAktiv .gkSpecialProbe{object-fit:contain;background:#4c3929}
.gkLadenAktiv .gkKofferAnleitung{grid-column:1/-1;padding:9px 12px;border:2px solid #735234;border-radius:8px;background:#fff1cc;color:#423222;text-shadow:none}
#gkMetaRoot .gkKofferAnleitung h2{position:static;margin:0 0 3px;color:#49341e;text-shadow:none;font:400 16px/1.15 var(--gk-display,'Gustav Display','Arial Black',sans-serif);letter-spacing:.02em}
#gkMetaRoot .gkKofferAnleitung p{margin:0;color:#49341e;font:650 13px/1.35 system-ui;max-width:78ch}

/* Die Maschine hat ihre eigene freie Arbeitsfläche. Der Werkzeugkasten enthält die bekannten Ausbauteile. */
.gkStA .gkAusbaufach{position:absolute;z-index:7;top:max(40px,9%);left:27%;width:46%;box-sizing:border-box;color:#483424}
.gkStA .gkFachGriff,.gkStA .gkAusruestung>summary{list-style:none;cursor:pointer;min-height:44px;box-sizing:border-box}
.gkStA summary::-webkit-details-marker{display:none}
.gkStA .gkFachGriff{display:grid;grid-template-columns:1fr auto;align-content:center;padding:5px 12px;border:2px solid #714d28;border-radius:7px;background:linear-gradient(#fff1c4,#e5c88a);box-shadow:0 3px #67472b}
.gkStA .gkFachGriff strong{grid-column:1;font:clamp(16px,2.4vw,27px)/1 var(--gk-display)}
.gkStA .gkFachGriff span{grid-column:1;font:700 11px/1.25 var(--gk-body)}
.gkStA .gkFachGriff::after{content:'▾';grid-area:1/2/3/3;align-self:center;color:#805729;font-size:18px}
.gkStA .gkAusbaufach[open]{max-height:calc(100% - max(40px,9%) - 58px);overflow:auto;overscroll-behavior:contain;background:#f5e4bd;border:2px solid #63452c;border-radius:9px;box-shadow:0 4px 8px #35261773}
.gkStA .gkAusbaufach[open]>.gkFachGriff{position:sticky;top:0;z-index:2;border:0;border-radius:0;box-shadow:0 1px #ae8f61}
.gkStA .gkAusbaufach[open]>.gkFachGriff::after{content:'▴'}
.gkStA .gkAusbaufach .gkAusbauTabs,.gkStA .gkAusbaufach .gkCards,.gkStA .gkAusbaufach .gkSetup{position:static;width:auto;max-height:none;margin:5px}
.gkStA .gkAusbaufach .gkAusbauTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.gkStA .gkAusbaufach .gkAusbauTab{min-width:0;white-space:normal;min-height:44px;padding-inline:2px}
.gkStA .gkAusbaufach .gkCard{width:100%}
.gkStA .gkAusruestung{margin:4px 6px;border-bottom:1px solid #b2976b}
.gkStA .gkAusruestung>summary{display:flex;align-items:center;gap:8px;font:700 13px var(--gk-body)}
.gkStA .gkAusruestung>summary::before{content:'▸'}.gkStA .gkAusruestung[open]>summary::before{content:'▾'}
#gkMetaRoot .gkStA .gkAusruestung .gkSetup{display:block;padding:4px 7px;font-size:12px}
.gkStA .gkAusruestung .gkSetup::before{content:none}
.gkStA .gkAusbaufach>.gkWuerfelBtn{margin:4px 6px 8px;min-height:44px;font-size:14px}
.gkStA:not(.hasDetail) .gkRigW{left:17%;width:60%;top:25%;bottom:16%}
.gkStA .gkGoldTicket{width:20%;top:49%;padding:5px 7px;border-radius:6px;font-size:11px}
.gkStA .gkGoldTicket small{display:none}.gkStA .gkGoldTicket strong,.gkStA .gkGoldTicket span{margin:0 0 3px}
.gkStA .gkGoldTicket .gkBtn{width:100%;min-height:44px;font-size:12px}
.gkStA .gkSammlungsregal{position:absolute;right:2%;top:45%;width:21%;padding:0 4px;z-index:3;display:flex;flex-direction:column;align-items:center;min-height:44px;height:auto;background:none;color:#483424;border:0;box-shadow:none;text-shadow:none}
.gkStA .gkSammlungsregal[hidden]{display:none}
.gkStA .gkSammlungsregal img{display:block;width:100%;height:clamp(38px,11vh,72px);object-fit:contain}
.gkStA .gkSammlungsregal>span{display:block;width:100%;padding:5px 3px 3px;box-sizing:border-box;border-top:5px solid #735130;border-radius:2px;background:#edd7a8;box-shadow:0 2px #573d24;text-align:center;white-space:normal}
.gkStA .gkSammlungsregal :is(small,strong,span>span){display:block}
.gkStA .gkSammlungsregal small,.gkStA .gkSammlungsregal span>span{font:700 10px/1.15 var(--gk-body)}
.gkStA .gkSammlungsregal strong{font:clamp(12px,1.4vw,19px)/1.15 var(--gk-display)}
@media(max-width:740px){.gkStA .gkGoldTicket{width:22%}.gkStA .gkAusbaufach[open]{left:24%;width:52%}}

/* Schichtwahl und Start bleiben im Blick. Nur das geöffnete Klemmbrett scrollt. */
.gkCentral .gkHubContent.gkSchichtAktiv{overflow:hidden;padding:0 3px 4px}
.gkCentral .gkSchichtAktiv::after,.gkCentral .gkSchichtAktiv~.gkHubHint{display:none}
.gkCentral [data-gk-hub-pane=einsaetze]:not([hidden]){height:100%;min-height:0;padding:0;gap:8px;box-sizing:border-box}
.gkCentral [data-gk-hub-pane=einsaetze]>h2{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.gkCentral .gkSchichtAktiv .gkHubShift{flex:none;min-height:74px;height:auto;padding:8px 14px;gap:10px}
.gkSchichtWege{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:7px;flex:none}
.gkCentral .gkSchichtWege .gkHubCard{min-height:56px;margin:0;padding:5px 8px;gap:6px;border-width:2px;border-radius:9px}
#gkMetaRoot .gkSchichtWege .gkHubCardIcon{width:30px;height:30px;flex-basis:30px}
.gkSchichtWege .gkHubCardCopy strong{font-size:clamp(14px,1.9vw,22px)}
.gkSchichtWege .gkHubCardCopy>span{font-size:clamp(10px,1.1vw,14px);line-height:1.2}
.gkSchichtZettel{display:flex;flex-direction:column;min-height:0;align-self:stretch;overflow:hidden;border:2px solid #725938;border-radius:8px;background:#f6e8ca}
.gkSchichtZettel.offen{flex:1}
.gkZettelGriff{flex:none;min-height:44px;padding:4px 10px;border:0;background:#e9d4a7;color:#493523;text-align:left;font:clamp(13px,1.5vw,19px)/1.2 var(--gk-display);cursor:pointer}
.gkZettelGriff::after{content:'▾';float:right}.gkSchichtZettel.offen .gkZettelGriff::after{content:'▴'}
.gkSchichtMeldungen{min-height:0;overflow:auto;overscroll-behavior:contain;padding:5px;scrollbar-width:thin}
.gkSchichtMeldungen[hidden]{display:none}
.gkSchichtMeldungen>*+*{margin-top:5px}
.gkSchichtMeldungen .gkHubCard{min-height:44px;max-height:none;padding:5px 8px;border-width:1px;border-radius:6px}
.gkSchichtMeldungen .gkHubCardIcon{width:28px;height:28px;flex-basis:28px}
.gkSchichtMeldungen .gkHubCardCopy strong{font-size:15px}.gkSchichtMeldungen .gkHubCardCopy small{display:none}
.gkSchichtMeldungen #ggD1Pin{width:100%}
@media(max-height:380px){.gkCentral [data-gk-hub-pane=einsaetze]:not([hidden]){gap:5px}.gkCentral .gkSchichtAktiv .gkHubShift{min-height:56px}.gkCentral .gkSchichtWege .gkHubCard{min-height:48px}}

.gkCentral [data-gk-hub-pane=einsaetze].gkZettelOffen:not([hidden]){
  display:grid;grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr)
}
.gkZettelOffen .gkSchichtWege{display:contents}
.gkCentral .gkZettelOffen :is(.gkHubShift,.gkSchichtWege>.gkHubCard){
  height:auto;min-height:48px;padding:4px 7px;border-width:2px;border-radius:9px
}
.gkZettelOffen :is(.gkHubShift,.gkSchichtWege>.gkHubCard) :is(.gkHubCardIcon,.gkHubCardCopy>small,.gkHubCardCopy>span){display:none}
.gkCentral .gkZettelOffen :is(.gkHubShift,.gkSchichtWege>.gkHubCard) .gkHubCardCopy strong{font-size:clamp(14px,1.8vw,22px)}
.gkZettelOffen .gkSchichtZettel{grid-column:1/-1}

.gkZettelKopf{display:flex;flex:none;align-items:stretch;background:#e9d4a7}
.gkZettelGriff{flex:1;min-width:0}.gkZettelVorschau{display:block;font:600 11px/1.15 system-ui;color:#5a4430}
.gkZettelVorschau:empty,.gkSchichtMeldungen #ggD1Pin:disabled{display:none}
.gkZettelVorschau.istLink{display:inline-block;margin-top:3px;padding:5px 10px;border-radius:9px;background:#2f6b3a;color:#fff6d8;font-weight:800;box-shadow:0 2px 0 #1f4a28;cursor:pointer}   /* Kevin 10.11.: Kroko-Zeile als erkennbarer Knopf */
.gkSchichtZettel:not(.offen) .gkZettelKopf [data-gk-jobbrett]{display:none}
.gkCentral .gkZettelKopf .gkHubCard{flex:0 1 38%;min-height:44px;max-height:52px;margin:2px;padding:4px 8px;border-width:1px;border-radius:5px}
.gkZettelKopf .gkHubCard :is(.gkHubCardIcon,.gkHubCardCopy>small,.gkHubCardCopy>span){display:none}
.gkZettelKopf .gkHubCardCopy strong{font-size:14px}

.gkCentral .gkTopRight .gkRank.ggGastProfil{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  align-content:center;justify-items:start;column-gap:5px;row-gap:0;padding-inline:5px 9px
}
.gkCentral .ggGastProfil b{grid-row:1/3}
.gkCentral .ggGastProfil .ggGastName{font:700 10px/1.15 system-ui;color:#80500c;white-space:nowrap}

/* Ausgabe 1.4: Der Artikel scrollt. Rubriken und Schließen bleiben im Bild. */
.ggNews.isMeister{height:min(560px,calc(100dvh - 20px));overflow:hidden}
.ggNews.isMeister .ggNewsLayout{height:100%;min-height:0;grid-template-columns:36% minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.ggNews.isMeister .ggNewsArt{min-height:0}
.ggNews.isMeister .ggNewsArt img{object-position:58% 45%}
.ggNews.isMeister .ggNewsCopy{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;padding:20px 22px 12px}
.ggNews.isMeister h1{margin:0 25px 7px 0;font-size:clamp(20px,3.2vw,36px);line-height:1.06}
.ggNews.isMeister .ggNewsRubrik{margin:0 30px 5px 0}
.ggNewsPunkte{min-height:0;overflow:auto;overscroll-behavior:contain;margin:0;padding:0 6px 0 0;list-style:none}
.ggNewsPunkte li{padding:7px 0;border-top:1px solid #ceaf76;font:500 clamp(12px,1.3vw,16px)/1.35 system-ui;color:#443422}
.ggNewsPunkte strong,.ggNewsPunkte span{display:block}
.ggNewsPunkte strong{font:clamp(14px,1.65vw,20px)/1.12 var(--gk-display);color:#70451f}
.ggNews.isMeister .ggNewsActions{margin-top:6px}
@media(max-height:400px) and (orientation:landscape){
  .ggNews.isMeister .ggNewsLayout{grid-template-columns:29% minmax(0,1fr)}
  .ggNews.isMeister .ggNewsCopy{padding:9px 12px 5px}
  .ggNews.isMeister h1{font-size:clamp(18px,2.45vw,25px)}
  .ggNews.isMeister .ggNewsActions button,.ggNews.isMeister .ggNewsNav button{min-height:44px}
}
@media(max-width:560px) and (orientation:portrait){
  .ggNews.isMeister .ggNewsLayout{grid-template-columns:100%;grid-template-rows:clamp(70px,17vh,120px) minmax(0,1fr) auto}
  .ggNews.isMeister .ggNewsArt{border-radius:16px 16px 0 0}
  .ggNews.isMeister .ggNewsArt img{object-position:center 25%}
  .ggNews.isMeister .ggNewsCopy{padding:12px}
}

.ggNewsPunkte{counter-reset:meldung}.ggNewsPunkte li{position:relative;padding-inline-start:26px;counter-increment:meldung}
.ggNewsPunkte li::before{content:counter(meldung);position:absolute;left:1px;top:8px;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#ead4aa;color:#6c461e;font:700 11px/1 system-ui}

#schichtende .peak-tagesbonus{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;padding:6px 9px;border-left:3px solid #ad752b;background:#fff2cc;color:#48321e;border-radius:4px;font:700 13px/1.2 system-ui}
#schichtende .peak-tagesbonus b{color:#695022;font-variant-numeric:tabular-nums}
#schichtende .peak-tagesbonus span,#schichtende .peak-tagesbonus small{grid-column:1/-1;overflow-wrap:anywhere}
#schichtende .peak-tagesbonus small{font-size:12px;font-weight:600}

.gkLadenAktiv .gkSpecialPreise .gkAufladen{color:#38260f;background:linear-gradient(#ffeab1,#ebac43);border:2px solid #765024}.gkLadenAktiv .gkEinstand{grid-column:1/-1;margin:2px 0;padding:6px 10px;border-radius:6px;background:#ffebb4;color:#4a311a;font:700 12px/1.3 system-ui}

#schichtende .peak-bonusleiste{grid-column:1/-1;display:flex;gap:4px;margin:2px 0}
#schichtende .peak-bonusleiste i{flex:1;height:7px;background:#ead9ae;border:1px solid #ac9260;border-radius:2px;box-sizing:border-box}
#schichtende .peak-bonusleiste .gebucht{border-color:#975b13;background:linear-gradient(#ffe185,#df9c2b);box-shadow:inset 0 1px #ffefa6}
.gkSkins .gkSkin .pr.dia.poor{background:#f6cf7d;color:#432d16;border-color:#916a35}
.gkEinstandZettel{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 7px;padding:6px 9px;border:2px solid #896432;border-radius:8px;background:#ffedbc;color:#49341c;font:650 12px/1.25 system-ui}.gkEinstandZettel strong{font-size:15px}.gkEinstandZettel span{grid-column:1}.gkEinstandZettel button{grid-column:2;grid-row:1/3;min-height:44px;border:1px solid #896432;border-radius:5px;background:#f4d38d;color:#412c16;font-weight:750}

/* Fahrtkarte v3 (Kevin 02.11.: "maximal haesslich, muss knallen und verstaendlich sein"). Eine Aussage je Zeile:
   oben links die Punkte (Gold-Leiste mit Pokal, huepft bei jedem Gewinn), oben rechts das Nest (drei Felder x1,5 / x2 / x3 fuellen sich),
   unten das Ziel (Text + Wasserrohr) mit der Weite. Stufen-Banner haengen kurz UNTER der Karte. ROHR FREI: Goldglut + Rive (hud_rohrfrei.webp).
   Creme/Tinte/Schatten wie Keller-Pegel und Rohrzustand. */
body.gg-meister-hud #fahrt-ui #hudTop{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pts nest" "ziel ziel";align-items:center;gap:3px 8px;padding:5px 8px 6px;border:3px solid var(--ink);border-radius:12px;background:var(--hud);box-shadow:0 4px 0 var(--hudSh),inset 0 2px 0 var(--hud2);overflow:visible;transition:box-shadow .2s,border-color .2s}
/* Punkte */
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister{grid-area:pts;justify-self:start;position:relative;padding:1px 9px 2px 31px;border:2px solid var(--ink);border-radius:9px;background:linear-gradient(#ffeaa6,#f3be4f 70%,#dc9a2c);box-shadow:inset 0 2px 0 #fff4c4,inset 0 -3px 0 #b8782a,0 2px 0 var(--hudSh)}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister::before{content:"";position:absolute;left:3px;top:50%;width:26px;height:26px;margin-top:-13px;background:url(assets/ui/tafel_pokal.webp) center/contain no-repeat;filter:drop-shadow(0 1px 0 rgba(73,61,50,.4))}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val{display:inline-block;color:var(--ink);font:24px/1.05 var(--gk-display);letter-spacing:.02em;text-shadow:0 1px 0 #fff3b8;transform-origin:30% 60%}
body.gg-meister-hud #hudTop .hudMeister .val::after{color:#5b4433;font:800 10px/1 system-ui;text-shadow:none}
body.gg-meister-hud #fahrt-ui #hudTop #scoreV[data-tick=a]{animation:punkteA .26s ease-out}
body.gg-meister-hud #fahrt-ui #hudTop #scoreV[data-tick=b]{animation:punkteB .26s ease-out}
@keyframes punkteA{40%{transform:scale(1.14)}}
@keyframes punkteB{40%{transform:scale(1.14)}}
/* Serie (Runde 3, Kevin 02.11.: "Pfuscher und Rohr-Profi, so checkst du's"): Titel-Plakette gross, Multiplikator klein, darunter Zeile + Wasserrohr bis zur naechsten Stufe. Farbe steigt mit der Stufe. */
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber{grid-area:nest;justify-self:end;display:grid!important;grid-template-columns:auto auto;grid-template-areas:"titel mult" "zeile zeile" "rohr rohr";align-items:center;gap:1px 5px;padding:2px 7px 4px;border:2px solid var(--ink);border-radius:9px;background:linear-gradient(#e6dccb,#c9b89c);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 var(--hudSh);color:var(--ink);white-space:nowrap;min-width:150px}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber .lbl{grid-area:titel;justify-self:start;font-size:0}
body.gg-meister-hud #hudTop .hudSauber .lbl::after{content:attr(data-lbl);font:17px/1.05 var(--gk-display);letter-spacing:.03em;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.55)}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber .val{grid-area:mult;justify-self:end;padding:0 4px;border:1.5px solid var(--ink);border-radius:5px;background:#fff6dc;color:var(--ink);font:900 12px/1.2 system-ui;box-shadow:none}
body.gg-meister-hud #fahrt-ui #hudTop #hudSerieZiel{grid-area:zeile;font:800 10px/1.15 system-ui;color:#4d3b2c}
body.gg-meister-hud #fahrt-ui #hudTop #hudZonenRohr{grid-area:rohr;display:block!important;height:6px;border:1.5px solid var(--ink);border-radius:4px;background:#d9ccb0;overflow:hidden}
body.gg-meister-hud #fahrt-ui #hudTop #hudZonenRohr b{display:block;height:100%;transform-origin:0 50%;background:linear-gradient(#bfe9ff 0 22%,#5fb6ea 23% 70%,#3a8fcf 71%);transition:transform .3s ease-out}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber:is([data-stufe="1"],[data-stufe="2"]){background:linear-gradient(#f6c9a0,#d98a52 70%,#b0612f)}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-stufe="3"]{background:linear-gradient(#ffffff,#d6dde4 60%,#a9b4bf)}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber:is([data-stufe="4"],[data-stufe="5"],[data-stufe="6"]){background:linear-gradient(#ffeaa6,#f3be4f 70%,#dc9a2c);box-shadow:inset 0 2px 0 #fff4c4,0 2px 0 var(--hudSh)}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-stufe="6"]{background:linear-gradient(110deg,#ffeaa6 20%,#fffbe8 35%,#f3be4f 50%,#dc9a2c) 0 0/220% 100%;animation:serieGlanz 1.8s linear infinite}
@keyframes serieGlanz{to{background-position:-220% 0}}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=a]{animation:serieAufA .5s ease-out}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=b]{animation:serieAufB .5s ease-out}
@keyframes serieAufA{35%{transform:scale(1.08) rotate(-1deg)}}
@keyframes serieAufB{35%{transform:scale(1.08) rotate(1deg)}}
body.gg-meister-hud #fahrt-ui #hudTop[data-bruch="1"] .hudSauber{background:linear-gradient(#ff8f7a,#d8452e);animation:serieWeg .25s ease-in-out 3}
body.gg-meister-hud #fahrt-ui #hudTop[data-bruch="1"] #hudSerieZiel{color:#fff;font-weight:900}
@keyframes serieWeg{50%{transform:translateX(-4px)}}
@media(prefers-reduced-motion:reduce){body.gg-meister-hud #fahrt-ui #hudTop .hudSauber{animation:none!important}}
/* Ziel */
body.gg-meister-hud #hudTop .hudZiel{display:contents}
body.gg-meister-hud #fahrt-ui #hudTop #ggRekord:not([hidden]){grid-area:ziel;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-top:2px;color:var(--ink);font:800 11px/1.15 system-ui}
body.gg-meister-hud #hudTop #ggRekord>span{white-space:normal;overflow-wrap:anywhere;padding-right:50px}
body.gg-meister-hud #fahrt-ui #hudTop #ggRekord progress:not([hidden]){display:block;width:100%;height:10px;border:2px solid var(--ink);border-radius:6px;background:#d9ccb0;box-shadow:inset 0 2px 0 rgba(73,61,50,.25);overflow:hidden;appearance:none;-webkit-appearance:none}
body.gg-meister-hud #hudTop #ggRekord progress::-webkit-progress-bar{background:#d9ccb0;box-shadow:inset 0 2px 0 rgba(73,61,50,.25)}
body.gg-meister-hud #hudTop #ggRekord progress::-webkit-progress-value{background:linear-gradient(#bfe9ff 0 22%,#5fb6ea 23% 70%,#3a8fcf 71%);border-right:2px solid #2d6fa3;transition:width .35s ease-out}
body.gg-meister-hud #hudTop #ggRekord progress::-moz-progress-bar{background:linear-gradient(#bfe9ff 0 22%,#5fb6ea 23% 70%,#3a8fcf 71%)}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeter{grid-area:ziel;justify-self:end;align-self:start;margin-top:2px;pointer-events:none}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeter .val{color:#6b5540;font:800 11px/1.15 system-ui}
/* Raus aus der Karte: Bonus-Aufkleber weg, Stufen-Banner haengt kurz darunter */
body.gg-meister-hud #fahrt-ui #hudTop #hudTiefe{display:none!important}
body.gg-meister-hud #fahrt-ui #hudTop #hudEtappe:not([hidden]){position:absolute;right:10px;bottom:-15px;z-index:1;margin:0;padding:1px 7px;font-size:10px;white-space:nowrap;transform:rotate(-3deg);animation:etappeRein .25s ease-out}
@keyframes etappeRein{from{opacity:0;transform:rotate(-3deg) scale(.6)}}
/* ROHR FREI: Goldglut + Rive-Streifen */
body.gg-meister-hud #fahrt-ui #hudTop[data-zone=frei]{border-color:#b8782a;box-shadow:0 4px 0 var(--hudSh),inset 0 2px 0 var(--hud2),0 0 0 3px #ffd25a,0 0 18px 4px rgba(255,200,70,.7)}
body.gg-meister-hud #fahrt-ui #hudTop[data-zone=frei]::before{content:"";position:absolute;left:50%;top:50%;width:260px;height:96px;margin:-48px 0 0 -130px;background:url(assets/ui/hud_rohrfrei.webp) 0 0/4680px 96px no-repeat;pointer-events:none;z-index:2;animation:rohrFrei .9s steps(17) forwards}
@keyframes rohrFrei{to{background-position:-4420px 0}}

/* Platz ueberholt (hud_platz.webp) */
body.gg-meister-hud #fahrt-ui #hudTop.platzPop::after{content:"";position:absolute;left:50%;top:50%;width:208px;height:72px;margin:-36px 0 0 -104px;background:url(assets/ui/hud_platz.webp) 0 0/3328px 72px no-repeat;pointer-events:none;z-index:2;animation:platzPop .8s steps(15) forwards}
@keyframes platzPop{to{background-position:-3120px 0}}
@media(prefers-reduced-motion:reduce){body.gg-meister-hud #fahrt-ui #hudTop.platzPop::after,body.gg-meister-hud #fahrt-ui #hudTop[data-zone=frei]::before{display:none}body.gg-meister-hud #fahrt-ui #hudTop #scoreV[data-tick]{animation:none}}
@container hudbeleg (max-width:215px){body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val{font-size:20px}}
@media (max-width:640px){body.gg-meister-hud #fahrt-ui #hudTop{grid-template-columns:minmax(0,1fr);grid-template-areas:"pts" "nest" "ziel";gap:2px 6px;padding:4px 6px 5px}body.gg-meister-hud #fahrt-ui #hudTop .hudSauber{justify-self:stretch}body.gg-meister-hud #fahrt-ui #hudTop #hudEtappe:not([hidden]){display:none}body.gg-meister-hud #fahrt-ui #hudTop .hudMeister{padding-left:27px}body.gg-meister-hud #fahrt-ui #hudTop .hudMeister::before{width:22px;height:22px;margin-top:-11px}body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val{font-size:19px}body.gg-meister-hud #fahrt-ui #hudTop #ggRekord:not([hidden]){font-size:10px}}
@media(prefers-reduced-motion:reduce){body.gg-meister-hud #fahrt-ui #hudTop.platzPop::after{display:none}}
@container hudbeleg (max-width:215px){body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val{font:19px/1.05 var(--gk-display)}}
@media (max-width:640px){body.gg-meister-hud #fahrt-ui #hudTop{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"pts pts pts" "weite serie tiefe" "ziel ziel ziel" "etappe etappe etappe";gap:2px 6px}body.gg-meister-hud #hudTop :is(.hudMeter,.hudSauber){justify-self:start}body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val{font:19px/1.05 var(--gk-display)}body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeter .val,.hudSauber .val,.hudSauber .lbl::after){font-size:10px}body.gg-meister-hud #hudTop #hudTiefe:not([hidden]){grid-area:tiefe;justify-self:end;align-self:center;transform:none;font-size:10px}body.gg-meister-hud #hudTop #hudEtappe:not([hidden]){white-space:nowrap;font-size:10px}body.gg-meister-hud #hudTop .hudSauber{flex-direction:row!important;align-items:baseline!important;gap:3px!important}}
/* WERKSTATT-DEKO v1.5 (werkstatt_deko.js): Ebene wie der Hintergrund gelegt, hinter der Buehne; Klickring = gebackener Rive-Streifen (juice_atlas wechsel_bohr, 12 Bilder) */
.gkWorkshop .gkDekoSzene{position:absolute;inset:0;z-index:0;pointer-events:none;filter:var(--grade-backdrop)}
.gkWorkshop .gkDekoSzene>svg{position:absolute;overflow:visible}
.gkDekoStueck{transform-box:fill-box;transform-origin:50% 100%}
.gkDekoStueck[data-gk-slot-typ=wand]{transform-origin:50% 0}
.gkDekoStueck.isWackel{animation:gkDekoWackel .6s cubic-bezier(.3,1.6,.5,1)}
.gkDekoStueck[data-gk-slot-typ=wand].isWackel{animation:gkDekoPendel .7s ease-out}
@keyframes gkDekoWackel{0%{transform:scale(1,1)}25%{transform:scale(1.18,.82)}50%{transform:scale(.9,1.16) translateY(-12%)}75%{transform:scale(1.03,.97)}100%{transform:none}}
@keyframes gkDekoPendel{0%{transform:rotate(0)}20%{transform:rotate(9deg)}45%{transform:rotate(-6deg)}70%{transform:rotate(3deg)}100%{transform:none}}
.gkWorkshop .gkDekoRing{position:absolute;z-index:0;pointer-events:none;background:url('./assets/rive/juice_atlas.webp') 0 calc(var(--d) * -5.625)/calc(var(--d) * 12) calc(var(--d) * 23.375) no-repeat}
.gkWorkshop .gkDekoRing[hidden]{display:none}
.gkWorkshop .gkDekoRing.isLos{animation:gkDekoRing .44s steps(12,end) forwards}
@keyframes gkDekoRing{from{background-position-x:0}to{background-position-x:calc(var(--d) * -12)}}
.gkWorkshop .gkDekoBlase{position:absolute;z-index:8;box-sizing:border-box;padding:6px 9px 7px;border:2px solid #714d28;border-radius:9px;background:#fff1c4;box-shadow:0 3px #67472b;color:#483424;font:700 12px/1.25 var(--gk-body);animation:gkDekoBlase .22s cubic-bezier(.2,1.5,.4,1)}
.gkWorkshop .gkDekoBlase[hidden]{display:none}
.gkWorkshop .gkDekoBlase small{display:block;font:10px/1 var(--gk-display);letter-spacing:.06em;color:#9a6a2c}
.gkWorkshop .gkDekoBlase span{display:block;margin:3px 0 5px}
.gkWorkshop .gkDekoBlase .gkDekoAnsehen{min-height:32px;padding:0 10px;border-radius:6px;background:#e5c88a;box-shadow:0 2px #67472b;font:11px var(--gk-display)}
@keyframes gkDekoBlase{from{transform:scale(.85);opacity:0}}
/* V1.5 Liga: Rivale in der Fahrtkarte - eingekleidetes Gustav-Portraet links neben "Noch 340 bis KALLE" (online/liga.js portraet). */
body.gg-meister-hud #hudTop #ggRekord.hat-rivale:not([hidden]){position:relative;padding-left:26px;min-height:28px}
body.gg-meister-hud #hudTop #ggRekord canvas.lgRivalBild{position:absolute;left:0;top:50%;width:22px;height:28px;margin-top:-14px;border:1.5px solid var(--ink);border-radius:6px;background:#fff1c2}
body.gg-meister-hud #hudTop #ggRekord canvas.lgRivalBild[hidden]{display:none}
/* Fahrtkarte v4 (Kevin 02.11. Runde 4: zu gross, Meterzahl zu unscheinbar, nicht Rive genug). Zwei Zeilen:
   1 = Punkte-Goldleiste | Meter-Plakette mit Zollstock (gleich gross), 2 = Titel-Plakette einzeilig (MEISTER x2,5) + duennes Serienrohr | Ziel einzeilig klein + duennes Rohr.
   Leben nur ueber transform/opacity und gebackene Rive-Streifen (hud_zappel/aufstieg/bruch/funken/flamme/rohrfrei), reduced-motion schaltet sie ab. */
body.gg-meister-hud #fahrt-ui #hudTop{grid-template-columns:auto auto!important;grid-template-areas:"pts meter" "nest ziel"!important;gap:3px 6px!important;padding:3px 6px 4px!important;align-items:center}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister{grid-area:pts;padding:0 7px 1px 27px}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister::before{width:22px;height:22px;margin-top:-11px}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val{font-size:20px!important}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeter{grid-area:meter!important;justify-self:end;align-self:center;margin:0;position:relative;display:block;padding:0 7px 1px 27px;border:2px solid var(--ink);border-radius:9px;background:linear-gradient(#fff6dc,#ead6a4 70%,#d2b679);box-shadow:inset 0 2px 0 #fffbe9,inset 0 -3px 0 #b89a5c,0 2px 0 var(--hudSh)}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeter::before{content:"";position:absolute;left:3px;top:50%;width:22px;height:22px;margin-top:-11px;background:url(assets/ui/tafel_zollstock.webp) center/contain no-repeat}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeter .val{color:var(--ink)!important;font:20px/1.05 var(--gk-display)!important;letter-spacing:.02em;text-shadow:0 1px 0 #fff3b8}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber{grid-area:nest!important;justify-self:start;position:relative;display:grid!important;grid-template-columns:auto auto;grid-template-areas:"titel mult" "rohr rohr";gap:1px 4px;padding:1px 6px 2px;margin:0;max-width:none;min-width:0;border-width:2px;border-radius:7px}
body.gg-meister-hud #hudTop .hudSauber .lbl::after{font-size:13px!important;line-height:1.05}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber .val{font-size:10px!important;padding:0 3px;line-height:1.25}
body.gg-meister-hud #fahrt-ui #hudTop #hudSerieZiel{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
body.gg-meister-hud #fahrt-ui #hudTop #hudZonenRohr{height:4px;border-width:1px;border-radius:3px}
body.gg-meister-hud #fahrt-ui #hudTop #ggRekord:not([hidden]){grid-area:ziel!important;margin:0;gap:1px;font:800 9px/1.15 system-ui;min-width:0}
body.gg-meister-hud #fahrt-ui #hudTop #ggRekord>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}
body.gg-meister-hud #fahrt-ui #hudTop #ggRekord progress:not([hidden]){height:4px;border-width:1px;border-radius:3px}
body.gg-meister-hud #fahrt-ui #hudTop #hudEtappe:not([hidden]){display:none}
/* Punkte zappeln: Squash & Stretch + gebackener Funkenkranz bei jedem Gewinn */
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister:has(#scoreV[data-tick=a]){animation:zappelA .36s cubic-bezier(.3,1.7,.5,1)}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister:has(#scoreV[data-tick=b]){animation:zappelB .36s cubic-bezier(.3,1.7,.5,1)}
@keyframes zappelA{25%{transform:scale(1.14,.86)}55%{transform:scale(.93,1.08) rotate(-2deg)}}
@keyframes zappelB{25%{transform:scale(1.14,.86)}55%{transform:scale(.93,1.08) rotate(2deg)}}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister::after{content:"";position:absolute;left:50%;top:50%;width:180px;height:48px;margin:-24px 0 0 -90px;pointer-events:none;opacity:0;background:url(assets/ui/hud_zappel.webp) 0 0/1800px 48px no-repeat}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister:has(#scoreV[data-tick=a])::after{animation:zappelFunkenA .36s steps(9) forwards}
body.gg-meister-hud #fahrt-ui #hudTop .hudMeister:has(#scoreV[data-tick=b])::after{animation:zappelFunkenB .36s steps(9) forwards}
@keyframes zappelFunkenA{from{opacity:1;background-position:0 0}99%{opacity:1}to{opacity:0;background-position:-1620px 0}}
@keyframes zappelFunkenB{from{opacity:1;background-position:0 0}99%{opacity:1}to{opacity:0;background-position:-1620px 0}}
/* Stufen-Aufstieg: Titel knallt rein + Konfetti-Burst; Serienbruch: Plakette zerspringt in Scherben */
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber::after{content:"";position:absolute;left:50%;top:50%;pointer-events:none;opacity:0;z-index:3}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=a]::after,body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=b]::after{width:260px;height:110px;margin:-78px 0 0 -130px;background:url(assets/ui/hud_aufstieg.webp) 0 0/5200px 110px no-repeat}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=a]::after{animation:aufstiegA 1s steps(19) forwards}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=b]::after{animation:aufstiegB 1s steps(19) forwards}
@keyframes aufstiegA{from{opacity:1;background-position:0 0}99%{opacity:1}to{opacity:0;background-position:-4940px 0}}
@keyframes aufstiegB{from{opacity:1;background-position:0 0}99%{opacity:1}to{opacity:0;background-position:-4940px 0}}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=a]{animation:titelKnallA .55s cubic-bezier(.2,1.8,.4,1)}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-auf=b]{animation:titelKnallB .55s cubic-bezier(.2,1.8,.4,1)}
@keyframes titelKnallA{0%{transform:scale(1.9) rotate(-6deg);opacity:.2}60%{transform:scale(.92)}}
@keyframes titelKnallB{0%{transform:scale(1.9) rotate(6deg);opacity:.2}60%{transform:scale(.92)}}
body.gg-meister-hud #fahrt-ui #hudTop[data-bruch="1"] .hudSauber::after{width:220px;height:70px;margin:-35px 0 0 -110px;background:url(assets/ui/hud_bruch.webp) 0 0/3520px 70px no-repeat;animation:bruchScherben .9s steps(15) forwards}
@keyframes bruchScherben{from{opacity:1;background-position:0 0}99%{opacity:1}to{opacity:0;background-position:-3300px 0}}
/* Dauer-Leben: ab ROHR-PROFI Glanzwelle, ab MEISTER Funken, ROHRLEGENDE blaue Flaemmchen */
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber:is([data-stufe="3"],[data-stufe="4"],[data-stufe="5"]){background-size:220% 100%!important;background-image:linear-gradient(110deg,var(--pl1,#fff) 20%,#fffdf2 32%,var(--pl1,#fff) 44%,var(--pl2,#d6dde4) 70%,var(--pl3,#a9b4bf))!important;animation:serieGlanz 2.6s linear infinite}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber:is([data-stufe="4"],[data-stufe="5"]){--pl1:#ffeaa6;--pl2:#f3be4f;--pl3:#dc9a2c}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber::before{content:"";position:absolute;left:50%;top:50%;width:200px;height:36px;margin:-18px 0 0 -100px;pointer-events:none;z-index:2;opacity:0}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber:is([data-stufe="4"],[data-stufe="5"])::before{opacity:1;background:url(assets/ui/hud_funken.webp) 0 0/2400px 36px no-repeat;animation:serieLoop .92s steps(12) infinite}
body.gg-meister-hud #fahrt-ui #hudTop .hudSauber[data-stufe="6"]::before{opacity:1;top:auto;bottom:-14px;margin-top:0;background:url(assets/ui/hud_flamme.webp) 0 0/2400px 36px no-repeat;animation:serieLoop .73s steps(12) infinite}
@keyframes serieLoop{to{background-position:-2400px 0}}
/* ROHR FREI groesser und wilder */
body.gg-meister-hud #fahrt-ui #hudTop[data-zone=frei]::before{transform:scale(1.55)}
@media (max-width:640px){body.gg-meister-hud #fahrt-ui #hudTop{gap:2px 4px!important;padding:2px 4px 3px!important}body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val,body.gg-meister-hud #fahrt-ui #hudTop .hudMeter .val{font-size:14px!important}body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeister,.hudMeter){padding:0 5px 0 20px}body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeister,.hudMeter)::before{width:16px;height:16px;margin-top:-8px;left:2px}body.gg-meister-hud #fahrt-ui #hudTop .hudMeister .val::after{display:none}body.gg-meister-hud #hudTop .hudSauber .lbl::after{font-size:11px!important}body.gg-meister-hud #fahrt-ui #hudTop #ggRekord>span{position:absolute;clip-path:inset(50%);width:1px;height:1px}body.gg-meister-hud #fahrt-ui #hudTop #ggRekord:not([hidden]){align-self:end;margin-bottom:3px}}
@media(prefers-reduced-motion:reduce){body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeister,.hudSauber),body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeister,.hudSauber)::after,body.gg-meister-hud #fahrt-ui #hudTop .hudSauber::before{animation:none!important}body.gg-meister-hud #fahrt-ui #hudTop :is(.hudMeister,.hudSauber)::after,body.gg-meister-hud #fahrt-ui #hudTop .hudSauber::before{display:none}}
/* HUD-KALT 02.11.2026 (Kevin, Fold-Laborbericht: HUD-DOM aus -> LoAF 15 -> 0): waehrend der Fahrt laufen Endlos-Animationen genau einmal
   (Ereignis-Puls), danach steht das Element still - kein Dauer-Repaint/Compositing. Klasse setzt main.js taktRegeln(); Labor-Schalter 'HUD-Animationen an (alt)'. */
body.gg-fahrt-kalt *:not(#ggLabor):not(#ggLabor *), body.gg-fahrt-kalt *::before, body.gg-fahrt-kalt *::after { animation-iteration-count: 1 !important; will-change: auto !important; }
/* V1.5 Dienstplan: Lohn je Tag unter der Zahl, Kopfzeile Heute/Morgen als Rasterzeile (waechst nach oben, ueberdeckt nichts) */
.mkDienstLohn{font:800 11px/1.1 system-ui;color:#6d5a3a;white-space:nowrap;letter-spacing:-.2px}.erreicht .mkDienstLohn{color:#27593b}.morgenkarte-tage .heute .mkDienstLohn{color:#7a2e0e}.morgenkarte-tage[data-dienst]:before{content:attr(data-dienst);grid-column:1/-1;text-align:center;font:800 11px/1.25 system-ui;color:#4a2d10;padding:0 2px 3px;border-bottom:1px dashed #705335;margin-bottom:2px}
@media(max-height:450px){.mkDienstLohn{font-size:11px}.morgenkarte-tage[data-dienst]:before{font-size:10px;padding-bottom:2px}}
/* Store 1.5: Stechuhr (Rive v15_vorlagen/stechuhr) an der Wand rechts ueber dem Kaffee; feste Box, kein Klickziel. */
.mkStechuhr{position:absolute;right:3%;top:31%;width:19%;height:38%;pointer-events:none}.mkStechuhr canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-height:450px){.mkStechuhr{display:none}}
/* APEX-POLISH 10.11. (Kevin): Comic-Rahmen, Meter-Anzeige, Schichtende-Knopf, Zweite Luft. Nur Kurven, Kontrast und Layout - kein neues Bild, keine neue Ebene im Spiel. */
/* Comic: der ganze Streifen steht vom ersten Bild an im Rahmen; die Bilder fliegen in ihre Faecher statt auf leeres Braun. */
.hofStrip::before{content:'';position:absolute;inset:-8px;border-radius:13px;background:linear-gradient(#33261e,#241a15);box-shadow:0 0 0 3px #efc16f,0 0 0 5px #5b3d22,0 16px 44px rgba(20,12,10,.6);animation:apexRahmen .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes apexRahmen{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* Die Faecher stehen sofort als ruhige, gerahmte Felder da; nur das Bild selbst kommt im Takt hinein. So ist nie ein Drittel voll und der Rest leer. */
@media(prefers-reduced-motion:no-preference){.hofStripBild{animation:none;background:linear-gradient(#3d2e25,#2c211b);box-shadow:0 0 0 2px #f3dfae99,inset 0 0 26px #1b120a}.hofStripKamera{animation:hofKameraZu 2.6s cubic-bezier(.25,.6,.3,1) both,apexBildEin .5s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i) * .9s)}.hofStripBild:nth-child(2)>.hofStripKamera{animation-name:hofKameraSchwenk,apexBildEin}.hofStripBild:nth-child(3)>.hofStripKamera{animation-name:hofKameraRan,apexBildEin}}
@keyframes apexBildEin{from{opacity:0}to{opacity:1}}
/* Meter: zaehlt die Tiefe gerade nicht (Rueckweg, Stelle in Arbeit), tritt die Zahl sichtbar zurueck statt wie eingefroren zu wirken. */
#fahrt-ui #distV{transition:opacity .25s ease-out}#fahrt-ui #distV.distRuht{opacity:.66}
/* Schichtende: NOCHMAL kommt mit einer weichen Feder und hebt sich klar vom Hintergrund ab. */
html #schichtende>#seNeu{border-color:#3a2a1c;color:#2a1d12;text-shadow:0 1px 0 #fff1c4;box-shadow:0 4px 0 #765641,inset 0 2px 0 #fff3d8,0 0 0 3px #fff3d833,0 10px 24px #1b120a66;animation:apexHoch .42s cubic-bezier(.2,.9,.25,1) .12s both}
html #schichtende.mk21-ende>#seNeu{animation:apexHoch .42s cubic-bezier(.2,.9,.25,1) .12s both,ende-einladung 1.4s ease-in-out 1s 3}
html #schichtende.mk21-ende:has(.ende-ruhig)>#seNeu{animation:apexHoch .42s cubic-bezier(.2,.9,.25,1) .12s both}
html #schichtende>#seNeu:active{transform:translateY(2px);box-shadow:0 2px 0 #765641,inset 0 2px 0 #fff3d8}
@keyframes apexHoch{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
/* Zweite Luft: Text und Knoepfe gleiten gestaffelt herein. Ja und Nein kommen im selben Moment und sind gleich gross (rote Linie). */
#zweiteChance{animation:zcRein .34s cubic-bezier(.2,.9,.25,1)}
#zweiteChance .zcText>*{animation:apexHoch .34s cubic-bezier(.2,.9,.25,1) both}
#zweiteChance .zcText>:nth-child(2){animation-delay:.04s}#zweiteChance .zcText>:nth-child(n+3){animation-delay:.08s}
#zweiteChance #zcJa:not(:disabled){animation:zcBereit .35s ease-out}
#zweiteChance #zcJa{border-color:#3a2a1c;color:#2a1d12;text-shadow:0 1px 0 #fff1c4;box-shadow:0 4px 0 #765641,inset 0 2px 0 #fff3d8,0 8px 20px #1b120a55}
#zweiteChance #zcNein{min-height:56px;font-size:15px;background:#5b4433;border-color:#c79a68;color:#fff4d8;box-shadow:0 4px 0 #33261e}
#zweiteChance #zcInfo{color:#f6e6c4}
#zweiteChance.zcNotpumpe #zcZahl{display:none}
@media(max-height:400px){#zweiteChance #zcJa,#zweiteChance #zcNein{min-height:52px}}
@media (max-height:420px) and (min-width:521px){#zweiteChance.zcNotpumpe #zcJa,#zweiteChance.zcNotpumpe #zcVideo,#zweiteChance.zcNotpumpe #zcNein{min-height:44px}}
@media(prefers-reduced-motion:reduce){.hofStrip::before,html #schichtende>#seNeu,#zweiteChance,#zweiteChance .zcText>*,#zweiteChance #zcJa:not(:disabled){animation:none!important}#fahrt-ui #distV{transition:none}}
/* KREATIV 10.11. (Kevin): drei Effekte ohne Rive und ohne WebGL - nur transform und opacity, also Compositor. */
/* Meister-Flow-Flamme an der Plakette: waechst ueber vier Stufen, flackert leicht. */
#hudFlamme{position:absolute;left:-22px;top:4px;width:14px;height:18px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 72%,#fff6c2 0 22%,#ffc93c 40%,#ff7a1a 68%,#d9480f 100%);transform-origin:50% 100%;transform:scale(0);opacity:0;pointer-events:none;z-index:4;transition:transform .25s cubic-bezier(.2,.9,.25,1.4),opacity .2s ease-out;will-change:transform,opacity}
.hudSauber[data-flow="1"] #hudFlamme{transform:scale(.8);opacity:1}.hudSauber[data-flow="2"] #hudFlamme{transform:scale(1.05);opacity:1}
.hudSauber[data-flow="3"] #hudFlamme{transform:scale(1.3);opacity:1}.hudSauber[data-flow="4"] #hudFlamme{transform:scale(1.6);opacity:1}
.hudSauber:is([data-flow="1"],[data-flow="2"],[data-flow="3"],[data-flow="4"]) #hudFlamme{animation:flammeFlackern .5s ease-in-out infinite alternate}
@keyframes flammeFlackern{from{rotate:-4deg;scale:1 .94}to{rotate:4deg;scale:.94 1.08}}
/* Blitzblank auf der Endkarte: Vorher/Nachher-Bild ueber den Zeilen des Stundenzettels. */
.ende-blitzbild{display:block;width:100%;height:auto;max-height:64px;object-fit:cover;border-radius:8px;border:2px solid #b98b4e;margin:2px 0 4px}
/* Blitzblank-Wisch: ein Glanzband faehrt in 0,4 s ueber den Meter-Zaehler. */
#fahrt-ui #hudTop .hudMeter::after{content:"";position:absolute;left:0;top:0;width:35%;height:100%;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(160,240,255,.5),rgba(255,255,255,0));opacity:0;pointer-events:none;z-index:3}
#fahrt-ui #hudTop .hudMeter[data-blitz="a"]::after{animation:blitzWischA .4s ease-out}#fahrt-ui #hudTop .hudMeter[data-blitz="b"]::after{animation:blitzWischB .4s ease-out}
@keyframes blitzWischA{0%{transform:translateX(0);opacity:0}25%{opacity:1}100%{transform:translateX(185%);opacity:0}}
@keyframes blitzWischB{0%{transform:translateX(0);opacity:0}25%{opacity:1}100%{transform:translateX(185%);opacity:0}}
/* Gustav-Daumen bei der Meister-Starthilfe: 1,2 s vom linken Rand, zwischen HUD-Leiste und Werkzeugen, faengt keine Finger. */
#hudStarthilfe{position:absolute;left:0;top:34%;width:auto;height:27%;max-height:130px;transform:translateX(-110%);opacity:0;pointer-events:none;z-index:5;will-change:transform,opacity}
#hudStarthilfe[data-an]{animation:starthilfeRein 1.2s cubic-bezier(.2,.9,.25,1) both}
@keyframes starthilfeRein{0%{transform:translateX(-110%) scale(.9);opacity:0}16%{transform:translateX(6%) scale(1.06);opacity:1}26%{transform:translateX(0) scale(1)}80%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(-110%) scale(.94);opacity:0}}
@media(prefers-reduced-motion:reduce){.hudSauber #hudFlamme{animation:none!important;transition:none}#fahrt-ui #hudTop .hudMeter::after{animation:none!important}#hudStarthilfe[data-an]{animation:starthilfeRuhig 1.2s linear both}}
@keyframes starthilfeRuhig{0%,100%{transform:none;opacity:0}15%,85%{transform:none;opacity:1}}
/* UI 1.5.6 (Kevin 10.11.): Wettkampf zeigt am Handy drei Karten statt zweieinhalb - die Kroko-Jagd ist ohne Scrollen zu sehen. */
@media(max-height:599px){.gkCentral [data-gk-hub-pane="wettkampf"] .gkBtn.gkHubCard{flex:0 0 auto;min-height:72px;padding-block:7px}.gkCentral [data-gk-hub-pane="wettkampf"]{gap:8px}}
.gkCentral [data-gk-hub-progress]{white-space:normal;text-wrap:balance;overflow:hidden;display:flex;align-items:center;justify-content:center}@media(max-height:599px){.gkCentral [data-gk-hub-progress]{min-height:44px;padding-block:5px;line-height:1.2}}/* Fund karten-zentrale-10: Rang, Schichten und Bestfahrt duerfen auf zwei Zeilen statt abgeschnitten */
/* UI 1.5.6: Laden am Handy - Kopfkarten flacher, Koffer-Erklaerung als eine kompakte Zeile, damit Angebote und Preise im ersten Blick liegen. */
@media(max-height:599px){.gkCentral [data-gk-hub-pane="laden"] .gkBtn.gkHubCard{flex:0 0 auto;min-height:54px;padding-block:4px}.gkCentral [data-gk-hub-pane="laden"]{gap:7px}.gkKofferAnleitung{padding:5px 10px}.gkKofferAnleitung h2{display:inline;font-size:13px;padding-right:8px}.gkKofferAnleitung p{display:inline;font-size:12px}#gkMetaRoot .gkKofferAnleitung p+p{display:block;margin-top:2px}}
/* UI 1.5.6: Reiterleiste - SCHICHT ist der wichtigste Weg und bekommt die breiteste Taste. */
.gkHubNav{grid-template-columns:minmax(0,1.45fr)}.gkHubNavBtn[data-gk-hub-nav="einsaetze"]{font-size:clamp(12px,1.6vw,22px);border-color:#8a6a2c}
/* UI 1.5.6: Zentrale am Handy - der Inhalt rechts bekommt mehr Breite (66 statt 60 Teile). */
@media(max-height:599px){.gkCentral .gkStage{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}}
/* UI 1.5.6: Mannschaft am Handy wie Wettkampf - drei Karten im ersten Blick. */
@media(max-height:599px){.gkCentral [data-gk-hub-pane="mannschaft"] .gkBtn.gkHubCard{flex:0 0 auto;min-height:72px;padding-block:7px}.gkCentral [data-gk-hub-pane="mannschaft"]{gap:8px}}
/* UI 1.5.6: Werkstattpost - alle Briefe in einer Reihe, egal wie viele es sind (vorher brach der sechste in eine zweite Zeile um). */
.ggNewsNav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.ggNewsNav button{overflow:hidden;text-overflow:ellipsis}
/* UI 1.5.6: Werkstatt - Wertebalken der Spirale beginnen und enden buendig (vorher je nach Wortlaenge versetzt). */
.gkStatRow{grid-template-columns:11ch minmax(0,1fr) 6ch}.gkStatRow em{text-align:right}.gkStatRow>span{letter-spacing:0}/* Abnahme zentrale-g4: WANDSCHADEN passt in 11ch, Luft zum Balken */
/* UI 1.5.6: Module - der Preis auf BAUEN/VERBESSERN ist lesbar gross. */
.gkDetail .acts .gkBtn small{display:block;margin-top:2px;font-size:.95em;font-weight:900;line-height:1.1;opacity:1;color:#2a1d12;text-shadow:none}.gkDetail .acts .gkBtn.isOff{opacity:1}.gkDetail .acts .gkBtn.isOff small{color:#7a1d10}
/* UI 1.5.6: Design - Reiter schneiden kein Wort mehr ab; Geraete - leere Hinweiszeilen fallen weg. */
.gkDesignTabs .gkTab{font-size:clamp(10px,1.2vw,16px);letter-spacing:0;gap:4px;padding-inline:4px}
.gkSpezial:empty,[data-gk-screen] small:empty{display:none}/* Abnahme zentrale-8: Mindestschrift 11 px in Hub, Laden, Schaukasten, Arbeitszettel, Werkstatt; Ausbaukarten erst ab 800x380 px (darunter sind die Karten zu schmal fuer 11 px) */.gkCentral .gkHubBrand .gkStreakLbl{font-size:11px}.gkHubProgress{font-size:clamp(11px,1.15vw,16px)}.gkHubCardCopy small{font-size:11px}.gkSchichtWege .gkHubCardCopy>span{font-size:clamp(11px,1.1vw,14px)}.gkSetup b{font-size:max(11px,.9em)}.gkBottomR [data-notdienst-vorschau]{font-size:clamp(11px,.95vw,12px)!important}.gkLadenAktiv .gkHandelsbrief small{font-size:11px}.wochenbuch-kopf small{font-size:11px}@media(max-height:500px){.wochenbuch-status{font-size:11px}}body .dia-sammlung .dia-vitrine-etikett>span{font-size:clamp(11px,1.8vh,12px)}.gkSpecialPreise .gkSpecialKauf small{font-size:11px}@media(min-width:800px) and (min-height:380px){.gkCard .h[class] small{font-size:max(11px,calc(.72 * var(--su)))}.gkCard .l small{font-size:max(11px,.6em)}.gkWorkshop .gkCard .gkPrice .gkTeile{font-size:max(11px,calc(.72 * var(--su)))}}/* Abnahme zentrale-7: Fundbuch-Reiter und Kapitel-Chips mit 44-px-Trefferflaeche wie .gkBtn (Zeile 1262) */.mkTabs button,.mkKapitel button,.mkKapitelStand button{position:relative}.mkTabs button::after,.mkKapitel button::after,.mkKapitelStand button::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}.mkBuch.gkHubPane>.mkTabs{padding-block:7px;margin-block:-7px}
/* UI 1.5.6: Schichtende - der Stundenzettel laeuft unten weich aus statt hart abgeschnitten; so ist sichtbar, dass er weitergeht. */
#schichtende.mk21-ende .ende-bericht-inhalt{-webkit-mask-image:linear-gradient(#000 calc(100% - 20px),transparent);mask-image:linear-gradient(#000 calc(100% - 20px),transparent)}
/* UI 1.5.6: Fahrt-HUD - das Rivalen-Bild ueberdeckt den Anfang der Zielzeile nicht mehr ('Noch ...' war angeschnitten). */
body.gg-meister-hud #hudTop #ggRekord.hat-rivale:not([hidden]){position:relative;padding-left:28px;min-height:28px}
/* RENN-EINLADUNG 1.5.6: ein Knopf in der Szene der Schichtende-Karte, zwischen Sprechblase und Gustav; kleiner als NOCHMAL, faengt nichts ab. */
.ende-rennen{position:absolute;left:0;right:0;top:27%;margin-inline:auto;width:max-content;z-index:3;min-height:44px;padding:8px 18px;border:2px solid #3a2a1c;border-radius:12px;background:linear-gradient(#ffb467,#f08a34);color:#2a1d12;font:400 17px/1 var(--gk-display,'Gustav Display','Arial Black',sans-serif);letter-spacing:.03em;box-shadow:0 4px 0 #8a4a14;white-space:nowrap;animation:apexHoch .42s cubic-bezier(.2,.9,.25,1) .5s both}
.ende-rennen:active{translate:0 2px;box-shadow:0 2px 0 #8a4a14}.ende-rennen:disabled{opacity:.6}@media(min-height:600px){#schichtende.mk21-ende .ende-szene.hat-rennen>.ende-rennen{top:calc(100% + 14px)}}@media(max-height:340px){#schichtende.mk21-ende .ende-szene.hat-rennen>.ende-rennen{top:21%}}   /* Audit 12.11.: auf grossen Bildern steht der Knopf unter Gustav im freien Raum, nicht auf seiner Muetze; Abnahme ende-7: bis 340 px Hoehe etwas hoeher, der Schatten lag auf der Muetze */
@media(prefers-reduced-motion:reduce){.ende-rennen{animation:none}}

/* 11.11. Bedienkorrekturen nach Telemetrie (95 Sofort-Feierabende bei 41 neuen Spielern):
   E1 - in den ersten 15 m verlangt FEIERABEND einen zweiten Tipp und zeigt "SICHER?" (hud.js);
   E2 - "Zur Zentrale" auf der Lohntuete wieder als sichtbarer zweiter Knopf statt unterstrichener Text. */
#fahrt-zentrale[data-sicher] { position: relative; }
#fahrt-zentrale[data-sicher] > * { visibility: hidden; }
#fahrt-zentrale[data-sicher]::after { content: 'SICHER?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 13px/1 'Gustav Display', system-ui, sans-serif; color: #fff; background: #B5322A; border-radius: inherit; letter-spacing: .04em; }
#schichtende.mk21-ende>#seZentrale { background: #F6E6C3; border: 3px solid #5b4433; border-radius: 12px; box-shadow: 0 4px 0 #5b4433; color: #493d32; min-height: 48px; padding: 6px 14px; font-size: 16px; font-weight: 400; font-family: var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); text-decoration: none; width: auto; }   /* Abnahme ende-10 12.11.: Spielschrift wie NOCHMAL */
/* ============================================================================
   HHO P1 (Makeover Hyper-Hit-Overdrive, Kevin 10.11.2026) — Fahrt-HUD nach F2.
   Alles haengt an body.hho-hud (:not(#_) hebt nur die Spezifitaet ueber aeltere HUD-Regeln; setzt v2/hho.js, Schalter hho.hud). Ohne die Klasse
   greift keine Regel: Schalter aus = HUD wie 92899aa5. Masse in CSS-px bei 915 x 412.
   Farbrollen F7: Tinte #493D32, Papier #FFF8E6, Karton #F6E6C3, Linie #B58B60,
   Amber #E7A928, Warnrot #B93832, Start-Gruen #6CC24A, Wasser #4DB8E8.
   ========================================================================== */
body.hho-hud:not(#_):not(#_):not(#_) { --hho-tinte:#493D32; --hho-papier:#FFF8E6; --hho-karton:#F6E6C3; --hho-linie:#B58B60; --hho-amber:#E7A928; --hho-rot:#B93832; --hho-wasser:#4DB8E8; --hho-links:calc(10px + env(safe-area-inset-left, 0px)); --hho-rechts:calc(10px + env(safe-area-inset-right, 0px)); }
body.hho-hud:not(#_):not(#_):not(#_) :is(#muteBtn, #fahrt-zentrale, #hilfeBtn, #coinHud, #meters, #matBanner, #vorratTitel, .hudNeben, .hudCombo, .hudRecord, #hudFlamme, #hudZonenRohr) { display: none !important; }

/* ---- oben links: ein Pausenknopf 48 x 48 ---- */
body.hho-hud:not(#_):not(#_):not(#_) #hhoPauseBtn { position: absolute; top: 8px; left: var(--hho-links); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 3px solid var(--hho-tinte); border-radius: 14px; background: linear-gradient(#FFFDF4, var(--hho-karton)); box-shadow: 0 3px 0 var(--hho-tinte), inset 0 2px 0 #fff; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
body.hho-hud:not(#_):not(#_):not(#_) #hhoPauseBtn i { width: 6px; height: 18px; border-radius: 2px; background: var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #hhoPauseBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hho-tinte); }
#hhoPauseBtn, #hhoPause, #hhoInstr, .hhoEuro, .hhoLeiter, .hhoTrommel, .hhoKorb, .hhoTrommelZahl, .hhoTrommelName, .hhoKofferBild, .hhoStempel, .hhoKopf { display: none; }

/* ---- oben Mitte: Meter + Euro, darunter die Serien-Plakette mit Leiter ---- */
body.hho-hud:not(#_):not(#_):not(#_) #hudTop, body.hho-hud:not(#_):not(#_):not(#_) #hudTop :is(.hudMeter, .hudSauber, .hudMeister, .hudZiel), body.hho-hud:not(#_):not(#_):not(#_) #hudTop :is(.lbl, .val, small, span, progress) { all: revert; box-sizing: border-box; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop *::before, body.hho-hud:not(#_):not(#_):not(#_) #hudTop *::after { content: none !important; display: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; container-type: normal; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop { grid-template-columns: auto auto !important; grid-template-areas: "meter euro" "nest nest" "pts pts" "ziel ziel" !important; gap: 2px 12px !important; padding: 0 !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeter { grid-area: meter !important; } body.hho-hud:not(#_):not(#_):not(#_) .hhoEuro { grid-area: euro; } body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber { grid-area: nest !important; grid-template-areas: "titel mult" "leiter leiter" !important; } body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister { grid-area: pts !important; } body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudZiel { grid-area: ziel !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber .lbl { grid-area: titel; font-size: 0 !important; } body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber .lbl::after { content: attr(data-lbl) !important; display: inline !important; font: 400 15px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif) !important; letter-spacing: .5px; color: var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber .val { grid-area: mult; font-size: 15px !important; } body.hho-hud:not(#_):not(#_):not(#_) .hhoLeiter { grid-area: leiter; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeter .val { color: var(--hho-papier) !important; font: 400 30px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif) !important; letter-spacing: 0; } body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister .val { font: 800 12px/1 var(--gk-body, 'Nunito', system-ui, sans-serif) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop { top: 6px; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 2px 12px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; min-width: 0; width: max-content; max-width: 46vw; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop > * { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeter { justify-self: end; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeter .lbl, body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister .lbl, body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber::before, body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber::after { display: none; content: none; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeter .val { font: 400 30px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: var(--hho-papier); -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--hho-tinte), 2px 0 0 var(--hho-tinte), -2px 0 0 var(--hho-tinte), 0 -2px 0 var(--hho-tinte), 0 4px 0 rgba(73,61,50,.55); background: none; padding: 0; border: 0; box-shadow: none; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoEuro { display: flex; align-items: baseline; gap: 3px; justify-self: start; transform-origin: 20% 60%; font: 400 22px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: #FFD95A; text-shadow: 0 2px 0 var(--hho-tinte), 2px 0 0 var(--hho-tinte), -2px 0 0 var(--hho-tinte), 0 -2px 0 var(--hho-tinte); font-variant-numeric: tabular-nums; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoEuro i { font-style: normal; font-size: 17px; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber { grid-column: 1 / -1; justify-self: center; position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: 20px 8px; align-items: center; column-gap: 8px; min-width: 148px; height: 34px; padding: 1px 12px 2px; border: 3px solid var(--hho-tinte); border-radius: 12px; background: linear-gradient(#FFFDF4, var(--hho-karton)); box-shadow: 0 3px 0 var(--hho-tinte), inset 0 2px 0 #fff; transform-origin: 50% 50%; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber .lbl { font: 400 15px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .5px; color: var(--hho-tinte); text-shadow: none; background: none; padding: 0; white-space: nowrap; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber .val { justify-self: end; font: 400 15px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: #8B5510; text-shadow: none; background: none; border: 0; padding: 0; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLeiter { grid-column: 1 / -1; display: flex; gap: 4px; justify-content: space-between; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLeiter b { flex: 1; height: 5px; border-radius: 3px; background: rgba(73,61,50,.22); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLeiter b.voll { background: var(--hho-amber); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLeiter b.jetzt { background: #6CC24A; box-shadow: 0 0 0 1px var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber[data-stufe="0"] .hhoLeiter b.jetzt { background: rgba(73,61,50,.45); box-shadow: none; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber.bruch { border-color: var(--hho-rot); background: #FBE3DE; }
body.hho-hud:not(#_):not(#_):not(#_) #hudSerieZiel { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 7px); display: block; white-space: nowrap; font: 800 12px/1 var(--gk-body, 'Nunito', system-ui, sans-serif) !important; color: var(--hho-papier) !important; text-shadow: 0 1px 0 var(--hho-tinte), 1px 0 0 var(--hho-tinte), -1px 0 0 var(--hho-tinte), 0 -1px 0 var(--hho-tinte); background: none; padding: 0; opacity: .95; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister { grid-column: 1 / -1; justify-self: center; margin-top: 20px; display: flex; gap: 4px; align-items: baseline; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister .val { font: 800 12px/1 var(--gk-body, 'Nunito', system-ui, sans-serif); color: var(--hho-papier); text-shadow: 0 1px 0 var(--hho-tinte), 1px 0 0 var(--hho-tinte), -1px 0 0 var(--hho-tinte); background: none; border: 0; padding: 0; box-shadow: none; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister .val::after { content: ' Pkt.' !important; display: inline !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudZiel { grid-column: 1 / -1; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 1px; } body.hho-hud:not(#_):not(#_):not(#_) #hudTop #hudTiefe { display: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudZiel small { font: 800 12px/1.1 var(--gk-body, 'Nunito', system-ui, sans-serif) !important; color: var(--hho-papier); text-shadow: 0 1px 0 var(--hho-tinte), 1px 0 0 var(--hho-tinte), -1px 0 0 var(--hho-tinte), 0 -1px 0 var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop #ggRekord progress { height: 3px; }
body.hho-hud:not(#_):not(#_):not(#_) #stauHud { top: 104px; min-height: 28px; display: flex; align-items: center; font-size: 12px; padding: 0 14px; }
body.hho-hud:not(#_):not(#_):not(#_) #stauHud.hidden { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) #radio { top: 104px; }

/* ---- oben rechts: KELLER und ROHR als Rundinstrumente (HHO-UI-04) ---- */
body.hho-hud:not(#_):not(#_):not(#_) #hhoInstr { display: flex; position: absolute; top: 6px; right: var(--hho-rechts); gap: 10px; pointer-events: none; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr { position: relative; width: 50px; display: grid; justify-items: center; row-gap: 1px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrSvg { width: 50px; height: 50px; display: block; overflow: visible; filter: drop-shadow(0 3px 0 rgba(73,61,50,.9)); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrSvg .bahn { fill: var(--hho-papier); stroke: var(--hho-tinte); stroke-width: 3; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrSvg .wert { fill: none; stroke: var(--hho-wasser); stroke-width: 5.5; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 22px 22px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr[data-art="rohr"] .wert { stroke: #6CC24A; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrSvg .zeichen { fill: none; stroke: rgba(73,61,50,.2); stroke-width: 2; stroke-linejoin: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrZahl { position: absolute; top: 0; left: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font: 400 17px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: var(--hho-tinte); font-variant-numeric: tabular-nums; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrName { font: 400 12px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .6px; color: var(--hho-papier); text-shadow: 0 1px 0 var(--hho-tinte), 1px 0 0 var(--hho-tinte), -1px 0 0 var(--hho-tinte), 0 -1px 0 var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrZusatz { min-height: 12px; max-width: 74px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .3px; color: #FFE9B8; text-shadow: 0 1px 0 var(--hho-tinte), 1px 0 0 var(--hho-tinte), -1px 0 0 var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr[data-zustand="warn"] .wert { stroke: var(--hho-amber); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr[data-zustand="gefahr"] .wert { stroke: var(--hho-rot); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr[data-zustand="gefahr"] .bahn { fill: #FBE3DE; stroke: var(--hho-rot); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr[data-zustand="gefahr"] .hhoUhrZahl { color: var(--hho-rot); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr[data-zustand="gefahr"] .hhoUhrSvg { animation: hhoGefahr .667s ease-in-out infinite alternate; }
@keyframes hhoGefahr { from { opacity: 1; } to { opacity: .55; } }
body.hho-gefahr:not(#_):not(#_):not(#_) #fahrt-ui::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(20,10,6,.32) 100%); }

/* ---- rechts: Kraftschub-Trommel (HHO-UI-01), Koffer (HHO-UI-02/03), Extra ---- */
body.hho-hud:not(#_):not(#_):not(#_) #vorrat :is([data-vorrat], #fixerBtn) { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; margin: 0; transform: none; flex: none; box-sizing: border-box; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat { display: block; height: auto; max-width: none; transform: none; pointer-events: none; } body.hho-hud:not(#_):not(#_):not(#_) #vorrat button { pointer-events: auto; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat { position: absolute; top: 86px; right: var(--hho-rechts); left: auto; bottom: auto; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat .vorratPlaetze { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn { order: 1; position: relative; width: 76px; height: 92px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; opacity: 1; --hho-lack: #C7463C; touch-action: manipulation; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn > [data-begriff], body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn > #fixerSym { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn::before, body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn::after { content: none; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel { display: block; position: absolute; top: 0; left: 2px; width: 72px; height: 72px; overflow: visible; transform-origin: 50% 50%; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSchatten { fill: rgba(73,61,50,.9); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tRand { fill: #5B6468; stroke: var(--hho-tinte); stroke-width: 3; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tLack { fill: var(--hho-lack); stroke: var(--hho-tinte); stroke-width: 2; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tGlanz { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 4; stroke-linecap: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSeg { fill: none; stroke: rgba(40,28,20,.5); stroke-width: 7; stroke-linecap: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSeg.voll { stroke: #FFE08A; filter: drop-shadow(0 0 1.5px #FFB21A); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tZeit { fill: none; stroke: #FFF1C2; stroke-width: 7; stroke-linecap: butt; opacity: 0; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tNabe { fill: #E9EEF0; stroke: var(--hho-tinte); stroke-width: 3; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSchloss { display: none; fill: none; stroke: var(--hho-tinte); stroke-width: 3; stroke-linejoin: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKorb { display: block; position: absolute; top: 23px; left: 25px; width: 26px; height: 26px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKorb path { fill: none; stroke: var(--hho-tinte); stroke-width: 3.2; stroke-linecap: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommelZahl { display: none; position: absolute; top: 22px; left: 2px; width: 72px; height: 28px; align-items: center; justify-content: center; font: 400 19px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommelName { display: block; position: absolute; left: auto; right: 0; top: 76px; transform: none; white-space: nowrap; font: 400 12px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .5px; color: var(--hho-papier); text-shadow: 0 1px 0 var(--hho-tinte), 1px 0 0 var(--hho-tinte), -1px 0 0 var(--hho-tinte), 0 -1px 0 var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-ladung="3"] .hhoKorb { animation: hhoDreh 5s linear infinite; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-ladung="4"] .hhoKorb { animation: hhoDreh 2.4s linear infinite; }
/* WOW 11.11. -> Spur 7 (13.11.): bereit ist jetzt ein groesserer Knopf mit Kranz und Plakette (Block weiter unten, hinter der Pausenkarte); Puls und Blinken ueber box-shadow/Textfarbe entfallen */
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="bereit"] .hhoKorb { animation: hhoDreh 1.4s linear infinite; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="bereit"] .tRand { fill: var(--hho-amber); }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="lauf"], [data-hho-schub="warnung"]) .tSeg { opacity: 0; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="lauf"], [data-hho-schub="warnung"]) .tZeit { opacity: 1; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="lauf"], [data-hho-schub="warnung"]) .hhoKorb { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="lauf"], [data-hho-schub="warnung"]) .hhoTrommelZahl { display: flex; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="lauf"], [data-hho-schub="warnung"]) .tRand { fill: #FFB21A; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="warnung"] .tZeit { stroke: var(--hho-rot); }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="warnung"] .tRand { fill: #FBE3DE; stroke: var(--hho-rot); }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="aus"] .hhoTrommel { filter: grayscale(1) brightness(.85); }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="aus"] .tSchloss { display: block; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="aus"] .hhoKorb { display: none; }
@keyframes hhoDreh { to { transform: rotate(360deg); } }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"] { order: 2; position: relative; width: 56px; height: 56px; min-width: 0; padding: 0; border: 3px solid var(--hho-tinte); border-radius: 10px; background: linear-gradient(#8A6A4C 0 26%, #6E5139 26% 30%, #7C5D42 30%); box-shadow: 0 3px 0 var(--hho-tinte), inset 0 2px 0 rgba(255,255,255,.25); overflow: visible; opacity: 1; --hho-kopf: #F6E6C3; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"]::before { content: ''; position: absolute; left: 50%; top: -9px; width: 22px; height: 8px; margin-left: -11px; border: 3px solid var(--hho-tinte); border-bottom: 0; border-radius: 6px 6px 0 0; background: none; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"] > :is(.slotFenster, .vorratName, .drallStand) { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKofferBild { display: block; position: absolute; left: 9px; top: 6px; width: 32px; height: 32px; overflow: visible; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKofferBild path { fill: none; stroke: var(--hho-kopf); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 0 0 var(--hho-tinte)); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKofferBild.schatten { opacity: .42; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoStempel { display: flex; position: absolute; left: 5px; right: 5px; bottom: 4px; gap: 3px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoStempel b { flex: 1; height: 7px; border-radius: 2px; background: rgba(40,28,20,.55); box-shadow: inset 0 1px 0 rgba(0,0,0,.3); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoStempel b.voll { background: #FFE08A; box-shadow: 0 0 0 1px var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"][data-hho-koffer="geladen"] { background: linear-gradient(#B8863F 0 26%, #8B5510 26% 30%, #A6732E 30%); }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"].hhoZu { filter: grayscale(.8) brightness(.8); }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="0"] { order: 3; width: 48px; height: 48px; min-width: 0; padding: 0; border: 3px solid var(--hho-tinte); border-radius: 12px; background: rgba(73,61,50,.72); box-shadow: 0 3px 0 var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="0"] .vorratName { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="0"] .slotFenster { width: 100%; height: 100%; border: 0; background: none; box-shadow: none; }

/* ---- unten links: Kopfleiste, aktiver Kopf 76, uebrige 64, Silhouette in Kopf-Farbe (HHO-KOPF-01..04) ---- */
body.hho-hud:not(#_):not(#_):not(#_) #tools { left: var(--hho-links); right: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 8px; }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn { position: relative; width: 64px; height: 64px; padding: 0; display: block; border: 3px solid var(--hho-tinte); border-radius: 14px; background: #5B4433; box-shadow: 0 3px 0 var(--hho-tinte), inset 0 2px 0 rgba(255,255,255,.14); opacity: 1; overflow: visible; }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn .uiIco { display: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf { display: block; position: absolute; left: 7px; top: 7px; width: 44px; height: 44px; overflow: visible; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf :is(.koerper, .kugel, .nabe) { fill: var(--hho-kopf); stroke: var(--hho-tinte); stroke-width: 3; stroke-linejoin: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf .schaft { fill: none; stroke: var(--hho-tinte); stroke-width: 9; stroke-linecap: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf .arm { fill: none; stroke: var(--hho-tinte); stroke-width: 5; stroke-linecap: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf .strahl { fill: none; stroke: var(--hho-kopf); stroke-width: 5; stroke-linecap: round; paint-order: stroke; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf .licht { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 3; stroke-linecap: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf .kante { fill: none; stroke: var(--hho-tinte); stroke-width: 2.5; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf .nabe { fill: #E9EEF0; }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn .tKey { position: absolute; right: -5px; top: -7px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--hho-tinte); border-radius: 8px; font: 400 12px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: var(--hho-tinte); background: var(--hho-karton); }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn .tName { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active { width: 76px; height: 76px; background: linear-gradient(#FFFDF4, var(--hho-karton)); box-shadow: 0 4px 0 var(--hho-tinte), inset 0 2px 0 #fff, 0 0 0 3px var(--hho-kopf); }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active .hhoKopf { left: 11px; top: 5px; width: 50px; height: 50px; }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active .tName { display: block; position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 400 12px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: var(--hho-tinte); background: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; letter-spacing: -.3px; } @media (max-height: 360px) { body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active .tName { font-size: 11px; } }   /* hud-fahrt-2: Einsteigerwoerter (Wurzelsäge, Wasserstrahl) passen auch auf die schmale Karte */ body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active .tName:is([data-begriff="hd-duese"], [data-begriff="wurzelschneider"], [data-begriff="kettenschleuder"]) { font-size: 10px; letter-spacing: -.3px; } @media (max-height: 350px) { body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active .tName:is([data-begriff="wurzelschneider"], [data-begriff="kettenschleuder"]) { left: -6px; right: -6px; } }   /* 12.11.: bei 844x330 ist die Karte nur 60 px breit, die Fachnamen brauchen 66-68 px: Name darf je 6 px in die Luecke ragen statt als 'Wurzelschn…' zu enden */   /* 12.11.: lange Kopfnamen (Wasserstrahl, Wurzelschneider, Kettenschleuder) ganz statt 'Wasserstr…' */
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.empfohlen:not(.active) { background: #6F5540; box-shadow: 0 3px 0 var(--hho-tinte), 0 0 0 3px var(--hho-kopf); }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.fehlkopf .hhoKopf { filter: grayscale(1); }
body.hho-hud:not(#_):not(#_):not(#_) .toolBtn #hdTank { position: absolute; left: 6px; right: 6px; top: 3px; height: 5px; }

/* ---- Pausenkarte (D4.2 Nr. 3): Weiter, So geht's, Ton, Feierabend ---- */
body.hho-hud:not(#_):not(#_):not(#_) #hhoPause:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; background: rgba(40,28,20,.62); pointer-events: auto; animation: hhoEin .16s cubic-bezier(.2,.8,.2,1); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte { width: min(320px, 86vw); display: grid; gap: 10px; padding: 16px 18px 14px; border: 3px solid var(--hho-tinte); border-radius: 22px; background: var(--hho-papier); box-shadow: 0 6px 0 var(--hho-tinte); text-align: center; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte h2 { margin: 0; font: 400 30px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseSatz { margin: 0; font: 800 14px/1.2 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #8B5510; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte button { min-height: 48px; border: 3px solid var(--hho-tinte); border-radius: 14px; background: var(--hho-karton); box-shadow: 0 3px 0 var(--hho-tinte); font: 400 17px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: var(--hho-tinte); cursor: pointer; touch-action: manipulation; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hho-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte .hhoHaupt { min-height: 56px; background: #6CC24A; font-size: 22px; color: #fff; text-shadow: 0 2px 0 rgba(40,60,20,.6); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseReihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte .hhoLeise { background: none; box-shadow: none; border-color: var(--hho-linie); color: #8B5510; }
@keyframes hhoEin { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* GP-S7 ANFANG (Spur 7, Kevin 13.11.: Ton-Taste zeigt den Zustand, Kraftschub und Koffer zuendbereit unuebersehbar, Ursache und "zu frueh" sichtbar). Nur transform/opacity/scale, kein filter, kein animierter box-shadow; Bewegung nur ohne reduzierte Bewegung. */
/* Ton-Taste: Lautsprecher (durchgestrichen bei aus) und Wort; Build-Zeile klein und blass am Kartenrand */
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte [data-hho-pause="ton"] { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; font-size: 16px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLaut { width: 24px; height: 24px; flex: none; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLaut path { fill: currentColor; stroke: none; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLaut :is(.wellen, .strich) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoLaut .strich { stroke: var(--hho-rot); stroke-width: 3; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte [data-hho-pause="ton"][aria-pressed="true"] .strich, body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte [data-hho-pause="ton"][aria-pressed="false"] .wellen { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoPauseKarte [data-hho-pause="ton"][aria-pressed="false"] { background: #E3D6BC; color: #8B5510; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoBuild { margin: -2px 0 -4px; font: 700 12px/1 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #8B5510; opacity: .55; }
/* Kraftschub laden: der Stand steht als Zahl in der Nabe (statt des Korbs); jedes Segment rastet erst ein, wenn der Funke ankommt */
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="laden"], [data-hho-schub="wartet"]):not([data-hho-ladung="0"]) .hhoKorb { display: none; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="laden"], [data-hho-schub="wartet"]) .hhoTrommelZahl:not(:empty) { display: flex; font-size: 13px; letter-spacing: -.3px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSeg.voll { animation: gp7Rast .1s .3s backwards; }
@keyframes gp7Rast { from { opacity: .25; } }
/* bereit, laeuft, Auslauf: Trommel 20 % groesser; Restzeit gross in der Nabe */
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="bereit"], [data-hho-schub="lauf"], [data-hho-schub="warnung"]) :is(.hhoTrommel, .hhoTrommelZahl, .hhoKorb) { scale: 1.2; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="lauf"], [data-hho-schub="warnung"]) .hhoTrommelZahl { font-size: 23px; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="lauf"], [data-hho-schub="warnung"]) .tNabe { r: 18px; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="warnung"] .hhoTrommelZahl { color: var(--hho-rot); }
/* Kranz um die Trommel (eigenes Pseudo-Element, hoechstens 7 px ueber den Knopf = in den 10-px-Spaltenrand): bereit pulsiert, Lauf ruht, Auslauf rot und schnell; ::after ist der einmalige Lichtstoss beim Bereitwerden */
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="bereit"], [data-hho-schub="lauf"], [data-hho-schub="warnung"])::before, body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn:is([data-hho-schub="bereit"], [data-hho-schub="warnung"])::after { content: ''; position: absolute; z-index: 1; left: -7px; top: -9px; width: 90px; height: 90px; display: block; transform: none; animation: none; box-sizing: border-box; border: 4px solid #FFC83A; border-radius: 50%; outline: 2px solid rgba(73,61,50,.75); background: radial-gradient(circle, rgba(255,214,90,0) 50%, rgba(255,214,90,.6) 100%); pointer-events: none; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="lauf"]::before { border-color: #FFE08A; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="warnung"]::before, body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="warnung"]::after { border-color: #E8483C; background: radial-gradient(circle, rgba(232,72,60,0) 50%, rgba(232,72,60,.5) 100%); }
/* Plakette: fester dunkler Grund, helle Schrift; die Restzahl-Plakette ("NOCH 3") liegt auf demselben Platz und blendet nur bei zu fruehem Tippen ein */
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="bereit"] .hhoTrommelName:not(.hhoRest) { color: #FFE08A !important; background: #3A2A1E !important; border-color: #FFE08A !important; box-shadow: 0 2px 0 rgba(0,0,0,.55) !important; letter-spacing: .6px; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub] .hhoTrommelName { top: 73px; z-index: 2; }
body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub] .hhoRest { opacity: 0; z-index: 3; min-width: 89px; box-sizing: border-box; text-align: center; color: var(--hho-rot) !important; }
/* Koffer: Stempel groesser; geladen = dunkle Kachel mit goldenem Rand, 15 % groesser, Kranz und Plakette links daneben (dort liegt nur Spielbild) */
body.hho-hud:not(#_):not(#_):not(#_) .hhoStempel b { height: 9px; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"][data-hho-koffer="geladen"] { scale: 1.15; z-index: 1; background: linear-gradient(180deg, #54402D, #2E2018) !important; border-color: #FFC83A !important; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"][data-hho-koffer="geladen"]::after { content: ''; position: absolute; z-index: 1; left: -4px; right: -4px; top: -4px; bottom: -4px; border: 4px solid #FFC83A; border-radius: 16px; pointer-events: none; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"] .hhoKofferName { position: absolute; right: calc(100% + 12px); top: 12px; z-index: 2; display: block; opacity: 0; white-space: nowrap; padding: 2px 5px 1px; border: 2px solid #FFE08A; border-radius: 7px; background: #3A2A1E; font: 400 12px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .6px; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"][data-hho-koffer] .hhoKofferName { color: #FFE08A !important; text-shadow: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat="1"][data-hho-koffer="geladen"] .hhoKofferName { opacity: 1; }
/* Funke vom Bild zu Trommel und Koffer (ein Element je Ziel, bewegt per Web-Animation) */
body.hho-hud:not(#_):not(#_):not(#_) .hhoFunke { position: absolute; left: 0; top: 0; z-index: 9; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #fff 0 24%, #FFC83A 42%, #E7881A 66%, rgba(231,136,26,0) 78%); box-shadow: 0 0 6px 2px rgba(255,200,58,.85), 0 0 0 1px rgba(73,61,50,.35); opacity: 0; pointer-events: none; }
/* Bewegung nur ohne reduzierte Bewegung (System und HHO-Einstellung); sonst bleibt der grosse, helle, statische Zustand mit Plakette */
@media (prefers-reduced-motion: no-preference) {
  body.hho-hud:not(#_):not(#_):not(#_):not([data-hho-bewegung="wenig"]) #fixerBtn[data-hho-schub="bereit"]::before { animation: gp7Kranz .9s ease-out infinite; }
  body.hho-hud:not(#_):not(#_):not(#_):not([data-hho-bewegung="wenig"]) #fixerBtn[data-hho-schub="bereit"]::after { animation: gp7Stoss .45s ease-out, gp7Kranz .9s ease-out .45s infinite; }
  body.hho-hud:not(#_):not(#_):not(#_):not([data-hho-bewegung="wenig"]) #fixerBtn[data-hho-schub="warnung"]::before { animation: gp7Kranz .5s ease-out infinite; }
  body.hho-hud:not(#_):not(#_):not(#_):not([data-hho-bewegung="wenig"]) #fixerBtn[data-hho-schub="warnung"]::after { animation: gp7Kranz .5s ease-out .25s infinite; }
  body.hho-hud:not(#_):not(#_):not(#_):not([data-hho-bewegung="wenig"]) #vorrat [data-vorrat="1"][data-hho-koffer="geladen"]::after { animation: gp7Stoss .45s ease-out, gp7Kranz .9s ease-out .45s infinite; }
  /* HUD-KALT (Fahrt, styles.css 'body.gg-fahrt-kalt *::before') kappt jede Endlos-Animation auf einen Durchlauf; der Kranz ist das Hauptsignal und laeuft deshalb hier weiter (nur transform/opacity eines kleinen Elements). Nicht bei schwachem Takt (gg-spar2: dort bleibt es beim grossen statischen Ring) und nicht bei Wenig Bewegung. */
  body.hho-hud:not(#_):not(#_):not(#_):not(.gg-spar2):not([data-hho-bewegung="wenig"]) #fixerBtn:is([data-hho-schub="bereit"], [data-hho-schub="warnung"])::before, body.hho-hud:not(#_):not(#_):not(#_):not(.gg-spar2):not([data-hho-bewegung="wenig"]) #fixerBtn[data-hho-schub="warnung"]::after { animation-iteration-count: infinite !important; }
  body.hho-hud:not(#_):not(#_):not(#_):not(.gg-spar2):not([data-hho-bewegung="wenig"]) #fixerBtn[data-hho-schub="bereit"]::after, body.hho-hud:not(#_):not(#_):not(#_):not(.gg-spar2):not([data-hho-bewegung="wenig"]) #vorrat [data-vorrat="1"][data-hho-koffer="geladen"]::after { animation-iteration-count: 1, infinite !important; }
}
@keyframes gp7Kranz { from { transform: scale(.9); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes gp7Stoss { from { transform: scale(.55); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSeg.voll { animation: none; } }
body.hho-hud:not(#_):not(#_):not(#_)[data-hho-bewegung="wenig"] .hhoTrommel .tSeg.voll { animation: none; }
/* GP-S7 ENDE */

/* ---- kleine Hoehen (D4.3): Punkte und Rekordbalken entfallen bis 350 px; alles rueckt zusammen ---- */
@media (max-height: 350px) {
  body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudZiel, body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrZusatz { display: none !important; }   /* HOTFIX 1.6.1: Punkte bleiben auch auf kleinen Hoehen */
  body.hho-hud:not(#_):not(#_):not(#_) #vorrat { top: 74px; } body.hho-hud:not(#_):not(#_):not(#_) #vorrat .vorratPlaetze { gap: 6px; }
  body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn { transform: scale(.86); transform-origin: 100% 0; margin-bottom: -14px; }
  body.hho-hud:not(#_):not(#_):not(#_) .toolBtn { width: 56px; height: 56px; } body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active { width: 66px; height: 66px; }
  body.hho-hud:not(#_):not(#_):not(#_) .hhoKopf { left: 5px; top: 5px; width: 40px; height: 40px; } body.hho-hud:not(#_):not(#_):not(#_) .toolBtn.active .hhoKopf { left: 9px; top: 3px; width: 44px; height: 44px; }
  body.hho-hud:not(#_):not(#_):not(#_) #stauHud, body.hho-hud:not(#_):not(#_):not(#_) #radio { top: 84px; }
}
@media (prefers-reduced-motion: reduce) { body.hho-hud:not(#_):not(#_):not(#_) :is(.hhoKorb, .hhoTrommel, .hhoUhrSvg), body.hho-hud:not(#_):not(#_):not(#_) #hhoPause { animation: none !important; } body.hho-hud:not(#_):not(#_):not(#_) #fixerBtn[data-hho-schub="bereit"] .tRand { stroke: var(--hho-amber); stroke-width: 5; } }

/* ============================================================================
   HHO P2 (Kevin 10.11.2026, K3/E37) — Durchbruch und Kraftschub, reine Darstellung.
   Alles haengt an body.hho-fx (setzt v2/hho.js bei hho.durchbruch oder hho.schub).
   Die Ebenen liegen als erste Kinder in #fahrt-ui und damit UNTER jedem HUD-Knopf;
   pointer-events: none. Randlinien sind ein vorgerendertes Verlaufspaar, das nur per
   transform laeuft (Compositor), kein Partikelsystem, kein Filter.
   ========================================================================== */
.hhoBlitz, .hhoRand, .hhoFlug { display: none; }
body.hho-fx .hhoBlitz { display: block; position: fixed; inset: 0; z-index: 0; background: #fff; opacity: 0; pointer-events: none; }
body.hho-fx .hhoRand { display: block; position: fixed; left: -280px; right: 0; z-index: 0; height: 26px; opacity: 0; pointer-events: none; transition: opacity .6s linear; will-change: transform;
  background: repeating-linear-gradient(90deg, rgba(255,241,194,0) 0 50px, #FFF1C2 50px 190px, rgba(255,241,194,0) 190px 280px) 0 3px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,178,26,0) 0 130px, #FFB21A 130px 230px, rgba(255,178,26,0) 230px 280px) 0 11px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,226,140,0) 0 20px, #FFE28C 20px 90px, rgba(255,226,140,0) 90px 280px) 0 19px / 100% 2px no-repeat; }
body.hho-fx .hhoRandO { top: 0; } body.hho-fx .hhoRandU { bottom: 0; transform: scaleY(-1); }
body.hho-fx #fahrt-ui[data-hho-phase="lauf"] .hhoRand { opacity: .92; transition: opacity .12s linear; animation: hhoRandLauf .3s linear infinite; }
body.hho-fx #fahrt-ui[data-hho-phase="warnung"] .hhoRand { opacity: .42; transition: opacity .3s linear; animation: hhoRandLauf .55s linear infinite; }
body.hho-fx #fahrt-ui[data-hho-phase="auslauf"] .hhoRand { opacity: 0; animation: hhoRandLauf .9s linear infinite; }
body.hho-fx #fahrt-ui[data-hho-phase="lauf"] .hhoRandU, body.hho-fx #fahrt-ui[data-hho-phase="warnung"] .hhoRandU, body.hho-fx #fahrt-ui[data-hho-phase="auslauf"] .hhoRandU { animation-name: hhoRandLaufU; }
@keyframes hhoRandLauf { from { transform: translateX(0); } to { transform: translateX(280px); } }
@keyframes hhoRandLaufU { from { transform: translateX(0) scaleY(-1); } to { transform: translateX(280px) scaleY(-1); } }
body.hho-fx .hhoFlug { display: block; position: fixed; z-index: 0; opacity: 0; pointer-events: none; white-space: nowrap; transform: translate(-50%, -50%); font: 400 22px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: #FFD95A; text-shadow: 0 2px 0 #493D32, 2px 0 0 #493D32, -2px 0 0 #493D32, 0 -2px 0 #493D32; }
/* Weniger Bewegung: keine Randlinien, kein Blitz; ein ruhiger Amber-Rahmen traegt den Kraftschub (D5.2 Nr. 9). */
@media (prefers-reduced-motion: reduce) { body.hho-fx .hhoRand, body.hho-fx .hhoBlitz { display: none; } body.hho-fx #fahrt-ui:is([data-hho-phase="lauf"], [data-hho-phase="warnung"])::before { content: ''; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 5px #E7A928; } }
body.hho-fx[data-hho-bewegung="wenig"] .hhoRand, body.hho-fx[data-hho-bewegung="wenig"] .hhoBlitz { display: none; }
body.hho-fx[data-hho-bewegung="wenig"] #fahrt-ui:is([data-hho-phase="lauf"], [data-hho-phase="warnung"])::before { content: ''; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 5px #E7A928; }

/* ============================================================================
   HHO P4 (Kevin 10.11.2026) — Lohntuete: bezahlbarer Ausbau mit einem Tipp (F5, L8).
   Haengt an body.hho-lohn (setzt v2/hho.js bei hho.lohntuete). Der Knopf zeigt den
   echten Preis; "MONTIERT" erscheint erst nach der gebuchten Transaktion.
   ========================================================================== */
body.hho-lohn #schichtende .ende-handgriff[data-art="ausbau"][data-bereit="true"] .ende-handgriff-cta, body.hho-lohn #schichtende .ende-handgriff[data-art="maschine"][data-bereit="true"] .ende-handgriff-cta, body.hho-lohn #schichtende .ende-handgriff[data-hho-ausbau] .ende-handgriff-cta { display: inline-flex !important; align-items: center; min-height: 48px; margin-top: 4px; padding: 0 16px; border: 3px solid #493D32; border-radius: 14px; background: #6CC24A; box-shadow: 0 3px 0 #493D32, inset 0 2px 0 rgba(255,255,255,.45); font: 400 17px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: #fff; text-decoration: none; text-shadow: 0 2px 0 rgba(40,60,20,.6); } body.hho-lohn #schichtende .ende-handgriff[data-art="maschine"][data-bereit="true"] .ende-handgriff-cta { text-transform: uppercase; }   /* Abnahme ende-2 12.11.: auch die bereite Maschine zeigt ihren Knopf (vorher keine sichtbare Aktion) */
body.hho-lohn #schichtende .ende-handgriff[data-hho-ausbau="montiert"] { animation: hhoMontiert .32s cubic-bezier(.2,.8,.2,1); }
body.hho-lohn #schichtende .ende-handgriff[data-hho-ausbau="montiert"] .ende-handgriff-cta { background: #FFF8E6; color: #493D32; text-shadow: none; box-shadow: 0 2px 0 #493D32; transform: rotate(-2deg); } body.hho-lohn #schichtende .ende-handgriff[data-hho-ausbau="fehler"] .ende-handgriff-cta { background: #FFF8E6; color: #493D32; text-shadow: none; }   /* Audit 12.11.: nach Fehlschlag ein Weg-Knopf, kein Kaufknopf */
@keyframes hhoMontiert { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { body.hho-lohn #schichtende .ende-handgriff[data-hho-ausbau="montiert"] { animation: none; } }

/* ============================================================================
   HHO P3 (K2 Kevin 10.11.2026) — Sofort-Einstieg: zwei Comicbilder, dann Lehrschicht.
   #hhoEinstieg existiert nur fuer einen neuen Spielstand bei hho.einstieg (v2/hho_einstieg.js).
   Bild 1 ist der vorhandene Start-Comic des Ladebilds (Koenig und Fussvolk). Bild 2: Gustav
   (vorhandene Pose) vor warmem Werkstattlicht. Kein Text im Bild, jede Beruehrung startet.
   ========================================================================== */
#hhoEinstieg { position: fixed; inset: 0; z-index: 90; background: #2B1F17; touch-action: manipulation; cursor: pointer; transition: opacity .28s linear; }
#hhoEinstieg[data-schritt="weg"] { opacity: 0; pointer-events: none; }
#hhoEinstieg .hhoBild { position: absolute; inset: 0; opacity: 0; }
#hhoEinstieg[data-schritt="1"] .hhoBild2, #hhoEinstieg[data-schritt="weg"] .hhoBild2 { opacity: 1; }
#hhoEinstieg .hhoBild2 { display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 38%, #F6D48A 0, #C98A3A 38%, #5B4433 78%, #2B1F17 100%); }
#hhoEinstieg .hhoBild2 img { height: 92%; max-width: 70%; object-fit: contain; filter: drop-shadow(0 10px 0 rgba(43,31,23,.55)); transform-origin: 50% 100%; }
#hhoEinstieg[data-schritt="1"] .hhoBild2 img { animation: hhoGustavEin .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hhoGustavEin { from { transform: translateY(8%) scale(.94); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #hhoEinstieg .hhoBild2 img { animation: none !important; } }
#schichtende .hhoFachfrage { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 12px; border: 3px solid #493D32; border-radius: 14px; background: #FFF8E6; box-shadow: 0 3px 0 #493D32; text-align: left; }
#schichtende .hhoFachfrage strong { font: 400 17px/1.1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); color: #493D32; }
#schichtende .hhoFachfrage span { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#schichtende .hhoFachfrage button { min-height: 44px; border: 3px solid #493D32; border-radius: 12px; background: #F6E6C3; font: 800 14px/1.1 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #493D32; cursor: pointer; }
#schichtende .hhoFachfrage button[aria-pressed="true"] { background: #6CC24A; color: #fff; }
#schichtende .hhoFachfrage small { font: 700 12px/1.2 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #8B5510; }   /* Audit 12.11. (Blocker): auf niedrigen Bildern eine kompakte Leiste - Frage, vier Antworten in einer Reihe, jede mindestens 44 px hoch */ @media (max-height: 500px) { #schichtende .hhoFachfrage { gap: 3px; margin: 0; padding: 4px 6px 5px; border-width: 2px; box-shadow: 0 2px 0 #493D32; } #schichtende .hhoFachfrage strong { font-size: 13px; line-height: 1; } #schichtende .hhoFachfrage span { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } #schichtende .hhoFachfrage button { min-height: 44px; padding: 2px 3px; border-width: 2px; border-radius: 10px; font-size: 12px; line-height: 1.05; overflow-wrap: anywhere; hyphens: auto; } #schichtende .hhoFachfrage small { display: none; } }

/* ==========================================================================
   HHO P6 (K4 Kevin 10.11.2026) — Wiederkehr: Dienstplan-Ansicht im Feierabend, Kisten-Anteile.
   Nur sichtbar mit hho.oeko (meta.js wochenbuchRefresh, kisten.js kistenEnter).
   ========================================================================== */
.hhoDienst { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0 0; padding: 0; }
.hhoDienst li { display: grid; place-items: center; gap: 2px; min-height: 48px; padding: 4px 2px; border: 3px solid #493D32; border-radius: 10px; background: #FFF8E6; color: #493D32; box-shadow: 0 2px 0 #493D32; text-align: center; }
.hhoDienst small { font: 800 12px/1 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #8B5510; }
.hhoDienst b { font: 400 13px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); white-space: nowrap; }
.hhoDienst li[data-stand="abgeholt"] { background: #E8DCC0; opacity: .78; }
.hhoDienst li[data-stand="heute"] { background: #6CC24A; color: #fff; animation: hhoStempel .24s cubic-bezier(.2,.8,.2,1) both; }
.hhoDienst li[data-stand="heute"] small { color: #fff; }
@keyframes hhoStempel { from { transform: scale(1.25) rotate(-6deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hhoDienst li[data-stand="heute"] { animation: none !important; } }
.gkKiAnteile { font: 800 12px/1.3 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #ead4aa; text-align: center; margin: 4px 0 0; }

/* ==========================================================================
   HHO P7 (Kevin 10.11.2026) — Laden: Design-Sets mit Anprobe (nur mit hho.laden, v2/hho_laden.js).
   ========================================================================== */
.hhoSets { display: grid; gap: 6px; margin: 10px 0 0; }
.hhoSets h5 { margin: 0; font: 400 14px/1.1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .04em; color: var(--gk-amber-d, #8B5510); }   /* Fund karten-zentrale-11: dunkel wie die Paneelueberschriften */
.hhoSet { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "n p k" "s p k"; align-items: center; gap: 2px 6px; padding: 6px 8px; border: 3px solid #493D32; border-radius: 12px; background: #FFF8E6; box-shadow: 0 3px 0 #493D32; color: #493D32; }
.hhoSet.isPreview { background: #E9F7DD; border-color: #3E7F2A; }
.hhoSet strong { grid-area: n; font: 400 15px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); }
.hhoSet small { grid-area: s; font: 700 12px/1.2 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #8B5510; }
.hhoSet button { min-height: 44px; padding: 0 10px; border: 3px solid #493D32; border-radius: 10px; font: 400 14px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .03em; color: #493D32; background: #F6E6C3; }
.hhoSet .hhoSetProbe { grid-area: p; }
.hhoSet .hhoSetKauf { grid-area: k; background: #6CC24A; color: #fff; }
.hhoSet .hhoSetKauf.poor { background: #C9B48C; } .hhoSet .hhoSetKauf.isArmed { background: #E7A928; color: #493D32; box-shadow: 0 0 0 3px #FFE08A; }
.hhoSet .hhoSetKauf:disabled { background: #E8DCC0; color: #8B7B66; }
@media (max-width: 1000px) {
  .hhoSet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "n n" "s s" "p k"; }
  .hhoSet button { min-width: 0; padding: 0 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   HHO P5 (Kevin 10.11.2026) — Herz: Gustav-Zeile auf der Lohntuete und beim Ausbau (v2/hho_herz.js).
   ========================================================================== */
#schichtende .hhoSagt { display: block; margin: 4px 0 0; font: italic 700 13px/1.25 var(--gk-body, 'Nunito', system-ui, sans-serif); color: #5B4433; }

/* ==========================================================================
   HHO P4 (F5, Kevin 10.11.2026) — Lohntuete: Lohnposten laufen einzeln ein (ab 1,2 s, je 250 ms), ein Tipp zeigt sofort alles.
   ========================================================================== */
body.hho-lohn #schichtende .hhoPosten > * { animation: hhoPosten .25s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1.2s + var(--hho-i, 0) * .25s); }
@keyframes hhoPosten { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
body.hho-lohn #schichtende .ende-sofort .hhoPosten > *, body.hho-lohn #schichtende .ende-ruhig .hhoPosten > * { animation: none; }
@media (prefers-reduced-motion: reduce) { body.hho-lohn #schichtende .hhoPosten > * { animation: none !important; } }
/* HHO P5 (D12.3 Prio 1): Kellerwasser hinter dem HUD (Stufen 33/66/85 %), Spuren und Spritzer in der Zentrale (v2/hho_welt.js). */
body.hho-fx[data-hho-keller] #fahrt-ui::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; background: linear-gradient(to top, rgba(46,112,148,.5), rgba(58,130,165,.26) 70%, rgba(150,210,230,.08)); border-top: 3px solid rgba(215,245,255,.75); box-shadow: 0 -2px 0 rgba(40,90,120,.35); transition: height .6s ease; }
body.hho-fx[data-hho-keller="1"] #fahrt-ui::before { height: 8vh; }
body.hho-fx[data-hho-keller="2"] #fahrt-ui::before { height: 14vh; }
body.hho-fx[data-hho-keller="3"] #fahrt-ui::before { height: 21vh; background: linear-gradient(to top, rgba(36,96,132,.62), rgba(58,130,165,.32) 70%, rgba(150,210,230,.1)); }
body.hho-fx.hho-welle[data-hho-keller] #fahrt-ui::before { display: none; }   /* WOW 11.11.: das Spielbild zeichnet die bewegte Welle (hho_welt.js welle), der starre Balken bleibt nur als Rueckfall */
body.hho-fx [data-gk-gustav="zentrale"] > .hhoSpuren { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
body.hho-fx [data-gk-gustav="zentrale"] > .hhoSpuren svg { width: 100%; height: 100%; display: block; }
/* HHO P7 (D15.7): Deko-Reaktion auf Tipp (meta.js personalRaumSvg, hho.js). Stillstand bleibt der Normalzustand. */
body.hho-hud .hhoDeko, body.hho-lohn .hhoDeko { transform-box: fill-box; transform-origin: 50% 100%; cursor: pointer; }
body.hho-lohn .hhoDeko.hhoTap[data-hho-art="wippen"] { animation: hhoDekoWippen .6s cubic-bezier(.2,.8,.2,1); }
body.hho-lohn .hhoDeko.hhoTap[data-hho-art="klappern"] { animation: hhoDekoKlappern .4s linear; }
body.hho-lohn .hhoDeko.hhoTap[data-hho-art="glanz"] { animation: hhoDekoGlanz .7s ease-out; }
body.hho-lohn .hhoDeko.hhoTap[data-hho-art="leuchten"] { animation: hhoDekoLeuchten .9s ease-out; }
body.hho-lohn .hhoDeko.hhoTap[data-hho-art="dampf"] { animation: hhoDekoDampf .9s ease-out; }
@keyframes hhoDekoWippen { 0% { transform: rotate(0); } 30% { transform: rotate(-6deg) scaleY(.96); } 60% { transform: rotate(4deg); } 100% { transform: none; } }
@keyframes hhoDekoKlappern { 0%, 100% { transform: none; } 20% { transform: translateX(-2px) rotate(-1deg); } 40% { transform: translateX(2px) rotate(1deg); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } }
@keyframes hhoDekoGlanz { 0% { filter: brightness(1); } 25% { filter: brightness(1.55) saturate(1.2); } 100% { filter: brightness(1); } }
@keyframes hhoDekoLeuchten { 0% { filter: none; } 20% { filter: drop-shadow(0 0 10px #FFB347) brightness(1.3); } 100% { filter: none; } }
@keyframes hhoDekoDampf { 0% { transform: none; filter: none; } 30% { transform: translateY(-3px); filter: brightness(1.2) drop-shadow(0 -6px 6px rgba(255,255,255,.7)); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { body.hho-lohn .hhoDeko.hhoTap { animation: none !important; } }
body.hho-lohn #schichtende .ende-lohn > .hhoPosten { padding: 4px 0 0; font-size: 12px; max-width: 22em; }

/* ==========================================================================
   HHO Werkstatt-Sprache (Kevin 11.11.2026: „schoener und einheitlicher“, Zielbild 1).
   Eine Formensprache fuer das ganze Fahrt-HUD: cremefarbene Schilder mit Messingschrauben, Messuhren mit Messingrand,
   Kupfer fuer den Kraftschub, gleiche Kacheln fuer Werkzeuge und Koffer, eine dunkelbraune Kontur, eine Unterkante.
   Kein Text schwebt mehr ohne Untergrund ueber dem Spielbild. Ueberschreibt die HHO-P1-Optik (gleiche Spezifitaet, spaeter).
   ========================================================================== */
body.hho-hud { --ws-papier: #FFF3D6; --ws-papier2: #F2DDAE; --ws-tinte: #3E2E22; --ws-messing: #E2B95E; --ws-messing2: #9A6A26; --ws-kupfer: #C06A32; --ws-kupfer2: #7E3E1A; --ws-gold: #FFD35A; --ws-schatten: 0 3px 0 #3E2E22; }
/* Schild oben Mitte: Meter · Euro, darunter Rang mit Leiter, darunter Punkte - alles auf einem Schild */
body.hho-hud:not(#_):not(#_):not(#_) #hudTop { top: 6px; padding: 5px 22px 9px !important; gap: 0 10px !important; grid-template-areas: "meter euro" "nest nest" "pts pts" !important;
  background: radial-gradient(circle at 10px 50%, var(--ws-messing) 0 2.6px, var(--ws-messing2) 2.7px 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 10px) 50%, var(--ws-messing) 0 2.6px, var(--ws-messing2) 2.7px 4px, transparent 4.5px), linear-gradient(180deg, var(--ws-papier), var(--ws-papier2)) !important;
  border: 3px solid var(--ws-tinte) !important; border-radius: 14px !important; box-shadow: var(--ws-schatten), inset 0 2px 0 rgba(255,255,255,.7) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeter .val { color: var(--ws-tinte) !important; text-shadow: none !important; font-size: 25px !important; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoEuro { color: #A8700F !important; text-shadow: none !important; font-size: 21px !important; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoEuro::before { content: '·' !important; display: inline !important; color: var(--ws-tinte); margin-right: 6px; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; min-width: 170px; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber .lbl::after { font-size: 13px !important; color: var(--ws-tinte) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudSauber .val { font-size: 13px !important; color: #8B5510 !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop #hudSerieZiel { font: 800 11px/1.1 var(--gk-body, 'Nunito', system-ui, sans-serif) !important; color: #7A5A3A !important; text-shadow: none !important; }
/* HOTFIX 1.6.1 (Kevin 13.11. abends: "die Punkte muessen zurueck"): Punkte gross in der ersten Zeile neben Weite und Lohn, darunter wieder das Ziel
   ("Noch X Pkt. ..."), wie bis 1.5. Die Ausblendung vom 11.11. (e4d2e07b) ist aufgehoben. */
body.hho-hud:not(#_):not(#_):not(#_) #hudTop { grid-template-columns: auto auto auto !important; grid-template-areas: "meter euro pts" "nest nest nest" "ziel ziel ziel" !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister { grid-area: pts !important; display: flex !important; align-items: baseline; justify-self: start; margin: 0 !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister::before { content: '\00B7' !important; display: inline !important; position: static !important; width: auto !important; height: auto !important; margin: 0 6px 0 0 !important; background: none !important; color: var(--ws-tinte); font: 400 21px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister .val { color: #2F6B22 !important; text-shadow: none !important; font: 400 21px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeister .val::after { content: ' Pkt.' !important; display: inline !important; font: 800 11px/1 var(--gk-body, 'Nunito', system-ui, sans-serif) !important; color: var(--ws-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudZiel { grid-area: ziel !important; display: flex !important; flex-direction: column; align-items: center; margin-top: 17px !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudZiel :is(small, #ggRekord) { font: 800 11px/1.15 var(--gk-body, 'Nunito', system-ui, sans-serif) !important; color: #7A5A3A !important; text-shadow: none !important; white-space: nowrap; }
/* Messuhren: Messingrand, Papierzifferblatt, Namensschild darunter */
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrSvg { filter: drop-shadow(0 3px 0 var(--ws-tinte)); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrSvg .bahn { fill: var(--ws-papier); stroke: var(--ws-messing2); stroke-width: 4; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrZahl { color: var(--ws-tinte) !important; text-shadow: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) :is(.hhoUhrName, .hhoUhrZusatz, .hhoTrommelName) { color: var(--ws-tinte) !important; text-shadow: none !important; background: var(--ws-papier); border: 2px solid var(--ws-tinte); border-radius: 7px; padding: 2px 5px 1px; box-shadow: 0 2px 0 var(--ws-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrZusatz { margin-top: 3px; font-size: 11px !important; } body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr[data-art="rohr"] .hhoUhrZusatz { justify-self: end; }
/* Kraftschub: Kupferrand um den eigenen Lack */
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tRand { fill: var(--ws-kupfer); stroke: var(--ws-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSchatten { fill: var(--ws-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommelName { font-size: 11px !important; }
/* Koffer und Extra-Platz: dieselbe Papierkachel wie die Werkzeuge */
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat] { background: linear-gradient(180deg, var(--ws-papier), var(--ws-papier2)) !important; border: 3px solid var(--ws-tinte) !important; border-radius: 14px !important; box-shadow: var(--ws-schatten) !important; color: var(--ws-tinte) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat [data-vorrat] :is(.vorratIcon, .slotFenster, span, b) { color: var(--ws-tinte) !important; text-shadow: none !important; }
/* Werkzeugkacheln: alle gleich, die gewaehlte golden und angehoben */
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn { background: linear-gradient(180deg, var(--ws-papier), var(--ws-papier2)) !important; border: 3px solid var(--ws-tinte) !important; border-radius: 14px !important; box-shadow: var(--ws-schatten) !important; color: var(--ws-tinte) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn:is(.active, .aktiv, [aria-pressed="true"]) { background: linear-gradient(180deg, #FFE48A, var(--ws-gold)) !important; transform: translateY(-3px); box-shadow: 0 6px 0 var(--ws-tinte), 0 0 0 3px rgba(255,211,90,.45) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn .tName { color: var(--ws-tinte) !important; text-shadow: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn .tKey { background: var(--ws-tinte) !important; color: var(--ws-papier) !important; border: 2px solid var(--ws-papier) !important; }
/* Tagesziel links: Papiertag statt schwebender Zahl */
body.hho-hud:not(#_):not(#_):not(#_) #bestwertTakt { background: var(--ws-papier) !important; border: 2px solid var(--ws-tinte) !important; border-radius: 9px !important; box-shadow: 0 2px 0 var(--ws-tinte) !important; color: var(--ws-tinte) !important; }
/* HOTFIX 1.6.1: Punkte bleiben im Schild sichtbar (Ausblendung vom 11.11. entfernt) */
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhrZusatz:empty { display: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) #vorrat { top: 118px !important; }
body.hho-hud:not(#_):not(#_):not(#_) #hhoInstr { gap: 8px; }
body.hho-hud:not(#_):not(#_):not(#_) .hhoUhr { align-content: start; grid-auto-rows: min-content; }
/* Kopfknoepfe: die echten Kopfbilder aus dem Rohr statt Strich-Silhouetten (Knopf = was man im Rohr sieht) */
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn .hhoKopf { display: none !important; }
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn .toolHeadProjection { display: block !important; position: absolute; left: 0; right: 0; margin: 0 auto; top: 5px; width: 58px !important; height: 42px !important; transform: rotate(-10deg); object-fit: contain; background: none; opacity: 1 !important; filter: drop-shadow(.6px 0 0 #493D32) drop-shadow(-.6px 0 0 #493D32) drop-shadow(0 .6px 0 #493D32) drop-shadow(0 -.6px 0 #493D32) drop-shadow(0 2px 0 rgba(62,46,34,.5)); }   /* 12.11. (Kevin: Symbol passt nicht zum Kopf im Rohr): wieder der echte, ausgeruestete Kopf (main.js kopfBilder, knapp beschnitten) statt fester Comic-Bilder - je Werkzeug gibt es bis zu acht Kopfformen, ein festes Bild kann nur zu einer passen */
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn.active .toolHeadProjection { top: 3px; width: 66px !important; height: 46px !important; } body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn.empfohlen:not(.active) .toolHeadProjection { animation-name: hhoKopfZappeln; } @keyframes hhoKopfZappeln { 0%, 40%, 76%, 100% { transform: rotate(-10deg); } 8% { transform: translateX(-2px) rotate(-24deg) scale(1.06); } 16% { transform: translateX(2px) rotate(4deg) scale(1.06); } 24% { transform: translateX(-1.5px) rotate(-20deg) scale(1.03); } 32% { transform: translateX(1px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(-17deg) scale(1.16); } 57% { transform: translateY(-1px) rotate(-10deg) scale(1.08); } 65% { transform: translateY(-2px) rotate(-5deg) scale(1.12); } }   /* 12.11. abends: Mitte ueber left/right/margin statt translateX(-50%). Die alte Empfehlungs-Bewegung kopfZappeln setzt transform und warf die Zentrierung weg - das Kopfbild rutschte beim empfohlenen Kopf um die halbe Breite aus dem Knopf. Eigene Bewegung um die Grundneigung -10 Grad, kleiner skaliert, weil das echte Kopfbild den Knopf fast fuellt. */
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn.fehlkopf .toolHeadProjection { filter: grayscale(1) opacity(.6); } body.hho-hud.race-owned:not(#_):not(#_):not(#_) #tools .toolBtn.toolBtn .toolHeadProjection { top: 2px; width: 42px !important; height: 30px !important; }   /* 12.11. abends: im Rennen sind die Knoepfe 50x48 px (rennen.css) - das Kopfbild muss mitschrumpfen, sonst ragt es ueber den Knopf und ueber den Namen. Doppelte Klasse: schlaegt auch die Regel fuer den aktiven Knopf und die fuer flache Bildschirme. */
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn { background-image: linear-gradient(180deg, var(--ws-papier), var(--ws-papier2)) !important; background-repeat: no-repeat !important; background-position: 0 0 !important; background-size: 100% 100% !important; }
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn:is(.active, .aktiv, [aria-pressed="true"]) { background-image: linear-gradient(180deg, #FFE48A, var(--ws-gold)) !important; }
body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn.fehlkopf { filter: saturate(.3); }
@media (max-height: 360px) { body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn .toolHeadProjection { top: 4px; width: 48px !important; height: 34px !important; } body.hho-hud:not(#_):not(#_):not(#_) #tools .toolBtn.active .toolHeadProjection { top: 2px; width: 52px !important; height: 36px !important; } }
@media (max-height: 360px) {
  body.hho-hud:not(#_):not(#_):not(#_) #vorrat { top: 92px !important; transform: scale(.8) !important; transform-origin: top right !important; }
  body.hho-hud:not(#_):not(#_):not(#_) #hudTop { padding: 3px 18px 4px !important; }
  body.hho-hud:not(#_):not(#_):not(#_) #hudTop .hudMeter .val { font-size: 21px !important; }
  body.hho-hud:not(#_):not(#_):not(#_) .hhoEuro { font-size: 17px !important; }
  body.hho-hud:not(#_):not(#_):not(#_) #hudTop #hudSerieZiel { display: none !important; }
}
/* Kraftschub einheitlich in Kupfer (Zielbild 1); der eigene Lack bleibt der Maschine im Menue vorbehalten */
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tLack { fill: #D08A4E; stroke: var(--ws-tinte); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tRand { fill: var(--ws-kupfer2); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSeg { stroke: rgba(62,46,34,.35); }
body.hho-hud:not(#_):not(#_):not(#_) .hhoTrommel .tSeg.voll { stroke: #FFE08A; }

/* ==========================================================================
   HHO Werkstatt-Sprache: Lohntuete (Zielbild 3) - Papierzettel mit Stempel BEZAHLT, Posten mit Punktlinien,
   gruener Kaufknopf fuer den naechsten Ausbau. Nur mit hho.lohntuete.
   ========================================================================== */
body.hho-lohn #schichtende .ende-lohn { position: relative; padding: 14px 18px 10px !important; background: linear-gradient(180deg, #FFF8E4, #F6E7C1) !important; border-radius: 4px 4px 10px 10px; box-shadow: inset 0 -3px 0 rgba(62,46,34,.18); transform: rotate(-.6deg);
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) 0 0 / 12px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 0, transparent 97%, #000) 0 0 / 12px 100% repeat-x; }
body.hho-lohn #schichtende .hhoBezahlt { position: absolute; top: 12px; right: 10px; padding: 3px 9px 2px; border: 3px solid #B5322A; border-radius: 7px; color: #B5322A; font: 400 17px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .06em; transform: rotate(-6deg); opacity: .88; mix-blend-mode: multiply; animation: hhoBezahlt .22s cubic-bezier(.2,.8,.2,1) 1.1s both; }
@keyframes hhoBezahlt { from { transform: rotate(-6deg) scale(1.7); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: .88; } } @keyframes hhoEtikettWeg { to { opacity: 0; } }
body.hho-lohn #schichtende .ende-sofort .hhoBezahlt { animation: none; } body.hho-lohn #schichtende .ende-sofort .hhoBezahlt ~ .ende-lohn-label { animation: none; opacity: 0; }
body.hho-lohn #schichtende .hhoPosten { width: 100%; font: 700 13px/1.25 var(--gk-body, 'Nunito', system-ui, sans-serif) !important; border-top: 0 !important; }
body.hho-lohn #schichtende .hhoPosten > div > span { display: flex; flex: 1; align-items: baseline; min-width: 0; }
body.hho-lohn #schichtende .hhoPosten > div > span::after { content: ''; flex: 1; margin: 0 6px; border-bottom: 2px dotted rgba(62,46,34,.45); transform: translateY(-3px); }
body.hho-lohn #schichtende .ende-handgriff[data-bereit="true"] .ende-handgriff-cta { background: linear-gradient(180deg, #8FD86B, #4FA236) !important; color: #fff !important; border: 3px solid #3E2E22 !important; border-radius: 12px !important; box-shadow: 0 3px 0 #3E2E22 !important; font-weight: 900; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) { body.hho-lohn #schichtende .hhoBezahlt { animation: none !important; } body.hho-lohn #schichtende .hhoBezahlt ~ .ende-lohn-label { animation: none !important; opacity: 0; } }
body.hho-lohn #schichtende .hhoBezahlt { position: relative; top: auto; right: auto; grid-column: 1; grid-row: 1; justify-self: start; align-self: center; margin: -4px 0 -6px; padding: 3px 8px 2px; font-size: 15px; z-index: 1; } body.hho-lohn #schichtende .hhoBezahlt ~ .ende-lohn-label { animation: hhoEtikettWeg .16s linear 1.1s both; } @media (max-height: 500px) { body.hho-lohn #schichtende .hhoBezahlt { margin: -2px 0 -3px; padding: 2px 6px 1px; border-width: 2px; border-radius: 6px; font-size: 13px; } }   /* 12.11.: Der Stempel landet auf dem Platz des Etiketts 'DEIN SCHICHTLOHN', das Etikett blendet im selben Moment aus. Vorher lag er in der zu engen Luecke und schnitt je nach Bildgroesse das Etikett oder das Euro-Zeichen (36 Messfaelle, audit/lohn_mess.mjs). Keine zusaetzliche Zeile, Papier bleibt gleich hoch. */
@media (max-height: 380px) { body.hho-lohn #schichtende .ende-lohn { padding: 12px 16px 6px !important; } body.hho-lohn #schichtende .ende-bericht-kopf > .ende-handgriff { margin-top: 4px; padding: 5px 9px; gap: 3px; } body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht { padding-top: 5px; } body.hho-lohn #schichtende.peak-end.mk21-ende #seKisteInfo { text-wrap: balance; } } @media (max-height: 500px) { body.hho-lohn #schichtende .ende-handgriff:is([data-art="ausbau"][data-bereit="true"], [data-art="maschine"][data-bereit="true"], [data-hho-ausbau]) .ende-handgriff-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; } body.hho-lohn #schichtende .ende-handgriff:is([data-art="ausbau"][data-bereit="true"], [data-art="maschine"][data-bereit="true"], [data-hho-ausbau]) .ende-handgriff-text > :is(small, strong) { grid-column: 1; } body.hho-lohn #schichtende .ende-handgriff:is([data-art="ausbau"][data-bereit="true"], [data-art="maschine"][data-bereit="true"], [data-hho-ausbau]) .ende-handgriff-cta { grid-column: 2; grid-row: 1 / 3; margin-top: 0; align-self: center; } } @media (max-height: 500px) and (max-width: 780px) { body.hho-lohn #schichtende .ende-handgriff:is([data-art="ausbau"][data-bereit="true"], [data-art="maschine"][data-bereit="true"], [data-hho-ausbau]) .ende-handgriff-text > small { grid-column: 1 / -1; } body.hho-lohn #schichtende .ende-handgriff:is([data-art="ausbau"][data-bereit="true"], [data-art="maschine"][data-bereit="true"], [data-hho-ausbau]) .ende-handgriff-cta { grid-row: 2; } } @media (max-height: 380px) and (max-width: 700px) { body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-kopf > .ende-lohn { gap: 2px 10px; } body.hho-lohn #schichtende.mk21-ende.v11-peak .peak-best { font-size: 11px; } body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-lohn .ende-meter { font-size: 12px; } body.hho-lohn #schichtende .ende-lohn > .hhoPosten { font-size: 11px !important; margin-top: 2px; } body.hho-lohn #schichtende .ende-handgriff:is([data-art="ausbau"][data-bereit="true"], [data-art="maschine"][data-bereit="true"], [data-hho-ausbau]) .ende-handgriff-cta { padding: 0 10px; font-size: 15px; } }   /* 12.11.: Auf Handy-Bildschirmen schnitt der Balken der Feierabend-Kiste den Knopf AUSBAUEN an (844x330: 6 px, 640x360: 19 px, 844x390 mit Fund-Zeile: halber Knopf). Jetzt steht der Knopf bis 500 px Hoehe neben dem Text statt darunter, bis 380 px sind zusaetzlich die Abstaende gestrafft; gemessen mit audit/lohn_mess.mjs in 844x330, 640x360, 667x375, 700-800x360. */
body.hho-lohn #schichtende .ende-lohn > .hhoPosten { grid-column: 1 / -1; grid-row: 3; display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 26px; padding: 6px 0 0 !important; }
body.hho-lohn #schichtende .ende-bericht-kopf > .ende-handgriff { margin-top: 8px; }
body.hho-lohn #schichtende .ende-lohn > .hhoPosten { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; padding: 4px 0 0 !important; min-width: 210px; }
body.hho-lohn #schichtende .ende-lohn > .hhoPosten { grid-column: 1; grid-row: 3; margin-top: 12px; min-width: 0; width: 100%; font-size: 12px !important; }
body.hho-lohn #schichtende .ende-lohn > .hhoPosten { grid-column: 2 !important; grid-row: auto !important; display: block !important; margin-top: 6px; width: 100%; min-width: 200px; }
body.hho-lohn #schichtende .ende-lohn > .hhoPosten > div { margin: 1px 0; }
/* HHO Werkstatt-Sprache: ROHR FREI als Stempel (Zielbild 2), Effektschicht hho_fx.js */
body.hho-fx #fahrt-ui .hhoStempelFrei { position: absolute; left: 50%; top: 96px; z-index: 6; opacity: 0; pointer-events: none; padding: 6px 20px 5px; border: 4px solid #2F6B22; border-radius: 12px; background: linear-gradient(180deg, #FFF6D8, #F1E2B0); color: #2F6B22; font: 400 34px/1 var(--gk-display, 'Gustav Display', 'Arial Black', sans-serif); letter-spacing: .04em; white-space: nowrap; box-shadow: 0 4px 0 #3E2E22, inset 0 0 0 3px #FFF6D8, inset 0 0 0 5px #6CC24A; transform: translate(-50%,0) rotate(-6deg); }
body.hho-fx #fahrt-ui .hhoStempelFrei[data-gross="false"] { font-size: 24px; padding: 4px 14px 3px; }
@media (max-height: 360px) { body.hho-fx #fahrt-ui .hhoStempelFrei { top: 74px; font-size: 26px; } }
/* HHO Werkstatt-Sprache: Zentrale als Buehne (Zielbild 4) - Werkstattmatte, Lichtkegel, groesserer Gustav. Nur Darstellung. */
body.hho-hud .gkCentral .gkHubHero { background: radial-gradient(ellipse 60% 55% at 52% 52%, rgba(255,225,150,.55), rgba(255,225,150,.12) 60%, transparent 75%) !important; }
body.hho-hud .gkCentral .gkHubHero::before { content: ''; position: absolute; left: 7%; right: 3%; bottom: 34px; height: 15%; border: 3px solid #3E2E22; border-radius: 16px; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px), linear-gradient(180deg, #3A3836, #23211F);
  box-shadow: 0 4px 0 #3E2E22, inset 0 0 0 3px #D9A93A; transform: perspective(500px) rotateX(38deg); transform-origin: 50% 100%; }
body.hho-hud .gkCentral .gkHubHero::before { bottom: 66px; height: 13%; }
/* D15.11 Nr. 16 und 17: Fund auf der Matte, Kalles Zettel mit Klecks */
body.hho-hud .gkCentral .gkHubHero > .hhoFundAblage { position: absolute; left: 63%; bottom: 74px; width: 13%; aspect-ratio: 1; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(62,46,34,.45)); }
body.hho-hud .gkCentral .gkHubHero > .hhoFundAblage img { width: 100%; height: 100%; object-fit: contain; }
body.hho-hud .morgenkarte .hhoKalleZettel { position: relative; display: inline-block; padding: 5px 12px 6px 10px; background: #FFFBEA; border: 2px solid #3E2E22; border-radius: 3px; transform: rotate(-1.5deg); box-shadow: 0 2px 0 #3E2E22; font-style: italic;
  background-image: radial-gradient(circle at 92% 30%, rgba(62,46,34,.55) 0 4px, transparent 5px), radial-gradient(circle at 95% 22%, rgba(62,46,34,.4) 0 2px, transparent 3px); }

/* ===== GAMEPLAY-PRO 12.11.2026: drei Bloecke fuer die Spuren. Jede Spur schreibt NUR zwischen ihre eigene ANFANG- und ENDE-Zeile. ===== */
/* GP-S1 ANFANG (Spur 1: Schicht und Flug) */
/* Spannungswelle 13.11.: Eintritt in die Hauptphase = der Kraftschub-Rand zieht einmal an (zwei Laeufe, dann ruhig halb sichtbar), Ende = er blendet ueber die vorhandene Uebergangszeit aus. Nur transform/opacity, nie ueber dem HUD (erste Kinder), Kraftschub-Phasen gehen vor, wenig Bewegung blendet .hhoRand ohnehin aus. */
body.hho-fx #fahrt-ui[data-gp-welle="an"]:not([data-hho-phase="lauf"]):not([data-hho-phase="warnung"]) .hhoRand { opacity: .5; transition: opacity .2s linear; animation: hhoRandLauf .45s linear 2; }
body.hho-fx #fahrt-ui[data-gp-welle="an"]:not([data-hho-phase="lauf"]):not([data-hho-phase="warnung"]) .hhoRandU { animation-name: hhoRandLaufU; }
/* GP-S1 ENDE */
/* Trennzeile A: hier nichts einfuegen */
/* Trennzeile B: hier nichts einfuegen */
/* Trennzeile C: hier nichts einfuegen */
/* GP-S4 ANFANG (Spur 4: Oberflaeche) */
/* [b1] */
/* S4-1 iPad-Werkstatt (13.11.): die Kopf-Zeilen folgen der Fensterhoehe statt nur der Breite - alle drei Reihen liegen im Paneel, nichts wird unten abgeschnitten. */
@media (min-width:1000px) and (min-height:700px) {
  .gkStage[data-gk-ansicht='koepfe'] .gkGrid { grid-auto-rows:minmax(0,min(calc(16 * var(--su)),19dvh)); }
  .gkStage[data-gk-ansicht='koepfe'] .gkGrid .gkTile { width:min(max(96px,calc(8 * var(--su))),12dvh); height:min(max(96px,calc(8 * var(--su))),12dvh); }
}
/* [/b1] */
/* [b2] */
/* S4-2 Mikro-Feedback (13.11.): Stauchen ueber die Eigenschaft scale (Klasse gDruck setzt hud.js beim Druck - auf Touch schluckt preventDefault :active), federndes Loesen mit Ueberschwinger, kraeftiger Schlag beim Start-Knopf. Nur scale/opacity, nichts je Bild. */
#tools .toolBtn { transition:border-color .12s,transform .12s,box-shadow .12s,scale .3s cubic-bezier(.3,1.75,.5,1); }
#fahrt-ui :is(#fixerBtn,#muteBtn,#hilfeBtn,#fahrt-zentrale,#slotBtn,#hhoPauseBtn,#vorrat [data-vorrat]),#zweiteChance button,.hhoPauseKarte button { transition:scale .3s cubic-bezier(.3,1.75,.5,1); }
#tools .toolBtn:not(:disabled):is(:active,.gDruck) { scale:.88; transition-duration:.06s; }
#fahrt-ui :is(#fixerBtn,#muteBtn,#hilfeBtn,#fahrt-zentrale,#slotBtn,#hhoPauseBtn,#vorrat [data-vorrat]):not(:disabled):is(:active,.gDruck),#zweiteChance button:not(:disabled):is(:active,.gDruck),.hhoPauseKarte button:not(:disabled):is(:active,.gDruck) { scale:.92; transition-duration:.06s; }
#gkMetaRoot :is(.gkBtn,.gkIconBtn,.gkRank,.gkTab,.gkGridCell,.gkPrice,.gkSkin,.gkSlot,.gkRailBtn,.gkAusbauTab,.gkGeraetKarte) { transition:transform .1s ease-out,box-shadow .1s ease-out,filter .1s ease-out,scale .34s cubic-bezier(.3,1.75,.5,1); }
#gkMetaRoot :is(.gkBtn,.gkIconBtn,.gkRank,.gkTab,.gkGridCell,.gkPrice,.gkSkin,.gkSlot,.gkRailBtn,.gkAusbauTab,.gkGeraetKarte):not(:disabled):not(.isOff):is(:active,.gDruck) { scale:.94; transition-duration:.06s; }
#gkMetaRoot .gkSideBtn .tile { transition:transform .1s ease-out,filter .1s ease-out,scale .34s cubic-bezier(.3,1.75,.5,1); }
#gkMetaRoot .gkSideBtn:not(:disabled):is(:active,.gDruck) .tile { scale:.9; transition-duration:.06s; }
#gkMetaRoot .gkBtn:is(.gkHubShift,[data-gk-action="shift"]) { transition:transform .1s ease-out,box-shadow .1s ease-out,filter .1s ease-out,scale .44s cubic-bezier(.3,2.2,.45,1); }
#gkMetaRoot .gkBtn:is(.gkHubShift,[data-gk-action="shift"]):not(:disabled):not(.isOff):is(:active,.gDruck) { scale:.88; transition-duration:.05s; }
.gkCard.isKauf .l { animation:gkStufeSprung .6s cubic-bezier(.2,1.6,.4,1); }
.gkCard.isKauf::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 50% 45%,rgba(255,243,194,.95),rgba(255,226,122,.35) 55%,transparent 78%); animation:gkKaufBlitz .6s ease-out both; }
@keyframes gkStufeSprung { 0% { transform:scale(1); } 28% { transform:translateY(-.3em) scale(1.55); } 62% { transform:scale(.9); } 100% { transform:none; } }
@keyframes gkKaufBlitz { 0% { opacity:.95; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  #tools .toolBtn,#fahrt-ui :is(#fixerBtn,#muteBtn,#hilfeBtn,#fahrt-zentrale,#slotBtn,#hhoPauseBtn,#vorrat [data-vorrat]),#zweiteChance button,.hhoPauseKarte button,#gkMetaRoot :is(.gkBtn,.gkIconBtn,.gkRank,.gkTab,.gkGridCell,.gkPrice,.gkSkin,.gkSlot,.gkRailBtn,.gkAusbauTab,.gkGeraetKarte),#gkMetaRoot .gkSideBtn .tile,#gkMetaRoot .gkBtn:is(.gkHubShift,[data-gk-action="shift"]) { transition:none; }
  #tools .toolBtn:not(:disabled):is(:active,.gDruck) { scale:.97; }
  #fahrt-ui :is(#fixerBtn,#muteBtn,#hilfeBtn,#fahrt-zentrale,#slotBtn,#hhoPauseBtn,#vorrat [data-vorrat]):not(:disabled):is(:active,.gDruck),#zweiteChance button:not(:disabled):is(:active,.gDruck),.hhoPauseKarte button:not(:disabled):is(:active,.gDruck) { scale:.97; }
  #gkMetaRoot :is(.gkBtn,.gkIconBtn,.gkRank,.gkTab,.gkGridCell,.gkPrice,.gkSkin,.gkSlot,.gkRailBtn,.gkAusbauTab,.gkGeraetKarte):not(:disabled):not(.isOff):is(:active,.gDruck) { scale:.97; }
  #gkMetaRoot .gkSideBtn:not(:disabled):is(:active,.gDruck) .tile { scale:.97; }
  #gkMetaRoot .gkBtn:is(.gkHubShift,[data-gk-action="shift"]):not(:disabled):not(.isOff):is(:active,.gDruck) { scale:.97; }
  .gkCard.isKauf .l { animation:none; } .gkCard.isKauf::after { content:none; }
}
body[data-hho-bewegung="wenig"] .gkCard.isKauf .l { animation:none; } body[data-hho-bewegung="wenig"] .gkCard.isKauf::after { content:none; }
/* [/b2] */
/* [b3] */
/* S4-3 HUD-Klarheit in der Fahrt (13.11.): keine Schrift unter 12 px, Kernwerte (Weite, Lohn in Euro, Keller-/Rohr-Uhren) kraeftiger, Nebensaechliches blasser. Die HHO-Regeln nutzen :not(#_) dreifach - hier steht es vierfach, darum gewinnt dieser Block auch gegen deren !important. */
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) #hudTop #hudSerieZiel,#fahrt-ui:not(#_):not(#_):not(#_):not(#_) :is(.hhoUhrZusatz,.hhoTrommelName,.toolBtn.active .tName,.toolBtn .tKey,#hudEtappe,#geistHand .ghText small) { font-size:12px!important; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) #hudTop .lbl { font-size:12px!important; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) #hudTop .hudSauber .lbl { visibility:hidden; font-size:0!important; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) #hudTop .hudSauber .lbl::after { visibility:visible; }
#fahrt-ui #buildTagGame:not(#_) { display:none; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) .hhoEuro { font-size:25px!important; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) .hhoEuro i { font-size:19px!important; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) .hhoUhrZahl { font-size:20px; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) .hhoUhrZusatz { opacity:.82; }
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) #vorrat [data-vorrat][data-sorte=""] { opacity:.72; }
@media (hover:none) and (pointer:coarse) { #fahrt-ui:not(#_):not(#_):not(#_):not(#_) .toolBtn .tKey { display:none!important; } }
@media (max-height:360px) {
  #fahrt-ui:not(#_):not(#_):not(#_):not(#_) .hhoEuro { font-size:21px!important; }
  #fahrt-ui:not(#_):not(#_):not(#_):not(#_) .hhoEuro i { font-size:16px!important; }
  #fahrt-ui:not(#_):not(#_):not(#_):not(#_) #vorrat { transform:none!important; }
}
#fahrt-ui:not(#_):not(#_):not(#_):not(#_) .toolBtn.active .tName { left:-6px!important; right:-6px!important; letter-spacing:-.4px!important; text-overflow:clip!important; }
@media (max-height:360px) { #fahrt-ui:not(#_):not(#_):not(#_):not(#_) .toolBtn.active .tName { display:none!important; } }
/* [/b3] */
/* GP-S4 ENDE */
/* Trennzeile D: hier nichts einfuegen */
/* Trennzeile E: hier nichts einfuegen */
/* Trennzeile F: hier nichts einfuegen */
/* GP-S5 ANFANG (Spur 5: Lohntuete und Bindung) */
/* Reihenfolge im Karten-Inhalt: Stempelkarte, Cliffhanger, Fachfrage, Rest - die Fachfrage drueckt nichts mehr weg */
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt>.ende-dieb{order:-3}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt>.peak-tagesbonus{order:-2}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt>.ende-handgriff{order:-1;margin:0}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt>.hhoFachfrage{order:1;margin:0}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt>.ende-zettel{order:2}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt>:is(.peak-morgen,.peak-grund,.peak-details){order:3}
/* Stempelkarte: drei grosse Felder, die Stahlkiste als Ziel */
html body.hho-lohn #schichtende .gp5-stempelkarte{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 8px;padding:7px 10px 8px;border-left-width:4px;border-radius:8px;background:linear-gradient(#fff6d8,#ffe9ac)}
html body.hho-lohn #schichtende .gp5-stempelkarte>strong{font:900 12px/1.15 system-ui;letter-spacing:.05em;text-transform:uppercase;color:#5a3b12}
html body.hho-lohn #schichtende .gp5-stempelkarte>b{font:900 17px/1 system-ui;color:#5a3b12}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste{align-items:center;gap:7px;margin:0}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i{position:relative;flex:1;height:32px;display:grid;place-items:center;border:2px dashed #b39a64;border-radius:9px;background:#efe0b6;color:#a38b57;font:900 16px/1 system-ui;font-style:normal}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i.gebucht::after{content:'✓';position:absolute;inset:-2px;display:grid;place-items:center;border:2px solid #8d5410;border-radius:9px;background:linear-gradient(#ffe48a,#e0a02d);box-shadow:inset 0 2px #fff1ac;color:#4a2a06;font:900 20px/1 system-ui}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i.gp5-neu::after{animation:gp5-stempel .42s cubic-bezier(.2,1.4,.4,1) 1.5s backwards}
html body.hho-lohn #schichtende .gp5-kiste{flex:none;width:44px;height:36px;object-fit:contain;opacity:.62}
html body.hho-lohn #schichtende .gp5-kiste[data-voll="true"]{opacity:1;animation:gp5-kiste .5s ease-out 1.5s backwards}
html body.hho-lohn #schichtende .gp5-stempelkarte>small{font-size:12px}
@keyframes gp5-stempel{0%{opacity:0;transform:scale(2.3) rotate(-9deg)}55%{opacity:1;transform:scale(.9) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes gp5-kiste{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:none}}
/* Cliffhanger: Balken startet beim Kontostand vor der Schicht, der Zuwachs dieser Schicht fuellt sich leuchtend nach */
html body.hho-lohn #schichtende .gp5-huelle{position:relative;display:block;flex:0 0 100%;height:9px;border:1px solid #aa7b3e;border-radius:5px;background:#e0c99a;overflow:hidden}
html body.hho-lohn #schichtende .gp5-huelle>progress{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
html body.hho-lohn #schichtende .gp5-alt,html body.hho-lohn #schichtende .gp5-zuwachs{position:absolute;top:0;bottom:0;left:0}
html body.hho-lohn #schichtende .gp5-alt{background:linear-gradient(90deg,#b67424,#f4b82d)}
html body.hho-lohn #schichtende .gp5-zuwachs{background:linear-gradient(90deg,#8fd86b,#4fa236);transform-origin:left center;animation:gp5-zuwachs .7s ease-out 1.1s backwards}
@keyframes gp5-zuwachs{from{transform:scaleX(0)}}
/* Weiter-Knopf: gross, pulsiert (nur scale), darunter die ehrliche Bonuszeile */
html body.hho-lohn #schichtende.peak-end.mk21-ende>#seNeu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;line-height:1.05;animation:apexHoch .42s cubic-bezier(.2,.9,.25,1) .12s both,gp5-puls 1.7s ease-in-out .9s infinite}
html body.hho-lohn #schichtende.peak-end.mk21-ende>#seNeu .gp5-bonuszeile{display:block;font:900 12px/1.1 system-ui;letter-spacing:.06em;color:#4a2f0c}
@keyframes gp5-puls{50%{transform:scale(1.035)}}
html body.hho-lohn #schichtende.peak-end.mk21-ende:has(.ende-ruhig)>#seNeu{animation:none}
@media(prefers-reduced-motion:reduce){html body.hho-lohn #schichtende.peak-end.mk21-ende>#seNeu,html body.hho-lohn #schichtende .gp5-zuwachs,html body.hho-lohn #schichtende .gp5-kiste,html body.hho-lohn #schichtende .gp5-sprung .abschluss-zahl,html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i::after{animation:none!important}}
/* Nachpruefung: HHO-Einstellung 'wenig' (.ende-ruhig) schaltet Stempel, Kiste, Zuwachs und Sprung ab wie die Systemeinstellung; Lehre-Zeile; MORGEN-Pille ersetzt die doppelte Morgen-Kistenzeile */
html body.hho-lohn #schichtende .ende-ruhig :is(.gp5-zuwachs,.gp5-kiste),html body.hho-lohn #schichtende .ende-ruhig .gp5-stempelkarte .peak-bonusleiste i::after,html body.hho-lohn #schichtende .ende-ruhig.gp5-sprung .abschluss-zahl{animation:none!important}
html body.hho-lohn #schichtende .gp5-lehre{margin:0;font:800 12px/1.25 system-ui;color:#4a2f0c;text-align:center}
html body.hho-lohn #schichtende .gp5-stempelkarte:has(>.gp5-morgen)>small{display:none}
html body.hho-lohn #schichtende.mk21-ende :is(.ende-lohn-label,.seKisteLbl,#seKisteInfo,#seKisteZeile){font-size:12px;letter-spacing:.06em}
html body.hho-lohn #schichtende.mk21-ende .ende-handgriff .ende-handgriff-text>small{font-size:12px}
html body.hho-lohn #schichtende.mk21-ende :is(.peak-grund,.peak-details summary,.peak-details summary *,.ende-auftrag,.ende-serie-lbl,.ende-zettel-zeile small){font-size:12px}   /* Runde 3: die fuenf 11-px-Texte auf iPad-Hoehe */
/* 5B: Schluss-Sprung der Lohnzahl (einmal, nur transform) und MORGEN-Feld (Kopfzeile der Stempelkarte, sonst eigene Zeile hinter dem Cliffhanger) */
html body.hho-lohn #schichtende .gp5-sprung .abschluss-zahl{transform-origin:left center;animation:gp5-sprung .36s cubic-bezier(.2,1.6,.4,1)}
@keyframes gp5-sprung{0%{transform:scale(1.18)}100%{transform:none}}
html body.hho-lohn #schichtende .gp5-morgen{font:900 12px/1.2 system-ui;font-style:normal;letter-spacing:.05em;white-space:nowrap;color:#ffe9ac;background:#5a3b12;border-radius:9px;padding:2px 8px}
html body.hho-lohn #schichtende .gp5-stempelkarte:has(>.gp5-morgen){grid-template-columns:minmax(0,1fr) auto auto}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt>.gp5-morgen{order:0;align-self:flex-end;margin:0}
/* Niedrige Bilder: alles Wichtige ohne Scrollen im Bild */
@media(max-height:500px){
html body.hho-lohn #schichtende .gp5-stempelkarte{padding:5px 8px 6px;gap:3px 8px}
html body.hho-lohn #schichtende .gp5-stempelkarte>strong{font-size:12px}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i{height:26px}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i.gebucht::after{font-size:17px}
html body.hho-lohn #schichtende .gp5-kiste{width:38px;height:30px}
html body.hho-lohn #schichtende .gp5-stempelkarte>small{display:none}
html body.hho-lohn #schichtende .gp5-stempelkarte:has(>.gp5-morgen)>strong{letter-spacing:.02em}
html body.hho-lohn #schichtende .gp5-morgen{font-size:12px;letter-spacing:.02em;padding:2px 6px}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt{gap:4px}html body.hho-lohn #schichtende.mk21-ende .ende-handgriff .ende-handgriff-cta{min-height:44px!important}html body.hho-lohn #schichtende.mk21-ende .ende-bericht-inhalt{-webkit-mask-image:linear-gradient(#000 calc(100% - 7px),transparent);mask-image:linear-gradient(#000 calc(100% - 7px),transparent)}   /* Runde 3: Lehre-Zeile oben beim Lohn macht die Karte 15 px hoeher - Abstaende und Ausblendung enger, der Ausbau bleibt ganz im Bild */
}
@media(max-height:420px){
html body.hho-lohn #schichtende.mk21-ende .ende-handgriff .ende-handgriff-text>small{display:none}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-handgriff{padding:3px 8px}
html body.hho-lohn #schichtende.mk21-ende .ende-handgriff .ende-handgriff-cta{min-height:32px!important;padding:2px 10px!important;font-size:14px!important}
html body.hho-lohn #schichtende.mk21-ende .ende-handgriff .ende-handgriff-text>strong{font-size:14px}
html body.hho-lohn #schichtende.mk21-ende .ende-handgriff .ende-handgriff-text{gap:0}
html body.hho-lohn #schichtende .ende-lohn>.hhoPosten{font-size:12px!important;line-height:1.1!important;padding-top:2px!important}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-lohn :is(.ende-meter,.ende-meter *,.peak-best){font-size:12px;line-height:1.15}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .peak-fund{display:none}
html body.hho-lohn #schichtende .ende-lohn{padding:8px 14px 3px!important;gap:2px 12px}
html body.hho-lohn #schichtende.peak-end.mk21-ende #seKisteInfo{display:none}
html body.hho-lohn #schichtende.mk21-ende .ende-bericht-inhalt{-webkit-mask-image:linear-gradient(#000 calc(100% - 7px),transparent);mask-image:linear-gradient(#000 calc(100% - 7px),transparent)}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt{gap:4px}
html body.hho-lohn #schichtende .gp5-stempelkarte{padding:4px 8px 5px}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i{height:24px}
}
@media(max-height:340px){
html body.hho-lohn #schichtende .gp5-stempelkarte{padding:4px 8px 5px;gap:2px 8px}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i{height:22px}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i.gebucht::after{font-size:15px}
html body.hho-lohn #schichtende .gp5-kiste{width:32px;height:26px}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-bericht-inhalt{gap:3px}
html body.hho-lohn #schichtende.mk21-ende.v11-peak .ende-lohn .abschluss-zahl{font-size:min(32px,calc(115cqw / var(--lohn-zeichen,8)));line-height:1}
html body.hho-lohn #schichtende .hhoBezahlt{margin:-2px 0 -8px;padding:1px 6px 0;font-size:12px}
html body.hho-lohn #schichtende .gp5-stempelkarte{padding:3px 8px 4px}
html body.hho-lohn #schichtende .gp5-stempelkarte .peak-bonusleiste i{height:20px}
}
/* GP-S5 ENDE */