@font-face { font-family: "PressStart"; src: url(fonts/press-start-2p.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url(fonts/vt323.woff2) format("woff2"); font-display: swap; }

:root {
  --pixel: "PressStart", "Courier New", monospace;
  --text: "VT323", "Courier New", monospace;
  --tinte: #3a220f; --holz-hell: #b87a45;
  --pergament: #f1dfb4;
  --gold: #f2c14e; --gold-dunkel: #c8912a; --rot: #b8412c; --gruen: #3f7d3a;
  --blase: #ffffff; --umriss: #2b2233;

  /* Pixelrahmen als 9-Teiler: 5×5-Bildchen, Ecken ausgespart → Stufenecken */
  --rahmen-pergament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%233a220f' d='M1 0h3v1h1v3h-1v1h-3v-1h-1v-3h1z'/%3E%3Cpath fill='%23c9a466' d='M1 1h3v3h-3z'/%3E%3C/svg%3E");
  --rahmen-blase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%232b2233' d='M1 0h3v1h1v3h-1v1h-3v-1h-1v-3h1z'/%3E%3Cpath fill='%23ffffff' d='M1 1h3v3h-3z'/%3E%3C/svg%3E");
  --rahmen-blase-gruen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%232f5a2a' d='M1 0h3v1h1v3h-1v1h-3v-1h-1v-3h1z'/%3E%3Cpath fill='%23dcf3c6' d='M1 1h3v3h-3z'/%3E%3C/svg%3E");
  --rahmen-holz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23140a04' d='M1 0h3v1h1v3h-1v1h-3v-1h-1v-3h1z'/%3E%3Cpath fill='%23a86b3a' d='M1 1h3v3h-3z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinte); font: 22px/1.15 var(--text);
  background-color: #3a342d; background-size: 256px 256px; image-rendering: pixelated;
  min-height: 100vh;
}
main { max-width: 780px; margin: 0 auto; padding: 8px 16px 64px; }
svg.sprite { display: block; shape-rendering: crispEdges; flex: none; }
img.sprite { display: block; flex: none; image-rendering: pixelated; }   /* DS-Köpfe (78) sind Bilder statt SVG */
button { font: inherit; color: inherit; }
.nur-vorlesen { position: absolute; left: -9999px; }

/* ---- Rahmen ---- */
.pergament, .blase, .holzschild { border-style: solid; border-width: 8px; background-clip: padding-box; }
.pergament { border-image: var(--rahmen-pergament) 2 / 8px; background-color: var(--pergament); padding: 12px 14px; }
.holzschild {
  border-image: var(--rahmen-holz) 2 / 8px; color: #ffe9b0; text-shadow: 2px 2px 0 #241408;
  background: repeating-linear-gradient(180deg, #8a5530 0 10px, #7a4a24 10px 12px);
}
.blase { border-image: var(--rahmen-blase) 2 / 8px; background: var(--blase); color: var(--umriss); padding: 6px 10px; position: relative; min-width: 0; }
.blase p { margin: 0; overflow-wrap: anywhere; }
.blase p + p { margin-top: 4px; }

/* ---- Wirtshausschild: schmal, damit das Bild möglichst viel Platz bekommt (Wunsch Michael) ---- */
.kopf { display: flex; justify-content: center; margin: 22px 0 8px; }
.wirtsschild { position: relative; padding: 5px 16px 4px; text-align: center; display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; }
.wirtsschild::before, .wirtsschild::after {
  content: ""; position: absolute; top: -26px; width: 4px; height: 18px;
  background: repeating-linear-gradient(180deg, #c8c8d8 0 4px, #55556a 4px 8px);
}
.wirtsschild::before { left: 20px; } .wirtsschild::after { right: 20px; }
h1 { font: 15px/1.2 var(--pixel); margin: 0; color: var(--gold); text-shadow: 2px 2px 0 #241408; letter-spacing: 1px; }
.wirtsschild p { font: 8px/1.4 var(--pixel); margin: 0; color: #ffe9b0; }

/* ---- Reiter je Termin (stehen im Aushang) ---- */
.reiter { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.reiter button {
  cursor: pointer; border: none; padding: 4px 8px 6px; font: 8px/1.4 var(--pixel);
  background: #8a5530; color: #ffe9b0; text-shadow: 2px 2px 0 #241408;
  box-shadow: inset 0 -4px 0 #5a3418, 0 0 0 3px #0d0805; margin: 3px;
}
.reiter button[aria-selected=true] { background: var(--gold); color: var(--tinte); text-shadow: none; box-shadow: inset 0 -4px 0 var(--gold-dunkel), 0 0 0 3px #0d0805; }
.reiter button .zahl { display: block; font: 15px/1 var(--text); margin-top: 2px; }
.reiter button.aus { opacity: .6; }
.reiter button:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }

/* ---- Termin-Kopf: Reiter, Knöpfe und eine Zeile Eckdaten ---- */
.aushang { padding: 6px 12px 8px; margin-bottom: 8px; }
.aushang .zeile { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.aushang .knoepfe { margin-top: 0; gap: 8px; }
.aushang .knopf.zweit { padding: 7px 10px 9px; font-size: 8px; }
.aushang h2.unter { font: 18px/1.4 var(--text); margin: 4px 0 0; }
.aushang h2 strong { font-weight: normal; color: var(--gold); }
.badge { display: inline-block; font: 8px/1 var(--pixel); padding: 5px 6px; vertical-align: middle; margin-left: 6px; }
.badge.naechster { background: var(--gold); color: var(--tinte); text-shadow: none; }
.badge.aus { background: #241408; color: #ff8a6a; }
.notiz { margin: 8px 0 0; padding: 6px 10px; background: #0003; }

/* ================= Isometrischer Raum ================= */
.raum {
  position: relative; margin: 0 auto; box-sizing: content-box; background: #000;
  border: 10px solid #3a220f; box-shadow: 0 0 0 4px #1a0e06, inset 0 0 0 2px #5a3418, 0 16px 34px rgba(0, 0, 0, .65);
}
.raum canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.raum::after { /* Röhrenbildschirm: Zeilen und dunkle Ränder */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(rgba(0, 0, 0, .13) 50%, transparent 50%) 0 0 / 100% calc(var(--s, 2) * 2px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .38));
}
.raum #laeufer { position: absolute; inset: 0; pointer-events: none; }
#wanderSchilder { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.auflage.blasen-ebene { z-index: 5; }
.auflage.blasen-ebene .schwebe { pointer-events: none; }
.wander-schild { position: absolute; transform: translate(-50%, -100%); }
.wander-schild .plakette.klein { max-width: none; }
.schwebe.plaudern .spruch, .schwebe.ork .spruch { white-space: normal; text-align: center; max-width: calc(var(--s, 2) * 64px); font-size: max(12px, calc(var(--s, 2) * 6px)); line-height: 1; color: var(--umriss); }
.schwebe.plaudern .wer { opacity: .7; }
.schwebe.ork { background: #f0e8d0; }
.schwebe.ork .spruch { color: #8a2a2a; display: inline-flex; gap: 2px; align-items: center; }
.auflagen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* Türen: Knopf über der gemalten Tür, Schild unten dran */
.tuer-knopf {
  position: absolute; pointer-events: auto; background: none; border: none; padding: 0 0 2px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
}
.tuer-knopf .plakette { font-size: max(11px, calc(var(--s, 2) * 5.5px)); max-width: none; flex: none; }
.tuer-knopf:hover, .tuer-knopf:focus-visible { outline: 2px dashed var(--gold); outline-offset: -2px; }
.tuer-knopf:hover .plakette, .tuer-knopf:focus-visible .plakette, .tuer-knopf.aktiv .plakette { background: var(--gold); color: var(--tinte); }
.auflage { position: absolute; transform: translate(-50%, -100%); }
.auflage.mitte { transform: translate(-50%, -50%); }
.auflage.unten { transform: translate(-50%, 0); }
.auflage.unten .schwebe { margin: 6px 0 0; }
.auflage.unten .schwebe::after {
  top: -6px; bottom: auto;
  box-shadow: -3px 0 0 #fff, 0 0 0 #fff, 3px 0 0 #fff, -3px -3px 0 var(--umriss), 0 -3px 0 #fff, 3px -3px 0 var(--umriss), 0 -6px 0 var(--umriss);
}
.kreide { font: calc(var(--s, 2) * 4px)/1 var(--pixel); color: #e8f0e0; white-space: nowrap; display: block; }
.kreide.klein { font-size: calc(var(--s, 2) * 3px); }
.kreide.wegweiser { font-size: calc(var(--s, 2) * 3.2px); color: #fff1c8; text-shadow: 1px 1px 0 #2a1a12; }
.zzz { display: block; font: calc(var(--s, 2) * 4px)/1 var(--pixel); color: #fff; text-shadow: 1px 1px 0 #1a1020; animation: zzz 2.4s steps(6) infinite; }
@keyframes zzz { from { transform: translate(0, 0); opacity: .3; } to { transform: translate(6px, -10px); opacity: 1; } }
.pokal-titel { display: block; width: calc(var(--s, 2) * 10px); height: calc(var(--s, 2) * 10px); pointer-events: auto; cursor: help; }
.zimmer-eck { margin: 0 0 10px; font-size: 20px; }
/* Messingschild unter dem Bild im Gästezimmer: wer es gemietet hat */
.zimmer-schild { display: block; font: max(8px, calc(var(--s, 2) * 4.5px))/1 var(--text); color: #3a2410; background: #d8b25a; border: 1px solid #8a6a2a; padding: 0 calc(var(--s, 2) * 1px); white-space: nowrap; }
/* Einladungen ins Gästezimmer */
.zimmer-art { display: inline-block; font: 9px/1.6 var(--pixel); text-transform: uppercase; padding: 2px 8px; border: 2px solid #6b4428; background: #f3e2b8; color: #4a2e1a; margin-bottom: 8px; }
.zimmer-art.zu { background: #4a2e1a; color: #ffe9a8; }
.einladungen { list-style: none; padding: 0; margin: 6px 0; }
.einladungen li { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 30px 4px 0; border-bottom: 1px dashed rgba(90, 60, 30, .35); font-size: 20px; }
.einladungen li .eck { flex: 1; opacity: .8; }
.einladungen .x { top: 6px; right: 0; }
.einladung-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.einladung-knoepfe .knopf { font-size: 11px; padding: 6px 10px; }
.truhe-inhalt .langtext { white-space: pre-line; overflow-wrap: anywhere; }
.schwebe.vielleicht { opacity: .85; }
.schwebe {
  border-style: solid; border-width: 6px; border-image: var(--rahmen-blase) 2 / 6px; background: #fff; background-clip: padding-box;
  padding: 1px 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap;
  margin-bottom: 6px; position: relative; pointer-events: auto;
}
.schwebe::after { /* Zipfel nach unten */
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 3px; height: 3px; margin-left: -2px;
  box-shadow: -3px 0 0 #fff, 0 0 0 #fff, 3px 0 0 #fff, -3px 3px 0 var(--umriss), 0 3px 0 #fff, 3px 3px 0 var(--umriss), 0 6px 0 var(--umriss);
}
.schwebe .wer { font-size: 16px; line-height: 1; max-width: calc(var(--s, 2) * 52px); overflow: hidden; text-overflow: ellipsis; color: var(--umriss); }
.schwebe .symbole { display: flex; gap: 2px; }
.schwebe .symbole svg { width: calc(var(--s, 2) * 8px); height: calc(var(--s, 2) * 8px); }
.schwebe .wer { font-size: max(12px, calc(var(--s, 2) * 7.5px)); }
.schwebe.eigen .wer { background: var(--gold); padding: 0 3px; }
.raum-schild { display: block; font: calc(var(--s, 2) * 5px)/1.4 var(--pixel); color: #ffe9b0; text-shadow: 2px 2px 0 #241408; white-space: nowrap; }

@keyframes flacker { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes blinken { 50% { opacity: 0; } }
.flacker { position: relative; }
.flacker > svg:last-child { position: absolute; left: 0; top: 0; visibility: hidden; }
.flacker > svg:first-child { animation: flacker .5s steps(1) infinite; }
.flacker > svg:last-child { animation: flacker .5s steps(1) infinite reverse; }

/* ---- Wirt spricht ---- */
.weiter { position: absolute; right: 6px; bottom: 2px; font: 10px var(--pixel); color: var(--rot); animation: blinken 1s steps(1) infinite; }

/* ---- Tischgespräch ---- */
.gespraech { display: grid; gap: 10px; margin-bottom: 18px; }
.gast { display: flex; gap: 16px; align-items: flex-start; }
.gast .kopf-bild { width: 48px; flex: none; }
.gast .blase { flex: 1; }
.gast .blase::before { /* Zipfel nach links */
  content: ""; position: absolute; left: -8px; top: 8px; width: 4px; height: 4px;
  box-shadow: -4px 0 0 var(--umriss), -8px 4px 0 var(--umriss), -4px 4px 0 #fff, 0 4px 0 #fff, 4px 4px 0 #fff,
    -4px 8px 0 var(--umriss), 0 8px 0 #fff;
}
.gast .name { font: 9px var(--pixel); color: var(--rot); display: block; margin-bottom: 3px; }
.gast.eigen .name::after { content: " (du)"; color: var(--gruen); }
.gast .spiel { color: #6b2a8a; }
.gast .kommentar { font-style: italic; color: #5a4a3a; }
.x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; z-index: 5;
  background: var(--rot); color: #fff; border: 3px solid var(--umriss); font: 9px/1 var(--pixel); cursor: pointer; }

h3 { font: 9px/1.5 var(--pixel); margin: 0 0 8px; text-transform: uppercase; }
.bestellung h3 { margin-top: 12px; }

/* ---- Wunschliste ---- */
.wunsch { margin-bottom: 18px; }
.rangliste { display: grid; gap: 6px; }
.rang { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.rang .wer { font-size: 18px; opacity: .75; }
.balken { grid-column: 1 / -1; height: 12px; background: var(--tinte); padding: 2px; }
.balken span { display: block; height: 100%; background: repeating-linear-gradient(90deg, #d0453a 0 6px, #ff8a5a 6px 8px, var(--tinte) 8px 10px); }
.rang:first-child .balken span { background: repeating-linear-gradient(90deg, #d9a21a 0 6px, #ffe07a 6px 8px, var(--tinte) 8px 10px); }
.leer { margin: 0; opacity: .8; }

/* ---- Bestellzettel ---- */
.bestellung .titel { font: 10px/1.5 var(--pixel); margin: 0 0 10px; }
.bestellung label { display: block; font: 9px/1.5 var(--pixel); margin-bottom: 6px; text-transform: uppercase; }
input[type=text], input[type=password] {
  width: 100%; font: 22px var(--text); color: var(--tinte); background: #fff8e2;
  border: none; box-shadow: inset 0 0 0 3px var(--tinte), inset 3px 3px 0 3px #d9c08a; padding: 8px 12px; border-radius: 0;
}
input[type=text]::placeholder, input[type=password]::placeholder { color: #9a8560; }
input[type=text]:focus, input[type=password]:focus { outline: none; box-shadow: inset 0 0 0 3px var(--rot), inset 3px 3px 0 3px #d9c08a; }
.hinweis { font-size: 18px; margin: 6px 0 0; opacity: .8; }
.anmeldung { display: grid; grid-template-columns: minmax(0, 1fr) 7em; gap: 10px; }
.anmeldung #pin { letter-spacing: 4px; text-align: center; }
.angemeldet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.marken { display: flex; flex-wrap: wrap; gap: 4px; }
.marke {
  cursor: pointer; border: none; padding: 5px 10px 7px; margin: 3px; font-size: 20px; line-height: 1;
  background: var(--holz-hell); color: #2a1608; display: inline-flex; gap: 6px; align-items: center;
  box-shadow: inset 0 -4px 0 #8a5530, 0 0 0 3px var(--tinte);
}
.marke:hover { background: #c98a52; }
.marke[aria-pressed=true] { background: var(--gold); box-shadow: inset 0 -4px 0 var(--gold-dunkel), 0 0 0 3px var(--tinte); }
.marke[aria-pressed=true]::after { content: ""; width: 12px; height: 10px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath fill='%233f7d3a' d='M5 0h1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h1v1h1v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.marke:focus-visible { outline: 3px dashed var(--rot); outline-offset: 4px; }
.marke .n { font-size: 16px; opacity: .7; }
.felder { display: grid; gap: 10px; margin-top: 12px; }
.knoepfe { display: flex; gap: 14px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.knopf {
  cursor: pointer; border: none; font: 11px/1 var(--pixel); padding: 12px 16px 14px;
  background: var(--rot); color: #fff; text-shadow: 2px 2px 0 #5a1a10;
  box-shadow: inset 0 -5px 0 #7a2618, 0 0 0 3px var(--umriss), 0 6px 0 3px #0004;
}
.knopf:hover { background: #cc4a33; }
.knopf:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 #7a2618, 0 0 0 3px var(--umriss), 0 3px 0 3px #0004; }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf.zweit { background: var(--holz-hell); color: var(--tinte); text-shadow: none; box-shadow: inset 0 -5px 0 #8a5530, 0 0 0 3px var(--umriss); font-size: 9px; padding: 9px 12px 11px; }
.meldung { font-size: 21px; }
.meldung.ok { color: var(--gruen); } .meldung.fehler { color: var(--rot); }
.hp { position: absolute; left: -9999px; }

/* ---- Hinterzimmer ---- */
.admin { margin-top: 30px; }
.admin h2 { font: 11px var(--pixel); color: var(--rot); margin: 0 0 6px; }
.admin h3 { margin-top: 12px; }
.admin .knoepfe { margin-top: 8px; }
.admin .etikett { min-width: 11em; }
.admin .chipliste { display: flex; flex-wrap: wrap; gap: 10px; }
.admin .chip { position: relative; background: #0001; box-shadow: 0 0 0 2px var(--tinte); padding: 4px 30px 4px 8px; }
.admin .chip .x { top: 2px; right: 2px; }
.admin .von { opacity: .7; font-size: 17px; }

footer { text-align: center; font: 8px/1.8 var(--pixel); color: #f1dfb4; margin-top: 26px; text-shadow: 2px 2px 0 #000; }

@media (max-width: 520px) {
  body { font-size: 21px; }
  h1 { font-size: 13px; }
  .schwebe { border-width: 4px; border-image-width: 4px; padding: 0 2px 1px; }
  .schwebe .wer { max-width: 72px; font-size: 11px; }
  .aushang h2.unter { font-size: 17px; }
}

.warnung { background: #7a2a26; color: #fff4d6; padding: 6px 10px; margin: 10px 0 0; font-size: 20px; }
.fest-zeile select { width: auto; flex: 1; min-width: 10em; }
.fest-zeile input[type=number] { width: 6em; }

/* ---- Figurenwahl ---- */
.figurenwahl-block { margin-top: 10px; }
.figurenwahl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.figur-knopf {
  cursor: pointer; border: none; background: #fff8e2; padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 0 0 2px #c9a466; font-size: 16px; line-height: 1; color: var(--tinte);
}
.figur-knopf svg { max-width: 100%; height: auto; }
.figur-gruppe { font: 9px/1.5 var(--pixel); text-transform: uppercase; margin: 10px 0 4px; color: var(--rot); }
/* ---- Aufklappbare Bereiche (Wunsch Michael: weniger Scrollen) ---- */
.klapp { margin-bottom: 14px; }
.klapp summary { cursor: pointer; list-style: none; font: 10px/1.6 var(--pixel); text-transform: uppercase; color: #ffe9b0; text-shadow: 2px 2px 0 #241408;
  background: repeating-linear-gradient(180deg, #8a5530 0 10px, #7a4a24 10px 12px); padding: 8px 12px; box-shadow: 0 0 0 3px #0d0805; margin: 3px 3px 10px; }
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary::before { content: '▶ '; color: var(--gold); }
.klapp[open] summary::before { content: '▼ '; }
.klapp summary .zahl { color: var(--gold); margin-left: 6px; }
.klapp summary:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }
/* Aufklappbares auf Pergament (Einstellungen, Truhe, Fenster): dunkle Schrift auf hellem Balken */
.pergament .klapp, .fenster-inhalt .klapp { margin: 10px 0; }
.pergament .klapp summary, .fenster-inhalt .klapp summary { color: var(--tinte); text-shadow: none; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; padding: 6px 10px; margin: 2px 2px 8px; }
.pergament .klapp summary::before, .fenster-inhalt .klapp summary::before { color: var(--rot); }
.pergament .klapp summary .zahl, .fenster-inhalt .klapp summary .zahl { color: var(--rot); }
.brief-knopf { display: block; background: none; border: none; padding: 0; cursor: pointer; pointer-events: auto; animation: briefHuepfen 1s steps(2) infinite; }
.brief-knopf:hover, .brief-knopf:focus-visible { outline: 2px dashed var(--gold); }
.brett-block { margin-bottom: 14px; }
.brett-block > h3 { font: 10px/1.6 var(--pixel); color: #ffe9b0; text-shadow: 2px 2px 0 #241408; text-transform: uppercase; margin: 0 0 6px; }
.fenster-inhalt .brett { margin: 0 0 12px; }
.figur-knopf span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.figur-knopf:hover { background: #fff1c8; }
.figur-knopf[aria-checked=true] { background: var(--gold); box-shadow: 0 0 0 3px var(--tinte); }
.figur-knopf:focus-visible { outline: 3px dashed var(--rot); outline-offset: 3px; }
.angemeldet :is(svg, img.ds-kopf) { margin-right: 4px; }
@media (max-width: 520px) { .figurenwahl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .figur-knopf span { font-size: 12px; } }

.textknopf { background: none; border: none; padding: 0; color: var(--rot); text-decoration: underline; cursor: pointer; font: inherit; }
.neue-pin { background: #fff8e2; box-shadow: 0 0 0 3px var(--gold); padding: 10px 12px; margin: 8px 0 12px; }
.neue-pin p { margin: 0 0 6px; }
.neue-pin .pin { font: 18px var(--pixel); letter-spacing: 4px; color: var(--rot); }
a.knopf { text-decoration: none; display: inline-block; }

/* ---- Tür mit Sichtschlitz ---- */
.augen .pupillen { animation: schielen 4s steps(1) infinite; }
@keyframes schielen { 0%, 30% { transform: translateX(0); } 35%, 60% { transform: translateX(1px); } 65%, 100% { transform: translateX(-1px); } }
.augen .lider { animation: blinzeln 5s steps(1) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes blinzeln { 0%, 90% { transform: scaleY(1); } 91%, 95% { transform: scaleY(.2); } 96%, 100% { transform: scaleY(1); } }
.schild-schrift { text-align: center; line-height: 1.25; font-size: calc(var(--s, 2) * 3.4px); color: var(--gold); text-shadow: 1px 1px 0 #241408; }
.tuer-form { margin-bottom: 18px; }
.tuer-form label { display: block; font: 9px/1.5 var(--pixel); margin: 10px 0 6px; text-transform: uppercase; }
.tuer-wege { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.anmeldung.drei { grid-template-columns: minmax(0, 1fr) 6.5em 6.5em; }
@media (max-width: 520px) { .anmeldung.drei { grid-template-columns: 1fr 1fr; } .anmeldung.drei > div:first-child { grid-column: 1 / -1; } }

.wirtsschild h1 { display: flex; align-items: center; justify-content: center; gap: 12px; }
.w20 { display: inline-flex; }
@media (max-width: 520px) { .wirtsschild h1 { font-size: 14px; gap: 8px; } .w20 svg { width: 16px; height: 16px; } }

/* ---- Teilen, Abo ---- */
.teilen-zeile { margin-top: 0; }
footer a { color: var(--gold); }
.teilen-feld { background: #fff8e2; color: var(--tinte); text-shadow: none; box-shadow: 0 0 0 3px var(--gold); padding: 10px 12px; margin: 10px 0 0; }
.teilen-feld textarea { font-size: 19px; min-height: 150px; }
.teilen-feld p { margin: 0 0 6px; }
.teilen-feld .link { font-size: 17px; overflow-wrap: anywhere; background: #0001; padding: 4px 6px; }
.bringt { color: #2f6b3a; }

/* ---- Schwarzes Brett ---- */
.brett { margin-bottom: 18px; padding: 14px; background: #b8864f; background-image: radial-gradient(#9a6a38 1px, transparent 1.5px); background-size: 6px 6px;
  box-shadow: inset 0 0 0 6px #5a3418, inset 0 0 0 8px #3a220f; }
.brett h3 { color: #fff4d6; text-shadow: 2px 2px 0 #3a220f; }
.zettel-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 12px; }
.zettel { position: relative; background: #fff8d8; transform: rotate(var(--dreh, 0deg)); box-shadow: 2px 3px 0 #0004; font-size: 19px; }
.zettel.angepinnt { background: #ffe9a8; }
.zettel .von { font-size: 16px; opacity: .7; }
.zettel::before { content: ""; position: absolute; top: 5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: #c23b3b; box-shadow: inset -2px -2px 0 #7a2618; }
.zettel.angepinnt::before { background: var(--gold); box-shadow: inset -2px -2px 0 var(--gold-dunkel); }
.brett .pinnen { color: #fff4d6; font-size: 18px; }
.brett .leer, .brett .hinweis { color: #fff4d6; }

/* ---- Ruhmeshalle ---- */
.rang-zahl { font: calc(var(--s, 2) * 4px) var(--pixel); color: #fff0a8; text-shadow: 1px 1px 0 #3a220f; }
.ruhm-titel, .chronik, .chronik-form { margin-bottom: 18px; }
.ruhm-titel h2, .chronik h2 { font: 12px/1.5 var(--pixel); margin: 0 0 10px; }
.titel-liste, .chronik-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.titel-liste li { display: flex; gap: 12px; align-items: center; background: #fff8e2; padding: 6px 10px; box-shadow: 0 0 0 2px var(--gold); }
.titel-liste strong { display: block; font: 10px/1.6 var(--pixel); color: var(--rot); }
.titel-liste span { font-size: 19px; }
.chronik-liste li { position: relative; display: flex; gap: 10px; align-items: flex-start; background: #fff8e2; padding: 6px 30px 6px 10px; box-shadow: 0 0 0 2px #c9a466; }
.chronik-liste strong { font-weight: normal; font-size: 21px; }
.chronik-liste span { display: block; font-size: 18px; }
.chronik-liste .datum { display: inline; opacity: .7; margin-left: 8px; }
.chronik-liste .notiz-text { font-style: italic; opacity: .85; }
.chronik-liste .x { top: 4px; right: 4px; }
.chronik-form label { display: block; font: 9px/1.5 var(--pixel); margin: 10px 0 6px; text-transform: uppercase; }
.chronik-form input[name=siegerFrei] { margin-top: 6px; }
.hinweis.hell { color: #fff4d6; text-shadow: 1px 1px 0 #000; }

.plakette.klein { font-size: max(10px, calc(var(--s, 2) * 5px)); max-width: calc(var(--s, 2) * 24px); padding: 0 3px; }
.rangliste-ruhm { margin-bottom: 18px; }
.rangliste-ruhm h2 { font: 12px/1.5 var(--pixel); margin: 0 0 6px; }
.rang-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.rang-liste li { display: grid; grid-template-columns: 2.2em auto minmax(0, 1fr); gap: 2px 10px; align-items: center; background: #fff8e2; padding: 5px 10px; box-shadow: 0 0 0 2px #c9a466; }
.rang-liste li.erster { box-shadow: 0 0 0 3px var(--gold); background: #fff1c8; }
.rang-liste .platz { font: 11px var(--pixel); color: var(--rot); text-align: right; grid-row: span 2; }
.rang-liste :is(svg, img.ds-kopf) { grid-row: span 2; }
.rang-liste .wer { font-size: 22px; }
.rang-liste .zahlen { font-size: 18px; grid-column: 3; }
.rang-liste .zahlen b { font-weight: normal; color: var(--rot); }
.marke.sieg { background: var(--gold); box-shadow: inset 0 -4px 0 var(--gold-dunkel), 0 0 0 3px var(--rot); }

/* ---- Räume umschalten ---- */
.orte { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; }
.orte button {
  cursor: pointer; border: none; display: inline-flex; gap: 6px; align-items: center; margin: 2px;
  padding: 6px 9px 8px; font: 9px/1.2 var(--pixel); background: #5a3418; color: #ffe9b0; text-shadow: 2px 2px 0 #241408;
  box-shadow: inset 0 -4px 0 #3a220f, 0 0 0 3px #0d0805;
}
.orte button[aria-selected=true] { background: var(--rot); color: #fff; box-shadow: inset 0 -4px 0 #7a2618, 0 0 0 3px #0d0805; }
.orte button:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }

/* ---- Empfehlung des Hauses: Kreidetafel über dem Bild, zugeklappt nur eine Zeile (Wunsch Michael) ---- */
.empfehlung { margin: 0 0 8px; padding: 3px; }
.empfehlung summary { cursor: pointer; list-style: none; display: flex; gap: 4px 12px; align-items: baseline; flex-wrap: wrap; }
.empfehlung summary::-webkit-details-marker { display: none; }
.empfehlung summary .titel { font: 9px/1.6 var(--pixel); color: #f2e6a8; text-transform: uppercase; white-space: nowrap; }
.empfehlung summary .kurz { flex: 1; min-width: 12em; }
.empfehlung summary .pfeil { font-size: 12px; opacity: .7; margin-left: auto; }
.empfehlung[open] summary .pfeil { transform: rotate(180deg); }
.empfehlung summary:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }
.kreidetafel { background: #2e3b32; padding: 6px 12px; color: #e8f0e0; text-shadow: 1px 1px 0 #0006; font-size: 18px; box-shadow: inset 0 0 0 2px #3e4d42; }
.kreidetafel.lang { border-top: 2px dashed #4e5d52; padding-top: 8px; }
.kreidetafel p { margin: 0 0 6px; }
.kreidetafel p:last-child { margin-bottom: 0; }
.kreidetafel b { color: #ffe07a; font-weight: normal; }

/* ---- Gewölbekeller ---- */
.truhen-knopf { pointer-events: auto; background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.truhen-flaeche { display: block; width: calc(var(--s, 2) * 24px); height: calc(var(--s, 2) * 14px); }
.plakette {
  display: block; margin-top: 2px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(var(--s, 2) * 56px); font: max(12px, calc(var(--s, 2) * 7px))/1.1 var(--text);
  background: #241408; color: #ffe9b0; box-shadow: 0 0 0 2px #0d0805;
}
.plakette i { font-style: normal; color: var(--gold); }
.truhen-knopf.eigen .plakette { background: var(--gold); color: var(--tinte); }
.truhen-knopf.eigen .plakette i { color: var(--rot); }
.truhen-knopf.offen .plakette { box-shadow: 0 0 0 2px var(--gold); }
.truhen-knopf:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }
.truhe-inhalt, .schatz-form, .keller-anmeldung { margin-bottom: 18px; }
.truhe-inhalt h2 { font: 12px/1.5 var(--pixel); margin: 0 0 10px; }
.schaetze { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.schatz { display: flex; gap: 12px; align-items: flex-start; background: #fff8e2; padding: 8px 10px; box-shadow: 0 0 0 2px #c9a466; }
.schatz-symbol { flex: none; padding-top: 2px; }
.schatz-text { flex: 1; min-width: 0; }
.schatz-text strong { font-weight: normal; font-size: 23px; }
.schatz-text .eck { display: block; font-size: 18px; opacity: .75; }
.schatz-text p { margin: 4px 0 0; font-size: 19px; overflow-wrap: anywhere; }
.schatz-knoepfe { display: flex; flex-direction: column; gap: 8px; }
.schatz-form label, .keller-anmeldung label { display: block; font: 9px/1.5 var(--pixel); margin: 10px 0 6px; text-transform: uppercase; }
.schatz-form h3 { margin: 0; }
.schatz-zeile { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; font: 22px var(--text); color: var(--tinte); background: #fff8e2; border: none; border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--tinte), inset 3px 3px 0 3px #d9c08a; padding: 8px 10px;
}
textarea { resize: vertical; min-height: 80px; }
input[type=number]:focus, input[type=date]:focus, input[type=time]:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 3px var(--rot), inset 3px 3px 0 3px #d9c08a; }
@media (max-width: 520px) {
  .schatz-zeile { grid-template-columns: 1fr 1fr; }
  .schatz-zeile > div:last-child { grid-column: 1 / -1; }
  .orte button { font-size: 8px; padding: 5px 7px 7px; }
}

/* ---- Fotos in den Truhen (Wunsch Michael) ---- */
.schatz-bild { flex: none; padding: 0; border: none; background: #241408; cursor: zoom-in; width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--tinte); }
.schatz-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.schatz-bild.gross { width: 96px; height: 96px; }
.schatz-bild:focus-visible { outline: 3px dashed var(--rot); outline-offset: 2px; }
.bild-feld { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bild-feld .hinweis { margin: 0; flex: 1 1 12em; }
.bild-meldung.fehler { color: var(--rot); opacity: 1; }
.datei-knopf { cursor: pointer; display: inline-block; }
.datei-knopf:focus-within { outline: 3px dashed var(--rot); outline-offset: 3px; }
.schatz-form select, .admin .kat-wahl { font-size: 19px; padding: 5px 8px; }
.admin .chip .kat-wahl { display: block; width: auto; margin-top: 4px; font-size: 16px; padding: 2px 6px; }
.admin .knoepfe .kat-wahl { width: auto; }
#bildansicht { position: fixed; inset: 0; z-index: 40; background: #0d0805d9; display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
#bildansicht[hidden] { display: none; }
.bild-rahmen { cursor: default; max-width: min(960px, 100%); max-height: 100%; display: flex; flex-direction: column;
  border: 8px solid; border-image: var(--rahmen-holz) 2 / 8px; background: #241408; box-shadow: 0 10px 0 4px #0007; }
.bild-rahmen img { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; margin: 0 auto; }
.bild-quelle { margin: 0; padding: 6px 10px; font-size: 16px; color: #f1dfb4; background: #241408; }
.bild-quelle a { color: var(--gold); }

/* ---- Kleiderschrank, Schere-Stein-Papier (Familie, Wunsch Michael) ---- */
.kleiderschrank .vorschau { display: flex; gap: 16px; justify-content: center; padding: 8px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; margin-bottom: 6px; }
.farben { display: flex; flex-wrap: wrap; gap: 6px; }
.farbe { width: 30px; height: 30px; border: none; cursor: pointer; padding: 0; box-shadow: 0 0 0 2px var(--tinte); font: 16px var(--text); color: var(--tinte); }
.farbe.wie-immer { background: #fff8e2; }
.farbe[aria-pressed=true] { box-shadow: 0 0 0 2px var(--tinte), 0 0 0 5px var(--gold); transform: translateY(-2px); }
.farbe:focus-visible { outline: 3px dashed var(--rot); outline-offset: 4px; }
.ssp-wahl { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ssp-wahl .marke { display: inline-flex; align-items: center; gap: 6px; }
.schwebe.ssp .spruch { display: inline-flex; align-items: center; gap: 4px; }
.familien-rangliste .haus-marke { font-size: 6px; }
/* Kindermodus (Marie, Tim): alles zum Antippen deutlich größer */
body.kinder-modus .ich-menue { font-size: 24px; gap: 10px; padding: 12px 14px; min-width: 15em; }
body.kinder-modus .ich-menue .textknopf { font-size: 24px; padding: 8px 4px; }
body.kinder-modus .ich-menue .wer { font-size: 11px; }
body.kinder-modus .knopf, body.kinder-modus .knopf.zweit { font-size: 12px; padding: 14px 18px 16px; }
body.kinder-modus .marke { font-size: 23px; padding: 10px 14px; }
body.kinder-modus .ssp-wahl { gap: 10px; }
body.kinder-modus .ssp-wahl .marke { flex-direction: column; font-size: 22px; padding: 12px 16px; min-width: 5.5em; }
body.kinder-modus .farbe { width: 46px; height: 46px; }
body.kinder-modus .farben { gap: 9px; }
body.kinder-modus .orte button { font-size: 11px; padding: 10px 13px 12px; }
body.kinder-modus .fenster-kopf .knopf { font-size: 14px; padding: 10px 16px 12px; }
body.kinder-modus .tuer-knopf .plakette { font-size: max(15px, calc(var(--s, 2) * 8px)); }
body.kinder-modus .hund-knopf { width: calc(var(--s, 2) * 24px); height: calc(var(--s, 2) * 18px); }
.hund-knopf.charlie-knopf { width: calc(var(--s, 2) * 20px); height: calc(var(--s, 2) * 14px); }
.hund-knopf.klein-knopf { width: calc(var(--s, 2) * 13px); height: calc(var(--s, 2) * 10px); }   /* Ivy, Spotty (87) */
body.kinder-modus .hund-knopf.charlie-knopf { width: calc(var(--s, 2) * 28px); height: calc(var(--s, 2) * 20px); }
/* Kindermodus: nur die Taverne, bildschirmfüllend (Wunsch Michael) – Schild, Termine, Wirt-Text und Inhalte darunter fallen weg */
body.kinder-modus { overflow: hidden; }
body.kinder-modus main { max-width: none; min-height: 100vh; padding: 0; display: flex; align-items: center; justify-content: center; }
body.kinder-modus main > :not(#raum) { display: none !important; }
.vollbild-knopf { display: none; }
body.kinder-modus .vollbild-knopf { display: block; position: absolute; right: 6px; bottom: 6px; z-index: 7; cursor: pointer; border: none;
  font: 10px var(--pixel); padding: 8px 10px 10px; background: #241408cc; color: #ffe9b0; box-shadow: 0 0 0 2px #0d0805; }
body.kinder-modus .vollbild-knopf:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }
.rangliste-block { margin-bottom: 14px; }

/* ---- Vorrat des Hauses (Truhe des Gastgebers) ---- */
.truhen-knopf.haus .plakette { box-shadow: 0 0 0 2px var(--gold); }
.haus-marke { display: inline-block; font: 7px/1 var(--pixel); padding: 3px 4px; background: var(--tinte); color: var(--gold); vertical-align: middle; margin-left: 2px; }
.marke .haus-marke { font-size: 6px; }
.haus-hinweis { background: #fff1c8; box-shadow: 0 0 0 2px var(--gold); padding: 6px 10px; margin: 0 0 10px; font-size: 20px; }

/* ---- Rundgang mit dem Wirt ---- */
body.im-rundgang main { padding-bottom: 260px; }
.rundgang {
  position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 30;
  width: min(760px, calc(100% - 20px)); display: flex; gap: 12px; align-items: flex-start;
  box-shadow: 0 8px 0 4px #0006;
}
.rundgang .wirt-kopf { flex: none; padding-top: 2px; }
.rundgang .inhalt { flex: 1; min-width: 0; }
.rundgang .sprecher { font: 9px var(--pixel); color: var(--rot); display: block; margin-bottom: 4px; }
.rundgang p { margin: 0; min-height: 3.4em; }
.rundgang .knoepfe { margin-top: 8px; gap: 10px; }
.rundgang .schritt { font: 8px var(--pixel); opacity: .7; margin-left: auto; }
.rundgang-ziel { outline: 4px dashed var(--gold); outline-offset: 6px; animation: zielBlinken 1.2s steps(2) infinite; }
@keyframes zielBlinken { 50% { outline-color: var(--rot); } }
.orte button.hilfe { background: #2e3b32; box-shadow: inset 0 -4px 0 #1e2a22, 0 0 0 3px #0d0805; }
@media (max-width: 520px) { .rundgang .wirt-kopf { display: none; } .rundgang p { font-size: 19px; } }

/* ---- Zettel und Schriftrolle ---- */
.zettel { padding: 0; }
.zettel-auf { display: block; width: 100%; text-align: left; background: none; border: none; padding: 16px 10px 8px; cursor: pointer; font: inherit; color: inherit; }
.zettel-auf:hover strong, .zettel-auf:focus-visible strong { text-decoration: underline; }
.zettel-auf:focus-visible { outline: 3px dashed var(--rot); outline-offset: 2px; }
.zettel strong { display: block; font-weight: normal; font-size: 21px; margin-bottom: 4px; overflow-wrap: anywhere; }
.zettel .vorschau { display: block; font-size: 17px; opacity: .8; margin-bottom: 6px; overflow-wrap: anywhere; }
.zettel .antwort-zahl { display: inline-block; font-size: 16px; background: #3a220f; color: #ffe9b0; padding: 0 5px; margin-left: 4px; }
.rolle-huelle { position: fixed; inset: 0; z-index: 40; background: rgba(13, 8, 5, .72); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow-y: auto; }
.rolle { width: min(560px, calc(100% - 34px)); position: relative; }   /* Platz für die Stabknäufe */
.rolle-stab {
  height: 18px; margin: 0 -14px; position: relative; z-index: 1;
  background: linear-gradient(#c07e48 0 3px, #a86a38 3px 9px, #7a4a24 9px 14px, #4a2a14 14px);
  box-shadow: 0 0 0 3px #1a0e06, 0 4px 0 3px #0005;
}
.rolle-stab::before, .rolle-stab::after { content: ""; position: absolute; top: -4px; width: 12px; height: 26px; background: var(--gold); box-shadow: inset -3px -3px 0 var(--gold-dunkel), 0 0 0 3px #1a0e06; }
.rolle-stab::before { left: -14px; } .rolle-stab::after { right: -14px; }
.rolle-blatt {
  background: #f4e4bc; background-image: linear-gradient(90deg, #e2cc98 0 6px, transparent 6px calc(100% - 6px), #e2cc98 calc(100% - 6px));
  box-shadow: inset 0 8px 8px -6px #0005, inset 0 -8px 8px -6px #0005; overflow-y: auto; max-height: 76vh; padding: 16px 22px;
}
.rolle.ausrollen .rolle-blatt { animation: ausrollen .7s steps(14) both; }
@keyframes ausrollen { from { max-height: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 76vh; } }
.rolle h2 { font: 12px/1.6 var(--pixel); margin: 0 30px 4px 0; color: var(--tinte); overflow-wrap: anywhere; }
.rolle .von { font-size: 17px; opacity: .7; display: block; margin-bottom: 10px; }
.rolle .langtext { white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 14px; }
.rolle .zu { position: absolute; top: 26px; right: 10px; z-index: 2; }
.rolle h3 { border-top: 2px dashed #c9a466; padding-top: 12px; }
.spiele-rolle .vorschlag { background: #fff3c8; box-shadow: 0 0 0 2px #c9a466; padding: 8px 10px; margin: 0 0 12px; }
.spiele-lage { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.spiel-lage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start; background: #fff8e2; padding: 8px; box-shadow: 0 0 0 2px #c9a466; }
.spiel-lage.passt { box-shadow: 0 0 0 3px #4f8a3c; }
.spiel-lage.fest { box-shadow: 0 0 0 3px var(--gold-dunkel); background: #fff0b8; }
.spiel-lage > div > span { display: block; font-size: 18px; }
.spiel-lage .lage { font-weight: bold; }
.spiel-lage .lage.passt { color: #2f6a24; }
.spiel-lage .lage.voll, .spiel-lage .lage.knapp { color: #8a5a10; }
.spiel-lage .lage.fehlt { color: #9a3a2a; }
.spiel-lage .hat, .spiel-lage .bedarf { opacity: .8; }
.spiel-lage .knoepfe { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.knopf.klein { font-size: 9px; padding: 6px 8px; }
.tisch-wahl { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kreidetafel .textknopf.hell { color: #ffe9b0; }
.antworten { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.antwort { position: relative; display: flex; gap: 10px; align-items: flex-start; padding-right: 26px; }
.antwort .wer { font: 8px var(--pixel); color: var(--rot); display: block; margin-bottom: 2px; }
.antwort .wann { font: 16px var(--text); color: var(--tinte); opacity: .6; margin-left: 6px; }
.antwort p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 20px; }
.antwort .x { top: 0; right: 0; }
.antwort-form textarea { min-height: 70px; font-size: 20px; }
.brett-form { display: grid; gap: 8px; }
.brett-form textarea { min-height: 60px; font-size: 20px; }
.brett-form .knoepfe { margin-top: 0; }

/* ---- Fenster in der Taverne (nur PC) und größeres Bild ---- */
#fenster[hidden], #ichMenue[hidden] { display: none; }
#ichMenue { position: absolute; z-index: 6; transform: translate(-50%, -100%); }
.ich-menue { display: grid; gap: 6px; padding: 8px 10px; min-width: 13em; font-size: 19px; box-shadow: 0 6px 0 3px #0006; }
.ich-menue .textknopf { text-align: left; }
.ich-menue hr { border: none; border-top: 2px dashed #c9a466; margin: 2px 0; width: 100%; }
.hund-knopf { display: block; width: calc(var(--s, 2) * 16px); height: calc(var(--s, 2) * 12px); background: none; border: none; padding: 0; cursor: pointer; pointer-events: auto; }
.hund-knopf:hover, .hund-knopf:focus-visible { outline: 2px dashed var(--gold); }
.wander-schild .hund-knopf { pointer-events: auto; }
.einstellungen label { display: block; font: 9px/1.5 var(--pixel); margin: 10px 0 6px; text-transform: uppercase; }
.einstellungen .anmeldung.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Hinterzimmer: Gästeliste und Zahlen */
.gaeste-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.gaeste-liste li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; background: #fff8e2; padding: 5px 30px 5px 8px; box-shadow: 0 0 0 2px #c9a466; }
.gaeste-liste :is(svg, img.ds-kopf) { grid-row: span 2; }
.gaeste-liste .wer { font-size: 21px; }
.gaeste-liste .eck { font-size: 17px; opacity: .75; }
.gaeste-liste .x { top: 4px; right: 4px; }
.gaeste-liste .gast-knoepfe { grid-column: 2; font-size: 17px; }
.galerie-mini { display: block; width: calc(var(--s, 2) * 12px); height: calc(var(--s, 2) * 9px); object-fit: cover; image-rendering: auto; box-shadow: 0 0 0 calc(var(--s, 2) * 1px) #f4efe0, 0 calc(var(--s, 2) * 1px) 0 calc(var(--s, 2) * 1px) #1a100a; pointer-events: none; }
.werkstatt-form { display: grid; gap: 8px; margin-bottom: 12px; }
.galerie-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galerie-karte { background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.galerie-karte p { margin: 2px 0; font-size: 17px; overflow-wrap: anywhere; }
.galerie-karte .von { font-size: 16px; opacity: .7; }
.galerie-karte .knoepfe { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.galerie-bild { padding: 0; border: none; background: #241408; cursor: zoom-in; aspect-ratio: 4 / 3; width: 100%; }
.galerie-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lob-zahl { font-size: 17px; display: inline-flex; gap: 4px; align-items: center; }
/* Handy: beim Hinscrollen nicht unter der festen Kopfleiste verschwinden */
.pnp-block, .chat-block { scroll-margin-top: 64px; }
/* Heldenakte: Stufenschild (goldener W20), EP-Balken, Aufträge, Stufen am Kaminsims */
.stufe-w20 { --g: 26px; display: inline-grid; place-items: center; flex: none; width: var(--g); height: var(--g); font: 700 calc(var(--g) * .42)/1 var(--pixel, monospace); color: #3a2208;
  background: linear-gradient(160deg, #ffe9a0, #e8b83a 55%, #b8801a); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); text-shadow: 0 1px 0 #fff4c8; }
.stufe-w20.klein { --g: 20px; }
.stufe-w20.gross { --g: 56px; }
.stufe-w20.riesig { --g: 110px; }
.held-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.held-kopf strong { display: block; font-size: 24px; }
.held-titel { font-size: 19px; color: var(--rot); }
.ep-balken { height: 14px; background: #3a2414; box-shadow: 0 0 0 2px #c9a466; margin: 4px 0; }
.ep-balken span { display: block; height: 100%; background: linear-gradient(90deg, #6fa04f, #b8e07a); transition: width .6s; }
.ep-text { margin: 2px 0 10px; font-size: 18px; }
.auftraege, .ep-quellen, .stufen-leiter, .stufen-liste, .regel-liste, .zustand-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.auftraege li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; padding: 6px 8px; font-size: 19px; }
.auftraege li.erledigt { background: #eaf6dc; box-shadow: 0 0 0 2px #6fa04f; }
.auftraege li.erledigt > span:nth-child(2) { text-decoration: line-through; opacity: .75; }
.auftraege b { font-weight: normal; font-size: 16px; color: var(--rot); white-space: nowrap; }
.auftraege li.erledigt b { color: #3a7a2a; }
.ep-quellen li, .regel-liste li { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 18px; border-bottom: 1px dotted #c9a466; padding: 2px 0; }
.ep-quellen i { font-style: normal; opacity: .7; }
.ep-quellen b { font-weight: normal; white-space: nowrap; }
.stufen-leiter li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-size: 17px; opacity: .6; }
.stufen-leiter li.geschafft { opacity: .85; }
.stufen-leiter li.jetzt { opacity: 1; font-weight: bold; background: #ffe9b0; padding: 2px 4px; }
.stufen-leiter i { font-style: normal; font-size: 15px; }
.stufen-liste li { display: flex; gap: 8px; align-items: center; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; padding: 4px 8px; }
.stufen-liste strong { display: block; }
.stufen-liste span { font-size: 16px; opacity: .8; }
.held-knopf { display: inline-flex; gap: 6px; align-items: center; }
.stufen-jubel { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; pointer-events: none; z-index: 90;
  background: radial-gradient(circle, rgba(255, 220, 120, .35), rgba(0, 0, 0, 0) 60%); animation: jubel 3.6s ease-out forwards; }
.stufen-jubel b { font: 20px/1 var(--pixel, monospace); color: #ffe9a0; text-shadow: 0 2px 0 #3a2208, 0 0 12px #000; }
@keyframes jubel { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 15% { opacity: 1; transform: scale(1.1) rotate(8deg); } 25% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
/* Regelbücher */
.regel-link { display: inline-flex; gap: 4px; align-items: center; font-size: 17px; color: var(--rot); margin-top: 2px; white-space: nowrap; }
.schatz-text .regel-link { display: flex; width: max-content; }
/* Hinterzimmer: Zustand */
.zustand-liste li { display: flex; gap: 8px; align-items: baseline; font-size: 18px; }
.zustand-liste .ampel { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3a9a3a; box-shadow: 0 0 0 1px #1a3a1a; }
.zustand-liste .schlecht .ampel { background: #d04a3a; box-shadow: 0 0 0 1px #4a1a1a; }
.held-block { scroll-margin-top: 64px; }
/* Nebelwald (Wunsch Michael 02.10.) */
.portal-wirbel { display: block; width: calc(var(--s, 2) * 17px); height: calc(var(--s, 2) * 33px); border-radius: 50%; pointer-events: none; opacity: .85;
  background: conic-gradient(from 0deg, #3a1e6a, #b48aff, #4a8aff, #3a1e6a, #d8b8ff, #3a1e6a); filter: blur(calc(var(--s, 2) * .6px)); animation: portal-dreh 4s linear infinite; }
.portal-wirbel.klein { width: calc(var(--s, 2) * 13px); height: calc(var(--s, 2) * 25px); }
@keyframes portal-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .portal-wirbel { animation: none; } }
.nebelwald { display: grid; gap: 8px; }
.wald-kopf { display: grid; gap: 6px; background: #1a2620; color: #e8f0e0; padding: 8px; box-shadow: 0 0 0 2px #4a6a4a; }
.wald-kopf > div { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; font-size: 17px; }
.wald-kopf > div > b { font-weight: normal; color: #ffe9a0; }
.wald-kopf .wald-balken { grid-column: 1 / -1; }
.wald-werte { display: flex !important; flex-wrap: wrap; gap: 4px 12px; font-size: 16px; }
.wald-werte b { color: #ffe9a0; font-weight: normal; }
.wald-drachen { color: #e8b83a; }
.wald-balken { display: block; height: 8px; background: #0c1410; box-shadow: 0 0 0 1px #4a6a4a; }
.wald-balken > span { display: block; height: 100%; background: #6fd06f; transition: width .3s; }
.wald-balken.lp > span { background: linear-gradient(90deg, #c83a2a, #e8783a); }
.wald-balken.ep > span { background: linear-gradient(90deg, #8a6ad0, #b48aff); }
.wald-balken.gegner > span { background: #c83a2a; }
.wald-gegner-lp .wald-balken { display: inline-block; width: 40%; vertical-align: middle; }
.wald-reiter { display: flex; flex-wrap: wrap; gap: 4px; }
.wald-reiter button { font: 8px/1.4 var(--pixel); padding: 6px 8px; border: none; cursor: pointer; background: #3a2a1a; color: #e8dcc0; box-shadow: 0 0 0 1px #6b4428; }
.wald-reiter button[aria-selected="true"] { background: #6b4428; color: #ffe9a0; }
.wald-erzaehl { margin: 0; font-size: 19px; font-style: italic; }
.wald-kampf { background: #12201a; color: #e8f0e0; padding: 10px; box-shadow: 0 0 0 2px #4a6a4a; text-align: center; }
.wald-kampf.drache { background: #2a0e08; box-shadow: 0 0 0 2px #c84a1a; }
.wald-kampf h3 { color: #ffe9a0; margin: 0 0 6px; }
.wald-gegner { display: grid; place-items: center; min-height: 96px; }
.wald-gegner svg { image-rendering: pixelated; }
.wald-gegner.wackelt { animation: wald-treffer .3s steps(3); }
@keyframes wald-treffer { 0% { transform: translateX(-4px); filter: brightness(2); } 50% { transform: translateX(4px); } 100% { transform: none; filter: none; } }
.wald-kampf-knoepfe { justify-content: center; }
.wald-log { max-height: 160px; overflow-y: auto; background: #f4ecd8; box-shadow: inset 0 0 0 1px #c9a466; padding: 6px 8px; font-size: 17px; }
.wald-log p { margin: 2px 0; opacity: .7; }
.wald-log p.neu { opacity: 1; font-weight: bold; }
.wald-buch { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 4px 0 10px; }
.wald-buch-tier { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 4px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; text-align: center; }
.wald-buch-tier svg { image-rendering: pixelated; }
.wald-buch-tier i { font-style: normal; font-size: 15px; line-height: 1; }
.wald-buch-tier b { font: 8px var(--pixel); color: var(--gruen); }
.wald-buch-tier.unbekannt { background: #e8dcc0; opacity: .75; }
.wald-buch-tier.selten { box-shadow: 0 0 0 2px var(--gold-dunkel); }
.wald-buch-tier.selten i { color: #8a1a0a; }
.wald-spalte h4 .eck { display: inline; font-size: 15px; opacity: .7; margin-left: 6px; }
/* Am Lagerfeuer: Noten des Barden, Lieder, Wege der Lichtung (Wunsch Michael 03.10.) */
.lager-noten { position: relative; display: block; width: calc(var(--s, 2) * 14px); height: calc(var(--s, 2) * 16px); pointer-events: none; }
.lager-noten i { position: absolute; bottom: 0; font: normal max(10px, calc(var(--s, 2) * 5px))/1 serif; color: #ffe9a0; text-shadow: 1px 1px 0 #3a2210; opacity: 0; animation: lager-note 3.6s ease-out infinite; }
.lager-noten i:nth-child(1) { left: 0; } .lager-noten i:nth-child(2) { left: 40%; animation-delay: 1.2s; } .lager-noten i:nth-child(3) { left: 75%; animation-delay: 2.4s; }
@keyframes lager-note { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--s, 2) * 4px), calc(var(--s, 2) * -14px)) rotate(12deg); } }
.schwebe.lager-lied .spruch { font-style: italic; }
.lager-lieder { margin: 4px 0 10px; padding-left: 0; list-style: none; font-style: italic; font-size: 18px; }
.lager-lieder li { margin: 3px 0; }
.wald-wege { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.wald-wege li { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; align-items: center; font-size: 18px; }
.wald-wege .knopf { width: 100%; }
@media (prefers-reduced-motion: reduce) { .lager-noten i { animation: none; opacity: .8; } }
/* Orte des Nebelwalds (Wunsch Michael 03.10.): Gegner im Bild, Nebel, Augen, Funken, Kesselblasen, Glut */
.wald-spalte > h3:first-child { margin-top: 0; }
.wald-spalte .nebelwald { display: grid; gap: 8px; }
.wald-szenen-gegner { display: block; pointer-events: none; filter: drop-shadow(0 calc(var(--s, 2) * 2px) 0 rgba(0, 0, 0, .45)); }
.wald-szenen-gegner svg, .wald-drache-schlaeft svg { display: block; image-rendering: pixelated; }
.wald-szenen-gegner.neu { animation: wald-auftauchen 1.1s ease-out; }
.wald-szenen-gegner.wackelt { animation: wald-treffer .3s steps(3); }
@keyframes wald-auftauchen { from { opacity: 0; transform: translateY(-10%) scale(.8); filter: blur(3px) brightness(2.2); } to { opacity: 1; transform: none; filter: drop-shadow(0 calc(var(--s, 2) * 2px) 0 rgba(0, 0, 0, .45)); } }
.plakette.klein.wald-gegner-schild { white-space: nowrap; max-width: none; }
.wald-schaden { display: block; font: calc(var(--s, 2) * 6px)/1 var(--pixel); color: #ffe84a; text-shadow: 2px 2px 0 #5a0e08, -1px -1px 0 #5a0e08; pointer-events: none; animation: wald-schaden 1s ease-out forwards; }
.wald-schaden.ich { color: #ff6a5a; }
@keyframes wald-schaden { from { opacity: 1; transform: translateY(0) scale(1.3); } to { opacity: 0; transform: translateY(-120%) scale(1); } }
.wald-drache-schlaeft { pointer-events: none; transform-origin: 50% 100%; animation: wald-atmen 4.5s ease-in-out infinite; }
@keyframes wald-atmen { 50% { transform: scale(1.02, 1.05); } }
.wald-zzz { display: block; font: calc(var(--s, 2) * 4px)/1 var(--pixel); color: #ffd8a0; text-shadow: 1px 1px 0 #3a0e08; pointer-events: none; white-space: nowrap; animation: wald-zzz 3s ease-in-out infinite; }
.wald-zzz i { font-style: normal; font-size: 1.3em; margin-left: .2em; } .wald-zzz b { font-weight: normal; font-size: 1.7em; margin-left: .2em; }
@keyframes wald-zzz { 0% { opacity: 0; transform: translate(0, 20%); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(20%, -60%); } }
.wald-augen { display: block; width: calc(var(--s, 2) * 7px); height: calc(var(--s, 2) * 2px); pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 18% 50%, #ff5a2a 0 32%, transparent 38%), radial-gradient(circle at 82% 50%, #ff5a2a 0 32%, transparent 38%);
  filter: drop-shadow(0 0 calc(var(--s, 2) * 2px) #ff3a1a); animation: wald-blinzeln 10s infinite; }
@keyframes wald-blinzeln { 0%, 38% { opacity: 0; } 42%, 70% { opacity: .9; } 71%, 72% { opacity: 0; } 73%, 86% { opacity: .9; } 90%, 100% { opacity: 0; } }
.wald-nebel { display: block; width: calc(var(--s, 2) * 280px); height: calc(var(--s, 2) * 16px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(190, 210, 220, .2), rgba(190, 210, 220, 0) 70%); animation: wald-ziehen 34s ease-in-out infinite alternate; }
@keyframes wald-ziehen { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.wald-funken, .wald-blasen, .wald-glut { position: relative; display: block; pointer-events: none; }
.wald-funken { width: calc(var(--s, 2) * 24px); height: calc(var(--s, 2) * 18px); }
.wald-funken i, .wald-blasen i, .wald-glut i { position: absolute; bottom: 0; left: 50%; width: calc(var(--s, 2) * 1px); height: calc(var(--s, 2) * 1px); opacity: 0; }
.wald-funken i { background: #ffd84a; box-shadow: 0 0 calc(var(--s, 2) * 2px) #ff8a2a; animation: wald-funke 2.6s ease-out infinite; }
.wald-funken i:nth-child(2) { --dx: -1; animation-delay: .15s; } .wald-funken i:nth-child(3) { --dx: .5; animation-delay: .3s; } .wald-funken i:nth-child(4) { --dx: -.6; animation-delay: .1s; }
@keyframes wald-funke { 0% { opacity: 0; transform: none; } 4% { opacity: 1; } 35% { opacity: 1; transform: translate(calc(var(--dx, 1) * var(--s, 2) * 9px), calc(var(--s, 2) * -15px)); }
  55%, 100% { opacity: 0; transform: translate(calc(var(--dx, 1) * var(--s, 2) * 12px), calc(var(--s, 2) * -8px)); } }
.wald-blasen { width: calc(var(--s, 2) * 30px); height: calc(var(--s, 2) * 22px); }
.wald-blasen i { width: calc(var(--s, 2) * 2px); height: calc(var(--s, 2) * 2px); border-radius: 50%; background: #9af09a; animation: wald-blase 2.2s ease-in infinite; }
.wald-blasen i:nth-child(1) { left: 30%; } .wald-blasen i:nth-child(2) { left: 55%; animation-delay: .8s; } .wald-blasen i:nth-child(3) { left: 72%; animation-delay: 1.5s; }
@keyframes wald-blase { 0% { opacity: 0; transform: none; } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--s, 2) * -18px)) scale(1.6); } }
.wald-glut { width: calc(var(--s, 2) * 300px); height: calc(var(--s, 2) * 110px); }
.wald-glut i { background: #ff8a2a; box-shadow: 0 0 calc(var(--s, 2) * 2px) #ff5a1a; animation: wald-glut 7s linear infinite; }
.wald-glut i:nth-child(1) { left: 12%; } .wald-glut i:nth-child(2) { left: 34%; animation-delay: 2.2s; } .wald-glut i:nth-child(3) { left: 58%; animation-delay: 4.1s; }
.wald-glut i:nth-child(4) { left: 76%; animation-delay: 1.1s; } .wald-glut i:nth-child(5) { left: 90%; animation-delay: 5.4s; }
@keyframes wald-glut { 0% { opacity: 0; transform: none; } 10% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--s, 2) * 10px), calc(var(--s, 2) * -100px)); } }
@media (prefers-reduced-motion: reduce) {
  .wald-szenen-gegner, .wald-drache-schlaeft, .wald-zzz, .wald-augen, .wald-nebel, .wald-funken i, .wald-blasen i, .wald-glut i { animation: none; }
  .wald-augen { opacity: .8; }
}
.wald-laden, .wald-ziele, .wald-news, .wald-beste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wald-laden li, .wald-ziele li, .wald-beste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 18px; border-bottom: 1px dotted #c9a466; padding: 2px 0; }
.wald-laden li.eigen { background: #ffe9b0; }
.wald-laden i, .wald-ziele i { font-style: normal; opacity: .7; font-size: 15px; }
.wald-news li { font-size: 17px; }
.wald-news i { font-style: normal; opacity: .6; font-size: 15px; }
.wald-beste { counter-reset: platz; }
.wald-beste li::before { counter-increment: platz; content: counter(platz) "."; width: 2em; opacity: .6; }
.wald-beste li span:first-of-type { flex: 1; }
.wald-drache-bild { display: grid; place-items: center; opacity: .8; }
/* Tauschbörse auf dem Dachboden */
.tausch-filter { width: 100%; margin: 4px 0 4px; }
.tausch-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tausch-karte { background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tausch-karte[hidden] { display: none; }
.tausch-karte.suche { box-shadow: 0 0 0 2px #7a8ac0; background: #f2f4ff; }
.tausch-karte .bild { padding: 0; border: none; background: #241408; cursor: zoom-in; aspect-ratio: 63 / 88; width: 100%; border-radius: 5px; overflow: hidden; }
.tausch-karte .bild img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.tausch-karte .ohne-bild { aspect-ratio: 63 / 88; display: grid; place-items: center; background: #e8dcc0; border-radius: 5px; }
.tausch-karte strong { overflow-wrap: anywhere; line-height: 1.1; }
.tausch-karte .von, .tausch-karte p { font-size: 16px; margin: 0; opacity: .8; overflow-wrap: anywhere; }
.tausch-karte .knoepfe { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tausch-treffer { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.tausch-treffer li { background: #eaf6dc; box-shadow: 0 0 0 2px #6fa04f; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; font-size: 19px; }
.tausch-form { display: grid; gap: 8px; margin-bottom: 12px; }
.tausch-form .zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tausch-form .zeile > input { flex: 1 1 12em; min-width: 0; }
.tausch-form input[name=anzahl] { width: 4.5em; }
.tausch-art { display: flex; gap: 6px; }
.tausch-vorschlaege { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; }
.tausch-vorschlaege[hidden] { display: none; }
.tausch-vorschlaege button { width: 100%; text-align: left; background: #fff8e2; color: inherit; border: none; box-shadow: 0 0 0 1px #c9a466; padding: 8px; font: inherit; font-size: 19px; cursor: pointer; }
.tausch-vorschlaege button:hover, .tausch-vorschlaege button:focus-visible { background: #ffe9b0; }
.tausch-vorschlaege .en { opacity: .65; font-size: 16px; }
.zahlen { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: 21px; }
.zahlen li { background: #fff8e2; padding: 5px 10px; box-shadow: 0 0 0 2px #c9a466; }
.zahlen b { color: var(--rot); font-weight: normal; }
/* ---- Namen unter den Figuren, Rufe (grün), Post ---- */
.namensschild { display: block; font: max(10px, calc(var(--s, 2) * 5px))/1 var(--text); color: #ffe9b0; background: rgba(26, 16, 8, .55); padding: 1px 3px; white-space: nowrap; pointer-events: none; max-width: calc(var(--s, 2) * 56px); overflow: hidden; text-overflow: ellipsis; }
/* wer gerade wirklich da ist: grüner Punkt vor dem Namen, heller Rand */
.namensschild.echt { color: #fff6c8; background: rgba(26, 16, 8, .8); box-shadow: 0 0 0 1px #6fd06f; }
.namensschild.echt::before { content: ''; display: inline-block; width: .5em; height: .5em; margin-right: .25em; background: #6fd06f; vertical-align: .05em; }
.schwebe.winken .spruch { display: inline-flex; align-items: center; gap: 4px; }
/* „Gerade da“: wer online ist und in welchem Raum; antippen = hingehen */
.online { padding: 5px 10px 7px; margin-bottom: 8px; display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
.online .titel { font: 8px/1.6 var(--pixel); color: var(--gold); text-transform: uppercase; }
.online .leer { font-size: 17px; opacity: .8; }
.online-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.online-person { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: none; padding: 3px 8px 3px 4px; font: 17px/1 var(--text);
  color: #ffe9b0; background: #241408; box-shadow: 0 0 0 2px #6fd06f; }
.online-person b { font-weight: normal; }
.online-person span { opacity: .75; }
.online-person.hier { box-shadow: 0 0 0 2px var(--gold); cursor: default; }
.online-person:disabled { cursor: default; }
.online-person:not(:disabled):hover { background: #3a2410; }
.online-bild { display: none; }
/* Gespräch im Raum */
.raumgespraech { margin-bottom: 14px; }
.raumgespraech h3 { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.raumgespraech h3 .wo { font: 17px var(--text); opacity: .7; text-transform: none; }
.gespraechs-liste { list-style: none; margin: 6px 0 0; padding: 0; max-height: 240px; overflow-y: auto; font-size: 18px; overscroll-behavior: contain; }
.gespraechs-liste li { padding: 3px 0; border-bottom: 1px dashed #c9a466; overflow-wrap: anywhere; }
.gespraechs-liste li:last-child { border-bottom: none; }
.gespraechs-liste .zeit { font-size: 15px; opacity: .6; margin-right: 6px; }
.gespraechs-liste b { font-weight: normal; color: var(--rot); }
.gespraechs-liste .privat { color: #2a3a8a; }
.gespraechs-liste .privat b { color: #2a3a8a; }
.gespraechs-liste .spiel { opacity: .8; }
/* Hinterzimmer: Statistik, wer wie lange da war */
.tabelle-rahmen { overflow-x: auto; max-width: 100%; }
.anwesenheit { border-collapse: collapse; width: 100%; font-size: 17px; }
.anwesenheit th, .anwesenheit td { padding: 3px 6px; text-align: right; border-bottom: 1px dashed #c9a466; white-space: nowrap; }
.anwesenheit th:first-child, .anwesenheit td:first-child { text-align: left; }
.anwesenheit th { font: 8px/1.6 var(--pixel); text-transform: uppercase; color: var(--rot); }
.punkt-da { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3f9a4a; margin-right: 5px; }
/* Chatleiste im „Gespräch im Raum“: direkt in die Runde rufen (Wunsch Michael) */
.raum-ruf-form { display: flex; gap: 6px; margin-top: 8px; }
.raum-ruf-form input { flex: 1; min-width: 0; font: 18px var(--text); padding: 5px 8px; }
.raum-ruf-form .knopf { flex: none; }
/* Dachboden: eine Spinne seilt sich ab und klettert wieder hoch */
.faden-spinne { position: relative; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, 0); animation: abseilen 7s ease-in-out infinite; }
.faden-spinne .faden { width: 1px; height: calc(var(--s, 2) * 14px); background: rgba(220, 220, 230, .55); }
.faden-spinne svg { width: calc(var(--s, 2) * 16px); height: auto; }
@keyframes abseilen { 0%, 100% { transform: translate(-50%, -24px); } 45%, 60% { transform: translate(-50%, 22px); } }
@media (prefers-reduced-motion: reduce) { .faden-spinne { animation: none; } }
/* Garten: Glühwürmchen schweben und glimmen */
.gluehwurm { display: block; width: calc(var(--s, 2) * 1.5px); height: calc(var(--s, 2) * 1.5px); border-radius: 50%; background: #e8f58a; box-shadow: 0 0 calc(var(--s, 2) * 3px) #d8f060; animation: gluehen 6s ease-in-out infinite; }
@keyframes gluehen { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 50% { opacity: .9; transform: translate(calc(var(--s, 2) * 6px), calc(var(--s, 2) * -4px)); } 70% { opacity: .2; } 85% { opacity: 1; transform: translate(calc(var(--s, 2) * -3px), calc(var(--s, 2) * -8px)); } }
@media (prefers-reduced-motion: reduce) { .gluehwurm { animation: none; opacity: .7; } }
.schwebe.privat .wer { color: #2a3a8a; }
body.kinder-modus .online-bild { display: flex; flex-direction: column; gap: 6px; position: absolute; left: 6px; bottom: 6px; z-index: 7; }
body.kinder-modus .online-bild .online-person { font-size: 20px; padding: 5px 10px 5px 5px; background: #241408dd; }
.wander-schild.unten { transform: translate(-50%, 0); }
.schwebe.ruf { background: #dcf3c6; border-image: var(--rahmen-blase-gruen) 2 / 6px; }
.schwebe.ruf .wer { color: #2f5a2a; }
.schwebe.ruf::after { box-shadow: -3px 0 0 #dcf3c6, 0 0 0 #dcf3c6, 3px 0 0 #dcf3c6, -3px 3px 0 #2f5a2a, 0 3px 0 #dcf3c6, 3px 3px 0 #2f5a2a, 0 6px 0 #2f5a2a; }
.auflage.unten .schwebe.ruf::after { box-shadow: -3px 0 0 #dcf3c6, 0 0 0 #dcf3c6, 3px 0 0 #dcf3c6, -3px -3px 0 #2f5a2a, 0 -3px 0 #dcf3c6, 3px -3px 0 #2f5a2a, 0 -6px 0 #2f5a2a; }
.schwebe.ruf .spruch { color: #1f3f1c; white-space: normal; text-align: center; max-width: calc(var(--s, 2) * 64px); font-size: max(12px, calc(var(--s, 2) * 6px)); line-height: 1; }
.schwebe .ab { font-size: max(11px, calc(var(--s, 2) * 5.5px)); line-height: 1; color: #8a2a2a; }
.brief { display: block; animation: briefHuepfen 1s steps(2) infinite; }
@keyframes briefHuepfen { 50% { transform: translateY(-3px); } }
.chat-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.chat-liste li { background: #fff8e2; padding: 5px 8px; box-shadow: 0 0 0 2px #c9a466; max-width: 88%; justify-self: start; }
.chat-liste li.eigen { background: #fff1c8; justify-self: end; box-shadow: 0 0 0 2px var(--gold); }
.chat-liste li.neu { box-shadow: 0 0 0 2px var(--gruen); }
.chat-liste li.leer { box-shadow: none; background: none; opacity: .8; }
.chat-liste .wann { display: block; font-size: 15px; opacity: .65; }
.chat-liste p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 20px; }
.chat-form textarea { min-height: 60px; font-size: 20px; }
.post-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.post-eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; width: 100%; text-align: left; background: #fff8e2; border: none; padding: 5px 8px; box-shadow: 0 0 0 2px #c9a466; cursor: pointer; font: inherit; color: inherit; }
.post-eintrag :is(svg, img.ds-kopf) { grid-row: span 2; }
.post-eintrag .wer { font-size: 21px; }
.post-eintrag .eck { font-size: 17px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neu-marke { font: 7px var(--pixel); background: var(--gruen); color: #fff; padding: 3px 4px; vertical-align: middle; }
.ruf-liste { list-style: none; margin: 0 0 10px; padding: 0; font-size: 19px; }
.ruf-liste .wann { opacity: .6; font-size: 15px; }
.ruf-form input[type=text] { font-size: 20px; padding: 6px 8px; }
.ich-menue .wer { font: 9px var(--pixel); color: var(--rot); }
.ab-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ab-zeile input[type=time] { width: auto; }
#fenster {
  position: absolute; top: 3%; bottom: 3%; width: 42%; z-index: 4; display: flex; flex-direction: column;
  border-style: solid; border-width: 8px; border-image: var(--rahmen-pergament) 2 / 8px; background: var(--pergament); background-clip: padding-box;
  box-shadow: 0 10px 0 4px #0007; animation: fensterAuf .25s steps(5) both;
}
#fenster.rechts { right: 2%; } #fenster.links { left: 2%; }
@keyframes fensterAuf { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.fenster-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 8px; font: 10px/1.4 var(--pixel);
  color: #ffe9b0; text-shadow: 2px 2px 0 #241408; background: repeating-linear-gradient(180deg, #8a5530 0 10px, #7a4a24 10px 12px); }
.fenster-kopf .knopf { padding: 6px 9px 8px; }
.fenster-inhalt { overflow-y: auto; padding: 10px 12px; flex: 1; overscroll-behavior: contain; }
.fenster-inhalt .pergament { border: none; background: none; padding: 0; margin: 0 0 16px; }
.fenster-inhalt .gast .kopf-bild { width: 40px; }
.fenster-inhalt .schatz-zeile { grid-template-columns: 1fr 1fr; }
.fenster-inhalt .schatz-zeile > div:last-child { grid-column: 1 / -1; }
.nur-breit { display: none !important; }
@media (min-width: 1100px) { .nur-schmal { display: none !important; } }
@media (min-width: 1100px) {
  main { max-width: 1040px; }
  .nur-breit { display: inline-block !important; }
  /* PC (Wunsch Michael): die Taverne groß am linken Rand, rechts daneben Schild, Räume, Termine, Wirt und alles andere */
  body:not(.kinder-modus) main { max-width: none; display: grid; grid-template-columns: auto minmax(380px, 1fr); column-gap: 18px; align-items: start; padding: 10px 16px 40px; }
  body:not(.kinder-modus) main > * { grid-column: 2; min-width: 0; }
  body:not(.kinder-modus) #raum { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 10px; margin: 0; }
  /* im Nebelwald steht das Fenster gleich unter der Raumleiste, „Gerade da“ und das Gespräch rutschen darunter (Wunsch Michael 03.10.) */
  body.im-nebelwald:not(.kinder-modus) #online, body.im-nebelwald:not(.kinder-modus) #raumgespraech { order: 1; }
  body.im-nebelwald:not(.kinder-modus) main > footer { order: 2; }
  body:not(.kinder-modus) .kopf { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {  *, *::before, *::after { animation: none !important; }
}/* ---- Mehr für zwischendurch (29.09. spät) ---- */
.neu-seit { position: relative; margin-bottom: 14px; }
.neu-seit h3 { margin: 0 0 6px; font: 10px/1.6 var(--pixel); color: var(--rot); }
.neu-seit h3 .von { font: 16px var(--text); color: var(--tinte); opacity: .7; }
.neu-seit ul { margin: 0; padding-left: 18px; font-size: 19px; }
.neu-seit .x { top: 4px; right: 4px; }
.spielwahl-sieger { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; }
.spielwahl-sieger strong { display: block; font: 11px/1.6 var(--pixel); color: var(--rot); }
.spielwahl-sieger .eck { display: block; font-size: 18px; }
.spielwahl span.marke { cursor: default; }
.knopf.wuerfelt svg { animation: wuerfelDreh .35s steps(4) infinite; }
@keyframes wuerfelDreh { to { transform: rotate(360deg); } }
.mitbring-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.mitbring-liste li { position: relative; display: flex; gap: 8px; align-items: center; background: #fff8e2; padding: 3px 30px 3px 8px; box-shadow: 0 0 0 2px #c9a466; }
.mitbring-liste .was { font-size: 20px; flex: 1; }
.mitbring-liste .wer { font-size: 16px; opacity: .7; }
.mitbring-liste .x { top: 50%; right: 4px; transform: translateY(-50%); }
.mitbring-form { display: flex; gap: 6px; }
.mitbring-form input[name=text] { flex: 1; min-width: 0; font: 18px var(--text); padding: 4px 8px; }
.umfrage-auf { margin: 4px 0; }
.umfrage-auf summary { cursor: pointer; font-size: 18px; }
.brett .umfrage-auf summary { color: #fff4d6; }
.umfrage-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0; }
.umfrage-felder input { min-width: 0; font: 17px var(--text); padding: 3px 6px; }
.umfrage { margin: 10px 0; }
.umfrage h3 { margin: 0 0 6px; }
.umfrage-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.umfrage-wahl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; width: 100%; text-align: left;
  background: #fff8e2; border: none; padding: 5px 8px; box-shadow: 0 0 0 2px #c9a466; font: 19px var(--text); color: var(--tinte); }
button.umfrage-wahl { cursor: pointer; }
button.umfrage-wahl:hover { background: #fff1c8; }
button.umfrage-wahl[aria-pressed=true] { box-shadow: 0 0 0 3px var(--rot); }
.umfrage-liste li.vorn .umfrage-wahl { box-shadow: 0 0 0 3px var(--gold); background: #fff1c8; }
.umfrage-wahl .kreuz { width: 18px; height: 18px; border: 2px solid var(--tinte); font: 10px/14px var(--pixel); text-align: center; color: var(--rot); background: #fff; }
.umfrage-wahl .n { font: 10px var(--pixel); color: var(--rot); }
.umfrage-wahl .balken { grid-column: 2 / 4; height: 5px; background: #e8dcb8; }
.umfrage-wahl .balken span { display: block; height: 100%; background: var(--gold-dunkel); }
.umfrage-wahl .wer { grid-column: 2 / 4; font-size: 15px; opacity: .7; }
.zettel .umfrage-marke { background: var(--gold-dunkel); color: #2a1608; }
/* Schatzsuche: das Fundstück funkelt auf dem Boden */
.fund-funkeln { position: relative; display: block; filter: drop-shadow(0 0 calc(var(--s, 2) * 2px) #fff3a0); animation: fundWippen 1.6s ease-in-out infinite; }
.fund-funkeln svg { display: block; }
.fund-funkeln i { position: absolute; width: calc(var(--s, 2) * 1px); height: calc(var(--s, 2) * 1px); background: #fffbe0; box-shadow: 0 0 4px #fff; animation: funkeln 1.4s steps(2) infinite; }
.fund-funkeln i:nth-of-type(1) { left: -30%; top: -20%; }
.fund-funkeln i:nth-of-type(2) { right: -30%; top: 20%; animation-delay: .45s; }
.fund-funkeln i:nth-of-type(3) { left: 40%; bottom: -35%; animation-delay: .9s; }
@keyframes fundWippen { 50% { transform: translateY(calc(var(--s, 2) * -1.5px)); } }
@keyframes funkeln { 0% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fund-funkeln, .fund-funkeln i { animation: none; } }
.fund-liste, .abzeichen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fund-liste li, .abzeichen-liste li { display: flex; gap: 10px; align-items: center; background: #fff8e2; padding: 4px 8px; box-shadow: 0 0 0 2px #c9a466; font-size: 18px; }
.fund-liste b { font-weight: normal; color: var(--rot); }
.abzeichen-liste b { display: block; font: 9px/1.6 var(--pixel); color: var(--rot); }
.abzeichen-liste li.hat { box-shadow: 0 0 0 3px var(--gold); background: #fff1c8; }
.abzeichen-liste li.fehlt { opacity: .55; }
.abzeichen-liste li.fehlt svg { filter: grayscale(1); }
.abzeichen-gaeste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.abzeichen-gaeste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; background: #fff8e2; padding: 4px 10px; box-shadow: 0 0 0 2px #c9a466; }
.abzeichen-gaeste li :is(svg, img.ds-kopf):first-child { grid-row: span 2; }
.abzeichen-gaeste .wer { font-size: 20px; }
.abzeichen-reihe { display: flex; flex-wrap: wrap; gap: 4px; }
/* Irrgarten: Anzeige im Bild */
.irr-hud { position: absolute; left: 1.5%; right: 1.5%; top: 2%; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.irr-hud .irr-uhr { font: max(10px, calc(var(--s, 2) * 5px)) var(--pixel); color: #fff1c8; background: #241408cc; padding: 4px 8px; text-shadow: 2px 2px 0 #000; }
.irr-hud .irr-best { flex: 1; font-size: max(15px, calc(var(--s, 2) * 6px)); color: #e8f0e0; text-shadow: 1px 1px 0 #000; }
.irr-hud .knopf { pointer-events: auto; }
.irr-start, .irr-ende { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  background: #241408e6; color: #fff1c8; padding: 10px 14px; box-shadow: 0 0 0 3px var(--gold-dunkel); max-width: 82%; font-size: max(16px, calc(var(--s, 2) * 6.5px)); pointer-events: none; }
.irr-start span:first-child, .irr-ende strong { font: max(10px, calc(var(--s, 2) * 4.5px))/1.5 var(--pixel); color: var(--gold); }
.irr-ende { top: 50%; pointer-events: auto; }
.irr-ende .knoepfe { justify-content: center; }
.irr-steuer { position: absolute; right: 2%; bottom: 3%; width: calc(var(--s, 2) * 40px); min-width: 108px; aspect-ratio: 1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); pointer-events: none; opacity: .8; }
.irr-steuer button { pointer-events: auto; touch-action: none; border: none; background: #241408cc; color: #fff1c8; font-size: max(14px, calc(var(--s, 2) * 6px)); cursor: pointer; box-shadow: 0 0 0 2px #6b4428; padding: 0; }
.irr-steuer button:active { background: var(--gold-dunkel); color: #241408; }
.irr-steuer [data-irr-dir=hoch] { grid-area: 1 / 2; } .irr-steuer [data-irr-dir=links] { grid-area: 2 / 1; }
.irr-steuer [data-irr-dir=rechts] { grid-area: 2 / 3; } .irr-steuer [data-irr-dir=runter] { grid-area: 3 / 2; }
body.im-irrgarten #leinwand { touch-action: none; }
/* Strategium: Hololith flimmert, Servoschädel schwebt */
.holo-flimmern { display: block; width: calc(var(--s, 2) * 100px); height: calc(var(--s, 2) * 50px); background: radial-gradient(ellipse at center, rgba(90,255,160,.12), transparent 70%); animation: holo 2.6s steps(3) infinite; }
@keyframes holo { 50% { opacity: .5; } 60% { opacity: .9; } }
.servoschaedel { display: block; filter: drop-shadow(0 0 calc(var(--s, 2) * 2px) #ff3a2a); animation: servo 18s ease-in-out infinite; }
@keyframes servo { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(calc(var(--s, 2) * -60px), calc(var(--s, 2) * 6px)); } 50% { transform: translate(calc(var(--s, 2) * -120px), calc(var(--s, 2) * -4px)); } 75% { transform: translate(calc(var(--s, 2) * -50px), calc(var(--s, 2) * -10px)); } }
@media (prefers-reduced-motion: reduce) { .holo-flimmern, .servoschaedel { animation: none; } }
.w500-code { font-size: 15px; padding: 0 5px; background: #e8dcc0; white-space: nowrap; }
.w500-code.ja { background: #bfe0b0; }
.w500 .pnp-bogen-liste li { position: relative; padding-right: 26px; flex-wrap: wrap; }
/* Bretterhütte: Lichterkette am Dach und über dem gemalten Alphabet */
.kreide.winzig { font-size: calc(var(--s, 2) * 2.6px); color: #2a1a0e; text-shadow: none; }
.birne { display: block; width: calc(var(--s, 2) * 2px); height: calc(var(--s, 2) * 2.4px); border-radius: 50% 50% 45% 45%; background: var(--farbe); box-shadow: 0 0 calc(var(--s, 2) * 3px) var(--farbe); animation: birne 3.2s ease-in-out infinite; }
@keyframes birne { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 50% { opacity: .9; } }
.alphabet { display: flex; flex-direction: column; align-items: center; gap: calc(var(--s, 2) * 1px); }
.alphabet .birne { animation: none; transition: opacity .15s, transform .15s; opacity: .85; }
.alphabet .birne.aus { opacity: .12; box-shadow: none; }
.alphabet .birne.hell { opacity: 1; transform: scale(1.8); box-shadow: 0 0 calc(var(--s, 2) * 8px) calc(var(--s, 2) * 2px) var(--farbe); }
.alphabet .gemalt { font: calc(var(--s, 2) * 7px)/1 var(--text); color: #1a1008; }
@media (prefers-reduced-motion: reduce) { .birne { animation: none; } }
/* ---- Pen & Paper in der Hütte: Rundenbuch und Charakterbögen ---- */
.pnp label { display: block; font-size: 17px; margin: 4px 0; }
.pnp input[type=text], .pnp select, .pnp textarea { width: 100%; box-sizing: border-box; font: 18px var(--text); padding: 3px 6px; }
.pnp textarea { resize: vertical; }
.pnp input[readonly], .pnp textarea[readonly] { background: #f4ecd4; border-color: transparent; }
.pnp .eck { display: block; font-size: 16px; opacity: .75; }
.pnp .langtext { white-space: pre-line; }
.pnp-runden, .pnp-bogen-liste, .pnp-kapitel { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.pnp-runde-knopf { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: #fff8e2; border: none; box-shadow: 0 0 0 2px #c9a466; padding: 5px 8px; font: 19px var(--text); color: var(--tinte); cursor: pointer; }
.pnp-runde-knopf:hover { background: #fff1c8; }
.pnp-runde-knopf b, .pnp-bogen-liste b { font: 10px/1.6 var(--pixel); color: var(--rot); }
.pnp-bogen-liste li { display: flex; gap: 8px; align-items: center; background: #fff8e2; padding: 4px 8px; box-shadow: 0 0 0 2px #c9a466; }
.pnp-bogen-liste li > span { flex: 1; min-width: 0; }
.pnp-kapitel li { position: relative; background: #fff8e2; padding: 6px 30px 6px 10px; box-shadow: 0 0 0 2px #c9a466; }
.pnp-kapitel p { margin: 2px 0 0; white-space: pre-line; font-size: 18px; }
.pnp-kapitel .wer { font: 9px/1.6 var(--pixel); color: var(--rot); }
.pnp-kapitel .wann { font: 15px var(--text); color: var(--tinte); opacity: .7; margin-left: 6px; }
.pnp-kapitel .x { top: 4px; right: 4px; }
.pnp-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }
.pnp-raster.sechs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pnp-raster.sechs input { text-align: center; }
.pnp-eigenschaften { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 6px 0 10px; }
.pnp-eigenschaften label { text-align: center; margin: 0; }
.pnp-eigenschaften .ring { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ring); background: #fff; font: 9px/24px var(--pixel); margin-bottom: 2px; }
.pnp-eigenschaften input { text-align: center; padding: 2px; }
.pnp-tabelle-huelle { overflow-x: auto; margin: 4px 0 8px; }
.pnp-tabelle { border-collapse: collapse; width: 100%; font-size: 16px; }
.pnp-tabelle th, .pnp-tabelle td { border: 1px solid #c9a466; padding: 1px 3px; text-align: left; }
.pnp-tabelle th { background: #efe2bf; font-weight: normal; }
.pnp-tabelle td input { min-width: 44px; padding: 1px 3px; font-size: 16px; border: none; background: transparent; }
.pnp-tabelle td input:focus { background: #fff; outline: 2px solid var(--gold); }
.pnp-tabelle .klein { font-size: 14px; white-space: nowrap; }
.pnp-tabelle .fw input { width: 44px; text-align: center; }
.pnp-tabelle tr.gruppe th { background: #d8c49a; font-size: 17px; }
.pnp-tabelle tr.gruppe span { font-size: 14px; opacity: .7; margin-left: 6px; }
.pnp h4 { margin: 10px 0 2px; }
#druck { display: none; }
@media print {
  @page { size: A4; margin: 7mm; }
  body.drucken { background: #fff !important; }
  body.drucken > *:not(#druck) { display: none !important; }
  body.drucken #druck { display: block; }
}
#druck { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #2b1d10; }
.dk-seite { width: 196mm; height: 283mm; box-sizing: border-box; overflow: hidden; position: relative; break-after: page; page-break-after: always;
  border: 2.2mm double #6b4a2a; outline: .6mm solid #6b4a2a; outline-offset: -3.4mm; padding: 6mm 7mm 9mm; background: #f6eedb;
  font: 8.6pt/1.25 Georgia, 'Times New Roman', serif; }
.dk-seite:last-child { break-after: auto; page-break-after: auto; }
.dk-kopf { display: flex; align-items: flex-end; gap: 6mm; margin-bottom: 3mm; }
.dk-kopf h1 { font: 700 19pt/1 Georgia, serif; letter-spacing: .5pt; margin: 0; }
.dk-kopf h2 { font: 700 9pt Georgia, serif; margin: 1mm 0 0 14mm; }
.dk-marke { margin-left: auto; font: italic 8pt Georgia, serif; border: .4mm solid #6b4a2a; padding: 1mm 3mm; border-radius: 2mm; background: #e8dcc0; }
.dk-feld, .dk-kampfwerte > div { text-align: center; }
.dk-feld span, .dk-kampfwerte span { display: block; font: 700 8pt Georgia, serif; }
.dk-feld b, .dk-kampfwerte b { display: block; min-width: 14mm; height: 7mm; line-height: 7mm; border: .4mm solid #2b1d10; background: #fff; font-size: 10pt; }
.dk-kampfwerte { display: flex; gap: 3mm; margin-left: auto; }
.dk-person { display: grid; grid-template-columns: 1fr 42mm 1fr; gap: 4mm; margin-bottom: 3mm; }
.dk-portraet { border: .6mm solid #6b4a2a; background: #e8dcc0; display: flex; align-items: center; justify-content: center; min-height: 48mm; }
.dk-portraet :is(svg, img.ds-kopf) { width: 34mm; height: auto; }
.dk-zeile { display: flex; gap: 2mm; border-bottom: .2mm solid #8a7050; padding: .9mm 0; }
.dk-zeile span { font-weight: 700; white-space: nowrap; }
.dk-zeile b { font-weight: normal; }
.dk-eigenschaften { display: grid; grid-template-columns: repeat(8, 1fr); border: .4mm solid #2b1d10; background: #fff; margin: 2mm 0 3mm; }
.dk-eigenschaften > div { position: relative; text-align: center; border-right: .3mm solid #2b1d10; padding: 4.5mm 0 1mm; }
.dk-eigenschaften > div:last-child { border-right: none; }
.dk-ring { position: absolute; left: 50%; top: -3.5mm; transform: translateX(-50%); width: 7mm; height: 7mm; line-height: 6.2mm; border-radius: 50%; border: .6mm solid var(--ring); background: #fff; font: 700 8pt Georgia, serif; }
.dk-wert { display: block; font-size: 12pt; min-height: 5mm; }
.dk-klein { display: block; font: italic 6.5pt/1.2 Georgia, serif; opacity: .8; }
.dk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-bottom: 2mm; }
.dk-kasten { border: .4mm solid #6b4a2a; border-radius: 1mm; padding: 1.5mm 2.5mm; margin-bottom: 2mm; background: #fbf6ea; }
.dk-kasten h3, .dk-titel { font: 700 9pt Georgia, serif; margin: 0 0 1mm; }
.dk-titel { margin-top: 2mm; }
.dk-text { min-height: 18mm; white-space: normal; background: repeating-linear-gradient(transparent 0 4.6mm, #cdbd9a 4.6mm 4.8mm); line-height: 4.8mm; }
.dk-reihe { display: flex; flex-wrap: wrap; gap: 4mm; margin: 1mm 0; }
.dk-reihe b { display: inline-block; min-width: 12mm; border-bottom: .3mm solid #2b1d10; text-align: center; font-weight: normal; }
.dk-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; margin-bottom: 2mm; }
.dk-tabelle th, .dk-tabelle td { border: .25mm solid #6b4a2a; padding: .5mm 1mm; height: 4.6mm; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 7.6pt; }
.dk-tabelle thead th { background: #e8dcc0; font-weight: 700; font-size: 7pt; white-space: normal; line-height: 1.1; }
.dk-tabelle tbody th { text-align: left; }
.dk-energien thead th:first-child { width: 40%; }
.dk-energien tbody th { white-space: normal; }
.dk-energien td { text-align: center; font-size: 10pt; }
.dk-grau, .dk-talente .dk-probe { background: #e3d7bd; text-align: center; }
.dk-talente td:nth-child(4), .dk-talente td:nth-child(5) { text-align: center; }
.dk-talente th:nth-child(1), .dk-talente td:nth-child(1) { width: 34%; }
.dk-talente th:nth-child(2) { width: 16%; } .dk-talente th:nth-child(3) { width: 9%; } .dk-talente th:nth-child(4) { width: 6%; } .dk-talente th:nth-child(5) { width: 7%; }
.dk-talente .dk-probe { font-size: 6.6pt; }
.dk-talente .dk-fw { font-weight: 700; }
.dk-gruppe th { background: #efe6d0; text-align: left; font-size: 8pt; }
.dk-gruppe span { font-size: 6.6pt; margin-left: 2mm; }
.dk-kampf td { text-align: center; } .dk-kampf td:nth-child(1), .dk-kampf td:nth-child(7) { text-align: left; }
.dk-aus { background: linear-gradient(to top right, transparent calc(50% - .2mm), #6b4a2a, transparent calc(50% + .2mm)), linear-gradient(to bottom right, transparent calc(50% - .2mm), #6b4a2a, transparent calc(50% + .2mm)); }
.dk-qs { width: 60%; margin-left: auto; }
.dk-qs td { text-align: center; }
/* Mausritter-Bogen */
.mr-inventar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.mr-platz { background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; padding: 4px 6px; }
.mr-platz input { width: 100%; box-sizing: border-box; font: 17px var(--text); }
.mr-nutz { font-size: 14px; display: flex; gap: 6px; align-items: center; margin: 2px 0 0; }
.mr-nutz input { width: 40px; text-align: center; }
.mr-person { display: grid; grid-template-columns: 1fr 1fr 34mm; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0 5mm; margin-bottom: 3mm; }
.mr-portraet { grid-row: 1 / span 3; grid-column: 3; min-height: 30mm; }
.mr-portraet :is(svg, img.ds-kopf) { width: 24mm; }
.mr-werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-bottom: 3mm; }
.mr-wert { border: .5mm solid #2b1d10; border-radius: 2mm; background: #fff; text-align: center; padding: 1.5mm; }
.mr-wert > b { font: 700 14pt Georgia, serif; }
.mr-zahlen { display: flex; justify-content: space-around; margin-top: 1mm; font-size: 7pt; }
.mr-zahlen b { display: block; min-width: 12mm; border-bottom: .3mm solid #2b1d10; font-size: 12pt; min-height: 6mm; }
.mr-leiste { display: flex; gap: 4mm; justify-content: center; margin-bottom: 3mm; }
.mr-inventar-druck { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 4mm; margin-bottom: 3mm; }
.mr-karten { display: grid; grid-template-columns: 1fr; gap: 2mm; }
.mr-gepaeck .mr-karten { grid-template-columns: 1fr 1fr; }
.mr-karte { position: relative; border: .4mm solid #2b1d10; background: #fff; height: 21mm; padding: 1mm 1.5mm; box-sizing: border-box; }
.mr-karte b { display: block; font-weight: normal; font-size: 9pt; margin-top: 1mm; }
.mr-punkte { position: absolute; right: 1.5mm; bottom: 1.5mm; display: flex; gap: 1mm; }
.mr-punkte i { width: 3mm; height: 3mm; border-radius: 50%; border: .3mm solid #2b1d10; }
.mr-punkte i.voll { background: #2b1d10; }
.dk-fuss { position: absolute; left: 7mm; right: 7mm; bottom: 3mm; text-align: center; font: italic 6.5pt Georgia, serif; opacity: .7; }
/* ---- Charakterbögen im Vollbild (Wunsch Michael 03.10.): über der ganzen Seite, aufgebaut wie die Originale ---- */
body.bogen-offen { overflow: hidden; }
@media print { body.bogen-offen { overflow: visible; } }
.bogen-voll:focus { outline: none; }
.bogen-voll { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: #241c16; color: #2b1d10;
  font: 16px/1.3 Georgia, "Times New Roman", serif; image-rendering: auto; -webkit-text-size-adjust: 100%; }
.bv-form { max-width: 1280px; margin: 0 auto; padding: 0 12px 48px; }
.bv-kopf { position: sticky; top: 0; z-index: 3; background: #241c16; padding: 8px 2px 0; box-shadow: 0 6px 10px -6px #000; }
.bv-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 8px; }
.bv-wappen svg { display: block; }
.bv-titel { flex: 1 1 14em; min-width: 0; color: #f1dfb4; }
.bv-titel b { display: block; font: 12px/1.5 var(--pixel); color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-titel .eck { display: block; font: 17px/1.1 var(--text); opacity: .8; }
.bv-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; }
.bv-knoepfe .meldung { font: 18px var(--text); color: #f1dfb4; }
.bv-knoepfe .meldung.ok { color: #9be08f; }
.bv-knoepfe .textknopf { color: #f0a090; font: 18px var(--text); }
.bv-reiter { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.bv-reiter button { flex: none; font: 15px Georgia, serif; padding: 7px 14px 6px; border: none; border-radius: 7px 7px 0 0; background: #6b4a2a; color: #f1dfb4; cursor: pointer; }
.bv-reiter button:hover { background: #82593a; }
.bv-reiter button[aria-selected=true] { background: #f3e6c4; color: #2b1d10; font-weight: bold; }
.bv-blatt { background: #f3e6c4 radial-gradient(ellipse at 30% 10%, #faf1d8 0, transparent 60%); border: 4px double #6b4a2a; border-radius: 0 4px 4px 4px;
  padding: 16px 20px 20px; box-shadow: 0 8px 28px #000c; }
.bv-seite { display: none; }
.bv-seite.an { display: block; }
.bv-seite h2 { font: bold 24px/1.1 Georgia, serif; letter-spacing: 2px; text-transform: uppercase; color: #5a2614; margin: 0 0 10px; padding-bottom: 4px; border-bottom: 2px solid #8a6a3a; }
.bv-seite h3 { font: bold 14px Georgia, serif; letter-spacing: 1px; text-transform: uppercase; color: #5a2614; margin: 14px 0 4px; }
.bv-kasten h3 { margin-top: 0; }
.bv-hinweis { font-style: italic; font-size: 14px; color: #5a3a1a; margin: 4px 0 8px; }
.bv-sogehts { background: #fff6dc; border-left: 4px solid var(--gold-dunkel); padding: 6px 10px; font-style: normal; }
.bv-warnung { color: #a0281a; font-weight: bold; font-size: 14px; }
.bv-feld { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0 0 6px; }
.bv-feld > span { font: bold 11px Georgia, serif; text-transform: uppercase; letter-spacing: .5px; color: #6b4520; }
.bogen-voll input, .bogen-voll select, .bogen-voll textarea, .bogen-voll output {
  font: 16px Georgia, serif; color: #1a1008; background: #fffbf0aa; border: none; border-bottom: 1px solid #8a7050; border-radius: 0;
  padding: 4px 5px; width: 100%; min-width: 0; box-sizing: border-box; }
.bogen-voll select { cursor: pointer; padding-right: 0; }
.bogen-voll input, .bogen-voll select, .bogen-voll textarea, .bogen-voll input:focus, .bogen-voll select:focus, .bogen-voll textarea:focus { box-shadow: none; }
.bogen-voll textarea { min-height: 0; }
.bogen-voll textarea { border: 1px solid #b09a70; line-height: 22px; resize: vertical;
  background: #fffbf0aa repeating-linear-gradient(transparent 0 21px, #d8c8a4 21px 22px); background-attachment: local; }
.bogen-voll output { display: block; min-height: 1.75em; background: #e2d1a8; border-bottom-color: transparent; text-align: center; font-weight: bold; }
.bogen-voll input[readonly], .bogen-voll textarea[readonly] { background-color: transparent; }
.bogen-voll input:focus, .bogen-voll select:focus, .bogen-voll textarea:focus { outline: 2px solid var(--gold-dunkel); outline-offset: 0; background-color: #fff; }
.bogen-voll ::placeholder { color: #a08a68; font-style: italic; }
.bogen-voll a { color: #8a2a14; }
.bv-warn, .bogen-voll .bv-warn { background-color: #f4b7a6 !important; color: #6a0f05; }
.bv-weich, .bogen-voll .bv-weich { background-color: #f6d79a !important; }
.bv-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bv-reihe { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-end; }
.bv-reihe > .bv-feld { flex: 1 1 5.5em; }
.bv-reihe > .bv-feld.breit { flex: 1 1 100%; }
.bv-reihe > .bv-feld.schmal { flex: 0 1 12em; }
.bv-kasten { border: 2px solid #6b4a2a; border-radius: 4px; padding: 8px 12px; background: #fbf3dccc; margin: 0 0 12px; }
.bv-huelle { overflow-x: auto; margin: 0 0 12px; }
.bv-tabelle { width: 100%; border-collapse: collapse; background: #fffbf0; font-size: 15px; }
.bv-tabelle th, .bv-tabelle td { border: 1px solid #8a6a3a; padding: 2px 4px; vertical-align: middle; }
.bv-tabelle thead th { background: #e2d1a8; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; line-height: 1.1; }
.bv-tabelle tbody th { text-align: left; font-weight: bold; }
.bv-tabelle td input, .bv-tabelle td select, .bv-tabelle td output { border: none; background: transparent; padding: 3px 2px; min-width: 3.2em; }
.bv-tabelle td output { background: #ece0c0; }
.bv-tabelle td small { display: block; font-size: 12px; color: #7a2a14; font-style: italic; white-space: nowrap; }
.bv-tabelle .bv-mitte { text-align: center; }
.bv-aus-x { background: linear-gradient(to top right, transparent calc(50% - 1px), #8a6a3a, transparent calc(50% + 1px)); }
.bv-gruppe th { background: #d8c49a; font-size: 15px; }
.bv-gruppe span { font-size: 12px; font-weight: normal; margin-left: 6px; }
/* Persönliche Daten */
.bv-person { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: 18px; margin-bottom: 12px; }
.bv-portraet { border: 5px double #6b4a2a; background: #e8dcc0; display: flex; align-items: center; justify-content: center; min-height: 190px; align-self: start; }
.bv-portraet :is(svg, img.ds-kopf) { width: 120px; height: auto; }
.bv-gw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; background: #efe2c2; padding: 4px 6px 0; margin: -2px 0 8px; border-radius: 3px; }
.bv-gw > span { grid-column: 1 / -1; font: italic 12px Georgia, serif; color: #6b4520; }
.bv-gw select, .bv-gw input { text-align: center; }
.bv-eigenschaften { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 2px solid #2b1d10; background: #fffbf0; margin: 26px 0 4px; }
.bv-eigenschaften > label { position: relative; text-align: center; border-right: 1px solid #2b1d10; padding: 22px 4px 4px; }
.bv-eigenschaften > label:last-child { border-right: none; }
.bv-eigenschaften select, .bv-eigenschaften input { text-align: center; text-align-last: center; font-size: 22px; font-weight: bold; border: none; background: transparent; }
.bv-eigenschaften small { display: block; font-size: 11px; font-style: italic; color: #5a3a1a; }
.bv-ring { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); width: 36px; height: 36px; line-height: 30px; border-radius: 50%; border: 3px solid var(--ring);
  background: #fff; font: bold 13px/30px Georgia, serif; text-align: center; font-style: normal; }
.bv-streifen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; }
.bv-streifen > span { display: inline-flex; align-items: center; gap: 4px; }
.bv-streifen .bv-ring { position: static; transform: none; width: 30px; height: 30px; line-height: 24px; font-size: 11px; display: inline-block; }
.bv-streifen b { font-size: 18px; min-width: 1.4em; }
.bv-energien th small { display: block; font: italic 11px Georgia, serif; font-weight: normal; color: #6b4520; }
.bv-energien td { width: 15%; text-align: center; }
.bv-energien td input { text-align: center; }
.bv-leit { display: flex; align-items: center; gap: 4px; font: 12px Georgia, serif; font-weight: normal; margin-top: 2px; }
.bv-leit select, .bv-leit input { width: auto; min-width: 4.5em; font-size: 14px; padding: 1px 2px; }
.bv-zaehler { display: inline-flex; align-items: stretch; max-width: 9em; }
.bv-zaehler button { flex: none; width: 32px; border: 1px solid #8a6a3a; background: #e2d1a8; color: #2b1d10; font: bold 18px/1 Georgia, serif; cursor: pointer; padding: 0; }
.bv-zaehler button:first-child { border-radius: 6px 0 0 6px; } .bv-zaehler button:last-child { border-radius: 0 6px 6px 0; }
.bv-zaehler button:active { background: #c9b07a; }
.bogen-voll .bv-zaehler input { width: 3.4em; text-align: center; border: 1px solid #8a6a3a; border-width: 1px 0; }
.bv-zahl { text-align: center; }
.bv-aktuell { display: flex; align-items: flex-end; gap: 6px; flex: 1 1 11em; }
.bv-aktuell .bv-feld { flex: none; }
.bv-von { padding-bottom: 12px; font-size: 14px; }
.bv-schmerz { font-weight: bold; font-size: 18px; color: #8a1a0a; margin: 4px 0; min-height: 1em; }
/* Talente, Kampf */
.bv-talente td:first-child { white-space: nowrap; }
.bv-probe { font-size: 12px; white-space: nowrap; background: #ece0c0; text-align: center; }
.bv-talente td:nth-child(7) { min-width: 6em; }
.bv-fw select, .bv-fw input { text-align: center; text-align-last: center; font-weight: bold; min-width: 3.4em; }
.bv-r { font-weight: bold; color: #2e6b2a; cursor: help; width: 1.6em; }
.bv-qs { width: 70%; margin-left: auto; }
.bv-qs td { text-align: center; }
.bv-kampfwerte { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.bv-kampfwerte > div { flex: 1 1 5em; text-align: center; border: 2px solid #2b1d10; border-radius: 6px; background: #fffbf0; padding: 4px; }
.bv-kampfwerte output { font-size: 24px; background: transparent; }
.bv-kampfwerte span { display: block; font: bold 14px Georgia, serif; }
.bv-kampfwerte small { display: block; font-size: 10px; font-style: italic; }
.bv-t-nk td:first-child, .bv-t-fk td:first-child, .bv-t-ruest td:first-child { min-width: 8em; }
.bv-zustaende td:last-child { width: 5em; }
.bv-weiter { text-align: right; margin-top: 14px; }
.bv-frei .bv-spalte { grid-column: span 2; }
@media (max-width: 1199px) { .bv-talente-zwei { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .bv-zwei { grid-template-columns: minmax(0, 1fr); }
  .bv-person { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bv-person .bv-portraet { grid-column: 1 / -1; grid-row: 1; min-height: 120px; }
  .bv-portraet :is(svg, img.ds-kopf) { width: 84px; }
  .bv-frei .bv-spalte { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bv-form { padding: 0 6px 40px; }
  .bv-blatt { padding: 12px 10px 16px; border-width: 3px; }
  .bv-person { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bv-eigenschaften { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  .bv-eigenschaften > label:nth-child(4) { border-right: none; }
  .bv-eigenschaften > label:nth-child(n+5) { border-top: 1px solid #2b1d10; }
  .bv-titel b { font-size: 10px; }
  .bv-titel .eck + .eck { display: none; }
  .bv-wappen { display: none; }
  .bv-knoepfe .knopf { font-size: 9px; padding: 8px 10px 10px; }
  .bv-zu span { display: none; }
  .bv-portraet { min-height: 0; padding: 6px; margin-bottom: 8px; }
  .bv-portraet :is(svg, img.ds-kopf), .mr2-portraet :is(svg, img.ds-kopf) { width: 56px; }
  .bv-person .bv-portraet { grid-row: auto; }
  .mr2-werte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; }
  .mr2-wert { grid-template-columns: minmax(0, 1fr); padding: 4px 8px 2px; }
  .mr2-werte .bv-warnung { grid-column: 1 / -1; }
  .bv-knoepfe { width: 100%; justify-content: flex-start; gap: 8px; }
  .bv-knoepfe .meldung { order: 9; width: 100%; }
  .bv-seite h2 { font-size: 20px; }
  .bv-qs { width: 100%; }
}
/* Mausritter: schwarze Tinte auf hellem Papier, Inventar als Karten mit Abnutzungspunkten */
.bv-mausritter .bv-blatt { background: #fdfbf4; border: 3px solid #1a1a1a; border-radius: 14px; }
.bv-mausritter .bv-seite h2, .bv-mausritter .bv-seite h3 { color: #1a1a1a; border-color: #1a1a1a; }
.bv-mausritter .bv-feld > span { color: #333; }
.bv-mausritter input, .bv-mausritter select, .bv-mausritter textarea { border-bottom-color: #555; }
.bv-mausritter output { background: #e8e4da; }
.bv-mausritter .bv-kasten { border: 2px solid #1a1a1a; border-radius: 10px; background: #fff; }
.bv-mausritter .bv-tabelle th, .bv-mausritter .bv-tabelle td { border-color: #555; }
.bv-mausritter .bv-tabelle thead th { background: #e8e4da; }
.bv-mausritter .bv-portraet { border: 3px solid #1a1a1a; border-radius: 10px; background: #f0ece2; }
.mr2-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; border-bottom: 3px solid #1a1a1a; margin-bottom: 10px; padding-bottom: 6px; }
.bv-seite .mr2-kopf h2 { border: none; margin: 0; padding: 0; font-size: 30px; letter-spacing: 4px; }
.mr2-unter { font-style: italic; flex: 1; }
.mr2-oben { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; margin-bottom: 12px; }
.mr2-person { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.mr2-portraet { min-height: 130px; }
.mr2-portraet :is(svg, img.ds-kopf) { width: 90px; }
.mr2-mitte { display: grid; grid-template-columns: 240px minmax(0, 1fr) 170px; gap: 16px; align-items: start; margin-bottom: 14px; }
.mr2-wert { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; border: 3px solid #1a1a1a; border-radius: 12px; background: #fff; padding: 6px 10px 2px; margin-bottom: 10px; }
.mr2-wert-kopf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
.mr2-wert-kopf b { font: bold 24px Georgia, serif; }
.mr2-wert-kopf span { font-style: italic; font-size: 13px; }
.mr2-wert select { text-align: center; text-align-last: center; font-size: 20px; font-weight: bold; }
.mr2-wert .bv-zaehler input { font-size: 18px; font-weight: bold; }
.mr2-inventar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); gap: 12px; }
.mr2-gruppe h3 { text-align: center; margin-top: 0; }
.mr2-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mr2-gepaeck .mr2-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mr2-karte { position: relative; border: 2px solid #1a1a1a; border-radius: 8px; background: #fff; min-height: 104px; padding: 4px 6px 26px; }
.mr2-platz { display: block; font: italic 11px Georgia, serif; color: #555; }
.bogen-voll .mr2-karte textarea { border: none; background: transparent repeating-linear-gradient(transparent 0 19px, #ccc 19px 20px); background-attachment: local;
  font-size: 14px; line-height: 20px; padding: 0 1px; resize: none; height: 60px; }
.bogen-voll .mr2-vorschlag { position: absolute; left: 5px; bottom: 5px; width: 30px; height: 22px; padding: 0; border: 2px solid #1a1a1a; border-radius: 6px;
  background: #fff; font: bold 14px/1 Georgia, serif; text-align: center; text-align-last: center; color: #1a1a1a; appearance: none; -webkit-appearance: none; }
.mr2-punkte { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 5px; }
.bv-punkt { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1a1a1a; background: #fff; padding: 0; display: inline-block; cursor: pointer; }
i.bv-punkt { cursor: default; }
.bv-punkt.voll { background: #1a1a1a; }
.mr2-belegt { grid-column: 1 / -1; text-align: right; margin: 0; }
.mr2-zahl { border: 3px solid #1a1a1a; border-radius: 12px; background: #fff; padding: 6px 10px; margin-bottom: 10px; text-align: center; }
.mr2-zahl output, .mr2-zahl input { font-size: 22px; font-weight: bold; text-align: center; }
.mr2-zahl small { display: block; font-size: 12px; font-style: italic; }
.mr2-zust { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mr2-chip { font: 15px Georgia, serif; border: 2px solid #1a1a1a; border-radius: 14px; padding: 3px 10px; background: #fff; color: #1a1a1a; }
button.mr2-chip { cursor: pointer; }
.mr2-chip.an { background: #1a1a1a; color: #fff; }
.mr2-gefolge td:first-child { min-width: 8em; } .mr2-gefolge td:last-child { min-width: 10em; }
@media (max-width: 1250px) {
  .mr2-mitte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mr2-inventar { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  .mr2-oben { grid-template-columns: minmax(0, 1fr); }
  .mr2-portraet { min-height: 100px; }
  .mr2-mitte { grid-template-columns: minmax(0, 1fr); }
  .mr2-inventar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-row: auto; }
  .mr2-gepaeck { grid-column: 1 / -1; }
  .mr2-gepaeck .mr2-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr2-rechts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
}
@media (max-width: 700px) {
  .irr-start { left: 38%; top: 48%; max-width: 66%; font-size: 14px; padding: 6px 8px; }
  .irr-steuer { min-width: 88px; }
  .irr-hud .irr-best { font-size: 13px; line-height: 1.05; }
}
.irr-tafel .irr-besten h3 { margin-top: 0; }
/* Pen & Paper: Wappen, Einladungen */
.pnp-wappen { display: inline-flex; align-items: center; margin-left: auto; }
.pnp-runde-knopf .pnp-wappen { margin: 0 4px 0 0; }
.pnp-marke { font-style: normal; font-size: 16px; background: var(--gold); color: var(--tinte); padding: 0 5px; margin-left: 4px; }
.pnp-mit { white-space: nowrap; }
.pnp-mit i { opacity: .7; }
.pnp-mit .textknopf { margin-left: 3px; text-decoration: none; font-size: 20px; line-height: 1; }
.pnp-einladen { background: #0001; box-shadow: 0 0 0 2px #c9a466; padding: 8px 10px; margin: 10px 0; }
.pnp-einladen h4 { font: 9px/1.5 var(--pixel); margin: 0 0 6px; text-transform: uppercase; }
.pnp-einladen-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.pnp-einladen-zeile select { width: auto; flex: 1; min-width: 10em; }
/* ---- Wirt: Rahmenbox unten im Bild (Wunsch Michael 30.09.) ---- */
.wirt-box {
  position: absolute; left: calc(var(--s, 2) * 5px); right: calc(var(--s, 2) * 5px); bottom: calc(var(--s, 2) * 5px); z-index: 8;
  display: flex; gap: 10px; align-items: flex-start; padding: 6px 26px 8px 10px; max-height: 46%; overflow: auto;
  border-style: solid; border-width: 8px; border-image: var(--rahmen-pergament) 2 / 8px; background: var(--pergament); background-clip: padding-box;
  color: var(--tinte); font-size: clamp(17px, calc(var(--s, 2) * 7.5px), 22px); line-height: 1.15; cursor: pointer;
  box-shadow: 0 6px 0 #0006; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.wirt-box.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.wirt-box-kopf { flex: none; padding-top: 2px; }
.wirt-box-text { flex: 1; min-width: 0; }
.wirt-box-text p { margin: 0; overflow-wrap: anywhere; }
.wirt-box .sprecher { font: 9px var(--pixel); color: var(--rot); display: block; margin-bottom: 3px; }
.wirt-box .weiter { position: absolute; right: 8px; bottom: 4px; visibility: hidden; }
.wirt-box.fertig .weiter { visibility: visible; }
/* ein offenes Fenster (PC) bleibt frei: die Box nimmt die andere Bildhälfte */
#raum:has(#fenster.rechts:not([hidden])) .wirt-box { right: calc(42% + 14px); }
#raum:has(#fenster.links:not([hidden])) .wirt-box { left: calc(42% + 14px); }
.wirt-wieder {
  position: absolute; left: calc(var(--s, 2) * 5px); bottom: calc(var(--s, 2) * 5px); z-index: 7; cursor: pointer; border: none; padding: 3px 4px 1px;
  background: var(--pergament); box-shadow: 0 0 0 2px var(--tinte), 0 3px 0 2px #0006;
}
.wirt-wieder:hover, .wirt-wieder:focus-visible { background: #fff1c8; outline: none; box-shadow: 0 0 0 2px var(--rot), 0 3px 0 2px #0006; }
.wirt-wieder[hidden] { display: none; }
/* Blick durchs Teleskop (Dachboden): eigene Leinwand über der Szene */
.teleskop { position: absolute; inset: 0; z-index: 20; background: #000; cursor: pointer; }
.teleskop[hidden] { display: none; }
.teleskop canvas { position: absolute; inset: 0; }
.teleskop-hinweis, .teleskop-meldung { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: max(11px, calc(var(--s, 2) * 5px)) var(--pixel); }
.teleskop-hinweis { bottom: calc(var(--s, 2) * 3px); color: #8a7a5a; }
.teleskop-meldung { top: calc(var(--s, 2) * 4px); background: var(--pergament); color: var(--tinte); padding: 4px 8px; box-shadow: 0 0 0 2px var(--tinte); }
.teleskop-meldung[hidden] { display: none; }
/* der Wirt hätte etwas zu sagen (Raumtext beim zweiten Besuch): kleiner pulsierender Punkt */
.wirt-wieder.neu::after { content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; background: var(--gold); box-shadow: 0 0 0 2px var(--tinte); animation: wirt-punkt 1.6s steps(2) infinite; }
@keyframes wirt-punkt { 50% { background: #fff1c8; } }
@media (prefers-reduced-motion: reduce) { .wirt-wieder.neu::after { animation: none; } }
@media (max-width: 700px) { .wirt-box { font-size: 15px; line-height: 1.1; max-height: 38%; border-width: 6px; padding: 3px 22px 5px 8px; } .wirt-box .sprecher { font-size: 7px; } }
@media (max-width: 420px) { .wirt-box-kopf { display: none; } }
body.kinder-modus .wirt-box, body.kinder-modus .wirt-wieder { display: none !important; }
@media (prefers-reduced-motion: reduce) { .wirt-box { transition: none; } }
/* ---- Handy/Tablet: Kopfleiste, Schubladen, Reihenfolge (Wunsch Michael 30.09.) ---- */
.kopfleiste, .schublade, .schublade-schatten { display: none; }
@media (max-width: 1099px) {
  body:not(.kinder-modus) main { display: flex; flex-direction: column; padding-top: 0; }
  body:not(.kinder-modus) .kopfleiste {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 40; margin: 0 -16px 10px; padding: 6px 10px;
    background: repeating-linear-gradient(180deg, #8a5530 0 10px, #7a4a24 10px 12px); box-shadow: 0 3px 0 #241408, 0 6px 10px #0008;
  }
  body:not(.kinder-modus) header.kopf, body:not(.kinder-modus) #orte { display: none; }
  body:not(.kinder-modus) .kopfleiste { order: 0; }
  body:not(.kinder-modus) #raum { order: 1; }
  body:not(.kinder-modus) #aushang { order: 2; margin-top: 12px; }
  body:not(.kinder-modus) #empfehlung { order: 3; }
  body:not(.kinder-modus) #inhalt { order: 4; }
  body:not(.kinder-modus) #online { order: 6; margin-top: 8px; }
  body:not(.kinder-modus) #raumgespraech { order: 7; }
  body:not(.kinder-modus) main > footer { order: 8; }
  .kl-titel { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font: 11px/1.2 var(--pixel); color: var(--gold); text-shadow: 2px 2px 0 #241408; text-align: center; }
  .kl-titel .w20 svg { width: 16px; height: 16px; }
  .kl-knopf {
    position: relative; display: flex; align-items: center; gap: 6px; cursor: pointer; border: none; padding: 6px 8px; min-height: 40px; min-width: 44px;
    background: #5a3418; color: #ffe9b0; font: 8px var(--pixel); box-shadow: inset 0 -3px 0 #3a220f, 0 0 0 2px #0d0805;
  }
  .kl-knopf[aria-expanded=true] { background: var(--rot); }
  .kl-knopf:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }
  .kl-burger { display: flex; flex-direction: column; gap: 3px; }
  .kl-burger i { display: block; width: 16px; height: 3px; background: #ffe9b0; box-shadow: 1px 1px 0 #241408; }
  .kl-ich { padding: 3px 6px; }
  .kopfleiste.ohne-menue .kl-knopf { visibility: hidden; }
  .kl-zahl { display: inline-block; min-width: 18px; padding: 2px 4px; background: var(--rot); color: #fff; font: 8px/1.2 var(--pixel); text-align: center; box-shadow: 0 0 0 2px #0d0805; }
  .kl-ich .kl-zahl { position: absolute; top: -6px; right: -6px; }
  .schublade-schatten { display: block; position: fixed; inset: 0; z-index: 48; background: #0009; }
  .schublade-schatten[hidden], .schublade[hidden] { display: none; }
  .schublade {
    display: block; position: fixed; top: 0; bottom: 0; z-index: 50; width: min(86vw, 340px); overflow-y: auto; padding: 10px 12px 24px;
    background: var(--pergament); color: var(--tinte); box-shadow: 0 0 0 4px #3a220f, 0 0 24px #000c;
  }
  .schublade.links { left: 0; animation: ausLinks .2s ease-out; }
  .schublade.rechts { right: 0; animation: ausRechts .2s ease-out; }
  @keyframes ausLinks { from { transform: translateX(-100%); } }
  @keyframes ausRechts { from { transform: translateX(100%); } }
  .sl-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 10px var(--pixel); }
  .sl-kopf b { flex: 1; }
  .sl-zu { border: none; background: none; font: 28px/1 var(--text); color: var(--tinte); cursor: pointer; padding: 0 6px; min-height: 40px; }
  .schublade h4 { font: 8px/1.5 var(--pixel); text-transform: uppercase; color: var(--rot); margin: 12px 0 4px; }
  .schublade ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .sl-eintrag {
    display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; cursor: pointer; border: none; padding: 7px 8px; min-height: 44px;
    background: #fff8e2; color: var(--tinte); font: 20px/1.1 var(--text); box-shadow: 0 0 0 2px #c9a466;
  }
  .sl-eintrag b { font-weight: normal; display: block; }
  .sl-eintrag .sl-was { display: block; font-size: 16px; opacity: .7; }
  .sl-eintrag.hier { background: var(--gold); box-shadow: 0 0 0 2px var(--tinte); }
  .sl-eintrag:focus-visible { outline: 3px dashed var(--rot); outline-offset: 2px; }
  .sl-bild { flex: none; width: 18px; display: flex; justify-content: center; }
  body.schublade-offen { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .schublade.links, .schublade.rechts { animation: none; } }

/* ===== Die Wildnis, Akt I (Wünsche Michael 03.10.): Anzeige, Gespräche, Kampf, Menü, Weltkarte, Handysteuerung ===== */
body.in-wildnis #leinwand { touch-action: none; }
.wald-balken.asp > span { background: linear-gradient(90deg, #2a5ac8, #5a9aff); }
.wild-hud { position: absolute; left: 1.2%; top: 1.6%; width: 40%; min-width: 150px; display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; padding: .8% 1.4%;
  background: #0c0a08d9; box-shadow: 0 0 0 2px #6b4428; color: #fff1c8; pointer-events: none; font: max(13px, calc(var(--s, 2) * 5.4px))/1 var(--text); }
.wild-hud-ich { display: flex; flex-direction: column; align-items: center; gap: 2px; grid-row: 1 / 3; }
.wild-hud-ich :is(svg, img.ds-kopf) { width: calc(var(--s, 2) * 9px) !important; min-width: 18px; height: auto !important; }
.wild-hud-ich b { font: max(7px, calc(var(--s, 2) * 2.8px))/1 var(--pixel); color: var(--gold); white-space: nowrap; }
.wild-hud-balken { display: grid; gap: 2px; }
.wild-wert { display: grid; grid-template-columns: 2.4em 1fr 2.4em; align-items: center; gap: 4px; }
.wild-wert i { font-style: normal; color: #c8b890; }
.wild-wert b { font-weight: normal; text-align: right; }
.wild-wert .wald-balken { height: max(4px, calc(var(--s, 2) * 2.2px)); }
.wild-hud-zahlen { grid-column: 2; display: flex; gap: 10px; color: var(--gold); }
.wild-hud-knoepfe { position: absolute; right: 1.2%; top: 1.6%; display: flex; gap: 6px; }
.wild-hud-knoepfe button, .wild-tipp { pointer-events: auto; border: none; cursor: pointer; background: #241408e6; color: #fff1c8; box-shadow: 0 0 0 2px #6b4428;
  font: max(8px, calc(var(--s, 2) * 3px))/1 var(--pixel); padding: max(6px, calc(var(--s, 2) * 2.5px)) max(8px, calc(var(--s, 2) * 3.5px)); }
.wild-hud-knoepfe button:hover, .wild-tipp:hover { background: var(--gold-dunkel); color: #241408; }
.wild-auftrag { position: absolute; right: 1.2%; top: calc(1.6% + max(26px, calc(var(--s, 2) * 11px))); max-width: 52%; padding: 3px 8px; background: #0c0a08b8; color: #fff1c8;
  font: max(13px, calc(var(--s, 2) * 5px))/1.05 var(--text); text-align: right; pointer-events: none; }
.wild-auftrag b { color: var(--gold); font-family: var(--pixel); font-size: .7em; }
.wild-tipp { position: absolute; right: 2%; bottom: 3%; }
.wild-tipp kbd { font: inherit; padding: 1px 4px; margin-right: 4px; background: #fff1c8; color: #241408; border-radius: 3px; }
.wild-tipp b { display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; margin-right: 4px; border-radius: 50%; background: var(--rot); color: #fff; text-align: center; }
.wild-meldung { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: max-content; max-width: 78%; padding: 6px 12px; border: none; cursor: pointer; text-align: center;
  pointer-events: auto; background: #241408eb; color: #fff1c8; box-shadow: 0 0 0 3px var(--gold-dunkel); font: max(14px, calc(var(--s, 2) * 6px))/1.08 var(--text); }
.wild-jubel { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); padding: 8px 16px; background: #241408f0; color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 24px #f2c14e88;
  font: max(11px, calc(var(--s, 2) * 5.5px))/1.3 var(--pixel); white-space: nowrap; pointer-events: none; animation: wild-jubel .5s steps(4); }
@keyframes wild-jubel { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
/* Gespräche: Rahmenbox unten im Bild wie in alten Rollenspielen */
.wild-gespraech { position: absolute; left: 2%; right: 2%; bottom: 2.5%; min-height: 24%; padding: 2.2% 2.6% 2%; pointer-events: auto; cursor: pointer;
  background: #f1dfb4f5; color: var(--tinte); box-shadow: 0 0 0 3px #3a220f, inset 0 0 0 2px #c9a466, 4px 4px 0 3px #0006; }
.wild-gespraech p { margin: 0; font: max(15px, calc(var(--s, 2) * 6.6px))/1.05 var(--text); }
.wild-sprecher { position: absolute; left: 3%; top: 0; transform: translateY(-70%); padding: 3px 8px; background: #3a220f; color: var(--gold); font: max(8px, calc(var(--s, 2) * 3px))/1.2 var(--pixel); }
.wild-gespraech .weiter { position: absolute; right: 2%; bottom: 4%; font: max(8px, calc(var(--s, 2) * 2.8px)) var(--pixel); color: #8a5530; animation: wild-blinken 1s steps(2) infinite; }
@keyframes wild-blinken { 50% { opacity: .2; } }
.wild-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.wild-wahl button { border: none; cursor: pointer; background: #e8d4a4; color: var(--tinte); box-shadow: 0 0 0 2px #8a5530; padding: 6px 10px; font: max(8px, calc(var(--s, 2) * 3px))/1.2 var(--pixel); }
.wild-wahl button.gewaehlt, .wild-wahl button:hover { background: var(--rot); color: #fff; box-shadow: 0 0 0 2px #3a220f; }
.wild-wahl button.gewaehlt::before { content: "▶ "; }
/* Kampf: Gegner oben links, eigene Werte rechts, unten Würfelprotokoll und die vier Wahlen */
.wild-gegner-box, .wild-ich-box { position: absolute; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: center; padding: 1% 2%; pointer-events: none;
  background: #f1dfb4f0; color: var(--tinte); box-shadow: 0 0 0 2px #3a220f, 3px 3px 0 2px #0006; font: max(13px, calc(var(--s, 2) * 5.2px))/1 var(--text); }
.wild-gegner-box { left: 3%; top: 4%; width: 44%; }
.wild-ich-box { right: 3%; top: 50%; width: 40%; grid-template-columns: auto 1fr auto; }
.wild-gegner-box b, .wild-ich-box b { font: max(8px, calc(var(--s, 2) * 3.2px))/1.3 var(--pixel); color: var(--rot); }
.wild-ich-box b { color: var(--gruen); grid-column: 1 / 3; }
.wild-st { font-family: var(--pixel); font-size: max(7px, calc(var(--s, 2) * 2.6px)); text-align: right; }
.wild-gegner-box .wald-balken { height: max(5px, calc(var(--s, 2) * 2.6px)); }
.wild-ich-box .wald-balken { height: max(4px, calc(var(--s, 2) * 2.2px)); }
.wild-ich-box i { font-style: normal; color: #7a5a3a; }
.wild-gegner-box small { grid-column: 1 / -1; font-size: .85em; opacity: .75; }
.wild-gegner-box.boese { background: #f4d8c8f2; box-shadow: 0 0 0 2px #8a1a0a, 3px 3px 0 2px #0006; }
.wild-gegner-box.boss { background: #2a0e08f0; color: #ffe0c8; box-shadow: 0 0 0 2px #c84a1a, 3px 3px 0 2px #0006; }
.wild-gegner-box.boss b { color: #ff8a4a; }
.wild-kampf-unten { position: absolute; left: 1.5%; right: 1.5%; bottom: 1.5%; height: 24%; display: grid; grid-template-columns: 1fr minmax(44%, auto); gap: 1.5%; pointer-events: auto;
  background: #f1dfb4f5; box-shadow: 0 0 0 3px #3a220f, inset 0 0 0 2px #c9a466; padding: 1.2% 1.5%; color: var(--tinte); }
.wild-kampf-log { overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.wild-kampf-log p { margin: 0; font: max(13px, calc(var(--s, 2) * 5.2px))/1 var(--text); opacity: .6; }
.wild-kampf-log p.neu { opacity: 1; }
.wild-kampf-menue { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: center; }
.wild-kampf-menue.unter { grid-template-columns: 1fr; overflow-y: auto; }
.wild-kampf-menue button { border: none; cursor: pointer; text-align: left; background: #e8d4a4; color: var(--tinte); box-shadow: 0 0 0 2px #8a5530; padding: 4px 6px;
  font: max(8px, calc(var(--s, 2) * 2.9px))/1.25 var(--pixel); }
.wild-kampf-menue button.haupt { background: var(--rot); color: #fff; }
.wild-kampf-menue button:hover:not(:disabled) { background: var(--gold); color: var(--tinte); }
.wild-kampf-menue button:disabled { opacity: .45; cursor: default; }
.wild-kampf-menue button i { font-style: normal; opacity: .75; float: right; margin-left: 6px; }
.wild-kampf-menue .zurueck { background: #c9b28a; }
.wild-leer { font: max(13px, calc(var(--s, 2) * 5px)) var(--text); opacity: .7; }
.wild-treffer { position: absolute; pointer-events: none; transform: translate(-50%, -50%); }
.wild-treffer.gegner { left: 74%; top: 30%; } .wild-treffer.ich { left: 27%; top: 52%; }
.wild-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  max-width: 80%; padding: 12px 16px; background: #241408ee; color: #fff1c8; box-shadow: 0 0 0 3px var(--gold-dunkel); font-size: max(16px, calc(var(--s, 2) * 6.5px)); pointer-events: auto; }
.wild-box strong { font: max(10px, calc(var(--s, 2) * 4.5px))/1.5 var(--pixel); color: var(--gold); }
.wild-box.ohnmacht { background: #1a0606f0; box-shadow: 0 0 0 3px #8a1a0a; }
.wild-steuer { display: none; left: auto; right: 2%; bottom: 14%; opacity: .7; }
.wild-steuer [data-wild-dir=hoch] { grid-area: 1 / 2; } .wild-steuer [data-wild-dir=links] { grid-area: 2 / 1; }
.wild-steuer [data-wild-dir=rechts] { grid-area: 2 / 3; } .wild-steuer [data-wild-dir=runter] { grid-area: 3 / 2; }
@media (pointer: coarse) { body:not(.spiel-modus) .wild-steuer { display: grid; } }

/* Das Menü des Abenteuers (am PC rechts in der Spalte, am Handy über dem Spiel) */
.spiel-kopf { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.spiel-reiter { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.nebelwald.spiel-spalte { display: block; min-width: 0; }
.dinge { grid-template-columns: minmax(0, 1fr); }
.ding-text { overflow-wrap: anywhere; }
.spiel-reiter button { flex: none; font: 8px/1.4 var(--pixel); padding: 7px 9px; border: none; cursor: pointer; background: #3a2a1a; color: #e8dcc0; box-shadow: 0 0 0 1px #6b4428; }
.spiel-reiter button[aria-selected="true"] { background: #6b4428; color: #ffe9a0; }
.spiel-reiter button i { font-style: normal; color: var(--gold); }
.spiel-zu { flex: none; width: 40px; height: 36px; border: none; cursor: pointer; background: var(--rot); color: #fff; font: 14px var(--pixel); box-shadow: 0 0 0 2px var(--umriss); }
.spiel-meldung { margin: 0 0 8px; padding: 6px 8px; background: #241408; color: #fff1c8; font-size: 18px; line-height: 1.1; }
.spiel-inhalt h4 { margin: 12px 0 6px; font: 9px/1.4 var(--pixel); color: var(--tinte); }
.spiel-inhalt h4 .eck { font: 15px var(--text); opacity: .7; margin-left: 6px; }
.spiel-erzaehl { margin: 0 0 6px; font-size: 19px; font-style: italic; line-height: 1.05; }
.spiel-klein { margin: 4px 0; font-size: 16px; line-height: 1.05; opacity: .85; }
.spiel-hinweis { margin: 6px 0; padding: 5px 8px; background: #fff3c8; box-shadow: 0 0 0 2px var(--gold-dunkel); font-size: 17px; line-height: 1.05; }
.spiel-werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.spiel-werte span { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; }
.spiel-werte i { font: 7px/1.4 var(--pixel); font-style: normal; color: #8a5530; }
.spiel-werte b { font: 18px/1 var(--text); font-weight: normal; white-space: nowrap; }
.dinge { display: grid; gap: 6px; }
.ding { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466, inset 4px 0 0 #a8a8a8; }
.ding.sel1 { box-shadow: 0 0 0 2px #c9a466, inset 4px 0 0 #5a9aff; } .ding.sel2 { box-shadow: 0 0 0 2px #c9a466, inset 4px 0 0 #e8b02a; background: #fff6d8; }
.ding.sel3 { box-shadow: 0 0 0 2px #d8843a, inset 4px 0 0 #d8843a; background: #fff0dc; }
.ding.leer { opacity: .6; }
.ding-bild { display: grid; place-items: center; width: 38px; height: 38px; background: #2a2018; box-shadow: 0 0 0 2px #6b4428; }
.ding-bild.leer { opacity: .35; }
.ding-bild svg { image-rendering: pixelated; }
.ding-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.ding-text b { font: 9px/1.4 var(--pixel); color: var(--tinte); }
.ding.sel1 .ding-text b { color: #2a5ab8; } .ding.sel2 .ding-text b { color: #9a6a0a; } .ding.sel3 .ding-text b { color: #b85a1a; }
.ding-text i { font-size: 15px; font-style: normal; opacity: .7; }
.ding-werte { font-size: 17px; }
.ding-vergleich { font-size: 16px; }
.ding-vergleich .besser { color: #2a7a2a; } .ding-vergleich .schlechter { color: #b8412c; }
.ding-warn { font-size: 16px; color: #b8412c; }
.ding-knoepfe { display: flex; flex-direction: column; gap: 4px; }
.rucksack { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin-bottom: 8px; }
.rucksack-feld { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: none; background: #2a2018; box-shadow: inset 0 0 0 2px #6b4428; cursor: pointer; }
.rucksack-feld.sel1 { box-shadow: inset 0 0 0 2px #5a9aff; } .rucksack-feld.sel2 { box-shadow: inset 0 0 0 2px #f2c14e; } .rucksack-feld.sel3 { box-shadow: inset 0 0 0 2px #d8843a; }
.rucksack-feld.gewaehlt { outline: 3px solid var(--rot); outline-offset: -1px; background: #4a3420; }
.rucksack-feld.leer { cursor: default; opacity: .4; }
.rucksack-feld svg { image-rendering: pixelated; }
.spiel-guertel { display: grid; gap: 4px; font-size: 18px; }
.spiel-guertel > span { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 6px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; flex-wrap: wrap; }
.spiel-zauber, .spiel-auftraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spiel-zauber li, .spiel-auftraege li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 5px 8px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; font-size: 17px; line-height: 1.05; }
.spiel-zauber li b, .spiel-auftraege li b { font: 9px/1.4 var(--pixel); }
.spiel-zauber li span, .spiel-auftraege li span, .spiel-auftraege li i { grid-column: 1; }
.spiel-zauber li .knopf { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.spiel-auftraege li.bereit { box-shadow: 0 0 0 2px var(--gold-dunkel); background: #fff3c8; }
.spiel-auftraege li.fertig { opacity: .6; }
.spiel-auftraege li i { font-style: normal; color: #8a5530; }
.spiel-laden .dinge { margin-bottom: 6px; }
.spiel-fuss { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; padding-top: 8px; border-top: 2px dashed #c9a466; }
.spiel-fuss .spiel-klein { flex-basis: 100%; }
@media (pointer: coarse) { .spiel-fuss .spiel-klein { display: none; } }
/* Weltkarte */
.gebiet-karte-rahmen { display: grid; gap: 4px; margin-bottom: 10px; }
.gebiet-karte { width: 100%; max-width: 420px; height: auto; justify-self: center; image-rendering: pixelated; background: #14100c; box-shadow: 0 0 0 2px #5a3a1a, 0 0 0 4px #c9a466; }
.gk { display: inline-block; width: 8px; height: 8px; vertical-align: middle; } .gk-wp { background: #7ae0ff; } .gk-sch { background: #c89aff; } .gk-tr { background: #e8c23a; } .gk-lg { background: #ff6a4a; }
.welt-karte { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; padding: 6px; background: #e8d4a4; box-shadow: inset 0 0 0 2px #c9a466; }
.welt-weg { position: absolute; z-index: 0; border: 0 dashed #8a5530; }
.w-hain-lager { left: 50%; top: 50%; height: 33.3%; border-left-width: 4px; } .w-hain-ruinen { left: 50%; top: 16.7%; height: 33.3%; border-left-width: 4px; }
.w-hain-dorf { top: 50%; left: 16.7%; width: 33.3%; border-top-width: 4px; } .w-hain-moor { top: 50%; left: 50%; width: 33.3%; border-top-width: 4px; }
.w-dorf-friedhof { left: 16.7%; top: 16.7%; height: 33.3%; border-left-width: 4px; } .w-ruinen-glut { top: 16.7%; left: 50%; width: 33.3%; border-top-width: 4px; }
.w-moor-glut { left: 83.3%; top: 16.7%; height: 33.3%; border-left-width: 4px; }
.welt-zelle { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 4px; background: #fff8e2; box-shadow: 0 0 0 2px #8a5530; font-size: 15px; line-height: 1; }
.welt-zelle.fremd { background: #d8c8a0; color: #6a5a40; }
.welt-zelle.hier { box-shadow: 0 0 0 3px var(--rot); }
.welt-bild { position: relative; display: block; aspect-ratio: 4 / 3; background: #2a2018; overflow: hidden; }
.welt-bild img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.welt-nebel { display: grid; place-items: center; height: 100%; color: #8a7a5a; font: 14px var(--pixel); background: repeating-linear-gradient(45deg, #3a3026 0 6px, #2e261e 6px 12px); }
.welt-feuer { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 60%, #ffd84a 0 8%, #ff7a1a 14%, #5a2a10 34%, #1e3a22 36%, #14281a 100%); }
.welt-zelle b { font: 7px/1.4 var(--pixel); margin-top: 3px; }
.welt-zelle i { font-style: normal; opacity: .75; }
.welt-unter { align-self: flex-start; padding: 1px 4px; background: #3a2a1a; color: #fff1c8; font-size: 13px; }
.welt-unter.fremd { opacity: .55; } .welt-unter.hier { background: var(--rot); }
.welt-ich { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ff3a2a; box-shadow: 0 0 0 2px #fff; animation: wild-blinken 1s steps(2) infinite; }
.welt-zeichen { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--gold); color: var(--tinte); font: 11px var(--pixel); box-shadow: 0 0 0 2px var(--tinte); }
.welt-du { position: absolute; top: -8px; left: -6px; padding: 2px 4px; background: var(--rot); color: #fff; font: 7px/1.3 var(--pixel); }

/* Handy: die Wildnis als Handheld – Bild oben, Steuerung darunter (quer: links und rechts daneben) */
.spiel-pad, .spiel-menue { display: none; }
body.spiel-modus { overflow: hidden; overscroll-behavior: none; background: #14100c; }
body.spiel-modus main > :not(#raum) { display: none !important; }
body.spiel-modus #raum { position: fixed; z-index: 30; top: 0; left: 50%; transform: translateX(-50%); margin: 0; border: 0; box-shadow: 0 4px 0 #3a220f, 0 8px 18px #000a; }
body.spiel-modus #raum :is(#wirtBlase, #wirtWieder, #vollbild, #onlineBild, #fenster) { display: none !important; }
body.spiel-modus .wild-hud-knoepfe { display: none; }
body.spiel-modus .wild-auftrag { top: 1.6%; }
body.spiel-modus .spiel-pad { display: grid; position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; top: calc(var(--spiel-h, 280px) + 4px);
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto; grid-template-areas: "status status" "text text" "stick ab" "mitte mitte"; align-items: center; gap: 8px;
  padding: 8px 10px max(14px, env(safe-area-inset-bottom)); touch-action: none; user-select: none; -webkit-user-select: none; background: linear-gradient(#2a2018, #1a140e); }
.pad-status { grid-area: status; display: grid; grid-template-columns: auto 1fr 1fr; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; padding: 6px 8px;
  background: #0c0a08; box-shadow: inset 0 0 0 2px #4a3a2a; color: #fff1c8; font: 16px/1 var(--text); }
.ps-st { grid-row: 1 / 3; font: 10px/1.3 var(--pixel); color: var(--gold); white-space: nowrap; }
.ps-wert { display: grid; grid-template-columns: 2.3em 1fr auto; gap: 5px; align-items: center; min-width: 0; }
.ps-wert i { font-style: normal; color: #c8b890; }
.ps-wert b { font-weight: normal; white-space: nowrap; }
.ps-wert .wald-balken { height: 7px; }
.ps-gold { color: var(--gold); white-space: nowrap; }
.pad-status .pad-trank { justify-self: end; display: flex; align-items: center; gap: 4px; border: none; cursor: pointer; padding: 3px 8px; background: #6a1a12; color: #ffd8c8;
  font: 10px var(--pixel); box-shadow: 0 0 0 2px #1a0e06, 0 2px 0 #0008; border-radius: 6px; }
.pad-status .pad-trank:disabled { opacity: .45; }
.pad-status .pad-trank .sym svg { width: 18px; }
.pad-text { grid-area: text; min-height: 3.3em; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 10px; cursor: pointer;
  background: #f1dfb4; color: var(--tinte); box-shadow: inset 0 0 0 2px #c9a466, 0 0 0 2px #3a220f; font: 18px/1.05 var(--text); }
.pad-text .pt-wer { font: 9px/1.3 var(--pixel); color: var(--rot); }
.pad-text .pt-weiter { font-style: normal; font-size: 14px; color: #8a5530; align-self: flex-end; }
.pad-text b:not(.pt-wer) { color: var(--rot); }
.pad-stick { grid-area: stick; position: relative; justify-self: start; margin-left: 2px; width: min(40vw, 150px); aspect-ratio: 1; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle, #3a2e24 0 55%, #2a2018 56%); box-shadow: inset 0 0 0 3px #6b4428, 0 4px 0 #0008; }
.pad-ring { position: absolute; inset: 22%; border-radius: 50%; border: 2px dashed #6b442888; }
.pad-knauf { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, #c8a070, #6b4428 70%); box-shadow: 0 3px 0 #2a1a0c, 0 0 0 2px #1a0e06; transition: transform .05s; }
.pad-mitte { grid-area: mitte; display: flex; justify-content: center; gap: 22px; padding-right: 30px; }
.pad-mitte button { border: none; cursor: pointer; padding: 9px 16px; border-radius: 14px; background: #4a3a2a; color: #f1dfb4; font: 9px var(--pixel); box-shadow: 0 3px 0 #0008, 0 0 0 2px #1a0e06; }
.pad-mitte button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0008, 0 0 0 2px #1a0e06; }
.pad-ab { grid-area: ab; position: relative; justify-self: end; margin-right: 2px; width: 150px; height: 130px; max-width: 100%; }
.pad-ab button { position: absolute; display: grid; place-items: center; border: none; border-radius: 50%; cursor: pointer; color: #fff; font: 16px var(--pixel); touch-action: none;
  box-shadow: 0 5px 0 #0009, 0 0 0 3px #1a0e06; }
.pad-a { right: 2px; top: 6px; width: 78px; height: 78px; background: radial-gradient(circle at 40% 35%, #e85a3a, #9a2a1a); }
.pad-b { left: 2px; bottom: 14px; width: 58px; height: 58px; background: radial-gradient(circle at 40% 35%, #8a7a6a, #4a3e32); font-size: 13px; }
.pad-a small { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font: 8px var(--pixel); color: #f2c14e; }
.pad-ab button.gedrueckt { transform: translateY(3px); box-shadow: 0 2px 0 #0009, 0 0 0 3px #1a0e06; filter: brightness(1.2); }
/* eigener Knopf zum Auf- und Absitzen (Rückmeldung Michael 07.10., 41-pferd.js) – über dem B */
.pad-ab .pad-pferd { left: 6px; top: 0; width: 50px; height: 50px; gap: 1px; align-content: center; background: radial-gradient(circle at 40% 35%, #d8b47a, #8a5a2a); }
.pad-ab .pad-pferd small { font: 7px var(--pixel); color: #2a1a0c; line-height: 1; }
.pad-ab .pad-pferd.reitet { background: radial-gradient(circle at 40% 35%, #ffe08a, #c8902a); }
.pad-ab .pad-pferd.blass { filter: grayscale(.8) brightness(.7); }
.pad-ab .pad-pferd .sym { display: block; line-height: 0; }
.pad-ab button[hidden] { display: none; }
:is(body.spiel-modus, body.kinder-modus.in-wildnis) .spiel-menue:not([hidden]) { display: block; position: fixed; z-index: 60; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 24px; border-radius: 0; }
:is(body.spiel-modus, body.kinder-modus.in-wildnis) .spiel-menue .spiel-kopf { position: sticky; top: -10px; z-index: 2; margin: -10px -12px 8px; padding: 10px 12px 8px; background: var(--pergament); box-shadow: 0 2px 0 #c9a466; }
@media (orientation: landscape) {
  body.spiel-modus #raum { top: 50%; transform: translate(-50%, -50%); }
  body.spiel-modus .spiel-pad { top: 0; background: none; grid-template-columns: 150px 1fr 150px; grid-template-rows: auto 1fr auto; grid-template-areas: "mitte . info" "stick . ab" ". . ."; padding: 8px; pointer-events: none; }
  body.spiel-modus .spiel-pad > * { pointer-events: auto; }
  body.spiel-modus .pad-info { display: none; }
  body.spiel-modus .pad-stick { width: 130px; }
  body.spiel-modus .pad-ab { width: 140px; }
  body.spiel-modus .pad-mitte { flex-direction: column; gap: 10px; align-items: flex-start; }
  body.spiel-modus .pad-ab .pad-pferd { left: 0; width: 46px; height: 46px; }   /* quer ist .pad-ab schmaler: Abstand zum A */
}

/* Im Spiel braucht es weder das Wirtshausschild noch die Raumleiste (Wunsch Michael 03.10.), auch nicht den Wirt-Knopf im Bild */
body.in-wildnis .kopf, body.in-wildnis #orte, body.in-wildnis #wirtWieder { display: none !important; }

/* Entwickler-Feedback (Wunsch Michael 03.10.): rotes Dreieck in der Ecke unten rechts, Fenster mit Vorschau, Liste im Hinterzimmer */
.feedback-dreieck { position: fixed; z-index: 85; right: 0; bottom: 0; width: 36px; height: 36px; padding: 0; border: none; cursor: pointer;
  background: linear-gradient(135deg, transparent 50%, #c8301e 50%); filter: drop-shadow(-1px -1px 0 #3a0a04); }
.feedback-dreieck[hidden] { display: none; }
.feedback-dreieck { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
body.bogen-offen .feedback-dreieck, body.schublade-offen .feedback-dreieck, body:has(#rolle .rolle-huelle) .feedback-dreieck { right: 18px; }
.feedback-dreieck span { position: absolute; right: 6px; bottom: 4px; color: #fff; font: 10px var(--pixel); }
.feedback-dreieck:hover, .feedback-dreieck:focus-visible { background: linear-gradient(135deg, transparent 50%, #e8452e 50%); outline: none; }
.feedback-dreieck.arbeitet { animation: feedback-blinken .5s steps(2) infinite; }
@keyframes feedback-blinken { 50% { opacity: .35; } }
.feedback-dialog { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 12px; }
.feedback-dialog[hidden] { display: none; }
.feedback-schatten { position: absolute; inset: 0; background: #000a; }
.feedback-fenster { position: relative; width: min(540px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box;
  display: grid; gap: 8px; padding: 14px 16px; }
.feedback-fenster h2 { margin: 0; font: 11px/1.4 var(--pixel); color: var(--rot); }
.feedback-erklaerung { margin: 0; font-size: 17px; line-height: 1.1; }
.feedback-vorschau { margin: 0; display: grid; gap: 3px; }
.feedback-vorschau img { display: block; width: 100%; max-height: 30vh; object-fit: contain; background: #241408; box-shadow: 0 0 0 2px #8a5530; }
.feedback-vorschau figcaption, .feedback-haken { margin: 0; font-size: 15px; opacity: .8; }
.feedback-frage { font: 9px/1.4 var(--pixel); }
.feedback-fenster textarea { width: 100%; box-sizing: border-box; font: 19px/1.1 var(--text); resize: vertical; min-height: 4.6em; }
.feedback-status { margin: 0; min-height: 1em; font-size: 17px; color: var(--gruen); }
.feedback-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.feedback-eintrag { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: start; padding: 6px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; font-size: 17px; line-height: 1.1; }
.feedback-eintrag.erledigt { opacity: .65; }
.feedback-eintrag p { margin: 2px 0; }
.feedback-eintrag small { font-size: 14px; opacity: .8; }
.feedback-eintrag pre { white-space: pre-wrap; font-size: 13px; margin: 2px 0; }
.feedback-fehler { color: var(--rot); }
.feedback-mini { padding: 0; border: none; background: #241408; cursor: zoom-in; box-shadow: 0 0 0 2px #8a5530; }
.feedback-mini img { display: block; width: 96px; height: 72px; object-fit: cover; }
.feedback-mini.leer { display: grid; place-items: center; height: 72px; color: #c9a466; font-size: 14px; }
.feedback-eintrag .knoepfe { flex-direction: column; }
@media (max-width: 600px) { .feedback-eintrag { grid-template-columns: 72px 1fr; } .feedback-eintrag .knoepfe { grid-column: 1 / -1; flex-direction: row; } .feedback-mini img { width: 72px; height: 54px; } }
@media print { .feedback-dreieck, .feedback-dialog { display: none !important; } }

/* Kampf mit Würfeln und mehreren Gegnern, große Knöpfe mit Bildzeichen (Wünsche Michael 03.10.) */
.sym { display: inline-grid; place-items: center; flex: none; }
.sym svg { display: block; image-rendering: pixelated; width: max(22px, calc(var(--s, 2) * 9px)); height: auto; }
.wk { display: flex; align-items: center; gap: max(6px, calc(var(--s, 2) * 2px)); border: none; cursor: pointer; text-align: left; pointer-events: auto;
  background: #e8d4a4; color: var(--tinte); box-shadow: 0 0 0 2px #8a5530, 0 3px 0 2px #5a3818; padding: max(6px, calc(var(--s, 2) * 2px)) max(8px, calc(var(--s, 2) * 3px));
  font: max(9px, calc(var(--s, 2) * 3.4px))/1.25 var(--pixel); min-height: 44px; }
.wk i { font-style: normal; opacity: .75; margin-left: 4px; }
.wk.haupt { background: #c8452e; color: #fff; box-shadow: 0 0 0 2px #5a1a0a, 0 3px 0 2px #3a0e04; }
.wk:hover:not(:disabled), .wk.gewaehlt { background: var(--gold); color: var(--tinte); }
.wk:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 2px #8a5530, 0 1px 0 2px #5a3818; }
.wk:disabled { opacity: .45; cursor: default; }
.wk.zurueck { background: #c9b28a; }
.wild-gegner-liste { position: absolute; right: 2%; top: 2.5%; width: 46%; display: grid; gap: 4px; pointer-events: none; }
.wild-gegner-liste .wild-gegner-box { position: static; width: auto; text-align: left; border: none; font: max(13px, calc(var(--s, 2) * 5.2px))/1 var(--text); }
.wild-gegner-liste.mehrere .wild-gegner-box { pointer-events: auto; cursor: pointer; padding: .8% 2%; }
.wild-gegner-box.ziel { box-shadow: 0 0 0 3px var(--gold), 3px 3px 0 2px #0006; }
.wild-gegner-box.besiegt { opacity: .4; }
.wild-lp { text-align: right; }
.wild-kampf-unten { height: 27%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; }
.wild-ich { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-content: center; min-width: 0; font: max(13px, calc(var(--s, 2) * 5.2px))/1 var(--text); }
.wild-ich b { font: max(8px, calc(var(--s, 2) * 3px))/1.3 var(--pixel); color: var(--gruen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wild-ich .wild-st { text-align: right; }
.wild-zeile { grid-column: 1 / -1; display: grid; grid-template-columns: 2.6em 1fr auto; gap: 6px; align-items: center; }
.wild-zeile i { font-style: normal; color: #7a5a3a; }
.wild-zeile .wald-balken { height: max(5px, calc(var(--s, 2) * 2.4px)); }
.wild-kampf-zeile { grid-column: 1 / -1; margin: 2px 0 0; font-size: .95em; line-height: 1; opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wild-kampf-menue { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: center; }
.wild-kampf-menue.drei { grid-template-columns: 1fr 1fr 1fr; }
.wild-kampf-menue .wk { min-height: 0; font-size: max(8px, calc(var(--s, 2) * 3px)); padding: max(4px, calc(var(--s, 2) * 1.2px)) max(6px, calc(var(--s, 2) * 2px)); }
.wild-kampf-menue .wk .sym svg { width: max(16px, calc(var(--s, 2) * 7px)); }
.wild-spulen { position: absolute; inset: 0 0 30% 0; background: none; border: none; pointer-events: auto; cursor: pointer; }
.wild-wahl .wk { font-size: max(8px, calc(var(--s, 2) * 3px)); min-height: 0; }
@media (pointer: coarse) { .wild-kampf-menue .wk, .wild-wahl .wk { min-height: 44px; } }
/* Handy: Kampf- und Gesprächsknöpfe groß unten in der Steuerung */
.pad-aktionen { display: none; }
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-aktionen, body.spiel-modus .spiel-pad[data-modus=dialog] .pad-aktionen { display: grid; grid-row: 2; grid-column: 1 / -1; gap: 10px; align-content: center; }
body.spiel-modus .spiel-pad:is([data-modus=kampf], [data-modus=dialog]) :is(.pad-stick, .pad-ab) { display: none; }
.pad-kampf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pad-kampf .wk { min-height: 72px; font-size: 11px; padding: 10px 12px; }
.pad-kampf .wk .sym svg { width: 40px; }
.pad-kampf .wk:only-child { grid-column: 1 / -1; justify-content: center; }
.pad-ziel { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #f1dfb4; font: 17px var(--text); }
.pad-ziel button { width: 56px; height: 44px; border: none; border-radius: 10px; background: #4a3a2a; color: #f2c14e; font: 16px var(--pixel); box-shadow: 0 3px 0 #0008, 0 0 0 2px #1a0e06; }
body.spiel-modus #auflagen :is(.wild-kampf-menue, .wild-wahl) { display: none; }
body.spiel-modus .wild-kampf-unten { grid-template-columns: 1fr; height: 22%; }
@media (orientation: landscape) {
  body.spiel-modus .spiel-pad[data-modus] .pad-aktionen { grid-row: 2; grid-column: 3; }
  body.spiel-modus .pad-kampf { grid-template-columns: 1fr; gap: 6px; }
  body.spiel-modus .pad-kampf .wk { min-height: 48px; font-size: 9px; }
}
/* Handy: Anzeigen und Texte stehen unten in der Steuerung, das Spielbild bleibt frei (Wunsch Michael 03.10.) */
body.spiel-modus #auflagen :is(.wild-hud, .wild-hud-knoepfe, .wild-auftrag, .wild-meldung, .wild-tipp, .wild-kampf-unten) { display: none !important; }
body.spiel-modus .wild-gegner-liste { width: 44%; top: 2%; }
body.spiel-modus .wild-gegner-liste .wild-gegner-box small { display: none; }
body.spiel-modus .spiel-pad:is([data-modus=kampf], [data-modus=dialog]) .pad-aktionen { grid-row: 3; }
@media (orientation: landscape) {
  body.spiel-modus .spiel-pad { grid-template-columns: 170px 1fr 170px; grid-template-rows: auto auto 1fr auto; grid-template-areas: "status . mitte" "text . ." "stick . ab" ". . ."; }
  body.spiel-modus .pad-status { grid-template-columns: auto 1fr; font-size: 14px; padding: 4px 6px; }
  body.spiel-modus .pad-status .ps-wert:nth-of-type(3), body.spiel-modus .ps-gold { display: none; }
  body.spiel-modus .pad-text { font-size: 15px; min-height: 0; max-height: 34vh; overflow: hidden; }
}

/* Spielzeit der Kinder im Nebelwald (Wunsch Michael 03.10.) */
.spielzeit-anzeige { position: fixed; z-index: 45; top: 6px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: #241408e6; color: #fff1c8; box-shadow: 0 0 0 2px #6b4428; border-radius: 8px; font: 12px var(--pixel); pointer-events: none; }
.spielzeit-anzeige[hidden] { display: none; }
.spielzeit-anzeige.knapp { background: #7a1a0ae6; animation: feedback-blinken 1s steps(2) infinite; }
.spielzeit-hinweis { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; background: #000a; }
.spielzeit-hinweis[hidden] { display: none; }
.spielzeit-hinweis .pergament { max-width: 420px; display: grid; justify-items: center; gap: 12px; padding: 18px; text-align: center; font-size: 22px; line-height: 1.1; }
.spielzeit-hinweis p { margin: 0; }
.spielzeit-liste { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.spielzeit-zeile { display: grid; gap: 4px; padding: 6px 8px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; font-size: 17px; }
.spielzeit-regel input { width: 4.5em; font: inherit; }
/* Nachbesserungen nach der Prüfung (03.10.): Leiste fest angeordnet, Gegnerboxen am Handy einzeilig, Querformat */
.pad-status { grid-template-columns: auto 1fr 1fr auto; }
.pad-status .ps-st { grid-column: 1; grid-row: 1 / 3; }
.pad-status .ps-lp { grid-column: 2; grid-row: 1; } .pad-status .ps-asp { grid-column: 3; grid-row: 1; }
.pad-status .ps-ep { grid-column: 2 / 4; grid-row: 2; } .pad-status .ps-gold { grid-column: 4; grid-row: 1; } .pad-status .pad-trank { grid-column: 4; grid-row: 2; }
body.spiel-modus .wild-gegner-liste.mehrere { gap: 2px; }
body.spiel-modus .wild-gegner-liste.mehrere .wild-gegner-box { grid-template-columns: minmax(0, 1fr) 38%; padding: 2px 4px; }
body.spiel-modus .wild-gegner-liste.mehrere :is(.wild-st, .wild-lp) { display: none; }
body.spiel-modus .wild-gegner-liste.mehrere .wild-gegner-box b { font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: landscape) {
  body.spiel-modus .spiel-pad:is([data-modus=kampf], [data-modus=dialog]) .pad-aktionen { grid-row: 1 / -1; grid-column: 3; align-content: start; overflow-y: auto; max-height: 100%; }
  body.spiel-modus .spiel-pad:is([data-modus=kampf], [data-modus=dialog]) .pad-mitte { grid-area: auto; grid-row: 4; grid-column: 1; flex-direction: row; justify-content: flex-start; padding: 0; }
  body.spiel-modus .pad-kampf .wk { padding: 6px 8px; min-height: 0; }
  body.spiel-modus .pad-kampf .wk .sym svg { width: 24px; }
  body.spiel-modus .pad-status .ps-ep { display: none; }
  body.spiel-modus .pad-status .ps-wert:nth-of-type(3) { display: grid; }
  body.spiel-modus .pad-status { grid-template-columns: auto 1fr; }
  body.spiel-modus .pad-status > * { grid-column: auto !important; grid-row: auto !important; }
}
/* Runde Kampfknöpfe (Wunsch Michael 03.10.): Bildzeichen im Kreis, Wort darunter, Kasten nur so groß wie nötig; Würfel am Handy unten */
.wild-kampf-unten { height: auto; grid-template-columns: minmax(30%, 1fr) auto; align-items: center; }
.wild-kampf-menue, .wild-kampf-menue.unter { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px max(8px, calc(var(--s, 2) * 3px)); overflow: visible; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund { --kreis: max(40px, calc(var(--s, 2) * 15px)); flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 0;
  width: auto; padding: 2px 0 0; background: none; box-shadow: none; color: inherit; text-align: center; font: max(8px, calc(var(--s, 2) * 2.6px))/1.2 var(--pixel); }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund .wk-kreis { position: relative; display: grid; place-items: center; width: var(--kreis); height: var(--kreis); border-radius: 50%;
  background: #e8d4a4; box-shadow: 0 0 0 2px #8a5530, 0 3px 0 2px #5a3818; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund.haupt .wk-kreis { background: #c8452e; box-shadow: 0 0 0 2px #5a1a0a, 0 3px 0 2px #3a0e04; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund.zurueck .wk-kreis { background: #c9b28a; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund .wk-kreis .sym svg { width: calc(var(--kreis) * .6); }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund .wk-wort { width: max-content; max-width: 12em; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund .wk-zahl { position: absolute; right: -7px; top: -7px; min-width: 18px; height: 18px; padding: 0 3px; box-sizing: border-box; border-radius: 9px;
  background: #3a220f; color: #fff1c8; font: 8px/18px var(--pixel); font-style: normal; box-shadow: 0 0 0 2px #f1dfb4; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund .wk-zahl.asp { background: #2a4a9a; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund:hover:not(:disabled) { background: none; color: inherit; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund:hover:not(:disabled) .wk-kreis, :is(.wild-kampf-menue, .pad-kampf) .wk.rund.gewaehlt .wk-kreis { background: var(--gold); }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund:active:not(:disabled) { transform: none; box-shadow: none; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund:active:not(:disabled) .wk-kreis { transform: translateY(2px); box-shadow: 0 0 0 2px #8a5530, 0 1px 0 2px #5a3818; }
:is(.wild-kampf-menue, .pad-kampf) .wk.rund:disabled { opacity: .45; }
.pad-kampf.rund { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; gap: 10px 6px; padding: 6px 0 2px; }
.pad-kampf.rund .wk.rund { --kreis: 62px; color: #f1dfb4; font-size: 9px; }
.pad-kampf.rund .wk.rund .wk-zahl { box-shadow: 0 0 0 2px #1a140e; }
.pad-kampf:not(.rund) .wk { min-height: 54px; }
.pad-kampf:not(.rund) .wk .sym svg { width: 32px; }
.pad-wuerfel { display: none; }
body.spiel-modus .spiel-pad.wuerfelt .pad-text { display: none; }
body.spiel-modus .spiel-pad.wuerfelt .pad-wuerfel { display: block; grid-area: text; justify-self: center; width: min(100%, 360px); height: auto; image-rendering: pixelated; cursor: pointer;
  box-shadow: 0 0 0 2px #3a220f; }
@media (orientation: landscape) {
  body.spiel-modus .pad-kampf.rund { justify-content: flex-start; gap: 8px; }
  body.spiel-modus .pad-kampf.rund .wk.rund { --kreis: 44px; font-size: 8px; padding: 0; min-height: 0; }
}
/* DSA5-Kampfablauf (Schritt 3, 03.10.): Schmerz-Schild und Zugreihenfolge nach Initiative */
.wild-schmerz { display: inline-block; padding: 0 4px; margin-right: 4px; background: #7a1a0a; color: #ffe0c8; font: max(7px, calc(var(--s, 2) * 2.4px))/1.5 var(--pixel); border-radius: 3px; }
.wild-reihe { grid-column: 1 / -1; font-size: .85em; color: #7a5a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-schmerz { font-style: normal; color: #ff8a7a; }
.pad-text .pt-reihe { font-style: normal; font-size: 14px; color: #7a5a3a; }
body.spiel-modus .wild-gegner-liste.mehrere .wild-schmerz { display: none; }
/* Kaufbestätigung (Wunsch Michael 03.10.: wie in Diablo 2 oder Might and Magic) */
.kauf-frage { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10, 6, 4, .6); }
.kauf-box { width: min(440px, 100%); display: grid; gap: 10px; padding: 14px 16px; background: var(--pergament); color: var(--tinte);
  box-shadow: 0 0 0 3px #5a3a1a, 0 0 0 5px #c9a466, 0 12px 32px rgba(0, 0, 0, .6); }
.kauf-titel { font: 12px/1.5 var(--pixel); color: var(--rot); }
.kauf-ware { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.kauf-box .ding { margin: 0; }
.kauf-preis { display: grid; gap: 2px; margin: 0; font-size: 21px; } .kauf-preis span { font-size: 17px; opacity: .8; }
.kauf-knoepfe { display: flex; gap: 10px; justify-content: flex-end; }
/* Nebelwald am PC: die rechte Spalte (Spielmenü, Fenster der Orte) bleibt neben dem Bild stehen und scrollt für sich – auch per Finger
   am Touch-Display im Vollbild (F11), wo sie sich vorher nicht schieben ließ (Wunsch Michael 03.10.); am Ende geht es mit der Seite weiter */
@media (min-width: 1100px) {
  body.im-nebelwald:not(.kinder-modus) #inhalt, body.in-wildnis:not(.kinder-modus) #inhalt { position: sticky; top: 10px; max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px); overflow-y: auto; touch-action: pan-y; scrollbar-width: thin;
    z-index: 5; background: #2b2621; }   /* darunter scrollen „Gerade da“ und das Gespräch weg, statt sich darüberzuschieben (Rückmeldung Michael 04.10.) */
}
/* Rückmeldungen Michael 03.10. (rotes Dreieck): Lebensbalken am Handy groß, Erfahrung schmal; der Wirt-Kopf nicht mehr über den Ausgängen */
.pad-status { grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) auto; }
.pad-status .ps-lp { grid-column: 2 / 4; grid-row: 1; } .pad-status .ps-asp { grid-column: 2; grid-row: 2; } .pad-status .ps-ep { grid-column: 3; grid-row: 2; font-size: .9em; opacity: .85; }
.pad-status .ps-lp .wald-balken { height: 12px; } .pad-status .ps-asp .wald-balken { height: 10px; } .pad-status .ps-ep .wald-balken { height: 4px; }
.pad-status .ps-ep { grid-template-columns: 2.3em 1fr auto; }
@media (max-width: 1099px) {
  body:not(.kinder-modus) .wirt-wieder { top: calc(var(--s, 2) * 3px); bottom: auto; left: calc(var(--s, 2) * 3px); transform: scale(.7); transform-origin: top left; opacity: .85; }
  body:not(.kinder-modus) .wirt-wieder.neu { opacity: 1; }
  body:not(.kinder-modus) .wirt-box.sichtbar { pointer-events: none; }
}
/* Kampfmanöver, Schicksalspunkte, Sonderfertigkeiten, Urteil über Gegenstände (Wünsche Michael 03.10.) */
.wk-manoever { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-bottom: 2px; }
.wk-man { border: none; cursor: pointer; padding: 3px 7px; border-radius: 10px; background: #3a2a1a; color: #f1dfb4; font: max(8px, calc(var(--s, 2) * 3px))/1.3 var(--pixel); box-shadow: 0 0 0 1px #8a5530; }
.wk-man.gewaehlt { background: var(--gold); color: var(--tinte); box-shadow: 0 0 0 2px #5a3a1a; }
.spiel-pad .wk-manoever { justify-content: center; margin: 2px 0 6px; }
.spiel-pad .wk-man { font-size: 9px; padding: 5px 9px; }
.pad-kampf.rund .wk.rund { --kreis: 54px; }
body.spiel-modus .pad-kampf.rund .wk.rund { --kreis: 40px; }
.ding-urteil { display: inline-block; margin-left: 6px; padding: 0 5px; font: 9px/1.6 var(--pixel); font-style: normal; border-radius: 3px; vertical-align: middle; }
.ding-urteil.besser { background: #2a7a2a; color: #fff; } .ding-urteil.schlechter { background: #b8412c; color: #fff; }
.ding-urteil.gemischt { background: #c9a466; color: var(--tinte); } .ding-urteil.gleich { background: #8a8278; color: #fff; }
.sf-titel { margin: 12px 0 4px; } .sf-titel small { font: 16px var(--text); opacity: .75; }
.sf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sf-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 5px 8px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; }
.sf-zeile b { font-size: 19px; } .sf-zeile span { grid-column: 1; font-size: 16px; opacity: .85; } .sf-zeile button, .sf-zeile i { grid-column: 2; grid-row: 1 / 3; }
.sf-zeile small { grid-column: 1 / -1; font-size: 15px; color: #b8412c; } .sf-zeile.fertig { opacity: .7; }
/* Fernkampf auf der Karte (Wunsch Michael 03.10.) */
.wild-hud-knoepfe button.an, .pad-mitte .pad-ziel-knopf.an { background: var(--gold); color: var(--tinte); }
body.spiel-modus .pad-mitte .pad-ziel-knopf { background: #6a3a1a; }
/* Zustände durch Tricks der Gegner (Wunsch Michael 03.10.) */
.wild-zustand { display: inline-block; margin: 0 2px; padding: 0 4px; border-radius: 3px; font-style: normal; font-size: .85em; color: #fff; background: #7a5a3a; }
.wild-zustand.gift { background: #4a8a2a; } .wild-zustand.furcht { background: #5a3a7a; } .wild-zustand.liegend { background: #8a5a2a; } .wild-zustand.benommen { background: #6a6a8a; }
/* Heldenerschaffung und Einführung (Wunsch Michael 03.10.) */
body.ersch-offen { overflow: hidden; }
.ersch { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 12px; background: rgba(8, 10, 12, .78); }
.ersch-box { max-height: calc(100vh - 24px); width: min(620px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; padding: 16px 18px; background: var(--pergament); color: var(--tinte);
  box-shadow: 0 0 0 3px #5a3a1a, 0 0 0 5px #c9a466, 0 14px 40px rgba(0, 0, 0, .7); }
.ersch-box.breit { width: min(860px, 100%); }
.ersch-titel { margin: 0 0 6px; font: 14px/1.5 var(--pixel); color: var(--rot); }
.ersch-text { margin: 0 0 10px; font-size: 20px; line-height: 1.2; }
.ersch-wege, .ersch-antworten, .ersch-vorlagen, .ersch-boegen { display: grid; gap: 8px; }
.ersch-vorlagen { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ersch-weg, .ersch-vorlage, .ersch-bogen, .ersch-antwort { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; text-align: left; cursor: pointer;
  border: none; padding: 8px 10px; background: #fff8e2; color: var(--tinte); box-shadow: 0 0 0 2px #c9a466; font: 18px var(--text); }
.ersch-weg .sym, .ersch-vorlage .sym { grid-row: 1 / 4; } .ersch-weg b, .ersch-vorlage b { font: 11px/1.5 var(--pixel); } .ersch-weg span, .ersch-vorlage span { font-size: 17px; }
.ersch-vorlage small { font-size: 15px; opacity: .75; } .ersch-antwort { grid-template-columns: 1fr; font-size: 20px; }
.ersch-weg:hover:not(:disabled), .ersch-vorlage:hover, .ersch-bogen:hover, .ersch-antwort:hover { background: #fff1c8; }
.ersch-vorlage.gewaehlt, .ersch-bogen.gewaehlt { background: #fff1c8; box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px #5a3a1a; }
.ersch-weg.aus { opacity: .5; cursor: default; }
.ersch-fuss { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 12px 0 0; }
.ersch-feld { display: inline-grid; gap: 2px; font-size: 17px; margin: 6px 10px 0 0; } .ersch-feld input, .ersch-feld select { font: 18px var(--text); padding: 3px 6px; }
.ersch-name input { width: min(260px, 70vw); } .ersch-zeile { display: flex; flex-wrap: wrap; align-items: end; }
.ersch-box h3 { margin: 12px 0 4px; font: 10px/1.5 var(--pixel); } .ersch-box h3 small { font: 16px var(--text); opacity: .75; }
.ersch-werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 10px; }
.ersch-wert { display: grid; grid-template-columns: 1fr auto 2.2em auto; align-items: center; gap: 4px; font-size: 17px; }
.ersch-wert i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ersch-wert b { text-align: center; }
.ersch-wert button { width: 26px; height: 26px; border: none; cursor: pointer; background: #e8d4a4; box-shadow: 0 0 0 2px #8a5530; font: 16px var(--text); }
.ersch-wert button:disabled { opacity: .35; cursor: default; }
.ersch-sf { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; } .ersch-check { font-size: 17px; } .ersch-check small { opacity: .7; }
.ersch-ap { position: sticky; top: -16px; z-index: 2; margin: 0 -18px 8px; padding: 6px 18px; background: #3a2414; color: #ffe9b0; font-size: 19px; }
.ersch-ap.zu-viel { background: #7a1a0a; } .ersch-fehler { color: #b8412c; font-size: 17px; margin: 8px 0 0; } .ersch-klein { font-size: 15px; opacity: .75; margin: 2px 0; }
.erzaehlung { position: fixed; inset: 0; z-index: 78; display: grid; place-items: end center; padding: 16px; background: rgba(4, 6, 10, .55); }
.erz-titelkarte { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; background: #0a0806; color: #ffe9b0; cursor: pointer; }
.erz-titelkarte b { font: 28px/1.4 var(--pixel); color: var(--gold); } .erz-titelkarte span { font: 14px/1.5 var(--pixel); } .erz-titelkarte i { font: 16px var(--text); opacity: .6; margin-top: 18px; }
.erz-box { width: min(760px, 100%); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 16px; cursor: pointer; background: var(--pergament); color: var(--tinte);
  box-shadow: 0 0 0 3px #5a3a1a, 0 0 0 5px #c9a466, 0 14px 40px rgba(0, 0, 0, .7); }
.erz-bild { display: grid; place-items: center; width: 72px; min-height: 100px; background: #2a2018; box-shadow: inset 0 0 0 2px #5a3a1a; image-rendering: pixelated; }
.erz-text b { font: 10px/1.6 var(--pixel); color: var(--rot); } .erz-text b.erz-erzaehler { color: #5a4a3a; }
.erz-text p { margin: 4px 0 8px; font-size: 21px; line-height: 1.22; } .erz-knoepfe { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 600px) { .erz-box { grid-template-columns: 1fr; } .erz-bild { width: 100%; min-height: 0; padding: 4px 0; } }
/* Neue Auslieferung: Hinweis zum Neuladen (Wunsch Michael 03.10.) */
.auslieferung { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 12, .72); }
.auslieferung-box { width: min(460px, 100%); box-sizing: border-box; padding: 18px 20px; text-align: center; background: var(--pergament); color: var(--tinte);
  box-shadow: 0 0 0 3px #5a3a1a, 0 0 0 5px #c9a466, 0 14px 40px rgba(0, 0, 0, .7); }
.auslieferung-box h2 { margin: 6px 0; font: 13px/1.5 var(--pixel); color: var(--rot); } .auslieferung-box p { margin: 0 0 12px; font-size: 20px; line-height: 1.2; }
.auslieferung-box .knoepfe { justify-content: center; }
.auslieferung-w20 { display: inline-grid; place-items: center; width: 44px; height: 44px; font: 10px var(--pixel); color: #5a3a1a; background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* Trefferchance an den Manövern */
.wk-chance { font: inherit; opacity: .75; } .wk-man.gewaehlt .wk-chance { opacity: 1; }
.ersch-behalten { margin-top: 8px; }
/* Heldenzelt am Lagerfeuer (Wunsch Michael 03.10.) */
.zelt-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 12px; padding: 8px 10px; background: #3a2414; color: #ffe9b0;
  box-shadow: 0 0 0 2px #8a5530; font-size: 18px; } .zelt-hinweis b { display: block; font: 10px/1.6 var(--pixel); color: var(--gold); }
.zelt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; }
.zelt-kopf b { font: 11px/1.5 var(--pixel); margin-right: 10px; } .zelt-kopf i { font-style: normal; font-size: 19px; color: #7a4a10; }
.zelt-titel { margin: 12px 0 2px; font: 10px/1.6 var(--pixel); } .zelt-titel small { font: 16px var(--text); opacity: .75; } .zelt-klein { margin: 0 0 4px; font-size: 16px; opacity: .8; }
.zelt-werte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 12px; }
.zelt-wert { display: grid; grid-template-columns: 1fr 2.2em 3.6em auto; align-items: center; gap: 6px; font-size: 18px; padding: 2px 0; border-bottom: 1px dotted #c9a46688; }
.zelt-wert b { text-align: right; font-size: 20px; } .zelt-wert small { font-size: 14px; opacity: .65; } .zelt-wert i { font-size: 15px; opacity: .6; text-align: center; }
.zelt-wert .zw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; } .zelt-wert.voll { opacity: .7; }
.zelt-wert .knopf.klein { padding: 4px 8px; white-space: nowrap; }
.zelt-name { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 8px 0; } .zelt-name label { display: grid; gap: 2px; font-size: 17px; }
.zelt-name input { font: 19px var(--text); padding: 3px 6px; width: min(260px, 70vw); } .zelt-ap { font-size: 18px; }
.zelt-funkeln { display: block; color: var(--gold); font-size: calc(var(--s, 2) * 6px); text-shadow: 0 0 6px #ffd27a; animation: zeltFunkeln 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes zeltFunkeln { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .zelt-funkeln { animation: none; opacity: .8; } }
/* Kleiderschrank „Aventurien“: Schneeflocken aus dem Türspalt */
.schrank-schnee { position: relative; display: block; width: calc(var(--s, 2) * 14px); height: calc(var(--s, 2) * 40px); pointer-events: none; }
.schrank-schnee i { position: absolute; top: 30%; left: 50%; width: max(2px, calc(var(--s, 2) * 1px)); height: max(2px, calc(var(--s, 2) * 1px)); background: #f4f8ff; border-radius: 50%;
  opacity: 0; animation: schrankSchnee 4.5s linear infinite; }
.schrank-schnee i:nth-child(2) { animation-delay: 1.1s; left: 40%; } .schrank-schnee i:nth-child(3) { animation-delay: 2.3s; left: 58%; } .schrank-schnee i:nth-child(4) { animation-delay: 3.4s; left: 47%; }
@keyframes schrankSchnee { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--s, 2) * 6px), calc(var(--s, 2) * 26px)); } }
@media (prefers-reduced-motion: reduce) { .schrank-schnee { display: none; } }
/* Ton (Wunsch Michael 03.10.): Knopf unten rechts im Bild, Regler darüber */
.klang-knopf { position: absolute; right: 8px; bottom: 8px; z-index: 12; width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: #0c0a08cc; color: #ffe9b0; box-shadow: 0 0 0 2px #6b4428; font: 20px/30px var(--text); }
.klang-knopf:hover { background: #3a2414; } .klang-knopf.aus { color: #9a8a6a; }
.klang-regler { position: absolute; right: 8px; bottom: 46px; z-index: 31; width: min(270px, 86%); box-sizing: border-box; display: grid; gap: 6px; padding: 10px 12px;
  background: var(--pergament); color: var(--tinte); box-shadow: 0 0 0 2px #5a3a1a, 0 0 0 4px #c9a466, 0 8px 24px rgba(0, 0, 0, .6); font: 17px/1.2 var(--text); }
.klang-titel { font: 10px/1.6 var(--pixel); color: var(--rot); } .klang-zeile { display: grid; gap: 2px; } .klang-zeile input[type=range] { width: 100%; accent-color: #8a5530; }
.klang-zeile select { font: 17px var(--text); } .klang-haken { display: flex; gap: 6px; align-items: center; } .klang-quelle { margin: 2px 0 0; font-size: 13px; opacity: .7; }
/* Regel-Infos beim Drüberfahren/Antippen (Wunsch Michael 03.10.) */
[data-regel] { cursor: help; }
.wild-hud [data-regel], .wild-ich [data-regel] { pointer-events: auto; }
.regel-info { position: fixed; z-index: 98; width: min(320px, calc(100vw - 16px)); box-sizing: border-box; padding: 8px 10px; background: var(--pergament); color: var(--tinte);
  box-shadow: 0 0 0 2px #5a3a1a, 0 0 0 4px #c9a466, 0 8px 24px rgba(0, 0, 0, .6); font: 17px/1.2 var(--text); pointer-events: none; }
.regel-info.fest { pointer-events: auto; }
.regel-info b { display: block; margin-bottom: 4px; font: 9px/1.6 var(--pixel); color: var(--rot); } .regel-info i { font-style: normal; color: #7a4a10; }
/* Tablet/Handy: B-Knopf mit „Schuss“ (Rückmeldung Michael 03.10.); die Kampfknöpfe als Raute sind wieder weg (Rückmeldung 03.10. 22:37: „die Knöpfe waren vorher besser“) */
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-aktionen { overflow-x: hidden; }
body.spiel-modus .wild-gespraech p { font-size: max(18px, calc(var(--s, 2) * 8.4px)); }
body.spiel-modus .pad-b small { display: block; font: 8px/1 var(--pixel); margin-top: 2px; opacity: .8; }
@media (orientation: landscape) {
  body.spiel-modus .spiel-pad { grid-template-columns: var(--pad-seite, 170px) 1fr var(--pad-seite, 170px); }
  body.spiel-modus .pad-status { font-size: 19px; gap: 6px 8px; padding: 6px 8px; }
  body.spiel-modus .pad-status .wald-balken { height: 12px; }
  body.spiel-modus .pad-status .ps-st { font-size: 12px; }
  body.spiel-modus .pad-status .ps-wert b { font-size: 19px; }
  body.spiel-modus .pad-text { font-size: 18px; }
}
/* Gespräche mit großem Porträt (Rückmeldung Michael 03.10.): das Bild steht links auf dem Textfenster und ragt darüber hinaus; am Tablet/Handy
   steht das Gespräch groß im Bild, die Antworten liegen unten in der Steuerung */
.wild-gespraech.mit-bild { padding-left: 25%; min-height: 26%; }
.wild-portrait { position: absolute; left: 1.5%; bottom: 6%; width: 21%; image-rendering: pixelated; filter: drop-shadow(0 3px 0 #3a220f88);
  background: radial-gradient(circle at 50% 60%, #fff4d0 0 45%, transparent 70%); pointer-events: none; }
.wild-gespraech.mit-bild .wild-sprecher { left: 25%; }
body.spiel-modus .wild-gespraech { min-height: 30%; bottom: 2%; }
body.spiel-modus .wild-gespraech p { font-size: max(16px, calc(var(--s, 2) * 7.2px)); }
body.spiel-modus .wild-gespraech .wild-wahl { display: none; }
.pad-text .pt-klein { opacity: .8; }
/* Vollbild-Knopf in der Spielsteuerung, „Als App installieren“ in der Ich-Schublade (Rückmeldung Michael 03.10.) */
.pad-mitte [data-app-vollbild] { font-size: 20px; line-height: 1; }
/* Kessel am Lagerfeuer (Wunsch Michael 03.10.) */
.kessel-plaetze { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.kessel-platz { display: inline-grid; place-items: center; min-width: 92px; min-height: 40px; padding: 4px 8px; border: none; background: #2a1a10; color: #9a8a6a;
  box-shadow: inset 0 0 0 2px #5a3a1a; font: 17px var(--text); }
.kessel-platz.voll { cursor: pointer; color: #fff1c8; } .kessel-plus { font: 14px var(--pixel); color: #8a5530; }
.kessel-beutel { display: flex; flex-wrap: wrap; gap: 6px; }
.kessel-zutat { display: inline-grid; grid-template-columns: auto auto; gap: 6px; align-items: center; border: none; cursor: pointer; padding: 5px 9px; background: #fff8e2;
  color: var(--tinte); box-shadow: 0 0 0 2px #c9a466; font: 17px var(--text); } .kessel-zutat i { font-style: normal; opacity: .7; }
.kessel-zutat:disabled { opacity: .45; cursor: default; }
:is(.kessel-zutat, .kessel-platz).beere { box-shadow: 0 0 0 2px #b8304a; } :is(.kessel-zutat, .kessel-platz).kraut { box-shadow: 0 0 0 2px #5a8a3a; }
:is(.kessel-zutat, .kessel-platz).pilz { box-shadow: 0 0 0 2px #a86a3a; }
.kessel-rezepte { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kessel-rezepte li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: 17px; padding: 4px 0; border-bottom: 1px dotted #c9a46688; }
.kessel-rezepte li b { font: 10px/1.6 var(--pixel); } .kessel-rezepte li span { grid-column: 1; } .kessel-rezepte li i { grid-column: 1; font-size: 15px; opacity: .75; }
.kessel-rezepte li .knopf { grid-column: 2; grid-row: 1 / 4; align-self: center; } .kessel-rezepte li.unbekannt span { font-style: italic; opacity: .8; }
/* „Was ist neu“ im Hinweis zum Neuladen */
.auslieferung-neu { text-align: left; margin: 0 0 12px; padding: 6px 10px; background: #fff8e2; box-shadow: inset 0 0 0 2px #c9a466; font-size: 18px; }
.auslieferung-neu b { font: 9px/1.6 var(--pixel); color: var(--rot); } .auslieferung-neu ul { margin: 4px 0 0; padding-left: 18px; } .auslieferung-neu li { margin: 2px 0; }
.zelt-wert.ruhend { opacity: .62; } .zelt-wert .zw-ruht { font-style: normal; font-size: 13px; opacity: .8; }
/* Handheld: lange Meldungen scrollen statt abgeschnitten zu werden (Prüfdurchlauf 1) */
body.spiel-modus .pad-text { justify-content: safe center; overflow-y: auto; max-height: 30vh; overscroll-behavior: contain; }
@media (orientation: landscape) { body.spiel-modus .pad-text { max-height: 40vh; } }
body.spiel-modus .pad-b.an { box-shadow: 0 0 0 3px #ffd27a, 0 0 14px #ffb84a; }

/* ---- Prüfdurchlauf 3, Teil H (04.10.): Handy, Tablet, Kindermodus ---- */
/* H1: „Neu laden“-Hinweis passt immer auf den Bildschirm */
.auslieferung { overflow-y: auto; place-items: safe center; }
.auslieferung-box, .kauf-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.auslieferung-neu { max-height: 35vh; overflow-y: auto; }
/* H2: Kampfknöpfe hochkant: Feld scrollt notfalls; Würfeltafel bleibt flach */
@media (orientation: portrait) {
  body.spiel-modus .spiel-pad[data-modus] .pad-aktionen { align-self: stretch; min-height: 0; overflow-y: auto; align-content: safe center; }
  body.spiel-modus .spiel-pad.wuerfelt .pad-wuerfel { width: auto; height: 84px; }
  body.spiel-modus .spielzeit-anzeige { left: 8px; transform: none; }
}
/* H3: im Kindermodus liegen Vollbild-Knopf, ♪ und „Wer ist da“ nicht über Kampf und Gespräch */
body.in-wildnis .online-bild { display: none !important; }
#raum:has(.wild-kampf-unten, .wild-gespraech, .wild-tipp) :is(.vollbild-knopf, .klang-knopf) { display: none; }
/* H4: Wirt-Box am Handy höher */
@media (max-width: 700px) { body:not(.kinder-modus) .wirt-box { max-height: 62%; } }
/* H5: Führung mit Höhengrenze */
.rundgang { max-height: min(50vh, 420px); overflow-y: auto; }
body.im-rundgang main { padding-bottom: 55vh; }
/* H6: Ton-Regler von oben, scrollbar */
.klang-regler { bottom: auto; top: 8px; max-height: calc(100% - 16px); overflow-y: auto; }
/* H7: ♪ weicht Gespräch, Kampf, Wirt-Box und Fenster aus */
#raum:has(.wild-gespraech, .wild-kampf-unten, .wirt-box.sichtbar) .klang-knopf { display: none; }
#raum:has(#fenster.rechts:not([hidden])) .klang-knopf { right: calc(42% + 14px); }
.wild-tipp { right: calc(2% + 40px); }
/* H8: Teleskop-Meldungen brechen um */
.teleskop { overflow: hidden; }
.teleskop-hinweis, .teleskop-meldung { white-space: normal; max-width: 92%; text-align: center; line-height: 1.4; }
/* H9: Handy quer – Stick und Knöpfe passen */
@media (orientation: landscape) and (max-height: 480px) {
  body.spiel-modus .pad-mitte { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  body.spiel-modus .pad-mitte button { padding: 6px 8px; }
  body.spiel-modus .pad-text { max-height: 24vh; }
  body.spiel-modus .pad-stick { width: 110px; }
  body.spiel-modus .pad-ab { height: 112px; }
  body.spiel-modus .pad-ab .pad-pferd { width: 40px; height: 40px; top: -4px; }
  body.spiel-modus .pad-status { grid-auto-flow: row dense; }
  body.spiel-modus .pad-status > :is(.ps-lp, .ps-asp) { grid-column: 1 / -1 !important; }
}
/* H10: Tippflächen mindestens 40 px */
@media (pointer: coarse) {
  .wk-man, .spiel-reiter button, .pad-mitte button, .pad-status .pad-trank, .wild-hud-knoepfe button, .knopf.klein { min-height: 40px; }
  .ersch-wert button { width: 40px; height: 40px; }
  .klang-knopf { width: 40px; height: 40px; line-height: 40px; }
}
/* H11: Steuerkreuz nicht über Gespräch und Meldung */
.wild-gespraech ~ .wild-steuer, .wild-meldung ~ .wild-steuer { display: none !important; }
/* H13: echte Bildschirmhöhe im Kindermodus */
body.kinder-modus main { min-height: 100dvh; }
/* H14: Heldenzelt und Laden am schmalen Handy */
@media (max-width: 480px) {
  .zelt-wert { grid-template-columns: minmax(0, 1fr) 2.2em auto; }
  .zelt-wert small { display: none; }
  .ding { grid-template-columns: auto minmax(0, 1fr); }
  .ding-knoepfe { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
/* H15b: große Gesprächsschrift im Handheld-Modus gilt wirklich; H15c: Erschaffung auch in älteren Safaris begrenzt */
body.spiel-modus .wild-gespraech p { font-size: max(18px, calc(var(--s, 2) * 8.4px)); }

/* ---- Würfel bei Talentproben und Vorräte (Wünsche Michael 04.10.) ---- */
.probe-wuerfel { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; background: rgba(4, 3, 2, .45); cursor: pointer; touch-action: none; }
.probe-wuerfel[hidden] { display: none; }
.probe-wuerfel canvas { width: min(94vw, 720px, 167vh); image-rendering: pixelated; box-shadow: 0 0 0 2px #2a1a0c, 0 10px 30px rgba(0, 0, 0, .7); }
.probe-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.spiel-guertel.vorraete .sym svg { vertical-align: middle; }
.vorrat-rast { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vorrat-waren { display: grid; gap: 6px; margin: 6px 0 10px; }
.vorrat-ware { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(42, 26, 16, .12); border-left: 3px solid #8a6a3a; }
.vorrat-text { display: grid; gap: 1px; font-size: 16px; line-height: 1.15; }
.vorrat-text i { font-style: normal; opacity: .85; } .vorrat-text small { opacity: .7; }
.vorrat-kauf { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 480px) { .vorrat-ware { grid-template-columns: auto minmax(0, 1fr); } .vorrat-kauf { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } }

/* ---- Mitspieler und Chat in der Wildnis (Wünsche Michael 03./04.10.) ---- */
.wild-chat { position: absolute; left: 1%; bottom: 2%; width: 38%; max-height: 34%; z-index: 6; display: flex; flex-direction: column; background: rgba(8, 6, 4, .55);
  border: 1px solid rgba(201, 164, 102, .35); font: 17px/1.15 var(--text); color: #f4ecd8; }   /* 17 statt 15 px (Michael 11.10.: „sehr klein“) */
.wild-chat[hidden] { display: none; }
.wild-chat .wchat-liste { list-style: none; margin: 0; padding: 4px 6px; overflow-y: auto; flex: 1; min-height: 0; text-shadow: 0 1px 0 #000; }
.wchat-liste li { margin: 1px 0; overflow-wrap: anywhere; } .wchat-liste li.leer { opacity: .7; }
.wchat-liste li.privat, .wchat-liste li.privat b { color: #ff9ad8; } .wchat-liste li.spiel { color: #c8b890; }
.wchat-liste li i { color: #9ad0ff; font-style: normal; } .wchat-liste li b { color: #ffd84a; font-weight: normal; }
.wchat-form { margin: 0; }
.wchat-form input { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, .6); color: #fff; border: 0; border-top: 1px solid rgba(201, 164, 102, .35); padding: 3px 6px; font: inherit; }
.wchat-form input:not(:focus) { opacity: .75; }
#raum:has(.wild-kampf-unten, .wild-gespraech) .wild-chat { display: none; }
/* ein Chat für alles (11.10.): in der Taverne rechts neben Wirt-Kopf und Wunschtafel, Klicks gehen auf die Szene durch, nur das Feld nimmt sie */
/* Rückmeldung Michael 11.10.: „in die Mitte über die Breite, ein bisschen größer … darf nichts zum Klicken verdecken“ – mittig zwischen Wirt-Kopf/Wunschtafel
   links und Ton-Knopf rechts, größere Schrift */
.wild-chat.taverne { left: 20%; right: 20%; width: auto; max-height: 34%; pointer-events: none; background: rgba(8, 6, 4, .45); font-size: 19px; line-height: 1.2; }
.wild-chat.taverne .wchat-form input { padding: 5px 8px; }
.wild-chat.taverne .wchat-form, .wild-chat.taverne:focus-within { pointer-events: auto; }
.wild-chat.taverne:focus-within { background: rgba(8, 6, 4, .7); }
#raum:has(#fenster.links:not([hidden])) .wild-chat.taverne { left: calc(42% + 14px); right: 8%; }
#raum:has(#fenster.rechts:not([hidden])) .wild-chat.taverne { left: 8%; right: calc(42% + 14px); }
#raum:has(#teleskop:not([hidden]), .irr-hud) .wild-chat { display: none; }
body.chat-im-bild #raumgespraech { display: none; }
.spiel-chat { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: rgba(10, 8, 6, .95); color: #f4ecd8; font: 18px/1.25 var(--text);
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
.spiel-chat[hidden] { display: none; }
.spiel-chat-kopf { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; font: 10px/1.4 var(--pixel); color: #ffd84a; }
.spiel-chat .wchat-liste { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 4px; }
.spiel-chat .wchat-form input { font-size: 18px; padding: 12px 10px; border: 1px solid #8a6a3a; }
[data-chat-auf] { position: relative; }
.chat-zahl { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #c82a1a; color: #fff; font: 9px/18px var(--pixel); font-style: normal; text-align: center; }
.chat-zahl[hidden] { display: none; }
.welt-freunde { position: absolute; left: 2px; bottom: 2px; z-index: 2; display: flex; flex-wrap: wrap; gap: 2px; }
.welt-freunde em { font-style: normal; font-size: 12px; background: rgba(10, 40, 14, .88); color: #7aff8a; padding: 0 3px; }
body.in-wildnis #raumgespraech { display: none; }

/* ---- Vollbild überall (Wunsch eines Mitspielers 04.10.) ---- */
@media (min-width: 1100px) {
  body:not(.kinder-modus):not(.in-wildnis) .vollbild-knopf { display: block; position: absolute; top: 4px; right: 4px; z-index: 7; width: 30px; height: 30px; padding: 0; border: none;
    border-radius: 4px; background: rgba(20, 14, 8, .55); color: #ffe7a8; font-size: 0; cursor: pointer; opacity: .7; }
  body:not(.kinder-modus):not(.in-wildnis) .vollbild-knopf::before { content: '⛶'; font-size: 20px; line-height: 30px; }
  body:not(.kinder-modus) .vollbild-knopf:hover, body:not(.kinder-modus) .vollbild-knopf:focus-visible { opacity: 1; }
}
.kl-vollbild { font-size: 22px; line-height: 1; padding: 0 10px; }
body:has(#spielChat:not([hidden])) #feedbackDreieck { display: none; }

/* ---- Talent-Stellen an festen Orten (Wunsch Michael 04.10.) ---- */
.stellen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 6px 0 10px; }
.stelle-knopf { display: grid; gap: 2px; text-align: left; padding: 6px 8px; border: none; background: #fff3d0; box-shadow: 0 0 0 2px #c9a466; cursor: pointer; font: 17px/1.15 var(--text); color: #3a2414; }
.stelle-knopf b { font: 9px/1.5 var(--pixel); color: #7a3a10; } .stelle-knopf i { font-style: normal; opacity: .85; }
.stelle-knopf:hover:not(:disabled) { background: #ffe8a8; } .stelle-knopf.erledigt { opacity: .55; cursor: default; }
.stelle-frage { font: 19px/1.3 var(--text); margin: 8px 0 12px; }

/* ---- Gespräch: Reiter „Hier“ | „Überall“ (Wunsch eines Mitspielers 04.10.) ---- */
.gespraech-reiter { margin-left: auto; display: inline-flex; gap: 4px; }
.gespraech-reiter button { border: none; padding: 3px 8px; font: 8px/1.4 var(--pixel); background: #e8d8b0; color: #5a3a1a; cursor: pointer; box-shadow: 0 0 0 1px #c9a466; }
.gespraech-reiter button[aria-pressed="true"] { background: #7a3a10; color: #fff3d0; }
.gespraechs-liste li i.wo { font-style: normal; color: #2a6a8a; }

/* Spezialmanöver in der Abklingzeit (Entscheidung Michael 04.10.) */
.wk-man.abklingen { opacity: .55; cursor: not-allowed; filter: grayscale(.6); }

/* Nebenaufträge im Menü (Wunsch Michael 04.10.) */
.spiel-neben { font: 11px 'VT323', monospace; color: #8a6a3a; background: #f4e6c4; border: 1px solid #c8a868; border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }

/* Kampf am Handy/Tablet (Rückmeldungen Michael 04.10.): Fähigkeiten (Manöver) in eigenem Platz, Werte über die ganze Spalte, Knöpfe wie am Controller */
.pad-manoever { display: none; }
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever { display: flex; position: relative; grid-column: 1 / -1; justify-content: center; }
.pad-faehig { display: flex; align-items: center; gap: 8px; border: none; cursor: pointer; padding: 7px 14px; border-radius: 14px; background: #3a2a1a; color: #f1dfb4;
  font: 9px var(--pixel); box-shadow: 0 0 0 2px #8a5530, 0 3px 0 #0008; }
.pad-faehig i { font-style: normal; opacity: .75; } .pad-faehig b { font-weight: normal; color: var(--gold); }
.pad-faehig.auf { background: var(--gold); color: var(--tinte); } .pad-faehig.auf b { color: var(--tinte); }
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-manoever { display: none; }
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever.auf .wk-manoever { display: flex; position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); flex-wrap: wrap;
  justify-content: center; gap: 6px; padding: 10px; margin: 0; background: #1a140e; border-radius: 10px; box-shadow: 0 0 0 2px #8a5530, 0 8px 18px #000c; }
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-man { font-size: 10px; padding: 8px 11px; }
@media (orientation: portrait) {
  body.spiel-modus .spiel-pad[data-modus=kampf] { grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "status status" "text text" "man man" "akt akt" "mitte mitte"; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever { grid-area: man; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-aktionen { grid-area: akt; align-content: start; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-mitte { grid-area: mitte; }
}
@media (orientation: landscape) {
  /* Werte oben links über die ganze Spaltenbreite: AP und Trank, darunter Leben, Astral, Erfahrung */
  body.spiel-modus .pad-status { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 6px; box-sizing: border-box; width: 100%; }
  body.spiel-modus .pad-status .ps-st { grid-column: 1 !important; grid-row: 1 !important; align-self: center; }
  body.spiel-modus .pad-status .pad-trank { grid-column: 2 !important; grid-row: 1 !important; }
  body.spiel-modus .pad-status .ps-lp { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  body.spiel-modus .pad-status .ps-asp { display: grid !important; grid-column: 1 / -1 !important; grid-row: 3 !important; }
  body.spiel-modus .pad-status .ps-ep { display: grid !important; grid-column: 1 / -1 !important; grid-row: 4 !important; font-size: .8em; }
  body.spiel-modus .pad-status .ps-gold { display: none !important; }
  body.spiel-modus .pad-status .ps-wert { grid-template-columns: 2.4em minmax(0, 1fr) auto; min-width: 0; }
  body.spiel-modus .pad-status .ps-wert b { font-size: 17px; }
  /* Fähigkeiten links neben der Szene, immer offen */
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever { grid-column: 1; grid-row: 3; align-self: start; flex-direction: column; overflow-y: auto; max-height: 100%; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .pad-faehig { display: none; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-manoever { display: flex; position: static; flex-direction: column; align-items: stretch; gap: 5px; padding: 0; background: none; box-shadow: none; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-man { font-size: 9px; padding: 7px 8px; text-align: left; }
  /* rechts: wie am Controller – oben Schicksal, links Zauber, rechts Trank, in der Mitte Talent, unten Angreifen; Fliehen abseits unten rechts */
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-aktionen { align-content: center; }
  body.spiel-modus .pad-kampf.rund:not(.unter) .wk.rund .wk-wort { font-size: 8px; }
  body.spiel-modus .pad-kampf.rund:not(.unter) { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". schicksal ." "zauber talent trank" ". angriff ." ". . flucht"; gap: 6px 2px;
    justify-items: center; align-items: start; }
  body.spiel-modus .pad-kampf.rund:not(.unter) .wk.rund { --kreis: clamp(40px, calc(var(--pad-seite, 170px) * .28), 64px); }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=angriff] { grid-area: angriff; --kreis: clamp(48px, calc(var(--pad-seite, 170px) * .34), 76px); }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=zauber] { grid-area: zauber; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=trank] { grid-area: trank; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=talent] { grid-area: talent; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=schicksal] { grid-area: schicksal; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=flucht] { grid-area: flucht; --kreis: clamp(34px, calc(var(--pad-seite, 170px) * .2), 48px); opacity: .9; }
}

/* Neues aus dem Nebelwald (Wunsch Michael 04.10.): Schriftrolle des Wirts mit den Neuerungen */
.neu-rolle-huelle { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 12px; background: #0a0806b8; }
.neu-rolle { width: min(560px, 96vw); max-height: 90vh; display: flex; flex-direction: column; animation: neuRolleAuf .55s ease-out; transform-origin: 50% 0; }
@keyframes neuRolleAuf { from { transform: scaleY(.06); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
.neu-rolle-stab { flex: none; height: 18px; margin: 0 -14px; border-radius: 9px; background: linear-gradient(#a8743a, #6a4020 55%, #3a2210); box-shadow: 0 3px 0 #1a0e06, inset 0 2px 0 #d8a868;
  position: relative; z-index: 1; }
.neu-rolle-stab::before, .neu-rolle-stab::after { content: ''; position: absolute; top: -3px; width: 14px; height: 24px; border-radius: 5px; background: #e8c23a; box-shadow: inset 0 -3px 0 #8a6a10; }
.neu-rolle-stab::before { left: -6px; } .neu-rolle-stab::after { right: -6px; }
.neu-rolle-papier { position: relative; overflow-y: auto; overscroll-behavior: contain; margin: -4px 0; padding: 18px 22px 16px; color: var(--tinte, #2a1a0a);
  background: radial-gradient(ellipse at 30% 20%, #fbf0d0, #ecd8a4 70%, #d8bc7e); box-shadow: inset 12px 0 18px -10px #8a6a3a, inset -12px 0 18px -10px #8a6a3a; font: 19px/1.3 var(--text); }
.neu-rolle-wirt { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; font-style: italic; }
.neu-rolle-kopf { flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #3a2a1a; box-shadow: 0 0 0 3px #8a5530; overflow: hidden; }
.neu-rolle-kopf :is(svg, img.ds-kopf) { width: 46px; height: auto; image-rendering: pixelated; }
.neu-rolle-wirt p { margin: 0; }
.neu-rolle h2 { margin: 10px 0 6px; text-align: center; font: 13px/1.5 var(--pixel); color: #7a1a0a; letter-spacing: .5px; }
.neu-rolle h3 { margin: 12px 0 4px; padding-bottom: 2px; border-bottom: 1px dashed #a8844a; font: 9px/1.6 var(--pixel); color: #5a3a1a; }
.neu-rolle ul { margin: 0; padding-left: 20px; } .neu-rolle li { margin: 4px 0; } .neu-rolle li::marker { color: #9a2a1a; }
.neu-rolle-siegel { width: 54px; height: 54px; margin: 14px auto 8px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d8402a, #8a1a0a);
  color: #ffe8a8; font: 10px var(--pixel); box-shadow: 0 0 0 3px #6a1208, 0 3px 0 4px #0004; transform: rotate(-12deg); }
.neu-rolle-papier .knopf { display: block; margin: 0 auto; }

/* Gemalte Szenen (Wunsch Michael 04.10.): im Gespräch füllt das Bild die ganze Breite oben (Rückmeldung 04.10. 10:05: „das Bild soll füllend sein“),
   das Textfenster liegt unten darüber; im Würfelfenster steht die Szene über den Würfeln */
.wild-gespraech.mit-szene, body.spiel-modus .wild-gespraech.mit-szene { padding-left: 2.5%; }
.wild-gespraech.mit-szene .wild-sprecher { left: 2.5%; }
.wild-szene-flaeche { position: absolute; inset: 0; overflow: hidden; pointer-events: auto; cursor: pointer; background: #0a0806; animation: szeneAuf .45s ease-out; }
.wild-szene-grund { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(10px) brightness(.5) saturate(1.2); }
.wild-szene-voll { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }   /* deckt den ganzen Spielbildschirm ab, nur das Textfeld liegt darüber (Wunsch Michael 04.10.) */
.wild-szene-flaeche img[src^="data:"] { image-rendering: pixelated; }
.wild-szene-flaeche.laedt img { visibility: hidden; }   /* Foto lädt noch: dunkle Fläche statt des vorigen (47) */
/* Handy/Tablet hochkant: das ganze Bild gehört der Szene (in voller Breite, darüber und darunter verschwommen fortgesetzt), der Text steht unten im Bedienfeld */
@media (orientation: portrait) {
  body.spiel-modus .wild-szene-voll { top: 50%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); }
  body.spiel-modus .wild-gespraech.mit-szene { display: none; }
}
.pad-text .pt-voll { display: block; text-align: left; }
@keyframes szeneAuf { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.probe-wuerfel canvas { max-width: 94vw; max-height: 92vh; }
/* Kampf am Handy (Rückmeldung Michael 04.10. 09:46: „links die Fertigkeiten zu eng im Querformat; Karte, Menü und Chat brauche ich im Kampf nicht“) */
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-mitte { display: none !important; }
@media (orientation: landscape) {
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever { grid-row: 3 / -1; min-height: 0; }
  /* rechts: Spalten nie breiter als die Seitenspalte (vorher schoben lange Wörter Trank und Fliehen über den Rand) */
  body.spiel-modus .pad-kampf.rund:not(.unter) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.spiel-modus .pad-kampf.rund:not(.unter) .wk.rund { min-width: 0; width: 100%; }
  body.spiel-modus .pad-kampf.rund:not(.unter) .wk.rund .wk-wort { max-width: none; font-size: 7px; }
}
@media (orientation: landscape) and (max-height: 480px) {
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-manoever { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-man { flex: 1 1 auto; min-height: 34px; font-size: 8px; padding: 4px 6px; text-align: center; }
  body.spiel-modus .pad-kampf.rund:not(.unter) { gap: 2px; }
  body.spiel-modus .pad-kampf.rund:not(.unter) .wk.rund { --kreis: clamp(30px, calc((100vh - 96px) / 4), 52px); gap: 2px; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=angriff] { --kreis: clamp(34px, calc((100vh - 96px) / 4 + 8px), 60px); }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=flucht] { --kreis: clamp(26px, calc((100vh - 96px) / 5), 42px); }
  body.spiel-modus .pad-status { font-size: 15px; gap: 2px 6px; padding: 4px 6px; }
  body.spiel-modus .pad-status .ps-wert b { font-size: 14px; }
  body.spiel-modus .pad-status .wald-balken { height: 9px; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-text { font-size: 14px; max-height: 14vh; padding: 2px 6px; }
}

/* Questbuch (Wünsche Michael 04.10.): ein aufgeschlagenes Buch – links Wendelins Chronik, rechts die laufenden Aufträge; schmal: Reiter */
.questbuch-huelle { position: fixed; inset: 0; z-index: 76; display: grid; place-items: center; padding: 10px; background: #0a0806c4; }
.questbuch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: min(980px, 98vw); max-height: 94vh; padding: 14px 14px 52px;
  background: linear-gradient(#5a3418, #3a200e); border-radius: 10px; box-shadow: 0 0 0 3px #2a160a, 0 0 0 5px #c9a24a, 0 18px 40px #000c; animation: neuRolleAuf .5s ease-out; }
.qb-seite { overflow-y: auto; overscroll-behavior: contain; max-height: calc(94vh - 80px); padding: 18px 22px; color: var(--tinte, #2a1a0a); font: 19px/1.35 var(--text);
  background: radial-gradient(ellipse at 50% 30%, #fbf0d0, #ecd8a4 75%, #d8bc7e); }
.qb-chronik { border-radius: 6px 0 0 6px; box-shadow: inset -18px 0 22px -14px #6a4a1a; }
.qb-auftraege { border-radius: 0 6px 6px 0; box-shadow: inset 18px 0 22px -14px #6a4a1a; }
.qb-seite h2 { margin: 0 0 2px; text-align: center; font: 13px/1.5 var(--pixel); color: #7a1a0a; }
.qb-unter { margin: 0 0 10px; text-align: center; font-style: italic; opacity: .75; }
.qb-seite h3 { margin: 16px 0 6px; font: 10px/1.6 var(--pixel); color: #5a3a1a; border-bottom: 1px dashed #a8844a; padding-bottom: 3px; }
.qb-seite h3 span { display: block; font-size: 8px; color: #9a6a3a; letter-spacing: 1px; }
.qb-chronik p { margin: 0 0 8px; text-align: justify; hyphens: auto; }
.qb-chronik h3 + p::first-letter { float: left; margin: 3px 6px 0 0; font: 28px/1 var(--pixel); color: #9a1a0a; text-shadow: 1px 1px 0 #e8c060; }
.qb-zahlen { font-style: italic; opacity: .85; }
.qb-ausblick { margin-top: 14px !important; padding-top: 10px; border-top: 1px solid #a8844a; font-style: italic; color: #4a2a10; }
.qb-tipp { font-size: 17px; color: #7a4a10; } .qb-tipp::before { content: '✒ '; }
.qb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qb-liste li { display: grid; gap: 2px; padding: 6px 8px; background: #fff8e2a8; box-shadow: inset 0 0 0 1px #c9a466; }
.qb-liste li b { font: 9px/1.6 var(--pixel); color: #5a2a0a; } .qb-liste li.bereit b { color: #2a6a1a; }
.qb-liste li span { font-size: 17px; } .qb-liste li i { font-style: normal; color: #7a4a10; }
.qb-liste li.qb-geschichte { background: #f4e8c8c0; box-shadow: inset 0 0 0 1px #a8743a; } .qb-liste li.qb-geschichte button { justify-self: start; margin-top: 4px; }
.qb-leer, .qb-zahl { font-size: 17px; opacity: .85; }
.qb-reiter { display: none; }
.qb-zu { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
@media (max-width: 760px) {
  .questbuch { grid-template-columns: 1fr; padding: 10px 10px 50px; }
  .qb-reiter { display: flex; gap: 6px; margin-bottom: 8px; }
  .qb-reiter button { flex: 1; border: none; padding: 8px; border-radius: 6px 6px 0 0; background: #2a160a; color: #e8c890; font: 9px var(--pixel); cursor: pointer; }
  .qb-reiter button[aria-pressed=true] { background: #ecd8a4; color: #5a2a0a; }
  .qb-seite { border-radius: 6px !important; box-shadow: none !important; max-height: calc(94vh - 110px); padding: 14px 14px; }
  .questbuch[data-seite=chronik] .qb-auftraege, .questbuch[data-seite=auftraege] .qb-chronik { display: none; }
  .qb-chronik p { text-align: left; }
}
/* hochkant: fünf Knöpfe (⛶, Buch, Karte, Menü, Chat) passen in eine Reihe */
@media (orientation: portrait) {
  body.spiel-modus .pad-mitte { gap: 8px; padding-right: 26px; justify-content: center; flex-wrap: nowrap; }
  body.spiel-modus .pad-mitte button { padding: 9px 10px; min-width: 0; }
}

/* Gewand im Heldenzelt (Wunsch Michael 04.10.) */
.gewand-bild { display: flex; gap: 18px; justify-content: center; padding: 8px; background: radial-gradient(circle, #f4e4bc, #d8bc84); box-shadow: inset 0 0 0 2px #a8844a; border-radius: 6px; }
.gewand-bild svg { width: 96px; height: auto; image-rendering: pixelated; }
.gewand-farben { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.gewand-farbe { width: 30px; height: 30px; border: none; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 2px #0004; font: 12px var(--pixel); color: #3a2410; background: #e8d8b0; }
.gewand-farbe.an { box-shadow: 0 0 0 3px #2a160a, 0 0 0 5px var(--gold); }

/* Bild in der Ja/Nein-Frage (feste Orte außerhalb der Wildnis) und Porträt + Szene zusammen (Wunsch Michael 04.10.: zu jedem Gespräch und jeder Probe ein Bild) */
.kauf-szene { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: -4px 0 10px; border-radius: 4px; box-shadow: 0 0 0 2px #5a3a1a; }
.kauf-szene[src^="data:"] { image-rendering: pixelated; }
.wild-gespraech.mit-bild.mit-szene, body.spiel-modus .wild-gespraech.mit-bild.mit-szene { padding-left: 25%; }
.wild-gespraech.mit-bild.mit-szene .wild-sprecher { left: 25%; }

/* Handy hochkant (Rückmeldungen Michael 04.10.): Antworten untereinander statt abgeschnitten nebeneinander; das Szenenbild füllt den ganzen Bildbereich */
@media (orientation: portrait) {
  body.spiel-modus .spiel-pad[data-modus=dialog] .pad-kampf:not(.rund) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.spiel-modus .spiel-pad[data-modus=dialog] .pad-kampf:not(.rund) .wk { min-height: 50px; padding: 6px 12px; }
  body.spiel-modus .spiel-pad[data-modus=dialog] .pad-kampf:not(.rund) .wk span { overflow-wrap: anywhere; }
  body.spiel-modus .wild-szene-voll { top: 0; height: 100%; transform: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
}
/* Bild über dem Textfeld (genau gesetzt in 44-szenen-ueberall.js; das hier ist der Startwert, damit nichts springt) */
.wild-szene-flaeche { bottom: auto; height: 72%; }
@media (orientation: portrait) { body.spiel-modus .wild-szene-flaeche { height: 100%; } }

/* Die Karte Aventuriens (Wunsch Michael 04.10.): Tafel am Lagerfeuer, groß als Pergament */
.aventurien-huelle { position: fixed; inset: 0; z-index: 76; display: grid; place-items: center; padding: 10px; background: #0a0806d0; }
.aventurien { width: min(760px, 98vw); max-height: 96vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: linear-gradient(#5a3418, #3a200e);
  border-radius: 8px; box-shadow: 0 0 0 3px #2a160a, 0 0 0 5px #c9a24a, 0 18px 40px #000c; overflow-y: auto; }
.av-kopf { display: flex; justify-content: space-between; align-items: center; color: #f1dfb4; font: 12px var(--pixel); }
.av-bild { position: relative; width: min(100%, calc(70vh * 100 / 140)); aspect-ratio: 100 / 140; margin: 0 auto; }   /* Seitenverhältnis bleibt, auch wenn die Höhe knapp ist */
.av-bild canvas { width: 100%; height: 100%; display: block; border-radius: 4px; box-shadow: inset 0 0 30px #6a4a1a; }
.av-name { position: absolute; transform: translate(-50%, -50%); font: italic clamp(11px, 1.8vw, 16px) Georgia, serif; color: #4a2a10; letter-spacing: .5px;
  text-shadow: 0 0 3px #f1e2bc, 0 0 6px #f1e2bc; pointer-events: none; white-space: nowrap; }
.av-name.meer { color: #3a5a7a; font-size: clamp(9px, 1.4vw, 13px); writing-mode: vertical-rl; }
.av-gebiet { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: #f1e2bcdd; color: #5a3a1a; font: 14px var(--pixel); box-shadow: 0 0 0 2px #5a3a1a; cursor: pointer; }
.av-gebiet.frei { background: #b8341e; color: #fff4d8; box-shadow: 0 0 0 2px #5a1a0a, 0 0 12px #ff8a5a; animation: avPuls 2s ease-in-out infinite; }
.av-gebiet.an { outline: 3px solid var(--gold); }
.av-gebiet i { position: absolute; top: 100%; margin-top: 3px; font: 8px var(--pixel); font-style: normal; color: #4a2a10; white-space: nowrap; text-shadow: 0 0 3px #f1e2bc; }
@keyframes avPuls { 50% { box-shadow: 0 0 0 2px #5a1a0a, 0 0 22px #ffb07a; } }
.av-text { padding: 8px 12px; background: radial-gradient(ellipse at 50% 30%, #fbf0d0, #ecd8a4); color: var(--tinte, #2a1a0a); font: 18px/1.3 var(--text); border-radius: 4px; }
.av-text b { font: 10px/1.6 var(--pixel); color: #7a1a0a; } .av-text p { margin: 4px 0; } .av-klein { font-size: 15px; opacity: .8; }

.wald-episch { display: block; width: 100%; border-radius: 6px; box-shadow: 0 0 0 3px #4a1a0a, 0 0 18px #c8401a88; margin-bottom: 8px; }

/* Szenenbild als feste Ebene, Proben im Feld darunter (47-szene-ebene.js; Rückmeldung Michael 04.10. abends: „das Bild soll erst über der Textbox anfangen,
   die Probe darf im gleichen Fenster stattfinden“, „beim Weiterklicken blitzt das Bild weg“) */
#wildSzene { z-index: 3; }
.wild-probe-feld { position: absolute; left: 2%; right: 2%; bottom: 2.5%; z-index: 4; cursor: pointer; touch-action: none; }
.wild-probe-feld[hidden] { display: none; }
.raum .wild-probe-feld canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; box-shadow: 0 0 0 3px #3a220f, 4px 4px 0 3px #0006; }
body.spiel-modus .wild-probe-feld { bottom: 2%; }
#raum:has(#wildProbe:not([hidden]), #wildSzene:not([hidden])) :is(.wild-chat, .wirt-box, .wirt-wieder) { display: none; }
#raum:has(.wild-gespraech) :is(.wirt-box, .wirt-wieder) { display: none; }
/* PC: die Reiterleiste des Spielmenüs bleibt oben in der rechten Spalte stehen, auch wenn darunter gescrollt wird (Rückmeldung Michael 04.10.: „die Menüleiste oben rechts ist hinüber“) */
@media (min-width: 1100px) {
  body.in-wildnis:not(.kinder-modus) #inhalt .spiel-kopf { position: sticky; top: 0; z-index: 2; padding: 6px 0; background: var(--pergament); box-shadow: 0 -12px 0 var(--pergament), 0 2px 0 #c9a466; }
}
/* Einführung mit großen Bildern wie in Drakensang (48-erzaehlung-bilder.js, Wunsch Michael 04.10.) */
.erzaehlung.mit-bild { place-items: stretch; padding: 0; background: #050403; }
.erz-titelbild, .erz-bildseite { position: fixed; inset: 0; overflow: hidden; cursor: pointer; background: #050403; }
.erz-titelbild > img { width: 100%; height: 100%; object-fit: cover; animation: erzFahrt 26s ease-out forwards; }
.erz-titelbild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(5, 4, 3, .7), transparent 40%, transparent 72%, rgba(5, 4, 3, .75)); }
.erz-titel { position: absolute; left: 0; right: 0; top: 7%; z-index: 1; display: grid; justify-items: center; gap: 14px; text-align: center; animation: erzTitel 2.6s ease-out; }
.erz-titel b { font: clamp(28px, 6vw, 64px)/1.2 var(--pixel); color: var(--gold); letter-spacing: .08em; text-shadow: 0 0 22px #000, 3px 3px 0 #2a1a0c; }
.erz-titel span { font: clamp(14px, 2.6vw, 28px)/1.4 var(--pixel); color: #ffe9b0; text-shadow: 0 0 14px #000, 2px 2px 0 #2a1a0c; }
.erz-titelbild > i { position: absolute; left: 0; right: 0; bottom: 4%; z-index: 1; text-align: center; font: 20px var(--text); color: #ffe9b0; animation: wild-blinken 1.6s steps(2) infinite; }
.erz-bildseite { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
.erz-grund { position: absolute; left: -5%; top: -5%; width: 110%; height: 110%; object-fit: cover; filter: blur(18px) brightness(.35); }
.erz-gemaelde { position: relative; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; box-shadow: 0 0 40px #000;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.erz-gemaelde img { width: 100%; height: 100%; object-fit: cover; animation: erzFahrt 26s ease-out forwards; }
.erz-box.erz-unten { position: relative; grid-template-columns: 1fr; width: min(900px, calc(100% - 24px)); margin: -34px 0 16px; box-shadow: 0 0 0 3px #3a220f, 0 10px 30px #000c; }
.erz-unten .erz-text p { min-height: 3.7em; }
@media (orientation: portrait) { .erz-gemaelde { height: auto; width: 100%; align-self: center; } }
@keyframes erzFahrt { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes erzTitel { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* Michaels Aventurien-Karte als Bild (46-aventurien-karte.js): eigenes Titelschild, Legende und Kartusche über den übermalten Stellen */
.av-bild.foto { width: min(100%, calc(72vh * 880 / 1194)); aspect-ratio: 880 / 1194; container-type: inline-size; }   /* Schrift wächst mit der Karte (cqw) */
.av-bild.foto img { display: block; width: 100%; height: 100%; border-radius: 4px; }
.av-titel { position: absolute; left: 5.2%; top: 3.6%; width: 30%; padding: .5em 0; text-align: center; background: linear-gradient(#3a2414, #24140a); color: var(--gold);
  font: 2.6cqw var(--pixel); letter-spacing: .05em; white-space: nowrap; box-shadow: 0 0 0 2px #c9a466, 0 0 0 4px #3a2414; }
.av-legende { position: absolute; left: 6%; top: 78.5%; width: 15.5%; padding: .4em .5em; background: #f1e2bcd8; color: #3a220f; font: 2.9cqw/1.25 var(--text);
  box-shadow: 0 0 0 1px #6a4a2a; }
.av-legende b { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: #b8341e; color: #fff4d8; font-size: .85em; }
.av-legende b.zu { background: #5a4a3a; }
.av-kartusche { position: absolute; left: 65%; top: 81%; width: 29.5%; display: grid; gap: .3em; padding: .7em .6em; text-align: center; background: linear-gradient(#f4e6c0, #e2cb94);
  color: #3a220f; font: 3cqw/1.2 var(--text); box-shadow: 0 0 0 2px #6a4a2a, 0 0 0 5px #3a2414, 3px 3px 8px #0006; }
.av-kartusche b { font: 2.3cqw/1.4 var(--pixel); color: #7a1a0a; }
.av-kartusche i { font-size: .72em; opacity: .75; font-style: normal; }
/* Wetter je Jahreszeit und Feuerwerk an Silvester (49-aventurien-zeit.js): leichte Ebene über dem Bild, unter den Auflagen */
.wetter { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; container-type: size; }
.wetter i { position: absolute; left: var(--x); top: -3%; width: calc(var(--s, 2) * 2px); height: calc(var(--s, 2) * 2px); animation: wetterSchnee var(--d) linear var(--v) infinite; }
.wetter-laub i { width: calc(var(--s, 2) * 3px); height: calc(var(--s, 2) * 2px); border-radius: 0 60%; background: #c8661e; animation-name: wetterLaub; }
.wetter-laub i:nth-child(3n) { background: #a8401a; } .wetter-laub i:nth-child(3n + 1) { background: #d8a02a; } .wetter-laub i:nth-child(5n) { background: #7a5a2a; }
.wetter-schnee i { background: #f4f8ff; border-radius: 50%; opacity: .85; }
.wetter-schnee i:nth-child(2n) { width: calc(var(--s, 2) * 1px); height: calc(var(--s, 2) * 1px); opacity: .7; }
.wetter-regen { background: #10203018; }
.wetter-regen i { width: 1px; height: calc(var(--s, 2) * 7px); background: linear-gradient(transparent, #b0c8e8b0); animation-name: wetterRegen; }
.wetter-blueten i { width: calc(var(--s, 2) * 2.5px); height: calc(var(--s, 2) * 2px); background: #ffc8dc; border-radius: 60% 0; animation-name: wetterLaub; } .wetter-blueten i:nth-child(3n) { background: #fff4f8; }
.wetter-gluehwuermchen i { top: calc(30% + var(--y) * .65); width: calc(var(--s, 2) * 1px); height: calc(var(--s, 2) * 1px); border-radius: 50%; background: #eaff9a;
  box-shadow: 0 0 calc(var(--s, 2) * 3px) calc(var(--s, 2) * 1px) #c8ff4a90; animation: wetterGlimmen var(--d) ease-in-out var(--v) infinite; }
.wetter-feuerwerk i { top: calc(4% + var(--y) * .3); width: calc(var(--s, 2) * 1px); height: calc(var(--s, 2) * 1px); border-radius: 50%; background: currentColor;
  color: hsl(calc(var(--f) * 90deg + 10deg) 95% 65%); animation: wetterFeuerwerk var(--d) ease-out var(--v) infinite; }
@keyframes wetterSchnee { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--w), 55cqh); } 100% { transform: translate(calc(var(--w) * -.3), 108cqh); } }
@keyframes wetterLaub { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(calc(var(--w) * .6), 27cqh) rotate(90deg); } 50% { transform: translate(calc(var(--w) * -.3), 54cqh) rotate(180deg); }
  75% { transform: translate(var(--w), 81cqh) rotate(270deg); } 100% { transform: translate(calc(var(--w) * .2), 108cqh) rotate(360deg); } }
@keyframes wetterRegen { to { transform: translate(-12px, 110cqh); } }
@keyframes wetterGlimmen { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(var(--w), -12px); } }
@keyframes wetterFeuerwerk { 0% { opacity: 0; transform: scale(.2); } 8% { opacity: 1; transform: scale(1); box-shadow: none; }
  45% { opacity: 1; box-shadow: 0 -2.2em currentColor, 1.6em -1.6em currentColor, 2.2em 0 currentColor, 1.6em 1.6em currentColor, 0 2.2em currentColor, -1.6em 1.6em currentColor, -2.2em 0 currentColor, -1.6em -1.6em currentColor; }
  100% { opacity: 0; box-shadow: 0 -3.4em transparent, 2.4em -2.4em transparent, 3.4em 0 transparent, 2.4em 2.4em transparent, 0 3.4em transparent, -2.4em 2.4em transparent, -3.4em 0 transparent, -2.4em -2.4em transparent; } }
@media (prefers-reduced-motion: reduce) { .wetter { display: none; } }
/* Steckbriefe im Dorf (29-wildnis-menue.js) */
.steckbriefe { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.steckbrief { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; text-align: center; background: radial-gradient(ellipse at 40% 30%, #f6e8c4, #dcc28c);
  color: #3a220f; box-shadow: 0 0 0 1px #8a6a3a, 2px 3px 0 #0004; transform: rotate(-1deg); font: 15px/1.1 var(--text); }
.steckbrief:nth-child(2n) { transform: rotate(1.2deg); }
.steckbrief b { font: 9px var(--pixel); color: #8a1a0a; letter-spacing: .1em; }
.steckbrief span { font-weight: bold; } .steckbrief i { font-size: 13px; opacity: .8; }
.steckbrief em { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-16deg); padding: 2px 8px; border: 2px solid #a0201a; color: #a0201a;
  font: 10px var(--pixel); font-style: normal; background: #f6e8c4c0; }
.steckbrief.gestellt svg { opacity: .55; }
.spiel-datum { margin: 0 0 4px; font: 15px/1.2 var(--text); color: #6a4a2a; font-style: italic; }
#raum:has(.wild-meldung) .wild-chat { display: none; }   /* die Meldung beim Betreten liegt sonst über dem Chat */
/* Hineinzoomen in die bespielbaren Gebiete (46-aventurien-karte.js) */
.aventurien.zoomt { overflow: hidden; }
.av-bild.foto { transition: transform 1s ease-in, opacity 1s ease-in; }
.av-bild.foto.zoomt { transform: scale(5); opacity: 0; }
.av-bild.foto.rauszoomen { animation: avRaus .8s ease-out; }
.av-region { max-height: min(70vh, 640px); overflow: auto; padding: 8px; border-radius: 4px; background: radial-gradient(ellipse at 50% 30%, #fbf0d0, #ecd8a4); color: var(--tinte, #2a1a0a); animation: avRegionAuf .6s ease-out; }
@keyframes avRegionAuf { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes avRaus { from { transform: scale(3); opacity: 0; } to { transform: none; opacity: 1; } }
body.in-wildnis #raum:has(.wild-kampf-unten) :is(.wirt-box, .wirt-wieder) { display: none; }   /* im Kampf redet der Wirt nicht dazwischen */
.wild-gespraech.mit-szene, body.spiel-modus .wild-gespraech.mit-szene { min-height: 17%; }   /* mit Bild: das Textfeld nur so hoch wie nötig, das Bild bekommt den Rest */
/* Kampf am Handy hochkant (Rückmeldung Michael 05.10.: „links die Fähigkeiten, rechts die Knöpfe, mittig in der unteren Bildschirmhälfte“) */
@media (orientation: portrait) {
  body.spiel-modus .spiel-pad[data-modus=kampf] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "status status" "text text" "man akt"; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever { grid-area: man; align-self: center; flex-direction: column; min-height: 0; max-height: 100%; overflow-y: auto; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .pad-faehig { display: none; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-manoever { display: flex; position: static; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; background: none; box-shadow: none; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-manoever .wk-man { font-size: 9px; padding: 10px 8px; text-align: left; }
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-aktionen { grid-area: akt; align-self: center; align-content: center; }
  body.spiel-modus .pad-kampf.rund:not(.unter) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". schicksal ." "zauber talent trank" ". angriff ." ". . flucht";
    gap: 6px 2px; justify-items: center; align-items: start; }
  body.spiel-modus .pad-kampf.rund:not(.unter) .wk.rund { --kreis: clamp(44px, 14vw, 62px); }
  body.spiel-modus .pad-kampf.rund:not(.unter) .wk.rund .wk-wort { font-size: 8px; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=angriff] { grid-area: angriff; --kreis: clamp(54px, 18vw, 76px); }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=zauber] { grid-area: zauber; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=trank] { grid-area: trank; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=talent] { grid-area: talent; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=schicksal] { grid-area: schicksal; }
  body.spiel-modus .pad-kampf.rund:not(.unter) [data-wild-kampf=flucht] { grid-area: flucht; --kreis: clamp(36px, 11vw, 48px); opacity: .9; }
}
.probe-wuerfel.unten { place-items: end center; padding-bottom: 12vh; background: rgba(4, 3, 2, .25); }   /* hochkant: Würfel unter dem Bild, das Bild zeigt die Szenen-Ebene */

/* ausführliche Befragung bei der Heldenerschaffung (29-wildnis-befragung.js) */
.ersch-fortschritt { height: 6px; margin: 4px 0 10px; background: #00000030; border-radius: 3px; overflow: hidden; }
.ersch-fortschritt i { display: block; height: 100%; background: #c8962a; }
.ersch-antwort.gewaehlt { outline: 2px solid #c8962a; }
.ersch-weiter { margin-top: 10px; }
.ersch-tief-info { background: #00000014; border-left: 3px solid #c8962a; padding: 6px 10px; }

/* Krankheit/Gift (51-gesundheit.js) */
.spiel-gesundheit { border-left: 3px solid #8a3a2a; padding: 4px 10px; margin: 8px 0; background: #8a3a2a14; }
.wild-wert.wild-krank b { color: #c8e07a; font-size: .85em; }

/* Abenteuer mit Kapiteln und Entscheidungen (52-abenteuer.js) – unter dem Würfelfenster (.probe-wuerfel 92) */
.abenteuer { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 12px; background: rgba(4, 6, 10, .72); }
.ab-buch { width: min(900px, 100%); max-height: calc(100vh - 24px); display: flex; flex-direction: column; background: var(--pergament); color: #2a1e14; border: 3px solid #5a3a20; border-radius: 6px; box-shadow: 0 10px 40px #000a; overflow: hidden; }
@supports (height: 100dvh) { .ab-buch { max-height: calc(100dvh - 24px); } }   /* iOS mit eingeblendeter Leiste: unten nichts abschneiden */
.ab-bild { position: relative; flex: none; aspect-ratio: 16 / 9; max-height: 42vh; background: #0a0806; overflow: hidden; }
.ab-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-bild.leer { aspect-ratio: auto; padding: 10px 14px; background: #3a2414; }
.ab-bild b { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 14px 8px; font-family: 'Press Start 2P', monospace; font-size: 12px; color: #f4e8c8; background: linear-gradient(transparent, #000c); text-shadow: 1px 1px 0 #000; }
.ab-bild.leer b { position: static; background: none; padding: 0; }
.ab-seite { padding: 12px 18px 14px; overflow: auto; font-size: 18px; line-height: 1.35; }
.ab-seite p { margin: 0 0 8px; }
.ab-unter { font-style: italic; opacity: .8; }
.ab-klein { font-size: 15px; opacity: .8; }
.ab-log { margin: 0 0 10px; padding: 6px 10px; background: #0000000f; border-left: 3px solid #8a6a30; font-size: 15px; }
.ab-log p { margin: 2px 0; }
.ab-wahl { display: grid; gap: 6px; margin-top: 10px; }
.ab-antwort { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; text-align: left; padding: 8px 10px; border: 2px solid #8a6a40; border-radius: 4px; background: #f8efd8; color: inherit; font: inherit; font-size: 17px; cursor: pointer; }
.ab-antwort:hover:not(:disabled) { background: #fff6e0; border-color: #c8962a; }
.ab-antwort:disabled { opacity: .55; cursor: default; }
.ab-antwort.kampf { border-color: #8a2a1a; background: #f4dcd0; }
.ab-nr { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #5a3a20; color: #f4e8c8; font-size: 13px; }
.ab-probe { font-size: 14px; opacity: .75; font-style: normal; }
.ab-fuss { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ab-ende { margin-top: 10px; padding: 8px; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.5; }
.ab-ende.gut { color: #2e6a2a; } .ab-ende.schlecht { color: #8a2a1a; }
.ab-fehler { color: #8a2a1a; }
.ab-karten { display: grid; gap: 8px; margin-bottom: 10px; }
.ab-karte { padding: 8px 10px; border: 2px solid #8a6a40; border-radius: 4px; background: #00000008; }
.ab-karte span { display: block; font-size: .9em; opacity: .8; }
.ab-karte p { margin: 6px 0; font-size: .95em; }
.ab-haken { color: #2e6a2a; }
@media (max-width: 600px) { .ab-seite { font-size: 16px; padding: 10px 12px; } .ab-antwort { font-size: 15px; } }
.ab-bild.titel { max-height: 55vh; }
.ab-bild.titel img { object-fit: contain; }
/* Abnutzung (54-abnutzung.js): Warnschilder ab 75 %, ab 90 % rot */
.wild-zustand.bruechig { background: #a8641a; } .wild-zustand.bruechig.kritisch { background: #b8322a; }
.wild-hud-ich .wild-zustand { margin-left: 4px; } .pad-abnutzung { display: block; margin-top: 2px; } .pad-abnutzung[hidden] { display: none; }
.spiel-guertel.reparatur small { display: block; opacity: .75; }

/* Sparmodus und Bildrate (56-sparmodus.js) */
.bildrate { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: none; font: 14px VT323, monospace; color: #fff6c8; background: rgba(20, 12, 8, .7); padding: 0 6px; border-radius: 3px; }
.grafik-einstellung { display: grid; gap: 6px; padding: 4px 0; }
.grafik-wahl { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.grafik-wahl small { opacity: .75; }
/* Golgari, Träume, Vorlesetext, Erfahrungsgrad (61-dsa-stimmung.js, 52-abenteuer.js) */
.wild-box.ohnmacht.golgari { padding: 0; width: min(92%, 560px); overflow: hidden; gap: 0; }
.golgari-bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; animation: golgari-ein 2.4s ease-out; }
.golgari-text { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px 14px 12px; }
.golgari-erzaehlung { font-style: italic; color: #e8dcc8; line-height: 1.35; }
.golgari-log { font-size: .9em; opacity: .75; }
@keyframes golgari-ein { from { filter: brightness(0) blur(4px); } to { filter: none; } }
.traum { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(ellipse at center, #1a1630e6, #05040ae6); animation: traum-ein 1.6s ease-out; padding: 16px; }
.traum-blatt { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; color: #e8e0f4; font: 20px/1.4 VT323, monospace; }
.traum-blatt img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; filter: saturate(.85) contrast(.95); box-shadow: 0 0 40px #8a7ad866; animation: traum-schweben 9s ease-in-out infinite alternate; }
.traum-blatt b { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #c8b8ff; letter-spacing: 1px; }
.traum-blatt p { margin: 0; font-style: italic; }
@keyframes traum-ein { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; } }
@keyframes traum-schweben { from { transform: scale(1); } to { transform: scale(1.03) translateY(-4px); } }
.ab-vorlesen { position: relative; margin: 2px 0 10px; padding: 18px 14px 6px 16px; border: 1px solid #8a6a3a; border-left: 4px solid #7a2a1a; background: #f4e6c4; box-shadow: inset 0 0 0 3px #f4e6c4, inset 0 0 0 4px #c8a8708a; }
.ab-vorlesen::before { content: 'Zum Vorlesen oder Nacherzählen'; position: absolute; top: 3px; left: 16px; font: 9px 'Press Start 2P', monospace; color: #7a2a1a; letter-spacing: .5px; opacity: .8; }
.ab-vorlesen p:first-child::first-letter { float: left; font: 2.6em/0.9 'Press Start 2P', monospace; color: #7a2a1a; margin: 4px 8px 0 0; text-shadow: 1px 1px 0 #e8c87a; }
.spiel-klein.erfahrungsgrad b { color: #8a5a1a; }
@media (prefers-reduced-motion: reduce) { .golgari-bild, .traum, .traum-blatt img { animation: none; } }
/* Boltan (62-boltan.js) */
.boltan { position: fixed; inset: 0; z-index: 84; display: grid; place-items: center; background: #0a0604cc; padding: 12px; }
.boltan-blatt { width: min(620px, 100%); max-height: calc(100vh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 8px; background: var(--pergament); color: #2a1e14; border: 3px solid #5a3a20; border-radius: 6px; box-shadow: 0 10px 40px #000a; padding: 0 0 12px; font: 19px/1.3 VT323, monospace; }
.boltan-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; max-height: 34vh; }
.boltan-titel { font: 12px 'Press Start 2P', monospace; color: #5a2a10; padding: 0 14px; }
.boltan-klein { margin: 0 14px; font-size: 16px; opacity: .85; }
.boltan-tisch { margin: 0 14px; padding: 10px; background: #2e5a34; border: 3px solid #5a3a20; border-radius: 6px; display: grid; gap: 10px; color: #f0e6c8; }
.boltan-tisch.leer { text-align: center; }
.boltan-reihe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.boltan-reihe > span { min-width: 120px; }
.boltan-karte { width: 40px; height: 58px; border-radius: 4px; background: #f8f0dc; border: 2px solid #5a3a20; color: var(--farbe); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 2px 2px 0 #0006; animation: boltan-karte .25s ease-out; }
.boltan-karte b { font: 12px 'Press Start 2P', monospace; } .boltan-karte i { font-style: normal; font-size: 22px; line-height: 1; }
.boltan-karte.verdeckt { background: repeating-linear-gradient(45deg, #7a2a1a 0 4px, #5a1a10 4px 8px); }
@keyframes boltan-karte { from { transform: translateY(-14px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.boltan-meldung { margin: 0 14px; padding: 6px 10px; border-left: 4px solid #8a6a3a; background: #f4e6c4; }
.boltan-meldung.gewonnen, .boltan-meldung.boltan { border-color: #2a7a2a; } .boltan-meldung.verloren, .boltan-meldung.erwischt { border-color: #a8282a; }
.boltan-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
@media (prefers-reduced-motion: reduce) { .boltan-karte { animation: none; } }
/* Mehrere Helden (63-helden.js) */
.helden-liste { margin: 10px 0 4px; padding: 8px 10px; border: 2px solid #8a6a3a; border-radius: 4px; background: #f4e6c455; display: grid; gap: 6px; }
.helden-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.helden-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; }
.helden-zeile.aktiv { opacity: .8; }
.helden-knoepfe { display: flex; gap: 6px; align-items: center; }
.helden-weiter { margin: 0 0 10px; }
.boltan-gaeste { margin: 4px 14px 0; padding: 8px 10px; border-top: 2px dashed #8a6a3a; display: grid; gap: 6px; }
.boltan-gaeste select { font: inherit; }
/* Bücherregal (64-aventurien.js) */
.buecher-blatt:not(:has(> .boltan-bild)) { padding-top: 12px; }
.buecher-blatt .ab-vorlesen { margin: 0 14px; }
.buecher-liste { list-style: none; margin: 0 14px; padding: 0; display: grid; gap: 4px; }
.buecher-liste button { width: 100%; text-align: left; font: inherit; background: #f4e6c4; color: #2a1e14; border: 2px solid #8a6a3a; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.buecher-liste button:hover, .buecher-liste button:focus-visible { background: #fff4d8; border-color: #5a3a20; }
.wild-hud-knoepfe button[data-stabflamme].an { background: #8a4a1a; color: #ffe8a0; }
/* während einer Probe: Stick und A/B unsichtbar und nicht antippbar (Rückmeldung Michael 06.10.) */
body.spiel-modus .spiel-pad[data-modus=probe] :is(.pad-stick, .pad-ab) { visibility: hidden; pointer-events: none; }

/* Helligkeit und Kontrast des Spielbilds (56-sparmodus.js) */
#leinwand, #wildSzene img, .wild-szene-flaeche img, #teleskop, .probe-wuerfel canvas, .wild-probe-feld canvas { filter: brightness(var(--spiel-hell, 1)) contrast(var(--spiel-kontrast, 1)); }
.bild-regler { display: grid; gap: 6px; margin: 8px 0; flex-basis: 100%; width: 100%; max-width: 460px; }
.bild-regler label { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3.5em; align-items: center; gap: 8px; }
.bild-regler input[type=range] { width: 100%; accent-color: #8a5530; }
.bild-regler .knopf { justify-self: start; }
/* Zielauswahl im Kampf am Handy/Tablet (Rückmeldungen 06.10.: quer rutschten die Knöpfe nach rechts, hochkant lag sie über dem Text) */
.pad-ziel { min-width: 0; }
.pad-ziel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.spiel-modus .spiel-pad[data-modus=kampf] .pad-aktionen > * { min-width: 0; }
@media (orientation: landscape) {
  body.spiel-modus .pad-ziel { gap: 4px; font-size: 13px; }
  body.spiel-modus .pad-ziel button { width: 38px; height: 34px; flex: none; }
}
@media (orientation: portrait) {
  body.spiel-modus .spiel-pad[data-modus=kampf] .pad-aktionen { align-self: stretch; align-content: safe center; overflow-y: auto; }
  body.spiel-modus .pad-ziel { gap: 6px; font-size: 14px; }
  body.spiel-modus .pad-ziel button { width: 44px; height: 38px; flex: none; }
}
/* Inventar mit Figur und Rucksack (65-inventar.js) */
.inventar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px 18px; align-items: start; margin-bottom: 8px; }
.inv-figur { width: 100%; max-width: 340px; justify-self: center; }
.inv-figur { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 45%, #fbf1d6, #ead6aa 72%, #d8bd86); border: 2px solid #8a6a3a; border-radius: 6px; box-shadow: inset 0 0 18px #a8844a66; }
.inv-vitruv { position: absolute; inset: 0; width: 100%; height: 100%; }
.inv-slot { position: absolute; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border: none; border-radius: 4px;
  background: #2a2018; box-shadow: inset 0 0 0 2px #6b4428, 0 2px 0 #0006; cursor: pointer; }
.inv-slot.sel1 { box-shadow: inset 0 0 0 2px #5a9aff, 0 2px 0 #0006; } .inv-slot.sel2 { box-shadow: inset 0 0 0 2px #f2c14e, 0 2px 0 #0006; } .inv-slot.sel3 { box-shadow: inset 0 0 0 2px #d8843a, 0 2px 0 #0006; }
.inv-slot.leer { background: #2a201855; cursor: default; } .inv-slot.leer svg { opacity: .3; filter: grayscale(1); }
.inv-slot.gewaehlt { outline: 3px solid var(--rot); outline-offset: -1px; }
.inv-slot svg { width: 72%; height: auto; }
.inv-slot small { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); font: 7px var(--pixel); color: #5a3a1a; white-space: nowrap; pointer-events: none; }
.inventar:not(.im-kampf) [data-inv-ding] { touch-action: none; }
.inv-rucksack { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); border-radius: 4px; padding: 3px; }
.inv-rucksack .rucksack-feld svg { width: 76%; height: auto; }
.inv-passt { box-shadow: inset 0 0 0 2px #8aff8a, 0 0 12px #8aff8a !important; }
.inv-hier { outline: 3px solid var(--gold) !important; outline-offset: 2px; }
.inv-falsch { animation: invFalsch .35s; }
@keyframes invFalsch { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
.inv-zieht { opacity: .35; }
.inv-geist { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: grid; place-items: center; border-radius: 6px; background: #2a2018dd; box-shadow: 0 8px 18px #000a, 0 0 0 2px var(--gold); }
.inv-geist svg { width: 76%; height: auto; }

/* Boltan am Tablet quer (Rückmeldung Michael 06.10.: „geht nicht weiter, die Ansicht passt nicht“ – die Knöpfe lagen unter dem sichtbaren Bereich) */
.boltan-knoepfe { position: sticky; bottom: 0; z-index: 1; padding-top: 10px; padding-bottom: 2px; background: linear-gradient(transparent, var(--pergament) 10px); }
@media (orientation: landscape) and (max-height: 820px) {
  .boltan-blatt:has(> .boltan-bild) { position: relative; width: min(900px, 100%); padding-left: calc(36% + 4px); }
  .boltan-blatt > .boltan-bild { position: absolute; left: 0; top: 0; width: 36%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
  .boltan-blatt { padding-top: 10px; }
  .boltan-karte { width: 34px; height: 50px; }
  .boltan-tisch { padding: 8px; gap: 6px; }
}

/* Feine Heldenfigur – Probe (66-feine-figur.js): eigene Leinwand mit 4 Punkten je Spieleinheit über dem Spielbild */

/* ---- Heldenkarte in der rechten Spalte (72-heldenkarte.js, Wunsch Michael 06.10.) ---- */
.hk { display: grid; gap: 7px; margin: 2px 0 10px; }
.hk-kopf { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px; background: linear-gradient(#fffaf0, #f1dfb4); box-shadow: 0 0 0 2px #8a5530, 0 0 0 4px #c9a466; }
.hk-rahmen { width: 64px; height: 80px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 30%, #6a7a6a, #1e2a24 78%); box-shadow: inset 0 0 0 2px #c8912a, 0 0 0 2px #3a220f, inset 0 0 0 4px #3a220f; }
.hk-rahmen img { width: 64px; height: 80px; image-rendering: pixelated; }   /* 2 × 32 × 40: ganzzahlig */
.hk-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hk-name b { font: 11px/1.5 var(--pixel); color: var(--tinte); overflow-wrap: anywhere; }
.hk-name span { font: 17px/1 var(--text); color: #5a3a1e; }
.hk-name .hk-grad { color: #8a5530; }
.hk-name .hk-grad small { font-size: 14px; opacity: .8; }
.hk-name .hk-datum { font-size: 14px; opacity: .75; }
.hk-ap { display: grid; place-items: center; align-content: center; width: 58px; height: 58px; border-radius: 50%; color: #3a220f; text-align: center;
  background: radial-gradient(circle at 35% 30%, #f8dc7a, #c8912a 58%, #8a5a1a); box-shadow: 0 0 0 2px #3a220f, inset 0 -4px 0 #6a4012, inset 0 3px 0 #fff2b0; }
.hk-ap b { font: 14px/1 var(--pixel); }
.hk-ap small { font: 13px/1 var(--text); }
.hk-balken, .hk-schips { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.hk-schips { grid-template-columns: 62px 1fr; }
.hk-balken em, .hk-schips em { font: 7px/1.4 var(--pixel); font-style: normal; color: #8a5530; }
.hk-balken > span { position: relative; height: 13px; overflow: hidden; background: #2a1a10; box-shadow: 0 0 0 2px #3a220f, inset 0 3px 0 #00000066; }
.hk-balken > span i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#f07a64, #b8412c 55%, #7a2418); box-shadow: inset 0 2px 0 #ffffff55; }
.hk-asp > span i { background: linear-gradient(#8ac0f8, #3a6bd6 55%, #1e3a7a); }
.hk-ruhm > span i { background: linear-gradient(#f8dc7a, #c8912a 55%, #7a4a12); }
.hk-balken b { min-width: 58px; font: 18px/1 var(--text); font-weight: normal; text-align: right; white-space: nowrap; }
.hk-schips span { display: flex; flex-wrap: wrap; gap: 5px; }
.hk-schips span i { width: 15px; height: 15px; border-radius: 50%; background: #5a4a3a; box-shadow: 0 0 0 2px #3a220f, inset 0 -2px 0 #2a1e14; }
.hk-schips span i.voll { background: radial-gradient(circle at 35% 30%, #fff2b0, #e8b83a 45%, #a8741a); box-shadow: 0 0 0 2px #3a220f, inset 0 -2px 0 #7a4a12; }
.hk-eig { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.hk-eig span { display: flex; flex-direction: column; align-items: center; padding: 6px 2px 7px; color: var(--tinte);
  background: radial-gradient(circle at 50% 28%, #fffaf0, #ead2a0 75%); box-shadow: 0 0 0 2px #8a5530, inset 0 -3px 0 #d3b47a;
  border-radius: 8px 8px 50% 50% / 8px 8px 38% 38%; }
.hk-eig i { font: 7px/1.5 var(--pixel); font-style: normal; color: #8a5530; }
.hk-eig b { font: 25px/1 var(--text); font-weight: normal; }
.hk-kampf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hk-kachel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 5px; padding: 5px 7px; color: #f1dfb4;
  background: linear-gradient(#4a3424, #2e2016); box-shadow: 0 0 0 2px #140a04, inset 0 0 0 1px #7a5a3a; }
.hk-kachel .sym { grid-row: span 2; display: flex; }
.hk-kachel i { font: 7px/1.4 var(--pixel); font-style: normal; color: #d8b070; }
.hk-kachel b { font: 19px/1 var(--text); font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-kachel:not(:has(.sym)) { grid-template-columns: minmax(0, 1fr); }
.hk-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 4px 8px; font-size: 17px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; }
.hk-geld { color: #8a5a1a; }

/* Lager im DS-Stil (73-lager-ds.js): Aschenschwinge schläft auf dem Schatz */
.lager-drache { display: block; image-rendering: pixelated; filter: brightness(.78) saturate(.9); }

/* Einstellungen an einem Ort (74-einstellungen.js; Feedback Michael 06.10.): Reiter im Spielmenü und „Ton“ in den Einstellungen der Taverne */
.einstellungen-spiel { display: grid; gap: 4px; }
.einst-teil { padding: 2px 0 8px; border-bottom: 2px dashed #c9a466; }
.einst-teil:last-child { border-bottom: none; }
.einst-teil h4 { margin: 8px 0 6px; }
.einst-teil .bild-regler { margin: 0; }
.einst-gruppe { display: grid; gap: 6px; max-width: 460px; }
.einst-zeile { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3.5em; align-items: center; gap: 8px; font-size: 18px; }
.einst-zeile:has(select) { grid-template-columns: auto minmax(0, 12em); }
.einst-zeile input[type=range] { width: 100%; accent-color: #8a5530; }
.einst-zeile select { font: 17px var(--text); padding: 2px 4px; }
.einst-haken { display: flex; gap: 6px; align-items: center; font-size: 18px; }
.einst-hinweis { margin: 0; font-size: 15px; opacity: .7; line-height: 1.05; }
.klang-regler [data-einst-alle] { justify-self: start; margin-top: 2px; }
@media (pointer: coarse) { .einst-zeile input[type=range], .bild-regler input[type=range] { min-height: 32px; } .einst-haken input, .grafik-wahl input { width: 22px; height: 22px; } }

/* Inventar: gemalte Figur aus Gemini (65-inventar.js, Wunsch Michael 07.10.) */
.inv-figur.gemalt { background: #e9d6ac; overflow: hidden; }
.inv-bild { object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.inv-figur.gemalt .inv-slot.leer { background: #2a201870; box-shadow: inset 0 0 0 2px #5a3a1acc; }
.inv-figur.gemalt .inv-slot.leer svg { opacity: .5; }
.inv-figur.gemalt .inv-slot small { color: #3a2410; text-shadow: 0 0 2px #f4e6c4, 0 0 2px #f4e6c4; }
/* Helm, Amulett, Rüstung stehen auf dem gemalten Bild genau übereinander – ihre Beschriftung rechts daneben statt darunter (sonst unter dem nächsten Platz) */
.inv-figur.gemalt .inv-slot { width: 14%; }   /* Helm, Amulett, Rüstung liegen 16 % auseinander – kleinere Felder lassen Luft (sonst verdeckt der Helm das Amulett) */
.inv-figur.gemalt .inv-slot:is([data-inv-platz=helm], [data-inv-platz=amulett], [data-inv-platz=ruestung]) small { top: 50%; left: calc(100% + 3px); transform: translateY(-50%); }

/* Silberhüter-Stein im Lager (75-lager-stein.js): die Runen glimmen */
.lager-stein-glimmen { display: block; width: calc(var(--s, 2) * 9px); height: calc(var(--s, 2) * 14px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(#7ae0ffaa, #7ae0ff00 70%); animation: steinGlimmen 2.4s ease-in-out infinite; }
@keyframes steinGlimmen { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .lager-stein-glimmen { animation: none; opacity: .6; } }
.lager-stein-ziele { flex-wrap: wrap; justify-content: center; }

/* Köpfe der Oberfläche im DS-Stil (78-ds-koepfe.js) */
.ds-kopf { image-rendering: pixelated; }
/* Übernahme aus Burg Byers: was über „Kompetent“ hinausgeht (29-wildnis-erschaffung.js, Entscheidung Michael 07.10.) */
.ersch-bogen-fehler { margin: 10px 0; padding: 8px 12px; border-radius: 6px; background: #f6e3c0; box-shadow: inset 0 0 0 2px #b0702a; }
.ersch-bogen-fehler ul { margin: 4px 0 6px 18px; padding: 0; }
.ersch-bogen-fehler .knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Leihdecks (Wunsch Michael 09.10.): fertige Magic-Decks aus Arcanum, je Abend reservierbar (81-leihdecks.js) */
.leih-decks { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.leih-deck { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 10px; align-items: start; background: #fff8e2; padding: 8px; box-shadow: 0 0 0 2px #c9a466; }
.leih-deck.meins { box-shadow: 0 0 0 3px #4f8a3c; background: #f4fbe6; }
.leih-deck .bild { padding: 0; border: none; background: #241408; cursor: zoom-in; aspect-ratio: 63 / 88; width: 72px; border-radius: 4px; overflow: hidden; }
.leih-deck .bild img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.leih-deck .ohne-bild { aspect-ratio: 63 / 88; width: 72px; display: grid; place-items: center; background: #e8dcc0; border-radius: 4px; }
.leih-deck > div { min-width: 0; }
.leih-deck > div > span { display: block; font-size: 18px; overflow-wrap: anywhere; }
.leih-deck strong { overflow-wrap: anywhere; line-height: 1.1; }
.leih-deck .von { opacity: .8; }
.leih-deck p { margin: 4px 0; font-size: 18px; }
.leih-deck .lage { font-weight: bold; }
.leih-deck .lage.passt { color: #2f6a24; }
.leih-deck .lage.voll { color: #8a5a10; }
.leih-deck .knoepfe { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.mana-reihe { display: inline-flex; gap: 2px; vertical-align: -1px; margin-right: 4px; }
.mana { display: inline-block; width: 11px; height: 11px; box-shadow: 0 0 0 1px #3a2a1a; }
.mana.w { background: #efe6c0; } .mana.u { background: #3f74b0; } .mana.b { background: #3b3236; }
.mana.r { background: #b8432c; } .mana.g { background: #3f7f45; } .mana.c { background: #b4ab98; }
.arcanum-hinweis { margin-top: 14px; padding: 10px; background: #f3e6c4; box-shadow: 0 0 0 2px #c9a466; }
.arcanum-hinweis p { margin: 0 0 6px; }

/* Einsteiger-Ecke „So spielt man Magic“ (Wunsch Michael 09.10.; 82-magic-einstieg.js): Abschnitte zum Aufklappen,
   Begriffe-Tabelle am Handy zeilenweise untereinander (kein seitliches Überlaufen) */
.einstieg-auf { margin: 0 0 12px; }
.einstieg-rolle .einstieg-teil { border-top: 2px dashed #c9a466; }
.einstieg-rolle .einstieg-teil:last-of-type { border-bottom: 2px dashed #c9a466; margin-bottom: 12px; }
.einstieg-rolle .einstieg-teil summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; padding: 10px 0; }
.einstieg-rolle .einstieg-teil summary::-webkit-details-marker { display: none; }
.einstieg-rolle .einstieg-teil summary::before { content: '▶'; flex: none; font: 9px/1.5 var(--pixel); color: var(--rot); }
.einstieg-rolle .einstieg-teil[open] summary::before { content: '▼'; }
.einstieg-rolle .einstieg-teil summary h3 { border: none; padding: 0; margin: 0; overflow-wrap: anywhere; }
.einstieg-rolle .einstieg-teil summary:hover h3 { text-decoration: underline; }
.einstieg-rolle .einstieg-teil summary:focus-visible { outline: 3px dashed var(--rot); outline-offset: 2px; }
.einstieg-rolle .einstieg-teil[open] { padding-bottom: 6px; }
.einstieg-rolle h4 { font: 8px/1.6 var(--pixel); color: var(--rot); text-transform: uppercase; margin: 10px 0 4px; }
.einstieg-rolle .einstieg-teil p { margin: 0 0 8px; overflow-wrap: anywhere; }
.einstieg-rolle .einstieg-teil :is(ul, ol) { margin: 0 0 8px; padding-left: 22px; }
.einstieg-rolle .einstieg-teil li { margin: 3px 0; overflow-wrap: anywhere; }
.einstieg-rolle .einstieg-teil li::marker { color: var(--rot); }
.einstieg-rolle .einstieg-farben { list-style: none; padding-left: 0; }
.einstieg-rolle .beispiel { background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; padding: 6px 10px; margin: 6px 2px 10px; }
.einstieg-tabelle-huelle { overflow-x: auto; margin: 4px 2px 10px; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466; }
.einstieg-tabelle { width: 100%; border-collapse: collapse; font-size: 18px; }
.einstieg-tabelle th, .einstieg-tabelle td { padding: 4px 6px; text-align: left; vertical-align: top; border-bottom: 1px dashed #c9a466; overflow-wrap: anywhere; hyphens: auto; }
.einstieg-tabelle th { font: 8px/1.6 var(--pixel); color: var(--rot); text-transform: uppercase; background: #efe2bf; }
.einstieg-tabelle tr:last-child td { border-bottom: none; }
.einstieg-tabelle td:first-child { font-weight: bold; }
.einstieg-tabelle td:nth-child(2) { font-style: italic; opacity: .8; }
@media (max-width: 520px) {
  .einstieg-tabelle thead { display: none; }
  .einstieg-tabelle tr { display: block; padding: 5px 8px; border-bottom: 1px dashed #c9a466; }
  .einstieg-tabelle tr:last-child { border-bottom: none; }
  .einstieg-tabelle td { display: inline; padding: 0; border: none; }
  .einstieg-tabelle td:nth-child(2)::before { content: "· "; }
  .einstieg-tabelle td:nth-child(3) { display: block; }
}

/* Chronik der Geschichte im Questbuch (53-geschichte.js, Rückmeldung Michael 09.10.) */
.qb-reihe li.qb-st-zu { opacity: .62; background: #ece2c8a0; } .qb-reihe li.qb-st-zu b { color: #6a5a4a; }
.qb-liste li.qb-st-fertig b { color: #2a6a1a; } .qb-liste li.qb-st-laeuft { box-shadow: inset 0 0 0 2px #b8412c; }
.qb-hinweis { margin: 0 0 6px; font-size: 16px; color: #7a4a10; }

/* ---- Push-Nachrichten (83-push.js, Wunsch Michael 10.10.) ---- */
.push-hinweis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 10px 0 2px; padding: 8px 10px;
  color: var(--tinte); text-shadow: none; background: #fff8e2; box-shadow: 0 0 0 2px #c9a466, 0 0 0 4px #5a3a1e; }
.push-hinweis .push-glocke { font-size: 26px; grid-row: span 2; }
.push-hinweis p { margin: 0; font-size: 18px; }
.push-hinweis .knoepfe { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.push-einst p { margin: 0 0 8px; }
.push-einst .push-haken { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; font: 18px/1.3 var(--text); text-transform: none; letter-spacing: normal; }
.push-einst .push-haken input { margin-top: 3px; }
.push-frage { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: #0c0704b8; }
.push-frage > .holzschild { width: min(460px, 100%); padding: 14px 16px 12px; }
.push-frage h2 { margin: 0 0 8px; font: 13px/1.5 var(--pixel); }
.push-frage p { margin: 0 0 8px; font-size: 19px; }
.push-frage .knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.push-frage .meldung:empty { display: none; }

/* ---- Festgelegtes Spiel des Abends (84-tisch-spiel.js, Wunsch Michael 10.10.) ---- */
.fest-schild { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 8px 0 4px; padding: 8px 10px;
  color: var(--tinte); text-shadow: none; background: linear-gradient(#fffaf0, #f1dfb4); box-shadow: 0 0 0 2px #8a5530, 0 0 0 4px #c9a466; }
.fest-bild { width: 78px; height: 78px; display: grid; place-items: center; overflow: hidden; background: #2a1a10; box-shadow: inset 0 0 0 2px #c8912a; }
.fest-bild img { width: 100%; height: 100%; object-fit: cover; }
.fest-bild svg { width: 46px; height: auto; image-rendering: pixelated; }
.fest-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fest-text .fest-ueber { font: 8px/1.4 var(--pixel); color: #8a5530; text-transform: uppercase; }
.fest-text b { font: 14px/1.45 var(--pixel); color: #5a1a0a; overflow-wrap: anywhere; }
.fest-text span { font-size: 18px; line-height: 1.15; }
.fest-text .fest-andere { color: #7a4a10; }
.tisch-schild { display: inline-block; max-width: calc(var(--s, 2) * 74px); padding: 1px calc(var(--s, 2) * 3px); text-align: center; white-space: normal;
  font: max(11px, calc(var(--s, 2) * 6.5px))/1 var(--text); color: #ffe9b0; text-shadow: 1px 1px 0 #241408;
  background: repeating-linear-gradient(180deg, #8a5530 0 6px, #7a4a24 6px 7px); box-shadow: 0 0 0 1px #2a1408, 0 2px 0 #00000066; pointer-events: none; }
@media (max-width: 520px) { .fest-bild { width: 60px; height: 60px; } .fest-text b { font-size: 12px; } }

/* ---- Wunschtafel (85-wunschtafel.js, Wunsch Michael 10.10.) ---- */
.wt-huelle { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 12px; background: #0c0704b8; }
.wt-tafel { width: min(720px, 100%); max-height: calc(100vh - 24px); display: flex; flex-direction: column; padding: 14px 16px 10px; color: #e8f0e0;
  text-shadow: 1px 1px 0 #0006; background: #2e3b32; box-shadow: inset 0 0 0 3px #3e4d42, 0 0 0 6px #7a4e2e, 0 0 0 8px #3a2414; }
.wt-kopf h2 { margin: 0 0 6px; font: 14px/1.4 var(--pixel); color: #f4e8c0; }
.wt-kopf p { margin: 0 0 6px; font-size: 19px; }
.wt-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wt-budget b { color: #f4d06a; }
.wt-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.wt-chip { font: 16px/1 var(--text); padding: 3px 8px; color: #e8f0e0; background: transparent; border: 1px dashed #8a9a88; cursor: pointer; }
.wt-chip.an { background: #e8f0e0; color: #2e3b32; border-style: solid; text-shadow: none; }
.wt-liste { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; flex: 1 1 auto; min-height: 120px; }
.wt-zeile { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 6px 2px; border-bottom: 1px dashed #4e5e52; }
.wt-zeile.meins .wt-name b { color: #f4d06a; }
.wt-zeile.gestrichen .wt-name b { text-decoration: line-through; opacity: .55; }
.wt-rang { font: 11px var(--pixel); color: #f4d06a; text-align: right; }
.wt-name b { display: block; font-size: 20px; font-weight: normal; overflow-wrap: anywhere; }
.wt-name small { display: block; font-size: 15px; opacity: .75; }
.wt-summe { display: flex; align-items: center; gap: 6px; }
.wt-summe em { font: 11px var(--pixel); font-style: normal; color: #f4e8c0; min-width: 2ch; }
.wt-striche { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 110px; }
.wt-striche i { width: 2px; height: 12px; background: #e8f0e0; transform: rotate(8deg); }
.wt-striche i:nth-child(5n) { margin-right: 5px; }
.wt-striche.leer { opacity: .5; }
.wt-meine { display: flex; align-items: center; gap: 4px; }
.wt-knopf { min-width: 30px; height: 30px; font: 18px/1 var(--text); color: #2e3b32; background: #e8f0e0; border: 0; box-shadow: 0 2px 0 #00000066; cursor: pointer; text-shadow: none; }
.wt-knopf:disabled { opacity: .35; cursor: default; }
.wt-knopf.streichen { background: transparent; color: #f0a898; box-shadow: inset 0 0 0 1px #f0a898; }
.wt-knopf.streichen.an { background: #c8412c; color: #fff; box-shadow: none; }
.wt-punkte { font-size: 16px; letter-spacing: 1px; color: #f4d06a; min-width: 3.2em; text-align: center; }
.wt-fuss { font-size: 16px; opacity: .8; margin: 8px 0 4px; }
@media (max-width: 560px) { .wt-zeile { grid-template-columns: 1.4em minmax(0, 1fr) auto; } .wt-meine { grid-column: 2 / -1; justify-content: flex-end; } }

/* Unterpunkte auf dem Bestellzettel (84, Wunsch Michael 10.10.: DSA-Bände unter „Das schwarze Auge“) */
.hinweis.unterpunkte { margin: 2px 0 8px; font-size: 16px; }
.fest-text span b { font: inherit; font-weight: bold; color: inherit; }

/* ---- Handy-Ansicht aufgeräumt (86-handy-raum.js, Wunsch Michael 10.10.) ---- */
#raum:has(.irr-hud) :is(.klang-knopf, .wirt-wieder) { display: none; }   /* Irrgarten: ♪ lag über ▼ und ▶ des Steuerkreuzes (Dreieck 10.10.) */
@media (pointer: coarse) { .irr-steuer { min-width: 138px; right: 1%; bottom: 2%; } .irr-steuer button { font-size: 18px; } }
.spiel-gruppe { margin: 6px 0; }
.spiel-gruppe > summary { cursor: pointer; list-style: none; padding: 6px 2px; font: 9px/1.5 var(--pixel); color: var(--rot); border-bottom: 1px dashed #c9a466; }
.spiel-gruppe > summary::-webkit-details-marker { display: none; }
.spiel-gruppe > summary::before { content: '▸ '; } .spiel-gruppe[open] > summary::before { content: '▾ '; }
.spiel-gruppe > summary span { font: 15px var(--text); color: var(--tinte); opacity: .8; margin-left: 6px; text-transform: none; }
.plakette.frei { opacity: .6; }
@media (max-width: 699px) {
  .schatz { flex-wrap: wrap; } .schatz-text { flex: 1 1 0; min-width: 0; } .schatz-knoepfe { flex-basis: 100%; justify-content: flex-end; }   /* Knöpfe in eigener Zeile */
}
@media (max-width: 430px) {
  body:not(.kinder-modus) .kopfleiste .kl-vollbild { display: none; }
  .kl-titel { font-size: 10px; }
}
.wt-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }

/* ===== Ordnung in der Spalte (Wunsch Michael 11.10.: „viel mehr Struktur … nicht unordentlich und unsortiert … in allen Ansichten“) =====
   Jeder Block ist eine Karte mit kleinem Titel: Raumleiste, Aushang (Reiter · der Abend · Spiel · Kreidetafel · Knöpfe), Hier im Raum,
   die Klappbereiche, Gerade da. Gleiche Abstände, Knöpfe in Rastern statt wild umbrechender Reihen. */
.spalte-titel { display: block; margin: 0 0 6px; font: 9px/1.6 var(--pixel); color: var(--gold); text-transform: uppercase; letter-spacing: .5px; text-shadow: 2px 2px 0 #241408; }
.spalte-titel span { color: #ffe9b0; margin-left: 4px; }
/* Raumleiste: drei gleich breite Spalten */
#orte .orte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0 3px; }
#orte .orte button { margin: 0; justify-content: center; min-width: 0; gap: 4px; padding: 7px 3px 9px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Aushang */
.aushang { padding: 8px 12px 10px; margin-bottom: 12px; display: grid; gap: 10px; }
.aushang-kopf .reiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.aushang-kopf .reiter button { padding: 4px 2px 6px; }
.aushang-kopf .reiter button { margin: 0; }
.aushang-abend h2.unter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; font: 20px/1.2 var(--text); }
.aushang-abend h2 .badge { margin: 0; }
.eckdaten { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font: 18px/1.25 var(--text); }
.eckdaten dt { font: 8px/2.4 var(--pixel); color: var(--gold); text-transform: uppercase; }
.eckdaten dd { margin: 0; color: #ffe9b0; }
.platz-balken { display: block; height: 6px; margin: 3px 0 2px; background: #3a220f; box-shadow: 0 0 0 2px #0d0805; max-width: 220px; }
.platz-balken i { display: block; height: 100%; background: var(--gold); }
.aushang .notiz { margin: 0; }
.aushang .fest-schild, .aushang .empfehlung { margin: 0; }
.aushang .empfehlung.holzschild { border-image: none; border: 0; background: none; padding: 0; }
.aushang-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.aushang-knoepfe .knopf { margin: 0; width: 100%; white-space: normal; line-height: 1.4; }
.aushang-knoepfe .knopf:last-child:nth-child(odd) { grid-column: 1 / -1; }
#pushHinweis { margin: -4px 0 12px; }
/* Hier im Raum */
.raum-karte { padding: 8px 12px 12px; margin: 0 0 12px; }
.raum-karte h2.spalte-titel { margin-bottom: 4px; }
.raum-karte p { margin: 0 0 8px; font-size: 18px; line-height: 1.25; }
.raum-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.raum-knoepfe .knopf { margin: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.4; }
.raum-knoepfe .knopf svg { flex: none; }
body.kinder-modus .raum-karte { display: none; }
/* Klappbereiche: gleich breit wie die Karten, gleicher Abstand */
.tisch > .klapp > summary, #inhalt > .klapp > summary { margin: 0 3px 10px; }
.tisch > .klapp, #inhalt > .klapp { margin-bottom: 12px; }
/* PC: „Gerade da“ ans Ende der Spalte, vor den Fuß */
@media (min-width: 1100px) {
  body:not(.kinder-modus) #online { order: 1; }
  body:not(.kinder-modus) main > footer { order: 2; }
  body:not(.kinder-modus) .kopf { margin: 14px 0 10px; }
}
/* Wahl „Räume der Taverne“ (74) – die übrigen Aussehen-Schalter sind seit 11.10. weg */
.fh-schalter { margin-top: 4px; }
.einst-teil .fh-schalter { margin: 0 0 6px; }