/* ==========================================================================
   Anti Anti Anti - statische Version
   Nachbau des WordPress-Themes "Decibel" (Wolf Themes) ohne WordPress,
   ohne jQuery, ohne externe Requests.
   ========================================================================== */

/* --- Font ---------------------------------------------------------------- */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/special-elite-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/special-elite-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --accent: #c74735;
  --bg: #000;
  --bg-alt: #0a0a0a;
  --text: #fff;
  --nav-h: 100px;
  --font: 'Special Elite', 'Courier New', Courier, monospace;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  /* Sicherheitsnetz gegen seitliches Verschieben. overflow-x:hidden nur am
     body greift auf iOS Safari nicht zuverlaessig. clip statt hidden, damit
     kein zusaetzlicher Scrollcontainer entsteht. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.88;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
picture { display: contents; }

a { color: var(--text); text-decoration: none; }
p a:not(.btn) { border-bottom: 1px solid rgba(255, 255, 255, .35); }
p a:not(.btn):hover { border-bottom-color: var(--accent); color: var(--accent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 .6em;
}

::selection { background: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Navigation ---------------------------------------------------------- */
.nav-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--nav-h);
  z-index: 9000;
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
.nav-bar.is-sticking {
  background: #000;
  box-shadow: 0 10px 17px -9px rgba(0, 0, 0, .14);
}
.nav-inner {
  height: 100%;
  max-width: 1400px;
  width: 92%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Das Logo muss in jeder Breite in die Leiste passen. Tut es das nicht,
   schneidet die Viewportkante es oben ab und es ragt unten aus der Leiste -
   sichtbar wird das vor allem beim Scrollen, wenn die Leiste schwarz wird.
   Die Breiten sind so gesetzt, dass die Hoehe (Seitenverhaeltnis 360:216)
   hineinpasst. max-height ist nur Notbremse und darf nicht greifen: Browser
   skalieren die Breite dabei nicht zuverlaessig mit und verzerren das Logo. */
.logo img {
  width: 150px;                            /* -> 90px hoch in der 100px-Leiste */
  max-width: 40vw;
  max-height: calc(var(--nav-h) - 8px);
}

.nav-menu ul {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  transition: opacity .2s ease;
}
.nav-menu a:hover,
.nav-menu a.is-active { opacity: .5; }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.social-link {
  display: inline-flex;
  color: #fff;
  transition: opacity .2s ease;
}
.social-link:hover { opacity: .5; }
.social-link svg { width: 18px; height: 18px; fill: currentColor; }

/* Hamburger */
.hamburger {
  display: none;
  width: 30px; height: 22px;
  position: relative;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: #fff;
  transition: transform .3s, opacity .3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
body.menu-open .hamburger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Mobile panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.mobile-menu li { margin: 10px 0; }
.mobile-menu a {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.mobile-menu a:hover { color: var(--accent); }

/* --- Sections ------------------------------------------------------------ */
.row {
  position: relative;
  padding: 80px 0;
  background-color: var(--bg-alt);
}
.row--black { background-color: #000; }
/* Backsteintextur in Originalgroesse (837x572), stark komprimiert:
   AVIF 7 KB / WebP 16 KB statt 30 KB - eine kleinere Kachel wuerde beim
   Hochskalieren sichtbar unscharf. */
.row--brick,
.split--brick {
  background-image: url('../img/brick.webp');
  background-image: image-set(url('../img/brick.avif') type('image/avif'),
                              url('../img/brick.webp') type('image/webp'));
  background-repeat: repeat;
  background-position: left top;
}
.row--full { min-height: 100vh; display: flex; align-items: center; }
.wrap {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 1140px;
  margin: 0 auto;
}
.wrap--wide { max-width: none; width: 100%; }

.heading { font-size: 24px; margin-bottom: .6em; }
.heading--lg { font-size: 32px; }

.sep {
  width: 50px;
  height: 0;
  border: 0;
  border-bottom: 2px solid #fff;
  margin: 20px 0 30px;
}
.sep--center { margin-left: auto; margin-right: auto; border-bottom-width: 3px; border-color: rgba(255, 255, 255, .66); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 15px 30px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.33, .02, 0, .94), box-shadow .4s, background .3s;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, .16);
}
.btn svg { width: 1em; height: 1em; fill: currentColor; margin-right: 8px; vertical-align: -.1em; }
.btn--square { border-radius: 0; }
.btn-row { margin-top: 35px; }
.btn-row--center { text-align: center; }

/* --- Hero ---------------------------------------------------------------- */
/* Die Hoehe kommt als feste Pixelzahl aus site.js, nicht aus einer
   viewport-relativen Einheit.

   Grund: iOS Safari klappt beim Herunterscrollen die Adressleiste ein. Der
   Hero wird dabei neu vermessen, und weil das Hintergrundbild als
   object-fit: cover darin liegt, rechnet jede Hoehenaenderung den
   Bildausschnitt neu - sichtbar als Zoomen waehrend des Scrollens.

   Auf dem Geraet durchgemessen: vh, svh, lvh und dvh zeigen den Effekt alle.
   svh und lvh sollten laut Spezifikation konstant sein, loesen dort aber
   trotzdem eine Neuberechnung aus. Ruhig blieb allein eine feste Pixelhoehe -
   genau die setzt site.js jetzt in --hero-h.

   100vh bleibt als Rueckfall: ohne JavaScript sieht es aus wie vorher. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: var(--hero-h, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .15);
}
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  transform: translateY(4%);
  padding: var(--nav-h) 4vw 0;
}
/* h1 traegt den Bandnamen (Logo + alt-Text). Optisch identisch zum vorherigen
   <p>: die Basisregel fuer h1-h6 (bold, margin, line-height) wird zurueckgesetzt. */
.hero-title {
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
}
.hero-kicker {
  display: block;
  margin: 0;
  font-weight: 400;
  font-size: clamp(24px, 5.1vw, 63px);
  line-height: 1.3;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 15px 15px 20px rgba(0, 0, 0, .45);
}
.hero-logo {
  display: block;
  width: clamp(163px, 34vw, 425px);
  margin: -1.5% auto 0;
  filter: drop-shadow(15px 15px 20px rgba(0, 0, 0, .45));
}

/* --- Split rows (Info / Tour) -------------------------------------------- */
.split {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  background-color: #000;
}
.split > * { position: relative; z-index: 2; }
.split-media {
  width: 50%;
  min-height: 350px;
  align-self: stretch;
  object-fit: cover;
  background: #6c6c6c;
  display: block;
}
.split-media--dark { background-color: #3d3d3d; }
.split-body {
  width: 50%;
  padding: 4em;
  display: flex;
  align-items: center;
}
.split-body > div { max-width: 600px; }
.split-body p { margin: 0 0 1.2em; }

/* --- Tour Dates ---------------------------------------------------------- */
/* Fliesstext bleibt bei 600px lesbar (siehe .split-body > div). Eine
   Terminliste ist aber keine Prosa, sondern drei Spalten: Datum, Ort, Button.
   Die sollen die ganze Spaltenbreite nutzen, statt sich auf halber Strecke zu
   draengen und rechts Platz liegen zu lassen. */
.split-body--wide > div { max-width: none; width: 100%; }

/* Die Termine stehen als <li class="event"> im HTML (index.html, Abschnitt
   "Tour Dates"). site.js sortiert sie nach Datum und entfernt vergangene.
   Bleibt nichts uebrig, erscheint .events-empty. */
.events { list-style: none; margin: 0; padding: 0; }
.event {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  line-height: 1.5;
}
.event:first-child { border-top: 1px solid rgba(255, 255, 255, .18); }
.event-date {
  flex: 0 0 auto;
  min-width: 112px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.event-where { flex: 1 1 160px; }
.event-city { display: block; font-weight: 700; color: #fff; }
.event-venue { display: block; font-size: 14px; opacity: .8; }
/* margin-left:auto haelt den Button am rechten Rand - auch dann, wenn er
   in einer schmalen Zeile allein umbricht. */
.event-btn { flex: 0 0 auto; margin-left: auto; padding: 11px 22px; }

/* Der Leer-Satz haengt am Zustand der Liste, damit er auch ohne JS stimmt:
   :has() blendet ihn ein, sobald kein <li class="event"> mehr in der Liste
   steht. .is-empty setzt site.js, wenn es alle Termine als vergangen entfernt
   hat - das faengt Browser ohne :has()-Unterstuetzung mit ab. */
.events-empty { display: none; margin: 0; }
.events:not(:has(.event)) ~ .events-empty,
.events.is-empty ~ .events-empty { display: block; }

/* --- Promo banner -------------------------------------------------------- */
.promo { display: block; background: #000; line-height: 0; }
.promo img { width: 100%; }

/* --- Media / album ------------------------------------------------------- */
.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  align-items: center;
}
.media-grid > * { flex: 1 1 calc(50% - 35px); min-width: 280px; }

/* Vinyl + cover, wie im Original: Platte fährt beim Hover aus dem Cover */
.album {
  position: relative;
  max-width: 420px;
  margin-left: 0;
}
.album-inner {
  position: relative;
  margin: 0 32% 10px 0;
}
.album-disc {
  position: absolute;
  top: 1%; left: 1%;
  width: 98%; height: 98%;
  border-radius: 50%;
  overflow: hidden;
  /* Bewusst ohne rotate(): die Platte ist ein Kreis und dreht sich ohnehin
     dauerhaft, eine Drehung der Aussenbox waere unsichtbar. Sie wuerde die
     Bounding-Box aber um Faktor 1,41 aufblaehen (239px -> 338px) und die Seite
     auf schmalen Screens seitlich verschiebbar machen. */
  transform: translate3d(40%, 0, 0);
  transition: transform .7s cubic-bezier(0, .45, .54, .99);
}
.album-disc-spin {
  width: 100%; height: 100%;
  position: relative;
  animation: disc-spin 3.5s linear infinite;
  /* Vinyl vollständig per CSS – spart die 200 KB grosse vinyl.png */
  background:
    /* glatter Innenring um das Label */
    radial-gradient(circle at 50% 50%, #141414 0 23%, transparent 23.5%),
    /* Lichtreflex */
    conic-gradient(from 210deg at 50% 50%,
      rgba(255,255,255,.14), rgba(255,255,255,0) 40deg,
      rgba(255,255,255,0) 180deg, rgba(255,255,255,.10) 220deg,
      rgba(255,255,255,0) 260deg),
    /* Rillen */
    repeating-radial-gradient(circle at 50% 50%,
      #0b0b0b 0 3px, #1e1e1e 3px 4px, #0b0b0b 4px 7px),
    #101010;
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
}
.album-disc-label {
  position: absolute;
  top: 50%; left: 50%;
  width: 40%; height: 40%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  object-fit: cover;
}
.album-cover {
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 3px -9px rgba(0, 0, 0, .77);
  overflow: hidden;
}
.album-cover img { width: 100%; display: block; border-radius: 2px; }
.album-cover::after {
  content: '';
  position: absolute;
  inset: -1px 0 0 0;
  background: url('../img/cd-cover-border.webp') left top / cover no-repeat;
  background-image: image-set(url('../img/cd-cover-border.avif') type('image/avif'),
                              url('../img/cd-cover-border.webp') type('image/webp'));
  opacity: .88;
  pointer-events: none;
}
.album-link { position: absolute; inset: 0; z-index: 14; }
@media (hover: hover) {
  .album:hover .album-disc { transform: translate3d(58%, 0, 0); }
}
@keyframes disc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .album-disc-spin { animation: none; }
}

/* --- Playlist ------------------------------------------------------------ */
.playlist { background: #2d2d2d; }

/* Eigener Player statt MediaElement.js – dunkles Skin wie im Original */
.player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #2d2d2d;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
}
.player-play {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: transform .2s;
}
.player-play:hover { transform: scale(1.06); }
.player-play svg { width: 18px; height: 18px; fill: #fff; }
.player-play .icon-play { margin-left: 2px; }
.player-play .icon-pause,
.player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }

.player-meta { flex: 0 1 auto; min-width: 0; line-height: 1.25; }
.player-title { display: block; font-weight: 700; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-artist { display: block; font-size: 12px; color: #d1d8d9; }

.player-bar {
  flex: 1 1 60px;
  height: 6px;
  min-width: 40px;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  position: relative;
}
.player-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.player-progress {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}
.player-time { flex: 0 0 auto; font-size: 12px; color: #d1d8d9; }
/* Deckel gegen unbegrenztes Wachsen: eine Zeile ist 62px hoch (60px
   Mindesthoehe plus die beiden Trennlinien), eine Liste mit 15 Titeln waere
   sonst ueber 900px hoch und die rechte Spalte um ein Vielfaches hoeher als
   das Albumcover links. 400px zeigt sechs Zeilen ganz und die siebte halb -
   die halbe Zeile ist der Hinweis, dass es weitergeht.

   Ganz gleich hoch werden die Spalten dadurch nicht: die Album-Grafik ist
   rund 296px hoch, die Playlist mit Kopf und Button darunter kommt bei vollem
   Deckel auf gut 540px. Die Differenz faengt align-items: center im
   .media-grid ab. Wer es enger will, setzt hier weniger - 5 Zeilen sind 338px,
   4 Zeilen 276px.

   position: relative macht offsetTop der Zeilen relativ zur Liste - darauf
   stuetzt sich reveal() in site.js. Bei zwei oder drei Titeln greift von
   alldem nichts. */
.playlist ol {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a #2d2d2d;
}
.playlist ol::-webkit-scrollbar { width: 8px; }
.playlist ol::-webkit-scrollbar-track { background: #2d2d2d; }
.playlist ol::-webkit-scrollbar-thumb { background: #4a4a4a; }
.playlist ol::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.playlist li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 20px;
  cursor: pointer;
  color: #d1d8d9;
  border-top: 1px solid #191919;
  border-bottom: 1px solid rgba(255, 255, 255, .088);
  line-height: 18px;
}
.playlist li:first-child { border-top: 0; }
.playlist li:last-child { border-bottom: 0; }
.playlist li:hover,
.playlist li.is-current { background: #252525; }
.track-text { flex: 1; text-align: left; }
.track-title { display: block; font-weight: 700; color: #fff; }
.track-artist { display: block; font-size: 14px; }
.track-length { font-size: 14px; opacity: .8; }

/* --- Video Embed (Click-to-Load) ----------------------------------------- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-embed-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* transparente Klickflaeche ueber Bild + Caption */
.media-mask {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.media-mask:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.video-embed.is-playing::after,
.video-card.is-playing::after { content: none; }
.video-embed.is-playing,
.video-card.is-playing { background-image: none !important; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-embed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  transition: background .3s;
}
.video-embed:hover::after { background: rgba(0, 0, 0, .1); }
.play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, transform .3s;
}
.play-icon svg { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }
.video-embed:hover .play-icon,
.video-card:hover .play-icon { background: var(--accent); border-color: var(--accent); }
.video-embed .play-icon,
.video-card .play-icon { pointer-events: none; }
.video-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, .5);
}

/* --- Video Grid ---------------------------------------------------------- */
/* auto-fit statt fester Dreierteilung: die Spaltenzahl folgt der Breite, statt
   an den Breakpoints zu springen. Bei 1140px Inhaltsbreite bleiben es drei. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 16px;
}
/* Vier Videos ergaeben 3+1 - die vierte Karte staende allein in der zweiten
   Reihe. Bei genau vier deshalb 2x2. Die Abfrage prueft, ob das vierte Kind
   zugleich das letzte ist.

   Der min-width-Rahmen ist noetig, nicht kosmetisch: :has() erbt die
   Spezifitaet seines Arguments, die Regel waere damit staerker als die
   Ein- und Zweispalter in den max-width-Queries weiter unten und wuerde sie
   auf schmalen Screens ueberstimmen. */
@media (min-width: 901px) {
  .card-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
.video-card {
  position: relative;
  overflow: hidden;
  background: #312d2b;
  aspect-ratio: 475 / 280;
}
.video-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.33, .02, 0, .94);
}
.video-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .44);
  transition: background .3s;
}
.video-card:hover img { transform: scale(1.06); }
.video-card:hover::after { background: rgba(0, 0, 0, .6); }
.video-card .play-icon { width: 66px; height: 66px; }
.video-card .play-icon svg { width: 20px; height: 20px; }
.video-card-title {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  z-index: 3;
  margin: 0;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  opacity: .44;
  transition: opacity .44s cubic-bezier(.33, .02, 0, .94);
}
.video-card:hover .video-card-title { opacity: 1; }

/* --- Photo banners ------------------------------------------------------- */
.banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #111;
  width: 100%;
}
.banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.33, .02, 0, .94);
}
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  transition: background .3s;
}
.banner:hover img { transform: scale(1.06); }
.banner:hover::after { background: rgba(0, 0, 0, .25); }
.banner-caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.banner-caption h3 { margin: 0; font-size: 20px; color: #fff; }
.banner-caption span { font-size: 14px; color: #fff; opacity: .85; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  align-items: end;
}
.photo-grid .col-head { grid-column: 1; }
.photo-grid .col-head .heading { margin-bottom: 20px; }

/* --- Contact ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
}
.contact-grid p { margin: 0 0 1.2em; }
.contact-mail { margin-top: 10px; }
.contact-socials { display: flex; gap: 14px; margin-top: 6px; }
.contact-socials .social-link svg { width: 22px; height: 22px; }

/* --- Bottom bar ---------------------------------------------------------- */
.bottom-bar {
  background: #000;
  padding: 10px 0;
  text-align: center;
}
.bottom-bar p { margin: 0; }
.bottom-bar a { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.bottom-bar a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Back to top --------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 8000;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s, background .3s, border-color .3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--accent); border-color: var(--accent); }
.back-to-top svg { width: 16px; height: 16px; fill: #fff; }

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .94);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
}
.lightbox-btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  font-family: var(--font);
  font-size: 30px;
  line-height: 1;
  padding: 14px 18px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
}
.lightbox-btn:hover { opacity: 1; }
.lightbox-close { top: 10px; right: 14px; font-size: 24px; }
.lightbox-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}

/* --- Legal pages --------------------------------------------------------- */
.legal { padding-top: calc(var(--nav-h) + 60px); padding-bottom: 80px; }
.legal .wrap { max-width: 900px; }
.legal h1 { font-size: 32px; text-align: center; margin-bottom: 1.2em; }
.legal h2 { font-size: 22px; margin-top: 1.8em; }
.legal h3 { font-size: 18px; margin-top: 1.4em; }
.legal p, .legal li { font-size: 15px; line-height: 1.8; }
.legal ul { padding-left: 1.2em; }
.legal a { word-break: break-word; }
.legal .back-link { display: inline-block; margin-top: 40px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-menu ul { gap: 18px; }
  .nav-menu a { font-size: 12px; }
  .split-body { padding: 3em; }
}

@media (max-width: 900px) {
  :root { --nav-h: 80px; }
  .nav-menu { display: none; }
  .hamburger { display: block; }

  .logo img { width: 104px; }              /* -> 62px hoch in der 80px-Leiste */

  .split { min-height: 0; }
  .split-media { width: 100%; min-height: 55vw; }
  .split-body { width: 100%; padding: 3em 6vw; }
  .split-body > div { max-width: none; }

  .row--full { min-height: 0; }
  .media-grid > * { flex: 1 1 100%; }
  .player-meta { display: none; }
  .album { margin-left: auto; margin-right: auto; max-width: 360px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .photo-grid .col-head { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .event { padding: 14px 0; gap: 6px 16px; }
  .event-date { flex-basis: 100%; min-width: 0; }
  .row { padding: 60px 0; }
  .card-grid, .photo-grid { grid-template-columns: 1fr; }
  .heading--lg { font-size: 26px; }
  .split-body { padding: 2.5em 6vw; }
}