html,
body {
width: 100%;
height: 100%;
}

button:focus {
outline: none;
}

a:focus {
outline: none;
}

.sr-only { 
position: absolute !important; 
height: 1px; width: 1px; 
overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ****************************** TAB FOCUS ****************************** */

/* Standardmäßig den Fokus-Rahmen bei Links und Buttons deaktivieren */
button:focus, a:focus {
outline: none !important;
}

/* Für alle interaktiven Elemente, die Tastaturfokus benötigen */
.user-is-tabbing a:focus,
.user-is-tabbing button:focus,
.user-is-tabbing [data-focus-visible-added] {
border: 2px solid red !important; /* Roter Rahmen für den Fokus */
outline: none !important;
}


.archiv_ausgabe_view:focus-visible {
border: 2px solid red !important; 
outline: none !important;
}


/* Entfernt den Fokus-Stil beim Mausklick */
.archiv_ausgabe_view:not(:focus-visible) {
outline: none;
}

/* Unterstützung für :focus-visible falls vom Polyfill unterstützt */
a:focus-visible,
button:focus-visible {
border: 2px solid red!important;
}

/* Zusätzlicher Fokus für Bilder in Links */
a img {
display: inline-block; /* Macht das Bild fokussierbar */
}

.user-is-tabbing a:focus img,
.user-is-tabbing a:focus-visible img,
[data-focus-visible-added] img {
border: 2px solid red !important; /* Roter Rahmen bei Tastaturfokus */
}

/* Optional: Weitere interaktive Elemente */
.user-is-tabbing input:focus,
.user-is-tabbing select:focus,
.user-is-tabbing textarea:focus {
border: 2px solid red !important;
}

.schalter_zuruecksetzen_seite:focus-visible i {
outline: 2px solid red;
border-radius: 50%;
}

select:focus-visible {
outline: 2px solid red;
}

a:focus-visible img {
outline: 2px solid red!important;
outline-offset: 2px!important;
}

input[type="checkbox"]:focus-visible {
outline: none; /* entfernt den Standard-Fokusrahmen */
box-shadow: 0 0 0 2px red; /* roter Rahmen-Effekt */
border: 2px solid red; /* falls du einen festen Rahmen willst */
}


/* ****************************** TAB FOCUS ****************************** */

body {
font-family: 'Outfit',arial;
background-color:#fbfaf8;
/* background: url(../images/bg_page.png); */
word-wrap:break-word; 
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
font-weight:400;
}

@media (min-width: 992px)  {
body {
word-wrap:break-word; 
-moz-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
}
}

.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}

.img-fluid.logo_page {
transition: transform 0.5s ease, opacity 0.5s ease; /* Transition effect for zoom and fade */
transform: scale(1); /* Initial scale */
}

/* Hover state */
.img-fluid.logo_page:hover {
transform: scale(1.01); /* Slight zoom effect */
}

@media (min-width: 576px) and (max-width: 768px) {
.logo_page {
width:70%;
height:auto;	
}
}

@media (min-width: 1px) and (max-width: 575px) {
.logo_page {
width:80%;
height:auto;	
}
}

/* *************** Header ************************ */

.myheader {
/* background-color:#faf0f3; */
background-color:#FFFFFF;
position: relative;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* height: 80vh; */ /* Uncomment and adjust as needed */
width: 100%;
overflow: hidden;
}


@media (min-width: 576px) and (max-width: 767px) {
.myheader {
background-image:url(../images/header_bergverliebt_mobile.jpg)!important;
position: relative;
background-position: center -100px !important;
}
}

@media (min-width: 1px) and (max-width: 575px) {
.myheader {
background-image:url(../images/header_bergverliebt_mobile.jpg)!important;
position: relative;
background-position: center top !important;
}
}

.triangle-shape-header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px; /* Höhe des SVG-Dreiecks */
pointer-events: none; /* Klicks durch das SVG hindurch lassen */
}

@media (min-width: 992px) and (max-width: 1600px) {
.triangle-shape-header {
height: 80px; /* Höhe des SVG-Dreiecks */
}
}

@media (min-width: 768px) and (max-width: 991px) {
.triangle-shape-header {
height: 60px; /* Höhe des SVG-Dreiecks */
}
}

@media (min-width: 1px) and (max-width: 767px) {
.triangle-shape-header {
height: 40px; /* Höhe des SVG-Dreiecks */
}
}


.myheader_spacer {
width:100%; /* wichtig */
/*
position: absolute;
top:45%;
left:50%;
transform:translate(-50%,-50%);
*/	
height:650px; /* Höhe Banner Header */
margin-top:100px;
}

@media (min-width: 768px) and (max-width: 991px) {
.myheader_spacer {
width:100%; /* wichtig */
height:550px!important; /* Höhe Banner Header */
margin-top:120px;
}
}

@media (min-width: 576px) and (max-width: 767px) {
.myheader_spacer {
width:100%; /* wichtig */
height:550px!important;
margin-top:70px;
}	
}

@media (min-width: 1px) and (max-width: 575px) {
.myheader_spacer {
width:100%; /* wichtig */
height:470px!important;
margin-top:70px;
}	
}	

/* ************* Spalte links *********** */

.header_linke_spalte  {

}

@media (min-width: 1px) and (max-width: 767px) {
.header_linke_spalte  {
display:none;
}	
}

.icon_schalter_booking {
margin-top:20px;
width:180px;
height:auto;
transition: transform 0.65s ease;
border: 0px solid red;
/* transform: rotate(55deg); */
}

@media (min-width: 768px) and (max-width: 991px) {
.icon_schalter_booking {
width:170px;
height:auto;
transition: transform 0.65s ease;
}
}

.icon_schalter_booking:hover {
transform: rotate(10deg);
}

.icon_datum p.tag {
color:rgba(255,255,255, 1)!important;
font-size:150px!important;
line-height:120px;
text-align:center;
font-weight:600;

/* text-shadow: 3px 0 4px rgba(0,0,0,0.6); */
}

.icon_datum p.jahr {
color:rgba(255,255,255, 1)!important;
font-size:60px!important;
line-height:70px;
text-align:center;
font-weight:300;
letter-spacing:5px;
/* text-shadow: 3px 0 4px rgba(0,0,0,0.6); */
}

.rotating-text {
display: inline-block;
transition: transform 1.5s ease-in-out;
}

.rotating-text:hover {
transform: rotateY(90deg);
}


@media (min-width: 768px) and (max-width: 991px) {

.icon_datum p.tag {
font-size:130px!important;
line-height:110px;
text-align:center;
font-weight:600;
margin-top:-7px;
}

.icon_datum p.jahr {
font-size:60px!important;
line-height:60px;
}

}

/* ************* Spalte mitte *********** */

.header_mitte_spalte  {

}

.header_mitte_spalte p.infotext_mitte {
margin-top:110px;
font-size:62px;
line-height:62px;
color:#FFFFFF;
font-weight:200!important;
text-align:center;
display:inline-block;
transform: rotate(-30deg); /* 30 Grad Drehung */
letter-spacing:-1px;
text-transform:uppercase;
}

@media (min-width: 768px) and (max-width: 991px) {
.header_mitte_spalte p.infotext_mitte  {
margin-top:120px;
font-size:40px!important;
line-height:45px!important;
}	
}

@media (min-width: 1px) and (max-width: 767px) {
.header_mitte_spalte p.infotext_mitte  {
margin-top:180px;
font-size:50px!important;
line-height:54px!important;
}	

}
/* ************* Spalte rechts *********** */

.header_rechte_spalte  {

}

.header_rechte_spalte p.infotext_rechts {
padding-top:50px;
font-size:32px;
line-height:35px;
color:#FFFFFF;
font-weight:300;
}

@media (min-width: 768px) and (max-width: 991px) {
.header_rechte_spalte p.infotext_rechts {
padding-top:50px;
font-size:24px;
line-height:33px;
}
}

@media (min-width: 1px) and (max-width: 767px) {
.header_rechte_spalte  {
text-align:center;
padding-top:20px;
}	

.header_rechte_spalte p.infotext_rechts {
padding-top:70px;
font-size:28px;
line-height:32px;
}

}


/* ************ Ende Header **************** */

h1,h2,h3,h4 {
letter-spacing:-0.5px;
font-weight:200; /* bei Russo One 400 */
/* text-transform:uppercase; */
word-wrap:break-word; 
-moz-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
word-spacing:2px;
}

h1 { 
font-size:70px;
line-height:70px;
margin-bottom:50px;
color:#786854;
letter-spacing:-0.5px;
}

h2 {
font-size:58px;
line-height:58px!important;
margin-top:20px;
margin-bottom:45px;
color:#786854;
text-align:center;
}

h3 { 
font-size:40px;
line-height:40px;
margin-bottom:20px;
color:#786854;
}

/* Überschrift Card Modalbox Galerie*/
h4 { 
font-size:23px;
line-height:25px;
text-align:left!important;
color:#786854;
font-weight:400!important;
letter-spacing:0px;
display:inline-block;
padding:0px 20px 0px 0px;
}

@media (min-width: 1px) and (max-width: 991px) {

h1 {
font-size:40px!important;
line-height:40px!important;
margin-top:0px!important; /* Abstand zum Navi Schalter */
}

h2 {
font-size:36px!important;
line-height:38px!important;
}

h3 {
font-size:34px!important;
line-height:36px!important;
}

h4 {
font-size:22px!important;
line-height:25px!important;
}

}

p, li {
font-size:23px;
line-height:31px;
font-weight:200;
letter-spacing:0px;
color:#786854;
-moz-hyphens:none!important;
-webkit-hyphens:none!important;
-ms-hyphens:none!important;
-o-hyphens:none!important;
hyphens:none!important;
margin-bottom:20px!important;
}

@media (min-width: 1px) and (max-width: 991px) {
p, li {
/*
font-size:19px;
line-height:30px;
*/
}	
}


i {
font-style:italic;	
}

ul.liste_rot {
list-style-type: disc;
padding-left:28px;
}

.liste_rot li::marker {
color: #a54d62;
font-size: 1.4em;
}


a, a:link {
  color: #ab142d !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important; /* dünnere Linie */
  text-underline-offset: 4px; /* Abstand etwas schöner */
}

a:link:hover {
color:#ab142d!important;
text-decoration:none!important;		
}

/* Downloadlink bus PDF */
a.download_link,
a.download_link:link {
display:inline-block;
background-color:#000000;
color:#FFFFFF!important;
padding:10px 15px 10px 15px;
font-size:23px;
line-height:25px;
font-weight:700;
text-decoration:none!important;
margin-bottom:20px;
}

a.download_link:hover {
color:#f3db0f!important;
text-decoration:none!important;
}

.skill_passus {
padding-left:15px;
border-left:1px solid #000000;
}


.device_spacer_left {
padding-left:50px;
}

@media(max-width:767px) {
.device_spacer_left {
padding:0px!important;
text-align:center
}
}

.arrow {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid black;
margin: 50px auto; /* Zentriert den Pfeil horizontal auf der Seite */
}

.my_bild {
border: 5px solid #FFFFFF;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}


a.download_praesentation,
a.download_praesentation:link {
color:#a54d62!important;
margin-top:8px;
font-weight:300;
}

@media(max-width:575px) {
a.download_praesentation,
a.download_praesentation:link {
font-size:19px!important;
}
}

/* *************** Öffnungszeiten ************************ */

.spacer_oeffnungszeiten {
margin-bottom:40px;	
}

.box_oeffnungszeiten {
margin-top:10px;
margin-bottom:10px;
white-space: nowrap; /* Elemente bleiben nebeneinander */
}

.oeffnungszeiten-wrapper {
overflow-x: auto;   /* horizontal scrollen */
overflow-y: hidden; /* keine vertikalen Scrollbalken */
-webkit-overflow-scrolling: touch; /* weiches Scrollen auf iOS */
scrollbar-gutter: stable both-edges;
}

.oeffnungszeiten-wrapper::-webkit-scrollbar {
  height: 6px; /* dünner */
}

.oeffnungszeiten-wrapper::-webkit-scrollbar-thumb {
  background: rgba(210,20,32,0.7);  
  border-radius: 3px;
}

.offen_tag {
display:inline-block;	
padding:7px 16px 7px 16px;
/* background-color:#faf9f5; */
margin:0px 6px 15px 6px;
border:1px solid #b7b6b7;
border-radius:15px;
/* box-shadow: 0 32px 36px rgba(0,0,0,0.04); */
}

.offen_tag p {
margin:0px!important;
line-height:29px;
}

.tag_heute {
display:inline-block;	
background-color:#4F800A;
background-image:url(../images/bg_apo_offen.jpg);
border:1px solid #75b121;
color:#FFFFFF!important;
/* box-shadow: 0 32px 36px rgba(0,0,0,0.04); */
}

.tag_heute.ja_gruen { /* tag heute und offen in der range, dann grün */
display:inline-block;	
background-color:#4F800A!important;
background-image:url(../images/bg_apo_offen.jpg)!important;
border:1px solid #75b121!important;
color:#FFFFFF!important;
/* box-shadow: 0 32px 36px rgba(0,0,0,0.04); */
}

.tag_heute.nein_rot { /* tag heute und geschlossen in der range, dann rot */
display:inline-block;	
background-color:#ab142d;
background-image:inherit;
border:1px solid #ab142d;
color:#FFFFFF!important;
/* box-shadow: 0 32px 36px rgba(0,0,0,0.04); */
}

.offen_tag.ja_notruf { /* tag heute und offen in der range, dann grün */
display:inline-block;	
background-color:#4F800A!important;
background-image:url(../images/bg_apo_offen.jpg)!important;
border:1px solid #75b121!important;
color:#FFFFFF!important;
/* box-shadow: 0 32px 36px rgba(0,0,0,0.04); */
}

.offen_tag.ja_notruf p,
.offen_tag.ja_notruf a,
.offen_tag.ja_notruf a:link { /* tag heute und offen in der range, dann grün */
display:inline-block;	
color:#FFFFFF!important;
/* box-shadow: 0 32px 36px rgba(0,0,0,0.04); */
}

.offen_tag.tag_heute a,
.offen_tag.tag_heute a:link,
.offen_tag.tag_heute p,
.offen_tag.tag_heute p strong {
color: #FFFFFF!important;
}

/* hat die Apo geöffnet von der Zeit her */

.status_offen {
background-color:#4F800A;
background-image:url(../images/bg_apo_offen.jpg)!important;
display:inline-block;
color: #FFFFFF!important;
padding: 0px 13px 2px 13px;
border-radius:15px;
margin-left:5px;
margin-right:5px;
}

.status_geschlossen {
background-color:#ab142d;
display:inline-block;
color: #FFFFFF!important;
padding: 0px 13px 2px 13px;
border-radius:15px;
margin-left:5px;
margin-right:5px;
}



/* *************** BG Container ************************ */

.bg_black {
border-top:0px dashed #FFFFFF;
background-position: center center;
background-size: 100vw auto;
}

.bg_black p {
color:#FFFFFF!important;
}

.bg_weiss {
/* background-color:#FFFFFF!important; */
/* background: url(../images/bg_weiss.svg); */
/* background-position: center center; */
/* background-size: 100vw auto; */
}

.bg_weiss p {
color:#caba9c!important;
}


@media (min-width: 1px) and (max-width: 991px) {
.bg_black,.bg_weiss
{	

}
}


/* *************** Startinformationen **************** */

.startinformationen_rund {
border-radius:50%;
border:10px solid #FFFFFF;
/* border: 10px solid rgba(165,77,98, 0.5); */
width:350px;
display: block;
margin: auto;
margin-bottom:50px;
margin-top:-330px;
box-shadow: 0 20px 20px rgba(0,0,0,0.08)
}

@media (min-width: 992px) and (max-width: 1250px) {
.startinformationen_rund {
border:10px solid #FFFFFF;
width:300px;
margin-top:-260px;
}
}

@media (min-width: 481px) and (max-width: 991px) {
.startinformationen_rund {
border:7px solid #FFFFFF;
/*border: 5px solid rgba(165,77,98, 0.5);*/
width:270px;
margin-top:-220px;
}
}

@media (min-width: 1px) and (max-width: 480px) {
.startinformationen_rund {
border: 7px solid #FFFFFF;
width:220px;
margin-top:-200px;
/*
-webkit-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
-moz-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
*/
}
}

.claim-bild {
width:440px;
height: auto;
/* background-color:#FFFFFF; */
}

@media (min-width: 992px) and (max-width: 1200px) {
.claim-bild {
width:400px;
height:auto;
}
}

@media (min-width: 481px) and (max-width: 991px) {
.claim-bild {
width:330px;
height:auto;
}
}

@media (min-width: 1px) and (max-width: 480px) {
.claim-bild {
width:250px;
height:auto;
}
}

.logo_haus_bergverliebt {
display:inline-block;
/* outline: rgba(255,255,255, 0.5) solid 3px; */
/* background-color:rgba(255,255,255, 0.85); */
/* border-radius:2px; */
text-align:center;
}

.icon_hamburger_menue {
width:80px;
height:auto;
z-index:101;
top:20px;
right:20px;
position:absolute;
box-sizing: border-box;
cursor:pointer;
}

.icon_hamburger_menue_size {
width:200px;
}

.icon_hamburger_menue_size:hover {
opacity:0.7;
}

.icon_hamburger_menue_float {
display:none;
width:55px;
height:55px;
border-radius:50%;
z-index:1000;
top:5vh;
right:7px;
position:fixed;
box-sizing: border-box;
cursor:pointer;
background-color:#ab142d;
padding:14px 10px 10px 10px;
/* border:2px solid #FFFFFF; */
}

.icon_hamburger_menue_float:hover {
background-color:#7dbd24;
}

.icon_live {
top:40%;
right:7%;
width:17vw;
height:auto;
float:right;
position:absolute;
z-index:100;
box-sizing: border-box;
}

.icon_striche {
left:40%;
top:0px;
width:15vw;
height:auto;
float:left;
position:absolute;
box-sizing: border-box;
}

images.sponsoren_icon:hover,
.icon_kategorie:hover,
.icon_live:hover,
.claim-bild:hover {
-webkit-transform:scale(1.01);
transform:scale(1.01);
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}


@media (min-width: 1px) and (max-width: 991px) {
.icon_kategorie {
margin:6% 0 0 5%!important;
width:22vw!important;
height:auto;
}

.icon_live {
margin:8% 3% 0 0;
width:30vw;
height:auto;
}

.icon_striche {
width:30vw;
height:auto;
}

}


@media (min-width: 1px) and (max-width: 991px) {
.myheader_spacer {

}
}

.my_logo {
margin-top:40px;	
margin-bottom:20px;	
}

@media (min-width: 1px) and (max-width: 480px) {
.my_logo {
width:280px!important;	
height:auto;
}
}

/* *************** Navigation *************** */

.my_navigation {
margin-top:10px;
margin-bottom:10px;
}

a.navi_small,
a.navi_small:link,
a.navi_small:visited {
display: inline-block;
border-top: 1px solid #cecccc;
border-bottom: 1px solid #cecccc;
padding-top:10px;
padding-bottom:10px;
padding-left:13px;
padding-right:13px;
color:#f7eed4!important;
font-weight:600!important;
/* background-color: rgba(255,255,255, 0.1); */
background-color: rgba(0,0,0, 0.15) !important;
font-size:18px!important;
line-height:30px;
margin-left:4px;
margin-right:4px;
margin-bottom:20px;
}

a.navi_small:hover {
text-decoration:none!important;
color:#cba76b!important;
background-color: rgba(0,0,0, 0.25) !important;
}

@media (min-width: 1px) and (max-width: 767px) {
a.navi_small,
a.navi_small:link,
a.navi_small:visited {
padding-top:7px;
padding-bottom:7px;
margin-bottom:10px;
line-height:20px;
}
}

.navigation_bild_rund {
border-radius:50%;
width:200px;
display: block;
margin: auto;
margin-right:15px;
}

@media (min-width: 1px) and (max-width: 767px) {
.navigation_bild_rund {
width:150px!important;
margin-right:8px;
margin-top:0px!important;
}
}

.facts_bild_rund {
border-radius:50%;
width:200px;
display: block;
margin: auto;
margin-right:15px;
}

/* /////////////////// Parallax neue Section ////////////////// */


.container-parallax {
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
position: relative;
width: 100%;
}
.container--big {
height: 175vh;
}
.container--full {
height: 80vh;
}

@media screen and (max-width: 767px) 
{
.container--full {
height: 80vh!important;
}
}

.container--small {
height: 40vh;
}

.parallax__container {
clip: rect(0, auto, auto, 0);
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -100;
}

.container-parallax .parallax {
/* can be put in a seperate class for better control */
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/* --------------------------- */
position: fixed;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}


@media screen and (max-width: 767px) {
.container-parallax .parallax {
/* can be put in a seperate class for better control */
background-position: center center!important;
}
}


@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@media screen and (max-width: 480px) {
.hide-on-mobile {
display: none;
}

.show-on-mobile--inline {
display: inline;
}
}

h3.parallax-head {
font-family: 'Antic Didone', georgia,verdana,arial!important;
font-size: 60px!important;
font-weight:700;
position: absolute;
top: 40%;
left: 0;
right: 0;
color: #ffffff;
text-align: center;
letter-spacing:-1px;
text-shadow: 1px 1px 2px #625b53, 0 0 1em #625b53, 0 0 0.2em #625b53;
padding:0px 15px 0px 15px;
word-wrap:break-word!important;
}

.container-parallax .bg_soft {
background-color: rgba(255,255,255, 0.00);
padding: 0px 15px 0px 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width:100%;
}

.bg_soft p {
margin-top:10px;
line-height:25px;
text-align:center!important;
color:#f4eddd!important;
}

.bg_soft h2,
.bg_soft h3 {
text-align:center;
margin-top:10px;
line-height:25px;
text-align:center!important;
color:#FFFFFF!important;
font-weight:600!important;
}

/* Ende Parallax */

a.schalter_mehr_infos, a.schalter_mehr_infos:link {
position: relative;
display: inline-block;
z-index: 999;
padding: 3px 15px 3px 15px;
font-size:18px;
text-decoration:none!important;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: rgba(248,243,234, 0.9)!important;
color:#000000!important;
font-weight:500!important;
margin-bottom:10px;
letter-spacing:1px;
text-align:center!important;
}

a.schalter_mehr_infos:hover {
background-color:#cba76b!important;
color:#FFFFFF!important;
}

a.schalter_mehr_infos:before {
font-family: FontAwesome;
content: "\f236";
margin-right:8px;
font-weight:300!important;
color:#000000;
}

/* Kontakt */

.header_kontakt {
/* background-color:#faf0f3; */
background-color:#c1b5ae;
position: relative;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(../images/bg_kontakt_bergverliebt.jpg);
width: 100%;
overflow: hidden;
}


.kontakt a,
.kontakt a:link,
.kontakt a:visited {
color:#FFFFFF!important;	
}

.kontakt a:hover {
text-decoration:none;
color:#FFFFFF!important;
}

p.termin,
.tage_container p.termin {
color:#000000!important;
background-color:#FFFFFF;
padding:8px 11px 8px 11px;
border-radius:30px;
line-height:23px!important;
margin: 5px 5px 5px 5px;
font-weight:500;
}

@media screen and (max-width: 400px) {
p.termin,
.tage_container p.termin {
border-radius:7px;
}
}

.tage_container p {
color:#FFFFFF!important;
}

.tage_gold,
.tage_container .tage_gold {
color:#796708!important;
}

a.schalter_beschreibung_weiterlesen,
a.schalter_beschreibung_weiterlesen:link,
#schalter_ritter_weiterlesen {
display: inline-block;
background-color: #bd0926!important;
color: #FFFFFF!important;
padding: 10px 20px 10px 20px;
border-radius: 30px;
font-size: 20px;
line-height:23px;
font-weight:600!important;
cursor: pointer;
margin-top:20px;
text-decoration:none!important;
}

a.schalter_beschreibung_weiterlesen:hover,
#schalter_ritter_weiterlesen:hover {
background-color: #000000!important;
}

/* Leistungen */

.header_leistungen {
/* background-color:#faf0f3; */
background-color:#FFFFFF;
position: relative;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(../images/bg_leistungen.jpg);
width: 100%;
overflow: hidden;
}

.box-leistungen {
padding:70px 40px 60px 40px;	
margin-bottom:60px;
box-shadow: 0 12px 16px rgba(0,0,0,0.05);
transition: all 0.3s ease; /* <--- hier die Transition */
/* border-top:10px solid #FEE9E9; */
background-color: rgb(0 0 0 / 65%);
}

@media screen and (max-width: 575px) {
.box-leistungen {
padding:60px 25px 40px 25px;	
margin-bottom:40px;
box-shadow: 0 12px 16px rgba(0,0,0,0.05);
transition: all 0.3s ease; /* <--- hier die Transition */
/* border-top:10px solid #FEE9E9; */
}	
}

.box-leistungen:hover {
box-shadow: 0 12px 16px rgba(0,0,0,0.01);
transition: all 0.3s ease; /* <--- hier die Transition */
}

.box-leistungen_bild_rund {
border-radius:50%;
width:300px;
height:auto;
display: block;
box-shadow: 0 27px 27px rgba(0,0,0,0.08);
border:7px solid rgba(202,186,156,0.45);
}

@media (min-width: 1px) and (max-width: 767px) {
.box-leistungen_bild_rund {
width:250px!important;
}
}

.box-leistungen h2 {
font-size:40px;
line-height:40px!important;
margin-bottom:30px;
margin-top:0px;
color:#786854;
font-weight:300;
}

.leistungen_spacer_dreispalten {
padding-bottom:0px;
padding-top:110px;
}

@media (min-width: 1px) and (max-width: 767px) {
.leistungen_spacer_dreispalten {
padding-top:25px;
}
}

.spacer_eine_spalte {
height:75px;	
}

@media (min-width: 1px) and (max-width: 767px) {
.spacer_eine_spalte {
height:0px;	
}
}

/* Servicekarte */

.header_servicekarte {
/* background-color:#faf0f3; */
background-color:#FFFFFF;
position: relative;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(../images/bg_servicecard.jpg);
width: 100%;
overflow: hidden;
}

.triangle-servicekarte {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px; /* Höhe des SVG-Dreiecks */
pointer-events: none; /* Klicks durch das SVG hindurch lassen */
transform: rotate(180deg);
}

@media (min-width: 992px) and (max-width: 1600px) {
.triangle-servicekarte {
height: 80px; /* Höhe des SVG-Dreiecks */
}
}

@media (min-width: 768px) and (max-width: 991px) {
.triangle-servicekarte {
height: 60px; /* Höhe des SVG-Dreiecks */
}
}

@media (min-width: 1px) and (max-width: 767px) {
.triangle-servicekarte {
height: 40px; /* Höhe des SVG-Dreiecks */
}
}

.box-servicekarte {
padding:120px 40px 40px 40px;	
margin-bottom:40px;
margin-top:-85px;
box-shadow: 0 12px 16px rgba(0,0,0,0.05);
transition: all 0.3s ease; /* <--- hier die Transition */
/* border-top:10px solid #FEE9E9; */
}

@media screen and (max-width: 575px) {
.box-servicekarte {
padding:120px 25px 40px 25px;	
margin-bottom:40px;
margin-top:-85px;
box-shadow: 0 12px 16px rgba(0,0,0,0.05);
transition: all 0.3s ease; /* <--- hier die Transition */
/* border-top:10px solid #FEE9E9; */
}	
}

.box-servicekarte:hover {
box-shadow: 0 12px 16px rgba(0,0,0,0.01);
transition: all 0.3s ease; /* <--- hier die Transition */
}

.box-servicekarte_bild_rund {
border-radius:50%;
width:300px;
height:auto;
display: block;
box-shadow: 0 27px 27px rgba(0,0,0,0.08);
border:7px solid rgba(255,255,255,1);

}

@media (min-width: 1px) and (max-width: 767px) {
.box-servicekarte_bild_rund {
width:230px!important;
}
}

/* Umgebung */

.header_umgebung {
/* background-color:#faf0f3; */
background-color:#caba9c;
position: relative;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(../images/bg_umgebung.jpg);
width: 100%;
overflow: hidden;
}

.triangle-umgebung {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px; /* Höhe des SVG-Dreiecks */
pointer-events: none; /* Klicks durch das SVG hindurch lassen */
transform: rotate(180deg);
}

@media (min-width: 992px) and (max-width: 1600px) {
.triangle-umgebung {
height: 80px; /* Höhe des SVG-Dreiecks */
}
}

@media (min-width: 768px) and (max-width: 991px) {
.triangle-umgebung {
height: 60px; /* Höhe des SVG-Dreiecks */
}
}

@media (min-width: 1px) and (max-width: 767px) {
.triangle-umgebung {
height: 40px; /* Höhe des SVG-Dreiecks */
}
}

.header_umgebung strong {
font-weight:400!important;	
}

.header_umgebung a,
.header_umgebung a:link {
color:#786854!important;
background-color:rgba(228,229,218,0.4);
text-decoration:none!important;
border-radius:5px;
padding:0px 5px 0px 5px;
font-size:22px;
}

.header_umgebung a:hover {
text-decoration:underline!important;
}

.header_umgebung p {
color:#9fa38b!important;
}

.box-umgebung {
padding:120px 50px 40px 50px;	
margin-bottom:40px;
margin-top:-85px;
box-shadow: 0 12px 16px rgba(0,0,0,0.05);
transition: all 0.3s ease; /* <--- hier die Transition */
/* border-top:10px solid #FEE9E9; */
}

@media screen and (max-width: 575px) {
.box-umgebung {
padding:120px 25px 40px 25px;	
margin-bottom:40px;
margin-top:-85px;
box-shadow: 0 12px 16px rgba(0,0,0,0.05);
transition: all 0.3s ease; /* <--- hier die Transition */
/* border-top:10px solid #FEE9E9; */
}	
}

.box-umgebung:hover {
box-shadow: 0 12px 16px rgba(0,0,0,0.01);
transition: all 0.3s ease; /* <--- hier die Transition */
}

.box-umgebung_bild_rund {
border-radius:50%;
width:350px;
height:auto;
display: block;
box-shadow: 0 27px 27px rgba(0,0,0,0.08);
border:7px solid rgba(255,255,255,1);
}

@media (min-width: 1px) and (max-width: 767px) {
.box-umgebung_bild_rund {
width:300px!important;
border:5px solid rgba(255,255,255,1);
}
}

.box-umgebung_bild_normal {
border-radius:30px;
width:100%;
height:auto;
box-shadow: 0 27px 27px rgba(0,0,0,0.08);
border:7px solid rgba(255,255,255,1);	
}

@media (min-width: 1px) and (max-width: 767px) {
.box-umgebung_bild_normal {
border-radius:20px;
border:5px solid rgba(255,255,255,1);	
}
}


/* *************** Apo App ************** */

.box_apoapp {
display:inline-block;	
}


img.apoapp  {
display:inline-block;
width:175px;
height:auto;
margin-right:15px;
margin-bottom:25px;
border-radius:10px;
border:1px solid #FFFFFF;
box-shadow: 0 32px 36px rgba(0,0,0,0.08);
}

img.apoapp:hover  {
opacity:0.8;
}

.wrapper_apoapp {
display:block;
margin-top:35px;
margin-bottom:20px;
}

/* *************** Table **************** */

.table-scrollable {
width: 100%;
overflow-y: auto;
/*
-webkit-box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.22);
-moz-box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.22);
box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.22);
margin-top: 30px;
margin-bottom: 30px;
*/
}

table {
width:90%;
margin-left: auto!important;
margin-right: auto!important;
}

.table-scrollable p {
font-size:22px!important;
line-height:22px!important;
margin-bottom:0px!important;
padding-bottom:0px!important;
}

.table-scrollable .tab_datum,
.table-scrollable .tab_zeit {
letter-spacing:1px;
}

.table-scrollable td {
padding:15px 10px 15px 10px!important;
}



@media screen and (max-width: 991px) {
.table-scrollable td {
/*
width:100%;
display:block;
*/
}

.table-scrollable td { /* für Bands kleineren Abstand Zeilen */
padding:10px 10px 10px 10px!important;
}

.blende_zeile {
display:none;	
}
}
.table-scrollable .tab_datum {
font-weight:bold!important;
}

.table-scrollable h4 {
font-size:35px;
line-height:39px!important;
font-weight:700;
color:#cecccc;
margin-top:0px;
text-align:center!important;
}

.table-scrollable tr:nth-child(2n) {
background-color: rgba(183,164,72,0.4) !important;
/* border-bottom: 1px dashed #b7a448!important; */
}

.table-scrollable tr:nth-child(2n) p {
color:#b7a448!important;
}


.table-scrollable tr:nth-child(2n+1) {
background-color: rgba(12,11,28,0.8)!important;
/* border-bottom: 1px dashed #cecccc!important; */
}



@media screen and (max-width: 991px) {
.table-scrollable table h4,
.table-scrollable table h4 {
font-size:30px!important;
line-height:28px!important;
}

.table-scrollable table {
line-height:24px!important;
}
}

/* ///////////////// Modul Bild Links / Text rechts - volle Breite //////////////////////// */

.bild_text_full {
position: relative;
background-size: cover;
background-color:#FFFFFF;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-image:url(../images/bg_apo_app.jpg);
width: 100%;
overflow: hidden;
}

.bild_text_full ul li {
/* list-style-image: url(../images/listenpunkt_weiss.png)!important; */
}

/*
.bild_text_full::before {
content: "";
width: 250px;
height: 20px;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%,-9px);
border-radius: 0px;
background: #FFFFFF;
z-index:10;
}
*/

.left-half {
left: 0;
}

.right-half,
.left-half {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
background-position: center center;
background-size: cover;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
border-right: 0px solid #dedede!important; /* Schweif */
}

.bild_text_full p, 
.bild_text_full li, 
.bild_text_full strong {
color: #caba9c!important;
}


.bild_text_full a,
.bild_text_full a:link {
color:#caba9c!important;
font-weight:400!important;
text-decoration:underline!important;
}

.bild_text_full a:hover {
color:#a54d62!important;
text-decoration:none!important;
}

.bild_text_full h1,
.bild_text_full h2,
.bild_text_full h3,
.bild_text_full h4,
.bild_text_full h5 {
color:#786854!important;
text-align:left!important;
/* text-transform:uppercase; */
}

.bild_text_full .text-section-right {
padding-top:50px;
padding-bottom:70px;
padding-left:55px;
}

@media (min-width: 1px) and (max-width: 767px) {
.bild_text_full .text-section-right {
padding-left:0px!important;
}

.bild_text_full h1,
.bild_text_full h2,
.bild_text_full h3,
.bild_text_full h4,
.bild_text_full h5 {
text-align:center!important;
}

}

@media (max-width: 767px) { 
.bild_text_full .text-section-right {
text-align:center;
}
.bild_text_full ul li {
list-style-image: inherit!important;
margin-left:0px!important;
margin-right:0px!important;
padding-left:0px!important;
padding-right:0px!important;
}
}

#schalter_information_weiterlesen {
display: inline-block;
background-color: #bd0926;
color: #FFFFFF;
padding: 10px 20px 10px 20px;
border-radius: 30px;
font-size: 20px;
line-height:23px;
font-weight:600!important;
cursor: pointer;
margin-top:20px;
}

#schalter_information_weiterlesen:hover {
background-color: #000000;
}

#information_volltext {
}

/* *********** Haarlinien ************* */

hr.small {
max-width: 155px;
border-top:1px dotted #FFFFFF!important;
}

hr {
border-top: 1px solid rgba(255,255,255,0.8);	
}

strong {
font-weight:600!important;
}

.small,
small {
font-size: 80%;
font-weight:200;
}

/*
.about h1:before {
font-family: FontAwesome;
content: "\f105";
margin-right:8px;
font-weight:300!important;
color:#bcbcbc;
}
*/


/* Footer */

footer {
padding: 0px 0;
}

#to-top {
position: fixed;
right: 10px;
bottom: 20px;
display: none;
}

.trennung {
height:2px;
background-color:#b3925b;
}

.spacer-box {
border:0px solid #FFFFFF!important;
padding-top:75px!important;
padding-bottom:55px!important;
}

.services {
background-color:#208225!important;
}

.services h1,
.services h2,
.services h3
{
color:#e4f7e5!important;
}

.services li,
.services a,
.services a:link,
.services p {
color:#bfe4c1!important;
}

/* *************** Infobox *************** */

.info_box {
position:fixed;
z-index:300;
top:50%;
margin-top:0px;
right:10px;
width:110px;
height:110px;
background-color: rgba(0,0,0, 0.9) !important;
border-radius:50%;
padding:10px;
-webkit-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.37);
-moz-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.37);
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.37);
}

.info_box:hover {
-webkit-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
-moz-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
}

.info_box_inner {
padding:20px 10px 10px 10px;
text-align:center;
}

.info_box_inner .rot {
color:#d1271b!important;
background-color:transparent!important;
margin-bottom:10px;
}

.info_box_inner .rot:hover {
color:#252525!important;
}

.info_box_inner p,
.info_box_inner a,
.info_box_inner a:link {
font-size:16px!important;
color:#3a3a3a;
background-color:transparent!important;
line-height:22px!important;
}

.modal {

}

/* soll nur für diese Box gelten, alle anderen sind Scroll */


@media (min-width: 992px) { /* nicht bei mobile */
/*#myModal_kontakt .modal-dialog, */
#myModal_confirm_youtube .modal-dialog,
#myModal_confirm_anfrage .modal-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)!important;
}
}

/* //////// Schalter Modal /////// */

.modal_close_x {
color:#ab142d!important;
background-color:inherit!important;	
}

.modal_close_x:hover {
color:#ab142d!important;
background-color:inherit!important;	
}


button.modal_close_schalter {
display:inline-block!important;
background-color:#FFFFFF!important;
padding:5px 20px 5px 20px!important;
margin:10px!important;
color:#786854!important;
border-radius:20px!important;
border:1px solid #786854!important;
text-decoration:none!important;
font-size:19px!important;
font-weight:400;
transition: transform 0.5s ease;
box-shadow: 0 22px 26px rgba(0,0,0,0.05);
}

button.modal_close_schalter:hover {
box-shadow:inherit;
background-color:#FFFFFF;
}

button, [type="button"], [type="reset"], [type="submit"] {
border: 0px solid #FFFFFF !important;
}

.modal-dialog {
/* max-width:1000px!important; */
/*
margin-left:40%;
margin-right: 40%;
*/
}

.modal-content {
background-color:#fbfaf8!important;
color:#262626!important;
border:15px solid #FFFFFF;
border-radius:15px!important;
/* border-bottom:20px solid #faf8f5; */
}

.modal-body {
padding: 0px 10px 5px 10px!important;
}

.modal-body,
.modal-header,
.modal-footer {
/* background-color:#e8e3dc!important; */
/* background-color:#000000!important; */
}

.modal-header {
border-bottom: 0px solid #FFFFFF!important;
}

/* für modal box agb und Widerrufsbelehrung, Artikel mit Modul 011, Container 1173px breit, hier auf Boxenbreite 100% */
.modal-body .container {
max-width:100%!important;
}

.modal-body .container p {
font-weight:300!important;
font-size:18px!important;
line-height:26px!important;
color:#786854!important;
letter-spacing:0px;
}

.modal-body .container li {
font-weight:300!important;
font-size:17px!important;
line-height:26px!important;
color:#786854!important;
letter-spacing:0px;
margin-bottom:10px!important;
}

.modal-body .container a,
.modal-body .container a:link,
.modal-body .container a:visited {
color:#ab142d!important;
}

.modal-body .container ul {
list-style-type: disc;
margin-left:16px; 
}

.modal-body .container ul li::marker, 
.modal-body .container ol li::marker {
color:#ab142d;
}

.modal-dialog {

}

.modal-dialog h1 {
font-size:26px!important;
line-height:31px!important;
margin: 0px 0px 15px 0px!important;
padding: 0px 0px 0px 0px!important;
color:#786854!important;
text-align:left!important;
}

.modal-dialog h2 {
font-size:26px!important;
line-height:31px!important;
margin: 0px 0px 15px 0px!important;
padding: 0px 0px 0px 0px!important;
color:#786854!important;
text-align:left!important;
}

.modal-dialog h3 {
font-size:23px!important;
line-height:27px!important;
margin: 0px 0px 10px 0px!important;
color:#786854!important;
text-align:left!important;
}

.modal-dialog img {

}

.modal-title {
/* h4 ist title und wird in der ekko-lightbox.js konfiguriert */
}

@media (min-width: 1px) and (max-width: 480px) {
.modal-title {
line-height:22px!important;
}
}

.modal-backdrop /* background-fade in hintergrund transparenz */
{
opacity:0.85!important;
}

.modal-footer {
/* display:none!important; */
/*
padding: 0px 15px 15px 15px!important;
text-align:center!important;
font-size:18px!important;
color:#8d8b84!important;
*/
justify-content:center!important;
}

.modal-header .close {
padding:0px!important;
margin:0px!important;
}

/* Ende Modal */

.thumbnail {}

/* *************** Container Videos *************** */

.videos {
padding-top:80px!important;
}

.responsive-video {
padding-bottom: 56.25%;
position: relative;
overflow: hidden;
display: block;
height: 0;
margin-bottom:40px;
}

.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

/* *************** Confirm Youtube ************ */

.infobox_youtube {
border: 2px solid #dddddd;
display:inline-block;
padding:45px 20px 20px 20px;
border-radius:20px;
background: rgba(236,236,236,0.2);
position:relative;
}

.infobox_youtube .logo_youtube_box {
display: inline-block;
background-color: #FFFFFF;
padding: 8px 20px 8px 20px;
border-radius: 30px;
border: 2px solid #dddddd;
position:absolute;
top:0%;
left:50%;
transform: translate(-50%,-50%);
-webkit-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
-moz-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.17);
}

/* für Implendierung Seite */
/*
a.confirm_youtube,
a.confirm_youtube:link,
a.confirm_youtube:visited {
display: inline-block;
background-color: #04b73f;
color: #FFFFFF!important;
padding: 8px 20px 8px 20px;
border-radius: 20px;
font-size: 18px;
line-height: 23px;
font-weight: 600!important;
cursor: pointer;
margin-top: 0px;
text-decoration:none;
position:absolute;
top:100%;
left:50%;
transform: translate(-50%,-50%);
min-width:220px;
}

a.confirm_youtube:hover {
background-color: #000000;
}
*/

/* für Implendierung Moadal Box */

a.confirm_kontakt,
a.confirm_kontakt:link,
a.confirm_kontakt:visited {
display: inline-block;
padding: 10px 17px 10px 17px;
margin: 10px;
color: #caba9c!important;
border-radius: 9999px;
border: 1px solid #caba9c;
text-decoration: none !important;
font-size: 19px;
font-weight: 400;
transition: transform 0.5s ease;
box-shadow: 0 22px 26px rgba(0,0,0,0.05);
}

a.confirm_kontakt:hover {
box-shadow:inherit;
}

#myModal_confirm_youtube .datenschutz_full p {
font-size:14px!important;
line-height:17px!important;	
}

a.confirm_noyoutube,
a.confirm_noyoutube:link {
display: inline-block;
border:1px solid #bbb;
color:#bbb!important;
padding: 8px 20px 8px 20px;
border-radius: 20px;
font-size: 18px;
line-height: 23px;
font-weight: 600!important;
cursor: pointer;
margin-top: 0px;
text-decoration:none;
}

a.confirm_noyoutube:hover {
border: 1px solid #000000;
color: #000000!important;
}

@media(max-width:767px) {
.video_dummy {
margin-bottom:20px;
}
}

.link_modal_datenschutz {
cursor: pointer;
color:#bd0926;	
}

/* *************** Schalter Top *************** */

@media(max-width:767px) {
#to-top images {
width:60px;
height:auto;
z-index:3000!important;
position:relative;
}
}

/* *************** Carousel *************** */

.carousel-indicators li {
width: 30px;
height: 8px;
margin-right: 5px;
margin-left: 5px;
text-indent: -999px;
cursor: pointer;
background-color: #FFFFFF!important;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
border-bottom: 0px solid transparent!important;
}

/* *************** Features Icons *************** */

.icon_cerative {
font-size:55px;
}

.color_creative_gold {
color: #b7a448!important;
}

.color_creative_schwarz {
color: #000000!important;
}

.color_creative_weiss {
color: #FFFFFF!important;
}

.color_creative_textfarbe {
color: #786854!important;
}

.color_creative_gelb {
color: #f3db0f!important;
}

.color_creative_orange {
color: #f75e35!important;
}

.color_creative_gruen {
color: #208225!important;
}

.color_creative_lila {
color: #caba9c!important;
}

.myrotation {
-webkit-transition: 0.3s;
transition: all 0.4s; 
}
.myrotation:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);	
}

.footer_box {
border: 1px dashed #edfdee;
border-radius:2px;
padding:20px 10px 0px 10px;
margin-bottom:20px;
}

.footer_box p,
.footer_box a,
.footer_box a:link  {

}

/* ------------- Lazy Load  ----------------------------------------------------*/

.lazyload,
.lazyloading {
opacity: 0; 
}

.loading,
.lazyload,
.lazyloaded,
.image {
opacity: 1;
transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1); 
}

/* *************** Animation *************** */

.animate-down {
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0, -70px);
-moz-transform: translate(0, -70px);
transform: translate(0, -70px)
}
.animate-down.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 600ms ease-out 100ms;
-moz-transition: all 600ms ease-out 100ms;
transition: all 600ms ease-out 100ms
}
.animate-up {
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0, 70px);
-moz-transform: translate(0, 70px);
transform: translate(0, 70px)
}
.animate-up.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}
.animate-right {
opacity: 0;
visibility: hidden;
transform: translate(-70px, 0)
}
.animate-right.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}
.animate-left {
opacity: 0;
visibility: hidden;
transform: translate(70px, 0)
}
.animate-left.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}

/* ****************  /* The side navigation menu */

#mySidenav {
width:0px;
}

@media(max-width:767px) {
#mySidenav {
width:0px;
}	
}

.sidenav {
height: 100%;
width: 0; /* wichtig: initial geschlossen */
position: fixed;
z-index: 111111;
top: 0;
right: 0;
background-color: #FFFFFF;
overflow-x: hidden;
overflow-y: scroll;
padding-top: 80px;
transition: width 0.3s;
box-shadow: -5px 0px 30px rgba(0,0,0,0.11);
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidenav::-webkit-scrollbar {
display: none;
}

@media(max-width:767px) {
.sidenav {
padding-top:40px;
}
}


/* The navigation menu links */
.sidenav a,
.sidenav a:link,
.sidenav a:visited {
padding: 0px 8px 5px 0px;
text-decoration: none!important;
font-size: 23px;
line-height:25px;
color:#786854!important;
display: block;
text-align:center;
}

@media(max-width:767px) {
.sidenav a,
.sidenav a:link,
.sidenav a:visited {
padding: 0px 8px 14px 0px;
font-size: 22px;
line-height:24px;
}
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
opacity:0.7;
}


/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav .closebtn {
position: absolute;
top: 0;
right: 10px;
font-size: 33px;
margin-left: 50px;
}
}

/* Trenner zwischen den Navipunkten */

.links_sidenavi::after {
content: "|";  
font-size:25px; 
color: #ab142d!important;
margin-left: 0px; 
font-weight: bold;
font-weight:100;
}

.links_sidenavi:last-child::after {
content: "";  /* Kein Inhalt nach dem letzten Menüpunkt */
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

.trenner_navi {
padding: 0px 0px 10px 0px;
width: 3px;
height: 25px;
/* color: #f1e8ea!important; */
color: #000000!important;
transition: 0.3s;
text-align: center;
display: block;
justify-content: center;  /* Zentriert den Trenner innerhalb der div */
align-items: center;  /* Zentriert den Trenner auch vertikal */
}


.navigation_schalter {
display:inline-block;
font-size:34px;
color:#FFFFFF;
text-align:center;
margin-left: auto!important;
margin-right: auto!important;
padding:8px 30px 8px 30px;
border-radius:40px;
border:3px solid #FFFFFF;
background-color:#bd0926;
margin-bottom:0px;
top:-90px!important;
z-index:300!important;
position:relative;
letter-spacing:1px;
font-weight:700;
-webkit-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.37);
-moz-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.37);
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.37);
}

@media (min-width: 576px) and (max-width: 991px) {
.navigation_schalter {
display:inline-block;
font-size: 28px!important;
padding:7px 12px 7px 12px!important;
top:-80px!important;
}	
}

@media (min-width: 1px) and (max-width: 575px) {
.navigation_schalter {
display:inline-block;
font-size: 24px!important;
padding:7px 12px 7px 12px!important;
top:-80px!important;
}	
}

.footer_navigation {
padding-top:110px!important;
padding-bottom:100px!important;
}

@media (min-width: 1px) and (max-width: 575px) {
.footer_navigation {
padding-top:90px!important;
padding-bottom:80px!important;
}
}

.footer_navigation p {
color:#786854 ;
padding-bottom:50px;
font-size:40px;
line-height:45px;
font-weight:300!important;
}

.triangle-shape-footer {
position:relative;
bottom: 0;
left: 0;
width: 100%;
height: 100px; /* Höhe des SVG-Dreiecks */
pointer-events: none; /* Klicks durch das SVG hindurch lassen */
}

@media (min-width: 1px) and (max-width: 767px) {
.footer_navigation p {
font-size:32px;
line-height:42px;
}
}

.triangle-shape-footer {
bottom: 0;
left: 0;
width: 100%;
height: 50px; /* Höhe des SVG-Dreiecks */
pointer-events: none; /* Klicks durch das SVG hindurch lassen */
}

@media (min-width: 1px) and (max-width: 767px) {
.triangle-shape-footer {
display:none;
}	
}

.footer_navigation a.footer_link,
.footer_navigation a.footer_link:link {
/* background-image:linear-gradient(-70deg, #524592, #a54d62); */
display:inline-block;
padding:13px 20px 13px 20px;
margin:10px;
color:#caba9c!important;
border-radius:9999px;
border:1px solid #caba9c;
text-decoration:none!important;
font-size:19px;
line-height:19px;
font-weight:400;
transition: transform 0.5s ease;
box-shadow: 0 22px 26px rgba(0,0,0,0.05);
}

.footer_navigation a.footer_link:hover {
/* background-image:linear-gradient(-70deg, #a54d62, #524592); */
box-shadow:inherit;
}

.logo_footer {
width:400px;
height:auto;
margin-bottom:60px;	
}

@media (min-width: 1px) and (max-width: 575px) {
.logo_footer {
width:350px;
height:auto;
}	
}

/* ///////////////////// Animation ////////////////////////////// */

.animate-down {
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0, -70px);
-moz-transform: translate(0, -70px);
transform: translate(0, -70px)
}
.animate-down.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 600ms ease-out 100ms;
-moz-transition: all 600ms ease-out 100ms;
transition: all 600ms ease-out 100ms
}
.animate-up {
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0, 70px);
-moz-transform: translate(0, 70px);
transform: translate(0, 70px)
}
.animate-up.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}
.animate-right {
opacity: 0;
visibility: hidden;
transform: translate(-70px, 0)
}
.animate-right.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}
.animate-left {
opacity: 0;
visibility: hidden;
transform: translate(70px, 0)
}
.animate-left.animated {
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
-moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}

/* *************** AUSGABE DB LIVE ************************** */

.details_angebote {
display: none;
margin-top: 10px;
}

table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

.container_weiter {
display: flex;
justify-content: center;
margin-top: 10px;
}

#loadMoreBtn {
padding: 8px 16px;
cursor: pointer;
background-image: linear-gradient(-70deg, #524592, #a54d62);
color: #ffffff;
border: none;
border-radius: 30px;
font-weight:400;
font-size:21px;
margin-top:20px;
margin-bottom:10px;
width:280px;
}

#loadMoreBtn:hover {
background-image: linear-gradient(-70deg, #a54d62, #524592);
color: #ffffff;
}

.weitere_infos {
padding: 3px 15px 3px 15px;
cursor: pointer;
background-image: linear-gradient(-70deg, #524592, #a54d62);
color: #ffffff;
border: none;
border-radius: 30px;
font-weight:400;
font-size:15px;
margin-top:10px;
margin-bottom:10px;
display:inline-block;
}

.weitere_infos:hover {
background-image: linear-gradient(-70deg, #a54d62, #524592);
color: #ffffff;
}	


#searchContainer {
/* display: flex; */ /* zwängt small aus */
justify-content: center;
margin-bottom: 45px!important;
}
#searchContainer input, #searchContainer select {
margin-right: 10px;
/* padding: 5px; */
height:50px;
border-radius:30px;
}

/* Stil für die benutzerdefinierte Selectbox */
.custom-select-wrapper {
position: relative;
display: inline-block;
width: 100%;
}

.custom-select {
appearance: none; /* Standardwert für das Aussehen des Dropdown-Pfeils */
-webkit-appearance: none; /* Für WebKit-Browser */
-moz-appearance: none; /* Für Firefox */
background-color: white;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
width: 100%;
cursor: pointer;
position: relative; /* Position relativ für die Verwendung des ::after-Pseudoelements */
z-index: 1; /* Stellen Sie sicher, dass die Selectbox vor dem Pfeil liegt */
}

.custom-select-wrapper::after {
content: ''; /* Leerzeichen, um den Pfeil anzuzeigen */
position: absolute;
top: calc(50% - 5px); /* Zentrieren Sie den Pfeil vertikal */
right: 10px; /* Abstand zum rechten Rand */
width: 0;
height: 0;
border-left: 5px solid transparent; /* Pfeil nach unten */
border-right: 5px solid transparent; /* Pfeil nach unten */
border-top: 5px solid #666; /* Farbe des Pfeils */
pointer-events: none; /* Der Pfeil stört nicht beim Klicken auf die Selectbox */
}

.custom-select option {
padding: 10px;
font-size: 20px!important;
}

.form-control {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .475rem 1.2rem .475rem 1.2rem;
font-size:20px; /* 1rem */
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
font-style:italic;
}

#resetBtn {
padding: 5px 10px;
cursor: pointer;
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
}

#searchContainer #brancheSelect {
font-size:20px!important;
border-radius:30px;
/* background-color:#faf0f3; */
}

#searchContainer .zuruecksetzen {
color:#FFFFFF!important;
background-image: linear-gradient(-70deg, #524592, #a54d62);
border:0px!important;
border-radius:50px!important;
padding: 4px 25px 4px 25px;
-webkit-box-pack: right!important;
-ms-flex-pack: right!important;
justify-content: right!important;
margin-top:25px;
font-size:18px;
}

#searchContainer .zuruecksetzen:hover {
color:#FFFFFF!important;
background-image: linear-gradient(-70deg, #a54d62, #524592);
}

.details_schliessen {
color:#FFFFFF!important;
background-image: linear-gradient(-70deg, #524592, #a54d62);
border:0px!important;
border-radius:50px!important;
padding: 3px 15px 3px 15px;
-webkit-box-pack: right!important;
-ms-flex-pack: right!important;
justify-content: right!important;
display:inline-block;
font-size:15px;
}

.details_schliessen:hover {
background-image: linear-gradient(-70deg, #a54d62, #524592);
}

@media (min-width: 1px) and (max-width: 767px) {
#searchContainer #brancheSelect {
margin-bottom:25px!important;
}

#searchContainer .btn-secondary {
margin-top:25px!important;
margin-bottom:25px!important;
}
}

#resetBtnmyklick {
font-size:21px;	
text-decoration:none!important;
background-color:inherit!important;
border: 1px solid #a54d62;
color:#a54d62!important;
margin-top:25px!important;
border-radius:30px;	
display:inline-block;
padding: 6px 16px;
width:280px;
}

.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color:inherit!important;
background-clip: border-box;
border:0px!important;
border-radius:0;
}

.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 1px;
padding:30px 0px 20px 0px!important;
border-bottom:3px solid #f5e5e3;
}

.card-body:hover {
/* border-bottom:3px solid #a54d62; */
}

/* Hacken vor Ausgabe jeweilige Info */
.ok_zeichen {
/*
margin-right:10px;
font-size:14px!important;
line-height:14px!important;
color:#FFFFFF!important;
width:16px;
height:16px;
display:inline-block;
background-color:#f0e3e7!important;
border-radius:100%;
text-align:center;
padding: 3px 0px 0px 0px;
}
*/
margin-right:7px;
color:#caba9c!important;
font-weight:200!important;
opacity:0.3;
}

.highlight_suchbegriff {
background-color:#ffffbf; 
}

.programm_listing {

}

.programm_listing .bild_spalte_spacer {
padding:100px 0px 0px 0px;
border-radius:25px!important;
}

@media (min-width: 576px) and (max-width: 991px) {
.programm_listing .bild_spalte_spacer {
padding:0px 0px 30px 0px!important;
}	
}

@media (min-width: 1px) and (max-width: 575px) {
.programm_listing .bild_spalte_spacer {
/* hier wird das Bild als Hintergrundbild mit 300px Höhe aus Quelltext geladen -> class="d-block d-sm-none" */
display:none;
}	
}

.programm_listing .bild_spalte {
background-image: url('../images/bg_programm.jpg') !important;
position: relative;
background-position: center center;
background-size: cover;
height: 100%; /* Ensure parent has height set */
width: 100%; /* If needed */
min-height:600px; /* Fallback height if parent has no height */
display: block;
border-radius:25px;
}

@media (min-width: 576px) and (max-width: 991px) {
.programm_listing .bild_spalte {
min-height:300px;
}	
}

@media (min-width: 1px) and (max-width: 575px) {
.programm_listing .bild_spalte {
display:none;
}	
}

.programm_listing .bild_spalte_nachlese {
background-image: url('../images/bg_nachlese_2024.jpg') !important;
position: relative;
background-position: center center;
background-size: cover;
height: 100%; /* Ensure parent has height set */
width: 100%; /* If needed */
min-height:600px; /* Fallback height if parent has no height */
display: block;
border-radius:25px;
}

@media (min-width: 576px) and (max-width: 991px) {
.programm_listing .bild_spalte_nachlese {
min-height:300px;
}	
}

@media (min-width: 1px) and (max-width: 575px) {
.programm_listing .bild_spalte_nachlese {
display:none;
}	
}

.programm_listing .text_spalte_spacer {
padding:0px 20px 20px 40px;
border-radius:25px!important;

}

@media (min-width: 1px) and (max-width: 991px) {
.programm_listing .text_spalte_spacer {
padding:0px 0px 0px 0px!important;
border-radius:25px!important;
}	
}

.programm_listing .text_spalte {
background-image: linear-gradient(-45deg,#f8f4f4,#f8f4f4);
padding:30px 40px 30px 40px;
border-radius:25px;
}

@media (min-width: 1px) and (max-width: 991px) {
.programm_listing .text_spalte {
padding:25px 25px 25px 25px!important;
}
}

.programm_listing .programm_line {
flex: 1 1 auto;
min-height: 1px;
padding: 10px 0px 0px 0px !important;
border-bottom: 4px solid #FFFFFF;
margin-bottom:20px;
}

.programm_listing .container {

}

.programm_listing .programm_uhrzeit {
/*
display:inline-block;
background-color:#FFFFFF;
border-radius:15px;
padding:1px 14px 1px 18px!important;
font-weight:300;
border:1px solid #caba9c;
margin-left:-18px;
font-size:20px;
position:relative;
z-index:0;
*/
}

.icon_uhr {
margin-right:10px;
font-size:21px;
display:inline-block;
background-color:#a54d62;
border-radius:20px;	
}

a.galerieschalter_booking,
a.galerieschalter_booking:link {
margin-top:20px;
margin-bottom:30px!important;
display:inline-block;
background-image: linear-gradient(-70deg, #ab142d, #77091b);
font-size:22px;
line-height:24px;
color:#f4f0e8!important;
padding:7px 25px 9px 25px;
border-radius:9999px;
font-weight:400!important;
text-decoration:none!important;
box-shadow: 0 22px 26px rgba(0,0,0,0.05);
}

a.galerieschalter_booking:hover {
background-image: linear-gradient(-70deg, #77091b, #ab142d);
}

#lightbox {

}