:root {
    --primary-blue: #005bbb;
    --accent-yellow: #ffda00;
    --error-red: #b12a2a;
    --bg-light: #f9f9f9;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0; padding: 0; line-height: 1.6; background-color: var(--bg-light);
}

header {
    background: var(--primary-blue);
    color: #fff; padding: 1rem;
    border-bottom: 5px solid var(--accent-yellow); /* KITA Akzent */
}

main { max-width: 800px; margin: 2rem auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

fieldset { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; padding: 15px; }
legend { font-weight: bold; color: var(--primary-blue); padding: 0 10px; }

label { display: block; margin-top: 10px; font-weight: 500; }
input, textarea, select {
    width: 100%; padding: 10px; margin-top: 5px;
    border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}

/* Navigations-Links Styling */
nav a, nav a:visited {
    color: #000 !important; /* Schwarze Schrift, auch wenn besucht */
    background-color: var(--accent-yellow); /* Gelber Hintergrund für KITA-Look */
    text-decoration: none;
    padding: 8px 16px;
    margin-right: 10px;
    border: 2px solid #000; /* Schwarze Umrandung */
    border-radius: 6px;
    font-weight: bold;
    font-size: 1.1rem; /* Ein wenig größer */
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

/* Hover-Effekt (beim Drüberfahren) */
nav a:hover {
    background-color: #fff; /* Wechselt zu Weiß */
    color: var(--primary-blue) !important; /* Schrift wird Blau */
    box-shadow: 2px 2px 0px #000; /* Kleiner Schatten-Effekt */
}

/* Aktiv-Effekt (beim Klicken) */
nav a:active {
    transform: translateY(2px); /* Drückt den Button optisch nach unten */
}


/* Fehler-Stil */
.is-invalid { border: 2px solid var(--error-red) !important; background-color: #fdecea; }
.error-text { color: var(--error-red); font-size: 0.85rem; margin-top: 4px; display: block; }

.btn {
    background: var(--primary-blue); color: white; border: none;
    padding: 12px 24px; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%;
}
.btn:hover { background: #004a99; border-bottom: 3px solid var(--accent-yellow); }

.hidden-section { display: none; margin-top: 10px; padding-left: 20px; border-left: 3px solid var(--accent-yellow); }