/* halle-welt.css — die ganze App in der 2,5D-Welt (Nr. 827): Vollbild-Modus, Menü, Unterräume.
   Gehört zu halle.js (setzt body.halle-welt), halle-menue.js (.hlm) und halle-unterraum.js (.hlu). Dashboard-Modus bleibt unberührt. */

/* ---- Vollbild: Seitenleiste und Kopfleiste weg, die Halle füllt den Bildschirm ---- */
body.halle-welt .app-header, body.halle-welt .app-sidebar, body.halle-welt .sidebar-bg, body.halle-welt .start-kopf { display: none !important; }
body.halle-welt #start-halle { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--welt-grund); }
body.halle-welt .hl { height: 100% !important; min-height: 0; border: 0; border-radius: 0; }

/* ---- Würfel auf dem Handy: größer (Tippfläche), vollständig sichtbar, über dem Menü-Knopf ---- */
@media (max-width: 999px) { body.halle-welt .hl { --w: 96px; } }

/* ---- Menü-Knopf: ÜBERALL unten rechts, ganz rechts (Betreiber 2026-10-10: „Oben ist am Handy nicht bedienbar“). Eine Regel für Halle (.hl-schild),
   Räume (.hlu-menue) und alle Seiten im Welt-Rahmen (.wr-menue); "?" (mf-hilfe.js) sitzt direkt links daneben, "← Zurück" links neben "?" (alle drei unten rechts).
   --menue-platz = Höhe der freien Zeile, die Tafeln, Bücher und Seiten darüber lassen. ---- */
:root { --menue-platz: calc(var(--tap) + 24px); --ecke-rand: 12px; --ecke-menue-b: 6.5rem; --ecke-zurueck-b: 6.5rem; --ecke-hilfe-b: var(--tap); --ecke-breite: calc(var(--ecke-rand) + var(--ecke-menue-b) + var(--ecke-hilfe-b) + var(--ecke-zurueck-b) + 3 * var(--sp-2)); --z-ecke: 20002; --z-ecke-zettel: 20001; }   /* Eckknöpfe (Nr. 926): Abstand zum Rand, feste Breite von „Menü“ (damit „?“ ohne Messen daneben sitzt), eine Ebene über allen Fenstern/Blättern (höchstes Blatt 20000), unter Lichtbox/Bestätigung (30000) und Melden */
body .hlu-zurueck, body .wr-zurueck { position: fixed; right: calc(var(--ecke-rand) + var(--ecke-menue-b) + var(--sp-2) + var(--ecke-hilfe-b) + var(--sp-2)); width: var(--ecke-zurueck-b); padding-left: 0; padding-right: 0; white-space: nowrap; left: auto; bottom: calc(var(--ecke-rand) + env(safe-area-inset-bottom, 0px)); top: auto; z-index: var(--z-ecke); }   /* „← Zurück · ? · Menü“ nebeneinander unten rechts, Menü ganz rechts (Betreiber 2026-10-10, Nr. 935); Breiten sind Tokens, damit nichts gemessen werden muss */
body .hl-schild, body .hlu-menue, body .wr-menue { position: fixed; right: var(--ecke-rand); bottom: calc(var(--ecke-rand) + env(safe-area-inset-bottom, 0px)); top: auto; z-index: var(--z-ecke); min-width: var(--ecke-menue-b); }   /* Aussehen: material.css (Rauchglas, Nr. 871) */
.hl-seite { bottom: calc(12px + var(--tap) + 14px + env(safe-area-inset-bottom, 0px)); }
.hl-seite { right: var(--ecke-rand); width: auto; min-width: var(--w); align-items: flex-end; }   /* Nr. 1013: rechte Kante von Würfel-Knopf und Eckenzeile = --ecke-rand; der Würfel rückt um --sp-2 nach innen, weil seine gedrehte Ecke sonst über den Bildrand ragt */
.hl-wbox { margin-right: var(--sp-2); }
@media (min-width: 1000px) { :root { --ecke-rand: 24px; --menue-platz: calc(var(--tap) + 36px); } .hl-seite { bottom: auto; } }

/* ---- Stationsnamen dauerhaft im Bild als dunkle Plakette mit goldener Schrift (Kontrast >= 4,5:1, Nr. 849): die gewählte (Würfelfläche vorn) leuchtet, die anderen bleiben lesbar ---- */
.hl-punkt .hl-tip { top: calc(50% + 14px); bottom: auto; transform: translate(-50%, 0); padding: 2px 10px; background: var(--glas-tip); border: 1px solid var(--gold-kraeftig); border-radius: 4px;
    font-family: 'Cinzel', serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em; color: var(--glas-akzent); text-shadow: none; opacity: 1; pointer-events: auto; cursor: pointer; box-shadow: var(--sh-klein-dunkel); transition: border-color .3s, box-shadow .3s, color .3s; }   /* Plakette gehört zum Knopf: Klick auf den Namen führt zum Ziel */
.hl-punkt.an .hl-tip, .hl-punkt:hover .hl-tip, .hl-punkt:focus-visible .hl-tip, .hl-punkt.tip-an .hl-tip { transform: translate(-50%, 0); color: var(--gold-glanz); box-shadow: var(--sh-tip-aktiv); }   /* aktiv: Rand bleibt wie in Ruhe, nur dunkler Schatten (Nr. 1018) */

/* Hinweis auf dem Handy: das Querbild ist seitlich verschiebbar; verschwindet nach dem ersten Wischen (halle.js) */
.hl-wisch { position: absolute; left: var(--ecke-rand); bottom: calc(var(--menue-platz, 12px) + var(--sp-2)); z-index: 3; margin: 0; display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2);
    font: 600 var(--fs-xs) 'Cinzel', serif; pointer-events: none; animation: hl-wisch 2.4s ease-in-out infinite; }   /* Nr. 1013: Zettel-Baustein (.fransen, Pergament bzw. Onyx-Platte) wie Würfel/?/Menü, kein eigener Stil */
.hl-wisch[hidden] { display: none; }
.hl-wisch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hl-wisch { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-wisch { animation: none; } }

/* Nr. 1013: Schild, das in die Eckenzeile (Zurück · ? · Menü) ragen würde, steht über seinem Punkt (halle.js setzt .ecke) */
.hl-punkt.ecke .hl-tip, .hl-punkt.ecke:hover .hl-tip, .hl-punkt.ecke.an .hl-tip, .hl-punkt.ecke.tip-an .hl-tip { top: auto; bottom: calc(50% + 14px); left: auto; right: 4px; transform: none; }   /* rechtsbündig: wächst nach links, weg vom Würfel-Knopf an der rechten Kante */
.hl-ecke-fuehler { position: absolute; left: 0; top: 0; width: var(--ecke-breite); height: var(--menue-platz); visibility: hidden; pointer-events: none; }

/* Namensschild am Bildrand: nicht aus dem Bildschirm ragen (halle.js setzt rand-r / rand-l) */
.hl-punkt.rand-r .hl-tip, .hl-punkt.rand-r:hover .hl-tip, .hl-punkt.rand-r.an .hl-tip, .hl-punkt.rand-r.tip-an .hl-tip { left: auto; right: 4px; transform: none; }
.hl-punkt.rand-l .hl-tip, .hl-punkt.rand-l:hover .hl-tip, .hl-punkt.rand-l.an .hl-tip, .hl-punkt.rand-l.tip-an .hl-tip { left: 4px; right: auto; transform: none; }

/* ---- Menü ---- */
.hlm { position: absolute; inset: 0; z-index: 9; pointer-events: none; }   /* Nr. 946: die Wurzel fängt keine Tipps; sonst deckt sie die Eckenzeile ab (Menü-Knopf nicht tippbar, nicht markierbar) */
.hlm[hidden] { display: none; }
.hlm-bg, .hlm-panel { pointer-events: auto; }
.hlm-bg { position: absolute; inset: 0 0 var(--menue-platz) 0; background: var(--abdunkeln-schwach); }   /* endet über der Eckenzeile: Zurück · ? · Menü bleiben hell (Raum-Knöpfe liegen im Stapel des Raums unter dem Menü) */
/* Seitenmenue = ein Pergamentblatt, das die Ansicht fuellt (Nr. 901/Nr. 902): Rand und Papier kommen vom Baustein .fransen (material.css, Nr. 931), derselbe wie bei .el-blatt/.el-fenster;
   die Streifen-Textur (::before) entfaellt. Inhalt scrollt im Blatt. Unten bleibt die Eckenzeile frei (--menue-platz). Am Desktop: schmales Blatt rechts (Menue-Knopf sitzt rechts). */
.hlm-panel.el-streifen { position: absolute; top: var(--rand-aussen); left: var(--rand-aussen); right: var(--rand-aussen); bottom: var(--menue-platz); width: auto; max-height: none; color: var(--mat-text); }
.hlm-panel.el-streifen::before { display: none; }
.hlm-panel .el-streifen-inhalt { margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5); }
@media (min-width: 700px) { .hlm .hlm-panel.el-streifen { left: auto; right: var(--ecke-rand); margin: 0; width: min(380px, calc(100% - 2 * var(--rand-aussen))); } }   /* Menü sitzt unten rechts: das Blatt geht rechts bündig über seinem Knopf auf (bottom: --menue-platz), nie links (Nr. 926) */
.hlm-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); border-bottom: 1px solid var(--bm); flex-shrink: 0; margin-bottom: var(--sp-2); }
.hlm-titel { font-family: 'Cinzel', serif; font-size: var(--fs-xl); font-weight: 700; color: var(--mat-akzent); }
.hlm-x { flex: 0 0 auto; }      /* Aussehen: runder Knopf-Baustein (bauteile/knopf.css) */
.hlm-konto { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); min-height: var(--tap); padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--bm); text-decoration: none; color: var(--mat-text); }
.hlm-konto[hidden] { display: none; }
.hlm-konto:hover, .hlm-konto:focus-visible { background: var(--mat-hover); }
.hlm-konto:focus-visible { outline: 3px solid var(--mat-fokus); outline-offset: -3px; }
.hlm-konto-name { font-weight: 700; font-size: var(--fs-md); overflow-wrap: anywhere; }
.hlm-konto-tarif { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.hlm-liste { padding: 0 0 var(--sp-2); }
.hlm .sb-item { color: var(--text); font-size: var(--fs-md); text-decoration: none; }
.hlm .sb-item:hover, .hlm .sb-item:focus-visible { background: var(--mat-hover); color: var(--gold-h); }
.hlm .sb-item:focus-visible, .hlm-fuss .btn-danger:focus-visible { outline: 3px solid var(--mat-fokus); outline-offset: -3px; }
.hlm .sb-item.active { color: var(--gold-h); }
.hlm .sb-sec { margin-top: 6px; padding: 12px 18px 4px; font-size: var(--fs-xs); letter-spacing: .16em; color: var(--muted); border-top: 1px solid var(--border); }   /* Abschnittskopf (ADMIN ...) dezent (Nr. 853) */
.hlm .sb-nav { padding: 0; }
.hlm-fuss { border-top: 1px solid var(--bm); margin-top: 8px; }
.hlm-fuss form { display: block; padding: var(--sp-2) 0 var(--sp-1); margin: 0; }
.hlm-fuss .btn-danger { width: 100%; min-height: var(--tap); }
.hlm-fuss .sb-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: var(--sp-1) 0 var(--sp-2); }
.hlm-fuss .sb-legal a { color: var(--muted); font-size: var(--fs-xs); min-height: var(--tap); padding: 0 6px; display: inline-flex; align-items: center; }   /* 44 px Tippfläche (Nr. 849) */

/* ---- Unterraum: Vollbild-Bild, Tafel darüber ---- */
.hlu-host { position: absolute; inset: 0; z-index: 6; background: var(--welt-grund); opacity: 0; transition: opacity .45s ease; }
.hlu-host.da { opacity: 1; }
.hlu-host[hidden] { display: none; }
.hlu { position: absolute; inset: 0; overflow: hidden; }
.hlu-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--opos, 50% 50%); filter: brightness(.85) saturate(.95); }
/* Raumbild verschieben (Nr. 884): freie Flaechen zeigen die Greifhand, solange das Bild beschnitten ist (wisch-raum.js setzt/entfernt die Klassen) */
.wisch-bild-frei { cursor: grab; -webkit-user-drag: none; }
.wisch-bild-frei.zieht { cursor: grabbing; }
.hlu-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, var(--abdunkeln-leicht)), linear-gradient(180deg, var(--abdunkeln-mittel), transparent 20%); }
.hlu-leiste { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
/* Aussehen von Zurück/Menü: material.css (Rauchglas, Nr. 871) */
.hlu button:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; }

.hlu-tafel { position: absolute; left: max(12px, var(--rand-aussen)); right: max(12px, var(--rand-aussen)); bottom: var(--menue-platz); z-index: 1; max-height: min(66%, calc(100% - 76px));   /* Handy: oben bleibt Platz fürs Bild */ display: flex; flex-direction: column; min-height: 0;
    padding: 14px 14px 10px; border-radius: var(--r); background: var(--ui-tafel-bg); background-color: var(--bg2); color: var(--text); border: 1px solid var(--ui-tafel-rand); outline: 1px solid var(--ui-tafel-schein); outline-offset: -5px; backdrop-filter: blur(6px); box-shadow: var(--sh-tafel-gross); }
.hlu-kopf { display: flex; align-items: center; gap: var(--sp-2); flex: none; min-height: var(--tap); }
.hlu-kopf .hlu-titel { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.hlu-anzahl { flex: none; min-width: 1.6em; padding: 0 var(--sp-2); border-radius: 10px; background: var(--ui-chip-bg); border: 1px solid var(--ui-chip-rand); color: var(--ui-chip-text); font-size: var(--fs-sm); font-weight: 700; text-align: center; }
.hlu-anzahl:empty { display: none; }
.hlu-kopf-neu { flex: none; padding: 0 var(--sp-2); }
.hlu-fuss:empty { display: none; }
.hlu-titel { margin: 0; font-family: 'Cinzel', serif; font-size: var(--fs-xl); font-weight: 700; color: var(--gold-h); line-height: 1.2; }
.hlu-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bm) transparent; }
.hlu-leer { margin: 4px 0 12px; font-size: var(--fs-md); color: var(--text); line-height: 1.45; }
.hlu-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--sp-2); padding-bottom: var(--sp-1); }
.hlu-karte { display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border-radius: var(--rs); border: 1px solid var(--bm); background: var(--card); color: var(--text);
    text-align: left; font: inherit; cursor: pointer; overflow: hidden; min-height: var(--tap); }
.hlu-karte:hover, .hlu-karte:focus-visible { border-color: var(--gold); }
.hlu-bild { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--buch-dunkel); overflow: hidden; }
.hlu-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlu-bild.leer { display: flex; align-items: center; justify-content: center; }
/* Platzhalter fuer Kacheln ohne (brauchbares) Bild: Pergament mit Tinte, Text sagt, was fehlt bzw. welche Karte es ist (Nr. 849) */
.hlu-bild.platz { background: linear-gradient(160deg, var(--papier-mitte), var(--papier-rand)); }
.hlu-platz { padding: 6px; text-align: center; font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; color: var(--perg-grau); }
.hlu-bild svg { width: 38%; height: 38%; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.hlu-badge { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 10px; background: var(--ui-chip-bg); border: 1px solid var(--ui-chip-rand); color: var(--ui-chip-text); font-size: var(--fs-xs); font-weight: 600; }
.hlu-name { padding: 0 8px; font-family: 'Cinzel', serif; font-size: var(--fs-md); font-weight: 700; color: var(--gold-h); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.hlu-sub { padding: 0 8px; font-size: var(--fs-xs); color: var(--muted); }
.hlu-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); padding-top: var(--sp-2); }
.hlu-mehr { min-height: var(--tap); padding: 0 6px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; margin-left: auto; }
.hlu-mehr:hover { color: var(--gold-h); }

@media (min-width: 1000px) {
    .hlu-leiste { padding: 14px 24px; }
    /* Randstreifen (Nr. 849): höchstens 30 % Breite, halb durchsichtig, auf der Bildseite ohne Hauptmotiv (data-seite je Raum in halle-unterraum.js), damit Rahmen, Regale und Tisch sichtbar bleiben */
    .hlu-tafel { left: 24px; right: auto; bottom: var(--menue-platz); width: clamp(300px, 30%, 520px); max-height: calc(100% - 100px); padding: 14px 14px 10px; }
    .hlu-tafel[data-seite="rechts"] { left: auto; right: 24px; }
    .hlu-tafel[data-raum="mediathek"] { width: clamp(320px, 30%, 480px); }   /* die Liste ist das Wichtige, die Wandbilder sind Deko (Nr. 849) */
    .hlu-raster { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
    .hlu-tafel[data-raum="mediathek"] .hlu-raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* Mediathek: grosse Kacheln (4:3), Titel "Deine Bilder" */
.hlu-tafel[data-raum="mediathek"] .hlu-raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.hlu-tafel[data-raum="mediathek"] .hlu-bild { aspect-ratio: 4 / 3; }
/* Hochkant (Handy): Querbild bleibt (BG_POS je Raum); Tafel = halbdurchsichtige Leiste von unten, per Wisch nach unten einklappbar (Bild bleibt sichtbar) */
.hlu-griff { display: none; }
/* Handy hoch UND quer (Nr. 924, Betreiber-Foto): die Tafel nimmt fast die ganze Hoehe, vom Raumbild bleibt oben nur ein Streifen; Kopf = EINE Zeile. */
@media (max-width: 999px) {
    .hlu-tafel { left: var(--rand-aussen); right: var(--rand-aussen); top: auto; bottom: var(--menue-platz); max-height: calc(100% - var(--tap) - var(--sp-2) - var(--menue-platz));   /* Nr. 1013: Blatt nur so hoch wie sein Inhalt, höchstens bis unter den oberen Rand wie bisher */ border-radius: var(--r); border-width: 1px; padding: 0 var(--sp-3) var(--sp-2);
        transition: height .3s ease; }
    .hlu-tafel.zu { top: auto; height: auto; padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px)); }
    .hlu-kopf { touch-action: none; cursor: pointer; }
    .hlu-griff { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: transparent; color: var(--gold-h); cursor: pointer; }
    .hlu-pfeil { width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }   /* zeigt nach unten = einklappen */
    .hlu-tafel.zu .hlu-pfeil { transform: translateY(3px) rotate(-135deg); }
    .hlu-tafel.zu .hlu-inhalt, .hlu-tafel.zu .hlu-fuss { display: none; }
}
@media (max-width: 999px) and (orientation: landscape) {      /* quer: links bleibt die Ecke fuer den Melden-Knopf frei */
    .hlu-tafel { left: calc(var(--tap) + var(--sp-3) + var(--sp-2)); max-height: calc(100% - var(--sp-2) - var(--menue-platz)); }
    .hlu-tafel.zu { top: auto; }
}
@media (prefers-reduced-motion: reduce) { .hlu-host { transition: none; } }

/* ---- Raum Karten: Tafel als Pergament (material.css, Nr. 871) ---- */
.hlu-tafel.el-tafel { position: absolute; padding: var(--sp-3) var(--sp-3) var(--sp-2); border: 0; outline: 0; background: none; box-shadow: none; backdrop-filter: none; border-radius: var(--mat-radius); }
.hlu-tafel.el-tafel .hlu-titel { color: var(--mat-akzent); }
/* Kacheln klein (Nr. 924): so viele je Zeile, wie mit Mindestbreite passen (Nr. 941: feste 3 Spalten schnitten Titel am Handy ab); Rahmen schmaler (--hlu-rahmen), Namen brechen um statt abzuschneiden */
.hlu-tafel.el-tafel { --hlu-rahmen: 14px; }
.hlu-tafel.el-tafel .hlu-raster { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--sp-1); padding: var(--sp-1) 0 var(--sp-2); }
.hlu-karte.el-kachel { overflow: visible; border-radius: 0; background: none; border: 0; padding: var(--hlu-rahmen) var(--hlu-rahmen) calc(var(--hlu-rahmen) - 2px); gap: var(--sp-1); }
.hlu-karte.el-kachel::before { border-image-width: var(--hlu-rahmen); }
.hlu-karte.el-kachel .hlu-name { font-size: var(--fs-sm); }
.hlu-karte.el-kachel .hlu-bild { border: 1px solid var(--mat-rand); box-shadow: var(--sh-vorschau-innen); background: var(--mat-vorschau); }
.hlu-karte.el-kachel .hlu-name, .hlu-vorblatt .hlu-vor-name { padding: 0; color: var(--mat-akzent); }
.hlu-karte.el-kachel .hlu-sub { padding: 0; color: var(--mat-leise); font-size: var(--fs-sm); font-family: 'Cinzel', serif; }   /* Nr. 1013: Untertitel wie der Name in Cinzel, keine Systemschrift */
.hlu-tafel.el-tafel :is(.hlu-badge, .hlu-anzahl) { font-family: 'Cinzel', serif; font-weight: 700; white-space: nowrap; box-sizing: border-box; background: var(--mat-marke); color: var(--mat-akzent); border: 1px solid var(--mat-rand); border-radius: var(--mat-radius-klein); box-shadow: none; min-height: 0; padding: 2px var(--sp-1); }   /* Nr. 1013: EIN Abzeichen-Baustein (.el-plakette) je Optik: Pergament = Tinte, Onyx = Eisen mit Goldschrift (--mat-*) */
.hlu-tafel.el-tafel .hlu-badge { max-width: calc(100% - 2 * var(--sp-1)); overflow: hidden; text-overflow: ellipsis; }
.hlu-badge[data-art="lauf"]::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; flex: none; }
/* Abzeichen („läuft“, „Sitzung läuft“) liegt über Bildern, bei leerer Vorschau aber oben IM Fluss, damit es das Platzhaltersymbol nicht überdeckt (Nr. 1013) */
.hlu-tafel.el-tafel .hlu-bild.leer:has(.hlu-badge) { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.hlu-tafel.el-tafel .hlu-bild.leer .hlu-badge { position: static; margin: var(--sp-1); }
.hlu-tafel.el-tafel .hlu-bild.leer:has(.hlu-badge) svg { margin: auto; flex: none; }
/* „+ Schnell“ / „+ Neu“: gleicher Tintenrahmen wie die Kacheln (--tex-kachel), nicht der schmale Neben-Knopf */
.hlu-tafel.el-tafel .hlu-kopf-neu { position: relative; isolation: isolate; border: 0; background: none; padding: 0 var(--sp-3); }
.hlu-tafel.el-tafel .hlu-kopf-neu::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--mat-rand); border-image: var(--tex-kachel); border-image-width: var(--sp-2); border-radius: var(--mat-radius-klein); filter: drop-shadow(2px 3px 3px var(--abdunkeln-mittel)); }

.hlu-tafel.el-tafel .hlu-bild.platz { background-color: var(--mat-vorschau); background-image: linear-gradient(var(--mat-gitter) 1px, transparent 1px), linear-gradient(90deg, var(--mat-gitter) 1px, transparent 1px); background-size: 16px 16px; }
.hlu-tafel.el-tafel .hlu-bild.platz { overflow: visible; }      /* Platzhalter-Text (Leeres Brett · Nr. · Datum) wächst mit, Seitenverhältnis 16:10 gilt als Mindesthöhe (Nr. 941) */
.hlu-platz { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.hlu-brett { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-1) var(--sp-2); border-radius: 4px; background: var(--mat-kachel); color: var(--mat-leise); font-size: var(--fs-xs); text-align: center; }
.hlu-brett b { font: 700 var(--fs-xs) 'Cinzel', serif; }
.hlu-brett small { font-size: var(--fs-xs); font-weight: 600; }
.hlu-brett svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hlu-tafel.el-tafel :is(.hlu-kopf-neu, .hlu-mehr, .hlu-griff):focus-visible { outline: 3px solid var(--mat-fokus); outline-offset: 2px; }
.hlu-tafel.el-tafel .hlu-griff { color: var(--mat-akzent); }
/* Vorschau-Blatt (Auswahl -> Vorschau -> Oeffnen): Handy von unten mit Abdunklung, Desktop schraeg links auf dem Tisch */
.hlu-vor-scrim { position: absolute; inset: 0 0 var(--menue-platz) 0; z-index: 5; background: var(--abdunkeln-mittel); }
.hlu-vorblatt.el-tafel { position: absolute; z-index: 6; left: var(--rand-aussen); right: var(--rand-aussen); bottom: var(--menue-platz); max-height: min(70%, calc(100% - var(--menue-platz) - 64px)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--sp-1);
    padding: calc(var(--sp-3) + 10px) var(--sp-3) var(--sp-3); animation: hlu-vor-hoch .38s cubic-bezier(.2, .8, .2, 1) backwards; }
.hlu-vor-griff { position: absolute; left: 50%; top: 8px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: var(--mat-rand); }
.hlu-vor-x { position: absolute; top: var(--sp-1); right: var(--sp-1); z-index: 2; }
.hlu-vor-bild { aspect-ratio: 16 / 10; margin-bottom: var(--sp-1); }
.hlu-vor-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlu-vorblatt .hlu-vor-name { margin: 0; padding-right: calc(var(--tap) + var(--sp-1)); font-size: var(--fs-xl); }
.hlu-vor-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.hlu-vor-knoepfe :is(.el-haupt, .el-neben) { flex: 1 1 9rem; }
/* Handy (Nr. 924): das Blatt liegt per JS-Mass genau ueber der Tafel; Bild fuellt den Rest der Hoehe, quer steht es neben dem Text */
@media (max-width: 999px) {
    .hlu-vorblatt.el-tafel { overflow: hidden; animation-name: hlu-vor-auf; }
    .hlu-vorblatt .hlu-vor-bild { flex: 1 1 0; min-height: 5rem; aspect-ratio: auto; }
    .hlu-vorblatt .hlu-vor-bild img { object-fit: contain; }
    .hlu-vor-knoepfe { flex: none; }
}
@media (max-width: 999px) and (orientation: landscape) {
    .hlu-vorblatt.el-tafel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--sp-3); align-content: start; }
    .hlu-vorblatt .hlu-vor-bild { grid-column: 1; grid-row: 1 / -1; margin: 0; }
    .hlu-vorblatt .hlu-vor-name, .hlu-vorblatt .el-sub { grid-column: 2; }
    .hlu-vorblatt .hlu-vor-knoepfe { grid-column: 2; align-self: end; }
}
@keyframes hlu-vor-auf { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hlu-vor-hoch { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hlu-vor-legen { from { transform: translate(-50%, calc(-50% - 14px)) rotate(-5deg); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-2deg); opacity: 1; } }
@media (min-width: 1000px) {
    .hlu-vor-scrim { display: none; }
    .hlu-vor-griff { display: none; }
    .hlu-vorblatt.el-tafel { left: 50%; right: auto; bottom: auto; top: calc((100% - var(--menue-platz)) / 2); width: min(620px, calc(100% - 2 * (clamp(300px, 30%, 520px) + 48px))); max-height: calc(100% - var(--menue-platz) - 2 * var(--rand-aussen)); transform: translate(-50%, -50%) rotate(-2deg); animation: hlu-vor-legen .45s ease-out backwards; padding-top: var(--sp-3); }   /* mittig (Betreiber 2026-10-10), so schmal, dass es die Seitentafel (30 %, max. 520 px) links wie rechts nicht deckt */
}
@media (prefers-reduced-motion: reduce) { .hlu-vorblatt { animation: none; } }
/* Mediathek: grosses Bild = Lichtbox (lichtbox.js/.css, Nr. 849) */

/* ---- Raum „Charaktere“: Rüstungsständer an der Wand (halle-ruestung.js, Nr. 847/Nr. 849) ----
   Die Bühne deckt den Bildschirm wie object-fit: cover (Querbild 2752 x 1536) und ist seitlich verschiebbar; alles darauf steht in Bildprozent. */
.hlc-rahmen { position: absolute; inset: 0; container-type: size; --bw: 1.7917; --sw: max(100cqw, 100cqh * var(--bw)); --sh: max(100cqh, 100cqw / var(--bw)); }
.hlc-scroll { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.hlc-scroll::-webkit-scrollbar { display: none; }
.hlc-buehne { position: relative; width: var(--sw); height: var(--sh); margin-top: calc((100cqh - var(--sh)) * .6); }
.hlc-bg, .hlc-bank { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }
.hlc-bg { inset: 0; width: 100%; height: 100%; filter: brightness(.9) saturate(.95); }
.hlc-bank { left: 17.006%; top: 78.97%; width: 67.48%; height: 21.03%; pointer-events: none; filter: brightness(.9) saturate(.95); }
.hlc-plaetze { position: absolute; inset: 0; }
.hlc-platz { position: absolute; top: 8%; height: 80.5%; transform: translateX(-50%); margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hlc-platz:focus-visible { outline: 3px solid var(--glut); outline-offset: -3px; border-radius: 8px; }
.hlc-stand { position: absolute; left: 50%; bottom: 0; height: calc(77.02% * var(--mass, 1)); width: auto; transform: translateX(-50%); pointer-events: none; transition: filter .2s ease; filter: drop-shadow(0 6px 10px var(--abdunkeln-kraeftig)); }
.hlc-platz:hover .hlc-stand, .hlc-platz:focus-visible .hlc-stand { filter: drop-shadow(0 0 16px var(--glut-rand)) drop-shadow(0 6px 10px var(--abdunkeln-kraeftig)) brightness(1.1); }
.hlc-platz.kalt .hlc-stand { filter: brightness(.42) saturate(.45) drop-shadow(0 6px 10px var(--abdunkeln-kraeftig)); }
.hlc-platz.kalt:hover .hlc-stand, .hlc-platz.kalt:focus-visible .hlc-stand { filter: brightness(.55) saturate(.55) drop-shadow(0 0 12px var(--glut-schein)); }
/* Messingschild: dunkle Schrift auf hellem Messing (Kontrast ≥ 7:1), Größe folgt der Bühnenbreite */
.hlc-schild { position: absolute; left: 3%; right: 3%; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: var(--tap); padding-block: .35em; box-sizing: border-box;
    font-size: max(14px, calc(var(--sw) * .0105)); line-height: 1.2; text-align: center; padding-inline: var(--sp-3); transition: transform .2s ease; }   /* Aussehen: Rauchglas (material.css, .hlc-schild), Nr. 907 */
/* Das Schild hängt direkt über dem Kopf seines Ständers (Ständerhöhe = 77,02 % des Platzes mal Maßstab, wie .hlc-stand), nicht oben an der Wand (Nr. 849) */
.hlc-platz .hlc-schild { top: auto; bottom: calc(77.02% * var(--mass, 1) + 8px); }
/* Freier Platz: schwach sichtbare Silhouette eines Ständers zum Antippen */
.hlc-platz.frei .hlc-stand.leer { opacity: .4; filter: brightness(.5) saturate(0) drop-shadow(0 6px 10px var(--abdunkeln-mittel)); }
.hlc-platz.frei:hover .hlc-stand.leer, .hlc-platz.frei:focus-visible .hlc-stand.leer { opacity: .65; filter: brightness(.6) saturate(0) drop-shadow(0 0 14px var(--glut-schein)); }
.hlc-schild b { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.12em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hlc-schild i { font-style: normal; font-size: .85em; font-weight: 600; }
.hlc-schild.kalt { opacity: .6; }
.hlc-platz:hover .hlc-schild, .hlc-platz:focus-visible .hlc-schild { transform: translateY(-2px); opacity: 1; }
.hlc-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* nur für Screenreader; sichtbar ist das Bild */
.hlc-status { position: absolute; left: 0; right: 0; top: 46%; margin: 0; text-align: center; color: var(--glas-leise); font-family: 'Cinzel', serif; font-size: var(--fs-md); text-shadow: var(--sh-schrift-schwarz); }
.hlc-pfeil { position: absolute; top: 46%; z-index: 2; width: 48px; height: 64px; border-radius: 24px; border: 1px solid var(--gold); background: var(--bg-glas); color: var(--gold-h); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.hlc-pfeil svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hlc-pfeil.links { left: 8px; } .hlc-pfeil.rechts { right: 8px; }
.hlc-pfeil:hover:not(:disabled) { background: var(--glas-braun-hover); }
.hlc-pfeil:disabled { opacity: .35; cursor: default; }
.hlc-pfeil[hidden], .hlc-seite[hidden], .hlc-status[hidden] { display: none; }
.hlc-seite { position: absolute; left: 50%; bottom: 8px; z-index: 2; transform: translateX(-50%); margin: 0; padding: 4px 14px; border-radius: 12px; background: var(--bg-glas); border: 1px solid var(--bm); color: var(--gold-h); font-size: var(--fs-sm); }
/* Handy hochkant: fester Knopf "+ Neuer Charakter" unten und Wisch-Hinweis mit Pfeilen darueber; quer ist der freie Staender gut erreichbar */
.hlc-wisch { display: none; }
body.halle-welt .hlc-neu-fest { display: none; }   /* nur am Handy hochkant sichtbar; Vorrang vor der Glas-Regel (material.css) */
@media (max-aspect-ratio: 1/1) {
    body.halle-welt .hlc-neu-fest { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--menue-platz) + env(safe-area-inset-bottom, 0px)); z-index: 2; white-space: nowrap; }   /* Aussehen: Rauchglas (material.css, .hlc-neu-fest), Nr. 906 */
    body.halle-welt .hlc-neu-fest[hidden] { display: none; }
    .hlc-wisch { display: flex; align-items: center; gap: 6px; position: absolute; left: 50%; bottom: calc(12px + var(--tap) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 2; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 14px; background: var(--glas-fest); color: var(--gold-h); font-size: var(--fs-sm); pointer-events: none; white-space: nowrap; }
    .hlc-wisch[hidden] { display: none; }
    .hlc-wisch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
}
/* Pfeile im Wisch-Hinweis sind echte Knöpfe (wisch-raum.js): 44 px Tippfläche, scrollen ein Stück weiter; der Text verschwindet nach dem ersten Scrollen */
.hlc-wisch .wisch-pfeil { pointer-events: auto; width: var(--tap); height: var(--tap); padding: 0; margin: -4px 0; border-radius: 50%;
    cursor: pointer; }   /* Aussehen: Rauchglas (material.css, .wisch-pfeil), Nr. 905 */
.hlc-wisch .wisch-pfeil:disabled { opacity: .35; cursor: default; }
.hlc-wisch .wisch-pfeil svg { width: 20px; height: 20px; }
.hlc-wisch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }      /* Text nur noch für Screenreader */
/* Hinweis = zwei Pfeil-Knöpfe am linken/rechten Fensterrand auf halber Höhe: überdeckt keine Beschriftung und kein Bedienelement in der Mitte (Fremdtest 2026-10-10) */
html body.halle-welt .hlc-wisch { left: 0; right: 0; top: 50%; bottom: auto; transform: translateY(-50%); justify-content: space-between; padding: 0 6px; background: none; border: 0; border-radius: 0; box-sizing: border-box; }
html body.halle-welt .hlc-wisch .wisch-pfeil { margin: 0; opacity: .85; }
/* Touch (Nr. 1170, Betreiber: „unnötig zum Hin-und-her-Schalten, wenn man wischen kann“): Wischen geht, die Pfeil-Knöpfe entfallen in JEDER Ansicht mit Wisch-Hinweis (Kompendium, Rüstung, Bilderwand). Mit Maus (pointer: fine) bleiben sie, dort wischt man nicht. */
@media (pointer: coarse) { html body.halle-welt .hlc-wisch { display: none; } }
.zieht { cursor: grabbing; user-select: none; }
.hlc-scroll { cursor: grab; }
@media (max-aspect-ratio: 1/1) {
    .hlc-seite { bottom: calc(12px + var(--tap) + 10px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .hlc-stand, .hlc-schild { transition: none; } }

/* ═══ Bedienflaechen folgen dem Modus (Nr. 855, Nr. 861): Chips, Pfeile, Hinweise nehmen die Chip-Tokens (tokens.css, Gruppe 1) ═══ */
body.halle-welt :is(.hl-chip, .hlc-pfeil, .hlc-seite, .hlc-wisch) { background: var(--ui-chip-bg); color: var(--ui-chip-text); border-color: var(--ui-chip-rand); }
body.halle-welt :is(.hlc-pfeil):hover:not(:disabled) { background: var(--ui-chip-bg-h); }
.hlm-einst { padding: var(--sp-1) 0 0; }
.hlm-einst[hidden] { display: none; }
.hlm-abschnitt { margin-bottom: 8px; padding-top: 6px; border-top: 1px solid var(--border); }


/* Ansicht-Schalter (Admin/GM/Spieler) im Pergamentmenue (Nr. 874): Kopie der role-switch-wrap, Tinte statt Gold */
.hlm-ansicht { padding: var(--sp-1) 0 var(--sp-2); border-bottom: 1px solid var(--bm); }
.hlm-ansicht .role-switch-label { color: var(--mat-leise); padding: 0; }
.hlm-ansicht .role-toggle { display: flex; border: 1px solid var(--mat-rand); border-radius: var(--mat-radius-klein); overflow: hidden; background: var(--mat-feld); }
.hlm-ansicht .role-btn { color: var(--mat-text); font-size: var(--fs-xs); }
.hlm-ansicht .role-btn:hover { background: var(--mat-hover); }
.hlm-ansicht .role-btn.active { background: var(--mat-haupt); color: var(--mat-haupt-text); }
.hlm-ansicht .role-btn:focus-visible { outline: 3px solid var(--mat-fokus); outline-offset: -3px; }

/* Raum offen: der Halle-Menüknopf liegt fest an derselben Ecke wie der Menüknopf des Raums und fing dessen Klick ab (Nr. 942) */
.hl:has(> .hlu-host:not([hidden])) > .hl-schild { display: none; }
.hl-zurueck[hidden], .hl:has(> .hlu-host:not([hidden])) > .hl-zurueck { display: none; }   /* Nr. 1004: Zurück in der Halle nur bei offenem Fenster; im Raum gilt dessen eigener Knopf */

/* Würfel-Optik-Knopf unter dem Halle-Würfel (Nr. 993): Bauteil .el-neben mit Zahnrad; Auswahl = MFWuerfelOptik.oeffneWahl */
.hl-seite .hl-zahn { white-space: nowrap; width: auto; max-width: 100%; box-sizing: border-box; display: inline-flex; position: relative; z-index: 1; align-items: center; justify-content: center; gap: var(--sp-1); min-height: var(--tap); padding-inline: var(--sp-2); line-height: 1.2; }
.hl-seite .hl-zahn span { white-space: nowrap; }
/* Nr. 1013: Beschriftung nur „Würfel“ (Zahnrad + ein Wort, bricht nie um, bleibt in der Spalte des Würfels und damit mind. --sp-2 vom Bildrand); der volle Name steht im Tooltip und in der Hilfe */
.hl-zahn svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

/* Nr. 1013: Onyx-Blatt sitzt optisch gleich weit vom Bildrand wie das Pergament-Blatt (dessen Fransenrand lässt ~8 px Papier außen frei, gemessen 16/19 px sichtbar gegen 8 px) */
@media (max-width: 999px) and (orientation: portrait) { html[data-optik="onyx"] .hlu-tafel.el-tafel { left: calc(var(--rand-aussen) + var(--blatt-papierrand)); right: calc(var(--rand-aussen) + var(--blatt-papierrand)); } }
@media (min-width: 1000px) { html[data-optik="onyx"] .hlu-tafel.el-tafel { left: calc(24px + var(--blatt-papierrand)); }
    html[data-optik="onyx"] .hlu-tafel.el-tafel[data-seite="rechts"] { left: auto; right: calc(24px + var(--blatt-papierrand)); } }