/**
Theme Name: Astra Child
Author: Dtele
Description: Astra-Theme-Erweiterung von Dtele
Template: astra
Version: 1.0
Text Domain: astra
 */

/* =========================================================
   ROOT / VARIABLES
========================================================= */


:root {
  --primary-color: #B51F2A;
  --primary-color-rgb: 181, 31, 42;
  --primary-variant-color: #CF3944;
  --lightblue-color: #EEFAFF;
  --black-color: #333333;
  --white-color: #ffffff;

  /* Display – Desktop 80/80 */
  --fs-display: clamp(2.1rem, 1.079rem + 4.357vw, 4.65rem);
  --lh-display: clamp(2.35rem, 1.417rem + 3.981vw, 4.65rem);

  /* H1 – Desktop 55/60 */
  --fs-h1: clamp(32px, calc(26.69px + 1.474vw), 55px);
  --lh-h1: clamp(2.35rem, 1.857rem + 2.103vw, 3.75rem);

  /* H2 Desktop – 48/53 */
  --fs-h2: clamp(2rem, 1.648rem + 1.502vw, 48px);
  --lh-h2: clamp(2.375rem, 2.045rem + 1.408vw, 3.312rem);

  /* H3 Desktop – 38/43 */
  --fs-h3: clamp(1.75rem, 1.53rem + 0.939vw, 38px);
  --lh-h3: clamp(2.125rem, 1.927rem + 0.845vw, 2.688rem);

   /* H4 Desktop – 32/38 */
  --fs-h4: clamp(1.5rem, 1.324rem + 0.751vw, 32px);
  --lh-h4: clamp(1.875rem, 1.699rem + 0.751vw, 2.375rem);

     /* H5 Desktop – 32/38 */
  --fs-h5: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);
  --lh-h5: clamp(1.5rem, 1.456rem + 0.188vw, 1.625rem);

  /* Body – 18/32 */
  --fs-body: clamp(1rem, 0.956rem + 0.188vw, 18px);
  --lh-body: clamp(1.625rem, 1.493rem + 0.563vw, 32px);

  /* Body Small – 14/24 */
  --fs-body-small: 14px;
  --lh-body-small: clamp(1.375rem, 1.331rem + 0.188vw, 1.5rem);

  /* Body Medium – 22/37 */
  --fs-body-medium: clamp(1.125rem, 1.037rem + 0.376vw, 20px);
  --lh-body-medium: clamp(1.875rem, 1.721rem + 0.657vw, 32px);

  /* Body Large – 26/36 */
  --fs-body-large: clamp(1.25rem, 1.118rem + 0.563vw, 26px);
  --lh-body-large: clamp(1.875rem, 1.743rem + 0.563vw, 36px);

  --fs-content-benefit: clamp(1.125rem, 1.037rem + 0.376vw, 18px);


  --content-max: 1440px;
  --content-gutter: 24px;
  --content-offset: max(
    var(--content-gutter),
    calc((100vw - var(--content-max)) / 2)
  );
}


/* =========================================================
   GLOBAL
========================================================= */



/* =========================================================
   TYPOGRAPHY
========================================================= */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  margin: 0!important;
}
h1.display {
  font-size: var(--fs-display)!important;
  line-height: var(--lh-display)!important;
}

h1,
.h1 {
  font-size: var(--fs-h1)!important;
  line-height: var(--lh-h1)!important;
}

h1 span,
.h1 span, h2 span, .h2 span, h3 span, .h3 span {
  font-weight: 100!important;
}

h2,
.h2 {
  font-size: var(--fs-h2)!important;
  line-height: var(--lh-h2)!important;
  text-wrap: balance;
}

h3,
.h3 {
  font-size: var(--fs-h3)!important;
  line-height: var(--lh-h3)!important;
}
h4,
.h4 {
  font-size: var(--fs-h4)!important;
  line-height: var(--lh-h4)!important;
  font-weight: 100;
}
h5,
.h5 {
  font-size: var(--fs-h5)!important;
  line-height: var(--lh-h5)!important;
  font-weight: 800;
}
.body-l {
  font-size: var(--fs-body-large)!important;
  line-height: var(--lh-body-large)!important;
}
.body-m {
  font-size: var(--fs-body-medium)!important;
  line-height: var(--lh-body-medium)!important;
  font-weight: 100!important;
}
.body-s {
  font-size: var(--fs-body-small)!important;
  line-height: var(--lh-body-small)!important;
}

.wp-block-list {
  margin-left: 16px !important;
}

ul.body-m,
ul.listitem {
  margin-left: 24px !important;
}

a {
  color: var(--primary-color);
  text-decoration: none!important;
}
a:hover {
  color: var(--primary-color);
}
/* =========================================================
   UTILITIES
========================================================= */

.lineheight100 {
  line-height: 100% !important;
}

.font-weight300 {
  font-weight: 300 !important;
}

.font-weight400 {
  font-weight: 400 !important;
}

.font-weight600 {
  font-weight: 600 !important;
}

.font-weight800 {
  font-weight: 800 !important;
}

.width-max-content {
  width: max-content !important;
}

.align-items-top {
  align-items: flex-start !important;
}

.justify-center {
  justify-content: center;
}

.w950 > *{
  max-width: 950px;
}
/* =========================================================
   Button
========================================================= */

.btn {
  border-radius: 2rem;
}

.btn > a {
  padding-left: 60px!important;
  padding-right: 16px!important;
  height: 3rem;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  border-radius: 2rem;
  isolation: isolate;
  transition: box-shadow .35s ease;
  font-size: var(--fs-body) !important;
}
.btn > a:hover {
  box-shadow: 0 0 1rem #f3b4b8;
  background-color: var(--primary-color) !important;
}
.btn > a::after {
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  background-image: url("/wp-content/themes/astra-child/images/svg/symbol-button.svg");
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center;
  z-index: 2;
}

.btn > a::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%) scale(0);
  background: var(--black-color);
  border-radius: 50%;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}

.btn > a:hover::before {
  transform: translateX(-50%) scale(3);
}


/* =========================================================
   Icons
========================================================= */

.icon-call {
  background-image: url("/wp-content/themes/astra-child/images/svg/call.svg");
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
}
.icon-fax {
  background-image: url("/wp-content/themes/astra-child/images/svg/fax.svg");
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
}
.icon-mail {
  background-image: url("/wp-content/themes/astra-child/images/svg/mail.svg");
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
}
.icon-call > span, .icon-fax > span, .icon-mail > span {
  display: none!important;
}

/* =========================================================
   Lightbox
========================================================= */

/* WordPress Lightbox: Bild im Originalverhältnis anzeigen */
.wp-lightbox-overlay .lightbox-image-container img {
  aspect-ratio: auto !important;
  object-fit: contain !important;

  width: auto !important;
  height: auto !important;

  max-width: calc(100vw - 80px) !important;
  max-height: calc(100vh - 80px) !important;
}
/* =========================================================
   Cookie
========================================================= */
@media (max-width: 1024px) {
  button.cmplz-btn.cmplz-manage-consent.manage-consent-1 {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    bottom: 24px!important;
    padding: 0 !important;
    margin: 0 !important;
    left: 24px!important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
  }

  button.cmplz-btn.cmplz-manage-consent.manage-consent-1::before {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    display: block;

    background-color: var(--black-color);

    -webkit-mask-image: url("/wp-content/themes/astra-child/images/svg/fingerprint.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("/wp-content/themes/astra-child/images/svg/fingerprint.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    text-indent: 0;
  }
}

/* =========================================================
   Menu
========================================================= */

#ast-hf-menu-1 {
  gap: 12px;
}
#ast-hf-menu-1 li {
  border-radius: 8px;
  border: 1px solid transparent;
}

/* Hover Hauptmenü */
#ast-hf-menu-1 > li:hover {
  border-color: var(--primary-color) !important;
}

#ast-hf-menu-1 > li:hover > a {
  color: var(--primary-variant-color) !important;
}

/* Aktiver Hauptmenüpunkt */
#ast-hf-menu-1 > li.current-menu-item {
  border-color: var(--primary-color) !important;
}

#ast-hf-menu-1 > li.current-menu-item > a {
  color: var(--primary-color) !important;
}

/* Parent aktiv, wenn Unterpunkt aktiv ist */
#ast-hf-menu-1 > li.current-menu-ancestor,
#ast-hf-menu-1 > li.current-menu-parent,
#ast-hf-menu-1 > li:has(ul li.current-menu-item) {
  border-color: var(--primary-color) !important;
}

#ast-hf-menu-1 > li.current-menu-ancestor > a,
#ast-hf-menu-1 > li.current-menu-parent > a,
#ast-hf-menu-1 > li:has(ul li.current-menu-item) > a {
  color: var(--primary-color) !important;
}

/* Submenu nicht durch Parent-Hover umfärben */
#ast-hf-menu-1 > li:hover ul li a {
  color: var(--black-color) !important;
}

/* Aktiver Unterpunkt */
#ast-hf-menu-1 li ul li.current-menu-item {
  border-color: #fff !important;
}

#ast-hf-menu-1 li ul li.current-menu-item > a {
  color: var(--primary-color) !important;
}

/* Submenu Hover */
#ast-hf-menu-1 li ul li:hover {
  border-color: var(--primary-color) !important;
  /* background-color: rgba(var(--primary-color-rgb), 0.1) !important; */
}

#ast-hf-menu-1 li ul li a:hover {
  color: var(--primary-color) !important;
}

#ast-hf-menu-1 li ul {
  background: rgba(255, 255, 255, 0.95) !important;
  /* backdrop-filter: blur(2rem) !important;
  -webkit-backdrop-filter: blur(2rem) !important; */
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .25) !important;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu, .ast-builder-menu-1 .main-header-menu > .menu-item > .astra-full-megamenu-wrapper {
    margin-top: 1px!important;
    padding: 12px!important;
    border-radius: 8px!important;
    min-width: max-content;
}
.ast-builder-menu-1 .sub-menu, .ast-builder-menu-1 .inline-on-mobile .sub-menu {
    border-top-width: 0px!important;
}

header,
header > * {
  background: transparent !important;
  background-color: transparent !important;
}
.site-branding,
.ast-site-identity {
  padding: 0.5rem 0 !important;
}

.ast-primary-header-bar {
    background-color: transparent !important;
    background-image: none;
    border-bottom: 1px solid rgba(50, 50, 50, 0.1) !important;
}

#masthead {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(1rem) !important;
  -webkit-backdrop-filter: blur(1rem) !important;
}

body.admin-bar #masthead {
  top: 0px;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
    width: 28px!important;
    height: 28px!important;
    fill: var(--black-color)!important;
}

.ast-mobile-header-content::before {
    content: "";
    width: 100vw;
    height: 100vh;
    background: black;
    position: absolute;
    opacity: 0.8;
}

@media (max-width: 921px) {
  body.ast-main-header-nav-open {
    overflow: hidden !important;
    height: 100vh;
  }
}
/* =========================================================
   Location
========================================================= */
.location-bg {
  position: relative;

  --location-height: clamp(180px, 32.36vw, 466px);
  --location-bottom: clamp(24px, 6.25vw, 90px);

  padding-bottom: calc(var(--location-height) + var(--location-bottom)) !important;
}

.location-bg::before {
  content: "";
  width: 100%;
  height: var(--location-height);

  position: absolute;
  left: 0;
  bottom: var(--location-bottom);

  background-image: var(--location-svg, none);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;

  opacity: 0;
  pointer-events: none;
}

.location-bg.location-bg--visible::before {
  opacity: 1;
}

.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  background: #fff!important;
}
.footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  background: #F5F5F5;
  border-radius: 12px;
  color: #5E5E5E;
  align-items: center;
  margin: 0px 24px 0 24px;
}
.footer a {
  color: #5E5E5E;
}
.footer a:hover {
  color: var(--primary-color);
}
a.tel {
  background-image: url("/wp-content/themes/astra-child/images/svg/call.svg");
  background-size: 28px 28px;
  padding-left: 32px;
  background-repeat: no-repeat;
}
a.fax {
  background-image: url("/wp-content/themes/astra-child/images/svg/fax.svg");
  background-size: 28px 28px;
  padding-left: 32px;
  background-repeat: no-repeat;
}
a.mail {
  background-image: url("/wp-content/themes/astra-child/images/svg/mail.svg");
  background-size: 28px 28px;
  padding-left: 32px;
  background-repeat: no-repeat;
}
a.instagram {
  display:inline-block;
  width: 2rem;
  height: 2rem;
  background-image: url("/wp-content/themes/astra-child/images/svg/instagram.svg");
  background-size: 28px 28px;
  background-position: center;
  background-repeat: no-repeat;
}
a.facebook {
  display:inline-block;
  width: 2rem;
  height: 2rem;
  background-image: url("/wp-content/themes/astra-child/images/svg/facebook.svg");
  background-size: 28px 28px;
  background-position: center;
  background-repeat: no-repeat;
}
.footer-contact {
  display: flex;
    gap: 16px;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: center;
}

.footer-copyright {
  align-items: center;
  padding: 1.5rem !important;
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content:center;
  row-gap:0.75rem;
  column-gap:1.5rem;
  font-size:0.8rem;
  color:#5e5e5e;
}
.footer-copyright a,
.footer-copyright span {
  padding: 0;
  margin: 0;
  color:#5e5e5e;
  display: inline-block;
  line-height: 100%;
  height: inherit;
}
.footer-copyright a:hover {
  color: var(--primary-color);
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] {
    padding: 0!important;
}
.site-above-footer-wrap {
  padding: 0!important;
}
@media (max-width: 782px) {
  body.admin-bar #masthead {
    top: 0px;
  }
}
@media (min-width: 768px) {
  .footer {
    padding: 32px;
  }
  .footer-contact {
    flex-direction: row;
  }
}

/* project */
.project-section {
  display: flex;
}

.project-section > .project-image {
  order: 1;
}
.project-section > .project-image + .project-content {
  order: 2;
}

.project-section > .project-content {
  order: 1;
}

.project-section > .project-content + .project-image {
  order: 2;
}

@media (max-width: 768px) {

  .project-section > .project-content,
  .project-section > .project-image + .project-content {
    order: 2;
  }

  .project-section > .project-content + .project-image,
  .project-section > .project-image {
    order: 1;
    max-height: 250px;
    overflow: hidden !important;
    border-radius: 0.75rem !important;
  }

  .project-section > img {
    border-radius: 0 !important;
  }

  .hide-mobile {
    width: 0;
    height: 0;
    display: none;
    overflow: hidden;
  }
}

.w-40 {
  width: 40% !important;
}
.w-60 {
  width: 60% !important;
}
.w-100 {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}