/* =================================================================
   KLANG TV AIRPLAY CHARTS – Öffentliche Chartseite
   Seitenspezifisches Layout, angelehnt an die verbindliche
   Layout-Vorlage (design-reference/layout-vorlage.png).
   Baut auf assets/css/design-system.css auf.
   ================================================================= */

/* ---- Hintergrund-Lichteffekte (fixiert hinter dem Inhalt) -------- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-glow::before,
.bg-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}
.bg-glow::before {
  width: 620px;
  height: 620px;
  top: -220px;
  left: 8%;
  background: radial-gradient(circle, var(--ktv-purple) 0%, transparent 70%);
}
.bg-glow::after {
  width: 560px;
  height: 560px;
  top: -160px;
  right: 4%;
  background: radial-gradient(circle, var(--ktv-magenta) 0%, transparent 70%);
  opacity: 0.25;
}

.page {
  position: relative;
  z-index: 1;
}

/* ================================================================
   Header
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 7, 13, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ktv-border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  min-height: 68px;
  padding-block: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.brand-logo {
  height: 54px;
  width: auto;
  /* Transparenz bleibt erhalten - kein Hintergrund, kein Rahmen,
     keine farbige Fläche hinter dem Logo. Nur proportionale Skalierung. */
}

.brand-tagline {
  font-size: var(--ktv-fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ktv-text-mute);
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.2rem);
  margin-inline: auto;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ktv-text-soft);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.main-nav a:hover { color: var(--ktv-white); }

.main-nav a.is-active {
  color: var(--ktv-white);
  border-bottom-color: var(--ktv-purple);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ktv-border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ktv-text-soft);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ktv-white); border-color: var(--ktv-purple); }
.icon-btn svg { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--ktv-radius-sm);
  border: 1px solid var(--ktv-border-strong);
  background: transparent;
  color: var(--ktv-white);
  cursor: pointer;
}

/* ================================================================
   Hero / oberer Chart-Header
   ================================================================
   chart-header.jpg ist EIN großflächiges Hintergrundfoto für den
   gesamten oberen Bereich (nicht länger eine separate kleine Karte).
   Überschrift + Umschalter liegen links darüber, das Konzertfoto
   klingt nach rechts aus, ein Verlauf von links (dunkel) nach rechts
   (transparenter) hält die Überschrift lesbar. */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ktv-radius-lg);
  min-height: clamp(190px, 18vw, 220px);
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: 1.25rem;
  background: #120d18; /* Fallback, falls chart-header.jpg nicht geladen werden kann */
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
}

/* Dunkler Verlauf von links (Textbereich) nach rechts (Foto) */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    92deg,
    rgba(9, 7, 13, 0.97) 0%,
    rgba(9, 7, 13, 0.92) 28%,
    rgba(20, 10, 30, 0.6) 50%,
    rgba(90, 20, 150, 0.28) 72%,
    rgba(155, 48, 255, 0.14) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: clamp(190px, 18vw, 220px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
}

.hero-text h1 {
  font-size: var(--ktv-fs-hero);
  line-height: 1.02;
  color: var(--ktv-white);
  text-transform: uppercase;
}

.hero-text h1 .gradient-text { display: block; }

.hero-sub {
  margin-top: 0.6rem;
  color: var(--ktv-text-soft);
  max-width: 46ch;
}

.hero-toggle {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.hero-decor {
  flex-shrink: 0;
  align-self: center;
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  text-align: right;
}

.hero-decor .script-text {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.hero-side-text {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1.25rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--ktv-fs-tiny);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ================================================================
   Charts-Layout: Grid mit definierter Reihenfolge
   (Desktop: Feature+Tabelle links, Stimme+Tipp rechts)
   (Mobil: Feature -> Stimme -> Tabelle -> Tipp)
   ================================================================ */
.charts-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: 73fr 27fr;
  grid-template-areas:
    "feature vote"
    "table   tip";
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.feature-entry     { grid-area: feature; }
.chart-table-wrap  { grid-area: table; }
.vote-card         { grid-area: vote; }
.tip-card          { grid-area: tip; }

@media (max-width: 980px) {
  .charts-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "feature"
      "vote"
      "table"
      "tip";
  }
}

@media (max-width: 760px) {
  /* Auf schmalen Bildschirmen bleibt nur Überschrift + Umschalter
     sichtbar; das dekorative Skript-Element weicht der Lesbarkeit. */
  .hero-decor { display: none; }
  .hero-side-text { display: none; }
  .hero-content { padding: 1.25rem; }
  .hero { min-height: unset; }
}

/* ================================================================
   Feature-Eintrag (großer Platz 1)
   ================================================================ */
.feature-entry {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "rank cover info";
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2rem);
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding-block: 1.25rem;
  /* Durchgehendes Hintergrundbild über die komplette Karte: dunkle
     Seite hinter Platznummer/Cover/Info, heller rosa-lila Bereich mit
     "Musik berührt Herzen." rechts (bereits im Bild enthalten – siehe
     assets/images/chart-platz-1-hintergrund-breit.png). Ersetzt die
     frühere separate .feature-decor-Fläche vollständig. */
  background-image: url('../images/chart-platz-1-hintergrund-breit.png');
  background-size: cover;
  background-position: center;
}

.feature-rank  { grid-area: rank; }
.feature-cover { grid-area: cover; }
.feature-info  { grid-area: info; min-width: 0; }

.feature-rank {
  font-family: var(--ktv-font-display);
  font-size: clamp(4.5rem, 6.5vw, 7rem);
  line-height: 1;
  color: var(--ktv-purple);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
}

.feature-cover {
  width: 190px;
  height: 190px;
  border-radius: var(--ktv-radius-md);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.cover-art {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}
.cover-art svg { width: 38%; height: 38%; }

/* Echtes Coverfoto: quadratisch, proportional zugeschnitten, liegt
   über dem Farbverlauf-Platzhalter. Fehlt die Datei, entfernt
   onerror in charts.js das <img> wieder – der Platzhalter darunter
   bleibt sichtbar (siehe assets/js/charts.js::coverArt). */
.cover-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Beispielhafte Cover-Farbverläufe (werden später durch echte
   Cover-Uploads aus der Datenbank ersetzt) */
.art-1 { background: linear-gradient(135deg, #ffb199, #ff0f7b); }
.art-2 { background: linear-gradient(135deg, #6a82fb, #fc5c7d); }
.art-3 { background: linear-gradient(135deg, #f7971e, #ffd200); }
.art-4 { background: linear-gradient(135deg, #43cbff, #9708cc); }
.art-5 { background: linear-gradient(135deg, #ff6a88, #ff9a44); }
.art-6 { background: linear-gradient(135deg, #7f7fd5, #86a8e7, #91eae4); }
.art-7 { background: linear-gradient(135deg, #f857a6, #ff5858); }
.art-8 { background: linear-gradient(135deg, #30cfd0, #330867); }
.art-9 { background: linear-gradient(135deg, #f6d365, #fda085); }
.art-10{ background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

.feature-info .eyebrow {
  font-size: var(--ktv-fs-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ktv-purple-light);
  font-weight: 700;
}

.feature-artist {
  font-size: clamp(1.75rem, 2vw, 2.375rem); /* ~34–38px */
  color: var(--ktv-white);
  text-transform: uppercase;
  margin-top: 0.3rem;
}

.feature-title {
  font-family: var(--ktv-font-script);
  font-style: italic;
  font-size: clamp(1.5rem, 1.7vw, 1.9375rem); /* ~27–31px */
  color: var(--ktv-purple-light);
  margin-top: 0.15rem;
}

.feature-desc {
  color: var(--ktv-text-mute);
  font-style: italic;
  margin-top: 0.4rem;
  max-width: 46ch;
}

.feature-stats {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 1rem;
  flex-wrap: wrap;
}

.feature-stats .stat-num {
  display: block;
  font-family: var(--ktv-font-display);
  font-size: 1.3rem;
  color: var(--ktv-white);
}

.feature-stats .stat-label {
  display: block;
  font-size: var(--ktv-fs-tiny);
  color: var(--ktv-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.15rem;
}

.feature-movement {
  margin-top: 1rem;
}

.feature-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .feature-entry {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "rank cover"
      "info info";
    row-gap: 1rem;
  }
  .feature-rank { font-size: 3.4rem; align-self: center; }
  .feature-cover { width: 96px; height: 96px; }
  .feature-info { overflow-wrap: anywhere; }
  .feature-artist, .feature-title { overflow-wrap: anywhere; }
}

/* Smartphones: Platz-1-Karte zusätzlich kompakter – die gewünschte
   Reihenfolge (Rang+Cover, Kennzeichnung, Künstler, Titel, Kennzahlen,
   Veränderung, Buttons) ist bereits die bestehende DOM-Reihenfolge;
   hier werden nur Abstände/Größen verkleinert und die optionale
   Beschreibungszeile ausgeblendet, damit die Karte nicht unnötig hoch
   wird. Cover, Künstler, Zahlen und Buttons bleiben unverändert
   vorhanden und lesbar, der violett-rosa Hintergrund bleibt sichtbar. */
@media (max-width: 600px) {
  .feature-entry { padding-block: 1rem; gap: 1rem; min-height: unset; }
  .feature-rank { font-size: 2.6rem; }
  .feature-cover { width: 76px; height: 76px; }
  .feature-desc { display: none; }
  .feature-stats { gap: 1.1rem; margin-top: 0.75rem; }
  .feature-stats .stat-num { font-size: 1.1rem; }
  .feature-movement { margin-top: 0.6rem; }
  .feature-actions { margin-top: 0.85rem; gap: 0.6rem; }
  .feature-actions .btn { flex: 1 1 auto; padding: 0.8em 1em; }
  /* Die Icons in "Video ansehen"/"Bei Spotify hören" (ICONS.play/
     ICONS.spotify in charts.js) haben von Haus aus keine feste Größe
     und werden erst durch flex:1 1 auto oben in einem wachsenden
     Button sichtbar überdimensioniert – hier fest auf Icon-Größe
     begrenzt, wie bei allen anderen Icons im System üblich. */
  .feature-actions .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
}

/* ================================================================
   Chart-Tabelle
   ================================================================ */
.chart-table-wrap {
  overflow-x: auto;
}

.chart-table {
  width: 100%;
  border-collapse: collapse;
}

.chart-table thead th {
  text-align: left;
  font-size: var(--ktv-fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ktv-text-soft);
  font-weight: 700;
  padding: 0 0.9rem 0.9rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--ktv-border-strong);
}

/* Schlanke Trennlinien zwischen den Zeilen statt einzelner Rahmen
   um jede Zeile (die Vorlage zeigt eine durchgehende Tabelle). */
.chart-table tbody tr {
  background: transparent;
  transition: background 0.15s ease;
}
.chart-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.chart-table tbody td {
  padding: 1.15rem 0.9rem;
  border-bottom: 1px solid var(--ktv-border);
  vertical-align: middle;
}

.chart-table tbody tr:last-child td {
  border-bottom: none;
}

.chart-table tbody td:first-child {
  font-family: var(--ktv-font-display);
  font-size: 1.5rem;
  color: var(--ktv-text-soft);
  width: 3rem;
}

.chart-table tbody tr[hidden] { display: none; }

.track-cell {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 220px;
}

.track-cover {
  width: 60px;
  height: 60px;
  border-radius: var(--ktv-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.track-artist {
  display: block;
  color: var(--ktv-white);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
}

.track-title {
  display: block;
  color: var(--ktv-purple-light);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.score-cell,
.spotify-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ktv-text-soft);
  white-space: nowrap;
}
.score-cell svg { width: 18px; height: 18px; color: var(--ktv-purple); }
.spotify-cell svg { width: 18px; height: 18px; color: #1db954; }

.more-btn {
  background: none;
  border: none;
  color: var(--ktv-text-mute);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.more-btn:hover { color: var(--ktv-white); }
.more-btn svg { width: 20px; height: 20px; }

/* Label-Logo als kleiner heller Chip in der Optionen-Spalte neben dem
   Instagram-Symbol (Tabelle) bzw. neben den Aktions-Buttons (Platz-1-
   Karte), siehe assets/js/charts.js labelLogoMarkup(). Verdeckt dadurch
   nie das Cover-Foto. */
.options-cell { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.label-logo-chip {
  display: inline-block;
  height: 20px;
  max-width: 36px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  padding: 2px 3px;
}

/* Label-Logo auf der großen Platz-1-Karte: eigene vierte Kachel in der
   Statistik-Zeile (wie DJ-Punkte/DJ-Nennungen/Wochen), mit "Label" als
   Beschriftung darunter statt als angeklebtes Extra neben "Wochen". */
.stat-label-tile { display: flex; flex-direction: column; align-items: flex-start; }
.stat-label-tile .label-logo-chip {
  height: 28px;
  width: auto;
  max-width: 90px;
  padding: 3px 6px;
  margin-bottom: 0.2rem;
}

/* -- Mobil/Tablet (< 1100px): Tabelle wird zu kompakten Musikkarten -
   Unterhalb von 1100px reicht die reale Tabellenbreite (mind. sieben
   Spalten inkl. Song/Interpret, Veränderung, Score, Spotify, Wochen)
   nicht mehr sicher aus – schon bei 768px (Tablet-Hochformat) würde
   sonst ein horizontaler Scrollbalken entstehen. Jede Zeile wird
   daher zu einer eigenständigen Karte: oben Rang/Cover/Künstler/Titel/
   Menü, darunter ein kompaktes Raster mit Veränderung, Score, Spotify
   und Wochen (auf schmalen Displays 2×2, ab 480px in einer Zeile,
   siehe zweiter Media-Query-Block unten). Nutzt ausschließlich die
   bereits vorhandene HTML-Struktur (dieselben <td>-Spalten in fester
   Reihenfolge, siehe assets/js/charts.js::renderTableRow) – keine
   JS-/HTML-Änderung nötig. Ab 1100px bleibt die echte Desktop-Tabelle
   (siehe Regeln oberhalb dieses Media-Query-Blocks) unverändert. */
@media (max-width: 1099px) {
  .chart-table thead { display: none; }
  .chart-table, .chart-table tbody { display: block; width: 100%; }

  .chart-table tbody tr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "rank track track track"
      "m1   m1    m2   m2"
      "m3   m3    m4   m4"
      ".    .     .    menu";
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    width: 100%;
    max-width: 100%;
    background: var(--ktv-surface-alt);
    border: 1px solid var(--ktv-border);
    border-radius: var(--ktv-radius-md);
    padding: 0.8rem 0.9rem;
    margin-bottom: 16px;
  }
  .chart-table tbody tr:last-child { margin-bottom: 0; }

  .chart-table tbody td {
    display: block;
    border: none !important;
    padding: 0 !important;
    min-width: 0;
    max-width: 100%;
  }

  /* Reihenfolge/Zuordnung entspricht der festen Spaltenreihenfolge aus
     renderTableRow(): 1 Rang, 2 Song/Interpret, 3 Veränderung,
     4 Score, 5 Spotify, 6 Wochen, 7 Menü. */
  .chart-table tbody td:nth-child(1) { grid-area: rank; font-size: 1.15rem; text-align: center; }
  .chart-table tbody td:nth-child(2) { grid-area: track; min-width: 0; }
  .chart-table tbody td:nth-child(3) { grid-area: m1; }
  .chart-table tbody td:nth-child(4) { grid-area: m2; }
  .chart-table tbody td:nth-child(5) { grid-area: m3; }
  .chart-table tbody td:nth-child(6) { grid-area: m4; }
  .chart-table tbody td:nth-child(7) { grid-area: menu; justify-self: end; min-width: 0; }

  /* Label-Logo wird in der Mobil-Karte verkleinert, damit es nicht in
     die Künstler-/Titel-Zeile hineindrückt (siehe .options-cell in
     assets/js/charts.js renderTableRow()). Ohne min-width:0 oben würde
     dieses Feld sonst den Grid-Bereich "track" zusammenquetschen. */
  .options-cell { flex-wrap: nowrap; }
  .options-cell .label-logo-chip { height: 16px; max-width: 26px; padding: 1px 2px; }

  /* Kleine, kompakte Feldbezeichnung über jedem Metawert (ersetzt die
     frühere, für ganze Zeilen gedachte Label-Spalte) – hält das
     Raster flach und vermeidet große leere Flächen. */
  .chart-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ktv-text-mute);
    margin-bottom: 0.15rem;
  }

  .track-cell { min-width: 0; gap: 0.65rem; }
  .track-cover { width: 46px; height: 46px; }
  .track-artist, .track-title { overflow-wrap: anywhere; }

  .score-cell, .spotify-cell { font-size: 0.85rem; white-space: normal; }

  .more-btn { padding: 0.25rem; font-size: 1.2rem; }
}

/* Ab ausreichender Breite (weiterhin unter 1100px, z. B. größere
   Smartphones und Tablets): die vier Metawerte in einer Zeile
   nebeneinander statt im 2×2-Raster. */
@media (min-width: 480px) and (max-width: 1099px) {
  .chart-table tbody tr {
    grid-template-areas:
      "rank track track menu"
      "m1   m2    m3   m4";
  }
}

/* ================================================================
   Seitenspalte: Zuschauerabstimmung & DJ-Tipp
   ================================================================ */
.side-card h3 {
  font-size: 1.5rem;
  color: var(--ktv-white);
  text-transform: uppercase;
}
.side-card h3 .accent { color: var(--ktv-purple-light); }

/* Dezenter violetter Verlauf (Konzertstimmung), rein farblich –
   kein zusätzliches Bild. */
.vote-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(155, 48, 255, 0.28), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255, 47, 176, 0.16), transparent 60%),
    var(--ktv-surface);
}

.vote-card p {
  position: relative;
  color: var(--ktv-text-soft);
  margin-top: 0.85rem;
  font-size: var(--ktv-fs-body);
}

.vote-card .btn {
  position: relative;
  margin-top: 1.35rem;
  padding-block: 1em;
  font-size: 0.95rem;
}

.vote-card .fine-print {
  position: relative;
  font-size: var(--ktv-fs-tiny);
  color: var(--ktv-text-mute);
  margin-top: 0.6rem;
}

.tip-card { margin-top: 18px; padding: 0; overflow: hidden; }

.tip-header { padding: var(--ktv-card-padding) var(--ktv-card-padding) 1rem; }

/* Großes, rechteckiges DJ-Foto über die volle Kartenbreite (statt
   eines kleinen runden Profilbilds). */
.tip-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2338, #6e1fc4);
}
.tip-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.tip-photo .badge-tip {
  position: absolute;
  left: 1.25rem;
  bottom: 1.1rem;
  z-index: 2;
}
.tip-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(9, 7, 13, 0.85) 0%, rgba(9, 7, 13, 0) 55%);
}

.tip-body { padding: 1.1rem var(--ktv-card-padding) var(--ktv-card-padding); }

.tip-dj { margin-top: 0.25rem; }

.tip-dj blockquote {
  margin: 0 0 0.75rem;
  font-style: italic;
  color: var(--ktv-text);
  font-size: var(--ktv-fs-body);
  line-height: 1.4;
}

.dj-name {
  font-weight: 700;
  color: var(--ktv-white);
  font-size: var(--ktv-fs-small);
}
.dj-name span {
  display: block;
  font-weight: 400;
  color: var(--ktv-text-mute);
  font-size: var(--ktv-fs-tiny);
  text-transform: uppercase;
}

.tip-track {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ktv-border);
}

.tip-cover {
  width: 58px;
  height: 58px;
  border-radius: var(--ktv-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.tip-artist {
  color: var(--ktv-white);
  font-weight: 700;
  font-size: var(--ktv-fs-small);
  text-transform: uppercase;
}
.tip-title { color: var(--ktv-purple-light); font-size: var(--ktv-fs-small); }
.tip-sub { color: var(--ktv-text-mute); font-size: var(--ktv-fs-tiny); }

.play-btn {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--ktv-gradient);
  color: var(--ktv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.play-btn svg { width: 14px; height: 14px; }

/* Absicherung gegen horizontales Scrollen durch lange, unbrechbare
   Künstler-/Titelnamen im DJ-Tipp (derselbe Effekt wie bei der
   Charttabelle) – Flex-Kinder haben ohne min-width:0 sonst eine
   implizite Mindestbreite nach Inhalt. */
@media (max-width: 1099px) {
  .tip-track > div { min-width: 0; }
  .tip-artist, .tip-title { overflow-wrap: anywhere; }
}

/* Mindestgröße für Klickflächen auf Mobil-/Tabletbreiten (mind. 44px
   Kantenlänge), ohne die Desktop-Maße dieser Elemente zu verändern. */
@media (max-width: 1099px) {
  .btn { min-height: 44px; }
  .pill { min-height: 44px; }
  .more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ================================================================
   Footer
   ================================================================ */
.site-footer {
  background: var(--ktv-bg-alt);
  border-top: 1px solid var(--ktv-border);
  padding-block: 1.75rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand img { height: 26px; width: auto; }
.footer-brand span { font-size: var(--ktv-fs-tiny); color: var(--ktv-text-mute); }

.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ktv-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ktv-text-soft);
}
.footer-social a:hover { color: var(--ktv-white); border-color: var(--ktv-purple); }
.footer-social svg { width: 16px; height: 16px; }

.footer-links {
  display: flex;
  gap: 1.25rem;
  font-size: var(--ktv-fs-small);
  color: var(--ktv-text-soft);
}
.footer-links a:hover { color: var(--ktv-white); }

.footer-claim {
  font-family: var(--ktv-font-script);
  font-style: italic;
  color: var(--ktv-text-soft);
  font-size: 1rem;
}

@media (max-width: 700px) {
  .footer-inner { justify-content: center; text-align: center; }
}

/* ================================================================
   Header: Mobile Navigation
   ================================================================
   WICHTIG – bereits vor dieser Optimierung bestehender Fehler:
   Die volle Desktop-Kopfzeile (Logo + 7 Navigationspunkte + Suche +
   „DJ-Login“ + „Live ansehen“ mit Textbeschriftung) benötigt bauartbedingt
   ca. 1373px Breite, um ohne horizontalen Scrollbalken zu passen – und
   zwar unabhängig von dieser Mobil-/Tablet-Optimierung, auch schon im
   ursprünglichen Design. Bei exakt 1100px (einer der geforderten
   Testgrößen) hätte die Kopfzeile also so oder so einen Scrollbalken
   erzeugt. Damit 1100px die geforderte Prüfung ("kein horizontaler
   Scrollbalken") tatsächlich besteht, greift diese Umschaltung auf das
   Mobil-/Tablet-Menü hier ausnahmsweise bis 1380px statt bis 1099px.
   Ab 1381px (inkl. der geforderten 1440px-Desktopgröße) ist die
   Kopfzeile exakt wie zuvor unverändert – siehe Abschlussbericht für
   eine ausführliche Erklärung dieser bewussten Ausnahme. */
@media (max-width: 1380px) {
  .main-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--ktv-bg-alt);
    border-bottom: 1px solid var(--ktv-border);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem var(--ktv-gutter) 1.5rem;
    gap: 0.25rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-nav a { padding-block: 0.6rem; border-bottom: 1px solid var(--ktv-border); }
  .header-actions .btn-outline span.btn-text-full { display: none; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  /* Ohne sichtbaren Text müssen DJ-Login/Live-ansehen wie der
     Menü-Button mindestens 44px hohe, gleichmäßige Klickflächen sein. */
  .header-actions .btn-outline { min-height: 44px; }
}

@media (max-width: 600px) {
  /* Verhindert horizontales Scrollen: nicht-essenzielle Kopfzeilen-
     Elemente werden auf sehr schmalen Displays ausgeblendet. Übrig
     bleiben genau vier gleichmäßig ausgerichtete Elemente: Logo,
     DJ-Login (Symbol), Live ansehen (Play-Symbol), Menü-Symbol. */
  :root { --ktv-gutter: 16px; }

  .brand-tagline { display: none; }
  .header-actions .icon-btn { display: none; }
  .header-inner { gap: 0.75rem; }
  .header-actions { gap: 0.5rem; }
  .brand-logo { height: 40px; }

  /* DJ-Login/Live-ansehen zeigen ohne Text nur noch ihr Symbol – als
     gleich große, runde Klickflächen wie das Menü-Symbol daneben,
     mit mindestens 44px Kantenlänge (Fingerbedienung). */
  .header-actions .btn-outline {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .header-actions .btn-outline svg { width: 18px; height: 18px; }
  .nav-toggle { width: 44px; height: 44px; }
}

/* ================================================================
   Zuschauerabstimmung (public/abstimmung.php): auffällige Warnbox für
   "bereits abgestimmt" – bewusst deutlicher als die normale
   .form-message--error, da diese Meldung eine endgültige, nicht vom
   Besucher behebbare Aktion erklärt. Übernimmt Aufbau/Maße von
   .notice-box (assets/css/bemusterung.css), nur mit eigener,
   dunkelroter Farbgebung, damit keine andere Meldung/Seite betroffen ist.
   ================================================================ */
.vote-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ktv-radius-md);
  background: rgba(122, 22, 26, 0.85);
  border: 2px solid var(--ktv-down);
  color: #ffeced;
  font-size: var(--ktv-fs-small);
  font-weight: 600;
  line-height: 1.55;
}
.vote-warning-box svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.1rem; color: var(--ktv-down); }

@media (max-width: 600px) {
  .vote-warning-box { padding: 0.85rem 1rem; font-size: 0.82rem; }
}