@charset "UTF-8";
:root {
    --background-color: #fff;
    --background-color-light:#EAEDF2;
    --background-color-verylight:rgb(234,238,240);
	--background-color-trans: rgba(255,255,255, 0.35);
	--background-color-trans2: rgba(255,255,255, 0.9);
    --background-color-even: #eee;
    --background-color-cyan:#07A9CB;
    --link-color: #00824b;
    --text-color: hsl(0, 0%, 20%);
    --text-color-inverted:#000;
    --text-color-medium: hsl(0, 0%, 40%);
    --text-color-heading: hsl(0, 0%, 26.7%);
    --text-color-coolgray: hsl(240, 2.3%, 56.7%);
    --inverse-text-color: hsl(0, 0%, 100%);
    --inverse-link-color: #0b81d0;
    --box-shadow:inset rgba(255,255,255,1) 0px 0px 20px 10px;
    --light-shadow:rgba(0,0,0,0.15) 0 2px 5px;
    --nav-green: #007378;
    --nav-green-mid: #288285;
    --nav-green-light: #509191;
    --nav-green-dark:#00656a;
    --text-green: #007378;
    --text-green-mid: #509191;
    --text-green-light: #55b4b9;
    --dark-green: #265236;
    --light-green: #9EC673;
    --yellowgreen: #d4e880;
    --yellow: #d4e880;
    --dark-yellow: rgb(210,215,60);
    --cyan:#55b4b9;
    --light-blue:#d9f2f6;
    --orange:#F09A26;
    --light-orange:#f9b86e;
    --dark-grey:#5B5B5B;
    --mid-grey:#828282;
    --light-grey:#EAEDF2;
    --very-light-grey:#f7f8fa;
    --alert:rgb(212,77,128);
    --light-alert: rgb(246,185,213)
}

@media(prefers-color-scheme:dark) {
:root {
    --background-color: hsl(180, 20%, 15%);
    --background-color-light: hsl(180, 10%, 25%);
    --background-color-verylight:hsl(180, 10%, 22%);
    --background-color-trans: rgba(0,0,0, 0.35);
    --background-color-trans2: rgba(0,0,0, 0.8);
    --background-color-even: hsl(180, 10%, 25%);
    --background-color-cyan:#007E99;
    --link-color: #3eb080;
    --text-color: hsl(180, 0%, 85%);
    --text-color-inverted: hsl(0, 0%, 20%);
    --text-color-medium: hsl(0, 0%, 60%);
    --text-color-heading: hsl(120, 100%, 99.8%);
    --text-color-coolgray: hsl(240, 2.3%, 56.7%);
    --inverse-text-color: hsl(0, 0%, 100%);
    --inverse-link-color: hsl(206.7, 100%, 70%);
    --box-shadow:inset hsl(180, 20%, 15%) 0px 0px 20px 10px;
    --light-shadow:rgba(255,255,255,0.5) 0 2px 15px;
    --nav-green: #007378;
    --nav-green-dark:#00656a;
    --nav-green-mid: #288285;
    --nav-green-light: #509191;
    --text-green: #008d93;
    --text-green-mid: #279898;
    --text-green-light: #55b4b9;
    --dark-green: #265236;
    --light-green: #9EC673;
    --yellowgreen: #b9c86b;
    --yellow: #d4e880;
    --dark-yellow: rgb(210,215,60);
    --cyan:#55b4b9;
    --light-blue:#a7d9e0;
    --orange:#F09A26;
    --light-orange:#f9b86e;
    --dark-grey:#5B5B5B;
    --mid-grey:#828282;
    --light-grey:#EAEDF2;
    --very-light-grey:#f7f8fa;
    --alert:rgb(212,77,128);
    --light-alert: rgb(246,185,213)
    }
}

body
{
    margin: 0;
    padding: 0;
    font-family: 'ff-nexus-sans', sans-serif;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    background-color: var(--background-color);
    color: var(--text-color);
}
html {font-size: 110%;}

#gdpr-cookie-message {
	position:absolute;
	z-index: 1000;
	top:50px;
	background: rgba(255,255,255,0.9);
	padding: 5px 2vw;
	font-size: 90%;
	box-shadow: rgba(0,0,0,0.3) 0 03px 10px
	}

#gdpr-cookie-message button {
    display: inline-block;
    margin: 0 10px 0 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #4494cf;
    border-color: #4493cf;
}
#gdpr-cookie-message button:first-of-type {
    background-color: #5bc0de;
    border-color: #46b8da;
}
#gdpr-cookie-message ul li:first-child {
    display:none
}

#preloader {
    position: absolute;
    z-index: 1000000;
    text-align: center;
    display: none;
    top: 160px;

}
#preloader img {
    width: 32px; 

}
@media(min-width:992px){
    #preloader img {
    width: 32px; 
    margin-top: 11vw
}
}
@media(min-width:1600px){
    #preloader img {
    width: 32px; 
    margin-top: 170px
}
}
p {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'ff-nexus-mix';
    font-weight: bold;
    -moz-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

}
h1
{
    font-size: 1.8rem;
    margin: 15px 0 30px 0;
    color: var(--text-green);
}
/*main.container>h1 {margin-top: 20px}
@media(min-width:992px){main.container>h1 {
        margin-top: 2.5vw;
    
    }}
@media(min-width:1600px){main.container>h1 {
        margin-top: 40px;
    
    }}
*/
h2 {
    font-size: 1.8rem;
    color: #279898;

}
h3 {
    font-size: 1.5rem;
    margin: 20px 0;
    color: var(--text-green-light);

}
h4 {
    font-size: 1.2rem;
    color: var(--text-green-light);
    margin: 1rem 0 0.25rem 0;

}
h5 {font-size: 1.05rem;}
h6, p, ul, ol {font-size: 1rem;margin-bottom: 0.75rem;}
ul:not(.navbar-nav) li, ol li {margin-bottom: 0.75rem;}
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {margin-top: 1.5em}

table + p {margin-top: 1.5em}

p.announce {
    padding: 10px 0;
    font-weight: 600;

}
p.details.option {font-style:italic; color:var(--text-green) }
@media(prefers-color-scheme:dark) {
    p.details.option {color:var(--text-green-light) }
}
p.grey {color:  var(--mid-grey);}
hr {opacity: 1;color:var(--yellow);border-top-width: 2px }
hr.green {color:var(--text-green-light); }
hr.white {color:#fff; }
hr.wide {border-top-width: 4px}
div.col-*>hr {margin-top: 0}

table th,
table td {padding: 0.25em 0.5em 0 0;vertical-align:top;}
a, a:hover {
    color: var(--link-color);
    text-decoration: none;

}
a.int-link,a.int-link:hover {
    text-decoration: none;
    cursor: pointer;
    font-family: 'ff-nexus-sans';
    font-weight: bold;
    color: var(--text-green)!important;
}

a.ext-link {
    text-decoration: none;
    cursor: pointer;
    font-family: 'ff-nexus-sans';
    font-weight: bold;
    color: var(--text-green)!important;
    border-bottom:none!important;
}
a.ext-link:before {
    content:'\f360\2000';font-family: 'Font Awesome 5 Free'; font-style:normal!important
}


.small, small, figcaption {font-size: 85%;}
.xsmall, xsmall {font-size: 70%;}

img.text-icon {width: 1.2rem}
strong, .strong {font-weight: 600}
normal, .normal {font-weight:400}
light, .light {font-weight:200}
i, italic, .italic {font-style:italic}
ol.nolist {list-style-type:none; margin:0;padding: 0;}
.static {position:static!important}
.relative {position:relative!important}
.absolute {position:absolute!important}
.text-white {color: #fff!important}
.btn {border-radius: 3px; box-shadow: rgba(0,0,0,0.25)0 2px 5px}
.btn.btn-warning {color:#fff}
.btn-lg img {height: 38px;margin: 0px 25px 0 -10px;vertical-align: middle;}

.contact {font-weight: 600;cursor:pointer; white-space: nowrap;color:var(--inverse-link-color); }
.contact:hover {color:var(--inverse-link-color)}
svg.at-sign,img.at-sign {height: 0.85em;width: 1em;vertical-align: text-bottom;margin: 0 0 0.15em 0;padding: 0 2px;fill: var(--link-color);color:inherit}
.martop_-10 {margin-top: -10px!important}
.martop_-20 {margin-top: -20px!important;}
.martop_0 {margin-top: 0px!important}
.martop_5 {margin-top: 5px!important}
.martop_10 {margin-top: 10px!important}
.martop_20 {margin-top: 20px!important;}
.martop_30 {margin-top: 30px!important}
.martop_40 {margin-top: 40px!important}
.martop_60 {margin-top: 60px!important;}
.martop_80 {margin-top: 80px!important}
.marbottom_0 {margin-bottom: 0!important}
.marbottom_5 {margin-bottom: 5px!important}
.marbottom_10 {margin-bottom: 10px!important}
.marbottom_20 {margin-bottom: 20px!important}
.marbottom_30 {margin-bottom: 30px!important}
.marbottom_40 {margin-bottom: 40px!important}
.marbottom_60 {margin-bottom: 60px!important}
.marbottom_80 {margin-bottom: 80px!important}
.float-right {float:right}
.float-right .btn {margin-left:10px;}
img.float-right {margin:  2px 0 10px 20px;}
.float-left {float:left}
img.float-left {margin:  2px 20px 10px 0;}
img.img-fluid-50,
.img-fluid-33 {width:100%; height: auto;}
img.img-maxwidth200-300 {max-width:200px;}

input.p100_minus20 {
    width: calc(100% - 45px);
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;

}

.caption>span {/* margin-right: 10px; */display:inline-block;font-size: 90%;}


.fade_in {opacity: 0}

table.colored {color: #fff; width: 100%}
table.colored th,
table.colored td {padding: 5px; text-align: right;border: 1px solid #fff; border-width: 2px 0}
table.colored th:first-child,
table.colored td:first-child {text-align: left;}
table.colored.pink-cyan th {background:#FF4BC4;}
table.colored.pink-cyan td {background:#07A9CB;}
table.colored td.no-color {background:none; color: #333;padding: 1em 0;}
@media(min-width:360px){
	table.colored th,
	table.colored td  {padding: 5px 10px;}
}

@media(min-width:600px){
		table.colored {width: auto}
}


.dart-left {
    margin-top: 40px;
    margin-right: 0;
    margin-left: 20px;
    margin-bottom: 0;
}
.dart-left:before {
	display:inline-block;
	content:url(/images/pfeil-links.png);
	margin: 0 20px 0 -80px;
	vertical-align: middle;
	}
.dart-right {margin: 0px 0 0 20px}
.dart-right:after {
	display:inline-block;
	content:url(/images/pfeil-rechts.png);
	margin: 0 -80px 0 20px;
	padding: inherit0px;
	vertical-align: middle;
	}



/*#############################################################*/
/*### header ############################################*/
/*#############################################################*/

 header {
    height: 100px;
    position: relative;
    background: var(--background-color);
    margin-bottom: 20px;
}
body.home header,
body:not(.home) header {
    max-width:100vw
}

header>.container{position:relative}
header div.login {
    display:none;
    
}
.logo {
    left: 0px;
    top: 0;
    padding: 10px 0;
    margin-left: -15px;

}
 .logo img { 
    height: 50px;
    width: auto;
     margin: 5px
}
    @media(prefers-color-scheme:dark) {
        .logo {
            background: url(/images/new/bvkj-logo-dark.svg);
            background-repeat: no-repeat;
            background-size: 80px;
            background-position:  0px 10px
        }
        body:not(.home) .logo img {opacity:0}
    }
.stoerer-kinder {display:none}

.nav
{
    position: absolute;
    top: 80px;
    left: 0;
    padding-left: 0px;
    background: var(--nav-green);
    width: 100%;
    height: 50px;

}

nav.navbar[data-bs-theme="dark"] ul li a {
    font-family: 'ff-nexus-sans';
    font-weight: 200;
    font-size: 1.2rem;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 5px;
    margin-left: 20px;

}
nav.navbar[data-bs-theme="dark"] ul.dropdown-menu li a {
    font-size: 1.1rem;
    padding: 0 10px;

}

.navbar[data-bs-theme="dark"] .navbar-toggler {
    width: 100%;
    border: none;
    padding: 0;
    margin-top: -2.6px;

}

.navbar[data-bs-theme="dark"] .navbar-toggler span {
    float:right;
}
.dropdown-menu.show {background:none!important}
.dropdown-item:focus, .dropdown-item:hover {background: none;}

main>.sub {
    float: right;
    position: relative;
    margin: 15px 0 0 10px;
}
main>.sub.active {display:none}
div.logout {
    position: absolute;
    right: 10px;
    padding: 7px 10px 10px;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
    border-radius: 3px;
}
div.logout a {color: #000; margin: 0!important;line-height: 20px!important}

/*### smartphone nav ###########################*/
@media(max-width:991px){
    header {max-width:100%!important;}
    header div.login {
        display: block;
        position: relative;
        line-height: 50px;
        z-index: 2;
        float: right;
        margin-right: 40px;
        color: #fff;

    }
    header div.login a {
        color: #fff;  
    }

.navbar-collapse.collapse.show {
        background: var(--nav-green);
        /* padding: 10px; */
        z-index: 1;
        font-family: 'ff-nexus-sans';
        font-weight: bold;
        width: calc(100% + 13px);
        position: absolute;
        top: 51px;

    }
  .navbar-collapse.collapse.show ul { margin: 0}

  ul.navbar-nav li {margin: 0}
  ul.navbar-nav li a {
        font-size: 1.2rem!important;
        line-height: 3rem;
        color: #fff;
        background: none !important;
        border: none;
    }
    .nav-item.dropdown.active .dropdown-menu {
        /* display:block; */
        background: inherit;
        border-radius: 0px!important;
        background: #84c7ca;
    
    }
    .nav-item.dropdown.active {background: #00a3aa;}
    .nav-item.dropdown.active>.dropdown-menu li a {
        font-size: 1.1rem!important;
    }
    .nav-item.dropdown.active>.dropdown-menu .nav-item.dropdown.active {
        border-top: 1px solid #fff;
    }
    .dropdown-menu {border:none; padding: 0!important}
    .nav .navbar-text {
        display:none
    }
    ul.navbar-nav>.nav-item.dropdown:after {
        position:absolute;
        right: 30px;
        top: 14px;
        content:"\F231";
        font-family: "bootstrap-icons";
        font-size: 14px;
        color: #fff
    }
    ul.navbar-nav>.nav-item.dropdown:hover:after {
        content:"\F229";
    }
    .nav-item.dropdown:hover {display:block;background: #00a3aa;border:none!important}
    .nav-item.dropdown:hover>.dropdown-menu {display:block;background: #84c7ca;border:none!important} 
    .nav-item.dropdown:hover>.dropdown-menu li {
        border-bottom:none;
        border-top: 1px solid #fff;
    }
}
/* end smartphone nav */

header h1 {
    position: absolute;
    z-index: 1;
    padding: 0;
    top: 66px;
    font-size: 1.1rem;
    line-height: 50px;
    color: #fff;
    margin-left: -10px;

}	

    main.container {
    margin-top: 20px;

}
@media(min-width:600px){
   header h1 {font-size: 1.4rem;} 
}

@media(min-width:992px){
    header {
        height: 10vw;
        max-height: 160px;
        overflow: hidden;
        margin-bottom: 36px;
    
    }
  body.home header {
        height: 16vw;
        max-height: 260px;
        background-size: cover;
        background-position-y: -60px;
        position: relative;
        overflow: hidden;
        margin-bottom: 0;
    
    }

    header h1 {
        position: absolute;
        left: -15px;
        overflow: hidden;
        background: rgba(255,255,255,0.8);
        top: calc(11vw + 100px);
        font-size: 2rem;
        padding: 5px 20px;
        color: var(--dark-grey);
    
    }
    .logo {
        position: absolute;
        padding: 3vw 2vw;
        margin-left: 0;   
    }


     .logo img {
        height: 6vw;
        width: auto;  
    }
     .logo {
            background: url(/images/new/bvkj-logo.svg);
            background-repeat: no-repeat;
            background-size: 75%;
            background-position:  30px 3vw
     }
       .logo img {opacity:0}

    @media(prefers-color-scheme:dark) {
        .logo {
            background: url(/images/new/bvkj-logo-dark.svg);
            background-repeat: no-repeat;
            background-size: 75%;
            background-position:  30px 3vw
        }
    }

    @media(min-width:1600px){
         .logo {
            background-position:  30px 50px
        }
    }
    header .stoerer-kinder {
    right: 0;
    top:2vw;
    height: 6vw;
    width: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x:right;
    }    
    body.home header .stoerer-kinder {
    background-image:url(/images/new/logo-kinder-white.png);
    }    
    
/* navbar hover */
	.navbar .nav-item .dropdown-menu{
        display: none;
    
    }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{
        display: block;
    
    }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
    .navbar .nav-item.dropdown.active>.dropdown-menu{ display: block;}
    .navbar .nav-item.dropdown:hover>.dropdown-menu {z-index:100000}
/* navbar hover end */	
    
    .nav
    {
        position: absolute;
        top: 12vw;
        left: 0;
        padding-left: 0px;
        background: var(--nav-green);
        background-size: 50px;
        width: 100%;
        height: 100px;
        overflow: hidden;
    
    }
    body.home .nav,
    body.standard .nav{
         height: 50px;
         overflow: visible;
    }
	    nav.navbar {
        height: 50px;
        padding-left: 18px !important;
    }

    footer     nav.navbar {
        height: 50px;
        margin-left: -70px
    }

    nav.navbar[data-bs-theme="dark"] ul li a {
        line-height: 50px;
        font-size: 1.85vw;
    }
    @media(min-width:1200px){
     nav.navbar[data-bs-theme="dark"] ul li a {
        font-size: 22px
    }
       
    }
    nav.navbar[data-bs-theme="dark"] ul li a:hover {color: var(--yellow);}
    nav.navbar[data-bs-theme="dark"] ul>li a.active,
    nav.navbar[data-bs-theme="dark"] ul>li a.show {
        background-color: var(--nav-green-dark)!important;
        outline: none!important;
        color: var(--yellow); 
    }
    body.home nav.navbar[data-bs-theme="dark"] ul>li a.active,
    body.home nav.navbar[data-bs-theme="dark"] ul>li a.show {
        background: none!important;
    }

     nav.navbar[data-bs-theme="dark"] .dropdown-menu li.active a {
        outline: none!important;
        color: var(--dark-yellow); 
    }
      nav.navbar[data-bs-theme="dark"] .dropdown-menu li.sub.active a {
        outline: none!important;
        color: rgba(255,255,255,0.5) 
    }

        nav.navbar[data-bs-theme="dark"] .dropdown-menu.show li a {
        background: none!important;
    }
    /* subnavbar nur eine Ebene */
    #navbarNav>.navbar-nav>.nav-item.dropdown>.dropdown-menu>.subnavbar.show {
        width: 200vw;
        height: 50px;
        background: var(--nav-green-light);
        float: left;
        position: absolute;
        left: -100vw;
        z-index: -1;
        box-shadow: rgba(0,0,0,0.35) inset 0px 7px 7px;
    
    }
     .subnavbar.sub {
        width: 50vw;
        margin-top: 0px;
         margin-left: -50vw;
  
    }

    ul.dropdown-menu {background: none;border:none;padding:0;width:100vw;margin-left:-15px;margin-top: 0!important;}
    ul.dropdown-menu li {
        display: inline-block!important;
        /* background: var(--nav-green-mid); */
        line-height: 40px;
        padding: 0 5px;
    }    
    
     ul.dropdown-menu li.sub {
        margin-left: 30px 
    }
    .navbar-text{
        display: block;
        position: absolute;
        right: 20px;
    
    }
    .navbar-text ul li a,
    .navbar-text ul li span.name {font-size: 1rem!important;margin: 0 10px; cursor:pointer}

    main.container {
        margin-top: 30px;   
    }
    body:not(.home) main.container{
        margin-top: 100px;
    
    }
}

@media(min-width:1200px){
     header {background-position-y: -70px; }
}
@media(min-width:1400px){
   header {background-position-y: -80px; }    
    .nav {
        top: 12vw;   
    }
}
@media(min-width:1600px){
    .logo {
        padding: 50px 30px;
    
        margin-left: 10px;
    }
    .logo img {
        height: 97px;
    
    } 
    .nav {
        top: 194px;
    
    }
    header h1 {
        top: 280px;
    
    }
    header .stoerer-kinder {
        right: 0;
        top: 32px;
        height: 95px;
    }    
}

/*### Bootstrap styles mod ########################################*/
.row>*>.row>* {margin-top: 0!important}
@media(max-width:991px){
	.container {max-width: 100%}
}
@media(min-width:992px) {
    main.container,
    header .container,
    header .container, 
    nav {
        max-width: 1400px!important;
        padding: 0 40px!important;
    }
    .container.filter {
        max-width: 1400px!important;    
    }

}
.tooltip.custom-tooltip {--bs-tooltip-font-size: 0.75rem;margin-bottom: 7px!important;--bs-tooltip-bg:var(--dark-yellow);--bs-tooltip-color: #000;--bs-tooltip-opacity: 1;--bs-tooltip-max-width:inherit!important;width:inherit!important;}
.tooltip-inner {
    max-width: 200px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
    box-shadow:rgba(0,0,0,0.5)0 3px 5px;
}

h3.popover-header {
  padding: 0 0.75rem;
  margin: 0.5rem 0 0 0;
  background-color: transparent;
  border-bottom: none;
  font-family: ff-nexus-sans;
}
.popover-body {font-size: 0.8rem}
/*##################################################################*/
/*### linke Spalte ############################*/
/*##################################################################*/

@media(min-width:992px){
.linke-spalte {padding-right: 20px;}
}
.linke-spalte>div {margin-bottom: 16px;}
@media(min-width:992px){
    .linke-spalte>div {margin-bottom: 30px;}   
}

div.infobox {padding: 30px 30px 10px 30px;background: var(--yellow); color:#333}
div.infobox h2 {color: var(--text-green) }

div.overview {
    margin: 0 5px 30px 5px;
}

div.overview h2 {
    margin-top: 1rem;
}
    div.overview>.row>div {
    border-bottom: 1px dotted #007378;
    position: relative;
    padding-bottom: 50px;
    margin: 0 10px;
}
@media(min-width:992px){
    div.overview>.row>div {
        margin: 0 10px;
        width: calc(50% - 20px);
        padding: 0 0 50px 0;
    }
    div.overview>.row>div .btn {
        right: 5px;

    }
 
}

div.overview .btn {position: absolute; bottom: 15px; right: 25px; margin: 0}


.accordion {--bs-accordion-border-color:none;}
.accordion-header {
    margin: 0px 0 3px 0;
    line-height: 10px

}
.accordion-button {
    font-family: 'ff-nexus-mix';
    font-weight: bold;
    background-color: var(--cyan)!important;
    color: #fff!important;
    padding: 10px;

}

.accordion-button::after {
    background-image:none!important;
    content: '–';
    font-size: 1.2rem;
    line-height: 0.9rem;
}
.accordion-button.collapsed::after {
    background-image:none!important;
    content: '+';
    line-height: 1.2rem;
    margin-right:-10px
}

.accordion-flush>.accordion-item>.accordion-collapse {
    border: 1px solid #666;
    border-top: none;
    margin: -3px 0 10px 0
}

@media(prefers-color-scheme:dark) {
    div.overview {background:#444; padding: 20px 30px 0; margin-bottom: 30px}
    .accordion-body {background:#444; color: #fff}
}

div.login-text {
    color: #333;
    margin: 10% auto;
    width: 95%;
    padding: 15px 25px 0 25px;
    border: 2px solid var(--nav-green);
    background: var(--light-grey);
    border-radius: 5px;
    box-shadow: var(--background-color-trans) 0px 5px 10px
}
@media(min-width:600px){
    div.login-text {
    width: 75%;
}
}
/*##################################################################*/
/*### rechte Spalte BVKJ Content #################################*/
/*##################################################################*/


.feijoa {background-color: #9ed179 !important;}
.morningglory {background-color: #a7d9e0 !important;}
.primrose {background-color: #d4e880 !important;}
.yellowgreen {background-color: #d4e880 !important;}

.cranberry {color: var(--alert)};
}

.teaserbox img {max-width: 100%!important;width:100%;height:auto}
.teaserbox {
    margin: 0 0 8px;
    overflow: hidden;
}
.teaserbox img {width:100%; height:auto}
@media(min-width:992px){
.teaserbox {
    margin: 0 0 36px;
    overflow: hidden;
}
    
}
.teaserbox .textwrapper {padding: 20px;}
.teaserbox .textwrapper  h1 {font-size: 1.5rem;color:var(--nav-green) }
.teaserbox .textwrapper  h2 {
    font-size: 1.5em;
    margin: 0.75rem 0;
    color: var(--text-green)
}
.teaserbox .textwrapper  h3 {
    font-size: 1.3em;
    margin: 0.75rem 0;
    color: #fff;
}
.teaserbox .textwrapper  p {color: #000}

.teaserbox .textwrapper .rightalign .button,
.btn.is-right {
float:right;
}

.btn.btn-primary {
    background-color: var(--light-grey);
    color: #666;
}
.btn.btn-primary a {
    color: #666;
}
.btn.btn-sm {
    padding: 0.275rem 0.75rem;
    font-size: 0.9rem;

}
.btn.btn-lg {
    padding: 0.35rem 1rem;
    font-size: 1.1em;
}
.btn.help {
    margin: -3px 10px 0 0;
    float: left;
    padding: 5px;
    font-size: 1.1rem;
    line-height: 1rem;
    background-color: var(--nav-green-light);
    border-color: var(--nav-green-light);
}
.btn.help + label.form-label {width: calc(100% - 50px);}
.btn.download {margin: 0}
@media(min-width:992px){
.btn.download {
    margin: 10px 0;
}
}
/* Anpassung BVKJ-Buttons an Bootstrap Buttons */

.btn,.button {
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.25)0 2px 5px;
    padding: 0.275rem 0.75rem;
    font-family: 'ff-nexus-sans';
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5rem;
    color: #fff;
    display: inline-block;
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--nav-green);
    border-color: var(--nav-green);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin: 5px 10px 30px 0;

}
  .btn:hover,.button:hover {
    color: #fff;
    text-decoration: none;
    background-color: var(--nav-green);
    border-color: var(--nav-green);
  }

.btn:hover a,.btn a, .button a {
    color: #fff;
}
.btn:active, .btn:focus{background:var(--nav-green)!important;border:var(--nav-green);color:#fff!important;}

/*##################################################################*/
/*### Forms ########################################################*/
/*##################################################################*/
h4.admin {
    display: block!important;
    margin: 0.5rem 0;
    font-size: 1.1rem;

}
body.standard h4.admin {
    display:none!important;
}

input:invalid {border-color: red}
.form-control,.form-select {color: #444!important}
.pflicht {
    background-color: var(--light-blue);
    background-color: #dbe283;
    padding: 5px 2px;
    margin: 5px 0;
    color: #333;
}
.pflicht .form-check .form-check-input {margin-left: -1rem; margin-right: 0.5rem}
.pflicht .form-check .form-check-input[name='einverstaendnis']+label {display:block}

@media(prefers-color-scheme:dark) {
    .pflicht {
    background-color: #898c00;
    color: #fff;
    }
    .listcontent .pflicht {
    background-color: #dbe283;
    }
}

@media(min-width: 576px){
.row>div.no-pflicht {
        padding-left: calc(1.2rem + 0.5vw);    
    }
}
div:not(.form-check).alert {
    padding: 0
}
div.form-check.alert {
    padding-top: 0;
    padding-bottom: 0;
}
p.alert,div.alert2 {
    background: var(--light-alert);
    border-radius: 6px;
    font-weight: bold;
    color: #000;
}
div.alert2 p {padding: 10px;}
div.alert label,
label.form-label.alert,
label.form-label.alert a {
    padding: 0;
    color: var(--alert)!important;
}
h4.hinweis {margin:1rem 0}
.block.start {margin: 20px 0 0}
.block .row>div {margin: 10px 0 0}
.block .row>.row {padding: 0}

.search>form {padding: 0}
form.form-inline .form-group {width: 100%}
form.form-inline .form-group input {width: calc(98% - 40px);}
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.form-control,.form-inline {
    margin-right: 5px;

}
label.form-label {
    font-family: 'ff-nexus-sans', sans-serif;
    font-weight: bold;
    margin-top: 0.5rem;

}
.btn + label.form-label {margin-top:0}
label.col-sm-4.control-label {text-align:left;/* text-indent: 20px; */}

span.width10 {width: 10px;; display:inline-block; text-align: center}
span.width20 {width: 20px;; display:inline-block; text-align: center}
span.width30 {width: 30px;; display:inline-block; text-align: center}

select.form-select,
input.form-control,
textarea.form-control{
    background-color: var(--very-light-grey);
    color: var(--text-color);
    padding: 0.4em 0.55em;

}

.filterbox input.form-control{
    padding: 0.05em 0.25em 0.25em;
    margin: -5px 0 0.25em;
}
.filterbox div.intern {margin-bottom: 0.5rem;}
.filterbox div.intern label{
    margin: 0 0 0.25em;

}
.filterbox div.intern input{
}
.form-floating>.form-select,
.form-floating>.form-control,
.form-floating>.form-control-plaintext {
    padding: 0.25em 0.75em;
    height: 2.5rem;
    min-height: 2.0rem;
    margin: 0 0 20px 0;
    font-size: 1rem;

}
.form-floating label {
    line-height: 0.4rem;
    color:#777;
}
.form-floating>.form-select  {
    padding-top: 16px!important;

}
.form-floating.center input {
    text-align: center;
    line-height: 0.75rem!important;

}
.form-floating.center label {
    width: 100%;
    text-align: center;

}
.form-floating label::after {display:none}
.form-check:not(.filterbox .form-check) {margin: 5px 0}
input.form-check-input{background-color:var(--text-green);color:var(--text-color);border: 1px solid var(--text-green)}
input.form-check-input:checked {background-color:#e6962e;border: 1px solid #e6962e;color:var(--text-color) }
.form-check-inline {margin-right: 20px!important}

input.p2em {width: calc(2em + 12px);display: inline-block;vertical-align: middle;text-align:center}
input.p3em {width: calc(3em + 12px);;display:inline-block;vertical-align: middle;text-align:center}
input.p4em {
    width: calc(3em + 12px);
    display: inline-block;
    vertical-align: middle;
    text-align: center;

}
input.p20em_minus50 {
    width: calc(100%);
    max-width: calc(14em);
    display: inline-block;
    vertical-align: middle;
    text-align: center;

}


input.p10 {width: calc(10%);display:inline-block;vertical-align: middle;}
input.p15 {width: calc(15%);display:inline-block;vertical-align: middle;}
input.p15_minus10 {width:calc(15% - 10px); display:inline-block; vertical-align: middle}
input.p20 {width: calc(20%);display:inline-block;vertical-align: middle;}
input.p20_minus10 {width:calc(20% - 10px); display:inline-block; vertical-align: middle}
input.p25 {width:25%; display:inline-block;t; vertical-align: middle}
input.p25_minus10 {width:calc(25% - 10px); display:inline-block; vertical-align: middle}
input.p33 {width:33.3%; display:inline-block;t; vertical-align: middle}
input.p33_minus10 {width:calc(33.3% - 14px); display:inline-block; vertical-align: middle}
input.p37_minus10 {
    width: calc(37% - 10px);
    display: inline-block;
    vertical-align: middle;
}
input.p50 {width:50%; display:inline-block;t; vertical-align: middle}
input.p50_minus10 {width:calc(50% - 10px); display:inline-block; vertical-align: middle}
input.p60 {width:60%; display:inline-block;t; vertical-align: middle}
input.p65 {width:65%; display:inline-block;t; vertical-align: middle}
input.p70 {width:70%; display:inline-block;t; vertical-align: middle}
input.p75 {width:75%; display:inline-block;t; vertical-align: middle}
input.p75_minus10 {width:calc(75% - 10px); display:inline-block; vertical-align: middle}
input.p100 {width:100%; display:inline-block;t; vertical-align: middle}
input.p100_minus10 {width:calc(100% - 15px); margin-right: 5px; display:inline-block; vertical-align: middle}
input.p100_minus20 {width:calc(100% - 25px); margin-right: 5px; display:inline-block; vertical-align: middle}
input.p100_minus50 {width:calc(100% - 50px); margin-right: 5px;float:left}
input.p100_minus100 {width:calc(100% - 100px); margin-right: 5px;float:left}
textarea {height: auto;margin-bottom: 10px}
textarea#alter_datensatz_comment {height: 100px;}
textarea.p100_minus50 {width:calc(100% - 45px); margin-right: 5px;float:left}

:not(.form-floating)>input::placeholder {color: #bbb!important}


.buttons {padding-right:0}
.buttons .btn {margin-right: 0; padding: 0.275rem 0.75rem}
.buttons span.step,
.buttons i {margin: 0 10px; font-weight:bold}
@media (min-width:576px) and (max-width:660px){
    .buttons .btn {margin-right: 0; padding: 0.275rem 0.5rem}
    .buttons span.step,
    .buttons i {margin: 0;font-weight: bold}  
}


img.icon-plz {
    height: 35px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
    margin: 2px 5px 0 5px;
    padding: 5px 10px;
    background: var(--nav-green);
    box-shadow: rgba(0,0,0,0.25)0 2px 5px;
}
#plzlist .rm_plzbereich {margin: 2px 0}
#plzlist i.bi-trash {
    cursor: pointer;
    padding: 0px 5px 0 0;
}
#plz_status {margin-bottom: 0.5rem;font-style:italic }

.h-card {
    background: var(--background-color-light);
    padding: 10px 15px 15px;
    color: var(--text-color-medium);
    border-radius: 6px;
    margin: 0 0 20px 0;

}
@media(prefers-color-scheme:dark) {
    .h-card {color: #eee}
}
.h-card h4 {margin: 0.5rem 0 0.75rem}
.h-card .btn {
  margin-bottom: 5px
}

/*### Kontakt ###*/

.kontakt .btn.hide {
    border: none;
    background:none!important;
    box-shadow: none;
    padding: 0;
    color: #333!important;
    margin: 0;
    font-size: 1.3rem;
    cursor: text; 
}
.kontakt .block.nachricht {
    border: 1px solid #fff;
    padding: 0 15px 10px;
    background:var(--light-grey) 
}
.kontakt .block.nachricht * {color: #333}
.kontakt .plz {color: #333; font-weight:bold}
.kontakt .plz .trenner:after {content:', '}
.kontakt .plz .trenner:last-child:after {content:''}

/*##################################################################*/
/*### Anzeigen #####################################################*/
/*##################################################################*/

input#plz {text-align:center}
.container.filter {
    position: relative;

}
.filterbox {
    background: var(--dark-yellow);
    border-radius: 8px;
    padding: 10px 5px 10px 10px;
    color: var(--dark-grey);
    margin-bottom: 10px;
    font-family: 'ff-nexus-mix';
    font-weight: bold;
    overflow: hidden;

}
@media(min-width:768px){
.filterbox .col-md-3.sm {width:28%}
}
@media(min-width:992px){
.filterbox .col-md-3.sm {
        width: 23%;
    
    }
}

.filterbox h3 {
    margin: 0;
    font-family: 'ff-nexus-mix';
    font-weight: bold;
    color: var(--dark-grey);
    font-size: 1.1rem;

}
.filterbox hr wbr {break-after:always}
.filterbox h4{font-family: 'ff-nexus-mix', serif;font-weight: bold;}
.filterbox.expand .form-check {
    font-size: 0.9rem;
    flex: none;

}
.filterbox div.bbot {
    border-bottom: 1px solid #fff

}
.filterbox .form-check-inline label {font-size: 0.9rem}
body.jobboerse  .filterbox:not(.admin) .form-check-inline {
        width: 100%;
    }

@media(min-width:600px){
    .filterbox.expand .form-check {
    font-size: 0.9rem;
    flex: none;
    width: 50%; float:left
}

}
@media(min-width:768px){
body.jobboerse  .filterbox .form-check-inline {
        display: block;
        margin-right: 0!important;
        width: 50%;
        float: left;
    
    }
body.jobboerse  .filterbox.admin .form-check-inline {
        width: 100%;
    }
    .filterbox.expand .form-check {width: 33.3%; float:left}
}
@media(min-width:992px){
   body:not(.jobs) .filterbox h3 span.break::after {
    content: '\A';
    white-space: pre;    
}
    .filterbox.expand .form-check {
    white-space: nowrap;
    float:none;
    width:100%
}

}
@media(min-width:1200px){
   body.jobs .filterbox h3 span.break::after {
        content: '\A';
        white-space: pre; 
    }
}

.filterbox:not(.expand)>div {
    padding: 5px;
}
.filterbox.expand h4 {
    margin-left: -10px;
    color: var(--dark-grey);
        margin-top: 0;
}
.filterbox.expand .bbot {
    margin-bottom: 10px
}
@media(min-width:992px){.filterbox.expand h4 {
        border-bottom: none;
        line-height: 30px;
        font-size: 1.1rem;
    
    }}
.filterbox.expand .close {display:none;}
.filterbox.expand .close:after {
    content: '+';
    font-size: 1.2rem;
    line-height: 1rem;
    display: block;

}
.filterbox.expand .close.hide:after {
    content:'–';
}

.filterbox.expand.show {
    height: auto;
    box-shadow: 0 3px 5px rgba(0,0,0,0.15);
    z-index: 10;

}

.filterbox .download {display:none}

/*. Admin Suche */
.filterbox:not(.admin) .admin {
       display:none    
    }

@media(min-width:992px){
    .filterbox {
        height: 200px;
    
    }
     .filterbox.wide {
        height: 160px;   
    }
     .filterbox.wide:not(.admin) {
        height: 140px;   
    }
   .filterbox.expand {position:absolute;width: 100%;}
    .filterbox.expand .close {
        display: block;
        position: absolute;
        right: 8px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        padding-left: 5px;
        border: 2px solid var(--nav-green);
        border-radius: 50%;
        background: var(--nav-green);
        color: #fff
    }
    .filterbox .download {
        text-align: center;
    }
}

table#anzeige {
    width: calc(100% - 10px);
    margin: 0 auto;

}
table#anzeige.intern {
    width: 100%;
}

table#anzeige thead {
    font-family: 'ff-nexus-mix';
    font-weight: bold;
    color: var(--text-color-medium);
    border-bottom: 4px solid var(--cyan);
    font-size: 1.2rem;

}
table#anzeige thead .sort.active {
    font-family: 'ff-nexus-mix';
    font-weight: bold;
    color: var(--text-green-light);
}
table#anzeige th,
table#anzeige td {
    padding: 10px;
    font-weight: bold;
}
table#anzeige td {
    border-bottom: 3px solid var(--yellow);
    font-weight: normal;
    vertical-align: middle;
    line-height: 1.5rem;

}
table#anzeige tr th.datum,
table#anzeige tr td.datum {
    display: none!important;

}
table#anzeige h5 {
    margin: 1rem 0 0 0;
    color: #333;

}
table#anzeige h5:first-of-type {
    margin: 12px 0;

}
table#anzeige tr.liste td.edit,
table#anzeige tr.liste td.delete{
    padding: 0;
    margin: 0;
}
table#anzeige tr.liste td.delete {
    position: relative;
    overflow: visible;

}

table#anzeige tr.liste td.edit {width:50px; padding-right:5px}
table#anzeige tr.liste td.edit .btn,
table#anzeige tr.liste td.delete .btn {
    background-color: var(--orange);
    border-color: var(--orange);
    color: #fff;
    font-size: 1rem;
    margin: 0 5px;
    padding: 5px 10px;
    line-height: 5px;
    /* z-index: -1; */

}
table#anzeige tr.liste td.delete .btn {
    background-color: var(--alert);
    border-color: var(--alert);
}
table#anzeige tr.liste td.delete .btn:hover,
table#anzeige tr.liste td.edit .btn:hover {
    background-color: var(--nav-green);
    border-color:  var(--nav-green);
}
.popup {
    display: none;
    position: absolute;
    z-index:100000;
    background: var(--background-color-trans2);
    border: 1px solid #dedede;
    box-shadow: rgba(0,0,0,0.25)0 2px 10px;
    padding: 10px 10px 15px 10px;
    width: auto;
    border-radius: 5px;
}

.popup.delete{
    top: -10px;
    right: -55px;
    width: 240px;
    text-align: center;

}
div.show + div.popup.delete {display:block}

table#anzeige tr.liste td.delete div.popup.delete span.back {
    display:inline-block;
    margin-top:5px;
    color: var(--text-green-mid);
    cursor:pointer;
}
table#anzeige tr.liste td.delete div.popup.delete span.back:hover {
    color: var(--text-green);
}
table#anzeige tr.liste td.delete div.popup.delete .btn {
    padding: 15px;
    cursor:pointer
}

table#anzeige tr td { vertical-align:top}

table#anzeige tr td.delete,
table#anzeige tr td.edit
{ padding-top: 8px!important;}

@media(min-width:380px) {
    table#anzeige tr th.datum,
    table#anzeige tr td.datum {
        display:table-cell!important    
    }
    table#anzeige tr th.plz,
    table#anzeige tr td.plz {
       max-width: 300px;

    }
}
table#anzeige tr.liste.active {
    background: var(--light-blue);
    border-bottom-width: 1px;
    color: #333;
    font-family: 'ff-nexus-sans';
    font-weight: bold;

}
.preview table#anzeige tr.liste.active {
    background: none;
    color: #333;
    background-color: var(--light-blue);
}
.preview table#anzeige tr.liste.active td.datum {
    padding-left: 1rem
}

table#anzeige tr.liste.active td {border-bottom: 1px solid #999;}
table#anzeige tr.inhalt:not(.show) {display:none}
table#anzeige .listcontent {
    padding: 10px 20px 1rem 10px;
    background: var(--light-blue);
    margin: -10px;

}
.listcontent h3 {color:var(--text-green)!important;margin:10px 0}
.listcontent h4,
.listcontent p {
    color: var(--text-color)!important;
    margin: 10px 0;

}
table#anzeige .listcontent h4,
.listcontent p {
    color: #333!important;
}
.listcontent .btn {
    margin: 5px 0 20px 0;
}
.listcontent .praxisbeschreibung {color: #333!important}
.listcontent .praxisbeschreibung .bilder {margin-left:-10px;}
.listcontent  .praxisbeschreibung .bilder img {
    max-width: 87vw;
    margin: 0 0 10px 10px;
    clear: right;

}
@media(min-width:992px){
.listcontent .column-flow{
    display:block;  
}
.listcontent .column-flow .column {width:50%;float:left; padding-right:10px }
}
.listcontent label {color:#333;}
@media(min-width: 400px){
    .listcontent  .praxisbeschreibung .bilder img {
    max-width:calc(50% - 12px);
	}
}
@media(min-width: 768px){
    .listcontent  .praxisbeschreibung .bilder img {
    max-height: 168px;
	}
}

@media(min-width:1200px){
    .listcontent .praxisbeschreibung .bilder {margin-left:-20px;}
    .listcontent  .praxisbeschreibung .bilder img {
    margin: 0 0 20px 20px;
    max-height: 200px;
    }
}

    @media(min-width:1400px){
    .listcontent  .praxisbeschreibung .bilder img {
    max-height: 226px;
    }
}

/*## Voransicht ####################################################*/

table#anzeige.intern {margin-bottom: 1rem}

table#anzeige.intern thead {
    font-family: 'ff-nexus-mix';
    font-weight: bold;
    color: var(--text-color-medium);
    border-bottom: 1px solid #999;

}
table#anzeige.intern th,
table#anzeige.intern td {
    padding: 10px 0;
    border-bottom: none;
}
table#anzeige.intern th.datum {
    width:160px;
    padding-left: 10px
}
table#anzeige.intern th.plz,
table#anzeige.intern td.plz{
    min-width:120px;
    padding-left: 1rem
}
table#anzeige.intern th.plz + th,
table#anzeige.intern td.plz + td {
    width:100%;
    padding-left: 1rem
}
table#anzeige.intern tr.liste {
    background:var(--light-blue);
    border-bottom: 1px solid #999;
    color: #333;
}
table#anzeige.intern tr.liste td {
    font-weight:bold;
}
table#anzeige.intern tr.liste td.datum {
    padding-left: 10px
}
table#anzeige.intern .listcontent {
    padding: 0;
    background: none;
    margin: 10px 0 0 0;
    border-bottom: 1px solid var(--cyan);
    /* background: var(--light-blue); */

}
table#anzeige.intern .listcontent * {    color: var(--text-color)
 }

form.preview div>em {margin: 0 0 0.75rem 0;display:inline-block;}
form.einstellen .pictures img,
form.preview .pictures img {max-height: 100px}
form.preview .listcontent h4 {
    color: var(--text-color);
    margin: 0.25rem 0 0.75rem;

}
form.preview .listcontent p {
    color: var(--text-color);
    margin: 0.25rem 0 1rem;

}

p.hinweis {
    font-weight: bold;
    color: var(--text-green)!important;
    margin:1rem 0!important;

}
.column-count {margin-top: 1rem}
.column-count .column{ 
    border: 1px solid #ccc; 
    padding: 15px; 
    margin: 0 0 10px 0;
}
div.column.single{
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0 0 10px 0;
    width:calc(100% - 10px)
}
div.column:empty {display:none}

@media(min-width:972px){
.column-count {
        margin: 1rem -10px 20px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    
    }
.column-count .column { 
    width: calc(50% - 10px);
    padding: 15px; 
    margin: 0 10px 10px 0;
}
}
.col-auto {width: auto;}
/*##################################################################*/
/*### Bilder Upload ################################################*/
/*##################################################################*/

.btn#upload_button {margin-bottom: 0}
.pictures {margin-bottom: 20px}
div.second.pictures:empty { 
    display:none!important;
}
.rm_attachment {
    width: auto;
    float: left;
    position: relative;
    padding: 0 10px;

}
.rm_attachment img {margin-top: 30px}
.rm_attachment .erase {
    position: absolute;
    cursor: pointer;
    width: calc(100% - 20px);
    text-align: center;

}


/*##################################################################*/
/*### Footer #######################################################*/
/*##################################################################*/

footer {
    background: var(--dark-green);
    min-height: 120px;
    margin-top:30px
}
footer>.container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 -20px;

}
@media(max-width:575px){
footer .stoerer-kinder {
    position: absolute;
    right: 5px;
    top: 15%;
    height: 18vw;
    width: 40vw;
    background: url(/images/new/logo-kinder-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 25%;
    background-position-x: right;
}
}
@media(min-width:576px){
footer .stoerer-kinder {
    position: absolute;
    right: -10px;
    top: 35%;
    height: 60px;
    width: 160px;
    background: url(/images/new/logo-kinder-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 25%;
    background-position-x: right;
}
}
@media(min-width:768px){
footer .stoerer-kinder {
    position: absolute;
    right: 15px;
    top: 25%;
    height: 80px;
    width: 160px;
    background: url(/images/new/logo-kinder-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 25%;
    background-position-x: right;
}
}
@media(min-width:992px){
    footer>.container {;
    margin: 0 50px;
}
}
@media(min-width:1400px){
    footer>.container {;
    margin: 0 auto;
        max-width:1260px
}
}
footer nav.navbar[data-bs-theme="dark"] ul>li a.active,
footer nav.navbar[data-bs-theme="dark"] ul>li a.show{
        background:none!important;
        outline:none!important;
    }
footer nav.navbar[data-bs-theme="dark"] ul>li a{
    line-height: 30px;
    font-size: 1.2rem;

}
footer nav.navbar[data-bs-theme="dark"] ul>li a.active,
footer nav.navbar[data-bs-theme="dark"] ul>li a.show{
        border-bottom: 2px solid rgba(255,255,255,0.5);
        outline:none!important;
    }

footer ul.dropdown-menu li {display:inline-block!important;background: none;line-height:20px;padding: 0 5px;}    
footer .dropdown-menu.show {
        background: var(--background-color-verylight);
        width: 50vw!important;
        margin: 0;
        margin-top: 0px;
        padding: 10px;
        border:none;
        text-align:center;
    }
@media(min-width:576px){
    footer .dropdown-menu.show {
        text-align:left;
        margin-left: -20px
    }

}

/*### Nutzungsbedingungen und Datenschutz ##########################*/

.datenschutz ol ul {
    margin: 10px 0 0 -1rem;
}

/*##################################################################*/
/*### Modal Popups #################################################*/
/*##################################################################*/

.modal-content {
    background-color: var(--light-grey);
    color: #444;
    box-shadow: rgba(0,0,0,0.5)0 5px 10px;

}
.modal-content .form-control,.modal-content .form-select {
    background-color: #fff;
    color: #444;
}
.modal-content label.form-label {margin-bottom: 0.1rem}
.modal-header, .modal-footer{border:none}
.modal-backdrop.show {opacity: 0.6}

/*plz modal */
@media(min-width:768px){
.modal-md {max-width:440px;}
.modal-lg {max-width:700px;}
}
.modal-header h1 {margin: 0}
.modal-body {padding-top: 0;}
.modal-content .btn {
    margin: 10px 0;
}.modal-footer .btn {
    margin: -10px 5px 0 5px;
}
.modal-footer a {color:#666;display:inline-block;margin: -5px 10px 5px 0}
.modal-footer a:hover {color: var(--text-green)}

.plz .modal-body .plz-map {text-align:center}
.plz .modal-footer {
    padding: 0 10px 15px 10px;
    margin-top: -10px;
    z-index: 10;
}

/* Fotos lightbox */
.modal.lightbox .carousel-inner {
    border-radius: 8px;
    box-shadow: rgba(0,0,0,0.5) 0 5px 10px
}
/* heller background */
.modal.lightbox .carousel-inner .carousel-item > div{
    background-color: var(--light-grey)!important;

}
.modal.lightbox .modal-content button,
.modal.lightbox .lightbox-carousel button {
    filter: invert(100%);
}

/* Suchfeld */
div.search {margin: 0 0 20px 0}
span.searchterm.wrapper {display:flex}
span.searchterm.wrapper:first-child{display:none; visibility:hidden}
#searchterm.daten {
    width: calc(84vw - 40px);
    min-width: calc(100% - 40px);
    display: inline-block;
    vertical-align: middle;
    margin-right: 1vw;

}
.ui-helper-hidden-accessible {display:none}
.ui-autocomplete-loading {
background: white url('/images/admin/ui-anim_basic_16x16.gif') right center no-repeat;
}

.ui-autocomplete {
background:#fff;
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
font-size: 10px!important;
box-shadow: rgba(0,0,0,0.5) 3px 3px 15px;
-moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 15px;
-webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 15px;
padding: 0px; 
width: calc(100% - 40px)!important; 
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}
body .ui-autocomplete {
  max-height: 300px;
  font-size: 14px!important;
  z-index: 1000;
}

.ui-autocomplete li {list-style-type:none; margin: 0; padding: 2px 5px;color:var(--text-color)}
.ui-autocomplete li:nth-child(odd) {background: #eee;background:var(--background-color);color:var(--text-color)}
.ui-autocomplete li:nth-child(even) {color:var(--text-color);background: var(--background-color-even);}
.ui-autocomplete li div {width: 20px; height: 12px;float:left;margin: 4px 5px 4px 0; border:1px solid #999}
.ui-autocomplete li .nitrat0 { background: #18d874; }
.ui-autocomplete li .nitrat1 { background: #07A9CB; }
.ui-autocomplete li .nitrat2 { background: #6F6AAE; }
.ui-autocomplete li .nitrat3 { background: #D55D9E; }
.ui-autocomplete li .nitrat4 { background: #fb0088; }
.ui-autocomplete li .haerte1 { background: #6AB42D; }
.ui-autocomplete li .haerte2 { background: #F7EA51; }
.ui-autocomplete li .haerte3 { background: #CC1417; }
.ui-autocomplete li div:hover:after {
content:"";
display:block;
position:absolute;
margin-left: 25px;
margin-top: -5px;
padding: 0 3px;
color