/* familie-verzeichnis.css — 19.09.2026
 *
 * Das Kleid, nicht der Umbau. Diese Datei wird NACH os-industrial.css geladen
 * und aendert ausschliesslich Farbe, Schrift, Kante und Abstand. Struktur,
 * Texte, URLs und Canonicals bleiben unangetastet -- damit ist das
 * Ranking-Risiko praktisch null (dieselbe Vorgehensweise wie familie.css
 * bei Marine am 08.08.).
 *
 * Grund: die Uebersichtsseiten waren technisch richtig und optisch stumm --
 * weisse Kacheln, graue Schrift, kein Halt fuers Auge. Zurueck zur Familien-DNA:
 * Navy, Gold, Cormorant, Pergament. Keine Hafenfotos (Lizenz, Ladezeit,
 * Touristik-Anmutung), stattdessen Kante, Zeichen und Herkunft.
 */

:root {
  --fv-pergament: #f4eee1;
  --fv-pergament-2: #faf7f0;
  --fv-gold-weich: #f6eedc;
  --fv-gold-linie: #ebdcb8;
  --fv-schatten: 0 1px 2px rgba(14, 42, 59, .05), 0 8px 24px -16px rgba(14, 42, 59, .35);
}

/* ---------- Ueberschriften bekommen die Familienschrift zurueck ---------- */
body.os main h1,
body.os main h2,
body.os main h3 {
  font-family: var(--os-mark);
  font-weight: 600;
  letter-spacing: .005em;
}
body.os main h1 { font-size: 2.35rem; line-height: 1.14; }
body.os main h2 { font-size: 1.6rem; line-height: 1.2; }

/* ---------- Die Kachel: Kante statt weisser Flaeche ---------- */
body.os .firm {
  border-left: 3px solid var(--os-navy);
  border-radius: 10px;
  box-shadow: var(--fv-schatten);
  padding: 16px 18px;
  transition: border-left-color .15s ease, transform .15s ease;
}
body.os .firm:hover {
  border-left-color: var(--os-gold);
  transform: translateY(-1px);
}
body.os .firm h3 {
  font-family: var(--os-mark);
  font-size: 1.28rem;
  line-height: 1.22;
}
body.os .firm .meta {
  font-size: .84rem;
  letter-spacing: .01em;
}

/* Das Etikett traegt Gold statt Beige-Grau */
body.os .tag {
  background: var(--fv-gold-weich);
  border-color: var(--fv-gold-linie);
  color: var(--os-gold-2);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Ein leeres Etikett darf es nicht geben — falls doch eines durchrutscht,
   nimmt es wenigstens keinen Platz ein (siehe „None"-Fund vom 19.09.). */
body.os .tag:empty { display: none; }

/* ---------- Herkunftsfaehnchen: Laenderkuerzel mit Landesfarbe ----------
   Zartes Zeichen, kostet nichts, bleibt Werkzeug -- und anders als echte
   Flaggen-Grafiken keine zusaetzliche Ladezeit und keine Lizenzfrage. */
body.os .fv-fahne {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--os-steel);
  background: #f3f1ea;
  border: 1px solid var(--os-line);
  border-radius: 4px;
  padding: 1px 6px 1px 4px;
  vertical-align: 1px;
}
body.os .fv-fahne i {
  width: 3px;
  height: 11px;
  border-radius: 1px;
  background: var(--os-steel-2);
  display: block;
}

/* ---------- Karten und Abschnitte: Pergament statt Blaugrau ---------- */
body.os .card {
  box-shadow: var(--fv-schatten);
}
body.os main section:nth-of-type(even) > .card,
body.os .fv-pergament {
  background: var(--fv-pergament-2);
}

/* ---------- Der Hauptknopf traegt Gold ---------- */
body.os .btn-gold {
  background: var(--os-gold);
  border-color: var(--os-gold-2);
  color: #2b2006;
  font-weight: 600;
}
body.os .btn-gold:hover { background: var(--os-gold-2); color: #fff; }

/* ---------- Gesperrte Eintraege: Wuerde statt Geisterpunkte ----------
   Der alte Zustand zeigte 18 gepunktete Platzhalter untereinander und liess
   die Liste duenn und zensiert wirken. Name und Ort bleiben lesbar, gesperrt
   ist nur der Kontakt. */
body.os .hidden-contact {
  font-style: normal;
  letter-spacing: 0;
  color: var(--os-gold-2);
  font-weight: 600;
  font-size: .84rem;
}

/* ---------- Zahlenkasten auf der Startseite ---------- */
body.os .os-hp .v {
  font-family: var(--os-mark);
  font-weight: 600;
  letter-spacing: -.01em;
}
body.os .os-hp .l {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--os-steel);
}

/* ---------- Sektor-Pillen auf /verzeichnis ---------- */
body.os main a.chip {
  box-shadow: 0 1px 2px rgba(14, 42, 59, .04);
  border-color: var(--os-line);
  transition: border-color .15s ease, background .15s ease;
}
body.os main a.chip:hover {
  border-color: var(--fv-gold-linie);
  background: var(--fv-gold-weich);
}

@media (max-width: 640px) {
  body.os main h1 { font-size: 1.8rem; }
  body.os main h2 { font-size: 1.35rem; }
}

/* Gesperrte Kachel: erkennbar, aber nicht entwertet. Goldene Kante statt
   gepunktetem Namen -- der Unterschied bleibt sichtbar, die Firma lesbar. */
body.os .tile-gesperrt {
  border-left: 3px solid var(--os-gold);
  background: linear-gradient(180deg, #fff 0%, var(--fv-pergament-2) 100%);
}