/****************************************************************************************************
*** Fonts
****************************************************************************************************/
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v26-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v26-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/****************************************************************************************************
*** Generelle Anweisungen
****************************************************************************************************/
html, body { margin: 0; padding: 0; width: 100%; scroll-behavior: smooth; }
html { /* Mobile-Viewport Bugfix */ height: -webkit-fill-available; /***/ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: var(--bs-primary); }
html.index { overflow-y: scroll; }
body { position: relative; height: 100%; /* Mobile-Viewport Bugfix */ min-height: -webkit-fill-available; /***/ -ms-word-wrap: break-word; word-wrap: break-word; font-size: 1rem; }
@media(min-width: 1200px){
    body { font-size: 1.25rem; }
}
/*** Hintergrundbild => iOS mag kein background-attachment, Workaround der auch für iOS-Geräte funktioniert */
#background { background: url('/theme/public/assets/images/background-image.jpg'); background-size: cover; background-position: center; z-index: -1; }
#background.background-primary { background: url('/theme/public/assets/images/background-image-primary.jpg'); }
a { transition: all 0.3s ease; }

.imagebadge { position: absolute; bottom: 0; left: 0px; background-color: rgba(var(--bs-primary-rgb), 1); color: rgb(255, 255, 255); padding: 0 0.5rem 0 0.25rem; font-size: 0.875rem; }

/****************************************************************************************************
*** Header + Navigation
****************************************************************************************************/
header .navbar-logo img { padding: 0.5rem 0 0.5rem 0.5rem; box-sizing: content-box; width: 206px; height: 24px; } /* muss in Summe 40px ergeben! */
@media(min-width: 1200px){ header .navbar-logo img { padding: 1.25rem 0 1.25rem 1.25rem; width: 250px; height: 32px; } } /* muss in Summe 72px ergeben! */
#main-menu ul { list-style-type: none; margin: 0; }
#main-menu ul li a { font-size: 1.333rem; font-weight: 700; text-transform: uppercase; padding: 10px 20px; }
#main-menu ul li a.active { color: rgb(0, 0, 0); }
#main-menu ul li a:hover { color: rgb(0, 0, 0); }
/*** Mobile Menu Toggler ***/
.main-menu-toggler { width: 32px; height: 32px; top: 50%; right: 1.5rem; transform: translateY(-50%); border: 0; border-radius: 0; font-size: 1.25rem; background: rgb(var(--bs-primary-rgb)) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIg0KCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8Zz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDE4LjQsMzUyLjhIOTMuNlYzMjNoMzI0LjhWMzUyLjh6IE00MTguNCwyNzAuOUg5My42di0yOS44aDMyNC44VjI3MC45eiBNNDE4LjQsMTg5SDkzLjZ2LTI5LjhoMzI0LjhWMTg5eiINCgkJLz4NCjwvZz4NCjwvc3ZnPg0K");background-position: center; background-repeat: no-repeat; }
@media(min-width: 576px){ .main-menu-toggler { right: 1rem; }}
/***************************************************************************************************
*** Navigation (mobil)
***************************************************************************************************/
/*** Aufflackern der Mobile-Navigation beim Pageload vermeiden... ***/
#mobile-menu:not(.mm-menu) { display: none; }
#mobile-menu .mm-navbars--top { padding: 0.7rem 0; background-color: rgb(255, 255, 255); }
#mobile-menu .mm-navbars--top .mm-navbar { background-color: rgb(255, 255, 255); }

/*** mmmenu.js FIXED BACKGROUND => Workaround ***/
.mm-wrapper--position-left .mm-slideout, .mm-wrapper--position-right .mm-slideout { transform: none; }

/*** Open Street Map ***/
#osm_map { height: calc(100vh - 72px); }
/*** Formular ***/
.form-control { margin-bottom: 2rem; border-radius: 0; border-bottom: 0.5rem solid rgb(var(--bs-secondary-rgb)); }
.form-control:focus { border-left: 0; border-top: 0; border-right: 0; border-color: rgb(var(--bs-primary-rgb)); box-shadow: none; }
button[type=submit] { border-radius: 0; font-weight: 600; border: 0.2rem solid rgb(var(--bs-primary-rgb)); text-transform: uppercase; }
button[type=submit]:hover { background-color: rgba(255, 255, 255, 0.8); color: rgb(var(--bs-primary-rgb)); }

/****************************************************************************************************
*** Developer STATIC
****************************************************************************************************/

.img-frame { border-width: 5px 3px 3px 5px; transform: rotate(-2.5deg); border: 0.25rem solid rgb(255, 255, 255); }
.img-frame img { transform: rotate(2.5deg); border: 0.25rem solid rgb(var(--bs-primary-rgb)); }
.img-frame img.square { aspect-ratio: 1; object-fit: cover; } /* sorgt bei Photoswipe für ein quadratisches Vorschaubild, was in der Großansicht aber dann das eigentlich Bildformat anzeigt ("cropped") */


footer { height: 72px; }
footer nav ul { margin: 0; padding: 0; font-size: 0; }
footer nav ul li { list-style-type: none; display: inline-block; }
footer nav ul li a { display: block; padding: 0.5rem 1rem; border: 1px solid rgb(255, 255, 255); color: rgb(255, 255, 255); font-size: 0.875rem; }
footer nav ul li + li { margin-left: 2rem; }


.hero-section { font-size: 0.875rem; }
.hero-section:first-child { margin-top: 40px; }
.hero-section .hero-image { position: relative; height: calc((100vh - 40px) / 2); background-size: cover; background-position: center; padding: 0rem; }
@media(min-width: 1200px){ 
    .hero-section:first-child { margin-top: 72px; }
    .hero-section .hero-image { height: calc((100vh - 72px) / 2); }
}



.hero-section .hero-content { position: relative; border-width: 5px 3px 3px 5px; transform: rotate(-2.5deg); border: 0.25rem solid rgb(0, 0, 0); margin: 1rem auto; padding: 1rem; z-index: 0; text-align: center; max-width: 300px; }
.hero-section .hero-content::before{ position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: -1; transform: rotate(2.5deg); }
.hero-section .hero-content img { display: block; width: 125px; margin: 0 auto; }
.hero-section .hero-content h2 { text-align: center; font-size: 200%; font-weight: bold; color: rgb(var(--bs-primary-rgb)); margin-bottom: 0.5rem; }
.hero-section .hero-content a.btn { background-color: rgb(var(--bs-primary-rgb)); border: 0.125rem solid transparent; font-weight: bold; text-transform: uppercase; color: rgb(255, 255, 255); padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.hero-section .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(var(--bs-primary-rgb)); color: rgb(var(--bs-primary-rgb)); }




/* Index */
.index .hero-section .hero-image { height: calc((100vh - 40px) / 2); }
.index .hero-section .hero-image:first-child { background-image: url('/media/bsa-kickin.jpg'); }
.index .hero-section .hero-image:last-child { background-image: url('/media/strasssteine-09.jpg'); }
.index .hero-section .hero-content { position: relative; border-width: 5px 3px 3px 5px; transform: rotate(-2.5deg); border: 0.25rem solid rgb(0, 0, 0); margin: 1rem auto; padding: 1rem; z-index: 0; text-align: center; max-width: 300px; }
.index .hero-section .hero-content::before{ position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: -1; transform: rotate(2.5deg); }
.index .hero-section .hero-content img { display: block; width: 125px; margin: 0 auto; }
.index .hero-section .hero-content h2 { text-align: center; font-size: 250%; font-weight: bold; color: rgb(var(--bs-primary-rgb)); margin-bottom: 0.5rem; }
.index .hero-section .hero-content a.btn { background-color: rgb(var(--bs-primary-rgb)); border: 0.125rem solid transparent; font-weight: bold; text-transform: uppercase; color: rgb(255, 255, 255); padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.index .hero-section .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(var(--bs-primary-rgb)); color: rgb(var(--bs-primary-rgb)); }
.index .hero-section .hero-content p { text-align: justify; hyphens: auto; line-height: 1.25; margin-bottom: 0.25rem; }
.index .hero-section .hero-image:last-child .hero-content { transform: rotate(2.5deg); }
.index .hero-section .hero-image:last-child .hero-content::before { transform: rotate(-2.5deg); background-color: rgba(var(--bs-primary-rgb), 0.8); border: 0.25rem solid rgb(255, 255, 255); }
.index .hero-section .hero-image:last-child .hero-content h2, .hero-image:last-child .hero-content p { color: rgb(255, 255, 255); }
.index .hero-section .hero-image:last-child .hero-content a.btn { background-color: rgb(255, 255, 255); font-weight: bold; text-transform: uppercase; color: rgb(var(--bs-primary-rgb)); }
.index .hero-section .hero-image:last-child .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(255, 255, 255); color: rgb(255, 255, 255); }

@media(min-width: 768px){
    .index .hero-section .hero-content { padding: 2rem; line-height: 1.5; max-width: 350px;}
    .index .hero-section .hero-content h2 { font-size: 300%; }
}
@media(min-width: 992px){
    .index .hero-section .hero-image { height: calc(100vh - 112px); }
}
@media(min-width: 1200px){
    .hero-section .hero-image { height: unset; }
    .hero-section .hero-text { display: flex; min-height: calc(100vh - 72px); }
    .hero-section:last-child .hero-text { display: flex; min-height: calc(100vh - 144px); }
    .index .hero-section .hero-image { height: calc(100vh - 144px); }
}

.hero-text { padding: 3rem 0; }


/* Kontakt */
.hero-section.kontakt .hero-content img { width: 230px; }


/*



.hero-image.hero-stick-1 { background-image: url('/media/bsa-kickin.jpg'); }
.hero-image.hero-stick-2 { background-image: url('/media/besticken-10.jpg'); }
.hero-image.hero-stick-3 { background-image: url('/media/bsa-hero-stick-1.jpg'); }
.hero-image.hero-strass-1 { background-image: url('/media/bsa-yingyang-2.jpg'); }
.hero-image.hero-strass-2 { background-image: url('/media/strasssteine-04.jpg'); }
.hero-image.hero-strass-3 { background-image: url('/media/bsa-hero-stick-1.jpg'); }

.hero-image:last-child .hero-content { transform: rotate(2.5deg); }
.hero-image:last-child .hero-content::before { transform: rotate(-2.5deg); background-color: rgba(var(--bs-primary-rgb), 0.8); border: 0.25rem solid rgb(255, 255, 255); }
.hero-image:last-child .hero-content h2, .hero-image:last-child .hero-content p { color: rgb(255, 255, 255); }
.hero-image:last-child .hero-content a.btn { background-color: rgb(255, 255, 255); font-weight: bold; text-transform: uppercase; color: rgb(var(--bs-primary-rgb)); }
.hero-image:last-child .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(255, 255, 255); color: rgb(255, 255, 255); }
@media(min-width: 480px){
    .hero-content { max-width: 350px; }
}
@media(min-width: 768px){
    .hero-content { max-width: 370px; }
    .hero-content p { margin-bottom: 0.75rem; }
}
@media(min-width: 992px){



    .hero-section { font-size: 1rem; display: flex; flex-direction: row; }
    .hero-content { max-width: 440px; padding: 2.5rem; }
    .hero-content p { line-height: unset; }
    
    .hero-image {width: 50%; }
    .hero-section.hero-index .hero-image { height: calc(100vh - 144px); }
    
    .hero-section .hero-image { min-height: 100vh; height: auto; }
    .hero-section:first-child .hero-image { min-height: calc(100vh - 72px); }


}
@media(min-width: 1200px){
    .hero-content { max-width: 400px;  }
}
@media(min-width: 1600px){
    .hero-content { max-width: 510px;  }
}


.hero-kontakt .hero-content img { margin: 0; width: 100%;}

/*
.hero-section { display: flex; flex-direction: column; overflow: hidden; height: calc(100vh - 72px); font-size: 0.875rem; }
.hero-section:first-child { margin-top: 72px; }
.hero-section.hero-index, .hero-section:last-child { height: calc(100vh - 72px); }

.hero-image .hero-splash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.8); text-align: center; width: 330px; }
.hero-image .hero-splash .hero-content { border-width: 5px 3px 3px 5px; transform: rotate(-2.5deg); border: 0.25rem solid rgb(0, 0, 0);  padding: 1.5rem; aspect-ratio: 1; }
.hero-image .hero-splash .hero-content img { width: 125px; }
.hero-image .hero-splash .hero-content h2 { text-align: center; font-size: 200%; font-weight: bold; color: rgb(var(--bs-primary-rgb)); margin-bottom: 0.5rem; }
.hero-image .hero-splash .hero-content a.btn { background-color: rgb(var(--bs-primary-rgb)); border: 0.125rem solid transparent; font-weight: bold; text-transform: uppercase; color: rgb(255, 255, 255); padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.hero-image .hero-splash .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(var(--bs-primary-rgb)); color: rgb(var(--bs-primary-rgb)); }

.hero-image:last-child .hero-splash { background-color: rgba(var(--bs-primary-rgb), 0.8); transform: translate(-50%, -50%) }
.hero-image:last-child .hero-splash .hero-content { transform: rotate(2.5deg); border: 0.25rem solid rgb(255, 255, 255); }
.hero-image:last-child .hero-splash .hero-content h2, .hero-image:last-child .hero-splash .hero-content p { color: rgb(255, 255, 255); }

.hero-image:last-child .hero-splash .hero-content a.btn { background-color: rgb(255, 255, 255); font-weight: bold; text-transform: uppercase; color: rgb(var(--bs-primary-rgb)); }
.hero-image:last-child .hero-splash .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(255, 255, 255); color: rgb(255, 255, 255); }

.hero-image.hero-stick-1 { background-image: url('/media/besticken-06.jpg'); }
.hero-image.hero-stick-2 { background-image: url('/media/bsa-hero-stick-1.jpg'); }
.hero-empty { width: 50%; padding: 5rem; display: flex; flex-direction: column; align-self: center; }

@media(min-width: 576px){
    .hero-section { font-size: 1rem; }
    .hero-image .hero-splash { width: 380px; }
    .hero-image .hero-splash .hero-content { aspect-ratio: 1.25 / 1; }
}

@media(min-width: 768px){
    .hero-image .hero-splash { width: 430px; }
    .hero-image .hero-splash .hero-content h2 { margin-bottom: 1rem; }
}

@media(orientation: portrait){
    aspect-ratio: 1 / 1.25;
}
@media(orientation: landscape){
    aspect-ratio: 1.25 / 1;
}


@media(min-width: 1200px){
.hero-section { display: flex; flex-direction: row; overflow: hidden; height: calc(100vh - 72px); }
.hero-section:first-child { margin-top: 72px; }
.hero-section.hero-index, .hero-section:last-child { height: calc(100vh - 144px); }
.hero-image { position: relative; background-size: cover; background-position: center; }
.hero-image:first-child { width: 50%; height: 100%; background-image: url('/media/bsa-kickin.jpg'); }

.hero-image:last-child { width: 50%; height: 100%; background-image: url('/media/strasssteine-09.jpg'); }

.hero-image .hero-splash { position: absolute; top: 50%; left: 50%; min-width:500px; width: 50%; transform: translate(-25%, -50%); background-color: rgba(255, 255, 255, 0.8); text-align: center; }
.hero-image .hero-splash .hero-content { border-width: 5px 3px 3px 5px; transform: rotate(-2.5deg); border: 0.25rem solid rgb(0, 0, 0);  padding: 3rem; }
.hero-image .hero-splash .hero-content h2 { text-align: center; font-size: clamp(1rem, 2.5vw, 10rem); font-weight: bold; color: rgb(var(--bs-primary-rgb)); }

.hero-image .hero-splash .hero-content a.btn { background-color: rgb(var(--bs-primary-rgb)); border: 0.125rem solid transparent; font-weight: bold; text-transform: uppercase; color: rgb(255, 255, 255); }
.hero-image .hero-splash .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(var(--bs-primary-rgb)); color: rgb(var(--bs-primary-rgb)); }

.hero-image:last-child .hero-splash { background-color: rgba(var(--bs-primary-rgb), 0.8); transform: translate(-75%, -50%) }
.hero-image:last-child .hero-splash .hero-content { transform: rotate(2.5deg); padding: 3rem; border: 0.25rem solid rgb(255, 255, 255); }
.hero-image:last-child .hero-splash .hero-content h2, .hero-image:last-child .hero-splash .hero-content p { color: rgb(255, 255, 255); }

.hero-image:last-child .hero-splash .hero-content a.btn { background-color: rgb(255, 255, 255); font-weight: bold; text-transform: uppercase; color: rgb(var(--bs-primary-rgb)); }
.hero-image:last-child .hero-splash .hero-content a.btn:hover { background-color: transparent; border: 0.125rem solid rgb(255, 255, 255); color: rgb(255, 255, 255); }

.hero-image.hero-stick-1 { background-image: url('/media/besticken-06.jpg'); }
.hero-image.hero-stick-2 { background-image: url('/media/bsa-hero-stick-1.jpg'); }
.hero-empty { width: 50%; padding: 5rem; display: flex; flex-direction: column; align-self: center; }
}

*/