/* ================================================================
    DAS PYROFORUM 2026 — style.css
    Design: Navy-Slate + Crimson Red (Stahl & Feuer)
    Architektur: Mobile-First · BEM · oklch() · CSS-Nesting
    WCAG 2.1 AA · Container Queries · Media Queries am Ende
   ================================================================ */

/* ================================================================
    1. LOKALE SCHRIFTEN (@font-face)
    Fonts lokal hosten → DSGVO-konform, kein externer Request.
    font-display:swap verhindert unsichtbaren Text (FOIT).
    Download-Links am Ende dieser Datei.
   ================================================================ */
@font-face {
  font-family:'Barlow Condensed';
  src:url('fonts/Barlow_Condensed/BarlowCondensed-Black.ttf') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Barlow Condensed';
  src:url('fonts/Barlow_Condensed/BarlowCondensed-Bold.ttf') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Barlow Condensed';
  src:url('fonts/Barlow_Condensed/BarlowCondensed-Regular.ttf') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Source Sans 3';
  src:url('fonts/Source_Sans_3/SourceSans3-300.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Source Sans 3';
  src:url('fonts/Source_Sans_3/SourceSans3-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Source Sans 3';
  src:url('fonts/Source_Sans_3/SourceSans3-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ================================================================
    2. CSS-VARIABLEN
    Farben in oklch() für konsistente barrierefreie Kontraste.
    Keine Spaces zwischen Variablenname und Wert.
   ================================================================ */
:root {
  /* ── Hintergründe: Tiefes Navy-Slate ── */
  --bg-deep:oklch(9% 0.015 240);
  --bg-base:oklch(11% 0.018 240);
  --bg-raised:oklch(14% 0.02 240);
  --bg-card:oklch(16% 0.022 240);
  --bg-card-h:oklch(19% 0.024 240);
  --bg-light:oklch(96% 0.005 240);
  --bg-light-alt:oklch(93% 0.008 240);

  /* ── Rahmen ── */
  --border:oklch(22% 0.025 240);
  --border-light:oklch(28% 0.028 240);
  --border-h:oklch(38% 0.04 240);
  --border-on-light:oklch(82% 0.015 240);

  /* ── Akzent: Tiefrot / Scharlach ── */
  --red:oklch(46% 0.2 20);
  --red-dark:oklch(36% 0.18 20);
  --red-light:oklch(58% 0.2 20);
  --red-pale:oklch(46% 0.2 20 / 0.10);
  --red-glow:oklch(46% 0.2 20 / 0.28);

  /* ── Schriftfarben (dunkel) ── */
  --text:oklch(92% 0.01 240);
  --text-mid:oklch(88.175% 0.00185 249.079);
  --text-dim:oklch(88.837% 0.0001 271.152);
  --text-on-light:oklch(14% 0.02 240);
  --text-on-light-mid:oklch(38% 0.02 240);

  /* ── Typografie ── */
  --ff-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-body:'Source Sans 3', 'Helvetica Neue', sans-serif;

  /* ── Fluid-Schriftgrößen nach utopia.fyi ── */
  --fs-xs:clamp(0.72rem, 0.68rem + 0.18vw, 0.8rem);
  --fs-sm:clamp(0.85rem, 0.8rem + 0.22vw, 0.94rem);
  --fs-base:clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --fs-md:clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-lg:clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --fs-xl:clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
  --fs-hero:clamp(3rem, 2rem + 5vw, 6.5rem);

  /* ── Abstände ── */
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:1.75rem;
  --space-lg:3rem;
  --space-xl:5rem;
  --space-2xl:8rem;

  /* ── Layout ── */
  --nav-h:68px;
  --max-w:1160px;

  /* ── Radien (konsistent, kein Mix) ── */
  --r-sm:4px;
  --r-md:8px;
  --r-lg:14px;

  /* ── Animationen ── */
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:cubic-bezier(0.4, 0, 0.2, 1);
  --fast:0.18s var(--ease-io);
  --med:0.36s var(--ease);
  --slow:0.65s var(--ease);
}

/* ================================================================
    3. RESET & BOX-MODEL
   ================================================================ */
*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html { scroll-behavior:smooth; }

body {
  background:var(--bg-base);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:var(--fs-base);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

img { display:block; max-width:100%; height:auto; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }
button { border:none; background:none; font-family:inherit; cursor:pointer; }

/* ================================================================
    4. BARRIEREFREIHEIT
   ================================================================ */

/* Skip-Link: sichtbar bei Fokus */
.skip-link {
  position:absolute;
  top:-100%;
  left:var(--space-sm);
  padding:0.5rem 1.25rem;
  background:var(--red);
  color:#fff;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:var(--fs-sm);
  border-radius:var(--r-sm);
  z-index:9999;
  transition:top 0.2s var(--ease-io);

  &:focus { top:var(--space-sm); }
}

/* Focus-Ring für alle interaktiven Elemente */
:focus-visible {
  outline:2px solid var(--red-light);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Screenreader-only */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ================================================================
    5. SCROLL REVEAL ANIMATIONEN
    Elemente starten unsichtbar und erscheinen beim Einscrollen.
   ================================================================ */
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--slow), transform var(--slow);

  &.is-visible {
    opacity:1;
    transform:none;
  }
}

/* Kinder einer .stagger-Liste erscheinen zeitversetzt */
.stagger > * {
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0s; }
.stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.1s; }
.stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.2s; }
.stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.3s; }
.stagger.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.4s; }
.stagger.is-visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.5s; }
.stagger.is-visible > *:nth-child(7) { opacity:1; transform:none; transition-delay:0.6s; }

/* ================================================================
    6. BUTTONS
   ================================================================ */
.btn {
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-family:var(--ff-display);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.72rem 1.6rem;
  border-radius:var(--r-sm);
  border:1.5px solid transparent;
  transition:var(--fast);
  white-space:nowrap;
}

/* Primär: Rot gefüllt */
.btn--primary {
  background:var(--red);
  color:#fff;
  border-color:var(--red);

  &:hover, &:focus-visible {
    background:var(--red-dark);
    box-shadow:0 6px 20px var(--red-glow);
  }
}

/* Ghost: transparenter Rahmen */
.btn--ghost {
  background:transparent;
  color:var(--text);
  border-color:var(--border-h);

  &:hover, &:focus-visible {
    border-color:var(--red);
    color:var(--red-light);
  }
}

/* Ghost auf hellem Hintergrund */
.btn--ghost-dark {
  background:transparent;
  color:var(--text-on-light);
  border-color:var(--border-on-light);

  &:hover, &:focus-visible {
    border-color:var(--red);
    color:var(--red);
  }
}

/* Größere Button-Variante */
.btn--lg { padding:0.9rem 2rem; font-size:var(--fs-sm); }

/* ================================================================
    7. UTILITIES
   ================================================================ */
.container {
  width:92%;
  max-width:var(--max-w);
  margin-inline:auto;
}

/* Kategorie-Label über Überschriften */
.section-tag {
  display:inline-block;
  font-family:var(--ff-body);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red-light);
  padding:0.2rem 0.65rem;
  border:1px solid oklch(46% 0.2 20 / 0.35);
  border-radius:var(--r-sm);
  margin-bottom:0.85rem;
}

.section-tag--dark {
  color:var(--red);
  border-color:oklch(46% 0.2 20 / 0.4);
}

/* Abschnittstitel */
.section-heading {
  font-family:var(--ff-display);
  font-size:var(--fs-xl);
  font-weight:700;
  line-height:1.06;
  letter-spacing:0.01em;
  color:var(--text);
  margin-bottom:1rem;

  & strong { color:var(--red-light); }

  & em {
    font-style:italic;
    font-weight:400;
    color:oklch(65% 0.02 240);
  }

  /* Variante für helle Sektionen */
  &.section-heading--dark {
    color:var(--text-on-light);

    & strong { color:var(--red); }
  }
}

.section-body {
  font-size:var(--fs-base);
  font-weight:300;
  color:var(--text-mid);
  line-height:1.8;
  max-width:52ch;
  margin-bottom:1.5rem;
}

.section-head {
  text-align:center;
  margin-bottom:var(--space-lg);
}

.section-sub {
  font-size:var(--fs-base);
  color:var(--text-mid);
  max-width:55ch;
  margin-inline:auto;
  margin-top:0.5rem;

  &.section-sub--dark { color:var(--text-on-light-mid); }
}

/* ================================================================
    8. SEKTION-VARIANTEN
   ================================================================ */
.section {
  padding-block:var(--space-2xl);
}

.section--dark { background:var(--bg-base); }

.section--light { background:var(--bg-light); }

/* Roter Top-Akzentstreifen */
.section--accent-top {
  border-top:3px solid var(--red);
}

/* Gradient CTA-Sektion */
.section--cta {
  background:linear-gradient(
    135deg,
    var(--bg-deep) 0%,
    oklch(12% 0.03 15) 50%,
    var(--bg-deep) 100%
  );
  border-top:1px solid var(--border);
}

/* ================================================================
    9. NAVIGATION
   ================================================================ */
.site-header {
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:100;
  display:flex;
  align-items:center;
  transition:background var(--med), border-color var(--med);
  border-bottom:1px solid transparent;

  /* Scrolled-State: dunkler Hintergrund mit Glaseffekt */
  &.is-scrolled {
    background:oklch(9% 0.015 240 / 0.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom-color:var(--border);
  }
}

.site-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
}

.nav__logo {
  display:flex;
  flex-direction:column;
  line-height:1.2;
  text-decoration:none;
}

.nav__logo-main {
  font-family:var(--ff-display);
  font-size:clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--text);
  transition:color var(--fast);
}

.nav__logo-sub {
  font-size:0.6rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--red-light);
}

.nav__logo:hover .nav__logo-main { color:var(--red-light); }

.nav__links {
  display:none;
  list-style:none;
  align-items:center;
  gap:var(--space-md);
}

.nav__link {
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-mid);
  transition:color var(--fast);
  position:relative;
  padding-bottom:2px;

  /* Unterstrich-Effekt beim Hover */
  &::after {
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:0; height:1px;
    background:var(--red);
    transition:width var(--med);
  }

  &:hover, &:focus-visible {
    color:var(--text);

    &::after { width:100%; }
  }
}

.nav__cta { display:none; }

/* Hamburger */
.nav__hamburger {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:4px;
  cursor:pointer;
  background:transparent;
  border:none;

  & span {
    display:block;
    width:22px;
    height:1.5px;
    background:var(--text);
    border-radius:2px;
    transition:transform var(--med), opacity var(--fast);
  }

  /* Aktiv: X-Form */
  &.is-active {
    & span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
    & span:nth-child(2) { opacity:0; }
    & span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
  }
}

/* Mobile Overlay-Menü */
.nav__links {
  &.is-open {
    display:flex;
    position:fixed;
    top:var(--nav-h); left:0; right:0; bottom:0;
    background:oklch(9% 0.015 240 / 0.97);
    backdrop-filter:blur(12px);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:var(--space-md);
    z-index:99;

    & .nav__link {
      font-family:var(--ff-display);
      font-size:var(--fs-lg);
      letter-spacing:0.08em;
      color:var(--text);
    }
  }
}

/* ================================================================
    10. HERO
   ================================================================ */
.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.hero__bg {
  position:absolute;
  inset:0;
  z-index:0;

  &::after {
    content:'';
    position:absolute;
    inset:0;
    background:
      linear-gradient(to top,  oklch(9% 0.015 240 / 0.97) 0%, oklch(9% 0.015 240 / 0.55) 45%, transparent 72%),
      linear-gradient(to right, oklch(9% 0.015 240 / 0.65) 0%, transparent 60%);
  }
}

.hero__bg-img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero__content {
  position:relative;
  z-index:2;
  padding-bottom:clamp(4rem, 8svh, 6.5rem);
}

.hero__eyebrow {
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red-light);
  margin-bottom:1.25rem;
  opacity:0;
  animation:heroFadeUp 0.7s var(--ease) 0.3s forwards;
}

/* Dekorative Linie vor dem Eyebrow-Text */
.hero__eyebrow-line {
  display:block;
  width:32px;
  height:1px;
  background:var(--red);
  flex-shrink:0;
}

.hero__title {
  font-family:var(--ff-display);
  font-size:var(--fs-hero);
  font-weight:700;
  line-height:0.96;
  letter-spacing:0.02em;
  color:var(--text);
  margin-bottom:1.25rem;
  max-width:700px;
  opacity:0;
  animation:heroFadeUp 0.7s var(--ease) 0.55s forwards;

  & strong { color:#fff; }

  /* "2026." kursiv als visueller Akzent */
  & em {
    font-style:italic;
    font-weight:400;
    color:oklch(65% 0.02 240);
    font-size:0.75em;
  }
}

.hero__sub {
  font-size:var(--fs-md);
  font-weight:300;
  color:var(--text-mid);
  max-width:480px;
  line-height:1.7;
  margin-bottom:2rem;
  opacity:0;
  animation:heroFadeUp 0.7s var(--ease) 0.75s forwards;
}

.hero__actions {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  opacity:0;
  animation:heroFadeUp 0.7s var(--ease) 0.9s forwards;
}

/* Statistiken rechts unten im Hero */
.hero__stats {
  position:absolute;
  bottom:2.5rem;
  right:4%;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  text-align:right;
  opacity:0;
  animation:heroFadeRight 0.7s var(--ease) 1.1s forwards;
}

.hero__stat {
  border-right:2px solid var(--red);
  padding-right:0.75rem;
}

.hero__stat-num {
  display:block;
  font-family:var(--ff-display);
  font-size:clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight:700;
  line-height:1;
  color:var(--text);
}

.hero__stat-label {
  display:block;
  font-size:var(--fs-xs);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-top:2px;
}

/* Hero-Einblend-Keyframes */
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}

@keyframes heroFadeRight {
  from { opacity:0; transform:translateX(12px); }
  to   { opacity:1; transform:none; }
}

/* ================================================================
    11. MARQUEE / LAUFBAND
    Inhalt wird per JS verdoppelt → nahtloser endloser Loop.
   ================================================================ */
.marquee {
  background:var(--red);
  overflow:hidden;
  padding:0.65rem 0;
  border-top:1px solid oklch(46% 0.2 20 / 0.4);
  border-bottom:1px solid oklch(9% 0.015 240 / 0.3);
}

.marquee__track {
  display:flex;
  width:max-content;
  animation:marqueeScroll 65s linear infinite;
}

@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* Einzelnes Marquee-Element (wird per JS erzeugt) */
.marquee__item {
  display:inline-flex;
  align-items:center;
  gap:1.25rem;
  padding:0 2.5rem;
  font-family:var(--ff-display);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:oklch(98% 0 0 / 0.9);
  white-space:nowrap;
}

.marquee__sep {
  width:4px;
  height:4px;
  background:oklch(98% 0 0 / 0.4);
  border-radius:50%;
  flex-shrink:0;
}

/* ================================================================
    12. ÜBER DIE VERANSTALTUNG (about)
   ================================================================ */
.about-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
  align-items:center;
}

.about__media { position:relative; }

.about__img-frame {
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4 / 5;
  border:1px solid var(--border-light);

  & img {
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* Schwebendes Badge auf dem Bild */
.about__badge {
  position:absolute;
  bottom:-1.25rem;
  right:-0.5rem;
  background:var(--bg-card);
  border:1px solid var(--border-light);
  border-left:3px solid var(--red);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:1rem 1.25rem;
  z-index:2;
}

.about__badge-num {
  font-family:var(--ff-display);
  font-size:2rem;
  font-weight:700;
  color:var(--red-light);
  line-height:1;
}

.about__badge-label {
  font-size:var(--fs-xs);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-top:3px;
}

/* Fakten-Liste */
.fact-list {
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  margin-top:1.5rem;
}

.fact-list__item {
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.65rem 0.9rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:2px solid var(--red);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm);
  color:var(--text-mid);
  transition:background var(--fast), color var(--fast);

  &:hover { background:var(--bg-card-h); color:var(--text); }
}

.fact-list__icon {
  color:var(--red);
  font-size:var(--fs-sm);
  font-weight:700;
  flex-shrink:0;
}

/* ================================================================
    13. PROGRAMM-KARTEN
    Container Query: Karte reagiert auf eigene Breite.
   ================================================================ */
.prog-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
}

/* Karte ist ihr eigener Container */
.prog-card {
  container-type:inline-size;
  container-name:prog-card;
  background:var(--bg-light);
  border:1px solid var(--border-on-light);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow var(--med), transform var(--fast);

  &:hover {
    box-shadow:0 12px 40px oklch(0% 0 0 / 0.12);
    transform:translateY(-3px);
  }
}

.prog-card__img-wrap {
  aspect-ratio:16 / 9;
  overflow:hidden;
  position:relative;

  & img {
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Roter Gradient am unteren Rand des Bildes */
  &::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:40%;
    background:linear-gradient(to top, oklch(96% 0.005 240), transparent);
  }
}

.prog-card__body { padding:1.5rem; }

.prog-card__num {
  font-family:var(--ff-display);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.2em;
  color:var(--red);
  display:block;
  margin-bottom:0.4rem;
}

.prog-card__title {
  font-family:var(--ff-display);
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--text-on-light);
  line-height:1.2;
  margin-bottom:0.6rem;
}

.prog-card__desc {
  font-size:var(--fs-sm);
  font-weight:300;
  color:var(--text-on-light-mid);
  line-height:1.7;
  margin-bottom:1rem;
}

.prog-card__time {
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--red);
  letter-spacing:0.06em;
  padding-top:0.75rem;
  border-top:1px solid var(--border-on-light);
}

/* Container Query: ab 360px breiter Karte → horizontales Layout */
@container prog-card (min-width: 360px) {
  .prog-card__title { font-size:clamp(1.4rem, 4cqi, 1.9rem); }
}

/* ================================================================
    14. SPLIT-GRID (Vorschießen & Ort)
    Zweispaltiges Text-/Bild-Layout.
   ================================================================ */
.split-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
  align-items:center;
}

/* Reihenfolge umkehren für die Ort-Sektion */
.split-grid--reverse .split-grid__media { order:-1; }

/* Tag-Karten für die beiden Abende */
.day-cards {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  margin-top:1.5rem;
}

.day-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.1rem 1.35rem;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0.9rem;
  align-items:start;
  transition:border-color var(--fast), background var(--fast);

  &:hover { border-color:var(--border-h); background:var(--bg-card-h); }
}

.day-card__tag {
  background:var(--red);
  color:#fff;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.2rem 0.55rem;
  border-radius:var(--r-sm);
  white-space:nowrap;
  margin-top:3px;
}

.day-card__title {
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text);
  margin-bottom:0.25rem;
}

.day-card__detail {
  font-size:var(--fs-xs);
  color:var(--text-mid);
  line-height:1.55;
}

/* Gestapelte Bilder für Vorschießen-Sektion */
.media-stack {
  position:relative;
  max-width:520px;
  margin-inline:auto;
}

.media-stack__main {
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:16 / 10;
  border:1px solid var(--border-light);

  & img { width:100%; height:100%; object-fit:cover; }
}

.media-stack__thumb {
  position:absolute;
  border-radius:var(--r-md);
  overflow:hidden;
  border:2px solid var(--bg-base);
  box-shadow:0 8px 24px oklch(0% 0 0 / 0.4);

  & img { width:100%; height:100%; object-fit:cover; }
}

/* Thumbnail 1: unten links, etwas überlappt */
.media-stack__thumb--1 {
  width:42%;
  aspect-ratio:4 / 3;
  bottom:-1.25rem;
  left:-0.75rem;
  z-index:2;
}

/* Thumbnail 2: unten rechts */
.media-stack__thumb--2 {
  width:36%;
  aspect-ratio:1;
  bottom:-1.5rem;
  right:1.5rem;
  z-index:3;
}

/* ================================================================
    15. ZULASSUNG
   ================================================================ */
.admission-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
  align-items:start;
}

/* Hinweis-Box in der Zulassungssektion */
.admission-note {
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  padding:0.85rem 1rem;
  background:oklch(46% 0.2 20 / 0.08);
  border:1px solid oklch(46% 0.2 20 / 0.25);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  color:var(--text-on-light-mid);
  margin-top:1.5rem;

  & svg { color:var(--red); flex-shrink:0; margin-top:2px; }
  & strong { color:var(--red); }
  & p { line-height:1.55; }
}

.admission-list {
  display:flex;
  flex-direction:column;
  gap:0.45rem;
}

.admission-item {
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.85rem 1rem;
  background:#fff;
  border:1px solid var(--border-on-light);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  color:var(--text-on-light-mid);
  transition:border-color var(--fast), background var(--fast), color var(--fast);

  &:hover {
    border-color:var(--red);
    background:oklch(96% 0.005 240);
    color:var(--text-on-light);
  }
}

.admission-item__check {
  color:var(--red);
  font-weight:700;
  font-size:0.85rem;
  flex-shrink:0;
}

/* ================================================================
    16. VERANSTALTUNGSORT
   ================================================================ */
.location-rows {
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin-bottom:1.75rem;
}

.location-row dd {
  display:flex;
  align-items:flex-start;
  gap:0.65rem;
  font-size:var(--fs-sm);
  color:var(--text-mid);

  & svg { color:var(--red); flex-shrink:0; margin-top:2px; }
  & strong { color:var(--text); }
}

.location-img-wrap {
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4 / 3;
  border:1px solid var(--border-light);

  & img { width:100%; height:100%; object-fit:cover; }
}

/* ================================================================
    17. GALERIE
   ================================================================ */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
}

.gallery-item {
  overflow:hidden;
  border-radius:var(--r-sm);
  position:relative;
  margin:0;

  & img {
    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio:1;
  }
}

/* Erstes Bild größer */
.gallery-item--large {
  grid-column:span 2;

  & img { aspect-ratio:16 / 9; }
}

/* Caption erscheint beim Hover */
.gallery-item__caption {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:0.5rem 0.75rem;
  background:linear-gradient(to top, oklch(9% 0.015 240 / 0.8), transparent);
  font-size:var(--fs-xs);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:oklch(92% 0.01 240 / 0.85);
  opacity:0;
  transition:opacity var(--med);
}

.gallery-item:hover .gallery-item__caption { opacity:1; }

/* ================================================================
    18. CTA-BLOCK
   ================================================================ */
.cta-block {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:3px solid var(--red);
  border-radius:var(--r-lg);
  padding:clamp(2rem, 5vw, 3.5rem);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
}

.cta-block__heading {
  font-family:var(--ff-display);
  font-size:var(--fs-xl);
  font-weight:700;
  line-height:1.1;
  color:var(--text);
  margin-bottom:0.75rem;

  & strong { color:var(--red-light); }
}

.cta-block__sub {
  font-size:var(--fs-base);
  font-weight:300;
  color:var(--text-mid);
  line-height:1.75;
  max-width:460px;
}

.cta-block__actions {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  align-items:center;
}

/* ================================================================
    19. PORTFOLIO-HINWEIS
   ================================================================ */
.portfolio-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: oklch(8% 0.01 240 / 0.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.portfolio-notice strong { color: var(--red-light); }

.portfolio-notice__link {
  color: var(--text-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.portfolio-notice__link:hover { color: var(--text); }


/* ================================================================
    20. IMPRESSUM-SEKTION
   ================================================================ */
.impressum-section {
  padding-bottom: 5rem; /* Platz für den fixen Portfolio-Hinweis-Banner */
}

.impressum-inner {
  max-width: 56rem;
}

.impressum-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: oklch(14% 0.03 240 / 0.6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin-bottom: 2.5rem;
}

.impressum-notice svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--red-light); }
.impressum-notice strong { color: var(--text); }

.impressum-inner .section-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2rem;
}

.impressum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
  margin-top: 0;
}

.impressum-block {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-mid);
}

.impressum-block__heading {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-light);
  margin-bottom: 0.6rem;
}

.impressum-link {
  color: var(--text-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.impressum-link:hover { color: var(--text); }


/* ================================================================
    21. FOOTER
   ================================================================ */
.site-footer {
  background:var(--bg-deep);
  border-top:1px solid var(--border);
  padding:var(--space-xl) 0 var(--space-lg);
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
  margin-bottom:var(--space-lg);
}

.footer-brand__name {
  font-family:var(--ff-display);
  font-size:clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--text);
  margin-bottom:0.25rem;
}

.footer-brand__tagline {
  font-size:var(--fs-xs);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red-light);
  margin-bottom:0.75rem;
}

.footer-brand__body {
  font-size:var(--fs-sm);
  font-weight:300;
  color:var(--text-dim);
  line-height:1.65;
  max-width:280px;
  margin-bottom:1rem;
}

.footer-brand__badge {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:var(--red-pale);
  border:1px solid oklch(46% 0.2 20 / 0.25);
  border-radius:var(--r-sm);
  padding:0.4rem 0.75rem;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--red-light);
  letter-spacing:0.04em;
}

.footer-col__heading {
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:1.1rem;
}

.footer-col ul {
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}

.footer-col a {
  font-size:var(--fs-sm);
  font-weight:300;
  color:var(--text-mid);
  transition:color var(--fast);

  &:hover, &:focus-visible { color:var(--red-light); }
}

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.75rem;
  padding-top:1.75rem;
  border-top:1px solid var(--border);
}

.footer-bottom__copy {
  font-size:var(--fs-xs);
  color:var(--text-dim);
}

.footer-bottom__legal {
  display:flex;
  gap:1.5rem;

  & a {
    font-size:var(--fs-xs);
    color:var(--text-dim);
    transition:color var(--fast);

    &:hover, &:focus-visible { color:var(--text-mid); }
  }
}

/* ================================================================
    20. MEDIA QUERIES — DESKTOP NAV (ab 768px)
    WICHTIG: Alle @media-Blöcke ausnahmslos am Ende.
   ================================================================ */
@media (min-width: 768px) {
  .nav__hamburger     { display:none; }
  .nav__links         { display:flex !important; position:static !important; background:none !important; flex-direction:row !important; gap:var(--space-md) !important; }
  .nav__links.is-open { position:static; }
  .nav__cta           { display:inline-flex; }

  .nav__link { font-size:var(--fs-xs); }
}

/* ================================================================
    21. MEDIA QUERIES — TABLET (ab 640px)
   ================================================================ */
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns:repeat(4, 1fr); }

  .gallery-item--large {
    grid-column:span 2;

    & img { aspect-ratio:1; }
  }

  .gallery-item img { aspect-ratio:1; }

  .prog-grid { grid-template-columns:1fr 1fr; }

  .footer-grid { grid-template-columns:2fr 1fr 1fr; }

  .cta-block { grid-template-columns:1fr auto; align-items:center; }

  .admission-grid { grid-template-columns:1fr 1fr; }
}

/* ================================================================
    22. MEDIA QUERIES — DESKTOP (ab 960px)
   ================================================================ */
@media (min-width: 960px) {
  .about-grid        { grid-template-columns:5fr 6fr; gap:var(--space-xl); }
  .split-grid        { grid-template-columns:1fr 1fr; gap:var(--space-xl); }
  .prog-grid         { grid-template-columns:repeat(3, 1fr); }
  .admission-grid    { grid-template-columns:1fr 1fr; gap:var(--space-xl); }

  /* Thumbnail-Bilder nur ab Desktop sichtbar */
  .media-stack__thumb { display:block; }

  .split-grid--reverse { & .split-grid__media { order:0; } }

  .hero__stats { display:flex; }
}

/* ================================================================
    23. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }

  .reveal, .stagger > * { opacity:1 !important; transform:none !important; }

  .hero__eyebrow,
  .hero__title,
  .hero__sub,
  .hero__actions,
  .hero__stats { opacity:1 !important; animation:none !important; }
}

/* ================================================================
    24. HIGH CONTRAST
    Nur wenn vom User im OS eingestellt.
   ================================================================ */
@media (prefers-contrast: more) {
  :root {
    --red:oklch(52% 0.22 20);
    --red-light:oklch(62% 0.22 20);
    --text:oklch(98% 0 0);
    --text-mid:oklch(80% 0.01 240);
    --border:oklch(40% 0.03 240);
  }

  .btn--primary { outline:2px solid #fff; }
  .nav__link::after { height:2px; }
}