@font-face { font-family: 'Barlow'; src: url('../vendor/fonts/Barlow-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../vendor/fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../vendor/fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }

/* =====================================================================
   SICKINGOPOLY – DESIGN
   Gedrucktes Immobilien-Brettspiel: Papier, klare Konturen, Straßenfarben.
   Palette NUR über diese Variablen. Animationen ≤ 600 ms. Reduced Motion beachten.
   ===================================================================== */

:root {
  /* Palette */
  --himmel: #195f45;
  --himmel-hell: #dce7dc;
  --himmel-dunkel: #244c3b;
  --sonne: #d7b655;
  --sonne-dunkel: #806321;
  --gras: #195f45;
  --gras-dunkel: #11432f;
  --koralle: #bb3433;
  --koralle-dunkel: #942825;
  --creme: #f1ecdc;
  --papier: #fffdf5;
  --tinte: #202d26;
  --tinte-weich: #586157;
  --grau: #e3e4d7;
  --grau-dunkel: #b9beaf;
  --lila: #775c77;
  --lila-dunkel: #624864;
  --lila-hell: #eee8ed;
  /* Spielerfarbe (wird per JS gesetzt) */
  --spieler: #3d8bff;
  --spieler-dunkel: #2560c2;

  /* Formen */
  --radius: 4px;
  --radius-klein: 3px;
  --rand: 1.5px;
  --schatten: 0 5px 18px rgba(25,45,33,.16);
  --schatten-klein: 0 2px 3px rgba(25,45,33,.08);

  /* Schrift */
  --schrift-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --schrift-text: 'Barlow', 'Segoe UI', sans-serif;

  /* Bewegung */
  --schnell: 160ms;
  --mittel: 320ms;
  --langsam: 520ms;
  --feder: cubic-bezier(.2,.7,.3,1);

  --sicher-unten: env(safe-area-inset-bottom, 0px);
  --sicher-oben: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body {
  font-family: var(--schrift-text);
  color: var(--tinte);
  background: var(--himmel);
  background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 40%),
                    radial-gradient(circle at 80% 90%, rgba(255,255,255,.25), transparent 40%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-size: 16px;
  line-height: 1.35;
}
h1, h2, h3, .display { font-family: var(--schrift-display); font-weight: 700; letter-spacing: .2px; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.inhalt { flex: 1; position: relative; min-height: 0; }
.tab-seite { position: absolute; inset: 0; display: none; }
.tab-seite.aktiv { display: block; }
.tab-seite.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(28px + var(--sicher-unten)); }

/* ---------- Kopfleiste ---------- */
.kopfleiste {
  position: relative; z-index: 1200;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + var(--sicher-oben)) 12px 8px;
  pointer-events: none;
}
.kopfleiste > * { pointer-events: auto; }
.maskottchen-knopf {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--papier); border: var(--rand) solid var(--himmel-dunkel);
  box-shadow: var(--schatten-klein); display: grid; place-items: center; overflow: hidden;
  transition: transform var(--schnell) var(--feder);
}
.maskottchen-knopf:active { transform: scale(.92); }
.maskottchen-knopf svg { width: 56px; height: 56px; margin-top: 6px; }
.kopf-rechts { display: flex; gap: 8px; }
.pille {
  display: flex; align-items: center; gap: 6px;
  background: var(--papier); border: var(--rand) solid var(--himmel-dunkel);
  border-radius: 999px; padding: 6px 14px 6px 10px;
  font-family: var(--schrift-display); font-size: 20px; font-weight: 700;
  box-shadow: var(--schatten-klein);
}
.pille.taler { color: var(--sonne-dunkel); border-color: var(--sonne-dunkel); background: var(--creme); }
.pille.serie { color: var(--koralle-dunkel); }
.muenze { width: 20px; height: 20px; border-radius: 50%; background: var(--sonne); border: 1.5px solid var(--sonne-dunkel); box-shadow: inset -3px -3px 0 rgba(0,0,0,.12); }
.pille .flamme { font-size: 18px; }
.rollt { color: var(--gras-dunkel); }

.sprechblase {
  position: absolute; left: 14px; right: 14px; top: calc(78px + var(--sicher-oben));
  background: var(--papier); border: var(--rand) solid var(--himmel-dunkel); border-radius: 3px;
  padding: 10px 14px; font-weight: 700; box-shadow: var(--schatten-klein); z-index: 1200; /* über Karte (Leaflet 400+) und Test-Leiste (900) */
  animation: sprech-rein var(--mittel) var(--feder);
}
.sprechblase::before {
  content: ''; position: absolute; left: 22px; top: -14px; border: 8px solid transparent; border-bottom-color: var(--himmel-dunkel); border-top: 0;
}
.sprechblase::after {
  content: ''; position: absolute; left: 24px; top: -9px; border: 6px solid transparent; border-bottom-color: var(--papier); border-top: 0;
}
body.streife-aktiv[data-tab="karte"] .sprechblase { top: calc(124px + var(--sicher-oben)); }
@keyframes sprech-rein { from { transform: translateY(-10px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Karte ---------- */
.karte { position: absolute; inset: 0; background: var(--himmel-hell); }
.leaflet-container { font-family: var(--schrift-text); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.75) !important; border-radius: 3px 0 0 0; }
.karten-knoepfe { position: absolute; right: 12px; bottom: 14px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.rund-knopf {
  width: 52px; height: 52px; border-radius: 50%; background: var(--papier); color: var(--himmel-dunkel);
  border: var(--rand) solid var(--himmel-dunkel); box-shadow: var(--schatten-klein); display: grid; place-items: center;
  transition: transform var(--schnell) var(--feder);
}
.rund-knopf:active { transform: scale(.9); }
.demo-banner {
  position: absolute; top: 52px; left: 12px; right: 12px; z-index: 500; text-align: center;
  background: var(--creme); border: 1.5px solid var(--sonne-dunkel); color: var(--tinte); border-radius: 3px; padding: 8px 12px; font-size: 13px; font-weight: 700;
}
.link-knopf { color: var(--himmel-dunkel); text-decoration: underline; font-weight: 600; }

/* Figur */
.figur-icon { position: relative; }
.figur-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--f); animation: puls 1.6s ease-out infinite; opacity: .7; }
.figur { position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--f); border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--fd), 0 4px 10px rgba(0,0,0,.3); }
@keyframes puls { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.strasse-aktiv { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); animation: strasse-blinkt 1.2s ease-in-out infinite; }
@keyframes strasse-blinkt { 50% { opacity: .55; } }

/* Straßennamen-Schilder: nur bei nahem Zoom */
.strassen-schild { display: none; pointer-events: none; }
.zoom-nah .strassen-schild { display: block; }
.strassen-schild span {
  display: inline-block; transform: translate(-50%, -50%); white-space: nowrap;
  background: rgba(255,255,255,.92); color: var(--tinte); border: 2px solid var(--grau-dunkel); border-radius: 999px;
  padding: 2px 9px; font-family: var(--schrift-display); font-weight: 600; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.hausnummer { display: block; pointer-events: none; }
.hausnummer span { display: inline-block; transform: translate(-50%, -50%); font-family: var(--schrift-display); font-weight: 600; font-size: 10px; color: #6b5a3e; background: rgba(255,255,255,.7); border-radius: 6px; padding: 0 4px; }
.figur.fremd { border-color: #fff; opacity: .9; }
.figur-name { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-family: var(--schrift-display); font-weight: 700; font-size: 11px; background: #fff; border-radius: 3px; padding: 0 6px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.villa-icon.fremd { opacity: .95; }
.villa-icon { text-align: center; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.villa-icon.vorschau { opacity: .8; animation: schwebt 1.2s ease-in-out infinite; cursor: grab; }
@keyframes schwebt { 50% { transform: translateY(-6px); } }
.villa-name { font-family: var(--schrift-display); font-weight: 700; font-size: 13px; background: #fff; border-radius: 3px; padding: 1px 8px; display: inline-block; margin-top: -8px; border: 2px solid var(--spieler-dunkel); color: var(--tinte); }
.fahne { transform-origin: 61px 13px; animation: wehen 1.4s ease-in-out infinite; }
@keyframes wehen { 50% { transform: skewY(-6deg); } }
.haus-icon { filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); transform-origin: bottom center; transform: scale(0); transition: transform var(--langsam) var(--feder); }
.haus-icon.waechst { transform: scale(1); }

/* Fortschrittskarte */
.fortschritt-karte {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 600;
  background: var(--papier); border: var(--rand) solid var(--himmel-dunkel); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--schatten);
  animation: von-unten var(--mittel) var(--feder);
}
@keyframes von-unten { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.fortschritt-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fortschritt-strasse { font-family: var(--schrift-display); font-size: 22px; font-weight: 700; }
.fortschritt-text { font-weight: 700; color: var(--tinte-weich); }
.fortschritt-preis { font-family: var(--schrift-display); font-size: 22px; font-weight: 700; color: var(--sonne-dunkel); white-space: nowrap; }
.fortschritt-preis small { font-size: 13px; display: block; text-align: right; color: var(--tinte-weich); font-family: var(--schrift-text); }
.balken { height: 18px; border-radius: 999px; background: var(--grau); border: 1.5px solid var(--grau-dunkel); overflow: hidden; margin-top: 10px; }
.balken-fuellung { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gras), #7ee09a); transition: width var(--langsam) ease-out; position: relative; }
.balken-fuellung::after { content: ''; position: absolute; inset: 2px 2px 50% 2px; border-radius: 999px; background: rgba(255,255,255,.4); }
.balken-fuellung.voll { background: linear-gradient(90deg, var(--sonne), #ffe08a); }
.fortschritt-aktionen { display: flex; gap: 10px; margin-top: 12px; }
.fortschritt-aktionen:empty { display: none; }
.fortschritt-aktionen .knopf { flex: 1; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 20px; border-radius: 3px;
  font-family: var(--schrift-display); font-size: 19px; font-weight: 700;
  border: var(--rand) solid; box-shadow: 0 5px 0 var(--k-schatten, rgba(0,0,0,.2));
  transition: transform var(--schnell) var(--feder), box-shadow var(--schnell);
  transform: translateY(0);
}
.knopf:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--k-schatten, rgba(0,0,0,.2)); }
.knopf.primaer { background: var(--gras); border-color: var(--gras-dunkel); color: #fff; --k-schatten: var(--gras-dunkel); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.knopf.sonne { background: var(--sonne); border-color: var(--sonne-dunkel); color: #5b4300; --k-schatten: var(--sonne-dunkel); }
.knopf.sekundaer { background: var(--papier); border-color: var(--himmel-dunkel); color: var(--himmel-dunkel); --k-schatten: var(--himmel-dunkel); }
.knopf.gefahr { background: var(--koralle); border-color: var(--koralle-dunkel); color: #fff; --k-schatten: var(--koralle-dunkel); }
.knopf.klein { min-height: 40px; padding: 6px 14px; font-size: 16px; border-radius: 3px; box-shadow: 0 3px 0 var(--k-schatten); }
.knopf:disabled { opacity: .55; filter: saturate(.4); pointer-events: none; }
.knopf.breit { width: 100%; }

/* ---------- Tableiste ---------- */
.tableiste {
  position: relative; z-index: 700;
  display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: end;
  background: var(--papier); border-top: var(--rand) solid var(--himmel-dunkel);
  padding: 6px 6px calc(8px + var(--sicher-unten));
  box-shadow: 0 -6px 20px rgba(30,60,100,.15);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px;
  font-family: var(--schrift-display); font-weight: 700; font-size: 13px; color: var(--tinte-weich);
  border-radius: 3px; position: relative; transition: transform var(--schnell) var(--feder), color var(--schnell);
}
.tab .tab-icon { font-size: 24px; line-height: 1; filter: grayscale(.6) opacity(.7); transition: transform var(--schnell) var(--feder), filter var(--schnell); }
.tab.aktiv { color: var(--himmel-dunkel); }
.tab.aktiv .tab-icon { filter: none; transform: translateY(-3px) scale(1.15); }
.tab:active { transform: scale(.92); }
.tab .punkt { position: absolute; top: 2px; right: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--koralle); border: 2px solid #fff; }
.streife-knopf {
  width: 84px; height: 84px; margin: -36px auto 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7ee09a, var(--gras) 60%); border: 4px solid var(--gras-dunkel);
  box-shadow: 0 6px 0 var(--gras-dunkel), 0 10px 22px rgba(44,140,73,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  color: #fff; font-family: var(--schrift-display); font-weight: 700; font-size: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.25);
  transition: transform var(--schnell) var(--feder), box-shadow var(--schnell), background var(--mittel);
}
.streife-knopf .streife-icon { font-size: 30px; line-height: 1; }
.streife-knopf:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--gras-dunkel); }
.streife-knopf.laeuft { background: radial-gradient(circle at 35% 30%, #ff8a8e, var(--koralle) 60%); border-color: var(--koralle-dunkel); box-shadow: 0 6px 0 var(--koralle-dunkel), 0 10px 22px rgba(196,58,63,.4); animation: streife-puls 1.4s ease-in-out infinite; }
@keyframes streife-puls { 50% { transform: scale(1.04); } }

.streife-leiste {
  position: absolute; left: 12px; right: 12px; top: 10px; z-index: 650;
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--tinte); color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px;
  box-shadow: var(--schatten-klein); animation: von-oben var(--mittel) var(--feder);
}
@keyframes von-oben { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.streife-leiste strong { font-family: var(--schrift-display); font-size: 17px; color: var(--sonne); }
.streife-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--koralle); animation: blink 1s infinite; }
.streife-status { font-weight: 600; opacity: .8; font-size: 12px; }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- Saison-Banner, Rangliste ---------- */
.saison-banner {
  position: absolute; top: 52px; left: 12px; right: 12px; z-index: 450; display: flex; justify-content: center; pointer-events: none;
}
.saison-banner span { background: rgba(255,255,255,.92); border: 2px solid var(--himmel-dunkel); border-radius: 999px; padding: 3px 12px; font-weight: 600; font-size: 12px; color: var(--himmel-dunkel); box-shadow: var(--schatten-klein); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 6px 0 12px; }
.podest { text-align: center; border-radius: 3px 16px 8px 8px; padding: 8px 4px 6px; border: 3px solid; background: var(--creme); }
.podest.p1 { border-color: var(--sonne-dunkel); background: linear-gradient(180deg, #fff3b0, var(--creme)); min-height: 120px; }
.podest.p2 { border-color: #9aa5b5; background: linear-gradient(180deg, #eef1f5, var(--papier)); min-height: 100px; }
.podest.p3 { border-color: #c48a4a; background: linear-gradient(180deg, #ffe4c8, var(--papier)); min-height: 90px; }
.podest .p-platz { font-size: 26px; line-height: 1; }
.podest .p-figur { width: 34px; height: 34px; border-radius: 50%; margin: 4px auto; border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--pd); background: var(--pf); }
.podest .p-name { font-family: var(--schrift-display); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podest .p-wert { font-family: var(--schrift-display); font-weight: 700; color: var(--sonne-dunkel); font-size: 15px; }
.rang-zeile .platz { font-family: var(--schrift-display); font-weight: 700; font-size: 20px; width: 30px; text-align: center; color: var(--tinte-weich); }
.rang-zeile .figur-klein { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 2px var(--pd); background: var(--pf); flex: none; }
.rang-zeile.ich { border-color: var(--spieler); background: #eaf0e6; }
.chronik-live .zeile { padding: 8px 10px; }
.chronik-live .zeile .text strong { font-size: 14px; font-weight: 700; }
.chronik-live .farbpunkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fortschritt-text .besitzer { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 3px; border: 1.5px solid rgba(0,0,0,.25); }
.muenze-weg { color: var(--koralle); }

/* ---------- Karten (Panels) ---------- */
.karte-box {
  background: var(--papier); border: var(--rand) solid var(--himmel-dunkel); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--schatten-klein); margin-bottom: 14px;
}
.karte-box h2 { font-size: 22px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.karte-box h3 { font-size: 17px; color: var(--tinte-weich); }
.seiten-titel { color: #fff; text-shadow: 0 2px 0 var(--himmel-dunkel); font-size: 30px; margin: 4px 0 12px; }
.statistik { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { background: var(--creme); border: 1.5px solid var(--sonne-dunkel); border-radius: var(--radius-klein); padding: 10px 12px; }
.stat .wert { font-family: var(--schrift-display); font-size: 26px; font-weight: 700; color: var(--tinte); }
.stat .name { font-size: 13px; font-weight: 700; color: var(--tinte-weich); }
.villa-buehne { display: grid; place-items: center; padding: 8px 0 0; }
.villa-buehne svg { width: min(70vw, 240px); height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); }
.villa-titel { text-align: center; }
.villa-titel .name { font-family: var(--schrift-display); font-size: 28px; font-weight: 700; }
.villa-titel .titel { display: inline-block; background: var(--lila); color: #fff; border-radius: 999px; padding: 3px 14px; font-weight: 600; font-size: 14px; margin-top: 4px; border: 1.5px solid var(--lila-dunkel); }

.liste { display: flex; flex-direction: column; gap: 10px; }
.zeile {
  display: flex; align-items: center; gap: 12px;
  background: var(--papier); border: 1.5px solid var(--grau-dunkel); border-radius: var(--radius-klein); padding: 10px 12px;
}
.zeile .icon { font-size: 28px; width: 40px; text-align: center; }
.zeile .text { flex: 1; min-width: 0; }
.zeile .text strong { display: block; font-family: var(--schrift-display); font-size: 17px; }
.zeile .text small { color: var(--tinte-weich); font-weight: 700; }
.zeile.erledigt { border-color: var(--gras); background: #eef2e6; }
.zeile.erledigt .text strong { text-decoration: line-through; color: var(--tinte-weich); }
.mini-balken { height: 10px; border-radius: 999px; background: var(--grau); overflow: hidden; margin-top: 6px; }
.mini-balken > div { height: 100%; background: var(--gras); border-radius: 999px; transition: width var(--langsam) ease-out; }
.belohnung { font-family: var(--schrift-display); font-weight: 700; color: var(--sonne-dunkel); white-space: nowrap; }

.truhe {
  text-align: center; padding: 14px; background: linear-gradient(180deg, #fff3b0, var(--creme)); border: var(--rand) solid var(--sonne-dunkel); border-radius: var(--radius);
}
.truhe .truhe-bild { font-size: 64px; display: inline-block; }
.truhe.bereit .truhe-bild { animation: wackeln .6s ease-in-out infinite; }
@keyframes wackeln { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; }
.kal-tag { text-align: center; border-radius: 12px; padding: 6px 0; background: var(--grau); border: 2px solid transparent; font-weight: 600; font-size: 12px; color: var(--tinte-weich); }
.kal-tag .f { font-size: 22px; line-height: 1.2; filter: grayscale(1) opacity(.35); }
.kal-tag.gespielt .f { filter: none; }
.kal-tag.heute { border-color: var(--himmel-dunkel); background: #e4ede1; }

.album-seite { position: relative; overflow: hidden; }
.album-seite.gold { background: linear-gradient(135deg, #fff3b0, #ffd966 60%, #fff3b0); border-color: var(--sonne-dunkel); }
.sticker-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.sticker {
  aspect-ratio: 1; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center;
  background: var(--grau); border: 1.5px dashed var(--grau-dunkel); font-size: 11px; font-weight: 600; color: var(--tinte-weich);
}
.sticker.hat { background: var(--papier); border: 1.5px solid var(--v, var(--himmel-dunkel)); color: var(--tinte); box-shadow: var(--schatten-klein); transform: rotate(-2deg); }
.sticker.hat:nth-child(even) { transform: rotate(2deg); }
.sticker .s-icon { font-size: 26px; }
.viertel-punkt { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1.5px solid rgba(0,0,0,.25); }
.fortschritt-klein { font-size: 14px; color: var(--tinte-weich); font-weight: 600; margin-left: auto; }

.deko-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.deko {
  border-radius: 3px; padding: 10px 6px; text-align: center; background: var(--creme); border: 1.5px solid var(--sonne-dunkel);
  font-weight: 600; font-size: 13px; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.deko .d-icon { font-size: 30px; }
.deko.gekauft { background: #eef2e6; border-color: var(--gras-dunkel); }
.deko .knopf { margin-top: 4px; }

.chronik .zeile { padding: 8px 12px; }
.chronik .zeit { font-size: 12px; color: var(--tinte-weich); font-weight: 700; white-space: nowrap; }

.farb-wahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0; }
.farbe { aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 4px solid var(--cd); box-shadow: 0 4px 0 var(--cd); transition: transform var(--schnell) var(--feder); position: relative; }
.farbe.gewaehlt { transform: scale(1.12); outline: 4px solid #fff; outline-offset: 3px; }
.farbe.gewaehlt::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 26px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }

.eingabe {
  width: 100%; min-height: 54px; border-radius: 3px; border: var(--rand) solid var(--himmel-dunkel); padding: 10px 16px;
  font: inherit; font-family: var(--schrift-display); font-size: 22px; font-weight: 700; color: var(--tinte); background: var(--papier); text-align: center;
}
.eingabe:focus { outline: 4px solid var(--himmel-hell); }
.schalter { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 2px solid var(--grau); font-weight: 600; }
.schalter:last-child { border-bottom: 0; }
.schalter input { width: 54px; height: 32px; appearance: none; background: var(--grau-dunkel); border-radius: 999px; position: relative; cursor: pointer; transition: background var(--schnell); margin: 0; }
.schalter input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform var(--schnell) var(--feder); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.schalter input:checked { background: var(--gras); }
.schalter input:checked::after { transform: translateX(22px); }

/* ---------- Dialog ---------- */
.dialog-hintergrund {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(31,59,90,.45); padding: 16px; padding-bottom: calc(16px + var(--sicher-unten));
  opacity: 0; transition: opacity var(--mittel);
}
.dialog-hintergrund.offen { opacity: 1; }
.dialog {
  width: 100%; max-width: 440px; background: var(--papier); border: var(--rand) solid var(--himmel-dunkel); border-radius: 3px;
  padding: 18px 18px 16px; box-shadow: var(--schatten); transform: translateY(40px) scale(.96); transition: transform var(--mittel) var(--feder);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.dialog-hintergrund.offen .dialog { transform: none; }
.dialog-maskottchen { display: grid; place-items: center; margin: -54px auto 2px; }
.dialog-maskottchen svg { width: 110px; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); }
.dialog-titel { font-size: 24px; text-align: center; margin-bottom: 8px; }
.dialog-inhalt { font-weight: 700; color: var(--tinte-weich); text-align: center; font-size: 17px; }
.dialog-inhalt .gross { font-family: var(--schrift-display); font-size: 40px; color: var(--sonne-dunkel); display: block; margin: 8px 0; }
.dialog-inhalt .links { text-align: left; }
.dialog-knoepfe { display: flex; gap: 10px; margin-top: 16px; }
.dialog-knoepfe .knopf { flex: 1; }
.dialog-knoepfe .knopf.gefahr { flex: 0 1 auto; }
.dialog-knoepfe.mehrere { flex-wrap: wrap; }
.dialog-knoepfe.mehrere .knopf { flex: 1 1 calc(50% - 10px); }

/* ---------- Ladebildschirm ---------- */
.laden {
  position: fixed; inset: 0; z-index: 1600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--himmel); background-image: radial-gradient(circle at 50% 30%, rgba(255,255,255,.5), transparent 50%); padding: 24px;
}
.laden svg { filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
.lade-logo { font-family: var(--schrift-display); font-weight: 700; font-size: 40px; color: #fff; text-shadow: 0 4px 0 var(--himmel-dunkel); }
.lade-text { font-weight: 600; color: #fff; text-align: center; }
.lade-balken { width: min(70vw, 260px); height: 14px; border-radius: 999px; background: rgba(255,255,255,.4); border: 1.5px solid #fff; overflow: hidden; }
.lade-balken > div { width: 40%; height: 100%; background: var(--sonne); border-radius: 999px; animation: lade-laeuft 1.1s ease-in-out infinite alternate; }
@keyframes lade-laeuft { from { transform: translateX(-20%); } to { transform: translateX(170%); } }

/* ---------- Onboarding ---------- */
.onboarding {
  position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--himmel); background-image: radial-gradient(circle at 50% 20%, rgba(255,255,255,.5), transparent 50%);
  padding: 16px; padding-bottom: calc(16px + var(--sicher-unten));
}
.onboarding.karte-hinten { background: transparent; pointer-events: none; }
.onboarding.karte-hinten > * { pointer-events: auto; }
.ob-buehne { flex: 1; display: grid; place-items: center; }
.ob-buehne svg { width: min(60vw, 240px); height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); animation: huepf-rein var(--langsam) var(--feder); }
.ob-logo { font-size: 44px; color: #fff; text-shadow: 0 4px 0 var(--himmel-dunkel), 0 8px 20px rgba(0,0,0,.2); text-align: center; line-height: 1; }
.ob-logo small { display: block; font-size: 16px; font-family: var(--schrift-text); font-weight: 600; text-shadow: none; color: #eaf6ff; margin-top: 8px; }
.ob-karte { background: var(--papier); border: var(--rand) solid var(--himmel-dunkel); border-radius: 3px; padding: 18px; box-shadow: var(--schatten); animation: von-unten var(--mittel) var(--feder); }
.ob-karte h2 { font-size: 24px; margin-bottom: 6px; }
.ob-karte p { margin: 0 0 12px; font-weight: 700; color: var(--tinte-weich); }
.ob-punkte { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.ob-punkte span { width: 10px; height: 10px; border-radius: 50%; background: var(--grau-dunkel); }
.ob-punkte span.aktiv { background: var(--himmel-dunkel); width: 24px; border-radius: 999px; }
@keyframes huepf-rein { from { transform: translateY(40px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Toast, Konfetti, Münzen ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(120px + var(--sicher-unten)); transform: translate(-50%, 20px); z-index: 1900;
  background: var(--tinte); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; box-shadow: var(--schatten-klein);
  opacity: 0; transition: opacity var(--mittel), transform var(--mittel) var(--feder); max-width: calc(100% - 32px); text-align: center; pointer-events: none;
}
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.toast.erfolg { background: var(--gras-dunkel); }
.toast.fehler { background: var(--koralle-dunkel); }
.toast.taler { background: var(--sonne-dunkel); }
.konfetti { position: fixed; inset: 0; z-index: 2500; pointer-events: none; width: 100%; height: 100%; display: none; }
.konfetti.aktiv { display: block; }
.muenze-fliegt { position: fixed; z-index: 2600; color: var(--sonne); font-size: 22px; text-shadow: 0 0 0 var(--sonne-dunkel), 0 2px 3px rgba(0,0,0,.3); pointer-events: none; transition: transform .55s cubic-bezier(.2,.7,.3,1), opacity .55s; }

.huepft { animation: huepft var(--langsam) var(--feder); }
@keyframes huepft { 30% { transform: scale(1.25); } }

/* ---------- Test-Modus ---------- */
.testleiste {
  position: fixed; left: 8px; right: 8px; top: calc(176px + var(--sicher-oben)); z-index: 900;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  background: rgba(43,45,66,.92); color: #fff; border-radius: 3px; padding: 8px; font-size: 12px; font-weight: 600;
}
.testleiste .knopf { min-height: 34px; padding: 4px 10px; font-size: 13px; border-radius: 3px; box-shadow: 0 2px 0 var(--k-schatten); }
.testleiste .t-info { width: 100%; text-align: center; opacity: .8; }

body:not([data-tab="karte"]) .testleiste { display: none; }

/* ---------- W20 ---------- */
.wuerfel-overlay { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; background: rgba(31,59,90,.6); opacity: 0; transition: opacity var(--mittel); }
.wuerfel-overlay.offen { opacity: 1; }
.wuerfel-buehne { text-align: center; color: #fff; font-family: var(--schrift-display); }
.wuerfel-ziel { font-size: 20px; font-weight: 700; margin-bottom: 14px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.wuerfel-ziel strong { font-size: 30px; color: var(--sonne); }
.wuerfel-reihe { display: flex; gap: 18px; justify-content: center; }
.w20 { position: relative; width: 150px; height: 150px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); transition: transform 120ms; }
.w20 svg { width: 100%; height: 100%; }
.w20-form { fill: var(--sonne); stroke: var(--sonne-dunkel); stroke-width: 4; stroke-linejoin: round; }
.w20-innen { fill: #fff3b0; stroke: var(--sonne-dunkel); stroke-width: 2.5; stroke-linejoin: round; }
.w20-zahl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; font-weight: 700; color: #5b4300; padding-top: 10px; }
.w20.gut .w20-form { fill: var(--gras); stroke: var(--gras-dunkel); } .w20.gut .w20-innen { fill: #d9f7e2; stroke: var(--gras-dunkel); }
.w20.schlecht .w20-form { fill: var(--koralle); stroke: var(--koralle-dunkel); } .w20.schlecht .w20-innen { fill: #ffe0e1; stroke: var(--koralle-dunkel); }
.wuerfel-text { margin-top: 16px; font-size: 26px; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.3); min-height: 34px; }
.wuerfel-text.gut { color: #c6ffd8; } .wuerfel-text.schlecht { color: #ffd3d4; }

/* Angriffs-Bogen (Zielzahl-Posten) */
.posten { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; text-align: left; font-size: 15px; }
.posten div { display: flex; justify-content: space-between; padding: 4px 10px; border-radius: 3px; background: var(--grau); }
.posten div.minus { background: #eef2e6; color: var(--gras-dunkel); }
.posten div.plus { background: #f8ece7; color: var(--koralle-dunkel); }
.posten div.summe { background: var(--creme); font-family: var(--schrift-display); font-size: 20px; border: 2px solid var(--sonne-dunkel); }
.werkzeug-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.werkzeug-wahl button { border-radius: 3px; padding: 8px 4px; border: 1.5px solid var(--grau-dunkel); background: var(--papier); font-weight: 600; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.werkzeug-wahl button .w-icon { font-size: 26px; }
.werkzeug-wahl button.gewaehlt { border-color: var(--himmel-dunkel); background: #e4ede1; }
.werkzeug-wahl button small { color: var(--tinte-weich); font-weight: 700; }
.kiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kiste .werkzeug { border-radius: 3px; padding: 10px 6px; text-align: center; background: var(--creme); border: 1.5px solid var(--sonne-dunkel); font-weight: 600; font-size: 12px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.kiste .werkzeug .w-icon { font-size: 30px; }
.kiste .werkzeug.habe { background: #eef2e6; border-color: var(--gras-dunkel); }
.kiste .werkzeug.teuer { border-color: var(--lila); background: var(--lila-hell); }
.kiste .werkzeug .knopf { margin-top: 4px; }
.kiste .werkzeug .anzahl { background: var(--gras); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; }
.muenz-badge { pointer-events: none; }
.muenz-badge span { display: inline-block; transform: translate(-50%, -100%); background: var(--sonne); border: 2px solid var(--sonne-dunkel); color: #5b4300; border-radius: 999px; padding: 0 6px; font-family: var(--schrift-display); font-weight: 700; font-size: 11px; white-space: nowrap; box-shadow: 0 2px 3px rgba(0,0,0,.2); }
.muenz-badge.fremd span { background: var(--koralle); border-color: var(--koralle-dunkel); color: #fff; }
.alarm { background: var(--koralle-dunkel) !important; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}
@media (min-width: 600px) {
  .app { max-width: 480px; margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,.3); }
  .onboarding, .toast { max-width: 480px; margin: 0 auto; left: 0; right: 0; }
  .toast { left: 50%; }
}

/* ---------- Unterseiten-Chips (Villa: Zuhause · Laden · Einstellungen) ---------- */
.chips { display: flex; gap: 8px; margin: 0 0 14px; }
.chip {
  flex: 1 1 auto; min-height: 44px; padding: 0 12px; white-space: nowrap; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.35); border: 1.5px solid rgba(255,255,255,.7); color: #fff;
  font-family: var(--schrift-display); font-weight: 700; font-size: 14px; text-shadow: 0 1px 0 var(--himmel-dunkel);
  transition: transform var(--schnell) var(--feder), background var(--schnell);
}
.chip.aktiv { background: var(--papier); color: var(--himmel-dunkel); border-color: var(--himmel-dunkel); text-shadow: none; box-shadow: var(--schatten-klein); }
.chip:active { transform: scale(.95); }
.hinweis { margin: 0 0 8px; font-weight: 700; color: var(--tinte-weich); }

/* Panels gleiten beim Tab-/Unterseiten-Wechsel gestaffelt herein (gesamt ≤ 600 ms) */
.tab-seite.frisch .karte-box { animation: von-unten var(--mittel) var(--feder) both; }
.tab-seite.frisch .karte-box:nth-child(3) { animation-delay: 40ms; }
.tab-seite.frisch .karte-box:nth-child(4) { animation-delay: 80ms; }
.tab-seite.frisch .karte-box:nth-child(5) { animation-delay: 120ms; }
.tab-seite.frisch .karte-box:nth-child(6) { animation-delay: 160ms; }
.tab-seite.frisch .karte-box:nth-child(n+7) { animation-delay: 200ms; }

/* Verlust: Taler-Pille schüttelt sich kurz */
.schuettelt { animation: schuetteln .45s ease-in-out; }
.pille.taler.schuettelt { color: var(--koralle-dunkel); border-color: var(--koralle-dunkel); }
@keyframes schuetteln { 20%, 60% { transform: translateX(-5px) rotate(-2deg); } 40%, 80% { transform: translateX(5px) rotate(2deg); } }
/* Angriffs-Knopf wackelt einmal, wenn ein neues Ziel in Reichweite kommt */
.knopf.wackelt-einmal { animation: wackeln .5s ease-in-out 1; }
/* Neue Münz-Schilder ploppen auf */
.muenz-badge.neu span { animation: muenz-pop var(--mittel) var(--feder) both; }
@keyframes muenz-pop { from { transform: translate(-50%, -100%) scale(0); } to { transform: translate(-50%, -100%) scale(1); } }
/* Während der Streife bleibt die Karte ruhig: Saison-Banner nur in der Pause */
body.streife-aktiv .saison-banner { display: none; }

/* Spardosen als kompaktes Raster */
.haus-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.haus-karte { background: var(--creme); border: 1.5px solid var(--sonne-dunkel); border-radius: 3px; padding: 8px 10px; font-weight: 600; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.haus-karte strong { font-family: var(--schrift-display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haus-karte .coins { color: var(--sonne-dunkel); font-family: var(--schrift-display); font-size: 18px; }
.haus-karte small { color: var(--tinte-weich); }
.haus-karte.warnung { border-color: var(--koralle-dunkel); background: #f8ece7; }

/* Werkzeugkarten: schlank – Symbol, Name, Wirkung, Preis. Antippen = Details */
.kiste .werkzeug { font-size: 13px; cursor: pointer; transition: transform var(--schnell) var(--feder); }
.kiste .werkzeug:active { transform: scale(.96); }
.kiste .werkzeug .wirkung { background: var(--sonne); border: 2px solid var(--sonne-dunkel); color: #5b4300; border-radius: 999px; padding: 0 8px; font-size: 12px; font-family: var(--schrift-display); }
.kiste .werkzeug.verteidigung .wirkung { background: var(--himmel-hell); border-color: var(--himmel-dunkel); color: var(--himmel-dunkel); }
.kiste .werkzeug.teuer .wirkung { background: var(--lila); border-color: var(--lila-dunkel); color: #fff; }
.kiste .werkzeug small { color: var(--tinte-weich); font-size: 11px; }
.dialog-maskottchen .klein svg { width: 84px; }
.posten div { padding: 3px 10px; }

/* Test-Leiste: Gruppen, einklappbar über die Kopfzeile */
.testleiste { gap: 4px; padding: 6px 8px 8px; }
.testleiste .t-info { cursor: pointer; padding: 2px 0; }
.testleiste .t-pfeil { display: inline-block; transition: transform var(--schnell); }
.testleiste.zu .t-pfeil { transform: rotate(-90deg); }
.testleiste.zu > :not(.t-info) { display: none; }
.testleiste .t-gruppe { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.testleiste .t-label { width: 100%; text-align: center; font-size: 11px; opacity: .7; margin-top: 2px; }
.testleiste .knopf { min-height: 32px; padding: 3px 10px; font-size: 13px; }
/* Bis zu drei Aktionen in der Fortschrittskarte (Kaufen, Haus, Knacken): umbrechen statt quetschen */
.fortschritt-aktionen { flex-wrap: wrap; }
.fortschritt-aktionen .knopf { flex: 1 1 40%; }

/* ---------- Dynamik: Angebot des Tages, Rache, Tresor ---------- */
.angebot-schild { pointer-events: none; }
.angebot-schild span { display: inline-block; transform: translate(-50%, -100%); background: var(--sonne); border: 2px solid var(--sonne-dunkel); color: #5b4300; border-radius: 999px; padding: 2px 10px; font-family: var(--schrift-display); font-weight: 700; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,.2); animation: muenz-pop var(--mittel) var(--feder) both; }
.angebot-glow { animation: angebot-puls 1.6s ease-in-out infinite; }
@keyframes angebot-puls { 50% { opacity: .2; } }
.rache-hinweis { background: #f8ece7; border: 1.5px solid var(--koralle-dunkel); border-radius: 3px; padding: 8px 12px; font-weight: 600; margin: 0 0 8px; color: var(--koralle-dunkel); font-size: 15px; }
.dialog-knoepfe .knopf { padding-left: 10px; padding-right: 10px; font-size: 17px; }

/* Platz-Pille: eigene Position in der Punkteliste (nur mit Freunden) */
.pille.platz { color: var(--lila-dunkel); border-color: var(--lila-dunkel); background: var(--lila-hell); padding: 6px 12px 6px 10px; cursor: pointer; transition: transform var(--schnell) var(--feder); }
.pille.platz:active { transform: scale(.94); }
.pille.platz .pokal { font-size: 18px; }
@media (max-width: 380px) { .pille { font-size: 17px; padding: 5px 10px 5px 8px; } }

/* Hauptquartier: klar gegliederte Investitionen, auch auf kleinen Displays. */
.hq-modul { border-top: 1px solid var(--tinte-weich); margin-top: 16px; padding-top: 12px; }
.hq-modul h3 { margin: 0 0 8px; }
.hq-modul .knopf { margin-top: 8px; }

/* ---------- Druckausgabe: Brett, Besitzurkunden und Spielmarken ---------- */
body { background: #c8d3c2; background-image: none; font-size: 15px; line-height: 1.45; }
:focus-visible { outline: 3px solid var(--koralle); outline-offset: 3px; }
button, input { touch-action: manipulation; }
.spiel-icon { display: inline-block; width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }
.wortmarke { display: inline-block; background: var(--koralle); color: var(--papier); border: 1.5px solid var(--tinte); box-shadow: inset 0 0 0 3px var(--koralle), inset 0 0 0 4px rgba(255,253,245,.65); font: 700 28px/1 var(--schrift-display); letter-spacing: 1px; padding: 10px 13px 12px; white-space: nowrap; }
.app { background: var(--creme); }
.kopfleiste { flex-wrap: wrap; gap: 10px; padding: calc(12px + var(--sicher-oben)) 16px 10px; background: var(--papier); border-bottom: 1.5px solid var(--tinte); }
.markenkopf { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.markenkopf .wortmarke { font-size: 21px; padding: 8px 11px 9px; }
.ortsstempel { font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-align: right; text-transform: uppercase; line-height: 1.5; }
.maskottchen-knopf { width: 42px; height: 38px; border-radius: 2px; border: 1px solid var(--grau-dunkel); box-shadow: none; background: var(--creme); }
.maskottchen-knopf svg { width: 32px; height: 32px; margin: 0; }
.kopf-rechts { flex: 1; justify-content: flex-end; gap: 8px; }
.pille, .pille.platz { min-height: 36px; border: 0; border-left: 1px solid var(--grau-dunkel); border-radius: 0; padding: 3px 10px; background: none; color: var(--tinte); box-shadow: none; font-size: 22px; gap: 7px; }
.pille.taler { background: var(--creme); border: 1px solid var(--grau-dunkel); color: var(--tinte); min-width: 105px; justify-content: center; }
.pille.serie { color: var(--tinte-weich); }
.pille .spiel-icon { width: 18px; height: 18px; }
.muenze { width: 19px; height: 19px; border: 1.5px solid var(--sonne-dunkel); background: transparent; box-shadow: inset 0 0 0 3px var(--creme), inset 0 0 0 4px var(--sonne-dunkel); }
.sprechblase { top: calc(115px + var(--sicher-oben)); left: 12px; right: 12px; border: 1px solid var(--tinte); border-left: 5px solid var(--gras); border-radius: 2px; font-size: 14px; font-weight: 600; padding: 11px 13px; box-shadow: var(--schatten); }
.sprechblase::before, .sprechblase::after { display: none; }
body.streife-aktiv[data-tab="karte"] .sprechblase { top: calc(166px + var(--sicher-oben)); }
.tab-seite.scroll { background: var(--creme); padding: 20px 16px 30px; }
.seiten-titel { color: var(--tinte); text-shadow: none; text-transform: uppercase; font-size: 34px; line-height: 1; margin: 0 0 16px; letter-spacing: .7px; }
.seiten-kicker { display: block; font: 600 10px/1.5 var(--schrift-text); letter-spacing: 2px; color: var(--tinte-weich); margin-bottom: 5px; }
.karte-box { border-color: var(--tinte); border-width: 1px; padding: 17px; box-shadow: 2px 3px 0 #202d2610; }
.karte-box h2 { text-transform: uppercase; letter-spacing: .6px; line-height: 1.2; font-size: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--grau-dunkel); margin-bottom: 12px; }
.karte-box h2 .spiel-icon { width: 21px; height: 21px; }
.karte-box h3 { font-size: 20px; }
.hinweis, .zeile .text small { font-weight: 400; line-height: 1.5; }
.knopf, .knopf.klein { border-radius: 3px; border-width: 1.5px; min-height: 46px; box-shadow: none; font: 600 15px/1.25 var(--schrift-text); padding: 11px 14px; text-shadow: none; }
.knopf:active, .knopf.klein:active { transform: translateY(1px); box-shadow: none; }
.knopf.primaer { background: var(--gras); border-color: var(--gras-dunkel); }
.knopf.sekundaer { color: var(--tinte); border-color: var(--tinte); }
.knopf.sonne { color: var(--tinte); }
.knopf.klein { min-height: 44px; font-size: 13px; padding: 8px 11px; }
.tableiste { grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; align-items: stretch; gap: 4px; padding: 8px 8px calc(8px + var(--sicher-unten)); border-top: 1.5px solid var(--tinte); box-shadow: none; }
.tab { min-height: 53px; padding: 5px 2px; gap: 4px; border-radius: 2px; font: 600 11px/1.2 var(--schrift-text); }
.tab .tab-icon { font-size: 21px; filter: none; }
.tab.aktiv { background: var(--creme); color: var(--gras); box-shadow: inset 0 -3px 0 var(--gras); }
.tab.aktiv .tab-icon { transform: none; }
.streife-knopf { width: 100%; height: auto; min-height: 53px; margin: 0; border-radius: 3px; background: var(--gras); border: 1.5px solid var(--gras-dunkel); box-shadow: none; font: 600 11px/1.3 var(--schrift-text); text-shadow: none; gap: 3px; }
.streife-knopf .streife-icon { font-size: 22px; }
.streife-knopf.laeuft { background: var(--koralle); border-color: var(--koralle-dunkel); box-shadow: none; animation: none; }
.streife-knopf:active { transform: translateY(1px); box-shadow: none; }
.streife-leiste { border-radius: 2px; padding: 9px 12px; flex-wrap: wrap; gap: 5px 9px; font-size: 12px; border: 1px solid var(--tinte); }
.streife-leiste strong { font-size: 18px; }
.streife-status:empty { display: none; }
.saison-banner { top: 12px; }
.saison-banner span { background: var(--papier); border: 1px solid var(--tinte); border-radius: 2px; color: var(--tinte); padding: 6px 12px; font-size: 11px; }
.demo-banner { top: 52px; border-radius: 2px; }
.karten-knoepfe { bottom: 24px; }
.rund-knopf { border-radius: 3px; border: 1.5px solid var(--tinte); width: 44px; height: 44px; color: var(--tinte); }
.fortschritt-karte { border-color: var(--tinte); border-top: 9px solid var(--urkunde, var(--gras)); border-radius: 3px; padding: 12px 14px; bottom: 12px; }
.fortschritt-karte::before { content: 'GRUNDSTÜCK & AKTIONEN'; display: block; font-size: 9px; font-weight: 600; letter-spacing: 1.8px; margin-bottom: 5px; color: var(--tinte-weich); }
.fortschritt-strasse { font-size: 27px; line-height: 1.1; margin-bottom: 5px; }
.fortschritt-text { font-size: 13px; font-weight: 400; }
.fortschritt-preis { color: var(--tinte); font-size: 27px; }
.fortschritt-aktionen { gap: 7px; }
.fortschritt-aktionen .knopf { font-size: 14px; min-width: 0; }
.balken, .mini-balken { border-radius: 1px; height: 8px; border: 1px solid var(--grau-dunkel); background: var(--grau); }
.balken-fuellung, .mini-balken > div { border-radius: 0; background: var(--gras); }
.balken-fuellung.voll { background: var(--sonne); }
.balken-fuellung::after { display: none; }
.strassen-schild span { border: 1px solid #6c796c; border-radius: 1px; background: #fffdf5ee; font: 600 11px var(--schrift-text); padding: 2px 6px; box-shadow: 0 1px 2px #202d2620; }
.hausnummer span { border-radius: 1px; color: var(--tinte-weich); background: #fffdf5b3; }
.angebot-glow, .strasse-aktiv, .fahne { animation: none; }
.villa-name, .figur-name, .angebot-schild span, .muenz-badge span { border-radius: 2px; }
.villa-buehne { background: var(--creme); border: 1px solid var(--grau-dunkel); margin-bottom: 12px; padding: 8px; }
.villa-buehne svg { width: 180px; filter: none; }
.villa-titel .name { font-size: 32px; text-transform: uppercase; }
.villa-titel .titel { border-radius: 1px; border: 1px solid var(--tinte); color: var(--tinte); background: var(--creme); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.hq-modul { border-color: var(--grau-dunkel); }
.chips { gap: 0; border: 1px solid var(--tinte); background: var(--papier); border-radius: 2px; overflow: hidden; }
.chip { white-space: normal; flex: 1 1 0; min-width: 0; padding: 6px; border: 0; border-right: 1px solid var(--grau-dunkel); border-radius: 0; background: none; color: var(--tinte-weich); font: 600 12px/1.2 var(--schrift-text); text-shadow: none; }
.chip:last-child { border-right: 0; }
.chip.aktiv { background: var(--gras); color: var(--papier); box-shadow: none; }
.stat { border: 1px solid var(--grau-dunkel); border-radius: 2px; background: var(--creme); }
.stat .wert { font-size: 30px; }
.stat .name { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.zeile { border-width: 1px; border-radius: 2px; }
.zeile .icon { width: 28px; font-size: 23px; flex: none; }
.zeile .text strong { font-size: 20px; }
.sticker { border-radius: 2px; background: var(--creme); min-height: 92px; border: 1px solid var(--grau-dunkel); border-top: 10px solid var(--v, var(--grau-dunkel)); font-size: 12px; }
.sticker.hat, .sticker.hat:nth-child(even) { transform: none; border: 1px solid var(--tinte); border-top: 10px solid var(--v, var(--gras)); box-shadow: 2px 2px 0 #202d2612; }
.viertel-punkt { border-radius: 1px; border-width: 1px; }
.haus-karte { border: 1px solid var(--tinte); border-top: 6px solid var(--gras); border-radius: 2px; background: var(--papier); padding: 10px; }
.haus-karte.warnung { border-top-color: var(--koralle); }
.haus-karte strong { font-size: 19px; }
.kiste .werkzeug, .deko { border-radius: 2px; border-width: 1px; background: var(--papier); font-weight: 600; }
.kiste .werkzeug .w-icon, .deko .d-icon { color: var(--tinte); padding: 8px 0; font-size: 28px; }
.kiste .werkzeug .wirkung { border-radius: 2px; border-width: 1px; background: var(--creme); color: var(--tinte); }
.podest, .podest.p1, .podest.p2, .podest.p3 { background: var(--creme); border-width: 1px; border-radius: 2px; }
.podest.p1 { border-top: 6px solid var(--sonne); }
.podest.p2 { border-top: 6px solid var(--grau-dunkel); }
.podest.p3 { border-top: 6px solid #a47a53; }
.dialog-hintergrund { background: #162c24aa; }
.dialog { border-color: var(--tinte); border-top: 8px solid var(--gras); border-radius: 3px; padding: 20px; }
.dialog-maskottchen { margin: 0 auto 12px; }
.dialog-maskottchen svg, .dialog-maskottchen .klein svg { width: 65px; filter: none; }
.dialog-titel { font-size: 29px; text-transform: uppercase; line-height: 1.1; }
.dialog-inhalt { font-size: 15px; font-weight: 400; line-height: 1.5; }
.dialog-knoepfe .knopf { font-size: 14px; }
.posten div, .werkzeug-wahl button { border-radius: 2px; }
.eingabe { border-radius: 2px; border-color: var(--tinte); min-height: 48px; font: 600 17px var(--schrift-text); text-align: left; }
.toast { border-radius: 3px; font-size: 14px; font-weight: 600; bottom: calc(90px + var(--sicher-unten)); }
.onboarding { background: #e4eadc; background-image: none; overflow-y: auto; justify-content: flex-start; gap: 18px; padding: calc(28px + var(--sicher-oben)) 22px calc(22px + var(--sicher-unten)); }
.ob-buehne { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 100px; }
.ob-buehne svg { animation: none; filter: none; width: min(100%, 320px); }
.ob-buehne .spielmarke { width: 110px; }
.ob-logo { text-shadow: none; line-height: 1; color: var(--tinte); width: 100%; }
.ob-logo .wortmarke { font-size: clamp(30px, 8vw, 43px); width: 100%; padding: 12px 10px 15px; }
.ob-logo small { color: var(--tinte-weich); font: 600 10px/1.5 var(--schrift-text); text-transform: uppercase; letter-spacing: 2px; margin-top: 12px; }
.ob-leitsatz { font: 700 34px/1.05 var(--schrift-display); text-transform: uppercase; text-align: center; margin: 0; }
.ob-karte { flex: none; background: var(--papier); border: 1px solid var(--tinte); border-radius: 3px; padding: 20px; box-shadow: 3px 4px 0 #202d2614; }
.ob-karte h2 { font-size: 29px; text-transform: uppercase; line-height: 1.1; margin-bottom: 12px; }
.ob-karte p { font-size: 14px; font-weight: 400; }
.ob-karte label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px; }
.ob-punkte { justify-content: flex-start; gap: 5px; margin-bottom: 15px; }
.ob-punkte span, .ob-punkte span.aktiv { height: 3px; width: 24px; border-radius: 0; }
.farb-wahl { gap: 10px; grid-template-columns: repeat(8, 1fr); margin: 10px 0 22px; }
.farbe { border-radius: 2px; width: 100%; min-height: 30px; border-width: 1px; box-shadow: none; }
.farbe.gewaehlt { transform: none; outline: 2px solid var(--tinte); outline-offset: 3px; }
.farbe.gewaehlt::after { font-size: 17px; text-shadow: 0 1px 2px #000; }
.ob-regeln { list-style: none; padding: 0; margin: 0 0 16px; counter-reset: zug; }
.ob-regeln li { display: flex; gap: 12px; border-bottom: 1px solid var(--grau); padding: 10px 0; font-size: 14px; line-height: 1.4; }
.ob-regeln li::before { counter-increment: zug; content: '0' counter(zug); color: var(--gras); font: 700 24px/1 var(--schrift-display); }
.laden { background: var(--gras); background-image: none; }
.laden svg { filter: none; }
.lade-logo { text-shadow: none; text-transform: uppercase; letter-spacing: 1px; }
.lade-balken, .lade-balken > div { border-radius: 0; border-width: 1px; }
.testleiste { border-radius: 3px; background: #202d26f0; top: calc(218px + var(--sicher-oben)); }
.testleiste .knopf { border-radius: 2px; box-shadow: none; }
@media (max-height: 740px) { .onboarding { gap: 12px; padding-top: 18px; } .ob-buehne .spielbrett { width: 210px; } .ob-leitsatz { font-size: 27px; } .ob-buehne { gap: 8px; } }
@media (min-width: 600px) {
  .app { max-width: 520px; box-shadow: 0 0 0 1px #202d2640, 0 10px 60px #202d2625; }
  .onboarding { max-width: 520px; border-left: 1px solid #202d2640; border-right: 1px solid #202d2640; }
  .testleiste { max-width: 496px; margin: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; } }
/* Kompakte Einführungsseiten; Farbauswahl mit ausreichend großen Touchflächen. */
.farb-wahl { grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 16px; }
.farbe { aspect-ratio: auto; min-height: 44px; }
.ob-buehne .spielbrett { width: min(100%, 260px); }
.ob-buehne { flex: 1 0 auto; }
.onboarding:has(#ob-los) .ob-buehne { flex: 1 1 auto; gap: 8px; }
.onboarding:has(#ob-los) .ob-buehne .spielmarke { width: 64px; }
.onboarding:has(#ob-los) .ob-regeln li { padding: 8px 0; }
.onboarding:has(#ob-los) .ob-karte { padding: 17px 20px; }
.truhe, .album-seite.gold { background: var(--creme); }
.truhe .truhe-bild { font-size: 38px; }
.truhe.bereit .truhe-bild { animation: none; }
.kal-tag { border-radius: 2px; }
.sticker .s-icon { font-size: 23px; }
.sticker { aspect-ratio: auto; }
@media (max-width: 360px) {
  .markenkopf .wortmarke { font-size: 18px; padding: 7px 9px 8px; }
  .ortsstempel { font-size: 8px; letter-spacing: .6px; }
  .kopf-rechts { gap: 3px; }
  .pille, .pille.platz { padding: 3px 7px; font-size: 20px; }
  .pille.taler { min-width: 85px; }
  .sticker-raster { grid-template-columns: repeat(2, 1fr); }
  .onboarding { padding-left: 16px; padding-right: 16px; }
  .ob-karte { padding: 16px; }
}
@media (max-height: 740px) {
  .onboarding:has(#ob-los) .ob-buehne .spielmarke { display: none; }
  .ob-buehne .spielbrett { width: 190px; }
}

@media (max-width: 360px) { .kiste, .deko-raster { grid-template-columns: repeat(2, 1fr); } .chip { font-size: 11px; gap: 4px; } }
.maskottchen-knopf { width: 44px; height: 44px; }
.sprechblase { top: calc(100% + 2px); }
body.streife-aktiv[data-tab="karte"] .sprechblase { top: calc(100% + var(--streifenhoehe, 44px) + 16px); }
.testleiste { top: calc(var(--kopfhoehe, 112px) + var(--streifenhoehe, 0px) + 16px); max-height: calc(100dvh - var(--kopfhoehe, 112px) - var(--streifenhoehe, 0px) - 96px); overflow-y: auto; }

/* Meldungen und seltene Zustände gehören zum selben visuellen System. */
.toast { display: flex; align-items: flex-start; gap: 9px; text-align: left; }
.toast > .spiel-icon { margin-top: 2px; }
.einbruch-banner { flex: 0 0 100%; min-width: 0; overflow-wrap: anywhere; padding: 8px 12px; background: var(--koralle-dunkel); color: var(--papier); border: 1px solid var(--tinte); border-radius: 2px; font-weight: 600; font-size: 14px; box-shadow: var(--schatten-klein); }
.hq-modul h3 .spiel-icon { width: 20px; height: 20px; }
.startfehler { max-width: 520px; margin: 8vh auto; padding: 20px; }
.startfehler .ob-logo { margin-bottom: 28px; }
.startfehler .karte-box { text-align: center; border-top: 8px solid var(--koralle); }
.startfehler h1 { font-size: 32px; text-transform: uppercase; }
.startfehler p { overflow-wrap: anywhere; margin: 16px 0; }
.wuerfel-buehne { max-width: 100%; padding: 18px; }
.wuerfel-text { overflow-wrap: anywhere; font-size: clamp(20px, 5vw, 26px); }
.w20 { width: min(35vw, 150px); height: min(35vw, 150px); }
.w20-zahl { font-size: clamp(36px, 11vw, 56px); }
.a-tabelle .spiel-icon { width: 16px; height: 16px; }
.a-fehler { padding: 10px 12px; background: var(--papier); border: 1px solid var(--koralle); border-left-width: 5px; }

button.haus-karte { width: 100%; text-align: left; min-width: 0; }
.details-link { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--gras); font-size: 12px; }
button.haus-karte:hover, button.sticker:hover { background: var(--creme); }
button.haus-karte:focus-visible, button.sticker:focus-visible { outline: 3px solid var(--gras); outline-offset: 3px; }

.standort-dialog { background: transparent; pointer-events: none; }
.standort-dialog .dialog { pointer-events: auto; max-height: 45dvh; padding: 12px 16px; }
.standort-dialog .dialog-titel { font-size: 24px; }
.standort-dialog .dialog-inhalt { font-size: 14px; }
body.standortwahl .fortschritt-karte, body.standortwahl .sprechblase, body.standortwahl .testleiste,
body.standortwahl .streife-leiste { visibility: hidden; }
body.standortwahl .villa-icon.vorschau { animation: none; opacity: 1; }

/* ---------- Vollbild auf Tablet und PC: Karte füllt den Bildschirm, Texte bleiben lesbar ---------- */
@media (min-width: 600px) {
  .app { max-width: none; margin: 0; box-shadow: none; }
  .onboarding { max-width: none; margin: 0; border-left: 0; border-right: 0; align-items: center; }
  .onboarding > * { width: 100%; max-width: 480px; }
  .toast { left: 50%; right: auto; margin: 0; max-width: min(480px, calc(100% - 32px)); }
  .tab-seite.scroll { padding-left: max(16px, calc((100% - 820px) / 2)); padding-right: max(16px, calc((100% - 820px) / 2)); }
  .fortschritt-karte, .streife-leiste, .saison-banner, .demo-banner, .testleiste {
    left: max(12px, calc((100% - 560px) / 2)); right: max(12px, calc((100% - 560px) / 2)); max-width: none; margin: 0;
  }
  .tableiste { padding-left: max(8px, calc((100% - 640px) / 2)); padding-right: max(8px, calc((100% - 640px) / 2)); }
}
@media (min-width: 600px) {
  .sprechblase { left: max(12px, calc((100% - 560px) / 2)); right: max(12px, calc((100% - 560px) / 2)); }
}
@media (min-width: 900px) {
  /* Kopfleiste in einer Zeile: Marke · Maskottchen · Anzeigen */
  .kopfleiste { flex-wrap: nowrap; gap: 16px; }
  .markenkopf { width: auto; gap: 16px; }
  .ortsstempel { text-align: left; }
}

/* ---------- Spielbrett-Look (gekippte Karte) ---------- */
/* Straßennamen als kleine Besitzrechtkarten: Kopfbalken in Viertelfarbe */
.karte-titel span {
  border: 1.5px solid #2b2320; border-top: 7px solid var(--vf, #8a9a8f); border-radius: 2px;
  background: #fffdf3; color: #2b2320; padding: 2px 8px 2px;
  font: 700 10.5px/1.25 var(--schrift-display); text-transform: uppercase; letter-spacing: .6px;
  box-shadow: 2px 3px 0 rgba(43,35,32,.28);
}
/* Spielfigur statt Punkt */
.spielfigur-icon { position: relative; }
.spielfigur-icon .spielfigur { position: absolute; left: 0; bottom: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.spielfigur-icon.ich .figur-ring { inset: auto; left: 2px; bottom: -6px; width: 36px; height: 14px; border-radius: 50%; }
.spielfigur-icon .figur-name { top: auto; bottom: -16px; }
/* Taler-Anzeige als Spielgeldschein */
.pille.taler {
  background: linear-gradient(135deg, #e9f7df 0%, #d4efc4 100%) !important;
  border: 1px solid #6aa765 !important; color: #234d22 !important;
  box-shadow: inset 0 0 0 2px #e9f7df, inset 0 0 0 3px #9fd09a !important;
}
.pille.taler .muenze { border-color: #6aa765; box-shadow: inset 0 0 0 3px #e9f7df, inset 0 0 0 4px #6aa765; }

/* ---------- Geld zum Abholen über eigenen Häusern (gekippte Karte) ---------- */
/* Große Goldmünze, die sich dreht: vorn $, hinten der Betrag */
.geld-marke { position: relative; cursor: pointer; }
.geld-schwebe { position: absolute; left: 50%; top: 0; width: 60px; height: 60px; margin-left: -30px; perspective: 260px; animation: geld-schweben 1.9s ease-in-out infinite; will-change: transform; }
/* Schatten statisch auf der Münzfläche statt teurem Filter auf dem animierten Element */
.geld-seite svg { filter: none; } .geld-seite { border-radius: 50%; box-shadow: 0 4px 6px rgba(0,0,0,.28); }
.geld-dreh { position: relative; width: 60px; height: 60px; transform-style: preserve-3d; animation: geld-wenden 5s ease-in-out infinite; will-change: transform; }
.geld-seite { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.geld-seite.hinten { transform: rotateY(180deg); }
.geld-seite svg { display: block; }
.geld-schatten { position: absolute; left: 50%; bottom: 0; width: 40px; height: 11px; margin-left: -20px; border-radius: 50%; background: rgba(20,40,20,.3); animation: geld-schatten 1.9s ease-in-out infinite; }
.geld-marke.voll .geld-schwebe::before {
  content: ''; position: absolute; inset: -16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,92,.85) 0%, rgba(255,226,92,0) 66%); animation: geld-glanz 1.3s ease-in-out infinite;
}
.geld-marke.voll .geld-dreh { animation-duration: 3.4s; }
.geld-funkeln { position: absolute; right: -2px; top: 0; width: 11px; height: 11px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: geld-funkeln 2.4s ease-in-out infinite; }
.geld-marke.neu .geld-schwebe { animation: geld-plopp .5s var(--feder) both, geld-schweben 1.9s ease-in-out .5s infinite; }
@keyframes geld-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes geld-wenden { 0%, 34% { transform: rotateY(0); } 46%, 80% { transform: rotateY(180deg); } 92%, 100% { transform: rotateY(360deg); } }
@keyframes geld-schatten { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.75); opacity: .6; } }
@keyframes geld-glanz { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes geld-funkeln { 0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 75% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes geld-plopp { from { transform: translateY(20px) scale(.2); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .geld-dreh { animation: geld-wenden-ruhig 6s steps(1) infinite !important; } }
@keyframes geld-wenden-ruhig { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
/* Gekippte Karte: Straßenzug, auf dem man gerade läuft, leuchtet sanft */
.strasse-leuchtet { animation: strasse-leuchten 1.8s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(255,214,64,.9)); }
@keyframes strasse-leuchten { 0%, 100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }

/* ---------- Villen (gekippte Karte) ---------- */
.villa-schild { pointer-events: none; }
.villa-schild .villa-name { display: block; width: max-content; margin: 0 auto; transform: translateX(0); }
.villa-schild.fremd { pointer-events: auto; }
.villa-tippflaeche { width: 140px; height: 96px; }
.villa-wahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 58vh; overflow-y: auto; text-align: left; }
.villa-wahl { display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 2px solid #cfc9b6; border-radius: 4px; background: #fffdf3; cursor: pointer; font: inherit; }
.villa-wahl img { width: 100%; height: auto; border-radius: 3px; background: #bfe8a0; }
.villa-wahl strong { font: 700 13px/1.2 var(--schrift-display); }
.villa-wahl small { font-size: 11px; color: #5d6660; font-weight: 500; }
.villa-wahl.gewaehlt { border-color: #e0a400; box-shadow: 0 0 0 3px #ffd34d; }
.villa-akte { text-align: left; font-size: 13px; }
.villa-akte > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #d8d2bf; }
.villa-akte > div span { color: #5d6660; font-weight: 600; flex: none; }
.villa-akte > div strong { text-align: right; }
/* Einbruch-Historie in Haus- und Villen-Details */
.historie { margin-top: 10px; padding: 8px 10px; background: #f6f1e3; border: 1px solid #ddd3b8; border-radius: 4px; text-align: left; font-size: 13px; }
.historie-liste { margin-top: 6px; display: grid; gap: 2px; }
.historie-liste > div { display: grid; grid-template-columns: 82px 1fr auto; gap: 6px; padding: 3px 0; border-top: 1px dashed #ddd3b8; }
.historie-liste span:first-child { color: #6b6b5e; font-variant-numeric: tabular-nums; }
.historie small { display: block; margin-top: 3px; color: #6b6b5e; }

/* Gesperrte Kassen (Baustelle, heute schon überfallen, gerade geleert): blass, damit niemand umsonst hinläuft */
/* Gegner-Kassen größer; gesperrte grau, aber mit gut lesbarer Zahl */
.muenz-badge.fremd span { font-size: 14px; padding: 2px 9px; border-width: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.muenz-badge.gesperrt span { background: #e4e2dc; border-color: #9a968c; color: #3a3833; opacity: .9; filter: none; }
.geld-marke.gesperrt > *:not(.sperr-schloss) { opacity: .4; filter: grayscale(.85); }
.geld-marke.gesperrt { animation: none !important; }
.geld-marke .sperr-schloss { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.geld-marke.gesperrt * { animation-play-state: paused !important; }

/* ---------- Bargeld oben als echter Spielgeldschein ---------- */
.pille.taler {
  position: relative; border-radius: 3px !important; padding-left: 5px; padding-right: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, rgba(63,127,58,.07) 0 1.5px, transparent 1.5px 5px),
    radial-gradient(ellipse at 55% 50%, #f1faea 0%, #d6edc8 60%, #bfe0ab 100%) !important;
  border: 2px solid #3f7f3a !important; color: #1d461c !important;
  box-shadow: inset 0 0 0 2px #eef8e6, inset 0 0 0 3px #6aa765, 0 2px 3px rgba(0,0,0,.18) !important;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.pille.taler .muenze {
  width: 23px; height: 23px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #6cc466 0%, #2f7a2c 75%) !important;
  border: 2px solid #eef8e6 !important; box-shadow: 0 0 0 1.5px #2f6a2b !important;
}
.pille.taler .muenze::before { content: '$'; font: 900 15px/1 Georgia, 'Times New Roman', serif; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
/* Dollar-Zeichen in den Kassen-Schildern auf der Karte */
.muenz-badge .dollar { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 4px; border-radius: 50%; background: #fff; color: #7a5a00; font: 900 13px/1 Georgia, 'Times New Roman', serif; font-style: normal; vertical-align: -3px; box-shadow: inset 0 0 0 1.5px currentColor; }
.muenz-badge.fremd .dollar { color: var(--koralle-dunkel); }
.muenz-badge b { font-weight: 800; }
/* Symbol und Zahl im Kassen-Schild sauber auf einer Mittellinie */
.muenz-badge span { display: inline-flex !important; align-items: center; gap: 4px; line-height: 1; }
.muenz-badge .dollar { margin: 0; vertical-align: middle; flex: none; line-height: 1; padding-top: 1px; box-sizing: border-box; }
.muenz-badge span svg, .muenz-badge span img { display: block; flex: none; }
.muenz-badge .muenz-zahl { display: block; line-height: 1; padding-top: 1px; }

/* Kurzspielregeln als Überlagerung */
.regel-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: #e8e1cc; }
.regel-overlay-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) 12px 8px; background: #c8102e; color: #fff; font-family: var(--schrift-display); letter-spacing: .5px; }
.regel-overlay iframe { flex: 1; width: 100%; border: 0; background: #e8e1cc; }
.regel-kachel h2 { margin-bottom: 4px; }
a.knopf { text-align: center; text-decoration: none; }

/* Villa: Geld-Übersicht */
.villa-bild { width: min(100%, 340px); height: auto; border-radius: 4px; display: block; margin: 0 auto; }
.geld-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 6px; }
.geld-drei.zwei { grid-template-columns: repeat(2, 1fr); }
.geld-kachel { background: var(--creme, #f4eedc); border: 1px solid var(--grau-dunkel, #c9bfa3); border-radius: 6px; padding: 7px 7px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geld-kachel span { font-size: 12px; font-weight: 700; }
.geld-kachel strong { font: 800 20px/1.1 'Barlow Condensed', sans-serif; }
.geld-kachel small { font-size: 11px; line-height: 1.25; color: var(--tinte-weich, #5d5a50); }
.geld-kachel.sicher { border-color: #2f7a2c; }
.geld-kachel.zins { border-color: #c79a1b; }
.villa-ort { margin: 6px 0 8px; padding: 7px 9px; border-radius: 6px; background: #fff3c4; font-size: 13px; font-weight: 600; }
.villa-ort.da { background: #e3f3df; color: #1f5e1c; }
#seite-villa .karte-box > .knopf.breit + .knopf.breit { margin-top: 8px; }
.dialog .beispiel { background: #fff3c4; padding: 6px 9px; border-radius: 6px; font-size: 13px; }

/* Bank: Mühlen-Aktie */
.bank-box h2 { font-size: 18px; }
.kurs-zeile { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.kurs-zeile .kurs { font: 900 34px/1 'Barlow Condensed', sans-serif; }
.kurs-zeile .kurs small { font-size: 14px; font-weight: 700; }
.trend { font-weight: 800; font-size: 15px; padding: 2px 8px; border-radius: 999px; }
.trend.plus { background: #e3f3df; color: #1f5e1c; }
.trend.minus { background: #fbe1e4; color: #a10d25; }
.kurs-kurve { width: 100%; height: 70px; display: block; background: #fbf8ee; border: 1px solid var(--grau-dunkel, #c9bfa3); border-radius: 6px; }
.kurs-achse { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinte-weich, #5d5a50); margin-top: 2px; }
.geld-kachel.verlust { border-color: #c8102e; }
.prognose { background: #eef4fb; padding: 6px 9px; border-radius: 6px; }
.bank-regeln { margin-top: 10px; font-size: 13.5px; }
.bank-regeln summary { font-weight: 800; cursor: pointer; }
.bank-regeln ul { margin: 6px 0 0; padding-left: 18px; }
.bank-schild .villa-name { background: #fff8de; border-color: #c79a1b; }

/* Börse */
.wert-karte { border: 1px solid var(--grau-dunkel, #c9bfa3); border-radius: 8px; padding: 9px 10px; margin-top: 8px; background: #fffdf6; }
.wert-karte.hat { border-color: #c79a1b; box-shadow: inset 4px 0 0 #e7b416; }
.wert-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wert-kopf strong { font: 800 17px/1.1 'Barlow Condensed', sans-serif; }
.wert-kopf small { display: block; color: var(--tinte-weich, #5d5a50); font-size: 12px; margin-top: 1px; }
.wert-art { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: #ece4cc; padding: 1px 6px; border-radius: 999px; vertical-align: 2px; }
.mini-kurve { flex: none; }
.wert-zahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.wert-kurs { font: 900 21px/1 'Barlow Condensed', sans-serif; }
.wert-zahlen .trend { font-size: 13px; padding: 1px 7px; }
.schwank { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.schwank.ruhig { background: #e3f3df; color: #1f5e1c; }
.schwank.mittel { background: #fff3c4; color: #7a5a12; }
.schwank.wild { background: #fbe1e4; color: #a10d25; }
.wert-status { font-size: 12px; color: var(--tinte-weich, #5d5a50); margin-top: 4px; }
.wert-status.offen { color: #1f5e1c; font-weight: 700; }
.wert-position { font-size: 13px; margin-top: 5px; padding: 4px 8px; background: #fff8de; border-radius: 6px; }
.wert-position .plus { color: #1f5e1c; font-weight: 800; }
.wert-position .minus { color: #a10d25; font-weight: 800; }
.wert-knoepfe { display: flex; gap: 8px; margin-top: 7px; }
.wert-knoepfe .knopf { flex: 1; }

/* Glücksautomat */
.automat { --walze-h: 58px; background: linear-gradient(#e0283a, #a8101f); border: 4px solid #f2c230; border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 3px #7a0a15, 0 6px 14px rgba(0,0,0,.25); }
.automat-fenster { display: flex; gap: 8px; justify-content: center; }
.walze { width: 72px; height: var(--walze-h); overflow: hidden; background: #fffdf3; border: 3px solid #1b1b1b; border-radius: 8px; box-shadow: inset 0 8px 10px -6px rgba(0,0,0,.45), inset 0 -8px 10px -6px rgba(0,0,0,.45); }
.walzen-band span { display: block; height: var(--walze-h); line-height: var(--walze-h); text-align: center; font-size: 38px; }
.walzen-band span svg { width: 44px; height: 44px; vertical-align: middle; }
.automat-ergebnis { text-align: center; font-size: 16px; margin: 10px 0 0; min-height: 44px; }
.automat-ergebnis strong { font: 900 24px/1.1 'Barlow Condensed', sans-serif; color: #c8102e; letter-spacing: .5px; }

/* Charts */
.gross-kurve { margin-top: 8px; }
.gross-kurve svg { width: 100%; height: 170px; display: block; background: #fffdf6; border: 1px solid var(--grau-dunkel, #c9bfa3); border-radius: 6px; touch-action: pan-y; cursor: crosshair; }
.kurve-achse { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--tinte-weich, #5d5a50); margin-top: 2px; }
.kurve-wert { font-size: 13px; margin-top: 4px; min-height: 18px; }
.kurve-wert .plus, #wert-aenderung .plus { color: #1f5e1c; font-weight: 800; }
.kurve-wert .minus, #wert-aenderung .minus { color: #a10d25; font-weight: 800; }
.klein-chips .chip { padding: 4px 9px; font-size: 12.5px; }
button.wert-detail { width: 100%; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.wert-detail u { color: #235e4c; text-decoration-thickness: 1px; }

/* Hebel */
.hebel-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: #fff3c4; border-left: 4px solid #e0a400; font-size: 13px; }
.hebel-zeile.short { background: #fde8ea; border-left-color: #c8102e; }
.hebel-zeile.ko { opacity: .6; }
.hebel-zeile small { display: block; font-size: 12px; color: var(--tinte-weich, #5d5a50); }
.hebel-zeile .plus { color: #1f5e1c; font-weight: 800; } .hebel-zeile .minus { color: #a10d25; font-weight: 800; }
.ko-schild { font-weight: 900; color: #a10d25; white-space: nowrap; }
.hebel-liste { margin-top: 10px; }
.hebel-vorschau { margin: 8px 0 6px; padding: 7px 9px; background: #fff8de; border-radius: 6px; font-size: 13.5px; }
.hebel-vorschau .minus, .dialog .minus { color: #a10d25; font-weight: 700; } .dialog .plus { color: #1f5e1c; }
.automat-stufe { margin: 0 0 8px; padding: 6px 9px; border-radius: 6px; background: #fff3c4; color: #7a3b00; font-weight: 600; text-align: center; }

/* Portfolio → Besitz: Besitzrechtkarten */
.deed-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0; }
.deed { background: #fffdf6; border: 2px solid #1f1d1a; border-radius: 4px; box-shadow: 0 0 0 4px #fffdf6, 0 0 0 5px #1f1d1a, 0 6px 12px rgba(0,0,0,.18); margin: 6px; overflow: hidden; }
.deed.monopol { box-shadow: 0 0 0 4px #fffdf6, 0 0 0 5px #c79a1b, 0 6px 14px rgba(199,154,27,.45); }
.deed-kopf { background: var(--deed); color: #fff; text-align: center; padding: 8px 8px 9px; border-bottom: 2px solid #1f1d1a; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.deed-kopf small { display: block; font: 800 10px/1 'Barlow Condensed', sans-serif; letter-spacing: 2.5px; text-transform: uppercase; opacity: .95; }
.deed-kopf strong { display: block; font: 900 22px/1.05 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-transform: uppercase; margin-top: 3px; }
.deed-monopol { display: inline-block; margin-top: 5px; background: #fff3c4; color: #7a5a12; text-shadow: none; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.deed-miete { display: grid; grid-template-columns: 1fr 1fr; text-align: center; border-bottom: 1px dashed #c9bfa3; }
.deed-miete div { padding: 7px 4px; }
.deed-miete div + div { border-left: 1px dashed #c9bfa3; }
.deed-miete span { display: block; font-size: 11px; color: #5d5a50; text-transform: uppercase; letter-spacing: .4px; }
.deed-miete b { font: 900 22px/1.1 'Barlow Condensed', sans-serif; }
.deed-zeilen { padding: 4px 10px; }
.deed-zeilen div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-bottom: 1px dotted #e0d7bd; }
.deed-zeilen span { color: #5d5a50; }
.deed-haeuser { padding: 4px 8px 6px; display: grid; gap: 4px; }
.deed-haeuser.lose { padding: 0; }
.deed-haus { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: baseline; text-align: left; background: #f6f0de; border: 1px solid #e0d7bd; border-radius: 6px; padding: 5px 8px; font: inherit; color: inherit; cursor: pointer; }
.deed-nr { font-weight: 800; font-size: 13px; }
.deed-sterne { color: #c79a1b; font-size: 12px; letter-spacing: 1px; }
.deed-name { font-size: 12.5px; color: #3d3a33; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deed-zahl { grid-column: 1 / -1; font-size: 11.5px; color: #5d5a50; }
.deed-leer { margin: 6px 10px 8px; font-size: 12.5px; color: #5d5a50; }
.deed-fuss { border-top: 2px solid #1f1d1a; }
.deed-wert { width: 100%; display: flex; justify-content: space-between; gap: 8px; background: #f1ead4; border: 0; padding: 7px 10px; font: 800 13px/1.2 'Barlow', sans-serif; color: #1f1d1a; cursor: pointer; }
.geld-vier { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.miete-kachel { border-color: #c8102e; background: #fff4f0; }
.miete-kachel strong { color: #a10d25; }
.einnahme-gesamt { margin: 8px 0 0; padding: 7px 9px; background: #fff3c4; border-radius: 6px; }
.deed-einnahme { margin: 0; padding: 8px 10px; background: #fff4f0; border-bottom: 1px dashed #c9bfa3; text-align: center; }
.deed-einnahme span { display: block; font-size: 11px; font-weight: 800; color: #a10d25; text-transform: uppercase; letter-spacing: .5px; }
.deed-einnahme b { display: block; font: 900 28px/1.05 'Barlow Condensed', sans-serif; color: #a10d25; }
.deed-einnahme small { display: block; font-size: 11.5px; color: #5d5a50; margin-top: 2px; }
.deed-einnahme { background: #fff8de; }
.deed-einnahme span, .deed-einnahme b { color: #7a5a12; }
.kassen-kachel { border-color: #c79a1b; background: #fff8de; }
.kassen-kachel strong { color: #7a5a12; }
.deed-besuch { color: #235e4c; letter-spacing: 1px; white-space: nowrap; }
.deed-miete b { font-size: 19px; }
.lose-einnahme { border: 1px solid #e0d7bd; border-radius: 6px; margin: 4px 0 8px; }
.depot-liste { margin-top: 10px; }
.depot-zeile { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 9px; border-radius: 6px; background: #f1f6ee; border-left: 4px solid #2f7a2c; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dz-name { font-weight: 800; font-size: 14px; } .dz-name small, .dz-wert small { display: block; font-weight: 500; font-size: 11.5px; color: #5d5a50; }
.dz-wert { text-align: right; font-weight: 800; font-size: 14px; white-space: nowrap; }
.dz-wert .plus { color: #1f5e1c; font-weight: 700; } .dz-wert .minus { color: #a10d25; font-weight: 700; }

/* ---------- Laden: Werkzeugkarten im Stil einer Besitzrechtkarte ---------- */
.werkzeugkarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .werkzeugkarten { grid-template-columns: repeat(3, 1fr); } }
.werkzeugkarte { position: relative; background: #fffdf6; border: 1.5px solid var(--tinte); box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(31,29,26,.35), 0 2px 0 rgba(0,0,0,.12);
  padding: 6px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: pointer; transition: transform var(--schnell) var(--feder); }
.werkzeugkarte:active { transform: scale(.97); }
.werkzeugkarte .wk-band { align-self: stretch; background: var(--band); color: #fff; font: 800 14px/1.1 var(--schrift-display); letter-spacing: .8px; text-transform: uppercase;
  padding: 7px 4px 6px; border: 1.5px solid var(--tinte); text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.werkzeugkarte .wk-figur { position: relative; margin: 2px 0 0; }
.werkzeugkarte .wk-figur svg { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.werkzeugkarte .wk-habe { position: absolute; right: -14px; top: 0; background: var(--gras-dunkel); color: #fff; border-radius: 999px; padding: 1px 8px; font: 800 13px/1.4 var(--schrift-display); border: 2px solid #fff; }
.werkzeugkarte .wk-wirkung { font: 800 15px/1.1 var(--schrift-display); color: var(--tinte); }
.werkzeugkarte .wk-einsatz { color: var(--tinte-weich); font-size: 12px; font-weight: 600; }
.werkzeugkarte .wk-hinweis { color: var(--tinte-weich); font-size: 11.5px; line-height: 1.25; }
.werkzeugkarte .knopf { margin-top: 4px; min-width: 70%; }
.werkzeugkarte.habe { background: #f2f7ec; box-shadow: inset 0 0 0 3px #f2f7ec, inset 0 0 0 4px var(--gras-dunkel), 0 2px 0 rgba(0,0,0,.12); }
.werkzeugkarte.info { background: #fbf6e7; }
.ausruestung { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .ausruestung { grid-template-columns: 1fr 1fr; } }
.ausruestung-stueck { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1.5px solid var(--gras-dunkel); background: #f2f7ec; border-radius: 3px; text-align: left; }
.ausruestung-stueck[data-id] { cursor: pointer; }
.ausruestung-stueck svg { flex: none; }
.ausruestung-stueck strong { display: block; font-size: 15px; }
.ausruestung-stueck small { color: var(--tinte-weich); font-size: 12.5px; }
.werkzeug-wahl button .w-icon svg { display: block; }

/* Dialog: Schließen-Kreuz oben, Knöpfe bleiben bei langen Inhalten unten sichtbar */
.dialog { position: relative; }
.dialog-zu { position: sticky; top: -18px; float: right; z-index: 3; margin: -12px -12px 0 8px; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--tinte); background: var(--papier); color: var(--tinte); font: 800 17px/1 var(--schrift-display); display: grid; place-items: center; cursor: pointer; }
.dialog-zu:active { transform: scale(.94); }
.dialog-knoepfe { position: sticky; bottom: -16px; z-index: 2; background: var(--papier); margin-bottom: -16px; padding: 10px 0 16px; box-shadow: 0 -8px 10px -8px rgba(0,0,0,.18); }

/* Tagesbilanz als Kontoauszug */
.bilanz { text-align: left; font-weight: 600; }
.bilanz-datum { text-align: center; margin: 0 0 10px; color: var(--tinte-weich); }
.bilanz-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.bilanz-kacheln > div { border: 1.5px solid var(--linie, #d9cfb3); background: #fff; padding: 6px 4px; text-align: center; border-radius: 3px; }
.bilanz-kacheln > div.saldo { border-color: var(--tinte); }
.bilanz-kacheln span { display: block; font-size: 12px; color: var(--tinte-weich); text-transform: uppercase; letter-spacing: .5px; }
.bilanz-kacheln strong { font: 800 20px/1.2 var(--schrift-display); }
.bilanz h3 { margin: 12px 0 4px; font: 800 15px/1.2 var(--schrift-display); text-transform: uppercase; letter-spacing: .6px; border-bottom: 2px solid var(--tinte); padding-bottom: 2px; }
.bilanz h3 small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--tinte-weich); }
.bilanz-posten { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dotted #cfc6ad; font-size: 15px; }
.bilanz-posten small { color: var(--tinte-weich); }
.bilanz .plus { color: var(--gras-dunkel); } .bilanz .minus { color: #b3261e; }
.bilanz-fuss { font-size: 12.5px; margin-top: 10px; }

/* Basis-Übersicht: Glücksautomat kompakt */
.automat-kurz { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.automat-kurz img { width: 120px; flex: none; border-radius: 3px; }
.muehle-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d9cfb3; }
.muehle-zeile strong { display: block; }
.muehle-zeile small { color: var(--tinte-weich); }

/* Gegner-Kassen: je voller, desto etwas größer – nur dezent, damit nichts plötzlich riesig wird */
.muenz-badge.fremd.g1 span { font-size: 15px; }
.muenz-badge.fremd.g2 span { font-size: 16px; padding: 2px 10px; }
.muenz-badge.fremd.g3 span { font-size: 17px; padding: 3px 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 2px 5px rgba(0,0,0,.35); }

/* Kopfleiste ohne Maskottchen-Knopf: Anzeigen verteilen sich über die ganze Breite */
.kopfleiste .kopf-rechts { flex: 1 1 100%; justify-content: space-between; }
@media (min-width: 900px) { .kopfleiste .kopf-rechts { flex: 1 1 auto; justify-content: flex-end; } }
.kopfleiste .kopf-rechts > .pille:not([hidden]):first-child, .kopfleiste .kopf-rechts > .pille[hidden] + .pille { border-left: 0; padding-left: 0; }
@media (max-width: 899px) { .kopfleiste .kopf-rechts > .pille:last-child { padding-right: 0; } }

/* ---------- Wortmarke im Monopoly-Look: rotes Schild, weiße Buchstaben mit schwarzer Kontur, „GO“ in Gold mit Bewegungspfeil ---------- */
.wortmarke { background: #d71920; color: #fff; border: 2px solid #111; box-shadow: inset 0 0 0 3px #d71920, inset 0 0 0 5px #fff, 0 2px 0 rgba(0,0,0,.25);
  -webkit-text-stroke: 1.2px #111; paint-order: stroke fill; text-shadow: 0 2px 0 #111; letter-spacing: 1.5px; position: relative; }
.wortmarke .go { display: inline-block; position: relative; color: #ffd21f; font-size: 1.14em; line-height: .8; transform: skewX(-12deg); margin: 0 2px 0 3px;
  -webkit-text-stroke: 1.4px #111; text-shadow: 0 2px 0 #111; }
/* Bewegungspfeil unter dem GO (schwarze Kontur + goldene Füllung) */
.wortmarke .go::before, .wortmarke .go::after { content: ''; position: absolute; left: -6%; right: -22%; bottom: -.2em; height: .2em;
  clip-path: polygon(0 30%, 78% 30%, 78% 0, 100% 50%, 78% 100%, 78% 70%, 0 70%); }
.wortmarke .go::before { background: #111; transform: scale(1.12, 1.6); }
.wortmarke .go::after { background: #ffd21f; }

/* Bargeld als Geldstapel: zwei weitere Scheine schauen versetzt darunter hervor, dazu eine Banderole */
.pille.taler {
  margin-bottom: 6px;
  box-shadow: inset 0 0 0 2px #eef8e6, inset 0 0 0 3px #6aa765,
    3px 3px 0 -1px #cde8bb, 3px 3px 0 0 #3f7f3a,
    6px 6px 0 -1px #bfe0ab, 6px 6px 0 0 #3f7f3a,
    6px 8px 6px 0 rgba(0,0,0,.22) !important;
}
.pille.taler::after { content: ''; position: absolute; top: 0; bottom: 0; left: 34px; width: 9px; background: linear-gradient(90deg, #f3e2a8, #e7c873 50%, #f3e2a8); border-left: 1px solid rgba(90,70,10,.45); border-right: 1px solid rgba(90,70,10,.45); opacity: .9; pointer-events: none; }
.pille.taler .muenze { position: relative; z-index: 1; }

/* ================= Kopfleiste neu: eine Zeile wie ein Spielbrett-Rand =================
   Links die Wortmarke (mit Ortszeile), rechts Platz-Medaille und Geldstapel,
   Hintergrund im Mintgrün des Monopoly-Bretts, unten ein Band in den Straßenfarben. */
.kopfleiste { flex-wrap: nowrap !important; align-items: center; gap: 10px !important;
  padding: calc(9px + var(--sicher-oben)) 12px 13px !important;
  background: #d8ecd3 !important; border-bottom: 2px solid #111 !important; }
.kopfleiste .markenkopf { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; width: auto !important; min-width: 0; }
.kopfleiste .markenkopf .wortmarke { font-size: 19px; padding: 7px 10px 8px; }
.kopfleiste .ortsstempel { font-size: 8.5px; letter-spacing: 1.1px; text-align: left !important; line-height: 1.2; color: #1e3d1f; font-weight: 700; white-space: nowrap; padding-left: 2px; }
.kopfleiste .kopf-rechts { flex: 1 1 auto !important; display: flex; align-items: center; justify-content: flex-end !important; gap: 10px !important; }
.kopf-farbband { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; pointer-events: none;
  background: linear-gradient(90deg, #955436 0 12.5%, #aae0fa 12.5% 25%, #d93a96 25% 37.5%, #f7941d 37.5% 50%, #ed1b24 50% 62.5%, #fef200 62.5% 75%, #1fb25a 75% 87.5%, #0072bb 87.5%); border-top: 1px solid #111; }
/* Platz als Medaille */
.kopfleiste .pille.platz { border: 2px solid #111 !important; border-radius: 999px !important; background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c94c 60%, #c99a1c) !important;
  color: #111 !important; padding: 3px 10px 3px 6px !important; min-height: 0; gap: 4px; box-shadow: 0 2px 0 #111 !important; font-size: 18px; }
.kopfleiste .pille.platz .pokal .spiel-icon { width: 18px; height: 18px; }
.kopfleiste .platz-text { display: flex; flex-direction: column; align-items: flex-start; line-height: .95; font-family: var(--schrift-display); font-weight: 800; }
.kopfleiste .platz-text small { font-size: 8px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; }
/* Geldstapel etwas kompakter, damit alles in eine Zeile passt */
.kopfleiste .pille.taler { min-width: 0 !important; font-size: 20px; padding: 4px 12px 4px 5px !important; margin-bottom: 6px; border-left: 2px solid #3f7f3a !important; }
.kopfleiste .pille.taler::after { left: 13px; }
.kopfleiste #taler-zahl { position: relative; z-index: 1; }
@media (max-width: 370px) {
  .kopfleiste .markenkopf .wortmarke { font-size: 16px; padding: 6px 8px 7px; }
  .kopfleiste .ortsstempel { font-size: 7px; letter-spacing: .6px; }
  .kopfleiste .pille.taler { font-size: 17px; }
  .kopfleiste .kopf-rechts { gap: 6px !important; }
}

/* Platz-Medaille: goldene Siegermünze mit Zylinder (Monopoly) und Ordensbändern – ersetzt die Pille */
.kopfleiste .pille.platz.medaille { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0; margin: -6px 0 -10px; }
.kopfleiste .pille.platz.medaille svg { display: block; width: 54px; height: 54px; filter: drop-shadow(0 2px 1.5px rgba(0,0,0,.35)); }
.kopfleiste .pille.platz.medaille:active { transform: scale(.93); }

/* Platz-Anzeige „edel“: schwarzer Lack mit Goldrahmen und Goldprägung (wie die Sonderedition-Packung) */
.kopfleiste .pille.platz.edel { position: relative; border-radius: 999px !important; padding: 5px 14px 5px 9px !important; gap: 7px; min-height: 0;
  background: radial-gradient(120% 140% at 30% 0%, #3a3a3a 0%, #161616 45%, #050505 100%) !important;
  border: 1.5px solid #b8891e !important; color: #f6e3a1 !important;
  box-shadow: inset 0 0 0 2px #0b0b0b, inset 0 0 0 3px rgba(240,205,110,.55), inset 0 1px 0 4px rgba(255,255,255,.04), 0 2px 0 #6e5212, 0 4px 8px rgba(0,0,0,.28) !important; }
.kopfleiste .pille.platz.edel .pokal svg { display: block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.kopfleiste .pille.platz.edel .platz-text { line-height: .92; }
.kopfleiste .pille.platz.edel .platz-text small { font-size: 7.5px; letter-spacing: 1.6px; color: #d9b75a; font-family: var(--schrift); font-weight: 700; }
.kopfleiste .pille.platz.edel #platz-zahl { font: 800 21px/1 var(--schrift-display);
  background: linear-gradient(180deg, #fff6cf 0%, #f2d06a 45%, #c4931f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kopfleiste .pille.platz.edel:active { transform: scale(.95); }

/* Platz-Anzeige hell & edel: polierte Goldplakette mit Doppelrand, Glanzlicht und geprägter Zahl */
.kopfleiste .pille.platz.edel { overflow: hidden; color: #4a3000 !important;
  background: linear-gradient(180deg, #fff8d6 0%, #fbe58f 38%, #f1c94a 62%, #dca52b 100%) !important;
  border: 1.5px solid #8a6208 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), inset 0 0 0 3px rgba(176,128,24,.55), 0 2px 0 #9a6f0e, 0 4px 7px rgba(110,80,10,.25) !important; }
.kopfleiste .pille.platz.edel::before { content: ''; position: absolute; left: 8%; right: 8%; top: 2px; height: 42%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0)); pointer-events: none; }
.kopfleiste .pille.platz.edel > * { position: relative; }
.kopfleiste .pille.platz.edel .pokal svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.kopfleiste .pille.platz.edel .platz-text small { color: #7a5306; }
.kopfleiste .pille.platz.edel #platz-zahl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #4a3000; text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 -1px 0 rgba(120,80,0,.25); }

/* Neues aus der Gruppe: Symbole als kleine Brettfelder */
.zeile .icon.ereignis-feld { flex: none; width: 38px; height: 38px; display: grid; place-items: center; background: #fffdf6; border: 1.5px solid var(--tinte); border-radius: 4px; box-shadow: 0 2px 0 rgba(31,29,26,.18); font-size: 0; }
.zeile .icon.ereignis-feld svg { display: block; }

/* Preise der Saison über der Punkteliste */
.preis-banner { margin: 0 0 12px; padding: 10px 12px 9px; text-align: center; border: 1.5px solid #8a6208; border-radius: 6px;
  background: linear-gradient(180deg, #fff8d6 0%, #fbe58f 55%, #f1c94a 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 2px 0 #9a6f0e; color: #3d2a00; }
.preis-banner > strong { display: block; font: 800 16px/1.2 var(--schrift-display); letter-spacing: .6px; text-transform: uppercase; }
.preis-reihe { display: flex; justify-content: center; gap: 8px; margin: 7px 0 5px; }
.preis-reihe span { background: #fffdf6; border: 1.5px solid var(--tinte); border-radius: 4px; padding: 3px 10px; font: 800 18px/1.2 var(--schrift-display); }
.preis-reihe span b { color: #c8102e; margin-right: 3px; }
.preis-banner small { font-size: 12.5px; font-weight: 600; }
.preis-melden { margin: 8px 0 0; padding: 7px 8px; background: #fffdf6; border: 1.5px dashed #c8102e; border-radius: 4px; font-weight: 700; font-size: 13.5px; color: var(--tinte); }
.preis-melden a, .preis-hinweis a { color: #c8102e; font-weight: 800; word-break: break-all; }
.preis-hinweis { margin-top: 10px; padding: 8px 10px; background: #fff3c4; border: 1.5px solid #8a6208; border-radius: 4px; font-size: 14px; }

/* Wegwischbare Einblendungen: Finger zieht sie ohne Seitenscrollen, Meldungen sind antippbar */
[data-wischbar] { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#fortschritt-karte[data-wischbar] { touch-action: none; }
.toast.sichtbar { pointer-events: auto; }
.saison-banner[data-wischbar] span { pointer-events: auto; cursor: grab; }

/* Sparmodus (Bots): keine CSS-Animationen und Übergänge */
html.sparsam *, html.sparsam *::before, html.sparsam *::after { animation: none !important; transition: none !important; }
html.sparsam #karte { visibility: hidden; }

/* Mühli-Algo in der Börse – im Stil von Spielkarte, Besitzrechtkarte, Spielgeld und Ereigniskarte */
.algo-box { background: #fffdf6; }
.algo-kopf { position: relative; margin: 72px -4px 8px; }
.algo-band { background: #1f6b4f; color: #fff; text-align: center; font: 800 17px/1.1 var(--schrift-display); letter-spacing: 1.2px; text-transform: uppercase; padding: 10px 92px 10px 10px; border: 2px solid var(--tinte); box-shadow: inset 0 0 0 2px #1f6b4f, inset 0 0 0 3px rgba(255,255,255,.55); }
.algo-figur { position: absolute; right: -6px; top: -82px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.algo-text { margin: 10px 0 6px; font-weight: 600; font-size: 14px; text-align: center; }
.algo-test { text-align: center; font: 800 11.5px/1.3 var(--schrift-display); letter-spacing: 1px; color: #8e0b20; border: 1.5px dashed #8e0b20; border-radius: 3px; padding: 4px 6px; margin-bottom: 10px; }
.algo-scheine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.algo-schein { text-align: center; padding: 6px 4px; border: 2px solid #3f7f3a; border-radius: 3px; box-shadow: inset 0 0 0 2px #eef8e6, inset 0 0 0 3px #6aa765, 2px 2px 0 -1px #cde8bb, 2px 2px 0 0 #3f7f3a;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 1.5px, transparent 1.5px 5px), radial-gradient(ellipse at 50% 50%, #f1faea 0%, #d6edc8 70%, #bfe0ab 100%); color: #1d461c; }
.algo-schein.rot { border-color: #8e0b20; box-shadow: inset 0 0 0 2px #fdeceb, inset 0 0 0 3px #d97a74, 2px 2px 0 -1px #f3c6c2, 2px 2px 0 0 #8e0b20; background: linear-gradient(#fdf1ef, #f6d5d1); color: #6e0a18; }
.algo-schein span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.algo-schein strong { display: block; font: 800 21px/1.15 var(--schrift-display); }
.algo-schein small { font-size: 11px; font-weight: 600; }
.algo-h3 { margin: 14px 0 6px; font: 800 14px/1.2 var(--schrift-display); text-transform: uppercase; letter-spacing: .8px; border-bottom: 2px solid var(--tinte); padding-bottom: 2px; }
.algo-urkunden { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.algo-urkunde { background: #fff; border: 1.5px solid var(--tinte); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(31,29,26,.3); padding: 4px 4px 6px; }
.algo-urkunde-band { color: #fff; text-align: center; font: 800 12.5px/1.2 var(--schrift-display); letter-spacing: .5px; text-transform: uppercase; padding: 5px 3px; border: 1.5px solid var(--tinte); }
.algo-urkunde.long .algo-urkunde-band { background: #1d9f50; } .algo-urkunde.short .algo-urkunde-band { background: #e1262c; }
.algo-staffel { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; margin: 5px 3px 0; font-size: 12.5px; }
.algo-staffel b { text-align: right; } .algo-staffel span { color: var(--tinte-weich); }
.algo-seit { display: block; text-align: center; margin-top: 3px; color: var(--tinte-weich); font-size: 11px; }
.algo-box .plus { color: var(--gras-dunkel); } .algo-box .minus { color: #b3261e; }
.algo-ruhe { margin: 0; padding: 8px 10px; background: #f2f7ec; border: 1px solid #9fd09a; border-radius: 3px; font-weight: 600; font-size: 13.5px; text-align: center; }
.algo-auszug { background: #fff; border: 1px solid #d9cfb3; border-radius: 3px; padding: 2px 8px; font-size: 13.5px; }
.algo-auszug > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #cfc6ad; }
.algo-auszug > div:last-child { border-bottom: 0; }
.algo-bilanz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; padding: 6px 6px 4px; background: #fff; border: 1px solid #d9cfb3; border-radius: 3px; text-align: center; }
.algo-bilanz span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--tinte-weich); }
.algo-bilanz b { font: 800 15px/1.2 var(--schrift-display); }
.algo-bilanz small { grid-column: 1 / -1; font-size: 11px; color: var(--tinte-weich); line-height: 1.3; }
.algo-positionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.algo-position { perspective: 1100px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.algo-position:focus-visible { outline: 3px solid #f5c400; outline-offset: 2px; }
.algo-pos-innen { display: grid; transition: transform .6s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.algo-position.gedreht .algo-pos-innen { transform: rotateY(180deg); }
.algo-pos-seite { grid-area: 1 / 1; background: #fff; border: 1.5px solid var(--tinte); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(31,29,26,.3); padding: 4px 4px 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.algo-pos-seite.hinten { transform: rotateY(180deg); background: #fffdf5; }
.algo-pos-seite { display: flex; flex-direction: column; } .algo-pos-seite .algo-dreh-hinweis { margin-top: auto; padding-top: 6px; }
.algo-position.long .algo-urkunde-band { background: #1d9f50; } .algo-position.short .algo-urkunde-band { background: #e1262c; }
.algo-pos-seite.hinten .algo-urkunde-band { background: #3d3a33 !important; }
.algo-dreh-hinweis { display: block; text-align: center; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--tinte-weich); }
.algo-details { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 8px 6px 0; font-size: 12px; line-height: 1.35; }
.algo-details dt { font-weight: 800; color: var(--tinte-weich); } .algo-details dd { margin: 0; }
.algo-auszug-klapp { margin-top: 14px; }
.algo-auszug-klapp > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; font: 800 14px/1.2 var(--schrift-display); text-transform: uppercase; letter-spacing: .8px; border-bottom: 2px solid var(--tinte); padding-bottom: 2px; margin-bottom: 6px; }
.algo-auszug-klapp > summary::-webkit-details-marker { display: none; }
.algo-auszug-klapp > summary span::before { content: '▸ '; } .algo-auszug-klapp[open] > summary span::before { content: '▾ '; }
.algo-auszug-klapp > summary small { font: 700 12px/1.2 var(--schrift-text); text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .algo-pos-innen { transition: none; } }
.algo-pos-kopf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 4px 2px; text-align: center; }
.algo-pos-kopf span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--tinte-weich); }
.algo-pos-kopf b { display: block; font: 800 17px/1.2 var(--schrift-display); }
.algo-pos-kopf small { display: block; font-size: 11px; color: var(--tinte-weich); }
.algo-leiste { position: relative; height: 12px; margin: 10px 10px 2px; border: 1.5px solid var(--tinte); border-radius: 2px; background: #eee; }
.algo-leiste i { position: absolute; top: 0; bottom: 0; }
.algo-leiste i.verlust { left: 0; background: repeating-linear-gradient(45deg, #f3b9b4 0 4px, #f8d3cf 4px 8px); }
.algo-leiste i.gewinn { background: repeating-linear-gradient(45deg, #a8dca0 0 4px, #c9eac2 4px 8px); }
.algo-leiste em.ein { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tinte); }
.algo-leiste b.jetzt { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #f5c400; border: 2px solid var(--tinte); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.algo-leiste-text { display: flex; justify-content: space-between; margin: 4px 4px 0; font-size: 11px; line-height: 1.25; color: var(--tinte-weich); }
.algo-leiste-text span:nth-child(2) { text-align: center; } .algo-leiste-text span:last-child { text-align: right; }
.algo-leiste-text b { color: var(--tinte); font-size: 12.5px; }
.algo-pos-text { margin: 6px 6px 0; font-size: 12.5px; line-height: 1.4; }
.algo-pos-fuss { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 4px 0; }
.algo-marke { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px; background: #f1ece0; color: var(--tinte-weich); }
.algo-marke.stark, .algo-marke.gut { background: #dff1d9; color: #1d5a1c; } .algo-marke.schwach { background: #fbe3d9; color: #8a2d12; } .algo-marke.mittel { background: #fff1c2; color: #6b5300; }
.algo-auszug-summe { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.algo-auszug > div.algo-auszug-tag { background: #f4efe2; margin: 0 -8px; padding: 4px 8px; font-size: 12px; font-weight: 800; color: var(--tinte-weich); border-bottom: 1px solid #d9cfb3; }
.algo-auszug-zeile .az-links { display: flex; flex-direction: column; min-width: 0; }
.algo-auszug-zeile .az-links small { font-size: 11.5px; color: var(--tinte-weich); }
.algo-auszug-zeile .az-rechts { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.algo-auszug-zeile .az-rechts small { font-size: 11px; }
.algo-ereignis { margin-top: 14px; padding: 8px; background: #f39223; border: 2px solid var(--tinte); border-radius: 4px; box-shadow: inset 0 0 0 3px #f39223, inset 0 0 0 4px #fff3df; color: #2b1a00; text-align: center; }
.algo-ereignis-kopf { font: 900 15px/1.2 var(--schrift-display); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.algo-ereignis p { margin: 4px 0 2px; font-weight: 600; font-size: 14px; }
.algo-ereignis small { font-size: 12px; font-weight: 600; }
.algo-mini { font-weight: 800; } .algo-mini.long { color: var(--gras-dunkel); } .algo-mini.short { color: #b3261e; }
/* Eigenes Algo-Konto */
.algo-mein { margin: 10px 0 4px; padding: 10px; border: 2px solid var(--tinte); border-radius: 4px; background: #f2f7ec; }
.algo-akku { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.algo-akku-balken { flex: none; width: 54px; height: 24px; border: 2px solid var(--tinte); border-radius: 4px; padding: 2px; position: relative; background: #fff; }
.algo-akku-balken::after { content: ''; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: var(--tinte); border-radius: 0 2px 2px 0; }
.algo-akku-balken span { display: block; height: 100%; background: linear-gradient(#5fd06a, #1d9f50); border-radius: 2px; }
.algo-akku-text b { display: block; font: 800 16px/1.2 var(--schrift-display); }
.algo-akku-text small { color: var(--tinte-weich); font-size: 11.5px; }
.algo-laden { margin: 4px 0 10px; padding: 8px; background: #fff; border: 1.5px dashed #1f6b4f; border-radius: 4px; font-size: 13.5px; }
.algo-laden small { display: block; margin-top: 4px; color: var(--tinte-weich); }
.algo-mein > .knopf { margin-bottom: 10px; }
.algo-schein strong.klein { font-size: 16px; padding: 3px 0; }
.algo-knoepfe { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.algo-knoepfe .knopf { flex: 1 1 auto; }
.algo-wahl { margin-top: 10px; display: grid; gap: 4px; }
.algo-option { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1.5px solid #d9cfb3; border-radius: 4px; background: #fff; font-weight: 600; }
.algo-option input { margin-top: 3px; accent-color: #1f6b4f; }
.algo-option small { display: block; color: var(--tinte-weich); font-size: 12px; font-weight: 500; }
.algo-option:has(input:checked) { border-color: #1f6b4f; background: #f2f7ec; }
/* Algo-Signal auf der Wertkarte */
.algo-signal { margin: 6px 0 2px; border: 1.5px solid var(--tinte); border-radius: 3px; overflow: hidden; background: #fff; }
.algo-signal-band { color: #fff; padding: 4px 8px; font: 800 13.5px/1.2 var(--schrift-display); letter-spacing: .6px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.algo-signal-band small { font: 600 11px/1 var(--schrift); text-transform: none; letter-spacing: 0; opacity: .9; }
.algo-signal.long .algo-signal-band { background: #1d9f50; } .algo-signal.short .algo-signal-band { background: #e1262c; }
.algo-signal-werte { display: flex; justify-content: space-between; gap: 6px; padding: 4px 8px; font-size: 12.5px; color: var(--tinte-weich); }
.algo-signal-werte b { color: var(--tinte); } .algo-signal-werte .plus { color: var(--gras-dunkel); } .algo-signal-werte .minus { color: #b3261e; }

/* Straßenschilder antippbar machen (vor allem für iPhones), mit etwas größerer Trefferfläche */
.zoom-nah .strassen-schild { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zoom-nah .strassen-schild span { pointer-events: auto; position: relative; }
.zoom-nah .strassen-schild span::after { content: ''; position: absolute; inset: -8px -6px; }
.strassen-schild:active span { filter: brightness(.92); }
/* Häufige Algo-Signale (unten in der Börse) */
.algo-oft-spalten { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .algo-oft-spalten { grid-template-columns: 1fr 1fr; } }
.algo-oft-kopf { color: #fff; font: 800 13px/1.2 var(--schrift-display); letter-spacing: .6px; text-transform: uppercase; padding: 5px 8px; border: 1.5px solid var(--tinte); border-bottom: 0; }
.algo-oft-kopf.long { background: #1d9f50; } .algo-oft-kopf.short { background: #e1262c; }
.algo-oft-zeile { display: grid; grid-template-columns: 7.5em 1fr 2.6em; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; background: #fff; border: 1.5px solid var(--tinte); border-top: 1px dotted #cfc6ad; font: 600 13.5px/1.2 var(--schrift); text-align: left; color: var(--tinte); cursor: pointer; }
.algo-oft-zeile:first-of-type { border-top: 1.5px solid var(--tinte); }
.algo-oft-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.algo-oft-balken { height: 8px; background: #eee8d6; border-radius: 4px; overflow: hidden; }
.algo-oft-balken i { display: block; height: 100%; border-radius: 4px; }
.algo-oft-zeile.long .algo-oft-balken i { background: #1d9f50; } .algo-oft-zeile.short .algo-oft-balken i { background: #e1262c; }
.algo-oft-zeile b { text-align: right; font-family: var(--schrift-display); }
.streife-leiste .streife-turbo { background: linear-gradient(#fff3b0, #e8b62e); color: #3d2a00 !important; opacity: 1 !important; font-weight: 800; border: 1.5px solid #8a6208; border-radius: 999px; padding: 1px 8px; font-size: 12.5px; white-space: nowrap; }
/* Logbuch des Algos (Changelog im Monopoly-Look: Spielkarte mit Kopfband) */
.algo-logbuch { margin: 12px 0 4px; background: #fffdf6; border: 1.5px solid var(--tinte); box-shadow: inset 0 0 0 2px #fffdf6, inset 0 0 0 3px rgba(31,29,26,.3); padding: 4px 4px 8px; }
.algo-logbuch-kopf { background: #1b5fae; color: #fff; text-align: center; font: 800 14px/1.2 var(--schrift-display); letter-spacing: .8px; text-transform: uppercase; padding: 6px 4px; border: 1.5px solid var(--tinte); }
.algo-lernt { margin: 8px 6px 4px 22px; padding: 0; font-size: 13px; }
.algo-lernt li { margin: 3px 0; }
.algo-logbuch-zuletzt { margin: 6px 6px; font-size: 12.5px; font-weight: 700; color: #1b5fae; }
.algo-logbuch-liste { margin: 4px 6px 0; }
.algo-logbuch-eintrag { padding: 6px 0; border-top: 1px dotted #cfc6ad; font-size: 13.5px; }
.algo-logbuch-zeile { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.algo-logbuch-gruppe { font: 800 12px/1.2 var(--schrift-display); text-transform: uppercase; letter-spacing: .5px; color: #1f6b4f; }
.algo-logbuch-zeile small, .algo-logbuch-beleg { color: var(--tinte-weich); font-size: 11.5px; }
.algo-logbuch-beleg { display: block; margin-top: 2px; }
.algo-logbuch > summary { list-style: none; cursor: pointer; display: flex; justify-content: center; gap: 8px; }
.algo-logbuch > summary::-webkit-details-marker { display: none; }
.algo-logbuch-pfeil { transition: transform .2s; }
.algo-logbuch[open] .algo-logbuch-pfeil { transform: rotate(180deg); }
.algo-logbuch:not([open]) { padding-bottom: 4px; }

/* Kleine Positionskarten (3 nebeneinander) */
.algo-position .algo-urkunde-band { font-size: 11px; padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.algo-position .algo-pos-seite { padding: 3px 3px 4px; text-align: center; }
.algo-mini-stand { display: block; margin-top: 5px; font: 800 18px/1.1 var(--schrift-display); }
.algo-mini-proz { display: block; font-size: 11px; font-weight: 700; }
.algo-position .algo-leiste { height: 8px; margin: 7px 5px 4px; }
.algo-position .algo-leiste b.jetzt { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.algo-position .algo-leiste em.ein { top: -3px; bottom: -3px; }
.algo-mini-fuss { position: relative; display: block; margin-top: auto; padding: 3px 12px 0; font-size: 10.5px; font-weight: 700; color: var(--tinte-weich); }
.algo-mini-dreh { position: absolute; right: 1px; bottom: 0; font-size: 12px; opacity: .7; }
.algo-mini-details { display: grid; grid-template-columns: auto 1fr; gap: 1px 4px; margin: 5px 2px 0; font-size: 11px; text-align: right; }
.algo-mini-details dt { text-align: left; color: var(--tinte-weich); font-weight: 700; } .algo-mini-details dd { margin: 0; font-weight: 800; }
.algo-pos-seite.hinten .algo-mini-fuss { min-height: 15px; }

/* ---------- Live-Ticker (Monopoly-Stil) ---------- */
.live-schild { display: inline-flex; flex-direction: column; align-items: stretch; min-width: 78px; background: #fbf6e6; color: #1f1d1a; border: 2px solid #1f1d1a; border-radius: 2px; box-shadow: inset 0 0 0 2px #fbf6e6, inset 0 0 0 3px rgba(31,29,26,.35), 2px 2px 0 rgba(31,29,26,.25); padding: 3px; text-align: center; white-space: nowrap; }
.live-kopf { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 8px 2px; background: #e1262c; color: #fff; border: 1.5px solid #1f1d1a; font: 900 13px/1 var(--schrift-display); letter-spacing: 2.4px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.live-kopf i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff6a8; border: 1px solid #7a0d12; }
.live-kopf i::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: rgba(255, 246, 168, .8); animation: ring-puls 1.6s ease-out infinite; }
@keyframes ring-puls { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
.live-schild small { display: block; padding: 3px 4px 1px; font: 700 10.5px/1 var(--schrift-text); letter-spacing: .2px; color: #3d3a33; }
.live-schild.still .live-kopf { background: #7c776c; }
.live-schild.still .live-kopf i { background: #c9c4b8; border-color: #4d4a43; } .live-schild.still .live-kopf i::after { display: none; }
@keyframes live-puls { 0% { box-shadow: 0 0 0 0 rgba(255, 246, 168, .9); } 70% { box-shadow: 0 0 0 6px rgba(255, 246, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 246, 168, 0); } }
.ticker-band { display: flex; align-items: stretch; margin: 0 0 12px; background: #f6efd6; border: 2px solid var(--tinte); box-shadow: inset 0 0 0 2px #f6efd6, inset 0 0 0 3px rgba(31,29,26,.35); overflow: hidden; }
.ticker-band > .live-schild { flex: none; z-index: 1; margin: 2px; box-shadow: inset 0 0 0 2px #fbf6e6, inset 0 0 0 3px rgba(31,29,26,.35); }
.ticker-fenster { flex: 1; overflow: hidden; position: relative; }
.ticker-lauf { display: inline-flex; white-space: nowrap; animation: ticker-lauf linear infinite; will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.ticker-band:active .ticker-lauf, .ticker-band:hover .ticker-lauf { animation-play-state: paused; }
@keyframes ticker-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tick-wert { display: inline-block; padding: 6px 10px 5px; border-right: 1.5px solid var(--tinte); font-size: 12.5px; box-shadow: inset 0 3px 0 #1d9f50; }
.tick-wert.runter { box-shadow: inset 0 3px 0 #e1262c; }
.tick-wert b { font: 800 12.5px/1 var(--schrift-display); text-transform: uppercase; letter-spacing: .5px; }
.tick-wert em { font-style: normal; font-weight: 800; }
.tick-wert em.plus { color: var(--gras-dunkel); } .tick-wert em.minus { color: #b3261e; }
.tick-hoch { animation: tick-gruen 1.4s ease-out; } .tick-runter { animation: tick-rot 1.4s ease-out; }
.tick-wert.tick-hoch, .tick-wert.tick-runter { animation: none; }
@keyframes tick-gruen { 0% { background-color: rgba(29, 159, 80, .45); } 100% { background-color: transparent; } }
@keyframes tick-rot { 0% { background-color: rgba(225, 38, 44, .4); } 100% { background-color: transparent; } }
.algo-mini-stand.tick-hoch, .algo-mini-stand.tick-runter { border-radius: 3px; }
.algo-leiste b.jetzt { transition: left 1s cubic-bezier(.3, .7, .3, 1); }
.algo-leiste i, .algo-leiste em.ein { transition: left 1s ease, width 1s ease; }
.algo-mini-kurve { position: relative; display: block; height: 30px; margin: 5px 8px 2px 2px; }
.algo-mini-kurve svg { display: block; width: 100%; height: 30px; overflow: visible; }
.algo-mini-kurve polygon { stroke: none; opacity: .14; } .algo-mini-kurve polygon.plus { fill: #1d9f50; } .algo-mini-kurve polygon.minus { fill: #e1262c; }
.kurve-punkt { position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--tinte); }
.kurve-punkt.plus { background: #1d9f50; } .kurve-punkt.minus { background: #e1262c; }
.kurve-punkt::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; animation: ring-puls 1.8s ease-out infinite; }
.kurve-punkt.plus::after { background: rgba(29, 159, 80, .55); } .kurve-punkt.minus::after { background: rgba(225, 38, 44, .55); }
@keyframes punkt-gruen { 0% { box-shadow: 0 0 0 1px var(--tinte), 0 0 0 0 rgba(29,159,80,.6); } 70% { box-shadow: 0 0 0 1px var(--tinte), 0 0 0 7px rgba(29,159,80,0); } 100% { box-shadow: 0 0 0 1px var(--tinte), 0 0 0 0 rgba(29,159,80,0); } }
@keyframes punkt-rot { 0% { box-shadow: 0 0 0 1px var(--tinte), 0 0 0 0 rgba(225,38,44,.6); } 70% { box-shadow: 0 0 0 1px var(--tinte), 0 0 0 7px rgba(225,38,44,0); } 100% { box-shadow: 0 0 0 1px var(--tinte), 0 0 0 0 rgba(225,38,44,0); } }
.kurve-pfeil { position: absolute; left: 0; top: -3px; font-size: 8.5px; font-weight: 800; opacity: .75; line-height: 1; }
.kurve-pfeil.plus { color: #1d7a3e; } .kurve-pfeil.minus { color: #b3261e; }
.algo-mini-kurve polyline { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.algo-mini-kurve polyline.plus { stroke: #1d9f50; } .algo-mini-kurve polyline.minus { stroke: #e1262c; }
.algo-mini-kurve line.ein { stroke: var(--tinte); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .55; }
/* Ereigniskarte (Gewinn, orange) und Gemeinschaftskarte (Verlust, blau) beim Ausstieg */
.algo-pop { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 4000; width: min(300px, calc(100vw - 32px)); transform: translate(-50%, 140%) rotate(-4deg); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; cursor: pointer;
  padding: 10px 12px 10px; border: 2px solid var(--tinte); border-radius: 6px; text-align: center; color: #1f1d1a; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.algo-pop.da { transform: translate(-50%, 0) rotate(-1.5deg); opacity: 1; }
.algo-pop.ereignis { background: #f39223; box-shadow: inset 0 0 0 3px #f39223, inset 0 0 0 4.5px #fff3df, 0 10px 28px rgba(0,0,0,.35); }
.algo-pop.gemeinschaft { background: #bfe0f2; box-shadow: inset 0 0 0 3px #bfe0f2, inset 0 0 0 4.5px #fff, 0 10px 28px rgba(0,0,0,.35); }
.algo-pop-kopf { font: 900 15px/1.2 var(--schrift-display); letter-spacing: 1.6px; text-transform: uppercase; }
.algo-pop.ereignis .algo-pop-kopf { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.algo-pop-figur { display: flex; justify-content: center; margin: 2px 0 0; }
.algo-pop p { margin: 4px 0; font-weight: 700; font-size: 14px; line-height: 1.3; }
.algo-pop-betrag { display: block; font: 900 24px/1.1 var(--schrift-display); }
.algo-pop.ereignis .algo-pop-betrag { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); } .algo-pop.gemeinschaft .algo-pop-betrag { color: #8e0b20; }
.algo-pop small { display: block; margin-top: 3px; font-size: 10.5px; opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .ticker-lauf { animation: none; } .ticker-fenster { overflow-x: auto; }
  .live-kopf i::after, .tick-hoch, .tick-runter, .kurve-punkt::after { animation: none !important; display: none; }
  .algo-pop { transition: opacity .2s; }
}
.algo-mini-details dt small { font-weight: 600; font-size: 9.5px; opacity: .8; }

.algo-mini-kurs { position: relative; display: block; margin: 5px 2px 0; padding: 1px 0; font: 800 19px/1.1 var(--schrift-display); letter-spacing: .2px; border-radius: 3px; white-space: nowrap; }
.algo-mini-kurs i { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 10px; }
.algo-mini-kurs i.plus { color: #1d9f50; } .algo-mini-kurs i.minus { color: #e1262c; }
.algo-mini-ergebnis { display: block; font-size: 11.5px; font-weight: 800; }
.algo-mini-kurs { padding-right: 10px; padding-left: 4px; } .algo-mini-kurs.lang { font-size: 15.5px; }
.algo-geld { display: inline-block; padding: 1px 5px; background: #e4f1d8; border: 1px solid #6aa765; border-radius: 2px; box-shadow: inset 0 0 0 1px #f4fbee; color: #1d461c; font-size: 10.5px; font-weight: 700; }
.algo-geld b { font-weight: 900; } .algo-geld b.minus { color: #b3261e; } .algo-geld b.plus { color: #11432f; }
.vorne .algo-mini-fuss { padding-left: 2px; padding-right: 14px; }
.algo-position { display: flex; } .algo-pos-innen { flex: 1; }
.algo-mini-dreh .algo-mini-marke { font-size: 12px; }
.algo-position .algo-urkunde-band { position: relative; padding-left: 12px; padding-right: 12px; }
.algo-band-zeichen { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: .85; }
.hinten .algo-urkunde-band .algo-band-zeichen { display: none; }
.algo-mini-ergebnis { margin-top: 2px; white-space: nowrap; font-size: 11px; }
.algo-mini-ergebnis .algo-geld { padding: 0 4px; font-size: 10.5px; margin-right: 1px; }
.algo-mini-ergebnis.minus .algo-geld { background: #fbe3df; border-color: #d97a74; color: #6e0a18; box-shadow: inset 0 0 0 1px #fff4f2; }
.vorne .algo-leiste { margin-bottom: 7px; }
.algo-position, .algo-pos-seite { min-width: 0; overflow: hidden; }
.algo-mini-ergebnis { font-size: 10px; letter-spacing: -.1px; }
.algo-mini-ergebnis .algo-geld { font-size: 10px; padding: 0 3px; }
.algo-mini-details { font-size: 10.5px; gap: 0 3px; line-height: 1.35; }

/* Coup (17.10.2026): fremde Kassen aus der Ferne verschwommen, Flucht-Banner */
.verschwommen { filter: blur(3.5px); user-select: none; display: inline-block; }
.muenz-badge .verschwommen { filter: blur(2.5px); }
.flucht-banner { background: var(--sonne-dunkel, #b8860b); color: #fff; animation: flucht-puls 1s ease-in-out infinite alternate; }
@keyframes flucht-puls { from { filter: brightness(1); } to { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .flucht-banner { animation: none; } }

/* Die Jagd (17.10.2026): Top 3 im Rampenlicht – Krone mit langsam pulsierendem Ring */
.jagd-marke { --jagd-farbe: #d4a017; }
.jagd-marke.p2 { --jagd-farbe: #9ea3a8; }
.jagd-marke.p3 { --jagd-farbe: #b87333; }
.jagd-marke span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 253, 245, .92); font-size: 15px; box-shadow: 0 0 0 3px var(--jagd-farbe); animation: jagd-puls 1.8s ease-in-out infinite; cursor: pointer; }
@keyframes jagd-puls { 0%, 100% { box-shadow: 0 0 0 3px var(--jagd-farbe), 0 0 0 0 var(--jagd-farbe); } 50% { box-shadow: 0 0 0 3px var(--jagd-farbe), 0 0 12px 5px var(--jagd-farbe); } }
.jagd-marke span { position: relative; }
.jagd-marke .jagd-platz { position: absolute; right: -6px; bottom: -5px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--jagd-farbe); color: #fff; font: 700 10px/14px var(--schrift-display, sans-serif); font-style: normal; text-align: center; }
@media (prefers-reduced-motion: reduce) { .jagd-marke span { animation: none; } }

/* Pausen-Chat (17.10.2026) */
.chat-knopf { position: fixed; left: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 640; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--tinte); border-radius: 2px; background: var(--papier); color: var(--tinte); font-weight: 700; font-size: 14px; box-shadow: var(--schatten-klein); cursor: pointer; }
.chat-zaehler { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--koralle-dunkel); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.chat-fenster { display: flex; flex-direction: column; gap: 8px; }
.chat-liste { text-align: left; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; min-height: 120px; overflow-y: auto; padding: 4px; border: 1px solid var(--tinte-weich, #b9beaf); background: rgba(255, 255, 255, .5); }
.chat-nachricht { max-width: 85%; align-self: flex-start; padding: 6px 9px; border-radius: 2px; background: #fff; border: 1px solid #d9d3c5; overflow-wrap: anywhere; }
.chat-nachricht.eigen { align-self: flex-end; background: #fff7d6; }
.chat-kopf small { color: var(--tinte-weich, #666); margin-left: 4px; }
.chat-eingabe { display: flex; gap: 6px; }
.chat-eingabe input { flex: 1; min-width: 0; font-size: 16px; padding: 8px; border: 1px solid var(--tinte); border-radius: 2px; }
.chat-nachricht.spielleitung { border-color: var(--sonne-dunkel, #806321); background: #fff3c4; }

/* Lootbox (17.10.2026): wilder Börsengewinn am Straßenrand – für alle sichtbar */
.lootbox-marke span { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff8dc; font-size: 20px; box-shadow: 0 0 0 3px var(--lb-farbe, #d4a017); animation: lootbox-puls 1.4s ease-in-out infinite; cursor: pointer; }
.lootbox-marke .lootbox-betrag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 3px); padding: 1px 6px; border-radius: 8px; background: var(--lb-farbe, #d4a017); color: #fff; font: 700 11px/16px var(--schrift-display, sans-serif); font-style: normal; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
@keyframes lootbox-puls { 0%, 100% { box-shadow: 0 0 0 3px var(--lb-farbe, #d4a017), 0 0 0 0 #ffcc33; } 50% { box-shadow: 0 0 0 3px var(--lb-farbe, #d4a017), 0 0 16px 7px #ffcc33; } }
@media (prefers-reduced-motion: reduce) { .lootbox-marke span { animation: none; } }