@charset "UTF-8";
@use "sass:math";

/*------------------- 1. COLOR-------------------*/


body.bg-dark {
  background-color: #0E0E0E !important;
  --theme-color: #6701CE;
  --theme-color2: #A139FF;
}

.service-card2_icon:before {
    background: rgba(161, 57, 255, 0.4);
}

.marquee-content_wrapper .marquee .marquee-group .item {
    color: #7BD706;
}


.text-theme {
    background: linear-gradient(180deg, var(--theme-color) 0%, var(--theme-color2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-theme-green {
    background: linear-gradient(180deg, #02CE80 0%, #7BD706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.footer-wrapper {
    justify-content: center;
    align-items: center;
    text-align: center;
}

* span, * h1, * h2, * h3, * h4, * h5, * h6 {
    text-transform: none !important;
}

.box-title {
    color: #FFF; /* Ausgangsfarbe */
    transition: color 0.3s ease;
}

.box-title:hover {
    color: #6701ce; /* Hover-Farbe */
}

/* Anpassung für Input-Felder */
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-position: right 3rem center; /* Weiter nach links verschieben */
    padding-right: 3rem; /* Platz für das Symbol */
}

/* Anpassung für Select-Felder (Betreff auswählen) */
.form-select.is-invalid, .was-validated .form-select:invalid {
    border-color: #dc3545;
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E), 
                      url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E);
    background-position: right 1.5rem center, right 3rem center; /* Pfeil bleibt rechts, Symbol daneben */
    background-repeat: no-repeat;
    padding-right: 3rem; /* Platz für beide Symbole */
}

/* Anpassung für Textarea-Felder */
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    background-position: right 3rem top 1rem; /* Positionierung angepasst */
    padding-right: 2.5rem; /* Platz für das Symbol */
}

.service-card2 {
    min-height: 450px;
}

button img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.extra-spacing {
    margin-top: 40px; /* Zusätzlicher Abstand */
}