.hero-image {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    /* 16:9 erzwingen */
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bild füllt 16:9 aus */
    object-position: center;
}

/* --------------------------------------------------
   BASISSTIL
-------------------------------------------------- */
.bellevue-box {
    border: 3px solid #3E7754 !important;
    border-radius: 15px;
    padding: 20px;
    transition: 0.25s ease;
}

/* --------------------------------------------------
   LIGHT MODE (ASTROID)
-------------------------------------------------- */
body[data-bs-theme="light"] .bellevue-box {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body[data-bs-theme="light"] .bellevue-box h4 {
    color: #3E7754 !important;
}

/* --------------------------------------------------
   DARK MODE (ASTROID)
-------------------------------------------------- */
body[data-bs-theme="dark"] .bellevue-box {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

body[data-bs-theme="dark"] .bellevue-box h4 {
    color: #a8d5b9 !important;
}

/* --------------------------------------------------
   HOVER
-------------------------------------------------- */
.bellevue-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(62, 119, 84, 0.35) !important;
}
/* --------------------------------------------------
   DARK MODE – Bellevue-Box komplett
-------------------------------------------------- */
html[data-bs-theme="dark"] .bellevue-box {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* Alle Textelemente innerhalb der Box auf Weiß setzen */
html[data-bs-theme="dark"] .bellevue-box h1,
html[data-bs-theme="dark"] .bellevue-box h2,
html[data-bs-theme="dark"] .bellevue-box h3,
html[data-bs-theme="dark"] .bellevue-box h4,
html[data-bs-theme="dark"] .bellevue-box p,
html[data-bs-theme="dark"] .bellevue-box li,
html[data-bs-theme="dark"] .bellevue-box a,
html[data-bs-theme="dark"] .bellevue-box strong,
html[data-bs-theme="dark"] .bellevue-box span {
    color: #ffffff !important;
}

/* Überschrift grünlich */
html[data-bs-theme="dark"] .bellevue-box h4 {
    color: #a8d5b9 !important;
}

/* Optional: Hover-Farbe für Links */
html[data-bs-theme="dark"] .bellevue-box a:hover {
    color: #a8d5b9 !important;
}

/* Google Maps Container */
.map-container {
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: 300px;
}

.map-container iframe {
    border: 0;
    width: 100%;
    height: 100%;
}