/* =========================================================
   VANISH – Ergänzungen zum bestehenden Design (Okt. 2026)
   Neue Abschnitte: Hero, About, Press, Live, Booking, Newsletter
   Farben & Schrift passend zu index_html.css
   ========================================================= */

.vx-section {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 90%;
  max-width: 900px;
  margin: 10px 0 0 0;
  padding: 10px 20px;
  text-align: center;
  font-family: Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif;
  color: #C0C0C0;
}

.vx-section h2 {
  font-size: 20pt;
  font-weight: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C0C0C0;
  margin: 10px 0 18px 0;
}

.vx-section p {
  font-size: 13pt;
  line-height: 1.6;
  margin: 0 auto 14px auto;
  max-width: 720px;
}

.vx-divider {
  display: inline-block;
  width: 90%;
  max-width: 880px;
  height: 1px;
  background-color: #404040;
  margin: 25px 0 10px 0;
}

/* ---------- Hero ---------- */
.vx-hero h1 {
  font-size: 26pt;
  font-weight: normal;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  margin: 15px 0 6px 0;
}
.vx-hero .vx-claim {
  font-size: 17pt;
  color: #C0C0C0;
  margin-bottom: 16px;
}

/* Zusätzliche Button-Container (Spalte 4) – gleiche Optik wie die bestehenden */
#container_192b9a7 a, #container_7771ed8c a, #container_5263dfac a, #container_1f2ec5b6 a { display: block; }

/* ---------- Line-up / About ---------- */
.vx-lineup {
  font-size: 13pt;
  line-height: 1.6;
  color: #C0C0C0;
  margin-top: 6px;
}
.vx-lineup strong { color: #FFFFFF; font-weight: normal; }

/* ---------- Pressestimmen ---------- */
.vx-quotes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 10px 0 5px 0;
}
.vx-quote {
  flex: 1 1 240px;
  max-width: 280px;
  box-sizing: border-box;
  border: 1px solid #404040;
  background-color: #0D0D0D;
  padding: 16px 18px;
  text-align: left;
  margin: 0;
}
.vx-quote p { font-size: 12pt; font-style: italic; margin: 0 0 10px 0; }
.vx-quote footer { font-size: 10pt; color: #808080; }

/* ---------- Buttons (Hero, Booking, Newsletter) ---------- */
.vx-btn {
  display: inline-block;
  box-sizing: border-box;
  min-width: 200px;
  padding: 12px 22px;
  margin: 6px;
  font-size: 14pt;
  font-family: Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif;
  color: #C0C0C0 !important;
  background-color: #0D0D0D;
  border: 1px solid #C0C0C0;
  text-decoration: none !important;
  cursor: pointer;
}
.vx-btn:hover { background-color: #808080; border-color: #808080; color: #FFFFFF !important; }

/* ---------- Live ---------- */
.vx-live-widget { text-align: left; margin: 0 auto; max-width: 820px; }

/* ---------- Booking ---------- */
.vx-facts {
  list-style: none;
  padding: 0;
  margin: 0 auto 18px auto;
  max-width: 600px;
  font-size: 12pt;
  line-height: 1.8;
}
.vx-facts li { border-bottom: 1px solid #262626; }
.vx-mail { font-size: 15pt; }

/* ---------- Newsletter ---------- */
.vx-newsletter form { margin: 0 auto; max-width: 520px; }
.vx-newsletter input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font-size: 13pt;
  font-family: inherit;
  color: #FFFFFF;
  background-color: #0D0D0D;
  border: 1px solid #808080;
  margin-bottom: 10px;
}
.vx-newsletter label.vx-consent {
  display: block;
  text-align: left;
  font-size: 10pt;
  color: #808080;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* ---------- Footer-Navigation ---------- */
.vx-footer-nav { font-size: 10pt; margin-bottom: 14px; }
.vx-footer-nav a { color: #C0C0C0; text-decoration: none; margin: 0 8px; }
.vx-footer-nav a:hover { text-decoration: underline; }

/* ---------- Platzhalter (TODO) ----------
   Gelb markiert, damit nichts vergessen wird.
   Wenn der echte Text drinsteht: <span class="todo"> entfernen. */
.todo {
  color: #E0B84A;
  outline: 1px dashed #E0B84A;
  outline-offset: 2px;
}

/* Nur für Screenreader / Suchmaschinen sichtbar */
.vx-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;
}

@media only screen and (max-width: 600px) {
  .vx-section { width: 100%; padding: 10px 16px; }
  .vx-hero h1 { font-size: 20pt; }
  .vx-hero .vx-claim { font-size: 14pt; }
  .vx-btn { width: 100%; margin: 6px 0; }
}

/* Reihen (Buttons, Videos, Alben) sauber nebeneinander statt Umbruch */
.vx-row, #container_53cd3756_padding.vx-row { display: flex; flex-wrap: wrap; justify-content: center; }
.vx-row > div[style*="clear"] { display: none; }
.vx-footer-nav { font-family: Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif; }

/* ---------- Sprach-Umschalter DE | EN ---------- */
.vx-lang {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 10;
  font-family: Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-size: 11pt;
  letter-spacing: 0.08em;
  background-color: rgba(0,0,0,0.65);
  border: 1px solid #808080;
  padding: 6px 12px;
  color: #808080;
}
.vx-lang a { color: #C0C0C0; text-decoration: none; }
.vx-lang a:hover { color: #FFFFFF; text-decoration: underline; }
.vx-lang strong { color: #FFFFFF; font-weight: bold; }
.vx-lang span { margin: 0 8px; }

/* ---------- Diskografie: 5 Releases in einer Reihe ---------- */
#container_live_ep { vertical-align: top; position:relative; display:inline-block; margin:0 0 10px 0; background:none; }
#container_live_ep_padding { margin: 5px 10px 5px 10px; display:block; }
#img_live_ep { box-sizing:border-box; vertical-align:bottom; display:inline-block; margin:0 0 5px 0; width:100%; height:auto; border:1px solid #404040; }
#img_live_ep:hover { filter: brightness(80%); }
#container_live_ep, #container_6e3a76ce, #container_11540ca1, #container_5cbd2978, #container_3d66e75c { width:20%; }
@media only screen and (max-width: 700px) {
  #container_live_ep, #container_6e3a76ce, #container_11540ca1, #container_5cbd2978, #container_3d66e75c { width:33.333%; }
}
@media only screen and (max-width: 600px) {
  #container_live_ep, #container_6e3a76ce, #container_11540ca1, #container_5cbd2978, #container_3d66e75c { width:50%; }
}

/* ---------- Pressestimmen: 2 x 2 ---------- */
.vx-quote { flex: 1 1 340px; max-width: 420px; }
.vx-quote footer { font-style: normal; letter-spacing: 0.04em; }
.vx-quote-note { font-size: 9pt !important; color: #808080; margin-top: 8px !important; }

/* ---------- Videos: 9 gleichberechtigte Kacheln, Laden erst beim Klick ---------- */
.vx-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 14px 0;
}
.vx-video { margin: 0; text-align: center; }
.vx-video figcaption { font-size: 11pt; color: #C0C0C0; margin-top: 8px; line-height: 1.4; }
.vx-yt, .vx-yt-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #282828;
  border-radius: 5px;
  overflow: hidden;
  background-color: #0D0D0D;
}
.vx-yt { padding: 0; cursor: pointer; }
.vx-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s; }
.vx-yt:hover img, .vx-yt:focus-visible img { filter: brightness(70%); }
.vx-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; line-height: 56px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.7);
  border: 2px solid #C0C0C0;
  color: #FFFFFF; font-size: 20px; text-indent: 4px;
}
.vx-yt:hover .vx-play { border-color: #FFFFFF; }
.vx-yt-note { font-size: 9pt !important; color: #808080; }
@media only screen and (max-width: 700px) { .vx-videos { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 480px) { .vx-videos { grid-template-columns: 1fr; } }