@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root {
	--bg-color: #1f242d;
	--second-bg-color: #323946;
	--text-color: #fff;
	--main-color: #0ef;
}

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

        .cookie-popup {
			width: 80%;
			max-width: 600px;
			background-color: var(--second-bg-color);
			font-size: 1.2rem;
			color: var(--text-color);
			padding: 20px;
			border: 2px solid var(--main-color);
			border-radius: 10px;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }

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

        .cookie-popup button {
            background-color: var(--main-color);
            color: #3d3d3d;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px 5px;
        }

        .cookie-popup button:hover {
            background-color: #a4deeb;
        }

        .cookie-popup button:hover,
        .privacy-popup button:hover {
            background-color: #a4deeb;
        }

        .cookie-popup a {
            color: var(--main-color);
            text-decoration: underline;
            cursor: pointer;
        }
		
        #container_loader {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--bg-color);
            z-index: 9999;
        }

        #container_loader #loader {
            position: relative;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: var(--bg-color);
            animation: animate 2s linear infinite;
        }

        @keyframes animate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #container_loader #loader::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background-image: linear-gradient(to bottom, var(--main-color), var(--bg-color), transparent);
            background-size: 100px 180px;
            background-repeat: no-repeat;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
        }

        #container_loader #loader::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: var(--main-color);
            border-radius: 50%;
            z-index: 10;
            box-shadow: 0 0 10px var(--main-color),
                0 0 20px var(--main-color),
                0 0 30px var(--main-color),
                0 0 40px var(--main-color),
                0 0 50px var(--main-color),
                0 0 60px var(--main-color),
                0 0 70px var(--main-color),
                0 0 80px var(--main-color),
                0 0 90px var(--main-color),
                0 0 100px var(--main-color);
        }

        #container_loader #loader span {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            background: var(--bg-color);
            border-radius: 50%;
        }

        #container_loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-color);
            z-index: 9999;
        }

        #loader {
            display: inline-block;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }		

html {
	font-size: 62.5%;
	overflow-x: hidden;
}

body {
	background: var(--bg-color);
	color: var(--text-color);
}

section {
	min-height: 100vh;
	padding: 27rem 9% 2rem;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 2rem 9%;
	background: var(--bg-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
}

.header .sticky {
	border-bottom: .1rem solid rgba(0, 0, 0, .2);
}

img.logo {
            max-width: 26%;
            height: auto;
            object-fit: contain;
        }

        @media (max-width: 768px) {
            img.logo {
                max-width: 43%;
            }
        }

        @media (min-aspect-ratio: 21/9) {
            img.logo {
                max-width: 12vw;
            }
        }

.navbar a {
	font-size: 1.7rem;
	color: var(--text-color);
	margin-left: 4rem;
	transition: .3s;
}

.navbar a:hover,
.navbar a.active {
	color: var(--main-color);
}

#menu-icon {
	font-size: 3.6rem;
	color: var(--text-color);
	display: none;
}

.links {
	float: left;
	width: 187px;
}
.rechts { 
	float: left;
	}

.mich {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mich-img img {
	width: 30vw;
	animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
	0% {
		transform: translateY(0);
	}
	
	50% {
		transform: translateY(-2.4rem);
	}
	
	100% {
		transform: translateY(0);
	}	
}

.mich-content h3 {
	font-size: 3.2rem;
	font-weight: 700;
}

.mich-content h3:nth-of-type(2) {
	margin-bottom: 2rem;
}

span {
	color: var(--main-color);
}

.mich-content h1 {
	font-size: 5.6rem;
	font-weight: 700;
	line-height: 1.3;
}

.mich-content p {
	font-size: 1.6rem;
}

/* Allgemeine Tooltip-Stile */
.btn, .social-media a {
    position: relative;
    text-decoration: none;
}

.btn::after, .social-media a::after {
    content: attr(data-title);
    position: absolute;
    left: 50%;
    bottom: -50px; /* Abstand nach unten */
    transform: translateX(-50%);
    background-color: #1f242d;
    color: #0ef;
    padding: 5px 10px;
    border: 1px solid #0ef;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px; /* Schriftgröße */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
	transform-origin: bottom center;
    pointer-events: none;
    text-transform: none; /* Groß- und Kleinschreibung beibehalten */
}

.btn:hover::after, .social-media a:hover::after {
    opacity: 1;
    visibility: visible;
}

.social-media a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	background: transparent;
	border: .2rem solid var(--main-color);
	border-radius: 50%;
	font-size: 2rem;
	color: var(--main-color);
	margin: 1.3rem 2.2rem 3rem;
	transition: .5s ease;
}

.social-media a:hover {
	background: var(--main-color);
	color: var(--second-bg-color);
	box-shadow: 0 0 1rem var(--main-color);
}


.btn {
	display: inline-block;
	padding: 1rem 2.8rem;
	background: var(--main-color);
	margin-top: 1rem;
	border-radius: 4rem;
	box-shadow: 0 0 1rem var(--main-color);
	font-size: 1.6rem;
	color: var(--second-bg-color);
	font-weight: 600;
	transition: .5s ease;
}

.btn:hover {
	box-shadow: none;
}

.hoeren-img img {
	width: 35vw;
}

.heading {
	text-align: center;
	font-size: 4.5rem;
}

.hoeren {
	background: var(--second-bg-color);
}

.hoeren h2 {
	margin-bottom: 4rem;
}

.portfolio-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: 2.5rem;
}

.portfolio-container .portfolio-box {
	position: relative;
	border-radius: 2rem;
	box-shadow: 0 0 1rem var(--bg-color);
	overflow: hidden;
	display: flex;
}

.portfolio-box img {
	width: 100%;
	transition: .5s ease;
}

.portfolio-box:hover img {
	transform: scale(1.1);
}

.portfolio-box .portfolio-layer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(0, 0, 0, .1), var(--main-color));
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	padding: 0 4rem;
	transform: translateY(100%);
	transition: .5s ease;
}

.portfolio-box:hover .portfolio-layer {
	transform: translateY(0%);
}

.portfolio-layer h4 {
	font-size: 3rem;
}

.portfolio-layer p {
	font-size: 1.6rem;
	margin: .3rem 0 1rem;
	color: white;
}

        /* CSS für den Audioplayer */
        .audio-player {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .audio-button {
            background-color: #4CF3FF;
            border: 2px solid #646464;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-left: 10px;
        }

        .audio-button i {
            color: #646464;
            font-size: 20px;
        }



        .audio-button {
                width: 45px;
                height: 45px;
				margin: 0 0.5em;
		}
		
		/*---------- Kontaktformular ----------*/
		
		.kontakt h2 {
			margin-bottom: 3rem;
		}

		.kontakt form {
			max-width: 70rem;
			margin: 1rem auto;
			text-align: center;
			margin-bottom: 3rem;
		}
		
		.kontakt form .input-box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		
		.kontakt form .input-box input,
		.kontakt form textarea {
			width: 100%;
			padding: 1.5rem;
			font-size: 1.6rem;
			color: var(--text-color);
			background: var(--second-bg-color);
            border: 2px solid var(--main-color);
			border-radius: .9rem;
			margin: .7rem 0;
		}
		
		.kontakt form .input-box input {
			width: 49%;
		}
		
		.kontakt form textarea {
			resize: none;
		}
		
		.kontakt form .btn {
			margin-top: 2rem;
			cursor: pointer;
		}
		
		.kontakt .captcha p {
			font-size: 1.3rem;
		}
		
		/* Footer */
		
		.index_footer {
			position: absolute;
			background-color: var(--second-bg-color);
			padding: 1.3rem 8%;
			text-align: center;
			right: 0;
			left: 0;
			bottom: 0;
		}		
		
	
.footer {
    background-color: var(--second-bg-color);
    color: var(--text-color);
    text-align: right;
    padding: 0px 30px 30px 60px;
    width: 100%;
}

.footer-text p {
    font-size: 1.6rem;
    text-align: center;  /* Zentriert den Text, wenn der Inhalt auf großen Bildschirmen flex-wrapped */
	padding: 20px 5px 0px 0px;
}

.footer-text #year {
    font-size: 1.6rem;
    color: var(--text-color);
}
		
        .error-bubble {
            color: #dd6262;
			background: var(--second-bg-color);
            font-size: 1.6em;
			font-weight: bold;
            margin-top: 5px;
			text-align: center;
			border: 2px solid var(--main-color);
			border-radius: 4rem;
			max-width: 400px; /* Feste maximale Breite */
			margin-left: auto;
			margin-right: auto;
			padding: 10px; /* Padding hinzufügen, damit der Text nicht direkt am Rand ist */
        }
		
        .error-bubble.success {
            color: #00ff00; /* Erfolgsnachricht in Grün */
			border-color: #00ff00; /* Randfarbe für Erfolgsmeldung anpassen */			
        }		
		
/* --------- Kontaktformular captcha -------- */

        .kontakt form .captcha input {
            margin-top: 10px;
            padding: 3px;
            border: 2px solid var(--main-color);
            border-radius: 5px;
            background-color: var(--second-bg-color);
            color: var(--text-color);
            width: 62px;
            text-align: center;
        }
		
        .checkbox-container {
            display: flex;
            align-items: center;
            padding: 55px;
            margin: -40px;
        }

        .checkbox-container input[type='checkbox'] {
            cursor: pointer;
            width: 54px;
            /* quadratische Form */
            height: 24px;
            /* quadratische Form */
            border: 2px solid var(--main-color);
            border-radius: 5px;
            /* Ecken abgerundet */
            background-color: var(--second-bg-color);
            margin-right: 10px;
            position: relative;
            appearance: none;
            /* Entfernt Standard-Checkbox-Styling */
        }

        .checkbox-container input[type='checkbox']:checked {
            background-color: var(--second-bg-color);
            /* Hintergrundfarbe bleibt gleich */
        }

        .checkbox-container input[type='checkbox']:checked::after {
            content: '✔';
            color: var(--main-color);
            /* Farbe des Häkchens */
            position: absolute;
            top: 55%;
            /* Mittige Positionierung */
            left: 50%;
            /* Mittige Positionierung */
            transform: translate(-50%, -50%);
            /* Mittige Positionierung */
            font-size: 20px;
            /* Größe des Häkchens */
        }

        .checkbox-container label {
            color: var(--text-color);
            font-size: 12px;
            line-height: 1.5;
        }

        .captcha input {
            margin-left: 10px;
            padding: 10px;
            border: 2px solid #FFDC29;
            border-radius: 5px;
            background-color: #3d3d3d;
            color: #FFDC29;
            width: 12px;
            height: 24px;
            text-align: center;
        }

		.captcha p {
			font-size: 1.2rem;
		}


/* --------- BREAKPOINTS -------- */
		@media (max-width: 1200px) {
			html {
				font-size: 55%;
			}
		}
		
		@media (max-width: 991px) {
			.header {
				padding: 1rem 33%;
				width: 126%;
			}
			
			section {
				padding: 10rem 3% 2rem;
			}
			
			.hoeren {
				padding-bottom: 7rem;
			}
			
			.kontakt {
				min-height: auto;
			}
			
			.footer {
				padding: 2rem 3%;
			}
		}

		@media (max-width: 768px) {
			#menu-icon {
				display: block;
			}
			
			.navbar {
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				padding: 1rem 3%;
				background: var(--bg-color);
				border-top: .1rem solid rgba(0, 0, 0, .2);
				box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
				display: none;
			}
			
			.navbar.active {
				display: block;
			}
			
			.navbar a {
				display: block;
				font-size: 2rem;
				margin: 3rem 0;
			}
			
			.mich {
				flex-direction: column;
			}
			
			.mich-content h3 {
				font-size: 2.6rem;
			}
			
			.mich-content h1 {
				font-size: 5rem;
			}
			
			.mich-img img {
				width: 70vw;
				margin-top: 4rem;
			}
			
			.hoeren h2 {
				margin-bottom: 3rem;
			}
			
			.portfolio-container {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		
		@media (max-width: 617px) {
			.portfolio-container {
				grid-template-columns: 1fr;
			}
		}
		
		@media (max-width: 450px) {
			html {
				font-size: 50%;
			}
			
			.kontakt form .input-box input {
				width: 100%;
			}
		}
		
		@media (max-width: 365px) {
			.mich-img img {
				width: 90vw;
			}
			
			.footer {
				flex-direction: column-reverse;
			}
			
			.footer p {
				text-align: center;
				margin-top: 2rem;
			}
		}