/* Grundlegende Styling-Regeln */
body, html {
    margin: 0;
    padding: 0;
    background-color: #e1f1f6;
	background-image: url("HG_1.svg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
    font-family: Arial, sans-serif;
    padding-top: 50px; /* Abstand oben für den Header */
}

.text{
	background-color: rgba(0,62,96,0.1);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 100px auto;
    max-width: 900px; 
    width: 100%; 
}

/* Overlay */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Pop-up Fenster */
#popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}


h1{
	color:#003e60;
}

/* Fixierter Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 76px; /* Höhe angepasst, um das größere Logo zu berücksichtigen */
    background-color: #003e60;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 999; /* Stellt sicher, dass der Header immer oben ist */
    overflow: hidden;
}

.logo {
    position: fixed;
    left: 50px;
	top:0px;
	 z-index: 1000;
}

.header h1 {
    color: #fff;
    font-size: 24px;
    margin-left: 400px; /* Platz für das Logo links im Header */
}

/* Stil für den Inhaltsbereich */
.content {
    margin-top: 20px; /* Abstand zum Header, um Überlappung zu vermeiden */
    padding: 20px;
}

.form-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Erlaubt den Formularen, in der mobilen Ansicht untereinander zu fließen */
    margin: 20px 0; /* Fügt einen vertikalen Abstand zwischen dem Header und den Formularen hinzu */
}

/* Stil-Anpassungen für Formulare innerhalb des Containers */
.form-container form {
    flex: 1; /* Erlaubt den Formularen, den verfügbaren Platz auszunutzen */
    min-width: 300px; /* Setzt eine minimale Breite für die Formulare */
    margin: 10px; /* Fügt einen Abstand zwischen den Formularen hinzu */
}


/* Formulare und Buttons */
form {
    background-color: rgba(0,62,96,0.1);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px auto; /* Zentriert das Formular */
    max-width: 600px; /* Optimale Breite für Desktop */
    width: 100%; /* Ermöglicht das Skalieren der Formulare */
}

form input[type=text], form input[type=email], form button {
    width: 100%; /* Ermöglicht das Skalieren der Eingabefelder */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

form button {
    background-color: #0089ad;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #76b82a;
}

input[readonly] {
    background-color: #f0f0f0; /* Grauer Hintergrund */
    cursor: not-allowed; /* Cursor ändert sich, um Nicht-Interaktivität anzudeuten */
}

/* Optional: Wenn du möchtest, dass der Hintergrund noch ausgeprägter ist, wenn man mit der Maus darüber fährt */
input[readonly]:hover {
    background-color: #e0e0e0;
}


/* Überschriften und Text */
h2 {
    color: #003e60;
}

/* Zusätzliche Anpassungen für bessere Lesbarkeit */
label {
    display: block;
    margin-bottom: 5px;
}

/* Versteckte Elemente */
.hidden {
    display: none;
}

/* Versteckt die Standard-Checkbox, lässt sie aber für Screenreader zugänglich */
input[type="checkbox"] {
    display: none;
}

/* Container für die angepasste Checkbox */
.checkbox-container {
    display: inline-block;
    position: relative;
	color: #0089ad;
}

/* Das angepasste Design der Checkbox */
.checkbox-container .custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Macht die Checkbox rund */
    border: 2px solid #0089ad; /* Rahmenfarbe */
    display: inline-block;
    position: relative;
    cursor: pointer;
}

/* Stil für den Haken, der bei Markierung angezeigt wird */
.checkbox-container input[type="checkbox"]:checked + .custom-checkbox::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0089ad;
    font-size: 14px;
}


/* Anpassungen für mobile Geräte */
@media (max-width: 768px) {
    .header {
        height: 100px;
    }

    .header h1 {
        font-size: 20px;
        margin-left: 120px;
    }
	
	.form-container {
        flex-direction: column; /* Stapelt die Formulare in der mobilen Ansicht */
    }

    form {
        max-width: 100%;
    }
	
	.text{
		margin-top: 100px;
	}
}

.begleitungEintrag {
    margin-left: 20px;
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.begleitungEintrag button {
    background-color: #fdc300; /* Dunkelgrau */
	width: 120px;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto; /* Sorgt dafür, dass der Button ganz rechts ist */
}

.begleitungEintrag button:hover {
    background-color: #5fc4e1; /* Etwas helleres Grau für den Hover-Effekt */
}

.neueBegleitung {
    display: flex;
    align-items: center;
    gap: 10px; /* Fügt einen kleinen Abstand zwischen den Feldern hinzu */
}

.neueBegleitung input {
    flex-grow: 1; /* Lässt die Eingabefelder den verfügbaren Raum ausnutzen */
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.form-row select, .form-row input {
    flex: 1;
    margin-right: 10px; /* Fügt einen kleinen rechten Rand hinzu, außer beim letzten Element */
}

.form-row input:last-child {
    margin-right: 0;
}

/* Stil für den Container der festen Links */
.fixed-links {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1001; /* Stellt sicher, dass die Links über anderen Inhalten angezeigt werden */
}

.fixed-links a {
    color: #0089ad; /* Farbe der Links */
    text-decoration: none;
    margin-right: 15px;
}

.fixed-links a:hover {
    text-decoration: underline;
}

.left{
	padding-left: 5px;
}