/* smp.winku.de — „Spawn". Zwei Welten auf einer Seite (Faddi 19.09.2026: „den Teil, der nicht zu Winku gehört, komplett
   eigen, im Minecraft-Stil — sei sehr kreativ"):
     1. Der Winku-Rahmen (Kopfleiste, Fußzeile): Tokens und Bausteine aus winku.css — so sieht jede Winku-Seite aus.
     2. Die Welt dazwischen: eigene Pixelkunst (werkzeug/pixelkunst-bauen.js, zeichen-bauen.js), eigene Pixelschrift
        „Spawn Pixel" (werkzeug/pixelschrift-bauen.js). Nichts davon stammt aus Minecraft.
   Pixelschrift nur in Vielfachen von 10 px (1 Schriftpixel = 1/2/3 … Bildschirmpixel), Texturen in Vielfachen von 16 px.
   Kein style= im HTML (CSP) — Werte, die Skripte setzen, laufen über CSS-Variablen. */

@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/inter-latin-opsz.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/inter-latin-ext-opsz.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("fonts/jetbrainsmono-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spawn Pixel"; font-style: normal; font-display: block; font-weight: 400; src: url("fonts/spawn-pixel.ttf") format("truetype"); }

:root {
  --mc-schrift: "Spawn Pixel", ui-monospace, monospace;
  /* Minecraft-Farben (Chat, Namensschilder — so zeigt die ScamRadar-Mod Warnungen) */
  --mc-weiss: #ffffff; --mc-grau: #aaaaaa; --mc-dunkelgrau: #555555; --mc-schatten: #3f3f3f;
  --mc-rot: #ff5555; --mc-dunkelrot: #aa0000; --mc-gold: #ffaa00; --mc-gelb: #ffff55; --mc-gruen: #55ff55;
  --mc-dunkelgruen: #00aa00; --mc-aqua: #55ffff; --mc-dunkelaqua: #00aaaa; --mc-lila: #ff55ff; --mc-dunkellila: #aa00aa;
  /* Oberfläche im Spiel-Stil */
  --gui: #c6c6c6; --gui-text: #404040; --gui-hell: #ffffff; --gui-dunkel: #555555; --gui-rand: #000000;
  --knopf-grund: #6f6f6f; --knopf-licht: #aaaaaa; --knopf-schatten: #3c3c3c; --knopf-hover: #ffffa0;
  --slot: #8b8b8b; --slot-dunkel: #373737;
  --tip-grund: #100010; --tip-rand-1: #5000ff; --tip-rand-2: #28007f;
  --schirm: rgb(0 0 0 / .55);
  --breite: 1120px;
  --leiste-hoehe: 0px;           /* Leiste unten (nur Telefon, seiten/navigation.js untenLeiste) — sonst nichts */
  --nav-oben: 116px;             /* Kopf (64) + Bereichsleiste (52) — Höhe des Titelbildschirms (.himmel) */
}
/* Bereichsfarben im Winku-Rahmen (Knöpfe, Aura) — Spawn trägt die Winku-Farben */
[data-bereich="scamradar"] { --marke-1: #ef4444; --marke-2: #f97316; --marke-3: #f78a68; --knopf-1: #d73d3d; --knopf-2: #bb5611; --akzent: #f15757; --akzent-2: #f97316; }
[data-bereich="arcade"] { --marke-1: #f59e0b; --marke-2: #ec4899; --marke-3: #f59a82; --knopf-1: #9f6707; --knopf-2: #c93d82; --akzent: #f59e0b; --akzent-2: #ed519e; }
/* 29.09.2026 Wink Plaza — die Farben des Marktstands (Markise Türkis, Ware Orange) */
[data-bereich="plaza"] { --marke-1: #2dd4bf; --marke-2: #f5a524; --marke-3: #7dd3c0; --knopf-1: #1f8f82; --knopf-2: #b7701a; --akzent: #2dd4bf; --akzent-2: #f5a524; }

html { background: #0b0f19; }
body {
  display: flex; flex-direction: column; min-block-size: 100dvh; background: #0b0f19; color: var(--text);
  font-family: var(--schrift-text); padding-block-end: var(--leiste-hoehe);
}
main { flex: 1; display: block; }
img { image-rendering: auto; }
.pixelig, .mc-item, .kopf img, img.kopf { image-rendering: pixelated; }
.nur-vorleser { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprungmarke { position: absolute; inset: .8rem auto auto .8rem; z-index: 400; padding: .6rem 1rem; border-radius: .8rem; color: #fff; background: var(--knopf-1); translate: 0 -300%; }
.sprungmarke:focus { translate: 0; }
.mono { font-family: var(--schrift-mono); }
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   1. WINKU-RAHMEN — Kopfleiste und Fußzeile wie auf winku.de
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.wk-kopf { position: sticky; inset-block-start: 0; z-index: 50; border-block-end: 1px solid transparent; transition: background-color .26s, border-color .26s; }
.wk-kopf[data-gescrollt] { background: color-mix(in srgb, var(--grund) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-color: var(--rand); }
.wk-zeile { display: flex; align-items: center; gap: 1rem; min-block-size: 64px; inline-size: min(100% - 2rem, 1280px); margin-inline: auto; }
.wk-marke { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--text-stark); flex: none; }
.wk-marke svg { inline-size: 32px; block-size: 32px; border-radius: 9px; box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--logo-1) 55%, transparent); }
.wk-trenner { color: var(--text-zart); font-size: 1.4rem; font-weight: 300; }
/* „Wink" neben dem Winku-Zeichen führt nach Start (26.09.2026: kein Bereichsmenü mehr — die Bereiche stehen daneben) */
.wk-dienst { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .6rem .3rem .3rem; border-radius: 999px; flex: none;
  color: var(--text-stark); font: 20px/1 var(--mc-schrift); text-shadow: 2px 2px 0 #000; }
.wk-dienst:hover { background: color-mix(in srgb, #fff 6%, transparent); }
.wk-dienst img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.wk-rechts { display: flex; align-items: center; gap: .55rem; margin-inline-start: auto; }
.nv-haupt + .wk-rechts { margin-inline-start: 0; }
.wk-sprachen { display: inline-flex; padding: .2rem; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--rand); }
.wk-sprachen a { padding: .28rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--text-leise); }
.wk-sprachen a[aria-current="true"] { color: #fff; background: linear-gradient(120deg, var(--knopf-1), var(--knopf-2)); }
/* Glocke: runde Pille wie das Konto daneben (vorher hing das nackte Bild in der Leiste). Bei Neuem wird sie golden,
   die Zahl sitzt in der Ecke und sie schwingt ein paar Mal an — wie die Glocke im ESC-Menü der Mod (20.09.2026). */
.wk-glocke { position: relative; display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; flex: none;
  border-radius: 999px; background: var(--flaeche); border: 1px solid var(--rand); transition: transform .2s, background-color .2s, border-color .2s; }
/* 03.10.2026 (Faddi, iPhone: „oben die buttons verschwommen"): 16er-Bild nur in Vielfachen von 16 px zeigen — 18 px = 1,125-fach (iPhone 3x: 3,375 Bildpunkte je Pixel, ungleich breite Pixelreihen) */
.wk-glocke img { inline-size: 16px; block-size: 16px; image-rendering: pixelated; opacity: .78; transition: opacity .2s, filter .2s; }
.wk-glocke:hover { background: var(--flaeche-3); transform: translateY(-2px); }
.wk-glocke:hover img, .wk-glocke:focus-visible img { opacity: 1; }
.wk-glocke:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Knopf „Creator" (nur Creator/Video-Moderatoren, web/seiten/huelle.js) — neben der Glocke */
.wk-creator { display: inline-flex; gap: 6px; align-items: center; block-size: 38px; padding: 0 12px; flex: none; text-decoration: none; font-weight: 700; font-size: .9rem;
  color: #fde68a; border-radius: 10px; background: linear-gradient(135deg, rgb(124 58 237 / .45), rgb(219 39 119 / .35)); transition: transform .2s, background .2s; }
.wk-creator img { inline-size: 18px; block-size: 18px; image-rendering: pixelated; }
.wk-creator:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgb(124 58 237 / .7), rgb(219 39 119 / .55)); }
.wk-creator:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (max-width: 560px) { .wk-creator span { display: none; } .wk-creator { padding: 0 9px; } }
.wk-glocke.hat-neu { border-color: color-mix(in srgb, var(--mc-gold) 55%, var(--rand)); background: color-mix(in srgb, var(--mc-gold) 12%, var(--flaeche)); }
.wk-glocke.hat-neu img { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mc-gold) 65%, transparent)); }
.wk-glocke-zahl { position: absolute; inset: -3px -3px auto auto; min-inline-size: 17px; padding-inline: 4px; border-radius: 999px;
  font: 700 .62rem/17px var(--schrift-text); text-align: center; color: #fff; background: var(--fehler); box-shadow: 0 0 0 2px var(--grund); }
@media (prefers-reduced-motion: no-preference) {
  .wk-glocke.hat-neu img { transform-origin: 50% 18%; animation: glocke-schwingen 3.4s ease-in-out .7s 3; }
}
@keyframes glocke-schwingen { 0%, 12%, 100% { rotate: 0deg; } 2% { rotate: 14deg; } 4% { rotate: -11deg; } 6% { rotate: 7deg; } 8% { rotate: -4deg; } 10% { rotate: 2deg; } }
/* Die Glocke klappt bei Neuem auf (27.09.2026, seiten/huelle.js glockeKlapp): je Zeile das Symbol der Art wie in der Mod */
.wk-glocke-klapp > summary.wk-glocke { list-style: none; cursor: pointer; }
.wk-glocke-klapp > summary.wk-glocke::-webkit-details-marker { display: none; }
.wk-glocke-klapp > .nv-tafel.wk-glocke-tafel { inline-size: min(24rem, calc(100vw - 16px)); max-inline-size: min(24rem, calc(100vw - 16px)); }
.wk-glocke-kopf { margin: 0; padding: .35rem .6rem .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.wk-glocke-tafel ul a { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
.nv-tafel.wk-glocke-tafel ul img { inline-size: 24px; block-size: 24px; margin-block-start: 2px; }
.wk-glocke-text { display: grid; gap: 2px; min-inline-size: 0; }
.wk-glocke-text > span { font-size: .86rem; line-height: 1.35; overflow-wrap: anywhere; }
.wk-glocke-text small { font-size: .72rem; color: var(--text-leise); }
.wk-glocke-tafel li.gelesen { opacity: .72; }   /* 30.09.2026 js/glocke.js: beim Aufklappen gelesen */
.nv-tafel a.wk-glocke-alle { display: block; margin-block-start: 2px; padding: .5rem .6rem; text-align: center; font-weight: 700; font-size: .84rem; border-block-start: 1px solid var(--rand); border-radius: 0 0 .6rem .6rem; }
/* 27.09.2026 Fuß der Glocke: „Alle ansehen" und „Alle als gelesen" nebeneinander */
.wk-glocke-fuss { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-block-start: 2px; border-block-start: 1px solid var(--rand); }
.wk-glocke-fuss form { display: contents; }
.nv-tafel .wk-glocke-fuss a.wk-glocke-alle { margin: 0; border: 0; border-radius: 0 0 0 .6rem; }
.wk-glocke-gelesen { font: inherit; font-weight: 700; font-size: .84rem; padding: .5rem .6rem; background: none; border: 0; border-inline-start: 1px solid var(--rand); border-radius: 0 0 .6rem 0; color: inherit; cursor: pointer; }
.wk-glocke-gelesen:hover, .wk-glocke-gelesen:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
@media (max-width: 760px) { .wk-glocke-klapp > .nv-tafel.wk-glocke-tafel { position: fixed; inset: 62px 8px auto 8px; inline-size: auto; max-inline-size: none; max-block-size: calc(100dvh - var(--leiste-hoehe, 0px) - 80px); overflow-y: auto; } }
/* 03.10.2026 LIVE-ABZEICHEN im Kopf (seiten/live.js, Faddi: „wenn event aktiv muss das im header … cool angezeigt werden … man kommt direkt dahin").
   Kräftige Pille links neben der Sprache: pulsierender Punkt + LIVE (+ Name ab 1121 px). Mehrere Events: Zahl + Klappmenü wie die Glocke.
   Auf der Seite des Events selbst ruhig (aria-current): kein Pulsieren, getönte Fläche. Kein Rand unter dem Verlauf (border: 0, Fehlerliste 28). */
.lv-abz { --lv-1: #e11d48; --lv-2: #f97316; display: inline-flex; align-items: center; gap: .45rem; box-sizing: border-box; block-size: 38px; padding-inline: .85rem; border: 0; border-radius: 999px;
  font: 800 .74rem/1 var(--schrift-text); letter-spacing: .08em; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: linear-gradient(120deg, var(--lv-1), var(--lv-2)); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--lv-1) 75%, transparent); transition: transform .2s, box-shadow .2s; }
.lv-abz:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--lv-1) 85%, transparent); }
.lv-abz:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.lv-punkt { inline-size: 8px; block-size: 8px; flex: none; border-radius: 50%; background: #fff; }
.lv-name { max-inline-size: 18ch; overflow: hidden; text-overflow: ellipsis; padding-inline-start: .5rem; border-inline-start: 1px solid rgb(255 255 255 / .5); font-weight: 700; font-size: .8rem; letter-spacing: 0; }
.lv-zahl { min-inline-size: 1.3rem; padding: .22rem .38rem; box-sizing: border-box; border-radius: 999px; text-align: center; letter-spacing: 0; background: rgb(0 0 0 / .3); }
.lv-abz .pfeil { inline-size: 14px; block-size: 14px; flex: none; margin-inline-start: -.1rem; transition: rotate .2s; }
.lv-abz[aria-current], .lv-abz[data-aktiv] { color: var(--text-stark); background: color-mix(in srgb, var(--lv-1) 22%, var(--flaeche)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv-1) 60%, transparent); }
.lv-abz[aria-current] .lv-punkt, .lv-abz[data-aktiv] .lv-punkt { background: var(--lv-1); animation: none; }
.lv-abz[aria-current] .lv-name { border-color: var(--rand); }
.lv-tafel { min-inline-size: 14rem; }
/* in der Plaza-Leiste (navigation.js): „● LIVE" als Zusatz unter dem Canvas-Reiter, rosa statt weiß */
.nv-live { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; color: #fb7185; font-weight: 800; letter-spacing: .06em; }
.nv-live .lv-punkt { inline-size: 6px; block-size: 6px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .lv-punkt { animation: lv-puls 1.8s ease-out infinite; }
  .nv-live .lv-punkt { animation-name: lv-puls-rosa; }
}
@keyframes lv-puls { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .75); } 70%, 100% { box-shadow: 0 0 0 8px rgb(255 255 255 / 0); } }
@keyframes lv-puls-rosa { 0% { box-shadow: 0 0 0 0 rgb(251 113 133 / .75); } 70%, 100% { box-shadow: 0 0 0 6px rgb(251 113 133 / 0); } }
/* Platz im Kopf (gemessen 03.10.2026, Muster 18/23 der Fehlerliste — der Kopf darf nie breiter als der Schirm werden):
   der Name steht erst ab 1260 px dabei und schrumpft mit „…", wenn das Konto lang ist; darunter „● LIVE" (Name im Mauszeiger und für
   Vorleser); 900–1120 px nimmt die Pille „Wink" neben dem Zeichen den Platz weg; unter 900 px nur der pulsierende Punkt. */
.lv-abz { flex: none; }
.lv-name { min-inline-size: 0; }
@media (min-width: 1260px) { .lv-abz { flex: 0 1 auto; min-inline-size: 0; } .wk-rechts:has(.lv-abz) { min-inline-size: 0; } }
@media (max-width: 1259px) { .lv-name { display: none; } }
@media (min-width: 761px) and (max-width: 1120px) {
  .wk-zeile:has(.lv-abz) .wk-dienst span { display: none; }
  .wk-zeile:has(.lv-abz) .wk-dienst { padding-inline-end: .3rem; }
  .lv-abz { padding-inline: .6rem; }
}
@media (min-width: 761px) and (max-width: 899px) { .lv-abz .lv-live { display: none; } .lv-abz { padding-inline: .7rem; } }
@media (max-width: 760px) {
  .lv-abz { block-size: 32px; padding-inline: .6rem; gap: .38rem; font-size: .68rem; }
  .lv-klapp > .nv-tafel.lv-tafel { position: fixed; inset: 62px 8px auto 8px; inline-size: auto; max-inline-size: none; max-block-size: calc(100dvh - var(--leiste-hoehe, 0px) - 80px); overflow-y: auto; }
}
/* Konto-Pille Maß für Maß wie im Kopf von winku.de (btn btn-ghost btn-sm nav-user, avatar-xs): 9/18 px, 7 px Abstand,
   Bild 20 px mittig, Fläche #121726 mit Rand — auf jeder Winku-Seite gleich (Faddi 19.09.2026; vorher 28 px am linken Rand). */
.wk-konto { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: 999px; font-size: .85rem; font-weight: 600; line-height: 1.6; color: var(--text); background: var(--flaeche); border: 1px solid var(--rand); max-inline-size: 15rem; transition: transform .2s, background-color .2s; }
.wk-konto:hover { background: var(--flaeche-3); transform: translateY(-2px); }
.wk-konto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-avatar { inline-size: 20px; block-size: 20px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font-weight: 800; font-size: .62rem; color: #fff; background: linear-gradient(135deg, var(--logo-1), var(--logo-2)); overflow: hidden; }
.wk-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Minecraft-Kopf statt Winku-Bild (lib/namen.js): eckig, pixelgenau, der Buchstabe darunter bleibt, falls der Kopf nicht lädt */
.wk-avatar.mc-kopf { position: relative; border-radius: 3px; }
.wk-avatar.mc-kopf img { position: absolute; inset: 0; image-rendering: pixelated; }
.wk-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 2.4rem; padding: 0 1.1rem; border: 0; border-radius: 999px;
  font: 650 .86rem/1 var(--schrift-text); color: #fff; cursor: pointer; white-space: nowrap;
  background: linear-gradient(120deg, var(--knopf-1), var(--knopf-2)); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--marke-1) 55%, transparent);
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s;
}
.wk-knopf:hover { transform: translateY(-2px); }
.wk-knopf img { inline-size: 18px; block-size: 18px; }
.wk-knopf.neben { color: var(--text-stark); background: color-mix(in srgb, var(--flaeche) 80%, transparent); box-shadow: inset 0 0 0 1px var(--rand-stark); }
/* Gast: der zweite Weg steht leise neben dem Knopf (22.09.2026). „Konto anlegen" und „Anmelden" führen auf dieselbe
   eigene Seite — beide zu nennen nimmt nur die Frage ab, welcher der richtige ist. Auf dem Telefon steht „Anmelden"
   in der Leiste unten (seiten/navigation.js); neben dem Knopf wäre er dort Gedränge. */
.wk-neben { font: 600 .82rem/1 var(--schrift-text); color: var(--text); padding: .5rem .2rem; white-space: nowrap; }
.wk-neben:hover { color: var(--text-stark); text-decoration: underline; }
@media (max-width: 760px) { .wk-neben { display: none; } }

/* Der Fuß selbst (27.09.2026 wiederhergestellt, Faddi: „Footer bisschen verbuggt"): die zwei Regeln waren bei einem Umbau
   verloren gegangen — ohne sie lief der Fuß über die volle Breite, klebte links am Rand, ohne Abstand und Linie. */
.wk-fuss { position: relative; z-index: 2; padding-block: 3.2rem 2rem; background: var(--grund); border-block-start: 1px solid var(--rand); font-size: .88rem; }
.wk-fuss-innen { inline-size: min(100% - 2rem, 1280px); margin-inline: auto; }

/* Fünf Spalten: Marke + Bereiche, Mitreden, Winku, Rechtliches (Nachtwache 24.09.2026: mit nur vier rutschte
   „Rechtliches" allein in eine zweite Reihe unter die Marke). */
.wk-spalten { display: grid; gap: 2.2rem; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.wk-spalten p { color: var(--text-leise); max-inline-size: 30ch; margin-block: .8rem; }
/* .titel ist auch der Titelbildschirm (Abschnitt 3: Raster, mittig, Innenabstand) — hier zurücksetzen, sonst stehen die
   Überschriften im Fuß mittig über linksbündigen Links. */
.wk-spalten .titel { display: block; text-align: start; padding-inline: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); margin-block: 0 .8rem; }
.wk-spalten ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
/* Tippziel mindestens 24 px hoch (UI/UX-Prüfung 23.09.2026: „Status" und „AGB" im Fuß waren 22 px — am Telefon trifft
   man das nicht zuverlässig). Die Zeilen im Fuß stehen ohnehin untereinander, das Raster ändert sich dadurch nicht. */
.wk-spalten li a { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 24px; color: var(--text); }
.wk-spalten li a:hover { color: var(--akzent-2); }
.wk-spalten li img { inline-size: 20px; block-size: 20px; image-rendering: pixelated; }
.wk-status { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rand); color: var(--text); }
.wk-punkt { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--gut) 22%, transparent); }
.wk-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 2.4rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--rand); color: var(--text-leise); font-size: .78rem; }   /* 03.10.2026 Audit texte-06: Herkunftshinweis lesbar (--text-zart nur 2,6:1) */
.wk-unten p { max-inline-size: 70ch; margin: 0; }
@media (max-width: 900px) { .wk-spalten { grid-template-columns: 1fr 1fr; } .wk-spalten > :first-child { grid-column: 1 / -1; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   2. SPIEL-OBERFLÄCHE — Schrift, Knöpfe, Felder, Fenster, Slots, Tooltips
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.mc { font-family: var(--mc-schrift); font-weight: 400; letter-spacing: 0; }
.mc-20 { font: 400 20px/24px var(--mc-schrift); }
.mc-30 { font: 400 30px/36px var(--mc-schrift); }
.mc-40 { font: 400 40px/48px var(--mc-schrift); }
.schatten { text-shadow: 2px 2px 0 var(--mc-schatten); }
.mc-30.schatten { text-shadow: 3px 3px 0 var(--mc-schatten); }
.mc-40.schatten { text-shadow: 4px 4px 0 var(--mc-schatten); }
.c-weiss { color: var(--mc-weiss); } .c-grau { color: var(--mc-grau); } .c-dgrau { color: var(--mc-dunkelgrau); }
.c-rot { color: var(--mc-rot); } .c-drot { color: var(--mc-dunkelrot); } .c-gold { color: var(--mc-gold); } .c-gelb { color: var(--mc-gelb); }
.c-gruen { color: var(--mc-gruen); } .c-dgruen { color: var(--mc-dunkelgruen); } .c-aqua { color: var(--mc-aqua); } .c-lila { color: var(--mc-lila); }

/* Knopf wie im Spiel: Stein-Grau mit Fase, schwarzer Rand; beim Überfahren weißer Rand und gelbliche Schrift */
.mc-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  min-block-size: 44px; padding: 0 18px 2px; border: 2px solid var(--gui-rand); cursor: pointer; user-select: none;
  font: 400 20px/24px var(--mc-schrift); color: #e0e0e0; text-shadow: 2px 2px 0 var(--mc-schatten); white-space: nowrap; text-align: center;
  /* 03.10.2026 Audit texte-10: etwas dunkler als das Stein-Grau von Minecraft (vorher 111 / .82 ≈ 3,8:1 für #e0e0e0), damit die Schrift ≥ 4,5:1 hat */
  background: linear-gradient(rgb(92 92 92 / .9), rgb(92 92 92 / .9)), url("img/tex/stein.png") 0 0 / 32px 32px;
  image-rendering: pixelated;
  box-shadow: inset 2px 2px 0 var(--knopf-licht), inset -2px -4px 0 var(--knopf-schatten);
}
.mc-knopf:hover, .mc-knopf:focus-visible { color: var(--knopf-hover); border-color: #fff; outline: none; }
.mc-knopf:active { box-shadow: inset 2px 4px 0 var(--knopf-schatten), inset -2px -2px 0 var(--knopf-licht); padding-block: 2px 0; }
.mc-knopf:disabled, .mc-knopf[aria-disabled="true"] { cursor: default; color: #a0a0a0; border-color: #000; background: #2c2c2c; box-shadow: inset 2px 2px 0 #404040, inset -2px -4px 0 #1c1c1c; }
.mc-knopf img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; margin-inline-start: -6px; }
/* Ausnahme: eine Abzeichen-Box ist breiter als hoch — sonst quetschte sie die 32×32-Regel oben zum Quadrat (20.09.2026) */
.mc-knopf img.abzeichen-box { inline-size: auto; block-size: 27px; margin-inline-start: 0; image-rendering: auto; flex: none; max-inline-size: 100%; }
.mc-knopf.breit { inline-size: 100%; }
.mc-knopf.klein { min-block-size: 36px; padding: 0 12px 2px; }
/* Hauptaktion: grün getönt (wie „Spielen"), Gefahr: rot getönt */
.mc-knopf.gruen { background: linear-gradient(rgb(46 125 50 / .88), rgb(46 125 50 / .88)), url("img/tex/stein.png") 0 0 / 32px 32px; box-shadow: inset 2px 2px 0 #7bd17f, inset -2px -4px 0 #1b4d1e; color: #fff; }
.mc-knopf.rot { background: linear-gradient(rgb(160 36 36 / .88), rgb(160 36 36 / .88)), url("img/tex/stein.png") 0 0 / 32px 32px; box-shadow: inset 2px 2px 0 #e57373, inset -2px -4px 0 #5c1010; color: #fff; }
.mc-knopf.gold { background: linear-gradient(rgb(166 118 12 / .9), rgb(166 118 12 / .9)), url("img/tex/stein.png") 0 0 / 32px 32px; box-shadow: inset 2px 2px 0 #ffd76a, inset -2px -4px 0 #5a3c05; color: #fff; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knopfreihe.mitte { justify-content: center; }
.knopfreihe.rechts { justify-content: flex-end; }

/* Textfeld wie im Spiel: schwarz, grauer Rand, weißer Rand im Fokus */
.mc-feld, .mc-text, select.mc-feld {
  inline-size: 100%; box-sizing: border-box; min-block-size: 44px; padding: 8px 10px; border: 2px solid #a0a0a0; border-radius: 0;
  background: #000; color: #fff; font: 400 20px/24px var(--mc-schrift); caret-color: #fff;
}
.mc-text { font: 400 16px/1.55 var(--schrift-text); min-block-size: 140px; resize: vertical; }
.mc-feld::placeholder, .mc-text::placeholder { color: #707070; }
.mc-feld:focus, .mc-text:focus { outline: none; border-color: #fff; }
select.mc-feld { appearance: none; cursor: pointer; padding-inline-end: 38px;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h10v2H8v2H6v2H4V4H2V2H0z'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 8px; }
.feld-titel { display: block; margin-block-end: 6px; font: 400 20px/24px var(--mc-schrift); color: #a0a0a0; text-shadow: 2px 2px 0 #000; }
.feld-hilfe { display: block; margin-block-start: 6px; font-size: .84rem; color: #b8b8b8; }
/* Links im Kleingedruckten als Link erkennbar (Nachtwache 24.09.2026: „Zu deinen Freunden" im Konto sah aus wie Text) */
.feld-hilfe a:not(.mc-knopf) { color: #fff; text-decoration: underline; }

/* Fenster: hell wie ein Inventar, dunkel wie ein Menübildschirm, Tooltip lila umrandet */
.mc-inventar {
  position: relative; padding: 14px 16px 16px; background: var(--gui); color: var(--gui-text); border: 2px solid var(--gui-rand); border-radius: 6px;
  box-shadow: inset 4px 4px 0 var(--gui-hell), inset -4px -4px 0 var(--gui-dunkel);
}
.mc-inventar > .fenster-titel { font: 400 20px/24px var(--mc-schrift); color: var(--gui-text); margin: 2px 2px 10px; }
.mc-dunkel { position: relative; padding: 18px 20px; background: var(--schirm); border: 2px solid rgb(0 0 0 / .8); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06); }
.mc-tooltip, .tip-schwebend {
  padding: 8px 10px; background: color-mix(in srgb, var(--tip-grund) 95%, transparent); color: var(--mc-grau);
  border: 2px solid var(--tip-grund); outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--tip-rand-1), inset 0 -2px 0 2px var(--tip-rand-2);
  font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 #1a0a1a;
}
.mc-tooltip b, .tip-schwebend b { font-weight: 400; color: var(--mc-weiss); display: block; }
.tip-schwebend { position: fixed; z-index: 300; pointer-events: none; max-inline-size: min(380px, 90vw); inset: 0 auto auto 0; translate: var(--tip-x, -999px) var(--tip-y, -999px); }
.tip-schwebend .zeile { display: block; }
.tip-schwebend .leise { color: var(--mc-dunkelgrau); }

/* Slots und Items */
.mc-slot {
  position: relative; display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none;
  background: var(--slot); box-shadow: inset 2px 2px 0 var(--slot-dunkel), inset -2px -2px 0 var(--gui-hell);
}
.mc-slot.gross { inline-size: 56px; block-size: 56px; }
.mc-slot > img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.mc-slot.gross > img { inline-size: 48px; block-size: 48px; }
.mc-slot .menge { position: absolute; inset: auto 2px 0 auto; font: 400 20px/1 var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
button.mc-slot, a.mc-slot { cursor: pointer; border: 0; padding: 0; }
button.mc-slot:hover::after, a.mc-slot:hover::after, .mc-slot[aria-pressed="true"]::after, .mc-slot:focus-visible::after { content: ""; position: absolute; inset: 2px; background: rgb(255 255 255 / .45); }
.mc-slot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mc-item { inline-size: 32px; block-size: 32px; image-rendering: pixelated; flex: none; }
.mc-item.i48 { inline-size: 48px; block-size: 48px; } .mc-item.i64 { inline-size: 64px; block-size: 64px; } .mc-item.i96 { inline-size: 96px; block-size: 96px; }
.mc-item.i24 { inline-size: 24px; block-size: 24px; } .mc-item.i16 { inline-size: 16px; block-size: 16px; }
/* 26.09.2026 Das Logo von Plus (seiten/plus.js logo(), NICHT das Plus-Zeichen am Spieler): nur ganze Vielfache seines
   Rasters, damit jeder Pixel scharf bleibt. img.plus-logo.plNN schlägt Regeln wie „.mw-titel img { 24px }". */
img.plus-logo { image-rendering: pixelated; flex: none; vertical-align: -0.22em; }
img.plus-logo.pl16 { inline-size: 16px; block-size: 16px; } img.plus-logo.pl32 { inline-size: 32px; block-size: 32px; }
img.plus-logo.pl64 { inline-size: 64px; block-size: 64px; } img.plus-logo.pl128 { inline-size: 128px; block-size: 128px; }

/* ── DER PLUS-HINWEIS (30.09.2026, Faddi mit Bild der Booster-Liste: „mach das dort das cooler angezeigt wird. überall gleich
 * und geil") — die EINE Stelle für jedes „das gibt es mit Plus" (web/seiten/plus.js plusHinweis): Verlauf und Farben der
 * Plus-Seite (Türkis #3fd0c8, Blau #4da3ff, Eis #c4f4ff, Gold #f5c542 für den Preis — plusseite.css), Pixel-Sterne des
 * Plus-Himmels, ein langsamer Glanz. Klassen plh-… (winku.css kennt keine davon; ph-… gehört plushimmel.css).
 * Regeln: Verlauf ohne Rand (Memory winku-knopf-verlauf-rand — die Kante sind innere Schatten), Logo 32 = 16er-Bild ×2
 * (pixelated nur beim Vergrößern, Muster 19), Glanz nur ohne prefers-reduced-motion, Text bricht um statt über den Rand
 * (Muster 13/18), Knopf rutscht am Telefon unter den Text. Andere Stilblätter setzen hier keine Farben mehr darüber. */
:root {
  --plus-verlauf: linear-gradient(120deg, #0e3a3b 0%, #112148 48%, #271650 100%);
  --plus-kante: inset 0 0 0 2px #000, inset 0 0 0 4px rgb(63 208 200 / .42), inset 0 -6px 0 2px rgb(0 0 0 / .2);
}
.plus-hinweis { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0; padding: 12px 16px; min-inline-size: 0; box-sizing: border-box; border: 0; background: var(--plus-verlauf);
  box-shadow: var(--plus-kante), 0 10px 24px -14px rgb(63 208 200 / .6);
  font: 400 1rem/1.4 var(--schrift-text); color: #e4eefc; text-decoration: none; text-shadow: none; text-align: start; }
/* Sterne rechts, zur Mitte hin weg — liegen in der Kante (inset 4px), nie unter dem Text */
.plus-hinweis::before { content: ""; position: absolute; inset: 4px; z-index: -1; pointer-events: none;
  background: url("img/plus-himmel-sterne.png") 100% 0 / 384px 384px; image-rendering: pixelated; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 90%); mask-image: linear-gradient(90deg, transparent 40%, #000 90%); }
/* Glanz: ein schräger Lichtstreif, alle 8 s einmal quer — nur transform */
.plus-hinweis::after { content: ""; position: absolute; inset: 4px auto 4px 4px; inline-size: 36%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(196 244 255 / .1) 35%, rgb(255 255 255 / .2) 50%, rgb(196 244 255 / .1) 65%, transparent);
  transform: translateX(-120%); }
@media (prefers-reduced-motion: no-preference) {
  .plus-hinweis::after { animation: plus-hinweis-glanz 8s ease-in-out 1.2s infinite; }
}
@keyframes plus-hinweis-glanz { 0% { transform: translateX(-120%); } 28%, 100% { transform: translateX(400%); } }

.plh-logo { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  background: radial-gradient(closest-side, rgb(63 208 200 / .32), transparent); }
.plus-hinweis img.plus-logo { display: block; vertical-align: 0; margin: 0;
  filter: drop-shadow(0 0 6px rgb(63 208 200 / .55)) drop-shadow(2px 2px 0 rgb(0 0 0 / .55)); }
.plh-text { flex: 1 1 11rem; min-inline-size: 0; display: grid; gap: 2px; }   /* 11rem: am Telefon bleibt der Text neben dem Logo */
.plus-hinweis .plh-name { justify-self: start; font: 400 20px/24px var(--mc-schrift); color: #5ff0e6;
  background: linear-gradient(90deg, #5ff0e6, #7cc4ff 55%, #e2fcff); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 0 #041a22); }
.plus-hinweis .plh-satz { color: #e4eefc; font-size: .95rem; overflow-wrap: anywhere; }
.plus-hinweis .plh-preis { justify-self: start; font: 400 16px/20px var(--mc-schrift); color: #f5c542; text-shadow: 2px 2px 0 #3d2c05; }
.plus-hinweis .plh-los, .plus-hinweis .plh-hast { flex: none; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 5px; font: 400 16px/20px var(--mc-schrift); white-space: nowrap; border: 2px solid #000; }
.plus-hinweis .plh-los { color: #062a26; background: #3fd0c8; box-shadow: inset 2px 2px 0 #a8f7f0, inset -2px -3px 0 #1f8f89;
  transition: background-color .15s, transform .15s; }
.plus-hinweis .plh-hast { color: #b8fbf5; background: #0b2f30; box-shadow: inset 0 0 0 2px #2a8f88; }
a.plus-hinweis { cursor: pointer; transition: box-shadow .2s; }
a.plus-hinweis:hover, a.plus-hinweis:focus-visible { color: #e4eefc; text-decoration: none;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px rgb(124 236 228 / .75), inset 0 -6px 0 2px rgb(0 0 0 / .2), 0 10px 28px -12px rgb(63 208 200 / .85); }
a.plus-hinweis:hover .plh-los, a.plus-hinweis:focus-visible .plh-los { background: #7cece4; transform: translateY(-1px); }
a.plus-hinweis:focus-visible { outline: 2px solid #c4f4ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .plus-hinweis .plh-los, a.plus-hinweis { transition: none; } a.plus-hinweis:hover .plh-los { transform: none; } }

/* klein: Pille für Überschriften und Zeilen (Logo 16 = 1:1, ohne Sterne) — „Lackierung [Mit Wink Plus · Hast du ✓]" */
.plus-hinweis.klein { display: inline-flex; flex-wrap: nowrap; vertical-align: middle; gap: 6px; max-inline-size: 100%; padding: 4px 5px 4px 7px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px rgb(63 208 200 / .5), 0 4px 14px -8px rgb(63 208 200 / .7); }
.plus-hinweis.klein::before { display: none; }
.plus-hinweis.klein .plh-logo { inline-size: auto; block-size: auto; background: none; }
.plus-hinweis.klein .plh-text { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.plus-hinweis.klein .plh-name { font-size: 16px; line-height: 20px;   /* Pixelschrift nur in ihren scharfen Größen (16/20) */ }
.plus-hinweis.klein .plh-satz { font-size: .85rem; }
.plus-hinweis.klein .plh-los, .plus-hinweis.klein .plh-hast { margin-inline-start: 2px; padding: 0 6px 2px; font-size: 16px; line-height: 18px; }
a.plus-hinweis.klein:hover, a.plus-hinweis.klein:focus-visible { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px rgb(124 236 228 / .85), 0 4px 16px -6px rgb(63 208 200 / .9); }

/* Schalter als Optionsknopf: „Über dem Kopf: AN" — reines CSS, das Kästchen bleibt für Formulare und Vorleser */
.mc-schalter { position: relative; display: block; cursor: pointer; }
.mc-schalter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mc-schalter .mc-knopf { inline-size: 100%; pointer-events: none; }
.mc-schalter .wert::after { content: attr(data-aus); color: #ff8080; }
/* Optionsknopf: Beschriftung links, Wert rechts, und sie darf umbrechen — sonst steht der Text in einer schmalen
   Spalte über dem Knopfrand (nowrap erbt sie von .mc-knopf). Der Wert bleibt in einer Zeile. */
.mc-schalter .mc-knopf, .zyklus .mc-knopf {
  justify-content: space-between; gap: 10px; padding: 8px 12px 10px; text-align: start; white-space: normal;
}
.mc-schalter .mc-knopf > span:first-child, .zyklus .mc-knopf > span:first-child { min-inline-size: 0; overflow-wrap: break-word; }
.mc-schalter .mc-knopf .wert, .zyklus .mc-knopf .wert { flex: none; white-space: nowrap; }
.mc-schalter input:checked + .mc-knopf .wert::after { content: attr(data-an); color: #80ff80; }
.mc-schalter input:focus-visible + .mc-knopf { border-color: #fff; color: var(--knopf-hover); }
.mc-schalter:hover .mc-knopf { border-color: #fff; color: var(--knopf-hover); }

/* Schieberegler wie im Spiel: Knopfschiene mit einem Griffblock, der Wert steht mittig */
.mc-regler { position: relative; display: block; }
.mc-regler input[type="range"] {
  appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 44px; margin: 0; border: 2px solid #000; cursor: pointer;
  background: #000 linear-gradient(rgb(64 64 64 / .9), rgb(64 64 64 / .9)); box-shadow: inset 2px 2px 0 #1c1c1c;
}
.mc-regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; inline-size: 16px; block-size: 40px; border: 0; cursor: grab;
  background: #7a7a7a; box-shadow: inset 2px 2px 0 #b0b0b0, inset -2px -2px 0 #3a3a3a, 0 0 0 2px #000;
}
.mc-regler input[type="range"]::-moz-range-thumb { inline-size: 16px; block-size: 40px; border: 2px solid #000; border-radius: 0; background: #7a7a7a; box-shadow: inset 2px 2px 0 #b0b0b0, inset -2px -2px 0 #3a3a3a; }
.mc-regler input[type="range"]:focus-visible { outline: none; border-color: #fff; }
.mc-regler .regler-text { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 400 20px/24px var(--mc-schrift); color: #e0e0e0; text-shadow: 2px 2px 0 var(--mc-schatten); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   3. DIE WELT — Himmel, Grasnarbe und Erdschichten. Scrollen heißt graben.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.schicht { position: relative; isolation: isolate; padding-block: 72px; image-rendering: pixelated; }
.schicht > .innen, .innen { inline-size: min(100% - 32px, var(--breite)); margin-inline: auto; position: relative; }
.schicht-erde { background: linear-gradient(rgb(20 12 6 / .72), rgb(20 12 6 / .78)), url("img/tex/erde.png") 0 0 / 64px 64px; }
.schicht-stein { background: linear-gradient(rgb(10 10 12 / .7), rgb(10 10 12 / .76)), url("img/tex/stein.png") 0 0 / 64px 64px; }
.schicht-erz { background: linear-gradient(rgb(10 10 12 / .66), rgb(10 10 12 / .74)), url("img/tex/stein.png") 0 0 / 64px 64px; }
.schicht-erz::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background: url("img/tex/diamanterz.png") 13% 18% / 64px 64px no-repeat, url("img/tex/golderz.png") 86% 30% / 64px 64px no-repeat,
              url("img/tex/redstoneerz.png") 70% 88% / 64px 64px no-repeat, url("img/tex/smaragderz.png") 6% 82% / 64px 64px no-repeat;
  filter: brightness(.55);
}
.schicht-tief { background: linear-gradient(rgb(6 6 10 / .66), rgb(6 6 10 / .76)), url("img/tex/tiefenschiefer.png") 0 0 / 64px 64px; }
.schicht-holz { background: linear-gradient(rgb(24 14 6 / .55), rgb(24 14 6 / .7)), url("img/tex/holz.png") 0 0 / 64px 64px; }
.grund-rand { block-size: 64px; background: url("img/tex/grundgestein.png") 0 0 / 64px 64px; box-shadow: inset 0 12px 24px rgb(0 0 0 / .6); image-rendering: pixelated; }
/* Grasnarbe: eine Reihe Grasblöcke, darunter beginnt die Erde */
.grasnarbe { block-size: 64px; background: url("img/tex/gras-seite.png") 0 0 / 64px 64px repeat-x; image-rendering: pixelated; position: relative; z-index: 1; box-shadow: 0 16px 24px -8px rgb(0 0 0 / .6); }
.uebergang-stein { block-size: 32px; background: linear-gradient(rgb(20 12 6 / .75), rgb(10 10 12 / .7)), url("img/tex/bruchstein.png") 0 0 / 64px 64px; image-rendering: pixelated; }

/* Tiefenanzeige am Rand: „Y 64" … „Y -58" — die Höhe, in der man gerade gräbt */
.tiefe { position: absolute; inset: 20px auto auto 16px; font: 400 20px/1 var(--mc-schrift); color: rgb(255 255 255 / .45); text-shadow: 2px 2px 0 #000; }
.tiefe[data-y]::before { content: "Y " attr(data-y); }
@media (max-width: 700px) { .tiefe { display: none; } }

/* Himmel über dem Titel — er folgt der Tageszeit (js/himmel.js): Sonne und Mond stehen, wo die Sonne gerade über Deutschland
   steht, die Farben folgen der Sonnenhöhe, der Mond zeigt die echte Phase. Das Skript setzt die Variablen unten; ohne Skript
   gilt die Voreinstellung zu data-tageszeit, die der Server mitschickt (fehlt sie: Nacht). */
.himmel {
  --h0: #050814; --h1: #0b1433; --h2: #1b2a5c; --h3: #2a3c78;
  --sterne-a: 1; --wolke: rgb(255 255 255 / .09); --huegel: #0e1a14; --glanz: 1;
  --glut: #ff7a45; --glut-a: 0; --glut-x: 50%;
  --sonne-x: 50%; --sonne-y: 110%; --sonne-a: 0; --sonne-farbe: #ffd966;
  --mond-x: 86%; --mond-y: 13%; --mond-a: 1;
  --oben: 36px;                  /* höchster Punkt von Sonne und Mond: über dem Schriftzug, nicht dahinter */
  /* Oben 32 px statt 72 px (26.09.2026): die Bereichsleiste steht jetzt darüber — sonst lag auf einem 720er-Laptop der
     Hügel mit dem Hinweis aufs Titelspiel (Erzrausch) unter dem Rand. Höhe: ein Bildschirm unter Kopf und Bereichsleiste
     (--nav-oben), am Telefon auch über der Leiste unten. */
  position: relative; isolation: isolate; overflow: hidden; padding-block: 32px 0;
  min-block-size: min(760px, calc(100svh - var(--nav-oben) - var(--leiste-hoehe)));
  display: grid; grid-template-rows: 1fr auto auto;
  background: linear-gradient(180deg, var(--h0) 0%, var(--h1) 42%, var(--h2) 78%, var(--h3) 100%);
}
.himmel[data-tageszeit="morgendaemmerung"], .himmel[data-tageszeit="abenddaemmerung"] {
  --h0: #0f1d4c; --h1: #213576; --h2: #4c5da2; --h3: #8f78a6; --sterne-a: .6; --wolke: rgb(230 205 230 / .2); --huegel: #12211a; --glanz: .7;
  --glut: #c77aa6; --glut-a: .45; --mond-a: 1; }
.himmel[data-tageszeit="morgenrot"], .himmel[data-tageszeit="abendrot"] {
  --h0: #2a52a4; --h1: #5a7cc2; --h2: #c49ab8; --h3: #ffa566; --sterne-a: 0; --wolke: rgb(255 210 190 / .7); --huegel: #1b2d21; --glanz: .3;
  --glut: #ff9e70; --glut-a: .8; --sonne-y: 80%; --sonne-a: 1; --sonne-farbe: #ffae42; --mond-a: 0; }
.himmel[data-tageszeit="morgendaemmerung"], .himmel[data-tageszeit="morgenrot"] { --glut-x: 14%; --sonne-x: 14%; --mond-x: 86%; --mond-y: 80%; }
.himmel[data-tageszeit="abenddaemmerung"], .himmel[data-tageszeit="abendrot"] { --glut: #ff7a45; --glut-x: 86%; --sonne-x: 86%; --mond-x: 14%; --mond-y: 80%; }
.himmel[data-tageszeit="tag"] {
  --h0: #4a84e0; --h1: #7aaaf1; --h2: #a8caf7; --h3: #d2e5fc; --sterne-a: 0; --wolke: rgb(255 255 255 / .9); --huegel: #2a5232; --glanz: .15;
  --sonne-x: 50%; --sonne-y: 5%; --sonne-a: 1; --sonne-farbe: #ffeb8f; --mond-a: 0; }
/* Leuchten in der Bereichsfarbe über dem Horizont (nachts am stärksten) und Morgen-/Abendrot um die Sonne */
.himmel::before, .himmel::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.himmel::before { opacity: var(--glanz); background: radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--marke-1) 38%, transparent), transparent 65%); }
.himmel::after { opacity: var(--glut-a); background: radial-gradient(75% 70% at var(--glut-x) 88%, var(--glut), transparent 72%); }
.himmel .sterne { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: var(--sterne-a);
  background-image:
    radial-gradient(2px 2px at 8% 12%, #fff 98%, transparent), radial-gradient(2px 2px at 22% 34%, #fff 98%, transparent),
    radial-gradient(2px 2px at 37% 8%, #fff 98%, transparent), radial-gradient(2px 2px at 48% 26%, #cfe3ff 98%, transparent),
    radial-gradient(2px 2px at 63% 14%, #fff 98%, transparent), radial-gradient(2px 2px at 76% 38%, #fff 98%, transparent),
    radial-gradient(2px 2px at 88% 9%, #ffe9b0 98%, transparent), radial-gradient(2px 2px at 94% 30%, #fff 98%, transparent),
    radial-gradient(2px 2px at 14% 52%, #cfe3ff 98%, transparent), radial-gradient(2px 2px at 57% 48%, #fff 98%, transparent),
    radial-gradient(2px 2px at 30% 60%, #fff 98%, transparent), radial-gradient(2px 2px at 82% 56%, #fff 98%, transparent);
}
/* Sonne und Mond: eckig, mit hellem Kern; der Mond mit Kratern und Schatten nach der Phase (data-phase 0 Neumond … 4 Vollmond) */
.himmel .sonne, .himmel .mond { position: absolute; z-index: -1; pointer-events: none; translate: -50% -50%; }
.himmel .sonne {
  inline-size: 64px; block-size: 64px; left: var(--sonne-x); top: max(var(--oben), var(--sonne-y)); opacity: var(--sonne-a); background: #fffdf0;
  box-shadow: inset 0 0 0 10px var(--sonne-farbe), 0 0 0 8px color-mix(in srgb, var(--sonne-farbe) 38%, transparent),
              0 0 0 16px color-mix(in srgb, var(--sonne-farbe) 16%, transparent), 0 0 160px 60px color-mix(in srgb, var(--sonne-farbe) 45%, transparent);
}
.himmel .mond { inline-size: 64px; block-size: 64px; left: var(--mond-x); top: max(var(--oben), var(--mond-y)); opacity: var(--mond-a); background: #f4f1d6; box-shadow: 0 0 0 8px rgb(244 241 214 / .08), 0 0 80px 20px rgb(244 241 214 / .18); }
.himmel .mond::after { content: ""; position: absolute; inset: 14px 30px 34px 12px; background: #d9d4b0; box-shadow: 22px 18px 0 -2px #d9d4b0, 10px 30px 0 -4px #e2ddb9; }
.himmel .mond::before { content: ""; position: absolute; inset: -1px; z-index: 1; background: rgb(9 14 36 / .8); clip-path: inset(0 0 0 100%); }
.himmel .mond[data-phase="0"]::before { clip-path: inset(0); }
.himmel .mond[data-phase="1"]::before { clip-path: inset(0 25% 0 0); }
.himmel .mond[data-phase="2"]::before { clip-path: inset(0 50% 0 0); }
.himmel .mond[data-phase="3"]::before { clip-path: inset(0 75% 0 0); }
.himmel .mond[data-phase="5"]::before { clip-path: inset(0 0 0 75%); }
.himmel .mond[data-phase="6"]::before { clip-path: inset(0 0 0 50%); }
.himmel .mond[data-phase="7"]::before { clip-path: inset(0 0 0 25%); }
.himmel .mond[data-phase="0"] { box-shadow: none; }
/* Wolken aus Blöcken — nachts ein Hauch, tagsüber weiß, im Abendrot rosa */
.himmel .wolke { position: absolute; z-index: -1; block-size: 32px; background: var(--wolke); box-shadow: 32px -16px 0 0 var(--wolke), 64px 0 0 0 var(--wolke); }
.himmel .w1 { inset: 120px auto auto -10%; inline-size: 192px; }
.himmel .w2 { inset: 236px auto auto -30%; inline-size: 128px; }
@media (prefers-reduced-motion: no-preference) {
  .himmel .w1 { animation: wolken 90s linear infinite; }
  .himmel .w2 { animation: wolken 130s linear infinite -40s; }
  .himmel .sterne { animation: funkeln 6s steps(2) infinite; }
}
@keyframes wolken { to { translate: 140vw 0; } }
@keyframes funkeln { 50% { filter: opacity(.75); } }
/* Hügel in Blockstufen am unteren Rand (Treppen statt Kurven), darunter derselbe Boden bis zur Grasnarbe */
.huegel { position: relative; z-index: -1; block-size: 120px; margin-block-start: -40px; pointer-events: none;
  background:
    linear-gradient(var(--huegel), var(--huegel)) 0 64px / 100% 56px no-repeat,
    linear-gradient(var(--huegel), var(--huegel)) 6% 32px / 18% 32px no-repeat, linear-gradient(var(--huegel), var(--huegel)) 9% 0 / 8% 32px no-repeat,
    linear-gradient(var(--huegel), var(--huegel)) 40% 40px / 26% 24px no-repeat, linear-gradient(var(--huegel), var(--huegel)) 46% 16px / 10% 24px no-repeat,
    linear-gradient(var(--huegel), var(--huegel)) 78% 24px / 22% 40px no-repeat, linear-gradient(var(--huegel), var(--huegel)) 84% 0 / 8% 24px no-repeat;
}
/* Die Grasnarbe unter dem Himmel bekommt dessen Licht (nachts dunkler) */
.himmel + .grasnarbe { filter: brightness(var(--licht, 1)); }
.himmel:not([data-tageszeit]) + .grasnarbe, .himmel[data-tageszeit="nacht"] + .grasnarbe { --licht: .62; }
.himmel[data-tageszeit$="daemmerung"] + .grasnarbe { --licht: .7; }
.himmel[data-tageszeit$="rot"] + .grasnarbe { --licht: .84; }

/* ── Titelbildschirm: Schriftzug, gelber Spruch, Menüknöpfe ──────────────────────────────────────────────────── */
.titel { display: grid; justify-items: center; gap: 34px; text-align: center; padding-inline: 16px; }
/* Schriftzug als Pixelbild (werkzeug/titel-bauen.js: Blöcke mit Kante, Tiefe und schwarzem Umriss — lesbar auf jedem
   Himmel). Beide Bilder sind 41 px hoch: die Höhe setzt das Vielfache (3× am PC, 2× auf dem Tablet), die Breite folgt.
   Der Untertitel ist Text in der Pixelschrift, im selben Vielfachen. */
.titel-kopf { display: grid; justify-items: center; gap: 18px; }
.titel-kopf h1 { margin: 0; }
.titel-bild-rahmen { position: relative; }
.titel-bild {
  display: block; block-size: 123px; inline-size: auto; image-rendering: pixelated;
  filter: drop-shadow(0 12px 0 rgb(0 0 0 / .18)) drop-shadow(0 0 44px color-mix(in srgb, var(--marke-1) 42%, transparent));
}
.titel-unter { margin: 0; font: 400 30px/36px var(--mc-schrift); letter-spacing: 3px; color: #fff; text-shadow: 3px 3px 0 var(--mc-schatten), 0 0 14px rgb(0 0 0 / .35); }
/* Fließtext am hellen Taghimmel auf einer dunklen Tafel wie der Chat im Spiel — nachts unsichtbar (--glanz 1 = Nacht) */
.himmel .untertitel, .himmel .held-zeile .text { padding: 10px 18px; background: rgb(6 10 26 / calc((1 - var(--glanz)) * .55)); }
.himmel .held-zeile .text { padding: 22px 26px; }
.logo-mit-spruch { position: relative; display: inline-block; }
/* Gelber Spruch wie im Spiel: schräg rechts am Schriftzug, pulsiert, lange Sprüche kleiner (--spruch-skala setzt seite.js) */
.spruch {
  all: unset; position: absolute; inset: auto -40px -6px auto; cursor: pointer; white-space: nowrap;
  font: 400 30px/1 var(--mc-schrift); color: var(--mc-gelb); text-shadow: 3px 3px 0 #3f3f15, 0 0 10px rgb(0 0 0 / .4); rotate: -18deg; transform-origin: 50% 50%;
  scale: var(--spruch-skala, 1);
}
.titel-bild-rahmen .spruch { inset: auto; left: 94%; top: 74%; translate: -50% -50%; }
.spruch:focus-visible { outline: 2px dashed var(--mc-gelb); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) { .spruch { animation: spruch-puls .6s ease-in-out infinite alternate; } }
@keyframes spruch-puls { from { scale: var(--spruch-skala, 1); } to { scale: calc(var(--spruch-skala, 1) * 1.08); } }
.menue { display: grid; gap: 12px; inline-size: min(400px, 100%); }
.menue .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Schmales Telefon: die zwei Titelspiel-Knöpfe untereinander — nebeneinander wurde „Hochstapler" abgeschnitten (22.09.2026) */
@media (max-width: 420px) { .menue .zwei { grid-template-columns: minmax(0, 1fr); } }
.untertitel { max-inline-size: 42rem; margin: 0 auto; color: #d6dcf0; font-size: 1.08rem; line-height: 1.6; text-shadow: 0 2px 12px #000; }
.titel-fuss { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); background: var(--huegel); }
.titel-fuss span:last-child { text-align: end; }
@media (max-width: 799px) {
  .titel-bild { block-size: 82px; }
  .titel-unter { font-size: 20px; line-height: 24px; letter-spacing: 2px; }
  .spruch { font-size: 20px; }
}
@media (max-width: 519px) {
  .titel-kopf, .titel-bild-rahmen { justify-self: stretch; }
  .titel-bild { block-size: auto; inline-size: 100%; }
  .titel-bild-rahmen .spruch { left: 68%; top: 100%; }
  .titel-kopf { gap: 46px; }
  .titel-fuss { font-size: 10px; line-height: 12px; }
}

/* ── Abschnittsköpfe in der Welt ─────────────────────────────────────────────────────────────────────────── */
.kopfzeile-welt { display: grid; gap: 10px; justify-items: center; text-align: center; margin-block-end: 36px; }
.kopfzeile-welt :is(h1, h2) { margin: 0; font: 400 40px/48px var(--mc-schrift); color: #fff; text-shadow: 4px 4px 0 var(--mc-schatten); }
.kopfzeile-welt p { margin: 0; max-inline-size: 44rem; color: #cfd3dc; font-size: 1.02rem; line-height: 1.6; }
.kopfzeile-welt .ueber { font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
@media (max-width: 600px) { .kopfzeile-welt :is(h1, h2) { font-size: 30px; line-height: 36px; } }

/* ── Portale zu den Bereichen ───────────────────────────────────────────────────────────────────────────── */
.portale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.portal { display: grid; justify-items: center; gap: 18px; text-align: center; color: inherit; }
.portal-rahmen {
  position: relative; inline-size: min(100%, 256px); aspect-ratio: 4 / 5; padding: 32px; box-sizing: border-box;
  background: url("img/tex/obsidian.png") 0 0 / 32px 32px; image-rendering: pixelated;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8), 0 0 0 2px #000;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.portal-wirbel {
  position: relative; display: grid; place-items: center; inline-size: 100%; block-size: 100%; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .1) 0 8px, transparent 8px 24px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / .18) 0 8px, transparent 8px 24px),
    radial-gradient(circle at 50% 50%, var(--portal-hell), var(--portal-dunkel));
  box-shadow: inset 0 0 40px rgb(0 0 0 / .6);
}
.portal[data-portal="scamradar"] { --portal-hell: #ff6a3d; --portal-dunkel: #6d0f16; }
.portal[data-portal="arcade"] { --portal-hell: #ffd35c; --portal-dunkel: #8a1d5a; }
.portal[data-portal="spawn"] { --portal-hell: #b98cff; --portal-dunkel: #3a0f6e; }
.portal[data-portal="plaza"] { --portal-hell: #5cf0a0; --portal-dunkel: #0b5a3c; }
/* Drei Portale nebeneinander (Start, 03.10.2026): schmaler Abstand, Schilder dürfen schrumpfen */
.portale[data-drei] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .portale[data-drei] { grid-template-columns: 1fr; gap: 36px; } }
.portal-wirbel img { inline-size: 96px; block-size: 96px; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgb(0 0 0 / .35)); }
@media (prefers-reduced-motion: no-preference) {
  .portal-wirbel { background-size: 34px 34px, 34px 34px, 100% 100%; animation: wirbeln 3s linear infinite; }
  .portal-wirbel img { animation: schweben 3s ease-in-out infinite; }
  .portal:hover .portal-wirbel, .portal:focus-visible .portal-wirbel { animation-duration: .8s; }
}
@keyframes wirbeln { to { background-position: 34px 34px, -34px 34px, 0 0; } }
@keyframes schweben { 50% { translate: 0 -10px; } }
.portal:hover .portal-rahmen, .portal:focus-visible .portal-rahmen { transform: translateY(-6px) scale(1.02); box-shadow: 0 40px 80px -20px color-mix(in srgb, var(--portal-hell) 60%, transparent), 0 0 0 2px #fff; }
.portal:focus-visible { outline: none; }
.portal-schild { max-inline-size: 22rem; }
@media (max-width: 700px) { .portale { grid-template-columns: 1fr; gap: 36px; } }

/* ── Schild aus Holz (Portale, Hinweise, „Was nicht zurückkommt", Einsätze) ──────────────────────────────────
   Lesbar (Faddi 19.09.2026: „cool, aber man kann nicht wirklich lesen"): helle Lasur über den Planken — Maserung 2,3:1 → 1,4:1,
   Schrift #1a1007 mindestens 7:1 auf jedem Pixel der Textur (vorher 2,25:1). Nie wieder Schrift direkt auf holz.png. */
.holzschild {
  position: relative; display: grid; gap: 6px; padding: 14px 18px 16px; text-align: center; color: #1a1007;
  background: linear-gradient(rgb(248 220 166 / .55), rgb(248 220 166 / .55)), url("img/tex/holz.png") 0 0 / 64px 64px;
  image-rendering: pixelated; border: 4px solid #3b2410;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .2), inset 0 -4px 0 rgb(59 36 16 / .22), 0 16px 30px -12px rgb(0 0 0 / .8);
}
.holzschild b { display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 20px/24px var(--mc-schrift); color: #1a1007; }
.holzschild b .mc-item { flex: none; }
.holzschild span { font-size: 1rem; line-height: 1.45; color: #1a1007; font-weight: 700; }
.holzschild.mit-pfahl { margin-block-end: 44px; }
.holzschild.mit-pfahl::after { content: ""; position: absolute; inset: calc(100% + 4px) auto auto 50%; inline-size: 16px; block-size: 40px; translate: -50% 0; background: url("img/tex/holz.png") 24px 0 / 64px 64px; border: 4px solid #3b2410; border-block-start: 0; }
/* Drei oder vier Schilder in einer Reihe, mittig und GLEICH HOCH (20.09.2026: bei „Einsätze" hingen sie auf drei
   verschiedenen Höhen und die Pfähle standen versetzt). Flex statt fester Spalten — dann passt jede Anzahl. */
.schilder { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; }
.schilder > * { flex: 1 1 230px; max-inline-size: 300px; align-content: center; }
@media (max-width: 460px) { .schilder > * { flex-basis: 100%; max-inline-size: none; } }
/* Beträge als eigene Steine: „$100,000" reißt sonst mitten im Satz um. */
.schild-stufen { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-block-start: 2px; }
.schild-stufen span { padding: 1px 7px 2px; font: 400 17px/22px var(--mc-schrift); color: #1a1007;
  background: rgb(59 36 16 / .14); box-shadow: inset 0 0 0 2px rgb(59 36 16 / .35); white-space: nowrap; }
.schild-stufen span.ohne { background: rgb(59 36 16 / .04); }

/* ── Fortschritte (wie der Fortschrittsbaum im Spiel) ────────────────────────────────────────────────────── */
.fortschritte { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; position: relative; }
/* Eine Spalte, die sich an den Platz hält: ohne Vorlage nahm der Schritt die Breite seines längsten Satzes (420 px
   in einer 244-px-Spalte) — die Sätze zweier Schritte schoben sich ineinander (22.09.2026). */
.fortschritt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding-inline: 8px; text-align: center; }
.fortschritt::before { content: ""; position: absolute; inset: 34px -50% auto 50%; block-size: 4px; background: #5a5a5a; box-shadow: 0 2px 0 #000; z-index: -1; }
.fortschritt:last-child::before { display: none; }
.fortschritt[data-erreicht]::before { background: #f5c542; }
.fortschritt-rahmen {
  display: grid; place-items: center; inline-size: 72px; block-size: 72px; background: #3a3a3a; border: 4px solid #1b1b1b;
  box-shadow: inset 4px 4px 0 #6a6a6a, inset -4px -4px 0 #262626;
}
.fortschritt[data-art="ziel"] .fortschritt-rahmen { border-radius: 18px; }
.fortschritt[data-erreicht] .fortschritt-rahmen { background: #c7922b; box-shadow: inset 4px 4px 0 #ffe08a, inset -4px -4px 0 #7a5410; }
.fortschritt-rahmen img { inline-size: 48px; block-size: 48px; image-rendering: pixelated; }
.fortschritt:not([data-erreicht]) .fortschritt-rahmen img { filter: grayscale(1) brightness(.7); }
/* Schritt, den ein Gast sofort tun kann (Start, 03.10.2026): volle Farbe statt „gesperrt"-Grau; offen-ziel = abgerundet wie ziel */
.fortschritt[data-art^="offen"] .fortschritt-rahmen img { filter: none; }
.fortschritt[data-art="offen-ziel"] .fortschritt-rahmen { border-radius: 18px; }
.fortschritt b { font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.fortschritt[data-erreicht] b { color: var(--mc-gelb); }
.fortschritt p { margin: 0; font-size: .9rem; line-height: 1.5; color: #d4d8e0; }
.fortschritt p code { font-family: var(--mc-schrift); font-size: 20px; color: var(--mc-aqua); background: rgb(0 0 0 / .5); padding: 0 4px; }
.fortschritt .mc-knopf { margin-block-start: 4px; }
/* Knopf nie breiter als seine Spalte — sonst überlappt er den Schritt daneben (23.09.2026) */
.fortschritt .mc-knopf { max-inline-size: 100%; white-space: normal; }
@media (max-width: 800px) {
  .fortschritte { grid-auto-flow: row; grid-auto-columns: auto; gap: 28px; }
  .fortschritt { grid-template-columns: 72px 1fr; justify-items: start; text-align: start; column-gap: 16px; }
  .fortschritt > :not(.fortschritt-rahmen) { grid-column: 2; }
  .fortschritt .fortschritt-rahmen { grid-row: span 3; }
  .fortschritt::before { inset: 72px auto -28px 34px; inline-size: 4px; block-size: auto; }
}

/* ── Werte als Anzeigetafel (Scoreboard am rechten Rand im Spiel) ───────────────────────────────────────── */
.anzeigetafel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0 8px; background: rgb(0 0 0 / .42); min-inline-size: 240px; font: 400 20px/28px var(--mc-schrift); }
.anzeigetafel .tafel-titel { text-align: center; color: var(--mc-gold); background: rgb(0 0 0 / .28); margin: -6px 0 6px; padding: 4px 12px; text-shadow: 2px 2px 0 #3f2a00; }
.anzeigetafel a, .anzeigetafel div.zeile { display: flex; justify-content: space-between; gap: 24px; padding: 0 12px; color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.anzeigetafel a:hover { background: rgb(255 255 255 / .08); }
/* 27.09.2026 Namen in Ranglisten führen zum Profil — ein Link IM Text, keine eigene Tafelzeile */
.anzeigetafel a.rang-name { display: inline; padding: 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.anzeigetafel a.rang-name:hover, .anzeigetafel a.rang-name:focus-visible { background: none; text-decoration: underline; }
.anzeigetafel .punkte { color: var(--mc-rot); }

/* ── Chat wie im Spiel ─────────────────────────────────────────────────────────────────────────────────── */
.mc-chat { display: grid; gap: 0; font: 400 20px/26px var(--mc-schrift); }
.mc-chat > p, .mc-chat > li { margin: 0; padding: 1px 8px; background: rgb(0 0 0 / .5); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); overflow-wrap: anywhere; }
.mc-chat .zeit { color: var(--mc-dunkelgrau); }
.mc-chat .zeile-neu { animation: chat-rein .35s ease-out both; }
@keyframes chat-rein { from { opacity: 0; translate: 0 8px; } }

/* ── Minecraft-Text wie auf HugoSMP (web/seiten/mc.js mcText, public/js/namen.js) ─────────────────────────────
   Farbe je Stück aus lib/hugostil.js (seite.js setzt sie aus data-c), Schatten eine Schrift-Einheit versetzt in einem
   Viertel der Farbe (--sch) — so zeichnet Minecraft. Fett = dieselbe Glyphe eine Einheit weiter rechts, eine Einheit mehr
   Abstand. Eine Einheit der Spawn-Pixel-Schrift ist 0,1 em (bei 20 px also 2 px). */
.mc-t { white-space: pre; }
.mc-chat .mc-t { white-space: pre-wrap; }   /* im Chat umbrechen wie im Spiel, in Tab-Liste und Namensschild nie */
.mc-t > span { text-shadow: .1em .1em 0 var(--sch, #313131); }
.mc-t > span.f { text-shadow: .1em 0 0 currentColor, .1em .1em 0 var(--sch, #313131), .2em .1em 0 var(--sch, #313131); letter-spacing: .1em; }
/* Unterstrichen/kursiv wie im Spiel (Clan-Kürzel wie [RUST], [LIVE]) — die Linie in der Farbe des Buchstabens */
.mc-t > span.u { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .15em; }
.mc-t > span.i { font-style: italic; }
/* Bildzeichen des Ressourcenpakets (Rang des Clans, lib/paketzeichen.js): Höhe und Lage aus data-h/data-a (seite.js),
   eine Spieleinheit = .1em; ohne Skript 0,8 em wie ein normales Zeichen. Pixelbild — nie weichzeichnen. */
.mc-t > img.mc-g { display: inline-block; block-size: .8em; inline-size: auto; vertical-align: -.1em; margin-inline: .1em; image-rendering: pixelated; }
/* 29.09.2026 CLAN-AUSSEHEN ÜBER PLUS (lib/clanwink.js): Wechsel = jeder Buchstabe pendelt zwischen seiner und der anderen Farbe
   (die Nachbarn tauschen), Verlauf = die Farbwelle wandert über das Kürzel (--wd). Die Farben setzt seite.js aus data-wa/-wb.
   Ohne Bewegung (prefers-reduced-motion) bleibt das ruhende Bild aus data-c. Seit 30.09.2026 KEIN Funke mehr dahinter: der Hinweis
   „Clan-Aussehen mit Plus" steht beim Draufzeigen (data-wk-o, js/seite.js). */
.mc-t > span.wk-w { animation: wk-pendeln 1.2s ease-in-out infinite alternate; }
.mc-t > span.wk-v { animation: wk-pendeln 1.2s ease-in-out infinite alternate; animation-delay: var(--wd, 0s); }
@keyframes wk-pendeln { from { color: var(--wa); } to { color: var(--wb); } }
.mc-t > [data-wk-o] { cursor: help; }
@media (prefers-reduced-motion: reduce) { .mc-t > span.wk-w, .mc-t > span.wk-v { animation: none; } }

/* ── Toasts wie „Fortschritt erzielt!" — für jede Rückmeldung nach einem Formular ────────────────────────── */
.toasts { position: fixed; inset: 76px 16px auto auto; z-index: 250; display: grid; gap: 10px; pointer-events: none; }
.toast {
  pointer-events: auto; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; inline-size: min(400px, calc(100vw - 32px));
  padding: 10px 12px; background: #212121; border: 2px solid #000; box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #111, 0 18px 40px -12px rgb(0 0 0 / .8);
  font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten);
}
.toast .ueber { display: block; color: var(--mc-gelb); }
.toast[data-art="fehler"] .ueber { color: var(--mc-rot); }
.toast .text { font: 500 .88rem/1.4 var(--schrift-text); text-shadow: none; color: #e8e8e8; display: block; margin-block-start: 2px; }
.toast button { all: unset; cursor: pointer; color: #aaa; padding: 4px 6px; font: 400 20px/1 var(--mc-schrift); }
.toast button:hover { color: #fff; }
/* 27.09.2026 Plus-Beta: „Plus holen" unter dem Text (js/arcade-live.js, grund 'plus') */
.toast .toast-plus { display: inline-flex; margin-block-start: 8px; text-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-rein .5s cubic-bezier(.16,1,.3,1) both; } }
@keyframes toast-rein { from { translate: 110% 0; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   4. NAVIGATION (seiten/navigation.js, 26.09.2026) — Faddi: „viel zu komplex … das Inventar unten sieht keiner".
      Hauptbereiche im Kopf (Telefon: Leiste unten), genau EINE Bereichsleiste darunter, Konto-Menü rechts.
      Jeder Bereich trägt seine Farbe (--nv-farbe), damit man auch an der Leiste sieht, wo man ist.
      Aufklappen über <details> (kein Skript nötig); Flächen voll deckend (Muster 32 der Fehlerliste).
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
[data-nv="start"], [data-nv-bereich="start"] { --nv-farbe: #8b5cf6; }
[data-nv="scamradar"], [data-nv-bereich="scamradar"] { --nv-farbe: #ef4444; }
[data-nv="arcade"], [data-nv-bereich="arcade"] { --nv-farbe: #f59e0b; }
[data-nv="plaza"], [data-nv-bereich="plaza"] { --nv-farbe: #2dd4bf; }
[data-nv-bereich="team"], [data-nv-bereich="konto"], [data-nv="konto"], [data-nv="anmelden"] { --nv-farbe: #22d3ee; }

/* Hauptnavigation im Kopf */
.nv-haupt { display: flex; gap: .3rem; margin-inline: auto; }
.nv-haupt-reiter { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .5rem; border-radius: 999px; white-space: nowrap;
  font-size: .92rem; font-weight: 650; color: var(--text-leise); transition: color .14s, background-color .14s; }
.nv-haupt-reiter img { inline-size: 24px; block-size: 24px; image-rendering: pixelated; flex: none; }
.nv-haupt-reiter:hover { color: var(--text-stark); background: color-mix(in srgb, #fff 6%, transparent); }
.nv-haupt-reiter:focus-visible, .nv-reiter:focus-visible, .nv-wo:focus-visible, .nv-klapp > summary:focus-visible, .nv-tafel a:focus-visible,
.nv-abmelden button:focus-visible, .nv-unten-platz:focus-visible, .wk-dienst:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.nv-haupt-reiter[aria-current] { color: #fff; background: color-mix(in srgb, var(--nv-farbe) 30%, var(--grund)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nv-farbe) 70%, transparent); }

/* Aufklappen (Mehr ▾, Konto-Menü) */
.nv-klapp { position: relative; flex: none; }
.nv-klapp > summary { list-style: none; cursor: pointer; }
.nv-klapp > summary::-webkit-details-marker { display: none; }
.nv-klapp[open] > summary .pfeil, .nv-klapp[open] > summary .nv-pfeil { rotate: 180deg; }
.wk-konto .pfeil { inline-size: 14px; block-size: 14px; color: var(--text-leise); transition: rotate .2s; flex: none; }
.wk-konto[data-aktiv] { border-color: color-mix(in srgb, var(--fokus) 60%, var(--rand)); }
.nv-tafel { position: absolute; inset: calc(100% + 8px) 0 auto auto; z-index: 90; display: grid; gap: 2px; min-inline-size: 16rem; max-inline-size: min(22rem, calc(100vw - 16px));
  padding: .4rem; box-sizing: border-box; background: var(--flaeche); border: 1px solid var(--rand-stark, var(--rand)); border-radius: .9rem; box-shadow: 0 24px 60px -12px rgb(0 0 0 / .8); }
.nv-tafel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* 28.09.2026 (Faddi, Bild: „Benachrichtigunge / n" im Konto-Menü, Glocke + rote 5): Die Zeile hatte vier feste Spalten —
   ohne Zusatz blieb eine leer und kostete trotzdem einen Abstand, und overflow-wrap:anywhere schnitt das Wort dann mitten
   durch. Jetzt: Bild und Name fest, Zusatz und Zahl bekommen nur eine Spalte, wenn es sie gibt (grid-auto-flow: column);
   der Name bricht nur an den weichen Trennstellen (navigation.js trennbar → „Benach-richti-gungen"), nie mitten im Wort. */
.nv-tafel a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-columns: auto; grid-auto-flow: column; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: .6rem;
  color: var(--text); font: 600 .9rem/1.3 var(--schrift-text); text-decoration: none; }
.nv-tafel a > span { overflow-wrap: break-word; hyphens: manual; }
.nv-tafel a:hover, .nv-tafel a[aria-current], .nv-abmelden button:hover { background: var(--flaeche-3); color: var(--text-stark); }
.nv-tafel a[aria-current] { box-shadow: inset 3px 0 0 var(--nv-farbe, var(--fokus)); }
.nv-tafel img { inline-size: 16px; block-size: 16px; image-rendering: pixelated; }
.nv-konto-tafel img { inline-size: 32px; block-size: 32px; }
/* 32-px-Bilder + rote Zahl: 16rem reichten für „Benachrichtigungen 9+" nicht (gemessen 28.09.2026) */
.nv-tafel.nv-konto-tafel { min-inline-size: 17.5rem; }
.nv-gruppe { margin: .35rem .6rem .15rem; padding-block-start: .45rem; border-block-start: 1px solid var(--rand); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); }
/* 29.09.2026 „Mehr" in Gruppen mit einem Satz je Eintrag (navigation.js: gruppe, text — Plaza) */
.nv-mehr .nv-tafel.nv-tafel-gruppen { min-inline-size: min(20rem, calc(100vw - 2rem)); }
.nv-tafel-gruppen > .nv-gruppe:first-child { margin-block-start: .15rem; padding-block-start: .1rem; border-block-start: 0; }
.nv-tafel a.nv-mit-satz { padding-block: .4rem; }
.nv-tafel a.nv-mit-satz > span { display: flex; flex-direction: column; gap: .08rem; min-inline-size: 0; }
.nv-mit-satz small { font: 500 .76rem/1.3 var(--schrift-text); color: var(--text-leise); }
.nv-tafel a.nv-mit-satz:hover small, .nv-tafel a.nv-mit-satz[aria-current] small { color: var(--text); }
.nv-abmelden { margin: .3rem 0 0; padding-block-start: .3rem; border-block-start: 1px solid var(--rand); }
.nv-abmelden button { all: unset; box-sizing: border-box; inline-size: 100%; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem;
  padding: .45rem .6rem; border-radius: .6rem; color: var(--text); font: 600 .9rem/1.3 var(--schrift-text); }
.nv-zahl { min-inline-size: 18px; padding: .05rem .4rem; box-sizing: border-box; border-radius: 999px; background: var(--fehler); color: #fff; font-size: .72rem; font-weight: 800; text-align: center; }
.nv-zusatz { font-size: .76rem; font-weight: 650; color: var(--text-leise); white-space: nowrap; }
.nv-betrag { color: var(--mc-gold); font-variant-numeric: tabular-nums; }
.nv-online { color: var(--mc-gruen); }
.nv-online:empty { display: none; }

/* Die EINE Bereichsleiste unter dem Kopf */
.nv-leiste { position: relative; z-index: 45; background: color-mix(in srgb, var(--nv-farbe) 14%, var(--grund)); border-block: 1px solid color-mix(in srgb, var(--nv-farbe) 38%, var(--rand)); }
.nv-leiste-innen { position: relative; display: flex; align-items: center; gap: .5rem; min-block-size: 50px; inline-size: min(100% - 2rem, 1280px); margin-inline: auto; }
.nv-wo { display: inline-flex; align-items: center; gap: .5rem; flex: none; padding: .3rem .8rem .3rem .2rem; border-inline-end: 1px solid color-mix(in srgb, var(--nv-farbe) 45%, var(--rand));
  color: #fff; font: 20px/1 var(--mc-schrift); text-shadow: 2px 2px 0 #000; white-space: nowrap; }
.nv-wo img { inline-size: 24px; block-size: 24px; image-rendering: pixelated; }
/* Eine Liste, die umbricht statt seitlich zu rollen — so bleibt kein Reiter versteckt (auch „Mehr" steht darin) */
.nv-reiter-liste { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 5px 0; list-style: none; }
.nv-reiter-liste > li { min-inline-size: 0; }
.nv-reiter { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .75rem; border-radius: .6rem; white-space: nowrap;
  font: 650 .9rem/1.2 var(--schrift-text); color: var(--text); text-decoration: none; }
.nv-reiter img { inline-size: 16px; block-size: 16px; image-rendering: pixelated; flex: none; }
.nv-reiter:hover { color: var(--text-stark); background: color-mix(in srgb, #fff 8%, transparent); }
.nv-reiter[aria-current], summary.nv-reiter[data-aktiv] { color: #fff; background: color-mix(in srgb, var(--nv-farbe) 34%, var(--grund)); box-shadow: inset 0 -3px 0 var(--nv-farbe); }
.nv-pfeil { font-size: .75em; color: var(--text-leise); transition: rotate .2s; }
.nv-hier { display: block; max-inline-size: 26ch; padding: .42rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .9rem/1.2 var(--schrift-text); color: var(--text-stark); }
.nv-trenn { color: var(--text-leise); margin-inline-end: .45rem; }
/* „Mehr" klappt direkt unter dem Knopf auf (27.09.2026, Faddi: vorher am rechten Rand der Leiste — weit weg vom Knopf).
   Reicht der Platz rechts nicht, setzt js/seite.js data-rechts → dann bündig mit der rechten Kante des Knopfs. */
.nv-klapp.nv-mehr { position: relative; }
.nv-mehr .nv-tafel { inset: calc(100% + 6px) auto auto 0; min-inline-size: 15rem; }
.nv-mehr[data-rechts] .nv-tafel { inset: calc(100% + 6px) 0 auto auto; }
/* Plus-Einstellungen (nur mit laufendem Plus) stehen im Konto-Menü sichtbar hervorgehoben — Gold der Marke */
.nv-tafel a.nv-hervor { background: color-mix(in srgb, #f5b921 12%, var(--flaeche)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f5b921 45%, transparent); color: var(--text-stark); }
.nv-tafel a.nv-hervor:hover { background: color-mix(in srgb, #f5b921 20%, var(--flaeche)); }
/* Reiter, die am Telefon unter „Mehr" wandern (navigation.js schmalInMehr) — am Laptop steht nur der Reiter */
@media (min-width: 761px) { .nv-nur-schmal { display: none; } }
/* Am PC ist der Telefon-Reiter oben im „Mehr" versteckt — dann ist die erste Gruppen-Überschrift oben, ohne Trennlinie */
@media (min-width: 761px) { .nv-tafel-gruppen > .nv-nur-schmal + .nv-gruppe { margin-block-start: .15rem; padding-block-start: .1rem; border-block-start: 0; } }
ul.nv-tafel { margin: 0; list-style: none; }

/* Erfahrungsleiste im Spiel-Stil — früher über der Hotbar, heute der Fortschritt auf /achievements (.erfolge-xp) */
.xp { position: relative; inline-size: min(100%, 364px); block-size: 10px; background: #000; box-shadow: 0 0 0 2px #000; pointer-events: none; }
.xp::before { content: ""; position: absolute; inset: 2px; background: #1f3a12; }
.xp::after { content: ""; position: absolute; inset: 2px auto 2px 2px; inline-size: calc((100% - 4px) * var(--xp, 0)); background: linear-gradient(#b6f95c, #6fcb2a 60%, #4b9a16); }

/* Leiste unten: nur am Telefon (dort steht die Hauptnavigation nicht im Kopf — nie doppelt) */
.nv-unten { display: none; }
@media (max-width: 760px) {
  :root { --leiste-hoehe: calc(62px + env(safe-area-inset-bottom, 0px)); --nav-oben: 120px; }
  html[data-ohne-unten] { --leiste-hoehe: 0px; }
  .nv-unten { position: fixed; inset: auto 0 0; z-index: 80; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0 4px env(safe-area-inset-bottom, 0px); background: var(--grund); border-block-start: 1px solid var(--rand); box-shadow: 0 -10px 30px -12px rgb(0 0 0 / .7); }
  .nv-unten-platz { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-inline-size: 0; min-block-size: 62px; padding: 6px 2px 5px; box-sizing: border-box;
    color: var(--text-leise); font: 650 .74rem/1.1 var(--schrift-text); text-decoration: none; }
  .nv-unten-platz > span:not(.wk-avatar):not(.nv-zahl) { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nv-unten-platz img { inline-size: 28px; block-size: 28px; image-rendering: pixelated; }
  .nv-unten-platz .wk-avatar { inline-size: 28px; block-size: 28px; }
  .nv-unten-platz::before { content: ""; position: absolute; inset: 0 22% auto; block-size: 3px; border-radius: 0 0 3px 3px; background: transparent; }
  .nv-unten-platz[aria-current], .nv-unten-platz[aria-expanded="true"] { color: #fff; background: color-mix(in srgb, var(--nv-farbe) 16%, var(--grund)); }
  .nv-unten-platz[aria-current]::before, .nv-unten-platz[aria-expanded="true"]::before { background: var(--nv-farbe); }
  .nv-unten-platz .nv-zahl { position: absolute; inset: 5px auto auto calc(50% + 8px); }

  /* Kopf am Telefon: Zeichen, Sprache, Glocke — scrollt mit weg (die Bereiche stehen unten) */
  .wk-kopf { position: relative; }
  .wk-kopf[data-gescrollt] { backdrop-filter: none; }
  .nv-haupt, .wk-marke span, .wk-trenner, .wk-neben, .wk-kopf .wk-knopf { display: none; }
  .wk-zeile { gap: .5rem; min-block-size: 56px; }
  /* Konto-Menü: „Konto" unten öffnet es als Blatt über der Leiste (js/seite.js), der Knopf oben entfällt */
  .nv-konto > summary { display: none; }
  .nv-konto .nv-tafel { position: fixed; inset: auto 8px calc(var(--leiste-hoehe) + 8px) 8px; max-inline-size: none; max-block-size: calc(100dvh - var(--leiste-hoehe) - 24px); overflow-y: auto; }

  /* Bereichsleiste am Telefon: gleich breite Kacheln in EINER Reihe (Zeichen über dem Namen) — den Bereich zeigt die
     Leiste unten, darum ohne „wo"; das letzte Glied (Seitentitel) steht als eigene Zeile darunter */
  .nv-leiste-innen { inline-size: 100%; padding: 4px 6px; box-sizing: border-box; min-block-size: 0; }
  .nv-wo { display: none; }
  .nv-mehr .nv-tafel { inset: calc(100% + 4px) 0 auto auto; }   /* „Mehr" ist die letzte Kachel: bündig unter ihr, nach links */
  .nv-reiter-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0; }
  .nv-reiter-liste[data-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-reiter-liste[data-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nv-reiter-liste[data-anzahl="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nv-reiter-liste[data-anzahl="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nv-reiter-liste[data-anzahl="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nv-reiter-liste[data-anzahl="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .nv-reiter-liste > li, .nv-mehr-platz > .nv-mehr { display: grid; min-inline-size: 0; }
  .nv-reiter-liste .nv-reiter { display: grid; justify-items: center; align-content: center; gap: 3px; min-inline-size: 0; min-block-size: 54px; padding: 6px 2px;
    box-sizing: border-box; text-align: center; white-space: normal; hyphens: auto; overflow-wrap: break-word; font-size: .72rem; line-height: 1.12; border-radius: .5rem; }
  .nv-reiter-liste .nv-reiter > span { max-inline-size: 100%; }
  .nv-reiter-liste .nv-zusatz { font-size: .64rem; }
  .nv-mehr > summary.nv-reiter { display: flex; align-items: center; justify-content: center; }
  .nv-reiter-liste > li.nv-nur-breit { display: none; }
  .nv-leiste summary.nv-reiter[data-aktiv-schmal] { color: #fff; background: color-mix(in srgb, var(--nv-farbe) 34%, var(--grund)); box-shadow: inset 0 -3px 0 var(--nv-farbe); }
  .nv-leiste[data-nv-bereich="team"] .nv-wo, .nv-leiste[data-nv-bereich="team"] .nv-wo span { display: inline-flex; font-size: 16px; }
  .nv-hier-platz { grid-column: 1 / -1; }
  .nv-hier { max-inline-size: 100%; padding: .3rem .4rem; font-size: .8rem; }
}
/* Zwischen Telefon und Laptop: erst „Winku" nur als Zeichen, dann die Konto-Pille nur mit Kopf (gemessen 26.09.2026,
   Muster 18/23 der Fehlerliste — der Kopf darf bei keiner Breite breiter als der Schirm werden) */
@media (min-width: 761px) and (max-width: 1120px) { .wk-marke span { display: none; } }
@media (min-width: 761px) and (max-width: 980px) {
  .wk-konto-name, .wk-neben { display: none; } .wk-konto { padding: 9px 12px; }
  .nv-haupt-reiter { padding-inline: .45rem .7rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   5. MENÜBILDSCHIRME — App-Seiten (Warnliste, Melden, Konto …) auf abgedunkelter Erde wie die Menüs im Spiel
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.bildschirm { flex: 1; padding-block: 40px 64px; image-rendering: pixelated;
  background: linear-gradient(rgb(8 6 4 / .72), rgb(8 6 4 / .8)), url("img/tex/erde.png") 0 0 / 64px 64px; }
.bildschirm > .innen { display: grid; gap: 24px; }
.schirm-kopf { display: grid; gap: 10px; justify-items: center; text-align: center; }
.schirm-kopf :is(h1, h2) { margin: 0; font: 400 40px/48px var(--mc-schrift); color: #fff; text-shadow: 4px 4px 0 var(--mc-schatten); }
.schirm-kopf p { margin: 0; max-inline-size: 46rem; color: #d0d0d0; line-height: 1.6; }
.schirm-kopf .ueber { font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; display: inline-flex; align-items: center; gap: 8px; }
.schirm-kopf .knopfreihe { justify-content: center; margin-block-start: 6px; }
@media (max-width: 600px) { .schirm-kopf :is(h1, h2) { font-size: 30px; line-height: 36px; } }
.brotkrumen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font: 400 20px/24px var(--mc-schrift); color: #9a9a9a; text-shadow: 2px 2px 0 #000; }
.brotkrumen a { color: #d0d0d0; } .brotkrumen a:hover { color: #fff; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.zwei-spalten.gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .zwei-spalten, .zwei-spalten.gleich { grid-template-columns: 1fr; } }
.mc-dunkel h2, .spalte-mc h2 { margin: 0 0 12px; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); display: flex; align-items: center; gap: 10px; }
.mc-dunkel p { color: #d6d6d6; line-height: 1.6; margin: 0 0 10px; }
.mc-dunkel p:last-child { margin-block-end: 0; }
.leise { color: #a8a8a8; }
.klein { font-size: .86rem; }
.hinweis-streifen { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: rgb(60 40 0 / .7); border: 2px solid #8a6a1f; color: #ffe6a0; line-height: 1.5; }
.hinweis-streifen img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; flex: none; }
/* Abzeichen und Warnmarken sind 72 px gezeichnet — verkleinert weich rechnen, sonst fehlen Pixelreihen (Muster 19, /scamradar/good) */
.hinweis-streifen img.abzeichen-box { inline-size: auto; image-rendering: auto; }
.hinweis-streifen a { color: #fff; text-decoration: underline; }
.mc-inventar + .hinweis-streifen { margin-block-start: 16px; }   /* /mod: Spawn-Plus-Zeile unter dem Inventar */

/* Warnstufen: Balken wie die Verbindungsbalken in der Spielerliste, Marken als Namensschild */
.stufe { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 18px; }
.stufe i { inline-size: 5px; background: #3a3a3a; box-shadow: 0 0 0 1px #000; }
.stufe i:nth-child(1) { block-size: 8px; } .stufe i:nth-child(2) { block-size: 13px; } .stufe i:nth-child(3) { block-size: 18px; }
.stufe[data-stufe="1"] i:nth-child(-n+1) { background: var(--mc-gelb); }
.stufe[data-stufe="2"] i:nth-child(-n+2) { background: var(--mc-gold); }
.stufe[data-stufe="3"] i { background: var(--mc-rot); }
.stufe[data-stufe="0"] i { background: var(--mc-gruen); }
.marke-mc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 3px; background: rgb(0 0 0 / .45); font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); white-space: nowrap; }
.marke-mc.stufe-3 { color: var(--mc-rot); } .marke-mc.stufe-2 { color: var(--mc-gold); } .marke-mc.stufe-1 { color: var(--mc-gelb); } .marke-mc.gut { color: var(--mc-gruen); }
.marke-mc.status-offen, .marke-mc.status-archiv { color: var(--mc-aqua); }
.marke-mc.status-bestaetigt, .marke-mc.status-angenommen { color: var(--mc-gruen); }
.marke-mc.status-abgelehnt, .marke-mc.status-aufgehoben { color: var(--mc-rot); }
.marke-mc.status-abgelaufen, .marke-mc.status-zurueckgezogen, .marke-mc.status-verfallen { color: var(--mc-grau); }
/* Kategorie als Wollblock-Farbe */
.wolle { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 3px; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 rgb(0 0 0 / .6); white-space: nowrap;
  background: var(--wolle, #6b6b6b); box-shadow: inset 2px 2px 0 rgb(255 255 255 / .22), inset -2px -2px 0 rgb(0 0 0 / .3); }
.farbe-red { --wolle: #b02e26; } .farbe-dark-red { --wolle: #7a1b16; } .farbe-gold { --wolle: #c77c12; } .farbe-yellow { --wolle: #b89a14; }
.farbe-green { --wolle: #3f8f1f; } .farbe-dark-green { --wolle: #2e5e17; } .farbe-aqua { --wolle: #169c9c; } .farbe-dark-aqua { --wolle: #0f6f75; }
.farbe-blue { --wolle: #3c44aa; } .farbe-dark-blue { --wolle: #283176; } .farbe-light-purple { --wolle: #b04cc0; } .farbe-dark-purple { --wolle: #7b2fae; }
.farbe-gray { --wolle: #6b6b6b; } .farbe-dark-gray { --wolle: #3e3e3e; } .farbe-white { --wolle: #cfcfcf; color: #1b1b1b; text-shadow: none; }

/* Spielerköpfe (8×8 vom Dienst, pixelgenau vergrößert) */
.kopf { display: block; flex: none; inline-size: 40px; block-size: 40px; image-rendering: pixelated; background: #2b2b2b; box-shadow: 0 0 0 2px #000; }
.kopf.k32 { inline-size: 32px; block-size: 32px; } .kopf.k64 { inline-size: 64px; block-size: 64px; } .kopf.k128 { inline-size: 128px; block-size: 128px; box-shadow: 0 0 0 4px #000, 0 30px 60px -20px rgb(0 0 0 / .8); }

/* ── Spielerliste (Warnliste) wie die Tab-Liste im Spiel ─────────────────────────────────────────────────── */
.tabliste { background: rgb(0 0 0 / .55); border: 2px solid #000; padding: 8px 8px 10px; }
.tabliste-kopf { display: grid; gap: 4px; justify-items: center; padding: 6px 8px 12px; font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); }
.tabliste-kopf .gross { color: var(--mc-gold); } .tabliste-kopf .leise-mc { color: var(--mc-grau); }
.tabliste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tab-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; color: #fff;
  background: rgb(255 255 255 / .08); transition: background-color .15s; }
a.tab-zeile:hover, a.tab-zeile:focus-visible { background: rgb(255 255 255 / .18); outline: none; }
.tab-zeile .name { display: grid; gap: 2px; min-inline-size: 0; }
.tab-zeile .name b { font: 400 20px/24px var(--mc-schrift); font-weight: 400; text-shadow: 2px 2px 0 var(--mc-schatten); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-zeile .name small { font-size: .82rem; color: #b8b8b8; }
.tab-zeile .kats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tab-zeile .rest { display: block; block-size: 4px; margin-block-start: 4px; background: #262626; }
.tab-zeile .rest i { display: block; block-size: 100%; inline-size: calc(var(--rest, 1) * 100%); background: linear-gradient(90deg, var(--mc-rot), var(--mc-gold)); }
@media (max-width: 700px) { .tab-zeile { grid-template-columns: 40px minmax(0, 1fr) auto; } .tab-zeile .kats { display: none; } }
.filterzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.stufen-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.stufen-wahl .mc-knopf[aria-current="true"] { border-color: #fff; color: var(--knopf-hover); box-shadow: inset 2px 4px 0 var(--knopf-schatten), inset -2px -2px 0 var(--knopf-licht); }
.kat-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.kat-wahl a { opacity: .6; } .kat-wahl a:hover, .kat-wahl a[aria-current="true"] { opacity: 1; outline: 2px solid #fff; }
.leer-schirm { display: grid; justify-items: center; gap: 14px; padding: 36px 16px; text-align: center; }
.leer-schirm p { margin: 0; color: #d0d0d0; max-inline-size: 36rem; line-height: 1.6; }

/* ── Benachrichtigungen (/notifications) ────────────────────────────────────────────────────────────────────
   Nach Tagen geordnet, jede Zeile ein Eintrag im Slot-Rahmen; Ungelesenes trägt einen goldenen Balken links.
   Gleiche Zeilen hintereinander (Kasse!) fasst die Seite zu einer mit „×N" zusammen. */
.hinweis-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hinweis-filter-knopf { gap: 8px; opacity: .72; }
.hinweis-filter-knopf:hover, .hinweis-filter-knopf:focus-visible { opacity: 1; }
.hinweis-filter-knopf[aria-current="true"] { opacity: 1; border-color: #fff; color: var(--knopf-hover);
  box-shadow: inset 2px 4px 0 var(--knopf-schatten), inset -2px -2px 0 var(--knopf-licht); }
.hinweis-filter-knopf .zahl { color: var(--mc-grau); }
.hinweis-filter-knopf[aria-current="true"] .zahl { color: inherit; }
.hinweis-filter-knopf .punkt-neu { inline-size: 8px; block-size: 8px; background: var(--mc-gold); box-shadow: 0 0 0 2px #000; }
.hinweis-tage { display: grid; gap: 26px; }
.hinweis-tag { display: grid; gap: 10px; }
.hinweis-tag h2 { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 20px/24px var(--mc-schrift);
  color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.hinweis-tag h2::after { content: ""; flex: 1; block-size: 2px; background: rgb(255 255 255 / .12); }
.hinweis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hinweis-zeile { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px;
  background: rgb(0 0 0 / .45); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .05); transition: box-shadow .15s; }
.hinweis-zeile:hover { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .16); }
.hinweis-zeile.neu { border-inline-start: 4px solid var(--mc-gold); padding-inline-start: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc-gold) 14%, transparent), rgb(0 0 0 / .45) 220px); }
.hinweis-slot { display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none;
  background: rgb(255 255 255 / .05); box-shadow: inset 2px 2px 0 rgb(0 0 0 / .6), inset -2px -2px 0 rgb(255 255 255 / .1); }
/* KOPF MIT SYMBOL (mc.js kopfMitSymbol, 27.09.2026, Faddi: „icons … mega hässlichen unpassenden rand … wenn sie vor skin
   sind") — die EINE Form für ein kleines Symbol an einem Kopf (Benachrichtigungen, Abzeichen in der Leiste unten, …):
   kein Kasten, keine Fläche, nur eine dunkle 1-px-Kontur rundum wie ein Item im Inventar; ganzzahlig groß (Item 16 px =
   1 CSS-Pixel je Bildpunkt, pixelated), an der Ecke unten rechts mit etwas Überstand statt mitten im Gesicht. Das Symbol
   ist das ZWEITE Kind (nach dem Kopf); --symbol = Höhe, --ueber = Überstand (--ueber-x/-y einzeln: breite Symbole
   weiter nach außen, damit sie das Gesicht nicht zudecken). Wie Pinsel.kopfMitSymbol in der Mod. */
.kopf-mit-symbol { position: relative; display: inline-grid; place-items: center; flex: none; line-height: 0; }
.kopf-mit-symbol > :nth-child(2):nth-child(2) { position: absolute;
  inset: auto calc(-1 * var(--ueber-x, var(--ueber, 4px))) calc(-1 * var(--ueber-y, var(--ueber, 4px))) auto;
  inline-size: auto; block-size: var(--symbol, 16px); max-inline-size: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  transform: none; transition: none; pointer-events: none;
  filter: drop-shadow(1px 0 0 #0e0a14) drop-shadow(-1px 0 0 #0e0a14) drop-shadow(0 1px 0 #0e0a14) drop-shadow(0 -1px 0 #0e0a14); }
.kopf-mit-symbol > img.mc-item:nth-child(2) { inline-size: var(--symbol, 16px); image-rendering: pixelated; }
.hinweis-text { display: grid; gap: 5px; min-inline-size: 0; }
.hinweis-text .was { color: #fff; line-height: 1.5; overflow-wrap: anywhere; }
.hinweis-zeile.neu .hinweis-text .was { font-weight: 600; }
.hinweis-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .8rem; color: #9aa0ab; }
.hinweis-text .trenn { color: var(--text-zart); }
.hinweis-art { padding: 1px 8px 2px; border-radius: 999px; background: rgb(255 255 255 / .08); color: #d6dae3; font-size: .72rem; font-weight: 600; }
.hinweis-mal { color: var(--mc-gold); font-weight: 700; }
.neu-marke { padding: 1px 8px 2px; border-radius: 999px; background: color-mix(in srgb, var(--mc-gold) 22%, transparent);
  color: var(--mc-gold); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 600px) {
  .hinweis-zeile { grid-template-columns: 40px minmax(0, 1fr); }
  .hinweis-slot { inline-size: 40px; block-size: 40px; }
  /* Knopf „Ansehen", Schalter (Was du bekommen willst) und „immer an" rutschen unter den Text statt in die Bildspalte */
  .hinweis-zeile > .mc-knopf, .hinweis-zeile > .mc-schalter, .hinweis-zeile > .hinweis-art { grid-column: 2; justify-self: start; }
  .hinweis-zeile > .mc-schalter .mc-knopf { inline-size: auto; }
}

/* „Was du bekommen willst" (22.09.2026): der Kasten unter den Benachrichtigungen, zugeklappt bis zum Klick. */
.hinweis-optionen { padding: 12px 14px; }
.hinweis-optionen > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.hinweis-optionen > summary::-webkit-details-marker { display: none; }
.hinweis-optionen > summary::after { content: "+"; margin-inline-start: auto; color: var(--text-zart); }
.hinweis-optionen[open] > summary::after { content: "−"; }
.hinweis-optionen > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hinweis-optionen > summary h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.hinweis-optionen .hinweis-liste { margin-block: 10px; }
.hinweis-optionen .formular-knoepfe { display: flex; justify-content: flex-end; }

/* ── Spielerseite ──────────────────────────────────────────────────────────────────────────────────────── */
.spieler-buehne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.spieler-buehne .kopf-bereich { display: grid; justify-items: center; gap: 14px; }
@media (prefers-reduced-motion: no-preference) { .spieler-buehne .k128 { animation: schweben 4s ease-in-out infinite; } }
.namensschild-gross { display: inline-flex; gap: 8px; padding: 4px 12px 6px; background: rgb(0 0 0 / .45); font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 var(--mc-schatten); }
.uuid { display: inline-flex; align-items: center; gap: 8px; font: 400 20px/24px var(--mc-schrift); color: var(--mc-grau); text-shadow: 2px 2px 0 #000; overflow-wrap: anywhere; }
.uhr-leiste { display: grid; gap: 6px; }
.uhr-leiste .balken { block-size: 16px; background: #000; box-shadow: 0 0 0 2px #000; position: relative; }
.uhr-leiste .balken i { position: absolute; inset: 2px auto 2px 2px; inline-size: calc((100% - 4px) * var(--anteil, 0)); background: linear-gradient(90deg, #ff5555, #ffaa00); }
@media (max-width: 700px) { .spieler-buehne { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* Einträge als beschriebene Bücher */
.buecher { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.buch-eintrag { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; color: inherit;
  background: rgb(0 0 0 / .45); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .05); }
a.buch-eintrag:hover, a.buch-eintrag:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.buch-eintrag .was { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-inline-size: 0; }
.buch-eintrag .was b { font: 400 20px/24px var(--mc-schrift); font-weight: 400; color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.buch-eintrag .was small { color: #b8b8b8; font-size: .84rem; }
.buch-eintrag .was span { color: #e0e0e0; line-height: 1.5; }
@media (max-width: 600px) { .buch-eintrag { grid-template-columns: 40px minmax(0, 1fr); } .buch-eintrag > :last-child { grid-column: 2; justify-self: start; } }

/* ── Das Buch: Melden, Widerspruch, eine Meldung lesen ──────────────────────────────────────────────────── */
.buch {
  position: relative; padding: 28px 30px 30px; color: #2a1d10; image-rendering: pixelated;
  background: url("img/tex/pergament.png") 0 0 / 64px 64px; border: 4px solid #3b2410;
  box-shadow: inset 0 0 0 4px #c9a86a, inset 0 0 40px rgb(120 80 30 / .35), 0 30px 60px -20px rgb(0 0 0 / .8);
}
.buch::before { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: 18px; background: linear-gradient(90deg, #6d4524, #8b5a2b); border-inline-end: 2px solid #3b2410; }
.buch > * { margin-inline-start: 14px; }
.buch h2, .buch .buch-titel { font: 400 30px/36px var(--mc-schrift); color: #2a1d10; margin: 0 0 6px 14px; }
.buch .seite { position: absolute; inset: 14px 18px auto auto; font: 400 20px/24px var(--mc-schrift); color: #6b5334; margin: 0; }
.buch label, .buch .feld-titel { color: #3d2a16; text-shadow: none; }
.buch .feld-titel { font: 400 20px/24px var(--mc-schrift); }
.buch .feld-hilfe { color: #5a4630; }
.buch .mc-feld, .buch .mc-text, .buch select.mc-feld { background: rgb(255 250 235 / .6); color: #1b120a; border: 2px solid #6b4a28; caret-color: #1b120a; }
.buch .mc-feld::placeholder, .buch .mc-text::placeholder { color: #8a7456; }
.buch .mc-feld:focus, .buch .mc-text:focus { border-color: #1b120a; background: rgb(255 252 240 / .9); }
.buch select.mc-feld { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2410' d='M0 0h10v2H8v2H6v2H4V4H2V2H0z'/%3E%3C/svg%3E"); }
.buch .abschnitt { display: grid; gap: 10px; padding-block: 16px; border-block-start: 2px dashed rgb(107 74 40 / .35); }
.buch .abschnitt:first-of-type { border: 0; padding-block-start: 6px; }
.buch .nummer { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; margin-inline-end: 8px; font: 400 20px/1 var(--mc-schrift); color: #fff; background: #6b4a28; box-shadow: inset 2px 2px 0 #9b7446, inset -2px -2px 0 #3b2410; }
.buch .text-inhalt { line-height: 1.7; color: #22170c; }
.buch .raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .buch { padding: 22px 16px 22px 20px; } .buch .raster-2 { grid-template-columns: 1fr; } }

/* Ziel des Buchs: Kopf erscheint, sobald Mojang den Namen kennt */
.ziel-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ziel-kopf { display: grid; grid-template-columns: 40px auto; gap: 8px; align-items: center; font: 400 20px/24px var(--mc-schrift); color: #3d2a16; min-inline-size: 150px; }
.ziel-kopf img { inline-size: 40px; block-size: 40px; image-rendering: pixelated; box-shadow: 0 0 0 2px #3b2410; background: #d9c49a; }
.ziel-kopf[data-zustand="gut"] { color: #1f6b1f; } .ziel-kopf[data-zustand="fehler"] { color: #9b1c1c; }

/* Kategorien als Wollblöcke zum Anklicken, Schlagworte als Items */
.wahl-woll { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl-woll label { position: relative; cursor: pointer; }
.wahl-woll input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl-woll .wolle { padding: 6px 12px 7px; opacity: .72; }
.wahl-woll input:checked + .wolle { opacity: 1; outline: 3px solid #1b120a; outline-offset: 2px; }
.wahl-woll input:focus-visible + .wolle { outline: 3px dashed #1b120a; outline-offset: 2px; }
.wahl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl-tags label { position: relative; cursor: pointer; }
.wahl-tags input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl-tags span { display: inline-block; padding: 4px 10px 5px; font: 400 20px/24px var(--mc-schrift); color: #3d2a16; background: rgb(255 250 235 / .55); border: 2px solid #8b6a3e; }
.wahl-tags input:checked + span { color: #fff; background: #6b4a28; border-color: #3b2410; }
.wahl-tags input:focus-visible + span { outline: 2px dashed #1b120a; outline-offset: 2px; }
.zeichen-zaehler { justify-self: end; font: 400 20px/1 var(--mc-schrift); color: #6b5334; }
.zeichen-zaehler[data-zu-kurz] { color: #9b1c1c; }

/* Beweise wie Bildschirmfotos (F2) */
.ablage { position: relative; display: grid; place-items: center; gap: 8px; padding: 22px; text-align: center; cursor: pointer; border: 3px dashed #6b4a28; background: rgb(255 250 235 / .35); transition: background-color .2s; }
.ablage:hover, .ablage[data-drueber] { background: rgb(255 250 235 / .7); }
.ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage b { font: 400 20px/24px var(--mc-schrift); color: #3d2a16; }
.ablage span { font-size: .86rem; color: #5a4630; }
.vorschau-bilder { display: flex; flex-wrap: wrap; gap: 10px; }
.vorschau-bilder figure { margin: 0; padding: 6px 6px 22px; background: #fff; box-shadow: 0 8px 16px -8px rgb(0 0 0 / .5); rotate: var(--dreh, -2deg); }
.vorschau-bilder figure:nth-child(2n) { --dreh: 2deg; }
.vorschau-bilder img { display: block; inline-size: 110px; block-size: 80px; object-fit: cover; }
.beweise-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.beweise-galerie a { display: block; padding: 6px 6px 22px; background: #fff; box-shadow: 0 10px 20px -10px rgb(0 0 0 / .6); rotate: -1deg; transition: rotate .2s, scale .2s; }
.beweise-galerie a:nth-child(2n) { rotate: 1.5deg; }
.beweise-galerie a:hover { rotate: 0deg; scale: 1.04; }
.beweise-galerie img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.signieren { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; background: rgb(107 74 40 / .12); border: 2px solid rgb(107 74 40 / .45); }
.signieren input { inline-size: 22px; block-size: 22px; margin: 2px 0 0; accent-color: #6b4a28; }
.signieren b { display: block; font: 400 20px/24px var(--mc-schrift); color: #2a1d10; }
.signieren span { color: #3d2a16; line-height: 1.5; font-size: .92rem; }

/* Stand einer Meldung als Redstone-Leitung: Eingang → Prüfung → Entscheidung */
.redstone-weg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.redstone-weg::before { content: ""; position: absolute; inset: 22px 16% auto 16%; block-size: 6px; background: #4a0a0a; box-shadow: 0 2px 0 #000; }
.redstone-weg::after { content: ""; position: absolute; inset: 22px auto auto 16%; block-size: 6px; inline-size: calc(68% * var(--an, 0)); background: #ff2a2a; box-shadow: 0 0 12px #ff3b3b; }
.redstone-weg[data-an="1"] { --an: .5; } .redstone-weg[data-an="2"] { --an: 1; }
.rs-stufe { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.rs-lampe { inline-size: 48px; block-size: 48px; border: 2px solid #000; background: #5a3a1a;
  box-shadow: inset 4px 4px 0 #7a5530, inset -4px -4px 0 #3a2410; }
.rs-lampe::after { content: ""; display: block; inline-size: 20px; block-size: 20px; margin: 12px; background: #2a1a0a; box-shadow: 0 0 0 2px #1a0e04; }
.rs-stufe[data-an] .rs-lampe { background: #d9a13a; box-shadow: inset 4px 4px 0 #ffe08a, inset -4px -4px 0 #9a6a1a, 0 0 30px rgb(255 200 80 / .6); }
.rs-stufe[data-an] .rs-lampe::after { background: #fff4c0; box-shadow: 0 0 0 2px #b8862a, 0 0 16px #fff2a0; }
.rs-stufe b { font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.rs-stufe small { color: #b8b8b8; font-size: .82rem; }
/* In der Seitenspalte (/scamradar/report bei 1024 px: 3 × 91 px) ragte „Warnmarke" in die Nachbarstufe */
.redstone-weg { container: redstone / inline-size; inline-size: 100%; }
@container redstone (max-width: 340px) { .rs-stufe b { font-size: 16px; line-height: 20px; } }

/* ── Kopplung: „Mit Winku verbinden" wie „Direkt verbinden" ──────────────────────────────────────────────── */
.verbinden-kette { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.verbinden-kette .glied { display: grid; justify-items: center; gap: 8px; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #000; }
.verbinden-kette .kette { block-size: 8px; background: repeating-linear-gradient(90deg, #9ca3af 0 12px, #4b5563 12px 16px); box-shadow: 0 0 0 2px #000; }
@media (prefers-reduced-motion: no-preference) { .verbinden-kette .kette { animation: kette 1s linear infinite; background-size: 16px 8px; } }
@keyframes kette { to { background-position: 16px 0; } }
.code-anzeige { display: block; text-align: center; font: 400 40px/48px var(--mc-schrift); letter-spacing: 8px; color: var(--mc-gelb); text-shadow: 4px 4px 0 #3f3f15; padding: 10px; background: #000; border: 2px solid #a0a0a0; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   6. SCAMRADAR-SEITE — Spielansicht, Inventar der Mod, Befehle, Truhen
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Laufendes Radar: das Original-Logo ohne feste Nadel, der Strahl als Bildfolge (werkzeug/radar-bauen.js → 16 Bilder,
   256 × 16). steps(16, jump-none) zeigt jedes Bild genau 1/16 des Umlaufs — harte Pixelschritte zu 22,5° im Uhrzeigersinn,
   Nachglühen dahinter, das Signal leuchtet beim Treffer auf. Bei „weniger Bewegung" steht das Original-Logo da. */
.radar-logo { position: relative; display: inline-block; inline-size: 128px; block-size: 128px; }
/* 25.09.2026 Marke: das Zeichen der Mod (lib/marke.js BILDER.png) auf der Mod-Seite — scharf, mit demselben Rand wie das Radar */
.marke-logo { display: block; inline-size: 128px; block-size: 128px; image-rendering: pixelated; box-shadow: 0 0 0 4px #000, 0 30px 60px -20px rgb(138 63 214 / .55); }
.radar-logo > img, .radar-schirm { display: block; inline-size: 100%; block-size: 100%; image-rendering: pixelated; box-shadow: 0 0 0 4px #000, 0 30px 60px -20px rgb(233 1 1 / .5); }
.radar-schirm { background: url("img/scamradar-radar.png") 0 0 / 1600% 100% no-repeat; }
.radar-logo > img { display: none; }
@media (prefers-reduced-motion: no-preference) { .radar-schirm { animation: radar-schwenk 3s steps(16, jump-none) infinite; } }
@media (prefers-reduced-motion: reduce) { .radar-logo > img { display: block; } .radar-schirm { display: none; } }
@keyframes radar-schwenk { to { background-position-x: 100%; } }
.steckbrief { display: grid; gap: 0; padding: 6px 0; background: rgb(0 0 0 / .5); border: 2px solid #000; font: 400 20px/28px var(--mc-schrift); }
.steckbrief div { display: flex; justify-content: space-between; gap: 18px; padding: 4px 14px; color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.steckbrief dt { color: var(--mc-grau); } .steckbrief dd { margin: 0; text-align: end; }
.held-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.held-zeile .text { display: grid; gap: 18px; justify-items: start; }
.held-zeile h1 { margin: 0; font: 400 60px/66px var(--mc-schrift); color: #fff; text-shadow: 6px 6px 0 var(--mc-schatten); }
.held-zeile h1 .farbe { color: var(--mc-gelb); text-shadow: 6px 6px 0 #3f3f15; display: block; }
.held-zeile .unter { margin: 0; color: #d6dcf0; font-size: 1.08rem; line-height: 1.65; max-inline-size: 40rem; }
.held-zeile .pillen { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .held-zeile { grid-template-columns: 1fr; } .held-zeile h1 { font-size: 40px; line-height: 48px; text-shadow: 4px 4px 0 var(--mc-schatten); } }

/* Spielansicht: Bildschirm mit Hotbar, Fadenkreuz, Namensschildern, Tab-Liste und Chat */
.spielansicht { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .spielansicht { grid-template-columns: 1fr; } }
/* Die Szene ist fest 720 × 450 gezeichnet (Rand 4 px) und wird als Ganzes verkleinert — so sieht sie auf dem Telefon aus
   wie ein Bildschirmfoto und nichts rutscht übereinander. Ohne Skript: volle Größe, zur Not abgeschnitten. */
.szene-rahmen { position: relative; inline-size: 100%; block-size: calc(458px * var(--skala, 1)); overflow: hidden; }
.szene-rahmen > .spielfenster { position: absolute; inset: 0 auto auto max(0px, calc((100% - 728px) / 2)); transform-origin: 0 0; scale: var(--skala, 1); }
.spielfenster {
  position: relative; overflow: hidden; inline-size: 720px; block-size: 450px; border: 4px solid #000; image-rendering: pixelated;
  background:
    linear-gradient(180deg, #6f9df5 0%, #a9c8ff 36%, #d6e6ff 50%, transparent 50%),
    linear-gradient(180deg, rgb(10 40 10 / .45) 50%, rgb(0 0 0 / 0) 64%, rgb(0 0 0 / .22) 100%),
    url("img/tex/gras.png") 0 0 / 48px 48px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8);
}
/* Hügel und Bäume am Horizont */
.spielfenster::before {
  content: ""; position: absolute; inset: auto 0 50% 0; block-size: 40px; pointer-events: none;
  background:
    linear-gradient(#2f6b2a, #2f6b2a) 0 100% / 100% 8px no-repeat,
    linear-gradient(#34752e, #34752e) 12% 100% / 16% 24px no-repeat, linear-gradient(#2b6226, #2b6226) 16% 100% / 6% 40px no-repeat,
    linear-gradient(#34752e, #34752e) 58% 100% / 22% 16px no-repeat, linear-gradient(#2b6226, #2b6226) 62% 100% / 8% 32px no-repeat,
    linear-gradient(#34752e, #34752e) 96% 100% / 14% 24px no-repeat;
}
.spielfenster .sonne { position: absolute; inset: 28px auto auto 8%; inline-size: 56px; block-size: 56px; background: #fff7a8; box-shadow: 0 0 0 8px rgb(255 247 168 / .25), 0 0 60px 10px rgb(255 240 150 / .45); }
.spielfenster .baum { position: absolute; inset: auto auto calc(50% - 2px) 4%; inline-size: 72px; block-size: 108px; pointer-events: none; }
.spielfenster .baum::before { content: ""; position: absolute; inset: auto 28px 0; block-size: 52px; background: url("img/tex/holz.png") 0 0 / 32px 32px; filter: brightness(.7) sepia(.4); }
.spielfenster .baum::after { content: ""; position: absolute; inset: 0 0 44px; background: #2f7d32; box-shadow: inset 8px 8px 0 #3d9a40, inset -8px -8px 0 #235e26; }
.fadenkreuz { position: absolute; inset: 50% auto auto 50%; inline-size: 18px; block-size: 18px; translate: -50% -50%; pointer-events: none;
  background: linear-gradient(#fff, #fff) 50% 0 / 2px 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 2px no-repeat; mix-blend-mode: difference; }
.figur { position: absolute; display: grid; justify-items: center; bottom: 140px; }
.figur .koerper { inline-size: 56px; block-size: 112px; image-rendering: pixelated; }
.figur[data-verborgen] .echt { display: none; }
.figur .standard { display: none; }
.figur[data-verborgen] .standard { display: block; }
.figur .schild-mc { position: absolute; inset: auto auto calc(100% + 8px) 50%; translate: -50% 0; }
.schild-mc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 3px; background: rgb(0 0 0 / .32); font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); white-space: nowrap; }
.vorsatz { display: inline-flex; gap: 6px; }
.spielfenster .tab-ueber { position: absolute; inset: 10px auto auto 50%; translate: -50% 0; inline-size: 600px; padding: 6px; background: rgb(0 0 0 / .5); font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.spielfenster .tab-ueber .titel-tab { text-align: center; color: var(--mc-gold); margin-block-end: 4px; }
.spielfenster .tab-ueber ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.spielfenster .tab-ueber li { display: flex; align-items: center; gap: 6px; padding: 1px 4px; background: rgb(255 255 255 / .1); white-space: nowrap; overflow: hidden; }
/* Empfangsbalken rechts in jeder Zeile der Tab-Liste, wie im Spiel (fünf grüne Stufen) */
.spielfenster .tab-ueber li .empfang { margin-inline-start: auto; display: inline-flex; align-items: flex-end; gap: 1px; block-size: 14px; flex: none; }
.spielfenster .tab-ueber li .empfang i { inline-size: 2px; background: #00FF21; box-shadow: 1px 1px 0 #003F08; }
.spielfenster .tab-ueber li .empfang i:nth-child(1) { block-size: 3px; } .spielfenster .tab-ueber li .empfang i:nth-child(2) { block-size: 5px; }
.spielfenster .tab-ueber li .empfang i:nth-child(3) { block-size: 7px; } .spielfenster .tab-ueber li .empfang i:nth-child(4) { block-size: 10px; }
.spielfenster .tab-ueber li .empfang i:nth-child(5) { block-size: 13px; }
.spielfenster .tab-ueber li > img { inline-size: 16px; block-size: 16px; image-rendering: pixelated; }
.spielfenster .chat-feld { position: absolute; inset: auto auto 54px 8px; inline-size: 560px; }
.spielfenster .chat-feld .mc-chat { font-size: 20px; }
.spielfenster .hud-hotbar { position: absolute; inset: auto auto 6px 50%; translate: -50% 0; display: flex; gap: 0; padding: 2px; background: rgb(0 0 0 / .45); box-shadow: 0 0 0 2px #000; }
.spielfenster .hud-hotbar i { display: block; inline-size: 36px; block-size: 36px; background: rgb(90 90 90 / .7); box-shadow: inset 0 0 0 2px #2b2b2b; }
.spielfenster .hud-hotbar i:first-child { box-shadow: inset 0 0 0 2px #fff; }
.spielfenster .hud-hotbar i img { inline-size: 28px; block-size: 28px; margin: 4px; image-rendering: pixelated; }
[data-neu] { animation: aufblitzen .9s ease-out; }
@keyframes aufblitzen { from { box-shadow: 0 0 0 4px var(--mc-gelb); } }
/* Optionen der Spielansicht wie das Optionsmenü */
.optionen { display: grid; gap: 10px; align-content: start; }
.optionen .gruppe-titel { font: 400 20px/24px var(--mc-schrift); color: var(--mc-grau); text-shadow: 2px 2px 0 #000; margin: 8px 0 0; }
.optionen .mc-knopf { justify-content: space-between; }
.optionen .mc-knopf .wert { color: #80ff80; }
.optionen .mc-knopf[aria-pressed="false"] .wert { color: #ff8080; }
.optionen .hinweis-mc { font-size: .84rem; color: #b8b8b8; line-height: 1.5; margin: 0; }

/* Inventar der Mod: Items mit Tooltip */
.inventar-raster { display: grid; grid-template-columns: repeat(9, 56px); gap: 4px; justify-content: center; }
@media (max-width: 640px) { .inventar-raster { grid-template-columns: repeat(5, 56px); } }
.inventar-details { margin-block-start: 14px; min-block-size: 120px; }
.inventar-aufbau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .inventar-aufbau { grid-template-columns: 1fr; } }

/* Befehlsblöcke */
.befehle { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.befehl { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; background: rgb(0 0 0 / .55); border: 2px solid #000; }
.befehl code { display: block; font: 400 20px/24px var(--mc-schrift); color: var(--mc-aqua); text-shadow: 2px 2px 0 #003f3f; overflow-wrap: anywhere; }
.befehl span { display: block; color: #d0d0d0; font-size: .9rem; line-height: 1.5; margin-block-start: 2px; }
.kopieren-mc { min-inline-size: 104px; }
.kopieren-mc[data-kopiert] { color: #80ff80; }

/* Truhen: was die Mod sendet, was bei dir bleibt */
/* align-items: start — die zwei Truhen tragen unterschiedlich viel; gestreckt stünde in der kürzeren eine große
   leere Fläche (UI-Prüfung 22.09.2026, Muster „Kästen-Lücken"). */
.truhen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 900px) { .truhen { grid-template-columns: 1fr; } }
.truhen .mc-inventar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.truhen .mc-inventar li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.truhen .mc-inventar li b { display: block; font: 400 20px/24px var(--mc-schrift); color: #2b2b2b; }
.truhen .mc-inventar li span { display: block; color: #3f3f3f; font-size: .88rem; line-height: 1.45; }
.mc-slot.gesperrt::before { content: ""; position: absolute; inset: 4px; background: url("img/item/sperre.png") 0 0 / 100% 100%; image-rendering: pixelated; opacity: .95; }

/* Weg einer Meldung als Redstone-Schaltung, die sich beim Lesen einschaltet */
.schaltung { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.schaltung li { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0 10px; text-align: center; }
.schaltung li::before { content: ""; position: absolute; inset: 30px -50% auto 50%; block-size: 6px; background: #4a0a0a; box-shadow: 0 2px 0 #000; z-index: 0; }
.schaltung li:last-child::before { display: none; }
.schaltung li[data-an]::before { background: #ff2a2a; box-shadow: 0 0 12px #ff3b3b, 0 2px 0 #000; transition: background-color .4s .1s, box-shadow .4s .1s; }
.schaltung .rs-lampe { position: relative; z-index: 1; }
.schaltung b { font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.schaltung p { margin: 0; font-size: .9rem; line-height: 1.5; color: #d0d4dc; }
.schaltung li[data-an] .rs-lampe { background: #d9a13a; box-shadow: inset 4px 4px 0 #ffe08a, inset -4px -4px 0 #9a6a1a, 0 0 30px rgb(255 200 80 / .6); }
.schaltung li[data-an] .rs-lampe::after { background: #fff4c0; box-shadow: 0 0 0 2px #b8862a, 0 0 16px #fff2a0; }
@media (max-width: 900px) {
  .schaltung { grid-template-columns: 1fr; gap: 26px; }
  .schaltung li { grid-template-columns: 48px 1fr; justify-items: start; text-align: start; column-gap: 16px; }
  .schaltung li > :not(.rs-lampe) { grid-column: 2; }
  .schaltung .rs-lampe { grid-row: span 2; }
  .schaltung li::before { inset: 48px auto -26px 21px; inline-size: 6px; block-size: auto; }
}

/* Stufen-Tabelle aus den echten Kategorien */
.kategorien-tafel { inline-size: 100%; border-collapse: collapse; font-size: .95rem; background: rgb(0 0 0 / .45); border: 2px solid #000; }
.kategorien-tafel th, .kategorien-tafel td { padding: 10px 12px; text-align: start; border-block-end: 2px solid rgb(0 0 0 / .6); vertical-align: middle; color: #e8e8e8; }
.kategorien-tafel th { font: 400 20px/24px var(--mc-schrift); color: var(--mc-grau); background: rgb(0 0 0 / .35); text-shadow: 2px 2px 0 #000; }
.kategorien-tafel td.wirkung { color: #c8c8c8; font-size: .88rem; }
.tafel-rahmen { overflow-x: auto; }

/* Häufige Fragen als Bücher im Regal: aufklappen = Buch öffnen */
.fragen { display: grid; gap: 12px; }
.frage { background: rgb(0 0 0 / .5); border: 2px solid #000; }
.frage summary { list-style: none; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; color: var(--mc-gelb); }
.frage[open] summary::after { content: "−"; }
.frage summary:hover { background: rgb(255 255 255 / .06); }
.frage summary:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.frage .antwort { margin: 0 12px 12px; padding: 14px 16px; color: #2a1d10; line-height: 1.65; background: url("img/tex/pergament.png") 0 0 / 64px 64px; image-rendering: pixelated; border: 2px solid #6b4a28; }

/* Download-Kasten */
.holen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.holen ul { margin: 8px 0 0; padding-inline-start: 1.2em; color: #3f3f3f; line-height: 1.6; }
.holen h3 { margin: 0; font: 400 30px/36px var(--mc-schrift); color: #2b2b2b; }
@media (max-width: 800px) { .holen { grid-template-columns: 1fr; justify-items: start; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   7. SMP ARCADE — Weltenauswahl, Notenblöcke, Handel, Arena
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.welten { display: grid; gap: 4px; padding: 6px; background: rgb(0 0 0 / .55); border: 2px solid #000; }
.welt { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 6px; border: 2px solid transparent; color: inherit; cursor: pointer; text-align: start; background: none; font: inherit; }
.welt:hover, .welt[aria-current="true"], .welt:focus-visible { border-color: #9a9a9a; outline: none; }
.welt[aria-current="true"] { border-color: #fff; background: rgb(255 255 255 / .05); }
.welt .bild { display: grid; place-items: center; inline-size: 64px; block-size: 64px; background: #1a1a1a; box-shadow: 0 0 0 2px #000; }
.welt .bild img { inline-size: 48px; block-size: 48px; image-rendering: pixelated; }
.welt b { display: block; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.welt small { display: block; font: 400 20px/24px var(--mc-schrift); color: #8a8a8a; text-shadow: 2px 2px 0 #000; }
.welt .zustand { font: 400 20px/24px var(--mc-schrift); color: var(--mc-gold); text-shadow: 2px 2px 0 #3f2a00; }

.spielflaeche { display: grid; gap: 16px; padding: 18px; background: rgb(0 0 0 / .5); border: 2px solid #000; }
.spielflaeche .zeile-oben { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
/* Sonic Echo: Notenblöcke */
.noten { display: grid; grid-template-columns: repeat(4, minmax(0, 88px)); gap: 10px; justify-content: center; }
.notenblock {
  all: unset; box-sizing: border-box; position: relative; aspect-ratio: 1; cursor: pointer; display: grid; place-items: center;
  background: url("img/item/notenblock.png") 0 0 / 100% 100%; image-rendering: pixelated; transition: translate .15s;
}
.notenblock:hover { translate: 0 -3px; }
.notenblock:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.notenblock .form { position: absolute; inset: 22%; opacity: 0; color: #fff; filter: drop-shadow(2px 2px 0 #000); transition: opacity .25s; }
.notenblock.offen { outline: 4px solid var(--mc-aqua); outline-offset: -4px; }
.notenblock.gefunden { outline: 4px solid var(--mc-gruen); outline-offset: -4px; cursor: default; }
.notenblock.gefunden .form, .noten[data-formen] .notenblock .form { opacity: 1; }
.notenblock.daneben { outline: 4px solid var(--mc-rot); outline-offset: -4px; }
.notenblock .note { position: absolute; inset: -6px auto auto 50%; font: 400 30px/1 var(--mc-schrift); color: var(--note, #55ff55); text-shadow: 3px 3px 0 #000; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .notenblock.spielt .note { animation: note-steigt .9s ease-out both; }
  .notenblock.daneben { animation: wackeln .4s; }
}
@keyframes note-steigt { 0% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% -48px; } }
@keyframes wackeln { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.spiel-meldung { min-block-size: 28px; text-align: center; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }

/* Bid Wars: Handelsfenster */
.handel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.handel .partei { display: grid; justify-items: center; gap: 8px; text-align: center; }
.handel .partei b { font: 400 20px/24px var(--mc-schrift); color: #2b2b2b; }
.handel .budget { font: 400 30px/36px var(--mc-schrift); color: #7a5a00; }
.handel .gebot-slot { inline-size: 88px; block-size: 88px; display: grid; place-items: center; background: var(--slot); box-shadow: inset 4px 4px 0 var(--slot-dunkel), inset -4px -4px 0 var(--gui-hell); font: 400 30px/1 var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 #000; }
.handel .pfeil-mc { font: 400 40px/1 var(--mc-schrift); color: #8b8b8b; }
.runden { display: flex; gap: 6px; justify-content: center; }
.runden i { inline-size: 26px; block-size: 26px; background: #8b8b8b; box-shadow: inset 2px 2px 0 var(--slot-dunkel), inset -2px -2px 0 #fff; }
.runden i[data-sieg="du"] { background: #3f8f1f; } .runden i[data-sieg="bot"] { background: #b02e26; } .runden i[data-sieg="gleich"] { background: #c77c12; }
.gebot-eingabe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.gebot-eingabe .mc-regler { min-inline-size: 0; }

/* 1vs1 Arena */
.arena { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; padding: 24px 16px 0; min-block-size: 240px; image-rendering: pixelated;
  background: url("img/tex/sand.png") 0 100% / 64px 64px repeat-x, linear-gradient(#3a1d0f, #20100a); border: 4px solid #000; }
.arena .kaempfer { display: grid; justify-items: center; gap: 6px; padding-block-end: 64px; }
.arena .kaempfer img.koerper { inline-size: 56px; block-size: 112px; image-rendering: pixelated; }
.arena .gegen { font: 400 60px/1 var(--mc-schrift); color: var(--mc-gold); text-shadow: 6px 6px 0 #3f2a00; padding-block-end: 110px; }
.herzen { display: flex; gap: 2px; }
.herzen i { inline-size: 18px; block-size: 16px; background: #ff3b3b; clip-path: polygon(0 25%, 25% 0, 50% 25%, 75% 0, 100% 25%, 100% 50%, 50% 100%, 0 50%); }
.herzen i.leer { background: #3a0a0a; }
@media (prefers-reduced-motion: no-preference) { .arena .links img.koerper { animation: schlag 1.6s ease-in-out infinite; } .arena .rechts img.koerper { animation: schlag 1.6s ease-in-out infinite .8s; } }
@keyframes schlag { 40% { translate: 8px 0; } 60% { translate: -2px 0; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   8. BESONDERE BILDSCHIRME — Tod (Fehler), Verbindung getrennt (Sperre, Abmelden), Optionen (Konto)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.tod { flex: 1; display: grid; place-items: center; padding: 80px 16px; text-align: center; background: linear-gradient(180deg, rgb(100 0 0 / .55), rgb(160 0 0 / .72)), url("img/tex/erde.png") 0 0 / 64px 64px; image-rendering: pixelated; }
.tod .innen-tod { display: grid; gap: 18px; justify-items: center; inline-size: min(100%, 520px); }
.tod h1 { margin: 0; font: 400 60px/66px var(--mc-schrift); color: #fff; text-shadow: 6px 6px 0 #3f0000; }
.tod p { margin: 0; color: #fff; line-height: 1.6; font-size: 1.02rem; text-shadow: 0 2px 8px #000; }
.tod .punkte { font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 #3f0000; }
.tod .punkte b { font-weight: 400; color: var(--mc-gelb); }
.tod .menue { margin-block-start: 12px; }
@media (max-width: 600px) { .tod h1 { font-size: 40px; line-height: 48px; } }
.getrennt { flex: 1; display: grid; place-items: center; padding: 80px 16px; text-align: center; background: linear-gradient(rgb(8 6 4 / .6), rgb(8 6 4 / .7)), url("img/tex/erde.png") 0 0 / 64px 64px; image-rendering: pixelated; }
.getrennt .innen-tod { display: grid; gap: 16px; justify-items: center; inline-size: min(100%, 560px); }
.getrennt h1 { margin: 0; font: 400 20px/24px var(--mc-schrift); color: var(--mc-grau); text-shadow: 2px 2px 0 #000; }
.getrennt .grund { margin: 0; font: 400 20px/28px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.getrennt p.leise { margin: 0; line-height: 1.6; }
.getrennt .menue { margin-block-start: 18px; }

/* Optionen (Konto): zwei Spalten Knöpfe wie das Optionsmenü */
.optionen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.optionen-raster .ganz { grid-column: 1 / -1; }
/* Ungerade Zahl von Knöpfen: der letzte nimmt die ganze Zeile, statt eine halbe Lücke stehen zu lassen. */
.optionen-raster > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 700px) { .optionen-raster { grid-template-columns: 1fr; } }
.optionen-gruppe { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.optionen-gruppe legend { padding: 0; margin-block-end: 10px; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.zyklus select { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.zyklus { position: relative; display: block; }
.zyklus .mc-knopf { inline-size: 100%; pointer-events: none; justify-content: space-between; }
.zyklus select:focus-visible + .mc-knopf, .zyklus:hover .mc-knopf { border-color: #fff; color: var(--knopf-hover); }
.zyklus .wert { color: var(--mc-aqua); }
.liste-feld .mc-text { font: 400 20px/26px var(--mc-schrift); min-block-size: 96px; }
.geraete { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.geraet { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: rgb(0 0 0 / .45); border: 2px solid #000; }
/* Zeilen ohne Zeichen-Spalte (nur Text + Knopf, etwa die Ansagen): ohne das landet der Text in der 40-px-Spalte
   und bricht nach jedem Wort um, während der Knopf die breite Spalte bekommt (22.09.2026). */
.geraet:not(:has(> :nth-child(3))) { grid-template-columns: minmax(0, 1fr) auto; }
/* Die mittlere Spalte darf schrumpfen und lange Kennungen umbrechen (UI/UX-Prüfung 23.09.2026: auf
   /moderation/creators ragte „twitch.tv/…" 4 px aus der Zeile). `min-inline-size: 0` ist nötig, weil ein Rasterfeld
   sonst nicht unter die Breite seines längsten Wortes geht — `overflow-wrap` allein reicht dafür nicht. */
.geraet > span { min-inline-size: 0; overflow-wrap: anywhere; }
.geraet b { display: block; font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); font-weight: 400; }
.geraet small { color: #b8b8b8; font-size: .84rem; }
.konto-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.konto-kopf .wk-avatar { inline-size: 56px; block-size: 56px; font-size: 1.4rem; box-shadow: 0 0 0 4px #000; border-radius: 0; }

/* Moderation: dichte Werkzeug-Ansicht im selben Stil */
.reiter-mc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.reiter-mc .mc-knopf[aria-current="page"] { border-color: #fff; color: var(--knopf-hover); }
.reiter-mc .zahl { color: var(--mc-rot); }
.tabelle-mc { inline-size: 100%; border-collapse: collapse; font-size: .9rem; background: rgb(0 0 0 / .45); }
.tabelle-mc th, .tabelle-mc td { padding: 8px 10px; text-align: start; border-block-end: 2px solid rgb(0 0 0 / .55); color: #e0e0e0; vertical-align: top; }
.tabelle-mc th { font: 400 20px/24px var(--mc-schrift); color: var(--mc-grau); background: rgb(0 0 0 / .3); }
.tabelle-mc a { color: var(--mc-aqua); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Rollfeld für lange Listen (Faddi 20.09.2026: „das kassenbuch nicht so lange nach unten ausführen … scrollable").
   Die Seite bleibt kurz, die Liste rollt in sich, die Kopfzeile bleibt stehen. tabindex="0" steht im HTML, damit
   man das Feld auch mit der Tastatur rollen kann.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.rollfeld { max-block-size: 19rem; overflow: auto; overscroll-behavior: contain; border: 2px solid rgb(0 0 0 / .45); }
.rollfeld.hoch { max-block-size: 28rem; }
.rollfeld:focus-visible { outline: 3px solid var(--mc-gelb); outline-offset: 2px; }
.rollfeld .tabelle-mc { border: 0; }
/* Kopfzeile bleibt beim Rollen stehen — sonst weiß man nach drei Zeilen nicht mehr, was die Spalten sind. */
.rollfeld .tabelle-mc thead th { position: sticky; inset-block-start: 0; z-index: 1; background: #2b2b2b; }
.arcade-bereich .rollfeld .tabelle-mc thead th { background: #262626; }
.rollfeld .liste-mc { margin: 0; }
.rollfeld .mc-chat { background: rgb(0 0 0 / .25); }
/* Zahl hinter einer Überschrift („Hinweise 23") — sagt vor dem Rollen, wie viel da ist. */
.titel-zahl { display: inline-block; padding: 0 7px 1px; font: 400 16px/22px var(--mc-schrift); color: #d0d0d0;
  background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .12); vertical-align: 3px; }
/* Auf dem Telefon darf ein Rollfeld nicht den halben Bildschirm fressen. */
@media (max-width: 600px) { .rollfeld { max-block-size: 15rem; } .rollfeld.hoch { max-block-size: 20rem; } }

.formular-mc { display: grid; gap: 12px; }
.formular-mc label.haken { display: flex; gap: 10px; align-items: center; color: #e0e0e0; cursor: pointer; }
.formular-mc label.haken input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: #3f8f1f; }
/* Am Telefon ist die ganze Haken-Zeile das Tippziel — mindestens 44 px hoch, sonst trifft der Daumen daneben */
@media (max-width: 767px) { .formular-mc label.haken, .ms-schrauben label.ja-nein { min-block-size: 44px; align-items: center; } }
.formular-mc .zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.formular-mc .zeile .mc-feld { flex: 1 1 10rem; inline-size: auto; }
/* Abo-Pakete (/moderation/subscriptions): die Funktionen eines Pakets als Häkchenliste — nebeneinander, umbrechend */
.formular-mc .haken-liste { gap: 8px 18px; }
.formular-mc .haken-liste label.haken { flex: 0 1 auto; gap: 6px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 800px) { .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-liste { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: .92rem; }
.info-liste dt { font: 400 20px/24px var(--mc-schrift); color: var(--mc-grau); }
.info-liste dd { margin: 0; color: #e8e8e8; overflow-wrap: anywhere; align-self: center; }
.spalte-mc { display: grid; gap: 12px; align-content: start; min-inline-size: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   9. EINBLENDEN — was beim Graben auftaucht (Skript setzt data-sichtbar; ohne Skript ist alles da)
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .js [data-einblenden]:not([data-sichtbar]) { opacity: 0; translate: 0 24px; }
  .js [data-einblenden] { transition: opacity .7s cubic-bezier(.16,1,.3,1), translate .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Ergänzungen: Abstände, Listen, Figurengrößen ──────────────────────────────────────────────────────────── */
.abstand { margin-block-start: 28px; }
.abstand-gross { margin-block-start: 56px; }
.fortschritte, .mc-chat, .befehle, .buecher, .geraete { list-style: none; margin: 0; padding: 0; }
.koerper-mini { inline-size: 40px; block-size: 80px; image-rendering: pixelated; }
.spielfenster .tab-ueber li svg { inline-size: 16px; block-size: 16px; flex: none; }
.figur { translate: -50% 0; }
.figur.f1 { left: 22%; } .figur.f2 { left: 51%; } .figur.f3 { left: 77%; }
.figur.f2 .schild-mc { inset-block-end: calc(100% + 26px); }
.arena .koerper { inline-size: 56px; block-size: 112px; image-rendering: pixelated; }
/* Optionen breiter als die Vorschau: links stehen zwei Spalten Knöpfe, rechts skaliert die Szene ohnehin mit. */
.zwei-spalten.optionen-aufbau { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) { .zwei-spalten.optionen-aufbau { grid-template-columns: 1fr; } }
/* Die Vorschau klebt nicht: unter ihr stehen die Kästen zum Konto, die sie sonst überdecken würde. */
.vorschau-spiel { position: static; }

/* ── Ergänzungen der App-Seiten (Warnliste, Konto, Moderation) ─────────────────────────────────────────────── */
.abstand-klein { margin-block-start: 14px; }
.ohne-umbruch { white-space: nowrap; }
.tipps { margin: 0; padding-inline-start: 1.2em; color: #d6d6d6; line-height: 1.7; }
.tipps li::marker { color: var(--mc-gelb); }
.feld-block { display: grid; gap: 0; min-inline-size: 0; }
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.kopf-zeile .was { display: grid; gap: 2px; flex: 1 1 12rem; min-inline-size: 0; }
.kopf-zeile small { color: #b8b8b8; font-size: .84rem; overflow-wrap: anywhere; }
.buch .kopf-zeile small { color: #5a4630; }
.marken-zeile { display: flex; flex-wrap: wrap; gap: 6px; }
.buch .buch-daten dt { color: #6b5334; }
.buch .buch-daten dd { color: #22170c; }
.ablage-dunkel { border-color: #6f6f6f; background: rgb(255 255 255 / .04); }
.ablage-dunkel:hover, .ablage-dunkel[data-drueber] { background: rgb(255 255 255 / .1); }
.ablage-dunkel b { color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); }
.ablage-dunkel span { color: #b8b8b8; }
/* Zahlen der Moderation als Kacheln */
.wert-mc { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; text-align: center; color: #fff; background: rgb(0 0 0 / .5); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06); }
.wert-mc:hover, .wert-mc:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.wert-mc b { display: grid; place-items: center; min-block-size: 48px; font: 400 40px/48px var(--mc-schrift); text-shadow: 4px 4px 0 var(--mc-schatten); }
.wert-mc span { font-size: .86rem; color: #c8c8c8; }
/* Beweise in der Moderation: Foto mit Unterschrift und Löschknopf */
.beweis-mod { margin: 0; display: grid; gap: 6px; }
.beweis-mod a { display: block; padding: 6px 6px 22px; background: #fff; box-shadow: 0 10px 20px -10px rgb(0 0 0 / .6); }
.beweis-mod img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.beweis-mod figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: .8rem; color: #b8b8b8; }
/* Optionen (Konto) — das Formular und die Nebenspalte sind eigene Behälter: ihre Raster richten sich nach der
   eigenen Breite, nicht nach der des Fensters (sonst stehen zwei Knöpfe in einer 500px-Spalte übereinander). */
.optionen-form { display: grid; gap: 22px; align-content: start; container: optionen / inline-size; }
.optionen-form > h2 { margin-block-end: 0; }
.zyklus-block { display: grid; gap: 4px; min-inline-size: 0; }
.tpa-teil { display: grid; gap: 10px; }
.tpa-teil + .tpa-teil { padding-block-start: 12px; border-block-start: 2px solid rgb(255 255 255 / .06); }
.raster-2-mc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.raster-2-mc:has(> :only-child:not([hidden])), .raster-2-mc:has(> [hidden]) { grid-template-columns: 1fr; }
@container optionen (max-width: 420px) { .optionen-raster, .raster-2-mc { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .raster-2-mc { grid-template-columns: 1fr; } }
.liste-feld { display: grid; gap: 0; }
/* Nebenspalte: Vorschau, dann die Kästen zum Konto — so bleibt neben dem langen Formular keine leere Fläche */
.neben-spalte { display: grid; gap: 24px; align-content: start; min-inline-size: 0; container: neben / inline-size; }
/* Hauptspalte im Konto: Optionen, darunter Cosmetics und Empfehlung (23.09.2026) — gleicht die lange Nebenspalte aus */
.haupt-spalte { display: grid; gap: 24px; align-content: start; min-inline-size: 0; }
.vorschau-karte { display: grid; gap: 10px; min-inline-size: 0; }
.konto-kasten { display: grid; gap: 12px; align-content: start; min-inline-size: 0; }
.konto-kasten > h2 { margin-block-end: 0; }
.konto-kasten > p { margin: 0; }
.konto-kasten .knopfreihe .mc-knopf { flex: 1 1 13rem; }
@container neben (max-width: 380px) { .geraet { grid-template-columns: 40px minmax(0, 1fr); }
  .geraet > form { grid-column: 2; justify-self: start; }
  .geraet:not(:has(> :nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
  .geraet:not(:has(> :nth-child(3))) > form { grid-column: 1; } }
.konto-kopf p { margin: 0; color: #d0d0d0; }
.gross-avatar { inline-size: 64px; block-size: 64px; font-size: 1.6rem; border-radius: 0; box-shadow: 0 0 0 4px #000; }
.breit-feld { display: grid; inline-size: 100%; text-align: start; }
.mc-chat .ungelesen { box-shadow: inset 4px 0 0 var(--mc-gelb); }
.getrennt .code-anzeige { inline-size: 100%; box-sizing: border-box; }
.getrennt .verbinden-kette { inline-size: 100%; }
.getrennt .hinweis-streifen { text-align: start; }
.spieler-buehne .spalte-mc .knopfreihe { justify-content: flex-start; }
@media (max-width: 700px) { .spieler-buehne .spalte-mc { justify-items: center; } .spieler-buehne .spalte-mc .knopfreihe { justify-content: center; } }
.toast.weg { opacity: 0; translate: 110% 0; transition: opacity .3s, translate .3s; }
.buch b { color: #1b120a; }
.uhr-leiste > span:first-child { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Kopfleiste auf schmalen Telefonen: nur die ANDERE Sprache als ein Knopf — die gewählte sieht man an der Seite selbst */
@media (max-width: 420px) {
  .wk-sprachen a[aria-current="true"] { display: none; }
  .wk-sprachen a { padding: .28rem .45rem; }
  .wk-rechts { gap: .4rem; flex: none; }
}
/* Kleine Telefone (320–360 px): alles im Kopf eine Spur kleiner, die Kacheln der Bereichsleiste auch */
@media (max-width: 360px) {
  .nv-reiter-liste .nv-reiter { font-size: .68rem; padding-inline: 1px; }
  .nv-reiter-liste .nv-zusatz { font-size: .6rem; white-space: normal; }
  .wk-zeile { gap: .35rem; }
  .wk-dienst { font-size: 18px; }
  .wk-dienst img { inline-size: 26px; block-size: 26px; }
  .wk-glocke { inline-size: 32px; block-size: 32px; }
  .wk-glocke img { inline-size: 16px; block-size: 16px; }
  .wk-marke svg { inline-size: 28px; block-size: 28px; }
}
/* Telefon: Sonne und Mond kleiner */
@media (max-width: 600px) {
  .himmel { --oben: 26px; }
  .himmel .sonne { inline-size: 44px; block-size: 44px; box-shadow: inset 0 0 0 8px var(--sonne-farbe), 0 0 0 6px color-mix(in srgb, var(--sonne-farbe) 32%, transparent), 0 0 90px 30px color-mix(in srgb, var(--sonne-farbe) 42%, transparent); }
  .himmel .mond { inline-size: 40px; block-size: 40px; }
  .himmel .mond::after { inset: 9px 19px 21px 8px; box-shadow: 14px 11px 0 -1px #d9d4b0, 6px 19px 0 -2px #e2ddb9; }
}
/* Spruch an der Überschrift (ScamRadar-Seite): rechts unten an „bevor du handelst." */
.titel-spruch { justify-self: start; }
.titel-spruch .spruch { inset: auto -150px 14px auto; font-size: 20px; }
@media (max-width: 900px) { .titel-spruch { margin-block-end: 30px; } .titel-spruch .spruch { inset: auto 6px -30px auto; rotate: -10deg; } }
/* Bid Wars: die beiden Gebote stehen sich gegenüber; Meldungen im hellen Fenster dunkel */
.handel .partei:nth-child(2) { grid-auto-flow: column; align-items: center; gap: 12px; }
.mc-inventar .spiel-meldung { color: #3f3f3f; text-shadow: none; }

/* ── Abzeichen-Boxen ─────────────────────────────────────────────────────────────────────────────────────────────────
   lib/abzeichen.js zeichnet sie (dieselbe Box wie in der Mod) — hier nur die Einbettung. Bild in 8-facher Auflösung,
   angezeigt 3-fach (27 px hoch): scharf auf jedem Bildschirm. Emojis im Formular in einer Emoji-Schrift, nie in der
   Pixelschrift. */
.abzeichen-box { display: inline-block; inline-size: auto; block-size: 27px; vertical-align: middle; image-rendering: auto;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .45)); transition: transform .12s ease, filter .12s ease; }
.abzeichen-box:hover { transform: translateY(-2px); filter: drop-shadow(0 5px 0 rgb(0 0 0 / .4)) drop-shadow(0 0 8px rgb(255 255 255 / .22)); }
.abzeichen-box[hidden] { display: none; }
.abzeichen-reihe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; vertical-align: middle; }
.abzeichen-liste .geraet > span { display: grid; gap: 6px; justify-items: start; }
.abzeichen-buehne { display: grid; justify-items: center; align-content: center; gap: 12px; min-block-size: 110px; padding: 22px 16px;
  margin-block: 6px 16px; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06);
  background: radial-gradient(ellipse at 50% 40%, rgb(255 255 255 / .1), transparent 70%), rgb(0 0 0 / .5); }
.abzeichen-buehne .abzeichen-box { block-size: 36px; }
.abzeichen-buehne small { text-align: center; max-inline-size: 60ch; }
.abzeichen-symbol { border: 0; padding: 0; margin: 14px 0 0; min-inline-size: 0; }
.emoji-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 6px 10px; }
.emoji-knopf, .emoji-feld { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Inter Variable", sans-serif; }
.emoji-knopf { display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; font-size: 22px; line-height: 1;
  cursor: pointer; background: rgb(0 0 0 / .45); border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgb(255 255 255 / .12), inset -2px -2px 0 rgb(0 0 0 / .35); }
.emoji-knopf:hover, .emoji-knopf:focus-visible { background: rgb(255 255 255 / .12); outline: 2px solid #fff; outline-offset: -2px; }
.emoji-knopf[aria-pressed="true"] { background: rgb(85 255 85 / .22); outline: 2px solid #55ff55; outline-offset: -2px; }
.emoji-feld { font-size: 20px; }
/* Dein Abzeichen wählen (Optionen): Radiogruppe, genau eines sichtbar — Faddi 20.09.2026 „nur 1 zur Zeit". */
.abzeichen-wahl-liste { display: grid; gap: 8px; }
.abzeichen-wahl { display: block; cursor: pointer; }
.abzeichen-wahl input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.abzeichen-wahl .mc-knopf { display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: start; padding-block: 8px; }
.abzeichen-wahl-bild { display: inline-flex; align-items: center; flex: none; }
.abzeichen-wahl-bild:empty { display: none; }
.abzeichen-wahl-text { display: grid; gap: 2px; min-inline-size: 0; }
.abzeichen-wahl-text small { color: var(--mc-grau, #aaa); font-size: 13px; line-height: 17px; white-space: normal; }
.abzeichen-wahl input:checked + .mc-knopf { outline: 2px solid #55ff55; outline-offset: -2px; background-color: rgb(85 255 85 / .14); }
.abzeichen-wahl input:focus-visible + .mc-knopf { outline: 2px solid #fff; outline-offset: -2px; }

/* Vertrauenslevel: Balken wie eine Erfahrungsleiste (ohne style=, also ein echtes <progress>) */
.vertrauen-balken { inline-size: 100%; block-size: 14px; margin-block: 8px 4px; appearance: none; border: 2px solid #000;
  background: rgb(0 0 0 / .55); }
.vertrauen-balken::-webkit-progress-bar { background: rgb(0 0 0 / .55); }
.vertrauen-balken::-webkit-progress-value { background: linear-gradient(#8ff08f, #3ea93e); }
.vertrauen-balken::-moz-progress-bar { background: linear-gradient(#8ff08f, #3ea93e); }

/* wie im Spiel: in der Warnliste (= Tab-Liste) klein vor dem Namen, auf der Spielerseite im großen Namensschild */
.abzeichen-box.in-zeile { block-size: 18px; margin-inline-end: 6px; vertical-align: -2px; filter: none; }
.namensschild-gross { align-items: center; }
/* Lange Namen umbrechen, statt aus dem Schild zu laufen (23.09.2026) */
.namensschild-gross { flex-wrap: wrap; max-inline-size: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.namensschild-gross .abzeichen-box { block-size: 30px; }
/* Warn-Marke wie im Spiel: in Text-Marken und Knöpfen mitlaufend, nie gequetscht (Memory winku-wiederkehrende-ui-fehler). */
.marke-mc img.warn-marke { block-size: 20px; inline-size: auto; margin: 0; flex: none; filter: none; }
.mc-knopf img.warn-marke { block-size: 18px; margin-inline-start: 0; }
.vorsatz .warn-marke { margin-inline-end: 0; }
.anzeigetafel img.warn-marke { block-size: 18px; margin-inline-end: 4px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Telefon: nichts breiter als der Schirm (19.09.2026 — /arcade war bei 375 px 448 px breit). Am Dateiende, damit die
   Regeln weiter oben (.handel .partei:nth-child(2)) nicht gewinnen. Pixelschrift nur in 20er-Schritten.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  /* 1vs1 Arena: 1fr-Spalten schrumpfen nie unter ihre Herzleiste (8 × 18 px), dazu das 60-px-VS */
  .arena { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; padding-inline: 8px; }
  .arena .gegen { font-size: 40px; text-shadow: 4px 4px 0 #3f2a00; }
  .herzen { gap: 1px; }
  .herzen i { inline-size: 12px; block-size: 11px; }
  /* Bid Wars (Übung und Live-Spiel): zwei 88-px-Felder und „→←" ließen den beiden Seiten keinen Platz */
  .handel { gap: 8px; }
  .handel .partei:nth-child(2) { gap: 6px; }
  .handel .gebot-slot { inline-size: 60px; block-size: 60px; font-size: 20px; text-shadow: 2px 2px 0 #000; }
  .handel .pfeil-mc { font-size: 20px; }
  .handel .budget { font-size: 20px; line-height: 24px; }
}
@media (max-width: 360px) { .herzen i { inline-size: 10px; block-size: 9px; } }

/* Discord-Streifen (seiten/mc.js discordStreifen): wie ein Hinweis-Streifen, nur mit dem Discord-Blurple und dem
   Zeichen statt eines Items — man erkennt ihn auf jeder Seite sofort wieder. */
.discord-streifen { border-color: #5865f2; background: rgb(88 101 242 / .16); }
.discord-streifen > svg { flex: none; inline-size: 20px; block-size: 20px; color: #a7b0ff; }
.discord-streifen a { color: #cdd3ff; }
.discord-streifen a:hover { color: #fff; }

/* ── Konto kompakt (Faddi 21.09.2026: „keiner liest das") ─────────────────────────────────────────────────────────
   Kurze Fakten mit Symbol statt Absätzen, Discord mit eigenem Zeichen und Rollen als Abzeichen-Bilder, Hinweise wie
   auf /notifications. */
.kurz-fakten { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #c8c8c8; }
.kurz-fakten li { display: inline-flex; align-items: center; gap: 8px; }
.kurz-fakten .mc-item { inline-size: 20px; block-size: 20px; flex: none; }
.discord-kasten { border-color: #3c4390; }
.discord-kasten > h2 > svg { flex: none; inline-size: 26px; block-size: 26px; color: #8c96ff; }
.status-pille { margin-inline-start: auto; padding: 2px 10px 3px; border-radius: 999px; background: rgb(255 255 255 / .08);
  font: 600 12px/16px var(--schrift-text); color: #aab; text-shadow: none; letter-spacing: .02em; }
.status-pille.an { background: rgb(85 255 85 / .14); color: #80ff80; }
.rollen-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rollen-reihe .abzeichen-box { block-size: 26px; inline-size: auto; image-rendering: auto; cursor: help; }
.discord-kasten .befehl-mc { margin: 0; }
.discord-kasten .feld-hilfe .mc-item { display: inline; inline-size: 16px; block-size: 16px; margin: 0 4px 0 0; vertical-align: -3px; }
.konto-hinweise { display: grid; gap: 14px; }
.konto-hinweise > h2 { margin: 0; }
.konto-hinweise > h2 > .mc-knopf { margin-inline-start: auto; }
.konto-hinweise .hinweis-tage { gap: 16px; }
.konto-hinweise .hinweis-tag h3 { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 16px/20px var(--mc-schrift);
  color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.konto-hinweise .hinweis-tag h3::after { content: ""; flex: 1; block-size: 2px; background: rgb(255 255 255 / .12); }
.konto-hinweise .hinweis-liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 6px; }
.konto-hinweise .hinweis-zeile { padding-block: 6px; gap: 12px; grid-template-columns: 36px minmax(0, 1fr) auto; }
.konto-hinweise .hinweis-slot { inline-size: 36px; block-size: 36px; }
.konto-hinweise p { margin: 0; }

/* Vorschau-Szene: sie wird auf die Breite verkleinert (--skala). Die Warnmarken und Abzeichen sind größer gezeichnet als
   angezeigt — beim Verkleinern „pixelated" fallen ganze Pixelreihen weg (21.09.2026: Symbole im Tab unkenntlich).
   Verkleinertes wird deshalb weich gerechnet, und die Symbole im Tab sind so groß wie die Schrift. */
.spielfenster .vorsatz img, .spielfenster img.warn-marke, .spielfenster .abzeichen-box { image-rendering: auto; }
/* Die Items der Hotbar (16 px, gezeigt 28 px × Skala) fallen unter 416 px Rahmenbreite unter 16 px — am Telefon 13 px,
   drei Pixelreihen fehlten. Dann weich rechnen; darüber bleiben sie scharf. */
.szene-rahmen { container: szene / inline-size; }
@container szene (max-width: 415px) { .spielfenster .hud-hotbar i img { image-rendering: auto; } }
.spielfenster .tab-ueber li > img, .spielfenster .tab-ueber li svg { inline-size: 20px; block-size: 20px; }
.spielfenster .tab-ueber li img.warn-marke { inline-size: auto; }

/* Spielszene (22.09.2026): Marken nie zusammendrücken — lange Namen kürzen sich selbst, nicht die Warnung davor.
   Ohne flex:none schrumpfte die Marke von „PREMIUM Kuerbiskoenig" in der Tab-Liste und über dem Kopf auf 0 px. */
.spielfenster [data-vorsatz], .spielfenster .vorsatz, .spielfenster .abzeichen-box, .spielfenster .tab-ueber li > svg { flex: none; }
.spielfenster .tab-ueber li .mc-t { min-inline-size: 0; overflow: hidden; text-overflow: clip; }
.spielfenster .figur .schild-mc { inline-size: max-content; gap: 6px; }
.spielfenster .tab-ueber li { gap: 5px; padding: 2px 6px; }
.spielfenster .tab-ueber ul { gap: 2px 4px; }
.spielfenster .mc-chat > li { display: flex; align-items: center; gap: 0; }
.spielfenster .mc-chat > li[hidden] { display: none; }
.spielfenster .mc-chat [data-vorsatz]:has(img, svg) { display: inline-flex; margin-inline-end: 6px; }
.spielfenster .mc-chat [data-vorsatz] img { vertical-align: 0; }
/* „Nachricht ausgeblendet" als ruhige Systemzeile statt grauer Klammern über zwei Zeilen */
.spielfenster .mc-chat > li.chat-ausgeblendet { gap: 8px; color: #9a9a9a; background: rgb(0 0 0 / .38); font-size: 18px; box-shadow: inset 3px 0 0 #6b1f1f; }
.spielfenster .chat-ausgeblendet img { inline-size: 16px; block-size: 16px; flex: none; opacity: .85; }
.spielfenster .mc-chat > li > .mc-t { min-inline-size: 0; }
/* Zwei Truhen auf /mod (22.09.2026): Abstand zu den Streifen darunter — vorher klebten Truhe, Rechtstext- und
   Discord-Streifen ohne Luft aneinander. */
.truhen + .hinweis-streifen { margin-block-start: 24px; }
#daten .hinweis-streifen + .hinweis-streifen { margin-block-start: 12px; }
.truhen .mc-inventar li { align-items: start; }
.truhen .mc-inventar li > .mc-slot { margin-block-start: 2px; }
.spielfenster .tab-ueber { inline-size: 676px; }

/* UI-Prüfung 22.09.2026: Raster mit EINER Spalte ohne Vorlage nehmen die Breite ihres Inhalts (auto) — am Telefon
   ragten Warnliste, Rechtliches, Moderation, Partie, Übung und die Abzeichen-Wahl so über den Schirm hinaus. */
.bildschirm > .innen, .spalte-mc, .partie, .uebung, .irgendwer-zeile, .abzeichen-wahl-text, .rs-stufe { grid-template-columns: minmax(0, 1fr); }
.abzeichen-wahl-text b, .abzeichen-wahl-text small { overflow-wrap: anywhere; }
/* Telefon: lange Knopftexte umbrechen statt über den Rand zu laufen (Knöpfe bleiben mindestens 44 px hoch) */
@media (max-width: 480px) { .mc-knopf { white-space: normal; } .mc-knopf > span { min-inline-size: 0; } }
.ms-legende dl, .kl-fenster { grid-template-columns: minmax(0, 1fr); }

/* „Mehr erfahren" (mc.js mehr()): Kernsatz bleibt sichtbar, der Rest klappt auf — erbt die Textfarbe des Kastens. */
.mehr-mc { margin-block: 6px 12px; }
.mehr-mc > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 700; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; padding: 2px 0; }
.mehr-mc > summary::-webkit-details-marker { display: none; }
.mehr-mc > summary::before { content: "+"; display: inline-block; inline-size: 1ch; }
.mehr-mc[open] > summary::before { content: "−"; }
.mehr-mc > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mehr-mc > .mehr-inhalt { margin-block-start: 6px; }
.mehr-mc > .mehr-inhalt > :first-child { margin-block-start: 0; }
.mehr-mc > .mehr-inhalt > :last-child { margin-block-end: 0; }
/* Lange Kennungen (twitch.tv/…, Codes) brechen um, statt aus ihrer Zeile zu ragen (22.09.2026) */
.leise, .rs-stufe small { overflow-wrap: anywhere; }

/* ── Deine Freunde (22.09.2026, web/seiten/freunde.js) — derselbe Kasten in der Arcade-Lobby und im Konto ────────
   Eine Zeile je Freund: Kopf, Name mit Stand darunter, Platz für die Live-Knöpfe, ganz rechts „Entfernen". Wer
   gerade da ist, steht heller (.da) — die Lobby setzt das, im Konto bleiben alle gleich. */
.freunde-kasten .freunde-zahl { float: inline-end; font-size: .8em; opacity: .75; }
.freunde-form { display: block; }
.freunde-neu { display: flex; gap: 8px; align-items: center; margin-block: 8px; flex-wrap: wrap; }
.freunde-neu .mc-feld { flex: 1 1 140px; min-inline-size: 0; }
.freunde-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-block-size: 420px; overflow-y: auto; }
/* Zwei Reihen statt vier Spalten: oben Kopf, Name und „Entfernen" — die Knöpfe der Lobby darunter über die
   ganze Breite. Sonst quetscht jeder Knopf den Namen zu „Glitz…" (Memory winku-wiederkehrende-ui-fehler). */
.freund {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 6px 8px;
  background: #4a4a4a; box-shadow: inset 2px 2px 0 #2a2a2a, inset -2px -2px 0 #7a7a7a; color: #fff;
}
.freund.da { box-shadow: inset 2px 2px 0 #2a2a2a, inset -2px -2px 0 #7a7a7a, 0 0 0 2px var(--mc-gruen); }
.freund .kopf { inline-size: 32px; block-size: 32px; image-rendering: pixelated; background: #555; }
.freund-wer { display: grid; gap: 2px; min-inline-size: 0; }
.freund-wer b { font: 400 20px/22px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freund-stand { font-size: .78rem; color: #e0e0e0; text-shadow: 1px 1px 0 #222; }
.freund.da .freund-stand { color: #b7f39a; }
.freund .kopf { grid-row: 1; }
.freund-wer { grid-row: 1; }
/* „Entfernen" bleibt in der ersten Reihe rechts; die Live-Knöpfe liegen darunter (sonst rutscht der Knopf in eine
   dritte Reihe und wird von der 32-px-Spalte abgeschnitten). */
.freund > button { grid-row: 1; grid-column: 3; }
.freund .tun { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.freund .tun:empty { display: none; }
/* Der Hinweis im Kasten steht auf Dunkel — .leise wäre hier fast unsichtbar (gemessen #505050) */
.freund .tun small { max-inline-size: 30ch; font-size: .78rem; color: #e0e0e0; text-shadow: 1px 1px 0 #222; }
.freunde-leer { margin-block-start: 8px; }

/* Anfragen im Freundes-Kasten (23.09.2026): Eingang über dem Eingabefeld, Ausgang darunter — beide als dieselben
   Zeilen wie die Freunde, nur mit anderen Knöpfen. Leere Kästen sind hidden, nicht bloß unsichtbar. */
.freunde-ueberschrift { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font: 400 18px/20px var(--mc-schrift); text-shadow: 2px 2px 0 var(--mc-schatten); }
.freunde-ueberschrift .mc-item { flex: none; inline-size: 20px; block-size: 20px; }
.anfragen-eingang[hidden], .anfragen-ausgang[hidden] { display: none; }
.anfragen-eingang .freund { box-shadow: inset 2px 2px 0 #2a2a2a, inset -2px -2px 0 #7a7a7a, 0 0 0 2px var(--mc-gelb); }
.freund.anfrage .tun { grid-row: 2; }

/* ══ VOLLBILD FÜR DIE BROWSER-SPIELE (27.09.2026, js/vollbild.js) — Partie, Übung und Titelspiele teilen sich das hier.
   Der Kasten mit data-vollbild füllt den Bildschirm (:root davor schlägt display/gap der Spiel-Kästen wie
   .uebung .bau-fenster); was mit der Breite wächst, begrenzt --vollbild-breite (das Skript
   rechnet sie so, dass alles in die Höhe passt — Seitenverhältnis bleibt). Spiel-eigenes steht in arcade.css bzw.
   titelspiele.css. ══ */
/* Das Zeichen: vier Ecken aus Flächen (kein Schriftzeichen — in der Pixelschrift läse es sich als Ziffer) */
.vollbild-zeichen {
  --d: 3px; --l: 6px; display: inline-block; flex: none; inline-size: 16px; block-size: 16px;
  background: linear-gradient(currentColor, currentColor) 0 0 / var(--l) var(--d), linear-gradient(currentColor, currentColor) 0 0 / var(--d) var(--l),
    linear-gradient(currentColor, currentColor) 100% 0 / var(--l) var(--d), linear-gradient(currentColor, currentColor) 100% 0 / var(--d) var(--l),
    linear-gradient(currentColor, currentColor) 0 100% / var(--l) var(--d), linear-gradient(currentColor, currentColor) 0 100% / var(--d) var(--l),
    linear-gradient(currentColor, currentColor) 100% 100% / var(--l) var(--d), linear-gradient(currentColor, currentColor) 100% 100% / var(--d) var(--l);
  background-repeat: no-repeat; filter: drop-shadow(2px 2px 0 var(--mc-schatten));
}
.vollbild-knopf.ist-an .vollbild-zeichen { scale: .7; }
:root [data-vollbild].vollbild-an {
  box-sizing: border-box; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0;
  overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: safe center; gap: 10px;
  padding-block: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-bottom));
  padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
}
:root [data-vollbild].vollbild-an > * { flex: none; }
/* Nur der Block mit dem wachsenden Teil wird schmaler (Seitenverhältnis), der Rest behält die ganze Breite */
:root [data-vollbild].vollbild-an > .vollbild-wachsend { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--vollbild-breite, none); align-self: center; }
/* Niedrige Bildschirme (Handy quer): Meldungen und Knöpfe eng, damit das Spielfeld die Höhe bekommt */
@media (max-height: 560px) {
  :root [data-vollbild].vollbild-an { gap: 4px; padding-block: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-bottom)); }
  .vollbild-an .spiel-meldung { min-block-size: 0; margin-block: 0; line-height: 22px; }
  .vollbild-an .knopfreihe { gap: 4px; }
  .vollbild-an .knopfreihe .mc-knopf { min-block-size: 30px; padding: 0 8px 2px; gap: 6px; }
}
/* Voll deckend (Muster 32: nichts scheint durch) — Inventar-Fenster behalten ihren eigenen Grund */
:root [data-vollbild].vollbild-an:not(.mc-inventar), [data-vollbild].vollbild-an::backdrop { background: #101218; }
/* Ersatz ohne Fullscreen-API (iPhone): fest über der ganzen Seite, die Seite darunter rollt nicht mit */
.vollbild-ersatz { position: fixed !important; inset: 0 !important; z-index: 2147483000; inline-size: 100% !important; block-size: 100dvh !important;
  max-inline-size: none !important; margin: 0 !important; }
html[data-vollbild-an]:has(.vollbild-ersatz), html[data-vollbild-an]:has(.vollbild-ersatz) body { overflow: hidden; }
/* Kein Vorfahr darf das Ersatz-Vollbild einfangen: transform/translate (Einblenden), filter, contain oder container-type
   machen aus „fixed" sonst ein Kästchen im Vorfahren, ein z-index einen eigenen Stapel unter dem Seitenkopf */
html[data-vollbild-an] :has(.vollbild-ersatz) {
  transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important;
  backdrop-filter: none !important; contain: none !important; container-type: normal !important; will-change: auto !important;
  perspective: none !important; z-index: auto !important; opacity: 1 !important; animation: none !important; transition: none !important;
  isolation: auto !important; clip-path: none !important; mask: none !important; mix-blend-mode: normal !important;
}

/* ── Spielername wie im Spiel (web/seiten/spielername.js, Faddi 27.09.2026: „name so wie ingame … nicht einfach weiß") ──
   [Abzeichen|Warnmarke] RANG Name [+] [Clan] — Farben aus lib/hugostil.js bzw. der Plus-Namensfarbe (mcText, seite.js färbt).
   Nie über den Rand: der Name bricht notfalls um (overflow-wrap), statt die Zeile zu sprengen (Muster 18). */
.sn { display: inline; min-inline-size: 0; overflow-wrap: anywhere; }
/* Steht der Name als Flex-/Grid-Kind (Ranglisten, Zeilenköpfe), wird er ein Block: dann kürzt er am Ende statt überzustehen */
.sn { overflow: hidden; text-overflow: ellipsis; }
.sn .mc-t { white-space: inherit; }   /* in Zeilen mit nowrap + ellipsis (Tab-Zeilen) kürzt es dann sauber am Ende */
.sn-vorn { white-space: nowrap; }
/* 29.09.2026 (Faddi: „Abzeichen zu weit unten“, Vertraut/Freunde/Mitgebracht): Mitte des Bildes = Mitte der Großbuchstaben —
   gemessen an der Pixelschrift 18/20 px, vorher 1,5–2 px zu tief */
.sn-vorn > .abzeichen-box { vertical-align: -0.08em; }
.sn a.sn-link, .anzeigetafel .sn a.sn-link, .tab-zeile .sn a.sn-link { display: inline; padding: 0; min-inline-size: 0; color: inherit; background: none; text-decoration: none; }
.sn a.sn-link:hover .mc-t > span, .sn a.sn-link:focus-visible .mc-t > span { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .15em; }
.sn .sn-rang, .sn .sn-clan { cursor: help; }
.sn-plus { white-space: nowrap; }
.sn-plus .plus-zeichen { display: inline-block; vertical-align: -0.02em; margin-inline-start: .25em; image-rendering: pixelated; flex: none; }
.sn .mc-g { margin-inline: .1em 0; }
/* groß (Profilkopf): Abzeichen und Marke in Namensgröße */
.sn-gross .abzeichen-box.in-zeile { block-size: 30px; vertical-align: -4px; }
.sn-gross .sn-plus .plus-zeichen { vertical-align: -0.1em; }
/* klein (Tabellen, enge Zeilen, Handy): Symbole in Schrifthöhe */
.sn-klein .abzeichen-box.in-zeile { block-size: 16px; margin-inline-end: 4px; }
/* Kopfleiste: der eigene Name wie im Spiel (seiten/spielername.js eigenerKopf) — Abzeichen nur als Icon, am Telefon an
   der Ecke des Kopfs in der Leiste unten; nichts darf die Pille oder die Leiste verbreitern (Muster 18) */
.wk-konto img.wk-abz { inline-size: auto; block-size: 16px; margin: 0; flex: none; image-rendering: auto; vertical-align: middle; }
.wk-konto .sn-kopfleiste .sn-plus .plus-zeichen { inline-size: 12px; block-size: 12px; }
.wk-avatar-traeger { position: relative; display: inline-grid; place-items: center; }
/* höher als „.nv-unten-platz > span:not(.wk-avatar):not(.nv-zahl)" (kürzt und schneidet ab) */
.nv-unten .nv-unten-platz > span.wk-avatar-traeger.wk-avatar-traeger { overflow: visible; max-inline-size: none; }
/* Lage, Kontur und „kein Kasten" kommen aus .kopf-mit-symbol; hier nur die Größe: 18 px = 2 CSS-Pixel je Spielpixel (Box 9 hoch),
   aus dem 8-fach-Bild genau durch 4 verkleinert — weich skaliert bleibt es scharf (Muster 19) */
.nv-unten-platz .kopf-mit-symbol { --symbol: 18px; --ueber-x: 11px; --ueber-y: 3px; }
.nv-unten-platz img.wk-abz { image-rendering: auto; }
/* Am Telefon ist in engen Zeilen (platz klein) kein Platz für den Rang — die Farbe bleibt, der Mauszeiger nennt ihn */
@media (max-width: 480px) { .sn-klein .sn-rang { display: none; } }
/* Lobby der Arcade (js/arcade-live.js nameWieImSpiel): das Plus-Zeichen kommt dort als Bild */
.sn img.sn-plus-bild { display: inline-block; vertical-align: -0.15em; margin-inline-start: .25em; image-rendering: pixelated; }

/* 07.10.2026 AUFTEILUNG (lib/aufteilung.js html/satzHtml, js/aufteilung.js): „Davon gehen $A (75 %) an HugoSMP.net …“ — EINE Form für
   alle Stellen (Arcade, Kasse, Shop, Plus, Spenden, Treuhand, Pässe, Bühne, Fotobox, Galerie). Dezent unter dem Betrag: kleiner,
   aber in der Schriftfarbe des Kastens (Muster 12: keine Durchsicht, die auf hellen Pixel-Paneelen verschwindet), bricht überall um
   (Muster 18: nie breiter als der Kasten). */
.aufteilung { display: block; margin: .3em 0 0; padding: 0; font-size: .8em; line-height: 1.35; font-style: normal; font-weight: inherit;
  color: inherit; text-align: start; white-space: normal; overflow-wrap: anywhere; max-inline-size: 100%; letter-spacing: 0; }
.aufteilung::before { content: "↳ "; }
.aufteilung-kurz { font-size: .75em; }
.aufteilung:empty { display: none; }
td .aufteilung, li .aufteilung { margin-block-start: .15em; }   /* in Tabellen/Listen enger */