/* =========================================================
   VERIFY CSS SYSTEM
   Datei: /assets/css/base/typography.css

   INHALT
   01) Globale Headings
   02) Fließtext
   03) Section-Head
   04) Kicker / Eyebrow-System
   05) Uppercase-Systemklassen

   HINWEIS
   Diese Datei enthält nur allgemeine Typografie-Muster,
   die mehrfach im Projekt verwendet werden.
   Keine Hero-, Card-, Admin- oder Project-Detail-Spezialfälle.
   ========================================================= */


/* =========================================================
   01) GLOBALE HEADINGS
   Grunddefinition für Überschriften im gesamten System
   Austauschbar, wenn Heading-Hierarchie oder Display-Look geändert wird
   ========================================================= */

h1,h2,h3,h4{
  margin:0 0 .6em;
  line-height:1.08;
  letter-spacing:-.02em;
}

h1,h2{
  font-family:var(--font-display);
}

h1{
  font-size:clamp(2.2rem, 5vw, 4.8rem);
}

h2{
  font-size:clamp(1.55rem, 3vw, 2.5rem);
}

h3{
  font-size:clamp(1.06rem, 1.6vw, 1.34rem);
}


/* =========================================================
   02) FLIESSTEXT
   Basisverhalten für normale Textabsätze
   Austauschbar, wenn Lesbarkeit oder Grundfarbigkeit angepasst wird
   ========================================================= */

p{
  margin:0 0 1rem;
  color:var(--muted);
}


/* =========================================================
   03) SECTION-HEAD
   Allgemeine Überschriftenblöcke für Sektionen
   Nutzt Standardabstände und optionale Zentrierung
   ========================================================= */

.section-head{
  position:relative;
  z-index:1;
  margin-bottom:28px;
}

.section-head.centered{
  text-align:center;
  max-width:900px;
  margin-inline:auto;
  margin-bottom:34px;
}

.section-head p.centered,
.section-head.centered p{
  max-width:760px;
  margin-inline:auto;
}


/* =========================================================
   04) KICKER / EYEBROW-SYSTEM
   Kleine vorangestellte Label-Zeilen über Überschriften
   Wiederverwendbar für Sektionen und Panels
   ========================================================= */

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:var(--cyan);
  font-size:.78rem;
  font-weight:700;
}

.section-kicker::before{
  content:"";
  width:28px;
  height:1px;
  background:linear-gradient(90deg, var(--cyan), transparent);
}


/* =========================================================
   05) UPPERCASE-SYSTEMKLASSEN
   Gemeinsame Uppercase-/Tracking-Regel für kleine UI-Labels
   Nur generische Muster, keine visuelle Sonderform
   ========================================================= */

.section-kicker,
.eyebrow-pill,
.live-pill,
.project-label,
.project-status,
.step-no{
  letter-spacing:.12em;
  text-transform:uppercase;
}