/*!
 * style.css — Spatzabrettle
 * Basis-Styles: Variablen, Typografie, Navigation, Site-Header, globale Komponenten.
 * Responsive Overrides → responsive.css
 */

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  --c-primary: #e31e24;
  --c-primary-dark: #b81219;
  --c-dark: #141414;
  --c-text: #1f1f1f;
  --c-text-muted: #4a4a4a;
  --c-text-light: #6e6e6e;
  --c-border: #eeeeee;
  --c-bg: #fff;
  --font: "Open Sans", Verdana, sans-serif;
  --ls-caps: 0.1em;
  --br-ui: 2px;
  --topbar-h: 0px;

  /* ── Spacing System (8px-Grid, Rhythmuseinheit = 1.5rem = 24px) ────────── */
  --lh: 1.5rem; /* 24px – 1× line-height (Basis-Rhythmus)     */
  --space-xs: 0.5rem; /*  8px – Micro-Gaps, inline-Abstände          */
  --space-s: 1rem; /* 16px – enge Abstände, Labels                */
  --space-m: 1.5rem; /* 24px – Standard-Absatz  │ 1× LH            */
  --space-l: 3rem; /* 48px – sektionsinterne Trennungen │ 2× LH  */
  --space-xl: 4.5rem; /* 72px – Sektionstrennungen │ 3× LH          */
  --space-2xl: 6rem; /* 96px – Page-Level-Trennungen │ 4× LH       */

  --container-pad-x: var(--space-l); /* 48px seitlich   */
  --container-pad-y: var(--space-xl); /* 72px oben/unten */
  --section-gap: var(--space-2xl); /* 96px zwischen Sections */

  /* ── Page Spacing System — Mobile-First, 8px Grid ───────────────────── */
  /* Basiswerte gelten für Mobile (< 768px); ≥ 768px überschreibt responsive.css */
  --pg-banner-pad-v: 1rem; /*  16px  Banner innen oben/unten        */
  --pg-banner-pad-h: 1.25rem; /*  20px  Banner innen links/rechts      */
  --pg-content-top: 1.25rem; /*  20px  Banner-Ende → erster Inhalt    */
  --pg-btn-top: 1.5rem; /*  24px  Abstand vor Button             */
  --pg-btn-bottom: 1.25rem; /*  20px  Abstand nach Button            */
  --pg-h2-top: 2rem; /*  32px  Abstand vor H2/section-heading */
  --pg-h2-bottom: 0.5rem; /*   8px  H2 → Text (Proximity: ~4:1)   */
  --pg-p-gap: 1rem; /*  16px  Abstand zwischen Absätzen      */

  /* ── Lesbarkeit: Textbreiten-Limits ─────────────────────────────────── */
  --text-width: 65ch; /* Optimale Lesbreite (1 Textspalte)         */
  --text-width-wide: 72ch; /* Breitere Textspalte (Formulare, Intros)   */
}

/* ── Typografie-Skala (Major Third ~1.333, Basis 16px) ───────────────────── */
/* h1 5.61rem · h2 4.209rem · h3 3.157rem · h4 2.369rem                      */
/* h5 1.777rem · h6 1.333rem · p 1rem · small 0.75rem                        */
/* ── Reset: Box-Sizing ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}
address {
  font-style: normal;
}
h1 {
  font-size: 5.61rem;
}
h2 {
  font-size: 4.209rem;
}
h3 {
  font-size: 3.157rem;
}
h4 {
  font-size: 2.369rem;
}
h5 {
  font-size: 1.777rem;
}
h6 {
  font-size: 1.333rem;
}
p {
  font-size: 1rem;
}
small {
  font-size: 0.75rem;
}
h1,
.page-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-bright);
  margin: 3rem 0;
}

.gradient-heading {
  font-size: 5.61rem;
} /* = h1 */
.hero-heading {
  font-size: 1.777rem;
} /* = h5 */
.kicker-badge,
.hero-kicker {
  font-size: 1.2rem;
} /* = small */

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL NORMALIZER — Single Source of Truth
   Löst: Alignment-Chaos · Heading-Inkonsistenz · Container-Breiten
         Button-Mutation · Vertical Rhythm
   Diese Regeln gelten GLOBAL. Kein Inline-Style darf sie überschreiben.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fluid Headings — unveränderlich, kein Breakpoint nötig ────────────── */
/* clamp(min, bevorzugt, max): skaliert automatisch zwischen Mobil und Desktop  */

h2,
.section-heading {
  font-size: clamp(1.125rem, 0.5rem + 2.5vw, 2.369rem);
  font-weight: 800;
  color: var(--c-dark);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: 0;
}

h3 {
  font-size: clamp(1rem, 0.5rem + 1.5vw, 1.777rem);
  font-weight: 700;
  color: var(--c-dark);
  line-height: 1.3;
  margin: 0;
}

.section-title {
  font-size: clamp(1.125rem, 0.5rem + 2.5vw, 2.369rem);
  font-weight: 800;
  color: var(--c-dark);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  line-height: 1.25;
  margin-top: var(--pg-h2-top);
  margin-bottom: var(--pg-h2-bottom);
}

/* Sub-Heading: rote Akzent-Labels (z. B. "MENSCHEN MIT BEHINDERUNGEN") */
.disability-heading {
  font-size: 0.875rem; /* 14px — bewusst klein, da Akzent-Label */
  font-weight: 700;
  color: var(--c-primary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-top: var(--pg-h2-top);
  margin-bottom: var(--pg-h2-bottom);
}

/* ── 2. Alignment — globale Zentrierung ──────────────────────────────────── */
p,
li {
  text-align: center;
}

/* Utility: .text-left für explizit linksbündige Ausnahmen                     */
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}

/* ── 3. Container ────────────────────────────────────────────────────────── */

/* .content-wrapper: DER universelle Inhalts-Container aller Unterseiten.
   Mobile: volle Breite mit sicherem Rand-Padding.
   Desktop: zentriert mit max-width 800px. → responsive.css @768px           */
.content-wrapper {
  width: 100%;
  padding: 0 1.5rem;
  margin: 0 auto;
  box-sizing: border-box;
}
.content-wrapper h2,
.content-wrapper h3 {
  text-align: center;
}

/* .text-container: Legacy-Alias, bleibt für Rückwärtskompatibilität          */
.text-container {
  max-width: var(--text-width);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* .grid-wrapper: volle Breite für Kachel-Layouts, kein max-width             */
.grid-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* ── Vorverkaufsstellen-Liste ────────────────────────────────────────────── */
.vvk-list {
  list-style: none;
  padding: 0;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.vvk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.vvk-item strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #464646;
}

.vvk-item span {
  font-size: 0.9rem;
  color: #5a5a5a;
}

.vvk-item a {
  font-size: 0.9rem;
  color: var(--c-primary);
  text-decoration: none;
}
.vvk-item a:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════════
   SAFE SPACE + SECTION SPACING — Mobile-First
   Verhindert, dass Inhalte den Bildschirmrand berühren.
   Desktop-Overrides → responsive.css (@media min-width: 768px)
════════════════════════════════════════════════════════════════════════════ */

/* ── Safe Space: .grid-wrapper, .page-intro, .cta-center erhalten Rand-Padding.
   .content-wrapper hat sein eigenes padding (oben definiert).                 */
.grid-wrapper,
.page-intro,
.cta-center {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* ── Section Spacing: vertikaler Rhythmus, Mobile: 3rem ─────────────────── */
.grid-wrapper,
.content-wrapper,
.page-intro,
.cta-center {
  margin-bottom: 3rem;
}

/* ── Primär-Button: Mobile — volle Breite, sicher im Container ─────────── */
.btn-primary {
  width: 100%;
  max-width: 100%; /* springt nie aus dem Container */
  box-sizing: border-box;
  text-align: center;
  margin-top: var(--pg-btn-top);
  margin-bottom: var(--pg-btn-bottom);
}

/* ── Kachel-Grid: CSS Grid, Mobile-First ─────────────────────────────────── */
/* Mobile (default): 1 Spalte → Acts untereinander                             */
/* Desktop (≥ 992px): 4 Spalten nebeneinander → responsive.css                 */
/* Kein overflow-x, kein flex-scroll.                                           */
ul.teasertileframe {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Mobile: 1 Spalte          */
  gap: 1.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Karte: Layout, Hintergrund, Schatten ────────────────────────────────────
   Ersetzt die --teasertileframe-* CSS-Variablen aus dem gelöschten $head_extras. */
ul.teasertileframe > li {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  position: relative; /* Anker für .tileframe-past */
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
  display: flex;
  flex-direction: column;
}

/* Karten-Bild: einheitliches Hochformat 3:4, object-fit: cover ─────────────
   Gilt für alle teasertileframe-Instanzen (index, vorschau …).
   Breakpoint-Overrides in responsive.css entfernt → eine Quelle der Wahrheit. */
ul.teasertileframe > li > .teasertileframe-picture {
  display: block;
  position: relative;
  overflow: hidden;
}
/* ::before erzeugt die Höhe — als normaler In-Flow-Child, KEIN Grid-Item.
   padding-bottom: % löst sich gegen die Breite des Eltern-Elements auf → 3:4 */
ul.teasertileframe > li > .teasertileframe-picture::before {
  content: "";
  display: block;
  padding-bottom: 133.333%; /* 4/3 × 100% Breite = Hochformat 3:4 */
}
ul.teasertileframe > li > .teasertileframe-picture > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
ul.teasertileframe > li > .teasertileframe-picture > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.03);
  transition: transform 0.4s ease;
}
ul.teasertileframe > li:hover > .teasertileframe-picture > picture > img {
  transform: scale(1.08);
}

/* Karten-Text-Bereich: Innenabstand                                           */
ul.teasertileframe > li > .teasertileframe-text {
  display: flex;
  flex-direction: column;
  flex: 1; /* Text-Bereich füllt Karte */
  padding: 1.25rem 1rem 0;
}
ul.teasertileframe > li > .teasertileframe-text-main {
  flex: 1;
}

/* ── Kachel-Buttons: Gruppe mit zwei Aktionen ───────────────────────────────
   Aktive Kacheln: "Zum Kalender hinzufügen" + "Karten bestellen"
   Vergangene Kacheln: kein .tile-btn-group im HTML → keine Buttons            */
.tile-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1.25rem;
  margin-top: auto;
}

/* Basis beider Buttons */
.tile-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-family: "Open Sans", Verdana, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 9px 12px;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.1s;
}
.tile-btn:active {
  transform: scale(0.98);
}

/* Kalender-Button: sekundär (grau, Outline-Stil) */
a.tile-btn--calendar {
  background: transparent;
  color: #5a5a5a;
  border: 1.5px solid #c0c0c0;
}
a.tile-btn--calendar:hover {
  background: #f5f5f5;
  color: #464646;
  border-color: #999;
}

/* Tickets-Button: primär (Huber-Rot, solid) */
a.tile-btn--tickets {
  background: var(--c-primary);
  color: #ffffff;
  border: 1.5px solid var(--c-primary);
}
a.tile-btn--tickets:hover {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  color: #ffffff;
}

/* Kachel-H3: Name des Künstlers (ersetzt --teasertileframe-caption-*)         */
ul.teasertileframe .teasertileframe-text-main h3 {
  color: #5a5a5a !important;
  font-size: clamp(0.9rem, 0.6rem + 1.2vw, 1.1rem) !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.3;
  margin: 0 0 0.5rem !important;
}

/* Vergangene Karte: Verlauf-Hintergrund (ersetzt linear-gradient Variable)    */
ul.teasertileframe > li.tileframe-past {
  background: linear-gradient(180deg, #e8e8e8 0%, #ffffff 60%);
}

/* Kacheltext: zentriert (p-Ausrichtung; padding kommt vom Eltern-.teasertileframe-text) */
.teasertileframe-text-main p {
  text-align: center !important;
}

/* Kachel-Typografie-Klassen (ersetzen die inline-style-Spans)                 */
.tile-title {
  color: var(--c-primary);
  font-weight: 700;
  font-size: clamp(0.9rem, 0.7rem + 0.8vw, 1.1rem);
  line-height: 1.3;
  margin: 0 0 0.25rem;
}
.tile-date {
  color: var(--c-primary);
  font-weight: 700;
  font-size: clamp(0.875rem, 0.7rem + 0.6vw, 1rem);
  margin: 0.25rem 0 0;
}
.tile-date-gray {
  color: #5a5a5a;
}
.tile-sold-out {
  color: var(--c-primary);
  font-weight: 700;
}

/* Text in Kacheln: kein künstliches max-width                                  */
ul.teasertileframe .teasertileframe-text p,
ul.teasertileframe .teasertileframe-text h3 {
  max-width: none !important;
  width: 100%;
}

/* Vergangen-Badge ─────────────────────────────────────────────────────────── */
ul.teasertileframe > li.tileframe-past {
  opacity: 0.72;
  --sp-target-opacity: 0.72; /* Animation + Scroll-Reveal landen direkt hier */
}
ul.teasertileframe > li.tileframe-past::after {
  content: "Vergangen";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(70, 70, 70, 0.82);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  pointer-events: none;
  z-index: 10;
}
ul.teasertileframe > li.tileframe-past .teasertileframe-picture {
  filter: grayscale(25%);
}

/* ── 4. CTA-Button — kein Vollbanner auf Desktop ─────────────────────────── */
/* Desktop: natürliche Buttonbreite, zentriert — Mobile: volle Breite          */
a.cta-inline {
  display: block;
  width: fit-content;
  min-width: 180px;
  margin-left: auto;
  margin-right: auto;
  background: var(--c-primary);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: 13px 32px;
  text-decoration: none;
  border-radius: var(--br-ui);
  transition:
    background 0.2s,
    transform 0.1s;
}
a.cta-inline:hover {
  background: var(--c-primary-dark);
  color: #fff;
}
a.cta-inline:active {
  transform: scale(0.98);
}

/* ── Page Subtitle: zentrierte Sektions-Überschrift (alle Seiten) ─────────── */
/* Alias für .section-title — einheitliche Klasse für H2-Seitenüberschriften   */
.page-subtitle {
  font-size: clamp(1.125rem, 0.5rem + 2.5vw, 2.369rem);
  font-weight: 800;
  color: var(--c-dark);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  line-height: 1.25;
  margin-top: var(--pg-h2-top);
  margin-bottom: var(--pg-h2-bottom);
}

/* ── CTA-Button: .btn-primary ─────────────────────────────────────────────── */
/* Benannt-Variante von a.cta-inline — für explizite Primär-Aktionen           */
.btn-primary {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: 14px 36px;
  text-decoration: none;
  border-radius: var(--br-ui);
  transition:
    background 0.2s,
    transform 0.1s;
}
a.btn-primary {
  color: #fff;
}
.btn-primary:hover {
  background: var(--c-primary-dark);
  color: #fff;
}
a.btn-primary:hover {
  color: #fff;
}
.btn-primary:active {
  transform: scale(0.98);
}

/* ── CTA-Wrapper: zentriert, mit vertikalem Atemraum ──────────────────────── */
.cta-center {
  text-align: center;
  margin-top: var(--pg-btn-top);
  margin-bottom: var(--pg-btn-bottom);
}

/* ── Einleitungstext (index.php): auf Desktop zentriert ───────────────────── */
.page-intro {
  max-width: 72ch;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  /* padding-left/right: von .grid-wrapper/.page-intro/.cta-center Rule (1.5rem mobil, 0 Desktop) */
}
.page-intro p {
  text-align: left; /* Mobile: linksbündig */
  font-size: 17px;
  color: #5a5a5a;
  line-height: 1.75;
}

/* ── 5. Vertical Rhythm — global konsistente Abstände ────────────────────── */
/* Basis via --pg-* Variablen in :root (Mobile) + responsive.css (Desktop)     */

h2,
.section-heading {
  margin-top: var(--pg-h2-top);
  margin-bottom: var(--pg-h2-bottom);
}

h3,
.disability-heading {
  margin-top: calc(var(--pg-h2-top) * 0.75);
  margin-bottom: var(--pg-h2-bottom);
}

p {
  margin-bottom: var(--pg-p-gap);
  line-height: 1.65;
}
p + p {
  margin-top: 0;
}

a.cta-inline,
.ngpluginparacalendarbutton {
  margin-top: var(--pg-btn-top);
  margin-bottom: var(--pg-btn-bottom);
}
.sqwpluginbuttons {
  margin-top: var(--pg-btn-top);
  margin-bottom: var(--pg-btn-bottom);
}

/* ════════════════════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════════════════════ */
.oster-topbar {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: #e31e24;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 52px 10px 16px;
  max-height: 56px;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    padding 0.35s ease;
}

.oster-topbar.is-dismissing {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.oster-topbar-label {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 11px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.oster-topbar-text {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oster-topbar-btn {
  background: #fff;
  color: #e31e24;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
  transition:
    background 0.15s,
    transform 0.1s;
}
.oster-topbar-btn:hover {
  background: rgba(255, 255, 255, 0.88);
  transform: scale(1.02);
}

.oster-topbar-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s;
}
.oster-topbar-close:hover {
  color: #fff;
}

/* ── Kontaktleiste: Rot wie Footer (Desktop) ────────────────────────────── */
@media (min-width: 1024px) {
  #contactcontainer {
    background: #e31e24;
  }
  #contact {
    background: #e31e24;
    padding: 10px 2rem;
  }
  #contact a,
  #contact span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  #contact svg {
    color: rgba(255, 255, 255, 0.6);
  }
  #contact a:hover {
    color: #fff;
  }
}

/* Hier stand die Media-Query (nach unten verschoben) */



/* ════════════════════════════════════════════════════════════════════════════
   SITE HEADER (Desktop)
   ════════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 22%; /* Flacher für bessere Visibility des Titels darunter */
}

.site-header img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Rote Trennlinie entfernt */


/* Scroll-Indikator */
.site-header::before {
  content: "";
  position: absolute;
  bottom: 22px;
  left: 50%;
  z-index: 4;
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(70, 70, 70, 0.45);
  border-bottom: 2px solid rgba(70, 70, 70, 0.45);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
  animation: siteHeaderScroll 1.6s ease-in-out infinite;
}

@keyframes siteHeaderScroll {
  0%,
  100% {
    transform: translateX(-50%) rotate(45deg) translateY(0);
  }
  50% {
    transform: translateX(-50%) rotate(45deg) translateY(6px);
  }
}

.site-header-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font);
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  margin: 0;
  pointer-events: none;
  opacity: 0;
  animation: siteHeaderTitleIn 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

/* Dunkler Overlay für bessere Lesbarkeit des Titels auf dem Foto */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

/* Rote Linie entfernt */

@keyframes siteHeaderTitleIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes siteHeaderLine {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Desktop-Subpages: Site-Header ausblenden */
@media (min-width: 1024px) {
  body.no-desktop-header .site-header {
    display: none;
  }
}

@media (min-width: 1024px) {
  ul.teasertileframe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
  /* Hier überall die ID durch ul.teasertileframe ersetzen... */
}

/* ── 6. NAVIGATION — Site Header & Navbar (Huber Style) ─────────────────── */
#navcontainer {
  background: var(--c-bg);
  border-bottom: none; /* Entfernt die untere Trennlinie für einen sauberen Look */
  padding: 0 2rem;
  margin-bottom: 2rem; /* Abstand zum Header-Bild auf Desktop */
}

#nav {
  max-width: 1200px;
  background: transparent;
  padding: 0;
  margin: 0 auto; /* Zentrierung des Containers */
}

#nav > ul {
  display: flex;
  justify-content: center; /* Zentrierung der Links */
}


#nav a {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 24px 7px 20px; /* Reduziertes Bottom-Padding bringt Unterstrich näher ans Wort */
  white-space: nowrap !important;
  transition: color 0.2s, background 0.2s;
}

#nav > ul > li > a:hover {
  color: var(--c-primary);
  background: transparent;
}

#nav > ul > li.active > a {
  color: var(--c-primary);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--c-primary); /* Filigraner (2px statt 3px) */
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE HEADER (JS-injected)
   ════════════════════════════════════════════════════════════════════════════ */
.mobile-header {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.mobile-logo {
  display: block;
  flex-shrink: 0;
}

/* ── 7. MOBILE UI — Hero & Greetings (Huber Style) ─────────────────────── */
.mobile-index-hero {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #fcebeb 100%);
  padding: 120px 20px 80px; /* Erhöht für mehr Raum (Huber-Style) */
  text-align: center;
  border-bottom: 2px solid var(--c-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mih-logo {
  width: 140px;
  height: auto;
  margin-bottom: 30px;
}

.mih-kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}

.mih-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--c-dark);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}



.mg-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom: 12px;
}

.mg-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--c-dark);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

/* ───────── END MOBILE UI ───────── */

.mobile-logo img {
  height: 32px;
  width: auto;
  max-width: 120px;
  display: block;
  object-fit: contain;
}

.mobile-burger {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.mobile-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    background 0.2s ease;
}

.mobile-burger.is-open span {
  background: #e31e24;
}
.mobile-burger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.mobile-burger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-burger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ════════════════════════════════════════════════════════════════════════════
   NAV: VERGANGENE ACTS + GLOBALE KOMPONENTEN
   ════════════════════════════════════════════════════════════════════════════ */

/* Vergangene Acts: durchgestrichen in Nav */
#nav li.nav-past > a {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: #aaa;
}
#nav li.nav-past > a::after {
  content: " ✓";
  font-size: 10px;
  color: #aaa;
  font-weight: normal;
  text-decoration: none;
  display: inline;
}

/* Vergangene Acts Kacheln: Bild nicht anklickbar */
ul.teasertileframe > li.tileframe-past .teasertileframe-picture {
  pointer-events: none;
  cursor: default;
}
/* Buttons: vergangene Kacheln haben kein .tile-btn-group im HTML → keine Regel nötig */

/* Vergangen-Banner auf Künstlerseiten */
.vergangen-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-left: 3px solid #aaa;
  color: #888;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  margin: 0 0 12px 0;
}
.vergangen-banner::before {
  content: "✓";
  font-size: 16px;
  color: #aaa;
}
.vergangen-buttons .sqwpluginbuttons a,
.vergangen-buttons .ngpluginparacalendarbutton a {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
  filter: grayscale(0.8);
  background: #888;
  border-color: #888;
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL-REVEALS  (animate.js)
   .sp-reveal        → Ausgangszustand (unsichtbar/verschoben)
   .sp-revealed      → wird per JS gesetzt → sichtbar/eingefahren
   Modifier steuern Richtung/Timing:
     --tile     → von unten + leicht skaliert, versetzt per --sp-delay
     --heading  → von links eingewischt
     --cta      → von unten, kurze Verzögerung
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   EINBLEND-ANIMATIONEN (animate.js)

   .sp-anim    → Elemente IM Viewport beim Laden:
                 CSS-Animation via @keyframes, Delay per --sp-delay.
                 JS berechnet Delay aus vertikaler Position
                 → natürliche Welle von oben nach unten.

   .sp-reveal  → Elemente UNTERHALB des Viewports:
                 IntersectionObserver fügt .sp-revealed hinzu,
                 CSS-Transition blendet ein.
══════════════════════════════════════════════════════════════════ */

@keyframes sp-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--sp-target-opacity, 1);
  }
}

/* In-Viewport: Animation — both: startet bei 0, endet bei --sp-target-opacity */
.sp-anim {
  animation: sp-fadein 0.6s ease both;
  animation-delay: var(--sp-delay, 0ms);
}

/* Scroll-Reveal: Transition */
.sp-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: var(--sp-delay, 0ms);
}
.sp-reveal.sp-revealed {
  opacity: var(--sp-target-opacity, 1);
}
.sp-reveal--heading {
  transition-duration: 0.5s;
}
.sp-reveal--cta {
  transition-duration: 0.45s;
}

ul.teasertileframe > li > .teasertileframe-picture > picture,
ul.teasertileframe > li > .teasertileframe-picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

ul.teasertileframe > li > .teasertileframe-picture > picture > img,
ul.teasertileframe > li > .teasertileframe-picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.03);
  transition: transform 0.4s ease;
}

ul.teasertileframe > li:hover > .teasertileframe-picture > picture > img,
ul.teasertileframe > li:hover > .teasertileframe-picture > img {
  transform: scale(1.08);
}

/* Ausverkauft-Badge ─────────────────────────────────────────────────────────── */
ul.teasertileframe > li.tileframe-soldout {
  opacity: 0.85;
  background: linear-gradient(180deg, #e8e8e8 0%, #ffffff 60%);
}
ul.teasertileframe > li.tileframe-soldout::after {
  content: "Ausverkauft";
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e31e24; /* Huber-Rot */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  pointer-events: none;
  z-index: 10;
}
ul.teasertileframe > li.tileframe-soldout .teasertileframe-picture {
  filter: grayscale(40%);
}

/* Zusatztermin-Block innerhalb einer Kachel */
.tile-zusatz {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
}
.tile-zusatz .tile-date {
  margin-bottom: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   ABSULUTE FINALE BEREINIGUNG (Overrides)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #outercontainer,
  #filltop,
  #logocontainer,
  #navcontainer,
  #nav,
  #logo,
  .mobile-header {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    filter: none !important;
  }

  .mobile-logo img {
    height: 36px !important;
    width: auto !important;
    display: block !important;
  }

  /* Grauzone eliminieren: Padding von Siquando-Container entfernen */
  #contentcontainercontainer {
    padding-top: 0 !important;
  }


  /* Deaktivierung der Siquando-Originale */
  .site-header,
  #eyecatcher,
  #header,
  .site-header-title,
  .section-title:first-of-type {
    display: none !important;
  }
}