body {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px; /* Set the base font size for responsive scaling */
    padding: 0;
	margin: 0;
    /*  overflow-y: auto; /* Allow vertical scrolling when content exceeds the viewport */
    /*  OUR COLOR: #37de04  */
}

/* ------------------------------------BALKEN MIT TELEFONNUMMER--------------------------------------------- */

.top-bar {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed); /* Hintergrundfarbe des Balkens */
    color: #fff; /* Textfarbe = Weiß */
	font-family: 'Roboto', sans-serif;
	text-align: center;    /* Textausrichtung zentriert */
    padding: 0.2em; /* Innenabstand für den Balken-Inhalt */
    border-bottom-left-radius: 0.8em;  /* Untere linke Ecke abrunden */
    border-bottom-right-radius: 0.8em; /* Untere rechte Ecke abrunden */
    font-size: 1.05em;

	margin: auto;
    width: 90vw;
}

/* Stil für den Telefonnummer-Link */
.top-bar a {
    color: #fff; /* Link-Farbe = Weiß */
	font-family: 'Roboto', sans-serif;
    text-decoration: none; /* Entfernt die Standard-Link-Unterstreichung */
    font-weight: bold; /* Fettgedruckte Schrift für die Telefonnummer */
    font-size: 1.15em;
}

/* ------------------------------------HEADER--------------------------------------------- */

	/* Header-Stil für Desktops */
header {
  background-color: #fff;
  width: 100vw; /* Breite auf 100% setzen, um den Header über die gesamte Bildschirmbreite zu strecken */
}

h2 {text-align: center;}

/* Header-Logo-Stil für Desktops */
.header-logo {
	width: 70vw;
    height: auto; 
	margin-bottom: 1.2em;
}
@media screen and (min-width: 700px) {
    .header-logo {
        width: 50vw;
    }}
@media screen and (min-width: 1100px) {
    .header-logo {
        width: 30vw;
    }}

/* ------------------------------------MENÜ BUTTON UND DROPDOWN MENÜ--------------------------------------------- */

#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 8em;			/* Hamburger Position  */
  right: 3em;
  width: 2.2em;      /* Hamburger Größe  */
  height: 2.2em;	 /* Hamburger Größe  */
  cursor: pointer;
  z-index: 3;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 0.25em;
  background-color: #007bff;   /* Hamburger Farbe  */
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
	z-index: 2; 		/* Stelle sicher, dass der Button vor anderen Elementen angezeigt wird */
}
.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;   /* Schriftfarbe Menüpunkte  */
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}

/* --------------------------------VIDEO CONTAINER-------------------------------------- */
.video{
	text-align: center;
	margin: auto;
	width: 95%;
	height: auto;
	border-radius: 0.2em;
    margin-top: 2em;
    margin-bottom: 1em;
}
@media screen and (min-width: 600px) {
    .video {
        width: 90%;
    }}
@media screen and (min-width: 900px) {
    .video {
        width: 70%;
    }}
/* ----------------------------- BODY ---------------------------------------- */
                    
/* ----------------------------- HOW CONTAINER ---------------------------------------- */

.how-container {
    text-align: justify; /* Apply "Blocksatz" (justified alignment) to the text */
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 5em;
    margin-bottom: 5.1em;
}
@media screen and (min-width: 600px) {
	.how-container {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 4.1em;
	}}
@media screen and (min-width: 900px) {
	.how-container {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 5.1em;
		font-size: 1.0em;
	}}

.overview {
    text-align: justify; /* Apply "Blocksatz" (justified alignment) to the text */
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 4em;
    margin-bottom: 4.1em;
}
@media screen and (min-width: 600px) {
	.overview {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 3.1em;
	}}
@media screen and (min-width: 900px) {
	.overview {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 2.1em;
		font-size: 1.0em;
	}}
/* ----------------------------- MODEL SECTION ---------------------------------------- */
table {
    border-collapse:collapse;
    margin:1rem;
}
table th, table td {
    padding:.25rem;
    border:solid thin gray;
}
table th {
    background-color:#d7e4f2;
}	
@media all and (max-width: 600px){
table {
    display: block;
}
table caption {
    display: inline-block;
}
table tr {
    display: list-item;
    border: none;
    border-top: solid thin red;
}
table th {
    display: inline-block;
    border: solid thin gray;
    margin-right: 0.2rem;
}
table td {
    display: inline-block;
    border: solid thin gray;
    margin-right: 0.2rem;
}}
.nrm {
    margin-left: 1em;
}
@media screen and (min-width: 700px) {
	.nrm {
  		margin-left: 3em;
	}}
@media screen and (min-width: 1000px) {
	.nrm {
  		margin-left: 7em;
	}}
/* ----------------------------- QUALITY AND SAFETY Section---------------------------------------- */
.quality-container {
    text-align: justify;
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 5em;
    margin-bottom: 5.1em;
}
@media screen and (min-width: 600px) {
	.quality-container {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 4.1em;
	}}
@media screen and (min-width: 900px) {
	.quality-container {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 5.1em;
		font-size: 1.0em;
	}}
/* ----------------------------- APPLICATIONS mit Subpages Section---------------------------------------- */
.sub-container {
    text-align: justify;
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 5em;
    margin-bottom: 2.1em;
}
@media screen and (min-width: 600px) {
	.sub-container {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 2.1em;
	}}
@media screen and (min-width: 900px) {
	.sub-container {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 2.1em;
		font-size: 1.0em;
	}}

.subpages-container {
    line-height: 150%;
}    
@media screen and (min-width: 600px) {
	.subpages-container {
  		padding-left: 3em;
  		padding-right: 3em; 
	}}
@media screen and (min-width: 900px) {
	.subpages-container {
  		padding-left: 7em;
  		padding-right: 7em;
		font-size: 1.0em;
	}}
/* ----------------------------------- FAQ ---------------------------------------- */	
.FAQ-container {
    text-align: justify;
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 5em;
    margin-bottom: 5.1em;
}
@media screen and (min-width: 600px) {
	.FAQ-container {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 4.1em;
	}}
@media screen and (min-width: 900px) {
	.FAQ-container {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 5.1em;
		font-size: 1.0em;
	}}
/* -----------------------------KONTAKT BUTTON---------------------------------------- */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-hover {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    height: 55px;
    display: block;
    text-align:center;
    margin-top: 5em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:5em;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

.btn-hover a {
    text-decoration: none;
    color: #f7b500; 
	font-size: 1.5em;
}
/* ------------------------------FOOTER---------------------------------------- */
.site-footer {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    margin-top: 5em;
    padding: 1.5em 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-content p {
    margin: 0.5em;
    font-size: 0.9em;
}
.site-footer a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
}

/* ------------------------------IMPRESSUM (Künye)---------------------------------------- */

.impressum-content{
        text-align: center; 
        margin-bottom: 5em;
    }

/* ------------------------------Iletisim---------------------------------------- */

.iletisim-content{
        text-align: center;
        margin-bottom: 5em;
    }

.kontaktformular {
    text-align: center;
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 5em;
    margin-bottom: 5em;
}
@media screen and (min-width: 600px) {
	.kontaktformular {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 5em;
	}}
@media screen and (min-width: 900px) {
	.kontaktformular {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 5em;
		font-size: 1.0em;
	}}
/* ------------------------------ TEKNIK BILGILER ---------------------------------------- */
.download-content {
    text-align: justify;
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 5em;
    margin-bottom: 5em;
}
@media screen and (min-width: 600px) {
	.download-content {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 5em;
	}}
@media screen and (min-width: 900px) {
	.download-content {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 5em;
		font-size: 1.0em;
	}}
/* ------------------------------ KATLANABILIR ---------------------------------------- */
.katlanabilir-content {
    text-align: justify;
	padding-left: 1em;
    padding-right: 1em;
    margin-top: 5em;
    margin-bottom: 5em;
}
@media screen and (min-width: 600px) {
	.katlanabilir-content {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 5em;
	}}
@media screen and (min-width: 900px) {
	.katlanabilir-content {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 5em;
		font-size: 1.0em;
	}}
.uygulamalar-container {
    text-align: justify;
	padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 5em;
}
@media screen and (min-width: 600px) {
	.uygulamalar-container {
  		padding-left: 3em;
  		padding-right: 3em; 
		margin-bottom: 5em;
	}}
@media screen and (min-width: 900px) {
	.uygulamalar-container {
  		padding-left: 7em;
  		padding-right: 7em;
		margin-bottom: 5em;
		font-size: 1.0em;
	}}
img.a1 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    width: 90%;
}
@media screen and (min-width: 600px) {
    img.a1 {
        width: 80%; 
    }}
@media screen and (min-width: 990px) {
    img.a1 {
        width: 65%; 
    }}
img.a2 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
@media screen and (min-width: 600px) {
    img.a2 {
        width: 80%; 
    }}
@media screen and (min-width: 990px) {
    img.a2 {
        width: 65%; 
    }}
img.a3 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
@media screen and (min-width: 600px) {
    img.a3 {
        width: 60%; 
    }}
@media screen and (min-width: 990px) {
    img.a3 {
        width: 30%; 
    }}
/* ------------------------------ YAT ---------------------------------------- */
.container-fluid {
    padding-left: 1em; 
    padding-right: 1em;
}
.row {
    margin-top: 2em;
    margin-bottom: 2em;
}
img.ab1 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
@media screen and (min-width: 600px) {
    img.ab1 {
        width: 80%; 
    }}
@media screen and (min-width: 990px) {
    img.ab1 {
        width: 65%; 
    }}