.game { text-align: center; position:relative; }
.game img { margin:5px; }
.game .kampf img { margin: 0; }
.game table { margin: 10px auto; clear:both; height:auto; border-collapse:collapse; }

acronym { cursor:help; border-bottom:1px dotted; }
.klein { font-size: 75%; }
.gross { font-size: 110%; font-weight: bold; }
.green { color: #00A100; }
.red { color: #F00; }
.ooc { font-style: italic; color: #323D4F; }
.nobr { white-space: nowrap; }
.error { font-weight: bold; color: red; }
.success { font-weight: bold; color: green; }
div.error { font-weight: bold; color: #444444; background-color: #FF1E1E; border: 1px dotted #444444; padding: 5px; margin: 10px; }
div.warning { font-weight: bold; color: #444444; background-color: #FFFFE0; border: 1px dotted #444444; padding: 5px; margin: 10px; }
img.max_50_50 { margin:0; max-width:50px; max-height:50px; }
img.max_60_60 { margin:0; max-width:60px; max-height:60px; }
img.max_75_75 { margin:0; max-width:75px; max-height:75px; }
img.width_75px { margin: 0; width: 75px; }
img.max_100_100 { margin:0; max-width:100px; max-height:100px; }
img.max_200_200 { margin:0; max-width:200px; max-height:200px; }
img.max_500_500 { margin:0; max-width:500px; max-height:500px; }
img.verwundet { width:12px; height:12px; margin:0; padding:0; }
img.float_left { float: left; max-width: 40%;}
.spinner-img { background: url(../bilder/loading.svg) no-repeat center transparent; height:30px; width:30px; }

/* mBox.Notice: Textfarbe aus dem Skin-Token (siehe css/antamar_mbox.css).
   Früher hart #fff — auf hellen Skins (Antamar/Simple) unsichtbar. */
.mBox.Notice .mBoxContent,
.mBox.Notice .mBoxContent p,
.mBox.Notice .mBoxContent span,
.mBox.Notice .mBoxContent div {
    color: var(--mobile-text);
}

/* Kräutersuche Spezial-Dialog (Alraune) */
.kraeutersuche_spezial_buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Formulare und Inputfelder */
.input { width: 150px; background-color: #fff; border: 1px solid #000; color: #000; }
.input_long { width: 450px; background-color: #fff; border: 1px solid #000; color: #000; }
.input_text { width: 250px; background-color: #fff; border: 1px solid #402C13; color: #402C13; }
.input_zahl { width: 40px;  background-color: #e7e7e7; border: 1px solid #402C13; color: #402C13; }

/* OOC bzw. OOG in AOQML */
.zb { text-align: left; padding: 0; margin: 0; }
.quest { text-align: left; padding: 1em; }
.aoqml .oog {
  background: url(../bilder/ooc.png) no-repeat top center #fff4df;
  color: #402C13;
  margin: 3px 0 3px 5px;
  padding: 22px 10px 10px 10px;
  border: 1px solid black;
  text-align: justify;
  max-width: 1024px;
}
.aoqml_clear { clear: both; }
.exception_details { font-size: 80%; }
map .infoonly { cursor: help; } 
.aoqml .npcinfos { background-color: #fff4df; color: #402C13; padding: 10px; margin:0; border: 1px solid #402C13; }
.aoqml .npcinfos h2 { text-align: left; }
.scene_protocol { margin-top: 20px; text-align: left; }
.scene_protocol_group { margin-top: 30px; border-top: 1px solid #ABABAB; text-align: left; }




/* technische Infos */
span.cmd { font-family: "Courier New", Arial, sans-serif; font-size: 0.9em; }

/* Teaser */
span.teaser_points { padding: 0 3px; }

/* Wegweiser und (Welt-/Detail-)Karte */
#wegweiserMapContainer { margin: 2px auto 15px auto; text-align: center; min-width: 400px; min-height: 400px; }
#wegweiserMapContainer img { margin: 0; }

/* im Chat */
.AOChatBox .settings { float:right; height:24px; border:1px solid transparent; opacity:0.7; margin:0 0 4px 0; }
.AOChatBox .settings_hl { opacity: 1.0; cursor: pointer; }
.verwundet_chat { overflow: visible; }
.verwundet_chat img { margin: 0; }

/* Lange Nachrichten ohne Leerzeichen (URLs/Zeichenketten) umbrechen, statt die
   auto-Layout-Spalte von table.main (kein table-layout:fixed, Mantis #1229) und
   damit die ganze Spielspalte aufzuziehen. Gilt Desktop + Mobil.
   overflow-wrap:anywhere schrumpft die min-content-Breite (break-word allein nicht),
   gleiches Muster wie div#ulist. */
.aoChatMessage .text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Live-Teaser (letzte Nachricht) im Akkordeon-Kopf der Chats (#chat_ort_tl, #mchat_tl,
   #globchat_tl, #chat_taverne_tl, #ordenshallengeplauder_tl). Auch nach der harten
   Laengenbegrenzung in aochat.modules.js (headlineModule, MAX_TEASER) kann ein
   umbruchloser Token den Kopf — und damit die table-layout:auto-Spielspalte — aufziehen;
   anywhere laesst ihn umbrechen statt die Spalte zu sprengen. Mobil greift stattdessen
   die Ellipsis-Regel in antamar_mobile_patterns.css (hoehere Spezifitaet). */
.accordion_toggle > span[id$="_tl"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Usernamen im Chat */
.aoChatMessage .user a { font-weight: bold; }
#mentorenchat .neuling { color: orange; }
#mentorenchat .mentor { color: #5045E5; }
#globchat .utip { color: #5045E5; }

/* Highlight wenn eigener Name erwähnt wird */
.chat_highlight{
    font-weight: bold;
    background-color: rgba(255, 115, 0, 0.25);
}

/* === Chat: eigene Nachrichten löschen === */
.aoChatMessage { position: relative; }

/* Papierkorb-Icon, Desktop: per Hover eingeblendet */
.aoChatDeleteIcon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;                   /* Trefferfläche; sichtbares Symbol 20px (Mask) */
    height: 28px;
    /* Trash-Symbol per CSS-Mask einfärben: currentColor passt sich hellen
       und dunklen Chat-Themes automatisch an */
    background-color: currentColor;
    -webkit-mask: url(../bilder/icons/trash.svg) center / 20px 20px no-repeat;
    mask: url(../bilder/icons/trash.svg) center / 20px 20px no-repeat;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.1s ease;
}
.aoChatMessage:hover .aoChatDeleteIcon { opacity: 0.9; }
.aoChatDeleteIcon:hover { opacity: 1; transform: translateY(-50%) scale(1.15); }
.aoChatMessage.aoChatDeletable { padding-right: 32px; }
.aoChatMessage.aoChatConfirming .aoChatDeleteIcon { display: none; }

/* Inline-Rückfrage "Löschen? Ja Nein" */
.aoChatMessage.aoChatConfirming { background-color: rgba(255, 115, 0, 0.12); }
.aoChatDeleteConfirm {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85em;
    white-space: nowrap;
    background: rgba(255, 244, 223, 0.97);
    border: 1px solid #d3913c;
    border-radius: 3px;
    padding: 1px 5px;
}
.aoChatDeleteConfirm a { cursor: pointer; text-decoration: underline; padding: 0 3px; }
.aoChatDeleteConfirm .aoChatDeleteYes { color: #9a2e2e; font-weight: bold; }
.aoChatDeleteConfirm .aoChatDeleteNo { color: #402c13; }
.aoChatMessage.aoChatDeletePending { opacity: 0.5; pointer-events: none; }

/* gelöschte Nachricht: an gleicher Stelle, dezent ausgegraut */
.aoChatMessage.aoChatDeleted .text { font-style: italic; color: #8a8a8a; }
.aoChatMessage.aoChatDeleted .user a,
.aoChatMessage.aoChatDeleted .user { font-weight: normal; opacity: 0.7; }

/* Touch-Geräte: kein Hover-Icon, Bedienung per langem Drücken.
   Nach 500ms Long-Press setzt aochat.modules.js die Klasse .aoChatLongPressed —
   dann wird das Icon sichtbar und die Nachricht kann gelöscht werden. */
@media (pointer: coarse) {
    .aoChatMessage:hover .aoChatDeleteIcon { opacity: 0; }
    .aoChatMessage.aoChatLongPressed .aoChatDeleteIcon { opacity: 1; }
    .aoChatMessage.aoChatLongPressed { padding-right: 32px; }
    .aoChatMessage.aoChatDeletable {
        padding-right: 0;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .aoChatDeleteConfirm { font-size: 0.95em; padding: 3px 7px; }
}

/* resizable Area für den Chat */
.grippie {
  background: #EEEEEE url(../ext/elementResizable/images/grippie.png) no-repeat scroll center;
  border-color: #DDDDDD;
  border-style: solid;
  border-width: 0 1px 1px;
  cursor: s-resize;
  height: 9px;
  overflow: hidden;
  width: 100%;
}

/**
 * Login-Seite
 */
form.loginForm { text-align: center; margin: auto; font-size:1.0em; }
form.loginForm div.introText { margin: 10px auto; text-align: left; max-width: 810px; }
form.loginForm div.registerBox { margin-bottom: 30px; }
form.loginForm div.loginTableBox { text-align: center; margin: auto; max-width: 800px; }
form.loginForm div.loginTableBox  table { clear: none; max-width: 800px; }
form.loginForm div.mobileHint { margin:10px auto; color: #444444; background-color: #FFFFE0; border: 1px dotted #444444; padding: 5px; min-width: 600px; max-width: 800px; }
form.loginForm td.fb { background-color: #ffffff; text-align: center; padding: 10px; }
div.loginImage { float: right; }
div.introImg img{ float: left; max-width: 12%; padding-right: 1em; filter: drop-shadow(0px 0px 2px #FEF1B9); }
div.createAccImage img{ float: right; max-width: 50%}
form.loginForm.createAcc { text-align: left; }

@media (max-width: 770px) {
  div.loginTableBox { width: 100%; }
  form.loginForm input {
    font-size: var(--mobile-font-base);
    line-height: var(--mobile-line-height);
    min-height: var(--touch-target-min);
    width: 100%; max-width: 100%; box-sizing: border-box;
  }
  form.loginForm input.button {
    width: auto; max-width: 100%;
    min-height: var(--touch-target-min);
    font-size: var(--mobile-font-base);
  }
  form.loginForm select {
    font-size: var(--mobile-font-base);
    min-height: var(--touch-target-min);
    width: 100%; max-width: 100%; box-sizing: border-box;
  }
  div#ulist { line-height: 1.1em; word-break: break-word; overflow-wrap: anywhere; }
  div.loginImage { float: none; }
  div.loginImage img { max-width: 100%; height: auto; }
  div.createAccImage img{ float: none; max-width: 100%; margin: 0 auto; padding-bottom: 0.5em;}
  form.loginForm.createAcc { text-align: center; }
}

/* Karte auf mobiler Breite anpassen — eigener Block, damit er zuverlässig im
 * viewport-basierten max-width greift (statt am deprecated max-device-width zu hängen).
 * Hauptregeln stehen in antamar_leaflet.css; dies hier ist das Fallback für ältere
 * Pfade, in denen antamar_leaflet.css noch nicht geladen ist. */
@media (max-width: 770px) {
  #wegweiserMapContainer { min-width: auto; max-width: 100%; }
}

/* Copyrightinfo fuer Chat-Sounddateien */
div#sound_cc_info { font-size: 80%; }

/* Heldinfo und Heldwerte */
div#heldeninfo a.link_steigern { padding-left: 3px; cursor: pointer; }
div#heldeninfo span.waffe_rechts img { max-width:100px; }
div#heldeninfo span.waffe_links img { max-width:100px; }
div#heldeninfo span.waffe_rechts,
div#heldeninfo span.waffe_links { position: relative; display: inline-block; }
div#heldeninfo .qualitaets-badge {
    position: absolute;
    bottom: 2px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* Ein-/Ausklappen von Stadtinfos */
div.toggle_stadtinfos { float: right; width: 20px; height: 20px; overflow: hidden; margin: -26px 10px 0 0; } /* nach oben verschieben */
div.ort_uebersicht { margin-top: 15px; }

/* Gepäckansicht (Seite Ausrüstung) */
table.gepaeckansicht td.ware_bild, table.gepaeckansicht td.zustand, table.gepaeckansicht td.menge, table.gepaeckansicht td.benutzen, table.gepaeckansicht td.wegwerfen { text-align: center; }
table.gepaeckansicht td.ware_bild, table.gepaeckansicht td.preis { width: 50px; }
table.gepaeckansicht td.beschreibung { text-align: left; }
table.gepaeckansicht td.gewicht, table.gepaeckansicht td.preis { text-align: right; }
table.gepaeckansicht td.wegwerfen img,
table.gepaeckansicht th a img { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)); transition: filter 0.2s ease; }
table.gepaeckansicht td.wegwerfen a:hover img,
table.gepaeckansicht th a:hover img { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); }
table.gepaeckansicht td.ware_bild { position: relative; }
table.gepaeckansicht .qualitaets-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
table.gepaeckansicht .qualitaets-badge-bereich {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
}
table.gepaeckansicht .qualitaets-badge-bereich .qb-min,
table.gepaeckansicht .qualitaets-badge-bereich .qb-max {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
/* Qualitaets-Badges auf der Kampfseite (Waffen anlegen) */
table.nahwaffen .dragable { position: relative; }
table.nahwaffen .qualitaets-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
table.handelsfunktion { margin-top:30px; }

/**
 * Ort
 */
div.stadt_info { text-align: center; width: 97%; margin: auto; }

div.stadt_info table { text-align: left; margin-left: auto; margin-right: auto; } /*Tabelle zentrieren*/

/**
 * Questtagebuch
 */
div.questtagebuch { margin: auto; text-align: center; }
div.questtagebuch h3 { margin: 20px 0 8px 0; }
div.questtagebuch h3 small { font-size: 80%; }
div.questtagebuch p { text-align: left; margin-bottom: 15px; }
div.questtagebuch h3 .admin { visibility: hidden; }
div.questtagebuch h3.highlighted .admin { visibility: visible; }
div.questtagebuch h3.highlighted img { margin-left: 5px; }

/* Multi-Delete Toolbar */
div.questtagebuch .questnotes_actions { text-align: center; margin: 15px 0; }
div.questtagebuch .questnotes_actions a { color: #666; font-size: 90%; }

div.questtagebuch .questnotes_toolbar {
    background: #f5f5dc;
    border: 1px solid #c0a080;
    border-radius: 4px;
    padding: 10px 15px;
    margin: 15px auto;
    max-width: 500px;
    text-align: center;
}
div.questtagebuch .questnotes_toolbar .toolbar_controls { display: block; margin-bottom: 10px; }
div.questtagebuch .questnotes_toolbar button { margin: 0 5px; padding: 5px 15px; cursor: pointer; }
div.questtagebuch .questnotes_toolbar #btn_delete_selected { background: #c44; color: white; border: 1px solid #933; }
div.questtagebuch .questnotes_toolbar #btn_delete_selected:disabled { background: #999; cursor: not-allowed; }
div.questtagebuch .questnotes_toolbar #btn_cancel_multiselect { background: #eee; border: 1px solid #ccc; }
div.questtagebuch .multiselect_checkbox { margin-right: 8px; }
div.questtagebuch .multiselect_checkbox input { width: 16px; height: 16px; cursor: pointer; }

/* Intro-Text */
div.questtagebuch .intro {
    display: block;
    margin: 10px auto 20px auto;
    font-style: italic;
    opacity: 0.8;
}

/* Heldenbilder Container */
div.questtagebuch .heldbilder {
    margin: 15px auto 25px auto;
}
div.questtagebuch .heldbilder img {
    margin: 0 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Quest-Trenner */
div.questtagebuch hr {
    margin: 20px auto;
    border: none;
    border-top: 1px solid #c0a080;
    width: 80%;
}

/* Quest-Inhalte Container */
div.questtagebuch .questinfos {
    max-width: 700px;
    margin: 20px auto;
}

/* Zurück-Link */
div.questtagebuch .zurueck {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

/**
 * Gruppenzeug
 */
#anwesende_gruppen { display: table; margin: auto; text-align: left; }

#acc_gruppe { text-align: center; margin: auto; }

div.gruppe_verwaltung_box { margin: 10px 0 20px 0; text-align: center; }
div.gruppe_verwaltung_box div.einladungen { margin-bottom: 20px; }

div.gruppe_szene { margin: 10px; background-color: white; color: black; padding: 10px; font-size: 1.0em; line-height: 1.2em; border: 1px solid black; text-align: left; }
div.gruppe_szene img.burglaryPreparationImg { float: right; margin: 0 0 0 30px; max-width: 45%; }
div.gruppe_szene div.dynamische_infos { margin-left: 30px; margin-bottom: 30px; }
div.gruppe_szene div.dynamische_infos p { line-height: 100%; }
div.gruppe_szene div.img_clear { clear: both; }
div.gruppe_szene p.aktion_abbrechen { margin-top: 30px; }

div.gruppe_verwaltung_box div.einladungen ul { list-style-type: none; margin: 0; padding: 0; }

div.gruppe_heldenuebersicht { overflow: hidden; min-height: 150px; margin: 10px 13px 10px 0; padding: 10px; border: 1px solid black; background-color: #DB9D4A; color: black; }
div.gruppe_heldenuebersicht img { margin: 0; } /* wichtig um den Standardrand von 5px bei den Bildern wegzubekommen */
div.gruppe_heldenuebersicht div.anfuehrer { position: relative; top: -20px; left: -10px; height: 0; width: 0; overflow: visible; }
div.gruppe_heldenuebersicht div.grp_held_ansicht { float: left; text-align: center; margin-left: 25px; margin-right: 10px; max-width: 120px;}
div.gruppe_heldenuebersicht div.grp_held_ansicht div.grp_held_img { margin-bottom: 3px; height: 100px; width: 100px; padding: 0; z-index: 1; text-align: left; background-size: contain; }
div.gruppe_heldenuebersicht div.grp_held_ansicht div.verwundet { position: relative; top: 83px; left: 85px; }
div.gruppe_heldenuebersicht div.grp_held_ansicht div.balken { margin: auto; width: 100px; padding-bottom: 5px; }
div.gruppe_heldenuebersicht div.grp_held_ansicht div.grp_held_name { margin: auto; font-size: 80%; line-height: 100%; font-weight: bold; text-align:left; }
div.gruppe_heldenuebersicht div.held_not_here { color: red; font-weight: bold; font-size: 75%; font-style: italic; }

div.gruppe_heldenuebersicht div.rolle_wahl { margin-top: 5px; max-width: 200px; }
div.gruppe_heldenuebersicht div.rechtes_menu { float: right; text-align: right; }
div.gruppe_heldenuebersicht div.gruppe_admin { clear:right; float: right; text-align:right; }
div.gruppe_heldenuebersicht div.gruppe_verlassen_box { float: right; margin-top: -15px; font-style: italic; font-size: 75%; overflow: visible; }

div.gruppe_heldenuebersicht div.einladungen { clear: right; float: right; max-width: 300px; margin: 10px 0 30px 20px; }
div.gruppe_heldenuebersicht div.einladungen div.neu_einladen { margin-top: 10px; }
div.gruppe_heldenuebersicht div.einladungen span.eingeladener_held_woanders { font-size: 75%; }
div.gruppe_heldenuebersicht div.einladungen span.einladung_z { padding-left: 5px; }
div.gruppe_heldenuebersicht div.einladungen select { max-width: 200px; }

div.gruppe_heldenuebersicht_clear { clear: left; }

/**
 * Gruppenproben
 */
div.gruppe_probe { text-align: left; max-width: 500px; border: 1px solid black; background-color: #e6ad59; padding: 7px; margin: 5px; }
div.gruppe_probe .heroRepresent { float: left; width: 140px; margin-right: 5px; font-size: 85%; }
div.gruppe_probe .held_probe_clear { clear: left; }
table.gruppe_probe_ausgang td.summe_fep { text-align: right; font-weight: bold; }
table.gruppe_probe_ausgang td.success { color: green; }
table.gruppe_probe_ausgang td.failure { color: red; }
div.zb_protokoll_held { float: left; margin: 5px 5px 0 0; min-width: 100px; text-align: left; }
div.zb_protokoll_clear { clear: left; }

/**
 * Countdown in AOQML
 */
.aoqml .countdown { color: #312B2B; background-color: #FFFFE0; border: 1px dotted #444444; padding: 5px; margin: 10px; max-width: 400px; text-align: center; }

/* Gedichte-Quest */
.aoqml .gedicht q { line-height:100%; }
.aoqml .gedicht .oog { margin: 30px 0 30px 0; max-width: 500px; text-align: left; }

/**
 * Einstellungen
 */
div.einstellungen { text-align: center; }
div.einstellungen table { margin: auto; text-align: left; }
div.einstellungen th { text-align: center; }
div.einstellungen th.right { text-align: right; }
div.einstellungen td { text-align: left; }
div.einstellungen input.input_longer { width: 250px; margin: 0; border: 1px solid black; }
div.einstellungen table.heldenwechsel td { border: 0; }
table.zb_beute_table td { vertical-align: top; border-style: none; }
table.zb_beute_table td.chkbox { vertical-align: top; text-align: right; min-width: 30px; padding-top: 5px; }
table.zb_beute_table td img { margin: 0 2px 0 0; }
div.zb_beute_nicht_aufgenommen { color: #ecb200; /*orange*/ background-color: white; padding: 3px; margin: 0 8px 0 8px; max-width: 400px; font-size: 80%; }

/* Tab-Navigation - einheitliches Design für alle Bereiche */
p.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 0 15px 0;
    padding: 0;
}
p.tab-nav a,
p.tab-nav span.aktiv {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #402C13;
    border-radius: 4px;
    text-decoration: none;
    color: #402C13;
    background-color: #fff4df;
    transition: all 0.2s ease;
}
p.tab-nav a:hover {
    background-color: #f0e6cf;
    border-color: #2a1c0d;
}
p.tab-nav span.aktiv {
    background-color: #402C13;
    color: #fff4df;
    font-weight: bold;
}

/* Einstellungen Feedback-Meldungen */
div.einstellungen .rueckmeldung {
    max-width: 500px;
    margin: 15px auto;
    padding: 12px 20px;
    border-radius: 4px;
    text-align: center;
    animation: einstellungenFadeIn 0.3s ease-in;
}
div.einstellungen .rueckmeldung.success {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}
div.einstellungen .rueckmeldung.error {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}
@keyframes einstellungenFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Einstellungen Speicher-Button - nutzt Skin-Styling, nur Layout-Anpassungen */
div.einstellungen input[type="submit"].button,
div.einstellungen button.button {
    margin-top: 15px;
    padding: 8px 20px;
}

/* Einstellungen Fieldsets */
div.einstellungen fieldset {
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 15px 20px;
    margin: 20px auto;
    max-width: 600px;
    text-align: left;
    opacity: 0.9;
}
div.einstellungen fieldset legend {
    padding: 0 10px;
    font-weight: bold;
    font-size: 1.1em;
}
div.einstellungen fieldset table {
    width: 100%;
}

/* ZB-Beute Presets - nutzt Skin-Button-Styling */
div.einstellungen .zb-presets {
    margin: 10px 0 15px 0;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}
div.einstellungen .zb-presets span {
    margin-right: 10px;
}
div.einstellungen .zb-presets button {
    margin: 5px;
}

/* Passwort-Validierung Feedback */
div.einstellungen #pw_feedback {
    margin-top: 5px;
    font-size: 0.9em;
    min-height: 1.2em;
}
div.einstellungen #pw_feedback.valid {
    color: #28a745;
}
div.einstellungen #pw_feedback.invalid {
    color: #dc3545;
}

/* Heldwechsel Tipps */
#HinweisText1 { font-style: italic; }

/**
 * Heldinfo
 */
div.heldinfoSeite { text-align:center; padding:0 10px; }
div.heldinfoSeite table td { text-align:left; }
div.heldinfoSeite .helptextBox { margin: 10px auto 30px; width: 400px; text-align: left; background-color: #fff4df; color: #402C13; padding: 10px; border: 1px solid black; }
div.heldinfoSeite .helptext { padding-left:20px; background: url(../bilder/info.png) no-repeat 0 2px transparent; font-family: Palatino Linotype, Book Antiqua, Palatino, serif; font-style: italic; }


/**
 * Heldenbrief (Heldendokument)
 */
div.heldenbrief_selektor { margin: auto; margin-bottom: 15px; }
div.heldenbrief_selektor span.ohne_umbruch{ white-space: nowrap; }
div.heldenbrief_selektor input { padding: 0; margin: 7px 0 0 10px; }
div.heldenbrief_druckansicht { margin-bottom: 10px; }
div.heldenbrief { margin:auto; text-align: left; width:600px; border:1px solid black; background-color:white; color:black; padding:20px; }
div.heldenbrief div.orden { margin: 20px 0; text-align: center; }
div.heldenbrief h1 { margin: 6px; text-align: center; }
div.heldenbrief h2 { margin: 30px 0 5px 0; text-align: center; font-size: 125%; color: #201818; font-family: Verdana, Arial, sans-serif; text-decoration: underline; }
div.heldenbrief table { width: 100%; background-color:white; color:black; margin: 5px 0 0 0; padding: 0; }
div.heldenbrief table td { background-color: white; vertical-align: top; }
div.heldenbrief td.generelles div { margin-top: 5px; }
div.heldenbrief td.generelles label { float: left; margin-right: 10px; width: 100px; text-align: right; }
div.heldenbrief td.generelles span { text-align: left; font-weight: bold; }
div.heldenbrief td.eigenschaften, div.heldenbrief td.eigenschaft { font-weight:bold;  }
div.heldenbrief td.portrait, div.heldenbrief td.wappen { width: 150px; text-align: center; }
div.heldenbrief table.vierer th { width: 220px; }
div.heldenbrief table.sechser th { width: 150px; }
div.heldenbrief div.sf_text { text-align: justify; }
div.heldenbrief div.waffe_weitere_infos { margin-top: 7px; padding-left: 8px; font-size: 85%; font-style: italic; }
div.heldenbrief span.zu_proben { font-size: 75%; }
div.heldenbrief_waffe { max-height: 150px; max-width: 150px; }
div.heldenbrief_waffe img { height: 100%; width: 100%; object-fit: contain }
div.heldenbrief table {box-shadow: none }

/**
 * Buchquesten
 */
div.buch_zweiseitig { background-image: url(../bilder/quests/open_book.png); width:721px; height:478px; margin: 10px auto; }
div.buch_linke_seite { float:left; width:270px; height:440px; padding:10px 10px 0 70px;  text-align:left; }
div.seitenzahl_l { clear:left; float:left; width:270px; padding:0 10px 0 70px; text-align: center; font-size: 85%; text-shadow: none; color: #000; }
div.buch_rechte_seite { float:right; width:290px; height:440px; padding:10px 50px 0 5px; text-align:left;  }
div.seitenzahl_r { clear:right; float:right; width:290px; padding:0 50px 0 5px; text-align: center; font-size: 85%; text-shadow: none; color: #000; }
div.buch_linke_seite p { font-size:95%; line-height: 150%; text-align: justify; }
div.buch_rechte_seite p { font-size:95%; line-height: 150%; text-align: justify; }
div.umblaettern { text-align: center; }

/**
 * Pergamente
 */
div.pergament {
  background: url("../bilder/quests/page.gif") no-repeat transparent center top;
  height: 660px;
  width: 460px;
  font-size: 100%;
  padding: 20px 30px 20px 40px;
  text-align: left;
  color: #0a2b1d;
  text-shadow: none;
}

div.pergamenth1 {
  font-size: 200%;
  text-align: center;
}

.aoqml div.pergament  {
  font-size: 90%;
}

.aoqml div.pergament  ul li {
  margin: 0;
}

/* Kampftabelle */
table.kampf .kampfbeitritt { color: orange; }

/* Zusammenklappbarer Kampfbericht */
.kampfbericht_wrapper {
    margin: 15px 0;
    text-align: left;
}

.kampfbericht_zusammenfassung {
    background: rgba(64, 44, 19, 0.08);
    border: 1px solid rgba(64, 44, 19, 0.2);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.kampfbericht_icon {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    flex-shrink: 0;
}

.kampfbericht_inhalt {
    flex: 1;
}

.kampfbericht_runden {
    margin: 8px 0;
    font-size: 0.95em;
}

.kampfbericht_statistiken {
    margin-top: 8px;
}

/* Kampfergebnis Badge */
.kampfergebnis {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px 0;
}

.kampfergebnis.held {
    background: rgba(0, 161, 0, 0.15);
    border: 1px solid #00A100;
    color: #00A100;
}

.kampfergebnis.gegner {
    background: rgba(220, 0, 0, 0.15);
    border: 1px solid #DC0000;
    color: #DC0000;
}

/* Flucht und Unentschieden */
.kampfergebnis:not(.held):not(.gegner) {
    background: rgba(64, 44, 19, 0.1);
    border: 1px solid rgba(64, 44, 19, 0.4);
    color: #402C13;
}

/* Toggle-Button */
.kampfbericht_toggle {
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kampfbericht_toggle_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(to bottom, #8B7355, #6B5344);
    border: 1px solid #402C13;
    border-radius: 4px;
    color: #fff4df;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kampfbericht_toggle_btn:hover {
    background: linear-gradient(to bottom, #9B8365, #7B6354);
}

.kampfbericht_toggle_btn:active {
    background: linear-gradient(to bottom, #6B5344, #5B4334);
}

.kampfbericht_toggle_btn.expanded {
    background: linear-gradient(to bottom, #6B5344, #5B4334);
}

.kampfbericht_toggle_icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

.kampfbericht_toggle_btn.expanded .kampfbericht_toggle_icon {
    transform: rotate(180deg);
}

/* Toggle-Switch statt Checkbox */
.kampfbericht_immer_anzeigen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    cursor: pointer;
    user-select: none;
}

.kampfbericht_immer_anzeigen input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 20px;
    background: #999;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
}

.kampfbericht_immer_anzeigen input[type="checkbox"]:checked {
    background: #00A100;
}

.kampfbericht_immer_anzeigen input[type="checkbox"]::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.kampfbericht_immer_anzeigen input[type="checkbox"]:checked::after {
    left: 18px;
}

.kampfbericht_immer_anzeigen span {
    color: #402C13;
}

/* Details-Container */
.kampfbericht_details {
    overflow: hidden;
    margin-top: 10px;
}

/* Kampftabelle Verbesserungen */
.kampfTabelle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    /* Schatten-Hinweis nach rechts/links, wenn horizontal gescrollt werden kann
       (Lea Verou). Greift sichtbar nur, wenn Inhalt breiter als der Wrapper ist. */
    background:
        linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%),
        linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%),
        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;
}

.kampfTabelle table.kampf {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px;
}

.kampfTabelle table.kampf th {
    background: rgba(64, 44, 19, 0.15);
    position: sticky;
    top: 0;
    z-index: 1;
}

.kampfTabelle table.kampf tbody tr:nth-child(even) {
    background: rgba(64, 44, 19, 0.04);
}

.kampfTabelle table.kampf tbody tr:hover {
    background: rgba(64, 44, 19, 0.1);
}

/* Kämpfer-Farben in Statistiken */
.kampfbericht_statistiken .held {
    color: #00A100;
}

.kampfbericht_statistiken .gegner {
    color: #DC0000;
}

/**
 * neue Kampfseite
 */
div.kampf_v2 { text-align:center; margin:0 auto; padding:0; }
div.kampf_v2 div.kampf_links { margin-bottom:20px; }

/*
 * Kampf-Tabs (Gerüstete Ausrüstung | Kampfmanöver | Zauber | Zauberrituale).
 * Desktop: bleibt visuell pipe-separated wie früher (über ::before content "| ").
 * Mobile (<=600 px): wird zu echten Chip-Buttons mit 44 px Touch-Target.
 */
.kampf_links .kampf_link + .kampf_link::before {
    content: " | ";
    color: inherit;
}
.kampf_links .kampf_link_aktiv {
    /* Aktiver Tab war vorher reiner Text — Style bleibt erhalten, kein Link-Stil */
    text-decoration: none;
    color: inherit;
    cursor: default;
}
@media (max-width: 600px) {
    .kampf_links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: center;
        margin-bottom: var(--space-md);
    }
    .kampf_links .kampf_link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
        padding: 0 12px;
        border: 1px solid var(--mobile-accent);
        border-radius: 6px;
        background: var(--mobile-chip-bg);
        color: inherit;
        text-decoration: none;
        font-weight: 500;
    }
    /* Pipes auf Mobile ausblenden — wir nutzen Abstände statt Trennzeichen */
    .kampf_links .kampf_link + .kampf_link::before { content: ""; }
    .kampf_links .kampf_link_aktiv {
        background: var(--mobile-accent);
        color: var(--mobile-accent-contrast);
        font-weight: 700;
        cursor: default;
    }
}
div.kampf_v2 table.kampf_outer { width:800px; margin:0 auto; border-collapse:separate; background:none; border-spacing:0; }
div.kampf_v2 table.kampf_outer td.linke_seite { width:400px; background:none; border:none; vertical-align:top; }
div.kampf_v2 table.kampf_outer td.rechte_seite { width:400px; text-align:left; background:none; border:none; vertical-align:top; padding-left:10px; }
div.kampf_v2 table.kampf_outer div#meldung { text-align:left; height:50px; margin-bottom:5px; }
div.kampf_v2 .dragable2 { cursor: move; padding:0; }
div.kampf_v2 img { margin: 0; }
div.kampf_v2 table th { font-size:90%; text-align:center; padding:5px; }
div.kampf_v2 table td { padding: 2px; }
div.kampf_v2 .rassenboni { font-style:italic; font-size:75%; }
div.kampf_v2 .restricted { font-size: 80%; }
div.kampf_v2 .restricted .ok { color: #008000; }
div.kampf_v2 .restricted .bad { color: #D10D0D; }

/* Schattenrisse */
div.kampf_v2 div.Mensch { background: url(../bilder/koerper/mensch_m_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Mensch_w { background: url(../bilder/koerper/mensch_w_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Halbling { background: url(../bilder/koerper/mensch_m_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Halbling_w { background: url(../bilder/koerper/mensch_w_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Halbork { background: url(../bilder/koerper/mensch_m_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Halborkin { background: url(../bilder/koerper/mensch_w_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Elf { background: url(../bilder/koerper/elf_m_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Elfe { background: url(../bilder/koerper/elf_w_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Halbelf { background: url(../bilder/koerper/elf_m_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Halbelfe { background: url(../bilder/koerper/elf_w_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Norlander { background: url(../bilder/koerper/nordahejmr_m_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Norlanderin { background: url(../bilder/koerper/nordahejmr_w_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Zwerg { background: url(../bilder/koerper/zwerg_m_50_h600.png) no-repeat transparent center bottom; }
div.kampf_v2 div.Zwergin { background: url(../bilder/koerper/zwerg_w_50_h600.png) no-repeat transparent center bottom; }

/* Körper */
div.kampf_v2 div.koerper { width:400px; }
div.kampf_v2 div.koerper img { margin-top:2px; }
div.kampf_v2 div.koerper div.clear { clear:left; }
div.kampf_v2 div.koerper div.innerClear { clear:right; }
div.kampf_v2 div.koerper div.schulter { float:left; margin:20px 0 0 0; width:90px; height:113px; background-image: url(../bilder/koerper/schulter.png); position:relative; }
div.kampf_v2 div.koerper div.kopf { float:left; margin:0 68px 0 68px; width:83px; height:104px; background-image: url(../bilder/koerper/kopf.png); position:relative; }
div.kampf_v2 div.koerper div.ruecken { float:left; margin:20px 0 0 0; width:91px; height:114px; background-image: url(../bilder/koerper/ruecken.png); position:relative; }
div.kampf_v2 div.koerper div.hals { float:left; margin:-27px 0 0 180px; width:43px; height:44px; background-image: url(../bilder/koerper/hals.png); position:relative; z-index:10; }
div.kampf_v2 div.koerper div.arme { float:left; margin:-9px 0 5px 1px; width:82px; height:113px; background-image: url(../bilder/koerper/arme.png); position:relative; }
div.kampf_v2 div.koerper div.oberkoerper { float:left; margin:5px 50px 0 50px; width:131px; height:163px; background-image: url(../bilder/koerper/oberkoerper.png); position:relative; }
div.kampf_v2 div.koerper div.rHandBox { float:left; margin:-58px 0 0 0; width:90px; position:relative; }
div.kampf_v2 div.koerper div.rHandBox div.rHand { width:90px; height:114px; background-image: url(../bilder/koerper/rechteHand.png); position:relative; }
div.kampf_v2 div.koerper div.rHandBox div.rRinge1 { margin:5px 5px 0 0; float:right; width:42px; height:33px; background-image: url(../bilder/koerper/ringe.png); position:relative; }
div.kampf_v2 div.koerper div.rHandBox div.rRinge2 { margin:5px 0 0 0; float:right; width:42px; height:33px; background-image: url(../bilder/koerper/ringe.png); position:relative; }
div.kampf_v2 div.koerper div.unterkoerper { float:left; margin:10px 50px 0 50px; width:117px; height:153px; background-image: url(../bilder/koerper/unterkoerper.png); position:relative; }
div.kampf_v2 div.koerper div.lHandBox { float:left; margin:-58px 0 0 0px; width:91px; position:relative; }
div.kampf_v2 div.koerper div.lHandBox div.lHand { width:91px; height:114px; background-image: url(../bilder/koerper/linkeHand.png); position:relative; }
div.kampf_v2 div.koerper div.lHandBox div.lRinge1 { margin: 5px 5px 0 0; float:right; width:42px; height:33px; background-image: url(../bilder/koerper/ringe.png); position:relative; }
div.kampf_v2 div.koerper div.lHandBox div.lRinge2 { margin: 5px 0 0 0; float:right; width:42px; height:33px; background-image: url(../bilder/koerper/ringe.png); position:relative; }
div.kampf_v2 div.koerper div.uleib { float:left; margin: -40px 0 0 30px; width:81px; height:73px; background-image: url(../bilder/koerper/unterleib.png); position:relative; }
div.kampf_v2 div.koerper div.fuesse { float:left; margin:5px 30px 20px 30px; width:112px; height:72px; background-image: url(../bilder/koerper/fuesse.png); position:relative; }
div.kampf_v2 div.koerper div.beine { float:left; margin: -40px 30px 0 0; width:80px; height:73px; background-image: url(../bilder/koerper/beine.png); position:relative; }

/*
 * Körper-Silhouette ist 400 px breit fest verdrahtet (Pixel-Margins für jede
 * Zone). Auf 375-px-Viewports laufen Schulter/Rücken am Rand ab. Mit `zoom`
 * werden Layout- und visuelle Größe gemeinsam skaliert, sodass die Hit-Areas
 * der Drop-Zones (touch-equip + Drag&Drop) ihre Anklick-Koordinaten behalten.
 */
@media (max-width: 400px) {
    div.kampf_v2 div.koerper { zoom: 0.9; }
}
@media (max-width: 360px) {
    div.kampf_v2 div.koerper { zoom: 0.8; }
}
@media (max-width: 320px) {
    div.kampf_v2 div.koerper { zoom: 0.72; }
}

/* Tooltips der angelegten Sachen */
.ware_auf_zone { border:1px solid black; margin:2px 2px 5px 2px; padding:5px; }
.ware_auf_zone .ware_desc_short { float:right; margin:2px 2px 5px 5px; max-width:100px; }
.ware_auf_zone .ware_desc_long { float:right; margin:2px 2px 5px 5px; max-width:160px; }
.ware_auf_zone .ware_name { font-weight: bold; }
.ware_auf_zone .clear { clear:right; }

/* AT/PA-Werte */
div.kampf_v2 div.at_pa_werte { margin:-5px 15px 0 15px; text-align:center; border-radius:15px; border:2px solid #75716A; padding:7px 3px 0 0; font-weight:bold; font-size:95%; }
div.kampf_v2 div.at_pa_werte div { padding-bottom: 5px; }
div.kampf_v2 div.at_pa_werte span.wert{ padding-left:7px; white-space:nowrap; }
div.kampf_v2 div.at_pa_werte span.schaden { padding-left:3px; }
div.kampf_v2 div.at_pa_werte span.schaden img { margin: 0 1px; }

/*
 * Kampfwerte mobile: einzelne Werte werden zu chip-artigen Pillen mit Touch-
 * Padding und Flex-Wrap, damit sie nicht mehr als enge inline-Reihe wirken.
 * Desktop bleibt unverändert (die Regel greift erst <=600 px).
 */
@media (max-width: 600px) {
    div.kampf_v2 div.at_pa_werte {
        margin: 0 0 var(--space-md) 0;
        padding: var(--space-sm) var(--space-xs);
        font-size: 1em;
    }
    div.kampf_v2 div.at_pa_werte > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding-bottom: var(--space-sm);
    }
    div.kampf_v2 div.at_pa_werte > div:last-child { padding-bottom: 0; }
    div.kampf_v2 div.at_pa_werte span.wert {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: var(--mobile-border-very-soft);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 999px;
        min-height: 32px;
        box-sizing: border-box;
    }
    div.kampf_v2 div.at_pa_werte span.wert .tip { white-space: nowrap; }
    /* Rüstungsschutz-Zonen: Pipe-Layout durch ein bisschen Atem ersetzen */
    div.kampf_v2 .ruestwerte > div {
        line-height: 1.6;
    }
    /*
     * Hinweis- und Meldungstexte ("Drag & Drop", "Links anzeigen für Touch-
     * Bedienung") liefen rechts aus dem Viewport. Block-Display und
     * Word-Wrap fangen das ab.
     */
    div.kampf_v2 #meldung,
    div.kampf_v2 #meldung small,
    div.kampf_v2 > small {
        display: block;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
        padding: var(--space-xs) 0;
    }
}

/* Rüstwerte */
div.kampf_v2 div.ruestwerte { margin: 10px 0 0 0; text-align: center; }
div.kampf_v2 div.ruestwerte h2 { font-size:120%; margin: 0 0 5px 0; }
div.kampf_v2 div.gepaeck_inhalt div.leer { padding:10px; font-size: 100%; font-weight: bold; }
div.kampf_v2 div.ruestungskombis { margin: 20px 0 0 0; }
div.kampf_v2 div.ruestungskombis h2 { font-size:110%; margin: 20px 0 10px 0; }
div.kampf_v2 div.ruestungskombis div.ruestkombi { margin: 10px 0 10px 0; }
div.kampf_v2 div.ruestungskombis div.ruestkombi span.kombi_name { font-weight: bold; }
div.kampf_v2 div.ruestungskombis div.ruestkombi span.kombi_verw { padding-left: 10px; }
div.kampf_v2 div.ruestungskombis div.ruestkombi span.kombi_verw img { margin: 0 3px; }
div.kampf_v2 div.ruestungskombis div.ruestkombi span.nicht_dabei { color: red; opacity: 0.8; }

/* Gegenstandsquesten auf Kampfseite */
div.kampf_v2 div.gegenstandsquesten { padding-top:10px; }
div.kampf_v2 div.gegenstandsquesten ul { margin: 5px 0; }
div.kampf_v2 .helptextBox { margin-top: 20px; text-align: left; color: #402C13; padding: 10px; }
div.kampf_v2 .helptext { padding-left: 20px; background: url(../bilder/info.png) no-repeat 0 2px transparent; font-family: Palatino Linotype, Book Antiqua, Palatino, serif; font-style: italic; }

/* ========== Kampfseite Redesign v2 ========== */

/* Flexbox Layout statt Table */
.kampf_v2_layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Mobile-first: beide Spalten füllen die volle Breite, stapeln untereinander.
   Erst ab 720 px greift wieder das nebeneinander-Layout (60/35). Damit verschwindet
   die alte Tablet-Glitch-Zone zwischen 600 und 768 px, in der 320+280 px
   Mindestbreite den Flex-Wrap kaputt machte. */
.kampf_v2_layout .linke_seite_v2 {
    flex: 1 1 100%;
    min-width: 0;
}

.kampf_v2_layout .rechte_seite_v2 {
    flex: 1 1 100%;
    min-width: 0;
    text-align: left;
}

@media (min-width: 720px) {
    .kampf_v2_layout .linke_seite_v2 { flex: 1 1 60%; }
    .kampf_v2_layout .rechte_seite_v2 { flex: 1 1 35%; }
}

/* Moderne Tabs */
.kampf_tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.kampf_tabs .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(100,100,100,0.2);
    text-decoration: none;
    /* konstantes Schriftgewicht: kein Fett bei Hover/Aktiv -> keine Breitenaenderung,
       kein Layout-Sprung (hebt das generische div.reiter a:hover/.selektiert auf) */
    font-weight: normal;
}

.kampf_tabs .tab:hover {
    background: rgba(100,100,100,0.3);
    transform: translateY(-2px);
    font-weight: normal;
}

.kampf_tabs .tab.selektiert {
    border-color: #75716A;
    background: rgba(100,100,100,0.4);
    font-weight: normal;
}

.kampf_tabs .tab img {
    height: 50px;
    width: auto;
}

.kampf_tabs .tab .tab-label {
    font-size: 0.85em;
    margin-top: 4px;
}

/* Kampfwerte-Cards */
.kampfwerte_cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.kampfwert_card {
    background: rgba(100,100,100,0.2);
    border: 1px solid rgba(100,100,100,0.4);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}

.kampfwert_card .label {
    font-size: 0.85em;
    opacity: 0.9;
    margin-bottom: 2px;
}

.kampfwert_card .label img {
    height: 20px;
    vertical-align: middle;
}

.kampfwert_card .value {
    font-size: 1.1em;
    font-weight: bold;
}

.kampfwert_card.warning {
    border-color: #c0392b;
    background: rgba(192,57,43,0.2);
}

/* Initiative-Warnung (ausgelagert aus Inline-Style) */
.kampf_v2 .ini-warning {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kampf_v2_layout {
        flex-direction: column;
    }

    .kampf_v2_layout .linke_seite_v2,
    .kampf_v2_layout .rechte_seite_v2 {
        flex: 1 1 100%;
        min-width: 0;
    }

    .kampf_tabs .tab img {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .kampfwerte_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .kampf_tabs {
        justify-content: center;
    }

    .kampf_tabs .tab {
        flex: 1 1 45%;
    }
}

/* Touch-Optimierung: nur wenn Mobile-Layout aktiv (max-width: 770px) UND
   primärer Pointer grob ist. Verhindert, dass Touch-Padding auf Tablets im
   Querformat oder Hybrid-Laptops mit Touchscreen das Desktop-Layout verformt. */
@media (pointer: coarse) and (max-width: 770px) {
    .kampf_tabs .tab {
        min-height: 60px;
        min-width: 60px;
    }

    .dragable2, .dragable {
        min-height: 50px;
        min-width: 50px;
    }

    .ablegen_link a {
        display: inline-block;
        padding: 8px 12px;
        background: rgba(100,100,100,0.3);
        border-radius: 4px;
        margin-top: 4px;
    }

    /* Universelle Touch-Target-Vergrößerung (44 px Minimum, WCAG/Apple HIG) */
    .input_zahl,
    .input,
    .input_text,
    .input_long,
    select,
    button,
    .button,
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    input[type="submit"],
    input[type="button"] {
        min-height: var(--touch-target-min);
    }
    .input_zahl {
        min-width: var(--touch-target-min);
        width: auto;
        padding: 4px 8px;
        box-sizing: border-box;
    }

    /* Checkboxen und Radios spürbar tappbar */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        cursor: pointer;
    }
    div.questtagebuch .multiselect_checkbox input,
    .reiten_controls input[type="checkbox"] { width: 22px; height: 22px; }

    /* Chat-Resize-Grippie greifbar */
    .grippie { height: 18px; }

    /* Tabellen-Sortierpfeile (DataTables) tappbar */
    .table-th-sort-span,
    table.sortable th { padding: 14px 24px 14px 8px; min-height: var(--touch-target-min); }

    /* DataTables-Pagination tappbar machen: Buttons mit min 44 px Höhe und
       deutlich Abstand. Sonst sitzen "Vorherige"/"Nächste" zu eng beieinander. */
    .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: var(--space-sm) 0;
    }
    .dataTables_paginate .paginate_button {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 6px 12px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info {
        display: block;
        text-align: center;
        margin: var(--space-sm) 0;
    }
    .dataTables_length select,
    .dataTables_filter input {
        min-height: var(--touch-target-min);
        padding: 4px 8px;
    }

    /* Menü- und Heldinfo-Links als Block mit Touch-Padding */
    div#menu li a,
    div#heldeninfo li a { padding: 10px 8px; display: block; }
}

/**
 * Kampfmanöver
 */
table.kampfmanoever { border-spacing:3px; }
table.kampfmanoever td.keine { text-align:center; font-size:90%; }

/* Sonderfertigkeiten-Liste (einklappbar, gruppiert) */
.sf-liste-container {
    margin: 15px 0;
    padding: 10px;
    background: rgba(50,50,50,0.3);
    border-radius: 5px;
}
.sf-liste-container summary {
    cursor: pointer;
    list-style: none;
}
.sf-liste-container summary::-webkit-details-marker { display: none; }
.sf-liste-container summary::before {
    content: "▶ ";
    font-size: 10px;
    margin-right: 5px;
    display: inline-block;
    transition: transform 0.2s;
}
.sf-liste-container[open] summary::before {
    transform: rotate(90deg);
}
.sf-liste-inhalt {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(100,100,100,0.3);
}
.sf-kategorie {
    margin: 5px 0;
    line-height: 1.6;
}
.sf-kategorie-name {
    font-weight: bold;
    color: #bbb;
    margin-right: 8px;
}
.sf-kategorie-liste {
    color: #ddd;
}

/* Kampfmanöver Redesign */
.kampfmanoever-container { max-width: 900px; }

/* Akkordeon-Styling mit Farbcodierung */
.manoever-toggle { padding-left: 10px; }
.manoever-toggle.angriff { border-left: 4px solid #c0392b; }
.manoever-toggle.abwehr { border-left: 4px solid #2980b9; }
.manoever-toggle.kampfstil { border-left: 4px solid #27ae60; }
.manoever-toggle.allgemein { border-left: 4px solid #7f8c8d; }
.manoever-toggle .toggle-icon { margin-right: 8px; font-size: 12px; }

/* Card-Layout für Manöver */
.manoever-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.manoever-card {
    flex: 1 1 280px;
    max-width: 400px;
    border: 1px solid rgba(100,100,100,0.5);
    border-radius: 5px;
    background: rgba(50,50,50,0.3);
    padding: 10px;
}
.manoever-card.inactive { opacity: 0.6; }

/* Nicht ausführbare Manöver - verkleinert */
.manoever-card.nicht-ausfuehrbar {
    flex: 0 1 220px;
    max-width: 280px;
    background: rgba(80,40,40,0.3);
    border-color: rgba(192,57,43,0.5);
    opacity: 0.85;
}
.manoever-card.nicht-ausfuehrbar .manoever-header {
    font-size: 90%;
    color: #e74c3c;
}
.manoever-warning-body { font-size: 85%; }
.manoever-warning-reason {
    padding: 6px 8px;
    background: rgba(192,57,43,0.2);
    border-radius: 3px;
    margin-bottom: 8px;
    font-size: 90%;
    color: #e74c3c;
    line-height: 1.4;
}
.manoever-warning-reason img { vertical-align: middle; margin-right: 4px; }
.manoever-details { margin-top: 5px; }
.manoever-details summary {
    cursor: pointer;
    font-size: 85%;
    color: #888;
    padding: 3px 0;
}
.manoever-details summary:hover { color: #aaa; }
.manoever-details[open] summary { margin-bottom: 8px; }

.manoever-header {
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(100,100,100,0.3);
}
.manoever-header img { vertical-align: middle; margin-left: 5px; }
.manoever-body { font-size: 95%; }
.manoever-inputs { margin-top: 5px; }
.manoever-inputs label { display: inline-block; min-width: 50px; }

/* Bereichs-Visualisierung */
.manoever-range-visual {
    height: 20px;
    background: rgba(100,100,100,0.3);
    border: 1px solid #555;
    border-radius: 3px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}
.manoever-range-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
    border-radius: 2px;
}
.manoever-range-label {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    line-height: 20px;
    z-index: 1;
}

/* Überlappungs-Übersicht */
.manoever-overlap-overview {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgba(100,100,100,0.5);
    border-radius: 5px;
    background: rgba(30,30,30,0.4);
}
.manoever-overlap-overview h4 { margin: 0 0 10px 0; }
.overlap-chart { position: relative; }
.overlap-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    height: 18px;
}
.overlap-row-label {
    width: 120px;
    font-size: 11px;
    text-align: right;
    padding-right: 8px;
}
.overlap-row-bar {
    flex: 1;
    height: 14px;
    background: rgba(100,100,100,0.3);
    border-radius: 2px;
    position: relative;
}
.overlap-row-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
}
.overlap-row-fill.wucht { background: #e74c3c; }
.overlap-row-fill.finte { background: #3498db; }
.overlap-row-fill.doppel { background: #9b59b6; }
.overlap-row-fill.stich { background: #1abc9c; }
.overlap-row-fill.umreissen { background: #f39c12; }
.overlap-row-fill.niederwerfen { background: #e67e22; }
.overlap-row-fill.hammerschlag { background: #34495e; }
.overlap-row-fill.meisterpa { background: #2980b9; }

/* Kampfstile als Radio-Cards */
.kampfstil-options { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.kampfstil-option {
    flex: 1 1 150px;
    padding: 10px;
    border: 2px solid rgba(100,100,100,0.5);
    border-radius: 5px;
    background: rgba(50,50,50,0.3);
    cursor: pointer;
    text-align: center;
}
.kampfstil-option:hover { border-color: rgba(150,150,150,0.7); }
.kampfstil-option.selected { border-color: #27ae60; background: rgba(39,174,96,0.2); }
.kampfstil-option input[type="radio"] { display: none; }
.kampfstil-name { font-weight: bold; margin-bottom: 5px; }
.kampfstil-werte { font-size: 90%; }

/* Allgemeine Einstellungen Grid */
.allgemein-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; padding: 10px 0; }
.allgemein-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(100,100,100,0.3);
    border-radius: 4px;
    background: rgba(50,50,50,0.2);
    overflow: hidden;
}
.allgemein-item label { flex: 1 1 auto; min-width: 120px; }
.allgemein-item .input_zahl { width: 50px; }
.allgemein-item select.input {
    max-width: 100%;
    width: auto;
    flex: 1 1 150px;
    min-width: 0;
}

/**
Farbe verfuegbar/nicht verfuegbar z.B. steigern von Sonderfertigkeiten in Kampfschule
 */
.red{
  color: red;
}

.green{
  color: green;
}

.gray{
  color: gray;
}

/* Transferansicht/Handel */
table.transfer { margin:0 auto; }
table.transfer th { vertical-align:middle; text-align:center; width: 50%; }
table.transfer th div.reiter img { border: 2px solid transparent; height:60px; margin:0; }
table.transfer th div.containerbild { float:left; width:40%; text-align:right; padding-right:5px; }
table.transfer th div.fuellstand { float:left; text-align:center; padding-top:5px; }
table.transfer th div.fuellstand .beschriften { font-size:75%; font-weight:normal; }
table.transfer td { vertical-align:top; text-align:left; width: 50%; }
table.transfer td a.tp_all { text-decoration: none; }
table.transfer td a.tp_all:hover, table.transfer td a.tp_all:focus { text-decoration: underline; }
table.transfer td.tradingPartner { padding: 0; }
table.markttransfer th { width: 100%; }
table.markttransfer td { width: 100%; padding: 0; }
table.transfer div.warencontainer { float:left; width: 345px; padding: 5px 5px 5px 10px; line-height:100%; font-size:95%; }
table.transfer div.warencontainer_eigener_stand { clear:left; height: 60px; padding: 5px 0 10px 10px; line-height:100%; font-size:95%; }
table.transfer .tobj { float: left; }
table.transfer .clear { clear: left; }
table.transfer .warenname { float: left; padding: 5px 0 0 8px; height: 60px; max-width:280px; overflow:hidden; }
table.transfer .warenname .zst { font-size:70%; font-style:italic; padding:2px 0; margin: 0; line-height:1em; }
table.transfer .warenname .waffeninfo img { margin: 0; }
table.transfer a { text-decoration: none; }
table.transfer a:hover, table.transfer a:focus { text-decoration: underline; }
table.transfer div.warenbild { position:relative; float: left; padding: 0; margin: 0 1px 1px 0; width: 50px; height: 50px; text-align:center; }
table.transfer div.warenbild div.anzahl { position: absolute; right:0; bottom:0; margin:0; padding:2px 0 0 0; font-size:0.8em; line-height:12px; font-weight:bold; width:19px; height:18px; background:url(../bilder/schildchen.png) no-repeat bottom right transparent; }
table.transfer div.transferall { clear:left; text-align:left; padding-top:40px; padding-left:10px; }
table.transfer div.sell_all { clear: left; padding: 30px 0 10px 20px; }

/* in mBox */
table.warentausch { margin-top: 8px; }
table.warentausch tr.too_big { opacity: 0.7; }
table.warentausch th { text-align:left; padding-right: 10px; }
table.warentausch td { text-align:left; padding-right: 10px; }
table.warentausch th.preis_title { text-align:center; }
table.warentausch input.gulden { width: 25px; margin-left:15px; }
table.warentausch input.thaler, table.warentausch input.groschen { width: 18px; margin-left: 5px; }
table.warentausch .pr { white-space: nowrap; }
table.warentausch .p_all { font-size: 85%; }

/* Behälter */
div.transferContainer div.heroSide, div.transferContainer div.partnerSide { max-height: 500px; overflow-y: auto; }

/* AOQML Inventare */
div.transferInventory div.heroSide, div.transferInventory div.partnerSide { max-height: 500px; overflow-y: auto; }
div.transferInventory th div.fuellstand { float: none; text-align:center; }

/* Marktplatz */
table.markt td { padding: 0; }
table.markt td.trenner { background: url(../bilder/spirale.jpg) repeat-x center transparent; padding:5px; }
table.markt td.stand_held { width: 225px; text-align: center; padding-bottom: 10px; min-height:100px; }
table.markt td.stand_beschreibung { text-align: center; padding:5px; }
table.markt td.stand_inhalt { width: 225px; text-align: left; padding-left:30px; }
table.markt td.marktstandansicht { text-align: center; padding:5px 0; }
table.markt table.transfer div.warencontainer { border-right:1px solid gray; border-bottom:1px solid gray; }
table.markt table.transfer .kaufen { padding-left:10px; }
table.markt div.transferContainer { max-height: 420px; overflow-y: scroll; overflow-x: hidden; }
table.markt div.transferContainer  .warenname { height: 55px; }
table.transfer td.motto { padding:10px; text-align:center; }
div#eigener_marktstand_pre { margin:0 auto; width:500px; text-align:center;}
div#eigener_marktstand_pre input[type=submit] { margin:15px; }

/* Reiter/Tabs */
div.reiter a img { border: 2px solid transparent; }
div.reiter a.selektiert { font-weight: bold; text-decoration: none; }
div.reiter a:hover { font-weight: bold; text-decoration: none; }
div.reiter a.selektiert img { border: 2px solid gray; }

/* Gepäck */
div.gepaeck_inhalt { padding:0; margin:5px 0 0 0; height:550px; overflow:auto; }
div.gepaeck_inhalt table.nahwaffen, div.gepaeck_inhalt table.schilde, div.gepaeck_inhalt table.ruestung, div.gepaeck_inhalt table.fernwaffen { clear:none; margin:0; }
div.gepaeck_inhalt .mehr_infos { font-size:75%; }
div.gepaeck_inhalt table.schilde td.schild_bild { min-width: 50px; }
div.gepaeck_inhalt table.schilde td.schild_info { min-width:150px; }
div.gepaeck_inhalt table.schilde td.wm { text-align: center; }
div.gepaeck_inhalt table.schilde td.ini{ text-align: center; }
div.gepaeck_inhalt table.schilde td.ersatz { text-align: center; }
div.gepaeck_inhalt table.ruestung td.ruestung_info { min-width:160px; }
div.gepaeck_inhalt table.ruestung td.rs span { white-space:nowrap; padding-right:6px; }
div.gepaeck_inhalt div.clear { clear:left; }
div.gepaeck_inhalt div.dragable { cursor: move; padding:0; }
div.gepaeck_inhalt_box { min-height:200px; } /* in den verschiedenen Designs wird noch ein Hintergrund + Border festgelegt */
div.gepaeck_inhalt_box .dragable { float:left; width:60px; height:60px; padding:5px; }
div.gepaeck_inhalt_box .gepaeck_menge { font-size:75%; color:#404040; position:relative; left:46px; top:-18px; width:15px; }

/* Händler */
table.haendlertransfer { border: none; }
div.haendlerTransfer .tobj .warenbild { height: 60px; padding-top: 10px; }
div.haendlerTransfer .tobj .warenbild .anzahl { bottom: 5px; }
div.haendlerTransfer .tobj .middle { padding-top: 13px; }
div.haendlerTransfer td.tradingPartner { padding: 5px; }
div.haendlerTransfer td.tradingPartner .tobj { clear: left; }

/* Händlerverkaufsanzeige */
table.haendlertransfer .restricted { font-size: 80%; font-weight: normal; }
table.haendlertransfer .restricted .ok { color: #008000; }
table.haendlertransfer .restricted .bad { color: #D10D0D; }

/* Händler-Kauftabelle mit DataTables */
.haendler-kauftabelle_wrapper .dataTables_filter {
    margin-bottom: 10px;
}

.haendler-aktionen {
    margin-top: 15px;
    padding: 10px;
    text-align: center;
}

.haendler-aktionen .feilschen-option {
    display: block;
    margin-bottom: 10px;
}

/* Handel unter 4 Augen */
div.transferHero2HeroOffer .tradingPartner .tobj { clear: left; }
div.transferHero2HeroOffer .heroSide, div.transferHero2HeroOffer .partnerSide { max-height: 650px; overflow-y: auto; }
div.transferHero2HeroOffer input.gulden { width: 30px; }
div.transferHero2HeroOffer input.thaler, div.transferHero2HeroOffer input.groschen { width: 20px; }
div.transferHero2HeroOffer div.infotext { width:250px; margin:0 auto; padding:20px 0; }
div.transferHero2HeroOffer td.infotext { padding: 5px 20px; }

/* Orden */
div.transferHaus .tobj .warenbild { height: 60px; padding-top: 10px; }
div.transferHaus .tobj .warenbild .anzahl { bottom: 5px; }
div.transferHaus .tobj .middle { padding-top: 13px; }
div.transferHaus td.tradingPartner { padding: 5px; }
div.transferHaus th div.fuellstand { float: none; }
#ordenRaumverwaltungContainer img { margin: 0; }
#ordenRaumverwaltungContainer .raumBox { padding:10px; margin:10px; border:1px solid black; width:300px; float:left; text-align:left; }
#ordenRaumverwaltungContainer .neuerRaumBox { clear:left; padding-top:20px; width:350px; margin:0 auto; text-align:left; }
#ordenRaumverwaltungContainer .neuerRaumBox legend { font-weight: bold; }

#mitglieder img,
#mitglieder_verwalten img,
#ordensrolle img{ max-height: 3em; }

/* Begleiter */
div.begleiter { text-align: center; }
div.begleiter img { margin: 0; }
div.begleiter div.clear { clear: left; }
div.begleiter div.begleiter_uebersicht { margin: auto; width:570px; padding-bottom:10px; }
div.begleiter div.begleiter_link { float:left; margin:5px; width:100px; height:100px; background-image:url(../bilder/begleiter/rand.png); }
div.begleiter div.begleiter_link .b_bild { margin-top:17px; }

/*
 * Begleiter-Slots responsiv: feste 570 px Übersicht + 100 px Slots überlaufen
 * den Viewport ab 4 Slots auf 375 px. Auf Mobil als Grid mit `auto-fit`, dann
 * passt egal wie viele Begleiter sind alles in die Viewport-Breite.
 */
@media (max-width: 770px) {
    div.begleiter div.begleiter_uebersicht {
        width: 100%;
        max-width: 100%;
        display: grid;
        gap: var(--space-xs);
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        padding-bottom: var(--space-sm);
    }
    div.begleiter div.begleiter_link {
        float: none;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        margin: 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    div.begleiter div.begleiter_link .b_bild { margin-top: 0; }
}
div.begleiter div.begleiter_details_box { margin:0 auto; }
div.begleiter table.begleiter_details { text-align:left; margin:0 auto; }
div.begleiter table.begleiter_details th { width:100px; padding: 6px 0 0 6px; vertical-align: top; }
div.begleiter table.begleiter_details td { min-width:200px; vertical-align: top; }
div.begleiter .drop_kasten { float:left; height:50px; width:50px; border:1px solid gray; background-color:white; margin-right:10px; }
div.begleiter .drop_infotext { font-size:95%; font-style:italic; margin-left:55px; }
div.begleiter .drop_warenname { float:left; margin-left:5px; height:50px; padding-top:5px; }
div.begleiter .begleiter_quests ul { list-style-type: none; margin:0; padding:0; }
div.begleiter h2.gruppe { margin-top:50px; }

/* Gespann-Styles */
div.begleiter .gespann_box { background:#f8f6f0; border:1px solid #c9b18b; border-radius:4px; padding:10px; margin:5px 0; }
div.begleiter .gespann_header { margin-bottom:8px; padding-bottom:5px; border-bottom:1px solid #ddd; }
div.begleiter .gespann_header strong { font-size:1.05em; }
div.begleiter .gespann_info { color:#666; font-size:0.9em; margin-left:8px; }
div.begleiter .gespann_warnung { color:#c00; font-size:0.85em; margin-left:10px; font-weight:bold; }
div.begleiter .gespann_liste { list-style:none; margin:0 0 10px 0; padding:0; }
div.begleiter .gespann_liste li { padding:5px 8px; margin:3px 0; background:#fff; border:1px solid #e0d8c8; border-radius:3px; display:flex; align-items:center; gap:10px; }
div.begleiter .gespann_leittier { background:#e8f4e8 !important; border-color:#a8c8a8 !important; }
div.begleiter .gespann_liste .tier_name { font-weight:bold; flex:1; }
div.begleiter .gespann_liste .tier_info { color:#666; font-size:0.85em; }
div.begleiter .gespann_liste .tier_zugkraft { color:#555; font-size:0.85em; min-width:100px; text-align:right; }
div.begleiter .gespann_summe { padding-top:8px; border-top:1px solid #ddd; font-size:0.95em; }
div.begleiter .gespann_anspannen { margin-top:10px; padding-top:10px; border-top:1px dashed #ccc; }
div.begleiter .gespann_anspannen select { padding:4px 8px; margin-right:8px; min-width:200px; }
div.begleiter .gespann_anspannen button { padding:4px 12px; cursor:pointer; }
div.begleiter .btn_abspannen { padding:2px 8px; font-size:0.8em; cursor:pointer; background:#f5f5f5; border:1px solid #ccc; border-radius:3px; }
div.begleiter .btn_abspannen:hover { background:#fee; border-color:#c88; }
div.begleiter .angespannt_info { background:#fff8e8; border:1px solid #e8d8b8; border-radius:4px; padding:10px; display:flex; align-items:center; gap:10px; }
div.begleiter .angespannt_icon { font-size:1.3em; }
div.begleiter .anspannen_option { padding:5px 0; }
div.begleiter .anspannen_option select { padding:4px 8px; margin-right:8px; min-width:200px; }
div.begleiter .anspannen_option button { padding:4px 12px; cursor:pointer; }

div.transferCompanion table.transfer div.warenbild { margin-top: 5px; }
div.transferCompanion .warenname { height: 60px; font-size: 85%; width: 185px; }
div.transferCompanion .clear { height: 3px; }

/* Mobile-Tabs/Summary auf Desktop ausblenden — sie werden vom JS in jeden
   Transfer-Wrapper injiziert und sollen nur in der @media-Mobile-Regel
   sichtbar werden. */
.mobile-transfer-tabs,
.mobile-transfer-summary { display: none; }

/* Händler-Kauftabelle-Such/Sortier-Bar: nur Mobile (Card-Liste).
   Auf Desktop sortiert/sucht man via DataTables-Header + Such-Box. */
.haendler-sticky-bar { display: none; }

/* Händler-Verkauf-Action-Bar: enthält Live-Preis, Feilschen, Verkaufen.
   Auf Desktop kein Sticky (kommt nur durch .mobile-action-bar @media),
   sondern normaler Footer am Container-Ende. Kompakter Layout. */
.verkauf-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    text-align: center;
}
.verkauf-aktionen .verkauf-summary { flex-basis: 100%; text-align: center; }
.verkauf-aktionen .feilschen-option { display: inline-flex; align-items: center; gap: 4px; }
.verkauf-aktionen .sell_all { margin-right: auto; }

/*
 * ============================================================
 * Mobile Transfer-Layout (Tab-Switch) — alle 15 Transfer-Screens
 *
 * Das Desktop-Layout ist eine 2-spaltige Tabelle (Held links,
 * Partner rechts). Auf < 770 px brechen die Spalten aus dem
 * Viewport. Stattdessen:
 *
 *   1) Tabelle + tr + td linearisieren (gilt für ALLE
 *      Transfer-Wrapper, auch ohne JS — fail-safe Notfall-Layout).
 *   2) Tab-Switch: JS setzt .mobile-transfer-stack auf den Wrapper
 *      und data-active="hero|partner". CSS versteckt dann die
 *      jeweils inaktive Seite.
 *   3) Sticky-Tabs + Sticky-Summary mit Partner-Bild/Last vom JS
 *      vor der Tabelle injiziert.
 *
 * Wrapper-Klassen (gerendert von *TransferView::show()):
 *   transferCompanion, transferCompanionGear, transferContainer,
 *   transferInventory, transferHaus (auch mit mietstallTransfer),
 *   transferHero2HeroOffer, haendlerTransfer (auf transferContainer).
 * ============================================================ */
@media (max-width: 770px) {
    /* Wrapper-Gruppe einmal definiert: div:is(...) hält dieselbe Spezifität
       wie das frühere div.transferX (Element + Klasse). Slot-Reiter nutzen
       nur die 4 Wrapper mit Reitern (kein Inventory/Hero2HeroOffer). */

    /* --- Wrapper voll-breit --- */
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) {
        width: 100%;
        padding: 0;
    }

    /* --- Tabelle/Reihen/Zellen als Block linearisieren --- */
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) table.transfer {
        width: 100% !important;       /* überschreibt inline-Width aus altem Desktop-JS */
        display: block;
        margin: 0;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) table.transfer :is(tbody, tr) {
        display: block;
        width: 100%;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) table.transfer th {
        display: block;
        width: 100%;
        padding: var(--space-xs) 0;
        text-align: left;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) :is(td.hero, td.tradingPartner) {
        display: block;
        width: 100%;
        padding: 0;
    }

    /* --- Side-Container: keine erzwungene Höhe, kein eigener Scroll --- */
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) :is(div.heroSide, div.partnerSide) {
        max-height: none !important;
        overflow-y: visible !important;
        width: 100%;
    }

    /* --- Slot-Reiter (Rucksack/Waffen/...) als horizontal scrollbar --- */
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer, .transferHaus)
        table.transfer th div.reiter {
        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;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer, .transferHaus)
        table.transfer th div.reiter img {
        height: var(--touch-target-min) !important;
        width: auto;
        max-height: var(--touch-target-min);
        flex: 0 0 auto;
        margin: 0;
    }

    /* --- Item-Cards: Floats raus, 50px-Bild links + Name rechts.
           Die gematchten Status-Klassen unterscheiden sich je Wrapper
           (z.B. nur transferContainer/Haus/Companion zeigen is_animal). --- */
    div.transferCompanion table.transfer :is(.tobj, .zu_gross, .ungeeignet, .is_bound, .is_animal, .is_container),
    div.transferCompanionGear table.transfer :is(.tobj, .zu_gross, .ungeeignet, .is_bound),
    div.transferContainer table.transfer :is(.tobj, .zu_gross, .ungeeignet, .is_bound, .is_animal, .is_container),
    div.transferInventory table.transfer :is(.tobj, .zu_gross, .ungeeignet),
    div.transferHaus table.transfer :is(.tobj, .zu_gross, .ungeeignet, .is_bound, .is_animal, .is_container),
    div.transferHero2HeroOffer table.transfer .tobj {
        float: none !important;
        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);
        width: auto !important;
        min-width: 0;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) table.transfer div.warenbild {
        float: none;
        margin: 0;
        width: 50px;
        height: 50px;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) .warenname {
        float: none;
        height: auto;
        width: auto !important;
        max-width: none;
        padding: 0;
        overflow: visible;
        min-width: 0;
        word-break: break-word;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) table.transfer .clear { display: none; }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) table.transfer div.warencontainer {
        float: none;
        width: 100%;
        padding: 0;
    }

    /* --- "alles entnehmen / verstauen" als voll-breiter Bottom-Button --- */
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) div.transferall {
        clear: none;
        padding: var(--space-md) 0 var(--space-sm) 0;
        text-align: center;
    }
    div:is(.transferCompanion, .transferCompanionGear, .transferContainer,
           .transferInventory, .transferHaus, .transferHero2HeroOffer) div.transferall a.tp_all {
        display: inline-block;
        min-height: var(--touch-target-min);
        line-height: calc(var(--touch-target-min) - 2 * var(--space-xs));
        padding: var(--space-xs) var(--space-lg);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-decoration: none;
    }

    /* === Tab-Switch — nur wenn JS den Marker .mobile-transfer-stack gesetzt hat ===
       Ohne JS bleibt Stack-Layout (beide Seiten gestapelt), was als Notfall-
       UI funktioniert. Mit JS: zwei Tabs oben, eine Seite versteckt. */
    .mobile-transfer-stack {
        /* Markiert vom JS via applyMobileTabLayout(). */
    }
    .mobile-transfer-stack[data-active="partner"] td.hero,
    .mobile-transfer-stack[data-active="hero"]    td.tradingPartner { display: none; }
    /* Partner-Header in der Tabelle (Name + ggf. Füllstand-Bild) wird in die
       Sticky-Summary gespiegelt — der originale <th> ist dann redundant. */
    .mobile-transfer-stack table.transfer th:nth-child(2) { display: none; }

    /* === Tab-Bar (vom JS vor der Tabelle injiziert) === */
    .mobile-transfer-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;
        margin-bottom: var(--space-xs);
    }
    /* .mobile-transfer-tab-Styling lebt jetzt zentral in
       antamar_mobile_patterns.css (gemeinsam mit .mobile-tab). */

    /* === Sticky-Summary (Partner-Bild, Name, Auflastung) === */
    .mobile-transfer-summary {
        display: flex;
        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;
        margin-bottom: var(--space-sm);
        border-bottom: 1px solid var(--mobile-border-very-soft);
        min-height: var(--touch-target-min);
    }
    .mobile-transfer-summary .summary-image {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-transfer-summary .summary-image img {
        max-width: 100%;
        max-height: 100%;
        margin: 0;
    }
    .mobile-transfer-summary .summary-body {
        flex: 1;
        min-width: 0;
    }
    .mobile-transfer-summary .summary-title {
        font-size: 0.95em;
        color: var(--mobile-text);
        font-weight: 600;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-transfer-summary .summary-meta {
        font-size: 0.85em;
        color: var(--mobile-text-soft);
        line-height: 1.2;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ============================================================
     * Mengen-Wahl-Modal (mBox.Modal aus Transfer.popup())
     *
     * mbox-mobile-defaults.js setzt width: 90vw + closeOnBodyClick.
     * Hier zusätzlich: max-height + interner Scroll, Touch-Targets
     * für Inputs (.input_zahl, .gulden, .thaler, .groschen),
     * voll-breite Footer-Buttons, kompakte Auswahl-Tabelle.
     * ============================================================ */
    .mBox.Modal {
        max-width: 95vw;
        max-height: 85vh;
    }
    .mBox.Modal .mBoxContainer {
        max-height: 85vh;
        display: flex;
        flex-direction: column;
    }
    .mBox.Modal .mBoxContent {
        max-height: calc(85vh - 110px);  /* Title + Footer Platz */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-md);
    }
    .mBox.Modal .mBoxTitle {
        padding: var(--space-sm) var(--space-md);
        font-size: 1em;
    }

    /* Footer: Buttons als voll-breite Aktion (OK voll, Abbrechen secondary). */
    .mBox.Modal .mBoxFooterContainer { padding: var(--space-sm) var(--space-md); }
    .mBox.Modal .mBoxButtonContainer {
        display: flex;
        gap: var(--space-sm);
        text-align: center;
        justify-content: stretch;
    }
    .mBox.Modal .mBoxButton {
        flex: 1;
        min-height: var(--touch-target-min);
        margin: 0;
        padding: var(--space-xs) var(--space-md);
        font-size: 1em;
        font-family: inherit;
        cursor: pointer;
    }
    .mBox.Modal .mBoxButton.Cancel {
        background: var(--mobile-chip-bg, #eee);
    }

    /* Mengen-Auswahl-Tabelle (.warentausch) — Zeilen als Block, kompakter. */
    .mBox.Modal table.warentausch {
        width: 100%;
        border-collapse: collapse;
    }
    .mBox.Modal table.warentausch tr {
        border-bottom: 1px solid #ddd;
    }
    .mBox.Modal table.warentausch th,
    .mBox.Modal table.warentausch td {
        padding: var(--space-xs) var(--space-sm);
        vertical-align: middle;
    }
    .mBox.Modal table.warentausch td.cb {
        width: 36px;
    }
    .mBox.Modal table.warentausch td.cb input[type="checkbox"] {
        width: 22px;
        height: 22px;
        cursor: pointer;
    }
    .mBox.Modal table.warentausch td.qlty {
        white-space: nowrap;
        font-size: 0.85em;
        color: #666;
    }

    /* Inputs: Touch-Target-Höhe + sichtbarer Rahmen. */
    .mBox.Modal input.input_zahl,
    .mBox.Modal input.gulden,
    .mBox.Modal input.thaler,
    .mBox.Modal input.groschen {
        min-height: var(--touch-target-min);
        font-size: 1em;
        padding: var(--space-xs) var(--space-sm);
        border: 1px solid #999;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .mBox.Modal input.input_zahl {
        width: 4em;
        text-align: center;
    }
    .mBox.Modal input.gulden { width: 3.5em; margin-left: 0; }
    .mBox.Modal input.thaler,
    .mBox.Modal input.groschen { width: 2.5em; margin-left: var(--space-xs); }

    /* Select-All/None-Links und "Alles übernehmen" als Chip-Look. */
    .mBox.Modal a.select_all,
    .mBox.Modal a.select_none,
    .mBox.Modal a.p_all {
        display: inline-block;
        min-height: 36px;
        line-height: 36px;
        padding: 0 var(--space-sm);
        margin-right: var(--space-xs);
        border-radius: 4px;
        text-decoration: none;
        background: var(--mobile-chip-bg, #f0f0f0);
        font-size: 0.9em;
    }
}

/**
 * Reise
 */
table.reise { text-align: center; margin: auto; }
table.reise div#CountDownBoxRU { text-align: left; }
div.reisemoeglichkeiten { text-align: center; width: 98%; margin: auto; }
div.reisemoeglichkeiten .begleiter_ungeeignet { margin:10px; font-style:italic; }
table.reisemoeglichkeiten td { text-align: left; }
table.reisemoeglichkeiten div.wiki_link { text-align: center; }
table.reisemoeglichkeiten ul { list-style-type: none; margin: 0; padding: 0; }
table.reisemoeglichkeiten ul li { margin-top: 5px; }

/* Hafenbild responsiv — verhindert horizontalen Overflow (640px-Bild) auf allen
 * Viewports (das fixe Bild ueberlaeuft auch schmale Desktop-Fenster). */
.hafenImgContainer     { max-width: 100%; margin: 0 auto var(--space-md); text-align: center; }
.hafenImgContainer img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 6px; }

/* ── Mobile: Reiseziele als Cards (Hafen/Ortsausgang/Kutsche teilen wegweiser.inc.php) ──
 * Markup-Hooks: <span class="ziel-meta"> (Land/Entfernung/Richtung) und
 * <span class="ziel-reise"> (Schiffsauswahl + Dauer + Kosten). Card-Regeln auf die
 * ID #wegweiser_ul gescopt; .ziel-meta/.ziel-reise zusaetzlich unter #wegweiser_ul li,
 * damit sie nicht ins Leaflet-Popup lecken (AntamarMap kopiert den <small>-innerHTML). */
@media (max-width: 770px) {
  .hafen .hafenImgContainer img { border: 1px solid var(--mobile-border-soft); }

  /* Box-Geometrie entspannen: volle Breite, linksbuendiger Lesefluss.
   * table-layout:fixed zwingt die Einzelzelle auf Containerbreite, sodass die
   * Cards/Karte umbrechen statt den Viewport zu sprengen. */
  div.reisemoeglichkeiten { width: 100%; text-align: left; }
  table.reisemoeglichkeiten { width: 100%; table-layout: fixed; }

  /* Card pro Reiseziel */
  #wegweiser_ul { list-style: none; margin: 0; padding: 0; }
  #wegweiser_ul > li {
    display: block;
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm);
    background: var(--mobile-surface-2);
    border: 1px solid var(--mobile-border-soft);
    border-radius: 8px;
    min-width: 0;
    overflow-wrap: break-word;
    line-height: var(--mobile-line-height);
    color: var(--mobile-text);
  }

  /* Zielname als Card-Header — Link (buchbar) und Nicht-Link (forbidden) gleich gross */
  #wegweiser_ul > li > a,
  #wegweiser_ul > li > .zielortname {
    display: block;
    font-size: var(--mobile-font-h3);
    font-weight: 700;
  }
  /* Nur der echte Link ist ein 44px-Touch-Target und sieht tappbar aus */
  #wegweiser_ul > li > a {
    display: flex;
    align-items: center;
    min-height: var(--touch-target-min);
    padding: var(--space-xs) var(--space-sm);
    margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) var(--space-xs);
    border-bottom: 1px solid var(--mobile-border-very-soft);
    border-radius: 8px 8px 0 0;
    color: var(--mobile-accent);
    text-decoration: none;
  }
  #wegweiser_ul > li > a::after { content: "\203A"; margin-left: auto; opacity: 0.6; }
  #wegweiser_ul > li > a:active { background: var(--mobile-surface-2-hover); }
  /* forbidden: nicht-tappbar, gedaempft */
  #wegweiser_ul > li > .zielortname { color: var(--mobile-text-secondary); margin-bottom: var(--space-xs); }

  /* Meta-Zeile + Controls-Zeile lesbar */
  #wegweiser_ul > li small { font-size: var(--mobile-font-base); color: var(--mobile-text-soft); }
  #wegweiser_ul li .ziel-meta  { display: block; color: var(--mobile-text-soft); margin-bottom: var(--space-sm); }
  #wegweiser_ul li .ziel-reise { display: block; }

  /* Schiffsauswahl als Touch-Target (ueberschreibt globales .klein{75%} nur hier) */
  #wegweiser_ul select.klein {
    display: inline-block;
    min-height: var(--touch-target-min);
    max-width: 100%;
    margin: var(--space-xs) 0;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--mobile-font-base);
    font-family: inherit;
    color: var(--mobile-text);
    background: var(--mobile-chip-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 6px;
    vertical-align: middle;
  }

  /* Dauer & Kosten hervorheben (inneren nowrap-Muenzspan nicht anfassen) */
  #wegweiser_ul .dauer,
  #wegweiser_ul .ww_dauer { font-weight: 600; white-space: nowrap; color: var(--mobile-text); }
  #wegweiser_ul .kosten     { font-weight: 700; color: var(--bar-gold-color); }
  #wegweiser_ul .kosten img { height: 0.95em; width: auto; vertical-align: baseline; }

  /* Land-Modus: forbidden-Hinweis als eigener Warn-Block */
  #wegweiser_ul .forbidden {
    display: block;
    margin-top: var(--space-xs);
    color: var(--mobile-warn-text);
    font-style: italic;
    font-weight: 600;
  }

  /* Bottom-Actions als komfortable Tap-Controls */
  #wegweiser .gruppe_verwaltung_box > a,
  #wegweiser > div[align="center"] > a {
    display: block;
    min-height: var(--touch-target-min);
    margin: var(--space-sm) auto 0;
    padding: var(--space-sm) var(--space-md);
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    font-size: var(--mobile-font-base);
    color: var(--mobile-text);
    background: var(--mobile-surface-2);
    border: 1px solid var(--mobile-border);
    border-radius: 8px;
  }
  #wegweiser .gruppe_verwaltung_box > a:active,
  #wegweiser > div[align="center"] > a:active { background: var(--mobile-surface-2-hover); }
}

/* Links in der Reisebox separieren */
a#link_reise_weiter,
a#umdrehen_link,
a#link_rasten {
  display: block;
  margin-top: 0.5em;
}

/**
 * Reise-Steuerung Container (Reiten + Gewaltmarsch nebeneinander)
 */
.reise_controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 8px 0;
    padding: 5px 0;
}

/**
 * Reiten-Steuerung in Reisebox
 */
.reiten_controls {
    display: flex;
    align-items: center;
}

.reiten_icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.reiten_controls label {
    cursor: pointer;
    vertical-align: middle;
}

.reiten_controls input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 3px;
}

.reiten_deaktiviert {
    color: #888;
    font-style: italic;
    cursor: help;
    font-size: 90%;
}

/* Gelände-Warnungen */
.reiten_warnung {
    padding: 6px 10px;
    margin: 5px 0;
    border-radius: 3px;
    font-size: 90%;
}

.reiten_warnung.gelaende_mittel {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.reiten_warnung.gelaende_schwer {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

/**
 * Gewaltmarsch-Steuerung in Reisebox
 */
.gewaltmarsch_controls {
    margin: 8px 0;
    padding: 8px 0;
    border-top: 1px dotted #ccc;
    display: block;
}

.gewaltmarsch_icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

.gewaltmarsch_icon_disabled {
    opacity: 0.4;
}

.gewaltmarsch_btn {
    padding: 6px 12px;
    background-color: #5a8f5a;
    color: #fff;
    border: 1px solid #4a7f4a;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    vertical-align: middle;
}

.gewaltmarsch_btn:hover {
    background-color: #4a7f4a;
}

.gewaltmarsch_btn_disabled,
.gewaltmarsch_btn:disabled {
    background-color: #999;
    border-color: #888;
    cursor: not-allowed;
    opacity: 0.7;
}

.gewaltmarsch_hinweis {
    display: block;
    color: #666;
    font-size: 11px;
    margin-top: 4px;
}

.gewaltmarsch_cooldown {
    display: inline-block;
    margin-left: 8px;
    color: #888;
    font-size: 12px;
    font-style: italic;
}

.gewaltmarsch_deaktiviert {
    color: #888;
    font-style: italic;
    font-size: 90%;
}

.gewaltmarsch_erfolg {
    padding: 8px 12px;
    margin: 8px 0;
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
    border-radius: 4px;
    font-size: 13px;
}

/**
 * Nachrichten
 */
#nachrichten_form .mentorKontaktBox { float:right; padding-right:20px; }
#nachrichten_form .nachunten { margin:0 auto; text-align:center; width:100px; margin-bottom:10px; }

/* Nachrichtenverlauf */
ul.nachrichtenverlauf {
    list-style-type: none !important;
    list-style: none !important;
    list-style-image: none !important;
    padding-left: 0 !important;
    margin: 10px 0;
}

ul.nachrichtenverlauf li {
    padding: 8px 15px;
    margin-bottom: 5px;
    border-radius: 3px;
    background-color: #fff4df;
    border: 1px solid #e5d5bc;
    text-shadow: none !important;
}

ul.nachrichtenverlauf li:hover {
    background-color: #ffeccc;
}

ul.nachrichtenverlauf li.active {
    background-color: #f0e8c0;
    font-weight: bold;
    border-left: 3px solid #c0a060;
    padding-left: 12px;
}

ul.nachrichtenverlauf a {
    display: block;
    text-decoration: none;
    color: #402C13;
    text-shadow: none !important;
}

ul.nachrichtenverlauf a:hover {
    text-decoration: underline;
}

/* Nachrichten Tab-Navigation - erbt Button-Styles vom Theme */
.nachrichten-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
}
.nachrichten-tabs .tab {
    display: inline-block;
    padding: 6px 14px;
    text-decoration: none;
    font-variant: small-caps;
    cursor: pointer;
    /* Fallback-Werte, werden von Themes überschrieben */
    border: 1px solid #402C13;
    background-color: #FEEFD2;
    color: #000;
}
.nachrichten-tabs .tab:hover {
    opacity: 0.85;
}
.nachrichten-tabs .tab.active {
    font-weight: bold;
    box-shadow: inset 0 -3px 0 0 #402C13;
}

/* Nachrichten Editor - Grundstyles, werden von Themes überschrieben */
.nachrichten-editor {
    max-width: 600px;
    margin: 20px auto;
    padding: 15px;
    /* Fallback-Werte */
    background: #FEEFD2;
    border: 1px solid #402C13;
    border-radius: 4px;
}
.nachrichten-editor h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #402C13;
}
.editor-row {
    margin-bottom: 12px;
}
.editor-row label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}
.editor-row input[type="text"],
.editor-row select,
.editor-row textarea {
    width: 100%;
    box-sizing: border-box;
}
.editor-row textarea {
    min-height: 120px;
}
.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #e5d5bc;
}
.button-primary {
    font-weight: bold;
}

/* Nachrichten Filter */
.nachrichten-filter {
    margin-bottom: 10px;
}
.nachrichten-filter label {
    margin-right: 5px;
}

/* Nachrichten DataTables Styling */
#nachrichten_wrapper {
    margin-bottom: 15px;
}
#nachrichten_wrapper .dataTables_length,
#nachrichten_wrapper .dataTables_filter {
    margin-bottom: 10px;
}
#nachrichten_wrapper .dataTables_info {
    padding-top: 10px;
}
#nachrichten.dataTable thead th {
    background-color: #402C13;
    color: #FEEFD2;
    border-bottom: 1px solid #402C13;
}
#nachrichten.dataTable tbody tr:hover {
    background-color: #fff4df !important;
}
#nachrichten.dataTable tbody tr.odd {
    background-color: #FEEFD2;
}
#nachrichten.dataTable tbody tr.even {
    background-color: #FFF8E8;
}
#nachrichten.dataTable td {
    padding: 5px 10px;
}
.nachrichten-actions {
    margin-top: 10px;
    padding: 10px 0;
}

/* RP-Liste DataTables Styling (identisch zu Nachrichten) */
#rp_liste_wrapper {
    margin-bottom: 15px;
}
#rp_liste_wrapper .dataTables_length,
#rp_liste_wrapper .dataTables_filter {
    margin-bottom: 10px;
}
#rp_liste_wrapper .dataTables_info {
    padding-top: 10px;
}
#rp_liste.dataTable thead th {
    background-color: #402C13;
    color: #FEEFD2;
    border-bottom: 1px solid #402C13;
}
#rp_liste.dataTable tbody tr:hover {
    background-color: #fff4df !important;
}
#rp_liste.dataTable tbody tr.odd {
    background-color: #FEEFD2;
}
#rp_liste.dataTable tbody tr.even {
    background-color: #FFF8E8;
}
#rp_liste.dataTable td {
    padding: 5px 10px;
}

/**
 * Spiegelung, z.B. von Bildern
 */
.flip-horizontal {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}
.flip-vertical {
  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
}

/**
 * Quest-Maze-Hero
 */
img.northward {
  display: block;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);
}
img.eastward {
  display: block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
}
img.southward {
  display: block;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
}
img.westward {
  display: block;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  transform:rotate(270deg);
}

/*
 * Sortierpfeile
 */
.table-th-sort-span {
  background: url(../bilder/sortierpfeile.png) no-repeat right transparent;
  cursor: pointer;
  padding: 8px;
}

/**
 * Tooltip styles 
 */

/* Standard Tooltip */
.antamar { max-width: 250px; z-index: 5000; border: 1px solid #cc9e64; }
.antamar .tip { border: none; color: black;}
.antamar .tip-title { padding: 5px; background: #402C13; color: #fff; font: bold 12px Georgia, serif; }
.antamar .tip-title img { margin: 3px; }
.antamar .tip-text { padding: 5px; background: #FFD98F; color: black; font: 11px Arial, Helvetica, sans-serif; text-shadow: none; }

/* für große Bildanzeige */
.tooltip_img { border: 1px solid #402C13; z-index: 5001; }
.tooltip_img .tip { border: none; }
.tooltip_img .tip-title { display: none; }
.tooltip_img .tip-text { padding: 5px; background: #FFD98F; }

/* für transparenten Hintergrund */
.transparent { max-width: 250px; border: none; z-index: 5002; }
.transparent .tip { border: none; } /* wichtig, sonst wird unten ein dotted rand angezeigt */
.transparent .tip-text { background: transparent; font: 11px Arial, Helvetica, sans-serif; }

.held_tip { background: transparent url(../bilder/tooltip.png) no-repeat top; width: 279px; height: 171px; text-align: center; line-height: normal; z-index: 5003; }
.held_tip .tip { font-style: italic; font-weight: bold; font-size: 1em; border: none; }
.held_tip .tip-title { padding: 10px 0 0 0; }
.held_tip .tip-text { font-size: 0.9em; padding: 0 5px; }

/**
 * Waffen/Rüstungs-Detail-Panel (Händler-Vergleich)
 */
.waffe-detail-panel,
.ruestung-detail-panel {
    background: #FFF8E7;
    border: 1px solid #cc9e64;
    border-radius: 4px;
    padding: 10px;
    margin: 5px 0;
}
.waffe-detail-panel .panel-header,
.ruestung-detail-panel .panel-header {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #cc9e64;
}
.waffe-detail-panel .panel-status,
.ruestung-detail-panel .panel-status {
    margin-bottom: 8px;
    font-size: 0.95em;
}
.waffe-detail-panel .panel-status .status-ok,
.ruestung-detail-panel .panel-status .status-ok { color: #228B22; }
.waffe-detail-panel .panel-status .status-replace,
.ruestung-detail-panel .panel-status .status-replace { color: #CC6600; }
.waffe-detail-panel .panel-status .status-warn,
.ruestung-detail-panel .panel-status .status-warn { color: #CC0000; }
.waffe-detail-panel .panel-status .status-info,
.ruestung-detail-panel .panel-status .status-info { color: #336699; }
.waffe-detail-panel .close-btn,
.ruestung-detail-panel .close-btn {
    float: right;
    cursor: pointer;
    font-size: 1.2em;
    color: #402C13;
}
.waffe-detail-panel .close-btn:hover,
.ruestung-detail-panel .close-btn:hover { color: #CC0000; }
.waffe-detail-panel table,
.ruestung-detail-panel table {
    width: 100%;
    border-collapse: collapse;
}
.waffe-detail-panel th,
.ruestung-detail-panel th {
    background: #402C13;
    color: #fff;
    padding: 5px 10px;
    text-align: center;
    font-weight: normal;
}
.waffe-detail-panel td,
.ruestung-detail-panel td {
    padding: 5px 10px;
    border-bottom: 1px solid #e0d0b0;
    text-align: center;
}
.waffe-detail-panel th.label-col,
.waffe-detail-panel td.label-col,
.ruestung-detail-panel th.label-col,
.ruestung-detail-panel td.label-col {
    text-align: left;
}
.waffe-detail-panel tr:last-child td,
.ruestung-detail-panel tr:last-child td { border-bottom: none; }
.waffe-detail-panel .label-col,
.ruestung-detail-panel .label-col { font-weight: bold; width: 30%; }
.waffe-detail-panel .diff-better,
.ruestung-detail-panel .diff-better { color: #228B22; font-weight: bold; }
.waffe-detail-panel .diff-worse,
.ruestung-detail-panel .diff-worse { color: #CC0000; font-weight: bold; }
.waffe-detail-panel .diff-equal,
.ruestung-detail-panel .diff-equal { color: #666; }
.waffe-detail-panel .no-weapon,
.waffe-detail-panel .no-armor,
.ruestung-detail-panel .no-weapon,
.ruestung-detail-panel .no-armor { font-style: italic; color: #666; }
.ruestung-detail-panel .rassenboni { font-style: italic; font-size: 0.85em; font-weight: normal; }
.ruestung-detail-panel .ruestung-auswahl {
    margin-bottom: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #e0d0b0;
}
.ruestung-detail-panel .ruestung-auswahl label { cursor: pointer; }
.ruestung-detail-panel .ruestung-auswahl select {
    margin-left: 8px;
    padding: 2px 4px;
}
.ruestung-detail-panel .status-warn-inline {
    color: #CC0000;
    font-size: 0.85em;
    margin-left: 8px;
}
.ruestung-detail-panel .label-col { width: 20%; }
.ruestung-detail-panel .already-equipped-info {
    font-style: italic;
    color: #666;
    padding: 5px 0;
}
.waffe-detail-toggle,
.ruestung-detail-toggle { cursor: pointer; display: inline-block; }
.waffe-detail-toggle:hover,
.ruestung-detail-toggle:hover { opacity: 0.7; }
tr.waffe-detail-row,
tr.ruestung-detail-row { background: #FFF8E7; }
tr.waffe-detail-row > td,
tr.ruestung-detail-row > td { padding: 0; }

/**
 * RP-Übersicht
 */
#rpsite form { margin: 10px 0 30px 0; }
#rpsite fieldset { width: 550px; margin: 0 auto; text-align: left; }
#rpsite legend { font-weight: bold; }
#rpsite fieldset div.f { margin-bottom: 20px; }
#rpsite div.delFraktionBox { float: right; }
#rpsite .topnav { margin: 0 0 10px 0; }
#rpsite .form_uebergabe p { font-size: 85%; margin: 0; } 
#rpsite .fraktionenContainer { margin-top: 50px; }
#rpsite .fraktionenContainer .fraktionBox { width: 440px; display:inline-block; margin: 10px; vertical-align: top; }
#rpsite .fraktionenContainer fieldset { width: 420px; }
#rpsite .fraktionenContainer .input_long { width: 380px; }
#rpsite .fraktionenContainer td { padding: 3px; }
div.participant, div.leader { padding: 0.2em; }

table.rpInfoTable th { text-align: right; }
table.rpInfoTable th.rp_title { text-align: center; font-size: 160%; line-height: 160%; }
table.rpInfoTable td { text-align: left; min-width: 300px; padding: 7px; }
table.rpInfoTable h3 { text-align: left; }
table.rpInfoTable div.fr_trenner { height: 30px; }
table.rpInfoTable div.fr .f_infotxt { margin-bottom: 10px; }
div.rpKommBox { margin: 80px auto; width: 80%; }
div.rpKommBox .fr_name { display: inline; color: #402c13; font-variant: small-caps; }
div.rpKommBox .fr_name:first-letter { color: #ad4234; }
div.rpKommBox .chat_title, div.rpKommBox .fr_file_title { font-weight: bold; margin: 4px 0; }
div.rpKommBox .fr_filelist { padding-top: 10px; }
div.rpKommBox .fr_interna {
  width: 98%;
  padding: 5px;
  margin-bottom: 5px;
  background-color: #FBF9F9;
  color: black;
  moz-box-shadow: 4px 4px 3px #888;
  -webkit-box-shadow: 4px 4px 3px #888;
  box-shadow: 4px 4px 3px #888;
} 

/* Mootools Form Upload */
.droppable { border: #ccc 1px solid; border-radius: 8px; background: #eee; color: #666; padding: 20px; margin: 10px; clear: both; text-align: center; }
.droppable { display: none; }
.droppable.hover { background: #ddd; }
.uploadList { margin: 0; padding: 0; list-style: none; }
.uploadItem { overflow: hidden; border-bottom: #BCBCBC 1px solid; margin: 0 20px; padding: 3px; }
.uploadItem span { overflow: hidden; width: 300px; float: left; display: block; }
a.addInputRow, a.delInputRow, .uploadItem a { display: inline-block; background: url(../bilder/file-upload-add.png) no-repeat; height: 16px; width: 16px; text-indent: -999px; }
.uploadItem a { float: left; display: block; padding-left: 20px; background-image: url(../bilder/file-upload-delete.png); }
a.delInputRow { background-image: url(../bilder/file-upload-delete.png); }
.progress { margin: 5px 0; height: 15px; border-radius: 3px; background: #545A74; }
a.delFile { padding-left: 10px; }

/* TinyMCE Hack to hide the path in statusbar */
.mce-path { display: none !important; }

/* Blendet Text aus ohne ihn für Screenreader zu sperren. */
.unsichtbar {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}


/* ablegen Link in Kampfseite */
span.ablegen_link a{
  position: relative;
  top: -1rem;
  color: #1a39ff;
  text-shadow: none;
  background-color: #0a0a0a61;
  font-weight: bold;
}

span.ablegen_link.hidden_link a{
  display: none;
}

/* Item-Container — Layout-Wrapper für Warenbilder (Drag&Drop / TouchEquip) */
.ware-container {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.ware-container:hover {
    z-index: 100;
}

/* Inline-Button für Simple-Design (ohne Warenbild) */
.fab-action-inline {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.fab-action-inline.ablegen {
    background: linear-gradient(135deg, #c45a3d 0%, #8b3a23 100%);
    color: white;
    border: 1px solid #6a2a18;
}

.fab-action-inline.ablegen:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(139, 58, 35, 0.4);
}

span.broken_weapon img{
  position: relative;
  top: -4.5rem;
}

.button:disabled{
  box-shadow: none;
  text-shadow: none;
  background-color: lightgrey;
  color: darkgray;
}

.button:disabled:hover{
  transform: none;
  box-shadow: none;
 }

.wp-block-image img{
  max-width: 98%;
  height: 100%;
}

/* Flüssige Größenänderung für Bombast-Kacheln */
.smooth-resize {
  transition: height 0.3s ease-out;
}

/*
 * Globale Mobile-Container-Caps (alle Designs).
 * Fixe Pixelbreiten an Pergament, Buch, Heldenbrief usw. werden auf <600 px
 * abgekappt, damit der Spielinhalt in den Phone-Viewport passt.
 */
@media (max-width: 600px) {
    /* Heldenbrief */
    div.heldenbrief { width: 100%; padding: 10px; box-sizing: border-box; }

    /* Buch-Quest: zwei Seiten gestapelt statt nebeneinander */
    div.buch_zweiseitig {
        width: 100%;
        height: auto;
        background: none;
        border: 1px solid #c0a080;
        padding: 10px;
        box-sizing: border-box;
    }
    div.buch_linke_seite,
    div.buch_rechte_seite {
        float: none;
        width: 100%;
        height: auto;
        padding: 10px 0;
    }
    div.seitenzahl_l,
    div.seitenzahl_r {
        float: none;
        width: 100%;
        padding: 0;
    }

    /* Pergament-Quest */
    div.pergament {
        width: 100%;
        max-width: 460px;
        height: auto;
        min-height: 400px;
        background-size: contain;
        background-position: center top;
        padding: 8% 10% 8% 12%;
        box-sizing: border-box;
    }

    /* Login-MobileHint: min-width raus */
    form.loginForm div.mobileHint { min-width: 0; }

    /* Heldeninfo-Waffenbilder kappen */
    div#heldeninfo span.waffe_rechts img,
    div#heldeninfo span.waffe_links img { max-width: 80px; height: auto; }

    /* Breite Tabellen werden zu eigenen Scroll-Wrappern (verhindert page-overflow).
       Scroll-Schatten (Lea-Verou-Pattern) wie in .kampfTabelle: rechter Schatten
       zeigt verbleibenden Inhalt, verschwindet beim Erreichen des Endes.
       Wir adressieren sowohl die Tabellen selbst als auch DataTables-Wrappers
       (.dataTables_wrapper umschließt sortierbare/markt-Tabellen). */
    table.sortable,
    table.gepaeckansicht,
    table.handelsfunktion,
    table.liste,
    table.haendlertransfer:not(.haendler-kauftabelle),
    .dataTables_wrapper,
    .transferContainer {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        /* Scroll-Schatten: linke und rechte Kante deutlich sichtbar machen.
           Reicht der Inhalt über die Kante hinaus, bleibt der Schatten
           "kleben" (background-attachment: scroll für die radial-gradient).
           Inhalt, der bündig endet, schiebt den Linear-Gradient (local) weg. */
        background:
            linear-gradient(to right, rgba(20,15,10,1) 0%, rgba(20,15,10,0) 100%) left center / 28px 100% no-repeat,
            linear-gradient(to right, rgba(20,15,10,0) 0%, rgba(20,15,10,1) 100%) right center / 28px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(193,171,73,0.9), transparent) left center / 16px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(193,171,73,0.9), transparent) right center / 16px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
    /* Innere nested-Tables in transferContainer (Markt/Händler/Lagerhaus) auf
       max-content lassen, sodass dataTables_wrapper scrollen kann statt das
       Layout aufzublähen. */
    .transferContainer > table {
        max-width: none;
        width: auto;
    }
    /* DataTable selbst behält ihre natürliche Breite, der Wrapper scrollt.
       Sonst quetschen die Spalten und Preis/Menge/Aktion fallen zusammen.
       Ausnahme: table.gepaeckansicht hat ein eigenes Card-Layout (Z. 3654 ff.)
       und muss strikt auf 100% bleiben — sonst sprengen lange Beschreibungen
       (z.B. Waffe "Mackes") die Cards horizontal aus dem Viewport. */
    .dataTables_wrapper > table.dataTable:not(.gepaeckansicht):not(.haendler-kauftabelle) {
        width: max-content !important;
        min-width: 100%;
        max-width: none;
    }

    /* mBox-Modals dem Phone-Viewport anpassen */
    .mBox.Modal,
    .mBoxContainer {
        width: calc(100vw - 2 * var(--space-md)) !important;
        max-width: 100% !important;
        left: var(--space-md) !important;
        right: var(--space-md) !important;
        max-height: calc(100vh - 2 * var(--space-lg)
            - var(--mobile-topbar-height) - var(--mobile-bottombar-height)) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mBoxContent { padding: var(--space-md); }
    .mBoxButtonContainer {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
    .mBoxButton {
        min-height: var(--touch-target-comfort);
    }
}

/* Tooltip-Touch: touch-action: manipulation verhindert iOS-Standard-Long-Press
   (Lupe, Selection), sodass unser eigener Long-Press greift. */
@media (pointer: coarse) {
    .tip, .tip2, .utip, img.tooltip_big_img,
    span.tooltip, span.tipimg, span.heldanzeige {
        touch-action: manipulation;
    }
    .antamar, .tooltip_img, .transparent, .held_tip {
        max-width: 90vw;
        z-index: var(--z-tooltip);
    }
}

/* TouchEquip: Tap-Pick / Tap-Place — Visualisierung */
.touch-picked {
    outline: 3px solid var(--mobile-accent-strong);
    outline-offset: 2px;
    box-shadow: 0 0 12px rgba(204, 169, 53, 0.7);
}
.touch-drop-target {
    background-image: url(bilder/green_bg.png) !important;
    outline: 2px dashed #4a7c23;
    cursor: pointer;
}
.touch-equip-hint {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(var(--mobile-bottombar-height) + var(--safe-bottom) + var(--space-md));
    transform: translateX(-50%);
    background: var(--mobile-hint-bg);
    color: var(--mobile-text);
    padding: 8px 16px;
    border: 1px solid var(--mobile-accent);
    border-radius: 20px;
    z-index: var(--z-toast);
    font-size: 0.9em;
    white-space: nowrap;
    pointer-events: none;
}

/** Mobile-Bars: Höhen-Reservierung am body, statt margin-top-Hack im Bombast **/
@media (max-width: 770px) {
    /* !important nötig, weil Design-Stylesheets (z. B. bombast) body { padding: 0 }
       weiter unten in der Cascade setzen und Mobile-Layout aber Platz für die
       Top/Bottom-Bars reservieren muss. */
    body {
        padding-top: calc(var(--mobile-topbar-height) + var(--safe-top)) !important;
        padding-bottom: calc(var(--mobile-bottombar-height) + var(--safe-bottom)) !important;
    }
    .div-mobile-bar {
        height: var(--mobile-topbar-height);
        padding-top: var(--safe-top);
        box-sizing: content-box;
    }
    .div-mobile-menu {
        padding-bottom: var(--safe-bottom);
        box-sizing: content-box;
    }
}

/** Mobile-Toolbars **/
.div-mobile-menu{
    display: none; /* Versteckt das Menü standardmäßig */
    position: fixed; /* Fixiert das Menü am unteren Rand des Bildschirms */
    bottom: 0;
    width: 100%; /* Stellt sicher, dass das Menü die volle Breite einnimmt */
    background-color: var(--mobile-surface);
    color: var(--mobile-text);
    /* Trennlinie nach oben, damit die Bar sich auf hellen Skins
       (Pergament/Classic/Antamar/Simple) klar vom Spielinhalt absetzt. */
    border-top: 1px solid var(--mobile-border);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.12);
    z-index: 1000; /* Stellt sicher, dass das Menü über anderen Elementen liegt */
}

.div-mobile-bar{
    display: none; /* Versteckt das Menü standardmäßig */
    position: fixed; /* Fixiert das Menü am oberen Rand des Bildschirms */
    top: 0;
    width: 100%; /* Stellt sicher, dass das Menü die volle Breite einnimmt */
    background-color: var(--mobile-surface);
    color: var(--mobile-text);
    /* Trennlinie nach unten, analog Bottom-Bar */
    border-bottom: 1px solid var(--mobile-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    z-index: 1000; /* Stellt sicher, dass das Menü über anderen Elementen liegt */
}

.ul-mobile-menu, .ul-mobile-bar {
    list-style: none; /* Entfernt Aufzählungszeichen */
    margin: 0; /* Entfernt den Standardaußenabstand */
    padding: 0; /* Fügt vertikale Polsterung hinzu */
    display: flex; /* Aktiviert Flexbox für die Liste */
    justify-content: center; /* Zentriert die Listenelemente horizontal */
    align-items: center; /* Vertikale Ausrichtung der Listenelemente */
}

.ul-mobile-menu li,  .ul-mobile-bar li{
    flex: 1; /* Gibt jedem Listenelement eine flexible Basisbreite */
    text-align: center; /* Zentriert den Text innerhalb jedes Listenelements */
    display: flex;
    flex-direction: column; /* Um das zweite Bild unter dem ersten zeigen zu können */
    align-items: center;  /* Zentriert die Bilder horizontal */
    justify-content: center; /* Zentriert die Bilder vertikal */
}

.ul-mobile-bar {
    height: 3.1em;
}

.ul-mobile-bar li img {
    position: absolute;   /* Absolute Positionierung innerhalb des li-Elements */
    max-width: 100%;      /* Stellt sicher, dass das Bild innerhalb der Grenzen des li-Elements bleibt */
}

.ul-mobile-bar li img.first-bar {
    z-index: 2;           /* Stellt sicher, dass das erste Bild über dem zweiten liegt */
}

.ul-mobile-bar li img.second-bar {
    transform: scaleX(-1); /* Spiegelt das Bild vertikal */
    z-index: 1;           /* Stellt das zweite Bild hinter das erste */
}

.ul-mobile-menu li a {
    text-decoration: none; /* Entfernt Unterstreichungen von Links */
    color: var(--mobile-text);
    display: block; /* Streckt den Link auf die volle Breite des Listenelements */
    /* Horizontal-Padding via clamp damit 5 Tabs auf <360 px Viewports passen
       (sonst forciert 20px-Padding eine Mindestbreite von ~440 px, und die
       äußeren Tabs Reise/Held laufen aus dem Viewport raus). */
    padding: 10px clamp(2px, 2vw, 20px);
    box-sizing: border-box;
}

.ul-mobile-menu li a img {
    height: 2em;
}

.ul-mobile-bar li img {
    height: 3em;
}

/*
 * Mobile-Topbar: kompakte Wertdarstellung.
 * LP/AP/BE/G/EP haben jetzt ein Label-Wert-Paar. Label klein und gedämpft,
 * Wert größer und farbcodiert. Trennlinien zwischen den Stat-Items helfen,
 * die dicht gepackten Werte auf 375-px-Viewports auseinanderzuhalten.
 */
.ul-mobile-bar .bar-lep,
.ul-mobile-bar .bar-asp,
.ul-mobile-bar .bar-be,
.ul-mobile-bar .bar-gold,
.ul-mobile-bar .bar-ep {
    border-right: 1px solid var(--mobile-border-very-soft);
    min-width: 0;
}
.ul-mobile-bar .bar-label {
    display: block;
    font-size: 0.6em;
    line-height: 1;
    opacity: 0.75;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ul-mobile-bar .bar-value {
    display: block;
    font-size: 0.9em;
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* Werte dürfen über den Item-Slot hinausragen, weil ellipsis hier
       schlimmer wäre als minimaler visueller Overlap. Der title-Attribut
       am <li> liefert den Vollwert. */
    overflow: visible;
}
.ul-mobile-bar .bar-unit {
    display: block;
    font-size: 0.6em;
    line-height: 1;
    opacity: 0.75;
}
.ul-mobile-bar .bar-lep .bar-value { color: var(--bar-lep-color); }
.ul-mobile-bar .bar-asp .bar-value { color: var(--bar-asp-color); }
.ul-mobile-bar .bar-gold .bar-value { color: var(--bar-gold-color); }
.ul-mobile-bar .bar-be .bar-value { color: var(--bar-be-color); }
.ul-mobile-bar .bar-ep .bar-value { color: var(--bar-ep-color); }
/* Image-Items (Portrait, Waffe, Season) brauchen weniger Höhe als der Text-Stack */
.ul-mobile-bar .bar-portrait img,
.ul-mobile-bar .bar-season img,
.ul-mobile-bar li.mobile-waffen-li img { height: 2.6em; }

/* Season-Item: Icon oben, Datum (Tag + Monatskürzel) klein darunter.
   Override: das generische `.ul-mobile-bar li img { position: absolute }`
   würde das Icon aus dem Flow nehmen und den Date-Span am Top kleben lassen.
   Daher hier static + leicht kleineres Icon, damit beides in die 3.1em-Bar passt. */
.ul-mobile-bar .bar-season {
    position: relative;       /* Anker für Tap-Tooltip ::after */
    cursor: pointer;
}
.ul-mobile-bar .bar-season img {
    position: static;
    height: 2.1em;
}
.ul-mobile-bar .bar-season-date {
    display: block;
    font-size: 0.62em;
    line-height: 1;
    margin-top: 0.15em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.85;
}

/* Tap-Tooltip auf Mobile: zeigt das volle Datum (Wochentag + Monat + Jahreszeit)
   3 s nach Tap. Klasse `.show-tooltip` wird per JS gesetzt/entfernt
   (siehe allgemeines-v20.js, Click-Delegation auf #div-mobile-bar).
   Echtes <span> statt ::after, damit DOM-Replace beim Refresh es ersetzt
   anstatt es als „Geist" stehen zu lassen. */
.ul-mobile-bar .bar-season .bar-season-tip {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--mobile-surface-2);
    color: var(--mobile-text);
    border: 1px solid var(--mobile-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.78em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 1100;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    visibility: hidden;
}
.ul-mobile-bar .bar-season.show-tooltip .bar-season-tip {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Portrait in Mobile-Top-Bar ist Link zur Heldenwahl.
 * Override: das generische `.ul-mobile-bar li img { position: absolute }` (s.o.)
 * würde das Image im Anchor zum 0×0-Element kollabieren lassen (max-width:100%
 * gegen einen 0-breiten Containing Block). Daher hier explizit static. */
.ul-mobile-bar .bar-portrait a {
    position: relative;
    line-height: 0;
    text-decoration: none;
}
.ul-mobile-bar .bar-portrait a img {
    position: static;
}
.ul-mobile-bar .bar-portrait-swap-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mobile-surface-2);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
}

/* Waffen-Zustandsbadge im mobilen Bar */
.ul-mobile-bar li.mobile-waffen-li {
    position: relative;
}

.ul-mobile-bar li.mobile-waffen-li .qualitaets-badge {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.ul-mobile-bar li.mobile-waffen-li .mobile-badge-waffe {
    bottom: 2px;
    left: 2px;
}

.ul-mobile-bar li.mobile-waffen-li .mobile-badge-schild {
    bottom: 2px;
    right: 2px;
}

.ul-mobile-menu li#unreadPM.ungeleseneNachrichten a img {
    box-shadow: 0 0.4em 0.1em -0.1em green;
}

/* Mobile Bottom-Bar: Tab-Bar mit 5 Primary + "Mehr"-Drawer */
.mobile-label {
    display: block;
    font-size: 0.65em;
    color: var(--mobile-text);
    line-height: 1;
    margin-top: 2px;
    white-space: nowrap;
}

.ul-mobile-menu li {
    /* flex-items dürfen unter ihren Inhalt schrumpfen — sonst gewinnt das
       intrinsische min-content der Tabs (Icon-Breite + horizontales Padding)
       gegen flex-basis 0 und 5 Items sprengen 320 px Viewports. */
    min-width: 0;
}
.ul-mobile-menu li a {
    min-height: var(--touch-target-comfort);
}

.ul-mobile-more {
    list-style: none;
    margin: 0;
    padding: var(--space-md);
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--mobile-bottombar-height) + var(--safe-bottom));
    background: var(--mobile-surface);
    border-top: 1px solid var(--mobile-accent);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.6);
    z-index: calc(var(--z-mobile-bar) - 1);
    transform: translateY(100%);
    transition: transform var(--motion-base) var(--motion-ease);
}
.ul-mobile-more.open { transform: translateY(0); }
.ul-mobile-more[hidden] { display: none; }
.ul-mobile-more li {
    list-style: none;
}
.ul-mobile-more li a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    color: var(--mobile-text);
    text-decoration: none;
    min-height: var(--touch-target-comfort);
    border-bottom: 1px solid var(--mobile-border-very-soft);
}
.ul-mobile-more li a img {
    height: 1.5em;
    width: 1.5em;
}

/*
 * Mobile Side-Drawer (Hamburger-Pattern).
 *
 * Triggert wird der Drawer vom button.bar-menu-btn am Ende der ul-mobile-bar
 * (siehe ajax/heldwerte_mobile.php). Auf Desktop bleibt alles display:none,
 * so dass die Drawer-Markup nur auf <=770 px Viewports überhaupt im Layout
 * landet — Desktop-Sicherheit für includes/menu.inc.php bleibt voll erhalten.
 *
 * Aufbau:
 * - .mobile-drawer-backdrop: halbtransparenter Overlay über der ganzen Seite,
 *   fängt Outside-Clicks und dimmt den Hintergrund.
 * - .mobile-side-drawer: aside-Panel, fährt von rechts via translateX rein,
 *   scrollbar wenn die Sektionen länger als der Viewport sind.
 * - .drawer-header: sticky-Titel + Close-Button.
 * - .drawer-section + h3 + ul li a: Kategorie-Block mit Icon + Label.
 */
.mobile-side-drawer {
    display: none;
}
.mobile-drawer-backdrop {
    display: none;
}
.bar-menu-btn {
    display: none;
}

@media (max-width: 770px) {
    .mobile-side-drawer {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        /* dvh sorgt auf iOS für Höhe ohne URL-Bar-Sprünge */
        height: 100dvh;
        width: min(86vw, 320px);
        background: var(--mobile-surface);
        border-left: 1px solid var(--mobile-accent);
        z-index: var(--z-modal);
        transform: translateX(100%);
        transition: transform var(--motion-base) var(--motion-ease);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
        padding-right: var(--safe-right);
        box-sizing: border-box;
        color: var(--mobile-text);
    }
    .mobile-side-drawer.open {
        transform: translateX(0);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.55);
    }
    .mobile-side-drawer[hidden] { display: none; }

    .mobile-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--mobile-surface-overlay);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-base) var(--motion-ease);
    }
    .mobile-drawer-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-drawer-backdrop[hidden] { display: none; }

    /* Body-Scroll-Lock wenn Drawer offen, gesetzt von toggleMobileDrawer() */
    body.drawer-open { overflow: hidden; }

    /* Hamburger-Button in der Top-Bar */
    .ul-mobile-bar li.bar-menu { padding: 0; }
    .bar-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--touch-target-min);
        background: transparent;
        border: none;
        color: var(--mobile-text);
        cursor: pointer;
        padding: 0;
    }
    .bar-menu-btn:focus-visible {
        outline: 2px solid var(--mobile-accent-strong);
        outline-offset: 2px;
    }
    .bar-menu-icon {
        font-size: 1.6em;
        line-height: 1;
    }

    /* Drawer-Header (sticky, Titel + Schließen) */
    .drawer-header {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-sm) var(--space-md);
        background: var(--mobile-surface);
        border-bottom: 1px solid var(--mobile-border-soft);
        z-index: 1;
    }
    .drawer-header h2 {
        margin: 0;
        font-size: 1.25em;
        color: var(--mobile-accent);
        font-weight: 700;
    }
    .drawer-close {
        background: transparent;
        border: none;
        color: var(--mobile-accent);
        font-size: 1.8em;
        line-height: 1;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }
    .drawer-close:focus-visible {
        outline: 2px solid var(--mobile-accent-strong);
        outline-offset: 2px;
    }

    /* Drawer-Sektionen */
    .drawer-section {
        padding: var(--space-md) 0 var(--space-sm);
    }
    .drawer-section + .drawer-section {
        border-top: 1px solid var(--mobile-border-very-soft);
    }
    .drawer-section h3 {
        margin: 0 var(--space-md) var(--space-sm);
        font-size: 0.72em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--mobile-accent);
        opacity: 0.75;
    }
    .drawer-section ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .drawer-section ul li a {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        min-height: 48px;
        padding: 10px var(--space-md);
        color: var(--mobile-text);
        text-decoration: none;
        border-bottom: 1px solid var(--mobile-border-very-soft);
        position: relative;
    }
    .drawer-section ul li a:active {
        background: var(--mobile-border-very-soft);
    }
    .drawer-section ul li a img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        object-fit: contain;
    }
    .drawer-section ul li a .drawer-emoji {
        width: 24px;
        font-size: 20px;
        line-height: 1;
        text-align: center;
        flex-shrink: 0;
    }
    /* Unread-Badge: kleines grünes Dot rechts neben dem Label */
    .drawer-section ul li.ungeleseneNachrichten a::after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-radius: 50%;
        background: #4caf50;
        box-shadow: 0 0 6px rgba(76, 175, 80, 0.7);
        flex-shrink: 0;
    }

    /* Logout abgesetzt, rote Akzentfarbe wie im Bombast-Menü */
    .drawer-section-logout {
        margin-top: var(--space-md);
        padding-top: 0;
    }
    .drawer-section-logout a.abmelden {
        color: #d42a04;
        font-weight: 600;
    }
}

/*
 * Phone-Reflow (<=600 px): table.main wird zu Block-Layout, Container-Caps
 * für fest verdrahtete Pixelbreiten (Jobangebote, Reise-Bild, Regiezna,
 * Marktstand). Skin-agnostisch — gilt für alle Designs.
 *
 * Auf 600 px und drunter laufen Menü/Game/Heldinfo nicht mehr als Tabellenzellen,
 * sondern als gestapelte Blocks. Menü/Heldinfo sind bereits per display:none
 * (siehe 770-px-Block in den Skin-CSS-Dateien) ausgeblendet, also bleibt
 * effektiv nur die Game-Zelle sichtbar.
 */
@media (max-width: 600px) {
    table.main,
    table.main > tbody,
    table.main > tbody > tr,
    table.main > tbody > tr > td {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Border-Zellen brauchen wir auf Mobile nicht */
    td#game_border_left,
    td#game_border_right,
    .game_border_left,
    .game_border_right {
        display: none;
    }

    td.game {
        padding: var(--space-sm);
    }

    div#gameInnerBox {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: var(--space-md) var(--space-sm);
    }

    /* Container-Caps: fixe Pixelbreiten auf 100 % kappen */

    /* Jobangebote: Mobile-Card-Layout in antamar_mobile_patterns.css */

    /* Reise-Bild — bisher 320×320 hart fixiert */
    #nachrichten_editor { width: 96%; }

    /* Reise-Tabelle mobil als Stack: Bild → Countdown+weiter → Karte → Routenplan */
    table.reise,
    table.reise tbody,
    table.reise tr,
    table.reise td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    table.reise td { padding: 0; }
    td.reise_countdown { text-align: left; padding: var(--space-sm) 0; }
    #routenplan { padding-top: var(--space-md); }
    td.reise_bild {
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        /* display:block bereits oben gesetzt */
    }
    td.reise_bild img { max-width: 100%; height: auto; }

    /* Regiezna-Anzeiger (500 px triple-fixed) */
    .regiezna,
    .regiezna_top,
    .regiezna_middle,
    .regiezna_bottom,
    .regiezna_inhalt {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        background-size: contain;
        background-position: center top;
    }
    .regiezna_middle h3 {
        width: 100%;
        font-size: 1.3em;
    }

    /* Marktstand, Auswahl, Ortsbeschreibung — Tabellen 100 % */
    .marktstand table,
    .auswahl table { width: 100%; }
    /*
     * .ortsbeschreibung (Lagerhaus/Mietstall) ist ein content-box-<div> mit
     * padding:5px + border:1px. Ohne border-box addiert width:100% das
     * Padding/Border und läuft aus der .lagerhaus/.mietstall-Box. overflow-wrap
     * bricht zusätzlich lange URLs/Wörter im Freitext der Beschreibung.
     */
    .ortsbeschreibung {
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }
    .ortsbeschreibung img { max-width: 40%; height: auto; }

    /*
     * Stadt-Infobox (includes/ort.inc.php): zwei nebeneinanderliegende
     * <td> brechen die Textspalte auf ~180 px ein. Wappen oben mittig
     * gestapelt und der Beschreibungstext volle Breite, der gefloatete
     * Stadtplan wandert über den Text.
     */
    #stadt_info_container .stadt_info table,
    #stadt_info_container .stadt_info tbody,
    #stadt_info_container .stadt_info tr,
    #stadt_info_container .stadt_info td {
        display: block;
        width: 100%;
        max-width: 100%;
        /* content-box-td hat padding:5px; ohne border-box läuft der Text
           rechts aus der umrandeten .stadt_info-Box (sichtbar in „hell"). */
        box-sizing: border-box;
    }
    #stadt_info_wappen {
        text-align: center;
        padding: 0 0 var(--space-sm);
    }
    #stadt_info_wappen img {
        display: inline-block;
        max-width: 64px;
        height: auto;
        margin: 0 var(--space-xs);
        vertical-align: middle;
    }
    #stadt_info_wappen br { display: none; }
    .stadt_info_beschreibung img[style*="float"] {
        float: none !important;
        display: block;
        margin: 0 auto var(--space-sm) !important;
        max-width: 100% !important;
    }
}

/*
 * Mobile-Layout-Baseline (Desktop-Header/Menu/Heldinfo ausblenden, Mobile-Bars
 * zeigen, Mobile-Typografie). War zuvor byte-identisch in antamar/classic/
 * pergament/simple/antamarv41.css dupliziert — hier einmal zentral. Greift via
 * Tokens (--mobile-body-bg, --mobile-surface, --mobile-font-*) auf die jeweils
 * im Skin-:root gesetzten Farben/Größen zu (Skin lädt nach dieser Datei, der
 * Token-Override gewinnt also). bombast bringt einen eigenen, abweichenden
 * Block mit (dunkle Farben + Hintergrundbilder) und überschreibt diese Basis.
 * Reihenfolge bewusst nach dem gameInnerBox-Block oben (padding:0 gewinnt) und
 * vor dem Footer-Block unten (#footer div#copy re-show via !important).
 */
@media (max-width: 770px) {
    /* Desktop-Layout-Elemente ausblenden */
    #header { display: none; }
    #menuBox { display: none !important; }
    #heldeninfoBox { display: none !important; }

    /* Mobile-Typografie */
    html { font-size: var(--mobile-font-base); }
    body {
        font-size: 1.05em;
        line-height: var(--mobile-line-height);
    }
    h1 { font-size: var(--mobile-font-h1); }
    h2 { font-size: var(--mobile-font-h2); }
    h3 { font-size: var(--mobile-font-h3); }
    h4 { font-size: 1.05em; }
    h5, h6 { font-size: 1em; font-weight: bold; }

    /* Game-Container */
    div#gameInnerBox {
        background-color: var(--mobile-body-bg);
        background-image: none;
        margin-top: 0;
        padding: 0;
    }
    .game_border_left, .game_border_right { display: none; }
    table.main { margin-top: 0; }

    /* Mobile-Bars (Top-Bar + Bottom-Tab-Bar) sichtbar machen */
    .div-mobile-menu, .div-mobile-bar { display: block; }

    /* Legacy-Fallback-Container (heute durch heldhub-Komponente ersetzt) */
    #menuBoxMobile {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: var(--mobile-surface);
        overflow: auto;
    }
    #heldeninfoBoxMobile {
        position: static;
        width: 100%;
        background-color: var(--mobile-surface);
        box-sizing: border-box;
        padding-bottom: var(--space-lg);
    }

    /* Footer-Copy auf Mobile aus (Footer-Block unten zeigt #footer div#copy wieder) */
    div#copy { display: none; }
}

/*
 * Mobiler Footer: includes/footer.inc.php rendert <table id="footer"> mit
 * 432/448-px-Side-Cells (Tower-Hintergrund) und einer 335-px-Mittelzelle.
 * Auf Mobile spart das ~300 px sinnlosen Scroll-Raum. Stattdessen Copyright
 * sichtbar lassen und einen echten "Nach oben"-Button mit Touch-Target.
 * Zusätzlich der Tower-Background am #wrapper (classic/bombast haben ein
 * "bg.gif" bottom-right), das auf Mobile nur das Bild des Spielinhalts dirtht.
 */
@media (max-width: 770px) {
    div#wrapper {
        background-image: none !important;
    }
    table#footer,
    table#footer > tbody,
    table#footer > tbody > tr {
        display: block;
        width: 100%;
    }
    td#footer_left,
    td#footer_right { display: none !important; }
    td#footer_float {
        display: block;
        width: 100% !important;
        height: auto !important;
        background: none !important;
        padding: var(--space-sm);
        box-sizing: border-box;
    }
    #footer div#copy {
        display: block !important;        /* override 770-Block "div#copy { display: none }" */
        width: auto !important;
        height: auto !important;
        background: none !important;
        margin: var(--space-sm) 0 0 !important;
        padding: 0 !important;
    }
    #footer div#copy p {
        font-size: 0.7em;
        line-height: 1.3;
        margin: 0.3em 0;
        text-align: center;
    }
    #footer div.zentriert { font-size: 0.85em; }
    #footer div.zentriert:first-child {
        margin-bottom: var(--space-sm);
    }
    #footer div.zentriert:first-child a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-comfort);
        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);
        text-decoration: none;
        font-size: 1.05em;
    }
}

/* ============================================================
 * Mobile Charakter-Hub (mobile_heldinfo.php)
 *
 * Ablöser für die alte 1:1-Sidebar-Übernahme. Identitäts-Header,
 * Quick-Links zu Heldenbrief/Tagebuch, Tab-Wechsler Werte/Kampf und
 * Akkordeon-Sektionen. Greift bewusst nicht nur unter 770 px, weil
 * mobile_heldinfo.php ohnehin nur in der mobilen Bottom-Tab-Bar
 * verlinkt ist.
 * ============================================================ */
.heldhub {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: var(--space-md) var(--space-sm) var(--space-lg);
    background-color: var(--mobile-body-bg);
    color: var(--mobile-text);
}

.heldhub-identity {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--mobile-border-soft);
}

.heldhub-portrait {
    flex: 0 0 auto;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--mobile-border);
    text-decoration: none;
}
a.heldhub-portrait:hover,
a.heldhub-portrait:focus {
    border-color: var(--mobile-accent);
    outline: none;
}
.heldhub-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.heldhub-identity-text {
    flex: 1 1 auto;
    min-width: 0;
}

.heldhub-name {
    margin: 0 0 2px 0;
    font-size: 1.3em;
    line-height: 1.2;
    color: var(--mobile-text);
}

.heldhub-volk-prof,
.heldhub-meta {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.35;
    color: var(--mobile-text-secondary);
}

.heldhub-meta {
    margin-top: 2px;
    color: var(--mobile-text-soft);
    font-size: 0.9em;
}

.heldhub-titel {
    font-style: italic;
    color: var(--mobile-accent);
}

.heldhub-sep {
    margin: 0 0.35em;
    color: var(--mobile-border);
}

/* Quick-Actions (Heldenbrief, Tagebuch) */
.heldhub-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.heldhub-quick-link {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    background: var(--mobile-surface-2);
    border: 1px solid var(--mobile-border);
    border-radius: 6px;
    color: var(--mobile-text);
    text-decoration: none;
    font-size: 0.95em;
    text-align: center;
}
.heldhub-quick-link:hover,
.heldhub-quick-link:focus {
    background: var(--mobile-surface-2-hover);
    border-color: var(--mobile-accent);
    outline: none;
}
.heldhub-quick-icon { font-size: 1.2em; }
.heldhub-quick-icon img {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

/* Tab-Wechsler Werte/Kampf */
.heldhub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-sm);
    border-bottom: 2px solid var(--mobile-border);
}
.heldhub-tab {
    flex: 1 1 0;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--mobile-text-soft);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.heldhub-tab:hover,
.heldhub-tab:focus {
    color: var(--mobile-text);
    outline: none;
}
.heldhub-tab.active {
    color: var(--mobile-text);
    border-bottom-color: var(--mobile-accent);
}

/* Panel-Container */
.heldhub-panel {
    width: 100%;
    box-sizing: border-box;
}
.heldhub-loading {
    text-align: center;
    color: var(--mobile-text-soft);
    padding: var(--space-md);
}
.heldhub-loading img { vertical-align: middle; }

/* Akkordeon-Sektion innerhalb des Panels — überschreibt evtl. Theme-Defaults */
.heldhub-panel .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;
}
.heldhub-panel .accordion_content {
    /* Bombast setzt margin-left:20px für .accordion_content — bricht das
       fixe Tabellen-Layout der Eigenschaften (Werte-Spalte ragt rechts raus). */
    margin-left: 0;
    padding: var(--space-sm) var(--space-xs) var(--space-md);
    box-sizing: border-box;
}

/* Energie-/Statuslisten */
.heldhub-energy {
    list-style: none;
    margin: 0;
    padding: 0;
}
.heldhub-energy li {
    padding: var(--space-sm) 0;
    border-bottom: 1px dotted var(--mobile-border-very-soft);
}
.heldhub-energy li:last-child { border-bottom: none; }

/* Energie-Kopfzeile: Name | (akt/max) | Info/Icons/"+" rechtsbündig.
   Der "+" ist stets das letzte Element der margin-left:auto-Aux-Gruppe und
   steht damit über alle Energie-Zeilen sauber in einer Spalte. Der Balken
   (fuellstand_balken) folgt darunter in voller Breite. */
.heldhub-energy .hub-energy-head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.heldhub-energy .hub-energy-name {
    font-weight: 600;
    color: var(--mobile-text);
}
.heldhub-energy .hub-energy-val {
    color: var(--mobile-text-soft);
    font-size: 0.92em;
}
.heldhub-energy .hub-energy-aux {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}
.heldhub-energy .hub-energy-aux img { height: 1.2em; vertical-align: middle; }

/* Eigenschaften: ausgerichtetes Raster Name | Wert | "?" | Steiger-"+".
   Ersetzt die früheren, per CSS umgeformten <table>s aus eigenschaft_2_html()
   (Desktop-Sidebar) durch feste Spalten, sodass Werte UND "+"-Buttons
   zeilenübergreifend bündig stehen — auch wenn ein "+" fehlt (Slot reserviert). */
.heldhub-eigenschaften {
    list-style: none;
    margin: 0;
    padding: 0;
}
.heldhub-eigenschaften .hub-attr {
    display: grid;
    grid-template-columns: 1fr 2.5em auto var(--touch-target-min);
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--mobile-border-very-soft);
}
.heldhub-eigenschaften .hub-attr:last-child { border-bottom: none; }
.hub-attr-name {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--mobile-text);
}
.hub-attr-value {
    text-align: right;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--mobile-text);
}
.hub-attr-action {
    display: inline-flex;
    justify-content: flex-end;
}

/* "?"-Info als ruhiges, rundes, antippbares Badge — Inhalt erscheint per Tap
   (siehe Single-Tap-Handler in scripts/allgemeines-v20.js). */
.heldhub-panel a.hub-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: 1px solid var(--mobile-border-very-soft);
    border-radius: 50%;
    color: var(--mobile-text-soft);
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}
.heldhub-panel a.hub-info:hover,
.heldhub-panel a.hub-info:focus,
.heldhub-panel a.hub-info:active {
    border-color: var(--mobile-accent);
    color: var(--mobile-accent);
    outline: none;
}

/* Steigern-Button: dezenter, einheitlicher quadratischer "+"-Touch-Button
   (ersetzt den füllenden grünen Block). */
.heldhub-panel a.link_steigern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: 0;
    background: transparent;
    border: 1px solid var(--mobile-action-border);
    border-radius: 8px;
    color: var(--mobile-accent);
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}
.heldhub-panel a.link_steigern:hover,
.heldhub-panel a.link_steigern:focus,
.heldhub-panel a.link_steigern:active {
    background: var(--mobile-action-bg-hover);
    border-color: var(--mobile-accent);
    outline: none;
}

/* Stat-Listen für EP, MR, Gottheit, Münzen */
.heldhub-stats {
    list-style: none;
    margin: 0;
    padding: 0;
}
.heldhub-stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 1px dotted var(--mobile-border-very-soft);
}
.heldhub-stat-row:last-child { border-bottom: none; }
.heldhub-stat-label {
    flex: 1 1 auto;
    color: var(--mobile-text-soft);
}
.heldhub-stat-label small {
    margin-left: 0.3em;
    color: var(--mobile-text-muted);
    font-size: 0.85em;
}
.heldhub-stat-value {
    flex: 0 0 auto;
    color: var(--mobile-text);
    font-size: 1.05em;
}
.heldhub-stat-value img {
    height: 0.9em;
    vertical-align: baseline;
    margin-left: 2px;
}
.heldhub-stat-buff   { color: #8fcf6b; }
.heldhub-stat-debuff { color: #e07a5f; }
.heldhub-stat-hint {
    padding: var(--space-xs) 0 var(--space-sm);
    color: var(--mobile-text-muted);
    font-size: 0.88em;
    font-style: italic;
    border-bottom: none;
}

/* Kampf-Tab: Waffen + Trefferzonen
   bombast/pergament setzen ein UNgescoptes div.heldeninfo_rs_waffen { margin:15px; padding:10px;
   border:2px } (die Desktop-Pergament-Box) — das leckt in den mobilen Hub und schob die Karte
   per margin-left:15px aus dem Viewport. box-sizing:border-box + width:100% + margin:0 hält die
   Box exakt auf Elternbreite, egal welches Padding/Border/Margin der Skin mitbringt. */
.heldhub-kampf .heldeninfo_rs_waffen {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
}
.heldhub-kampf .heldeninfo_waffen {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 var(--space-md) 0;
}
.heldhub-kampf .heldeninfo_ausgeruestete_waffen {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
/* Waffen-Karten: Bild + Name + farbiger Zustandsbalken (Qualitaet) */
.heldhub-waffen-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.heldhub-waffe-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.heldhub-waffe-bild {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
}
.heldhub-waffe-bild img {
    max-width: 56px;
    max-height: 56px;
    height: auto;
    display: block;
}
.heldhub-waffe-info {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.heldhub-waffe-name {
    font-weight: 600;
    color: var(--mobile-text);
    overflow-wrap: anywhere;
}
.quali-balken {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.quali-balken-track {
    flex: 1 1 auto;
    min-width: 60px;
    height: 10px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.quali-balken-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
}
.quali-balken-wort {
    flex: 0 0 auto;
    font-size: 0.9em;
    color: var(--mobile-text-muted);
    white-space: nowrap;
}
.heldhub-kampf .trefferzonen {
    /* Bombast skaliert das Element ×2 — auf Mobile bleibt der Container fluid */
    transform: none !important;
    margin: var(--space-sm) 0;
}

/* Mobile-only Toolbar oberhalb der Ausrüstungs-Tabelle.
   Wird in ajax/ausruestung.inc.php immer gerendert; Desktop blendet sie aus,
   weil der gleiche Bulk-Wegwerfen-Trigger im <thead> sichtbar ist. */
.gepaeck-toolbar { display: none; }

/* Gesamt-Statistik-Card oben — auf Desktop ausgeblendet (vorhandener <tfoot> reicht). */
.gepaeck-summary { display: none; }

/* Wegwerf-Modus: Step-Buttons + Max-Chip sind kompakt im Tabellen-Cell,
   auf Desktop reicht das vorhandene size=3-Input — Buttons unauffällig.
   .wegwerf-actions: Container für Submit + Abbrechen. */
.wegwerf-input-group {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.wegwerf-step,
.wegwerf-max {
    background: transparent;
    border: 1px solid #888;
    border-radius: 4px;
    padding: 0 0.4em;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1.4;
}
.wegwerf-actions {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    justify-content: center;
}
.wegwerf-cancel { font-size: 0.95em; }

/*
 * ============================================================
 * Mobile Ausrüstungs-Card-Layout (ajax/ausruestung.inc.php)
 *
 * Die 7-spaltige Tabelle <table class="gepaeckansicht"> ist auf Desktop
 * gut lesbar, scrollt auf Mobil aber horizontal (siehe Scroll-Wrapper
 * Z. 2497 ff.). Die häufige Aktion "Benutzen / Wegwerfen" liegt damit
 * im hinteren Drittel der Spalten. Card-Layout pro Zeile rückt sie auf
 * Mobil prominent in die volle Viewport-Breite.
 *
 * Override-Strategie: `display:block` + `display:grid` für die Zeilen
 * gewinnt über die `overflow-x:auto`-Regel aus 2497, weil der Block hier
 * **nach** dieser Regel in der Cascade kommt — kein !important nötig.
 * ============================================================ */
@media (max-width: 770px) {
    /* Scroll-Wrapper-Schatten auf dem Ausrüstungs-Wrapper abschalten —
       sonst rendern die Shadow-Gradients aus 2497 ff. zusätzlich zum
       Card-Layout. handelsfunktion ist eine schmale 2-Spalten-Tabelle
       und passt sowieso in das Viewport. */
    .ausruestung .dataTables_wrapper,
    table.gepaeckansicht,
    table.handelsfunktion {
        background: none !important;
        overflow: visible;
    }

    /* Sticky Gesamt-Statistik oben — bleibt beim Scrollen sichtbar.
       Z-Index unter dem mobile-Drawer (1000), aber über regulärem Content. */
    .gepaeck-summary {
        display: flex;
        gap: var(--space-sm);
        margin-bottom: 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;
    }
    .gepaeck-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;
    }
    .gepaeck-summary .stat-label {
        font-size: 0.8em;
        color: var(--mobile-text-muted);
        line-height: 1.2;
    }
    .gepaeck-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;       /* Heller+Silber+Gold-Wert darf nicht die Karte sprengen */
    }
    .gepaeck-summary .stat-value img {
        height: 0.9em;
        width: auto;
        vertical-align: baseline;
    }

    /* Mobile-Toolbar (Bulk-Wegwerfen, später auch Sortier-Select).
       Chip-Style analog .heldhub-quick-link für Konsistenz. */
    .gepaeck-toolbar {
        display: flex;
        gap: var(--space-sm);
        flex-wrap: wrap;
        margin-bottom: var(--space-sm);
    }
    .gepaeck-toolbar-btn,
    .gepaeck-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);
        text-decoration: none;
        font-size: 0.95em;
    }
    .gepaeck-toolbar-btn img {
        height: 1.25em;
        width: auto;
        vertical-align: middle;
    }
    .gepaeck-toolbar-btn:hover,
    .gepaeck-toolbar-btn:focus {
        background: var(--mobile-surface-2-hover);
        border-color: var(--mobile-accent);
        outline: none;
    }
    table.gepaeckansicht,
    table.gepaeckansicht tbody {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    table.gepaeckansicht thead { display: none; }
    /* <tfoot> ist die Desktop-Gesamtzeile. Auf Mobile zeigt .gepaeck-summary
       oben dieselben Werte sticky; der tfoot wuerde sonst als 3-Spalten-Grid
       gerendert und die 4 <th> mit colspan ueberlappen sich. */
    table.gepaeckansicht tfoot { display: none; }
    table.gepaeckansicht tr {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "bild   name      menge"
            "bild   meta      meta"
            "use    use       throw";
        column-gap: var(--space-sm);
        row-gap: 4px;
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 6px;
        background: var(--mobile-surface-2);
        align-items: start;
        /* min-width: 0 verhindert, dass ein langes Wort/eine lange Beschreibung
           (z.B. Waffe "Mackes") das Grid-Item nach Content stretcht und damit
           die ganze Card über den Viewport hinaus zieht. */
        min-width: 0;
    }
    /* DataTables-"Keine Daten"-Zeile soll volle Breite haben statt
       in das Card-Grid gepresst zu werden. */
    table.gepaeckansicht tr:has(td.dataTables_empty),
    table.gepaeckansicht tr.dataTables_empty {
        display: block;
        text-align: center;
        padding: var(--space-md) var(--space-sm);
    }
    table.gepaeckansicht td.dataTables_empty {
        display: block;
        text-align: center;
        white-space: normal;
        color: var(--mobile-text-soft);
    }
    table.gepaeckansicht td {
        display: block;
        padding: 0;
        text-align: left;
        background: none;
        border: none;
    }
    table.gepaeckansicht td.ware_bild {
        grid-area: bild;
        text-align: center;
    }
    table.gepaeckansicht td.ware_bild img {
        max-width: 100%;
        height: auto;
    }
    table.gepaeckansicht td.beschreibung {
        grid-area: name;
        font-weight: 600;
        min-width: 0;                /* Grid-Item darf schrumpfen unter Content-Breite */
        overflow-wrap: anywhere;     /* lange Beschreibungs-Tokens dürfen brechen */
    }
    /* Menge eigene Spalte rechts neben Namen. */
    table.gepaeckansicht td.menge {
        grid-area: menge;
        text-align: right;
        align-self: start;
        color: var(--mobile-text-soft);
        font-weight: normal;
        white-space: nowrap;
    }
    table.gepaeckansicht td.menge::before {
        content: "× ";
        color: var(--mobile-text-muted);
    }
    /* Gewicht + Preis nebeneinander in der Meta-Zeile. Beide nutzen die
       gleiche grid-area und werden via justify-self links/rechts ausgerichtet.
       min-width: max-content stellt sicher, dass das Browser-Grid den vollen
       Text inkl. ::before-Label rendert statt zu clippen. */
    table.gepaeckansicht td.gewicht,
    table.gepaeckansicht td.preis {
        grid-area: meta;
        color: var(--mobile-text-soft);
        font-size: 0.9em;
        white-space: nowrap;
        min-width: max-content;
    }
    table.gepaeckansicht td.gewicht {
        justify-self: start;
    }
    table.gepaeckansicht td.gewicht::before {
        content: "Gewicht: ";
        color: var(--mobile-text-muted);
    }
    table.gepaeckansicht td.preis {
        justify-self: end;
    }
    table.gepaeckansicht td.preis::before {
        content: "Wert: ";
        color: var(--mobile-text-muted);
    }
    table.gepaeckansicht td.benutzen {
        grid-area: use;
        padding-top: var(--space-xs);
        border-top: 1px dashed var(--mobile-border-very-soft);
    }
    table.gepaeckansicht td.benutzen ul {
        padding: 0 !important;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    table.gepaeckansicht td.benutzen ul li {
        list-style: none;
    }
    table.gepaeckansicht td.wegwerfen {
        grid-area: throw;
        text-align: right;
        padding-top: var(--space-xs);
        border-top: 1px dashed var(--mobile-border-very-soft);
        align-self: center;
    }

    /* Icon-Hierarchie in der Item-Beschreibung normalisieren: alle Info-/Tooltip-
       Icons gleich groß und etwas dezent (opacity 0.85), aktive Detail-Toggles
       (Waffe/Rüstung) etwas größer und voll opak — so wird die Klickbarkeit visuell klar. */
    table.gepaeckansicht td.beschreibung img {
        height: 1.25em;
        width: auto;
        vertical-align: middle;
        opacity: 0.85;
    }
    table.gepaeckansicht .waffe-detail-toggle img,
    table.gepaeckansicht .ruestung-detail-toggle img {
        height: 1.5em;
        opacity: 1;
    }

    /* Touch-Targets: kleine Icon-Links auf min. 44 px aufblähen.
       Quest-Links bekommen zusätzlich Chip-Look (Hintergrund + Border). */
    table.gepaeckansicht .waffe-detail-toggle,
    table.gepaeckansicht .ruestung-detail-toggle,
    table.gepaeckansicht td.wegwerfen > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: var(--space-xs);
        cursor: pointer;
    }
    table.gepaeckansicht td.benutzen ul li a {
        display: inline-flex;
        align-items: center;
        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: 4px;
        color: var(--mobile-text);
        text-decoration: none;
    }
    table.gepaeckansicht td.benutzen ul li a:hover,
    table.gepaeckansicht td.benutzen ul li a:focus {
        background: var(--mobile-surface-2-hover);
        border-color: var(--mobile-accent);
        outline: none;
    }

    /* Wegwerf-Modus auf Mobile: Banner über der Tabelle (Modus-Indikator),
       Input-Gruppe nimmt volle Breite mit großen Touch-Buttons,
       Submit-Button full-width, Abbrechen daneben. */
    body.wegwerf-mode .ausruestung::before {
        content: "Wegwerf-Modus aktiv — Mengen wählen und bestätigen";
        display: block;
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-sm);
        background: var(--mobile-action-bg);
        border: 1px solid var(--mobile-action-border);
        border-radius: 6px;
        color: var(--mobile-text);
        font-weight: 600;
        text-align: center;
    }
    table.gepaeckansicht .wegwerf-input-group {
        display: flex;
        align-items: stretch;
        gap: var(--space-xs);
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    table.gepaeckansicht .wegwerf-step,
    table.gepaeckansicht .wegwerf-max {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: var(--space-xs) var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border);
        border-radius: 4px;
        color: var(--mobile-text);
        font-size: 1.1em;
        cursor: pointer;
    }
    table.gepaeckansicht .wegwerf-step:active,
    table.gepaeckansicht .wegwerf-max:active {
        background: var(--mobile-surface-2-hover);
    }
    table.gepaeckansicht .wegwerf-input {
        min-width: 3em;
        min-height: var(--touch-target-min);
        padding: var(--space-xs);
        font-size: 1.1em;
        text-align: center;
    }
    .wegwerf-actions {
        flex-direction: column-reverse;       /* Abbrechen unten, Wegwerfen prominent oben */
        gap: var(--space-sm);
        align-items: stretch;
    }
    .wegwerf-submit {
        width: 100%;
        min-height: var(--touch-target-comfort);
        font-size: 1.05em;
    }
    .wegwerf-cancel {
        text-align: center;
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mobile-text-soft);
    }

    /* Handelsfunktionen-Tabelle als Card-Liste statt Mini-Tabelle.
       Originalstruktur ist <table><tr><th>...</th></tr><tr><td><a>...</a></td></tr>...; auf Mobile
       wird daraus eine sauber stapelbare Liste mit Touch-Cards. */
    table.handelsfunktion,
    table.handelsfunktion tbody {
        display: block;
        background: none !important;
    }
    table.handelsfunktion tr {
        display: block;
        margin-bottom: var(--space-xs);
    }
    table.handelsfunktion th {
        display: block;
        padding: var(--space-sm) 0;
        font-size: 1em;
        text-align: left;
        background: none;
        color: var(--mobile-text);
        border: none;
    }
    table.handelsfunktion td {
        display: block;
        padding: 0;
        background: none;
        border: none;
    }
    table.handelsfunktion td a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target-min);
        padding: var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border);
        border-radius: 6px;
        color: var(--mobile-text);
        text-decoration: none;
    }
    table.handelsfunktion td a:hover,
    table.handelsfunktion td a:focus {
        background: var(--mobile-surface-2-hover);
        border-color: var(--mobile-accent);
        outline: none;
    }

    /* DataTables-Suchfeld + Page-Length oberhalb der Cards leicht entzerren */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        display: block;
        text-align: left;
        margin-bottom: var(--space-xs);
    }
    .dataTables_wrapper .dataTables_filter input {
        min-height: var(--touch-target-min);
        padding: var(--space-xs);
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    /* Detail-Panels für Waffen/Rüstungen werden per JS als <tr> mit <td colspan="7">
       nach der jeweiligen Card injiziert. Standardmäßig würden sie als 3-Spalten-Card
       gerendert (Cascade auf table.gepaeckansicht tr oben) — wir überschreiben das.
       Die Card davor verliert via :has(+ .*-detail-row) ihre untere Rundung, damit
       Card + Panel optisch eine Einheit bilden. */
    table.gepaeckansicht tr.waffe-detail-row,
    table.gepaeckansicht tr.ruestung-detail-row {
        display: block;
        margin: calc(-1 * var(--space-sm)) 0 var(--space-sm);
        padding: var(--space-sm);
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-top: none;
        border-radius: 0 0 6px 6px;
    }
    table.gepaeckansicht tr.waffe-detail-row td,
    table.gepaeckansicht tr.ruestung-detail-row td {
        display: block;
        padding: 0;
    }
    table.gepaeckansicht tr:has(+ tr.waffe-detail-row),
    table.gepaeckansicht tr:has(+ tr.ruestung-detail-row) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
    }
}

/* Münz-Icons: an Textgröße binden, falls kein spezifisches Container-CSS greift.
   Spezifischere Regeln (.bank-currency-input .coin-input img, .geld_img/.geld_bild img)
   überschreiben das weiterhin. */
img[src$="/dukat.png"],
img[src$="/silber.png"],
img[src$="/heller.png"] {
    height: 1em;
    width: auto;
    vertical-align: -0.15em;
}

/* --- Mobile: Hilfetext-/Info-Einblendungen (mBox.Notice) immer komplett im Viewport ---
   mBox.Notice rendert unten-links (move:true) und misst seine Breite aus dem Inhalt;
   es gibt kein max-width und scripts/mbox-mobile-defaults.js patcht nur mBox.Modal,
   nie Notice. Auf schmalen Screens wird die Box dadurch breiter als der Viewport.
   Fix: volle Breite (minus Rand) statt natuerlicher Breite, Hoehe gedeckelt mit
   internem Scroll. mBox schreibt Breite/Position als Inline-Style, daher !important;
   die Hoehen-Animation des Move-Tweens bleibt unberuehrt. */
@media (max-width: 770px) {
    .mBox.Notice {
        left: var(--space-md) !important;
        right: var(--space-md) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .mBox.Notice .mBoxContainer {
        width: auto !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box !important;
    }
    .mBox.Notice .mBoxContent {
        min-width: 0 !important;
        max-height: calc(100vh - var(--mobile-topbar-height) - var(--mobile-bottombar-height)
            - var(--safe-top) - var(--safe-bottom) - 2 * var(--space-lg));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overflow-wrap: anywhere;
    }
}