/* =================================== General =================================== */
img{max-width:100%;height:auto;}
.container-fluid{z-index:7;}
.error{color:red;}

/* =================================== 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:1.2rem 3rem!important;padding-left:2rem!important;padding-right:3.5rem!important;font-size: 1.2rem!important;text-decoration:none!important; border-radius: 5rem!important; font-weight: 600!important; border: 0.1rem solid var(--color-primary)!important; background:transparent!important; color: var(--color-primary)!important; }

.button-1::after, .wp-block-button a::after{content: "";
  mask: url("../img/button-arrow.svg") no-repeat center / contain;
  -webkit-mask: url("../img/button-arrow.svg") no-repeat center / contain;
  background-color: currentColor;
  width: 1rem; height: 1rem;position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.button-1:hover, .wp-block-button a:hover{ background: var(--color-primary)!important; color: var(--color-white)!important; }

.button-1:hover::after, .wp-block-button a:hover::after {
  transform: translateY(-50%) rotate(45deg);}

.dark-button{color: var(--color-secondary)!important; border: 0.1rem solid var(--color-secondary)!important;}
.dark-button:hover{ background: var(--color-secondary)!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); }


/* =================================== 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: 700; letter-spacing: 0.4rem;color:#fff; text-transform: uppercase; z-index: 1; position: relative; }

.section-titling::after { content: "";position:absolute;bottom:0;left:50%; transform: translateX(-50%);width: 4rem; height: 0.3rem; background: var(--color-primary); z-index: 0; }
.white-element::after{ content: "";position:absolute;bottom:0;left:50%; transform: translateX(-50%);width: 4rem; height: 0.3rem; background: var(--color-white); 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: 0rem; background: var(--color-primary-alt); border: 0rem; transition: all 0.2s ease-in-out;color:var(--color-secondary); }
input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus { outline: none; border-color: var(--color-secondary); background: var(--color-white); }
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-secondary); 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%; }


/* =================================== Pop-Ups =================================== */
.popup { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); 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); }
.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; }



/* =================================== PORTFOLIO =================================== */
#content-grid{z-index:10;}
.portfolio-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2rem;margin: 0; padding: 0;width: 100%;box-sizing: border-box;margin-top:4rem;margin-bottom:3rem;}
@media (max-width: 1200px) { .portfolio-grid{ grid-template-columns: repeat(2, 1fr);}}
@media(max-width: 768px){.portfolio-grid{ grid-template-columns: 1fr;}}

.card{background-color:#fff;display: flex;flex-direction: column;justify-content: flex-start;border:0rem;border-radius:0rem;}
.portfolio-grid a{text-decoration:none!important;}

.card-image{position:relative;display:block;width:100%;height:25rem;overflow:hidden;}
.card-image img{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;object-fit: cover;transition: all 0.4s ease;}
.card:hover .card-image img{transform: scale(1.2);}

.image-layer{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:rgb(0,0,0,0.4);transition: all 0.4s ease;}
.card:hover .image-layer{background:rgb(0,0,0,0.2);}

.link-more-informations{position:absolute;z-index:2;display:block;bottom:2rem;right:2rem;color:#fff;padding-right:2rem;}
.link-more-informations::after{content: "";
  mask: url("../img/button-arrow.svg") no-repeat center / contain;
  -webkit-mask: url("../img/button-arrow.svg") no-repeat center / contain;
  background-color: var(--color-primary);
  width: 1rem; height: 1rem;position: absolute;
  right: 0rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.card:hover .link-more-informations::after{transform: translateY(-50%) rotate(45deg);}

.card h5{position:absolute;left:2rem;bottom:6rem;z-index:3;}


.card-textblock{position:relative;z-index:5;display:block;width:100%;padding:2rem;color:var(--color-secondary);}
.card-textblock::before{position:absolute;content:"";display:block;width:2rem;height:2rem;rotate: 45deg;background:#fff;left:2rem;top:-1rem;}

.card:hover .arrow-shaft{width: 9rem;}


@media (max-width: 1200px) {
  .wp-block-columns.is-layout-flex {
    flex-direction: column !important;
  }
}

.wp-block-group .material-symbols-outlined{font-size:7rem;color:var(--color-primary);padding-bottom:2rem;}

/* =================================== PROCESS =================================== */
.process-steps-row{padding-bottom:2rem;}

.process-number{font-size:8rem;color:var(--color-muted);}
.wrapper-process-line{padding-bottom:4rem;}

.process-line {position: relative;height: 0.3rem;width: 100%;}
.process-line::before{position:absolute;content: '';top:0;left:-10%;width:120%;height:100%;background:var(--color-primary-alt);}

.first-step .process-line::before{left:auto;right:-10%;width:60%;background:var(--color-primary-alt);}
.last-step .process-line::before{left:-10%;width:60%;background:var(--color-primary-alt);}


@media(max-width: 768px){
.process-line::before{left:0;width: 100%;}
.first-step .process-line::before{left:auto;right:0%;width:100%;background:var(--color-primary-alt);}
.last-step .process-line::before{left:0%;width:100%;background:var(--color-primary-alt);}
}

.process-dot {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: var(--color-primary);width:1.5rem;height: 1.5rem;border-radius: 50%;}

.wrapper-process-step-content{position:relative;padding-top:6rem;padding-bottom:3rem;}
.wrapper-process-step-content h4{position:absolute;top:0;left:0;width:100%;text-align:center;margin:0;padding:0;}
.wrapper-process-step-content h4::after{display:none;}

.wrapper-process-step:hover .process-number{color:var(--color-primary);}
.wrapper-process-step:hover .wrapper-process-step-content h4{color:var(--color-primary);}


/* =================================== THEME IMAGE =================================== */
#theme-image{padding-bottom:0;}
.background-layer{position:absolute;display:block;z-index:1;right:0;top:0;left:0;bottom:0;background:var(--color-tertiary);opacity:0.75;}
#theme-image .content-wrapper{padding-top:10rem;padding-bottom:15rem;}



/* =================================== Gradients =================================== */
.element-dark-gradient-linear-bottom{position:absolute;display:block;z-index:6;left:0;bottom:0;width:100%;height:30%;background: linear-gradient(0deg,var(--color-tertiary) 0%,  transparent 100%);}
.element-dark-gradient-linear-top{position:absolute;display:block;z-index:6;left:0;top:0;width:100%;height:50%;max-height:800px;background: linear-gradient(180deg,var(--color-tertiary) 0%,  transparent 100%);}

.element-blue-gradient-full{position:absolute;display:block;z-index:1;left:0;top:20%;width:50vw;height:50vw;transform: translateX(-50%);background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);}

.element-blue-gradient-full-image{position:absolute;display:block;z-index:-1;right:0;top:-25vw;width:50vw;height:50vw;transform: translateX(50%);background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);}

.element-blue-gradient-transparent-portfolio{position:absolute;display:block;z-index:1;right:-20vw;top:0;width:80vw;height:80vw;background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);opacity:0.4;}

.element-blue-gradient-transparent-process{position:absolute;display:block;z-index:1;left:-20vw;top:0;width:80vw;height:80vw;background: radial-gradient(circle closest-side at center, var(--color-primary), transparent);opacity:0.4;}




@media (max-width: 1200px)
{
  .element-blue-gradient-full, .element-blue-gradient-full-image, .element-blue-gradient-transparent-portfolio, .element-blue-gradient-transparent-process{width:160vw;height:160vw;}
  .element-blue-gradient-transparent-portfolio{right:-100vw;width:200vw;height:200vw;}
  .element-blue-gradient-transparent-process{left:-100vw;width:200vw;height:200vw;}
}

@media (max-width: 768px)
{
  .element-blue-gradient-full, .element-blue-gradient-full-image, .element-blue-gradient-transparent-portfolio, .element-blue-gradient-transparent-process{width:160vw;height:160vw;}
  .element-blue-gradient-transparent-portfolio{right:-200vw;width:400vw;height:400vw;}
  .element-blue-gradient-transparent-process{left:-200vw;width:400vw;height:400vw;}
}

/* =================================== HERO =================================== */
#hero{padding-top:18rem;padding-bottom:10rem;}
#hero h1, #hero h4{color:#fff;}

.hero-container{z-index:7;}

.background-hero-section{position:absolute;top:0rem;left:0rem;width: 100%; height: 100%; display: block;}
.background-hero-section img {position: absolute;top: 0;left: 0;width: 100%;height: 100%; object-fit: cover; display: block; animation: move 40s linear infinite alternate; will-change: transform;}


.image-bernhard{position:absolute;z-index:5;bottom:0rem;right:25rem;}
.image-bernhard img{width:30rem;}

.brauchbarmacher_B_outline{position:absolute;z-index:4;bottom:0rem;right:15rem;}
.brauchbarmacher_B_outline img{width:50rem;opacity:0.3;}

.Brauchbarmacher_Siegel{position:absolute;z-index:10;bottom:0rem;right:10rem;}
.Brauchbarmacher_Siegel.content-page{bottom:2rem;right:10rem;}
.Brauchbarmacher_Siegel img{width:15rem;}

@media (max-width: 1500px)
{
  .image-bernhard{right:15rem;}
  .brauchbarmacher_B_outline{right:5rem;}
  .Brauchbarmacher_Siegel{right:5rem;}
  .Brauchbarmacher_Siegel img{width:12rem;}
  .Brauchbarmacher_Siegel.content-page{display:none;}
}
@media (max-width: 1300px)
{
  .image-bernhard{right:5rem;}
  .brauchbarmacher_B_outline{right:-5rem;}
}

@media (max-width: 1200px)
{
  #hero{padding-top:18rem;padding-bottom:30rem;}
  .image-bernhard{right:10rem;}
  .brauchbarmacher_B_outline{right:0rem;}

}


@media (max-width: 1100px)
{
  #hero{padding-top:18rem;padding-bottom:33rem;}
  .image-bernhard{right:50%;transform: translateX(50%);}
  .image-bernhard img{width:300px;max-width:none;}
  .brauchbarmacher_B_outline{right:50%;transform: translateX(50%);}
  .brauchbarmacher_B_outline img{width:500px;max-width:none;}
}



/* =================================== HEROCONTENT =================================== */
#herocontent{padding-top:18rem;padding-bottom:4rem;}
@media (max-width: 768px){#herocontent{padding-top:25rem;}}
#herocontent h1{color:#fff;}
.hero-post-thumbnail{position:absolute;top:0rem;left:0rem;width: 100%; height: 100%; display: block;}
.hero-post-thumbnail img {position: absolute;top: 0;left: 0;width: 100%;height: 100%; object-fit: cover; display: block; animation: move 40s linear infinite alternate; will-change: transform;}


#herocontent .brauchbarmacher_B_outline{bottom:-16rem;right:50%;transform: translateX(50%);}
@media (max-width: 768px){#herocontent .brauchbarmacher_B_outline{bottom:0rem;}}


/* =================================== PROMISE =================================== */
.row-promise-cards{padding-top:9rem;}
.promise-card {position:relative;padding: 3rem;padding-top:7rem;background:rgb(255,255,255,0.4);height:100%;transition: all 0.3s ease-in-out;border-radius:4rem;}
.promise-card:hover{background:rgb(255,255,255,0.6);}
.promise-icon{position:absolute;top:-5rem;left:50%;margin-left:-5rem;display:block;width: 10rem;height: 10rem;border-radius: 5rem;padding:2rem;background:var(--color-secondary);margin-bottom:2rem;}
.promise-icon img {width:100%;}
.promise-title {font-weight: 700;}



/* =================================== SLIDER =================================== */
.swiper{margin-bottom:3rem;}
.swiper-slide {position: relative;}

.slider-slide-wrapper {position: relative;display:block;width:100%;height:40rem;}
@media (max-width: 1200px){.slider-slide-wrapper {height:60rem;}}

.slider-content{position:absolute;z-index:11;left:0;bottom:3rem;width:100%;padding-left:2rem;padding-right:2rem;}

.slider-image{position:absolute;z-index:9;left:0;bottom:0;height: 100%;width:100%;overflow:hidden;}
.slider-image img{position:absolute;top:0rem;left:0rem;width: 100%; height: 100%; object-fit: cover; display: block; }

.tri{ position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover; object-position: center;display: block;}

/* 45°-Schnittlinie durch die Mitte (von links-unten nach rechts-oben) */
.tri-left {
  /* linkes / oberes Bild bleibt sichtbar */
  -webkit-mask-image: linear-gradient(-45deg, transparent 49.8%, #000 49.8%);
          mask-image: linear-gradient(-45deg, transparent 49.8%, #000 49.8%);
}

.tri-right {
  /* rechtes / unteres Bild bleibt sichtbar */
  -webkit-mask-image: linear-gradient(-45deg, #000 50.2%, transparent 50.2%);
          mask-image: linear-gradient(-45deg, #000 50.2%, transparent 50.2%);
}

.slider-gradient{position:absolute;display:block;z-index:10;left:0;bottom:0;width:100%;height:50%;background: linear-gradient(0deg,var(--color-primary) 0%,  transparent 100%);}


.slider-text p{margin-bottom:0;}
.slider-text h2{color:#fff;}
.slider-text .wp-block-heading{font-size:1.4rem;font-weight:400;font-style:italic;color:var(--color-primary);}
@media (max-width: 1200px){.slider-text .wp-block-heading{font-size:1.0rem;}}

.slider-text h6{padding-top:2rem;font-size:1rem;}



.swiper-button-prev, .swiper-button-next { width: 5rem!important; height: 5rem!important;top:40%!important;color:var(--color-white)!important;}
.swiper-button-next:after, .swiper-button-prev:after{font-size:3rem!important;}

.swiper-button-prev:hover{color:var(--color-primary)!important;}
.swiper-button-next:hover{color:var(--color-primary)!important;}


/* Abstand zwischen Bullets */
.swiper-pagination{position:absolute!important;z-index:12!important;bottom:0!important;}
.swiper-pagination-bullet { margin: 0 6px!important;background: var(--color-secondary)!important;}
.swiper-pagination-bullet {width: 12px!important;height: 12px!important;}
.swiper-pagination-bullet-active {background: var(--color-secondary)!important;}


.brauchbarmacher_B_outline_white{position:absolute;z-index:-1;top:-20rem;right:0rem}
.brauchbarmacher_B_outline_white img{width:70rem;opacity:0.3;}




/* =================================== TIMER =================================== */
#timer{background:var(--color-tertiary); padding-top:10rem;padding-bottom:10rem;}
.timer-image-bg{position:absolute;z-index:0;left:0rem;top:0;height:100%;width:60%;overflow:hidden;}
.timer-image-bg img{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;object-fit: cover;animation: move 40s linear infinite alternate; will-change: transform;}

.timer-image-gradient{position:absolute;z-index:1;position:absolute;right:0;bottom:0;width:30%;height:100%;background: linear-gradient(270deg,var(--color-tertiary) 0%,  transparent 100%);}

.timer-content-col{padding-left:25rem;}

#timer h2{color:var(--color-white);padding-bottom:4rem;margin-left:8rem;}
#timer h5, #timer .button-1{margin-left:20.8rem;}
#timer h5::after{display:none;}

.exp-wrap {display: flex;gap: 2rem;  justify-content:flex-start;margin-bottom:5rem;}
.exp-item {position:relative;display:block;background: rgba(238,171,0,0.3);padding:2rem;text-align: center;min-width:12rem;}
.exp-num {font-size: 4rem;font-weight:700;color:var(--color-primary);}


.exp-label {position:absolute;display:block;right:0rem;bottom:-2rem;width:100%;text-align:right;font-weight:700;color:var(--color-primary);}



@media (max-width: 1600px)
{
#timer{padding-top:20rem;}
.timer-image-bg{position:absolute;z-index:0;height:40rem;width:100%;overflow:hidden;}
.timer-image-gradient{position:absolute;z-index:1;position:absolute;right:0;bottom:0;width:100%;height:30%;background: linear-gradient(0deg,var(--color-tertiary) 0%,  transparent 100%);}

.timer-content-col{padding-left:0rem;}
#timer h2{margin-left:0rem;}
#timer h5, #timer .button-1{margin-left:0rem;}
}

/* ---------- bis 1100px (2 Kacheln pro Zeile) ---------- */
@media (max-width:1100px){
  .exp-wrap{
    flex-wrap:wrap;         /* <— wichtig: erlaubt Umbruch */
    gap:0.5rem;
    margin-bottom:3rem;
  }
  .exp-item{
    flex:1 1 calc(50% - 0.5rem); /* zwei Spalten */
    padding:1rem;
    min-width:0;                /* verhindert, dass min-width blockiert */
  }
  .exp-num{font-size:2rem;}
  .exp-label {right:1rem;bottom:0.5rem;}
}

/* ---------- bis 768px ---------- */
@media (max-width:767.98px){
  .exp-item{
    flex:1 1 100%;   /* einspaltig auf Handy */
    min-width:0;
  }
  .exp-num{font-size:2.5rem;}
}





/* =================================== GRID CONTENTPAGE =================================== */
.row-element-grid{padding-top:2rem;}
.content-tile{height:100%;}
.grid-element-image{position:relative;display:block;width:100%;height:20rem;}
.grid-element-image img{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;object-fit: cover;}

.grid-element-image h5::after{display:none;}
.grid-element-image h5{position:absolute;bottom:0rem;left:0rem;background:var(--color-tertiary-transparent);padding:1rem;margin-bottom:0;}

.content-tile .content-text{padding:1rem;}




/* =================================== GRID CONTENTPAGE =================================== */
#section-contact-form{border-bottom:10rem solid var(--color-tertiary);}
#section-contact-form a{color:var(--color-secondary);text-decoration:underline;}
#section-contact-form a:hover{color:var(--color-secondary-alt);text-decoration:underline;}


/* =================================== ÜBER UNS =================================== */
.ueber-uns{padding-bottom:0rem;}



/* =================================== REFERENZ PRÄSENTATIONSSEITE =================================== */
.reference-iamges-row{padding-top:2rem;}

.reference-images-wrapper{width:100%;display:block;padding-bottom:4rem;}
.reference-images-wrapper.before{padding-right:2rem;}
.reference-images-wrapper.after{padding-left:2rem;}
@media (max-width: 1200px){.reference-images-wrapper.before, .reference-images-wrapper.after{padding-right:0rem;padding-left:0rem;}}


.reference-element{position:relative;display:block;width:100%;}
.reference-element-image{position:relative;display:block;width:100%;height:20rem;overflow:hidden;}
.reference-element-image img{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;object-fit: cover;transition: all 0.4s ease;}
.reference-element a:hover img{transform: scale(1.1);}
.reference-element a{text-decoration:none!important;transition: all 0.4s ease;}
.reference-element h5{color:var(--color-secondary);padding-top:1rem;transition: all 0.4s ease;}

.reference-element-image::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(46,41,37,0.3);z-index:10;opacity:1;transition:opacity 0.3s ease,background-color 0.3s ease;} 
.reference-element a:hover .reference-element-image::before{opacity:1;background-color:rgba(46,41,37,0.0);background-image:url('../img/plus-white.svg');background-repeat:no-repeat;background-position:center;background-size:2rem;} 
.reference-element a:hover h5{color:var(--color-secondary-alt);}

/* Keyframes – moderne, kompakte Schreibweise */
@keyframes move {
  0% {
    transform-origin: bottom left;
    transform: scale(1);
  }
  100% {
    transform-origin: bottom left;
    transform: scale(1.4);
  }
}