/* =========================================================
   FONTS
   TheSansOffice – einheitliche Font-Familie
   Regular (400) · Italic (400 italic) · Bold (700)
   ========================================================= */

@font-face {
  font-family: 'TheSansOffice';
  src: url('../fonts/TheSansOffice-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansOffice';
  src: url('../fonts/TheSansOffice-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansOffice';
  src: url('../fonts/TheSans-6_SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSans-6_SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansOffice';
  src: url('../fonts/TheSansOffice-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansOffice';
  src: url('../fonts/TheSansOffice-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansOffice-Bold';
  src: url('../fonts/TheSansOffice-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansOffice-Bold';
  src: url('../fonts/TheSansOffice-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansMono';
  src: url('../fonts/TheSansMono-W5Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSansMono';
  src: url('../fonts/TheSansMono-W5RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'TheSansMono';
  src: url('../fonts/TheSansMono-W7Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   TYPOGRAPHY SCALE
   Fluid sizing via clamp(MIN, FLUID, MAX).
   Negative letter-spacing on large type follows optical
   typesetting practice: tight at display, neutral at body.
   ========================================================= */

:root {
  --textfont: 'TheSansOffice', 'TheSans', sans-serif;
  --titlefont: 'TheSansOffice', 'TheSansOffice-Bold', 'TheSans', sans-serif;

  /* Display = identische Familie, Bold-Schnitt (700).
     Kein separater Display-Font mehr nötig. */
  --displayfont: var(--titlefont);
  --font-family-base: 'TheSansOffice', 'TheSans', sans-serif;
  --font-family-display: 'TheSansOffice', 'TheSans', sans-serif;

  /* ── Display (kinetic hero, text-reveal, pull quotes) ────────────
     clamp: 56px mobile → fluid → 96px desktop                    */
  --display-xl-fs: clamp(3.5rem, 1.75rem + 7.5vw, 6rem);
  --display-xl-lh: 1.03;
  --display-xl-ls: -0.035em;
  --display-xl-fw: 700;   /* TheSansOffice Bold */

  --display-l-fs: clamp(3rem, 1.5rem + 6.25vw, 5rem);
  --display-l-lh: 1.04;
  --display-l-ls: -0.030em;
  --display-l-fw: 700;    /* TheSansOffice Bold */

  /* ── Hero (page title, h-reel cards) ─────────────────────────────
     clamp: 40px mobile → fluid → 64px desktop                    */
  --hero-fs: clamp(2.5rem, 1.25rem + 5.25vw, 4rem);
  --hero-lh: 1.06;
  --hero-ls: -0.025em;
  --hero-fw: 700;    /* TheSansOffice Bold */

  /* ── Section headings ────────────────────────────────────────── */
  --h1-fs: clamp(2.5rem, 5vw, 4.5rem);
  --h1-lh: 1.08;
  --h1-ls: -0.025em;
  --h1-fw: 700;

  --h2-fs: clamp(2rem, 4vw, 3.5rem);
  --h2-lh: 1.05;
  --h2-ls: -0.03em;
  --h2-fw: 700;

  --h3-fs: clamp(1.5rem, 3vw, 2.5rem); 
  --h3-lh: 1.1;
  --h3-ls: -0.02em;
  --h3-fw: 700;

  --h4-fs: clamp(1.375rem, 0.75rem + 2.25vw, 2.5rem); /* 22→40px */
  --h4-lh: 1.14;
  --h4-ls: -0.014em;
  --h4-fw: 700;

  --h5-fs: clamp(1.25rem, 0.875rem + 1.25vw, 2rem);  /* 20→32px */
  --h5-lh: 1.20;
  --h5-ls: -0.010em;
  --h5-fw: 700;

  --h6-fs: clamp(1.125rem, 0.875rem + 0.75vw, 1.5rem); /* 18→24px */
  --h6-lh: 1.30;
  --h6-ls: -0.006em;
  --h6-fw: 700;

  /* ── Editorial lead ──────────────────────────────────────────────
     Visually distinct from body: larger, slightly looser          */
  --lead-fs: clamp(1.25rem, 0.875rem + 1vw, 1.5rem); /* 20→24px */
  --lead-lh: 1.50;
  --lead-ls: -0.003em;
  --lead-fw: 400;

  /* ── Body text ───────────────────────────────────────────────────
     19px is our fixed anchor — rem for accessibility scaling      */
  --body-fs: 1.1875rem;   /* 19px (Standard) */
  --body-lh: 1.45;         /* unitless: skaliert mit der a11y-Schriftgröße (px-Wert blieb bei großer Schrift zu eng) */
  --body-ls: normal;
  --body-fw: 400;

  --body-small-fs: 1.0625rem; /* 17px */
  --body-small-lh: 1.52;
  --body-small-ls: 0.003em;
  --body-small-fw: 400;

  /* ── Interface & Navigation ──────────────────────────────────── */
  --ui-fs: 1.0625rem;         /* 17px */
  --ui-lh: 1.41;
  --ui-ls: 0.003em;
  --ui-fw: 400;

  --nav-primary-fs: 0.9375rem; /* 15px */
  --nav-primary-lh: 1.33;
  --nav-primary-ls: 0.010em;
  --nav-primary-fw: 400;

  --nav-secondary-fs: 0.875rem; /* 14px */
  --nav-secondary-lh: 1.43;
  --nav-secondary-ls: 0.008em;
  --nav-secondary-fw: 400;

  /* ── Captions & Meta (Apple Newsroom / HIG Footnote Standard) ── */
  --figcaption-fs: 0.875rem;   /* 14px (Apple Newsroom / HIG Footnote Standard) */
  --figcaption-lh: 1.42857;    /* 20px Line-Height (perfekt im 4pt/8pt-Grid) */
  --figcaption-ls: 0.012em;    /* Offenes optisches Tracking für kleine Schriftgrade */
  --figcaption-fw: 400;        /* Deference: Regular statt lautes Semibold */

  --meta-fs: 0.8125rem;        /* 13px */
  --meta-lh: 1.40;
  --meta-ls: 0.012em;
  --meta-fw: 400;

  --overline-fs: 0.75rem;      /* 12px — uppercase, wide-tracked */
  --overline-lh: 1.33;
  --overline-ls: 0.10em;
  --overline-fw: 700;

  --legal-fs: 0.75rem;         /* 12px */
  --legal-lh: 1.40;
  --legal-ls: 0.008em;
  --legal-fw: 400;

  /* ── Font Weights ─────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semi:      600;   /* TheSans-6_SemiBold */
  --weight-bold:      700;
  --weight-extrabold: 700;
}


/* =========================================================
   BASE STYLES
   ========================================================= */

html {
  font-family: var(--textfont);
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "locl" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "locl" 1;
  -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "locl" 1;
  font-variant-numeric: oldstyle-nums;
  font-variant-ligatures: common-ligatures;
  overflow-x: clip; /* clip statt hidden: kein Scroll-Container -> position:sticky bleibt funktionsfähig */
  quotes: "„" "“" "‚" "‘";
}

q {
  quotes: "„" "“" "‚" "‘";
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  font-weight: var(--body-fw);
  color: var(--color-text-black);
  background-color: var(--color-page-background);
  text-wrap: pretty;
  overflow-wrap: break-word;
  -webkit-hyphens: none;
  hyphens: none;
  orphans: 3;
  widows: 3;
  overflow-x: clip; /* clip statt hidden: kein Scroll-Container -> position:sticky bleibt funktionsfähig */
}

/* Shared heading base */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--textfont);
  font-weight: 700;
  color: var(--color-text-black);
  margin-top: 0;
  margin-bottom: 0;
  text-wrap: balance;
  word-break: keep-all;
}

b, strong { font-weight: 700; }
i, em     { font-style: italic; }


/* =========================================================
   TYPOGRAPHIC CLASSES
   ========================================================= */

/* Display — eigener Display-Schnitt (TheSans), nicht der Fließtext-Schnitt */
.display-xl {
  font-family: var(--displayfont);
  font-size: var(--display-xl-fs);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-ls);
  font-weight: var(--display-xl-fw);
}

.display-l {
  font-family: var(--displayfont);
  font-size: var(--display-l-fs);
  line-height: var(--display-l-lh);
  letter-spacing: var(--display-l-ls);
  font-weight: var(--display-l-fw);
}

.hero-headline {
  font-family: var(--displayfont);
  font-size: var(--hero-fs);
  line-height: var(--hero-lh);
  letter-spacing: var(--hero-ls);
  font-weight: var(--hero-fw);
}

/* Headings */
h1, .h1 {
  font-size: var(--h1-fs);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  font-weight: var(--h1-fw);
}

h2, .h2 {
  font-size: var(--h2-fs);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  font-weight: var(--h2-fw);
}

h3, .h3 {
  font-size: var(--h3-fs);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  font-weight: var(--h3-fw);
}

h4, .h4 {
  font-size: var(--h4-fs);
  line-height: var(--h4-lh);
  letter-spacing: var(--h4-ls);
  font-weight: var(--h4-fw);
}

h5, .h5 {
  font-size: var(--h5-fs);
  line-height: var(--h5-lh);
  letter-spacing: var(--h5-ls);
  font-weight: var(--h5-fw);
}

h6, .h6 {
  font-size: var(--h6-fs);
  line-height: var(--h6-lh);
  letter-spacing: var(--h6-ls);
  font-weight: var(--h6-fw);
}

/* Editorial */
.lead {
  font-size: var(--lead-fs);
  line-height: var(--lead-lh);
  letter-spacing: var(--lead-ls);
  font-weight: var(--lead-fw);
}

.body-small {
  font-size: var(--body-small-fs);
  line-height: var(--body-small-lh);
  letter-spacing: var(--body-small-ls);
  font-weight: var(--body-small-fw);
}

/* Interface */
.ui {
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
  letter-spacing: var(--ui-ls);
  font-weight: var(--ui-fw);
}

.nav-primary {
  font-size: var(--nav-primary-fs);
  line-height: var(--nav-primary-lh);
  letter-spacing: var(--nav-primary-ls);
  font-weight: var(--nav-primary-fw);
}

.nav-secondary {
  font-size: var(--nav-secondary-fs);
  line-height: var(--nav-secondary-lh);
  letter-spacing: var(--nav-secondary-ls);
  font-weight: var(--nav-secondary-fw);
}

/* Captions & Meta */
figcaption,
.figcaption {
  font-size: var(--figcaption-fs);
  line-height: var(--figcaption-lh);
  letter-spacing: var(--figcaption-ls);
  font-weight: var(--figcaption-fw);
  color: var(--text-color, #1d1d1f);
  text-align: center;
  text-wrap: pretty;
  max-width: 653px; /* Bündig mit der Lesespalte (.article__body) */
  margin-inline: auto;
  margin-top: var(--space-12, 0.75rem);
}

figure {
  margin: 0;
}

.meta {
  font-size: var(--meta-fs);
  line-height: var(--meta-lh);
  letter-spacing: var(--meta-ls);
  font-weight: var(--meta-fw);
}

.overline {
  font-size: var(--overline-fs);
  line-height: var(--overline-lh);
  letter-spacing: var(--overline-ls);
  font-weight: var(--overline-fw);
  text-transform: uppercase;
}

.legal {
  font-size: var(--legal-fs);
  line-height: var(--legal-lh);
  letter-spacing: var(--legal-ls);
  font-weight: var(--legal-fw);
}


/* =========================================================
   GLOBAL SECTION HEADER SYSTEM
   Einheitliche Typografie für alle Section-Heads.
   Ersetzt alle section-spezifischen Eyebrow/Title/Lead-Klassen.
   ========================================================= */

/* Wrapper: zentriert die Headline-Gruppe, steuert Abstand nach unten */
.section-head {
  text-align: center;
  margin-bottom: clamp(var(--space-56), 8vh, var(--space-80));
}







/* =========================================================
   STYLEGUIDE UTILITY CLASSES
   ========================================================= */

.section-eyebrow,
.section-head .section-eyebrow {
  display: block;
  max-width: none;
  margin-inline: auto;
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem) !important; /* 12px–13px */
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
  letter-spacing: 0.10em !important;
  color: var(--color-kollegium, var(--accent-color, #a60032));
  margin-top: 0;
  margin-bottom: clamp(0.375rem, 0.5vw, 0.5rem) !important; /* 6px–8px */
}

.section-headline,
.section-head .section-headline {
  font-family: 'TheSansOffice', 'TheSansOffice-Bold', 'TheSans', sans-serif !important;
  font-size: clamp(2.125rem, 3.8vw, 3.25rem) !important; 
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.005em !important;
  color: var(--text-color, #1d1d1f);
  text-wrap: balance;
  max-width: 26ch;
  margin-top: 0;
  margin-inline: auto;
  margin-bottom: clamp(0.5rem, 0.75vw, 0.625rem) !important; /* 8px–10px */
}

.section-lead,
.section-head .section-lead {
  max-width: 48ch;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0 !important;
  font-family: var(--textfont, 'TheSansOffice', 'TheSans', sans-serif) !important;
  font-size: clamp(1.125rem, 1.25vw + 0.35rem, 1.3125rem) !important; /* 18px–21px */
  line-height: 1.42 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-muted, #6e6e73);
  text-wrap: pretty;
  text-align: center;
}

/* Modifier für linksbündige Ausrichtung (z.B. im Parallax) */
.section-lead--left {
  margin-inline: 0;
  text-align: left;
}

.section-subheadline {
  font-size: clamp(1.375rem, 1rem + 1.5vw, 1.75rem); /* 22px auf iPhone → 28px Desktop */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text-black);
  margin-top: clamp(2.5rem, 4vw, 3.5rem); /* Deutlich mehr Abstand nach oben */
  margin-bottom: 1rem; /* Enger an den nachfolgenden Text gebunden */
  text-wrap: pretty;
}


/* =========================================================
   PROSE RHYTHM
   ========================================================= */

body p {
  margin-block: 0 1em;
  max-width: 653px; /* Newsroom Standard für perfekte Lesbarkeit */
}

body p:last-child {
  margin-block-end: 0;
}

/* Globales Apple-Raster (8px) für direkte Verbindungen von Text/Überschrift zu Aufzählungen */
p:has(+ ul),
p:has(+ ol) {
  margin-bottom: 0;
}

p + ul,
p + ol,
.section-subheadline + ul,
.section-subheadline + ol,
h2 + ul,
h2 + ol,
h3 + ul,
h3 + ol {
  margin-top: var(--space-8, 0.5rem) !important;
}

/* Premium Style Article Lists */
ul.article-list {
  margin-block: 1.5em 2em;
  max-width: 653px;
}

ul.article-list li {
  margin-bottom: 0.75em;
}

/* Animated accent links in running text */
p a,
.article-list li a,
.article__body a,
.article__body li a,
.quote-author a,
a.text-accent .anim-text {
  color: var(--accent-color);
  text-decoration: none;
  background-image: linear-gradient(var(--accent-color), var(--accent-color));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

p a:hover,
.article-list li a:hover,
.article__body a:hover,
.article__body li a:hover,
.quote-author a:hover,
a.text-accent:hover .anim-text {
  background-size: 100% 1px;
}

/* Hinweis: Die Accessibility-Overrides für Schriftgröße, Zeilenabstand und
   Dyslexie-Modus liegen zentral in
   partials/global/accessibility/accessibility.css. */


/* ── Orientation lock: fluid fonts beim Drehen fixieren ───────────────────
   vw wächst beim Rotieren ins Querformat → Schriften skalieren unerwünscht.
   Fix: vw → vh tauschen. In Landscape = vh = kürzere Seite = Portrait-vw.
   Gilt nur für Touch-Geräte (pointer: coarse = iPhone/iPad, kein Desktop).
   ─────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (pointer: coarse) {
  :root {
    --display-xl-fs: clamp(3.5rem,  1.75rem + 7.5vh,  6rem);
    --display-l-fs:  clamp(3rem,    1.5rem  + 6.25vh, 5rem);
    --hero-fs:       clamp(2.5rem,  1.25rem + 5.25vh, 4rem);
    --h1-fs:         clamp(2.25rem, 1.25rem + 4.25vh, 4rem);
    --h2-fs:         clamp(1.875rem, 1rem   + 3.75vh, 3.5rem);
    --h3-fs:         clamp(1.625rem, 0.875rem + 3vh,  3rem);
    --h4-fs:         clamp(1.375rem, 0.75rem + 2.25vh, 2.5rem);
    --h5-fs:         clamp(1.25rem,  0.875rem + 1.25vh, 2rem);
    --h6-fs:         clamp(1.125rem, 0.875rem + 0.75vh, 1.5rem);
    --lead-fs:       clamp(1.25rem,  0.875rem + 1vh,  1.5rem);
  }

  .section-headline,
  .section-head .section-headline {
    font-size: clamp(1.875rem, 1rem + 3.75vh, 3.5rem) !important;
  }

  .section-lead,
  .section-head .section-lead {
    font-size: clamp(1.25rem, 1.5vh, 1.5rem) !important;
  }
}

/* ── iPhone Portrait View: Keine Silbentrennung für data-title & Headings ──
   Verhindert unschöne Trennstriche bei Titeln auf dem iPhone im Hochformat.
   Gilt nur für Smartphones (max-width: 500px) in Portrait-Ausrichtung.
   ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 500px) and (orientation: portrait) {
  [data-title],
  [data-title] *,
  .hero-dark-title,
  .hero-editorial__title,
  .hero-editorial-title,
  .hero-video-title,
  .hero-index__title,
  .hero-title,
  .section-headline,
  .section-title,
  .section-subheadline,
  .gallery-aktuelles-card__title,
  .podcast-episode__title,
  .js-hero-title,
  .js-title,
  .js-gallery-dynamisch-title {
    -webkit-hyphens: none !important;
    hyphens: none !important;
    word-break: normal !important;
  }
}