@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; filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.geld-dreh { position: relative; width: 60px; height: 60px; transform-style: preserve-3d; animation: geld-wenden 5s ease-in-out infinite; }
.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; }