/* Westwind Imperium – gemeinsame Oberfläche für alle Tycoon-Spiele.
   Farben nur über Tokens; jedes Spiel setzt --akzent / --epoche. */
:root {
  --bg: #0d1522;
  --bg2: #15213a;
  --karte: #1d2b47;
  --karte-hell: #26385c;
  --karte2: #2a3d63;
  --linie: #33486f;
  --text: #f2f6fd;
  --text2: #a9bad6;
  --akzent: #ffb02e;
  --akzent-dunkel: #c46d00;
  --akzent2: #19b39a;
  --epoche: #c8873a;
  --gold: #ffd54a;
  --edelstein: #3fe0d0;
  --gut: #39d98a;
  --gefahr: #e8513f;
  --gesperrt: #44557a;
  --schatten: 0 6px 18px rgba(0,0,0,.4);
  --radius: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
body { display: flex; justify-content: center; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 50% 0, #1b2a48, var(--bg) 60%); }
#app { width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--bg); }
img { -webkit-user-drag: none; }
.ic { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; }

/* ---------- Knöpfe (3D-Spielknöpfe) ---------- */
.knopf, .kauf button, .karte button.haupt, .fenster button.haupt {
  border: 0; border-radius: 12px; cursor: pointer; font-weight: 900; color: #3a2200; letter-spacing: .2px;
  background: linear-gradient(#ffd877, var(--akzent) 55%, #f39200); box-shadow: 0 4px 0 var(--akzent-dunkel), 0 6px 10px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(255,255,255,.45); transition: transform .06s, box-shadow .06s; position: relative; }
.knopf:active, .kauf button:active, .karte button.haupt:active, .fenster button.haupt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--akzent-dunkel), 0 2px 4px rgba(0,0,0,.3); }
.knopf.gruen, .karte button.haupt.gruen { background: linear-gradient(#7ef0b5, #2fc77d 55%, #1fa864); box-shadow: 0 4px 0 #157a48, 0 6px 10px rgba(0,0,0,.35); color: #053a22; }
.knopf.tuerkis, .karte button.haupt.tuerkis { background: linear-gradient(#8ff7ee, #2bd3c3 55%, #16a99c); box-shadow: 0 4px 0 #0c746b, 0 6px 10px rgba(0,0,0,.35); color: #033a35; }
.kauf button:disabled, .karte button.haupt:disabled, .knopf:disabled { background: linear-gradient(#55688e, var(--gesperrt)); box-shadow: 0 3px 0 #2c3a57; color: #b7c3da; text-shadow: none; cursor: default; transform: none; }
.knopf-rund { border: 0; background: var(--karte2); color: var(--text); border-radius: 999px; padding: 7px 12px;
  font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 #1a2740; }
.knopf-rund:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a2740; }

/* ---------- Kopf ---------- */
.kopf { padding: 8px 12px 6px; background: linear-gradient(var(--bg2), #111b2f); border-bottom: 2px solid color-mix(in srgb, var(--epoche) 60%, var(--linie));
  padding-top: calc(8px + env(safe-area-inset-top)); position: relative; z-index: 2; }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kopf-links { min-width: 0; }
.titel { font-size: 12px; color: var(--text2); letter-spacing: .4px; text-transform: uppercase; font-weight: 700; }
.titel b { color: color-mix(in srgb, var(--epoche) 70%, #fff); }
.geld { font-size: 28px; font-weight: 900; line-height: 1.1; display: flex; align-items: center; gap: 6px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.geld img { width: 28px; height: 28px; }
.geld.puls { animation: geldpuls .35s; }
@keyframes geldpuls { 40% { transform: scale(1.08); color: var(--gold); } }
.rate { font-size: 12px; color: var(--text2); font-weight: 700; }
.kopf-rechts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.edelsteine-knopf { display: flex; align-items: center; gap: 4px; border: 2px solid color-mix(in srgb, var(--edelstein) 50%, transparent); background: rgba(10,40,45,.7);
  color: #dffcf8; border-radius: 999px; padding: 3px 10px 3px 4px; font-weight: 900; font-size: 14px; cursor: pointer; }
.edelsteine-knopf img { width: 22px; height: 22px; }
.edelsteine-knopf .plus { background: var(--gut); color: #053a22; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-left: 2px; }
.werbe-knopf { display: flex; align-items: center; gap: 4px; padding: 5px 10px 5px 6px; font-size: 13px; }
.werbe-knopf img { width: 24px; height: 24px; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; min-height: 20px; }
.chip { font-size: 11px; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--karte2); color: var(--text); white-space: nowrap; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.chip .ic { width: 15px; height: 15px; vertical-align: 0; }
.chip.boost { background: linear-gradient(90deg, #7a4b00, #b06d00); }

/* ---------- Szene ---------- */
.szene-rahmen { position: relative; }
canvas.szene { display: block; width: 100%; height: 235px; background: #0b1220; cursor: pointer; }
.szene-knoepfe { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.szene-knopf { border: 0; border-radius: 12px; background: rgba(10,18,32,.72); color: #fff; font-weight: 800; font-size: 12px; padding: 6px 9px; cursor: pointer;
  display: flex; align-items: center; gap: 4px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.szene-knopf img { width: 20px; height: 20px; }
.wetter { position: absolute; left: 8px; bottom: 8px; background: rgba(10,18,32,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; pointer-events: none; }
.sabotage { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 8px; border: 2px solid #ffb3a6; border-radius: 14px;
  background: linear-gradient(#c2412e, #8d2414); color: #fff; font-size: 13px; padding: 4px 10px 4px 4px; text-align: left; cursor: pointer;
  box-shadow: var(--schatten); animation: puls2 1s infinite; z-index: 3; }
.sabotage[hidden] { display: none; }
.sabotage img { height: 42px; }
@keyframes puls2 { 50% { transform: scale(1.025); } }

/* ---------- Inhalt ---------- */
.inhalt { flex: 1; overflow-y: auto; padding: 10px 10px 18px; -webkit-overflow-scrolling: touch;
  background: linear-gradient(color-mix(in srgb, var(--epoche) 10%, var(--bg)), var(--bg) 220px); }
.leiste { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.leiste .knopf-rund.aktiv { background: linear-gradient(#ffd877, var(--akzent)); color: #3a2200; box-shadow: 0 3px 0 var(--akzent-dunkel); }
.leiste .rechts { margin-left: auto; font-size: 11px; color: var(--text2); text-align: right; }

.zeile { display: grid; grid-template-columns: 66px 1fr; gap: 10px; border-radius: var(--radius);
  padding: 10px; margin-bottom: 10px; box-shadow: var(--schatten); position: relative;
  background: linear-gradient(160deg, var(--karte-hell), var(--karte) 60%); border: 1px solid rgba(255,255,255,.06); }
.zeile.gesperrt { filter: grayscale(.6); opacity: .7; }
.zeile.neu { animation: neuzeile .6s ease; }
@keyframes neuzeile { from { transform: scale(.94); opacity: 0; } }
.symbol { width: 66px; height: 66px; border-radius: 14px; background: radial-gradient(circle at 50% 35%, #3b5585, #1a2742); display: flex;
  align-items: center; justify-content: center; cursor: pointer; position: relative; border: 2px solid rgba(255,255,255,.08); overflow: hidden; }
.symbol img { max-width: 62px; max-height: 44px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.symbol .anz { font-size: 12px; font-weight: 900; position: absolute; bottom: 1px; right: 4px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.symbol .stern { position: absolute; top: 2px; left: 3px; width: 18px; height: 18px; }
.symbol.tippen { border-color: var(--akzent); animation: tippen 1.1s infinite; }
@keyframes tippen { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 45%, transparent); } }
.symbol:active { transform: scale(.94); }
.mitte { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.name { font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name .mgr { font-size: 11px; font-weight: 800; color: var(--gut); white-space: nowrap; }
.gleis { height: 24px; border-radius: 12px; background: #0a1220; position: relative; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.gleis .fuell { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 12px;
  background: linear-gradient(#5ef0d0, var(--akzent2) 60%, #0f8a76); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.gleis .fuell::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px); animation: streifen 1s linear infinite; }
@keyframes streifen { to { background-position: 18px 0; } }
.gleis .wert { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 900; text-shadow: 0 1px 2px #000; }
.kauf { display: flex; gap: 8px; align-items: center; }
.kauf button { flex: 1; padding: 8px 6px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.kauf .zeit { font-size: 12px; color: var(--text2); min-width: 50px; text-align: right; font-weight: 700; }
.zeile.sabotiert { border-color: var(--gefahr); box-shadow: 0 0 0 2px var(--gefahr), var(--schatten); }
.zeile.sabotiert .gleis .wert { color: #ffc9bf; }
.mini-zug { width: 74px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.story-mini { width: 74px; height: 42px; object-fit: cover; border-radius: 8px; }
.story-eintrag { cursor: pointer; }
.gross-balken { height: 16px; border-radius: 8px; }
.gross-balken div { background: linear-gradient(90deg, var(--akzent2), #5ef0d0); }
.test-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.meilenstein { height: 4px; background: #0a1220; border-radius: 2px; overflow: hidden; }
.meilenstein div { height: 100%; background: linear-gradient(90deg, var(--akzent), var(--gold)); width: 0; }

.karte { background: linear-gradient(160deg, var(--karte-hell), var(--karte) 60%); border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
  box-shadow: var(--schatten); border: 1px solid rgba(255,255,255,.06); position: relative; }
.karte h3 { margin: 0 0 4px; font-size: 15px; font-weight: 900; }
.karte p { margin: 0 0 8px; font-size: 13px; color: var(--text2); line-height: 1.4; }
.karte .reihe { display: flex; align-items: center; gap: 10px; }
.karte .reihe .gross { font-size: 30px; }
.karte .reihe .txt { flex: 1; min-width: 0; }
.karte .bildicon { width: 54px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.karte button.haupt { padding: 9px 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.karte button.zweit { border: 0; border-radius: 10px; padding: 9px 12px; font-weight: 800; background: var(--karte2); color: var(--text); cursor: pointer; box-shadow: 0 3px 0 #1a2740; }
.erledigt { color: var(--gut); font-weight: 900; font-size: 13px; }
.abschnitt { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text2); margin: 16px 4px 8px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.abschnitt::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.karten-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kachel { background: var(--karte); border-radius: 12px; padding: 10px; font-size: 12px; color: var(--text2); }
.kachel b { display: block; color: var(--text); font-size: 13px; margin: 2px 0; }
.kachel .ic { font-size: 24px; }
.kachel.aktiv { outline: 2px solid var(--akzent); }
.kachel.grau { opacity: .5; }

.balken { height: 8px; background: #0a1220; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.balken div { height: 100%; background: var(--akzent2); }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 22px; font-weight: 800; letter-spacing: 3px; }

/* ---------- Shop ---------- */
.shop-kopf { text-align: center; padding: 16px 12px; background: radial-gradient(circle at 50% 0, #1d6d6a, #12304a 70%); border: 1px solid rgba(94,240,208,.3); }
.shop-kopf .gross-zahl { font-size: 34px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 8px; color: #e6fffb; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.shop-kopf .gross-zahl img { width: 40px; height: 40px; }
.angebot { background: linear-gradient(135deg, #5b2a86, #2d1a5a); border: 2px solid #c79bff; overflow: hidden; }
.angebot .band { position: absolute; top: 10px; right: -34px; transform: rotate(35deg); background: var(--gefahr); color: #fff; font-size: 11px; font-weight: 900; padding: 3px 40px; }
.pakete { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.paket { background: linear-gradient(170deg, #22406b, #182b4b); border-radius: 16px; padding: 12px 8px 10px; text-align: center; position: relative; border: 1px solid rgba(94,240,208,.25); box-shadow: var(--schatten); }
.paket.breit { grid-column: span 2; }
.paket img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.paket .menge { font-size: 20px; font-weight: 900; color: #e6fffb; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 2px 0 8px; }
.paket .menge .ic { width: 20px; height: 20px; }
.paket .knopf { width: 100%; padding: 8px; font-size: 14px; }
.paket .extra { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); background: var(--gefahr); color: #fff; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.preis-alt { text-decoration: line-through; opacity: .6; font-size: 11px; margin-right: 3px; }
.lack-vorschau { width: 74px; height: 42px; object-fit: contain; }
.kostenlos { background: linear-gradient(135deg, #165d3c, #12324a); border: 1px solid rgba(57,217,138,.4); }

/* ---------- Reiter unten ---------- */
.reiter { display: grid; grid-template-columns: repeat(6, 1fr); background: linear-gradient(#15213a, #0c1424); border-top: 2px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom); position: relative; z-index: 2; }
.reiter button { border: 0; background: none; color: var(--text2); padding: 6px 0 7px; font-size: 10px; font-weight: 800; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.reiter button img { width: 30px; height: 30px; object-fit: contain; transition: transform .15s; filter: grayscale(.35) brightness(.85); }
.reiter button.aktiv { color: var(--akzent); }
.reiter button.aktiv img { transform: translateY(-3px) scale(1.15); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.reiter button.aktiv::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: var(--akzent); }
.reiter button .punkt { position: absolute; top: 4px; right: calc(50% - 20px); width: 10px; height: 10px; border-radius: 50%; background: var(--gefahr); border: 2px solid #0c1424; display: none; }
.reiter button .punkt.an { display: block; animation: hops 1.4s infinite; }
@keyframes hops { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }

/* ---------- Fenster ---------- */
.schleier { position: absolute; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; z-index: 25; padding: 20px; animation: einblenden .2s; }
@keyframes einblenden { from { opacity: 0; } }
.fenster { background: linear-gradient(170deg, #22355a, var(--bg2)); border-radius: 20px; padding: 20px; width: 100%; max-width: 360px; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.08); animation: aufploppen .28s cubic-bezier(.2,1.4,.5,1); }
@keyframes aufploppen { from { transform: scale(.8); opacity: 0; } }
.fenster h2 { margin: 0 0 6px; font-size: 20px; font-weight: 900; }
.fenster p { color: var(--text2); font-size: 14px; margin: 0 0 14px; line-height: 1.45; }
.fenster .gross { font-size: 30px; font-weight: 900; margin: 6px 0 14px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.fenster .knoepfe { display: flex; flex-direction: column; gap: 10px; }
.fenster button { border: 0; border-radius: 12px; padding: 12px; font-weight: 800; font-size: 15px; cursor: pointer; background: var(--karte2); color: var(--text); }

.meldung { position: absolute; left: 50%; transform: translateX(-50%) translateY(10px); bottom: 84px; background: rgba(20,32,56,.95); color: var(--text);
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; box-shadow: var(--schatten); z-index: 26; border: 1px solid var(--linie);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.meldung.an { opacity: 1; transform: translateX(-50%); }

/* ---------- Effekte ---------- */
.flug { position: absolute; width: 26px; height: 26px; z-index: 50; pointer-events: none; transition: transform .7s cubic-bezier(.5,-0.3,.7,1), opacity .7s; }
canvas.konfetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }

/* ---------- Story ---------- */
.story { position: absolute; inset: 0; z-index: 30; background: #05080f; display: flex; flex-direction: column; animation: rein .35s ease; cursor: pointer; }
.story.weg { opacity: 0; transition: opacity .3s; }
@keyframes rein { from { opacity: 0; transform: scale(1.03); } }
.story-bild { flex: 1; position: relative; min-height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.story-bild .unscharf { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(16px) brightness(.45); }
.story-bild img { position: relative; width: 140%; max-width: none; max-height: 100%; object-fit: contain; flex: none; animation: zoom 16s linear forwards; }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.story-titel { z-index: 2; position: absolute; left: 0; right: 0; top: 0; padding: calc(12px + env(safe-area-inset-top)) 16px 30px; font-weight: 900; font-size: 15px;
  background: linear-gradient(rgba(0,0,0,.7), transparent); color: #fff; }
.story-dialog { display: flex; align-items: flex-end; gap: 10px; padding: 0 12px; margin-top: -70px; position: relative; }
.story-dialog.neu .story-text { animation: blase .25s ease; }
@keyframes blase { from { transform: translateY(8px); opacity: .3; } }
.story-figur { height: 150px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.story-text { flex: 1; background: #fffaf0; color: #2a2016; border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.5); min-height: 80px; border: 3px solid #e9d9b5; }
.story-text b { display: block; font-size: 13px; color: #c46d00; margin-bottom: 4px; }
.story-figur.rost + .story-text b, .story-figur.fritz + .story-text b { color: #b03a2e; }
.story-text p { margin: 0; font-size: 15px; line-height: 1.4; }
.story-fuss { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); color: var(--text2); font-size: 13px; }
.story-skip { border: 0; background: none; color: var(--text2); font-size: 13px; cursor: pointer; padding: 6px; }
.story-weiter { animation: blinken 1.2s infinite; }
@keyframes blinken { 50% { opacity: .3; } }

/* ---------- Zeitsprung ---------- */
.zeitsprung { position: absolute; inset: 0; z-index: 40; background: radial-gradient(circle, #0e3b3a, #02070a 70%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zeitsprung.weg { opacity: 0; transition: opacity .6s; }
.zs-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 6px solid #5ef0d0; box-shadow: 0 0 40px #5ef0d0, inset 0 0 40px #5ef0d0; animation: ring 1.1s linear infinite; }
.zs-ring.zwei { animation-delay: .55s; }
@keyframes ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(6); opacity: 0; } }
.zs-jahr { position: relative; font-size: 64px; font-weight: 900; color: #eafffb; text-shadow: 0 0 20px #5ef0d0; letter-spacing: 2px; }
.film { position: absolute; inset: 0; z-index: 41; background: #000; display: flex; align-items: center; justify-content: center; }
.film video { width: 165%; max-width: none; max-height: 100%; flex: none; }
.film .unscharf { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) brightness(.4); }
.film video { position: relative; }
.film button { position: absolute; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.18); color: #fff; font-weight: 800; cursor: pointer; }

/* ---------- Karte ---------- */
.karten-ansicht { position: absolute; inset: 0; z-index: 28; background: #0b1424; display: flex; flex-direction: column; animation: einblenden .25s; }
.karten-kopf { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: var(--bg2); border-bottom: 2px solid var(--linie); }
.karten-kopf h2 { margin: 0; font-size: 16px; font-weight: 900; }
.karten-scroll { flex: 1; overflow-y: auto; position: relative; }
.karten-flaeche { position: relative; width: 100%; }
.karten-flaeche { min-height: 100%; }
.karten-flaeche > img.karten-bild { width: 100%; height: 100%; min-height: calc(100dvh - 60px); object-fit: cover; display: block; }
.karten-flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.station { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.station .punkt { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff9e6, #f1d38a); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.station .punkt img { width: 48px; height: 32px; object-fit: contain; }
.station.zu .punkt { width: 16px; height: 16px; background: rgba(40,52,78,.85); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.station.naechste .punkt { width: 46px; height: 46px; background: radial-gradient(circle, #8a94ab, #46526e); border-color: var(--gold); animation: tippen 1.4s infinite; }
.station.naechste .punkt img { width: 26px; height: 26px; }
.station.naechste .schild { text-align: center; white-space: normal; max-width: 150px; }
.karten-info { font-size: 12px; color: var(--text2); font-weight: 700; margin-top: 2px; }
.station .schild { margin-top: 3px; background: rgba(10,18,32,.85); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.station .schild b { color: var(--gold); }
.karten-zug { position: absolute; width: 46px; height: 26px; object-fit: contain; transform: translate(-50%, -70%); pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); }

/* ---------- Fundkisten & Sammelalbum (optional, z. B. Bergwerk) ---------- */
.fundkiste { position: absolute; z-index: 5; transform: translate(-50%, -50%); border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  animation: kiste-hupf 1.1s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,214,90,.9)); }
.fundkiste[hidden] { display: none; }
.fundkiste img { width: 54px; height: 54px; object-fit: contain; }
.fundkiste span { margin-top: -4px; background: rgba(10,18,32,.85); color: #ffd54a; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; }
@keyframes kiste-hupf { 0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); } 50% { transform: translate(-50%, -62%) rotate(4deg); } }
.fund-stein { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-size: 34px;
  background: #3a4560; box-shadow: inset 0 -6px 12px rgba(0,0,0,.35), inset 0 4px 8px rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.4); }
.album-scroll { padding: 10px 12px 24px; }
.album-seite { background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px; margin-bottom: 10px; border: 2px solid transparent; }
.album-seite.voll { border-color: var(--gold); }
.album-seite h3 { margin: 0 0 8px; font-size: 15px; display: flex; justify-content: space-between; color: #fff; }
.album-seite h3 span { color: var(--gold); font-size: 12px; }
.album-zu { margin: 0 0 6px; font-size: 12px; color: var(--text2); }
.album-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.album-stein { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 9px; color: #dfe6f3; line-height: 1.15; }
.album-stein .fund-stein { width: 44px; height: 44px; font-size: 22px; margin-bottom: 3px; }
.album-stein.leer .fund-stein { background: rgba(255,255,255,.08); color: rgba(255,255,255,.35); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.album-stein.leer b { color: rgba(255,214,90,.6); }
.album-stein i { position: absolute; top: 0; right: 2px; font-style: normal; font-weight: 900; color: var(--gold); font-size: 10px; }
.album-info { font-size: 12px; color: var(--text2); text-align: center; }

/* ---------- Optional: Wetter-Info, Bonus-Schild, Export-Aufträge ---------- */
.wetter.klickbar { pointer-events: auto; cursor: pointer; }
.bonus-schild { font-style: normal; font-size: 10px; font-weight: 900; color: #053a22; background: var(--gut); border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.bonus-schild:empty { display: none; }
.szene-knopf.puls { background: linear-gradient(#ffd877, var(--akzent)); color: #3a2200; animation: tippen 1.1s infinite; }
.auftrag-liste { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; text-align: left; }
.auftrag-zeile { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.25); border-radius: 10px; padding: 6px 8px; color: var(--text); }
.auftrag-zeile em { margin-left: auto; font-style: normal; font-size: 12px; color: #ffb4a8; }
.auftrag-zeile.ok em { color: var(--gut); }
.auftrag-lohn, .auftrag-zeit { display: block; font-size: 13px; margin-top: 4px; }
.auftrag-lohn { color: var(--gold); font-weight: 800; }

a.kachel { text-decoration: none; display: block; }
.kachel.link { outline: 1px solid rgba(255,255,255,.15); cursor: pointer; }
.kachel.link:hover { outline-color: var(--akzent); }