/*
 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, html {
  overflow-x: hidden ;
}

html {
  scroll-padding-top: 100px;
}

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

h2 span {
  color: #e00000 !important;
}

/* Bullet Points durch rote Pfeile ersetzen */
ul.arrow-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul.arrow-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 25px;
}

ul.arrow-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #E00000;
  font-weight: 700;
}

/* Liste nebeneinander mit roten Listenpunkten */
ul.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-left: 20px;
  margin-left: 0;
}

ul.inline-list li {
  margin: 0;
}

ul.inline-list li::marker {
  color: #E00000;
}

/* 1. FORMULARBREITE */
.gform_wrapper.gravity-theme {
    width: 100%;
    margin-left: 0;
}

/* 2. EINGABEFELDER (FLACH 34px & ECKIG) */
.gform_wrapper.gravity-theme input[type=text], 
.gform_wrapper.gravity-theme input[type=email], 
.gform_wrapper.gravity-theme input[type=tel], 
.gform_wrapper.gravity-theme select {
    height: 34px !important; 
    padding: 0 10px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0px !important;
    background-color: #ffffff !important;
}

/* 3. SCHREIBFELD (NACHRICHT 60px & ECKIG) */
.gform_wrapper.gravity-theme textarea {
    height: 150px !important; 
    min-height: 60px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0px !important;
}

/* 4. ABSTÄNDE & LABELS */
.gform_wrapper.gravity-theme .gfield {
    margin-bottom: 12px !important;
}

.gform_wrapper.gravity-theme .gfield_label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

/* 5. EINWILLIGUNG (GRAU, ECKIG & NEBENEINANDER) */
.gform_wrapper.gravity-theme .ginput_container_consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.gform_wrapper.gravity-theme .ginput_container_consent input[type=checkbox] {
    border-radius: 0px !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
}

.gform_wrapper.gravity-theme .gfield_consent_label,
.gform_wrapper.gravity-theme .ginput_container_consent label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    color: #888888 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* 6. ROTER BUTTON (ECKIG) */
.gform_wrapper.gravity-theme .gform_footer input[type=submit] {
    background-color: #E00000 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    height: 40px !important; 
    padding: 0 25px !important;
    border: none !important;
    border-radius: 0px !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
}

/* Die Klasse für deine Icons */
.hover-box-change {
    background-color: #ff0000; /* Start: Hintergrund Rot */
    color: #ffffff;            /* Start: Icon Weiß */
    border: none;              /* Entfernt eventuelle Standard-Rahmen */
    transition: all 0.4s ease; /* Macht alles weich */
    padding: 20px;             /* Gibt dem Icon Platz zum Atmen */
    display: inline-flex;
    border-radius: 4px;        /* Optional: Leicht abgerundete Ecken */
}

/* Die Klasse für deine Icons */
.hover-box-change {
    background-color: #ff0000 !important; /* Hintergrund Rot */
    color: #ffffff !important;            /* Icon Weiß */
    
    /* Form & Größe */
    border-radius: 0px !important;        /* Erzwingt eckige Kanten */
    padding: 15px !important;             /* Abstand zum Rand (hier Größe anpassen!) */
    width: 60px !important;               /* Feste Breite */
    height: 60px !important;              /* Feste Höhe */
    
    /* Ausrichtung */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease-in-out !important;
}

/* Die Klasse für deine quadratischen Icons */
.hover-box-change {
    background-color: #ff0000 !important; /* Start: Rot */
    color: #ffffff !important;            /* Icon: Weiß */
    
    /* Form & Anordnung */
    display: inline-flex !important;      /* Sorgt für Ausrichtung im Quadrat */
    vertical-align: middle;               /* Verhindert das Verspringen in der Zeile */
    width: 60px !important;               /* Breite des Quadrats */
    height: 60px !important;              /* Höhe des Quadrats */
    border-radius: 0px !important;        /* Garantiert eckig */
    
    /* Zentrierung des Icons im Inneren */
    justify-content: center !important;
    align-items: center !important;
    
    transition: all 0.3s ease !important;
    margin: 5px;                          /* Kleiner Abstand zwischen den Icons */
}