/* =========================================================
   ORIGINAL custom.css
   ========================================================= */

/*=========================================================
   0b) Artikel-Schrift: schwarz, normal
   ========================================================= */
.item-page,
.item-page p,
.item-page li,
.item-page td,
.item-page span,
.item-page div {
  color: #000000 !important;
  font-weight: normal !important;
}

.items-row,
.items-row p,
.items-row span {
  color: #000000 !important;
  font-weight: normal !important;
}

/* =========================================================
   Content-Bereich: Schrift schwarz
   ========================================================= */
#sp-main-body,
#sp-main-body p,
#sp-main-body li,
#sp-main-body td,
#sp-main-body span,
#sp-main-body div {
  color: #000000 !important;
}

/*=========================================================
   Fonts & globale Tweaks
   ========================================================= */
@font-face {
  font-family: "DancingScript";
  src:
    url("../fonts/DancingScript-Regular.woff2") format("woff2"),
    url("../fonts/DancingScript-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

#ping-start-textbox .ping-start-text,
#aktuelles .aktuelles-text,
#ueber-mich .ueber-mich-text,
#kinderbuch .buch-text,
#ausstellungen .ausstellungen-text,
#bildergalerie .bildergalerie-text {
  font-family: "DancingScript", sans-serif !important;
}

.featured-article-badge {
  display: none;
}

/* =========================================================
   CSS-Variablen
   ========================================================= */
:root {
  --sidebar-w: clamp(210px, 18vw, 300px);
  --sidebar-pad-y: clamp(9px, 1.5vw, 20px);
  --sidebar-pad-x: clamp(11px, 1.7vw, 29px);
  --sidebar-pad-bottom: clamp(41px, 6.75vh, 71px);
  --menu-offset-top: clamp(34px, 4.9vh, 71px);
  --sidebar-bg: rgb(4, 22, 51);
  --sidebar-border: rgba(0,0,0,0.08);
  --sidebar-shadow: 0 10px 30px rgba(0,0,0,0.10);
  --menu-font: "DancingScript", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --menu-size: clamp(1.12rem, 0.92rem + 0.52vw, 1.60rem);
  --menu-line: clamp(1.20, 1.05 + 0.12vw, 1.40);
  --menu-item-pad-y: clamp(0.14rem, 0.08rem + 0.24vw, 0.42rem);
  --menu-item-pad-x: clamp(0.22rem, 0.10rem + 0.24vw, 0.45rem);
  --brush-indicator: "🖌️";
  --indicator-box: clamp(14px, 0.9em, 20px);
  --top-header-safe: clamp(64px, 8vh, 92px);
  --link-hover: #5d83b4;
}

/* =========================================================
   Desktop Layout
   ========================================================= */
@media (min-width: 993px) {
  body {
    padding-left: var(--sidebar-w);
    box-sizing: border-box;
  }

  body .bodywrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #sp-main-body,
  #sp-component,
  #sp-footer,
  #sp-bottom {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 992px) {
  body {
    padding-left: 0 !important;
    box-sizing: border-box;
  }

  body .bodywrapper {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

.sp-menu {
  display: none !important;
}

body.itemid-101 .sp-menu,
body.com_content-featured .sp-menu {
  display: block !important;
}

/* =========================================================
   Header als fixe Sidebar
   ========================================================= */
body #sp-header {
  position: fixed !important;
  left: 0;
  top: 0;
  width: var(--sidebar-w);
  height: 100vh !important;
  z-index: 99;
  padding: var(--sidebar-pad-y) var(--sidebar-pad-x) var(--sidebar-pad-bottom) var(--sidebar-pad-x);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--sidebar-shadow);
  backdrop-filter: blur(10px);
  overflow: visible;
}

body #sp-header .container-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 3;
  overflow: visible;
}

@media (min-width: 993px) {
  body #sp-header .container-inner {
    overflow: hidden;
  }
}

body #sp-header .sp-megamenu-wrapper {
  margin-top: var(--menu-offset-top);
  margin-bottom: auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}

body #sp-header .sp-megamenu-wrapper::-webkit-scrollbar {
  width: 8px;
}

body #sp-header .sp-megamenu-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22);
  border-radius: 999px;
}

body #sp-header .sp-megamenu-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================
   Desktop Menü
   ========================================================= */
@media (min-width: 993px) {

  body #sp-header .burger-icon,
  body #sp-header .navbar-toggler,
  body #sp-header .offcanvas-toggler,
  body #sp-header #offcanvas-toggler,
  body #sp-header .sp-megamenu-toggler,
  body #sp-header .sp-megamenu-toggler-icon {
    display: none !important;
  }

  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-inline-start: 0 !important;
    list-style: none !important;
  }

  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li > a {
    position: relative;
    display: block !important;
    width: 100% !important;
    font-family: var(--menu-font);
    font-size: var(--menu-size);
    line-height: var(--menu-line);
    color: #fff !important;
    padding: var(--menu-item-pad-y)
      calc(var(--menu-item-pad-x) + var(--indicator-box) + 0.40em)
      var(--menu-item-pad-y)
      var(--menu-item-pad-x);
    box-sizing: border-box;
    white-space: normal;
    transition: color .2s ease, transform .2s ease;
  }

  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li > a:hover {
    color: var(--link-hover) !important;
  }

  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li.active > a {
    color: var(--link-hover) !important;
    font-weight: 700;
  }

  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li > a::after {
    content: "";
    position: absolute;
    right: var(--menu-item-pad-x);
    top: 50%;
    transform: translateY(-50%);
    width: var(--indicator-box);
    height: var(--indicator-box);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
  }

  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li:hover > a::after,
  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li:focus-within > a::after,
  body #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li.active > a::after {
    content: var(--brush-indicator);
    opacity: 1;
    animation: brushHop .42s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  }

  @keyframes brushHop {
    0%   { transform: translateY(-50%) scale(1); }
    45%  { transform: translateY(calc(-50% - 18%)) scale(1.08); }
    100% { transform: translateY(-50%) scale(1); }
  }
}

/* =========================================================
   Burger-Menü & Offcanvas – Weiß & Dark Background
   ========================================================= */

/* ===== Mobiler Header + Burger ===== */
@media (max-width: 992px) {

  html { 
    scroll-padding-top: var(--top-header-safe, 70px); 
  }

  #sp-main-body [id] {
    scroll-margin-top: var(--top-header-safe, 70px);
  }

  body #sp-header {
    position: sticky !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
    z-index: 9999 !important;               /* Über Content, unter Offcanvas */
    padding: 10px 15px !important;
    overflow: visible !important;
  }

  body #sp-header .container-inner,
  body #sp-header .container-inner > .row,
  body #sp-header .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body #sp-header .sp-logo,
  body #sp-header .navbar-brand {
    flex: 0 0 auto;
    position: relative !important;
    z-index: 10001 !important;
  }

  body #sp-header .sp-megamenu-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
    position: relative !important;
    z-index: 10000 !important;
  }

  body #sp-header .sp-megamenu-wrapper.collapse:not(.show) {
    display: none !important;
  }

  body #sp-header .sp-megamenu-wrapper.collapse.show,
  body #sp-header .sp-megamenu-wrapper.collapsing {
    display: block !important;
  }
}



/* =========================================================
   AKTUELLES
   ========================================================= */
.aktuelles-modul ul.category-module,
.aktuelles-modul .sppb-addon-module ul,
.aktuelles-modul ul.newsflash,
.aktuelles-modul ul {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 30px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .aktuelles-modul ul.category-module,
  .aktuelles-modul .sppb-addon-module ul,
  .aktuelles-modul ul.newsflash,
  .aktuelles-modul ul {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.aktuelles-modul li,
.aktuelles-modul .mod-articles-category-introtext {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding-bottom: 60px !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.aktuelles-modul img {
  width: 100% !important;
  height: 350px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 4px;
  display: block !important;
  margin-top: 10px !important;
  margin-bottom: 15px !important;
}

.aktuelles-modul a.mod-articles-category-readmore,
.aktuelles-modul .readmore a,
.aktuelles-modul p.mod-articles-category-readmore {
  display: none !important;
}

.js-readmore-btn {
  display: inline-block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  padding: 8px 18px !important;
  background-color: #007bff !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  z-index: 999 !important;
  cursor: pointer !important;
  transition: background-color .2s ease;
}

.js-readmore-btn:hover {
  background-color: #0056b3 !important;
  color: #ffffff !important;
}

/* =========================================================
   POPUP
   ========================================================= */
.modal-backdrop.show {
  opacity: .75 !important;
}

.modal-content {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  overflow: hidden;
}

.modal-header {
  background-color: var(--sidebar-bg, #041633) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-title {
  font-family: var(--menu-font, "DancingScript", sans-serif) !important;
  font-size: 1.8rem !important;
  color: #ffffff !important;
}

.modal-body {
  padding: 1.75rem !important;
  color: #000000 !important;
  font-size: 1rem;
  line-height: 1.6;
}

.modal-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  margin-bottom: 15px;
}

/* =========================================================
   PINGUINKUNST.DE Unterseiten-Menü
   ========================================================= */
body:not(.itemid-101):not(.com_content-featured)
#sp-header .sp-megamenu-parent > li:not(:first-child) {
  display: none !important;
}

body:not(.itemid-101):not(.com_content-featured)
#sp-header .sp-megamenu-parent > li:first-child {
  display: block !important;
  margin-top: 20px !important;
}

body:not(.itemid-101):not(.com_content-featured)
#sp-header .sp-megamenu-parent > li:first-child > a::before {
  content: "← ";
  font-weight: bold;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
i._access-icon._access {
  position: fixed;
  bottom: 10px !important;
  left: 1px !important;
  z-index: 9999;
  width: 50px;
  height: 50px;
  background-color: #ffffff !important;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0 !important;
}

i._access-icon._access::before {
  content: "accessibility_new";
  font-family: "Material Icons Round", "Material Icons";
  font-size: 40px;
  line-height: 1;
  display: block;
  color: #5d83b4 !important;
}

body:has(._access-menu:not(.close)) i._access-icon._access {
  top: 40%;
}

body.site ._access-menu,
body.site ._access-menu *,
._access-menu,
._access-menu *,
body.site ._access-scrollbar,
body.site ._access-scrollbar *,
._access-scrollbar,
._access-scrollbar * {
  color: #000000 !important;
}

/* =========================================================
   FINAL BURGER FIX
   ========================================================= */
@media (max-width: 992px) {
  body #sp-header #offcanvas-toggler,
  body #sp-header .offcanvas-toggler,
  body #sp-header .sp-megamenu-toggler,
  body #sp-header .navbar-toggler,
  body #sp-header .burger-icon,
  body #sp-header .sp-megamenu-toggler-icon {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
  }

  body #sp-header #offcanvas-toggler i,
  body #sp-header .offcanvas-toggler i,
  body #sp-header .sp-megamenu-toggler i,
  body #sp-header .navbar-toggler i,
  body #sp-header .burger-icon i,
  body #sp-header .sp-megamenu-toggler-icon i {
    color: #ffffff !important;
  }

  body #sp-header #offcanvas-toggler svg,
  body #sp-header .offcanvas-toggler svg,
  body #sp-header .sp-megamenu-toggler svg,
  body #sp-header .navbar-toggler svg,
  body #sp-header .burger-icon svg,
  body #sp-header .sp-megamenu-toggler-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    filter: brightness(0) invert(1) !important;
  }

  body #sp-header #offcanvas-toggler svg *,
  body #sp-header .offcanvas-toggler svg *,
  body #sp-header .sp-megamenu-toggler svg *,
  body #sp-header .navbar-toggler svg *,
  body #sp-header .burger-icon svg *,
  body #sp-header .sp-megamenu-toggler-icon svg * {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}
/* =========================================================
   ANKER-OFFSET

   Desktop: #sp-header ist eine Seitenleiste
   und verdeckt oben nichts – daher nur ein
   kleiner Abstand. Mobil gilt weiterhin
   --top-header-safe (siehe oben).
   ========================================================= */
@media (min-width: 993px) {
  html {
    scroll-padding-top: 12px;
  }

  #sp-main-body [id],
  #sp-component [id] {
    scroll-margin-top: 12px;
  }
}

/* =========================================================
   POPUP – Volltext (Text nach dem
   "Weiterlesen"-Umbruch)
   ========================================================= */
.modal-dialog-scrollable .modal-body {
  max-height: 78vh !important;
  overflow-y: auto !important;
}

.modal-body .js-modal-loading {
  font-style: italic;
  opacity: .7;
}

.modal-body h2,
.modal-body h3,
.modal-body h4 {
  color: #041633 !important;
  margin-top: 1.25rem;
}

.modal-body .js-modal-fallback-link a {
  color: #0056b3 !important;
  font-weight: 600;
}