/* --- Farbvariablen definieren --- */
:root {
    --primary-green: #124018; /* Dunkelgrün */
    --accent-orange: #CB6823; /* Warmes Orange */
    --lime-green: #8CB04F;    /* Limonengrün */
    --cream-white: #F9F1E6;   /* Cremeweiß */
    --slate-gray: #3E3E3E;    /* Schiefergrau */

    /* Bootstrap Body Overrides (Light Mode) */
    --bs-body-bg: var(--cream-white);
    --bs-body-color: var(--slate-gray);
    --bs-font-sans-serif: 'Helvetica', Arial, sans-serif;
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--slate-gray);
    --bs-body-color: var(--cream-white);
    
    .text-primary-custom { color: var(--lime-green) !important; }
    .card { background-color: #4a4a4a; border-color: #555; }
    .card-text, .text-muted { color: #dcdcdc !important; }
    .text-black {color: #dcdcdc !important;}
    .text-zeitachse {color: #4a4a4a !important}
}

/* --- Allgemeine Styles --- */
body {
    font-family: var(--bs-font-sans-serif);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.text-primary-custom { color: var(--primary-green); }
.text-accent { color: var(--accent-orange); }
.bg-primary-custom { background-color: var(--primary-green); color: var(--cream-white); }

/* --- Hero Banner Container --- */
.hero-container {
    width: 100%;
    background-color: var(--cream-white);
}

.clamp-3-lines {
      display: -webkit-box !important;
      -webkit-line-clamp: 3 !important;
      line-clamp: 3 !important; /* moderner Standard, Fallback für ältere WebKit-Browser oben */
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      height: 4.5rem !important; /* Erzwingt exakt die 3 Zeilen */
      margin-bottom: 1rem !important; /* Einheitlicher Abstand zur Trennlinie */
  }

/* --- Termin-Kacheln --- */
.event-card {
    border-top: 4px solid var(--accent-orange);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- Footer --- */
.footer-custom {
    background-color: var(--primary-green);
    color: var(--cream-white);
}
.footer-custom a {
    color: var(--cream-white);
    transition: color 0.2s;
    text-decoration: none;
}
.footer-custom a:hover {
    color: var(--lime-green);
}

#darkModeToggle {
    transition: all 0.3s;
}

/* 2. "Ausgebucht"-Stempel unter den Termin verschieben und um 20% vergrößern */
    
    /* Zwingt die Info-Box in ein spaltenbasiertes Flex-Layout */
    .alert:has(.ausgebucht-stamp) {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Holt das Bild in den Textfluss und schiebt es nach unten */
    .ausgebucht-stamp {
    position: relative !important;
    order: 1 !important;
    width: 30% !important;
    margin-left: auto !important; /* Schiebt das Bild im Flex-Container ganz nach rechts */
    top: -30px !important; /* Schiebt das Bild exakt 10px nach oben */
}
/* =========================================
   MOBILE ANPASSUNGEN (nur für Bildschirme bis 767px Breite)
   ========================================= */
@media (max-width: 767.98px) {

    /* 1. Oberes Hero-Banner vergrößern und zentrieren */
    .hero-container img {
        height: 280px; /* Feste Höhe für das Handy */
        object-fit: cover; /* Zoomt das Bild heran, statt es zu stauchen */
        object-position: center; /* Fokus liegt exakt auf der Mitte (Mann, Junge, Logo) */
    }

    /* 2. "Ausgebucht"-Stempel nach unten zum Termin schieben */
    .ausgebucht-stamp {
        top: auto !important; /* Hebt die bisherige Ausrichtung oben auf */
        bottom: 15px !important; /* Setzt den Stempel an den unteren Rand */
        object-position: center !important;
        width: 200px !important; /* Macht den Stempel auf dem Handy etwas kleiner */
    }

    /* 3. Unteres Bild (Frau auf der Bank) vergrößern */
    .img-fraubank {
        height: 350px; 
        object-fit: cover;
        object-position: left center; /* Verankert den Bildausschnitt auf der linken Seite */
    }
}
/* --- Top Navigation (direkt unter dem Banner) --- */
.top-navbar {
    background-color: var(--primary-green);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.top-navbar .nav-link {
    color: var(--cream-white);
    font-weight: 600;
    padding: 15px 25px !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* Hover- und Active-Status in Warm-Orange */
.top-navbar .nav-link:hover, 
.top-navbar .nav-link.active {
    background-color: var(--accent-orange);
    color: var(--cream-white);
}

/* Optische Separierung durch Rahmen (nur auf PC/Tablets ab 768px) */
@media (min-width: 768px) {
    .nav-item-separated {
        border-right: 1px solid rgba(249, 241, 230, 0.2); /* Cremeweiß, leicht transparent */
    }
    /* Der letzte Menüpunkt braucht rechts keine Trennlinie */
    .nav-item-separated:last-child {
        border-right: none;
    }
    .top-navbar .navbar-nav {
        /* Setzt einen Rahmen ganz links vor den ersten Punkt */
        border-left: 1px solid rgba(249, 241, 230, 0.2); 
    }
}

/* Dark Mode Anpassung für das Hamburger-Menü */
[data-bs-theme="dark"] .navbar-toggler {
    background-color: var(--cream-white);
}