/*
 * 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,
.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,
.heldinfo-mid { display: none; }

/* 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%;
        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-block;
        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;
    }

    /* ============================================================
     * 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;
    }

    /* ============================================================
     * 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.
     * ============================================================ */
    body div.RssTeaser,
    body div.loginIntro div.introText,
    body table.loginTable,
    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 1fr 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);
    }
    .heldenwechsel tr.hw-row-with-checkbox {
        grid-template-columns: 32px 64px 1fr 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;
    }
    .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 */
    .heldenwechsel 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;
    }
    .heldenwechsel 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;
    }

    /* Sektion-Card — Token-basierter Look (alle Designs identisch) */
    body .bank-section {
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }
    body .bank-section h3 {
        margin: 0 0 var(--space-sm);
        padding-bottom: var(--space-xs);
        border-bottom: 1px solid var(--mobile-border-very-soft);
        font-size: 1.05em;
    }
    body .bank-section h4 {
        margin: var(--space-sm) 0 var(--space-xs);
        font-size: 1em;
    }

    /* Kontoübersicht: 2-Spalten-Grid mit Stat-Cards */
    body .bank-overview .bank-balance {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    body .bank-overview .balance-item {
        padding: var(--space-sm);
        background: var(--mobile-body-bg);
        border: 1px solid var(--mobile-border-very-soft);
        border-radius: 6px;
        text-align: center;
        min-width: 0;
    }
    body .bank-overview .balance-label {
        font-size: 0.8em;
        color: var(--mobile-text-muted);
        line-height: 1.2;
    }
    body .bank-overview .balance-value {
        font-size: 1.1em;
        font-weight: 600;
        line-height: 1.2;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body .bank-overview .bank-info {
        font-size: 0.85em;
        color: var(--mobile-text-muted);
        margin: 0;
    }

    /* 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;
    }

    /* Kreditbrief Sub-Sektionen */
    body .bank-subsection {
        padding: var(--space-sm) 0;
        border-bottom: 1px solid var(--mobile-border-very-soft);
    }
    body .bank-subsection:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* 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 .bank-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;
}

/* ============================================================
 * 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 #accordion_container {
        column-count: 2;
        column-gap: 1.5em;
        column-rule: 1px dashed currentColor;
    }
    body #accordion_container .egiezna,
    body #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; }
    }

    /* ---------- FAB-Action-Overlays auf Mobile abschalten ----------
       Die ✓-Touch-Toggle-Mechanik aus initTouchOptimization() setzt
       body.show-fab-actions; auf Mobile soll diese Klasse keine Wirkung
       haben, weil TouchEquip + Tap-zum-Ablegen den Pfad übernehmen.
       Damit bleiben Item-Bilder frei sichtbar. */
    body.show-fab-actions .kampf_v2 .fab-action,
    body .kampf_v2 .fab-action {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ---------- 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: ""; }

    /* ---------- 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;
    }

    /* ---------- 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;
    }

    /* 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);
    }

    /* ============================================================
     * 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;
    }

    /* ---------- 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;
    }
}

/* ============================================================
 * 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);
    }
    body table.tableNachrichten th.form_inputs input.button {
        display: block;
        width: 100%;
        min-height: var(--touch-target-comfort);
        box-sizing: border-box;
        font-family: inherit;
        font-size: 1em;
        cursor: pointer;
    }

    /* "Zurück"-Link der Detailansicht als Chip-Tap-Target ---------- */
    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;
    }

    /* --- 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: inline margin-left:auto in der nowrap-Chip-Bar
       neutralisieren, sonst große Lücke. */
    body #rpsite .nachrichten-tabs .tab[style*="margin-left"] {
        margin-left: 0;
    }

    /* ---------- Übersicht: #rp_liste DataTable → Card-Liste ---------- */
    /* Generischen DataTables-Scroll-Schatten/Overflow aufheben
       (antamarGeneralv57.css ~2939/2970), analog #nachrichten_wrapper. */
    body #rp_liste_wrapper,
    body #rp_liste_wrapper table#rp_liste.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#rp_liste,
    body table#rp_liste > tbody {
        display: block;
        width: 100%;
        background: transparent;
        border: none;
    }
    /* Sortier-Header entfallen mobil — Default-Sort order:[[2,'desc']] bleibt */
    body table#rp_liste > thead { display: none; }

    /* DataTables-Bedienelemente touch-freundlich (wie #nachrichten_wrapper) */
    body #rp_liste_wrapper .dataTables_length,
    body #rp_liste_wrapper .dataTables_filter,
    body #rp_liste_wrapper .dataTables_info,
    body #rp_liste_wrapper .dataTables_paginate {
        display: block;
        width: 100%;
        float: none;
        text-align: left;
        margin: var(--space-xs) 0;
        box-sizing: border-box;
    }
    body #rp_liste_wrapper .dataTables_filter input {
        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 #rp_liste_wrapper .dataTables_length select {
        min-height: var(--touch-target-min);
        padding: var(--space-xs);
        font-family: inherit;
    }
    body #rp_liste_wrapper .dataTables_info {
        text-align: center;
        color: var(--mobile-text-muted);
        font-size: 0.85em;
    }
    body #rp_liste_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xs);
        padding-top: var(--space-xs);
    }
    body #rp_liste_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;
    }

    /* Zeile → Card (width:auto !important hebt DataTables-Inline-Breiten auf) */
    body table#rp_liste > tbody > tr.mobile-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-sm);
        row-gap: 2px;
        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#rp_liste > tbody > tr.mobile-card > td {
        display: block;
        width: auto !important;
        padding: 0;
        border: none;
        background: transparent;
        white-space: normal;
        text-align: left;
    }
    body table#rp_liste td.rp-titel {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
        word-break: break-word;
    }
    body table#rp_liste td.rp-titel a {
        display: block;
        min-height: var(--touch-target-min);
        color: var(--mobile-text);
        text-decoration: none;
        line-height: 1.3;
    }
    body table#rp_liste td.rp-teiln {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-size: 0.85em;
        color: var(--mobile-text-soft);
        white-space: nowrap;
    }
    body table#rp_liste td.rp-teiln::before { content: "👥 "; }
    body table#rp_liste td.rp-meister {
        grid-column: 1;
        grid-row: 2;
        font-size: 0.85em;
        color: var(--mobile-text-soft);
    }
    body table#rp_liste td.rp-seit {
        grid-column: 1;
        grid-row: 3;
        font-size: 0.8em;
        color: var(--mobile-text-muted);
    }

    /* ---------- View-Modus: rpInfoTable block-stapeln ---------- */
    body #rpsite table.rpInfoTable,
    body #rpsite table.rpInfoTable > tbody,
    body #rpsite table.rpInfoTable > tbody > tr {
        display: block;
        width: 100%;
    }
    body #rpsite table.rpInfoTable > tbody > tr > th,
    body #rpsite table.rpInfoTable > tbody > tr > td {
        display: block;
        width: auto;
        min-width: 0;
        text-align: left;
        padding: var(--space-xs) 0;
        box-sizing: border-box;
    }
    body #rpsite table.rpInfoTable > tbody > tr > th {
        font-weight: 600;
        color: var(--mobile-text-soft);
    }
    body #rpsite table.rpInfoTable th.rp_title {
        text-align: center;
        font-size: 130%;
        line-height: 1.3;
    }

    /* Collapsible-Toggles: nur Touch-Target (toggleSection-JS unverändert) */
    body #rpsite table.rpInfoTable td > strong[onclick^="toggleSection"],
    body #rpsite .rpKommBox > strong[onclick^="toggleSection"] {
        display: block;
        min-height: var(--touch-target-comfort);
        padding: var(--space-xs) 0;
        line-height: var(--touch-target-comfort);
    }

    /* Chat-Box + Fraktions-Interna voll-breit, kein Overflow */
    body #rpsite div.rpKommBox {
        width: 100%;
        margin: var(--space-lg) 0 var(--space-md);
        box-sizing: border-box;
    }
    body #rpsite .rpKommBox .fr_interna {
        width: 100%;
        box-sizing: border-box;
        box-shadow: none;
        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: Forms stapeln ---------- */
    body #rpsite fieldset {
        width: auto;
        max-width: 100%;
        margin: 0 0 var(--space-md);
        box-sizing: border-box;
    }
    body #rpsite .fraktionenContainer { margin-top: var(--space-lg); }
    body #rpsite .fraktionenContainer .fraktionBox,
    body #rpsite .fraktionenContainer .fraktionNewBox {
        width: auto;
        max-width: 100%;
        display: block;
        margin: 0 0 var(--space-md);
        box-sizing: border-box;
    }
    body #rpsite .fraktionenContainer fieldset {
        width: auto;
        max-width: 100%;
    }

    /* Inputs/Textareas voll-breit — Checkbox ausgenommen
       (sonst brechen teilnehmer[] / flg_* Checkboxen) */
    body #rpsite .input_long,
    body #rpsite .input_text,
    body #rpsite .fraktionenContainer .input_long,
    body #rpsite fieldset input[type="text"],
    body #rpsite fieldset input[type="file"],
    body #rpsite fieldset select,
    body #rpsite fieldset textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: var(--touch-target-min);
    }
    body #rpsite fieldset textarea { min-height: 6em; }
    body #rpsite fieldset input[type="submit"],
    body #rpsite fieldset .button {
        width: 100%;
        min-height: var(--touch-target-comfort);
        box-sizing: border-box;
    }
    body #rpsite fieldset 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.grp_held_ansicht     { 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);
    }

    /* Helden als umbrechende, zentrierte Portrait-Kacheln */
    body div.gruppe_heldenuebersicht div.grp_held_ansicht {
        float: none;
        flex: 0 0 auto;
        margin: var(--space-sm);
        max-width: 120px;
    }
    /* 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. */
    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).
       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 #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 #accordion_container_ortsuebersicht .accordion_toggle::after {
        content: "\203A";
        margin-left: auto;
        opacity: 0.6;
        transition: transform var(--motion-fast) var(--motion-ease);
    }
    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 #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;
    }
}