@charset "UTF-8";
/*
 Theme Name:   Actionsound
 Theme URI:    https://actionsound.de/
 Description:  Child theme for Actionsound
 Author:       Alexandra Saßl
 Author URI:   https://sassl-webdesign.de/
 Template:     bricks
 Version:      1.1
 Text Domain:  actionsound
*/
/* #region Cheats */
:where(img),
:where(figure:not(figure:has(img))) {
  border-radius: var(--radius);
}

.skip-link {
  top: 5rem;
  left: 4rem;
}

/* #endregion Cheats */
/* #region CI/CD */
.highlight {
  color: var(--primary);
}

.btn-primary.bricks-button {
  position: relative;
  padding: 0.5em 1.4em;
  background: transparent;
  isolation: isolate;
  font-weight: 400;
}
.btn-primary.bricks-button::before {
  content: "";
  position: absolute;
  background: var(--primary);
  inset: 0;
  transform: skewx(-5deg);
  border-radius: var(--radius-m);
  z-index: -1;
}
.btn-primary.bricks-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* unter dem Text */
  border-radius: inherit;
  pointer-events: none;
  /* diagonaler, weicher „Lichtstreifen“ */
  background: linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.15) 52%, transparent 60%);
  /* an deine Schräge anpassen */
  transform: translateX(-53%);
  opacity: 0;
  will-change: transform, opacity;
}
.btn-primary.bricks-button:hover::after {
  animation: sheen 0.9s ease forwards;
}

form.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper .jet-form-builder__prev-page, form.jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__prev-page {
  position: relative;
  padding: 0.5em 1.4em;
  background: transparent;
  isolation: isolate;
  font-weight: 400;
}
form.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper .jet-form-builder__prev-page::before, form.jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__prev-page::before {
  content: "";
  position: absolute;
  background: var(--bg-body);
  inset: 0;
  transform: skewx(-5deg);
  border-radius: var(--radius-m);
  border: 3px solid var(--primary);
  z-index: -1;
}
form.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper .jet-form-builder__prev-page::after, form.jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__prev-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* unter dem Text */
  border-radius: inherit;
  pointer-events: none;
  /* diagonaler, weicher „Lichtstreifen“ */
  background: linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.15) 52%, transparent 60%);
  /* an deine Schräge anpassen */
  transform: translateX(-53%);
  opacity: 0;
  will-change: transform, opacity;
}
form.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper .jet-form-builder__prev-page:hover::after, form.jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__prev-page:hover::after {
  animation: sheen 0.9s ease forwards;
}

@keyframes sheen {
  0% {
    transform: translateX(-45%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: translateX(45%);
    opacity: 0;
  }
}
.faq, .intro__blurb, .services__card {
  position: relative;
  padding: 0 2em;
}
.faq::before, .intro__blurb::before, .services__card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: var(--radius-m);
  height: 100%;
  top: calc(var(--h2) / 2);
  pointer-events: none;
  border: 3px solid var(--secondary);
  mask: linear-gradient(black, black) no-repeat top left/30px 3px, linear-gradient(black, black) no-repeat bottom left/80px 3px, linear-gradient(black, black) no-repeat left/3% 100%, linear-gradient(black, black) no-repeat top right/80px 3px, linear-gradient(black, black) no-repeat bottom right/40px 3px, linear-gradient(black, black) no-repeat right/20px 100%;
  transform: skewx(-5deg);
}

.glossy-frame {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  padding: 3px;
  /* Leichter Glow außen */
}
.glossy-frame img {
  border-radius: var(--radius-s);
}
.glossy-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px; /* Dicke des Rahmens */
  background: linear-gradient(145deg, hsla(27, 27%, 46%, 0.9) 0%, hsla(27, 27%, 46%, 0.6) 30%, hsla(30, 29%, 95%, 0.35) 50%, hsla(27, 27%, 46%, 0.7) 70%, hsla(27, 27%, 46%, 0.9) 100%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.glossy-frame::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(149, 114, 85, 0.12), transparent);
  filter: blur(14px);
  z-index: -1;
}

/* #endregion CI/CD */
:where(p) {
  margin-block: 0;
}

:where(ul.brxe-container),
:where(ul.brxe-block) {
  padding-inline-start: 0;
}

.heading-with-icon::before {
  content: "";
  mask-image: url(/wp-content/uploads/actionsound-icon.svg);
  background-color: var(--secondary);
  display: inline-block;
  aspect-ratio: 1;
  width: clamp(3rem, 6.9252vw - 0.3102rem, 8rem);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: left center;
  transform: translatey(clamp(0.6rem, 2.4931vw - 0.5917rem, 2.4rem));
}

/* #region Header */
.header__logo {
  transform: translatey(-180%);
  transition: all 300ms ease;
}

.scrolling .header {
  box-shadow: var(--primary-10) 0px 0px 9px 0px;
}
.scrolling .header__logo {
  transform: translatey(0);
}

.nav .bricks-nav-menu {
  align-items: center;
}

@media (width <= 1000px) {
  .header .btn-primary {
    display: none;
  }
}
/* #endregion Header */
/* #region Services */
section:has(.services) {
  container-type: inline-size;
  container-name: services;
}

.services {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: var(--grid-3);
}

@container services (width <= 1050px) {
  .services {
    grid-template-columns: var(--grid-1);
    row-gap: 60px !important;
  }
}
.services__card {
  container: card/inline-size;
  max-width: 600px;
  width: 100%;
  margin-inline: auto;
}

.services__card__title {
  hyphens: auto;
  max-width: clamp(180px, 83cqi, 370px);
}

/* #endregion Services */
/* #region intro-blurb */
.intro__blurb {
  container-type: inline-size;
  container-name: blurb;
  align-items: center;
  width: 600px;
}
.intro__blurb .blurb__title {
  text-align: center;
  max-width: 200px;
  hyphens: auto;
}
.intro__blurb .blurb__content-wrapper {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--grid-gap);
  align-self: flex-start;
  align-items: center;
}
.intro__blurb .blurb__icon {
  max-width: 70px;
}

@container blurb (width >= 450px) {
  .blurb__title {
    max-width: 370px !important;
  }
}
@container blurb (405px <= width <= 450px ) {
  .blurb__title {
    max-width: 315px !important;
  }
}
/* #endregion intro-blurb */
/* #region image-carousel */
.image-carousel {
  position: relative;
  transform: translatex(2.5%);
}
.image-carousel::before, .image-carousel::after {
  content: "";
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translate(0, -30px) skewx(-5deg);
  border-radius: var(--radius-m);
}
.image-carousel::before {
  height: 100%;
  width: 95%;
  background-color: var(--secondary);
  border: 3px solid var(--secondary);
  background: transparent;
}
.image-carousel .image {
  mask-image: url("assets/images/imageframe.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  aspect-ratio: 16/10;
  object-fit: cover;
}

/* #endregion image-carousel */
/* #region timeline */
.timeline {
  --line-width: 3px;
  --dot-size: 15px;
  display: grid;
  grid-template-columns: var(--grid-2);
  grid-gap: var(--grid-gap);
  isolation: isolate;
}
.timeline::before, .timeline::after {
  content: "";
  position: absolute;
  width: var(--line-width);
  left: 50%;
  z-index: -1;
}
.timeline::before {
  left: 50%;
  background: var(--secondary);
  height: 100%;
  transform: translatex(-50%);
  border-radius: 100px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.timeline::after {
  top: 0;
  bottom: 0;
  border-radius: 100px;
  transform-origin: top;
  left: 50%;
  transform: translatex(-50%) scaleY(var(--p, 0));
  background: var(--primary);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .timeline::after {
    transform: scaleY(1);
    transition: none;
  }
}
/* Basis-Dot (weiß) */
.timeline__heading::before {
  content: "";
  position: absolute;
  top: 50%;
  aspect-ratio: 1;
  width: var(--dot-size);
  border-radius: 50%;
  background: #fff;
  transform: translatey(-50%);
  z-index: 1;
}

.timeline__container {
  position: relative;
}
.timeline__container:nth-child(odd) {
  text-align: right;
  align-items: flex-end;
}
.timeline__container:nth-child(2) {
  grid-column: 2/3;
  grid-row: 2;
}
.timeline__container:nth-child(3) {
  grid-column: 1/2;
  grid-row: 3;
}
.timeline__container:nth-child(4) {
  grid-column: 2/3;
  grid-row: 4;
}
.timeline__container:nth-of-type(even) .timeline__heading::before {
  left: calc(-1 * (var(--grid-gap) + var(--line-width) * 2));
  left: calc(-1 * (var(--grid-gap) / 2 + var(--dot-size) / 2));
}
.timeline__container:nth-of-type(odd) .timeline__heading::before {
  right: calc(-1 * (var(--grid-gap) / 2 + var(--dot-size) / 2));
}

@media (width <= 700px) {
  .timeline {
    grid-template-columns: var(--grid-1) !important;
    grid-auto-rows: auto;
  }
  .timeline::before, .timeline::after {
    left: 0;
  }
  .timeline__container {
    grid-column: auto !important;
    grid-row: auto !important;
    padding-inline-start: 26px;
  }
  .timeline__container:nth-child(odd) {
    text-align: left;
    align-items: flex-start;
  }
  .timeline__container .timeline__heading::before {
    left: -33px !important;
  }
}
/* #endregion timeline */
/* #region faq */
.faq {
  align-items: center;
  padding: 0 3em;
}
.faq::before {
  top: var(--h1);
}
@media (width <= 760px) {
  .faq {
    align-items: flex-start !important;
    padding: 0;
  }
  .faq::before {
    border: none;
  }
}

.faq__accordion .accordion-title .title {
  padding-inline-end: 2rem;
}
.faq__accordion .accordion-item .icon {
  transition: all 300ms ease;
}
.faq__accordion .accordion-item.brx-open .icon {
  rotate: 405deg !important;
}
.faq__accordion .accordion-item:not(:first-of-type) {
  margin-block-start: 1rem;
}

/* #endregion faq */
/* #region Anfrageformular */
form.jet-form-builder .jet-form-builder-progress-pages__item--label {
  display: none;
}
form.jet-form-builder .jet-form-builder-progress-pages__separator {
  border-radius: 50vw;
}
form.jet-form-builder .jet-form-builder__next-page {
  margin-block-start: 2rem;
}
form.jet-form-builder .jet-form-builder__next-page-wrap {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
}
form.jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__next-page {
  color: var(--secondary);
  line-height: 1.5;
}
form.jet-form-builder .jet-form-builder__next-page-wrap .jet-form-builder__prev-page {
  color: var(--primary);
  margin-block-start: 2rem;
  line-height: 1.5;
}
form.jet-form-builder .field-type-date-field .jet-form-builder__field.date-field {
  max-width: 460px;
  width: auto;
  height: auto;
}
form.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio :checked + span::before {
  background-color: var(--primary);
  background-image: none;
}
form.jet-form-builder .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :checked + span::before {
  background-color: var(--primary);
}
form.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper .jet-form-builder__action-button {
  margin-block-start: 2rem;
}
form.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper .jet-form-builder__prev-page {
  color: var(--primary);
  margin-block-start: 2rem;
}
form.jet-form-builder .field-type-textarea-field .jet-form-builder__field.textarea-field {
  height: 30rem;
}
form.jet-form-builder .jet-form-builder__field-wrap.checkradio-wrap span {
  display: inline;
  margin-inline-start: 3.5rem;
}
form.jet-form-builder .jet-form-builder__field-wrap.checkradio-wrap span::before {
  position: absolute;
  left: 0;
  top: 0.5rem;
}
form.jet-form-builder .wp-block-group.is-layout-flex {
  gap: 2rem;
  margin-block-end: 0;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: 0 1em !important;
  margin-block-end: 0;
}

:where(.wp-block-columns) {
  margin-bottom: 0 !important;
}

/* #endregion Anfrageformular */
/* #region WhatsApp-Button */
.whats-app {
  position: fixed;
  right: var(--space-xs);
  bottom: var(--space-xs);
  padding: 2px;
  border-radius: var(--radius-full);
  background: var(--primary);
  width: 6rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 300ms ease;
}
.whats-app:hover {
  background: var(--primary-90);
}

/* #endregion WhatsApp-Button *//*# sourceMappingURL=style.css.map */