/* =========================================================
   DESIGN TOKENS & GLOBAL FORMATTING
   ========================================================= */

:root {
  /* ── Space Scale (8-grid) ─────────────────────────────────── */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-56:  3.5rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-128: 8rem;
  --space-160: 10rem;

  /* ── Container Widths ─────────────────────────────────────── */
  --container-1920: 120rem;
  --container-1776: 111rem;
  --container-1440: 90rem;
  --container-1200: 75rem;
  --container-1024: 64rem;
  --container-980:  61.25rem;
  --container-736:  46rem;
  --container-683:  683px;
  --container-653:  653px;
  --container-540:  33.75rem;

  /* ── Global Layout ────────────────────────────────────────── */
  --nav-height:                44px;
  --wrapper-width:             100%;
  /* Fluid: 48px on mobile up to 80px on desktop (Apple HIG 80pt canonical section padding) */
  --section-padding-block:     clamp(3rem, 5vw, 5rem);
  --section-padding-inline: clamp(20px, 2rem, 44px);
  --container-padding-block:   0;
  --container-padding-inline:  var(--space-24);

  /* ── Border Radius System ──────────────────────────────────
     Striktes 3-Stufen-System:
     - 24px: Große Karten, Hero-Cards, Bilder
     - 16px: Kleinere Karten, Dialoge & Modals
     - 999px: Buttons & Tags / Badges / Pills                 */
  --border-radius-lg: 24px;       /* große Karten */
  --border-radius-md: 16px;       /* kleinere Karten und Dialoge */
  --border-radius-sm: 12px;       /* kompakte Inset-Elemente */
  --border-radius: var(--border-radius-lg, 24px); /* Default für große Karten */
  --border-radius-card: 24px;     /* Große Karten */
  --border-radius-dialog: 16px;   /* Dialoge & Modals */
  --border-radius-pill: 999px;    /* Buttons und Tags */

  /* ── Elevation / Shadow System (um ~30 % reduziert) ──────
     6 levels from hairline to dramatic.
     Layered shadows mit weicherem, modernerem Kontrast.     */
  --shadow-hairline: 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.025);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.055),
                0 1px 3px  rgba(0, 0, 0, 0.035);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.07),
                0 2px 8px  rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.09),
                0 4px 12px rgba(0, 0, 0, 0.045);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.12),
                0 6px 24px rgba(0, 0, 0, 0.07);

  /* Card/Gallery image elevation — referenced by gallery-bildergalerie,
     gallery-horizontal, testimonial, kollegium */
  --shadow-card: var(--shadow-lg);

  /* ── Easing Curves ────────────────────────────────────────
     Named after their perceptual character.                  */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* snappy deceleration */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);       /* balanced, Material-style */
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);      /* gentle deceleration */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1); /* subtle overshoot */

  /* ── Duration Scale ───────────────────────────────────────
     Use tokens to keep animation rhythm consistent.          */
  --dur-instant: 0.15s;   /* micro-interactions, highlights */
  --dur-fast:    0.25s;   /* hovers, focus rings */
  --dur-base:    0.40s;   /* standard transitions */
  --dur-slow:    0.70s;   /* panel slides, overlays */
  --dur-xslow:   1.00s;   /* scroll-linked reveals */
  --dur-reveal:  1.20s;   /* hero elements, cinematic */

  /* ── Kompatibilitäts-Aliase (in Sektionen referenziert) ───── */
  --text-base:    1rem;      /* 16px */
  --text-lg:      1.125rem;  /* 18px */
  --leading-read: 1.6;       /* komfortable Lese-Zeilenhöhe */
}

/* ── iPad Pro 12.9" & 13" – Landscape (≈ 1366 px) ─────────────────────
   Premium HIG empfiehlt hier mindestens 44 pt seitlichen Rand.
   44px entspricht genau 1 Touch-Target-Einheit und ist Premiums
   Standardwert für große Tablet-Layouts im Querformat.
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1376px) and (orientation: landscape) {
  :root {
    --section-padding-block:  var(--space-80, 5rem);
    --section-padding-inline: 44px; /* Premium HIG Standard: 44 pt / px */
  }
}

/* ── iPad Pro 12.9" & 13" – Portrait (≈ 1024 px) ───────────────────────
   Im Portrait mit 1024 px Breite passt 32 px gut: genug Luft,
   aber der Inhalt nutzt die Breite effizient.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 835px) and (orientation: portrait) {
  :root {
    --section-padding-block:  clamp(3.5rem, 4.5vw, 4.5rem);
    --section-padding-inline: clamp(24px, 2rem, 44px);
  }
}

/* ── iPad 11" & mittlere Tablets – Landscape (834–1024 px) ─────────────
   Bei schmaleren Querformat-iPads sind 32 px ein gutes Mittelmaß.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 835px) and (orientation: landscape) {
  :root {
    --section-padding-block:  clamp(3.5rem, 4.5vw, 4.5rem);
    --section-padding-inline: clamp(24px, 2rem, 44px);
  }
}

/* ── iPad mini & kleine Tablets – Portrait (768–834 px) ────────────────
   Schmale Portrait-Ansicht: 24 px minimale aber ausreichende Luft.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --section-padding-block:  clamp(3rem, 4vw, 4rem);
    --section-padding-inline: clamp(20px, 1.5rem, 44px);
  }
}

/* ── Mobile / iPhone (≤ 768 px) ────────────────────────────────────────
   Phones: 20 px entspricht Premiums iOS-Standard-Seitenrand.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-padding-block:         clamp(2.5rem, 4vw, 3rem); /* 40px → 48px */
    --section-padding-inline:        clamp(20px, 1.5rem, 44px);
    --container-padding-inline:      20px;
  }
}


/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background-color: var(--color-page-background);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: clip; /* clip statt hidden: kein Scroll-Container -> position:sticky bleibt funktionsfähig */
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Bild- und Lightbox-Links dürfen niemals einen roten Fokus-Rahmen erhalten (z. B. nach Rückkehr aus Fancybox) */
.article__fullbleed-link:focus,
.article__fullbleed-link:focus-visible,
.article__fullbleed-img:focus,
.article__fullbleed-img:focus-visible,
.image-reveal__link:focus,
.image-reveal__link:focus-visible,
.image-reveal__frame:focus,
.image-reveal__frame:focus-visible,
.bento-gallery__link:focus,
.bento-gallery__link:focus-visible,
[data-fancybox]:focus,
[data-fancybox]:focus-visible {
  outline: none !important;
}

/* Controls Touch & Selection Hygiene (Emil Kowalski mobile-native) */
button, [role="button"], .btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Main Wrapper */
main {
  width: min(100%, var(--wrapper-width));
  margin-inline: auto;
  position: relative;
  overflow: visible;
}

main:focus,
main:focus-visible,
#main-content:focus,
#main-content:focus-visible,
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none !important;
}

/* Standard-Container: zentrierte Inhaltsbreite (Default 1440px) */
.container {
  width: 100%;
  max-width: var(--container-1200);
  margin-inline: auto;
}

/* Container */
.container-1920,
.container-1776,

.container-1440,
.container-1200,
.container-1024,
.container-980,
.container-736,
.container-683,
.container-653,
.container-540 {
  width: min(100%, var(--container-width));
  margin-inline: var(--container-margin-inline, auto);
  padding-block: var(--container-padding-block);
  padding-inline: var(--container-padding-inline);
}

/* Prevent double padding when containers are used inside sections */
section > [class^="container-"] {
  padding-inline: 0;
}

/* Prevent nested containers from adding extra horizontal padding */
[class^="container-"] [class^="container-"] {
  padding-inline: 0;
}

.container-1920 { --container-width: var(--container-1920); }
.container-1776 { --container-width: 111rem; }
.container-1440 { --container-width: var(--container-1440); }
.container-1200 { --container-width: var(--container-1200); }
.container-1024 { --container-width: var(--container-1024); }
.container-980  { --container-width: var(--container-980); }
.container-736  { --container-width: var(--container-736); }
.container-683  { --container-width: var(--container-683); }
.container-653  { --container-width: var(--container-653); }
.container-540  { --container-width: var(--container-540); }

/* Container Position */
.left { --container-margin-inline: 0 auto; }
.right { --container-margin-inline: auto 0; }

/* Layout Classes */
.section, section:not(.hero):not(.hero-editorial) {
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
  padding-left: calc(var(--section-padding-inline) + env(safe-area-inset-left));
  padding-right: calc(var(--section-padding-inline) + env(safe-area-inset-right));
}

/* Premium‑style: remove any top/bottom separators for the hero section */
.cta {
  border-top: none;
  border-bottom: none;
}
.cta::before,
.cta::after {
  border: none;
}

section {
  width: 100%;
  position: relative;
}

/* Standard-Inhaltsbegrenzung für alle Sektionen nach der Hero-Sektion */
section:not(.hero) > :not(.gallery-container):not(.hero-editorial__title):not(.hero-editorial__media):not(.hero-editorial__marquee) {
  max-width: var(--container-1200);
  margin-inline: var(--container-margin-inline, auto);
}

section:not(.hero) > .container-1920 {
  max-width: var(--container-1920);
}

section:not(.hero) > .container-1776 {
  max-width: var(--container-1776);
}

/* Sonderfall: Galerie soll im 1440px Grid sitzen, aber der Swiper darf ggf. rausragen */
.gallery-container {
  max-width: var(--container-1200);
  margin-inline: auto;
}

/* Explizite max-width-Overrides für breite Container */
.container-1920 { max-width: var(--container-1920); margin-inline: auto; width: 100%; }
.container-1776 { max-width: var(--container-1776); margin-inline: auto; width: 100%; }
.container-1440 { max-width: var(--container-1440); margin-inline: auto; width: 100%; }
.container-1200 { max-width: var(--container-1200); margin-inline: auto; width: 100%; }

/* Media Base */
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Verhindert Markieren und Draggen von Bildern global */
img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Media Grid Utility */
.media-grid {
  display: grid !important;
  gap: var(--space-40);
}

/* Utility: Image Shadows */
.image-shadow {
  box-shadow: var(--shadow-lg);
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Utility: Hidden */
.hidden {
  display: none !important;
}

/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* Visibility Classes for Animations */
.opacity-0 {
  opacity: 0;
}

/* Scroll Lock (for modals/menus) */
.no-scroll {
  overflow: hidden !important;
}

/* Kein globales scroll-behavior: smooth auf html, da dies bei Seitenwechseln,
   Weiterleitungen und dynamischem Nachladen dazu führt, dass Browser in der Mitte
   hängenbleiben. Gezielte Interaktionen (z. B. Hero-Pfeil) steuern 'smooth' direkt per JS. */
html {
  scroll-behavior: auto !important;
}

/* Scroll-Reveal (global, gesteuert via assets/js/global.js) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 550ms cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Newsroom Stagger Reveal für .section-head & CTA
   Überschreibt die Standard-Reveal-Logik für Headline-Gruppen
   -------------------------------------------------------------------------- */
.section-head.reveal,
.cta__content.reveal,
.hero-dark-content.reveal,
.hero-video-content.reveal {
  /* Parent steuert nur den Trigger, bewegt sich aber nicht selbst als starrer Block */
  opacity: 1;
  transform: none;
  transition: none;
}

.section-head.reveal .section-eyebrow,
.section-head.reveal .section-headline,
.section-head.reveal .section-lead,
.section-head.reveal .cta__actions,
.cta__content.reveal .section-eyebrow,
.cta__content.reveal .section-headline,
.cta__content.reveal .section-lead,
.cta__content.reveal .cta__actions,
.hero-dark-content.reveal .hero-dark-kicker,
.hero-dark-content.reveal .hero-dark-title,
.hero-dark-content.reveal .hero-dark-lead,
.hero-dark-content.reveal .hero-dark-cue,
.hero-video-content.reveal .hero-video-kicker,
.hero-video-content.reveal .hero-video-title,
.hero-video-content.reveal .hero-video-lead,
.hero-video-content.reveal .hero-video-cue {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* Eyebrow: Startet als erstes */
.section-head.reveal.is-visible .section-eyebrow,
.cta__content.reveal.is-visible .section-eyebrow,
.hero-dark-content.reveal.is-visible .hero-dark-kicker,
.hero-video-content.reveal.is-visible .hero-video-kicker {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1) 0ms,
              transform 360ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
}

/* Title: Zieht leicht verzögert nach */
.section-head.reveal.is-visible .section-headline,
.cta__content.reveal.is-visible .section-headline,
.hero-dark-content.reveal.is-visible .hero-dark-title,
.hero-video-content.reveal.is-visible .hero-video-title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) 35ms,
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 35ms;
}

/* Lead: Kommt als Letztes rein */
.section-head.reveal.is-visible .section-lead,
.cta__content.reveal.is-visible .section-lead,
.hero-dark-content.reveal.is-visible .hero-dark-lead,
.hero-video-content.reveal.is-visible .hero-video-lead {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) 70ms,
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 70ms;
}

/* CTA Buttons: Letzter Step */
.section-head.reveal.is-visible .cta__actions,
.cta__content.reveal.is-visible .cta__actions,
.hero-dark-content.reveal.is-visible .hero-dark-cue,
.hero-video-content.reveal.is-visible .hero-video-cue {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) 100ms,
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 100ms;
}

@media (prefers-reduced-motion: reduce) {
  .section-head.reveal .section-eyebrow,
  .section-head.reveal .section-headline,
  .section-head.reveal .section-lead,
  .section-head.reveal .cta__actions,
  .cta__content.reveal .section-eyebrow,
  .cta__content.reveal .section-headline,
  .cta__content.reveal .section-lead,
  .cta__content.reveal .cta__actions,
  .hero-dark-content.reveal .hero-dark-kicker,
  .hero-dark-content.reveal .hero-dark-title,
  .hero-dark-content.reveal .hero-dark-lead,
  .hero-dark-content.reveal .hero-dark-cue,
  .hero-video-content.reveal .hero-video-kicker,
  .hero-video-content.reveal .hero-video-title,
  .hero-video-content.reveal .hero-video-lead,
  .hero-video-content.reveal .hero-video-cue {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================
   FANCYBOX Z-INDEX OVERRIDE
   Navigation liegt auf z-index: 1100 — Fancybox muss drüber.
   Fancybox-Standardwert ist 1050, daher überschreiben.
   ========================================================= */
:root {
  --fancybox-zIndex: 1200;
}
.fancybox__container {
  z-index: 1200 !important;
}
.fancybox__backdrop {
  z-index: 1201 !important;
}
.fancybox__carousel {
  z-index: 1202 !important;
}
.fancybox__toolbar {
  z-index: 1203 !important;
}
.fancybox__nav {
  z-index: 1203 !important;
}
.fancybox__caption,
.f-caption,
.fancybox-caption {
  text-align: center !important;
}


/* =========================================================
   FANCYBOX MOBILE — Touch Targets & Icon Sizes
   Premium HIG: Mindest-Touch-Target = 44 × 44 pt.
   Fancybox-Buttons sind auf Mobile oft zu klein.
   ========================================================= */
@media (max-width: 768px) {

  /* Toolbar-Buttons: Mindestgröße 44 × 44px */
  .fancybox__toolbar .f-button,
  .fancybox__nav .f-button {
    width: 44px  !important;
    height: 44px !important;
    min-width: 44px  !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* SVG-Icons innerhalb der Buttons */
  .fancybox__toolbar .f-button svg,
  .fancybox__nav .f-button svg {
    width: 22px  !important;
    height: 22px !important;
  }

  /* Toolbar selbst: volle Breite, sichtbar bleiben */
  .fancybox__toolbar {
    padding: 4px 8px !important;
  }

  /* Pfeile links/rechts: gut greifbar positionieren */
  .fancybox__nav {
    padding: 0 4px !important;
  }
}
/* ---------------------------------------------------------
 *  Button‑Basis und Varianten (CTA)
 * --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.55rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--border-radius-pill, 999px);
  font-family: var(--textfont);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background: var(--accent-color);
  min-width: 44px;   /* Premium minimum tap target */
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1) !important,
              background-color 160ms ease !important,
              border-color 160ms ease !important,
              box-shadow 160ms ease !important;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px) !important;
  }
}
.btn:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}
.btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* Primary‑Button (Kollegium‑Primary) — Marken-Bordeaux */
.btn--kollegium-primary {
  background: var(--accent-color);
  color: #fff;
}
.btn--kollegium-primary:hover,
.btn--kollegium-primary:focus-visible {
  background: var(--accent-color-dark);
}

/* Secondary‑Button (Kollegium‑Secondary) & alle Buttons ohne rote Füllung: immer transparent, niemals weiß */
.btn--kollegium-secondary,
.btn:not(.btn--kollegium-primary):not([class*="primary"]) {
  background: transparent !important;
  background-color: transparent !important;
}
.btn--kollegium-secondary {
  border: 1.5px solid var(--accent-color);
  color: var(--accent-color);
}
.btn--kollegium-secondary:hover,
.btn--kollegium-secondary:focus,
.btn--kollegium-secondary:focus-visible,
.btn--kollegium-secondary:active,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):hover,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):focus,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):focus-visible,
.btn:not(.btn--kollegium-primary):not([class*="primary"]):active {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Pillen & Kicker: reine Füllung (Säulenfarben oder Glasmorphism), kein 3D-Effekt, kein Rand ── */
.hero-dark-kicker,
.hero-video-kicker,
.tag-der-offenen-tuer__kicker {
  border: none !important;
  box-shadow: none !important;
}

  /* Responsive: iPhone button sizing matching Tag der offenen Tür */
@media (max-width: 768px) {
  .btn:not(.w-full) {
    width: auto !important;
    min-width: 140px !important;
    max-width: 190px !important;
    padding-block: 0.5rem !important;
    padding-inline: 1.15rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
    margin-inline: auto;
  }

  .cta__actions .btn:not(.w-full) {
    min-width: 152px !important;
    text-align: center !important;
  }
}


/* ── Orientation lock: alle Partial-Schriftgrößen beim Drehen fixieren ────
   vw wächst beim Rotieren → Schriften skalieren. Fix: vw → vh.
   In Landscape = vh = kürzere Seite = Portrait-vw. Nur Touch-Geräte.
   Globale Variablen & section-headline/lead: siehe 02-typography.css.
   ─────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (pointer: coarse) {

  /* tag-der-offenen-tuer */
  .tag-der-offenen-tuer__lead,
  .tag-der-offenen-tuer__details      { font-size: clamp(1.125rem, 1.5vh, 1.3125rem); }
  .tag-der-offenen-tuer__value        { font-size: clamp(2.5rem, 5vh, 4rem); }

  /* parallax-text */
  .parallax-lead           { font-size: clamp(1.125rem, 1.5vh, 1.3125rem); }

  /* faq */
  .accordion__trigger      { font-size: clamp(1.125rem, 1.5vh, 1.375rem); }

  /* unsere-schule-in-zahlen */
  .unsere-schule-in-zahlen__value-wrap { font-size: clamp(2.5rem, 4vh, 3rem); }

  /* auszeichnungen */
  .auszeichnungen-item__title { font-size: clamp(1.125rem, 1.5vh, 1.375rem); }

  /* links */
  .links__text             { font-size: clamp(1.125rem, 1.5vh, 1.375rem); }

  /* testimonial */
  .testimonial-card__text  { font-size: clamp(1.1875rem, 2.5vh, 1.5rem); }

  /* kollegium */
  .kollegium-card__name    { font-size: clamp(1.25rem, 1rem + 0.8vh, 1.5625rem); }

  /* hero-dark */
  .hero-dark-title         { font-size: clamp(2.5rem, 5vh + 1rem, 5.5rem); }
  .hero-dark-lead          { font-size: clamp(1.125rem, 1.5vh, 1.5rem); }

  /* gallery-fan marquee */
  .gallery-fan__marquee-track span { font-size: clamp(3.5rem, 12vh, 16rem); }
}