@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
/* style.css — Fluid responsive (Option D)
   - Fluid sizes with clamp()
   - Prevents horizontal overflow
   - Digibook scales and never gets cut off
   - Album list scrolls internally on small screens
*/

/* ---------- base ---------- */
:root{
  --bg:#000000;
  --fg:#f0f0f0;
  --accent:#d33500ff;
  --accent-s:rgb(229, 229, 229);
  --muted:#0f0f0f;
  --header-h:clamp(92px, 8vh, 110px);
  --footer-h:clamp(64px, 5vh, 64px);
  --glass: rgba(255,255,255,0.03);
  --page-max-width:1200px;
  --gap: clamp(12px, 2vw, 24px);
  --card-pad: clamp(12px, 2vw, 24px);
  --radius: 12px;
  --ui-scale: 1;
}
*{box-sizing: border-box}

/* GLOBALER SCROLLBALKEN STYLE */
::-webkit-scrollbar {
    width: 6px; /* Schön schmal */
    background: #000;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: var(--accent); /* DEIN ROT */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff4500; /* Heller beim Drüberfahren */
}

/* Ersetze deinen html,body Block hiermit: */
html, body {
    height: 100%;       /* Volle Höhe erzwingen */
    margin: 0;
    overflow: hidden !important;   /* WICHTIG: Kein Scrollen auf dem Body selbst! */
    
    font-family: 'Rajdhani', sans-serif;
    color: var(--fg);
    background-color: var(--bg);
    
    /* Flexbox hier rausnehmen, falls noch drin */
    display: block; 
}

/* ---------- header & footer (fixed) ---------- */
header{
  position:fixed;left:0;right:0;top:0;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;z-index:60;backdrop-filter:blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Für Safari sicherheitshalber */
  border-bottom:1px solid #d33500b9;
  background:linear-gradient(180deg, rgba(215, 58, 6, 0), rgb(0, 0, 0));
  min-height:56px;
}

/* =========================================
   FOOTER (Neues 2-Zeilen Layout)
   ========================================= */
#footer, footer {
    position: fixed; /* WICHTIG: Wieder fixed! */
    left: 0;
    right: 0;
    bottom: 0;
    
    height: 80px; /* Feste Höhe, damit MAIN weiß, wo es aufhören muss */
    z-index: 40;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Design */
    background-color: #000;
    background-image: linear-gradient(0deg, rgba(215, 58, 6, 0), rgb(0, 0, 0));
    border-top: 1px solid #d33500b9;
}

/* Der Container bleibt gleich */
.footer-container {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* --- Zeile 1: Social Media --- */
/* ---------- FOOTER ICONS ---------- */
.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Abstand zwischen den Icons */
    width: 100%;
    margin-top: 18px;      /* Schiebt die Icons etwas vom oberen Rand weg */
    margin-bottom: 2px;   /* Verringert den Abstand zum Text darunter etwas */
}

.footer-socials a {
    color: var(--fg);
    text-decoration: none;
    font-size: 14px; /* Größe der Klammern [ ] */
    font-weight: bold;
    
    display: flex;
    align-items: center;
    gap: 4px; /* Abstand zwischen Klammer und Icon */
    
    transition: all 0.2s ease;
}

/* Das SVG Icon selbst */
.footer-socials svg {
    width: 16px;  /* Icon Breite */
    height: 16px; /* Icon Höhe */
    fill: currentColor; /* Nimmt die Textfarbe an */
    margin-bottom: -2px; /* Kleine optische Korrektur der Höhe */
}

/* Hover Effekt */
.footer-socials a:hover {
    color: var(--accent); /* Alles wird Rot */
    text-shadow: 0 0 8px var(--accent);
}

/* Hover Effekt nur für das Icon (es wächst etwas) */
.footer-socials a:hover svg {
    transform: scale(1.2);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Zeile 2: Rechtliches --- */
.footer-legal {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px; /* Kleiner als Socials */
    color: rgb(255, 255, 255); /* Ausgegraut */
}

.footer-legal a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--fg); /* Wird weiß beim Drüberfahren */
    text-decoration: underline;
}

/* ---------- FOOTER SOCIALS & LEGAL (Industrial Style) ---------- */

.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px 25px; /* Etwas mehr Luft horizontal */
    width: 100%;
    margin-bottom: 12px;
}

.footer-socials a {
    color: var(--fg);
    text-decoration: none;
    
    /* HIER IST DER STYLE-WECHSEL: */
    font-size: 11px;          /* Klein */
    text-transform: uppercase; /* GROSSBUCHSTABEN */
    letter-spacing: 2px;       /* Breit gesperrt -> Wirkt sehr technisch */
    font-weight: 400;          /* Dünner */
    
    white-space: nowrap;
    transition: all 0.2s ease;
}

.footer-socials a:hover {
    color: var(--accent);
    text-shadow: 0 0 5px var(--accent);
}

/* Rechtstexte noch feiner */
.footer-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    
    font-size: 10px; /* Sehr fein */
    opacity: 0.9;    /* Stark gedimmt */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-legal a {
    color: var(--fg);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-legal a:hover {
    opacity: 1;
    color: var(--fg); /* Bleibt weiß, wird nur heller */
}

.separator {
    opacity: 0.4; /* Die | Striche etwas dimmen */
}

/* --- WICHTIG: Anpassung Main-Content --- */
/* Da der Footer jetzt höher ist (80px), müssen wir 
   die Variable für den unteren Abstand anpassen! */
:root {
    --footer-h: 80px !important; /* Überschreibt den alten Wert */
}

/* ---------- header content layout ---------- */
.hdr-left{display:flex;align-items:flex-start;gap:8px}
.hdr-centre{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
.hdr-right{display:flex;align-items:center;gap:10px;padding-right:6px}

/* logo */
.logo{font-weight:700;letter-spacing:2px;font-size:clamp(14px,1.6vw,18px);color:var(--accent);pointer-events:auto}
.logo img{max-height:clamp(70px,5vh,80px);width:auto;height:auto;object-fit:contain;display:block}

/* =========================================
   HEADER BUTTONS (Reparatur & Einheitlicher Look)
   ========================================= */

/* Wir sprechen hier explizit auch #langSwitch an! */
.nav-btn, 
#langSwitch {
    /* 1. Reset */
    appearance: none;
    -webkit-appearance: none;
    
    /* 2. Design (Crystal Look) */
    background-color: transparent !important; /* Transparent statt schwarz */
    
    /* NEU: Weißer Text & Heller Rahmen für Sichtbarkeit */
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Heller Rahmen (30% Weiß) */
    
    border-radius: 6px;
    
    /* 3. Größe & Layout */
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Flexbox */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    
    font-family: inherit;
    text-transform: uppercase;
    
    /* Kein Schatten im Ruhezustand */
    box-shadow: none;
    text-shadow: none;
}

/* Hover-Effekte: Hier zünden wir das Neon! */
.nav-btn:hover, #langSwitch:hover,
.nav-btn:focus, #langSwitch:focus,
.nav-btn[aria-expanded="true"] {
    /* Rahmen und Text werden Neon-Rot */
    border-color: var(--accent);
    color: var(--accent) !important;
    
    /* Glow Effekte */
    box-shadow: 0 0 15px rgba(211, 53, 0, 0.4);
    text-shadow: 0 0 8px var(--accent);
    
    background-color: rgba(0, 0, 0, 0.5) !important;
    outline: none;
}

/* Icon im Button */
.nav-btn .nav-icon {
    width: auto;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
}

/* Styling für die erste Zeile */
.intro-line {
    font-size: 0.8em; /* Macht es 60% so groß wie den Rest */
    color: var(--accent); /* Färbt es rot (deine Akzentfarbe) */
    letter-spacing: 2px; /* Etwas breiter ziehen */
    font-weight: normal; /* Weniger fett */
    display: inline-block;
    margin-bottom: 5px; /* Kleiner Abstand zur zweiten Zeile */
}

/* ---------- main ---------- */
main {
    /* Absolut positionieren zwischen Header und Footer */
    position: absolute;
    top: var(--header-h);  /* Startet unter dem Header */
    bottom: 80px;          /* Endet über dem Footer (Höhe anpassen falls nötig!) */
    left: 0; 
    right: 0;
    
    /* Scrollen NUR hier erlauben */
    overflow-y: auto; 
    overflow-x: hidden;
    
    padding: 20px 20px 60px 20px;
    z-index: 20;
    
    /* Scrollbalken verschönern (optional hier nochmal einfügen, falls weg) */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #000;
}

/* Der Bereich, in dem der eigentliche Inhalt liegt */
/* Ersetze deinen #page Block hiermit: */
#page {
    /* Scanlines Hintergrund */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(255, 255, 255, 0.03) 4px
    );
    background-attachment: local; /* Scrollt mit dem Inhalt */
    
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto; /* Zentriert den Inhalt */
    
    /* Mindesthöhe ist nicht mehr zwingend nötig, aber schadet nicht */
    min-height: 100%; 
}
/* Tötet den inneren (zweiten) Scrollbalken im Musikplayer / in den Sections */
.section, .page-section, #music {
    overflow-y: visible !important; 
    height: auto !important;
}
/* Den .page-wrap brauchen wir eigentlich kaum noch, 
   aber zur Sicherheit lassen wir ihn sauber definiert: */
main > .page-wrap {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}

/* ---------- LINKS IM FLIESSTEXT (E-Mail, externe Links) ---------- */

/* Nur Links innerhalb von Absätzen im Hauptbereich ansprechen */
main p a, main li a {
    color: var(--accent);       /* Dein Neon-Rot statt Blau */
    text-decoration: none;      /* Unterstreichung entfernen (cleaner Look) */
    font-weight: bold;          /* Fett, damit man sieht: Das ist klickbar */
    transition: all 0.2s ease;
    
    /* Optional: Eine feine Linie unten drunter */
    border-bottom: 1px solid transparent; 
}

/* Hover-Effekt (beim Drüberfahren) */
main p a:hover, main li a:hover {
    color: #fff;                /* Wird Weiß (oder heller) */
    text-shadow: 0 0 8px var(--accent); /* Leichter roter Glow */
    border-bottom: 1px solid var(--accent); /* Linie erscheint */
}

/* custom scrollbar (applies to main) */
main::-webkit-scrollbar{width:12px}
main::-webkit-scrollbar-track{background:transparent}
main::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #d335001f, #d3350047);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
main{scrollbar-width:thin;scrollbar-color:#d33500ff transparent}

/* ---------- nav menu ---------- */
/* KORRIGIERT: */
.nav-menu{
  position:fixed;top:calc(var(--header-h) + 6px);left:20px;display:flex;flex-direction:column;gap:0;padding:8px;border-radius:8px;z-index:70;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.9);backdrop-filter: blur(6px);border:1px solid #d3350026;
  transform-origin:top left;opacity:0;pointer-events:none;transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1);
} /* <--- Hier wurde die Klammer geschlossen */

/* Jetzt steht der Block draußen und funktioniert! */
.nav-menu a.active-page {
    color: var(--accent);
    background: linear-gradient(90deg, rgba(211, 53, 0, 0.15), transparent);
    border-left: 2px solid var(--accent);
}

.nav-menu.open{opacity:1;pointer-events:auto;transform:translateY(0) scaleY(1)}
.nav-menu a{display:block;padding:10px 16px;text-decoration:none;color:var(--fg);white-space:nowrap;border-radius:6px;border-left: 2px solid transparent;transition: all 0.2s ease;}
.nav-menu a:hover{background:linear-gradient(90deg, #d335001f, #d3350052);color:var(--accent)}

/* ---------- cards ---------- */
.card{
  background: linear-gradient(180deg, #222, #111);
  padding:var(--card-pad);border-radius:var(--radius);border:1px solid #d335000f;
  box-shadow:0 12px 30px rgba(0,0,0,0.6);
}

/* ---------- player - fluid responsive layout ---------- */
.player-wrap{
  display:grid;
  grid-template-columns: clamp(180px, 22%, 320px) 1fr;
  gap: clamp(12px, 2.4vw, 28px);
  align-items:start;
  width:100%;
  min-width:0; /* IMPORTANT: allow inner children to shrink and prevent body horizontal scroll */
}

/* album list */
.album-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:60vh;
  overflow:auto;
  padding-right:6px;
  width: auto;
  min-width:0; /* prevent overflow */
}
.album-list::-webkit-scrollbar { width:8px }
.album-list::-webkit-scrollbar-thumb { background: rgba(124,255,0,0.4); border-radius:4px }

.album-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.45));
  border:1px solid #d335000f;
  width: auto;
  min-width:0;
}
.album-item img.cover {
    flex-shrink: 0; /* verhindert, dass das Bild auf 0 schrumpft */
}
.album-item:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.6), 0 0 18px #d335000a;
  background:linear-gradient(180deg, #d3350005, rgba(0,0,0,0.55));
}

/* cover */
.cover{
  width: clamp(64px, 14%, 140px);
  height: clamp(64px, 14%, 140px);
  border-radius:8px;
  background:#111;
  background-size:cover;
  background-position:center;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.6);
  border:1px solid #d335000f;
  flex:0 0 auto;
  min-width:0;
}
.album-meta{font-size:clamp(12px,1.6vw,14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* digibook card */
.digibook{
  padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.6));
  border:1px solid #d335000a;box-shadow:0 10px 40px rgba(0,0,0,0.6);
  min-height:var(--digibook-min-height,220px);
}

/* Now playing area */
#nowPlaying{
  display:flex;
  flex-wrap: wrap;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
  min-width:0;
}
#nowPlaying .cover{width:clamp(80px, 18%, 160px);height:clamp(80px,18%,160px);border-radius:10px;flex:0 0 auto}

/* track list */
.track-list{max-height:40vh;overflow:auto;border-radius:8px;padding:6px;background:rgba(0,0,0,0.28)}
.track{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.track:hover{background:linear-gradient(90deg, #d3350008, #d3350005);border-color:#d335000a}

/* controls */
.controls{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.btn{padding:10px 12px;border-radius:10px;border:1px solid #d335001f;background:rgba(0,0,0,0.5);color:var(--accent);cursor:pointer}
.btn.big{font-size:clamp(16px,2vw,22px);padding:12px 16px}

/* progress + title elements (fluid) */
#playerTop{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
#currentSongTitle{color:var(--accent);font-weight:600;font-size:clamp(12px, 1.5vw, 16px);margin-bottom: 8px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
#audioProgress{width:100%;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg, #d335001f, #d3350052);outline:none;border:0}

/* small glitch accent on headings */
h1,h2{position:relative}
h2::after{content:'';position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg, transparent, #d335002e, transparent);transform:translateY(-6px);opacity:.6}

/* Für Bio und Text Layouts */

.content-block {
  display: flex;
  flex-direction: column;
  /* grid-template-columns kannst du löschen, das hat hier keine Funktion */
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  justify-items: center;
  
  /* NEU: Zentriert den Text in den Absätzen */
  text-align: center; 
  width: 100%; /* Nutzt die volle Breite */
}
.content-block img {
  width: 35%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #d335000f;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.content-block .text {
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Utility classes ---------- */
.hidden{display:none!important}
.center{display:flex;align-items:center;justify-content:center}
.row{display:flex;flex-wrap:wrap;gap:8px}
.col{display:flex;flex-direction:column;gap:8px}
.fade-in{animation:fadeIn .36s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Accessibility / focus ---------- */
button:focus, a:focus, input:focus, select:focus, textarea:focus{outline:2px solid #d3350024;outline-offset:2px}

/* ---------- Media queries (fine tuning) ---------- */
@media (max-width:1100px){
  :root{--page-max-width:960px}
  .album-list{max-height:50vh}
}

/* RESPONSIVE MUSIC PAGE FIX */
@media (max-width: 900px) {

  /* Player wird einspaltig */
  .player-wrap {
      grid-template-columns: 1fr;
      gap: 20px;
  }

  /* Album-Liste wird NICHT mehr horizontal, sondern wieder normal vertikal */
  .album-list {
      flex-direction: column;
      max-height: none;
      overflow-y: visible;
  }

  /* Album Cards passen sich der Displaybreite an */
  .album-item {
      width: 100%;
      min-width: auto;
  }

  /* Cover-Bilder skalierbar */
  .album-item img.cover {
      width: 72px;
      height: 72px;
  }
  
  /* Garantiert sichtbare Cover für Albumliste */
  .album-item img.cover {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }

  /* Now Playing Bild */
  #nowPlaying img.cover {
      width: 90px;
      height: 90px;
  }
  
  /* Now Playing – größeres Cover */
  #nowPlaying img.cover {
    width: 112px;
    height: 112px;
    object-fit: cover;
    display: block;
  }
}

@media (max-width:520px){
  header{padding:0 8px}
  footer{padding:0 8px}
  .card{padding:12px}
  .album-item{min-width:140px}
  #currentSongTitle{font-size:13px}
  .btn{padding:8px 10px}
}

/* final safety: ensure no horizontal overflow from children */
:root, body, html, main, .page-wrap { overflow-x: hidden !important; width:100% }

/* =========================================
   COMPACT HOME PAGE (Laptop Friendly)
   ========================================= */

.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;       /* Volle Höhe nutzen */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    overflow: hidden;   /* Verhindert Scrollbalken innerhalb der Seite */
}

/* 2. Bild: Hast du schon auf 25vh gesetzt - Super! */
.home-image-wrapper img {
    max-width: 100%;
    height: auto;
    max-height: 25vh; /* Deine Einstellung */
    object-fit: contain;
    border: 0.5px solid var(--accent);
    box-shadow: 0 0 15px #d3350033;
    border-radius: 4px;
    margin-bottom: 2vh;
}

/* 3. Textbereich: Kleiner und enger */
.home-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5vh; 
    margin-bottom: 3vh;
}

.highlight-text {
    /* Vorher: clamp(1rem, 2.5vh, 1.4rem) */
    /* JETZT: Startet feiner (0.8rem) und wächst langsamer (1.8vh) */
    font-size: clamp(0.8rem, 1.8vh, 1.1rem); 
    
    font-weight: bold;
    color: var(--accent);
    text-transform: uppercase;
    margin: 0;
}

.home-text-wrapper p:last-child {
    /* Vorher: clamp(0.9rem, 2vh, 1.1rem) */
    /* JETZT: Sehr dezent (0.7rem bis max 0.9rem) */
    font-size: clamp(0.7rem, 1.5vh, 0.9rem);
    
    color: var(--fg);
    opacity: 0.8;
    letter-spacing: 3px; /* Etwas mehr Abstand bei kleiner Schrift sieht edel aus */
    margin: 0;
}

/* 4. Action Buttons: Sicherstellen, dass sie sichtbar sind */
.home-actions {
    display: flex;
    gap: 16px;
    margin-top: 1vh;
    z-index: 10; /* Damit sie über evtl. anderen Elementen liegen */
}

.action-btn {
    padding: 5px 10px;
    font-size: 13px; /* Etwas kompakter */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fg);
    background: rgba(255,255,255,0.02); /* Hauchzarter Hintergrund */
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-btn.primary {
    border-color: var(--accent);
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 0 10px rgba(211, 53, 0, 0.2);
}

.action-btn:hover {
    background: var(--accent); /* Plötzlich voll gefüllt beim Hover */
    color: #000 !important;    /* Text wird schwarz für Kontrast */
    border-color: var(--accent) !important;
    text-shadow: none;         /* Glow weg, dafür harte Farbe */
    letter-spacing: 1px;       /* Nicht zu weit ziehen */
    box-shadow: 0 0 20px rgba(211, 53, 0, 0.6);
}

/* Mobile Anpassung: Schrift etwas kleiner auf Handys */
@media (max-width: 600px) {
    .home-container h1 {
        font-size: 1.8rem;
    }
    .highlight-text {
        font-size: 1.2rem;
    }
}

/* =========================================
   COMPACT PLAYER STYLES (Modern Dashboard)
   ========================================= */

/* 1. Alben-Leiste (Horizontaler Strip) */
.album-strip-wrapper {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d335001a;
}

.album-strip {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: thin;
}

.album-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0.6;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.album-thumb.active, .album-thumb:hover {
    opacity: 1;
    transform: scale(1.1);
    border-color: var(--accent);
    box-shadow: 0 0 10px #d3350066;
}

.album-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Haupt-Karte (Split Layout) */
.player-compact-card {
    display: grid;
    grid-template-columns: 260px 1fr; /* Links etwas schmaler (vorher 300px) */
    gap: 16px; /* Kleinerer Abstand (vorher 24px) */
    background: #161616;
    border: 1px solid #d335001a;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    align-items: start;
}

/* Linke Spalte: Visuals */
.player-visuals {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.digibook-container {
    position: relative;
}

/* Rechte Spalte: Controls & Liste */
.player-controls-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
    height: 100%;
    justify-content: space-between;
}

.meta-header .album-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--fg);
    margin-bottom: 2px;
}
.meta-header .album-year {
    font-size: 0.75rem;
    opacity: 0.6;
}

.dynamic-song-title {
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 600;
    min-height: 1.2em;
}
/* 1. Der große Titel oben (Aktueller Song) */
#currentSongTitle {
    white-space: nowrap;      /* Zwingt alles in eine Zeile */
    overflow: hidden;         /* Versteckt den Überlauf */
    text-overflow: ellipsis;  /* Macht "..." am Ende */
    
    /* WICHTIG: Reserviert Platz, auch wenn kein Text da ist! */
    min-height: 1.2em;        
    line-height: 1.2;
    display: block;
    width: 100%;              /* Nimmt die volle Breite */
}
/* Kompakte Trackliste */

/* NEUE VERSION (Stabil & Elegant) */
.track-list.compact-tracks {
    height: 165px;  /* Vorher 190px - das spart 50px! */
    overflow-y: auto;
    
    /* Optik (bleibt gleich) */
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
    margin-bottom: 10px;
    min-height: 165px;
    
    /* Scrollbar etwas hübscher machen (optional) */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.track.compact {
    font-size: 0.8rem;
    padding: 4px 8px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
}
.track.compact:hover {
    background: #d335001a;
}
.t-num { opacity: 0.5; font-size: 0.9em; }
.t-dur { opacity: 0.5; font-size: 0.9em; }

.t-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Der Trick bei CSS Grid: min-width: 0 verhindert, 
       dass der Text die Zelle aufsprengt */
    min-width: 0; 
    display: block;
}

/* Control Bar unten */
.control-bar {
    background: rgba(255,255,255,0.03);
    padding: 8px 12px; /* Etwas weniger Padding */
    border-radius: 8px;
}

#audioProgress {
    width: 100%;
    height: 4px;
    margin-bottom: 12px;
    cursor: pointer;
}

.btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--fg);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.big-play {
    width: 44px;
    height: 44px;
    font-size: 20px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px #d3350066;
}

.spacer { flex: 1; } /* Schiebt Elemente auseinander */

.mini-select {
    padding: 4px 8px;
    font-size: 12px;
    height: auto;
}

.source-links-small {
    margin-top: 6px;
    font-size: 10px; /* Optional: Mach 11px draus, falls es zu klein ist */
    text-align: right;
    opacity: 0.9; /* BAM! Deutlich heller (90% statt 60%) */
}
.source-links-small a {
    color: var(--fg); /* Normale Textfarbe (Hellgrau/Weiß) */
    margin-left: 8px;
    text-decoration: none;
    transition: all 0.2s ease; /* Macht das Aufleuchten butterweich */
}
.source-links-small a:hover { 
    color: var(--accent); /* Wechselt auf dein rotes Accent */
    text-shadow: 0 0 8px var(--accent); /* Roter Neon-Glow beim Drüberfahren! */
    opacity: 1; /* 100% Leuchtkraft */
}
/* =========================================
   CUSTOM DROPDOWN (Real Nav-Style)
   ========================================= */

/* Der Container hält alles zusammen */
.custom-dropdown {
    position: relative;
    display: inline-block;
}

/* 1. Der Trigger-Button (Kopie vom Header .nav-btn) */
.dropdown-trigger {
    /* Wir nutzen die existierende .nav-btn Klasse aus dem Header,
       aber passen sie hier minimal an */
    min-width: 115px; /* Feste Breite damit es nicht springt */
    justify-content: space-between !important; /* Text links, Pfeil rechts */
    padding: 8px 12px !important;
}

/* Der Pfeil im Button */
.dd-arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Wenn offen: Pfeil drehen */
.custom-dropdown.open .dd-arrow {
    transform: rotate(180deg);
}

/* 2. Das Menü (Versteckt) - Style wie .nav-menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px); /* 8px Abstand nach unten */
    left: 0;
    width: 100%; /* So breit wie der Button */
    min-width: 140px; /* Oder etwas breiter */
    
    display: flex;
    flex-direction: column;
    gap: 4px; /* Kleiner Abstand zwischen den Items */
    padding: 6px;
    
    /* Der Crystal Look (Glas + Blur) */
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    
    /* Animation & Sichtbarkeit */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
    z-index: 100;
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Wenn offen: Menü anzeigen */
.custom-dropdown.open .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* 3. Die Items (Links) */
.dropdown-menu a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    
    /* Schrift Style */
    color: var(--fg);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    border-radius: 4px;
    transition: all 0.2s ease;
    
    /* BASIS: Unsichtbarer Rand mit !important (verhindert Wackeln) */
    border-left: 2px solid transparent !important;
}

/* AKTIVER ZUSTAND */
.dropdown-menu a.active {
    color: var(--accent) !important;
    background: rgba(211, 53, 0, 0.15);
    
    /* WICHTIG: Hier AUCH !important, damit ROT gewinnt! */
    border-left: 2px solid var(--accent) !important;
}

/* Hover Effekt */
.dropdown-menu a:hover {
    background: linear-gradient(90deg, #d335001f, #d3350000);
    color: var(--accent);
}

/* --- Mobile Anpassung (unter 800px) --- */
@media (max-width: 800px) {
    .player-compact-card {
        grid-template-columns: 1fr; /* Alles untereinander */
    }
    
/* --- NEU: Verhindert das "Breitziehen" des Booklets --- */
    .player-visuals {
        align-items: center; /* Zentriert das Booklet horizontal */
    }

    .digibook-container {
        width: 100%;        /* Nimmt Platz ein... */
        max-width: 260px;   /* ...aber STOPPT bei der Originalgröße! */
        margin: 0 auto;     /* Zentriert es sicherheitshalber */
    }

       
    .track-list.compact-tracks {
        height: 160px; 
    }
}

/* =========================================
   KONTAKTFORMULAR (Neon Style)
   ========================================= */

/* 1. Das Formular selbst */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto; /* Zentriert das Formular */
}

/* 2. Eingabefelder (Input & Textarea) */
.contact-input {
    /* Reset */
    appearance: none;
    border: none;
    outline: none;

    /* Design (angepasst an Header-Buttons) */
    background-color: #161616;
    border: 1px solid rgba(211, 53, 0, 0.8); /* Dezenter roter Rand */
    border-radius: 6px;
    color: var(--fg); /* Helle Schrift */
    
    /* Text-Style */
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* Fokus-Effekt für Felder (Wenn man reinklickt) */
.contact-input:focus {
    border-color: var(--accent); /* Rand wird Neon-Rot */
    box-shadow: 0 0 10px rgba(211, 53, 0, 0.2); /* Leichter Glow */
    background-color: #000;
}

/* Platzhalter-Text (grau statt weiß) */
.contact-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* 3. Der Senden-Button (Industrial Frame + Klammern + Zentriert) */
.contact-btn {
    appearance: none;
    -webkit-appearance: none;
    
    /* 1. Layout & Zentrierung */
    display: flex !important;
    justify-content: center;
    align-items: center;
    
    /* WICHTIG: Button ist nur so breit wie der Text */
    width: fit-content !important; 
    margin: 0 auto; /* Zentriert ihn im Formular-Container */
    
    /* 2. Industrial Style Basis */
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--accent) !important;
    
    border-radius: 6px;
    padding: 12px 24px; /* Etwas mehr Platz an den Seiten */
    
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 3. Die eckigen Klammern [ ] wieder einfügen */
.contact-btn::before {
    content: '[ ';
    margin-right: 5px;
    color: var(--accent) !important;
    transition: all 0.3s ease;
}

.contact-btn::after {
    content: ' ]';
    margin-left: 5px;
    color: var(--accent) !important;
    transition: all 0.3s ease;
}

/* 4. HOVER EFFEKT */
.contact-btn:hover {
    background: var(--accent) !important; /* Rot gefüllt */
    color: #000 !important;               /* Text Schwarz */
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(211, 53, 0, 0.3);
}

/* Beim Hover werden auch die Klammern schwarz */
.contact-btn:hover::before, 
.contact-btn:hover::after {
    color: #000;
}

/* =========================================
   FOOTER: Impressum & Datenschutz Zentrierung
   ========================================= */

/* 1. Container der Links (die zweite Zeile) formatieren */
#footer .footer-links {
    display: block;      /* Stellt sicher, dass es eine eigene Zeile ist */
    text-align: center;  /* Zentriert die enthaltenen Links horizontal */
    
    /* Definiert den Abstand und die Trennlinie zur oberen Zeile */
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #d335001a; /* Dezente Akzent-Trennlinie */
}

/* 2. Abstand ZWISCHEN den Links einfügen */
#footer .footer-links a {
    /* Setzt 0px Abstand oben/unten und 20px links/rechts */
    margin: 0 20px; 
    
    /* Stellt sicher, dass die Schriftfarbe wie gewünscht bleibt */
    /* Du kannst hier auch die Schriftgröße für die Fußzeile anpassen, z.B. font-size: 0.8rem; */
}

/* =========================================
   ÜBERSCHRIFTEN ZENTRIEREN
   ========================================= */

/* Das zentriert die Hauptüberschrift (h2) auf allen Unterseiten */
#page > h2 {
    text-align: center;
    margin-bottom: 30px; /* Gibt der Überschrift etwas mehr Luft nach unten */
}

/* Falls du auch die Zwischenüberschriften (z.B. bei "Merch") mittig haben willst: */
#page h3 {
    text-align: center;
}

/* =========================================
   NEWS & MERCH GRID SYSTEM
   ========================================= */

/* Der Container für beide Seiten (Automatisches Gitter) */
.grid-container {
    display: grid;
    /* Zauberformel: Macht so viele Spalten wie passen, mind. 300px breit */
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 20px;
}

/* =========================================
   NEWS CARDS (Buttons unten fixiert)
   ========================================= */

.news-card {
    background: #161616;
    border: 1px solid rgba(211, 53, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
    
    /* 1. Layout der Karte: Flex-Spalte */
    display: flex;
    flex-direction: column;
    
    /* 2. Höhe erzwingen: Karte füllt immer die ganze Grid-Zeile */
    height: 100%; 
    min-height: 360px; /* Mindesthöhe für einheitlichen Look */
}

.news-img {
    height: 170px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    
    /* Bild darf nicht gestaucht werden */
    flex-shrink: 0; 
}

.news-content {
    padding:15px;
    
    /* 3. Inhalt auch als Flex-Spalte */
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    /* 4. WICHTIG: Der Inhalt wächst und füllt den leeren Platz */
    flex-grow: 1; 
}

.news-date {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    opacity: 0.8;
}

.news-content h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    min-height: 2.6em; 
    
    /* NEU: Falls du mal einen halben Roman als Überschrift tippst (3 Zeilen), 
       wird es hier nach 2 Zeilen sauber mit "..." abgeschnitten */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-content p {
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 10px;
    
    /* --- TEXT BEGRENZUNG --- */
    /* 1. Modus aktivieren */
    display: -webkit-box; 
    
    /* 2. Anzahl der Zeilen festlegen (hier 2) */
    -webkit-line-clamp: 2; 
    
    /* 3. Ausrichtung festlegen (wird oft als "deprecated" markiert -> ignorieren!) */
    -webkit-box-orient: vertical; 
    
    /* 4. Rest abschneiden */
    overflow: hidden; 
    text-overflow: ellipsis;
}

/* 5. Der Button-Container (das letzte Element) */
/* =========================================
   GLOBAL BUTTON STYLE (News, Merch) - Industrial Frame
   ========================================= */

.news-content > div:last-child,
.merch-link {
    /* 1. Layout auf Flexbox ändern für perfekte Zentrierung */
    display: flex !important;    /* Flexbox statt Block */
    justify-content: center;     /* Horizontal mittig */
    align-items: center;         /* Vertikal mittig (Das hat gefehlt!) */
    width: fit-content !important;
    align-self: center;
    margin-top: auto !important;
    
    /* 2. Dein gewünschter Style */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--accent) !important; /* Rote Schrift */
    
    border-radius: 10px;
    padding: 12px;
    
    text-align: center !important;   /* Zentriert den Text über mehrere Zeilen */
    line-height: 1.3 !important;     /* Gibt den Zeilen etwas Raum zum Atmen */

    font-weight: 700;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1; /* Verhindert, dass Zeilenabstand die Mitte verschiebt */
    
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* WICHTIG: Klammern entfernen */
    content: none;
}

/* Sicherstellen, dass keine Klammern mehr generiert werden */
.news-content > div:last-child::before, .news-content > div:last-child::after,
.merch-link::before, .merch-link::after {
    content: none !important;
    display: none;
}

/* HOVER: Füllt sich Rot */
.news-content > div:last-child:hover,
.merch-link:hover {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(211, 53, 0, 0.3);
    
    letter-spacing: 1px;
    transform: none;
}

/* --- HOVER EFFEKT --- */
.news-card:hover .news-content > div:last-child {
    /* Wenn man über die Karte fährt, leuchtet der Text schon leicht */
    opacity: 1 !important;
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- MERCH CARDS (Buttons fixiert am Boden) --- */
.merch-card {
    background: #161616;
    border: 1px solid rgba(211, 53, 0, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
    
    /* 1. Layout: Flex-Spalte über volle Höhe */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; 
}

.merch-card:hover {
    border-color: var(--accent);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 20px rgba(211, 53, 0, 0.15);
}

.merch-img {
    width: 100%;
    height: 220px;
    background: #050505;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
    
    /* Bildgröße fixieren */
    flex-shrink: 0; 
}

.merch-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.merch-card:hover .merch-img img {
    transform: scale(1.05); 
}

/* 2. Der Info-Container (Text + Button) */
.merch-info {
    width: 100%;
    
    /* WICHTIG: Dieser Bereich wächst und füllt die Karte */
    flex-grow: 1;
    
    /* Damit wir den Button darin steuern können */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.merch-info h3 {
    font-size: 1rem;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.merch-info .price {
    font-size: 1.1rem;
    color: var(--fg);
    font-weight: bold;
    margin-bottom: 12px;
}

/* Shop Button Style (Angepasst an Industrial Look) */
.shop-btn {
    display: inline-flex; /* Besser als inline-block für Zentrierung */
    align-items: center;
    justify-content: center;
    
    padding: 8px 20px;
    
    /* NEU: Industrial Basis-Style (Weißer Rahmen, Rote Schrift) */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--accent) !important;
    
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;      /* Fett, wie die anderen */
    text-transform: uppercase; /* Großbuchstaben */
    letter-spacing: 1px;
    
    border-radius: 6px;
    transition: all 0.2s ease;
}

.shop-btn:hover {
    /* NEU: Industrial Hover (Rot gefüllt, Schwarz Text) */
    background: var(--accent);
    color: #000 !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(211, 53, 0, 0.5);
}

/* =========================================
   ANIMATION: STAGGERED FADE IN
   ========================================= */

/* 1. Die Bewegung definieren */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Startet 30px weiter unten */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* Endet an der normalen Position */
    }
}

/* 2. Die Klasse, die wir den Karten geben */
.stagger-card {
    opacity: 0; /* WICHTIG: Startet unsichtbar, sonst flackert es kurz */
    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: opacity, transform; /* Performance-Optimierung für den Browser */
}

/* =========================================
   HOME PAGE "PEPP" UPGRADE
   ========================================= */

/* =========================================
   GLITCH TITEL (Fix: Passt in die Breite & Härterer Effekt)
   ========================================= */

.glitch {
    position: relative;
    color: var(--fg);
    
    /* 1. FIX FÜR DAS ABSCHNEIDEN:
       - Wir verringern den "vw"-Wert (Viewport Width) von 3.5vw auf 2.8vw.
       - Das sorgt dafür, dass die Schrift schneller kleiner wird, wenn das Fenster schmaler wird.
    */
    font-size: clamp(1rem, 2.8vw, 2.5rem);
    
    font-weight: 800;
    text-transform: uppercase;
    
    /* 2. PLATZ SPAREN:
       - Weniger Abstand zwischen den Buchstaben verhindert Überbreite.
    */
    letter-spacing: 1px; 
    
    white-space: nowrap; /* Zeilenumbruch bleibt verboten */
    margin-bottom: 2vh;
    line-height: 1;
    z-index: 5;
    
    /* Sicherheitshalber: Verhindert, dass der Container den Text rausdrückt */
    max-width: 100%; 
}

/* Erzeugt zwei Kopien des Textes für den Effekt */
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Die erste Kopie (Rot/Neon Shift) - AGGRESSIVER */
.glitch::before {
    left: 5px;
    text-shadow: -3px 0 #ff0000; /* Stärkerer Versatz (4px) */
    clip: rect(44px, 450px, 56px, 0);
    /* Viel schneller: 0.2s statt 5s */
    animation: glitch-anim 1.0s infinite linear alternate-reverse;
}

/* Die zweite Kopie (Blau/Cyan Shift) - AGGRESSIVER */
.glitch::after {
    left: -10px;
    text-shadow: -4px 0 #00fff9; /* Stärkerer Versatz (4px) */
    clip: rect(44px, 450px, 56px, 0);
    /* Viel schneller: 0.2s statt 5s */
    animation: glitch-anim2 0s infinite linear alternate-reverse;
}

/* Die wilden Animationen */
@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); }
    20% { clip: rect(6px, 9999px, 4px, 0); }
    40% { clip: rect(82px, 9999px, 22px, 0); }
    60% { clip: rect(36px, 9999px, 86px, 0); }
    80% { clip: rect(13px, 9999px, 59px, 0); }
    100% { clip: rect(66px, 9999px, 20px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(15px, 9999px, 85px, 0); }
    20% { clip: rect(56px, 9999px, 12px, 0); }
    40% { clip: rect(32px, 9999px, 66px, 0); }
    60% { clip: rect(88px, 9999px, 44px, 0); }
    80% { clip: rect(4px, 9999px, 77px, 0); }
    100% { clip: rect(96px, 9999px, 16px, 0); }
}

/* 2. Atmendes Bild (Breathing Animation) */
.breathing-img {
    /*animation: breathe 6s ease-in-out infinite;*/
    box-shadow: 0 0 20px rgba(211, 53, 0, 0.2); /* Sanfter Glow */
}

@keyframes breathe {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.03); filter: brightness(1.15); } /* Leicht reinzoomen & heller */
}

/* 3. Home Action Buttons (Text-Style mit Klammern) */
.home-actions {
    display: flex;
    gap: 20px; /* Schön viel Luft zwischen den Links */
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.action-btn {
    /* Rahmen & Hintergrund WEG */
    background: rgba(255,255,255,0.02); /* Hauchzarter Hintergrund */
    border: 1px solid rgba(255,255,255,0.1) !important; /* Fast unsichtbarer Rahmen */ 
    box-shadow: none !important;
    text-decoration: none;
    
    padding: 10px 10px; /* Weniger Padding, da kein Rahmen mehr da ist */
    
    /* Typografie (Wie News/Merch) */
    color: var(--accent) !important;
    font-weight: 700;
    font-size: 0.95rem; /* Tick größer für Home */
    text-transform: uppercase;
    letter-spacing: 1px;
    
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

/* Primär-Button (Links) braucht auch keinen Rahmen mehr */
.action-btn.primary {
    color: var(--accent) !important; /* Zwingend Weiß! */
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
}

/* --- HOVER EFFEKT (Neon Glow & Atmen) --- */
.action-btn:hover,
.action-btn.primary:hover {
    /* 1. Jetzt wird es ROT/NEON */
    background: var(--accent); /* Plötzlich voll gefüllt beim Hover */
    color: #000 !important;    /* Text wird schwarz für Kontrast */
    border-color: var(--accent) !important;
    text-shadow: none;         /* Glow weg, dafür harte Farbe */
    letter-spacing: 1px;       /* Nicht zu weit ziehen */
    box-shadow: 0 0 15px rgba(211, 53, 0, 0.3); /* Leichter Glow um den Kasten */
}

/* --- Bonus: Textauswahl Farbe --- */
/* Wenn der User Text markiert, wird er neon-rot */
::selection {
    background: var(--accent);
    color: #000;
}

/* =========================================
   MODAL / OVERLAY SYSTEM
   ========================================= */

/* Der dunkle Hintergrund (füllt den ganzen Screen) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px); /* Macht den Hintergrund unscharf */
    z-index: 1000; /* Muss über allem liegen (Header ist 60) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Wenn das Modal aktiv ist */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Die eigentliche Karte in der Mitte */
.modal-card {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--accent);
    box-shadow: 0 0 30px rgba(211, 53, 0, 0.4);
    width: 100%;
    max-width: 600px; /* Nicht zu breit auf großen Screens */
    max-height: 90vh; /* Passt auf den Screen */
    overflow-y: auto; /* Scrollbar, falls Text zu lang */
    border-radius: 12px;
    position: relative;
    padding: 0;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

/* Cooler "Pop"-Effekt beim Öffnen */
.modal-overlay.active .modal-card {
    transform: scale(1);
}

/* Der Schließen-Button (X) */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--fg);
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
}

/* Inhalt Styling */
.modal-body {
    display: flex;
    flex-direction: column;
}

.modal-img-top {
    width: 100%;
    max-height: 300px;         /* Darf maximal 300px hoch werden (schützt das Layout) */
    height: auto;              /* Passt sich ansonsten automatisch der echten Bildhöhe an */
    object-fit: contain;       /* Zeigt das KOMPLETTE Bild ohne Abschneiden */
    background-color: #050505; /* Füllt eventuell entstehende Ränder dunkel auf */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-text-area {
    padding: 24px;
    text-align: left;
}

.modal-text-area h3 {
    color: var(--accent);
    margin-top: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-text-area .date {
    font-size: 12px;
    opacity: 0.6;
    margin-bottom: 10px;
    display: block;
}

.modal-text-area p {
    line-height: 1.6;
    font-size: 15px;
    opacity: 0.9;
}

/* =========================================
   SCROLLBAR FÜR MODAL (Schwarz/Rot)
   ========================================= */

/* Breite des Balkens */
.modal-card::-webkit-scrollbar {
    width: 8px; /* Etwas feiner als der Hauptbalken */
}

/* Der Hintergrund (Track) */
.modal-card::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5); /* Dunkel transparent */
    border-radius: 4px;
    margin: 10px 0; /* Etwas Abstand oben/unten */
}

/* Der Schieberegler (Thumb) */
.modal-card::-webkit-scrollbar-thumb {
    background: var(--accent); /* Dein Neon-Rot (#d33500) */
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.5); /* Kleiner Rand für Tiefe */
}

/* Hover-Effekt für den Schieberegler */
.modal-card::-webkit-scrollbar-thumb:hover {
    background: #ff4500; /* Etwas heller beim Anfassen */
    box-shadow: 0 0 10px var(--accent);
}

/* Firefox Support (Standard-Eigenschaften) */
.modal-card {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(0, 0, 0, 0.5);
}

/* =========================================
   ULTRA COMPACT MUSIC PLAYER (Passt auf einen Screen)
   ========================================= */

/* 1. Hauptüberschrift näher ranholen */
/* Wir nutzen den :has Selektor oder gehen davon aus, 
   dass auf der Musikseite der Player folgt */
#page:has(.player-compact-card) > h2 {
    margin-bottom: 10px; /* Vorher 30px */
    font-size: 1.5rem;   /* Etwas kleiner */
}

/* 2. Alben-Leiste oben: Kleiner machen */
.album-strip-wrapper {
    margin-bottom: 10px; /* Abstand nach unten verringern */
    padding-bottom: 5px;
}

.album-thumb {
    width: 45px;  /* Vorher 60px */
    height: 45px; /* Vorher 60px */
}

/* 3. Die Player-Karte selbst: Innenabstand reduzieren */
.player-compact-card {
    padding: 10px;     /* Vorher 14px */
    gap: 10px;         /* Vorher 12px */
    margin-bottom: 0;  /* Kein unnötiger Rand unten */
}

/* 5. Trackliste verkürzen */
.track-list.compact-tracks {
    /* Wenn die Liste kürzer ist, passt der Player besser */
    height: 110px; /* Vorher 140px */
    margin-bottom: 10px;
}

/* 6. Songtitel und Meta-Infos enger zusammen */
.dynamic-song-title {
    margin-bottom: 4px; /* Vorher 10px */
    font-size: 0.9rem;
}
.meta-header {
    margin-bottom: 4px;
}

/* 7. Controls (Play-Button Leiste) kompakter */
.control-bar {
    padding: 6px 10px;
}
#audioProgress {
    margin-bottom: 8px; /* Näher an die Buttons */
    height: 4px;
}
.big-play {
    width: 38px;
    height: 38px;
    font-size: 18px;
}
.icon-btn {
    width: 32px;
    height: 32px;
}

/* =========================================
   FINAL FIX V3: MAXIMUM ARTWORK (High Impact)
   (Ersetzt den vorherigen V2 Block am Ende)
   ========================================= */

/* 1. Überschrift noch näher ran */
#page:has(.player-compact-card) > h2 { margin-bottom: 0px !important; }

.album-strip-wrapper {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* 2. Linke Spalte massiv verbreitern */
/* Wir brauchen Platz für das 260px Buch */
.player-compact-card {
    grid-template-columns: 270px 1fr !important; 
    gap: 15px !important;
    padding: 15px !important;
    align-items: center !important; /* Zentriert Cover vertikal zum Player */
}

/* 4. Trackliste: Kompakter (Der Kompromiss) */
/* Wir reduzieren die Höhe, damit das Gesamtpaket nicht zu hoch wird.
   Es sind noch ca. 4 Songs sichtbar, danach muss man scrollen. */
.track-list.compact-tracks {
    height: 145px !important; /* Runter von 190px */
    min-height: 145px;
    margin-bottom: 8px;
    font-size: 0.9em; /* Schrift einen Hauch kleiner für mehr Platz */
}

/* 5. Controls: Ultra-Slim */
.control-bar {
    padding: 4px 8px !important;
}
.big-play {
    width: 38px !important;
    height: 38px !important;
}
#currentSongTitle {
    margin-bottom: 4px !important;
    font-size: 0.95rem !important;
}

/* --- SAFETY NET (Laptop) --- */
/* Wenn der Bildschirm niedriger als 850px ist, skalieren wir sanft zurück,
   damit nichts abgeschnitten wird. */
@media (max-height: 850px) {
    .player-compact-card { grid-template-columns: 230px 1fr !important; }
    .track-list.compact-tracks { height: 130px !important; }
}

/* --- MOBILE (Handy) --- */
@media (max-width: 800px) {
    .player-compact-card { grid-template-columns: 1fr !important; }
    .track-list.compact-tracks { height: 160px !important; }
}

/* =========================================
   TOUR / LIVE PAGE STYLES
   ========================================= */

.tour-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.tour-row {
    display: grid;
    /* FIX 1: Spalte 1 (Datum) von 100px auf 140px verbreitert */
    /* FIX 2: gap: 20px sorgt für Sicherheitsabstand zwischen den Spalten */
    grid-template-columns: 140px 1fr auto; 
    align-items: center;
    gap: 20px; /* Wichtig! */
    
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px; /* Etwas mehr Luft innen */
    border-radius: 8px;
    transition: all 0.2s ease;
    
    /* FIX 3: Verhindert, dass zentrierte Eltern-Elemente das Layout stören */
    text-align: left; 
}

/* Hover-Effekt nur bei kommenden Terminen */
.tour-row:not(.past):hover {
    border-color: var(--accent);
    background: rgba(211, 53, 0, 0.1);
    transform: translateX(5px);
}

.tour-date {
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--accent);
    font-weight: bold;
    
    /* FIX 4: Falls das Datum doch mal länger ist, darf es nicht überlappen */
    white-space: nowrap; 
}

.tour-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    /* FIX 5: Sicherstellen, dass Text linksbündig bleibt und Platz hat */
    overflow: hidden; 
}

.tour-city {
    font-weight: 800;
    font-size: 1.4rem; /* Schriftgröße passend zum fetten Look */
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    
    /* FIX 6: Falls der Städtename extrem lang ist, wird er abgeschnitten mit "..." */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tour-venue {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Button Anpassung */
.shop-btn.small {
    padding: 6px 12px;
    font-size: 11px;
}

/* Styles für die History (Vergangenheit) */
.tour-row.past {
    opacity: 0.4; /* Ausgegraut */
    border-color: transparent;
    background: transparent;
}
.tour-row.past .tour-date {
    color: var(--fg); /* Kein Neon mehr */
    text-decoration: line-through; /* Durchgestrichen (optional) */
}

/* Mobile Anpassung */
@media (max-width: 600px) {
    .tour-row {
        grid-template-columns: 1fr auto; /* Datum rutscht nach oben */
        grid-template-areas: 
            "info action"
            "date date";
        gap: 8px;
    }
    .tour-info { grid-area: info; }
    .tour-action { grid-area: action; }
    .tour-date { 
        grid-area: date; 
        font-size: 0.9rem; 
        opacity: 0.8;
    }
}

/* =========================================
   JUBILÄUMS-TRANSFORMATION (Grid Stack)
   ========================================= */

.hero-transform-wrapper {
    /* Grid Stack Trick: Alle Kinder liegen in derselben Zelle übereinander */
    display: grid;
    grid-template-areas: "stack";
    
    width: 100%;
    max-width: 1000px; /* Begrenzt die Breite auf großen Screens */
    margin: 0 auto 2vh auto;
    
    border-radius: 4px;
    border: 1px solid rgba(211, 53, 0, 0.6); /* Dein roter Neon-Rand */
    box-shadow: 0 0 25px rgba(211, 53, 0, 0.15);
    overflow: hidden; /* Wichtig, damit Scanlines nicht überstehen */
    position: relative;
}

.transform-img {
    grid-area: stack; /* Beide Bilder auf denselben Platz zwingen */
    width: 100%;
    height: auto;     /* Höhe passt sich automatisch an */
    display: block;
}

/* Das untere Bild (Grau) */
.base-img {
    z-index: 1;
    filter: brightness(0.8) grayscale(100%); /* Optional: Lässt das alte Bild noch "älter" wirken */
}

/* =========================================
   3-LAYER LOGO ANIMATION (Soft Crossfade)
   ========================================= */

/* Alle Bilder nutzen denselben Platz (Grid Stack) */
.transform-img {
    grid-area: stack;
    width: 100%;
    height: auto;
    display: block;
    
    /* WICHTIG: Hardware-Beschleunigung für butterweiche Blenden */
    will-change: opacity;
    transition: opacity 0.5s ease;
}

/* LAYER 1: Ganz unten (Hintergrund-Textur) */
/* "Gesichter01.png" - Bleibt immer sichtbar */
.static-bg {
    z-index: 1;
    opacity: 1; /* Statisch sichtbar */
    filter: brightness(0.6); /* Etwas dunkler, damit die Logos knallen */
}

/* LAYER 2: Mitte (Erstes Gesicht) */
/* "Gesichter02.png" - Blendet aus, wenn das andere kommt */
.base-img {
    z-index: 2;
    /* Animation: Startet sichtbar -> wird unsichtbar -> wird sichtbar */
    animation: fadeBase 12s ease-in-out infinite;
}

/* LAYER 3: Ganz oben (Zweites Gesicht) */
/* "Gesichter03.png" - Blendet ein, wenn das andere geht */
.reveal-img {
    z-index: 3;
    /* Entferne den alten clip-path Mist */
    clip-path: none !important; 
    
    /* Animation: Startet unsichtbar -> wird sichtbar -> wird unsichtbar */
    animation: fadeReveal 12s ease-in-out infinite;
}

/* --- DIE ANIMATIONEN (Gegenspieler) --- */

/* Für Bild 2 (Base): Muss verschwinden, wenn Bild 3 kommt */
@keyframes fadeBase {
    0%, 15%   { opacity: 1; } /* Anfang: Voll da */
    
    45%, 55%  { opacity: 0; } /* Mitte: Weg (damit Bild 3 Platz hat) */
    
    85%, 100% { opacity: 1; } /* Ende: Wieder da */
}

/* Für Bild 3 (Reveal): Muss erscheinen, wenn Bild 2 geht */
@keyframes fadeReveal {
    0%, 15%   { opacity: 0; } /* Anfang: Unsichtbar */
    
    45%, 55%  { opacity: 1; } /* Mitte: Voll da */
    
    85%, 100% { opacity: 0; } /* Ende: Wieder weg */
}

/* Wenn du willst, dass die Animation erst startet, wenn die Seite geladen ist: */
/* .hero-transform-wrapper:not(.active) .base-img,
   .hero-transform-wrapper:not(.active) .reveal-img {
       animation-play-state: paused;
   } */

/* Scanlines (TV-Effekt oben drauf) */
.scanlines {
    grid-area: stack;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.3) 3px
    );
    opacity: 0.6;
}

/* =========================================
   FINAL LAYOUT V2: BIG BANNER & DEZENTE SCHRIFT
   (Ersetzt den vorherigen Block am Ende der style.css)
   ========================================= */

/* 1. Globales Layout */
#page {
    padding-top: 0 !important;
    overflow-x: hidden;
}

/* News-Seite etwas Abstand oben lassen */
#page:has(.grid-container) { padding-top: 10px !important; }

/* 2. HOME CONTAINER ZENTRIERUNG */
.home-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;
    height: 100%;
    min-height: 0 !important;
    padding-bottom: 0px !important;
    gap: 5px !important; /* Elemente rücken eng zusammen */
}

/* 3. DIE BREITE: Banner wieder schön breit (900px)! */
/* Damit es bündig bleibt, bekommen Text & Bild dieselbe Breite */
.home-container h1, 
.hero-transform-wrapper {
    width: 94vw !important;      /* Fast volle Breite auf Handy */
    max-width: 800px !important; /* FETT auf Desktop (vorher 600px) */
    box-sizing: border-box !important;
}

/* 4. ÜBERSCHRIFT: Kleiner & Elegant */
.home-container h1 {
    margin-top: 10 !important;
    margin-bottom: 10px !important; /* Nur wenig Abstand zum Bild */
    
    text-align: center !important;
    
    /* Schrift deutlich kleiner, damit das Bild der Star ist */
    /* Skaliert zwischen 18px (Handy) und 32px (Desktop) */
    font-size: clamp(1.1rem, 2.5vw, 2.0rem) !important; 
    
    letter-spacing: 3px !important; /* Breitere Buchstaben wirken edler bei kleiner Größe */
    line-height: 1.1 !important;
}

/* 5. BILD CONTAINER (Kein Wackeln) */
.hero-transform-wrapper {
    margin: 0 !important; 
    /* Falls du den Rand auch dezenter willst, hier ändern, sonst lassen */
}

/* Störfaktor (Wackeln) ist komplett deaktiviert */
.hero-transform-wrapper.active {
    animation: none !important; 
}

/* 6. Text unter dem Bild */
.home-text-wrapper {
    margin-top: 10px !important;
}
.home-text-wrapper p {
    margin: 2px 0 !important;
    font-size: 0.9rem !important; /* Text auch einen Tick kleiner */
}

/* Buttons */
.home-actions {
    margin-top: 0px !important;
}

/* =========================================
   KARTEN-ANIMATION (Premium Smooth)
   ========================================= */

.stagger-card {
    /* Startzustand: Unsichtbar & leicht tiefer */
    opacity: 0; 
    transform: translateY(20px); /* Nur 20px statt 30px -> wirkt ruhiger */
    
    /* Hardware-Beschleunigung aktivieren (gegen das Ruckeln!) */
    will-change: transform, opacity;
    
    /* Animation: "ease-out" ist natürlicher als "linear" */
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   HEADER STATUS (Mini Now Playing)
   ========================================= */

/* Wichtig: Der Header braucht "position: relative", damit das Kind sich daran orientieren kann.
   Suche in deinem CSS oben nach "header {" und prüfe, ob das da steht. 
   Falls nicht, füge es hier hinzu (es schadet nicht, es doppelt zu definieren): */
header {
    position: relative;
}

/* =========================================
   HEADER STATUS (Rechts, integriert)
   ========================================= */

/* 1. Der Container rechts */
.hdr-right {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen den Buttons */
    padding-right: 6px;
}

/* 2. Der Status-Text */
/* =========================================
   HEADER STATUS (Rechts, mit Kollisionsschutz)
   ========================================= */

.header-status {
    position: relative;
    font-size: 0.75rem;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-s);
    
    margin-right: 15px; 
    
    opacity: 0; 
    transition: opacity 0.5s ease;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    
    /* FIX 1: STRIKTERE GRENZE */
    /* Der Text darf maximal 20% der Bildschirmbreite einnehmen.
       Das verhindert, dass er bei langen Titeln bis zur Mitte wächst. */
    max-width: 20vw; 
}

/* FIX 2: FRÜHER AUSBLENDEN (Safety First) */
/* Sobald der Bildschirm schmaler als 1100px ist (z.B. iPad Querformat oder kleine Laptops),
   verschwindet der Text, damit das Logo atmen kann. */
@media (max-width: 1100px) {
    .header-status {
        display: none !important;
    }
}

/* =========================================
   MOBILE FIXES V3 (Ultimate Fit)
   ========================================= */
@media (max-width: 768px) {

    /* --- 1. HEADER (Logo erzwingen) --- */
    
    /* Wir sprechen das Logo über die ID an (#logoBtn), das ist stärker als Klassen */
    #logoBtn img {
        height: 30px !important; /* Noch kleiner, damit sicher Platz ist */
        width: auto !important;
        max-width: 180px !important; /* Darf niemals breiter sein */
        object-fit: contain;
        cursor: pointer;
    }

    /* Sicherheitsabstand für die Buttons links/rechts */
    .hdr-left, .hdr-right {
        gap: 0px !important; /* Kein Abstand zwischen Buttons */
        padding: 0 !important;
        flex-shrink: 0; /* Verhindert, dass Buttons gequetscht werden */
    }
    
    .nav-btn {
        padding: 8px 4px !important; /* Klickfläche ok, aber wenig Rand */
    }

    /* Status Text KILLEN auf Handy */
    #headerStatus, .header-status {
        display: none !important;
    }

    footer {
        position: fixed !important; /* GEÄNDERT: Jetzt klebt er wieder immer fest am Rand! */
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50; /* Zwingt den Footer über die Karten */
        
        background: #111; 
        border-top: 1px solid #d3350033;
        box-shadow: 0 -10px 20px rgba(0,0,0,0.8); /* Optional: Ein leichter dunkler Schatten nach oben */
        
        /* Die Luft von gestern (Rote Linie fix) bleibt erhalten! */
        padding-top: 25px; 
        padding-bottom: 30px; 
        height: auto !important; 
    }

    /* 2. Main-Container scrollbar machen */
    main {
        bottom: 0 !important; 
        /* HIER IST DIE MAGIE: 180px unsichtbare Luft am Ende der Seite */
        padding-bottom: 180px !important; 
    }
    /* --- 2. HOME TITEL (Schneidet nicht mehr ab) --- */
    
    .home-container h1 {
        /* TRICK: Schriftgröße relativ zur Breite des Handys */
        /* 5vw heißt: Die Schrift ist immer 5% der Bildschirmbreite groß. */
        /* Damit passt sie IMMER auf eine Zeile, egal welches Handy. */
        font-size: 5.5vw !important; 
        
        width: 100% !important;
        
        /* Verhindert das Abschneiden am Rand */
        box-sizing: border-box !important; 
        padding: 0 10px !important; 
        margin: 0 auto 5px auto !important;
        
        /* Zentrierung & Umbruch-Sicherheit */
        text-align: center !important;
        white-space: normal !important; /* Darf umbrechen, falls nötig */
        overflow: hidden; /* Notbremse */
        line-height: 1.4 !important;
    }


    /* --- 3. BANNER (Kleiner) --- */
    
    .hero-transform-wrapper {
        /* Deutlich kleiner: Nur noch 70% der Breite oder max 280px */
        width: 90% !important; 
        max-width: 300px !important; 
        
        margin: 10px auto !important;
    }
    
    /* Genereller Seitenabstand auf Handy */
    .home-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
/* =========================================
   HAMBURGER MENÜ (Striche & Animation)
   ========================================= */

/* Spezial-Anpassung für den Hamburger, damit die Striche mittig sind */
.nav-btn.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px; /* Abstand zwischen den Strichen */
    padding: 0; /* Padding weg, damit wir es exakt zentrieren können */
    width: 40px; /* Feste Breite wie die Höhe */
    
    /* Platz zum DE-Button (wie gewünscht) */
    margin-right: 3px; 
}

/* Die Striche selbst */
.nav-toggle .bar {
    width: 20px;
    height: 2px;
    
    /* NEU: Weiß statt Rot (passt zum Rahmen) */
    background-color: rgba(255, 255, 255, 0.85); 
    
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
    
    /* Kleiner Schatten für bessere Sichtbarkeit auf Bildern */
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Wenn man draufklickt oder hovert: Striche werden Rot */
.nav-toggle:hover .bar,
.nav-toggle.open .bar {
    background-color: var(--accent);
    box-shadow: 0 0 5px var(--accent);
}
/* =======================================================
   ADD-ON: RECHTSTEXTE IM LINKTREE-DESIGN (Sicherer Modus)
   ======================================================= */

/* 1. Schriftart Rajdhani laden (nur falls noch nicht da) */
/* 2. Der Container für Impressum & Datenschutz */
/* Wir nutzen eine extra Klasse, damit News/Merch NICHT betroffen sind */
.legal-design {
    font-family: 'Rajdhani', sans-serif !important;
    text-align: left !important;
    color: #fff;
    padding: 10px;
}

/* 3. Die Überschriften (z.B. "KONTAKT") */
.legal-design h3 {
    color: #d33500; /* Dein Rot */
    text-transform: uppercase;
    font-size: 16px;
    border-bottom: 1px solid rgba(211, 53, 0, 0.3);
    padding-bottom: 5px;
    margin-top: 25px;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

/* 4. Die roten Balken am Text */
.legal-design p {
    position: relative;
    padding-left: 15px !important;
    margin-bottom: 15px;
    
    /* Der rote Balken links */
    border-left: 3px solid #d33500 !important;
    
    /* Leichter Hintergrund */
    background: rgba(255, 255, 255, 0.03);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 8px;
    
    /* Textausrichtung */
    text-align: left !important;
    line-height: 1.5;
}

/* 5. Links im Text (z.B. E-Mail) */
.legal-design a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #d33500;
}
/* =======================================================
   LEGAL HEADER STYLE (Terminal Look)
   ======================================================= */

/* 1. Standard "X" Button ausblenden, wenn wir im Legal-Modus sind */
#modalOverlay.legal-view .modal-close {
    display: none !important;
}

/* 2. Der neue "SCHLIESSEN X" Button */
.text-close-btn {
    display: block;
    width: 100%;
    text-align: right; /* Rechtsbündig */
    background: transparent;
    border: none;
    
    color: #d33500; /* Dein Orange/Rot */
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    cursor: pointer;
    padding: 0;
    margin-bottom: 15px;
    transition: color 0.2s ease;
}

.text-close-btn:hover {
    color: #fff; /* Wird weiß beim Drüberfahren */
}

/* 3. Die gestrichelte Trennlinie */
.dashed-separator {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #444; /* Dunkelgraue Linie */
    margin-bottom: 30px;
}

/* 4. Die Sektions-Überschrift [ SECTION // ... ] */
/* =======================================================
   HEADER TITEL KORREKTUR (Bündig mit Text)
   ======================================================= */

.legal-section-title {
    font-family: 'Rajdhani', sans-serif;
    color: #d33500;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-align: left;
    
    /* HIER IST DIE MAGIE: */
    /* 3px (Balken-Breite) + 15px (Text-Abstand) = 18px */
    padding-left: 12px !important; 
}
/* =======================================================
   FINALER PADDING-CONTROLLER (Die Weiche V2)
   ======================================================= */

/* 1. STANDARD-ZUSTAND (News, Musik, Merch) */
/* Hier MUSS Padding 0 sein, damit die Bilder den Rand berühren */
.modal-card {
    padding: 0 !important; 
}

/* 2. SPEZIAL-ZUSTAND (Nur Impressum & Datenschutz) */
/* Greift nur, wenn das Script die Klasse "legal-view" setzt */
.legal-view .modal-card {
    padding: 40px 50px !important; /* Der gewünschte Rand */
}

/* Handy-Anpassung für den Spezial-Zustand */
@media (max-width: 600px) {
    .legal-view .modal-card {
        padding: 25px 20px !important;
    }
}

/* Optional: Damit der Text im Impressum nicht ZU weit einrückt, 
   können wir das innere Padding dort entfernen, da wir ja schon äußeres haben */
.legal-view .modal-text-area {
    padding: 0 !important;
}
/* =========================================
   MOBILE OLED FIX (Bessere Sichtbarkeit auf Handys)
   ========================================= */

@media (max-width: 850px) {
    
    /* 1. NEUE FARBE: Helleres Neon-Rot für bessere Lesbarkeit */
    :root {
        --accent: #ff5522 !important; 

    /* ... hier folgt dein bestehender Code für Backgrounds etc. ... */
}
    /* 1. KARTEN-HINTERGRUND AUFHELLEN */
    /* Statt #161616 (fast schwarz) nutzen wir #222 (dunkelgrau) */
    .news-card, 
    .merch-card, 
    .tour-row, 
    .player-compact-card,
    .modal-card {
        background: #252525 !important; 
    }

    /* 2. RAHMEN VERSTÄRKEN */
    /* Statt 0.1 (sehr fein) erhöhen wir auf 0.25 (sichtbarer) */
    .news-card, 
    .merch-card, 
    .tour-row, 
    .player-compact-card,
    .modal-card {
        border-color: rgba(255, 255, 255, 0.35) !important;
    }

    /* 3. BILDER IN NEWS/MERCH ABGRENZEN */
    /* Damit das Bild sich nicht im Schwarz verliert */
    .news-img, 
    .merch-img {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        background-color: #1a1a1a !important; /* Falls das Bild lädt/transparent ist */
    }
    /* 4. SCROLLBAR FIX: Trackliste aufklappen */
    .track-list.compact-tracks {
        height: auto !important;       /* Keine feste Höhe mehr */
        max-height: none !important;   /* Darf unendlich wachsen */
        overflow: visible !important;  /* Scrollbalken weg */
    }
}
/* =========================================
   STATISCHES ALBUM COVER (Ersatz für Digibook)
   ========================================= */

.static-album-cover {
    width: 260px;
    height: 260px;
    object-fit: cover; /* Verhindert Verzerrungen */
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8); /* Dein dunkler Schatten */
    margin: 0 auto;
    display: block;
    border: 1px solid rgba(211, 53, 0, 0.15); /* Dezenter Rahmen im Neon-Rot */
    transition: transform 0.3s ease;
}

/* Leichter Hover-Effekt (optional, wirkt edel) */
.static-album-cover:hover {
    transform: scale(1.02);
}

/* --- SAFETY NET (Laptop) --- */
@media (max-height: 850px) {
    .static-album-cover { 
        width: 220px; 
        height: 220px; 
    }
}

/* --- MOBILE (Handy) --- */
@media (max-width: 800px) {
    .static-album-cover { 
        width: 170px; 
        height: 170px; 
    }
}
/* --- FLOATING CONTROLS (FIXED POSITION) --- */
.lt-floating-controls {
    position: fixed !important; /* Erzwingt Fixierung am Screen */
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 15px; /* Abstand zwischen den Buttons */
    z-index: 9999; /* Muss ÜBER allem liegen */
}

.lt-float-btn {
    width: 40px;       /* Quadratisch und groß genug */
    height: 40px;
    background: #000;  /* Schwarzer Hintergrund */
    border: 1px solid #d33500; /* Roter Rand */
    color: #d33500;    /* Rotes Icon */
    border-radius: 6px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 20px;   /* Großes Icon */
    font-family: sans-serif;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
}

/* Hover Effekt: Button wird rot, Icon schwarz */
.lt-float-btn:hover {
    background: #d33500;
    color: #000;
    box-shadow: 0 0 20px rgba(211, 53, 0, 0.6);
    transform: translateY(-3px);
}

/* Mobile Anpassung: Etwas kleiner, damit sie nicht stören */
@media (max-width: 600px) {
    .lt-floating-controls {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    .lt-float-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}
/* --- SPLASH SCREEN (Terminal Style) --- */
#splashScreen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    z-index: 10000; /* Muss über ALLEM liegen */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

#splashScreen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-content {
    text-align: center;
    width: 100%;       /* Nimmt sich den Platz, den es braucht */
    max-width: 500px;  /* Darf jetzt deutlich breiter werden */
    padding: 0 20px;   /* Sicherheitsabstand zum Rand auf Handys */
}

.splash-logo {
    color: var(--fg);
    
    /* DIE 3 NEUEN ZEILEN FÜR DIE SCHRIFT: */
    font-family: 'Rajdhani', sans-serif; /* Exakt die gleiche Schrift wie auf der Startseite */
    font-weight: 500;                    /* Etwas eleganter/dünner */
    letter-spacing: 8px;                 /* Der weite, hochwertige Abstand (vorher 4px) */
    
    font-size: 2rem;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(211, 53, 0, 0.5); /* Der rote Neon-Glow bleibt! */
    animation: glitch-anim 0.3s infinite; 
    white-space: nowrap; 
}

.loader-line {
    width: 0%; /* Startet bei 0 */
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    margin: 0 auto 10px auto;
    animation: loadLine 1.5s ease-in-out forwards;
}

.loader-text {
    font-family: monospace;
    color: var(--accent);
    font-size: 0.8rem;
    animation: blink 0.5s infinite;
}

@keyframes loadLine {
    0% { width: 0%; }
    50% { width: 40%; }
    100% { width: 100%; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* --- FLOATING BUTTONS MOBILE POSITIONING --- */
@media (max-width: 600px) {
    /* Modal Buttons etwas kleiner machen und vom Rand wegziehen */
    .lt-floating-controls {
        bottom: 20px !important;
        right: 15px !important;
        gap: 10px !important;
    }
    
    /* Den "Nach oben" Button der Hauptseite anpassen */
    #mainScrollTopBtn {
        bottom: 85px !important; /* Sicher über dem mobilen Footer */
        right: 15px !important;
    }
}
/* =========================================
   TRACKLIST FIX (Dynamische & intelligente Höhe)
   ========================================= */
.track-list.compact-tracks {
    height: auto !important;          
    min-height: 0 !important;         
    max-height: 180px !important; /* Etwas mehr Platz (ca. 4-5 Songs) */    
    overflow-y: auto !important;      
    
    /* Optische Trennung & Scrollbalken */
    margin-bottom: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

/* Zwingt Handys, sich auch an die neue Scroll-Regel zu halten! */
@media (max-width: 850px) {
    .track-list.compact-tracks {
        max-height: 200px !important; 
        overflow-y: auto !important; 
        display: block !important;
    }
}
/* =========================================
   CUSTOM SCHRIFTARTEN FÜR DIE STARTSEITE
   ========================================= */

/* 1. Die große Hauptüberschrift ("30 JAHRE SUPREME COURT") wie im Linktree */
.home-container h1, 
.home-container h1.glitch,
.intro-line {
    font-family: 'Rajdhani', sans-serif !important; /* Rajdhani statt Teko! */
    font-weight: 500 !important;                    /* Schlanker (Medium statt Extra Bold) */
    letter-spacing: 8px !important;                 /* Edler, weiter Abstand */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important; /* Der feine weiße Glow vom Linktree */
}

/* 2. Der rote Text in der Mitte ("WIR PRÄSENTIEREN UNSERE NEUE ÄRA") */
.highlight-text {
    font-family: 'Rajdhani', sans-serif !important;
}

/* 3. Der kleine Text darunter ("REWIND. REMIX. RESTART.") */
.home-text-wrapper p:last-child {
    font-family: 'Rajdhani', sans-serif !important;
}

/* 4. Der "JETZT HÖREN" Button */
.home-actions .action-btn {
    font-family: 'Rajdhani', sans-serif !important;
}
/* Sender.net Branding dimmen */
/* --- SENDER.NET FORMULAR ZÄHMEN --- */

/* Eingabefeld flacher machen */
.sender-form-field input[type="text"],
.sender-form-field input[type="email"] {
    padding: 8px 12px !important;
    height: auto !important;
    font-size: 0.75em !important;
    border-radius: 2px !important; /* Macht die Ecken kantiger für den Industrial-Look */
}

/* Button flacher machen */
.sender-form-field button {
    padding: 8px 12px !important;
    height: auto !important;
    font-size: 0.9em !important;
    letter-spacing: 1px !important;
    border-radius: 2px !important; 
    margin-top: 10px !important; /* Etwas weniger Abstand zwischen Feld und Button */
}

/* Den Branding-Text unten etwas unauffälliger machen */
.sender-form-field a {
    opacity: 0.4 !important;
    font-size: 0.7em !important;
    transition: opacity 0.3s ease;
}
.sender-form-field a:hover {
    opacity: 1 !important;
}
/* =========================================
   MEMORY GAME (V3 - PERFECT SCALING & SIZING)
   ========================================= */

.memory-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 20px;
}

/* Die Hauptüberschrift ("30 YRS GAME") */
.memory-page-wrapper h2 {
    font-size: clamp(1.2rem, 3vw, 1.8rem); 
    margin-top: 5px;
    margin-bottom: 8px;
    line-height: 1.1;
}

/* Die Dashboard-Box */
.memory-dashboard {
    background: #161616;
    border: 1px solid rgba(211, 53, 0, 0.2);
    border-radius: 12px;
    padding: 10px 15px; /* Gemergt & optimiert */
    margin-bottom: 12px; /* Gemergt & optimiert */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 600px;
}

/* Züge & Zeit Text */
.memory-stats {
    display: flex;
    gap: 15px; /* Gemergt */
    font-size: 0.8rem; /* Gemergt */
    font-weight: 600;
}
.memory-stats span { color: var(--accent); }

/* Dropdown-Button & Neustart-Button */
#memoryLevelWrap .dropdown-trigger,
.memory-dashboard .action-btn {
    font-size: 0.75rem; 
    padding: 8px 12px;  
    min-width: 120px;   
}

/* --- DIE MAGISCHE BERECHNUNG FÜR PERFEKTEN FIT --- */
.memory-grid {
    display: grid;
    gap: 8px;
    margin: 0 auto;
    width: 100%;
    max-width: calc((100vh - var(--header-h) - var(--footer-h) - 240px) * (var(--cols) / var(--rows)));
    perspective: 1000px;
}

/* Die einzelnen Karten bleiben absolut quadratisch */
.memory-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.memory-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}

.memory-card.flipped .memory-card-inner,
.memory-card.matched .memory-card-inner {
    transform: rotateY(180deg);
}

.memory-card-front, .memory-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    background-color: #111;
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.memory-card-front { padding: 15px; }
.memory-card-front img { max-width: 80%; max-height: 80%; opacity: 0.5; }

.memory-card-back {
    transform: rotateY(180deg);
    background-size: cover;
    background-position: center;
}

.memory-card.matched .memory-card-inner {
    box-shadow: 0 0 15px rgba(211, 53, 0, 0.8);
    border-radius: 8px;
}
.memory-card.matched .memory-card-back { border: 3px solid var(--accent); }

/* --- SHAKE ANIMATION --- */
.memory-card.shake { animation: shakeCard 0.5s ease-in-out; }
@keyframes shakeCard {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* --- MOBILE ANPASSUNGEN (Für Handys) --- */
@media (max-width: 600px) {
    .memory-dashboard {
        padding: 8px 10px; 
        justify-content: center;
        gap: 8px;
    }
    
    .memory-stats {
        width: 100%;
        justify-content: center;
        font-size: 0.8rem; 
        margin-bottom: 4px;
    }

    #memoryLevelWrap .dropdown-trigger,
    .memory-dashboard .action-btn {
        font-size: 0.65rem;
        padding: 6px 10px;
        min-width: 110px;
    }
    
    .memory-page-wrapper h2 span {
        font-size: 0.45em !important; 
    }
}