/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
  /* ============================================================
     FARBEN / COLORS
     ============================================================
     HINWEIS: Die Brand-Farben (brand, brand-hover, white, black,
     gray-100) sollten zusätzlich in Bricks unter 
     Theme Styles → Colors als Color Variables angelegt werden,
     damit sie im Builder-Farbwähler verfügbar sind.
     ============================================================ */

  /* Markenfarben */
  --color-brand: #e9455c; /* Akzentfarbe (Rot) – Buttons, Highlights */
  --color-brand-hover: #c93348; /* Hover-Zustand der Akzentfarbe */

  /* Basis */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f0f0f0; /* Karten-Hintergrund (original Figma) */

  /* Neutral-Abstufungen (ergänzt für UI-States) */
  --color-gray-50: #f8f8f8; /* Section-Backgrounds */
  --color-gray-200: #e5e5e5; /* Borders */
  --color-gray-500: #737373; /* Muted Text */
  --color-gray-700: #404040; /* Secondary Text */

  /* Aliasse für Figma-Kompatibilität */
  --basic-schwarz: var(--color-black);
  --basic-weiss: var(--color-white);
  --brand-brand-2: var(--color-brand);
  --grau: var(--color-gray-100);

  /* ============================================================
     TYPOGRAFIE / TYPOGRAPHY
     ============================================================ */

  /* Schriftfamilien */
  --font-display: "Neigh", Georgia, serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid Display-Größen (Neigh) – skalieren von Mobile zu Desktop */
  --fs-display-xl: clamp(3.5rem, 8vw + 1rem, 7.5rem); /* 56–120px */
  --fs-display-lg: clamp(2.5rem, 5vw + 1rem, 5rem); /* 40–80px */
  --fs-display-md: clamp(2rem, 3vw + 1rem, 3.125rem); /* 32–50px */

  /* Fluid Headings (Montserrat) */
  --fs-h2: clamp(2rem, 3vw + 0.5rem, 3rem); /* 32–48px */
  --fs-h3: clamp(1.5rem, 2vw + 0.5rem, 2rem); /* 24–32px */
  --fs-h6: 1.25rem; /* 20px fix */

  /* Body-Größen */
  --fs-body-xlarge: clamp(1.25rem, 2vw + 0.5rem, 2.5rem); /* 20–40px */
  --fs-body-large: clamp(1.125rem, 1vw + 0.5rem, 1.5rem); /* 18–24px */
  --fs-body: 1.125rem; /* 18px – Standard-Fließtext */
  --fs-body-sm: 1rem; /* 16px – Sekundärtext, Footer */
  --fs-caption: 0.875rem; /* 14px – Labels, Obertitel */
  --fs-small: 0.75rem; /* 12px – Buttons, Tags */
  --fs-mini: 0.625rem; /* 10px – Fußnoten */

  /* Schriftgewichte */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Zeilenhöhen – KORRIGIERT für Lesbarkeit */
  --lh-display: 1; /* Nur für Display XL/LG (Hero-Zahlen) */
  --lh-heading: 1.15; /* Headings H1–H6 */
  --lh-body: 1.6; /* Fließtext – WICHTIG, ersetzt Figma-1.0 */
  --lh-tight: 1.2; /* Buttons, Labels, kurze UI-Texte */

  /* ============================================================
     ABSTÄNDE / SPACING
     ============================================================ */

  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.25rem; /* 20px */
  --space-lg: 1.875rem; /* 30px */
  --space-xl: 2.5rem; /* 40px */
  --space-2xl: 5rem; /* 80px */
  --space-3xl: 7.5rem; /* 120px – für Hero-Sections */
  --space-4xl: 10rem; /* 160px – für Page-Separatoren */

  /* ============================================================
     CONTAINER / LAYOUT
     ============================================================ */

  /* Seitenrand – basierend auf Figma 1728px Artboard */
  --container-padding: clamp(1.25rem, 10vw, 12.5rem); /* 20–200px */

  /* Content-Maximalbreite innerhalb der Section */
  --container-max: 1280px;

  /* ============================================================
     RADIEN / BORDER RADIUS
     ============================================================ */

  --radius-sm: 5px; /* Buttons */
  --radius-md: 12px; /* Mittlere Karten */
  --radius-lg: 20px; /* Große Karten, Bilder */

  /* ============================================================
     SCHATTEN / SHADOWS
     ============================================================ */

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ============================================================
   BASE STYLES – Body & Headings
   ============================================================
   Diese sollten parallel in Bricks unter 
   Theme Styles → Typography hinterlegt werden.
   Hier als Fallback / Absicherung.
   ============================================================ */
html {
  scroll-behavior: smooth;
}
body,
html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-black);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

h1 {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
}
h2 {
  font-size: var(--fs-display-md);
}
h3 {
  font-size: var(--fs-h2);
}
h6 {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

/* ============================================================
   EMPFOHLENE GLOBALE KLASSEN
   ============================================================
   Diese können in Bricks auch als Globale Klassen angelegt
   werden. Hier als CSS-Fallback für direkte Nutzung im HTML.
   ============================================================ */

.brxe-section {
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding);
}
.banner.brxe-section {
  background-size: cover;
}

.section--hero {
  padding-block: var(--space-3xl);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
}

.text-lead {
  font-size: var(--fs-body-xlarge);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}
.papier {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url("/wp-content/uploads/2026/04/bg-papier.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
.text-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.impressumtext h1,
.impressumtext h2 {
  padding-bottom: 25px;
}
/* Buttons */
.btn,
.bricks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition:
    background-color var(--transition),
    transform var(--transition);
  text-decoration: none;
}

.btn-primary,
.bricks-background-primary {
  background-color: var(--color-brand);
  color: var(--color-white);
}

.btn-primary:hover,
.bricks-background-primary:hover {
  background-color: var(--color-brand-hover);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.btn-secondary:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Card */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 0px;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
  text-align: left;
}
.card img {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.card:hover,
.eventcard:hover {
  box-shadow: var(--shadow-card-hover);
}

.eventcard {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 0px;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
  text-align: left;
}
.eventcard img,
.eventcard .brxe-image.tag {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.eventcard h3 {
  padding-top: 40px;
  padding-bottom: 20px;
  font-size: 24px;
  font-family: var(--font-body);
  line-height: 30px;
  font-weight: normal;
}
.zahl {
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 100px;
  color: var(--color-brand);
  font-weight: bold;
}
.datum {
  font-size: 20px;
  font-family: var(--font-body);
  line-height: 26px;
}
.uhrzeit {
  font-size: 20px;
  font-family: var(--font-body);
  line-height: 26px;
  color: var(--color-brand);
}
.eventcard .brxe-heading,
.eventcard .brxe-text,
.eventcard .brxe-block,
.eventcard .brxe-text-link {
  padding-left: 20px;
  padding-right: 20px;
}
root:last-child:nth-child(odd) {
  grid-column: 1 / -1; /* Geht über die volle Breite */
  justify-self: center; /* Zentriert das Element selbst */
  width: 50%; /* Oder die Breite, die deine anderen Spalten haben */
}

/* Standard: sichtbar, absolut positioniert */
#brx-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  /* Die transform-Transition wandert zur Section, hier bleibt nur background */
  transition: background 0.4s ease;
}

/* NACHHER: visibility aus der transition entfernen! */
#brx-header .header.brxe-section {
  transition: transform 0.4s ease;
}

/* Sticky-Zustand: Header-Container fixiert, mit Hintergrund */
#brx-header.is-sticky {
  position: fixed;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Sticky-Zustand: Sektion anpassen und sicherstellen, dass sie sichtbar ist */
#brx-header.is-sticky .header.brxe-section {
  top: 5px;
  padding-top: 10px;
  padding-bottom: 20px;
  transform: translateY(0);
  visibility: visible;
}

/* Übergangsbereich: Container bleibt fixiert (damit die Sidebar nicht scrollt) */
#brx-header.is-hidden {
  position: fixed;
  /* transform und visibility hier entfernt, damit die Sidebar sichtbar bleibt! */
}

/* Übergangsbereich: NUR die Header-Sektion nach oben verschieben und verstecken */
#brx-header.is-hidden .header.brxe-section {
  transform: translateY(-150%);
  visibility: hidden;
}

#brx-header.is-sticky .brxe-logo img,
#brx-header.is-sticky .brxe-toggle svg {
  filter: invert(1);
}
#brx-header.is-sticky .brx-offcanvas-inner .brxe-toggle svg,
#brx-header.is-sticky .brx-offcanvas-inner .brxe-logo img {
  filter: invert(0);
}
#brx-header .logo {
  width: 110px;
}
#brx-header.is-sticky .logo {
  width: 70px;
  top: 0px;
}
#brx-header.is-sticky .brx-offcanvas-inner .logo {
  width: 120px;
  top: 0px;
}
.sidebar a svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.sidebar a {
  border: 1px solid var(--white);
  border-radius: 20px 0 0 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 4px;
  width: 35px;
  height: 70px;
  position: relative;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rundesbild {
  border-radius: 100%;
  width: 300px;
  height: 300px;
  object-fit: cover;
}
/* Admin-Bar Kompensation für eingeloggte Benutzer */
body.admin-bar #brx-header {
  top: var(--wp-admin--admin-bar--height); /* 32px Desktop, 46px Mobile */
}
#brx-header .logo {
  transform: translate(-50%);
}
body.admin-bar #brx-header.is-sticky {
  top: var(--wp-admin--admin-bar--height);
}
.sidebar {
  transform: translateY(-50%);
  z-index: 1000;
}
#brx-header.is-sticky .sidebar a,
#brx-header:has(.brx-open) .sidebar a {
  filter: invert(1);
}
.featurebild {
  width: 300px;
  height: 312px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.bogenbild {
  width: 300px;
  height: 312px;
  object-fit: cover;
}

/* Admin-Bar Kompensation is-hidden: Nur die Section verschieben, nicht den ganzen Header */
body.admin-bar #brx-header.is-hidden .header.brxe-section {
  transform: translateY(-150%);
  visibility: hidden;
}
.intro h3,
.weiss h3 {
  color: var(--color-brand);
  text-align: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-family: "Montserrat";
  padding-bottom: 30px;
}
.weiss h3 {
}
.sectiontitel {
  color: var(--color-brand);
  text-align: left;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-family: "Montserrat";
  padding-bottom: 30px;
}
.personen {
  background: #f0f0f0;
  border-radius: var(--radius-md);
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
.papier .personen {
  background: #ffffff;
}
.saalname {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  border-radius: var(--radius-md);
  border: 1px solid var(--basic-schwarz);
  font-weight: bold;
  width: 130px;
  font-size: 16px;
}
.subheading h3 {
  font-family: "Montserrat";
  font-weight: 700;
  font-style: bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
}
.ueberunsspalte h4 {
  font-size: 24px;
  font-family: "Montserrat";
  font-weight: 400;
}
.ueberunsspalte h5 {
  font-size: 14px;
  font-family: "Montserrat";
  font-weight: 700;
  color: var(--color-brand);
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 15px;
}
.ueberunsspalte .brxe-icon-box .icon {
  margin-right: 15px;
}
.ueberunsspalte .brxe-icon-box p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-family: "Montserrat";
}
/* Den Pfeil hinter die Menü-Links setzen */
.fmenu .bricks-nav-menu li a::after {
  content: "";
  background: url(/wp-content/uploads/pfeil-menu.svg);
  width: 20px;
  height: 8px;
  margin-left: 10px;
  background-size: contain;
  display: block;
  transition: transform 0.2s ease; /* Optional: Für einen kleinen Effekt beim Hover */
  position: relative;
  top: 8px;
}
.eventlink::after {
  content: "";
  background: url(/wp-content/uploads/pfeil-menu.svg);
  width: 20px;
  height: 8px;
  margin-left: 10px;
  background-size: contain;
  display: block;
  transition: transform 0.2s ease; /* Optional: Für einen kleinen Effekt beim Hover */
  position: relative;
  top: 0px;
}
.eventlink {
  padding-bottom: 40px;
}
.fmenu .bricks-nav-menu li {
  margin-top: 8px;
  line-height: 20px;
}

/* Optional: Den Pfeil beim Drüberfahren leicht bewegen */
.fmenu .bricks-nav-menu li a:hover::after,
.eventlink:hover::after {
  transform: translateX(5px);
}

.saal-row {
  margin-bottom: 10px;
}
.intro h2,
.weiss h2 {
  text-align: center;
  padding-bottom: 25px;
}
.intro h1,
.weiss h1 {
  font-size: var(--fs-display-md);
  padding-bottom: 25px;
}
.weissebox h3 {
  font-size: var(--fs-display-md);
}

.grossertext {
  font-size: var(--fs-body-xlarge);
}
.grossertext h2 {
  padding-bottom: 20px;
}
.banner h2 {
  font-family: "Montserrat";
  font-weight: 700;
  font-size: 30px;
  line-height: 120%;
  color: white;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;
}
.banner h2 strong {
  font-family: "Neigh";
  font-weight: 700;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: 0%;
  text-align: center;
  text-transform: none;
}
.fiegnerintext {
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  letter-spacing: 0%;
}
.fiegnerintext strong {
  font-family: "Neigh";
  font-size: 30px;
  line-height: 30px;
}
.eventcard .brxe-block .brxe-block,
.eventcard .brxe-block .brxe-block .brxe-text {
  padding-left: 0px;
  padding-right: 0px;
}
.brxe-section {
  padding-left: 25px;
  padding-right: 25px;
}
@media (min-width: 768px) {
  .banner h2 {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 40px;
    line-height: 120%;
    color: white;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
  }

  #brx-header.is-sticky .brx-offcanvas-inner .logo {
    width: 130px;
    top: 0px;
  }
  #brx-header .logo {
    width: 130px;
  }
  #brx-header.is-sticky .logo {
    width: 80px;
    top: 0px;
  }
  .brxe-section {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
  .banner h2 strong {
    font-family: "Neigh";
    font-weight: 700;
    font-size: 80px;
    line-height: 90px;
    letter-spacing: 0%;
    text-align: center;
    text-transform: none;
  }
  .sectiontitel {
    color: var(--color-brand);
    text-align: left;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-family: "Montserrat";
    padding-bottom: 40px;
  }
  .personen {
    background: #f0f0f0;
    border-radius: var(--radius-md);
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
  }
  .papier .personen {
    background: #ffffff;
  }
  .saalname {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--basic-schwarz);
    font-weight: bold;
    width: 212px;
  }
  .subheading h3 {
    font-family: "Montserrat";
    font-weight: 700;
    font-style: bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
  }
}
@media (min-width: 1200px) {
  .eventcard .brxe-heading,
  .eventcard .brxe-text,
  .eventcard .brxe-block,
  .eventcard .brxe-text-link {
    padding-left: 35px;
    padding-right: 35px;
  }
  .featurebild {
    width: 600px;
    height: 612px;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }
  .bogenbild {
    width: 400px;
    height: auto;
    object-fit: cover;
  }
  .intro h2,
  .weiss h2 {
    text-align: center;
    padding-bottom: 56px;
  }
  .intro h1,
  .weiss h1 {
    font-size: var(--fs-display-md);
    padding-bottom: 56px;
  }
  .grossertext h2 {
    padding-bottom: 40px;
  }
  .sidebar a svg {
    width: 20px;
    height: 20px;
  }
  .sidebar a {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 15px;
    width: 60px;
    height: 120px;
  }
  .intro h3,
  .weiss h3 {
    padding-bottom: 56px;
  }
  .zahl {
    font-family: var(--font-display);
    font-size: 115px;
    line-height: 115px;
    color: var(--color-brand);
    font-weight: bold;
  }
  .datum {
    font-size: 22px;
    font-family: var(--font-body);
    line-height: 28px;
  }
  .uhrzeit {
    font-size: 22px;
    font-family: var(--font-body);
    line-height: 28px;
    color: var(--color-brand);
  }
}

@media (min-width: 1600px) {
  .banner h2 {
    font-size: 60px;
    line-height: 120%;
  }
  .banner h2 strong {
    font-size: 120px;
    line-height: 120px;
  }
  .fiegnerintext {
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0%;
  }
  .fiegnerintext strong {
    font-family: "Neigh";
    font-size: 50px;
    line-height: 48px;
  }
}

@media (max-width: 991px) {
  /* Sidebar mit vh-Wert positionieren */
  header .sidebar.brxe-div {
    position: absolute;
    top: 50vh; /* 50% der Bildschirmhöhe */
    /* Das transform: translateY(-50%); aus deinem Basis-Code sorgt weiterhin 
       dafür, dass sie exakt mittig sitzt und nicht erst ab der Mitte beginnt */
  }
  #brx-header.is-sticky .sidebar.brxe-div,
  #brx-header.is-hidden .sidebar.brxe-div {
    visibility: hidden;
    opacity: 0;
  }

  /* Wenn das Menü offen ist: Sidebar fixieren, z-index erhöhen und 
     wieder auf normales top: 50% setzen (da 'fixed' sich eh auf den Viewport bezieht) */
  #brx-header:has(.brx-open) .sidebar.brxe-div {
    position: fixed;
    top: 50%;
    z-index: 9999;
    visibility: visible;
    opacity: 1;
  }
}

/* ============================================================
   THE EVENTS CALENDAR PRO – Custom Styles
   Passend zum Schloss Fügen Brand Design
   → In die style.css des Bricks Child Theme einfügen
   ============================================================ */

/* -------------------------------------------------------
   GESAMTER CONTAINER
   ------------------------------------------------------- */
body .tribe-events {
  font-family: var(--font-body);
  color: var(--color-black);
}

body .tribe-common-l-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: var(--space-2xl);
}

/* -------------------------------------------------------
   SUCHLEISTE / EVENTS BAR
   ------------------------------------------------------- */
body .tribe-events-c-events-bar {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-xl);
  border: none;
}

body .tribe-events-c-events-bar__search-container {
  background: transparent;
}

body .tribe-events-c-events-bar input[type="text"],
body .tribe-events-c-search-bar__input {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-black);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-white);
  transition: border-color var(--transition);
}

body .tribe-events-c-events-bar input[type="text"]:focus,
body .tribe-events-c-search-bar__input:focus {
  border-color: var(--color-brand);
  outline: none;
  box-shadow: 0 0 0 2px rgba(233, 69, 92, 0.15);
}

body .tribe-events .tribe-events-c-search__button,
body .tribe-events button.tribe-events-c-search__button {
  color: var(--white);
  background-color: var(--color-brand);
  font-family: var(--font-body);
}
/* Suchen-Button */
body .tribe-events-c-events-bar__search-button,
body .tribe-events-c-search-bar__button {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-brand);
  transition: color var(--transition);
}
body .tribe-common .tribe-common-c-btn-border,
body .tribe-common a.tribe-common-c-btn-border {
  background-color: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm) !important;
  color: var(--white);
  padding: var(--space-sm) var(--space-lg) !important;
  text-align: center;
  transition: var(--tec-transition);
  width: 100%;
}
body .tribe-events-c-events-bar__search-button:hover,
body .tribe-events-c-search-bar__button:hover {
  color: var(--color-brand-hover);
}

/* View-Tabs (Liste, Monat, Tag) */
body .tribe-events-c-events-bar__views .tribe-events-c-view-selector__button,
body .tribe-events-c-view-selector__list-item-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body .tribe-events-c-view-selector__button:hover,
body
  .tribe-events-c-view-selector__list-item--active
  .tribe-events-c-view-selector__list-item-link {
  color: var(--color-brand);
  font-family: var(--font-body);
}

/* -------------------------------------------------------
   TOP BAR – Navigation (< Heute Datum-Range >)
   ------------------------------------------------------- */
body .tribe-events-c-top-bar {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

/* Heute-Button */
body .tribe-events-c-top-bar__today-button,
body a.tribe-events-c-top-bar__today-button {
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-black) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-black) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  transition: all var(--transition) !important;
}

body .tribe-events .tribe-events-c-search__button:focus,
body .tribe-events .tribe-events-c-search__button:hover,
body .tribe-events button.tribe-events-c-search__button:focus,
body .tribe-events button.tribe-events-c-search__button:hover {
  background-color: var(--color-brand-hover) !important;
}
.single-tribe_events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active,
.single-tribe_events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button:focus,
.single-tribe_events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button:focus-within,
.single-tribe_events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active,
.tribe-events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button:focus,
.tribe-events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button:focus-within,
.tribe-events
  .tribe-events-c-subscribe-dropdown
  .tribe-events-c-subscribe-dropdown__button:hover {
  background-color: var(--color-brand-hover) !important;
}
body .tribe-common .tribe-common-c-svgicon {
  color: var(--color-brand);
}
.tribe-events
  .tribe-events-calendar-series-archive__link:focus
  .tribe-events-series-archive__icon,
.tribe-events
  .tribe-events-calendar-series-archive__link:hover
  .tribe-events-series-archive__icon {
  color: var(--color-brand-hover) !important;
}
body .tribe-events-c-top-bar__today-button:hover,
body a.tribe-events-c-top-bar__today-button:hover {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* Datums-Range Text */
body .tribe-events-c-top-bar__datepicker-button {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-black);
}

/* Navigations-Pfeile */
body .tribe-events-c-top-bar__nav .tribe-common-c-btn-icon {
  color: var(--color-black);
  transition: color var(--transition);
}

body .tribe-events-c-top-bar__nav .tribe-common-c-btn-icon:hover {
  color: var(--color-brand);
}

/* -------------------------------------------------------
   MONATSÜBERSCHRIFT
   ------------------------------------------------------- */
body .tribe-events-calendar-list__month-separator-text,
body h2.tribe-events-calendar-list__month-separator-text {
  font-family: var(--font-display) !important;
  font-size: var(--fs-display-md) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-heading) !important;
  color: var(--color-black);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.single-tribe_event_series .tribe-common-l-container.tribe-events-l-container {
  padding-bottom: 2em;
}
body .tribe-events .tribe-events-c-nav__list-item--today {
  display: none !important;
}
body .tribe-common .tribe-common-l-container {
  padding-left: 0px;
  padding-right: 0px;
}
/* -------------------------------------------------------
   DATUMSTRENNER (Tag-Anzeige links)
   ------------------------------------------------------- */
body .tribe-events-calendar-list__event-date-tag {
  text-align: center;
  min-width: 70px;
}

body .tribe-events-calendar-list__event-date-tag-weekday {
  font-family: var(--font-body) !important;
  font-size: var(--fs-caption) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500) !important;
}

body .tribe-events-calendar-list__event-date-tag-daynum,
body .tribe-events-calendar-list__event-date-tag-daynum abbr {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 3vw, 3.5rem) !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1 !important;
  color: var(--color-brand) !important;
  text-decoration: none !important;
}

/* -------------------------------------------------------
   EVENT-KARTEN (Listenansicht)
   ------------------------------------------------------- */
body .tribe-events-calendar-list__event {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg) !important;
  padding: var(--space-lg) !important;
  margin-bottom: var(--space-lg) !important;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
  border: none !important;
}

body .tribe-events-calendar-list__event:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Featured Image */
body .tribe-events-calendar-list__event-featured-image {
  border-radius: var(--radius-md) !important;
  object-fit: cover;
}

body .tribe-events-calendar-list__event-featured-image-wrapper {
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* -------------------------------------------------------
   EVENT-DETAILS
   ------------------------------------------------------- */

/* Titel */
body .tribe-events-calendar-list__event-title,
body h3.tribe-events-calendar-list__event-title {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-heading) !important;
  margin-bottom: var(--space-xs);
}

body .tribe-events-calendar-list__event-title-link,
body a.tribe-events-calendar-list__event-title-link {
  color: var(--color-black) !important;
  text-decoration: none !important;
  transition: color var(--transition);
}

body .tribe-events-calendar-list__event-title-link:hover,
body a.tribe-events-calendar-list__event-title-link:hover {
  color: var(--color-brand) !important;
}

/* Datum & Zeit */
body .tribe-events-calendar-list__event-datetime-wrapper {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm) !important;
  color: var(--color-gray-700);
  margin-bottom: var(--space-xs);
}

body .tribe-events-calendar-list__event-datetime {
  color: var(--color-gray-700);
}

/* Serie-Icon */
body .tribe-events-calendar-series-archive__container a {
  color: var(--color-brand) !important;
  font-size: var(--fs-caption);
}

/* Veranstaltungsort */
body .tribe-events-calendar-list__event-venue {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm) !important;
  font-style: normal !important;
  color: var(--color-gray-500);
  margin-bottom: var(--space-sm);
}

body .tribe-events-calendar-list__event-venue-title {
  color: var(--color-black) !important;
  font-weight: var(--fw-medium) !important;
}

/* Beschreibung */
body .tribe-events-calendar-list__event-description {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-gray-700);
}

body .tribe-events-calendar-list__event-description p {
  line-height: var(--lh-body);
}

/* "Mehr erfahren" Link */
body .tribe-events-calendar-list__event-more-link,
body a.tribe-events-calendar-list__event-more-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand) !important;
  text-decoration: none !important;
  transition: color var(--transition);
  padding-top: var(--space-xs);
}

body .tribe-events-calendar-list__event-more-link:hover,
body a.tribe-events-calendar-list__event-more-link:hover {
  color: var(--color-brand-hover) !important;
}

body .tribe-events-calendar-list__event-more-link::after {
  content: "";
  background: url(/wp-content/uploads/pfeil-menu.svg);
  width: 20px;
  height: 8px;
  margin-left: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  transition: transform 0.2s ease;
  position: relative;
  top: 0;
}

body .tribe-events-calendar-list__event-more-link:hover::after {
  transform: translateX(5px);
}

/* -------------------------------------------------------
   "WEITERE VERANSTALTUNGEN" BUTTON
   ------------------------------------------------------- */
body .tribe-events-c-nav__next .tribe-events-c-nav__next-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
}

body
  .tribe-common--breakpoint-medium.tribe-events
  .tribe-events-c-nav__next-label-plural,
.tribe-common--breakpoint-medium.tribe-events
  .tribe-events-c-nav__prev-label-plural {
  padding-left: 5px;
}

body .tribe-events-c-nav__next a,
body .tribe-events-c-nav__list-item--next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
  padding: 10px 20px;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  transition:
    background-color var(--transition),
    transform var(--transition) !important;
}

body .tribe-events-c-nav__next a:hover,
body .tribe-events-c-nav__list-item--next a:hover {
  background-color: var(--color-brand-hover) !important;
}

body .tribe-events-c-nav__prev a,
body .tribe-events-c-nav__list-item--prev a {
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-black) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-black) !important;
  padding: 10px 20px;
  text-decoration: none !important;
  transition: all var(--transition) !important;
}

body .tribe-events-c-nav__prev a:hover,
body .tribe-events-c-nav__list-item--prev a:hover {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* -------------------------------------------------------
   GENERELLE TEC-OVERRIDES
   ------------------------------------------------------- */

/* TEC Links allgemein */
body .tribe-events a {
  color: var(--color-brand);
  transition: color var(--transition);
}

body .tribe-events a:hover {
  color: var(--color-brand-hover);
}

/* TEC Body-Text Override */
body .tribe-common .tribe-common-b1,
body .tribe-common .tribe-common-b2,
body .tribe-common .tribe-common-b3 {
  font-family: var(--font-body);
}

/* TEC Heading Override */
body .tribe-common .tribe-common-h1,
body .tribe-common .tribe-common-h2,
body .tribe-common .tribe-common-h3,
body .tribe-common .tribe-common-h4,
body .tribe-common .tribe-common-h5,
body .tribe-common .tribe-common-h6 {
  font-family: var(--font-display);
}

/* Trennlinien zwischen Events entfernen (Karten brauchen keine) */
body .tribe-events-calendar-list__event + .tribe-events-calendar-list__event {
  border-top: none !important;
}

/* Event-Separator (Datum-Abschnitt) */
body .tribe-events-calendar-list__month-separator {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* -------------------------------------------------------
   DATEPICKER / KALENDER-DROPDOWN
   ------------------------------------------------------- */
body .tribe-events .datepicker {
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-gray-200);
}

body .tribe-events .datepicker .day.active,
body .tribe-events .datepicker .month.active {
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-sm);
}

body .tribe-events .datepicker .day:hover,
body .tribe-events .datepicker .month:hover {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------- */
@media (max-width: 767px) {
  body .tribe-common-l-container {
    padding-inline: 25px;
  }

  body .tribe-events-calendar-list__event {
    padding: var(--space-sm) !important;
  }

  body .tribe-events-calendar-list__event-featured-image-wrapper {
    margin-bottom: var(--space-sm);
  }

  body .tribe-events-c-events-bar {
    padding: var(--space-sm);
    border-radius: var(--radius-md);
  }
  body .tribe-events .tribe-events-calendar-list__event-wrapper {
    flex: none;
  }
  body .tribe-common .tribe-common-g-row--gutters {
    margin-left: 0px;
    margin-right: 0px;
  }
  body .tribe-common .tribe-common-g-row--gutters > .tribe-common-g-col {
    padding-left: 0px;
    padding-right: 0px;
  }

  body .tribe-events-calendar-list__event-date-tag-daynum,
  body .tribe-events-calendar-list__event-date-tag-daynum abbr {
    font-size: 2rem !important;
  }
  body .tribe-events-c-nav__prev a,
  body .tribe-events-c-nav__list-item--prev a {
    padding: 5px 10px;
  }
}

@media (min-width: 768px) {
  body .tribe-events-calendar-list__event {
    padding: var(--space-xl) !important;
  }
}

@media (min-width: 1200px) {
}