/* ===== TYPOGRAPHY v2 (global, aber nur aktiv mit .typo-v2) ===== */

/* Fonts — wie von dir verwendet */
@font-face { font-family: "PathwayGothic"; src: url(/css/fonts/PathwayGothicOne-Regular.ttf); font-display: swap; }
@font-face { font-family: "GothicExpand";  src: url(/css/fonts/SpecialGothicExpandedOne-Regular.ttf); font-display: swap; }
@font-face { font-family: "Extenda";       src: url(/css/fonts/Extenda-80.ttf); font-display: swap; }

:root {
  /* Familien */
  --font-sans: "PathwayGothic", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "GothicExpand", system-ui, sans-serif;
  --font-wide: "Extenda", system-ui, sans-serif;

  /* Zeilenhöhen */
  --lh-pipi: 0.8;
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal:1.45;

  /* Farben greifen deine Variablen auf, fallback falls nicht vorhanden */
  --c-text: var(--superLight, #f5f4ef);
  --c-head: var(--superLight, #f5f4ef);
  --c-accent: var(--acc-sec, #db952e);

  /* FLUIDE GRÖSSEN (clamp = min / dynamisch / max) */
--fs-xxl: clamp(2.8rem, 4.5vw + 1.8rem, 8rem); /* H1 */
--fs-xl:  clamp(2.2rem, 3.5vw + 1.4rem, 6.4rem); /* H2 etwas kleiner */
--fs-lg:  clamp(1.8rem, 2.2vw + 1.2rem, 3rem);  /* H3 / Lead */
--fs-md:  clamp(1.2rem, 0.8vw + 1rem, 1.75rem); /* Body */
--fs-sm:  clamp(1rem,   0.4vw + 0.9rem, 1.25rem);/* Small */
--fs-xs:  clamp(0.85rem,0.25vw + 0.8rem, 1rem);  /* Overline */
}

/* ----- Scope: nur Unterseiten (oder wo du's willst) ----- */
.typo-v2 {
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

/* Reset & Rhythmus */
.typo-v2 h1,
.typo-v2 h2,
.typo-v2 h3,
.typo-v2 h4,
.typo-v2 h5,
.typo-v2 h6 {
  margin: 0 0 .4em;
  color: var(--c-head);
  letter-spacing: .01em;
  text-wrap: balance;
}

.typo-v2 p { 
  margin: 0 0 1em; 
  font-size: var(--fs-md);
}

.typo-v2 small { 
  font-size: var(--fs-sm); 
  opacity: .9; 
}

/* Überschriften – groß & fett, wie im Screenshot */
.typo-v2 h1 {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  font-weight: 900;
  text-transform: uppercase;
}

.typo-v2 h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 900;
  text-transform: uppercase;
}
.typo-v2 h2.story {
  position: relative;
  z-index: 2;
  font-size: var(--fs-lg);
}


.typo-v2 h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 800;
}

/* Lauftext & Varianten */
.typo-v2 .lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-family: var(--font-sans);
  opacity: .95;
}

.typo-v2 .overline,
.typo-v2 .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: .5em;
}

.typo-v2 .description {
  position: relative;
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  font-family: var(--font-sans);
  opacity: 0.95;
  color: var(--c-text, #fff); /* falls du Dark BG nutzt */
  z-index: 4;
}

.typo-v2 p.description{
  margin: 0 0 .6em !important;
}

.typo-v2 p.description span{
  color: var(--acc-sec)
}

/* Akzentuierung */
.typo-v2 .highlight,
.typo-v2 em.highlight,
.typo-v2 strong.highlight {
  color: var(--c-accent);
}

/* Utilities (praktisch für Komponenten) */
.typo-v2 .font-display { font-family: var(--font-display); }
.typo-v2 .font-sans    { font-family: var(--font-sans); }
.typo-v2 .font-wide    { font-family: var(--font-wide); }

.typo-v2 .text-xs { font-size: var(--fs-xs); }
.typo-v2 .text-sm { font-size: var(--fs-sm); }
.typo-v2 .text-md { font-size: var(--fs-md); }
.typo-v2 .text-lg { font-size: var(--fs-lg); }
.typo-v2 .text-xl { font-size: var(--fs-xl); }
.typo-v2 .text-xxl{ font-size: var(--fs-xxl); }

.typo-v2 .lh-tight { line-height: var(--lh-tight); }
.typo-v2 .lh-snug  { line-height: var(--lh-snug); }
.typo-v2 .lh-normal{ line-height: var(--lh-normal); }

/* Hero-Display mit Extenda (optional für große Initials/Numbers) */
.typo-v2 .display-wide {
  font-family: var(--font-wide);
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  letter-spacing: .02em;
}



/* Grundsätzlich: Links in typo-v2 normal formatieren */
.typo-v2 a {
  color: inherit;        /* Basisfarbe wie umgebender Text */
  text-decoration: none; /* keine Unterstreichung */
  transition: color 0.2s ease;
  font-family: inherit !important;
}

/* Interne Links (beginnen mit / oder deiner Domain) */
.typo-v2 a[href^="/"],
.typo-v2 a[href*="dast-media.de"] {
  color: var(--prim);
}

/* Externe Links (alles mit http/https außer deiner Domain) */
.typo-v2 a[href^="http"]:not([href*="deinedomain.de"]) {
  color: var(--acc-sec);
}

/* Optional Hover-Effekt */
.typo-v2 a:hover {
  text-decoration: underline;
}