/* --- CUSTOM SVG BACKGROUND --- */
.site-background {
    background-image: url('/images/background.svg');

    /* FIX 1: Verhindert, dass das Bild mehrfach angezeigt wird */
    background-repeat: no-repeat;

    /* FIX 2: Skaliert das Bild so, dass es den gesamten Viewport ausfüllt, 
              wobei das Seitenverhältnis beibehalten und das Bild zugeschnitten wird. */
    background-size: cover;

    /* Stellt sicher, dass das Bild zentriert wird */
    background-position: center center;

    background-attachment: fixed;
    background-color: #E9EEF0;
}

/* Hier sind alle Infos zu den Gradient Buttons */

.btn-85 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse farthest-corner at right bottom, #b69812 0%, #b07d17 8%, #9f761e 30%, #a27919 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffea8b 8%, #D1B464 25%, #bca05d 62.5%, #5d4a1f 100%);
    color: #0B0B45;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.3s, transform 0.3s;
    user-select: none;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    overflow: hidden;
    /*** full width block ***/
    /* width: 100%; */
}

.btn-85:hover {
    /* 1. Stärkerer Schatten, um den Button "herauszuheben" */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    /* 2. Subtiler 3D-Effekt: Bewegt den Button ganz leicht nach oben */
    transform: translateY(-2px);
}

.btn-85:active {
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn-85:disabled {
    pointer-events: none;
    opacity: .65;
    color: #7e7e7e;
    background: #dcdcdc;
    box-shadow: none;
}

/* --- METALLIC GOLD HEADINGS FIX --- */
.text-gold-gradient {
    /* Fallback Farbe, falls Gradients nicht unterstützt werden */
    color: rgb(218, 165, 32);

    /* Der komplexe Gradient für den Gold-Effekt (Webkit-Präfixe) */
    background: radial-gradient(ellipse farthest-corner at right bottom, #b69812 0%, #b07d17 8%, #9f761e 30%, #a27919 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffea8b 8%, #D1B464 25%, #bca05d 62.5%, #5d4a1f 100%);

    /* Anwendung des Gradienten auf den Text und Entfernen der Füllfarbe */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Zusätzliche Optimierung für Firefox und andere Browser (optional) */
    background: -o-linear-gradient(transparent, transparent);
    background-clip: text;
    text-fill-color: transparent;
}

/* Spezial-Klasse für Text-Schatten */
.with-shadow {
    text-shadow: 0px 0px 20px rgba(212, 175, 55, .5);
}



/* Erweitert den Gold-Gradienten-Stil, um SVG-Füllungen zu unterstützen */
.text-gold-metallic svg path {
    /* WICHTIG: Setzt die Füllung auf den Akzentton, um den Gradienten zu imitieren */
    fill: #D1B464 !important;
    /* Sie können hier auch eine URL zu einem echten Gradienten einfügen, wenn er in der SVG definiert ist: 
       fill: url(#Ihre-Gradienten-ID); 
    */
}

/* Der sicherste Weg (wie zuvor besprochen): CSS Filter */
.text-gold-filter-fill {
    /* Erzeugt einen Schatten-Trick, um eine weiße Grafik gold zu färben */
    filter: drop-shadow(0 0 0 #D1B464)
    sepia(100%)
    saturate(200%)
    brightness(100%);
}


/* Gold Rand Button beim Hovern komplett ausgefüllt:*/

.border-2.border-accent:hover {

    
    /* Stellt sicher, dass die Basis-Hintergrundfarbe (weiß) überschrieben wird */
    background: radial-gradient(ellipse farthest-corner at right bottom, #b69812 0%, #b07d17 8%, #9f761e 30%, #a27919 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffea8b 8%, #D1B464 25%, #bca05d 62.5%, #5d4a1f 100%);
    color: #0B0B45; /* Navy Blue Textfarbe */

    /* Anwendung des Schatten-Effekts */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}



/* Switch Button Eigenschaften*/


/* --- CUSTOM CHECKBOX SWITCH (ANGEPASST AN CI) --- */

.switch-button-wrapper {
    /* Zentriert den Switch unter der Hero-Sektion */
    margin: -32px auto 0 auto;
    position: relative;
    z-index: 10;
    width: 320px; /* Breite des gesamten Schalters */
    max-width: 90%;

    /* Fügt den weißen Hintergrund und Schatten hinzu, um den Switch abzuheben */
    background: #FFF;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.switch-button {
    background: #CDD2D4; /* Hintergrundfarbe des Trackers (Ihr page-bg) */
    border-radius: 30px;
    overflow: hidden;
    width: 100%;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #08082F; /* Navy Blue Textfarbe (primary) */
    position: relative;
    /* Passt das Padding an, um Platz für beide Label-Hälften zu schaffen */
    padding-right: 50%;
}

/* Der Text für den rechten Zustand (Kapitalanleger) */
.switch-button:before {
    content: "Für Eigennutzer";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%; /* Die Hälfte der Breite */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    color: #08082F; /* Textfarbe (Navy) */
}

.switch-button-checkbox {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}

/* Wenn die Checkbox NICHT gechecked ist (Standard: Kapitalanleger) */
.switch-button-checkbox:not(:checked) + .switch-button-label {
    color: #FFF; /* Textfarbe des aktiven Feldes auf Weiß (für den Gold-Slider) */
}
/* Wenn die Checkbox GECHECKED ist (Wechsel zu: Eigennutzer) */
.switch-button-checkbox:checked + .switch-button-label .switch-button-label-span {
    color: #FFF; /* Textfarbe des aktiven Feldes auf Weiß */
}


/* Der Slider (Der Gold-Gradient, der sich bewegt) */
.switch-button-label {
    position: relative;
    padding: 10px 0; /* Padding für die Höhe anpassen */
    display: block;
    user-select: none;
    pointer-events: none;
}

/* Der Gold-Slider selbst */
.switch-button-label:before {
    content: "";
    /* Der Gold-Gradient wird als Hintergrund des Sliders verwendet */
    background: linear-gradient(to right, #D1B464, #A27919); /* Vereinfachter Gold-Gradient */
    height: 100%;
    width: 50%; /* Die Hälfte der Breite */
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 30px;
    transform: translateX(0);
    transition: transform 300ms;
    z-index: 1; /* Muss unter den Texten liegen */
}

/* Wenn die Checkbox GECHECKED ist, bewegt sich der Slider um 100% nach rechts */
.switch-button-checkbox:checked + .switch-button-label:before {
    transform: translateX(100%);
}


/* Text für den linken Zustand (Kapitalanleger) */
.switch-button-label-span {
    position: relative;
    z-index: 3;
    width: 50%;
    display: inline-block;
    color: #08082F; /* Navy Blue */
}

/* Versteckt den Play-Button auf iOS */
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Verhindert zusätzliche UI-Elemente auf mobilen Browsern */
video::-webkit-media-controls {
    display: none !important;
}