/* Hopfen-App. Gestaltung nach dem Logo (2026-10-01): Waldgruen, Messing-Gold, Blattgruen, Hopfen-Oliv.
   Schriften selbst ausgeliefert (SIL OFL, fonts/OFL-*.txt): Cinzel fuer Ueberschriften und Reiter, Alegreya fuer die
   Erzaehlung, Systemschrift fuer Bedienung und Zahlen. Handy zuerst; ab 1000 px Seitenleiste + (Master) Konsole. */
@font-face { font-family: "Cinzel"; src: url("/static/fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/static/fonts/alegreya.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/static/fonts/alegreya-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --wald: #0c1812; --wald-2: #132219; --wald-3: #1b2e22; --gold: #d7bc73; --messing: #886727; --blatt: #455d2e; --hopfen: #958d49;
  --kopf-fg: #ece3c9; --kopf-leise: #a9ae92; --kopf-linie: #2a3d2d;
  --bg: #f1eee6; --flaeche: #fdfcf8; --flaeche-2: #f4f0e6; --fg: #1f261c; --leise: #636a58; --linie: #e2dccd; --linie-stark: #c9bc9a;
  --akzent: #7b5c17; --rede: #6a3d14; --privat: #f2eef8; --privat-linie: #7556a8; --gut: #3e6d27; --warn: #9d6716; --kritisch: #a3392c;
  --knopf: linear-gradient(180deg, #e3cb87, #b8913f); --knopf-fg: #1a1209;
  --display: "Cinzel", "Trajan Pro", Georgia, serif; --text: "Alegreya", "Iowan Old Style", Georgia, serif;
  --ui: -apple-system, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --schatten: 0 1px 2px rgba(25, 30, 15, .1), 0 8px 24px rgba(25, 30, 15, .08);
  --schrift: 1.06rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a140f; --flaeche: #132219; --flaeche-2: #1a2c20; --fg: #ece3c9; --leise: #a3a88c; --linie: #24362a; --linie-stark: #3d5340;
    --akzent: #d7bc73; --rede: #e8cc8e; --privat: #211b2c; --privat-linie: #b08be0; --gut: #9cbf63; --warn: #e2b04f; --kritisch: #e27b6c;
    --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a140f; --flaeche: #132219; --flaeche-2: #1a2c20; --fg: #ece3c9; --leise: #a3a88c; --linie: #24362a; --linie-stark: #3d5340;
  --akzent: #d7bc73; --rede: #e8cc8e; --privat: #211b2c; --privat-linie: #b08be0; --gut: #9cbf63; --warn: #e2b04f; --kritisch: #e27b6c;
  --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .3); color-scheme: dark;
}
:root[data-schrift="s"] { --schrift: .96rem; }
:root[data-schrift="l"] { --schrift: 1.2rem; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 16px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
body.im-spiel { overflow: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--messing); background: var(--knopf); color: var(--knopf-fg); border-radius: 10px;
  padding: .55rem .9rem; font-weight: 700; }
button:hover:not(:disabled) { filter: brightness(1.06); }
button.leise { background: transparent; color: var(--fg); border-color: var(--linie-stark); font-weight: 600; }
button.gefahr { background: var(--kritisch); border-color: transparent; color: #fff; }
button.klein { padding: .3rem .65rem; font-size: .8rem; border-radius: 8px; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { background: var(--bg); border: 1px solid var(--linie-stark); border-radius: 10px; padding: .55rem .7rem; }
textarea { resize: vertical; width: 100%; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-repeat: no-repeat; background-position: right .95rem center;
  background-size: .7rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a08850' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Auswahlliste selbst gestalten, wo der Browser es kann (Chrome 135+: appearance base-select). Andere Browser
   behalten ihre native Liste mit dem eigenen Pfeil oben — nichts bricht. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { background-image: none; display: flex; align-items: center; gap: .6rem; padding-right: .9rem; cursor: pointer; }
  select::picker-icon { content: ""; width: .7rem; height: .45rem; margin-left: auto; transition: rotate .18s ease;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a08850' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  select:open::picker-icon { rotate: 180deg; }
  select:open { border-color: var(--messing); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }
  ::picker(select) { border: 1px solid var(--linie-stark); border-radius: 14px; background: var(--flaeche); color: var(--fg);
    padding: 6px; margin-block: 6px; max-height: min(60vh, 26rem); overflow-y: auto; box-shadow: 0 14px 40px rgba(20, 28, 16, .22);
    scrollbar-width: thin; }
  option { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 9px; font: 500 .92rem/1.3 var(--ui);
    letter-spacing: 0; color: var(--fg); white-space: normal; }
  option:hover, option:focus-visible { background: var(--flaeche-2); outline: none; }
  option:checked { background: color-mix(in srgb, var(--gold) 20%, var(--flaeche)); color: var(--akzent); font-weight: 700; }
  option::checkmark { content: ""; order: 1; margin-left: auto; width: .55rem; height: .9rem; border: solid var(--akzent);
    border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; }
  option:disabled { color: var(--leise); }
  optgroup { font: 700 .66rem var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); padding: .4rem .5rem 0; }
}
/* Quadratischer Neu-laden-Knopf (statt Textknopf "Aktualisieren") */
.knopf-neu { width: 40px; height: 40px; flex: none; padding: 0; display: grid; place-items: center; border-radius: 10px;
  background: var(--flaeche); border: 1px solid var(--linie-stark); box-shadow: var(--schatten); }
.knopf-neu img { width: 22px; height: 22px; transition: transform .35s ease; }
.knopf-neu:hover img { transform: rotate(90deg); } .knopf-neu:active img { transform: rotate(200deg); }
/* Eigener W20: Ikosaeder in der Akzentfarbe des Themas (statt Rasterbild) */
.w20 { width: 24px; height: 24px; flex: none; color: var(--akzent); }
.w20 path { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; stroke-linecap: round; }
.w20 .w20-flaeche { fill: currentColor; fill-opacity: .14; stroke: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h2 { font: 700 1rem var(--display); letter-spacing: .05em; color: var(--akzent); margin: 0; }
h3 { font: 700 .66rem var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); margin: .4rem 0 0; }
.leise-text { font-size: .8rem; color: var(--leise); margin: 0; }
.fehler { color: var(--kritisch); font-size: .85rem; margin: 0; min-height: 1.1em; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.breit { width: 100%; }

/* ---------- Start ---------- */
.start { position: fixed; inset: 0; z-index: 50; overflow-y: auto; display: grid; place-items: center;
  padding: max(1.5rem, env(safe-area-inset-top)) 16px max(1.5rem, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 35%, #183022 0%, var(--wald) 62%); color: var(--kopf-fg); }
.start-inhalt { width: min(100%, 26rem); display: grid; justify-items: center; gap: 1rem; text-align: center; }
.start-logo { width: min(78vw, 22rem); height: auto;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 71%); mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 71%); }
.start-zeile { font: italic 1.05rem var(--text); color: #c4c7ac; margin: -.3rem 0 .2rem; }
.start-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; width: 100%; }
.start-knoepfe button { padding: .8rem 1rem; font: 700 .95rem var(--display); letter-spacing: .05em; }
.start button.leise { color: var(--kopf-fg); border-color: #6b7d55; }
.start-form { width: 100%; display: grid; gap: .65rem; text-align: left; background: rgba(19, 34, 25, .94);
  border: 1px solid #2f4632; border-radius: 16px; padding: 1.3rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.start-form h1 { margin: 0 0 .2rem; font: 700 1.4rem var(--display); letter-spacing: .06em; color: var(--gold); text-align: center; }
.start-form label { display: grid; gap: .25rem; font-size: .85rem; color: #cfd2b8; }
.start-form input { background: #0e1b14; color: var(--kopf-fg); border-color: #3e5340; }
.start-form .zeile { display: flex; gap: .6rem; } .start-form .zeile > * { flex: 1; }
.start .fehler { color: #f0a090; }
.start-klein { font-size: .75rem; color: #9ea38a; margin: 0; text-align: center; }
.hinweis-zu { margin: 0; padding: .55rem .7rem; border-radius: 10px; background: #2b2410; color: var(--gold); font-size: .85rem; }

/* ---------- App-Geruest (Handy) ---------- */
.app { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "inhalt" "reiter"; }
.kopf { grid-area: kopf; background: var(--wald); color: var(--kopf-fg); display: flex; align-items: center; gap: .7rem;
  padding: calc(.55rem + env(safe-area-inset-top, 0px)) 14px .55rem; border-bottom: 1px solid var(--kopf-linie); }
.kopf-kranz { width: 40px; height: 40px; flex: none; }
.kopf-titel { min-width: 0; flex: 1; }
.kopf-titel strong { display: block; font: 700 1rem/1.15 var(--display); letter-spacing: .04em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kopf-zeile { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--kopf-leise); white-space: nowrap; overflow: hidden; }
#kopf-zeile-text { overflow: hidden; text-overflow: ellipsis; }
.kennzahlen { display: flex; gap: 1.1rem; }
.kennzahl { display: grid; line-height: 1.2; } .kennzahl span { font: 600 .58rem var(--ui); letter-spacing: .09em; text-transform: uppercase; color: #8f957b; }
.kennzahl b { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--kopf-fg); white-space: nowrap; }
.dm-punkt { display: grid; justify-items: center; gap: 2px; font: 600 .58rem var(--ui); letter-spacing: .08em; color: var(--kopf-leise); flex: none; }
.dm-punkt i { width: 12px; height: 12px; border-radius: 50%; background: #56604f; }
.dm-punkt[data-dm="bereit"] i { background: #8fc15a; box-shadow: 0 0 0 3px rgba(143, 193, 90, .2); }
.dm-punkt[data-dm="denkt"] i { background: var(--gold); animation: puls 1.6s ease-in-out infinite; }
.dm-punkt[data-dm="pausiert"] i { background: #d8705d; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 2px rgba(215, 188, 115, .45); } 50% { box-shadow: 0 0 0 8px rgba(215, 188, 115, 0); } }
.kopf-knopf { background: transparent; border: 1px solid #3e5340; padding: .35rem; border-radius: 50%; line-height: 0; }
.kopf-knopf img { width: 28px; height: 28px; }

.reiterleiste { grid-area: reiter; background: var(--wald); display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--kopf-linie); }
.reiterleiste button { position: relative; border: 0; background: transparent; color: var(--kopf-leise); display: grid; justify-items: center;
  gap: 1px; padding: 3px 0; font: 600 .64rem var(--ui); letter-spacing: .03em; border-radius: 10px; }
.reiterleiste img { width: 30px; height: 30px; opacity: .7; filter: saturate(.75); transition: opacity .15s, transform .15s; }
.reiterleiste button[aria-selected="true"] { color: var(--gold); }
.reiterleiste button[aria-selected="true"] img { opacity: 1; filter: none; transform: translateY(-1px); }
.reiterleiste .punkt { position: absolute; top: 3px; right: calc(50% - 20px); width: 9px; height: 9px; border-radius: 50%; background: #d8705d; box-shadow: 0 0 0 2px var(--wald); }

.inhalt { grid-area: inhalt; min-height: 0; position: relative; }
.seite { display: none; height: 100%; min-height: 0; }
.seite.aktiv { display: flex; flex-direction: column; }
.seite-innen { overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 24px; display: grid; gap: 12px; align-content: start; height: 100%; }
.seite-kopf { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
.seite-kopf select { flex: 1; min-width: 0; font: 700 .95rem var(--display); height: 40px; padding-left: .9rem; }

/* ---------- Spiel ---------- */
.szene { display: flex; align-items: center; gap: .6rem; padding: .45rem 14px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }
.szene b { font: 700 .82rem/1.2 var(--display); letter-spacing: .04em; color: var(--akzent); }
.szene small { display: block; font-size: .72rem; color: var(--leise); }
.szene.getrennt small { color: var(--privat-linie); }
.szene .orte { display: flex; flex-wrap: wrap; gap: 2px 0; } .szene .orte span { white-space: nowrap; }
.szene .orte span + span::before { content: "·"; margin: 0 10px; color: var(--leise); }
.kampfleiste { display: flex; gap: .5rem; align-items: center; padding: .35rem 14px; background: color-mix(in srgb, var(--kritisch) 14%, var(--flaeche)); font-size: .8rem; font-weight: 600; }
.verlauf { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 8px; display: grid; gap: 10px; align-content: start; }
.verlauf > * { width: 100%; max-width: 46rem; margin-inline: auto; }
.eintrag.dm { background: var(--flaeche); border-radius: 14px; padding: 4px 16px 12px; box-shadow: var(--schatten); font: var(--schrift)/1.55 var(--text); }
.szenenkopf { font: 700 .8rem/1.3 var(--display); letter-spacing: .05em; color: var(--akzent); margin: 10px 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--linie); text-wrap: balance; }
.eintrag blockquote { margin: 0; } .eintrag blockquote p { margin: 0 0 .6rem; }
.eintrag em { color: var(--rede); }
.eintrag p.frage { font-weight: 600; margin: .5rem 0 .2rem; }
.eintrag ul { margin: .3rem 0; padding-left: 1.2rem; }
.wuerfel, .status, .zeitsprung, .kampf { font: .82rem/1.45 var(--ui); border-radius: 10px; padding: .45rem .7rem .45rem 2.3rem; margin: .5rem 0;
  background-repeat: no-repeat; background-position: .55rem .45rem; background-size: 1.25rem; }
.wuerfel { background-color: color-mix(in srgb, var(--hopfen) 16%, var(--flaeche)); background-image: url("/static/icons/wuerfel-48.png"); }
.wuerfel .kopf-zeile { font-weight: 700; } .wuerfel ul { margin: .2rem 0 0; padding-left: 1rem; }
.status { background-color: color-mix(in srgb, var(--kritisch) 11%, var(--flaeche)); background-image: url("/static/icons/f_herz.png"); }
.zeitsprung { background-color: color-mix(in srgb, #4d7287 14%, var(--flaeche)); background-image: url("/static/icons/f_sanduhr.png"); font-style: italic; }
.kampf { background-color: color-mix(in srgb, var(--kritisch) 16%, var(--flaeche)); background-image: url("/static/icons/kampf-48.png"); font-weight: 600; }
.eintrag.privat { background: var(--privat); border: 1px solid color-mix(in srgb, var(--privat-linie) 45%, transparent); }
.etikett { display: block; font: 700 .62rem/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--privat-linie); margin: 10px 0 4px; }
.eintrag.master, .eintrag.regie, .eintrag.oog { font-size: .8rem; color: var(--leise); border-left: 3px solid var(--messing); padding: 2px 10px; }
.eintrag.master pre, .eintrag.regie pre { white-space: pre-wrap; margin: 0; font: .76rem/1.5 var(--mono); }
.neufassung-hinweis { font: italic .78rem var(--ui); color: var(--leise); text-align: center; }
/* Zuege am Tisch: volle Breite wie die Erzaehlung, alle gleich ausgerichtet, Symbol + Name im Kaestchen */
.zuege { display: grid; gap: 8px; }
.zug { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid hsl(var(--h) 38% 48%); border-radius: 12px;
  padding: 8px 14px 10px; box-shadow: var(--schatten); display: grid; gap: 6px; }
.zug.eigen { background: color-mix(in srgb, var(--hopfen) 12%, var(--flaeche)); }
.zug-kopf { display: flex; align-items: center; gap: 9px; }
.zug-kopf b { display: block; font: 700 .86rem/1.15 var(--display); letter-spacing: .03em; }
.zug-kopf small { font-size: .72rem; color: var(--leise); }
.zug p { margin: 0; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.wuerfe { display: flex; flex-wrap: wrap; gap: 6px; }
.wurf-marke { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px;
  border: 1px solid var(--messing); background: color-mix(in srgb, var(--gold) 18%, var(--flaeche)); font: 700 .86rem var(--ui); font-variant-numeric: tabular-nums; }
.wurf-marke .w20 { width: 22px; height: 22px; margin-left: 3px; }
.wurf-hinweis .w20 { width: 18px; height: 18px; }
.konsole-reiter .w20 { width: 18px; height: 18px; }
.wurf-marke i { font: 600 .6rem var(--ui); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-left: 2px; }
.marken { display: grid; gap: 4px; justify-items: end; }
.ort-master { display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--privat-linie); font-weight: 600; }
.blasen { display: grid; gap: 6px; }
.blase { display: flex; gap: 8px; align-items: end; max-width: 88%; }
.blase.eigen { margin-left: auto; flex-direction: row-reverse; }
.avatar { --h: 30; --gross: 34px; width: var(--gross); height: var(--gross); aspect-ratio: 1; flex: none; border-radius: 50%; position: relative;
  display: inline-grid; place-items: center; border: 2px solid hsl(var(--h) 42% 58%); box-shadow: 0 0 0 2px var(--flaeche); user-select: none; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.avatar.online::after, .avatar.offline::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.avatar.online::after { background: var(--gut); } .avatar.offline::after { background: #8a8f80; }
.sprech { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px 16px 16px 4px; padding: 6px 11px; font-size: .9rem; box-shadow: var(--schatten); overflow-wrap: anywhere; }
.blase.eigen .sprech { background: color-mix(in srgb, var(--hopfen) 18%, var(--flaeche)); border-color: color-mix(in srgb, var(--hopfen) 50%, transparent); border-radius: 16px 16px 4px 16px; }
.sprech small { display: block; color: var(--leise); font-size: .68rem; } .sprech small b { color: var(--fg); }
.sprech .w { font-weight: 700; color: var(--akzent); }
.neu-unten { position: absolute; left: 50%; transform: translateX(-50%); bottom: 7.5rem; z-index: 5; border-radius: 999px; box-shadow: var(--schatten); font-size: .82rem; }

.eingabe { border-top: 1px solid var(--linie); background: var(--flaeche); padding: 8px 10px; display: grid; gap: 7px; }
/* Flex statt Raster: ist die Figurenwahl ausgeblendet (nur eine Figur), rutschte das Textfeld sonst in die
   schmale Spalte und rechts blieb Platz leer. */
.eingabe-zeile { display: flex; gap: 8px; align-items: flex-end; }
.eingabe-zeile textarea { flex: 1; min-width: 0; }
.eingabe-zeile > button, .eingabe-zeile select { flex: none; }
.eingabe-zeile select { max-width: 7.5rem; height: 44px; }
.knopf-brett { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie-stark); background: var(--flaeche-2); padding: 0; display: grid; place-items: center; }
.knopf-brett .w20 { width: 28px; height: 28px; }
.knopf-brett.gefordert { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 65%, transparent); animation: puls 1.6s ease-in-out infinite; }
.eingabe textarea { resize: none; min-height: 46px; max-height: 9rem; border-radius: 23px; padding: 12px 20px 12px 22px; font-size: .92rem; line-height: 1.35; }
.senden { width: 46px; height: 46px; border-radius: 50%; padding: 0; display: grid; place-items: center; flex: none; }
.senden-icon { width: 22px; height: 22px; translate: -1px 1px; }
.senden-icon path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.senden-icon path:first-child { fill: currentColor; fill-opacity: .18; }
.eingabe-hilfe { margin: 0; font-size: .68rem; color: var(--leise); text-align: center; }
.wurf-hinweis { display: flex; gap: .4rem; align-items: center; font-size: .76rem; font-weight: 600; color: var(--akzent); }
.ohne-figur { margin: 0; padding: .8rem 14px; border-top: 1px solid var(--linie); background: var(--flaeche); font-size: .82rem; color: var(--leise); text-align: center; }

.brett { border: 1px solid var(--linie-stark); border-radius: 16px; background: var(--flaeche-2); padding: 10px; display: grid; gap: 9px; }
.brett-kopf { display: flex; justify-content: space-between; align-items: center; font: 700 .78rem var(--display); letter-spacing: .05em; color: var(--akzent); }
.modus { display: inline-flex; border: 1px solid var(--linie-stark); border-radius: 999px; overflow: hidden; }
.modus button { border: 0; border-radius: 0; background: transparent; color: var(--leise); font: 600 .7rem var(--ui); padding: 5px 10px; }
.modus button[aria-pressed="true"] { background: var(--wald); color: var(--gold); }
.typen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.typen button { border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--fg); border-radius: 9px; padding: 7px 0; font: 700 .76rem var(--ui); }
.typen button[aria-pressed="true"] { background: var(--wald); color: var(--gold); border-color: var(--wald); }
.augen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.augen input { width: 50px; height: 40px; text-align: center; padding: 0; font: 700 1.05rem var(--ui); border-radius: 9px; }
.anzahl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.anzahl button { width: 30px; height: 30px; border-radius: 50%; padding: 0; background: var(--flaeche); color: var(--fg); border-color: var(--linie-stark); }
.brett-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.brett-text { font: 600 .82rem var(--ui); color: var(--leise); }

/* ---------- Gruppe ---------- */
.gruppe { display: grid; gap: 10px; }
.karte { background: var(--flaeche); border-radius: 14px; padding: 14px 16px; box-shadow: var(--schatten); display: grid; gap: 10px; }
#figur-inhalt { display: grid; gap: 14px; }
.karte-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.karte-kopf .avatar { --gross: 42px; font-size: 1rem; }
.karte-kopf b { font: 700 .95rem var(--display); letter-spacing: .02em; } .karte-kopf small { display: block; color: var(--leise); font-size: .74rem; }
.marke { font: 700 .62rem var(--ui); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.marke.ok { color: var(--gut); } .marke.warten { color: var(--warn); } .marke.getrennt { color: var(--privat-linie); }
.tp { display: grid; gap: 4px; font-size: .74rem; color: var(--leise); }
.tp-balken { height: 8px; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.tp-balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d3a2c, #c4583f); transition: width .3s; }
.beduerfnisse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bed { border-radius: 10px; padding: 6px 4px; background: var(--flaeche-2); display: grid; justify-items: center; gap: 2px; font-size: .68rem; color: var(--leise); text-align: center; }
.bed img { width: 18px; height: 18px; } .bed b { font-size: .72rem; color: var(--fg); }
.stufe { display: flex; gap: 2px; } .stufe i { width: 12px; height: 4px; border-radius: 2px; background: var(--linie); }
.stufe i.an { background: var(--hopfen); } .bed.s2 .stufe i.an { background: var(--warn); } .bed.s3 .stufe i.an { background: var(--kritisch); }
.erschoepfung { font-size: .74rem; color: var(--kritisch); font-weight: 600; }

/* ---------- Figur / Gepaeck ---------- */
.figur-name { font: 700 1.2rem var(--display); letter-spacing: .03em; color: var(--akzent); margin: 0; }
.werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.werte div { background: var(--flaeche); border-radius: 14px; padding: 12px 4px 10px; box-shadow: var(--schatten); display: grid; gap: 2px; }
.werte span { display: block; font: 700 .58rem var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--leise); }
.werte strong { font: 700 1.2rem var(--display); } .werte small { display: block; font-size: .62rem; color: var(--leise); }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 2px 28px; font-size: .86rem; }
.raster div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--linie); padding: 8px 2px; }
.raster strong { font-variant-numeric: tabular-nums; } .raster .geuebt span::after { content: " ●"; color: var(--akzent); font-size: .6rem; }
.geld { display: flex; gap: .6rem; align-items: baseline; font: 700 1.5rem var(--display); color: var(--akzent); }
.geld small { font: .78rem var(--ui); color: var(--leise); }
.muenzen { display: flex; gap: 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.muenzen span { display: inline-flex; align-items: baseline; gap: 3px; }
.muenzen b { font: 700 1.5rem var(--display); color: var(--fg); } .muenzen i { font: 700 .8rem var(--ui); font-style: normal; color: var(--akzent); }
.muenzen.klein b { font-size: 1rem; } .muenzen.klein i { font-size: .66rem; }
.muenzen .null b { color: var(--leise); opacity: .55; }
#gepaeck-inhalt { display: grid; gap: 16px; }
.posten-liste { display: grid; gap: 10px; }
.posten { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; background: var(--flaeche); border-radius: 14px; font-size: .9rem; box-shadow: var(--schatten); }
.posten img { width: 28px; height: 28px; } .posten small { display: block; color: var(--leise); font-size: .72rem; }
.posten .neu { font: 700 .58rem var(--ui); color: var(--gut); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Mehr ---------- */
.mehr { gap: 0; }
.mehr h2 { margin-bottom: 8px; }
.mehr-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--linie); width: 100%; text-align: left; }
.mehr-zeile img { width: 30px; height: 30px; } .mehr-zeile b { display: block; font-size: .92rem; } .mehr-zeile small { color: var(--leise); font-size: .74rem; }
.mehr-knopf { background: transparent; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; color: var(--fg); font-weight: 400; }
.mehr .leise-text { margin-top: 12px; }
.segment { display: inline-flex; border: 1px solid var(--linie-stark); border-radius: 999px; overflow: hidden; }
.segment button { border: 0; border-radius: 0; background: transparent; color: var(--leise); padding: 5px 10px; font: 600 .74rem var(--ui); }
.segment button[aria-pressed="true"] { background: var(--wald); color: var(--gold); }
.segment [data-schrift="s"] { font-size: .66rem; } .segment [data-schrift="l"] { font-size: .9rem; }
.schalter { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--linie-stark); position: relative; padding: 0; border: 0; cursor: pointer; flex: none; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.schalter:checked { background: var(--blatt); } .schalter:checked::after { transform: translateX(18px); }
.schalter-zeile { display: flex; gap: .6rem; align-items: center; font-size: .82rem; }

/* ---------- Master-Konsole ---------- */
.konsole { background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.konsole-reiter { display: flex; border-bottom: 1px solid var(--linie); padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
.konsole-reiter button { position: relative; border: 0; border-radius: 0; background: transparent; color: var(--leise); padding: 11px 7px 9px; display: flex; gap: 5px;
  align-items: center; font: 700 .7rem var(--display); letter-spacing: .05em; border-bottom: 2px solid transparent; white-space: nowrap; flex: 1; justify-content: center; }
.konsole-reiter img { width: 18px; height: 18px; }
.konsole-reiter button[aria-selected="true"] { color: var(--akzent); border-bottom-color: var(--akzent); }
.zahl { font: 700 .6rem var(--ui); font-style: normal; background: var(--kritisch); color: #fff; border-radius: 999px; padding: 1px 6px; }
.panel { overflow-y: auto; overscroll-behavior: contain; padding: 12px; display: grid; gap: 10px; align-content: start; }
.panel-kopf { display: flex; justify-content: space-between; align-items: center; }
details summary { cursor: pointer; color: var(--leise); font-size: .85rem; margin: .3rem 0; }
#neu { display: grid; gap: .5rem; margin-top: .4rem; }
.konsolen-log { list-style: none; margin: 0; padding: 8px 0; background: #07100b; border-radius: 12px; font: .72rem/1.55 var(--mono); color: #b9c2a7;
  max-height: 46vh; overflow: auto; min-height: 3rem; }
.konsolen-log li { padding: 1px 12px; display: grid; grid-template-columns: 4.2em 1em minmax(0, 1fr); gap: 6px; overflow-wrap: anywhere; }
.konsolen-log .z { color: #64705c; } .konsolen-log .p { color: #9cbf63; }
.konsolen-log:empty::before { content: "— der DM ruht —"; display: block; text-align: center; color: #64705c; }
.lagebericht { display: grid; gap: 8px; }
.lage-figuren .karte { padding: 10px 12px; gap: 6px; }
.lage-figuren .karte-kopf .avatar { --gross: 34px; }
.verbrauch { gap: 6px; padding: 12px 14px; }
.verbrauch-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.verbrauch-kopf b { font: 700 1.35rem var(--display); color: var(--akzent); font-variant-numeric: tabular-nums; }
.verbrauch-kopf span { font-size: .78rem; color: var(--leise); }
.verbrauch-zeile { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.verbrauch-zeile b { color: var(--fg); font-weight: 600; }
.runde-info { margin: 0; font-size: .78rem; color: var(--leise); } .runde-info b { color: var(--akzent); font-family: var(--display); letter-spacing: .03em; }
.vorschau-karten { display: grid; gap: 8px; } .vorschau-karten .zuege { gap: 8px; }
.master-zug { border-top: 1px solid var(--linie); background: var(--flaeche); padding: 8px 12px 10px; display: grid; gap: 6px; }
.master-zug > * { width: 100%; max-width: 46rem; margin-inline: auto; }
.master-zug-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.master-zug-kopf h3 { margin: 0; }
.master-zug .vorschau-karten { max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }
.master-zug .zug { padding: 6px 10px; } .master-zug .zug p { margin: 2px 0 0; font-size: .86rem; }
.vorschau-text summary, #neu-details summary { cursor: pointer; font-size: .82rem; color: var(--leise); padding: 4px 0; }
.vorschau-text textarea { margin-top: 6px; }

/* Assistent (neue Runde, Figuren-Antrag) */
.assistent { display: grid; gap: 12px; margin-top: 8px; }
.schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.schritt > div { display: grid; gap: 6px; min-width: 0; }
.schritt b { font: 700 .86rem var(--display); letter-spacing: .03em; color: var(--fg); } .schritt b small { font: 400 .72rem var(--ui); color: var(--leise); letter-spacing: 0; }
.schritt .hilfe { font-size: .76rem; color: var(--leise); margin: -2px 0 0; }
.nr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--wald); color: var(--gold); font: 700 .78rem var(--display); }
.schritt.wichtig .nr { background: var(--gold); color: var(--wald); }
.zeile-eingabe { display: flex; gap: 6px; } .zeile-eingabe input { flex: 1; min-width: 0; }
.assistent input, .assistent select, .assistent textarea { width: 100%; }
.wahl-liste { display: grid; gap: 6px; max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.wahl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px;
  background: var(--flaeche); border: 1px solid var(--linie); cursor: pointer; font-size: .82rem; }
.wahl input { width: auto; accent-color: var(--messing); margin: 0; }
.wahl b { font: 700 .86rem var(--display); letter-spacing: .02em; } .wahl small { display: block; color: var(--leise); font-size: .72rem; }
.wahl:has(input:checked) { border-color: var(--messing); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }
.wahl .warn { color: var(--kritisch); font-weight: 600; }
.werte-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.werte-chips span { font: 700 .64rem var(--ui); padding: 1px 7px; border-radius: 999px; background: var(--flaeche-2); color: var(--fg); }
.aufruf { margin: 0; font: .76rem var(--mono); color: var(--leise); overflow-wrap: anywhere; }
.antrag-status { display: grid; gap: 8px; }
.antrag-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: .8rem; }
.antrag-daten dt { color: var(--leise); font-size: .72rem; padding-top: 1px; } .antrag-daten dd { margin: 0; overflow-wrap: anywhere; }
.antrag-entscheid { display: grid; gap: 7px; padding-top: 8px; border-top: 1px dotted var(--linie-stark); }
.antrag-entscheid label { display: grid; gap: 3px; font-size: .74rem; color: var(--leise); }
.neu-gruppe { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 7.5rem; gap: 6px; }
.marke.abgelehnt { color: var(--kritisch); }
.karte code, .leise-text code { font: .72rem var(--mono); overflow-wrap: anywhere; }

/* Initiative-Leiste: Reihenfolge als Marken, wer am Zug ist, leuchtet; Gegner nur mit Band, nie mit Zahl */
.kampfleiste { flex-wrap: wrap; row-gap: 5px; }
.ini { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font: 600 .74rem var(--ui); }
.ini-runde { font: 700 .66rem var(--display); letter-spacing: .06em; color: var(--kritisch); border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ini-teil { display: inline-flex; gap: 5px; align-items: center; padding: 2px 9px 2px 2px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); white-space: nowrap; }
.ini-teil .avatar { --gross: 20px; border-width: 1.5px; box-shadow: none; }
.ini-teil .gegner-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--wald); padding: 2px; box-sizing: border-box; }
.ini-teil small { font: 700 .56rem var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--kritisch); }
.ini-teil.am-zug { border-color: var(--messing); background: color-mix(in srgb, var(--gold) 28%, var(--flaeche)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent); }
.ini-pfeil { color: var(--leise); font-size: .7rem; }
.eintrag .kampf .ini { margin: .3rem 0; }

/* XP */
.xp { gap: 6px; }
.xp-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.xp-kopf b { font: 700 .95rem var(--display); color: var(--akzent); } .xp-kopf span { font-size: .8rem; font-variant-numeric: tabular-nums; }
.xp-balken { height: 8px; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.xp-balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blatt), var(--hopfen)); }
.xp small { color: var(--leise); font-size: .74rem; } .xp.faellig small { color: var(--gut); font-weight: 700; }
.xp .heute { color: var(--gut); font-weight: 700; }

/* Gepaeck aller Figuren (Master) */
.gepaeck-alle { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.gepaeck-alle .karte { gap: 12px; } .gepaeck-alle .posten-liste { gap: 8px; }
.gepaeck-alle .karte-kopf .geld-klein { font: 700 .95rem var(--display); color: var(--akzent); white-space: nowrap; }
.gepaeck-alle .posten { box-shadow: none; background: var(--flaeche-2); padding: 9px 12px; gap: 12px; font-size: .84rem; }
.gepaeck-alle .posten img { width: 22px; height: 22px; }

.ohne-figur { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }

.lage-gruppe { font: 700 1rem var(--display); color: var(--akzent); }
.lage-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lage-kacheln div { background: var(--flaeche-2); border-radius: 10px; padding: 6px 9px; display: grid; }
.lage-kacheln span { font: 600 .58rem var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--leise); }
.lage-kacheln b { font: 600 .95rem var(--text); } .lage-kacheln small { color: var(--leise); font-size: .7rem; }
.lage-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lage-liste li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: space-between; padding: 6px 9px; border-radius: 10px; background: var(--flaeche-2); font-size: .8rem; }
.lage-liste em, .lage-liste .tag { font-style: normal; font: 700 .6rem var(--ui); letter-spacing: .05em; color: var(--akzent); border: 1px solid var(--akzent); border-radius: 999px; padding: 1px 7px; }
.lage-liste .tag { color: var(--leise); border-color: var(--linie-stark); }
.einladung { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--wald); }
.einladung code { font: .85rem var(--mono); color: var(--gold); overflow-wrap: anywhere; }
.einladung button.leise { color: var(--kopf-fg); border-color: #4a5e47; }
.konten { display: grid; gap: 6px; }
.konten, .antraege, .lage-figuren { display: grid; gap: 8px; }
.konto-aktionen { display: flex; gap: 6px; align-items: center; }
.konto-aktionen select { flex: 1; min-width: 0; font-size: .8rem; padding: 5px 8px; border-radius: 8px; }
.karte.gesperrt { opacity: .6; }
.meldungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.meldung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 12px; border-left: 3px solid var(--hopfen); background: var(--flaeche-2); font-size: .8rem; }
.meldung img { width: 22px; height: 22px; } .meldung small { display: block; color: var(--leise); font-size: .68rem; }
.meldung pre { white-space: pre-wrap; margin: 0; font: .74rem/1.45 var(--mono); max-height: 14rem; overflow: auto; }
.meldung.warn { border-color: var(--warn); } .meldung.fehler { border-color: var(--kritisch); } .meldung.oog { border-color: var(--privat-linie); }

.bestaetigung { border: 1px solid var(--messing); border-radius: 18px; padding: 0; background: var(--flaeche); color: var(--fg);
  width: min(92vw, 25rem); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.bestaetigung::backdrop { background: rgba(8, 16, 11, .62); backdrop-filter: blur(2px); }
.bestaetigung form { display: grid; justify-items: center; gap: 10px; padding: 22px 20px 18px; text-align: center; }
.bestaetigung h2 { font-size: 1.1rem; } .bestaetigung p { margin: 0; font: var(--schrift)/1.5 var(--text); color: var(--fg); }
.frage-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 6px; }
.frage-knoepfe button { padding: .7rem .8rem; }
.toast { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  background: var(--wald); color: var(--kopf-fg); border: 1px solid var(--messing); border-radius: 999px; padding: .55rem 1rem; font-size: .85rem; box-shadow: var(--schatten); max-width: calc(100vw - 32px); }

/* Master am Handy: der Leitstand ist ein eigener Reiter (keine Schublade mehr) */
@media (max-width: 999px) {
  .konsole { display: none; }
  .app.master.zeige-leitstand .konsole { display: grid; grid-area: inhalt; }
  .app.master.zeige-leitstand .inhalt { display: none; }
  .app.master .reiterleiste { grid-template-columns: repeat(6, 1fr); }
  .app.master .reiterleiste img { width: 27px; height: 27px; }
  .kennzahlen { display: none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1000px) {
  .app { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "kopf kopf" "reiter inhalt"; }
  .app.master { grid-template-columns: 92px minmax(0, 1fr) 420px; grid-template-areas: "kopf kopf kopf" "reiter inhalt konsole"; }
  .konsole { grid-area: konsole; border-left: 1px solid var(--linie); }
  .kopf-knopf, #reiter-leitstand { display: none !important; }
  .reiterleiste { grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 6px; border-top: 0; border-right: 1px solid var(--kopf-linie); padding: 14px 6px; }
  .reiterleiste button { padding: 8px 0; } .reiterleiste button[aria-selected="true"] { background: var(--wald-3); }
  .reiterleiste img { width: 36px; height: 36px; }
  .seite-innen { padding: 20px 24px 32px; } .seite-innen > * { max-width: 52rem; width: 100%; margin-inline: auto; }
  .neu-unten { bottom: 8rem; }
  .eingabe { padding: 10px max(16px, calc((100% - 46rem) / 2)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }