/* ========================================
   TURNS Typography System
   Based on Corporate Design: Turns-Corporate_Design_Schrift_230625.txt

   ONLY 7 TEXT STYLES - NO EXCEPTIONS
   ======================================== */

/* ========================================
   1. H1 - Kapitelopener
   100PT/110PT, font-medium
   Usage: Hero titles, big quotes, fullscreen headlines
   ======================================== */

h1,
.h1 {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-size: clamp(56px, 6.94vw, 133px);   /* 100pt @ 1920px = 133px */
  line-height: 1.1;                         /* 110/100 = 1.1 */
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #111214;
}

/* ========================================
   2. H2 - Headline Groß
   60PT/72PT, font-medium
   Usage: Section headlines, major headings
   ======================================== */

h2,
.h2 {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-size: clamp(32px, 4.17vw, 80px);    /* 60pt @ 1920px = 80px */
  line-height: 1.2;                         /* 72/60 = 1.2 */
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #111214;
}

/* ========================================
   3. Copy Groß (Large Paragraph)
   40PT/52PT, font-regular
   Usage: Large body text, introductions
   ======================================== */

.p-big {
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(20px, 2.78vw, 53px);    /* 40pt @ 1920px = 53px */
  line-height: 1.3;                         /* 52/40 = 1.3 */
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 1rem 0;
  color: #111214;
}

.p-big_highlighted {
  position: relative;
  display: inline;
  background: linear-gradient(0deg, var(--color-yellow) 30%, transparent 30%);
}

/* ========================================
   4. H3 - Headline Klein
   40PT/52PT, font-medium
   Usage: Subsection headings
   ======================================== */

h3,
.h3 {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-size: clamp(20px, 2.78vw, 53px);    /* 40pt @ 1920px = 53px */
  line-height: 1.3;                         /* 52/40 = 1.3 */
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #111214;
}

/* ========================================
   5. Copy Klein (Default Paragraph)
   25PT/32.5PT, font-regular
   Usage: Standard body text
   ======================================== */

p,
.p {
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(18px, 1.74vw, 33px);    /* 25pt @ 1920px = 33px */
  line-height: 1.3;                         /* 32.5/25 = 1.3 */
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 1rem 0;
  color: #111214;
}

.p_underline {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.p_highlight {
  position: relative;
  display: inline;
  background: linear-gradient(0deg, var(--color-yellow) 30%, transparent 30%);
}

/* ========================================
   6. H4 - Headline Marginal
   18PT/23.4PT, font-medium, UPPERCASE
   Usage: Small headings, labels
   ======================================== */

h4,
.h4 {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-size: clamp(14px, 1.25vw, 24px);    /* 18pt @ 1920px = 24px */
  line-height: 1.3;                         /* 23.4/18 = 1.3 */
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  color: #111214;
}

/* ========================================
   7. Copy Marginal
   14PT/18.2PT, font-regular
   Usage: Captions, footnotes, small text
   ======================================== */

.text-marginal {
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(12px, 0.94vw, 18px);    /* 14pt @ 1920px = 18px */
  line-height: 1.3;                         /* 18.2/14 = 1.3 */
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
  color: #111214;
}

/* ========================================
   Responsive Adjustments - Mobile
   Smaller sizes for better readability on mobile
   ======================================== */

@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1.15;
  }

  h2,
  .h2 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.3;
  }

  .p-big {
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.4;
  }

  h3,
  .h3 {
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.4;
  }

  p,
  .p {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.4;
  }

  h4,
  .h4 {
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.4;
  }

  .text-marginal {
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.4;
  }
}

/* ========================================
   Responsive Adjustments - Tablet
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  h1,
  .h1 {
    font-size: clamp(48px, 7.5vw, 90px);
  }

  h2,
  .h2 {
    font-size: clamp(28px, 5vw, 56px);
  }

  .p-big {
    font-size: clamp(18px, 3.5vw, 36px);
  }

  h3,
  .h3 {
    font-size: clamp(18px, 3.5vw, 36px);
  }

  p,
  .p {
    font-size: clamp(16px, 2.5vw, 24px);
  }

  h4,
  .h4 {
    font-size: clamp(14px, 1.8vw, 18px);
  }

  .text-marginal {
    font-size: clamp(12px, 1.5vw, 16px);
  }
}

/* ========================================
   List Styles - Use Copy Klein (p) size
   ======================================== */

ul,
ol {
  font-size: clamp(18px, 1.74vw, 33px);
  line-height: 1.3;
  margin: 0 0 1rem 1.5rem;
  color: #111214;
}

li {
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  ul,
  ol {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.4;
  }
}

/* ========================================
   Emphasis & Links
   ======================================== */

strong,
b {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-weight: 500;
}

em,
i {
  font-style: italic;
}

a {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: all 300ms ease;
  cursor: pointer;
  color: #111214;
}

a:hover {
  color: #111214;
  text-decoration-thickness: 2px;
}

/* ========================================
   DEPRECATED CLASSES - DO NOT USE
   These are mapped to the 7 core styles above
   Use only for backwards compatibility during migration
   ======================================== */

/* Map old classes to new system - h1 equivalents */
.hero-title,
.text-display {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-size: clamp(56px, 6.94vw, 133px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #111214;
}

/* Map old classes to h2 */
.statement-text,
.text-headline-large,
.text-headline-medium {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-size: clamp(32px, 4.17vw, 80px);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #111214;
}

/* Map old classes to h3 */
.text-headline-small {
  font-family: 'Euclid Circular A Medium', sans-serif;
  font-size: clamp(20px, 2.78vw, 53px);
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #111214;
}

/* Map old classes to .p-big */
.copy-lg,
.text-body-large {
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(20px, 2.78vw, 53px);
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 1rem 0;
  color: #111214;
}

/* Map old classes to p */
.copy-sm,
.text-body,
.text-body-small {
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(18px, 1.74vw, 33px);
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 1rem 0;
  color: #111214;
}

/* Map old class to .text-marginal */
.copy-marginal {
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(12px, 0.94vw, 18px);
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
  color: #111214;
}

/* Responsive for deprecated classes */
@media (max-width: 768px) {
  .hero-title,
  .text-display {
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1.15;
  }

  .statement-text,
  .text-headline-large,
  .text-headline-medium {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.3;
  }

  .text-headline-small {
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.4;
  }

  .copy-lg,
  .text-body-large {
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.4;
  }

  .copy-sm,
  .text-body,
  .text-body-small {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.4;
  }

  .copy-marginal {
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.4;
  }
}

/* Text Highlighting (H2 variant - same style as p-big_highlighted) */
 .text-highlighted {
display: inline;
background: linear-gradient(0deg, var(--color-yellow) 30%, transparent 30%);
}