/* Custom CSS - Maritimer eleganter Look passend zum Screenshot */

body {
    /* Ein feiner Cremeton, der den Screenshot-Hintergrund leicht wärmer wirken lässt und nicht hart-weiß ist */
    background-color: #f6f5f3; 
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding-top: 60px; /* Platz für die getackte, fixe Navigation */
}

/* Maritime Farben */
.text-primary {
    color: #004d7f !important; /* Maritimes Dunkelblau für Schriften (wie im Screenshot) */
}

.text-decoration-underline {
    /* Minimalistisches Unterstreichen für das aktive Menü */
    text-underline-offset: 6px;
    text-decoration-thickness: 2px !important;
    text-decoration-color: #004d7f;
}

/* Hover-Effekte Navigation weicher gestalten */
.navbar-nav .nav-link {
    color: #004d7f !important;
    transition: color 0.35s ease-out, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.35s ease-out;
    opacity: 0.85;
}

.navbar-nav .nav-link:hover {
    color: #007bff !important; /* Leicht helleres Blau beim Hover */
    transform: translateY(-2px);
    opacity: 1;
}

/* Weiche Hover-Animation auch für das Logo */
.navbar-brand img {
    transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
}

.navbar-brand:hover img {
    transform: scale(1.03);
    filter: brightness(1.15);
}

/* Offcanvas Fixierung, da die Hero-Header Sektion eine Ebene hat */
.offcanvas {
    z-index: 1060;
}

.navbar {
    z-index: 1050;
    transition: background-color 0.3s ease-in-out;
    /* Ein leichter Glow/Schatten um das Menü abzuheben */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Vollflächiger Hero-Header Container für das "Verein" Bild */
.hero-header {
    width: 100%;
    /* Etwas weniger als eine komplett volle Höhe. Passt perfekt zur Architektur */
    height: 40vh; 
    min-height: 350px;
    background-size: cover;
    background-position: center 50%; /* Setzt den Fokus exakt in die Mitte (Rostock Skyline) */
    background-repeat: no-repeat;
    margin-top: -60px; /* Zieht Header unter die Navbar (Navbar Höhe ist ca 60px) */
    position: relative;
    z-index: 1; /* Unter der Navbar (1050) */
}

/* Wrapper unter dem Header */
.content-wrapper {
    position: relative;
    z-index: 2;
    background-color: transparent;
}

/* Google Translate Widget Override */
.goog-te-banner-frame { display: none !important; }
.skiptranslate { display: none !important; }
body { top: 0px !important; }
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }