/* General Styles */
/* Global styles */


/* ===== background: #aabbff; ===== */

body, html {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	color: #333; /* Dunkle Schriftfarbe für besseren Kontrast */
	background: none;
	height: 100%;
    min-width: 360px; /* wegen smartphones */
    
 }

/* Farbverlauf langsam animieren */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Zentrierung des Inhalts */

/*
#root {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: white;
}
*/

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 28px;
  background: #101010;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px;
  z-index: 3;
  margin-right: 20px;
  border: 	2px solid #444;
  display: flex;
}

.navbar .logo {
	display: flex;
	align-items: center;
	margin-left: 50px;
}

.navbar .logo img {
	height: 60px;
	margin-right: 10px;
}



/* ========== MAIN CONTAINER ================================================== */

.main-container {
  margin-top: 	64px; /* Platz für die Navigation */
  padding: 		0px;
  height: 		calc(100vh - 65px); /* Voller Platz abzüglich der Navigation */
  overflow-y: 	auto; /* Nur der Inhalt darf scrollen */
  border-top: 	2px solid #666;
  min-width:	100px;
  height:		800px;
  justify-content: center; /* Zentriert den Inhalt horizontal */
  align-items: center; /* Zentriert den Inhalt vertikal */
}
	
.main-content {
	flex-direction: column;
	background: 	#ffffff;
	width: 			100%;
	/* display: 		flex; */
    min-width:		100px;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
  
    background: linear-gradient(45deg, #fff, #eee, #ddd, #ccc);
    background-size: 300% 300%;
    animation: gradientAnimation 30s infinite linear alternate;
    /*border: 		1px solid #f00*/
  
}

.hero-section {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 300px; /* 100%; */
	width: 1000px; /*100%; */
	/*background: #eee;*/
	position: absolute;
	color: black;
	top: 20%; /* Statt 50%, damit es höher sitzt */
    left: 50%; 
    transform: translate(-50%, -50%);
    
	/* border: 2px solid #00f; */
}

.hero-section-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    flex-direction: column;
    
    height: 400px;
    width: 1000px;
    background: url('https://source.unsplash.com/1600x900/?technology,ai')
        no-repeat center center/cover;
    position: absolute;
    color: black;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*border: 2px solid #eee;*/
}

/* Container für die zwei Spalten */
.features-container {
    display: flex;
    justify-content: space-between;
    width: 80%; /* Spaltenbreite steuern */
    max-width: 800px;
}

/* Jede Spalte */
.features-column {
    list-style: none;
    padding: 0;
    width: 48%; /* Zwei gleich große Spalten */
}

/* Listenelemente */
.features-column li {
    font-size: 20px;
    font-weight: bold;
    color: black;
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Haken und Text */
}

/* Stil für den Haken */
.features-column li::before {
    content: "✔";
    color: limegreen;
    font-size: 24px;
    font-weight: bold;
}

.hero-section-2 ul {
    list-style: none; /* Entfernt Standardpunkte */
    padding: 0;
}

.hero-section-2 li {
    font-size: 14px;
    font-weight: bold;
    color: black; /* Falls es sich besser abhebt */
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Haken und Text */
}

/* Stil für den Haken */
.hero-section-2 li span {
    color: limegreen;
    font-size: 26px;
    font-weight: bold;
}


.section-products {
	padding:		5px;
	height: 		350px;
	width: 			100%;
	backGround:  	#eef;
	border: 		1px solid #aaa;
	scroll-margin-top: 80px; /* oder ein beliebiger Abstand */
}

.section-company {
	padding:		5px;
	height: 		350px;
	width: 			100%;
	backGround:  	#bbf;
	border: 		1px solid #aaa;
	scroll-margin-top: 0px; /* oder ein beliebiger Abstand */
	
}

.section-research {
	padding:		5px;
	height: 		350px;
	width: 			100%;
	backGround:  	none; /*#eff;*/
	border: 		1px solid #aaa;
    scroll-margin-top: 80px; /* oder ein beliebiger Abstand */
	
}

.section-safety {
	padding:		5px;
	height: 		350px;
	width: 			100%;
	backGround:  	#ffe;
	border: 		1px solid #aaa;
		scroll-margin-top: 80px; /* oder ein beliebiger Abstand */
	
}


/* =========== Navbar ======================================================== */


/* ---------- MENU ------------------------------------------------------------------------ */

.menu-container {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 300px;
    height: 100vh; /* Menü über den gesamten Bildschirm */
    background-color: #101010;
    padding: 20px;
    z-index: 1000;
    border: 		1px solid #aaa
}

.menu-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.menu-item {
    padding: 0px;
}

.menu-item a {
    color: white;
    text-decoration: none;
    display: block;
    font-size: 12px;
}

.menu-group {
    padding-left: 20px; /* Versatz nach rechts */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.menu-group > span {
    font-weight: bold;
    padding: 10px;
    display: block;
    color: white;
}

/* Menü-Icon */
.menu-icon {
    font-size: 20px;
    cursor: pointer;
    padding: 0px;
    background: #101010;
    color: white;
    border: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1100;
}



/* ========== OTHER BACKGROUNDS ======================================================== */

.text-background-1 {
	background: #fff;
	height: 40px;
	margin-bottom: 20px;
	opacity: 0.7;
	border: 2px solid #999;
	border-radius: 5px;
}

/* ======== LOGO2 ======================================== */

.logo2 {
	content: "";
	position: absolute;
	background: url('/assets/logo.png') no-repeat center center;
	background-size: contain;
	z-index: 1; /* Herz liegt unter dem Text */
	opacity: 0.4; /* Leicht transparent */
	width: 80%; /* Die Größe des Herzens anpassen */
	height:100%; /* Die Größe des Herzens anpassen */
}

/* =========== Hero Section ==============================*/




.hero-section .content {
	z-index: 1;
	/*max-width: 1000px;*/
	background: rgba(aa, aa, aa, 0.3);
	padding: 20px;
	border-radius: 10px;
	border: 3px solid #999;
}

.hero-section h1 {
	font-size: 2rem;
	margin-bottom: 10px;
	color: #000;
	opacity: 1;
}

.hero-section h2 {
	font-size: 1.5rem;
	margin-bottom: 10px;
    color: #000;
	opacity: 1;
	
}

.hero-section p {
	font-size: 1.2rem;
	margin-bottom: 20px;
	color: #222;
}

.hero-section .highlight {
	color: #00c896;
}

.hero-section button {
	padding: 15px 30px;
	font-size: 1rem;
	font-weight: bold;
	background: #8888ff;
	border: 3px solid #999;
	border-radius: 10%;
	color:		#fff;
	cursor: pointer;
	transition: background 0.3s;
}

.hero-section button:hover {
	background: #666690;
}

/* =========== HEART ======================== */

.pulsing-heart {
	position: absolute;
	top: 65%;
	left: 55%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	/*background-color: #ff6b6b;*/
	border-radius: 50% 50% 0 0;
	/*transform: rotate(-45deg);*/
	/*animation: pulse 2.5 infinite;*/
	z-index: 1;
}

.pulsing-heart::after {
	content:          "";
	position:         absolute;
	top:              50%;
	left:             50%;
	transform:        translate(-50%, -50%);
	background:       url('/assets/heart.png') no-repeat center center;
	background-size:  contain;
	animation:        pulse 2s infinite;
	z-index:          1;     
	opacity:          0.3;   
	width:            150px;   
	height:           150px; 
}

.pulsing-heart::before {
	left: 0;
	transform: translateX(0);
}

@keyframes pulse { 
   0% {	transform:  scale ( 1)     }
  50% { transform : scale ( 1.5 )  }
 100% { transform : scale ( 1.9 )    }
}



/* ===================== Footer =============================================================== */

.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #222;
	color: #ccc;
	padding: 10px 20px;
	text-align: center;
	border-top: 1px solid #444;
	
	z-index:          3;
}

.cookie-banner a {
	color: #00c896;
	text-decoration: none;
	font-weight: bold;
}

.cookie-banner .cookie-buttons {
	margin-top: 10px;
}

.cookie-banner button {
	padding: 10px 20px;
	margin: 0 5px;
	font-size: 1rem;
	background: #00c896;
	border: none;
	border-radius: 20px;
	color: #fff;
	cursor: pointer;
	transition: background 0.3s;
}

.cookie-banner button:hover {
	background: #009970;
}

/* Cookie Settings Footer */
/* Cookie Settings Footer */
.cookie-settings-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #222;;
	color: #fff;
	padding: 10px;
	text-align: center;
	border-top: 1px solid #ddd;
		z-index:          3;
	
}

.cookie-settings-footer a {
	color: #fff;
	text-decoration: none;
	/*font-weight: bold;*/
	cursor: pointer;
	text-decoration: underline;
}

.cookie-settings-footer a:hover {
	text-decoration: underline;
}

/* ========== Language Selector ======================================= */

.language-selector {
    position: relative; /* Basis für die absolute Position des Dropdowns */
    display: inline-block;
    cursor: pointer;
    width: 50px;
    margin-right: 20px;
}

.language-selector .flag {
    font-size: 2.5rem;
    border: none;
    border-radius: 0px;
    background-color: #101010;
    color: #fff;
}

.language-selector .language-options {
    display: none; /* Standard: nicht sichtbar */
    position: absolute;
    right: 0;
    background-color: #202020;
    border-radius: 4px;
    width: 130px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.language-selector .language-option {
    padding: 8px 20px;
    cursor: pointer;
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

.language-selector .language-option:hover {
    background-color: #888; /* Hover-Effekt */
}

.language-selector:hover .language-options {
    display: block; /* Dropdown sichtbar machen */
}

.pdf-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    z-index: 3;
    padding: 20px;
}

.pdf-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff4d4d;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
}

.pdf-print-btn {
    position: absolute;
    top: 20px;
    right: 150px;
    background: #ff4d4d;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
}

.pdf-viewer {
    width: 100%;
    height: calc(100vh - 60px); /* Höhe an den Schließen-Button angepasst */
    border: none;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
      flex-direction: column;
}

.pdf-viewer-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Vollbild */
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
}

.pdf-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #101010;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  margin-right: 20px;

}

.pdf-header button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pdf-header button:hover {
  background-color: #0056b3;
}

.disabled-product {
  pointer-events: none; /* Klicks komplett unterbinden */
  color: #999;          /* Grau anzeigen */
  opacity: 0.7;         /* Leicht abgeblendet */
  text-decoration: none;
  cursor: default;      /* Kein Link-Cursor */
}