/* source-sans-pro-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/source-sans-pro-v21-latin-300.eot'); /* IE9 Compat Modes */
  src: url('fonts/source-sans-pro-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/source-sans-pro-v21-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/source-sans-pro-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/source-sans-pro-v21-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/source-sans-pro-v21-latin-900.eot'); /* IE9 Compat Modes */
  src: url('fonts/source-sans-pro-v21-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/source-sans-pro-v21-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/source-sans-pro-v21-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/source-sans-pro-v21-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/source-sans-pro-v21-latin-900.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'Ephesis';
	src: url('fonts/Ephesis-a3158c04167e30bd4a0906278559cd60.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Ephesis';
	src: url('fonts/Ephesis/Ephesis-0a895359df28036f19fed186bc9802dd.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Ephesis';
	src: url('fonts/Ephesis-1b15a6ef447796bf214b059b5af1af90.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Great Vibes';
	src: url('fonts/Great%20Vibes-056eae7dcaa0f16f360c22e9cd918d97.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: 'Great Vibes';
	src: url('fonts/Great%20Vibes-6b07e3fb1e650d650b71f5dede6aa82b.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Great Vibes';
	src: url('fonts/Great%20Vibes-83be0dd60665dcd729b84c53a1de4e3c.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+1F00-1FFF;
}

@font-face {
	font-family: 'Great Vibes';
	src: url('fonts/Great%20Vibes-b3d0571f6d1ba512072851223f7febee.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Great Vibes';
	src: url('fonts/Great%20Vibes-280e9e5d9d44d195e4a8eee6b22f5a03.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Great Vibes';
	src: url('fonts/Great%20Vibes-a5a41b09a9350eafcaf8624a95722625.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Allgemein */

:root {
	/* Website Hintergrundfarbe usw. */
	--bg-color: #FAFDFA;
	/* --text-color: #00414B; */
	--text-color: #111111;
	
	--card-bg-color: #f4f4f4;
	--dark-mode-toggle-bg-color: #333333;
	--contrast-color: #ffffff;
	--menu-hover-color: #3c403e;
	--menu-hover-text-color:#ffffff;
	--footer-color: #464F50;
	--footer-text-color: #ffffff;
	--nav-bg-color: #ffffff;
	--cards-dunkel-bg: #595959;
  --bg-dropdown: #ffffff; /* Menu background */
  --bg-dropdown-hover: #ffffff; /* Menu hoverbackground */
  --cards-bg: #124495;
  --cards-text: #ffffff;

--cards-bg-hover: #ffffff;
  --cards-text-hover: #000000;


  --cards-aktuell-bg: #961814;
  --cards-aktuell-text: #ffffff;
  
  --navbar-toggler-icon-bg: #f4f4f4;
}

[data-theme="dark"] {
	--bg-color: #1a1a1a;
	--text-color: #ffffff;
	--card-bg-color: #333333;
	--dark-mode-toggle-bg-color: #fff;
	--contrast-color: #106523;
	--footer-color:  #000000;
  --footer-text-color: #ffffff;
	--nav-bg-color: #000000;
	--cards-dunkel-bg: #106523;
  --menu-hover-color: #106523;
  --bg-dropdown: #000; /* Menu background */
  --bg-dropdown-hover: #000; /* Menu hoverbackground */
  --cards-bg:  #161616; 
  --cards-text: #fafbfc;

--cards-bg-hover: #000000;
  --cards-text-hover: #ffffff;

  --cards-aktuell-bg: #161616;
  --cards-aktuell-text: #ffffff;
  --navbar-toggler-icon-bg: #f4f4f4;
}

body {
	line-height: 1.5;
    font-family: 'Source Sans Pro', sans-serif;
	color: var(--text-color);
  /* Textgröße der Website usw. */
    font-size: 1.25rem;
    background-color: var(--bg-color);
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    padding: 0;
    font-weight: 300;
   

     hyphens:auto; /* Erlaubt automatische Worttrennungen */
word-wrap: break-word; /* Erlaubt das Umbruch von langen Wörtern, um diese an den Container anzupassen */
-webkit-hyphens: auto; /* Für Safari */
-moz-hyphens: auto; /* Für Firefox */
-ms-hyphens: auto; /* Für Internet Explorer */





}








.inhaltstext {
	/* line-height: 1.6; */
    padding-bottom: 12rem;

    
   
}

.inhaltstext a {
	color: var(--text-color);
    text-decoration: underline !important; 
	
}

.inhaltstext a:hover {

    font-weight: bold;
	
}

.inhaltstext img:hover {

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
	
}



/* ########### RR H2 Überschrift ###############*/

h1 {
   font-family: 'Source Sans Pro', sans-serif;
  /* font-family: 'Ephesis', serif; */
  font-size: 3.50rem; line-height: 1.4;
	/* letter-spacing: -1.0; */
    hyphens: auto; /* Erlaubt automatische Worttrennungen */
word-wrap: break-word; /* Erlaubt das Umbruch von langen Wörtern, um diese an den Container anzupassen */
-webkit-hyphens: auto; /* Für Safari */
-moz-hyphens: auto; /* Für Firefox */
-ms-hyphens: auto; /* Für Internet Explorer */
/* font-weight: 400; */
/* text-transform: uppercase;  */
}


h2 { font-size: 2.0rem; font-weight: 400; line-height: 1.4;
	letter-spacing: -0.20;
    hyphens: auto; /* Erlaubt automatische Worttrennungen */
word-wrap: break-word; /* Erlaubt das Umbruch von langen Wörtern, um diese an den Container anzupassen */
-webkit-hyphens: auto; /* Für Safari */
-moz-hyphens: auto; /* Für Firefox */
-ms-hyphens: auto; /* Für Internet Explorer */
}


h3 { 
    font-size: 2.0rem; font-weight: 400; line-height: 1.4;
	letter-spacing: -0.20;
    hyphens: auto; /* Erlaubt automatische Worttrennungen */
word-wrap: break-word; /* Erlaubt das Umbruch von langen Wörtern, um diese an den Container anzupassen */
-webkit-hyphens: auto; /* Für Safari */
-moz-hyphens: auto; /* Für Firefox */
-ms-hyphens: auto; /* Für Internet Explorer */
    /* text-transform: uppercase;  */
}

h4 { font-size: 1.5rem; }

h5 { font-size: 0.875rem; }



h4 { font-weight: 400; }

h5,
h6 { 
    font-weight: 400; 
	
	line-height: 1.5;
	margin: 0 0 30px 0;
	font-family: 'Source Sans Pro', sans-serif;
	margin-bottom: 20px;
	font-size: 0.875rem;}


	@media (max-width: 760px) {
		h1 { font-size: 2.2rem; font-weight: 300; line-height: 1.1;}
		h2 { font-size: 1.8rem; font-weight: 300;}
    h3 { font-size: 1.6rem; font-weight: 300;}
   
	}

  a {
	text-decoration: underline !important;
    color: var(--text-color);
}

a:hover
 { 

	
	 
	}




a img { border: none; }

img { max-width: 100%; }


iframe {
	width: 100%;
	border: 0 !important;
	overflow: hidden !important;
}

.a2 {
	text-decoration: underline !important;
	color: var(--text-color);
}
.a2:hover
 { 

	color: var(--text-color);
	 
	}

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--contrast-color);
	color: var(--text-color);
	padding: 8px 16px;
	z-index: 100;
	text-decoration: underline;
	border-radius: 4px;
	transition: top 0.3s;
}

.skip-link:focus {
	top: 0;
}


header {
	text-align: center;
	color: var(--text-color);
	z-index: 100;
	position: fixed;
	width: 100%; 
	background: var(--nav-bg-color);
}


.container {

	margin: 0 auto;
	width: 1080px;
  
}

@media (max-width: 1190px) {
	
    .container {
		
		width: 95%;

	}
}
@media (max-width: 1024px) {
	
  .container {
  
  width: 90%;

}
}


.container-slider {

	margin: 0 auto;
	width: 100px !important;
}


.container-cards-oben {

	margin: 0 auto;
	width: 1080px;
}

@media (max-width: 1190px) {
	
    .container-cards-oben {
		
		width: 90%;

	}
}

/* Bestimmt das top-Padding der Cards im slider */
#geisfeldtop {
	margin-top: -62px;

}

  
 

   @media (max-width:431px) {

	#geisfeldtop  {
	 

		padding: 0px;
	
	
	
	  }
  
  } 

  @media (max-width:375px) {

    #geisfeldtop  {
     
  
      padding: 0px;
    
      margin-top: -12px;
    
      }
    
    } 



#products,
#about {
	padding-top: 100px;
}

.navbar-light
{
  background-color: var(--bg-color) !important;
  	color: var(--text-color) !important;
}

.navbar,
.carousel {
	border-bottom: 0px solid #888;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
 color: #ffffff;

 
}



/* Navigation */

.nav-link {
  
	cursor: pointer;
  /* background-color: #006600; */
  /* background-color: #15605C; */
  /* border-radius: 8px 8px 0px 0px ; */
  /* color: #ffffff !important; */
  padding: 15px 15px 4px 15px !important;
  text-decoration: none !important;
  background-color: var(--bg-color) !important;
  	color: var(--text-color) !important;
    
}

/* Menupunkte oberste Ebene über DROPDOWN */

.dropdown-toggle{


  padding: 15px 15px 4px 15px !important;



}

.dropdown-toggle:hover{

  /* background-color: yellow !important; */
  /* background-color: #fde725 !important; */
  



}

/* Menupunkte oberste Ebene */

.nav-link:active,
.nav-link:hover {

 
	/* color: rgb(255, 255, 255) !important; */

 border-radius: 5px 5px 0px 0px ;


  /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);  */

  /* background-color: yellow; */

  /* background-color: #fde725 !important;  */
  background-color: var(--cards-bg) !important;
  color: var(--cards-text) !important;
/* color: #000 !important; */


}

.icon-link:active svg,
.icon-link:hover svg {
	color: rgb(23, 48, 23);
  
}

@media (max-width: 991px) {

	.nav-link {
    margin: auto;
    width: 70%;
    cursor: pointer;
    background-color:transparent;
    border-radius: 0px ;
    color: #000000 !important;
    

  }

.nav-link:active,
  .nav-link:hover {
	/* color: rgb(255, 255, 255) !important; */
  

  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;

  /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);  */

  /* background-color:#006600; */
  /* background-color: #15605C; */

  border-radius: 0px 0px 0px 0px;
  
 
}
.nav-bar{

  padding-bottom: 30px !important;
  
}



}




.dropdown-item {

  background-color: var(--cards-bg) !important;
  color: var(--cards-text) !important;
  /* Erzeugt bei Bedarf eine trennlinie im dropdownmenu */
 margin-bottom: 0px; 
 
}

.dropdown-item:hover {

  background-color: var(--card-bg-color) !important;
  color: var(--text-color) !important;

}


 @media (max-width: 1200px) {
.nav-link, .dropdown-toggle, .dropdown-item {

  font-size: 1.0rem !important;
  padding: 15px 10px 15px 10px !important;

 
}
/* Bildergalerien Menupunktbreite  */
.dropdown-toggle

{

width: 70%;
padding: 15px 15px 15px 15px !important;

}


} 







/* Dropdown Menupunkte */

.dropdown a {
  display: block;
  padding: 0.5rem 1rem;
 color: var(--text-color);
  text-decoration: none !important;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  font-weight: 400;
  
 font-size: 1.25rem;
  background-color: var(--bg-dropdown);
  
}

.dropdown a:hover {

  color: var(--text-color) !important;
  /* border-radius: 0px 0px 12px 12px; */
/* background-color: #006600; */
/* background-color: #15605C; */
/* background-color: #fde725 !important;  */
background-color: var(--cards-bg) !important;
  color: var(--cards-text) !important;
}

/* Dropdown Menucontainer */

.dropdown-menu  {

border-radius: 0px 12px 12px 12px;

padding: 10px 0px 10px 0px;
margin-left: -3px;

background-color: var(--cards-bg) !important;

}

@media (max-width: 990px) {




  
	.dropdown-menu  {

    border-radius: 0px 0px 12px 12px;
    
   /* Breite des Mobilen Dropdownmenus */
    margin-left: 0px;
    width: 70%; 
    margin: auto;
    color: #ccc !important;
    background-color: var(--bg-color) !important;

    }

.dropdown-item {

  background-color: transparent !important;
  color: var(--text-color) !important;
  font-size: 1.5rem !important;

}





   /* Mehrstufige Dropdown-Menüs */
.dropdown-menu .dropdown-menu {
  left: 100%;
  top: 0;
  margin-top: -1px;
  display: none;
  position: absolute;
}

.dropdown-menu .dropdown:hover > .dropdown-menu {
  display: block;
  
}

/* Kein Hover-Öffnen */
.dropdown-submenu > .dropdown-menu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.1rem;
  z-index: 1000;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: none; /* Verhindert versehentliches Öffnen per Hover */
}


    .dropdown a:hover {
      
      color: #ffffff;
      /* background-color:#006600; */
      /* background-color: #15605C; */
    
    }

/* Mobilmenu DROPDOWN*/

    .dropdown-toggle:hover
    {
      border-radius: 10px 10px 0px 0px;
      /* background-color: #006600 !important; */
      /* background-color: #15605C !important; */
      
    }

    .nav-link, .dropdown-toggle {

      font-size: 1.5rem !important;
    color: var(--text-color) !important;


    }
    

/* Mobilmenu DROPDOWN Untermenupunkte */
.dropdown-item {

font-size: 1.5rem !important;
   
}


  .navbar
  {
    
    padding-top: 5px;
    padding-bottom: 10px;

  }
    

  .facebooklink
  {
margin-left: -60px;
    margin-bottom: 20px;
  }
    }




.dropdown-menu a:hover {

 
  /* background-color:#006600; */

  /* background-color: #15605C; */
  /* background-color: #fde725 !important; */
  color: #000 !important;
  background-color: #fff !important;

}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 1rem;
 
  
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  position: absolute;
  bottom: 20%;
  bottom: 8rem;
  z-index: 10;

  
  opacity: 1;
  padding: 15px;
  

  /* background-color: #4c5f71; */
  margin: 0 15% 0% 15%;
  /* box-shadow: 0 8px 16px 0 rgba(41, 36, 36, 0.8);  */
}








@media (max-width: 667px) {
  .carousel-caption {
  
    z-index: 10;
  
    
    opacity: 1;
    padding: 15px;

  
   
    margin: 2% 5% 0% 5%;
  }
  }

  @media (max-width: 320px) {
    .carousel-caption {
    
     
      padding: 15px;
   
    font-size: smaller;
     
      margin: 2% 5% 0% 5%;
    }
    }


/* Declare heights because of positioning of img element */

/* SLIDER Bild Größe usw. */

.carousel-item {
  position: relative;
  height: 100%;  /* Muss so stehen bleiben!*/
  overflow: hidden;
}

.slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%; /* Muss so stehen bleiben!*/
  background-size: cover;
  background-position: center;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}

.slider-image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-size: cover;
  background-position: center;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}




.carousel-caption {
  position: absolute;
  
  bottom: 30px;
  z-index: 10;
  opacity: 1;
  padding: 2px;
  margin: 0 5% 0% 5%;

  font-size: smaller;
}




}

@media (max-width: 320px) {
	

.btn-lg {
  font-size: smaller;
}

.carousel-caption {

  
  bottom: 20px;

}

}




.caption-slider
{

padding: 15px;
border-radius: 10px; 

width: fit-content;

box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);

}



/* transition duration to control the speed of fade effect */

.carousel-item {
  transition: transform 2.6s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2.6s;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 5.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
    
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}







/* Produkt Cards */

.card-image {
	height: 500px;
	background-size: cover;
	background-position: center;
  filter: brightness(50%);
}

@media (max-width: 991px) {
	.card-group {
		display: flex;
		flex-flow: column wrap;
	}
}

/* Über uns */

.about-image {
	width: 500px;
	height: 280px;
	border-radius: 15%;
	background-position: center;
	background-size: cover;
}


@media (max-width: 991px) {
	.about-image {
    width: 100%;
    
  }
}



/* Footer */

.footer {
	font-family: sans-serif;
	font-size: 1rem;
	text-align: center;
	border-top: 2px solid #a2a1a1;
  /* background-color:#006600; */
  /* background-color: #15605C; */
 
     background-color: var(--footer-color) !important;
     color: var(--footer-text-color) !important;





}

.footer a {
text-decoration: none !important;
/* color: #ffffff !important; */
 background-color: var(--footer-color) !important;
     color: var(--footer-text-color) !important;
}

.footer a:hover {
text-decoration: underline !important;
/* color: #ffffff !important; */
 background-color: var(--footer-color) !important;
     color: var(--footer-text-color) !important;
}

#logo {


padding-left: 0%;
height: 55px;
margin-bottom: 0px;
margin-right: -0px;
margin-left: -0px;
margin-top: 2px;
z-index: 2;
padding-top: 10px;

}


#logo img {
		
 width: 200px;
/* height: 100px;   */

background-color: #ffffff;
position: static;
padding-top: 0px; 
padding-left: 5px; 
padding-right: 10px; 
padding-bottom:   10px;
 border-radius: 15px;
  box-shadow: 5px 5px 5px  rgba(0,0,0,0.2); 


}

  .logo-text{
  
color: #000;
  /* margin-top: 5px; */
  
  }
  



/* @media (max-width: 320px) {
.logo-text{

 font-size: smaller;
padding-right: 20px;

}

	#logo img {
		
    height: 60px;
width: 50%;
padding-right: 0px;
margin-right: -1px;
		margin-top: 10px;
	margin-left: 10px;
	
	}
} */


@media (max-width: 1024px) {

	#logo {
		display: block;
padding-left: 0%;
height: 50px;
margin-bottom: 15px;
margin-right: -3px;
margin-left: -25px;

	}


	#logo img {
		
       /* width: 100px;
		height: 100px;  */


		position: static;
		padding-top: 0px;
		padding-bottom: 5px;

	
	}

}



@media (max-width: 545px) {

	#logo {
	font-size: smaller;
padding: 10px 0px 0px 0px;

/* height: 50px; */
/* margin-bottom: 15px; */
margin-right: -20px;
margin-left: -30px;
margin-top: -10px;


	}

/* Logo breite */

	#logo img {
		
    height: 80px;
width: 70%;
padding-right: 10px;
margin-right: -1px;
		margin-top: 10px;
	margin-left: 0px;
	
	}

}

.card-cover {
  background-color: #212529;
  border-radius: 15px;
  padding: 10px;

}


.navbar-toggler-icon
{

  background-color: var(--navbar-toggler-icon-bg) !important;
  
  }

@media (max-width: 375px) {

	.navbar-toggler {

   margin-right: -22px;
  margin-left: -20px;
  
  }

}



  
.col {
  z-index: 1 !important;
}
       

/* .btn-lg
{
  width: px;
} */

.btn-outline-success:hover  {
  /* background-color:#006600 !important; */
  /* background-color: #fde725 !important; */
 
  font-weight: 400;
  box-shadow: 3px 3px 3px  rgba(0,0,0,0.2); 
  
}
/* Buttons in CARDS */
.btn-success {
  /* background-color:#006600 !important; */
  /* background-color: #C75457 !important; */

  font-weight: 400;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); 
  background-color: var(--cards-bg) !important;
     color: var(--cards-text) !important;
}

.btn-success:hover {
  /* background-color:yellow !important; */
  /* background-color: #fde725 !important; */
 
  font-weight: 400;
  
  background-color: var(--cards-bg-hover) !important;
     color: var(--cards-text-hover) !important;
}



.cards-aktuell {
background-color: var(--cards-aktuell-bg) !important;
color: var(--cards-aktuell-text) !important;
font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: right;
min-height: 70px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); 
border-radius: 8px 8px 8px 8px;
}
.cards-aktuell:hover {


background-color: var(--bg-color) !important;
     color: var(--text-color) !important;
}





.caption-slider-title
{
  background-color:#006600;
  width: fit-content;
  border-radius: 8px;
  padding: 5px 15px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); 
 font-weight: bolder;
}

.icon-headphones {
  width: 30px;
 
}

/* Buttons im Slider */

.cardsweight

{
font-weight: 400;
  }


.button-mobile

{
  /* font-size: larger; */
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: right;
min-height: 70px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); 
border-radius: 8px 8px 8px 8px;
 background-color: var(--cards-bg) !important;
     color: var(--cards-text) !important;




}

.button-mobile:hover

{
background-color: var(--bg-color) !important;
     color: var(--text-color) !important;



    }



@media (max-width: 990px) {

	.button-mobile,.cards-aktuell {

/* font-size: smaller; */
font-size: 1.1rem;

	}


}



@media (max-width: 375px) {

	.button-mobile,.cards-aktuell  {

/* font-size: small; */
font-size: 1.1rem;

	}
}

@media (max-width: 344px) {

	.button-mobile,.cards-aktuell  {

/* font-size: small; */
font-size: 0.9rem;

	}


}
.div-nebeneinander
{
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.div-spalte
{
    width: 50%;
    
}




@media (max-width: 760px) {
	
    .div-nebeneinander {
		
		display: block;

	}

  .div-spalte
    {
        width: 100%;
        /* text-align: center; */
    }
  }


/* Container für den SLIDER "carousel" höhe usw. */

  #myCarousel
  {

margin-bottom: -30px !important; 
height:45rem;

}

.carousel-inner {

  height:45rem;

}

.slider-image {

  height:45rem;

}


/* MOBIL Container für den SLIDER "carousel" höhe usw. die .rem - werte sollten gleich sein */

@media (max-width: 1380px) {

#myCarousel
  {

margin-bottom: -30px !important; 
height:25rem;

}

.carousel-inner {

  height:25rem;

}

.slider-image {

  height:25rem;

}
} 

@media (max-width: 932px) {
	#myCarousel
  {

margin-bottom: -30px !important; 
height:30rem;

}

.carousel-inner {

  height:30rem;

}

.slider-image {

  height:30rem;

}
} 

@media (max-width: 375px) {
	#myCarousel
  {

margin-bottom: 20px !important; 
height:15rem;

}

.carousel-inner {

  height:15rem;

}

.slider-image {

  height:15rem;

}
} 

.buttonfocus {
  text-decoration: none !important;
  /* background-color: var(--bg-button-focus-hover) !important; */
  /* color:var(--text-button-focus) !important; */
  
}
.buttonfocus:hover, .buttonfocus:focus {
  /* transform: scale(1.05) !important; */
  /* outline: 3px solid #007BFF  !important; */
  /* text-decoration: underline !important; */
}


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

  












.darkmode-toggle {
  padding: 0.5em 1em;
  font-size: 1rem;
  background-color: var(--bg-color, #eee);
  color: var(--text-color, #000);
  border: 2px solid #444;
  border-radius: 0.25em;
  cursor: pointer;
}

.darkmode-toggle:focus {
  outline: 3px solid #0078d4;
  outline-offset: 2px;
}

.visueller-status::after {
  content: attr(data-status);
  margin-left: 0.5em;
  font-weight: bold;
  font-size: 0.9em;
  color: #555;
}


[data-theme="dark"] .light-only {
  background-color: #f8f9fa !important;
  color: #000000 !important;
}




#goToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  background: var(--cards-bg) !important;        /* Anpassen: Farbe */
  color: var(--cards-text) !important;
  /* color: #fff; */
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.2s, opacity 0.3s;
  opacity: 0.8;
  outline: none;
}
#goToTop:focus,
#goToTop:hover {
  background: #ffffff !important;         /* Anpassen: Hover-Farbe */
  opacity: 1;
  color: #000000 !important;
}
@media (max-width: 600px) {
  #goToTop {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    bottom: 1rem;
    right: 1rem;
  }
}

@media (max-width: 768px) {
  #goToTop {
    display: none !important;
  }
}






.parallax {
	background-color: transparent;
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	overflow: hidden;
	will-change: auto;
}

.article-card {
  border-radius: 8px;
  /* box-shadow: 0 8px 24px rgba(0,0,0,0.17); */
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  height: 100%;
  
  
}
.article-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.article-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none !important;
  
}
.article-link:focus, .article-link:hover {
  /* background-color: #fde725 !important; */
  background-color: var(--bg-dropdown-hover) !important;
  color:var(--text-color) !important;
  

}




/* ############## Container für den SLIDER "carousel2" höhe usw. ########### */

  #myCarousel2
  {

margin-bottom: -30px !important; 
height:45rem;

}

.carousel-inner2 {

  height:45rem;

}

.slider-image2 {

  height:45rem;

}


/* MOBIL Container für den SLIDER "carousel2" höhe usw. die .rem - werte sollten gleich sein */

@media (max-width: 1380px) {

#myCarousel2
  {

margin-bottom: -30px !important; 
height:25rem;

}

.carousel-inner2 {

  height:25rem;

}

.slider-image2 {

  height:25rem;

}
} 

@media (max-width: 932px) {
	#myCarousel2
  {

margin-bottom: -30px !important; 
height:30rem;

}

.carousel-inner2 {

  height:30rem;

}

.slider-image2 {

  height:30rem;

}
} 

@media (max-width: 375px) {
	#myCarousel2
  {

margin-bottom: 20px !important; 
height:15rem;

}

.carousel-inner2 {

  height:15rem;

}

.slider-image2 {

  height:15rem;

}
} 


/* Bestimmt das top-Padding der Cards im slider */
#geisfeldtop2 {
	margin-top: -162px;

}

  
 

   @media (max-width:431px) {

	#geisfeldtop  {
	 

		padding: 0px;
	
	
	
	  }
  
  } 

  @media (max-width:375px) {

    #geisfeldtop  {
     
  
      padding: 0px;
    
      margin-top: -12px;
    
      }
    
    } 


.ansprechfoto {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4; 
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
}



.blur-placeholder {
  filter: blur(15px);
  opacity: 0.8;
  pointer-events: none;
}