/* Modernes, responsives Design */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    display: flex;
    justify-content: center;
/*    align-items: flex-start; */
/*    padding-top: 50px;
    padding: 20px; /* Padding statt padding-top für bessere Mobilansicht */
    min-height: 60vh; */
/*    padding-top: 100px !important; */ /* WICHTIG: Platz für den Header schaffen */ 
    min-height: 100vh;
    padding: 0; /* Reset */
}

header {
    position: fixed;
    top: 0;
    /* Zentrierung des Headers */
    left: 50%;
    transform: translateX(-50%); 
    /* Breite exakt wie .form-card */
    width: 95%;
    max-width: 600px;
    background-color: #ffffff;
    border-bottom: 2px solid #abadb3;
    padding: 0;
    z-index: 1000;
    text-align: center;
}

.form-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 600px; /* Erhöht für bessere Lesbarkeit der Fieldsets */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    box-sizing: border-box; /* damit Padding die Felder nicht über den Rand der Karte drueckt */

    /* Exakt nach Header mit der Card beginnen */
    margin-top: 98px; /* Dieser Abstand muss größer sein als die Header-Höhe */
    margin-bottom: 20px;
}

.message-card {
    background-color: #ffffff;
    width: 90%;
    max-width: 400px;
    padding: 40px 20px; */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
/*    box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
    text-align: center;

    /* Exakt nach Header mit der Card beginnen */
    margin-top: 98px; /* Dieser Abstand muss größer sein als die Header-Höhe */
    margin-bottom: 20px;
}

h1, h2, h3 {
    margin-top: 0;
    color: #333;
    text-align: center;
    margin-top: 2px;    /* Wenig Platz nach oben */
    margin-bottom: 3px; /* Wenig Platz nach unten */
    line-height: 1.1;   /* Engerer Zeilenabstand innerhalb der Überschrift */
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }

/* Fieldset Styling */
fieldset {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 25px;
    padding: 20px;
}

legend {
    font-weight: bold;
    color: #007bff;
    padding: 0 10px;
}

label {
    display: block;
    margin: 10px 0 5px 0; /* Mehr Abstand über dem Label */
    font-weight: 600;
    color: #555;
}

/* Einheitliches Design für alle Eingabefelder */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    scroll-margin-top: 128px; /* Höhe deines Headers + kleiner Puffer */
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #abadb3;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333;
    font-family: inherit;
}

/* Spezifischer Stil für Pflichtfelder */
input:required, 
select:required, 
textarea:required {
    border: 1px solid #903c39; /* Dunkelrot */
}

/* Fokus-Effekt für bessere UX */
input:focus, select:focus, textarea:focus {
/*    border-color: #007bff;
    outline: none;
    border: 2px soild #007bff;
    background-color: #fff; */
    outline: none; /* Entfernt den Standard-Browser-Rahmen */
    border: 2px solid #007bff; /* 2px Breite */
    background-color: #fff;
    box-shadow: 0 0 5px rgba(144, 60, 57, 0.2); /* Optional: Ein dezenter Leuchteffekt */
}

/* Speziell für den Datums-Container (Stellplatz) */
#datum_container {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px dashed #ccc;
}

.captcha-wrapper {
    display: flex;
    justify-content: space-between; /* Schiebt Inhalt nach links und rechts */
    align-items: flex-start;        /* Richtet den Link oben am Captcha aus */
    gap: 15px;
    margin-bottom: 20px;
}

.captcha-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-link {
    font-size: 11px;
    color: #666;
    text-decoration: none;
    text-align: right;
    max-width: 180px;               /* Umbruch für bessere Optik */
    line-height: 1.3;
    margin-top: 5px;                /* Kleiner Abstand nach oben zum Label */
}

.info-link:hover {
    text-decoration: none;
}

/* Captcha Styling */
.captcha-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

canvas {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Buttons */
.refresh-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px; /* */
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    text-align: center; /* */
    display: block; /* */
    text-decoration: none; /* */
    box-sizing: border-box; /* */
}

.btn-cancel {
    background-color: #6c757d;
    margin-top: 10px;
}

.btn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 10px; 
}

.btn-grey {
    background: #666000;
}
        
.refresh-btn, .submit-btn, .btn-cancel, .btn:hover, .btn-grey {
    background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
}

/* Icons */
.icon-ok {
    font-size: 50px;
    color: #28a745;
    margin-bottom: 10px;
}

.icon-error {
    font-size: 40px;
    color: #28a745;
    margin-bottom: 10px;
}

/* Fehler-Details */
.err-box {
    text-align: left;
    background: #f8f9fa;
    border-left: 4px solid #dc3545;
    padding: 10px;
    margin: 15px 0;
    font-size: 14px;
    color: #333;
}
        
/* Standard: Mobil-Link ist versteckt */
.mobile-only {
    display: none;
}

/* Desktop-Link Styling */
.desktop-only {
    display: block;
    text-align: right;
    max-width: 180px;
    font-size: 11px;
}

@media (max-width: 480px) {
    .form-card { padding: 20px; }
    input, select, textarea { font-size: 14px; }
    .captcha-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .info-link {
        text-align: left;      /* Text am Handy linksbündig lesen ist einfacher */
        max-width: 100%;       /* Nutzt die volle Breite */
        margin-top: 10px;      /* Abstand zum Eingabefeld darüber */
    }
    /* Desktop-Link ausblenden */
    .desktop-only {
        display: none;
    }
    /* Mobil-Link einblenden */
    .mobile-only {
        display: block;
        text-align: center;
        margin-top: 20px;    /* Genug Platz zum Button */
        margin-bottom: 5px; /* Abstand zum unteren Rand der Karte */
        padding: 0 5px;     /* Verhindert Anstoßen an den Rand */
        font-size: 12px;
        color: #777;
        text-decoration: none;
    }
    .mobile-only:hover {
        color: #777; /* Bleibt gleich */
        text-decoration: none;
    }

}