/* OceanSphere Familien-Kleid — die DNA des Verzeichnisses (maritimenetwork.io)
 * als gemeinsame Grundlage der Markenfamilie.
 *
 * Entstanden am 08.08.2026 nach Malgorzatas Befund: das kostenlose
 * Verzeichnis wirkte hochwertiger als das Bezahlprodukt. Das Flaggschiff
 * muss das hochwertigste Stueck der Familie sein.
 *
 * Dieses Blatt legt sich NACH public.css und belegt dessen Variablen und
 * Kernklassen neu. Struktur und Inhalte der Seite bleiben unveraendert —
 * nur das Kleid wechselt. Der violette Fremdakzent entfaellt.
 *
 * Familien-DNA:
 *   Navy  #16384c   Stammfarbe (Kopf, Hero, Fuss)
 *   Tinte #1a1206   Text auf hellem Grund
 *   Perg. #f0e9d8   warme Flaeche (statt kaltem Grau)
 *   Gold  #b8860b   Auszeichnung, sparsam
 *   Gruen #2e7d57   Erfolg, Haken, "frei"-Signale
 *   Cormorant Garamond fuer Ueberschriften, Inter fuer Text.
 */

:root {
  --mq-navy: #16384c;
  --mq-navy-dark: #0e2a3b;
  --mq-navy-light: #1f4a63;
  --mq-teal: #2e7d57;
  --mq-teal-light: #3a9268;
  --mq-teal-dark: #256648;
  --mq-sky: #eaf1f5;
  --mq-sky-dark: #dfe9ee;
  --mq-gold: #b8860b;
  --familie-tinte: #1a1206;
  --familie-pergament: #f0e9d8;
  --familie-creme: #faf6ec;
  --familie-linie: #e3d9c2;
}

/* Typografie: das Schriftpaar der Familie */
body.mq-public {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--familie-tinte);
  background: var(--familie-creme);
}
.mq-public h1, .mq-public h2, .mq-public h3,
.mq-hero h1, .mq-section-title, .mq-final-cta h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.12;
}
.mq-hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.mq-section-title { color: var(--mq-navy); }

/* Kopfzeile: das Navy-Band des Verzeichnisses, mit Goldlinie obenauf.
 * Malgorzatas zweite Runde: das zweizeilige Logo ist der staerkste
 * Wiedererkennungsbaustein — derselbe Aufbau traegt die ganze Familie,
 * nur die Submarke wechselt (MARITIME NETWORK / MARINE / ENGINES). */
.familie-kopf {
  background: var(--mq-navy);
  border-top: 3px solid var(--mq-gold);
  border-bottom: 0;
}
.familie-kopf .mq-nav a { color: #dfe9ee; }
.familie-kopf .mq-nav a:hover { color: #fff; }

.familie-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.familie-anker { color: var(--mq-gold); flex: none; }
.familie-wortmarke { display: flex; flex-direction: column; line-height: 1.05; }
.familie-wortmarke .haus {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700; font-size: 1.35rem; color: #fff; letter-spacing: .3px;
}
.familie-wortmarke .submarke {
  font-family: 'Inter', sans-serif;
  font-size: .60rem; font-weight: 600;
  letter-spacing: .30em; text-transform: uppercase;
  color: var(--mq-gold); margin-top: 3px;
}

/* Hero: der tiefe Navy-Verlauf des Verzeichnisses */
.mq-hero {
  background: linear-gradient(135deg, #0e2a3b, #16384c 70%);
}
.mq-hero-sub { color: #c7d6de; }

/* Knoepfe: Gold traegt die Haupt-Handlung, Navy die zweite */
.mq-btn-primary, .mq-hero-cta-primary {
  background: var(--mq-gold);
  border-color: var(--mq-gold);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(184, 134, 11, .28);
}
.mq-btn-primary:hover, .mq-hero-cta-primary:hover {
  background: #a0750a; border-color: #a0750a;
}
.mq-hero-cta-secondary {
  background: transparent; color: #eaf1f5;
  border: 1px solid rgba(234, 241, 245, .45); border-radius: 10px;
}
.mq-hero-cta-secondary:hover { border-color: #eaf1f5; }

/* Karten: Pergament statt Kaltgrau, feine Linien statt Schatten */
.mq-feature-card, .mq-audience-card, .mq-persona-card,
.mq-faq-item, .mq-price-card, .mq-demo-box {
  background: #fff;
  border: 1px solid var(--familie-linie);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(26, 18, 6, .05);
}
.mq-feature-icon, .mq-audience-icon { color: var(--mq-navy); }
.mq-section:nth-of-type(even) { background: var(--familie-pergament); }

/* Kennzahlen im Stil des Verzeichnisses: grosse Serifen-Zahl, stille Zeile */
.familie-zahlen {
  display: flex; gap: 42px; flex-wrap: wrap; margin-top: 26px;
}
.familie-zahl .wert {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.3rem; font-weight: 700; color: var(--mq-gold);
  line-height: 1;
}
.familie-zahl .name { font-size: .82rem; color: #c7d6de; margin-top: 4px; }

/* Der Produkt-Ausschnitt im Hero: eine GESTALTETE Karte statt eines
 * Screenshots im Screenshot. Scharf in jeder Groesse, immer in der
 * Seitensprache, nie veraltet. */
.familie-mock {
  background: var(--familie-creme);
  border-radius: 14px;
  padding: 22px;
  color: var(--familie-tinte);
  box-shadow: 0 24px 60px rgba(4, 16, 24, .45);
  font-size: .85rem;
}
.familie-mock .kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--mq-navy); padding-bottom: 10px;
}
.familie-mock .kopf .titel {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem; font-weight: 700; color: var(--mq-navy);
}
.familie-mock .stempel {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: #e8f4ec; color: var(--mq-teal);
  padding: 3px 10px; border-radius: 999px; font-weight: 700;
}
.familie-mock .zeile {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--familie-linie);
}
.familie-mock .zeile .zeit {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
.familie-mock .zeile .netto { color: var(--mq-teal); font-weight: 700; white-space: nowrap; }
.familie-mock .fotos { display: flex; gap: 8px; margin-top: 12px; }
.familie-mock .foto {
  flex: 1; aspect-ratio: 4/3; border-radius: 8px;
  background: linear-gradient(135deg, var(--mq-sky-dark), var(--mq-sky));
  display: flex; align-items: center; justify-content: center;
  color: var(--mq-navy); font-size: 1.1rem;
}
.familie-mock .summe {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-weight: 700; color: var(--mq-navy);
}

/* Fusszeile: Navy, mit Platz fuer die Familienleiste */
.mq-footer { background: var(--mq-navy-dark); }
.familie-leiste {
  border-top: 1px solid rgba(234, 241, 245, .15);
  margin-top: 18px; padding-top: 14px;
  font-size: .8rem; color: #8ea6b4;
}
.familie-leiste a { color: #c7d6de; text-decoration: none; }
.familie-leiste a:hover { color: #fff; }

/* Entwurfsband — nur auf der Testseite sichtbar */
.entwurf-band {
  background: var(--familie-pergament);
  border-bottom: 1px solid var(--familie-linie);
  color: #7a5c00; text-align: center;
  padding: 8px 16px; font-size: .82rem;
}