/*

  page style 03 // Neuheiten 2025

*/

@media screen and (prefers-reduced-motion: reduce) {
  .animate { animation: none !important; }
}
.animate {
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}
.to-left{animation-name: animate-Right;}
.to-right{animation-name: animate-Left;}


@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}
@keyframes animate-LB {
  0% { opacity: 0; transform:translate(50px,-50px); }
  100% { opacity: 1; transform:translate(0,0); }
}
@keyframes animate-RT {
  0% { opacity: 0; transform:translate(-50px,50px); }
  100% { opacity: 1; transform:translate(0,0); }
}

@keyframes animate-Left {
  0% { opacity: 0; transform:translate(-50px,0); }
  100% { opacity: 1; transform:translate(0,0); }
}
@keyframes animate-Right {
  0% { opacity: 0; transform:translate(50px,0); }
  100% { opacity: 1; transform:translate(0,0); }
}

* {word-break: normal;}

:root, html,body{}
@media (min-width:600px){.neg-margin-bottom {margin-bottom: -6em}}


h1{color:hsl(var(--color-dark-frozen-gray)); font-size: clamp(2.5rem,6vw,6rem); line-height: 1em; font-weight: normal; margin-bottom: 0.5em}
h2{color:hsl(var(--color-dark-frozen-gray)); font-size: clamp(2.1rem,4vw,3.75rem); line-height: 1em; font-weight: normal; margin-bottom: 0.5em}
h3{color:hsl(var(--color-black)); font-size: clamp(1.85rem,3vw,2.8rem); line-height: 1.2em; font-weight: normal; margin-bottom: 0.5em}
h4{color:hsl(var(--color-black)); font-size: clamp(1.7rem,2.7vw,2.5rem); line-height: 1.2em; font-weight: normal; margin-bottom: 0.5em}
h5{color:hsl(var(--color-black)); font-size: clamp(1.35rem,2vw,2rem); line-height: 1.2em; font-weight: normal; margin-bottom: 0.5em}

h1 strong em, h1 em strong, h2 strong em, h2 em strong, h3 strong em, h3 em strong, h4 strong em, h4 em strong, h5 strong em, h5 em strong { font-family:'SourceSans','CorporateS', Calibri, Verdana, Geneva, Arial, sans-serif; }



.has-xxxl-font-size { font-size: clamp(3rem, 14vw, 12rem); line-height: 0.85em; }
.has-xxl-font-size { font-size: clamp(2rem, 6vw, 5rem); line-height: 0.85em; }
.has-xl-font-size, .has-larger-font-size{font-size: clamp(1.5rem,3vw,2.25rem); line-height: 1.22em; }
.has-l-font-size, .has-large-font-size{font-size: clamp(1.25rem,2vw,1.6rem); line-height: 1.33em; }
.has-m-font-size, .has-medium-font-size{font-size: clamp(1.1rem,1.5vw,1.25rem); line-height: 1.5em; }


.arrowlink a{display:inline-block; padding-left: 1.5em !important; position: relative; text-decoration: underline; color:hsl(var(--color-dark-frozen-gray)); }
.arrowlink a::after{ color: hsl(var(--color-main)); content: ""; position: absolute; left: 0em; top:50%; width: 0.6em; height: 0.6em; margin-top: -0.4em; transform: rotate(45deg);
    border-right: 0.2em solid currentColor; border-top: 0.2em solid currentColor; -webkit-transition: color 0.3s ease; transition: color 0.3s ease}
.arrowlink a:hover::after{color:hsl(var(--color-link-hover))}


.frame figure, figure.frame {display: inline-block; position:relative;  }
.frame figure::before,.frame figure::after, figure.frame::before, figure.frame::after{ content:''; display: block; /*container-type: inline-size; 1cqw  border:12px solid var(--wp--preset--color--main);*/ width:12%; height:12%; position:absolute; z-index:5;}
.frame figure::before, figure.frame::before{ left:-1%; bottom:-1%; /*border-top:none; border-right:none*/ background: 
  linear-gradient(to top, var(--wp--preset--color--main) 0 20%, transparent 0%) top left / 100% 100% no-repeat,
  linear-gradient(to right, var(--wp--preset--color--main) 0 20%, transparent 0%) top right / 100% 100% no-repeat; }
.frame figure::after, figure.frame::after{ right:-1%; top:-1%; /*border-bottom:none; border-left:none*/ background: 
  linear-gradient(to bottom, var(--wp--preset--color--main) 0 20%, transparent 0%) top left / 100% 100% no-repeat,
  linear-gradient(to left, var(--wp--preset--color--main) 0 20%, transparent 0%) top right / 100% 100% no-repeat; }
/*.frame figure img{ animation-duration: 0.5s; animation-delay: 0.5s; animation-fill-mode: backwards; }*/
.frame figure a, figure.frame a {vertical-align: middle}
.frame.on figure::before, figure.frame.on::before{ animation-duration: 0.5s; animation-name: animate-LB; animation-delay: 0.2s; animation-fill-mode: backwards; }
.frame.on figure::after, figure.frame.on::after{ animation-duration: 0.5s; animation-name: animate-RT; animation-delay: 0.2s; animation-fill-mode: backwards; }
.frame.on img{ animation-duration: 0.5s; animation-name: animate-fade; animation-delay: 0.75s; animation-fill-mode: backwards; }
.frame.js{opacity: 0}
.frame.js.on{opacity: 1}

.gradient { background-color:#9BC7CF; background:linear-gradient(135deg,#9BC7CF 0%,#e3eef0);}
.column-gradient { background-color:#9BC7CF; background:linear-gradient(180deg, transparent 30%, #9BC7CF 30%,#e3eef0);}

.bg-main-column.alignfull { background: transparent; position:relative }
.bg-main-column.alignfull>* { position:relative }
.bg-main-column.alignfull::before {
    content: '';
    left: max(0px,calc(50vw - var(--width-wide)*0.5));
    width: min(100%, var(--width-wide));
    height: 100%;
    position: absolute;
    top: 0;
    background-color: var(--bgvalue);
    z-index: auto;
}
.bg-main-column.wp-block-media-text.alignfull>.wp-block-media-text__content {
    padding-right: max(var(--padding-h), calc(50vw - var(--width-wide) * 0.5 + var(--padding-h)));
}
.wp-block-media-text.bg-main-column {}
.wp-block-columns.has-background.bg-main-column { padding:var(--padding-v) var(--padding-h); column-gap:calc( 2 * var(--padding-h)) }
.wp-block-columns.has-background.bg-main-column .wp-block-column.is-vertically-aligned-bottom.nopaddingbottom { margin-bottom:calc( -1 * var(--padding-v)) }


.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
    position: relative; max-height: none; background: none; color: hsl(var(--colortext)); margin-top: 1em; margin-bottom: 1em; padding: 0; text-align: left;
}


.baseicon:not(.bg){margin-left: -0.2em}
.has-main-color.has-link-color .baseicon:not(.bg){margin: -0.2em}

.align-top>.baseicon{margin-top: -0.6em}

.wp-block-image.fluid img{font-size: clamp(1rem,2vw,2rem)}
.wp-block-image.fluid.w1 img{width:1em;}
.wp-block-image.fluid.w2 img{width:2em;}
.wp-block-image.fluid.w3 img{width:3em;}
.wp-block-image.fluid.w4 img{width:4em;}
.wp-block-image.fluid.w5 img{width:5em;}
.wp-block-image.fluid.w6 img{width:6em;}
.wp-block-image.fluid.w7 img{width:7em;}
.wp-block-image.fluid.w8 img{width:8em;}
.wp-block-image.fluid.w9 img{width:9em;}

@media (min-width: 599px) {
    .column-gradient { background-color:#9BC7CF; background:linear-gradient(90deg, transparent 30%, #9BC7CF 30%,#e3eef0);}
    .column-gradient.reverse { background-color:#9BC7CF; background:linear-gradient(-90deg, transparent 30%, #e3eef0 30%,#9BC7CF);}

    .wp-block-group:has(.wp-block-columns.overlap.reverse){margin-bottom: 6em}
    .wp-block-columns.overlap.reverse h1 {word-wrap: normal; word-break: normal;}
    .wp-block-columns.overlap.reverse { margin-bottom:3em }
    .wp-block-columns.overlap.reverse:not(.break768) .wp-block-column:not(:first-child) {
        margin-right: -16%; position: relative;
    }
    .wp-block-columns.overlap.reverse:not(.break768) .wp-block-column:first-child {
        margin-right: 0;
        margin-bottom: -8em
    }
}


@font-face {
  font-display: swap;
  font-family: 'SourceSans';
  font-style: italic;
  font-weight: 800;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-800italic.woff2') format('woff2');
}


.duration-2s {--duration:2s}
.duration-5s {--duration:5s}
.duration-10s {--duration:10s}
.duration-15s {--duration:15s}
.duration-20s {--duration:20s}
.duration-30s {--duration:30s}
.duration-40s {--duration:40s}
.duration-50s {--duration:50s}

.swing-image img{
    object-position: 0% 50%;
    animation: swingimage var(--duration,5s) linear infinite;
}
@-webkit-keyframes swingimage {
    0% { object-position: 0% 50%; }
    50% { object-position: 100% 50%; }
    100% { object-position: 0% 50%; }
}
@keyframes swingimage {
    0% { object-position: 0% 50%; }
    50% { object-position: 100% 50%; }
    100% { object-position: 0% 50%; }
}

/* cover block scrolling*/
.wp-block-cover.touch-scroll .wp-block-cover__image-background {
  width: auto;
  height: 100% !important;
  max-width: none !important;
}
.wp-block-cover.touch-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wp-block-cover.touch-scroll *:not(a) {pointer-events: none}
.wp-block-cover.touch-scroll .wp-block-cover__background, .wp-block-cover.touch-scroll .wp-block-cover__inner-container{display: none;}
/*kombination scroll swing*/
.wp-block-cover.touch-scroll.swing-image .wp-block-cover__image-background {width: 100%;}
.wp-block-cover.touch-scroll.swing-image.active-scroll .wp-block-cover__image-background {width: auto !important;}
.wp-block-cover.touch-scroll.swing-image.active-scroll::before{content: 'active scrolling'; position: absolute; left: 0; top:0; z-index: 5}



a[rel*=lightbox]{position: relative; display: inline-block;}
a[rel*=lightbox]::after {
    content: '+';
    font-family: sans-serif;
    background-color: hsl(var(--color-main));
    border-radius: 1.4em;
    display: block;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    color: #FFF;
    text-align: center;
    position: absolute;
    right: -0.7em;
    top: -0.7em;
}

.lightbox .lb-image, .lb-dataContainer {
    background-color: #FFF;
   /* outline: 15px solid #FFF;*/
    border-radius: 0;
}
/*.lb_data{color: hsl(var(--color-text));}*/
.lb-data .lb-caption{color:hsl(var(--color-text)); font-weight: initial; font-size: 1rem}
/*

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-200.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-200italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-300italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 500;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-500italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-600italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-700italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-800.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 800;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-800italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 900;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-900.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 900;
  src: url('../webfonts/SourceSans/source-sans-3-v19-latin_latin-ext-900italic.woff2') format('woff2');
}
*/