/* =============================================================================
   HSP-Events: Gestaltung für Jupiter X und Elementor.
   Nachbau des Block-Themes hsp-events-block. Die Elementor-Elemente tragen
   Klassen mit dem Präfix hsp-, die Farben stehen als Variablen oben.
   ============================================================================= */

:root {
  --hsp-dunkel: #0e1520;
  --hsp-dunkel-karte: #1a2535;
  --hsp-rand-dunkel: #253348;
  --hsp-hell: #ffffff;
  --hsp-grau-flaeche: #f4f6f9;
  --hsp-text: #18181b;
  --hsp-text-hell: #f0f6ff;
  --hsp-akzent: #f07820;
  --hsp-akzent-dunkel: #d0661a;
  --hsp-akzent-text: #b4540a;
  --hsp-blau: #4a8dc5;
  --hsp-blau-dunkel: #3a7ab5;
  --hsp-grau: #6b7a8d;
  --hsp-grau-hell: #9baaba;
  --hsp-rand: #dde4ee;
  --hsp-radius-klein: 6px;
  --hsp-radius: 12px;
  --hsp-radius-gross: 18px;
  --hsp-schatten: 0 4px 24px rgba(0, 0, 0, 0.16);
  --hsp-schatten-blau: 0 4px 20px rgba(74, 141, 197, 0.30);
  --hsp-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --hsp-kopf-hoehe: 72px;
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
body {
  font-family: var(--hsp-schrift);
  color: var(--hsp-text);
  background: var(--hsp-hell);
  -webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .elementor-heading-title {
  font-family: var(--hsp-schrift);
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--hsp-kopf-hoehe) + 8px); }
:focus-visible { outline: 2px solid var(--hsp-akzent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Jupiter X: Inhalt der Elementor-Seiten ohne Rand und Titel */
.jupiterx-main { background: var(--hsp-hell); }
.elementor-page .jupiterx-main-content { padding: 0; }
.elementor-page .jupiterx-main-content > .container,
.elementor-page .jupiterx-main-content > .container-fluid { max-width: none; padding: 0; }
.elementor-page .jupiterx-post-header,
.elementor-page .jupiterx-main-header { display: none; }

/* ── Kopfzeile (Jupiter X) ──────────────────────────────────────────────── */
.jupiterx-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  background: rgba(14, 21, 32, 0.97) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(74, 141, 197, 0.18);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.jupiterx-header.hsp-gescrollt { border-bottom-color: rgba(74, 141, 197, 0.30); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }
.jupiterx-header .jupiterx-site-navbar,
.jupiterx-header .navbar { background: transparent !important; min-height: var(--hsp-kopf-hoehe); padding-top: 0; padding-bottom: 0; }
.jupiterx-header .container,
.jupiterx-header .container-fluid { max-width: 1288px; }
.jupiterx-header .jupiterx-navbar-brand-link,
.jupiterx-header .navbar-brand,
.jupiterx-header .navbar-brand a {
  color: var(--hsp-text-hell) !important;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
/* Stärker als die Jupiter-X-Regel „height: auto“: Ohne feste Höhe schrumpft das SVG-Logo auf 0 px. */
.jupiterx-header .jupiterx-site-navbar .jupiterx-navbar-brand-img { display: block; width: auto; max-width: none; height: 38px; }
@media (max-width: 575.98px) {
  .jupiterx-header .jupiterx-site-navbar .jupiterx-navbar-brand-img { height: 32px; }
}
.jupiterx-header .jupiterx-search-form,
.jupiterx-header .jupiterx-navbar-search { display: none !important; }
.jupiterx-header .navbar-nav { gap: 0.25rem; align-items: center; }
.jupiterx-header .navbar-nav .nav-link,
.jupiterx-header .navbar-nav > li > a {
  color: var(--hsp-grau-hell) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--hsp-radius-klein);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.jupiterx-header .navbar-nav .nav-link:hover,
.jupiterx-header .navbar-nav .nav-link:focus-visible,
.jupiterx-header .navbar-nav .current-menu-item > .nav-link {
  color: var(--hsp-text-hell) !important;
  background: rgba(248, 250, 252, 0.08);
}
.jupiterx-header .navbar-nav .hsp-menu-tickets { margin-left: 1rem; }
.jupiterx-header .navbar-nav .hsp-menu-tickets__link,
.jupiterx-header .navbar-nav .hsp-menu-tickets > .nav-link {
  background: var(--hsp-akzent) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.jupiterx-header .navbar-nav .hsp-menu-tickets__link:hover,
.jupiterx-header .navbar-nav .hsp-menu-tickets > .nav-link:hover { background: var(--hsp-akzent-dunkel) !important; transform: translateY(-1px); }
.jupiterx-header .navbar-toggler { border-color: rgba(248, 250, 252, 0.35); }
.jupiterx-header .navbar-toggler-icon { filter: invert(1); }
@media (max-width: 991.98px) {
  .jupiterx-header .navbar-collapse { background: var(--hsp-dunkel); padding: 0.75rem 0 1rem; }
  .jupiterx-header .navbar-nav { align-items: stretch; }
  .jupiterx-header .navbar-nav .hsp-menu-tickets { margin: 0.5rem 0 0; }
}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.e-con.hsp-s { --padding-top: 5rem; --padding-bottom: 5rem; --padding-left: 1.5rem; --padding-right: 1.5rem; }
.e-con.hsp-s--hell { background-color: var(--hsp-hell); }
.e-con.hsp-s--grau { background-color: var(--hsp-grau-flaeche); }
.e-con.hsp-s--dunkel { background-color: var(--hsp-dunkel); color: var(--hsp-text-hell); }
.e-con.hsp-s--dunkel .elementor-heading-title { color: var(--hsp-text-hell); }

.hsp-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hsp-akzent) !important;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hsp-s--hell .hsp-eyebrow .elementor-heading-title,
.hsp-s--grau .hsp-eyebrow .elementor-heading-title { color: var(--hsp-akzent-text) !important; }
.hsp-eyebrow--linie .elementor-heading-title::before { content: ""; width: 24px; height: 2px; background: currentColor; }

.hsp-titel .elementor-heading-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hsp-text);
}
.hsp-sub, .hsp-sub p { font-size: 1.0625rem; line-height: 1.6; color: var(--hsp-grau); max-width: 60ch; }
.hsp-s--dunkel .hsp-sub, .hsp-s--dunkel .hsp-sub p { color: var(--hsp-grau-hell); }
.hsp-sub p:last-child { margin-bottom: 0; }

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */
.hsp-knopf .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: var(--hsp-schrift);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.9rem 1.75rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hsp-knopf--primaer .elementor-button { background: var(--hsp-akzent); border-color: var(--hsp-akzent); color: #fff; }
.hsp-knopf--primaer .elementor-button:hover,
.hsp-knopf--primaer .elementor-button:focus-visible { background: var(--hsp-akzent-dunkel); border-color: var(--hsp-akzent-dunkel); color: #fff; box-shadow: 0 4px 20px rgba(240, 120, 32, 0.35); transform: translateY(-1px); }
.hsp-knopf--geist .elementor-button { background: transparent; border-color: rgba(161, 161, 170, 0.4); color: var(--hsp-text-hell); }
.hsp-knopf--geist .elementor-button:hover,
.hsp-knopf--geist .elementor-button:focus-visible { background: rgba(248, 250, 252, 0.1); border-color: rgba(161, 161, 170, 0.7); color: var(--hsp-text-hell); }
.hsp-knopf--rahmen .elementor-button { background: transparent; border-color: var(--hsp-akzent); color: var(--hsp-akzent-text); }
.hsp-knopf--rahmen .elementor-button:hover,
.hsp-knopf--rahmen .elementor-button:focus-visible { background: var(--hsp-akzent); color: #fff; }

/* ── Einstieg ───────────────────────────────────────────────────────────── */
.e-con.hsp-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--hsp-dunkel);
  --min-height: min(90vh, 800px);
  --padding-top: 4rem;
  --padding-bottom: 4rem;
}
.e-con.hsp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(74, 141, 197, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 40%, rgba(240, 120, 32, 0.09) 0%, transparent 55%);
  pointer-events: none;
}
.e-con.hsp-hero > .e-con-inner { position: relative; z-index: 1; }
.hsp-hero-titel .elementor-heading-title {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--hsp-text-hell);
}
.hsp-akzent { color: var(--hsp-akzent); font-style: normal; }
.hsp-hero-sub, .hsp-hero-sub p { max-width: 52ch; font-size: clamp(1rem, 2vw, 1.1875rem); line-height: 1.6; color: var(--hsp-grau-hell); }
.hsp-hero-sub p:last-child { margin-bottom: 0; }

.e-con.hsp-kennzahlen { margin-top: 3rem; }
.e-con.hsp-kennzahl { --width: auto; --gap: 0.75rem; --column-gap: 0.75rem; flex: 0 0 auto; }
.e-con.hsp-kennzahl + .e-con.hsp-kennzahl { border-left: 1px solid var(--hsp-rand-dunkel); --padding-left: 2rem; }
.hsp-kennzahl__wert .elementor-heading-title { color: var(--hsp-akzent) !important; font-size: 1.75rem; font-weight: 800; line-height: 1; }
.hsp-kennzahl__text, .hsp-kennzahl__text p { margin: 0; color: var(--hsp-grau-hell); font-size: 0.875rem; line-height: 1.3; }
@media (max-width: 767px) {
  .e-con.hsp-kennzahl + .e-con.hsp-kennzahl { border-left: 0; --padding-left: 0; }
}

/* ── Veranstaltungen (Plugin) ───────────────────────────────────────────── */
.e-con.hsp-s--veranstaltungen { --padding-top: 4rem; --padding-bottom: 5rem; }

/* ── Leistungen ─────────────────────────────────────────────────────────── */
.hsp-leistung { height: 100%; }
.hsp-leistung > .elementor-widget-container {
  height: 100%;
  padding: 1.75rem 1.5rem;
  background: var(--hsp-hell);
  border: 1px solid var(--hsp-rand);
  border-radius: var(--hsp-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
}
.hsp-leistung:hover > .elementor-widget-container { transform: translateY(-3px); box-shadow: var(--hsp-schatten-blau); border-color: var(--hsp-blau); }
.elementor-widget-icon-box.hsp-leistung .elementor-icon-box-wrapper { text-align: left; align-items: flex-start; }
.elementor-widget-icon-box.hsp-leistung .elementor-icon-box-icon { display: flex; justify-content: flex-start; margin-bottom: 1.25rem !important; }
.hsp-leistung .elementor-icon {
  width: 48px;
  height: 48px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hsp-radius-klein) !important;
  background: linear-gradient(135deg, var(--hsp-blau) 0%, var(--hsp-blau-dunkel) 100%) !important;
  color: #fff !important;
  fill: #fff !important;
  font-size: 22px !important;
  box-shadow: var(--hsp-schatten-blau);
}
.hsp-leistung .elementor-icon svg { width: 22px; height: 22px; }
.hsp-leistung .elementor-icon-box-title { margin: 0 0 0.625rem; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--hsp-text); }
.hsp-leistung .elementor-icon-box-title a { color: inherit; }
.hsp-leistung .elementor-icon-box-description { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--hsp-grau); }

/* ── Warum HSP-Events ───────────────────────────────────────────────────── */
.hsp-grund .elementor-icon-box-wrapper { display: flex; gap: 1rem; align-items: flex-start; text-align: left; }
.hsp-grund .elementor-icon-box-icon { margin: 2px 0 0 !important; flex: none; }
.hsp-grund .elementor-icon { color: var(--hsp-akzent) !important; fill: var(--hsp-akzent) !important; font-size: 26px !important; }
.hsp-grund .elementor-icon svg { width: 26px; height: 26px; }
.hsp-grund .elementor-icon-box-title { margin: 0 0 0.375rem; font-size: 1rem; font-weight: 700; color: var(--hsp-text-hell) !important; }
.hsp-grund .elementor-icon-box-description { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--hsp-grau-hell); }

/* ── Rückblick ──────────────────────────────────────────────────────────── */
.e-con.hsp-referenz {
  --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0;
  --gap: 0;
  overflow: hidden;
  background: var(--hsp-hell);
  border: 1px solid var(--hsp-rand);
  border-radius: var(--hsp-radius);
  transition: box-shadow 0.3s ease;
}
.e-con.hsp-referenz:hover { box-shadow: var(--hsp-schatten); }
.hsp-referenz__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0; }
.hsp-referenz__bild, .hsp-referenz__bild .elementor-widget-container { margin: 0; line-height: 0; background: var(--hsp-dunkel-karte); }
.e-con.hsp-referenz > .elementor-element { flex-shrink: 0; }
.hsp-referenz__platzhalter .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 22vw, 300px);
  background: var(--hsp-dunkel-karte);
  color: var(--hsp-grau-hell) !important;
  font-size: 0.875rem;
}
.e-con.hsp-referenz__text { --padding-top: 1.25rem; --padding-bottom: 1.5rem; --padding-left: 1.25rem; --padding-right: 1.25rem; --gap: 0.5rem; }
.hsp-referenz__meta .elementor-heading-title { color: var(--hsp-akzent-text); font-size: 0.8125rem; font-weight: 600; }
.hsp-referenz__titel .elementor-heading-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--hsp-text); }
.hsp-referenz__zahlen, .hsp-referenz__zahlen p { margin: 0; font-size: 0.8125rem; color: var(--hsp-grau); }
.hsp-referenz__zahlen strong { color: var(--hsp-text); }

/* ── Partner ────────────────────────────────────────────────────────────── */
.hsp-partner-kachel .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  min-width: 170px;
  padding: 1.25rem 1.5rem;
  background: var(--hsp-hell);
  border: 1px solid var(--hsp-rand);
  border-radius: var(--hsp-radius);
  color: var(--hsp-grau) !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.hsp-partner-kachel .elementor-heading-title:hover { border-color: var(--hsp-akzent); color: var(--hsp-text) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); }
.hsp-partner-frage, .hsp-partner-frage p { margin: 0; color: var(--hsp-grau); }

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.e-con.hsp-s--cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #18181b 0%, var(--hsp-dunkel) 100%);
  color: var(--hsp-text-hell);
}
.e-con.hsp-s--cta::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 35% 60%, rgba(74, 141, 197, 0.12) 0%, transparent 100%),
    radial-gradient(closest-side at 65% 40%, rgba(240, 120, 32, 0.10) 0%, transparent 100%);
  pointer-events: none;
}
.e-con.hsp-s--cta > .e-con-inner { position: relative; z-index: 1; }
.hsp-cta-titel .elementor-heading-title { font-size: clamp(1.625rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: var(--hsp-text-hell); }
.hsp-cta-text, .hsp-cta-text p { font-size: 1.0625rem; line-height: 1.65; color: var(--hsp-grau-hell); }
.hsp-cta-text p:last-child { margin-bottom: 0; }
.hsp-haken .elementor-icon-list-text { color: var(--hsp-grau-hell) !important; font-size: 0.875rem; }
.hsp-haken .elementor-icon-list-icon i,
.hsp-haken .elementor-icon-list-icon svg { color: var(--hsp-akzent) !important; fill: var(--hsp-akzent) !important; }

/* ── Rechtsseiten (Impressum, Datenschutz, Barrierefreiheit) ────────────── */
.e-con.hsp-rechtsseite { --padding-top: 4rem; --padding-bottom: 5rem; }
.hsp-rechtstext { color: var(--hsp-text); font-size: 1rem; line-height: 1.7; }
.hsp-rechtstext h2 { margin: 2rem 0 0.5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--hsp-text); }
.hsp-rechtstext h2:first-child { margin-top: 0.5rem; }
.hsp-rechtstext p { margin: 0 0 1rem; color: #3f4756; }
.hsp-rechtstext a { color: var(--hsp-akzent-text); text-decoration: underline; text-underline-offset: 0.2em; }
.hsp-rechtstext a:hover { color: var(--hsp-akzent-dunkel); }

/* ── Fußzeile (Elementor-Vorlage) ───────────────────────────────────────── */
.hsp-site-footer { background: var(--hsp-dunkel); color: var(--hsp-text-hell); }
.hsp-site-footer .elementor-heading-title { color: var(--hsp-text-hell); }
.hsp-fuss-marke .elementor-heading-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.hsp-fuss-text, .hsp-fuss-text p { max-width: 32ch; margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--hsp-grau-hell); }
.hsp-fuss-ueberschrift .elementor-heading-title { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hsp-fuss-liste .elementor-icon-list-text { color: var(--hsp-grau-hell); font-size: 0.9rem; transition: color 0.2s ease; }
.hsp-fuss-liste a:hover .elementor-icon-list-text,
.hsp-fuss-liste a:focus-visible .elementor-icon-list-text { color: var(--hsp-akzent); }
.hsp-fuss-klein .elementor-icon-list-text,
.hsp-fuss-copy, .hsp-fuss-copy p { margin: 0; color: var(--hsp-grau-hell); font-size: 0.8125rem; }
.e-con.hsp-fuss-unten { border-top: 1px solid var(--hsp-rand-dunkel); }