/****************************************************************************************************
*** fonts
****************************************************************************************************/

@font-face { font-family: 'Merriweather'; src: url('../fonts/merriweather-v33-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: fallback; }
@font-face { font-family: 'Merriweather'; src: url('../fonts/merriweather-v33-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: fallback; }
@font-face { font-family: 'Merriweather'; src: url('../fonts/merriweather-v33-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: fallback; }

/***************************************************************************************************
*** vendor override: tiny-slider.js
***************************************************************************************************/

/*** navigation dots ***/
.tns-nav { text-align: center; margin: 10px 0; }
.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-dark-rgb)); }
[class*="bg-primary"] .tns-nav > [aria-controls] { border-color: rgb(255, 255, 255); }
.tns-nav > .tns-nav-active { background: rgba(var(--bs-dark-rgb), 1); }

/****************************************************************************************************
*** system elements
****************************************************************************************************/

a[type=button] { appearance: none; -webkit-appearance: none; } /* prevents link with attribute "type=button" from being displayed as system element */
::selection { background: var(--bs-primary); color: rgb(255, 255, 255); text-shadow: none; }
:active, :focus { outline: none !important; }
:focus { outline: none !important; }

html, body { width: 100%; margin: 0; padding: 0;  scroll-behavior: smooth; overscroll-behavior-y: none; --video-border-radius: 0; --video-border: 0; /* removes border from video player */ }
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; }
main { background-color: rgb(255, 255, 255); }
.post-content { margin-top: 3rem; }

.alert ul { margin: 0; padding: 0; list-style-type: none; }


/****************************************************************************************************
/*** fragment: section.php
/***************************************************************************************************/

section { position: relative; overflow: hidden; z-index: 0; margin: 0 1.5rem; }
main section:first-child { margin-top: 80px;}
.pt { padding-top: 3rem !important; }
.ptzero { padding-top: 0 !important; }
.ptxs { padding-top: 1rem !important; }
.ptsm { padding-top: 2rem !important; }
.ptlg { padding-top: 4rem !important; }
.ptxl { padding-top: 5rem !important; }
.pb { padding-bottom: 3rem !important; }
.pbzero { padding-bottom: 0 !important; }
.pbxs { padding-bottom: 1rem !important; }
.pbsm { padding-bottom: 2rem !important; }
.pblg { padding-bottom: 4rem !important; }
.pbxl { padding-bottom: 5rem !important; }
.pext { padding: 0 5%; }
.mt { margin-top: 3rem !important; }
.mtzero { margin-top: 0 !important; }
.mtxs { margin-top: 1rem !important; }
.mtsm { margin-top: 2rem !important; }
.mtlg { margin-top: 4rem !important; }
.mtxl { margin-top: 5rem !important; }
.mb { margin-bottom: 3rem !important; }
.mbzero { margin-bottom: 0 !important; }
.mbxs { margin-bottom: 1rem !important; }
.mbsm { margin-bottom: 2rem !important; }
.mblg { margin-bottom: 4rem !important; }
.mbxl { margin-bottom: 5rem !important; }
@media(min-width: 992px){
    section { margin: 0 3rem; }
    .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: 10rem !important; }
    .ptxl.parallaxe { padding-top: 14rem !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: 10rem !important; }
    .pbxl.parallaxe { padding-bottom: 14rem !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: 10rem !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: 10rem !important; }
}
@media(min-width: 1200px){
    main section:first-child { margin-top: 0;}
}
@media(min-width: 1800px){
    .pext { padding: 0 7.5vw; }
}
@media(min-width: 2000px){
    .pext { padding: 0 10vw; }
}

/****************************************************************************************************
/*** fragment: headline.php
/***************************************************************************************************/

.headline { position: relative; text-align: center; }
.headline h2 { margin-bottom: 1.5rem; }
.headline.sub { text-transform: none; }
.headline p { margin: 0; }
.headline p.topline { position: relative; display: inline-block; margin: 0 0 1.5rem 0rem; color: rgb(var(--bs-primary-rgb)); font-weight: 400; line-height: 1.2 }
.headline p.topline::before { position: absolute; top: -5px; left: 0; content: ""; width: 50px; height: 38px; background-image: url('../images/logo-spatz.svg'); margin: 0 0.25rem -0.5rem 0; }
.headline p.subline { margin-top: 1.5rem; }
.separator { width: 100px; height: 0.5rem; background-color: rgb(var(--bs-primary-rgb)); margin: 0 auto; margin-top: 1.5rem; margin-bottom: 3rem; }
.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: 0.75rem; margin-bottom: calc(1.5rem + 0.75rem + 4px); } /* = Höhe des nicht vorhandenen Separators */
@media(min-width: 992px){
    .headline:not(:has(.separator)) { margin-top: 0; margin-bottom: calc(3rem + 1.5rem + 8px); } /* = Höhe des nicht vorhandenen Separators */
}

/****************************************************************************************************
*** custom elements styling
****************************************************************************************************/

/*** Forms ***/
.yform .form_field { margin-bottom: 1rem; }
.yform label, .yform-label { font-size: 0.875rem; }
.yform .formcheckbox label { font-size: 1rem; }
.yform input, .yform textarea, .yform select { font-size: 1rem; border: 1px solid rgba(0, 0, 0, 0.125); }
.yform select { font-size: 0.875rem;}

/*** Checkbox Switch ***/
.formcheckbox { --switch-size: 10px; --switch-width: calc(var(--switch-size) * 3.5); --switch-height: calc(var(--switch-size) * 2); display: block; width: 100%; }
.formcheckbox input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.formcheckbox label { position: relative; display: grid; grid-template-columns: var(--switch-width) minmax(0, 1fr); column-gap: 0.75rem; align-items: start; width: 100%; max-width: 100%; height: auto; cursor: pointer; }
.formcheckbox .form-helper { position: relative; display: block; width: var(--switch-width); height: var(--switch-height); background-color: #fff; border: 1px solid #adb5bd; border-radius: 999px; transition: 0.4s; grid-column: 1; grid-row: 1; }
.formcheckbox .form-helper::before { position: absolute; content: ""; width: calc(var(--switch-size) * 1.4); height: calc(var(--switch-size) * 1.4); left: calc(var(--switch-size) * 0.27); bottom: calc(var(--switch-size) * 0.2); border-radius: 999px; background-color: #adb5bd; transition: 0.4s;}
.formcheckbox .checkbox-text { grid-column: 2; grid-row: 1; display: block; min-width: 0; max-width: none; line-height: 1.35; }
.formcheckbox input:checked + .form-helper { background-color: rgb(var(--bs-success-rgb)); border-color: rgb(var(--bs-success-rgb)); }
.formcheckbox input:focus-visible + .form-helper { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.formcheckbox input:checked + .form-helper::before { transform: translateX(calc(var(--switch-size) * 1.4)); background-color: #fff; }

/*** Background ***/
#background { position: fixed; background: rgb(var(--bs-light-rgb)); background-size: 100% 25%; z-index: -1; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none; }
#background picture, #background img { display: block; width: 100%; height: 100%; object-position: center center; }

/*** Topbanner ***/
#banner-fader { position: relative; width: 100%; max-width: 100vw; overflow: hidden; line-height: 0; }
#banner-fader .banner-fader__image { position: absolute; top: 0; left: 50%; width: 100%; max-width: none; height: 200px; object-fit: cover; transform: translateX(-50%); opacity: 0; transition: opacity 900ms ease; }
#banner-fader .banner-fader__image.is-active { opacity: 1; z-index: 1; }
#banner-fader .banner-fader__image:first-child { position: relative; }
#top-banner { position: absolute; top: 0; z-index: 1; left: 50%; transform: translateX(-50%); }
#top-banner::after { display: none; content: ""; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: conic-gradient(from 90deg, rgba(var(--bs-accent-rgb), 0.9) 0deg 90deg, rgba(var(--bs-secondary-rgb), 0.9) 90deg 180deg, rgba(255, 255, 255, 0) 180deg 270deg, rgba(var(--bs-primary-rgb), 0.9) 270deg 360deg ); z-index: -1; }
#top-banner #top-logo { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
#top-banner #top-logo::after { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 200px;  background: conic-gradient(from 90deg, rgba(255, 255, 255, 0) 0deg 90deg, rgba(var(--bs-accent-rgb), 0.9) 90deg 180deg, rgba(255, 255, 255, 0) 180deg 270deg, rgba(var(--bs-primary-rgb), 0.9) 270deg 360deg ); }
@media(min-width: 576px){
    #top-banner::after { display: block; }
}
@media(min-width: 1400px){
    #banner-fader .banner-fader__image { height: 400px; }
    #top-banner::after, #top-banner #top-logo::after  { width: 400px; height: 400px; }
    #top-banner #top-logo, #top-banner #top-logo img { width: 200px; height: 200px; }
}

/*** Navigation (Desktop) ***/
nav#main-menu { padding: 0; }
nav#main-menu .nav-item .nav-link { font-family: "Merriweather"; font-weight: bold; font-size: 1.2rem; color: rgb(var(--bs-primary-rgb)); letter-spacing: 1px; padding: 1rem 1.5rem; border-right: 1px solid rgba(var(--bs-dark-rgb), .15); }
nav#main-menu .nav-item:first-child .nav-link { border-left: 1px solid rgba(var(--bs-dark-rgb), .15); }
nav#main-menu .nav-item.active .nav-link, nav#main-menu .nav-item .nav-link:hover { background-color: rgba(255, 255, 255, 0.5); }
nav#main-menu #main-menu-toggler { position: absolute; top: -200px; right: 0; width: 100px; height: 100px; background: rgba(var(--bs-primary-rgb), 0.9) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRWJlbmVfMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDMwLjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4zIEJ1aWxkIDE4MikgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CgogICAgICAuc3QxIHsKICAgICAgICBmaWxsOiAjNGQzMzIyOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iRWJlbmVfMS0yIj4KICAgIDxyZWN0IGNsYXNzPSJzdDAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPgogICAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTQyLjUsMTUuOEg3LjV2LTUuN2gzNXY1LjdaTTQyLjUsMjcuOEg3LjV2LTUuN2gzNXY1LjdaTTQyLjUsMzkuOEg3LjV2LTUuN2gzNXY1LjdaIi8+CiAgPC9nPgo8L3N2Zz4="); background-repeat: no-repeat; background-size: 50px; background-position: center; z-index: 1; }