/* dark-r.css */
*
{
	margin:0;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert alles im Header */
    text-align: center;
    padding: 20px;
    color: white;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.7);
}

body {
	background: url('../assets/images/backgrounds/background-atd.webp') no-repeat center center fixed;
    background-size: cover;
	background-color: #121212;
    color: #fff;
    font-family: Arial, sans-serif;
	z-index: 0; /* Damit der Inhalt immer oben bleibt */
}

center
{
	background-color: rgba(0, 0, 0, 0.7);
	padding: 20px;
}

img
{
    max-width: 100%;  /* Bild wird nie breiter als sein Container */
    height: auto;      /* Höhe wird proportional skaliert */
    display: block;    /* Verhindert unnötigen Leerraum unter Bildern */
}

@media screen and (max-width: 768px) {
    img {
        max-width: 95%;  /* Bilder nehmen 95% der Bildschirmbreite ein */
        margin: 0 auto;  /* Zentriert die Bilder */
    }
}

h1
{
	text-align: center;
}

#main-content{
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    box-shadow: 0 0 0px transparent;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Optionaler Glüheffekt */
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0px transparent;
  }
}

#atd {
	animation: fadeInOut 5s infinite;
    border-radius: 30%; /* Perfekte Abrundung */
    display: inline;
}

/* Allgemeine Navigationseinstellungen */
.nav-seiten {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    background-color: #131313; /* fast Schwarz */
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Menü-Links */
.nav-seiten li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
	color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

/* Hover-Effekt */
.nav-seiten li a:hover {
	background: linear-gradient(180deg, rgba(202,160,69,1) 34%, rgba(182,182,182,1) 66%);
    color: #000;
    border-radius: 5px;
}

/* Bild-Spezifische Gestaltung */
.home-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
	background: #fff;
}

#logo-container {
    width: 100%; /* Passt sich der Umgebung an */
    max-width: 500px; /* Verhindert, dass es zu groß wird */
    min-width: 150px; /* Verhindert, dass es zu klein wird */
    height: auto; /* Damit das Seitenverhältnis bleibt */
	margin-top: 10px
}

/* Optional: Stile für das Logo, wenn du es im Header haben möchtest */
#logo-container {
    text-align: center;
    margin: 20px 0;
}

#logo-img {
    width: 200px;
    height: auto;
    display:inline;
}

#gabberspider
{
    border: thick ridge #2c2b2b;
    float: right;
	clear:both;
	display: block;
}

/* Smartphone-Ansicht */
@media (max-width: 768px) {
    #gabberspider {
        float: none; /* Entfernt das Floaten */
        display: block; /* Stellt das Bild als Block-Element dar */
        margin: 0 auto 10px; /* Zentriert das Bild und gibt Abstand zum Text */
    }
}

#spende
{
	background-color: #000000b3;
	padding: 10px;
	display: flex;
    justify-content: center;  /* Horizontal zentrieren */
    align-items: center;      /* Vertikal zentrieren */
}

.socialb
{
	filter: grayscale(100%);
}

.socialb:hover
{
	filter: grayscale(10%);
}

.socialb:visited:active:focus
{
	filter: grayscale(0%);
}

.social
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 0.2em;
	color: #ffffff;
	text-align: center; /* Vereinheitlichung der text-align-Eigenschaft */
	font-size: smaller;
	background: rgb(174,124,43);
	background: linear-gradient(0deg, rgba(174,124,43,1) 0%, rgba(242,222,122,1) 25%, rgba(255,255,255,1) 50%, rgba(124,124,124,1) 75%, rgba(84,83,83,1) 100%);

	flex-wrap: wrap; /* Ermöglicht das Umfließen von Elementen */
	height: 100px;
    overflow: hidden; /* Verhindert das Überlaufen von Inhalt auf Desktop */
}

/* Smartphone-Ansicht */
@media (max-width: 768px) {
  .social {
    justify-content: space-between; /* Verhindert, dass die Elemente zu nah beieinander sind */
	height: auto;
  }
  
  .social a {
    flex-basis: calc(50% - 0.2em); /* Jedes Bild nimmt 50% des Containers ein, minus etwas Abstand */
	margin-top: 10px; /* Fügt einen Abstand oben hinzu */
    margin-bottom: 10px; /* Fügt einen Abstand zwischen den Zeilen hinzu */
    max-width: 45%; /* Begrenzung der maximalen Breite für jedes Bild */
  }
}

/* Wrapper für das Bild */
#switcher-button-wrapper {
    display: flex;
    justify-content: space-evenly; /* Maximale Verteilung */
	background: rgb(174,124,43);
	background: linear-gradient(180deg, rgba(174,124,43,1) 0%, rgba(242,222,122,1) 25%, rgba(255,255,255,1) 50%, rgba(124,124,124,1) 75%, rgba(84,83,83,1) 100%);
	width: 100%;
	padding: 10px;
	z-index: 2; /* Damit der Switcher Button immer oben bleibt */
}

#switcher-button-wrapper a {
    display: flex;
    flex-direction: column; /* Stellt sicher, dass das <a> unter dem <img> bleibt */
    justify-content: center;
    align-items: center;
    text-align: center;
	color: #000;
}

/* Erste und dritte <a>-Elemente bekommen eine feste Breite, um die Mitte auszugleichen */
#switcher-button-wrapper a:first-child {
    width: 126px; /* So breit wie das erste Bild */
    margin-right: 68px; /* Hälfte des Größenunterschieds zu Bild 3 */
}

#switcher-button-wrapper a:nth-child(2) {
    flex-shrink: 0; /* Verhindert, dass der mittlere Link schrumpft */
}

#switcher-button-wrapper a:last-child {
    width: 195px; /* So breit wie das dritte Bild */
}

@media screen and (max-width: 768px) {
    #switcher-button-wrapper {
        transform: scale(0.8); /* Verkleinert den Button */
        right: 10px; /* Falls er abgeschnitten ist, nach links verschieben */
		width: auto;
    }
}

@media screen and (max-width: 480px) {
    #switcher-button-wrapper {
        transform: scale(0.7); /* Noch kleiner für sehr kleine Displays */
        right: 5px;
		width: auto;
    }
}

/* Button mit dem Bild */
#switcher-button {
    display: inline-block;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 10px;
    position: relative;
    z-index: 1;
	width: max-content;
}

@keyframes glow {
    0% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1));
    }
    100% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
    }
}

#switcher-button img {
    animation: glow 1.5s infinite alternate ease-in-out;
}

/* Glow-Effekt, um das Bild herum */
#switcher-button-wrapper::before {
    content: "";
    position: absolute;
    opacity: 0; /* Startet unsichtbar */
    transition: opacity 0.3s ease-in-out;
    z-index: 0;
}

/* Glow erscheint beim Hover */
#switcher-button-wrapper:hover::before {
    opacity: 1; /* Glow sichtbar */
}

/* Bild mit sanfter Skalierung */
#switcher-button:hover img {
    transform: scale(1.05); /* Nur sanfte Skalierung, ohne das Bild zu beschneiden */
    filter: brightness(1.1); /* Leicht aufgehelltes Bild beim Hover */
}

#style-options {
    display: flex;
    justify-content: center;  /* Zentriert horizontal */
    align-items: center;  /* Falls der Header größer ist */
    gap: 5px; /* Abstand zwischen den Bildern */
    padding: 1px;
}

.hidden {
    display: none;
}

.style-choice {
    width: 50px; /* Größe der kleinen Style-Bilder */
    height: auto;
	margin: 0 2px; /* 2px links und rechts */
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s;
	display: inline;
}

.youtube {
    position: relative;
    width: 100%;
    max-width: 560px; /* Maximale Breite für größere Displays */
    aspect-ratio: 16 / 9; /* Hält das 16:9-Seitenverhältnis */
    margin: 0 auto; /* Zentriert das Video */
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


div.video
{
	margin:auto;
	min-width:300px; 
	max-width:600px; 
	min-height:200px; 
	max-height:300px;
	margin-bottom: 60px;
}