/* =================================== General =================================== */
img{max-width:100%;height:auto;}
/* section selector intentionally left blank or removed */
#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: 1199.98px){.resp-space-3rem{display:block;width:100%;height:3rem;}}
@media  (max-width: 1199.98px){.resp-space-4rem{display:block;width:100%;height:4rem;}}
@media  (max-width: 1199.98px){.resp-space-5rem{display:block;width:100%;height:5rem;}}
@media  (max-width: 1199.98px){.resp-space-6rem{display:block;width:100%;height:6rem;}}


.mb-3rem{margin-bottom:3rem;}


/* =================================== Eigene Button-Designs =================================== */
.button-1, .wp-block-button a{display:inline-block;padding:1rem 2rem!important; font-size: 1.2rem!important; border-radius: 5rem!important; font-weight: 900!important;  background:var(--color-primary)!important; color: var(--color-white)!important;}
.button-1:hover, .wp-block-button a:hover{ background: var(--color-secondary-alt)!important;color:var(--color-text)!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); }


/* =================================== Formularelemente (Kontaktformular) =================================== */
input, textarea, select { padding: 1.2rem 3rem; width: 100%; box-sizing: border-box; font-size: 1rem; border-radius:0.5rem; background:#F5F5F5; border: 0rem; transition: all 0.2s ease-in-out; }
#inp-uploads{ padding-left: 1.2rem;}
input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus { outline: none; border-color: var(--color-primary); background: var(--color-secondary); }
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: 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%; }

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

}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Upload UI */
.upload-status { margin-top: 16px; }
.upload-status__text { margin-bottom: 8px; font-size: 14px; color: #555; }
.upload-status__percent { margin-top: 6px; font-size: 13px; color: #777; }

.upload-bar {
  width: 100%;
  height: 10px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
}

.upload-bar__fill {
  height: 100%;
  width: 0%;
  background: #e30613; /* dein Rot */
  border-radius: 999px;
  transition: width .15s linear;
}

/* Button deaktivieren während Submit */
.is-submitting .button-1 { opacity: .7; pointer-events: none; }

@media(max-width: 767.98px){
  input[type="file"] {
    font-size: 0;
  }

  input[type="file"]::file-selector-button {
    font-size: 14px;
  }
}

/* =================================== HERO =================================== */
#hero{position:relative;display:block;width:100%;padding-top:20rem;padding-left:5%;padding-right:5%;padding-bottom:8rem;background:grey;text-align:center;color:var(--color-white);}
@media (max-width: 1199.98px){#hero{padding-top:30rem;padding-bottom:4rem;}}
.hero-image {position:absolute;top:0;left:0;width:100%;height:100%;overflow: hidden;}
.hero-image img{width:100%;height:100%;object-fit: cover;}

.hero-gradient-layer-top{position:absolute;z-index:1;top:0;left:0;right:0;height:50%;background: linear-gradient(0deg,rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 1)100%);}
.hero-gradient-layer-bottom{position:absolute;z-index:2;bottom:0;left:0;right:0;height:70%;background: linear-gradient(180deg,rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 1)100%);}

.hero-claim {position:relative;display:block;z-index:3;}
.hero-claim h1, .hero-claim h2, .hero-claim h3, .hero-claim h4, .hero-claim h5, .hero-claim h6{color:var(--color-white);}



.hero-claim h3.bottom-driangle{position:relative;display:inline-block;margin-bottom: 3rem;background:var(--color-primary);padding: 1rem 2rem;}
.hero-claim h3.bottom-driangle::after{
  position: absolute;
  z-index: -1;
  content: "";
  bottom: -0.6rem;
  left: 50%;
  width: 2rem;
  height: 2rem;
  background: var(--color-primary);
  transform: translateX(-50%) rotate(45deg);
}
.hero-claim .button-1, .hero-claim .wp-block-button a{margin-left:0.5rem;margin-right: 0.5rem;}

@media (max-width: 1199.98px){.hero-claim .advice{margin-bottom:1.5rem;}}


.hero-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);}
}


/* =================================== PAGE BENEFITS =================================== */
.benefits-section{position:relative;display:block;z-index:5!important;background: var(--color-primary);color:var(--color-white);padding-top:2rem;padding-bottom:2rem;}
@media  (max-width: 1199.98px){.benefits-section{padding-top:6rem;padding-bottom:6rem;}}
.benefits-section::after{position:absolute;z-index:-1;content:"";bottom:-1.9rem;left:50%;margin-left:-2rem;width:4rem;height:4rem;background:var(--color-primary);rotate: calc(45deg);}
.benefits-section::before{position:absolute;z-index:6;content:"";top:-7.8rem;left:0;right:0;height:8rem;background: url(../img/topper-benefits.svg) no-repeat center bottom;background-size: 100% auto;}
.benefits-section .ti { width: 6rem;height: 6rem;margin-bottom:2rem;}

.benefits-section .col-xl-4:nth-of-type(2) {border-left:2px solid var(--color-white);border-right:2px solid var(--color-white);}
@media  (max-width: 1199.98px){.benefits-section .col-xl-4:nth-of-type(2) {border:0;}}


/* =================================== CONTENT TEXT =================================== */
.textwrapper-content{padding:8rem;background:var(--color-secondary);}
@media(max-width: 1199.98px){.textwrapper-content{padding:4rem;}}
@media(max-width: 767.98px){.textwrapper-content{padding: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{position:relative;display:block;}

.title-before-grid{color:var(--color-primary);}

.modular-card{position:relative;height:100%;overflow:hidden;}

.modular-card-image{position:relative;overflow:hidden;aspect-ratio: 1 / 1;}
.product-card .modular-card-image{aspect-ratio: 16 / 9;}

.modular-card-title{position:relative;z-index:5;}
.modular-card-priceinfo{color:var(--color-white);}
.modular-card-content-block{position:relative;padding:1.5rem;background:var(--color-text);transition: all var(--transition-default) ease-in-out;}
.modular-card-content-block::after{position:absolute;z-index:1;content:"";top:-0.75rem;left:2rem;width:1.5rem;height:1.5rem;background:var(--color-text);rotate:45deg;transition: all var(--transition-default) ease-in-out;}
.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-content-block{background:var(--color-primary);}
a.modular-card-link:hover .modular-card-content-block::after{background:var(--color-primary);}


.modular-card-title h4{color:var(--color-white);margin-bottom:0rem;padding-bottom:0rem;padding-bottom:0;}
.product-card .modular-card-title h4{font-weight:400;}
.modular-card-priceinfo h4{font-weight:400;margin-bottom:0rem;}

.card-layout-4 .dark-gradient-75{display:none;}

.card-layout-3 .modular-card-image{aspect-ratio: 1 / 1;}
.card-layout-3 .modular-card-content-block{background:none;padding-left:0rem;padding-bottom:0rem;}
.card-layout-3 .modular-card-content-block::after{display:none;}
.card-layout-3 .modular-card-priceinfo{position:absolute;z-index:5;top:-2rem;right:1rem;color:var(--color-white);background:var(--color-primary);padding:0.5rem 1rem;}
.card-layout-3 .modular-card-priceinfo::after{position:absolute;z-index:1;content:"";top:-0.75rem;left:2rem;width:1.5rem;height:1.5rem;background:var(--color-primary);rotate:45deg;;}
.card-layout-3 .modular-card-content-block h2, .card-layout-3 .modular-card-content-block h3{margin: 0rem;transition: all var(--transition-default) ease-in-out;}

a.modular-card-link:hover .card-layout-3 .modular-card-content-block{background:transparent;}
a.modular-card-link:hover .card-layout-3 .modular-card-content-block h2{color: var(--color-primary);}


/* =================================== PROCESS =================================== */
#process{background:var(--color-secondary);position:relative;display:block;padding-top:6rem;padding-bottom:6rem;}
#process::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../img/LOGO_Salzkammerglas.svg);
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: center 30%;
    opacity: 0.1;
    pointer-events: none;
}
@media  (max-width: 1199.98px){#process::before {display:none}}

.process-number{font-size:6rem;color:var(--color-primary);font-weight:900;}
.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: 767.98px){
.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 h4{width:100%;}

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


/* =================================== REGIONAL =================================== */
#regional{position:relative;display:block;}
#regional .textwrapper-content{background:var(--color-primary);color:var(--color-white);}

/* =================================== DEFAULT PAGE =================================== */
#contentpage-header{position:relative;display:block;padding-top:16rem;padding-bottom:2rem;background:linear-gradient(var(--color-white), var(--color-primary));color:var(--color-white);}



/* =================================== LEADFORM =================================== */
#leadform{position:relative;display:block;padding-top:6rem;padding-bottom:6rem;overflow:hidden;}
#leadform,
.anchor-offset{
  position: relative;
  display: block;
}

/* Legacy offset support - kept as fallback but scroll-margin-top is more reliable */
.anchor-offset::before{
  content:"";
  display:block;
  height:200px;      /* Offset */
  margin-top:-200px; /* zieht es wieder hoch */
  visibility:hidden;
  pointer-events:none;
}


/* =========================================
   BENEFITS ICONS (GUTENBERG GRID)
========================================= */


.wp-block-group-is-layout-grid{gap:4rem;padding-top:2rem;padding-bottom:3rem;}

@media  (max-width: 1199.98px){
    .wp-block-group-is-layout-grid {
        gap:2rem;
        grid-template-columns: 1fr!important;
    }
}

.wp-block-group-is-layout-grid p {
    position: relative;
}



/* =================================== SG Benefits Grid =================================== */

.sg-benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 3rem;
  padding-bottom:3rem;
  padding-top:2rem;
}

.sg-benefit-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	color: var(--color-primary);
}

.sg-benefit-icon svg {
  width: 3.5rem;
  height: 3.5rem;
}

.sg-benefit-text {
	font-weight: 600;
  font-size:1.2rem;
}

@media (max-width: 767.98px) {
	.sg-benefits-grid {
		grid-template-columns: 1fr;
	}
}

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


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




/* =================================== SIDE CONTACT BUTTONS =================================== */
.side-contact{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-contact__btn{
  width: 4rem;
  height: 4rem;
  display: grid;
  background: rgba(35,31,32,0.9);
  place-items: center;
  text-decoration: none;
  margin-bottom:1px;
  transition: all var(--transition-fast) ease-in-out;
}

.calendly-btn{
  background: rgba(225,31,53,0.9);
}

.side-contact__icon{
  width:50%;height:50%;
  color: #fff; 
}

.side-contact__btn:hover{
    background: rgba(35,31,32,1);
}

.calendly-btn:hover{
  background: rgba(225,31,53,1);
}

@media (max-width: 768px){

  .side-contact{
    left: 0rem;
    right: auto;
    top: auto;
    bottom: 0rem;
    transform: none;
   flex-direction: row;
   border-top-right-radius: 1rem;
  }

  .side-contact__btn{
  margin-bottom:0px;
  margin-right:1px;

}

}


/* =================================== CALENDLY MODAL =================================== */
#calendlyModal .modal-dialog {
  max-width: 900px;
}

#calendlyModal .calendly-container {
  width: 100%;
  min-width: 320px;
  height: 700px;
}

/* Optional: auf kleineren Screens etwas mehr Höhe */
@media (max-width: 576px) {
  #calendlyModal .calendly-container {
    height: 80vh;
  }
}