/* Grundsätzliche Template Farben und Einstellungen */

/*:root {
  --cassiopeia-color-primary: hsl(1deg, 62%, 46%);
  --cassiopeia-color-link: hsl(210deg, 58%, 22%);
  --cassiopeia-color-hover: hsl(2deg, 56%, 49%);
}*/

:root {
  --cassiopeia-color-primary: hsl(1deg, 62%, 46%);
  --cassiopeia-color-link: hsl(210deg, 58%, 22%);
  --cassiopeia-color-hover: hsl(2deg, 56%, 49%);
}

/* Logo oben mittig  */
.container-header .navbar-brand {
    margin: 0 auto;
    float: none;
    display: block;
    text-align: center;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Menue oben mittig  */
.mod-menu {
    margin: 0 auto;
    float: none;
    display: block;
    text-align: center;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Seiteninhalt mittig und 80% */
/* .container-header, */
.container-masthead,
.container-component {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* DPCalendar */

/* Buton buchen */
.field-value .btn-buchen {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff; /* Button-Farbe */
    color: #ffffff;            /* Textfarbe */
    border-radius: 5px;        /* Abgerundete Ecken */
    text-decoration: none;     /* Unterstreichung entfernen */
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.field-value .btn-buchen:hover {
    background-color: #0056b3; 
}


/* Timeline/Liste */
.mod-dpcalendar-upcoming img,
[class*="timeline"] img {
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* DPCalendar Detailseite: Eventbild */
figure.dp-figure > img.dp-image {
  width: 100% !important;
  max-width: 325px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* DPCalendar Detailseite: Eventbild */
.com-dpcalendar .dpcalendar-event img,
.com-dpcalendar [class*="event"] img,
.com-dpcalendar [class*="image"] img {
  width: 50% !important;
  max-width: 960px !important;
  height: 150px !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* DPCalendar: Liste Blog – feste Bildbox, ohne Beschnitt */
.dp-event__image figure.dp-figure > a.dp-link > img.dp-image {
  width: 320px !important;
  height: 250px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto 1rem auto !important;
}

/* DPCalendar Liste: obere Navigation mit Pfeilen und Datum ausblenden */
.com-dpcalendar-list__actions.dp-button-bar.dp-print-hide {
  display: none !important;
}

/* DPCalendar : Kalendername ausblenden */
.com-dpcalendar-list .dp-event__calendar {
  display: none !important;
}

/* DPCalendar Custom Field: Eventim-Ticketlink als Button */
.dp-field-tickets-buchen .dp-description__label {
  display: none !important;
}

.dp-field-tickets-buchen .dp-description__description a {
  display: inline-block !important;
  padding: 0.7rem 1.2rem !important;
  border-radius: 0.35rem !important;
  background: var(--cassiopeia-color-primary, #0d6efd) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  font-size: 0 !important;
}

.dp-field-tickets-buchen .dp-description__description a::after {
  content: "Tickets" !important;
  font-size: 1rem !important;
}

.dp-field-tickets-buchen .dp-description__description a:hover,
.dp-field-tickets-buchen .dp-description__description a:focus {
  filter: brightness(0.9);
  color: #fff !important;
  text-decoration: none !important;
}



/* DPCalendar Upcoming: einfacher horizontaler Bildslider */
/* DPCalendar Upcoming Modul: horizontaler Bildslider */
.mod-dpcalendar-upcoming-default__events {
  display: flex !important;
  gap: 1.5rem !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  padding: 0 0 1rem 0 !important;
}

/* Einzelne Event-Karte */
.mod-dpcalendar-upcoming-default__event {
  flex: 0 0 260px !important;
  scroll-snap-align: start !important;
  text-align: center !important;
}

/* Datumskachel ausblenden */
.mod-dpcalendar-upcoming-default__event .dp-flatcalendar {
/*  display: none !important; /
}

/* Datum/Uhrzeit ausblenden */
.mod-dpcalendar-upcoming-default__date {
  display: none !important;
}

/* Titel */
.mod-dpcalendar-upcoming-default__information .dp-event-url {
  display: block !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  text-decoration: none !important;
}

/* Bild */
.mod-dpcalendar-upcoming-default__image figure.dp-figure > a.dp-event-url > img.dp-image {
  width: 240px !important;
  height: 340px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto 1rem auto !important;
}

/* ticket-button im Text */
.ticket-button {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border-radius: 0.35rem;
  background: var(--cassiopeia-color-primary, #0d6efd);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  line-height: 1.2;
}

.ticket-button:hover,
.ticket-button:focus {
  filter: brightness(0.9);
  color: #fff !important;
  text-decoration: none !important;
}