/*
 * Mobile-Utility-Klassen für Antamar
 *
 * Wiederverwendbare Building-Blocks, die punktuelle Mobile-Lösungen
 * (ausruestung.inc.php, mobile_heldinfo.php, transfer-screens, ...)
 * gemeinsam nutzen. Wird nach antamar_tokens.css und vor
 * antamarGeneralv57.css geladen (siehe includes/html_head_css.inc.php),
 * damit die Tokens verfügbar sind und nachfolgende Stylesheets die
 * Generika weiter spezialisieren können.
 *
 * Alle Regeln nur innerhalb @media (max-width: 770px) — Desktop bleibt
 * unangetastet.
 *
 * Pattern-Vokabular:
 *   .mobile-tabs / .mobile-tab          — Chip-Tab-Switcher zwischen 2-3 Sections
 *   .mobile-sticky-summary              — Oben angepinnte Stats/Header-Zeile
 *   .mobile-chip-bar                    — Horizontal scrollende Chip-Reihe (Slot-Wechsel etc.)
 *   .mobile-toolbar / .mobile-toolbar-btn — Action-Bar (Filter, Bulk, Sortierung)
 *   .mobile-card                        — Einzelne Item-Card im Listen-Layout
 *   .mobile-card-grid                   — Container, der Children in Card-Liste umstellt
 *   .mobile-action-bar                  — Sticky-Bottom für primäre Aktion
 *
 * Beispiele in der Codebase:
 *   .gepaeck-summary  (ausruestung.inc.php)        ~ .mobile-sticky-summary
 *   .gepaeck-toolbar  (ausruestung.inc.php)        ~ .mobile-toolbar
 *   .heldhub-tabs     (mobile_heldinfo.php)        ~ .mobile-tabs
 *   .mobile-transfer-tabs / .mobile-transfer-summary
 *                     (antamarGeneralv57.css, Transfer.js) ~ konkrete Subklassen
 *
 * Künftige Migrationen sollen direkt die Generika nennen.
 */

/* Default-Hidden für Klassen, die ausschließlich im Mobile-Layout
   sichtbar sein sollen. Die @media (max-width: 770px)-Regeln unten
   überschreiben das (gleiche Spezifität, spätere Cascade gewinnt). */
.kampf-mobile-summary,
.kampfschule-mobile-summary,
.kampfmanoever-mobile-summary,
.kampfschule-help,
.zauber-help,
.arena-tabs,
.arena-mobile-summary,
.arena-berichte-filter,
.arena-action-bar,
.arena-vitals,
.arena-key-chip,
.arena-fordern-btn,
.arena-bericht-card-head,
.arena-liga-mobile-head,
.alchimie-mobile-summary,
.reise-aktionen,
.reise-mobil-scrim,
.reise-karte-schliessen,
.reise-karte-tap,
.heldinfo-mid { display: none; }

/* === Zauberseite: Zauberbeschreibung mobil inline in der Card (analog .kampfschule-help) === */
/* Desktop-Trenner der Aktivierte-Sonderfertigkeiten-Liste (ersetzt den fruheren Pipe-Text in zauberseite.inc.php) */
.zauber-sf-item:not(:last-child)::after {
    content: "|";
    margin: 0 .4em;
    color: var(--mobile-text-muted);
}

@media (max-width: 770px) {
    /* Beschreibung als gestyltes Inline-Kaestchen unter dem Namen (Zauber-Card + SF-Liste) */
    .zauberBox .zauber-help {
        display: block;
        margin: var(--space-xs) 0;
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-chip-bg);
        border-left: 3px solid var(--mobile-border);
        border-radius: 4px;
        font-size: 0.85em;
        line-height: 1.4;
        color: var(--mobile-text-soft);
    }
    /* Nur die redundanten Namens-Tooltips neutralisieren; ZfW-Mod und "Im Kampf" bleiben aktiv */
    .zauberBox .zauber-name a.tip,
    .zauberBox .zauber-sf-item a.tip {
        pointer-events: none;
    }
    /* Aktivierte-SF-Liste: Inline-Items zu gestapelten Bloecken; Desktop-Trenner entfernen */
    .zauberBox .zauber-sf-list .zauber-sf-item {
        display: block;
        margin-bottom: var(--space-sm);
    }
    .zauberBox .zauber-sf-item::after {
        content: none;
    }
    /* Kampfverhalten (Gambit-Bedingungen): Touch-Höhe der summary + volle Select-Breite */
    .zauberBox .zauber-regeln > summary {
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
    }
    .zauberBox select.zb-staerke {
        width: 100%;
    }
}

/* === Magierakademie (magierakademie.php → magierakademie.inc.php) ============
   Die Akademie-Seite teilt sich den .kampfschule-Wrapper (Desktop-Skin +
   geteilte Mobil-Card-Regeln) und rendert die zu lernenden/vergessenden Zauber
   im .zauber-grid/.zauber-card-Pattern der Zauberseite (Skin-CSS, responsiv:
   mobil 1-spaltig). Hier nur die zwei Akademie-Sonderregeln; sie gelten Desktop
   UND Mobil und färben sich über die Tokens pro Skin.
   ============================================================================ */
/* Section-Header der Zauber-Card-Bereiche ("Zauber lernen"/"Zauber vergessen") —
   Optik analog tr.kampfschule-row-section, damit sie zur SF-Tabelle passen. */
body .magierakademie .zauberBox > h3 {
    margin: var(--space-md) 0 var(--space-sm);
    padding-bottom: var(--space-xs);
    font-size: 1.15em;
    font-weight: 600;
    color: var(--mobile-accent);
    border-bottom: 1px solid var(--mobile-border-very-soft);
}
/* Destruktive Variante des Zauber-Buttons für "Vergessen" (es gibt codebase-weit
   keine wiederverwendbare Destructive-Button-Klasse; Warn-Tokens sind idiomatisch). */
body .magierakademie .zauber-steigern-btn.forget {
    background: var(--mobile-warn-bg);
    border-color: var(--mobile-warn-border);
    color: var(--mobile-warn-text);
}
body .magierakademie .zauber-steigern-btn.forget:hover {
    background: var(--mobile-warn-border);
    border-color: var(--mobile-warn-border);
    color: #fff;
}

/* Detail-Sections der Kampfseite sind auf Desktop dauerhaft offen — dort wird
   VanillaAccordion nicht initialisiert (siehe kampfseite.inc.php-Init-Skript).
   Skin-CSS (z.B. bombast/antamarv41.css) setzt .accordion_content auf
   max-height:0 + opacity:0 als Akkordion-Default — wir überstimmen für die
   Kampf-Details per höherer Spezifität.

   NUR Desktop (min-width:771px): Auf Mobile initialisiert kampfseite.inc.php
   VanillaAccordion und setzt Inline-Styles NUR auf der aktiven Section — die
   übrigen müssen auf den Skin-Default (max-height:0) zurückfallen, um als
   echtes Akkordeon zu kollabieren. Würde diese Regel auch mobil greifen,
   bliebe jede Section offen (max-height:none gewinnt per Spezifität). */
@media (min-width: 771px) {
    .kampf_v2 .kampf-details .accordion_content {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }
}

@media (max-width: 770px) {

    /* ============================================================
     * .mobile-tabs — Chip-Switcher
     * Aktiver Tab via [aria-selected="true"] oder .active.
     * Sticky-Header über mobile-topbar; tieferer z-index als der
     * Drawer (z-mobile-bar = 1000), höher als Content.
     * ============================================================ */
    .mobile-tabs {
        display: flex;
        gap: var(--space-sm);
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top));
        z-index: 5;
        background: var(--mobile-body-bg);
        padding: var(--space-xs) 0;
    }
    /* .mobile-transfer-tab (Transfer-Screens) teilt das Chip-Styling mit
       .mobile-tab — gemeinsame Quelle hier, Definition aus antamarGeneralv57.css
       entfernt. .mobile-transfer-tabs (Container) bleibt dort, da eigenständig. */
    .mobile-tab,
    .mobile-transfer-tab {
        flex: 1;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-size: 0.95em;
        font-family: inherit;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
    }
    .mobile-tab[aria-selected="true"],
    .mobile-tab.active,
    .mobile-transfer-tab[aria-selected="true"] {
        background: var(--mobile-accent);
        color: var(--mobile-accent-contrast);
        border-color: var(--mobile-accent-strong);
        font-weight: 600;
    }

    /* ============================================================
     * .mobile-sticky-summary — Sticky-Stats
     * Direkt unter .mobile-tabs platzierbar (top um Tab-Höhe versetzt).
     * Kind .stat-Cards optional, freie HTML-Struktur möglich.
     * ============================================================ */
    .mobile-sticky-summary {
        display: flex;
        gap: var(--space-sm);
        align-items: center;
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top));
        z-index: 4;
        background: var(--mobile-body-bg);
        padding: var(--space-xs) 0;
        margin-bottom: var(--space-sm);
        min-height: var(--touch-target-min);
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    .mobile-sticky-summary.below-tabs {
        top: calc(var(--mobile-topbar-height) + var(--safe-top) + var(--touch-target-min) + var(--space-sm));
    }
    .mobile-sticky-summary .stat {
        flex: 1;
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        text-align: center;
        min-width: 0;
    }
    .mobile-sticky-summary .stat-label {
        font-size: 0.8em;
        color: var(--mobile-text-muted);
        line-height: 1.2;
    }
    .mobile-sticky-summary .stat-value {
        font-size: 1.05em;
        color: var(--mobile-text);
        font-weight: 600;
        line-height: 1.2;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-sticky-summary .stat-value img {
        height: 0.9em;
        width: auto;
        vertical-align: baseline;
    }

    /* ============================================================
     * .mobile-chip-bar — Horizontal scrollende Chip-Reihe
     * Für Slot-Switcher (Rucksack/Waffen/...) und Filter-Pillen.
     * iOS-Touch-Scroll, Kinder auf 44 px Touch-Target.
     * ============================================================ */
    .mobile-chip-bar {
        display: flex;
        gap: var(--space-xs);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-xs) 0;
        scrollbar-width: thin;
        white-space: nowrap;
    }
    .mobile-chip-bar > * {
        flex: 0 0 auto;
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-chip-bar img {
        height: var(--touch-target-min);
        width: auto;
        max-height: var(--touch-target-min);
    }

    /* ============================================================
     * .mobile-toolbar — Action-Bar mit Chip-Buttons / Selects
     * Sortierung, Bulk-Wegwerfen, Filter etc.
     * ============================================================ */
    .mobile-toolbar {
        display: flex;
        gap: var(--space-sm);
        flex-wrap: wrap;
        margin-bottom: var(--space-sm);
    }
    .mobile-toolbar-btn,
    .mobile-toolbar select {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-family: inherit;
        font-size: 0.95em;
        text-decoration: none;
        cursor: pointer;
    }
    .mobile-toolbar-btn img {
        height: 1.25em;
        width: auto;
        vertical-align: middle;
    }
    .mobile-toolbar-btn:hover,
    .mobile-toolbar-btn:focus {
        background: var(--mobile-surface-2-hover);
        border-color: var(--mobile-accent);
        outline: none;
    }

    /* ============================================================
     * .mobile-card-grid + .mobile-card
     * Generisches Listen-Karten-Layout. .mobile-card-grid kann auf
     * <table>, <ul> oder <div> angewendet werden; .mobile-card auf
     * <tr>, <li>, <div>.
     * ============================================================ */
    .mobile-card-grid {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .mobile-card {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: var(--space-sm);
        align-items: center;
        min-height: var(--touch-target-min);
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
        min-width: 0;
    }
    .mobile-card .mobile-card-image {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-card .mobile-card-image img {
        max-width: 100%;
        max-height: 100%;
        margin: 0;
    }
    .mobile-card .mobile-card-body {
        min-width: 0;
        word-break: break-word;
    }
    .mobile-card .mobile-card-title {
        font-weight: 600;
        color: var(--mobile-text);
        line-height: 1.3;
    }
    .mobile-card .mobile-card-meta {
        font-size: 0.85em;
        color: var(--mobile-text-soft);
        margin-top: 2px;
    }

    /* ============================================================
     * .mobile-action-bar — Sticky-Bottom für primäre Aktion
     * z.B. "Übergeben", "Verkaufen", "Bestätigen" am unteren
     * Viewport-Rand, mit safe-area-inset-bottom für iPhone-Notch.
     * ============================================================ */
    .mobile-action-bar {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 6;
        background: var(--mobile-body-bg);
        padding: var(--space-sm) 0 calc(var(--space-sm) + var(--safe-bottom));
        border-top: 1px solid var(--mobile-border-very-soft);
        display: flex;
        gap: var(--space-sm);
    }
    .mobile-action-bar .mobile-action-btn {
        flex: 1;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-family: inherit;
        font-size: 1em;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }
    .mobile-action-bar .mobile-action-btn.secondary {
        background: var(--mobile-chip-bg);
        border-color: var(--mobile-border);
        font-weight: 400;
    }

    /* ============================================================
     * Aliase: bestehende spezifische Klassen erben das Generika-
     * Layout, ohne dass der jeweilige Aufruf-Site umbenannt werden
     * muss. So profitieren ältere Lösungen ohne Refactor.
     * ============================================================ */
    .heldhub-tabs                 { /* nutzt eigene Spezial-Optik */ }
    .gepaeck-toolbar              { /* Spezialfall: Sticky-Position */ }
    /* .gepaeck-summary, .mobile-transfer-tabs, .mobile-transfer-summary
       bleiben in antamarGeneralv57.css mit eigenen Sticky-Offsets,
       weil die exakte z-Index- und Top-Position kontextspezifisch ist. */

    /* ============================================================
     * Reise-Aktionspanel — Touch-Targets für Reiten, Gewaltmarsch,
     * Kräutersuche. Selektoren mit body-Prefix, weil
     * antamar_mobile_patterns.css VOR antamarGeneralv57.css lädt und
     * die Desktop-Defaults (.gewaltmarsch_btn, .reiten_controls …)
     * sonst gewinnen.
     * ============================================================ */
    body .gewaltmarsch_btn {
        min-height: var(--touch-target-comfort);
        width: 100%;
        box-sizing: border-box;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--mobile-font-base);
        margin-top: var(--space-xs);
    }
    body .gewaltmarsch_controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-sm) 0;
    }
    body .gewaltmarsch_hinweis,
    body .gewaltmarsch_cooldown { width: 100%; }
    body .kraeutersuche_select,
    body #kraeutersuche_held_select {
        min-height: var(--touch-target-min);
        flex: 1 1 100%;
        /* min-width:0 laesst das Flex-Item unter seine Content-Breite (langer
           Heldenname) schrumpfen; max-width kappt, text-overflow kuerzt den
           Namen mit Ellipse — sonst sprengt ein langer Name den Viewport
           (gleiches Muster wie bei den #routenplan-Selects). */
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        text-overflow: ellipsis;
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--mobile-font-base);
    }
    body .reiten_controls {
        gap: var(--space-sm);
        padding: var(--space-sm) 0;
    }
    body .reiten_controls label {
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
    }

    /* ============================================================
     * Reise — "weiter"-Button als Primary, sekundäre Links als Chips
     * ============================================================ */
    body a#link_reise_weiter {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        margin: var(--space-md) 0 var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-weight: 600;
        font-size: 1.1em;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        line-height: calc(var(--touch-target-comfort) - 2 * var(--space-sm));
    }
    body a#umdrehen_link,
    body a#link_rasten {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        margin: var(--space-xs) var(--space-xs) var(--space-xs) 0;
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-decoration: none;
        line-height: 1;
    }

    /* ============================================================
     * Reise-Ansicht: mobile Inhaltsreihenfolge.
     * ZBs -> Reisepanel (Banner/Karte/Tipp/Routenplan) -> Gruppenbox
     * -> Chats -> Sticky-Leiste. Desktop behaelt die Server-
     * Reihenfolge (Chats direkt unter den ZBs); mobil sollen die
     * Reise-Inhalte zusammenruecken. CSS-only per Flex-order statt
     * Server-Umbau: zufallsbegegnungen_ausgabe.inc.php emittiert die
     * Chat-Bloecke fest nach #zb_container, und ein DOM-Move wuerde
     * bei Rotation ueber die 770px-Grenze im Desktop-Layout stranden.
     * ============================================================ */
    body .spielSeite:has(> #zb_container) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    body .spielSeite:has(> #zb_container) > #acc_gruppe,
    body .spielSeite:has(> #zb_container) > #mentorenchat,
    body .spielSeite:has(> #zb_container) > #globchat { order: 10; }
    body .spielSeite:has(> #zb_container) > .reise-aktionen { order: 99; }
    /* Abstands-<br> vor table.reise (reise.inc.php) frisst im Flex-Fluss Platz */
    body .spielSeite:has(> #zb_container) > br { display: none; }

    /* ============================================================
     * Reise-Ansicht: Sticky-Aktionsleiste (unten, ueber dem App-Menue).
     * Statuszeile (Countdown-Spiegel aus ReiseCountdown.updateBarStatus)
     * + [Aktionen] [Karte] [weiter]. Haendler-Muster: .mobile-action-bar
     * bringt Sticky-Bottom + safe-area, Offset = Hoehe des fixen
     * App-Menues (.div-mobile-menu).
     * ============================================================ */
    /* Sticky-Containing-Block freigeben: #gameInnerBox hat skin-seitig
       overflow:hidden — Sticky klebt sonst gegen den falschen Block
       (gleiches Muster wie body:has(#haendler-kauftabelle)). */
    body:has(.reise-aktionen) #gameInnerBox { overflow: clip; }

    body .reise-aktionen.mobile-action-bar {
        flex-wrap: wrap;
        align-items: center;
        /* 1rem-Kontext: --mobile-bottombar-height ist in em definiert und muss
           hier auf DIESELBE Pixelhoehe aufloesen wie beim App-Menue selbst
           (.div-mobile-menu, 16px-Basis) — sonst klafft ein Spalt. */
        font-size: 1rem;
        bottom: var(--mobile-bottombar-height);
        z-index: 8;              /* ueber Sheet (7) und Scrim (6) */
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
        box-sizing: border-box;
    }
    body .reise-aktionen .reise-bar-status {
        flex-basis: 100%;
        order: -1;
        min-height: 1.2em;
        text-align: center;
        font-size: 0.9em;
        color: var(--mobile-text-soft);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* <a>(weiter) und <button> auf identische Geometrie normalisieren:
       Buttons sind per UA-Default border-box und zentrieren ihren Inhalt,
       der Anchor nicht — ohne das ist "weiter" um sein Padding hoeher
       und der Text klebt oben. */
    body .reise-aktionen .mobile-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    body .reise-aktionen .mobile-action-btn.secondary {
        flex: 0 0 auto;
        padding: var(--space-xs) var(--space-sm);
    }
    body .reise-aktionen .mobile-action-btn.secondary.active {
        background: var(--mobile-accent);
        border-color: var(--mobile-accent-strong);
        color: var(--mobile-accent-contrast);
    }
    /* Der Bar-"weiter" ersetzt mobil den Original-Link in der Tabelle */
    body table.reise a#link_reise_weiter { display: none; }

    /* ============================================================
     * Reise-Ansicht: Aktionen-Sheet. #CountDownBoxRU selbst wird zum
     * Bottom-Sheet — KEIN DOM-Move: renderControls() schreibt weiter
     * in dasselbe Element, und bei Rotation ueber die 770px-Grenze
     * faellt die Box per Media-Query zurueck in die Tabellenzelle.
     * Die exakte px-Unterkante (Oberkante der Leiste) setzt das
     * Inline-Skript in reise.inc.php beim Oeffnen.
     *
     * Scope table.reise ist Pflicht: dieselbe ID trugen frueher auch
     * Job-Countdown, Kerker und Ordenshaus-Bau. Die bekamen damit hier
     * display:none, und .reise-sheet-offen vergibt nur reise.inc.php —
     * ihre Countdowns waren mobil also komplett unsichtbar.
     * ============================================================ */
    body table.reise #CountDownBoxRU {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 7;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        background: var(--mobile-body-bg);
        border: 0;
        border-top: 2px solid var(--mobile-border);
        border-radius: 12px 12px 0 0;
        padding: var(--space-md) var(--space-md) var(--space-lg);
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.3);
    }
    body table.reise #CountDownBoxRU.reise-sheet-offen {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xs) var(--space-sm);
        align-items: start;
    }
    /* Griff-Optik als Sheet-Affordance */
    body table.reise #CountDownBoxRU.reise-sheet-offen::before {
        content: "";
        grid-column: 1 / -1;
        justify-self: center;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--mobile-border);
    }
    /* Volle Breite: Routenzeile, Reiten, Auto-Reise, Countdown-Text und
       Kraeutersuche mit Helden-Select (Gruppe); Gewaltmarsch/Skifahren/
       Kraeuter (solo) teilen sich das 2-Spalten-Raster. */
    body table.reise #CountDownBoxRU .reise_route,
    body table.reise #CountDownBoxRU .reiten_controls,
    body table.reise #CountDownBoxRU .autoplay_controls,
    body table.reise #CountDownBoxRU .kraeutersuche_controls:has(select),
    body table.reise #CountDownBoxRU #reiten_warnung,
    body table.reise #CountDownBoxRU #reise_time_text { grid-column: 1 / -1; }
    /* Kompakte Buttons im Sheet (ueberschreibt die 48px-Vollbreiten-Regel) */
    body table.reise #CountDownBoxRU .gewaltmarsch_btn {
        min-height: var(--touch-target-min);
        font-size: 0.9em;
        padding: var(--space-xs) var(--space-sm);
        margin-top: 0;
    }
    body table.reise #CountDownBoxRU .gewaltmarsch_controls {
        border-top: none;
        margin: 0;
        padding: var(--space-xs) 0;
    }
    body table.reise #CountDownBoxRU .gewaltmarsch_hinweis,
    body table.reise #CountDownBoxRU .gewaltmarsch_cooldown {
        font-size: 0.75em;
        opacity: 0.85;
    }
    body .reise-mobil-scrim.offen {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 6;
        background: rgba(0, 0, 0, 0.45);
    }

    /* ============================================================
     * Reise-Ansicht: Karte als kleiner, nicht-interaktiver Mini-
     * Ausschnitt unter dem Landschafts-Banner; Antippen (und der
     * Leisten-Button) oeffnet das Vollbild-Overlay (.karte-offen).
     * WICHTIG: auf den Unterwegs-Screen gescoped — der Wegweiser beim
     * REISEANTRITT (wegweiser.inc.php) nutzt DENSELBEN Container
     * #wegweiserMapContainer und braucht die Karte voll im Fluss.
     * Scope ueber table.reise (gibt es NUR in reise.inc.php) statt
     * body:has(.reise-aktionen): die Leiste wird erst NACH der Tabelle
     * gerendert, ein :has-Scope griffe also erst nach dem Leaflet-Init
     * und die Karte wuerde mit falscher Groesse initialisiert.
     * ============================================================ */
    body table.reise #wegweiserMapContainer {
        /* !important: Leaflet/AntamarMap setzen feste width/height in px
           als INLINE-Styles auf den Container (initLayout) */
        width: 100% !important;
        height: 180px !important;
        min-width: 0;
        min-height: 0;        /* antamar_leaflet.css setzt mobil clamp(300px,...) */
        max-width: 100%;
        margin: 0 0 var(--space-sm);
        border-radius: 6px;   /* Card-Optik wie das Banner-Bild darueber */
        box-sizing: border-box;
        pointer-events: none; /* nicht-interaktiv; Taps faengt .reise-karte-tap */
        /* Eigener Stacking-Context: Leaflet-Panes/Marker (z-index bis 700)
           duerfen beim Scrollen nicht ueber Sticky-Leiste (8) & Co. malen */
        z-index: 0;
    }
    /* Bedienelemente im Mini-Modus ausblenden — ueber :not(.karte-offen)
       erscheinen sie im Vollbild-Overlay wieder. !important noetig:
       Vollbild-/Markierungs-Button tragen Inline-display:block. */
    body table.reise #wegweiserMapContainer:not(.karte-offen) .leaflet-control-container,
    body table.reise #wegweiserMapContainer:not(.karte-offen) .antamar-minimap,
    body table.reise #wegweiserMapContainer:not(.karte-offen) .antamar-fullscreen-btn,
    body table.reise #wegweiserMapContainer:not(.karte-offen) .antamar-usermarker-btn,
    body table.reise #wegweiserMapContainer:not(.karte-offen) .antamar-layer-btn,
    body table.reise #wegweiserMapContainer:not(.karte-offen) .antamar-layer-panel {
        display: none !important;
    }
    /* Das Overlay IST bereits Vollbild mit eigenem Schliessen-Button - der Karten-⛶
       wuerde darueber die native API bzw. das Pseudo-Vollbild (AntamarMap) ein zweites
       Mal starten, auf dem iPad mit demselben Wisch-Problem. !important: Inline-display. */
    body table.reise #wegweiserMapContainer.karte-offen .antamar-fullscreen-btn {
        display: none !important;
    }
    /* leaflet.css reaktiviert pointer-events auf Markern (.leaflet-interactive
       pointer-events:auto) -> im Mini-Modus wieder abklemmen */
    body table.reise #wegweiserMapContainer:not(.karte-offen) .leaflet-interactive {
        pointer-events: none;
    }
    /* Kandidaten-Flaggen des Routenplaners im 180px-Mini ausblenden -
       klickbar sind sie ohnehin erst im Vollbild-Overlay */
    body table.reise #wegweiserMapContainer:not(.karte-offen) .antamar-marker-kandidat {
        display: none !important;
    }
    /* Tap-Catcher: die ganze Mini-Karte oeffnet das Overlay */
    body table.reise #wegweiserMapContainer:not(.karte-offen) .reise-karte-tap {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1100;        /* ueber allen Leaflet-Panes (max 700) */
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        pointer-events: auto; /* Kind-Override unter pointer-events:none */
    }
    /* Dezenter Hinweis-Chip unten rechts im Mini */
    body table.reise #wegweiserMapContainer .reise-karte-tap-hint {
        position: absolute;
        right: var(--space-xs);
        bottom: var(--space-xs);
        padding: 2px 10px;
        background: var(--mobile-body-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 999px;
        color: var(--mobile-text);
        font-size: 0.75em;
        line-height: 1.6;
    }
    /* Leerraum-Fix: die unsichtbare Wegweiser-Datenliste (visibility:hidden
       in reise.inc.php) bekaeme mobil die Reiseziel-Card-Optik aus
       antamarGeneralv97.css und reserviert 60-90px Leerplatz unterm Banner.
       loadHotspots liest nur li-Attribute — display:none ist unschaedlich. */
    body table.reise #wegweiser_ul { display: none; }

    body:has(.reise-aktionen) #wegweiserMapContainer.karte-offen {
        display: block;
        pointer-events: auto;   /* hebt das Mini-pointer-events:none auf */
        /* !important: Leaflet/AntamarMap setzen position:relative sowie feste
           width/height in px als INLINE-Styles auf den Container — ohne
           Override bleibt die Karte klein im Seitenfluss kleben. */
        position: fixed !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 1050;      /* ueber App-Menue (1000), unter mBox (8000+) */
        max-width: none;
        min-width: 0;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    body .reise-karte-schliessen.offen {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: calc(var(--safe-top) + var(--space-sm));
        right: var(--space-sm);
        width: var(--touch-target-comfort);
        height: var(--touch-target-comfort);
        z-index: 1060;
        background: var(--mobile-body-bg);
        color: var(--mobile-text);
        border: 1px solid var(--mobile-border);
        border-radius: 50%;
        font-size: 1.5em;
        line-height: 1;
        cursor: pointer;
    }

    /* ============================================================
     * AOQML Quest-Auswahllinks — größere Touch-Targets (Mobile)
     * <choice>, <paths> und <item-select> teilen die Klasse
     * .questlink (paths bekommt sie via PathsPlayer-Patch). Nur
     * LISTEN-umschlossene Choices (a.questlink direkt im <li>)
     * werden zu großen Tipp-Zeilen — Inline-<choice> im Fließtext
     * und die Gruppen-Heldenwahl (" | ") bleiben Inline-Link-Text.
     * body-Prefix nötig: dieses File lädt VOR den Skin-CSS, deren
     * .aoqml li / .aoqml a sonst per Spezifität gewinnen.
     * Nur Tokens => adaptiert automatisch an jeden Skin.
     * ============================================================ */

    /* Auswahl-Liste: Browser-Einzug weg, damit die Tipp-Zeilen die
       volle Breite nutzen (mehr Trefferfläche). */
    body .aoqml ul:has(> li > a.questlink) {
        margin-left: 0;
        padding-left: 0;
        list-style: none;
    }
    /* Choice-<li>: Disc-Bullet + Skin-Seitenmargin entfernen, feine
       Trennlinie zwischen den Auswahlen. Prosa-Listen ohne questlink
       behalten Bullet/Einzug. */
    body .aoqml li:has(> a.questlink) {
        list-style: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    body .aoqml li:has(> a.questlink):last-child {
        border-bottom: none;
    }
    /* Der Link wird die Tipp-Zeile: Block + großzügiges vertikales
       Padding => ~48px hoch. Unterstrichener Link-Look (Farbe +
       Underline der Skins) bleibt bewusst erhalten. */
    body .aoqml li a.questlink {
        display: block;
        min-height: var(--touch-target-min);
        padding: var(--space-md) var(--space-xs);
        line-height: 1.4;
        box-sizing: border-box;
    }
    /* Tipp-Feedback per :active (NICHT :hover — Touch-Hover-Guard in
       antamar_tokens.css würde :hover-Background neutralisieren). */
    body .aoqml li a.questlink:active {
        background: var(--mobile-chip-bg);
    }

    /* ============================================================
     * Rich-Content-Container — Bilder skalieren, statt Viewport zu
     * sprengen. Greift in Containern, die User- oder System-HTML
     * (BB-Code, AOQML, TinyMCE) rendern und in denen <img> auftauchen
     * kann. UI-Icons in Mobile-Patterns (.mobile-chip-bar img etc.)
     * sind nicht betroffen — die haben höhere Spezifität und eigene
     * Sizing-Regeln.
     *
     * max-width MUSS !important sein: AOQML-/TinyMCE-/BB-Code-<img>
     * tragen ein Inline-style="max-width:500px" (z. B. Quest-Szenen-
     * bilder), und Inline-Styles schlagen externe Regeln — ohne
     * !important bliebe die 500px-Breite stehen und sprengt mobil den
     * Viewport. height bleibt bewusst OHNE !important: höhenbasierte
     * Float-Bilder (Türen/Portraits, inline height:100px) würden sonst
     * auf native Größe aufgeblasen.
     * ============================================================ */
    .nachricht_inhalt img,        /* nachrichten.php — PN-Inhalt */
    .aoqml img,                   /* Quest-Szenen & Zeitzeugen-Quests */
    .rp_infotxt img,              /* rp.php — RP-Beschreibung */
    .f_infotxt img,               /* rp.php — Fraktions-Beschreibung */
    .fr_interna img,              /* rp.php — Fraktions-Interna */
    .aoChatMessage .text img,     /* ext/chat — Chat-Nachricht */
    td.besch img,                 /* orden_halle.inc.php — Niederlassung */
    .egiezna_inhalt img {         /* rathaus_anzeige_lesen.inc.php */
        max-width: 100% !important;
        height: auto;
    }

    /* Münz-Icons aus heller2preis (dukat/silber/heller, intrinsisch
     * 120×128) von der Rich-Content-Skalierung oben ausnehmen: deren
     * height: auto hebt die 1em-Bindung aus antamarGeneralv97.css auf
     * und die PNGs rendern in Originalgröße (Forum t=921: riesige
     * Münzen im Gruppenchat, Hochformat). !important nötig, weil die
     * Container-Selektoren oben spezifischer sind als img[src$=…];
     * Münz-IMGs tragen nie Inline-Styles, daher gefahrlos. */
    img[src$="/dukat.png"],
    img[src$="/silber.png"],
    img[src$="/heller.png"] {
        height: 1em !important;
        width: auto !important;
    }

    /* ============================================================
     * RSS-News-Teaser (spiel.php Startseite) — die Design-CSS-
     * Dateien verankern .RssTeaser hartcodiert auf width: 780px;
     * im Mobile sprengt das den Viewport und gameInnerBox clipped
     * den Inhalt (Headline & Bild rechts abgeschnitten).
     * Hier wird die Breite aufgehoben und das eingebettete
     * WordPress-Bild (.wp-block-image img mit max-width: 98%;
     * height: 100% aus antamarGeneralv57.css) auf saubere
     * Aspect-Ratio gezwungen.
     * body-Prefix erhöht die Spezifität, weil die Design-CSS NACH
     * dem Mobile-Pattern-File geladen werden.
     * ============================================================ */
    /* Keine Login-Selektoren mehr: div.loginIntro div.introText und
       table.loginTable gab es nur auf login.php/neu.php, die seit dem
       Startseiten-Umbau ohne feste Pixelbreiten auskommen. */
    body div.RssTeaser,
    body .RssTeaser .wp-block-image,
    body .RssTeaser .wp-block-image > figure {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    body .RssTeaser img,
    body .RssTeaser .wp-block-image img {
        max-width: 100%;
        height: auto;
    }

    /* ============================================================
     * Einstellungen-Seite (einstellungen.php) — Mobile-Layout
     * Deckt alle 6 Kategorien ab. Heldenwahl bekommt ein Card-Grid,
     * die übrigen Forms stacken Label/Input vertikal. Tab-Nav wird
     * zu einer sticky, horizontal scrollenden Chip-Bar. Speichern-
     * Buttons und Status-Banner werden sticky positioniert.
     * ============================================================ */

    /* --- Allgemein: Stack-Layout für Settings-Forms -------------- */
    div.einstellungen { text-align: left; padding: 0 var(--space-sm); }
    div.einstellungen h2 { text-align: center; }
    div.einstellungen fieldset {
        max-width: none;
        padding: var(--space-sm);
        margin: var(--space-sm) 0;
    }
    /* Design-spezifische Tabellen-Borders/Backgrounds (z.B.
       .game th { border: 1px solid #402C13 } im Antamar-hell Design)
       brechen das Mobile-Stack-Layout — pro Label/Input erscheint
       ein eigener Kasten. Im Mobile-Block neutralisieren, Cards
       liefern ihre eigene visuelle Trennung. heldenwechsel,
       heldenloeschen und zb_wpg_beispiele behalten ihre Borders. */
    div.einstellungen fieldset th,
    div.einstellungen fieldset td,
    div.einstellungen table.heldenwahl-outer th,
    div.einstellungen table.heldenwahl-outer td {
        border: none;
        background: transparent;
    }
    div.einstellungen fieldset table.zb_wpg_beispiele th,
    div.einstellungen fieldset table.zb_wpg_beispiele td {
        /* Beispiel-Tabelle behält ihre Inline-Border-Styles */
        border: 1px solid #ccc;
    }
    div.einstellungen fieldset > table,
    div.einstellungen fieldset > table > tbody,
    div.einstellungen fieldset > table > tbody > tr,
    div.einstellungen fieldset > table > tbody > tr > th,
    div.einstellungen fieldset > table > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: var(--space-xs) 0;
    }
    div.einstellungen fieldset th.right,
    div.einstellungen th.right {
        font-weight: 600;
        padding-bottom: 2px;
        text-align: left;
    }
    div.einstellungen input.input_long,
    div.einstellungen input.input_longer,
    div.einstellungen input[type="text"],
    div.einstellungen input[type="password"],
    div.einstellungen input[type="file"],
    div.einstellungen textarea,
    div.einstellungen select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    div.einstellungen textarea { min-height: 6em; }
    div.einstellungen input.input_zahl { width: 4em; min-width: 4em; }

    /* heldenwechsel behält sein eigenes Grid (siehe weiter unten) */
    div.einstellungen table.heldenwechsel,
    div.einstellungen table.heldenwechsel > tbody,
    div.einstellungen table.heldenwechsel > tbody > tr,
    div.einstellungen table.heldenwechsel > tbody > tr > th,
    div.einstellungen table.heldenwechsel > tbody > tr > td { display: revert; }

    /* --- Tab-Navigation: sticky, horizontal scrollende Chip-Bar -- */
    /* body-Prefix erhöht Spezifität gegenüber p.tab-nav in
       antamarGeneralv57.css (lädt nach diesem Pattern-File). */
    body p.tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        scrollbar-width: thin;
        padding: var(--space-xs) var(--space-sm);
        margin: 0 calc(-1 * var(--space-sm)) var(--space-sm);
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top));
        z-index: 5;
        background: var(--mobile-body-bg);
        border-bottom: 1px solid var(--mobile-border-very-soft);
        scroll-snap-type: x proximity;
    }
    body p.tab-nav a,
    body p.tab-nav span.aktiv {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: var(--touch-target-min);
        white-space: nowrap;
        scroll-snap-align: start;
    }

    /* --- Rückmeldungen (success/error) als Sticky-Banner --------- */
    div.einstellungen .rueckmeldung {
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top) + var(--touch-target-min) + var(--space-sm));
        z-index: 4;
        margin: 0 calc(-1 * var(--space-sm)) var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        border-radius: 0;
        font-weight: 600;
        max-width: none;
    }
    div.einstellungen .rueckmeldung.success {
        animation: rueckmeldungFadeOut 0.4s ease-in 3.6s forwards;
    }

    /* --- Heldenwahl: outer-Tabelle aufbrechen -------------------- */
    div.einstellungen table.heldenwahl-outer,
    div.einstellungen table.heldenwahl-outer > tbody,
    div.einstellungen table.heldenwahl-outer > tbody > tr,
    div.einstellungen table.heldenwahl-outer > tbody > tr > th,
    div.einstellungen table.heldenwahl-outer > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: 0;
    }
    div.einstellungen table.heldenwahl-outer tr.heldenwahl-header th {
        font-size: 1.1em;
        text-align: center;
        padding: var(--space-sm) 0;
    }
    /* "Aktiven Helden ändern:" Label und "Helden über Nacht löschen?"
       sind redundant — Cards/Confirm-Dialog zeigen den Kontext schon. */
    div.einstellungen table.heldenwahl-outer > tbody > tr > th:not([colspan]) {
        display: none;
    }

    /* Inline-Status-Icons (Rogue-Skull, PN-Scroll) im Namens-Text
       werden auf Mobile ausgeblendet — sie wandern als Avatar-Badges. */
    .heldenwechsel .hw-inline-icon { display: none; }

    /* --- Heldenwahl: Card-Grid ----------------------------------- */
    div.einstellungen table.heldenwechsel,
    div.einstellungen table.heldenwechsel > tbody { display: block; }

    div.einstellungen table.heldenwechsel > tbody > tr {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
        gap: 2px var(--space-sm);
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
    }
    div.einstellungen table.heldenwechsel > tbody > tr.hw-row-with-checkbox {
        grid-template-columns: 56px 64px minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Layout ohne Checkbox: 3 Spalten (img, 1fr, 1fr) */
    .heldenwechsel td.hw-img      {
        grid-column: 1; grid-row: 1 / span 2;
        position: relative;
    }
    .heldenwechsel td.hw-img a    { display: block; position: relative; }
    .heldenwechsel td.hw-img img  {
        width: 64px !important;
        max-width: 64px !important;
        height: auto;
        border-radius: 4px;
    }
    .heldenwechsel td.hw-name     {
        grid-column: 2 / -1; grid-row: 1;
        font-weight: 600;
        word-break: break-word;
    }
    .heldenwechsel td.hw-meta     {
        grid-column: 2 / -1; grid-row: 2;
        font-size: 0.85em;
        color: var(--mobile-text-soft);
        word-break: break-word;
    }
    .heldenwechsel td.hw-actions  {
        grid-column: 1 / 3;
        grid-row: 3;
        display: flex;
        gap: var(--space-sm);
    }
    .heldenwechsel td.hw-loeschen {
        grid-column: 3 / 4;
        grid-row: 3;
    }
    /* colspan="2" auf hw-actions (Status-Pill-Fall) füllt die ganze Action-Reihe */
    .heldenwechsel td.hw-actions[colspan] { grid-column: 1 / -1; }

    /* Layout mit Checkbox: 4 Spalten */
    .heldenwechsel tr.hw-row-with-checkbox td.hw-checkbox {
        grid-column: 1; grid-row: 1 / span 2;
        align-self: center;
    }
    /* "für Gruppe"-Label vertikal stapeln: Box oben, dezente Unterschrift darunter */
    .heldenwechsel tr.hw-row-with-checkbox td.hw-checkbox .hw-checkbox-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .heldenwechsel tr.hw-row-with-checkbox td.hw-checkbox .hw-checkbox-label-text {
        margin-left: 0;
        font-size: 0.68em;
        text-align: center;
    }
    .heldenwechsel tr.hw-row-with-checkbox td.hw-img      { grid-column: 2; grid-row: 1 / span 2; }
    .heldenwechsel tr.hw-row-with-checkbox td.hw-name     { grid-column: 3 / -1; grid-row: 1; }
    .heldenwechsel tr.hw-row-with-checkbox td.hw-meta     { grid-column: 3 / -1; grid-row: 2; }
    .heldenwechsel tr.hw-row-with-checkbox td.hw-actions  { grid-column: 1 / 4; grid-row: 3; }
    .heldenwechsel tr.hw-row-with-checkbox td.hw-loeschen { grid-column: 4; grid-row: 3; }
    .heldenwechsel tr.hw-row-with-checkbox td.hw-actions[colspan] { grid-column: 1 / -1; }

    .heldenwechsel td.hw-actions a,
    .heldenwechsel td.hw-loeschen a {
        flex: 1;
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        text-decoration: none;
        color: var(--mobile-text);
        box-sizing: border-box;
        min-width: 0;
    }
    .heldenwechsel td.hw-loeschen a { width: 100%; }
    .heldenwechsel td.hw-actions .hw-action-primary {
        background: var(--mobile-action-bg);
        border-color: var(--mobile-action-border);
        font-weight: 600;
    }
    .heldenwechsel td.hw-actions .hw-status-pill {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        border-radius: 999px;
        background: var(--mobile-surface-2-hover);
        font-size: 0.85em;
        font-weight: 600;
        text-align: center;
    }
    .heldenwechsel td.hw-actions .hw-status-pill.hw-status-aktiv {
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
    }

    /* Status-Badges am Avatar */
    .hw-badge {
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px;
        border: 2px solid var(--mobile-surface-2);
        box-shadow: 0 1px 2px rgba(0,0,0,0.4);
        pointer-events: none;
    }
    .hw-badge-pn    {
        top: -4px;
        right: -4px;
        background-color: #c62828;
        background-image: url('../bilder/scroll.png');
    }
    .hw-badge-rogue {
        bottom: -4px;
        right: -4px;
        background-color: #fef1b9;
        background-image: url('../bilder/icons/skull.svg');
    }

    /* Sticky-Submit "Gruppe erstellen" unten am Viewport */
    div.einstellungen table.heldenwechsel > tbody > tr.hw-submit-row {
        display: block;
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: var(--mobile-body-bg);
        padding: var(--space-sm) 0 calc(var(--space-sm) + var(--safe-bottom));
        border-top: 1px solid var(--mobile-border-very-soft);
        margin-top: var(--space-sm);
        border-bottom: none;
    }
    div.einstellungen table.heldenwechsel > tbody > tr.hw-submit-row td {
        display: block;
        padding: 0;
        text-align: center !important;
    }
    .heldenwechsel tr.hw-submit-row input[type="submit"] {
        width: 100%;
        min-height: var(--touch-target-comfort);
    }

    /* --- "Weiteren Helden erstellen" als CTA-Card ---------------- */
    .hw-cta-card {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin: var(--space-sm) 0;
        padding: var(--space-md);
        border: 2px dashed var(--mobile-border);
        border-radius: 6px;
        background: transparent;
        color: var(--mobile-text);
        text-decoration: none;
        min-height: var(--touch-target-comfort);
    }
    .hw-cta-icon {
        font-size: 1.5em;
        line-height: 1;
        font-weight: 700;
        width: 32px;
        text-align: center;
        flex: 0 0 auto;
    }
    .hw-cta-label { flex: 1; word-break: break-word; }
    .hw-cta-card.hw-cta-disabled {
        border-style: solid;
        opacity: 0.75;
        flex-wrap: wrap;
    }

    /* --- Heldenwahl: Lösch-Bestätigungs-Dialog ------------------- */
    div.einstellungen table.heldenloeschen,
    div.einstellungen table.heldenloeschen > tbody,
    div.einstellungen table.heldenloeschen > tbody > tr,
    div.einstellungen table.heldenloeschen > tbody > tr > th,
    div.einstellungen table.heldenloeschen > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }
    div.einstellungen table.heldenloeschen tr:last-child {
        display: flex;
        gap: var(--space-sm);
        position: sticky;
        bottom: 0;
        padding: var(--space-sm) 0 calc(var(--space-sm) + var(--safe-bottom));
        background: var(--mobile-body-bg);
        border-top: 1px solid var(--mobile-border-very-soft);
    }
    div.einstellungen table.heldenloeschen tr:last-child th { display: none; }
    div.einstellungen table.heldenloeschen tr:last-child td {
        flex: 1;
        padding: 0;
    }
    div.einstellungen table.heldenloeschen tr:last-child td a {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        text-align: center;
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        text-decoration: none;
        color: var(--mobile-text);
    }
    div.einstellungen table.heldenloeschen tr:last-child td:first-child a {
        background: var(--mobile-action-bg);
        border-color: var(--mobile-action-border);
        font-weight: 600;
    }

    /* --- ZB-Beute (kategorie=helden) ----------------------------- */
    .zb-geld-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xs);
        margin: var(--space-xs) 0;
    }
    .zb-geld-row input[type="text"] {
        width: 3em;
        min-width: 3em;
        flex: 0 0 auto;
        text-align: center;
    }
    .zb-geld-row img {
        height: 1.5em;
        width: auto;
    }
    div.einstellungen table.zb_beute_table,
    div.einstellungen table.zb_beute_table > tbody,
    div.einstellungen table.zb_beute_table > tbody > tr,
    div.einstellungen table.zb_beute_table > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    div.einstellungen table.zb_beute_table td.chkbox {
        display: inline-block;
        width: auto;
        min-width: 30px;
        padding-right: var(--space-sm);
        vertical-align: middle;
    }
    details.zb-beispiele-collapsible summary {
        min-height: var(--touch-target-min);
        padding: var(--space-xs) 0;
        cursor: pointer;
        font-weight: 600;
    }
    table.zb_wpg_beispiele { font-size: 0.85em; width: 100%; }
    div.einstellungen .zb-presets {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        padding: var(--space-xs) 0;
    }
    div.einstellungen .zb-presets > span {
        flex: 1 0 100%;
        margin: 0 0 var(--space-xs);
    }
    div.einstellungen .zb-presets button {
        flex: 1 1 calc(50% - var(--space-xs));
        margin: 0;
        min-height: var(--touch-target-comfort);
    }

    /* --- Sticky-Speichern-Button für alle Settings-Forms --------- */
    div.einstellungen form > p.einstellungen-submit {
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: var(--mobile-body-bg);
        padding: var(--space-sm) 0 calc(var(--space-sm) + var(--safe-bottom));
        margin: var(--space-md) calc(-1 * var(--space-sm)) 0;
        border-top: 1px solid var(--mobile-border-very-soft);
        text-align: center;
    }
    div.einstellungen form > p.einstellungen-submit input[type="submit"].button,
    div.einstellungen form > p.einstellungen-submit button.button {
        width: calc(100% - 2 * var(--space-sm));
        min-height: var(--touch-target-comfort);
        margin: 0 var(--space-sm);
    }

    /* --- Wappen-Galerie (Mediabox, kategorie=held) --------------- */
    body #bilder-box {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: var(--space-xs);
        padding: var(--space-sm);
        width: 100% !important;
        height: auto !important;
        max-height: 60vh;
        overflow-y: auto;
        box-sizing: border-box;
    }
    body div.wappen-box {
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body div.wappen-box img {
        max-width: 100%;
        max-height: 100%;
        height: auto !important;
    }

    /* ============================================================
     * Bank (bank.php) — Mobile-Layout
     * Die äußere Layout-Tabelle table.bank zieht ihre natürliche
     * Breite aus dem Bank-Beschreibungs-Bild (30 % float), der
     * 6-spaltigen Kreditbrief-Tabelle und der 300-px-Karte.
     * Auflösung: alle Tabellen-Container als display:block, Float
     * aufheben, Sektionen als Token-basierte Cards.
     * body-Prefix schlägt die nach-geladenen Design-CSS-Dateien
     * (antamar/classic/bombast/simple/antamarv41.css).
     * ============================================================ */

    /* Outer table.bank aufbrechen.
       .game th/td (antamar/antamarv41.css) erzwingt eine 1-px-Border
       auf jedem Cell — im Stack-Layout bricht die durch jede Card. */
    body table.bank,
    body table.bank > tbody,
    body table.bank > tbody > tr,
    body table.bank > tbody > tr > th,
    body table.bank > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: 0;
        border: none;
        background: transparent;
    }

    /* Bank-Beschreibung: Float weg, Bild responsive */
    body table.bank td.bank_beschreibung div.bank_bild {
        width: auto;
        max-width: 100%;
        float: none;
        margin: 0 0 var(--space-sm);
    }
    body table.bank td.bank_beschreibung div.bank_bild img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    body table.bank td.bank_beschreibung div.beschreibung_txt {
        line-height: 1.5;
        word-break: break-word;
    }

    /* Münz-Eingabe: 3 Spalten, Icon oben, Input unten */
    body .bank-currency-input {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    body .bank-currency-input .coin-input {
        /* Markup-Reihenfolge ist <input/><img/> (Desktop-Standard).
           column-reverse stellt das Icon nach oben über dem Input. */
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-xs);
        background: var(--mobile-body-bg);
        border: 1px solid var(--mobile-border-very-soft);
        border-radius: 6px;
        min-width: 0;
    }
    body .bank-currency-input .coin-input img {
        height: 1.6em;
        width: auto;
        margin: 0;
    }
    body .bank-currency-input .coin-input input.input_zahl {
        width: 100%;
        min-width: 0;
        min-height: var(--touch-target-min);
        padding: var(--space-xs);
        text-align: center;
        font-size: 1.1em;
        font-family: inherit;
        box-sizing: border-box;
    }

    /* Aktions-Buttons: full-width, Tap-Targets */
    body .bank-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
    }
    body .bank-actions input.button,
    body .bank-actions input[type="submit"],
    body .bank-actions input[type="button"] {
        flex: 1 1 calc(50% - var(--space-sm) / 2);
        min-height: var(--touch-target-comfort);
        padding: var(--space-xs) var(--space-md);
        font-size: 1em;
        font-family: inherit;
        box-sizing: border-box;
        cursor: pointer;
    }
    body .bank-actions input[name="kreditbrief_notizen"],
    body .bank-actions input[name="konto_anlegen"] {
        flex: 1 1 100%;
    }

    /* Konto-auflösen-Link: dezent unten, mit Separator */
    body .bank-account-close {
        text-align: center;
        margin-top: var(--space-md);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--mobile-border-very-soft);
    }
    body .bank-account-close a {
        display: inline-block;
        min-height: var(--touch-target-min);
        line-height: var(--touch-target-min);
        padding: 0 var(--space-md);
        color: var(--mobile-text-muted);
        text-decoration: underline;
        font-size: 0.9em;
    }

    /* Reichweite-Radios: vertikal als Chip-Tap-Targets */
    body .bank-creditletter-scope {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin: var(--space-sm) 0;
    }
    body .bank-creditletter-scope label {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin: 0;
        padding: var(--space-xs) var(--space-sm);
        min-height: var(--touch-target-min);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        cursor: pointer;
    }
    body .bank-creditletter-scope input[type="radio"] {
        margin: 0 var(--space-xs) 0 0;
        min-width: 1.2em;
        min-height: 1.2em;
    }

    /* Kreditbrief einlösen: vertikales Stack */
    body .bank-redeem-input {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        align-items: stretch;
    }
    body .bank-redeem-input label {
        font-weight: 600;
        white-space: normal;
    }
    body .bank-redeem-input input.input_longer {
        width: 100%;
        max-width: 100%;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm);
        font-family: monospace;
        font-size: 1em;
        box-sizing: border-box;
    }
    body .bank-redeem-input input.button,
    body .bank-redeem-input input[type="submit"] {
        min-height: var(--touch-target-comfort);
        font-size: 1em;
        font-family: inherit;
        cursor: pointer;
    }

    /* Kreditbrief-Tabelle als Cards.
       border:none neutralisiert sowohl .game td (Design-CSS) als auch
       das .bank-transfers td border-bottom — die Card setzt eigene
       Trennlinien per ::before-Labels. */
    body table.bank-transfers,
    body table.bank-transfers > thead,
    body table.bank-transfers > tbody,
    body table.bank-transfers > tbody > tr,
    body table.bank-transfers > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background: transparent;
    }
    body table.bank-transfers > thead {
        display: none;
    }
    body table.bank-transfers > tbody > tr {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        background: var(--mobile-body-bg);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
    }
    body table.bank-transfers > tbody > tr > td {
        padding: var(--space-xs) 0;
        border-bottom: none;
    }
    body table.bank-transfers td.transfer-phrase {
        font-family: monospace;
        font-size: 0.9em;
        word-break: break-all;
        line-height: 1.4;
        white-space: normal;
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--mobile-border-very-soft);
        margin-bottom: var(--space-xs);
    }
    body table.bank-transfers td.transfer-phrase .phrase-text {
        white-space: normal;
    }
    body table.bank-transfers td.transfer-amount,
    body table.bank-transfers td.transfer-scope,
    body table.bank-transfers td.transfer-status {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }
    /* Mobile-Text-Labels neben den Icons (Hover-Tooltips greifen nicht auf Touch) */
    body .bank-mobile-label {
        display: inline;
        margin-left: var(--space-xs);
        color: var(--mobile-text);
        font-size: 0.95em;
    }
    body table.bank-transfers td.transfer-amount::before {
        content: "Betrag:";
        color: var(--mobile-text-muted);
        min-width: 5em;
    }
    body table.bank-transfers td.transfer-scope::before {
        content: "Reichweite:";
        color: var(--mobile-text-muted);
        min-width: 5em;
    }
    body table.bank-transfers td.transfer-status::before {
        content: "Status:";
        color: var(--mobile-text-muted);
        min-width: 5em;
    }
    body table.bank-transfers td.transfer-note {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }
    body table.bank-transfers td.transfer-note::before {
        content: "Notiz:";
        color: var(--mobile-text-muted);
        min-width: 5em;
        flex: 0 0 auto;
    }
    body table.bank-transfers td.transfer-note input {
        flex: 1;
        width: 100%;
        max-width: 100%;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm);
        box-sizing: border-box;
    }
    body table.bank-transfers td.transfer-actions {
        padding-top: var(--space-xs);
        text-align: left;
    }
    /* Delete-Link als Button-style Tap-Target */
    body table.bank-transfers td.transfer-actions a.kreditbrief-delete-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-height: var(--touch-target-min);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-decoration: none;
    }

    /* Help-Text unter h4 ersetzt den Hover-Tooltip */
    body .bank-help-text {
        display: block;
        margin: 0 0 var(--space-sm);
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-chip-bg);
        border-left: 3px solid var(--mobile-border);
        border-radius: 4px;
        font-size: 0.85em;
        color: var(--mobile-text-soft);
        line-height: 1.4;
    }
    /* Help-Icon im h4 weg, wenn der Text direkt darunter steht */
    body .ui-subsection h4 span.tip {
        display: none;
    }

    /* Filialen-Karte + Liste: vertikal stacken, Bild responsive */
    body .bank-branches-section {
        display: block;
        margin: 0;
    }
    body .bank-branches-map {
        position: relative;
        width: 100%;
        max-width: 300px;
        margin: 0 auto var(--space-md);
    }
    body .bank-branches-map img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        border: 1px solid var(--mobile-border-soft);
        border-radius: 3px;
    }
    body .bank-branches-list {
        min-width: 0;
    }
    body .bank-branches-list p {
        word-break: break-word;
        line-height: 1.5;
    }

    /* Footer-Link "Zurück zum Ortszentrum" als Chip-Button */
    body table.bank > tbody > tr > th:last-child a[href="spiel.php"] {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        margin-top: var(--space-md);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }

    /* ============================================================
     * Rathaus → Arbeitsmöglichkeiten (Rathaus.php?aktion=jobcenter)
     * Skin-CSS fixiert .job auf width:700px. Mobil wird die Tabelle
     * zu einer Card-Liste umgebaut (Markup-Klassen aus joblist.inc.php):
     * - tr.job-thead/job-row-spacer ausgeblendet
     * - tr.job-row-head + tr.job-row-body bilden eine Card
     * - Lohn/Dauer als Meta-Zeile mit ::before-Labels
     * - Anforderungen mit Section-Header
     * - Annehmen-Link als Tap-Button
     * body-Prefix gewinnt gegen die später ladenden Skin-Designs.
     * ============================================================ */
    body table.job,
    body table.job > tbody,
    body table.job > tbody > tr,
    body table.job > tbody > tr > td,
    body table.job > tbody > tr > th {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background: transparent;
        padding: 0;
    }

    body table.job > tbody > tr.job-thead,
    body table.job > tbody > tr.job-row-spacer {
        display: none;
    }

    body table.job > tbody > tr.job-row {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        padding: var(--space-md);
    }
    body table.job > tbody > tr.job-row-head {
        border-radius: 6px 6px 0 0;
        border-bottom: none;
        padding-bottom: var(--space-sm);
    }
    body table.job > tbody > tr.job-row-body {
        border-radius: 0 0 6px 6px;
        border-top: none;
        margin-bottom: var(--space-md);
    }

    body table.job td.job-name h5 {
        margin: 0 0 var(--space-sm);
        font-size: 1.15em;
        color: var(--mobile-accent);
        font-weight: 600;
    }

    body table.job td.job-lohn,
    body table.job td.job-dauer {
        display: inline-block;
        width: calc(50% - var(--space-xs));
        padding: var(--space-xs) 0;
        font-size: 0.95em;
        vertical-align: top;
    }
    body table.job td.job-lohn::before {
        content: "💰 Lohn: ";
        color: var(--mobile-text-muted);
        font-size: 0.85em;
    }
    body table.job td.job-dauer::before {
        content: "⏱ Dauer: ";
        color: var(--mobile-text-muted);
        font-size: 0.85em;
    }

    body table.job td.job-beschreibung {
        margin-bottom: var(--space-sm);
        line-height: 1.45;
        word-break: break-word;
    }
    body table.job td.job-anforderungen {
        margin-bottom: var(--space-sm);
        line-height: 1.45;
    }
    body table.job td.job-anforderungen::before {
        content: "Anforderungen";
        display: block;
        font-size: 0.75em;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--mobile-text-muted);
        margin-bottom: var(--space-xs);
    }

    body table.job td.job-aktion {
        margin-top: var(--space-md);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--mobile-border-very-soft);
    }
    body table.job td.job-aktion a.job-accept-btn {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    body table.job td.job-aktion span.job-status {
        display: block;
        text-align: center;
        padding: var(--space-sm);
        color: var(--mobile-text-muted);
        font-style: italic;
    }

    body .job-filter {
        text-align: center;
        margin: var(--space-sm) 0 var(--space-md);
    }
    body .job-filter a {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 999px;
        color: var(--mobile-text);
        text-decoration: none;
    }

    /* ============================================================
     * Rathaus → Anzeiger (Rathaus.php?aktion=anzeiger&anzeiger=lesen)
     * Pergament-Deko aus, Container auf 100 %, Karten-Liste mit
     * Chip-Filter über Rubriken statt Mootools-Accordion.
     * body-Prefix gewinnt gegen Skin-CSS (alle 5 Skins haben
     * width:500px / min-width:500px in antamarv41.css hartcodiert).
     * ============================================================ */
    body .regiezna_top,
    body .regiezna_bottom { display: none; }

    body .regiezna,
    body .regiezna_middle,
    body .regiezna_inhalt {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        background: var(--mobile-surface);
        background-image: none;
        padding: var(--space-sm);
        box-sizing: border-box;
        color: var(--mobile-text);
    }
    /* Bombast (und teils andere Skins) setzen .regiezna p { color:#0f0f0f }
       für den hellen Pergament-Look — auf Mobile-Surface unsichtbar. */
    body .regiezna p,
    body .regiezna strong,
    body .regiezna em,
    body .regiezna span {
        color: inherit;
    }
    body .regiezna_middle h3 {
        width: 100%;
        font-size: 1.3em;
        color: var(--mobile-text);
    }
    body .regiezna_middle h3:first-letter {
        color: var(--mobile-accent);
    }

    /* Accordion-Markup im DOM behalten (Desktop nutzt es weiter),
       auf Mobile aber neutralisieren — MooTools setzt inline
       height/overflow per Effect.Slide, daher !important nötig. */
    body .regiezna .regiezna_rubrik.accordion_toggle,
    body .regiezna .regiezna_rubrik_beschreibung { display: none; }
    body .regiezna .regiezna_rubrik_inhalt {
        max-height: none;
        overflow: visible;
        padding-bottom: 0;
    }
    body .regiezna .accordion_content {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
    }
    body .regiezna hr { display: none; }

    /* .egiezna nutzt .mobile-card-Generika — Grid auf 1-Spalte,
       da Anzeigen kein Bild haben. Skin-CSS hardcoded width:93.25%
       und border:1px double darkgray — body-Prefix gewinnt. */
    body .egiezna.mobile-card {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        width: 100%;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
        box-sizing: border-box;
        text-align: left;
    }

    body .egiezna .egiezna_kopf {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-sm);
        font-size: 0.85em;
        color: var(--mobile-text-muted);
        border-bottom: 1px solid var(--mobile-border-very-soft);
        padding-bottom: var(--space-xs);
        margin-bottom: var(--space-xs);
    }
    body .egiezna .egiezna_meta {
        flex: 1;
        min-width: 0;
        word-break: break-word;
    }
    body .egiezna .egiezna_spam_btn {
        flex: 0 0 auto;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        background: transparent;
        color: var(--mobile-text-muted);
        font-family: inherit;
        font-size: 1.1em;
        line-height: 1;
        cursor: pointer;
    }
    body .egiezna .egiezna_spam_btn:hover,
    body .egiezna .egiezna_spam_btn:focus {
        background: var(--mobile-surface-2-hover);
        color: var(--mobile-text);
        outline: none;
    }
    body .egiezna .egiezna_inhalt {
        padding: 0;
        line-height: 1.45;
    }
}

@keyframes rueckmeldungFadeOut {
    to {
        opacity: 0;
        transform: translateY(-100%);
        visibility: hidden;
    }
}

/* ============================================================
 * Einstellungen — Desktop-Defaults für neue Heldenwahl-Hooks
 * Außerhalb des Mobile-Media-Queries. Stellt sicher, dass die
 * Status-Badges nur auf Mobile sichtbar sind (Desktop nutzt
 * die alten Inline-Icons) und die CTA-Card einen dezenten
 * Desktop-Look bekommt.
 * ============================================================ */
@media (min-width: 771px) {
    /* Status-Badges nur auf Mobile sichtbar — Desktop zeigt
       weiterhin die Inline-Icons im Namens-Text. */
    .hw-badge { display: none; }

    .hw-cta-card {
        display: block;
        text-align: center;
        padding: 8px 12px;
        margin: 15px auto 0;
        max-width: 400px;
        border: 1px dashed currentColor;
        border-radius: 6px;
        text-decoration: none;
        color: inherit;
        opacity: 0.85;
    }
    .hw-cta-card:hover { opacity: 1; }
    .hw-cta-card .hw-cta-icon { display: none; }
    .hw-cta-card .hw-cta-label { display: inline; }
    .hw-cta-card.hw-cta-disabled { opacity: 0.65; }
}

/* ============================================================
 * Bank — Cross-Design-Defaults (Desktop)
 * Layout-Hooks, die bisher nur per Inline-Style auf den Markup-
 * Containern lebten. classic/bombast/simple/pergament hatten
 * keine eigene .bank-branches-*-Regel — ohne diese Defaults
 * würde der Float/Flex-Layout-Look nach dem Inline-Style-Cleanup
 * fehlen. Niedrige Spezifität, sodass antamar/antamarv41.css
 * (lädt nach dieser Datei) seine designspezifischen Werte
 * weiter überschreiben kann.
 * Greift nur auf Desktop, weil der Mobile-Block oben das
 * Layout vertikal stackt (höhere Spezifität via body-Prefix).
 * ============================================================ */
.bank-branches-section {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.bank-branches-map {
    position: relative;
    flex-shrink: 0;
}
.bank-branches-map img {
    display: block;
    width: 300px;
    height: auto;
    border: 1px solid rgba(64, 44, 19, 0.4);
    border-radius: 3px;
}
.bank-branches-list {
    flex: 1;
    min-width: 200px;
}

/* Mobile-only-Beifügsel — auf Desktop versteckt, im Mobile-Block oben sichtbar */
.bank-mobile-label,
.bank-help-text {
    display: none;
}

/* Heldenwahl: dezentes "für Gruppe"-Label am Gruppen-Checkbox (Desktop + Mobil) */
.hw-checkbox-label { cursor: pointer; vertical-align: middle; }
.hw-checkbox-label-text {
    font-size: 0.72em;
    color: var(--mobile-text-muted);
    line-height: 1.1;
    margin-left: 0.25em;
    white-space: nowrap;
}

/* ============================================================
 * Anzeiger — Desktop „Zeitungs"-Look
 * Pergament-Header/Footer-PNGs raus (500-px-hart), Box auf breite
 * Cream-Card mit doppelter Border + uppercase Headline, Cards
 * mit Notizzettel-Optik, Chip-Filter statt Akkordeon. BG/Border-
 * Farben kommen aus den 5 Skin-CSS-Dateien (currentColor + lokale
 * .regiezna/.egiezna-Color-Regeln).
 * ============================================================ */
@media (min-width: 771px) {
    body .regiezna_top,
    body .regiezna_bottom { display: none; }

    body .regiezna {
        width: 100%;
        max-width: clamp(640px, 80%, 960px);
        margin: 0 auto;
        padding: 1.5em 2em;
        border: 2px double currentColor;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        background-image: none;
    }
    body .regiezna_middle,
    body .regiezna_inhalt {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        background-image: none;
        padding: 0;
        box-sizing: border-box;
    }

    /* Zeitungs-Masthead: »Der Anzeiger« als Schmuck-Headline in Fraktur,
       über dem Ortsnamen (h3 → Untertitel). */
    body .regiezna_middle::before {
        content: "Der Anzeiger";
        display: block;
        font-family: 'UnifrakturMaguntia', 'PT Serif', Georgia, serif;
        font-size: 3em;
        line-height: 1;
        text-align: center;
        letter-spacing: 0.05em;
        padding: 0.15em 0 0.25em;
        margin-bottom: 0.4em;
        border-top: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
    }

    /* Ortsname als Untertitel — Mixed Case (Fraktur ist in
       Großbuchstaben schwer lesbar). */
    body .regiezna_middle h3 {
        width: 100%;
        font-size: 1.2em;
        font-family: 'UnifrakturMaguntia', 'PT Serif', Georgia, serif;
        letter-spacing: 0.04em;
        text-align: center;
        font-weight: 400;
        padding-bottom: 0.4em;
        margin: 0 0 1em;
        border-bottom: 3px double currentColor;
    }

    /* Akkordeon → Chip-Filter: Chip-Bar einblenden, Toggle/Beschreibung
       verstecken, accordion_content immer offen. */
    .anzeiger-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        margin-bottom: 0.75em;
    }
    .anzeiger-filter .mobile-tab {
        padding: 0.3em 0.9em;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 0.9em;
        line-height: 1.2;
        cursor: pointer;
        opacity: 0.7;
    }
    .anzeiger-filter .mobile-tab:hover,
    .anzeiger-filter .mobile-tab:focus-visible {
        opacity: 1;
        outline: none;
    }
    .anzeiger-filter .mobile-tab[aria-selected="true"],
    .anzeiger-filter .mobile-tab.active {
        opacity: 1;
        background: rgba(0, 0, 0, 0.15);
    }
    /* Rubrik-Toggles als Schmuck-Banner zwischen Anzeigen-Gruppen.
       Klick-Funktion (VanillaAccordion) bleibt dran, ist aber harmlos:
       accordion_content ist per !important immer offen. */
    body .regiezna .regiezna_rubrik.accordion_toggle {
        display: block;
        text-align: center;
        font-family: 'UnifrakturMaguntia', 'PT Serif', Georgia, serif;
        font-size: 1.4em;
        line-height: 1.2;
        font-weight: 400;
        letter-spacing: 0.02em;
        margin: 1.2em 0 0.5em;
        padding: 0.25em 0.3em;
        border-top: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        cursor: default;
        /* Mixed Case statt UPPERCASE — Fraktur in Großbuchstaben ist
           schwer lesbar. Skin-CSS setzt overflow:hidden auf
           .regiezna_rubrik — Override gegen Abschneiden bei langen
           Rubrik-Namen mit «»-Schmuck. */
        white-space: nowrap;
        overflow: visible;
    }
    body .regiezna .regiezna_rubrik.accordion_toggle::before {
        content: "« ";
        opacity: 0.5;
        margin-right: 0.1em;
    }
    body .regiezna .regiezna_rubrik.accordion_toggle::after {
        content: " »";
        opacity: 0.5;
        margin-left: 0.1em;
    }
    /* Erste Rubrik: nahtloser Anschluss an h3-Untertitel-Border */
    body #accordion_container > strong.regiezna_rubrik.accordion_toggle:first-of-type {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
    }

    body .regiezna .regiezna_rubrik_beschreibung { display: none; }
    body .regiezna .accordion_content {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
    }
    body .regiezna_rubrik_inhalt {
        max-height: none;
        overflow: visible;
        padding: 0.5em 0;
    }
    body .regiezna hr { display: none; }

    /* Anzeige-Karten: Notizzettel-Look. BG/Border-Color aus Skin-CSS.
       box-sizing: border-box ist kritisch für column-count:2 — ohne das
       würde 100% + padding + border über die Spaltenbreite ragen und
       in die Nachbarspalte überlappen. */
    body .egiezna {
        width: 100%;
        max-width: 100%;
        margin: 0.75em 0;
        padding: 0.75em 1em;
        border: 1px solid currentColor;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        text-align: left;
        box-sizing: border-box;
    }
    body .egiezna_kopf {
        display: flex;
        align-items: center;
        gap: 0.5em;
        font-size: 0.8em;
        font-style: italic;
        padding: 0 0 0.4em 0;
        margin-bottom: 0.5em;
        border-bottom: 1px solid currentColor;
        opacity: 0.85;
    }
    body .egiezna_meta { flex: 1; min-width: 0; word-break: break-word; }
    body .egiezna_inhalt { padding: 0; line-height: 1.5; }
}

/* 2-Spalten-Anzeigen-Layout ab ~880 px — klassische Kleinanzeigen-Optik.
   Cards und Rubrik-Banner bleiben atomar (break-inside:avoid). */
@media (min-width: 880px) {
    body .regiezna #accordion_container {
        column-count: 2;
        column-gap: 1.5em;
        column-rule: 1px dashed currentColor;
    }
    body .regiezna #accordion_container .egiezna,
    body .regiezna #accordion_container .regiezna_rubrik.accordion_toggle {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* SPAM-Button — kompakter Icon-Btn. Gilt auf allen Viewports; der
   Mobile-Block oben (body .egiezna .egiezna_spam_btn, Zeile 1519 ff.)
   überschreibt mit touch-target 44×44 dank höherer Spezifität. */
.egiezna_spam_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    color: inherit;
    opacity: 0.55;
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1;
    cursor: pointer;
}
.egiezna_spam_btn:hover,
.egiezna_spam_btn:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

/*
 * ============================================================
 * Kampf-Seite Mobile-Layout (ajax/kampfseite.inc.php)
 * ============================================================
 * Restrukturiert die Desktop-2-Spalten + Float-Puppe in:
 *   1. Sub-Nav (.kampf_links) — bleibt darüber
 *   2. Sticky-Summary (.kampf-mobile-summary) mit AT/PA, Ini, eBE
 *   3. Skalierte Anzieh-Puppe (transform: scale(--puppe-scale))
 *   4. Slot-Tabs (.kampf_tabs) sticky als Chip-Bar
 *   5. Gepäck-Items (table.nahwaffen/schilde/ruestung) als Card-Liste
 *   6. Detail-Stats (.kampf-details) als Akkordion am Ende
 *
 * Drag&Drop und FAB-Action-Overlays sind auf Mobile durch TouchEquip
 * (Tap-Pick/Tap-Place, scripts/touch-equip.js) und Tap-zum-Ablegen
 * an Puppen-Items (Init-Skript in kampfseite.inc.php) ersetzt.
 * ============================================================
 */
@media (max-width: 770px) {

    /* ---------- Flex-Items im .kampf_v2_layout auf 100% Container begrenzen ----------
       Ohne diese Regel bläht der intrinsische Min-Content (u.a. .koerper 400px,
       Pillen-Reihe der Summary) die Flex-Items über die Container-Breite
       hinaus — selbst mit flex:1 1 100% + min-width:0. max-width:100% zwingt
       jedes Direkt-Kind auf <=100% der Container-Breite. */
    body .kampf_v2 .kampf_v2_layout > * {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* ---------- Puppe-Wrapper mit Skalierung ----------
       Original .koerper ist 400x~580 px (Float-Summe). Wrapper reserviert
       die skalierte Höhe; .koerper wird per absolute-Positionierung
       aus dem Flow genommen, damit der intrinsisch 400px-breite
       .koerper-Block den 100%-breiten Wrapper (und seine Vorfahren wie
       .linke_seite_v2) NICHT auf 400px aufbläht.

       --puppe-scale ist diskret pro Viewport-Breakpoint gesetzt (statt
       clamp()), weil Browser CSS-Variablen mit clamp()-Inhalten in
       verschachtelten calc()-Multiplikationen oft nicht korrekt
       evaluieren. Werte richten sich an gängigen Mobile-Viewports aus. */
    body .kampf_v2 .koerper-wrapper {
        --puppe-scale: 0.93;
        position: relative;
        width: 100%;
        max-width: 100%;
        height: calc(580px * var(--puppe-scale));
        overflow: hidden;
        margin: 0 auto var(--space-md);
    }
    body .kampf_v2 .koerper-wrapper > .koerper {
        position: absolute;
        left: 50%;
        top: 0;
        width: 400px;
        transform: translateX(-50%) scale(var(--puppe-scale));
        transform-origin: top center;
        /* Alten zoom-Hack aus antamarGeneralv57.css 951-959 deaktivieren,
           damit nicht beides gleichzeitig wirkt. */
        zoom: 1 !important;
        margin: 0 !important;
    }
    @media (max-width: 420px) {
        body .kampf_v2 .koerper-wrapper { --puppe-scale: 0.85; }
    }
    @media (max-width: 380px) {
        body .kampf_v2 .koerper-wrapper { --puppe-scale: 0.78; }
    }
    @media (max-width: 340px) {
        body .kampf_v2 .koerper-wrapper { --puppe-scale: 0.7; }
    }

    /* ---------- Sticky-Summary (.kampf-mobile-summary) ----------
       Erbt .mobile-sticky-summary + .below-tabs für Sticky-Stats-Layout.
       eBE-Warnung via .stat-warn (statt Inline-Style). */
    body .kampf_v2 .kampf-mobile-summary { margin-top: var(--space-xs); }
    body .kampf_v2 .kampf-mobile-summary .stat.stat-warn {
        background: var(--mobile-warn-bg);
        border-color: var(--mobile-warn-border);
    }
    body .kampf_v2 .kampf-mobile-summary .stat.stat-warn .stat-value,
    body .kampf_v2 .kampf-mobile-summary .stat.stat-warn .stat-label {
        color: var(--mobile-warn-text);
    }

    /* ---------- Slot-Tabs (.reiter.kampf_tabs) als Chip-Bar ----------
       Sticky unter der Mobile-Topbar. Aktiv via .selektiert (Legacy)
       UND [aria-selected="true"] (neu, von gepaeck.js gesetzt). */
    body .kampf_v2 .kampf_tabs {
        display: flex;
        gap: var(--space-xs);
        flex-wrap: nowrap;
        overflow-x: auto;
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top));
        background: var(--mobile-body-bg);
        z-index: 4;
        margin: 0 0 var(--space-sm);
        padding: var(--space-xs) 0;
        -webkit-overflow-scrolling: touch;
    }
    body .kampf_v2 .kampf_tabs .tab {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: row;
        gap: var(--space-xs);
        min-height: var(--touch-target-min);
        padding: var(--space-xs);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        overflow: hidden;
    }
    body .kampf_v2 .kampf_tabs .tab:hover { transform: none; }
    body .kampf_v2 .kampf_tabs .tab img { height: 18px; width: auto; margin: 0; flex: 0 0 auto; }
    body .kampf_v2 .kampf_tabs .tab .tab-label {
        font-size: 0.8em;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    body .kampf_v2 .kampf_tabs .tab.selektiert,
    body .kampf_v2 .kampf_tabs .tab[aria-selected="true"] {
        background: var(--mobile-accent);
        border-color: var(--mobile-accent-strong);
        color: var(--mobile-accent-contrast);
        font-weight: 600;
    }
    body .kampf_v2 .kampf_tabs .tab.selektiert .tab-label,
    body .kampf_v2 .kampf_tabs .tab[aria-selected="true"] .tab-label {
        color: var(--mobile-accent-contrast);
    }

    /* ---------- Sub-Nav (.kampf_links) als Chip-Reihe ----------
       Heute Text mit "|"-Trennern, auf Mobile ohne Aufwand zu Chips
       formatieren. */
    body :is(.kampf_v2, .kampfmanoever) .kampf_links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        justify-content: center;
        margin-bottom: var(--space-sm);
    }
    body :is(.kampf_v2, .kampfmanoever) .kampf_links .kampf_link {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        text-decoration: none;
        color: var(--mobile-text);
    }
    body :is(.kampf_v2, .kampfmanoever) .kampf_links .kampf_link.kampf_link_aktiv {
        background: var(--mobile-accent);
        color: var(--mobile-accent-contrast);
        border-color: var(--mobile-accent-strong);
        font-weight: 600;
    }
    /* "|"-Trenner ausblenden (sie sind ::before-content auf .kampf_link) */
    body :is(.kampf_v2, .kampfmanoever) .kampf_links .kampf_link + .kampf_link::before { content: ""; }
}

/*
 * ============================================================
 * Kampf-Layout: Stapeln + Card-Liste bis 1300px Layout-Viewport
 * ============================================================
 * WARUM 1300px statt 770px: Das Desktop-Shell `table.main` (Menü |
 * #game | Chat, table-layout:auto) hat eine intrinsische Mindest-
 * breite ~1002px. Ein Landscape-Phone ist >770px breit → das mobile
 * Einspalten-Shell greift NICHT, table.main läuft auf ~1002px und
 * quetscht die #game-Spalte (.kampf_v2 ~420px). Das Desktop-Side-by-
 * Side (Puppe 400px fix) ragt dann in die Waren-Tabelle (gemeldeter
 * Overlap-Bug). Darum greift das Stapeln + Card-Layout hier schon ab
 * der Spaltenenge, nicht erst beim Viewport ≤770.
 *
 * Schwelle 1300px: gemessen passt die 400px-Puppe erst ab ~1274px
 * Viewport sauber in ihre 60%-Spalte (Tabellen-Overlap verschwindet
 * ~1245px). 1300px gibt Reserve für Skins mit breiterer Chat-Spalte.
 * Landscape-Phones rendern bei ~1002px und stapeln daher immer.
 *
 * Puppen-Skalierung (.koerper-wrapper absolute+scale), Sticky-Summary,
 * Sticky-Tabs und das Akkordion bleiben bewusst im ≤770-Block: Im Band
 * 771–1230 bleibt die Puppe im Fluss (Desktop-400px) und definiert so
 * ihre nun volle Spalte selbst — passt exakt, kein Clipping. Diese
 * Layout-Regeln sind identisch zum Hochformat; Portrait rendert
 * dadurch unverändert.
 * ============================================================
 */
@media (max-width: 1300px) {

    /* Spalten stapeln (analog zum ≤768-Stacking in antamarGeneralv63);
       schlägt das @media(min-width:720px)-Side-by-Side per body .kampf_v2-
       Spezifität. Puppe bleibt im Fluss → füllt ihre volle Spalte. */
    body .kampf_v2 .kampf_v2_layout { flex-direction: column; }
    body .kampf_v2 .kampf_v2_layout > * { max-width: 100%; min-width: 0; box-sizing: border-box; }
    /* Fixe 550px-Höhe des Gepäck-Containers lösen, sonst innerer Scroll
       neben den Cards (Desktop-Side-by-Side >1300 behält die 550px). */
    body .kampf_v2 .gepaeck_inhalt { height: auto; overflow: visible; }

    /* ---------- Gepäck-Tabellen als Card-Liste ----------
       table.nahwaffen / table.schilde / table.ruestung → Card pro Zeile.
       Spalte 1 (Bild) links, restliche Spalten als Pillen unter dem Namen. */
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen,
    body .kampf_v2 .gepaeck_inhalt table.schilde,
    body .kampf_v2 .gepaeck_inhalt table.ruestung {
        display: block;
        width: 100%;
        background: none;
        border-collapse: separate;
    }
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tbody,
    body .kampf_v2 .gepaeck_inhalt table.schilde tbody,
    body .kampf_v2 .gepaeck_inhalt table.ruestung tbody {
        display: block;
    }
    /* Header-Row mit <th>-Spalten ausblenden — Card-Layout führt eigene
       Inline-Labels (per ::before auf den Pillen). */
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr:first-child,
    body .kampf_v2 .gepaeck_inhalt table.schilde tr:first-child,
    body .kampf_v2 .gepaeck_inhalt table.ruestung tr:first-child {
        display: none;
    }
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr,
    body .kampf_v2 .gepaeck_inhalt table.schilde tr,
    body .kampf_v2 .gepaeck_inhalt table.ruestung tr {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: var(--space-sm);
        align-items: start;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
        min-height: var(--touch-target-min);
    }
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr > td,
    body .kampf_v2 .gepaeck_inhalt table.schilde tr > td,
    body .kampf_v2 .gepaeck_inhalt table.ruestung tr > td {
        display: block;
        padding: 0;
        border: none;
        background: none;
        text-align: left;
    }
    /* Spalte 1: Item-Bild — über alle Zeilen der Card */
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr > td:first-child,
    body .kampf_v2 .gepaeck_inhalt table.schilde tr > td:first-child,
    body .kampf_v2 .gepaeck_inhalt table.ruestung tr > td:first-child {
        grid-row: 1 / span 5;
        align-self: center;
    }
    body .kampf_v2 .gepaeck_inhalt table .dragable.ware-container {
        width: 60px; height: 60px; padding: 0; margin: 0;
    }
    body .kampf_v2 .gepaeck_inhalt table .dragable img {
        max-width: 60px; max-height: 60px;
    }
    /* Stat-Spalten als Pillen unter dem Namen */
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr > td:nth-child(n+3),
    body .kampf_v2 .gepaeck_inhalt table.schilde tr > td:nth-child(n+3),
    body .kampf_v2 .gepaeck_inhalt table.ruestung tr > td:nth-child(n+3) {
        display: inline-block;
        margin: var(--space-xs) var(--space-xs) 0 0;
        padding: 2px 8px;
        background: var(--mobile-border-very-soft);
        border-radius: 999px;
        font-size: 0.82em;
        line-height: 1.5;
    }
    /* Inline-Labels per ::before (Header-Row ist ausgeblendet) */
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr > td:nth-child(3)::before { content: "AT/PA: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr > td:nth-child(4)::before { content: "TP: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr > td:nth-child(5)::before { content: "Ini: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.nahwaffen tr > td:nth-child(6)::before { content: "Ersatz: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.schilde tr > td:nth-child(3)::before { content: "WM: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.schilde tr > td:nth-child(4)::before { content: "Ini: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.schilde tr > td:nth-child(5)::before { content: "Ersatz: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.ruestung tr > td:nth-child(3)::before { content: "RS: "; opacity: 0.7; }
    body .kampf_v2 .gepaeck_inhalt table.ruestung tr > td:nth-child(4)::before { content: "BE: "; opacity: 0.7; }

    /* ---------- Kleidung/Tiere/Alles — Bild-Grid mit Touch-freundlichem
       Wrapper. Keine Card mit Name (PHP rendert keine Namen).           */
    body .kampf_v2 .gepaeck_inhalt div.gepaeck_inhalt_box {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        min-height: 0;
        padding: var(--space-sm);
    }
    body .kampf_v2 .gepaeck_inhalt div.gepaeck_inhalt_box .dragable {
        float: none;
        width: 64px;
        height: 64px;
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 770px) {

    /* ---------- Akkordion-Container für Detail-Stats (.kampf-details) ----
       Sektionen: Kampfwerte, Rüstungsschutz, Kälteschutz, Rüstungskombis,
       Gegenstandsquesten, Tipps, Ersatzwaffen-Reset. order:99 sorgt
       dafür, dass der Block immer ganz unten landet, auch wenn der
       Container im Flex-Layout zwischen anderen liegt. */
    body .kampf_v2 .kampf-details {
        margin-top: var(--space-md);
        order: 99;
        width: 100%;
    }
    body .kampf_v2 .kampf-details .accordion_toggle {
        display: block;
        width: 100%;
        min-height: var(--touch-target-min);
        padding: var(--space-sm) var(--space-md);
        margin: var(--space-xs) 0 0;
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 4px;
        box-sizing: border-box;
        color: var(--mobile-text);
        font-size: 1.05em;
        line-height: 1.4;
        cursor: pointer;
    }
    body .kampf_v2 .kampf-details .accordion_content {
        margin-left: 0;
        padding: var(--space-sm) var(--space-xs) var(--space-md);
        box-sizing: border-box;
    }
    /* Volle Kampfwerte-Box in Akkordion: Pillen statt enges Float-Layout */
    body .kampf_v2 .kampf-details .at_pa_werte {
        margin: 0;
        text-align: left;
        border: none;
        padding: 0;
        font-weight: normal;
    }
    body .kampf_v2 .kampf-details .at_pa_werte > div {
        padding-bottom: var(--space-sm);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    body .kampf_v2 .kampf-details .at_pa_werte span.wert {
        display: inline-block;
        padding: 4px 10px;
        background: var(--mobile-border-very-soft);
        border-radius: 999px;
        white-space: nowrap;
    }

    /* Sticky-Containing-Blocks freigeben:
       - .transferContainer: Z. 3020 in antamarGeneralv57.css setzt sonst
         overflow-x: auto + Scroll-Shadows.
       - #gameInnerBox: global overflow:hidden — Sticky klebt sonst gegen
         dessen Inneres und scrollt mit dem Inhalt aus dem Viewport.
       :has() filtert auf Seiten mit der Kauftabelle, betrifft also nichts
       anderes. */
    body:has(#haendler-kauftabelle) #gameInnerBox {
        overflow: visible;
    }
    body .transferContainer:has(#haendler-kauftabelle) {
        overflow: visible !important;
        background: none !important;
        max-width: 100% !important;
    }

    /* ============================================================
     * Händler-Kauftabelle (MerchantSellTransfer) → Card-Liste
     *
     * <table.haendler-kauftabelle> bleibt im DOM (DataTables läuft
     * mit paging:false weiter, behält Input-Werte beim Sortieren),
     * wird per CSS aber zur Card-Liste linearisiert. Sortierung
     * über .haendler-sort .mobile-tab → DataTables.order()-API.
     * Submit unverändert über bestehende .input_zahl-Selektoren.
     * Alle Farben/Spacing über Tokens — skin-agnostisch.
     * ============================================================ */
    body table.haendler-kauftabelle,
    body table.haendler-kauftabelle > tbody {
        display: block;
        width: 100%;
        box-sizing: border-box;
        background: transparent;
        border: none;
    }
    /* DataTable-Wrapper-Override: kein Scroll-Schatten/max-content */
    body #haendler-kauftabelle_wrapper,
    body #haendler-kauftabelle_wrapper > table.dataTable {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        background: none !important;
    }
    /* Header weg — Sortierung läuft über Chip-Bar */
    body table.haendler-kauftabelle > thead { display: none; }
    body #haendler-kauftabelle_wrapper .dataTables_filter { display: none; }

    body table.haendler-kauftabelle > tbody > tr.mobile-card {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: var(--space-sm);
        row-gap: var(--space-xs);
        align-items: start;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
    }
    body table.haendler-kauftabelle td {
        display: block;
        border: none;
        padding: 0;
        width: auto;
    }
    body table.haendler-kauftabelle td.mobile-card-image {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body table.haendler-kauftabelle td.mobile-card-image img {
        max-width: 100%;
        max-height: 100%;
        margin: 0;
    }
    body table.haendler-kauftabelle td.mobile-card-body {
        grid-column: 2;
        font-weight: 600;
        color: var(--mobile-text);
        line-height: 1.3;
    }
    body table.haendler-kauftabelle td.mobile-card-body .ware_desc {
        font-weight: inherit;
    }
    body table.haendler-kauftabelle td[data-label="preis"],
    body table.haendler-kauftabelle td[data-label="gewicht"] {
        grid-column: 2;
        font-size: 0.9em;
        color: var(--mobile-text-soft);
    }
    body table.haendler-kauftabelle td[data-label="preis"]::before {
        content: "Preis: ";
        color: var(--mobile-text-muted);
    }
    body table.haendler-kauftabelle td[data-label="preis"] img {
        height: 1em;
        width: auto;
        vertical-align: baseline;
    }
    body table.haendler-kauftabelle td[data-label="gewicht"]::before {
        content: "Gewicht: ";
        color: var(--mobile-text-muted);
    }
    body table.haendler-kauftabelle td[data-label="auswahl"] {
        grid-column: 2;
        margin-top: var(--space-xs);
    }
    body table.haendler-kauftabelle td[data-label="auswahl"]::before {
        content: "Menge: ";
        color: var(--mobile-text-muted);
        font-size: 0.9em;
        margin-right: var(--space-xs);
    }
    body table.haendler-kauftabelle td.ware-ausverkauft {
        color: var(--mobile-text-muted);
        font-style: italic;
    }
    body table.haendler-kauftabelle input.input_zahl {
        min-height: var(--touch-target-min);
        min-width: 5em;
        text-align: center;
        background: var(--mobile-surface);
        color: var(--mobile-text);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        padding: var(--space-xs) var(--space-sm);
        box-sizing: border-box;
    }

    /* ------------------------------------------------------------------
     * Detail-Vergleichstabelle (Waffe/Rüstung) IN der Kauf-Card-Liste.
     * Per JS als <tr class="ruestung-detail-row"><td colspan><div .…-detail-panel>
     * nach der Item-Card injiziert (scripts/ausruestung.js). Der Deszendenz-
     * Selektor `body table.haendler-kauftabelle td {display:block}` (Z.2335)
     * trifft sonst auch die <td> der INNEREN Vergleichstabelle → alle Zahlen
     * stapeln untereinander. Wrapper-Zeile als Block-Card, innere Tabelle als
     * echte Tabelle wiederherstellen. Voll qualifiziert mit .…-detail-panel
     * (0,2,3) schlägt die Card-Regel (0,1,3).
     * ------------------------------------------------------------------ */
    body table.haendler-kauftabelle > tbody > tr.waffe-detail-row,
    body table.haendler-kauftabelle > tbody > tr.ruestung-detail-row {
        display: block;
        margin: calc(-1 * var(--space-sm)) 0 var(--space-sm);
        padding: var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-top: none;
        border-radius: 0 0 6px 6px;
    }
    /* Card davor optisch an das Panel anschließen */
    body table.haendler-kauftabelle > tbody > tr.mobile-card:has(+ tr.waffe-detail-row),
    body table.haendler-kauftabelle > tbody > tr.mobile-card:has(+ tr.ruestung-detail-row) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
    }
    body table.haendler-kauftabelle .waffe-detail-panel table,
    body table.haendler-kauftabelle .ruestung-detail-panel table {
        display: table;
        width: 100%;
        table-layout: fixed;        /* Spalten gleichmäßig, kein Overflow */
    }
    body table.haendler-kauftabelle .waffe-detail-panel tr,
    body table.haendler-kauftabelle .ruestung-detail-panel tr {
        display: table-row;
    }
    body table.haendler-kauftabelle .waffe-detail-panel th,
    body table.haendler-kauftabelle .waffe-detail-panel td,
    body table.haendler-kauftabelle .ruestung-detail-panel th,
    body table.haendler-kauftabelle .ruestung-detail-panel td {
        display: table-cell;
        width: auto;
        padding: 4px 3px;           /* enger als Desktop, damit alle Spalten passen */
        font-size: 0.85em;
        text-align: center;
        overflow-wrap: anywhere;    /* lange Item-Namen im Kopf umbrechen */
    }
    body table.haendler-kauftabelle .waffe-detail-panel th.label-col,
    body table.haendler-kauftabelle .waffe-detail-panel td.label-col,
    body table.haendler-kauftabelle .ruestung-detail-panel th.label-col,
    body table.haendler-kauftabelle .ruestung-detail-panel td.label-col {
        text-align: left;
    }
    body table.haendler-kauftabelle .ruestung-detail-panel td small {
        display: inline;            /* Diff "(+2)" hinter dem Wert, nicht umgebrochen */
    }

    /* Sticky-Bar: Suchfeld + Sort-Chips zusammen sticky-top.
       body-Prefix für höhere Spezifität als Desktop-Default-Hide in
       antamarGeneralv57.css. */
    body .haendler-sticky-bar {
        display: block;
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top));
        z-index: 5;
        background: var(--mobile-body-bg);
        padding: var(--space-xs) 0;
        margin-bottom: var(--space-sm);
    }
    body .haendler-sticky-bar .haendler-search {
        display: block;
        margin-bottom: var(--space-xs);
    }
    body .haendler-sticky-bar .haendler-search-input {
        width: 100%;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-surface);
        color: var(--mobile-text);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        font-size: 1em;
        font-family: inherit;
        box-sizing: border-box;
    }
    body .haendler-sticky-bar .haendler-search-input::placeholder {
        color: var(--mobile-text-muted);
    }
    /* Sort-Chips innerhalb der Sticky-Bar: kein eigenes sticky/margin
       mehr — der Wrapper übernimmt. .mobile-chip-bar-Generika (Z. 148+)
       behält display:flex + horizontalen Scroll bei. */
    body .haendler-sticky-bar .mobile-chip-bar.haendler-sort {
        display: flex;
        position: static;
        top: auto;
        margin-bottom: 0;
        background: none;
    }

    /* Aktion-Bar: Feilschen-Checkbox + Kaufen-Button + Live-Summary.
       .mobile-action-bar bringt Sticky-Bottom + safe-area-inset aus
       der Pattern-Generika (Z. 249+). Bottom-Offset = Höhe der
       div-mobile-menu (.div-mobile-menu, z-index 1000) — sonst
       überdeckt diese Action-Bar + Kaufen-Button. */
    body .haendler-aktionen.mobile-action-bar {
        flex-wrap: wrap;
        align-items: center;
        bottom: var(--mobile-bottombar-height);
    }
    body .haendler-aktionen .haendler-summary {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.9em;
        color: var(--mobile-text-soft);
        order: -1;
    }
    body .haendler-aktionen .haendler-summary:empty {
        display: none;
    }
    body .haendler-aktionen .haendler-summary img {
        height: 1em;
        width: auto;
        vertical-align: baseline;
    }
    body .haendler-aktionen .feilschen-option {
        flex: 1;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-height: var(--touch-target-min);
    }

    /* ============================================================
     * Verkaufsseite (MerchantBuyTransfer) → Sticky-Reiter + Action-Bar
     * Wrapper: div.transferContainer.haendlerTransfer
     * Item-Cards greifen schon über die generischen .transfer .tobj-
     * Regeln (antamarGeneralv57.css Z. 1879+). Hier nur die fehlenden
     * Sticky-Layer + Action-Bar.
     * ============================================================ */

    /* Sticky-Containing-Block freigeben — analog zur Kauf-Seite.
       overflow:clip statt visible, damit das umliegende Antamar-Layout
       (#gameContent > table mit fester Breite) nicht über den Viewport
       hinausragt — clip schneidet ab, OHNE einen neuen Scroll-Container
       zu schaffen (sticky bleibt funktional). */
    body:has(.haendlerTransfer) #gameInnerBox {
        overflow: clip;
    }
    body .transferContainer.haendlerTransfer {
        overflow: visible !important;
        background: none !important;
        max-width: 100% !important;
    }

    /* Reiter-<tr> löst sich aus dem Tabellen-Layout — sonst hat die
       th.reiter-th nur 64px Eltern-Höhe und sticky greift nicht. Mit
       display:contents wird die <th> direkt Kind des <tbody> (das ist
       display:block und ~420px hoch), so dass sticky Spielraum hat. */
    body .haendlerTransfer table.transfer tr:has(> th.reiter-th) {
        display: contents;
    }

    /* Reiter-<th> als zweite Sticky-Lage unter den Hero/Partner-Tabs.
       Top-Offset = topbar + safe-top + Hero/Partner-Tab-Höhe + Gap. */
    body .haendlerTransfer table.transfer th.reiter-th {
        display: block;
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top) + var(--touch-target-min) + var(--space-sm));
        z-index: 4;
        background: var(--mobile-body-bg);
        padding: var(--space-xs) 0;
        margin: 0 0 var(--space-sm) 0;
        border-bottom: 1px solid var(--mobile-border-very-soft);
        width: 100%;
    }

    /* Hero-seitiger "alles verkaufen"-Link versteckt — Action-Bar
       führt einen gespiegelten Mirror-Button. */
    body .haendlerTransfer div.sell_all {
        display: none;
    }

    /* Sticky-Bottom-Action-Bar mit Live-Preis + Feilschen + Buttons.
       Bottom-Offset = Höhe der .div-mobile-menu (z-index 1000) wie
       beim Kauf-Pattern. */
    body .verkauf-aktionen.mobile-action-bar {
        flex-wrap: wrap;
        align-items: center;
        bottom: var(--mobile-bottombar-height);
    }
    body .verkauf-aktionen .verkauf-summary {
        flex-basis: 100%;
        text-align: center;
        font-size: 1.05em;
        font-weight: 600;
        color: var(--mobile-text);
        order: -1;
    }
    body .verkauf-aktionen .verkauf-summary-label {
        font-weight: 400;
        color: var(--mobile-text-soft);
        margin-right: var(--space-xs);
    }
    body .verkauf-aktionen .verkauf-pricesum img {
        height: 1em;
        width: auto;
        vertical-align: baseline;
    }
    body .verkauf-aktionen .feilschen-option {
        flex: 1 1 100%;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-height: var(--touch-target-min);
        font-size: 0.95em;
    }
    body .verkauf-aktionen .sell_all.mobile-action-btn,
    body .verkauf-aktionen input[type="submit"].mobile-action-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none;
    }

    /* Simple-Skin-Fallback: Items ohne .warenbild (nur <a>-Link).
       Bestehende .tobj-Grid (64+1fr in antamarGeneralv57.css Z.1889)
       würde leere Spalte 1 erzeugen — auf 1fr reduzieren. */
    body .haendlerTransfer table.transfer .tobj:not(:has(.warenbild)),
    body .haendlerTransfer table.transfer .is_container:not(:has(.warenbild)),
    body .haendlerTransfer table.transfer .is_bound:not(:has(.warenbild)) {
        grid-template-columns: 1fr;
    }
    body .haendlerTransfer table.transfer .tobj > a {
        display: block;
        min-height: var(--touch-target-min);
        color: var(--mobile-text);
    }

    /* ============================================================
     * Marktplatz (markt.php)
     * Browse-/Kauf-Ansicht: pro Stand ein div.transferContainer >
     * table.transfer.markttransfer, umschlossen von der aeusseren
     * table.markt (andere Staende + Pagination). Item-Cards kommen schon
     * ueber den generischen .tobj-Grid (antamarGeneralv97.css
     * div:is(...,.transferContainer,...)). Hier die markt-spezifischen
     * Luecken, plus das Akkordeon (Kopf bleibt sichtbar, Warenliste klappt).
     * ============================================================ */

    /* Per-Stand-Scrollkasten weg: Desktop setzt table.markt
       div.transferContainer auf max-height:420px + overflow:scroll, mobil
       sonst Scroll-in-Scroll. Mit Akkordeon unnoetig. (0,1,3 schlaegt 0,1,2) */
    body table.markt div.transferContainer {
        max-height: none;
        overflow: visible;
    }
    body table.markt div.transferContainer .warenname { height: auto; }

    /* Stand-Kopf (Portrait + Heldenname) als tappbarer Card-Header.
       Muss den generischen "div:is(...) table.transfer th" (0,2,2) schlagen
       -> body div.transferContainer table.markttransfer th (0,2,3). */
    body div.transferContainer table.markttransfer th {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm);
        text-align: left;
        cursor: pointer;
        min-height: var(--touch-target-min);
        box-sizing: border-box;
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    body div.transferContainer table.markttransfer th img {
        max-height: 48px;
        width: auto;
        margin: 0;
        border-radius: 4px;
        flex: 0 0 auto;
    }
    body div.transferContainer table.markttransfer th > a {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Warenzahl + Chevron rechts (vom JS injiziert) */
    body .markt-stand-meta {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        flex: 0 0 auto;
    }
    body .markt-stand-count {
        font-size: 0.8em;
        font-weight: 400;
        color: var(--mobile-text-soft);
        white-space: nowrap;
    }
    body .markt-stand-chevron::before {
        content: "\25B8";                       /* Dreieck nach rechts */
        display: inline-block;
        color: var(--mobile-accent);
        font-size: 1.1em;
        transition: transform 0.15s ease;
    }
    body table.markttransfer.markt-stand-open .markt-stand-chevron::before {
        transform: rotate(90deg);               /* aufgeklappt: nach unten */
    }

    /* Motto als Untertitel (bleibt im eingeklappten Zustand sichtbar) */
    body div.transferContainer table.markttransfer td.motto {
        padding: var(--space-xs) var(--space-sm) var(--space-sm);
        text-align: left;
        font-style: italic;
        font-size: 0.9em;
        color: var(--mobile-text-soft);
    }

    /* Akkordeon: nur die Warenliste (letzte tr) einklappen; Kopf + Motto
       bleiben sichtbar. (0,4,5) schlaegt den generischen display:block (0,2,3);
       bei .markt-stand-open greift die Regel nicht -> Liste sichtbar. */
    body div.transferContainer table.markttransfer:not(.markt-stand-open) > tbody > tr:last-child {
        display: none;
    }

    /* Bearbeiten-Modus: warencontainer_eigener_stand ist nicht im generischen
       :is()-Block, behaelt sonst Desktop height:60px;clear:left;float und
       klippt die Item-Cards. (0,1,4 > 0,1,2) */
    body div.transferContainer table.transfer div.warencontainer_eigener_stand {
        clear: none;
        float: none;
        height: auto;
        width: 100%;
        padding: 0;
    }

    /* Aeussere table.markt (andere Staende + Pagination) linearisieren */
    body table.markt,
    body table.markt > tbody,
    body table.markt > tbody > tr,
    body table.markt > tbody > tr > th,
    body table.markt > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    body table.markt td.marktstandansicht {
        padding: 0 0 var(--space-md) 0;
        text-align: left;
    }
    /* Trenner: Spiralbild raus, dezente Linie */
    body table.markt tr.trenner,
    body table.markt td.trenner {
        background: none;
        padding: 0;
        height: 0;
        border: 0;
    }
    /* Erste th ("Andere/Eigener Marktstand") als zentrierter Section-Titel */
    body table.markt > tbody > tr:first-child > th {
        text-align: center;
        font-size: 1.05em;
        font-weight: 600;
        padding: var(--space-sm) 0;
        color: var(--mobile-text);
    }
    /* Letzte th (Pagination) zentriert */
    body table.markt > tbody > tr:last-child > th {
        text-align: center;
        padding: var(--space-md) 0;
    }

    /* Markt-Formular-Controls tap-tauglich (Pagination-Select + alle Submit-
       Buttons der markt.php-Forms; Groesse only, Farbe vom Skin-.button).
       a.ort-zurueck ist global bereits Full-Width-Chip. */
    body form[action="markt.php"] select[name="reihe"] {
        display: block;
        width: 100%;
        min-height: var(--touch-target-min);
        margin: 0 0 var(--space-sm) 0;
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-surface);
        color: var(--mobile-text);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        font: inherit;
        box-sizing: border-box;
    }
    body form[action="markt.php"] input[type="submit"].button {
        min-height: var(--touch-target-min);
        margin: var(--space-xs) var(--space-xs) var(--space-xs) 0;
        padding: var(--space-xs) var(--space-md);
        cursor: pointer;
    }

    /* Simple-Skin: Items ohne .warenbild -> leere 64px-Grid-Spalte vermeiden */
    body div.transferContainer table.markttransfer .tobj:not(:has(.warenbild)),
    body div.transferContainer table.transfer div.warencontainer_eigener_stand .tobj:not(:has(.warenbild)),
    body div.transferContainer table.transfer div.warencontainer_eigener_stand .is_container:not(:has(.warenbild)),
    body div.transferContainer table.transfer div.warencontainer_eigener_stand .is_bound:not(:has(.warenbild)) {
        grid-template-columns: 1fr;
    }

    /* ============================================================
     * Kampfschule (kampfschule.php → kampfschule.inc.php)
     * 4-spaltige Tabelle (Bild + Voraussetzungen + Übungsmöglichkeiten
     * + Gelehrte Sonderfertigkeiten) → vertikale Card-Liste mit
     * Sticky-Summary (Waffe/Talent/EP/Gold) oben und Sticky-Action-
     * Bar unten. Hover-Tooltips (.tip2) werden durch Inline-
     * .kampfschule-help-Beschreibung ersetzt.
     * Pattern-Vorbild: body table.job (Joblist-Block oben).
     * ============================================================ */

    /* Sticky-Containing-Block freigeben: #gameInnerBox hat global
       overflow:hidden — sonst klebt die Sticky-Summary gegen dessen Inneres
       und scrollt mit dem Inhalt aus dem Viewport. (Pattern wie
       body:has(#haendler-kauftabelle) #gameInnerBox.) */
    body:has(:is(.kampfschule, .lernschule)) #gameInnerBox {
        overflow: visible;
    }

    /* Bild raus aus dem float-Layout */
    body :is(.kampfschule, .lernschule) .kampfschule-img {
        float: none;
        margin: 0 auto var(--space-md);
        text-align: center;
    }
    body :is(.kampfschule, .lernschule) .kampfschule-img img {
        display: block;
        max-width: 100% !important;
        width: auto !important;
        height: auto;
        margin: 0 auto;
        float: none !important;
    }

    /* Tabelle als Block-Container */
    body :is(.kampfschule, .lernschule) table.kampfschule-list,
    body :is(.kampfschule, .lernschule) table.kampfschule-list > tbody,
    body :is(.kampfschule, .lernschule) table.kampfschule-list > tbody > tr,
    body :is(.kampfschule, .lernschule) table.kampfschule-list > tbody > tr > td,
    body :is(.kampfschule, .lernschule) table.kampfschule-list > tbody > tr > th {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background: transparent;
        padding: 0;
    }

    /* Tabellen-Header Schulart + Schulname (die ersten zwei TR mit colspan=4)
       als zentrierte Subtitel */
    body :is(.kampfschule, .lernschule) table.kampfschule-list > tbody > tr:first-child > th,
    body :is(.kampfschule, .lernschule) table.kampfschule-list > tbody > tr:nth-child(2) > th {
        font-size: 1.05em;
        font-weight: 600;
        text-align: center;
        color: var(--mobile-text);
        padding: var(--space-xs) 0;
    }

    /* Sticky-Summary: Waffe in eigener voller Zeile (Name kann beliebig
       lang werden), darunter Talent/EP/Gold als 3er-Reihe. Schrift und
       Padding kompakt gehalten, damit zwei Zeilen nicht zu hoch wirken. */
    body .kampfschule-mobile-summary {
        display: flex;
        flex-wrap: wrap;
    }
    body .kampfschule-mobile-summary .stat {
        padding: var(--space-xs);
    }
    body .kampfschule-mobile-summary .stat.stat-waffe {
        flex: 0 0 100%;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: var(--space-sm);
    }
    body .kampfschule-mobile-summary .stat.stat-waffe .stat-label,
    body .kampfschule-mobile-summary .stat.stat-waffe .stat-value {
        margin: 0;
        line-height: 1.3;
    }
    body .kampfschule-mobile-summary .stat.stat-waffe .stat-value {
        flex: 0 1 auto;
        min-width: 0;
    }
    body .kampfschule-mobile-summary .stat:not(.stat-waffe) {
        flex: 1 1 0;
    }
    body .kampfschule-mobile-summary .stat-label {
        font-size: 0.7em;
    }
    body .kampfschule-mobile-summary .stat-value {
        font-size: 0.9em;
    }

    /* Section-Header (Einschränkungen / Übungsmöglichkeiten / Sonderfertigkeiten /
       Trainingskampf) */
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-section th {
        font-size: 1.15em;
        font-weight: 600;
        color: var(--mobile-accent);
        text-align: left;
        padding: var(--space-md) 0 var(--space-xs);
        margin-bottom: var(--space-xs);
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }

    /* Voraussetzungs-Cards: Kultur / Volk / Waffentalent */
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-voraussetzung {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-sm);
        margin-bottom: var(--space-xs);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-voraussetzung th {
        font-size: 0.75em;
        font-weight: 600;
        color: var(--mobile-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: left;
        padding-bottom: var(--space-xs);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-voraussetzung td {
        color: var(--mobile-text);
    }

    /* Übungs-Cards */
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train[data-trainable="0"] {
        opacity: 0.75;
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train td:first-child {
        font-size: 1.05em;
        font-weight: 600;
        color: var(--mobile-text);
        margin-bottom: var(--space-xs);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train td.kampfschule-cell-kosten {
        padding: var(--space-xs) 0;
        font-size: 0.95em;
        color: var(--mobile-text-soft);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train td.kampfschule-cell-kosten::before {
        content: "Kosten: ";
        color: var(--mobile-text-muted);
        font-size: 0.85em;
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train td.kampfschule-cell-beschreibung {
        padding: var(--space-xs) 0;
        line-height: 1.45;
        color: var(--mobile-text);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train .kampfschule-stufe-hint {
        display: block;
        margin-top: var(--space-xs);
        font-size: 0.85em;
        color: var(--mobile-text-soft);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-train a.kampfschule-train-btn {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        margin-top: var(--space-sm);
        padding: 0 var(--space-md);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }

    /* Fernkampf-/Verbreitungs-Hinweise als Chip-Box */
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-hinweis td {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        background: var(--mobile-chip-bg);
        border-left: 3px solid var(--mobile-border);
        border-radius: 4px;
        font-size: 0.9em;
        color: var(--mobile-text-soft);
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-hinweis td u {
        text-decoration: none;
    }

    /* SF-Cards */
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-sf {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    body :is(.kampfschule, .lernschule) .kampfschule-cell-sf-name {
        font-size: 1.05em;
        font-weight: 600;
        color: var(--mobile-text);
    }
    /* Hover-Tooltip auf Mobile neutralisieren (.tip2 wird nur Text bleiben) */
    body :is(.kampfschule, .lernschule) .kampfschule-cell-sf-name span.tip2 {
        pointer-events: none;
    }
    /* Inline-Beschreibung statt Tooltip */
    body :is(.kampfschule, .lernschule) .kampfschule-help {
        display: block;
        margin: var(--space-xs) 0;
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-chip-bg);
        border-left: 3px solid var(--mobile-border);
        border-radius: 4px;
        font-size: 0.85em;
        font-weight: 400;
        line-height: 1.4;
        color: var(--mobile-text-soft);
    }
    body :is(.kampfschule, .lernschule) .kampfschule-cell-sf-kosten {
        padding: var(--space-xs) 0;
        font-size: 0.95em;
        color: var(--mobile-text-soft);
    }
    body :is(.kampfschule, .lernschule) .kampfschule-cell-sf-kosten::before {
        content: "Kosten: ";
        color: var(--mobile-text-muted);
        font-size: 0.85em;
    }
    body :is(.kampfschule, .lernschule) a.kampfschule-sf-btn {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        margin-top: var(--space-sm);
        padding: 0 var(--space-md);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    body :is(.kampfschule, .lernschule) .kampfschule-sf-status {
        display: block;
        margin-top: var(--space-sm);
        padding: var(--space-sm);
        text-align: center;
        font-style: italic;
        color: var(--mobile-text-muted);
    }
    body :is(.kampfschule, .lernschule) .kampfschule-cell-sf-anwendbar {
        padding: var(--space-xs) 0;
        font-size: 0.85em;
        color: var(--mobile-text-soft);
    }
    body :is(.kampfschule, .lernschule) .kampfschule-cell-sf-anwendbar:not(:empty)::before {
        content: "Anwendbar: ";
        color: var(--mobile-text-muted);
        font-size: 0.9em;
    }

    /* Trainingskampf-Intro */
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-trainingskampf-intro td {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        line-height: 1.45;
    }

    /* Footer-Row "zurück zum Ortszentrum" als großer Block-Button am Ende
       der Card-Liste (nicht sticky — Mobile-Bottombar bleibt sichtbar,
       Zurück-Navigation ist keine primäre Aktion). */
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-footer th {
        padding: var(--space-md) 0 0;
        border: none;
        background: transparent;
        text-align: left;
        font-size: 1em;
        color: inherit;
    }
    body :is(.kampfschule, .lernschule) table.kampfschule-list tr.kampfschule-row-footer th a {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }

    /* Trainingskampf-Back-Links: "zurück" + "nochmal besuchen" als Button-Paar
       (Flex, gleichmäßig verteilt). Pipe-Separator ist auf Mobile versteckt. */
    body :is(.kampfschule, .lernschule) .kampfschule-trainingskampf-back-links {
        display: flex;
        gap: var(--space-sm);
        margin-top: var(--space-md);
    }
    body :is(.kampfschule, .lernschule) .kampfschule-trainingskampf-back-links a {
        flex: 1;
        display: block;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    body :is(.kampfschule, .lernschule) .kampfschule-link-sep {
        display: none;
    }

    /* Kampfbericht in der Kampfschule: .kampfTabelle hat schon overflow-x:auto
       (antamarGeneralv57.css), aber Spalten sind sehr eng. Mobile-Tweaks:
       kompaktes Padding/Schrift, Min-Width reduziert, Header sticky bleibt
       erhalten, Trefferzone-Text und Namen kompakter. */
    body :is(.kampfschule, .lernschule) .kampfTabelle {
        margin: var(--space-sm) 0;
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        position: relative;
    }
    /* Scroll-Hinweis-Chip: zeigt dem User dass die Tabelle horizontal scrollt */
    body :is(.kampfschule, .lernschule) .kampfTabelle::before {
        content: "↔ wischen für mehr";
        display: block;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.7em;
        color: var(--mobile-text-muted);
        text-align: right;
        font-style: italic;
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    body :is(.kampfschule, .lernschule) .kampfTabelle table.kampf {
        min-width: 520px;
        font-size: 0.8em;
        line-height: 1.3;
    }
    body :is(.kampfschule, .lernschule) .kampfTabelle table.kampf th {
        padding: var(--space-xs) var(--space-xs);
        font-size: 0.95em;
        color: var(--mobile-accent);
        background: var(--mobile-body-bg);
        border-bottom: 1px solid var(--mobile-border-soft);
        white-space: nowrap;
    }
    body :is(.kampfschule, .lernschule) .kampfTabelle table.kampf td {
        padding: var(--space-xs);
        vertical-align: middle;
    }
    /* Kämpfer-Namen mit Icons sind oft "Icon + Name" — Icons kleiner halten */
    body :is(.kampfschule, .lernschule) .kampfTabelle table.kampf td img {
        height: 1.1em;
        width: auto;
        vertical-align: middle;
    }
    /* Erste Übersichts-Tabelle (Stat-Header) ist 12-spaltig — extra eng */
    body :is(.kampfschule, .lernschule) .kampfTabelle-uebersicht table.kampf {
        min-width: 720px;
    }
    body :is(.kampfschule, .lernschule) .kampfTabelle-uebersicht table.kampf th,
    body :is(.kampfschule, .lernschule) .kampfTabelle-uebersicht table.kampf td {
        text-align: center;
    }
    /* Held grün, Gegner rot — bestehende .held/.gegner Klassen kommen aus
       antamarGeneralv57.css. Auf Mobile leicht abgedunkelt für Kontrast. */
    body :is(.kampfschule, .lernschule) .kampfTabelle table.kampf td.held {
        color: #4dbb4d;
    }
    body :is(.kampfschule, .lernschule) .kampfTabelle table.kampf td.gegner {
        color: #d96a6a;
    }

    /*
     * ============================================================
     * Arena (arena.php + liste_arena_liga.inc.php)
     * Konvertiert die zwei Akkordeon-Tabellen (#arena Kämpferliste,
     * #berichte Kampfberichte) in Card-Listen und ersetzt die
     * Akkordeons durch Sticky-Tabs "Vorplatz | Kämpfer | Berichte".
     * Eigene Status-Pillen (LE/AU/ER/Wunden) ersetzen die
     * Pixel-Bar-PNGs. Action-Bar Sticky-Bottom für "Zurück zum
     * Ortszentrum".
     * Vorbild: Kampfschule (siehe oben Z. ~2540).
     * ============================================================
     */

    /* Arena-Wrapper: extra vertikale Atmung, lokale Tab-State-Quelle */
    body .arena {
        padding-bottom: var(--space-md);
    }

    /* Akkordeon-Toggles auf Mobile als reine Sektion-Headings rendern
       — Tabs übernehmen die Navigation, der Toggle-Click bleibt
       funktional, ist aber bei aktivem Tab-Mode kaum noch nötig. */
    body .arena > .accordion_toggle,
    body .arena .arena-section > .accordion_toggle {
        display: none;
    }

    /* Hero-Bild oben kompakter, Beschreibung darunter — die äußere
       Layout-<table> bricht zu Block-Stack um. */
    body .arena > table {
        display: block;
        width: 100%;
        margin: 0 0 var(--space-sm);
    }
    body .arena > table > tbody,
    body .arena > table > tbody > tr,
    body .arena > table > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 0;
    }
    body .arena .arena_img1,
    body .arena .arena_img2 {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto var(--space-sm);
        border-radius: 6px;
    }

    /* ---------- Sticky-Tabs (Vorplatz / Kämpfer / Berichte) ---------- */
    body .arena .arena-tabs {
        display: flex;
        gap: var(--space-xs);
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top));
        z-index: 5;
        background: var(--mobile-body-bg);
        padding: var(--space-xs) 0;
        margin: 0 0 var(--space-xs);
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    body .arena .arena-tab {
        flex: 1;
        min-width: 0;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-size: 0.9em;
        font-family: inherit;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body .arena .arena-tab[aria-selected="true"] {
        background: var(--mobile-accent);
        color: var(--mobile-accent-contrast);
        border-color: var(--mobile-accent-strong);
        font-weight: 600;
    }

    /* ---------- Sticky-Summary mit eigenen Vital-Bars ----------
       2-Spalten: links 3-Reihen-Stack der eigenen Heldinfo-Balken
       (LE/AU/ER), rechts kompakte Stufe + Schlüssel-Pille.            */
    body .arena .arena-mobile-summary {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: var(--space-sm);
        align-items: center;
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top) + var(--touch-target-min) + var(--space-sm));
        z-index: 4;
        background: var(--mobile-body-bg);
        padding: var(--space-xs) 0 var(--space-sm);
        margin: 0 0 var(--space-sm);
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    body .arena .arena-summary-vitals {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }
    body .arena .arena-summary-meta {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    body .arena .arena-summary-meta .stat {
        padding: 2px var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        text-align: center;
        min-width: 4em;
    }
    body .arena .arena-summary-meta .stat-label {
        font-size: 0.65em;
        color: var(--mobile-text-muted);
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    body .arena .arena-summary-meta .stat-value {
        font-size: 0.9em;
        color: var(--mobile-text);
        font-weight: 600;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- Sektion-Sichtbarkeit per Tab ---------- */
    body .arena .arena-section {
        display: block;
    }
    body .arena[data-active-tab="vorplatz"] .arena-section:not([data-tab="vorplatz"]),
    body .arena[data-active-tab="kaempfer"] .arena-section:not([data-tab="kaempfer"]),
    body .arena[data-active-tab="berichte"] .arena-section:not([data-tab="berichte"]) {
        display: none;
    }
    /* Akkordeon-Content innerhalb aktiver Sektion sichtbar erzwingen
       (Skin-CSS hat max-height:0 als Default für nicht-aktive Akkordeons). */
    body .arena .arena-section > .accordion_content {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        border: none !important;
        padding: 0;
        margin: 0;
    }

    /* Section-Headings (Sub-Titel innerhalb der Sektion, optional) */
    body .arena .arena-section-title {
        font-size: 1.05em;
        font-weight: 600;
        color: var(--mobile-accent);
        margin: var(--space-sm) 0 var(--space-xs);
        padding-bottom: var(--space-xs);
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }

    /* ---------- Kämpfer-Tabelle als Card-Liste ---------- */
    body .arena .auswahl {
        display: block;
        width: 100%;
        margin: 0;
    }
    body .arena table#arena,
    body .arena table#arena > thead,
    body .arena table#arena > tbody,
    body .arena table#arena > tbody > tr,
    body .arena table#arena > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background: transparent;
        padding: 0;
    }
    /* Original-Header der Tabelle auf Mobile ausblenden — die Card-Felder
       sind selbsterklärend mit data-label-Attribut beschriftet. */
    body .arena table#arena > thead {
        display: none;
    }

    body .arena table#arena > tbody > tr.arena-row-kaempfer {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        position: relative;
    }
    body .arena table#arena > tbody > tr.arena-row-kaempfer[data-fordern="0"] {
        opacity: 0.78;
    }

    /* Name-Zelle (groß) + Stufe rechts oben */
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td:first-child {
        font-size: 1.05em;
        font-weight: 600;
        color: var(--mobile-text);
        padding-right: 3em; /* Platz für Stufe-Chip */
    }
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td:first-child a {
        color: var(--mobile-text);
        text-decoration: none;
    }
    /* Stufe-Zelle absolut positioniert als Chip oben rechts */
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-stufe {
        position: absolute;
        top: var(--space-sm);
        right: var(--space-sm);
        width: auto;
        padding: 2px var(--space-xs);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 999px;
        font-size: 0.8em;
        font-weight: 600;
        color: var(--mobile-text-soft);
        text-align: center;
    }
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-stufe::before {
        content: "St. ";
        font-weight: 400;
        color: var(--mobile-text-muted);
    }

    /* Zustand-Zelle: alte Pixel-Schadens-Bars verstecken,
       echte Heldinfo-Balken (arena-vitals) zeigen. */
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-zustand > img {
        display: none;
    }
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-zustand {
        padding-top: var(--space-xs);
    }
    body .arena .arena-vitals {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    body .arena .arena-vital {
        display: grid;
        grid-template-columns: 1.6em 1fr auto;
        align-items: center;
        column-gap: var(--space-xs);
        font-size: 0.78em;
        line-height: 1.2;
    }
    body .arena .arena-vital-label {
        color: var(--mobile-text-muted);
        font-weight: 600;
        text-align: left;
    }
    body .arena .arena-vital-bar {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }
    /* fuellstand_balken rendert <span class="tip2"> mit zwei <img>;
       die müssen vertikal mittig und horizontal bündig sitzen. */
    body .arena .arena-vital-bar .tip2 {
        display: inline-flex;
        align-items: center;
        line-height: 0;
    }
    body .arena .arena-vital-value {
        color: var(--mobile-text-soft);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        min-width: 3em;
        text-align: right;
    }
    body .arena .arena-vital-wunden {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        margin-top: var(--space-xs);
        padding: 2px var(--space-xs);
        background: var(--mobile-warn-bg);
        border: 1px solid var(--mobile-warn-border);
        border-radius: 999px;
        font-size: 0.78em;
        color: var(--mobile-warn-text);
        line-height: 1.4;
        align-self: flex-start;
    }
    body .arena .arena-vital-wunden img {
        display: inline-block !important;
        height: 1em;
        width: auto;
    }

    /* Schlüssel-Zelle: alte ok.png/gesperrt.png verstecken, Chip anzeigen */
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-key img {
        display: none;
    }
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-key {
        padding-top: var(--space-xs);
    }
    body .arena .arena-key-chip {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px var(--space-xs);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 999px;
        font-size: 0.78em;
        color: var(--mobile-text-soft);
    }
    body .arena .arena-key-chip--ok {
        background: rgba(80, 130, 50, 0.18);
        border-color: #6b8a36;
        color: #8cce72;
    }
    body .arena .arena-key-chip--diff {
        color: var(--mobile-text-muted);
    }

    /* Fordern-Zelle: Bild-Icon verstecken, full-width Button anzeigen */
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-fordern img {
        display: none;
    }
    body .arena table#arena > tbody > tr.arena-row-kaempfer > td.arena-cell-fordern {
        padding-top: var(--space-sm);
    }
    body .arena .arena-fordern-btn {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        padding: 0 var(--space-md);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    body .arena .arena-fordern-btn--disabled {
        background: transparent;
        border-color: var(--mobile-border-very-soft);
        color: var(--mobile-text-muted);
        font-weight: 400;
        font-style: italic;
        cursor: default;
    }

    /* Leerer Zustand "gähnende Leere" */
    body .arena .arena-empty {
        padding: var(--space-md);
        text-align: center;
        color: var(--mobile-text-muted);
        font-style: italic;
    }

    /* ---------- Berichte-Tabelle als Card-Liste ---------- */
    body .arena table#berichte,
    body .arena table#berichte > thead,
    body .arena table#berichte > tbody,
    body .arena table#berichte > tbody > tr,
    body .arena table#berichte > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background: transparent;
        padding: 0;
    }
    body .arena table#berichte > thead {
        display: none;
    }
    body .arena table#berichte > tbody > tr.arena-row-bericht {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        position: relative;
    }
    /* Header-Pille mit Ausgang + Datum oben in der Card */
    body .arena .arena-bericht-card-head {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        margin-bottom: var(--space-xs);
        font-size: 0.78em;
        color: var(--mobile-text-muted);
    }
    body .arena .arena-bericht-ausgang {
        display: inline-flex;
        align-items: center;
        padding: 2px var(--space-xs);
        border-radius: 999px;
        font-size: 0.95em;
        font-weight: 700;
        border: 1px solid var(--mobile-border-soft);
        background: var(--mobile-chip-bg);
        color: var(--mobile-text-soft);
    }
    body .arena .arena-bericht-ausgang--win {
        background: rgba(80, 130, 50, 0.2);
        border-color: #6b8a36;
        color: #8cce72;
    }
    body .arena .arena-bericht-ausgang--lose {
        background: var(--mobile-warn-bg);
        border-color: var(--mobile-warn-border);
        color: var(--mobile-warn-text);
    }
    body .arena .arena-bericht-zeit::before {
        content: "·";
        margin: 0 var(--space-xs);
        color: var(--mobile-text-muted);
    }
    /* Heraus./Gefordert.-Spalten als Card-Body "A vs B" */
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-herausforderer,
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-geforderter {
        display: inline;
        font-size: 1em;
        color: var(--mobile-text);
    }
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-herausforderer a,
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-geforderter a {
        color: var(--mobile-text);
        text-decoration: none;
        font-weight: 600;
    }
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-herausforderer::after {
        content: " vs ";
        color: var(--mobile-text-muted);
        font-weight: 400;
    }
    /* Originale Ausgang/Zeit-Zellen unter mobile verstecken — sind im Card-Head */
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-ausgang,
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-zeit {
        display: none;
    }
    /* Bericht-Lesen-Link als full-width sekundär-Button */
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-bericht {
        margin-top: var(--space-sm);
    }
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-bericht img {
        display: none;
    }
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-bericht a {
        display: block;
        width: 100%;
        min-height: var(--touch-target-min);
        line-height: var(--touch-target-min);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    body .arena table#berichte > tbody > tr.arena-row-bericht > td.arena-cell-bericht a::after {
        content: " ›";
    }

    /* ---------- Filter-Chips über Berichte ---------- */
    body .arena .arena-berichte-filter {
        display: flex;
        gap: var(--space-xs);
        margin-bottom: var(--space-sm);
    }
    body .arena .arena-berichte-filter .arena-filter-chip {
        flex: 1;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 999px;
        color: var(--mobile-text-soft);
        font-family: inherit;
        font-size: 0.85em;
        cursor: pointer;
        text-align: center;
        white-space: nowrap;
    }
    body .arena .arena-berichte-filter .arena-filter-chip[aria-selected="true"] {
        background: var(--mobile-accent);
        color: var(--mobile-accent-contrast);
        border-color: var(--mobile-accent-strong);
        font-weight: 600;
    }
    /* Filter-State auf der Berichte-Tabelle: filtert Zeilen über data-Attribut */
    body .arena table#berichte[data-filter="meine"] tr.arena-row-bericht:not([data-mein="1"]),
    body .arena table#berichte[data-filter="heute"] tr.arena-row-bericht:not([data-heute="1"]) {
        display: none;
    }

    /* ---------- Action-Bar Sticky-Bottom ("Zurück zum Ortszentrum") ---------- */
    body .arena > strong.leave {
        display: none;
    }
    body .arena .arena-action-bar {
        display: flex;
        gap: var(--space-sm);
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: var(--mobile-body-bg);
        padding: var(--space-sm) 0 calc(var(--space-sm) + var(--safe-bottom));
        margin-top: var(--space-md);
        border-top: 1px solid var(--mobile-border-very-soft);
    }
    body .arena .arena-action-bar .arena-action-btn {
        flex: 1;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }

    /* ---------- Einheitlicher „zurück zum Ortszentrum"-Chip (mobil) ---------- */
    /* Seitenuebergreifende Back-zu-spiel.php-Links als vollbreiter Tap-Chip,    */
    /* gleiche Rezeptur wie .arena-action-btn / .arena-precheck-back.            */
    body a.ort-zurueck {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        margin: var(--space-md) 0 calc(var(--space-sm) + var(--safe-bottom));
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    /* In <strong>/<p>-Wrappern erbt der Chip keinen Bold-Doppelstil, Wrapper neutral halten */
    body strong.leave > a.ort-zurueck {
        font-weight: 600;
    }
    /* Skin-.leave bringt height:30px/2em + overflow:hidden + width:93% mit —
       das clippt den 48px-Chip. Wrapper mobil komplett neutralisieren. */
    body strong.leave {
        height: auto;
        overflow: visible;
        width: auto;
        margin: 0;
        padding: 0;
        line-height: inherit;
        border: none;
    }

    /* Ort-Nav-Chips („Weitere Händler/Lehranstalten/Altäre"): Tap-Höhe anheben,
       aber nicht vollbreit — mehrere Chips sollen nebeneinander passen. */
    body .ort-nav-chip {
        min-height: var(--touch-target-min);
        padding: 0.3em 0.9em;
    }

    /* ---------- Pre-Check-Fehlermeldungen aus kampf_arena() ---------- */
    body .arena .arena-precheck {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-left: 3px solid var(--mobile-warn-border);
        border-radius: 6px;
        padding: var(--space-md);
        margin: var(--space-sm) 0;
        color: var(--mobile-text);
    }
    body .arena .arena-precheck-back {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        line-height: var(--touch-target-comfort);
        margin-top: var(--space-sm);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    body .arena .arena-precheck br {
        display: none;
    }

    /* "Stufe zu niedrig"-Wegweisung: einzelner Wrapper, Action-Bar darunter */
    body .arena .arena-too-young {
        padding: var(--space-md);
        background: var(--mobile-surface-2);
        border-left: 3px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        line-height: 1.5;
    }
    body .arena .arena-too-young .ooc {
        display: block;
        margin-top: var(--space-sm);
        font-size: 0.85em;
        color: var(--mobile-text-muted);
        font-style: italic;
    }

    /*
     * ============================================================
     * Arena-Bestenliste (Antamars Gladiatoren)
     * ============================================================
     */
    body .arena-liga-list {
        display: block;
        width: 100%;
        margin: 0;
        border: none;
        background: transparent;
    }
    body .arena-liga-list > tbody {
        display: block;
        width: 100%;
    }
    /* Header-Zeile (erste tr mit Spalten-Headings) auf Mobile verstecken */
    body .arena-liga-list > tbody > tr:first-child {
        display: none;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row {
        display: grid;
        grid-template-columns: auto 1fr 1fr 1fr;
        grid-template-areas:
            "rang name name name"
            "rang g    v    u";
        column-gap: var(--space-xs);
        row-gap: var(--space-xs);
        align-items: center;
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        width: 100%;
        box-sizing: border-box;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row-self {
        border-color: var(--mobile-accent);
        background: rgba(193, 171, 73, 0.08);
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        box-sizing: border-box;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-rang {
        grid-area: rang;
        padding: 2px var(--space-sm);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 999px;
        font-size: 0.95em !important;
        font-weight: 700 !important;
        color: var(--mobile-text) !important;
        text-align: center !important;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-rang::before {
        content: "#";
        color: var(--mobile-text-muted);
        font-weight: 400;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-name {
        grid-area: name;
        font-weight: 600 !important;
        color: var(--mobile-text) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left !important;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-name a {
        color: var(--mobile-text);
        text-decoration: none;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-name br {
        display: none;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-gewonnen,
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-verloren,
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-unentschieden {
        padding: var(--space-xs) !important;
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        text-align: center !important;
        font-weight: 600 !important;
        color: var(--mobile-text) !important;
        min-width: 0;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-gewonnen { grid-area: g; }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-verloren { grid-area: v; }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-unentschieden { grid-area: u; }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-gewonnen::before {
        content: "Siege";
        display: block;
        font-size: 0.65em;
        font-weight: 400;
        color: var(--mobile-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-verloren::before {
        content: "Niederl.";
        display: block;
        font-size: 0.65em;
        font-weight: 400;
        color: var(--mobile-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row > td.arena-liga-cell-unentschieden::before {
        content: "Unentsch.";
        display: block;
        font-size: 0.65em;
        font-weight: 400;
        color: var(--mobile-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
    /* Plätze-Select unter den Cards als zentrierter Footer */
    body .arena-liga-list > tbody > tr.arena-liga-row-footer {
        display: block;
        width: 100%;
        margin-top: var(--space-md);
    }
    body .arena-liga-list > tbody > tr.arena-liga-row-footer > th {
        display: block;
        width: 100%;
        padding: var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        text-align: center;
        color: var(--mobile-text-soft);
        font-weight: 400;
        box-sizing: border-box;
    }
    body .arena-liga-list > tbody > tr.arena-liga-row-footer select {
        min-height: var(--touch-target-min);
        padding: 0 var(--space-sm);
        margin-left: var(--space-xs);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-family: inherit;
    }

    /* ============================================================
     * Statistik-Listen (listen.php): breite Tabellen horizontal
     * scrollbar. Card-Umbau nur beim Arena-Tab (s.o.); restliche
     * Tabs behalten Tabellenform im Scroll-Container.
     * ============================================================ */
    body :is(div.einstellungen, div.orden) .liste-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 0 var(--space-md);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        /* Scroll-Schatten (Lea Verou) — sichtbar nur wenn scrollbar */
        background:
            linear-gradient(to right, var(--mobile-body-bg) 0%, rgba(0,0,0,0) 100%),
            linear-gradient(to right, rgba(0,0,0,0) 0%, var(--mobile-body-bg) 100%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.25), transparent),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.25), transparent) 100% 0;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    body :is(div.einstellungen, div.orden) .liste-scroll > table {
        width: auto;
        min-width: 100%;
        margin: 0;
        font-size: 0.9em;
    }
    /* nowrap erzwingt horizontales Scrollen statt unleserliches Quetschen;
       explizite <br/> in den Zellen brechen weiterhin korrekt um */
    body :is(div.einstellungen, div.orden) .liste-scroll > table th,
    body :is(div.einstellungen, div.orden) .liste-scroll > table td {
        white-space: nowrap;
    }
    /* Paginierungs-Select (im Footer-<th>) als Touch-Target */
    body :is(div.einstellungen, div.orden) .liste-scroll select {
        min-height: var(--touch-target-min);
        padding: 0 var(--space-sm);
    }

    /* --- Suchformulare touch-freundlich (alle_helden/alle_orden/npc) --- */
    body div.einstellungen table.liste-suche,
    body div.einstellungen table.liste-suche > tbody > tr > td {
        display: block;
        width: 100%;
    }
    body :is(#helden_suche_form, #orden_suche_form, #npc_suche_form) {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        align-items: stretch;
    }
    body :is(#helden_suche_form, #orden_suche_form, #npc_suche_form) label {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    body :is(#helden_suche_form, #orden_suche_form, #npc_suche_form) input[type="text"],
    body :is(#helden_suche_form, #orden_suche_form, #npc_suche_form) input[type="submit"] {
        width: 100%;
        min-height: var(--touch-target-min);
        box-sizing: border-box;
        font-size: 1em;
    }
}

/* ============================================================
 * Chat-Smiley-Auswahl — Mobile Toggle-Drawer + Touch-Target
 *
 * Skin-agnostisch, daher zentral statt je Skin in chatv15.css.
 * Eigene Media-Query (pointer: coarse ODER max-width 770px), weil
 * Desktop-Emulation (Playwright) pointer:coarse nicht meldet, aber das
 * Breitenkriterium greift. Der produktive Chat lebt im Hauptdokument,
 * wo diese Datei geladen ist; ext/chat/chat.css behält eine eigene Kopie
 * für die standalone Test-Seite (chat.html ohne Token-Stylesheet).
 *
 * Desktop: die zwei flankierenden Spalten neben "Senden" bleiben; der
 * Toggle-Button und das Grid sind ausgeblendet. Mobil: die Spalten (je 12
 * Buttons, zusammen ~580px hoch) werden ausgeblendet, stattdessen nur ein
 * "Smileys"-Button neben Senden; Tippen togglet die Klasse .is-open auf dem Grid.
 * Mobil ist .AOChatSmileyGrid per Default display:none, .is-open schaltet auf
 * display:grid; auf Desktop bleibt das Grid generell ausgeblendet.
 * ============================================================ */

/* Desktop-Default: neue Mobil-Elemente unsichtbar (gilt fuer alle Skins). */
.AOChatSmileyToggle,
.AOChatSmileyGrid {
    display: none;
}

@media (pointer: coarse), (max-width: 770px) {
    /* Touch-Target der Buttons (klassische Bar UND neues Grid). */
    .AOChatSmileyBar .smiley-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: 4px 8px;
        font-size: 1.4em;
        opacity: 0.85;
    }

    /* Die zwei senkrechten Spalten ersetzt der Drawer -> ausblenden. */
    .AOChatSmileyColumn {
        display: none !important;
    }

    /* Button-Zeile: Toggle + Senden (+ Zahnrad) in einer Reihe. */
    .AOChatButtonRow {
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: space-between;
    }

    /* Toggle-Button in Chip-Optik (analog Galerie-Kategorien). */
    .AOChatSmileyToggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-height: var(--touch-target-min);
        padding: 4px 14px;
        border: 1px solid var(--mobile-border);
        border-radius: 20px;
        background: var(--mobile-chip-bg);
        color: var(--mobile-text);
        font-size: 1em;
        font-family: inherit;
        cursor: pointer;
    }

    /* Emoji-Grid: per Default eingeklappt; .is-open (vom Toggle gesetzt) zeigt es. */
    .AOChatSmileyGrid {
        display: none;
        grid-template-columns: repeat(auto-fill, minmax(var(--touch-target-comfort), 1fr));
        gap: var(--space-xs);
        width: 100%;
        margin-top: var(--space-sm);
        padding: var(--space-sm);
        max-height: 40vh;
        overflow-y: auto;
        box-sizing: border-box;
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 8px;
    }

    .AOChatSmileyGrid.is-open {
        display: grid;
    }

    .AOChatSmileyGrid .smiley-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        font-size: 1.5em;
        cursor: pointer;
        opacity: 0.9;
    }
}

/* ============================================================
 * Chat-Smiley-Leiste — schmaler Desktop: zentrierte Wolke
 *
 * Auf breiten Desktops bleiben die zwei flankierenden Spalten neben
 * "Senden". Wird die Chat-Eingabespalte aber zu schmal (kleines Fenster
 * ODER offene Quest, die sich die table-layout:auto-Zelle mit dem Chat
 * teilt), brachen die inline-block-Smileys INNERHALB jeder Spalte ragged
 * um -> hohe, zerklueftete Leiste.
 *
 * Loesung (Nutzerwunsch "sauberer Umbruch"): ab einer SPALTEN-Breite die
 * Spalten-/Bar-Boxen per display:contents aufloesen, sodass alle 24
 * .smiley-btn zu direkten Flex-Items von .AOChatButtonRow werden und als
 * EINE zentrierte Wolke umbrechen; Senden + Zahnrad rutschen ans Ende.
 *
 * Schwelle 680px: die flankierende Doppelspalte beginnt genau hier
 * ragged umzubrechen (gemessen am globalen Chat: >=681px sauber, <=676px
 * gestapelt). Daher uebernimmt ab <=680px die Wolke.
 *
 * Container-Query (nicht @media), weil der Umbruch von der echten
 * Chatbreite abhaengt (Quest-Status, Grippie-Resize), nicht vom Viewport.
 * Container liegt auf .AOChatInputPanel; die Zellbreite treibt weiterhin
 * das nicht-contained Output-Panel -> kein Spalten-Kollaps (vgl. die
 * table-layout:auto-Container-Trap auf der Kampfseite).
 *
 * Mobil (<=770px / coarse) gewinnt der Drawer-Block oben: dessen
 * .AOChatSmileyColumn{display:none !important} schlaegt das display:contents
 * hier -> dort bleibt der Toggle+Grid-Drawer.
 * ============================================================ */
.AOChatInputPanel {
    container: aochat / inline-size;
}

@container aochat (max-width: 680px) {
    /* Spalten- und Bar-Boxen aufloesen: alle .smiley-btn werden direkte
       Flex-Items von .AOChatButtonRow und fliessen als eine Reihe.
       Deszendenz-Selektor (0,2,0) ist Absicht: chatv54.css laedt NACH dieser
       Datei und setzt .AOChatSmileyColumn{display:flex}/.AOChatSmileyBar{
       display:inline} mit (0,1,0) -> bei Gleichstand gewaenne chatv32. KEIN
       !important, damit das Inline-display:none aus updateVisibility() (Leiste
       per Einstellung deaktiviert) weiterhin alles ausblendet. */
    .AOChatButtonRow .AOChatSmileyColumn,
    .AOChatButtonRow .AOChatSmileyBar {
        display: contents;
    }

    /* Eine ruhige, zentrierte Wolke statt zwei zerfaserter Spalten. */
    .AOChatButtonRow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 4px;
    }

    /* Senden + Zahnrad ans Ende (zentriert hinter/unter der Wolke). */
    .AOChatSendButton,
    .AOChatButtonRow .settings {
        order: 1;
    }
}

/* ============================================================
 * Kampfmanöver-Seite Mobile-Layout (ajax/kampfmanoever.inc.php)
 * ============================================================
 * Wrapper .kampfmanoever. Ziele:
 *   1. Horizontalen Overflow beseitigen (Cards/Grid/Tabelle mit festen
 *      min-content-Breiten aus antamarGeneralv57.css:1342+).
 *   2. Kampfwerte-Tabelle (#KampfwerteAktuell, 7 Spalten) durch die
 *      Sticky-Summary (.kampfmanoever-mobile-summary) ersetzen.
 *   3. Speichern-Button als Sticky-Bottom-Action-Bar.
 *
 * Sub-Nav (.kampf_links) erbt die Chip-Optik der Kampfseite (oben per
 * :is(.kampf_v2, .kampfmanoever)). Manöver-Beschreibungen bleiben als
 * Long-Press-Tooltip (.tip, Handler in allgemeines-v20.js:227) erreichbar
 * — kein Inline-Help. Das Akkordeon (#manoeverAccordion) wird hier auf
 * Desktop UND Mobile per VanillaAccordion gesteuert, daher .accordion_content
 * NICHT anfassen (kein max-height-Override).
 * ============================================================ */
@media (max-width: 770px) {

    /* Sticky-Containing-Block freigeben: #gameInnerBox hat skin-seitig
       overflow:hidden (z.B. bombast/antamarv41.css:305) — sonst klebt
       weder Summary noch Save-Bar. Gleiches Muster wie Händler/Kampfschule. */
    body:has(.kampfmanoever) #gameInnerBox {
        overflow: visible;
    }

    /* Kampfwerte-Tabelle aus — die Sticky-Summary übernimmt. */
    body .kampfmanoever #KampfwerteAktuell {
        display: none;
    }

    /* Sticky-Summary: Kampfwerte oben angepinnt, ~3 Stats pro Reihe. */
    body .kampfmanoever .kampfmanoever-mobile-summary {
        display: flex;
        flex-wrap: wrap;
    }
    body .kampfmanoever .kampfmanoever-mobile-summary .stat {
        flex: 1 1 28%;
    }

    /* Akkordeon-Toggles/-Content: die Basis-.accordion_toggle-Regel setzt
       margin:0 20px + content-box-Breite, was zusammen den Container sprengt.
       Auf Mobil flush + border-box. .accordion_content NICHT auf max-height
       anfassen (VanillaAccordion steuert das hier auch mobil). */
    body .kampfmanoever #manoeverAccordion .accordion_toggle,
    body .kampfmanoever #manoeverAccordion .accordion_content {
        box-sizing: border-box;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    /* Manöver-Cards: volle Breite statt fixer flex-basis (280/220px). */
    body .kampfmanoever .manoever-grid {
        gap: var(--space-sm);
    }
    body .kampfmanoever .manoever-card,
    body .kampfmanoever .manoever-card.nicht-ausfuehrbar {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Eingabefelder als Touch-Targets. */
    body .kampfmanoever .input_zahl {
        min-height: var(--touch-target-min);
    }

    /* Kampfstil-Radio-Cards einspaltig (Desktop: flex 1 1 150px). */
    body .kampfmanoever .kampfstil-options .kampfstil-option {
        flex: 1 1 100%;
    }

    /* Allgemeine Einstellungen: ein Grid-Spalte statt minmax(280px). */
    body .kampfmanoever .allgemein-grid {
        grid-template-columns: 1fr;
    }
    body .kampfmanoever .allgemein-item {
        min-height: var(--touch-target-min);
    }
    body .kampfmanoever .allgemein-item select.input {
        flex: 1 1 100%;
    }

    /* Überlappungs-Übersicht: schmaleres Fix-Label (Desktop: 120px). */
    body .kampfmanoever .overlap-row-label {
        width: 90px;
    }

    /* Speichern als Sticky-Action-Bar (.mobile-action-bar geerbt).
       Offset = Höhe der fixen .div-mobile-menu (z-index 1000), wie beim
       Händler-Kauf/Verkauf-Pattern. */
    body .kampfmanoever .manoever-save-bar {
        bottom: var(--mobile-bottombar-height);
        margin-top: var(--space-md) !important;
    }
}

/* ============================================================
 * Nachrichten (nachrichten.php) — Mobile-Layout
 *
 * Listen-DataTable (serverSide) → Card-Liste, Tabs als sticky
 * Chip-Bar, touch-freundliche DataTables-Bedienelemente,
 * einklappbarer Compose-Editor, Detail-/Thread-Ansicht als
 * Token-Cards. Die Card-Klassen (mobile-card, nm-held/nm-kat/
 * nm-betreff/nm-zeit/nm-select) hängt scripts/nachrichten.js
 * client-seitig an die per AJAX gerenderten Zeilen.
 *
 * Alles Token-basiert + media-scoped → alle Skins profitieren,
 * Desktop bleibt unberührt. body-Prefix schlägt die später
 * ladenden Skin-/General-CSS (z.B. .game td-Borders) sowie die
 * Inline-Spaltenbreiten von DataTables (autoWidth).
 * ============================================================ */

/* Compose-Toggle wird nur mobil per JS eingefügt; defensiv global
   ausblenden, falls der Viewport von mobil auf Desktop wechselt. */
.nachrichten-compose-toggle { display: none; }

@media (max-width: 770px) {

    /* --- Tabs: sticky horizontale Chip-Bar ------------------------ */
    body .nachrichten-tabs {
        display: flex;
        gap: var(--space-sm);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        position: sticky;
        top: calc(var(--mobile-topbar-height) + var(--safe-top));
        z-index: 5;
        background: var(--mobile-body-bg);
        padding: var(--space-xs) 0;
        margin-bottom: var(--space-sm);
    }
    body .nachrichten-tabs .tab {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-size: 0.95em;
        white-space: nowrap;
        text-decoration: none;
    }
    body .nachrichten-tabs .tab.active {
        background: var(--mobile-accent);
        color: var(--mobile-accent-contrast);
        border-color: var(--mobile-accent-strong);
        font-weight: 600;
    }

    /* --- Kategorie-Filter ----------------------------------------- */
    body .nachrichten-filter {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin-bottom: var(--space-sm);
    }
    body .nachrichten-filter select {
        width: 100%;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm);
        font-family: inherit;
        font-size: 1em;
        box-sizing: border-box;
    }

    /* --- DataTables-Wrapper: 606px-Überlauf killen ---------------- */
    /* background:none hebt den Lea-Verou-Scroll-Schatten auf, den die
       generische .dataTables_wrapper-Regel (antamarGeneralv57.css ~Z.2939)
       für horizontal scrollende Tabellen setzt. Hier wird die Tabelle zur
       Card-Liste (kein Scroll), der dunkle Schatten würde sonst auf hellen
       Skins (z.B. Antamar-hell) als Farbverlauf an den Rändern erscheinen —
       analog zum Händler-Kauf-Override. */
    body #nachrichten_wrapper,
    body #nachrichten_wrapper table#nachrichten.dataTable {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        background: none !important;
        box-sizing: border-box;
    }
    body table#nachrichten,
    body table#nachrichten > tbody {
        display: block;
        width: 100%;
        background: transparent;
        border: none;
    }
    body table#nachrichten > thead { display: none; }

    /* --- DataTables-Bedienelemente touch-freundlich --------------- */
    body #nachrichten_wrapper .dataTables_length,
    body #nachrichten_wrapper .dataTables_filter,
    body #nachrichten_wrapper .dataTables_info,
    body #nachrichten_wrapper .dataTables_paginate {
        display: block;
        width: 100%;
        float: none;
        text-align: left;
        margin: var(--space-xs) 0;
        box-sizing: border-box;
    }
    body #nachrichten_wrapper .dataTables_filter label,
    body #nachrichten_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        width: 100%;
    }
    body #nachrichten_wrapper .dataTables_filter input {
        flex: 1;
        width: 100%;
        min-height: var(--touch-target-min);
        margin: 0;
        padding: var(--space-xs) var(--space-sm);
        box-sizing: border-box;
        font-family: inherit;
        font-size: 1em;
    }
    body #nachrichten_wrapper .dataTables_length select {
        min-height: var(--touch-target-min);
        padding: var(--space-xs);
        font-family: inherit;
    }
    body #nachrichten_wrapper .dataTables_info {
        text-align: center;
        color: var(--mobile-text-muted);
        font-size: 0.85em;
    }
    body #nachrichten_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xs);
        padding-top: var(--space-xs);
    }
    body #nachrichten_wrapper .dataTables_paginate .paginate_button {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-xs) var(--space-sm);
        margin: 0;
        box-sizing: border-box;
        border-radius: 6px;
    }

    /* --- Zeilen → Cards ------------------------------------------- */
    body table#nachrichten > tbody > tr.mobile-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-sm);
        row-gap: 2px;
        align-items: start;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
    }
    body table#nachrichten > tbody > tr.mobile-card > td {
        display: block;
        width: auto !important;       /* schlägt DataTables-Inline-Breiten */
        padding: 0;
        border: none;
        background: transparent;
        white-space: normal;
        text-align: left;             /* manche Skins zentrieren .game td */
    }
    body table#nachrichten td.nm-held {
        grid-column: 1; grid-row: 1;
        font-weight: 600;
        color: var(--mobile-text);
        word-break: break-word;
    }
    body table#nachrichten td.nm-held a { color: var(--mobile-text); }
    body table#nachrichten td.nm-select {
        grid-column: 2; grid-row: 1;
        align-self: center;
        text-align: center;
    }
    body table#nachrichten td.nm-select input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        margin: 0;
    }
    body table#nachrichten td.nm-betreff {
        grid-column: 1; grid-row: 2;
        word-break: break-word;
    }
    body table#nachrichten td.nm-betreff a {
        display: block;
        min-height: var(--touch-target-min);
        color: var(--mobile-text);
        text-decoration: none;
        font-weight: 600;
        line-height: 1.3;
    }
    body table#nachrichten td.nm-betreff a strong {
        font-weight: 400;
        color: var(--mobile-text-muted);
        font-size: 0.85em;
    }
    body table#nachrichten td.nm-kat {
        grid-column: 1; grid-row: 3;
        font-size: 0.85em;
        color: var(--mobile-text-soft);
    }
    body table#nachrichten td.nm-zeit {
        grid-column: 1; grid-row: 4;
        font-size: 0.8em;
        color: var(--mobile-text-muted);
    }

    /* --- Bulk-Actions (Alle wählen / löschen / exportieren) ------- */
    /* font-size:0 collapst die &nbsp;-Textknoten zwischen den Inputs. */
    body .nachrichten-actions {
        margin: var(--space-sm) 0;
        font-size: 0;
    }
    body .nachrichten-actions input.button {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        margin: 0 0 var(--space-sm);
        padding: var(--space-xs) var(--space-md);
        font-family: inherit;
        font-size: 1rem;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* --- Compose-Editor: einklappbar + gestackte Felder ----------- */
    body .nachrichten-compose-toggle {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        margin: var(--space-sm) 0;
        padding: var(--space-xs) var(--space-md);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-family: inherit;
        font-size: 1em;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }
    body .nachrichten-editor.collapsed { display: none; }

    body .nachrichten-editor .editor-row {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin-bottom: var(--space-sm);
    }
    body .nachrichten-editor .editor-row label { font-weight: 600; }
    body .nachrichten-editor .editor-row input.input_text,
    body .nachrichten-editor .editor-row select,
    body .nachrichten-editor .editor-row textarea {
        width: 100%;
        max-width: 100%;
        min-height: var(--touch-target-min);
        box-sizing: border-box;
        padding: var(--space-xs) var(--space-sm);
        font-family: inherit;
        font-size: 1em;
    }
    /* TinyMCE-Container auf volle Breite (versionsübergreifend defensiv) */
    body .nachrichten-editor .mce-tinymce,
    body .nachrichten-editor .mce-container,
    body .nachrichten-editor table.mceLayout {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    body .nachrichten-editor .editor-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
    }
    body .nachrichten-editor .editor-actions select,
    body .nachrichten-editor .editor-actions input.button {
        width: 100%;
        min-height: var(--touch-target-comfort);
        box-sizing: border-box;
        font-family: inherit;
        font-size: 1em;
    }
    body .nachrichten-editor .editor-actions input.button-primary {
        background: var(--mobile-action-bg);
        border-color: var(--mobile-action-border);
        color: var(--mobile-text);
        font-weight: 600;
    }

    /* --- Detail-Ansicht: tableNachrichten als Token-Card ---------- */
    body table.tableNachrichten,
    body table.tableNachrichten > tbody,
    body table.tableNachrichten > tbody > tr,
    body table.tableNachrichten > tbody > tr > th,
    body table.tableNachrichten > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background: transparent;
        text-align: left;
    }
    body table.tableNachrichten {
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
    }
    body table.tableNachrichten > tbody > tr > th:not(.form_inputs) {
        font-size: 1.05em;
        font-weight: 600;
        color: var(--mobile-text);
        padding-bottom: var(--space-xs);
        border-bottom: 1px solid var(--mobile-border-very-soft);
        margin-bottom: var(--space-xs);
    }
    body table.tableNachrichten td.nachricht_kategorie,
    body table.tableNachrichten td.nachricht_betreff {
        padding: var(--space-xs) 0;
        color: var(--mobile-text-soft);
    }
    body table.tableNachrichten td.nachricht_inhalt {
        padding: var(--space-sm) 0;
        line-height: 1.6;
        word-break: break-word;
        color: var(--mobile-text);
    }
    body table.tableNachrichten th.form_inputs {
        padding-top: var(--space-sm);
        border-top: 1px solid var(--mobile-border-very-soft);
        margin-top: var(--space-xs);
    }
    /* Antworten-CTA im Card-Footer: Action-Farbe wie der Senden-Button */
    body table.tableNachrichten th.form_inputs .nachricht-antworten {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        box-sizing: border-box;
        font-family: inherit;
        font-size: 1em;
        cursor: pointer;
        background: var(--mobile-action-bg);
        border-color: var(--mobile-action-border);
        color: var(--mobile-text);
        font-weight: 600;
    }

    /* Aktionszeile der Detailansicht: Zurück-Chip links, dezenter
       Lösch-Chip rechts (bewusst KEIN prominenter CTA — Verwechslungs-
       gefahr mit Antworten) ---------------------------------------- */
    body p.nachrichten-back {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
    }
    body p.nachrichten-back a {
        display: inline-block;
        min-height: var(--touch-target-min);
        line-height: var(--touch-target-min);
        padding: 0 var(--space-md);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-decoration: none;
    }
    body p.nachrichten-back input.nachricht-loeschen {
        min-height: var(--touch-target-min);
        padding: 0 var(--space-md);
        background: transparent;
        border: 1px solid var(--mobile-warn-border);
        border-radius: 6px;
        color: var(--mobile-warn-text);
        font-family: inherit;
        font-size: 0.95em;
        box-shadow: none;   /* Bombast .button: inset-Shadow */
        text-shadow: none;  /* Bombast .button: text-shadow */
        cursor: pointer;
    }

    /* Scroll-Ziel des Antworten-Buttons: Editor-Überschrift nicht unter
       der sticky Tab-Chipbar (+ Topbar) verschwinden lassen */
    body .nachrichten-editor {
        scroll-margin-top: calc(var(--mobile-topbar-height) + var(--safe-top)
                                + var(--touch-target-min) + var(--space-md));
    }

    /* --- Thread-Verlauf: Block-Tap-Targets ------------------------ */
    body ul.nachrichtenverlauf {
        list-style: none;
        margin: var(--space-sm) 0;
        padding: 0;
    }
    body ul.nachrichtenverlauf li { margin-bottom: var(--space-xs); }
    body ul.nachrichtenverlauf li a {
        display: block;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        color: var(--mobile-text-soft);
        text-decoration: none;
        line-height: 1.4;
        word-break: break-word;
    }
    body ul.nachrichtenverlauf li.active a {
        background: var(--mobile-surface-2-hover);
        border-color: var(--mobile-accent);
        color: var(--mobile-text);
        font-weight: 600;
    }
}

/* ============================================================
 * Orden-Seite (orden.php) — Mobile-Layout
 * ============================================================
 * Wrapper div.orden. Ziele:
 *   1. Quest-Außenbild (div.quest bekommt inline width:450 aus
 *      orden_zugang_mitglied.inc.php:50) auf den Viewport begrenzen.
 *   2. Breite Daten-Tabellen: einfache Listen -> Karten (.orden-cards
 *      + data-label), komplexe/rowspan-lastige -> Scroll-Container
 *      (.liste-scroll, oben um div.orden erweitert).
 *   3. Formulare (zeige_formular -> table.formular, eigene .orden-form)
 *      einspaltig + Touch-Felder; Bauen/Abreißen-Split
 *      (.orden-build-split) stapeln; Raumverwaltung-Boxen/-Felder
 *      full-width.
 * Tab-Navs (p.tab-nav) erben bereits global die sticky Chip-Bar.
 * Alles skin-agnostisch über Tokens, nur in dieser Media-Query —
 * Desktop bleibt unberührt.
 * ============================================================ */
@media (max-width: 770px) {

    /* Seiten-Gutter wie bei div.einstellungen, damit die negativen
       Ränder der full-bleed Tab-Bar (body p.tab-nav) aufgehen und keinen
       horizontalen Überlauf erzeugen. */
    body div.orden {
        padding: 0 var(--space-sm);
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
    /* table.main rechnet die min-content-Breite der overflow:auto-Kinder
       (Tab-Bar, .liste-scroll) in die Breite der Spielzelle ein -> Phantom-
       Scroll (~27px Orden, ~7px Fertigkeiten), obwohl visuell alles korrekt
       eingefasst ist. overflow-x:clip kappt das (kein Scroll-Container ->
       sticky Tab-Bar bleibt intakt). Via :has() auf Orden (div.orden) und
       Fertigkeiten (div.talenteBox) gescoped. */
    body:has(:is(div.orden, div.talenteBox)) #content {
        overflow-x: clip;
    }
    /* --- Quest-Außenbild = Multi-Layer-Composite -----------------------
     * Ein bg-div (inline fix 450x295, bg.jpg) mit deckungsgleichen,
     * absolut positionierten 450x295-PNG-Ebenen (z-index-Stapel:
     * Verwaltung, Zeughaus, ..., vordergrund = Baum). Einzelne Ebenen per
     * max-width/height zu skalieren zerreißt die Deckung -> der Baum ragt
     * heraus. Lösung: den Composite als GANZES uniform skalieren — bg-div
     * fluide auf Boxbreite mit fixem 450:295-Seitenverhältnis, jede Ebene
     * exakt deckungsgleich darüber. Per [style*="width:450px"] gezielt auf
     * den Composite-Container, damit andere Quest-Inhalte unberührt bleiben. */
    body .orden div.quest {
        width: 100% !important;
        max-width: 450px;          /* nie über Nativgröße hinaus skalieren */
        margin: 0 auto;
        box-sizing: border-box;
    }
    body .orden div.quest > div[style*="width:450px"] {
        position: relative;        /* Bezug für die absoluten Ebenen */
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 450 / 295;   /* Höhe folgt der skalierten Breite */
        background-size: 100% 100% !important;  /* bg.jpg mitskalieren */
    }
    body .orden div.quest > div[style*="width:450px"] img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        height: auto !important;   /* alle Ebenen 450x295 -> deckungsgleich */
        max-width: none;
        margin: 0;
    }

    /* Sonstige Bilder (Haus-Standbild, Wappen) auf Viewport begrenzen.
       height:auto NUR für große dekorative Bilder — NICHT pauschal, sonst
       rendern Münz-/Rang-Icons (Höhe via Skin-CSS) in Originalgröße und
       sprengen z.B. heller2preis. */
    body .orden img { max-width: 100%; }
    body .orden img[src*="orden_haus"],
    body .orden img[src*="orden_wappen"] {
        height: auto;
    }

    /* --- Tabelle -> Karten (Mitglieder, Verwalten, Bewerber, Rolle) --- */
    body .orden table.orden-cards,
    body .orden table.orden-cards > thead,
    body .orden table.orden-cards > tbody,
    body .orden table.orden-cards > thead > tr,
    body .orden table.orden-cards > thead > tr > th,
    body .orden table.orden-cards > thead > tr > td {
        display: block;
        width: auto;
    }
    /* Reine Spaltenkopf-Zeile aus — Labels kommen je Zelle per data-label */
    body .orden table.orden-cards .orden-cards-head {
        display: none;
    }
    /* Titel-/Info-Kopfzeilen (colspan) als Block-Header behalten */
    body .orden table.orden-cards > thead > tr > th[colspan],
    body .orden table.orden-cards > thead > tr > td[colspan] {
        text-align: center;
        padding: var(--space-sm);
        box-sizing: border-box;
    }
    /* Datenzeile = Karte */
    body .orden table.orden-cards > tbody > tr {
        display: block;
        margin: 0 0 var(--space-sm);
        padding: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
        box-sizing: border-box;
    }
    /* Zelle = Label/Wert-Reihe */
    body .orden table.orden-cards > tbody > tr > td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-sm);
        text-align: left !important;
        padding: 3px 0;
        border: 0;
    }
    body .orden table.orden-cards > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.7em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--mobile-text-muted);
    }
    /* versteckte Sortier-Spans nicht als Flex-Item mitzählen */
    body .orden table.orden-cards > tbody > tr > td > span[style*="display:none"] {
        display: none !important;
    }
    /* Aktions-Icons als Touch-Target */
    body .orden table.orden-cards > tbody > tr > td a {
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
    }

    /* --- Formulare: zeige_formular (table.formular) + eigene .orden-form --- */
    body .orden table.formular,
    body .orden table.orden-form {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    body .orden table.formular > tbody > tr > td,
    body .orden table.formular > tbody > tr > th,
    body .orden table.orden-form > tbody > tr > td,
    body .orden table.orden-form > tbody > tr > th {
        display: block;
        width: auto;
        box-sizing: border-box;
    }
    body .orden table.formular input[type="text"],
    body .orden table.formular input[type="password"],
    body .orden table.formular select,
    body .orden table.formular textarea,
    body .orden table.orden-form input[type="text"]:not(.input_zahl),
    body .orden table.orden-form input[type="password"],
    body .orden table.orden-form select,
    body .orden table.orden-form textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        min-height: var(--touch-target-min);
    }
    body .orden table.formular textarea,
    body .orden table.orden-form textarea {
        min-height: 6em;
    }
    body .orden table.formular input[type="submit"],
    body .orden table.formular .button,
    body .orden table.orden-form input[type="submit"],
    body .orden table.orden-form .button {
        width: 100%;
        min-height: var(--touch-target-min);
    }
    /* Zahlungen: die drei Münzfelder bleiben in einer Reihe (nicht je
       Feld auf 100%), nur Touch-Höhe. */
    body .orden table.orden-form .input_zahl {
        min-height: var(--touch-target-min);
    }

    /* --- Bauen/Abreißen nebeneinander -> vertikal stapeln --- */
    body .orden table.orden-build-split,
    body .orden table.orden-build-split > tbody,
    body .orden table.orden-build-split > tbody > tr,
    body .orden table.orden-build-split > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Raumverwaltung (ajax/orden_raumverwaltung.php) --- */
    body #ordenRaumverwaltungContainer .raumBox,
    body #ordenRaumverwaltungContainer .neuerRaumBox {
        width: auto;
        max-width: 100%;
        float: none;
        margin: 0 0 var(--space-md);
        box-sizing: border-box;
    }
    body #ordenRaumverwaltungContainer input[type="text"],
    body #ordenRaumverwaltungContainer select,
    body #ordenRaumverwaltungContainer textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: var(--touch-target-min);
    }
    body #ordenRaumverwaltungContainer textarea {
        min-height: 5em;
    }

    /* --- Info-Tabelle (orden_info.inc.php): Label/Wert stapeln --- */
    body .orden table.orden-info-table > tbody > tr > th,
    body .orden table.orden-info-table > tbody > tr > td {
        display: block;
        width: auto;
        text-align: left;
        box-sizing: border-box;
    }
    body .orden table.orden-info-table img {
        max-width: 100%;
        height: auto;
    }

    /* --- Ordenshalle-Chat: kleiner Overflow-Glätter (Akkordeon) --- */
    body .orden .accordion_toggle {
        box-sizing: border-box;
    }
}

/* ============================================================
 * RP-Seite (rp.php) — Mobile
 * Alle Regeln nur < 770px; Desktop (antamarGeneralv57.css:2657-2691)
 * bleibt unangetastet. Skin-agnostisch über Tokens.
 * ============================================================ */
@media (max-width: 770px) {

    /* Seiten-Gutter + Phantom-Scroll kappen (analog div.orden).
       #rpsite hat keinen .einstellungen/.orden-Wrapper; die sticky
       .nachrichten-tabs (overflow-x:auto) erzeugen sonst ~27px Phantom-Scroll. */
    body #rpsite {
        padding: 0 var(--space-sm);
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
    body:has(#rpsite) #content {
        overflow-x: clip;
    }

    /* "+ Neue RP-Runde"-Tab: margin-left:auto in der nowrap-Chip-Bar
       neutralisieren, sonst große Lücke. */
    body #rpsite .nachrichten-tabs .rp-tab-neu {
        margin-left: 0;
    }

    /* ---------- Übersicht: Karten-Grid einspaltig, Filter touch-tauglich ---------- */
    body #rpsite .rp-cards {
        grid-template-columns: 1fr;
    }
    body #rpsite .rp-filter input {
        max-width: none;
        min-height: var(--touch-target-min);
    }

    /* ---------- View-Modus: Interna/Chats voll-breit, kein Overflow ---------- */
    body #rpsite .fr_interna {
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
    body #rpsite #rp_chat,
    body #rpsite [id^="rp_chat_f_"],
    body #rpsite .fr_files,
    body #rpsite .fr_filelist {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
    body #rpsite .AOChatMessageInput {
        width: 100%;
        box-sizing: border-box;
    }

    /* ---------- New/Edit-Modus: Panels stapeln ---------- */
    body #rpsite .rp-fraktion-grid {
        grid-template-columns: 1fr;
    }

    /* Inputs/Textareas voll-breit — Checkbox ausgenommen
       (sonst brechen teilnehmer[] / flg_* Checkboxen) */
    body #rpsite .input_long,
    body #rpsite .input_text,
    body #rpsite .ui-panel input[type="text"],
    body #rpsite .ui-panel input[type="file"],
    body #rpsite .ui-panel select,
    body #rpsite .ui-panel textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: var(--touch-target-min);
    }
    body #rpsite .ui-panel textarea { min-height: 6em; }
    body #rpsite .ui-panel input[type="submit"],
    body #rpsite .ui-panel .button {
        width: 100%;
        min-height: var(--touch-target-comfort);
        box-sizing: border-box;
    }
    body #rpsite .ui-panel input[type="checkbox"] {
        width: auto;
        min-width: 22px;
        height: 22px;
        vertical-align: middle;
    }

    /* Fraktions-Teilnehmer-Tabelle → data-label Karten.
       Checkbox + Name bilden den Karten-Kopf; Header-Zeile (nur <th>) ausblenden. */
    body #rpsite table.rp-tn-cards,
    body #rpsite table.rp-tn-cards > tbody {
        display: block;
        width: 100%;
    }
    body #rpsite table.rp-tn-cards > tbody > tr:has(> th) { display: none; }
    body #rpsite table.rp-tn-cards > tbody > tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 2px var(--space-sm);
        align-items: center;
        padding: var(--space-sm);
        margin: 0 0 var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
        box-sizing: border-box;
    }
    body #rpsite table.rp-tn-cards > tbody > tr > td {
        display: block;
        padding: 0;
        border: none;
    }
    body #rpsite table.rp-tn-cards td.rp-tn-check {
        grid-column: 1;
        grid-row: 1;
    }
    body #rpsite table.rp-tn-cards td.rp-tn-check input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }
    body #rpsite table.rp-tn-cards td.rp-tn-name {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
    }
    body #rpsite table.rp-tn-cards td[data-label] {
        grid-column: 1 / -1;
        display: flex;
        gap: var(--space-sm);
        justify-content: flex-start;
    }
    body #rpsite table.rp-tn-cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 5.5em;
        font-size: 0.7em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--mobile-text-muted);
        align-self: center;
    }

    /* Teilnehmerverwaltung: Block-Karten, volle Button-Breite, Labels umbrechen */
    body #rpsite table.teilnehmerverwaltung,
    body #rpsite table.teilnehmerverwaltung > tbody,
    body #rpsite table.teilnehmerverwaltung > tbody > tr,
    body #rpsite table.teilnehmerverwaltung > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    body #rpsite table.teilnehmerverwaltung > tbody > tr {
        margin: 0 0 var(--space-sm);
        padding: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
    }
    body #rpsite table.teilnehmerverwaltung input[type="button"].button {
        width: 100%;
        min-height: var(--touch-target-comfort);
        margin: var(--space-xs) 0 0;
        white-space: normal;
        box-sizing: border-box;
    }

    /* TinyMCE (#rpsite-scoped; nachrichten-Regel ist .nachrichten-editor-scoped) */
    body #rpsite .mce-tinymce,
    body #rpsite .mce-container,
    body #rpsite table.mceLayout {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Fraktion-Löschen-Button tappbar (float bleibt) */
    body #rpsite div.delFraktionBox a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target-comfort);
        min-height: var(--touch-target-comfort);
    }
    body #rpsite div.delFraktionBox img {
        width: 24px;
        height: 24px;
    }
}

/* ============================================================
 * Fertigkeiten-Seite (ajax/fertigkeiten.inc.php) — Mobile
 * ============================================================
 * Wrapper div.talenteBox. Tab-Nav (p.tab-nav, sticky Chip-Bar) und der
 * Phantom-Scroll-Clip (#content, oben um div.talenteBox erweitert) greifen
 * bereits global. Hier nur: die Karten-Controls auf das 44px-Touch-Target
 * anheben. body-Präfix, da css/{design}/antamarv41.css NACH dieser Datei
 * lädt (html_head_css.inc.php); border-box, damit min-height inkl. Padding
 * exakt 44px ergibt statt darüber hinauszuwachsen.
 * Skin-agnostisch über Tokens, nur in dieser Media-Query — Desktop unberührt.
 * ============================================================ */
@media (max-width: 770px) {

    /* Filter-Chips (Alle / Steigerbar / …, sonst ~30px) und Steigern-Buttons
       (+1 für X EP, Link .primary und deaktivierter Span .disabled, sonst
       ~38px) tappbar machen. */
    body .fertigkeiten-filter-btn,
    body .fertigkeit-steigern-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
        box-sizing: border-box;
    }
}

/* ============================================================
 * Heldinfo-Seite (ajax/heldinfo.inc.php) — Mobile (Held-Hub-Stil)
 * ============================================================
 * Wrapper div.heldinfoSeite (Desktop: text-align:center). Enthält 3 Tabellen:
 *   1) table.heldeninfoTabelle  — Stammdaten (4-Spalten, viele colspan)
 *   2) .heldinfo-ausruestung table — show_geruestet("held_info") (Zone/Name/Bild)
 *   3) .heldinfo-sonderf table     — zeige_sonderfertigkeiten (Kategorie/Links)
 * Labels stecken in <th> → reine CSS-Umformung, kein data-label nötig.
 *
 * Desktop bleibt unberührt: der Identitäts-Header (.heldinfo-mid) ist außerhalb
 * dieser Media-Query default display:none (siehe Default-Hidden-Block oben), die
 * Wrapper-Divs sind ohne eigenes Desktop-CSS inert. Alle Regeln body-präfigiert,
 * da css/{design}/antamarv41.css NACH dieser Datei lädt (html_head_css.inc.php).
 * Skin-agnostisch über die --mobile- und --space-Tokens.
 * ============================================================ */
@media (max-width: 770px) {

    /* Wrapper linksbündig (Desktop ist zentriert), volle Breite. */
    body div.heldinfoSeite {
        text-align: left;
    }

    /* Original-Titel-H2 ("Heldeninfo «…»", direkt vor der Stammdaten-Tabelle)
       ausblenden — Name steht jetzt im Identitäts-Header. Die "Erfolge"-H2
       bleibt sichtbar. */
    body div.heldinfoSeite h2:has(+ table.heldeninfoTabelle) {
        display: none;
    }

    /* === Identitäts-Header (Held-Hub-Optik) === */
    body div.heldinfoSeite .heldinfo-mid {
        display: block;
        text-align: left;
        margin-bottom: var(--space-md);
    }
    /* Name als Header-Titel — Skin-H2-Regeln (text-align/Größe) überstimmen. */
    body div.heldinfoSeite .heldinfo-mid .heldhub-name {
        margin: 0 0 2px;
        font-size: var(--mobile-font-h2);
        line-height: 1.2;
        color: var(--mobile-text);
        text-align: left;
    }
    body div.heldinfoSeite .heldinfo-mid-skull {
        height: 0.9em;
        vertical-align: -0.05em;
        filter: drop-shadow(0 0 2px #FEF1B9);
    }

    /* === Stammdaten → "Steckbrief"-Karte === */
    body div.heldinfoSeite table.heldeninfoTabelle {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--mobile-border-soft);
        border-radius: 8px;
        background: var(--mobile-surface-2);
        overflow: hidden;
    }
    body div.heldinfoSeite table.heldeninfoTabelle tbody {
        display: block;
    }
    /* Portrait/Wappen-Zeile (1.) und Name-Zeile (2.) verbergen — im Header. */
    body div.heldinfoSeite table.heldeninfoTabelle tr:first-child,
    body div.heldinfoSeite table.heldeninfoTabelle tr:nth-child(2) {
        display: none;
    }
    /* Leere Abstands-Zeilen (<th colspan="4"></th>) entfernen. */
    body div.heldinfoSeite table.heldeninfoTabelle tr:has(th:empty) {
        display: none;
    }
    /* Jede Zeile als umbrechende Label/Wert-Reihe. */
    body div.heldinfoSeite table.heldeninfoTabelle tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--space-sm);
        row-gap: 2px;
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    body div.heldinfoSeite table.heldeninfoTabelle tr:last-child {
        border-bottom: none;
    }
    body div.heldinfoSeite table.heldeninfoTabelle th,
    body div.heldinfoSeite table.heldeninfoTabelle td {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        text-align: left;
    }
    body div.heldinfoSeite table.heldeninfoTabelle th {
        flex: 0 0 auto;
        color: var(--mobile-text-soft);
        font-weight: 600;
    }
    body div.heldinfoSeite table.heldeninfoTabelle td {
        flex: 0 1 auto;
        min-width: 0;
        color: var(--mobile-text);
        word-break: break-word;
    }
    /* Echte Aktions-Links (keine .tip-Tooltips) tappbar machen. */
    body div.heldinfoSeite table.heldeninfoTabelle a:not(.tip) {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
    }
    /* "Zurück"-Zeile als vollbreiter Button. */
    body div.heldinfoSeite table.heldeninfoTabelle tr:last-child th {
        flex: 1 1 100%;
    }
    body div.heldinfoSeite table.heldeninfoTabelle tr:last-child a:not(.tip) {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        text-decoration: none;
    }

    /* === Ausrüstung → Bild-links-Karten === */
    body div.heldinfoSeite .heldinfo-ausruestung table,
    body div.heldinfoSeite .heldinfo-ausruestung tbody {
        display: block;
        width: 100%;
    }
    /* "Ausgerüstet"-Kopfzeile als Sektions-Überschrift. */
    body div.heldinfoSeite .heldinfo-ausruestung tr:first-child,
    body div.heldinfoSeite .heldinfo-ausruestung tr:first-child th {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        text-align: left;
    }
    body div.heldinfoSeite .heldinfo-ausruestung tr:first-child th {
        font-size: var(--mobile-font-h3);
        color: var(--mobile-text);
        padding: var(--space-md) 0 var(--space-sm);
    }
    /* Item-Zeilen: Bild links (Spalte 1, beide Zeilen), Zone+Name rechts. */
    body div.heldinfoSeite .heldinfo-ausruestung tr:not(:first-child) {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        column-gap: var(--space-sm);
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
    }
    body div.heldinfoSeite .heldinfo-ausruestung tr:not(:first-child) th,
    body div.heldinfoSeite .heldinfo-ausruestung tr:not(:first-child) td {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        text-align: left;
    }
    body div.heldinfoSeite .heldinfo-ausruestung tr:not(:first-child) td:last-child {
        grid-column: 1;
        grid-row: 1 / span 2;
        text-align: center;
    }
    body div.heldinfoSeite .heldinfo-ausruestung tr:not(:first-child) td:last-child img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
    }
    body div.heldinfoSeite .heldinfo-ausruestung tr:not(:first-child) th {
        grid-column: 2;
        grid-row: 1;
        color: var(--mobile-text-soft);
        font-size: 0.78em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    body div.heldinfoSeite .heldinfo-ausruestung tr:not(:first-child) td:first-of-type {
        grid-column: 2;
        grid-row: 2;
        color: var(--mobile-text);
    }

    /* === Sonderfertigkeiten → Kategorie-Subheadings + Chips === */
    body div.heldinfoSeite .heldinfo-sonderf table,
    body div.heldinfoSeite .heldinfo-sonderf tbody,
    body div.heldinfoSeite .heldinfo-sonderf tr,
    body div.heldinfoSeite .heldinfo-sonderf th {
        display: block;
        width: auto;
        padding: 0;
        border: none;
        background: transparent;
        text-align: left;
    }
    body div.heldinfoSeite .heldinfo-sonderf tr:first-child th {
        font-size: var(--mobile-font-h3);
        color: var(--mobile-text);
        padding: var(--space-md) 0 var(--space-sm);
    }
    body div.heldinfoSeite .heldinfo-sonderf tr:not(:first-child) th {
        color: var(--mobile-text-soft);
        font-weight: 600;
        margin: var(--space-sm) 0 var(--space-xs);
    }
    /* <br>-Trenner aufheben → Links als wrappende Chip-Reihe. */
    body div.heldinfoSeite .heldinfo-sonderf td br {
        display: none;
    }
    body div.heldinfoSeite .heldinfo-sonderf td {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        padding: 0;
        border: none;
        margin-bottom: var(--space-sm);
    }
    body div.heldinfoSeite .heldinfo-sonderf td a {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
        padding: 2px var(--space-sm);
        background: var(--mobile-chip-bg);
        border: 1px solid var(--mobile-border);
        border-radius: 999px;
        color: var(--mobile-text);
        font-size: 0.9em;
        text-decoration: none;
    }

    /* === Overflow-Sicherung === */
    /* table.main zählt sonst die min-content-Breite mit; nach dem Umbau bleibt
       zwar kein Überlauf, dies verhindert aber jeden Phantom-Scroll robust. */
    body:has(div.heldinfoSeite) #content {
        overflow-x: clip;
    }

    /* === Notizen (inline in #gameContent statt Popup) === */
    /* ajax/notizen.inc.php nutzt eine Textarea mit festem cols="50"; mobil
       würde das horizontal überlaufen. Auf volle Breite zwingen. */
    .notiz textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* === Spieler melden (user_melden.php) — wrapper-lose Vollseite === */
    /* Label/Wert-Tabelle stapeln, textarea cols="50" auf volle Breite zwingen
       (sonst horizontaler Überlauf, da #gameInnerBox mobil overflow:visible),
       Touch-Targets für Senden/Zurück. Analog zu .notiz textarea oben. */
    .user-melden table {
        width: 100%;
    }
    .user-melden th,
    .user-melden td {
        display: block;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }
    .user-melden textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .user-melden .button {
        min-height: var(--touch-target-min);
    }
    .user-melden th[colspan] a {
        display: inline-block;
        min-height: var(--touch-target-min);
        line-height: var(--touch-target-min);
    }
}

/* =====================================================================
   Gruppen-Ansicht (Gruppen-Heldenübersicht + Akkordeon/Chat)
   ---------------------------------------------------------------------
   Desktop ist ein Float-Konstrukt (Helden float:left, rechtes_menu/
   einladungen/gruppe_admin/gruppe_verlassen_box float:right). Auf Mobil
   kollidieren die Floats — u.a. zog "Gruppe verlassen" per margin-top:-15px
   in die Rollen-Auswahl (.rolle_wahl) des ersten Helden.
   Lösung: Box wird flex-wrap; Kinder per order neu sortiert; Helden als
   umbrechende Portrait-Kacheln, Aktionen als volle Zeilen. body-Präfix /
   #acc_gruppe-Scope hebt die Spezifität über General (lädt danach) und den
   bombast-Skin (lädt zuletzt).
   ===================================================================== */
@media (max-width: 770px) {
    /* ---- Mitglieder-Box ---- */
    body div.gruppe_heldenuebersicht {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        min-height: 0;
        margin: var(--space-sm) 0;
        padding: var(--space-sm);
        box-sizing: border-box;
        overflow: visible;            /* Anführer-Krone (top:-20px) nicht abschneiden */
    }

    /* Reihenfolge der Blöcke (float/clear sind an Flex-Items inaktiv) */
    body div.gruppe_heldenuebersicht div.rechtes_menu         { order: 1; }
    body div.gruppe_heldenuebersicht div.gruppenkasse_summe   { order: 1; } /* nach rechtes_menu (DOM), vor dem Grid */
    body div.gruppe_heldenuebersicht div.grp_helden_grid      { order: 2; }
    body div.gruppe_heldenuebersicht div.einladungen          { order: 3; }
    body div.gruppe_heldenuebersicht div.gruppe_admin         { order: 4; }
    body div.gruppe_heldenuebersicht div.gruppe_verlassen_box { order: 5; }
    body div.gruppe_heldenuebersicht_clear                    { display: none; }

    /* "Ausrüstung tauschen" / "Krone übernehmen": volle, mittige Zeile oben */
    body div.gruppe_heldenuebersicht div.rechtes_menu {
        float: none;
        flex: 1 1 100%;
        text-align: center;
        margin-bottom: var(--space-sm);
    }
    body div.gruppe_heldenuebersicht div.rechtes_menu a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
    }

    /* Karten-Grid nimmt die volle Breite; engere Spalten für kleine Screens.
       Karten-Innenleben (Flex-Spalte, Kachel, Namen-Kürzung) erbt aus der Basis. */
    body div.gruppe_heldenuebersicht div.grp_helden_grid {
        flex: 1 1 100%;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        justify-items: center;
        gap: var(--space-sm);
    }
    body div.gruppe_heldenuebersicht div.grp_held_ansicht {
        margin: 0;
        max-width: 140px;
        width: 100%;
    }
    /* Rollen-Auswahl als vollwertiges Touch-Element in der Kachel */
    body div.gruppe_heldenuebersicht div.rolle_wahl {
        max-width: none;
        margin-top: var(--space-xs);
    }
    body div.gruppe_heldenuebersicht div.rolle_wahl select {
        width: 100%;
        min-height: var(--touch-target-min);
    }

    /* Einladungen (nur Anführer): volle Breite unter den Helden */
    body div.gruppe_heldenuebersicht div.einladungen {
        float: none;
        clear: none;
        flex: 1 1 100%;
        max-width: none;
        margin: var(--space-sm) 0;
    }
    body div.gruppe_heldenuebersicht div.einladungen select {
        max-width: none;
        width: 100%;
        min-height: var(--touch-target-min);
    }
    body div.gruppe_heldenuebersicht div.einladungen input[type="submit"] {
        min-height: var(--touch-target-min);
        margin-top: var(--space-xs);
    }

    /* Testserver-Admin (nur DEBUG/QUEST_TEST): volle Breite, mittig */
    body div.gruppe_heldenuebersicht div.gruppe_admin {
        float: none;
        clear: none;
        flex: 1 1 100%;
        text-align: center;
    }

    /* "Gruppe verlassen": eigene, mittige Zeile, kein Negativ-Margin (Kern-Fix) */
    body div.gruppe_heldenuebersicht div.gruppe_verlassen_box {
        float: none;
        flex: 1 1 100%;
        margin-top: var(--space-sm);
        font-size: 100%;              /* 75% wäre als Tap-Ziel zu klein */
        text-align: center;
    }
    body div.gruppe_heldenuebersicht div.gruppe_verlassen_box a {
        display: inline-block;
        min-height: var(--touch-target-min);
        line-height: var(--touch-target-min);
    }

    /* ---- Akkordeon + Gruppen-Chat ---- */
    /* Header/Inhalt nicht über den Viewport schieben (Desktop: width:93% + margin:0 20px) */
    body #acc_gruppe .accordion_toggle2,
    body #acc_gruppe .accordion_content2 {
        width: auto;
        margin: 0;
        box-sizing: border-box;
    }
    /* Chat-Toggle-Button an mobile Header-Höhe (2em) anpassen + als Tap-Ziel verbreitern */
    body #acc_gruppe .accordion_toggle2 .chat-toggle-btn {
        line-height: 2em;
        min-width: var(--touch-target-min);
        text-align: center;
    }
    /* Chat- und Helden-Container volle Breite */
    body #chat_gruppe_wrapper,
    body #chat_gruppe,
    body #gruppe_helden_box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================
 * Ort-Übersicht (ort.inc.php) — Mobile
 * Tippbare Akkordeon-Köpfe (44px) + Row-Liste statt enger "Textwand".
 * Alle Regeln nur < 770px; Desktop bleibt unangetastet. Skin-adaptiv über Tokens.
 *
 * Scope-PFLICHT (sonst Cascade verloren): #accordion_container_ortsuebersicht
 * für Köpfe/Inhalt, .ort_uebersicht ul.ort_gebaeude für die Zeilen. Diese
 * ID/2-Klassen-Selektoren schlagen die SPÄTER ladenden .ort_gebaeude li
 * (antamarGebaeudeIcons.css) und ul.ort_gebaeude li (bombast/simple) OHNE !important.
 * Ladereihenfolge (html_head_css.inc.php): mobile_patterns(20) < General(21)
 * < GebaeudeIcons(23) < skin(25).
 * ============================================================ */
@media (max-width: 770px) {

    /* (a) Köpfe: 44px-Touch-Target statt ~30px-Desktop-Leiste. Descendant-Selektor,
       damit auch die verschachtelten Chat-/Mentoren-/Globchat-Toggles greifen.
       .taverne #accordion_container = Tavernenseite (taverne.inc.php) — gleiche Optik
       wie die Ortsübersicht. NICHT auf nacktes #accordion_container ausweiten: die ID
       teilen sich auch kerker.php, rp.php (rp-fr-N-Farbcodierung) und die
       Regiezna-Anzeigen (rathaus_anzeige_lesen.inc.php) mit jeweils eigener Optik. */
    body .taverne #accordion_container .accordion_toggle,
    body #accordion_container_ortsuebersicht .accordion_toggle {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        min-height: var(--touch-target-min);
        margin: var(--space-xs) 0 0;
        padding: var(--space-sm) var(--space-md);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 4px;
        color: var(--mobile-text);
        font-size: var(--mobile-font-h3);
        line-height: 1.3;
        overflow: hidden; /* Live-Chat-Teaser (s.u.) darf den Kopf nicht sprengen */
        cursor: pointer;
    }
    /* Chat-Köpfe tragen einen Live-Teaser-Span (#chat_ort_tl/#mchat_tl/#globchat_tl,
       Taverne: #chat_taverne_tl). Früher klippte ihn das feste height:30px +
       overflow:hidden; der flexible 44px-Kopf muss ihn explizit auf eine Zeile mit
       Ellipsis kürzen. */
    body .taverne #accordion_container .accordion_toggle > span[id$="_tl"],
    body #accordion_container_ortsuebersicht .accordion_toggle > span[id$="_tl"] {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* Auf/Zu-Affordanz rein per CSS — accordion-v10.js setzt accordion_toggle_active */
    body .taverne #accordion_container .accordion_toggle::after,
    body #accordion_container_ortsuebersicht .accordion_toggle::after {
        content: "\203A";
        margin-left: auto;
        opacity: 0.6;
        transition: transform var(--motion-fast) var(--motion-ease);
    }
    body .taverne #accordion_container .accordion_toggle.accordion_toggle_active::after,
    body #accordion_container_ortsuebersicht .accordion_toggle.accordion_toggle_active::after {
        transform: rotate(90deg);
    }

    /* (b) Inhalt bündig zum vollbreiten Kopf. Bombast/Pergament setzen margin:0 20px →
       sonst Kopf vollbreit, Liste 20px eingerückt (wirkt kaputt). overflow/max-height/
       opacity NICHT anfassen — daran hängt die Auf/Zu-Animation (VanillaAccordion). */
    body .taverne #accordion_container .accordion_content,
    body #accordion_container_ortsuebersicht .accordion_content {
        margin: 0;
        padding: 0 0 var(--space-sm);
        box-sizing: border-box;
    }

    /* (c) Linkliste → Row-Liste. Greift via .ort_uebersicht AUCH auf die
       "Wohin möchtest du"-Hauptliste (ul.ort_gebaeude.ort_hauptgebaeude) → konsistent. */
    body .ort_uebersicht ul.ort_gebaeude {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    body .ort_uebersicht ul.ort_hauptgebaeude {
        margin-left: 0; /* bombast/pergament setzen 30px */
    }
    body .ort_uebersicht ul.ort_gebaeude > li {
        margin: 0;
        padding: 0;
        border-bottom: 1px dotted var(--mobile-border-soft);
        background-position: var(--space-sm) center; /* Icon = LI-Hintergrund, linker Avatar */
        background-size: 28px;
        line-height: var(--mobile-line-height);
        overflow-wrap: break-word;
    }
    body .ort_uebersicht ul.ort_gebaeude > li:last-child {
        border-bottom: none;
    }

    /* (d) <a> = 44px-Touch-Target über die ganze Zeile; Titel oben, Meta darunter.
       Linkes Padding lässt Platz fürs Icon (einheitlich für ALLE Sektionen). KEIN
       Pro-Zeile-Chevron (wäre bei ~97 Einträgen Rauschen) — Affordanz via Accent + Trennlinien. */
    body .ort_uebersicht ul.ort_gebaeude > li > a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm) var(--space-xs) calc(28px + var(--space-sm) * 2);
        color: var(--mobile-accent);
        text-decoration: none;
        overflow-wrap: break-word;
    }
    body .ort_uebersicht ul.ort_gebaeude > li > a:active {
        background: var(--mobile-surface-2-hover);
    }

    /* (e) Klammer-Typ als gedämpfte 2. Zeile. .ort-meta = PHP-Hook (umschließt bei
       Tavernen auch das inline-<em>-Ambiente). Das direkte li>em deckt den Markt-Eintrag
       der Hauptliste ab (dort ist das <em> ein Sibling des <a>). */
    body .ort_uebersicht ul.ort_gebaeude .ort-meta,
    body .ort_uebersicht ul.ort_gebaeude > li > em {
        display: block;
        margin-top: 2px;
        font-size: 0.85em;
        font-weight: 400;
        font-style: normal;
        color: var(--mobile-text-soft);
    }

    /* (f) Nicht verlinkte Einträge ("… während der Arbeit nicht nutzbar", kein <a>):
       klar nicht-interaktiv, kein Tap-Look. :has() ist in dieser Datei bereits im Einsatz. */
    body .ort_uebersicht ul.ort_gebaeude > li:not(:has(a)) {
        display: flex;
        align-items: center;
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm) var(--space-xs) calc(28px + var(--space-sm) * 2);
        color: var(--mobile-text-soft);
        font-style: italic;
    }

    /* (g) "Weiterreisen" = design-eigener Vollbreit-CTA. Greift im belebten
       (ul.ort_gebaeude) UND unbelebten (ul.ort) Ort. Die fixbreiten PNG-Pfeile
       (weiter1/weiter2.png) stapelten sich sonst durch die generische flex-column-Regel
       (d). Farbe kommt aus skin-eigenen Tokens -> Bombast gold, Antamar/Classic rot,
       Pergament dunkelrot, Simple blau. Spezifitaet (0,3,4) schlaegt die generische
       ul.ort_gebaeude>li>a-Regel (0,2,4) und steht zudem spaeter in der Datei. */
    body .ort_uebersicht ul.ort_gebaeude > li.ort_weiterreisen,
    body .ort_uebersicht ul.ort > li.ort_weiterreisen {
        margin: var(--space-md) 0 var(--space-sm);
        padding: 0;
        border-bottom: none;
        background: none;            /* kein 28px-Icon-Avatar */
    }
    body .ort_uebersicht ul.ort_gebaeude > li.ort_weiterreisen > a,
    body .ort_uebersicht ul.ort > li.ort_weiterreisen > a {
        display: flex;
        flex-direction: row;         /* ueberschreibt column aus (d) */
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        width: 100%;
        min-height: var(--touch-target-comfort);   /* 48px */
        margin: 0;
        padding: var(--space-sm) var(--space-md);   /* ueberschreibt 28px-Icon-Padding */
        box-sizing: border-box;
        background: var(--mobile-accent);           /* Skin-Signaturfarbe */
        border: 1px solid var(--mobile-accent-strong);
        border-radius: 8px;
        color: var(--mobile-accent-contrast);       /* lesbarer Text auf Accent */
        font-weight: 700;
        font-size: 1.05em;
        text-align: center;
        text-decoration: none;
    }
    body .ort_uebersicht li.ort_weiterreisen > a:active {
        filter: brightness(0.92);    /* skin-agnostisches Press-Feedback */
    }
    /* fixbreite PNG-Pfeile auf Mobil aus -> skalierbares Glyph stattdessen */
    body .ort_uebersicht li.ort_weiterreisen > a img { display: none; }
    body .ort_uebersicht li.ort_weiterreisen > a::after {
        content: "\2192";            /* -> Pfeil, skaliert mit der Schrift */
        font-size: 1.15em;
        line-height: 1;
    }

    /* (h) Ortskopf: Kurzinfo-Block als Karte statt loser Fragmente. Rezeptur wie
       .ui-panel (antamarGeneral): deckende Fläche unabhängig vom Eltern-Hintergrund. */
    body #stadt_info_container .stadt_info {
        background-color: var(--mobile-body-bg);
        background-image: linear-gradient(var(--mobile-surface-2), var(--mobile-surface-2));
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-md);
        /* width:97% (antamarGeneral) ist content-box — plus Karten-Padding/Border
           sprengt das den Viewport (horizontaler Seiten-Scroll). */
        width: auto;
    }
    /* Wappen (Staat + Ort, je bis 80px inline-width) mobil als kompakte Zeile
       statt gestapelter Türme über dem Stadtbild. width überstimmt den
       Inline-Style (get_bild_html setzt width:80px). */
    body #stadt_info_wappen {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-xs) 0;
    }
    body #stadt_info_wappen img {
        width: 40px !important;
        height: auto;
    }
    body #stadt_info_wappen br { display: none; }

    /* (i) Tavernenseite (div.taverne, taverne.inc.php): Desktop floatet das
       Lokal-Bild rechts (Inline-Style width:50%) und zentriert den Text — mobil
       wird daraus eine zerrissene Flatterspalte. Bild vollbreit über den Text.
       Nur die DIREKTE Beschreibungs-Tabelle (.taverne > table) — die Tabellen der
       Tavernenspiele im #accordion_container dürfen ihre Bilder behalten. */
    body .taverne > table td { text-align: left; }
    body .taverne > table img {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        margin: 0 0 var(--space-sm);
        border-radius: 4px;
    }
    /* "Folgende Tische sind besetzt / Tisch N" (ajax/gruppe_anwesende_gruppen.inc.php,
       Intro ist nackter Textknoten): Desktop zentriert via display:table+margin:auto
       (antamarGeneral #anwesende_gruppen) — mobil als linksbündige, dezente Meta-Box. */
    body .taverne #anwesende_gruppen {
        display: block;
        margin: var(--space-sm) 0;
        padding: var(--space-sm) var(--space-md);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-very-soft);
        border-radius: 4px;
        text-align: left;
        color: var(--mobile-text-soft);
        font-size: 0.9em;
    }
    body .taverne #anwesende_gruppen div.tische ul {
        margin: var(--space-xs) 0 0;
        padding-left: 1.2em;
    }
}

/* ============================================================
 * Marktplatz — Touch-Affordance + Preis-Dialog
 * Eigenes @media (pointer:coarse),(max-width:770px): der Desktop-Playwright
 * meldet pointer:coarse nicht (Breitenkriterium faengt es ab), und diese
 * Regeln kaempfen gegen Inline-styles bzw. winzige Desktop-Inputbreiten.
 * ============================================================ */
@media (pointer: coarse), (max-width: 770px) {
    /* Kauf-/Aktions-Link ("kaufen" / "vom Stand nehmen") auf Touch sichtbar.
       Inline style="display:none" + JS-mouseout setzen display:none, daher
       !important. Das eigentliche Tap-Ziel ist die ganze .tobj-Card; das Label
       ist nur die sichtbare Affordance. */
    body div.transferContainer table.markttransfer .tobj .kaufen,
    body div.transferContainer table.transfer div.warencontainer_eigener_stand .kaufen {
        display: inline-block !important;
        margin-top: var(--space-xs);
        color: var(--mobile-accent);
        font-weight: 600;
        text-decoration: underline;
    }
    /* Der Preis-Dialog (mBox table.warentausch) wird bereits in
       antamarGeneralv97.css mobil aufbereitet (Touch-Inputs + Karten-Stapelung
       der Verkaufs-Variante via :has(input.gulden)). */
}

/* === Alchimistenlabor (alchimie.inc.php) — Mobil ===========================
   Rezeptkarten 1-spaltig; Brau-Button als breites Tap-Ziel. Das Grundlayout
   liegt in antamarGeneralv97.css (.alchimie-*).
   =========================================================================== */
@media (max-width: 770px) {
    .alchimie .alchimie-grid { grid-template-columns: 1fr; }
    .alchimie #alchimie-filter { max-width: none; }
    .alchimie .alchimie-card-foot .button.alchimie-brauen { flex: 1; }
}