/* ==================================================
   KG SÜDSTERN – user.css
   Aufbau: 1 Basis · 2 Kopfzeile & Menü · 3 Footer & untere Leiste
   4 Social Media · 5 Termin-Streifen · 6 Inhalte (Icons, Accordion, Tabs)
   7 Kontakt · 8 JEvents (Terminkalender) · 9 Tollitäten · 10 Sessionshefte · 11 Module (inkl. Rondell nur auf der Startseite am Handy) · 12 Plakat, Hero-News & News-Seite · 13 Kartenvorverkauf & Hinweis auf aktuelle Seite in der unteren Leiste · 14 Rondell am Handy · 15 Instagram-Zeitleiste & Modul „Neu auf Instagram“ · 16 Phoca Download (Mitgliederbereich)
   Rot: #d91e18 (Akzent), #D42527 nur bei Accordion/Tabs
   ================================================== */

/* Icons und Schrift sofort laden: Joomla lädt sie sonst erst nach dem ersten Anzeigen der Seite nach (kurzes Zucken beim Seitenwechsel) */
@import url("/media/system/css/joomla-fontawesome.min.css?bd4ddf");
@import url("/media/templates/site/cassiopeia/css/global/fonts-local_roboto.min.css?bd4ddf");



/* ==================================================
   1. BASIS
   ================================================== */

/* Kein automatisches sanftes Scrollen: Seiten beginnen sofort oben. Der Pfeil „Zurück nach oben“ scrollt per Skript (Modul untere Leiste) weiterhin sanft. */
html,
:root {
    scroll-behavior: auto !important;
}

/* Hintergrundbild */
body {
    background-image: url('/images/karneval-bg.png');
    background-repeat: repeat;
    background-size: 1000px auto;
    background-color: #f8f8f8;
}

/* Überschriften bis 1199 px (Handy, Tablet, kleine Laptops) */
@media (max-width: 1199.98px) {
    h1, .h1 {
        font-size: 1.8rem !important;
    }

    h2, .h2 {
        font-size: 1.7rem !important;
    }

    h3, .h3 {
        font-size: 1rem !important;
    }
}


/* ==================================================
   2. KOPFZEILE & HAUPTMENÜ
   ================================================== */

/* --- Handy und Tablet (bis 991 px) --- */
@media (max-width: 991.98px) {

  /* Logo rechts in der Leiste */
  .container-nav {
    position: relative;
    min-height: 84px;
  }
  #mod-custom150 {
    position: absolute;
    right: 32px;
    top: 10px;
    z-index: 1000;
  }

  /* Menü-Knopf: schlicht, ohne Kasten, großes Tippfeld */
  .container-nav .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 26px;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .container-nav .navbar-toggler .icon-menu::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0c9";
  }
  .container-nav .navbar-toggler[aria-expanded="true"] .icon-menu::before {
    content: "\f00d";
  }

  /* Bootstrap setzt .navbar auf position: relative und schrumpft es auf Knopfbreite.
     Damit sich das Menü an der ganzen Kopfzeile ausrichtet, hier aufheben */
  .container-nav .navbar {
    position: static;
  }

  /* Aufgeklapptes Menü: weißes Feld direkt unter der roten Leiste */
  .container-nav .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid #d91e18;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  }
  .container-nav ul.mod-menu {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  .container-nav ul.mod-menu > li {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #ecd0ce;
  }
  .container-nav ul.mod-menu > li:first-child {
    border-top: 0;
  }

  /* Menüzeilen: Symbol links, Text daneben */
  .container-nav ul.mod-menu > li > a,
  .container-nav ul.mod-menu > li > button.mod-menu__heading {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 52px 14px 20px !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: #222 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
  }
  .container-nav ul.mod-menu > li > a > span[class*="fa"],
  .container-nav ul.mod-menu > li > button.mod-menu__heading > span[class*="fa"] {
    flex: 0 0 22px;
    width: 22px;
    padding: 0 !important;
    font-size: 16px;
    text-align: center;
    color: #d91e18;
  }
  .container-nav ul.mod-menu > li.active > a {
    font-weight: 500;
    color: #d91e18 !important;
    box-shadow: inset 3px 0 0 #d91e18 !important;
  }

  /* Pfeil für Untermenüs */
  .container-nav ul.mod-menu .mm-toggler-link {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 50px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .container-nav ul.mod-menu .mm-toggler::after {
    content: "\f078";
    position: absolute;
    top: 50%;
    right: 20px;
    width: auto;
    height: auto;
    margin: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    color: #d91e18;
    border: 0;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
  }
  .container-nav ul.mod-menu .mm-toggler[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .container-nav ul.mod-menu .mm-toggler-nolink::after {
    top: 25px;
  }

  /* Untermenü */
  .container-nav ul.mod-menu ul.mm-collapse {
    position: static !important;
    inset: auto !important;
    display: block;
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: #faf3f2 !important;
    border: 0 !important;
    border-top: 1px solid #ecd0ce !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .container-nav ul.mod-menu ul.mm-collapse:not(.mm-show):not(.mm-collapsing) {
    display: none;
  }
  .container-nav ul.mod-menu ul.mm-collapse > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #f0dcda;
  }
  .container-nav ul.mod-menu ul.mm-collapse > li:first-child {
    border-top: 0;
  }
  .container-nav ul.mod-menu ul.mm-collapse a {
    position: relative;
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 20px 13px 56px !important;
    font-size: 14px !important;
    line-height: 1.4;
    text-align: left !important;
    color: #444 !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  .container-nav ul.mod-menu ul.mm-collapse a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 31px;
    width: 6px;
    height: 6px;
    background: #d91e18;
    border-radius: 50%;
    transform: translateY(-50%);
  }
  .container-nav ul.mod-menu ul.mm-collapse li.active > a {
    font-weight: 500;
    color: #d91e18 !important;
  }
}


/* --- Hauptmenü am PC (ab 992 px) --- */
@media (min-width: 992px) {

  .container-nav ul.mod-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  .container-nav ul.mod-menu > li {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Menüpunkte: klein, gesperrt, Großbuchstaben, Linie wächst beim Darüberfahren */
  .container-nav ul.mod-menu > li > a,
  .container-nav ul.mod-menu > li > button.mod-menu__heading {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92) !important;
    background: linear-gradient(#fff, #fff) no-repeat 14px calc(100% - 6px) / 0 2px !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    transition: background-size 0.25s ease, color 0.2s ease;
  }
  .container-nav ul.mod-menu > li > a:hover,
  .container-nav ul.mod-menu > li > button.mod-menu__heading:hover,
  .container-nav ul.mod-menu > li > button.mod-menu__heading[aria-expanded="true"],
  .container-nav ul.mod-menu > li.active > a {
    color: #fff !important;
    background-size: calc(100% - 28px) 2px !important;
  }
  .container-nav ul.mod-menu > li > a > span[class*="fa"],
  .container-nav ul.mod-menu > li > button.mod-menu__heading > span[class*="fa"] {
    padding: 0 !important;
    font-size: 12px;
    opacity: 0.85;
  }

  /* kleiner Pfeil bei Menüpunkten mit Untermenü */
  .container-nav ul.mod-menu > li > button.mod-menu__heading::after {
    content: "\f078";
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 2px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    line-height: 1;
    border: 0;
    transform: none;
    transition: transform 0.2s ease;
  }
  .container-nav ul.mod-menu > li > button.mod-menu__heading[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Untermenü: weißes Feld, dünne Linie oben, weicher Schatten */
  .container-nav ul.mod-menu > li > ul.mm-collapse {
    position: absolute !important;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none;
    background: #fff !important;
    border: 0 !important;
    border-top: 2px solid #fff !important;
    border-radius: 0 !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
  }
  .container-nav ul.mod-menu > li > ul.mm-collapse:not(.mm-show):not(.mm-collapsing) {
    display: none;
  }
  .container-nav ul.mod-menu ul.mm-collapse > li {
    margin: 0 !important;
    padding: 0 !important;
  }
  .container-nav ul.mod-menu ul.mm-collapse a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important;
    white-space: nowrap;
    color: #222 !important;
    background: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .container-nav ul.mod-menu ul.mm-collapse a > span[class*="fa"] {
    padding: 0 !important;
    font-size: 10px;
    color: #d91e18;
  }
  .container-nav ul.mod-menu ul.mm-collapse a:hover,
  .container-nav ul.mod-menu ul.mm-collapse li.active > a {
    color: #d91e18 !important;
    background: #faf3f2 !important;
  }
}

/* --- Hauptmenü am PC: auf kleineren Bildschirmen ohne Symbole und enger, damit alles in eine Zeile passt --- */
@media (min-width: 992px) and (max-width: 1599.98px) {
  .container-nav ul.mod-menu > li > a,
  .container-nav ul.mod-menu > li > button.mod-menu__heading {
    padding: 12px 9px !important;
    font-size: 12px !important;
    letter-spacing: 0.06em;
    background-position: 9px calc(100% - 6px) !important;
  }
  .container-nav ul.mod-menu > li > a:hover,
  .container-nav ul.mod-menu > li > button.mod-menu__heading:hover,
  .container-nav ul.mod-menu > li > button.mod-menu__heading[aria-expanded="true"],
  .container-nav ul.mod-menu > li.active > a {
    background-size: calc(100% - 18px) 2px !important;
  }
  .container-nav ul.mod-menu > li > a > span[class*="fa"],
  .container-nav ul.mod-menu > li > button.mod-menu__heading > span[class*="fa"] {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1139.98px) {
  .container-nav ul.mod-menu > li > a,
  .container-nav ul.mod-menu > li > button.mod-menu__heading {
    padding: 12px 6px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em;
    background-position: 6px calc(100% - 6px) !important;
  }
  .container-nav ul.mod-menu > li > a:hover,
  .container-nav ul.mod-menu > li > button.mod-menu__heading:hover,
  .container-nav ul.mod-menu > li > button.mod-menu__heading[aria-expanded="true"],
  .container-nav ul.mod-menu > li.active > a {
    background-size: calc(100% - 12px) 2px !important;
  }
}


/* ==================================================
   3. FOOTER & UNTERE LEISTE
   ================================================== */

/* Footer-Höhe reduzieren */
.footer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Die Module der unteren Leisten stecken im Footer. Nach dem Verschieben der Leiste
   bleibt davon nur ein leerer Rest übrig, der Höhe kostet – den ausblenden */
.container-footer .footer.no-card:not(:has(nav)) {
    display: none !important;
}

/* Inneren Footer-Abstand reduzieren */
.footer .grid-child {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Bottom-Menü: Links nebeneinander */
.footer .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 4px 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menüeinträge */
.footer .mod-menu > li {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menülinks */
.footer .mod-menu a {
    display: inline-block;
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobilgeräte */
@media (max-width: 767px) {

    .footer .grid-child {
        padding: 8px 12px !important;
    }

    .footer .mod-menu {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px 12px !important;
    }

}

/* Platz für die feste untere Leiste (Handy) */
@media (max-width: 767.98px) {
  body {
    padding-bottom: 72px;
  }

  .back-to-top-link {
    bottom: 80px;
  }
}


/* ==================================================
   4. SOCIAL MEDIA
   ================================================== */

.kg-insta,
.kg-facebook {
    display: inline-flex !important;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 6px;
    margin: 0 !important;
    padding: 0;
    font-size: 0 !important;
    text-decoration: none !important;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 16px 16px, cover;
    transition: .25s ease;
}

.kg-insta {
    background-color: #d62976;
    background-image:
        url("https://cdn.simpleicons.org/instagram/FFFFFF"),
        linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.kg-facebook {
    background-color: #1877f2;
    background-image:
        url("https://cdn.simpleicons.org/facebook/FFFFFF");
    background-size: 16px 16px;
}

.kg-insta:hover,
.kg-facebook:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
}


/* ==================================================
   5. TERMIN-STREIFEN (Handy-Kopie des JEvents-Moduls)
   ================================================== */

.kg-termin,
.kg-termin.card,
.kg-termin .card-body {
  background: rgb(217, 30, 24) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.kg-termin .card-body,
.kg-termin:not(.card) {
  padding: 7px clamp(20px, 4vw, 48px) !important;
}

.kg-termin .card-header {
  display: none;
}

.kg-termin .my-jevent {
  gap: 10px;
  padding: 0 !important;
  border-bottom: 0;
}

.kg-termin .my-jevent-date {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background: #fff;
  color: rgb(217, 30, 24);
}

.kg-termin .my-jevent-day {
  font-size: 16px;
  line-height: 17px;
}

.kg-termin .my-jevent-month {
  font-size: 8px;
  line-height: 9px;
}

.kg-termin .my-jevent-time,
.kg-termin .my-jevent-time span {
  font-size: 11px;
  line-height: 13px;
  color: #fff !important;
  opacity: .85;
}

.kg-termin .my-jevent-time {
  margin: 0 0 1px 0 !important;
}

.kg-termin .my-jevent-title {
  font-size: 14px;
  line-height: 17px;
}

.kg-termin .my-jevent-title a,
.kg-termin .my-jevent-title a:hover {
  color: #fff !important;
  text-decoration: none !important;
}


/* ==================================================
   6. INHALTE
   ================================================== */

/* Hover-Effekt für verlinkte Font-Awesome-Icons */
.com-content-article__body a:has(.fa-solid),
.com-content-article__body a:has(.fa-regular),
.com-content-article__body a:has(.fa-brands) {
    text-decoration: none;
}

.com-content-article__body a:hover > span.fa-solid,
.com-content-article__body a:hover > span.fa-regular,
.com-content-article__body a:hover > span.fa-brands {
    display: inline-block;
    transform: scale(1.12);
    transition: transform 0.2s ease;
}

/* ==================================================
   6a. ACCORDION
   ================================================== */

/* Breite und Zentrierung */
.accordion {
    width: 80% !important;
    margin: 0 auto !important;
}

/* Trennlinien */
.accordion-item {
    border: 0 !important;
    border-bottom: 1px solid #D42527 !important;
    border-radius: 0 !important;
}

.accordion-item:first-child {
    border-top: 1px solid #D42527 !important;
}

/* Überschriften – Grundzustand */
.accordion-button {
    color: #D42527 !important;
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: left;
}

/* Geöffnet und Hover */
.accordion-button:not(.collapsed),
.accordion-button:hover {
    color: #ffffff !important;
    background-color: #D42527 !important;
}

/* Pfeil – geschlossen: rot */
.accordion-button::after {
    filter: invert(18%) sepia(89%) saturate(4000%)
            hue-rotate(345deg) brightness(90%) contrast(100%) !important;
}

/* Pfeil – geöffnet oder Hover: weiß */
.accordion-button:not(.collapsed)::after,
.accordion-button:hover::after {
    filter: brightness(0) invert(1) !important;
}

/* Fokus */
.accordion-button:focus {
    box-shadow: none !important;
}

/* Inhalt und Zeilenumbruch */
.accordion-body {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}


/* ==================================================
   6b. TABS
   ================================================== */

/* Tab-Leiste – Breite und Zentrierung */
.nav-tabs {
    width: 80% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Tab-Elemente */
.nav-tabs > .nav-item {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-tabs > .nav-item > strong {
    display: block;
}

/* Tab-Überschriften – Grundzustand */
.nav-tabs .nav-link {
    color: #D42527 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    text-align: center;

    transition: none !important;
}

/* Aktiver Tab und Hover */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background-color: #D42527 !important;
    background-image: none !important;
    border: 1px solid #D42527 !important;
    box-shadow: none !important;
    position: relative !important;
}

/* Schwarzer Unterstrich – 3 Pixel */
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link:hover::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    background: #212529 !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* Fokus */
.nav-tabs .nav-link:focus {
    outline: none !important;
}

/* Tab-Inhalt */
.tab-content {
    width: 80% !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: none !important;
}


/* ==================================================
   6c. ACCORDION & TABS AUF DEM HANDY
   ================================================== */

@media (max-width: 767px) {

    .accordion,
    .nav-tabs,
    .tab-content {
        width: 100% !important;
    }

}


/* ==================================================
   7. KONTAKT
   ================================================== */

/* --- Kontaktliste --- */
.com-contact-category {
  max-width: 720px;
  margin: 0 auto;
}
.com-contact-category .category-desc,
.com-contact-category .category-desc p {
  margin: 0 0 14px;
}
.com-contact-category .category-desc span {
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
}
.com-contact-category table.category {
  display: block;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #d91e18;
}
.com-contact-category table.category thead {
  display: none;
}
.com-contact-category table.category tbody {
  display: block;
}
.com-contact-category table.category tr {
  position: relative;
  display: block;
  padding: 12px 44px 12px 16px;
  background: #fff;
  border: 0;
  border-top: 1px solid #d91e18;
}
.com-contact-category table.category tr::after {
  content: "\f054";
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  color: #d91e18;
}
.com-contact-category table.category th,
.com-contact-category table.category td {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.com-contact-category table.category th {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.com-contact-category table.category th a {
  color: #222;
  text-decoration: none;
}
.com-contact-category table.category th a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.com-contact-category table.category td {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
}
.com-contact-category__pagination {
  display: none;
}

/* --- Kontakt-Detailseite --- */
.com-contact {
  max-width: 720px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}
.com-contact .page-header {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.com-contact h1 {
  margin: 0;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5 !important;
  color: #222;
}
.com-contact h2 {
  margin: 22px 0 10px;
  padding-top: 12px;
  border-top: 1px solid #d91e18;
  font-size: 11px !important;
  font-weight: 500;
  line-height: 1.5 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}
.com-contact dl {
  margin: 0;
}
.com-contact__position dt {
  float: none;
  width: auto;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #666;
}
.com-contact__position dd {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: #222;
}
.com-contact__address {
  display: flex;
  align-items: center;
  gap: 10px;
}
.com-contact__address dt {
  float: none;
  width: auto;
  margin: 0;
  color: #d91e18;
}
.com-contact__address dd {
  margin: 0;
}
.com-contact a {
  color: #d91e18;
}
.com-contact legend {
  float: none;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.5 !important;
  color: #222;
}
.com-contact__form form.well {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.com-contact .control-group {
  margin: 0 0 12px;
}
.com-contact .control-group.field-spacer .control-label {
  font-size: 12px;
  color: #666;
}
.com-contact .control-label label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #666;
}
.com-contact .control-label .star,
.com-contact .control-label .red {
  color: #d91e18;
}
.com-contact .form-control {
  padding: 9px 12px;
  font-size: 15px;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 0;
  box-shadow: none;
}
.com-contact .form-control:focus {
  border-color: #d91e18;
  box-shadow: none;
}
.com-contact .form-check-input {
  accent-color: #d91e18;
}
.com-contact .btn-primary {
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #d91e18;
  border: 0;
  border-radius: 0;
}
.com-contact .btn-primary:hover,
.com-contact .btn-primary:focus {
  background: #b81812;
}
.com-contact textarea.form-control {
  height: 140px;
}


/* ==========================================
   8. JEVENTS (Terminkalender)
   ========================================== */

/* --- Grundlayout --- */
#jevents {
  max-width: 720px;
  margin: 0 auto;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}
#jevents #jevents_header,
#jevents #jevents_body {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#jevents #jevents_body {
  display: flex !important;
  flex-direction: column;
}
#jevents #jevents_body > * {
  order: 5;
}
#jevents #jevents_body > .new-navigation {
  order: 1;
}
#jevents #jevents_body > .month_date {
  order: 2;
}
#jevents #jevents_body > .jev_toprow {
  order: 3;
}
#jevents #jevents_body > .cal_top_day_names {
  order: 4;
}
#jevents h2.contentheading {
  margin: 0 0 14px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #222 !important;
}
#jevents ul.actions {
  display: none !important;
}
#jevents a {
  color: #d91e18;
}
#jevents .event_legend_container {
  display: none !important;
}

/* --- Navigation (Nach Jahr / Monat / Woche / Heute / Gehe zu Monat) --- */
#jevents .new-navigation {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 !important;
  padding: 0 !important;
  background: #ecd0ce !important;
  border: 0 !important;
  border-top: 1px solid #d91e18 !important;
  box-shadow: none !important;
}
#jevents .new-navigation .nav-items {
  display: contents !important;
}
#jevents .new-navigation .nav-items > div,
#jevents #nav-search {
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#jevents .new-navigation .nav-items a {
  display: block;
  width: 100%;
  padding: 9px 2px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  color: #444 !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
}
#jevents #nav-search a {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 9px 2px;
}
#jevents #nav-search img {
  display: block;
  width: 16px;
  height: 16px;
}
#jevents #jumpto {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border: 0 !important;
}
#jevents #jumpto form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
#jevents #jumpto select {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 34px;
  margin: 0;
  padding: 0 4px 0 6px;
  font-size: 12px !important;
  color: #222;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 0;
}
#jevents #jumpto button {
  flex: 0 0 auto;
  width: auto;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  font-size: 10px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff !important;
  background: #d91e18 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- Kopfzeile mit Zurück / Vor (Jahr, Monat, Woche, Tag) --- */
#jevents .jev_toprow {
  position: static !important;
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#jevents .jev_header2 {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid #d91e18 !important;
}
#jevents .jev_header2 .previousmonth,
#jevents .jev_header2 .nextmonth,
#jevents .jev_header2 .currentmonth {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#jevents .jev_header2 .currentmonth {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #222 !important;
}
#jevents .jev_header2 .previousmonth a,
#jevents .jev_header2 .nextmonth a {
  display: inline-block;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d91e18 !important;
  background: none !important;
  border: 0 !important;
  text-decoration: none !important;
}
#jevents .jev_header2 .previousmonth a::before {
  content: "\2039\00a0";
  font-size: 14px;
}
#jevents .jev_header2 .nextmonth a::after {
  content: "\00a0\203A";
  font-size: 14px;
}
/* Woche und Tag: langer Titel in eigener Zeile, Zurück/Vor darunter */
#jevents:not(:has(.jev_listview > .jev_daysnames)) .jev_header2 {
  flex-wrap: wrap;
  row-gap: 6px;
}
#jevents:not(:has(.jev_listview > .jev_daysnames)) .jev_header2 .currentmonth {
  order: -1;
  flex: 0 0 100%;
  text-align: center;
}

/* --- Terminlisten (Jahr, Woche, Tag) --- */
#jevents #jev_maincal {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #d91e18 !important;
  box-shadow: none !important;
}
#jevents .jev_daysnames {
  display: block !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 12px 16px 2px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18 !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid #d91e18 !important;
  border-radius: 0 !important;
}
#jevents a.ev_link_weekday {
  display: block;
  text-decoration: none !important;
}
#jevents .jev_listrow {
  margin: 0 !important;
  padding: 0 16px 6px !important;
  background: #fff !important;
  border: 0 !important;
}
#jevents ul.ev_ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#jevents li.ev_td_li {
  margin: 0 !important;
  padding: 10px 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #666;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #ecd0ce !important;
  border-radius: 0 !important;
}
#jevents li.ev_td_li:first-child {
  border-top: 0 !important;
}
#jevents li.ev_td_li a.ev_link_row {
  display: block;
  margin: 2px 0 0 !important;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  color: #222 !important;
  text-decoration: none !important;
}
#jevents li.ev_td_li em {
  font-style: normal;
}
#jevents li.ev_td_li em a {
  color: #666 !important;
  text-decoration: none !important;
}
#jevents .list_no_e {
  padding: 12px 0 !important;
  font-size: 13px !important;
  color: #666 !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
}
#jevents .jev_pagination label.sr-only,
#jevents .jev_pagination .limit,
#jevents .jev_pagination .text-end {
  display: none !important;
}

/* --- Monatsansicht (Kalenderraster) --- */
#jevents .month_date {
  margin: 0 !important;
  padding: 12px 16px 0 !important;
  text-align: center;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid #d91e18 !important;
}
#jevents .month_date .month_title,
#jevents .month_date .month_title_year {
  display: inline !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #222 !important;
}
#jevents .jev_monthv .jev_header2 {
  padding: 4px 16px 8px !important;
  border-top: 0 !important;
}
#jevents .jev_monthv .jev_header2 .currentmonth {
  display: none !important;
}
#jevents table.cal_top_day_names,
#jevents table.cal_table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  table-layout: fixed;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
  border: 0 !important;
}
#jevents td.cal_daysnames {
  width: 14.2857% !important;
  padding: 6px 0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-align: center !important;
  text-transform: uppercase;
  color: #666 !important;
  background: #fff !important;
  border: 0 !important;
}
#jevents td.cal_daysnames span {
  font-size: inherit !important;
  color: inherit !important;
}
#jevents table.cal_table td {
  width: 14.2857% !important;
  height: 46px !important;
  padding: 0 !important;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #c4c4c4 !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid #ecd0ce !important;
}
#jevents table.cal_table td.cal_daysoutofmonth {
  padding: 9px 0 !important;
}
#jevents table.cal_table tr:last-child td {
  border-bottom: 1px solid #d91e18 !important;
}
#jevents .cal_daylink {
  display: block;
  padding: 9px 0 4px;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  color: #222 !important;
  text-decoration: none !important;
}
#jevents .cal_daylink .listview {
  display: none !important;
}
#jevents .cal_daylink .calview {
  display: inline-block;
  min-width: 24px;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 24px;
  color: inherit !important;
  border-radius: 50%;
}
#jevents td.cal_today .calview {
  color: #fff !important;
  background: #d91e18 !important;
}
#jevents td.cal_dayshasevents .cal_daylink::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 1px auto 0;
  background: #d91e18;
  border-radius: 50%;
}
#jevents .event_div_1 {
  display: none !important;
}
@media (min-width: 768px) {
  #jevents table.cal_table td {
    height: 86px !important;
  }
  #jevents td.cal_dayshasevents .cal_daylink::after {
    display: none;
  }
  #jevents .event_div_1 {
    display: block !important;
    padding: 0 4px 4px;
    text-align: left;
  }
  #jevents .event_div_1 .month_cell_st {
    box-sizing: border-box;
    width: auto !important;
    padding: 2px 5px !important;
    background: #fbeceb !important;
    border: 0 !important;
    border-left: 2px solid #d91e18 !important;
  }
  #jevents .event_div_1 .cal_titlelink {
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
    color: #222 !important;
    text-decoration: none !important;
  }
}

/* --- Termindetails (einzelner Termin) --- */
#jevents .jev_evdt {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid #d91e18 !important;
  border-bottom: 1px solid #d91e18 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#jevents .jev_evdt_header,
#jevents .jev_evdt_icons {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#jevents .jev_evdt_title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #222 !important;
}
#jevents .jev_eventdetails_body {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#jevents .jev_evdt_summary {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: #444;
}
#jevents .jev_evdt_hits {
  display: none !important;
}
#jevents .jev_evdt_creator,
#jevents .jev_evdt_contact {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: #666;
}
#jevents .jev_evdt_creator .creator {
  font-weight: 400;
}
#jevents .jev_evdt_desc {
  margin: 0 !important;
  padding: 0 !important;
}
#jevents .jev_evdt_location {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: #444;
}
#jevents .jev_evdt_location .location {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}


/* --- Suchansicht (Lupe) --- */
#jevents fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#jevents fieldset > br,
#jevents .jev_pagination form > br {
  display: none;
}
#jevents legend.ev_fieldset {
  display: none;
}
#jevents .jev_toprowcat,
#jevents .jev_headercat {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 0 !important;
}
#jevents .jev_toprowcat {
  border-top: 1px solid #d91e18 !important;
}
#jevents .jev_headercat h2 {
  margin: 0 !important;
  padding: 12px 16px 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #222 !important;
}
#jevents .jev_catdesc {
  padding: 2px 0 8px;
  font-size: 12px;
  color: #666;
}
#jevents fieldset .jev_pagination {
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #d91e18;
}
#jevents .jev_pagination form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 8px;
  margin: 0;
}
#jevents .jev_pagination input.inputbox {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  font-size: 14px;
  color: #222;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 0;
  box-shadow: none;
}
#jevents .jev_pagination input.inputbox:focus {
  border-color: #d91e18;
  outline: 0;
}
#jevents .jev_pagination input.button {
  grid-column: 3;
  grid-row: 1;
  width: auto;
  height: 38px;
  margin: 0;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff !important;
  background: #d91e18 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#jevents .jev_pagination input[type="checkbox"] {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  accent-color: #d91e18;
}
#jevents .jev_pagination label {
  grid-column: 2 / 4;
  grid-row: 2;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}


/* --- Terminliste (Listenansicht mit Titel, Datum, Zeit, Ort) --- */
#jevents .rc-handle-container {
  display: none !important;
}
#jevents #eventlist {
  margin: 0;
  padding: 0;
}
#jevents #adminForm {
  margin: 0;
}
#jevents table.eventlist {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid #d91e18 !important;
}
#jevents table.eventlist thead {
  display: none;
}
#jevents table.eventlist tbody {
  display: block;
}
#jevents table.eventlist tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 12px 16px;
  background: #fff !important;
  border: 0;
  border-top: 1px solid #d91e18;
}
#jevents table.eventlist td {
  display: block;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}
#jevents table.eventlist td span:empty {
  display: none;
}
#jevents table.eventlist td:nth-child(3) {
  order: 1;
}
#jevents table.eventlist td:nth-child(2) {
  order: 2;
}
#jevents table.eventlist td:nth-child(2)::before {
  content: "\00b7";
  margin: 0 6px;
}
#jevents table.eventlist td:nth-child(1) {
  order: 3;
  flex: 0 0 100%;
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #222;
}
#jevents table.eventlist td:nth-child(4) {
  order: 4;
  flex: 0 0 100%;
  font-size: 13px;
  color: #444;
}
#jevents table.eventlist td:nth-child(4)::before {
  content: attr(data-label);
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}


/* ==================================================
   9. TOLLITÄTEN (Prinzen- und Kinderprinzenliste, <div class="kg-prinzen">)
   ================================================== */

.kg-prinzen {
  max-width: 720px;
  margin: 0 auto;
  border-bottom: 1px solid #d91e18;
}
.kg-prinzen details {
  background: #fff;
  border-top: 1px solid #d91e18;
}
.kg-prinzen summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 44px 13px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #222;
  list-style: none;
  cursor: pointer;
  position: relative;
}
.kg-prinzen summary::-webkit-details-marker {
  display: none;
}
.kg-prinzen summary::after {
  content: "\f078";
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: #d91e18;
  transition: transform 0.2s ease;
}
.kg-prinzen details[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.kg-prinzen summary b {
  flex: 0 0 44px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #d91e18;
}
.kg-prinzen details > p {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 10px;
  margin: 0;
  padding: 0 16px 8px 74px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
.kg-prinzen details > p:last-child {
  padding-bottom: 14px;
}
.kg-prinzen details > p span {
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
}
/* Umschalter Prinzen | Kinderprinzen */
.kg-prinzen .kg-wechsel {
  display: flex;
  margin: 0 0 14px;
}
.kg-prinzen .kg-wechsel a {
  flex: 1 1 50%;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #d91e18;
  background: #fff;
  border: 1px solid #d91e18;
}
.kg-prinzen .kg-wechsel a + a {
  margin-left: -1px;
}
.kg-prinzen .kg-wechsel a.aktiv {
  color: #fff;
  background: #d91e18;
}

/* Jahre ohne Angaben: keine Aufklapp-Funktion */
.kg-prinzen details:not(:has(> p)) > summary {
  cursor: default;
}
.kg-prinzen details:not(:has(> p)) > summary::after {
  display: none;
}

@media (max-width: 575.98px) {
  .kg-prinzen details > p {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 74px;
    padding-bottom: 10px;
  }
}


/* ==================================================
   10. SESSIONSHEFTE (Beitrag mit <div class="kg-hefte">)
   ================================================== */

.kg-hefte {
  max-width: 720px;
  margin: 0 auto;
  border-bottom: 1px solid #d91e18;
}
.kg-hefte > p {
  margin-bottom: 14px;
}
.kg-hefte a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 52px 14px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  color: #222;
  background: #fff;
  border-top: 1px solid #d91e18;
  transition: background-color 0.15s ease;
}
.kg-hefte a:hover,
.kg-hefte a:focus-visible {
  color: #222;
  background: #faf3f2;
}
.kg-hefte a b {
  flex: 0 0 44px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #d91e18;
}
.kg-hefte a span {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #666;
}
.kg-hefte a::after {
  content: "\f019";
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: #d91e18;
}


/* ==================================================
   11. MODULE (Seitenleiste: Nächste Veranstaltung, Tollitäten Rondell …)
   ================================================== */

.sidebar-left.card,
.sidebar-right.card {
  margin: 0 0 20px !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid #d91e18 !important;
  border-bottom: 1px solid #d91e18 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sidebar-left.card > .card-header,
.sidebar-right.card > .card-header {
  margin: 0 !important;
  padding: 14px 16px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.sidebar-left.card > .card-body,
.sidebar-right.card > .card-body {
  padding: 0 16px 16px !important;
  background: transparent !important;
}


/* Instagram-Modul: am Handy nur auf der Startseite (Modulklasse „kg-insta-modul“, Startseite = Menü-ID 102) */
@media (max-width: 767.98px) {
  body:not(.itemid-102) .kg-insta-modul {
    display: none !important;
  }
}


/* Handy: mehr Abstand zwischen Beitrag und den Modulen der rechten Seitenleiste */
@media (max-width: 767.98px) {
  .container-sidebar-right {
    margin-top: 44px !important;
  }
}


/* Tollitäten Rondell: am Handy nur auf der Startseite (Modulklasse „kg-rondell“, Startseite = Menü-ID 102) */
@media (max-width: 767.98px) {
  body:not(.itemid-102) .kg-rondell {
    display: none !important;
  }
}


/* ==================================================
   12. PLAKAT & NEWS (Startseite + News-Seite)
   ================================================== */

.kg-plakat {
  box-sizing: border-box;
  max-width: 720px;
  margin: 20px auto 0;
  background: #fff;
  border-top: 1px solid #d91e18;
  border-bottom: 1px solid #d91e18;
}
.kg-plakat .kg-label {
  margin: 0;
  padding: 14px 16px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}
/* ein, zwei oder drei Plakate: teilen sich die Breite, ein einzelnes bleibt begrenzt */
.kg-plakat-reihe {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 0 16px 16px;
}
.kg-plakat-reihe > a {
  display: block;
  flex: 0 1 460px;
  min-width: 0;
}
.kg-plakat-reihe img {
  display: block;
  width: 100%;
  height: auto;
}

/* Handy: Plakate einzeln durchwischen, Pfeile zeigen, dass es weitergeht */
@media (max-width: 767.98px) {
  .kg-plakat {
    position: relative;
  }
  .kg-plakat-reihe {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .kg-plakat-reihe::-webkit-scrollbar {
    display: none;
  }
  .kg-plakat-reihe > a {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  /* Pfeile: echte Schaltflächen, wo der Browser es kann (Chrome/Edge) */
  .kg-plakat-reihe {
    anchor-name: --kg-plakate;
  }
  .kg-plakat-reihe::scroll-button(inline-start),
  .kg-plakat-reihe::scroll-button(inline-end) {
    position: fixed;
    position-anchor: --kg-plakate;
    top: calc(anchor(center) - 16px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #d91e18;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d91e18;
    border-radius: 50%;
    cursor: pointer;
  }
  .kg-plakat-reihe::scroll-button(inline-start) {
    content: "\f053" / "Vorheriges Plakat";
    left: calc(anchor(left) + 22px);
  }
  .kg-plakat-reihe::scroll-button(inline-end) {
    content: "\f054" / "Nächstes Plakat";
    left: calc(anchor(right) - 54px);
  }
  .kg-plakat-reihe::scroll-button(inline-start):disabled,
  .kg-plakat-reihe::scroll-button(inline-end):disabled {
    opacity: 0.35;
    cursor: default;
  }
  .kg-plakat-reihe:not(:has(> a + a))::scroll-button(inline-start),
  .kg-plakat-reihe:not(:has(> a + a))::scroll-button(inline-end) {
    content: none;
  }

  /* Fallback für Browser ohne Schaltflächen: Pfeile nur als Hinweis zum Wischen */
  @supports not selector(::scroll-button(inline-start)) {
    .kg-plakat:has(.kg-plakat-reihe > a + a)::before,
    .kg-plakat:has(.kg-plakat-reihe > a + a)::after {
      position: absolute;
      top: 50%;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 13px;
      color: #d91e18;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid #d91e18;
      border-radius: 50%;
      pointer-events: none;
    }
    .kg-plakat:has(.kg-plakat-reihe > a + a)::before {
      content: "\f053";
      left: 22px;
    }
    .kg-plakat:has(.kg-plakat-reihe > a + a)::after {
      content: "\f054";
      right: 22px;
    }
  }
}

/* Bild-Fenster (Mediabox CK) am Handy: keine schwarzen Flächen um das Bild */
#mbCenter.mediaboxckmobile,
#mbCenter.mediaboxckmobile #mbContainer {
  background: transparent !important;
}

/* News im Hero (Modul „Artikel – Neueste“, Titel „News Hero“, 1 Beitrag) */
.kg-hero-news {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #d91e18;
  font-size: 14px;
  line-height: 1.4;
  color: #444;
}
.kg-hero-news ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kg-hero-news li {
  margin: 0;
  padding: 0;
}
.kg-hero-news li > * {
  margin: 0;
}
.kg-hero-news li a {
  font-weight: 500;
  text-decoration: none;
  color: #222;
}
.kg-hero-news li a {
  pointer-events: none;
}
.kg-hero-news a:not(.kg-hero-news-link) {
  color: #222 !important;
  text-decoration: none !important;
}
.kg-hero-news a.kg-hero-news-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}
.kg-hero-news time,
.kg-hero-news .mod-articles-date,
.kg-hero-news .published {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #d91e18;
}
.kg-hero-news p,
.kg-hero-news .mod-articles-introtext,
.kg-hero-news .introtext {
  font-size: 13px;
  color: #555;
}

/* Schriftgrößen erzwingen (Theme macht Überschriften und Datum sonst zu groß) */
.kg-hero-news * {
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: normal;
}
.kg-hero-news :is(h1, h2, h3, h4, h5, h6),
.kg-hero-news a {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.kg-hero-news time,
.kg-hero-news dd,
.kg-hero-news [class*="date"],
.kg-hero-news [class*="info"],
.kg-hero-news [class*="published"],
.kg-hero-news [class*="created"] {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999 !important;
}

/* Handy: schmale Zeile am unteren Rand des Heros */
@media (max-width: 767.98px) {
  .kg-hero-news {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px clamp(20px, 4vw, 48px);
  }
  .kg-hero-news li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* eine Zeile: Datum, dann Titel; der Text erst auf der Seite „Neues“ */
  .kg-hero-news :is(p, [class*="intro"], [class*="icon"], [class*="fa-"]) {
    display: none !important;
  }
  .kg-hero-news :is(div, article, section, ul, li, dl):not(.kg-hero-news-link):not([class*="intro"]) {
    display: flex !important;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Handy-Symbol vor der Zeile */
  .kg-hero-news {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .kg-hero-news::before {
    content: "\f0a1";
    flex: 0 0 auto;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: #d91e18;
  }
  .kg-hero-news > :not(.kg-hero-news-link) {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Datum: nur der Tag, die Uhrzeit bricht in eine zweite Zeile um und wird abgeschnitten */
  .kg-hero-news :is(dl, dd, dt, time) {
    order: -1;
    flex: 0 0 auto;
    width: min-content;
    height: 1.4em;
    margin: 0 !important;
    overflow: hidden;
    white-space: normal;
  }
  .kg-hero-news :is(h1, h2, h3, h4, h5, h6) {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kg-hero-news :is(h1, h2, h3, h4, h5, h6),
  .kg-hero-news a {
    font-size: 14px !important;
  }
}

/* PC: Karte oben rechts im Hero */
@media (min-width: 768px) {
  .kg-hero-news {
    top: 14px;
    right: 16px;
    width: min(300px, 36%);
    padding: 10px 14px 12px;
  }
  .kg-hero-news::before {
    content: "Aktuelles";
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d91e18;
  }
  .kg-hero-news p,
  .kg-hero-news .mod-articles-introtext,
  .kg-hero-news .introtext {
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* News-Seite (Menüpunkt „Kategorie-Blog“) */
.com-content-category-blog .blog-items {
  max-width: 720px;
  margin: 0 auto;
}
.com-content-category-blog .blog-item {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: #fff;
  border-top: 1px solid #d91e18;
  border-bottom: 1px solid #d91e18;
}
.com-content-category-blog .blog-item h2 {
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.4;
  color: #222;
}
.com-content-category-blog .blog-item .article-info {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #d91e18;
}


/* ==================================================
   13. KARTENVORVERKAUF (untere Leiste am Handy)
   Ist das Modul mit der Leiste „bottom-nav-karten“ veröffentlicht,
   wird die normale Leiste „bottom-nav“ ausgeblendet.
   ================================================== */

body:has(#bottom-nav-karten) #bottom-nav {
  display: none !important;
}

/* Hinweis auf die aktuelle Seite in der unteren Leiste (beide Leisten).
   Die Seite wird über die Menü-ID im body erkannt (itemid-…):
   Termine 203 · Medien 201 · Kontakt 197 · Karten 214 */

:is(#bottom-nav, #bottom-nav-karten) a {
  position: relative;
}
body.itemid-102 :is(#bottom-nav, #bottom-nav-karten) a:is([href="/"], [href$=".de"], [href$=".de/"], [href="/index.php"])::after,
body.itemid-203 :is(#bottom-nav, #bottom-nav-karten) a[href$="termine"]::after,
body.itemid-201 :is(#bottom-nav, #bottom-nav-karten) a[href$="medien"]::after,
body.itemid-197 :is(#bottom-nav, #bottom-nav-karten) a[href$="kontakt-1"]::after,
body.itemid-214 :is(#bottom-nav, #bottom-nav-karten) a[href$="kartenvorbestellung"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 44px;
  height: 2px;
  background: #fff;
  transform: translateX(-50%);
}


/* ==================================================
   14. TOLLITÄTEN RONDELL am Handy nur auf Startseite, Prinzen, Kinderprinzen
   (Modul bekommt die Modulklasse „kg-rondell“; am PC bleibt es überall sichtbar)
   Menü-IDs: Startseite 102 · Prinzen 212 · Kinderprinzen 121
   ================================================== */

@media (max-width: 767.98px) {
  .kg-rondell {
    display: none !important;
  }
  body.itemid-102 .kg-rondell,
  body.itemid-212 .kg-rondell,
  body.itemid-121 .kg-rondell {
    display: block !important;
  }
}


/* ==================================================
   15. INSTAGRAM-ZEITLEISTE (Beitrag mit <div id="kg-instagram"> + instagram.js)
   ================================================== */

.kg-feed {
  max-width: 720px;
  margin: 0 auto;
}
.kg-posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kg-post {
  position: relative;
  display: block;
  padding: 14px 44px 14px 16px;
  line-height: 1.5;
  text-decoration: none;
  color: #444;
  background: #fff;
  border-top: 1px solid #d91e18;
}
.kg-post.mit-bild {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 14px;
}
.kg-post.mit-bild .kg-post-text {
  padding: 0 44px 0 16px;
}
.kg-post:hover,
.kg-post:focus-visible {
  background: #faf3f2;
}
.kg-post img {
  display: block;
  width: 100%;
  height: auto;
  background: #eee;
}
@media (min-width: 768px) {
  .kg-post.mit-bild {
    flex-direction: row;
    align-items: stretch;
    gap: 18px;
    padding: 0;
  }
  .kg-post.mit-bild .kg-post-text {
    padding: 16px 48px 16px 0;
  }
  .kg-post img {
    flex: 0 0 320px;
    width: 320px;
    height: auto;
    align-self: flex-start;
  }
}
.kg-post-text {
  flex: 1;
  min-width: 0;
}
.kg-post b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #d91e18;
}
.kg-post span {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: #222;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.kg-post::after {
  content: "\f08e";
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  color: #d91e18;
}
.kg-feed-profil {
  display: block;
  margin-top: 14px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #d91e18;
  background: #fff;
  border-top: 1px solid #d91e18;
}
.kg-feed-profil:hover,
.kg-feed-profil:focus-visible {
  background: #faf3f2;
}
/* Modul „Neu auf Instagram“ (<div class="kg-instagram-neu">) */
.kg-neu {
  display: block;
  line-height: 1.5;
  text-decoration: none;
  color: #444;
}
.kg-neu img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  background: #eee;
}
.kg-neu b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #d91e18;
}
.kg-neu-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin-top: 2px;
  font-size: 15px;
  color: #222;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.kg-neu:hover .kg-neu-text,
.kg-neu:focus-visible .kg-neu-text {
  color: #d91e18;
}
/* kein Springen beim Nachladen: Platz reservieren, Inhalt blendet sanft ein */
#kg-instagram {
  min-height: 70vh;
}
.kg-instagram-neu {
  min-height: 26rem;
}
.kg-feed,
.kg-neu {
  animation: kg-einblenden 0.35s ease-out;
}
@keyframes kg-einblenden {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kg-feed-stand {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: #999;
}
.kg-feed-hinweis {
  margin: 0;
  font-size: 15px;
  color: #444;
}


/* ==================================================
   16. PHOCA DOWNLOAD (Mitgliederbereich, Dateiaustausch)
   Dieser Abschnitt ersetzt die Phoca-Standardstylesheets
   (phocadownload.css, rating.css); er ist so gebaut, dass er auch
   dann funktioniert, wenn sie noch aktiv sind.
   ================================================== */

/* Technisch nötige Grundlagen */
.pd-cb,
.ph-cb {
  clear: both;
  height: 0;
  overflow: hidden;
  line-height: 0;
}
.ph-right { text-align: right; }
#loading-label-file,
.ph-loading-hidden { display: none; }
.ph-loading-text { text-align: center; font-size: 13px; color: #777; }
.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  opacity: 0;
  outline: none;
  cursor: pointer;
  display: block;
}

/* „Powered by Phoca Download“ ausblenden */
main div[style*="color:#ccc"]:has(a[href*="phoca.cz"]) { display: none !important; }

/* ---------- Seitenbreite wie die anderen Bereiche ---------- */
#phoca-dl-categories-box,
#phoca-dl-category-box,
#phocadownload-upload {
  max-width: 720px;
  margin: 0 auto;
}

/* Seitentitel „Downloadbereich“ über allen Ansichten */
#phoca-dl-categories-box::before,
#phoca-dl-category-box::before,
#phocadownload-upload::before {
  content: "Downloadbereich";
  display: block;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
}

/* ---------- Kategorien-Übersicht: schlanke Liste ---------- */
#phoca-dl-categories-box > .row {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  margin: 0;
  --bs-gutter-x: 0;
}
#phoca-dl-categories-box > .row > .col {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
#phoca-dl-categories-box .card {
  position: relative;
  flex-direction: row;
  align-items: center;
  background: #fff;
  border: 0;
  border-top: 1px solid #ececec;
  border-radius: 0;
  box-shadow: none;
}
#phoca-dl-categories-box > .row > .col:first-child .card { border-top: 1px solid #d91e18; }
#phoca-dl-categories-box .card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 6px 10px 14px;
}
#phoca-dl-categories-box .card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
#phoca-dl-categories-box .card-title a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #222;
  text-decoration: none;
}
#phoca-dl-categories-box .card-title a::before {
  content: "\f07b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
  color: #d91e18;
}
#phoca-dl-categories-box .card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
#phoca-dl-categories-box .card-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 0;
  background: transparent;
  border: 0;
}
#phoca-dl-categories-box .card-footer::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: #d91e18;
}
#phoca-dl-categories-box .card-footer small {
  float: none !important;
  font-size: 12px;
  color: #888 !important;
}
#phoca-dl-categories-box .pd-categories-number,
#phoca-dl-categories-box .pd-sep-number { display: none; }

/* ---------- Kategorie mit Dateien: kompakte Liste ---------- */
#phoca-dl-category-box .ph-top { margin: 0 0 10px; }
#phoca-dl-category-box .ph-top .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}
#phoca-dl-category-box h3.pd-ctitle {
  margin: 0 0 10px;
  padding: 0 0 0 10px;
  border-left: 2px solid #d91e18;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
}

/* eine Zeile pro Datei */
#phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) {
  --bs-gutter-x: 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  padding: 8px 12px;
  background: #fff;
  border-top: 1px solid #ececec;
}
#phoca-dl-category-box .pd-category > h3 + .row:not(.pd-row2-bp) { border-top: 1px solid #d91e18; }
#phoca-dl-category-box .pd-category > .row > [class*="col-"] {
  width: auto !important;
  max-width: none;
  padding: 0;
  float: none;
}
#phoca-dl-category-box .pd-category > .row > [class*="col-"]:first-child {
  flex: 1 1 100%;
  min-width: 0;
}
#phoca-dl-category-box .pd-category > .row > [class*="col-"]:last-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
#phoca-dl-category-box .pd-row2-bp { display: none !important; }

#phoca-dl-category-box .pd-filenamebox-bt {
  float: none !important;
  min-width: 0;
  margin: 0 !important;
}
#phoca-dl-category-box .pd-title {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#phoca-dl-category-box .pd-document16 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: auto !important;
  min-height: 16px;
  margin-top: 2px;
  padding-left: 20px !important;
  font-size: 11px;
  line-height: 1.3 !important;
  background-size: 14px 14px !important;
}
#phoca-dl-category-box .pd-float {
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#phoca-dl-category-box .pd-document16 a {
  color: #888;
  text-decoration: none;
}
#phoca-dl-category-box .badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 0;
  background: #d91e18 !important;
  font-size: 0;
  line-height: 1;
  color: #fff;
}
#phoca-dl-category-box .badge::after {
  content: "NEU";
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* Buttons: Download und Details als kleine Symbolknöpfe */
#phoca-dl-category-box .pd-button-box-bt { float: none; margin: 0; }
#phoca-dl-category-box .pd-button-box-bt:empty { display: none; }
#phoca-dl-category-box .pd-button-box-bt a.btn {
  float: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 26px;
  min-width: 26px;
  margin: 0 !important;
  padding: 0 10px;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  border: 1px solid #d91e18;
  color: #d91e18;
}
#phoca-dl-category-box .pd-button-box-bt a.btn {
  gap: 0;
  width: 26px;
  padding: 0;
  font-size: 0;
  line-height: 1;
}
#phoca-dl-category-box .pd-button-box-bt a.btn::before {
  display: block;
  width: 12px;
  text-align: center;
}
#phoca-dl-category-box .pd-button-box-bt a.btn-success {
  background: #d91e18;
  color: #fff;
}
#phoca-dl-category-box .pd-button-box-bt a.btn-success::before,
#phoca-dl-category-box .pd-button-box-bt a.btn-info::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
}
#phoca-dl-category-box .pd-button-box-bt a.btn:not(.btn-success):not(.btn-info) {
  background: #fff;
  border-color: #d91e18;
  color: #d91e18;
}
#phoca-dl-category-box .pd-button-box-bt a.btn::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
  content: "\f04b";
}
#phoca-dl-category-box .pd-button-box-bt a.btn-success::before { content: "\f019"; }
#phoca-dl-category-box .pd-button-box-bt a.btn-info::before { content: "\f129"; }
@media (min-width: 768px) {
  #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) { flex-wrap: nowrap !important; }
  #phoca-dl-category-box .pd-category > .row > [class*="col-"]:first-child { flex: 1 1 auto; }
  #phoca-dl-category-box .pd-button-box-bt a.btn { height: 30px; min-width: 30px; }
  #phoca-dl-category-box .pd-button-box-bt a.btn-success,
  #phoca-dl-category-box .pd-button-box-bt a.btn:not(.btn-info):not(.btn-success) {
    gap: 8px;
    width: auto;
    padding: 0 12px;
    font-size: 11px;
  }
}

/* Abspielen-/Vorschau-Fenster */
#pdCategoryModal .modal-dialog {
  height: auto !important;
  max-width: 440px !important;
  margin: 1rem auto;
  padding: 0 16px;
}
#pdCategoryModal .modal-content {
  height: auto !important;
  border: 0;
  border-top: 2px solid #d91e18;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  background: #fff;
}
#pdCategoryModal .modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
}
#pdCategoryModal .modal-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}
#pdCategoryModal .btn-close { box-shadow: none; opacity: 0.6; }
#pdCategoryModal .modal-body { padding: 12px 16px; height: auto !important; }
#pdCategoryModal .modal-body iframe {
  display: block;
  width: 100%;
  height: 120px !important;
  border: 0;
  overflow: hidden;
}
#pdCategoryModal.image .modal-body iframe,
#pdCategoryModal.document .modal-body iframe { height: 60vh !important; }
#pdCategoryModal.image .modal-dialog,
#pdCategoryModal.document .modal-dialog { max-width: 720px !important; }
#pdCategoryModal .modal-footer {
  padding: 10px 16px;
  border-top: 1px solid #ececec;
}
#pdCategoryModal .modal-footer .btn {
  padding: 6px 14px;
  border-radius: 0;
  border: 1px solid #d91e18;
  background: #fff;
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d91e18;
}

/* Sortierung / Anzahl pro Seite */
#phoca-dl-category-box form .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 10px;
  margin: 14px 0 0;
  font-size: 12px;
  color: #888;
}
#phoca-dl-category-box form .pagination .pagination { display: none; }
#phoca-dl-category-box form .counter { display: none; }
#phoca-dl-category-box form .form-select {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 3px 32px 3px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
  color: #444;
}

/* ---------- Hochladen ---------- */
#phocadownload-upload h3 {
  margin: 0 0 6px;
  padding: 0 0 0 10px;
  border-left: 2px solid #d91e18;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
}
#phocadownload-upload h4 {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}
#phocadownload-upload .alert {
  margin: 0 0 8px;
  padding: 9px 14px;
  background: #fff;
  border: 0;
  border-top: 1px solid #d91e18;
  border-radius: 0;
  font-size: 13px;
  color: #a60000;
}
#phocadownload-upload .form-control,
#phocadownload-upload .form-select {
  padding: 6px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  color: #222;
}
#phocadownload-upload .form-control:focus,
#phocadownload-upload .form-select:focus {
  border-color: #d91e18;
  box-shadow: none;
}
#phocadownload-upload .btn {
  padding: 7px 14px;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#phocadownload-upload .input-group { flex-wrap: nowrap; }
#phocadownload-upload .input-group-btn { display: flex; }
#phocadownload-upload .input-group > .form-control { border-right: 0; }
#phocadownload-upload form[name="phocadownloadfilesform"] .row > [class*="col-"] { margin-top: 6px; }

/* Liste der eigenen Dateien */
#phocadownload-upload table.table {
  display: block;
  overflow-x: auto;
  margin: 10px 0 0;
  background: #fff;
  border-top: 1px solid #d91e18;
  font-size: 13px;
}
#phocadownload-upload table.table th,
#phocadownload-upload table.table th a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #d91e18;
  text-decoration: none;
}

/* Formular zum Hochladen */
#phocadownload-upload-form {
  padding: 2px 14px 14px;
  background: #fff;
  border-top: 1px solid #d91e18;
}
#phocadownload-upload-form .pd-user-upload-table,
#phocadownload-upload-form .pd-user-upload-table tbody,
#phocadownload-upload-form .pd-user-upload-table tr,
#phocadownload-upload-form .pd-user-upload-table td {
  display: block;
  width: 100%;
  padding: 0;
}
#phocadownload-upload-form .pd-user-upload-table td:first-child {
  margin-top: 10px;
  margin-bottom: 3px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d91e18;
}
#phocadownload-upload-form .pd-user-upload-table td:first-child strong { font-weight: 500; }
#phocadownload-upload-form .pd-user-upload-table td:first-child:not(:has(strong)) { display: none; }
#phocadownload-upload-form .pd-user-upload-table td:last-child { font-size: 12px; color: #666; }
#phocadownload-upload-form .pd-file-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
}
#phocadownload-upload-form .pd-file-upload-form .form-control { flex: 1 1 140px; min-width: 0; }
#phocadownload-upload-form .comment-input { width: 100%; }
#phocadownload-upload-form textarea.comment-input { height: 96px; min-height: 0; }
#phocadownload-upload-form .comment-input2 {
  display: inline-block;
  width: 48px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #444;
}
#phocadownload-upload-form .upload-queue {
  margin: 0;
  padding: 0;
  list-style: none;
}