/* ============================================================
   SEVEN OUTSIGHTS — Brand CSS
   Version 1.0 · Mai 2026
   Verwendung: <link rel="stylesheet" href="brand.css">
   Alle Farben, Schriften und Grundregeln des Corporate Design
   als CSS-Custom-Properties + Utility-Klassen.
   ============================================================ */

:root{
  /* --- Primärfarben (extrahiert aus dem Original-Logo) --- */
  --so-navy:        #152640;
  --so-navy-700:    #0f1d33;   /* dunklere Variante */
  --so-navy-300:    #3a4d6e;   /* hellere Variante */
  --so-gold:        #937654;
  --so-gold-300:    #b8946b;
  --so-gold-100:    #e8d9c0;

  /* --- Begleitfarben --- */
  --so-cream:       #efede9;   /* Original-Papierton */
  --so-paper:       #f7f5ef;   /* Heller, für Web-Hintergrund */
  --so-sand:        #e8d9c0;   /* Wärmer, für Tags & Akzente */
  --so-ink:         #1a1a1a;   /* Body Text */
  --so-muted:       #6f6a62;   /* Captions, Hilfsangaben */
  --so-hairline:    #e0dcd2;   /* Trennlinien */

  /* --- Funktionale Farben --- */
  --so-success:     #3a7f5e;
  --so-warn:        #c89643;
  --so-danger:      #b04a3a;

  /* --- Schriften --- */
  --so-font-display: 'Playfair Display', 'PT Serif', Georgia, serif;
  --so-font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --so-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* --- Maße --- */
  --so-radius-sm:   4px;
  --so-radius:      8px;
  --so-radius-lg:   16px;
  --so-shadow-sm:   0 1px 2px rgba(20,38,64,0.06);
  --so-shadow:      0 4px 24px rgba(20,38,64,0.12);

  /* --- Logo Schutzraum (X-Höhe ≈ 1/8 Logo-Höhe) --- */
  --so-clearance:   12.5%;
}

/* ============================================================
   Web-Fonts (Google Fonts)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Basisstyles
   ============================================================ */
.so-body{
  font-family: var(--so-font-sans);
  color: var(--so-ink);
  background: var(--so-paper);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.so-display{
  font-family: var(--so-font-display);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--so-navy);
  line-height: 1.05;
}

.so-h1{ font-size: 54px; }
.so-h2{ font-size: 34px; }
.so-h3{ font-size: 22px; font-family: var(--so-font-sans); font-weight: 700; }

.so-eyebrow{
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--so-gold);
  font-weight: 600;
}

.so-mono{
  font-family: var(--so-font-mono);
  font-size: 12px;
}

/* ============================================================
   Buttons / CTAs
   ============================================================ */
.so-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--so-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: var(--so-radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
}
.so-btn-primary{ background: var(--so-navy); color: #fff; }
.so-btn-primary:hover{ background: var(--so-navy-700); }
.so-btn-gold{ background: var(--so-gold); color: #fff; }
.so-btn-gold:hover{ background: #7d6346; }
.so-btn-ghost{ background: transparent; color: var(--so-navy); border: 1.5px solid var(--so-navy); }
.so-btn-ghost:hover{ background: var(--so-navy); color: #fff; }

/* ============================================================
   Akzent-Linie (markiert Branding-Elemente)
   ============================================================ */
.so-accent-line{
  height: 2px;
  background: var(--so-gold);
  width: 56px;
  display: block;
  border-radius: 1px;
}

/* ============================================================
   Card mit Logo (für dunkle Hintergründe)
   ============================================================ */
.so-logo-card{
  display: inline-flex;
  background: #fff;
  padding: 20px 36px;
  border-radius: var(--so-radius-sm);
  box-shadow: var(--so-shadow-sm);
}
.so-logo-card img{ display: block; height: 56px; }

/* ============================================================
   Print (DIN A4)
   ============================================================ */
@media print{
  @page{ size: A4; margin: 0; }
  .so-body{ background: #fff; }
  .so-no-print{ display: none !important; }
}