/* Standard-Schriftart für die gesamte Seite */
.container {
	font-family: 'National Park';
	height: 100%;
	margin: 0;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
    background: linear-gradient(#003b89 0%, #030c33 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	color: white; 
}


/* Standardzustand: Keine Unschärfe oder Verdunklung */
#main_container {
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Unschärfe + Abdunklung nur für den Hauptcontainer, wenn Modal aktiv ist */
#main_container.modal-blur {
    filter: blur(10px);
}

#main_container.modal-blur {
    filter: blur(10px);
}



/* Bootstrap Badges im Neon-Style */
.badge {
    background-color: #073651;
    color: #1fadff;
    border: 1px solid #1fadff;
    box-shadow: 0 0 5px #1fadff;
    text-transform: uppercase;
}

.badge-danger {
    background-color: #440000;
    color: #ff4444;
    border: 1px solid #ff4444;
    box-shadow: 0 0 5px #ff4444;
}

/* Bootstrap Grid (Row/Col) mit dunklerem Look */
.row, .col {
	font-family: 'National Park';
    background-color: #000;
    color: #ffffff;
    border: 1px solid #1fadff;
    padding: 10px;
}

/* Hyperlinks im Terminal-Style */
a {
    color: #1fadff;
    text-decoration: none;
}

a:hover {
    text-shadow: 0 0 10px #1fadff;
}


/* Debugging (nur zum Testen) */
.debug-border {
    border: 2px dashed #1fadff;
}

.modal-backdrop {
    background-color: rgba(0, 50, 100, 0.5) !important; /* Blau-Schwarz */
}

.modal-content {
    background-color: #000; /* Schwarzer Hintergrund */
    color: #ffffff !important; 
	font-family: 'National Park';
    border: 2px solid #1fadff; /* Neon-Cyan-Rand */
    box-shadow: 0 0 10px #1fadff;
}

.modal-header {
    background-color: #001133; /* Dunkelblau */
    color: #88AAFF;
    border-bottom: 2px solid #1fadff;
}

.modal-title {
    text-shadow: 0 0 6px #1fadff;
}

.modal-body {
    background-color: #000;
    color: #ffffff;
    padding: 20px;
    font-size: 1.1em;
    line-height: 1.4;
}

.modal-footer {
    background-color: #001133;
    border-top: 2px solid #1fadff;
}

/* Buttons im Terminal-Style */
.modal-footer .btn {
	color: #eeeeee; /* Schriftfarbe */
	border: 2px solid #9bdcff; /* Rand */
	background-color: #003b89; /* Durchsichtiger Hintergrund */
	transition: all 0.3s ease-in-out;
}

.modal-footer .btn:hover {
    background-color: #0d557f;
    color: #fff;
    box-shadow: 0 0 15px #1fadff;
}

/* Schließen-Button (X) */
.modal-header .btn-close {
    filter: invert(100%);
}



/*----------------------------------------------------------------------------------------------------*/
/* Standard-Schrift für Eingabefelder */
.input-group, .form-control, .input-group-text, .form-floating label {
	font-family: 'National Park';
    color: #1fadff;
}

/* Input-Container Hintergrund & Border */
.input-group {
    background-color: #062969;
    border: 2px solid #1fadff;
    box-shadow: 0 0 5px #1fadff;
}

/* Input-Feld */
.form-control {
    background-color: #062969;
    color: #ffffff !important;
    border: 1px solid #1fadff;
    box-shadow: 0 0 5px #1fadff;
    transition: all 0.3s ease-in-out;
}

/* Platzhalter-Text (vor dem Fokus) */
.form-control::placeholder {
    color: #1fadff;
}


/* Input-Feld, wenn aktiv */
.form-control:focus {
    color: #ffffff  !important;
    background-color: #03123b;
    border-color: #a1ddff;
    box-shadow: 0 0 10px #a1ddff;
}

/* Label-Text (bei Floating Inputs) */
.form-floating label {
    color: #1fadff;
    background-color: transparent;
}

/* Label, wenn das Feld fokussiert ist */
.form-floating .form-control:focus ~ label {
    color: #ffffff;
    text-shadow: 0 0 5px #1fadff;
}

.form-select {
    background-color: #062969;
    color: #ffffff;
    border: 1px solid #1fadff;
    box-shadow: 0 0 5px #1fadff;
    transition: all 0.3s ease-in-out;
}
.form-select:focus {
    background-color: #03123b;
    border-color: #a1ddff;
    box-shadow: 0 0 10px #a1ddff;
}
.form-select:disabled {
    background-color: #083EA1;
    border-color: #a1ddff;
    box-shadow: 0 0 10px #a1ddff;
}
select.form-select {
    font-family: 'National Park'; /* übernimmt Schriftart vom Elternelement */
    font-size: 1rem; /* optional: gleiche Schriftgröße wie der Body */
    font-weight: normal; /* optional: Gewicht anpassen */
}

/* Eingabegruppen-Text (z. B. `@`) */
.input-group-text {
    background-color: #062969;
    color: #ffffff;
    border: 1px solid #a1ddff;
}

/* Sanfte Übergänge für Fokus */
.form-control, .input-group-text {
    transition: all 0.3s ease-in-out;
}

/* Spezielle Klasse für leuchtende Input-Felder */
.glowing-input {
    box-shadow: inset 0 0 10px #1fadff, 0 0 5px #1fadff;
    animation: glowingEffect 1.5s infinite alternate;
}

/* Fokus-Effekt (noch intensiver) */
.glowing-input:focus {
    box-shadow: inset 0 0 20px #1fadff, 0 0 10px #1fadff;
}

.form-floating > label::after {
    background-color: transparent !important;
}
.form-floating > label {
    color: #1fadff !important;
}
/* Animation für pulsierendes Glühen */
@keyframes glowingEffect {
    0% {
        box-shadow: inset 0 0 5px #1fadff, 0 0 5px #1fadff;
    }
    100% {
        box-shadow: inset 0 0 15px #1fadff, 0 0 10px #1fadff;
    }
}
/* Style für Bootstrap Dropdown als Input-Ersatz */
.dropdown-as-input .btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    background-color: #062969;  /* gleiche Farbe wie leeres Inputfeld */
    color: #ffffff;             /* gleiche Textfarbe wie Placeholder */
    border: 1px solid #0af;     /* wie andere Felder */
    padding-top: 1.625rem;      /* damit floating label passt */
    padding-bottom: 0.625rem;
    border-radius: 0.375rem;
}

.dropdown-as-input .btn:focus,
.dropdown-as-input .btn.show {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
}

.dropdown-as-input .dropdown-toggle::after {
    position: absolute;
    right: 1rem;
    top: 1.5rem;
}
/* Zustand: ein echter Wert wurde ausgewählt */
.dropdown-as-input .btn.has-value {
    color: white; /* wie gefülltes Input-Feld */
}

label.float-up {
	transform: scale(0.66) translateY(-0.5rem) translateX(0.15rem);
	opacity: 1.0;
	pointer-events: none;
	transition: all 0.2s ease;
}