/* ============================================================
   stubekonzert.ch · öffentliche Seiten
   Paper-Grund, Ink-Type, ein Akzent pro Konzert — Poster-Grammatik
   aus dem Cielonoveno Design System, responsive.
   ============================================================ */

* { box-sizing: border-box; }

html { background: var(--cn-paper); min-height: 100%; }
body {
  margin: 0;
  background: var(--cn-paper);
  color: var(--cn-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 72px; }

/* ---------- Header ---------- */
.site-head {
  padding: 40px 0 20px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-wordmark); font-weight: 800;
  font-size: clamp(34px, 7vw, 56px); line-height: .9;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--cn-ink); text-decoration: none; display: inline-block;
}
.wordmark .nine { color: var(--accent-site, var(--cn-violet)); }
.site-head .sub {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(11px, 2.6vw, 14px);
  color: var(--cn-stone); margin-top: 6px;
}
.site-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 13px; letter-spacing: .06em;
  color: var(--cn-ink); text-decoration: none;
  padding: 9px 13px; border: 1px solid var(--cn-ink);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.site-nav a:hover, .site-nav a.is-here { background: var(--cn-ink); color: var(--cn-paper); }

/* Saison-Palette: ein Farbstreifen pro Konzert */
.palette { display: flex; height: 6px; margin: 4px 0 40px; }
.palette span { flex: 1; }

/* ---------- Abschnitte ---------- */
.section-h {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(22px, 4.5vw, 30px); letter-spacing: .03em;
  color: var(--cn-ink);
  margin: 44px 0 18px; padding-bottom: 10px;
  border-bottom: 2px solid var(--cn-ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.section-h .h-sub {
  font-size: 12px; letter-spacing: .12em; color: var(--cn-stone);
  font-family: var(--font-display); text-transform: uppercase;
}

/* ---------- Konzert-Kacheln ---------- */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.tile {
  background: var(--cn-white); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  overflow: hidden; position: relative; display: block;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.tile:active { transform: scale(.98); }
.tile .pic { aspect-ratio: 1 / 1.414; position: relative; overflow: hidden; background: var(--cn-mist); }
.tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04) brightness(.98);
}
.tile .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cn-stone);
  font-family: var(--font-display); font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase;
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(15,15,15,.04) 12px 13px), var(--cn-mist);
}
.tile .band {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--accent);
  padding: 10px 14px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(17px, 2.2vw, 21px); line-height: .95; letter-spacing: .01em;
  color: #fff; white-space: pre-line;
}
.tile .meta {
  padding: 10px 14px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 12.5px; letter-spacing: .05em; color: var(--cn-graphite);
}
.tile .meta .pipe { opacity: .45; padding: 0 .35em; }
.tile .flag {
  position: absolute; top: 8px; left: 8px;
  background: rgba(15,15,15,.78); color: #fff;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 10px; letter-spacing: .12em; padding: 4px 8px; z-index: 2;
}

/* ---------- Festival-Block ---------- */
.festival {
  background: var(--cn-amber-tint);
  border: 1px solid var(--cn-amber);
  padding: clamp(18px, 3.5vw, 28px);
  margin: 26px 0;
}
.festival-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.festival-head h3 {
  margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(24px, 5vw, 34px); letter-spacing: .02em; line-height: .95;
  color: var(--cn-ink);
}
.festival-head .tagline {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: .12em; color: var(--cn-graphite); margin-top: 6px;
}
.festival-head .dates {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(14px, 3vw, 17px); letter-spacing: .08em; color: var(--cn-rust);
}
.festival .grid { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 14px; }

/* ---------- Venue / Info ---------- */
.info-band {
  background: var(--cn-ink); color: var(--cn-paper);
  padding: clamp(24px, 5vw, 40px);
  margin-top: 56px;
}
.info-band .cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 28px;
}
.info-band h4 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 15px; letter-spacing: .1em; margin: 0 0 10px; color: #fff;
}
.info-band p { margin: 0 0 8px; font-size: 14.5px; color: var(--cn-mist); }
.info-band a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Footer ---------- */
.site-foot {
  margin-top: 40px; padding-top: 16px;
  border-top: 1px solid var(--cn-mist);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: 11px; color: var(--cn-stone);
}
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--cn-ink); }

/* ---------- Konzert-Detailseite ---------- */
.concert-page {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(20px, 4vw, 48px); align-items: start; margin-top: 8px;
}
@media (max-width: 760px) { .concert-page { grid-template-columns: 1fr; } }
.poster-frame { background: var(--cn-white); box-shadow: var(--shadow-card); }
.poster-frame .pic { aspect-ratio: 4 / 5; position: relative; background: var(--cn-mist); overflow: hidden; }
.poster-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04) brightness(.98);
}
.concert-info .name-band {
  background: var(--accent); color: #fff;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(30px, 7vw, 52px); line-height: .95; letter-spacing: .01em;
  padding: .4em .5em .32em; white-space: pre-line;
  margin: 0 0 14px;
}
.concert-info .support-line {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 15px; letter-spacing: .08em; color: var(--cn-graphite);
  margin: 0 0 18px;
}
.concert-info .support-line .pre { color: var(--cn-stone); }
.meta-rows { border-top: 1px solid var(--cn-mist); margin-bottom: 24px; }
.meta-rows .row {
  display: flex; gap: 14px; padding: 10px 2px;
  border-bottom: 1px solid var(--cn-mist);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; letter-spacing: .05em; color: var(--cn-graphite);
  flex-wrap: wrap;
}
.meta-rows .row .k { color: var(--cn-stone); min-width: 88px; font-size: 11px; letter-spacing: .14em; padding-top: 2px; }
.btn-ticket {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 16px; letter-spacing: .06em;
  padding: 14px 22px 12px;
  transition: filter var(--dur-fast), transform var(--dur-fast);
}
.btn-ticket:hover { filter: brightness(1.08); }
.btn-ticket:active { transform: scale(.98); }
.btn-ticket.past { background: var(--cn-stone); pointer-events: none; }

/* Teilen-Knöpfe (E6, Option C) */
.share-row { margin-top: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-row .share-label {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 11px; letter-spacing: .14em; color: var(--cn-stone); margin-right: 2px;
}
.share-btn {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: .08em; line-height: 1;
  color: var(--cn-ink); background: transparent; text-decoration: none;
  padding: 7px 12px; border: 1px solid var(--cn-ink); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.share-btn:hover { background: var(--cn-ink); color: var(--cn-paper); }
.share-row .share-msg { font-size: 12px; color: var(--cn-graphite); }

.artist-links { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.artist-links a {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: .08em;
  color: var(--cn-ink); text-decoration: none;
  padding: 7px 11px; border: 1px solid var(--cn-ink);
}
.artist-links a:hover { background: var(--cn-ink); color: var(--cn-paper); }
.pair-note { margin-top: 22px; font-size: 14px; color: var(--cn-graphite); }
.pair-note a { color: inherit; }

.bio {
  margin-top: 24px; max-width: 62ch;
  font-size: 15px; line-height: 1.65; color: var(--cn-graphite);
}
.support-bio {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--cn-mist);
}
.support-bio h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; letter-spacing: .08em; color: var(--cn-ink);
  margin: 0 0 8px;
}
.support-bio p {
  margin: 0; max-width: 62ch;
  font-size: 14px; line-height: 1.6; color: var(--cn-graphite);
}
.support-bio .artist-links { margin-top: 14px; }
.support-bio .artist-links a { font-size: 11px; padding: 5px 9px; }
.back-link {
  display: inline-block; margin: 18px 0 6px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: .12em;
  color: var(--cn-stone); text-decoration: none;
}
.back-link:hover { color: var(--cn-ink); }

/* ---------- Laden / Fehler ---------- */
.note { color: var(--cn-stone); font-size: 14px; margin: 32px 0; }
.note.err { color: var(--cn-rust); }

/* ---- IMPRESSIONEN-GALERIE (Konzertseite) ---- */
.gallery-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(24px, 4vw, 34px); letter-spacing: .02em;
  color: var(--cn-ink); margin: 48px 0 18px;
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px;
}
.gallery-grid .g-cell { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--cn-graphite); }
.gallery-grid .g-cell img, .gallery-grid video.g-cell {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04); transition: filter var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.gallery-grid a.g-cell:hover img { filter: grayscale(0) contrast(1.04); transform: scale(1.03); }