/* Allgemein */
a, [data-clickurl]                                { cursor: pointer; }
.s.waiting, body.waiting *                        { pointer-events: none; cursor: none !important; }
.s.waiting:before, body.waiting:before            { content:""; position: fixed; z-index: 998; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; background-image: url(../img/icons/spinner.svg); background-size: cover; }
.s.waiting:before                                 { position: absolute; }
body.waiting table,
body.waiting .is-textfield                        { opacity: .8; }
.grecaptcha-badge                                 { pointer-events: none; opacity: 0; }
::selection                                       { background: var(--color-green); color: white; }
::-moz-selection                                  { background: var(--color-green); color: white; }
.bg.green ::selection                             { background: white; color: var(--color-green); }
.bg.green ::-moz-selection                        { background: white; color: var(--color-green); }
.t-1000 .fa,
.t-1000 .fas                                      { opacity: 1; }
span.star                                         { font-size: .8em; }
* + .audioplayer                                  { margin-top: 1em; }
p:empty                                           { display: none; }
.small *,
.small                                            { font-size: .8em; }

/* Links */
.link.tel,.link.fax,.link.mailto                  { color: var(--color-black); }
.link.tel:hover,.link.fax:hover,.link.mailto:hover { text-decoration: none !important; color: var(--color-green); }
.t-1000 .link.tel:before                          { margin-right: 10px; content:"\f095"; font-family: 'FA6'; font-weight: 900; }
.t-1000 .link.fax:before                          { margin-right: 10px; content:"\f1ac"; font-family: 'FA6'; font-weight: 900; }
.t-1000 .link.mailto:before                       { margin-right: 10px; content:"\f0e0"; font-family: 'FA6'; font-weight: 900; }

/* Buttons */
.btn                                              { overflow: hidden; }
.btn.primary:has(.fas) span:after, .btn.secondary:has(.fas) span:after,
.btn.primary[href$=".zip"] span:after, .btn.secondary[href$=".zip"] span:after,
.btn.primary[href$=".pdf"] span:after, .btn.secondary[href$=".pdf"] span:after, .btn.three[href$=".zip"]:after, .btn.three[href$=".pdf"]:after, .btn.three.audio:after, .btn.four[href$=".pdf"]:after,
.btn.primary.mailto span:after, .btn.secondary.mailto span:after { content: none !important; }
.btn.primary.mailto > span:before,
.btn.secondary.mailto > span:before         { margin-right: 5px; content:"\f0e0"; font-family: 'FA6'; font-weight: 900; }
.btn.primary[href$=".zip"] > span:before,
.btn.secondary[href$=".zip"] > span:before,
.btn.primary[href$=".pdf"] > span:before,
.btn.secondary[href$=".pdf"] > span:before,
.btn.three[href$=".zip"]:before,
.btn.three[href$=".pdf"]:before,
.btn.four[href$=".pdf"]:before  { margin-right: 10px; content:"\f0ed"; font-family: 'FA6'; font-weight: 900; }
.btn.three.audio:before  { margin-right: 10px; content:"\f6a8"; font-family: 'FA6'; font-weight: 900; }
.btn .fas { margin-right: 10px; }
.bg.green .btn.four { color: white; }

/* Buttons mit Flagge */
.btn.has-flag.secondary span,
.btn.has-flag.primary span                        { padding-left: 60px; }                              
.btn.has-flag.secondary .flag,
.btn.has-flag.primary .flag                       { position: absolute; margin-left: -40px; }

.btn.three.has-flag:before,
.btn.four.has-flag:before                         { content: none; }
.btn.three.has-flag .flag,
.btn.four.has-flag .flag                          { margin-right: 10px; }
.btn.three.has-flag:after,
.btn.four.has-flag:after                         { margin-left: 10px; content:"\f105"; font-family: 'FA6'; font-weight: 900; }

/* Listen */
.is-textfield ul                                  { list-style: none; padding-left: 1em; }
.is-textfield ul li:before                        { content:""; position: absolute; width: .5em; height: 3px; background-color: var(--color-green); margin: .6em 0 0 -1em; }
.is-textfield.bg.green ul li:before,
.is-textfield .bg.green ul li:before              { background-color: white; }
.is-textfield li + li                             { margin-top: .8em; }
.is-textfield ol                                  { padding-left: 1em; }
ul.tagcloud                                       { display: flex; list-style: none; padding-left: 0; gap: 15px; }
ul.tagcloud li                                    { background-color: var(--color-lightgrey); border-radius: 10px; line-height: 1; padding: 5px 15px; }
.bg ul.tagcloud li                                { background-color: white; }

/* Links zu E-Mailadressen etc. */
a[href^="mailto:"].link,
a[href^="tel:"].link                              { text-decoration: none; }
a[href^="mailto:"].link:hover,
a[href^="tel:"].link:hover                        { text-decoration: underline; }
a.link.supersize                                  { font-size: 2.4em; font-weight: 600; }
a.link.supersize:before                           { font-size: .9em; }

/* Shapes */
@media only screen and (max-width: 1049px) {
.line-left-xs                                     { position: relative; }
.line-left-xs:before                              { content:""; position: absolute; background-color: var(--color-green); left: 0; top: 50px; bottom: 50px; width: 8px; z-index: 1; pointer-events: none; clip-path: polygon(0% 0%, 100% 8px, 100% calc(100% - 8px), 0% 100%); }
}
@media only screen and (min-width: 1050px) {
.bg.greyshape-sm:before                           { content:""; position: absolute; background-color: var(--color-lightgrey); left: 50%; top: 50%; height: 50%; width: 50%; transform: translate(-50%,-50%); z-index: -1; pointer-events: none; }
.line-left-sm                                     { position: relative; }
.line-left-sm:before                              { content:""; position: absolute; background-color: var(--color-green); left: 0; top: 50px; bottom: 50px; width: 20px; z-index: 1; pointer-events: none; clip-path: polygon(0% 0%, 100% 20px, 100% calc(100% - 20px), 0% 100%); }
.bg.green.line-left-sm:before                     { background-color: white;}
}

/* Corner */
@media only screen and (max-width: 1049px) {
.corner-right-bottom-xs                           { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%); }
}
@media only screen and (min-width: 1050px) {
.corner-right-top-sm                              { clip-path: polygon(0% 0%, calc(100% - 40px) 0%, 100% 40px, 100% 100%, 0% 100%); }
.corner-right-bottom-sm                           { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0% 100%); }
.corner-left-top-sm                               { clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 40px); }
.corner-left-top-right-bottom-sm                  { clip-path: polygon(40px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0% 100%, 0% 40px); }
.corner-left-bottom-sm                            { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40px 100%, 0% calc(100% - 40px)); }
}

/* Treppeneffekte bei Sektionen */
@media only screen and (min-width: 1050px) {
.s.bg-image-sm + .s.bg.grey:before                { content:""; position: absolute; top: -40px; left: 0; background-color: var(--color-lightgrey); width: 30vw; height: 41px; clip-path: polygon(0% 0%, calc(100% - 40px) 0%, 100% 100%, 0% 100%); }
.s.no-bg + .s.bg.grey:before                      { content:""; position: absolute; top: -1px; left: 0; background-color: white; width: 30vw; height: 41px; clip-path: polygon(0% 0%, 100% 0%, calc(100% - 40px) 100%, 0% 100%); }
.s.no-bg[data-layout*="r-text-image"] + .s.bg.grey[data-layout^="r-text-image"]:before ,
#footer:before                                    { width: 70vw; }
}
@media only screen and (max-width: 1049px) {
.square-image-xs .bgimage:after                   { content:""; position: absolute; right: 0; bottom: -1px; width: 50%; height: 40px; background-color: white; clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%); }
.bg.grey .square-image-xs .bgimage:after          { background-color: var(--color-grey); }
}

/* Kein horizontaler Scrollbalken, wenn ScrollSmoother aus ist (eingeloggt, ?disable-scrollsmoother):
   vw-Breiten der Seperatoren und negative Margins von .r in .container-full ragen sonst raus.
   clip statt hidden, damit position: sticky weiter funktioniert.
   !important, weil ScrollSmoother inline overflow: visible setzt (sonst 4.367px Breite durch den efoy-Referenz-Slider). */
#smooth-content                                   { overflow-x: clip !important; }

/* Seperator */
@media only screen and (min-width: 1050px) {

/* weiss zu weiss */
.s.no-bg + .seperator + .s.no-bg                  { position: relative; border-top: 100px transparent solid; }
.s.no-bg + .seperator + .s.no-bg:before           { content:""; position: absolute; top: -100px; left: 0; width: 25vw; height: 50px; background-color: var(--color-green); clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 100%, 0% 100%);  }
.s.no-bg + .seperator + .s.no-bg:after            { content:""; position: absolute; top: -50px; left: 25vw; width: 75vw; height: 50px; background-color: var(--color-lightgrey); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50px 100%); }

/* grau zu weiss */
.s.bg.grey + .seperator + .s.no-bg                { position: relative; border-top: 50px white solid; }
.s.bg.grey + .seperator + .s.no-bg:before         { content:""; position: absolute; top: -50px; left: 0; width: 25vw; height: 50px; background-color: var(--color-green); clip-path: polygon(0% 0%, 100% 0%, calc(100% - 50px) 100%, 0% 100%);  }

/* grau zu grau */
.s.bg.grey + .seperator + .s.bg.grey              { position: relative; border-top: 100px transparent solid; }
.s.bg.grey + .seperator + .s.bg.grey:before       { content:""; position: absolute; top: -100px; left: 0; width: 75vw; height: 50px; background-color: white; clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 100%, 0% 100%);  }
.s.bg.grey + .seperator + .s.bg.grey:after        { content:""; position: absolute; top: -50px; left: 75vw; width: 25vw; height: 50px; background-color: white; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50px 100%); }

}
@media only screen and (max-width: 1049px) {
/* weiss zu weiss */
.s.no-bg + .seperator + .s.no-bg                  { position: relative; border-top: 100px transparent solid; }
.s.no-bg + .seperator + .s.no-bg:before           { content:""; position: absolute; top: -100px; left: 0; width: 25vw; height: 50px; background-color: var(--color-green); clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 100%, 0% 100%);  }
.s.no-bg + .seperator + .s.no-bg:after            { content:""; position: absolute; top: -50px; left: 25vw; width: 75vw; height: 50px; background-color: var(--color-lightgrey); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50px 100%); }

/* grau zu weiss */
.s.bg.grey + .seperator + .s.no-bg                { position: relative; border-top: 50px white solid; }
.s.bg.grey + .seperator + .s.no-bg:before         { content:""; position: absolute; top: -50px; left: 0; width: 25vw; height: 50px; background-color: var(--color-green); clip-path: polygon(0% 0%, 100% 0%, calc(100% - 50px) 100%, 0% 100%);  }

/* grau zu grau */
.s.bg.grey + .seperator + .s.bg.grey              { position: relative; border-top: 100px transparent solid; }
.s.bg.grey + .seperator + .s.bg.grey:before       { content:""; position: absolute; top: -100px; left: 0; width: 75vw; height: 50px; background-color: white; clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 100%, 0% 100%);  }
.s.bg.grey + .seperator + .s.bg.grey:after        { content:""; position: absolute; top: -50px; left: 75vw; width: 25vw; height: 50px; background-color: white; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50px 100%); }

}

/* Spacer */
@media only screen and (max-width: 1049px) {
.spacer.mobile-sm                                 { height: 30px; }
.spacer.mobile-md                                 { height: 60px; }
.spacer.mobile-lg                                 { height: 90px; }
}
@media only screen and (min-width: 1050px) {
.spacer.desktop-sm                                { height: 30px; }
.spacer.desktop-md                                { height: 60px; }
.spacer.desktop-lg                                { height: 90px; }
}

/* Nur Bild */
.container-full .r-image .is-image > .c           { padding: 0; }
.container-wide .r-image .is-image > .c           { overflow: hidden; }
.container-wide .r-image .is-image img,
.container .r-image .is-image img                 { width: 100%; height: auto; object-fit: cover; transform-origin: center; }
@media only screen and (max-width: 1049px) {
.container-full .r-image .is-image .c.relative,
.container-wide .r-image .is-image .c.relative             { padding: 0; }
.container .r-image .is-image .is-landscape img   { aspect-ratio: 4 / 3;}
.container .r-image .is-image.dont-crop-mobile .is-landscape img { aspect-ratio: auto; }
}
@media only screen and (min-width: 1050px) {
.r-image .c.relative                              { padding: 0; }
.r-image .is-pic img                              { max-height: 85vh; object-fit: cover; object-position: center center; }
.crop-image .is-pic img 			              { aspect-ratio: 16 / 8; object-fit: cover; }
}

/* Shortcode über Bild */
.is-pic.has-shortcode-link              { position: relative; }
.is-pic.has-shortcode-link .shortcode   { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

/* Schatten für weiße Textboxen auf Sektion mit Hitnergrundbild, welche verschoben ist */
@media only screen and (min-width: 1050px) {
.s.bg-image-sm-offset-left-10 .r-3columns.no-gap-sm,
.s.bg-image-sm-offset-left-20 .r-3columns.no-gap-sm,
.s.bg-image-sm-offset-right-10 .r-3columns.no-gap-sm,
.s.bg-image-sm-offset-right-20 .r-3columns.no-gap-sm { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.05)); }
}

/* Sektion mit Hintergrundbild */
.s.bg-image- { position: relative; }
@media only screen and (min-width: 1050px) {
.s.bg-image-sm.has-min-height-sm                  { display: flex; align-items: center; } 
.s.bg-image-sm.has-min-height-sm .bgimage img     { object-position: center center; }
}

/* Flybox in Nur Bild */
@media only screen and (max-width: 1049px) {
.s.no-bg .r-image .flybox.white                   { background-color: var(--color-lightgrey); margin-left: 20px; margin-right: 20px; transform: translateY(-30px); }
.flybox h2, .flybox .likeh2                       { font-size: 1.6em; }
}
@media only screen and (min-width: 1050px) {
.s .r-image .flybox.second.absolute-left-top-sm,
.s .r-image .flybox.second.absolute-left-top-gap-sm { transform: translate(110%,30%); }
.s .r-image .flybox.second.absolute-left-bottom-sm,
.s .r-image .flybox.second.absolute-left-bottom-gap-sm { transform: translate(110%,-130%); }
.s .r-image .flybox.second.absolute-right-top-sm,
.s .r-image .flybox.second.absolute-right-top-gap-sm { transform: translate(-110%,30%); }
.s .r-image .flybox.second.absolute-right-bottom-sm,
.s .r-image .flybox.second.absolute-right-bottom-gap-sm { transform: translate(-110%,-130%); }
}

/* Textfelder, die NUR eine Headline haben */
.container.has-only-headline .r-100 .is-textfield .c { padding-bottom: 0; }    
.container[data-layout="1column"].has-only-headline + .container         { margin-top: 0; }

/* Bild-Text-Kombinationen */
.is-image img                                     { margin: 0 auto; display: block; }
@media only screen and (max-width: 1049px) {
.is-image img                                     { max-height: 50vh; }
.is-image .is-square img                          { max-width: 60vw; aspect-ratio: 1 / 1; margin-left: 0; }
.is-image > .c                                    { padding-bottom: 0; }
.r-image-to-the-edge .is-image .c                 { padding-left: 0; padding-right: 0; }
}
@media only screen and (min-width: 1400px) {
.r-image-to-the-edge .is-image .c                           { padding-right: 0; }
.r-image-to-the-edge .is-image .c                           { margin-right: calc((1280px - 100vw) / 2); }
.r-image-to-the-edge.r-image-to-the-edge-outer .is-image .c { margin-right: calc((1280px - 100vw) / 2 - 200px); }
.reverse-sm.r-image-to-the-edge .is-image .c                           { padding-right: 30px; padding-left: 0; }
.reverse-sm.r-image-to-the-edge .is-image .c                           { margin-right: 0; margin-left: calc((1280px - 100vw) / 2); }
.reverse-sm.r-image-to-the-edge.r-image-to-the-edge-outer .is-image .c { margin-right: 0; margin-left: calc((1280px - 100vw) / 2 - 200px); }
}

/* Zwei oder Drei Spalten gleiche Höhe */
@media only screen and (min-width: 1050px) { 
.col-same-height-sm .col .c { height: 100%; }
}

/* Drei Spalten ohne Gap */
@media only screen and (min-width: 1050px) { 
.no-gap-sm .col-sm-4 .c { height: 100%; } /* gleiche Höhe wenn kein Gap */
}

/* Textfelder */
.container[data-layout="1column"] + .container[data-layout="1column"] { margin-top: 0; }
@media only screen and (min-width: 1050px) { 
.r-1column .is-textfield.textright-sm p                     { max-width: 700px; margin-left: auto; }
}

/* Container Abstände */
.container + .container-gap,
.container-gap + .container                                 { margin-top: 30px; }
@media only screen and (min-width: 1050px) {
.container[data-layout="image_text"] + .container[data-layout="image_text"],
.container[data-layout="faqs"] + .container,
.container[data-layout="1column"] + .container              { margin-top: 30px; }
.container[data-layout="1column"] + .container[data-layout="columnslider"],
.container[data-layout="1column"] + .container[data-layout="table"] { margin-top: 0; }
.container:has(.has-box) + .container:has(.has-box)        { margin-top: var(--gutter-width, 1rem); } /* aufeinanderfolgende Box-Reihen (z.B. 2columns + 3columns mit box_bg) */
}

/* Header allgemein */
body.header-scrollhide #header { opacity: 0; pointer-events: none; }

/* MARK: mn mobile */
@media only screen and (max-width: 1049px) {  

    /* Hamburger Icon */
    #mno { display: inline-block; position: fixed; right: 30px; top: 30px; z-index: 15001; width: 46px; height: 40px; cursor: pointer; }
    #mno span { display: block; width: 100%; border-radius: 3px; height: 4px; background: #444; transition: all .3s; position: relative; margin-top: 7px; }      
    #mno.active span:nth-child(1) { animation: ease .7s ani-mno-top forwards; } 
    #mno.not-active span:nth-child(1) { animation: ease .7s ani-mno-top-2 forwards; } 
    #mno.active span:nth-child(2) { animation: ease .7s ani-mno-scaled forwards; } 
    #mno.not-active span:nth-child(2) { animation: ease .7s ani-mno-scaled-2 forwards; } 
    #mno.active span:nth-child(3) { animation: ease .7s ani-mno-bottom forwards; } 
    #mno.not-active span:nth-child(3) { animation: ease .7s ani-mno-bottom-2 forwards; }      
    @keyframes ani-mno-top { 0% { top: 0; transform: rotate(0); } 50% { top: 8px; transform: rotate(0); } 100% { top: 7px; transform: rotate(45deg); } }      
    @keyframes ani-mno-top-2 { 0% { top: 20px; transform: rotate(45deg); } 50% { top: 20px; transform: rotate(0deg); } 100% { top: 0; transform: rotate(0deg); } }      
    @keyframes ani-mno-bottom { 0% { bottom: 0; transform: rotate(0); } 50% { bottom: 16px; transform: rotate(0); } 100% { bottom: 16px; transform: rotate(135deg); } }      
    @keyframes ani-mno-bottom-2 { 0% { bottom: 25px; transform: rotate(135deg); } 50% { bottom: 25px; transform: rotate(0); } 100% { bottom: 0; transform: rotate(0); } }      
    @keyframes ani-mno-scaled { 50% { transform: scale(0); } 100% { transform: scale(0); } }      
    @keyframes ani-mno-scaled-2 { 0% { transform: scale(0); } 50% { transform: scale(0); } 100% { transform: scale(1); } }

    body #has-mn .c { padding-left: 0; }
    body.mn-open #header { background-color: white; }
    body.mn-open #has-mn { overflow: auto; display: block; opacity: 1; top: 90px; height: calc(100% - 90px); width: 100vw; padding: 0; margin: 0; position: fixed; left: 0; z-index: 15000; background-color: white; }

    #mn a { color: var(--color-black); }
    #mn li { font-size: 20px; font-weight: 600; padding-left: 30px; position: relative; }
    #mn li .pfeil { position: absolute; right: 0; top: 0; cursor: pointer; }
    #mn li.open { position: relative; }
    #mn li.open:before { content:""; position: absolute; left: 0; top: 15px; height: 100%; width: 10px; background-color: var(--color-green); clip-path: polygon(0% 0%, 100% 20px, 100% calc(100% - 20px), 0% 100%); }

    #mn li + li { margin-top: 25px; }
    #mn .meta { display: none; }
    #mn .sub-menu { margin: 20px 0 60px 0; display: none; }
    #mn .open .sub-menu { display: block; }
    #mn .sub-menu li { font-size: 18px; font-weight: 400; padding-left: 20px; }
    #mn .sub-menu li a:after { content: none; }
    #mn .sub-menu li + li { margin-top: 10px; }
    #mn .sub-menu .current-menu-item > a { color: var(--color-green); }
    #mn li .descr { display: none; }

    /* Menüitem mit Pic */
    #mn li.has-pic                  { padding-left: 0; padding-right: 0; }
    #mn li.has-pic > a              { display: flex !important; align-items: center; }
    #mn li.has-pic span.is-menu-pic { min-width: 10vw; max-width: 20vw; margin-right: 20px; }
    #mn li.has-pic span.is-menu-pic img { max-width: 100%; height: auto; }
    
    /* Menüitem mit Pic, aber nicht mobil */
    #mn li.has-pic.no-pic-xs                  { padding-left: 20px; }
    #mn li.has-pic.no-pic-xs span.is-menu-pic { display: none; }

    /* Mega Menü für Handys */
    #mn .mega-sm > .sub-menu             { margin-top: 30px; }
    #mn .mega-sm .sub-menu .sub-menu     { margin-top: 0; margin-left: 0; }
    #mn .mega-sm .sub-menu a             { color: var(--color-green); font-weight: 600; display: block; margin-bottom: 25px; padding-left: 10px; }
    
    #mn .mega-sm .sub-menu li.new-section > a:before,
    #mn .mega-sm .sub-menu a:before      { content:""; position: absolute; margin-left: -10px; background-color: var(--color-green); width: 3px; height: 28px; }
    #mn .mega-sm .sub-menu li.new-section > a,
    #mn .mega-sm .sub-menu .sub-menu a   { color: var(--color-black); padding: 0; margin: 0; }
    #mn .mega-sm .sub-menu .sub-menu a:before { content: none; }

    #mn .mega-sm li.new-section         { margin-top: 50px; }
    #mn .mega-sm li.new-section > a     { color: var(--color-green) !important; transform: translateX(-10px); }
      
}

/* MARK: mn desktop */
@media only screen and (min-width: 1050px) {
    /* Hauptmenü */
    body:after                                        { opacity: 0; content:""; pointer-events: none; display: block; position: fixed; z-index: 980; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.25); transition: opacity .5s; }
    body.mn-hover:after                               { opacity: 1; pointer-events: auto; }
    body.mn-hover .s                                  { pointer-events: none; }
    .mnmenu li:hover .sub-menu 						  { opacity: 1; pointer-events: auto !important; }
    .header-scrollhide .mnmenu li:hover .sub-menu     { pointer-events: none !important; }
    .mnmenu li.disturb-mega-menu:hover .sub-menu      { opacity: 0 !important; pointer-events: none !important; }
    .mnmenu a .meta                                   { display: block; font-weight: 400; margin-top: 3px; }
    .mnmenu .sub-menu                                 { text-align: left; }
    .mnmenu .sub-menu li                              { padding: 0 40px; }
    .mnmenu .sub-menu li:first-child                  { border-top: var(--color-lightgrey) 1px solid; margin-top: 36px; padding-top: 30px; }
    .mnmenu .mega-sm .sub-menu li:first-child         { margin-top: 0; }
    .mnmenu .sub-menu li:last-child                   { padding-bottom: 30px; }
    .mnmenu .sub-menu a                               { font-size: 16px; display: block; padding: 10px 0; }
    .mnmenu .sub-menu .current-menu-item > a,
    .mnmenu .sub-menu a:hover                         { color: var(--color-green); }
    /*.mnmenu .sub-menu a:after                         { content:"\f105"; font-family: "FA6"; font-weight: 900; font-size: 14px; padding-left: 7px; transition: padding-left 0.3s; }*/
    /*.mnmenu .sub-menu a[target="_blank"]:after        { content:"\f08e"; }*/
    .mnmenu .descr                                    { display: none; }

    /* Hauptmenü Mega Grid */    
    .mnmenu .mega-sm > .sub-menu 					     { left: 50%; transform: translateX(-50%); }
    .mnmenu .mega-sm > .sub-menu                         { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 75vw; min-width: 1000px; max-width: 1320px; padding: 36px 0 0 0; text-align: left; overflow-y: auto; max-height: 80vh; }
    .mnmenu .mega-sm .sub-menu .sub-menu li + li.new-section { margin-top: 25px; }
    .mnmenu .mega-sm > .sub-menu li.new-section > a,
    .mnmenu .mega-sm > .sub-menu > li > a                { color: var(--color-green); display: block; padding-left: .6em; margin-bottom: 10px; }
    .mnmenu .mega-sm > .sub-menu li.new-section > a:after,
    .mnmenu .mega-sm > .sub-menu > li > a:after          { content: none; }
    .mnmenu .mega-sm > .sub-menu li.new-section > a:before,
    .mnmenu .mega-sm > .sub-menu > li > a:before         { content:""; display: block; position: absolute; margin-left: -.5em; width: .15em; min-width: 3px; height: 1em; background-color: var(--color-green); transform: all .3s; }
    .mnmenu .mega-sm li.new-section > a:hover:before,
    .mnmenu .mega-sm > .sub-menu > li > a:hover:before   { height: 1.2em; margin-top: -.1em; }
    .mnmenu .mega-sm .sub-menu a                         { font-size: 18px; }
    .mnmenu .mega-sm .sub-menu .sub-menu a               { padding: 5px 0; font-size: 16px; }
    .mnmenu .mega-sm .sub-menu .sub-menu a:hover         { color: var(--color-green); }
    /*.mnmenu .mega-sm .sub-menu .sub-menu a:after         { content:"\f105"; font-family: "FA6"; font-weight: 900; font-size: 14px; padding-left: 7px; transition: padding-left 0.3s; }*/
    .mnmenu .mega-sm .sub-menu .sub-menu li.has-description > a:after,
    .mnmenu .mega-sm .sub-menu .sub-menu li.has-pic .is-pic a:after { content: none; }
    /* .mnmenu .mega-sm .sub-menu .sub-menu li:hover > a:after { padding-left: 12px; } */
    .mnmenu .mega-sm .sub-menu li                        { padding: 40px; border-top: var(--color-lightgrey) 1px solid; }
    .mnmenu .mega-sm .sub-menu .sub-menu li              { padding: 0; border-top: none; }
    .mnmenu .mega-sm .sub-menu li + li                   { border-left: var(--color-lightgrey) 1px solid; }
    .mnmenu .mega-sm .sub-menu .sub-menu li + li         { border-left: none; margin-top: 5px; }
    .mnmenu .mega-sm .sub-menu .sub-menu li + li.has-pic { margin-top: 20px; }
    .mnmenu .mega-sm li.has-pic > .is-pic                { max-width: 60%; }
    .mnmenu .mega-sm.sfc-service-grid li.has-pic > .is-pic { max-width: 90%; }
    .mnmenu .mega-sm li.has-pic > .is-pic img            { width: auto; height: auto; max-height: 160px; }
    .mnmenu .mega-sm li.has-pic > .is-pic:hover + a      { color: var(--color-green); }

    /* Hauptmenü News & Events */
    .sub-menu-box-item                                { margin-top: 25px; }
    .sub-menu-box-item p                              { font-size: 16px; line-height: 1.4; }
    .sub-menu-box-item p + p                          { margin-top: 0; }
    .sub-menu-box-item:hover b                        { color: var(--color-green); }
    .sub-menu-box-item:hover .color-green             { color: var(--color-black); }

    /* Hauptmenü Grid Areas Default */
    .mnmenu .grid-item-area .grid-item-area-eins      { grid-area: eins; }
    .mnmenu .grid-item-area .grid-item-area-zwei      { grid-area: zwei; }
    .mnmenu .grid-item-area .grid-item-area-drei      { grid-area: drei; }
    .mnmenu .grid-item-area .grid-item-area-vier      { grid-area: vier; }
    .mnmenu .grid-item-area .grid-item-area-fuenf     { grid-area: fuenf; }

    /* sfc.com "Investoren" */
    .sid-10 .mnmenu .grid-item-area.sfc-investoren-grid > .sub-menu {
        grid-template-areas: 
        "eins eins zwei drei"
        "vier vier zwei drei" ;
    }
    .sid-10 .mnmenu .grid-item-area.sfc-investoren-grid .grid-item-area-vier .menu-item > a {
        -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -moz-hyphenate-limit-before: 8; -webkit-hyphenate-limit-before: 8; -webkit-hyphenate-limit-after: 8; -ms-hyphenate-limit-chars: 15 8 8; hyphenate-limit-chars: 15 8 8;
    }
    
    /* sfc.com "Produkte" */
    .sid-10 .mnmenu .grid-item-area .grid-item-area-eins-darunter { grid-area: einsdarunter; }
    .sid-10 .mnmenu .grid-item-area.sfc-produkte-grid > .sub-menu {
        grid-template-areas:
        "eins         eins         zwei drei"
        "einsdarunter einsdarunter zwei drei"
        "einsdarunter einsdarunter vier vier" ;
        grid-template-rows: max-content max-content max-content;
    }
    /* Energy Solutions + Power Management als ein Bereich: keine Trennlinie, kein doppeltes Padding dazwischen */
    .sid-10 .mnmenu .grid-item-area.sfc-produkte-grid > .sub-menu > li.grid-item-area-eins          { padding-bottom: 0; }
    .sid-10 .mnmenu .grid-item-area.sfc-produkte-grid > .sub-menu > li.grid-item-area-eins-darunter { border-top: none; padding-top: 0; }

    /* sfc-energy.in "Produkte" */
    .sid-11 .mnmenu .grid-item-area.sfc-produkte-grid > .sub-menu {
        grid-template-areas: "eins eins zwei";
    }

    /* efoy.com "Produkte" */
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid > .sub-menu {
        grid-template-areas: 
        "eins zwei drei"
        "eins zwei vier";
        grid-template-areas: 
        "eins zwei drei"
        "eins zwei vier";
    }
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-zwei .sub-menu,
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-eins .sub-menu  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-wrap: wrap; }    
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-zwei li,
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-eins li         { margin-top: 5px; }
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-zwei li.has-pic,
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-eins li.has-pic { margin: 0; }
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-zwei li.has-pic + li:not(.has-pic),
    .sid-12 .mnmenu .grid-item-area.sfc-produkte-grid .grid-item-area-eins li.has-pic + li:not(.has-pic) { margin-top: 20px; }

    /* efoy.com "Service" */
    .sid-12 .mnmenu .mega-sm.grid-item-area.sfc-service-grid > .sub-menu,
    .sid-12 .mnmenu .grid-item-area.sfc-service-grid.mega-sm > .sub-menu { min-width: 500px; max-width: 600px; }
    .sid-12 .mnmenu .grid-item-area.sfc-service-grid > .sub-menu {
        grid-template-areas: 
        "eins zwei";
    }

    /* efoy.com "Applications" Highlight Referenzen */
    .sid-12 .mnmenu .highlight.has-pic > .is-pic { max-width: 200px; }

    /* Hauptmenü Col nebeneinander */
    .mnmenu .mega-sm .col-nebeneinander > .sub-menu { display: grid; column-gap: 10px; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .mnmenu .mega-sm .col-nebeneinander > .sub-menu .menu-item + .menu-item { margin: 0; }
    .mnmenu .mega-sm .col-nebeneinander > .sub-menu .menu-item.has-pic > .is-pic { max-width: 100%; }

    /* Two Column Links (z.B. bei SFC Produkte "Weitere Lösungen") */
    .mnmenu .two-column-links > a                     { margin-bottom: 10px !important; }
    .mnmenu .two-column-links .sub-menu               { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
    .mnmenu .two-column-links .sub-menu li + li       { margin: 0 !important; }
    .mnmenu .two-column-links .sub-menu li a          { font-weight: inherit; font-size: 14px; padding: 0; }

    /* Footermenü */
    #footer .menu li + li                             { margin-top: .5em; }
    #footer .menu a                                   { color: var(--color-black); font-weight: 600; }
    #footer .menu a:hover                             { color: var(--color-green); }

}

@media only screen and (min-width: 1400px) {

    .mnmenu .descr                                    { display: block; font-size: 14px; font-weight: 400; margin-top: 5px; line-height: 1.3; color: #555; }

    /* SFC "Produkte" */
    .sid-10 .mnmenu .grid-item-area.sfc-produkte-grid > .sub-menu {
        grid-template-areas:
        "eins         eins         zwei drei"
        "einsdarunter einsdarunter zwei drei"
        "einsdarunter einsdarunter vier vier" ;
        grid-template-rows: max-content max-content max-content;
    }

}
#mn li.ai-icon                          { position: relative; }
#mn li.ai-icon:not(.current-menu-item)  { margin-right: .5rem; }
#mn li.ai-icon > a:before               { position: absolute; right: 0; top: 0; content:""; display: block; width: 20px; height: 20px; background-image: url('/theme/img/icons/ai.svg'); background-size: cover; } 

/* Headlines mit Strich */
@media only screen and (max-width: 1049px) {

}
@media only screen and (min-width: 1050px) {
.has-line { position: relative; }
.r-1column .textleft-sm .has-line:before, .r-2columns .textleft-sm .has-line:before, .r-3columns .textleft-sm .has-line:before, .r-text-image .textleft-sm .has-line:before, .r-faqs .has-line:before { content:""; position: absolute; left: -20px; top: 0; height: 100%; width: 4px; background-color: var(--color-green); }
h1.has-line:before,.likeh1.has-line:before { width: 5px; }
.s.bg.image .c.box.bg .has-line:before,
.is-headline.has-line.has-icon-shortcode:before { content: none !important; }
}

/* Forced Aspect Ratio bei Bildern */
.is-pic.aspect-ratio-169 img             { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.is-pic.aspect-ratio-43 img              { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.is-pic.aspect-ratio-32 img              { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
.is-pic.aspect-ratio-11 img              { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
.is-pic.aspect-ratio-34 img              { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }

/* Big Play Button */
.big-play-button                        { display: inline-block; z-index: 500; cursor: pointer; width: 8vw; height: 8vw; min-width: 100px; min-height: 100px; background: white; background: radial-gradient(at center center, white, white 60%, rgba(255,255,255,.3) 62%, rgba(255,255,255,.3)); border-radius: 100%; }
.big-play-button:hover                  { background: var(--color-green); background: radial-gradient(at center center, var(--color-green), var(--color-green) 60%, rgba(255,255,255,.3) 62%, rgba(255,255,255,.3)); }
.big-play-button .fas                   { color: var(--color-green); font-size: 2em; margin-left: 4px; }
.big-play-button:hover .fas             { color: white; }
@media only screen and (orientation: landscape) {
.swiper-columnslider .big-play-button,
.col-sm-4 .big-play-button              { width: 100px; height: 100px; }
}

/* Social Links */
a.social + a.social                     { margin-left: 5px; }
a.social                                { display: inline-block; width: 44px; height: 44px; line-height: 50px; text-align: center; background-color: var(--color-green); border-radius: 100%; }
a.social img                            { width: auto; max-height: 22px; }

/* Linkbox (z.B. für News oder Eventsteaser) */
* + .linkbox                            { margin-top: 30px; }
.s.no-bg .linkbox.white .c,
.no-bg .linkbox .c                      { background-color: var(--color-lightgrey); }
.bg .linkbox .c                         { background-color: white; }
.linkbox.no-bg .c                       { background-color: transparent; }
.linkbox.bg.green .c                    { background-color: var(--color-green); }
.linkbox + .linkbox                     { margin-top: 10px; } 
.linkbox.is-longlist + .linkbox         { margin-top: 30px; }
.linkbox a                              { text-decoration: none; }
.linkbox:hover b,
.linkbox .title a                       { color: var(--color-black); }
.linkbox b,
.linkbox:hover .title a                 { color: var(--color-green); }
.linkbox.bg.green .title a,
.linkbox.bg.green h2,
.linkbox.bg.green h3,
.linkbox.bg.green b,
.linkbox.bg.green p                     { color: white; }
.s.no-bg .linkbox.is-longlist + .linkbox.is-longlist { border-top: 3px solid var(--color-lightgrey); margin-top: 40px; padding-top: 40px; }
.linkbox * + p { margin-top: 0.5em; }

@media only screen and (min-width: 1050px) {
.linkbox.has-pic .is-pic                { padding-right: 0; }
.linkbox.has-pic .is-pic img            { width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: center center; }
.linkbox.has-pic .is-text               { padding-left: 0; }
.linkbox.has-pic .is-text .c            { height: 100%; }
.s.no-bg .linkbox.is-news               { transition: transform .3s;}
.s.no-bg .linkbox.is-news:hover         { transform: scale(1.03); }
/* Eventsteaser mit Logo: Logo vollständig zeigen (contain), Bildspalte füllt die
   ganze Boxhöhe weiß aus, Logo darin vertikal+horizontal zentriert (keine grauen
   Flächen ober-/unterhalb). align-items NICHT setzen -> Spalten bleiben gestreckt. */
.linkbox.events-logo.has-pic .is-pic     { height: auto; }
.linkbox.events-logo.has-pic .is-pic .c  { height: 100%; display: flex; align-items: center; justify-content: center; }
.linkbox.events-logo.has-pic .is-pic img { width: 100%; height: auto; max-height: 120px; object-fit: contain; object-position: center center; }
}

/* Zeit in Userzeitzone */
.event-in-user-timezone                 { font-size: 14px; font-weight: 400; color: var(--color-green); }

/* Linkswiperbox */
.linkswiperbox                          { height: 100%; }
.no-bg .linkswiperbox                   { background-color: var(--color-lightgrey); }
.no-bg .swiper-slide:nth-child(even) .linkswiperbox { background-color: var(--color-green); }
.no-bg .swiper-slide:nth-child(even) .linkswiperbox * { color: #fff; }
/* Button am Kachelende buendig unten (has-cta/slide-cta aus splitSlideCta) */
.linkswiperbox.has-cta                  { display: flex; flex-direction: column; }
.linkswiperbox.has-cta > .c             { flex: 1 1 auto; display: flex; flex-direction: column; }
.linkswiperbox.has-cta .slide-body      { flex: 1 1 auto; }
.linkswiperbox.has-cta .slide-body > :last-child { margin-bottom: 0; } /* Flex-Item: Abstand zur slide-cta kollabiert sonst nicht mehr */
/* Mail-Adressen in Kacheln: ohne Pfeil und kleiner, damit sie in die Kachelbreite passen */
.slide-cta .btn.mailto                  { font-size: 16px; }
.slide-cta:has(> .btn.mailto)           { margin-right: -20px; } /* Mail-Zeile darf in den rechten Kachel-Innenabstand laufen */
.slide-cta .btn.mailto:before           { display: none; }

/* Rexx Jobs und Jobs aus Hub */
.jobcontainer h1, .jobcontainer h2, .jobcontainer h3, .jobcontainer h4 { color: var(--color-green); }
.jobcontainer h1                      { margin-bottom: 30px; }
.jobcontainer .content                { margin-top: 30px; }
.jobcontainer .content-text           { margin-top: 30px; }
.jobcontainer h3 + .content-text      { margin-top: 20px; }
.jobcontainer .content.scheme-title   { margin-top: 0; }
.jobcontainer ul.shortfacts           { list-style: none; padding-left: 0; color: var(--color-green); }
.jobcontainer ul.shortfacts li        { display: flex; align-items: center; }
.jobcontainer ul.shortfacts .icon     { flex-basis: 30px; width: 30px; text-align: center; }
@media only screen and (max-width: 1049px) {
.tp-job #first-s,
.tp-job-rexx #first-s                   { display: block !important; }
.tp-job #first-s + .s,
.tp-job-rexx #first-s + .s              { padding-top: 0; }
}
@media only screen and (min-width: 1050px) {
.jobcontainer .intro                  { display: flex; justify-content: space-between; align-items: bottom; margin: 1em 0; }
}

/* Jobfilter */
#vacancies                              { margin-top: 0; }

/* MARK: Swiper */
.swiper-lazy-preloade                   { color: var(--color-green) !important; }
.container[data-layout="image"] + .container,
.container[data-layout="slider"] + .container,
.container + .container[data-layout="slider"] { margin-top: 30px; }
.swiper-initialized .swiper-slide,
img.swiper-lazy.swiper-lazy-loaded      { opacity: 1; }
@media only screen and (max-width: 1049px) {
.r-swiper-xs.r-swiper-big .flybox:before                { content:""; position: absolute; right: -1px; margin-top: -39px; width: 50%; height: 40px; background-color: white; clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%); }
.s.no-bg .r-swiper-xs.r-swiper-big .flybox:before,
.s.no-bg .swiper-slide.square-image-xs .flybox          { background-color: var(--color-lightgrey); }
}
@media only screen and (min-width: 1050px) {
.r-swiper-sm .swiper                    { cursor: ew-resize; }
.r-swiper-small .swiper-slide           { width: 20vw; max-width: 260px; }
.r-swiper-small .swiper-slide .is-pic img { aspect-ratio: 1 / 1; }
.r-swiper-big .swiper-slide.is-landscape { height: 70vh; max-height: 700px; aspect-ratio: 16 / 9; width: auto; }
.r-swiper-big .swiper-slide.is-portrait { height: 70vh; max-height: 700px; aspect-ratio: 2 / 3; width: auto; }
.r-swiper-big .swiper-slide .is-pic     { height: 100%; width: 100%; } 
.r-swiper-big .swiper-slide .is-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } 
.r-swiper-big .swiper-slide.is-portrait .is-pic img { object-position: top center; }
}
@media only screen and (min-width: 1050px) and (max-height: 790px) {
.r-swiper-big .swiper-slide .flybox  { min-width: 650px; }
.r-swiper-big .swiper-slide .flybox p:not(.likeh3)  { font-size: 16px; }
}

/* SFC Swiper im Footer */
#footer .r-swiper                { position: relative; margin-bottom: 0; }
@media only screen and (min-width: 1050px) {
/*
#footer .r-swiper:before         { pointer-events: none; content:""; width: 100px; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0), var(--color-lightgrey)); position: absolute; right: 0; top: 0; z-index: 1000; }
*/
#sfc-footer-swiper .swiper-slide { width: 250px; }
#sfc-footer-swiper .swiper-slide .c { padding-left: 0; padding-right: 0; }
}
@media only screen and (min-width: 1600px) {
#sfc-footer-swiper               { cursor: inherit; }
}

/* Columnslider Swiper */
.container:has(.swiper-show-overflow),
.swiper-show-overflow { overflow: visible; }
.swiper-columnslider .swiper-slide .is-pic     { width: 100%; }
.swiper-columnslider .swiper-slide .is-pic img { width: 100%; height: auto; }
/* Option "All columns should have same height" */
.r-columnslider.col-same-height .swiper-wrapper      { align-items: stretch; }
.r-columnslider.col-same-height .swiper-slide        { height: auto; display: flex; }
.r-columnslider.col-same-height .swiper-slide > .col { display: flex; flex-direction: column; width: 100%; }
.r-columnslider.col-same-height .swiper-slide .c     { flex: 1 1 auto; }
@media only screen and (max-width: 1050px) {
.r-columnslider .swiper-slide    { width: 70vw; margin-right: 20px; }
.r-columnslider .swiper-slide:last-child { margin-right: 0; }
}
@media only screen and (min-width: 1050px) {
.r-columnslider .swiper-slide    { width: 33vw; min-width: 400px; max-width: 500px; margin-right: 30px; }
.r-columnslider .swiper-slide:last-child { margin-right: 0; }
.r-columnslider .swiper[data-count="2"] .swiper-slide { width: 48%; max-width: 1200px; margin-right: 4%; }
}

/* Fuelcellroller auf EFOY Applicationsseite Intro */
.fuellcell-roller                               { line-height: 0; }
.fuellcell-roller .swiper                       { overflow: visible; }
.fuellcell-roller .swiper-slide                 { width: 60vw; max-width: 200px; margin-right: 10px; }
.fuellcell-roller .swiper-slide:last-child      { margin-right: 0; }
.fuellcell-roller .swiper-slide img             { max-width: 200px; }
@media only screen and (orientation: landscape) {
.fuellcell-roller                               { overflow: hidden; }
}

/* Footer */
.s.bg.grey + .seperator:has(+ #footer.bg.grey) { display: none; }
.s.bg.grey + .seperator + #footer.bg.grey:before { background-color: var(--color-green); clip-path: polygon(0% 0%, 100% 0%, calc(100% - 50px) 100%, 0% 100%); }
.s.bg.grey + .seperator + #footer.bg.grey,
.s.bg.grey + #footer.bg.grey            { background-color: white; }

/* Invertieren bei bestimmten Farben */
.bg.green .btn.primary 						            { filter: drop-shadow(2px -1px 0px white) drop-shadow(-1px 2px 0px white) drop-shadow(1px 1px 0px white) }
.bg.green .btn.primary > span                 { background-color: white; color: var(--color-green); border-top-color: white; border-left-color: white; }
.bg.green .btn.primary:before 			          { background-color: white; border-top-color: white; }
.bg.green .btn.primary:after 			            { border-color: white transparent transparent white; }
.bg.green .btn.secondary 						          { filter: drop-shadow(2px -1px 0px white) drop-shadow(-1px 2px 0px white) drop-shadow(1px 1px 0px white) }
.bg.green .btn.secondary > span 				      { background-color: var(--color-green); color: var(--color-green); border-top-color: white; border-left-color: white; }
.bg.green .btn.secondary:before 				      { background-color: var(--color-green); border-top-color: white; }
.bg.green .btn.secondary:after 				        { border-color: var(--color-green) transparent transparent var(--color-green); }
.bg.green .btn.secondary:hover > span 		    { background-color: white; color: var(--color-green); }
.bg.green .btn.secondary:hover:before 		    { background-color: white; }
.bg.green .btn.secondary:hover:after 			    { border-color: white transparent transparent white; }
.bg.green .btn.four:hover                     { color: var(--color-black); }
.bg.grey .btn.secondary > span,
.bg.grey .btn.secondary:before                 { background-color: var(--color-lightgrey); }
.bg .bg.white .btn.secondary > span,
.bg .bg.white .btn.secondary:before                 { background-color: white; }
.bg.grey .btn.secondary:after                  { border-color: var(--color-lightgrey) transparent transparent var(--color-lightgrey); }
.bg .bg.white .btn.secondary:after                  { border-color: white transparent transparent white; }
.bg.grey .btn.secondary:hover > span 		    { background-color: var(--color-green); color: white; }
.bg.grey .btn.secondary:hover:before 		    { background-color: var(--color-green); }
.bg.grey .btn.secondary:hover:after 			    { border-color: var(--color-green) transparent transparent var(--color-green); }

.bg.red p, .bg.invert p,
.hover-invert:hover p, .hover-invert:hover a.link, .hover-invert:hover h1, .hover-invert:hover h2, .hover-invert:hover h3, .hover-invert:hover h4, .hover-invert:hover h5, 
.invert p, .invert a.link, .invert h1, .invert h2, .invert h3, .invert h4, .invert h5, 
.flybox.bg.green p, .flybox.bg.green a.link, .flybox.bg.green h1, .flybox.bg.green h2, .flybox.bg.green h3, .flybox.bg.green h4, .flybox.bg.green h5,
.box.bg.green p, .box.bg.green a.link, .box.bg.green h1, .box.bg.green h2, .box.bg.green h3, .box.bg.green h4, .box.bg.green h5, .box.bg.green h6, .box.bg.green li { color: white; }


/* Box */
@media only screen and (min-width: 1050px) {
.box-same-height-sm .has-box .c, .box-same-height-sm .has-box .box   { height: 100%; }
.col-sm-12 .box                                                      { min-width: 400px; }
}

/* Counter */
.number-counter                               { line-height: 1; pointer-events: none; }
.number-counter .nr span                      { display: inline-block; font-size: 3em; padding: .3em .2em; color: white; background: linear-gradient(var(--color-green) 0%, var(--color-green) 50%, #62AA31 50.1%, #62AA31 100%); }
.number-counter .nr span.is-char              { padding-left: 0; padding-right: 0; }
.number-counter .nr span:last-child           { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%);}
.number-counter span + span                   { margin-left: 5px; }
.number-counter.blurry .nr                    { filter: blur(.5px); }

.number-counter .prefix, .number-counter .suffix { font-size: 3em; color: var(--color-green); }

.number-counter.style-2 .nr span              { background: var(--color-lightgrey); color: var(--color-black); }
.number-counter.style-3 .nr span              { background: white; color: var(--color-green); padding: 0; font-size: 2.2em; }
.number-counter.style-3 span + span           { margin-left: 0; }
.number-counter.style-3 .prefix, .number-counter.style-3 .suffix { font-size: 1.6em; }

.number-counter + h4 + .number-counter,
.number-counter + h2 + .number-counter,
.number-counter + h3 + .number-counter        { margin-top: 1rem; }

/* YouTube Videos */
.video-youtube-container                { position: relative; }
.video-youtube-container + *,
* + .video-youtube-container            { margin-top: 40px; }
.video-youtube-container .youtube-play-btn { z-index: 1; }
@media only screen and (max-width: 1049px) {
    .video-youtube-container .youtube-consent-text { position: absolute; bottom: 0px; left: 0; width: 100%; font-size: 12px; text-align: left; transform: translateY(100%); line-height: 1.1; }
}
@media only screen and (min-width: 1050px) {
.video-youtube-container.bg-image-sm    { aspect-ratio: 16/9; }
.video-youtube-container.bg-image-sm .bgimage { z-index: 0; }
.video-youtube-container .youtube-consent-text { opacity: .5; padding: 0 5px; position: absolute; width: 80%; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 14px; transition: opacity .3s .5s; border-radius: 3px; }
.video-youtube-container:hover .youtube-consent-text { opacity: 1; background-color: rgba(255,255,255,.8); }
}
.video-youtube-container.youtube-inline-playing        { aspect-ratio: 16/9; }
.video-youtube-container.youtube-inline-playing iframe { width: 100%; height: 100%; border: none; display: block; }

/* Blockquotes */
* + blockquote, blockquote + *          { margin-top: 2em; }
blockquote                              { padding: 0; position: relative; }
blockquote.bg                           { padding: 2em 2em 2em 0; }
blockquote.bg.green *                   { color: white; }
blockquote p                            { font-weight: 600; font-style: italic; font-size: 1.3em; }
blockquote p.author                     { font-weight: 400; font-style: normal; font-size: 20px; }
blockquote.no-bg p.author               { color: var(--color-green); }
.t-1000 blockquote:before               { content:"\f10e"; font-family: 'FA6'; position: absolute; font-size: 30px; margin-left: -1.5em; }
.t-1000 blockquote.bg.green:before      { color: white; }
.t-1000 blockquote.no-bg:before         { color: var(--color-green); }
.swiper-slide blockquote p              { font-size: 1.1em; }
@media only screen and (max-width: 1049px) {
.t-1000 blockquote:before               { margin-left: -1.1em; font-size: 22px; }
blockquote .is-headline                 { font-size: 1.5em; } 
blockquote p                            { font-size: 1.2em; }
.swiper-slide blockquote p              { font-size: 1em; }
.t-1000 .textcenter-xs blockquote:before { position: relative; }
}
@media only screen and (min-width: 1050px) {
blockquote                              { padding: 0 0 0 0; }
.col-sm-6.is-textfield blockquote.bg    { width: 70%; min-width: 400px; }
.col-sm-6.is-textfield * + blockquote.bg { transform: translateX(-30px); }
.t-1000 .textcenter-sm blockquote:before { position: relative; }
}


/* MARK: Formulare */
::placeholder                           { color: var(--color-grey); opacity: .5; }
::-ms-input-placeholder                 { color: var(--color-grey); }
.form-item                              { padding-top: .8em; padding-bottom: .8em; }
#jobfilter .form-item + .form-item      { margin-top: 1em; }
/* SF-Jobs: Standorte nach Land gruppiert — Land ist reine Ueberschrift, nur Standorte sind Checkboxen */
#jobfilter .jobfilter-countrygroup      { margin-bottom: .75em; }
#jobfilter .jobfilter-countryname       { font-size: 14px; margin-bottom: 6px; color: var(--color-green); padding-left: 0; }
.form-item.no-padding-bottom            { padding-bottom: 0; }
.form-item + .form-item.form-item-info  { margin-top: 1em; }
@media only screen and (max-width: 1049px) {
.form-item.hide-form-item               { display: none; }
}
@media only screen and (min-width: 1050px) {
.form-item.hide-form-item               { visibility: hidden; }
}
label                                   { display: block; font-size: .8em; font-weight: 600; margin-bottom: 6px; }
label span.pflicht                      { color: var(--color-green); display: inline !important; }
input, textarea, select                 { border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1; padding: .8em 1em; border: 1px solid var(--color-lightgrey); background-color: var(--color-lightgrey); width: 100%; }
select                                  { padding-right: 1.5em; }
.bg input, .bg textarea, .bg select     { background-color: white; }
textarea                                { min-height: 30vh; max-height: 70vh; line-height: 1.5; resize: vertical; }
.form-item-name-Web_failure_description__c textarea { min-height: 15vh; }

input[type="checkbox"]                  { width: 2em; height: 2em; padding: 0; border: none; cursor: pointer; }
.form-item-checkbox input               { position: absolute; }
.form-item-checkboxes input:after,
.form-item-checkbox input:after         { content:""; position: absolute; width: 100%; height: 100%; background-image: url(../img/icons/checkbox-x.svg); background-size: cover; opacity: 0; filter: grayscale(100%); }
.form-item-checkboxes input:checked:after,
.form-item-checkbox input:checked:after { opacity: 1; filter: grayscale(0); }
.form-item-checkbox p                   { padding-left: 4em; padding-top: 2px; }
.form-item-checkbox .group              { margin-top: 20px; }
.form-item-checkbox .group .group-label { font-size: 14px; margin-bottom: 10px; color: var(--color-green); }
.form-item-checkbox-all-clickable p     { cursor: pointer; }
.form-item-checkbox span                { display: block; position: relative; min-height: 2em; }
.form-item-checkbox span.disabled       { opacity: .4; pointer-events: none; }
.form-item-checkbox label + span,
.form-item-checkbox span + span         { margin-top: 10px; }

/* Multiple Checkboxes — klickbare Karten mit deutlichem Gruppentitel */
.form-item-checkboxes                   { padding-top: 1.6em; }
.form-item-checkboxes + .form-item-checkboxes { padding-top: .8em; }
/* Gruppentitel (Feld-Label) deutlich abheben: groesser, gruen, mit Trennlinie darueber */
.form-item-checkboxes > label           { font-size: 1em; color: var(--color-green); margin-bottom: 14px; padding-top: 14px; border-top: 1px solid var(--color-lightgrey); }
.form-item-checkboxes .container        { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* Kachel: berandet, weisser Grund, ganze Flaeche klickbar, Hover/Checked in Gruen */
.form-item-checkboxes .container .item  { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 14px; margin-bottom: 0; border: 2px solid var(--color-lightgrey); border-radius: 4px; background-color: white; font-weight: 400; transition: border-color .2s, background-color .2s; }
.form-item-checkboxes .container .item:hover { border-color: var(--color-green); }
.form-item-checkboxes .container .item:has(input:checked) { border-color: var(--color-green); background-color: rgba(101, 179, 48, .08); }
/* Checkbox: kompakter, im Ruhezustand mit sichtbarem Rand (nicht mehr randlos-leer) */
.form-item-checkboxes .container .item input { position: relative; flex: 0 0 auto; width: 1.5em; height: 1.5em; border: 2px solid var(--color-grey); border-radius: 3px; background-color: white; transition: border-color .2s; }
.form-item-checkboxes .container .item:hover input,
.form-item-checkboxes .container .item input:checked { border-color: var(--color-green); }
/* Label an Formular-Typo angleichen und vertikal sauber ausrichten */
.form-item-checkboxes .container .item .label { font-size: .85em; line-height: 1.25; font-weight: 400; }

/* Zwischenüberschrift / Erklärungstext (Layout 'hinweis') — reiner Anzeigeblock.
   Als Sektionstrenner gestaltet: klarer Abstand nach oben, Text dezent. */
.form-item-hinweis                      { padding-top: 2.4em; padding-bottom: .4em; }
.form-item-hinweis:first-child          { padding-top: .8em; }
.form-item-hinweis .likeh3              { margin: 0; }
.form-item-hinweis .likeh3 + p          { margin-top: .5em; }
.form-item-hinweis p                    { color: var(--color-grey); line-height: 1.5; }
@media only screen and (min-width: 680px) {
.form-item-checkboxes .container        { grid-template-columns: 1fr 1fr; }
}
@media only screen and (min-width: 1100px) {
.form-item-checkboxes .container        { grid-template-columns: 1fr 1fr 1fr; }
}

.form-item.no-edit                      { cursor: not-allowed; }
.form-item.no-edit select,
.form-item.no-edit input                { color: var(--color-green); pointer-events: none; }
[disabled]                              { border: var(--color-grey) 1px solid; cursor: not-allowed; opacity: .5; }
.form-item *:focus                      { border-color: var(--color-grey); outline: none; }
.form-item p                            { margin-top: 0; font-size: .8em; }

/* Form Item nur, wenn Nutzer ein Produkt hat */
form.user-has-no-product .form-item.show-only-when-user-has-product { display: none; }

.select                                 { position: relative; display: block; }
.select:after                           { pointer-events: none; content:""; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 13px; height: 16px; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23666' d='M224 397.3l22.6-22.6 160-160L429.3 192 384 146.7l-22.6 22.6L224 306.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 160 160L224 397.3z'/%3E%3C/svg%3E"); }
select                                  { border: 3px solid var(--color-lightgrey) !important; }
.bg .select select                      { border-color: white !important; }

.select2 > select                       { display: none; }
.select2-container                      { width: 100%; }
.select2-container--default .select2-selection--single { border: none !important; border-radius: 0 !important; }
.select2-container .select2-selection--single { height: 54px !important; }
.select2-container .select2-selection--single .select2-selection__rendered { padding-left: 20px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 54px !important; }
.select2-container--default .select2-results > .select2-results__options { max-height: 300px !important; }

input[type="radio"]                     { width: 2em; height: 2em; padding: 0; border: none; cursor: pointer; border-radius: 100%; position: absolute; display: block; }
.form-item-radio input:checked:after    { content:""; top: 0; left: 0; position: absolute; width: 100%; height: 100%; background-image: url(../img/icons/checkbox-x.svg); background-size: cover; }
.form-item-radio p                      { padding-left: 4em; padding-top: .5em; margin-bottom: 1em; }

.form-item.error label                  { color: var(--color-red); }
.form-item.error input,
.form-item.error textarea,
.form-item.error select,
.form-item.error .select2-container     { border-left: 3px solid var(--color-red) !important; }
.email-hint                             { font-size: .85em; margin: .4em 0 0; }
.email-hint a                           { text-decoration: underline; cursor: pointer; }
.form-item.error .email-hint            { color: var(--color-red); }

.form-group.form-checkboxes             { display: flex; flex-wrap: wrap; }
.form-group.form-checkboxes > .form-item { flex-basis: 50%; }

.form-message                           { margin-top: 30px; }
.show-when-sent,
.show-when-error                        { display: none; }
.sent .hide-when-sent                   { display: none; }
.sent .show-when-sent,
.has-errors .show-when-error            { display: block; }
.sent .form-item                        { opacity: .8; pointer-events: none; }

form.is-uploading .form-item,
form.sent .form-item,
form.sending .form-item                 { pointer-events: none; opacity: .7; }

.form-item-upload .list                 { display: flex; gap: 10px; flex-wrap: wrap; }
.form-item-upload.has-upload .list     { padding-bottom: 10px; }
.form-item-upload .list .filetxt        { font-size: 14px; padding: 10px; background-color: white; border-radius: 5px; }
.form-item-upload .fa-times             { cursor: pointer; }
.form-item-upload .fa-times:hover       { color: var(--color-green); }
.form-item-upload.has-uploads input,
.form-item-upload .loading              { display: none; }
.form-item-upload.has-uploads.multiple input,
form.is-uploading .form-item-upload .loading { display: block; }

form .template                           { display: none; position: relative; padding: 30px; border: 1px solid #ccc; }
form .template.cloned                    { display: block; }
form .template.cloned.flex               { display: flex; }
form .template.cloned + .template.cloned { border-top: 0; }
form .template-counter                   { position: absolute; right: 0px; top: 0; transform: translateY(-50%); background-color: var(--color-green); color: white; padding: .5em 1em; border-radius: 10px; }  
form .template-delete                    { text-align: right; }
form .template-delete .delete-entry      { font-size: 14px; color: red; opacity: .8; }
form .template-delete .delete-entry:hover { opacity: 1; }
/* form .template-container .cloned[data-nr="0"] .template-delete { display: none; } */
form .template-container.single-entry .template-delete { display: none; } /* mind. eine Brennstoffzelle (RMA) */
form .add-entry.error .btn               { outline: 2px solid red; outline-offset: 3px; }

@media only screen and (min-width: 1050px) {
.form-group.form-checkboxes > .form-item { flex-basis: 33.333%; }
.form-item.in-one-line                  { padding-right: 0; }
.form-item.in-one-line + .in-one-line   { padding-left: 0; }
.form-item.in-one-line + .form-item-submit.in-one-line { transform: translateX(-3px);}
.textcenter-sm .select,
.textcenter-sm .select2-container        { max-width: 500px; margin-left: auto; margin-right: auto; }
}

/* Bauwatch Service Formulare */
.special-bauwatch-form .form-item-name-Email,
.special-bauwatch-form .form-item-name-Company,
.special-bauwatch-form .form-item-name-Street,
.special-bauwatch-form .form-item-name-PostalCode,
.special-bauwatch-form .form-item-name-City,
.special-bauwatch-form .form-item-name-Country,
.special-bauwatch-form .form-item-name-Phone { opacity: 0; width: 0; height: 0; overflow: hidden; padding: 0; }

/* Pagination */
ul.pagination                            { display: flex; gap: 10px; list-style: none; margin-top: 60px; }
ul.pagination li                         { aspect-ratio: 1/1; background-color: var(--color-lightgrey); display: inline-block; display: grid; place-items: center; line-height: 1; width: 40px; height: 40px; }
ul.pagination li a:hover                 { background-color: var(--color-grey); color: white; }
ul.pagination li.active a                { background-color: var(--color-green); color: white; }
ul.pagination li a                       { display: block; display: grid; place-items: center; width: 100%; height: 100%; text-decoration: none; }


/* External News (XML von EQS) */
.externalnewsteaser                      { margin-bottom: 40px; }
.externalnewsteaser:not(.ausgeblendet) + .externalnewsteaser { border-top: var(--color-lightgrey) 4px solid; padding-top: 40px; }
.externalnewsteaser .meta + h2           { margin-top: 0; }
.externalnewsteaser .title a             { color: var(--color-black); }
.externalnewsteaser .title a:hover       { color: var(--color-green); }
#eqs-news table                          { margin-top: 30px; }

/* Tags (z.B. bei der News-Suche) */
ul.tags                                  { display: flex; gap: 6px; }
ul.tags li                               { background-color: var(--color-green); color: white; list-style: none; line-height: 1; padding: 6px 12px; border-radius: 20px; }

/* Toggle Section */
.toggle-section-text .c                  { background-color: var(--color-lightgrey); transform: translateY(-50%); border-radius: 5px; max-width: 400px; margin-left: auto; margin-right: auto; cursor: pointer; font-weight: 600; box-shadow: 0.7px 2px 5.3px rgba(0, 0, 0, 0.016), 2.2px 6.7px 17.9px rgba(0, 0, 0, 0.024), 10px 30px 80px rgba(0, 0, 0, 0.04); }
.toggle-section-text .c:hover            { background-color: var(--color-green); color: white; }

/* Toggletext Shortcode */
.toggletext                              { margin-top: 1em; margin-bottom: 2em; }
.toggletext.open                         { margin-bottom: 4em; }
.toggletext-content                      { display: none; }
.toggletext .btn-close, .toggletext.open .btn-open { display: none; }
.toggletext.open .btn-close              { display: inline-block; margin-top: 1em; }
.toggletext .btn.btn-toggletext + .btn.btn-toggletext { margin-left: 0 !important; }

/* FAQs Modul */
.faq-question                           { padding: 30px 60px 30px 100px; }
.s.bg .faq-question                     { background-color: white; }
.s.no-bg .faq-question                  { background-color: var(--color-lightgrey); }
.faq-question + .faq-question           { margin-top: 1px; }
.faq-question .question                 { cursor: pointer; }
.faq-question .question:before          { content: "+"; position: absolute; display: block; text-align: center; width: 30px; margin-left: -60px; margin-top: -12px; font-size: 32px; font-family: inherit;}
.faq-question.open .question:before     { content: "—"; font-size: 30px; }
.faq-question .question:hover h3,
.faq-question .question:hover:before    { color: var(--color-green); }
.faq-question .answer                   { padding-top: 30px; }
.r-faqs .is-headline                    { margin-bottom: 20px; }
.faq-question.closed .answer            { display: none; }

/* Tabs */
@media only screen and (min-width: 1050px) {
.tab-filter                             { border-bottom: 2px solid var(--color-green); padding-left: 30px; overflow: hidden; }
.tab                                    { transform: translateY(4px); border-radius: 3px 3px 0 0; font-weight: 600; position: relative; border: 2px solid var(--color-green); border-bottom: none; color: var(--color-green); padding: 10px 20px; cursor: pointer; margin-left: 10px; }
.tab.active:after                       { content:""; position: absolute; right: -3px; top: -3px; height: 15px; width: 15px; background-color: white; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bg.grey .tab.active:after              { background-color: var(--color-lightgrey); }
.tab.active,
.tab:hover                              { background-color: var(--color-green); color: white; transform: translateY(0); }
}

/* Big Tabs Container (auch in above-the-fold.css) */
.big-tab-header                        { justify-content: center; gap: 20px; border-bottom: 4px solid var(--color-lightgrey); }
.big-tab-nav                           { transform: translateY(4px); color: var(--color-green); font-weight: 600; font-size: 1.2em; text-align: center; padding: 10px 30px 20px 30px; cursor: pointer; background-color: var(--color-lightgrey); }
.big-tab-nav:hover .icon-normal,
.big-tab-nav.active .icon-normal       { display: none; }
.big-tab-nav:hover .icon-inverted,
.big-tab-nav.active .icon-inverted     { display: block; }
.big-tab-nav:hover,
.big-tab-nav.active                    { background-color: var(--color-green); color: white; }
.big-tab-header .big-tab-nav:first-child { border-radius: 5px 0 0 0;}
.big-tab-header .big-tab-nav:last-child  { border-radius: 0 5px 0 0; }
@media only screen and (max-width: 1049px) {
.big-tab-header                         { justify-content: left; flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; padding: 0 20px; }
}

/* Graue Balken Placeholder Text */
.placeholder-text                       { display: flex; flex-wrap: wrap; gap: 10px; }
.placeholder-word                       { background-color: var(--color-lightgrey); height: 20px; }
.meta .placeholder-word                 { background-color: var(--color-lightgrey); height: 10px; }
.placeholder-word.size-1                { width: 20px; }
.placeholder-word.size-2                { width: 40px; }
.placeholder-word.size-3                { width: 50px; }
.placeholder-word.size-4                { width: 80px; }
.placeholder-word.size-5                { width: 70px; }
.placeholder-word.size-6                { width: 80px; }
.placeholder-word.size-7                { width: 90px; }
.placeholder-word.size-8                { width: 120px; }

/* SFC Icons Shortcode [sfcicon file="xxx.svg"] */
.icon-shortcode                         { display: inline-block; padding: 0; line-height: 0; }
.icon-shortcode.style-green-circle-small,
.icon-shortcode.style-green-circle      { border-radius: 100%; overflow: hidden; }
.icon-shortcode.style-green-circle-small { width: 44px; height: 44px; }
.icon-shortcode.sfciconset              { aspect-ratio: 1/1; }
.icon-shortcode.sfciconset svg          { width: 100%; height: 100%; }
.icon-shortcode.sfciconset.style-inline-small { display: inline-block; width: 32px; height: 32px; vertical-align: center; }
/* p:has(.icon-shortcode)                  { padding-left: 50px; }
p b > .icon-shortcode,
p strong > .icon-shortcode,
p > .icon-shortcode                     { position: absolute; width: 40px; height: 40px; transform: translateX(-50px) translateY(-5px);} */
p:has(.style-green-circle-small)        { display: flex; align-items: center; justify-content: flex-start; }
p:has(.style-green-circle-small) .style-green-circle-small { display: inline-flex; margin-right: 10px; flex: 0 0 auto; }

/* SFC Icons in Headlines */
/* .has-icon-shortcode                     { position: relative; }
.has-icon-shortcode .icon-shortcode     { position: absolute; transform: translate(-100%,-25%); }
.has-icon-shortcode .icon-shortcode.style-green-circle { transform: translate(-110%,-25%); } */
.has-icon-shortcode,
.is-headline:has(.style-green-circle) { display: inline-flex; gap: .3em; align-items: center; }


@media only screen and (min-width: 1050px) {
/* .textleft-sm h1.has-icon-shortcode, .textleft-sm .likeh1.has-icon-shortcode { padding-left: 100px; }
.textleft-sm h1.has-icon-shortcode.has-style-green-box, .textleft-sm .likeh1.has-icon-shortcode.has-style-green-box { padding-left: 120px; }
.textleft-sm h1.has-icon-shortcode.has-style-default, .textleft-sm .likeh1.has-icon-shortcode.has-style-default { padding-left: 80px; } */
.likeh1 .icon-shortcode,
h1 .icon-shortcode                      { width: 100px; height: 100px; } 

/* .textleft-sm h2.has-icon-shortcode, .textleft-sm .likeh2.has-icon-shortcode { padding-left: 80px; } */
/* .textleft-sm h2.has-icon-shortcode.has-style-default, .textleft-sm .likeh2.has-icon-shortcode.has-style-default { padding-left: 60px; } */
.likeh2 .icon-shortcode,
h2 .icon-shortcode                      { width: 70px; height: 70px; } 

/* .textleft-sm h3.has-icon-shortcode, .textleft-sm .likeh3.has-icon-shortcode { padding-left: 70px; }
.textleft-sm h3.has-icon-shortcode.has-style-default, .textleft-sm .likeh3.has-icon-shortcode.has-style-default { padding-left: 50px; } */
.likeh3 .icon-shortcode,
h3 .icon-shortcode                      { width: 60px; height: 60px; } 

/* .textleft-sm h4.has-icon-shortcode, .textleft-sm .likeh4.has-icon-shortcode { padding-left: 50px; }
.textleft-sm h4.has-icon-shortcode.has-style-default, .textleft-sm .likeh4.has-icon-shortcode.has-style-default { padding-left: 40px; } */
.likeh4 .icon-shortcode,
h4 .icon-shortcode                      { width: 50px; height: 50px; } 

/* .textleft-sm h5.has-icon-shortcode, .textleft-sm .likeh5.has-icon-shortcode { padding-left: 40px; } */
.likeh5 .icon-shortcode,
h5 .icon-shortcode                      { width: 40px; height: 40px; } 
}
@media only screen and (max-width: 1049px) {
/*.has-icon-shortcode .icon-shortcode         { display: none; }*/
/* .textleft-xs h1.has-icon-shortcode, .textleft-xs .likeh1.has-icon-shortcode { padding-left: 50px; }
.textleft-xs h1.has-icon-shortcode.has-style-green-box, .textleft-xs .likeh1.has-icon-shortcode.has-style-green-box { padding-left: 40px; }
.textleft-xs h1.has-icon-shortcode.has-style-default, .textleft-xs .likeh1.has-icon-shortcode.has-style-default { padding-left: 40px; } */
.likeh1 .icon-shortcode,
h1 .icon-shortcode                      { width: 40px; height: 40px; } 

/* .textleft-xs h2.has-icon-shortcode, .textleft-xs .likeh2.has-icon-shortcode { padding-left: 40px; }
.textleft-xs h2.has-icon-shortcode.has-style-default, .textleft-xs .likeh2.has-icon-shortcode.has-style-default { padding-left: 30px; } */
.likeh2 .icon-shortcode,
h2 .icon-shortcode                      { width: 40px; height: 40px; } 

/* .textleft-xs h3.has-icon-shortcode, .textleft-xs .likeh3.has-icon-shortcode { padding-left: 40px; }
.textleft-xs h3.has-icon-shortcode.has-style-default, .textleft-xs .likeh3.has-icon-shortcode.has-style-default { padding-left: 30px; } */
.likeh3 .icon-shortcode,
h3 .icon-shortcode                      { width: 40px; height: 40px; } 

/* .textleft-xs h4.has-icon-shortcode, .textleft-xs .likeh4.has-icon-shortcode { padding-left: 30px; }
.textleft-xs h4.has-icon-shortcode.has-style-default, .textleft-xs .likeh4.has-icon-shortcode.has-style-default { padding-left: 20px; } */
.likeh4 .icon-shortcode,
h4 .icon-shortcode                      { width: 30px; height: 30px; } 

/* .textleft-xs h5.has-icon-shortcode, .textleft-xs .likeh5.has-icon-shortcode { padding-left: 30px; } */
.likeh5 .icon-shortcode,
h5 .icon-shortcode                      { width: 30px; height: 30px; } 
}

/* SFC Icon Green Box */
.icon-shortcode.style-green-box         { display: block; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background-color: var(--color-green); }
@media only screen and (min-width: 1050px) {
.r-3columns .col-sm-4:first-child .icon-shortcode.style-green-box { clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px); }
.r-3columns .col-sm-4:last-child .icon-shortcode.style-green-box  { clip-path: polygon(0 0, calc( 100% - 30px ) 0, 100% 30px, 100% 100%, 0 100%); }
}

/* Tabelle */
table                                   { max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; border-spacing: 0; }
table + *, * + table                    { margin-top: 1em; }
th                                      { color: var(--color-green); background: var(--color-lightgrey); padding-top: 15px; padding-bottom: 15px; }
.bg.green th 							{ background: none; }
td                                      { border-bottom: var(--color-lightgrey) 1px solid; text-align: left; padding-top: 15px; padding-bottom: 20px; padding-right: 20px; margin: 0; font-size: 15px; }
td.rowheadline 							{ padding-top: 50px; padding-bottom: 10px; }
tr.highlighted td:first-child           { border-left: 5px solid var(--color-green); }
tr.highlighted td                       { color: var(--color-green); }
tr + tr td.rowheadline 					{ padding-top: 15px; }
table tr:first-child td.rowheadline		{ padding-top: 15px; }
td:first-child 							{ padding-left: 15px; }
tr:last-child td 						{ border-bottom: none; }
tr td.label 	                        { font-weight: bold; text-align: left; padding-left: 15px; }
tr th 									{ text-align: left; }
tr th:first-child                       { padding-left: 15px; }
.bg.green td 							{ border-bottom-color: var(--color-green); }
.bg.green tr:last-child td 				{ border-bottom: none; }
table.inttable tbody tr                 { display: none; }
.intellifilter 							{ display: flex; align-items: center; justify-content: right; gap: 20px; margin-bottom: 20px; }
.intellifilter select 					{ margin-right: 10px; }

/* Bilder in Tabellen */
table.inttable img 						{ max-height: 120px; }

/* Vertical Alignment */
table.inttable td 						{ vertical-align: top; }

@media only screen and (min-width: 1050px) {
	table.inttable[data-filterspalte="0"] td.filtertd { width: 185px; }
}

@media only screen and (max-width: 1049px) {
	td,th									{ padding: 10px; }
	.responsivescroll 						{ width: auto; overflow-y: auto; }
	.responsivescroll table 				{ width: auto; }
	.responsivescroll::-webkit-scrollbar    { -webkit-appearance: none;  width: 14px; height: 14px; }
	.responsivescroll::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); }
}

/* Table Fadeout */
.table-fadeout + *,
* + .table-fadeout                          { margin-top: 1em; }

/* Tabelle aufklappen */
/* .tableaufklappen 						{ text-align: center; font-size: 1.2em; margin: 30px 0; cursor: pointer; }
.tableaufklappen:hover 					{ opacity: .9; } */

/* Data Table */
/* .s.nobg + .s.techniktabelle 			{ padding-top: 0; margin-top: -75px; }
.tech tr th 							{ text-align: center; }
.tech tr th:first-child					{ text-align: left; }
.tech td 								{ padding-right: 0; font-size: 14px; text-align: center; }
.tech th.label,
.tech td.label 			                { max-width: 250px; padding-right: 20px; }
.tech th.data,
.tech td.data 							{ min-width: 70px; }
table.inttable td span,
.tech td span 							{ font-weight: normal; color: #ccc; font-size: 10px; position: absolute; margin: -3px 0 0 5px; }
.techniktabelle .legende 				{ padding-top: 30px; }
.techniktabelle .legende p + p 			{ margin-top: 0; } */

/* @media only screen and (max-width: 740px) {
.s.nobg + .s.techniktabelle 			{ padding-top: 0; margin-top: -50px; }
.tableaufklappen  						{ transform: scale(.8); }
} */



/* Footermenü */
#footer .langswitcher                    { display: inline-block; text-align: left; }
@media only screen and (max-width: 1049px) { 
.fnmenu a                                { display: block; font-weight: 600; padding: 5px 0; }
}

/* WordPress Edit */
#edit-post                               { display: none; }
@media only screen and (min-width: 1050px) {
#edit-post                               { display: block; position: fixed; z-index: 12000; bottom: 0; left: 0; padding: 10px; transition: padding .3s; background-color: var(--color-lightgrey); }
#edit-post:hover                         { padding: 20px; }
#edit-post a                             { color: var(--color-black); text-decoration: none; }
#edit-post a:hover                       { color: var(--color-green); }
#edit-post span                          { display: block;}
}
/* Sichtbarkeits-Störer für eingeloggte Redakteure (wdm_condition_hint(), functions-helper.php).
   Farben korrespondieren mit den Backend-Badges (admin/condition-badges.js). */
.editor-hint-visibility                  { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; position: relative; z-index: 5; margin: 0 auto; padding: 6px 12px; max-width: 1400px; border-left: 4px solid var(--state-color, #64748b); background-color: #f8fafc; color: #1e293b; font-size: 12px; line-height: 1.5; }
/* Pille und Streifen = Zustand (grün sichtbar, grau verborgen, dunkelrot disabled). Regionsfarben nur im Backend. */
.editor-hint-visibility .hint-state       { padding: 1px 8px; border-radius: 9px; background-color: var(--state-color, #64748b); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .2px; text-transform: uppercase; }
.editor-hint-visibility .hint-detail      { flex: 1 1 auto; }
.editor-hint-visibility .hint-type        { color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.editor-hint-visibility.is-visible        { --state-color: #16a34a; opacity: .75; }
.editor-hint-visibility.is-visible:hover  { opacity: 1; }
.editor-hint-visibility.is-hidden         { --state-color: #64748b; }
.editor-hint-visibility.hint-disable      { --state-color: #7f1d1d; }

/* Vorschau-Filter (js/condition-preview.js): Panel unten links über dem Edit-Button */
#cond-preview                            { position: fixed; z-index: 12001; left: 0; bottom: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 420px; padding: 8px 12px; background-color: #fff; border-right: 4px solid #64748b; box-shadow: 0 2px 12px rgba(0,0,0,.18); font-size: 12px; color: #1e293b; }
#cond-preview.is-active                  { border-right-color: #16a34a; }
#cond-preview .cp-title                  { flex: 0 0 100%; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #64748b; }
#cond-preview label                      { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }
#cond-preview select,
#cond-preview input[type="datetime-local"] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: auto; padding: 2px 4px; font-size: 12px; line-height: normal; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; color: #1e293b; }
/* Theme setzt appearance:none auf alle Inputs (Zeile 785) - hier native Checkbox zurückholen,
   sonst bleibt der Haken unsichtbar */
#cond-preview input[type="checkbox"]     { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; width: 14px; height: 14px; min-width: 14px; margin: 0; padding: 0; accent-color: #16a34a; cursor: pointer; }
#cond-preview .cp-check                  { cursor: pointer; }
#cond-preview .cp-reset                  { padding: 2px 8px; font-size: 11px; border: 1px solid #cbd5e1; border-radius: 3px; background: #f8fafc; color: #1e293b; cursor: pointer; }
#cond-preview .cp-reset:hover            { background: #e2e8f0; }
.cond-sim-hidden                         { display: none !important; }
.cond-hide-hints .editor-hint-visibility { display: none !important; }
.cond-sim-active #cond-preview .cp-title:after { content: " · active"; color: #16a34a; }

/* Consent */
#consent                                 { position: fixed; z-index: 21000; background-color: rgba(255,255,255,.98); border-radius: 4px; opacity: 0; transition: opacity .3s; }
.consent-show #consent                   { opacity: 1; }
.consent-checkbox 				         { transform: translateY(-2px); position: relative; display: inline-block; width: 20px; height: 20px; vertical-align: middle; border: #ccc 2px solid; border-radius: 3px; }
.consent-choice.on .consent-checkbox:after { color: var(--color-green); content: "✔"; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 28px; position: absolute; top: -11px; left: -1px; line-height: 1; }
.consent-choice 				         { cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.consent-choice.no-mouse *,
.consent-choice.no-mouse 		         { cursor: none; pointer-events: none; }
.consent-smalltext                       { display: inline; }
@media only screen and (max-width: 1049px) {
#consent                                 { padding: 10px; width: 92vw; bottom: 20px; left: 4vw; font-size: 14px; background-color: rgba(255,255,255,.95); }
.consent-choice 				         { display: inline-block; margin-right: 10px; }	
#consent .btn                            { font-size: 20px; }
.consent-smalltext                       { line-height: 1.4; font-size: 13px; }
.has-consent-buttons                     { padding-top: 0; }
#consent .hide-xs + p                    { margin-top: 0; }
}
@media only screen and (min-width: 1050px) {
#consent                                 { padding: 30px; width: 50vw; min-width: 980px; max-width: 1300px; bottom: 30px; left: 50%; transform: translateX(-50%); box-shadow: 2px 2px 4px rgba(0,0,0,.5); }
.consent-choice 				         { display: inline-block; margin-right: 30px; }
.consent-smalltext                       { line-height: 1.5; font-size: 16px; }
}

/* Stretch Button */
ul.stretchbtns                           { list-style: none; padding: 0; }
li.stretchbtn                            { background-color: var(--color-lightgrey); display: flex; align-items: center; justify-content: center; position: relative; font-weight: 600; line-height: 1; padding: 25px; cursor: pointer; text-align: center; }
li.stretchbtn.active                     { background-color: var(--color-green); color: white; }
li.stretchbtn span                       { display: inline-block; border: 2px solid var(--color-black); border-radius: 10px; padding: 10px 20px; }
li.stretchbtn.active span                { border-color: white;}
li.stretchbtn span:before                { content:"\f105"; font-family: "FA6"; font-weight: 900; font-size: .8em; padding-right: 1em; }
li.stretchbtn:hover span                 { border-color: var(--color-green); color: white; background-color: var(--color-green); }
li.stretchbtn.active:hover span          { border-color: white; }
@media only screen and (min-width: 1050px) {
ul.stretchbtns                           { display: flex; }
li.stretchbtn                            { flex-grow: 1; }
li.stretchbtn + li.stretchbtn.active:after,
li.stretchbtn.active + li.stretchbtn:before     { content:""; position: absolute; width: 60px; height: 100%; left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
li.stretchbtn + li.stretchbtn:after      { background-color: var(--color-lightgrey); }
li.stretchbtn:hover + li.stretchbtn:before,
li.stretchbtn.active + li.stretchbtn:before { background-color: var(--color-green); }

}

/* Language Hint */
.r-language-hint .c                      { line-height: 1; }
.r-language-hint .hinweis                { display: inline-block; border-radius: 5px; background-color: #f4f4f4; padding: 5px 10px; }
@media only screen and (max-width: 1049px) {
.langlink-li,
.langswitcher                            { display: flex; gap: 15px; flex-direction: column; }
}

/* Print (Druck-Layout fuer alle Sites, Vorschau-Skripte in .artifacts/druck-css/) */
@media print {
@page                                    { size: A4; margin: 15mm 14mm 18mm 14mm; }
@page                                    { @bottom-left  { content: "\00A9  SFC Energy AG"; font-family: 'Open Sans', Arial, sans-serif; font-size: 7.5pt; color: #8a8a8a; }
                                           @bottom-right { content: counter(page) " / " counter(pages); font-family: 'Open Sans', Arial, sans-serif; font-size: 7.5pt; color: #8a8a8a; } }
@page in                                 { @bottom-left { content: "\00A9  SFC Energy India Pvt. Ltd."; } }
@page power                              { @bottom-left { content: "\00A9  SFC Energy"; } }
body.sid-11                              { page: in; }
body.sid-13                              { page: power; }

/* Grundlage: Seite fliesst, kein ScrollSmoother, keine Hintergruende */
html, body                               { height: auto !important; overflow: visible !important; background: white !important; }
html, body, li                           { font-size: 9.5pt; }
#smooth-wrapper                          { position: static !important; inset: auto !important; height: auto !important; overflow: visible !important; }
#smooth-content                          { transform: none !important; translate: none !important; }
*, *:before, *:after                     { transition: none !important; animation: none !important; box-shadow: none !important; text-shadow: none !important; }
.s, .c, .box, .bg, .flybox               { background: none !important; }
/* GSAP setzt Start-Zustaende inline (opacity .1, translate) und setzt sie beim Druck-Resize zurueck */
#smooth-content [style*="opacity"]       { opacity: 1 !important; }
#smooth-content [style*="transform"]:not(.swiper-wrapper), #smooth-content [style*="translate"]:not(.swiper-wrapper) { transform: none !important; translate: none !important; }

/* Kopf: nur Logo, darunter die Seiten-URL (data-print-url setzt output.php); Footer ist dont-print, Firma steht in der Seitenfusszeile */
#header.dont-print                       { display: block !important; position: static !important; height: auto !important; padding: 0 !important; background: none !important; transform: none !important; }
#header > .r > *:not(:first-child)       { display: none !important; }
#header .c                               { padding: 0 !important; }
#svglogo                                 { width: 24mm !important; height: auto !important; }
#first-s                                 { height: auto !important; margin: 0 0 6mm 0; padding: 2mm 0 0 0; border-bottom: .4mm solid var(--color-green); }
#first-s:after                           { content: attr(data-print-url); display: block; padding-bottom: 2mm; font-size: 7.5pt; color: #8a8a8a; }

/* Raus: Navigation, Interaktion, Medien ohne Papierwert */
.dont-print, .hide-sm, #consent, #questions, .seperator, .spacer,
.btn:not(.attachment), .big-play-button, .downloads-filter, .downloadbox .toggle, .swiper-pagination, .swiper-button-prev, .swiper-button-next, .swiper-notification,
.big-tab-header, .tab-filter, .toggletext .btn, iframe, video, audio, .audioplayer, form, .grecaptcha-badge,
#edit-post, #cond-preview, #sf-preview-note, .s:has(.worldmaptarget) { display: none !important; }

/* Abstaende und Raster */
.container-fluid                         { padding-left: 0 !important; padding-right: 0 !important; }
.container                               { max-width: none !important; }
.s                                       { padding: 5mm 0 !important; min-height: 0 !important; height: auto !important; }
.c, .box                                 { padding: 2.5mm 3mm !important; }
.r                                       { margin-left: 0 !important; margin-right: 0 !important; }
[class*="col-sm-"]                       { box-sizing: border-box; flex: 0 0 auto; }
.col-sm-2   { flex-basis: 16.666%; max-width: 16.666%; }  .col-sm-2-4 { flex-basis: 20%; max-width: 20%; }
.col-sm-3   { flex-basis: 25%; max-width: 25%; }           .col-sm-4   { flex-basis: 33.333%; max-width: 33.333%; }
.col-sm-4-5 { flex-basis: 37.5%; max-width: 37.5%; }       .col-sm-5   { flex-basis: 41.666%; max-width: 41.666%; }
.col-sm-6   { flex-basis: 50%; max-width: 50%; }           .col-sm-7   { flex-basis: 58.333%; max-width: 58.333%; }
.col-sm-8   { flex-basis: 66.666%; max-width: 66.666%; }   .col-sm-9   { flex-basis: 75%; max-width: 75%; }
.col-sm-10  { flex-basis: 83.333%; max-width: 83.333%; }   .col-sm-12  { flex-basis: 100%; max-width: 100%; }
.col-sm     { flex: 1 1 0; max-width: 100%; }
[class*="absolute"]                      { position: static !important; transform: none !important; }

/* Typo */
h1, .likeh1                              { font-size: 2.4em; }
h2, .likeh2                              { font-size: 1.9em; }
h3, .likeh3                              { font-size: 1.4em; }
h1, h2, h3, h4, h5, h6, .likeh1, .likeh2, .likeh3, .likeh4 { break-after: avoid; page-break-after: avoid; }
p, li                                    { orphans: 3; widows: 3; }
.bg.green, .bg.green *, .bg.image *, .linkbox.bg.green p { color: var(--color-black) !important; }

/* Bilder, Slider, Tabs, FAQ */
img, svg                                 { max-width: 100% !important; max-height: 80mm; object-fit: contain; }
img, figure, table, tr, blockquote, .faq-question, .linkbox, .swiper-slide { break-inside: avoid; page-break-inside: avoid; }
.swiper                                  { height: auto !important; overflow: visible !important; }
.swiper-wrapper                          { height: auto !important; display: flex !important; flex-wrap: wrap !important; transform: none !important; gap: 4mm; }
.reference-teaser-badge, .reference-teaser-performance { display: none !important; }
.swiper-slide .reference-teaser          { height: auto !important; }
.swiper-slide                            { width: calc(50% - 2mm) !important; margin: 0 !important; height: auto !important; opacity: 1 !important; }
.big-tab-content                         { display: block !important; padding-top: 4mm !important; }
.faq-question                            { padding: 3mm 0 !important; border-top: .2mm solid #ccc; }
.faq-question .question:before           { display: none; }
.faq-question .answer, .toggletext-content { display: block !important; padding-top: 2mm !important; }

/* Dateilinks (z. B. PDF in Tabellen) als schlichter Text */
.btn.attachment                          { filter: none !important; padding: 0 !important; }
.btn.attachment > span                   { padding: 0 !important; border: none !important; background: none !important; color: var(--color-green) !important; }
.btn.attachment:before, .btn.attachment:after, .btn.attachment > span:after { display: none !important; }

/* Download-Boxen: komplette Liste, drei Spalten */
.downloadboxes                           { grid-template-columns: 1fr 1fr 1fr !important; gap: 3mm !important; }
.downloadbox                             { min-height: 0 !important; height: auto !important; padding: 3mm !important; border: .2mm solid #ccc; break-inside: avoid; }
.downloadbox .title                      { height: auto !important; font-size: 1.1em !important; }
.downloadbox:before                      { display: none !important; }
.has-downloadlist                        { max-height: none !important; overflow: visible !important; }
ul.downloadlist                          { padding-top: 2mm !important; }
ul.downloadlist li                       { font-size: 1em !important; }

/* Externe Links: Ziel dahinter */
.is-textfield a[href^="http"]:not([href*="sfc.com"]):not([href*="sfc-power.com"]):not([href*="sfc-energy.in"]):not([href*="efoy-pro.com"]):not([href*="sfc-multisite2.de"]):after { content: " (" attr(href) ")"; font-size: .85em; color: #8a8a8a; word-break: break-all; }
}

/* Huge Text Animation */
@media only screen and (min-width: 1050px) {
.huge-words.split-text .word             { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.huge-words.split-text .char             { opacity: 1; transform: translateY(-100%); text-transform: uppercase; }
}

/* NoUiSlider */
.s * + .noUi-target                      { margin-top: 60px; }
.s .noUi-target                          { height: 1px; }
.s .noUi-connect                         { background-color: var(--color-green); }
.s .noUi-base                            { background-color: var(--color-grey); }
.s .noUi-base:before                     { content:""; position: absolute; top: -4px; left: -2px; width: 8px; height: 8px; border-radius: 100%; background-color: var(--color-grey); }
.s .noUi-base:after                      { content:""; position: absolute; top: -4px; right: -2px; width: 8px; height: 8px; border-radius: 100%; background-color: var(--color-grey); }
.s .noUi-handle                          { box-shadow: none; border: none; cursor: ew-resize; }
.s .noUi-horizontal .noUi-handle         { border-radius: 100%; width: 40px; height: 40px; background: var(--color-black); top: -20px; }
.s .noUi-handle:after                    { content: "\f104"; font-family: var(--fa-style-family-sharp); font-size: 14px; background: none; height: 40px; width: 20px; top: 0; line-height: 40px; left: 0; color: white; pointer-events: none; }
.s .noUi-handle:before                   { content: "\f105"; font-family: var(--fa-style-family-sharp); font-size: 14px; background: none; height: 40px; width: 20px; top: 0; line-height: 40px; right: 0; text-align: right; color: white; pointer-events: none; }
.s .noUi-tooltip                         { color: var(--color-black); border: none; background: none; font-weight: 600; }
.s .noUi-horizontal .noUi-tooltip        { bottom: -80%; }


/* .schieber.wertlinksundrechts                { position: absolute; left: 0; right: 0; pointer-events: none; color: var(--color-grey); font-size: 16px; } */
.schieber.wertlinksundrechts                { color: var(--color-grey); font-size: 16px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.schieber.wertlinksundrechts .wert.links    { top: -12px; left: -5px; transform: translateX(-100%); position: absolute; }
.schieber.wertlinksundrechts .wert.rechts   { top: -12px; right: -5px; transform: translateX(100%); position: absolute; }

/* Mini Energiekalkulator Auswertung */
#miniauswertung                          { padding: 20px 0 30px 0; display: flex; flex-wrap: wrap; justify-content: center; }
#miniauswertung .auswertung              { display: flex; align-items: center; justify-content: center; position: relative; }
#miniauswertung .auswertung[data-model="kontakt"] { display: flex; text-align: center; }
#miniauswertung .when-double             { display: none; }
#miniauswertung.is-double .when-double   { display: block; font-size: 12px; }
#miniauswertung.is-double .auswertung img { max-width: 170px; margin-right: 20px; }
@media only screen and (orientation: landscape) {
    #miniauswertung.is-double .auswertung + .auswertung { margin-left: 30px; }
}

/* sweetAlert Default Theme umstylen */
.swal2-icon.swal2-info                   { color: var(--color-green); border-color: var(--color-green); }
h2.swal2-title                           { font-weight: normal; }
button.swal2-styled                      { border-radius: 3px !important; font-weight: 600 !important; padding: 0.75em 1em !important; }
button.swal2-confirm.swal2-styled:focus  { box-shadow: none; }
button.swal2-confirm.swal2-styled        { background-color: var(--color-green); }
button.swal2-cancel.swal2-styled         { background-color: var(--color-grey); }

/* Apexcharts */
.apexcharts-tooltip-series-group         { border: none !important; }
.apexcharts-tooltip                      { padding: .6em 1em; }
@media only screen and (min-width: 1050px) {
.chart-container.chart-type-donat        { max-width: 80%; margin-left: auto; margin-right: auto; }
}

/* YouTube Modal a.youtube */
.youtube-modal                           { background-color: rgba(0,0,0,.8); position: fixed; z-index: 25000; display: grid; align-items: center; justify-items: center; top: 0; left: 0; width: 100%; height: 100%; height: 100vh; height: 100dvh; }
.youtube-modal--close                    { position: absolute; line-height: 1; display: grid; align-items: center; justify-items: center; top: 0; right: 0; width: 40px; height: 40px; color: white; font-size: 30px; cursor: pointer; text-align: center; }
.youtube-modal--close:hover              { background-color: white; color: var(--color-green); }
.youtube-modal--inner iframe             { aspect-ratio: 16 / 9; width: 60vw; height: auto; min-width: 500px; max-width: 1300px; border: none; }
@media only screen and (max-width: 1049px) {
.youtube-modal--inner iframe             { width: 90vw; min-width: 300px; }
}

/* Annual Meeting */
.annual-meeting                          { margin-top: 30px; padding: 30px; border: 1px solid var(--color-grey); border-radius: 10px; }
.annual-meeting header                   { padding-bottom: 30px; }
.annual-meeting .shortinfos              { display: flex; }
.annual-meeting .shortinfos > div        { flex-grow: 1; }
td .btn,
.annual-meeting .downloads .btn          { white-space: normal; }

/* Downloadbox */
.download-cat + .download-cat            { margin-top: 60px; }
/* Downloads-Filter (service.sfc.com): Produkt- und Kategorie-Auswahl nebeneinander */
.downloads-filter                        { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center; }
.downloads-filter .downloads-filter-item { flex: 1 1 280px; max-width: 400px; }
.downloads-filter .downloads-filter-item .select { max-width: none; }
/* Deeplink-Hinweise, nur fuer eingeloggte Redakteure ausgegeben: bewusst zurueckhaltend */
.downloads-deeplink                      { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
.downloads-deeplink a                    { color: var(--color-grey); text-decoration: none; border-bottom: 1px dotted var(--color-grey); cursor: pointer; }
.downloads-deeplink a:hover              { color: var(--color-green); border-bottom-color: var(--color-green); }
.downloads-deeplink i                    { margin-right: 4px; }
.downloads-deeplink-current              { flex-basis: 100%; text-align: center; margin-top: 12px; }
.download-cat .downloads-deeplink        { margin: -8px 0 12px; }
.downloadboxes                           { display: grid; grid-template-columns: 1fr; gap: 20px; padding-top: 10px; }
.downloadbox                             { padding: 30px; position: relative; }
.downloadbox .title                      { height: 40px; font-size: 20px; line-height: 1; color: var(--color-green); text-wrap: wrap; word-break: break-word; overflow-wrap: break-word }
ul.downloadlist                          { padding: 30px 0 0 0; }
ul.downloadlist li                       { padding-left: 0; font-size: 14px; color: var(--color-black); display: flex; gap: 10px; }
ul.downloadlist li:before                { content: none !important; }
ul.downloadlist li a                     { text-decoration: none; color: var(--color-black); }
ul.downloadlist li:hover,
ul.downloadlist li:hover a               { color: var(--color-green); }
.has-downloadlist                        { padding: 0; max-height: 204px; overflow: auto; }
body[data-site="service"] .has-downloadlist { max-height: 270px; } /* größerer Zeilenabstand auf service: acht Einträge bleiben offen */
.downloadbox.is-collapsed .has-downloadlist { overflow: hidden; }
.downloadbox.is-expanded .has-downloadlist { overflow: visible; }
.downloadbox.is-collapsed:before         { content:""; position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%); }

.downloadbox                             { min-height: 275px; overflow: hidden; } /* wächst mit dem Inhalt, Liste bleibt per JS einklappbar */
.downloadbox .toggle                     { cursor: pointer; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; padding: 5px 0; background-color: var(--color-green); color: white; text-align: center; }
.downloadbox.is-expanded .has-downloadlist,
.downloadbox.is-expanded                 { max-height: none; height: auto; }

.s.no-bg .downloads-choice              { background-color: var(--color-lightgrey); padding: 2rem; }

/* Special "Downloads" (module/downloads/downloads-choice.php): Produkt-Chips + Kompakt-Variante */
.downloads-choice-products               { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.downloads-choice-products .item         { padding: 5px 14px; border: 1px solid var(--color-grey); border-radius: 20px; font-size: 14px; line-height: 1.4; }
.downloads-choice-products .item .title  { margin: 0; }
.downloads-choice-products.is-filter .item { cursor: pointer; }
.downloads-choice-products.is-filter .item:hover,
.downloads-choice-products .item.is-active { background-color: var(--color-green); border-color: var(--color-green); color: white; }
.downloads-choice-head                   { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; margin-bottom: 20px; }
.downloads-choice-head > .likeh3         { margin-bottom: 0; }
.downloads-choice-filter                 { margin-left: auto; flex: 1 1 240px; max-width: 340px; }
.downloads-choice-filter p               { margin: 0; }
.downloads-choice-filter select          { background-color: white; border-color: white !important; }
.downloads-choice.is-compact .downloadbox  { height: auto; padding: 20px 30px 25px; }
.downloads-choice.is-compact .downloadbox .title { height: auto; }
.downloads-choice.is-compact .has-downloadlist   { height: auto; }
.downloads-choice.is-compact ul.downloadlist     { padding-top: 15px; display: flex; flex-wrap: wrap; gap: 6px 20px; }

@media only screen and (min-width: 680px) {
.downloadboxes             { grid-template-columns: 1fr 1fr; }
}
@media only screen and (min-width: 1100px) {
.downloadboxes             { grid-template-columns: 1fr 1fr 1fr; }
}
@media only screen and (min-width: 1280px) {
.downloadboxes             { grid-template-columns: 1fr 1fr 1fr; }
}

/* Product Preview z.B. bei SFC Power */
.product-preview                         { text-align: center; }
.product-preview .inner                  { background-color: var(--color-lightgrey); margin-top: -60px; padding: 60px 5px; border-radius: 3px; bottom: 0; }
.product-preview .inner p                { font-size: 14px; }
.product-preview .product-preview__pic   { font-size: 12px; color: #ccc; display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 100%; }
a.product-preview                        { text-decoration: none; color: var(--color-black); } 

/* Product Comparision Swiper (SFC Power) */
.power-product-comparison .r-swiper-sm .swiper    { cursor: inherit; }
.power-product-comparison .swiper .swiper-slide  { width: 300px; }

/* Glossar */
.glossarteaser                           { padding: 30px 0; }
.glossarteaser + .glossarteaser          { border-top: 1px solid var(--color-lightgrey); }
.glossary-letter                         { display: flex; padding-bottom: 30px; }
.glossary-letter + .glossary-letter      { padding-top: 30px; border-top: 1px solid var(--color-grey);  }
.glossary-letter--bigletter              { flex: 0 0 110px; }
.glossary-letter--bigletter .likeh1      { color: var(--color-green); font-size: 5em; line-height: 1; }
.glossary-letter--articles               { padding-top: 10px; display: flex; flex: 1 1 auto; gap: 20px; flex-direction: column; }
.glossary-letter--articles h3            { font-size: 1.3em; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.glossary-letter--articles a             { color: var(--color-black); }
.glossary-letter--articles a:hover       { color: var(--color-green); }
@media only screen and (max-width: 1049px) {
.glossary-letter--bigletter              { flex-basis: 70px; }
.glossary-letter--bigletter .likeh1      { font-size: 3em; }
}

/* Glossar-Eintrag: die vielen h2 optisch auf h3-Größe zurücknehmen (Semantik bleibt h2) */
body.glossary-entry .container h2,
body.glossary-entry .container .likeh2   { font-size: 1.6em; line-height: 1.3; }
body.glossary-entry .faq-question .question h3 { font-size: 1.6em; line-height: 1.3; }

/* Paragraphen Zeichen Schriftart in Überschriften ersetzen */
h1 span.replace-paragraph, h2 span.replace-paragraph, h3 span.replace-paragraph, h4 span.replace-paragraph, h5 span.replace-paragraph,
.likeh1 span.replace-paragraph, .likeh2 span.replace-paragraph, .likeh3 span.replace-paragraph, .likeh4 span.replace-paragraph, .likeh5 span.replace-paragraph { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; }

/* MARK: Zeitstrahl */
.zeitstrahl-wrapper                 { width: 100%; overflow: hidden; }
.zeitstrahl                         { position: relative; display: flex; gap: 60px; width: fit-content; overflow: visible; padding: 60px 20vw 60px 20vw; }
.zeitstrahl:before                  { content:""; position: absolute; top: 110px; left: 0; width: 100%; width: calc( 100% - 20vw); height: 4px; background-color: var(--color-green); pointer-events: none; }
.zeitstrahl:after                   { content:""; position: absolute; width: 30px; height: 40px; background-color: var(--color-green); top: 92px; right: calc(20vw - 10px); clip-path: polygon(0 0, 100% 50%, 0 100%); pointer-events: none;  }
.zeitstrahl .item .inner            { display: flex; flex-direction: column; gap: 20px; width: 500px; }
.zeitstrahl .item p                 { margin: 0; }
.zeitstrahl .item img.is-pic.is-landscape { max-width: 300px; }
.zeitstrahl .item img.is-pic.is-portrait  { max-width: 200px; }
.zeitstrahl .item img.is-pic.is-square    { max-width: 250px; }
.zeitstrahl .item .is-date          { margin-bottom: 30px; }
.zeitstrahl .item .is-year          { color: var(--color-green); }
.zeitstrahl .item.is-yearmarker     { width: 100px; }
.zeitstrahl .item.is-yearmarker .yearmarker { position: absolute; font-weight: 600; z-index: 100; padding: 13px 32px 13px 26px; background-color: var(--color-green); color: white; clip-path: polygon(0% 0%, calc( 100% - 20px ) 0%, 100% 20px, 100% 100%, 0% 100%); }
@media only screen and (max-width: 1049px) {
.zeitstrahl-wrapper                 { overflow-x: scroll; overscroll-behavior: contain; width: 100%; scroll-behavior: smooth; scroll-snap-type: x proximity; }
.zeitstrahl                         { gap: 40px; padding: 60px 30px; }
.zeitstrahl .item .inner            { width: 60vw; }
.zeitstrahl .item img.is-pic.is-landscape { max-width: 200px; }
.zeitstrahl .item img.is-pic.is-portrait  { max-width: 100px; }
.zeitstrahl .item img.is-pic.is-square    { max-width: 150px; }
}

/* Audioplayer */
* + .wp-audio-shortcode             { margin-top: 1em; }
@media only screen and (orientation: landscape) {
td audio                                { min-width: 400px; }
}

/* MARK: EFOY References Referenzen */
.reference-grid                         { display: grid; grid-template-columns: 1fr; gap: 30px; }
.reference-teaser-container .reference-teaser       { position: relative; display: flex; flex-direction: column; gap: 20px; background-color: white; text-decoration: none; }
.reference-teaser-container .reference-teaser .teaser-img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.reference-teaser-container .reference-teaser .inner      { padding: 0 1rem 1rem 1rem; flex-grow: 1; display: flex; flex-direction: column; }
.reference-teaser-container .reference-teaser .inner h4   { margin-top: 0; margin-bottom: 10px; }
.reference-teaser-container .reference-teaser .inner p    { flex-grow: 1; }
.reference-teaser-container .reference-teaser .inner a    { margin-top: 20px; align-self: flex-start; text-decoration: none; color: var(--color-green); font-weight: 600; }
.reference-teaser-container .reference-teaser .reference-teaser-badge { position: absolute; top: 20px; left: 20px; background-color: var(--color-green); color: white; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: 3px; }
.reference-teaser-container .reference-teaser .reference-teaser-performance { position: absolute; top: 20px; right: 20px; background-color: white; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: 3px; }

.reference-filter                       { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }

@media only screen and (orientation: landscape) {
.reference-grid                         { grid-template-columns: 1fr 1fr 1fr; }
}

/* EFOY References Slider */
.reference-teaser-swiper { margin-top: 1rem; }
@media only screen and (max-width: 1050px) {
.reference-teaser-swiper .swiper-slide    { width: 70vw; margin-right: 20px; }
.reference-teaser-swiper .swiper-slide:last-child { margin-right: 0; }
}
@media only screen and (min-width: 1050px) {
.reference-teaser-swiper .swiper-slide    { width: 30%; min-width: 400px; max-width: 500px; margin-right: 30px; }
.reference-teaser-swiper .swiper-slide .reference-teaser { height: 100%; }
.reference-teaser-swiper .swiper-slide:last-child { margin-right: 0; }
.reference-teaser-swiper .swiper[data-count="2"] .swiper-slide { width: 48%; max-width: 1200px; margin-right: 4%; }
}

/* MARK: EFOY Application Teaser (Grid) - module/applications/startpage-teaser.php */
.app-teaser-grid                        { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 16px; }
.app-tile                               { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; background-color: white; color: var(--color-black); text-decoration: none; overflow: hidden; isolation: isolate; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); transition: transform .3s; }
.app-tile.is-big                        { grid-column: span 2; grid-row: span 2; color: white; }
.app-tile:before                        { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: var(--color-green); z-index: 2; transition: width .3s; }
.app-tile:hover:before                  { width: 6px; }
.app-tile-img                           { position: absolute; inset: 0; z-index: -2; opacity: 0; transform: scale(1.05); transition: opacity .5s ease, transform .9s ease; }
.app-tile-img .is-pic, .app-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-tile-img .is-pic                   { position: absolute; inset: 0; }
.app-tile-img img                       { filter: grayscale(1); }
.app-tile:after                         { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(255,255,255,.97) 30%, rgba(255,255,255,.55) 100%); opacity: 0; transition: opacity .5s; }
.app-tile:hover .app-tile-img           { opacity: 1; transform: none; }
.app-tile:hover:after                   { opacity: 1; }
.app-tile.is-big .app-tile-img          { opacity: 1; transform: none; }
.app-tile.is-big .app-tile-img img      { filter: grayscale(.2); }
.app-tile.is-big:after                  { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 55%, transparent 100%); }
.app-tile-icon                          { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; z-index: 1; }
.app-tile-icon svg                      { width: 100%; height: 100%; display: block; }
.app-tile.is-big .app-tile-icon svg path, .app-tile.is-big .app-tile-icon svg circle, .app-tile.is-big .app-tile-icon svg rect { fill: white; }
.app-tile.is-big .app-tile-icon svg [fill="white"] { fill: transparent; }
.app-tile-body                          { position: relative; z-index: 1; display: flex; flex-direction: column; }
.app-tile-label                         { font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: var(--color-green); font-weight: 600; margin-bottom: .5em; max-height: 3em; overflow: hidden; transition: opacity .3s, max-height .4s, margin-bottom .4s; }
.app-tile:not(.is-big):hover .app-tile-label { opacity: 0; max-height: 0; margin-bottom: 0; } /* Label beim Hover immer weg, unabhaengig von der Claim-Zeilenzahl */
.app-tile-claim                         { font-size: 1.45em; line-height: 1.1; color: inherit; }
.app-tile.is-big .app-tile-claim        { font-size: 2em; }
.app-tile-text                          { font-size: .9em; line-height: 1.45; margin-top: .5em; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .4s .1s; }
.app-tile.is-big .app-tile-text         { color: #e6e9ec; max-height: 6em; opacity: 1; }
.app-tile:hover .app-tile-text          { max-height: 6em; opacity: 1; }
.app-tile-more                          { margin-top: .7em; font-size: .9em; font-weight: 600; color: var(--color-green); opacity: 0; transform: translateX(-6px); transition: all .4s; }
.app-tile-more:before                   { content: "\f105"; font-family: "FA6"; font-weight: 900; font-size: .8em; margin-right: 7px; }
.app-tile:hover .app-tile-more          { opacity: 1; transform: none; }
@media only screen and (max-width: 1049px) {
.app-teaser-grid                        { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; gap: 10px; }
.app-tile                               { padding: 18px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.app-tile.is-big                        { grid-column: span 2; grid-row: span 1; grid-auto-rows: 240px; }
.app-tile-img                           { opacity: 1; transform: none; }
.app-tile:after                         { opacity: 1; background: linear-gradient(to top, rgba(255,255,255,.97) 40%, rgba(255,255,255,.6) 100%); }
.app-tile-icon                          { width: 30px; height: 30px; top: 14px; right: 14px; }
.app-tile-claim                         { font-size: 1.1em; }
.app-tile.is-big .app-tile-claim        { font-size: 1.5em; }
.app-tile-text, .app-tile-more          { display: none; }
.app-tile.is-big .app-tile-text         { display: block; }
}
@media only screen and (max-width: 480px) {
.app-teaser-grid                        { grid-template-columns: 1fr; grid-auto-rows: 160px; }
.app-tile.is-big                        { grid-column: span 1; grid-row: span 2; } /* 160 px reichen fuer Label, Claim und Text nicht, der Inhalt lief oben aus der Kachel */
}

/* SFC Power Introvideo */
.sid-13 #introvideo                     { display: flex; align-items: center; background-color: rgba(0,0,0,.1); }
.sid-13 #introvideo .bg.white           { background-color: rgba(255,255,255,.93); }
.sid-13 .bg-video                       { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.sid-13 .bg-video video                 { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (orientation: portrait) {
.sid-13 #introvideo                     { height: 50vh !important; }
.sid-13 #introvideo .container          { margin-left: 30px; margin-right: 30px; }
}
@media only screen and (orientation: landscape) {
.sid-13 #introvideo .container          { transform: translateY(10vh); }   
}

/* SFC Power Herobild */
.sid-13 #mainintro .bgimage img        { object-fit: cover; object-position: center bottom; }

/* service.sfc.com */
li.region-sensitive                     { display: none; }
li.region-sensitive.visible             { display: list-item; }
#serviceSettingsInfo                    { display: flex; gap: 20px; align-items: center; cursor: pointer; color: var(--color-green); }
#serviceSettingsInfo:hover              { color: var(--color-black); }
#serviceSettingsInfo .item              { display: flex; gap: 10px; align-items: center; }

/* Freshdesk Pages Service Seite */
.freshdesk-level-1 + .freshdesk-level-1 { margin-top: 3rem; }
.freshdesk-level2-container             { display: grid; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.freshdesk-page.freshdesk-level-2       { padding: 1rem; background-color: var(--color-lightgrey); }
.freshdesk-page.freshdesk-level-3 a     { text-decoration: none; }
.freshdesk-page.freshdesk-level-3 a:hover { text-decoration: underline; }

/* Company RMA Formulare Service Seite */
.rma-fuel-cells.template-container      { margin-top: 30px; }
@media only screen and (orientation: portrait) {
.company-rma-logo.is-landscape { max-width: 70vw; }
.company-rma-logo.is-portrait { max-width:none; max-height: 30vh; }
}
@media only screen and (orientation: landscape) {
.company-rma-logo.is-landscape { max-width: 400px; }
.company-rma-logo.is-portrait { max-width:none; max-height: 200px; }
}

@media only screen and (orientation: landscape) {
.freshdesk-level2-container             { grid-template-columns: 1fr 1fr 1fr; }
}

/* Download Modal */
.open-download-modal.active             { display: none; }
.download-modal                         { display: none; flex-direction: column; gap: 1rem; padding: 2rem; background-color: var(--color-lightgrey); text-align: left; transition: opacity 1s; }
.download-modal a                       { text-decoration: none; }
.download-modal .download-files         { display: flex; flex-direction: column; gap: 10px; }
p:has(.open-download-modal.active) + .download-modal { display: inline-flex; }

/* AI Service Assistant */
iframe#ai-assistant                     { width: 100%; height: 100vh; height: calc( 100vh - 200px); overflow: auto; }

/* Service Questions */
.check-user #smooth-wrapper             { opacity: 0; pointer-events: none; visibility: hidden;}
.check-user #mainlanguageswitcher       { display: none; }
#questions  							{ display: none; align-items: center; justify-content: center; overflow: auto; position: fixed; z-index: 999; top: 0; left: 0; width: 100vw; height: 100dvh; background: white; }	
.questionaire-active #questions         { display: flex; }
#questions-container                    { display: flex; flex-direction: column; gap: 20px; width: 90vw; max-width: 800px; padding: 60px; border-radius: 10px; background-color: rgba(255,255,255,.9); border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); }
.questions-step                         { display: none; }
.questions-step.active                  { display: block; }
.question-headline                      { text-align: center; margin-bottom: 30px; }
.question-action                        { margin-top: 1em; display: flex; align-items: center; justify-content: center; gap: 20px; }
.question                               { display: flex; align-items: center; justify-content: space-between; }
.question.center                        { justify-content: center; }
.question .select2                      { flex-basis: 40%; background-color: var(--color-lightgrey); }
.question .select2-selection__rendered  { text-align: center; background-color: var(--color-lightgrey); }
.check-user li.select2-results__option--disabled { display: none !important; }
@media only screen and (max-width: 850px) {
#questions                              { padding: 30px 0; }
#questions-container                    { padding: 20px; gap: 30px; width: 100vw; }
}
@media only screen and (min-width: 850px) {
#questions  							{ background: url('/theme/module/worldmap/assets/bg-reduced.png') center center no-repeat; }
}

/* Service Settings Switcher */
#serviceSettingsSwitcher                { display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; }
#serviceSettingsSwitcher:hover .item    { color: var(--color-black); }
#serviceSettingsSwitcher .item          { display: flex; align-items: center; gap: 10px; text-align: left; text-wrap: nowrap; color: var(--color-green); }
#serviceSettingsSwitcher .item .icon    { width: 30px; flex-basis: 30px; text-align: center;}

/* Google Maps allgemein */
.map                                    { aspect-ratio: 16 / 7; background-color: grey; }
@media only screen and (orientation: portrait) {
    .map                                { aspect-ratio: 9 / 16; }
}

/* Dealermap */
.s.no-bg:has( + #is-dealermap)          { padding-bottom: 0; }
.heandlerkartefilter                                                    { display: flex; width: 100%; gap: 20px; align-items: center; justify-content: center; }
.heandlerkartefilter.intro                                              { font-weight: 500; }
.heandlerkartefilter .filterbtn                                         { border: 3px solid #f4f4f4; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 5px; background-color: #f4f4f4; }
.heandlerkartefilter .filterbtn.active[data-showPinCat="ClickCollect"]  { border-color: #DF7614; }
.heandlerkartefilter .filterbtn.active[data-showPinCat="Caravan"]       { border-color: #65B330; }
.heandlerkartefilter .filterbtn.active[data-showPinCat="Marine"]        { border-color: #307CB3; }
.heandlerkartefilter .filterbtn.active[data-showPinCat="Hybrid"]        { border-color: #65B330 #307CB3 #307CB3 #65B330; }
@media only screen and (max-width: 850px) {
.heandlerkartefilter { display: flex; width: 100%; flex-direction: column; }
}
#dealermap                               { margin: 30px auto; display: block; background-color: var(--color-green); width: 100%; max-width: 1600px; aspect-ratio: 3 / 2; }
@media only screen and (orientation: landscape) {
#dealermap                              { aspect-ratio: 16 / 7; border-radius: 10px; }
}
@media only screen and (orientation: landscape) and (min-height: 800px) {
#dealermap                              { aspect-ratio: 16 / 10; }
}
/* Google Maps Tooltip Modal */
.gm-style-iw.gm-style-iw-c                  { width: 300px; padding: 30px 0; }
.gm-style-iw-d p                            { font-size: 16px; text-align: center; }
.gm-style img                               { max-width: 100%; }

/* service.sfc.com Menü */
.sid-7 #mn li.region-sensitive,
.sid-7 #mn li.company-sensitive            { display: none; } 
.sid-7 #mn li.region-sensitive.visible,
.sid-7 #mn li.company-sensitive.visible    { display: list-item; }

/* BG Image Slideshow (Sektion mit ACF bg_slides, layouts.php + js initBackgroundImageSlideshow) */
.bgimage.slideshow .is-pic                 { opacity: 0; transition: opacity 1.5s ease-in-out; }
.bgimage.slideshow .is-pic.active          { opacity: 1; }
.bgimage.slideshow .is-pic + .is-pic       { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bgimage.slideshow .is-pic + .is-pic,
.bgimage.slideshow .is-pic + .is-pic img   { max-width: 100%; } /* Bilder ohne src (lazy) sonst mobil so breit wie ihr Seitenverhaeltnis */
@media only screen and (min-width: 1050px) {
.bgimage.slideshow .is-pic                 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
@media only screen and (max-width: 1049px) {
.square-image-xs .bgimage.slideshow        { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
.bgimage.slideshow .is-pic                 { transition: none; }
}

/* KI-Kennzeichnung (Stufe pro Bild in der Mediathek, functions-helper.php wdm_ai_hint / renderImage) */
.is-pic.has-ai-hint,
.ai-wrap                                   { position: relative; }
.ai-wrap                                   { display: block; line-height: 0; }
.ai-wrap.inline                            { display: inline-block; max-width: 100%; vertical-align: top; }
.ai-hint                                   { position: absolute; z-index: 1; right: 10px; bottom: 10px; font-size: 12px; font-weight: normal; line-height: 1; letter-spacing: normal; text-transform: none; padding: 5px 8px; border-radius: 3px; color: white; background: rgba(0,0,0,0.5); pointer-events: none; white-space: nowrap; }
.bgimage .ai-hint                          { right: 15px; }
.is-pic.corner-right-bottom-xs > .ai-hint,
.is-pic.corner-right-bottom-sm > .ai-hint,
.linkswiperbox.corner-right-bottom-xs .ai-hint,
.linkswiperbox.corner-right-bottom-sm .ai-hint { right: auto; left: 10px; } /* abgeschraegte Ecke wuerde den Hinweis anschneiden */
.zeitstrahl .item .ai-wrap                 { align-self: flex-start; } /* .inner ist eine Flex-Spalte, sonst so breit wie die Spalte statt wie das Bild */
.app-tile-img .ai-hint                     { display: none; } /* liegt unter dem Verlauf der Kachel, application-teaser.php setzt den Hinweis eine Ebene hoeher */
.app-tile > .ai-hint                       { top: 10px; left: 10px; right: auto; bottom: auto; }
#mn .is-menu-pic.has-ai-hint              { position: relative; display: inline-block; line-height: 0; }
#mn .ai-hint                               { right: 4px; bottom: 4px; font-size: 10px; padding: 3px 5px; } /* Menuebilder sind nur 80-150 px breit */
@media only screen and (min-width: 1050px) {
.bgimage:not(.slideshow) .is-pic.has-ai-hint { max-height: calc(100% / 1.1); } /* .bgimage ist 110 % hoch (unteres Elftel ausserhalb der Sektion); das Bild kann auch niedriger sein als die Sektion */
.bgimage:not(.slideshow) .ai-hint          { bottom: 15px; }
.bgimage.slideshow .ai-hint                { bottom: calc(100% / 11 + 15px); } /* Slides sind so hoch wie .bgimage */
.app-tile:not(.is-big) > .ai-hint          { opacity: 0; transition: opacity .5s; } /* Bild der kleinen Kacheln erscheint erst beim Hover */
.app-tile:not(.is-big):hover > .ai-hint    { opacity: 1; }
:has(> .flybox.absolute-right-bottom-sm, > .flybox.absolute-right-bottom-gap-sm) .is-pic .ai-hint { right: auto; left: 10px; } /* Flybox rechts unten verdeckt sonst den Hinweis */
}
@media only screen and (max-width: 1049px) {
.bgimage .ai-hint                          { top: 15px; bottom: auto; }
:has(> .flybox) .is-pic .ai-hint           { bottom: 50px; } /* Flybox ragt mobil 30 px (Bild) bzw. 40 px (Slider-Schraege) ins Bild */
}

/* Academy Events Grid */
#academy-grid                              { padding: 1rem 0; display: grid; gap: 1rem; }
#academy-grid .linkbox + .linkbox          { margin: 0; }
#academy-grid .linkbox .c                  { height: 100%; }
#academy-grid .academy-month               { grid-column: 1 / -1; margin: 0; }
#academy-grid .academy-month + *           { margin-top: 0; }
#academy-grid .academy-month:not(:first-child) { margin-top: 1.5rem; }
@media only screen and (orientation: landscape) {
#academy-grid                               { grid-template-columns: 1fr 1fr 1fr; }
}

/* SF-Preview, beim Go-Live entfernen */
/* position: fixed statt sticky — ScrollSmoother fixiert #smooth-wrapper, dadurch scrollt der
   body nicht und sticky hätte keinen scrollenden Vorfahren, an dem es kleben könnte. */
#sf-preview-note                           { position: fixed; left: 0; top: 0; z-index: 30000; display: block; width: 100%; padding: 10px 20px; background-color: #c00; color: white; font-size: 13px; text-align: center; }
#sf-preview-note a                         { color: white; text-decoration: underline; }


/* ==========================================================================
   TYPOGRAFIE-FEINSCHLIFF (eingearbeitet 28.08.2026)
   Vormals eigene Datei css/finetune.css, per <link> nach dieser Datei geladen
   und durch ein Admin-/Cookie-Gate begrenzt. Beides entfernt: der Feinschliff
   gilt jetzt fuer alle Sites der MultiSite und spart einen Request.

   MUSS AM DATEIENDE STEHEN. Mehrere Regeln haben dieselbe Spezifitaet wie ihr
   Original in above-the-fold.css (h1-h5, .meta, .small, * + h2..h6) und
   gewinnen nur ueber die Position. Nicht nach oben sortieren, nicht in
   above-the-fold.css verschieben.

   Aufbau: Sektion 0 = alle Stellschrauben, Sektionen 1-9 einzeln loeschbar
   fuer Revert pro Feature. Sektion 3 (h6) wurde im Review verworfen.
   ========================================================================== */

/* 0 · TOKENS ------------------------------------------------------------- */

:root {
	/* Headline-Skala (em — reitet auf der fluiden Schriftbasis aus Sektion 1) */
	--ft-h1: 3.05em;			--ft-lh-h1: 1.12;
	--ft-h2: 2.35em;			--ft-lh-h2: 1.16;
	--ft-h3: 1.65em;			--ft-lh-h3: 1.25;
	--ft-h4: 1.35em;			--ft-lh-h4: 1.3;
	--ft-h5: 1.15em;			--ft-lh-h5: 1.3;

	/* Laufweite */
	--ft-track-display: -0.01em;	/* große DigitalSerial-Headlines minimal enger */
	--ft-track-small: 0.02em;		/* Kleintext minimal offener */

	/* Rhythmus: Luft ÜBER Headings (in em des jeweiligen Headings) */
	--ft-above-h2: 1.2em;
	--ft-above-h3: 1.4em;
	--ft-above-h4: 1.5em;
	--ft-above-h56: 1.6em;

	/* Heading → erster Absatz (enge Bindung nach unten) */
	--ft-h-to-p: .7em;
}

/* Smartphone: heute sind h1 und h2 identisch (2.4em) — Hierarchie über
   h2-Absenkung herstellen. h1 bewusst NICHT vergrößern: schon +6% bricht
   z. B. die Hero-Zeile "Anytime, anywhere." bei 390px um (im Review getestet). */
@media only screen and (max-width: 1049px) {
	:root {
		--ft-h1: 2.4em;			--ft-lh-h1: 1.15;
		--ft-h2: 2.25em;		--ft-lh-h2: 1.2;
	}
}


/* 1 · FLUIDE SCHRIFTBASIS -------------------------------------------------
   Die ganze Seite skaliert über die em-Kaskade (Buttons, Counter, Blockquotes
   etc.) — deshalb wird nur die Basis fluid, nicht jedes Element einzeln.
   < 1050px: unverändert 16px. */

@media only screen and (min-width: 1050px) {
	/* glättet den harten 16→18px-Sprung bei 1300px: 16px@1050 → 18px@1440 */
	.likep,
	html, body, li 						{ font-size: clamp(16px, 10.62px + 0.513vw, 18px); }
	/* längere Desktop-Zeilen vertragen etwas mehr Durchschuss */
	p, li 								{ line-height: 1.55; }
}

@media only screen and (min-width: 1920px) {
	/* breite Monitore: 18px@1920 → 19px@2560 (heute stagniert alles ab 1300px) */
	.likep,
	html, body, li 						{ font-size: clamp(18px, 15px + 0.15625vw, 19px); }
}


/* 2 · HEADLINE-SKALA & ZEILENHÖHEN ---------------------------------------
   line-height 1 (h1) klemmt Umlaute/Unterlängen bei Zweizeilern —
   dafür die Größen haarfein zurückgenommen. */

h1, .likeh1 							{ font-size: var(--ft-h1); line-height: var(--ft-lh-h1); }
h2, .likeh2 							{ font-size: var(--ft-h2); line-height: var(--ft-lh-h2); }
h3, .likeh3 							{ font-size: var(--ft-h3); line-height: var(--ft-lh-h3); }
h4, .likeh4 							{ font-size: var(--ft-h4); line-height: var(--ft-lh-h4); }
h5, .likeh5 							{ font-size: var(--ft-h5); line-height: var(--ft-lh-h5); }

@media only screen and (max-width: 1049px) {
	/* nur das h3-ELEMENT (heute 2em ≈ h2-Größe, Stufen wiederherstellen).
	   .likeh3 bewusst NICHT: dient als Kicker über h1 und bekam die mobile
	   2em wegen des .lik3h3-Typos in above-the-fold.css:181 nie — Status quo. */
	h3 									{ font-size: 1.8em; line-height: 1.25; }
}


/* 3 · H6-ANOMALIE-FIX — ENTFERNT (Review 28.08.2026) -----------------------
   Die Absenkung h6 1.5em → 1.1em wurde vor dem Livegang verworfen: h6 dient
   auf sfc.com als Abschnitts-Label (module/investor/hauptversammlungen.php,
   77 Vorkommen) und .likeh6 als News-Titel (module_eqs_news_ajax.php:154).
   In beiden Fällen fiel der Text unter die Wirkung des Fließtexts daneben,
   die Hierarchie kippte. Screenshots: .screenshots/finetune/crops2/
   {eqs,agm}-1300-{before,preview}.png. h6 bleibt damit bei 1.5em
   (above-the-fold.css:50). Damit bleibt auch der efoy-Hero (Site 12,
   module/efoy-hero/efoy-hero.php, 6x .likeh6) unverändert.
   ========================================================================== */


/* 4 · LAUFWEITE (heute nirgends gesetzt) ---------------------------------- */

h1, h2, .likeh1, .likeh2, .huge-words 	{ letter-spacing: var(--ft-track-display); }
.meta, .small, label 					{ letter-spacing: var(--ft-track-small); }


/* 5 · VERTIKALER RHYTHMUS -------------------------------------------------
   Mehr Luft über Headings, engere Bindung zum eigenen Absatz darunter. */

/* Pflicht-Begleiter: Original-Transition (above-the-fold.css:36) animiert
   margin mit 1s Delay — ohne diese Re-Deklaration würden die neuen Margins
   bei JS-Klassenwechseln nachruckeln. */
h1, h2, h3, h4, h5, h6,
.likeh1, .likeh2, .likeh3, .likeh4, .likeh5, .likeh6 { transition: padding .3s 1s, border .3s 1s; }

* + h2, * + .likeh2 					{ margin-top: var(--ft-above-h2); }
* + h3, * + .likeh3 					{ margin-top: var(--ft-above-h3); }
* + h4, * + .likeh4 					{ margin-top: var(--ft-above-h4); }
* + h5, * + h6,
* + .likeh5, * + .likeh6 				{ margin-top: var(--ft-above-h56); }
/* h1 bleibt bei 1em (≈55px, reicht); Kicker-Muster .likeh3 + .likeh1 (10px)
   hat höhere Spezifität und überlebt unangetastet. */

:is(h1, h2, h3, h4, h5, h6, .likeh1, .likeh2, .likeh3, .likeh4, .likeh5, .likeh6) + p { margin-top: var(--ft-h-to-p); }

/* Liste gehört zu ihrem Anmoderations-Satz */
p + ul, p + ol 							{ margin-top: .7em; }

/* Luft zwischen Content-Listenpunkten — :not([class]) schließt Navi,
   Tagcloud, Downloadlist etc. aus (tragen alle Klassen) */
.s :is(ul, ol):not([class]) li + li 	{ margin-top: .3em; }


/* 6 · KLEINTEXT ----------------------------------------------------------- */

.meta 									{ font-size: 13px; line-height: 1.4; }	/* 12px neben 18px Fließtext war zu klein */
.small 									{ line-height: 1.4; }					/* kleine Grade brauchen relativ mehr Durchschuss */


/* 7 · SEKTIONS-RHYTHMUS AUF BREITEN MONITOREN ----------------------------- */

@media only screen and (min-width: 1920px) {
	.s 									{ padding: 96px 0; }
	.s.bg-image-sm 						{ padding: 140px 0; }
	/* Re-Assert: diese beiden Ausnahmen aus above-the-fold.css:77/83 sind
	   Single-Class und würden sonst vom späteren .s-Padding geschlagen */
	.no-padding-top 					{ padding-top: 0; }
	.no-padding-bottom 					{ padding-bottom: 0; }
}


/* 8 · POLISH (kein Typo, aber risikofrei) --------------------------------- */

/* Tastatur-Fokus (heute existiert gar kein Fokus-Stil) — für Maus unsichtbar */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

::selection 							{ background: var(--color-green); color: #fff; }

/* gleiche Ziffernbreiten → kein Zittern beim Hochzählen */
.number-counter 						{ font-variant-numeric: tabular-nums; }


/* 9 · (AUS) KONTRAST — User-Entscheid -------------------------------------
   .likep/.meta nutzen --color-grey #AAA = 2,3:1 auf Weiß (a11y-Fail).
   #767676 wäre AA (4,54:1). Bewusst die Konsumenten überschreiben, nicht
   das Token — --color-grey speist auch Swiper-Bullets/Slider-UI.
   Zum Aktivieren einkommentieren:

.likep, .meta 							{ color: #767676; }
*/