:root {
  /* Global Font Sizes */
/* @link https://utopia.fyi/type/calculator?c=320,13,1.125,1440,14,1.2,8,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    
  --font-size-100: clamp(0.7222rem, 0.7202rem + 0.0099vw, 0.7292rem);
  --font-size-200: clamp(0.8125rem, 0.7946rem + 0.0893vw, 0.875rem);
  --font-size-300: clamp(0.9141rem, 0.8752rem + 0.1942vw, 1.05rem);
  --font-size-400: clamp(1.0283rem, 0.9621rem + 0.331vw, 1.26rem);
  --font-size-500: clamp(1.1569rem, 1.0554rem + 0.5073vw, 1.512rem);
  --font-size-600: clamp(1.3015rem, 1.1549rem + 0.7328vw, 1.8144rem);
  --font-size-700: clamp(1.4642rem, 1.2604rem + 1.0188vw, 2.1773rem);
  --font-size-800: clamp(1.6472rem, 1.3713rem + 1.3794vw, 2.6127rem);
  --font-size-900: clamp(1.8531rem, 1.4867rem + 1.8317vw, 3.1353rem);

  --font-size-date: clamp(1.5rem, 0.2143rem + 6.4286vw, 6rem);
    
  /* Global Box Shadow */
  --box-shadow-default: 0 20px 40px #00000024;

  /* Globale maximale Breite des Contents */
  --max-site-width: 1600px;
    
  /* 50% Full-Width Container Berechnung –  50% - halber Container-Gap */
  --mod-container-full:calc(50% - 24px/2);

  /* 50% Boxed-Width Container Berechnung –  was ist kleiner: 50% - halber Container-Gap oder halbe Seitenbreite */
  --mod-container-boxed:min(calc(50% - 24px/2), var(--max-site-width)/2);

  /* Globale Festlegung für Akzent und Caret */
  accent-color: var(--e-global-color-accent);
  caret-color: var(--e-global-color-accent);
    
  /* Globale Festlegung für Button Icons (Pfeile mit und ohne Kreis) */
  --button-transition:all 0.3s ease;
  --button-hover-position:translateX(10px);

  /* Globale Festlegung für Inline-Padding */  
  --site-padding: 24px; /* Default = Mobile */
}

@media (min-width: 768px) {
  :root {
    --site-padding: 40px; /* Tablet */
  }
}

@media (min-width: 1025px) {
  :root {
    --site-padding: 80px; /* Desktop */
  }
}

/* Container Classes */
@media (min-width: 1025px) {
    .mod-con-full {
        width: var(--mod-container-full) !important;
    }
    
    .mod-con-boxed {
        width: var(--mod-container-boxed) !important;
    }  
}

/* Aspect-Ratio Classes */

.aspect-square, .aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-16-10 {
  aspect-ratio: 16 / 10;
}


/* Global Setting */

@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 3rem;
    }
}

* {
    padding:0;
    margin:0;
    font-size: inherit;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
	scrollbar-gutter:stable;
	hanging-punctuation: first last;
}

img, picture, svg, video {
    display:block;
    max-width:100%;
    height:auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
}

h1, h2, h3 {
	overflow-wrap: break-word;
}


/* Fokus-Styling für alle wichtigen Formelemente */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid var(--e-global-color-accent) !important;
    outline-offset: 2px;
}

/* sanfte Übergänge für bessere UX */
input,
textarea,
select,
button {
    transition: outline 0.2s ease, caret-color 0.2s ease;
}

body {
    .section-hero {
        padding-inline: 10%;
        min-height: 100svh;
        padding-top: 40px;
        padding-bottom: 80px; 
    }
    
    @media (min-width: 768px) {
    .section-hero {
            padding-top: 60px;
            padding-bottom: 120px;
        }
    }
    
    @media (min-width: 1024px) {
    .section-hero {
            padding-top: 120px;
            padding-bottom: 120px;
        }
    }   
}

/* Site-Padding */

body .e-con-boxed {
  padding-inline: var(--site-padding);
}

/* Erase Paddings */
/* ================= MOBILE ================= */
.px-m-0, .nopadding {
  padding-left:  0 !important;
  padding-right:  0 !important;
}
.pl-m-0 {
  padding-left:  0 !important;
}
.pr-m-0 {
  padding-right:  0 !important;
}

/* ================= TABLET ================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .px-t-0, .nopadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .pl-t-0 {
    padding-left: 0 !important;
  }
  .pr-t-0 {
    padding-right: 0 !important;
  }
}

/* ================= DESKTOP ================= */
@media (min-width: 1025px) {
  .px-d-0, .nopadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .pl-d-0 {
    padding-left: 0 !important;
  }
  .pr-d-0 {
    padding-right: 0 !important;
  }
}

/* Einzug-Klassen mit und ohne Site-Padding */
/* ========== MOBILE (unter 768px) ========== */
.px-m-10p {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
}
.px-m-10pplus {
    padding-left: calc(10vw + var(--site-padding)) !important;
    padding-right: calc(10vw + var(--site-padding)) !important;
}
.pl-m-10p {
    padding-left: 10vw !important;
}
.pl-m-10pplus {
    padding-left: calc(10vw + var(--site-padding)) !important;
}
.pr-m-10p {
    padding-right: 10vw !important;
}
.pr-m-10pplus {
    padding-right: calc(10vw + var(--site-padding)) !important;
}

/* ========== TABLET (768px – 1024px) ========== */
@media (min-width: 768px) and (max-width: 1024px) {
    .px-t-10p {
        padding-left: 10vw !important;
        padding-right: 10vw !important;
    }
    .px-t-10pplus {
        padding-left: calc(10vw + var(--site-padding)) !important;
        padding-right: calc(10vw + var(--site-padding)) !important;
    }
    .pl-t-10p {
        padding-left: 10vw !important;
    }
    .pl-t-10pplus {
        padding-left: calc(10vw + var(--site-padding)) !important;
    }
    .pr-t-10p {
        padding-right: 10vw !important;
    }
    .pr-t-10pplus {
        padding-right: calc(10vw + var(--site-padding)) !important;
    }
    
}

/* ========== DESKTOP (ab 1025px) ========== */
@media (min-width: 1025px) {
    .px-d-10p {
        padding-left: 10vw !important;
        padding-right: 10vw !important;
    }
    .px-d-10pplus {
        padding-left: calc(10vw + var(--site-padding)) !important;
        padding-right: calc(10vw + var(--site-padding)) !important;
    }
    .pl-d-10p {
        padding-left: 10vw !important;
    }
    .pl-d-10pplus {
        padding-left: calc(10vw + var(--site-padding)) !important;
    }
    .pr-d-10p {
    padding-right: 10vw !important;
    }
    .pr-d-10pplus {
        padding-right: calc(10vw + var(--site-padding)) !important;
    }
}


.elementor-widget-container p {
  text-wrap: pretty;
}

.elementor-widget-text-editor ul {
  list-style: square !important;
  padding-left: 1.3rem !important;
  margin-left: 0 !important;
  margin-bottom: 2rem !important;
}

.elementor-widget-text-editor li {
  margin-bottom: 0.5rem !important;
}

.elementor-widget-text-editor ul li::marker {
    color: var(--e-global-color-accent) !important;
    font-size: 1.1em !important;
}

section {
    overflow:hidden !important;
}

footer p {
    text-wrap: unset;
	max-width: unset;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
    margin: 0;
}

:is(h1, h2, h3, h4, h5, h6).highlight,
:is(h1, h2, h3, h4, h5, h6) .highlight, .highlight {
    color: var(--e-global-color-accent) !important;
}



.elementor .elementor-widget-text-editor a {
    color:inherit;
    font-weight: 600;
    text-decoration:underline;
} 

.elementor .elementor-widget-text-editor a:hover {
    color:var(--e-global-color-accent);
} 

.highlight-hover:hover span {
    color: var(--e-global-color-accent) !important;
}

.elementor-icon-wrapper {
	line-height:0;
} 

.box-shadow, .hover-box-shadow:hover {
	box-shadow: var(--box-shadow-default) !important;
}

.section-header .e-n-menu-dropdown-icon {
    display: none !important;
}

.nav-bg {
    backdrop-filter: blur(70px);
    -webkit-backdrop-filter: blur(70px);
}

.nav-sub {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Fallback für Safari */
    background: #191920; /* Fallback-Farbe für alte Browser */
    background: linear-gradient(
        to bottom,
        rgba(25, 25, 32, 1) 0px,
        rgba(25, 25, 32, 1) 160px,
        rgba(25, 25, 32, 0.80) 100%
    );

    /* Optional für bessere Darstellung */
    background-repeat: no-repeat;
    background-size: cover;
    padding-inline: 2rem !important;
}

.nav-sub.full-width {
    width: 100% !important;
    left: 0 !important;
}

.nav-sub-menu :first-child > a{
    font-size: var(--font-size-300)!important;
    color: var(--e-global-color-accent) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--e-global-color-accent);
    margin-bottom: 16px;
}

.nav-sub-main a{
    font-size: var(--font-size-300)!important;
    color: var(--e-global-color-accent) !important;
    font-weight: 600 !important;
    margin-bottom: 16px;
}

@media (width < 1024px) {
    .mobile-nav-bg {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); /* Fallback für Safari */
        
        background: #191920; /* Fallback-Farbe für alte Browser */
        background: linear-gradient(
        to bottom,
        rgba(25, 25, 32, 1) 0px,
        rgba(25, 25, 32, 1) 160px,
        rgba(25, 25, 32, 0.80) 100%
    );
    
        /* Optional für bessere Darstellung */
        background-repeat: no-repeat;
        background-size: cover;
    }
    .mobile-nav-bg a {
    	font-weight:300 !important;
    }
}

/* Button Animation Klasse */

.mod-button .elementor-button-icon svg {
    width: 40px;
    transform: scale(0.8);
    transform-origin: center;
    z-index:1;
    fill: var(--e-global-color-b20ab44);
}

.mod-button .elementor-button-icon {
    border-radius: 50%;
    background-color: var(--e-global-color-accent);
}

.mod-button .elementor-button:hover .elementor-button-icon svg{
    fill: var(--e-global-color-b20ab44);
}

    /* Mod-Button + Dark -> dunkler Button Kreis */
.mod-button.dark .elementor-button-icon svg{
      rect{
        fill:var(--e-global-color-128049b);        
    }
}

.mod-button.dark:hover .elementor-button-icon svg{
      rect{
        fill:var(--e-global-color-accent);        
    }
}


.elementor-button-content-wrapper {
	display:flex;
	align-items: center;

    .elementor-button-icon{
    transition: var(--button-transition) !important;
    }
    
    &:hover .elementor-button-icon{
        transform: var(--button-hover-position) !important;
        transition: var(--button-transition) !important;
    }
}

	
/* Hero Content Box Animation Klasse */
.hero-c-box {
    --position-height: calc(100% - 60px);
    position: relative;
    overflow: hidden;
}
	
.hero-c-box:hover {
    filter: saturate(100%);
}
	
.hero-c-box .elementor-heading-title,
.hero-c-box .highlight {
    transition: color 0.3s ease !important;
}

.hero-c-box:hover .elementor-heading-title,
.hero-c-box:hover .highlight {
    color: white !important;
}
	
.hero-c-box::after {
    content: '';
    position: absolute;
    top: var(--position-height);
    right: 36px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--e-global-color-128049b);
    border-radius: 999px;
    transition:
        transform 0.3s ease-in-out,
        background-color 0.8s ease-in-out;
}
	
.hero-c-box:hover::after {
    background-color: var(--e-global-color-accent);
    transform: translate(-50%, -50%) scale(25);
    transition:
        transform 0.5s ease-in-out,
        background-color 0s ease-in-out;
}

	
.hero-c-box .elementor-widget-icon {
    top: calc(var(--position-height) - 18px);
    right: 38px!important;
}

.hero-c-box:hover .elementor-icon{
    transform: translateX(10px);
}

.hero-c-box {
    position: relative;
    overflow: hidden !important;
    transition: transform 0.3s ease;
}
	
.hero-c-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: saturate(20%);
    z-index: 0;
    pointer-events: none;
    transition: filter 0.3s ease;
}
	
.hero-c-box:hover::before {
    filter: saturate(100%);
    transition: filter 0.3s ease;
}
	
.hero-c-box .shutter {
    min-height: var(--position-height);
    transition: min-height 0.3s ease-in-out !important;
}
	
.hero-c-box:hover .shutter {
    min-height:50%;
	transition: min-height 0.3s ease-in-out !important;
}


/* Counter Sign Color */   

.elementor-counter .elementor-counter-number-suffix {
    color: var(--e-global-color-accent);
    font-size: 0.6em;
    line-height: 1em;
}

/* Icon-Box */

.icon-box {
    cursor: default;
}

/* Basiszustand: Alles soll animierbar sein */
.icon-box .elementor-heading-title,
.icon-box .elementor-widget-icon .elementor-icon,
.icon-box .elementor-widget-icon .elementor-icon svg {
    transition: all 0.3s ease;
}

/* Hover: Farben sofort, Rest bleibt animiert */
.icon-box:hover {
    cursor: pointer;
}

.icon-box:hover .elementor-heading-title {
    color: var(--e-global-color-accent) !important;
    transition: none;
}

.icon-box:hover .elementor-widget-icon .elementor-icon {
    border-color: var(--e-global-color-accent) !important;
    transform: var(--button-hover-position) !important;
    transition: transform 0.3s ease !important;
}

.icon-box:hover .elementor-widget-icon .elementor-icon svg {
    fill: var(--e-global-color-accent) !important;
    transition: none;
}

/* Cards */ 

.card:hover .elementor-heading-title {
    color: var(--e-global-color-accent) !important;
    transition: var(--button-transition);
}

.card:hover .elementor-widget-icon:last-of-type .elementor-icon{
    background-color: var(--e-global-color-accent) !important;
    transform: var(--button-hover-position) !important;
    transition: var(--button-transition) !important;
    svg {
        fill: var(--e-global-color-b20ab44) !important;
    }
}

/* Lösungen Slider */

.mod-slider .elementor-swiper, .mod-slider .elementor-slides-wrapper, .mod-slider .swiper-slide {
    height:100%!important;
}


.mod-slider .swiper-slide-inner {
    background: #33434A;
    height: fit-content;
    padding:24px 24px 24px 36px!important;
    position: absolute;
    justify-content:left!important;
    text-align:left!important;
    margin-bottom:0!important;
   .elementor-slide-heading {
    margin:0!important;
    }

}

.mod-slider .elementor-swiper-button {
    position: absolute;
    transform:translateY(0)!important;
    top:unset!important;
    bottom:17.5px;
    padding:2px;
    overflow: hidden;
    opacity:0.6;
    transition: opacity 0.3s ease;
    border-radius:50%;
    background-color:#ffffff10;
}

.mod-slider .fadeInRight{
    animation-name: fadeIn;
}

.mod-slider .elementor-swiper-button:hover {
    opacity:1;
    background-color:var(--e-global-color-accent)!important;
}

.mod-slider .elementor-swiper-button-prev {
    left:calc(100% - 120px)!important;
}

.mod-slider .elementor-swiper-button-next{
    right:24px!important;
}


/* News Loop Grid */   
  
.news-feature, .news-loop {
    position:relative !important;
}

/* Standard-Loop-Items */
.news-loop .e-loop-item {
    grid-column: span 3;
}

@media (max-width:1024px) {
    .news-loop .e-loop-item {
    grid-column: span 4;
    }
}

@media (max-width:767px) {
    .news-loop .e-loop-item {
        grid-column: span 6;
    }
}

.news-feature .e-loop-item img, 
.news-loop .e-loop-item img {
    aspect-ratio: 16/10;
    height:100% !important;
    object-fit: cover;
    object-position: center center;
}

.news-feature .e-loop-item .elementor-heading-title, 
.news-loop .e-loop-item .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-feature .e-loop-item .elementor-widget-theme-post-excerpt,
.news-loop .e-loop-item .elementor-widget-theme-post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .news-feature .e-loop-item::before {
        content: "";
        position: absolute;
        top: 0;
        right: -100px;
        width: 500px;
        height: 100%;
        background-color: var(--e-global-color-accent); 
    }

   .news-button {
        position: absolute !important;
        bottom: 16px;
        right: 0;
    }

}


.mod-image .elementor-widget-image {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #6D8C9C;
    mix-blend-mode: color;
    pointer-events: none;
    transition: background-color 0.5s ease-in-out;
  }

  img {
    filter: contrast(150%);
    transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out !important;
  }

  &:hover {
    &::after {
      background-color: transparent;
    }
    img {
      filter: contrast(100%);
      transform: scale(1.1);
    }
  }
}

.has-post-thumbnail .elementor-widget-image {
  overflow:hidden;
}


.news-feature .has-post-thumbnail .elementor-icon,
.news-loop .has-post-thumbnail .elementor-icon {
        transition: var(--button-transition);
}

.news-feature .has-post-thumbnail:hover,
.news-loop .e-loop-item.has-post-thumbnail:hover {
    box-shadow: var(--box-shadow-default);
    .elementor-icon {
        transform: var(--button-hover-position);
    }
    &:not(:first-of-type) a .elementor-heading-title,
    &:not(:first-of-type) a .elementor-icon{
        color: var(--e-global-color-accent);
        fill: var(--e-global-color-accent);
        border-color: var(--e-global-color-accent);
    }
}

/* Event Element */

.event-list {
    overflow:hidden;
}

.event-list .e-loop-item:hover {
    .elementor-heading-title{
        color: var(--e-global-color-accent)!important;
    }
    .elementor-icon{
        transform: translateX(10px);
        fill: var(--e-global-color-accent)!important;
    }
}
    
.event-list h2 {
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-list .event-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;    
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ansprechpartner */

.mod-icon-btn .elementor-icon:hover{
    box-shadow: var(--box-shadow-default);
    cursor: pointer;
}

.mod-icon-btn a[href=""],
.mod-icon-btn a[href="#"],
.mod-icon-btn a:not([href]) {
  pointer-events: none;
  cursor: default;
    display: none;
  opacity: 0.3;
  filter: grayscale(1);
  transition: none;
}   

/* Auszeichnungen Karussell */

.mod-swiper .swiper-wrapper {
    align-items:center;
}

.mod-swiper .swiper-slide {
    filter: saturate(0);
    background-repeat: no-repeat;
    height: 80%;
    opacity:0.2;
}


.mod-swiper .swiper-slide-next {
    filter: saturate(0.1);
    opacity:0.5;
    height: 90%;
    transition: height 2s ease, filter 2s ease, opacity 2s ease;
}

.mod-swiper .swiper-slide-active {
    filter: saturate(1);
    height:100%;
    transition: height 2s ease, filter 2s ease, opacity 2s ease;
    opacity:1;
}