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



/*-- Farben -----------------------------------------------------------------*/
:root               {
  --ciLogoGreen:         #dcf5bc;
  --ciLogoLavender:      rgba(61,19,131,1.0)   /* #3d1383*/;
  --ciLogoLavenderLight: rgba(172,145,210,1.0) /* #ac91d2*/;
  --ciGray:             #515151;
	--ciHover:            blue;
  --ciShadow:           #B5B5B5;
}

.ciLogoGreen    { color: var(--ciLogoGreen); }
.ciLogoGreenBg  { background-color: var(--ciLogoGreen); }
.ciLogoLavender { color: var(--ciLogoLavender); }
.ciLink         { color: var(--ciGray); }
.ciLink:hover   { color: var(--ciHover); }
.ciGray         { color: var(--ciGray); }



/*-- Schriftart, globale Einstellungen --------------------------------------*/
body {
    font-size: 100%;
    -webkit-text-size-adjust: none;
	padding:0;
	margin:0;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	color:var(--ciGray);
	background-color:var(--ciLogoGreen);
	}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
h1, h2, h3, h4, h5, h6 { color: var(--ciLogoLavender); font-weight: bold; }
.ciFrameL { border-radius: none;}
@media all and (min-width: 992px) {
.ciFrameL { max-width: 1060px;
	          border-radius: 15px;
	          box-shadow: 0px 0px 20px 5px var(--ciShadow);
}	
}



/*-- Navigation -------------------------------------------------------------*/
.nav-link       { color: var(--ciLogoLavender); }
.nav-link:hover { color: var(--ciLogoLavenderLight); }
.navbar-nav .nav-link.active       { color: var(--ciLogoLavender); font-weight: bold; }
.navbar-nav .nav-link.active:hover {  color: var(--ciLogoLavenderLight); }
.navbar-toggler       { border: none;
/*                      border-color: none var(--ciLogoLavenderLight); alternative, if border: none; is removed    */
}
.navbar-toggler:focus { box-shadow: none; }
/*-- animated hamburger -----------------------------------------------------*/
/* https://stackoverflow.com/questions/71952260/bootstrap-5-animated-hamburger-starting-off-as-x */
.navbar-toggler span {
  display: block;
  background-color: var(--ciLogoLavender);
  height: 3px;
  width: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.35s ease-out;
  transform-origin: center left;
}

.navbar-toggler span:nth-child(1)                 { transform: translate(0%, 0%) rotate(0deg); }
.navbar-toggler span:nth-child(2)                 { opacity: 1; }
.navbar-toggler span:nth-child(3)                 { transform: translate(0%, 0%) rotate(0deg); }
.navbar-toggler span:nth-child(1)                 { margin-top: 0.3em; }
.navbar-toggler:not(.collapsed) span:nth-child(1) { transform: translate(15%, -33%) rotate(45deg); }
.navbar-toggler:not(.collapsed) span:nth-child(2) { opacity: 0; }
.navbar-toggler:not(.collapsed) span:nth-child(3) { transform: translate(15%, 33%) rotate(-45deg); }
/* the border around the hamburger when clicked: */
.navbar-light .navbar-toggler                     {   color: var(--ciLogoGreenDarker); }
/*-- animated hamburger end -------------------------------------------------*/
/* CSS, falls die der originale (=nicht-animierte) Toggler von Bootstrap 5 verwendet wird */
/* https://stackoverflow.com/questions/73801563/how-to-change-the-color-of-hamburger-icon-in-bootstrap-5 */
/*.navbar-toggler-icon { 
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2861, 19, 131, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	                  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29'  stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.navbar-toggler-icon { 
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2861, 19, 131, 0.75%29'  stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler       { border-color: var(--ciLogoLavenderLight); }
.navbar-toggler:focus { box-shadow: none; }
*/



/*-- Slider -----------------------------------------------------------------*/
/* https://getbootstrap.com/docs/5.0/components/carousel/ */
/* https://stackoverflow.com/questions/48665392/change-bootstrap-carousel-fade-transition */
.carousel-item {
  transition: transform 2.8s ease-in-out;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2.8s;
}



/*-- Infobox (Oeffnungszeiten, Aktuelles )-----------------------------------*/
.info-box-all { 
								z-index: 2; }
.info-box-xs {  width: 18em; }
.info-box-sm {  width: 26em; }
.info-box-sm-top {  margin-top: -80px;}
@media all and (max-width: 992px) {
.info-box-sm-top {  margin-top: 0em}
}
.info-box-col-1-xs { width: 1.8em; }
.info-box-col-1-sm { width: 5.5em; } /* ohne Sonderöffnungszeiten mit "Donnerstag": 5.5em, mit: 6.1em */
.info-box-col-2-xs { width: 2.8em; }
.info-box-col-2-sm { width: 6.5em; } /* ohne Sonderöffnungszeiten mit "Donnerstag": 6.5em, mit: 5.9em  */
.info-box-width-xs { max-width: 576px; }
.aktuelles-box-col-1 { width: 3.8em; }
.info-box-neu-hinweis { color: white; background-color: var(--ciLogoLavender);}


/*-- Footer -----------------------------------------------------------------*/
footer {
	border-top: 4px solid var(--ciLogoGreen);
	font-size:0.8em;
}
footer a       { color: var(--ciGray); }
footer a:hover { color: blue; }
/* source: https://about.meta.com/brand/resources/instagram/instagram-brand/ */
/* layout restrictions: https://about.meta.com/de/brand/resources/instagram/icons/ */
.ciInstagram { height: 29px; width: 29px; margin: 15px; }

/*-- nur Startseite ---------------------------------------------------------*/
#idZuKontakt a       { color: var(--ciLogoLavender); }
#idZuKontakt a:hover { color: var(--ciHover); }

.ciMap { height: 400px;
	       width: 450px; }
@media all and (max-width: 992px) {
.ciMap { width: 300px; }
}
@media all and (max-width: 576px) {
.ciMap { width: 278px; }

}