@import url('colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--cn-paper); color: var(--cn-ink); font-family: var(--font-body); }

/* ---- LAYOUT ---- */
.web-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-8) 0; }
.section-tight { padding: var(--sp-6) 0; }

/* ---- NAV ---- */
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-1);
  background: var(--cn-paper);
}
.nav .word {
  font-family: var(--font-wordmark); font-weight: 800;
  text-transform: uppercase; letter-spacing:-0.01em;
  font-size: 22px; line-height: 1; color: var(--cn-ink);
}
.nav .word .nine { color: var(--cn-violet); }
.nav .wordmark { height: 40px; width: auto; display: block; }
.nav-links { display:flex; gap: var(--sp-5); }
.nav-links a {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 15px; letter-spacing:.04em; color: var(--cn-graphite);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.nav-links a:hover { color: var(--accent, var(--cn-violet)); }

/* ---- HERO ---- */
.hero {
  position: relative;
  background: var(--cn-ink);
  color: #fff;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  overflow: hidden;
}
.hero .copy { padding: var(--sp-8) var(--sp-7); align-self: center; }
.hero .eyebrow { color: var(--cn-fog); font-family: var(--font-display); letter-spacing: var(--tracking-wide); font-size: 13px; text-transform: uppercase; margin-bottom: var(--sp-4); }
.hero h1 { font-family: var(--font-wordmark); font-weight: 800; font-size: clamp(56px, 8vw, 112px); line-height: .92; margin: 0 0 var(--sp-4); text-transform: uppercase; letter-spacing: -.01em; }
.hero h1 .nine { color: var(--accent, var(--cn-violet)); }
.hero p { font-size: 18px; line-height: 1.55; max-width: 480px; color: var(--cn-mist); margin: 0 0 var(--sp-6); }
.hero .img {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background: #000;
}
.hero .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  display: block;
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base);
}
.hero .img:hover img { transform: scale(1.02); filter: grayscale(0.4) contrast(1.05); }
.hero .hero-tag {
  position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5);
  background: color-mix(in srgb, var(--accent, var(--cn-violet)) 88%, transparent);
  color: #fff;
  padding: 14px 18px;
  font-family: var(--font-display); text-transform: uppercase;
}
.hero .hero-tag-name { font-size: 26px; line-height: 1; letter-spacing: .02em; }
.hero .hero-tag-date { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .12em; opacity: .92; margin-top: 6px; }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; gap: var(--sp-2);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 16px; letter-spacing: .04em;
  padding: 12px 18px;
  background: var(--accent, var(--cn-violet)); color: #fff;
  border: 0; cursor: pointer;
  transition: background var(--dur-fast), transform 80ms;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }
.btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.5);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ---- CTA-BAND (Amig@ werden) ---- */
/* Etwas tieferes Violett für lesbaren Kontrast (weisser Text ~5.9:1 statt 3.6:1) */
.cta-band { background: color-mix(in srgb, var(--cn-violet) 82%, var(--cn-ink)); color: #fff; padding: var(--sp-8) 0; }
.cta-band .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.cta-band .cta-copy { max-width: 60ch; }
.cta-band .cta-eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 13px; opacity: .85; margin-bottom: var(--sp-3); }
.cta-band h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(32px, 5vw, 56px); line-height: .95; letter-spacing: .01em; margin: 0 0 var(--sp-3); }
.cta-band h2 span { color: var(--cn-lime); }
.cta-band p { font-size: 17px; line-height: 1.55; margin: 0; color: #fff; }
.cta-band .cta-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); text-transform: uppercase; font-size: 18px; letter-spacing: .04em; background: #fff; color: var(--cn-violet); padding: 16px 26px; text-decoration: none; transition: transform 80ms, filter var(--dur-fast); }
.cta-band .cta-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
@media (max-width: 700px) { .cta-band .cta-inner { flex-direction: column; align-items: flex-start; } }

/* ---- CONCERT CARDS (web list) ---- */
.concert-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
.concert-card {
  background: var(--cn-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-2);
  overflow: hidden;
  transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.concert-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.concert-card .photo { aspect-ratio: 4/5; background: var(--cn-ink); position: relative; overflow:hidden; }
.concert-card .photo img { width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.04); display:block; }
.concert-card .photo .name-band {
  position:absolute; bottom: 0; left: 0; right: 0;
  background: var(--accent);
  padding: 10px 14px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 24px; line-height: .95; letter-spacing: .01em;
  color: #fff;
}
.concert-card .body { padding: var(--sp-4); }
.concert-card .when {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; letter-spacing:.04em; color: var(--cn-graphite);
}
.concert-card .when .pipe { opacity:.5; padding: 0 .35em; }
.concert-card .desc { font-size: 14px; color: var(--cn-stone); margin: var(--sp-2) 0 0; line-height: 1.5; }

/* ---- INSTA TILE GRID ---- */
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.insta-tile { aspect-ratio: 1/1; position: relative; overflow: hidden; cursor: pointer; }
.insta-tile img { width:100%; height:100%; object-fit:cover; filter: grayscale(1); transition: filter var(--dur-base); display:block; }
.insta-tile:hover img { filter: grayscale(1) brightness(.7); }
.insta-tile .overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: #fff; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .04em; font-size: 14px;
  opacity: 0; transition: opacity var(--dur-base);
}
.insta-tile:hover .overlay { opacity: 1; }

/* ---- FOOTER ---- */
.footer {
  background: var(--cn-ink); color: var(--cn-mist);
  padding: var(--sp-8) 0 var(--sp-6);
}
.footer .grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-7); }
.footer h4 { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; letter-spacing: var(--tracking-wide); color: var(--cn-fog); margin: 0 0 var(--sp-3); }
.footer a { color: var(--cn-mist); text-decoration: none; display: block; font-size: 14px; padding: 4px 0; }
.footer a:hover { color: #fff; }
.footer .word {
  font-family: var(--font-wordmark); font-weight: 800; text-transform: uppercase;
  font-size: 36px; line-height: .95; color: #fff; letter-spacing: -0.01em;
}
.footer .word .nine { color: var(--cn-violet); }
/* Footer-Logo: Wortmarke im Kamera-Rahmen (weiss), das Cielonoveno-Zeichen */
.footer .footer-brand {
  position: relative; display: inline-block;
  padding: 16px 22px 18px; margin-bottom: 8px;
  --frame-size: 18px; --frame-thick: 3px; --frame-inset: 0; --frame-color: #fff;
}
.footer .footer-brand .word { font-size: 34px; }
.footer .footer-logo { width: 190px; max-width: 60%; height: auto; display: block; margin-bottom: var(--sp-3); }
.footer .tag { color: var(--cn-fog); font-size: 13px; margin-top: var(--sp-3); }
.footer .legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--sp-7); padding-top: var(--sp-4); display:flex; justify-content:space-between; font-size: 12px; color: var(--cn-stone); letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-display); }

/* ---- BUSINESS CARD (web) ---- */
.bcard {
  width: 280px; height: 280px; background: #fff; position: relative;
  box-shadow: var(--shadow-card);
}
.bcard .inner { position: absolute; inset: 56px 56px 56px 56px; display:flex; flex-direction:column; justify-content:space-between; }
.bcard .ttl { font-family: var(--font-wordmark); font-weight: 800; font-size: 26px; line-height: .95; color: var(--cn-graphite); text-transform: uppercase; letter-spacing: -.01em; }
.bcard .det { font-family: var(--font-wordmark); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cn-graphite); line-height: 2; }


/* ---- RESPONSIVE (Ergänzung fürs Live-Deployment; Kit war 1280px fix) ---- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .copy { padding: var(--sp-7) var(--sp-5); }
  .hero .img { min-height: 420px; }
  /* Footer mobil: Wortmarke oben über volle Breite, darunter Folgen links · Kontakt rechts */
  .footer .grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
  .footer .grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .nav { flex-wrap: wrap; gap: var(--sp-3); }
  .nav-links { gap: var(--sp-4); flex-wrap: wrap; }
  .concert-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .web-wrap { padding: 0 var(--sp-4); }
  .footer .legal { flex-direction: column; gap: 6px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .concert-grid { grid-template-columns: repeat(2, 1fr); }
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.section-head h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(32px, 5vw, 48px); letter-spacing: .01em; color: var(--cn-ink); margin: 0; line-height: 1; }
.section-head a { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; letter-spacing: .04em; color: var(--cn-stone); text-decoration: none; }
.section-head a:hover { color: var(--cn-ink); }
.concert-card a { text-decoration: none; color: inherit; display: block; }
.insta-tile { display: block; }
a.insta-tile { text-decoration: none; }
.fest-flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(15,15,15,.78); color: #fff;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 11px; letter-spacing: .12em; padding: 4px 9px;
}
.bcards { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---- ÜBER UNS ---- */
.about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: 900px; }
.about-block h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 20px; letter-spacing: .05em; color: var(--cn-ink); margin: 0 0 12px;
}
.about-block p { font-size: 16px; line-height: 1.65; color: var(--cn-graphite); margin: 0; max-width: 62ch; }
/* ---- HERO-SLIDESHOW ---- */
.hero .img { position: relative; min-height: 420px; }
.hero .img img.slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.hero .img img.slide.on { opacity: 1; }
.hero .hero-tag { transition: background-color 700ms var(--ease-out); z-index: 2; }
.hero h1 .nine { transition: color 700ms var(--ease-out); }
.hero .btn { transition: background-color 700ms var(--ease-out), filter var(--dur-fast), transform 80ms; }
.hero-dots {
  position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 2;
  display: flex; gap: 6px;
}
.hero-dots span {
  width: 7px; height: 7px; background: rgba(255,255,255,.35);
  transition: background 300ms;
}
.hero-dots span.on { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hero .img img.slide { transition: none; }
}
/* ---- C9-Umlaut: die zwei Pünktchen des Ü als c + 9 in Akzentfarbe ---- */
.hero h1 .ue { position: relative; display: inline-block; }
.hero h1 .c9d {
  position: absolute; top: -0.30em;
  font-size: 0.30em; font-weight: 800; font-style: normal;
  line-height: 1; color: var(--accent, var(--cn-violet));
  transition: color 700ms var(--ease-out);
}
.hero h1 .c9d.d-c { left: 2%; }
.hero h1 .c9d.d-9 { right: 2%; }
.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;
}