/**
 * Classic-CSS-Datei
 * Hier sollten eigentlich nur die CSS-Stile definiert sein, die den
 * Standard-Stil variieren. Also hauptsächlich Farben und Bilder.
 *
 * @version $Id$
 * @package classic
 */
html {
  margin: 0;
  padding: 0;
  background-color: #FFD98F;
  overflow-y: scroll; /* Scrollbalken immer anzeigen lassen */
}
body {
  font-size: 0.95em;
  margin: 0;
  padding: 0;
}
body, td, p {
  color: #402C13;
  font-family: "Giovanni Book", Georgia, "Times New Roman", Times, serif;
  line-height: 1.333em;
}
p { margin-bottom: 1em; }
img { border: 0; vertical-align: middle; }
a { cursor: pointer; color: #AD4234; text-decoration: none; }
a:hover { color: #402C13; text-decoration: underline overline; }
h3 {
  margin: 15px 0 5px 0;
  padding: 0;
  text-align: center;
  font-size: 1.4em;
  color: #402C13;
  font-variant: small-caps;
}
.noscript-notice {
  line-height: normal;
  margin: 0;
  padding: 0 0;
  text-align: center;
  width: 100%;
}

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

/* ------------------------------------------------------------------------------- */
div#wrapper {
  margin: 0;
  padding: 0;
  background: url(../../bilder/bg.gif) no-repeat bottom right;
  background-attachment: scroll;
}
div#content { margin: 0 3px 0 3px; }
table.main { width: 100%; }
.game { vertical-align: top; }
.game h2 { margin: 5px 0 10px 0; text-align: center; font-size: 1.6em; }
.game h3 { margin: 0; padding: 0; text-align: center; font-size: 1em; color: #402C13; font-variant: small-caps; }
.game h3:first-letter { font-size:1em; color:#AD4234; }
.game h4 { margin:0; font-size: 0.95em; }
.game th { background:#D3913C; border:1px solid #402C13; padding: 5px; }
.game td { background: #FFF4DF; border: 1px solid #402C13; padding: 5px; }

/* -- Header ---------------------------------------------------------------- */

#header { height: 151px; width: 100%; margin: auto; table-layout: fixed; border-spacing: 0; empty-cells: show; border-collapse: collapse; }

/* die äußeren Grenzen (r+l) des Headers */

#header_border_left {
  width: 16px;
  margin: 0;
  background: url(../../bilder/header_border_left.png) no-repeat 0 0;
}
#header_border_right {
  width: 16px;
  margin: 0;
  background: url(../../bilder/head_right.gif) no-repeat 0 0;
}

#header_left {
  text-align: center;
  padding: 14px 0;
  vertical-align: middle;
  width: 30%;
  background: url(../../bilder/head_float.png) repeat-x 0 0;
}
#header_left div.heroPics { margin: auto; width: 300px; }
#header_left img { float:left; max-height:100px; max-width:120px; margin:0 0 0 20px; }

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

#header_logo h1 { visibility: hidden; }

/* der bewegliche Teil auf der RECHTEN Seite */

#header_float {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent url(../../bilder/head_float.png) repeat-x 0 0;
}

/* der bewegliche Teil auf der LINKEN Seite */

#header_float_left {
  padding: 0;
  margin: 0;
  border: 0;
  background: url(../../bilder/head_float.png) repeat-x 0 0;
}

/* Heldenangaben im header_right */
#header_right {
  padding: 0;
  margin: 0;
  width: 30%;
  background: transparent url(../../bilder/head_float.png) repeat-x 0 0;
}

#header_right div.kalender { float: left; font-weight: bold; color: #402c13; text-align: center; min-height: 100px; width: 150px; }
#header_right div.kalender img { border: 2px solid grey; }
#header_right div.kalender div.datum { font-size: 90%; white-space: nowrap; padding-top: 2px; }
#header_right div.heroShortInfo { margin-left: 150px; text-align: center; color: #402b22; }
#header_right div.heroShortInfo h2 { font-size: 1.2em; font-weight: bold; margin:auto; max-width: 300px; padding:5px 0 0 0; }
#header_right div.heroShortInfo span.held_ort { font-style: italic; }



/* --- Menü auf der linken Seite -------------------------------------------- */

td#menuBox { vertical-align: top; margin: 0; padding: 0; font-size: 1.0em; width:195px; }
div#menu { width: 195px; height: 550px; padding: 10px 0 0 0; background: transparent url(../../bilder/menu.png) no-repeat 0 0; }
div#menu img { vertical-align: baseline; }
div#menu a{ display: block; color: #402C13; font-weight: bolder; font-variant: small-caps; line-height:1.4em; }
div#menu a:first-letter { font-size: 1.5em; color: #AD4234; }

#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 ul { width: 160px; margin: 10px 0 10px 25px; padding: 0; list-style-type: none; }
div#menu li.ungeleseneNachrichten { background: url(../../bilder/scroll.png) right no-repeat; margin-right: 20px; }

/* die kleinen Dolche zum Ausblenden vom Menü */
div#menuShort { position: fixed; top: 165px; left: 0; width: 10px; }
div#menuShort div.menu_show { background: #FFD98F url(../../bilder/menu_hint.png) repeat-y 50% 0; width: 10px; height: 75px; }
div#menu_pin_buttons { position: absolute; top: 165px; left: 174px; z-index: 100; max-width: 15px; }



/* --- Heldeninfo auf der rechten Seite ---------------------------------------- */
td#heldeninfoBox { vertical-align: top; padding: 0; margin: 0; font-size: 0.83em; width: 235px; }

div#heldeninfo {
  width: 230px;
  height: 750px;
  padding-top: 5px;
  background: transparent url(../../bilder/heldeninfo.png) no-repeat 0 0;
}
div#heldeninfo ul{
  margin:0 20px 0 20px;
  padding: 0 0 2px 0;
  border-bottom: 1px solid #402C13;
  list-style-type: none;
  line-height: 0.95em;
}

div#heldeninfo h2 { font-size: 1.2em; margin: 10px 0 5px 0; }
div#heldeninfo h2 a{ display: block; text-align: center; padding: 0; margin: 0; color: #402C13; font-weight: bolder; font-variant: small-caps; line-height: 130%; }
div#heldeninfo h2 a:first-letter { font-size:1.5em; color:#AD4234; margin: 0; }

div#heldeninfo table { width: 190px; border-spacing:0; }
div#heldeninfo table.heldeninfo_eigenschaften { border: 0; padding: 0; margin: 0; border-collapse: collapse; }
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%; }

/* die kleinen Dolche zum Ausblenden der Heldeninfo */
div#heldeninfoShort { position: fixed; top: 165px; right: 0; width: 10px; }
div#heldeninfoShort div.heldeninfo_hint { background: #FFD98F url(../../bilder/heldeninfo_hint.png) repeat-y 50% 0; width: 10px; height: 160px; }
div#heldeninfo_pin_buttons { position: absolute; top: 165px; right: 220px; z-index: 101; max-width: 15px; }

/*Punkte, Gottheit, Geld*/
div#heldeninfo div.pgg {
  margin: 0 20px 3px 20px;
  padding: 0 0 2px 0;
  border-bottom: 1px solid #402C13;
  font-size: 1.0em;
  white-space: nowrap;
  clear: right;
}

div#heldeninfo div.heldeninfo_inPGG { clear: both; width: 190px; }
div#heldeninfo div.heldeninfo_inPGG strong { float: right; text-align: right; }
div#heldeninfo div.withoutHeight { height: 0; } /* Klasse ist für den IE nötig */
div#heldeninfo span.EP_gesamt { float: left; width: 120px; }
div#heldeninfo span.groschen, div#heldeninfo span.thaler, div#heldeninfo span.gulden, div#heldeninfo span.EP_guthaben, div#heldeninfo span.stufe { float: left; width: 70px; }
div#heldeninfo span.gott { float: left; width: 60px; }
div#heldeninfo div.geld { margin: 3px 20px 3px 20px; padding:0 0 2px 0; border-bottom: 1px solid #402C13; }
div#heldeninfo div.heldeninfo_rs_waffen { padding:0 0 2px 0; width: 200px; margin: 3px 20px 3px 20px; }

/* Heldenbild */
div#heldeninfo div.heldeninfo_rs_waffen div#heldeninfo_rs { float: none; }
div#heldeninfo div.heldeninfo_rs_waffen div#heldeninfo_rs div.trefferzonen { height: 255px; } /* hier wird das Heldenbild angezeigt, siehe antamar_png.css */
div#heldeninfo div.heldeninfo_rs_waffen div#heldeninfo_rs span#wundentext{ font-size: 0.8em; width: 90px; }

/* Waffen */
div#heldeninfo div.heldeninfo_rs_waffen div.heldeninfo_waffen { float: right; text-align: right; width: 90px; }
div#heldeninfo div.heldeninfo_rs_waffen div.heldeninfo_waffen div.heldeninfo_ausgeruestete_waffen { border-left: 1px solid #402C13; }

/* Teleporterbox */
div#held_teleporter_box { clear: both; text-align: right; width: 225px; font-size: 0.9em; }
div#held_teleporter_box form.teleporterForm input.teleport_input { width: 150px; color: #4D3409; font-size: 0.9em; }

/* ----------------------------------------------------------------------------- */
td.game_border_left { width:1px; }
td.game_border_right { width:2px; }

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

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

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

.button {
  font-variant:small-caps;
  border: 1px solid #402C13;
  background-color: #FEEFD2;
  color: #000;
  margin: 2px;
  padding: 2px;
  cursor: pointer;
}

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

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

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

td#footer_left {
  background-repeat: no-repeat;
  background-position: top left;
  width: 432px;
}

td#footer_float {
  background-repeat: repeat-x;
  background-position: top left;
  width: auto;
  height: 335px;
}

td#footer_right {
  background-repeat: no-repeat;
  background-position: top right;
  width: 448px;
}

#footer div#copy {
  height:85px;
  letter-spacing:0;
  margin:15px auto;
  padding:5px 10px 10px;
  width:610px;
  background: transparent url(../../bilder/foot.png) no-repeat 100% 0;
}

#footer div#copy p {
  font-size:9px;
  line-height:1.1em;
  margin:3px;
  text-align:center;
}

#footer div.zentriert {
  text-align:center;
  font-size:70%;
}
/* ------------------------------------------------------------- */

/* -- ZB-Ausgabe ------------------------------------------------------------ */
.tag {
  border:1px solid #402C13;
  padding:8px 8px 3px 8px;
  margin:6px;
  text-align: left;
}

.tag_ooc {
  border:1px solid #402C13;
  padding:3px;
  margin:0;
  margin-left:-1px;
  margin-bottom: 6px;
  background-color: #FFF4DF;
}

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

.tag_ooc .verloren{
  color: #DC0000;
}



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

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

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

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

.dungeon p img {
  width:100%;
}

.dungeon img {
  width:100%;
}

.dungeon .kampf img {
  margin:0;
}

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

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 #402C13;
  margin: 0px;
  background-color: #402C13;
  color: #fff4df;
}

#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: url(../../bilder/kampf/verwundet.png) no-repeat;
}

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

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

div.trefferzonen .wunde {
  width: 5px;
  height: 5px;
  margin: 0px;
  position: absolute;
  float: left;
  background: url(../../bilder/trefferzonen/wunde.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;
}

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

/* -- 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 #402C13;
  color: #402C13;
}

/* -- Jobangebote im Rathaus ------------------------------------------------ */
.job { margin: 5px; width: 700px; }
.job  td{ background-color: #D6B067; }
#job_ende { max-width: 90%; background-color: #F6C46F; }


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

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

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

.ortsbeschreibung {
  width: 98%;
  overflow: auto;
  margin: 3px auto 3px auto;
  background: #FFF4DF;
  border: 1px solid #402C13;
  padding: 5px;
}
.ortsbeschreibung img{
  width: 30%;
  float: right;
}

/* -- Accordion ------------------------------------------------------------- */
.accordion_toggle {
  text-align: left;
  display: block;
  overflow: hidden;
  height: 30px;
  width: 98%;
  background-color: #FFF4DF;
  line-height: 30px;
  color: #402C13;
  cursor: pointer;
  margin: 0;
  border-bottom: 1px solid #402C13;
  padding-left: 10px;
}

.accordion_toggle2 {
  position: relative;
  text-align: left;
  display: block;
  overflow: hidden;
  height: 30px;
  width: 98%;
  background-color: #FFF4DF;
  line-height: 30px;
  color: #402C13;
  cursor: pointer;
  margin: 0;
  border-bottom: 1px solid #402C13;
  padding-left: 10px;
}

.leave {
  display: block;
  overflow: hidden;
  height: 30px;
  width: 98%;
  background-color: #FFF4DF;
  line-height: 30px;
  color: #402C13;
  cursor: pointer;
  margin: 0;
  border-bottom: 1px solid #402C13;
  padding-left: 10px;
}

.accordion_toggle_active {
  background-color: #FFEDCC;
  color: #402C13;
  border-bottom: 1px solid #FFF4DF;
}

.accordion_content {
  color: #402C13;
  overflow: hidden;
  padding-left: 10px;
  text-align: left;
  max-height: 0;
  opacity: 0;
}

.accordion_content2 {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

/* -- Chat Toggle Button im Gruppen-Accordion ------------------------------- */
.chat-toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 30px;
  color: #402C13;
  background: #FFF4DF;
  border: none;
  border-left: 1px solid rgba(64, 44, 19, 0.3);
}


.chat-toggle-btn:hover {
  background: #FFEDCC;
}

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

#chat_gruppe_wrapper {
  overflow: hidden;
}

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

/* -- Sortable Tables ------------------------------------------------------- */
table.sortable tr.odd td {
  background-color: #FFEDCC;
}
table.sortable tr.even td {
  background-color: #FFF4DF;
}

/* -- Kampfbericht ---------------------------------------------------------- */
.kampf td{
  text-align:center;
  padding:1px;
}

.held {
  color: #00A100;
}

.gegner {
  color: #DC0000;
}

.kampf .name_single_held {
}

.kampf .name_single_gegner {
}

.kampf .name_multi_held {
  color: #00A100;
}

.kampf .name_multi_gegner {
  color: #DC0000;
}

.kampf .beschreibung {
  color: #333333;
}

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

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

/* -- AOQML --------------------------------------------------------------------------*/

.eoq {
  text-align:center;
}

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

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

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

.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;
}

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

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

.aoqml p img {
  width: auto;
}

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

/* -- held_wechsel -------------------------------------------------------------*/
.white_box {
  border: 1px solid black;
  background-color: #FFFFFF;
  padding: 20px;
  text-align: center;
}

.bold {
  font-weight: bold;
}

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

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

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

/* -- routenplaner -------------------------------------------------------------*/

.outputRoutenplaner {
  text-align: center;
  border: none;
  margin: 0;
  table-layout: fixed;
  font-size: smaller;
  width: 95%;
  overflow: auto;
}

/* -- regiezna -----------------------------------------------------------------*/
.egiezna {
  text-align: center;
  border: 1px double darkgray;
  width: 93.25%;
}

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

.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;
}

.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: #402C13;
}

.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;
}

/**
 * Hauptseite
 */
div#gameContent { text-align: center; }
#ajax_loader { float: left; }
div.spielSeite { text-align: left; }

/**
 * weitere Helden im Ort/Taverne/Orden usw.
 */
div.weitere_helden { text-align: center; padding-bottom: 10px; }
div.weitere_helden div.weitere_helden_output { width: 98%; }
div.weitere_helden form { margin: 10px 0; }

/**
 * Kampf
 */
div.kampfseite div#meldung { margin: 10px; }
div.kampfmanoever table td { text-align: left; }
div.kampfmanoever select.input { width: 250px; }

/**
 * Fertigkeiten/Talente
 */
div.talenteBox table.sortable { width: 75%; text-align: center; }

/**
 * Orden
 */
div.orden table td { text-align: left; }
div.orden div#ausspionierenBox { margin: 40px; }

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

/**
 * im Rathaus
 */
div.rathaus, div.illegaleAufgaben { padding: 10px; max-width: 800px; text-align: center; margin: auto; }
div.rathaus table, div.illegaleAufgaben table { text-align: left; }
div.illegaleAufgaben table th { text-align: center; }
div.illegaleAufgaben td.zurueck { text-align: center; }
div.illegaleAufgaben td.inhalt { padding-left: 10px; }
div.illegaleAufgaben img.float { max-width: 450px; width: 45%; float: right; margin-left: 10px; }

/**
 * Kampf- und Lernschule
 */
div.kampfschule, div.lernschule { padding: 10px; }
div.kampfschule table td { text-align: left; }
div.lernschule table td { text-align: left; }

/**
 * Markstand
 */
table.markstand { margin: 0; border: 0; border-spacing: 0; border-collapse: collapse; width: 100%; height: 100%; }

/**
 * Bank
 */
table.bank { text-align: left; }
table.bank td.bank_beschreibung div.bank_bild { width: 30%; float: left; }
table.bank td.bank_beschreibung div.bank_bild img { width: 93%; }
table.bank td.bank_beschreibung div.beschreibung_txt { line-height: 150%; }

/* Bank-Sektionen */
.bank-section {
    background: rgba(64, 44, 19, 0.1);
    border: 1px solid rgba(64, 44, 19, 0.3);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.bank-section h3 {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(64, 44, 19, 0.3);
    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;
    color: #666;
}

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

.bank-overview .bank-info {
    margin: 10px 0 0 0;
    font-size: 0.9em;
    color: #666;
}

.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(64, 44, 19, 0.15);
}

.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(64, 44, 19, 0.3);
    font-weight: normal;
    color: #666;
}

.bank-transfers td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(64, 44, 19, 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;
}

/**
 * auf Reisen
 */
span.probe { font-style: italic; cursor:help; border-bottom: 1px dotted #402C13; }
span.probe_ohne_tip { font-style: italic; border-bottom: 1px dotted #402C13; }
div.tag span.zb_debug_output { color: blue; }
div.tag span.zb_debug_output span { padding-right: 20px; }
div.tag q  { font-style: italic; color: #505050; } /* vgl. .aoqml q */
div.tag img.zb_pic { float: right; }
div.tag div.tag_clear { clear: right; }

/**
 * Nachrichten
 */
div.nachrichten table#nachrichten, div.nachrichten table#rp_liste { width: 98%; margin: 3px auto 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 - Classic Theme */
.nachrichten-tabs .tab {
    border: 1px solid #402C13;
    background-color: #FEEFD2;
    color: #000;
}
.nachrichten-tabs .tab:hover {
    background-color: #f5e4be;
}
.nachrichten-tabs .tab.active {
    background-color: #e8d9b0;
    box-shadow: inset 0 -3px 0 0 #402C13;
}

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

/**
 * Taverne
 */
div.tische ul { list-style: disc; line-height: 100%; }

/**
 * Gepäck
 */
div.gepaeck_inhalt_box { background-color: #FFF4DF; border: 1px solid black; }
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 { margin: 0 auto; width: 780px; }
div.RssTeaser h1 { text-align: center; }
div.RssTeaser { margin-bottom: 50px; }

div.privathaus_bild img{
  margin: 0;
  max-width: 90%;
}
/* ============================================
 * Gespann-Styles (Mehrspänner)
 * ============================================ */
div.begleiter .gespann_box { background:#FFF4DF; border:1px solid #D3913C; border-radius:4px; padding:10px; margin:5px 0; }
div.begleiter .gespann_header { margin-bottom:8px; padding-bottom:5px; border-bottom:1px solid #D3913C; }
div.begleiter .gespann_header strong { font-size:1.05em; color:#402C13; }
div.begleiter .gespann_info { color:#666; font-size:0.9em; margin-left:8px; }
div.begleiter .gespann_warnung { color:#AD4234; 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 #D3913C; border-radius:3px; display:flex; align-items:center; gap:10px; }
div.begleiter .gespann_leittier { background:#e8f4e8 !important; border-color:#8cb88c !important; }
div.begleiter .gespann_liste .tier_name { font-weight:bold; flex:1; color:#402C13; }
div.begleiter .gespann_liste .tier_info { color:#666; font-size:0.85em; }
div.begleiter .gespann_liste .tier_zugkraft { color:#AD4234; font-size:0.85em; min-width:100px; text-align:right; }
div.begleiter .gespann_summe { padding-top:8px; border-top:1px solid #D3913C; font-size:0.95em; }
div.begleiter .gespann_anspannen { margin-top:10px; padding-top:10px; border-top:1px dashed #D3913C; }
div.begleiter .gespann_anspannen select { padding:4px 8px; margin-right:8px; min-width:200px; border:1px solid #D3913C; }
div.begleiter .gespann_anspannen button { padding:4px 12px; cursor:pointer; background:#D3913C; color:#402C13; border:1px solid #402C13; border-radius:3px; }
div.begleiter .gespann_anspannen button:hover { background:#c07828; }
div.begleiter .btn_abspannen { padding:2px 8px; font-size:0.8em; cursor:pointer; background:#FFF4DF; border:1px solid #D3913C; border-radius:3px; color:#402C13; }
div.begleiter .btn_abspannen:hover { background:#fee; border-color:#AD4234; }
div.begleiter .angespannt_info { background:#fff8e8; border:1px solid #D3913C; 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; border:1px solid #D3913C; }
div.begleiter .anspannen_option button { padding:4px 12px; cursor:pointer; background:#D3913C; color:#402C13; border:1px solid #402C13; border-radius:3px; }
div.begleiter .anspannen_option button:hover { background:#c07828; }

/**
 * Fertigkeiten-UI (Hell/Braun Theme - Classic)
 */
.fertigkeiten-ep-info {
    background: rgba(64,44,19,0.1);
    border: 1px solid rgba(64,44,19,0.3);
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.fertigkeiten-ep-info .ep-value { font-weight: bold; font-size: 1.1em; }
.fertigkeiten-ep-info .ep-label { color: rgba(64,44,19,0.7); }

.fertigkeiten-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(64,44,19,0.3);
    padding-bottom: 0;
}
.fertigkeiten-tab {
    padding: 8px 14px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    background: rgba(64,44,19,0.05);
    border: 1px solid rgba(64,44,19,0.2);
    border-bottom: none;
    margin-bottom: -2px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
.fertigkeiten-tab:hover { background: rgba(64,44,19,0.15); }
.fertigkeiten-tab.active {
    background: rgba(64,44,19,0.2);
    font-weight: bold;
    border-color: rgba(64,44,19,0.3);
    border-bottom: 2px solid transparent;
    position: relative;
}
.fertigkeiten-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #FFF4DF;
}

.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 rgba(64,44,19,0.3);
    background: rgba(64,44,19,0.05);
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}
.fertigkeiten-filter-btn:hover { background: rgba(64,44,19,0.15); }
.fertigkeiten-filter-btn.active { background: rgba(64,44,19,0.25); font-weight: bold; }
.fertigkeiten-filter-btn .count {
    background: rgba(64,44,19,0.2);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.85em;
    margin-left: 4px;
}

.fertigkeiten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.fertigkeit-card {
    background: rgba(64,44,19,0.08);
    border: 1px solid rgba(64,44,19,0.25);
    border-radius: 6px;
    padding: 12px;
    text-align: left;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.fertigkeit-card:hover {
    box-shadow: 0 2px 8px rgba(64,44,19,0.15);
    border-color: rgba(64,44,19,0.4);
}
.fertigkeit-card.nicht-steigerbar { opacity: 0.7; }
.fertigkeit-card.maximum-erreicht {
    background: rgba(0,161,0,0.08);
    border-color: rgba(0,161,0,0.3);
}

.fertigkeit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.fertigkeit-name { font-weight: bold; font-size: 1.05em; }
.fertigkeit-name .tip { cursor: help; border-bottom: 1px dotted; }
.fertigkeit-attribute {
    color: rgba(64,44,19,0.6);
    font-size: 0.9em;
    white-space: nowrap;
}

.fertigkeit-progress-container { margin: 10px 0; }
.fertigkeit-progress-bar {
    height: 20px;
    background: rgba(64,44,19,0.15);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.fertigkeit-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(64,44,19,0.4), rgba(64,44,19,0.6));
    border-radius: 10px;
    transition: width 0.3s ease;
}
.fertigkeit-progress-fill.maximum {
    background: linear-gradient(90deg, rgba(0,161,0,0.5), rgba(0,161,0,0.7));
}
.fertigkeit-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85em;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255,255,255,0.8);
}

.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: rgba(64,44,19,0.7); }
.fertigkeit-actions { display: flex; gap: 6px; }
.fertigkeit-steigern-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid rgba(64,44,19,0.4);
    background: rgba(64,44,19,0.15);
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}
.fertigkeit-steigern-btn:hover {
    background: rgba(64,44,19,0.3);
    border-color: rgba(64,44,19,0.5);
}
.fertigkeit-steigern-btn:disabled,
.fertigkeit-steigern-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.fertigkeit-steigern-btn.primary {
    background: rgba(0,100,0,0.2);
    border-color: rgba(0,100,0,0.4);
}
.fertigkeit-steigern-btn.primary:hover { background: rgba(0,100,0,0.35); }

.fertigkeit-voraussetzungen {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(64,44,19,0.2);
    font-size: 0.85em;
}
.fertigkeit-voraussetzungen summary { cursor: pointer; color: rgba(64,44,19,0.6); }
.fertigkeit-voraussetzungen-list { margin-top: 5px; padding-left: 15px; }

.fertigkeiten-aktivieren {
    background: rgba(64,44,19,0.05);
    border: 1px dashed rgba(64,44,19,0.3);
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px;
}
.fertigkeiten-aktivieren h3 { margin: 0 0 10px 0; font-size: 1em; }
.fertigkeiten-aktivieren select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(64,44,19,0.3);
    background: #fff;
    min-width: 200px;
}

.fertigkeit-status {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}
.fertigkeit-status.blockiert { background: rgba(255,0,0,0.15); color: #c00; }
.fertigkeit-status.ep-fehlen { background: rgba(255,165,0,0.2); color: #b86e00; }
.fertigkeit-status.maximum { background: rgba(0,161,0,0.15); color: #008000; }

/* Fertigkeiten Tipp-Banner */
.fertigkeiten-tipp-banner {
    background: rgba(211,145,60,0.15);
    border: 1px solid rgba(211,145,60,0.4);
    border-left: 4px solid #D3913C;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}
.fertigkeiten-tipp-banner img { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.fertigkeiten-tipp-banner .tipp-content { flex: 1; line-height: 1.5; }
.fertigkeiten-tipp-banner h2 { margin: 0 0 8px 0; font-size: 1.1em; color: #402C13; }
.fertigkeiten-tipp-banner p { margin: 0 0 6px 0; font-size: 0.95em; }
.fertigkeiten-tipp-banner p:last-child { margin-bottom: 0; }
.fertigkeiten-tipp-banner b { color: #AD4234; }

@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 (Classic Theme)
 */
.zauberBox { padding: 10px; }

.zauber-ep-info {
    background: rgba(64,44,19,0.08);
    border: 1px solid rgba(64,44,19,0.3);
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: inline-block;
    color: #402C13;
}
.zauber-ep-info .ep-label { color: rgba(64,44,19,0.7); }
.zauber-ep-info .ep-value { font-weight: bold; font-size: 1.1em; color: #402C13; }

.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 rgba(64,44,19,0.3);
    background: rgba(64,44,19,0.05);
    color: #402C13;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}
.zauber-filter-btn:hover { background: rgba(64,44,19,0.15); }
.zauber-filter-btn.active { background: rgba(64,44,19,0.2); font-weight: bold; }
.zauber-filter-btn .count {
    background: rgba(64,44,19,0.15);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.85em;
    margin-left: 4px;
}

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

.zauber-card {
    background: #fff;
    border: 1px solid rgba(64,44,19,0.25);
    border-radius: 6px;
    padding: 12px;
    text-align: left;
    color: #402C13;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.zauber-card:hover {
    box-shadow: 0 2px 8px rgba(64,44,19,0.15);
    border-color: rgba(64,44,19,0.4);
}
.zauber-card.im-kampf-aktiv {
    border-color: rgba(0,161,0,0.6);
    border-width: 2px;
    background: rgba(0,161,0,0.05);
}
.zauber-card.maximum-erreicht {
    background: rgba(0,161,0,0.08);
    border-color: rgba(0,161,0,0.4);
}
.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: #402C13; }
.zauber-name a {
    color: #402C13;
    text-decoration: none;
    cursor: help;
    border-bottom: 1px dotted rgba(64,44,19,0.4);
}
.zauber-name a:hover { color: #AD4234; }
.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,161,0,0.15); color: #008000; }
.zauber-status.ep-fehlen { background: rgba(255,165,0,0.2); color: #b86e00; }

.zauber-attribute { color: rgba(64,44,19,0.7); font-size: 0.9em; white-space: nowrap; }

.zauber-progress-container { margin: 10px 0; }
.zauber-progress-bar {
    height: 20px;
    background: rgba(64,44,19,0.1);
    border: 1px solid rgba(64,44,19,0.2);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.zauber-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #D3913C, #e0a050);
    border-radius: 10px;
    transition: width 0.3s ease;
}
.zauber-progress-fill.maximum {
    background: linear-gradient(90deg, #2a8a2a, #3aa03a);
}
.zauber-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85em;
    font-weight: bold;
    color: #402C13;
    text-shadow: 0 0 3px rgba(255,255,255,0.9);
}

.zauber-details {
    font-size: 0.85em;
    color: #402C13;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zauber-detail { background: rgba(64,44,19,0.08); padding: 3px 8px; border-radius: 3px; border: 1px solid rgba(64,44,19,0.15); }
.zauber-detail-label { color: rgba(64,44,19,0.7); }

.zauber-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(64,44,19,0.15);
}

.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(64,44,19,0.25);
    border-radius: 18px;
    position: relative;
    transition: background 0.3s;
}
.zauber-toggle-slider::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    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,161,0,0.7); }
.zauber-kampf-checkbox:checked + .zauber-toggle-slider::after { transform: translateX(18px); }
.zauber-toggle-text { font-size: 0.85em; color: rgba(64,44,19,0.7); }

.zauber-ep-info-card { font-size: 0.85em; color: rgba(64,44,19,0.7); }
.zauber-actions { margin-left: auto; }

.zauber-steigern-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid rgba(64,44,19,0.3);
    background: rgba(64,44,19,0.08);
    color: #402C13;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}
.zauber-steigern-btn:hover {
    background: rgba(64,44,19,0.2);
    border-color: rgba(64,44,19,0.4);
}
.zauber-steigern-btn.primary {
    background: rgba(0,100,0,0.12);
    border-color: rgba(0,100,0,0.35);
    color: #006400;
}
.zauber-steigern-btn.primary:hover { background: rgba(0,100,0,0.2); }
.zauber-steigern-btn.disabled { opacity: 0.5; cursor: not-allowed; }

.zauber-einstellungen {
    background: rgba(64,44,19,0.05);
    border: 1px dashed rgba(64,44,19,0.3);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    color: #402C13;
}
.zauber-einstellungen h3 { margin: 0 0 12px 0; font-size: 1em; color: #402C13; }
.zauber-einstellung-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.zauber-einstellung-row label { color: #402C13; }
.zauber-einstellung-actions { display: flex; align-items: center; gap: 10px; }

.zauber-sonderfertigkeiten {
    background: rgba(64,44,19,0.05);
    border: 1px solid rgba(64,44,19,0.25);
    border-radius: 6px;
    padding: 15px;
    color: #402C13;
}
.zauber-sonderfertigkeiten h3 { margin: 0 0 10px 0; font-size: 1em; color: #402C13; }
.zauber-sf-list { text-align: center; }
.zauber-sf-list a { color: #AD4234; }

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