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

.close-button-modal{position:absolute;top:1rem;right:1rem;padding:0.5rem 0.8rem;text-align:center;border-radius:0.5rem;background:var(--color-primary);color:var(--color-white);border:0rem;}
.close-button-modal:hover{ background: var(--color-primary-alt);}



/* =================================== Section-Titling =================================== */
.section-titling { display: flex; align-items: center; width: 100%; padding-bottom: 3rem; position: relative; }
.section-titling span { font-weight: 600; letter-spacing: 0.2rem; font-size: 75%; color: var(--color-primary);padding-right: 1rem; text-transform: uppercase; z-index: 1; position: relative; }
.section-titling::after { content: ""; width: 5rem; height: 1px; background: var(--color-text); margin-left: 1rem; z-index: 0; }


/* =================================== Formularelemente (Kontaktformular) =================================== */
input, textarea, select { padding: 1.2rem 3rem; width: 100%; box-sizing: border-box; font-size: 1rem; border-radius: 3rem; 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: #f6fcff; }
select, select:hover, select:focus { 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: 767.98px){ .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%; }


/* =================================== Pop-Ups =================================== */
.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: #fff;
    padding: 3rem;
    z-index: 10000;
    border-radius: 1rem;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    /* Neu für den soften Effekt */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

@media(max-width: 767.98px){.popup{width:90%;}}

/* Wenn aktiv: sichtbar & leicht „aufgezoomt“ */
.popup.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.dark-bg {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(22, 22, 22, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.dark-bg.active { 
    visibility: visible; 
    opacity: 1; 
}

.form-message h3.success { color: green; }
.form-message h3.error { color: red; }


/* =================================== Recaptcha Anchor =================================== */
.grecaptcha-badge { display: none; }


/* =================================== 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 =================================== */
.modular-card{position:relative;height:100%;background:var(--color-white);border-radius:4rem;overflow:hidden;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);}
.modular-card:hover{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);}

.modular-card-image{position:relative;overflow:hidden;}
.modular-card-title{position:relative;z-index:5;padding: 1rem 4rem;padding-top:20rem;padding-left:7rem;}
.modular-card-title h4{color:var(--color-white);}
.modular-card-title::before{content: "";position:absolute;bottom:0;left:4rem;width:0.5rem;height:8rem;background:var(--color-primary);}
.modular-card-content-block{position:relative;padding:4rem;}

.modular-card-link{color:var(--color-text);}
@media (max-width: 1500px)
{
    .modular-card-title{padding: 1rem 3rem;padding-top:20rem;padding-left:3rem;}
    .modular-card-title::before{content: "";position:absolute;bottom:0;left:0rem;width:0.5rem;height:8rem;background:var(--color-primary);}
    .modular-card-content-block{padding:3rem;}
}

a.modular-card-link:hover .modular-card-image img{transform: scale(1.1);}
a.modular-card-link:hover .modular-card {color:var(--color-white);background:var(--color-primary);}
a.modular-card-link:hover .button-mini{color:var(--color-white);border:1px solid var(--color-white);}




/* =================================== MB - Grid mit ICON =================================== */
.custom-icon-card{position:relative;height:100%;width:100%;display:block;border-radius:4rem;overflow:hidden;padding:4rem;background:var(--color-white);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);}
@media(max-width: 767.98px){.custom-icon-card{padding-left:2rem;padding-right:2rem;}}
.custom-icon-card:hover{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);}

.custom-icon-wrapper{text-align:center;}
.custom-icon-wrapper span{font-size:10rem;color:var(--color-primary);padding-bottom:2rem;}





/* =================================== Herobanner =================================== */
.herobanner{position:relative;display:block;width:100%;overflow:hidden;}
.herobanner-image {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);}
}

.herobanner-text{position:relative;z-index:5;padding:2rem;padding-top:25rem;padding-bottom:10rem;}
.content-page .herobanner-text{padding-top:15rem;padding-bottom:10rem;}

.herobanner-text h1, .herobanner-text h5{color:var(--color-white);}
.herobanner-text h5{margin:0;}


.wrapper-subtitle{display:inline-block;padding: 1.5rem 3rem;background: linear-gradient(90deg, var(--color-primary), var(--color-primary-alt));clip-path: polygon(2% 0, 100% 0, 98% 100%, 0% 100%);}
@media (max-width: 767.98px){.wrapper-subtitle{clip-path:none;padding: 1.5rem 2rem; font-size:1.2rem;}}


.grey-mountains{position:absolute;z-index:1;bottom:-0.05rem;left:0;right:0;height:20%;background:url(../img/grey_mountains.svg);background-size:100% auto;background-position:bottom center;background-repeat:no-repeat;}
.benefits .grey-mountains, .waste-types .grey-mountains, .container-selection .grey-mountains{position:absolute;z-index:1;top:-0.05rem;left:0;right:0;height:20%;background:url(../img/grey_mountains.svg);background-size:100% auto;background-position:bottom center;background-repeat:no-repeat;transform: scaleY(-1);}
.portfolio .grey-mountains{position:absolute;z-index:1;top:-0.05rem;left:0;right:0;height:20%;background:url(../img/grey_mountains_lightgrey.svg);background-size:100% auto;background-position:bottom center;background-repeat:no-repeat;transform: scaleY(-1);}

.bg-grey{background:var(--color-grey);}


.header-shape{position:absolute;bottom:-3rem;left:0;right:0;height:3rem;background:url(../img/menu-shape.svg);background-size:100% auto;background-position:top center;background-repeat:no-repeat;}
@media (max-width: 1199.98px){.header-shape{display:none;}}
.white-shape-gradient{position:absolute;top:-5rem;z-index:2;left:0;right:0;height:90%;background:url(../img/white_shape_gradient.svg);background-size:100% auto;background-position:top center;background-repeat:no-repeat;opacity:0.4;}


.rounded-medium img{border-radius:2rem;}

.portfolio{background:var(--color-white);}











/* =================================== SLIDER =================================== */
.slider-section{position: relative;background:var(--color-white);}

.swiper-slide { display: flex; align-items: center; justify-content: center; height: 100%!important; position: relative;}

.slider-slide-wrapper { display: flex; flex-direction: row; width: 100%; height:40rem;overflow:hidden;}
.slider-image {flex: 3; overflow: hidden; height: 100%;position: relative;}
.slider-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.diagonal-overlay {position: absolute;top: 0;right: 0;width: 0;height: 0;border-top: 100vh solid transparent;border-right: 20vw solid var(--color-white);;z-index: 2;}

.slider-content { flex: 2; padding: 0rem; height: 100%;padding-right:8rem;display: flex; flex-direction: column; justify-content: center; }
.slider-content-top{position:relative;width:100%;text-align:right;padding-top:6rem;}
.slider-content-top .section-titling{justify-content: flex-end;}
.slider-content-bottom{position:relative;width:100%;padding-top:4rem;min-height:30rem;}

.slider-text p{margin-bottom:0;}

.slider-navigation{display:block;width:100%;}
.swiper-button-prev, .swiper-button-next { width: 5rem!important; height: 5rem!important;display: flex;align-items: center; justify-content: center; color:var(--color-primary)!important; transition: background 0.3s ease; }

/* Abstand zwischen Bullets */
.swiper-pagination-bullet { margin: 0 6px!important; /* horizontaler Abstand */margin-bottom:20px!important;}

/* Größe und Farbe der Bullets */
.swiper-pagination-bullet {width: 12px!important;height: 12px!important;}

/* Aktive Bullet */
.swiper-pagination-bullet-active {background: var(--color-secondary)!important; /* aktive Farbe (z.B. blau) */}

@media (max-width: 1199.98px)
{
  .slider-slide-wrapper { flex-direction: column;height:auto;}
  .slider-image, .slider-content {width: 100%;height: auto;flex: unset;}
  .slider-image{height:30rem;}
  .slider-content {padding:4rem;}
  .diagonal-overlay {display: none;}

  .slider-content-top h4{display:none;}
  .slider-content-top .section-titling{justify-content: flex-start;}
  .slider-content-bottom{padding-top:0rem;min-height:25rem;}
  .swiper-button-next, .swiper-button-prev{top:14rem!important;transform: none!important;margin-top: 0;}
}





/* Default ROUND-IMAGE  */
.round-image img{border-radius:50%;}
@media (max-width: 767.98px){.round-image img{width:300px;}}

.waste-types .section-titling, .container-selection .section-titling{display:none;}
#extra-content{padding-top:0rem;}


.maschinenverkauf-wrapper{border-top:1rem solid black;}