/* 1. Grundlayout der Pagination-Liste */
.pagination ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px; /* Abstand zwischen den Kreisen */
  flex-wrap: wrap;
}

/* 2. Gestaltung aller Links und der aktiven Zahl */
.pagination li a,
.pagination li strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

/* 3. Normale Seitenzahlen (Rahmen + Textfarbe) */
.pagination li:not(.previous):not(.next):not(.first):not(.last) a {
  border: 2px solid #2e5a81;
  color: #2e5a81;
  background-color: transparent;
}

/* Hover-Effekt für klickbare Seitenzahlen */
.pagination li:not(.previous):not(.next):not(.first):not(.last) a:hover {
  background-color: rgba(0, 123, 193, 0.1);
}

/* 4. Aktive Seite: Negativ / Weiß im gefüllten Kreis */
.pagination li strong.active {
  background-color: #2e5a81;
  color: #ffffff;
  border: 2px solid #2e5a81;
}

/* ==========================================
   5. TEXT BEI "ZURÜCK / VOR / ENDE" DURCH PFEILE ERSETZEN
   ========================================== */

/* Text ausblenden (Schriftgröße auf 0 setzen) */
.pagination li.first a,
.pagination li.previous a,
.pagination li.next a,
.pagination li.last a {
  font-size: 0; 
  background-color: #ffffff;
  color: #333333;
}

/* Hover für die Pfeil-Buttons */
.pagination li.first a:hover,
.pagination li.previous a:hover,
.pagination li.next a:hover,
.pagination li.last a:hover {
  background-color: #2e5a81;
  color: #ffffff;
}

/* Pfeil-Symbole per Pseudoelement einfügen */
.pagination li.first a::before    { content: "«"; font-size: 16px; } /* Start */
.pagination li.previous a::before { content: "‹"; font-size: 18px; } /* Zurück */
.pagination li.next a::before     { content: "›"; font-size: 18px; } /* Vorwärts */
.pagination li.last a::before     { content: "»"; font-size: 16px; } /* Ende */




/* Spezifität erhöhen durch body-Selektor */
body .eyeAble_topFixedPosition {
  top: 280px !important;
}


/* mehr linker Abstand bei Bildeinbau in Textelement */
.media--left > figure{
  padding-right: 20px;
}



/* ==========================================================================
   Contao 5 Footer Grid-Fix (Freestyle FX)
   ========================================================================== */

/* 1. Aktiviert das Grid auf dem umschließenden Container */
#footer .inside.stkb {
  display: flow-root; /* Erzeugt einen sauberen Float-Kontext */
  box-sizing: border-box;
}

#footer .inside.stkb:after {
  content: "";
  display: block;
  clear: both;
}

/* 2. Zwingt alle Kind-Elemente im Footer zum Floaten */
#footer .inside.stkb > div {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
  padding: 0 15px; /* Optional: Gibt den Spalten einen sauberen Seitenabstand */
}

/* 3. Sicherheits-Fallback für Desktop-Breiten (ab 1024px) */
@media (min-width: 1024px) {
  #footer .inside.stkb > .b4 { width: 25% !important; }
  #footer .inside.stkb > .b8 { width: 20% !important; }
  #footer .inside.stkb > .b13 { width: 30% !important; }
}

/* 4. Sicherheits-Fallback für Tablet-Breiten (768px bis 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  #footer .inside.stkb > .b4 { width: 25% !important; }
  #footer .inside.stkb > .b8 { width: 50% !important; }
  #footer .inside.stkb > .b13 { width: 50% !important; }
}

/* 5. Smartphone-Ansicht (Untereinander stapeln) */
@media (max-width: 767px) {
  #footer .inside.stkb > div {
    width: 100% !important;
    float: none !important;
    margin-bottom: 2rem;
  }
}




.location {
  padding-left: 10px;
  border-left: 10px solid #777;
  margin-bottom: 30px;
}

p.info {
  display: inline-block;
  border-bottom: 10px solid;
}

/* Contao 5 Anpassung: Erfasst alte ce_/mod_ sowie neue content-/mod- Klassen */
[class*="ce_"], [class*="mod_"], [class*="content-"], [class*="mod-"], .pdf_link {
  padding: 0 10px 0 0px;
}

.layout_full.block.card.kalendar-card,
.layout-full.block.card.kalendar-card {
  margin-bottom: 30px;
}

/* Event- & News-Listen Alignment */
.mod_eventlist.block .event,
.mod-eventlist.block .event,
.mod_newslist.block,
.mod-newslist.block {
  display: flex;
  flex-direction: column;
}

/* Der Text- oder Teaserbereich dehnt sich aus und schiebt den Rest nach unten */
.mod_eventlist.block .event .teaser,
.mod-eventlist.block .event .teaser,
.mod_newslist.block,
.mod-newslist.block {
  flex-grow: 1; 
}

/* "Weiterlesen"-Button nach unten schieben */
.mod_eventlist.block .event .more,
.mod-eventlist.block .event .more,
.mod_newslist.block .more,
.mod-newslist.block .more {
  margin-top: auto; /* Schiebt den Button automatisch ganz nach unten */
}

/* Grid-Container für Events & News */
.mod_eventlist.block,
.mod-eventlist.block,
.mod_newslist.block,
.mod-newslist.block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 gleich große Spalten */
  gap: 30px; /* Der Abstand zwischen den Beiträgen */
}

/* Die einzelnen Beiträge/Kacheln */
.mod_eventlist.block .event,
.mod-eventlist.block .event,
.layout_latest.block,
.layout-latest.block {
  display: flex;
  flex-direction: column; /* Richtet den Inhalt vertikal aus */
  height: 100%; /* Nutzt die volle, vom Grid vorgegebene Höhe */
  background: #ffffff;
}

/* Responsive Design: Auf Tablets 2 Spalten, auf Handys 1 Spalte */
@media (max-width: 992px) {
  .mod_eventlist.block,
  .mod-eventlist.block,
  .mod_newslist.block,
  .mod-newslist.block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .mod_eventlist.block,
  .mod-eventlist.block,
  .layout_latest.block,
  .layout-latest.block {
    grid-template-columns: 1fr;
  }
}

.mod_eventlist .event,
.mod-eventlist .event {
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 8px;
  padding: 12px;
}

.mod_eventlist.block,
.mod-eventlist.block {
  transition: opacity .3s ease;
}

.mod_eventlist.block.is-loading,
.mod-eventlist.block.is-loading {
  opacity: .5;
  pointer-events: none;
}

/* wojuschau */
.op-nav.block {
  display: block;
  margin-top: 200px;
}

.wojuschau-nav {
  height: 300px;
  width: 100%;
  border-bottom: 1px solid #dedede;
}

#foerderer {
  padding-top: 20px;
  padding-bottom: 60px;
  height: auto;
  background: #A7D60F;
}

/* news rechtsbündig */
.rebue {
  text-align: right;
}

/* teaser */
.content {
  padding-top: 20px !important;
}

.ce_text.b14.vertical-line.block,
.content-text.b14.vertical-line.block {
  padding-right: 20px;
  border-right: 2px solid;
}



/* Legt eine 10px breite Farblinie fest über den linken Bildschirmrand */
body[class*="musikschule"]::before,
body.musikschule::before   { background-color: #2e5a81; }
body.parktheater::before   { background-color: #01998c; }
body.museum::before        { background-color: #f28800; }
body.bibliothek::before    { background-color: #e40613; }
body.galerien::before      { background-color: #77b82a; }
body.events::before        { background-color: #a81681; }

/* Gemeinsame Logik für den Balken */
body.musikschule::before,
body.parktheater::before,
body.museum::before,
body.bibliothek::before,
body.galerien::before,
body.events::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 25px;
  height: 100vh;
  z-index: 99999; /* Garantiert ganz oben */
  pointer-events: none; /* Klicks gehen durch den Balken durch */
}



.klone-info {
  color: red !important;
}

.klone-info li {
  color: #343f45 !important;
  font-family: Oswald, Arial-Narrow !important;
  text-transform: uppercase;
}

.vertical-subnav ul li {
  text-align: center;
  display: table-cell;
}

.vertical-subnav ul span.active,
.vertical-subnav ul a.active,
.vertical-subnav ul a:hover,
.vertical-subnav li a {
  background-color: #786c5c;
  border: none !important;
}

.vertical-subnav ul a,
.vertical-subnav ul span {
  font-family: Oswald, Arial-Narrow;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.vertical-subnav ul a,
.vertical-subnav ul span.active {
  line-height: 43px;
}








/* 1. Container zwingen, sich an die Bildbreite anzupassen */
div.content-image figure,
figure.image_container,
figure {
  position: relative !important;
  display: inline-block !important;
  /*margin: 0 !important;
  padding: 0 !important;*/
  overflow: hidden !important;
  max-width: 100% !important;
}

/* 2. Verhindern, dass Inline-Elemente Abstände erzeugen */
div.content-image figure a,
div.content-image figure picture,
div.content-image figure img,
figure.image_container a,
figure.image_container picture,
figure.image_container img,
figure a,
figure picture,
figure img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 3. Figcaption absolut unten im Bild festpinnen */
div.content-image figure figcaption,
figure.image_container figcaption,
figure figcaption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: rgba(0, 0, 0, 0.85) !important; /* Schwarzer Balken */
  color: #ffffff !important;                   /* Weiße Schrift */
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  
  /* Initial verstecken (nach unten geschoben) */
  opacity: 0 !important;
  transform: translateY(100%) !important;
  transition: all 0.3s ease-in-out !important;
  pointer-events: none !important; /* Verhindert Klick-Blockaden auf den Lightbox-Link */
}

/* 4. Beim Hover über das figure-Element einblenden */
div.content-image figure:hover figcaption,
figure.image_container:hover figcaption,
figure:hover figcaption {
  opacity: 1 !important;
  transform: translateY(0) !important;
}








/* Bildergalerien & Bildcontainer (C4: image_container / C5: image-container) */
.content-gallery ul,
.content-gallery ul,
.image_container ul,
.image-container ul {
  padding: 0;
  list-style-type: none;
}

.content-gallery ul:after,
.content-gallery ul:after,
.image_container ul:after,
.image-container ul:after {
  content: "";
  display: block;
  clear: both;
}

.content-gallery picture,
.content-gallery picture,
.image_container picture,
.image-container picture {
  float: left;
  max-width: 100%;
  margin: 0;
  position: relative;
}

.content-gallery img,
.content-gallery img,
.image_container img,
.image-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.content-gallery figcaption,
.content-gallery figcaption,
picture.image_container figcaption,
picture.image-container figcaption {
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, .8);
  color: white;
  padding: 5px;
  transition: .8s;
  opacity: 0;
  visibility: hidden;
}

.content-gallery picture:hover figcaption,
.content-gallery picture:hover figcaption,
picture.image_container:hover figcaption.caption,
picture.image-container:hover figcaption.caption {
  opacity: 1;
  visibility: visible;
}

.img-border img {
  border: 1px solid #dedede;
  border-radius: 6px;
}

#footer .toggler::before {
  padding-right: .1em !important;
  font-family: icons;
  content: '\e842';
}

#footer .toggler {
  position: relative;
  padding: 3px 4px;
  border-bottom: 0px solid;
}

.mod_mae_event_filter li.category a:hover,
.mod-mae-event-filter li.category a:hover {
  color: #e30613 !important;
}

.mod_mae_event_filter li.category a,
.mod-mae-event-filter li.category a {
  font-size: 90%;
  color: #444;
}

.mod_eventlist .ce_text,
.mod-eventlist .content-text,
.mod_eventreader .ce_text,
.mod-eventreader .content-text {
  padding-left: 0;
}

/* event */
.datetime {
  width: 40px;
  text-align: center;
  background-color: #fff;
}

.mod_eventlist .image_container,
.mod-eventlist .image-container {
  margin-top: -45px;
  z-index: -1;
}

.layout_teaser .day,
.layout-teaser .day,
.layout_list .day,
.layout-list .day {
  line-height: 3.9rem;
  font-size: 3.8rem;
  font-weight: 600;
  font-family: Barlow Condensed;
}

.layout_teaser .month::after,
.layout-teaser .month::after,
.layout_list .month::after,
.layout-list .month::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #808080;
  width: 40px;
}

.layout_teaser .month,
.layout-teaser .month,
.layout_list .month,
.layout-list .month {
  text-transform: uppercase;
  font-size: 2rem;
  position: relative;
  font-family: Barlow Condensed;
  font-weight: 600;
}

#main [class*="mod_"] .inside,
#main [class*="mod-"] .inside {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.btn-small .inactive-categories ul li,
.mod_mae_event_filter li.category,
.mod-mae-event-filter li.category {
  float: left;
  margin-right: 10px;
}

.mm-navbar__title {
  display: none;
}

.mm-listview {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
}

/* Hamburger Nav */
.hamburger-active .hamburger-icon {
  background: transparent;
  transform: rotate(-135deg);
}

.hamburger-active .hamburger-icon:before,
.hamburger-active .hamburger-icon:after {
  top: 0;
}

.hamburger-active .hamburger-icon:before {
  transform: rotate(90deg);
}

.hamburger-icon-container {
  height: 1.7em;
  width: 1.7em;
  position: fixed;
  top: 30px;
  right: 30px;
  cursor: pointer;
  background: none;
  border-radius: 1px;
  z-index: 200;
}

.hamburger-icon,
.hamburger-icon:before,
.hamburger-icon:after {
  content: '';
  position: absolute;
  height: 4px;
  width: 1.7em;
  background: #444444;
  transition: all .2s ease;
}

.hamburger-icon { top: .75em; }
.hamburger-icon:before { top: -0.55em; }
.hamburger-icon:after { top: .55em; }

ul.level_1 li.submenu.trail a.submenu.trail span,
nav#nav.mod_navigation.block ul.level_1 li.trail.first a.trail.first span,
nav#nav.mod-navigation.block ul.level_1 li.trail.first a.trail.first span,
nav#nav.mod_navigation.block ul.level_1 li.trail a.trail,
nav#nav.mod-navigation.block ul.level_1 li.trail a.trail {
  color: #e30613;
}

.caption-cr figcaption {
  min-width: 100px;
  bottom: 5%;
  left: 5%;
  position: absolute;
  display: inline-block;
  padding: .2rem 1rem;
  background-color: rgba(214,212,212,.5);
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  z-index: 2;
}

.layout_latest.columns_3.arc_5.block.card.space-bottom40._non-news-klick.padding-bottom20.first.even,
.layout-latest.columns_3.arc_5.block.card.space-bottom40._non-news-klick.padding-bottom20.first.even,
.layout_latest.columns_3.arc_5.block.card.space-bottom40.padding-bottom20.odd,
.layout-latest.columns_3.arc_5.block.card.space-bottom40.padding-bottom20.odd {
  padding-bottom: 34px;
}

#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a,
#nav ul.level_1 li.trail {
  color: #e30613;
}

#nav li .active,
.forward.trail:active,
.forward.trail {
  color: #ababab;
}

a:hover {
  text-decoration: underline;
}

#nav a {
  font: 1rem Barlow Condensed;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#nav {
  height: 3rem;
  top: 5rem;
}

[class*="ce_"] th,
[class*="content-"] th,
.mod_calendar th,
.mod-calendar th,
[class*="ce_"] td,
[class*="content-"] td,
.mod_calendar td,
.mod-calendar td {
  padding: 8px 15px;
}

#logo-sk-bensheim {
  padding-top: 15px;
  padding-left: 16px;
}

.no-border .kalendar-card {
  border: none !important;
}

/* Suchefunktion */
#search-slot:hover input {
  background-color: rgba(255,255,255,.7);
  padding: 8px 0 8px 20px !important;
  width: 200px !important;
}

#search-slot input {
  padding: 0;
}

#search-slot .btn {
  padding-top: 8px;
  padding-bottom: 8px;
  border: 0px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
  font-size: 150%;
  background: #dedede !important;
  color: #ffffff !important;
}

#search-slot [class^="icon-"]::before {
  margin-left: -1px;
  line-height: 0px;
}

.icon-search {
  margin-left: 0 !important;
  line-height: 0 !important;
}

/* Google-Map Opt-In */
#confirm-googlemaps {
  width: 80%;
  min-height: 100px;
  left: 5%;
  right: 5%;
  top: 5%;
  position: absolute;
  overflow: hidden;
  display: block;
  padding: 10px;
  background-color: #ededed;
}

#confirm-googlemaps:hover {
  cursor: pointer;
}

/* News */
.kalendar-card,
.layout_latest {
  margin-right: 10px;
  border-bottom: 1px solid #eee;
}

.non-news-klick .more {
  display: none;
}

.cardnr {
  position: relative;
  float: right;
  display: block;
}

div.ce_text:nth-child(5),
div.content-text:nth-child(5) {
  padding-bottom: 0px !important;
}

.columns_3 {
  width: 33%;
  margin-right: .33%;
}

.card,
.layout_latest {
  min-height: 10em;
  padding: 10px;
  border-color: #eee;
  border-radius: 8px;
  background: #dedede !important;
}

.mod_newsreader .card,
.mod-newsreader .card {
  min-height: 10em;
  padding: 10px;
  background-color: #f7f7f7;
  border: none !important;
  border-radius: 8px;
}

.mod_newsreader .card h1,
.mod-newsreader .card h1 {
  padding: 0;
  color: #444;
  padding-left: 0px;
}

.mod_newsreader [class*="ce_"],
.mod-newsreader [class*="content-"] {
  padding-right: 0;
  padding-bottom: 10px;
  padding-left: 0;
  background: none !important;
}

#nav li .active {
  color: #444444 !important;
}

.section-border {
  border-bottom: 1px solid #dedede;
}

p.center > a:nth-child(1),
p.center > a:nth-child(2),
p.center > a:nth-child(3) {
  font-family: Sen;
  color: #666666 !important;
}

#nav > ul > li > a,
#nav ul.level_1 li strong.active,
#nav ul.level_1 li strong.forward {
  padding-right: 1.0rem;
  padding-left: 1.0rem;
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer p {
  margin-top: 1px;
  margin-bottom: 8px;
}

#footer h2 {
  text-transform: uppercase;
  letter-spacing: .1em;
}

#nav li:hover ul {
  background: #f3f3f3 !important;
  opacity: .85;
}

#nav > ul > li > a,
#nav > ul > li strong.active,
#nav ul > li strong.forward,
#nav > ul.level_1 li strong.active {
  text-transform: uppercase;
  letter-spacing: .1em;
}

#nav li ul,
#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a,
#nav ul.level_1 li.trail,
#nav ul.level_1 li.trail a {
  background: inherit;
  color: inherit;
}

#nav ul.level_1 > li.active {
  background-color: inherit;
  color: inherit;
}

/* ==========================================================================
   Contao 5 Footer 2 Galerie-Fix (6 Logos nebeneinander)
   ========================================================================== */

/* 1. Bereitstellung des Flexbox-Grids auf der Galerie-Liste */
#footer2 .content-gallery--cols-6 ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center; /* Zentriert die Logos, falls der Platz variiert */
  align-items: center;     /* Richtet alle Logos vertikal mittig aus */
}

/* 2. Formatierung der einzelnen Listenpunkte */
#footer2 .content-gallery--cols-6 ul li {
  box-sizing: border-box;
  padding: 10px;           /* Gibt den Logos einen sauberen Innenabstand zueinander */
}

/* 3. Sicherstellung, dass Bilder innerhalb der Links responsive skalieren */
#footer2 .content-gallery--cols-6 ul li figure,
#footer2 .content-gallery--cols-6 ul li a,
#footer2 .content-gallery--cols-6 ul li img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   Responsive Spaltenaufteilung (Media Queries)
   ========================================================================== */

/* Große Bildschirme & Desktop (Ab 1024px) -> Alle 6 Elemente exakt in einer Reihe */
@media (min-width: 1024px) {
  #footer2 .content-gallery--cols-6 ul li {
    width: 16.666% !important; /* Mathematisch exakt 1/6 Breite */
  }
}

/* Tablets & mittlere Bildschirme (768px bis 1023px) -> 3 Spalten pro Reihe (2 Reihen) */
@media (min-width: 768px) and (max-width: 1023px) {
  #footer2 .content-gallery--cols-6 ul li {
    width: 33.333% !important; /* 3 Logos nebeneinander */
    margin-bottom: 15px;
  }
}

/* Smartphones (Bis 767px) -> 2 Spalten pro Reihe (3 Reihen) für optimale Lesbarkeit */
@media (max-width: 767px) {
  #footer2 .content-gallery--cols-6 ul li {
    width: 50% !important; /* 2 Logos nebeneinander, da 6 für ein Handy zu quetschen wäre */
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   Contao 5 – Footer 2 Reparatur (Bypass für _img-hover-text)
   ========================================================================== */

/* 1. Setzt alle Elemente, Bilder und Umschließer bedingungslos auf sichtbar */
#footer2 .content-gallery ul li,
#footer2 .content-gallery ul li figure,
#footer2 .content-gallery ul li picture,
#footer2 .content-gallery ul li img,
#footer2 ._img-hover-text,
#footer2 ._img-hover-text * {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  animation: none !important;
  z-index: +1 !important;
}

/* 2. Repariert das Flexbox-Layout für alle 6 Logos */
#footer2 .content-gallery--cols-6 ul {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center !important;
  align-items: center !important;
}

#footer2 .content-gallery--cols-6 ul li {
  box-sizing: border-box !important;
  padding: 10px !important;
}

/* 3. Responsive Aufteilung */
@media (min-width: 1024px) {
  #footer2 .content-gallery--cols-6 ul li {
    width: 16.666% !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #footer2 .content-gallery--cols-6 ul li {
    width: 33.333% !important;
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  #footer2 .content-gallery--cols-6 ul li {
    width: 50% !important;
    margin-bottom: 20px;
  }
}