@font-face {
    font-family: 'Book1';
    src: url('/fonts/LegacySerifITCPro-Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: white;
    font-family: 'Calibri',Arial,Helvetica,sans-serif;
}

a {
    color: black;
}

a:hover {
    color: rgb(52, 52, 52);
}

.header {
    height: 48px;
    background-color: white;
}

.links {
    color: #d2d2d2;
    border-bottom: 1px solid gray;
    text-decoration: none;
}

.links:hover {
    color: #d2d2d2;
    border-bottom: 1px solid #353535;
    text-decoration: none;
}

.line {
    background-color: #f4f4f4;
    height: 2px;
}

.block1_top {
    position: relative;
    top: 573px;
    left: 294px;
    width: 821px;
    height: 201px;
    /* UI Properties */
    text-align: left;
    font: 26px/32px 'Calibri',Arial,Helvetica,sans-serif;
    letter-spacing: 0px;
    color: #353535;
    opacity: 1;
    background-color: white;
}

.bg-gray {
    background-color: rgba(244,244,244,1);
}

.bg-gray2 {
    background-color: #353535;
}

.m-ind-1 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.m-ind-2 {
    margin-top: 100px;
    margin-bottom: 20px;
}

.font-40 {
    font: 32px/43px 'Book1';
}

.font-32 {
    font: 26px/32px 'Book1';
}

.font-26 {
    font: 20px/24px 'Calibri',Arial,Helvetica,sans-serif;
}
.font-20 {
    font: 16px/19px 'Calibri',Arial,Helvetica,sans-serif;
}
.font-16 {
    font: 14x/16px 'Calibri',Arial,Helvetica,sans-serif;
}

.btn-custom {
    background-color: #A11C36 !important;
    border-color: #A11C36 !important;
    border-radius: 0 !important;
    color: white !important;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom.focus,
.btn-custom:active,
.btn-custom.active {
    background-color: #bb1a2c !important;
    border-color: #bb1a2c !important;
}

.btn-custom2 {
    background-color: #D2D854 !important;
    border-color: #D2D854 !important;
    border-radius: 0 !important;
    color: black !important;
}

.btn-custom2:hover,
.btn-custom2:focus,
.btn-custom2.focus,
.btn-custom2:active,
.btn-custom2.active {
    background-color: #949934 !important;
    border-color: #949934 !important;
}

.button-icon {
    width: 20px; /* Größe des Icons anpassen */
    height: 20px; /* Größe des Icons anpassen */
    margin-right: 8px; /* Abstand zwischen Icon und Text */
    vertical-align: middle; /* Ausrichtung des Icons in der Mitte des Texts */
}


/* Basis-Styling für alle input[type="text"] Felder */
input[type="text"],
input[type="date"],
input[type="file"],
input[type="email"] {
    background-color: transparent; /* Hintergrund transparent für den fließenden Effekt */
    border: none; /* Entferne den Standardrahmen */
    border-bottom: 1px solid black; /* Schwarze Linie unten */
    color: black; /* Textfarbe */
    font-size: 16px; /* Schriftgröße anpassen */
    padding: 0px 10px; /* Abstand innen für das Padding */
    outline: none; /* Entferne den Standard-Outline bei Fokus */
    width: 100%; /* Volle Breite des Containers */
    transition: background-color 0.3s ease-in-out; /* Übergang für Hintergrundfarbe */

    /* Safari/iOS spezifische Resets */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;  /* Verhindert abgerundete Ecken auf iOS */
    box-shadow: none;  /* Entfernt mögliche Safari Schatten */
}

/* Zusätzliche Safari/iOS spezifische Anpassungen */
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-date-and-time-value {
    background-color: transparent;
}

/* Verhindert das automatische Styling beim Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Speziell für iOS Focus-Zustände */
input[type="text"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="email"]:focus {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Platzhalter-Text spezifisch stylen */
input[type="text"]::placeholder,
input[type="date"]::placeholder,
input[type="file"]::placeholder,
input[type="email"]::placeholder {
    color: black; /* Schwarzer Platzhalter-Text */
    opacity: 0.6; /* Etwas transparenter */
}

/* Effekt beim Fokussieren */
input[type="text"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="email"]:focus {
    background-color: white; /* Weißer Hintergrund, wenn das Feld im Fokus steht */
    border-bottom: 1px solid black; /* Schwarze Linie bleibt */
}

/* Optional: Umriss bei Fokus verhindern (nur für Barrierefreiheit nicht empfohlen) */
input[type="text"]:focus-visible,
input[type="date"]:focus-visible,
input[type="file"]:focus-visible,
input[type="email"]:focus-visible {
    outline: none;
}

/* Nutzt ein Pseudo-Element für den Placeholder */
input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #999;
    margin-right: 0.5em;
}

/* Versteckt den Placeholder wenn ein Datum gewählt wurde */
input[type="date"]:focus:before,
input[type="date"]:valid:before {
    content: "" !important;
}

.form-line {
    position: relative; /* Positionierung relativ zum Container */
}
.form-line::before {
    content: ''; /* Pseudo-Element für die Linie */
    position: absolute;
    bottom: 0; /* Startet an der Unterseite des Eingabefelds */
    left: 0; /* An der linken Seite */
    width: 1px; /* Breite der Linie */
    height: 40%; /* Die Linie geht bis zur Hälfte des Eingabefelds */
    background-color: black; /* Farbe der Linie */
}

@media (max-width: 991.98px) {  /* lg breakpoint in Bootstrap ist 992px */
    .form-line-small {
        position: relative; /* Positionierung relativ zum Container */
    }
    .form-line-small::before {
        content: ''; /* Pseudo-Element für die Linie */
        position: absolute;
        bottom: 0; /* Startet an der Unterseite des Eingabefelds */
        left: 0; /* An der linken Seite */
        width: 1px; /* Breite der Linie */
        height: 40%; /* Die Linie geht bis zur Hälfte des Eingabefelds */
        background-color: black; /* Farbe der Linie */
    }
    .icon-svg {
        width: 40px;
    }
}

.img2 {
    position: relative;
    top: -30px;
    left: 0px;
    width: 424px;
    opacity: 1;
}

.img3 {
    top: -44px;
}

.img4 {
    position: absolute;
    margin-top: -30px;
    width: 424px;
    opacity: 1;
}

.bg-red {
    background: #A11C36 0% 0% no-repeat padding-box;
}

/* Radio Buttons */

/* Verstecke das ursprüngliche Radio-Input */
input[type="radio"], input[type="checkbox"] {
    display: none;
}

/* Style das Label als viereckiger Button */
.custom-radio label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
    margin-right: 15px; /* Abstand zwischen den Buttons */
}

/* Erstelle den quadratischen "Radio" */
.custom-radio label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 1px solid black;
    border-radius: 0;  /* Entferne die Rundung, um das Element viereckig zu machen */
    transition: background-color 0.3s ease;
}

/* Wenn der Radiobutton aktiv ist, markiere ihn */
input[type="radio"]:checked + label::before, input[type="checkbox"]:checked + label::before {
    background-color: black;
    border-color: black;
}

/* Setze ein inneres Quadrat, um den markierten Zustand zu simulieren */
input[type="radio"]:checked + label::after, input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: white;
}

.custom-list {
    list-style-type: none; /* Entferne die Standard-Aufzählungszeichen */
    padding-left: 0; /* Optional: entferne den Standard-Abstand */
}

.custom-list li {
    position: relative; /* Ermöglicht die Positionierung des Vierecks */
    padding-left: 20px; /* Abstand zwischen Viereck und Text */
}

.custom-list li::before {
    content: ''; /* Pseudo-Element ohne Inhalt */
    position: absolute;
    left: 0;
    top: 0.4em; /* Vertikale Ausrichtung (nach Bedarf anpassen) */
    width: 10px; /* Breite des Vierecks */
    height: 10px; /* Höhe des Vierecks */
    background-color: #A11C36; /* Farbe des Vierecks */
}

.custom-border {
    border-bottom: 2px solid rgba(244,244,244,1);
}

.custom-mt {
    margin-top: 75px;
}

.red-check {
    color: #A11C36;
    font-size: 24px;
}

@media (max-width: 575.98px) {
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .col {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.min800 {
    min-height: 800px;
}

@media (max-width: 768px) {
    .r-d-none {
        display: block !important;
    }
}

.input-with-line {
    min-height: 27px;
}

.form-line div ul li {
    color: #A11C36;
    font: 20px/24px 'Calibri',Arial,Helvetica,sans-serif;
}