/*
 * styles.css — alles außerhalb des Canvas.
 *
 * Maße hängen an --px (ein logischer Spielpixel in CSS-Pixeln, gesetzt
 * von main.js). So wachsen Kopfzeile und Leiste genau mit dem Bild mit.
 * Optik: Pergament, dunkles Holz, Weihnachtsrot — wie ein Menü in einem
 * Bauernhof-Pixelspiel.
 */
/* Schriften (19.10.) - liegen im Spiel, nicht bei Google: offline spielbar, keine fremden Server */
@font-face { font-family: "Nunito"; src: url("fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/PixelifySans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }

:root {
  --px: 2px;
  --papier: #f7e9c8;
  --papier2: #eed9ae;
  --holz: #6b3e1f;
  --holz2: #4a2a14;
  --tinte: #3a2414;
  --hinweis: #1e1e22;   /* Hinweisblase und Einblendungen: fast schwarz, fett */
  --rot: #b83a2e;
  --rot2: #8a241c;
  --gruen: #3f7a3a;
  --gruen2: #2a5626;
  --gold: #e8b030;
  /* 19.10.: eigene Schriften im Spiel (fonts/, SIL OFL), damit iPhone und Android gleich aussehen.
     Nunito für alle Texte, Pixelify Sans nur für Titel - Pixelschrift wird klein unscharf. */
  --schrift: "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --titelschrift: "Pixelify Sans", "Nunito", system-ui, sans-serif;
  /* Schriftleiter (19.10., Durchsicht als UI/UX-Designer): sieben Stufen statt
     vorher 25 verschiedener Größen. Ausnahmen nur für Zahlen-/Symbolgrößen
     (Summe, Türchen-Ziffern, Emoji-Symbole) und die winzigen Kartenschilder. */
  --t-mini:   calc(var(--px) * 4.2);   /* Kleingedrucktes, Fußnoten, Stände unter Karten */
  --t-klein:  calc(var(--px) * 4.6);   /* Nebentext, Reiter, Abschnittsköpfe */
  --t-text:   calc(var(--px) * 5);     /* Fließtext, Zeilentext, Knöpfe in Listen */
  --t-betont: calc(var(--px) * 5.6);   /* Namen in Zeilen, Hinweise, Hauptknöpfe */
  --t-gross:  calc(var(--px) * 6.2);   /* Fensterknöpfe, Eingaben, hervorgehobene Einblendung */
  --t-titel:  calc(var(--px) * 7);     /* große Zwischenzeilen, Symbole in Knöpfen */
  --t-kopf:   calc(var(--px) * 8);     /* Titel von Blatt und Fenster */
  /* Textfarben auf Papier: zwei Abstufungen statt fünf (alle mind. 4,5:1 Kontrast) */
  --text2: #6a4a34;
  --text3: #7a5a44;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #120c22;
  font-family: var(--schrift);
  color: var(--tinte);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
#buehne {
  position: fixed;
  /* Oben etwas Abstand zusätzlich zum sicheren Rand: Auf dem iPhone lag die
     Kopfzeile direkt unter Uhr und Kamera-Insel, wo iOS den Rand weichzeichnet,
     und das Bild wirkte nach oben verschoben (unten ist der Home-Balken ohnehin frei) */
  top: calc(env(safe-area-inset-top) + var(--rand-oben, 0px)); bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left); right: env(safe-area-inset-right);
  display: flex; align-items: center; justify-content: center;
}
#huelle { position: relative; overflow: hidden; }
/* Nur auf Geräten mit Notch bzw. Kamera-Insel (dort ist der sichere Rand oben > 0) */
@supports (top: max(1px, env(safe-area-inset-top))) {
  :root { --rand-oben: min(16px, env(safe-area-inset-top)); }
}
#cv {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  touch-action: none;
}
.versteckt { display: none !important; }

/* ---------------------------------------------------------------- Kopf */
#hud {
  z-index: 5;   /* über der Karte */
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--px) * 20);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--px) * 3);
  gap: calc(var(--px) * 2);
  pointer-events: none;
  font-weight: bold;
  font-size: var(--t-betont);   /* eine Größe für alle drei Kästen */
  color: #fff;
  /* Kein Umriss: Die Kästen haben ihren eigenen dunklen Grund */
}
#hud > div {
  /* Alle drei Kästen gleich hoch, Inhalt senkrecht mittig */
  box-sizing: border-box;
  height: calc(var(--px) * 11);
  display: flex; align-items: center;
  background: rgba(40, 20, 10, 0.55);
  border: calc(var(--px) * 0.8) solid rgba(255, 230, 180, 0.35);
  border-radius: calc(var(--px) * 2);
  padding: calc(var(--px) * 1.2) calc(var(--px) * 3);
  white-space: nowrap;
}
#geld { color: #ffe27a; }
/* Nachrichtenverlauf (18.10.): Knopf links in der Kopfzeile, roter Punkt = Ungelesenes */
#nachr {
  position: relative; flex: none; pointer-events: auto; cursor: pointer; appearance: none;
  box-sizing: border-box; height: calc(var(--px) * 11); width: calc(var(--px) * 12);
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(40, 20, 10, 0.55);
  border: calc(var(--px) * 0.8) solid rgba(255, 230, 180, 0.35);
  border-radius: calc(var(--px) * 2);
}
#nachr .hud-ico { margin: 0; width: calc(var(--px) * 9); height: calc(var(--px) * 7); }
#nachr:active { transform: scale(0.92); }
#nachr.huepft { animation: nachrHuepf 0.4s ease-out 1; }
@keyframes nachrHuepf { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
#nachrPunkt {
  position: absolute; top: calc(var(--px) * -2); right: calc(var(--px) * -2);
  width: calc(var(--px) * 4.5); height: calc(var(--px) * 4.5); border-radius: 50%;
  background: var(--rot); border: calc(var(--px) * 0.7) solid #fff;
}
/* Die Einblendung fliegt zum Knopf und schrumpft dabei */
#toast.fliegt {
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.8, 0.4), opacity 0.6s ease-in;
  transform: translate(calc(-50% + var(--fx, 0px)), var(--fy, 0px)) scale(0.08) !important;
  opacity: 0;
}
.blatt-offen #toast.fliegt { transform: translate(calc(-50% + var(--fx, 0px)), var(--fy, 0px)) scale(0.08) !important; }
.nachr-zeile { display: flex; gap: calc(var(--px) * 2); padding: calc(var(--px) * 1.6) 0; border-bottom: calc(var(--px) * 0.4) solid rgba(90, 60, 30, 0.2); text-align: left; }
.nachr-zeile small { flex: none; color: var(--text3); font-weight: normal; }
.nachr-zeile.neu b { color: var(--rot2); }
.nachr-zeile.neu::before { content: '●'; color: var(--rot); flex: none; }
/* Pixelsymbole (symbole.js): 1:1 im Spielraster, pixelgenau hochgezogen */
.hud-ico {
  width: calc(var(--px) * 7); height: calc(var(--px) * 7);
  image-rendering: pixelated;
  margin-right: calc(var(--px) * 1.5);
}
/* Stern kleiner: eigenes 5x5-Raster in Spielpixeln (nicht gestaucht); Herz eine Spielpixelreihe tiefer, auf Höhe der Zahl */
#geld .hud-ico { width: calc(var(--px) * 5); height: calc(var(--px) * 5); }
#stimmung .hud-ico { position: relative; top: calc(var(--px) * 1); }

/* ---------------------------------------------------------------- Leiste */
#leiste {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--px) * 26);
  display: grid; grid-template-columns: repeat(5, 1fr);
  /* Nachtblau: hebt sich klar vom Holz des Tresens ab */
  background: linear-gradient(#2a3a64, #16203c);
  border-top: calc(var(--px) * 1) solid #5a70a8;
  box-shadow: 0 calc(var(--px) * -1) 0 #0c1226;
  z-index: 5;
}
#leiste button {
  position: relative;
  appearance: none; border: 0; background: none;
  color: var(--papier);
  font: bold var(--t-text) var(--schrift);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Schrift etwas tiefer, das Symbol bleibt, wo es war */
  gap: calc(var(--px) * 2.5); padding-top: calc(var(--px) * 2);
  border-right: calc(var(--px) * 0.5) solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
#leiste button:last-child { border-right: 0; }
#leiste button { transition: transform 0.08s, background 0.08s; }
#leiste button:active { background: rgba(255, 220, 150, 0.25); transform: scale(0.92); }
.tab:active, .tuer:active, #blattZu:active { transform: scale(0.94); filter: brightness(1.15); }
#leiste .sym { width: calc(var(--px) * 11); height: calc(var(--px) * 9); image-rendering: pixelated; }
#kalBadge, #aufBadge, #ladenBadge {
  position: absolute; top: calc(var(--px) * 1.5); right: 22%;
  min-width: calc(var(--px) * 7); height: calc(var(--px) * 7);
  border-radius: calc(var(--px) * 4);
  background: var(--rot); color: #fff;
  font-size: var(--t-klein);
  display: flex; align-items: center; justify-content: center;
  border: calc(var(--px) * 0.6) solid #fff;
}
#ladenBadge { animation: pulsieren 1.2s infinite; }
.tab.neu::after { content: ' ●'; color: var(--gold); }
.neuTag { font-style: normal; font-size: 0.7em; background: var(--gold); color: var(--tinte); padding: 0 calc(var(--px) * 1.2); border-radius: calc(var(--px) * 1); vertical-align: middle; }
.zeile.neu { background: linear-gradient(90deg, #fff3c4, transparent 70%); }
.zeile.verdeckt b { color: #8a7a66; letter-spacing: 0.1em; }
.zeile.verdeckt span { font-style: italic; }
#toast.neu { background: #fff4c8; border-color: var(--gold); box-shadow: 0 calc(var(--px) * 1.2) 0 #a87a1a; font-size: var(--t-gross); }
#btnKalender.lockt .sym, #btnAuftraege.lockt .sym, #btnLaden.lockt .sym { animation: wackeln 1.4s infinite; }
@keyframes wackeln { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

/* ---------------------------------------------------------------- Einblendung */
#toast {
  position: absolute; left: 50%; top: calc(var(--px) * 24);
  transform: translate(-50%, calc(var(--px) * -6)); opacity: 0;
  max-width: 88%;
  background: var(--papier); color: var(--hinweis);
  border: calc(var(--px) * 1) solid var(--holz);
  border-radius: calc(var(--px) * 2);
  box-shadow: 0 calc(var(--px) * 1.2) 0 var(--holz2);
  padding: calc(var(--px) * 2.5) calc(var(--px) * 4);
  font-weight: bold; font-size: var(--t-betont);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 8;
}
#toast.zeigen { opacity: 1; transform: translate(-50%, 0); }
#toast.spezial { background: #fff4c8; border-color: var(--gold); box-shadow: 0 calc(var(--px) * 1.2) 0 #a87a1a; }
#toast.gut { background: #e4f4d8; border-color: var(--gruen); box-shadow: 0 calc(var(--px) * 1.2) 0 var(--gruen2); }
#toast.boese { background: #f8dcd4; border-color: var(--rot); box-shadow: 0 calc(var(--px) * 1.2) 0 var(--rot2); }
#toast.hinweis { font-size: var(--t-text); }

#pause { color: #fff; }
/* Solange Laden, Kalender oder Menü offen sind, erscheinen Einblendungen
   unten über der Leiste - oben lägen sie auf Titel und Kontostand. */
.blatt-offen #toast { top: auto !important; bottom: calc(var(--px) * 30); transform: translate(-50%, calc(var(--px) * 6)); }
.blatt-offen #toast.zeigen { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- Knöpfe */
.k {
  appearance: none;
  font: bold var(--t-betont) var(--schrift);
  color: #fff;
  background: linear-gradient(#d24a3c, var(--rot));
  border: calc(var(--px) * 0.8) solid var(--rot2);
  border-radius: calc(var(--px) * 2);
  box-shadow: 0 calc(var(--px) * 1.2) 0 var(--rot2), inset 0 calc(var(--px) * 0.8) 0 rgba(255, 255, 255, 0.25);
  padding: calc(var(--px) * 2) calc(var(--px) * 4);
  min-height: calc(var(--px) * 15);
  cursor: pointer;
  text-shadow: 0 calc(var(--px) * 0.5) 0 rgba(0, 0, 0, 0.35);
}
.k:active:not(:disabled) { transform: translateY(calc(var(--px) * 1)); box-shadow: 0 calc(var(--px) * 0.2) 0 var(--rot2); }
.k:disabled { filter: grayscale(0.85) brightness(1.05); opacity: 0.6; cursor: default; }
.k--neben { background: linear-gradient(#8a6a4a, #6b4a2c); border-color: var(--holz2); box-shadow: 0 calc(var(--px) * 1.2) 0 var(--holz2), inset 0 calc(var(--px) * 0.8) 0 rgba(255, 255, 255, 0.2); }
.k--kauf { background: linear-gradient(#5a9a4a, var(--gruen)); border-color: var(--gruen2); box-shadow: 0 calc(var(--px) * 1.2) 0 var(--gruen2), inset 0 calc(var(--px) * 0.8) 0 rgba(255, 255, 255, 0.25); }
.k--kauf small { display: block; font-size: 0.72em; opacity: 0.85; font-weight: normal; }
.k--wahl { background: linear-gradient(#8a6a4a, #6b4a2c); border-color: var(--holz2); box-shadow: 0 calc(var(--px) * 1.2) 0 var(--holz2); }
.k--wahl.gewaehlt { background: linear-gradient(#f0c848, #c8962a); color: var(--tinte); text-shadow: none; border-color: #8a6414; box-shadow: 0 calc(var(--px) * 1.2) 0 #8a6414; }
.k--fertig, .k--zu { background: none; border-color: transparent; box-shadow: none; color: var(--gruen); }
.k--fertig:disabled, .k--zu:disabled { opacity: 1; filter: none; }
.haken { color: var(--gruen); font-size: var(--t-kopf); }

/* ---------------------------------------------------------------- Blatt */
/* Die Übersichtskarte (karte.js): über der Welt, unter Kopfzeile und Leiste */
#landkarte { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--px) * 26); z-index: 4; background: #2a4a2a; overflow: hidden; }
#landkarte.kurz-weg { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
#kartenCv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#kartenOrte .ort {
  position: absolute; transform: translate(-50%, 0); z-index: 2;
  appearance: none; cursor: pointer; text-align: center; white-space: nowrap;
  font: bold var(--t-klein) var(--schrift); color: var(--tinte); line-height: 1.15;
  background: rgba(255, 248, 232, 0.94); border: calc(var(--px) * 0.6) solid var(--holz);
  border-radius: calc(var(--px) * 1.5); padding: calc(var(--px) * 0.8) calc(var(--px) * 2);
  box-shadow: 0 calc(var(--px) * 0.8) 0 rgba(0, 0, 0, 0.3);
}
#kartenOrte .ort small { display: block; font-weight: normal; font-size: calc(var(--px) * 3.4); color: var(--text3); }
#kartenOrte .ort.bald { background: rgba(240, 232, 214, 0.88); }
#kartenOrte .ort.zuhause { background: #fff3c4; border-color: var(--gold); }
/* Markttag: das Schild LEUCHTET, statt zu hüpfen (11.10., Nutzerwunsch) */
#kartenOrte .ort.markt-heute { background: #fff0e0; border-color: #c83030; animation: marktLeuchten 1.8s ease-in-out infinite; }
@keyframes marktLeuchten { 0%, 100% { box-shadow: 0 0 calc(var(--px) * 1.5) rgba(255, 200, 80, 0.55); } 50% { box-shadow: 0 0 calc(var(--px) * 5) calc(var(--px) * 1) rgba(255, 210, 90, 0.95); } }
#kartenOrte .ort.markt-heute small { color: #c83030; font-weight: bold; }
/* Hervorgehobener Ort: pulsiert auf der Stelle (11.10.). Vorher überschrieb das
   allgemeine `pulsieren` (scale) die Zentrierung translate(-50%) - das Schild
   sprang bei jedem Puls um die halbe Breite hin und her. */
#kartenOrte .ort.hervor { border-color: var(--gold); box-shadow: 0 0 0 calc(var(--px) * 1) var(--gold), 0 calc(var(--px) * 0.8) 0 rgba(0, 0, 0, 0.3); animation: ortPuls 1.2s ease-in-out infinite; }
@keyframes ortPuls { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, 0) scale(1.1); box-shadow: 0 0 0 calc(var(--px) * 1) var(--gold), 0 0 calc(var(--px) * 5) #ffe8a0; } }
#kartenOrte .ort:active { transform: translate(-50%, 0) scale(0.94); }
#kartenOrte .ort-neu { display: inline-block; margin-left: calc(var(--px) * 1.5); min-width: calc(var(--px) * 5.5); padding: 0 calc(var(--px) * 1); border-radius: calc(var(--px) * 3); background: var(--rot); color: #fff; font-size: calc(var(--px) * 3.8); }
#kartenOrte .ort-flaeche { position: absolute; z-index: 1; width: calc(var(--px) * 32); height: calc(var(--px) * 24); appearance: none; border: 0; background: transparent; cursor: pointer; }
#kartenZu {
  position: absolute; right: calc(var(--px) * 3); top: calc(var(--px) * 21); z-index: 3;
  appearance: none; border: 0; cursor: pointer; width: calc(var(--px) * 13); height: calc(var(--px) * 13);
  border-radius: calc(var(--px) * 2.5); background: var(--holz); color: #fff; font: bold var(--t-gross) var(--schrift);
  box-shadow: 0 calc(var(--px) * 1) 0 rgba(0, 0, 0, 0.35);
}
/* Schilder aus (12.10.): nur noch die Orte, die leicht leuchten. Ein
   hervorgehobener Ort (Führung) behält sein Schild. */
#kartenText {
  position: absolute; left: calc(var(--px) * 3); top: calc(var(--px) * 21); z-index: 3;
  appearance: none; border: 0; cursor: pointer; width: calc(var(--px) * 13); height: calc(var(--px) * 13);
  border-radius: calc(var(--px) * 2.5); background: var(--holz); color: #fff; font: bold var(--t-text) var(--schrift);
  box-shadow: 0 calc(var(--px) * 1) 0 rgba(0, 0, 0, 0.35);
}
#landkarte.ohne-text #kartenText { text-decoration: line-through; opacity: 0.85; }
#landkarte.ohne-text #kartenOrte .ort:not(.hervor) { display: none; }

/* Minispiele: über allem außer Fenstern und Einblendungen */
#minispiel { position: absolute; inset: 0; z-index: 6; background: #1a2a1a; touch-action: none; }
#miniCv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#miniZu {
  position: absolute; right: calc(var(--px) * 3); top: calc(var(--px) * 15); z-index: 2;
  appearance: none; border: 0; cursor: pointer; width: calc(var(--px) * 12); height: calc(var(--px) * 12);
  border-radius: calc(var(--px) * 2.5); background: rgba(90, 50, 30, 0.85); color: #fff; font: bold var(--t-betont) var(--schrift);
}
#blatt {
  position: absolute; left: calc(var(--px) * 3); right: calc(var(--px) * 3);
  top: calc(var(--px) * 21); bottom: calc(var(--px) * 27);
  background: var(--papier);
  border: calc(var(--px) * 1.5) solid var(--holz);
  border-radius: calc(var(--px) * 3);
  box-shadow: 0 0 0 calc(var(--px) * 0.8) #c89a5a inset, 0 calc(var(--px) * 2) 0 rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column;
  z-index: 6;
  animation: rein 0.18s ease-out;
}
@keyframes rein { from { transform: translateY(calc(var(--px) * 12)); opacity: 0; } }
#blatt header {
  display: flex; align-items: center; gap: calc(var(--px) * 3);
  padding: calc(var(--px) * 3) calc(var(--px) * 3) calc(var(--px) * 2) calc(var(--px) * 5);
  border-bottom: calc(var(--px) * 0.8) solid #d8b880;
}
#blatt h1 { margin: 0; font: 600 var(--t-kopf) var(--titelschrift); flex: 1; color: var(--rot2); letter-spacing: 0.02em; }
#blattGeld { font-weight: bold; font-size: var(--t-gross); color: var(--holz); }
#blattZu {
  appearance: none; border: 0; cursor: pointer;
  width: calc(var(--px) * 15); height: calc(var(--px) * 15);
  border-radius: calc(var(--px) * 2);
  background: var(--holz); color: var(--papier);
  font-size: var(--t-titel);
}
#blattTabs { display: flex; flex-direction: column; gap: calc(var(--px) * 2); padding: calc(var(--px) * 2) calc(var(--px) * 3) 0; }
#blattTabs .reiter { display: flex; gap: calc(var(--px) * 1); }
/* Ortsbild im Fenster (Weihnachtsmarkt, 11.10.) - wie oben im Laden-Blatt */
.fenster-bild { display: block; margin-left: auto; margin-right: auto; box-sizing: content-box; image-rendering: pixelated; border-radius: calc(var(--px) * 2); border: calc(var(--px) * 0.6) solid #c89a5a; margin-bottom: calc(var(--px) * 2); }   /* Größe setzt fein.js (feinGroesse) */
#blattTabs .ort-bild { display: block; margin: 0 auto; image-rendering: pixelated; border-radius: calc(var(--px) * 2); border: calc(var(--px) * 0.6) solid #c89a5a; box-sizing: content-box; }   /* Größe setzt fein.js */
/* Oberster Umschalter im Laden: Einkaufen | Mein Haus */
.modi {
  display: flex; padding: calc(var(--px) * 0.8);
  background: #e8d4a8; border-radius: calc(var(--px) * 3);
  border: calc(var(--px) * 0.6) solid #c89a5a;
}
.modus-k {
  flex: 1; appearance: none; cursor: pointer; border: 0; background: none;
  font: bold var(--t-betont) var(--schrift); color: var(--holz);
  padding: calc(var(--px) * 4.6) 0; border-radius: calc(var(--px) * 2.4);
  position: relative;
}
.modus-k.aktiv { background: #fffaf0; color: var(--rot2); box-shadow: 0 calc(var(--px) * 0.6) 0 #c89a5a; }
.modus-k.neu::after { content: ' ●'; color: var(--gold); }
#blatt[data-modus="haus"] #blattInhalt { margin-top: calc(var(--px) * 2); border-radius: calc(var(--px) * 2); }

/* Mein Haus: Auswahl aus Punkten (Aus / Weiß / Bunt, Aus / An, Anstrich) */
.zeile.haus .txt b { font-size: var(--t-betont); }
.punktwahl { flex: none; display: flex; gap: calc(var(--px) * 1); }
.pw {
  appearance: none; cursor: pointer;
  min-width: calc(var(--px) * 16);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 1);
  padding: calc(var(--px) * 1.6) calc(var(--px) * 1) calc(var(--px) * 1.2);
  background: var(--papier2); color: var(--text3);
  border: calc(var(--px) * 0.6) solid #d8b880; border-radius: calc(var(--px) * 2);
  font: bold var(--t-mini) var(--schrift);
}
.pw.aktiv { background: #fff3c4; color: var(--tinte); border-color: var(--gold); box-shadow: 0 0 0 calc(var(--px) * 0.6) var(--gold); }
.pw:active { transform: scale(0.94); }
.punkt {
  display: block; width: calc(var(--px) * 6); height: calc(var(--px) * 6); border-radius: 50%;
  border: calc(var(--px) * 0.6) solid rgba(0, 0, 0, 0.25);
}
.p-aus { background: #3a3440; }
.p-an { background: #6ad06a; }
.p-weiss { background: #fff2cc; box-shadow: 0 0 calc(var(--px) * 2) #ffd98a; }
.p-bunt { background: conic-gradient(#ff4a4a, #ffd040, #5aff6a, #4a8aff, #ff6adf, #ff4a4a); }
.pw.aktiv .punkt { border-color: rgba(0, 0, 0, 0.45); }
/* Varianten (09.10.): Titel und Text oben, drei Knöpfe darunter über die ganze Breite */
.zeile.haus.var { flex-wrap: wrap; }
.zeile.haus.var .txt { flex: 1 1 60%; }
.zeile.haus.var .txt span { display: block; }
.varwahl { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * 1.5); margin-top: calc(var(--px) * 1.5); }
.vw {
  appearance: none; cursor: pointer; text-align: center;
  padding: calc(var(--px) * 1.6) calc(var(--px) * 1);
  background: var(--papier2); color: var(--text3);
  border: calc(var(--px) * 0.6) solid #d8b880; border-radius: calc(var(--px) * 2);
  font: bold var(--t-mini) var(--schrift); line-height: 1.2;
}
.vw b { display: block; font-size: var(--t-klein); }
.vw small { display: block; font-weight: normal; font-size: var(--t-mini); }
.vw.aktiv { background: #fff3c4; color: var(--tinte); border-color: var(--gold); box-shadow: 0 0 0 calc(var(--px) * 0.6) var(--gold); }
.vw.kauf { background: #e4f4d8; border-color: var(--gruen); color: var(--gruen2); }
.vw.teuer { opacity: 0.6; }
.vw.zu { background: #e8e0d4; color: #a89880; }
.vw:active { transform: scale(0.95); }
.var-erkl { margin: calc(var(--px) * 1) 0 calc(var(--px) * 1); }
/* Haus schmücken (11.10.): Sprungleiste, eine Karte je Teil, Herkunft des Geschenkten */
.haus-sprung { position: sticky; top: calc(var(--px) * -0.5); z-index: 2; display: flex; gap: calc(var(--px) * 1.5); padding: calc(var(--px) * 1.5) 0; background: var(--papier); border-bottom: calc(var(--px) * 0.5) solid #e0c898; }
.hs-k { flex: 1; appearance: none; cursor: pointer; padding: calc(var(--px) * 3.4) 0; min-height: calc(var(--px) * 13); background: var(--papier2); color: var(--holz); border: calc(var(--px) * 0.6) solid #d8b880; border-radius: calc(var(--px) * 3); font: bold var(--t-klein) var(--schrift); }
.hs-k:active { transform: scale(0.95); background: #fff3c4; }
.zeile.haus.karte { flex-wrap: wrap; }
.zeile.haus.karte .txt { flex: 1 1 40%; }
.zeile.haus .txt span { display: block; }
.zeile.haus.ist-aus .ico, .zeile.haus.ist-aus .txt b, .zeile.haus.ist-aus .varwahl, .zeile.haus.ist-aus .haus-zusatz { opacity: 0.45; }
.haus-zusatz { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--px) * 1.5); font: bold var(--t-mini) var(--schrift); color: var(--text3); }
/* Abschnitte in „Haus schmücken" deutlich abgrenzen (11.10.): Balken statt blasser Zeile */
.gruppe.haus-abschnitt { opacity: 1; margin: calc(var(--px) * 5) 0 calc(var(--px) * 1); padding: calc(var(--px) * 2) calc(var(--px) * 3); background: var(--holz); color: #fff8ec; border-radius: calc(var(--px) * 2); letter-spacing: 0.08em; box-shadow: 0 calc(var(--px) * 0.8) 0 rgba(0, 0, 0, 0.18); }
.haus-sprung + .gruppe.haus-abschnitt, .var-erkl + .gruppe.haus-abschnitt { margin-top: calc(var(--px) * 2); }
.zeile.haus.anstrich { flex-wrap: wrap; }
.anstrich-wahl { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * 1.5); margin-top: calc(var(--px) * 1.5); }
.anstrich-wahl .pw { min-width: 0; }
.haus-quelle { margin: calc(var(--px) * 2.5) 0 0; font: bold var(--t-mini) var(--schrift); color: var(--text3); }
/* Anstrich: eine eigene Reihe unter dem Titel, darf umbrechen */
.gruppe + .punktwahl { flex-wrap: wrap; margin: calc(var(--px) * 1) 0 calc(var(--px) * 2); }
.tab {
  flex: 1; appearance: none; cursor: pointer;
  font: bold var(--t-klein) var(--schrift);
  color: var(--holz);
  background: var(--papier2);
  border: calc(var(--px) * 0.8) solid #c89a5a; border-bottom: 0;
  border-radius: calc(var(--px) * 2) calc(var(--px) * 2) 0 0;
  padding: calc(var(--px) * 6.2) calc(var(--px) * 0.5);   /* höher: gut mit dem Finger zu treffen (~40 px) */
  font-size: var(--t-text);
  line-height: 1.1;
}
.tab.aktiv { background: #fffaf0; color: var(--rot2); }
#blattInhalt {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--px) * 2) calc(var(--px) * 3) calc(var(--px) * 4);
  background: #fffaf0;
  margin: 0 calc(var(--px) * 3) calc(var(--px) * 3);
  border: calc(var(--px) * 0.8) solid #c89a5a;
  border-radius: 0 0 calc(var(--px) * 2) calc(var(--px) * 2);
  -webkit-user-select: none;
}
#blatt[data-art="kalender"] #blattInhalt, #blatt[data-art="auftraege"] #blattInhalt, #blatt[data-art="menue"] #blattInhalt { margin-top: calc(var(--px) * 3); border-radius: calc(var(--px) * 2); }
.gruppe {
  font-weight: bold; font-size: var(--t-text); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--holz); opacity: 0.7;
  margin: calc(var(--px) * 3) 0 calc(var(--px) * 1);
}
.zeile {
  display: flex; align-items: center; gap: calc(var(--px) * 3);
  padding: calc(var(--px) * 2.5) 0;
  border-bottom: calc(var(--px) * 0.5) dashed #e0c898;
}
.zeile.blitz { animation: blitz 0.9s; }
@keyframes blitz { 0% { background: #fff0a0; } 100% { background: transparent; } }
.zeile .ico {
  /* 16er-Symbol 1:1 in Spielpixeln (11.10.): Inhalt genau 16, Rand und Innenabstand kommen dazu */
  box-sizing: content-box; width: calc(var(--px) * 16); height: calc(var(--px) * 16); flex: none; padding: calc(var(--px) * 0.4);
  image-rendering: pixelated;
  background: var(--papier2); border-radius: calc(var(--px) * 2);
  border: calc(var(--px) * 0.6) solid #d8b880;
}
.zeile .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--px) * 0.5); }
.zeile b { font-size: var(--t-betont); }
.zeile span { font-size: var(--t-text); color: var(--text2); line-height: 1.25; }
.zeile .bonus, p.bonus { font-style: normal; font-size: var(--t-klein); color: #b0304a; font-weight: bold; }
.zeile .grund { font-size: var(--t-klein); color: var(--text3); }
.zeile.besessen .txt b::after { content: ''; }
.zeile.gesperrt .ico { filter: grayscale(0.7); opacity: 0.7; }
.knopfplatz { flex: none; min-width: calc(var(--px) * 40); display: flex; justify-content: flex-end; }
.knopfplatz .k { min-width: calc(var(--px) * 40); padding-left: calc(var(--px) * 2); padding-right: calc(var(--px) * 2); font-size: var(--t-text); }

#blatt.kurz-weg { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.klein-schalter { min-width: calc(var(--px) * 22) !important; margin-left: calc(var(--px) * 2); font-size: var(--t-klein) !important; }
.knopfplatz { gap: 0; }

/* ---------------------------------------------------------------- Aufträge */
.auftrag { display: flex; align-items: center; gap: calc(var(--px) * 3); padding: calc(var(--px) * 3) 0; border-bottom: calc(var(--px) * 0.5) dashed #e0c898; }
.auftrag .stufe { flex: none; width: calc(var(--px) * 12); height: calc(var(--px) * 12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; font-size: var(--t-text); }
.auftrag .stufe.s0 { background: #6a9a4a; } .auftrag .stufe.s1 { background: #d8942a; } .auftrag .stufe.s2 { background: #b83a2e; }
.auftrag .mitte { flex: 1; min-width: 0; }
.auftrag b { font-size: var(--t-betont); display: block; }
.auftrag .balken, #modal .balken, .balken-zeile .balken { height: calc(var(--px) * 3); background: #e8d8b8; border-radius: calc(var(--px) * 2); margin: calc(var(--px) * 1.5) 0; overflow: hidden; }
.auftrag .balken i, #modal .balken i, .balken-zeile .balken i { display: block; height: 100%; background: linear-gradient(90deg, #e8b030, #f0d060); }
.auftrag small { font-size: var(--t-klein); color: var(--text3); }
/* Balken mit dem Stand rechts daneben (17.10.: vorher im Fließtext, brach um) */
.balken-zeile { display: flex; align-items: center; gap: calc(var(--px) * 2); }
.balken-zeile .balken { flex: 1; }
.balken-zeile .zahl { flex: none; white-space: nowrap; font-size: var(--t-klein); font-weight: bold; color: var(--text3); }
.aufgaben-titel { margin: calc(var(--px) * 4) 0 calc(var(--px) * 1); font-size: var(--t-klein); font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }

/* Ruf des Standes (17.10.): eigener Kopf, dunkel mit Gold - kein Auftrag */
.ruf-kopf { display: flex; align-items: center; gap: calc(var(--px) * 3); padding: calc(var(--px) * 3); border-radius: calc(var(--px) * 3);
  background: linear-gradient(#2a3a6a, #1c2650); border: calc(var(--px) * 0.8) solid #e8b030; color: #fff4dc; box-shadow: inset 0 calc(var(--px) * 0.6) 0 rgba(255, 255, 255, 0.12); }
.ruf-kopf .ruf-stern { flex: none; width: calc(var(--px) * 18); height: calc(var(--px) * 18); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(#ffe27a, #e8a020); color: #4a2a08; font-weight: bold; line-height: 1; }
.ruf-kopf .ruf-stern small { font-size: calc(var(--px) * 3.4); }
.ruf-kopf .ruf-stern b { font-size: var(--t-titel); }
.ruf-kopf .mitte { flex: 1; min-width: 0; }
.ruf-kopf .ruf-titel { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--px) * 2); }
.ruf-kopf .ruf-titel b { font-size: var(--t-betont); color: #ffe27a; }
.ruf-kopf .ruf-titel span { white-space: nowrap; font-size: var(--t-klein); font-weight: bold; }
.ruf-kopf .balken { background: rgba(255, 255, 255, 0.18); }
.ruf-kopf .zahl, .ruf-kopf small { color: #d8d0f0; }
.ruf-kopf small { font-size: var(--t-mini); }
.ruf-kopf .ruf-stern small { color: #6a3a08; font-size: calc(var(--px) * 3.4); }
.ruf-kopf.fertig .balken i { background: linear-gradient(90deg, #5ac85a, #9ae07a); }

/* Bitte eines Stammgastes (17.10.): ein Zettel mit Porträt, der Satz in seiner Stimme */
.bitte-zettel { padding: calc(var(--px) * 3); border-radius: calc(var(--px) * 2); background: #fff8e6; border: calc(var(--px) * 0.6) dashed #c89a5a; }
.bitte-zettel .bitte-kopf { display: flex; gap: calc(var(--px) * 3); align-items: flex-start; }
.bitte-zettel canvas { flex: none; width: calc(var(--px) * 32); height: calc(var(--px) * 48); image-rendering: pixelated; border-radius: calc(var(--px) * 1.5); background: #3a2440; }
.bitte-zettel .mitte { flex: 1; min-width: 0; }
.bitte-zettel b { font-size: var(--t-betont); display: block; }
.bitte-zettel .bitte-text { display: block; font-size: var(--t-klein); font-style: italic; color: #5a3a24; margin: calc(var(--px) * 1) 0 0; }
.bitte-zettel .bitte-fuss { margin-top: calc(var(--px) * 2); }
.bitte-zettel small { font-size: var(--t-klein); color: var(--text3); }
.bitte-zettel .bitte-knopf { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--px) * 2); margin-top: calc(var(--px) * 1); }
.bitte-zettel .k { min-width: calc(var(--px) * 34); font-size: var(--t-text); }
.bitte-zettel.erledigt .bitte-text, .bitte-zettel.erledigt canvas { opacity: 0.6; }
.auftrag .k { min-width: calc(var(--px) * 34); font-size: var(--t-text); }
.auftrag.erledigt { opacity: 0.55; }
.sammlung { display: flex; gap: calc(var(--px) * 2); flex-wrap: wrap; margin-top: calc(var(--px) * 2); }
.sammlung span { background: var(--papier2); border: calc(var(--px) * 0.6) solid #d8b880; border-radius: calc(var(--px) * 2); padding: calc(var(--px) * 1.5) calc(var(--px) * 3); font-size: var(--t-klein); }
.sammlung span.hat { background: #fff3c4; border-color: var(--gold); font-weight: bold; }

/* ---------------------------------------------------------------- Kalender */
.kalender {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--px) * 2);
  padding: calc(var(--px) * 2);
  background: linear-gradient(135deg, #2a5626, #1f4020);
  border-radius: calc(var(--px) * 2);
  border: calc(var(--px) * 1) solid #173016;
}
.tuer {
  appearance: none; cursor: pointer;
  aspect-ratio: 1;
  background: linear-gradient(#c84a3c, #9a2c22);
  border: calc(var(--px) * 0.8) dashed #f0d090;
  border-radius: calc(var(--px) * 1.5);
  color: #fff4d8; font: bold var(--t-kopf) Georgia, serif;
  text-shadow: 0 calc(var(--px) * 0.6) 0 #5a1810;
}
.tuer.gross { background: linear-gradient(#e8b030, #b8841a); color: #5a3a08; text-shadow: none; }
.tuer.bereit { animation: pulsieren 1.2s infinite; border-style: solid; border-color: #fff; }
@keyframes pulsieren { 50% { transform: scale(1.06); box-shadow: 0 0 calc(var(--px) * 4) #ffe8a0; } }
.tuer.auf { background: #173016; border: calc(var(--px) * 0.8) solid #2a5626; color: #8ad07a; font-size: var(--t-titel); animation: none; }
/* Vorfreude-Päckchen (vor dem 1.12., eins je Tag) */
.vorfreude {
  appearance: none; display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--px) * 3); align-items: center;
  width: 100%; margin: calc(var(--px) * 2) 0 calc(var(--px) * 3); padding: calc(var(--px) * 3);
  text-align: left; cursor: pointer; color: var(--hinweis);
  background: var(--papier2); border: calc(var(--px) * 0.8) dashed #d8b880; border-radius: calc(var(--px) * 2);
  font: bold var(--t-betont) var(--schrift);
}
.vorfreude .vf-ico { grid-row: span 2; font-size: calc(var(--px) * 12); filter: grayscale(0.7); opacity: 0.6; }
.vorfreude small { font-weight: normal; font-size: var(--t-klein); }
.vorfreude.bereit { background: #fff3c4; border: calc(var(--px) * 0.8) solid var(--gold); animation: pulsieren 1.2s infinite; }
.vorfreude.bereit .vf-ico { filter: none; opacity: 1; }
/* Barbarazweig im Kalender: kleines Fensterbild, pixelgenau vergrößert */
.vorfreude .vf-ico.zweig { width: calc(var(--px) * 14); height: calc(var(--px) * 18); image-rendering: pixelated; filter: none; opacity: 1;
  background: #dfe8f0; border: calc(var(--px) * 0.8) solid #b89a70; border-radius: calc(var(--px) * 1); }
.statistik.rueckblick { margin-bottom: calc(var(--px) * 4); }
p.hinweis, p.klein { font-size: var(--t-text); line-height: 1.35; }
p.klein { color: var(--text3); font-size: var(--t-klein); }

/* ---------------------------------------------------------------- Menü */
.statistik { display: grid; gap: calc(var(--px) * 3); margin: calc(var(--px) * 3) 0 calc(var(--px) * 7); }
.statistik div { display: flex; justify-content: space-between; gap: calc(var(--px) * 4); font-size: var(--t-text); border-bottom: calc(var(--px) * 0.5) dashed #e0c898; padding-bottom: calc(var(--px) * 2.5); }
.statistik span { color: var(--text3); }
.regler { display: flex; align-items: center; gap: calc(var(--px) * 2.5); margin: calc(var(--px) * 5) 0; }
.regler .rname { font-weight: bold; font-size: var(--t-betont); min-width: calc(var(--px) * 26); }
.regler .rk { min-height: calc(var(--px) * 13); min-width: calc(var(--px) * 13); padding: 0; font-size: var(--t-titel); }
.regler input { flex: 1; accent-color: var(--rot); height: calc(var(--px) * 8); }
.regler .rwert { min-width: calc(var(--px) * 12); text-align: center; font-size: var(--t-gross); }
.schalter { display: flex; gap: calc(var(--px) * 3); flex-wrap: wrap; margin: calc(var(--px) * 3) 0; }
.schalter .k { flex: 1; }

/* ---------------------------------------------------------------- Fenster */
#modal {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(10, 6, 20, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--px) * 8);
}
#modal .box {
  width: 100%; max-height: 100%; overflow-y: auto;
  background: var(--papier);
  border: calc(var(--px) * 1.5) solid var(--holz);
  border-radius: calc(var(--px) * 3);
  box-shadow: 0 0 0 calc(var(--px) * 0.8) #c89a5a inset, 0 calc(var(--px) * 2) 0 rgba(0, 0, 0, 0.5);
  padding: calc(var(--px) * 6) calc(var(--px) * 6) calc(var(--px) * 5);
  text-align: center;
  animation: aufploppen 0.22s ease-out;
}
@keyframes aufploppen { from { transform: scale(0.85); opacity: 0; } }
#modal h2 { margin: 0 0 calc(var(--px) * 3); color: var(--rot2); font: 600 var(--t-kopf) var(--titelschrift); letter-spacing: 0.02em; }
#modal .inhalt { font-size: var(--t-betont); line-height: 1.4; }
#modal .inhalt p { margin: calc(var(--px) * 2) 0; }
#modal .summe { font-size: calc(var(--px) * 11); font-weight: bold; color: var(--gruen); margin: calc(var(--px) * 1) 0; }
#modal .gross-ico { font-size: calc(var(--px) * 20); line-height: 1.1; }
#modal .knoepfe { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 3); margin-top: calc(var(--px) * 5); }
#modal .knoepfe .k { flex: 1 1 40%; font-size: var(--t-gross); }
#modal label { display: block; text-align: left; font-weight: bold; margin: calc(var(--px) * 3) 0; }
#modal input, #modal select {
  width: 100%; margin-top: calc(var(--px) * 1.5);
  font: var(--t-gross) var(--schrift);
  padding: calc(var(--px) * 2.5);
  border: calc(var(--px) * 0.8) solid var(--holz); border-radius: calc(var(--px) * 1.5);
  background: #fffaf0; color: var(--tinte);
  -webkit-user-select: text; user-select: text;
}
#modal input[type="number"], #modal select { width: calc(var(--px) * 40); margin-left: calc(var(--px) * 2); }
.modus {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin: calc(var(--px) * 3) 0; padding: calc(var(--px) * 4);
  background: #fffaf0; color: var(--tinte);
  border: calc(var(--px) * 1) solid #c89a5a; border-radius: calc(var(--px) * 2.5);
  box-shadow: 0 calc(var(--px) * 1.2) 0 #c89a5a;
  font-family: var(--schrift);
}
.modus:active { transform: translateY(calc(var(--px) * 1)); box-shadow: none; }
.modus b { display: block; font-size: var(--t-titel); color: var(--rot2); margin-bottom: calc(var(--px) * 1.5); }
.modus span { font-size: var(--t-text); line-height: 1.35; }
.ziel { text-align: left; list-style: none; padding: 0; margin: calc(var(--px) * 3) 0; }
.ziel li { margin: calc(var(--px) * 2) 0; }
.hilfe { text-align: left; padding-left: calc(var(--px) * 8); }
.hilfe li { margin: calc(var(--px) * 1.5) 0; }
.ereignisbild { display: block; margin: 0 auto; box-sizing: content-box; image-rendering: pixelated; border-radius: calc(var(--px) * 1.5); border: calc(var(--px) * 1) solid var(--holz); }
#modal .zeile-gross { font-size: var(--t-titel); font-weight: bold; color: var(--gruen2); margin-top: calc(var(--px) * 3); }
.kartenbild { width: 100%; image-rendering: pixelated; border-radius: calc(var(--px) * 1.5); box-shadow: 0 calc(var(--px) * 1) 0 rgba(0, 0, 0, 0.3); }

/* ---------------------------------------------------------------- Einführung */
#tipp {
  position: absolute; left: calc(var(--px) * 6); right: calc(var(--px) * 6);
  z-index: 7; pointer-events: auto; cursor: pointer;
  background: #fffaf0; color: var(--hinweis);
  border: calc(var(--px) * 1) solid var(--gold);
  border-radius: calc(var(--px) * 2.5);
  box-shadow: 0 calc(var(--px) * 1.2) 0 #a87a1a, 0 0 calc(var(--px) * 6) rgba(0, 0, 0, 0.35);
  padding: calc(var(--px) * 3) calc(var(--px) * 4);
  font-weight: bold; font-size: var(--t-betont); line-height: 1.35;
  text-align: center;
  animation: aufploppen 0.2s ease-out;
}
#tipp::before {
  content: '✕'; position: absolute; top: calc(var(--px) * 1); right: calc(var(--px) * 2.5);
  font-size: var(--t-klein); color: #a88a6a;
}
#tipp .weiter {
  display: block; width: fit-content; margin: calc(var(--px) * 2.5) auto 0;
  background: linear-gradient(#5a9a4a, var(--gruen)); color: #fff;
  border: calc(var(--px) * 0.8) solid var(--gruen2); border-radius: calc(var(--px) * 2);
  box-shadow: 0 calc(var(--px) * 1) 0 var(--gruen2);
  padding: calc(var(--px) * 1.5) calc(var(--px) * 6); font-size: var(--t-betont); font-weight: bold;
  animation: pulsieren 1.4s infinite;
}
#tipp.mit-weiter::before { display: none; }
#tipp[data-pfeil]::after {
  content: ''; position: absolute; left: var(--pfeil-x);
  border: calc(var(--px) * 6) solid transparent;
}
#tipp[data-pfeil="unten"]::after { top: 100%; border-top-color: var(--gold); }
#tipp[data-pfeil="oben"]::after { bottom: 100%; border-bottom-color: var(--gold); }
#tipp[data-pfeil=""]::after { display: none; }
#zeiger {
  position: absolute; z-index: 7; pointer-events: none;
  width: calc(var(--px) * 26); height: calc(var(--px) * 26);
  margin: calc(var(--px) * -13) 0 0 calc(var(--px) * -13);
  border: calc(var(--px) * 1.5) solid #ffe060;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--px) * 4) #ffe060, inset 0 0 calc(var(--px) * 4) #ffe060;
  animation: zeigen 1s ease-in-out infinite;
}
@keyframes zeigen { 50% { transform: scale(0.75); opacity: 0.7; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Handy quer: Das Spiel wäre dann winzig. Hinweis statt Spielfeld. */
#quer { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #quer {
    display: flex; position: fixed; inset: 0; z-index: 50;
    align-items: center; justify-content: center; text-align: center;
    background: #120c22; color: var(--papier); font-size: 18px; line-height: 1.5;
  }
  #quer div { font-size: 40px; }
  #quer b { font-size: 20px; }
  #quer small { font-size: 14px; opacity: 0.7; }
}

/* Neustart im Menü: abgesetzt vom Rest */
.neustart { margin-top: calc(var(--px) * 8); padding-top: calc(var(--px) * 5); border-top: calc(var(--px) * 0.6) dashed rgba(106, 74, 58, 0.4); justify-content: center; }

.version { text-align: center; opacity: 0.6; margin-top: calc(var(--px) * 4); }

/* Unauffälliger Knopf (Neu anfangen): grau statt rot */
.k--leise { background: linear-gradient(#b8b0a4, #948a7c); border-color: #6e665a; box-shadow: 0 calc(var(--px) * 1.2) 0 #6e665a, inset 0 calc(var(--px) * 0.8) 0 rgba(255, 255, 255, 0.25); color: #fffaf0; }
/* Menü: mehr Luft zwischen den Blöcken */
#blatt[data-art="menue"] .schalter { margin: calc(var(--px) * 5) 0; gap: calc(var(--px) * 3); }
#blatt[data-art="menue"] .neustart { margin-top: calc(var(--px) * 12); padding-top: calc(var(--px) * 8); }

/* Erfolgswand: Pixelbild in Spielpixeln, Socken zum Antippen */
.wand {
  display: block; box-sizing: content-box; width: calc(var(--px) * 160); margin: calc(var(--px) * 1) auto 0;   /* 1:1 in Spielpixeln (11.10.) */
  image-rendering: pixelated; border-radius: calc(var(--px) * 1.5);
  border: calc(var(--px) * 0.8) solid #4a2c16; cursor: pointer;
}
.wand-zeile { text-align: center; margin: calc(var(--px) * 2) 0 0; font-size: var(--t-klein); }
.wand-zeile + .klein { text-align: center; }
/* Geschichte eines Stammgastes (17.10.): Porträt 64 x 52, per Scale2x 128 x 104, 1:1 */
#modal .stamm-portraet {
  display: block; margin: 0 auto calc(var(--px) * 2); box-sizing: content-box;
  width: calc(var(--px) * 128); height: calc(var(--px) * 104); image-rendering: pixelated;
  border: calc(var(--px) * 0.6) solid #c89a5a; border-radius: calc(var(--px) * 2);
}
#modal .story-text { font-style: italic; }
#modal .story-stand { margin: calc(var(--px) * 2) auto 0; max-width: calc(var(--px) * 110); font-size: var(--t-klein); color: var(--text3); text-align: center; }
#modal .story-stand .balken { margin-top: calc(var(--px) * 1); }
#modal .vogel-gross {   /* 14.10.: Steckbrief, 28 x 28 doppelt */
  display: block; margin: 0 auto calc(var(--px) * 2);
  width: calc(var(--px) * 56); height: calc(var(--px) * 56); image-rendering: pixelated;
}
.album-karte.tippbar { cursor: pointer; }
#modal .socke-gross {
  display: block; margin: 0 auto calc(var(--px) * 2);
  width: calc(var(--px) * 20); height: calc(var(--px) * 24); image-rendering: pixelated;   /* Socke per Scale2x, 1:1 (11.10.; vorher 10x12 dreifach gezogen) */
}

/* Einführung im Laden: die Zeile, zu der geführt wird */
.zeile.fuehrung { outline: calc(var(--px) * 0.8) solid var(--gold); outline-offset: calc(var(--px) * -0.4); background: #fff3c4; animation: fuehrung 1.2s ease-in-out infinite; }
@keyframes fuehrung { 50% { outline-color: #ffcf40; background: #ffe89a; } }
.zeile .txt .fuehr-pfeil { display: block; margin-top: calc(var(--px) * 1); font: bold var(--t-klein) var(--schrift); color: var(--rot2); }

/* Startziele (ziele.js): eine Leiste unter der Kopfzeile, antippbar */
#ziel {
  position: absolute; left: calc(var(--px) * 3); right: calc(var(--px) * 3); top: calc(var(--px) * 19);
  display: flex; align-items: center; gap: calc(var(--px) * 2);
  appearance: none; cursor: pointer; text-align: left;
  padding: calc(var(--px) * 2.6) calc(var(--px) * 3);
  background: rgba(247, 233, 200, 0.82); color: var(--hinweis);   /* leicht durchsichtig */
  border: calc(var(--px) * 0.8) solid var(--holz); border-radius: calc(var(--px) * 2);
  box-shadow: 0 calc(var(--px) * 0.8) 0 var(--holz2);
  font: bold var(--t-betont) var(--schrift); line-height: 1.2;
  z-index: 3;
}
#ziel .nr { flex: none; background: var(--rot); color: #fff; border-radius: calc(var(--px) * 1.4); padding: calc(var(--px) * 0.8) calc(var(--px) * 1.8); font-size: var(--t-text); }
#ziel .was { flex: 1; min-width: 0; }
#ziel .was i { font-style: normal; color: var(--rot2); white-space: nowrap; }
#ziel .lohn, #ziel small, #ziel .los { flex: none; white-space: nowrap; font-size: var(--t-text); }
#ziel .lohn { color: #9a6a10; }
#ziel small { color: var(--text3); font-weight: normal; }
#ziel .los { background: var(--gruen); color: #fff; border-radius: calc(var(--px) * 1.4); padding: calc(var(--px) * 0.8) calc(var(--px) * 2); }
/* Laufendes nächstes Ziel nach den Startzielen (13.10.) */
#ziel.weiter .nr { background: var(--gruen); }
/* Ziel geschafft: einmal kurz aufleuchten */
#ziel.puls { animation: zielGeschafft 0.9s ease-out 1; }
@keyframes zielGeschafft { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 80, 0.9); } 40% { transform: scale(1.04); box-shadow: 0 0 calc(var(--px) * 6) calc(var(--px) * 2) rgba(255, 210, 80, 0.8); } 100% { transform: scale(1); box-shadow: 0 calc(var(--px) * 0.8) 0 var(--holz2); } }
#ziel.ansturm { background: rgba(255, 226, 150, 0.95); border-color: var(--rot); animation: zielPuls 0.8s ease-in-out infinite; }
#ziel.ansturm .nr { background: var(--rot); }
#ziel.ansturm .fort span { background: var(--rot); }
#ziel.zimt { background: rgba(250, 232, 200, 0.95); }
#ziel.markt { background: rgba(255, 236, 210, 0.96); border-color: #c83030; }
#ziel.markt .nr { background: #2f7a3a; }
#ziel.markt .los { background: #c83030; }
.haendler-liste { display: flex; flex-direction: column; gap: calc(var(--px) * 2); margin-top: calc(var(--px) * 2); text-align: left; }
.zeile.haendler { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--px) * 2.5); align-items: center; background: var(--papier2); border-radius: calc(var(--px) * 1.5); padding: calc(var(--px) * 2); }
/* Händler: Symbol wie in den Läden (18 mit Rahmen = 16 Spielpixel); vorher 13, also gestaucht */
.zeile.haendler .txt b { display: block; font-size: var(--t-betont); }
.zeile.haendler .txt span { display: block; font-size: var(--t-klein); line-height: 1.3; }
.zeile.haendler .txt em { font-style: normal; font-size: var(--t-klein); color: var(--rot2); }
.zeile.haendler .k.gesperrt { opacity: 0.55; }
#ziel.bereit { background: rgba(255, 243, 196, 0.9); border-color: var(--gold); animation: zielPuls 1.4s ease-in-out infinite; }
@keyframes zielPuls { 50% { box-shadow: 0 0 0 calc(var(--px) * 1.2) rgba(232, 176, 48, 0.55), 0 calc(var(--px) * 0.8) 0 var(--holz2); } }
#ziel:active { transform: scale(0.97); }
#ziel .fort {
  position: absolute; left: calc(var(--px) * 2); right: calc(var(--px) * 2); bottom: calc(var(--px) * 0.8);
  height: calc(var(--px) * 1.2); border-radius: calc(var(--px) * 0.6); background: rgba(90, 60, 30, 0.18); overflow: hidden;
}
#ziel .fort span { display: block; height: 100%; background: linear-gradient(90deg, #e8b030, #ffd860); transition: width 0.4s; }
#ziel.bereit .fort span { background: var(--gruen); }
/* Einblendungen rutschen unter die Leiste */
/* Die Leiste kann zweizeilig werden - ui.js misst ihre Unterkante (--ziel-unten) */
.mit-ziel #toast { top: calc(var(--ziel-unten, calc(var(--px) * 36)) + var(--px) * 3); }

/* Die Kiste beim Zurückkommen (zeigeKiste in ui.js) */
#modal .kiste {
  display: block; margin: 0 auto calc(var(--px) * 2);
  width: calc(var(--px) * 48); height: calc(var(--px) * 40); image-rendering: pixelated;
}

/* Hinweisblase offen = Pause: Bild blasser und dunkler, Blase und Kopfzeile bleiben klar */
#cv { transition: filter 0.25s; }
#huelle.pausiert #cv { filter: saturate(0.3) brightness(0.72); }
.txt i.rezept { font-style: normal; font-weight: bold; color: #2f7a3a; }

/* Betatest 2: Punkt statt Zahl */
#kartenOrte .ort-neu.punkt { min-width: calc(var(--px) * 2.6); width: calc(var(--px) * 2.6); height: calc(var(--px) * 2.6); padding: 0; vertical-align: super; }
#aufBadge.punkt { min-width: calc(var(--px) * 3.6); width: calc(var(--px) * 3.6); height: calc(var(--px) * 3.6); }
.modus.empfohlen { border-color: var(--gold) !important; box-shadow: 0 0 0 calc(var(--px) * 0.6) var(--gold); }
.modus .empf { font-style: normal; font-size: 0.7em; background: var(--gold); color: var(--tinte); padding: 0 calc(var(--px) * 1.2); border-radius: calc(var(--px) * 1); vertical-align: middle; margin-left: calc(var(--px) * 1); }

/* Minispiele: Kopfzeile und Schrift (minihud.js) - wie die Kopfzeile am Stand */
#miniHud { position: absolute; inset: 0; pointer-events: none; z-index: 1; font-weight: bold; color: #fff; }
#miniHud .mh-kopf {
  position: absolute; left: 0; right: calc(var(--px) * 16); top: 0; height: calc(var(--px) * 16);
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--px) * 2);
  padding: 0 calc(var(--px) * 3); font-size: var(--t-betont);
}
#miniHud .mh-kopf > div {
  /* 14 hoch (11.10.): Die Schrift steht 1:1 in Spielpixeln und ist mit Kontur
     11 Pixel hoch - in 11 mit Innenabstand ragte sie über den Kasten */
  box-sizing: border-box; height: calc(var(--px) * 14); display: flex; align-items: center; gap: calc(var(--px) * 1.5);
  background: rgba(40, 20, 10, 0.62); border: calc(var(--px) * 0.8) solid rgba(255, 230, 180, 0.35);
  border-radius: calc(var(--px) * 2); padding: 0 calc(var(--px) * 2.5); white-space: nowrap;
}
#miniHud .mh-zeit.knapp span { color: #ff8a7a; animation: pulsieren 0.6s infinite; }
#miniHud .mh-punkte { color: #ffe27a; }
#miniHud .mh-kette { color: #8ae88a; gap: calc(var(--px) * 2); }
#miniHud .mh-kette i { display: block; width: calc(var(--px) * 16); height: calc(var(--px) * 2.4); background: rgba(0, 0, 0, 0.45); border-radius: calc(var(--px) * 1.2); overflow: hidden; }
#miniHud .mh-kette b { display: block; height: 100%; background: #8ae88a; }
#miniHud .mh-kette.fort { color: #fff; font-size: var(--t-mini); }
#miniHud .mh-kette.fort i { width: calc(var(--px) * 26); }
#miniHud .mh-kette.versteckt { visibility: hidden; }
#miniHud .mh-hinweis {
  position: absolute; left: 50%; top: calc(var(--px) * 18); transform: translateX(-50%);
  background: rgba(40, 20, 10, 0.62); color: #ffe27a; font-size: var(--t-klein);
  padding: calc(var(--px) * 1) calc(var(--px) * 3); border-radius: calc(var(--px) * 3); white-space: nowrap;
}
/* Hinweis an einer Stelle im Bild (Backstube): größer und kräftiger */
#miniHud .mh-hinweis.gross { font-size: var(--t-text); background: rgba(40, 20, 10, 0.82); padding: calc(var(--px) * 1.4) calc(var(--px) * 3.5); border: calc(var(--px) * 0.6) solid #c89a5a; }
#miniHud .mh-gross {
  position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center;
  font-size: calc(var(--px) * 22); letter-spacing: calc(var(--px) * 0.5);
  /* Kein Balken dahinter (11.10., Nutzerwunsch) - die Kontur trägt die Lesbarkeit */
  --k: calc(var(--px) * 0.9);
  text-shadow: var(--k) 0 0 #5a1414, calc(var(--k) * -1) 0 0 #5a1414, 0 var(--k) 0 #5a1414, 0 calc(var(--k) * -1) 0 #5a1414,
    var(--k) var(--k) 0 #5a1414, calc(var(--k) * -1) var(--k) 0 #5a1414, var(--k) calc(var(--k) * -1) 0 #5a1414, calc(var(--k) * -1) calc(var(--k) * -1) 0 #5a1414,
    0 calc(var(--px) * 2.2) 0 #2a0a0a, 0 0 calc(var(--px) * 6) rgba(0, 0, 0, 0.35);
  padding: calc(var(--px) * 3) 0;
}
/* Weihnachtsschrift (schrift.js): Canvas, pixelgenau hochgezogen */
#miniHud .schriftbild { display: inline-block; image-rendering: pixelated; vertical-align: middle; margin: calc(var(--px) * -2) 0; }   /* der Rand im Bild (pad 2) belegt keinen Platz */
#miniHud .mh-gross.plopp { animation: mhPlopp 0.35s ease-out; }
@keyframes mhPlopp { from { transform: translateY(-50%) scale(1.35); opacity: 0.4; } }
#miniHud .mh-schwebe {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  text-shadow: 0 calc(var(--px) * 0.6) 0 #2a1810, calc(var(--px) * 0.6) 0 0 #2a1810, calc(var(--px) * -0.6) 0 0 #2a1810, 0 calc(var(--px) * -0.6) 0 #2a1810;
  animation: mhSteigen 1s ease-out forwards;
}
@keyframes mhSteigen { to { transform: translate(-50%, calc(-100% - var(--px) * 14)); opacity: 0; } }
#miniHud .mh-label { position: absolute; transform: translate(-50%, 0); text-align: left; color: #2a1810; line-height: 1.15; white-space: nowrap; }
#miniHud .mh-label.wunsch { font-size: var(--t-gross); transform: none; }
#miniHud .mh-label.wunsch small { display: block; font-size: var(--t-text); }
#miniHud .mh-label.schild { font-size: var(--t-mini); color: #fff; background: rgba(40, 20, 10, 0.62); padding: 0 calc(var(--px) * 1.6); border-radius: calc(var(--px) * 1.5); }
#miniZu { top: calc(var(--px) * 1) !important; height: calc(var(--px) * 14) !important; width: calc(var(--px) * 14) !important; }   /* so hoch wie die Kästen der Kopfzeile */

/* Karte nachts (10.10.): Schilder glühen warm */
#landkarte.nacht #kartenOrte .ort { box-shadow: 0 0 calc(var(--px) * 3) rgba(255, 190, 90, 0.75), 0 calc(var(--px) * 0.8) 0 rgba(0, 0, 0, 0.3); border-color: #c8903a; }
#landkarte.nacht #kartenOrte .ort.zuhause { box-shadow: 0 0 calc(var(--px) * 4.5) rgba(255, 210, 110, 0.95), 0 calc(var(--px) * 0.8) 0 rgba(0, 0, 0, 0.3); }
#kartenOrte .ort-flaeche.santa { width: calc(var(--px) * 20); height: calc(var(--px) * 22); z-index: 3; }

/* Startfenster der Minispiele: drei Knöpfe für die Schwierigkeit */
.stufen-titel { margin: calc(var(--px) * 3) 0 0; font-size: var(--t-mini); font-weight: bold; color: var(--text3); text-transform: uppercase; letter-spacing: calc(var(--px) * 0.3); }
.stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * 2); margin-top: calc(var(--px) * 1.5); }
.stufen .k.stufe { display: flex; flex-direction: column; align-items: center; padding: calc(var(--px) * 2) 0; font-weight: bold; font-size: var(--t-text); background: #fff6e0; color: var(--tinte); border: calc(var(--px) * 0.6) solid #c89a5a; }
.stufen .k.stufe small { font-weight: normal; font-size: var(--t-mini); color: var(--text3); }
.stufen .k.stufe.gewaehlt { background: var(--rot); color: #fff; border-color: var(--rot2); }
.stufen .k.stufe.gewaehlt small { color: #ffe0d0; }

/* Rezeptbuch der Backstube (10.10.) */
.rezeptbuch { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * 2); margin: calc(var(--px) * 2) 0; }
.rezeptbuch .rezept { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--px) * 2);
  background: var(--papier2); border: calc(var(--px) * 0.6) solid #d8b880; border-radius: calc(var(--px) * 1.5); }
.rezeptbuch canvas { width: calc(var(--px) * 20); height: calc(var(--px) * 18); image-rendering: pixelated; }
.rezeptbuch b { font-size: var(--t-klein); line-height: 1.15; margin-top: calc(var(--px) * 1); }
.rezeptbuch small { font-size: var(--t-mini); color: var(--text3); line-height: 1.2; }
.rezeptbuch .zu { opacity: 0.6; border-style: dashed; }
/* Wunschzettel (10.10.): Kinderbrief auf liniertem Papier, Dankesbild */
.brief { background: repeating-linear-gradient(#fffdf6 0, #fffdf6 calc(var(--px) * 6.4), #c8d8f0 calc(var(--px) * 6.4), #c8d8f0 calc(var(--px) * 6.8));
  border-left: calc(var(--px) * 1) solid #e8a0a0; padding: calc(var(--px) * 3) calc(var(--px) * 4); text-align: left;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', cursive; color: #2a3a8a; transform: rotate(-0.6deg); }
.brief p { font-size: var(--t-betont); line-height: calc(var(--px) * 6.8); margin: 0 0 calc(var(--px) * 1.5); }
.brief .brief-gruss { text-align: right; }
.brief-text { font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', cursive; color: #2a3a8a; }
canvas.dankesbild { width: calc(var(--px) * 96); height: calc(var(--px) * 72); image-rendering: pixelated; display: block; margin: calc(var(--px) * 2) auto;
  box-shadow: 0 calc(var(--px) * 1) calc(var(--px) * 3) rgba(0,0,0,0.25); transform: rotate(1.2deg); }
/* Album (10.10.) */
.album-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--px) * 2); margin: calc(var(--px) * 1) 0 calc(var(--px) * 4); }
.album-karte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--px) * 1.6);
  background: var(--papier2); border: calc(var(--px) * 0.6) solid #d8b880; border-radius: calc(var(--px) * 1.5); }
.album-karte canvas { image-rendering: pixelated; }   /* Größe 1:1 aus der Leinwand, setzt albumKarte() */
.album-karte b { font-size: var(--t-mini); line-height: 1.15; }
.album-karte small { font-size: var(--t-mini); color: var(--text3); line-height: 1.2; }
.album-karte.zu { opacity: 0.65; border-style: dashed; }
.album-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--px) * 98), 1fr)); justify-items: center; gap: calc(var(--px) * 4); margin: calc(var(--px) * 2) 0 calc(var(--px) * 4); }
.album-bild { text-align: center; }
.album-bild canvas { display: block; width: calc(var(--px) * 96); height: calc(var(--px) * 72); image-rendering: pixelated; box-shadow: 0 calc(var(--px) * 1) calc(var(--px) * 2) rgba(0,0,0,0.25); }
.album-bild:nth-child(odd) canvas { transform: rotate(-1.5deg); }
.album-bild:nth-child(even) canvas { transform: rotate(1.5deg); }
.album-bild small { font-family: 'Comic Sans MS', 'Chalkboard SE', cursive; color: #2a3a8a; font-size: var(--t-mini); }
/* Der erste Schnee (10.10.): Rand beschlägt, eine große Flocke schwebt herab */
.erster-schnee { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; transition: opacity 0.9s; }
.erster-schnee.weg { opacity: 0; }
.erster-schnee .frost { position: absolute; inset: 0; opacity: 0; animation: frostAn 2.6s ease-out forwards;
  background: radial-gradient(ellipse at 0 0, rgba(240,248,255,0.85), transparent 38%), radial-gradient(ellipse at 100% 0, rgba(240,248,255,0.8), transparent 36%),
    radial-gradient(ellipse at 0 100%, rgba(240,248,255,0.8), transparent 36%), radial-gradient(ellipse at 100% 100%, rgba(240,248,255,0.85), transparent 38%),
    rgba(20, 30, 70, 0.25); }
.erster-schnee .flocke { position: absolute; left: 50%; top: -12%; width: calc(var(--px) * 35); height: calc(var(--px) * 35); image-rendering: pixelated;
  filter: drop-shadow(0 0 calc(var(--px) * 3) rgba(200,230,255,0.9)); animation: flockeFaellt 3.2s cubic-bezier(.3,.1,.3,1) forwards; }
@keyframes frostAn { to { opacity: 1; } }
@keyframes flockeFaellt {
  0% { transform: translate(-50%, 0) rotate(0deg); }
  30% { transform: translate(-80%, 120%) rotate(60deg); }
  60% { transform: translate(-25%, 260%) rotate(130deg); }
  100% { transform: translate(-50%, 380%) rotate(180deg) scale(1.15); }
}

/* Silvester (11.10.): „Bis zum nächsten Jahr!" in der Weihnachtsschrift, 1:1 in Spielpixeln */
#modal .abschied { display: flex; flex-direction: column; align-items: center; gap: 0; margin: calc(var(--px) * 3) 0 calc(var(--px) * 1); }
#modal .abschied .schriftbild { display: block; image-rendering: pixelated; margin: calc(var(--px) * -2) 0; }

/* Tipp „Als App speichern" (12.10.): nummerierte Schritte, Teilen-Zeichen wie in Safari */
#modal .anleitung { text-align: left; margin: calc(var(--px) * 2) 0; padding-left: calc(var(--px) * 7); }
#modal .anleitung li { margin: calc(var(--px) * 1.5) 0; }
#modal .teilen-zeichen { display: inline-block; position: relative; width: calc(var(--px) * 4.4); height: calc(var(--px) * 4.4); margin-left: calc(var(--px) * 1); vertical-align: -10%;
  border: calc(var(--px) * 0.5) solid #2a6ad8; border-top-color: transparent; border-radius: calc(var(--px) * 0.6); box-sizing: border-box; }
#modal .teilen-zeichen::before { content: ''; position: absolute; left: 50%; top: calc(var(--px) * -2.2); width: calc(var(--px) * 0.5); height: calc(var(--px) * 4); margin-left: calc(var(--px) * -0.25); background: #2a6ad8; }
#modal .teilen-zeichen::after { content: ''; position: absolute; left: 50%; top: calc(var(--px) * -2.4); width: calc(var(--px) * 1.8); height: calc(var(--px) * 1.8); margin-left: calc(var(--px) * -0.9);
  border-left: calc(var(--px) * 0.5) solid #2a6ad8; border-top: calc(var(--px) * 0.5) solid #2a6ad8; transform: rotate(45deg); box-sizing: border-box; }

/* ======================================================================
   Einheitliche Menüs (18.10., Durchsicht als UI-Designer)
   Gefunden: drei verschiedene Umschalter (Reiter, „Einkaufen | Mein Haus",
   Sprungleiste), vier Überschriftsstile, Schriftgrößen von 3,4 bis 5,8 für
   dasselbe, drei Größen für Schließknöpfe, Knopfbreiten von 34 bis 40 und
   ein Menü, dessen Knöpfe je nach Beschriftung umbrachen.
   Schriftleiter in Menüs: 4,4 klein · 5 Text · 5,6 betont · 8 Titel.
   ====================================================================== */

/* Umschalter: „Einkaufen | Mein Haus" und die Sprungleiste in Mein Haus sehen gleich aus */
.modi, .haus-sprung {
  gap: 0; padding: calc(var(--px) * 0.8);
  background: #e8d4a8; border: calc(var(--px) * 0.6) solid #c89a5a; border-radius: calc(var(--px) * 3);
}
.haus-sprung { top: 0; margin: 0 0 calc(var(--px) * 1.5); }
.modus-k, .hs-k {
  min-height: calc(var(--px) * 15); padding: 0 calc(var(--px) * 1);
  font: bold var(--t-text) var(--schrift); color: var(--holz); line-height: 1.1;
  background: none; border: 0; border-radius: calc(var(--px) * 2.4);
}
.hs-k + .hs-k { border-left: calc(var(--px) * 0.5) solid #c89a5a; border-radius: calc(var(--px) * 2.4); }
.hs-k:active { transform: scale(0.95); background: #fff3c4; }
.modus-k.aktiv { background: #fffaf0; color: var(--rot2); box-shadow: 0 calc(var(--px) * 0.6) 0 #c89a5a; }

/* Überschriften in Listen: eine Art, auch bei „Tagesaufträge" */
.gruppe, .aufgaben-titel {
  font-weight: bold; font-size: var(--t-klein); letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a5a30; opacity: 1;
  margin: calc(var(--px) * 4) 0 calc(var(--px) * 1.5); padding-bottom: calc(var(--px) * 1);
  border-bottom: calc(var(--px) * 0.5) solid #e0c898;
}
.gruppe.haus-abschnitt { border-bottom: 0; padding-bottom: calc(var(--px) * 2); font-size: var(--t-klein); }

/* Kleingedrucktes nicht unter 4,4 */
.album-karte b { font-size: var(--t-klein); }
.album-karte small { font-size: var(--t-mini); }
.vw { font-size: var(--t-klein); }
.vw small { font-size: var(--t-mini); }
.pw { font-size: var(--t-klein); }
.haus-zusatz, .haus-quelle { font-size: var(--t-klein); }

/* Knöpfe in Zeilen: gleiche Breite und Schrift */
.auftrag .k, .bitte-zettel .k, .knopfplatz .k { min-width: calc(var(--px) * 40); font-size: var(--t-text); }

/* Schließen- und Kartenknöpfe: eine Größe wie im Blatt (15) */
#kartenZu, #kartenText, #miniZu {
  width: calc(var(--px) * 15); height: calc(var(--px) * 15); border-radius: calc(var(--px) * 2);
  background: var(--holz); box-shadow: none;
}
#kartenZu, #miniZu { font-size: var(--t-titel); }
#kartenText { font-size: var(--t-betont); }

/* Menü: Knöpfe in zwei gleich breiten Spalten, kein Umbruch je nach Wortlaut */
#blatt[data-art="menue"] .schalter { display: grid; grid-template-columns: 1fr 1fr; }
#blatt[data-art="menue"] .schalter .k { min-height: calc(var(--px) * 15); padding: calc(var(--px) * 2); font-size: var(--t-text); line-height: 1.15; }
#blatt[data-art="menue"] .schalter .k:last-child:nth-child(odd) { grid-column: 1 / -1; }
#blatt[data-art="menue"] .neustart .k { width: 100%; }

/* Futterhaus-Fenster (18.10.): Szene 1:1 in Spielpixeln, Futterstand in fünf Stufen */
#modal .futter-szene {
  display: block; margin: 0 auto calc(var(--px) * 2); width: calc(var(--px) * 132); height: calc(var(--px) * 92);
  max-width: 100%; image-rendering: pixelated; box-sizing: border-box;
  border: calc(var(--px) * 1) solid var(--holz); border-radius: calc(var(--px) * 1.5);
}
.futter-stand { display: flex; gap: calc(var(--px) * 1.5); margin: 0 auto calc(var(--px) * 2); width: calc(var(--px) * 100); max-width: 100%; }
.futter-stand i { flex: 1; height: calc(var(--px) * 5); border-radius: calc(var(--px) * 1.2); background: #e8d8b8; border: calc(var(--px) * 0.6) solid #c89a5a; box-sizing: border-box; }
.futter-stand i.voll { background: linear-gradient(#f0d060, #d8a830); }
.futter-stand i.knapp { background: linear-gradient(#e86a4a, #c8402a); }
.futter-text { margin: calc(var(--px) * 1) 0 !important; font-size: var(--t-text); }
.futter-knapp { color: var(--rot2); font-weight: bold; }
.futter-gast { margin: calc(var(--px) * 1) 0 0 !important; }