@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;400&display=swap');
html {
  scroll-behavior: smooth;
}
body {
	background: linear-gradient(rgba(15, 15, 15, 0.85), rgba(15, 15, 15, 0.95)),
		/* Dunkles Overlay */
		url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
	/* Ein atmosphärischer, dunkler Wald */
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	color: #d1cfcf;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 100px 20px 40px 20px;
	/* Platz für das Menü oben */
}

header {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

header img {
	max-width: 300px;
}

section,
footer {
	max-width: 800px;
	margin: 0 auto 40px auto;
	border: 1px solid rgba(74, 58, 42, 0.3);
	padding: 40px;
	background: rgba(20, 20, 20, 0.8);
	/* Semi-transparentes Schwarz */
	backdrop-filter: blur(5px);
	/* Macht den Hintergrund leicht unscharf für bessere Lesbarkeit */
}

h1,
h2,
h3 {
	font-family: 'Cinzel', serif;
	color: #c49a6c;
	/* Ein bronzener/goldener Ton für die Überschriften */
	letter-spacing: 2px;
	text-transform: uppercase;
    padding-top: 20px;
}

hr {
	border: 0;
	height: 1px;
	background: #4a3a2a;
	margin: 30px 0;
}

blockquote {
	font-style: italic;
	border-left: 3px solid #8b0000;
	/* Tiefes Rot wie Feuer/Blut */
	padding-left: 20px;
	margin: 30px 0;
	color: #a0a0a0;
}

.cta {
	margin-top: 30px;
	font-weight: bold;
	color: #e0e0e0;
}

strong {
	color: #c49a6c;
}

/* Verlinkungen im Nørdtakt-Stil */
a {
	color: #c49a6c;
	text-decoration: none;
	transition: 0.3s;
}

a:hover {
	color: #ba680d;
	text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Buttons */
.streaming-links {
	display: flex;
	gap: 15px;
	margin-top: 20px;
}

.btn {
	padding: 12px 25px;
	text-decoration: none;
	font-family: 'Cinzel', serif;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 2px;
	transition: 0.3s;
}

.spotify {
	background-color: #1DB954;
	/* Spotify Grün */
	color: white;
}

.amazon {
	background-color: #FF9900;
	/* Amazon Orange */
	color: #111;
	/* Dunkler Text für besseren Kontrast */
}

.youtube {
	background-color: #c49a6c;
	/* Bronze-Ton passend zum Logo */
	color: #0f0f0f;
}
.tidal {
	background-color: #000000;
	/* Amazon Orange */
	color: #fff;
	/* Dunkler Text für besseren Kontrast */
}
/* Navigation Styles */
.main-nav {
	background-color: rgba(15, 15, 15, 0.95);
	/* Fast schwarz, leicht transparent */
	border-bottom: 1px solid #4a3a2a;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 15px 0;
}

.nav-container {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}

.brand {
	font-family: 'Cinzel', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #c49a6c;
	letter-spacing: 3px;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
}

.nav-links a {
	text-decoration: none;
	color: #d1cfcf;
	font-family: 'Cinzel', serif;
	font-size: 0.9rem;
	transition: 0.3s;
	text-transform: uppercase;
}

.nav-links a:hover {
	color: #c49a6c;
}

/* Accordion Styles */
.accordion {
	margin-top: 20px;
	border-top: 1px solid #4a3a2a;
}

details {
	border-bottom: 1px solid #4a3a2a;
	padding: 15px 0;
	cursor: pointer;
}

summary,
li {
	font-family: 'Cinzel', serif;
	font-size: 1.1rem;
	color: #c49a6c;
	list-style: none;
	/* Entfernt den Standard-Pfeil */
	outline: none;
	transition: 0.3s;
}

summary:hover {
	letter-spacing: 1px;
	color: #e0e0e0;
}

summary::before {
	content: '\2694\fe0f  ';
	/* Das ist der universelle Code für die gekreuzten Schwerter */
	margin-right: 10px;

}

ul img {
	float: right;
	width: 200px;
}

.lyrics-content {
	padding: 20px;
	font-style: italic;
	color: #a0a0a0;
	line-height: 1.8;
	background: rgba(0, 0, 0, 0.3);
	margin-top: 10px;
	border-left: 2px solid #c49a6c;
}
/* Das Overlay (Hintergrund) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Sehr dunkler Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Standardmäßig unsichtbar */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10000;
}

/* Wenn das Element das Ziel (Target) der URL ist */
.modal-overlay:target {
    visibility: visible;
    opacity: 1;
}

/* Das Inhaltsfenster */
.modal-content {
    background: #111;
    padding: 30px;
    border: 1px solid #333;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 0 30px rgba(139, 0, 0, 0.3);
    /* NEU: Feste maximale Höhe */
    max-height: 80vh; /* 80% der Bildschirmoberfläche */
    overflow-y: auto; /* Scrollbalken erscheint bei Bedarf */
    scrollbar-gutter: stable; /* Verhindert ein Springen des Inhalts */
}

/* 2. Den Scrollbalken stylen (für Chrome, Edge, Safari) */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #050505;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #8b0000; /* Dein Rot beim Drüberfahren */
}

/* Für Firefox */
.modal-content {
    scrollbar-width: thin;
    scrollbar-color: #333 #050505;
}
.scroll-area {
    max-height: 60vh; 
    overflow-y: auto;
    padding-right: 10px; /* Platz für den Balken */
}
/* Schließen-Button oben rechts */
.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 30px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.close-btn:hover {
    color: #8b0000;
}

/* Design für den Öffnen-Button (optional) */
.open-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #8b0000;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/* Instagram im Menü hervorheben */
.nav-insta {
	color: #c49a6c !important;
	/* Bronze-Ton */
	font-weight: bold;
}

/* Footer Styling */
.footer-credo {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: #c49a6c; /* Bronze-Ton */
  margin-bottom: 20px;
  letter-spacing: 1px;
  opacity: 0.8;
}
.site-footer {
	text-align: center;
	font-family: 'Cinzel', serif;
	font-size: 0.8rem;
	color: #666;
}

.insta-link {
	display: inline-block;
	margin-top: 15px;
	color: #c49a6c;
	text-decoration: none;
	border: 1px solid #4a3a2a;
	padding: 10px 20px;
	transition: 0.3s;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.insta-link:hover {
	background-color: #c49a6c;
	color: #0f0f0f;
	box-shadow: 0 0 15px rgba(196, 154, 108, 0.4);
}
.grid-item img {
    width: 200px;
    aspect-ratio: 1 / 1; /* Macht die Bilder quadratisch wie bei Insta */
    object-fit: cover;
    border: 1px solid #4a3a2a;
    filter: grayscale(0.5) contrast(1.2); /* Passt die Bilder an den Look der Seite an */
    transition: 0.3s;
}

.grid-item img:hover {
    filter: grayscale(0) contrast(1);
    transform: scale(1.02);
    border-color: #c49a6c;
}

.center-btn {
    text-align: center;
    margin-top: 20px;
}
.menu-toggle, .hamburger {
  display: none;
}
  .player {
    border-radius: 20px;
    padding: 20px;
    background-color: #c49a6c;
    backdrop-filter: blur(10px);
    text-align: center;
  }
  .track-image {
    max-width: 90%;
    border-radius: 10px;
  }
.playlist {
    list-style: none;
    padding: 0;
    width: 100%;
}

.song {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #c49a6c;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    color: #c49a6c;
    font-family: 'Cinzel', serif;
}

.song:hover {
    background: #151515;
    transform: translateX(5px);
    color: #fff;
}

.track-number {
    color: var(--text-muted);
    font-size: 0.8em;
    margin-right: 15px;
    width: 25px;
}

.track-title {
    flex-grow: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 300;
}

.is-playing .track-title {
    color: #000;
    font-weight: bold;
    text-shadow: 0 0 10px var(--accent);
}

.status-icon {
    color: var(--accent);
    font-size: 0.9em;
}
.song.is-playing.loading {
    opacity: 0.6;
}

/* Ein kleiner rotierender Kreis oder ein Pulsieren */
.is-playing .status-icon {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Mobile Optimierung (ab 768px oder kleiner) */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1001;
  }

  .hamburger span {
    width: 100%;
    height: 3px;
    background-color: #c49a6c; /* Dein Bronze-Ton */
    transition: 0.3s;
  }

  /* Das Menü wird standardmäßig versteckt und über die Seite gelegt */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* Rechts aus dem Bild geschoben */
    width: 70%;
    height: 100vh;
    background-color: rgba(15, 15, 15, 0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.4s ease-in-out;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    z-index: 1000;
  }

  /* Wenn die Checkbox aktiviert ist (Burger geklickt) */
  .menu-toggle:checked ~ .nav-links {
    right: 0; /* Menü gleitet rein */
  }

  /* Burger-Animation zum "X" */
  .menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-links li {
    margin: 20px 0;
  }

  .nav-links a {
    font-size: 1.2rem; /* Größer für Touch-Bedienung */
  }
	.nav-container {
		flex-direction: column;
		gap: 15px;
	}
    .insta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	.nav-links {
		gap: 15px;
	}

	.streaming-links {
		flex-direction: column;
	}

	.btn {
		text-align: center;
	}

	body {
		padding-top: 160px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.main-nav {
		padding: 8px 0;
		/* Weniger Höhe oben und unten */
	}

	.nav-container {
		flex-direction: column;
		/* Brand oben, Links darunter */
		gap: 8px;
		padding: 0 10px;
	}

	.brand {
		font-size: 1.1rem;
		/* Kleinerer Name */
		letter-spacing: 2px;
	}

	.nav-links {
		gap: 12px;
		/* Weniger Abstand zwischen den Menüpunkten */
		justify-content: center;
		width: 100%;
		flex-wrap: wrap;
		/* Falls es zu viele Links sind, brechen sie sauber um */
	}

	.nav-links a {
		font-size: 0.75rem;
		/* Kleinere Schrift für die Links */
		padding: 5px 0;
	}

	/* Inhaltsboxen auf Handy schmaler machen */
	#welcome,
	#about,
	#lyrics,
	#discography,
	#contact {
		padding: 20px 15px;
		margin-bottom: 20px;
	}

	.streaming-links {
		display: grid;
		/* Nutzt ein Raster für bessere Kontrolle */
		grid-template-columns: 1fr;
		/* Standardmäßig untereinander */
		gap: 10px;
		width: 100%;
	}

	ul img {
		display: none;
	}

	/* Wenn das Handy breit genug ist (z.B. im Querformat), stehen sie nebeneinander */
	@media (min-width: 400px) {
		.streaming-links {
			grid-template-columns: 1fr 1fr;
		}
	}

	.btn {
		padding: 10px 15px;
		/* Etwas flacher auf dem Handy */
		font-size: 0.8rem;
		/* Kleinere Schrift für die Buttons */
		text-align: center;
		display: block;
		white-space: nowrap;
		/* Verhindert Zeilenumbrüche im Button-Text */
	}

	/* Das Kontaktformular auf dem Handy entschlacken */
	.contact-form input,
	.contact-form textarea {
		font-size: 16px;
		/* Verhindert das automatische Heranzezoomen bei iPhones */
		padding: 8px;
	}

}