/* ============================================
   ALANT NATUR ERLEBEN - Cevento Event Styling
   Basierend auf echten Cevento-Klassen
   ============================================ */

/* --- Alant Farbvariablen --- */
:root {
  --alant-dunkelbraun: #322C0A;
  --alant-braun: #7C6C13;
  --alant-gruen-dunkel: #657C30;
  --alant-gruen-hell: #C2CA7D;
  --alant-gelb-dunkel: #DEC92F;
  --alant-gelb: #E4D465;
  --alant-gelb-hell: #F5EFC5;
  --alant-beige: #E4E0CD;
  --alant-warmweiss: #FFFBF5;
  --alant-altrosa: #E2B290;
}

/* --- "Keine Events" Leermeldung ([alant_events] Wrapper) --- */

.alant-events-empty {
  padding: 1rem 0;
}

.alant-events-empty__title {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--alant-dunkelbraun, #322C0A);
  margin: 0 0 0.25rem;
}

.alant-events-empty__text {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--alant-dunkelbraun, #322C0A);
  margin: 0 0 1.25rem;
}

.alant-events-empty__btn {
  display: inline-block;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--alant-dunkelbraun, #322C0A);
  background: transparent;
  border: 1px solid var(--alant-dunkelbraun, #322C0A);
  padding: 14px 40px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.alant-events-empty__btn:hover {
  background: rgba(50, 44, 10, 0.1);
  color: var(--alant-dunkelbraun, #322C0A);
}

/* --- Event-Karten (List + Grid) --- */
html>body .cevento-list .cevento-evententry.cevento-card {
  background-color: var(--alant-warmweiss);
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(50, 44, 10, 0.08);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  padding: 0;
  overflow: hidden;
}

html>body .cevento-list .cevento-evententry.cevento-card:hover {
  border-color: var(--alant-gruen-dunkel);
  box-shadow: 0 6px 20px rgba(50, 44, 10, 0.15);
  transform: translateY(-2px);
}

/* --- Thumbnail --- */
html>body .cevento-list .cevento-evententry .cevento-evententry__thumbnail {
  border-radius: 0;
}

/* --- Titel --- */
html>body .cevento-list .cevento-evententry .cevento-evententry__title {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  color: var(--alant-dunkelbraun);
  font-size: 1.4rem;
  line-height: 1.3;
}

html>body .cevento-list .cevento-evententry .cevento-evententry__link:hover .cevento-evententry__title {
  color: var(--alant-gruen-dunkel);
}

/* --- Beschreibung --- */
html>body .cevento-list .cevento-evententry .cevento-evententry__description {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  color: var(--alant-dunkelbraun);
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.85;
}

/* --- Datum & Uhrzeit --- */
html>body .cevento-list .cevento-evententry .cevento-evententry__datetime {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  color: var(--alant-gruen-dunkel, #657C30);
  font-weight: 700;
  font-size: 1.1rem;
}

/* --- Verfügbare Plätze --- */
/* Standardmäßig ausblenden (Anzahl freier Plätze nicht zeigen) */
html>body .cevento-list .cevento-evententry .cevento-evententry__places {
  display: none;
}

/* "Vollständig ausgebucht" prominent anzeigen */
html>body .cevento-list .cevento-evententry .cevento-evententry__places.cevento-soldout {
  display: block;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  color: var(--alant-gruen-dunkel, #657C30);
  font-weight: 700;
  font-size: 1.3rem;
  font-style: italic;
}

/* --- Kategorie-Badges --- */
html>body .cevento-categorylist li > a,
html>body .cevento-categorylist li > span {
  background-color: var(--alant-gelb-hell) !important;
  color: var(--alant-dunkelbraun) !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--alant-gelb-dunkel);
}

html>body .cevento-categorylist li > a:hover {
  background-color: var(--alant-gruen-dunkel) !important;
  color: #fff !important;
  border-color: var(--alant-gruen-dunkel);
}

/* --- Kategorie-Filter (oben) --- */
.cevento-archive__filter {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}

.cevento-archive__filter li a {
  color: var(--alant-braun);
  padding: 0.35rem 1rem;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.cevento-archive__filter li a:hover {
  background: var(--alant-gelb-hell);
  border-color: var(--alant-gelb-dunkel);
  color: var(--alant-dunkelbraun);
}

.cevento-archive__filter li a.active {
  background: var(--alant-gruen-dunkel);
  color: #fff;
  border-color: var(--alant-gruen-dunkel);
  font-weight: 600;
}

/* --- Bullet-Point bei Kategorie-Badge entfernen --- */
html>body .cevento-categorylist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

html>body .cevento-categorylist li {
  list-style: none;
}

html>body .cevento-categorylist li::before,
html>body .cevento-categorylist li::marker {
  content: none;
  display: none;
}


/* --- Archiv-Überschrift --- */
.cevento-archive__header h1 {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  color: var(--alant-dunkelbraun);
  font-weight: 700;
  font-size: 2rem;
}

/* --- Grid-Layout Anpassungen (nach Silkes Design) --- */

/* Grid: Immer 3 Spalten, auch bei weniger Events */
html>body .cevento-list.cevento-list__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

html>body .cevento-list.cevento-list__grid .cevento-evententry.cevento-card {
  border: none;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--alant-beige, #E4E0CD);
  box-shadow: none;
  max-width: 100%;
}

html>body .cevento-list.cevento-list__grid .cevento-evententry.cevento-card:hover {
  box-shadow: 0 4px 16px rgba(50, 44, 10, 0.12);
}

html>body .cevento-list.cevento-list__grid .cevento-evententry .cevento-evententry__thumbnail {
  border-radius: 0;
}

/* Grid: Content-Bereich Padding */
html>body .cevento-list.cevento-list__grid .cevento-evententry__content {
  padding: 0.75rem 1rem 1rem;
}

/* Grid: Datum — klein, olivbraun, oben */
html>body .cevento-list.cevento-list__grid .cevento-evententry__datetime {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--alant-gruen-dunkel, #657C30);
  order: -1;
}

/* Grid: Header umordnen — Datum oben, dann Titel */
html>body .cevento-list.cevento-list__grid .cevento-evententry__header {
  display: flex;
  flex-direction: column;
}

html>body .cevento-list.cevento-list__grid .cevento-evententry__meta {
  order: -1;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px dotted var(--alant-braun, #7C6C13);
}

/* Grid: Titel — Source Serif 4, dunkelbraun, deutlich größer als Datum */
html>body .cevento-list.cevento-list__grid .cevento-evententry__title {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(20px, 0.71vw + 17px, 26px);
  color: var(--alant-dunkelbraun, #322C0A);
  line-height: 1.3;
}

/* Grid: Kategorie-Badge ausblenden */
html>body .cevento-list.cevento-list__grid .cevento-categorylist {
  display: none;
}

/* Grid: Beschreibung/Excerpt ausblenden */
html>body .cevento-list.cevento-list__grid .cevento-evententry__description {
  display: none;
}

/* --- Featured Events --- */
.cevento-list__list .cevento-evententry.cevento-featured {
  border-right: 5px solid var(--alant-gelb) !important;
}

/* --- Pagination --- */
.cevento-pagination .nav-links a,
.cevento-pagination ul.page-numbers a {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  color: var(--alant-braun);
  border: 1px solid var(--alant-beige);
  border-radius: 0;
  padding: 0.3rem 0.8rem;
}

.cevento-pagination .nav-links a:hover,
.cevento-pagination ul.page-numbers a:hover {
  background: var(--alant-gruen-dunkel);
  color: #fff;
  border-color: var(--alant-gruen-dunkel);
}

/* ============================================
   ALANT NATUR ERLEBEN - Cevento Single Event
   Detailansicht (Event-Einzelseite)
   Basierend auf Silkes Design + Alant Design-System
   ============================================ */


/* ===========================================
   1. CONTAINER & GRUNDSTRUKTUR
   =========================================== */

#cevento-single {
  max-width: 100%;
  margin: 0 auto;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  color: var(--alant-dunkelbraun, #322C0A);
  line-height: 1.7;
  overflow-x: hidden;
  background-color: var(--alant-gelb, #E4D465);
}


/* ===========================================
   2. HEADER — Kategorie, Titel, Datum, Button
   Silkes Design: Gelbe Section, Titel groß links,
   Datum + Plätze + Buttons rechts
   =========================================== */

#cevento-single .cevento-single__header {
  background-color: var(--alant-gelb, #E4D465);
  padding: clamp(24px, 2.86vw + 14px, 48px) clamp(20px, 7.14vw - 6px, 80px);
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: clamp(20px, 2.38vw + 11px, 40px);
  align-items: start;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* — Kategorie-Badge — */
#cevento-single .cevento-categorylist {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#cevento-single .cevento-categorylist li {
  list-style: none;
}

#cevento-single .cevento-categorylist li::before,
#cevento-single .cevento-categorylist li::marker {
  content: none;
  display: none;
}

#cevento-single .cevento-categorylist li > a,
#cevento-single .cevento-categorylist li > span {
  background-color: var(--alant-gelb-hell, #F5EFC5) !important;
  color: var(--alant-dunkelbraun, #322C0A) !important;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(11px, 0.24vw + 10px, 13px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 5px 14px;
  border-radius: 0;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#cevento-single .cevento-categorylist li > a:hover {
  background-color: var(--alant-dunkelbraun, #322C0A) !important;
  color: #fff !important;
}

/* — Titel — */
#cevento-single h1,
#cevento-single .cevento-single__title,
#cevento-single .cevento-single__header h1,
#cevento-single .cevento-single__header .cevento-single__title,
div#cevento-single h1.cevento-single__title {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
  font-size: clamp(26px, 1.79vw + 20px, 41px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--alant-dunkelbraun, #322C0A) !important;
  margin: 0 0 0.25rem 0 !important;
  padding: 0 !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* — Rechte Spalte: Datum, Plätze, Button — */
#cevento-single .cevento-single__header > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  align-items: flex-end;
  text-align: right;
  min-width: 180px;
  max-width: 280px;
  overflow: hidden;
}

/* — Datum & Uhrzeit — */
#cevento-single .cevento-single__datetime {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(15px, 0.24vw + 14px, 17px);
  font-weight: 700;
  color: var(--alant-dunkelbraun, #322C0A);
  margin: 0;
  line-height: 1.4;
}

/* — Verfügbare Plätze — */
/* Standardmäßig ausblenden */
#cevento-single .cevento-evententry__places {
  display: none;
}

/* "Vollständig ausgebucht" auf Single-Seite prominent */
#cevento-single .cevento-evententry__places.cevento-soldout {
  display: block;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(16px, 0.48vw + 14px, 20px);
  color: var(--alant-dunkelbraun, #322C0A);
  font-weight: 700;
  font-style: italic;
  margin: 0;
}

/* — Anmelde-Button (Modal-Trigger) — */
#cevento-single .cevento-booking-button {
  display: inline-block;
  background-color: var(--alant-braun, #7C6C13);
  color: #FFFFFF;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: clamp(10px, 0.48vw + 8px, 14px) clamp(20px, 1.43vw + 15px, 32px);
  border: 2px solid var(--alant-braun, #7C6C13);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  margin-top: 0.5rem;
  text-align: center;
  white-space: nowrap;
}

#cevento-single .cevento-booking-button:hover {
  background-color: var(--alant-dunkelbraun, #322C0A);
  border-color: var(--alant-dunkelbraun, #322C0A);
  color: #FFFFFF;
}

/* — iCal-Download-Button — */
#cevento-single .cevento-single__header a[href*="ical"],
#cevento-single .cevento-single__header a[href*=".ics"],
#cevento-single .cevento-single__header a[download] {
  display: inline-block;
  background-color: var(--alant-dunkelbraun, #322C0A);
  color: #FFFFFF;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 24px;
  border: 2px solid var(--alant-dunkelbraun, #322C0A);
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  margin-top: 0.25rem;
  text-align: center;
  white-space: nowrap;
}

#cevento-single .cevento-single__header a[href*="ical"]:hover,
#cevento-single .cevento-single__header a[href*=".ics"]:hover,
#cevento-single .cevento-single__header a[download]:hover {
  background-color: var(--alant-gruen-dunkel, #657C30);
  border-color: var(--alant-gruen-dunkel, #657C30);
  color: #FFFFFF;
}


/* ===========================================
   3. BODY — Bild + Beschreibung
   Gelber Hintergrund (durchgehend), Bild links, Text rechts
   =========================================== */

#cevento-single .cevento-single__body {
  background-color: var(--alant-gelb, #E4D465);
  padding: clamp(24px, 2.86vw + 14px, 48px) clamp(20px, 7.14vw - 6px, 80px);
  display: block;
  max-width: 100%;
}

/* — Event-Bild im Body ausblenden (Hero zeigt es bereits) — */
#cevento-single .cevento-single__body > div:first-child {
  display: none;
}

/* — Beschreibungstext — */
#cevento-single .cevento-single__description {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
  font-size: clamp(15px, 0.24vw + 14px, 17px) !important;
  line-height: 1.7 !important;
  color: var(--alant-dunkelbraun, #322C0A) !important;
}

#cevento-single .cevento-single__description p {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 0.8em 0;
}

#cevento-single .cevento-single__description p:last-child {
  margin-bottom: 0;
}

/* — Inline-Bilder in Beschreibung — */
#cevento-single .cevento-single__description img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5em 0 1em;
  border-radius: 0;
}

/* — Preis hervorheben (letzter Absatz) — */
#cevento-single .cevento-single__description p:last-child {
  font-weight: 700;
  padding-top: 0.3em;
}


/* ===========================================
   4. FOOTER — Zurück-Link & Nach-oben
   =========================================== */

#cevento-single .cevento-single__footer {
  background-color: var(--alant-gelb, #E4D465);
  padding: clamp(16px, 1.19vw + 12px, 28px) clamp(20px, 7.14vw - 6px, 80px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: none;
  max-width: 100%;
}

#cevento-single .cevento-single__return,
#cevento-single .cevento-single__backtotop {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(13px, 0.24vw + 12px, 15px);
  color: var(--alant-braun, #7C6C13);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

#cevento-single .cevento-single__return:hover,
#cevento-single .cevento-single__backtotop:hover {
  color: var(--alant-gruen-dunkel, #657C30);
}

#cevento-single .cevento-single__return svg,
#cevento-single .cevento-single__backtotop svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

#cevento-single .cevento-single__return svg path,
#cevento-single .cevento-single__backtotop svg path {
  fill: currentColor;
}

/* Back-to-top Pfeil dreht nach oben */
#cevento-single .cevento-single__backtotop svg {
  transform: rotate(90deg);
}


/* ===========================================
   5. BUCHUNGS-MODAL
   =========================================== */

/* Modal sitzt NICHT innerhalb #cevento-single,
   daher breitere Selektoren verwenden */
.cevento-modal .cevento-modal__overlay,
#cevento-single .cevento-modal__overlay {
  background-color: rgba(50, 44, 10, 0.7);
}

.cevento-modal .cevento-modal__container,
#cevento-single .cevento-modal__container {
  background-color: var(--alant-gelb-hell, #F5EFC5);
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(50, 44, 10, 0.25);
}

.cevento-modal .cevento-modal__header,
#cevento-single .cevento-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem 1rem;
  border-bottom: 1px solid var(--alant-beige, #E4E0CD);
  background-color: var(--alant-gelb-hell, #F5EFC5);
}

.cevento-modal .cevento-modal__title,
#cevento-single .cevento-modal__title {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(20px, 0.71vw + 17px, 26px);
  font-weight: 400;
  color: var(--alant-dunkelbraun, #322C0A);
  margin: 0;
  line-height: 1.3;
}

.cevento-modal .cevento-modal__close,
#cevento-single .cevento-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
}

.cevento-modal .cevento-modal__close::before,
.cevento-modal .cevento-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--alant-dunkelbraun, #322C0A);
  transition: background-color 0.2s ease;
}

.cevento-modal .cevento-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cevento-modal .cevento-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cevento-modal .cevento-modal__close:hover::before,
.cevento-modal .cevento-modal__close:hover::after {
  background-color: var(--alant-gruen-dunkel, #657C30);
}

.cevento-modal .cevento-modal__content {
  padding: 1.5rem 2rem 2rem;
}

/* — Formular-Felder (im Modal) — */
.cevento-modal .cevento-form input[type="text"],
.cevento-modal .cevento-form input[type="email"],
.cevento-modal .cevento-form input[type="tel"],
.cevento-modal .cevento-form input[type="number"],
.cevento-modal .cevento-form select,
.cevento-modal .cevento-form textarea {
  background-color: #FFFFFF;
  border: 1px solid var(--alant-beige, #E4E0CD);
  padding: 0.6rem 0.75rem;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 15px;
  color: var(--alant-dunkelbraun, #322C0A);
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cevento-modal .cevento-form input[type="text"]:focus,
.cevento-modal .cevento-form input[type="email"]:focus,
.cevento-modal .cevento-form input[type="tel"]:focus,
.cevento-modal .cevento-form input[type="number"]:focus,
.cevento-modal .cevento-form select:focus,
.cevento-modal .cevento-form textarea:focus {
  border-color: var(--alant-braun, #7C6C13);
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 108, 19, 0.15);
}

.cevento-modal .cevento-form label {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 14px;
  color: var(--alant-dunkelbraun, #322C0A);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

/* — Formular Submit-Button — */
.cevento-modal .cevento-form .cevento-submit .cevento-submit-button {
  background-color: var(--alant-braun, #7C6C13) !important;
  color: #FFFFFF !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--alant-braun, #7C6C13);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  max-width: 100% !important;
  width: 100%;
}

.cevento-modal .cevento-form .cevento-submit .cevento-submit-button:hover {
  background-color: var(--alant-dunkelbraun, #322C0A) !important;
  border-color: var(--alant-dunkelbraun, #322C0A);
}

/* — Teilnehmer-Gruppe & Repeater — */
.cevento-modal .cevento-form .cevento-group-fields > legend,
.cevento-modal .cevento-form .cevento-repeater > legend {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(16px, 0.48vw + 14px, 20px);
  font-weight: 600;
  color: var(--alant-dunkelbraun, #322C0A);
}

.cevento-modal .cevento-form .cevento-group-fields > legend::after,
.cevento-modal .cevento-form .cevento-repeater > legend::after {
  background-color: var(--alant-beige, #E4E0CD);
}

/* "Teilnehmer hinzufügen" Button */
.cevento-modal .cevento-form .cevento-repeater legend button,
.cevento-modal .cevento-form .cevento-group-fields legend button {
  background-color: var(--alant-beige, #E4E0CD) !important;
  color: var(--alant-dunkelbraun, #322C0A) !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--alant-beige, #E4E0CD);
}

.cevento-modal .cevento-form .cevento-repeater legend button:hover,
.cevento-modal .cevento-form .cevento-group-fields legend button:hover {
  background-color: var(--alant-braun, #7C6C13) !important;
  color: #FFFFFF !important;
  border-color: var(--alant-braun, #7C6C13);
}

/* — Formular-Feld-Abstände — */
.cevento-modal .cevento-form .cevento-field {
  margin-bottom: 1rem;
}

.cevento-modal .cevento-form .cevento-field:last-child {
  margin-bottom: 0;
}

/* — Checkbox-Feld (AGB etc.) — Cevento nutzt
   position:absolute auf der Checkbox + padding-left auf dem Label */
.cevento-modal .cevento-form .cevento-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-color: var(--alant-beige, #E4E0CD);
  cursor: pointer;
}

.cevento-modal .cevento-form .cevento-field input[type="checkbox"]:checked {
  background-color: var(--alant-braun, #7C6C13);
  border-color: var(--alant-braun, #7C6C13);
}

.cevento-modal .cevento-form .cevento-field label:has(> input[type="checkbox"]) {
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

/* — Pflichtfeld-Stern: Cevento rendert .cevento-req selbst — */
.cevento-modal .cevento-form .cevento-req {
  color: #c0392b;
  font-weight: 700;
}

/* ===========================================
   5b. SCHUTZ — Divi-Overrides für Cevento
   Divi setzt globale Styles (body font-size 23px,
   etc.) die Cevento-Elemente überschreiben.
   =========================================== */

/* Divi setzt body { font-size: 23px } — im Cevento-Bereich zurücksetzen */
#cevento-single,
#cevento-single * {
  box-sizing: border-box;
}

/* Divi-Links im Cevento-Bereich reset */
#cevento-single a {
  color: inherit;
  text-decoration: none;
}

/* Divi-Listen-Styles im Cevento-Bereich reset */
#cevento-single ul li {
  font-size: inherit !important;
  margin-bottom: 0 !important;
}


/* ===========================================
   6. RESPONSIVE — Tablet (max-width: 980px)
   =========================================== */

@media (max-width: 980px) {

  #cevento-single .cevento-single__header {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  #cevento-single .cevento-single__header > div:last-child {
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
  }

  #cevento-single .cevento-single__datetime {
    flex: 1 1 100%;
  }

  #cevento-single .cevento-evententry__places {
    flex: 1 1 auto;
  }

  #cevento-single .cevento-booking-button {
    margin-top: 0;
  }

  #cevento-single .cevento-single__body {
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(15px, 1.79vw + 9px, 30px);
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ===========================================
   7. RESPONSIVE — Mobile (max-width: 767px)
   =========================================== */

@media (max-width: 767px) {

  #cevento-single .cevento-single__header {
    padding: 24px 20px;
    grid-template-columns: 1fr !important;
  }

  #cevento-single .cevento-single__title {
    font-size: clamp(22px, 5vw, 30px);
  }

  #cevento-single .cevento-single__header > div:last-child {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  #cevento-single .cevento-booking-button {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }

  /* iCal-Button auch volle Breite auf Mobile */
  #cevento-single .cevento-single__header a[href*="ical"],
  #cevento-single .cevento-single__header a[href*=".ics"],
  #cevento-single .cevento-single__header a[download] {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  #cevento-single .cevento-single__body {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  /* Bild über Text auf Mobile */
  #cevento-single .cevento-single__body > div:first-child {
    order: -1;
  }

  #cevento-single .cevento-single__footer {
    padding: 20px;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .cevento-modal .cevento-modal__container {
    width: 95%;
    max-height: 90vh;
  }

  .cevento-modal .cevento-modal__header {
    padding: 1rem 1.25rem 0.75rem;
  }

  .cevento-modal .cevento-modal__content {
    padding: 1rem 1.25rem 1.5rem;
  }
}


/* ===========================================
   8. HYPHENATION — Silbentrennung deaktivieren
   Cevento setzt .cevento-hyphenate, was den
   Titel hässlich umbricht
   =========================================== */

#cevento-single .cevento-hyphenate {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* ===========================================
   9. FEINTUNING — Abstände & Details
   =========================================== */

/* Smooth Scroll nur für Cevento-Bereich (kein globales html!) */
#cevento-single {
  scroll-behavior: smooth;
}

/* Kein extra Abstand zwischen Divi-Header und Cevento */
#et-main-area > #cevento-single {
  margin-top: 0;
}

/* Divi-Container darf Cevento nicht einengen */
#et-main-area:has(#cevento-single) {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  overflow-x: hidden;
  background-color: var(--alant-gelb, #E4D465);
}

/* Divi setzt manchmal .container oder ähnliche max-width */
#et-main-area .container,
#et-main-area > .et_builder_inner_content {
  max-width: 100% !important;
  padding: 0 !important;
}


/* ===========================================
   9b. RESPONSIVE — Event-List-Cards (Shortcode)
   Kompaktere Darstellung auf Tablet & Mobile
   =========================================== */

/* Tablet: Grid 2 Spalten */
@media (max-width: 960px) {
  html>body .cevento-list.cevento-list__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  html>body .cevento-list .cevento-evententry.cevento-card {
    margin-bottom: 0.6rem !important;
    padding: 0 !important;
  }

  /* Cevento setzt hier flex-direction:column-reverse + gap:.7em — überschreiben */
  html>body .cevento-list .cevento-evententry:has(>.cevento-evententry__thumbnail) .cevento-evententry__header > div:first-of-type {
    gap: 0.2em !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-evententry__content .cevento-evententry__header {
    gap: 0.15rem !important;
    padding: 0.4rem 0.5rem 0.2rem !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-categorylist {
    margin-top: 0 !important;
    margin-bottom: 0.15rem !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-categorylist + .cevento-evententry__link {
    margin-top: 0.1rem !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-evententry__description {
    margin: 0 0.5rem 0.4rem !important;
  }
}

/* Mobile: Grid 1 Spalte */
@media (max-width: 550px) {
  html>body .cevento-list.cevento-list__grid {
    grid-template-columns: 1fr !important;
  }

  html>body .cevento-list .cevento-evententry.cevento-card {
    margin-bottom: 0.5rem !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    padding: 0 !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-evententry__content .cevento-evententry__header {
    gap: 0.1rem !important;
    padding: 0.3rem 0.4rem 0.15rem !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-categorylist {
    margin-top: 0 !important;
    margin-bottom: 0.1rem !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-categorylist + .cevento-evententry__link {
    margin-top: 0.05rem !important;
  }

  html>body .cevento-list .cevento-evententry .cevento-evententry__description {
    margin: 0 0.4rem 0.35rem !important;
  }
}


/* ===========================================
   10. ARCHIV & KATEGORIE-SEITEN
   /events/ und /event-kategorie/*
   Gelber Hintergrund + Padding oben
   =========================================== */

body.post-type-archive-events #et-main-area,
body.tax-event-category #et-main-area {
  background-color: var(--alant-gelb, #E4D465);
  padding-top: clamp(40px, 4.76vw + 23px, 80px);
}

/* Archiv-Header (Titel "Events") */
body.post-type-archive-events .cevento-archive__header,
body.tax-event-category .cevento-archive__header {
  padding: 0 clamp(20px, 7.14vw - 6px, 80px) 1rem;
}

body.post-type-archive-events .cevento-archive__header h1,
body.tax-event-category .cevento-archive__header h1 {
  color: var(--alant-dunkelbraun, #322C0A);
}

/* Filter-Leiste */
body.post-type-archive-events .cevento-archive__filter,
body.tax-event-category .cevento-archive__filter {
  padding: 0 clamp(20px, 7.14vw - 6px, 80px);
}

/* Event-Liste */
body.post-type-archive-events .cevento-list,
body.tax-event-category .cevento-list {
  padding: 0 clamp(20px, 7.14vw - 6px, 80px);
}