@charset "UTF-8";
/* CSS Document */

/* Typo */
body{font-family: 'Encode Sans';font-size: 1em;}
html, body {height: 100%;}
h1, h2, h3, h4, h5, h6{font-family: "Encode Sans"}
h1 {font-size: 2em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1em;}
h1.einzelhead{font-size: 1.6em; font-weight: bold;}
/* medium */
@media print, screen and (min-width: 40em) {
h1 {font-size: 2.5em;}
h2 {font-size: 2.1em;}
h3 {font-size: 1.7em;}
h4 {font-size: 1.5em;}
h5 {font-size: 1.2em;}
h1.einzelhead{font-size: 2em; font-weight: normal;}
}
/* large */
@media print, screen and (min-width: 64em) {
    .homehead { font-size: 3.2em; margin-bottom: 0.7em;}
}

/* Hintergrundfarben */
body {background-color: #706f6f;}
.navi, .homecontent{background-color: #ccc;}
.header{background-color: #ca0538;}
.listcontent, .listteaser {background-color: #990026;}
.pagecontent{background-color: #fff;}
.cookbgr{background-color: #01514f;}

/* Schriftfarben */
.header, .listcontent, .footer{color: #fff;}

.pagecontent h1, h2,h3, h4, h5 { color: #990026;}
.listcontent h1, .listcontent h2, .listcontent h3, .listcontent h4, .listcontent h5 { color: #fff;}
.listteaser h1, .listteaser h2, .listteaser h3, .listteaser h4, .listteaser h5 { color: #fff;}
.pagecontent a { color: #873953;}
.listcontent a { color: #fff;}
a:hover { color: #003136;}
.listcontent hr {border: 2px solid #fff;}
.pagecontent hr {border: 2px solid #990026;}

/* Header */
.header {height: 100px;}
.header .cell {padding-top: 20px;}
.tName {padding: 8px 0 0 20px; font-size: 1.2em;font-weight: 700;line-height: 120%;}
.langlink {padding-top: 8px;}
.langlink a{font-weight: 700; color: #ccc;}
.langlink a:hover {color: #fff;}
.arrowlink {border: 4px solid #ccc; font-size: 0; line-height: 0; height: 0; padding: 0; margin: 0; position: relative; bottom: 5px;}
.arrowlink {border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
.langswitch {background-color: #706f6f; font-size: 0.8em; border: none; color: #fff; padding: 8px; border-radius:50%; font-weight: bold; margin-top: 25px;}
.langswitchmob {background-color: #fff; font-size: 0.7em; border: none; color: #706f6f; padding: 8px; border-radius:50%; font-weight: bold;}

/* Navileiste */
.navi {height: 38px; border-bottom: 1px solid #990026; position: sticky; top: 0; z-index: 999;}

div.navbox{border-color: #000;}
div:hover.navbox{background-color: #333; height: 30px; color: #008278; border-color: #008278;}
.arrowmenu {border: 4px solid #000 inherit; font-size: 0; line-height: 0; height: 0; padding: 0; margin: 0 0 0 5px; position: relative; bottom: 3px;}
.arrowmenu {border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}

nav{height: 38px;}
nav a {color: #003136;}
nav .sub {background-color: #ccc;}
dropdown.menu > li.is-active > a {color: #008278 !important; }
nav li a:hover {color: #fff; background: #008278;}
nav li a:active {color: #000;}
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {border-top-color: #990026;}
.dropdown.menu > li.is-dropdown-submenu-item > a::after {border-top-color: #990026;}
.title-bar { padding: .25rem .5rem;}


/* Navileiste mobil */
.menu-icon::after {position: absolute; top: 0; left: 0;height: 3px; background: #000; -webkit-box-shadow: 0 7px 0 #000, 0 14px 0 #000; box-shadow: 0 7px 0 #000, 0 14px 0 #000;}
.title-bar {background: none; color: #000;}
.title-bar .menu-icon {margin-left: 0; margin-right: 0.5rem;}
.title-bar-title{color: #000;}
.top-bar, .top-bar ul{background-color: #abfef1;}
.top-bar{max-width: 300px;}
.menumob-left, .menumob-right {display: inline; width: 50%}
.menumob-right {text-align: right;}
ul.mobiles-menu {font-weight: bold;}
ul.mobiles-menu a {color: #003136;}

/* Content */
.listcontent h1, .pagecontent h1{position: relative; top: -10px;}
table, tbody {border: none;}
td {vertical-align: top;}
.listcontent a:hover{color: #54DF1B;}
.listteaser{padding: 2em 0 1em 0; color: #fff;}
.listteaser p {margin-top: 1em;}
.listteaser a{color: #fff;}
.pagecontent a:hover{color: #006F66;}
.listenteaser {padding: 12px 0 15px 0; font-weight: 700;}
.listcontent tr { border-top: 1px solid #fff; padding: 10px 0 20px 0; background:  #990026;}
.pagecontent tr { border-top: 2px solid #990026; padding: 10px 0 20px 0; background:  #fff;}
.listcontent td h2 {color: #fff;}
td a{color: inherit;}
.tabbild  {width: 230px;}
.tabbild img {width: 200px;}
img.iconbild {width: 80px; margin-left: 10px;}
h4.brcr {padding-top: 8px;}
.smallbox, .medibox {width: 100%;}
a.anchor { display: block; height: 1px; overflow: hidden; position: relative; top: -40px; visibility: hidden; }
.preis {font-size: 1.7em; color: #990026; font-weight: bold; }
a.verkauf, input.verkauf, .verkauf {background-color:#990026;  color: #fff; font-weight: 700;}
a:hover.verkauf {background-color: #E66838; color: #fff;}
a.vorschau {background-color:#0E277B;  color: #fff; font-weight: 700;}
a:hover.vorschau {background-color: #4965c1; color: #fff;}
.kaufpad {margin-top: 20px;}
.fragefeld, .antwortfeld {border-top: 2px solid #990026; padding-top: 0.8em; padding-bottom: 0.8em; }
.fragefeld {color: #990026; font-weight: 700; padding-right: 1.5em;}
.textbanner {padding: 12px 15px 0 0;}
.kurzinfobox {background-color: #ddd; padding-top: 0.6em; padding-bottom: 0.6em; margin-bottom: 1em;}
.kurzinfobox h4 {font-weight: bold; color: #fff;}
.kurzinfobox div p {margin-bottom: 0.3em;}
.kurzinfobox div img {margin-top: 8px;}
.klein{font-size: 0.8rem;}

.sbboard img{width: 67px; height: 90px; float: left; margin-right: 10px;}
.sbboard {background-color: #CA0538; font-size: 12px;}
.sbboard div {padding-top: 12px;}
.sbboardtitel h3{color: #fff;}
/* medium */
@media print, screen and (min-width: 40em) {
 .preis {font-size: 2.5em; }
}

/* Homepage */
.homehead {font-size: 1.8em; margin-bottom: 1em; font-family: 'Encode Sans Condensed'; font-weight: bold;}
.intro h2, .intro h3, .intro h4 {color: #fff; font-weight: bold;}
.homeboxhum { background-color: #2b53ad;}
.homeboxvet { background-color: #ed6939;}
.homeboxaka { background-color: #eb173b;}
.homeboxmemb {background-color: #01514f;}
.homeboxhum, .homeboxvet, .homeboxaka, .homeboxmemb { padding: 1.5em; margin: 2em 0 1em 0; border-radius: 1em; box-shadow: 10px 10px 7px #660017;}
.homeboxhum h3, .homeboxvet h3, .homeboxaka h3, .homeboxmemb h3 {font-size: 1.3em; color: #fff; font-weight: bold;}
img.iconbox  {width: 60px; height: 60px; margin: 7px 20px 10px 0;}
h2.homeboxtitel {font-size: 1.75em; font-weight: bold; color: #fff; margin-top: 0;}
.hlinkbtn {text-align: left; background-color: #416dcc;}
a:hover.hlinkbtn {color: #000; background-color: #a0bcf7;}
.vlinkbtn {text-align: left; background-color: #d84c1e;}
a:hover.vlinkbtn {color: #000; background-color: #f7b29b;}
.elinkbtn {text-align: left; background-color: #d30023;}
a:hover.elinkbtn {color: #000; background-color: #fcc2cc;}
.mlinkbtn {text-align: left; background-color: #002d2c;}
a:hover.mlinkbtn {color: #000; background-color: #8ECFD1;}
.homeboxhum .button, .homeboxvet .button, .homeboxaka .button, .homeboxmemb .button {margin-bottom: 0.3rem; pading: 0.6rem; font-weight: bold;}
.homeboxhum ul, .homeboxvet ul, .homeboxaka ul, .homeboxmem ul {margin: 0 0 0 0.5em;}
.linkbtnbox {margin-bottom: 1em;}
.homeboxmemb a {color: #fff;}
.hvideobox {margin-bottom: 1em;}

/* Startseite neu */

.ausbbox {position: absolute; top: 0; left: 0; right: 0; height: 300px; /* Feste Höhe für das Hintergrundbild */
    border-top-right-radius: 1em; border-top-left-radius: 1em; padding: 1.5em;
    background-size: cover; background-position: center; z-index: 1; }
.austextbox {position: relative; padding-top: 300px; /* Abstand unterhalb von boxkopf schaffen (Höhe + zusätzlicher Abstand) */ z-index: 2;}
.vetlinkbtn, .humlinkbtn {background-color: #fff; border-radius: 0,7em;}

/* small */
/* Startseite small */
.homebgr {background-image: url('/assets/img/homegrafikmob.jpg'); background-position: calc(50% - 100px) 0px; background-repeat: no-repeat; background-size: 900px 255px;}
.hometitel h1{font-size: 1.8em; padding-bottom: 2em;}
.hometext h2, .hometext h3{font-size: 1.15em;}
.listcontent, .pagecontent {padding: 2em 0 1em 0;} /* min-height: 400px; */

/* medium */
@media print, screen and (min-width: 40em) {
 h2.homeboxtitel {font-size: 2em;  margin-top: 0.5em;}   
img.iconbox  {width: 80px; height: 80px; margin: 0 40px 20px 0;}
h2.homeboxtitel { margin-top: -0.25em;}
.homehead {font-family: "Encode Sans"; font-size: 2.2em;}
.homebgr {background-image: url('/assets/img/homegrafik.jpg'); background-position: center 0; background-repeat: no-repeat; background-size: 1600px 800px;}
.hometitel h1{font-size: 1.8em; padding-bottom: 1em;}
.hometext h2, .hometext h3{font-size: 1.3em;}
.listhead1 h1{margin-top: -0.3em; font-size: 2.3em;}
}
/* large */
@media print, screen and (min-width: 64em) {
.homehead { font-size: 3.2em; margin-bottom: 0.7em;}
.initially-hidden {display: none;}
.homebgr {background-image: url('/assets/img/homegrafik.jpg'); background-position: center -120px; background-repeat: no-repeat; background-size: 2500px 750px;}
.hometitel h1{font-size: 2.6em; padding-bottom: 3em;}
.hometext h2, .hometext h3{font-size: 1.5em;}
.listcontent, .pagecontent {padding: 2em 0 1em 0;} /* min-height: 600px;  */
}

/* Accordion */
.accordion {backgrond: none; margin-top: 1em;}
.accordion-title {font-size: 1em; border: none; border-top: 2px solid #990026;  color: #990026; padding: 1.1rem 2.5rem 1.1rem 1rem; font-weight: bold;}
.accordion-content {font-size: 1em;}
.accordion-title a, .accordion-title a:active  {color: #873953;}
.accordion-title a:hover, .accordion-item a:hover {color: #003136;}
.accordion-item a {color: #873953;}

/* Footer */
.footer{margin-top: 30px;}
.footer a{color: #fff;}
.footlogo{width: 90px; height: 28px;} 

/* Cookiebanner */
#cookiepopup {text-align: center; background-color: #2e3990; color: #fff; position: fixed; bottom: 0; z-index: 9999; font-size:14px; line-height:20px; padding: 20px; width: 100%;}
#cookiepopup a {color: cyan;}

#cookiepopup.hidden {display: none;}

/* Image Overlay für Bildergalerie Bücher und Blog*/
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    cursor: pointer;
    overflow: auto; /* Ermöglicht das Scrollen, falls erforderlich */
}

#overlay img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}