:root{
  --bg:#121212;--panel:#1b1b1b;--panel-2:#1e1e1e;--text:#fff;--muted:#b3b3b3;
  --accent:#35d3a7;--border:#2a2a2a;--shadow:0 6px 18px rgba(0,0,0,.35);--radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.header{position:sticky;top:0;background:linear-gradient(180deg,#171717,#141414);border-bottom:1px solid var(--border);backdrop-filter:blur(6px);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.logo{font-size:1.125rem;font-weight:800;letter-spacing:.06em;padding:.5rem 1rem;border-radius:999px;background:linear-gradient(135deg,#e53935,#43a047);box-shadow:var(--shadow)}
.logo a{color:#fff;text-decoration:none}
.menu{display:flex;gap:.25rem;align-items:center}
.menu a{color:#fff;text-decoration:none;padding:.5rem .75rem;border-radius:10px}
.menu a:hover,.menu a[aria-current="page"]{background:var(--panel-2)}

/* Sprachmenü */
.lang{position:relative}
.lang button{
  display:flex;align-items:center;gap:.5rem;
  background:var(--panel-2);border:1px solid var(--border);
  color:#fff;border-radius:12px;padding:.5rem .75rem;cursor:pointer;
  box-shadow:var(--shadow)
}
.lang ul{
  position:absolute;right:0;top:calc(100% + .5rem);
  min-width:160px;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;
  list-style:none;margin:0;padding:.25rem;
  display:none;box-shadow:var(--shadow)
}
.lang ul.show{display:block}
.lang li{margin:0}
.lang a{display:block;padding:.6rem .75rem;border-radius:10px;color:#fff;text-decoration:none}
.lang a:hover{background:var(--panel-2)}

main{padding:1.25rem}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1.25rem;align-items:center}
.hero-card,.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}
.hero h1{margin:.25rem 0 .5rem 0;font-size:2rem}
.cta{display:flex;gap:.5rem;flex-wrap:wrap}
.btn{display:inline-block;background:var(--accent);color:#000;padding:.6rem .9rem;border-radius:12px;text-decoration:none;font-weight:700}
.btn.secondary{background:var(--panel-2);border:1px solid var(--border);color:#fff}
.grid{display:grid;gap:1rem}
.album-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1023px){.hero{grid-template-columns:1fr}.album-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.album-grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:auto;display:block}
.card-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.badge{display:inline-block;background:#242424;border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem;color:var(--muted);font-size:.8rem}
.streaming{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.streaming a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#1a1a1a;border:1px solid var(--border);border-radius:10px}
.streaming img{width:22px;height:22px}
.album-detail{display:grid;grid-template-columns:1fr 1.4fr;gap:1.25rem}
@media (max-width:900px){.album-detail{grid-template-columns:1fr}}
.album-detail img{width:100%;max-width:480px;border-radius:12px;border:1px solid var(--border)}
.tracklist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.tracklist li{background:#141414;border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem}
footer{margin-top:2rem;border-top:1px solid var(--border);background:#151515}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
footer .links{display:flex;gap:.75rem;flex-wrap:wrap}
footer a{color:#fff;text-decoration:none;border:1px solid var(--border);padding:.4rem .6rem;border-radius:10px;background:#1a1a1a}
.cookie-banner{position:fixed;inset:auto 0 0 0;background:#202020;border-top:1px solid var(--border);display:none;padding:1rem;z-index:60}
.cookie-inner{max-width:1100px;margin:0 auto;display:flex;gap:.75rem;align-items:center;justify-content:space-between}
.cookie-banner button{background:var(--accent);border:none;color:#000;padding:.5rem .9rem;border-radius:10px;cursor:pointer;font-weight:700}
form{max-width:680px;margin-inline:auto}
label{display:block;margin-top:1rem}
input,textarea{width:100%;padding:.7rem;border-radius:10px;background:#111;border:1px solid var(--border);color:#fff}
textarea{min-height:140px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:700px){form .row{grid-template-columns:1fr}}
.note{color:var(--muted);font-size:.9rem}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* --- Sprachmenü: kompakt & exakt unter dem Button (Overrides) --- */
.lang { --lang-w: 170px; }                     /* einheitliche Breite */
.lang button{ min-width:var(--lang-w); justify-content:center; }

.lang ul{
  left:50%; right:auto; transform:translateX(-50%);  /* mittig unter dem Button */
  min-width:var(--lang-w);
  padding:.35rem;
}

.lang li{ margin:0; }

.lang a{
  display:flex; align-items:center; justify-content:center; /* sauber mittig */
  text-align:center;
  padding:.5rem .7rem;
  line-height:1.15;           /* gleiche Zeilenhöhe */
  font-weight:700; letter-spacing:.02em;
  border-radius:8px;
}

.lang a + a{ margin-top:2px; } /* kleiner, gleichmäßiger Abstand */
/* --- Kontaktformular Feinschliff (nur Formulare betreffen) --- */

/* 1) SEND-Button so breit wie das Nachrichtenfeld + mittig */
form[data-netlify] .btn{
  display:block;            /* statt inline -> kann zentriert & volle Breite */
  width:100%;               /* gleich breit wie textarea */
  text-align:center;        /* Text mittig */
  font-weight:800;
  padding:0.9rem 1rem;
  margin-top:0.75rem;       /* kleiner Abstand über dem Button */
  border-radius:12px;       /* bleibt schön rund */
}

/* 2) Hinweis-Text: Link "Privacy Policy" weiß und fett */
.note a{
  color:#fff;               /* Weiß statt dunkles Blau */
  font-weight:700;          /* fett */
  text-decoration:underline;/* optional: Unterstreichung beibehalten */
}

/* Falls du die Unterstreichung NICHT willst, stattdessen:
.note a{ color:#fff; font-weight:700; text-decoration:none; }
*/
/* === Sprachmenü kompakter machen (nur Styling) === */

/* 1) Breite definieren – hier schmaler als vorher */
.lang { --lang-w: 120px; }           /* vorher z. B. 170px */

/* 2) Button kompakter */
.lang button{
  min-width: var(--lang-w);
  padding: .35rem .7rem;             /* weniger Innenabstand */
  font-size: .95rem;                 /* leicht kleiner */
  justify-content: center;
}

/* 3) Dropdown kompakter & gleich breit wie Button */
.lang ul{
  left: 50%;
  transform: translateX(-50%);
  min-width: var(--lang-w);
  padding: .3rem;                    /* weniger Rand im Panel */
}

/* 4) Einträge kompakter */
.lang a{
  display: flex; align-items: center; justify-content: center;
  padding: .4rem .55rem;             /* weniger Innenabstand */
  line-height: 1.1;
  font-weight: 700;
}
.lang a + a{ margin-top: 2px; }      /* kleiner Abstand zwischen den Zeilen */
/* === Sprachmenü ultrakompakt (Breite = Textbreite) === */
.lang { --lang-w:auto; }

.lang button{
  min-width: 0;
  width: fit-content;          /* so schmal wie möglich */
  padding: .22rem .55rem;      /* kleinerer Innenabstand */
  font-size: .92rem;
  letter-spacing: 0;
  justify-content: center;
}

.lang ul{
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;          /* kein starres min-width mehr */
  min-width: 0;
  padding: .25rem .35rem;
}

.lang a{
  display:flex; align-items:center; justify-content:center;
  padding: .32rem .5rem;       /* kompakte Einträge */
  line-height: 1.05;
  font-weight: 700;
}
.lang a + a{ margin-top: 2px; }
/* === Album-Cover mittig + Rahmen nicht zu groß === */

/* 1) Greife NUR Karten, die NUR ein Bild enthalten */
.hero-card:has(> img:only-child){
  display: inline-block;     /* Breite umschließt das Bild */
  padding: 10px;             /* kleinerer dunkler Rand (vorher größer) */
  margin: 0 auto;            /* horizontal zentrieren */
}

/* 2) Bild sauber rendern */
.hero-card > img{
  display: block;            /* damit margin/mittig sauber greift */
  max-width: 100%;
  height: auto;
  margin: 0;                 /* kein zusätzlicher Außenabstand */
}

/* 3) Falls das Eltern-Layout Grid ist: die Karte in der Mitte ausrichten */
.hero {
  justify-items: center;     /* hat nur Effekt, wenn .hero ein Grid ist */
}
/* 1) Cover-Rahmen noch etwas schlanker */
.hero-card:has(> img:only-child){
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* 2) Dezenter Hover für Album-Karten */
.album-card:hover,
.card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* 3) Footer-Links einheitlich */
footer .links a{
  padding: .45rem .8rem;
  line-height: 1;
}
/* ==== Streaming-Icons: einheitlich + nicht zusammendrücken ==== */

/* 1) Der Container mit den Icons: Flex + gleichmäßiger Abstand */
.album-card .icons,
.album-card .platforms,
.album-card .links,
.album .icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 2) Jeder Icon-Button bekommt feste Größe und darf NICHT schrumpfen */
.album-card a:has(> img:only-child),
.album a:has(> img:only-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;      /* verhindert das „Zusammendrücken“ */
  padding: 0;
  border-radius: 12px;
}

/* 3) Das eigentliche Icon im Button */
.album-card a:has(> img:only-child) img,
.album a:has(> img:only-child) img,
.album-card a:has(> svg:only-child) svg,
.album a:has(> svg:only-child) svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: auto;   /* keine Pixel-Treppchen */
}
/* ==== Streaming-Icons überall gleich, nicht zusammengedrückt ==== */

/* Container: schöne Abstände, darf umbrechen */
.icons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Jeder Icon-Button: fixe Quadratgröße + nicht schrumpfen */
.icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:0 0 44px;     /* verhindert "Zusammendrücken" im Flex */
  padding:0;
  line-height:1;     /* kein zusätzliches Strecken */
  border-radius:12px;
  aspect-ratio:1/1;  /* bleibt quadratisch, selbst wenn Styles erben */
}

/* Das eigentliche Icon (PNG oder SVG) mittig und sauber */
.icons a > img,
.icons a > svg{
  width:22px;
  height:22px;
  object-fit:contain;
  image-rendering:auto;
}

/* Optional: auf kleineren Screens etwas kleiner */
@media (max-width: 640px){
  .icons a{ width:40px; height:40px; flex-basis:40px; }
  .icons a > img, .icons a > svg{ width:20px; height:20px; }
}
/* === Icon-Verzerrung fixen (Albumseiten & überall) === */

/* Kachelgröße bleibt wie gewünscht */
.icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  flex:0 0 44px;
  border-radius:12px;
}

/* Das eigentliche Bild/Logo DARF NICHT gestreckt werden */
.icons a > img,
.icons a > svg{
  display:block;
  width:auto !important;          /* überschreibt evtl. width:100% */
  height:auto !important;         /* keine erzwungene Höhe */
  max-width:22px;                 /* Obergrenze */
  max-height:22px;                /* Obergrenze */
  aspect-ratio:auto;              /* natürliche Proportionen */
  object-fit:contain;             /* sicherheitshalber */
}

/* Optional: etwas kleiner auf sehr kleinen Bildschirmen */
@media (max-width:640px){
  .icons a{ width:40px; height:40px; flex-basis:40px; }
  .icons a > img, .icons a > svg{ max-width:20px; max-height:20px; }
}
/* ==== Streaming-Icons: sauber skalieren, nicht pixelig ==== */

/* Kachel: feste, einheitliche Größe (wie zuvor) */
.icons{ display:flex; gap:10px; flex-wrap:wrap; }
.icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 44px; border-radius:12px; padding:0;
}

/* Bild/Logo IMMER proportional, mit weicher Skalierung */
.icons a > img,
.icons a > svg{
  display:block;
  max-width:18px;              /* etwas kleiner = sichtbar schärfer */
  max-height:18px;
  width:auto !important;       /* nie auf 100% strecken */
  height:auto !important;
  object-fit:contain;
  image-rendering:auto !important;           /* weiche Interpolation */
  image-rendering:-webkit-optimize-contrast; /* Safari/Chrome Hint */
  -ms-interpolation-mode:bicubic;            /* alter IE-Fix, harmless */
  filter:none;
}

/* Optional: auf sehr kleinen Screens minimal größer */
@media (max-width:640px){
  .icons a{ width:40px; height:40px; flex-basis:40px; }
  .icons a > img, .icons a > svg{ max-width:20px; max-height:20px; }
}
/* === GROSSE STREAMING-ICONS (global) === */
:root{
  /* Kachelgröße & Symbolgröße – hier richtig groß */
  --icon-box: clamp(56px, 5.4vw, 68px);
  --icon-glyph: clamp(34px, 3.2vw, 42px);
}

/* Container & Abstände */
.streaming, .icons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Jede Icon-Kachel */
.streaming a, .icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--icon-box);
  height:var(--icon-box);
  flex:0 0 var(--icon-box);   /* nicht schrumpfen */
  padding:0;
  border-radius:12px;
}

/* Das eigentliche Icon-Bild: groß & proportional */
.streaming a img,
.icons a img,
.streaming a svg,
.icons a svg{
  width:var(--icon-glyph) !important;
  height:var(--icon-glyph) !important;
  object-fit:contain;
  image-rendering:auto;
  display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* === STREAMING-ICONS – noch größer === */
:root{
  /* +~20–30% größer als vorher */
  --icon-box: clamp(64px, 6.4vw, 88px);   /* Kachel */
  --icon-glyph: clamp(40px, 3.9vw, 52px); /* Symbol innen */
}

/* Container & Abstände (lassen wir wie gehabt) */
.streaming, .icons{ display:flex; gap:12px; flex-wrap:wrap; }

/* Kachel übernimmt die neuen Variablen */
.streaming a, .icons a{
  width:var(--icon-box);
  height:var(--icon-box);
  flex:0 0 var(--icon-box);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border-radius:12px;
}

/* Symbol im Inneren */
.streaming a img, .icons a img,
.streaming a svg, .icons a svg{
  width:var(--icon-glyph) !important;
  height:var(--icon-glyph) !important;
  object-fit:contain; display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Optional: auf sehr kleinen Bildschirmen einen Tick kleiner */
@media (max-width: 640px){
  :root{
    --icon-box: 56px;
    --icon-glyph: 34px;
  }
}
/* 1) Hover-Glow pro Plattform (kein HTML-Edit nötig)
   Voraussetzung: Dateinamen enthalten 'spotify', 'apple', 'youtube', 'deezer', 'soundcloud' */
.icons a:has(img[src*="spotify"]):hover   { box-shadow: 0 0 0 2px rgba(30,215,96,.25), 0 8px 16px rgba(0,0,0,.35); }
.icons a:has(img[src*="apple"]):hover     { box-shadow: 0 0 0 2px rgba(175,82,222,.25), 0 8px 16px rgba(0,0,0,.35); }
.icons a:has(img[src*="youtube"]):hover   { box-shadow: 0 0 0 2px rgba(255,0,0,.25),   0 8px 16px rgba(0,0,0,.35); }
.icons a:has(img[src*="deezer"]):hover    { box-shadow: 0 0 0 2px rgba(0,199,255,.25), 0 8px 16px rgba(0,0,0,.35); }
.icons a:has(img[src*="soundcloud"]):hover{ box-shadow: 0 0 0 2px rgba(255,119,0,.25), 0 8px 16px rgba(0,0,0,.35); }

/* 2) Karten minimal „anheben“ bei Hover */
.album-card:hover,
.card.album:hover,
.card:hover {
  transform: translateY(-2px);
  transition: transform .18s ease;
}
.logo .brand{ display:inline-block; line-height:0; }
.logo .brand img{
  height: clamp(32px, 6vw, 48px);
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.logo .brand:hover img{
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)) brightness(1.03);
  transition: filter .18s ease;
}