/* Stadt (0.19): Hauptbildschirm */
.stadt { display: grid; gap: 8px; }
.stadt-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stadt-uhr { font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stadt-wetter-text { margin-left: auto; }
.stadt-laufzettel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--indigo, #4f46e5); border-radius: var(--radius-k, 12px); background: var(--flaeche, #fff); }
.stadt-lz-icon { font-size: 1.3rem; } .stadt-lz-text { flex: 1; font-weight: 700; line-height: 1.3; }
.stadt-bild svg { width: 100%; height: auto; display: block; border-radius: 16px; touch-action: manipulation; box-shadow: 0 4px 18px rgba(15, 23, 42, .12); }
.stadt-ort { cursor: pointer; outline: none; }
.stadt-ort:hover, .stadt-ort:focus-visible { filter: brightness(1.06) drop-shadow(0 0 3px #6366f1); }
.stadt-panel { padding: 12px; border-radius: var(--radius-k, 12px); background: var(--flaeche2, #f3f4f6); min-height: 80px; }
.stadt-panel h2 { margin: 0 0 4px; font-size: 1.1rem; } .stadt-panel h2:empty { display: none; }
.stadt-aktionen { display: grid; gap: 8px; margin-top: 6px; }
.stadt-akt { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--flaeche, #fff); }
.stadt-akt > div { display: grid; gap: 2px; } .stadt-akt.gesperrt { opacity: .6; }
.stadt-ausruf { pointer-events: none; animation: stadt-hupf 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes stadt-hupf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Spielfigur */
#stadt-figur.laeuft .sf-bein-l { animation: sf-bein .36s linear infinite; transform-box: fill-box; transform-origin: center top; }
#stadt-figur.laeuft .sf-bein-r { animation: sf-bein .36s linear infinite reverse; transform-box: fill-box; transform-origin: center top; }
#stadt-figur.laeuft .sf { animation: sf-wipp .36s ease-in-out infinite; transform-box: fill-box; }
@keyframes sf-bein { 0% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } 100% { transform: rotate(18deg); } }
@keyframes sf-wipp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.stadt-npc .sf-bein-l { animation: sf-bein .5s linear infinite; transform-box: fill-box; transform-origin: center top; }
.stadt-npc .sf-bein-r { animation: sf-bein .5s linear infinite reverse; transform-box: fill-box; transform-origin: center top; }
/* Leben */
.stadt-rauch circle { animation: stadt-rauch 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; opacity: .6; }
.stadt-rauch circle:nth-child(2) { animation-delay: 1s; } .stadt-rauch circle:nth-child(3) { animation-delay: 2s; }
@keyframes stadt-rauch { 0% { transform: translate(0, 0) scale(.6); opacity: .7; } 100% { transform: translate(4px, -14px) scale(1.6); opacity: 0; } }
.stadt-ente { animation: stadt-ente 7s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes stadt-ente { 0% { transform: translateX(-6px); } 100% { transform: translateX(8px); } }
.stadt-wasser { animation: stadt-wasser 4s ease-in-out infinite alternate; } @keyframes stadt-wasser { to { opacity: .82; } }
/* Tageszeit */
.stadt-karte .stadt-fenster { transition: fill .6s; }
.stadt-karte.tz-abend .stadt-fenster { fill: #fde68a; }
.stadt-karte.tz-nacht .stadt-fenster { fill: #fcd34d; }
.stadt-karte.tz-nacht .stadt-licht, .stadt-karte.tz-abend .stadt-licht { fill: #fef08a; filter: drop-shadow(0 0 3px #fde047); }
.stadt-karte.tz-morgen { filter: saturate(1.05) sepia(.08); }
/* Jahreszeit */
.stadt-karte.jz-herbst .stadt-krone { fill: #d97706; } .stadt-karte.jz-herbst .stadt-krone:nth-of-type(3n) { fill: #b45309; } .stadt-karte.jz-herbst .stadt-krone:nth-of-type(3n+1) { fill: #ca8a04; }
.stadt-karte.jz-winter .stadt-krone { fill: #e5e7eb; } .stadt-karte.jz-winter .stadt-dach { fill: #f8fafc; }
.stadt-karte.jz-fruehling .stadt-krone:nth-of-type(4n) { fill: #f9a8d4; }
.stadt-karte.jz-sommer .stadt-krone { fill: #16a34a; }
/* Wetter */
.stadt-karte.wetter-nebel #stadt-wetter { filter: blur(0); }
.stadt-karte.wetter-nebel .stadt-nacht { fill: #e5e7eb; opacity: .28; }
.wetter-teil.regen { stroke: #93c5fd; stroke-width: 1.2; stroke-linecap: round; opacity: .7; animation: wetter-regen 0.9s linear infinite; }
.wetter-teil.schnee { fill: #fff; opacity: .9; animation: wetter-schnee 3s linear infinite; }
@keyframes wetter-regen { from { transform: translateY(-40px); } to { transform: translateY(60px); } }
@keyframes wetter-schnee { from { transform: translate(0, -30px); } to { transform: translate(8px, 50px); } }
#stadt-wetter { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .stadt-ausruf, #stadt-figur.laeuft .sf, #stadt-figur.laeuft .sf-bein-l, #stadt-figur.laeuft .sf-bein-r, .stadt-rauch circle, .stadt-ente, .stadt-wasser, .wetter-teil { animation: none; }
}
/* Gym */
.gym-bild { position: relative; }
.gym-bild .gym-szene { width: 100%; height: auto; display: block; border-radius: 14px; }
.gym-liste { display: grid; gap: 8px; }
.gym-zeile { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--flaeche, #fff); border: 1px solid var(--linie); }
.gym-zeile.heute { border-color: var(--gold, #d4a017); }
.gym-form { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--flaeche2, #e5e7eb); overflow: hidden; }
.gym-form i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); width: calc(var(--p, 0) * 1%); }
.gym-training { display: grid; justify-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--flaeche2, #f3f4f6); text-align: center; }
.gym-tipp { width: 160px; height: 160px; border-radius: 50%; font-size: 1.4rem; font-weight: 800; border: 0; color: #fff; background: radial-gradient(circle at 35% 30%, #818cf8, #4338ca); box-shadow: 0 8px 0 #312e81; touch-action: manipulation; user-select: none; }
.gym-tipp:active { transform: translateY(4px); box-shadow: 0 4px 0 #312e81; }
.gym-zahl { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gym-zeit { height: 10px; width: 100%; max-width: 260px; border-radius: 5px; background: #e5e7eb; overflow: hidden; } .gym-zeit i { display: block; height: 100%; background: #f59e0b; width: 100%; }
/* Schrift auf Fahrzeugen bleibt lesbar, wenn sie nach links fahren */
.stadt-npc.links .snpc-schrift, #stadt-figur.links text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.stadt-npc .snpc-bein-l { animation: sf-bein .5s linear infinite; transform-box: fill-box; transform-origin: center top; }
.stadt-npc .snpc-bein-r { animation: sf-bein .5s linear infinite reverse; transform-box: fill-box; transform-origin: center top; }
.stadt-karte.tz-nacht .stadt-fenster, .stadt-karte.tz-abend .stadt-fenster { fill: #fff59d; }
@media (prefers-reduced-motion: reduce) { .stadt-npc .snpc-bein-l, .stadt-npc .snpc-bein-r { animation: none; } }