/* ============================================================================
   Steppenwolf – user.css für das Cassiopeia-Child-Template (Joomla 6)
   Ablage: media/templates/site/cassiopeia_steppenwolf/css/user.css
   Wird von Cassiopeia automatisch als letzte CSS-Datei geladen.

   Aufbau:
     1. Design-Variablen
     2. Grundlayout
     3. Header mit Wortmarke (alle Seiten)
     4. Hauptmenü (Modul "Menü", Layout "Collapsible Dropdown", Position "menu")
     5. Startseite: Hero (Position "hero") und transparenter Header
     6. Joomla-Standardelemente (Beiträge, Buttons, Formulare, Footer, Kalender)
     7. Inhaltsklassen der statischen Seite
     8. Bandseite (Musiker-Karten)
     9. Termine / Tourseite (Modul mod_steppenwolf_termine)
    10. Songseite (Audio-Karten)
    11. Videoseite (YouTube-Karten)
    12. Bilderseite (JoomGallery 4)
    13. Kontaktseite (Infobox + Formular)
    14. Tabaluga (Bild links, Text rechts)
    15. Responsive
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1. Design-Variablen
   ------------------------------------------------------------------------- */
:root {
  --sw-bg: #050506;
  --sw-panel: #151519;
  --sw-panel-dark: #101014;
  --sw-muted: #b9b9bf;
  --sw-text: #f4f4f6;
  --sw-accent: #b60018;
  --sw-accent-light: #ff4d63; /* hellere Variante für Text-Hover, #b60018 ist auf Schwarz schlecht lesbar */
  --sw-line: #2c2c31;
  --sw-max: 1080px;         /* Inhaltsbreite: 1120px Container abzüglich 2 × 20px Innenabstand */
  --sw-gap: 24px;
  --sw-header-h: 96px;      /* Höhe des Headers auf der Startseite */
  --sw-serif: Georgia, 'Times New Roman', serif;

  --cassiopeia-color-primary: var(--sw-bg);
  --cassiopeia-color-link: var(--sw-text);
  --cassiopeia-color-hover: var(--sw-accent-light);
  --cassiopeia-font-family-body: Arial, Helvetica, sans-serif;
  --cassiopeia-font-family-headings: Arial, Helvetica, sans-serif;

  --body-bg: var(--sw-bg);
  --body-color: var(--sw-text);
  --bs-body-bg: var(--sw-bg);
  --bs-body-color: var(--sw-text);
}


/* ----------------------------------------------------------------------------
   2. Grundlayout
   ------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body.site {
  background: radial-gradient(circle at top, #25252b 0, #0b0b0d 42%, #050506 100%) fixed;
  color: var(--sw-text);
  line-height: 1.55;
}

/* Inhaltsbreite wie auf der statischen Seite: 4 Spalten + 3 Lücken = --sw-max */
.site-grid {
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] repeat(4, minmax(0, calc((var(--sw-max) - 3 * var(--sw-gap)) / 4)))
    [main-end] minmax(0, 1fr)
    [full-end];
  column-gap: var(--sw-gap);
}

/* Abstand zwischen Header und Inhalt auf Unterseiten wie im Original (36px) */
body.site:not(.home) .site-grid {
  padding-top: 20px;
}

a {
  color: var(--sw-text);
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--sw-accent-light);
}

h1, h2, h3, h4 {
  line-height: 1.18;
  color: var(--sw-text);
}

h2 {
  font-size: clamp(26px, 4vw, 42px);
  margin: 0 0 18px;
}

h3 {
  font-size: 1.35rem;
  margin: 22px 0 10px;
}

::selection {
  background: var(--sw-accent);
  color: #fff;
}


/* ----------------------------------------------------------------------------
   3. Header
   Zwei Template-Stile des Child-Templates:
   - Standard (Unterseiten): Logo-Datei logo_mobile.png,
     Seitenbeschreibung "Maffay Show Band Nr. 1"
   - Startseite (nur dem Startseiten-Menüpunkt zugewiesen): Marke als Text,
     Titel "Peter Maffay", Seitenbeschreibung "Coverband Nr. 1"
   ------------------------------------------------------------------------- */
.container-header {
  z-index: 50;
  background: rgba(5, 5, 6, .92);
  background-image: none;
  border-bottom: 1px solid var(--sw-line);
  box-shadow: none;
}

/* Unterseiten: Logo und Bandname nebeneinander */
.container-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  margin: 0;
  font-size: inherit;
}

.container-header .brand-logo {
  display: block;
  color: var(--sw-text);
  text-decoration: none;
}

.container-header .brand-logo img {
  display: block;
  height: 64px;
  width: auto;
}

.container-header .site-description {
  color: var(--sw-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Startseite: Wortmarke "PETER MAFFAY / COVERBAND NR. 1" */
.home .container-header .navbar-brand {
  display: grid;
  gap: 0;
}

.home .container-header .brand-logo {
  font-family: var(--sw-serif);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.home .container-header .brand-logo:hover,
.home .container-header .brand-logo:focus {
  color: #fff;
}

.home .container-header .site-description {
  margin-left: 4px;
  color: var(--sw-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Desktop: Wortmarke links, Menü rechts in einer Zeile, Header klebt oben */
@media (min-width: 992px) {
  .container-header {
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px max(20px, calc((100% - var(--sw-max)) / 2));
  }

  .container-header > .grid-child {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .container-header .container-nav {
    padding-bottom: 0;
  }

  .container-header nav {
    margin-top: 0;
  }
}


/* ----------------------------------------------------------------------------
   4. Hauptmenü
   ------------------------------------------------------------------------- */

/* Cassiopeia-Unterstreichungen und Innenabstände entfernen */
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before {
  display: none;
}

.container-header .metismenu.mod-menu {
  gap: 6px;
}

.container-header .metismenu.mod-menu .metismenu-item {
  padding: 0;
  font-size: 1rem;
}

.container-header .metismenu.mod-menu .metismenu-item > a,
.container-header .metismenu.mod-menu .metismenu-item > span,
.container-header .metismenu.mod-menu .metismenu-item > .mm-toggler-nolink {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--sw-text);
  text-decoration: none;
}

/* Menüüberschrift mit Untermenü (z. B. "Medien"): Text und Pfeil auf einer Linie */
.container-header .metismenu.mod-menu .metismenu-item > .mm-toggler-nolink {
  display: inline-flex;
  align-items: center;
  font: inherit;
}

/* Pfeil hinter einem verlinkten Elternpunkt */
.container-header .metismenu.mod-menu .mm-toggler-link {
  padding: 0 6px 0 0;
  color: var(--sw-text);
}

.container-header .metismenu.mod-menu .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .metismenu-item > a:focus,
.container-header .metismenu.mod-menu .metismenu-item > .mm-toggler-nolink:hover,
.container-header .metismenu.mod-menu .metismenu-item.active > a,
.container-header .metismenu.mod-menu .metismenu-item.active > .mm-toggler-nolink {
  background: var(--sw-accent);
  color: #fff;
  text-decoration: none;
}

/* Untermenü */
.container-header .metismenu.mod-menu .mm-collapse {
  min-width: 170px;
  padding: 6px;
  background: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.container-header .metismenu.mod-menu .mm-collapse a {
  width: 100%;
}

/* Mobiler Menü-Button */
.container-header .navbar-toggler {
  color: var(--sw-text);
  border: 1px solid var(--sw-line);
  border-radius: 6px;
}


/* ----------------------------------------------------------------------------
   5. Startseite
   Menüpunkt der Startseite: Seitenklasse "home"
   Modul "Eigenes HTML" auf Position "hero", nur auf der Startseite
   ------------------------------------------------------------------------- */
body.site.home {
  background: #000;
  color: #fff;
}

/* Hero */
.container-hero .mod-custom {
  margin: 0;
}

.home-hero {
  position: relative;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  /* Bild aus dem Joomla-Medienordner; die Seite läuft im Webroot, daher absoluter Pfad */
  background: #000 url('/images/content/hero_andreas.webp') no-repeat fixed;
  background-size: auto 100vh;
  /* Bild 16:9, Andreas steht in der linken Hälfte, rechts ist Platz für Logo und Text */
  background-position: 15% center;
}

.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .82));
  pointer-events: none;
}

.home-hero-copy {
  position: absolute;
  z-index: 2;
  left: 61.5vw;
  top: 61%;
  transform: translateY(-50%);
  width: min(26vw, 390px);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .85);
}

.home-hero-copy h1 {
  margin: 0 0 16px;
  color: #fff;
  font-family: var(--sw-serif);
  font-size: clamp(26px, 2.3vw, 40px);
  line-height: 1;
}

.home-hero-copy p {
  margin: 0 0 18px;
  color: #fff;
  font-family: var(--sw-serif);
  font-size: clamp(11px, .95vw, 16px);
  font-weight: 700;
}

.home-hero-logo {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .58));
}

.home-hero-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.home-hero-social img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .75;
  transition: opacity .2s, transform .2s, filter .2s;
}

/* Icons sind weiß: beim Darüberfahren voll deckend, leicht größer, rotes Leuchten */
.home-hero-social a:hover img,
.home-hero-social a:focus-visible img {
  opacity: 1;
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px var(--sw-accent-light));
}

.home-scroll-arrow {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* Vom unteren Rand aus gemessen, damit der Pfeil immer über dem Header bleibt */
  bottom: calc(var(--sw-header-h) + 36px);
  width: 34px;
  height: 34px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid rgba(255, 255, 255, .78);
  border-bottom: 2px solid rgba(255, 255, 255, .78);
  animation: swHomeArrow 1.6s ease-in-out infinite;
}

.home-scroll-arrow:focus {
  outline: 2px solid #fff;
  outline-offset: 8px;
}

/* Wippen über "translate", da margin-top bei unten verankerter Position nicht wirkt */
@keyframes swHomeArrow {
  0%, 100% { translate: 0 -4px; opacity: .55; }
  50% { translate: 0 7px; opacity: 1; }
}

/* Inhalt unter dem Hero */
.home .site-grid {
  padding-top: 30px;
  scroll-margin-top: var(--sw-header-h);
}

/* Desktop: Header liegt halbtransparent am unteren Rand des Hero und klebt beim Scrollen oben */
@media (min-width: 992px) {
  .home .container-header {
    min-height: var(--sw-header-h);
    margin-top: calc(var(--sw-header-h) * -1);
    padding-top: 16px;
    padding-bottom: 16px;
    /* Startseite etwas breiter, wie im Original. Wortmarke und Menü wachsen bis ca. 1550px mit
       der Fensterbreite (vw), daher wächst die Zeile mit: 1140px bis max. 1240px – sonst bricht
       das Menü auf großen Bildschirmen unter die Wortmarke um. */
    padding-inline: max(20px, calc((100% - clamp(1140px, 79vw, 1240px)) / 2));
    background: rgba(0, 0, 0, .66);
    border: 0;
  }

  .home .container-header .brand-logo {
    color: rgba(255, 255, 255, .55);
    font-size: clamp(32px, 3.1vw, 48px);
  }

  .home .container-header .site-description {
    color: rgba(255, 255, 255, .48);
  }

  .home .container-header .metismenu.mod-menu .metismenu-item > a,
  .home .container-header .metismenu.mod-menu .metismenu-item > span,
  .home .container-header .metismenu.mod-menu .metismenu-item > .mm-toggler-nolink {
    padding: 9px 10px;
    color: rgba(255, 255, 255, .74);
    font-family: var(--sw-serif);
    font-size: clamp(14px, 1.05vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 2px 10px #000;
  }

  /* Hover und aktiver Punkt: rotes Leuchten statt roter Fläche */
  .home .container-header .metismenu.mod-menu .metismenu-item > a:hover,
  .home .container-header .metismenu.mod-menu .metismenu-item > a:focus,
  .home .container-header .metismenu.mod-menu .metismenu-item > .mm-toggler-nolink:hover,
  .home .container-header .metismenu.mod-menu .metismenu-item.active > a,
  .home .container-header .metismenu.mod-menu .metismenu-item.active > .mm-toggler-nolink {
    background: transparent;
    color: #fff;
    text-shadow: 0 0 7px var(--sw-accent), 0 0 14px var(--sw-accent);
  }

  .home .container-header .metismenu.mod-menu .mm-collapse {
    background: rgba(0, 0, 0, .9);
    border-color: rgba(255, 255, 255, .12);
  }
}


/* ----------------------------------------------------------------------------
   6. Joomla-Standardelemente
   ------------------------------------------------------------------------- */

/* Einzelbeitrag und jeder Beitrag im Kategorie-Blog (z. B. Startseite) als dunkles Panel.
   ".blog-items > .blog-item" ist nötig, weil Cassiopeia dort das Padding auf 0 setzt. */
.com-content-article,
.blog-items > .blog-item {
  background: rgba(21, 21, 25, .86);
  border: 1px solid var(--sw-line);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.com-content-article {
  margin-bottom: 24px;
}

/* Abstand zwischen den Blog-Beiträgen wie auf der statischen Seite */
.blog-items {
  gap: 24px;
}

/* Beitragstitel im Blog in der Größe der statischen h2 */
.blog-item .page-header h2,
.blog-item .item-title {
  margin: 0 0 18px;
  font-size: clamp(26px, 4vw, 42px);
}

.blog-item .page-header h2 a {
  text-decoration: none;
}

/* Bilder in Beiträgen: volle Breite, abgerundet */
.blog-item .item-image img,
.blog-item .item-content img,
.com-content-article img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Bildausrichtung aus dem Beitrag: Reiter "Bilder und Links" → Feld "Figure-Klasse"
   des Einleitungs- bzw. Beitragsbildes auf "left"/"right" (oder Joomla-üblich
   "float-start"/"float-end") setzen. Mobil steht das Bild über dem Text (Abschnitt 15).
   Bild 40 % breit, Abstand zum Text auf der jeweils freien Seite. */
.item-image.left,
.item-image.right,
.item-image.float-start,
.item-image.float-end {
  width: 40%;
  /*max-width: 420px;*/ /* auf großen Viewports zu klein, daher ohne Obergrenze */
}

.item-image.left,
.item-image.float-start {
  float: left;
  margin: 0 28px 20px 0;
}

.item-image.right,
.item-image.float-end {
  float: right;
  margin: 0 0 20px 28px;
}

.item-image.left img,
.item-image.right img,
.item-image.float-start img,
.item-image.float-end img {
  width: 100%;
}

/* Beitrag umschließt das gefloatete Bild (kein Überstand über den Kasten) */
.blog-items > .blog-item,
.com-content-article {
  display: flow-root;
}


/* Erster Absatz als Einleitung, wie .lead auf der statischen Seite */
.home .blog-item .item-content > p:first-of-type {
  font-size: 1.1rem;
  color: #e6e6e6;
}

/* "Bearbeiten"-Link (nur für angemeldete Redakteure sichtbar) dezent oben rechts in die Ecke */
.blog-items > .blog-item {
  position: relative;
}

.blog-item .icons {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  font-size: .8rem;
  opacity: .6;
}

.blog-item .icons:hover {
  opacity: 1;
}

/* Platz für den "Bearbeiten"-Link, damit lange Titel nicht darunter laufen */
.blog-item:has(.icons) .page-header h2 {
  padding-right: 72px;
}

/* "Weiterlesen" */
.blog-item .readmore .btn {
  background: #292933;
  border-color: #292933;
  color: #fff;
}

.blog-item .readmore .btn:hover {
  background: var(--sw-accent);
  border-color: var(--sw-accent);
}

/* Module im Stil "card" */
.card {
  background: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 12px;
  color: var(--sw-text);
  overflow: hidden;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--sw-line);
  color: var(--sw-text);
}

/* Buttons */
.btn-primary,
.button {
  display: inline-block;
  padding: 11px 16px;
  background: var(--sw-accent);
  border: 1px solid var(--sw-accent);
  border-radius: 7px;
  color: #fff;
  text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus,
.button:hover,
.button:focus {
  background: #d0001d;
  border-color: #d0001d;
  color: #fff;
}

.btn-secondary,
.button.secondary {
  background: #292933;
  border-color: #292933;
  color: #fff;
}

/* Formulare */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea {
  background: #0b0b0d;
  color: var(--sw-text);
  border: 1px solid var(--sw-line);
  border-radius: 7px;
}

.form-control:focus,
.form-select:focus {
  background: #0b0b0d;
  color: var(--sw-text);
  border-color: var(--sw-accent);
  box-shadow: 0 0 0 .2rem rgba(182, 0, 24, .35);
}

label,
.form-text {
  color: var(--sw-muted);
}

/* Breadcrumbs und Seitennavigation */
.breadcrumb,
.mod-breadcrumbs {
  background: transparent;
  color: var(--sw-muted);
}

.page-link {
  background: var(--sw-panel-dark);
  border-color: var(--sw-line);
  color: var(--sw-text);
}

.page-item.active .page-link,
.page-link:hover {
  background: var(--sw-accent);
  border-color: var(--sw-accent);
  color: #fff;
}

/* Footer: links Copyright (Eigenes HTML), rechts Footer-Menü */
.container-footer {
  position: relative;
  z-index: 10;
  margin-top: 40px;
  background: var(--sw-bg);
  background-image: none;
  border-top: 1px solid var(--sw-line);
  color: var(--sw-muted);
}

.container-footer .grid-child {
  max-width: calc(var(--sw-max) + 40px); /* inkl. 2 × 20px Innenabstand, fluchtet mit dem Inhalt */
  margin: 0 auto;
  padding: 24px 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.container-footer p {
  margin: 0;
}

/* Copyright aus der index.php des Child-Templates (Jahr automatisch) */
.container-footer .sw-copyright {
  color: var(--sw-muted);
}

.container-footer .mod-menu {
  display: flex;
  flex-direction: row; /* Cassiopeia setzt .mod-menu standardmäßig senkrecht */
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-footer a {
  color: var(--sw-text);
  text-decoration: none;
}

.container-footer a:hover {
  color: var(--sw-accent-light);
}

.back-to-top-link {
  background: var(--sw-accent);
  color: #fff;
}

/* Social-Icons im Fließtext (Klasse "sw-social" am Absatz oder an einem span).
   Ersetzt die alten onmouseover-Bildwechsel; Verhalten wie im Hero (weiße Icons, rotes Leuchten). */
.sw-social a {
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
}

.sw-social img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 0;
  opacity: .75;
  transition: opacity .2s, transform .2s, filter .2s;
}

.sw-social a:hover img,
.sw-social a:focus-visible img {
  opacity: 1;
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px var(--sw-accent-light));
}

/* Kalender-Popup (Datumsfelder, z. B. „Veranstaltungsdatum“ im Kontaktformular).
   Joomla setzt einige Farben fest (Kopfzeile weiß, Wochenende grau, „heute“ grün),
   deshalb neben den Variablen auch gezielte Überschreibungen. */
.js-calendar {
  border-radius: 8px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .75) !important;
}

.js-calendar .calendar-container {
  --calendar-bg: var(--sw-panel-dark);
  --calendar-week-bg: #0b0b0d;
  --calendar-disabled-color: #55555c;
  --calendar-disabled-bg: transparent;
  --calendar-select-color: var(--sw-text);
  --calendar-select-bg-color: #0b0b0d;
  --btn-primary-bg: var(--sw-accent);
  --btn-primary-color: #fff;
  --body-bg: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  color: var(--sw-text);
  overflow: hidden;
}

.js-calendar .calendar-container table,
.js-calendar .calendar-container .table > :not(caption) > * > * {
  background: transparent;
  color: var(--sw-text);
  border-color: var(--sw-line);
  box-shadow: none;
}

.js-calendar thead td.headrow,
.js-calendar .calendar-head-row td {
  background: transparent;
  color: var(--sw-text);
}

.js-calendar .title { font-family: var(--sw-serif); }

.js-calendar .nav a,
.js-calendar .js-btn.btn-prev-month,
.js-calendar .js-btn.btn-next-month,
.js-calendar .js-btn.btn-prev-year,
.js-calendar .js-btn.btn-next-year {
  color: var(--sw-muted) !important;
}

.js-calendar .nav:hover a { color: var(--sw-accent-light) !important; }

.js-calendar .daynames td,
.js-calendar .day-name {
  color: var(--sw-muted);
  font-size: .8rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sw-line);
}

.js-calendar .calendar-container table thead td.weekend,
.js-calendar .calendar-container table tbody td.weekend { color: var(--sw-accent-light); }

.js-calendar tbody td.day { border-radius: 4px; }

.js-calendar .calendar-container table tbody td.day.othermonth,
.js-calendar .calendar-container table tbody td.day.disabled { color: var(--calendar-disabled-color); }

.js-calendar .calendar-container table tbody td.hilite,
.js-calendar .calendar-container table tbody td.day:hover {
  background: rgba(182, 0, 24, .35);
  color: #fff;
}

.js-calendar .calendar-container table tbody td.day.selected {
  background: var(--sw-accent);
  color: #fff;
}

.js-calendar .calendar-container table tbody td.today:after { background: var(--sw-accent-light); }
.js-calendar .calendar-container table tbody td.day.selected:after { background: #fff; }
.js-calendar tbody td.today { font-weight: 700; }

.js-calendar td.wn,
.js-calendar .day.wn { background: var(--calendar-week-bg); color: var(--sw-muted); }

.js-calendar .time td select {
  background-color: var(--calendar-select-bg-color);
  color: var(--calendar-select-color);
  border: 1px solid var(--sw-line);
  border-radius: 4px;
}

.js-calendar .buttons-wrapper {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--sw-line);
}

.js-calendar .buttons-wrapper .btn {
  flex: 1;
  border: 1px solid var(--sw-line) !important;
  border-radius: 999px !important;
  background: transparent;
  color: var(--sw-text);
  font-size: .85rem;
}

.js-calendar .buttons-wrapper .btn:hover,
.js-calendar .buttons-wrapper .btn-today {
  background: var(--sw-accent);
  border-color: var(--sw-accent) !important;
  color: #fff;
}

/* Systemmeldungen (Fehler, Erfolg, Hinweis – z. B. nach dem Absenden des Kontaktformulars).
   Cassiopeia zeigt sie als weiße Box mit farbigem Symbolstreifen links; hier dunkel. */
#system-message-container joomla-alert {
  --success: #2e9e5b;
  --info: #3a7bbf;
  --warning: #c98a12;
  --danger: var(--sw-accent);
  background-color: var(--sw-panel) !important;
  color: var(--sw-text);
  border-radius: 8px;
  overflow: hidden;
}

#system-message-container joomla-alert .alert-heading {
  font-size: 1.4rem;
  padding: .8rem 1rem;
}

#system-message-container joomla-alert .alert-message {
  color: var(--sw-text);
}

#system-message-container joomla-alert .alert-link,
#system-message-container joomla-alert a {
  color: var(--sw-accent-light);
}

#system-message-container joomla-alert .joomla-alert--close,
#system-message-container joomla-alert .joomla-alert-button--close {
  color: var(--sw-muted);
}

/* Datumsfeld: Eingabe und Kalender-Button als eine Einheit */
.field-calendar .input-group { flex-wrap: nowrap; }
.field-calendar .input-group > input { max-width: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.field-calendar .input-group > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--sw-accent);
  border-color: var(--sw-accent);
  color: #fff;
}
.field-calendar .input-group > .btn:hover { background: var(--sw-accent-light); border-color: var(--sw-accent-light); }


/* ----------------------------------------------------------------------------
   7. Inhaltsklassen der statischen Seite
   ------------------------------------------------------------------------- */
.section {
  background: rgba(21, 21, 25, .86);
  border: 1px solid var(--sw-line);
  border-radius: 14px;
  padding: 28px;
  margin: 0 0 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.lead {
  font-size: 1.1rem;
  color: #e6e6e6;
}

.note {
  color: var(--sw-muted);
  font-size: .95rem;
}

.grid {
  display: grid;
  gap: 22px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card .body {
  padding: 18px;
}

.card img,
.wide-img {
  display: block;
  width: 100%;
  height: auto;
}

.wide-img {
  border-radius: 12px;
}

.person img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Sponsoren und Social Media */
.sponsor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.sponsor img {
  max-height: 72px;
  padding: 4px;
  background: #fff;
  border-radius: 4px;
}

.social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Videos */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.video-card,
.guestbook-entry {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 16px;
}

.video-card h3 {
  margin-top: 0;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Audio */
.audio-card audio {
  display: block;
  width: 100%;
  margin: 8px 0 4px;
}

/* Gästebuch-Archiv */
.guestbook-archive {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.guestbook-entry {
  padding: 18px;
}

.guestbook-entry h3 {
  margin: 0 0 6px;
}

.guestbook-entry .meta {
  margin-bottom: 10px;
  font-size: .95rem;
  opacity: .78;
}

.archive-note {
  margin: 18px 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .05);
  border-left: 4px solid currentColor;
  border-radius: 8px;
}

/* Galerie (Raster; Lightbox folgt mit user.js) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.gallery a {
  display: block;
  background: #111;
  border: 1px solid var(--sw-line);
  border-radius: 10px;
  overflow: hidden;
}

.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .2s;
}

.gallery img:hover {
  transform: scale(1.03);
}


/* ----------------------------------------------------------------------------
   8. Bandseite
   Menüpunkt "Band": Seitenklasse "band", Blog mit 3 Spalten (Reihenfolge "Quer"),
   Einleitungsbild je Musiker. Entspricht .card.person der statischen Seite.
   ------------------------------------------------------------------------- */

/* Kopf eines Kategorie-Blogs (Band, Songs, ...): Kategorietitel und
   Kategoriebeschreibung bilden zusammen einen Kasten wie .section mit h2 und .lead.
   Im Menüpunkt: Reiter "Kategorie" → Kategorietitel und Kategoriebeschreibung anzeigen. */
.com-content-category-blog > .category-desc {
  margin: 0 0 24px;
  padding: 28px;
  background: rgba(21, 21, 25, .86);
  border: 1px solid var(--sw-line);
  border-radius: 14px;
  font-size: 1.1rem;
  color: #e6e6e6;
}

.com-content-category-blog > .category-desc > :last-child {
  margin-bottom: 0;
}

/* Kategorietitel: oberer Teil des Kastens (h1, oder h2 wenn die Seitenüberschrift an ist) */
.com-content-category-blog > h1,
.com-content-category-blog > h2 {
  margin: 0;
  padding: 28px 28px 0;
  background: rgba(21, 21, 25, .86);
  border: 1px solid var(--sw-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  font-size: clamp(26px, 4vw, 42px);
}

.com-content-category-blog > h1 + .category-desc,
.com-content-category-blog > h2 + .category-desc {
  padding-top: 18px;
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

.band .blog-items {
  gap: 22px;
}

.band .blog-items > .blog-item {
  padding: 0;
  background: var(--sw-panel-dark);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

.band .blog-item .item-image {
  float: none;
  margin: 0;
}

.band .blog-item .item-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}

.band .blog-item .item-content {
  padding: 18px;
}

.band .blog-item .page-header h2,
.band .blog-item .item-title {
  margin: 0 0 10px;
  font-size: 1.35rem;
}

.band .blog-item .item-content p {
  margin: 0 0 .5rem;
}


/* Detailseite eines Musikers: Foto rechts neben dem Text */
.band .com-content-article .item-image {
  float: right;
  width: min(40%, 320px);
  margin: 0 0 20px 28px;
}

/* Im Beitrag "Links" gewählt: Foto links, Abstand rechts */
.band .com-content-article .item-image.left {
  float: left;
  margin: 0 28px 20px 0;
}

.band .com-content-article .item-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
}

/* Float sauber beenden, damit das Panel das Foto umschließt */
.band .com-content-article::after {
  content: "";
  display: block;
  clear: both;
}


/* ----------------------------------------------------------------------------
   9. Termine / Tourseite (Modul „Steppenwolf – Termine“, mod_steppenwolf_termine)
   Karten: Datum | Programm | Ort.
   Vergangene Termine gedämpft in einem aufklappbaren Bereich.
   Funktioniert auf jeder Seite (Tour, Startseite …), nicht nur mit Seitenklasse „tour“.
   ------------------------------------------------------------------------- */
/* Kurzliste im Blog nach dem ersten Beitrag (Override com_content/category/blog.php,
   Position „after-first-post“): auch bei mehrspaltigem Blog über die volle Breite */
.sw-after-first-post {
  grid-column: 1 / -1;
}

.main-bottom:has(.sw-termine),
.main-top:has(.sw-termine),
.sw-after-first-post .card:has(.sw-termine) {
  background: var(--sw-panel);
  border-color: var(--sw-line);
  border-radius: 14px;
}

.sw-termine-liste {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-termin {
  display: grid;
  grid-template-columns: 170px minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  background: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 10px;
}

.sw-termin > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Spalte 1: Datum fett, Wochentag und Uhrzeit gedämpft */
.sw-termin-datum time {
  color: #fff;
  font-weight: 700;
}

.sw-termin-datum span,
.sw-termin-programm span,
.sw-termin-ort span {
  color: var(--sw-muted);
}

/* Spalte 2: Programm, darunter der Untertitel */
.sw-termin-programm strong,
.sw-termin-ort strong {
  color: var(--sw-text);
}

.sw-termin-text {
  margin-top: 6px;
  color: var(--sw-text);
  font-size: .95rem;
}

.sw-termin-text p {
  margin: 0;
}

/* Spalte 3: Ort; Info hervorgehoben, Link als kleiner Button */
.sw-termin-ort .sw-termin-info {
  margin-top: 4px;
  color: var(--sw-accent-light);
  font-size: .92rem;
}

.sw-termin-link {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 12px;
  border: 1px solid var(--sw-accent);
  border-radius: 999px;
  color: var(--sw-text);
  font-size: .85rem;
  text-decoration: none;
}

.sw-termin-link:hover,
.sw-termin-link:focus-visible {
  background: var(--sw-accent);
  color: #fff;
}

.sw-termine-leer {
  margin: 0;
  color: var(--sw-muted);
}

.sw-termine-alle {
  margin: 16px 0 0;
}

/* Vergangene Termine: Aufklapper als Pill-Button, Karten gedämpft */
.sw-termine-archiv {
  margin-top: 24px;
}

.sw-termine-archiv > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--sw-line);
  border-radius: 999px;
  color: var(--sw-muted);
  cursor: pointer;
  list-style: none;
}

.sw-termine-archiv > summary::-webkit-details-marker {
  display: none;
}

.sw-termine-archiv > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s;
}

.sw-termine-archiv[open] > summary::before {
  transform: rotate(45deg);
}

.sw-termine-archiv > summary:hover,
.sw-termine-archiv > summary:focus-visible {
  border-color: var(--sw-accent);
  color: var(--sw-text);
}

.sw-termine-archiv .sw-termine-liste {
  margin-top: 14px;
}

.sw-termine-liste.is-vergangen .sw-termin {
  background: transparent;
  opacity: .72;
}

.sw-termine-liste.is-vergangen .sw-termin-datum time {
  color: var(--sw-muted);
}

/* Schmale Bildschirme: Datum oben, Programm und Ort untereinander */
@media (max-width: 767.98px) {
  .sw-termin {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sw-termin-datum {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px 10px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sw-line);
  }
}


/* ----------------------------------------------------------------------------
   10. Songseite
   Menüpunkt "Songs": Seitenklasse "songs", Blog mit 2 Spalten (Reihenfolge "Quer").
   Im CMS steckt der Player in einem <pre> mit vielen Leerzeilen – die werden
   hier neutralisiert. Den Download-Link je Song ergänzt user.js.
   Entspricht .card.audio-card der statischen Seite.
   ------------------------------------------------------------------------- */
/* Wie im Original: Überschrift, Einleitung und alle Karten
   stecken gemeinsam in EINEM gerahmten Kasten (.section) – Songs und Videos */
.songs .com-content-category-blog,
.videos .com-content-category-blog {
  margin: 0 0 24px;
  padding: 28px;
  background: rgba(21, 21, 25, .86);
  border: 1px solid var(--sw-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

/* Titel und Beschreibung hier ohne eigenen Kasten */
.songs .com-content-category-blog > h1,
.songs .com-content-category-blog > h2,
.songs .com-content-category-blog > .category-desc,
.videos .com-content-category-blog > h1,
.videos .com-content-category-blog > h2,
.videos .com-content-category-blog > .category-desc {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.songs .com-content-category-blog > h1,
.songs .com-content-category-blog > h2,
.videos .com-content-category-blog > h1,
.videos .com-content-category-blog > h2 {
  margin: 0 0 18px;
}

.songs .com-content-category-blog > .category-desc,
.videos .com-content-category-blog > .category-desc {
  margin: 0 0 22px;
}

/* Audio-Karten wie .card: dunkler als der Kasten, eigener Rahmen */
.songs .blog-items {
  gap: 22px;
  margin: 0;
}

.songs .blog-items > .blog-item {
  padding: 18px;
  background: var(--sw-panel-dark);
  border-radius: 12px;
  box-shadow: none;
}

.songs .blog-item .page-header h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}

/* <pre> aus dem Editor: Leerzeilen und Monospace-Optik entfernen */
.songs .item-content pre {
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}

.songs .item-content audio {
  display: block;
  width: 100% !important;
  margin: 8px 0 4px;
}

.songs .item-content p {
  margin: .35rem 0 0;
  color: var(--sw-muted);
  font-size: .95rem;
}

.songs .item-content .note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.songs .item-content .note a:hover {
  color: var(--sw-accent-light);
}


/* ----------------------------------------------------------------------------
   11. Videoseite
   Menüpunkt "Videos": Seitenklasse "videos".
   Raster mit 2 Spalten (mobil 1) – fest hier im CSS, unabhängig von der
   Spalteneinstellung im Menüpunkt. Andere Anzahl: Wert bei repeat() ändern.
   Karten wie .video-card der statischen Seite.
   Die YouTube-iframes aus dem CMS (feste 560×315) werden responsiv in 16:9.
   Zwischenüberschriften im Beitrag (h3/h5) erscheinen als Untertitel.
   Den Link "Video direkt auf YouTube öffnen" ergänzt user.js.
   Zwei-Klick: Das Plugin "Steppenwolf YouTube Zwei-Klick" ersetzt die
   iframes durch .sw-yt-Platzhalter; erst der Klick lädt das Video.
   ------------------------------------------------------------------------- */
.videos .blog-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

/* führende und Einleitungsbeiträge, falls beides vorhanden, mit Abstand */
.videos .blog-items + .blog-items {
  margin-top: 24px;
}

.videos .blog-items > .blog-item {
  width: auto;
  max-width: none;
  padding: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: none;
}

.videos .blog-item .page-header h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
}

/* Untertitel aus dem Beitragstext */
.videos .item-content h3,
.videos .item-content h4,
.videos .item-content h5 {
  margin: 0 0 .75rem;
  color: var(--sw-muted);
  font-size: .95rem;
  font-weight: 400;
}

.videos .item-content p {
  margin: 0 0 .5rem;
}

/* YouTube-Platzhalter (Zwei-Klick-Plugin), gilt auf allen Seiten.
   Breite wie das ursprüngliche iframe (--sw-yt-w), höchstens Spaltenbreite.
   Vorschaubild (--sw-yt-bild) kommt lokal aus /images/yt-vorschau/, abgedunkelt
   für den lesbaren Hinweis; ohne Bild ein dunkler Verlauf. */
.sw-yt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  max-width: var(--sw-yt-w, 100%);
  aspect-ratio: 16 / 9;
  padding: 1rem;
  color: var(--sw-text);
  text-align: center;
  background-color: #000;
  background-image:
    linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .65)),
    var(--sw-yt-bild, radial-gradient(circle at 50% 40%, #2a0a10 0, #000 70%));
  background-position: center;
  background-size: cover;
  border: 1px solid var(--sw-line);
  border-radius: 8px;
}

.sw-yt-play {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1.3rem;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--sw-accent);
  border: 0;
  border-radius: 999px;
  transition: transform .15s ease, background-color .15s ease;
}

.sw-yt-play:hover,
.sw-yt-play:focus-visible {
  background: #d4001c;
  transform: scale(1.05);
}

.sw-yt-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Play-Dreieck */
.sw-yt-icon {
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
  border-inline-start: 12px solid currentColor;
}

.sw-yt-hint {
  max-width: 30rem;
  color: #ddd;
  text-shadow: 0 1px 3px #000;
  font-size: .8rem;
  line-height: 1.4;
}

.sw-yt-hint a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sw-yt-hint a:hover {
  color: var(--sw-accent-light);
}

/* YouTube-Player und Platzhalter: volle Kartenbreite, 16:9, wie .video-frame */
.videos .item-content .sw-yt {
  max-width: none;
}

.videos .item-content iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  border-radius: 8px;
}

.videos .item-content .note {
  margin: .75rem 0 0;
  color: var(--sw-muted);
  font-size: .95rem;
}

.videos .item-content .note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.videos .item-content .note a:hover {
  color: var(--sw-accent-light);
}


/* ----------------------------------------------------------------------------
   12. Bilderseite (JoomGallery 4)
   Gilt für alle JoomGallery-Seiten (Body-Klasse "com_joomgallery" setzt Cassiopeia
   selbst): Galerie-Übersicht, Kategorieseiten, Bildansicht.
   Optik wie die Galerie der statischen Seite: ein gerahmter Kasten, darin
   dunkle Kacheln mit Bild im Format 4:3 und Bildunterschrift.
   Spaltenzahl, Lightbox und Buttons werden in der JoomGallery-Konfiguration
   eingestellt (Raster-Typ "Spalten", nicht "Masonry" oder "Justified").
   ------------------------------------------------------------------------- */

/* Gerahmter Kasten um die gesamte Galerie (wie .section) */
.com_joomgallery .container-component main {
  margin: 0 0 24px;
  padding: 28px;
  background: rgba(21, 21, 25, .86);
  border: 1px solid var(--sw-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.com_joomgallery main > h2 {
  margin: 0 0 18px;
}

/* Zwischenüberschriften ("Unterkategorien", "Bilder") wie .gallery-group h3 */
.com_joomgallery main h3 {
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sw-line);
}

.com_joomgallery .jg-gallery {
  margin: 0 0 8px;
}

/* Buttons ("Zurück zur übergeordneten Kategorie", "Bilder durchsuchen") als Pillen
   wie die Kategorie-Sprungleiste .gallery-index */
.com_joomgallery .jg-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
}

.com_joomgallery .jg-button-container .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 999px;
  color: #fff;
  font-size: .92rem;
}

.com_joomgallery .jg-button-container .btn:hover,
.com_joomgallery .jg-button-container .btn:focus {
  background: var(--sw-accent);
  border-color: var(--sw-accent);
  color: #fff;
}

/* Raster: etwas engere Abstände als JoomGallery-Standard (2em) */
.com_joomgallery .jg-images[class*=" columns-"],
.com_joomgallery .jg-images[class*=" masonry-"] {
  gap: 14px;
}

/* Kachel */
.com_joomgallery .jg-image {
  background: #111;
  border: 1px solid var(--sw-line);
  border-radius: 10px;
  overflow: hidden;
}

/* Bild im Format 4:3, randlos beschnitten statt eingepasst */
.com_joomgallery .jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > a,
.com_joomgallery .jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > .jg-image-caption-hover > a {
  padding-bottom: 75%;
  background: #121216;
}

.com_joomgallery .jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > a > img,
.com_joomgallery .jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > .jg-image-caption-hover > a > img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transition: transform .22s ease, filter .22s ease;
}

.com_joomgallery .jg-image a:hover img {
  transform: translateX(-50%) translateY(-50%) scale(1.035);
  filter: brightness(1.08);
}

/* Masonry-Variante: kein Verschieben, nur leichtes Aufhellen */
.com_joomgallery .jg-images[class*=" masonry-"] .jg-image a:hover img {
  transform: none;
}

/* Bildunterschrift wie .gallery-item span */
.com_joomgallery .jg-image > .jg-image-caption {
  padding: 9px 10px;
  color: var(--sw-muted);
  font-size: .86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.com_joomgallery .jg-image > .jg-image-caption a {
  color: var(--sw-text);
  text-decoration: none;
}

.com_joomgallery .jg-image > .jg-image-caption a:hover {
  color: var(--sw-accent-light);
}

/* Leere Bildunterschrift (Titel ausgeblendet) nicht als leeren Balken zeigen */
.com_joomgallery .jg-image > .jg-image-caption:not(:has(a, span, p)) {
  display: none;
}

/* ---- "Alle Bilder": Suchleiste und Filter ---- */
.com_joomgallery .jg-searchform {
  margin: 0 0 24px;
}

/* JoomGallery begrenzt Suchleiste und Filter auf 80 % und zentriert – volle Breite */
.com_joomgallery .jg-searchform .input-group,
.com_joomgallery .jg-searchform .filter-input {
  width: 100%;
}

.com_joomgallery .jg-searchform .input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

/* Suchfeld nimmt den freien Platz ein */
.com_joomgallery .jg-searchform .awesomplete {
  flex: 1 1 260px;
  min-width: 0;
}

/* Handy: Suchfeld über die volle Breite, Buttons darunter */
@media (max-width: 575.98px) {
  .com_joomgallery .jg-searchform .awesomplete {
    flex-basis: 100%;
  }

  .com_joomgallery .jg-searchform .btn {
    flex: 1 1 auto;
  }
}

.com_joomgallery .jg-searchform .awesomplete input,
.com_joomgallery .jg-searchform .form-select {
  width: 100%;
  max-width: none; /* Cassiopeia begrenzt Suchfelder sonst auf 200px */
  min-height: 44px;
  padding: 10px 12px;
  background-color: #0b0b0d;
  border: 1px solid var(--sw-line);
  border-radius: 7px;
  color: var(--sw-text);
}

.com_joomgallery .jg-searchform .awesomplete input::placeholder {
  color: var(--sw-muted);
}

.com_joomgallery .jg-searchform .awesomplete input:focus,
.com_joomgallery .jg-searchform .form-select:focus {
  border-color: var(--sw-accent);
  box-shadow: 0 0 0 .2rem rgba(182, 0, 24, .35);
  outline: 0;
}

/* Vorschlagsliste der Suche */
.com_joomgallery .jg-searchform .awesomplete > ul {
  background: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 7px;
  color: var(--sw-text);
}

.com_joomgallery .jg-searchform .awesomplete > ul > li[aria-selected="true"],
.com_joomgallery .jg-searchform .awesomplete > ul > li:hover {
  background: var(--sw-accent);
  color: #fff;
}

/* Buttons: "Suchen" rot, "Filter" und "Zurücksetzen" als dunkle Buttons */
.com_joomgallery .jg-searchform .btn {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 7px !important;
}

.com_joomgallery .jg-searchform .btn-outline-primary {
  background: #292933;
  border: 1px solid #292933;
  color: #fff;
}

.com_joomgallery .jg-searchform .btn-outline-primary:hover,
.com_joomgallery .jg-searchform .btn-outline-primary:focus,
.com_joomgallery .jg-searchform .btn-outline-primary[aria-expanded="true"] {
  background: #3a3a46;
  border-color: #3a3a46;
  color: #fff;
}

/* Filterbereich.
   overflow: visible – die allgemeine .card-Regel (Abschnitt 6) schneidet sonst
   die Aufklapplisten der Auswahlfelder ab. */
.com_joomgallery .jg-searchform .filter-input .card {
  overflow: visible;
  margin-top: 12px;
  padding: 16px;
  background: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 10px;
}

.com_joomgallery .jg-searchform .filter-input h5 {
  margin: 0 0 12px;
  color: var(--sw-muted);
  font-size: .95rem;
  font-weight: 400;
}

.com_joomgallery .jg-searchform .js-stools-field-filter {
  margin: 0;
}

.com_joomgallery .jg-searchform .filter-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* Filter nach Besitzer ausblenden: zeigt sonst Benutzernamen öffentlich an */
.com_joomgallery .jg-searchform .js-stools-field-filter:has(#filter_created_by) {
  display: none;
}

/* Auswahlfelder (choices.js) im dunklen Stil */
.com_joomgallery .jg-searchform .choices {
  margin: 0;
}

.com_joomgallery .jg-searchform .choices__inner {
  min-height: 44px;
  padding: 6px 8px;
  background: #0b0b0d;
  border: 1px solid var(--sw-line);
  border-radius: 7px;
  color: var(--sw-text);
}

.com_joomgallery .jg-searchform .choices.is-focused .choices__inner,
.com_joomgallery .jg-searchform .choices.is-open .choices__inner {
  border-color: var(--sw-accent);
}

.com_joomgallery .jg-searchform .choices__input {
  min-height: 0;
  margin: 0;
  padding: 4px;
  background: transparent;
  border: 0;
  color: var(--sw-text);
}

/* Aufklappliste über den folgenden Bildkacheln */
.com_joomgallery .jg-searchform .choices.is-open {
  z-index: 20;
}

.com_joomgallery .jg-searchform .choices__list--dropdown {
  z-index: 20;
}

/* Aufklappliste nur zeigen, wenn das Feld offen ist */
.com_joomgallery .jg-searchform .choices__list--dropdown:not(.is-active) {
  display: none;
}

.com_joomgallery .jg-searchform .choices__input::placeholder {
  color: var(--sw-muted);
}

.com_joomgallery .jg-searchform .choices__list--dropdown,
.com_joomgallery .jg-searchform .choices__list[aria-expanded] {
  background: var(--sw-panel-dark);
  border-color: var(--sw-line);
  color: var(--sw-text);
}

.com_joomgallery .jg-searchform .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--sw-accent);
  color: #fff;
}

.com_joomgallery .jg-searchform .choices__list--multiple .choices__item {
  background: var(--sw-accent);
  border-color: var(--sw-accent);
  border-radius: 999px;
}

/* Seitennavigation / "Mehr laden" der Galerie */
.com_joomgallery .pagination .page-link,
.com_joomgallery .jg-loadmore .btn {
  background: var(--sw-panel-dark);
  border-color: var(--sw-line);
  color: #fff;
}


/* ----------------------------------------------------------------------------
   13. Kontaktseite
   Menüpunkt "Kontakt": Seitenklasse "kontakt", Typ Kontakte → Einzelner Kontakt.
   Infobox: Modul "Eigenes Modul" auf Position main-top.
   Formular: Joomla-Kontaktformular inkl. eigener Felder (Kontext "Mail"),
   zweispaltig wie .form-grid der statischen Seite.
   Im Kontakt (Reiter Anzeige) "Name" verbergen – sonst steht der Name doppelt.
   ------------------------------------------------------------------------- */

/* Infobox (main-top) und Formular als zwei Kästen wie .section */
.kontakt .container-component > .main-top,
.kontakt .com-contact {
  margin: 0 0 24px;
  padding: 28px;
  background: rgba(21, 21, 25, .86);
  border: 1px solid var(--sw-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  color: var(--sw-text);
  overflow: visible;
}

.kontakt .main-top > .card-body {
  padding: 0;
}

.kontakt .main-top h2 {
  margin: 0 0 12px;
}

.kontakt .main-top h4 {
  margin: 18px 0 0;
  font-size: 1.15rem;
}

/* Sprach-Override COM_CONTACT_DETAILS verbergen  */
.com-contact__container > h2:first-child { display: none; }

/* Liste mit Häkchen in Akzentfarbe */
.kontakt .main-top ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.kontakt .main-top ul li {
  position: relative;
  padding: 3px 0 3px 26px;
}

.kontakt .main-top ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .6em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--sw-accent-light);
  border-bottom: 2px solid var(--sw-accent-light);
  transform: rotate(-45deg);
}

.kontakt .main-top a {
  text-decoration: underline;
}

/* "Bearbeiten"-Link (nur für Redakteure) oben rechts in die Ecke,
   damit er als Float das Formular-Raster nicht schmaler macht */
.kontakt .com-contact {
  position: relative;
}

.kontakt .com-contact > .icons {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: .8rem;
  opacity: .6;
}

.kontakt .com-contact > .icons .float-end {
  float: none !important;
}

/* Überschrift "Kontaktformular" des Kerns ausblenden (Infobox ist die Überschrift) */
.kontakt .com-contact > h2:has(+ .com-contact__form),
.kontakt .com-contact > h3:has(+ .com-contact__form) {
  display: none;
}

/* Fieldset-Legenden ("Eine E-Mail senden", "Felder") nur für Screenreader */
.kontakt .contact-form legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Formular-Raster: zwei Spalten über das GANZE Formular.
   Joomla gibt Standardfelder und Zusatzfelder in zwei getrennten Fieldsets aus.
   display: contents löst die Fieldsets auf, damit alle Felder im selben Raster
   liegen und per "order" frei gemischt werden können (Reihenfolge siehe unten). */
.kontakt .contact-form #contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.kontakt .contact-form #contact-form > fieldset.m-0 {
  display: contents;
}

/* Reihenfolge wie im Booking-Formular der statischen Seite.
   Zusatzfelder werden über den Anfang ihrer ID erkannt (jform_com_fields_<feldname>),
   der Feldname entsteht aus dem Titel des Feldes (z. B. "Agentur, Firma" → agentur-firma).
   Unbekannte Felder landen vor Kopie/Datenschutz (order 45). */
.kontakt .contact-form .control-group                                                  { order: 45; }
.kontakt .contact-form .field-spacer                                                   { order: 0; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_buchungsanfrage"])   { order: 5; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_agentur"])           { order: 10; }
.kontakt .contact-form .control-group:has(#jform_contact_name)                        { order: 11; }
.kontakt .contact-form .control-group:has(#jform_contact_emailmsg)                    { order: 12; }
.kontakt .contact-form .control-group:has(#jform_contact_message)                     { order: 13; }
.kontakt .contact-form .control-group:has(#jform_contact_email)                       { order: 20; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_telefon"])           { order: 21; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_veranstaltungsdatum"]) { order: 30; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_uhrzeit"])           { order: 31; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_dauer"])             { order: 32; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_location"])          { order: 40; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_anschrift"])         { order: 41; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_plz"])               { order: 42; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_webseite"])          { order: 43; }
.kontakt .contact-form .control-group:has(#jform_contact_email_copy)                  { order: 50; }
.kontakt .contact-form .control-group:has([id^="jform_com_fields_datenschutz"])       { order: 51; }
.kontakt .contact-form .control-group:has(altcha-widget)                             { order: 55; }
.kontakt .contact-form .control-group:has(button[type="submit"])                      { order: 60; }

/* Feld: Beschriftung über dem Eingabefeld (statt links daneben) */
.kontakt .contact-form .control-group {
  display: grid;
  gap: 6px;
  margin: 0;
}

.kontakt .contact-form .control-label {
  width: auto;
  padding: 0;
  text-align: left;
}

.kontakt .contact-form .control-label label {
  color: var(--sw-muted);
}

.kontakt .contact-form .controls {
  margin: 0;
}

.kontakt .contact-form .star,
.kontakt .contact-form .red {
  color: var(--sw-accent-light);
}

/* Über die volle Breite: Hinweis, Betreff, Nachricht, Location, Auswahlen, Checkboxen, Button */
.kontakt .contact-form .control-group:has([id^="jform_com_fields_location"]),
.kontakt .contact-form .field-spacer,
.kontakt .contact-form .control-group:has(textarea),
.kontakt .contact-form .control-group:has(#jform_contact_emailmsg),
.kontakt .contact-form .control-group:has(.btn-group),
.kontakt .contact-form .control-group:has(.form-check),
.kontakt .contact-form .control-group:has(altcha-widget),
.kontakt .contact-form .control-group:has(button[type="submit"]) {
  grid-column: 1 / -1;
}

/* Captcha „Proof of Work“ (ALTCHA-Widget aus dem Joomla-Kern) im dunklen Stil */
altcha-widget {
  --altcha-color-base: #0b0b0d;
  --altcha-color-text: var(--sw-text);
  --altcha-color-border: var(--sw-line);
  --altcha-color-border-focus: var(--sw-accent);
  --altcha-color-active: var(--sw-accent-light);
  --altcha-color-error-text: var(--sw-accent-light);
  --altcha-color-footer-bg: var(--sw-panel-dark);
  --altcha-border-radius: 6px;
  --altcha-max-width: 320px;
  display: block;
  color-scheme: dark;              /* native Checkbox dunkel */
  accent-color: var(--sw-accent);
}

/* Die Beschriftung „Captcha“ links ist überflüssig, das Widget beschriftet sich selbst */
.kontakt .contact-form .control-group:has(altcha-widget) .control-label { display: none; }

.kontakt .contact-form .field-spacer .control-label label {
  font-size: .9rem;
}

.kontakt .contact-form .form-control {
  width: 100%;
  max-width: none;
  padding: 11px 12px;
}

.kontakt .contact-form textarea.form-control {
  min-height: 160px;
}

/* Kopie-Checkbox und Datenschutz: Häkchen und Text nebeneinander */
.kontakt .contact-form .control-group:has(.form-check) {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.kontakt .contact-form .control-group:has(.form-check) .controls {
  grid-row: 1;
  grid-column: 1;
}

.kontakt .contact-form .control-group:has(.form-check) .control-label {
  grid-row: 1;
  grid-column: 2;
}

.kontakt .contact-form .controls > fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.kontakt .contact-form .form-check {
  margin: 0;
}

.kontakt .contact-form .form-check-input {
  width: 1.2em;
  height: 1.2em;
  background-color: #0b0b0d;
  border-color: var(--sw-line);
}

.kontakt .contact-form .form-check-input:checked {
  background-color: var(--sw-accent);
  border-color: var(--sw-accent);
}

/* Beim Datenschutz-Feld steht die Checkbox-Beschriftung schon in der Feldbeschriftung */
.kontakt .contact-form #jform_com_fields_datenschutz .form-check-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Auswahl-Buttons (Radio "Buchungsanfrage") als Pillen */
.kontakt .contact-form .btn-group.radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kontakt .contact-form .btn-group.radio > .btn {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 14px;
  background: var(--sw-panel-dark);
  border: 1px solid var(--sw-line);
  border-radius: 999px !important;
  color: var(--sw-text);
}

.kontakt .contact-form .btn-group.radio > .btn:hover {
  border-color: var(--sw-accent-light);
}

.kontakt .contact-form .btn-check:checked + .btn {
  background: var(--sw-accent);
  border-color: var(--sw-accent);
  color: #fff;
}

.kontakt .contact-form .btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 .2rem rgba(182, 0, 24, .35);
}

/* Absende-Button wie .button */
.kontakt .contact-form button[type="submit"] {
  padding: 11px 20px;
}


/* ----------------------------------------------------------------------------
   14. Tabaluga
   Menüpunkt "Tabaluga": Typ Einzelner Beitrag, Seitenklasse "tabaluga".
   Bild als "Komplettes Beitragsbild" im Beitrag (Ausrichtung leer lassen).
   Wie .section.grid.two der statischen Seite: Bild links, Titel und Text rechts.
   ------------------------------------------------------------------------- */
.tabaluga .com-content-article:has(> .item-image) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  align-items: start;
}

/* Alles außer dem Bild in die rechte Spalte */
.tabaluga .com-content-article:has(> .item-image) > * {
  grid-column: 2;
}

.tabaluga .com-content-article > .item-image {
  grid-column: 1;
  grid-row: 1 / span 20;
  float: none;
  width: auto;
  margin: 0;
}

.tabaluga .com-content-article > .item-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Erster Absatz als Einleitung ("Live in Concert"), wie .lead */
.tabaluga .com-content-article__body > p:first-child {
  font-size: 1.1rem;
  color: #e6e6e6;
}


/* ----------------------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1050px) {
  .home-hero {
    /* Bild etwas nach links schieben, damit der Gitarrenhals nicht unter das Logo läuft */
    background-position: -8vw center;
  }

  .home-hero-copy {
    left: auto;
    right: 5vw;
    width: 34vw;
  }
}

/* Mobiles Menü (Cassiopeia klappt unter 992px auf) */
@media (max-width: 991.98px) {
  .container-header .metismenu.mod-menu .mm-collapse {
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 16px;
  }

  .container-header .metismenu.mod-menu .metismenu-item > a,
  .container-header .metismenu.mod-menu .metismenu-item > .mm-toggler-nolink {
    padding: 9px 0;
  }

  .container-header .metismenu.mod-menu .metismenu-item > a:hover,
  .container-header .metismenu.mod-menu .metismenu-item.active > a {
    background: transparent;
    color: var(--sw-accent-light);
  }
}

@media (max-width: 850px) {
  .tabaluga .com-content-article:has(> .item-image) {
    grid-template-columns: 1fr;
  }

  .tabaluga .com-content-article:has(> .item-image) > *,
  .tabaluga .com-content-article > .item-image {
    grid-column: 1;
    grid-row: auto;
  }

  .tabaluga .com-content-article > .item-image {
    margin-bottom: 18px;
  }

  .kontakt .contact-form #contact-form {
    grid-template-columns: 1fr;
  }

  .kontakt .container-component > .main-top,
  .kontakt .com-contact {
    padding: 18px;
  }

  .songs .blog-items,
  .videos .blog-items {
    grid-template-columns: 1fr;
  }

  .band .blog-items {
    grid-template-columns: 1fr;
  }

  /* Detailseite mobil: Foto über dem Text in voller Breite */
  .band .com-content-article .item-image,
  .band .com-content-article .item-image.left,
  .item-image.left,
  .item-image.right,
  .item-image.float-start,
  .item-image.float-end {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 18px;
  }

  .container-header .brand-logo img {
    height: 48px;
  }

  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

  .com-content-article,
  .blog-items > .blog-item,
  .section {
    padding: 18px;
  }

  /* Hero mobil: Bild oben, Text unten auf Schwarz */
  .home-hero {
    min-height: 650px;
    background-attachment: scroll;
    /* Ausschnitt von Kopf bis Gitarrenkopf über die volle Breite, Gitarrenkorpus links angeschnitten */
    background-size: 241vw auto;
    background-position: -27vw top;
  }

  .home-hero::after {
    height: 48svh;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .38) 28%, rgba(0, 0, 0, .94) 76%, #000 100%);
  }

  .home-hero-copy {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 82px;
    width: min(88vw, 340px);
    transform: translateX(-50%);
  }

  .home-hero-copy h1 {
    margin-bottom: 10px;
    font-size: clamp(24px, 7vw, 32px);
  }

  .home-hero-copy p {
    margin-bottom: 10px;
    font-size: clamp(10px, 3.2vw, 13px);
  }

  .home-hero-logo {
    width: min(72vw, 260px);
    margin-bottom: 12px;
  }

  .home-hero-social {
    gap: 18px;
  }

  .home-hero-social img {
    width: 20px;
    height: 20px;
  }

  .home-scroll-arrow {
    top: auto;
    bottom: 34px;
    width: 28px;
    height: 28px;
  }
}

/* Tablet hochkant: Motiv kleiner, ganz sichtbar und mittig über dem Text */
@media (min-width: 600px) and (max-width: 991.98px) {
  .home-hero {
    background-size: 160vw auto;
    background-position: -1vw top;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .home-scroll-arrow {
    animation: none;
  }
}