/* Farben */
:root {
         --main-color: #42d4cf; /* Türkis */
         --main-color-light: #6aefeb;
         --main-color-dark: #026F7C;

         --second-color: #001e76; /* dunkles blau */
         --second-color-light: #2c52c2;
         --second-color-dark: #001142;

         --contrast-color: #EA3627; /* Rot */
         --contrast-color-light: #F5724E;
         --contrast-color-dark: #410B10;

         --main-bg-color: #EFEFEF;
         --main-bg-color-light: #FFFFFF;
         --main-bg-color-dark: #DCDCDC;

         --font-color: #1F1F1F;
         --font-color-light: #FFFFFF;
         --font-color-dark: #001e76;
         --font-color-hover: #42d4cf;

         --font-family: 'Lexend Deca';
         --second-font-family: 'Ubuntu';

         --text-shadow-light: rgba(255,255,255,0.2) 1px 1px 0px;
         --text-shadow-dark: rgba(0,0,0,0.2) 1px 1px 0px;

         --box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
}

/* Links */
a:link, a:visited {
         text-align: left;
         font-size: 1.0em;
         color: var(--font-color-dark);
         font-weight: 500;
         text-decoration: none;
         transition: 0.3s;
         background-image: linear-gradient(rgba(255,255,255,0.0) 60%, var(--main-color-light) 55%);
}
a.no, .no a { background-image: linear-gradient(rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.0) 55%); background: none; }

a:hover {
         font-weight: 500;
         color: var(--font-color-hover);
         text-decoration: none;
         background-image: linear-gradient(rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.0) 55%);
}

a[target="_blank"], a[target="_blank"][rel="nofollow"] { background-image: url(../images/icon_external_hover.png), linear-gradient(rgba(255,255,255,0.0) 60%, var(--main-color-light) 55%); background-position: center right; background-size: 16px, 100%; background-repeat: no-repeat; padding-right: 20px; }
a[target="_blank"]:hover, a.no[target="_blank"] { background-image: url(../images/icon_external_hover.png), linear-gradient(rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.0) 55%); background-position: center right; background-size: 16px, 100%; background-repeat: no-repeat; padding-right: 20px; }
a.none[target="_blank"], a.none[target="_blank"][rel="nofollow"] { background-image: none; padding-right: 0px; }

a.button:link, a.button:visited, .button {
         display: inline-block;
         cursor: pointer;

         font-family: var(--font-family);
         text-align: left;
         font-size: 1.1em;
         font-weight: bold;
         color: var(--font-color-dark);

         padding: 5px 10px 5px 10px;
         margin: 2px 2px 2px 2px;

         background: var(--main-color-light);
         text-decoration:none;

         border: 0px var(--main-color-dark) solid;

         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;
}

a.button:hover {
         color: var(--font-color-light);
         background: var(--second-color);
         text-decoration:none;
}



/* Überschriften */
h1 {
         font-size: 1.8em;
         font-weight: bold;
         text-align: left;
         color: var(--second-color);

         margin: 0px auto 5px auto;
         padding: 0px 0px 0px 0px;
}


h2 {
         font-size: 1.6em;
         font-weight: bold;
         text-align: left;
         color: var(--second-color-dark);

         margin: 0px auto 5px auto;
         padding: 0px 0px 0px 0px;
}

h3 {
         font-size: 1.4em;
         font-weight: normal;
         text-align: left;
         color: var(--second-color-dark);

         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
}

h4 {
         font-size: 1.3em;
         font-weight: normal;
         text-align:left;
         color: var(--second-color-light);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h5 {
         font-size: 1.3em;
         font-weight: normal;
         text-align:left;
         color: var(--main-color-light);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         text-transform: uppercase;
}

h1.center, h2.center, h3.center, h4.center, h5.center { text-align: center; }
#startseite h1, #startseite h2, #startseite h3 { display: inline-block; text-align: center; }

h1.line, h2.line, h3.line, h4.line, h5.line { display: inline-block; font-size: 1.8em; background-image: linear-gradient(rgba(255,255,255,0.0) 55%, var(--main-color-light) 56%); margin: 10px 0px; }

.dark { color: #04342d; }
.dark.line { border-bottom: 3px #04342d solid;}


/* Standarts */
body {
         font-size: 1.0em;
         vertical-align: top;
         text-align: left;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         min-width: 320px !important;
         background-color: rgba(0,0,0,0.03);
}

body, tr, td, div {
         font-family: var(--font-family);
         font-size: 1.0em;
         color: var(--font-color);
         vertical-align:top;
         text-align:left;
}

img      { border: 0px; }
img.cat  { float: left; width: calc(30% - 20px); height: auto; max-width: 300px; margin: 0px 20px 20px 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
img.blog  { width: calc(100% - 0px); height: auto; margin: 0px 20px 0px 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
img.vergleich  { float: left; width: 200px; height: auto; margin: 0px 20px 0px 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.highlight { display: block; background-color: #42d4cf; font-size: 1.1em; font-style: italic; padding: 5px 10px; color: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.highlight.bg1 { background-color: var(--main-color); }
.highlight.bg2 { background-color: var(--second-color); }


.clear   { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.pad     { padding: 10px; }
.pad_big     { padding: 20px; }
.pad_top     { padding: 10px 0px; }
.pad_top_big     { padding: 20px 0px; }
.l       { float:left; }
.r       { float:right; }
.a_l     { text-align: left; }
.a_c     { text-align: center !important; }
.a_r     { text-align: right; }
.a_j     { text-align: justify; }
.block   { display: block; }
.inline-block { display: inline-block; }
.inline  { display: inline !important; }
.hide    { display: none !important; }
.show    { display: block; }
hr       { border: 0px; border-bottom: 2px rgba(0,0,0,0.15) dotted; }

.conad{display:none;}

.round { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.round_medium { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.round_big { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

table    {}
td       { padding: 5px 10px; vertical-align: middle; }
td.c     { text-align: center; }
td.r     { text-align: right; }

td.head  { background:#0b695c !important; color: #FFFFFF !important; font-weight: bold; border-bottom: 2px #0f8c7a solid; text-transform: uppercase; }
tr:nth-child(odd) td { background: rgba(0,0,0,0.2); }
tr:nth-child(even) td { background: rgba(0,0,0,0.1); }

.f_small   { font-size: 0.9em; }
.f_smaller   { font-size: 0.8em; }
.f_big   { font-size: 1.1em; }
.f_bigger   { font-size: 1.2em; }

.diver        { display: block; margin: 10px 0px; width: 100%; height: 3px; border-top: 3px rgba(0,0,0,0.2) dotted; }
.bg1        { background: #FFFFFF; }
.bg2        { background: #EFEFEF; }

.o100 { opacity: 1.0; }
.o75 { opacity: 0.75; }
.o50 { opacity: 0.50; }
.o25 { opacity: 0.25; }

.in { width: calc(100% - 50px); margin: 0px auto; min-width: 320px; max-width: 1200px; }

ul.list { margin: 10px 0px; padding: 0px; }
ul.list li {
         list-style: none;
         background: rgba(255,255,255,0.1) url(../images/icon_a_r_hover.png) 5px 6px no-repeat;
         background-size: 20px 20px;
         margin: 1px 0px;
         padding: 5px 10px 5px 35px;
}

ul.list li:nth-child(odd) { background-color: rgba(0,0,0,0.2) !important; }

.verlauf {
         background: rgb(66,212,207);
         background: -moz-linear-gradient(230deg, rgba(66,212,207,1) 0%, rgba(0,30,118,1) 100%);
         background: -webkit-linear-gradient(230deg, rgba(66,212,207,1) 0%, rgba(0,30,118,1) 100%);
         background: linear-gradient(230deg, rgba(66,212,207,1) 0%, rgba(0,30,118,1) 100%);
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#42d4cf",endColorstr="#001e76",GradientType=1);
}


/* Quote */
q { display: block; position: relative; background: var(--main-color-dark); font-size: 1.4em; color: var(--font-color-light); font-weight: 900; line-height: 1.4em; text-align: justify; width: calc(100% - 80px); padding: 20px 40px; margin: 20px 0px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
q:after { top: 100%; left: 80px; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: var(--main-color-dark); border-width: 30px; margin-left: -30px; }


/* Icons */
.icon {
         float: left;
         display: block;

         width: 32px;
         height: 32px;
         margin: 0px 6px 0px 0px;
         padding: 0px 0px;
         border: 0px #ffffff solid;

         background-color: transparent;
         background-size: 32px 32px;
         background-repeat: no-repeat;
         background-position: center center;
}
.icon.r { float: right; margin: 0px 0px 0px 6px; }
.icon.medium { width: 22px; height: 22px; background-size: 22px 22px; }
.icon.small { width: 18px; height: 18px; background-size: 18px 18px; margin-top: 2px; }

.icon.arrow_l { background-image: url(../images/icon_a_l.png); }
.icon.arrow_r { background-image: url(../images/icon_a_r.png); }

a:hover .icon.arrow_l { background-image: url(../images/icon_a_l_hover.png); }
a:hover .icon.arrow_r { background-image: url(../images/icon_a_r_hover.png); }


/* Seite */
#wrapper{
         background-color: transparent;
         -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.0);
         -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.0);
         box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.0);
}

#header { width: 100%; }

#header .logo {
         display: block;
         width: calc(100% - 100px);
         background-color: rgba(0,0,0,0.0);
         padding: 10px 0px;
         margin: 0px 50px;
         text-align: center;
}
#header .logo.top { position: absolute; z-index: 10020; top: 15px; left: calc(50% - 175px); width: 300px; }
#header .logo a img { text-decoration: none; }
#header .logo img { width: 100%; height: auto; max-width: 400px; }
#header .logo span { text-transform: uppercase; font-size: 0.8em; color: var(--second-color); }
#header .logo.top span { display: none; }

#header .navigation {
         display: block;
         width: 100%;
         height: 50px;
         background-color: var(--main-color);
         padding: 15px 0px 15px 0px;

         color: var(--font-color-light);
         text-align: center;
}

#header .navigation a {
         display: inline-block;
         background-color: rgba(0,0,0,0.2);
         padding: 8px 12px;
         margin: 2px;

         font-family: var(--font-family);
         font-size: 1.4em;
         font-weight: 700;
         text-decoration: none;
         color: var(--font-color-light);
         text-align: center;
         text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}

#header .navigation a:hover {
         background-color: var(--second-color);

         font-size: 1.4em;
         font-weight: 700;
         text-decoration: none;
         color: var(--font-color-light);
}

#site {
         width: 100%;
         padding: 10px 0px;
}

#site .sitebar {
         float: left;
         display: block;
         width: 336px;
         padding: 10px 0px;
}

#site .content {
         float: right;
         display: block;
         width: calc(100% - 336px - 50px);
         text-align: left;
         padding: 10px 0px;
}

#site .content_big {
         float: none;
         display: block;
         width: calc(100% - 0px);
         padding: 10px 0px;

         text-align: left;
}

#footer {
         display: block;
         width: 100%;
         padding: 10px 0px;
         margin: 10px 0px;

         color: #FFFFFF;
         font-size: 0.8em;
         text-align: center;
         background-color: var(--second-color);
}
#footer span { color: var(--second-color); }
#footer .logo { text-align: center; margin-top: 10px; }
#footer .logo img { width: 100%; height: auto; max-width: 200px; }

#footer .box {
         display: block;
         width: 100%;
         padding: 10px 0px;
         text-align: center;
         font-size: 1.2em;
         color: #FFFFFF;
}

#footer .box b {
         display: block;
         color: #FFFFFF;
         padding: 0px 0px 5px 0px;
}



#footer a {
         font-size: 0.9em;
         font-weight: normal;
         text-decoration: none;
         color: var(--font-color-hover);
         text-align: center;
}

#footer a:hover {
         font-weight: normal;
         text-decoration: none;
         color: var(--font-color-light);
}

/* Mobile Navigation */
#menu {
         position: absolute;
         z-index: 10010;
         top: 35px;
         background: #FFFFFF;
         width: 32px;
         height: 32px;
         padding: 10px;
         margin-left: 0px;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
         cursor: pointer;
}
#menu:hover { background: var(--main-color); }

#menu_bar {
         display: none;
         position: fixed;
         z-index: 10000;
         width: 100%;
         top: 0px;
         left: 0;
         overflow-y: no-scroll;

         /*background: var(--main-color); */
         min-width: 300px;
         /*max-width: 350px;  */
         padding: 15px;
         padding-top: 150px;
         height: 100%;
         font-size: 1.0em;
}

#menu_bar ul, #menu_bar li {
         padding: 0px 0px 0px 0px;
         margin: 2px 0px 2px 0px;
}

#menu_bar li {
         display: inline-block;
         margin: 2px 0px 2px 0px;
         list-style: none;
         background: rgba(255,255,255,0.0) !important;
}
#menu_bar li.small { display: inline-block; margin: 2px 4px 2px 0px; }

#menu_bar li a {
         display: inline-block;
         background: rgba(0,0,0,0.05);

         padding: 5px 10px;
         margin: 0px 0px;

         font-weight: normal;
         font-size: 1.1em;
         text-decoration: none;
         color: var(--font-color-light);
         text-shadow: var(--text-shadow-dark) 2px 2px 1px;

         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
}
#menu_bar li.small a { background: rgba(0,0,0,0.15); font-size: 0.9em; color: var(--font-color-light); }
#menu_bar li a:hover, #menu_bar li a.active { background: rgba(0,0,0,0.15); color: var(--font-color-light); }
#menu_bar li.small a:hover, #menu_bar li.small a.active { background: rgba(0,0,0,0.25); color: var(--font-color-light); }


/* Search */
#search {
         position: absolute;
         z-index: 10010;
         top: 35px;
         left: calc(50% + 600px - 50px);
         background: #FFFFFF;
         width: 32px;
         height: 32px;
         padding: 10px;
         margin-left: 0px;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
         cursor: pointer;
}
#search:hover, #search.active { background: var(--main-color) !important; }

#search_bar {
         position: absolute;
         z-index: 10010;
         top: 135px;

         display: none;
         width: 100%;
         max-width: 1200px;
         height: 80px;

         background: var(--second-color);
}

#search_bar form {
         width: calc(100% - 50px);
         margin: 15px 25px;
         padding: 0px 0px;
         border: 0px #FFFFFF solid;
}
#search_bar form label { display: none; }
#search_bar form input {
         padding: 10px 15px;
         margin: 0px;
         border: 0px;
         border-bottom: 2px rgba(255,255,255,0.1) solid;

         color: #FFFFFF;
         font-size: 1.6em;

         -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.0);
         -moz-box-shadow:    0px 3px 0px 0px rgba(0, 0, 0, 0.0);
         box-shadow:         0px 3px 0px 0px rgba(0, 0, 0, 0.0);
         text-decoration:none;

         -webkit-border-radius: 0px;
         -moz-border-radius: 0px;
         border-radius: 0px;
}
#search_bar form input:focus { border-bottom: 2px rgba(255,255,255,0.5) solid; }
#search_bar form input[type="text"] { width: calc(100% - 120px - 10px) !important; margin-right: 10px; background-color: rgba(255,255,255,0.1); }
#search_bar form input[type="submit"] { float: right; width: 120px; text-transform: uppercase; }

/* generelle boxen */
.boxed {
         display: block;
         width: calc(100% - 40px);
         padding: 20px 20px;
         margin: 10px 0px;
         font-size: 1.0em;
}
.boxed:nth-child(even), .boxed.w { background-color: rgba(255,255,255,1.0) !important; }
.boxed:nth-child(odd) { background-color: rgba(0,0,0,0.05); }

.cat a { display: inline-block; padding: 2px 5px; font-size: 1.0em; margin: 0px 0px 10px 0px; background-color: var(--contrast-color); color: #FFFFFF; font-weight: 300; }


/* Content */
#faq {}

/* FAQ */
#faq .item {
         position:relative;
         padding-bottom:0px;
}
#faq .item b {
         display: block;
         cursor: pointer;
         width: calc(100% - 45px - 2px);

         padding: 5px 35px 5px 10px;
         margin: 0px;

         background: var(--second-color) url(../images/pfeil-unten.png) no-repeat right center;
         border: 1px var(--second-color) solid;

         font-size: 1.2em;
         font-weight: 600;
         color: var(--font-color-light);

         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
}
#faq .item b.active, #faq.all .item b {
        background-image: url(../images/pfeil-oben.png);

        -webkit-border-radius: 5px;
         -webkit-border-bottom-right-radius: 0px;
         -webkit-border-bottom-left-radius: 0px;
         -moz-border-radius: 5px;
         -moz-border-radius-bottomright: 0px;
         -moz-border-radius-bottomleft: 0px;
         border-radius: 5px;
         border-bottom-right-radius: 0px;
         border-bottom-left-radius: 0px;
}

#faq .item .antwort {
        display: none;
        background: #FFFFFF;
        border: 1px var(--second-color) solid;

        width: calc(100% - 20px - 2px);
        padding: 10px;

        -webkit-border-radius: 0px;
         -webkit-border-bottom-right-radius: 5px;
         -webkit-border-bottom-left-radius: 5px;
         -moz-border-radius: 0px;
         -moz-border-radius-bottomright: 5px;
         -moz-border-radius-bottomleft: 5px;
         border-radius: 0px;
         border-bottom-right-radius: 5px;
         border-bottom-left-radius: 5px;
}

#faq .item:first-child b { background-image: url(../images/pfeil-oben.png);  }
#faq .item:first-child .antwort { display: block; }
#faq.all .item .antwort { display: block; }


#feedback {}
#news {}


.swc_content .item, .swc_feedback .item, .swc_news .item { display: block; padding: 5px 0px 10px 0px; margin: 5px 0px 2px 0px; border-bottom: 3px rgba(0,0,0,0.2) dotted; }
.swc_content .item:last-child, .swc_feedback .item:last-child, .swc_news .item:last-child { margin: 5px 0px 5px 0px; border-bottom: 3px rgba(0,0,0,0.0) dotted; }
.swc_news .item i { font-size: 0.9em; }

.sitebar .swc_feedback .item img { width: 100%; height: auto; margin: 5px 0px; }

#top_items {}
#top_items .item {
         display: block;
         float: left;
         width: calc(33.3333% - (40px / 3) - 0px);
         padding: 0px;
         margin: 10px 0px;
         background-color: var(--main-bg-color);
}
#top_items .item:nth-child(3n + 2){ margin: 10px 20px 10px 20px; }
#top_items .item:hover { background-color: var(--main-bg-color-dark); }

#top_items .item .image { display: block; width: 100%; height: auto; margin-bottom: 10px; }
#top_items .item .image img { width: 100%; height: auto; -webkit-border-radius: 20px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius: 20px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-radius: 20px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }

#top_items .item .info { display: block; width: calc(100% - 20px); height: auto; padding: 10px; margin: 0px 0px 0px 0px; text-align: center; }
#top_items .item .info a.title { display: block; width: 100%; height: 24px; padding: 5px 0px; text-align: center; }
#top_items .item .info img { width: 90%; height: auto; max-width: 150px; text-align: center; }
#top_items .item .info .text { display: block; width: 100%; height: 44px; text-align: center; margin: 5px 0px; font-weight: 300; overflow: hidden; }

#top_items .item .cat { display: block; width: calc(100% - 20px); height: 20px; overflow: hidden; padding: 10px; margin: 0px 0px 10px 0px; text-align: center; font-weight: 300; }
#top_items .item .cat a { display: inline-block; padding: 1px 3px; font-size: 1.1em; background-color: var(--contrast-color); color: #FFFFFF; font-weight: 300; }
#top_items .item .date { display: inline-block; padding: 1px 3px; margin: 0px 0px 10px 0px; font-size: 1.1em; background-color: var(--contrast-color); color: #FFFFFF; font-weight: 300; }


#start_cats { }
#start_cats a { text-decoration: none; transition: 0.3s; }
#start_cats .item {
         display: block;
         float: left;
         width: calc(33.3333% - (40px / 3) - 20px);
         padding: 10px;
         margin: 10px 0px;
         background-color: var(--main-color);
         transition: 0.3s;
}
#start_cats .item:nth-child(3n + 2){ margin: 10px 20px 10px 20px; }
#start_cats .item:nth-child(even){ background-color: var(--main-color-dark); }
#start_cats .item:hover { background-color: var(--main-color-dark); }

#start_cats .item .image {
         display: block;
         width: calc(100% - 20px);
         height: 150px;
         padding: 10px;
}
#start_cats .item .image img { width: 64px; height: 64px; }

#start_cats .item .info {
         display: block;
         width: calc(100% - 20px);
         height: 150px;
         padding: 10px;

         font-size: 1.4em;
         color: #FFFFFF;
         text-align: left;
         font-weight: normal;
}

#start_cats .item .info b {
         font-size: 1.0em;
         color: #000000;
         text-align: left;
         font-weight: 700;
}
#start_cats .item:hover .info b { color: #ffffff; }
#start_cats .item:nth-child(even) .info { color: rgba(255,255,255,0.8); }
#start_cats .item:nth-child(even) .info b { color: #ffffff; }

#start_cats .item:hover:nth-child(even){ background-color: var(--main-color); }
#start_cats .item:hover:nth-child(even) .info { color: rgba(255,255,255,1.0); }
#start_cats .item:hover:nth-child(even) .info b { color: #000000; }


/* Artikel-Box */
.item_box {
         display: block;
         float: left;
         width: calc(25% - ((3*20px) / 4) - 0px);
         padding: 0px 0px;
         margin: 10px 20px 10px 0px;
         background-color: rgba(0,0,0,0.05);
         transition: 0.3s;
         cursor: pointer;
         font-size: 0.9em;
}
.item_box:nth-child(4n + 4){ margin: 10px 0px 10px 0px; border: 0px #00DF00 solid; }

.item_box:hover {
         background-color: #FFFFFF;
         -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
         -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
         box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
}

.item_box a { font-size: 1.2em; }

.item_box .image { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.item_box .image img { width: 100%; height: auto; -webkit-border-radius: 20px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius: 20px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-radius: 20px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }

.item_box .cat, .item_box .date { display: block; width: calc(100% - 20px); height: 20px; overflow: hidden; padding: 10px; margin: 0px; text-align: center; font-weight: 300; }
.item_box .cat a, .item_box .date b { display: inline-block; padding: 1px 3px; font-size: 1.1em; background-color: var(--contrast-color); color: #FFFFFF; font-weight: 300; }
.item_box .info { display: block; width: calc(100% - 20px); height: 100px; overflow: hidden; padding: 10px; margin: 0px; text-align: center; font-weight: 300; }
.item_box .info.bigger { height: 140px; }
.item_box .info a { display: block; margin-bottom: 10px; text-align: center; font-size: 1.1em; }
.item_box .cat, .item_box .info { border: 0px #000000 solid; }

#category_items .cat { display: none; }


/* Listings */
#listing {
         display: block;
         width: calc(100% - 2px);
         border: 1px rgba(0,0,0,0.05) solid;
}
#listing div[class^="list_"]{
         float: left;
         /*display: table; */
         width: calc((100% / 6) - 4px);
         border: 2px #FFFFFF solid;

         font-weight: 300;
         font-size: 0.9em;
}
#listing div[class^="list_"]:first-child { font-weight: bold; }

#listing.s2 div[class^="list_"]{ width: calc((100% / 3) - 4px); }
#listing.s3 div[class^="list_"]{ width: calc((100% / 4) - 4px); }
#listing.s4 div[class^="list_"]{ width: calc((100% / 5) - 4px); }
#listing.s6 div[class^="list_"]{ width: calc((100% / 6) - 4px); }

#listing .item {
         display: block;
         width: calc(100% - 20px);
         height: 16px;
         overflow: hidden;

         border-top: 1px rgba(255,255,255,1.0) solid;
         border-bottom: 1px rgba(0,0,0,0.05) solid;
         background-color: rgba(0,0,0,0.01);

         padding: 10px 10px;
         font-size: 0.9em;
}
#listing .item:nth-child(even){ background-color: rgba(0,0,0,0.05); }
#listing .item:nth-child(1){ height: 44px; } /* Platzierung */
#listing .item:nth-child(2){ height: 150px; } /* Bild */
#listing .item:nth-child(3){ height: 34px; font-weight: 700; } /* Name */
#listing .item:nth-child(4){ height: 44px; } /* Text */
#listing .item:nth-child(5){ height: 44px; } /* Bewertung */

#listing .item[data-tl-name="tl-preis"]{ height: 80px !important; } /* Preis */
#listing .item:last-child{ height: auto; }


#listing .item img { margin: 0px auto; width: 100%; height: auto; max-width: 150px; }
#listing .item .button { display: block; padding: 10px; text-align: center; border: 1px rgba(0,0,0,0.25) solid; }
#listing .item a { background-image: none; padding-right: 0px; }

#listing .list_item.highlight { border: 2px var(--main-color) solid !important; background: rgba(53,177,166,0.05); padding: 0px 0px; }
#listing .list_item .item { text-align: center; }
#listing .list_item .item b { font-size: 1.1em; font-weight: 700; }

#listing .list_item .item i { display: block; padding: 2px 3px; height: 16px; margin-bottom: 10px; font-size: 0.9em; background-color: transparent; font-weight: 300; text-align: center; }
#listing .list_item .item i.highlight { background-color: var(--contrast-color); color: #FFFFFF; }

.listing-info { display: none; text-align: center; color: rgba(53,177,166,1); padding: 10px 10px 5px 10px; font-size: 0.9em; font-weight: bold; }


/* Seitenanzeige */
#pages {
        display: block;
        width: calc(100% - 20px);
        margin:10px 10px 10px 10px;
        line-height:40px;
        text-align: center;
}

#pages a, #pages a:link, #pages a:visited, #pages .apage {
         display: inline-block;
         height:40px;
         width:40px;

         padding: 0px 0px 0px 0px;
         margin: 2px 2px;

         font-size: 1.1em;
         color: var(--font-color-dark);
         font-weight: bold;
         text-decoration:none;
         text-align: center;

         background-color: var(--main-bg-color);
         border: 2px var(--main-bg-color-dark) solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#pages a:hover {
         color: var(--main-color);
         background-color: #FFFFFF;
         border: 2px var(--main-color) solid;
}

#pages .apage {
         background-color: var(--main-color);
         border: 2px var(--main-color) solid;
         color: var(--font-color-light);
}

/* CDI-Reset Box */
#cdi_reset_info {
         display: block;
         width: calc(100% - 20px);
         margin: 10px 0px;
         padding: 10px 10px 10px 10px;
         background-color: var(--second-color);
         color: var(--font-color-light);
         -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
         border-radius: 20px;
         text-align: center;
}
#cdi_reset_info form { height: 50px; }

/* Tags */
#tags a {
         display: inline-block;
         border-radius: 5px;
         padding: 3px 6px;
         margin: 0px 10px 5px 0px;
         background: var(--main-bg-color);
         color: var(--font-color);
         font-weight: 700;
}
#tags.boxed:nth-child(odd) a { background: #FFFFFF; }

#tags a:hover {
         background: var(--main-color) !important;
         color: var(--font-color-light);
}

/* Shadow */
#shadow {
         display: none;
         position: fixed;
         top: 0px;
         left: 0px;
         right: 0px;
         bottom: 0px;

         z-index: 1000;
         background: rgba(0,0,0,0.5);

         width: 100%;
         height: 100%;
         cursor: pointer;
}
#shadow .icon.cross { cursor: pointer; float: right; margin: 10px; }
.noScroll { overflow: hidden; position: fixed; }

/* test */
#w {
         display: none;
         position: fixed;
         z-index: 100;
         right: 0px;
         bottom: 0px;
         color: #FFFFFF;
         padding: 5px;
         background: #BF0000;
}

/* Formulare */
form span { display: block; padding: 0px 10px; margin: 0px; text-align: left; }
input, select, textarea {
         border: 0px rgba(0,0,0,0.0) solid;
         background: #FFFFFF;

         font-family: 'Roboto Condensed';
         font-size: 1.0em;
         color: #000000;

         width: calc(100% - 20px);
         margin: 5px 0px;
         padding: 4px 10px 2px 10px;

         outline: none;

         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;

         -moz-box-shadow:    inset 2px 2px 3px rgba(0,0,0,0.2);
           -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
           box-shadow:         inset 2px 2px 3px rgba(0,0,0,0.2);
}
input[type="radio"], input[type="checkbox"] { width: 20px; }
input.error, select.error, textarea.error, .error { border: 2px #DF0000 solid !important; }

input[type="button"], input[type="submit"] {
        cursor: pointer;

         border: 0px #8bca11 solid;
         display: inline-block;

         font-family: 'Roboto Condensed';
         text-align: center;
         font-size: 1.2em;
         font-weight: bold;
         text-shadow: rgba(0,0,0,0.3) 1px 1px 0px;
         color: #FFFFFF;

         padding: 10px 15px 10px 15px;
         margin: 10px 0px 10px 0px;

        background: var(--main-color);

         -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow:    0px 3px 0px 0px rgba(0, 0, 0, 0.15);
        box-shadow:         0px 3px 0px 0px rgba(0, 0, 0, 0.15);
         text-decoration:none;

         border: 0px #FFFFFF solid;

         -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
}

input[type="button"]:hover, input[type="submit"]:hover {
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         color: #FFFFFF;
         background: #000000;
         text-decoration:none;
}

form input[type="checkbox"] { display:none; }
form input[type="checkbox"] + label { width: 50px; height: 20px; border-radius: 20px; border: 2px solid #ddd; background-color: #EEE; display: inline-block; content: ""; float: left; margin-right: 10px; transition: background-color 0.5s linear; margin-top: 0px; }
form input[type="checkbox"] + label:hover { cursor: pointer; }
form input[type="checkbox"] + label::before { width: 16px; height: 16px; border-radius: 16px; background-color: #fff; display: block; content: ""; float: left; margin: 2px 0 0 2px; transition: margin 0.1s linear; }
form input[type="checkbox"]:checked+label{ background-color: #23625c; }
form input[type="checkbox"]:checked+label::before { margin: 2px 0 0 32px; }

form input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 1em; }
form input[type="radio"] { width:auto; float:left; margin-right: .75em; background:transparent; border:none; }
form input[type="radio"]:checked, input[type="radio"]:not(:checked) { background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
form input[type="radio"] + label { cursor: pointer;  margin-top: -5px; }
form input[type="radio"]:checked + label::before, input[type="radio"]:not(:checked) + label::before { content:' '; display:inline-block; width: 20px; height:20px; position: relative; top:4px; border: 1px solid #bbb; background: white; margin-right: 1em; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1); }
form input[type="radio"]:checked + label::before, input[type=radio]:not(:checked) + label::before { border-radius: 30px; }
form input[type="radio"]:hover  + label::before { background:#ddd; box-shadow: inset 0 0 0 3px white; }
form input[type="radio"]:checked  + label::before { background: #0f8c7a; box-shadow: inset 0 0 0 3px white; }