.header .mod-menu > li {
  position: relative;
}

.header .mod-menu li:hover > ul {
  background-color: #fff;
  border: 1px solid #dfe3e7;  
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  padding: 16px;
}

.header .mod-menu li:hover > ul li {
  display: block;
}

/* --- Custom CSS für fmea-coach.com Header --- */

/* 1. Desktop / Laptop Layout (ab 992px Breite) */
/* Ziel: Logo links, Navigation rechts, beide vertikal zentriert */
@media screen and (min-width: 992px) {
    /* Der Haupt-Header-Container wird zum Flexbox-Container */
    .header.container-header {
        display: flex;               /* Aktiviert Flexbox */
        align-items: center;         /* Vertikale Zentrierung von Logo und Navigation */
        justify-content: space-between; /* Logo ganz links, Navigation ganz rechts */
        padding-top: 0px;           /* Optional: Oberer/Unterer Abstand im Header */
        padding-bottom: 0px;
	    padding-left: 20px;
      	padding-right: 20px;
      	background-color:rgb(0,42,102);
        /* Die bereits vorhandenen full-width und sticky-top Klassen bleiben erhalten */
    }

    /* Der Container für das Logo (das erste .grid-child im Header) */
    .header .grid-child:first-of-type {
        flex-shrink: 0;              /* Verhindert, dass das Logo schrumpft */
        margin-right: 0px;          /* Abstand zwischen Logo und Navigationsmenü */
  		width:20%;  
  }

    /* Der Container für die Navigation (das .grid-child.container-nav) */
    .header .grid-child.container-nav {
        flex-grow: 1;                /* Lässt die Navigation den gesamten verbleibenden Platz einnehmen */
        text-align: right;           /* Richtet die Navigationselemente (z.B. die Liste) nach rechts aus */
    }

    /* Sicherstellen, dass die Menüpunkte selbst auch rechts ausgerichtet sind */
    .header .grid-child.container-nav .navbar-collapse {
        justify-content: flex-end;   /* Schiebt die Menüpunkte innerhalb des Collapse-Containers nach rechts */
        display: flex !important;    /* Überschreibt display:none vom Bootstrap-Collapse auf Desktop */
    }
    
    /* Hamburger-Menü auf Desktop ausblenden */
    .header .navbar-toggler {
        display: none;
    }
}



/* 2. Mobile / Tablet Layout (bis 991.98px Breite) - bleibt unverändert */
/* Hier bleibt justify-content: space-between, da es Logo und Hamburger-Menü gut trennt */
@media screen and (max-width: 991.98px) {
    .header.container-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
      	background-color:rgb(0,42,102);
    }

    .header .grid-child:first-of-type {
        flex-shrink: 0;
      	width: 75%;
    }

    .header .grid-child.container-nav {
        flex-grow: 0;
        text-align: right;
    }

    .header .navbar-toggler {
        display: block;
    }
}

/* Ergänzung 13.09.2025 zur Steuerung der sppb-Seiten */
/* ========== Design Tokens ========== */
:root{
  --brand:#003366;
  --brand-dark:#01294f;
  --gold:#ffd700;
  --gold-dark:#daa520;
  --text:#111;
  --muted:#333;
  --border:#e5e7eb;
  --bg-soft:#f9fafb;
}

/* ========== Layout / Typo Grund ========== */
.wb-wrap{max-width:720px;margin:0 auto;padding:24px}
.wb-h{margin:0 0 6px;text-align:center;color:var(--text);font-weight:800;font-size:1.8rem}
.wb-sub{margin:0 0 18px;text-align:center;color:var(--muted)}
.wb-msg{margin-top:8px;text-align:center;color:#317873}

/* Thank-You/Infobox */
.ty-box{border:1px solid var(--border);border-radius:10px;background:var(--bg-soft);padding:16px;margin:14px 0 18px}
.ty-h2{font-size:1.2rem;color:var(--brand);margin:0 0 10px}
.ty-list{list-style:none;padding:0;margin:0}
.ty-list li{margin:6px 0;color:var(--text)}

/* CTA-Buttons */
.cta-wrap{display:flex;justify-content:center;margin-top:12px}
.cta-btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  text-decoration:none;border-radius:12px;padding:14px 22px;
  line-height:1.2;font-weight:700;border:2px solid transparent;
  box-shadow:0 2px 10px rgba(0,0,0,.06);transition:all .15s ease;
  white-space:normal;text-align:center
}
.cta-btn__label{font-size:1.05rem}
.cta-btn__icon{font-size:1.1rem}

.cta-btn--primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.cta-btn--primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.cta-btn--gold{background:var(--gold);color:#000;border-color:var(--gold)}
.cta-btn--gold:hover{background:var(--gold-dark);border-color:var(--gold-dark)}

.cta-btn:focus{outline:none}
.cta-btn:focus-visible{box-shadow:0 0 0 4px rgba(0,51,102,.25)}

@media (max-width:768px){
  .cta-btn{width:100%}
}

/* Formular-Grund (falls zentral genutzt) */
.wb-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wb-field{display:flex;flex-direction:column}
.wb-field label{font-weight:600;color:var(--text);margin-bottom:6px}
.wb-field input,.wb-field select{
  border:1px solid #ddd;border-radius:8px;padding:10px 12px;font-size:1rem;line-height:1.4;color:var(--text);background:#fff
}
.wb-field input:focus,.wb-field select:focus{
  outline:none;border-color:#317873;box-shadow:0 0 0 3px rgba(49,120,115,.12)
}
.wb-consent{grid-column:1/-1;margin-top:4px}
.wb-check{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
@media (max-width:767px){ .wb-form{grid-template-columns:1fr} }

/* Erweiterung, um den Kontakt-Menüpunkt als Button darzustellen */
.menu-cta {
    background-color: #ffcc00; /* Deine Vereinsfarbe */
    color: #000 !important;
    padding: 8px 15px !important;
    border-radius: 5px;
    font-weight: bold;
    /*transition: background 0.3s;*/
}

.menu-cta:hover {
    background-color: #e6b800;
    text-decoration: none !important;
}

/*Stand 01.02.2026
Farbschema hinzugefügt*/
/* Hintergrundfarbe des gesamten Menü-Balkens */
.container-header {
    background-color: rgb(0,42,102); /* Dein Dunkelgrau */
    background-image: none;    /* Entfernt den Standard-Verlauf */
}

/* Farbe der Menü-Links */
.navbar-light .navbar-nav .nav-link {
    color: #ffffff; /* Weißer Text */
}

/* Farbe beim Drüberfahren (Hover) */
.navbar-light .navbar-nav .nav-link:hover {
    color: #ff9900; /* Orange beim Hover */
}

/* Aktiver Menüpunkt */
.navbar-light .navbar-nav .active > .nav-link {
    color: #ff9900;
    font-weight: bold;
}