/* OceanSphere Familienkopf fuer Sites mit eigener Unterleiste (ShipMind, oceansphere-service.com). 13.10.2026.
   Vorbild: oceansphere-maritime/static/css/familie-network-kopf.css (gleiche Klassen nw-*, gleiche Masse).
   Ergaenzt das geteilte familie-kopf.css?v=3 (Familienleiste, Kopf, nav.subnav) und familie-menu.css.
   Wird NACH beiden geladen. Enthaelt: Sprachumschalter in der Leiste, Kopf-Knoepfe, Unterleiste,
   Burger-Panel (<=899 px), Familienfuss und Resets gegen generische header/nav/footer-Regeln der Apps.
   Literale Farben (die Sites haben andere Variablennamen). Eine Kopie je Site, Inhalt gleich. */

/* ---------- gemeinsame Basis ---------- */
.fam,header.kopf,nav.subnav,footer.fuss-fam{font-family:"Inter",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.fam a:hover,.kopf a:hover,nav.subnav a:hover,footer.fuss-fam a:hover{text-decoration:none}

/* ---------- Resets gegen generische App-CSS (ShipMind style.css: header{} nav{} mit Padding/Flex/Dunkelfarben) ---------- */
header.kopf{display:block;padding:0;margin:0;gap:0;justify-content:normal;align-items:normal;background:#fff;border-bottom:1px solid #EBE6DA!important;border-bottom-color:#EBE6DA!important}
header.kopf nav.haupt{background:none;padding:0;border:0}
nav.subnav{display:block;padding:0;margin:0;gap:0;background:#FDFCFA;border-bottom:1px solid #EBE6DA}
.fam{margin:0;padding:0}

/* ---------- Familienleiste: Sprachumschalter ---------- */
.fam .r a{color:#B9CBD7;font-weight:400}
.fam .r a:hover{color:#fff}
.fam .r a.on{color:#D9B877;font-weight:700}

/* ---------- Kopf: Knoepfe (Gold = nur "Request a part") ---------- */
.kopf .btn-gold:hover{background:#A37A33;color:#2B2006}
.kopf .btn-ghost{background:#fff;color:#0E2A3B;border-color:#DDD6C6}
.kopf .btn-ghost:hover{background:#fff;color:#0E2A3B;border-color:#B88A3E}
.kopf .btn{white-space:nowrap}
.nw-burger{display:none;align-items:center;justify-content:center;width:40px;height:36px;padding:0;border:1px solid #DDD6C6;border-radius:4px;background:#fff;color:#0E2A3B;cursor:pointer}
.nw-burger:hover,.nw-burger[aria-expanded="true"]{border-color:#0E2A3B}

/* ---------- Unterleiste ---------- */
nav.subnav.nw{position:relative;z-index:30}
nav.subnav.nw .wrap{display:flex;align-items:center;gap:26px;height:44px;overflow:visible;white-space:nowrap}
nav.subnav.nw .nw-links{display:flex;align-items:center;gap:26px;height:100%}
nav.subnav.nw a{font-size:14px;color:#46545D;padding:4px 0;border-bottom:2px solid transparent;text-decoration:none;display:inline-block;font-weight:400;transition:none}
nav.subnav.nw a:hover{color:#0E2A3B}
nav.subnav.nw a.active{color:#0E2A3B;border-bottom-color:#B88A3E}

/* Konto-Gruppe rechts (Login / Abmelden / Admin) */
nav.subnav.nw .nw-konto{display:flex;align-items:center;gap:18px;margin-left:auto}
nav.subnav.nw a.nw-btn{display:inline-block;padding:6px 14px;border:1px solid transparent;border-radius:4px;font-size:13.5px;font-weight:600;line-height:1.6;text-align:center}
nav.subnav.nw a.nw-navy{background:#0E2A3B;border-color:#0E2A3B;color:#fff}
nav.subnav.nw a.nw-navy:hover{background:#16384C;color:#fff}
nav.subnav.nw a.nw-gold{background:#B88A3E;border-color:#A37A33;color:#2B2006}
nav.subnav.nw a.nw-gold:hover{background:#A37A33;color:#2B2006}
nav.subnav.nw a.nw-ghost{background:#fff;border-color:#DDD6C6;color:#0E2A3B}
nav.subnav.nw a.nw-ghost:hover{border-color:#B88A3E;color:#0E2A3B}

/* ShipMind: Admin-Aufklappmenue (<details>, ohne JS) im hellen Kleid */
nav.subnav.nw .nav-admin-dd{position:relative;display:inline-flex;align-items:center}
nav.subnav.nw .nav-admin-dd>summary{font-size:14px;color:#46545D;padding:4px 0;border-bottom:2px solid transparent;cursor:pointer}
nav.subnav.nw .nav-admin-dd>summary.active{color:#0E2A3B;border-bottom-color:#B88A3E}
nav.subnav.nw .nav-admin-menu{position:absolute;top:100%;left:0;min-width:200px;margin-top:6px;padding:6px 0;background:#fff;border:1px solid #EBE6DA;border-radius:4px;box-shadow:0 16px 36px -16px rgba(14,42,59,.4);z-index:70;display:flex;flex-direction:column}
nav.subnav.nw .nav-admin-menu a{display:block;padding:9px 16px;border:0;color:#1E2A32;border-radius:0}
nav.subnav.nw .nav-admin-menu a:hover{background:#F4F7F9;color:#0E2A3B}

/* nur im Mobil-Panel sichtbar */
.nw-cta-m,.nw-lang-m{display:none}

/* ---------- Mittlere Breiten: Geist-Knopf weicht, damit der Kopf einzeilig bleibt ---------- */
@media (max-width:1100px){.kopf .r .btn-ghost{display:none}}

/* ---------- Schmale Breiten: Unterleiste wird zum Panel hinter dem Burger ---------- */
@media (max-width:899px){
  .nw-burger{display:inline-flex}
  nav.subnav.nw{display:none;border-bottom:1px solid #EBE6DA}
  body.nw-open nav.subnav.nw{display:block}
  nav.subnav.nw .wrap{flex-direction:column;align-items:stretch;gap:0;height:auto;padding-top:4px;padding-bottom:20px;white-space:normal}
  nav.subnav.nw .nw-links{flex-direction:column;align-items:stretch;gap:0;height:auto}
  nav.subnav.nw .nw-links a{padding:12px 0;border-bottom:1px solid #EBE6DA;font-size:15px}
  nav.subnav.nw .nw-links a.active{font-weight:600;border-bottom-color:#B88A3E}
  nav.subnav.nw .nw-konto{flex-direction:column;align-items:stretch;gap:0;margin:6px 0 0}
  nav.subnav.nw .nw-konto>a:not(.nw-btn){padding:12px 0;border-bottom:1px solid #EBE6DA;font-size:15px}
  nav.subnav.nw .nw-konto>a.nw-btn{margin:10px 0 2px;padding:11px 14px;font-size:15px}
  nav.subnav.nw .nav-admin-dd{display:block}
  nav.subnav.nw .nav-admin-dd>summary{display:block;padding:12px 0;border-bottom:1px solid #EBE6DA;font-size:15px}
  nav.subnav.nw .nav-admin-menu{position:static;margin:0;padding:0;border:0;box-shadow:none;min-width:0}
  nav.subnav.nw .nav-admin-menu a{padding:12px 0 12px 14px;border-bottom:1px solid #EBE6DA;font-size:15px}
  .nw-cta-m{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
  .nw-cta-m .nw-btn{flex:1 1 140px;padding:11px 14px}
}
@media (max-width:640px){
  .nw-lang-m{display:flex;gap:6px;margin-top:16px}
  nav.subnav.nw .nw-lang-m a{padding:6px 10px;border:1px solid #DDD6C6;border-radius:4px;font-size:13px;letter-spacing:.06em}
  nav.subnav.nw .nw-lang-m a.on{background:#EEF1F3;color:#0E2A3B;font-weight:600;border-color:#0E2A3B}
}
@media (max-width:560px){.kopf .r .btn-gold{display:none}}

/* ---------- Familienfuss (EIN Block je Site; Werte wie maritimenetwork) ---------- */
footer.fuss-fam{background:#0E2A3B;color:#9FB4C2;padding:56px 0 26px;font-size:14px;margin:0;display:block;text-align:left}
footer.fuss-fam .wrap{display:block;grid-template-columns:none;gap:0;max-width:1400px;margin:0 auto;padding:0 32px}
footer.fuss-fam .fuss-spalten{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:32px}
footer.fuss-fam b{color:#fff;font-family:"Cormorant Garamond",Georgia,serif;font-size:20.4px;font-weight:600;display:block;margin-bottom:8px;letter-spacing:0}
footer.fuss-fam .fh{color:#fff;font-weight:600;font-size:13.26px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:10px}
footer.fuss-fam a{display:block;padding:3px 0;color:#B9CBD7;text-decoration:none}
footer.fuss-fam a:hover{color:#fff}
footer.fuss-fam p{color:#9FB4C2;margin:8px 0 0;max-width:34em;font-size:14px}
footer.fuss-fam .fuss-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:18px;font-size:13.26px;color:#7E97A6}
@media (max-width:900px){footer.fuss-fam .fuss-spalten{grid-template-columns:1fr 1fr}}
@media (max-width:640px){footer.fuss-fam .wrap{padding:0 18px}footer.fuss-fam .fuss-spalten{grid-template-columns:1fr}}
/* Variante mit 4 Spalten (oceansphere-service.com) */
footer.fuss-fam .fuss-spalten.fuss-4{grid-template-columns:1.7fr 1fr 1fr 1fr}
@media (max-width:900px){footer.fuss-fam .fuss-spalten.fuss-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){footer.fuss-fam .fuss-spalten.fuss-4{grid-template-columns:1fr}}