/* Another Sunset – monochrom, Drahtgitter, Konstruktionslinien */
:root {
  --bg: #000;
  --bg-2: #0b0b0b;
  --line: #262626;
  --hair: rgba(255,255,255,.28);
  --text: #ececec;
  --muted: #8d8d8d;
  --serif: "Cinzel", "Trajan Pro", "Cormorant SC", "Optima", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--hair); }
a:hover { text-decoration-color: var(--text); }
img { max-width: 100%; height: auto; }
.icon { width: 1.2em; height: 1.2em; flex: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 64px 16px 48px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.hero__bg {
  position: absolute; inset: -18% -10%; z-index: -2;  /* großzügig, weil es per JS auf die Kugel zentriert wird */
  background: url("img/pattern.jpg") center / cover no-repeat;
  opacity: .32;
  animation: drift 40s ease-in-out infinite alternate;
}
.hero::before { /* Vignette: Mitte frei für das Logo, Ränder ins Schwarz */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 38% at 50% 44%, rgba(0,0,0,.72), transparent 100%),
    radial-gradient(ellipse at center, transparent 35%, #000 88%),
    linear-gradient(transparent 70%, #000);
}
.hero--photo .hero__bg { opacity: .55; animation: none; }
@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.08) rotate(.6deg); }
}

.hero__inner { width: 100%; max-width: 920px; min-width: 0; }
.hero__title { margin: 0; line-height: 0; }
.hero__title img {
  /* Die Kugel sitzt bei 55,47 % der Logobreite – Logo so verschieben, dass sie genau in der Mitte steht */
  --sphere-x: .5547;
  width: min(90%, 880px);
  translate: calc((.5 - var(--sphere-x)) * 100%) 0;
  filter: drop-shadow(0 0 24px rgba(0,0,0,.9));
}
.hero__tagline {
  margin: 22px 0 0;
  font: 400 clamp(.72rem, 2.6vw, .9rem)/1.4 var(--serif);
  text-transform: uppercase;
  letter-spacing: .42em;
  color: #bdbdbd;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 44px auto 0;
  max-width: 640px;
}
.link {
  flex: 1 1 140px;
  max-width: 200px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  text-decoration: none;
  font: 400 .8rem/1 var(--serif);
  text-transform: uppercase;
  letter-spacing: .2em;
  transition: background .25s, color .25s, border-color .25s;
}
.link:hover, .link:focus-visible { background: var(--text); color: #000; border-color: var(--text); }
.link:hover .icon [stroke="var(--bg)"] { stroke: var(--text); }

.hero__jump { margin-top: 32px; display: flex; gap: 28px; justify-content: center; }
.hero__jump a {
  color: var(--muted); text-decoration: none;
  font: 400 .75rem/1 var(--serif); text-transform: uppercase; letter-spacing: .3em;
  transition: color .2s;
}
.hero__jump a:hover { color: var(--text); }

/* ---------- Sections ---------- */
.section { max-width: 860px; margin: 0 auto; padding: 72px 16px; }

/* Überschrift mit Konstruktionslinien wie im Logo */
.section__title {
  position: relative;
  display: inline-block;
  margin: 0 0 40px;
  padding: 0 14px 10px 14px;
  font: 400 clamp(1.5rem, 6vw, 2.3rem)/1.1 var(--serif);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.section__title::before, .section__title::after {
  content: ""; position: absolute; pointer-events: none;
}
.section__title::before { /* Grundlinie, über die Schrift hinaus */
  left: -6px; right: -40px; bottom: 0; height: 1px;
  background: var(--hair);
}
.section__title::after { /* Hilfslinien: senkrechte Ticks + Oberlinie */
  left: 0; right: 0; top: -8px; bottom: -8px;
  background:
    linear-gradient(var(--hair), var(--hair)) left 6px top 0 / 1px 100% no-repeat,
    linear-gradient(var(--hair), var(--hair)) right 6px top 0 / 1px 100% no-repeat,
    linear-gradient(var(--hair), var(--hair)) left -4px top 8px / calc(100% + 8px) 1px no-repeat;
  opacity: .6;
}

.shows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.show {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 4px 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.show__date {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; font-family: var(--serif);
  padding: 8px 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.show__day { font-size: 1.9rem; }
.show__month { font-size: .78rem; letter-spacing: .2em; margin-top: 6px; color: var(--muted); }
.show__year { font-size: .68rem; color: #5c5c5c; margin-top: 4px; letter-spacing: .1em; }
.show__city { margin: 0; font: 400 1.25rem/1.2 var(--serif); text-transform: uppercase; letter-spacing: .1em; }
.show__venue, .show__lineup, .show__note { margin: 3px 0 0; color: var(--muted); font-size: .93rem; }
.show__note { color: #c9c9c9; }
.show__action { grid-column: 2; margin-top: 12px; }
.show--soldout .show__city { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }

@media (min-width: 640px) {
  .show { grid-template-columns: 80px 1fr auto; padding: 26px 8px; gap: 4px 28px; }
  .show__action { grid-column: auto; margin-top: 0; }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border: 1px solid var(--text);
  color: var(--text); text-decoration: none;
  font: 400 .78rem/1 var(--serif); text-transform: uppercase; letter-spacing: .2em;
  transition: background .25s, color .25s;
}
.btn:hover { background: var(--text); color: #000; }
.btn--big { padding: 16px 28px; font-size: .85rem; }
.badge {
  display: inline-block; padding: 10px 14px; border: 1px dashed #444;
  font: 400 .72rem/1 var(--serif); text-transform: uppercase; letter-spacing: .2em; color: var(--muted);
}

.empty { color: var(--muted); }
.prose { max-width: 65ch; color: #d0d0d0; }
.prose h2 { font: 400 1.15rem/1.3 var(--serif); text-transform: uppercase; letter-spacing: .1em; margin: 2em 0 .5em; color: var(--text); }
.prose p { margin: 0 0 1em; }

.section--shop {
  position: relative;
  border: 1px solid var(--line);
  max-width: 828px;
  margin: 0 16px;
  padding: 44px 24px;
  background:
    linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.82)),
    url("img/pattern.jpg") center / cover;
}
@media (min-width: 860px) { .section--shop { margin: 0 auto; } }

/* ---------- Galerie ---------- */
.section--wide { max-width: 1180px; }
.gallery { columns: 2; column-gap: 8px; }
@media (min-width: 720px) { .gallery { columns: 3; column-gap: 12px; } }
@media (min-width: 1100px) { .gallery { columns: 4; } }
.gallery__item {
  display: block; margin: 0 0 8px; break-inside: avoid;
  position: relative; overflow: hidden; background: var(--bg-2);
}
@media (min-width: 720px) { .gallery__item { margin-bottom: 12px; } }
.gallery__item img { display: block; width: 100%; height: auto; transition: transform .6s ease, opacity .3s; opacity: .92; }
.gallery__item::after { /* feine Rahmenlinie wie eine Konstruktionslinie */
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,0); transition: border-color .3s; pointer-events: none;
}
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.03); opacity: 1; }
.gallery__item:hover::after, .gallery__item:focus-visible::after { border-color: rgba(255,255,255,.45); }

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(0,0,0,.95); color: var(--text);
}
.lightbox::backdrop { background: #000; }
.lightbox figure { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 40px; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; }
.lightbox figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; text-align: center; }
.lb-btn {
  position: absolute; background: rgba(0,0,0,.4); color: var(--text); border: 1px solid var(--hair);
  width: 44px; height: 44px; font: 300 1.7rem/1 var(--serif); cursor: pointer;
  display: grid; place-items: center;
}
.lb-btn:hover { background: var(--text); color: #000; }
.lb-close { top: 10px; right: 10px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-count { position: absolute; top: 22px; left: 16px; font: 400 .75rem/1 var(--serif); letter-spacing: .2em; color: var(--muted); }
html.lb-open { overflow: hidden; }

/* ---------- About ---------- */
.about__photo { margin: 0 0 28px; }
.about__photo img { display: block; width: 100%; max-width: 560px; }
@media (min-width: 760px) {
  .about--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
  .about--split .about__photo { margin: 0; }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 40px 16px 44px;
  text-align: center;
  color: #5f5f5f;
  font-size: .8rem;
  letter-spacing: .05em;
}
.footer__emblem { display: block; width: 56px; margin: 0 auto 18px; opacity: .75; }
.footer p { margin: 0 0 10px; }
.footer nav { display: flex; gap: 22px; justify-content: center; }
.footer a { color: #7a7a7a; }

.legal .section { padding-top: 40px; }
.back {
  text-decoration: none; color: var(--muted);
  font: 400 .75rem/1 var(--serif); text-transform: uppercase; letter-spacing: .25em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}