/* OceanSphere Parts - Familienkopf (System B) mit Parts-Unterleiste und Familienfuss. 13.10.2026.
   Abgeleitet von maritimenetwork familie-network-kopf.css (13.10.2026). Ergaenzt das geteilte familie-kopf.css (Familienleiste, Kopf, nav.subnav) und familie-menu.css.
   Wird NACH beiden geladen. Nur Parts-Eigenes: Sprachumschalter in der Leiste, Kopf-Knoepfe, Suche,
   Konto, Burger (<=1280 px), Fuss. Literale Farben (die B-Seiten haben andere Variablennamen als base.html). */

/* ---------- gemeinsame Basis (base.html hat body.os mit line-height 1.5, die B-Seiten 1.6) ---------- */
.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}

/* ---------- 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}
.pt-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}
.pt-burger:hover,.pt-burger[aria-expanded="true"]{border-color:#0E2A3B}

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

/* Suche */
nav.subnav.pt form.pt-suche{position:relative;margin-left:auto;display:flex;align-items:center;flex:0 1 280px;min-width:150px;height:32px;border:1px solid #DDD6C6;border-radius:4px;background:#fff}
nav.subnav.pt form.pt-suche:focus-within{border-color:#0E2A3B}
nav.subnav.pt form.pt-suche input[type=search]{flex:1;min-width:0;height:100%;width:auto;margin:0;padding:0 4px 0 10px;border:0;border-radius:0;outline:0;background:transparent;font:inherit;font-size:14px;color:#1E2A32;-webkit-appearance:none;appearance:none}
nav.subnav.pt form.pt-suche input[type=search]::placeholder{color:#7A8790}
nav.subnav.pt form.pt-suche button{flex:none;width:34px;height:100%;padding:0;border:0;background:none;color:#46545D;cursor:pointer;display:grid;place-items:center}
nav.subnav.pt form.pt-suche button:hover{color:#0E2A3B}
/* Vorschlagsliste (os-search.js) - Werte aus os-industrial.css, literal */
nav.subnav.pt .os-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);min-width:300px;background:#fff;border:1px solid #DDD6C6;border-radius:4px;box-shadow:0 8px 24px rgba(14,42,59,.12);z-index:80;max-height:420px;overflow-y:auto;text-align:left;white-space:normal}
nav.subnav.pt .os-suggest[hidden]{display:none}
nav.subnav.pt .os-suggest .os-sg-group{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5E6A73;padding:8px 12px 4px;border-top:1px solid #ECE8DF}
nav.subnav.pt .os-suggest .os-sg-group:first-child{border-top:0}
nav.subnav.pt .os-suggest a{display:flex;justify-content:space-between;gap:12px;padding:7px 12px;border:0;color:#1E2A32;font-size:14px}
nav.subnav.pt .os-suggest a:hover,nav.subnav.pt .os-suggest a.is-active{background:#F4F7F9}
nav.subnav.pt .os-suggest a .os-sg-sub{color:#5E6A73;font-size:12.5px;white-space:nowrap}
nav.subnav.pt .os-suggest a mark{background:transparent;color:#0E2A3B;font-weight:700}
nav.subnav.pt .os-suggest .os-sg-all{padding:8px 12px;font-size:13px;color:#16384C;border-top:1px solid #DDD6C6}

/* Konto-Gruppe */
nav.subnav.pt .pt-konto{display:flex;align-items:center;gap:18px}
nav.subnav.pt a.pt-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.pt a.pt-navy{background:#0E2A3B;border-color:#0E2A3B;color:#fff}
nav.subnav.pt a.pt-navy:hover{background:#16384C;color:#fff}
nav.subnav.pt a.pt-gold{background:#B88A3E;border-color:#A37A33;color:#2B2006}
nav.subnav.pt a.pt-gold:hover{background:#A37A33;color:#2B2006}
nav.subnav.pt a.pt-ghost{background:#fff;border-color:#DDD6C6;color:#0E2A3B}
nav.subnav.pt a.pt-ghost:hover{border-color:#B88A3E;color:#0E2A3B}

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

/* 1281-1400 px: engere Abstaende, damit deutsche Beschriftungen ohne Ueberlauf passen */
@media (max-width:1400px){nav.subnav.pt .wrap{gap:18px}nav.subnav.pt .pt-links{gap:18px}nav.subnav.pt .pt-konto{gap:14px}}

/* ---------- Schmale Breiten: Unterleiste wird zum Panel hinter dem Burger ---------- */
@media (max-width:1280px){
  .pt-burger{display:inline-flex}
  .kopf .r .btn-ghost{display:none}
  nav.subnav.pt{display:none;border-bottom:1px solid #EBE6DA}
  body.pt-open nav.subnav.pt{display:block}
  nav.subnav.pt .wrap{flex-direction:column;align-items:stretch;gap:0;height:auto;padding-top:4px;padding-bottom:20px;white-space:normal}
  nav.subnav.pt .pt-links{flex-direction:column;align-items:stretch;gap:0;height:auto}
  nav.subnav.pt .pt-links a{padding:12px 0;border-bottom:1px solid #EBE6DA;font-size:15px}
  nav.subnav.pt .pt-links a.active{font-weight:600;border-bottom-color:#B88A3E}
  nav.subnav.pt form.pt-suche{order:-1;margin:12px 0 4px;flex:none;width:100%;min-width:0;height:42px}
  nav.subnav.pt form.pt-suche input[type=search]{font-size:16px}
  nav.subnav.pt .pt-konto{flex-direction:column;align-items:stretch;gap:0;margin-top:6px}
  nav.subnav.pt .pt-konto>a:not(.pt-btn){padding:12px 0;border-bottom:1px solid #EBE6DA;font-size:15px}
  nav.subnav.pt .pt-konto>a.pt-btn{margin:10px 0 2px;padding:11px 14px;font-size:15px}
  nav.subnav.pt 
  nav.subnav.pt .pt-dd-menu a{padding:12px 0 12px 14px;border-bottom:1px solid #EBE6DA;font-size:15px}
  .pt-cta-m{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
  .pt-cta-m .pt-btn{flex:1 1 140px;padding:11px 14px}
}
@media (max-width:640px){
  .pt-lang-m{display:flex;gap:6px;margin-top:16px}
  nav.subnav.pt .pt-lang-m a{padding:6px 10px;border:1px solid #DDD6C6;border-radius:4px;font-size:13px;letter-spacing:.06em}
  nav.subnav.pt .pt-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 (Vorlage _familienfuss.html; Werte wie die B-Seiten, rem in px aufgeloest: B-Seiten haben html 17px, base.html 16px) ---------- */
footer.fuss-fam{background:#0E2A3B;color:#9FB4C2;padding:56px 0 26px;font-size:14px;margin:0}
footer.fuss-fam .wrap{max-width:1400px;margin:0 auto;padding:0 32px;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}
footer.fuss-fam p{color:#9FB4C2;margin:8px 0 0;max-width:34em}
footer.fuss-fam .fuss-legal{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 .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:640px){footer.fuss-fam .wrap{padding:0 18px}}


/* ---------- Parts: Gegenmassnahmen gegen supplysphere.css / os-industrial.css (laden VOR dieser Datei) ---------- */
/* supplysphere.css faerbt header.kopf navy mit Goldkante und gibt .btn 44 px Mindesthoehe */
header.kopf{background:#fff;border-top:0;color:#1E2A32}
header.kopf .wrap.fam-wrap-std,.fam .wrap.fam-wrap-std,nav.subnav .wrap.fam-wrap-std{max-width:1400px;margin:0 auto;padding-left:32px;padding-right:32px}
.kopf .btn{display:inline-block;min-height:0;line-height:1.6;padding:10px 18px;border-radius:4px;font-size:14.5px;gap:0}
.kopf .btn-ghost:hover{background:#fff}
/* os-industrial.css: .os-search (Kopfsuche) -> schmales Feld in der Unterleiste */
nav.subnav.pt form.pt-suche{max-width:none;overflow:visible;border-radius:4px;background:#fff}
nav.subnav.pt form.pt-suche input[type=search]{padding:0 4px 0 10px;border:0;box-shadow:none}
nav.subnav.pt form.pt-suche button{background:none;color:#46545D;padding:0}
nav.subnav.pt form.pt-suche button:hover{background:none;color:#0E2A3B}
nav.subnav.pt form.pt-suche input:focus-visible{outline:2px solid #16384C;outline-offset:-2px}
/* Konto-Dropdown (angemeldet): Cockpit, Konto, Admin, Abmelden. Wie Tools-Dropdown bei maritimenetwork */
.pt-dd{position:relative;display:flex;align-items:center}
.pt-dd-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:14px;color:#46545D;cursor:pointer}
.pt-dd-btn:hover,.pt-dd-btn[aria-expanded="true"]{color:#0E2A3B}
.pt-dd-btn .pt-chev{color:#856326;transition:transform .2s}
.pt-dd-btn[aria-expanded="true"] .pt-chev{transform:rotate(180deg)}
.pt-dd-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;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;white-space:normal}
.pt-dd-menu[hidden]{display:none}
nav.subnav.pt .pt-dd-menu a{display:block;padding:9px 16px;border:0}
nav.subnav.pt .pt-dd-menu a:hover{background:#F4F7F9}
nav.subnav.pt .inline-form{display:block;margin:0}
nav.subnav.pt .pt-linkbtn{display:block;width:100%;padding:9px 16px;border:0;background:none;font:inherit;font-size:14px;color:#46545D;text-align:left;cursor:pointer}
nav.subnav.pt .pt-linkbtn:hover{background:#F4F7F9;color:#0E2A3B}
@media (max-width:1280px){
  .pt-dd{display:block}
  .pt-dd-btn{display:block;width:100%;padding:12px 0 4px;border:0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#856326;cursor:default;pointer-events:none;text-align:left}
  .pt-dd-btn .pt-chev{display:none}
  .pt-dd-menu,.pt-dd-menu[hidden]{display:block!important;position:static;min-width:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
  nav.subnav.pt .pt-dd-menu a,nav.subnav.pt .pt-linkbtn{padding:12px 0 12px 14px;border-bottom:1px solid #EBE6DA;font-size:15px}
}
/* Rechtszeile: Flex statt Spaltenraster (sonst bricht der Datenbank-Satz in der 2. Spalte auf 3 Zeilen) */
footer.fuss-fam .wrap.fuss-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 32px}

/* 13.10.2026: Seitenrand wie auf den uebrigen Familienseiten. Die Regel oben (32 px immer) schlug die zentralen Handyraender
   (familie-menu.css: Kopf 12 px bis 480 px) und die 18 px der Leiste/Unterleiste bis 640 px -> Logo stand bei 375 px auf x=32, sonst x=12. */
@media (max-width:640px){.fam .wrap.fam-wrap-std,nav.subnav .wrap.fam-wrap-std,header.kopf .wrap.fam-wrap-std{padding-left:18px;padding-right:18px}}
@media (max-width:480px){html body header.kopf .wrap.fam-wrap-std{padding-left:12px;padding-right:12px}}