/* Universal box-sizing rule: Padding and border are included in the element's total width and height */
*, *::before, *::after {
  box-sizing: border-box;
}

/* --- Font-face Definitionen --- */
@font-face {
  font-family: 'Gilroy ExtraBold';
  src: url(../fonts/Gilroy-ExtraBold[1].ttf);
  font-weight: 800; /* Sicherstellen, dass der Font als ExtraBold geladen wird */
  font-style: normal;
}

@font-face {
  font-family: Gilroy-Regular;
  src: url(../fonts/Gilroy-Regular.ttf);
}

@font-face {
  font-family: Gilroy-Medium;
  src: url(../fonts/Gilroy-Medium.ttf);
}

@font-face {
  font-family: Gilroy-SemiBold;
  src: url(../fonts/Gilroy-SemiBold.ttf);
}

@font-face {
  font-family: Entypo;
  src: url(../fonts/Entypo.otf);
}

/* --- html, body Stile --- */
html {
  overflow-y: scroll; /* **WICHTIG:** Erzwingt, dass der vertikale Scrollbalken immer sichtbar ist */
  overflow-x: hidden; /* Verhindert weiterhin horizontalen Scrollbalken */
  height: 100%; /* Stellt sicher, dass das html-Element die volle Höhe einnimmt */
  width: 100%; /* Stellt sicher, dass das html-Element die volle Breite einnimmt */
}

body {
  margin: 0;
  padding: 0;
  width: 100%; 
  min-height: 100vh; /* Stellt sicher, dass der Body immer mindestens die Viewport-Höhe einnimmt */
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: white; /* Textfarbe */
  background-color: #000; /* Schwarzer Hintergrund als Fallback */
  
  display: flex;
  flex-direction: column; 
}

/* --- Stil für den Canvas, damit er den Hintergrund bildet --- */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Bezieht sich auf 100% des Viewports, deckt Scrollbalken ab */
  height: 100%;
  z-index: -1; /* Sorgt dafür, dass der Canvas hinter dem Inhalt liegt */
}

/* NEUER WRAPPER FÜR ALLE INHALTE VOR DEM FOOTER */
.content-wrapper-for-footer {
    flex-grow: 1; /* Dieser Wrapper nimmt den gesamten verfügbaren Platz ein */
    /* Dadurch wird der Footer nach unten gedrückt, wenn der Inhalt kürzer ist */
    /* Und der Wrapper scrollt mit dem Inhalt, wenn er länger ist. */
    display: flex; /* Auch dieser Wrapper sollte flex sein, um seine Kinder zu organisieren */
    flex-direction: column;
}

/* --- Stile für den Hauptinhaltsbereich --- */
.main-content-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 90%;
    max-width: 800px;
    margin: 0 auto; 
    padding: 20px 20px 80px 20px;
    z-index: 10;
}

.mail-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; /* <<< NEU: Vertikal zentriert die Elemente innerhalb des Flex-Containers */
    gap: 5px; /* Optional: Fügt einen kleinen Abstand zwischen Symbol und Text hinzu */
    margin-top: 0px; /* Sicherstellen, dass keine ungewollte obere Marge vorhanden ist */
    margin-bottom: 20px; /* Anpassung des unteren Abstands nach Bedarf */
}

.references-content-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    width: 90%;
    max-width: 1400px;
    margin-top: 0 auto; 
    padding: 70px;
    z-index: 10;
}

/* --- Stil für das Logo-Bild --- */
.main-logo {
    max-width: 490px;
    width: 100%;
    height: auto;
    display: block;
}

/* --- Stil für den Subheading --- */
.subheading {
    font-family: 'Gilroy ExtraBold', sans-serif;
    font-size: 2.8em;
    color: white;
    margin-bottom: 40px;
	margin-top: 80px;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.1);
}

.tagline {
    font-family: 'Gilroy ExtraBold', sans-serif;
    font-size: 2.8em;
    color: white;
    margin-bottom: 40px;
	margin-top: 40px;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.1);
}

.subsubheading {
    font-family: 'Gilroy ExtraBold', sans-serif;
    font-size: 2.5em;
    color: white;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.1);
    position: absolute; /* Aus dem normalen Dokumentfluss nehmen */
    bottom: 150px; /* Abstand vom unteren Rand des .main-content-wrapper */
    left: 50%; /* Startpunkt bei 50% der Breite des Elternelements */
    transform: translateX(-50%); /* Zentriert das Element horizontal basierend auf seiner eigenen Breite */
}

.chevrondown{
	max-width: 3%;
    width: 100%;
    height: auto;
    display: block;
	filter: drop-shadow(0px 0px 2px white);
	position: absolute; /* Aus dem normalen Dokumentfluss nehmen */
    bottom: 20%; /* Abstand vom unteren Rand des .main-content-wrapper */
    left: 50%; /* Startpunkt bei 50% der Breite des Elternelements */
    transform: translateX(-50%); /* Zentriert das Element horizontal basierend auf seiner eigenen Breite */
		
}
.mailicon{
	max-width: 13px;
    width: 100%;
    height: auto;
	display: block;
	position: relative;
	top: -0.4px;
	vertical-align: middle;
			
}

/* --- Stil für die E-Mail-Adresse --- */
.contact-email {
    font-family: 'Gilroy-Medium', sans-serif;
    font-size: 1.2em;
    color: white;
    margin: 0;
	line-height: 1;
}

.contact-email a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-email a:hover {
    color: #00bcd4;
}


/* --- Stil für die zweite Sektion (Referenzen) --- */
.full-screen-section {
    min-height: 100vh;
    width: 100vw; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.podcast-grid {
    display: flex;
	flex-direction: row;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleinere Bildschirme */
    justify-content: center; /* Zentriert die Podcasts */
    gap: 30px; /* Abstand zwischen den Podcasts (horizontal und vertikal) */
    width: 100%; /* Nimmt die volle Breite des Eltern-Wrappers ein */
    margin-bottom: 50px; /* Abstand zur Kontaktadresse darunter */
}

.podcast-grid iframe {
    flex-grow: 1; /* Lässt die Iframes wachsen, um verfügbaren Platz zu füllen */
    max-width: 30%; /* Standardbreite, passt sich bei weniger als 3 Podcasts an */
    min-width: 280px; /* Mindestbreite, bevor sie umbrechen */
    height: 152px; /* Standardhöhe von Spotify */
}

.customers-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
	gap: 40px; /* Abstand zwischen den Logos */
    width: 100%;
    margin-bottom: 50px; /* Abstand zur Kontaktadresse */
}

.customers-grid img {
    max-width: 15%; /* Vier Logos nebeneinander mit etwas Abstand */
    height: auto;
	object-fit: contain;
    display: block;
    transition: transform 0.3s ease-in-out; /* Übergang für Hover-Effekt */
}

.customers-grid img:hover {
    transform: scale(1.02); /* Logos werden beim Hover um 2% größer */
}

.site-footer {
    position: relative;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2em;
    background-color: rgba(0, 0, 0, 0.5); /* Leichter, halbtransparenter Hintergrund */
    z-index: 10; /* Stellt sicher, dass der Footer über dem Canvas liegt */
    margin-top: auto; /* Schiebt den Footer an den unteren Rand des Body-Inhalts */
}

.site-footer a {
    color: inherit; /* Linkfarbe vom Elternelement erben */
    text-decoration: none; /* Unterstreichung entfernen */
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: white;
}

/* --- Bestehende Stile von deinem Upload (unverändert beibehalten) --- */
body.open .logo-block {
  opacity: 0;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

body.open .list {
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

body.open .item {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

body.open .item:nth-of-type(1) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

body.open .item:nth-of-type(2) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

body.open .item:nth-of-type(3) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}

.cookie-tab {
    position: fixed;
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 20px; /* Abstand vom rechten Rand */
    background-color: rgba(0, 0, 0, 0.8); /* Dunkler, leicht transparenter Hintergrund */
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-family: 'Gilroy-Medium', sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 9998; /* Unter dem Hauptbanner, aber über dem Rest des Inhalts */
    opacity: 0; /* Standardmäßig unsichtbar */
    visibility: hidden; /* Standardmäßig ausgeblendet */
    transform: translateX(100%); /* Startposition: ganz rechts außerhalb des Viewports */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s ease-out; /* Sanfte Animation */
}

.cookie-tab.show {
    opacity: 1; /* Sichtbar machen */
    visibility: visible; /* Sichtbar machen */
    transform: translateX(0); /* In den Viewport bewegen */
}


.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dunkler, leicht transparenter Hintergrund */
    color: white;
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
    z-index: 9999; /* Immer über allem anderen */
    transform: translateY(100%); /* Startposition: ganz unten außerhalb des Viewports */
    transition: transform 0.5s ease-out; /* Sanfte Slide-Animation */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Gilroy-Medium', sans-serif;
    font-size: 1.1em;
}

.cookie-banner.show {
    transform: translateY(0); /* Endposition: im Viewport */
}

.cookie-banner p {
    margin: 0 0 15px 0;
    line-height: 1.5;
    max-width: 800px; /* Begrenzt die Textbreite */
}

.cookie-banner a {
    color: #00bcd4; /* Akzentfarbe für Links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.cookie-banner a:hover {
    color: white;
    text-decoration: underline;
}

.cookie-buttons {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
    justify-content: center;
    gap: 15px; /* Abstand zwischen den Buttons */
}

.cookie-button {
    background-color: #00bcd4; /* Akzeptieren Button */
    color: white;
    border: 2px solid #00bcd4;
    padding: 12px 25px;
    font-family: 'Gilroy-SemiBold', sans-serif;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.cookie-button:hover {
    background-color: #008c9e; /* Dunklere Farbe beim Hover */
    border-color: #008c9e;
}

.cookie-button.decline {
    background-color: transparent; /* Ablehnen Button */
    border: 2px solid white;
    color: white;
}

.cookie-button.decline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #00bcd4;
    color: #00bcd4;
}

.cookie-info-link {
    display: block;
    margin-top: 15px;
    font-size: 0.9em;
}



@media only screen and (max-height: 800px) { /* Anpassungsschwelle, kann je nach Bedarf geändert werden */
    .main-content-wrapper {
        padding-bottom: 50px; /* Weniger Abstand unten im Wrapper */
    }
	
	.main-logo {
        max-width: 400px; /* Logo kleiner */
        margin-bottom: -10px;
    }
    .subheading {
        font-size: 2em; /* Titel noch kleiner */
        margin-bottom: 20px;
    }
          
	.references-content-wrapper {
		padding: 50px;
	}
}

/* Anpassungen für sehr kleine Bildschirmhöhen (z.B. Mobilgeräte im Querformat oder extrem kleine Browserfenster) */
@media only screen and (max-height: 600px) {
    .main-content-wrapper {
        padding-bottom: 30px; /* Noch weniger Abstand unten */
    }
    .chevrondown{
        display: none; /* Pfeil bei sehr geringer Höhe ausblenden */
    }
    .main-logo {
        max-width: 320px; /* Logo kleiner */
        margin-bottom: -10px;
    }
    .subheading {
        font-size: 1.6em; /* Titel noch kleiner */
        margin-bottom: 10px;
    }
    
}

@media only screen and (max-height: 350px) {
	.mail-wrapper {
    display: none;
	}
}

@media only screen and (max-width: 768px) { /* MOBILGERÄTE */
  .full-screen-section {
	  margin-top: -100px;
  }
  .chevrondown{ 
   display: none;
  }
  .main-logo {
        max-width: 300px; /* Logo kleiner */
        margin-top: -100px;
  }
  .subheading {
        font-size: 2em; 
        margin-bottom: 40px;
    }
  .customers-grid img {
      max-width: 40%; 
	  gap: 30px;
  }
  .symbolfont {
	  padding-bottom: 1%;
  }
  .button-59 {
    min-width: 170px;
  }
  
  .cookie-banner {
      padding: 15px;
      font-size: 1em;
  }
  .cookie-buttons {
      flex-direction: column; /* Buttons untereinander auf kleinen Bildschirmen */
      gap: 10px;
  }
  .cookie-button {
      width: 100%; /* Buttons nehmen volle Breite ein */
      padding: 10px 20px;
  }
}