/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
body {
  -webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}

/* Zeigt alle elemente im OffCanvas an auch wenn sie nicht im Veieport liegen. */
.brx-offcanvas-inner {
    overflow-y: scroll;
    flex-wrap: nowrap;
  }

*, *:hover {
  transition-duration: 0.3s !important;
}

/* Gemeinsame Stile für die Elternelemente */
.pulse-btn,
.pulse-box {
  position: relative;
}

/* Gemeinsame Stile für alle ::before und ::after Pseudo-Elemente */
.pulse-btn::before,
.pulse-btn::after,
.pulse-box::before,
.pulse-box::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  animation-name: pulse-lines; /* Einheitlicher Animationsname */
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

/* Gemeinsame Stile für ::before Pseudo-Elemente (Position und linke/obere Ränder) */
.pulse-btn::before,
.pulse-box::before {
  top: 0;
  left: 0;
  border-top: 1px solid #ff5e14;
  border-left: 1px solid #ff5e14;
}

/* Gemeinsame Stile für ::after Pseudo-Elemente (Position und rechte/untere Ränder) */
.pulse-btn::after,
.pulse-box::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #ff5e14;
  border-right: 1px solid #ff5e14;
}

/* Spezifische Startgrößen und Zielgrößen für .pulse-btn */
.pulse-btn::before,
.pulse-btn::after {
  width: 80px; /* Startbreite */
  height: 20px; /* Starthöhe */
  --target-width: 120px; /* Zielbreite als Variable */
  --target-height: 40px; /* Zielhöhe als Variable */
}

/* Spezifische Startgrößen und Zielgrößen für .pulse-box */
.pulse-box::before,
.pulse-box::after {
  width: 60px; /* Startbreite */
  height: 60px; /* Starthöhe */
  --target-width: 90px; /* Zielbreite als Variable */
  --target-height: 90px; /* Zielhöhe als Variable */
}

/* Einheitliche Keyframes-Definition, die Variablen nutzt */
@keyframes pulse-lines {
  /* Der 0%-Zustand wird automatisch von den initialen width/height Werten übernommen */
  100% {
    width: var(--target-width);
    height: var(--target-height);
  }
}