/* DRK Styleguide Anpassungen */
:root {
    /* Rot-Palette */
    --drk-red: rgb(230, 0, 5);          /* DRK-Rot: Buttons, Überschriften, Icons */
    --drk-red-soft: rgb(228, 100, 80);  /* Softrot: Icons */
    --drk-red-dark: rgb(165, 30, 15);   /* Dunkelrot: Hover-Effekte */

    /* Blau-Palette */
    --drk-blue-dark: rgb(0, 45, 85);    /* Dunkelblau: Menü-Icons, Pfeile, Buttons */
    --drk-blue-medium: rgb(0, 140, 205); /* Mittelblau: Hover-Effekte */
    --drk-blue: rgb(34, 117, 208);      /* Volltonblau: Fließtextverlinkungen */
    --drk-blue-light: rgb(235, 245, 255); /* Hellblau: Formulare, Menü-Hover */

    /* Grau-Palette */
    --drk-gray-dark: rgb(85, 79, 74);    /* Dunkelgrau: Fließtext */
    --drk-gray-medium: rgb(180, 180, 180); /* Mittelgrau: Trennlinien */
    --drk-gray-light: rgb(239, 238, 234); /* Hellgrau: Alternative Hintergründe */
    --drk-gray-country: rgb(217, 217, 217); /* Ländergrau: Weltkarte */
}

/* Allgemeine Anpassungen */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--drk-gray-dark);
    line-height: 1.6;
}

/* Header Anpassungen */
.drk-header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container:has(> #heroSlider) {
    margin-top: 1.0rem !important;
}

.navbar-brand img {
    max-height: 40px;
}

.nav-link {
    color: var(--drk-blue-dark) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--drk-blue-medium) !important;
}

.nav-link i {
    font-size: 1.1rem;
}

/* Hero Section */
.display-4 {
    color: var(--drk-red);
    font-weight: 700;
}

.lead {
    color: var(--drk-gray-dark);
    font-size: 1.25rem;
}

/* Card Anpassungen */
.card {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.card-title {
    color: var(--drk-red);
    font-weight: 600;
    margin-bottom: 1rem;
}

.card-text {
    color: var(--drk-gray-dark);
}

/* Button Anpassungen */
.btn-primary {
    background-color: var(--drk-red);
    border-color: var(--drk-red);
    padding: 0.8rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 160px;
}

.btn-primary:hover {
    background-color: var(--drk-red-dark);
    border-color: var(--drk-red-dark);
    transform: translateY(-2px);
}

/* Formular Anpassungen */
.form-control {
    background-color: var(--drk-blue-light);
    border: 1px solid var(--drk-gray-medium);
    border-radius: 4px;
}

.form-control:focus {
    border-color: var(--drk-red);
    box-shadow: 0 0 0 0.2rem rgba(230, 0, 5, 0.25);
}

/* Footer Anpassungen */
.drk-footer {
    background-color: var(--drk-gray-light);
    border-top: 1px solid var(--drk-gray-medium);
    padding: 3rem 0;
}

.drk-footer h5 {
    color: var(--drk-gray-dark);
    font-weight: 600;
    margin-bottom: 1rem;
}

.drk-footer p {
    color: var(--drk-gray-dark);
}

.drk-footer .social-links a {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.drk-footer .social-links a:hover {
    color: var(--drk-red) !important;
}

.drk-footer a {
    color: var(--drk-blue) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.drk-footer a:hover {
    color: var(--drk-blue-medium) !important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 30px;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .drk-footer {
        padding: 2rem 0;
    }
}

/* Utility Classes */
.text-drk-red {
    color: var(--drk-red) !important;
}

.bg-drk-red {
    background-color: var(--drk-red) !important;
}

.bg-drk-gray-light {
    background-color: var(--drk-gray-light) !important;
}

/* Form Validation Styles */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--drk-red);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23D71E1E' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linecap='round' d='M6 3.75v2.5m0 2.5h2.5'/%3e%3c/svg%3e");
}

/* Animationen */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Slider */
#heroSlider {
    margin: -1rem -15px 2rem -15px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

#heroSlider .carousel-item {
    height: 500px;
    overflow: hidden;
}

#heroSlider .carousel-item img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

#heroSlider .carousel-control-prev,
#heroSlider .carousel-control-next {
    width: 5%;
    opacity: 0.8;
}

#heroSlider .carousel-control-prev-icon,
#heroSlider .carousel-control-next-icon {
    width: 40px;
    height: 40px;
}

@media (max-width: 768px) {
    #heroSlider .carousel-item {
        height: 400px;
    }
}

/* Hauptbereich */
.main-section {
    margin-top: -8rem;
    position: relative;
    z-index: 10;
}

.main-section .card {
    border: none;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.main-section .card-title {
    color: var(--drk-red);
    font-size: 2.5rem;
    font-weight: 700;
}

.main-section .card-text {
    color: var(--drk-gray-dark);
    font-size: 1.2rem;
    line-height: 1.8;
}

.main-section .form-label {
    color: var(--drk-blue-dark);
    font-weight: 500;
    font-size: 1.1rem;
}

.main-section .form-control,
.main-section .form-select {
    background-color: white;
    border: 2px solid var(--drk-gray-medium);
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
}

.main-section .form-control:focus,
.main-section .form-select:focus {
    border-color: var(--drk-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 45, 85, 0.15);
}

.main-section .btn-primary {
    padding: 0.8rem;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Beschreibung */
.description-section {
    background-color: white;
}

.content-block {
    color: var(--drk-gray-dark);
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
}

.content-block:not(:last-child) {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--drk-gray-medium);
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .main-section .card-title {
        font-size: 2rem;
    }
    
    .main-section .card-text {
        font-size: 1.1rem;
    }
    
    .content-block {
        font-size: 1rem;
        text-align: left;
    }
    
    .main-section {
        margin-top: -4rem;
    }
}

/* So funktioniert's Seite */
.step-number {
    background-color: var(--drk-red);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Sprachauswahl Styles */
.fi {
    font-size: 1.2em;
    line-height: 1em;
    vertical-align: middle;
}

/* Größere Flagge im Hauptmenü */
#languageDropdown .fi {
    font-size: 1.4em;
}

.dropdown-item.active .fi {
    opacity: 0.8;
}

.dropdown-item {
    padding: 0.5rem 1rem;
}

.dropdown-item:hover .fi {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Aktiver Sprach-Link */
.dropdown-item.active {
    background-color: #f8f9fa;
    color: #000;
}

/* Hover-Effekt für Dropdown-Items */
.dropdown-item:hover {
    background-color: #f8f9fa;
}

/* Sprachauswahl-Button */
#languageDropdown {
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    #languageDropdown {
        padding: 0.25rem 0.5rem;
    }
}