/**
 * Global Styles - tecoil Brand Design System
 *
 * Standardisierte Farben, Schriften und Überschriftenstile
 * für alle Seiten des tecoil WordPress Themes.
 *
 * @package Tecoil
 */

/* =====================================================
   CSS-Variablen – tecoil Farbpalette
   ===================================================== */
:root {
  /* Primärfarben */
  --brand-blue: #002d53;
  --brand-blue-700: #042443;
  --brand-blue-600: #0c3458;
  --brand-yellow: #fdc300;
  --brand-yellow-light: #ffdb4d;
  --brand-red: #e30613;

  /* Textfarben */
  --text: #102132;
  --text-muted: #5c6b7a;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.9);
  --text-on-dark-subtle: #cde0f6;

  /* Hintergründe */
  --bg: #ffffff;
  --bg-surface: #f6f8fb;
  --bg-dark: #002d53;
  --bg-dark-gradient: linear-gradient(135deg, #002d53 0%, #0c3458 100%);

  /* Schatten & Effekte */
  --ring: rgba(242, 194, 0, 0.35);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* =====================================================
   Globale Typografie – Schriftfamilien
   ===================================================== */

/* Headlines: Arial Black Italic */
h1, h2, h3 {
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.15;
}

h1 {
  font-style: italic;
}

/* Fließtext: Arial */
body, p, span, a, li, td, th, label, input, textarea, select, button {
  font-family: Arial, Helvetica, sans-serif;
}

/* =====================================================
   Hero-Überschriften – Standardisiert für alle Seiten

   Muster:
   - h1 = Gelb (brand-yellow), Arial Black Italic
   - .hero-tagline / .hero-subtitle / .lead = Weiß
   - .hero-badge = Gelb-Badge mit dunklem Text
   ===================================================== */

/* Hero h1: Gelb auf dunklem Hintergrund */
.page-hero h1,
.branchen-hero h1,
.karriere-hero h1,
.service-hero h1,
.hero-referenzen h1,
.hero-standort h1,
.hero-kontakt h1,
.hero-produkte h1,
.hero-downloads h1,
.news-hero h1,
.faq-hero h1,
.legal-hero-compact h1,
.hero-about .hero-title,
.hero-advanced .hero-title-advanced {
  color: var(--brand-yellow);
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 20px;
  line-height: 1.1;
}

/* Hero Untertitel: Weiß auf dunklem Hintergrund */
.page-hero .hero-tagline,
.page-hero .hero-subtitle,
.page-hero .hero-description,
.page-hero .lead,
.branchen-hero .hero-tagline,
.karriere-hero .lead,
.service-hero .hero-description,
.hero-referenzen .hero-subtitle,
.hero-standort .hero-subtitle,
.hero-kontakt .hero-subtitle,
.hero-produkte .hero-subtitle,
.hero-downloads .hero-subtitle,
.news-hero p,
.faq-hero p,
.legal-hero-compact .subtitle,
.hero-about .hero-subtitle {
  color: var(--text-on-dark-muted);
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 700px;
}

/* Hero Badge: Gelb mit dunklem Text */
.page-hero .hero-badge,
.hero-referenzen .hero-badge,
.hero-standort .hero-badge,
.hero-downloads .hero-badge,
.news-hero .hero-badge,
.faq-hero .hero-badge,
.hero-about .hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-yellow-light) 100%);
  color: var(--brand-blue);
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =====================================================
   Section-Überschriften – Standardisiert

   Muster heller Hintergrund:
   - h2 = Brand Blue (#002d53)
   - p/subtitle = Muted Gray

   Muster dunkler Hintergrund:
   - h2 = Brand Yellow (#fdc300)
   - p/subtitle = Weiß/Hell
   ===================================================== */

/* Section-Kopfzeile */
.section-head {
  margin-bottom: 28px;
  text-align: center;
}

.section-head.left {
  text-align: left;
}

/* Section h2: Standard Brand Blue (heller Hintergrund) */
.section h2,
.section-head h2 {
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  color: var(--brand-blue);
  margin: 0 0 10px;
}

/* Section h2: Gelb auf dunklem Hintergrund */
.section-dark h2,
.section-dark .section-title {
  color: var(--brand-yellow);
}

.section-dark p,
.section-dark .section-subtitle {
  color: var(--text-on-dark-muted);
}

/* Section Untertitel */
.section-head p,
.section-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* =====================================================
   Gelbe Titelklasse (Wiederverwendbar)
   ===================================================== */
.title-yellow {
  color: var(--brand-yellow) !important;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
}

/* =====================================================
   Responsive Anpassungen
   ===================================================== */
@media (max-width: 768px) {
  .page-hero h1,
  .branchen-hero h1,
  .karriere-hero h1,
  .service-hero h1,
  .hero-referenzen h1,
  .hero-standort h1,
  .hero-kontakt h1,
  .hero-produkte h1,
  .hero-downloads h1,
  .news-hero h1,
  .faq-hero h1,
  .legal-hero-compact h1,
  .hero-about .hero-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  .section h2,
  .section-head h2 {
    font-size: clamp(1.3rem, 4vw, 2rem);
  }
}