/* ==========================================================================
   typography.css
   Inhalt:
   - Globale Typografie-Grundlagen (Schriftfamilien, Headings, Fließtext)
   - Text-nahe Helper (Headline-Varianten, Subline, kleine Textstile)
   ========================================================================== */

/* ==========================================================================
   Base text
   ========================================================================== */

body {
  font-family: var(--font-sans);
  line-height: var(--line);
}

/* ==========================================================================
   Headings (global)
   ========================================================================== */

h1,
h2,
h3,
h4 {
  margin: 0;
}

h1 {
  line-height: 1.2;
  font-size: 3.4em;
  font-family: var(--font-serif);
}

h2 {
  font-size: 3.4em;
  line-height: 1.2;
  font-family: var(--font-serif);
}

h3 {
  font-size: 2.5em;
  line-height: 1.2;
  font-family: var(--font-serif);
}

h4 {
  font-size: 3vh;
  line-height: 1;
}

/* Heading size helpers */
.h2_small {
  font-size: 3em;
}

.h3_small {
  font-size: 2em;
}

/* ==========================================================================
   Paragraphs
   ========================================================================== */

p {
  margin: 0;
  font-size: 1.1em;
}

p + p {
  margin-top: 0.8em;
}

/* ==========================================================================
   Links (global)
   ========================================================================== */

a {
  text-decoration: none;
  width: fit-content;
  color: inherit;
}

a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ==========================================================================
   Headline helpers (hero + subpages)
   ========================================================================== */

.headline-extra h1 {
  margin: 0;
  font-size: 12vh;

  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0;

  font-weight: 400;
}

h1.headline-big {
  margin: 0;
  font-size: 16vh;

  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0;

  font-weight: 400;
  color: var(--color-white);
}

h1.headline-big .headline-left,
h1.headline-big .headline-right {
  display: inline-block;
}

.headline-left {
  padding-left: 0;
}

.headline-right {
  padding-left: 14vw;
}

.headline-strong {
  font-weight: 700;
}

.headline-big-subpage {
  font-size: 10vh;
  word-break: break-word;
  max-width: 106vh;
}

/* Variant: custom-font wrapper */
.custom-font .headline-big {
  font-size: 10vh;
  color: var(--color-black);
}

/* ==========================================================================
   Subline helpers
   ========================================================================== */

.header-subline {
  margin: 0;
  font-size: 3vh;
  max-width: 100vh;
  color: var(--color-black);
}

.header-subline-home {
  margin: 0;
  font-size: 3.4vh;
  max-width: 100vh;
  color: var(--color-white);
}

.custom-font-header-subline {
  font-size: 3vh;
  color: var(--color-white);
}

/* ==========================================================================
   Small text helpers
   ========================================================================== */

.reference-text {
  font-size: 12px;
  font-weight: 700;
}

.text-handlungsempfhelungen {
  font-size: 2.2vh;
}

/* ==========================================================================
   IDs / special cases
   ========================================================================== */

#video-title {
  font-size: 3.4em;
  font-family: var(--font-serif);
}