body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

body, html {
  height: 100%;
  line-height: 1.8;
}

/* Full height image header */
.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("./w3images/mac.jpg");
  min-height: 100%;
}

.naviBar{
	padding:10px;
}

.v-align{
	display: flex;
	align-items: center;
}

.yego-link {
	color: #faa92d;
	text-decoration:none;
}

.yego-link:hover{
	color: #f29935;
}




.cookie-alert {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #333;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.cookie-alert p {
    margin: 0 0 10px;
}

.cookie-alert button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.cookie-alert button:hover {
    background-color: #45a049;
}

.icon-left {
  position: relative;
  padding-left: 30px; /* Espace pour l’icône */
}

.icon-left::before {
  content: "";
  background: url('./icon/download.svg') no-repeat left center;
  background-size: 16px 16px;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.naviButton{
	/* width:100%; */
	font-size: calc(14px + 0.2vw);
	height:40px;
	margin:0px;
	padding-top: 0px;
}

/* Werbung section */

.mySlides {display:none;}

werbungFrame{
	width:80%;
}

.angebotSlide{
	margin: auto;
	max-width:1440px;
	max-height:640px;
	
}

.angebotFrame {
	width:39%;
	height: 50%;
	min-width: 220px;
	margin-left: 4%;
	padding-top: 4%;
}


.angebotBesch{
	width: 100%;
	min-width: 220px;
	height: 100%;
	font-size: calc(10px + 1.2vw);
	text-align:left;
	color     : #FFFFFF;
	padding-left: 10%;
	padding-top : 15%;
}

.angebotBeschTxt{
	margin-bottom:10px;
	margin-top:0px;
}

/* News section */

newsFrame{
	width:20%;
}

.nTitle{
	font-size:large;
	color: #faa92d;
	}
	
.nInhalt{
	
}

/* Angebot Sektion */

.angebotItem{
	border:solid 5px #000000;
	margin-top:5px;
	margin-bottom:5px;
}

.angebotDescription{

}


@media (max-width: 600px) {
	.angebotDescription{
		min-height:0px;
	}
}


.angebotLink{
	font-size: 0.8em;
}

.angebotLinkSmall{
	font-size: calc(10px + 1.2vw);
	padding: 0px; 
	padding-right:10px;
	padding-left:10px;
}

/* Vorstand sektion */

.vorCard{
	width:250px;
	}

.vorFoto{
	 width:100%;
}

/* Download Sektion */

.catTitle{
	height:200px;
	}
	
/* Links */
	
.linkBox{
	margin:5px;
}

.linkButton{
	width:150px;
	position:absolute;
	bottom:10px;
}

.linkStyle{
	color: #f29935;
	font-size:1.5em;
	text-decoration:none;
	
}

.linkStyle:hover{
	color: #FFFFFF;
}

.linkFrame{
	margin:auto;
}


/* Fuss bar */
	
.fussBar{
	margin:0px;
}

stickyBlock{
	position: fixed;
	bottom: 0;
}

.kontaktLogo{
	text-align:right;
}

@media (max-width: 726px) {
	.kontaktLogo{
		text-align:left;
	}
}


@media (max-width: 830px) {
	.hideFootBar{
		display:none;
	}
}

.open-modal-btn {
      /* background-color: #007BFF;
      color: white; */
      border: none;
      border-radius: 6px;
      cursor: pointer;
      /* font-size: 16px; */
      transition: background-color 0.3s;
    }

.modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

/* Contenu de la modale */
.modal-content {
      background: white;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      text-align: center;
      max-width: 400px;
      width: 90%;
    }

.modal-content p {
      margin: 0 0 20px;
      font-size: 16px;
      line-height: 1.5;
    }

.close-btn {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

.close-btn:hover {
      background-color: #45a049;
    }

/*
 * Ca ne marche pas, car il faudrait faire une div de la même taille
 * qui ne serait pas réactive...
.itv{
	background-image:url("./img/internet_tv.jpg");
}
*/