/* =================================== 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; }


/* =================================== 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;}




/* =================================== HERO =================================== */
.filmspule{position:relative;display:block;width:100%;height:20rem;  background: url(../img/Filmspule.webp) center center no-repeat;background-size: cover;}


.wp-block-image.panorama{position:relative;height:25rem;}
.wp-block-image.panorama img {position:absolute;left:0;top:0;width: 100%;height:100%;object-fit: cover;border:2rem solid #fff;}

.wp-block-image.cover{position:relative;height:100%;}
.wp-block-image.cover img {position:absolute;left:0;top:0;width: 100%;height:100%;object-fit: cover;}
@media (max-width: 991px) {.wp-block-image.cover{position:relative;height:30rem;}}



.spacer{position:relative;display:block;width:100%;height:0px;background:var(--color-white);margin-bottom:2rem;}
.wp-block-columns {gap:4rem;}



/* Gutenberg-Spalten schon ab 991px stapeln */
@media (max-width: 991px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}



.referenzen-list .referenz-item{display:block;padding:4rem;border:0.2rem solid var(--color-primary);border-radius:3rem;color:var(--color-primary);}
@media(max-width: 768px){.referenzen-list .referenz-item{padding:2rem;}}