body {
    background-color: #000000;
    color: #a4a4a4;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0em auto;
    background-image: none;
}

hr {
    clear: both;
}

.mobil_hidden {
    display: none;
}

.clear {
    clear: both;
}
#cookie_note {
    position: fixed;
    bottom: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: #2D2D2D;
    border: 1px solid #000000;
    z-index: 1000;
}
/* ----------------------------------------------------------------------------- *
 *                             Werbung                                           *
 * ----------------------------------------------------------------------------- */


@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}


#takeover_wraper {
    display: flex;
    justify-content : center;
    align-content: flex-start;
    align-items : stretch;
    flex-direction: row;
    background-image: none;
}

#takeover {
    flex: auto;
    flex-basis: 100%;
    flex-shrink: 0;
    margin: 0em auto;
    max-width: 980px;
    order: 2;
    z-index: 100;
}

#banner_sky_left {
    flex: auto;
    flex-basis: 50%;
    text-align: right;
    order: 1;
    z-index: 1;
}

#banner_sky_left_text {
    position: sticky;
    top: 50px;
    display: none;
}

#banner_sky_right {
    flex: auto;
    flex-basis: 50%;
    text-align: left;
    order: 3;
    z-index: 1;
}

#banner_sky_right_text {
    position: sticky;
    top: 50px;
    display: none;
}

#fansite_marginal_2 {
    min-width: 310px;
    top: 50px;
    min-height: 270px;
    margin: 0em auto;
    padding: 0px;
    padding-left: 1em;
    box-sizing: border-box;
    text-align: center;
}

#fansite_footer {
    margin: 0em auto;
    box-sizing: border-box;
    text-align: center;
}


.h5-sticky-ad {
    background-color: #f3f3f3;
    border: none;
    bottom: 0;
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
    min-height: 59px;
    height: auto;
    left: 0;
    padding: 5px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 900; /* set this to a value that enables the sticky ad to overlap any other elements on the page. */
}

.h5-sticky-ad-close {
    background-color: #f3f3f3;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-position: 9px;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    border: none;
    border-top-left-radius: 12px;
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
    height: 28px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: -28px;
    width: 28px;
    box-sizing: content-box;
}

.h5-sticky-ad-close::before {
    bottom: 0;
    content: "";
    left: -20px;
    position: absolute;
    right: 0;
    top: -20px;
}

.u-visible-desktop {
    display: none;
}

@media (min-width: 768px) {
    .u-hidden-desktop {
        display: none;
    }

    .u-visible-desktop {
        display: block;
    }
}


.h5-footer-ad-container {
    bottom: 0;
    display: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 970px;
    overflow: visible;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 900; /* set this to a value that enables the footer ad to overlap any other elements on the page. */
}

.h5-footer-ad-close {
    align-items: center;
    appearance: none;
    background-color: #cbcdce;
    border: 2px solid #222223;
    border-radius: 12px 12px 0 0;
    color: #222223;
    display: flex;
    height: 24px;
    justify-content: center;
    position: absolute;
    right: 0;
    top: -24px;
    width: 60px;
}

@media (min-width: 1000px) {
    .h5-footer-ad-close {
        border-radius: 0 12px 12px 0;
        height: 60px;
        width: 24px;
        right: -24px;
        top: 0
    }
}

.h5-footer-ad-close:hover {
    background-color: white;
}

.h5-footer-ad-close::after {
    content: "×";
    display: inline-block;
}

.is-shifted-bottom {
    margin-bottom: -70px;
}

.is-shifted-bottom:hover {
    margin-bottom: 0;
}

.abstand {
    margin-bottom:5px;
}

/* ----------------------------------------------------------------------------- *
 *                             Tooltip                                        *
 * ----------------------------------------------------------------------------- */

#tooltip {
    position: absolute;
    left: -9999px;
    top: 50%;
    padding: 10px;
    background: linear-gradient(to bottom, rgba(74, 56, 32, 0.96) 40%, rgba(23, 19, 16, 0.96));
/*    color: #EAE7E2;  */
    width: 320px;
    border: 2px solid #DCC3A5;
    border-radius: 13px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1000;
}

#tooltip ul {
    padding-left: 20px;
}

#tooltip .d4_mythisch {
    color: #CDA1D8;
}

#tooltip .d4_einzigartig {
    color: #D4AE89;
}

#tooltip .d4_orange {
    color: #F78320;
}

#tooltip .d4_braun {
    color: #D5A968;
}

#tooltip .d4_weiss {
    color: #DCD9D2
}

#tooltip .d4_gelb {
    color: #F8CC35;
}

#tooltip .d4_violett {
    color: #ACABFB;
}

/* ----------------------------------------------------------------------------- *
 *                             Navigation                                        *
 * ----------------------------------------------------------------------------- */

.network_wraper {
    left: 0;
    top: 0;
    width: 100%;
    height: 25px;
    margin: 0;
    padding: 0 0 3px 0;
    position: relative;
}

.network {
    left: 0;
    top: 0;
    border-top: 1px solid #1B201C;
    width: 100%;
    height: 25px;
    background-color: #2D2D2D;
    z-index: 999;
    margin: 0;
    padding: 0;
    position: relative;
}

.network span {
    display: block;
    white-space: nowrap;
    padding: 5px 10px 1px 10px;
}

.network a {
    display: block;
    white-space: nowrap;
    padding: 5px 10px 1px 10px;
}

.network a:link, .network a:visited, .network a:active {
    color: #E1E5F2;
}

.network a:hover {
    color: #ffffff;
}

.network ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.network > ul {
    float: left;
}

.network > ul > li {
    float: left;
}

.network > ul > li > ul {
    display: none;
    border: 1px solid #000000;
    width: auto;
}

.network > ul > li > ul > li, .network > ul > li > ul > li > ul > li {
    border: 1px solid #000000;
}

.network ul > li > ul > li a {
    background: #2D2D2D;
}

.network ul > li > ul > li a:hover {
    background: #333333;
}

.network ul > li > ul > li > ul > li a:hover {
    text-decoration: underline;
}

.network > ul > li:hover > ul {
    display: block;
    position: absolute;
}

.network > ul > li > ul > li {
    position: relative;
}

.network > ul > li > ul > li > ul {
    display: none;
}

.network > ul > li > ul > li:hover > ul {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

.menu_desktop {
    background-color: #333333;
    width: 100%;
    border-radius: 0.625em;
    text-align: center;
    position: relative;
}

.menu_desktop a:link, .menu_desktop a:visited, .menu_desktop a:active {
    color: #E1E5F2;
}

.menu_desktop a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.menu_desktop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 900;
}

.menu_desktop > ul > li {
    float: left;
    line-height: 1.2em;
}

.menu_desktop > ul > li > ul {
    display: none;
    border: 1px solid #000000;
}

.menu_desktop > ul > li > ul > li, .menu_desktop > ul > li > ul > li > ul > li {
    border: 1px solid #000000;
}

.menu_desktop > ul a, .menue_text {
    display: block;
    white-space: nowrap;
    padding: 0.313em 0.625em 0.313em 0.625em;
}

.menue_text {
    color: #F8CC35;
 }

.menu_desktop > ul a {
    display: block;
    white-space: nowrap;
    padding: 5px 10px 5px 10px;
}

.menu_desktop ul > li > ul > li a {
    background: #333333;
}

.menu_desktop > ul {
    float: left;
    overflow: hidden;
    padding: 0 10px 0 10px;
}

.menu_desktop > ul > li:hover > ul {
    display: block;
    position: absolute;
}

.menu_desktop > ul > li > ul > li {
    position: relative;
}

.menu_desktop > ul > li > ul > li > ul {
    display: none;
}

.menu_desktop > ul > li > ul > li:hover > ul {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

#menu_mobile {
    width: 100%;
    list-style: none;
    border: 0;
    margin: 0;
    padding: 0;
}

#menu_mobile li {
    display: block;
    overflow: hidden;
    background-color: #2D2D2D;
    border: 1px solid #000000;
    line-height: 25px;
    height: 25px;
    padding-left: 5px;
    padding-right: 5px;
}

#menu_mobile li a {
    display: block;
}

.content_navi {
    margin: 0;
    padding: 0;
    background-color: #2D2D2D;
}

.content_navi h2 {
    margin: 0;
    line-height: 1em;
}

.content_navi li {
    display: block;
    overflow: hidden;
    background-color: #2D2D2D;
    border: 1px solid #000000;
    line-height: 23px;
    height: 23px;
    margin-bottom: 0px;
    padding: 5px;
}

.content_navi li a {
    display: block;
}

.content_navi li a:link, .content_navi li a:active, .content_navi li a:visited {
    color: #79b3c2;
}

.content_navi li a:hover, .content_navi li a:active {
    color: #f9a020;
    text-decoration: none;
}

.link_block .content_navi li a:link, .link_block .content_navi li a:active, .link_block .content_navi li a:visited {
    color: #f9a020;
}

.link_block .content_navi li a:hover {
    text-decoration: underline;
}

.link_block .content_navi li a.hellrot:link, .link_block .content_navi li a.hellrot:active, .link_block .content_navi li a.hellrot:visited {
    color: #ff3500;
}

.link_block .content_navi li a.gruen:link, .link_block .content_navi li a.gruen:active, .link_block .content_navi li a.gruen:visited {
    color: #1EFF00;
}

/* ----------------------------------------------------------------------------- *
 *                             Schrift                                           *
 * ----------------------------------------------------------------------------- */

h1 {
    font-family: "Gentium Book Basic", serif;
    color: #CEE2FB;
    text-align: left;
}

h2, h3, h4 {
    font-family: "Gentium Book Basic", serif;
    color: #F8CC35;
    text-align: left;
}

a:link, a:visited, a:active {
    color: #e6c491;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #ffffff;
}

.zitat_blizzard, .zitat_blizzard p, a.zitat_blizzard:link, a.zitat_blizzard:visited, a.zitat_blizzard:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #00c0ff;
}

.zitat_blizzard strong, .zitat_blizzard b {
    color: #fff;
    font-weight: bold;
}

.zitat, blockquote, .zitat p, blockquote p {
    color: #ffa800;
}

.link_uebersicht {
    display: block;
    background-color: #2D2D2D;
    border: 1px solid #000000;
    line-height: 25px;
    height: 25px;
    text-align: center;
    clear: both;
}

.text_hellblau, a.text_hellblau:link, a.text_hellblau:visited, a.text_hellblau:active {
    color: #67BED4;
}
.text_bleich, a.text_bleich:link, a.text_bleich:visited, a.text_bleich:active {
    color: #FAEBB9;
}
.text_dunkelgrau, a.text_dunkelgrau:link, a.text_dunkelgrau:visited, a.text_dunkelgrau:active {
    color: #68665D;
}
.text_dunkelrot, a.text_dunkelrot:link, a.text_dunkelrot:visited, a.text_dunkelrot:active {
    color: #8D2C0A;
}
.text_hellbraun, a.text_hellbraun:link, a.text_hellbraun:visited, a.text_hellbraun:active {
    color: #D2A257;
}
.text_fuchsienfarbig, a.text_fuchsienfarbig:link, a.text_fuchsienfarbig:visited, a.text_fuchsienfarbig:active {
    color: #A72C69;
}
.text_gruen, a.text_gruen:link, a.text_gruen:visited, a.text_gruen:active {
    color: #A0D02D;
}
.text_goldgelb, a.text_goldgelb:link, a.text_goldgelb:visited, a.text_goldgelb:active {
    color: #DEAE2F;
}
.text_gelb, a.text_gelb:link, a.text_gelb:visited, a.text_gelb:active {
    color: #D1BE3E;
}
.text_grau, a.text_grau:link, a.text_grau:visited, a.text_grau:active {
    color: #B4C9D3;
}
.text_hellgruen, a.text_hellgruen:link, a.text_hellgruen:visited, a.text_hellgruen:active {
    color: #FDFA44;
}
.text_braun, a.text_braun:link, a.text_braun:visited, a.text_braun:active {
    color: #8A550F;
}
.text_orange, a.text_orange:link, a.text_orange:visited, a.text_orange:active {
    color: #CF6B0A;
}
.text_gelbgruen, a.text_gelbgruen:link, a.text_gelbgruen:visited, a.text_gelbgruen:active {
    color: #67661E;
}
.text_violett, a.text_violett:link, a.text_violett:visited, a.text_violett:active {
    color: #9168AB;
}
.text_rosa, a.text_rosa:link, a.text_rosa:visited, a.text_rosa:active {
    color: #ED7872;
}
.text_blau, a.text_blau:link, a.text_blau:visited, a.text_blau:active {
    color: #364FBF;
}
.text_schwarz, a.text_schwarz:link, a.text_schwarz:visited, a.text_schwarz:active {
    color: #403B35;
}
.text_rot, a.text_rot:link, a.text_rot:visited, a.text_rot:active {
    color: #C90808;
}
.text_weiss, a.text_weiss:link, a.text_weiss:visited, a.text_weiss:active {
    color: #ffffff;
}
a.text_hellblau:hover, a.text_bleich:hover, a.text_dunkelgrau:hover, a.text_dunkelrot:hover, a.text_hellbraun:hover, a.text_fuchsienfarbig:hover, a.text_gruen:hover, a.text_goldgelb:hover, a.text_gelb:hover, a.text_grau:hover, a.text_hellgruen:hover, a.text_braun:hover, a.text_orange:hover, a.text_gelbgruen:hover, a.text_violett:hover, a.text_rosa:hover, a.text_blau:hover, a.text_schwarz:hover, a.text_rot:hover, a.text_weiss {
    text-decoration: underline;
    color: #ffffff;
}
.text_kategorie, a.text_kategorie:link, a.text_kategorie:visited, a.text_kategorie:active {
    color: #ad835a;
}
a.text_kategorie:hover {
    text-decoration: underline;
    color: #ffffff;
}
.text_typ, a.text_typ:link, a.text_typ:visited, a.text_typ:active {
    color: #c7b377;
}
a.text_typ:hover {
    text-decoration: underline;
    color: #ffffff;
}
.text_kosten, a.text_kosten:link, a.text_kosten:visited, a.text_kosten:active {
    color: #a9b354;
}
a.text_kosten:hover {
    text-decoration: underline;
    color: #ffffff;
}
.text_titel, a.text_titel:link, a.text_titel:visited, a.text_titel:active, .q_normal, a.q_normal:link, a.q_normal:visited, a.q_normal:active {
    text-decoration: none;
    color: #f3e6d0;
}
a.text_titel:hover, a.q_normal:hover {
    text-decoration: underline;
    color: #ffffff;
}
.q_magisch, a.q_magisch:link, a.q_magisch:visited, a.q_magisch:active {
    text-decoration: none;
    color: #7979D4;
}
a.q_magisch:hover {
    text-decoration: underline;
    color: #ffffff;
}
.text_titel_2, a.text_titel_2:link, a.text_titel_2:visited, a.text_titel_2:active, .text_uebersicht, a.text_uebersicht:link, a.text_uebersicht:visited, a.text_uebersicht:active, .q_selten, a.q_selten:link, a.q_selten:visited, a.q_selten:active, .gelb, .d4_gelb {
    text-decoration: none;
    color: #F8CC35 !important;
}
a.text_titel_2:hover, a.text_uebersicht:hover, a.q_selten:hover, a.gelb {
    text-decoration: underline;
    color: #ffffff;
}
.link_orange, a.link_orange:link, a.link_orange:visited, a.link_orange:active, .q_laegendaer, a.q_laegendaer:link, a.q_laegendaer:visited, a.q_laegendaer:active {
    text-decoration: none;
    color: #F78320;
}
a.link_orange:hover, a.q_laegendaer:hover {
    text-decoration: underline;
    color: #ffffff;
}
.q_set, a.q_set:link, a.q_set:visited, a.q_set:active, .skill_werte, a.skill_werte:link, a.skill_werte:visited, a.skill_werte:active {
    text-decoration: none;
    color: #8BD442;
}
a.q_set:hover, a.skill_werte:hover {
    text-decoration: underline;
    color: #ffffff;
}
.edelstein_amethyst, a.edelstein_amethyst:link, a.edelstein_amethyst:visited, a.edelstein_amethyst:active {
    text-decoration: none;
    color: #b305ff;
}
a.edelstein_amethyst:hover {
    text-decoration: underline;
    color: #ffffff;
}
.edelstein_rubin, a.edelstein_rubin:link, a.edelstein_rubin:visited, a.edelstein_rubin:active {
    text-decoration: none;
    color: #f74d4d;
}
a.edelstein_rubin:hover {
    text-decoration: underline;
    color: #ffffff;
}
.edelstein_smaragd, a.edelstein_smaragd:link, a.edelstein_smaragd:visited, a.edelstein_smaragd:active {
    text-decoration: none;
    color: #51f04c;
}
a.edelstein_smaragd:hover {
    text-decoration: underline;
    color: #ffffff;
}
.edelstein_topaz, a.edelstein_topaz:link, a.edelstein_topaz:visited, a.edelstein_topaz:active {
    text-decoration: none;
    color: #eeb326;
}
a.edelstein_topaz:hover {
    text-decoration: underline;
    color: #ffffff;
}
.runenstein_alabaster, a.runenstein_alabaster:link, a.runenstein_alabaster:visited, a.runenstein_alabaster:active {
    text-decoration: none;
    color: #f7e9b7;
}
a.runenstein_alabaster:hover {
    text-decoration: underline;
    color: #ffffff;
}
.runenstein_gold, a.runenstein_gold:link, a.runenstein_gold:visited, a.runenstein_gold:active {
    text-decoration: none;
    color: #fabb14;
}
a.runenstein_gold:hover {
    text-decoration: underline;
    color: #ffffff;
}
.runenstein_indigo, a.runenstein_indigo:link, a.runenstein_indigo:visited, a.runenstein_indigo:active, .namen_npcs, a.namen_npcs:link, a.namen_npcs:visited, a.namen_npcs:active {
    text-decoration: none;
    color: #6e7ee5;
}
a.runenstein_indigo:hover, a.namen_npcs:hover {
    text-decoration: underline;
    color: #ffffff;
}
.runenstein_obsidian, a.runenstein_obsidian:link, a.runenstein_obsidian:visited, a.runenstein_obsidian:active {
    text-decoration: none;
    color: #948b91;
}
a.runenstein_obsidian:hover {
    text-decoration: underline;
    color: #ffffff;
}
.runenstein_purpur, a.runenstein_purpur:link, a.runenstein_purpur:visited, a.runenstein_purpur:active, .name, a.name:link, a.name:visited, a.name:active, .namen_monster, a.namen_monster:link, a.namen_monster:visited, a.namen_monster:active {
    text-decoration: none;
    color: #e52817;
}
a.runenstein_purpur:hover, a.name:hover, a.namen_monster:hover {
    text-decoration: underline;
    color: #ffffff;
}
/* ----------------------------------------------------------------------------- *
 *                             Schrift Diablo 4                                  *
 * ----------------------------------------------------------------------------- */

.d4_weiss, a.d4_weiss:link, a.d4_weiss:visited, a.d4_weiss:active {
    color: #DCD9D2;
}

.d4_orange, a.d4_orange:link, a.d4_orange:visited, a.d4_orange:active, .d4_laegendaer, a.d4_laegendaer:link, a.d4_laegendaer:visited, a.d4_laegendaer:active {
    color: #FA8003;
}

.d4_violett, a.d4_violett:link, a.d4_violett:visited, a.d4_violett:active {
    color: #ACABFB;
}

.d4_braun, a.d4_braun:link, a.d4_braun:visited, a.d4_braun:active {
    color: #D5A968;
}

.d4_einzigartig, a.d4_einzigartig:link, a.d4_einzigartig:visited, a.d4_einzigartig:active {
    color: #D9A879;
}

.d4_mythisch, a.d4_mythisch:link, a.d4_mythisch:visited, a.d4_mythisch:active {
    color: #CDA1D8;
}

/* ----------------------------------------------------------------------------- *
 *                             Layout                                            *
 * ----------------------------------------------------------------------------- */

.wrapper {
    max-width: 100%;
}

.content_full {
    width: 100%;
}

.content_left, .content_right {
    float: left;
    width: 100%;
    text-align: left;
}

#searchbox_mobile {
    color: #FFF;
    background-color: black;
    margin: 2em 0 2em 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    height: 1.875em;
}

#searchbox {
    color: #FFF;
    padding-left: 1.875em;
    margin-top: 0.5em;
    background: url("data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2218px%22%20height%3D%2218px%22%20viewBox%3D%220%200%2018%2018%22%20enable-background%3D%22new%200%200%2018%2018%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23777777%22%20d%3D%22M12.707%2C14.293l-1.414%2C1.414l-3.539-3.538%20%20C6.964%2C12.691%2C6.019%2C13%2C5%2C13c-2.761%2C0-5-2.238-5-5c0-2.761%2C2.239-5%2C5-5c2.762%2C0%2C5%2C2.239%2C5%2C5c0%2C1.019-0.309%2C1.964-0.832%2C2.754%20%20L12.707%2C14.293z%20M5%2C5C3.344%2C5%2C2%2C6.343%2C2%2C8c0%2C1.657%2C1.344%2C3%2C3%2C3s3-1.343%2C3-3C8%2C6.343%2C6.656%2C5%2C5%2C5z%22/%3E%0A%3C/svg%3E") no-repeat scroll 0.5em center rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    height: 1.875em;
    width: 100%;
    box-sizing: border-box;
}

.rss_icon {
    padding: 0 5px 0 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg%20height%3D%2225px%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2225px%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%20id%3D%22defs19%22/%3E%3Cg%20id%3D%22g3021%22/%3E%3Cg%20id%3D%22Layer_1_1_%22/%3E%3Cg%20id%3D%22Layer_1_1_-7%22%20transform%3D%22translate%28-819.672%2C-61.929991%29%22/%3E%3Cg%20id%3D%22g2989%22%3E%3Crect%20height%3D%22512%22%20id%3D%22rect2989%22%20rx%3D%2270%22%20ry%3D%2270%22%20style%3D%22fill%3A%23ea7819%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20transform%3D%22scale%28-1%2C-1%29%22%20width%3D%22512%22%20x%3D%22-512%22%20y%3D%22-512%22/%3E%3Cpath%20d%3D%22m%2081.05643%2C267.04958%20c%2043.7041%2C0%2084.78879%2C17.07214%20115.66407%2C48.12395%2030.93179%2C31.05179%2047.96156%2C72.41184%2047.96156%2C116.44072%20h%2067.34951%20c%200%2C-127.8857%20-103.61898%2C-231.92124%20-230.97514%2C-231.92124%20v%2067.35657%20z%20M%2081.1624%2C147.65054%20c%20155.7603%2C0%20282.48808%2C127.4197%20282.48808%2C284.04844%20H%20431%20C%20431%2C237.92528%20274.05354%2C80.30102%2081.1624%2C80.30102%20v%2067.34952%20z%20m%2093.13421%2C236.99769%20c%200%2C25.75647%20-20.89183%2C46.6483%20-46.6483%2C46.6483%20C%20101.89184%2C431.29653%2081%2C410.41176%2081%2C384.64823%20c%200%2C-25.7706%2020.88477%2C-46.64831%2046.64124%2C-46.64831%2025.75649%2C0%2046.65537%2C20.87771%2046.65537%2C46.64831%20z%22%20id%3D%22path3844%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/g%3E%3C/svg%3E") no-repeat scroll 0.5em center rgba(255, 255, 255, 0.05);
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    background-color: #2D2D2D;
}

.facebook_icon {
    padding: 0 5px 0 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg%20height%3D%2225px%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2225px%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%20id%3D%22defs12%22/%3E%3Cg%20id%3D%22g5991%22%3E%3Crect%20height%3D%22512%22%20id%3D%22rect2987%22%20rx%3D%2264%22%20ry%3D%2264%22%20style%3D%22fill%3A%233b5998%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20width%3D%22512%22%20x%3D%220%22%20y%3D%220%22/%3E%3Cpath%20d%3D%22M%20286.96783%2C455.99972%20V%20273.53753%20h%2061.244%20l%209.1699%2C-71.10266%20h%20-70.41246%20v%20-45.39493%20c%200%2C-20.58828%205.72066%2C-34.61942%2035.23496%2C-34.61942%20l%2037.6554%2C-0.0112%20V%2058.807915%20c%20-6.5097%2C-0.87381%20-28.8571%2C-2.80794%20-54.8675%2C-2.80794%20-54.28803%2C0%20-91.44995%2C33.14585%20-91.44995%2C93.998125%20v%2052.43708%20h%20-61.40181%20v%2071.10266%20h%2061.40039%20v%20182.46219%20h%2073.42707%20z%22%20id%3D%22f_1_%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/g%3E%3C/svg%3E") no-repeat scroll 0.5em center rgba(255, 255, 255, 0.05);
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    background-color: #2D2D2D;
}

.twitter_icon {
    padding: 0 14px 0 4px;
    background-size: 13px 25px;
    width: 13px;
    height: 25px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 335 276' fill='%233ba9ee'%3E%3Cpath d='m302 70a195 195 0 0 1 -299 175 142 142 0 0 0 97 -30 70 70 0 0 1 -58 -47 70 70 0 0 0 31 -2 70 70 0 0 1 -57 -66 70 70 0 0 0 28 5 70 70 0 0 1 -18 -90 195 195 0 0 0 141 72 67 67 0 0 1 116 -62 117 117 0 0 0 43 -17 65 65 0 0 1 -31 38 117 117 0 0 0 39 -11 65 65 0 0 1 -32 35'/%3E%3C/svg%3E%0A");
    background-color: #2D2D2D;
}

.youtube_icon {
    padding: 0 5px 0 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg%20height%3D%2225px%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2225px%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%20id%3D%22defs12%22/%3E%3Cg%20id%3D%22g4606%22%3E%3Crect%20height%3D%22512%22%20id%3D%22rect2987%22%20rx%3D%2264%22%20ry%3D%2264%22%20style%3D%22fill%3A%23cf2200%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20width%3D%22512%22%20x%3D%220%22%20y%3D%225.6843419e-014%22/%3E%3Cpath%20d%3D%22m%20453.92022%2C202.6575%20c%20-2.3616%2C-28.2727%20-4.2345%2C-37.45175%20-10.0656%2C-49.23545%20-7.718%2C-15.60885%20-18.8774%2C-23.83991%20-34.769%2C-25.64885%20-12.2941%2C-1.40212%20-58.5271%2C-3.37099%20-101.3212%2C-4.3228%20-74.07586%2C-1.64389%20-195.86854%2C1.52112%20-211.418527%2C5.49976%20-7.18333%2C1.84348%20-12.57816%2C4.96756%20-18.19048%2C10.54662%20-9.82766%2C9.78671%20-15.6856%2C23.81689%20-18.03697%2C43.22142%20-5.37949%2C44.31909%20-5.49464%2C97.8543%20-0.3096%2C143.77763%202.22344%2C19.74997%206.81489%2C32.58526%2015.42846%2C43.1613%205.37949%2C6.59611%2014.64041%2C12.20844%2022.92265%2C13.88306%205.820847%2C1.17184%2034.916167%2C2.80296%2077.311147%2C4.32788%206.30571%2C0.22517%2023.02756%2C0.61663%2037.15111%2C0.86994%2029.42664%2C0.52451%2083.54261%2C0.20981%20114.47761%2C-0.655%2020.8079%2C-0.5821%2058.7485%2C-2.12366%2065.8422%2C-2.6712%201.9983%2C-0.15225%206.6203%2C-0.45032%2010.269%2C-0.65757%2012.2852%2C-0.6921%2020.0928%2C-3.26352%2027.4283%2C-9.03063%209.4977%2C-7.45838%2016.8486%2C-21.24548%2019.956%2C-37.40953%202.9399%2C-15.29669%204.9126%2C-42.54212%205.3053%2C-73.47068%200.3274%2C-25.84331%20-0.1133%2C-39.79033%20-1.9804%2C-62.1859%20z%20M%20204.24019%2C313.4699%20V%20198.53174%20l%20103.51913%2C57.46396%20-103.51913%2C57.4742%20z%22%20id%3D%22path9-3%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/g%3E%3C/svg%3E") no-repeat scroll 0.5em center rgba(255, 255, 255, 0.05);
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    background-color: #2D2D2D;
}

.search_icon {
    padding: 0 5px 0 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg%20style%3D%22cursor%3Apointer%3B%22%20%20height%3D%2225px%22%20version%3D%221.1%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2225px%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%3E%3Cg%20fill%3D%22%23929292%22%20id%3D%22icon-111-search%22%3E%3Cpath%20d%3D%22M19.4271164%2C21.4271164%20C18.0372495%2C22.4174803%2016.3366522%2C23%2014.5%2C23%20C9.80557939%2C23%206%2C19.1944206%206%2C14.5%20C6%2C9.80557939%209.80557939%2C6%2014.5%2C6%20C19.1944206%2C6%2023%2C9.80557939%2023%2C14.5%20C23%2C16.3366522%2022.4174803%2C18.0372495%2021.4271164%2C19.4271164%20L27.0119176%2C25.0119176%20C27.5621186%2C25.5621186%2027.5575313%2C26.4424687%2027.0117185%2C26.9882815%20L26.9882815%2C27.0117185%20C26.4438648%2C27.5561352%2025.5576204%2C27.5576204%2025.0119176%2C27.0119176%20L19.4271164%2C21.4271164%20L19.4271164%2C21.4271164%20Z%20M14.5%2C21%20C18.0898511%2C21%2021%2C18.0898511%2021%2C14.5%20C21%2C10.9101489%2018.0898511%2C8%2014.5%2C8%20C10.9101489%2C8%208%2C10.9101489%208%2C14.5%20C8%2C18.0898511%2010.9101489%2C21%2014.5%2C21%20L14.5%2C21%20Z%22%20id%3D%22search%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat scroll 0.5em center rgba(255, 255, 255, 0.05);
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    background-color: #2D2D2D;
}

.mobile_menu_icon {
    padding: 0 5px 0 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2225px%22%20height%3D%2225px%22%20viewBox%3D%220%200%2070%2070%22%20enable-background%3D%22new%200%200%2070%2070%22%20xml%3Aspace%3D%22preserve%22%3E%20%20%3Cimage%20id%3D%22image0%22%20width%3D%2270%22%20height%3D%2270%22%20x%3D%220%22%20y%3D%220%22%20xlink%3Ahref%3D%22data%3Aimage/png%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAQAAADbJyoPAAAABGdBTUEAAK/INwWK6QAAACBjSFJN%20AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN%20RQfhCRINGQkMyB0NAAADGElEQVRo3u1ZS7LcIAxsKO9yrWxzqqxzrGxynKlKFnkJysI2qAUY4fJM%20TaqsV29s0QIj8WkZAwAQUSTSVSPFolUKY1/XH2IhFyUF7vfrlbX1ysiFEvOf9nu9tsv6Wu13nMN0%20c7WnxfQIw8HjZrTOAw5MJizjDBYeX/E2EkQAQYAgDI3Z5notJMm3ENSylurfooFKQWVnsCBVD478%208MTMxtmPRWz9XP9lK9aaxqSjIddcvQymJR+2IJsg9zKYYdPYsWb9raN6hMXdREwVqeJVxrZ4BPLS%20dpLrj7HGnOl5MoedkWg9Lf7aaAE6HtIst1ZzWEjf+ruM7EtO4UXb77iE6+nFPMZ21m7zb+Fnj7D1%20WW0bMM3CPd6JXc3SXyTNiR2lPHBHpU+G8RQ2x7CnOuzwp5VYlZRrvUvKD4u2sHNaI2mKnU7r7vc1%20HgRMY82h8EzEi4cp/P5+VVMXdEak0OGeZWiKFFUSFJMIbHbDOUqgLc2HuTK9V/FTZm3d/M7aO3dz%20ssV8HlR9qSx0jjTGJlhbDvIWZh62gRuLNVwzM2dkBQsHGGcCPiwkgWJdLfXE1QiaGLdiF8MIWzSF%20a6OSTurEUlSZxuwSKMEvK3SMRdmKxTxyD6hOn3nqaQzkJ3fcjy0/v+At5WZt/L+s/UItNOOQlFGi%20KkVb02j2KxmN024HFqswt47//Mdo81lRLl0eS4vQVykpgk0qLMZ7MsDboBcLHwOifKW4WfsVOY15%20167fi/kAo823vNnLaS2zdo+b58Ryv9bH2JYD21d7FjuxvZiN7ggLInYt6FnPcbJnD3pNcTzbrYyw%204QS2Ubj+iKhILMm3Dl59wMgRsFg7XS2aD1v+PsnLM7L8+qR3Qx4GMTvsHp1n7cBmyHCz9luytu4G%20gzCa78vk8TGcX7susXa2WWFBjT+PqJZETZTZAjVvUsa4ZgS82PL4zG+E9fFITQottu4dNc9oN2v3%20sJu1e/JWrD0VmWdL/mDKvdVR8kjr4+o8Vn3Xrk93Z5a4ndSt79p9bPnz43lhn5ebtYfazdo9rDO+%20eoTt8Vkbw1ntH5r3eb4cJ8KPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA5LTE4VDEzOjI1OjA5%20LTA3OjAwdcDJFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wOS0xOFQxMzoyNTowOS0wNzowMASd%20cagAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC%22/%3E%3C/svg%3E") no-repeat scroll 0.5em center rgba(255, 255, 255, 0.05);
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    background-color: #2D2D2D;
}

.f_logo_klein_icon {
    padding: 0 4px 0 6px;
    width: 25px;
    height: 25px;
    background-color: #2D2D2D;
    text-align: center;
}

.twitch {
    padding: 0 5px 0 8px;
    width: auto;
    height: 25px;
    background-color: #2D2D2D;
}

.twitch a, .network .twitch a {
    padding: 0 5px 0 8px;
    color: #e6c491;
    line-height: 25px;
}

.rss_icon a, .facebook_icon a, .youtube_icon a, .twitter_icon a, .search_icon a, .mobile_menu_icon a, .f_logo_klein_icon a {
    padding: 0;
    margin: 0;
    width: 25px;
    height: 25px;
    display: inline-block;
}

#overview {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.overview_links {
    width: 40%;
    text-align: right;
    float: left;
    padding-right: 0.5em;
    box-sizing: border-box;
}

.overview_rechts {
    width: 60%;
    text-align: left;
    float: left;
    box-sizing: border-box;
}

.div_linkleiste {
    width: 100%;
    margin: 1% 0;
}

.header_linkleiste_text {
    padding: 0 1%;
}

.div_content_header {
    display: block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #333333;
    background-image: url('images/hintergrund-rot.jpg');
    background-size: 642px 92px;
    overflow: auto;
}

.content_header_autor_text {
    color: #CEE2FB;
    padding-top: 0;
    border: 0em;
    margin: 0em;
    float: left;
}

.content_header_kommentar_text, .content_header_kommentar_text a:link, .content_header_kommentar_text a:active, .content_header_kommentar_text a:visited {
    color: #CEE2FB;
    padding: 0em;
    border: 0em;
    margin: 0em;
    float: right;
}

.content_header_kommentar_text a:hover {
    color: #ffffff;
}

.div_content_mitte {
    background-image: url('images/hintergrund-content.jpg');
    background-size: 605px 57px;
    background-repeat: repeat;
    border-left: 1px solid #333333;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    overflow: auto;
}

.content_mitte_text, .div_content_mitte_text {
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: justify;
    vertical-align: top;
}

.div_content_footer {
    margin-bottom: 1em;
}

.umfrage_gesamt {
    background-color: #2D2D2D;
    width: 90%;
    border: 1px solid #000000;
    border-radius: 5px;
    margin: auto;
    padding: 10px;
    text-align: left;
}

.umfrage_titel {
    color: #FFB019;
    margin: 0 0 15px;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    font-weight: bold;
}

.umfrage_ergebnis_1 {
    margin: 0;
    padding: 10px 0 10px 0;
}

.umfrage_ergebnis_2 {
    background-color: #3D3D3D;
    border: 1px solid #000;
    padding: 0;
    margin: 5px 0 0;
}

.umfrage_ergebnis_3 {
    background-color: #00c0ff;
    border: 1px solid #3D3D3D;
    border-radius: 2px;
    height: 25px;
}
/* ----------------------------------------------------------------------------- *
 *                                       Medien                                  *
 * ----------------------------------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
    border: 0;
    outline: 0;
}

.fullsize {
    width: 100%;
    height: auto;
}

figure {
    float: left;
    overflow: hidden;
}

.slides {
    margin: 0px;
}

.youtube {
    position: relative;
    padding-bottom: 55%;
    padding-top: 0.938em;
    height: 0;
    overflow: hidden;
}

.youtube > div {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ----------------------------------------------------------------------------- *
 *                                Tabellen                                       *
 * ----------------------------------------------------------------------------- */

.table_1 {
    width: 100%;
    padding-bottom: 1em;
    border-spacing: 5px;
}

.table_1 th {
    font-weight: bold;
    color: #F8CC35;
}

table.table_1 td, table.table_1 th {
    border: 1px solid #28241D;
    padding: 1px;
}

.row_titel_1 {
    background-color: #000000;
    height: 40px;
    border: 1px solid #28241D;
}

.row_1 {
    background-color: #12110f;
    border: 1px solid #28241D;
}

.row_2 {
    background-color: #171614;
    border: 1px solid #28241D;
}

table.table_1 tr:nth-child(odd) {
    background-color: #12110f;
    border: 1px solid #28241D;
}

table.table_1 tr:nth-child(even) {
    background-color: #171614;
    border: 1px solid #28241D;
}

.column_1 {
    border: 1px solid #28241D;
}


/* -----------------*/
/*    Calculator    */
/* -----------------*/
.calculator {
    padding-left: 1%;
    padding-right: 1%;
}

.calculator h1, .calculator h2, .calculator h3, .calculator h4 {
    color: #F8CC35;
}

.calculator label {
    color: #f1f1f1;
    font-size: 1.1em;
    font-weight: bold;
}

.calculator .example-wrapper {
    margin-bottom: 20px;
}

.calculator .collapsible {
    background-color: rgba(73, 50, 0, 0.5);
    color: #F8CC35;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1em;
    display: flex;
    position: relative;
    border-radius: 10px;
}

.calculator .active, .calculator .collapsible:hover {
    background-color: rgba(160, 109, 0, 0.5);
}

.calculator .active {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.calculator .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: rgba(73, 50, 0, 0.5);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.calculator .collapsible::after {
    content: '\002B'; /* Unicode character for "plus" sign (+) */
    font-size: 1.5em;
    color: #F8CC35;
    float: right;
    margin-left: 5px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.calculator .active::after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
    font-size: 1.5em;
    color: #F8CC35;
}

.calculator .form-group {
    margin-bottom: 20px;
}

.calculator .dataline-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.calculator .data-hint-wrapper {
    display: flex;
    align-items: center;
}

.calculator .input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #f1f1f1;
    width: 100px;
    padding: 3px;
    border-radius: 10px;
    justify-content: center;
}

.calculator .input-wrapper input {
    width: 80%;
    box-sizing: border-box;
    color: #f1f1f1;
    border: none;
    background-color: transparent;
    outline: none;
    padding: 5px 5px 5px 10px;
    font-size: 1.1em;
}

.calculator .input-wrapper:focus-within {
    border: 2px solid #F8CC35;
}

.calculator .input-wrapper span {
    margin-left: 3px;
}

.calculator .table-input {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0px;
    border: 1px solid rgba(164, 164, 164, 0.5);
    padding-top: 2%;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
}

.calculator .table-input .result-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px 30px 10px;
}

.calculator .table-input .result-wrapper label {
    display: block;
    color: #a4a4a4;
    font-size: 0.8em;
    font-weight: normal;
    text-transform: uppercase;
}

.calculator .result {
    font-weight: bold;
    color: #F8CC35;
}

.calculator .end-result {
    font-size: 1.4em;
}

.calculator .column {
    flex-basis: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calculator .column > :first-child {
    margin: 0px 3px 10px 3px;
}

.calculator .table-input label {
    flex: 1;
    text-align: center;
    margin-bottom: 5px;
}

.calculator .table-input .input-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.calculator .table-input .input-wrapper input {
    margin: 0 auto;
}

.calculator .table-input .input-wrapper span {
    margin-left: 5px;
}

.calculator .slidecontainer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calculator .slider {
    width: 70%;
}

@media (max-width: 600px) {
    .slider-dataline .dataline-wrapper {
        flex-wrap: wrap;
    }

    .slider-dataline .data-hint-wrapper {
        flex-basis: 50%;
    }

    .slider-dataline .input-wrapper {
        flex-basis: 30%;
    }

    .slider-dataline .slidecontainer {
        flex-basis: 100%;
        order: 3;
        margin-top: 10px;
    }
}

.calculator .hint-icon {
    margin-right: 10px;
}

.calculator .result-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.calculator .result-message {
    margin-top: 40px;
    margin-bottom: 30px;
}

.calculator .sticky-result-wrapper {
    position: sticky;
    bottom: 5px;
    background-color: #000003ee;
    border-radius: 15px;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.final-result-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.dps-result-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dps-result-wrapper .final-result-message .final-result-text {
    font-size: 1.2em;
}

.dps-result-wrapper .final-result-message .end-result {
    font-size: 1.6em;
}

.final-result-message {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 170px; /* Adjust this value as needed */
    padding: 2px 0;
    margin: 5px; /* Adjust this value as needed */
    color: #F8CC35;
}

/* Optional styles */
.final-result-message .final-result-line {
    margin-bottom: 10px;
}

.final-result-message .final-result-text {
    font-weight: bold;
    font-size: 0.9em;
}

.final-result-message .end-result {
    font-size: 1.4em;
}

.calculator .sub-result-message {
    margin-bottom: 20px;
}

.calculator .weapon-damage .sub-result-message:last-of-type {
    margin: 0;
}

.calculator .result-line {
    text-transform: uppercase;
    color: #F8CC35;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.calculator .sub-result-line {
    text-transform: uppercase;
    color: #a4a4a4;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-size: 1rem;
}

.calculator .sub-result {
    font-size: 1.3rem;
}

#luckyhit-result, #wpn-dps-result {
    font-size: 1.6em;
}

#calc-tooltip {
    position: absolute;
    left: -9999px;
    top: 50%;
    padding: 10px;
    background: linear-gradient(to bottom, rgba(74, 56, 32, 0.96) 40%, rgba(23, 19, 16, 0.96));
    color: #EAE7E2;
    font-size: 14px;
    width: 320px;
    border: 2px solid #DCC3A5;
    border-radius: 13px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1000;
}

.calculator .formula {
    font-size: 1.0em;
    font-weight: bold;
    margin: 0 5px;
    color: #F8CC35;
    border: 1px solid #EAE7E2;
    padding: 15px 10px;
    border-radius: 4px;
}

.calculator .formula-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* Chrome, Safari, Edge, Opera */
.calculator input::-webkit-outer-spin-button,
.calculator input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calculator input[type=number] {
    -moz-appearance: textfield; /* Firefox */
    text-align: right;
}

.calculator .arrow {
    cursor: pointer;
    color: #EAE7E2;
    user-select: none;
}

.calculator .arrow-clicked {
    color: #F8CC35;
}

.calculator .multi-input {
    display: flex;
    align-items: center;
}

.calculator .multi-input span, .calculator .multi-input .input-wrapper {
    margin: 0px 3px 15px;
}

.calculator .wpn-dmg-table, .calculator .glyph-xp-table {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.calculator .wpn-dmg-table .column, .calculator .glyph-xp-table .column {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.calculator .wpn-dmg-table label, .calculator .glyph-xp-table label {
    margin: 5px 0px 10px;
}

/* ------ Switch Buttons ------ */
.calculator .input-wrapper.input-switch {
    border: none;
}

.calculator .btn-knobs,
.calculator .btn-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.calculator .btn-switch {
    position: relative;
    width: 74px;
    height: 36px;
    overflow: hidden;
    border: 2px solid #f1f1f1;
    transition: 0.3s ease all;
}

.calculator .btn-switch,
.calculator .btn-switch .layer {
    border-radius: 100px;
}

.calculator .btn-checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.calculator .btn-knobs {
    z-index: 2;
}

.calculator .btn-layer {
    width: 100%;
    z-index: 1;
}

.calculator .btn-switch .btn-knobs:before {
    content: "NEIN";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 23px;
    height: 11.5px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #f44336;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

.calculator .btn-switch .btn-checkbox:checked + .btn-knobs:before {
    content: "JA";
    left: 39px;
    background-color: #03a9f4;
}

.calculator .btn-switch .btn-checkbox:checked {
    border-color: #03a9f4 !important;
}

.calculator .btn-switch .btn-knobs,
.calculator .btn-switch .btn-knobs:before,
.calculator .btn-switch .btn-layer {
    transition: 0.3s ease all;
}

/* ----- Collapsible Headers ----- */
.calculator .collapsible-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.calculator .collapsible-heading hr {
    flex-grow: 1;
    border: none;
    border-top: 1px solid #F8CC35;
    margin: 0 10px;
}

.calculator .collapsible-arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-bottom: 2px solid #F8CC35;
    border-right: 2px solid #F8CC35;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.calculator .collapsible-arrow-hint {
    font-size: 0.8em;
    color: #F8CC35;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-right: 10px;
}

.calculator .collapsible-content {
    display: none;
}

.calculator .collapsible-content :first-child {
    margin-top: 0;
}

.calculator .collapsible-heading.open .collapsible-arrow {
    transform: rotate(0.63turn);
}

/* ----- Tab Selection ----- */
.calculator .tab-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calculator .tabs {
    display: flex;
    user-select: none;
}

.calculator .tab {
    cursor: pointer;
    padding: 10px 20px;
    margin: 0px 2px;
    border-radius: 10px 10px 0px 0px;
}

.calculator .panels {
    background: #1b1b1b;
    width: 97%;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #F8CC35;
}

.calculator .panel {
    display: none;
    animation: fadein 0.8s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.calculator .panel-title {
    font-size: 1.5em;
    font-weight: bold;
}

.calculator .radio {
    display: none;
}

.calculator #wpn-dmg-radio:checked ~ .panels #wpn-dmg-panel,
.calculator #flat-dmg-radio:checked ~ .panels #flat-dmg-panel {
    display: block;
}

.calculator #wpn-dmg-radio:checked ~ .tabs #wpn-dmg-tab,
.calculator #flat-dmg-radio:checked ~ .tabs #flat-dmg-tab {
    background: #1b1b1b;
    color: #f1f1f1;
    border-top: 1px solid #F8CC35;
    border-left: 1px solid #F8CC35;
    border-right: 1px solid #F8CC35;
    z-index: 1;
    margin-bottom: -1px;
}

.calculator .addline-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 0 30%;
}

.calculator .addline-wrapper hr {
    flex-grow: 1;
    height: 1px;
    background-color: #ffffff67;
    margin: auto 15px;
    border: none;
}

.calculator .circle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e0e0e0;
    cursor: pointer;
    font-size: 20px;
    position: relative;
    user-select: none;
}

.calculator .add-button {
    background-color: #5cb85c;
    color: #fff;
    width: 25px;
    height: 25px;
}

.calculator .remove-button {
    background-color: #d9534f;
    color: #fff;
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.calculator .circle-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 1;
}


/* GLYPHS */
.calculator .result-table {
    width: 100%;
    border-collapse: collapse;
}

.calculator .result-table th {
    color: #f1f1f1;
    padding: 8px;
    margin-left: 5px;
    margin-right: 5px;
}

.calculator .result-table td {
    padding: 8px;
}

.calculator .result-table tr {
    width: 100%;
    margin-bottom: 5px;
}

.calculator .result-table tbody tr:nth-child(odd) {
    background-color: #1b1b1b;
}

.calculator .calc-dropdown {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    color: #f1f1f1;
    text-align: center;
    font-size: 16px;
    margin: 5px;
}

.calculator .calc-dropdown option {
    background-color: #1b1b1b;
    color: #f1f1f1;
    text-align: center;
}
/* ----------------------------------------------------------------------------- *
 *                             Media Queries                                     *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 0em) {
h1 {
    font-size: 1.5em;
    line-height: 1.2em;
    margin: 1%;
}

h2 {
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 1%;
}

h3 {
    font-size: 1.1em;
    line-height: 1.3em;
    margin: 1%;
}

h4 {
    font-size: 1.05em;
    line-height: 1.2em;
    margin: 1%;
}

.network_wraper {
    display: none;
}

.menu_desktop {
    display: none;
}

blockquote {
    margin: 1%;
}

p {
    padding: 1%;
}

ul {
    margin: 1%;
    text-align: left;
    padding-left: 0.2em;
    padding-bottom: 1em;
}

.content_header_autor_text {
    padding-left: 1%;
}

.content_header_kommentar_text {
    padding-right: 1%;
}

.content_left, .content_right {
    width: 100%;
}

.table_1 {
    font-size: 0.8em;
    line-height: 1em;
    padding: 0px;
    margin: 0px;
}

table.table_1 td, table.table_1 th {
    border: 1px solid #28241D;
    padding: 0px;
    font-size: 1em;
    line-height: 1.2em;
}

.content_navi li {
    padding-left: 0px;
    padding-right: 0px;
}

.spalten_33 {
    width: 100%;
    padding: 0;
    float: left;
    box-sizing: border-box;
    text-align: justify;
}

.spalten_33_rechts {
    width: 100%;
    padding: 0;
    float: left;
    box-sizing: border-box;
    text-align: justify;
}

.spalten_33_titel {
    font-size: 1.5em;
    line-height: 1.2em;
    margin: 0 0.5em;
    font-family: 'Gentium Book Basic', serif;
    color: #F8CC35;
    text-align: left;
}

.spalten_33_werbung {
}

.spalten_33_twitch {
    width: 100%;
    min-height: 270px;
    padding: 0px;
    padding-left: 1em;
    float: left;
    box-sizing: border-box;
    text-align: center;
}

.spalten_66 {
    width: 100%;
    padding: 0;
    float: left;
    box-sizing: border-box;
    text-align: justify;
    }

.spalten_100 {
    width: 100%;
    padding: 0;
    float: left;
    box-sizing: border-box;
    text-align: justify;
}

.mobile_hidden {
    display: none;
}

.mobile_view {
    display: block;
    z-index: 999;
}

.tablet_hidden {
    display: none;
}

}
/* @media screen and (min-width: 480px) (iPhone vertikal) */
@media screen and (min-width: 30em) {
.mobil_hidden {
    display: block;
}

.mobil_hidden_cell {
    display: table-cell;
}

.content_left, .content_right {
    width: 50%;
}

.spalten_33, .spalten_33_rechts, .spalten_66, .spalten_100 {
    padding: 0 0.3em;
}

.spalten_33 {
    width: 50%;
}

.spalten_33_werbung {
}

.spalten_33_twitch {
    width: 100%;
}

.spalten_33_rechts {
    width: 50%;
}

}
/* @media screen and (min-width: 640px) */
@media screen and (min-width: 40em) {
h1 {
    font-size: 2em;
    line-height: 1.5em;
    margin: 0 0.5em;
}

h2 {
    font-size: 1.5em;
    line-height: 1.2em;
    margin: 0 0.5em;
}

h3 {
    font-size: 1.17em;
    line-height: 1.3em;
    margin: 0 0.5em;
}

h4 {
    font-size: 1.12em;
    line-height: 1.2em;
    margin: 0 0.5em;
}

ul {
    padding-left: 1em;
    padding-bottom: 1em;
}

.content_navi li {
    padding-left: 5px;
    padding-right: 5px;
}

.content_header_autor_text {
    padding-left: 0em;
}

.network_wraper {
    display: block;
}

.menu_desktop {
    display: inline-block;
}

.mobile_hidden {
    display: block;
}

.mobile_view {
    display: none;
}

.table_1 {
    font-size: 1em;
}

table.table_1 td, table.table_1 th {
    border: 1px solid #28241D;
    padding: 3px;
}

}
/* 720px */
@media screen and (min-width: 45em) {
}

/* 888px) */
@media screen and (min-width: 55.5em) {
}

/* 1000px */
@media screen and (min-width: 62.5em) {
.tablet_hidden {
    display: block;
}

body, #takeover_wraper {
    background-image: url(images/hintergrund-diablo.jpg);
    background-size: 2048px 1026px;
}

#takeover {
    max-width: 980px;
    width: 980px;
}

.spalten_33 {
    width: 32.5%;
}

.spalten_33_rechts {
    width: 32.5%;
}

.spalten_33_werbung {
}

.spalten_33_twitch {
    width: 310px;
}

#fansite_marginal_2 {
    position: sticky;
    float: left;
}

.spalten_66 {
    width: 65%;
}

#cookie_note {
    width: 50%;
    left: 25%;
}

.qc-cmp2-persistent-link {
    right: auto !important;
}

}
/* 1200px  */
@media screen and (min-width: 75em) {
#takeover {
    margin:0em;
}
#banner_sky_left_text {
    display:block;
}
#banner_sky_right_text {
    display:block;
}

}

/* 1400px */
@media screen and (min-width: 87.5em) {
#takeover {
    max-width: 1170px;
    width: 1170px;
    margin:0em auto;
}
.spalten_33_twitch {
    width: 350px;
}

}

/* 1680px
@media screen and (min-width: 105em) {
*/

/* 1920px */
@media screen and (min-width: 120em) {
#banner_sky_right_text {
    padding-left:2em;
}

#banner_sky_left_text {
    padding-right:2em;
}

}


/*
*  Eight-column grid active
*  ----------------------------------------------------------------------
*  Margin   | #  1     2     3     4     5     6     7     8   |   Margin
*  5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%
*  ----------------------------------------------------------------------------------------------------------------------


*  Sixteen-column grid active
*  ----------------------------------------------------------------------------------------------------------------------
*  Margin   | #  1     2     3     4     5     6     7     8     9     10    11    12    13    14    15    16  |   Margin
*  5.55555% | %  6.25  12.5  18.75 25.0  31.25 37.5  43.75 50.0  56.25 62.5  68.75 75.0  81.25 87.5  93.75 100 | 5.55555%
*/

/* ----------------------------------------------------------------------------- *
 *                             Consent Banner (Einwilligung)                     *
 * ----------------------------------------------------------------------------- */
/*

.qc-cmp-button,
.qc-cmp-button.qc-cmp-secondary-button:hover {
                background-color: #000000 !important;
                border-color: #000000 !important;
}
.qc-cmp-button:hover,
.qc-cmp-button.qc-cmp-secondary-button {
                background-color: transparent !important;
                border-color: #000000 !important;
}
.qc-cmp-alt-action,
.qc-cmp-link {
                color: #000000 !important;
}
.qc-cmp-button,
.qc-cmp-button.qc-cmp-secondary-button:hover {
                color: #ffffff !important;
}
.qc-cmp-button:hover,
.qc-cmp-button.qc-cmp-secondary-button {
                color: #000000 !important;
}
.qc-cmp-small-toggle,
.qc-cmp-toggle {
                background-color: #000000 !important;
                border-color: #000000 !important;
}
.qc-cmp-main-messaging,
.qc-cmp-messaging,
.qc-cmp-sub-title,
.qc-cmp-privacy-settings-title,
.qc-cmp-purpose-list,
.qc-cmp-tab,
.qc-cmp-title,
.qc-cmp-vendor-list,
.qc-cmp-vendor-list-title,
.qc-cmp-enabled-cell,
.qc-cmp-toggle-status,
.qc-cmp-table,
.qc-cmp-table-header {
color: #000000 !important;
}

.qc-cmp-ui {
background-color: #ffffff !important;
}

.qc-cmp-table,
.qc-cmp-table-row {
border: 1px solid !important;
border-color: #000000 !important;
}
#qcCmpButtons a {
                text-decoration: none !important;

}

#qcCmpButtons button {
margin-top: 65px;
}


@media screen and (min-width: 851px) {
#qcCmpButtons a {
                position: absolute;
                bottom: 10%;
                left: 60px;
}
}
.qc-cmp-qc-link-container{
display:none;
}
*/