/* =================================== General =================================== */
img{max-width:100%;height:auto;}

/* =================================== 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.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: 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: 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 { 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%; }


/* =================================== 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 =================================== */
.portfolio-content{padding-top:10rem;}
@media (max-width: 1200px) { .portfolio-content{padding-top:0rem;padding-bottom:6rem;}}

.portfolio-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;margin: 0; padding: 0;width: 100%;box-sizing: border-box;}
@media (max-width: 1200px) { .portfolio-grid{ grid-template-columns: 1fr;}}

.card{padding: 4rem;background-color: rgb(0,200,255,0.1);border-radius: 2rem;display: flex;flex-direction: column;justify-content: flex-start;}
@media(max-width: 768px){.card{padding: 2rem;}}
.card:hover{background-color: rgb(0,200,255,0.25);}
.card h4 {hyphens: auto;word-break: normal;font-weight:700;margin-bottom:0;padding-bottom:2rem;}
.card h4::after{display:none;}

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

.fluid-arrow{display: inline-flex;align-items: center;gap: 0.5rem;text-decoration: none;}
.fluid-arrow .material-symbols-outlined{font-size:2rem;}

.arrow-shaft{width: 5rem;height: 1px;background-color: currentColor;margin-right:-1.6rem;}
.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-blue-gradient-linear{position:absolute;display:block;z-index:1;left:0;top:0;width:100%;height:50%;background: linear-gradient(180deg,var(--color-primary) 0%,  transparent 100%);opacity:0.4;}

.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-row{padding-top:5rem;}
.hero-textblock{padding-top:3rem;}


#simply-content{padding-top:20rem;padding-bottom:12rem;}

/* =================================== SLIDER =================================== */
.swiper-slide {position: relative;}

.slider-slide-wrapper {  display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;}
.slide-content-box{  border-radius: 2rem;display: flex;flex-direction: column;height: 100%;min-height:40rem;position:relative;}

.slider-image {height: 100%;position: relative;border-radius:3rem;border-bottom-right-radius: 15rem;overflow:hidden;}
.slider-image img {position:absolute;top:0rem;left:0rem;width: 100%; height: 100%; object-fit: cover; display: block; }


.slider-content {padding:8rem;padding-right:6rem;background:var(--color-tertiary);border-radius:3rem;border-top-left-radius: 15rem;}
.slider-text p{margin-bottom:0;font-style:italic;}
.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;}

.slider-navigation{position:absolute;bottom:0;right:2rem;width:80%;display:block;height:6rem;}
.swiper-button-prev, .swiper-button-next { width: 5rem!important; height: 5rem!important;top:0!important;display: flex; color:var(--color-primary)!important; transition: background 0.3s ease;border:0.1rem solid var(--color-primary);border-radius:50%;}
.swiper-button-prev{left:auto!important;right:8rem!important;}
.swiper-button-next:after, .swiper-button-prev:after{font-size:2rem!important;}

.swiper-button-prev:hover{color:var(--color-white)!important;border:0.1rem solid var(--color-white)}
.swiper-button-next:hover{color:var(--color-white)!important;border:0.1rem solid var(--color-white)}


/* Abstand zwischen Bullets */
.swiper-pagination{position:relative!important;display:block!important;height:3rem!important;top:auto!important;bottom:auto!important;padding-top:2rem;}
.swiper-pagination-bullet { margin: 0 6px!important;background: var(--color-muted)!important;}
.swiper-pagination-bullet {width: 12px!important;height: 12px!important;}
.swiper-pagination-bullet-active {background: var(--color-primary)!important;}


@media (max-width: 1200px)
{
  .slider-slide-wrapper {grid-template-columns: 1fr;gap:2rem;}
  .slider-image{height:30rem;}
  .slider-content {padding:6rem;border-radius:3rem;}
  .slide-content-box{min-height:30rem;}
  .slider-navigation{right:1rem;left:1rem;width:auto;}
  .swiper-button-prev{left:inherit!important;right:auto!important;}
  .swiper-button-next{left:auto!important;right:inherit!important;}
}

@media (max-width: 768px)
{
  .slider-content {padding:2rem;padding-bottom:8rem;}
}