/* Allgemeine Einstellungen */


/* Stellen Sie sicher, dass alle Elemente den Roboto-Font verwenden */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #fff; /* Weißer Hintergrund für die Seite */
    color: #333; /* Dunkle Schriftfarbe */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif; /* Roboto für Überschriften */
}

p, a, span, div {
    font-family: 'Roboto', sans-serif; /* Roboto für alle Text-Elemente */
}



/* Container für den gesamten Content */
.container {
    max-width: 960px; /* Max. Breite für den Inhalt */
    margin: 0 auto;   /* Zentriert den Container */
}


/* Header - Logo zentrieren */
header .container img {
    display: block;
    margin: 0 auto;
    max-width: 133px; /* Logo-Größe verkleinern */
}

/* Header Hintergrund und Abstände */
header {
    background-color: #fff;
    padding-top: 1rem;
    padding-bottom: 1rem;
}



/* Grundstil für den Button - CTA Button Form */
.custom-btn {
    display: inline-flex;
    align-items: center;
    background-color: #B0B0B0; /* Graue Hintergrundfarbe im ungecheckten Zustand */
    color: #000; /* Textfarbe schwarz */
    padding: 1rem 3rem; /* Breitere Buttons durch mehr Padding */
    border-radius: 12px; /* Abgerundete Ecken */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
    position: relative;
    font-size: 1.25rem; /* Schriftgröße für CTA-Button */
    font-weight: bold; /* Fett */
    border: 2px solid transparent; /* Standard Rand (transparent im ungecheckten Zustand) */
    text-align: left; /* Text linksbündig ausrichten */
    width: 100%; /* Button soll die gesamte Spaltenbreite einnehmen */
    box-sizing: border-box; /* Stellt sicher, dass das Padding die Gesamtbreite nicht beeinflusst */
}

/* Text im Button */
.custom-btn-text {
    margin-right: 15px; /* Abstand zwischen Text und Kreis */
    font-size: 1.25rem; /* Gleiche Größe wie der Button-Text */
    color: #000; /* Textfarbe schwarz */
    margin-left: 0; /* Sicherstellen, dass der Text links ausgerichtet bleibt */
}

/* Der Kreis */
.checkmark {
    width: 24px; /* Größerer Kreis */
    height: 24px; /* Größerer Kreis */
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #fff; /* Weißer Kreis im ungecheckten Zustand */
    position: absolute;
    right: 10px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Verhalten, wenn die Checkbox aktiviert ist */
.custom-input:checked + .custom-btn-text {
    color: #000; /* Text bleibt schwarz im gecheckten Zustand */
}

.custom-input:checked + .custom-btn-text + .checkmark {
    background-color: #C1070E; /* Roter Kreis im gecheckten Zustand */
    border-color: #C1070E; /* Randfarbe des Kreises wird rot */
}

.custom-input:checked + .custom-btn-text + .checkmark::after {
    content: '\2713'; /* Checkmark */
    font-size: 18px; /* Größeres Häkchen */
    color: #fff; /* Weißes Häkchen im roten Kreis */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Unsichtbar machen des tatsächlichen Input-Elements (Checkbox) */
.custom-input {
    display: none;
}

/* Abstand zwischen den Buttons */
.mb-3 {
    margin-bottom: 1rem;
}



/* CTA Button - Weiter */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #C1070E; /* Roter Hintergrund */
    color: #fff; /* Textfarbe weiß */
    padding: 1rem 3rem; /* Gleiche Größe wie die Check-Buttons */
    border-radius: 12px; /* Abgerundete Ecken */
    font-size: 1.25rem; /* Schriftgröße */
    font-weight: bold; /* Fett */
    cursor: pointer;
    border: none; /* Kein Rand */
    text-align: center; /* Zentriert */
    width: 100%; /* Gleiche Breite wie die Check-Buttons */
    box-sizing: border-box; /* Stellt sicher, dass das Padding die Gesamtbreite nicht beeinflusst */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-btn:hover {
    background-color: #a10507; /* Etwas dunklerer Rotton beim Hover */
}


/* Custom Styles für die CTA-Buttons mit Icons, linksbündig */
.cta-btn-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; /* Icon und Text links ausrichten */
    background-color: #C1070E; /* Roter Hintergrund */
    color: #fff; /* Textfarbe weiß */
    padding: 1rem 3rem; /* Gleiche Größe wie die Check-Buttons */
    border-radius: 12px; /* Abgerundete Ecken */
    font-size: 1.25rem; /* Schriftgröße */
    font-weight: bold; /* Fett */
    cursor: pointer;
    border: none; /* Kein Rand */
    text-align: left; /* Text ausrichten */
    width: 100%; /* Gleiche Breite wie die Check-Buttons */
    box-sizing: border-box; /* Stellt sicher, dass das Padding die Gesamtbreite nicht beeinflusst */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-btn-with-icon i {
    margin-right: 15px; /* Vergrößerten Abstand zwischen Icon und Text */
}

.cta-btn-with-icon:hover {
    background-color: #a10507; /* Etwas dunklerer Rotton beim Hover */
}




ul.list-unstyled {
    list-style-type: none;
    padding-left: 0;
    font-size: 1rem;
    color: #333;
}

ul.list-unstyled li {
    padding: 5px 0;
}


/* Footer-Link-Stile */
.footer-link {
    text-decoration: underline; /* Unterstrichene Links */
    color: #000; /* Schwarze Textfarbe */
    font-weight: normal; /* Keine fette Schrift */
    font-size: 0.875rem; /* Schriftgröße */
    /*margin: 0 1px;*/  /* Etwas Abstand zwischen den Links */
}

.footer-link:hover {
    color: #C1070E; /* Rote Farbe beim Hover */
}

/* Sicherstellen, dass der Footer Container zentriert wird */
footer .container {
    text-align: center; /* Zentriert den Text im Footer */
}

#error-message {
    display: none;
    color: red;  /* Rote Schriftfarbe */
    text-align: center;  /* Zentriert die Fehlermeldung */
    font-weight: normal;  /* Optional: Macht die Fehlermeldung fett */
}

/* Größere Checkbox und dunklerer Rahmen */
.form-check-input {
    transform: scale(1.5); /* Skaliert die Checkbox auf 1.5x der Originalgröße */
    border-color: #333; /* Setzt die Rahmenfarbe auf ein dunkleres Grau */
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1); /* Optional: Fügt einen leichten Schatten hinzu */
}

/* Bootstrap Grid-Anpassungen für Desktop und Mobile */
@media (min-width: 768px) {
    /* In der Desktop-Ansicht sollen die Buttons untereinander angezeigt werden */
    .col-md-6 {
        width: 100%; /* Buttons sollen untereinander in einer Reihe erscheinen */
    }
}

@media (max-width: 767px) {
    /* In der Mobilansicht sollen die Buttons untereinander angezeigt werden */
    .col-12 {
        width: 100% !important; /* Volle Breite auf kleineren Geräten */
    }
}