/*
Theme Name: Kalium - Child Theme
Theme URI: https://laborator.co/themes/kalium/
Author: Laborator
Author URI: https://laborator.co/
Description: Start creating that amazing website that you have always wanted, only with Kalium — Connect with Laborator on: <a href="https://themeforest.net/user/laborator">Envato</a> &bull; <a href="https://twitter.com/thelaborator">Twitter</a> &bull; <a href="https://www.facebook.com/laboratorcreative">Facebook</a> &bull; <a href="https://www.instagram.com/laboratorcreative/">Instagram</a>
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/

/* Imports */
@import "css/footer.css";
@import "css/page-frame.css";
@import "css/modal.css";
@import "css/masonry.css";
@import "css/form.css";


/* Allgemein */
.img-wrapper img {
    width: 100%;
}

.img-wrapper--small {
    width: 100%;
    height: 250px;
    background-position: center;
    background-size: cover;
    margin: 10px 0;
}

@media (min-width:992px){
	.content-row {
		margin: 100px 0;
	}
}

@media (max-width:991px){
	.content-row {
		margin: 50px 0;
	}
}

.img-wrapper.img-zoom:hover {
    overflow: hidden;
}

.img-wrapper.img-zoom:hover img {
    scale: 1.5;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

@media (max-width:991px){
    .img-wrapper.img-zoom {
        overflow: hidden;
    }

    .img-wrapper.img-zoom img {
        scale: 1.5;
        overflow: hidden !important;
    }
}

.headline-white {
    color: #fff;
}


/* Trenner */
hr {
    box-sizing: content-box;
    height: 1px;
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #000;
    width: 100%;
}


/* Ausrichtung */
.flex-row {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
}

@media (max-width: 796px){
    .container, .content-area {
        margin-right: auto;
        margin-left: auto;
        padding-left: 35px;
        padding-right: 35px;
    }
}


/* Boxes */
.boxes-wrapper {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    margin-top: 4rem;
}

@media (min-width: 1024px){
    #stadthoefe.boxes-wrapper {
        grid-template-areas: 'shb shb' !important;
    } 

    .grey-box--mdn {
        grid-area: shb !important;
    }
}

.grey-box {
    background-color: #171717;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #171717;
}

#programm .grey-box {
    max-width: 670px;
}

.grey-box:hover {
    border: 1px solid #b3995b;
    background: #000;
}

.grey-box:hover hr {
    border-top: 1px solid #171717;
}

.programm-title, .angebot-title {
    align-items: center;
    -ms-flex-align: center;
    gap: 15px;
}

.grey-box h3, .grey-box .programm-description p {
    margin: 0;
}

.grey-box .programm-facts div p {
    padding: 0 10px;
    background: #000;
    width: max-content;
}

.grey-box .programm-facts {
    justify-content:start;
    -ms-flex-pack:justify;
    flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    width: 100%;
    gap: 10px;
}

.grey-box .programm-facts div p {
    margin: 0;
}

.grey-box .calendar-download {
    align-items: baseline;
    gap: 10px;
}


/* Boxes mit Kontur */
@media (min-width:768px){
	.grey-box--bordered {
		box-shadow: -25px -25px 0px -1px #000, -25px -25px 0px 0px #B3995B;
		margin: 27px;
	}
}


/* Angebot */
.angebot-wrapper {
    min-height: 225px;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    position: relative;
}

.angebot-wrapper .angebot {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.angebot-wrapper:hover .angebot {
    margin-left: -20px;
    margin-top: -20px;
    background-size: cover;
    transition: 0.3s ease-in-out;
}

.angebot-wrapper:hover .title-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    transition: 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
}

.angebot-wrapper .title-wrapper {
    display: none;
}

.flex-row.angebot-title {
    padding: 15px;
    background: #000000a1;
    border: 1px solid #b3995a;
    width: calc(100% - 15px);
    height: fit-content;
}


/* Intro */
@media (min-width:768px){
    .intro-copy p {
        column-count: 2;
        column-gap: 5rem;
    }
}

@media (min-width:1024px){
    .intro-copy p {
        column-count: 3;
        column-gap: 5rem;
    }
}


/* mobiles Menü */
.mobile-menu-container.ps {
    display: flex;
	display: -webkit-flex;
	display: -ms-flex;
    align-items: center;
    justify-content:center;
	-ms-flex-pack:center;
}

.mobile-menu-wrapper .mobile-menu-container ul li {
    text-align: center;
}

.mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu li a {
	font-size: 26px;
}

.mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu>li.current_page_item>a:before {
	background-color: transparent;
}


/* Legal Content */
.legal-content h3:not(:first-child) {
    margin-top: 75px;
}

.legal-content h4:not(:first-child) {
    margin-top: 25px;
}


/* Störer */
.stoerer-wrapper .wpb_text_column.wpb_content_element.post-formatting {
	display: none;
}

.stoerer-content p {
	font-size: clamp(20px, 1.5vw + 1rem, 30px);
}

@media (min-width:768px){
	.stoerer-wrapper {
		position: absolute;
		top: 250px;
		right: 25px;
		height: fit-content;
	}
	
	.stoerer-wrapper .stoerer-content {
		border-radius: 200.942px;
		border: 2px solid #B3995B;
		background: #000;
		aspect-ratio: 1 / 1;
		display: flex;
		justify-content: center;
		align-items: center;
		/* padding: 15px; */
		box-sizing: border-box;
		max-width: 250px;
		padding: 20px;
	}

	.stoerer-wrapper .stoerer-content p {
		text-align: center;
		line-height: 110%;
		color: #fff;
	}
}

@media (max-width:767px){
	.stoerer-content {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		line-height: 120%;
		width: 100%;
		border-top: 2px solid;
		border-bottom: 2px solid;
		margin: 25px 0;
		padding: 10px 0;
	}
	
	.stoerer-content p {
		margin: 0;
		line-height: 125% !important;
	}
}