/* Basis-Parameter */ :root {

/* Farben */
  --page_color: #940952;
  --page_color_hover: #740741;
  --page_color_secondary: #b0b0b0;
  --page_color_secondary_hover: #b0b0b0;
  --page_color_white: #fff;
  --page_color_black: #000;
  --page_color_grey05: #f9f9f9;
  --page_color_grey10: #c7c7c7;
  --page_color_grey25: #c7c7c7;
  --page_color_grey40: #4b4b4b;
  --page_color_grey50: #828282;
  --page_color_grey75: #252525;
  --page_color_grey90: #f9fafb;
  --page_color_line: #C1D9E1; 
  --page_color_font: #000;
  --page_color_hg1: #e3c8d6;
  --page_color_hg2: #F0F1DB;
  --page_color_hg2: #d3afb6;
  --page_radius: 0.5rem;
  
/* Font */
  --page_font_align_center: center;
  --page_font_align_left: left;
  --page_font_align_right: right;
  --page_font_awf: "Font Awesome 6 Free";
  --page_font_aws: "Font Awesome 6 Free";
  --page_font_basic: 'Lato', sans-serif, system-ui, -apple-system, "Segoe UI", Arial;
  --page_font_family: var(--page_font_basic);
  --page_font_second: 'Cormorant Garamond', serif;
  --page_font_size: clamp(0.875rem, 1vw + 0.25rem, 1rem); /* 14px–16px */
  --page_font_size_h1: clamp(1.875rem, 4vw + 0.5rem, 2.625rem); /* 30px–42px */
  --page_font_size_h2: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); /* 24px–36px */
  --page_font_size_h2a: clamp(1.375rem, 3vw + 0.5rem, 2rem); /* 22px–32px */
  --page_font_size_h3: clamp(1.25rem, 2.5vw + 0.5rem, 1.75rem);
  --page_font_size_h4: clamp(1.125rem, 2vw + 0.5rem, 1.5rem);
  --page_font_size_h5: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  --page_font_size_h6: clamp(0.875rem, 1vw + 0.25rem, 1rem);
  --page_font_size_header: var(--page_font_size_h1);
  --page_font_size_subheader: var(--page_font_size_h4);
  --page_font_size_small: clamp(0.75rem, 0.5vw + 0.2rem, 0.8125rem); /* 11px–13px */
  --page_font_size_social_share: clamp(1.125rem, 1vw + 0.5rem, 1.25rem); /* 18px-20px */
  --page_font_line_height: clamp(1.4em, 2vw + 1rem, 1.6em); /* Dynamisch zwischen 1.4em und 1.6em */
  --page_font_style_italic: italic;
  --page_font_style_normal: normal;
  --page_font_weight_400: 400;
  --page_font_weight_500: 500;
  --page_font_weight_600: 600;
  --page_font_weight_700: 700;
  --page_font_weight_800: 800;
  --page_font_weight_900: 900;

/* Top */
  --top_color: #aaaaaa;
  --top_color_bg: #252525;
  --top_font_size: var(--page_font_size_small);

/* Header Menu Button*/
  --header_height: 90px;
  --logo_height: 60px;
  --logo_height-mobile: 60px;
  --header_height-mobile: 40px;
  --header_height-toggler: 50px;
  --page_menu_background: rgba(0, 0, 0, 0.10);
  --page_menuoff_font_size: 1.125em;
  --page_menuoff_line-hight: 1.125em;
  --sp_megamenu_font_size: var(--page_font_size);
  --page-btn-radius: var(--page_radius);
  --page-btn-padding-x: 0.75rem;
  --page-btn-padding-y: 0.375rem;

/* Image*/
  --page_img-border: 2px;

/* Icons*/
  --ico-load: "\e1d4"; /* --- Loader-Spinner */
  --ico-search: "\f002"; /* --- Lupe */
  --ico-adown: "\f107"; /* --- Angel down */
  --ico-aright: "\f105"; /* --- Angel right */
  --ico-star: "\f005"; /* --- voller Stern*/
  --ico-cvdown: "\f078"; /* --- chevron-down kleiner Pfeil nach unten */
  --ico-xmark: "\f00d"; /* --- xmark Kreuz-schliessen */
  --ico-cplus: "\f055"; /* --- circle-plus Pluszeichen im Kreis */
  --ico-cminus: "\f056"; /* --- circle-minus Minuszeichen im Kreis */
  --ico-news: "\f1ea"; /* --- Newspaper */
  --ico-user: "\f007"; /* --- user createdby 900 */
  --ico-folder: "\f07c"; /* --- folder-open Catergory-Name 900 */
  --ico-cal: "\f073"; /* --- calendar-days Datum 900 */
  --ico-eye: "\f06e"; /* --- eye Hits 900 */
  --ico-home: "\f3c5"; /* --- location-dot Home 900 */
  --ico-list: "\f00c"; /* --- check Liste Aufzählpunkt 900 */
  --ico-danger: "\f071"; /* --- triangle-exclamation Datenschutz */
  --ico-list1: "\f0da"; /* --- caret-right Liste Aufzählpunkt 900 */
  --ico-list2: "\f192"; /* --- circle-dot Liste Aufzählpunkt 900 */

/* SP Pagebuilder */
  --page_sp-grid: 2em;
  --page_sp-inner-row: 1.5em;
  --page_sp-row: 0em;

/* Karte & Bilder */
  --page_gap: 1em;
  --page_karte-radius: var(--page_radius);
  --page_karte-height: 180px;        /* ? feste Höhe der Kachel */
  --page_karte-icon-size: 34px;
  --page_karte-icon-box-size: 72px;      /* ? feste Icon-Fläche */
  
/* bottom */
  --bottom_color: var(--page_color_grey75);
  --bottom_color_bg: #f5f5f5;
  --bottom_font_size: var(--page_font_size);
  --bottom_font_size_header: var(--page_font_size_h3);

/* footer */
  --footer_color: var(--page_color_white);
  --footer_color_bg: #252525;
  --footer_color_link: var(--page_color_grey25);
  --footer_color_link_hover: var(--page_color_white);
  --footer_font_size: var(--page_font_size_small);
  --footer_font_line_height: clamp(1.1em, 2vw + 0.8rem, 1.4em); 
}

@media (max-width: 1024px) {
  :root {
  --page_font_size: clamp(0.875rem, 3vw + 0.5rem, 1rem); /* 14px–16px */
  --page_font_size_h1: clamp(1.5rem, 6vw + 0.5rem, 2.25rem); /* 24px–36px */
  --page_font_size_h2: clamp(1.375rem, 5vw + 0.5rem, 2rem); /* 22px–32px */
  --page_font_size_h3: clamp(1.25rem, 4vw + 0.5rem, 1.75rem);
  --page_font_size_h4: clamp(1.125rem, 3.5vw + 0.5rem, 1.5rem);
  --page_font_size_h5: clamp(1rem, 3vw + 0.5rem, 1.25rem);
  --page_font_size_h6: clamp(0.875rem, 2.5vw + 0.25rem, 1rem);
  --page_font_size_small: clamp(0.8125rem, 2vw + 0.5rem, 0.875rem); /* 11px–13px */
  --page_font_size_social_share: clamp(1.125rem, 3vw + 0.5rem, 1.25rem); /* 18px-20px */
  --page_font_line_height: clamp(1.4em, 3vw + 1rem, 1.6em); /* Dynamisch zwischen 1.4em und 1.6em */
  }
}

/* ------------------------------------------------------------ Formular */

.mod-cform #cf_1, .mod-cform #cf_2, .mod-cform #cf_3, .mod-cform #cf_4, .mod-cform #cf_5 {
  --background-color: rgba(245, 245, 245, 1);
  --border: solid 1px #dddddd;
  --border-radius: 0px;
  --control-gap: 10px;
  --input-background-color: var(--page_color_white);
  --input-border-color: #cccccc;
  --input-border-radius: 3px;
  --input-color: var(--page_color_black);
  --input-padding: 10px 10px;
  --input-placeholder-color: #828282;
  --input-size: 16px;
  --input-size: var(--page_font_size);
  --input-text-align: left;
  --label-color: var(--page_color_black);
  --label-size: var(--page_font_size);
  --label-weight: var(--page_font_weight_600);
}
.mod-cform .convertforms .cf-label {
    color: var(--page_color_black);
}
.mod-cform .convertforms .cf-control-input-desc {
    opacity: 1;
    color: var(--page_color_black);
}
.mod-cform .convertforms .cf-control-input, .mod-cform .convertforms .cf-control-input-desc {
    font-size: var(--input-size);
}
.mod-cform .convertforms .cf-control-input h2 {
    padding-top: 0px;
}
.mod-cform .datenschutz h2:before {
  font-family: var(--page_font_aws);
  content: var(--ico-danger);
  font-weight: var(--page_font_weight_900);
  display: inline-block;
  margin-right: 0.375em;
}

/* ------------------------------------------------------------------------------------------ Basic im Editor */
.cleared, .clearfix:after {
  clear: both;
  font: 0/0 serif;
  display: block;
  content: " ";
}
.bildrechts, .bildlinks, .bildvoll, .sppb-img-responsive  {
    border-radius: var(--page_radius);
    border: var(--page_img-border) solid;
    border-color: transparent;
}
.bildrechts {
  float: right;
  margin-right: 0;
  margin-left: 25px;
  margin-bottom: 10px;
  padding: 0;
  width: 300px;
}
.bildlinks {
  float: left;
  margin-right: 25px;
  margin-left: 0;
  margin-bottom: 10px;
  padding: 0;
  width: 300px;
}
.bildvoll {
  float: none;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 15px;
  padding: 0;
}
hr, hr:not([size]) {
  border: 0px solid !important;
  border-bottom: 1px solid var(--page_color_grey10) !important;
  opacity: 1 !important;
  height: 0px !important;
  clear: both !important;
  background-color: var(--page_color_white);
}
p.preis{
  background-color: var(--page_color_hg1);
  padding: var(--page-btn-padding-y) var(--page-btn-padding-x);
  line-height: 2em;
  border-radius: var(--page-btn-radius);
    display: inline-block;
}
ul.liste {
  list-style: none;
  padding: 0;
  margin-left: 15px;
  margin-right: 15px;
}
.liste li {
  padding-left: 1.5em;
  padding-bottom: 0.5em;
}
.liste li:before {
  font-family: var(--page_font_aws);
  content: var(--icon-liste);
  font-weight: var(--page_font_weight_900);
  display: inline-block;
  margin-left: -1.5em; /* same as padding-left set on li */
  width: 1.5em; /* same as padding-left set on li */
}
/* -- SIGallery im CSS media/sigplus/css unten angehängt */

/*------------------ com-content-article-beitrag */
/*------------------ Beitragbilder */
.wsp-article {
    display: flex;
    /* align-items: flex-start; */
    justify-content: space-between;
    gap: 1.25em;
    margin: 1.25em 0;
}
.wsp-karte .article-header {
	display: none;
}
/* Bild rechts & 1/3 Breite */
.wsp-article .article-full-image {
    order: 2;
    flex: 0 0 33.33%;
    margin: 0;            /* wichtig: figure hat default-margin */
    padding: 0;
}

.wsp-article .article-full-image img {
    width: 100%;
    height: auto;
    display: block;
	border-radius: var(--page_radius);
}
.article-details figcaption.caption {
text-align: var(--page_font_align_center);
}


/* Text links */
.wsp-article .wsp-article-text {
    order: 1;
    flex: 1;
	height: auto;
  display: block;
}
.mod-custom .wsp-article .wsp-article-text {
	padding-left: 2em;
	padding-right: 2em;
  display: flex;              /* statt block */
  flex-direction: column;
  justify-content: center;    /* vertikal */
}

.mod-custom .wsp-article:nth-child(even){
  flex-direction: row-reverse;
}
.wsp-article-text table {margin-bottom: 2em;}

/* Animation für Startseite */

.animate-on-scroll .animate-col {
    opacity: 0;
}
.animate-col-left {
    transform: translateX(-60px);
}
.animate-col-right {
    transform: translateX(60px);
}
.animate-on-scroll.is-visible .animate-col {
    opacity: 1;
    transform: translateX(0);
    transition: 
        opacity 0.8s ease,
        transform 0.8s ease;
}
.animate-on-scroll.is-visible .animate-col-right {
    transition-delay: 0.5s;
}

.animate-on-scroll.is-visible .animate-col-left {
    transition-delay: 0s;
}

/* Responsive für Handy */
@media (max-width: 768px) {
    .wsp-article {
        flex-direction: column;
    }

    .wsp-article .article-full-image {
        order: 1;
        flex: 0 0 100%;
    }

    .wsp-article .wsp-article-text {
        order: 2;
			padding-left: 0em;
	padding-right: 0em;
    }
  .mod-custom .wsp-article:nth-child(even){
    flex-direction: column; /* überschreibt row-reverse */
  }
  .animate-on-scroll.is-visible .animate-col-right {
        transition-delay: 0.25s;
    }
}

/*------------------ Beitrag-Liste */
.wsp-article ul {
  list-style: none;
  padding-left: 0; 
}

.wsp-article li {
  position: relative;
  padding-left: 1.85em;    /* Einrückung für Text + Icon */
}

.wsp-article li::before {
  font-family: var(--page_font_aws);
  content: var(--ico-list1);
  font-weight: var(--page_font_weight_900);
  position: absolute;
  left: 0;
  width: 1.75em;            /* Platzhalterbreite */
  text-align: center;
}


/*------------------ Pagbuilder */
/*--- für Sections mit mehreren Columns */
.wsp-row {
  padding-top: var(--page_sp-row);
  padding-right: var(--page_sp-row);
  padding-bottom: var(--page_sp-row);
  padding-left: var(--page_sp-row);
  margin-top: var(--page_sp-row);
  margin-right: var(--page_sp-row);
  margin-bottom: var(--page_sp-row);
  margin-left: var(--page_sp-row);
}
.wsp-inner-row {
  padding-top: var(--page_sp-inner-row);
  padding-bottom: var(--page_sp-inner-row);
}
.wsp-inner-row-slider {
  padding-top: 0;
  padding-bottom: var(--page_sp-inner-row);
}
/*--- für Sections mit einer Column */
.wsp-grid {
    padding-top: var(--page_sp-grid);
    padding-bottom: var(--page_sp-grid);
}
.wsp-start {
  text-align: center;
}
.wsp-start h1.sppb-addon-title{
	margin-bottom: 1em;
}
.wsp-start .article-details .article-can-edit {
	display: none !important;
}
.wsp-content {
	background-color: var(--page_color_hg1);
}

.wsp-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 350px;
    background: url(../../images/weinblatt.png) no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* unten rechts */
.wsp-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250px;
    height: 350px;
    background: url(../../images/weinblatt2.png) no-repeat;
    background-size: contain;
    pointer-events: none;
}

.wsp-content::before,
.wsp-content::after {
    z-index: 0;
}

.wsp-content > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 1200px) {
    .wsp-content::before,
    .wsp-content::after {
        width: 500px;   /* 200% von 250px */
        height: 700px;  /* 200% von 350px */
    }
}

.wsp-bilder {
    background-image: url(../../images/sp-bilder-hg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}
.wsp-bilder h1.sppb-addon-title{
	color: var(--page_color_white);
}
/* Mobile */
@media (max-width: 768px) {
    .wsp-bilder {
        background-image: none;      /* Bild entfernen */
        background-color: #404040;   /* Ersatzfarbe */
    }
}
/*------------------ SP Modul Startseite */
.wspmod4sp .sppb-row-column {
    max-width: 25%;
    flex-basis: 25%;
}

@media (max-width: 767.98px) {
    .wspmod4sp .sppb-row-column {
        max-width: 100%;
        flex-basis: 100%;
    }
	.wspmod4sp .sppb-row {
    gap: 20px; /* Abstand zwischen den Flex-Items */
}
}

/*------------------ Mobile */
@media (max-width: 575px) {
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: 1rem;
    padding-left: 1rem;
  }
.bildrechts, .bildlinks {
    float: none;
    width: 100%;
    display: block;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 25px;
    padding: 0;
  }
  .entry-header h2, .entry-header h1, .fox-container h2, h1.page-header {
    margin: 8px 0 0;
    font-size: var(--page_font_size_header);
    line-height: 1;
  }
  .mod-syswanschrift, .mod-syswopen, .mod-syswbereiche, .mod-syswrecht {
    text-align: center;
  }
}
@media (max-width: 991px) {
  #sp-bottom .spc-bottom {
    text-align: center;
    width: 100%;
    float: none;
    padding-bottom: 10px;
  }
#sp-header {
    height: var(--header_height);
  }
}
@media (min-width: 576px) and (max-width : 767px) {
  .bildrechts, .bildlinks {
    width: calc(100%/3);
  }
}
@media (min-width:1960px) {
  .container, .sppb-row-container {
    max-width: calc(1320px + 10%);
  }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl, .sppb-row-container {
        max-width: 1320px;
    }
}
@media (min-width: 1200px) {
  .col-xl-10 {
    flex: 0 0 auto;
    width: 100%;
  }
}

.breadcrumb  .float-start {
    margin-right: 0.5em;
}

/* ------------------------------------------------------------ Preset */
/* ------------------------------------------------------------ Layout */
html {
  font-size: 100%; /* Fallback: 16px (Standard in den meisten Browsern) */
  font-size: clamp(15px, 1vw + 0.5rem, 16px); /* Dynamisch zwischen 15–16px */
}
.sp-preloader {
  background-color: var(--page_color_white);
  color: var(--page_color_grey75);
}
body {
  background: var(--page_color_white);
  font-size: var(--page_font_size);
  font-family: var(--page_font_basic);
  font-weight: var(--page_font_weight_400);
  line-height: var(--page_font_line_height);
  color: var(--page_color_font);
  font-style: var(--page_font_style_normal);
  min-height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: left;
  margin: 0 auto;
}
h1 {
  font-family: var(--page_font_second);
  font-weight: var(--page_font_weight_600);
  font-size: var(--page_font_size_h1);
}
h2 {
  font-family: var(--page_font_second);
  font-weight: var(--page_font_weight_600);
  font-size: var(--page_font_size_h2);
}
h3 {
  font-family: var(--page_font_second);
  font-weight: var(--page_font_weight_600);
  font-size: var(--page_font_size_h3);
}
h4 {
  font-family: var(--page_font_second);
  font-weight: var(--page_font_weight_600);
  font-size: var(--page_font_size_h4);
}
h5 {
  font-family: var(--page_font_basic);
  font-weight: var(--page_font_weight_700);
  font-size: var(--page_font_size_h5);
}
h6 {
  font-family: var(--page_font_basic);
  font-weight: var(--page_font_weight_500);
  font-size: var(--page_font_size_h6);
}
h1, h2, h3, h4, h5, h6 {
  padding-top: 10px;
}
b, strong {
    font-weight: var(--page_font_weight_700);
}
.article-details .article-header h1, .article-details .article-header h2, .entry-header h2, .entry-header h1, .fox-container h2, h1.page-header, .search h1.page-title, .content-category h1, .article-header h1, .page-header h1 {
  font-size: var(--page_font_size_header);
  font-weight: var(--page_font_weight_600);
  border: 0px solid;
  border-bottom: 1px solid var(--page_color_grey10) !important;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;
  padding-bottom: 8px;
}
.erecht .article-body h2 {
  font-size: var(--page_font_size_h3);
}
.article-info > span {
  font-size: var(--page_font_size_small);
}
#sp-main-body {
  padding: 2em 0
}
.sp-preloader > div {
  background: var(--page_color);
}
.sp-preloader > div:after {
  background: var(--page_color_white);
}
.sp-page-title {
  background: var(--page_color);
}
.layout-boxed .body-innerwrapper {
  background: var(--page_color_white);
}
/* ------------------------------------------------------------ Top & Logo & Header */
#sp-top-bar {
  background: var(--top_color_bg);
  color: var(--top_color);
}
#sp-top-bar a {
  color: var(--top_color);
}
#sp-menu ul.social-icons a:hover, #sp-menu ul.social-icons a:focus {
  color: var(--page_color);
}
#sp-header {
  height: var(--header_height);
  background: var(--page_color_white);
  width: 100%;
  position: relative;
  z-index: 999;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 18%);
  animation: spFadeIn 0.5s;
}
.logo-image {
  height: var(--logo_height);
}
.logo-image-phone {
  height: var(--logo_height-mobile);
}
@media(max-width: 992px) {
  #sp-header {
    height: var(--header_height);
  }
  .logo-image {
    height: var(--logo_height);
  }
  .logo-image-phone {
    height: var(--logo_height-mobile);
  }
}
@media(max-width: 575px) {
  #sp-header {
    height: var(--header_height);
  }
  .logo-image {
    height: var(--logo_height);
  }
  .logo-image-phone {
    height: var(--logo_height-mobile);
  }
}
@media (min-width: 1400px) {

  #sp-header, #sp-header .logo {
    height: calc(var(--header_height) + 20px);
  }
  .logo-image {
    height: calc(var(--logo_height) + 20px);
  }

}
/* ------------------------------------------------------------ Link */
a {
  color: var(--page_color);
}
a:hover, a:focus, a:active {
  color: var(--page_color_hover);
}
/* ------------------------------------------------------------ Tags */
.tags > li {
  display: inline-block
}
.tags > li a {
  background: rgba(3, 69, 191, 0.1);
  color: var(--page_color);
}
.tags > li a:hover {
  background: var(--page_color_hover);
}
/* ------------------------------------------------------------ Artikel Ergänzungen */
.article-social-share .social-share-icon ul li a {
  color: var(--page_color_grey75);
}
.article-social-share .social-share-icon ul li a:hover, .article-social-share .social-share-icon ul li a:focus {
  background: var(--page_color);
}
.pager > li a {
  border: 1px solid #ededed;
  color: var(--page_color_grey75);
}
.sp-reading-progress-bar {
  background-color: var(--page_color);
}
.article-info .category-name a:before {
  font-family: var(--page_font_aws);
  font-weight: var(--page_font_weight_900);
  content: var(--ico-folder);
  padding-right: 4px;
}
.article-info .createdby:before {
  font-family: var(--page_font_aws);
  content: var(--ico-user);
  font-weight: var(--page_font_weight_900);
  padding-right: 4px;
}
.article-info .published time:before, .article-info .modified time:before {
  font-family: var(--page_font_aws);
  content: var(--ico-cal);
  font-weight: var(--page_font_weight_900);
  padding-right: 4px;
}
.article-info .hits meta:before {
  font-family: var(--page_font_aws);
  content: var(--ico-eye);
  font-weight: var(--page_font_weight_900);
  padding-right: 4px;
}
/* ------------------------------------------------------------ sigplus-gallery ist im css-Media */
/* ------------------------------------------------------------ Fotoalbum */

.wsp-fotoalbum ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--page_gap);
}

@media (max-width: 1024px){
  .fotoalbum .wsp-fotoalbum ul{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .fotoalbum .wsp-fotoalbum ul, .wsp-start .wsp-fotoalbum ul{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .fotoalbum  .wsp-fotoalbum ul, .wsp-start .wsp-fotoalbum ul{ grid-template-columns: 1fr; }
}

.wsp-fotoalbum li { margin: 0; }

.wsp-fotoalbum .img-hover-zoom{
  margin: 0;                 /* Grid regelt die Abstände über gap */
  border-radius: var(--page_radius);
  border: var(--page_img-border) solid;
  border-color: transparent;
  overflow: hidden;
  position: relative;
}
.wsp-fotoalbum .img-ratio-11{
  aspect-ratio: 1 / 1;       /* macht die Kachel quadratisch */
}
.wsp-fotoalbum .img-ratio-43{
  aspect-ratio: 4 / 3;       /* macht die Kachel 4zu3 */
}

.wsp-fotoalbum .img-hover-zoom a{
  display: block;
  height: 100%;
  position: relative;         /* wichtig für Pseudo-Overlays */
}

.wsp-fotoalbum .img-hover-zoom img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* quadratisch ohne Verzerren */
  display: block;
  transition: transform .5s ease, filter .5s ease;
}

/* Zoom + Filter */
.wsp-fotoalbum .img-hover-zoom:hover img{
  transform: scale(1.2);
  filter: grayscale(100%);
}

.wsp-fotoalbum .img-hover-zoom:hover{
  border-color: var(--page_color);
}

/* dunkler Overlay-Hintergrund */
.wsp-fotoalbum .img-hover-zoom a::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 5;
}
.wsp-fotoalbum .img-hover-zoom:hover a::before{
  opacity: 1;
}

/* Lupen-Icon (dein FontAwesome-Code) */
.wsp-fotoalbum .img-hover-zoom a::after{
  content: "\f00e";
  font-family: var(--page_font_aws);
  font-weight: var(--page_font_weight_900);
  color: var(--page_color_white);
  font-size: 30px;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 10;
}
.wsp-fotoalbum .img-hover-zoom:hover a::after{
  opacity: 1;
}

/* Galerie-Name aus data-title */
.wsp-fotoalbum .img-hover-zoom a span.gallery-title{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  color: var(--page_color_white);
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 10;

  /* optional: bessere Lesbarkeit */
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

.wsp-fotoalbum .img-hover-zoom:hover a span.gallery-title{
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 1024px){
  .wsp-fotoalbum .img-hover-zoom a span.gallery-title, .wsp-fotoalbum .img-hover-zoom a::before { opacity: 0; }
}

@media (max-width: 768px) {
.sigplus-gallery li,
.sigplus-gallery a {
  width: 100%;
}

  .sigplus-preview {
    width: 100% !important;
    height: auto;
	aspect-ratio: auto 4 / 3 !important;
  }
}
@media (max-width:575px) {

.wsp-fotoalbum .gallery-title .h3, .wsp-fotoalbum .gallery-title h3 {
  font-size: calc(1.3rem + .6vw)
}
}
/* ------------------------------------------------------------ Karte */

.wsp-karte .wsp-karte-grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--page_gap);
}

.wsp-karte .wsp-karte-card{
    height: var(--page_karte-height);  /* ? gleiche Höhe */
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;     /* ? vertikal zentriert */
    align-items: center;         /* ? horizontal zentriert */
    text-align: center;
    padding: 12px;
    border-radius: var(--page_radius);
    background-color: var(--page_color);
}
.wsp-karte .wsp-karte-card, .wsp-karte .wsp-karte-card h3, .wsp-karte .wsp-karte-card a, .wsp-karte .wsp-karte-icon i {
  color: var(--page_color_white);
}
.wsp-karte .wsp-karte-icon{
  width: var(--page_karte-icon-box-size);
  height: var(--page_karte-icon-box-size);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.wsp-karte .wsp-karte-icon i{
  font-size: var(--page_karte-icon-size);
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s ease;
}

.wsp-karte .wsp-karte-card:hover{
  background-color: var(--page_color_hover);
}

.wsp-karte .wsp-karte-card:hover .wsp-karte-icon i{
  transform: scale(1.2);
}

.wsp-karte .wsp-karte-card h3{
  margin: 0;
  font-size: var(--page_font_size_h5);
  font-weight: var(--page_font_weight_600);
}

@media (max-width: 1200px){
.wsp-karte .wsp-karte-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
.wsp-karte .wsp-karte-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.wsp-karte .wsp-karte-card h3{
  font-size: var(--page_font_size_h4);
}
}
/* ------------------------------------------------------------ SP Title und Breadcrumbs */
.sp-page-title .sp-page-title-heading, .sp-page-title .sp-page-title-sub-heading {
  color: var(--page_color_white);
}
.sp-page-title .sp-page-title-heading {
  font-size: var(--page_font_size_header);
  line-height: 1
}
.sp-page-title .sp-page-title-sub-heading {
  font-size: var(--page_font_size_subheader);
  line-height: 1;
}
.sp-page-title .px-3 {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}
.sp-page-title .breadcrumb {
  font-size: var(--page_font_size_small);
}
.shariff {
	padding-top: 1em;
}
/* ------------------------------------------------------------ Megamenu & Offcanvamenu */

@media (min-width: 1199px){
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    font-size: var(--sp_megamenu_font_size);
}
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
	margin: 0 0.825em;
	padding: 0 0;
}
.sp-megamenu-parent > li:last-child > a {
    margin: 0px 0px 0px 0.825em;
	padding: 0px 0px 0px 0px;
}
.sp-megamenu-parent > li > a {
  color: var(--page_color_grey75);
}
.sp-megamenu-parent > li:hover > a {
  color: var(--page_color);
}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
  color: var(--page_color);
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--page_color_white);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  color: var(--page_color_grey75);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover {
  background-color: var(--page_menu_background);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: var(--page_color);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: var(--page_color);
}
.sp-megamenu-parent .sp-mega-group > li > a {
  color: var(--page_color_grey75);
}
.wsp-anim {
    position: relative;
    display: inline-block;
}

.wsp-anim::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 24px;                    /* Abstand unter dem Text */
    width: 0;
    height: 2px;                     /* Linienstärke */
    background: currentColor;        /* Farbe = Textfarbe */
    transition: width 0.35s ease;    /* Geschwindigkeit */
}

.offcanvas-menu .wsp-anim::after {
    bottom: 2px;                    /* Abstand unter dem Text */
}
.wsp-anim:hover::after {
    width: 100%;
}
#offcanvas-toggler > .fa {
  color: var(--page_color_grey75);
}
#offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fa:focus, #offcanvas-toggler > .fa:active {
  color: var(--page_color);
}
#offcanvas-toggler > .fas {
  color: var(--page_color_grey75);
}
#offcanvas-toggler > .fas:hover, #offcanvas-toggler > .fas:focus, #offcanvas-toggler > .fas:active {
  color: var(--page_color);
}
#offcanvas-toggler > .far {
  color: var(--page_color_grey75);
}
#offcanvas-toggler > .far:hover, #offcanvas-toggler > .far:focus, #offcanvas-toggler > .far:active {
  color: var(--page_color);
}
.offcanvas-menu {
  background-color: var(--page_color_white);
  color: var(--page_color_grey75);
}
.offcanvas-menu .offcanvas-inner a {
  color: var(--page_color_grey75);
}
.offcanvas-menu .offcanvas-inner a:hover, .offcanvas-menu .offcanvas-inner a:focus, .offcanvas-menu .offcanvas-inner a:active {
  color: var(--page_color);
}
.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
  color: var(--page_color_grey75);
  font-size: var(--page_menuoff_font_size);
  line-height: var(--page_menuoff_line-hight);
}
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
  color: var(--page_color);
}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
  color: rgba(37, 37, 37, 0.5)
}

/* ------------------------------------------------------------ Buttons */
.btn-primary, .sppb-btn-primary {
  border-color: var(--page_color);
  background-color: var(--page_color);
}
.btn-primary:hover, .sppb-btn-primary:hover {
  border-color: var(--page_color_hover);
  background-color: var(--page_color_hover);
}
.btn-primary-outl, .btn-secondary {
  border-color: var(--page_color_secondary);
  background-color: var(--page_color_white);
  color: var(--page_color_secondary);
  border-style: solid;
  border-width: 1px;
}
.btn-primary-outl:hover, .btn-secondary:hover {
  color: var(--page_color_white);
  background-color: var(--page_color_secondary);
  border-color: var(--page_color_secondary);
}
.btn {
  --bs-btn-font-size: var(--page_font_size);
  --bs-btn-border-radius: var(--page-btn-radius);
  display: inline-block;
  padding: var(--page-btn-padding-y) var(--page-btn-padding-x);
}
.btn-primary {
  --bs-btn-color: var(--page_color_white);
  --bs-btn-bg: var(--page_color);
  --bs-btn-border-color: var(--page_color);
  --bs-btn-hover-color: var(--page_color_white);
  --bs-btn-hover-bg: var(--page_color_hover);
  --bs-btn-hover-border-color: var(--page_color_hover);
  --bs-btn-active-color: var(--page_color_white);
  --bs-btn-active-bg: var(--page_color_hover);
  --bs-btn-active-border-color: var(--page_color_hover);
  --bs-btn-disabled-color: var(--page_color_white);
  --bs-btn-disabled-bg: var(--page_color);
  --bs-btn-disabled-border-color: var(--page_color);
}
/* ------------------------------------------------------------ Social-Icons */
ul.social-icons > li a:hover {
  color: var(--page_color);
}
#sp-bottom .mod-custom i {
    font-size: 3em;
}
/* ------------------------------------------------------------ Module */
.sp-module ul > li > a {
  color: var(--page_color_grey75);
}
.sp-module ul > li > a:hover {
  color: var(--page_color);
}
.sp-module .latestnews > div > a {
  color: var(--page_color_grey75);
}
.sp-module .latestnews > div > a:hover {
  color: var(--page_color);
}
.sp-module .tagscloud .tag-name:hover {
  background: var(--page_color);
}
.search .btn-toolbar button {
  background: var(--page_color);
}
.sp-module ul.menu > li > a {
  color: var(--page_color_grey75);
}
.sp-module ul.menu > li > a:hover {
  color: var(--page_color_hover);
}
.sp-module ul.menu > li > a:before, .sp-module ul.menu-child > li > a:before  {
  font-family: var(--page_font_aws);
  content: var(--ico-aright);
  font-weight: var(--page_font_weight_900);
  margin-right: 8px;
}
.sp-module ul.menu-child  {
  margin-left: 8px;
}
.sp-module ul.menu > li > a:hover, .sp-module ul.menu-child > li > a:hover {
  background-color: var(--page_menu_background);
}

/* ------------------------------------------------------------ Bottom & Footer */
#sp-bottom {
  background: var(--bottom_color_bg);
  color: var(--bottom_color);
  padding: 3em 0 2em;
  font-size: var(--bottom_font_size);
  line-height: 1.6
}
#sp-bottom a {

}
#sp-bottom .sp-module ul > li > a {
  color: var(--bottom_color);
}
#sp-bottom a:hover, #sp-bottom a:active, #sp-bottom a:focus {
  color: var(--page_color_hover);
}
#sp-bottom a.btn-primary {
  color: var(--page_color_white);
}
#sp-bottom .sp-module .sp-module-title {
  font-weight: var(--page_font_weight_400);
  font-size: var(--bottom_font_size_header);
  margin: 0 0 30px;
  color: var(--bottom_color);
  text-transform: uppercase;
}
#sp-bottom .sp-module h3 {
  font-size: var(--bottom_font_size_header);
  font-weight: var(--page_font_weight_600);
  margin: 0 0 16px;
  color: var(--bottom_color);
}
.wsb-icon a {
	margin-right:1em;
	}
#sp-bottom ul a:before {
  font-family: var(--page_font_aws);
  content: var(--ico-aright);
  font-weight: var(--page_font_weight_900);
  margin-right: 8px;
}
#sp-bottom .sp-module ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sp-bottom .sp-module ul > li {
  display: block;
  border-bottom: 0px solid var(--page_color_grey75);
  -webkit-transition: 300ms;
  transition: 300ms;
  line-height: 20px;
  padding-bottom: 10px;
}
#sp-bottom .sp-module ul > li:last-of-type {
  border-bottom: 0px solid var(--page_color_grey75);
}
#sp-bottom .sp-module-content .latestnews > li > a > span {
  color: var(--page_color_white);
}
@media (max-width:575px) {
#sp-bottom .sp-module {
  margin-bottom: 2em;
  text-align: center;
}
#sp-bottom .sp-module-content img {
  display: inline;
}
#sp-bottom .sp-module-content ul a:before {
  display: none;
}
#sp-bottom .sp-module ul > li {
	padding-bottom: 0px;
}
}
#sp-footer {
    background: var(--footer_color_bg);
    color: var(--footer_color);
    font-size: var(--footer_font_size);
    text-align: var(--page_font_align_center);
}
#sp-footer a, #sp-footer a:visited, #sp-footer a:active, #sp-footer a:focus {
  color: var(--footer_color_link);
}
#sp-footer a:hover {
  color: var(--footer_color_link_hover);
}
/* ------------------------------------------------------------ Pagination */
.pagination > li > a, .pagination > li > span {
  color: var(--page_color_grey75);
}
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
  color: var(--page_color_grey75);
}
.pagination > .active > a, .pagination > .active > span {
  border-color: var(--page_color);
  background-color: var(--page_color);
}
.pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span:hover, .pagination > .active > span:focus {
  border-color: var(--page_color);
  background-color: var(--page_color);
}
/* ------------------------------------------------------------ CommingSoon & ErrorPage */
.error-code, .coming-soon-number {
  color: var(--page_color);
}
.sp-comingsoon body {
  background-color: var(--page_color);
}
html.error-page body {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
}