/****************************************************************************************************
*** Fonts
****************************************************************************************************/
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fa-solid-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/raleway-v34-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/raleway-v34-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/raleway-v34-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/raleway-v34-latin-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/***************************************************************************************************
*** Vendor: tiny-slider.js
***************************************************************************************************/
/*** Navigation-Dots ***/
.tns-nav { text-align: center; margin-top: 2rem; }
.tns-nav > [aria-controls] { width: 1rem; height: 1rem; padding: 0; margin: 0 5px; border-radius: 50%; background: rgba(255, 255, 255, 1); border: 1px solid rgb(var(--bs-primary-rgb)); }
[class*="bg-primary"] .tns-nav > [aria-controls] { border-color: rgb(255, 255, 255); }
.tns-nav > .tns-nav-active { background: rgba(var(--bs-primary-rgb), 1); }

/****************************************************************************************************
*** System-Elemente
****************************************************************************************************/
a[type=button] { appearance: none; -webkit-appearance: none; }
::selection { background: var(--bs-primary); color: rgb(255, 255, 255); text-shadow: none; }
:active, :focus { outline: none !important; }
:focus { outline: none !important; }
:focus-visible { outline: 2px dotted red; }

/****************************************************************************************************
*** Template-Elemente
****************************************************************************************************/
html, body { width: 100%; margin: 0; padding: 0; overscroll-behavior-y: none; }
html { scroll-behavior: smooth; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: var(--bs-primary); scroll-padding-top: 5rem; }
body { position: relative; height: 100%; -ms-word-wrap: break-word; word-wrap: break-word; }
/*** <hr>-Element ***/
hr { margin: 2rem 0; opacity: 1; border-color: rgb(var(--bs-primary-rgb)); width: 70%; }
/*** Link mit button-Attribut nicht als System-Element rendern ***/
a[type=button] { appearance: none; }
/*** transition Effekt auf alle Links legen ***/
a, a:hover { transition: all 0.2s ease; }
/*** Button-Hover-Effekt ***/
.btn-primary:hover { background-color: rgba(var(--bs-secondary-rgb), 1); color: rgb(var(--bs-primary-rgb)); border-color: rgb(var(--bs-secondary-rgb)); }
.btn-secondary:hover { background-color: rgba(var(--bs-primary-rgb), 1); color: rgb(255,255,255); border-color: rgb(var(--bs-primary-rgb)); }
/*** Nebeneinanderstehende Linkbuttons => Abstand zwischen den Buttons einfügen ***/
a.btn + a.btn { margin-left: 2rem; }
.location-finder a.btn + a.btn { margin-left: 0; } /* Abstand zwischen den Buttons im Location Finder unerwünscht */
/*** Buttons in CKE => Abstand einfügen ***/
p > a.btn { margin: 2rem 0; }
/*** Icon-Liste ***/
.icon-list-item { margin-bottom: 1.5rem; }
.icon-list-item .icon-list-title { display: block; font-size: 1.25rem; font-weight: 700; hyphens: auto; }

section > .container > section > .container { max-width: 100% !important;}
/****************************************************************************************************
/*** Media-Element => HTMLGenerator::parse_image() ***/
/****************************************************************************************************

/*** Lightbox-Wrapper auf inline-block setzen, damit x- und y-Ausrichtung eines eingestellten Medium funktioniert ***/
.pswp-gallery { display: inline-block; } 
/*** Media-Element => Caption ***/
figure { position: relative; }
figcaption, .pswp__custom-caption { position: absolute; bottom: 0; background-color: rgb(var(--bs-primary-rgb)); color: rgb(255, 255, 255); font-size: 0.875rem; padding: 0.25rem 0.5rem; }
.pswp__custom-caption { left: 50%; transform: translateX(-50%); }
/*** Farbfilter für Vektorgrafiken (Basis: schwarz) => https://codepen.io/sosuke/pen/Pjoqqp ***/
.svg-primary { --filter-base: invert(48%) sepia(60%) saturate(360%) hue-rotate(135deg) brightness(98%) contrast(91%); filter: var(--filter-base); }
.svg-secondary { --filter-base: invert(85%) sepia(39%) saturate(179%) hue-rotate(132deg) brightness(86%) contrast(90%); filter: var(--filter-base);}
.svg-tertiary { --filter-base: invert(22%) sepia(29%) saturate(2728%) hue-rotate(154deg) brightness(100%) contrast(101%); filter: var(--filter-base);}
.svg-black { --filter-base: invert(0%) sepia(0%) saturate(0%) hue-rotate(333deg) brightness(97%) contrast(103%); filter: var(--filter-base);}
.svg-white { --filter-base: invert(100%) sepia(100%) saturate(2%) hue-rotate(197deg) brightness(104%) contrast(101%); filter: var(--filter-base);}
/*** Iconfarbe bei Scrolling (nur Index) ändern ***/
header.index .svg-white { --filter-base: invert(0%) sepia(0%) saturate(0%) hue-rotate(333deg) brightness(97%) contrast(103%); filter: var(--filter-base);}
header.index.header-scrolled .svg-white {--filter-base: invert(100%) sepia(100%) saturate(2%) hue-rotate(197deg) brightness(104%) contrast(101%); filter: var(--filter-base);}
/*** nur in Navigation: Drop-Shadow hinzufügen ***/ 
.nav-icon img[class*="svg-"] { filter: var(--filter-base) drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.75)); }

/*** <header> + <nav> ***/
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; padding: 0; background-color: rgba(var(--bs-primary-rgb), 1); transition: all 0.3s ease; box-shadow: 0rem -1rem 3rem rgba(var(--bs-primary-rgb, 0.25)); }
header.index { box-shadow: none; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); }
header.header-scrolled { box-shadow: 0rem -1rem 3rem rgba(var(--bs-primary-rgb, 0.25)); }
/*** Header (Startseite) ***/
/*header.header-scrolled #main-menu { background-color: rgba(var(--bs-primary-rgb), 0.75); top: 0; padding: 1rem 0; }
header.header-scrolled:not(.index) #main-menu { padding: 1rem 0 1rem; }
header.header-scrolled #main-menu ul { align-items: center; }
header.header-scrolled #main-menu ul li ul.dropdown-menu { background-color: rgba(var(--bs-primary-rgb), 0.75); top: 0; padding: 0.5rem 0; border-color: rgb(255, 255, 255); }*/

/*** Navigation (Desktop) ***/
header #main-menu { align-items: center; position: relative; }
header #main-menu a.brand-link { position: absolute; top: 0; left: 0; width: 80px; }
header #main-menu a.brand-link img { transition: all 0.2s ease; width: 60px; height: 80px; box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.25);}
header.index #main-menu a.brand-link { width: 120px; }
header.index #main-menu a.brand-link img { width: 90px; height: 120px; }
header.index.header-scrolled #main-menu a.brand-link img { width: 60px; height: 80px; }

header #main-menu ul { list-style-type: none; margin: 0; padding: 0;}
header #main-menu ul > li { display: inline-block; padding: 0 2.5rem; font-weight: 700; }
@media(min-width: 1200px) and (max-width: 1300px){
    header #main-menu ul > li { padding: 0 1.2rem; } /* workaround for missing space for "25 Jahre GSM" between 1200px and 1300px */
}
header #main-menu ul > li > a { display: block; position: relative; font-size: 1.25rem; padding: 2rem 0 1rem; color: rgb(255, 255, 255); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
header #main-menu ul > li > a:hover, header.index.header-scrolled #main-menu ul > li > a:hover { color: rgba(var(--bs-secondary-rgb), 1) !important; }
header.index #main-menu ul > li > a { color: rgb(0, 0, 0);text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.75); }
header.index #main-menu ul > li > a:hover { color: rgba(var(--bs-primary-rgb), 1) !important; }
header.index.header-scrolled #main-menu ul > li > a { color: rgb(255, 255, 255); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }


/*** Dropdown (zweite Menüebene) ***/
#main-menu ul.dropdown-menu { background-color: rgb(var(--bs-primary-rgb)); border: 0; border-radius: 0; }
#main-menu ul.dropdown-menu > li { width: 100%; padding: 0; }
#main-menu ul.dropdown-menu > li > a { font-size: 1rem; color: rgb(255, 255, 255); }
#main-menu ul.dropdown-menu > li > a:hover { background-color: rgb(var(--bs-secondary-rgb)); color: rgb(var(--bs-primary-rgb)); text-shadow: none; font-weight: 700; }
/*** Mobile Menu Toggler ***/
#main-menu a#main-menu-toggler { display: block; width: 45px; height: 45px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRWJlbmVfMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI5LjcuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4xIEJ1aWxkIDEzOCkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjNDI5OTllOwogICAgICB9CgogICAgICAuc3QxIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iRWJlbmVfMS0yIj4KICAgIDxyZWN0IGNsYXNzPSJzdDEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPgogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyLjUsMTcuNUg3LjV2LTVoMzV2NVpNNDIuNSwyNy41SDcuNXYtNWgzNXY1Wk00Mi41LDM3LjVINy41di01aDM1djVaIi8+CiAgPC9nPgo8L3N2Zz4="); background-repeat: no-repeat; }
/*** Icon vor dem Menüpunkt platzieren ***/
.nav-icon + .nav-icon { margin-left: -2rem; }
.nav-icon a { display: inline-flex; align-items: center; }
.nav-icon a img { width: 1.5em; height: auto; display: inline-block; filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.75));}
.nav-icon a img + span { margin-left: 0.25em; }

/*** Navigation (mobil) ***/
nav#mobile-menu { font-size: 1rem; }
nav#mobile-menu a.mobile-logo { background-color: rgb(255, 255, 255); }
.mm-wrapper--position-left .mm-slideout, .mm-wrapper--position-right .mm-slideout { -webkit-transform: none; -ms-transform: none; transform: none; } /* Workaround bei fixiertem Header */
.mm-page.mm-slideout { overflow: hidden; }
.mm-navbar__title { background-color: rgb(var(--bs-primary-rgb)); font-weight: 600; }
.mm-navbar__title>span { overflow: visible !important; margin-top: 5px; letter-spacing: 0; color: rgb(255, 255, 255); }
.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited { font-weight: 600; color: rgb(var(--bs-primary-rgb)); }
.mm-menu .nav-icon a img, .mm-menu .nav-icon a:active img, .mm-menu .nav-icon a:hover img, .mm-menu .nav-icon a:link img, .mm-menu .nav-icon a:visited img { filter: invert(11%) sepia(75%) saturate(2987%) hue-rotate(199deg) brightness(87%) contrast(96%); }

/*** Anpassungen für die Startseite ***/
header.index { background-color: transparent; }
header.header-scrolled.index { background: rgba(var(--bs-primary-rgb), 1); }

/*** Navigation (Footer) ***/
footer #footer-menu ul { list-style-type: none; margin: 0; padding: 0; }
footer #footer-menu ul li { display: inline-block;  }
footer #footer-menu ul li + li::before { content: '・'; display: inline-block; padding: 0 0.5rem; }
footer #footer-menu a { color: rgb(255, 255, 255); }
footer #footer-menu a:hover { color: rgba(var(--bs-secondary-rgb), 1); }

/*** Wellenkante => 10px Überbreite wichtig! ***/
.edge-top::before, .edge-bottom::after { content: ''; display: block; position: absolute; left: -5px; width: calc(100vw + 10px); height: 100px; background-image: url('/theme/public/assets/images/wave.svg'); background-position: center bottom; background-repeat: repeat-x; filter: drop-shadow(0 10px 40px rgb(255, 255, 255)); pointer-events: none; }
.edge-top::before { top: 0; transform: rotate(180deg); } /* alternativ: scaleY(-1) => spiegeln */
.edge-bottom::after { bottom: -1px; }

/*** Frame ***/
.frame { border: 0.5rem solid rgb(var(--bs-secondary-rgb)); }

/*** Glow ***/
.glow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }

/*** Hintergrund-Verlauf ***/ 
.gradient-top, .gradient-bottom { position: absolute; width: 100%; height: 300px; left: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.gradient-top { top: 0; background: linear-gradient(to bottom, rgba(194, 179, 182, 0.75), transparent) }
.gradient-bottom { bottom: 0; background: linear-gradient(to top, rgba(194, 179, 182, 0.75), transparent) }

/*** Hintergrund-Bild ***/
.bg-image { background-size: cover; background-position: center; background-repeat: no-repeat; }

/*** Hintergrund-Parallaxe ***/
.parallaxe { position: relative; background-attachment: fixed; z-index: 0; }
.parallaxe::before { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; mix-blend-mode: multiply; background-color: rgb(var(--bs-primary-rgb)); z-index: -2; }
.parallaxe[class*=bg-primary]::before { background-color: rgb(var(--bs-primary-rgb)); }
.parallaxe[class*=bg-secondary]::before { background-color: rgb(var(--bs-secondary-rgb)); }
.parallaxe * { color: rgb(255, 255, 255) !important; }

/*** <section> ***/
section { position: relative; overflow: hidden; z-index: 0; }
.pt { padding-top: 6rem !important; }
.ptzero { padding-top: 0 !important; }
.ptxs { padding-top: 2rem !important; }
.ptsm { padding-top: 4rem !important; }
.ptlg { padding-top: 8rem !important; }
.ptxl { padding-top: 12rem !important; }
.pb { padding-bottom: 6rem !important; }
.pbzero { padding-bottom: 0 !important; }
.pbxs { padding-bottom: 2rem !important; }
.pbsm { padding-bottom: 4rem !important; }
.pblg { padding-bottom: 8rem !important; }
.pbxl { padding-bottom: 12rem !important; }
.mt { margin-top: 6rem !important; }
.mtzero { margin-top: 0 !important; }
.mtxs { margin-top: 2rem !important; }
.mtsm { margin-top: 4rem !important; }
.mtlg { margin-top: 8rem !important; }
.mtxl { margin-top: 12rem !important; }
.mb { margin-bottom: 6rem !important; }
.mbzero { margin-bottom: 0 !important; }
.mbxs { margin-bottom: 2rem !important; }
.mbsm { margin-bottom: 4rem !important; }
.mblg { margin-bottom: 8rem !important; }
.mbxl { margin-bottom: 12rem !important; }

/*** Headline ***/
.headline { text-align: center; letter-spacing: 1px; padding: 0 1.5rem; } /* 1.5rem = var(--bs-gutter-x; */
.headline p { margin: 0; }
.headline p.topline { margin-bottom: 1rem }
.headline p.subline { margin-top: 1rem; }
.separator { width: 100px; height: 0.5rem; background-color: rgb(var(--bs-primary-rgb)); margin: 0 auto; margin-top: 1.5rem; margin-bottom: 6rem; }
.headline:last-child { margin-bottom: 10rem; }
.headline.text-start .separator { margin-right: 100%; }
.headline.text-end .separator { margin-left: calc(100% - 100px); } /* 100% - Breite des separators */
.headline:not(:has(.separator)) { margin-top: 1.5rem; margin-bottom: calc(3rem + 1.5rem + 8px); } /* = Höhe des nicht vorhandenen Separators */

/*** pre/post content ***/
.pre-content { margin-bottom: 2rem; }
.post-content { margin-top: 1rem; } /* most elements have margin-bottom => optical equalization */

/*** <footer> ***/
footer { font-size: 1rem; }
footer .container { padding-top: 3rem; padding-bottom: 3rem; }
footer .copyright { font-size: 0.75rem; }

/*** Formulare ***/
.yform .form_field { margin-bottom: 1rem; }
.yform .form_field label { font-size: 0.875rem; }
.yform .form_field input, .yform .form_field textarea { border: 1px solid rgba(var(--bs-primary-rgb), 0.25); }
.yform .formcheckbox label input[type="checkbox"] { margin-right: 0.5rem; }

/*** Open Street Maps ***/
#osm_map { min-height: 400px; }

/*** Icon-Text-Box ***/
.icon-text-box { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.icon-text-box.linkbox { flex-direction: row; text-align: start; justify-content: start; hyphens: auto; }
.icon-text-box.linkbox img { margin-right: 1rem; width: 40px; height: 40px; }
.icon-text-box p.icon-text-box-title { margin-top: 1rem; font-weight: 600; font-size: 2rem; }
.icon-text-box p.icon-text-box-content { margin-bottom: 0; }
.icon-text-box.linkbox p.icon-text-box-title { font-size: 1rem; }
.icon-text-box.linkbox p.icon-text-box-content { font-weight: 600; margin: 1rem 0 1rem 0.5rem; font-size: 1rem; font-weight: 400; }
@media(min-width: 576px){
    .icon-text-box.linkbox img { width: 70px; height: 70px; };
    .icon-text-box.linkbox p.icon-text-box-title { font-size: 1.125rem; }
    .icon-text-box.linkbox p.icon-text-box-content { font-size: 1.125rem; }
}
@media(min-width: 1200px){
    .icon-text-box.linkbox p.icon-text-box-title { font-size: 1.25rem; }
    .icon-text-box.linkbox p.icon-text-box-content { font-size: 1.25rem; }
}
@media(min-width: 1600px){
    .icon-text-box.linkbox p.icon-text-box-title { font-size: 1.375rem; }
    .icon-text-box.linkbox p.icon-text-box-content { font-size: 1.375rem; }
}


/***************************************************************************************************
*** Modul: Slider Zitate
***************************************************************************************************/

/*** tiny-slider => quote box ***/
section.tiny-slider-quotes { display: none; }
.quote-box { position: relative; box-sizing: content-box; margin: 30px 15px; padding: 3rem; text-align: center; color: rgb(var(--bs-primary-rgb)); }
.quote-box p { font-size: 1rem; }
.quote-box.frame { border: 3px solid rgba(var(--bs-secondary-rgb), 1); }
.quote-box.glow { box-shadow: 0 0 0.75rem rgba(0,0,0,0.15);}
.quote-box::before { color: rgba(var(--bs-secondary-rgb), 1); content: "\f10d"; font-family: "FontAwesome"; position: absolute; font-weight: 700; font-size: 3rem; left: 10px; top: 0px; }
.quote-box cite { font-weight: 600; font-style: normal; }
.quote-box cite .company {  font-size: 1rem; }
@media(min-width: 768px){
    section.tiny-slider-quotes { display: block; }
}

/***************************************************************************************************
*** Modul: Link Tiles
***************************************************************************************************/
.link-tiles .link-tile { position: relative; width: 100%; margin-bottom: 1.5rem; container-type: inline-size; }
@media(min-width: 991px){
    .link-tiles .link-tile { margin-bottom: 0; }
}
.link-tiles .link-tile a { display: block; overflow: hidden; }
.link-tiles .link-tile a img { position: relative; transition: all 0.2s ease; }
.link-tiles .link-tile .link-text { background-color: rgb(var(--bs-primary-rgb)); padding: 1rem; line-height: 1; color: rgb(255, 255, 255); font-size: 6cqw; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; white-space: nowrap; }
/* Variante BLUR 1
.link-tiles .link-tile a:hover img { filter: blur(2px) grayscale(1) brightness(2); } */
/* Variante BLUR 2 */
.link-tiles .link-tile a:hover img { filter: grayscale(0.25) contrast(0.5) brightness(1.5); }
.link-tiles .link-tile a:hover + .link-text { background-color: rgb(var(--bs-primary-rgb)); }

/*
.link-tiles .link-tile a::after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25);  mix-blend-mode: multiply /* prevents background-color glitch  ; }
.link-tiles .link-tile a:hover::after { background-color: rgba(var(--bs-primary-rgb), 1); mix-blend-mode: color; }
*/




/***************************************************************************************************
*** Modul: Hero Image
***************************************************************************************************/
section.hero-image { padding: 0; margin: 0; }
section.hero-image picture { position: relative; display: block; }
section.hero-image img { object-fit: cover; pointer-events: none; width: 100vw; max-height: 45vh; }
section.hero-image.index img { max-height: 100vh; }
section.hero-image { position: relative; }
section.hero-image h1.hero-text { position: absolute; width: 100%; bottom: 0; left: 0; margin: 0; padding: 2rem 1rem; background-color: rgba(var(--bs-primary-rgb), 0.5); color: rgb(0, 0, 0); font-size: 2rem; font-weight: 900; text-align: center; line-height: 1.5; }
section.hero-image h1.hero-text span { display: block; font-size: 1rem; font-weight: 400; }
@media(min-width: 576px){
    section.hero-image h1.hero-text span { font-size: 1.125rem; }
}
@media(min-width: 768px){
    section.hero-image h1.hero-text { font-size: 2.5rem; }
    section.hero-image h1.hero-text span { font-size: 1.25rem; }
}
/***************************************************************************************************
*** Modul: Link Tiles
***************************************************************************************************/

.link-tiles .product { background-color: rgb(249, 249, 249); }

/***************************************************************************************************
*** Modul: Slider Teaser
***************************************************************************************************/
.teaser-box { hyphens: auto;}