/*
 * Putzar Consulting — Heading-System
 * Quelle: src/pages/*.tsx (React-Original, Tailwind-Skala text-lg…text-7xl)
 * Schrift: Cardillac (lokal, @font-face siehe main.css)
 *
 * Klassen:
 *   .heading-hero    — H1 PageHero auf Unterseiten
 *   .heading-section — Große H2 Section-Titel (Default Home: 36/48/60, Unterseiten gecappt: 30/36)
 *   .heading-lg      — Standard-H2 (Synergie, Expertise, FAQ): 30/36/48
 *   .heading-md      — H2 Service-Block, Modal-Titel: 30/36
 *   .heading-sm      — Kompetenz-Card-Title, mittlere Cards: 24 (kein Uplift)
 *   .heading-xs      — Kleine Card-Titel: 18/20
 *
 * Modifier:
 *   .heading-section--xl     — Hebt Unterseiten-Section auf 30/36/48 (für Synergie + Tech-Intro)
 *   .heading-section--inverse — Heller Text auf dunklem BG (Synergie-Karte)
 *   .heading--center         — text-align: center
 */

.heading-hero,
.heading-section,
.heading-lg,
.heading-md,
.heading-sm,
.heading-xs {
  font-family: var(--font-serif);
  font-weight: 100;
  color: hsl(var(--primary));
}

/* Spacing zum Folgetext (React-Original mb-6 = 24px für Section-H2 / mb-4 = 16px für Sub-H3).
   Card-H3 (.heading-xs) bleiben margin-frei — Layout-mb wird per BEM-Klasse gesteuert. */
.heading-hero,
.heading-section,
.heading-lg,
.heading-md { margin: 0 0 1.5rem; }
.heading-sm  { margin: 0 0 1rem; }

/* Tier 1 — PageHero H1 : React text-4xl md:text-5xl lg:text-6xl xl:text-7xl → 36/48/60/72.
   Phase 4.6 Cap aufgehoben (2026-04-25): Startseite-Werte gelten global. */
.heading-hero {
  font-size: var(--font-size-4xl);
  line-height: 1.1;
}
@media (min-width: 768px)  { .heading-hero { font-size: var(--font-size-5xl); } }
@media (min-width: 1024px) { .heading-hero { font-size: var(--font-size-6xl); } }
@media (min-width: 1280px) { .heading-hero { font-size: var(--font-size-7xl); } }

/* Tier 2 — Section-Headings (alle Seiten).
   Phase 4.12: H2 muss kleiner als H1 (72px) bleiben → lg-Cap auf 48 (statt 60).
   Skala: 36/48/48 — klare visuelle Hierarchie H1>H2. */
.heading-section {
  font-size: var(--font-size-4xl);
  line-height: 1.2;
}
@media (min-width: 768px) { .heading-section { font-size: var(--font-size-5xl); } }

/* Tier 3 — Large subsection / CTA / Synergy : React text-3xl md:text-4xl lg:text-5xl → 30/36/48 */
.heading-lg {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}
@media (min-width: 768px)  { .heading-lg { font-size: var(--font-size-4xl); } }
@media (min-width: 1024px) { .heading-lg { font-size: var(--font-size-5xl); } }

/* Tier 4 — Subsection / Service-Block / Philosophy-H2 : React text-3xl md:text-4xl → 30/36 */
.heading-md {
  font-size: var(--font-size-3xl);
  line-height: 1.3;
}
@media (min-width: 768px) { .heading-md { font-size: var(--font-size-4xl); } }

/* Tier 5 — Kompetenz-Card / Card-Group-Title : React text-2xl (kein Uplift) → 24/24 */
.heading-sm {
  font-size: var(--font-size-2xl);
  line-height: 1.3;
}

/* Tier 6 — Card / Partner / Team-Value / FAQ-Summary : React text-lg md:text-xl → 18/20 */
.heading-xs {
  font-size: var(--font-size-lg);
  font-weight: 100;
  line-height: 1.4;
}
@media (min-width: 768px) { .heading-xs { font-size: var(--font-size-xl); } }

/* ── Phase 4.7 (2026-04-25): Unterseiten-Caps entfernt ──
   Startseite-Werte gelten jetzt global — .heading-section, .heading-lg, .heading-hero
   verhalten sich auf allen Seiten identisch. Modifier .heading-section--xl entfällt
   funktional, bleibt als Klasse aber bestehen (greift Default-Werte). */

/* Hero-Cap aufgehoben: zurück zu React-Original 36/48/60/72 */

/* Modifier — Heller Text auf dunklem BG (z.B. Synergie-Sektion auf bg-primary) */
.heading-section--inverse,
.heading--inverse {
  color: hsl(var(--primary-foreground));
}

/* Modifier — zentriert */
.heading--center {
  text-align: center;
}

/* Tier Eyebrow — Sub-Section-Labels (Tech-Stack-Kategorien) : React text-xs tracking-[0.2em] uppercase → 12px sans-serif uppercase.
   BEM-Aliase erben hier von der Tier-Klasse, vermeiden duplizierte CSS-Definitionen. */
.heading-eyebrow,
.tech-stack-category__title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--secondary));
  margin: 0 0 1rem;
}

/* Tier Pill — Body-Headings / Tech-Items : React font-medium 16px sans-serif. */
.heading-pill,
.tech-item__name {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: hsl(var(--primary));
  margin: 0;
  transition: color 0.2s;
}
.tech-item:hover .tech-item__name,
.tech-item:hover .heading-pill { color: hsl(var(--secondary)); }

/* Accent — italisch, sekundärfarbe (bestehende Hilfsklassen, hier konsolidiert).
   .hero-title--accent: Hero-H1 italic-span (Team/Kompetenz/Leistungen/Partner Hero).
   .heading-italic:     Allgemeiner Italic-Modifier für Inline-Spans in Headings. */
.hero-title--accent,
.heading-italic {
  display: block;
  font-style: italic;
  color: hsl(var(--secondary));
}

/* Accent-Italic-Span in Section-Headlines (z.B. "Die Synergie aus [italic]Finanzwesen & Technologie[/italic]")
   Ersetzt fehlerhafte Tailwind-Übersetzungen wie 'block italic text-primary-foreground-80'. */
.heading-italic-accent {
  display: block;
  font-style: italic;
  color: hsl(var(--secondary));
}
.heading-italic-accent--inverse {
  display: block;
  font-style: italic;
  color: hsl(var(--primary-foreground) / 0.8);
}

/* Globaler h4-Default: war undefiniert → fiel auf Browser-Default 12-13px (zu klein).
   Setzt h4 auf React text-base (16) als Sicherheitsnetz; Modal-h4 etc. überschreiben mit .heading-xs falls nötig. */
h4 {
  font-size: 1rem;
  line-height: 1.4;
}

.heading-serif {
  font-family: var(--font-serif);
  font-weight: 100;
  line-height: 1.2;
}

.font-serif {
  font-family: var(--font-serif);
}