/* Standard: Footer in 3 Zeilen untereinander */
:root {
    --farbe1: #4a9aa6; /* Definiert die Hauptfarbe als Variable */
    --farbe2: #272727; /* Definiert die Hauptfarbe als Variable */
    --farbe3: #ffffff; /* Definiert die Hauptfarbe als Variable */
    --body-color-farbe: #333333;
    --h-color-farbe: #4a9aa6;
    --header-background-farbe: #fff;
    --header-color-farbe: #fff;
    --body-background-farbe: #f8f8f8;
    --footer-background-farbe: #4a9aa6;
    --footer-color-farbe: #ffffff;
    --footer-link-color-farbe: #f8f8f8;
    --footer-link-color-hover-farbe: #333333;
}
body {
    font-size: 14pt;
    color: var(--body-color-farbe);
    font-family: arial, helvetica, sans-serif !important;
    background-color: var(--body-background-farbe);
}
img.logo-daniels {
    max-width: 100%;
    margin: 20px;
}
header#header{
    background-color: var(--header-background-farbe);
    border-bottom: solid 1px var(--farbe1);
}
h1{
    margin-top: 0;
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 30px;
    border: 0;
        color: var(--farbe1);

}
h2{
    margin-top: 0;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px;
    border: 0;
        color: var(--farbe2);

}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--farbe1);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(74, 154, 166, .25);
}

 button#anmelden {
        background-color: var(--farbe1); /* Farbe 1 */
        color: var(--farbe3); /* Farbe 3 */
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    button#anmelden:hover {
        background-color: var(--farbe2);
    }
    
    .form-check-input:checked {
    background-color: var(--farbe1);
    border-color: var(--farbe2);
}
#footer .row {
    display: flex;
    flex-direction: column;
    text-align: center;
}

  p.footer-link a {
       padding-right: 5px;
   }
   
   a.link-in-formular {
       color: var(--farbe1);
       text-decoration: none;
}
/* Ab 1200px (größere Bildschirme) - Standard bleibt Spaltenanordnung */
@media (min-width: 1200px) {
    #footer .row {
        flex-direction: row; /* Spalten nebeneinander */
        justify-content: space-between; /* Gleichmäßige Verteilung */
        text-align: left;
    }

    .footer-col {
        flex: 1; /* Alle Spalten gleich groß */
    }
}

/* Bis 1199px - Verteilung: 40% - 40% - 30% */

    #footer .row {
        flex-direction: row; /* Spalten bleiben nebeneinander */
        flex-wrap: wrap; /* Falls es zu eng wird, Zeilenumbruch erlauben */
        justify-content: center; /* Zentrierte Anordnung */
    }

    #footer-col-1 {
        flex: 0 0 40%; /* 40% Breite */
    }
    
    #footer-col-2 {
        flex: 0 0 35%; /* 40% Breite */
    }

    #footer-col-3 {
        flex: 0 0 25%; /* 30% Breite */
    }

/* Unter 768px (Mobile) - wieder in Spalten */
@media (max-width: 768px) {
    #footer .row {
        flex-direction: column;
        text-align: center;
    }

    .footer-col {
        flex: 1; /* Spalten wieder untereinander */
        width: 100%;
    }
    img.logo-rundholz {
  
    max-width: 300px;
    }
}
#teilnahme-ja {
    display: flex;
    flex-wrap: wrap; /* Elemente umbrechen, falls nötig */
    align-items: center;
    gap: 5px;
}

#teilnahme-ja span {
    display: flex;
    align-items: center;
}
/* Keine rote Markierung beim Laden der Seite */
.form-control:invalid,
.form-select:invalid {

}
div#validation-messages ul{
    margin-bottom: 0;
}
/* Erst nach Absenden des Formulars erscheinen die roten Ränder */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: #dc3545 !important;
    background-image: none !important;
}

/* Ab einer Bildschirmbreite von 576px (Bootstrap Breakpoint für Mobilgeräte) */
@media (max-width: 576px) {
    body {
    font-size: 16px;
}
    h1{
        font-size: 30px;
    }
    h2 {
            font-size: 23px;
    }
    #teilnahme-ja {
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: flex-start;
    }

    #teilnahme-ja span {
        width: 100%;
    }

    #teilnahme-ja select {
        margin-left: 0;
    }
}
.row.tenne-checkbox {
    margin-bottom: 10px;
}
#kopie-check ,
#datenschutz-check {
   display: inline;
}

#kopie-check  .form-check-input ,
#datenschutz-check .form-check-input {
        float: none;
    margin-left: -1.5em;
    margin-right: 0.3em;
}

#kopie-check .form-check-label ,
#datenschutz-check .form-check-label {
   display: inline;
    
}
.row-anmelden {
    padding-top: 30px;
}
footer#footer p{
    margin-bottom: 0;
        font-size: 14px;
}

footer#footer p a{
    color:  var(--farbe3);
        text-decoration: none;
}

div#footer-col-2 {
    text-align: center;
}
div#footer-col-3 {
    text-align: right;
}

/* Ab 1199px: Footer über die gesamte Breite in einer Zeile */
@media (max-width: 1199px) {
    
        #footer-col-1 {
        flex: 0 0 100%; /* 100% Breite */
    }
    
    #footer-col-2 {
        flex: 0 0 100%; /* 100% Breite */
    }

    #footer-col-3 {
        flex: 0 0 100%; /* 100% Breite */
    }
    
   p.footer-link a {
       padding-right: 5px;
   }
   
    div#footer-col-2 ,
    div#footer-col-3 {
        margin-top: 10px;
        align-items: center;

    }
    
    footer#footer p {
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
}


    .footer-col {
        flex: 1;
        text-align: center;
    }
}