/**
 * Der Bombast-Skin 
 * Hier sollten eigentlich nur die CSS-Stile definiert sein, die den 
 * Standard-Stil variieren. Also hauptsächlich Farben und Bilder.
 *
 * @version $Id$
 * @package bombast 
 */

/* Webfonts (Montserrat, PT Serif) sind lokal — siehe css/antamar_fonts.css. */

/* Dunkler Skin: native Formular-Controls dunkel rendern (passt zum dunklen Layout,
   ergänzt das skin-aware <meta name=color-scheme>). */
:root { color-scheme: dark; }

body {
  height: 100%;
  max-width: 1600px;
  font-size: 0.95em;
  margin: 0 auto;
  padding: 0;
  background-image: url(../../bilder/bilder_bombast/png/hintergrund.jpg);
  background-color: #020f06;
  background-size: 100%;
  background-repeat: no-repeat;
}

div#content { margin: 0 auto; }

div#wrapper {
  width: 100%;
}

body, td, p {
  font-family: "PT Serif", "Giovanni Book",Georgia,"Times New Roman",Times,serif;
  line-height: 1.5em;
  color: #c1ab49;
  text-shadow: #040404 1px 1px 1px;
}
p { margin-bottom: 1em; }

ul { margin:0.7em 0; padding:0; }
li { list-style-type:none; padding:0; margin:0; }
a { color: #d42a04; text-decoration: none;}
a:hover { color: #958e6c; text-decoration: underline overline; background-image: url(../../bilder/bilder_bombast/png/80prozPixel.png); }

.game table {
  padding: 1em;
}

table.sortable th{
  font-size: 1.2em;
  padding: 0.3em;
}

table.sortable td{
  padding: 0.4em;
}

table.sortable img{
  filter: drop-shadow(0px 0px 2px #FEF1B9);
}

.table-th-sort-span {
  filter: drop-shadow(0px 0px 3px #FEF1B9);
}

.table-tr-odd td{
  background-color: rgba(100,30,30,0.5);
}

.noscript-notice {
  line-height: 1.2em;
  margin: 0;
  padding: 5px 10px 6px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 10px 0;
}

.noscript-notice {
  background: #FF3300 none repeat scroll 0 0;
  color: #FFF;
  opacity: 1;
  z-index: 100;
}

.main {
/*  table-layout: fixed; *//* Bis auf weiteres wieder auskommentiert, wegen Darstellungsfehlern. Mantis #1229 */
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
  border: 0;
  empty-cells: show;
/*  width: 98%; */
}

div.kampfmanoever td,
div.kampfmanoever th,
div.kampfschule td,
div.kampfschule th,
div.rathaus td,
div.rathaus th,
div.highscore td,
div.highscore th,
div.einstellungen table.heldenwechsel td,
div.einstellungen table.heldenwechsel th,
div.orden td,
div.orden th,
table.jobstatistics td,
table.jobstatistics th,
div.heldinfoSeite td,
div.heldinfoSeite th,
table.bank tr
{
  padding: 0.2em;
  border-bottom: 1px solid #402C13;
}

div.kampfmanoever th,
div.kampfschule th,
div.rathaus th,
div.highscore th
{
  font-size: 1.1em;
}

div.kampfmanoever td{
    text-align: left;
}

div.einstellungen td{
  padding: 0.2em;
}

/**
 * Einstellungen-Tabellen verbesserte Lesbarkeit
 */

/* Header-Zeilen (th mit colspan) hervorheben */
div.einstellungen table.heldeneinstellungen th[colspan],
div.einstellungen table.heldenprofil th[colspan],
div.einstellungen table.spielerprofil th[colspan],
div.einstellungen table.spielereinstellungen th[colspan],
div.einstellungen table.passwortEinstellungen th[colspan],
div.einstellungen table.heldenloeschen th[colspan] {
  background-color: rgba(193, 171, 73, 0.2);
  border-bottom: 2px solid #c1ab49;
  padding: 0.6em;
  font-size: 1.1em;
}

/* Label-Spalte (th.right) visuell absetzen */
div.einstellungen table.heldeneinstellungen th.right,
div.einstellungen table.heldenprofil th.right,
div.einstellungen table.spielerprofil th.right,
div.einstellungen table.spielereinstellungen th.right,
div.einstellungen table.passwortEinstellungen th.right,
div.einstellungen table.heldenloeschen th.right {
  background-color: rgba(100, 80, 30, 0.15);
  border-right: 1px solid rgba(64, 44, 19, 0.3);
  min-width: 140px;
  vertical-align: top;
  padding-top: 0.5em;
}

/* Zebra-Striping für Datenzeilen */
div.einstellungen table.heldeneinstellungen tr:nth-child(even) td,
div.einstellungen table.heldenprofil tr:nth-child(even) td,
div.einstellungen table.spielerprofil tr:nth-child(even) td,
div.einstellungen table.spielereinstellungen tr:nth-child(even) td,
div.einstellungen table.passwortEinstellungen tr:nth-child(even) td,
div.einstellungen table.heldenloeschen tr:nth-child(even) td {
  background-color: rgba(100, 80, 30, 0.1);
}

/* Abstand zwischen Zeilen */
div.einstellungen table.heldeneinstellungen td,
div.einstellungen table.heldenprofil td,
div.einstellungen table.spielerprofil td,
div.einstellungen table.spielereinstellungen td,
div.einstellungen table.passwortEinstellungen td,
div.einstellungen table.heldenloeschen td {
  padding: 0.5em;
  border-bottom: 1px solid rgba(64, 44, 19, 0.3);
}

/* Heldenwechsel-Tabelle (Listenansicht mit anderer Struktur) */
div.einstellungen table.heldenwechsel {
  border-collapse: collapse;
}

div.einstellungen table.heldenwechsel td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid rgba(64, 44, 19, 0.4);
  vertical-align: middle;
}

div.einstellungen table.heldenwechsel tr:nth-child(even) td {
  background-color: rgba(100, 80, 30, 0.15);
}

div.einstellungen table.heldenwechsel tr:hover td {
  background-color: rgba(193, 171, 73, 0.15);
}

div.einstellungen table.heldenwechsel td:last-child {
  white-space: nowrap;
}

/* Tab-Navigation im dunklen Theme - einheitlich für alle Bereiche */
p.tab-nav a,
p.tab-nav span.aktiv {
    background-color: rgba(40, 35, 25, 0.9);
    color: #c1ab49;
    border: 1px solid #402C13;
    text-shadow: #040404 1px 1px 1px;
}
p.tab-nav a:hover {
    background-color: rgba(100, 80, 30, 0.9);
    border-color: #c1ab49;
}
p.tab-nav span.aktiv {
    background-color: #c1ab49;
    color: #282620;
    text-shadow: none;
}

/* Input-Felder im Bombast-Theme besser lesbar */
div.einstellungen .input,
div.einstellungen .input_longer,
div.einstellungen .input_long,
div.einstellungen .input_text,
div.einstellungen .input_zahl,
div.einstellungen select {
  background-color: rgba(40, 35, 25, 0.9);
  color: #c1ab49;
  border: 1px solid #402C13;
}

div.einstellungen .input:focus,
div.einstellungen .input_longer:focus,
div.einstellungen .input_long:focus,
div.einstellungen .input_text:focus,
div.einstellungen .input_zahl:focus,
div.einstellungen select:focus {
  border-color: #c1ab49;
  outline: none;
}

/* ZB-Beute verschachtelte Tabelle */
div.einstellungen table.zb_beute_table {
  margin-left: 1.5em;
  margin-top: 0.5em;
}

div.einstellungen table.zb_beute_table td {
  padding: 0.4em 0.5em;
  border-bottom: 1px dashed rgba(64, 44, 19, 0.2);
}

div.orden td{
  text-align: left;
  padding: 0.4em;
}

div.rathaus,
div.kampfmanoever td,
div.kampfschule td,
div.lernschule{
    text-align: left;
}

.game_border_left {
  /*background: url(../../bilder/bilder_bombast/png/game_border_left.png) no-repeat top right;*/
  /*width: 22px;*/
  width:15px;
}

.game_border_right {
  width: 0;
  /*
  background-image: url(../../bilder/bilder_bombast/png/game_border_right.png);
  background-repeat: no-repeat;
  background-position: top right;
  height: 855px;
  */
}

#game {
  vertical-align: top;
  margin:0;
  padding:0;
}

div#gameInnerBox{
  border: 1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(30,30,30,0.85);
  background-image: url(../../bilder/design/bombast/noise.webp);
  margin-top: 1em;
  padding: 1.5em;
  overflow: hidden;
  max-width: 100%;
}

div.heroPics{
  border: 1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(30,30,30,0.85);
  background-image: url(../../bilder/design/bombast/noise.webp);
  padding: 5px;
}

.game h2 { margin: 5px auto 10px auto; text-align: center; font-size: 1.6em; }
.game h2 strong { color: #2a2822 }
.game h3 { margin: 0; padding: 0; text-align: center; font-size: 1em; font-variant: small-caps; }
.game h3:first-letter { font-size:1em; color:#7B1816; }
.game h4 { margin:0; font-size: 0.95em; }
.game img { vertical-align: middle; }

.input{
  line-height: 2em;
}

textarea {
  background-color: #292a2a;
  color: #c1ab49;
}

a.wikilink { text-decoration: none; }
a.wikilink img { margin: 0; border: 0; }

/*--- Reisen ---------------------------------------------------------------*/
table.reise,
#nachrichten_editor{
  width: 75%;
  margin: 0 auto;
  border: 1px solid #402C13;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(65,65,65,0.4);
}

td.reise_bild {
  vertical-align: middle;
  text-align: center;
  height: 320px;
  width: 320px;
}

td.reise_bild img,
div.privathaus_bild img{
  margin: 0;
  max-width: 90%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

td.reise_countdown {
  vertical-align: middle;
}

#eig_chg_text,
#rogue_chg_text,
.axZmToolTipInner,
.axZmHoverTooltip{
  text-shadow: none;
  color: #0f0f0f;
}

/* --- Dungeon -------------------------------------------------------------*/

.dungeon table {
  clear: both;
  width: auto;
  height: auto;
  margin: 0;
  border-collapse:collapse;
}

.dungeon th {
  background:#dce1e5;
  border: 0;
  padding: 0;
}

.dungeon td {
  border: 0;
  padding: 0;
}

.dungeon p img {
  width:100%;
}

.dungeon img {
  width:100%;
}

.dungeon .kampf img {
  margin:0;
}

.dungeon img.pure {
  border:0;
  margin:0;
}

/* ------------------------------------------------------------------------ */

.hero-active {
  font-weight: bold;
}

.hero-inactive {
  font-style:italic;
}

/* -- Header ---------------------------------------------------------------- */
#header {
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
  empty-cells: show;
  border-collapse: collapse;
  height: 253px;
}

#header_left {
  background-image: url(../../bilder/bilder_bombast/png/header_left.png);
  text-align: center;
  width: 254px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: top left;
}

/* -- Das Antamarlogo in der Mitte -------------------------------------- */
#header_logo {
  background-image: url(../../bilder/bilder_bombast/png/header_logo.png);
  text-align: center;
  width: 415px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: top center;
  cursor: pointer;
}

#header_logo h1 {
  visibility: hidden;
  width: 30%;
}

/* --- der bewegliche RECHTE Teil ------------------------------ */

#header_float {
  background-image: url(../../bilder/bilder_bombast/png/header_tile_right.png);
  padding: 10px 0 0 0;
  margin: 0 auto;
  border: 0;
  empty-cells: show;
  border-collapse: collapse;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: top right;
}

/* --- der bewegliche LINKE Teil -------------------------------- */

#header_float_left {
  background-image: url(../../bilder/bilder_bombast/png/header_tile_left.png);
  padding: 40px 0 0 0;
  margin: 0 auto;
  border: 0;
  empty-cells: show;
  border-collapse: collapse;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: top left;
  color: #cca935;
}

#header_border_left {
  width:0;
}

#header_border_right {
  width:0;
}

div.held {
  background-image: url(../../bilder/bilder_bombast/png/80prozPixel.png);
  padding: 5px 30px 5px 30px;
  border: 2px solid #cca935;
  color: #cca935;
  margin: 0 10px;
}

/* -- Header - der Charname----------------------------------------- */
#header_right h2 {
  font-size: 1em;
  font-weight: bold;
  margin: 0;
}

#header_left div.heroPics { position:absolute; top:100px; left:18%; }

/* -- Header - das Charbild ----------------------------------------- */
#header_left div.heroPics img { float:left; max-height:100px; max-width:120px; margin:0 10px; }

/* -- Header - Rasse und Profesion----------------------------------------- */
#header_float p {
  font-size: 0.90em;
  margin: 0px 0px 5px 0px;
  color: #fef1b9;
}
/* -- Header - aktueller Aufenthaltsort----------------------------------------- */
#header_float_left em {
  font-size: 1.10em;
}

#header_right {
  /* das Logo ist mächtig breit, daher wird Kalender und heroShortInfo aus
  dem td heraus nach links verschoben */
}

#header_right div.kalender {
  float: right;
  width: 140px;
  height: 100px;
  margin-top: 80px;
  margin-right: 73px;
  font-weight: bold;
  font-size: 85%;
  text-align: center;
  color: #fef1b9;
}

#header_right div.kalender img { border: 2px solid gray; }

#header_right div.heroShortInfo {
  margin-left: -150px;
  margin-top: 50px;
  height: 140px;
  min-width: 300px;
  padding: 26px 0 0 40px;
  background: url(../../bilder/bilder_bombast/png/header_paper.png) no-repeat;
  color: #fef1b9;
  line-height: 1.2em;
}

#header div.heroShortInfo span.held_kultur,
#header div.heroShortInfo span.held_variante {
  color:#282620;
}

#header_right {
  background: url(../../bilder/bilder_bombast/png/header_right.png) no-repeat right top;
  width: 245px;
  padding: 0;
  margin: 0;
}

/**
 * Spielmenü auf der linken Seite
 */
#menuBox {
  width: 200px;
  vertical-align: top;
  margin:0;
  padding:0;
}

#menuInnerBox {
  margin:0;
  padding:0;
  width: 200px;
  height: 855px;
  font-size: 1.0em;
  list-style-type: none;
  background: url(../../bilder/bilder_bombast/png/hintergrund_menu.png) no-repeat left top;
}

#menuInnerBox2 {
  width: 200px; /* Höhe dieses Divs wird über JavaScript gesetzt */
  min-height: 250px;
  background: url(../../bilder/bilder_bombast/png/kacheln_menu.png) repeat-y left top;
}

#menuBox div#menu_pin_buttons {
  display:none;
}

div#menu {
  background-image: url(../../bilder/bilder_bombast/png/div_menu.png);
  background-repeat: no-repeat;
  background-position: top right;
  width: 210px;
  height: 548px;
  padding: 10px 0px 30px 0px;
  z-index: 3;
  margin: auto;
}

/*Spielmenü auf der linken Seite - Aufzählung*/
#menu ul { margin: 5px 25px 5px 15px; padding: 0 0 0 50px; }

/*Spielmenü auf der linken Seite - Bilder*/
#menu img {
  vertical-align: baseline;
}

/*Spielmenü auf der linken Seite - Links*/
#menu a{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fef1b9;
  font-weight: bold;
  line-height: 1.4em;
  font-size: 1.0em;
}
/*Anzeige des ersten Buchstaben im Spielmenü*/
#menu a:first-letter {
  color: #cca935;
  font-size: 1.15em;
}

#menu a.extern {
  background: url(../../bilder/extern.gif) no-repeat;
  padding-left: 20px;
}

#menu a.info {
  background: url(../../bilder/info.png) no-repeat;
  padding-left: 20px;
}

#menu a.pdf {
  background: url(../../bilder/pdf-document.png) no-repeat;
  padding-left: 20px;
}

#menu a.rpg {
  background: url(../../bilder/kampf/aktion_bewegen.png) no-repeat;
  padding-left: 20px;
}

div#menu li.ungeleseneNachrichten {
  background:transparent url(../../bilder/scroll.png) no-repeat scroll right center;
  margin-right:-10px;
}

/*Anzeige des versteckten Spielmenüs*/
#menu_hint {
  width: 10px;
  background-color: #dce1e5;
  border: 1px solid #a9b8c2;
  position: absolute;
  top: 154px;
  left: 0;
  border: 0;
  margin: 0;
  padding: 0;
  z-index: 10000;
}

/* -- Heldeninfo ------------------------------------------------------------- */
#heldeninfoBox {
  vertical-align: top;
  padding: 0;
  margin: 0;
  font-size: 0.85em;
  list-style-type: none;
  color: #fef1b9;
  width: 330px;
}

#heldeninfoInnerBox {
  margin: 0;
  padding: 0;
  background: url(../../bilder/bilder_bombast/png/hintergrund_heldeninfo.png) no-repeat right top;
  height: 855px;
  z-index: 3;
}

#heldeninfoInnerBox2 {
  width: 330px; /* Höhe dieses Divs wird über JavaScript gesetzt */
  min-height: 250px;
  background: url(../../bilder/bilder_bombast/png/kacheln_held.png) repeat-y right top;
}

#heldeninfoBox div#heldeninfo_pin_buttons {
  display:none;
}

div#heldeninfo {
  background-image: url(../../bilder/bilder_bombast/png/div_heldeninfo.png);
  background-repeat: no-repeat;
  background-position: top center;
  min-width: 279px;
  max-width: 303px;
  height: 850px;
  vertical-align: top;
  padding: 15px 0 0 0;
}

#heldeninfo .control {
  display: none;
  position: relative;
  margin-top: 5px;
  z-index: 1000;
  float:left;
  left: 70px;
  top: -10px;
}

#heldeninfo .control a {
  position: absolute;
  text-decoration: none;
}

#heldeninfo a.tip {
  color: #cca935;
  border-bottom: #cca935;
}

#heldeninfo > div {
  line-height: 1.15em;
}

#heldeninfo ul{
  margin:5px 0px 5px 55px;
  padding:0 0px 2px 0px;
  border-bottom:1px solid #cca935;
  width: 190px;
}

#heldeninfo ul span.klein {
  color: #fef1b9;
}

#heldeninfo ul > li > a {
  color:#CCA935;
}

#heldeninfo table {
  border-spacing:0;
  width: 190px;
  color: #fef1b9;
}

#heldeninfo h2 {
  font-size: 1.2em;
}

#heldeninfo h2 a{
  text-align: center;
  padding: 0;
  margin:5px 42px 5px 38px;
  display: block;
  color: #fef1b9;
  font-weight: bolder;
  font-variant: small-caps;
}

#heldeninfo h2 a:first-letter {
  font-size:1.5em;
  color:#cca935;
}

#heldeninfo_hint {
  width: 10px;
  background: #dce1e5;
  position: absolute;
  top: 154px;
  right: 0;
  border: 1px solid #cca935;
  margin: 0;
  padding: 0;
  z-index: 10000;
}

table.heldeninfo_eigenschaften {
  border: 0;
  padding: 0;
  margin: 0;
  line-height:0.5em;
  border-collapse: collapse;
}

table.heldeninfo_eigenschaft {
  table-layout:fixed;
}

div#heldeninfo table.heldeninfo_eigenschaften a.link_steigern { /* das + zum Steigern*/ 
  cursor: pointer;
  color: #CCA935;
  text-decoration: none;
}

div#heldeninfo table.heldeninfo_eigenschaften th {
  text-align:left;
  width:74%;
}

div#heldeninfo table td.left {
  text-align: left;
  width: 13%;
  white-space: nowrap;
}

div#heldeninfo table td.right {
  text-align: right;
  width: 13%;
  color: #fef1b9;
}

/*Punkte, Gottheit, Geld*/
.pgg {
  margin:5px 55px 5px 55px;
  padding:0 0 2px 0;
  border-bottom: 1px solid #cca935;
}

div.heldeninfo_inPGG {
  clear: both;
  width: 190px;
}

div.heldeninfo_inPGG strong {
  float: right;
  text-align: right;
}

span#wundentext{
  font-size:0.8em;
}

span#gott {
  float: left;
  width: 50px;
}

span.EP_gesamt, span.EP_guthaben, span.stufe, span.groschen, span.thaler, span.gulden {
  float: left;
  width: 100px;
}

div#heldeninfo_rs {
  float: none;
}

strong#held_EP_guthaben, strong#held_stufe, strong#thaler, strong#groschen {
  width: 50px;
}

strong#gulden, strong#held_EP_gesamt {
 width: 80px;
}

strong#held_gott {
  width: 130px;
}

div.geld {
  margin:5px 55px 5px 55px;
  padding:0 0 2px 0;
  border-bottom: 1px solid #cca935;
}

div#treffer_zone_und_waffen {
  margin: 5px 50px 5px 40px;
}

div.heldeninfo_rs_waffen {
  margin:0px 0px 0px 15px;
  padding:0pt 0pt 2px;
}

div.heldeninfo_waffen {
  width:90px;
  float:right;
  overflow:visible;
  text-align:right;
}

div.heldeninfo_ausgeruestete_waffen {
  border-left:1px solid #cca935;
}

table.kampf{
  background-color: rgba(100,30,30,0.5);
}

table.kampf th{
  background-color: rgba(100,30,30,0.9);
}

table.kampf td,
table.kampf th{
  padding: 0.5em;
  border: 1px solid #402C13
}


/* ------------------------------------------------------------------------------- */
.button {
  font-variant: small-caps;
  border: 1px solid #cca935;
  border-radius: 0.2em;
  font-size: 1.2em;
  color: #c1ab49;
  text-shadow: 0 0 0.3em #c1ab49;
  margin: 0.1em;
  padding: 0.2em;
  cursor: pointer;
  background-color: darkred;
  box-shadow: 0px 0px 0.25em 0.25em rgba(0,0,0,0.5) inset;
}

.button:hover{
  transform: translateY(-1px);
  box-shadow: 0 0.25em 0.25em rgba(0,0,0,0.5);
}

#spendenbutton{
    background-color: darkblue;
    font-size: 1.3em;
}

/* -- Footer ---------------------------------------------- */
table#footer {
  width: 100%;
  border-collapse: collapse;
}

td#footer_left {
  background-image: url(../../bilder/bilder_bombast/png/footer_left.png);
  background-repeat: no-repeat;
  background-position: top left;
  width: 432px;
}

td#footer_float {
  background-image: url(../../bilder/bilder_bombast/png/footer_tile.png);
  background-repeat: repeat-x;
  background-position: top left;
  width: auto;
  height: 335px;
}

td#footer_right {
  background-image: url(../../bilder/bilder_bombast/png/footer_right.png);
  background-repeat: no-repeat;
  background-position: top right;
  width: 448px;
}

#copy {
  background-image: url(../../bilder/bilder_bombast/png/80prozPixel.png);
  margin: 0px auto;
  padding: 5px 10px 5px 10px;
  letter-spacing: 0;
  border: 1px solid #fef1b9;
  z-index: 1;
}

#copy p{
  font-size:9px;
  line-height:1.1em;
  margin:3pt auto;
  text-align:center;
  color: #fef1b9;
}

/* -- ZB-Ausgabe ------------------------------------------------------------ */
img.zb_pic {
  float: right;
  margin: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}


div.tag div.tag_clear { clear: right; }

.tag {
  border:1px solid #a9b8c2;
  padding:8px 8px 3px 8px;
  margin:6px;
  text-align: left;
  border-radius: 0.3em;
}

.tag_ooc {
  border:1px solid #a9b8c2;
  padding: 0.2em;
  margin-bottom: 6px;
  background-color: #ececec2e;
  font-family: Montserrat, sans-serif;
  border-radius: 0.3em;
  box-shadow: inset 0 0 0.4em black;
}

.tag_ooc .liste {
  padding-left: 15px;
}

.tag_ooc .verloren{
  color: #DC0000;
}

.ooc {
  color: #C3812C !important;
}

table.liste {
  width: 90%;
}

table.liste td, table.liste th {
  padding: 3px;
}

div.opacity_30 {
  opacity: 0.3;
}

.ooc_chat {
  color:#666666;
}

.meister {
  color: #C3812C;
  font-style: oblique;
  font-weight: bold;
  letter-spacing: 0em;
}

.gelernt {
  color:black;
}

.ungelernt {
  color:gray;
}

.tip_content .tip {
  border: 0;
}

.tip_content .tip img {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
}

#chatterList {
  position: absolute;
  font-weight: 600;
  width: 250px;
  border: 1px solid #fef1b9;
  margin: 0px;
  color: #323D4F;
}

#chatterList > div {
  height: 5.4em;
  font-weight: 300;
  overflow: hidden;
  background-color: #fff4df;
  text-align: left;
  font-size: 1em;
}

.inlimit {
  color: #402C13;
  width: 3.5em;
}

.toomuch {
  color: #AD4234;
  width: 3.5em;
}

/* -- Trefferzonenanzeige --------------------------------------------------- */
.verwundet {
  position: absolute;
  display: inline;
  width: 15px;
  height: 15px;
  float: left;
  background-image: url(../../bilder/kampf/verwundet.png);
  background-repeat: no-repeat;
}

div.trefferzonen {
  float: left;
  width: 103px;
  height: 231px;
  background-image: url(../../bilder/trefferzonen/hintergrund.png);
  background-repeat: no-repeat;
  margin-left: -10px;
}

div.trefferzonen div {
  position: absolute;
  width: 10px;
  height: 12px;
  float: left;
}

div.trefferzonen .wunde {
  width: 5px;
  height: 5px;
  margin: 0;
  position: absolute;
  float: left;
  background-image: url(../../bilder/trefferzonen/wunde.png);
  background-repeat: no-repeat;
}

div.trefferzonen .rs0 {
  background: url(../../bilder/trefferzonen/rs0.png) no-repeat;
}

div.trefferzonen .rs1 {
  background: url(../../bilder/trefferzonen/rs1.png) no-repeat;
}

div.trefferzonen .rs2 {
  background: url(../../bilder/trefferzonen/rs2.png) no-repeat;
}

div.trefferzonen .rs3 {
  background: url(../../bilder/trefferzonen/rs3.png) no-repeat;
}

div.trefferzonen .rs4 {
  background: url(../../bilder/trefferzonen/rs4.png) no-repeat;
}

div.trefferzonen .rs5 {
  background: url(../../bilder/trefferzonen/rs5.png) no-repeat;
}

div.trefferzonen .rs6 {
  background: url(../../bilder/trefferzonen/rs6.png) no-repeat;
}

div.trefferzonen .rs7 {
  background: url(../../bilder/trefferzonen/rs7.png) no-repeat;
}

div.trefferzonen .rs8 {
  background: url(../../bilder/trefferzonen/rs8.png) no-repeat;
}

div.trefferzonen #rs_kopf {
  margin-left: 47px;
  margin-top: 17px;
}

div.trefferzonen #rs_rarm {
  margin-left: 5px;
  margin-top: 67px;
}

div.trefferzonen #rs_larm {
  margin-left: 89px;
  margin-top: 67px;
}

div.trefferzonen #rs_brust {
  margin-left: 42px;
  margin-top: 49px;
}

div.trefferzonen #rs_ruecken {
  margin-left: 52px;
  margin-top: 49px;
}

div.trefferzonen #rs_uleib {
  margin-left: 47px;
  margin-top: 86px;
}

div.trefferzonen #rs_rbein {
  margin-left: 33px;
  margin-top: 173px;
}

div.trefferzonen #rs_lbein {
  margin-left: 61px;
  margin-top: 173px;
}

div.trefferzonen #w1_kopf {
  margin-left: 42px;
  margin-top: 10px;
}

div.trefferzonen #w2_kopf {
  margin-left: 49px;
  margin-top: 10px;
}

div.trefferzonen #w3_kopf {
  margin-left: 56px;
  margin-top: 10px;
}

div.trefferzonen #w1_rarm {
  margin-left: 11px;
  margin-top: 60px;
}

div.trefferzonen #w2_rarm {
  margin-left: 16px;
  margin-top: 55px;
}

div.trefferzonen #w3_rarm {
  margin-left: 21px;
  margin-top: 50px;
}

div.trefferzonen #w1_larm {
  margin-left: 78px;
  margin-top: 50px;
}

div.trefferzonen #w2_larm {
  margin-left: 83px;
  margin-top: 55px;
}

div.trefferzonen #w3_larm {
  margin-left: 88px;
  margin-top: 60px;
}

div.trefferzonen #w1_brust {
  margin-left: 42px;
  margin-top: 42px;
}

div.trefferzonen #w2_brust {
  margin-left: 49px;
  margin-top: 42px;
}

div.trefferzonen #w3_brust {
  margin-left: 56px;
  margin-top: 42px;
}

div.trefferzonen #w1_bauch {
  margin-left: 42px;
  margin-top: 79px;
}

div.trefferzonen #w2_bauch {
  margin-left: 49px;
  margin-top: 79px;
}

div.trefferzonen #w3_bauch {
  margin-left: 56px;
  margin-top: 79px;
}

div.trefferzonen #w1_rbein {
  margin-left: 35px;
  margin-top: 152px;
}

div.trefferzonen #w2_rbein {
  margin-left: 35px;
  margin-top: 159px;
}

div.trefferzonen #w3_rbein {
  margin-left: 35px;
  margin-top: 166px;
}

div.trefferzonen #w1_lbein {
  margin-left: 63px;
  margin-top: 152px;
}

div.trefferzonen #w2_lbein {
  margin-left: 63px;
  margin-top: 159px;
}

div.trefferzonen #w3_lbein {
  margin-left: 63px;
  margin-top: 166px;
}

/* -- Tooltip --------------------------------------------------------------- */
div.tip,
span.tip,
a.tip,
a.tip:link,
a.tip:hover,
a.tip:visited,
a.tip:active {
  text-decoration: none;
  cursor:help;
  border-bottom: 1px dotted #F6C46F;
}

div.tip-text p,
div.tip-text td,
div.heldenbrief,
div.heldenbrief td,
div.heldenbrief th{
  color: black;
  text-shadow: none;
}

div.held_tip{
  border: 1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: #2a2a2a;
  background-image: none;
  width: auto;
  height: auto;
  padding-bottom: 1em;
}


/* -- Jobangebote im Rathaus ------------------------------------------------ */
.job {
  margin: 5px;
  width: 700px;
}
.job  td{
  background-color: rgba(100,30,30,0.5);
}

#job_ende {
  max-width: 90%;
  background-color: #F6C46F;
}

.green {
  color: #00A100;
}

.red {
  color: #F00;
}

.marktstand {
  max-height: 28em; /* ~ 10 Waren */
  overflow: auto;
}

.marktstand table {
  width: 93%;
  margin: 3px auto 3px auto;
}

.auswahl table {
  width: 93%;
  margin: 3px auto 3px auto;
}

.ortsbeschreibung {
  width: 93%;
  overflow: auto;
  margin: 3px auto 3px auto;
  padding: 5px;
  border: 1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px  rgba(0,0,0,0.5);
  background-color: rgba(65,65,65,0.4);
}
.ortsbeschreibung img{
  width: 30%;
  float:right;
}

div.toggle_stadtinfos{
  filter: drop-shadow(0px 0px 2px #FEF1B9);
}

div.kampf_v2 .helptextBox {
  color: #c1ab49;
}

/* -- Accordion ------------------------------------------------------------- */
.accordion_toggle,
.accordion_toggle2 {
  text-align: left;
  display: block;
  overflow: hidden;
  height: 30px;
  width: 93%;
  background-image: url(../../bilder/bilder_bombast/png/80prozVerlauf.png);
  background-repeat: repeat-x;
  background-position: top;
  line-height: 30px;
  cursor: pointer;
  margin: 0 20px 0 20px;
  padding-left: 10px;
  text-align: left;
  border-top: 1px solid #222;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
}

.leave {
  display: block;
  overflow: hidden;
  height: 30px;
  width: 93%;
  background-image: url(../../bilder/bilder_bombast/png/80prozVerlauf.png);
  background-repeat: repeat-x;
  background-position: top;
  line-height: 30px;
  color: #7b1816;
  cursor: pointer;
  margin: 0 20px 0 20px;
  padding-left: 10px;
  text-align: left;
}

.accordion_toggle_active {
  background-image: url(../../bilder/bilder_bombast/png/20prozVerlauf.png);
  background-repeat: repeat-x;
  background-position: top;
  color: #fef1b9;
}

.accordion_content,
.accordion_content2 {
  overflow: hidden;
  width: inherit;
  padding-left: 0;
  margin: 0 20px;
  text-align: left;
  max-height: 0;
  opacity: 0;
}

/* -- Chat Toggle Button im Gruppen-Accordion ------------------------------- */
.accordion_toggle2 {
  position: relative;
}

.chat-toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 30px;
  color: #fef1b9;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.9));
  border: none;
  border-left: 1px solid rgba(254, 241, 185, 0.3);
}


.chat-toggle-btn:hover {
  background: linear-gradient(to bottom, rgba(50, 50, 50, 0.9), rgba(40, 40, 40, 0.95));
}

.chat-toggle-icon {
  display: inline-block;
}

#chat_gruppe_wrapper {
  overflow: hidden;
}

#chat_gruppe_wrapper.chat-hidden {
  height: 0;
}

/* --- Helden-Kampfwerte ------------------------------------------------- */
table.kampf_ausruestung { padding: 3px; width: 90%; }

/* -- Kampfbericht ---------------------------------------------------------- */
.kampf td{ text-align:center; padding:1px; }
.held { color: #00A100; }
.gegner { color: #DC0000; }
.kampf .name_multi_held { color: #00A100; }
.kampf .name_multi_gegner { color: #DC0000; }
.kampf .beschreibung { color: #d42a04; }

/* -- Cash Symbole (Dukaten, Silberlinge, Heller) ------------------------------*/

.game p img.cash {
  margin-top: 1px;
  margin-right: 1px;
  margin-bottom: 1px;
  margin-left: 1px;
  width: 17px;
  height: 14px;
  float: none;
  display: inline;
}

/* -- Bank ----------------------------------------------------------------*/
table.bank {
  text-align: left;
}

div.bank_bild {
  float: right;
}

/* Bank-Sektionen */
.bank-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.bank-section h3 {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.1em;
}

.bank-section h4 {
    margin: 10px 0 8px 0;
    font-size: 1em;
}

.bank-overview .bank-balance {
    display: flex;
    gap: 40px;
    margin-bottom: 10px;
}

.bank-overview .balance-item {
    display: flex;
    flex-direction: column;
}

.bank-overview .balance-label {
    font-size: 0.85em;
    opacity: 0.7;
}

.bank-overview .balance-value {
    font-size: 1.3em;
    font-weight: bold;
}

.bank-overview .bank-info {
    margin: 10px 0 0 0;
    font-size: 0.9em;
    opacity: 0.7;
}

.bank-currency-input {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.bank-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bank-account-close {
    margin-top: 10px;
    text-align: right;
    font-size: 0.9em;
}

.bank-subsection {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bank-subsection:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bank-creditletter-scope {
    margin: 8px 0;
}

.bank-creditletter-scope label {
    margin-right: 15px;
}

.bank-redeem-input {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.bank-redeem-input label {
    white-space: nowrap;
}

.bank-transfers {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.95em;
}

.bank-transfers th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    font-weight: normal;
    opacity: 0.7;
}

.bank-transfers td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: middle;
}

.bank-transfers .phrase-text {
    font-family: monospace;
    white-space: nowrap;
}

.bank-transfers .transfer-amount {
    white-space: nowrap;
}

.bank-transfers .transfer-note input {
    width: 100%;
    max-width: 150px;
}

/* -- Ausruestungseite ----------------------------------------------------------------*/
div.mBoxContent,
.wcontainer > table > tbody > tr > td
{
  text-shadow: none;
  color: #777777;
}

/* -- AOQML --------------------------------------------------------------------------*/
.eoq {
  text-align:center;
}

.aoqml li {
  list-style-type: disc;
  margin: 0.2em 1.2em;
}

.aoqml q {
  font-style: italic;
  color: #fef1b9;
}

.aoqml a q{
  font-style: italic;
  color: #d42a04;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

.aoqml q span.tip {
  color: #969696;
}

.aoqml span.cite {
  font-style: italic;
  color: #505050;
  margin-left:1em;
}

.aoqml cite {
  font-style: italic;
  color: #505050;
  margin-left:1em;
}

.aoqml a {
  text-decoration: underline;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

.aoqml a p{
  text-decoration: underline;
  color: #d42a04;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

.aoqml .debug {
  text-align: center;
  color: gray;
}

.aoqml .antamar {
  font-style: italic;
  color: #FFD98F;
  border: none;
}

.aoqml .oog {
  color: #323D4F;
  border-radius: 0.3em;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  text-shadow: none;
  /* der Rest bereits in antamarGeneral.css definiert */
}

.aoqml .oog p{
  color: #323D4F;
  text-shadow: none;
}

div.oog {
  text-shadow: none;
}

.aoqml p img {
  width: auto;
}

.aoqml .maze img {
  padding: 0;
  margin: 0;
}


.aoqml.quest{
  border:1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(65,65,65,0.4);
  margin: 6px 6px 16px 6px;
}

/* -- held_wechsel -------------------------------------------------------------*/
.white_box {
  padding: 20px;
  text-align: center;
}

.bold {
  font-weight: bold;
}

#Ladebalken {
  margin: 0 auto;
  padding: 0;
  width: 200px;
}

.geladen {
  background-image: url(../../bilder/ladebalken/strich_transparent.png);
  max-width: 200px;
  height: 12px;
  margin-top: 1px;
}
.geladen div {
  width: 200px;
  height: 12px;
  margin: 0px;
  padding: 0px;
  background-image: url(../../bilder/ladebalken/rahmen.png);
  background-color: transparent;
}

.geladen_text {
  width: 200px;
  background-color: transparent;
}

/* -- regiezna -----------------------------------------------------------------*/
.egiezna {
  text-align: center;
  border: 1px double #A9A9A9;
  background: rgba(48, 36, 18, 0.55);
  width: 93.25%;
}

.egiezna_kopf {
  width: 100%;
  max-width: 100%;
  font-size: 0.8em;
  border-bottom: 1px double #A9A9A9;
}

.egiezna_inhalt {
  padding: 5px;
  text-align: left;
}

.egiezna_spam_lnk {
  cursor: pointer;
  text-align: right;
  font-size: 0.6em;
  padding-right: 3px;
}

.regiezna {
  width: 95%;
  max-width: 500px;
  background: #2a2418;
}

.regiezna hr {
  width: 10%;
  color: #402C13;
}

.regiezna_top {
  text-align: center;
  vertical-align: middle;
  height: 80px;
  width: 500px;
  max-width: 500px;
  background-image: url(../../bilder/rathaus/ParchementHeader.png);
  background-repeat: no-repeat;
}

.regiezna_title {
  padding: 8px 0px 0px 0px;
  height: 72px;
  background-image: url(../../bilder/rathaus/anzeiger.png);
  background-repeat: no-repeat;
  background-position: center 20px;
}

.regiezna_middle h3 {
  padding: 0px 0px 0px 0px;
  text-align: center;
  vertical-align: middle;
  width: 500px;
  font-size: 2.0em;
  line-height: 1em;
  font-weight: 600;
  color: #c1ab49;
}

.regiezna_middle h3:first-letter {
  font-size: 1.4em;
  line-height: 1em;
  font-weight: 900;
  color: #AD4234;
  vertical-align: middle;
}

.regiezna_middle {
  text-align: center;
  background-image: url(../../bilder/rathaus/RepeatingParchement.png);
  background-repeat: repeat-y;
  width: 500px;
  max-width: 500px;
  min-width: 500px;
}

.regiezna_bottom {
  background-image: url(../../bilder/rathaus/ParchementFooter.png);
  background-repeat: no-repeat;
  height: 80px;
  width: 500px;
  max-width: 500px;
}

.regiezna_inhalt {
  padding: 10px 40px 10px 40px;
  max-width: 500px;
}

.regiezna_rubrik {
  border: 1px solid #402C13;
  width: 96%;
}

.regiezna_rubrik_beschreibung {
  font-size: 0.8em;
  text-align: left;
  font-style: oblique;
  margin-bottom: 5px;
  border-bottom: 1px dotted #402C13;
}

.regiezna_rubrik_inhalt {
  padding-bottom: 10px;
  max-height: 200px;
  overflow: auto;
  text-align: center;
}

/* -- Console ------------------------------------------------------------------*/

.console {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 400px;
  height: 250px;
  max-height: 250px;
  border: 2px groove black;
  z-index: 60000;
  background-color: #D3913C;
}

.console .console_header {
  width: 100%;
  height: 10%;
  max-height: 10%;
  color: #402C13;
  background-color: #D3913C;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  font-weight: bold;
}

.console .console_header .console_close_button {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  right: 2px;
  vertical-align: top;
}

.console .console_outputwrap {
  width: 100%;
  max-width: 100%;
  height: 80%;
  max-height: 80%;
  font-family: monospace;
  font-size: 12px;
  background-color: #FFD98F;
  text-align: left;
  line-height: 13px;
  overflow: auto;
  border-top: 1px solid black;
  margin-top: -1px;
}

.console .console_output {
  padding: 2px;
}

.console .console_footer {
  width: 100%;
  height: 10%;
  max-height: 10%;
  font-size: 10px;
  background-color: #D3913C;
  text-align: center;
  line-height: 13px;
  overflow: auto;
  display: inline-block;
  border-top: 1px solid black;
  margin-top: -1px;
}

.console .console_footer_checkbox {
  width: 13px;
  height: 13px;
  vertical-align: top;
}

.console .console_footer_checkbox_label {
  text-align: left;
  color: black;
  width: 45%;
  height: 2.5em;
  display: inline-block;
}

.console .console_footer_checkbox_general {
  width: 13px;
  height: 13px;
  vertical-align: top;
}

.console .console_footer_checkbox__general_label {
  text-align: left;
  color: black;
  width: 45%;
  height: 2.5em;
  display: inline-block;
}

/*Infobox für Stadtansichten - Wappen*/
.stadt_info{
  border:1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(65,65,65,0.4);
}

#stadt_info_wappen {
  width: 100px;
  text-align: center;
  vertical-align: middle;
}

#stadt_info_wappen img{
  filter: drop-shadow(0px 0px 5px #FEF1B9);
}

#stadt_info_text {
  vertical-align: top;
}

.zentriert {
  font-size: 75%;
  text-align: center;
}

/* Noch aktiv? Nicht im Code gefunden Tommek 02.05.2020
#weiterreisen {
  white-space: nowrap;
  text-align: right;
  float: none;
  border: none;
  text-align: center;
  bottom: 30px;
}

#weiterreisen_links {
  width: 125px;
  height: 20px;
}

#weiterreisen_rechts {
  width: 101px;
  height: 17px;
}*/

.gruppe_verwaltung_box{
  border:1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(65,65,65,0.4);
  margin: 6px 6px 16px 6px;
}

div.gruppe_heldenuebersicht{
  border:1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(65,65,65,0.4);
  margin: 6px 6px 16px 6px;
  color: #c1ab49;
}

/**
 * Anpassung Gebäude für bombast-Skin
 */
ul.ort_hauptgebaeude {
  margin-left: 30px;
}

/**
 * weitere Helden im Ort/Taverne/Orden usw.
 */
div.weitere_helden { text-align: center; padding-bottom: 10px; height: auto; margin: auto; }
div.weitere_helden div.weitere_helden_output { margin: auto; }
div.weitere_helden form { margin-bottom: 20px; }

/**
 * Nachrichten
 */
div.nachrichten table#nachrichten, div.nachrichten table#rp_liste { width: 98%; margin: 3px auto; }
div.nachrichten table#nachrichten td.betreff { text-align: left; }
table.tableNachrichten { width: 85%; }
table.tableNachrichten td.nachricht_inhalt { text-align: left; }

/* Nachrichten Tabs - Bombast Theme */
.nachrichten-tabs .tab {
    border: 1px solid #cca935;
    border-radius: 0.2em;
    background-color: darkred;
    color: #c1ab49;
    text-shadow: 0 0 0.3em #c1ab49;
    box-shadow: 0px 0px 0.25em 0.25em rgba(0,0,0,0.5) inset;
}
.nachrichten-tabs .tab:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.25em 0.25em rgba(0,0,0,0.5);
}
.nachrichten-tabs .tab.active {
    background-color: #6b0000;
    box-shadow: 0px 0px 0.25em 0.25em rgba(0,0,0,0.5) inset, inset 0 -3px 0 0 #cca935;
}

/* Nachrichten Editor - Bombast Theme */
.nachrichten-editor {
    background: linear-gradient(180deg, #2a0a0a 0%, #1a0505 100%);
    border: 1px solid #cca935;
    color: #c1ab49;
}
.nachrichten-editor h3 {
    border-bottom-color: #cca935;
    color: #c1ab49;
    text-shadow: 0 0 0.3em #c1ab49;
}
.editor-row label {
    color: #c1ab49;
}
.editor-actions {
    border-top-color: #cca935;
}

/* Nachrichten/RP DataTables - Bombast Theme */
#nachrichten_wrapper, #rp_liste_wrapper,
#nachrichten_wrapper td, #rp_liste_wrapper td,
#nachrichten_wrapper th, #rp_liste_wrapper th,
#nachrichten_wrapper label, #rp_liste_wrapper label,
#nachrichten_wrapper input, #rp_liste_wrapper input,
#nachrichten_wrapper select, #rp_liste_wrapper select,
#nachrichten_wrapper .dataTables_info, #rp_liste_wrapper .dataTables_info,
#nachrichten_wrapper .dataTables_length, #rp_liste_wrapper .dataTables_length,
#nachrichten_wrapper .dataTables_filter, #rp_liste_wrapper .dataTables_filter,
#nachrichten_wrapper .dataTables_paginate, #rp_liste_wrapper .dataTables_paginate {
    text-shadow: none;
    color: #c1ab49;
}
#nachrichten.dataTable thead th, #rp_liste.dataTable thead th {
    background-color: #3a1515;
    color: #cca935;
    border-bottom: 1px solid #cca935;
}
#nachrichten.dataTable tbody tr.odd, #rp_liste.dataTable tbody tr.odd {
    background-color: #1a0808;
}
#nachrichten.dataTable tbody tr.even, #rp_liste.dataTable tbody tr.even {
    background-color: #2a0a0a;
}
#nachrichten.dataTable tbody tr:hover, #rp_liste.dataTable tbody tr:hover {
    background-color: #3a1515 !important;
}
#nachrichten.dataTable td a, #rp_liste.dataTable td a {
    color: #d42a04;
}
#nachrichten.dataTable td a:hover, #rp_liste.dataTable td a:hover {
    color: #cca935;
}
.nachrichten-actions {
    color: #c1ab49;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #c1ab49 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #3a1515 !important;
    border-color: #cca935 !important;
    color: #cca935 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #6b0000 !important;
    border-color: #cca935 !important;
    color: #cca935 !important;
}

/**
 * Arena
 */
div.arena img.arena_img1 { width: 60%; text-align: right; }
div.arena img.arena_img2 { width: 30%; text-align: right; }

/**
 * Kerker
 */
div.kerker { max-width: 400px; text-align: center; margin: auto; padding-bottom: 20px; }
div.kerker img.kerkerImg { display: block; max-width: 390px; }

/**
 * Begleiter
 */
div.begleiter a:hover { text-decoration: none; background: none; }

/* Gepäck */
div.gepaeck_inhalt_box { background: url(../../bilder/bilder_bombast/png/80prozPixel.png) transparent; }
div.gepaeck_inhalt table.nahwaffen, div.gepaeck_inhalt table.schilde, div.gepaeck_inhalt table.ruestung, div.gepaeck_inhalt table.fernwaffen { clear:none; margin:0; }

/* Rss Teaser auf Loginseite */
div.RssTeaser,
div.loginIntro div.introText,
table.loginTable{
  margin: 0 auto 1em;
  padding: 1em;
  width: 780px;
  border: 1px solid #402C13;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
  background-color: rgba(65,65,65,0.4); }

div.RssTeaser h1 { text-align: center; }
div.RssTeaser { margin-bottom: 50px; }

form.loginForm td.fb {
  background-color: rgba(0,0,0,0.0);
}

/* Warentausch */
div.auswahlbox table.warentausch,
div.auswahlbox span a,
#gen_content {
  text-shadow: none;
}

div.auswahlbox table.warentausch td,
div.auswahlbox p{
  color: #0f0f0f;
  padding: 5px;
  text-shadow: none;
}

/* Generierung: Goldene Schrift auf dunklem Hintergrund */
div.generierung table.zusammenfassung div.eigwerte td,
div.generierung table.zusammenfassung div.typus td,
div.generierung table.zusammenfassung table td,
div.generierung form div#gen_content table.zusammenfassung tbody tr td.summary,
div.generierung table.zusammenfassung div#eig_chg_text,
div.generierung table.zusammenfassung div#rogue_chg_text,
div.generierung table.zusammenfassung div#rogue_chg_text li,
table.freie_gen_auswahl td,
table.freie_gen_auswahl th {
  color: #c1ab49;
  text-shadow: #040404 1px 1px 1px;
}

div.warning {
  text-shadow: none;
}
/* Genererierung */
div#gen_content table.zusammenfassung table.talente_generierung {
  padding-top: 1em;
  background-color: #FBFBFB;
}

table.talente_generierung th{
  color: black;
  text-shadow: none;
}

div#rogue_chg_text li {
  list-style: inside;
  list-style-type: circle;
  padding-left: 1em;
  text-align: justify;
  padding-top: 0.5em;
}

table#KampfwerteAktuell td{text-align: center;}

/**
 * Notizen
 */
div.notiz { text-align: center; text-align: center; margin: 5px; }
div.notiz textarea { width: 99%; }
div.notiz div.save_button { margin-top: 5px; text-align: center; }
div.notiz #meldung { font-weight: bold; }

/**
Talente Übersicht
 */
td.fertigkeiten {
    text-align: left;
}

/**
Buchquesten
 */
div.buch_linke_seite p { color: #0a0a0a; text-shadow: none; font-size: 0.9rem }
div.buch_rechte_seite p { color: #0a0a0a; text-shadow: none; font-size: 0.9rem }
div.buch_linke_seite q { color: #0a0a0a; text-shadow: none; font-size: 0.9rem }
div.buch_rechte_seite q { color: #0a0a0a; text-shadow: none; font-size: 0.9rem }

div.pergament p {color: #0a0a0a; text-shadow: none;}
div.pergament q {color: #0a0a0a; text-shadow: none;}

/* header buttons zum ein/ausblenden normal nicht zeigen*/
#menu_not_pinned a img {
  display: none;
}

div#header_menu_pin_buttons {
  display: none;
}

div#header_menu_not_pinned a img,
div#header_menu_pinned a img {
  display: none;
}


















/**
Handy Anpassungen
*/
@media (max-width: 770px) {

    /* Header und Seitenbereiche ausblenden */
    #header {display: none}
    #menuBox {display: none !important;}
    #heldeninfoBox {display: none !important;}

    html {
        /* Fluid statt fix 21px — clamp skaliert sanft zwischen 320 und ~430 px Viewport */
        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; }

    div.loginTableBox {
        width: 100%;
    }

    body, td, p,
    h1, h2, h3, h4, h5, h6,
    .button,
    .fertigkeit-progress-text,
    .zauber-progress-text {
        text-shadow: none;
    }
    body, td, p {
        line-height: 1.4em;
    }

    div#gameInnerBox{
        background-color: rgb(30, 30, 30);
        background-image: none;
        margin-top: 0;
        padding: 0;
        /* Desktop-overflow:hidden (Z.305, für den abgerundeten Box-Rahmen)
           auf Mobile zurücksetzen — sonst klippt es den Scroll-Kontext und
           position:sticky (z.B. .kampf-mobile-summary, Transfer-Tabs) bricht.
           Mobil ist die Box randlos voll-breit, das Clipping ist überflüssig. */
        overflow: visible;
    }

    .game_border_left, .game_border_right{
        display: none;
    }

    /* Höhen-Reservierung für Mobile-Bars siehe antamarGeneralv57.css (body padding-*) */
    table.main {
        margin-top: 0;
    }


    /* Zeige das Mobile-Menu/Toolbar an siehe antamarGeneral */
    .div-mobile-menu, .div-mobile-bar{
        display: block;
    }

    /**
 * Spielmenü auf der linken Seite und Heldeninfo (rechts)
 */
    #menuBoxMobile {
        position: fixed; /* Fixiert das Div am Bildschirm */
        top: 0;
        left: 0;
        width: 100%; /* Streckt das Div über die gesamte Bildschirmbreite */
        height: 100%; /* Streckt das Div über die gesamte Bildschirmhöhe */
        background-image: url(../../bilder/bilder_bombast/mobile_menu.jpg);
        background-size: cover; /* Skaliert das Bild, um den Container zu füllen, ohne das Seitenverhältnis zu ändern */
        background-position: top; /* Zentriert das Bild im Div */
        background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
        overflow: auto;
    }

    /* Veraltet: wurde von der alten mobile_heldinfo.php über held_info.inc.php
       genutzt, die jetzt durch den Charakter-Hub (heldhub-* in
       antamarGeneralv57.css) abgelöst ist. Bleibt als Fallback, falls eine
       Drittseite weiterhin auf #heldeninfoBoxMobile baut — aber ohne
       position:fixed, damit der Container im normalen Body-Padding-Schema
       scrollt. */
    #heldeninfoBoxMobile {
        position: static;
        width: 100%;
        background-image: url(../../bilder/bilder_bombast/mobile_heldinfo.jpg);
        background-size: 100% auto;
        background-position: top;
        background-repeat: repeat-y;
        list-style-type: none;
        color: #fef1b9;
        box-sizing: border-box;
        padding-bottom: var(--space-lg);
    }


    #menuInnerBox, #heldeninfoInnerBox {
        margin:0;
        padding:0;
        width: 100%;
        font-size: 1.6em;
        list-style-type: none;
        background: none;
    }

    #menuInnerBox2, #heldeninfoInnerBox2, #heldeninfo_pin_buttons {
        display: none;
    }

    div#menu {
        background-image: none;
        padding: 10px 0px 30px 0px;
        z-index: 3;
        margin-left: 2em;
        margin-top: 2.6em;
        width: 85%;
        min-width: 85%;
        max-width: 85%;
        height: 100%;
    }

    #menu a.info, #menu a.extern{
        background: none;
        padding-left: 0;
    }

    div#heldeninfo {
        background-image: none;
        padding: 10px 0px 30px 0px;
        z-index: 3;
        margin-left: 0;
        margin-top: 1em;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
    }

    div#menu li{
        padding: 5px;
    }
    #heldeninfo table, #heldeninfo ul{
        width: 93%;
    }

    span.EP_gesamt, span.EP_guthaben, span.stufe, span.groschen, span.thaler, span.gulden,
    strong#held_EP_guthaben, strong#held_stufe, strong#thaler, strong#groschen,
    strong#gulden, strong#held_EP_gesamt, strong#held_gott{
        width: 50%;
    }

    div.heldeninfo_inPGG {
        width: 90%;
    }

    div.geld img {
        height: 0.5em;
    }

    #held_teleporter_box{
        display: none;
    }

    div.heldeninfo_waffen {
        width:90%;
        float: none;
        overflow:visible;
        text-align: left;
    }

    div.heldeninfo_ausgeruestete_waffen{
        border-left: none;
    }


    div.trefferzonen {
        float: right;
        transform: scale(2); /* Vergrößert den Inhalt um 50% */
        background-color: rgba(87, 87, 87, 0.81);
        border-radius: 0.2em;
        margin: 0.5em;
    }

    .antamar .tip-text {
        font: 1.2em Arial, Helvetica, sans-serif;
    }


    .accordion_toggle,
    .accordion_toggle2 {
        height: 2em;
        line-height: 2em;
        font-size: 1.3em;
    }

    ul.ort_gebaeude li{
        line-height: 1.5;
    }

    #copy p {
        font-size: 0.9em;
    }

    .leave {
        height: 2em;
        line-height: 2em;
        font-size: 1.4em;
    }

    .AOChatMessageInput{
        font-size: 1.2em;
    }

    input#autologin {
        height: 0.4em;
    }

    td#footer_float{
        padding-top: 3em;
    }

    div#copy{
        display: none;
    }

}

/* Phone-Reflow (<=600 px) — wurde nach antamarGeneralv57.css migriert,
   da der Block skin-agnostisch ist (alle Skins haben .job, .reise_bild,
   .regiezna mit gleichen fixen Pixelbreiten). */

/* ============================================
 * Gespann-Styles (Mehrspänner)
 * ============================================ */
div.begleiter .gespann_box { background:rgba(40,30,20,0.8); border:1px solid #c1ab49; border-radius:4px; padding:10px; margin:5px 0; }
div.begleiter .gespann_header { margin-bottom:8px; padding-bottom:5px; border-bottom:1px solid #c1ab49; }
div.begleiter .gespann_header strong { font-size:1.05em; color:#c1ab49; }
div.begleiter .gespann_info { color:#958e6c; font-size:0.9em; margin-left:8px; }
div.begleiter .gespann_warnung { color:#d42a04; 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:rgba(100,30,30,0.5); border:1px solid #8a7a3a; border-radius:3px; display:flex; align-items:center; gap:10px; }
div.begleiter .gespann_leittier { background:rgba(30,80,30,0.5) !important; border-color:#6a9a4a !important; }
div.begleiter .gespann_liste .tier_name { font-weight:bold; flex:1; color:#c1ab49; }
div.begleiter .gespann_liste .tier_info { color:#958e6c; font-size:0.85em; }
div.begleiter .gespann_liste .tier_zugkraft { color:#fef1b9; font-size:0.85em; min-width:100px; text-align:right; }
div.begleiter .gespann_summe { padding-top:8px; border-top:1px solid #c1ab49; font-size:0.95em; color:#c1ab49; }
div.begleiter .gespann_anspannen { margin-top:10px; padding-top:10px; border-top:1px dashed #8a7a3a; }
div.begleiter .gespann_anspannen select { padding:4px 8px; margin-right:8px; min-width:200px; background:#1a1410; color:#c1ab49; border:1px solid #8a7a3a; }
div.begleiter .gespann_anspannen button { padding:4px 12px; cursor:pointer; background:#8a7a3a; color:#1a1410; border:1px solid #c1ab49; border-radius:3px; font-weight:bold; }
div.begleiter .gespann_anspannen button:hover { background:#c1ab49; }
div.begleiter .btn_abspannen { padding:2px 8px; font-size:0.8em; cursor:pointer; background:rgba(60,40,30,0.8); border:1px solid #8a7a3a; border-radius:3px; color:#c1ab49; }
div.begleiter .btn_abspannen:hover { background:rgba(100,40,40,0.8); border-color:#d42a04; }
div.begleiter .angespannt_info { background:rgba(60,50,30,0.8); border:1px solid #8a7a3a; border-radius:4px; padding:10px; display:flex; align-items:center; gap:10px; color:#c1ab49; }
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; background:#1a1410; color:#c1ab49; border:1px solid #8a7a3a; }
div.begleiter .anspannen_option button { padding:4px 12px; cursor:pointer; background:#8a7a3a; color:#1a1410; border:1px solid #c1ab49; border-radius:3px; font-weight:bold; }
div.begleiter .anspannen_option button:hover { background:#c1ab49; }

/**
 * Fertigkeiten-UI (Dunkel/Gold Theme - Bombast)
 */
.fertigkeiten-ep-info {
    background: rgba(40,30,20,0.7);
    border: 1px solid #8a7a3a;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    color: #c1ab49;
}
.fertigkeiten-ep-info .ep-value { font-weight: bold; font-size: 1.1em; color: #fef1b9; }
.fertigkeiten-ep-info .ep-label { color: #8a7a3a; }

.fertigkeiten-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 15px;
    border-bottom: 2px solid #8a7a3a;
    padding-bottom: 0;
}
.fertigkeiten-tab {
    padding: 8px 14px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    background: rgba(40,30,20,0.5);
    border: 1px solid #8a7a3a;
    border-bottom: none;
    margin-bottom: -2px;
    text-decoration: none;
    color: #c1ab49;
    transition: background 0.2s, border-color 0.2s;
}
.fertigkeiten-tab:hover { background: rgba(60,40,30,0.7); color: #fef1b9; }
.fertigkeiten-tab.active {
    background: rgba(100,30,30,0.6);
    font-weight: bold;
    border-color: #cca935;
    color: #fef1b9;
    border-bottom: 2px solid transparent;
    position: relative;
}
.fertigkeiten-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #1a1410;
}

.fertigkeiten-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    justify-content: center;
}
.fertigkeiten-filter-btn {
    padding: 5px 12px;
    border-radius: 15px;
    border: 1px solid #8a7a3a;
    background: rgba(40,30,20,0.5);
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
    color: #c1ab49;
}
.fertigkeiten-filter-btn:hover { background: rgba(60,40,30,0.7); color: #fef1b9; }
.fertigkeiten-filter-btn.active { background: rgba(100,30,30,0.6); font-weight: bold; color: #fef1b9; border-color: #cca935; }
.fertigkeiten-filter-btn .count {
    background: rgba(100,30,30,0.5);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.85em;
    margin-left: 4px;
}

.fertigkeiten-grid {
    display: grid;
    /* min(320px, 100%) sorgt dafür, dass die Karte auf <320 px Viewports
       volle Breite kriegt statt überzulaufen. */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.fertigkeit-card {
    background: rgba(40,30,20,0.6);
    border: 1px solid rgba(138,122,58,0.5);
    border-radius: 6px;
    padding: 12px;
    text-align: left;
    transition: box-shadow 0.2s, border-color 0.2s;
    color: #c1ab49;
}
.fertigkeit-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    border-color: #cca935;
}
.fertigkeit-card.nicht-steigerbar { opacity: 0.6; }
.fertigkeit-card.maximum-erreicht {
    background: rgba(0,80,0,0.3);
    border-color: rgba(0,161,0,0.5);
}

.fertigkeit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.fertigkeit-name { font-weight: bold; font-size: 1.05em; color: #fef1b9; }
.fertigkeit-name .tip { cursor: help; border-bottom: 1px dotted #8a7a3a; }
.fertigkeit-attribute {
    color: #8a7a3a;
    font-size: 0.9em;
    white-space: nowrap;
}

.fertigkeit-progress-container { margin: 10px 0; }
.fertigkeit-progress-bar {
    height: 20px;
    background: rgba(20,15,10,0.8);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(138,122,58,0.3);
}
.fertigkeit-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B3429, #AD4234);
    border-radius: 10px;
    transition: width 0.3s ease;
}
.fertigkeit-progress-fill.maximum {
    background: linear-gradient(90deg, rgba(0,100,0,0.7), rgba(0,161,0,0.8));
}
.fertigkeit-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85em;
    font-weight: bold;
    color: #fef1b9;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 2px #000;
}

.fertigkeit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.fertigkeit-ep-info { font-size: 0.85em; color: #8a7a3a; }
.fertigkeit-actions { display: flex; gap: 6px; }
.fertigkeit-steigern-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #8a7a3a;
    background: rgba(60,40,30,0.7);
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
    text-decoration: none;
    color: #c1ab49;
}
.fertigkeit-steigern-btn:hover {
    background: rgba(100,30,30,0.7);
    border-color: #cca935;
    color: #fef1b9;
}
.fertigkeit-steigern-btn:disabled,
.fertigkeit-steigern-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.fertigkeit-steigern-btn.primary {
    background: rgba(0,80,0,0.5);
    border-color: rgba(0,161,0,0.6);
    color: #90EE90;
}
.fertigkeit-steigern-btn.primary:hover { background: rgba(0,100,0,0.6); color: #98FB98; }

.fertigkeit-voraussetzungen {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(138,122,58,0.3);
    font-size: 0.85em;
}
.fertigkeit-voraussetzungen summary { cursor: pointer; color: #8a7a3a; }
.fertigkeit-voraussetzungen-list { margin-top: 5px; padding-left: 15px; }

.fertigkeiten-aktivieren {
    background: rgba(40,30,20,0.5);
    border: 1px dashed #8a7a3a;
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px;
    color: #c1ab49;
}
.fertigkeiten-aktivieren h3 { margin: 0 0 10px 0; font-size: 1em; color: #fef1b9; }
.fertigkeiten-aktivieren select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #8a7a3a;
    background: #1a1410;
    color: #c1ab49;
    min-width: 200px;
}

.fertigkeit-status {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}
.fertigkeit-status.blockiert { background: rgba(180,0,0,0.3); color: #ff6666; }
.fertigkeit-status.ep-fehlen { background: rgba(180,100,0,0.3); color: #ffaa44; }
.fertigkeit-status.maximum { background: rgba(0,100,0,0.3); color: #90EE90; }

/* Tipp-Banner */
.fertigkeiten-tipp-banner {
    background: rgba(204,169,53,0.2);
    border: 1px solid #8a7a3a;
    border-left: 4px solid #cca935;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    color: #c1ab49;
}
.fertigkeiten-tipp-banner img { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.fertigkeiten-tipp-banner .tipp-content { flex: 1; }
.fertigkeiten-tipp-banner h2 { margin: 0 0 8px 0; font-size: 1.1em; color: #fef1b9; }
.fertigkeiten-tipp-banner p { margin: 0 0 6px 0; font-size: 0.9em; line-height: 1.4; }
.fertigkeiten-tipp-banner p:last-child { margin-bottom: 0; }
.fertigkeiten-tipp-banner b { color: #fef1b9; }

@media (max-width: 700px) {
    .fertigkeiten-grid { grid-template-columns: 1fr; }
    .fertigkeiten-tabs { gap: 2px; }
    .fertigkeiten-tab { padding: 6px 10px; font-size: 0.9em; }
    .fertigkeiten-ep-info { flex-direction: column; gap: 5px; text-align: center; }
}

/**
 * Zauber-UI (Dunkel/Gold Theme - Bombast)
 */
.zauberBox { padding: 10px; }

.zauber-ep-info {
    background: rgba(40,30,20,0.7);
    border: 1px solid #8a7a3a;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: inline-block;
    color: #c1ab49;
}
.zauber-ep-info .ep-label { color: #8a7a3a; }
.zauber-ep-info .ep-value { font-weight: bold; font-size: 1.1em; color: #fef1b9; }

.zauber-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    justify-content: center;
}
.zauber-filter-btn {
    padding: 5px 12px;
    border-radius: 15px;
    border: 1px solid #8a7a3a;
    background: rgba(40,30,20,0.5);
    color: #c1ab49;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}
.zauber-filter-btn:hover { background: rgba(60,40,30,0.7); color: #fef1b9; }
.zauber-filter-btn.active { background: rgba(100,30,30,0.6); font-weight: bold; color: #fef1b9; border-color: #cca935; }
.zauber-filter-btn .count {
    background: rgba(100,30,30,0.5);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.85em;
    margin-left: 4px;
}

.zauber-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.zauber-card {
    background: rgba(40,30,20,0.6);
    border: 1px solid rgba(138,122,58,0.5);
    border-radius: 6px;
    padding: 12px;
    text-align: left;
    color: #c1ab49;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.zauber-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    border-color: #cca935;
}
.zauber-card.im-kampf-aktiv {
    border-color: rgba(0,161,0,0.6);
    border-width: 2px;
    background: rgba(0,80,0,0.3);
}
.zauber-card.maximum-erreicht {
    background: rgba(0,80,0,0.3);
    border-color: rgba(0,161,0,0.5);
}
.zauber-card.nicht-steigerbar { }

.zauber-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.zauber-name { flex: 1; font-weight: bold; font-size: 1.05em; color: #fef1b9; }
.zauber-name a {
    color: #fef1b9;
    text-decoration: none;
    cursor: help;
    border-bottom: 1px dotted #8a7a3a;
}
.zauber-name a:hover { color: #d42a04; }
.zauber-name img { vertical-align: middle; margin-right: 5px; }

.zauber-status {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    display: inline-block;
    margin-top: 4px;
}
.zauber-status.maximum { background: rgba(0,100,0,0.3); color: #90EE90; }
.zauber-status.ep-fehlen { background: rgba(180,100,0,0.3); color: #ffaa44; }

.zauber-attribute { color: #8a7a3a; font-size: 0.9em; white-space: nowrap; }

.zauber-progress-container { margin: 10px 0; }
.zauber-progress-bar {
    height: 20px;
    background: rgba(20,15,10,0.8);
    border: 1px solid rgba(138,122,58,0.3);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.zauber-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B3429, #AD4234);
    border-radius: 10px;
    transition: width 0.3s ease;
}
.zauber-progress-fill.maximum {
    background: linear-gradient(90deg, rgba(0,100,0,0.7), rgba(0,161,0,0.8));
}
.zauber-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85em;
    font-weight: bold;
    color: #fef1b9;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 2px #000;
}

.zauber-details {
    font-size: 0.85em;
    color: #c1ab49;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zauber-detail { background: rgba(60,40,30,0.5); padding: 3px 8px; border-radius: 3px; border: 1px solid rgba(138,122,58,0.3); }
.zauber-detail-label { color: #8a7a3a; }

.zauber-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(138,122,58,0.3);
}

.zauber-kampf-toggle { display: flex; align-items: center; }
.zauber-toggle-label { display: flex; align-items: center; cursor: pointer; gap: 8px; }
.zauber-kampf-checkbox { display: none; }
.zauber-toggle-slider {
    width: 36px;
    height: 18px;
    background: rgba(60,40,30,0.8);
    border-radius: 18px;
    position: relative;
    transition: background 0.3s;
}
.zauber-toggle-slider::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #c1ab49;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.zauber-kampf-checkbox:checked + .zauber-toggle-slider { background: rgba(0,100,0,0.7); }
.zauber-kampf-checkbox:checked + .zauber-toggle-slider::after { transform: translateX(18px); }
.zauber-toggle-text { font-size: 0.85em; color: #8a7a3a; }

.zauber-ep-info-card { font-size: 0.85em; color: #8a7a3a; }
.zauber-actions { margin-left: auto; }

.zauber-steigern-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #8a7a3a;
    background: rgba(60,40,30,0.7);
    color: #c1ab49;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}
.zauber-steigern-btn:hover {
    background: rgba(100,30,30,0.7);
    border-color: #cca935;
    color: #fef1b9;
}
.zauber-steigern-btn.primary {
    background: rgba(0,80,0,0.5);
    border-color: rgba(0,161,0,0.6);
    color: #90EE90;
}
.zauber-steigern-btn.primary:hover { background: rgba(0,100,0,0.6); color: #98FB98; }
.zauber-steigern-btn.disabled { opacity: 0.4; cursor: not-allowed; }

.zauber-einstellungen {
    background: rgba(40,30,20,0.5);
    border: 1px dashed #8a7a3a;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    color: #c1ab49;
}
.zauber-einstellungen h3 { margin: 0 0 12px 0; font-size: 1em; color: #fef1b9; }
.zauber-einstellung-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.zauber-einstellung-row label { color: #c1ab49; }
.zauber-einstellung-actions { display: flex; align-items: center; gap: 10px; }

.zauber-sonderfertigkeiten {
    background: rgba(40,30,20,0.5);
    border: 1px solid #8a7a3a;
    border-radius: 6px;
    padding: 15px;
    color: #c1ab49;
}
.zauber-sonderfertigkeiten h3 { margin: 0 0 10px 0; font-size: 1em; color: #fef1b9; }
.zauber-sf-list { text-align: center; }
.zauber-sf-list a { color: #d42a04; }

@media (max-width: 700px) { .zauber-grid { grid-template-columns: 1fr; } }

/* Kampfbericht Anpassungen für Bombast-Skin */
.kampfbericht_zusammenfassung {
    background: rgba(255, 244, 223, 0.1);
    border: 1px solid rgba(255, 244, 223, 0.25);
}

.kampfbericht_immer_anzeigen span {
    color: inherit;
    opacity: 0.7;
}

/* FLUCHT/UNENTSCHIEDEN Badge heller */
.kampfergebnis:not(.held):not(.gegner) {
    background: rgba(193, 171, 73, 0.15);
    border-color: #c1ab49;
    color: #c1ab49;
}

/* Waffen/Rüstungs-Detail-Panel (Bombast Theme) */
.waffe-detail-panel,
.waffe-detail-panel .panel-header,
.waffe-detail-panel td,
.ruestung-detail-panel,
.ruestung-detail-panel .panel-header,
.ruestung-detail-panel .panel-status,
.ruestung-detail-panel td {
    text-shadow: none;
    color: #1a1a1a;
}

.waffe-detail-panel th,
.ruestung-detail-panel th {
    background: #8a7a3a;
}

.waffe-detail-panel .panel-header,
.ruestung-detail-panel .panel-header {
    color: #402C13;
}

/* ============================================================
 * Ort-Übersicht — Desktop-Adoption des Mobil-Looks (>770px).
 * Flache Token-Köpfe + Row-Liste + inline gedämpfte Meta.
 * Token-basiert → IDENTISCH in css/antamar/antamarv41.css halten.
 * Mobil (<=770px, antamar_mobile_patterns.css) bleibt unberührt.
 * ============================================================ */
@media (min-width: 771px) {

    /* Köpfe: flache Token-Leiste statt Verlauf/Beige. overflow:hidden + Teaser-Kürzung
       wie mobil (Chat-Köpfe tragen einen Live-#*_tl-Span). */
    #accordion_container_ortsuebersicht .accordion_toggle {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        margin: var(--space-xs) 0 0;
        padding: var(--space-xs) var(--space-md); /* desktop-kompakt ~32px, NICHT 44px */
        background: var(--mobile-surface-2);
        border: 1px solid var(--mobile-border-soft);
        border-radius: 4px;
        color: var(--mobile-text);
        font-size: 1.05em;
        line-height: 1.5;
        overflow: hidden;
        cursor: pointer;
        transition: background var(--motion-fast) var(--motion-ease);
    }
    #accordion_container_ortsuebersicht .accordion_toggle:hover,
    #accordion_container_ortsuebersicht .accordion_toggle.accordion_toggle_active {
        background: var(--mobile-surface-2-hover);
        color: var(--mobile-text);
    }
    /* offener Kopf schließt bündig an die Inhalts-Box an (untere Ecken eckig) */
    #accordion_container_ortsuebersicht .accordion_toggle.accordion_toggle_active {
        border-radius: 4px 4px 0 0;
    }
    /* Chevron + Auf/Zu-Rotation (accordion-v10.js setzt accordion_toggle_active — kein JS-Change) */
    #accordion_container_ortsuebersicht .accordion_toggle::after {
        content: "\203A";
        margin-left: auto;
        padding-left: var(--space-sm);
        opacity: 0.6;
        transition: transform var(--motion-fast) var(--motion-ease);
    }
    #accordion_container_ortsuebersicht .accordion_toggle.accordion_toggle_active::after {
        transform: rotate(90deg);
    }
    #accordion_container_ortsuebersicht .accordion_toggle > span[id$="_tl"] {
        flex: 1;
        min-width: 0;
        /* Desktop in table-layout:auto (Mantis #1229): die Ellipsis (white-space:nowrap)
           klippt hier NICHT — der nowrap-Teaser zieht stattdessen die Spielspalte auf.
           Darum umbrechen statt kuerzen; zusammen mit der harten Laengenbegrenzung in
           aochat.modules.js (headlineModule, MAX_TEASER) bleibt der Kopf kompakt.
           Mobil greift weiter die Ellipsis-Variante in antamar_mobile_patterns.css. */
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Inhalt als Box unter dem Kopf: dezenter Surface-Hintergrund + Rahmen (per
       inset box-shadow, damit die Accordion-Höhenmessung nicht um die Border-Breite
       klippt) + untere Rundung. Bombast margin:0 20px zurücknehmen.
       overflow/max-height/opacity NICHT anfassen — Animation.
       background WEICHT BEWUSST vom antamar-Schwester-File ab: dunkleres --mobile-surface
       (fast deckend) statt --mobile-surface-2, damit die goldene Bombast-Schrift lesbar
       bleibt. Beim Abgleich NICHT auf --mobile-surface-2 zurücksetzen. Kopf bleibt -surface-2. */
    #accordion_container_ortsuebersicht .accordion_content {
        margin: 0;
        padding: var(--space-xs) 0 var(--space-sm);
        box-sizing: border-box;
        background: var(--mobile-surface);
        border-radius: 0 0 4px 4px;
        box-shadow:
            inset 1px 0 0 var(--mobile-border-soft),
            inset -1px 0 0 var(--mobile-border-soft),
            inset 0 -1px 0 var(--mobile-border-soft);
    }

    /* Linklisten → Row-Liste (greift via .ort_uebersicht auch auf die "Wohin"-Hauptliste) */
    .ort_uebersicht ul.ort_gebaeude {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .ort_uebersicht ul.ort_hauptgebaeude {
        margin-left: 0;
    }
    .ort_uebersicht ul.ort_gebaeude > li {
        margin: 0;
        padding: 0;
        border-bottom: 1px dotted var(--mobile-border-soft);
        background-position: var(--space-sm) center;
        background-size: 20px;
        line-height: 1.4;
    }
    .ort_uebersicht ul.ort_gebaeude > li:last-child {
        border-bottom: none;
    }

    /* Zeile = einzeiliger Link: Titel in Akzent (Fettschrift erbt von GebaeudeIcons),
       Hover-Highlight (Desktop hat Hover). */
    .ort_uebersicht ul.ort_gebaeude > li > a {
        display: flex;
        align-items: center;
        min-height: 28px;
        padding: 3px var(--space-sm) 3px calc(20px + var(--space-sm) * 2);
        color: var(--mobile-accent);
        text-decoration: none;
        transition: background var(--motion-fast) var(--motion-ease);
    }
    .ort_uebersicht ul.ort_gebaeude > li > a:hover {
        background: var(--mobile-border-very-soft); /* dezenter Tint statt voller Surface-Fläche */
    }

    /* Klammer-Typ / Tavernen-Ambiente inline & gedämpft (statt rote Textwand) */
    .ort_uebersicht ul.ort_gebaeude .ort-meta,
    .ort_uebersicht ul.ort_gebaeude > li > em {
        margin-left: var(--space-xs);
        color: var(--mobile-text-soft);
        font-weight: 400;
        font-size: 0.9em;
        font-style: normal;
    }

    /* Nicht verlinkte Einträge ("… während der Arbeit nicht nutzbar") gedämpft */
    .ort_uebersicht ul.ort_gebaeude > li:not(:has(a)) {
        padding: 3px var(--space-sm) 3px calc(20px + var(--space-sm) * 2);
        color: var(--mobile-text-soft);
        font-style: italic;
    }
}