/* Eigenstaendige Farbwerte (Fallback, falls familie-tokens.css nicht geladen ist — identisch mit den Tokens) */
.fam-menu,.fam-menu-words,.fam-menu-trigger,#fam-menu-mount{--fam-navy:#0E2A3B;--fam-sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--fam-tinte:#1E2A32;--fam-tinte-2:#46545D;--fam-linie-2:#EBE6DA;--fam-gold:#B88A3E;--fam-gold-text:#856326;--fam-gold-soft:#F6EEDC;--fam-meta:#5E6A73;--fam-karte:#FFFFFF}
.fam-menu{background:#FFFFFF}
/* familie-menu.css -- Familien-Mega-Menue (eigenstaendiger Baustein).
 * Liegt unter /apps/familie-design/static/ und wird ueberall per Symlink
 * static/familie/ eingehaengt, z. B. https://engines.oceansphere.io/static/familie/familie-menu.css
 *
 * Abhaengigkeit: MUSS nach familie-tokens.css geladen werden (nutzt --fam-*
 * Variablen von dort). Fasst keine bestehende Klasse einer App an -- alle
 * Selektoren sind mit "fam-menu-" oder "fam-menu-trigger" praefigiert.
 *
 * Bewegung (Regel 5, regeln_entwurf.md): nur Bild-Zoom/Pfeil-Einfahrt/Chevron-
 * Drehung/Ein-Ausblenden .3s -- kein Scroll-Einflug, kein 3D.
 *
 * ---- Stand 20.09.2026, 2. Auftrag (sechs Kopfzeilen-Woerter) ----
 * Vorher gab es EINEN Trigger ("Menu") bei jeder Breite. Jetzt teilt sich
 * das auf: >=900px tragen die sechs Bereichswoerter selbst den Ausloeser
 * (.fam-menu-word, sitzen in nav.haupt), <900px verschwinden diese sechs
 * Woerter (nav.haupt wird von der App-CSS selbst ausgeblendet) und der
 * alte Menu-Knopf (.fam-menu-trigger) uebernimmt wieder allein -- er ist
 * darum jetzt nur noch <900px sichtbar (siehe unten).
 */

/* ---------- Sechs Kopfzeilen-Woerter (>=900px): ersetzen die bisherigen
   nav.haupt-Links direkt (App bindet <nav class="haupt fam-menu-words">
   statt <nav class="haupt"> ein, zweiter Auftrag). Kein Hover -- Klick
   oeffnet das Panel an genau diesem Abschnitt. ---------- */
.fam-menu-words{gap:22px}
@media (max-width:1280px){.fam-menu-words{gap:16px}}
@media (max-width:1120px){.fam-menu-words{gap:9px}.fam-menu-word{gap:0}.fam-menu-word-chev{display:none}}
@media (max-width:899px){.fam-menu-words{display:none}}

.fam-menu-word{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;padding:8px 0;margin:0;
  font-family:var(--fam-sans);font-size:15px;font-weight:500;
  color:var(--fam-tinte-2);line-height:1;white-space:nowrap;
}
.fam-menu-word:hover{color:var(--fam-navy)}
.fam-menu-word-chev{
  color:var(--fam-gold-text);flex:0 0 auto;
  transition:transform .2s ease;
}

/* "Wo bin ich": aktueller Bereich der Seite (body[data-fam-area]) bekommt
   einen ruhigen Navy-Unterstrich, unabhaengig davon ob das Panel gerade
   offen ist. Sechs feste Regeln statt eines Attribut-Kunstgriffs -- klar
   lesbar, leicht zu erweitern. MUSS vor der aria-expanded-Regel unten
   stehen: beide sind gleich spezifisch (body-Element + drei Klassen/
   Attribute), bei Gleichstand entscheidet die Reihenfolge, und das offene
   Gold soll das Navy-"Du bist hier" ueberstimmen koennen. */
body[data-fam-area="library"] .fam-menu-words .fam-menu-word[data-fam-menu-open="library"],
body[data-fam-area="knowledge"] .fam-menu-words .fam-menu-word[data-fam-menu-open="knowledge"],
body[data-fam-area="parts"] .fam-menu-words .fam-menu-word[data-fam-menu-open="parts"],
body[data-fam-area="forge"] .fam-menu-words .fam-menu-word[data-fam-menu-open="forge"],
body[data-fam-area="service"] .fam-menu-words .fam-menu-word[data-fam-menu-open="service"],
body[data-fam-area="shipmind"] .fam-menu-words .fam-menu-word[data-fam-menu-open="shipmind"]{
  color:var(--fam-navy);box-shadow:inset 0 -2px 0 var(--fam-navy);
}

/* Offen-Zustand: Gold-Unterstrich + Chevron dreht. Gleiche Spezifitaet wie
   oben (body-Element fehlt hier bewusst nicht: .fam-menu-words-Klasse ersetzt
   ihn zahlenmaessig durch eine dritte Klasse/Attribut-Stufe) -- siehe
   Kommentar oben, Reihenfolge im Quelltext entscheidet den Gleichstand. */
body .fam-menu-words .fam-menu-word[aria-expanded="true"]{
  color:var(--fam-navy);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--fam-gold);
}
.fam-menu-word[aria-expanded="true"] .fam-menu-word-chev{transform:rotate(180deg)}

/* ---------- Der Menu-Knopf: jetzt NUR <900px (die sechs Woerter tragen
   den Ausloeser bei >=900px). Neues Element, ruehrt nav.haupt nicht an. */
.fam-menu-trigger{
  display:none;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;padding:8px 2px;margin:0;
  font-family:var(--fam-sans);font-size:15px;font-weight:500;
  color:var(--fam-tinte-2);
}
.fam-menu-trigger:hover{color:var(--fam-navy)}
.fam-menu-trigger[aria-expanded="true"]{color:var(--fam-navy);font-weight:600}
.fam-menu-trigger .fam-menu-chev{
  color:var(--fam-gold-text);flex:0 0 auto;
  transition:transform .2s ease;
}
.fam-menu-trigger[aria-expanded="true"] .fam-menu-chev{transform:rotate(180deg)}
@media (max-width:899px){.fam-menu-trigger{display:inline-flex}}

/* ---------- Panel: volle Breite, weiss, Haarlinie oben, unter der Kopfzeile
   angeheftet (fixed, top wird per JS auf header.bottom gesetzt -- so ist
   keine positionierte Elternkomponente in der App noetig). ---------- */
.fam-menu{
  position:fixed;left:0;right:0;top:0;
  background:var(--fam-karte);
  border-top:1px solid var(--fam-linie-2);
  box-shadow:0 24px 48px -32px rgba(14,42,59,.22);
  z-index:60;
  overflow-y:auto;
  /* top + max-height werden von familie-menu.js gesetzt (Kopfhoehe ist
     App-abhaengig: 77px bei start_neu.html, anderswo ggf. anders). */
}
.fam-menu[hidden]{display:none}

.fam-menu-inner{
  display:flex;
  align-items:flex-start;
  column-gap:40px;
  padding-block:28px;
}

/* Fix 22.09.2026: einzelne Apps laden NACH familie-menu.css eine eigene
 * .wrap-Regel mit padding:0 ... (z.B. familie-additive.css), die den
 * padding-top/bottom dieses Elements auf 0 zieht (gleiche Spezifitaet,
 * spaeter im Quelltext = gewinnt). .fam-menu-inner MUSS immer 28px oben /
 * 24px unten haben, unabhaengig davon, welche App-CSS zuletzt geladen
 * wird -- darum hier eigene, app-unabhaengige Regel mit !important statt
 * auf Ladereihenfolge zu vertrauen. Betroffen war additive.oceansphere.io
 * (Joshua-Screenshot 22.09.: Spaltenkopf ohne Abstand zur Kopfzeile).
 */
@media (min-width:900px){.fam-menu .fam-menu-inner{padding:28px 32px 24px!important}}

/* Schiene und Inhalt sind bewusst ZWEI unabhaengige Container (nicht
   dieselbe Grid-Zeile) -- sonst zwingt die Hoehe des sichtbaren Inhalts
   (bis zu 7 Zeilen) die Schienenknoepfe auseinander, weil eine Grid-Zeile
   sich an ihrem hoechsten Element ausrichtet. Bei <900px baut
   familie-menu.js die Schienenknoepfe und ihre Sektion zu EINER Liste
   um (siehe dort), erst dann arbeiten beide wieder im selben Fluss.
   Sechs Bereiche statt vier: Schiene etwas schmaler (320px statt 376px),
   Inhalt entsprechend breiter -- Panel-Gesamtbreite (.wrap) bleibt 1400px. */
.fam-menu-rail{width:320px;flex:0 0 320px;display:flex;flex-direction:column}
.fam-menu-content{width:808px;flex:0 0 808px}

/* ---------- Schiene (links, 320 px): sechs Bereiche, aktiver Eintrag mit
   Gold-Balken links + Chevron. Gleichzeitig die Akkordeon-Kopfzeile <900px. */
.fam-menu-rail-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;background:transparent;border:0;
  border-left:3px solid transparent;
  padding:14px 16px 14px 18px;margin:0;
  font-family:var(--fam-sans);font-size:15.5px;font-weight:500;
  color:var(--fam-tinte-2);cursor:pointer;flex:0 0 auto;
}
.fam-menu-rail-btn:hover{background:#EEF1F3;color:var(--fam-navy)}
.fam-menu-rail-btn.is-akt{
  border-left-color:var(--fam-gold);color:var(--fam-navy);font-weight:600;
  background:#EEF1F3;
}
.fam-menu-rail-chev{
  color:var(--fam-gold-text);flex:0 0 auto;opacity:0;transition:opacity .2s;
}
.fam-menu-rail-btn.is-akt .fam-menu-rail-chev{opacity:1}

/* ---------- Inhalt (rechts, 808 px): 2-3 Spaltenlisten. Nur die aktive
   Sektion ist nicht [hidden]. ---------- */
.fam-menu-section[hidden]{display:none}
.fam-menu-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.fam-menu-col h3{
  font-family:var(--fam-sans);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fam-meta);
  margin:0 0 6px;padding:0 6px;
}
.fam-menu-col h3 a{color:inherit;text-decoration:none}
.fam-menu-col h3 a:hover{color:var(--fam-navy)}
/* Untertitel: EIN Satz unter der Kopfzeile, vor der Liste (Maritime Signal,
   OceanSphere Additive, OceanForge, ShipMind -- alle wortgleich aus der
   Live-Quelle bzw. Joshuas Vorgabe, siehe familie-menu-build.py). */
.fam-menu-col-sub{
  font-family:var(--fam-sans);font-size:13px;line-height:1.4;
  color:var(--fam-meta);margin:0 0 10px;padding:0 6px;
}
.fam-menu-col ul{list-style:none;margin:0;padding:0}
.fam-menu-col li{position:relative;border-top:1px solid var(--fam-linie-2)}
.fam-menu-col li:last-child{border-bottom:1px solid var(--fam-linie-2)}
.fam-menu-col li::after{
  content:"→";position:absolute;top:50%;right:6px;
  transform:translateY(-50%);color:var(--fam-gold-text);
  opacity:0;transition:opacity .3s,right .3s;pointer-events:none;
}
.fam-menu-col li:hover::after{opacity:1;right:-2px}
.fam-menu-col a{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:10px 24px 10px 6px;font-family:var(--fam-sans);font-size:15px;
  color:var(--fam-tinte);text-decoration:none;
}
.fam-menu-col a:hover{background:var(--fam-gold-soft)}
.fam-menu-col a span{color:var(--fam-meta);font-size:12.5px;white-space:nowrap}

/* ---------- Fussstreifen: EIN Satz + zwei Knoepfe, eigener grauer Ton
   (ausdruecklich vorgegeben, keine Familienfarbe). ---------- */
.fam-menu-foot{background:#F3F1EC;border-top:1px solid var(--fam-linie-2)}
.fam-menu-foot-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-block:18px;
}
.fam-menu-foot-inner p{margin:0;font-family:var(--fam-sans);font-size:14.5px;color:var(--fam-tinte-2)}
.fam-menu-foot-btns{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- <900 px: Vollbild-Akkordeon, kein Overlay-Fehler. familie-
   menu.js haengt bei dieser Breite jede Sektion direkt hinter ihren
   eigenen Schienenknopf (siehe dort) -- .fam-menu-rail wird dadurch zur
   einzigen, linearen Liste; .fam-menu-content bleibt leer und faellt
   ohne Inhalt auf 0 Hoehe zusammen. ---------- */
@media (max-width:899px){
  .fam-menu{position:fixed;top:0;left:0;right:0;bottom:0;max-height:none;border-top:0}
  .fam-menu-inner{flex-direction:column;column-gap:0;padding-block:8px}
  .fam-menu-rail{width:100%;flex:1 1 auto}
  .fam-menu-content{width:100%;flex:0 0 auto}
  .fam-menu-rail-btn{border-left-width:4px;padding:16px 6px}
  .fam-menu-section{padding:4px 0 20px}
  .fam-menu-cols{grid-template-columns:1fr;gap:22px}
  .fam-menu-foot-inner{flex-direction:column;align-items:flex-start}
}

/* ---------- Schliessen-Leiste, nur <900 px sichtbar (Vollbild braucht einen
   erreichbaren Schliess-Punkt zusaetzlich zu Esc). ---------- */
.fam-menu-close{display:none}
@media (max-width:899px){
  .fam-menu-close{
    display:flex;justify-content:flex-end;padding:14px 20px 0;
  }
  .fam-menu-close button{
    background:none;border:0;font-family:var(--fam-sans);font-size:14px;
    font-weight:600;color:var(--fam-tinte-2);cursor:pointer;
    display:flex;align-items:center;gap:6px;padding:6px;
  }
}

/* Familienleiste: Eintraege als Links */
.fam a{color:inherit;text-decoration:none}.fam a:hover{color:#fff}.fam a.akt,.fam b{color:#fff;font-weight:600}

/* Kopfzeile auf schmalen Telefonen: Lockup-Unterzeile weg, Knoepfe kompakter */
@media (max-width:480px){.fam-menu-trigger{padding:6px 8px;font-size:13.5px}.kopf .r .btn,.kopf .r a.btn,header .r .btn,header .r a.btn{padding:7px 9px;font-size:12.5px}.lockup .sub{display:none}.kopf .r,header .r{gap:6px}}

@media (max-width:480px){.lockup .haupt{font-size:19px}.lockup svg{width:22px;height:26px}header .r nav.lang-switch,header .r .lang-switch{font-size:12px;letter-spacing:0;gap:2px}header .r nav.lang-switch a{padding:0 3px}header .r .btn-ghost{padding:6px 8px}}
@media (max-width:400px){header .r nav.lang-switch,header .r .lang-switch-wrap{display:none}}