/* ============================================================
   FreiVonX Presse — Shared Styles
   Design-System konform (docs/design-system.md)
   SSOT fuer alle Presse-HTML-Dokumente
   ============================================================ */

/* 1. CSS VARIABLES */
:root {
  --fx-gold-primary:    #FFD275;
  --fx-gold-cta:        #F5C518;
  --fx-bg-body:         #21262B;
  --fx-bg-card:         #292F35;
  --fx-text-primary:    #E6E6E6;
  --fx-text-secondary:  #D1D1D1;
  --fx-text-muted:      #85888A;
  --fx-border-subtle:   rgba(255, 255, 255, 0.08);
  --fx-radius:          22px;
  --fx-glass-bg:        rgba(41, 47, 53, 0.85);
  --fx-glass-blur:      blur(16px);
  --fx-shadow-card:     0 8px 32px rgba(0, 0, 0, 0.35), inset 0 0.5px 0 rgba(255, 255, 255, 0.06);
  --fx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* 2. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  line-height: 1.9;
  color: var(--fx-text-primary);
  background-color: var(--fx-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3. LAYOUT */
.page-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

/* 4. LINKS */
a { color: #FFD275; text-decoration: underline; }
a:hover { color: #F5C518; }

/* 5. HEADER */
.doc-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 2px solid rgba(255, 210, 117, 0.25);
}

.logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--fx-gold-primary);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.doc-header h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--fx-text-primary);
  margin-bottom: 0.5rem;
}

.doc-header .subtitle {
  font-size: 1rem;
  color: var(--fx-text-secondary);
}

.doc-header .subtitle strong {
  color: var(--fx-gold-primary);
}

.doc-header .date-line {
  font-size: 0.875rem;
  color: var(--fx-text-muted);
  margin-top: 0.5rem;
}

/* 6. SECTION HEADINGS */
h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--fx-text-primary);
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 210, 117, 0.15);
}

h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--fx-text-primary);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* 7. GLASS MORPHISM — shared base for all card-like elements */
.card, .key-fact, .step-card, .testimonial {
  background: var(--fx-glass-bg);
  backdrop-filter: var(--fx-glass-blur);
  -webkit-backdrop-filter: var(--fx-glass-blur);
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow-card), var(--fx-inset-highlight);
  border: 1px solid var(--fx-border-subtle);
}

.card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 1.5rem;
}

/* 8. KEY FACTS GRID */
.key-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.key-fact {
  text-align: center;
  padding: 1.5rem 1rem;
}

.key-fact .number {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--fx-gold-primary);
  display: block;
  margin-bottom: 0.35rem;
}

.key-fact .label {
  font-size: 0.85rem;
  color: var(--fx-text-secondary);
  line-height: 1.4;
}

/* 9. BODY TEXT */
p { margin-bottom: 1rem; color: var(--fx-text-secondary); }
strong { font-weight: 700; color: var(--fx-text-primary); }
.gold { color: var(--fx-gold-primary); }

/* 10. LISTS */
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.4rem; color: var(--fx-text-secondary); }
li::marker { color: var(--fx-gold-primary); }

/* 11. CALLOUT */
.callout {
  background: rgba(255, 210, 117, 0.06);
  border-left: 3px solid var(--fx-gold-primary);
  border-radius: 0 var(--fx-radius) var(--fx-radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  color: var(--fx-text-secondary);
}
.callout strong { color: var(--fx-gold-primary); }

/* 12. DATA TABLES */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.data-table thead th {
  background: rgba(255, 210, 117, 0.1);
  color: var(--fx-gold-primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--fx-border-subtle);
}

.data-table thead th:first-child { border-radius: 12px 0 0 0; }
.data-table thead th:last-child { border-radius: 0 12px 0 0; }

.data-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--fx-text-secondary);
  vertical-align: top;
}

.data-table tbody td strong { color: var(--fx-text-primary); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* 13. DIVIDER */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 117, 0.3), transparent);
  margin: 2.5rem 0;
}

/* 14. FOOTER */
.doc-footer {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(255, 210, 117, 0.25);
  font-size: 0.9rem;
  color: var(--fx-text-secondary);
  line-height: 1.7;
}

.doc-footer strong { color: var(--fx-text-primary); }
.doc-footer a { color: var(--fx-gold-primary); }

.boilerplate {
  font-size: 0.85rem;
  color: var(--fx-text-muted);
  margin-top: 1.5rem;
  line-height: 1.7;
}

/* 15. RESPONSIVE */
@media (max-width: 767px) {
  .page-wrapper { padding: 2rem 1.25rem 3rem; }
  .doc-header h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  .key-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .key-fact .number { font-size: 1.8rem; }
  .data-table { font-size: 0.85rem; }
}

/* 16. PRINT — Light-Theme, lesbar OHNE "Hintergrundgrafiken" */
@page { margin: 15mm 12mm; size: A4 portrait; }
@media print {
  /* Reset: alle Hintergruende, Schatten, Glass-Effekte entfernen */
  * {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
  }
  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  /* Layout */
  .page-wrapper, .page-wrap, .page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  /* Hinweis-Banner ausblenden */
  [style*="position:fixed"] { display: none !important; }
  /* Typografie: dunkle Farben auf weiss */
  h1, h2, h3, h4, h5, h6 { color: #1a1a1a !important; }
  p, td, li, dd, dt, span, div { color: #333 !important; }
  strong, b { color: #1a1a1a !important; }
  .subtitle, .meta, .date-line { color: #666 !important; }
  .boilerplate, [class*="muted"] { color: #666 !important; }
  /* Gold -> Dunkelgold (#996B1F) — WCAG 5.5:1 Kontrast auf weiss */
  .logo-text,
  .section-label, .section-number,
  .emergency-label, .kpi-number, .fact-number,
  .phone, .step-number, .entry-step-num,
  [class*="gold"], .number, .key-fact .number {
    color: #996B1F !important;
  }
  a { color: #996B1F !important; text-decoration: underline !important; }
  /* Cards: leichter Rahmen statt Glass-Morphism */
  .card, .key-fact, .step-card, .testimonial, .testimonial-card,
  .person-card, .hotline-item, .cta-step, .callout,
  .entry-step, .boilerplate, .quote-block, .beirat-note,
  .emergency-box, .kpi-card, .fact-card,
  [class*="card"], [class*="box"] {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 1rem !important;
  }
  .emergency-box { border: 2px solid #996B1F !important; }
  /* Tabellen */
  th {
    color: #1a1a1a !important;
    background: #f5f5f5 !important;
    border-bottom: 2px solid #ccc !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  td { border-bottom: 1px solid #e0e0e0 !important; }
  table { width: 100% !important; table-layout: fixed !important; word-wrap: break-word !important; }
  /* Divider */
  .divider { background: #ccc !important; height: 1px !important; }
  /* Seitenumbruch-Steuerung */
  h2, h3 { page-break-after: avoid !important; }
  .card, .key-fact, .step-card, .testimonial,
  .person-card, .hotline-item, .cta-step, .entry-step {
    page-break-inside: avoid !important;
  }
  /* Grids */
  [class*="grid"] { overflow: visible !important; }
  /* Header-Border */
  .doc-header { border-bottom-color: #996B1F !important; }
  .doc-footer { border-top-color: #996B1F !important; }
}