/* --- BASIS & VARIABLEN --- */
:root {
    --primary: #f5c71a;       /* Das markante Gelb */
    --bg-dark: #1a1a18;       /* Hintergrund */
    --bg-card: #1e1e1e;       /* Karten Hintergrund */
    --text-main: #f0f0f0;     /* Haupttext */
    --text-muted: #aaaaaa;    /* Nebentext */
    --border-color: #333333;
    
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* --- NAVIGATION --- */
nav {
    background-color: var(--bg-dark);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

nav a {
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

nav a:hover { color: var(--primary); }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* --- TYPOGRAFIE --- */
h1, h2, h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 1rem;
}

h1 { font-size: 3rem; color: var(--primary); }
h2 { font-size: 2rem; border-left: 4px solid var(--primary); padding-left: 1rem; }
p { color: var(--text-muted); margin-bottom: 1.5rem;
  text-align: justify;       /* Macht den Blocksatz */
  hyphens: auto;             /* Aktiviert Silbentrennung (wichtig!) */
  -webkit-hyphens: auto;     /* Für Safari Unterstützung */
}
p2 { color: var(--text-muted); margin-bottom: 1.5rem; /*ohne Blocksatz */
}

/* --- HERO SECTION (Startseite) --- */
.hero-wrapper {
    min-height: 80vh; /* Nimmt fast den ganzen Bildschirm ein */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background: radial-gradient(circle at center, #1a1a1a 20%, #1a1a18 70%); /* Subtiler Leuchteffekt */
}

.hero-logo {
    max-width: 600px;
    width: 100%;
    height: auto;
    margin-bottom: 0rem;
    /* Falls das PNG schwarz ist und man es nicht sieht, 
       kannst du hier: 'filter: invert(1);' nutzen. 
       Wenn es gelb/schwarz ist, lass es so. */
}

.hero-title {
    /* Fluid Typography: Schrift ist min 3rem, max 9rem, dazwischen skaliert sie */
    font-size: clamp(6rem, 15vw, 15rem); 
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--primary); /* Weisser Umriss */
    letter-spacing: 5px;
    margin: 0;
    transition: all 0.5s ease;
}

.hero-title:hover {
    -webkit-text-stroke: 2px var(--primary); /* Wird gelb beim Hover */
    text-shadow: 0 0 20px rgba(245, 199, 26, 0.3);
}

.hero-subtitle {
    /* Schriftgrösse: Mindestens 1rem (Handy), maximal 2rem (Desktop) */
    font-size: clamp(1.5rem, 4vw, 2rem); 
    
    font-weight: 700;
    
    /* WICHTIG: Keine Outline mehr, sondern solide Farbe für Lesbarkeit */
    color: var(--primary); /* Das Gelb */
    -webkit-text-stroke: 0; 
    
    letter-spacing: 3px; /* Buchstaben etwas auseinander */
    line-height: 1.5;
    
    /* Abstand nach oben zum grossen Titel */
    margin-top: 1rem; 
    
    text-transform: uppercase;
}

/* --- VIDEO & BILDER --- */
video, img.img-responsive {
    width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* --- KONTAKT FORMULAR (Dunkles Design) --- */
.contact-form label {
    display: block;
    color: var(--text-main);
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 15px;
    /* Hier nutzen wir jetzt eine feste Farbe statt Transparenz, das ist sicherer */
    background-color: #222222; 
    border: 1px solid #444;
    color: #ffffff; /* Weisse Schrift */
    font-family: var(--font-body);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    resize: none;
}

.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover, 
.contact-form input:-webkit-autofill:focus, 
.contact-form textarea:-webkit-autofill,
.contact-form textarea:-webkit-autofill:hover,
.contact-form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px #222222 inset;
    transition: background-color 5000s ease-in-out 0s;
}

.contact-info-box p {
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.contact-info-box a {
    color: var(--primary); /* Hier wird es GELB */
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-heading);
    letter-spacing: 1px;
}

.contact-info-box a:hover {
    text-decoration: underline;
    color: #fff;
}

/* Button Style */
.btn {
    display: inline-block;
    background: var(--primary);
    color: var(--bg-dark);
    padding: 12px 30px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-heading);
    border: none;
    cursor: pointer;
    margin-top: 0rem;
    transition: transform 0.2s;
    margin-bottom: 1rem;
    margin-right: 1rem;
}

.btn:hover {
    transform: scale(1.05);
}

/* Button Style */
.socialbtn {
    display: inline-block;
    background: var(--primary);
    color: var(--bg-dark);
    padding: 12px 30px;
    font-weight: bold;
    text-decoration: none;
    font-family: var(--font-heading);
    border: none;
    cursor: pointer;
    margin-top: 0rem;
    transition: transform 0.2s;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.socialbtn:hover {
    transform: scale(1.05);
}

/* --- SOCIAL LINKS ZENTRIEREN --- */
.social-links {
    text-align: center;   /* Zentriert Text und Buttons */
    margin-top: 4rem;     /* Abstand nach oben zu den Audio-Playern */
    margin-bottom: 3rem;  /* Abstand nach unten zum Seitenende */
}

/* Optional: Damit die Überschrift "Folgt uns" nicht so am Button klebt */
.social-links h3 {
    margin-bottom: 1rem; 
}

/* --- LIVE SESSIONS AUDIO PLAYER (Growing Bar Effect) --- */

.audio-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%; 
    margin-top: 1rem;
}

/* Die Box (Karte) um den Player */
.track-card {
    position: relative; /* WICHTIG für den wachsenden Balken */
    background-color: #222222; 
    
    /* Rahmen: Überall dünn grau */
    border: 1px solid var(--border-color); 
    
    /* Der linke Rand ist 5px dick und grau (Startzustand) */
    border-left: 1px solid var(--border-color); 

    padding: 1.2rem;
    width: 100%;
    box-sizing: border-box;
    
    /* Schatten bleibt konstant (ändert sich nicht beim Hover) */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    
    /* Wir animieren die Bewegung und die Rahmenfarbe */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* DAS IST DER TRICK FÜR DEN WACHSENDEN BALKEN */
.track-card::before {
    content: '';
    position: absolute;
    /* Wir positionieren ihn exakt über den grauen linken Rand */
    left: 0px; 
    bottom: -1px; /* Startet unten bündig */
    width: 5px;   /* Genau so breit wie der Rand */
    
    /* Start-Höhe ist 0 (unsichtbar) */
    height: 0; 
    
    background-color: var(--primary); /* GELB */
    transition: height 0.3s ease; /* Die Wachstums-Animation */
    z-index: 1;
}

/* HOVER EFFEKT */
.track-card:hover {
    /* 1. Bewegung nach RECHTS (wie früher) */
    transform: translateX(5px);
    
    /* 2. Alle Ränder färben sich gelb */
    border-color: var(--primary);
}

/* Wenn man die Karte hovert, wächst das Pseudo-Element */
.track-card:hover::before {
    /* 3. Balken wächst auf volle Höhe (+2px um die Ecken sauber abzudecken) */
    height: calc(100% + 2px); 
}

/* Der Songtitel */
.track-title {
    display: block; 
    font-family: var(--font-heading);
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem; 
}

/* Der Audio Player */
audio {
    width: 100%;
    height: 32px; 
    outline: none;
    
    background-color: #dddddd; 
    filter: invert(1); 
    
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0; 
    
    opacity: 0.9;
    transition: opacity 0.3s;
}

audio::-webkit-media-controls-enclosure {
    background-color: #dddddd; 
    border-radius: 0;
    max-height: 32px; 
}

audio:hover {
    opacity: 1; 
}

/* --- NEWS LINKS (Verbessert) --- */
.news-link-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 2rem;
    text-decoration: none;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}

.news-link-card:hover {
    border-left: 5px solid var(--primary);
    background: #252525;
    transform: translateX(10px); /* Schiebt sich leicht nach rechts */
}

.news-link-card h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-main);
}

.news-link-card span {
    color: var(--primary);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.news-link-card p {
    margin: 0.5rem 0 0 0;
    color: var(--text-muted);
}

/* --- NEWS HEADER (Flexbox Lösung - KORRIGIERT) --- */

.header-wrapper {
  display: flex;
  flex-direction: row-reverse; /* Text links, Pfeil rechts */
  justify-content: space-between; 
  align-items: center; /* Vertikal mittig */
  margin-bottom: 0.5rem;
  width: 100%;
}

.zeitung {
  color: var(--primary); 
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-weight: bold;
}

/* Wir nutzen hier ".news-link-card .pfeil" statt nur ".pfeil", 
   damit diese Regel stärker ist als die allgemeine Span-Regel */
.news-link-card .pfeil {
  color: var(--border-color); /* STARTZUSTAND: GRAU (Muted) */
  
  font-size: 2rem;           /* GRÖSSER: Hier die Zahl erhöhen, wenn noch grösser */
  line-height: 1;
  font-weight: 300;          /* Dünne Schriftart für den "feinen" Look */
  
  transition: color 0.3s ease, transform 0.3s ease;
  flex-shrink: 0; 
  margin-left: 15px;
  margin-top: -15.3px;
}

/* Das lange Pfeil-Zeichen einfügen */
.news-link-card .pfeil::before {
    content: '⟶'; /* Langer, dünner Pfeil */
}

/* --- DER HOVER EFFEKT --- */
/* Erst wenn man HOVERT, wird er gelb */
.news-link-card:hover .pfeil {
  color: var(--primary) !important; /* !important erzwingt das Gelb beim Hover sicher */
  transform: translateX(5px); 
}
/* --- GESTYLTEN LISTEN --- */
.styled-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem; /* Platz für die Bullets */
}

.styled-list li {
    margin-bottom: 0.5rem; /* Abstand zwischen den Zeilen */
    color: var(--text-muted); /* Textfarbe */
    list-style-type: square; /* Quadratische Punkte */
}

/* Der Trick für gelbe Punkte: ::marker */
.styled-list li::marker {
    color: var(--primary); /* Macht die Quadrate GELB */
    font-size: 1.2rem;     /* Macht sie etwas grösser */
}

/* --- 1. SMOOTH PAGE TRANSITION (Einblenden) --- */

/* Die Animation definieren */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(20px); /* Startet leicht versetzt unten */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Endet an der richtigen Position */
    }
}

/* Die Animation auf den ganzen Inhalt anwenden */
/* --- NEUE VERSION --- */
body {
    /* WICHTIG: Hier darf KEINE 'animation' oder 'transform' stehen! */
    background-color: var(--bg-dark);
    font-family: var(--font-body);
    color: var(--text-main);
    overflow-x: hidden;
    margin: 0; 
}

/* Die Animation darf NUR hier sein: */
.page-content {
    animation: fadeInSlide 0.6s ease-out forwards;
    width: 100%; /* Sicherheitshalber */
}

/* --- 2. BAND MITGLIEDER BLÖCKE (Fix) --- */
.hero-photo {
    display: block;          /* Macht das Bild zum Block (wie ein div), damit margin funktioniert */
    margin-left: auto;       /* Automatischer Abstand links */
    margin-right: auto;      /* Automatischer Abstand rechts */
    max-width: 100%;
}


.members-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Zentriert alles schön in der Mitte */
    gap: 2rem;
    margin-top: 3rem;
}

.member-card {
    /* flex: grow | shrink | basis 
       0 = Nicht wachsen (WICHTIG: Damit der einzelne unten nicht fett wird)
       1 = Schrumpfen erlaubt (WICHTIG: Damit es auf Handys passt)
       350px = Die exakte Breite für alle Karten
    */
    flex: 0 1 350px; 
    
    background-color: #1e1e1e;
    border: 1px solid #333;
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* ... hier drunter kommen noch der Hover-Effekt und das ::before ... */

/* Cooler Hover-Effekt für die Blöcke */
.member-card:hover {
    transform: translateY(-7px); /* Schwebt nach oben */
    border-color: var(--primary); /* Rand wird Gelb */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Schatten */
}

/* Kleiner gelber Strich oben an der Karte */
.member-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
    transform: scaleX(0); /* Erst unsichtbar */
    transition: transform 0.3s ease;
    transform-origin: left;
}

.member-card:hover::before {
    transform: scaleX(1); /* Zieht sich auf beim Hover */
}

/* Text Styling in der Karte */
.member-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #fff;
}

.member-card strong {
    display: block;
    color: var(--primary); /* Instrument in Gelb */
    font-family: var(--font-heading);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.member-card p {
    font-size: 0.95rem;
    color: #bbb;
    line-height: 1.6;
}

/* --- HELM EXPLOSION EFFEKT --- */
.emoji-particle {
    position: fixed;       /* Bleibt relativ zum Bildschirm */
    font-size: 2.5rem;     /* Grösse der Emojis */
    pointer-events: none;  /* Man kann durchklicken */
    z-index: 9999;         /* Immer ganz vorne */
    opacity: 1;
    /* Die Bewegung (Transition) dauert 1 Sekunde */
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease-in;
    user-select: none;     /* Text nicht markierbar */
}

/* Damit der Mauszeiger anzeigt, dass man klicken kann */
#hero-title {
    cursor: pointer;
    user-select: none;
}

#hero-title:active {
    transform: scale(0.98); /* Kleiner Klick-Effekt beim Drücken */
}

/* --- ABSPERRBAND ÜBERGANG --- */

.tape-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999; /* Über allem anderen */
    
    /* Das Absperrband-Muster (Gelb/Schwarz gestreift) */
    background: repeating-linear-gradient(
        45deg,
        var(--primary),
        var(--primary) 40px,
        #111 40px,
        #111 80px
    );
    
    /* Startzustand: Links ausserhalb des Bildschirms versteckt */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Klasse zum Aktivieren (Band fährt rein) */
.tape-in {
    transform: scaleX(1); /* Füllt den Bildschirm */
    transform-origin: left;
}

/* Klasse zum Deaktivieren (Band fährt nach rechts raus) */
.tape-out {
    transform: scaleX(0);
    transform-origin: right; /* WICHTIG: Es verschwindet nach rechts */
}

/* --- ABSPERRBAND MIRROR LOGIK --- */

/* Standard (Vorwärts): 
   Rein von Links (Origin Left), Raus nach Rechts (Origin Right) 
   Das hast du schon im bestehenden Code, hier nur zur Info:
   .tape-in  -> transform-origin: left;
   .tape-out -> transform-origin: right;
*/

/* Spiegelverkehrt (Rückwärts): 
   Rein von Rechts, Raus nach Links */

/* Wenn Spiegelmodus an ist, kommt es von rechts rein */
.tape-transition.mirror-mode.tape-in {
    transform-origin: right !important;
}

/* Wenn Spiegelmodus an ist, geht es nach links raus */
.tape-transition.mirror-mode.tape-out {
    transform-origin: left !important;
}