/*
  TuS Bonneberg Redesign – Clean V1
  Stand: bereinigte Fassung nach den V2/V3/V4-Testblöcken
  Ziel: Schwarz / Weiß / Cyan, klare Desktop-Topbar, ruhige mobile Navigation.
*/

:root {
  --tus-black: #05070a;
  --tus-dark: #0b1016;
  --tus-white: #ffffff;
  --tus-light: #f3f7fa;
  --tus-cyan: #00cfe8;
  --tus-cyan-2: #10b6d8;
  --tus-text: #1d2430;
  --tus-muted: #657386;
  --tus-shadow: 0 18px 50px rgba(5, 7, 10, .10);
  --tus-radius: 22px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--tus-light);
  color: var(--tus-text);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body,
.sp-megamenu-parent,
.article-list,
.article-details,
p,
li,
input,
button,
select,
textarea {
  font-family: Inter, Roboto, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.article-header h1,
.article-header h2,
.page-header h1,
.page-header h2,
.sp-module-title {
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif;
  color: var(--tus-black);
  letter-spacing: -.025em;
  line-height: 1.1;
  font-weight: 800;
}

a {
  color: var(--tus-cyan-2);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

a:hover,
a:focus { color: var(--tus-black); }

/* =========================================================
   1. TOPBAR DESKTOP
   ========================================================= */

#sp-top-bar,
.sp-top-bar {
  background:
    radial-gradient(circle at 22% 0%, rgba(0,207,232,.14), transparent 18rem),
    var(--tus-black) !important;
  color: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid rgba(0,207,232,.35) !important;
  min-height: 92px !important;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
}

#sp-top-bar .container,
.sp-top-bar .container {
  width: min(1240px, calc(100% - 40px)) !important;
  max-width: 1240px !important;
}

#sp-top-bar .sp-module-title,
.sp-top-bar .sp-module-title {
  display: none !important;
}

#sp-top-bar a,
.sp-top-bar a,
#sp-top1 a,
#sp-top2 a,
#sp-top3 a {
  color: var(--tus-cyan) !important;
  font-weight: 800;
}

/* Social-Icons oben vorerst ausblenden */
#sp-top-bar a[href*="instagram"],
#sp-top-bar a[href*="youtu"],
#sp-top-bar a[href*="youtube"],
.sp-top-bar a[href*="instagram"],
.sp-top-bar a[href*="youtu"],
.sp-top-bar a[href*="youtube"] {
  display: none !important;
}

@media (min-width: 992px) {
  #sp-top-bar .row,
  .sp-top-bar .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    column-gap: 24px !important;
    align-items: center !important;
    margin: 0 !important;
  }

  #sp-top1,
  .sp-top1 {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  #sp-top2,
  #sp-top3,
  .sp-top2,
  .sp-top3 {
    grid-column: 2 !important;
    width: 300px !important;
    max-width: 300px !important;
    justify-self: end !important;
  }
}

/* =========================================================
   2. SERVICE-NAVIGATION DESKTOP + MOBILE BASIS
   ========================================================= */

.tus-service-nav-desktop {
  display: flex !important;
}

.tus-mobile-service-row {
  display: none !important;
}

.tus-service-mobile {
  display: none !important;
}

.tus-service-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

.tus-service-nav a,
.tus-service-nav a:link,
.tus-service-nav a:visited {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  color: var(--tus-cyan) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  font-size: .84rem !important;
  border: 1px solid rgba(0,207,232,.26) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.14) !important;
  flex: 0 0 auto !important;
}

.tus-service-nav a:hover,
.tus-service-nav a:focus {
  color: var(--tus-black) !important;
  background: var(--tus-cyan) !important;
  border-color: var(--tus-cyan) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 1250px) and (min-width: 992px) {
  #sp-top-bar .row,
  .sp-top-bar .row {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    column-gap: 16px !important;
  }

  #sp-top2,
  #sp-top3,
  .sp-top2,
  .sp-top3 {
    width: 280px !important;
    max-width: 280px !important;
  }

  .tus-service-nav {
    gap: 6px !important;
  }

  .tus-service-nav a {
    padding: 7px 9px !important;
    font-size: .76rem !important;
  }
}

/* =========================================================
   3. E-MAIL + SUCHE DESKTOP
   ========================================================= */

#sp-top-bar a[href^="mailto:"],
.sp-top-bar a[href^="mailto:"],
#sp-top1 a[href^="mailto:"],
#sp-top2 a[href^="mailto:"],
#sp-top3 a[href^="mailto:"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.10) !important;
  border: 1px solid rgba(0,207,232,.22) !important;
  color: var(--tus-cyan) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  font-size: .86rem !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}

#sp-top-bar form,
.sp-top-bar form,
#sp-top-bar .search,
.sp-top-bar .search,
#sp-top2 form,
#sp-top2 .search,
#sp-top3 form,
#sp-top3 .search {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
}

#sp-top-bar input[type="search"],
#sp-top-bar input[type="text"],
.sp-top-bar input[type="search"],
.sp-top-bar input[type="text"],
#sp-top2 input[type="search"],
#sp-top2 input[type="text"],
#sp-top3 input[type="search"],
#sp-top3 input[type="text"] {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(0,207,232,.32) !important;
  color: var(--tus-white) !important;
  font-weight: 750 !important;
  padding: 10px 18px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
}

#sp-top-bar input::placeholder,
.sp-top-bar input::placeholder {
  color: rgba(255,255,255,.58) !important;
}

/* Alte Select-Navigation oben rechts ausblenden */
#sp-top-bar select,
.sp-top-bar select,
#sp-top1 select,
#sp-top2 select,
#sp-top3 select,
select.mod-menu,
select.maximenuck,
.moduletable_menu select,
div[class*="maximenuck"] select {
  display: none !important;
}

/* =========================================================
   4. HEADER DESKTOP
   ========================================================= */

#sp-header,
.sp-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(5,7,10,.08);
  box-shadow: 0 10px 28px rgba(5,7,10,.06);
  backdrop-filter: blur(10px);
  overflow: visible !important;
  z-index: 1000 !important;
}

#sp-header .container,
#sp-header .container-inner,
.sp-header .container {
  min-height: 170px !important;
  position: relative !important;
  overflow: visible !important;
}

#sp-logo,
.logo {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  z-index: 1005 !important;
}

#sp-logo a,
.logo a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#sp-logo img,
.logo img,
img.logo-image {
  max-height: 180px !important;
  width: auto !important;
  display: block !important;
  filter: drop-shadow(0 18px 30px rgba(5, 7, 10, .20)) !important;
  box-shadow: none !important;
}

#sp-logo a img:not(:first-child),
.logo a img:not(:first-child),
#sp-logo img + img,
.logo img + img {
  display: none !important;
}

/* Hauptmenü-Text im Header ausblenden, Hamburger bleibt */
.sp-megamenu-parent,
#sp-menu .sp-megamenu-parent,
#sp-menu-right .sp-megamenu-parent {
  display: none !important;
}

.offcanvas-toggler,
.burger-icon {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(5,7,10,.10) !important;
  box-shadow: 0 10px 28px rgba(5,7,10,.12) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1060 !important;
}

.burger-icon > span,
.offcanvas-toggler > span,
.offcanvas-toggler .burger-icon > span {
  display: block !important;
  width: 34px !important;
  height: 4px !important;
  margin: 0 !important;
  background: var(--tus-black) !important;
  border-radius: 999px !important;
  position: static !important;
  transform: none !important;
}

.burger-icon::before,
.burger-icon::after,
.offcanvas-toggler::before,
.offcanvas-toggler::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   5. OFFCANVAS
   ========================================================= */

.offcanvas-menu {
  background:
    radial-gradient(circle at top left, rgba(0,207,232,.18), transparent 18rem),
    var(--tus-black) !important;
}

.offcanvas-menu .offcanvas-inner {
  padding-top: 86px !important;
}

.offcanvas-menu .close-offcanvas {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(0,207,232,.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
}

.offcanvas-menu .close-offcanvas::before,
.offcanvas-menu .close-offcanvas::after {
  content: "" !important;
  position: absolute !important;
  width: 26px !important;
  height: 3px !important;
  background: var(--tus-cyan) !important;
  border-radius: 999px !important;
}

.offcanvas-menu .close-offcanvas::before { transform: rotate(45deg) !important; }
.offcanvas-menu .close-offcanvas::after { transform: rotate(-45deg) !important; }

.offcanvas-menu .offcanvas-toggler,
.offcanvas-menu .burger-icon {
  display: none !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li a,
.offcanvas-menu .offcanvas-inner ul.menu > li span {
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  padding: 14px 0 !important;
  color: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
  color: var(--tus-cyan) !important;
}

/* =========================================================
   6. HAUPTINHALT / ARTIKEL / MODULE
   ========================================================= */

#sp-main-body {
  background:
    radial-gradient(circle at top right, rgba(0,207,232,.10), transparent 32rem),
    var(--tus-light);
  padding: 72px 0 54px !important;
}

.container,
.sppb-row-container {
  max-width: 1240px;
}

#sp-left .sp-module,
#sp-right .sp-module,
.sp-module,
.module,
.moduletable {
  border-radius: var(--tus-radius);
}

#sp-left .sp-module,
#sp-right .sp-module,
#sp-component .sp-module {
  background: var(--tus-white);
  border: 1px solid rgba(5,7,10,.07);
  box-shadow: var(--tus-shadow);
  padding: 24px;
  margin-bottom: 26px;
}

.sp-module-title,
.module-title {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 1.04rem;
  margin-bottom: 18px;
}

.sp-module-title::after,
.article-header h1::after,
.article-header h2::after,
.page-header h1::after,
.page-header h2::after {
  content: "";
  display: block;
  width: 74px;
  height: 4px;
  margin-top: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--tus-cyan), transparent);
}

#sp-left .sp-module ul,
#sp-right .sp-module ul,
.sp-module ul {
  list-style: none;
  padding-left: 0;
}

#sp-left .sp-module li,
#sp-right .sp-module li {
  border-bottom: 1px solid rgba(5,7,10,.08);
  padding: 10px 0;
}

#sp-left .sp-module li:last-child,
#sp-right .sp-module li:last-child { border-bottom: 0; }

#sp-left .sp-module a,
#sp-right .sp-module a { font-weight: 800; }

.article-list .article,
.blog .item,
.items-row .item,
.view-featured .items-row .item,
.com-content-article,
.article-details,
.item-page,
.leading-0,
.leading,
.blog-featured .item,
.category-list,
.contact,
.newsfeed,
.weblink-category,
.page-category,
.category-desc {
  background: var(--tus-white);
  border: 1px solid rgba(5,7,10,.07);
  border-radius: var(--tus-radius);
  box-shadow: var(--tus-shadow);
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 28px;
  overflow: hidden;
}

.blog-featured .items-row,
.blog .items-row,
.items-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}

.blog-featured .items-row > *,
.blog .items-row > *,
.items-row > *,
.blog-featured [class*="col-"],
.blog [class*="col-"],
.items-row [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: block !important;
}

.blog-featured .item,
.blog .item,
.items-row .item,
.leading,
.leading-0,
.article-list .article {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.item-page img,
.article-details img,
.com-content-article img,
.article-intro-image img,
.article-full-image img,
.item-image img {
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(5,7,10,.12);
  max-width: 100%;
  height: auto;
}

.item-page iframe,
.article-details iframe,
.com-content-article iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}

.article-header h1,
.article-header h2,
.page-header h1,
.page-header h2,
.blog-featured h2,
.items-row h2,
.item-title {
  font-size: clamp(1.65rem, 2.5vw, 2.8rem);
}

.btn,
.button,
.readmore .btn,
a.btn,
button,
input[type="submit"],
.pager a,
.pagination a,
.pagination span {
  border-radius: 14px !important;
  border: 0 !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

.btn-primary,
.button,
.readmore .btn,
a.btn-primary,
input[type="submit"] {
  background: linear-gradient(135deg, var(--tus-cyan), var(--tus-cyan-2)) !important;
  color: var(--tus-black) !important;
  box-shadow: 0 12px 26px rgba(0, 207, 232, .28);
}

.pagination {
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination li a,
.pagination li span,
.page-link {
  border-radius: 12px !important;
  color: var(--tus-black) !important;
  border: 1px solid rgba(5,7,10,.10) !important;
  background: var(--tus-white);
}

.pagination .active a,
.pagination .active span,
.page-item.active .page-link {
  background: var(--tus-cyan) !important;
  border-color: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
}

table { border-radius: 16px; overflow: hidden; }
table th { background: var(--tus-dark); color: var(--tus-white); }
table td, table th { border-color: rgba(5,7,10,.08) !important; }

input,
select,
textarea,
.form-control {
  border-radius: 14px !important;
  border: 1px solid rgba(5,7,10,.14) !important;
  min-height: 44px;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--tus-cyan) !important;
  box-shadow: 0 0 0 4px rgba(0,207,232,.14) !important;
}

/* alte Inline-Orange/Rot-Töne entschärfen */
[style*="color: orange"],
[style*="color:#ff"],
[style*="color: #ff"] {
  color: var(--tus-cyan-2) !important;
}

/* =========================================================
   7. FOOTER
   ========================================================= */

#sp-footer,
#sp-bottom,
.sp-footer {
  background: var(--tus-black) !important;
  color: rgba(255,255,255,.78) !important;
  border-top: 4px solid var(--tus-cyan);
}

#sp-footer a,
#sp-bottom a,
.sp-footer a {
  color: var(--tus-cyan) !important;
  font-weight: 750;
}

.sp-scroll-up,
.scrollup,
#back-top,
.back-to-top {
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(0,207,232,.28);
}

/* =========================================================
   8. MOBILE
   ========================================================= */

@media (max-width: 991px) {
  /* Topbar mobil: Mail-Icon | Verein & Service | Suche-Icon */
  #sp-top-bar,
  .sp-top-bar {
    padding: 16px 0 18px !important;
    min-height: auto !important;
    background: var(--tus-black) !important;
    border-bottom: 1px solid rgba(0,207,232,.30) !important;
  }

  #sp-top-bar .container,
  .sp-top-bar .container {
    width: calc(100% - 28px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #sp-top-bar .row,
  .sp-top-bar .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .tus-service-nav-desktop {
    display: none !important;
  }

  #sp-top-bar a[href^="mailto:"]:not(.tus-mobile-service-icon),
  .sp-top-bar a[href^="mailto:"]:not(.tus-mobile-service-icon),
  #sp-top-bar form,
  .sp-top-bar form,
  #sp-top-bar .search,
  .sp-top-bar .search,
  .tus-mobile-header-tools,
  .tus-mobile-header-icons,
  .tus-mobile-mail,
  .tus-mobile-search {
    display: none !important;
  }

  .tus-mobile-service-row {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .tus-mobile-service-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 16px !important;
    background: rgba(0,207,232,.11) !important;
    border: 1px solid rgba(0,207,232,.34) !important;
    color: var(--tus-cyan) !important;
    text-decoration: none !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.16) !important;
  }

  .tus-mobile-service-icon:hover,
  .tus-mobile-service-icon:focus {
    background: var(--tus-cyan) !important;
    color: var(--tus-black) !important;
    border-color: var(--tus-cyan) !important;
  }

  .tus-service-mobile {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }

  .tus-service-mobile summary {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    background: rgba(0,207,232,.12) !important;
    border: 1px solid rgba(0,207,232,.38) !important;
    color: var(--tus-cyan) !important;
    font-weight: 900 !important;
    font-size: .92rem !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.16) !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  .tus-service-mobile summary::-webkit-details-marker {
    display: none !important;
  }

  .tus-service-mobile summary::after {
    content: "▾" !important;
    font-size: .78rem !important;
    margin-left: 2px !important;
    transition: transform .18s ease !important;
  }

  .tus-service-mobile[open] summary::after {
    transform: rotate(180deg) !important;
  }

  .tus-service-nav-mobile {
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 10px) !important;
    transform: translateX(-50%) !important;
    z-index: 3000 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: calc(100vw - 32px) !important;
    max-width: 390px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(5,7,10,.96) !important;
    border: 1px solid rgba(0,207,232,.24) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
  }

  .tus-service-nav-mobile a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    color: var(--tus-cyan) !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    font-size: .82rem !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(0,207,232,.25) !important;
  }

  .tus-service-nav-mobile a:hover,
  .tus-service-nav-mobile a:focus {
    background: var(--tus-cyan) !important;
    color: var(--tus-black) !important;
    border-color: var(--tus-cyan) !important;
  }

  /* Weißer Header mobil: Hamburger links, Logo mittig */
  #sp-header,
  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container {
    position: relative !important;
    min-height: 140px !important;
    overflow: visible !important;
  }

  .offcanvas-toggler,
  .burger-icon {
    position: absolute !important;
    left: 22px !important;
    top: 30px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    z-index: 1060 !important;
  }

  #sp-logo,
  .logo {
    position: absolute !important;
    left: 50% !important;
    top: 18px !important;
    transform: translateX(-50%) !important;
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    z-index: 1030 !important;
    overflow: visible !important;
  }

  #sp-logo a,
  .logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 120px !important;
    height: 120px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #sp-logo img,
  .logo img,
  img.logo-image {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 14px 24px rgba(5,7,10,.20)) !important;
  }

  #sp-main-body {
    padding-top: 72px !important;
  }

  .article-list .article,
  .blog .item,
  .items-row .item,
  .view-featured .items-row .item,
  .com-content-article,
  .article-details,
  .item-page {
    border-radius: 18px;
    padding: 18px;
  }

  .item-page iframe,
  .article-details iframe,
  .com-content-article iframe {
    min-height: 240px;
  }
}

@media (max-width: 390px) {
  .tus-mobile-service-row {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    max-width: 340px !important;
  }

  .tus-mobile-service-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 20px !important;
    border-radius: 14px !important;
  }

  .tus-service-mobile summary {
    min-height: 42px !important;
    font-size: .86rem !important;
    padding: 9px 10px !important;
  }

  #sp-header,
  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container {
    min-height: 130px !important;
  }

  .offcanvas-toggler,
  .burger-icon {
    left: 18px !important;
    top: 28px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }

  #sp-logo,
  .logo,
  #sp-logo a,
  .logo a {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
  }

  #sp-logo img,
  .logo img,
  img.logo-image {
    width: 108px !important;
    height: 108px !important;
    max-width: 108px !important;
    max-height: 108px !important;
  }

  #sp-main-body {
    padding-top: 64px !important;
  }
}


/* =========================================================
   PATCH V5: Mobile Suche funktionsfähig, Extra-Mailicon ausblenden,
   Desktop-Logo ca. 40% kleiner als V4 und weiterhin überlappend
   Basis: TuS Bonneberg Redesign – Clean V1
   ========================================================= */

/* Desktop-Service-Pills absichern */
.tus-service-nav,
.tus-service-nav-desktop,
nav.tus-service-nav-desktop {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

.tus-service-nav a,
.tus-service-nav a:link,
.tus-service-nav a:visited,
.tus-service-nav-desktop a,
.tus-service-nav-desktop a:link,
.tus-service-nav-desktop a:visited {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  color: var(--tus-cyan) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  font-size: .84rem !important;
  border: 1px solid rgba(0,207,232,.26) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.14) !important;
  flex: 0 0 auto !important;
}

.tus-service-nav a:hover,
.tus-service-nav a:focus,
.tus-service-nav-desktop a:hover,
.tus-service-nav-desktop a:focus {
  color: var(--tus-black) !important;
  background: var(--tus-cyan) !important;
  border-color: var(--tus-cyan) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 1250px) and (min-width: 992px) {
  .tus-service-nav,
  .tus-service-nav-desktop {
    gap: 6px !important;
  }

  .tus-service-nav a,
  .tus-service-nav-desktop a {
    padding: 7px 9px !important;
    font-size: .76rem !important;
  }
}

/* Desktop/Notebook: Logo deutlich sichtbar, aber ca. 40% kleiner als V4 */
@media (min-width: 992px) {
  #sp-header,
  .sp-header {
    min-height: 150px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1200 !important;
  }

  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container,
  #sp-header .row,
  #sp-header [class*="col-"],
  #sp-header .sp-column,
  #sp-logo,
  .logo {
    overflow: visible !important;
  }

  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container {
    min-height: 150px !important;
    position: relative !important;
  }

  #sp-logo,
  .logo {
    position: absolute !important;
    left: clamp(105px, 12vw, 170px) !important;
    top: 48px !important;
    width: 204px !important;
    height: 204px !important;
    min-width: 204px !important;
    max-width: none !important;
    z-index: 1600 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    transform: none !important;
  }

  #sp-logo a,
  .logo a,
  #sp-header .logo a,
  #sp-header a.logo {
    width: 204px !important;
    height: 204px !important;
    min-width: 204px !important;
    min-height: 204px !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #sp-logo img,
  .logo img,
  #sp-header img.logo-image,
  #sp-header .logo-image,
  .sp-header img.logo-image,
  .sp-header .logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"] {
    width: 204px !important;
    height: 204px !important;
    min-width: 204px !important;
    min-height: 204px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
    filter: drop-shadow(0 20px 32px rgba(5, 7, 10, .22)) !important;
    box-shadow: none !important;
  }

  #sp-logo a img:not(:first-child),
  .logo a img:not(:first-child),
  #sp-logo img + img,
  .logo img + img {
    display: none !important;
  }

  #sp-menu,
  #sp-menu-right,
  .offcanvas-toggler,
  .burger-icon {
    position: relative !important;
    z-index: 1700 !important;
  }

  #sp-main-body {
    padding-top: 125px !important;
  }
}

@media (min-width: 992px) and (max-width: 1280px) {
  #sp-header,
  .sp-header,
  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container {
    min-height: 140px !important;
  }

  #sp-logo,
  .logo,
  #sp-logo a,
  .logo a,
  #sp-header .logo a,
  #sp-header a.logo,
  #sp-logo img,
  .logo img,
  #sp-header img.logo-image,
  #sp-header .logo-image,
  .sp-header img.logo-image,
  .sp-header .logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"] {
    width: 180px !important;
    height: 180px !important;
    min-width: 180px !important;
    min-height: 180px !important;
  }

  #sp-logo,
  .logo {
    left: 112px !important;
    top: 46px !important;
  }

  #sp-main-body {
    padding-top: 112px !important;
  }
}

/* Mobil: nur die eine Service-Zeile zeigen, Extra-Briefumschlag entfernen, Suche als aufklappbares Formular */
@media (max-width: 991px) {
  .tus-service-nav-desktop,
  nav.tus-service-nav-desktop,
  .tus-service-nav {
    display: none !important;
  }

  #sp-top2,
  #sp-top3,
  .sp-top2,
  .sp-top3 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #sp-top1,
  .sp-top1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Zusätzliche Mail-Ausgaben außerhalb unseres Service-Moduls konsequent verstecken. */
  #sp-top-bar .sp-module:not(:has(.tus-service-wrap)):has(a[href^="mailto:"]),
  .sp-top-bar .sp-module:not(:has(.tus-service-wrap)):has(a[href^="mailto:"]),
  #sp-top-bar .sp-module:not(:has(.tus-service-wrap)):has([class*="envelope"]),
  .sp-top-bar .sp-module:not(:has(.tus-service-wrap)):has([class*="envelope"]),
  #sp-top-bar a[href^="mailto:"]:not(.tus-mobile-service-icon),
  .sp-top-bar a[href^="mailto:"]:not(.tus-mobile-service-icon),
  #sp-top-bar .fa-envelope,
  .sp-top-bar .fa-envelope,
  #sp-top-bar [class*="fa-envelope"],
  .sp-top-bar [class*="fa-envelope"],
  #sp-top-bar [class*="envelope"]:not(.tus-mobile-service-icon),
  .sp-top-bar [class*="envelope"]:not(.tus-mobile-service-icon),
  #sp-top-bar .sp-contact-mobile,
  .sp-top-bar .sp-contact-mobile,
  #sp-top-bar .sp-contact-info,
  .sp-top-bar .sp-contact-info {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  .tus-mobile-service-row {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    position: relative !important;
    visibility: visible !important;
  }

  .tus-mobile-service-row .tus-mobile-service-icon,
  .tus-mobile-service-row .tus-service-mobile,
  .tus-mobile-search-panel {
    visibility: visible !important;
  }

  .tus-mobile-service-row .tus-mobile-service-icon {
    display: inline-flex !important;
  }

  .tus-service-mobile summary {
    position: relative !important;
    padding-right: 42px !important;
  }

  .tus-service-summary-text {
    display: inline-flex !important;
    align-items: center !important;
  }

  .tus-service-summary-arrow,
  .tus-service-summary-close {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .tus-service-summary-arrow {
    display: inline-flex !important;
    font-size: .9rem !important;
  }

  .tus-service-summary-close {
    display: none !important;
    font-size: 1.45rem !important;
  }

  .tus-service-mobile[open] .tus-service-summary-arrow {
    display: none !important;
  }

  .tus-service-mobile[open] .tus-service-summary-close {
    display: inline-flex !important;
  }

  .tus-service-mobile summary:has(.tus-service-summary-close)::after {
    content: none !important;
    display: none !important;
  }

  /* Mobile Suche: die Lupe öffnet ein kleines Suchformular direkt unter der Topbar-Zeile. */
  .tus-mobile-search-panel {
    display: block !important;
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tus-mobile-search-panel > summary {
    list-style: none !important;
    cursor: pointer !important;
  }

  .tus-mobile-search-panel > summary::-webkit-details-marker {
    display: none !important;
  }

  .tus-mobile-search-panel[open] > summary {
    background: var(--tus-cyan) !important;
    color: var(--tus-black) !important;
    border-color: var(--tus-cyan) !important;
  }

  #sp-top-bar .tus-mobile-search-form,
  .sp-top-bar .tus-mobile-search-form,
  .tus-mobile-search-form {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    z-index: 3100 !important;
    display: none !important;
    width: calc(100vw - 32px) !important;
    max-width: 360px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(5,7,10,.96) !important;
    border: 1px solid rgba(0,207,232,.26) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
    margin: 0 !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #sp-top-bar .tus-mobile-search-panel[open] .tus-mobile-search-form,
  .sp-top-bar .tus-mobile-search-panel[open] .tus-mobile-search-form,
  .tus-mobile-search-panel[open] .tus-mobile-search-form {
    display: flex !important;
  }

  #sp-top-bar .tus-mobile-search-form input[type="search"],
  .sp-top-bar .tus-mobile-search-form input[type="search"],
  .tus-mobile-search-form input[type="search"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(0,207,232,.32) !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }

  .tus-mobile-search-form button {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    border: 1px solid var(--tus-cyan) !important;
    background: var(--tus-cyan) !important;
    color: var(--tus-black) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 390px) {
  .tus-mobile-search-panel {
    width: 42px !important;
    height: 42px !important;
  }
}
/* =========================================================
   TuS Bonneberg – Patch V6
   - Mobile Suche mit sichtbarem Schließen-X
   - Desktop-/Notebook-Logo deutlich kleiner, aber weiterhin überlappend
   Basis: V5 / Clean V1
   ========================================================= */

/* Desktop/Notebook: Logo kleiner als V5, weiterhin nach unten überlappend */
@media (min-width: 992px) {
  #sp-header,
  .sp-header {
    min-height: 138px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1200 !important;
  }

  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container,
  #sp-header .row,
  #sp-header [class*="col-"],
  #sp-header .sp-column,
  #sp-logo,
  .logo,
  #sp-logo a,
  .logo a {
    overflow: visible !important;
  }

  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container {
    min-height: 138px !important;
    position: relative !important;
  }

  #sp-logo,
  .logo {
    position: absolute !important;
    left: clamp(100px, 11vw, 155px) !important;
    top: 70px !important;
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    max-width: none !important;
    z-index: 1600 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    transform: none !important;
  }

  #sp-logo a,
  .logo a,
  #sp-header .logo a,
  #sp-header a.logo {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #sp-logo img,
  .logo img,
  #sp-header img.logo-image,
  #sp-header .logo-image,
  .sp-header img.logo-image,
  .sp-header .logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"] {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
    filter: drop-shadow(0 17px 28px rgba(5, 7, 10, .20)) !important;
    box-shadow: none !important;
  }

  #sp-logo a img:not(:first-child),
  .logo a img:not(:first-child),
  #sp-logo img + img,
  .logo img + img {
    display: none !important;
  }

  #sp-main-body {
    padding-top: 96px !important;
  }
}

@media (min-width: 992px) and (max-width: 1280px) {
  #sp-header,
  .sp-header,
  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container {
    min-height: 132px !important;
  }

  #sp-logo,
  .logo {
    left: 105px !important;
    top: 66px !important;
  }

  #sp-logo,
  .logo,
  #sp-logo a,
  .logo a,
  #sp-header .logo a,
  #sp-header a.logo,
  #sp-logo img,
  .logo img,
  #sp-header img.logo-image,
  #sp-header .logo-image,
  .sp-header img.logo-image,
  .sp-header .logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"] {
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    min-height: 132px !important;
  }

  #sp-main-body {
    padding-top: 84px !important;
  }
}

/* Mobile Suche: eindeutiges X im Such-Button und optionaler Schließen-Button im Formular */
@media (max-width: 991px) {
  .tus-mobile-search-panel > summary.tus-mobile-service-icon {
    position: relative !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  .tus-mobile-search-panel > summary.tus-mobile-service-icon::-webkit-details-marker {
    display: none !important;
  }

  .tus-mobile-search-open,
  .tus-mobile-search-close-icon {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .tus-mobile-search-close-icon {
    display: none !important;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
  }

  .tus-mobile-search-panel[open] > summary.tus-mobile-service-icon .tus-mobile-search-open {
    display: none !important;
  }

  .tus-mobile-search-panel[open] > summary.tus-mobile-service-icon .tus-mobile-search-close-icon {
    display: flex !important;
  }

  #sp-top-bar .tus-mobile-search-form,
  .sp-top-bar .tus-mobile-search-form,
  .tus-mobile-search-form {
    gap: 8px !important;
  }

  .tus-mobile-search-close-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,207,232,.35) !important;
    background: rgba(255,255,255,.08) !important;
    color: var(--tus-cyan) !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .tus-mobile-search-close-button:hover,
  .tus-mobile-search-close-button:focus {
    background: var(--tus-cyan) !important;
    color: var(--tus-black) !important;
    border-color: var(--tus-cyan) !important;
  }
}
/* =========================================================
   TuS Bonneberg – Patch V7
   - Desktop-/Notebook-Logo horizontal mittig setzen
   - Mobile Ansicht unverändert lassen
   Basis: V6 / Clean V1
   ========================================================= */

@media (min-width: 992px) {
  #sp-header #sp-logo,
  #sp-header .logo,
  .sp-header #sp-logo,
  .sp-header .logo {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 992px) and (max-width: 1280px) {
  #sp-header #sp-logo,
  #sp-header .logo,
  .sp-header #sp-logo,
  .sp-header .logo {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* =========================================================
   TuS Bonneberg – Patch V8
   - Notebook/Desktop-Logo wirklich mittig im gesamten weißen Header
   - Logo etwas weiter nach oben
   - Mobile Suche ohne SEF-Route, damit kein 404 durch /component/finder/search entsteht
   Basis: V7 / Clean V1
   ========================================================= */

@media (min-width: 992px) {
  #sp-header,
  .sp-header,
  #sp-header .container,
  #sp-header .container-inner,
  .sp-header .container {
    position: relative !important;
    overflow: visible !important;
  }

  /* Der komplette Logo-Bereich spannt über die volle Headerbreite.
     Dadurch wird nicht innerhalb einer Helix-Spalte, sondern wirklich in der Header-Mitte zentriert. */
  #sp-header #sp-logo,
  .sp-header #sp-logo {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 54px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 150px !important;
    transform: none !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 1600 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #sp-header #sp-logo .sp-column,
  .sp-header #sp-logo .sp-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #sp-header #sp-logo .logo,
  #sp-header #sp-logo a.logo,
  #sp-header #sp-logo .logo a,
  .sp-header #sp-logo .logo,
  .sp-header #sp-logo a.logo,
  .sp-header #sp-logo .logo a {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #sp-header #sp-logo img,
  #sp-header #sp-logo img.logo-image,
  #sp-header #sp-logo .logo-image,
  .sp-header #sp-logo img,
  .sp-header #sp-logo img.logo-image,
  .sp-header #sp-logo .logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"] {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
    display: block !important;
    filter: drop-shadow(0 17px 28px rgba(5, 7, 10, .20)) !important;
    box-shadow: none !important;
  }

  #sp-main-body {
    padding-top: 88px !important;
  }
}

@media (min-width: 992px) and (max-width: 1280px) {
  #sp-header #sp-logo,
  .sp-header #sp-logo {
    top: 48px !important;
    height: 132px !important;
  }

  #sp-header #sp-logo .logo,
  #sp-header #sp-logo a.logo,
  #sp-header #sp-logo .logo a,
  .sp-header #sp-logo .logo,
  .sp-header #sp-logo a.logo,
  .sp-header #sp-logo .logo a,
  #sp-header #sp-logo img,
  #sp-header #sp-logo img.logo-image,
  #sp-header #sp-logo .logo-image,
  .sp-header #sp-logo img,
  .sp-header #sp-logo img.logo-image,
  .sp-header #sp-logo .logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"] {
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    min-height: 132px !important;
  }

  #sp-main-body {
    padding-top: 78px !important;
  }
}
/* =========================================================
   TuS Bonneberg – Patch V9
   - Notebook/Desktop-Logo wirklich in die Fenstermitte setzen
   - Logo ein Stück höher in den weißen Header ziehen
   - Mobiltelefonversion unverändert lassen
   Basis: V8
   ========================================================= */

@media (min-width: 992px) {
  /* Header selbst wird der Bezugspunkt. Die Helix-Container/Rows dürfen
     das absolut platzierte Logo nicht mehr in einer linken Spalte einfangen. */
  #sp-header,
  .sp-header {
    position: relative !important;
    min-height: 150px !important;
    overflow: visible !important;
    z-index: 1000 !important;
  }

  #sp-header .container,
  #sp-header .container-inner,
  #sp-header .row,
  .sp-header .container,
  .sp-header .container-inner,
  .sp-header .row {
    position: static !important;
    overflow: visible !important;
  }

  /* Alte absolute/Spalten-Zentrierungen aus V6–V8 neutralisieren. */
  #sp-header #sp-logo,
  #sp-header .logo,
  #sp-header #sp-logo .logo,
  #sp-header #sp-logo a,
  #sp-header #sp-logo .logo a,
  .sp-header #sp-logo,
  .sp-header .logo,
  .sp-header #sp-logo .logo,
  .sp-header #sp-logo a,
  .sp-header #sp-logo .logo a {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Das Bild selbst wird jetzt direkt am Header ausgerichtet. */
  #sp-header #sp-logo img,
  #sp-header #sp-logo img.logo-image,
  #sp-header .logo img,
  #sp-header img.logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"],
  .sp-header #sp-logo img,
  .sp-header #sp-logo img.logo-image,
  .sp-header .logo img,
  .sp-header img.logo-image,
  .sp-header img[src*="logo-tus-bonneberg"],
  .sp-header img[src*="transparent-large"] {
    position: absolute !important;
    left: 50% !important;
    top: 18px !important;
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: translateX(-50%) !important;
    transform-origin: center center !important;
    display: block !important;
    z-index: 1800 !important;
    filter: drop-shadow(0 17px 28px rgba(5, 7, 10, .20)) !important;
    box-shadow: none !important;
  }

  /* Der Hamburger bleibt links im weißen Header. */
  #sp-header .offcanvas-toggler,
  #sp-header .burger-icon,
  .sp-header .offcanvas-toggler,
  .sp-header .burger-icon {
    position: relative !important;
    z-index: 1900 !important;
  }

  #sp-main-body {
    padding-top: 80px !important;
  }
}

@media (min-width: 992px) and (max-width: 1280px) {
  #sp-header,
  .sp-header {
    min-height: 142px !important;
  }

  #sp-header #sp-logo img,
  #sp-header #sp-logo img.logo-image,
  #sp-header .logo img,
  #sp-header img.logo-image,
  #sp-header img[src*="logo-tus-bonneberg"],
  #sp-header img[src*="transparent-large"],
  .sp-header #sp-logo img,
  .sp-header #sp-logo img.logo-image,
  .sp-header .logo img,
  .sp-header img.logo-image,
  .sp-header img[src*="logo-tus-bonneberg"],
  .sp-header img[src*="transparent-large"] {
    top: 14px !important;
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    min-height: 132px !important;
  }

  #sp-main-body {
    padding-top: 74px !important;
  }
}
/* =========================================================
   PATCH V10: Desktop-Service-Pills Hover-Kontrast korrigieren
   Ziel: Beim Überfahren mit der Maus bleibt der Text lesbar.
   Ursache: Die allgemeine Topbar-Regel #sp-top-bar a { color: cyan !important; }
   überstimmt schwächere Hover-Regeln.
   ========================================================= */

@media (min-width: 992px) {
  #sp-top-bar .tus-service-nav a:hover,
  #sp-top-bar .tus-service-nav a:focus,
  #sp-top-bar .tus-service-nav a:focus-visible,
  #sp-top-bar .tus-service-nav-desktop a:hover,
  #sp-top-bar .tus-service-nav-desktop a:focus,
  #sp-top-bar .tus-service-nav-desktop a:focus-visible,
  .sp-top-bar .tus-service-nav a:hover,
  .sp-top-bar .tus-service-nav a:focus,
  .sp-top-bar .tus-service-nav a:focus-visible,
  .sp-top-bar .tus-service-nav-desktop a:hover,
  .sp-top-bar .tus-service-nav-desktop a:focus,
  .sp-top-bar .tus-service-nav-desktop a:focus-visible {
    color: var(--tus-black) !important;
    background: var(--tus-cyan) !important;
    border-color: var(--tus-cyan) !important;
    text-shadow: none !important;
  }

  #sp-top-bar .tus-service-nav a:hover *,
  #sp-top-bar .tus-service-nav a:focus *,
  #sp-top-bar .tus-service-nav a:focus-visible *,
  #sp-top-bar .tus-service-nav-desktop a:hover *,
  #sp-top-bar .tus-service-nav-desktop a:focus *,
  #sp-top-bar .tus-service-nav-desktop a:focus-visible *,
  .sp-top-bar .tus-service-nav a:hover *,
  .sp-top-bar .tus-service-nav a:focus *,
  .sp-top-bar .tus-service-nav a:focus-visible *,
  .sp-top-bar .tus-service-nav-desktop a:hover *,
  .sp-top-bar .tus-service-nav-desktop a:focus *,
  .sp-top-bar .tus-service-nav-desktop a:focus-visible * {
    color: var(--tus-black) !important;
  }
}
/* =========================================================
   PATCH V12: JEvents Detailseite + Aktuelle-Termine-Modul
   Basis: V10 guter Stand. Greift auf die tatsächlich ermittelten
   JEvents-Klassen: #jevents, #jevents_header, #jevents_body,
   .jev_evdt, .jev_evdt_title, .jev_eventdetails_body usw.
   ========================================================= */

/* JEvents-Hauptbereich im Content */
#sp-component #jevents,
#jevents {
  --jev-card-bg: #ffffff;
  --jev-border: rgba(5, 7, 10, .08);
  --jev-cyan-soft: rgba(0, 207, 232, .10);
  color: var(--tus-text) !important;
}

#sp-component #jevents_header,
#sp-component #jevents_body,
#sp-component #jevents .contentpaneopen.jeventpage,
#jevents_header,
#jevents_body,
#jevents .contentpaneopen.jeventpage {
  background: var(--jev-card-bg) !important;
  border: 1px solid var(--jev-border) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 50px rgba(5, 7, 10, .10) !important;
  padding: clamp(20px, 3vw, 34px) !important;
  margin: 0 0 24px !important;
  overflow: visible !important;
}

/* Kopfbereich der Detailseite: alter Print-/Headerblock ruhiger */
#sp-component #jevents_header h2.contentheading,
#jevents_header h2.contentheading,
#sp-component #jevents h2.contentheading,
#jevents h2.contentheading {
  margin: 0 !important;
  color: var(--tus-black) !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.8rem, 2.6vw, 2.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
}

#sp-component #jevents_header h2.contentheading::after,
#jevents_header h2.contentheading::after,
#sp-component #jevents .jev_evdt_title::after,
#jevents .jev_evdt_title::after {
  content: "" !important;
  display: block !important;
  width: 86px !important;
  height: 4px !important;
  margin-top: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--tus-cyan), transparent) !important;
}

#sp-component #jevents .icon-print,
#jevents .icon-print,
#sp-component #jevents .jev_evdt_icons,
#jevents .jev_evdt_icons {
  opacity: .55 !important;
}

/* JEvents Navigation Jahr/Monat/Woche/Heute/Suche als Pills */
#sp-component #jevents .new-navigation,
#jevents .new-navigation {
  margin: 0 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#sp-component #jevents .new-navigation .nav-items,
#jevents .new-navigation .nav-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

#sp-component #jevents .new-navigation .nav-items > div,
#jevents .new-navigation .nav-items > div,
#sp-component #jevents .new-navigation a,
#jevents .new-navigation a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.10) !important;
  border: 1px solid rgba(0,207,232,.24) !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

#sp-component #jevents .new-navigation a:hover,
#jevents .new-navigation a:hover,
#sp-component #jevents .new-navigation .nav-items > div:hover,
#jevents .new-navigation .nav-items > div:hover {
  background: var(--tus-cyan) !important;
  border-color: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
}

/* Event-Detailkarte */
#sp-component #jevents .contentpaneopen.jev_evdt,
#jevents .contentpaneopen.jev_evdt,
#sp-component #jevents .jev_evdt,
#jevents .jev_evdt {
  background:
    radial-gradient(circle at top right, rgba(0,207,232,.12), transparent 18rem),
    #ffffff !important;
  border: 1px solid rgba(5,7,10,.08) !important;
  border-radius: 28px !important;
  box-shadow: 0 22px 58px rgba(5,7,10,.12) !important;
  padding: clamp(22px, 3vw, 38px) !important;
  margin: 0 !important;
  overflow: visible !important;
}

#sp-component #jevents .jev_evdt_header,
#jevents .jev_evdt_header {
  margin: 0 0 20px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(5,7,10,.08) !important;
}

#sp-component #jevents .jev_evdt_title,
#jevents .jev_evdt_title {
  color: var(--tus-black) !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-size: clamp(2rem, 3vw, 3.15rem) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
  margin: 0 !important;
}

#sp-component #jevents .jev_eventdetails_body,
#jevents .jev_eventdetails_body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* Einzelne Detailfelder */
#sp-component #jevents .jev_evdt_summary,
#sp-component #jevents .jev_evdt_hits,
#sp-component #jevents .jev_evdt_creator,
#sp-component #jevents .jev_evdt_contact,
#sp-component #jevents .jev_evdt_location,
#sp-component #jevents .jev_evdt_extrainf,
#jevents .jev_evdt_summary,
#jevents .jev_evdt_hits,
#jevents .jev_evdt_creator,
#jevents .jev_evdt_contact,
#jevents .jev_evdt_location,
#jevents .jev_evdt_extrainf {
  background: linear-gradient(135deg, rgba(0,207,232,.09), rgba(255,255,255,.96)) !important;
  border: 1px solid rgba(0,207,232,.20) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  color: var(--tus-text) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  min-height: 54px !important;
}

#sp-component #jevents .jev_evdt_desc,
#jevents .jev_evdt_desc {
  grid-column: 1 / -1 !important;
  background: #ffffff !important;
  border: 1px solid rgba(5,7,10,.08) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  margin: 4px 0 0 !important;
  color: var(--tus-text) !important;
  font-size: 1.06rem !important;
  line-height: 1.75 !important;
  box-shadow: 0 10px 26px rgba(5,7,10,.05) !important;
}

#sp-component #jevents .jev_evdt_desc p,
#jevents .jev_evdt_desc p {
  margin: 0 0 1rem !important;
}

#sp-component #jevents .jev_evdt_desc p:last-child,
#jevents .jev_evdt_desc p:last-child {
  margin-bottom: 0 !important;
}

/* Labels/kleine Texte innerhalb der Detailfelder */
#sp-component #jevents .creator,
#sp-component #jevents .contact,
#sp-component #jevents .location,
#jevents .creator,
#jevents .contact,
#jevents .location {
  color: var(--tus-black) !important;
  font-weight: 900 !important;
}

#sp-component #jevents a,
#jevents a {
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

#sp-component #jevents a:hover,
#sp-component #jevents a:focus,
#jevents a:hover,
#jevents a:focus {
  color: var(--tus-black) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tus-cyan) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}

/* Tabellen im JEvents-Bereich entschärfen */
#sp-component #jevents table,
#jevents table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  background: transparent !important;
}

#sp-component #jevents table td,
#sp-component #jevents table th,
#jevents table td,
#jevents table th {
  padding: 12px 14px !important;
  border: 0 !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--tus-text) !important;
}

#sp-component #jevents table th,
#jevents table th {
  background: var(--tus-dark) !important;
  color: #fff !important;
}

/* Linkes Modul „Aktuelle Termine“ ebenfalls moderner */
#sp-left table.mod_events_latest_table.jevbootstrap,
#sp-right table.mod_events_latest_table.jevbootstrap,
table.mod_events_latest_table.jevbootstrap {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  background: transparent !important;
}

#sp-left table.mod_events_latest_table.jevbootstrap tbody,
#sp-left table.mod_events_latest_table.jevbootstrap tr,
#sp-left table.mod_events_latest_table.jevbootstrap td,
#sp-right table.mod_events_latest_table.jevbootstrap tbody,
#sp-right table.mod_events_latest_table.jevbootstrap tr,
#sp-right table.mod_events_latest_table.jevbootstrap td {
  display: block !important;
  width: 100% !important;
}

#sp-left td.mod_events_latest,
#sp-left td.mod_events_latest_first,
#sp-right td.mod_events_latest,
#sp-right td.mod_events_latest_first {
  background: #ffffff !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 18px !important;
  padding: 13px 14px !important;
  margin: 0 0 10px !important;
  box-shadow: 0 10px 26px rgba(5,7,10,.06) !important;
}

#sp-left .mod_events_latest_content,
#sp-right .mod_events_latest_content {
  display: block !important;
  color: var(--tus-black) !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}

#sp-left .mod_events_latest_date,
#sp-right .mod_events_latest_date {
  color: var(--tus-muted) !important;
  font-weight: 750 !important;
  font-size: .92rem !important;
}

#sp-left .mod_events_latest_callink,
#sp-right .mod_events_latest_callink {
  margin-top: 14px !important;
}

#sp-left .mod_events_latest_callink a,
#sp-right .mod_events_latest_callink a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

@media (max-width: 991px) {
  #sp-component #jevents_header,
  #sp-component #jevents_body,
  #sp-component #jevents .contentpaneopen.jeventpage,
  #jevents_header,
  #jevents_body,
  #jevents .contentpaneopen.jeventpage,
  #sp-component #jevents .contentpaneopen.jev_evdt,
  #jevents .contentpaneopen.jev_evdt {
    border-radius: 20px !important;
    padding: 18px !important;
  }

  #sp-component #jevents .new-navigation .nav-items,
  #jevents .new-navigation .nav-items {
    gap: 7px !important;
  }

  #sp-component #jevents .new-navigation .nav-items > div,
  #jevents .new-navigation .nav-items > div,
  #sp-component #jevents .new-navigation a,
  #jevents .new-navigation a {
    min-height: 36px !important;
    padding: 8px 11px !important;
    font-size: .86rem !important;
  }

  #sp-component #jevents .jev_eventdetails_body,
  #jevents .jev_eventdetails_body {
    display: block !important;
  }

  #sp-component #jevents .jev_evdt_summary,
  #sp-component #jevents .jev_evdt_hits,
  #sp-component #jevents .jev_evdt_creator,
  #sp-component #jevents .jev_evdt_contact,
  #sp-component #jevents .jev_evdt_location,
  #sp-component #jevents .jev_evdt_extrainf,
  #sp-component #jevents .jev_evdt_desc,
  #jevents .jev_evdt_summary,
  #jevents .jev_evdt_hits,
  #jevents .jev_evdt_creator,
  #jevents .jev_evdt_contact,
  #jevents .jev_evdt_location,
  #jevents .jev_evdt_extrainf,
  #jevents .jev_evdt_desc {
    margin: 0 0 12px !important;
  }
}

/* =========================================================
   V13 JEvents Nachschärfung
   - kleinere JEvents-Pills
   - ruhigere linke Terminliste
   - Termindetail-Felder nicht mehr als verzerrte Kacheln
   - Kalenderansicht dezenter
   - Link-Klicks im Termine-Modul mobil sicher anklickbar
   ========================================================= */

/* Linkes Modul „Aktuelle Termine“ kompakter */
#sp-left .sp-module:has(table.mod_events_latest_table),
#sp-right .sp-module:has(table.mod_events_latest_table) {
  padding: 20px !important;
}

#sp-left table.mod_events_latest_table.jevbootstrap,
#sp-right table.mod_events_latest_table.jevbootstrap,
table.mod_events_latest_table.jevbootstrap {
  border-spacing: 0 8px !important;
}

#sp-left td.mod_events_latest,
#sp-left td.mod_events_latest_first,
#sp-right td.mod_events_latest,
#sp-right td.mod_events_latest_first {
  padding: 10px 12px !important;
  margin: 0 0 8px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(5,7,10,.045) !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#sp-left .mod_events_latest_content,
#sp-right .mod_events_latest_content {
  margin-bottom: 5px !important;
  line-height: 1.25 !important;
}

#sp-left .mod_events_latest_content a,
#sp-right .mod_events_latest_content a,
#sp-left .mod_events_latest a,
#sp-left .mod_events_latest_first a,
#sp-right .mod_events_latest a,
#sp-right .mod_events_latest_first a {
  display: inline-block !important;
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

#sp-left .mod_events_latest_content a:hover,
#sp-left .mod_events_latest_content a:focus,
#sp-right .mod_events_latest_content a:hover,
#sp-right .mod_events_latest_content a:focus {
  color: var(--tus-black) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tus-cyan) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

#sp-left .mod_events_latest_date,
#sp-right .mod_events_latest_date {
  font-size: .82rem !important;
  line-height: 1.35 !important;
  color: #5e6c7f !important;
}

#sp-left .icon-calendar,
#sp-left .icon-clock,
#sp-left .icon-hand-right,
#sp-right .icon-calendar,
#sp-right .icon-clock,
#sp-right .icon-hand-right {
  font-size: .88em !important;
  margin-right: 3px !important;
}

/* JEvents Kopf und Detailkarte etwas ruhiger */
#sp-component #jevents_header,
#sp-component #jevents_body,
#jevents_header,
#jevents_body {
  padding: 22px 26px !important;
  border-radius: 22px !important;
}

#sp-component #jevents .contentpaneopen.jev_evdt,
#jevents .contentpaneopen.jev_evdt {
  padding: 28px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(0,207,232,.06), #fff 42%) !important;
}

#sp-component #jevents .jev_evdt_title,
#jevents .jev_evdt_title {
  font-size: clamp(1.9rem, 3vw, 3.1rem) !important;
  line-height: 1.08 !important;
  margin-bottom: 20px !important;
}

/* Verzerrte Detail-Kacheln vermeiden: volle Zeilen statt schmaler Spalten */
#sp-component #jevents .jev_eventdetails_body,
#jevents .jev_eventdetails_body {
  display: block !important;
  gap: 0 !important;
}

#sp-component #jevents .jev_evdt_summary,
#sp-component #jevents .jev_evdt_hits,
#sp-component #jevents .jev_evdt_creator,
#sp-component #jevents .jev_evdt_contact,
#sp-component #jevents .jev_evdt_location,
#sp-component #jevents .jev_evdt_extrainf,
#jevents .jev_evdt_summary,
#jevents .jev_evdt_hits,
#jevents .jev_evdt_creator,
#jevents .jev_evdt_contact,
#jevents .jev_evdt_location,
#jevents .jev_evdt_extrainf {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  box-shadow: none !important;
  line-height: 1.45 !important;
}

/* Leere JEvents-Felder nicht als leere Kacheln zeigen */
#sp-component #jevents .jev_evdt_summary:empty,
#sp-component #jevents .jev_evdt_hits:empty,
#sp-component #jevents .jev_evdt_creator:empty,
#sp-component #jevents .jev_evdt_contact:empty,
#sp-component #jevents .jev_evdt_location:empty,
#sp-component #jevents .jev_evdt_extrainf:empty,
#sp-component #jevents .jev_evdt_desc:empty,
#jevents .jev_evdt_summary:empty,
#jevents .jev_evdt_hits:empty,
#jevents .jev_evdt_creator:empty,
#jevents .jev_evdt_contact:empty,
#jevents .jev_evdt_location:empty,
#jevents .jev_evdt_extrainf:empty,
#jevents .jev_evdt_desc:empty {
  display: none !important;
}

#sp-component #jevents .jev_evdt_desc,
#jevents .jev_evdt_desc {
  padding: 16px 0 0 !important;
  margin: 10px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(5,7,10,.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Aufrufe-Zähler dezent, nicht als hoher Block */
#sp-component #jevents .jev_evdt_hits,
#jevents .jev_evdt_hits {
  color: var(--tus-muted) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}

/* Navigation im JEvents-Bereich deutlich kleiner */
#sp-component #jevents .new-navigation,
#jevents .new-navigation {
  margin-bottom: 18px !important;
}

#sp-component #jevents .new-navigation .nav-items,
#jevents .new-navigation .nav-items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

#sp-component #jevents .new-navigation .nav-items > div,
#jevents .new-navigation .nav-items > div,
#sp-component #jevents .new-navigation a,
#jevents .new-navigation a,
#sp-component #jevents [id^="nav-"] a,
#jevents [id^="nav-"] a {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}

/* Kalender/Monatsansicht: breite Tabellen wieder als Kalender behandeln, nicht als Kartenliste */
#sp-component #jevents table[class*="cal"],
#sp-component #jevents table[class*="month"],
#sp-component #jevents .jev_month table,
#sp-component #jevents .jev_calendar table,
#jevents table[class*="cal"],
#jevents table[class*="month"],
#jevents .jev_month table,
#jevents .jev_calendar table {
  border-collapse: separate !important;
  border-spacing: 8px !important;
  table-layout: fixed !important;
  background: transparent !important;
}

#sp-component #jevents table[class*="cal"] td,
#sp-component #jevents table[class*="month"] td,
#sp-component #jevents .jev_month table td,
#sp-component #jevents .jev_calendar table td,
#jevents table[class*="cal"] td,
#jevents table[class*="month"] td,
#jevents .jev_month table td,
#jevents .jev_calendar table td {
  background: #ffffff !important;
  border: 1px solid rgba(5,7,10,.08) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  vertical-align: top !important;
  box-shadow: none !important;
}

#sp-component #jevents table[class*="cal"] th,
#sp-component #jevents table[class*="month"] th,
#sp-component #jevents .jev_month table th,
#sp-component #jevents .jev_calendar table th,
#jevents table[class*="cal"] th,
#jevents table[class*="month"] th,
#jevents .jev_month table th,
#jevents .jev_calendar table th {
  background: transparent !important;
  color: var(--tus-text) !important;
  border: 0 !important;
  padding: 8px !important;
  text-align: center !important;
  font-weight: 900 !important;
}

/* Kleine Eventblöcke im Kalender moderner, aber kompakt */
#sp-component #jevents table[class*="cal"] a,
#sp-component #jevents table[class*="month"] a,
#jevents table[class*="cal"] a,
#jevents table[class*="month"] a {
  font-size: .78rem !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

/* JEvents Monats-Vor/Zurück-Leiste: Rot entschärfen, falls vom Plugin inline/Theme kommt */
#sp-component #jevents a[title*="Mai"],
#sp-component #jevents a[title*="Juli"],
#jevents a[title*="Mai"],
#jevents a[title*="Juli"] {
  color: var(--tus-black) !important;
}

/* Mobile: Termine anklickbar und Karten kleiner */
@media (max-width: 991px) {
  #sp-left,
  #sp-left .sp-module,
  #sp-left table.mod_events_latest_table,
  #sp-left table.mod_events_latest_table * {
    pointer-events: auto !important;
  }

  #sp-left .sp-module:has(table.mod_events_latest_table),
  #sp-right .sp-module:has(table.mod_events_latest_table) {
    padding: 16px !important;
  }

  #sp-left td.mod_events_latest,
  #sp-left td.mod_events_latest_first,
  #sp-right td.mod_events_latest,
  #sp-right td.mod_events_latest_first {
    padding: 9px 10px !important;
    border-radius: 13px !important;
  }

  #sp-left .mod_events_latest_content,
  #sp-right .mod_events_latest_content {
    font-size: .95rem !important;
  }

  #sp-left .mod_events_latest_date,
  #sp-right .mod_events_latest_date {
    font-size: .78rem !important;
  }

  #sp-component #jevents_header,
  #sp-component #jevents_body,
  #jevents_header,
  #jevents_body,
  #sp-component #jevents .contentpaneopen.jev_evdt,
  #jevents .contentpaneopen.jev_evdt {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  #sp-component #jevents .jev_evdt_title,
  #jevents .jev_evdt_title {
    font-size: 1.8rem !important;
  }

  #sp-component #jevents .new-navigation .nav-items,
  #jevents .new-navigation .nav-items {
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  #sp-component #jevents .new-navigation .nav-items > div,
  #jevents .new-navigation .nav-items > div,
  #sp-component #jevents .new-navigation a,
  #jevents .new-navigation a {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: .8rem !important;
  }
}

/* =========================================================
   V14 JEvents Feinschliff
   - Aktuelle Termine deutlich kompakter
   - mobile Eventdetails sauber untereinander
   - Kontakt/Ort einheitlich mit Label-Badge
   - Wiederholungslinks nicht mehr in andere Felder ragend
   ========================================================= */

/* Linkes Modul „Aktuelle Termine“: deutlich kompakter */
#sp-left .sp-module:has(table.mod_events_latest_table),
#sp-right .sp-module:has(table.mod_events_latest_table) {
  padding: 16px !important;
}

#sp-left table.mod_events_latest_table.jevbootstrap,
#sp-right table.mod_events_latest_table.jevbootstrap,
table.mod_events_latest_table.jevbootstrap {
  border-spacing: 0 6px !important;
  border-collapse: separate !important;
}

#sp-left td.mod_events_latest,
#sp-left td.mod_events_latest_first,
#sp-right td.mod_events_latest,
#sp-right td.mod_events_latest_first {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: 1px solid rgba(0,207,232,.16) !important;
}

#sp-left .mod_events_latest_content,
#sp-right .mod_events_latest_content {
  margin-bottom: 4px !important;
  line-height: 1.18 !important;
}

#sp-left .mod_events_latest_content a,
#sp-right .mod_events_latest_content a,
#sp-left .mod_events_latest a,
#sp-left .mod_events_latest_first a,
#sp-right .mod_events_latest a,
#sp-right .mod_events_latest_first a {
  font-size: .88rem !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
}

#sp-left .mod_events_latest_date,
#sp-right .mod_events_latest_date {
  font-size: .74rem !important;
  line-height: 1.22 !important;
  color: #5e6c7f !important;
}

#sp-left .icon-calendar,
#sp-left .icon-clock,
#sp-left .icon-hand-right,
#sp-right .icon-calendar,
#sp-right .icon-clock,
#sp-right .icon-hand-right {
  font-size: .78em !important;
  margin-right: 2px !important;
}

/* Eventdetail: Basis ruhiger und ohne verzerrende Breiten */
#sp-component #jevents .jev_eventdetails_body,
#jevents .jev_eventdetails_body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#sp-component #jevents .jev_evdt_summary,
#sp-component #jevents .jev_evdt_contact,
#sp-component #jevents .jev_evdt_location,
#sp-component #jevents .jev_evdt_extrainf,
#jevents .jev_evdt_summary,
#jevents .jev_evdt_contact,
#jevents .jev_evdt_location,
#jevents .jev_evdt_extrainf {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,207,232,.22) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Aufrufe nicht als große Kachel neben den Daten zeigen */
#sp-component #jevents .jev_evdt_hits,
#jevents .jev_evdt_hits {
  width: auto !important;
  max-width: max-content !important;
  min-height: 0 !important;
  margin: 0 0 2px auto !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.08) !important;
  border: 1px solid rgba(0,207,232,.16) !important;
  color: #657386 !important;
  font-size: .78rem !important;
  line-height: 1.15 !important;
  text-align: right !important;
}

/* Kontakt/Ort: Label und Wert klar getrennt */
#sp-component #jevents .jev_evdt_contact,
#sp-component #jevents .jev_evdt_location,
#jevents .jev_evdt_contact,
#jevents .jev_evdt_location {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--tus-text) !important;
  font-weight: 800 !important;
}

#sp-component #jevents .jev_evdt_contact .contact,
#sp-component #jevents .jev_evdt_location .location,
#jevents .jev_evdt_contact .contact,
#jevents .jev_evdt_location .location {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 76px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* Wiederholungslinks in der Datumskachel sauber untereinander */
#sp-component #jevents .jev_evdt_summary a,
#jevents .jev_evdt_summary a {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  position: static !important;
}

/* Mobile Detailansicht: keine Überlappungen, weniger riesiger Titel */
@media (max-width: 991px) {
  #sp-left .sp-module:has(table.mod_events_latest_table),
  #sp-right .sp-module:has(table.mod_events_latest_table) {
    padding: 12px !important;
  }

  #sp-left td.mod_events_latest,
  #sp-left td.mod_events_latest_first,
  #sp-right td.mod_events_latest,
  #sp-right td.mod_events_latest_first {
    padding: 8px 9px !important;
    border-radius: 12px !important;
  }

  #sp-left .mod_events_latest_content a,
  #sp-right .mod_events_latest_content a,
  #sp-left .mod_events_latest a,
  #sp-left .mod_events_latest_first a,
  #sp-right .mod_events_latest a,
  #sp-right .mod_events_latest_first a {
    font-size: .86rem !important;
  }

  #sp-left .mod_events_latest_date,
  #sp-right .mod_events_latest_date {
    font-size: .72rem !important;
  }

  #sp-component #jevents_header,
  #sp-component #jevents_body,
  #jevents_header,
  #jevents_body,
  #sp-component #jevents .contentpaneopen.jev_evdt,
  #jevents .contentpaneopen.jev_evdt {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #sp-component #jevents .jev_evdt_title,
  #jevents .jev_evdt_title {
    font-size: clamp(1.85rem, 8vw, 2.55rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 16px !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #sp-component #jevents .jev_evdt_header,
  #jevents .jev_evdt_header {
    margin-bottom: 14px !important;
  }

  #sp-component #jevents .jev_eventdetails_body,
  #jevents .jev_eventdetails_body {
    gap: 9px !important;
  }

  #sp-component #jevents .jev_evdt_summary,
  #sp-component #jevents .jev_evdt_contact,
  #sp-component #jevents .jev_evdt_location,
  #sp-component #jevents .jev_evdt_extrainf,
  #jevents .jev_evdt_summary,
  #jevents .jev_evdt_contact,
  #jevents .jev_evdt_location,
  #jevents .jev_evdt_extrainf {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: .98rem !important;
    line-height: 1.38 !important;
  }

  #sp-component #jevents .jev_evdt_summary,
  #jevents .jev_evdt_summary {
    font-size: .96rem !important;
    font-weight: 850 !important;
  }

  #sp-component #jevents .jev_evdt_summary a,
  #jevents .jev_evdt_summary a {
    margin-top: 6px !important;
    font-size: .94rem !important;
    line-height: 1.22 !important;
  }

  #sp-component #jevents .jev_evdt_hits,
  #jevents .jev_evdt_hits {
    align-self: flex-end !important;
    margin: -2px 0 2px auto !important;
    padding: 5px 9px !important;
    font-size: .72rem !important;
  }

  #sp-component #jevents .jev_evdt_contact,
  #sp-component #jevents .jev_evdt_location,
  #jevents .jev_evdt_contact,
  #jevents .jev_evdt_location {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #sp-component #jevents .jev_evdt_contact .contact,
  #sp-component #jevents .jev_evdt_location .location,
  #jevents .jev_evdt_contact .contact,
  #jevents .jev_evdt_location .location {
    min-width: 0 !important;
    width: 86px !important;
    padding: 6px 8px !important;
    font-size: .74rem !important;
  }
}

@media (max-width: 420px) {
  #sp-component #jevents .jev_evdt_title,
  #jevents .jev_evdt_title {
    font-size: clamp(1.7rem, 7.2vw, 2.25rem) !important;
  }

  #sp-component #jevents .jev_evdt_contact,
  #sp-component #jevents .jev_evdt_location,
  #jevents .jev_evdt_contact,
  #jevents .jev_evdt_location {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #sp-component #jevents .jev_evdt_contact .contact,
  #sp-component #jevents .jev_evdt_location .location,
  #jevents .jev_evdt_contact .contact,
  #jevents .jev_evdt_location .location {
    width: 78px !important;
    font-size: .7rem !important;
  }
}
/* =========================================================
   V15 JEvents Feinschliff
   - Aktuelle Termine links wirklich kompakter
   - Kontakt/Ort einheitlich auf einer Linie
   - Monatsnavigation rot/cyan an TuS-Design angepasst
   ========================================================= */

/* 1) Linkes Modul „Aktuelle Termine“: weniger Kartenhöhe, weniger Innenabstand */
#sp-left .sp-module:has(table.mod_events_latest_table),
#sp-right .sp-module:has(table.mod_events_latest_table) {
  padding: 18px !important;
}

#sp-left table.mod_events_latest_table.jevbootstrap,
#sp-right table.mod_events_latest_table.jevbootstrap,
table.mod_events_latest_table.jevbootstrap {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  width: 100% !important;
}

#sp-left table.mod_events_latest_table.jevbootstrap tr,
#sp-right table.mod_events_latest_table.jevbootstrap tr,
table.mod_events_latest_table.jevbootstrap tr {
  margin: 0 !important;
  padding: 0 !important;
}

#sp-left td.mod_events_latest,
#sp-left td.mod_events_latest_first,
#sp-right td.mod_events_latest,
#sp-right td.mod_events_latest_first {
  padding: 8px 10px !important;
  margin: 0 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  line-height: 1.25 !important;
}

#sp-left .mod_events_latest_content,
#sp-right .mod_events_latest_content {
  margin: 0 0 4px !important;
  line-height: 1.18 !important;
}

#sp-left .mod_events_latest_content a,
#sp-right .mod_events_latest_content a,
#sp-left .mod_events_latest a,
#sp-left .mod_events_latest_first a,
#sp-right .mod_events_latest a,
#sp-right .mod_events_latest_first a {
  font-size: .82rem !important;
  line-height: 1.16 !important;
}

#sp-left .mod_events_latest_date,
#sp-right .mod_events_latest_date {
  display: inline-flex !important;
  align-items: center !important;
  margin: 1px 9px 0 0 !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
}

#sp-left .icon-calendar,
#sp-left .icon-clock,
#sp-left .icon-hand-right,
#sp-right .icon-calendar,
#sp-right .icon-clock,
#sp-right .icon-hand-right {
  font-size: .78em !important;
  margin-right: 3px !important;
}

#sp-left .mod_events_latest_callink,
#sp-right .mod_events_latest_callink {
  margin-top: 10px !important;
}

#sp-left .mod_events_latest_callink a,
#sp-right .mod_events_latest_callink a {
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: .86rem !important;
}

/* 2) Kontakt und Ort: Label-Badge + Wert immer einheitlich auf einer Linie */
#sp-component #jevents .jev_evdt_contact,
#sp-component #jevents .jev_evdt_location,
#jevents .jev_evdt_contact,
#jevents .jev_evdt_location {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  line-height: 1.28 !important;
}

#sp-component #jevents .jev_evdt_contact .contact,
#sp-component #jevents .jev_evdt_location .location,
#jevents .jev_evdt_contact .contact,
#jevents .jev_evdt_location .location {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 68px !important;
  max-width: none !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-size: .76rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Wert hinter Label sauber, nicht als zweite Pill */
#sp-component #jevents .jev_evdt_contact,
#sp-component #jevents .jev_evdt_location,
#jevents .jev_evdt_contact,
#jevents .jev_evdt_location {
  color: var(--tus-text) !important;
  font-weight: 850 !important;
}

/* 3) JEvents Monatsnavigation: rote Balken farblich ans neue Design anpassen */
#sp-component #jevents td[style*="background:red"],
#sp-component #jevents td[style*="background: red"],
#sp-component #jevents td[style*="background-color:red"],
#sp-component #jevents td[style*="background-color: red"],
#sp-component #jevents td[style*="#ff0000"],
#sp-component #jevents td[style*="#FF0000"],
#jevents td[style*="background:red"],
#jevents td[style*="background: red"],
#jevents td[style*="background-color:red"],
#jevents td[style*="background-color: red"],
#jevents td[style*="#ff0000"],
#jevents td[style*="#FF0000"] {
  background: linear-gradient(135deg, rgba(0,207,232,.20), rgba(0,207,232,.08)) !important;
  border: 1px solid rgba(0,207,232,.28) !important;
  color: var(--tus-cyan-2) !important;
}

#sp-component #jevents td[style*="background:red"] a,
#sp-component #jevents td[style*="background: red"] a,
#sp-component #jevents td[style*="background-color:red"] a,
#sp-component #jevents td[style*="background-color: red"] a,
#sp-component #jevents td[style*="#ff0000"] a,
#sp-component #jevents td[style*="#FF0000"] a,
#jevents td[style*="background:red"] a,
#jevents td[style*="background: red"] a,
#jevents td[style*="background-color:red"] a,
#jevents td[style*="background-color: red"] a,
#jevents td[style*="#ff0000"] a,
#jevents td[style*="#FF0000"] a {
  color: var(--tus-cyan-2) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* Fallback für typische JEvents-Monatskopf-Klassen */
#sp-component #jevents .previousmonth,
#sp-component #jevents .nextmonth,
#sp-component #jevents .currentmonth,
#sp-component #jevents .jev_prevmonth,
#sp-component #jevents .jev_nextmonth,
#sp-component #jevents .jev_currentmonth,
#sp-component #jevents .jev_month_nav,
#jevents .previousmonth,
#jevents .nextmonth,
#jevents .currentmonth,
#jevents .jev_prevmonth,
#jevents .jev_nextmonth,
#jevents .jev_currentmonth,
#jevents .jev_month_nav {
  background: linear-gradient(135deg, rgba(0,207,232,.20), rgba(0,207,232,.08)) !important;
  border-color: rgba(0,207,232,.28) !important;
  color: var(--tus-cyan-2) !important;
}

#sp-component #jevents .previousmonth a,
#sp-component #jevents .nextmonth a,
#sp-component #jevents .currentmonth a,
#sp-component #jevents .jev_prevmonth a,
#sp-component #jevents .jev_nextmonth a,
#sp-component #jevents .jev_currentmonth a,
#sp-component #jevents .jev_month_nav a,
#jevents .previousmonth a,
#jevents .nextmonth a,
#jevents .currentmonth a,
#jevents .jev_prevmonth a,
#jevents .jev_nextmonth a,
#jevents .jev_currentmonth a,
#jevents .jev_month_nav a {
  color: var(--tus-cyan-2) !important;
}

/* Mobil: keine Grid-Regel mehr für Kontakt/Ort, damit Label und Name nicht umbrechen */
@media (max-width: 991px) {
  #sp-left .sp-module:has(table.mod_events_latest_table),
  #sp-right .sp-module:has(table.mod_events_latest_table) {
    padding: 12px !important;
  }

  #sp-left td.mod_events_latest,
  #sp-left td.mod_events_latest_first,
  #sp-right td.mod_events_latest,
  #sp-right td.mod_events_latest_first {
    padding: 7px 9px !important;
    border-radius: 11px !important;
  }

  #sp-left .mod_events_latest_content a,
  #sp-right .mod_events_latest_content a,
  #sp-left .mod_events_latest a,
  #sp-left .mod_events_latest_first a,
  #sp-right .mod_events_latest a,
  #sp-right .mod_events_latest_first a {
    font-size: .8rem !important;
  }

  #sp-component #jevents .jev_evdt_contact,
  #sp-component #jevents .jev_evdt_location,
  #jevents .jev_evdt_contact,
  #jevents .jev_evdt_location {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 11px !important;
  }

  #sp-component #jevents .jev_evdt_contact .contact,
  #sp-component #jevents .jev_evdt_location .location,
  #jevents .jev_evdt_contact .contact,
  #jevents .jev_evdt_location .location {
    width: auto !important;
    min-width: 62px !important;
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }
}

@media (max-width: 420px) {
  #sp-component #jevents .jev_evdt_contact,
  #sp-component #jevents .jev_evdt_location,
  #jevents .jev_evdt_contact,
  #jevents .jev_evdt_location {
    gap: 7px !important;
  }

  #sp-component #jevents .jev_evdt_contact .contact,
  #sp-component #jevents .jev_evdt_location .location,
  #jevents .jev_evdt_contact .contact,
  #jevents .jev_evdt_location .location {
    min-width: 58px !important;
    font-size: .68rem !important;
  }
}
/* =========================================================
   V16 JEvents Feinschliff
   - Kontakt/Ort Label + Wert sicher auf einer Linie
   - Hand-Icon in „Aktuelle Termine“ entfernen
   - Leerzeile zwischen Terminname und Datum entfernen
   ========================================================= */

/* 1) Kontakt/Ort: Label und Wert als normale Inline-Zeile erzwingen.
   Hintergrund: JEvents gibt den Wert als Text direkt nach dem span aus;
   Grid/Flex kann diesen Text als eigenes Element ungünstig umbrechen. */
#sp-component #jevents .jev_evdt_contact,
#sp-component #jevents .jev_evdt_location,
#jevents .jev_evdt_contact,
#jevents .jev_evdt_location {
  display: block !important;
  grid-template-columns: none !important;
  flex-direction: initial !important;
  align-items: initial !important;
  gap: 0 !important;
  white-space: normal !important;
  padding: 10px 12px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
}

#sp-component #jevents .jev_evdt_contact .contact,
#sp-component #jevents .jev_evdt_location .location,
#jevents .jev_evdt_contact .contact,
#jevents .jev_evdt_location .location {
  display: inline-flex !important;
  vertical-align: baseline !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 8px 0 0 !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-size: .76rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

@media (max-width: 420px) {
  #sp-component #jevents .jev_evdt_contact .contact,
  #sp-component #jevents .jev_evdt_location .location,
  #jevents .jev_evdt_contact .contact,
  #jevents .jev_evdt_location .location {
    font-size: .70rem !important;
    padding: 5px 8px !important;
    margin-right: 7px !important;
  }
}

/* 2) Aktuelle Termine: Hand-Icon komplett ausblenden */
#sp-left table.mod_events_latest_table .icon-hand-right,
#sp-left table.mod_events_latest_table .fa-hand-point-right,
#sp-right table.mod_events_latest_table .icon-hand-right,
#sp-right table.mod_events_latest_table .fa-hand-point-right,
table.mod_events_latest_table .icon-hand-right,
table.mod_events_latest_table .fa-hand-point-right {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Aktuelle Termine: Leerzeile nach dem Titel entfernen und Karten enger setzen */
#sp-left table.mod_events_latest_table.jevbootstrap,
#sp-right table.mod_events_latest_table.jevbootstrap,
table.mod_events_latest_table.jevbootstrap {
  border-spacing: 0 4px !important;
}

#sp-left td.mod_events_latest,
#sp-left td.mod_events_latest_first,
#sp-right td.mod_events_latest,
#sp-right td.mod_events_latest_first,
table.mod_events_latest_table td.mod_events_latest,
table.mod_events_latest_table td.mod_events_latest_first {
  padding: 6px 9px !important;
  line-height: 1.18 !important;
  min-height: 0 !important;
}

#sp-left .mod_events_latest_content,
#sp-right .mod_events_latest_content,
table.mod_events_latest_table .mod_events_latest_content {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

#sp-left .mod_events_latest_content a,
#sp-right .mod_events_latest_content a,
table.mod_events_latest_table .mod_events_latest_content a {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

/* unnötige Umbrüche im Modul entfernen, aber Datum/Uhrzeit über Spans weiter lesbar lassen */
#sp-left table.mod_events_latest_table br,
#sp-right table.mod_events_latest_table br,
table.mod_events_latest_table br {
  display: none !important;
}

#sp-left .mod_events_latest_date,
#sp-right .mod_events_latest_date,
table.mod_events_latest_table .mod_events_latest_date {
  display: inline-flex !important;
  align-items: center !important;
  margin: 3px 8px 0 0 !important;
  padding: 0 !important;
  font-size: .72rem !important;
  line-height: 1.12 !important;
}

#sp-left .icon-calendar,
#sp-left .icon-clock,
#sp-right .icon-calendar,
#sp-right .icon-clock,
table.mod_events_latest_table .icon-calendar,
table.mod_events_latest_table .icon-clock {
  margin-right: 3px !important;
}

@media (max-width: 991px) {
  #sp-left td.mod_events_latest,
  #sp-left td.mod_events_latest_first,
  #sp-right td.mod_events_latest,
  #sp-right td.mod_events_latest_first,
  table.mod_events_latest_table td.mod_events_latest,
  table.mod_events_latest_table td.mod_events_latest_first {
    padding: 6px 8px !important;
  }
}
/* =========================================================
   V17 JEvents Kalender-Boxen Feinschliff
   - Termine im Gesamt-/Monatskalender nicht mehr grau-klotzig
   - kompaktere, weichere Form im TuS-Cyan/Weiß-Stil
   - greift nur innerhalb #jevents auf typische JEvents-Kalenderboxen
   ========================================================= */

/* Kalenderbereich insgesamt etwas ruhiger */
#sp-component #jevents .jev_monthview,
#sp-component #jevents .jev_maincal,
#sp-component #jevents .jevcalendar,
#sp-component #jevents table.jevcalendar,
#sp-component #jevents table.jev_calendar,
#jevents .jev_monthview,
#jevents .jev_maincal,
#jevents .jevcalendar,
#jevents table.jevcalendar,
#jevents table.jev_calendar {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Einzelne Termine im Monatskalender: weg vom grauen Block, hin zu kompakter Mini-Pill/Karte */
#sp-component #jevents table td .eventstyle,
#sp-component #jevents table td div.eventstyle,
#sp-component #jevents table td div[class*="eventstyle"],
#sp-component #jevents table td .jev_event,
#sp-component #jevents table td .jev_ev_td_li,
#sp-component #jevents table td .jev_dayoutofmonth .eventstyle,
#sp-component #jevents table td div[style*="background:#e"],
#sp-component #jevents table td div[style*="background: #e"],
#sp-component #jevents table td div[style*="background-color:#e"],
#sp-component #jevents table td div[style*="background-color: #e"],
#sp-component #jevents table td div[style*="background:#E"],
#sp-component #jevents table td div[style*="background-color:#E"],
#jevents table td .eventstyle,
#jevents table td div.eventstyle,
#jevents table td div[class*="eventstyle"],
#jevents table td .jev_event,
#jevents table td .jev_ev_td_li,
#jevents table td div[style*="background:#e"],
#jevents table td div[style*="background: #e"],
#jevents table td div[style*="background-color:#e"],
#jevents table td div[style*="background-color: #e"],
#jevents table td div[style*="background:#E"],
#jevents table td div[style*="background-color:#E"] {
  display: block !important;
  min-height: 0 !important;
  margin: 3px 0 !important;
  padding: 5px 7px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(0,207,232,.16), rgba(255,255,255,.92)) !important;
  border: 1px solid rgba(0,207,232,.24) !important;
  border-left: 4px solid var(--tus-cyan) !important;
  box-shadow: none !important;
  color: var(--tus-text) !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
}

/* Linktext in Kalenderterminen lesbar, kompakt und ohne harte schwarze Unterkante */
#sp-component #jevents table td .eventstyle a,
#sp-component #jevents table td div.eventstyle a,
#sp-component #jevents table td div[class*="eventstyle"] a,
#sp-component #jevents table td .jev_event a,
#sp-component #jevents table td .jev_ev_td_li a,
#sp-component #jevents table td div[style*="background:#e"] a,
#sp-component #jevents table td div[style*="background: #e"] a,
#sp-component #jevents table td div[style*="background-color:#e"] a,
#sp-component #jevents table td div[style*="background-color: #e"] a,
#jevents table td .eventstyle a,
#jevents table td div.eventstyle a,
#jevents table td div[class*="eventstyle"] a,
#jevents table td .jev_event a,
#jevents table td .jev_ev_td_li a,
#jevents table td div[style*="background:#e"] a,
#jevents table td div[style*="background: #e"] a,
#jevents table td div[style*="background-color:#e"] a,
#jevents table td div[style*="background-color: #e"] a {
  display: block !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  font-size: .74rem !important;
  line-height: 1.14 !important;
  text-decoration: none !important;
  border: 0 !important;
}

#sp-component #jevents table td .eventstyle:hover,
#sp-component #jevents table td div.eventstyle:hover,
#sp-component #jevents table td div[class*="eventstyle"]:hover,
#sp-component #jevents table td .jev_event:hover,
#sp-component #jevents table td .jev_ev_td_li:hover,
#jevents table td .eventstyle:hover,
#jevents table td div.eventstyle:hover,
#jevents table td div[class*="eventstyle"]:hover,
#jevents table td .jev_event:hover,
#jevents table td .jev_ev_td_li:hover {
  background: linear-gradient(135deg, rgba(0,207,232,.28), rgba(255,255,255,.96)) !important;
  border-color: rgba(0,207,232,.42) !important;
  transform: translateY(-1px) !important;
}

/* Farbliche Kategorien: vorhandene linke Farbkante bleibt als dezenter Akzent, aber die Fläche bleibt hell */
#sp-component #jevents table td div[style*="border-left"],
#jevents table td div[style*="border-left"] {
  border-top: 1px solid rgba(0,207,232,.22) !important;
  border-right: 1px solid rgba(0,207,232,.22) !important;
  border-bottom: 1px solid rgba(0,207,232,.22) !important;
}

/* Kalenderzellen selbst etwas luftiger/ruhiger, ohne den Termin zu vergrößern */
#sp-component #jevents table td,
#jevents table td {
  vertical-align: top !important;
}

/* Mobil/Tablet: Kalenderterminboxen noch kompakter */
@media (max-width: 991px) {
  #sp-component #jevents table td .eventstyle,
  #sp-component #jevents table td div.eventstyle,
  #sp-component #jevents table td div[class*="eventstyle"],
  #sp-component #jevents table td .jev_event,
  #sp-component #jevents table td .jev_ev_td_li,
  #jevents table td .eventstyle,
  #jevents table td div.eventstyle,
  #jevents table td div[class*="eventstyle"],
  #jevents table td .jev_event,
  #jevents table td .jev_ev_td_li {
    margin: 2px 0 !important;
    padding: 4px 5px !important;
    border-radius: 7px !important;
    border-left-width: 3px !important;
  }

  #sp-component #jevents table td .eventstyle a,
  #sp-component #jevents table td div.eventstyle a,
  #sp-component #jevents table td div[class*="eventstyle"] a,
  #sp-component #jevents table td .jev_event a,
  #sp-component #jevents table td .jev_ev_td_li a,
  #jevents table td .eventstyle a,
  #jevents table td div.eventstyle a,
  #jevents table td div[class*="eventstyle"] a,
  #jevents table td .jev_event a,
  #jevents table td .jev_ev_td_li a {
    font-size: .68rem !important;
    line-height: 1.1 !important;
  }
}
/* =========================================================
   V18 JEvents Monatskalender: echte Terminboxen stärker treffen
   - V17 traf offenbar nur einen Teil der JEvents-Ausgabe
   - nutzt zusätzlich :has() auf Links zur Detailseite
   - macht graue Mini-Blöcke zu hellen cyan/weißen Mini-Karten
   ========================================================= */

/* Monatskalender-Container ruhiger, ohne die Seite insgesamt zu verändern */
#sp-component #jevents table,
#jevents table {
  border-collapse: separate !important;
}

/* Tageszellen moderner: weiche Kacheln statt harter Tabellenoptik */
#sp-component #jevents td.cal_td_dayshasevents,
#sp-component #jevents td.cal_td_today,
#sp-component #jevents td.cal_td_daysnoevents,
#sp-component #jevents td.cal_td_daysoutofmonth,
#jevents td.cal_td_dayshasevents,
#jevents td.cal_td_today,
#jevents td.cal_td_daysnoevents,
#jevents td.cal_td_daysoutofmonth {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(5,7,10,.07) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  padding: 7px !important;
}

#sp-component #jevents td.cal_td_today,
#jevents td.cal_td_today {
  background: linear-gradient(135deg, rgba(0,207,232,.13), rgba(255,255,255,.92)) !important;
  border-color: rgba(0,207,232,.34) !important;
}

/* Tagesnummern klarer */
#sp-component #jevents .cal_daylink,
#sp-component #jevents .cal_daylink a,
#sp-component #jevents .jev_daynum,
#jevents .cal_daylink,
#jevents .cal_daylink a,
#jevents .jev_daynum {
  color: var(--tus-cyan-2) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* Der wichtigste Treffer: jedes Element, das direkt einen JEvents-Terminlink enthält */
#sp-component #jevents td div:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td span:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td p:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td li:has(> a[href*="icalrepeat.detail"]),
#jevents td div:has(> a[href*="icalrepeat.detail"]),
#jevents td span:has(> a[href*="icalrepeat.detail"]),
#jevents td p:has(> a[href*="icalrepeat.detail"]),
#jevents td li:has(> a[href*="icalrepeat.detail"]) {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 4px 0 !important;
  padding: 6px 7px 6px 8px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(0,207,232,.17), rgba(255,255,255,.96)) !important;
  border: 1px solid rgba(0,207,232,.28) !important;
  border-left: 4px solid var(--tus-cyan) !important;
  box-shadow: 0 2px 8px rgba(5,7,10,.05) !important;
  overflow: hidden !important;
  color: var(--tus-text) !important;
  line-height: 1.15 !important;
}

/* Fallback für JEvents-Templates ohne :has-Struktur */
#sp-component #jevents td [class*="event"]:not(.jev_eventdetails_body):not(.jev_evdt_desc):not(.jev_evdt_contact):not(.jev_evdt_location),
#sp-component #jevents td [class*="jev_ev"]:not(.jev_eventdetails_body):not(.jev_evdt_desc):not(.jev_evdt_contact):not(.jev_evdt_location),
#jevents td [class*="event"]:not(.jev_eventdetails_body):not(.jev_evdt_desc):not(.jev_evdt_contact):not(.jev_evdt_location),
#jevents td [class*="jev_ev"]:not(.jev_eventdetails_body):not(.jev_evdt_desc):not(.jev_evdt_contact):not(.jev_evdt_location) {
  border-radius: 10px !important;
}

/* Der Link selbst: als sauberer Inhalt, nicht als alter grauer Block */
#sp-component #jevents td a[href*="icalrepeat.detail"],
#jevents td a[href*="icalrepeat.detail"] {
  display: block !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 900 !important;
  font-size: .76rem !important;
  line-height: 1.13 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sp-component #jevents td div:has(> a[href*="icalrepeat.detail"]):hover,
#sp-component #jevents td span:has(> a[href*="icalrepeat.detail"]):hover,
#jevents td div:has(> a[href*="icalrepeat.detail"]):hover,
#jevents td span:has(> a[href*="icalrepeat.detail"]):hover {
  background: linear-gradient(135deg, rgba(0,207,232,.30), rgba(255,255,255,.98)) !important;
  border-color: rgba(0,207,232,.48) !important;
  transform: translateY(-1px) !important;
}

/* Alte schwarze Unterkante/harte Inline-Ränder bei Terminboxen entschärfen */
#sp-component #jevents td div:has(> a[href*="icalrepeat.detail"])[style],
#sp-component #jevents td span:has(> a[href*="icalrepeat.detail"])[style],
#jevents td div:has(> a[href*="icalrepeat.detail"])[style],
#jevents td span:has(> a[href*="icalrepeat.detail"])[style] {
  border-top-color: rgba(0,207,232,.28) !important;
  border-right-color: rgba(0,207,232,.28) !important;
  border-bottom-color: rgba(0,207,232,.28) !important;
}

/* Wochenkopf im Monatskalender dezenter */
#sp-component #jevents th,
#jevents th,
#sp-component #jevents .cal_daysnames,
#jevents .cal_daysnames {
  background: transparent !important;
  color: var(--tus-text) !important;
}

/* Mobile/kleine Breiten: kompakt halten */
@media (max-width: 991px) {
  #sp-component #jevents td div:has(> a[href*="icalrepeat.detail"]),
  #sp-component #jevents td span:has(> a[href*="icalrepeat.detail"]),
  #jevents td div:has(> a[href*="icalrepeat.detail"]),
  #jevents td span:has(> a[href*="icalrepeat.detail"]) {
    margin: 3px 0 !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
    border-left-width: 3px !important;
  }

  #sp-component #jevents td a[href*="icalrepeat.detail"],
  #jevents td a[href*="icalrepeat.detail"] {
    font-size: .68rem !important;
    line-height: 1.1 !important;
  }
}
/* =========================================================
   V20 JEvents Monatskalender: graue Innenkacheln entfernen,
   Kategorien behalten
   - baut auf V18 auf, nicht auf V19
   - entfernt nur graue Hintergründe innerhalb der Terminboxen
   - lässt farbliche Kategorie-Kanten erhalten
   ========================================================= */

/* Der Termin-WRAPPER bleibt die einzige sichtbare Karte */
#sp-component #jevents td div:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td span:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td p:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td li:has(> a[href*="icalrepeat.detail"]),
#jevents td div:has(> a[href*="icalrepeat.detail"]),
#jevents td span:has(> a[href*="icalrepeat.detail"]),
#jevents td p:has(> a[href*="icalrepeat.detail"]),
#jevents td li:has(> a[href*="icalrepeat.detail"]) {
  display: block !important;
  margin: 4px 0 !important;
  padding: 6px 7px 6px 8px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(0,207,232,.13), rgba(255,255,255,.96)) !important;
  border-top: 1px solid rgba(0,207,232,.24) !important;
  border-right: 1px solid rgba(0,207,232,.24) !important;
  border-bottom: 1px solid rgba(0,207,232,.24) !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  box-shadow: 0 2px 7px rgba(5,7,10,.045) !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Kategorie-Farben aus Inline-Styles wieder sichtbar machen */
#sp-component #jevents td [style*="red"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="#ff0000"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="#FF0000"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="rgb(255, 0, 0)"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="red"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="#ff0000"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="#FF0000"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="rgb(255, 0, 0)"]:has(> a[href*="icalrepeat.detail"]) {
  border-left-color: #ff3b30 !important;
}

#sp-component #jevents td [style*="yellow"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="#ffff00"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="#FFFF00"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="rgb(255, 255, 0)"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="yellow"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="#ffff00"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="#FFFF00"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="rgb(255, 255, 0)"]:has(> a[href*="icalrepeat.detail"]) {
  border-left-color: #ffe600 !important;
}

#sp-component #jevents td [style*="#000000"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="#000"]:has(> a[href*="icalrepeat.detail"]),
#sp-component #jevents td [style*="black"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="#000000"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="#000"]:has(> a[href*="icalrepeat.detail"]),
#jevents td [style*="black"]:has(> a[href*="icalrepeat.detail"]) {
  border-left-color: #05070a !important;
}

/* Wichtig: Der Link und seine inneren Elemente bekommen KEINE eigene Kachel mehr. */
#sp-component #jevents td a[href*="icalrepeat.detail"],
#jevents td a[href*="icalrepeat.detail"] {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 900 !important;
  font-size: .74rem !important;
  line-height: 1.12 !important;
  text-decoration: none !important;
}

#sp-component #jevents td a[href*="icalrepeat.detail"] *,
#jevents td a[href*="icalrepeat.detail"] * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Graue/eckige Zwischencontainer neutralisieren, aber keine Kategorie-Border entfernen */
#sp-component #jevents td div:has(a[href*="icalrepeat.detail"]):not(:has(> a[href*="icalrepeat.detail"])),
#sp-component #jevents td span:has(a[href*="icalrepeat.detail"]):not(:has(> a[href*="icalrepeat.detail"])),
#jevents td div:has(a[href*="icalrepeat.detail"]):not(:has(> a[href*="icalrepeat.detail"])),
#jevents td span:has(a[href*="icalrepeat.detail"]):not(:has(> a[href*="icalrepeat.detail"])) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#sp-component #jevents td div:has(> a[href*="icalrepeat.detail"]):hover,
#sp-component #jevents td span:has(> a[href*="icalrepeat.detail"]):hover,
#jevents td div:has(> a[href*="icalrepeat.detail"]):hover,
#jevents td span:has(> a[href*="icalrepeat.detail"]):hover {
  background: linear-gradient(135deg, rgba(0,207,232,.24), rgba(255,255,255,.98)) !important;
  border-top-color: rgba(0,207,232,.38) !important;
  border-right-color: rgba(0,207,232,.38) !important;
  border-bottom-color: rgba(0,207,232,.38) !important;
}

@media (max-width: 991px) {
  #sp-component #jevents td div:has(> a[href*="icalrepeat.detail"]),
  #sp-component #jevents td span:has(> a[href*="icalrepeat.detail"]),
  #jevents td div:has(> a[href*="icalrepeat.detail"]),
  #jevents td span:has(> a[href*="icalrepeat.detail"]) {
    margin: 3px 0 !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
    border-left-width: 3px !important;
  }

  #sp-component #jevents td a[href*="icalrepeat.detail"],
  #jevents td a[href*="icalrepeat.detail"] {
    font-size: .68rem !important;
    line-height: 1.08 !important;
  }
}

/* =========================================================
   V21 – Desktop-Suchvorschläge lesbar machen
   Problem: Finder-/Suchvorschläge in der Topbar wurden mit heller Schrift
   auf hellem Hintergrund ausgegeben.
   ========================================================= */

@media (min-width: 992px) {
  /* Joomla Smart Search / Awesomplete Vorschlagsbox */
  #sp-top-bar .awesomplete,
  .sp-top-bar .awesomplete,
  #sp-top2 .awesomplete,
  #sp-top3 .awesomplete {
    position: relative !important;
    width: 260px !important;
    max-width: 260px !important;
  }

  #sp-top-bar .awesomplete > ul,
  .sp-top-bar .awesomplete > ul,
  #sp-top2 .awesomplete > ul,
  #sp-top3 .awesomplete > ul,
  #sp-top-bar ul.awesomplete,
  .sp-top-bar ul.awesomplete {
    background: #ffffff !important;
    color: #05070a !important;
    border: 1px solid rgba(0,207,232,.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(5,7,10,.24) !important;
    margin-top: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
    z-index: 99999 !important;
  }

  #sp-top-bar .awesomplete > ul > li,
  .sp-top-bar .awesomplete > ul > li,
  #sp-top2 .awesomplete > ul > li,
  #sp-top3 .awesomplete > ul > li,
  #sp-top-bar ul.awesomplete > li,
  .sp-top-bar ul.awesomplete > li {
    color: #05070a !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 9px 11px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
  }

  #sp-top-bar .awesomplete > ul > li:hover,
  #sp-top-bar .awesomplete > ul > li[aria-selected="true"],
  .sp-top-bar .awesomplete > ul > li:hover,
  .sp-top-bar .awesomplete > ul > li[aria-selected="true"],
  #sp-top2 .awesomplete > ul > li:hover,
  #sp-top2 .awesomplete > ul > li[aria-selected="true"],
  #sp-top3 .awesomplete > ul > li:hover,
  #sp-top3 .awesomplete > ul > li[aria-selected="true"] {
    background: rgba(0,207,232,.16) !important;
    color: #05070a !important;
  }

  #sp-top-bar .awesomplete mark,
  .sp-top-bar .awesomplete mark,
  #sp-top2 .awesomplete mark,
  #sp-top3 .awesomplete mark {
    background: rgba(0,207,232,.26) !important;
    color: #05070a !important;
    border-radius: 5px !important;
    padding: 0 2px !important;
    font-weight: 950 !important;
  }

  /* Fallback für andere Joomla-/Finder-Vorschlagslisten im Topbar-Bereich */
  #sp-top-bar .autocomplete-suggestions,
  #sp-top-bar .ui-autocomplete,
  #sp-top-bar .finder-suggestions,
  #sp-top-bar .search-suggestions,
  .sp-top-bar .autocomplete-suggestions,
  .sp-top-bar .ui-autocomplete,
  .sp-top-bar .finder-suggestions,
  .sp-top-bar .search-suggestions {
    background: #ffffff !important;
    color: #05070a !important;
    border: 1px solid rgba(0,207,232,.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(5,7,10,.24) !important;
    padding: 8px !important;
    z-index: 99999 !important;
  }

  #sp-top-bar .autocomplete-suggestions *,
  #sp-top-bar .ui-autocomplete *,
  #sp-top-bar .finder-suggestions *,
  #sp-top-bar .search-suggestions *,
  .sp-top-bar .autocomplete-suggestions *,
  .sp-top-bar .ui-autocomplete *,
  .sp-top-bar .finder-suggestions *,
  .sp-top-bar .search-suggestions * {
    color: #05070a !important;
  }
}
/* =========================================================
   V22 JEvents / Aktuelle Termine Layout
   - linkes Termine-Fenster auf Notebook/Desktop schmaler
   - Mobil: bei Termindetailseiten Hauptinhalt vor Sidebar anzeigen
   - keine Änderung an Header, Logo, Suche oder Service-Modul
   ========================================================= */

/* 1) Desktop/Notebook: linke Sidebar mit „Aktuelle Termine“ schmaler halten.
   Die Bootstrap-Spalten werden nur im Inhaltsbereich angepasst. */
@media (min-width: 992px) {
  #sp-main-body > .container > .container-inner > .row {
    display: flex !important;
    align-items: flex-start !important;
  }

  #sp-main-body #sp-left.col-lg-4,
  #sp-main-body aside#sp-left {
    flex: 0 0 285px !important;
    width: 285px !important;
    max-width: 285px !important;
  }

  #sp-main-body #sp-component.col-lg-8,
  #sp-main-body div#sp-component {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: calc(100% - 285px) !important;
    min-width: 0 !important;
  }

  /* Das Termine-Modul selbst noch etwas enger, ohne die Schrift weiter zu verkleinern. */
  #sp-left .sp-module:has(table.mod_events_latest_table),
  #sp-right .sp-module:has(table.mod_events_latest_table) {
    padding: 14px !important;
  }

  #sp-left table.mod_events_latest_table.jevbootstrap,
  #sp-right table.mod_events_latest_table.jevbootstrap,
  table.mod_events_latest_table.jevbootstrap {
    border-spacing: 0 3px !important;
  }

  #sp-left td.mod_events_latest,
  #sp-left td.mod_events_latest_first,
  #sp-right td.mod_events_latest,
  #sp-right td.mod_events_latest_first,
  table.mod_events_latest_table td.mod_events_latest,
  table.mod_events_latest_table td.mod_events_latest_first {
    padding: 5px 8px !important;
    border-radius: 10px !important;
  }
}

@media (min-width: 992px) and (max-width: 1180px) {
  #sp-main-body #sp-left.col-lg-4,
  #sp-main-body aside#sp-left {
    flex-basis: 260px !important;
    width: 260px !important;
    max-width: 260px !important;
  }

  #sp-main-body #sp-component.col-lg-8,
  #sp-main-body div#sp-component {
    max-width: calc(100% - 260px) !important;
  }
}

/* 2) Mobil: Hauptinhalt vor linker Sidebar.
   Dadurch erscheint nach einem Klick auf einen Termin die geöffnete Terminseite zuerst,
   statt dass der Nutzer wieder oben bei „Aktuelle Termine“ landet. */
@media (max-width: 991px) {
  #sp-main-body > .container > .container-inner > .row {
    display: flex !important;
    flex-direction: column !important;
  }

  #sp-main-body #sp-component {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #sp-main-body #sp-left {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 22px !important;
  }

  #sp-main-body #sp-right {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   V23 – Artikelansichten aufräumen
   - Social-Share-Zeile in Beiträgen ausblenden
   - Related-Articles/Ähnliche Beiträge im Beitragsfuß ausblenden
   - bewusst nur innerhalb von Artikelansichten, damit Topbar/Offcanvas
     und JEvents nicht verändert werden
   ========================================================= */

/* 1) Social-Share-Zeilen / LinkedIn-X-Icons in Artikeln entfernen */
.view-article .article-details .article-ratings-social-share,
.view-article .article-details .article-social-share,
.view-article .article-details .helix-social-share,
.view-article .article-details .social-share,
.view-article .article-details .social-sharing,
.view-article .article-details .addthis_inline_share_toolbox,
.view-article .article-details .joomla-social-share,
.view-article .item-page .article-ratings-social-share,
.view-article .item-page .article-social-share,
.view-article .item-page .helix-social-share,
.view-article .item-page .social-share,
.view-article .item-page .social-sharing,
.view-article .item-page .addthis_inline_share_toolbox,
.view-article .item-page .joomla-social-share {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Falls die Icons nur als Links ohne klare Wrapperklasse ausgegeben werden */
.view-article .article-details a[href*="linkedin.com"],
.view-article .article-details a[href*="twitter.com"],
.view-article .article-details a[href*="x.com"],
.view-article .item-page a[href*="linkedin.com"],
.view-article .item-page a[href*="twitter.com"],
.view-article .item-page a[href*="x.com"] {
  display: none !important;
}

/* Moderne Browser: ganzen Share-Container ausblenden, sobald LinkedIn/X darin vorkommt */
@supports selector(:has(*)) {
  .view-article .article-details div:has(> a[href*="linkedin.com"]),
  .view-article .article-details div:has(> a[href*="twitter.com"]),
  .view-article .article-details div:has(> a[href*="x.com"]),
  .view-article .item-page div:has(> a[href*="linkedin.com"]),
  .view-article .item-page div:has(> a[href*="twitter.com"]),
  .view-article .item-page div:has(> a[href*="x.com"]) {
    display: none !important;
  }
}

/* 2) Related Articles / Ähnliche Beiträge im Beitragsfuß entfernen */
.view-article .article-details .relateditems,
.view-article .article-details .related-items,
.view-article .article-details .related-articles,
.view-article .article-details .mod-relateditems,
.view-article .article-details .content-related,
.view-article .article-details .article-related,
.view-article .article-details .article__links,
.view-article .article-details .com-content-article__links,
.view-article .item-page .relateditems,
.view-article .item-page .related-items,
.view-article .item-page .related-articles,
.view-article .item-page .mod-relateditems,
.view-article .item-page .content-related,
.view-article .item-page .article-related,
.view-article .item-page .article__links,
.view-article .item-page .com-content-article__links {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   V24 – Related Articles noch gezielter entfernen
   - baut auf V23 auf
   - Social-Icons bleiben entfernt
   - zusätzliche Fälle: Related Articles als separates Modul/Block
     unterhalb des eigentlichen Artikels im #sp-component
   ========================================================= */

/* Klassische Joomla-/Helix-/Plugin-Klassen für verwandte Beiträge */
.view-article #sp-component .relateditems,
.view-article #sp-component .related-items,
.view-article #sp-component .related-articles,
.view-article #sp-component .article-related,
.view-article #sp-component .content-related,
.view-article #sp-component .mod-relateditems,
.view-article #sp-component .mod-articles-related,
.view-article #sp-component .moduletable_related,
.view-article #sp-component .moduletable-related,
.view-article #sp-component .article-footer .relateditems,
.view-article #sp-component .article-footer .related-articles,
.view-article #sp-component .article-footer .content-related,
.view-article #sp-component .article-info + .relateditems,
.view-article #sp-component ul.relateditems,
.view-article #sp-component ol.relateditems,
.view-article #sp-component div.relateditems {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Wenn Related Articles als eigener Modulblock direkt NACH dem Artikel ausgegeben wird */
.view-article #sp-component .item-page ~ .sp-module,
.view-article #sp-component .article-details ~ .sp-module,
.view-article #sp-component .com-content-article ~ .sp-module,
.view-article #sp-component .item-page ~ .moduletable,
.view-article #sp-component .article-details ~ .moduletable,
.view-article #sp-component .com-content-article ~ .moduletable {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Moderne Browser: Block ausblenden, wenn darin typische Related-Article-Links/Listen stecken */
@supports selector(:has(*)) {
  .view-article #sp-component .sp-module:has(.relateditems),
  .view-article #sp-component .sp-module:has(.related-items),
  .view-article #sp-component .sp-module:has(.related-articles),
  .view-article #sp-component .moduletable:has(.relateditems),
  .view-article #sp-component .moduletable:has(.related-items),
  .view-article #sp-component .moduletable:has(.related-articles),
  .view-article #sp-component .article-details:has(.relateditems),
  .view-article #sp-component .item-page:has(.relateditems) .relateditems {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   V25 – Related Articles exakt entfernen
   - greift auf den tatsächlichen HTML-Block:
     .related-article-list-container
   - Social-Icons bleiben über V23/V24 entfernt
   - keine Änderungen an Header, Logo, Suche, Mobilversion oder JEvents
   ========================================================= */

.view-article #sp-component .related-article-list-container,
.view-article #sp-component .related-article-list,
.view-article #sp-component .related-article-title,
#sp-component .related-article-list-container,
#sp-component .related-article-list,
#sp-component .related-article-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   V26 – Kontakt-Kategorien: leere Beschreibungskarte entfernen
   Ziel: großes weißes Leerfeld oberhalb der Kontaktliste ausblenden.
   Greift nur im Joomla-Kontakt-Kategorie-Kontext.
   ========================================================= */

/* Leere/unnötige Kategoriebeschreibung in Kontaktlisten ausblenden */
body.com-contact.view-category #sp-component .category-desc,
body.com-contact.view-category #sp-component .contact-category > .category-desc,
body.com-contact.view-category #sp-component .com-contact-category__description,
body.com-contact.view-category #sp-component .category-description,
body.com-contact.view-category #sp-component .contact-category .category-desc,
#sp-component .contact-category > .category-desc,
#sp-component .contact-category .category-desc {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Falls Helix/Joomla die Kontaktliste nach der entfernten Beschreibung mit Abstand versieht */
body.com-contact.view-category #sp-component .contact-category,
#sp-component .contact-category {
  margin-top: 0 !important;
}

body.com-contact.view-category #sp-component .contact-category table,
#sp-component .contact-category table.category {
  margin-top: 0 !important;
}

/* =========================================================
   V27 – Kontaktseiten modernisieren
   Ziel: Kontakt-Kategorie und Kontaktlisten optisch an aktuelles
   TuS-Design anpassen, ohne Header/Navigation/JEvents zu ändern.
   ========================================================= */

/* Kontaktseiten: Hauptkarte ruhiger und ohne leere Beschreibungslücke */
body.com-contact #sp-component .contact-category,
body.view-category #sp-component .contact-category,
#sp-component .contact-category {
  background: #ffffff !important;
  border: 1px solid rgba(0,207,232,.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgba(5,7,10,.08) !important;
  padding: clamp(18px, 3vw, 28px) !important;
  overflow: hidden !important;
}

/* Falls durch die vorher entfernte Beschreibung oben noch Abstand bleibt */
body.com-contact #sp-component .contact-category > :first-child,
#sp-component .contact-category > :first-child {
  margin-top: 0 !important;
}

/* Kontaktliste: alte Tabellenoptik entschärfen */
body.com-contact #sp-component .contact-category table,
body.com-contact #sp-component .contact-category table.category,
#sp-component .contact-category table,
#sp-component .contact-category table.category {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.com-contact #sp-component .contact-category table thead,
#sp-component .contact-category table thead {
  display: none !important;
}

body.com-contact #sp-component .contact-category table tr,
#sp-component .contact-category table tr {
  background: linear-gradient(135deg, rgba(0,207,232,.055), rgba(255,255,255,.98)) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(5,7,10,.055) !important;
  overflow: hidden !important;
}

body.com-contact #sp-component .contact-category table td,
#sp-component .contact-category table td {
  background: transparent !important;
  border-top: 1px solid rgba(0,207,232,.16) !important;
  border-bottom: 1px solid rgba(0,207,232,.16) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 18px 16px !important;
  vertical-align: top !important;
  color: var(--tus-text) !important;
}

body.com-contact #sp-component .contact-category table td:first-child,
#sp-component .contact-category table td:first-child {
  border-left: 1px solid rgba(0,207,232,.16) !important;
  border-radius: 18px 0 0 18px !important;
  width: 145px !important;
}

body.com-contact #sp-component .contact-category table td:last-child,
#sp-component .contact-category table td:last-child {
  border-right: 1px solid rgba(0,207,232,.16) !important;
  border-radius: 0 18px 18px 0 !important;
}

/* Kontaktbilder hochwertiger */
body.com-contact #sp-component .contact-category img,
#sp-component .contact-category img {
  border-radius: 16px !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  box-shadow: 0 12px 26px rgba(5,7,10,.12) !important;
  max-width: 118px !important;
  height: auto !important;
  background: #fff !important;
}

/* Namen als cyanfarbene Akzentlinks */
body.com-contact #sp-component .contact-category a,
#sp-component .contact-category a {
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

body.com-contact #sp-component .contact-category a:hover,
#sp-component .contact-category a:hover {
  color: var(--tus-black) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tus-cyan) !important;
  text-underline-offset: 3px !important;
}

/* Detailtext lesbarer */
body.com-contact #sp-component .contact-category td,
#sp-component .contact-category td {
  font-size: .98rem !important;
  line-height: 1.52 !important;
}

body.com-contact #sp-component .contact-category ul,
#sp-component .contact-category ul {
  margin: 8px 0 0 !important;
  padding-left: 1.15rem !important;
}

body.com-contact #sp-component .contact-category li,
#sp-component .contact-category li {
  margin: 3px 0 !important;
}

/* Kontakt-Einzelseiten ebenfalls passend gestalten */
body.com-contact.view-contact #sp-component .contact,
body.com-contact #sp-component .com-contact,
#sp-component .com-contact {
  background: #ffffff !important;
  border: 1px solid rgba(0,207,232,.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgba(5,7,10,.08) !important;
  padding: clamp(20px, 3vw, 32px) !important;
}

body.com-contact.view-contact #sp-component .contact h1,
body.com-contact.view-contact #sp-component .contact h2,
body.com-contact #sp-component .com-contact h1,
body.com-contact #sp-component .com-contact h2 {
  margin-bottom: 18px !important;
}

body.com-contact.view-contact #sp-component .contact img,
body.com-contact #sp-component .com-contact img {
  border-radius: 18px !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  box-shadow: 0 14px 30px rgba(5,7,10,.12) !important;
}

/* Mobile: Kontaktliste als echte Karten statt Tabelle */
@media (max-width: 767px) {
  body.com-contact #sp-component .contact-category,
  #sp-component .contact-category {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body.com-contact #sp-component .contact-category table,
  body.com-contact #sp-component .contact-category table tbody,
  body.com-contact #sp-component .contact-category table tr,
  body.com-contact #sp-component .contact-category table td,
  #sp-component .contact-category table,
  #sp-component .contact-category table tbody,
  #sp-component .contact-category table tr,
  #sp-component .contact-category table td {
    display: block !important;
    width: 100% !important;
  }

  body.com-contact #sp-component .contact-category table,
  #sp-component .contact-category table {
    border-spacing: 0 !important;
  }

  body.com-contact #sp-component .contact-category table tr,
  #sp-component .contact-category table tr {
    margin: 0 0 14px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body.com-contact #sp-component .contact-category table td,
  body.com-contact #sp-component .contact-category table td:first-child,
  body.com-contact #sp-component .contact-category table td:last-child,
  #sp-component .contact-category table td,
  #sp-component .contact-category table td:first-child,
  #sp-component .contact-category table td:last-child {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
  }

  body.com-contact #sp-component .contact-category table td:first-child,
  #sp-component .contact-category table td:first-child {
    text-align: left !important;
    margin-bottom: 8px !important;
  }

  body.com-contact #sp-component .contact-category img,
  #sp-component .contact-category img {
    max-width: 96px !important;
    margin-bottom: 4px !important;
  }
}

/* =========================================================
   V28 – Kontaktseiten stärker an TuS-Design anpassen
   Ziel: Kontaktlisten nicht mehr tabellarisch/grau, sondern
   moderne weiße Kontaktkarten mit klarer Bild-/Textzone.
   Betrifft nur Joomla-Kontaktseiten.
   ========================================================= */

/* Kontakt-Kategorie: keine graue Tabellenfläche, sondern ruhige Bühne */
body.com-contact #sp-component .contact-category,
body.view-category #sp-component .contact-category,
#sp-component .contact-category {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Tabelle komplett in eine Kartenliste verwandeln */
body.com-contact #sp-component .contact-category table,
body.com-contact #sp-component .contact-category table.category,
#sp-component .contact-category table,
#sp-component .contact-category table.category {
  display: block !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.com-contact #sp-component .contact-category table tbody,
#sp-component .contact-category table tbody {
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
}

body.com-contact #sp-component .contact-category table thead,
#sp-component .contact-category table thead {
  display: none !important;
}

/* Jede Kontaktperson als moderne Karte */
body.com-contact #sp-component .contact-category table tr,
#sp-component .contact-category table tr {
  display: grid !important;
  grid-template-columns: 154px minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  background:
    linear-gradient(90deg, rgba(0,207,232,.10) 0, rgba(255,255,255,.98) 230px),
    #ffffff !important;
  border: 1px solid rgba(0,207,232,.20) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 42px rgba(5,7,10,.075) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body.com-contact #sp-component .contact-category table tr:hover,
#sp-component .contact-category table tr:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,207,232,.36) !important;
  box-shadow: 0 22px 52px rgba(5,7,10,.11) !important;
}

/* linke Bild-/Namenszone */
body.com-contact #sp-component .contact-category table td:first-child,
#sp-component .contact-category table td:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 18px 14px !important;
  background:
    radial-gradient(circle at top, rgba(0,207,232,.18), transparent 7rem),
    rgba(234,248,252,.62) !important;
  border: 0 !important;
  border-right: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* rechte Detailzone */
body.com-contact #sp-component .contact-category table td:last-child,
#sp-component .contact-category table td:last-child {
  display: block !important;
  padding: 18px 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--tus-text) !important;
  font-size: .98rem !important;
  line-height: 1.54 !important;
}

body.com-contact #sp-component .contact-category table td,
#sp-component .contact-category table td {
  border: 0 !important;
  background: transparent !important;
}

/* Kontaktbilder als saubere Portrait-Badges */
body.com-contact #sp-component .contact-category img,
#sp-component .contact-category img {
  width: 106px !important;
  max-width: 106px !important;
  height: auto !important;
  border-radius: 18px !important;
  border: 3px solid #ffffff !important;
  outline: 1px solid rgba(0,207,232,.28) !important;
  box-shadow: 0 14px 28px rgba(5,7,10,.16) !important;
  background: #fff !important;
  margin: 0 !important;
}

/* Name deutlich, aber ruhig */
body.com-contact #sp-component .contact-category table td:first-child a,
#sp-component .contact-category table td:first-child a {
  display: inline-block !important;
  color: var(--tus-black) !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  margin-top: 2px !important;
}

body.com-contact #sp-component .contact-category table td:first-child a:hover,
#sp-component .contact-category table td:first-child a:hover {
  color: var(--tus-cyan-2) !important;
  text-decoration: none !important;
}

/* Mailadressen und Links als Cyan-Akzent */
body.com-contact #sp-component .contact-category table td:last-child a,
#sp-component .contact-category table td:last-child a {
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

body.com-contact #sp-component .contact-category table td:last-child a:hover,
#sp-component .contact-category table td:last-child a:hover {
  color: var(--tus-black) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--tus-cyan) !important;
  text-underline-offset: 3px !important;
}

/* Listen in den Details als dezente Infozeilen */
body.com-contact #sp-component .contact-category table td:last-child ul,
#sp-component .contact-category table td:last-child ul {
  margin: 10px 0 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

body.com-contact #sp-component .contact-category table td:last-child li,
#sp-component .contact-category table td:last-child li {
  position: relative !important;
  margin: 6px 0 !important;
  padding-left: 18px !important;
}

body.com-contact #sp-component .contact-category table td:last-child li::before,
#sp-component .contact-category table td:last-child li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .72em !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 99px !important;
  background: var(--tus-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,207,232,.13) !important;
}

/* harte Tabellen-/Zebra-Hintergründe sicher neutralisieren */
body.com-contact #sp-component .contact-category tr:nth-child(odd),
body.com-contact #sp-component .contact-category tr:nth-child(even),
body.com-contact #sp-component .contact-category td,
#sp-component .contact-category tr:nth-child(odd),
#sp-component .contact-category tr:nth-child(even),
#sp-component .contact-category td {
  background-color: transparent !important;
}

/* Einzelseite ebenfalls etwas hochwertiger */
body.com-contact.view-contact #sp-component .contact,
body.com-contact #sp-component .com-contact,
#sp-component .com-contact {
  background:
    radial-gradient(circle at top right, rgba(0,207,232,.10), transparent 18rem),
    #ffffff !important;
  border: 1px solid rgba(0,207,232,.20) !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 52px rgba(5,7,10,.09) !important;
}

/* Mobil: Karten untereinander, Bild links oben nicht zu groß */
@media (max-width: 767px) {
  body.com-contact #sp-component .contact-category table tbody,
  #sp-component .contact-category table tbody {
    gap: 14px !important;
  }

  body.com-contact #sp-component .contact-category table tr,
  #sp-component .contact-category table tr {
    display: block !important;
    border-radius: 22px !important;
    background: #ffffff !important;
  }

  body.com-contact #sp-component .contact-category table td:first-child,
  #sp-component .contact-category table td:first-child {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: left !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0,207,232,.18) !important;
    padding: 14px !important;
  }

  body.com-contact #sp-component .contact-category img,
  #sp-component .contact-category img {
    width: 82px !important;
    max-width: 82px !important;
  }

  body.com-contact #sp-component .contact-category table td:last-child,
  #sp-component .contact-category table td:last-child {
    padding: 14px !important;
    font-size: .95rem !important;
  }
}

/* =========================================================
   V29 – Phoca Download / Downloads modernisieren
   Ziel: Kategorien und Dateilisten an TuS-Design Schwarz/Weiß/Cyan anpassen
   ========================================================= */

/* Hauptbereich der Download-Komponente */
body.com-phocadownload #sp-component,
body.view-categories #sp-component,
body.view-category #sp-component,
#sp-component .phocadownload,
#sp-component #phocadownload,
#sp-component .pd-category,
#sp-component .pd-categories,
#sp-component .pd-file,
#sp-component .pd-subcategory {
  --pd-card-bg: #ffffff;
  --pd-soft: rgba(0,207,232,.08);
  --pd-border: rgba(0,207,232,.22);
}

/* Phoca-Container ruhig und breit */
body.com-phocadownload #sp-component .com-phocadownload,
body.com-phocadownload #sp-component .phocadownload,
body.com-phocadownload #sp-component #phocadownload,
#sp-component .phocadownload,
#sp-component #phocadownload {
  width: 100% !important;
  max-width: 100% !important;
}

/* Kategorienübersicht: alte Tabellenoptik abmildern */
body.com-phocadownload #sp-component table,
#sp-component .phocadownload table,
#sp-component #phocadownload table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
}

body.com-phocadownload #sp-component table tr,
#sp-component .phocadownload table tr,
#sp-component #phocadownload table tr {
  background: transparent !important;
}

body.com-phocadownload #sp-component table td,
#sp-component .phocadownload table td,
#sp-component #phocadownload table td {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Kategorie-Karten, wie auf Screenshot Mitgliedschaft/Volleyball/Turnen */
body.com-phocadownload #sp-component .pd-category,
body.com-phocadownload #sp-component .pd-subcategory,
body.com-phocadownload #sp-component .pd-categoriesbox,
body.com-phocadownload #sp-component .pd-categoriesboxfirst,
body.com-phocadownload #sp-component .pd-categorybox,
body.com-phocadownload #sp-component .pd-subcategorybox,
#sp-component .phocadownload .pd-category,
#sp-component .phocadownload .pd-subcategory,
#sp-component #phocadownload .pd-category,
#sp-component #phocadownload .pd-subcategory {
  display: block !important;
  background:
    radial-gradient(circle at top right, rgba(0,207,232,.10), transparent 16rem),
    #ffffff !important;
  border: 1px solid rgba(0,207,232,.22) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 38px rgba(5,7,10,.08) !important;
  padding: 20px 22px !important;
  margin: 0 0 18px !important;
  overflow: hidden !important;
}

/* Falls Phoca Kategorien als Bootstrap-Spalten ausgibt */
body.com-phocadownload #sp-component [class*="col-"] > .pd-category,
body.com-phocadownload #sp-component [class*="col-"] > .pd-subcategory,
#sp-component .phocadownload [class*="col-"] > .pd-category,
#sp-component .phocadownload [class*="col-"] > .pd-subcategory {
  height: 100% !important;
}

/* Kategorietitel */
body.com-phocadownload #sp-component h1,
body.com-phocadownload #sp-component h2,
body.com-phocadownload #sp-component h3,
body.com-phocadownload #sp-component .pd-category h3,
body.com-phocadownload #sp-component .pd-subcategory h3,
body.com-phocadownload #sp-component .pd-title,
body.com-phocadownload #sp-component .pd-ctitle,
#sp-component .phocadownload .pd-title,
#sp-component .phocadownload .pd-ctitle,
#sp-component #phocadownload .pd-title,
#sp-component #phocadownload .pd-ctitle {
  color: var(--tus-cyan-2) !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
}

body.com-phocadownload #sp-component .pd-category a,
body.com-phocadownload #sp-component .pd-subcategory a,
body.com-phocadownload #sp-component .pd-title a,
body.com-phocadownload #sp-component .pd-ctitle a,
#sp-component .phocadownload .pd-title a,
#sp-component .phocadownload .pd-ctitle a,
#sp-component #phocadownload .pd-title a,
#sp-component #phocadownload .pd-ctitle a {
  color: var(--tus-cyan-2) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
}

body.com-phocadownload #sp-component .pd-category a:hover,
body.com-phocadownload #sp-component .pd-subcategory a:hover,
#sp-component .phocadownload .pd-title a:hover,
#sp-component .phocadownload .pd-ctitle a:hover {
  color: var(--tus-black) !important;
}

/* Kategorienanzahl / Dateienanzahl als dezente Meta-Zeile */
body.com-phocadownload #sp-component .pd-subtitle,
body.com-phocadownload #sp-component .pd-count,
body.com-phocadownload #sp-component .pd-info,
body.com-phocadownload #sp-component .pd-filenamebox,
body.com-phocadownload #sp-component small,
#sp-component .phocadownload .pd-subtitle,
#sp-component .phocadownload .pd-count,
#sp-component .phocadownload .pd-info,
#sp-component #phocadownload .pd-subtitle,
#sp-component #phocadownload .pd-count,
#sp-component #phocadownload .pd-info {
  color: #657386 !important;
  font-weight: 750 !important;
}

/* Phoca-Kategorie-Kacheln, die nur aus Link + Metainfo bestehen */
body.com-phocadownload #sp-component .pd-categoriesbox a,
body.com-phocadownload #sp-component .pd-categorybox a,
body.com-phocadownload #sp-component .pd-subcategorybox a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  color: var(--tus-cyan-2) !important;
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* Moderne Kachel-Optik für Kategorien, falls Phoca keine Klassen auf den Boxen setzt */
body.com-phocadownload #sp-component .blog-featured .item,
body.com-phocadownload #sp-component .category,
body.com-phocadownload #sp-component .categories-list > div,
body.com-phocadownload #sp-component .cat-list-row,
#sp-component .com-phocadownload .category,
#sp-component .com-phocadownload .cat-list-row {
  background:
    radial-gradient(circle at top right, rgba(0,207,232,.10), transparent 14rem),
    #ffffff !important;
  border: 1px solid rgba(0,207,232,.20) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(5,7,10,.075) !important;
  padding: 18px 20px !important;
}

/* Dateienliste: Überschrift */
body.com-phocadownload #sp-component h3,
body.com-phocadownload #sp-component .pdtop h3,
body.com-phocadownload #sp-component .pdfile h3 {
  color: var(--tus-black) !important;
}

/* Liste „Meist geladene Dateien“ / Dateien */
body.com-phocadownload #sp-component ul,
#sp-component .phocadownload ul,
#sp-component #phocadownload ul {
  list-style: none !important;
  padding-left: 0 !important;
}

body.com-phocadownload #sp-component li,
#sp-component .phocadownload li,
#sp-component #phocadownload li {
  position: relative !important;
  margin: 8px 0 !important;
  padding: 10px 12px 10px 42px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(0,207,232,.14) !important;
  box-shadow: 0 8px 20px rgba(5,7,10,.035) !important;
}

body.com-phocadownload #sp-component li::before,
#sp-component .phocadownload li::before,
#sp-component #phocadownload li::before {
  content: "↓" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-weight: 950 !important;
  font-size: .86rem !important;
}

body.com-phocadownload #sp-component li a,
#sp-component .phocadownload li a,
#sp-component #phocadownload li a {
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

body.com-phocadownload #sp-component li:hover,
#sp-component .phocadownload li:hover,
#sp-component #phocadownload li:hover {
  background: rgba(0,207,232,.08) !important;
  border-color: rgba(0,207,232,.28) !important;
}

/* Dateisymbole nicht doppelt dominant wirken lassen */
body.com-phocadownload #sp-component li img,
body.com-phocadownload #sp-component img[src*="pdf"],
body.com-phocadownload #sp-component img[src*="icon"],
#sp-component .phocadownload li img,
#sp-component #phocadownload li img {
  margin-right: 6px !important;
  max-width: 18px !important;
  height: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Powered by Phoca Download ausblenden */
body.com-phocadownload #sp-component .pd-poweredby,
body.com-phocadownload #sp-component .phocadownloadpoweredby,
body.com-phocadownload #sp-component [class*="powered"],
#sp-component .phocadownload .pd-poweredby,
#sp-component #phocadownload .pd-poweredby {
  display: none !important;
}

/* Button/Download-Aktionen */
body.com-phocadownload #sp-component .btn,
body.com-phocadownload #sp-component .button,
body.com-phocadownload #sp-component a.btn,
body.com-phocadownload #sp-component .pd-button-download {
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-weight: 900 !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(0,207,232,.22) !important;
}

body.com-phocadownload #sp-component .btn:hover,
body.com-phocadownload #sp-component .button:hover,
body.com-phocadownload #sp-component a.btn:hover,
body.com-phocadownload #sp-component .pd-button-download:hover {
  background: var(--tus-black) !important;
  color: #ffffff !important;
}

/* Raster für Kategorien, wenn Phoca die Kategorien als direkte Boxen ausgibt */
@media (min-width: 768px) {
  body.com-phocadownload #sp-component .pd-categories,
  body.com-phocadownload #sp-component .pdsubcategories,
  body.com-phocadownload #sp-component .pd-subcategories,
  #sp-component .phocadownload .pd-categories,
  #sp-component #phocadownload .pd-categories {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (min-width: 1180px) {
  body.com-phocadownload #sp-component .pd-categories,
  body.com-phocadownload #sp-component .pdsubcategories,
  body.com-phocadownload #sp-component .pd-subcategories,
  #sp-component .phocadownload .pd-categories,
  #sp-component #phocadownload .pd-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.com-phocadownload #sp-component .pd-category,
  body.com-phocadownload #sp-component .pd-subcategory,
  body.com-phocadownload #sp-component .pd-categoriesbox,
  body.com-phocadownload #sp-component .pd-categoriesboxfirst,
  body.com-phocadownload #sp-component .pd-categorybox,
  body.com-phocadownload #sp-component .pd-subcategorybox,
  #sp-component .phocadownload .pd-category,
  #sp-component .phocadownload .pd-subcategory,
  #sp-component #phocadownload .pd-category,
  #sp-component #phocadownload .pd-subcategory {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body.com-phocadownload #sp-component li,
  #sp-component .phocadownload li,
  #sp-component #phocadownload li {
    padding: 9px 10px 9px 38px !important;
    font-size: .95rem !important;
  }
}

/* =========================================================
   V30 – Phoca Download / Downloads stärker modernisieren
   Ziel: tatsächliche Phoca-Ausgabe über URL-/Link-Struktur treffen
   ========================================================= */

/* Download-Seiten auch dann erkennen, wenn Joomla keine body-Klasse setzt */
#sp-component:has(a[href*="com_phocadownload"]),
#sp-component:has(a[href*="phocadownload"]),
#sp-component:has(a[href*="download="]) {
  --pd-card-bg: #ffffff;
  --pd-soft: rgba(0,207,232,.08);
  --pd-soft-2: rgba(0,207,232,.14);
  --pd-border: rgba(0,207,232,.24);
  --pd-text: #1d2430;
  --pd-muted: #657386;
}

/* Die alte, eher graue Phoca-Fläche transparenter und ruhiger machen */
#sp-component:has(a[href*="com_phocadownload"]) .item-page,
#sp-component:has(a[href*="phocadownload"]) .item-page,
#sp-component:has(a[href*="download="]) .item-page,
#sp-component:has(a[href*="com_phocadownload"]) .com-content-article,
#sp-component:has(a[href*="phocadownload"]) .com-content-article,
#sp-component:has(a[href*="download="]) .com-content-article,
#sp-component:has(a[href*="com_phocadownload"]) .category-list,
#sp-component:has(a[href*="phocadownload"]) .category-list,
#sp-component:has(a[href*="download="]) .category-list {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Kategorie-Kacheln: Phoca gibt sie häufig als Bootstrap-Spalten / Tabellenblöcke aus */
#sp-component:has(a[href*="com_phocadownload"]) .row > [class*="col-"],
#sp-component:has(a[href*="phocadownload"]) .row > [class*="col-"],
#sp-component:has(a[href*="download="]) .row > [class*="col-"] {
  margin-bottom: 18px !important;
}

#sp-component:has(a[href*="com_phocadownload"]) .row > [class*="col-"] > div,
#sp-component:has(a[href*="phocadownload"]) .row > [class*="col-"] > div,
#sp-component:has(a[href*="download="]) .row > [class*="col-"] > div,
#sp-component:has(a[href*="com_phocadownload"]) .pdcategory,
#sp-component:has(a[href*="com_phocadownload"]) .pd-category,
#sp-component:has(a[href*="com_phocadownload"]) .pd-categoriesbox,
#sp-component:has(a[href*="com_phocadownload"]) .pd-categoriesboxfirst,
#sp-component:has(a[href*="phocadownload"]) .pdcategory,
#sp-component:has(a[href*="phocadownload"]) .pd-category,
#sp-component:has(a[href*="phocadownload"]) .pd-categoriesbox,
#sp-component:has(a[href*="phocadownload"]) .pd-categoriesboxfirst {
  min-height: 116px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.12), transparent 12rem),
    #ffffff !important;
  border: 1px solid var(--pd-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(5,7,10,.075) !important;
  overflow: hidden !important;
}

/* Kategorie-Links als moderne Titel */
#sp-component:has(a[href*="com_phocadownload"]) a[href*="com_phocadownload"],
#sp-component:has(a[href*="phocadownload"]) a[href*="phocadownload"] {
  color: var(--tus-cyan-2) !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

#sp-component:has(a[href*="com_phocadownload"]) h1,
#sp-component:has(a[href*="com_phocadownload"]) h2,
#sp-component:has(a[href*="com_phocadownload"]) h3,
#sp-component:has(a[href*="phocadownload"]) h1,
#sp-component:has(a[href*="phocadownload"]) h2,
#sp-component:has(a[href*="phocadownload"]) h3,
#sp-component:has(a[href*="download="]) h1,
#sp-component:has(a[href*="download="]) h2,
#sp-component:has(a[href*="download="]) h3 {
  color: var(--tus-black) !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

#sp-component:has(a[href*="com_phocadownload"]) h3 a,
#sp-component:has(a[href*="phocadownload"]) h3 a {
  color: var(--tus-cyan-2) !important;
}

/* Kategorie-Meta-Zeilen wie „Kategorien: 0 / Dateien: 1“ optisch als Footer der Karte */
#sp-component:has(a[href*="com_phocadownload"]) small,
#sp-component:has(a[href*="phocadownload"]) small,
#sp-component:has(a[href*="download="]) small,
#sp-component:has(a[href*="com_phocadownload"]) .small,
#sp-component:has(a[href*="phocadownload"]) .small,
#sp-component:has(a[href*="download="]) .small,
#sp-component:has(a[href*="com_phocadownload"]) .text-muted,
#sp-component:has(a[href*="phocadownload"]) .text-muted,
#sp-component:has(a[href*="download="]) .text-muted {
  color: var(--pd-muted) !important;
  font-weight: 800 !important;
}

/* Dateienliste: weg von der nackten Linkliste, hin zu kompakten Download-Zeilen */
#sp-component:has(a[href*="download="]) ul,
#sp-component:has(a[href*="download="]) ol,
#sp-component:has(a[href*="phocadownload"]) ul,
#sp-component:has(a[href*="phocadownload"]) ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#sp-component:has(a[href*="download="]) li,
#sp-component:has(a[href*="phocadownload"]) li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  margin: 8px 0 !important;
  padding: 9px 12px 9px 42px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 20px rgba(5,7,10,.035) !important;
}

#sp-component:has(a[href*="download="]) li::before,
#sp-component:has(a[href*="phocadownload"]) li::before {
  content: "↓" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
}

#sp-component:has(a[href*="download="]) li a,
#sp-component:has(a[href*="phocadownload"]) li a {
  color: var(--tus-cyan-2) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

#sp-component:has(a[href*="download="]) li:hover,
#sp-component:has(a[href*="phocadownload"]) li:hover {
  background: rgba(0,207,232,.075) !important;
  border-color: rgba(0,207,232,.32) !important;
}

/* Alte PDF-/Datei-Icons kleiner halten */
#sp-component:has(a[href*="download="]) img,
#sp-component:has(a[href*="phocadownload"]) img {
  max-width: 20px !important;
  height: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Phoca-Footer/Branding aggressiver ausblenden */
#sp-component:has(a[href*="download="]) [class*="powered"],
#sp-component:has(a[href*="phocadownload"]) [class*="powered"],
#sp-component:has(a[href*="download="]) [id*="powered"],
#sp-component:has(a[href*="phocadownload"]) [id*="powered"],
#sp-component:has(a[href*="download="]) a[href*="phoca.cz"],
#sp-component:has(a[href*="phocadownload"]) a[href*="phoca.cz"] {
  display: none !important;
}

/* Falls „Powered by Phoca Download“ als unklassifizierter Textblock ausgegeben wird */
#sp-component:has(a[href*="download="]) p:has(a[href*="phoca"]),
#sp-component:has(a[href*="phocadownload"]) p:has(a[href*="phoca"]),
#sp-component:has(a[href*="download="]) div:has(> a[href*="phoca.cz"]),
#sp-component:has(a[href*="phocadownload"]) div:has(> a[href*="phoca.cz"]) {
  display: none !important;
}

@media (max-width: 767px) {
  #sp-component:has(a[href*="com_phocadownload"]) .row > [class*="col-"] > div,
  #sp-component:has(a[href*="phocadownload"]) .row > [class*="col-"] > div,
  #sp-component:has(a[href*="download="]) .row > [class*="col-"] > div {
    min-height: 0 !important;
    border-radius: 18px !important;
  }

  #sp-component:has(a[href*="download="]) li,
  #sp-component:has(a[href*="phocadownload"]) li {
    padding: 8px 10px 8px 38px !important;
    min-height: 38px !important;
  }
}

/* =========================================================
   V31 – Phoca Download exakt getroffen
   Basis: echte HTML-Struktur aus #phoca-dl-categories-box und #phoca-dl-most-viewed-box
   ========================================================= */

body.com-phocadownload.view-categories #sp-component .sp-column {
  background: transparent !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box.pd-categories-view {
  margin-top: 0 !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box.pd-categories-view .row {
  --bs-gutter-x: 1.6rem !important;
  --bs-gutter-y: 1.6rem !important;
  align-items: stretch !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box.pd-categories-view .col {
  display: flex !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card.h-100,
body.com-phocadownload.view-categories #phoca-dl-categories-box .card {
  position: relative !important;
  width: 100% !important;
  min-height: 138px !important;
  border: 1px solid rgba(0,207,232,.22) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.18), transparent 12rem),
    linear-gradient(180deg, #ffffff 0%, #f6fdff 100%) !important;
  box-shadow: 0 18px 42px rgba(5,7,10,.08) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card::before {
  content: "↓" !important;
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.13) !important;
  border: 1px solid rgba(0,207,232,.28) !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 950 !important;
  font-size: 1.05rem !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,207,232,.45) !important;
  box-shadow: 0 24px 55px rgba(5,7,10,.12) !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card-body {
  padding: 24px 70px 22px 24px !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card-title {
  margin: 0 !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.7rem, 2vw, 2.35rem) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card-title a {
  color: var(--tus-cyan-2) !important;
  text-decoration: none !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card-title a::after {
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 4px !important;
  margin-top: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--tus-cyan), transparent) !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card-footer.pd-categories-card,
body.com-phocadownload.view-categories #phoca-dl-categories-box .card-footer {
  min-height: 48px !important;
  padding: 10px 18px !important;
  border-top: 1px solid rgba(0,207,232,.16) !important;
  background: rgba(0,207,232,.055) !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .card-footer small,
body.com-phocadownload.view-categories #phoca-dl-categories-box .card-footer .text-muted {
  float: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 4px !important;
  color: #657386 !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
}

body.com-phocadownload.view-categories #phoca-dl-categories-box .pd-categories-number,
body.com-phocadownload.view-categories #phoca-dl-categories-box .pd-files-number {
  color: #334155 !important;
}

body.com-phocadownload.view-categories .pd-hr.ph-cb,
body.com-phocadownload.view-categories .pd-cb {
  display: none !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box {
  margin-top: 28px !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-documents {
  padding: 28px !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.12), transparent 16rem),
    #ffffff !important;
  box-shadow: 0 18px 42px rgba(5,7,10,.08) !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box h3 {
  margin: 0 0 18px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(5,7,10,.08) !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.8rem, 2.2vw, 2.55rem) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  color: var(--tus-black) !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box h3::after {
  content: "" !important;
  display: block !important;
  width: 74px !important;
  height: 4px !important;
  margin-top: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--tus-cyan), transparent) !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-filename {
  margin: 10px 0 !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-document16 {
  position: relative !important;
  min-height: 48px !important;
  padding: 12px 14px 12px 50px !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 16px !important;
  background: rgba(246,253,255,.86) !important;
  box-shadow: 0 8px 18px rgba(5,7,10,.035) !important;
  color: #1d2430 !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-document16::before {
  content: "↓" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-size: .85rem !important;
  font-weight: 950 !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-document16 a {
  color: var(--tus-cyan-2) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-document16 small {
  color: #64748b !important;
  font-weight: 800 !important;
}

body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-document16:hover {
  background: rgba(0,207,232,.08) !important;
  border-color: rgba(0,207,232,.36) !important;
}

body.com-phocadownload.view-categories #sp-component div:has(> a[href*="phoca.cz"]),
body.com-phocadownload.view-categories #sp-component a[href*="phoca.cz"] {
  display: none !important;
}

@media (max-width: 767px) {
  body.com-phocadownload.view-categories #phoca-dl-categories-box.pd-categories-view .row {
    --bs-gutter-y: 1rem !important;
  }

  body.com-phocadownload.view-categories #phoca-dl-categories-box .card.h-100,
  body.com-phocadownload.view-categories #phoca-dl-categories-box .card {
    min-height: 0 !important;
    border-radius: 20px !important;
  }

  body.com-phocadownload.view-categories #phoca-dl-categories-box .card-body {
    padding: 20px 62px 18px 20px !important;
  }

  body.com-phocadownload.view-categories #phoca-dl-categories-box .card-title {
    font-size: 1.55rem !important;
  }

  body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-documents {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  body.com-phocadownload.view-categories #phoca-dl-most-viewed-box .pd-document16 {
    padding: 10px 12px 10px 46px !important;
  }
}
/* =========================================================
   V32 – Phoca Download Kategorie-/Dateiliste reparieren
   Problem: V29/V30 hatten auf view-category zu breit gegriffen und
   erzeugten leere große Cyan-Karten um Download-/Details-Buttons.
   Ziel: Kategorieübersicht V31 bleibt erhalten; einzelne Download-
   Kategorien werden als saubere Dateiliste dargestellt.
   ========================================================= */

/* Kategorie-Seiten von den zu breiten alten Phoca-Regeln befreien */
body.com-phocadownload.view-category #sp-component,
body.com-phocadownload.view-category #sp-component .sp-column {
  --pd-card-bg: #ffffff;
  --pd-soft: rgba(0,207,232,.075);
  --pd-border: rgba(0,207,232,.22);
}

body.com-phocadownload.view-category #sp-component .row > [class*="col-"] {
  margin-bottom: 0 !important;
}

body.com-phocadownload.view-category #sp-component .row > [class*="col-"] > div,
body.com-phocadownload.view-category #sp-component .pdfile,
body.com-phocadownload.view-category #sp-component .pd-file,
body.com-phocadownload.view-category #sp-component .pd-filename,
body.com-phocadownload.view-category #sp-component .pdfilebox,
body.com-phocadownload.view-category #sp-component .pd-filebox,
body.com-phocadownload.view-category #sp-component .pd-buttons,
body.com-phocadownload.view-category #sp-component .pd-buttonbox,
body.com-phocadownload.view-category #sp-component .pdfiledesc,
body.com-phocadownload.view-category #sp-component .pd-file-desc {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Hauptcontainer der Dateiliste */
body.com-phocadownload.view-category #sp-component .pd-category-view,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
body.com-phocadownload.view-category #sp-component .phocadownload,
body.com-phocadownload.view-category #sp-component #phocadownload {
  width: 100% !important;
  max-width: 100% !important;
}

/* Seitenkarte für die gewählte Download-Kategorie */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
body.com-phocadownload.view-category #sp-component .pd-category-view {
  padding: clamp(20px, 3vw, 32px) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.13), transparent 18rem),
    linear-gradient(180deg, #ffffff 0%, #f7fdff 100%) !important;
  box-shadow: 0 22px 55px rgba(5,7,10,.08) !important;
}

/* Zurücklink / Kategoriepfad als kompakte Pill */
body.com-phocadownload.view-category #sp-component .pdtop a,
body.com-phocadownload.view-category #sp-component .pdtop .btn,
body.com-phocadownload.view-category #sp-component a[href*="/downloads.html"],
body.com-phocadownload.view-category #sp-component a[href*="view=categories"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,207,232,.28) !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  box-shadow: 0 10px 24px rgba(0,207,232,.20) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

/* Überschrift der Kategorie */
body.com-phocadownload.view-category #sp-component h1,
body.com-phocadownload.view-category #sp-component h2,
body.com-phocadownload.view-category #sp-component h3,
body.com-phocadownload.view-category #phoca-dl-category-box h3,
body.com-phocadownload.view-category #phoca-dl-category-box .pd-category-title {
  margin: 16px 0 20px !important;
  color: var(--tus-cyan-2) !important;
  font-family: Barlow, Oswald, Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.9rem, 2.6vw, 3rem) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

body.com-phocadownload.view-category #sp-component h1::after,
body.com-phocadownload.view-category #sp-component h2::after,
body.com-phocadownload.view-category #sp-component h3::after {
  content: "" !important;
  display: block !important;
  width: 76px !important;
  height: 4px !important;
  margin-top: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--tus-cyan), transparent) !important;
}

/* Einzelne Datei als echte Download-Zeile statt zerrissener Spalten */
body.com-phocadownload.view-category #sp-component .pdfile,
body.com-phocadownload.view-category #sp-component .pd-file,
body.com-phocadownload.view-category #sp-component .pd-filebox,
body.com-phocadownload.view-category #sp-component .pdfilebox,
body.com-phocadownload.view-category #sp-component .pd-document,
body.com-phocadownload.view-category #sp-component .pd-document16,
body.com-phocadownload.view-category #sp-component tr:has(a[href*="download"]),
body.com-phocadownload.view-category #sp-component tr:has(a[href*="task=download"]) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px 22px !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 18px 20px 18px 56px !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.08), transparent 12rem),
    #ffffff !important;
  box-shadow: 0 12px 30px rgba(5,7,10,.06) !important;
}

body.com-phocadownload.view-category #sp-component .pdfile::before,
body.com-phocadownload.view-category #sp-component .pd-file::before,
body.com-phocadownload.view-category #sp-component .pd-filebox::before,
body.com-phocadownload.view-category #sp-component .pdfilebox::before,
body.com-phocadownload.view-category #sp-component .pd-document::before,
body.com-phocadownload.view-category #sp-component .pd-document16::before,
body.com-phocadownload.view-category #sp-component tr:has(a[href*="download"])::before,
body.com-phocadownload.view-category #sp-component tr:has(a[href*="task=download"])::before {
  content: "↓" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* Dateititel */
body.com-phocadownload.view-category #sp-component .pdfile a,
body.com-phocadownload.view-category #sp-component .pd-file a,
body.com-phocadownload.view-category #sp-component .pd-filename a,
body.com-phocadownload.view-category #sp-component .pd-title a,
body.com-phocadownload.view-category #sp-component a[href*="download"] {
  color: var(--tus-cyan-2) !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

/* Icons nicht doppelt groß darstellen */
body.com-phocadownload.view-category #sp-component img,
body.com-phocadownload.view-category #sp-component img[src*="icon"],
body.com-phocadownload.view-category #sp-component img[src*="pdf"] {
  width: auto !important;
  max-width: 18px !important;
  height: auto !important;
  margin: 0 6px 0 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Download-/Details-Buttons kompakt und rechtsbündig */
body.com-phocadownload.view-category #sp-component .btn,
body.com-phocadownload.view-category #sp-component .button,
body.com-phocadownload.view-category #sp-component a.btn,
body.com-phocadownload.view-category #sp-component .pd-button-download,
body.com-phocadownload.view-category #sp-component .pd-button-details,
body.com-phocadownload.view-category #sp-component a[href*="download"]:not(.pd-title a),
body.com-phocadownload.view-category #sp-component a[href*="details"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 4px 0 4px 8px !important;
  padding: 10px 17px !important;
  border: 1px solid rgba(0,207,232,.28) !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  box-shadow: 0 10px 24px rgba(0,207,232,.20) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-decoration: none !important;
}

body.com-phocadownload.view-category #sp-component .btn:hover,
body.com-phocadownload.view-category #sp-component .button:hover,
body.com-phocadownload.view-category #sp-component a.btn:hover,
body.com-phocadownload.view-category #sp-component .pd-button-download:hover,
body.com-phocadownload.view-category #sp-component .pd-button-details:hover {
  background: var(--tus-black) !important;
  border-color: var(--tus-black) !important;
  color: #ffffff !important;
}

/* Tabellen innerhalb der Kategorieansicht dürfen keine Riesen-Abstände erzeugen */
body.com-phocadownload.view-category #sp-component table,
body.com-phocadownload.view-category #sp-component tbody,
body.com-phocadownload.view-category #sp-component tr,
body.com-phocadownload.view-category #sp-component td {
  border: 0 !important;
  background: transparent !important;
}

body.com-phocadownload.view-category #sp-component table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

body.com-phocadownload.view-category #sp-component td {
  padding: 0 !important;
  vertical-align: middle !important;
}

/* Phoca-Branding auch hier ausblenden */
body.com-phocadownload.view-category #sp-component div:has(> a[href*="phoca.cz"]),
body.com-phocadownload.view-category #sp-component a[href*="phoca.cz"],
body.com-phocadownload.view-category #sp-component [class*="powered"] {
  display: none !important;
}

@media (max-width: 767px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
  body.com-phocadownload.view-category #sp-component .pd-category-view {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.com-phocadownload.view-category #sp-component .pdfile,
  body.com-phocadownload.view-category #sp-component .pd-file,
  body.com-phocadownload.view-category #sp-component .pd-filebox,
  body.com-phocadownload.view-category #sp-component .pdfilebox,
  body.com-phocadownload.view-category #sp-component .pd-document,
  body.com-phocadownload.view-category #sp-component .pd-document16,
  body.com-phocadownload.view-category #sp-component tr:has(a[href*="download"]),
  body.com-phocadownload.view-category #sp-component tr:has(a[href*="task=download"]) {
    display: block !important;
    padding: 16px 16px 16px 52px !important;
  }

  body.com-phocadownload.view-category #sp-component .btn,
  body.com-phocadownload.view-category #sp-component .button,
  body.com-phocadownload.view-category #sp-component a.btn,
  body.com-phocadownload.view-category #sp-component .pd-button-download,
  body.com-phocadownload.view-category #sp-component .pd-button-details {
    margin: 10px 8px 0 0 !important;
  }
}
/* =========================================================
   V33 – Phoca Download Kategorie-Unterseiten hart reparieren
   Problem: frühere breite :has-Regeln erzeugten auf view=category
   riesige leere Karten um Download-/Details-Spalten.
   Ziel: Nur #phoca-dl-category-box zurück auf kompakte Dateiliste.
   ========================================================= */

/* Grundcontainer: moderne, aber ruhige Seitenkarte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(20px, 3vw, 32px) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.12), transparent 18rem),
    linear-gradient(180deg, #ffffff 0%, #f7fdff 100%) !important;
  box-shadow: 0 22px 55px rgba(5,7,10,.08) !important;
  overflow: hidden !important;
}

/* Wichtig: Bootstrap-Spalten innerhalb einer Kategorie dürfen KEINE Karten sein. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .row,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .row {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .row > [class*="col"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .row > [class*="col"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Alles, was frühere Regeln in große Karten verwandelt haben könnten, neutralisieren. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .row > [class*="col"] > div,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .card,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .well,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdfile,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-file,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdfilebox,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filebox,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box [class*="pd-button"],
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box [class*="button"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .row > [class*="col"] > div,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .card,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .well,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdfile,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-file,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdfilebox,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filebox,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box [class*="pd-button"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box [class*="button"] {
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Echte Dateizeilen: nur Dateiblock bekommt Kartenoptik, nicht die Buttonspalten. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
  position: relative !important;
  display: block !important;
  margin: 12px 0 14px !important;
  padding: 16px 18px 16px 52px !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 10px 22px rgba(5,7,10,.045) !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename::before,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document::before,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16::before {
  content: "↓" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* Alte Hintergrund-Mime-Icons von Phoca ausschalten, damit nichts doppelt erscheint. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
  background-image: none !important;
}

/* Buttons immer kompakt halten. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="download"],
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="details"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="download"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="details"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 9px 16px !important;
  margin: 6px 8px 6px 0 !important;
  border: 1px solid rgba(0,207,232,.28) !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: var(--tus-black) !important;
  box-shadow: 0 8px 18px rgba(0,207,232,.18) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

/* Der eigentliche Dateititel darf wie ein Link wirken, aber nicht als Button. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename a,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document a,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 a {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

/* Tabellen neutral, falls Phoca diese Unterseite tabellarisch erzeugt. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box table,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tbody,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box td,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box table,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tbody,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box td {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box table,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box td,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box td {
  padding: 6px 8px 6px 0 !important;
  vertical-align: middle !important;
}

/* Mobile: Kategorieunterseite bleibt einspaltig und kompakt. */
@media (max-width: 767px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
    padding: 14px 14px 14px 48px !important;
  }
}
/* =========================================================
   V34 – Phoca Download Kategorie-Unterseiten Feinschliff
   Basis: V33. Ziel: Kategorie-Unterseiten weniger zerklüftet,
   keine Doppel-Icons, keine verschobenen Sortierfelder,
   kompaktere Datei-Zeilen mit rechts ausgerichteten Buttons.
   ========================================================= */

/* Kategoriebox etwas ruhiger und weniger „Karte in Karte“ */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 3vw, 38px) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.10), transparent 20rem),
    linear-gradient(180deg, #fff 0%, #fbfeff 100%) !important;
}

/* innere/verschachtelte Rahmen, die durch frühere Regeln entstanden sind, entfernen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box #phoca-dl-file-box,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filebox,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdfilebox,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-file,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdfile,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box #phoca-dl-file-box,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filebox,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdfilebox,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-file,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdfile {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Datei-Tabellen zu sauberen Zeilen machen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box table,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box table {
  display: block !important;
  width: 100% !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tbody,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tbody {
  display: block !important;
  width: 100% !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(5,7,10,.08) !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr:last-child,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr:last-child {
  border-bottom: 0 !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box td,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box td {
  display: block !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* Sortierung/Pagination nicht zwischen Dateiinfos kleben lassen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdtop,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-pagination,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pagination,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .limit,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .counter,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .ordering,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdtop,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .limit,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .counter,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .ordering {
  clear: both !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 20px 0 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(5,7,10,.08) !important;
}

/* Dateititel als Überschrift, nicht als Mini-Link an der falschen Stelle */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box h3,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box h4,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-title,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdfiletitle,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-file-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box h3,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box h4,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdfiletitle,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-file-title {
  margin: 16px 0 6px !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

/* Datei-Pill: nur eine Karte, breiter und ruhiger */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
  width: min(100%, 620px) !important;
  min-width: 260px !important;
  margin: 8px 0 10px !important;
  padding: 13px 18px 13px 54px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,207,232,.20) !important;
  box-shadow: 0 8px 18px rgba(5,7,10,.035) !important;
}

/* Doppel-Download-Icons beseitigen: nur das eigene ::before bleibt */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename .icon-download,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document .icon-download,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 .icon-download,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename img,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document img,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 img,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename .icon-download,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document .icon-download,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 .icon-download,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename img,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document img,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 img {
  display: none !important;
}

/* V33 hatte teilweise mehrere ::before durch verschachtelte Elemente; nur innerstes Element markiert. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename::before,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document::before {
  display: none !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16::before {
  display: inline-flex !important;
}

/* Aktionsbuttons rechts kompakt, keine leeren Karten */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="view=file"],
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="download"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="view=file"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="download"] {
  white-space: nowrap !important;
  min-width: 90px !important;
  padding: 10px 18px !important;
  margin: 0 0 0 6px !important;
  transform: none !important;
}

/* Metadaten/Detailansicht sauber untereinander statt in die Buttonzeile zu laufen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-date,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-downloads,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-description,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-date,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-downloads,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-description {
  color: var(--tus-muted) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

@media (max-width: 900px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.btn,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .btn,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.button,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .button,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.button,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .button {
    margin: 4px 8px 4px 0 !important;
  }
}
/* =========================================================
   V35 – Phoca Download Kategorie-Unterseiten Feinschliff II
   Ziel: feine Linien entfernen, Pills sauber zentrieren,
   Detaileintrag optisch an die übrigen Downloads annähern.
   ========================================================= */

/* 1) Feine horizontale Linien im Listenbereich entfernen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box table,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tbody,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box td,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box th,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box hr,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box table,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tbody,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box td,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box th,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box hr {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* 2) Dateibereich pro Eintrag kompakter und ruhiger */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(100%, 660px) !important;
  min-height: 56px !important;
  padding: 10px 18px 10px 54px !important;
}

/* Dateiname in der Pill sauber zentrieren */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 a,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename a,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  line-height: 1.25 !important;
}

/* Download-/Details-Pills sauber mittig */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="view=file"],
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="download"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="view=file"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="download"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 110px !important;
  min-height: 44px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* 3) Überschriften und Dateipill je Abschnitt dichter zusammenführen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box h3,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box h4,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-title,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdfiletitle,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-file-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box h3,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box h4,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdfiletitle,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-file-title {
  margin: 14px 0 4px !important;
}

/* 4) Detaileintrag (mit Dateigröße/Datum/Downloads) als ruhigen Metablock darstellen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-date,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-downloads,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-date,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-downloads {
  display: inline-block !important;
  margin: 0 18px 8px 0 !important;
  padding: 7px 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 207, 232, .08) !important;
  color: #475569 !important;
  font-weight: 800 !important;
}

/* Beschreibung/Untertitel beim Detaileintrag zurückhaltend */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-description,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-description {
  margin: 2px 0 12px !important;
  color: #111827 !important;
  font-weight: 700 !important;
}

/* Download-Pill des Detaileintrags etwas breiter und zentrierter */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize + .pd-date + .pd-downloads + .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize + .pd-date + .pd-downloads + .pd-document16 {
  width: min(100%, 720px) !important;
}

/* 5) Sortierbereich bewusst als Footer-Leiste ausbilden */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdtop,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-pagination,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pagination,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .limit,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .counter,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .ordering,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdtop,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .limit,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .counter,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .ordering {
  justify-content: flex-start !important;
  gap: 12px 18px !important;
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(5,7,10,.08) !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box select,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box select {
  min-height: 44px !important;
  border-radius: 14px !important;
}

@media (max-width: 900px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-date,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-downloads,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-date,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-downloads {
    display: block !important;
    margin-right: 0 !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.btn,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .btn,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.button,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .button,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.button,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .button {
    min-width: 100% !important;
  }
}


/* =========================================================
   V36 – Phoca Download Kategorie-Unterseiten: einheitliches Kartenlayout
   Ziel: Ein Download = eine zusammenhängende Karte.
   ========================================================= */

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box {
  max-width: 960px !important;
}

/* Alle alten Tabellen-/Zeilenlinien im Kategorieinhalt neutralisieren */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box table,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tbody,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box td,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box table,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tbody,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box td {
  border: 0 !important;
  box-shadow: none !important;
}

/* Hauptzeile je Download als Karte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  align-items: center !important;
  margin: 0 0 16px !important;
  padding: 18px 20px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  box-shadow: 0 14px 34px rgba(5,7,10,.055) !important;
}

/* Wenn Phoca Sortier-/Footerzeilen in derselben Tabelle ausgibt: nicht als große Karte darstellen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr:has(select),
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr:has(.pagination),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr:has(select),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr:has(.pagination) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px 18px !important;
  margin-top: 22px !important;
  padding: 16px 0 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(5,7,10,.08) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Titel und Beschreibung bleiben im linken Bereich */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box h3,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box h4,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-title,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdfiletitle,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-file-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box h3,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box h4,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdfiletitle,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-file-title {
  margin: 0 0 6px !important;
  color: var(--tus-cyan-2) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

/* Metadaten als kleine Chips, nicht als fremder Block */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-date,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-downloads,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-date,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-downloads {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: auto !important;
  margin: 6px 8px 4px 0 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.08) !important;
  color: #475569 !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  border: 1px solid rgba(0,207,232,.12) !important;
}

/* Beschreibung unaufgeregt */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-description,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-description {
  margin: 4px 0 8px !important;
  color: #1d2430 !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

/* Datei nicht mehr als Karte-in-Karte, sondern als kompakte Dateizeile */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 8px 0 0 !important;
  padding: 6px 12px 6px 42px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.055) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  box-shadow: none !important;
}

/* Nur ein Download-Icon */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename img,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document img,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 img,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename img,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document img,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 img {
  display: none !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename::before,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document::before {
  display: none !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16::before {
  left: 10px !important;
  width: 24px !important;
  height: 24px !important;
}

/* Buttons gehören visuell zur Karte, rechts kompakt */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .btn,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .button,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="download"],
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a[href*="view=file"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .button,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="download"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a[href*="view=file"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 104px !important;
  min-height: 42px !important;
  padding: 9px 16px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Sortierung als ruhiger Footer */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pdtop,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-pagination,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pagination,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .limit,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .counter,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .ordering,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pdtop,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .limit,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .counter,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .ordering {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(5,7,10,.08) !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box tr,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box tr {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.btn,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .btn,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box a.button,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .button,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box a.button,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .button {
    width: 100% !important;
    margin-top: 6px !important;
  }
}


/* =========================================================
   V37 – Phoca Download Kategorie exakt
   Basis: echte Phoca-Struktur:
   .pd-category > .row
   .pd-filenamebox-bt / .pd-button-box-bt / .pd-fdesc / .pd-row2-bp
   Ziel: Ein Download = eine echte zusammenhängende Karte.
   ========================================================= */

/* Kategorie-Hülle */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 3vw, 42px) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,207,232,.10), transparent 24rem),
    linear-gradient(180deg, #fff 0%, #fbfeff 100%) !important;
  border: 1px solid rgba(0,207,232,.16) !important;
  box-shadow: 0 20px 60px rgba(5,7,10,.055) !important;
}

/* Leere Bewertungszeilen ausblenden */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-row2-bp,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-row2-bp {
  display: none !important;
}

/* Jede echte Download-Zeile als Karte. Ausgenommen Formulare/Modals. */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px 18px !important;
  align-items: center !important;
  margin: 0 0 16px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  box-shadow: 0 14px 34px rgba(5,7,10,.055) !important;
}

/* Bootstrap-Spalten innerhalb der Karte neutralisieren */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* Detaileintrag: Beschreibung oben über beide Spalten */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) > .col-sm-12,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) > .col-sm-12 {
  grid-column: 1 / -1 !important;
}

/* Titel */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-title,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-ctitle,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-ctitle {
  color: var(--tus-cyan-2) !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

/* Seitentitel bleibt groß */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-ctitle,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-ctitle {
  font-size: clamp(1.8rem, 3vw, 2.45rem) !important;
  margin: 18px 0 24px !important;
}

/* Dateititel in Karte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filenamebox-bt > .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filenamebox-bt > .pd-title {
  font-size: 1.02rem !important;
  margin: 0 0 8px !important;
}

/* Bei Detaileinträgen doppelten Titel in der Dateibox entfernen, weil pd-fdesc ihn schon zeigt */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) .pd-filenamebox-bt > .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) .pd-filenamebox-bt > .pd-title {
  display: none !important;
}

/* Beschreibung und Metadaten im Detailblock */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-fdesc,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-fdesc {
  color: #1d2430 !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-fdesc .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-fdesc .pd-title {
  font-size: 1.06rem !important;
  margin: 0 0 6px !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-fdesc p,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-fdesc p {
  margin: 0 0 10px !important;
}

/* Metadaten als Chips */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-date-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-downloads-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-fl-m,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-date-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-downloads-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-fl-m {
  display: inline-flex !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
  align-items: center !important;
  margin: 4px 6px 4px 0 !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.075) !important;
  border: 1px solid rgba(0,207,232,.12) !important;
  color: #475569 !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
}

/* Labels in Metadaten leicht dunkler */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-date-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-downloads-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-date-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-downloads-txt {
  color: #111827 !important;
}

/* Datei-Link als ruhige Dateizeile, nicht Karte in Karte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filenamebox-bt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filenamebox-bt {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-float,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-float {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
  position: relative !important;
  padding-left: 34px !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16::before {
  content: "↓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: #051014 !important;
  font-weight: 950 !important;
  font-size: .95rem !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.055) !important;
  border: 1px solid rgba(0,207,232,.16) !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* Buttons rechts als eine Aktionsgruppe */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > .col-sm-6:nth-child(2),
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > .col-md-6:nth-child(2),
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) > .col-sm-6:last-of-type,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > .col-sm-6:nth-child(2),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > .col-md-6:nth-child(2),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) > .col-sm-6:last-of-type {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Leere Buttonboxen weg */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt:empty,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt:empty {
  display: none !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt .btn,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 104px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--tus-cyan) !important;
  color: #051014 !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(0,207,232,.20) !important;
}

/* Reihenfolge: Details links, Download rechts */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt:has(.btn-info),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt:has(.btn-info) {
  order: 1 !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt:has(.btn-success),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt:has(.btn-success) {
  order: 2 !important;
}

/* Sortierung/Footer getrennt vom Downloadkartenbereich */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box form[name="adminForm"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box form[name="adminForm"] {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(5,7,10,.08) !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box form[name="adminForm"] .pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box form[name="adminForm"] .pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box form[name="adminForm"] select,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box form[name="adminForm"] select {
  min-height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(5,7,10,.10) !important;
}

/* Phoca Branding weg */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box + .pd-cb + div[style*="text-align:right"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box + .pd-cb + div[style*="text-align:right"] {
  display: none !important;
}

@media (max-width: 900px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp),
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > .col-sm-6:nth-child(2),
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) > .col-sm-6:last-of-type,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > .col-sm-6:nth-child(2),
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) > .col-sm-6:last-of-type {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt .btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt .btn {
    min-width: 128px !important;
  }
}


/* =========================================================
   V38 – Phoca Download Kategorie: letzter Feinschliff
   Ziel: lange Dateinamen sauber in der Karte halten,
   Karteninhalt nicht mehr seitlich herauslaufen lassen.
   ========================================================= */

/* Grid-Kinder dürfen schrumpfen, damit lange Dateinamen nicht ausbrechen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp),
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"],
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filenamebox-bt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filenamebox-bt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-float,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-float {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Datei-Pill nimmt nur den verfügbaren linken Bereich ein */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
  width: 100% !important;
}

/* Dateiname innerhalb der Pill sauber abschneiden statt herauslaufen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 a {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Bei sehr langen Dateinamen darf die Datei-Pill etwas breiter sein, bleibt aber in der Karte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:first-child,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:first-child {
  width: 100% !important;
}

/* Buttons bleiben rechts stabil und rücken nicht in die Dateispalte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child {
  min-width: 230px !important;
}

/* Lange Überschriften bleiben ebenfalls sauber im Kartenrahmen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-title {
  overflow-wrap: anywhere !important;
}

/* Detailblock mit Metadaten bleibt kompakt */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-fdesc,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-fdesc {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Untere Sortierung etwas weniger dominant */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box form[name="adminForm"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box form[name="adminForm"] {
  margin-top: 18px !important;
  opacity: .92 !important;
}

@media (max-width: 900px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 a,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 a {
    white-space: normal !important;
  }
}


/* =========================================================
   V39 – Phoca Download Kategorie: stabile Vertikal-Karten
   Ziel: Schluss mit seitlichem Versatz/Clipping.
   Ein Download bleibt eine Karte, aber Datei und Buttons werden
   untereinander sauber innerhalb der Karte geführt.
   ========================================================= */

/* Kategoriecontainer ruhiger und stabil */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box {
  max-width: 980px !important;
  overflow: visible !important;
}

/* Jede Downloadzeile wird eine vertikale Karte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  margin: 0 0 16px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(0,207,232,.18) !important;
  box-shadow: 0 14px 34px rgba(5,7,10,.055) !important;
  overflow: hidden !important;
}

/* Alle Spalten innerhalb der Karte werden volle Breite */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Leere Bewertungszeilen komplett ausblenden */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-row2-bp,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-row2-bp {
  display: none !important;
}

/* Titel/Description sauber oben */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filenamebox-bt > .pd-title,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-fdesc .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filenamebox-bt > .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-fdesc .pd-title {
  margin: 0 0 8px !important;
  color: var(--tus-cyan-2) !important;
  font-size: 1.05rem !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

/* Doppelte Titel beim Detail-Sonderfall vermeiden */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) .pd-filenamebox-bt > .pd-title,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:has(.pd-fdesc) .pd-filenamebox-bt > .pd-title {
  display: none !important;
}

/* Dateizeile: keine verschachtelte Kartenoptik, aber klarer Dateilink */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filenamebox-bt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filename,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-float,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filenamebox-bt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filename,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-float {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Dateiname darf umbrechen, damit nichts abgeschnitten wird */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 {
  position: relative !important;
  display: block !important;
  padding-left: 34px !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16 a,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16 a {
  display: inline-block !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: rgba(0,207,232,.055) !important;
  border: 1px solid rgba(0,207,232,.16) !important;
  color: var(--tus-cyan-2) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Download-Icon bleibt links sauber stehen */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-document16::before,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-document16::before {
  content: "↓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 17px !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: var(--tus-cyan) !important;
  color: #051014 !important;
  font-weight: 950 !important;
  font-size: .95rem !important;
}

/* Metadaten-Chips bleiben im Textfluss */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-filesize-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-date-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-downloads-txt,
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-fl-m,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-filesize-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-date-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-downloads-txt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-fl-m {
  display: inline-flex !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 4px 6px 6px 0 !important;
}

/* Buttons unten rechts in derselben Karte */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt:empty,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt:empty {
  display: none !important;
}

/* Button-Reihenfolge: Details, dann Download */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt:has(.btn-info),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt:has(.btn-info) {
  order: 1 !important;
}
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt:has(.btn-success),
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt:has(.btn-success) {
  order: 2 !important;
}

/* Sortierung kompakt unter den Karten */
body.com-phocadownload.view-category #sp-component #phoca-dl-category-box form[name="adminForm"],
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box form[name="adminForm"] {
  margin-top: 14px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(5,7,10,.07) !important;
}

body.com-phocadownload.view-category #sp-component #phoca-dl-category-box form[name="adminForm"] .pagination,
body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box form[name="adminForm"] .pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* kleine Screens: Buttons volle Breite */
@media (max-width: 700px) {
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) > [class*="col-"]:last-child {
    justify-content: stretch !important;
  }

  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt,
  body.com-phocadownload.view-category #sp-component #phoca-dl-category-box .pd-button-box-bt .btn,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt,
  body.com-phocadownload #sp-component:has(#phoca-dl-category-box) #phoca-dl-category-box .pd-button-box-bt .btn {
    width: 100% !important;
  }
}


/* =========================================================
   V40 – Artikelbilder / Mannschaftsfotos reparieren
   Problem: Bilder in Beiträgen, z. B. Mannschaftsfotos der 1. Herren,
   wurden durch zu breite Icon-/Listenbild-Regeln viel zu klein.
   Ziel: normale Beitragsbilder wieder sichtbar groß anzeigen.
   ========================================================= */

/* Normale Bilder im Joomla-Beitrag dürfen wieder groß dargestellt werden */
body.com-content.view-article #sp-component .article-details img,
body.com-content.view-article #sp-component .item-page img,
body.com-content.view-article #sp-component .com-content-article img,
body.com-content.view-article #sp-component .articleBody img,
body.com-content.view-article #sp-component .article-body img {
  max-width: 100% !important;
  height: auto !important;
}

/* Bilder, die direkt im Beitrag stehen, nicht als kleine Icons behandeln */
body.com-content.view-article #sp-component .article-details p > img,
body.com-content.view-article #sp-component .item-page p > img,
body.com-content.view-article #sp-component .com-content-article p > img,
body.com-content.view-article #sp-component .articleBody p > img,
body.com-content.view-article #sp-component .article-body p > img,
body.com-content.view-article #sp-component .article-details figure img,
body.com-content.view-article #sp-component .item-page figure img,
body.com-content.view-article #sp-component .com-content-article figure img {
  width: auto !important;
  min-width: min(100%, 320px) !important;
  max-width: 100% !important;
}

/* Zentrale Inhaltsbilder aus /images/ großzügig darstellen */
body.com-content.view-article #sp-component .article-details img[src*="/images/"],
body.com-content.view-article #sp-component .item-page img[src*="/images/"],
body.com-content.view-article #sp-component .com-content-article img[src*="/images/"] {
  max-width: 100% !important;
  height: auto !important;
}

/* Kleine echte Icons bleiben klein */
body.com-content.view-article #sp-component img.fa,
body.com-content.view-article #sp-component img.icon,
body.com-content.view-article #sp-component img[src*="/icons/"],
body.com-content.view-article #sp-component img[src*="/media/system/"],
body.com-content.view-article #sp-component img[src*="/media/com_phocadownload/images/mime/"] {
  width: auto !important;
  min-width: 0 !important;
}

/* Falls alte width/height-Attribute aus dem Editor winzig sind: bei Beitragsbildern übersteuern */
body.com-content.view-article #sp-component .article-details p > img[width],
body.com-content.view-article #sp-component .item-page p > img[width],
body.com-content.view-article #sp-component .com-content-article p > img[width] {
  width: auto !important;
  max-width: 100% !important;
}