/* =================================== General =================================== */
img{max-width:100%;height:auto;}
section{}
#content{overflow:hidden;}
/* =================================== SPACERS =================================== */
.space-3rem{display:block;width:100%;height:3rem;}
.space-4rem{display:block;width:100%;height:4rem;}
.space-5rem{display:block;width:100%;height:5rem;}
.space-6rem{display:block;width:100%;height:6rem;}
@media (max-width: 1200px){.resp-space-3rem{display:block;width:100%;height:3rem;}}
@media (max-width: 1200px){.resp-space-4rem{display:block;width:100%;height:4rem;}}
@media (max-width: 1200px){.resp-space-5rem{display:block;width:100%;height:5rem;}}
@media (max-width: 1200px){.resp-space-6rem{display:block;width:100%;height:6rem;}}


/* =================================== Eigene Button-Designs =================================== */
.button-1, .wp-block-button a{display:inline-block;padding:1rem 3rem!important; font-size: 1.2rem!important; border-radius: 5rem!important; font-weight: 400!important; border: 0.1rem solid var(--color-primary)!important; background:transparent!important; color: var(--color-primary)!important; }
.button-1:hover, .wp-block-button a:hover{ background: var(--color-primary)!important; color: var(--color-white)!important; }
.button-mini{ padding: 0.6rem 1rem; border-radius: 5rem; font-size: 100%; border: 2px solid var(--color-primary); color: var(--color-primary); display: inline-block; margin-top: 1rem;font-size:90%;font-weight:600;}
.button-2 { padding: 1rem 2rem; border-radius: 3rem; font-weight: 600; border: 2px solid var(--color-primary); color: var(--color-primary); }
.button-2:hover { color: var(--color-text); border-color: var(--color-text); }


/* =================================== Section-Titling =================================== */
.section-titling { display: flex; align-items: center; width: 100%; padding:1.5rem;position: relative;justify-content: center;margin-bottom:6rem;}
.section-titling span { font-weight: 600; letter-spacing: 0.5rem;color: var(--color-text); text-transform: uppercase; z-index: 1; position: relative; }
.section-titling::after { content: "";position:absolute;bottom:0;left:50%; transform: translateX(-50%);width: 4rem; height: 1px; background: var(--color-primary); z-index: 0; }

.section-left{justify-content: left;padding-left:0;margin-bottom:3rem;}
.section-left::after {left:0; transform: translateX(0%);}

/* =================================== Formularelemente (Kontaktformular) =================================== */
input, textarea, select { padding: 1.2rem 3rem; width: 100%; box-sizing: border-box; font-size: 1rem; border-radius:0.5rem; background: var(--color-white); border: 0rem; transition: all 0.2s ease-in-out; }
input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus { outline: none; border-color: var(--color-primary); background: #ffefdd; }
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill="%23000" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 2rem; padding-right: 2.5rem; }
input[type="checkbox"] { accent-color: var(--color-primary); width: 2rem; height: 2rem; cursor: pointer; margin-right: 1rem; }
input[type="submit"]:disabled { opacity: 0.4; cursor: not-allowed; }

.form { display: flex; flex-wrap: wrap; gap: 1rem;}
.form-col-100 { flex: 1 1 100%; }
.form-col-50 { flex: 1 1 calc(50% - 0.75rem); box-sizing: border-box; }
@media(max-width: 768px){ .form-col-50 { flex: 1 1 100%; } }

.checkbox-label { display: flex; align-items: flex-start; gap: 1rem; line-height: 1.5; }
.checkbox-label input[type="checkbox"] { margin-top: 0.3rem; flex-shrink: 0; width: 1.5rem; height: 1.5rem; cursor: pointer; }
.checkbox-label span { display: inline-block; max-width: 100%; }


@media (max-width: 1199.98px){
  #contact-form{margin-bottom:6rem;}

}

/* =================================== Gradients =================================== */
.element-gradient-full{position:absolute;display:block;z-index:-1;left:-10rem;top:-20rem;width:100rem;height:100rem;transform: translateX(-50%);background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);}
.element-gradient-full-2{position:absolute;display:block;z-index:-1;right:-10rem;top:0rem;width:150rem;height:150rem;transform: translateX(50%);background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);}

@media (max-width: 1200px)
{
.element-gradient-full{position:absolute;display:block;z-index:-1;left:-20rem;top:-20rem;width:100rem;height:100rem;transform: translateX(-50%);background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);}
.element-gradient-full-2{position:absolute;display:block;z-index:-1;right:-20rem;top:0rem;width:150rem;height:150rem;transform: translateX(50%);background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);}
}



/* =================================== SLIDER FRONTPAGE=================================== */
#slider{position:relative;display:block;width:70%;margin-left:15%;height:30rem;}
.slider-overlay{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:black;opacity: 0.6;}
.slider-claim{position:absolute;z-index:2;bottom:4rem;width:calc(100% - 8rem);margin-left:4rem;margin-right:4rem;}
.slider-claim h1{margin-bottom:0rem;}
.slider-claim h1::before{content:"";display:block;position:absolute;top:-2rem;left:0;width:2rem;height:0.5rem;background:var(--color-primary);}

.slider-emblem{position:absolute;z-index:2;top:2rem;right:2rem;width:12rem;height:auto;opacity:0.7;}
@media(max-width: 768px){.slider-emblem{width:8rem;}}

.slider-images{position: relative;z-index:0;width:100%;height:100%;overflow: hidden;}
.slider-images img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;}

.herobanner-image img{animation: zomm-dx 20s ease-in-out infinite;transform-origin: center center;will-change: transform;}
@keyframes zomm-dx {
0% {transform: scale(1) translate(0, 0);}
50% {transform: scale(1.1) translate(-2%, -2%);}
100% {transform: scale(1) translate(0, 0);}
}


@media (max-width: 1800px){
#slider{position:relative;display:block;width: calc(100% - 4rem);margin-left:2rem;height:35rem;}
}

@media (max-width: 991.98px)
{
#slider{height:40rem;}
.slider-2 .slider-claim{bottom:10rem;}
}

@media (max-width: 767.98px) {
  .slider-claim{width:calc(100% - 4rem);margin-left:2rem;margin-right:2rem;}

}


/* =================================== Gradients =================================== */
.dark-gradient-100{position:absolute;z-index:1;bottom:0;left:0;top:0;right:0;background: linear-gradient(180deg,rgba(22, 22, 22, 0.0) 0%, rgba(22, 22, 22, 1)100%);}
.dark-gradient-75{position:absolute;z-index:1;bottom:0;left:0;right:0;height:75%;background: linear-gradient(180deg,rgba(22, 22, 22, 0.0) 0%, rgba(22, 22, 22, 1)100%);}


/* =================================== MB - Grid mit Bild =================================== */
#grid-3-col{padding-top:0;}

.title-before-grid{margin-bottom:0rem;margin-top:3rem;}

.modular-card{position:relative;height:100%;background:var(--color-primary);overflow:hidden;}
.modular-card:hover{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);}

.modular-card-image{position:relative;overflow:hidden;height:18rem;}
.modular-card-title{position:absolute;left:1.5rem;bottom:1.5rem;z-index:5;}
.modular-card-title h4{color:var(--color-white);margin-bottom:0rem;padding-bottom:0rem;}
.modular-card-content-block{position:relative;padding:1.5rem;padding-bottom:6rem;}

.modular-card-link{color:var(--color-text);}

a.modular-card-link:hover .modular-card-image img{transform: scale(1.2);}
a.modular-card-link:hover .modular-card {color:var(--color-white);background:var(--color-primary-alt);}
.card-button{position:absolute;display:block;left:1.5rem;bottom:1.5rem;}
a.modular-card-link .button-mini{color:var(--color-tertiary);border:2px solid var(--color-tertiary);}
a.modular-card-link:hover .button-mini{color:var(--color-white);border:2px solid var(--color-white);}


/* =================================== KONTAKT & MAP =================================== */
.qr-code img{width:8rem;}


.map-col { height: 100%; }
#kontakt-map{
  width: 100%;
  height: 100%;
  min-height: 600px; /* wichtig! */
  overflow: hidden;
}