html {
  scroll-behavior: smooth;
}
body{
    /*font-family: 'Open Sans', sans-serif;*/
    /*background:url('img/backpaper-braun.png');background-size:contain;*/
    padding-top:0;
    /*font-family: 'Questrial', sans-serif;*/
    font-family: 'Questrial';
    line-height:1.7em;
    /*color:#00639e;*/
    color:#000;
    width:100%;   
}

/* questrial-regular - latin */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/questrial-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Questrial'), local('Questrial-Regular'),
       url('../fonts/questrial-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/questrial-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/questrial-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/questrial-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/questrial-v7-latin-regular.svg#Questrial') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'frente_h1regular';
    src: url('../fonts/FrenteH1-Regular-webfont.eot');
    src: url('../fonts/FrenteH1-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         /*url('../fonts/FrenteH1-Regular-webfont.woff2') format('woff2'),*/
         url('../fonts/FrenteH1-Regular-webfont.woff') format('woff'),
         url('../fonts/FrenteH1-Regular-webfont.ttf') format('truetype'),
         url('../fonts/FrenteH1-Regular-webfont.svg#frente_h1regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
#wrapper {
  width: 100%;
  padding-top:100px;
  background:#fff
}
/*blue
#00639e*//*006190*//*006190*//*100 55 15 0*/
/*yellow
#ffd401*//*fbd020*//*fbd020*//*0 15 100 0*//*ffeb00*//*0 8 100 0*/
/*red#e4003a*//*d91f43*//*0 100 70 0*/
/*green*//*#96c11f*/
/*pink*//*e61873*/
/*orange*//*ed8b20*/
/*dark lila*/ /*5c2e91*/
[id] {
  scroll-margin-top: 120px; /* Hier die genaue Höhe deines Headers eintragen */
}
nav {  background: white;
}
.fixed-top {z-index: 1062/*cause of popover*/}
.navbar-toggler {padding: .25rem .55rem}.nav {border-bottom:8px solid transparent!important;
    border-image: url('../../img/ch/divider-header.png') 100;}
    
 nav.navbar-shrink {border-bottom:8px solid transparent!important;
    border-image: url('../../img/lines/line-pink-start.png') 100;}
.navbar {padding: 0;min-height:100px}
    
/*NAVIGATION*/
.nav .col-3{
    color:#fff;
    font-family: 'frente_h1regular';
    font-size:2.3em;
}
 .navbar-light .navbar-nav .nav-link {
  color: #e61873;
}  
 .navbar-light .navbar-nav .nav-link:hover {
  color: #5c2e91;
}
label.navoff{display: block;
  background: #e61873;
  width: 66px;
  height: 50px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  cursor:pointer
}  
.line {
  position: absolute;
  left: 12px;
  height: 3px;
  width: 40px;
  background: #fff;
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: center;
}

.line:nth-child(1) {
  top: 12px;
}
.navbar button[aria-expanded="true"] .line {
  background: #e61873;
}

.navbar button {
  margin-top: 30px;
}
.navbar button, .navbar button[aria-expanded="true"] {
  border: 0px;
  }
  .navbar-toggler {
  margin-right: 0px;
}
.navbar-toggler {
  padding: .25rem .55rem;
}
  .navbar-collapse.show, .navbar-collapse.collapsing{
    padding-top: 20px;border-top: 20px solid transparent;
  }
  .navbar button[aria-expanded="true"] label.navoff {
  background: #fff;
}
.line:nth-child(3) {
  top: 36px;
}
.line:nth-child(2) {
  top: 24px;
}
.line:nth-child(1) {
  top: 12px;
}
hr{opacity:1}
/*NAVIGATION END*/    

.row.title{
height: 60vh;
  margin-bottom: 5rem;
}
.logo{height: 80px;
  margin-left: 10px;
}
.navbar-shrink img.logo {
  margin-top: 5px;
  height: 65px;
  width: auto;
}
.navbar-collapse.collapsing{background:#fff;}
ul.navbar-nav {
  margin-left: 0px;
}
h1.home-title{  /*position: absolute;z-index:1000;top:70%;width:40%;*/color:#5c2e91;font-size:1rem;font-family: 'frente_h1regular';font-weight:bold;}
nav.navbar-shrink h1.home-title{font-size:0.8rem;}

.owl-theme .owl-controls .owl-buttons .owl-prev,.owl-prev{position:absolute;top:-50px!important;}
.owl-theme .owl-controls .owl-buttons .owl-next, .owl-next{position:absolute;right:0;top:-50px!important;}
.owl-carousel .item img {
    object-fit: cover;
    height: 50vh;
    width: 100%/*200px*/!important;
    margin-top: 0px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.owl-theme .owl-dots .owl-dot span {
  background: #ed8b20;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #5c2e91;
}
/*Lines bottom*/
.frame-greyline{border-bottom: 15px solid transparent; border-image: url('../../img/lines/line-gray.png') 100;}
.frame-purpleline{border-bottom: 15px solid transparent; border-image: url('../../img/lines/line-purple.png') 100;}
.frame-blueline,.frame-yellowline, .frame-redline, .frame-whiteline, .frame-pinkline,.frame-greenline,.frame-orangeline {padding-bottom:20px;border-bottom:15px solid;border-image: url('../../img/lines/line-blue.png') 100}
.frame-yellowline {border-image: url('../img/lines/line-yellow.png')100}
.frame-redline {border-image: url('../../img/lines/line_red.png')100}
.frame-whiteline{border-image: url('../../img/lines/line_white.png')100}
.frame-greenline{border-image: url('../../img/lines/line-green.png')100}
.frame-pinkline {border-image: url('../../img/lines/line-pink.png')100}
.frame-orangeline {border-image: url('../../img/lines/line-orange.png')100}
/*Lines bottom*/

footer{width:100%}
.footer{background:#e61873;color:#fff;padding-top:20px}
footer a{color:#fff!important}
footer a:hover{color:#5c2e91!important}
footer h4{text-align:left;font-size:2rem;color:#591d80}
footer ul{margin-left:15px;}
.footer4 a{/*font-size:12px;*/color:#591d80!important}
.footer4 ul{float:right;padding-left:45px;}
.footer4 ul.footernav5{background-image:none;}

.footer4 ul li{list-style-type:none;float:left;padding-right:5px}@media screen and (min-width: 390px){
}
hr{background:transparent;border-top: 0px;}
.frame {
  margin-top: 30px;
  margin-bottom: 30px;
  border-top: 0;
}
#c1509 img,#c1511 img,#c1512 img{max-width:200px;width:100%;height:auto!important;border-radius: 50%;object-fit: cover;}
.image-caption {
  font-size: 12px;
  color: #888;
  line-height: 1.2em;
  text-align:center
}
.text-right {
  text-align: right !important;
}
h1, h2, h3, h4, h5 {
  font-family: 'frente_h1regular', sans-serif;
  color: #e61873;
  font-weight: bold;
}
h2{text-align:center;margin-bottom:2rem}
a{text-decoration:none}
a.more {
  font-family: 'frente_h1regular', sans-serif;
  font-weight: bold;
  background-size: 100% 100%;
  background-image: url('../../img/more-orange.png');
  background-repeat: no-repeat;
  color: #fff;
  padding-bottom: 15px;
  font-size: 1.5rem;
  background-position: 0 0;
  padding: 10px 12px;
  padding-bottom: 10px;
}
a.more:hover {text-decoration:underline}

footer .list-group-item {
  position: relative;
  display: block;
  padding: 0;
    padding-right: 0px;
  margin-bottom: -1px;
  background-color: transparent;
  border: 0px;
  list-style-type: none;
  padding-right: 5px;
}
footer ul li + li::before {
  content: " | ";
  color:#fff
}
@media screen and (max-width: 420px){
.navbar button {
  margin-top: 0px;
  position: absolute;
  top: 5px;
  right: 0px;
}
.owl-carousel .item img {height: 40vh;}
label.navoff {width: 50px;}
  .line {
  left: 7px;
  width: 34px;}
h1.home-title{font-size: 1.4rem;
width: 100%;
    text-align: center;    }
nav.navbar-shrink h1.home-title{font-size:1.2rem;}
.logo {margin-left:5px}
.navbar-brand {
  margin-right: 0rem;}
}
@media screen and (min-width: 576px){
h1.home-title{font-size:1.5rem;}
nav.navbar-shrink h1.home-title{font-size:1.2rem;}
}
@media screen and (max-width: 767px){
.row.blueback .ce-gallery{margin-bottom:60px}
.ce-left.ce-intext .ce-gallery{float:none}
.ce-left.ce-intext .ce-gallery figure{width:100% !important;}
.ce-left.ce-intext .ce-gallery .ce-column{max-width:730px;display:block;float:none}
.ce-left.ce-intext .ce-gallery img{width:100% !important;max-width:730px}

   }
@media screen and (min-width: 768px){
/*.titleimg{height:550px;}*/
}

@media (max-width: 991px) {
  .navbar-collapse.show {
    -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.55);
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.55);
    border-top: 20px solid;
    background: #fff;
    border-image: url('../../img/lines/line-green.png') 100;
    padding-bottom: 10px;
  }
    .navbar-collapse.show ul, .navbar-collapse.collapsing ul {
    padding-left: 10px;
  }

}

@media (min-width: 992px) {
 .logo{height: 100px;}
h1.home-title{font-size:2.4rem;}
nav.navbar-shrink h1.home-title{font-size:2rem;}
.owl-carousel #id-2852.item img{object-position:center}
.owl-carousel #id-2855.item img{object-position:center -20vh}
.owl-carousel #id-2858.item img{object-position:30% center}
}

        .karten-container {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 1200px; /* Maximale Breite deiner Original-JPG */
            /*box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 12px;*/
            overflow: visible; /* Wichtig, damit Popups oben herausragen können */
            margin-top: 2rem;
        }

        .karten-bild {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 12px;
        }

        /* ==========================================
           2. MARKER & EFFEKTE (SCHWEBEN & PULSIEREN)
           ========================================== */
        .location-marker {
            position: absolute;
            transform: translate(-50%, -50%);
            cursor: pointer;
            z-index: 1;
            outline: none; /* Entfernt den Standard-Rahmen auf Handys */
        }


        /* Der pulsierende Ring im Hintergrund */
        .location-marker::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            /*transform: translate(-50%, -50%);*/
            width: 20px;
            height: 20px;
            background-color: #e61772; /* Standard: Blaues Pulsieren */
            border-radius: 50%;
            z-index: -1;
            animation: pulse 2s infinite;
        }

        /* Individuelle Puls-Farbe f??ocation 2 (Rot)
        #location2::before {
            background-color: rgba(255, 0, 0, 0.35);
        } */

        /* Zeitversetzte Animation f??en zweiten Marker, damit es nat??cher wirkt 
        #location2::before {
            animation-delay: 0.6s;
        }*/

        /* Animationen stoppen, wenn das Popup aktiv ist (Hover/Fokus) */
        .location-marker:hover::before,
        .location-marker:focus-within::before {
            animation: none;
        }

        /* ==========================================
           3. ANIMATIONS-DEFINITIONEN (KEYFRAMES)
           ========================================== */
        @keyframes schweben {
            0% { transform: translateY(0); }
            100% { transform: translateY(-8px); } /* Sanftes Auf- und Abbewegen */
        }

        @keyframes pulsieren {
            0% { width: 20px; height: 20px; opacity: 1; }
            100% { width: 80px; height: 80px; opacity: 0; } /* Ring wird gr?? und unsichtbar */
        }
        
        
 @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        /* ==========================================
           4. INFO-POPUP (DAS INHALTSFENSTER)
           ========================================== */
        .popup-content {
            position: absolute;
            bottom: 15px; /* Platziert das Fenster oberhalb der Sprechblase */
            left: 50%;
            transform: translateX(-50%);
            width: 280px;
            background-color: white;
            color: #333;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
            
            /* Standardm?g versteckt */
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 2;
        }

        /* Kleiner Dreiecks-Pfeil unten am Popup */
        .popup-content::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 8px;
            border-style: solid;
            border-color: white transparent transparent transparent;
        }

        /* POPUP ANZEIGEN (Bei Maus-Hover oder Touch auf Mobilger?n) */
        .location-marker:hover .popup-content,
        .location-marker:focus-within .popup-content {
            visibility: visible;
            opacity: 1;
        }

        /* Styling f??ext & Links innerhalb des Popups */
        .popup-content h3 {
            margin: 0 0 6px 0;
            font-size: 16px;
            color: #111;
        }
        
        .popup-content p {
            margin: 0 0 12px 0;
            font-size: 13px;
            line-height: 1.4;
            color: #666;
        }
        .popup-content a{color:#e61873}
        .popup-content a:hover{color:#ed8b20}
        .popup-content .btn-link {
            display: inline-block;
            background-color: #0066cc;
            color: white;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            margin-right: 5px;
            transition: background 0.2s;
        }

        .popup-content .btn-link:hover {
            background-color: #004499;
        }

        .popup-content .second-link {
            background-color: #e0e0e0;
            color: #333;
        }

        .popup-content .second-link:hover {
            background-color: #cccccc;
        }

    #location1 {top: 58.8%;left:46.6%;}
    #location2 {top: 22.5%;left: 46.6%;}       
    #location3 {top: 50%;left: 22.8%;}
    #location4 {top: 47.2%;left: 37%;}
  .location-marker:hover .popup-content,
.location-marker:focus-within .popup-content {
    visibility: visible;
    opacity: 1;
    z-index: 10; /* Höher als der Marker selbst, erzwingt die Überdeckung */
}   
 @media (max-width: 567px) {
     #location3 .popup-content {
    bottom: 15px;
    left: 70px;
}  
 #location3 .popup-content::after {left: 27%;}
} 
 @media (max-width: 422px) {
#c1514 .ce-row,#c1528 .ce-row,#c1529 .ce-row,#c1530 .ce-row{
display: grid;
    place-items: center;
    }
}    
@media (min-width: 576px) {
       .location-marker::before {width: 25px;height: 25px;}
        #location4.location-marker::before {width: 27px;height: 27px;}
        #location1 {top: 59%;left: 47%;}
        #location2 {top: 22.5%;left: 47%;}
        #location3 {top: 51%;left: 23.5%;}
        #location4 {top: 46.8%;left: 38%;}
}
@media (min-width: 768px) {
        #location1 {top: 55.8%;left: 54%;}
        #location2 {top: 34%;left: 54%;}
        #location3 {top: 50.8%;left: 43.4%;}
        #location4 {top: 48.2%;left: 49%;}
}
@media (min-width: 992px) {
        .location-marker::before {width: 25px;height: 25px;}
        #location1 {top: 56.8%;left: 54%;} 
        #location2 {top: 35.5%;left: 54%;}
        #location3 {top: 51.6%;left: 43.4%;} 
        #location4 {top: 49.6%;left: 49.4%;}
}
@media (min-width: 1200px) {
        .location-marker::before,#location4.location-marker::before  {width: 30px;height: 30px;}
        #location1 {top: 56.8%;left: 54%;} 
        #location2 {top: 35.5%;left: 54%;}
        #location3 {top: 51.6%;left: 43.4%;} 
        #location4 {top: 49.8%;left: 49.4%;}
}        
.location-marker:hover,
.location-marker:focus-within {
    z-index: 999 !important;
}