html {
scroll-behavior: smooth;
}
/* =================================================
FARBEN / VARIABLEN
Hier werden die Grundfarben der Webseite festgelegt.
Ändert man eine Farbe hier, ändert sie sich überall,
wo diese Variable benutzt wird.
================================================= */
:root {
--background:#080808;
--surface:#111111;
--text:#eeeeee;
--accent:#8b5cf6;
--banner-darkness:0.1;
}
/* =================================================
SCHRIFTART LOKAL EINBINDEN
Keine Verbindung zu Google nötig
================================================= */
@font-face {
font-family:"Space Grotesk";
src:url("../fonts/SpaceGrotesk-Regular.woff2");
font-weight:400;
}
@font-face {
font-family:"Space Grotesk";
src:url("../fonts/SpaceGrotesk-Medium.woff2");
font-weight:500;
}
@font-face {
font-family:"Space Grotesk";
src:url("../fonts/SpaceGrotesk-Bold.woff2");
font-weight:700;
}
/* =================================================
GRUNDLAYOUT DER SEITE
body betrifft die komplette Webseite.
================================================= */
body {
background-color: var(--background);
/* setzt den Hintergrund */
color: var(--text);
/* setzt die Standard-Schriftfarbe */
font-family: 'Space Grotesk', sans-serif;
/* Schriftart */
margin: 0;
/* entfernt den Standardrand vom Browser */
overflow-x: hidden;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* =================================================
NOISE / KÖRNUNG / GRAIN
Erzeugt eine dezente Filmkorn-Atmosphäre
über der gesamten Webseite
================================================= */
body::before {
content:"";
position:fixed;
top:-10%;
left:-10%;
width:120%;
height:120%;
pointer-events:none;
opacity:0.1;
filter: grayscale(100%);
z-index:999;
animation: grainMove 33s linear infinite;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.3' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
/* =================================================
ATMOSPHÄRISCHER NEBEL
================================================= */
body::after {
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:2;
opacity:0.05;
background:
radial-gradient(
circle at 20% 30%,
rgba(255,255,255,0.25),
transparent 35%
),
radial-gradient(
circle at 80% 70%,
rgba(255,255,255,0.18),
transparent 40%
),
radial-gradient(
circle at 50% 50%,
rgba(255,255,255,0.12),
transparent 50%
);
filter:blur(80px);
animation:fogDrift 45s ease-in-out infinite;
}
@keyframes fogDrift {
0% {
transform:
translateX(-3%)
translateY(0)
scale(1);
}
50% {
transform:
translateX(3%)
translateY(-2%)
scale(1.05);
}
100% {
transform:
translateX(-3%)
translateY(0)
scale(1);
}
}
/* =================================================
BANNER
Hintergrundbild + dunkles Overlay
================================================= */
.banner {
position: relative;
width: 100%;
height: 420px;
overflow: hidden;
}
.banner img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.05) translateZ(0);
will-change: transform;
}
/* dunkle Ebene über dem Bild */
.banner::after {
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
transparent 30%,
rgba(0,0,0,0.55) 100%
);
}
/* =================================================
BANNER FADE NACH UNTEN
Bild läuft weich in den Hintergrund aus
================================================= */
.banner::before {
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:120px;
background:
linear-gradient(
transparent,
var(--background)
);
z-index:2;
}
/* =================================================
NAVIGATION / MENÜ
HOME MUSIC ABOUT CONTACT
================================================= */
nav {
padding: 30px 0;
/* Abstand oben und unten */
}
nav ul {
list-style: none;
/* entfernt die Punkte vor der Liste */
display: flex;
/* macht aus der Liste eine horizontale Reihe */
justify-content: center;
/* zentriert das Menü */
gap: 40px;
/* Abstand zwischen den Menüpunkten */
padding: 0;
/* entfernt Standard-Abstand */
}
nav a {
color: var(--text);
/* normale Farbe der Links */
text-decoration: none;
/* entfernt Unterstreichung */
letter-spacing: 3px;
/* Abstand zwischen Buchstaben */
font-size: 14px;
/* Größe der Schrift */
}
nav a:hover {
color: var(--accent);
/* beim darüberfahren wird der Link violett */
}
nav a.active {
color: var(--accent);
text-shadow:
0 0 12px rgba(139,92,246,0.6);
}
/* =================================================
HAUPTBEREICHE
Alle einzelnen Seitenabschnitte
================================================= */
section {
max-width: 900px;
/* maximale Breite des Inhalts */
margin: 100px auto;
/* großer Abstand oben/unten
und automatisch mittig */
padding: 20px;
/* Innenabstand */
}
/* =================================================
STARTSEITE
Der große void6 Schriftzug
================================================= */
#home {
text-align: center;
/* alles in diesem Bereich mittig */
}
/* =================================================
VOID6 LOGO GLOW
langsames pulsierendes Licht
================================================= */
#home h1 {
font-size:80px;
letter-spacing:10px;
margin-bottom:20px;
animation:
voidGlow 5s ease-in-out infinite;
}
@keyframes voidGlow {
0% {
text-shadow:
0 0 10px rgba(139,92,246,0.2);
}
50% {
text-shadow:
0 0 35px rgba(139,92,246,0.7);
}
100% {
text-shadow:
0 0 10px rgba(139,92,246,0.2);
}
}
#home p {
font-size: 22px;
color: var(--accent);
/* Untertitel in violett */
}
/* =================================================
ÜBERSCHRIFTEN
================================================= */
h2 {
letter-spacing: 5px;
/* moderner Abstand zwischen Buchstaben */
text-align: center;
}
/* =================================================
NORMALE TEXTE
================================================= */
p {
line-height: 1.8;
/* besser lesbarer Zeilenabstand */
}
/* =================================================
SPOTIFY PLAYER
passt ihn an die Webseite an
================================================= */
iframe {
margin-top: 0px;
/* Abstand nach oben */
}
/* =================================================
FOOTER
unterer Bereich der Webseite
================================================= */
footer {
text-align: center;
padding: 40px;
color: #777;
/* dezente graue Schrift */
}
/* =================================================
STREAMING PLATTFORMEN
Buttons / Links unter dem Spotify Player
================================================= */
/* =================================================
ICON KACHELN
Spotify / Apple / YouTube / Instagram / Mail
================================================= */
.social-grid {
display: flex;
justify-content: center;
gap: 25px;
margin-top: 50px;
flex-wrap: wrap;
}
/* ================================
KACHEL BASIS
================================ */
.social-grid a {
width: 120px;
height: 120px;
position: relative;
background: rgba(17,17,17,0.95);
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
opacity: 0;
animation: fadeIn 1s ease forwards;
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
/* iPhone Fix */
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
/* 🔥 50% softer Purple Glow */
box-shadow:
0 0 0 1px rgba(139,92,246,0.12),
0 0 12px rgba(139,92,246,0.18),
0 0 25px rgba(139,92,246,0.10);
}
/* ================================
ICON
================================ */
.social-grid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 2;
border-radius: inherit;
}
/* ================================
HOVER GLOW
================================ */
.social-grid a:hover {
transform:
translateY(-15px)
scale(1.08);
box-shadow:
0 0 0 1px rgba(139,92,246,0.25),
0 0 18px rgba(139,92,246,0.30),
0 0 45px rgba(139,92,246,0.20);
}
/* ================================
FADE IN
================================ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 0.75; }
}
/* =================================================
GRAIN BEWEGUNG
Langsame Bewegung der Körnung
================================================= */
@keyframes grainMove {
0% {
transform:
translate(0px, 0px);
}
25% {
transform:
translate(-20px, 10px);
}
50% {
transform:
translate(15px, -15px);
}
75% {
transform:
translate(-10px, -20px);
}
100% {
transform:
translate(0px, 0px);
}
}
/* =================================================
ALLE LINKS
Einheitliche void6 Linkfarbe
================================================= */
a {
color: var(--text);
text-decoration:none;
}
a:hover {
color:var(--accent);
}
/* =================================================
CONTACT LINKS
Hervorgehobene Kontakt-Links
================================================= */
.contact-link {
font-weight:700;
/* fette Schrift */
letter-spacing:3px;
/* etwas mehr Abstand */
transition:
color 0.3s ease,
text-shadow 0.3s ease;
}
.contact-link:hover {
color:var(--accent);
text-shadow:
0 0 15px rgba(139,92,246,0.8);
}
/* =================================================
MOBILE OPTIMIERUNG
Anpassungen für Smartphones
================================================= */
@media (max-width:700px) {
nav ul {
gap:20px;
flex-wrap:wrap;
}
nav a {
font-size:12px;
}
#home h1 {
font-size:50px;
letter-spacing:6px;
}
#home p {
font-size:18px;
}
/* HIER ÄNDERN */
.banner {
height:220px;
}
.banner img {
height:100%;
}
section {
margin:60px auto;
padding:15px;
}
.social-grid a {
width:90px;
height:90px;
}
}
/* =================================================
MODAL POPUP
Datenschutz / Impressum
================================================= */
.modal {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.0);
backdrop-filter: blur(0px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s ease,
backdrop-filter 0.4s ease,
visibility 0.4s;
z-index: 2000;
}
/* Fenster */
.modal-content {
background: rgba(17,17,17,0.85);
backdrop-filter: blur(20px);
border: 1px solid rgba(139,92,246,0.3);
border-radius: 24px;
max-width: 700px;
width: 85%;
max-height: 80vh;
overflow: auto;
padding: 40px;
box-shadow:
0 30px 80px rgba(0,0,0,0.6),
0 0 60px rgba(139,92,246,0.2);
transform: scale(0.92) translateY(20px);
opacity: 0;
transition:
transform 0.4s ease,
opacity 0.4s ease;
will-change: transform, opacity;
}
.modal.show {
opacity: 1;
visibility: visible;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(12px);
}
.modal.show .modal-content {
transform: scale(1) translateY(0);
opacity: 1;
}
/* Schließen X */
.close {
float:right;
font-size:30px;
cursor:pointer;
color:var(--text);
}
.close:hover {
color:var(--accent);
}
/* =================================================
SPOTIFY GLAS PLAYER
================================================= */
.spotify-wrapper {
position:relative;
width:100%;
height:352px;
margin-top:30px;
border-radius:20px;
overflow:hidden;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.02)
);
border:1px solid rgba(255,255,255,0.15);
box-shadow:
0 0 40px rgba(139,92,246,0.15);
}
.spotify-wrapper iframe {
width:100%;
height:100%;
border:0;
display:block;
opacity:0;
transition:opacity 1s ease;
}
.spotify-wrapper.active iframe {
opacity:1;
}
/* Glasfläche vor dem Aktivieren */
.spotify-overlay {
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background:
rgba(8,8,8,0.55);
backdrop-filter:blur(18px);
border-radius:20px;
/* wichtig:
Overlay blockiert keine Bedienung mehr,
wenn es unsichtbar wird */
z-index:5;
}
.spotify-overlay p {
font-size:22px;
letter-spacing:3px;
margin-bottom:10px;
}
.spotify-overlay small {
max-width:350px;
line-height:1.6;
color:#aaa;
}
.spotify-overlay button {
margin-top:25px;
padding:15px 30px;
background:transparent;
border:1px solid var(--accent);
color:var(--text);
letter-spacing:3px;
cursor:pointer;
transition:0.3s;
}
.spotify-overlay button:hover {
background:var(--accent);
color:#000;
box-shadow:
0 0 25px rgba(139,92,246,0.6);
}