/**
 * Typografie – SV Hilden Ost 1975 e.V.
 *
 * Google Fonts werden in header.php per <link>-Tag eingebunden:
 *
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 *
 * Diese Datei enthält:
 *   - Lokale Fallback-Definitionen (optional, für Offline-Betrieb)
 *   - Basis-Typografie-Regeln
 */

/* ============================================================
   LOKALE FALLBACKS
   Falls Google Fonts nicht geladen werden können (z. B. DSGVO-konformes
   Self-Hosting), können die Schriften hier lokal eingebunden werden.
   Pfade zu assets/fonts/ anpassen sobald Dateien vorhanden.
   ============================================================ */

/*
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-Regular.woff2') format('woff2'),
       url('../fonts/BarlowCondensed-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2'),
       url('../fonts/BarlowCondensed-SemiBold.woff')  format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-Bold.woff2') format('woff2'),
       url('../fonts/BarlowCondensed-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-ExtraBold.woff2') format('woff2'),
       url('../fonts/BarlowCondensed-ExtraBold.woff')  format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2'),
       url('../fonts/Inter-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2'),
       url('../fonts/Inter-Medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
       url('../fonts/Inter-SemiBold.woff')  format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================================================
   BASIS-TYPOGRAFIE
   ============================================================ */

/* Body-Text */
body {
  font-family:       var(--font-body);
  font-size:         16px;
  font-weight:       400;
  line-height:       1.65;
  color:             var(--color-dark);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:    optimizeLegibility;
}

/* ============================================================
   ÜBERSCHRIFTEN
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  font-weight:    700;
  line-height:    1.1;
  color:          var(--color-dark);
  margin-top:     0;
  margin-bottom:  0.6em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
}

h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
}

h4 {
  font-size: 1.5rem;
  font-weight: 700;
}

h5 {
  font-size: 1.25rem;
  font-weight: 600;
}

h6 {
  font-size: 1rem;
  font-weight: 600;
}

/* ============================================================
   ABSÄTZE & INLINE
   ============================================================ */

p {
  margin-top:    0;
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}

small {
  font-size: 0.875rem;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color:            var(--color-primary);
  text-decoration:  none;
  transition:       color var(--transition);
}

a:hover {
  color:            var(--color-primary-dark);
  text-decoration:  underline;
}

a:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius:  2px;
}

/* ============================================================
   LISTEN
   ============================================================ */

ul, ol {
  margin-top:    0;
  margin-bottom: 1.25rem;
  padding-left:  1.5rem;
}

li {
  margin-bottom: 0.35rem;
}

/* ============================================================
   SONSTIGES
   ============================================================ */

blockquote {
  border-left:   4px solid var(--color-primary);
  padding-left:  1.5rem;
  margin:        1.5rem 0;
  font-style:    italic;
  color:         var(--color-gray);
}

hr {
  border:        none;
  border-top:    1px solid var(--color-gray-light);
  margin:        2rem 0;
}

code, pre {
  font-family:  'Courier New', Courier, monospace;
  font-size:    0.9em;
}

pre {
  background:    var(--color-gray-lighter);
  padding:       1rem;
  border-radius: var(--radius);
  overflow-x:    auto;
}

/* Textauswahl */
::selection {
  background: var(--color-primary);
  color:      var(--color-white);
}

::-moz-selection {
  background: var(--color-primary);
  color:      var(--color-white);
}