/* ==========================================================================
   Antilopen Gang – main.css
   Eine Datei, keine Frameworks.
   0 Schriften · 1 Tokens · 2 Reset · 3 Layout · 4 Header · 5 Sektionen
   6 Buttons · 7 Alben · 8 Videos · 9 Newsletter · 10 Kontakt · 11 Fuß
   12 Tour · 13 Mehr anzeigen
   ========================================================================== */
/* ==========================================================================
   0 — SCHRIFTEN (selbst gehostet, kein Google-Request)
   ========================================================================== */
@font-face{font-family:"Archivo V";src:url("../fonts/archivo-var.woff2") format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Anton";src:url("../fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap}

/* ==========================================================================
   1 — TOKENS
   ========================================================================== */
:root{
  --font-body:"Archivo V",system-ui,sans-serif;
  --font-display:"Anton",Impact,sans-serif;
  --display-wght:400;
  --display-stretch:100%;
  --display-tracking:.005em;

  --bg:#000;
  --grain:url("../images/grain.png");
  --fg:#fff;
  --muted:#b0b0b0;
  --faint:#7d7d7d;
  --hairline:rgba(255,255,255,.22);

  /* Hover – die einzige Zustandsfarbe der Seite.
     Falls doch mal Rot gewünscht ist, reichen diese zwei Zeilen:
     --hot:#fb2a23; --hot-ink:#000;                                    */
  --hot:#d9d9d9;
  --hot-ink:#000;

  --line:3px;
  --wrap:1160px;
  --gutter:clamp(1rem,4vw,1.5rem);
  --gap:clamp(1.25rem,2.5vw,1.875rem);
  --section-gap:clamp(3rem,8vw,5.5rem);

  --fs-display:clamp(2.5rem,8vw,5rem);
}

/* Das Icon-Sprite steht ganz oben im Body und darf keinen Platz einnehmen.
   Kein hidden-Attribut: das wirkt bei einem inline-<svg> nicht, weil die
   Browser-Regel dafür nur im HTML-Namensraum gilt. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ==========================================================================
   2 — RESET / BASIS
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
nav ul,ul[class]{list-style:none;padding:0}
img,iframe{display:block;max-width:100%}
img{height:auto}
button,input{font:inherit;color:inherit}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background-color:var(--bg);
  background-image:var(--grain);
  background-attachment:fixed;
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
p{color:var(--muted)}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Auszeichnungsschrift nur dort, wo sie groß genug wird */
.display{
  font-family:var(--font-display);
  font-weight:var(--display-wght);
  font-stretch:var(--display-stretch);
  letter-spacing:var(--display-tracking);
  line-height:1;
  text-transform:uppercase;
}
/* Kleine Vorzeile über einer Überschrift: Jahreszahl beim Album,
   Interpret beim Video, Rolle beim Kontakt. Ein Stil für alle drei. */
.eyebrow{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:.2rem;
}

/* Karten-Überschriften: gleiche Auszeichnungsschrift, nur kleiner
   und mit etwas mehr Zeilenabstand für zweizeilige Titel */
.card-head{
  font-family:var(--font-display);
  font-weight:var(--display-wght);
  font-stretch:var(--display-stretch);
  letter-spacing:var(--display-tracking);
  line-height:1.15;
  text-transform:uppercase;
}

/* ==========================================================================
   3 — LAYOUT
   ========================================================================== */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:420px){.grid--2{grid-template-columns:1fr}}

/* Karten-Raster: feste Spaltenzahl je Breite, und eine unvollständige
   letzte Reihe wird zentriert statt links liegen gelassen. */
.albums,.videos{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--gap);
}
.albums > *,.videos > *{
  --col:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  flex:0 1 var(--col);max-width:var(--col);
}
.albums{--cols:4}
.videos{--cols:2}
@media (max-width:999px){.albums{--cols:3}}
@media (max-width:699px){.albums{--cols:2}}
@media (max-width:559px){.videos{--cols:1}}
@media (max-width:459px){.albums{--cols:1}}

/* Alben hinter "Mehr Alben anzeigen" */
.albums > .is-more{display:none}
.albums.is-open > .is-more{display:flex}

/* ==========================================================================
   4 — HEADER  (frei stehendes Logo, kein Kasten)
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);
  padding-block:.75rem;
  background-color:var(--bg);
  border-bottom:var(--line) solid var(--fg);
  margin-bottom:clamp(1rem,2.2vw,1.6rem);
}
.logo{flex:none;display:block;width:clamp(42px,4.5vw,56px)}
.logo img{width:100%}

/* Navigation und Social liegen genau einmal im Markup. Auf breiten
   Screens stehen sie nebeneinander im Header, auf schmalen klappen sie
   hinter dem Burger auf.
   Ohne JavaScript bleibt das Panel sichtbar und stapelt sich unter das
   Logo – kein toter Burger, keine unerreichbaren Links. */
.nav__toggle{display:none}
.nav__panel{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex:1}

.nav__links{display:flex;flex-wrap:wrap;gap:clamp(.85rem,2vw,1.6rem)}
.nav__links a{
  font-size:clamp(1.35rem,3vw,2.1rem);
  text-decoration:none;
  padding-bottom:.1em;
  border-bottom:3px solid transparent;
  transition:border-color .15s,color .15s;
}
.nav__links a:hover{border-bottom-color:var(--hot)}

.social{margin-left:auto;display:flex;gap:.5rem}
.social a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--fg);color:#000;transition:background .15s,transform .15s;
}
.social a:hover{background:var(--hot);transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:currentColor}

/* ---- Schmale Viewports: Burger statt umbrechender Navigation ---- */
@media (max-width:640px){
  .site-header{flex-wrap:wrap;justify-content:space-between}

  /* ohne JS: Panel bleibt sichtbar und stapelt sich */
  .nav__panel{flex-basis:100%;flex-direction:column;align-items:stretch;gap:.5rem}
  .nav__links{flex-direction:column;gap:0;width:100%}
  .nav__links a{
    display:block;padding:.75rem 0;
    border-bottom:1px solid var(--hairline);
    font-size:clamp(1.6rem,7vw,2.2rem);
  }
  .nav__links li:last-child a{border-bottom:0}
  .social{margin-left:0;margin-top:1.25rem;margin-bottom:.5rem;gap:.7rem}
  .social a{width:42px;height:42px}
  .social svg{width:21px;height:21px}

  /* mit JS: eingeklappt hinter dem Burger */
  .js .nav__toggle{
    display:grid;place-items:center;position:relative;
    width:44px;height:44px;margin-right:-9px;
    background:none;border:0;padding:0;cursor:pointer;
  }
  .js .nav__panel{display:none}
  .js .site-header[data-open] .nav__panel{
    display:flex;
    position:absolute;left:0;right:0;top:100%;
    padding:.25rem var(--gutter) 1.5rem;
    background-color:var(--bg);background-image:var(--grain);
    border-bottom:var(--line) solid var(--fg);
  }

  .burger,.burger::before,.burger::after{
    display:block;width:26px;height:3px;background:var(--fg);
    transition:transform .2s,background .2s;
  }
  .burger{position:relative}
  .burger::before,.burger::after{content:"";position:absolute;left:0}
  .burger::before{transform:translateY(-8px)}
  .burger::after{transform:translateY(8px)}
  [data-open] .burger{background:transparent}
  [data-open] .burger::before{transform:rotate(45deg)}
  [data-open] .burger::after{transform:rotate(-45deg)}
}

/* ==========================================================================
   5 — SEKTIONEN  (kein Abschlussstrich mehr, nur Titel + Linie)
   ========================================================================== */
.section{margin-bottom:var(--section-gap);scroll-margin-top:6rem}
.section__title{
  font-size:var(--fs-display);
  display:flex;align-items:center;gap:clamp(.9rem,2.5vw,1.5rem);
  margin-bottom:clamp(1.5rem,4vw,2.5rem);
  hyphens:manual;
}
.section__title::after{content:"";flex:1;height:var(--line);background:var(--fg)}

.banner{margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.banner img{width:100%}

/* ==========================================================================
   6 — BUTTONS
   ========================================================================== */
/* Zurückhaltend, aber eindeutig ein Button: Kontur statt Fläche.
   Die weiße Fläche kommt erst beim Hover – so bleiben die Cover
   das Lauteste im Raster. */
.btn{
  display:block;width:100%;
  padding:.42em 1em .5em;
  border:2px solid var(--fg);border-radius:2px;
  background:transparent;color:var(--fg);
  font-family:var(--font-display);font-weight:var(--display-wght);
  font-stretch:var(--display-stretch);
  font-size:.95rem;line-height:1.45;letter-spacing:.07em;
  text-align:center;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--hot);border-color:var(--hot);color:var(--hot-ink)}

/* Eine gefüllte Fläche pro Sektion – die eigentliche Handlungsaufforderung. */
.btn--solid{background:var(--fg);color:#000}

.btn--inline{width:auto;display:inline-block;padding-inline:2.5rem}

/* Dropdown: natives <details> statt Bootstrap + jQuery */
.dd{position:relative}
.dd summary{list-style:none}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:"";display:inline-block;margin-left:.45em;vertical-align:.15em;
  border:.32em solid transparent;border-top-color:currentColor;border-bottom:0}
.dd__menu{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
  background:#fff;color:#111;border-radius:2px;padding:.4rem 0;
  box-shadow:0 12px 34px rgba(0,0,0,.6);text-align:left;font-size:.9rem;
}
.dd__menu a{display:flex;align-items:center;gap:.55rem;padding:.42rem .8rem;text-decoration:none;color:#222}
.dd__menu a:hover{background:#111;color:#fff}
.dd__menu a:hover svg{fill:#fff}
.dd__menu svg{width:15px;height:15px;flex:none;fill:#666;transition:fill .12s}
.dd__menu hr{border:0;border-top:1px solid #e2e2e2;margin:.35rem 0}

/* ==========================================================================
   7 — ALBEN
   ========================================================================== */
.album{display:flex;flex-direction:column;gap:.65rem}
.album__cover{
  display:block;position:relative;overflow:hidden;
  box-shadow:5px 5px 20px rgba(0,0,0,.35);
  transition:transform .18s ease-out,box-shadow .18s ease-out;
}
.album__cover img{width:100%;aspect-ratio:1;object-fit:cover}
.album__cover:hover{
  z-index:1;
  transform:scale(1.03);
  box-shadow:0 16px 38px rgba(0,0,0,.6);
}
.album__meta{text-align:center;line-height:1.3}
.album__artist{font-size:clamp(1.2rem,1.6vw,1.5rem);margin-bottom:.1rem}
.album__title{color:var(--fg);font-size:1rem;text-wrap:balance}

/* ==========================================================================
   8 — VIDEOS
   ========================================================================== */
.video{display:flex;flex-direction:column;gap:.6rem}
.video__frame{position:relative;aspect-ratio:16/9;background:#000;border:0;padding:0;width:100%;cursor:pointer;overflow:hidden}
.video__frame img{width:100%;height:100%;object-fit:cover;transition:opacity .18s}
.video__frame:hover img{opacity:.7}
/* Der Player ersetzt beim Klick den Vorschau-Button. Er ist danach KEIN
   Kind von .video__frame mehr, sondern steht an dessen Stelle – er braucht
   deshalb eine eigene Regel und darf nicht über den Nachfahren-Selektor
   gestylt werden. */
.video__player{display:block;width:100%;aspect-ratio:16/9;border:0}
.video__play{
  position:absolute;inset:0;margin:auto;width:66px;height:46px;border-radius:8px;
  background:rgba(255,255,255,.9);display:grid;place-items:center;pointer-events:none;transition:background .18s;
}
.video__frame:hover .video__play{background:var(--hot)}
.video__play svg{width:24px;height:24px;fill:#000}
.video__frame:hover .video__play svg{fill:var(--hot-ink)}
.video__meta{text-align:center;line-height:1.3}
.video__title{font-size:clamp(1.25rem,1.8vw,1.6rem)}

/* ==========================================================================
   9 — NEWSLETTER
   ========================================================================== */
.newsletter{max-width:32rem;margin-inline:auto;text-align:center}
.newsletter label{display:block;font-weight:800;margin-bottom:.4rem;text-align:left;text-transform:uppercase;font-size:.8rem;letter-spacing:.1em}
.newsletter input[type=email]{
  width:100%;padding:.65rem .75rem;margin-bottom:1rem;
  border:0;border-radius:2px;background:#fff;color:#111;
}
.newsletter .disclaimer{font-size:.8rem;margin-top:1.25rem;color:var(--faint)}
.newsletter .disclaimer a:hover{color:var(--hot)}

/* ==========================================================================
   10 — KONTAKT  (links Antilopen Gang, rechts Danger Dan)
   ========================================================================== */
.contact{display:grid;grid-template-columns:1fr 1fr}
.contact__act{padding-inline:clamp(0rem,3vw,2.5rem)}
.contact__act:first-child{padding-left:0;border-right:1px solid var(--hairline)}
.contact__act:last-child{padding-right:0;text-align:right}
.contact__name{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:1.4rem}
.contact__role + .contact__mail{margin-bottom:1.4rem}
.contact__mail{font-size:clamp(1rem,1.7vw,1.2rem)}
.contact__mail a{text-decoration:none;border-bottom:1px solid var(--hairline);transition:color .15s,border-color .15s}
.contact__mail a:hover{color:var(--hot);border-bottom-color:var(--hot)}

.contact__booking{
  margin-top:clamp(2rem,5vw,3rem);padding-top:clamp(1.5rem,4vw,2rem);
  border-top:1px solid var(--hairline);text-align:center;
}
.contact__booking .contact__role{margin-bottom:.3rem}

@media (max-width:640px){
  .contact{grid-template-columns:1fr}
  .contact__act{padding-inline:0}
  .contact__act:last-child{text-align:left}
  .contact__act:first-child{border-right:0;border-bottom:1px solid var(--hairline);padding-bottom:2rem;margin-bottom:2rem}
}

/* ==========================================================================
   11 — FOOTER
   ========================================================================== */
.site-footer{padding-block:var(--section-gap);font-size:.9rem;border-top:1px solid var(--hairline)}
.site-footer details{max-width:70ch;margin-inline:auto}
.site-footer summary{cursor:pointer;text-align:center;text-decoration:underline;list-style:none}
.site-footer summary::-webkit-details-marker{display:none}
.site-footer summary:hover{color:var(--hot)}
.site-footer details > div{padding-top:1.5rem}
.site-footer h2{font-size:1.4rem;margin-block:1.5rem .5rem;text-transform:uppercase;font-weight:800}
.site-footer p{margin-bottom:.8rem}

/* ==========================================================================
   12 — TOUR
   Die Sektion rendert nur, wenn in data/tourdaten.php noch etwas
   in der Zukunft liegt. Kein Auskommentieren mehr nötig.
   ========================================================================== */
.tour__group{font-size:clamp(1.3rem,2.6vw,1.9rem);margin:clamp(1.5rem,4vw,2.25rem) 0 .75rem}
.tour__group:first-of-type{margin-top:0}

.dates{width:100%;border-collapse:collapse}
.dates td{padding:.95rem .75rem .95rem 0;border-bottom:1px solid var(--hairline);vertical-align:middle}
.dates tr:last-child td{border-bottom:0}

.dates .date,.dates .city{
  font-family:var(--font-display);font-weight:var(--display-wght);
  font-stretch:var(--display-stretch);letter-spacing:var(--display-tracking);
  font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.1;text-transform:uppercase;
}
.dates .date{width:15%;white-space:nowrap}
.dates .city{width:26%}
.dates .venue{width:30%;color:var(--muted);font-size:.95rem}
.dates .info{
  width:15%;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.dates .ticket{width:14%;text-align:right;padding-right:0}
.dates .ticket .btn{display:inline-block;width:auto;min-width:7rem;padding-inline:1.25rem}
.dates .btn--off{
  background:transparent;color:var(--faint);
  box-shadow:inset 0 0 0 2px var(--hairline);cursor:default;
}
.dates .btn--off:hover{background:transparent;color:var(--faint)}

@media (max-width:640px){
  .dates,.dates tbody,.dates tr,.dates td{display:block;width:100%}
  .dates tr{padding:1.1rem 0;border-bottom:1px solid var(--hairline)}
  .dates tr:last-child{border-bottom:0}
  .dates td{width:100%;padding:.1rem 0;border:0;text-align:center}
  .dates td:empty{display:none}
  .dates .ticket{text-align:center;margin-top:.6rem}
  .dates .ticket .btn{min-width:60%}
}

/* ==========================================================================
   13 — "MEHR ANZEIGEN"
   ========================================================================== */
.showmore[hidden]{display:none}
.more-row{text-align:center;margin-top:clamp(2rem,5vw,3rem)}

/* ==========================================================================
   14 — RECHTSTEXTE IM FUSS
   Impressum und Datenschutzerklärung sind lange Fließtexte und brauchen
   eine eigene, ruhige Gliederung.
   ========================================================================== */
.site-footer h3{
  font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  margin-block:2rem .5rem;
}
.site-footer h4{font-size:.95rem;font-weight:800;margin-block:1.4rem .35rem}
.site-footer ul{margin:0 0 .9rem 1.15rem;padding:0;list-style:disc;color:var(--muted)}
.site-footer li{margin-bottom:.35rem}
.site-footer li::marker{color:var(--faint)}
.site-footer strong{color:var(--fg)}
.site-footer a{color:var(--fg)}
.site-footer a:hover{color:var(--hot)}
.site-footer em{color:var(--faint);font-style:normal;font-size:.85rem}

/* ==========================================================================
   15 — BEWEGUNG
   Drei Effekte, alle zurückhaltend. Wer im Betriebssystem "Bewegung
   reduzieren" gesetzt hat, bekommt die Seite ohne alles – siehe unten.
   ========================================================================== */

/* --- Scroll-Reveal ------------------------------------------------------
   Wichtig: das Verstecken hängt an .js-reveal, und diese Klasse setzt das
   Skript im <head> selbst. Läuft kein JavaScript, wird nie etwas versteckt –
   die klassische Falle "Skript kaputt, Inhalt für immer unsichtbar" kann
   hier also nicht zuschnappen. */
.js-reveal .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),
             transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--verzug,0ms);
}
.js-reveal .reveal.is-in{opacity:1;transform:none}

/* --- Strich hinter dem Sektionstitel zieht sich auf --------------------- */
.js-reveal .section__title::after{
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.3,1) .1s;
}
.js-reveal .section__title.is-in::after{transform:scaleX(1)}

/* --- Header schrumpft beim Scrollen ------------------------------------- */
.site-header{transition:padding-block .25s ease}
.logo{transition:width .25s ease}
.nav__links a{transition:border-color .15s,color .15s,font-size .25s ease}
.site-header.is-klein{padding-block:.3rem}
.site-header.is-klein .logo{width:clamp(30px,3vw,38px)}
.site-header.is-klein .nav__links a{font-size:clamp(1.15rem,2.2vw,1.5rem)}

/* --- Rücksicht ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none}
  .js-reveal .section__title::after{transform:none}
}